/* Xiaomo — la couche « encre » des écrans de séance : le grain du papier, le chemin des sept blocs, le dragon qui dit à quoi
   sert l'écran, les cartes comme des feuilles posées, les étiquettes comme des petits cachets, la page qui se tourne.
   Rien ici ne touche à la mécanique : seulement l'apparence. Un seul accent, le vermillon. */

/* ---------- le grain du papier, sur tout l'écran */
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: .055; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>"); }
#app { position: relative; z-index: 1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body::before { mix-blend-mode: screen; opacity: .04; } }
:root[data-theme="dark"] body::before { mix-blend-mode: screen; opacity: .04; }

/* ---------- la séance : un lavis discret dans un coin, qui se déplace d'un bloc à l'autre */
.s-ecran { position: relative; isolation: isolate; }
.s-ecran::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .9;
  background: radial-gradient(ellipse 60% 38% at var(--lavis-x, 90%) var(--lavis-y, 8%), rgba(28,26,23,.09), transparent 70%); filter: blur(18px); transition: background-position var(--d-slow); }
.s-ecran[data-bloc="aujourdhui"] { --lavis-x: 85%; --lavis-y: 6%; }
.s-ecran[data-bloc="souviens"], .s-ecran[data-bloc="visite"] { --lavis-x: 12%; --lavis-y: 10%; }
.s-ecran[data-bloc="apprends"] { --lavis-x: 90%; --lavis-y: 30%; }
.s-ecran[data-bloc="entraine"], .s-ecran[data-bloc="defi_semaine"] { --lavis-x: 8%; --lavis-y: 40%; }
.s-ecran[data-bloc="ecoute"] { --lavis-x: 88%; --lavis-y: 60%; }
.s-ecran[data-bloc="trace"], .s-ecran[data-bloc="trace_bilan"] { --lavis-x: 14%; --lavis-y: 75%; }
.s-ecran[data-bloc="sais"] { --lavis-x: 50%; --lavis-y: 90%; }

/* ---------- le chemin des sept blocs : sept pas sur une ligne d'encre */
.s-points { position: relative; align-items: center; gap: 0; justify-content: space-between; width: min(220px, 100%); margin: 0 auto; }
.s-points::before { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 1.5px; background: var(--line-2); transform: translateY(-50%); }
.s-points i { position: relative; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--line-2); box-sizing: border-box; transition: transform var(--d-quick) var(--e-pop), background var(--d-quick); }
.s-points i.is-done { width: 12px; background: var(--seal); border-color: var(--seal); border-radius: 3px; transform: rotate(-8deg); }
.s-points i.is-now { width: 16px; height: 16px; background: var(--paper); border: 2.5px solid var(--ink); box-shadow: 0 0 0 3px var(--paper); animation: s-pas 2.4s ease-in-out infinite; }
@keyframes s-pas { 0%, 100% { box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px rgba(28,26,23,0); } 50% { box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px rgba(28,26,23,.14); } }

/* ---------- le dragon dit à quoi sert l'écran */
.s-dit { display: grid; grid-template-columns: 46px 1fr; gap: var(--s-3); align-items: start; }
.s-dit-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; border: 2px solid var(--surface); box-shadow: var(--shadow); background: var(--surface-2); margin-top: 2px; }
.s-dit .s-but { position: relative; padding: var(--s-2) 0 0; }
.s-dit .s-but::after { content: ""; display: block; width: 44px; height: 3px; margin-top: 8px; border-radius: 2px; background: linear-gradient(90deg, var(--seal) 0%, var(--seal) 70%, transparent); opacity: .85; }

/* ---------- les cartes : des feuilles posées sur le papier */
.s-corps .x-card { border-color: transparent; box-shadow: var(--shadow); border-radius: 18px 22px 18px 24px / 22px 18px 24px 18px; position: relative; }
.s-corps .x-card::after { content: ""; position: absolute; inset: 5px; border: 1px solid var(--line); border-radius: inherit; pointer-events: none; opacity: .7; }
.s-regle { border-left: none; }
.s-regle::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 5px; border-radius: 3px; background: linear-gradient(var(--seal) 0%, var(--seal) 88%, transparent); z-index: 1; }
.s-general { background: var(--seal-soft); }
.s-lecon .x-label { display: inline-block; padding: 2px 8px; border: 1.2px solid var(--seal); color: var(--seal); border-radius: 2px 4px 2px 5px; transform: rotate(-2deg); text-transform: none; letter-spacing: .02em; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-13); }
.s-titre .x-label, .s-chrono { text-transform: none; letter-spacing: .02em; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-13); color: var(--seal); }
.s-general .x-label { background: var(--seal); color: var(--on-seal); }
.s-titre { padding-top: var(--s-5); padding-bottom: var(--s-5); }

