/* ============================================================
   BlindTest — design system (adapté du template Quiz Battle)
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root{
  --bg0:#0c0a1c; --bg1:#171236; --bg2:#1f1947;
  --line: rgba(255,255,255,.10); --line2: rgba(255,255,255,.18);
  --txt:#f1f1fb; --txt-dim:#b3aed0; --txt-faint:#7a749c;
  --cyan:#22d3ee; --purple:#b06cff; --crimson:#fb5a6a; --green:#34e07f;
  --pink:#ec4899;
  --gold:#fbbf24; --silver:#cbd5e1; --bronze:#d98c50;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
html,body{min-height:100%;}
body{font-family:var(--sans);background:var(--bg0);color:var(--txt);
  -webkit-font-smoothing:antialiased;letter-spacing:.2px;overflow-x:hidden;}
button{font-family:inherit;color:inherit;cursor:pointer;border:none;background:none;}
input,select{font-family:inherit;}
a{color:var(--cyan);}
::selection{background:var(--cyan);color:#021014;}

/* ---------- ambient background (colourful, not flat dark) ---------- */
.stage{position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(85% 60% at 12% -5%, rgba(176,108,255,.34), transparent 55%),
    radial-gradient(80% 55% at 90% 4%, rgba(34,211,238,.30), transparent 55%),
    radial-gradient(110% 80% at 50% 115%, rgba(236,72,153,.24), transparent 55%),
    linear-gradient(160deg, #1b1545 0%, #0c0a1c 68%);}
.bg-orbs{position:fixed;inset:0;overflow:hidden;z-index:-1;pointer-events:none;filter:blur(58px);}
.orb{position:absolute;border-radius:50%;opacity:.55;mix-blend-mode:screen;will-change:transform;}
.orb.a{width:48vw;height:48vw;background:var(--cyan);top:-8vw;left:-8vw;animation:drift1 22s ease-in-out infinite, opulse 9s ease-in-out infinite;}
.orb.b{width:44vw;height:44vw;background:var(--purple);bottom:-12vw;right:-10vw;animation:drift2 26s ease-in-out infinite, opulse 11s ease-in-out infinite;}
.orb.c{width:34vw;height:34vw;background:var(--pink);top:32vh;left:46vw;opacity:.4;animation:drift3 30s ease-in-out infinite, opulse 13s ease-in-out infinite;}
@keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(8vw,10vh)}}
@keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-10vw,-6vh)}}
@keyframes drift3{0%,100%{transform:translate(0,0)}33%{transform:translate(-8vw,6vh)}66%{transform:translate(6vw,-8vh)}}
@keyframes opulse{0%,100%{opacity:.45}50%{opacity:.68}}
.vignette{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(120% 120% at 50% 50%, transparent 62%, rgba(0,0,0,.32));}

/* ---------- screens ---------- */
.screen{display:none;min-height:100vh;min-height:100dvh;align-items:center;justify-content:center;padding:24px 18px;flex-direction:column;}
.screen.active{display:flex;animation:screenIn .4s ease;}
@keyframes screenIn{from{opacity:0;transform:scale(.99) translateY(8px)}to{opacity:1;transform:none}}

