:root{--bg: #0a0a0f;--surface: #13131a;--surface2: #1c1c28;--border: #2a2a3a;--text: #f0f0f8;--muted: #8888aa;--accent: #6366f1;--accent2: #818cf8;--green: #22c55e;--yellow: #eab308;--red: #ef4444;--blue: #3b82f6;--purple: #a855f7;--orange: #f97316;--radius: 16px;--radius-sm: 8px}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%;width:100%;overflow-x:hidden}body{background:var(--bg);color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:16px;line-height:1.5}h1{font-size:2rem;font-weight:800;letter-spacing:-.03em}h2{font-size:1.4rem;font-weight:700;letter-spacing:-.02em}h3{font-size:1.1rem;font-weight:600}.full-page{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 20px;text-align:center}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 24px;border-radius:var(--radius-sm);border:none;cursor:pointer;font-size:16px;font-weight:600;transition:filter .15s,transform .1s;-webkit-user-select:none;user-select:none}.btn:active{transform:scale(.96)}.btn-primary{background:var(--accent);color:#fff;width:100%}.btn-primary:hover{filter:brightness(1.1)}.btn-outline{background:transparent;border:2px solid var(--border);color:var(--text)}.btn-outline:hover{border-color:var(--accent);color:var(--accent)}.btn-ghost{background:transparent;color:var(--muted);border:none}.btn-ghost:hover{color:var(--text)}.input{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;color:var(--text);font-size:16px;outline:none;transition:border-color .2s}.input:focus{border-color:var(--accent)}.input::placeholder{color:var(--muted)}.bar-track{width:100%;background:var(--surface2);border-radius:4px;height:12px;overflow:hidden}.bar-fill{height:100%;border-radius:4px;background:var(--accent);transition:width .7s cubic-bezier(.4,0,.2,1)}.bar-fill.correct{background:var(--green)}.timer-ring{width:64px;height:64px}.timer-ring circle{fill:none;stroke-width:4}.timer-ring .track{stroke:var(--border)}.timer-ring .progress{stroke:var(--accent);stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset 1s linear}@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse-glow{0%,to{box-shadow:0 0 #6366f166}50%{box-shadow:0 0 0 16px #6366f100}}@keyframes winner-entrance{0%{opacity:0;transform:scale(.5) rotate(-10deg)}60%{opacity:1;transform:scale(1.08) rotate(2deg)}to{transform:scale(1) rotate(0)}}@keyframes confetti-fall{to{transform:translateY(110vh) rotate(720deg);opacity:0}}.fade-up{animation:fadeUp .4s ease forwards}.pulse-glow{animation:pulse-glow 2s ease-in-out infinite}.toast{position:fixed;bottom:32px;left:50%;transform:translate(-50%) translateY(80px);background:var(--surface2);border:1px solid var(--border);border-radius:40px;padding:12px 24px;font-size:14px;font-weight:500;z-index:9999;transition:transform .3s ease,opacity .3s ease;opacity:0;white-space:nowrap;pointer-events:none}.toast.show{transform:translate(-50%) translateY(0);opacity:1}.toast.success{border-color:var(--green);color:var(--green)}.toast.error{border-color:var(--red);color:var(--red)}.option-btn{width:100%;padding:16px;border-radius:var(--radius-sm);border:2px solid var(--border);background:var(--surface2);color:var(--text);text-align:left;font-size:15px;cursor:pointer;transition:border-color .15s,background .15s}.option-btn:hover{border-color:var(--accent);background:#6366f114}.option-btn.selected{border-color:var(--accent);background:#6366f126}.option-btn.correct{border-color:var(--green);background:#22c55e1f}.option-btn.wrong{border-color:var(--red);background:#ef444414}.leaderboard-entry{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--radius-sm);background:var(--surface2);border:1px solid var(--border)}.leaderboard-entry.gold{border-color:#f59e0b;background:#f59e0b14}.leaderboard-entry.silver{border-color:#94a3b8;background:#94a3b80f}.leaderboard-entry.bronze{border-color:#b45309;background:#b453090f}.rank-badge{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;background:var(--border);flex-shrink:0}.winner-card{animation:winner-entrance .6s cubic-bezier(.34,1.56,.64,1) forwards;background:linear-gradient(135deg,var(--surface),var(--surface2));border:2px solid var(--orange);border-radius:20px;padding:32px;text-align:center}.winner-emoji{font-size:64px;display:block;margin-bottom:12px}