:root{
    --ink:#0f0f14; --panel:#191921; --panel2:#22222d; --line:#34343f;
    --yellow:#ffdd00; --yellow-d:#e6c500; --green:#12a150; --polka:#e63329;
    --blue:#2f6bff; --text:#f5f3ea; --muted:#9a9aa8;
    --disp:'Anton',sans-serif; --sans:'Hanken Grotesk',sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html,body{height:100%;}
  body{background:var(--ink);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;}
  a{color:var(--yellow);text-decoration:none;}
  a:hover{color:var(--yellow-d);}
  input{font-family:var(--sans);}
  @keyframes popin{0%{transform:scale(.85);opacity:0}100%{transform:scale(1);opacity:1}}
  @keyframes slideup{0%{transform:translateY(24px);opacity:0}100%{transform:translateY(0);opacity:1}}
  @keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
  @keyframes flicker{0%,100%{transform:scale(1) rotate(-1deg)}50%{transform:scale(1.08) rotate(1deg)}}
  @keyframes confettiFall{0%{transform:translateY(-30px) rotate(0deg);opacity:1}100%{transform:translateY(440px) rotate(560deg);opacity:0}}
  @keyframes flagwave{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-6deg)}}
  @keyframes slidein{0%{transform:translateY(16px)}100%{transform:translateY(0)}}
html,body{max-width:100%;overflow-x:hidden;} img,svg{max-width:100%;}
button{-webkit-tap-highlight-color:transparent;touch-action:manipulation;} input,textarea,select,button{font-size:16px;}
@media (max-width:600px){ #root [style*="grid-template-columns:repeat(2,1fr)"]{grid-template-columns:1fr !important;} #root [style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr) !important;} #root [style*="gap:22px"]{gap:12px !important;} table{display:block;overflow-x:auto;white-space:nowrap;} }
@media (max-width:380px){ #root [style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:1fr !important;} }
@media (hover:hover){ #root button[data-ev-click][style*="min-height:84px"]:hover{ border-color:var(--yellow) !important; background:rgba(255,221,0,.07) !important; transform:translateY(-3px) !important; box-shadow:0 10px 24px rgba(0,0,0,.4) !important; } }
#root button[data-ev-click][style*="min-height:84px"]:active{ transform:scale(.98) !important; }
.tv-overlay{position:fixed;inset:0;z-index:6;pointer-events:none;overflow:hidden;}
.tv-vignette{position:absolute;inset:0;box-shadow:inset 0 0 180px 40px rgba(0,0,0,.55);}
.tv-sweep{position:absolute;top:-60%;width:45%;height:220%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);transform:rotate(16deg);animation:tvsweep 11s linear infinite;}
@keyframes tvsweep{0%{left:-50%}100%{left:130%}}
.fx-flash{position:fixed;inset:0;z-index:7;pointer-events:none;background:radial-gradient(circle at 50% 42%,rgba(18,161,80,.5),transparent 60%);animation:fxflash .6s ease-out forwards;}
.fx-flash.bad{background:radial-gradient(circle at 50% 42%,rgba(230,51,41,.5),transparent 62%);}
@keyframes fxflash{0%{opacity:.95}100%{opacity:0}}
#root.shake{animation:tvshake .42s;}
@keyframes tvshake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-9px)}40%,60%{transform:translateX(9px)}}

/* Effet lumineux "burst" sur bonne réponse : anneau doré qui explose depuis le centre */
.fx-burst{position:fixed;left:50%;top:42%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;z-index:8;pointer-events:none;background:radial-gradient(circle,rgba(255,221,0,.95) 0%,rgba(255,221,0,.35) 40%,rgba(255,221,0,0) 72%);animation:fxburst .65s cubic-bezier(.15,.7,.3,1) forwards;}
@keyframes fxburst{0%{transform:scale(0);opacity:1}70%{opacity:.7}100%{transform:scale(34);opacity:0}}
.fx-rays{position:fixed;inset:0;z-index:7;pointer-events:none;opacity:0;animation:fxrays .55s ease-out forwards;}
.fx-rays::before{content:'';position:absolute;inset:-20%;background:conic-gradient(from 0deg,transparent 0deg,rgba(255,221,0,.16) 6deg,transparent 12deg,transparent 42deg,rgba(255,221,0,.16) 48deg,transparent 54deg,transparent 84deg,rgba(255,221,0,.16) 90deg,transparent 96deg,transparent 126deg,rgba(255,221,0,.16) 132deg,transparent 138deg,transparent 168deg,rgba(255,221,0,.16) 174deg,transparent 180deg,transparent 210deg,rgba(255,221,0,.16) 216deg,transparent 222deg,transparent 252deg,rgba(255,221,0,.16) 258deg,transparent 264deg,transparent 294deg,rgba(255,221,0,.16) 300deg,transparent 306deg,transparent 336deg,rgba(255,221,0,.16) 342deg,transparent 348deg);animation:fxraysspin 1.1s linear;}
@keyframes fxrays{0%{opacity:1}100%{opacity:0}}
@keyframes fxraysspin{0%{transform:rotate(0deg)}100%{transform:rotate(35deg)}}