/* ---------- primitives ---------- */
.eyebrow{font:600 11px/1 var(--mono);letter-spacing:3px;text-transform:uppercase;color:var(--txt-faint);}
.panel{background:linear-gradient(165deg, rgba(48,38,92,.55), rgba(22,18,46,.66));border:1px solid rgba(176,108,255,.16);border-radius:20px;padding:22px;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.07);backdrop-filter:blur(10px);}
.section-label{font:600 11px var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--txt-faint);margin:14px 0 10px;}
.section-label:first-child{margin-top:0;}
.btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:15px;border-radius:13px;font-weight:650;font-size:15px;letter-spacing:.3px;
  background:linear-gradient(120deg,var(--cyan),#0891b2);color:#021014;box-shadow:0 10px 30px -10px rgba(6,182,212,.7);transition:transform .12s, filter .2s, opacity .2s;}
.btn:hover{filter:brightness(1.08);} .btn:active{transform:scale(.98);}
.btn:disabled{opacity:.4;pointer-events:none;}
.btn.purple{background:linear-gradient(120deg,var(--purple),#7c3aed);color:#fff;box-shadow:0 10px 30px -10px rgba(168,85,247,.7);}
.btn.green{background:linear-gradient(120deg,var(--green),#16a34a);color:#04140a;box-shadow:0 10px 30px -10px rgba(34,197,94,.6);}
.btn.crim{background:linear-gradient(120deg,var(--crimson),#dc2626);color:#fff;box-shadow:0 10px 30px -10px rgba(239,68,68,.6);}
.btn.ghost{background:rgba(255,255,255,.05);color:var(--txt);border:1px solid var(--line2);box-shadow:none;}
.btn.sm{padding:9px 14px;width:auto;font-size:13px;border-radius:10px;}

.field{position:relative;margin-bottom:14px;}
.field input, .field select{width:100%;padding:15px 16px;border-radius:13px;background:rgba(255,255,255,.06);border:1px solid var(--line2);color:var(--txt);font-size:15px;outline:none;transition:border-color .25s, box-shadow .25s;}
.field input:focus, .field select:focus{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(6,182,212,.14), 0 0 24px -8px rgba(6,182,212,.7);}
.field input::placeholder{color:var(--txt-faint);}
.field select option{background:var(--bg2);}
.field.error input{border-color:var(--crimson);animation:shake .4s cubic-bezier(.36,.07,.19,.97);}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-8px)}40%,60%{transform:translateX(8px)}}

.float-field{position:relative;margin-top:8px;}
.float-field input{width:100%;padding:22px 16px 12px;border-radius:15px;background:rgba(255,255,255,.06);border:1px solid var(--line2);color:var(--txt);font-size:16px;outline:none;transition:.25s;}
.float-field input:focus{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(6,182,212,.14), 0 0 30px -8px rgba(6,182,212,.7);}
.float-field label{position:absolute;left:16px;top:18px;color:var(--txt-faint);font-size:15px;pointer-events:none;transition:.22s cubic-bezier(.4,0,.2,1);}
.float-field input:focus + label, .float-field input.filled + label{top:8px;font-size:10.5px;color:var(--cyan);letter-spacing:1px;text-transform:uppercase;}

.error-msg{color:var(--crimson);font-weight:600;font-size:13.5px;min-height:20px;margin-top:10px;}
.muted{color:var(--txt-dim);} .faint{color:var(--txt-faint);}
.hidden{display:none !important;}

.room-chip{font:600 13px var(--mono);padding:7px 14px;border-radius:20px;color:var(--cyan);background:rgba(6,182,212,.1);border:1px solid rgba(6,182,212,.3);letter-spacing:2px;}
.av{display:inline-grid;place-items:center;border-radius:10px;font-weight:700;color:#02050a;flex-shrink:0;}

/* ---------- login card ---------- */
.login-card{position:relative;width:380px;max-width:94vw;padding:38px 32px;border-radius:22px;
  background:linear-gradient(160deg, rgba(52,40,100,.62), rgba(20,16,44,.74));border:1px solid rgba(176,108,255,.22);backdrop-filter:blur(14px);
  box-shadow:0 30px 80px -26px rgba(124,58,237,.4), inset 0 1px 0 rgba(255,255,255,.08);animation:cardPop .35s cubic-bezier(.34,1.56,.64,1);}
@keyframes cardPop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
.brand-mark{display:flex;align-items:center;gap:11px;margin-bottom:22px;}
.brand-mark .glyph{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:20px;
  background:linear-gradient(135deg,var(--cyan),var(--purple));color:#021014;font-weight:800;box-shadow:0 8px 22px -8px var(--cyan);}
.brand-mark .nm{font-size:18px;font-weight:800;letter-spacing:-.3px;}
.brand-mark .nm span{color:var(--cyan);}
.login-card h1{font-size:21px;font-weight:700;letter-spacing:-.3px;}
.login-card p.sub{color:var(--txt-dim);font-size:13.5px;margin-top:5px;margin-bottom:22px;}
.hint-pill{margin-top:16px;font:500 11.5px var(--mono);color:var(--txt-faint);text-align:center;}
.hint-pill a{color:var(--cyan);text-decoration:none;}

/* ---------- lobby (host) ---------- */
.lobby{width:min(1180px,96vw);display:grid;grid-template-columns:1.3fr 360px;gap:22px;align-items:start;}
.lobby-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:10px;flex-wrap:wrap;}
.lobby-head h2{font-size:21px;font-weight:700;letter-spacing:-.3px;}
.mode-switch{display:flex;gap:8px;padding:6px;border-radius:16px;background:rgba(0,0,0,.35);border:1px solid var(--line);position:relative;}
.mode-opt{flex:1;padding:13px;border-radius:11px;text-align:center;position:relative;z-index:2;transition:color .25s;color:var(--txt-dim);}
.mode-opt.on{color:#021014;font-weight:700;}
.mode-opt .t{font-size:14px;font-weight:650;display:block;} .mode-opt .d{font-size:11px;opacity:.75;margin-top:3px;}
.mode-glider{position:absolute;top:6px;left:6px;width:calc(50% - 7px);height:calc(100% - 12px);border-radius:11px;background:linear-gradient(120deg,var(--crimson),#dc2626);z-index:1;transition:transform .35s cubic-bezier(.34,1.56,.64,1), background .3s;}
.mode-switch.speed .mode-glider{transform:translateX(calc(100% + 8px));background:linear-gradient(120deg,var(--purple),#7c3aed);}
.settings{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.setting{padding:14px;border-radius:14px;background:rgba(255,255,255,.025);border:1px solid var(--line);}
.setting .lab{font-size:11px;color:var(--txt-faint);text-transform:uppercase;letter-spacing:1px;margin-bottom:9px;display:flex;align-items:center;gap:7px;}
.stepper{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.stepper button{width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.06);border:1px solid var(--line2);font-size:17px;font-weight:700;color:var(--txt);transition:.15s;}
.stepper button:hover{background:rgba(6,182,212,.18);border-color:var(--cyan);}
.stepper .v{font:700 16px var(--mono);color:var(--cyan);min-width:54px;text-align:center;}
.seg{display:flex;gap:6px;}
.seg button{flex:1;padding:9px 6px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--line);font-size:12px;font-weight:600;color:var(--txt-dim);transition:.15s;}
.seg button.on{background:rgba(6,182,212,.16);border-color:var(--cyan);color:var(--cyan);}
.start-btn{margin-top:18px;width:100%;padding:19px;border-radius:16px;font-size:17px;font-weight:750;letter-spacing:.4px;background:linear-gradient(120deg,var(--purple),var(--cyan));color:#fff;position:relative;overflow:hidden;box-shadow:0 16px 40px -14px rgba(168,85,247,.8);transition:transform .12s, opacity .2s;}
.start-btn:active{transform:scale(.985);} .start-btn:disabled{opacity:.35;pointer-events:none;}
.start-btn::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(255,255,255,.3),transparent);transform:translateX(-120%);animation:sheen 3.5s ease-in-out infinite;}
@keyframes sheen{0%,60%{transform:translateX(-120%)}100%{transform:translateX(120%)}}

.roster{display:flex;flex-direction:column;gap:9px;max-height:260px;overflow-y:auto;padding-right:4px;}
.roster::-webkit-scrollbar{width:5px} .roster::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}
.pbadge{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--line);animation:badgeIn .5s cubic-bezier(.34,1.56,.64,1);}
@keyframes badgeIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
.pbadge .pav{width:34px;height:34px;font-size:14px;}
.pbadge .pn{font-size:14px;font-weight:600;} .pbadge .pt{margin-left:auto;font:600 10px var(--mono);color:var(--green);}
.roster-count{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--txt-dim);margin-bottom:12px;}
.roster-count .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:livedot 1.6s infinite;}
@keyframes livedot{50%{opacity:.4}}
.qr-wrap{margin-top:16px;text-align:center;}
.qr-box{display:inline-block;border-radius:18px;background:#fff;padding:12px;animation:aperture .7s cubic-bezier(.34,1.56,.64,1);}
.qr-box svg{display:block;width:160px;height:160px;}
@keyframes aperture{from{opacity:0;transform:scale(.2) rotate(-25deg);filter:blur(8px)}to{opacity:1;transform:scale(1) rotate(0);filter:blur(0)}}
.qr-cap{margin-top:11px;font-size:12px;color:var(--txt-dim);word-break:break-all;} .qr-cap b{color:var(--txt);font-family:var(--mono);}

/* ---------- host live ---------- */
.host{width:min(1240px,96vw);}
.host-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:10px;flex-wrap:wrap;}
.host-head h2{font-size:20px;font-weight:750;letter-spacing:-.3px;margin-top:4px;}
.host-q{font:700 14px var(--mono);color:var(--cyan);background:rgba(6,182,212,.1);border:1px solid rgba(6,182,212,.3);padding:9px 14px;border-radius:12px;white-space:nowrap;}
.host-grid{display:grid;grid-template-columns:380px 1fr;gap:20px;align-items:start;}
.track-title{font-size:22px;font-weight:800;letter-spacing:-.4px;margin-top:2px;word-break:break-word;}
.track-sub{color:var(--txt-dim);font-size:14px;margin-top:5px;}
.audio-ctrl{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap;}
.audio-ctrl button{padding:11px 16px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid var(--line2);font-weight:650;font-size:13px;transition:.15s;display:flex;align-items:center;gap:7px;}
.audio-ctrl button:hover{border-color:var(--cyan);background:rgba(6,182,212,.12);}
.host-action{min-height:300px;display:flex;flex-direction:column;}
.await{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding:28px;}
.await .mic{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;font-size:36px;background:radial-gradient(circle,rgba(6,182,212,.28),transparent 70%);animation:breathe 2.4s ease-in-out infinite;}
@keyframes breathe{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(6,182,212,.45)}50%{transform:scale(1.06);box-shadow:0 0 0 22px rgba(6,182,212,0)}}
.await h3{font-size:18px;font-weight:700;} .await p{color:var(--txt-dim);font-size:14px;}
.buzzed-banner{display:flex;align-items:center;gap:16px;padding:20px;border-radius:18px;background:linear-gradient(120deg,rgba(6,182,212,.18),rgba(168,85,247,.12));border:1px solid rgba(6,182,212,.4);
  animation:bannerIn .4s cubic-bezier(.34,1.56,.64,1);box-shadow:0 0 40px -10px rgba(6,182,212,.5);}
@keyframes bannerIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
.buzzed-banner .av{width:60px;height:60px;border-radius:16px;font-size:24px;}
.buzzed-banner .who{font-size:23px;font-weight:800;} .buzzed-banner .lbl{font:600 11px var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--cyan);}
.judge-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px;}
.judge-row .btn{padding:18px;font-size:16px;}
.points-row{display:flex;align-items:center;gap:8px;margin-top:14px;}
.points-row .pt-opt{padding:9px 16px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--line);font:700 14px var(--mono);color:var(--txt-dim);transition:.15s;}
.points-row .pt-opt.on{background:rgba(34,197,94,.16);border-color:var(--green);color:var(--green);}
.host-foot{margin-top:auto;display:flex;gap:12px;padding-top:16px;}
.sub-progress{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.sub-progress .n{font:800 22px var(--mono);color:var(--cyan);}
.sub-bar{height:8px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden;margin:6px 0 16px;}
.sub-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--purple));border-radius:6px;transition:width .4s;}
.sub-results{display:flex;flex-direction:column;gap:8px;max-height:300px;overflow-y:auto;padding-right:4px;}
.sub-results::-webkit-scrollbar{width:5px} .sub-results::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}
.sub-res-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--line);flex-wrap:wrap;}
.sub-res-row .mk{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-weight:800;flex-shrink:0;}
.sub-res-row.ok .mk{background:rgba(34,197,94,.18);color:var(--green);}
.sub-res-row.mid .mk{background:rgba(251,191,36,.16);color:var(--gold);}
.sub-res-row.no .mk{background:rgba(239,68,68,.18);color:var(--crimson);}
.sub-res-row .nm{font-weight:600;font-size:14px;}
.sub-res-row .ans{font-size:12px;color:var(--txt-dim);flex:1;min-width:120px;}
.sub-res-row .pt{font:700 13px var(--mono);color:var(--green);}
.adjust{display:flex;gap:5px;margin-left:auto;}
.adjust button{padding:6px 9px;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid var(--line2);font:700 11px var(--mono);color:var(--txt-dim);transition:.15s;}
.adjust button:hover{border-color:var(--cyan);color:var(--cyan);}
.reveal-answer{padding:16px;border-radius:14px;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.3);margin-bottom:14px;}
.reveal-answer .t{font-size:18px;font-weight:800;} .reveal-answer .a{font-size:13px;color:var(--txt-dim);margin-top:3px;}
.host-scores{margin-top:18px;display:flex;gap:10px;overflow-x:auto;padding:14px;}
.hscore{flex:0 0 auto;display:flex;align-items:center;gap:9px;padding:9px 14px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--line);}
.hscore .av{width:28px;height:28px;border-radius:8px;font-size:12px;}
.hscore .nm{font-size:13px;font-weight:600;white-space:nowrap;} .hscore .sc{font:700 13px var(--mono);color:var(--cyan);}

