:root{
  --bg:#070911;
  --panel:#111827;
  --panel2:#172033;
  --text:#f8fafc;
  --muted:#9ca3af;
  --brand:#39b6ff;
  --good:#27d17f;
  --bad:#ff4d6d;
  --warn:#ffd166;
  --line:rgba(255,255,255,.12);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:radial-gradient(circle at top left,#17345f 0,#070911 35%,#03050a 100%);color:var(--text)}
a{color:inherit}
button,input,select{font:inherit}
.wrap{width:min(1180px,94vw);margin:0 auto;padding:24px 0 48px}
.topbar{display:flex;gap:16px;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:.5px;text-transform:uppercase}
.logo-mark{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,var(--brand),#8b5cf6);display:grid;place-items:center;font-weight:1000;color:white;box-shadow:0 14px 34px rgba(57,182,255,.25)}
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:rgba(255,255,255,.06);border-radius:999px;padding:8px 12px;color:var(--muted);font-size:14px}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.card{grid-column:span 12;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04));border:1px solid var(--line);border-radius:24px;padding:18px;box-shadow:0 20px 60px rgba(0,0,0,.22);backdrop-filter:blur(8px)}
.card h1,.card h2,.card h3{margin:0 0 10px}
.card h1{font-size:clamp(30px,4vw,56px);line-height:1}
.card h2{font-size:24px}
.card h3{font-size:18px;color:#dbeafe}
.muted{color:var(--muted)}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.stack{display:grid;gap:12px}
.two{grid-column:span 6}.three{grid-column:span 4}.four{grid-column:span 3}.six{grid-column:span 6}.eight{grid-column:span 8}
input,select{width:100%;border:1px solid var(--line);background:rgba(0,0,0,.22);color:var(--text);border-radius:14px;padding:13px 14px;outline:none}
label{display:grid;gap:6px;font-weight:700;color:#dbeafe}
.btn{border:0;border-radius:16px;padding:13px 16px;font-weight:900;cursor:pointer;background:rgba(255,255,255,.10);color:white;border:1px solid var(--line);transition:.14s transform,.14s opacity,.14s background}
.btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.16)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.primary{background:linear-gradient(135deg,var(--brand),#4f46e5);border:0}
.good{background:linear-gradient(135deg,var(--good),#10b981);border:0;color:#03130b}
.bad{background:linear-gradient(135deg,var(--bad),#f97316);border:0;color:#190407}
.warn{background:linear-gradient(135deg,var(--warn),#f59e0b);border:0;color:#1a1000}
.ghost{background:transparent;border:1px solid var(--line)}
.danger{background:rgba(255,77,109,.16);border:1px solid rgba(255,77,109,.5);color:#fecdd3}
.scoreboard{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center}
.team{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:22px;padding:18px;min-height:150px;display:grid;align-content:center;gap:8px;text-align:center}
.team .name{font-size:clamp(24px,3vw,44px);font-weight:1000;line-height:1.05}
.team .score{font-size:clamp(56px,10vw,130px);font-weight:1000;line-height:.85;letter-spacing:-4px}
.vs{font-weight:1000;color:var(--muted);font-size:20px}
.status{font-size:clamp(24px,4vw,54px);font-weight:1000;line-height:1.05;text-align:center;padding:18px;border-radius:24px;background:rgba(57,182,255,.10);border:1px solid rgba(57,182,255,.25)}
.question{font-size:clamp(24px,3.8vw,46px);line-height:1.12;font-weight:900;background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:22px;padding:18px;white-space:pre-wrap}
.options{display:grid;gap:10px}
.option{padding:14px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid var(--line);font-weight:800}
.option b{color:var(--brand);margin-right:8px}
.kpi{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.kpi div{padding:10px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid var(--line);text-align:center}.kpi strong{display:block;font-size:20px}.kpi span{font-size:12px;color:var(--muted)}
.big-buzzer{width:min(78vw,430px);height:min(78vw,430px);border-radius:999px;border:10px solid rgba(255,255,255,.14);background:radial-gradient(circle at 35% 25%,#fff,#ff325b 18%,#b4002d 58%,#3b0013 100%);box-shadow:0 30px 80px rgba(255,77,109,.34), inset 0 -20px 35px rgba(0,0,0,.34);font-size:clamp(38px,9vw,82px);font-weight:1000;color:white;text-shadow:0 5px 10px rgba(0,0,0,.35);display:grid;place-items:center;margin:20px auto;touch-action:manipulation;user-select:none}
.big-buzzer.ready{animation:pulse 1s infinite}.big-buzzer.locked{filter:grayscale(.8);opacity:.55}.big-buzzer:active{transform:scale(.97)}
@keyframes pulse{0%,100%{box-shadow:0 25px 80px rgba(255,77,109,.26)}50%{box-shadow:0 25px 105px rgba(255,77,109,.58)}}
.answer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.answer-grid button{font-size:20px;min-height:72px}.open-answer{display:grid;gap:10px;grid-template-columns:1fr auto}
.alert{border-radius:18px;padding:14px 16px;background:rgba(255,255,255,.07);border:1px solid var(--line);color:#e5e7eb}.alert.goodish{border-color:rgba(39,209,127,.45);background:rgba(39,209,127,.12)}.alert.badish{border-color:rgba(255,77,109,.45);background:rgba(255,77,109,.12)}.alert.warnish{border-color:rgba(255,209,102,.45);background:rgba(255,209,102,.12)}
.table{width:100%;border-collapse:collapse}.table td,.table th{padding:10px;border-bottom:1px solid var(--line);text-align:left}.table th{color:#dbeafe}.hide{display:none!important}.center{text-align:center}.qrbox{background:white;color:#0f172a;border-radius:18px;padding:12px;display:inline-grid;gap:8px;text-align:center;font-weight:900}.qr{width:180px;height:180px;border-radius:10px}
.footer-note{font-size:12px;color:var(--muted);margin-top:16px}.small{font-size:13px}.tag{display:inline-flex;padding:6px 9px;border-radius:999px;background:rgba(57,182,255,.12);border:1px solid rgba(57,182,255,.24);color:#bfdbfe;font-weight:800;font-size:12px}
@media(max-width:820px){.two,.three,.four,.six,.eight{grid-column:span 12}.scoreboard{grid-template-columns:1fr}.vs{display:none}.answer-grid{grid-template-columns:1fr}.open-answer{grid-template-columns:1fr}.kpi{grid-template-columns:repeat(2,1fr)}.wrap{padding-top:14px}.card{border-radius:20px;padding:14px}.topbar{align-items:flex-start}.team .score{letter-spacing:-2px}}
.ambient{position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(circle at 18% 22%,rgba(57,182,255,.22),transparent 28%),radial-gradient(circle at 82% 12%,rgba(139,92,246,.22),transparent 25%),radial-gradient(circle at 50% 92%,rgba(39,209,127,.14),transparent 30%);animation:ambientShift 9s ease-in-out infinite alternate}
@keyframes ambientShift{from{filter:hue-rotate(0deg);transform:scale(1)}to{filter:hue-rotate(18deg);transform:scale(1.04)}}
.home-wrap,.screen-wrap{width:min(1320px,95vw)}
.hero-card{display:grid;grid-template-columns:1.3fr .7fr;gap:20px;align-items:center;min-height:420px;overflow:hidden;position:relative}
.hero-card:before{content:"";position:absolute;inset:-45%;background:conic-gradient(from 180deg,transparent,rgba(57,182,255,.18),transparent,rgba(255,209,102,.13),transparent);animation:spinGlow 10s linear infinite;z-index:-1}
@keyframes spinGlow{to{transform:rotate(360deg)}}
.hero-copy h1{font-size:clamp(48px,8vw,104px);line-height:.9;letter-spacing:-4px;margin:14px 0;text-transform:uppercase}
.hero-copy p{font-size:clamp(17px,2vw,24px);max-width:780px}.trophy-card{background:rgba(255,255,255,.08);border:1px solid var(--line);border-radius:28px;padding:24px;text-align:center;box-shadow:inset 0 0 60px rgba(255,209,102,.08)}.trophy{font-size:clamp(86px,12vw,150px);filter:drop-shadow(0 18px 20px rgba(255,209,102,.25));animation:trophyBounce 1.8s ease-in-out infinite}.trophy-card h2{font-size:clamp(28px,4vw,50px);text-transform:uppercase}.trophy-card p{font-size:18px}.feature-grid{margin-top:16px}.mini-feature{min-height:170px;position:relative;overflow:hidden}.mini-feature:after{content:"";position:absolute;right:-20px;bottom:-20px;width:90px;height:90px;border-radius:999px;background:rgba(57,182,255,.12)}@keyframes trophyBounce{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(2deg)}}
.audio-pill{cursor:pointer}.audio-pill.good{background:linear-gradient(135deg,var(--good),#39b6ff);color:#03130b;border:0;font-weight:1000}.open-flash{animation:openPulse .7s infinite alternate;background:rgba(39,209,127,.18)!important;border-color:rgba(39,209,127,.45)!important}.locked-flash{animation:lockedPop .35s ease-out;background:rgba(255,209,102,.2)!important;border-color:rgba(255,209,102,.55)!important}.wrong-flash{animation:wrongShake .45s ease-out;background:rgba(255,77,109,.18)!important;border-color:rgba(255,77,109,.48)!important}.champion{background:linear-gradient(135deg,rgba(255,209,102,.28),rgba(57,182,255,.2))!important;border-color:rgba(255,209,102,.65)!important;animation:championGlow 1.3s ease-in-out infinite alternate}
@keyframes openPulse{from{transform:scale(1);box-shadow:0 0 0 rgba(39,209,127,0)}to{transform:scale(1.015);box-shadow:0 0 44px rgba(39,209,127,.25)}}@keyframes lockedPop{from{transform:scale(.97)}to{transform:scale(1)}}@keyframes wrongShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}}@keyframes championGlow{from{box-shadow:0 0 20px rgba(255,209,102,.18)}to{box-shadow:0 0 70px rgba(255,209,102,.4)}}
.shimmer-in{animation:shimmerIn .25s ease-out both}.shimmer-in:nth-child(2){animation-delay:.05s}.shimmer-in:nth-child(3){animation-delay:.1s}@keyframes shimmerIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.join-hero{background:linear-gradient(135deg,rgba(57,182,255,.13),rgba(139,92,246,.10),rgba(255,255,255,.05))}.answer-panel{background:rgba(255,255,255,.05)!important}.answer-choice{animation:shimmerIn .25s ease-out both}.score{transition:transform .2s ease}.team:hover .score{transform:scale(1.03)}
@media(min-width:1180px){.screen-wrap .team{min-height:230px}.screen-wrap .status{font-size:clamp(42px,6vw,82px);padding:28px}.screen-wrap .qr{width:240px;height:240px}.screen-wrap .name{font-size:clamp(36px,4vw,62px)!important}.screen-wrap .score{font-size:clamp(110px,13vw,190px)!important}}
@media(max-width:820px){.hero-card{grid-template-columns:1fr;min-height:auto}.hero-copy h1{letter-spacing:-2px}.trophy-card{padding:16px}.row .btn{flex:1 1 100%;text-align:center}.pill{font-size:12px}.big-buzzer{width:min(82vw,330px);height:min(82vw,330px)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Big-screen live metrics */
.hype-card{position:relative;overflow:hidden;min-height:230px;background:linear-gradient(135deg,rgba(57,182,255,.12),rgba(139,92,246,.10),rgba(255,209,102,.08))!important}
.hype-card:before{content:"";position:absolute;inset:-70%;background:conic-gradient(from 90deg,transparent,rgba(57,182,255,.18),transparent,rgba(255,209,102,.18),transparent);animation:spinGlow 14s linear infinite;z-index:-1}
.hype-kicker{text-transform:uppercase;letter-spacing:.18em;color:#bfdbfe;font-weight:1000;font-size:12px;margin-bottom:8px}
.metric-headline{font-size:clamp(28px,4.5vw,68px);font-weight:1000;line-height:.98;letter-spacing:-2px;text-transform:uppercase;text-shadow:0 12px 30px rgba(0,0,0,.25)}
.metric-subline{font-size:clamp(15px,1.6vw,24px);color:#cbd5e1;margin-top:10px;max-width:1050px}
.metric-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:18px}
.metric-card{grid-column:span 2;border:1px solid var(--line);background:rgba(0,0,0,.18);border-radius:18px;padding:13px 14px;min-height:112px;display:grid;align-content:start;gap:4px;box-shadow:inset 0 0 40px rgba(255,255,255,.025)}
.metric-card .metric-title{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:#93c5fd;font-weight:1000}
.metric-card .metric-value{font-size:clamp(26px,3.2vw,48px);line-height:1;font-weight:1000;color:#fff}
.metric-card .metric-detail{font-size:14px;color:#cbd5e1;line-height:1.25}
.metric-card.speed{border-color:rgba(57,182,255,.5);background:rgba(57,182,255,.12)}
.metric-card.genius{border-color:rgba(39,209,127,.5);background:rgba(39,209,127,.12)}
.metric-card.danger{border-color:rgba(255,77,109,.55);background:rgba(255,77,109,.13);animation:wrongShake .9s ease-out infinite alternate}
.metric-card.tight{border-color:rgba(255,209,102,.48);background:rgba(255,209,102,.11)}
.hype-card.speed{box-shadow:0 0 80px rgba(57,182,255,.14)}.hype-card.genius{box-shadow:0 0 80px rgba(39,209,127,.14)}.hype-card.danger{box-shadow:0 0 80px rgba(255,77,109,.15)}.hype-card.tight{box-shadow:0 0 80px rgba(255,209,102,.12)}
@media(min-width:1180px){.screen-wrap .hype-card{min-height:285px}.screen-wrap .metric-grid{gap:14px}.screen-wrap .metric-card{min-height:130px;padding:16px}.screen-wrap .metric-card .metric-detail{font-size:16px}}
@media(max-width:820px){.metric-grid{grid-template-columns:1fr}.metric-card{grid-column:span 1}.metric-headline{letter-spacing:-1px}.hype-card{min-height:auto}}


/* Champion celebration layer */
.confetti-layer{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:40}
.confetti-piece{position:absolute;top:-20px;width:10px;height:18px;border-radius:3px;background:#39b6ff;opacity:.95;animation:confettiFall var(--fall,2.8s) linear forwards;transform:rotate(var(--rot,0deg))}
.confetti-piece:nth-child(5n){background:#ffd166}.confetti-piece:nth-child(5n+1){background:#27d17f}.confetti-piece:nth-child(5n+2){background:#ff4d6d}.confetti-piece:nth-child(5n+3){background:#a78bfa}.confetti-piece:nth-child(5n+4){background:#ffffff}
@keyframes confettiFall{0%{transform:translate3d(0,-10vh,0) rotate(0deg);opacity:1}85%{opacity:1}100%{transform:translate3d(var(--drift,0px),112vh,0) rotate(var(--spin,720deg));opacity:0}}
.champion-overlay{position:fixed;inset:auto 50% 7vh auto;transform:translateX(50%);z-index:45;width:min(1050px,92vw);border:1px solid rgba(255,209,102,.62);border-radius:34px;padding:28px;text-align:center;background:linear-gradient(135deg,rgba(7,11,22,.96),rgba(24,33,58,.94));box-shadow:0 28px 90px rgba(0,0,0,.5),0 0 80px rgba(255,209,102,.22);animation:championArrive .8s cubic-bezier(.2,1.15,.2,1) both}
.champion-overlay:before{content:"";position:absolute;inset:-2px;border-radius:34px;background:linear-gradient(90deg,#39b6ff,#ffd166,#27d17f,#ff4d6d,#39b6ff);z-index:-1;filter:blur(14px);opacity:.38;animation:spinGlow 8s linear infinite}
.champion-crown{font-size:clamp(42px,7vw,90px);filter:drop-shadow(0 12px 30px rgba(255,209,102,.45));animation:bounceCrown 1.1s ease-in-out infinite alternate}
.champion-title{font-size:clamp(18px,2.5vw,34px);font-weight:1000;color:#ffd166;text-transform:uppercase;letter-spacing:.14em}
.champion-name{font-size:clamp(40px,7vw,110px);font-weight:1000;line-height:.95;letter-spacing:-3px;text-transform:uppercase;margin:8px 0;text-shadow:0 10px 40px rgba(57,182,255,.28)}
.champion-sub{font-size:clamp(16px,2vw,28px);color:#dbeafe;font-weight:900}
@keyframes championArrive{from{opacity:0;transform:translateX(50%) translateY(60px) scale(.9)}to{opacity:1;transform:translateX(50%) translateY(0) scale(1)}}
@keyframes bounceCrown{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-10px) rotate(2deg)}}
@media(max-width:820px){.champion-overlay{bottom:3vh;padding:20px;border-radius:24px}.champion-name{letter-spacing:-1.5px}.confetti-piece{width:8px;height:14px}}


/* Big screen question reveal */
.screen-question-card{position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(57,182,255,.08),rgba(139,92,246,.075))!important}
.screen-question-card:after{content:"";position:absolute;right:-70px;top:-70px;width:190px;height:190px;border-radius:999px;background:rgba(57,182,255,.13);filter:blur(4px)}
.screen-question{position:relative;z-index:1;font-size:clamp(34px,5.2vw,86px);font-weight:1000;line-height:1.05;letter-spacing:-2px;text-align:center;white-space:pre-wrap;padding:18px 10px;text-shadow:0 10px 26px rgba(0,0,0,.32)}
.screen-question-card .tag{position:relative;z-index:2}
.track-chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 10px;background:rgba(255,255,255,.08);border:1px solid var(--line);font-size:12px;color:#dbeafe;font-weight:800}
@media(min-width:1180px){.screen-wrap .screen-question-card{min-height:245px}.screen-wrap .screen-question{font-size:clamp(54px,5.6vw,102px)}}
@media(max-width:820px){.screen-question{font-size:clamp(28px,8vw,50px);letter-spacing:-1px;padding:12px 4px}}