/* ---------- les mots du jour et les tuiles : encre sur papier */
.s-motcarte, .x-tile, .q-tuile, .q-lettre, .s-puce { box-shadow: 0 1px 0 rgba(28,26,23,.06), 0 6px 16px -12px rgba(28,26,23,.25); }
.x-tile.is-correct { box-shadow: 0 0 0 3px var(--seal-soft); }
.s-corps .x-btn--lg:not(.x-btn--secondary):not(.x-btn--ghost):not(.x-btn--quiet) { box-shadow: inset 0 0 0 1.5px rgba(255,253,249,.22), 0 10px 22px -12px rgba(150,41,31,.55); }

/* ---------- la page qui se tourne : chaque écran arrive comme une feuille */
.s-corps > .x-label, .s-corps > .s-dit, .s-corps > #bloc { animation: s-feuille var(--d-move) var(--e-out) both; }
.s-corps > .s-dit { animation-delay: 40ms; }
.s-corps > #bloc { animation-delay: 90ms; }
@keyframes s-feuille { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .s-corps > * { animation: none !important; } .s-points i.is-now { animation: none; } }

/* ---------- Je sais faire : la feuille signée */
.s-fin { position: relative; padding: var(--s-8) var(--s-4); margin-top: var(--s-2); }
.s-fin::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--line-2); border-radius: 6px; pointer-events: none; }
.s-fin::after { content: ""; position: absolute; inset: 5px; border: 1px solid var(--line); border-radius: 4px; pointer-events: none; }
.s-fin-dragon { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; border: 3px solid var(--surface); box-shadow: var(--shadow-lift); }
.s-fin .s-sceau { margin-top: calc(-1 * var(--s-6)); position: relative; z-index: 1; }
.s-sait::after { content: ""; display: block; width: 64px; height: 3px; margin: 10px auto 0; border-radius: 2px; background: var(--seal); opacity: .85; }

/* ---------- le compagnon réagit : le portrait sursaute, un mot chinois appris apparaît */
.s-dit { position: relative; }
.s-dit-avatar { object-position: 50% 45%; transition: transform var(--d-quick) var(--e-pop); }
.s-dit-avatar.is-react { animation: s-react .5s var(--e-pop); }
@keyframes s-react { 0% { transform: scale(1); } 40% { transform: scale(1.18) rotate(-6deg); } 100% { transform: scale(1); } }
.s-dit-mot { position: absolute; left: 0; top: 50px; font-family: var(--font-zh); font-size: var(--fs-16); color: var(--seal); background: var(--surface); border: 1px solid var(--seal); border-radius: 2px 10px 10px 10px; padding: 1px 8px; opacity: 0; transform: translateY(-6px) scale(.9); transition: opacity .25s, transform .3s var(--e-pop); pointer-events: none; z-index: 2; }
.s-dit-mot.is-in { opacity: 1; transform: none; }

/* ---------- jade = juste, vermillon = gagné, encre diluée = pas encore */
.q-ok { color: var(--jade); }
.q-ok::before { content: "✓ "; font-weight: 700; }
.x-tile.is-correct { border-color: var(--jade); background: var(--jade-soft); color: var(--jade); box-shadow: 0 0 0 3px var(--jade-soft); }
.q-tuile.is-on, .q-lettre.is-on, .s-puce.is-on, .s-motcarte.is-on { border-color: var(--ink); background: var(--surface-2); color: var(--ink); }
.x-tile.is-correct svg path { stroke: currentColor; }
.q-regle-gen { font-family: var(--font-display); color: var(--ink-2); font-size: var(--fs-15); display: flex; gap: 8px; align-items: baseline; }
.q-regle-gen .x-label { display: inline-block; padding: 1px 7px; border: 1.2px solid var(--seal); color: var(--seal); border-radius: 2px 4px 2px 5px; transform: rotate(-2deg); text-transform: none; letter-spacing: .02em; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-13); flex: none; }
/* ---------- espace parent et collection : un seul sur-titre en capitales (le titre de page) ; les autres en serif, touche de rouge */
.a-page section .x-label, .a-page .x-card .x-label, .a-page .x-strip .x-k, .a-page details .x-label { text-transform: none; letter-spacing: .02em; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-14); color: var(--seal); }
.a-page .x-strip .x-k { color: var(--ink-2); font-size: var(--fs-13); }
.a-page .x-card, .a-page section.x-card { border-color: transparent; box-shadow: var(--shadow); border-radius: 18px 22px 18px 24px / 22px 18px 24px 18px; }
.a-page .x-strip .x-k { font-size: var(--fs-12); white-space: normal; line-height: 1.15; }

