/* ============================================================================
   Expressions françaises — thème ARCADE / RÉTRO · v5 « Crumbskees »
   Principes repris de crumbskees.com : palette resserrée ULTRA-saturée à plat,
   contours NOIR PUR, ombres dures (volume), display cerné, fond « blobs » +
   bandeau défilant. Les noms de classes viennent de js/engine.js — restyler ici
   suffit (aucun changement HTML/JS : le marquee est un ::before CSS).
   ========================================================================== */

:root{
  --ink:#0B0B0B;            /* contours & texte : NOIR PUR (look sticker) */
  --paper:#FFFFFF;          /* cartes : blanc franc */

  /* Palette Crumbskees — saturée, posée à plat */
  --indigo:#3F1BD0;         /* fond dominant + HUD + marquee (confirmé CSS) */
  --red:#EC504F;            /* corail : CTA, erreur          (confirmé CSS) */
  --yellow:#FFE945;         /* accent, anecdote, wordmark    (confirmé CSS) */
  --green:#17BE6B;          /* bonne réponse */
  --cyan:#2FC6D6;
  --pink:#F4A9C4;
  --purple:#7A3BEF;
  --orange:#F26B21;
  --blue:#2B54D8;

  --bg1:#3F1BD0; --bg2:#F26B21;

  --b:4px;                  /* bordures plus épaisses (3→4) */
  --shadow:6px 6px 0 var(--ink);
  --shadow-sm:4px 4px 0 var(--ink);
  --r:14px;
  --pix:'Press Start 2P', 'Courier New', monospace;
  --body:'Baloo 2', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*{box-sizing:border-box}
html{overflow-x:hidden}
html,body{margin:0}
body{
  font-family:var(--body); font-weight:600; color:var(--ink);
  /* Fond « blobs » : champs de couleur organiques saturés sur base indigo,
     + trame de points par-dessus (façon Crumbskees). */
  background:
    radial-gradient(circle at 12% 18%, rgba(0,0,0,.10) 0 2px, transparent 3px) 0 0/26px 26px,
    radial-gradient(58% 52% at 80% 20%, var(--yellow) 0 38%, transparent 72%),
    radial-gradient(54% 50% at 16% 74%, var(--red) 0 38%, transparent 72%),
    radial-gradient(50% 46% at 88% 82%, var(--purple) 0 40%, transparent 72%),
    radial-gradient(46% 42% at 40% 30%, var(--orange) 0 40%, transparent 72%),
    var(--indigo);
  background-attachment:fixed;
  /* 'safe center' : centré quand ça tient, aligné en haut (et scrollable) quand ça déborde */
  display:flex; align-items:safe center; justify-content:center; min-height:100vh;
  padding:52px 20px 20px;   /* padding-top laisse la place au marquee fixe */
  -webkit-font-smoothing:antialiased;
}

/* ---- marquee (bandeau défilant, 100% CSS via ::before) ---- */
body::before{
  content:"◆ EXPRESSIONS FRANÇAISES · LE JEU DES PARLERS RÉGIONAUX · CHOCOLATINE OU PAIN AU CHOCOLAT ? · WASSINGUE · CAGOUILLE · DRACHE · PEUCHÈRE · ◆ EXPRESSIONS FRANÇAISES · LE JEU DES PARLERS RÉGIONAUX · CHOCOLATINE OU PAIN AU CHOCOLAT ? · WASSINGUE · CAGOUILLE · DRACHE · PEUCHÈRE · ";
  position:fixed; top:0; left:0; z-index:60; width:max-content;
  font-family:var(--pix); font-size:13px; line-height:1; letter-spacing:.04em;
  color:var(--yellow); background:var(--indigo);
  border-bottom:var(--b) solid var(--ink);
  padding:11px 0; white-space:nowrap;
  text-shadow:2px 2px 0 var(--ink);
  animation:ticker 34s linear infinite;
}
@keyframes ticker{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion:reduce){ body::before{animation:none} }
/* Marquee visible uniquement sur les menus (écrans avec .home-actions).
   Dès qu'une partie est lancée (question, révélation, score…), on le retire
   et on récupère l'espace réservé en haut. */
body:not(:has(.home-actions))::before{display:none}
body:not(:has(.home-actions)){padding-top:20px}

.pix{font-family:var(--pix)}
.app{width:100%; max-width:580px}

/* ---- animations d'apparition (rapides & fun) ----
   Rejouées à chaque rendu d'écran (engine.js réécrit #screen).
   fill 'backwards' : l'état initial s'applique avant le départ, mais APRÈS
   l'anim on repasse aux styles normaux → les :hover/:active (transform) marchent. */
@keyframes popIn{
  0%  {opacity:0; transform:translateY(16px) scale(.86)}
  62% {opacity:1; transform:translateY(-3px) scale(1.03)}
  100%{opacity:1; transform:translateY(0) scale(1)}
}
@keyframes popTerm{
  0%  {opacity:0; transform:translateY(10px) scale(.7) rotate(-2deg)}
  55% {opacity:1; transform:translateY(0) scale(1.12) rotate(1.5deg)}
  100%{opacity:1; transform:scale(1) rotate(0)}
}
#screen > *{animation:popIn .26s cubic-bezier(.18,.9,.32,1.4) backwards}
#screen > *:nth-child(1){animation-delay:.00s}
#screen > *:nth-child(2){animation-delay:.05s}
#screen > *:nth-child(3){animation-delay:.10s}
#screen > *:nth-child(4){animation-delay:.15s}
#screen > *:nth-child(5){animation-delay:.20s}
#screen > *:nth-child(6){animation-delay:.24s}
#screen > *:nth-child(n+7){animation-delay:.27s}
/* le mot mis en jeu : pop plus marqué (#screen pour battre la spécificité de #screen>*) */
#screen .term{animation:popTerm .3s cubic-bezier(.2,.9,.3,1.5) backwards; animation-delay:.12s}
/* réponses & lignes de classement : cascade individuelle */
.choice, .lbrow, .brow{animation:popIn .24s cubic-bezier(.18,.9,.32,1.4) backwards}
.choice:nth-child(1){animation-delay:.10s}
.choice:nth-child(2){animation-delay:.17s}
.choice:nth-child(3){animation-delay:.24s}
.choice:nth-child(4){animation-delay:.31s}
.bigscore{animation:popTerm .42s cubic-bezier(.2,.9,.28,1.6) backwards; animation-delay:.05s}
@media (prefers-reduced-motion:reduce){
  #screen > *, .term, .choice, .lbrow, .brow, .bigscore{animation:none}
}

/* ---- carte principale ---- */
.card{
  background:var(--paper); border:var(--b) solid var(--ink); border-radius:var(--r);
  box-shadow:8px 8px 0 var(--ink); overflow:hidden;
}
.pad{padding:24px}

/* ---- HUD (barre du haut) ---- */
.topbar{display:flex; align-items:center; gap:12px; padding:14px 16px;
  border-bottom:var(--b) solid var(--ink); background:var(--indigo);}
.brand{font-family:var(--pix); font-size:14px; line-height:1.5; color:#fff; text-shadow:2px 2px 0 var(--ink)}
.brand small{display:block; font-family:var(--body); font-weight:700; color:#F0E9FF; font-size:12.5px; text-shadow:none; margin-top:5px}
.spacer{flex:1}
.pill{font-family:var(--pix); font-size:12px; padding:9px 11px; border:var(--b) solid var(--ink);
  border-radius:10px; background:var(--yellow); box-shadow:var(--shadow-sm); white-space:nowrap}
.pill.score{background:var(--green); color:#fff; text-shadow:1px 1px 0 var(--ink)}

/* ---- barre de progression segmentée ---- */
.progress{height:14px; background:#EFE7FF; border-bottom:var(--b) solid var(--ink);
  background-image:repeating-linear-gradient(90deg,#EFE7FF 0 22px,#E2D6FF 22px 24px);}
.progress > i{display:block; height:100%; width:0; background:var(--pink);
  background-image:repeating-linear-gradient(90deg,var(--pink) 0 20px,var(--red) 20px 24px);
  border-right:var(--b) solid var(--ink); transition:width .25s}

/* ---- accueil ---- */
h1{font-family:var(--pix); font-size:27px; line-height:1.6; margin:6px 0 20px; color:var(--ink);
  text-shadow:3px 3px 0 var(--yellow)}
.lede{font-size:19px; line-height:1.5; margin:0 0 22px; color:#4a3f63; font-weight:600}
.btn{
  appearance:none; cursor:pointer; font-family:var(--pix); font-size:16px; line-height:1.5;
  width:100%; padding:18px 20px; color:#fff; background:var(--red);
  border:var(--b) solid var(--ink); border-radius:12px; box-shadow:var(--shadow);
  text-shadow:1px 1px 0 var(--ink); transition:transform .05s, box-shadow .05s;
}
.btn:hover{transform:translate(-1px,-1px); box-shadow:7px 7px 0 var(--ink)}
.btn:active{transform:translate(4px,4px); box-shadow:2px 2px 0 var(--ink)}
.btn.ghost{background:#fff; color:var(--ink); text-shadow:none}

.modes-preview{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px}
.chip{font-size:15px; font-weight:800; color:#fff; background:var(--blue);
  border:var(--b) solid var(--ink); border-radius:9px; padding:7px 11px; box-shadow:2px 2px 0 var(--ink)}
.chip.soon{background:#EDE6FF; color:#6a5f86}

/* ---- question ---- */
.mode-tag{display:inline-flex; align-items:center; gap:8px; font-family:var(--pix); font-size:13px;
  color:#fff; background:var(--orange); border:var(--b) solid var(--ink); border-radius:9px;
  padding:9px 12px; box-shadow:2px 2px 0 var(--ink); margin-bottom:18px; text-shadow:1px 1px 0 var(--ink)}
.mode-tag .dot{display:none}
.prompt{font-size:18px; color:#6a5f86; font-weight:700; margin:0 0 8px}
/* Question : le texte d'intro à la MÊME taille que le mot en jeu (.term) pour
   une lecture d'un seul tenant. Cible seulement le .prompt suivi d'un .term
   (donc pas « Score final », labels multijoueur, etc. qui gardent leur taille). */
.prompt:has(+ .term){font-size:38px; line-height:1.15; margin:0 0 8px}
.term{font-size:38px; font-weight:800; line-height:1.15; margin:0 0 22px; color:var(--ink)}
.term em{font-style:normal; color:var(--red)}

.choices{display:grid; gap:12px}
.choice{
  text-align:left; display:flex; align-items:center; gap:12px; cursor:pointer;
  background:#fff; color:var(--ink); font-family:var(--body); font-size:19px; font-weight:700;
  border:var(--b) solid var(--ink); border-radius:12px; padding:16px 17px; box-shadow:var(--shadow-sm);
  transition:transform .05s, box-shadow .05s, background .1s;
}
.choice:hover:not(:disabled){transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink)}
.choice:active:not(:disabled){transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink)}
.choice .key{flex:0 0 34px; width:34px; height:34px; border-radius:8px; border:var(--b) solid var(--ink);
  display:grid; place-items:center; font-family:var(--pix); font-size:13px; color:#fff; text-shadow:1px 1px 0 var(--ink)}
.choice:nth-child(1) .key{background:var(--red)}
.choice:nth-child(2) .key{background:var(--blue)}
.choice:nth-child(3) .key{background:var(--green)}
.choice:nth-child(4) .key{background:var(--purple)}
.choice:disabled{cursor:default}
.choice.good{background:var(--green); color:#fff; text-shadow:1px 1px 0 var(--ink)}
.choice.good .key{background:#fff; color:var(--green); text-shadow:none}
.choice.bad{background:var(--red); color:#fff; text-shadow:1px 1px 0 var(--ink)}
.choice.bad .key{background:#fff; color:var(--red); text-shadow:none}
.choice.dim{opacity:.55}

/* ---- chrono ---- */
.timer{height:16px; margin:18px 0 4px; background:#EFE7FF; border:var(--b) solid var(--ink);
  border-radius:10px; overflow:hidden}
.timer > i{display:block; height:100%; width:100%; background:var(--green); transition:width .1s linear}
.timer.warn > i{background:var(--yellow)}
.timer.crit > i{background:var(--red)}

/* ---- révélation ---- */
.banner{display:flex; align-items:center; gap:12px; padding:14px 15px; margin-bottom:16px;
  border:var(--b) solid var(--ink); border-radius:12px; box-shadow:var(--shadow-sm)}
.banner.win{background:var(--green); color:#fff}
.banner.lose{background:var(--red); color:#fff}
.banner .ico{font-size:26px; filter:drop-shadow(2px 2px 0 rgba(0,0,0,.3))}
.banner b{font-family:var(--pix); font-size:14px; line-height:1.5; display:block; text-shadow:1px 1px 0 var(--ink)}
.banner span{font-size:17px; font-weight:700}

.stat{font-size:16px; font-weight:700; color:#4a3f63; margin:2px 0 16px; display:flex; align-items:center; gap:8px}
.stat b{font-family:var(--pix); font-size:13px; color:var(--ink)}
.statbar{flex:1; height:14px; background:#EFE7FF; border:var(--b) solid var(--ink); border-radius:8px; overflow:hidden}
.statbar > i{display:block; height:100%; background:var(--blue); transition:width .3s}
.src{font-family:var(--pix); font-size:8px; padding:5px 7px; border:2px solid var(--ink); border-radius:6px;
  background:var(--cyan); color:var(--ink)}
.src.local{background:#EDE6FF; color:#6a5f86}

.anecdote{background:var(--yellow); border:var(--b) solid var(--ink); border-radius:12px;
  padding:15px 16px; font-size:17px; line-height:1.55; font-weight:600; color:var(--ink);
  box-shadow:var(--shadow-sm); margin:6px 0 4px}
.anecdote b{font-weight:800}

/* ---- carte ---- */
.maptitle{font-family:var(--pix); font-size:12px; color:var(--ink); margin:18px 0 8px}
.mapwrap{background:#EAF4FF; border:var(--b) solid var(--ink); border-radius:14px; padding:8px; box-shadow:var(--shadow-sm)}
svg.france{width:100%; height:auto; display:block}
.region{fill:#CFE0F5; stroke:var(--ink); stroke-width:1.8; transition:fill .15s}
.region.click{cursor:pointer}
.region.click:hover{fill:var(--yellow)}
.region.hit{fill:var(--red)}
.region.pick-wrong{fill:var(--orange)}
.rlabel{font-size:9.5px; font-weight:800; fill:#3a3357; pointer-events:none; text-anchor:middle; font-family:var(--body)}
.rlabel.on{fill:#fff}
.maphint{font-size:17px; font-weight:700; color:#6a5f86; text-align:center; margin:8px 0 2px}

.actions{margin-top:20px}

/* ---- écran final ---- */
.final{text-align:center}
.bigscore{font-family:var(--pix); font-size:58px; line-height:1.2; margin:12px 0 4px; color:var(--ink);
  text-shadow:5px 5px 0 var(--yellow)}
.final .sub{font-size:17px; font-weight:700; color:#4a3f63; margin:0 0 18px}
.breakdown{display:grid; gap:10px; text-align:left; margin:18px 0}
.brow{display:flex; justify-content:space-between; align-items:center; font-size:17px; font-weight:700;
  padding:12px 15px; background:#fff; border:var(--b) solid var(--ink); border-radius:11px; box-shadow:2px 2px 0 var(--ink)}
.brow b{font-family:var(--pix); font-size:13px}

/* ---- accueil : boutons ---- */
.home-actions{display:grid; gap:10px}
.chaltag{display:inline-block; font-family:var(--pix); font-size:11px; color:#fff; background:var(--purple);
  border:var(--b) solid var(--ink); border-radius:8px; padding:7px 10px; box-shadow:2px 2px 0 var(--ink); margin:2px 0 12px}

/* ---- classement ---- */
.lb{margin:18px 0 4px; text-align:left}
.lbhead{font-family:var(--pix); font-size:14px; color:var(--ink); display:flex; align-items:center; gap:8px; margin-bottom:10px}
.lbform{display:flex; gap:8px; margin-bottom:12px}
.pseudo{flex:1; font-family:var(--body); font-weight:700; font-size:17px; color:var(--ink);
  background:#fff; border:var(--b) solid var(--ink); border-radius:11px; padding:12px 14px; box-shadow:2px 2px 0 var(--ink)}
.pseudo:focus{outline:none; background:#FFFEF4}
.pseudo:disabled{opacity:.6}
.btn.save{width:auto; font-size:13px; padding:12px 15px; background:var(--blue)}
.board{display:grid; gap:8px}
.lbrow{display:flex; align-items:center; gap:10px; font-size:17px; font-weight:700;
  background:#fff; border:var(--b) solid var(--ink); border-radius:11px; padding:10px 13px; box-shadow:2px 2px 0 var(--ink)}
.lbrow.me{background:var(--yellow)}
.lbrow .lbrank{font-family:var(--pix); font-size:12px; width:28px; height:28px; flex:0 0 28px; border:2px solid var(--ink);
  border-radius:7px; display:grid; place-items:center; background:var(--purple); color:#fff}
.lbrow:nth-child(1) .lbrank{background:var(--yellow); color:var(--ink)}
.lbrow:nth-child(2) .lbrank{background:#C9D2DE; color:var(--ink)}
.lbrow:nth-child(3) .lbrank{background:var(--orange); color:#fff}
.lbrow .lbname{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lbrow b{font-family:var(--pix); font-size:13px}
.lbempty{font-size:16px; font-weight:700; color:#6a5f86; text-align:center; padding:10px}

/* ---- mode soirée (multijoueur) ---- */
.mp-join{display:flex; flex-direction:column; align-items:center; gap:12px; margin:6px 0 4px}
.roomcode{font-family:var(--pix); font-size:40px; letter-spacing:6px; color:var(--ink);
  background:var(--yellow); border:var(--b) solid var(--ink); border-radius:14px; padding:14px 20px; box-shadow:var(--shadow); text-shadow:2px 2px 0 #fff}
.qr{background:#fff; border:var(--b) solid var(--ink); border-radius:12px; padding:10px; box-shadow:var(--shadow-sm); line-height:0}
.qr img, .qr canvas{display:block}
.qr-fallback{font-family:var(--body); font-weight:700; font-size:12px; color:var(--ink); max-width:180px; word-break:break-all; line-height:1.3; text-align:center}
.mp-url{font-size:12px; font-weight:700; color:#6a5f86; word-break:break-all; text-align:center}

/* ---- pied ---- */
.foot{display:none}   /* note de dev masquée (js/modes.js, etc.) */
.foot code{font-family:var(--pix); font-size:10px; background:rgba(255,255,255,.2); padding:2px 5px; border-radius:5px}

/* ============================================================================
   RÉVÉLATION (solo — écran avec .stat) : cadence d'apparition en 3 temps.
   1) « Raté / Bonne réponse ! » surgit EN GROS et seul, puis se réduit
   2) la réponse (carte) + l'explication (anecdote) apparaissent
   3) le % de bons répondants + le bouton « Question suivante »
   Réordonnancement via `order` (le .stat passe après l'anecdote) + cadence
   via `animation-delay`. 100 % CSS. Ciblé sur .stat → n'affecte que la
   révélation solo (pas le multijoueur, pas la question).
   ========================================================================== */
@keyframes revealBanner{
  0%  {opacity:0; transform:scale(.7)}
  30% {opacity:1; transform:scale(1.08)}   /* surgit en gros */
  62% {transform:scale(1.08)}              /* tient en gros */
  100%{opacity:1; transform:scale(1)}      /* se réduit à sa taille */
}
@keyframes revealRise{
  from{opacity:0; transform:translateY(16px) scale(.97)}
  to  {opacity:1; transform:translateY(0) scale(1)}
}
/* Nouvelle structure engine.js : #screen > .layout > (.info | .act).
   Le conteneur .layout ne s'anime pas lui-même ; ses éléments s'animent. */
#screen > .layout{animation:none}

/* QUESTION (a un .timer) : entrée en cascade des éléments d'énoncé (.info).
   Les réponses (.choice) et la carte gardent leurs propres animations. */
.layout:has(.timer) > .info > *{animation:popIn .26s cubic-bezier(.18,.9,.32,1.4) backwards}
.layout:has(.timer) > .info > *:nth-child(1){animation-delay:0}
.layout:has(.timer) > .info > *:nth-child(2){animation-delay:.05s}
.layout:has(.timer) > .info > *:nth-child(3){animation-delay:.10s}
.layout:has(.timer) > .act > .maphint{animation:popIn .26s cubic-bezier(.18,.9,.32,1.4) backwards; animation-delay:.12s}
.layout:has(.timer) > .act > .mapwrap{animation:popIn .3s cubic-bezier(.18,.9,.32,1.4) backwards; animation-delay:.16s}

/* RÉVÉLATION (solo, .info contient .stat) : réordonnancement + cadence en 3 temps.
   1) « Raté / Bonne réponse ! » en gros et seul → se réduit
   2) la réponse (carte) + l'explication (anecdote)
   3) le % de bons répondants, puis le bouton (.act). */
.info:has(.stat):not(:has(.mapwrap)){display:flex; flex-direction:column}
.info:has(.stat) > .banner  {order:1}
.info:has(.stat) > .maptitle{order:2}
.info:has(.stat) > .mapwrap {order:3}
.info:has(.stat) > .anecdote{order:4}
.info:has(.stat) > .stat    {order:5}
.info:has(.stat) > .banner{animation:revealBanner .8s cubic-bezier(.2,.85,.3,1.2) both; transform-origin:top center}
.info:has(.stat) > .maptitle,
.info:has(.stat) > .mapwrap,
.info:has(.stat) > .anecdote{animation:revealRise .34s ease both; animation-delay:.58s}
.info:has(.stat) > .stat{animation:revealRise .32s ease both; animation-delay:.86s}
.layout:has(.stat) > .act{margin-top:26px; animation:revealRise .32s ease both; animation-delay:.96s}
@media (prefers-reduced-motion:reduce){
  .layout > .info > *, .layout > .act, .layout > .act > *{animation:none}
}
/* Révélation carte sur petit écran : .info en flex pour appliquer l'ordre */
@media (max-width:759px){
  .info:has(.stat):has(.mapwrap){display:flex; flex-direction:column}
}

/* ============================================================================
   DESKTOP : mise en 2 colonnes pour limiter le scroll.
   CSS pur via :has() — chaque règle cible un type d'écran par son contenu
   (engine.js réécrit #screen sans classe de type, on la déduit du DOM).
   Navigateurs sans :has() → tout reste en 1 colonne (dégradation propre).
   ========================================================================== */
@media (min-width:760px){
  .app{max-width:880px}
  .pad{padding:24px 30px}

  /* Accueil (écran plat, sans .layout) : texte à gauche · boutons à droite */
  #screen:has(.home-actions){display:grid; grid-template-columns:1.12fr .88fr;
    column-gap:32px; align-items:center; row-gap:0}
  #screen:has(.home-actions) > .home-actions{grid-column:2}
  #screen:has(.home-actions) > :not(.home-actions){grid-column:1}
  #screen:has(.home-actions) > .modes-preview{margin-bottom:0}

  /* Question QCM : énoncé (.info) à gauche · réponses (.act) à droite */
  #screen > .layout:has(.choices){display:grid; grid-template-columns:1fr 1fr;
    column-gap:32px; align-items:center; row-gap:0}
  #screen > .layout:has(.choices) > .info{grid-column:1}
  #screen > .layout:has(.choices) > .act{grid-column:2}

  /* Question carte : carte (.act) à gauche · énoncé (.info) à droite.
     grid-row:1 sur les deux, sinon l'ordre colonne↔DOM inversé pousse la carte
     sur une 2e ligne (carte affichée en dessous de l'énoncé). */
  #screen > .layout:has(.mapwrap):has(.timer){display:grid; grid-template-columns:1fr 1fr;
    column-gap:32px; align-items:start; row-gap:0}
  #screen > .layout:has(.mapwrap):has(.timer) > .act{grid-column:1; grid-row:1}
  #screen > .layout:has(.mapwrap):has(.timer) > .info{grid-column:2; grid-row:1}

  /* Révélation carte : carte à gauche · infos à droite (grille interne à .info) */
  #screen > .layout:has(.anecdote) > .info:has(.mapwrap){display:grid; grid-template-columns:1fr 1fr;
    column-gap:32px; align-items:start; row-gap:0}
  #screen > .layout:has(.anecdote) > .info:has(.mapwrap) > .mapwrap{grid-column:1; grid-row:1 / span 40; margin:0}
  #screen > .layout:has(.anecdote) > .info:has(.mapwrap) > :not(.mapwrap){grid-column:2}
  #screen > .layout:has(.anecdote) > .info:has(.mapwrap) > .maptitle{margin-top:0}

  /* Écran final (écran .final) : score + récap à gauche · classement à droite */
  #screen > .final:has(.lb){display:grid; grid-template-columns:1fr 1fr;
    column-gap:32px; align-items:start; row-gap:0}
  #screen > .final:has(.lb) > .lb{grid-column:2; grid-row:1 / span 40; margin:0}
  #screen > .final:has(.lb) > :not(.lb){grid-column:1}
  /* colonne de gauche resserrée pour tenir sans scroll même avec 5 lignes de récap */
  #screen > .final:has(.lb) .bigscore{font-size:50px; margin:6px 0 2px}
  #screen > .final:has(.lb) > .sub{margin:2px 0 12px}
  #screen > .final:has(.lb) > .breakdown{margin:12px 0; gap:8px}
  #screen > .final:has(.lb) .brow{padding:9px 14px}
  #screen > .final:has(.lb) > .actions{margin-top:14px}
  #screen > .final:has(.lb) > .actions + div{margin-top:8px !important}
}

@media (max-width:480px){
  h1{font-size:22px}
  .lede{font-size:17px}
  .term{font-size:30px}
  .prompt:has(+ .term){font-size:30px}
  .btn{font-size:14px}
  .choice{font-size:17px}
  .bigscore{font-size:44px}
  .brand{font-size:12px}
  body::before{font-size:11px}
  /* HUD compact pour éviter le débordement des pastilles */
  .topbar{gap:8px; padding:12px 13px}
  .pill{font-size:10px; padding:6px 8px}
}