/* host's own answer form (speed) */
.host-play{margin-top:4px;}
.host-play .field input{padding:12px 14px;font-size:14px;}

/* ---------- player ---------- */
.player-shell{width:min(440px,100%);display:flex;flex-direction:column;min-height:calc(100dvh - 48px);}
.join-room-chip{display:inline-flex;align-self:center;align-items:center;gap:8px;padding:7px 14px;border-radius:20px;background:rgba(6,182,212,.1);border:1px solid rgba(6,182,212,.3);font:600 12px var(--mono);color:var(--cyan);}
.join-hello{margin-top:auto;}
.join-hello h1{font-size:30px;font-weight:800;letter-spacing:-.6px;line-height:1.1;}
.join-hello h1 span{background:linear-gradient(120deg,var(--cyan),var(--purple));-webkit-background-clip:text;background-clip:text;color:transparent;}
.join-hello p{color:var(--txt-dim);font-size:14px;margin-top:10px;line-height:1.5;}
.join-actions{margin-top:auto;padding-top:24px;}
.lobby-pulse{width:110px;height:110px;border-radius:50%;display:grid;place-items:center;margin:0 auto 26px;background:radial-gradient(circle,rgba(6,182,212,.3),transparent 70%);}
.lobby-pulse .core{width:64px;height:64px;border-radius:50%;background:linear-gradient(120deg,var(--cyan),var(--purple));display:grid;place-items:center;font-size:28px;animation:breathe2 2.4s ease-in-out infinite;}
@keyframes breathe2{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(6,182,212,.5)}50%{transform:scale(1.08);box-shadow:0 0 0 22px rgba(6,182,212,0)}}
.lobby-dots{display:flex;gap:6px;margin-top:22px;justify-content:center;}
.lobby-dots i{width:8px;height:8px;border-radius:50%;background:var(--cyan);animation:wave 1.4s ease-in-out infinite;}
.lobby-dots i:nth-child(2){animation-delay:.2s} .lobby-dots i:nth-child(3){animation-delay:.4s}
@keyframes wave{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-7px)}}

