*{box-sizing:border-box}body{--accent: #5b8cff;--accent-2: #7aa4ff;--correct: #3aa05a;--wrong: #d04545;--surface: #1a1f2e;--surface-2: #0d1320;--border: #2a2f3a;--text: #e6e8ec;--text-mute: #a0a4b0;--bg-base: #0a0e1a;--bg-blob-1: rgba(91, 140, 255, .32);--bg-blob-2: rgba(180, 90, 255, .22);--bg-blob-3: rgba(58, 160, 200, .22);--glow: 0 0 18px rgba(91, 140, 255, .6);--glow-correct: 0 0 24px rgba(58, 160, 90, .75);--glow-wrong: 0 0 20px rgba(208, 69, 69, .6)}body[data-theme=neon]{--accent: #00ffd1;--accent-2: #ff4dd2;--correct: #54ff86;--wrong: #ff3b6b;--surface: #0f0823;--surface-2: #07021a;--border: rgba(0, 255, 209, .3);--bg-base: #07021a;--bg-blob-1: rgba(0, 255, 209, .35);--bg-blob-2: rgba(255, 77, 210, .35);--bg-blob-3: rgba(120, 50, 255, .3);--glow: 0 0 22px rgba(0, 255, 209, .8), 0 0 50px rgba(0, 255, 209, .4);--glow-correct: 0 0 28px rgba(84, 255, 134, .9);--glow-wrong: 0 0 24px rgba(255, 59, 107, .7)}body[data-theme=classic]{--accent: #d4a843;--accent-2: #e8c270;--correct: #4caf50;--wrong: #b53a3a;--surface: #1f1a14;--surface-2: #14110b;--border: rgba(212, 168, 67, .35);--bg-base: #14110b;--bg-blob-1: rgba(212, 168, 67, .28);--bg-blob-2: rgba(160, 80, 30, .22);--bg-blob-3: rgba(100, 60, 20, .22);--glow: 0 0 18px rgba(212, 168, 67, .6);--glow-correct: 0 0 24px rgba(76, 175, 80, .75);--glow-wrong: 0 0 20px rgba(181, 58, 58, .6)}body,html,#root{margin:0;padding:0;min-height:100vh;font-family:system-ui,-apple-system,sans-serif;background:var(--bg-base);color:var(--text)}.app{min-height:100vh;padding:1.5rem 1.25rem;max-width:480px;margin:0 auto;display:flex;flex-direction:column;position:relative}.app.center{align-items:center;justify-content:center;text-align:center;gap:1rem}.hero{margin-top:3rem;margin-bottom:3rem;text-align:center}.hero h1{font-size:3.5rem;margin:0 0 .5rem;letter-spacing:-.03em;color:var(--accent);text-shadow:var(--glow)}.hero p{margin:0;color:var(--text-mute)}.join-form{display:flex;flex-direction:column;gap:1rem}.join-form input{padding:1rem 1.25rem;background:var(--surface);border:2px solid var(--border);color:#fff;font-size:1.5rem;font-weight:600;border-radius:12px;text-align:center;letter-spacing:.1em}.join-form input:focus{outline:none;border-color:var(--accent);box-shadow:var(--glow)}.join-form button,.primary{padding:1rem 1.25rem;background:var(--accent);color:#fff;border:none;border-radius:12px;font-size:1.125rem;font-weight:600;cursor:pointer;box-shadow:var(--glow);transition:transform .15s,box-shadow .2s,opacity .2s}.join-form button:hover:not(:disabled){transform:translateY(-1px)}.join-form button:active:not(:disabled){transform:translateY(1px)}.join-form button:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}.game-header{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;margin-bottom:1.5rem;color:var(--text-mute);font-size:.95rem}.game-header strong{color:var(--text)}.question{font-size:1.5rem;font-weight:600;margin:0 0 1.25rem;text-align:center}.question-image{display:block;width:100%;max-height:220px;object-fit:contain;border-radius:12px;margin:0 auto 1.5rem;background:var(--surface-2)}.question-video{display:block;width:100%;max-height:240px;border-radius:12px;margin:0 auto 1.5rem;background:#000}.question-audio{display:block;width:100%;margin:0 auto 1.5rem}@keyframes slide-in{0%{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.slide-anim{animation:slide-in .38s cubic-bezier(.16,1,.3,1) both}.answer-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:1rem}@keyframes answer-pop{0%{opacity:0;transform:translateY(16px) scale(.92)}60%{opacity:1;transform:translateY(-2px) scale(1.02)}to{opacity:1;transform:translateY(0) scale(1)}}.answer-btn{--i: 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1.5rem 1rem;color:#fff;border:none;border-radius:16px;cursor:pointer;font-size:1rem;text-align:center;min-height:100px;position:relative;overflow:hidden;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.25);box-shadow:0 4px #00000040,0 6px 14px #00000059;animation:answer-pop .46s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i) * 80ms + .12s);transition:transform .15s,opacity .25s,outline-offset .25s}.answer-btn:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px #00000040,0 3px 8px #00000059}.answer-btn:disabled{cursor:not-allowed}.answer-btn.dimmed{opacity:.35}.answer-btn.selected{outline:4px solid white;outline-offset:-4px}.answer-btn-a{background:#e21b3c}.answer-btn-b{background:#1368ce}.answer-btn-c{background:#d89e00}.answer-btn-d{background:#26890c}.answer-btn-e{background:#864cbf}.answer-btn-f{background:#f8814a}.answer-btn .letter{display:inline-block;width:36px;height:36px;line-height:36px;background:#fff3;border-radius:50%;font-weight:800;font-size:1.1rem}.answer-btn .text{font-size:.95rem}@keyframes answer-correct-zoom{0%{transform:scale(1)}40%{transform:scale(1.08)}to{transform:scale(1.05)}}@keyframes answer-correct-glow{0%,to{box-shadow:var(--glow-correct),0 4px #00000040}50%{box-shadow:var(--glow-correct),0 0 0 14px #fff0}}.answer-btn.correct-reveal{animation:answer-correct-zoom .5s cubic-bezier(.16,1,.3,1) both,answer-correct-glow 1.4s ease-in-out .5s infinite;z-index:2;outline:4px solid white;outline-offset:-4px}@keyframes answer-wrong-shake{0%,to{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-5px)}80%{transform:translate(5px)}}.answer-btn.wrong-shake{animation:answer-wrong-shake .42s ease-out both}.status{text-align:center;color:var(--text-mute);font-size:.95rem}.result{font-size:3.5rem;font-weight:700;text-align:center}.result.correct{color:var(--correct);text-shadow:var(--glow-correct)}.result.wrong{color:var(--wrong);text-shadow:var(--glow-wrong)}.points{font-size:2.5rem;font-weight:700;color:var(--accent);text-shadow:var(--glow)}.score-line{font-size:1.25rem;color:var(--text-mute)}.spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin:1rem auto}@keyframes spin{to{transform:rotate(360deg)}}.glow{color:var(--accent);text-shadow:var(--glow)}@keyframes sheet-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}.code-pill{display:inline-block;padding:.5rem 1.25rem;margin-top:.75rem;background:var(--surface);border:1px solid var(--border);border-radius:999px;letter-spacing:.2em;font-family:monospace;font-weight:700;color:var(--accent);text-shadow:var(--glow)}