/* ---------- le carnet du jour : une feuille, la règle, les mots, le caractère */
.c-feuille { display: grid; gap: var(--s-4); }
.c-part { display: grid; gap: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.c-sur { font-family: var(--font-display); font-style: italic; font-size: var(--fs-18); color: var(--ink-2); margin: 0; }
.c-regle { margin: 0; line-height: 1.5; }
.c-lettres { margin: 0; font-size: 1.4rem; letter-spacing: .08em; }
.c-aide { margin: 0; font-size: var(--fs-12); }
.c-mots, .c-traces { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.c-mot, .c-trace { display: grid; justify-items: center; gap: 2px; min-width: 96px; padding: var(--s-2) var(--s-3); background: var(--paper); border: 1px solid var(--line); border-radius: 12px 14px 12px 16px / 14px 12px 16px 12px; text-align: center; color: inherit; font: inherit; cursor: pointer; transition: transform var(--d-quick) var(--e-pop), border-color var(--d-quick); }
.c-mot .h-mot { display: grid; justify-items: center; gap: 2px; }
.c-mot .h-zh { font-family: var(--font-zh); font-size: var(--hz-s); line-height: 1.15; }
.c-mot .h-py { color: var(--ink-2); font-size: var(--fs-12); }
.c-mot .h-sens { font-size: var(--fs-12); color: var(--ink-2); font-weight: 400; max-width: 140px; }
.c-trace .x-hanzi { font-size: var(--hz-m); line-height: 1.1; }
.c-trace .x-pinyin { font-size: var(--fs-12); }
.c-trace .x-muted { font-size: var(--fs-12); max-width: 140px; }
.c-mot:active, .c-trace:active, .c-mot.is-dit, .c-trace.is-dit { transform: scale(.97); border-color: var(--seal); }
.c-actions { display: grid; gap: var(--s-2); margin-top: var(--s-4); }

/* ---------- la note de prononciation : les mots colorés, une phrase du dragon */
.p-note { margin: var(--s-2) 0 0; text-align: center; }
.p-mots { margin: 0 0 4px; font-family: var(--font-zh); font-size: var(--hz-s); line-height: 1.3; }
.p-mot { display: inline-block; padding: 0 2px; border-bottom: 3px solid transparent; }
.p-mot.is-bien { border-bottom-color: var(--jade); }
.p-mot.is-moyen { border-bottom-color: var(--line-2); }
.p-mot.is-faible { color: var(--seal); border-bottom-color: var(--seal); }
.p-phrase { margin: 0; color: var(--ink-2); }
.p-phrase.is-bien { color: var(--jade); }
.p-score { display: inline-block; margin-left: 6px; font-family: var(--font-display); font-size: var(--fs-12); opacity: .7; }

.q-libre { margin-top: var(--s-3); text-align: center; }
.q-credit { font-size: var(--fs-12); color: var(--ink-2); opacity: .8; }

/* ---------- les cartes à retourner (révision libre, depuis la collection) */
.k-page { gap: var(--s-4); }
.k-sens-choix { display: flex; gap: var(--s-2); justify-content: center; }
.k-carte { position: relative; height: 240px; max-width: 360px; margin: 0 auto; width: 100%; perspective: 1000px; cursor: pointer; }
.k-face { position: absolute; inset: 0; display: grid; place-content: center; gap: var(--s-2); text-align: center; padding: var(--s-4); background: var(--surface); border-radius: 18px 22px 18px 24px / 22px 18px 24px 18px; box-shadow: var(--shadow); backface-visibility: hidden; transition: transform .5s var(--e-pop); }
.k-face::after { content: ""; position: absolute; inset: 6px; border: 1px solid var(--line); border-radius: inherit; pointer-events: none; opacity: .7; }
.k-verso { transform: rotateY(180deg); }
.k-carte.is-verso .k-recto { transform: rotateY(180deg); }
.k-carte.is-verso .k-verso { transform: rotateY(0); }
.k-zh { font-family: var(--font-zh); font-size: min(var(--hz-l), 20vw); margin: 0; line-height: 1.15; white-space: nowrap; letter-spacing: .04em; }
.k-py { margin: 0; color: var(--ink-2); font-size: var(--fs-18); }
.k-sens { margin: 0; font-family: var(--font-display); font-size: var(--fs-22, 1.4rem); }
.k-son { position: absolute; right: 12px; bottom: 10px; }
.k-actions .x-hstack { justify-content: center; gap: var(--s-3); }
.k-fin { display: grid; gap: var(--s-3); justify-items: center; text-align: center; }
@media (prefers-reduced-motion: reduce) { .k-face { transition: none; } }