.hud-top{display:flex;align-items:center;justify-content:space-between;font-size:12px;gap:10px;}
.hud-top .me{display:flex;align-items:center;gap:8px;font-weight:650;}
.hud-top .me .av{width:26px;height:26px;border-radius:8px;font-size:12px;}
.hud-top .scr{font:700 13px var(--mono);color:var(--cyan);}
.round-chip{font:600 11px var(--mono);color:var(--txt-faint);}
.audio-chip{margin-top:10px;text-align:center;font-size:12px;color:var(--txt-faint);min-height:18px;}
.game-video{width:100%;max-height:42vh;margin-top:8px;border-radius:14px;background:#000;border:1px solid var(--line);object-fit:contain;}
/* the round question / instruction (both modes, all roles) */
.round-question{margin-top:10px;text-align:center;}
.round-question .rq-text{font-size:19px;font-weight:800;line-height:1.25;
  background:linear-gradient(110deg,var(--cyan),var(--purple) 60%,var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent;}
.round-question.spectator .rq-text{font-size:clamp(24px,5vw,40px);font-weight:850;letter-spacing:-.5px;
  background:linear-gradient(120deg,var(--cyan),var(--purple));-webkit-background-clip:text;background-clip:text;color:transparent;}
.round-question .rq-options{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:10px;}
.round-question .rq-opt{padding:6px 12px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid var(--line);font-size:13px;font-weight:600;}
.round-question.spectator .rq-opt{font-size:15px;padding:8px 16px;}

.buzzer-zone{flex:1;display:flex;align-items:center;justify-content:center;position:relative;min-height:300px;}
.buzzer{width:min(230px,62vw);aspect-ratio:1;border-radius:50%;position:relative;overflow:hidden;background:radial-gradient(circle at 35% 30%, #f87171, var(--crimson) 55%, #b91c1c);border:3px solid rgba(255,255,255,.18);color:#fff;font-weight:850;font-size:30px;letter-spacing:1px;display:grid;place-items:center;text-shadow:0 2px 10px rgba(0,0,0,.4);box-shadow:0 24px 60px -16px rgba(239,68,68,.7), inset 0 3px 10px rgba(255,255,255,.3);animation:buzzBreathe 2.6s ease-in-out infinite;transition:transform .12s, filter .3s;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
@keyframes buzzBreathe{0%,100%{box-shadow:0 24px 60px -16px rgba(239,68,68,.55), 0 0 0 0 rgba(239,68,68,.4), inset 0 3px 10px rgba(255,255,255,.3)}50%{box-shadow:0 24px 70px -14px rgba(239,68,68,.85), 0 0 0 26px rgba(239,68,68,0), inset 0 3px 10px rgba(255,255,255,.3)}}
.buzzer:active{transform:scale(.96);}
.buzzer.locked{animation:none;background:radial-gradient(circle,#3a3a44,#1c1c22);border-color:rgba(255,255,255,.06);transform:scale(.82);filter:saturate(.2);box-shadow:0 6px 20px rgba(0,0,0,.5);color:var(--txt-faint);pointer-events:none;}
.buzzer .lock-num{position:absolute;font:800 30px var(--mono);color:#fff;}
/* cooldown ring drawn around the buzzer while locked */
.cooldown-ring{position:absolute;width:min(264px,72vw);aspect-ratio:1;pointer-events:none;display:none;transform:rotate(-90deg);}
.cooldown-ring.show{display:block;}
.cooldown-ring circle{fill:none;stroke-width:6;}
.cooldown-ring .bg{stroke:rgba(255,255,255,.08);}
.cooldown-ring .fg{stroke:var(--crimson);stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(239,68,68,.7));transition:stroke-dashoffset .25s linear;}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);transform:translate(-50%,-50%) scale(0);pointer-events:none;animation:ripple .6s ease-out forwards;width:40px;height:40px;}
@keyframes ripple{to{transform:translate(-50%,-50%) scale(9);opacity:0}}
.hud-status{text-align:center;font-size:14px;color:var(--txt-dim);min-height:22px;margin-top:8px;font-weight:600;}
.hud-status b{color:var(--cyan);} .hud-status b.bad{color:var(--crimson);}
.hud-hint{text-align:center;font-size:12px;color:var(--txt-faint);margin-top:4px;}

/* speed HUD */
.countdown-wrap{position:relative;height:6px;border-radius:4px;background:rgba(255,255,255,.07);margin:14px 0 4px;overflow:hidden;}
.countdown-bar{position:absolute;inset:0;background:linear-gradient(90deg,var(--cyan),#22d3ee);border-radius:4px;box-shadow:0 0 16px var(--cyan);transform-origin:left;}
.countdown-bar.urgent{background:linear-gradient(90deg,var(--crimson),#f87171);box-shadow:0 0 18px var(--crimson);}
.cd-num{text-align:right;font:800 13px var(--mono);color:var(--cyan);min-height:18px;}
.cd-num.urgent{color:var(--crimson);animation:vibrate .12s linear infinite;}
@keyframes vibrate{25%{transform:translateY(-1px)}75%{transform:translateY(1px)}}
.speed-head{margin-top:14px;text-align:center;}
.speed-head .q{font-size:13px;color:var(--txt-dim);font-weight:600;}
.speed-head h2{font-size:20px;font-weight:750;margin-top:4px;}
.speed-form{margin-top:18px;display:flex;flex-direction:column;gap:4px;}
.qcm{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;}
.qcm-btn{padding:22px 14px;border-radius:18px;background:linear-gradient(160deg,rgba(176,108,255,.12),rgba(34,211,238,.06));border:1px solid var(--line2);font-size:15px;font-weight:650;text-align:left;position:relative;transition:transform .1s, border-color .2s, background .2s;display:flex;align-items:center;gap:11px;color:var(--txt);}
.qcm-btn .key{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font:700 13px var(--mono);background:rgba(255,255,255,.06);flex-shrink:0;}
.qcm-btn:active{transform:scale(.97);}
.qcm-btn.picked{border-color:var(--cyan);background:rgba(6,182,212,.14);box-shadow:0 0 24px -8px rgba(6,182,212,.7);}
.qcm-btn.picked .key{background:var(--cyan);color:#021014;}
.speed-submit{margin-top:16px;}

/* fullscreen player states — FULLY OPAQUE (solid base + colored glow on top) */
.ph-state{position:fixed;inset:0;z-index:40;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px 24px;
  background:var(--bg0);overflow-y:auto;}
.ph-state::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.9;background:radial-gradient(120% 90% at 50% 30%, var(--glow,transparent), transparent 70%);}
.ph-state.show{display:flex;animation:stateIn .3s cubic-bezier(.34,1.56,.64,1);}
@keyframes stateIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
.ph-state .ic{width:112px;height:112px;border-radius:50%;display:grid;place-items:center;font-size:52px;margin-bottom:22px;}
.ph-state h2{font-size:32px;font-weight:900;letter-spacing:-1px;line-height:1.05;}
.ph-state p{font-size:15px;margin-top:12px;color:var(--txt-dim);max-width:360px;line-height:1.5;}
.ph-state .pts{font:800 20px var(--mono);margin-top:18px;padding:11px 22px;border-radius:30px;background:rgba(255,255,255,.08);}
.ph-state .wait-host{margin-top:24px;font:600 12px var(--mono);letter-spacing:1px;color:var(--txt-faint);text-transform:uppercase;}
.ph-state .ans-card{margin-top:14px;padding:18px 24px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid var(--line2);}
.ph-state .ans-card .t{font-size:21px;font-weight:800;} .ph-state .ans-card .a{font-size:14px;color:var(--txt-dim);margin-top:4px;}

.ph-state.buzzed{--glow:rgba(6,182,212,.5);}
.ph-state.buzzed .ic{background:linear-gradient(135deg,var(--cyan),var(--purple));box-shadow:0 0 70px -6px var(--cyan);animation:pulseGlow 1s ease-in-out infinite;}
@keyframes pulseGlow{50%{transform:scale(1.08);box-shadow:0 0 100px 4px var(--cyan)}}
.ph-state.buzzed h2{background:linear-gradient(120deg,var(--cyan),var(--purple));-webkit-background-clip:text;background-clip:text;color:transparent;}
.ph-state.correct{--glow:rgba(34,197,94,.5);}
.ph-state.correct .ic{background:var(--green);color:#04140a;box-shadow:0 0 70px -6px var(--green);}
.ph-state.correct h2{color:var(--green);} .ph-state.correct .pts{background:rgba(34,197,94,.22);color:var(--green);}
.ph-state.wrong{--glow:rgba(239,68,68,.42);}
.ph-state.wrong .ic{background:var(--crimson);color:#fff;box-shadow:0 0 70px -6px var(--crimson);}
.ph-state.wrong h2{color:#fca5a5;}
.ph-state.reveal{--glow:rgba(168,85,247,.4);}
.ph-state.reveal .ic{font-size:44px;background:linear-gradient(135deg,var(--purple),var(--cyan));box-shadow:0 0 60px -8px var(--purple);}
.ph-state.sent{--glow:rgba(168,85,247,.3);}
.ph-state.sent .ic{background:rgba(255,255,255,.07);border:1px solid var(--line2);font-size:44px;}

.crimson-flash{position:fixed;inset:0;background:var(--crimson);opacity:0;z-index:38;pointer-events:none;}
.crimson-flash.go{animation:crimFlash .4s ease;}
@keyframes crimFlash{0%{opacity:.7}100%{opacity:0}}

/* sound unlock — discreet pill, never blocks the game */
.sound-unlock{position:fixed;left:0;right:0;bottom:84px;z-index:47;display:none;justify-content:center;pointer-events:none;}
.sound-unlock.show{display:flex;}
.sound-unlock button{pointer-events:auto;padding:13px 22px;border-radius:30px;font-size:14px;font-weight:750;background:linear-gradient(120deg,var(--cyan),var(--purple));color:#fff;box-shadow:0 14px 40px -10px var(--cyan);animation:breathe2 2s ease-in-out infinite;}

/* verdict chips on the calm "sent" state */
.verdict-chips{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap;justify-content:center;}
.chip{padding:9px 15px;border-radius:22px;font-weight:700;font-size:13.5px;border:1px solid;}
.chip.ok{color:var(--green);border-color:rgba(34,197,94,.5);background:rgba(34,197,94,.12);}
.chip.mid{color:var(--gold);border-color:rgba(251,191,36,.5);background:rgba(251,191,36,.12);}
.chip.ko{color:#fca5a5;border-color:rgba(239,68,68,.5);background:rgba(239,68,68,.12);}
.chip.pts{color:var(--cyan);border-color:rgba(6,182,212,.5);background:rgba(6,182,212,.12);font-family:var(--mono);}

/* live ranking inside the reveal overlay (cumulative score + this round's gain) */
.lb-head{margin-top:18px;font:600 11px var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--txt-faint);}
.lb-reveal{margin-top:8px;width:min(400px,90vw);display:flex;flex-direction:column;gap:6px;max-height:38vh;overflow-y:auto;}
.lb-item{display:flex;align-items:center;gap:10px;padding:9px 13px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid var(--line);text-align:left;}
.lb-item.me{border-color:var(--cyan);background:rgba(6,182,212,.12);}
.lb-item .rk{width:24px;text-align:center;font:800 14px var(--mono);color:var(--txt-dim);flex-shrink:0;}
.lb-item .who{flex:1;min-width:0;display:flex;flex-direction:column;}
.lb-item .who b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lb-item .who .gv{font-size:11.5px;color:var(--txt-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lb-item .gain{font:700 12px var(--mono);color:var(--green);flex-shrink:0;min-width:32px;text-align:right;}
.lb-item .gain.z{color:var(--txt-faint);}
.lb-item .tot{font:800 15px var(--mono);color:var(--cyan);flex-shrink:0;min-width:42px;text-align:right;}

/* big buzz takeover — FULLY OPAQUE, visible by EVERYONE (players + spectators) */
.buzz-takeover{position:fixed;inset:0;z-index:41;display:none;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:30px;
  background:var(--bg0);}
.buzz-takeover::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.9;background:radial-gradient(110% 80% at 50% 38%, rgba(6,182,212,.45), transparent 68%);}
.buzz-takeover.show{display:flex;animation:takeoverIn .3s ease, camShake .5s cubic-bezier(.36,.07,.19,.97);}
@keyframes takeoverIn{from{opacity:0}to{opacity:1}}
@keyframes camShake{10%,90%{transform:translate(-3px,2px)}20%,80%{transform:translate(5px,-4px)}30%,50%,70%{transform:translate(-9px,5px)}40%,60%{transform:translate(9px,-5px)}}
.buzz-takeover .pav{width:100px;height:100px;border-radius:28px;font-size:42px;margin-bottom:18px;box-shadow:0 0 70px -8px rgba(6,182,212,.8);animation:whoPop .4s cubic-bezier(.34,1.56,.64,1);}
.buzz-takeover .lbl{font:700 13px var(--mono);letter-spacing:5px;text-transform:uppercase;color:var(--cyan);margin-bottom:10px;}
.buzz-takeover .who{font-size:clamp(46px,13vw,92px);font-weight:900;letter-spacing:-2px;line-height:1;
  background:linear-gradient(120deg,var(--cyan),var(--purple));-webkit-background-clip:text;background-clip:text;color:transparent;animation:whoPop .4s cubic-bezier(.34,1.56,.64,1);}
@keyframes whoPop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.buzz-takeover .sub{color:var(--txt-dim);font-size:15px;margin-top:14px;}

/* in-game moderator bar */
.modo-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:45;display:flex;align-items:center;gap:8px;padding:10px;border-radius:18px;
  background:rgba(14,14,18,.92);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(14px);box-shadow:0 20px 50px -16px rgba(0,0,0,.85);max-width:96vw;flex-wrap:wrap;justify-content:center;}
.modo-bar .mlbl{font:700 10px var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--gold);padding:0 6px;}
.modo-bar .mkey{font-size:12px;color:var(--txt-dim);padding:0 6px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.modo-bar button{padding:11px 15px;border-radius:12px;font-weight:750;font-size:13.5px;}
.modo-bar .m-ok{background:linear-gradient(120deg,var(--green),#16a34a);color:#04140a;}
.modo-bar .m-ko{background:linear-gradient(120deg,var(--crimson),#dc2626);color:#fff;}
.modo-bar .m-next{background:linear-gradient(120deg,var(--cyan),#0891b2);color:#021014;}
.modo-bar .m-skip{background:rgba(255,255,255,.07);border:1px solid var(--line2);color:var(--txt);}

/* host roster action buttons */
.badge-actions{margin-left:auto;display:flex;gap:5px;flex-shrink:0;}
.role-btn.modo-on{color:var(--gold);border-color:rgba(251,191,36,.5);background:rgba(251,191,36,.1);}

/* ---------- toast ---------- */

/* ---------- podium ---------- */
.podium-screen{width:min(1000px,94vw);display:flex;flex-direction:column;align-items:center;}
.confetti-canvas{position:fixed;inset:0;z-index:50;pointer-events:none;}
.podium-title{text-align:center;margin-bottom:26px;}
.podium-title .eyebrow{margin-bottom:10px;}
.podium-title h1{font-size:clamp(30px,6vw,46px);font-weight:900;letter-spacing:-1px;background:linear-gradient(120deg,var(--gold),#fff 50%,var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent;}
.podium-row{display:flex;align-items:flex-end;justify-content:center;gap:14px;height:300px;margin-bottom:22px;width:100%;}
.pod{display:flex;flex-direction:column;align-items:center;width:min(170px,30vw);}
.pod .crown{font-size:28px;margin-bottom:6px;opacity:0;transform:translateY(10px) scale(.6);}
.pod.revealed .crown{animation:crownPop .5s cubic-bezier(.34,1.56,.64,1) forwards;}
@keyframes crownPop{to{opacity:1;transform:translateY(0) scale(1)}}
.pod .pav{width:56px;height:56px;border-radius:16px;font-size:22px;margin-bottom:10px;box-shadow:0 12px 30px -10px rgba(0,0,0,.7);opacity:0;}
.pod.revealed .pav{animation:fadeUp .5s ease .15s forwards;}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.pod .pname{font-size:16px;font-weight:700;opacity:0;text-align:center;} .pod.revealed .pname{animation:fadeUp .5s ease .2s forwards;}
.pod .pscore{font:800 14px var(--mono);color:var(--cyan);margin:4px 0 12px;opacity:0;} .pod.revealed .pscore{animation:fadeUp .5s ease .25s forwards;}
.pod .bar{width:100%;border-radius:16px 16px 0 0;position:relative;height:0;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.02));border:1px solid var(--line);border-bottom:none;display:flex;align-items:flex-start;justify-content:center;padding-top:14px;overflow:hidden;}
.pod.revealed .bar{animation:rise .7s cubic-bezier(.22,1,.36,1) forwards;}
.pod .bar .place{font:900 36px var(--mono);opacity:.25;}
.pod.p1 .bar{background:linear-gradient(180deg,rgba(251,191,36,.35),rgba(251,191,36,.05));border-color:rgba(251,191,36,.4);--h:240px;}
.pod.p2 .bar{--h:180px;border-color:rgba(203,213,225,.3);}
.pod.p3 .bar{--h:135px;border-color:rgba(217,140,80,.3);}
@keyframes rise{to{height:var(--h)}}
.podium-list{width:100%;max-width:560px;display:flex;flex-direction:column;gap:8px;max-height:200px;overflow-y:auto;padding-right:6px;}
.pl-row{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:12px;background:rgba(255,255,255,.025);border:1px solid var(--line);}
.pl-row.me{border-color:var(--cyan);background:rgba(6,182,212,.08);}
.pl-row .rk{font:800 14px var(--mono);color:var(--txt-faint);width:28px;}
.pl-row .av{width:30px;height:30px;border-radius:8px;font-size:12px;}
.pl-row .nm{flex:1;font-weight:600;font-size:14px;} .pl-row .sc{font:700 14px var(--mono);color:var(--cyan);}

/* ---------- custom audio player ---------- */
.audio-player{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:rgba(0,0,0,.35);border:1px solid var(--line);}
.ap-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:16px;flex-shrink:0;
  background:linear-gradient(135deg,var(--cyan),var(--purple));color:#fff;box-shadow:0 8px 22px -8px var(--cyan);transition:transform .12s, filter .2s;}
.ap-btn:hover{filter:brightness(1.1);} .ap-btn:active{transform:scale(.93);}
.ap-btn.sm{width:34px;height:34px;font-size:13px;background:rgba(255,255,255,.07);border:1px solid var(--line2);box-shadow:none;}
.ap-btn.sm:hover{border-color:var(--cyan);}
.ap-track{flex:1;height:8px;border-radius:6px;background:rgba(255,255,255,.08);position:relative;cursor:pointer;overflow:hidden;}
.ap-track::after{content:"";position:absolute;inset:-8px 0;} /* bigger hit zone */
.ap-fill{position:absolute;top:0;left:0;bottom:0;width:0%;border-radius:6px;background:linear-gradient(90deg,var(--cyan),var(--purple));box-shadow:0 0 14px var(--cyan);transition:width .25s linear;}
.ap-time{font:700 12px var(--mono);color:var(--txt-dim);min-width:74px;text-align:right;}

/* equalizer (player screen, while music plays) */
.eq{display:inline-flex;align-items:flex-end;gap:3px;height:14px;margin-right:7px;vertical-align:-2px;}
.eq i{width:3px;border-radius:2px;background:linear-gradient(180deg,var(--purple),var(--cyan));height:100%;transform:scaleY(.2);transform-origin:bottom;}
.eq.playing i{animation:eqb 1s ease-in-out infinite;}
.eq.playing i:nth-child(1){animation-delay:0s} .eq.playing i:nth-child(2){animation-delay:.25s}
.eq.playing i:nth-child(3){animation-delay:.5s} .eq.playing i:nth-child(4){animation-delay:.12s}
@keyframes eqb{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}

/* role toggle in the host roster */
.pbadge .role-btn{margin-left:auto;padding:6px 10px;border-radius:9px;background:rgba(255,255,255,.05);border:1px solid var(--line2);font-size:12px;color:var(--txt-dim);transition:.15s;}
.pbadge .role-btn:hover{border-color:var(--cyan);color:var(--cyan);}
.pbadge.spec{opacity:.65;} .pbadge.spec .pt{color:var(--txt-faint);}

/* grant / revoke buttons on the host reveal */
.adjust button.grant{color:var(--green);border-color:rgba(34,197,94,.4);}
.adjust button.grant:hover{background:rgba(34,197,94,.15);color:var(--green);border-color:var(--green);}
.adjust button.revoke{color:#fca5a5;border-color:rgba(239,68,68,.4);}
.adjust button.revoke:hover{background:rgba(239,68,68,.15);color:#fca5a5;border-color:var(--crimson);}

/* per-device volume control */
.vol-widget{position:relative;flex-shrink:0;}
.vol-btn{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid var(--line2);font-size:16px;display:grid;place-items:center;transition:.15s;}
.vol-btn:hover{border-color:var(--cyan);}
.vol-pop{position:absolute;top:calc(100% + 8px);right:0;z-index:48;display:none;padding:12px 14px;border-radius:14px;
  background:rgba(14,14,18,.97);border:1px solid var(--line2);box-shadow:0 16px 44px -14px rgba(0,0,0,.85);}
.vol-pop.open{display:block;animation:toastIn .18s ease;}
.vol-pop input[type=range]{width:130px;accent-color:var(--cyan);vertical-align:middle;cursor:pointer;}
/* host: always-visible inline slider (clearer than a popover on desktop) */
.vol-widget.vol-inline{display:flex;align-items:center;gap:8px;}
.vol-inline-slider{width:120px;accent-color:var(--cyan);vertical-align:middle;cursor:pointer;}

/* ---------- toast ---------- */
.toast-wrap{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:70;display:flex;flex-direction:column;gap:8px;align-items:center;}
.toast{padding:11px 18px;border-radius:12px;background:rgba(20,20,26,.95);border:1px solid var(--line2);font-size:13.5px;font-weight:600;box-shadow:0 14px 40px -12px rgba(0,0,0,.8);animation:toastIn .3s ease;max-width:90vw;}
.toast.err{border-color:rgba(239,68,68,.5);color:#fca5a5;}
.toast.ok{border-color:rgba(34,197,94,.5);color:#86efac;}
@keyframes toastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .lobby{grid-template-columns:1fr;}
  .host-grid{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .screen{padding:16px 12px;}
  .settings{grid-template-columns:1fr;}
  .judge-row{grid-template-columns:1fr;}
  .qcm{grid-template-columns:1fr;}
}

/* Phones: push the colour up so it doesn't feel flat-dark on small screens. */
@media (max-width:720px){
  .stage{background:
    radial-gradient(95% 55% at 8% -6%, rgba(176,108,255,.5), transparent 56%),
    radial-gradient(95% 52% at 95% 2%, rgba(34,211,238,.46), transparent 56%),
    radial-gradient(120% 75% at 50% 116%, rgba(236,72,153,.4), transparent 56%),
    linear-gradient(165deg, #251a63 0%, #0f0b26 72%);}
  .bg-orbs{filter:blur(46px);}
  .orb{opacity:.66;}
  .orb.c{opacity:.5;}
  .vignette{background:radial-gradient(120% 120% at 50% 50%, transparent 66%, rgba(0,0,0,.26));}
  .panel{background:linear-gradient(165deg, rgba(58,46,108,.62), rgba(26,20,52,.7));border-color:rgba(176,108,255,.22);}
}

/* final ranking: on phones the bar-podium becomes clean medal rows */
@media (max-width:720px){
  .podium-row{flex-direction:column;align-items:stretch;height:auto;gap:10px;margin-bottom:18px;}
  .pod{width:100%;flex-direction:row;align-items:center;gap:13px;padding:14px 16px;border-radius:16px;
    background:rgba(255,255,255,.04);border:1px solid var(--line);}
  .pod.p1{order:1;border-color:rgba(251,191,36,.45);background:rgba(251,191,36,.08);}
  .pod.p2{order:2;border-color:rgba(203,213,225,.25);} .pod.p3{order:3;border-color:rgba(217,140,80,.3);}
  .pod .bar{display:none;}
  .pod .crown,.pod .pav,.pod .pname,.pod .pscore{opacity:1 !important;animation:none !important;margin:0;transform:none;}
  .pod .crown{font-size:26px;} .pod .pav{width:44px;height:44px;font-size:18px;}
  .pod .pname{flex:1;text-align:left;font-size:17px;} .pod .pscore{font-size:15px;}
  .podium-list{max-height:none;}
}