/* ==========================================================================
   TRINITRON — CHANNEL 01
   Tout est dimensionné à partir de --u (1% de la largeur du téléviseur),
   donc le jeu garde exactement les mêmes proportions à toutes les tailles.
   ========================================================================== */

@font-face{
  font-family:"VT323";font-style:normal;font-weight:400;font-display:swap;
  src:url("assets/fonts/vt323-latin-400-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Press Start 2P";font-style:normal;font-weight:400;font-display:swap;
  src:url("assets/fonts/press-start-2p-latin-400-normal.woff2") format("woff2");
}

*{box-sizing:border-box}
:root{
  --green:#42ff76;--blue:#244cff;--cyan:#6de6ff;--yellow:#ffe353;
  --white:#f4f4ec;--red:#ff354b;--black:#020706;--gold:#ffe353;--silver:#cfe8ee;--bronze:#ff9a4a;
  --f-body:"VT323","Courier New",ui-monospace,monospace;
  --f-px:"Press Start 2P","Courier New",ui-monospace,monospace;
  --aberration:-1px 0 rgba(255,50,70,.75),1px 0 rgba(0,190,255,.75);
}
html,body{margin:0;min-height:100%;background:#07090c}
body{
  min-height:100vh;min-height:100svh;display:grid;place-items:center;overflow-x:hidden;
  font-family:var(--f-body);color:var(--white);position:relative;
}
button,input{font:inherit}

/* Lumière ambiante : la TV éclaire la pièce */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(58% 52% at 50% 47%,rgba(36,76,255,.26),transparent 72%),
    radial-gradient(90% 40% at 50% 112%,rgba(109,230,255,.07),transparent 70%),
    #07090c;
}
body.is-win::before{animation:roomWin 1.4s ease-out}
body.is-error::before{animation:roomError 1.6s ease-out}
@keyframes roomWin{0%{box-shadow:inset 0 0 0 100vmax rgba(66,255,118,.16)}100%{box-shadow:inset 0 0 0 100vmax transparent}}
@keyframes roomError{0%{box-shadow:inset 0 0 0 100vmax rgba(255,53,75,.24)}100%{box-shadow:inset 0 0 0 100vmax transparent}}

.page{position:relative;z-index:1;width:100%;padding:1vw;display:grid;place-items:center}

/* ---------- Téléviseur ---------- */
.tv{
  position:relative;
  width:min(98vw,1600px,calc(96vh * 2048 / 1493));
  width:min(98vw,1600px,calc(96svh * 2048 / 1493));
  aspect-ratio:2048/1493;
  container-type:inline-size;
  --u:1cqw;
  filter:drop-shadow(0 30px 60px #000) drop-shadow(0 0 80px rgba(36,76,255,.16));
}
.tv-frame{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none}

.screen{
  position:absolute;left:6.8%;top:6.8%;width:85.6%;height:85.2%;
  display:flex;flex-direction:column;gap:calc(var(--u)*.9);
  overflow:hidden;z-index:2;
  padding:calc(var(--u)*1.5) calc(var(--u)*2.5) calc(var(--u)*1.4);
  border-radius:1.4%/2%;
  font-family:var(--f-body);font-size:calc(var(--u)*2);line-height:1.1;
  background:
    radial-gradient(ellipse at 50% 38%,rgba(30,92,120,.30),transparent 66%),
    radial-gradient(ellipse at 50% 100%,rgba(36,76,255,.10),transparent 60%),
    #010405;
  box-shadow:inset 0 0 calc(var(--u)*4) rgba(0,0,0,.9),inset 0 0 calc(var(--u)*.5) rgba(109,230,255,.18);
}
/* reflet de la vitre */
.screen::before{
  content:"";position:absolute;inset:0;z-index:21;pointer-events:none;
  background:
    linear-gradient(118deg,rgba(255,255,255,.085) 0%,rgba(255,255,255,.02) 22%,transparent 38%),
    radial-gradient(ellipse at 18% 8%,rgba(255,255,255,.07),transparent 38%);
}
/* vignette + léger scintillement */
.screen::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:20;
  background:radial-gradient(ellipse at center,transparent 52%,rgba(0,0,0,.52) 100%);
  animation:flick 5s steps(1) infinite;
}
@keyframes flick{0%,100%{opacity:1}46%{opacity:.93}47%{opacity:1}83%{opacity:.95}84%{opacity:1}}
/* urgence : la vignette passe au rouge */
.screen:has(#countdown.danger)::after{
  background:radial-gradient(ellipse at center,transparent 38%,rgba(255,30,55,.30) 100%);
  animation:dangerPulse .6s ease-in-out infinite alternate;
}
@keyframes dangerPulse{from{opacity:.55}to{opacity:1}}

.scanlines{
  position:absolute;inset:0;z-index:17;pointer-events:none;opacity:.26;overflow:hidden;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.10) 0 1px,transparent 1px 4px);
  mix-blend-mode:screen;
}
/* barre de balayage qui descend lentement */
.scanlines::after{
  content:"";position:absolute;left:0;right:0;height:22%;top:-30%;
  background:linear-gradient(to bottom,transparent,rgba(160,230,255,.10),transparent);
  animation:roll 7.5s linear infinite;
}
@keyframes roll{to{top:130%}}
.crt-noise{
  position:absolute;inset:-25%;z-index:16;pointer-events:none;opacity:.08;
  background-image:repeating-radial-gradient(circle at 17% 23%,#fff0 0 1px,#fff5 1px 2px,#0000 2px 4px);
  animation:noise .15s steps(2) infinite;
}
@keyframes noise{25%{transform:translate(2%,1%)}50%{transform:translate(-1%,2%)}75%{transform:translate(1%,-2%)}}

.topbar,.brand,.game-grid,.answer,.screen-footer{position:relative;flex:none}
.topbar,.game-grid,.answer,.screen-footer{z-index:10}
.game-grid{flex:1 1 auto}

/* ---------- Barre du haut ---------- */
.topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding-bottom:calc(var(--u)*.7);
  border-bottom:1px solid rgba(255,255,255,.5);
  font-size:calc(var(--u)*1.9);letter-spacing:.14em;text-shadow:var(--aberration);
}
.topbar>span:first-child::before{
  content:"";display:inline-block;width:.5em;height:.5em;margin-right:.7em;border-radius:50%;
  background:var(--red);box-shadow:0 0 8px var(--red);animation:rec 1.4s steps(1) infinite;vertical-align:.08em;
}
@keyframes rec{50%{opacity:.15}}
.game-meta{display:flex;align-items:center;gap:1.2em}
#streak-display{color:var(--yellow);text-shadow:var(--aberration),0 0 10px rgba(255,227,83,.45);display:inline-block}
#streak-display.pop{animation:pop .55s cubic-bezier(.2,.9,.3,1.4)}
@keyframes pop{0%{transform:scale(1)}35%{transform:scale(1.45);color:#fff}100%{transform:scale(1)}}
.rgb{display:flex;height:.8em;gap:1px}.rgb i{display:block;width:.5em;height:100%}
.rgb i:nth-child(1){background:#f21;box-shadow:0 0 6px #f21}
.rgb i:nth-child(2){background:#2f5;box-shadow:0 0 6px #2f5}
.rgb i:nth-child(3){background:#25f;box-shadow:0 0 6px #25f}

/* ---------- Marque ---------- */
.brand{text-align:center}
.brand-logo{
  display:block;width:min(88%,calc(var(--u)*62));max-height:calc(var(--u)*8.4);
  margin:0 auto;object-fit:contain;
  mix-blend-mode:screen;
}
.brand p{
  display:flex;align-items:center;gap:1.2em;justify-content:center;
  margin:calc(var(--u)*.7) auto 0;
  font-family:var(--f-px);font-size:calc(var(--u)*.95);letter-spacing:.32em;color:#d7e5e8;
  text-shadow:var(--aberration);
}
.brand p::before,.brand p::after{content:"";height:1px;flex:1;max-width:22%;
  background:linear-gradient(90deg,transparent,#7cf)}
.brand p::after{background:linear-gradient(270deg,transparent,#7cf)}

/* ---------- Zone de jeu ---------- */
.game-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:calc(var(--u)*3);flex:1 1 auto;min-height:0}
.clues{display:flex;flex-direction:column;justify-content:space-between;min-height:0}
.clue-list{
  --row:calc(var(--u)*4.2);
  min-height:calc(var(--row)*5);
  /* 5 emplacements d'indices en filigrane */
  background:repeating-linear-gradient(to bottom,transparent 0 calc(var(--row) - 2px),rgba(255,255,255,.07) calc(var(--row) - 2px) var(--row));
}
.clue{
  display:grid;grid-template-columns:calc(var(--u)*20) 1fr;gap:1em;align-items:center;
  height:var(--row);font-size:calc(var(--u)*2.75);letter-spacing:.05em;
  opacity:0;transform:translateX(-10px);filter:blur(3px);transition:.3s ease;
  text-shadow:var(--aberration);
}
.clue.show{opacity:1;transform:none;filter:none}
.clue .label{color:var(--yellow);text-shadow:var(--aberration),0 0 10px rgba(255,227,83,.35)}
.clue .label{white-space:nowrap}
.clue .label::before{content:"▸ ";color:var(--green)}
.clue .value{color:#fff;text-shadow:var(--aberration),0 0 9px rgba(255,255,255,.35)}
.clue.show .value{display:inline-block;animation:type .5s steps(14) both}
@keyframes type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
/* le dernier indice (année de draft) ressort */
.clue:last-child.show .value{color:var(--green);text-shadow:var(--aberration),0 0 12px rgba(66,255,118,.6)}

.status{
  padding-top:calc(var(--u)*.9);border-top:1px solid rgba(255,255,255,.55);
  font-size:calc(var(--u)*1.75);letter-spacing:.08em;
}
.status-line{display:flex;justify-content:space-between;align-items:flex-end;gap:1em}
#status-text{color:var(--cyan);text-shadow:var(--aberration)}
#status-text::after{content:"_";margin-left:.15em;animation:rec .9s steps(1) infinite}
#countdown{
  color:var(--yellow);min-width:3.4em;text-align:right;
  font-size:calc(var(--u)*3.6);line-height:.8;letter-spacing:.02em;
  text-shadow:var(--aberration),0 0 14px rgba(255,227,83,.5);font-variant-numeric:tabular-nums;
}
#countdown.danger{color:var(--red);text-shadow:var(--aberration),0 0 16px rgba(255,53,75,.8);animation:blink .35s steps(2) infinite}
@keyframes blink{50%{opacity:.35}}
.signal-row{display:flex;align-items:center;gap:1.2em;margin-top:calc(var(--u)*.8)}
.signal-track{flex:1;max-width:63%;height:calc(var(--u)*1.5);border:2px solid #fff;padding:2px;box-shadow:0 0 10px rgba(255,255,255,.15)}
.signal-bar{
  height:100%;width:0;transition:width .35s ease;
  background:repeating-linear-gradient(90deg,#3dff7f 0 calc(var(--u)*.6),transparent calc(var(--u)*.6) calc(var(--u)*.8));
  box-shadow:0 0 12px #25ff66;
}
#signal-text{color:#9fb;letter-spacing:.1em}

/* ---------- Joueur mystère ---------- */
.mystery{
  position:relative;overflow:hidden;min-height:0;display:grid;place-items:center;
  grid-template:minmax(0,1fr)/minmax(0,1fr);
  border:1px solid rgba(109,230,255,.35);
  background:repeating-linear-gradient(0deg,#000 0 3px,#050b0a 3px 6px);
  box-shadow:0 0 calc(var(--u)*2.2) rgba(36,76,255,.30),inset 0 0 calc(var(--u)*2) rgba(0,0,0,.7);
  animation:breathe 4s ease-in-out infinite;
}
@keyframes breathe{50%{box-shadow:0 0 calc(var(--u)*3) rgba(60,200,255,.42),inset 0 0 calc(var(--u)*2) rgba(0,0,0,.7)}}
/* coins de visée */
.mystery::before{
  content:"";position:absolute;inset:calc(var(--u)*.7);z-index:3;pointer-events:none;
  --c:var(--cyan);--t:2px;--l:calc(var(--u)*1.6);
  background:
    linear-gradient(var(--c),var(--c)) top left/var(--l) var(--t) no-repeat,
    linear-gradient(var(--c),var(--c)) top left/var(--t) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) top right/var(--l) var(--t) no-repeat,
    linear-gradient(var(--c),var(--c)) top right/var(--t) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left/var(--l) var(--t) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left/var(--t) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/var(--l) var(--t) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/var(--t) var(--l) no-repeat;
  opacity:.85;
}
.mystery::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px);
}
.guess-art{
  position:relative;z-index:1;width:100%;height:100%;display:block;object-fit:contain;mix-blend-mode:screen;
}

/* ---------- Saisie ---------- */
.answer{display:grid;grid-template-columns:auto 1fr 22%;gap:calc(var(--u)*1);align-items:stretch}
.answer::before{
  content:">";align-self:center;color:var(--green);font-size:calc(var(--u)*3);
  text-shadow:0 0 12px rgba(66,255,118,.6);animation:rec 1s steps(1) infinite;
}
.answer input,.answer button,.modal-panel input,.modal-panel button{
  color:#eef;background:#020707;border:2px solid #cfe;padding:.4em .8em;outline:none;
  letter-spacing:.06em;text-shadow:var(--aberration);border-radius:0;
}
.answer input{
  font-size:calc(var(--u)*2.5);text-transform:uppercase;caret-color:var(--green);caret-shape:block;
  background:linear-gradient(180deg,#020a09,#031412);
}
.answer input::placeholder{color:rgba(190,220,230,.45);text-shadow:none}
.answer input:focus,.modal-panel input:focus{box-shadow:0 0 20px rgba(30,255,160,.38),inset 0 0 12px rgba(30,255,160,.10);border-color:#50ff9b}
.answer button,.modal-panel button{
  cursor:pointer;font-family:var(--f-px);font-size:calc(var(--u)*1.15);letter-spacing:.12em;
  color:#fff;background:linear-gradient(180deg,#2a52ff,#0f2dc8);
  border:2px solid #9fb4ff;
  box-shadow:0 calc(var(--u)*.35) 0 #071a78,0 0 18px rgba(36,76,255,.5);
  transition:transform .08s,box-shadow .08s,filter .15s;
}
.answer button:hover:not(:disabled),.modal-panel button:hover:not(:disabled){filter:brightness(1.2)}
.answer button:active:not(:disabled),.modal-panel button:active:not(:disabled){
  transform:translateY(calc(var(--u)*.3));box-shadow:0 calc(var(--u)*.05) 0 #071a78,0 0 10px rgba(36,76,255,.5)
}
.answer button:focus-visible,.modal-panel button:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.answer button:disabled,.answer input:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}

.screen-footer{
  display:flex;align-items:center;justify-content:center;gap:1.3em;margin-top:auto;
  font-family:var(--f-px);font-size:calc(var(--u)*.85);color:var(--yellow);letter-spacing:.2em;
  text-shadow:0 0 10px rgba(255,227,83,.35);
}
.screen-footer span{height:1px;flex:1;background:linear-gradient(90deg,transparent,#7cf)}
.screen-footer span:last-child{background:linear-gradient(270deg,transparent,#7cf)}

/* ---------- Overlay résultat (carte / bust) ---------- */
.overlay{
  position:absolute;inset:0;z-index:40;display:grid;place-items:center;background:rgba(0,0,0,.82);
  opacity:0;visibility:hidden;transition:opacity .16s ease;
}
.overlay.open{opacity:1;visibility:visible}
.overlay::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0}
.overlay.open::before{animation:flashGreen .7s ease-out}
.overlay.error.open::before{animation:flashRed .8s ease-out}
@keyframes flashGreen{0%{opacity:1;background:rgba(66,255,118,.5)}100%{opacity:0;background:rgba(66,255,118,0)}}
@keyframes flashRed{0%{opacity:1;background:rgba(255,40,60,.6)}100%{opacity:0;background:rgba(255,40,60,0)}}
.overlay-glitch{position:absolute;inset:0;opacity:.2;background:repeating-linear-gradient(0deg,transparent 0 9px,#3cf 10px,#f43 11px,transparent 12px 19px)}
.overlay.error .overlay-glitch{opacity:.34;animation:glitchMove .25s steps(2) infinite}
@keyframes glitchMove{50%{transform:translateY(5px)}}
.overlay-content{
  position:relative;z-index:2;text-align:center;height:97%;width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*.7);
}
.overlay.error.open .overlay-content{animation:shake .55s steps(2)}
@keyframes shake{0%,100%{transform:none}20%{transform:translate(-14px,3px)}40%{transform:translate(12px,-4px)}60%{transform:translate(-8px,2px)}80%{transform:translate(6px,-1px)}}
.overlay-kicker{
  font-family:var(--f-px);font-size:calc(var(--u)*1.3);letter-spacing:.14em;color:var(--green);
  text-shadow:0 0 14px rgba(66,255,118,.7);flex:none;
}
.overlay.open .overlay-kicker{animation:slideDown .45s ease-out both}
@keyframes slideDown{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.overlay img{
  flex:1 1 0;min-height:0;width:auto;max-width:92%;object-fit:contain;
  filter:drop-shadow(0 0 34px rgba(80,255,180,.45));
}
.overlay.open img{animation:cardIn .6s cubic-bezier(.2,.9,.3,1.15) both}
@keyframes cardIn{
  0%{opacity:0;transform:translateY(8%) scale(.72) rotate(-5deg)}
  60%{opacity:1;transform:translateY(-1%) scale(1.04) rotate(1deg)}
  100%{opacity:1;transform:none}
}
.overlay.error .overlay-kicker{color:var(--red);text-shadow:0 0 14px rgba(255,53,75,.8)}
.overlay.error img{filter:drop-shadow(0 0 38px rgba(255,0,0,.65))}
.overlay.error.open img{animation:bustIn .5s steps(6) both}
@keyframes bustIn{0%{opacity:0;transform:scale(1.35)}100%{opacity:1;transform:none}}
.overlay-message{
  flex:none;font-size:calc(var(--u)*2.2);letter-spacing:.14em;color:#fff;text-shadow:var(--aberration);
}
.overlay.open .overlay-message{animation:slideUp .45s .15s ease-out both}
@keyframes slideUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- Modales : inscription + game over ---------- */
.modal{
  position:absolute;inset:0;z-index:50;display:grid;place-items:center;
  background:radial-gradient(ellipse at center,rgba(4,16,30,.88),rgba(0,0,0,.94));
  opacity:0;visibility:hidden;transition:opacity .2s ease;
}
.modal.open{opacity:1;visibility:visible}
.modal-panel{
  position:relative;width:min(84%,calc(var(--u)*64));max-height:94%;overflow:auto;
  padding:calc(var(--u)*2) calc(var(--u)*2.6);
  background:linear-gradient(180deg,rgba(2,14,14,.97),rgba(1,8,10,.97));
  border:2px solid #5dffe5;
  box-shadow:0 0 calc(var(--u)*3) rgba(60,255,190,.22),inset 0 0 calc(var(--u)*3) rgba(60,255,190,.05);
  scrollbar-width:thin;scrollbar-color:#2a6 transparent;
}
.modal.open .modal-panel{animation:crtOn .55s cubic-bezier(.3,.8,.3,1) both}
@keyframes crtOn{
  0%{opacity:0;transform:scale(.6,.01);filter:brightness(5)}
  45%{opacity:1;transform:scale(1,.03);filter:brightness(4)}
  100%{opacity:1;transform:none;filter:none}
}
.modal-panel::before{content:"";position:absolute;inset:6px;border:1px solid rgba(255,255,255,.14);pointer-events:none}
.modal-panel::after{ /* coins lumineux */
  content:"";position:absolute;inset:-2px;pointer-events:none;
  --c:var(--yellow);--t:3px;--l:calc(var(--u)*1.8);
  background:
    linear-gradient(var(--c),var(--c)) top left/var(--l) var(--t) no-repeat,
    linear-gradient(var(--c),var(--c)) top left/var(--t) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) top right/var(--l) var(--t) no-repeat,
    linear-gradient(var(--c),var(--c)) top right/var(--t) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left/var(--l) var(--t) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left/var(--t) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/var(--l) var(--t) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/var(--t) var(--l) no-repeat;
}
.modal-title{
  font-family:var(--f-px);font-size:calc(var(--u)*1.9);line-height:1.4;font-weight:400;
  color:var(--yellow);letter-spacing:.06em;margin-bottom:calc(var(--u)*1.1);
  text-shadow:var(--aberration),0 0 16px rgba(255,227,83,.45);
}
.modal-panel p{font-size:calc(var(--u)*2);line-height:1.25;margin:.2em 0 0}
.modal-panel p strong{color:var(--green);font-weight:400;text-shadow:0 0 10px rgba(66,255,118,.5)}

.rules{display:flex;flex-wrap:wrap;gap:calc(var(--u)*.6);margin:calc(var(--u)*1) 0 0;padding:0;list-style:none}
.rules li{
  flex:1 1 auto;text-align:center;padding:.3em .6em;white-space:nowrap;
  font-size:calc(var(--u)*1.45);letter-spacing:.08em;color:var(--cyan);
  border:1px solid rgba(109,230,255,.4);background:rgba(109,230,255,.06);
}
.rules b{color:var(--yellow);font-weight:400}

#start-form{display:grid;gap:calc(var(--u)*.7);margin-top:calc(var(--u)*1.1)}
#start-form label{display:grid;gap:.25em;font-size:calc(var(--u)*1.7);letter-spacing:.12em;color:#67ff9a}
.modal-panel input{font-size:calc(var(--u)*2);padding:.3em .7em;width:100%;letter-spacing:.05em;caret-color:var(--green);caret-shape:block}
.modal-panel input::placeholder{color:rgba(190,220,230,.4);text-shadow:none}
.modal-panel button{margin-top:calc(var(--u)*.5);padding:.8em 1em;width:100%}
.privacy{opacity:.6;font-size:calc(var(--u)*1.55)!important;margin-top:.6em!important}

.mini-board,.leaderboard{color:#ddd;font-size:calc(var(--u)*1.85)}
.mini-board{border-top:1px solid #477;margin-top:calc(var(--u)*1);padding-top:calc(var(--u)*.8)}
.mini-board>div,.leaderboard-title{
  font-family:var(--f-px);font-size:calc(var(--u)*1.05);letter-spacing:.14em;color:#6ffff0;
  margin-bottom:calc(var(--u)*.5);text-shadow:0 0 10px rgba(111,255,240,.4);
}
.mini-board ol,.leaderboard ol{margin:0;padding:0;list-style:none}
.mini-board li::marker,.leaderboard li::marker{content:""}
.mini-board li,.leaderboard li{display:flex;align-items:baseline;gap:.7em;padding:0 .2em;line-height:1.15}
.mini-board li .rank,.leaderboard li .rank{color:#6fa;min-width:1.7em;opacity:.8}
.mini-board li .nm,.leaderboard li .nm{flex:1;display:flex;align-items:baseline;min-width:0;overflow:hidden;white-space:nowrap}
.mini-board li .nm::after,.leaderboard li .nm::after{content:"";flex:1;margin:0 .6em;border-bottom:2px dotted rgba(255,255,255,.2);transform:translateY(-.25em)}
.mini-board li .sc,.leaderboard li .sc{color:var(--yellow);text-shadow:0 0 8px rgba(255,227,83,.4)}
li[data-rank="1"]{color:var(--gold);text-shadow:0 0 10px rgba(255,227,83,.4)}
li[data-rank="2"]{color:var(--silver)}
li[data-rank="3"]{color:var(--bronze)}
li[data-rank="1"] .rank,li[data-rank="2"] .rank,li[data-rank="3"] .rank{color:inherit;opacity:1}
li[data-rank="1"] .rank::before{content:"★";margin-right:.2em}

.final-score{font-size:calc(var(--u)*2.4);margin:.2em 0 .3em;letter-spacing:.1em;color:#bcd}
.final-score strong{
  display:block;font-family:var(--f-px);font-weight:400;font-size:calc(var(--u)*5.6);line-height:1.2;
  color:var(--green);text-shadow:var(--aberration),0 0 24px rgba(66,255,118,.6);
}
.correct-answer{color:#ff9aa5;font-size:calc(var(--u)*2.1);min-height:1.4em;margin-bottom:.6em;text-shadow:var(--aberration)}
.leaderboard{border-top:1px solid #477;border-bottom:1px solid #477;padding:calc(var(--u)*1) 0;margin:calc(var(--u)*.8) 0}
.fatal{
  position:absolute;z-index:70;left:5%;right:5%;bottom:3%;text-align:center;
  color:#ff5964;font-size:calc(var(--u)*1.9);text-shadow:0 0 10px rgba(255,53,75,.7);
}

.permanent-asset{user-select:none;-webkit-user-drag:none;pointer-events:none}

/* ---------- Mobile / petits écrans : plus de cadre TV, plein écran ---------- */
@media (max-width:760px),(max-height:520px){
  .page{padding:0}
  .tv{width:100%;aspect-ratio:auto;height:100vh;height:100svh;filter:none}
  .tv-frame{display:none}
  .screen{position:relative;inset:auto;left:auto;top:auto;width:100%;height:100%;border-radius:0}
}
@media (max-width:760px){
  .tv{--u:2.45cqw}
  .screen{padding:calc(var(--u)*1.1) calc(var(--u)*1.5);gap:calc(var(--u)*.7)}
  /* le visuel mystère contient déjà logo + GUESS THE PICK : on libère la place sur mobile */
  .brand{display:none}
  .game-grid{grid-template-columns:1fr;grid-template-rows:minmax(0,42svh) auto;gap:calc(var(--u)*.9)}
  .mystery{order:-1}
  .clue-list{--row:calc(var(--u)*4.4)}
  .clue{grid-template-columns:calc(var(--u)*15.5) 1fr;gap:.5em;font-size:calc(var(--u)*2.45)}
  .modal-panel{width:93%;padding:calc(var(--u)*2) calc(var(--u)*2.2)}
  .answer{grid-template-columns:1fr 26%}
  .answer::before{display:none}
  .answer input{text-transform:none}
  .screen-footer{display:none}
  .mini-board{font-size:calc(var(--u)*2.3)}
}
@media (max-height:520px) and (min-width:761px){
  .tv{--u:min(1cqw,1.9svh)}
  .game-grid{grid-template-columns:1.6fr 1fr}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .crt-noise,.scanlines::after{display:none}
}

.session-verdict{
  margin:calc(var(--u)*.4) 0 calc(var(--u)*.9);
  font-family:var(--f-px);
  font-size:calc(var(--u)*1.05);
  line-height:1.55;
  color:var(--cyan);
  text-shadow:var(--aberration),0 0 12px rgba(109,230,255,.35);
}