body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}:root{--bg:#0b1220;--card:#111827;--muted:#94a3b8;--text:#e5e7eb;--accent:#3b82f6;--accent-2:#22c55e;--danger:#ef4444;--ring: rgba(59,130,246,.35);--radius:14px;--shadow:0 8px 24px rgba(0,0,0,.25)}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:radial-gradient(1200px 800px at 70% -10%,#1f2937,#0b1220 55%);color:var(--text);font:16px/1.45 system-ui,Segoe UI,Roboto,Arial}.container{max-width:780px;margin:2rem auto;padding:1rem}.card{background:linear-gradient(180deg,#0f172a,#0b1220);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}h1,h2{margin:0 0 10px}.muted{color:var(--muted)}.progress{height:10px;border-radius:999px;background:#182033;overflow:hidden;margin:8px 0 16px;outline:1px solid rgba(255,255,255,.06)}.progress>span{display:block;height:100%;background:linear-gradient(90deg,#4f46e5,#3b82f6)}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;border-radius:12px;padding:.7rem 1rem;background:linear-gradient(180deg,#2563eb,#1d4ed8);color:#fff;font-weight:600;cursor:pointer;box-shadow:0 4px 14px #2563eb4d}.btn:hover{filter:brightness(1.05)}.btn:disabled{opacity:.6;cursor:not-allowed}.btn.ghost{background:#111827;border:1px solid rgba(255,255,255,.1)}.btn.success{background:linear-gradient(180deg,#22c55e,#16a34a)}.btn.danger{background:linear-gradient(180deg,#ef4444,#dc2626)}.input{width:100%;padding:.65rem .8rem;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#0b1220;color:var(--text);outline:none}.input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--ring)}.grid{display:grid;grid-template-columns:32px 1.2fr 100px 90px 100px;gap:10px;align-items:center}.row{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06)}.row:last-child{border-bottom:none}.badge{display:inline-block;padding:.15rem .5rem;border-radius:999px;font-size:12px;background:#0b1329;border:1px solid rgba(255,255,255,.06);color:#9db2ff}.option{display:block;width:100%;text-align:left;margin:.5rem 0;padding:.8rem 1rem;border-radius:12px;background:#0b1220;border:1px solid rgba(255,255,255,.12);color:var(--text)}.option.correct{border:2px solid var(--accent-2);background:#22c55e1a}.option.wrong{border:2px solid var(--danger);background:#ef444414}.liveStats{display:grid;gap:8px;padding:12px;border-radius:var(--radius,14px);background:#ffffff0d}.liveStats__top{display:flex;align-items:center;justify-content:space-between;gap:12px}.liveStats__progressBar{position:relative;height:10px;background:#182033;border-radius:999px;overflow:hidden;outline:1px solid rgba(255,255,255,.06)}.liveStats__progressFill{height:100%;background:linear-gradient(90deg,#4f46e5,#3b82f6)}.liveStats__progressText{font-size:12px;color:var(--muted,rgba(255,255,255,.7));margin-top:6px}.liveStats__timer{font-variant-numeric:tabular-nums;font-weight:700}.liveStats__pills{display:flex;flex-wrap:wrap;gap:8px}.pill{padding:6px 10px;border-radius:999px;background:#ffffff14;font-size:12px;display:inline-flex;align-items:center;gap:4px}.pill--correct{background:#22c55e2e}.pill--missed{background:#ef44442e}.option.correct{animation:optionPulseCorrect .3s ease-out 1}.option.wrong{animation:optionPulseWrong .3s ease-out 1}.option.correct{border-color:#22c55e99!important}.option.wrong{border-color:#ef444499!important}.confetti__piece{position:absolute;width:8px;height:8px;opacity:.9;animation:confettiFall 1.2s ease-out forwards}@keyframes confettiFall{0%{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(120px) rotate(720deg);opacity:0}}.liveStats__progressFill{transform-origin:left center;will-change:transform,filter}@keyframes liveStatsBarTick{0%{transform:scaleX(1);filter:brightness(1)}45%{transform:scaleX(1.02);filter:brightness(1.25)}to{transform:scaleX(1);filter:brightness(1)}}.liveStats--sticky{position:sticky;top:0;z-index:40;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:linear-gradient(180deg,#0a101ee6,#0a101ea6);margin-bottom:10px;border:1px solid rgba(255,255,255,.06)}.liveStats__right{display:flex;align-items:center;gap:10px}.countdown{font-variant-numeric:tabular-nums;padding:2px 8px;border-radius:999px;background:#ffffff12}.countdown--warn{background:#ef444433}.liveStats__progressBar{position:relative;height:10px;border-radius:999px;overflow:hidden;outline:1px solid rgba(255,255,255,.06)}.liveStats__progressFill{height:100%;background:linear-gradient(90deg,#4f46e5,#3b82f6);transform-origin:left center;will-change:transform,filter}@keyframes liveStatsBarTick{0%{transform:scaleX(1);filter:brightness(1)}45%{transform:scaleX(1.04);filter:brightness(1.25)}to{transform:scaleX(1);filter:brightness(1)}}.liveStats__progressFill--tick{animation:liveStatsBarTick .35s ease-out 1}@keyframes pillPulse{0%{transform:scale(1);box-shadow:0 0 #22c55e4d}50%{transform:scale(1.1);box-shadow:0 0 6px 4px #22c55e33}to{transform:scale(1);box-shadow:0 0 #22c55e00}}.pill--pulse{animation:pillPulse .5s ease}.pill--category{background:#3b82f62e}.confetti{position:fixed;top:0;left:0;width:100%;height:0;pointer-events:none;z-index:9999}.confetti__piece{position:absolute;width:8px;height:8px;opacity:.95;animation:confettiFall 1.2s ease-out forwards}@keyframes confettiFall{0%{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(var(--fall, 120px)) rotate(720deg);opacity:0}}.option{position:relative;transition:transform .06s ease,background-color .2s ease,border-color .2s ease,opacity .2s ease}.option.dim{opacity:.65;filter:saturate(.85)}.option__icon{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:18px;opacity:.95;pointer-events:none}@keyframes optionPulseCorrect{0%{box-shadow:0 0 #22c55e00}30%{box-shadow:0 0 0 4px #22c55e40}to{box-shadow:0 0 #22c55e00}}@keyframes optionPulseWrong{0%{box-shadow:0 0 #ef444400}30%{box-shadow:0 0 0 4px #ef444440}to{box-shadow:0 0 #ef444400}}.option.correct{animation:optionPulseCorrect .3s ease-out 1;border-color:#22c55e99!important}.option.wrong{animation:optionPulseWrong .3s ease-out 1;border-color:#ef444499!important}.anspill{display:inline-block;padding:2px 8px;border-radius:999px;background:#22c55e2e;color:#eaffea;font-weight:700}.linklike{background:none;border:none;padding:0;font:inherit;color:#93c5fd;cursor:pointer}.linklike:hover{text-decoration:underline}.controlsRow{display:flex;align-items:center;gap:10px;margin-bottom:10px}.switch{position:relative;display:inline-block;width:44px;height:24px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#334155;transition:.2s;border-radius:999px}.slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background:#fff;transition:.2s;border-radius:50%}.switch input:checked+.slider{background:#22c55e}.switch input:checked+.slider:before{transform:translate(20px)}.celebrate{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:clamp(28px,5vw,56px);font-weight:800;color:#fff;z-index:50;pointer-events:none;text-shadow:0 6px 24px rgba(0,0,0,.45);animation:celebratePop .9s ease-out 1}@keyframes celebratePop{0%{transform:scale(.8);opacity:0}40%{transform:scale(1.04);opacity:1}to{transform:scale(1);opacity:1}}.finishTop .badge.success{background:#22c55e33;border:1px solid rgba(34,197,94,.5)}.modalOverlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;display:grid;place-items:center;z-index:50}.modalCard{background:#0f172a;border:1px solid #243045;border-radius:12px;padding:14px;width:min(560px,92vw);box-shadow:0 10px 30px #0006}.leaderboard .grid.header,.leaderboard .grid.row{display:grid;grid-template-columns:60px 1fr 80px 110px;gap:10px;align-items:center}.leaderboard .grid.header{padding:6px 0 8px;margin-bottom:6px;font-weight:700;color:var(--muted);border-bottom:1px solid rgba(255,255,255,.06)}.leaderboard .grid.row{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06)}.leaderboard .grid.row:last-child{border-bottom:none}.leaderboard .lb-col-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width: 700px){.leaderboard .grid.header>:first-child,.leaderboard .grid.row>:first-child{display:none}.leaderboard .grid.header,.leaderboard .grid.row{grid-template-columns:1fr 100px 86px!important}}