/* ───────── Démarrage (débloque le son) ───────── */
#startGate { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; background: radial-gradient(circle at 50% 40%, #3b0d5c, #12052a 70%); text-align: center; }
#startGate.on { display: grid; }
.sg-in { display: flex; flex-direction: column; align-items: center; gap: calc(3 * var(--u)); }
#startBtn { font-size: calc(4 * var(--u)); font-weight: 900; padding: .5em 1.4em; border-radius: 999px; background: linear-gradient(135deg, #ffd23f, #ff9f1c); color: #2a1300; box-shadow: 0 .15em 0 #b85c00, 0 0 80px rgba(255,210,63,.5); }
.sg-s { font-size: calc(1.8 * var(--u)); color: rgba(255,255,255,.75); font-weight: 700; line-height: 1.4; }

/* ───────── Pulsation au rythme de la musique ───────── */
body.beat .lp .av, body.beat .answered .av, body.beat .pod .av { transform: translateY(-6px) scale(1.06); }
.lp .av, .answered .av, .pod .av { transition: transform .12s; }
body.beat #mascot .body { transform: translateY(-8px) scale(1.04); }
body.beat .logo span:first-child { transform: scale(1.06) rotate(-3deg); }
#eqbar { position: fixed; left: 0; right: 0; bottom: 0; height: calc(5 * var(--u)); display: flex; align-items: flex-end; gap: 3px; padding: 0 2px; z-index: 2; pointer-events: none; opacity: .5; }
#eqbar i { flex: 1; background: linear-gradient(0deg, var(--a), var(--b)); border-radius: 4px 4px 0 0; height: 8%; transition: height .25s ease-out; }
body.no-eq #eqbar { opacity: 0; }

/* ───────── Tampon « DÉFI ! », bannière d'arrivée, combo ───────── */
#stamp { position: fixed; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 62; }
#stamp .st { font-size: calc(14 * var(--u)); font-weight: 900; color: #fff; padding: .1em .5em; border: .08em solid #fff; border-radius: .2em; transform: rotate(-8deg); background: linear-gradient(135deg, var(--b), var(--a));
  text-shadow: 0 .05em 0 rgba(0,0,0,.3); box-shadow: 0 0 120px var(--b); animation: stampIn 1.6s cubic-bezier(.2,1.6,.4,1) forwards; }
#stamp .st small { display: block; font-size: .3em; text-align: center; }
@keyframes stampIn { 0% { transform: rotate(-8deg) scale(4); opacity: 0; } 18% { transform: rotate(-8deg) scale(1); opacity: 1; } 80% { transform: rotate(-8deg) scale(1); opacity: 1; } 100% { transform: rotate(-8deg) scale(.8); opacity: 0; } }
body.shake #app { animation: shakeScr .45s; }
@keyframes shakeScr { 20% { transform: translate(-12px, 6px) rotate(-.5deg); } 40% { transform: translate(10px, -8px) rotate(.5deg); } 60% { transform: translate(-8px, 4px); } 80% { transform: translate(6px, -3px); } }
#joinBanner { position: fixed; top: 4%; left: 50%; transform: translateX(-50%); z-index: 58; pointer-events: none; }
#joinBanner .jb { display: flex; align-items: center; gap: .6em; background: linear-gradient(135deg, var(--a), var(--b)); padding: .4em 1.4em .4em .4em; border-radius: 999px; font-size: calc(2.4 * var(--u)); font-weight: 900; box-shadow: 0 10px 40px rgba(0,0,0,.4); animation: jbIn 3s cubic-bezier(.2,1.4,.4,1) forwards; white-space: nowrap; }
#joinBanner .jb .av { --s: calc(5 * var(--u)); }
@keyframes jbIn { 0% { transform: translateY(-150%) scale(.6); opacity: 0; } 12%, 80% { transform: none; opacity: 1; } 100% { transform: translateY(-150%); opacity: 0; } }
#combo { position: fixed; right: 4%; top: 30%; z-index: 57; pointer-events: none; font-weight: 900; text-align: center; }
#combo .cb { font-size: calc(6 * var(--u)); animation: comboIn 1.8s cubic-bezier(.2,1.6,.4,1) forwards; text-shadow: 0 0 30px var(--c); }
#combo .cb small { display: block; font-size: .45em; color: var(--c); }
@keyframes comboIn { 0% { transform: scale(0) rotate(20deg); } 20% { transform: scale(1.2) rotate(-6deg); } 35%, 80% { transform: scale(1); opacity: 1; } 100% { transform: translateY(-60px); opacity: 0; } }
#fwCanvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 46; }

/* ───────── Réactions spéciales ───────── */
#splats { position: fixed; inset: 0; pointer-events: none; z-index: 47; overflow: hidden; }
.splat { position: absolute; font-size: calc(14 * var(--u)); animation: splatIn 4.5s forwards; filter: drop-shadow(0 6px 10px rgba(0,0,0,.4)); }
.splat::after { content: ''; position: absolute; left: 30%; top: 70%; width: 18%; height: 0; background: #d62828; border-radius: 0 0 50% 50%; animation: drip 4s .4s forwards; }
@keyframes splatIn { 0% { transform: scale(3) rotate(-30deg); opacity: 0; } 8% { transform: scale(1) rotate(0); opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(30px); } }
@keyframes drip { to { height: 120%; } }
.flower { position: absolute; top: -60px; font-size: calc(4.5 * var(--u)); animation: fallF linear forwards; }
@keyframes fallF { to { transform: translateY(115vh) rotate(540deg); } }
@keyframes zapF { 0%, 30% { opacity: .9; } 15%, 45% { opacity: 0; } 60% { opacity: .6; } 100% { opacity: 0; } }
.flame { position: absolute; bottom: -40px; font-size: calc(7 * var(--u)); animation: flameUp 2.2s ease-out forwards; }
@keyframes flameUp { 0% { transform: translateY(0) scale(.6); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-55vh) scale(1.4); opacity: 0; } }
.rx.big .e { font-size: calc(9 * var(--u)); }
.rx .who { font-size: calc(1.3 * var(--u)); font-weight: 900; background: rgba(0,0,0,.5); padding: .1em .5em; border-radius: 999px; margin-top: .2em; }