/* Countdown géant plein écran (lancement de partie) */
.giant-cd{position:fixed;inset:0;z-index:9997;display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 90% at 50% 40%,rgba(27,27,38,.92),rgba(15,15,20,.97));pointer-events:none;}
.giant-cd .num{font-family:var(--disp);font-size:min(42vw,320px);line-height:1;color:var(--yellow);text-shadow:0 0 60px rgba(255,221,0,.5);animation:gcdpop .78s cubic-bezier(.2,.9,.3,1.3);}
.giant-cd .num.go{color:var(--green);text-shadow:0 0 60px rgba(18,161,80,.55);font-size:min(24vw,190px);}
@keyframes gcdpop{0%{transform:scale(.3);opacity:0}30%{transform:scale(1.15);opacity:1}55%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:0}}
.dc-toast{position:fixed;left:50%;top:26px;transform:translateX(-50%);z-index:9998;background:rgba(230,51,41,.96);color:#fff;font-family:var(--sans,sans-serif);font-weight:800;font-size:15px;padding:13px 20px;border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.5);max-width:90vw;text-align:center;animation:toastin .25s ease-out;}
@keyframes toastin{0%{opacity:0;transform:translateX(-50%) translateY(-10px)}100%{opacity:1;transform:translateX(-50%) translateY(0)}}
@media (max-width:600px){
  #root [style*="z-index:2"][style*="min-height:100vh"]{padding-left:14px !important;padding-right:14px !important;}
  #root button[data-ev-click][style*="min-height:84px"]{min-height:64px !important;}
}
@media (max-width:400px){
  #root [style*="font-size:26px"]{font-size:22px !important;}
}

/* ===== Chrono circulaire spectaculaire ===== */
.chrono-ring{position:fixed;top:12px;right:12px;z-index:8;width:64px;height:64px;display:flex;align-items:center;justify-content:center;pointer-events:none;}
.chrono-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);}
.chrono-ring .cr-bg{fill:none;stroke:rgba(255,255,255,.12);stroke-width:8;}
.chrono-ring .cr-fg{fill:none;stroke:var(--yellow);stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset .18s linear, stroke .3s;filter:drop-shadow(0 0 6px rgba(255,221,0,.6));}
.chrono-ring .cr-num{position:relative;font-family:var(--disp);font-size:24px;color:var(--text);}
.chrono-ring.danger .cr-fg{stroke:var(--polka);filter:drop-shadow(0 0 9px rgba(230,51,41,.85));}
.chrono-ring.danger .cr-num{color:var(--polka);}
.chrono-ring.pulse{animation:crpulse .6s ease-in-out infinite;}
@keyframes crpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
/* ===== Transitions de scene ===== */
@keyframes scenein{0%{opacity:0;transform:translateX(46px) scale(.94);filter:blur(6px)}60%{filter:blur(0)}100%{opacity:1;transform:translateX(0) scale(1);filter:blur(0)}}
#root.scene-in{animation:scenein .55s cubic-bezier(.22,.9,.3,1);}
@keyframes qin{0%{opacity:0;transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
#root.q-in{animation:qin .4s cubic-bezier(.22,.9,.3,1);}

/* ===== Confettis bonne réponse ===== */
.confetti-wrap{position:fixed;inset:0;z-index:8;pointer-events:none;overflow:hidden;}
.confetti{position:absolute;top:36%;width:9px;height:14px;border-radius:2px;opacity:0;animation:confall 1.2s ease-out forwards;}
@keyframes confall{0%{opacity:1;transform:translateY(-12px) rotate(0)}100%{opacity:0;transform:translateY(340px) rotate(540deg)}}

/* === v2 finitions : responsive tablette/grand écran + accessibilité + safe-area === */
@media (min-width:601px) and (max-width:1024px){ .wrap{max-width:92vw;} }
@media (min-width:1500px){ .wrap{max-width:1400px;margin-left:auto;margin-right:auto;} }
@supports(padding:max(0px)){ body{padding-left:max(0px,env(safe-area-inset-left));padding-right:max(0px,env(safe-area-inset-right));} }
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--yellow);outline-offset:2px;border-radius:8px;}
@media (pointer:coarse){ button,select{min-height:48px;} }

/* anneau chrono en doublon du modèle (qRing) — masqué */
.chrono-ring{display:none !important;}