/* Wonder Rush : interface autour de l'aire 9:16 (DESIGN.md). Noir, blanc, coins droits, blocs #0c0c0c / #141414,
   un seul bouton plein par écran, accents WYDD / DISRUPT. Pas de dégradé, pas d'ombre.
   Trois états de mise en page : téléphone portrait (bande en haut), ordinateur (panneaux latéraux), paysage court (aire centrée).
   Mouvement : tout ce qui bouge pour de vrai est sous .gm[data-fx="full"] ; en effets doux il ne reste que des fondus et des changements de couleur. */
@property --aw{syntax:"<length>";inherits:true;initial-value:0px}
@property --sw{syntax:"<length>";inherits:true;initial-value:0px}
@property --oy{syntax:"<length>";inherits:true;initial-value:0px}

body.game{height:100svh;overflow:hidden}
body.game main{position:relative;flex:1;min-height:0}
.gm{container:gm / size;position:absolute;inset:0;display:grid;grid-template:100% / 100%;place-items:center;overflow:hidden;background:#000;touch-action:pan-y}
.gm[data-state="play"]{touch-action:none;-webkit-user-select:none;user-select:none}
/* --aw : largeur de l'aire ; --sw : place de chaque côté ; --oy : bande noire au-dessus de l'aire quand elle est plus étroite que l'écran */
.gm > *{--aw:min(100cqw,100cqh * 9 / 16);--sw:calc((100cqw - min(100cqw,100cqh * 9 / 16)) / 2);--oy:max(0px,calc((100cqh - var(--aw) * 16 / 9) / 2))}
.gm-area,.gm-ui,.gm-ctl{grid-area:1 / 1;position:relative;width:var(--aw);aspect-ratio:9 / 16;max-height:100%}
.gm-area{container:ar / inline-size;z-index:1;outline:1px solid #1a1a1a;outline-offset:-1px}
.gm-area canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.gm-ui{z-index:2;pointer-events:none}
.gm-ctl{z-index:5;pointer-events:none}
.gm-ctl > *{pointer-events:auto}
.gm :focus-visible{outline:2px solid #fff;outline-offset:2px}
.gm-test{position:absolute;top:0;left:0;right:0;z-index:7;margin:0;padding:6px 12px;background:#ff6a13;color:#000;font:500 13px/16px var(--sans);text-align:center;text-wrap:balance}

@keyframes gm-fade{from{opacity:0}to{opacity:1}}

/* ---------- interface en jeu : bande fine en haut (téléphone) ----------
   L'affiche du boss occupe x de 25 à 75 % de l'aire, y à partir de 17 %. La bande du haut ne dépasse pas 16 % ;
   en dessous, les vies, le combo et le bonus restent dans les marges latérales, jamais devant l'affiche. */
.gm-hud{position:absolute;inset:0 0 auto 0;display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:". c ." ". a ." "l . r" "x . b";
  gap:0 8px;padding:calc(env(safe-area-inset-top) + 6px) 14px 0;align-items:start}
.gm-hl,.gm-hr{display:contents}
.gm-k{display:none}
.gm-chrono{grid-area:c;min-width:140px;height:36px;display:block;text-align:center;font:400 34px/36px var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.04em;background:rgba(0,0,0,.55)}
.gm-lives{grid-area:l;display:flex;gap:4px;align-items:center;justify-self:start;padding-top:4px}
.gm-lives img{width:min(26px,calc((var(--aw) * .25 - 26px) / 3));height:auto}
.gm-lives img.off{opacity:.2}
.gm-act{grid-area:a;justify-self:center;font:500 12px/14px var(--sans);white-space:nowrap;background:rgba(0,0,0,.55);padding:0 6px}
.gm-combo{grid-area:r;justify-self:end;font:500 24px/1 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:-.03em;padding-top:4px}
.gm-boost{grid-area:x;justify-self:start;margin-top:4px;padding:2px 6px;font:500 13px/16px var(--sans);font-variant-numeric:tabular-nums;color:#b4b4b4;background:rgba(0,0,0,.55);opacity:.7;transition:opacity var(--d1),color var(--d1)}
.gm-boost.on{opacity:1;color:#000;background:var(--disrupt)}
.gm-bonus{grid-area:b;justify-self:end;font:500 13px/16px var(--sans);min-height:16px;padding-top:2px}
.gm-bonus[data-k="wydd"]{color:var(--wydd)}
.gm-bonus[data-k="disrupt"]{color:var(--disrupt)}
.gm-bonus:empty{display:none}

.gm-ic{position:absolute;top:calc(env(safe-area-inset-top) + 6px);width:48px;height:48px;display:grid;place-items:center;padding:0;background:#141414;border:0;border-radius:0;color:#fff;cursor:pointer;transition:background var(--d1)}
.gm-ic[data-pause]{width:56px;height:56px;top:calc(env(safe-area-inset-top) + 4px)}
.gm-ic:hover{background:#222}
.gm-ic:active{background:#2a2a2a}
.gm-ic[data-side="l"]{left:6px}
.gm-ic[data-side="r"]{right:8px}
.gm-ic svg{width:16px;height:16px;fill:currentColor;stroke:currentColor;stroke-width:1.3;stroke-linecap:round}
.gm-ic[data-pause] svg{width:22px;height:22px}
.gm-ic .sv-w,.gm-ic .sv-x,.gm-ic .sv-d{fill:none}
.gm-ic[data-m="off"] .sv-w,.gm-ic[data-m="off"] .sv-d,.gm-ic:not([data-m="off"]) .sv-x,.gm-ic[data-m="game"] .sv-d,.gm-ic[data-m="dj"] .sv-w{display:none}
.gm-hint{position:absolute;inset:auto 0;top:56%;display:grid;justify-items:center;margin:0}
.gm-hint[hidden]{display:none}
.gm-hint span{padding:6px 14px;background:rgba(0,0,0,.6);font:500 clamp(22px,7cqw,34px)/1.1 var(--sans);letter-spacing:-.02em;text-align:center}
/* compte à rebours de la reprise : 3, 2, 1, un par temps (122 BPM) */
.gm-count{position:absolute;inset:auto 0;top:34%;display:grid;justify-items:center;margin:0;pointer-events:none}
.gm-count[hidden]{display:none}
.gm-count span{font:500 min(calc(var(--aw) * .42),190px)/1 var(--sans);letter-spacing:-.04em;animation:gm-tick .492s linear both}
@keyframes gm-tick{0%{opacity:0}18%{opacity:1}72%{opacity:1}100%{opacity:.3}}
@keyframes gm-tick-z{0%{opacity:0;transform:scale(1.35)}18%{opacity:1;transform:scale(1)}72%{opacity:1;transform:scale(1)}100%{opacity:.3;transform:scale(.96)}}
.gm[data-fx="full"] .gm-count span{animation-name:gm-tick-z}

/* ---------- écrans ---------- */
.gm-scr{grid-area:1 / 1;z-index:3;align-self:stretch;justify-self:stretch;position:relative;overflow:auto;outline:0;scrollbar-width:none;animation:gm-fade .2s var(--ease);
  padding:calc(env(safe-area-inset-top) + var(--oy) + 64px) max(16px,env(safe-area-inset-right)) calc(max(16px,env(safe-area-inset-bottom)) + var(--oy)) max(16px,env(safe-area-inset-left))}
.gm-scr::-webkit-scrollbar{display:none}
.gm-scr[hidden]{display:none}
.gm-scr[data-scr="title"]{z-index:2}
.gm-scr[data-scr="question"]{background:rgba(0,0,0,.93)}
.gm-scr[data-scr="pause"],.gm-scr[data-scr="board"],.gm-scr[data-scr="end"],.gm-scr[data-scr="enter"],.gm-scr[data-scr="how"]{background:#000}
.gm[data-end="lost"] .gm-scr[data-scr="end"]{background:rgba(0,0,0,.9)}
.gm-in{width:100%;max-width:max(var(--aw),min(520px,100%));margin-inline:auto;min-height:100%;display:flex;flex-direction:column;gap:var(--s2)}
.gm-top,.gm-bot{display:grid;gap:var(--s2);align-content:start;min-width:0}
.gm-scr[data-scr="title"] .gm-in,.gm-scr[data-scr="end"] .gm-in{justify-content:space-between}
.gm-scr[data-scr="title"]{padding-top:calc(env(safe-area-inset-top) + var(--oy) + 52px)}
.gm-scr[data-scr="title"] .gm-in{gap:12px}
.gm-scr[data-scr="title"] .gm-top{gap:12px}
.gm-scr[data-scr="title"] .gm-bot{gap:10px}
.gm-scr[data-scr="title"] .gm-b{min-height:50px}
.gm-bot{margin-top:auto}
:where(.gm-scr) p{font-size:15px;line-height:22px}
:where(.gm-scr) .pg-h{font-size:min(calc(var(--aw) * .235),150px)}
.gm-scr h2.pg-h{font-size:min(calc(var(--aw) * .17),100px)}
.gm-lede{font:500 clamp(17px,5cqw,22px)/1.2 var(--sans);letter-spacing:-.02em;text-wrap:balance}
.gm b{font-weight:500}
.gm-sr,.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* boutons : un seul plein (blanc) par écran, les autres sont des blocs sombres */
.gm-btns{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.gm-btns > :first-child{grid-column:1 / -1}
.gm-btns.col{grid-template-columns:1fr}
.gm-btns.two{grid-template-columns:1fr 1fr}
.gm-btns.two > :first-child{grid-column:auto}
.gm-b{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:54px;padding:0 20px;background:#141414;color:#fff;border:0;border-radius:0;
  font:500 16px/1.1 var(--sans);text-decoration:none;cursor:pointer;transition:background var(--d1),transform var(--d1) var(--ease)}
.gm-b:hover{background:#222}
.gm-b:active{transform:scale(.98)}
.gm-b.w{background:#fff;color:#000}
.gm-b.w:hover{background:#e4e4e4}
.gm-b:disabled{opacity:.5;cursor:default}
.gm-b svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5}
.gm-kk{display:none;padding:3px 6px;border:1px solid currentColor;font:500 12px/1 var(--sans);opacity:.75}
@media (pointer:fine){ .gm-kk{display:inline-block} }

/* titre */
.gm-cdk{color:#b4b4b4;font-size:13px;line-height:16px}
.gm-cd{display:flex;gap:2px;font-family:var(--mono);font-variant-numeric:tabular-nums}
.gm-cd span{display:flex;align-items:baseline;gap:5px;padding:9px 12px;background:#141414}
.gm-cd b{font-weight:400;font-size:clamp(20px,6cqw,28px);line-height:1}
.gm-cd i{font:400 12px/1 var(--sans);font-style:normal;color:#b4b4b4}
.gm-lots{display:grid;gap:2px;font-size:14px;line-height:19px}
.gm-lots span{color:#b4b4b4}
.gm-lots b{font-weight:500}
.gm-lots li:first-child b{color:var(--disrupt)}
.gm-keys,.gm-best > span{width:fit-content;max-width:100%;background:rgba(0,0,0,.6);padding:0 4px;margin-left:-4px}   /* un fond léger : le texte passe devant les orbites du canvas */
.gm-keys{margin:0 0 0 -4px;font-size:14px;line-height:24px;color:#d0d0d0;text-wrap:balance}
.gm-keys kbd{display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 5px;border:1px solid #555;font:500 12px/1 var(--sans);color:#fff}
.gm-best{display:grid;justify-items:start;gap:2px;font-variant-numeric:tabular-nums}
.gm-best:empty{display:none}
.gm-chal{font:500 clamp(18px,5.4cqw,22px)/1.2 var(--sans);letter-spacing:-.02em}
.gm-chal b{font-family:var(--mono);font-weight:400;letter-spacing:-.04em;white-space:nowrap}
.gm-chal .nw{white-space:nowrap}
.gm-rec{font-size:14px;line-height:20px;color:#b4b4b4}
.gm-rec b{font-family:var(--mono);font-weight:400;color:#fff}
.gm-lnk{display:flex;align-items:center;justify-content:center;min-height:44px;font-size:14px;color:#d0d0d0}
.gm-scr[data-scr="title"] .gm-btns{gap:8px}
.gm-home{display:none;position:absolute;left:16px;top:10px;min-height:44px;align-items:center;font-size:14px;color:#b4b4b4}
/* « Jouer » respire au tempo : 122 BPM, un temps = 0,492 s. Opacité seulement (un anneau), 2 par seconde au plus. */
.gm-go{position:relative}
.gm-go::after{content:"";position:absolute;inset:-5px;border:2px solid #fff;pointer-events:none;opacity:.15;animation:gm-beat .4918s ease-out infinite}
.gm-go:disabled::after{animation:none;opacity:0}
@keyframes gm-beat{0%{opacity:.9}100%{opacity:.12}}

/* comment jouer : trois cartes, illustrées en CSS */
.gm-howin{gap:12px}
.gm-howin .gm-b{margin-top:auto}
.gm-how{display:grid;gap:2px}
.gm-card{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center;padding:10px 14px 10px 10px;background:#0c0c0c}
.gm-card h3{margin:0 0 4px;font:500 17px/1.2 var(--sans);letter-spacing:-.01em}
.gm-card p{margin:0;font-size:14px;line-height:20px;color:#d0d0d0}
.t-fine{display:none}
@media (pointer:fine){ .t-fine{display:inline} .t-coarse{display:none} }
.gm-ill{position:relative;width:100%;height:84px;background:#141414;overflow:hidden}
.gm-ill i{position:absolute;display:block}
.ill-eye{left:calc(50% - 22px);bottom:14px;width:44px;height:24px;border-radius:50%;background:#fff}
.ill-eye::after{content:"";position:absolute;left:17px;top:3px;width:10px;height:18px;border-radius:50%;background:#141414}
.ill-l,.ill-r{bottom:20px;width:0;height:0;border:7px solid transparent;opacity:.7}
.ill-l{left:8px;border-right:10px solid #fff;border-left:0}
.ill-r{right:8px;border-left:10px solid #fff;border-right:0}
.ill-st{width:15px;height:15px;background:#fff;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.ill-st.a{left:22%;top:10px}
.ill-st.b{left:66%;top:38px;background:#ff6a13}
.ill-ey{left:calc(50% - 11px);bottom:10px;width:22px;height:12px;border-radius:50%;background:#fff}
.ill-ask .q{left:12%;top:11px;width:56%;height:6px;background:#fff}
.ill-ask .o{left:12%;width:76%;height:12px;background:#2a2a2a}
.ill-ask .o:nth-child(2){top:26px}
.ill-ask .o:nth-child(3){top:42px}
.ill-ask .o:nth-child(4){top:58px}
.ill-ask .o.ok{background:#14241b}
.ill-ask .o.ok::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:#3ad07a}
.gm[data-fx="full"] .ill-eye{animation:ill-x 3.934s ease-in-out infinite}
.gm[data-fx="full"] .ill-st{animation:ill-fall 1.967s linear infinite}
.gm[data-fx="full"] .ill-st.b{animation-delay:-.98s}
@keyframes ill-x{0%,100%{transform:translateX(-18px)}50%{transform:translateX(18px)}}
@keyframes ill-fall{from{transform:translateY(-50px)}to{transform:translateY(100px)}}

/* question */
.gm-qh{display:flex;justify-content:space-between;align-items:center;gap:12px}
.gm-qn{margin:0;font:500 14px/16px var(--sans);color:#d0d0d0;font-variant-numeric:tabular-nums}
.gm-steps{display:flex;gap:2px;flex:1;max-width:160px}
.gm-steps i{flex:1;height:3px;background:#2a2a2a}
.gm-steps i.on{background:#fff}
.gm-clock{font:400 clamp(30px,9cqw,44px)/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.04em;display:flex;align-items:baseline;gap:10px}
.gm-pen{font:500 14px/1 var(--sans);letter-spacing:0;color:var(--disrupt);opacity:0;transition:opacity var(--d2)}
.gm-pen.on{opacity:1}
.gm-qt{font:500 clamp(21px,6.4cqw,32px)/1.12 var(--sans);letter-spacing:-.025em;text-wrap:balance}
.gm-opts{display:grid;gap:2px}
.gm-opt{position:relative;display:grid;grid-template-columns:1fr;align-items:center;gap:8px;min-height:60px;padding:10px 16px;text-align:left;background:#141414;color:#fff;border:0;border-radius:0;
  font:400 18px/22px var(--sans);cursor:pointer;transition:background var(--d1),transform var(--d1) var(--ease);animation:gm-fade .22s both;animation-delay:calc(var(--i, 0) * 45ms + 60ms)}
.gm-opt kbd{display:none;font:500 13px/1 var(--sans);color:#b4b4b4}
@media (pointer:fine){ .gm-opt{grid-template-columns:22px 1fr} .gm-opt kbd{display:block} }
.gm-opt:hover:not(:disabled){background:#222}
.gm-opt:focus-visible{outline-offset:-4px}
.gm-opt:active:not(:disabled){transform:scale(.985)}
.gm-opt:disabled{color:#777;cursor:default}
.gm-opt.bad{color:#9a9a9a;text-decoration:line-through;text-decoration-thickness:1px}
.gm-opt.bad::after,.gm-opt.ok::after{position:absolute;right:16px;top:0;bottom:0;display:grid;place-items:center;font:500 18px/1 var(--sans);text-decoration:none}
.gm-opt.bad::after{content:"✕";color:var(--disrupt)}
.gm-opt.ok::after{content:"✓";color:#3ad07a}
/* bonne réponse : un vert discret. Mauvaise : un tremblement en opacité et en couleur (le déplacement n'existe qu'en effets complets). */
.gm-opt.ok{background:#14241b;color:#3ad07a}
.gm-opt.ok::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:#3ad07a}
.gm-opt.shake{animation:gm-nope .5s linear}
.gm[data-fx="full"] .gm-opt.shake{animation-name:gm-nope-x}
@keyframes gm-nope{0%,100%{opacity:1}12%,48%,84%{opacity:.4;background:#3a1c0a;color:#ff6a13}30%,66%{opacity:1;background:#2a1508;color:#ff6a13}}
@keyframes gm-nope-x{0%,100%{opacity:1;transform:none}12%,48%,84%{opacity:.4;background:#3a1c0a;color:#ff6a13;transform:translateX(-6px)}30%,66%{opacity:1;background:#2a1508;color:#ff6a13;transform:translateX(6px)}}
.gm-fb{min-height:24px;margin:0;font-weight:500;font-size:15px;line-height:22px}
.gm-fb[data-k="bad"]{color:var(--disrupt)}
.gm-fb[data-k="ok"]{color:#3ad07a}
.gm-tries{color:#b4b4b4;font-weight:400}
.gm-srch{display:grid;gap:6px}
.gm-qhint{min-height:22px;margin:0;font-weight:500;font-size:15px;line-height:22px}
.gm-qhint:not(:empty){animation:gm-fade .35s var(--ease)}
.gm-b[data-search]{flex-direction:column;gap:2px;min-height:62px;padding:10px 20px}
.gm-srl{display:flex;align-items:center;gap:8px}
.gm-addr{font:400 13px/16px var(--sans);color:#d0d0d0;overflow-wrap:anywhere;text-align:center}

/* pause */
.gm-sets{display:grid;gap:12px}
.gm-seg{display:flex;padding:3px;background:#141414;gap:0}
.gm-seg button{flex:1;min-height:44px;padding:0 6px;white-space:nowrap;border:0;border-radius:0;background:transparent;color:#b4b4b4;font:400 15px/1 var(--sans);cursor:pointer;transition:background var(--d1),color var(--d1)}
.gm-seg button:hover{color:#fff}
.gm-seg button[aria-pressed="true"]{background:#fff;color:#000}
.gm-seg-k{display:block;margin-bottom:6px;font-size:13px;line-height:16px;color:#b4b4b4}

/* fin */
.gm-end-t{margin:0;font:500 clamp(26px,calc(var(--aw) * .09),52px)/1 var(--sans);letter-spacing:-.04em;text-wrap:balance}
.gm-scr .gm-time{margin:0 0 0 -.04em;font:400 min(calc(var(--aw) * .2),130px)/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.06em}
.gm-badge{justify-self:start;margin:0;padding:7px 10px;background:#141414;color:var(--disrupt);font:500 14px/1 var(--sans);animation:gm-fade .4s .9s both}
.gm-badge[hidden]{display:none}
.gm-rank{display:inline-block;justify-self:start;margin:0;padding:8px 12px;background:#141414;font-weight:500}
.gm-rank:empty{display:none}
.gm-stats,.gm-dl{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin:0}
.gm-dl{grid-template-columns:repeat(4,1fr)}
.gm-dl div{padding:10px 8px}
.gm-stats div,.gm-dl div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:3px;padding:10px 12px;background:#0c0c0c}
.gm-stats dt,.gm-dl dt{font-size:12px;line-height:14px;color:#b4b4b4;text-wrap:balance}
.gm-stats dd,.gm-dl dd{margin:0;font-family:var(--mono);font-variant-numeric:tabular-nums}
.gm-stats dd{font-size:26px;line-height:1}
.gm-dl dd{font-size:15px;line-height:20px;color:#d0d0d0}
.gm-note{margin:0;color:#c8c8c8;font-size:14px;line-height:20px}
.gm-note:empty{display:none}
[data-end="lost"] .gm-win{display:none}
[data-end="won"] .gm-lose{display:none}
[data-end="lost"] [data-end-btns] > *{grid-column:1 / -1}

/* connexion, pseudo */
.gm-form{display:grid;gap:var(--s2)}
.gm-form[hidden],[data-estep][hidden]{display:none}
.gm-fld{display:grid;gap:6px}
.gm-fld > span{font-size:13px;line-height:16px;color:#b4b4b4}
.gm-fld input{width:100%;min-height:52px;padding:0 14px;background:#141414;border:0;border-bottom:1px solid #444;border-radius:0;color:#fff;font:400 18px/1.2 var(--sans);transition:border-color var(--d1)}
.gm-fld input:focus{outline:0;border-bottom-color:#fff}
.gm-fld input:focus-visible{outline:2px solid #fff;outline-offset:2px}
.gm-fld input.code-in{font-family:var(--mono);font-size:26px;letter-spacing:.35em}
.gm-chk{display:flex;gap:12px;align-items:flex-start;min-height:44px;padding:10px 14px;background:#0c0c0c;cursor:pointer;font-size:15px;line-height:22px}
.gm-chk input{flex:none;width:24px;height:24px;margin:0;accent-color:#fff}
.gm-chk small{display:block;color:#b4b4b4;font-size:13px;line-height:18px}
.gm-form .msg{min-height:22px;color:#c8c8c8;font-size:14px;line-height:20px}
.gm-form .msg.err{color:var(--disrupt)}
.gm-form .msg:empty{display:none}
.gm-links{display:flex;justify-content:space-between;gap:12px}
.gm-links button{min-height:44px;padding:0;background:none;border:0;color:#c8c8c8;font:inherit;font-size:14px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.gm-links button:hover{color:#fff}
.gm-small{font-size:13px;line-height:18px;color:#c8c8c8}
.gm-small a{color:#fff}

/* classement */
.gm-scr[data-scr="board"]{overflow:hidden}
.gm-boardin{height:100%;min-height:0}
.gm-rowsw{flex:1;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#333 transparent}
.gm-rows{display:grid}
.gm-rows li{display:grid;grid-template-columns:2.6em 1fr auto 3.4em;gap:8px;align-items:center;min-height:46px;padding:0 10px;border-bottom:1px solid #1a1a1a;font-size:16px;font-variant-numeric:tabular-nums}
.gm-rows li:nth-child(-n+3) .gm-rk{color:var(--disrupt)}
.gm-rows .gm-ps{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gm-rows li.gm-me{background:#1c1c1c;position:sticky;bottom:0;border-bottom:0;font-weight:500}
.gm-rows .gm-rk,.gm-rows .gm-dt{color:#b4b4b4;font-size:14px}
.gm-rows time{font-family:var(--mono)}
.gm-sep{display:block;padding:6px 10px;color:#b4b4b4;font-size:13px}

/* ---------- ordinateur et paysage : panneaux de chaque côté de l'aire ---------- */
@container gm (min-aspect-ratio: 11 / 10){
  .gm-ui{--pw:min(calc(var(--sw) - 48px),400px)}
  .gm-hud{display:block;inset:0}
  .gm-hl,.gm-hr{display:grid;position:absolute;top:80px;width:var(--pw);gap:2px;align-content:start}
  .gm-hl{right:calc(100% + 24px)}
  .gm-hr{left:calc(100% + 24px)}
  .gm-chrono,.gm-act,.gm-lives,.gm-combo,.gm-bonus,.gm-boost{grid-area:auto}
  .gm-k{display:block;margin:0;font-size:13px;line-height:16px;color:#b4b4b4;padding:12px 16px 0;background:#0c0c0c}
  .gm-chrono{min-width:0;height:auto;text-align:left;padding:4px 16px 12px;background:#0c0c0c;font-size:calc(var(--pw) / 4.5);line-height:1;letter-spacing:-.05em}
  .gm-act{display:block;padding:0 16px 14px;background:#0c0c0c;justify-self:stretch;font-size:15px;line-height:20px}
  .gm-lives{padding:6px 16px 14px;background:#0c0c0c;justify-self:stretch;gap:10px}
  .gm-lives img{width:clamp(28px,calc(var(--pw) / 8),52px)}
  .gm-combo{display:block;padding:4px 16px 12px;background:#0c0c0c;justify-self:stretch;font-size:clamp(34px,calc(var(--pw) / 5.5),72px);min-height:1.2em}
  .gm-combo:empty::before{content:"×1";color:#555}
  .gm-bonus{display:block;padding:10px 16px;background:#0c0c0c;justify-self:stretch;font-size:15px}
  .gm-bonus:empty{display:none}
  .gm-boost{margin:0;padding:10px 16px;background:#0c0c0c;opacity:1;color:#b4b4b4;font-size:15px;line-height:20px;justify-self:stretch}
  .gm-boost.on{color:#000;background:var(--disrupt)}
  .gm-hint span{font-size:clamp(22px,2.4cqh,34px)}
  /* pause et son vivent au-dessus des panneaux, jamais sur l'aire (l'affiche du boss y est) */
  .gm-ctl{--pw:min(calc(var(--sw) - 48px),400px)}
  .gm-ic[data-side="l"],.gm-ic[data-side="r"]{top:calc(env(safe-area-inset-top) + 12px)}
  .gm-ic[data-side="l"]{left:calc(-24px - var(--pw))}
  .gm-ic[data-side="r"]{right:calc(-24px - var(--pw))}
  /* écrans d'ouverture et de fin : le texte à gauche, les actions à droite, l'œil au centre */
  .gm-scr[data-scr="title"] .gm-in,.gm-scr[data-scr="end"] .gm-in{max-width:none;display:grid;grid-template-columns:1fr var(--aw) 1fr;grid-template-rows:1fr;column-gap:0;
    padding-block:0}
  .gm-scr[data-scr="title"] .gm-top,.gm-scr[data-scr="end"] .gm-top{grid-column:1;padding-right:24px;justify-self:end;width:min(100%,520px);align-content:start;display:flex;flex-direction:column;min-height:100%}
  .gm-scr[data-scr="title"] .gm-bot,.gm-scr[data-scr="end"] .gm-bot{grid-column:3;padding-left:24px;justify-self:start;width:min(100%,460px);margin-top:0;align-content:end}
  .gm-scr[data-scr="title"] .pg-h{font-size:min(calc((var(--sw) - 48px) / 3.2),180px)}
  .gm-scr[data-scr="end"] .gm-time{font-size:min(calc((var(--sw) - 48px) / 4.2),150px)}
  .gm-scr[data-scr="title"] .gm-cdw{margin-top:auto}
  .gm-scr[data-scr="end"]{background:transparent}                    /* l'œil de fin reste visible au centre */
  .gm[data-end="lost"] .gm-scr[data-scr="end"]{background:transparent}
  .gm-scr[data-scr="question"] .gm-in,.gm-scr[data-scr="pause"] .gm-in,.gm-scr[data-scr="enter"] .gm-in,.gm-scr[data-scr="how"] .gm-in{justify-content:center}
  .gm-scr[data-scr="pause"] .gm-bot,.gm-scr[data-scr="how"] .gm-b{margin-top:0}
  .gm-scr[data-scr="title"]{padding-top:calc(env(safe-area-inset-top) + 24px)}
  .gm-scr[data-scr="end"]{padding-top:calc(env(safe-area-inset-top) + 24px)}
  .gm-scr[data-scr="how"] .gm-in{max-width:min(920px,100%)}
  .gm-how{grid-template-columns:repeat(3,1fr)}
  .gm-card{grid-template-columns:1fr;gap:12px;padding:12px;align-items:start}
  .gm-ill{height:110px}
}
/* paysage de téléphone : l'en-tête du site s'efface, tout se compacte */
@media (max-height:500px) and (orientation:landscape){
  body.game .top{display:none}
  .gm-home{display:inline-flex}
  .gm-scr{padding-top:16px;padding-bottom:12px}
  .gm-scr[data-scr="question"] .gm-in{max-width:min(100%,640px)}
  .gm-scr .gm-in{gap:8px}
  .gm-opts{grid-template-columns:1fr 1fr}
  .gm-opt{min-height:52px;font-size:16px;padding:8px 12px}
  .gm-qt{font-size:20px}
  .gm-b{min-height:48px}
  .gm-b[data-search]{min-height:56px;padding:6px 16px}
  .gm-scr p,.gm-lots b{font-size:13px;line-height:18px}
  .gm-lots li{padding:6px 12px}
  .gm-cd span{padding:6px 10px}
  .gm-scr[data-scr="title"] .gm-top,.gm-scr[data-scr="end"] .gm-top{padding-top:44px}
  .gm-scr[data-scr="title"] .gm-bot,.gm-scr[data-scr="end"] .gm-bot{gap:6px}
  .gm-scr[data-scr="title"] .gm-btns{gap:6px}
  .gm-scr[data-scr="title"] .gm-b{min-height:46px;padding:0 8px;font-size:15px}
  .gm-chal{font-size:16px}
  .gm-dl{display:none}
  .gm-scr[data-scr="end"] .gm-top{gap:6px}
  .gm-badge{padding:6px 10px}
  .gm-lnk{min-height:44px}
  .gm-scr[data-scr="pause"] .gm-in{max-width:min(100%,760px);display:grid;grid-template-columns:1fr 1fr;column-gap:32px;align-content:center}
  .gm-scr[data-scr="pause"] .gm-top,.gm-scr[data-scr="pause"] .gm-bot{margin:0}
  .gm-scr[data-scr="pause"] .gm-btns{gap:2px}
  .gm-scr[data-scr="how"] .gm-in{max-width:min(100%,820px);align-content:center}
  .gm-ill{height:64px}
  .gm-card{padding:8px 10px;gap:8px}
  .gm-card h3{font-size:15px}
  .gm-card p{font-size:12.5px;line-height:17px}
  .gm-scr h2.pg-h{font-size:48px}
  .gm-scr .gm-clock{font-size:34px}
  .gm-scr[data-scr="enter"] .gm-in{max-width:min(100%,780px);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-areas:"h f" "b f";grid-template-rows:auto 1fr;column-gap:32px;align-content:center}
  .gm-scr[data-scr="enter"] h2{grid-area:h}
  .gm-scr[data-scr="enter"] [data-estep]{grid-area:f}
  .gm-scr[data-scr="enter"] [data-back]{grid-area:b;align-self:end}
  .gm-boardin{max-width:min(100%,780px);display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);grid-template-areas:"h l" "n l" "f l" "b l";grid-template-rows:auto auto auto 1fr;column-gap:32px;align-content:stretch}
  .gm-boardin > h2{grid-area:h}
  .gm-boardin > .gm-note{grid-area:n}
  .gm-boardin > .gm-rowsw{grid-area:l}
  .gm-boardin > .gm-small{grid-area:f}
  .gm-boardin > .gm-b{grid-area:b;align-self:end}
  .gm-chk small{display:none}
  .gm-chk{min-height:44px;padding:8px 12px}
  .gm-fld input{min-height:46px}
  .gm-stats div,.gm-dl div{padding:6px 10px}
  .gm-stats dd{font-size:22px}
}
@media (max-height:700px){ .gm-scr{padding-top:calc(env(safe-area-inset-top) + var(--oy) + 56px)} .gm-in{gap:10px} .gm-b{min-height:50px} }

/* mouvement réduit (ou « Effets : doux ») : le jeu reste vivant, l'interface ne se déplace plus. Le tremblement et l'anneau de « Jouer » restent en opacité. */
@media (prefers-reduced-motion:reduce){ .gm-b,.gm-opt{transition:background var(--d1)} .gm-b:active,.gm-opt:active:not(:disabled){transform:none} }
.gm[data-fx="soft"] .gm-b:active,.gm[data-fx="soft"] .gm-opt:active:not(:disabled){transform:none}

/* écrans titre et fin, ordinateur : l'aire n'a plus de cadre, ses bords se fondent dans le noir */
.gm[data-state="title"] .gm-area,.gm[data-state="end"] .gm-area,.gm[data-state="board"] .gm-area,.gm[data-state="how"] .gm-area{outline:0;
  -webkit-mask-image:radial-gradient(farthest-side,#000 80%,transparent);mask-image:radial-gradient(farthest-side,#000 80%,transparent)}
@container gm (min-aspect-ratio: 11 / 10){
  .gm-scr[data-scr="title"]{padding:calc(env(safe-area-inset-top) + 56px) 56px 56px}
  .gm-scr[data-scr="title"] .pg-h{font-size:min(calc((var(--sw) - 112px) / 3.6),136px)}
  .gm-scr[data-scr="title"] .gm-top{padding-right:48px;width:min(100%,460px)}
  .gm-scr[data-scr="title"] .gm-bot{padding-left:48px;width:min(100%,460px)}
  .gm-scr[data-scr="title"] .gm-keys{color:#9a9a9a;font-size:13px}
  .gm-scr[data-scr="title"] .gm-cdw{gap:10px}
}

/* quiz : pas de trait de couleur sur le côté ; la bonne réponse devient un bloc blanc plein */
.gm-opt.ok::before,.ill-ask .o.ok::before{content:none}
.gm-opt.ok{background:#fff;color:#000}
.gm-opt.ok::after{color:#000}
.ill-ask .o.ok{background:#fff;color:#000}

/* téléphone : bouton « accélérer » à maintenir, sous le pouce droit, seulement pendant la partie */
.gm-turbo{display:none}
@media (pointer:coarse){
  .gm[data-state="play"] .gm-turbo{position:absolute;right:10px;bottom:calc(env(safe-area-inset-bottom) + 14px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    width:84px;height:84px;padding:0;border:0;border-radius:0;background:rgba(20,20,20,.85);color:#fff;font:500 11px/1 var(--sans);
    touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
  .gm-turbo svg{width:24px;height:17px;fill:currentColor}
  .gm[data-state="play"] .gm-turbo.on{background:var(--disrupt);color:#000}
}

/* téléphone, écran titre : moins de texte, l'œil respire ; les touches sont dans « Comment jouer » */
@container gm (max-aspect-ratio: 11 / 10){
  .gm-scr[data-scr="title"] .gm-keys{display:none}
  .gm-scr[data-scr="title"] .pg-h{font-size:min(calc(var(--aw) * .19),120px)}
  .gm-scr[data-scr="title"] .gm-cd span{padding:7px 10px}
  .gm-scr[data-scr="title"] .gm-cd b{font-size:clamp(18px,5cqw,22px)}
  .gm-scr[data-scr="title"] .gm-lots{font-size:13px;line-height:18px}
}
/* plus de bouton : on accélère en remontant le doigt ; l'indicateur ×1,6 du haut passe à l'orange */
@media (pointer:coarse){ .gm[data-state="play"] .gm-turbo{display:none} }

/* téléphone, écran titre : l'essentiel seulement. Un titre, une ligne de compte à rebours, les lots, Jouer ; le reste en liens */
@container gm (max-aspect-ratio: 11 / 10){
  .gm-scr[data-scr="title"] .gm-cdw{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px}
  .gm-scr[data-scr="title"] .gm-cdk{font-size:14px;color:#9a9a9a}
  .gm-scr[data-scr="title"] .gm-cd{gap:6px}
  .gm-scr[data-scr="title"] .gm-cd span{padding:0;background:none;gap:1px}
  .gm-scr[data-scr="title"] .gm-cd b{font-size:15px}
  .gm-scr[data-scr="title"] .gm-cd i{font-size:12px}
  .gm-scr[data-scr="title"] .gm-lots{gap:0;color:#9a9a9a}
  .gm-scr[data-scr="title"] .gm-lots span{color:#9a9a9a}
  .gm-scr[data-scr="title"] .gm-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:0 24px}
  .gm-scr[data-scr="title"] .gm-btns > :first-child{flex:1 0 100%;margin-bottom:6px}
  .gm-scr[data-scr="title"] .gm-btns > :not(:first-child){width:auto;min-height:44px;padding:0;background:none;font-size:15px;font-weight:400;color:#d0d0d0;text-decoration:underline;text-underline-offset:.25em}
  .gm-scr[data-scr="title"] .gm-lnk{min-height:32px;font-size:13px;color:#9a9a9a}
}

/* accueil : un ton de fête, l'administratif en tout petit */
.gm-lots{display:grid;gap:4px}
.gm-lots p{margin:0;font-size:15px;line-height:21px;color:#d0d0d0}
.gm-lots .gm-party{font:500 clamp(20px,5.6cqw,26px)/1.15 var(--sans);letter-spacing:-.02em;color:#fff}
.gm-lots p b{color:#fff}
.gm-lots p b:first-of-type{color:var(--disrupt)}
.gm-scr[data-scr="title"] .gm-lnk{min-height:28px;font-size:12px;color:#6a6a6a;text-decoration:none}
.gm-scr[data-scr="title"] .gm-lnk:hover{color:#b4b4b4}

/* quiz : le numéro de touche, simple chiffre discret, sans cadre */
.gm-opt kbd{border:0;padding:0;margin:0;background:none;box-shadow:none;min-width:0;height:auto;font:400 14px/1 var(--mono);color:#6a6a6a}
.gm-opt:hover kbd,.gm-opt:focus-visible kbd{color:#fff}
.gm-opt.ok kbd{color:#000}

/* fin de partie : la blague en grand, le temps en grand, le score, puis le détail replié comme un ticket */
.gm-end-t{font:500 clamp(36px,11cqw,76px)/.95 var(--sans);letter-spacing:-.045em;text-wrap:balance;margin:0}
.gm-score{margin:0;font-size:15px;color:#9a9a9a}
.gm-score b{font:400 clamp(26px,7cqw,40px)/1 var(--mono);letter-spacing:-.04em;color:#fff;margin-right:6px}
.gm-stats,.gm-dl{display:none}
.gm-det{margin-top:4px}
.gm-det summary{display:inline-flex;align-items:center;gap:8px;min-height:40px;cursor:pointer;color:#d0d0d0;font-size:14px;list-style:none;text-decoration:underline;text-underline-offset:.25em}
.gm-det summary::-webkit-details-marker{display:none}
.gm-det[open] summary{color:#fff}
.gm-tk{display:grid;margin:8px 0 0;padding:14px 16px;background:#0c0c0c;font-family:var(--mono);font-size:13px;line-height:18px}
.gm-tk + .gm-tk{margin-top:2px}
.gm-tk div{display:flex;justify-content:space-between;gap:16px;padding:5px 0}
.gm-tk dt{color:#9a9a9a}
.gm-tk dd{margin:0;color:#fff;font-variant-numeric:tabular-nums;text-align:right}
.gm-tk .gm-tk-sum{margin-top:6px;padding-top:10px;border-top:1px solid #2a2a2a}
.gm-tk .gm-tk-sum dt,.gm-tk .gm-tk-sum dd{color:#fff;font-size:15px}
.gm[data-end="lost"] .gm-win{display:none}
.gm-reach{font-size:13px;color:#9a9a9a;white-space:nowrap}