/* ───────── Questions : mots qui apparaissent, compteur de réponses, couronne ───────── */
.qtext .w { display: inline-block; opacity: 0; transform: translateY(20px) scale(.8); animation: wIn .45s cubic-bezier(.2,1.6,.4,1) forwards; }
@keyframes wIn { to { opacity: 1; transform: none; } }
.qnum .cnt { display: inline-block; margin-left: .6em; background: rgba(255,255,255,.18); padding: .1em .7em; border-radius: 999px; color: #fff; }
.qnum .cnt.pop { animation: popin .4s cubic-bezier(.2,1.6,.4,1); }
.plus { position: fixed; font-weight: 900; font-size: calc(3 * var(--u)); color: #b9ffd9; text-shadow: 0 3px 10px rgba(0,0,0,.5); pointer-events: none; z-index: 48; animation: plusUp 1.8s ease-out forwards; }
@keyframes plusUp { 0% { transform: translate(-50%, 0) scale(.5); opacity: 0; } 20% { transform: translate(-50%, -20px) scale(1.2); opacity: 1; } 100% { transform: translate(-50%, -120px) scale(1); opacity: 0; } }
.sr .crown { position: absolute; left: calc(4.6 * var(--u)); top: -.6em; font-size: calc(2.6 * var(--u)); animation: bob 1.6s infinite; z-index: 2; }
.revealed .choice.good { animation: goodpulse 1s 2, glowGood 2s infinite alternate; }
.revealed .choice.good { animation: goodpulse 1s 1; }

/* ───────── Défis : flammes, particules ───────── */
.gauge .hot { position: absolute; top: -1.2em; left: 50%; transform: translateX(-50%); font-size: calc(3.4 * var(--u)); animation: bob .4s infinite; }
.gauge { position: relative; }
.tapfx { position: absolute; font-size: calc(2.6 * var(--u)); pointer-events: none; animation: tapUp .8s ease-out forwards; }
@keyframes tapUp { to { transform: translate(var(--dx), -90px) rotate(var(--r)); opacity: 0; } }
.lane .dust { position: absolute; right: 100%; font-size: calc(2.4 * var(--u)); opacity: .7; animation: dust .4s infinite; }
@keyframes dust { 50% { transform: translateX(-10px) scale(1.3); opacity: .2; } }
.result-list .rr .rk { animation: medalDrop .8s cubic-bezier(.2,1.6,.4,1) both; animation-delay: inherit; }
@keyframes medalDrop { from { transform: translateY(-200px) rotate(-90deg); opacity: 0; } }

/* ───────── Roue de la fortune ───────── */
.wheel-title { font-size: calc(3.6 * var(--u)); font-weight: 900; }
.wheel-wrap { position: relative; }
.wheel { width: calc(33 * var(--u)); height: calc(33 * var(--u)); border-radius: 50%; border: calc(1 * var(--u)) solid #fff; box-shadow: 0 0 0 calc(.6 * var(--u)) var(--c), 0 30px 80px rgba(0,0,0,.5); position: relative; overflow: hidden; transition: transform 5s cubic-bezier(.12,.8,.12,1); }
.wheel .seg { position: absolute; left: 50%; top: 50%; width: 50%; height: 2px; transform-origin: 0 0; }
.wheel .seg span { position: absolute; left: 20%; top: -1em; font-size: calc(1.15 * var(--u)); font-weight: 900; white-space: nowrap; color: #111; width: 70%; overflow: hidden; text-overflow: ellipsis; }
.wheel .seg b { font-size: calc(2.6 * var(--u)); margin-right: .2em; vertical-align: middle; }
.wheel-ptr { position: absolute; top: calc(-3.5 * var(--u)); left: 50%; transform: translateX(-50%); font-size: calc(6 * var(--u)); color: #fff; z-index: 2; text-shadow: 0 4px 10px rgba(0,0,0,.5); }
.wheel-res { font-size: calc(4 * var(--u)); font-weight: 900; color: var(--c); min-height: 1.3em; }
.wheel-res.on { animation: popin .7s cubic-bezier(.2,1.6,.4,1); }

/* ───────── Duel final ───────── */
.duel-t { font-size: calc(9 * var(--u)); font-weight: 900; color: var(--c); text-shadow: 0 0 40px var(--b); animation: heartbeat 1s infinite; }
.duel-vs { display: flex; align-items: center; gap: calc(6 * var(--u)); }
.duel-vs .p { display: flex; flex-direction: column; align-items: center; gap: .4em; animation: slideL .8s cubic-bezier(.2,1.4,.4,1) both; }
.duel-vs .p:last-child { animation-name: slideR; }
.duel-vs .av { --s: calc(18 * var(--u)); }
.duel-vs .x { font-size: calc(10 * var(--u)); animation: popin .6s .8s both, shake .4s 1.4s 3; }
@keyframes slideL { from { transform: translateX(-60vw); } } @keyframes slideR { from { transform: translateX(60vw); } }
.duel-s { font-size: calc(2.2 * var(--u)); color: var(--muted); font-weight: 800; }
.duel-tag { background: #ff4d6d !important; }