/* ───────── Joker de la question, « À suivre » ───────── */
.joker-panel { display: flex; align-items: center; gap: 1em; background: rgba(255,255,255,.95); color: #2a1660; border-radius: calc(2 * var(--u)); padding: .6em 1.4em; font-size: calc(2.2 * var(--u)); font-weight: 800; box-shadow: 0 10px 40px rgba(0,0,0,.35); animation: popin .6s .5s both; max-width: 80%; }
.joker-panel .e { font-size: 2.2em; }
.joker-panel b { display: block; font-size: 1.15em; color: #7b2ff7; }
.joker-panel.malus b { color: #c9184a; }
.jk-badge { font-size: .75em; background: #fff; color: #2a1660; border-radius: 999px; padding: .1em .7em; margin-left: .5em; }
.next-up { display: flex; align-items: center; gap: .8em; background: linear-gradient(135deg, var(--a), var(--b)); border-radius: 999px; padding: .35em 1.4em .35em .5em; font-size: calc(2 * var(--u)); font-weight: 900; box-shadow: 0 10px 30px rgba(0,0,0,.35); animation: slidein .6s 1.5s both; }
.next-up .e { font-size: 1.8em; background: rgba(255,255,255,.2); border-radius: 50%; width: 1.6em; height: 1.6em; display: grid; place-items: center; }
.next-up small { display: block; font-size: .7em; opacity: .9; font-weight: 800; }
.next-up .lbl { font-size: .7em; letter-spacing: .12em; opacity: .8; }

/* ───────── Classement en course ───────── */
#scoreList.race { position: relative; border-radius: calc(1.6 * var(--u)); overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.4); width: min(100%, calc(150 * var(--u))); }
.race-h .lane2 { position: relative; display: flex; align-items: center; border-bottom: 2px solid rgba(255,255,255,.6); }
.race-h .lane2 .no { width: calc(3.4 * var(--u)); text-align: center; font-weight: 900; font-size: calc(2 * var(--u)); color: #fff; opacity: .85; flex: none; }
.race-h .runner { position: absolute; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: .3em; transition: left 2.2s cubic-bezier(.3,.1,.2,1); white-space: nowrap; }
.race-h .runner .who { display: flex; flex-direction: column; align-items: flex-start; font-weight: 900; font-size: calc(1.5 * var(--u)); text-shadow: 0 2px 6px rgba(0,0,0,.6); line-height: 1.1; }
.race-h .runner .who small { color: #ffe066; font-size: .95em; }
.race-h .runner .av { --s: var(--rs); border-width: 3px; }
.race-h .runner .ico { font-size: calc(var(--rs) * .9); display: inline-block; }
.race-h .finish { position: absolute; top: 0; bottom: 0; right: 5%; width: calc(1.6 * var(--u)); background: repeating-conic-gradient(#fff 0 25%, #111 0 50%) 0 0 / calc(.8 * var(--u)) calc(.8 * var(--u)); opacity: .9; }
.th-course { background: repeating-linear-gradient(90deg, transparent 0 calc(12 * var(--u)), rgba(255,255,255,.08) 0 calc(12.2 * var(--u))), linear-gradient(#c0392b, #a93226); }
.th-course .ico { transform: scaleX(-1); animation: run .35s infinite alternate; }
.th-kart { background: linear-gradient(#4b4f56, #3a3d42); }
.th-kart .lane2 { border-bottom: 3px dashed #ffd23f !important; }
.th-kart .ico { transform: scaleX(-1); animation: vroom .2s infinite alternate; }
@keyframes run { to { transform: scaleX(-1) translateY(-5px) rotate(-6deg); } }
@keyframes vroom { to { transform: scaleX(-1) translateY(-2px); } }
.race-v { display: flex; align-items: stretch; justify-content: space-around; }
.race-v .col { position: relative; flex: 1; border-right: 2px solid rgba(255,255,255,.25); }
.race-v .climber { position: absolute; left: 50%; transform: translate(-50%, 50%); display: flex; flex-direction: column; align-items: center; transition: bottom 2.2s cubic-bezier(.3,.1,.2,1); }
.race-v .climber .av { --s: var(--rs); border-width: 3px; }
.race-v .climber .ico { font-size: calc(var(--rs) * .9); }
.race-v .climber .who { font-weight: 900; font-size: calc(1.4 * var(--u)); text-shadow: 0 2px 6px rgba(0,0,0,.7); text-align: center; line-height: 1.1; }
.race-v .climber .who small { display: block; color: #ffe066; }
.race-v .top { position: absolute; top: 2%; left: 0; right: 0; text-align: center; font-size: calc(4 * var(--u)); z-index: 1; }
.th-escalade { background: radial-gradient(circle at 20% 30%, #e07a5f 0 6px, transparent 7px) 0 0 / 70px 90px, radial-gradient(circle at 70% 60%, #3d5a80 0 7px, transparent 8px) 0 0 / 90px 80px, radial-gradient(circle at 40% 80%, #f2cc8f 0 5px, transparent 6px) 0 0 / 60px 70px, linear-gradient(#d9c8a9, #b9a27f); }
.th-escalade .ico { animation: climb .5s infinite alternate; }
@keyframes climb { to { transform: translateY(-4px) rotate(8deg); } }
.th-fusee { background: radial-gradient(circle, #fff 0 1px, transparent 2px) 0 0 / 50px 60px, radial-gradient(circle, rgba(255,255,255,.6) 0 1px, transparent 2px) 25px 30px / 70px 80px, linear-gradient(#0b0630, #2a1060 60%, #5a2a8a); }
.th-fusee .ico { transform: rotate(-45deg); }
.th-fusee .climber::after { content: '🔥'; font-size: calc(var(--rs) * .5); transform: rotate(180deg); margin-top: -.4em; animation: flick .15s infinite alternate; }
@keyframes flick { to { transform: rotate(180deg) scale(1.3); } }
.race-delta { position: absolute; font-weight: 900; color: #b9ffd9; font-size: calc(1.8 * var(--u)); text-shadow: 0 2px 8px rgba(0,0,0,.7); animation: plusUp 2s 1.6s ease-out both; pointer-events: none; }
.race-crown { position: absolute; font-size: calc(2.6 * var(--u)); transform: translate(-50%, -110%); animation: bob 1.6s infinite; }

/* ───────── Pari ───────── */
.pari-t { font-size: calc(6 * var(--u)); font-weight: 900; }
.pari-grid { display: flex; flex-wrap: wrap; gap: calc(2.5 * var(--u)); justify-content: center; }
.pari-p { display: flex; flex-direction: column; align-items: center; gap: .4em; font-weight: 900; font-size: calc(1.8 * var(--u)); }
.pari-p .av { --s: calc(9 * var(--u)); }
.pari-p .chip { background: #ffd23f; color: #2a1300; border-radius: 999px; padding: .15em .8em; font-size: calc(2.2 * var(--u)); animation: popin .5s cubic-bezier(.2,1.6,.4,1) both; }
.pari-p .chip.wait { background: rgba(255,255,255,.2); color: #fff; animation: none; }

/* ───────── Réactions lisibles (colonne de droite) ───────── */
.rx { left: auto !important; right: 3vw; }
.rx .e { font-size: calc(6 * var(--u)); }

/* ───────── Décors de course (race.js) ───────── */
.race2 { position: relative; aspect-ratio: 2 / 1; height: 100%; max-width: 100%; margin: 0 auto; border-radius: calc(1.6 * var(--u)); overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.45); border: 4px solid rgba(255,255,255,.7); }
#s-scores .score-list { min-height: 0; }

/* ───────── Phase jokers ───────── */
.jk-next { font-size: calc(2.2 * var(--u)); font-weight: 800; color: var(--muted); }
.jk-next b { color: #fff; }
.jk-card { display: flex; align-items: center; gap: calc(2.5 * var(--u)); background: #fff; color: #2a1660; border-radius: calc(2.4 * var(--u)); padding: calc(1.6 * var(--u)) calc(3.4 * var(--u)); box-shadow: 0 20px 70px rgba(0,0,0,.45); animation: cardflip 1s cubic-bezier(.2,1.4,.4,1); }
.jk-card.malus { background: linear-gradient(160deg, #fff, #ffd6de); color: #6a0f24; }
.jk-card .e { font-size: calc(11 * var(--u)); }
.jk-card .n { font-size: calc(5 * var(--u)); font-weight: 900; }
.jk-card .d { font-size: calc(2.4 * var(--u)); font-weight: 800; opacity: .85; }
.jk-players { display: flex; gap: calc(2 * var(--u)); flex-wrap: wrap; justify-content: center; }
.jk-players .jp { display: flex; flex-direction: column; align-items: center; gap: .3em; font-weight: 900; font-size: calc(1.5 * var(--u)); }
.jk-players .jp .av { --s: calc(7 * var(--u)); }
.jk-players .jp .st { font-size: calc(2.4 * var(--u)); height: 1.3em; }
.jk-players .jp.hit .av { box-shadow: 0 0 0 5px #ff4d6d, 0 0 30px #ff4d6d; animation: shake .4s 2; }
.jk-log { display: flex; flex-direction: column; gap: .5em; align-items: center; min-height: calc(10 * var(--u)); }
.jk-log .l { display: flex; align-items: center; gap: .6em; background: rgba(0,0,0,.35); border-radius: 999px; padding: .3em 1.2em .3em .3em; font-size: calc(2.1 * var(--u)); font-weight: 900; animation: slidein .5s cubic-bezier(.2,1.4,.4,1) both; }
.jk-log .l .av { --s: calc(4.6 * var(--u)); border-width: 3px; }
.jk-log .l .arrow { font-size: 1.6em; animation: throwIt .8s ease-out; }
@keyframes throwIt { from { transform: translateX(-80px) scale(.3) rotate(-90deg); opacity: 0; } }
.jk-players .jp .cards { font-size: calc(1.6 * var(--u)); letter-spacing: -.2em; min-height: 1.2em; }
.pass-bub { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: #ffd23f; color: #2a1300; font-weight: 900; font-size: calc(1.5 * var(--u)); padding: .2em .7em; border-radius: 999px; white-space: nowrap; box-shadow: 0 6px 20px rgba(0,0,0,.4); animation: passIn 1.8s cubic-bezier(.2,1.6,.4,1) forwards; z-index: 5; text-align: center; }
.pass-bub small { display: block; font-size: .7em; font-weight: 800; }
@keyframes passIn { 0% { transform: translate(-50%, 10px) scale(.3); opacity: 0; } 15% { transform: translate(-50%, -8px) scale(1.15); opacity: 1; } 80% { transform: translate(-50%, -12px) scale(1); opacity: 1; } 100% { transform: translate(-50%, -30px); opacity: 0; } }

/* ───────── Loups-garous ───────── */
body.night #bg { filter: brightness(.45) saturate(.6) hue-rotate(200deg); transition: filter 2s; }
.loup-big { font-size: calc(12 * var(--u)); line-height: 1; }
.loup-big.moon { filter: drop-shadow(0 0 40px #fff8c4); animation: bob 4s ease-in-out infinite; }
.village { display: flex; flex-wrap: wrap; gap: calc(1.6 * var(--u)); justify-content: center; }
.village .vg { display: flex; flex-direction: column; align-items: center; gap: .2em; font-weight: 900; font-size: calc(1.5 * var(--u)); }
.village .vg .av { --s: calc(7 * var(--u)); }
.village .vg.dead { opacity: .55; } .village .vg.dead .av { filter: grayscale(1); }
.village .vg.dead::before { content: '💀'; font-size: calc(2 * var(--u)); margin-bottom: -.8em; z-index: 1; }
.village .vg small { font-size: .8em; color: var(--c); }
.village.sleep .vg span { font-size: calc(2.4 * var(--u)); }
.clue { font-size: calc(3.2 * var(--u)); font-weight: 900; background: #fff; color: #2a1660; padding: .5em 1.2em; border-radius: calc(2 * var(--u)); max-width: 85%; text-align: center; animation: popin .7s cubic-bezier(.2,1.6,.4,1) both; }
.clue.none { background: rgba(0,0,0,.35); color: #fff; }
.clues { display: flex; flex-direction: column; gap: .4em; font-size: calc(2 * var(--u)); font-weight: 800; background: rgba(0,0,0,.3); padding: .7em 1.2em; border-radius: calc(1.4 * var(--u)); }
.loup-win { font-size: calc(5 * var(--u)); font-weight: 900; color: var(--c); text-align: center; animation: popin .8s .6s both; }
.loup-win small { display: block; font-size: .45em; color: #fff; }

/* Course filmée : décor et personnages sur un canvas, étiquettes des joueurs par-dessus */
.race2 canvas.scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.race2 .labels { position: absolute; inset: 0; pointer-events: none; }
.race2 .tok { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.race2 .tok .lbl { background: rgba(0,0,0,.68); border-radius: 999px; padding: .08em .6em; font-weight: 900; font-size: calc(1.15 * var(--u)); white-space: nowrap; border: 1px solid rgba(255,255,255,.25); }
.race2 .tok .lbl b { color: #ffe066; }
.race2 .tok .lbl i { font-style: normal; color: #8affc1; }
.race2 .tok.lead .lbl { background: rgba(120,80,0,.85); border-color: #ffd23f; }
.vr-bar { display: flex; gap: calc(1.5 * var(--u)); justify-content: center; margin-top: calc(2 * var(--u)); }
.vr-bar span { background: rgba(255,255,255,.14); border-radius: 999px; padding: .3em 1em; font-weight: 900; font-size: calc(2.6 * var(--u)); }
.vr-bar span.ok { background: #2fb36b; }
/* Objets lancés sur l'écran et réactions « en vrai » */
#fxc { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 70; pointer-events: none; }
.clap-row { position: fixed; left: 0; right: 0; bottom: -1vh; display: flex; justify-content: space-around; z-index: 60; pointer-events: none; animation: clapIn 2.8s ease both; }
.clap-row span { font-size: calc(9 * var(--u)); animation: clap .3s ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes clap { from { transform: translateY(0) scale(1) rotate(-6deg); } to { transform: translateY(-1.2vh) scale(1.12, .94) rotate(6deg); } }
@keyframes clapIn { 0% { transform: translateY(100%); } 10%, 85% { transform: translateY(0); } 100% { transform: translateY(100%); } }
.kissmark { position: fixed; z-index: 60; font-size: calc(14 * var(--u)); pointer-events: none; animation: kissmark 3.6s ease both; }
@keyframes kissmark { 0% { transform: translate(-50%, -50%) rotate(var(--rot)) scale(2.4); opacity: 0; } 8% { transform: translate(-50%, -50%) rotate(var(--rot)) scale(.92); opacity: .95; } 14%, 75% { transform: translate(-50%, -50%) rotate(var(--rot)) scale(1); opacity: .9; } 100% { transform: translate(-50%, -50%) rotate(var(--rot)) scale(1); opacity: 0; } }
.logo { gap: .05em; }

#demoBadge { position: fixed; top: calc(1.2 * var(--u)); right: calc(1.5 * var(--u)); z-index: 40; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: .3em 1em; font-weight: 800; font-size: calc(1.5 * var(--u)); }
#demoBadge.over { background: #c92a2a; border-color: #fff; }
/* Version en ligne : code d'accès et état de la connexion */
#kksGate { position: fixed; inset: 0; z-index: 200; display: none; place-items: center; background: radial-gradient(circle at 30% 20%, #6b2fbf, #1a0b3d 70%); }
#kksGate.on { display: grid; }
#kksGate .kg-in { display: flex; flex-direction: column; align-items: center; gap: calc(1.6 * var(--u)); text-align: center; }
#kksGate .kg-logo { font-weight: 900; font-size: calc(8 * var(--u)); color: #ffd23f; letter-spacing: -.02em; }
#kksGate .kg-logo span { color: #fff; }
#kksGate .kg-t { font-weight: 800; font-size: calc(3 * var(--u)); }
#kksGate input { font: 900 calc(4 * var(--u)) system-ui, sans-serif; text-align: center; letter-spacing: .2em; text-transform: uppercase; width: calc(40 * var(--u)); padding: .3em; border-radius: calc(1.5 * var(--u)); border: 0; }
#kksGate button { font: 900 calc(2.6 * var(--u)) system-ui, sans-serif; padding: .5em 1.6em; border-radius: 999px; border: 0; background: #ffd23f; color: #2a1300; cursor: pointer; }
#kksGate .kg-err { color: #ffb3c1; font-weight: 800; min-height: 1.2em; font-size: calc(2 * var(--u)); }
#kksGate .kg-s { opacity: .75; font-size: calc(1.7 * var(--u)); }
#kksStatus { position: fixed; left: 50%; bottom: calc(3 * var(--u)); transform: translateX(-50%); z-index: 150; background: rgba(0,0,0,.6); padding: .5em 1.4em; border-radius: 999px; font-weight: 800; font-size: calc(2 * var(--u)); display: none; }
#kksStatus.on { display: block; }