@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700;800&display=swap";:root{--bg-primary:#0a0a1a;--bg-secondary:#0f0f2e;--bg-card:#ffffff0d;--bg-card-hover:#ffffff14;--border:#ffffff1a;--border-hover:#fff3;--text-primary:#fff;--text-secondary:#ffffffb3;--text-muted:#fff6;--accent-purple:#7c3aed;--accent-violet:#8b5cf6;--accent-pink:#ec4899;--accent-cyan:#06b6d4;--accent-green:#10b981;--accent-red:#ef4444;--accent-amber:#f59e0b;--option-a:#ef4444;--option-b:#3b82f6;--option-c:#10b981;--option-d:#f59e0b;--shadow-glow:0 0 40px #7c3aed4d;--transition:all .3s cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%}body{background:var(--bg-primary);color:var(--text-primary);font-family:Inter,sans-serif;overflow-x:hidden}body:before{content:"";pointer-events:none;z-index:0;background:radial-gradient(at 20% 20%,#7c3aed1f 0%,#0000 60%),radial-gradient(at 80% 80%,#06b6d414 0%,#0000 60%),radial-gradient(#ec48990d 0%,#0000 70%);position:fixed;inset:0}#root{z-index:1;position:relative}.glass-card{background:var(--bg-card);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border);transition:var(--transition);border-radius:20px}.glass-card:hover{background:var(--bg-card-hover);border-color:var(--border-hover)}.btn-primary{background:linear-gradient(135deg, var(--accent-purple), var(--accent-violet));color:#fff;cursor:pointer;transition:var(--transition);border:none;border-radius:14px;align-items:center;gap:8px;padding:14px 32px;font-family:Inter,sans-serif;font-size:1rem;font-weight:600;display:inline-flex;position:relative;overflow:hidden;box-shadow:0 4px 20px #7c3aed66}.btn-primary:before{content:"";background:linear-gradient(90deg,#0000,#ffffff1a,#0000);width:100%;height:100%;transition:left .5s;position:absolute;top:0;left:-100%}.btn-primary:hover:before{left:100%}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 30px #7c3aed80}.btn-primary:active{transform:translateY(0)}.btn-secondary{color:var(--text-secondary);border:1px solid var(--border);cursor:pointer;transition:var(--transition);background:0 0;border-radius:14px;align-items:center;gap:8px;padding:14px 32px;font-family:Inter,sans-serif;font-size:1rem;font-weight:600;display:inline-flex}.btn-secondary:hover{background:var(--bg-card);border-color:var(--border-hover);color:var(--text-primary);transform:translateY(-2px)}.btn-success{color:#fff;cursor:pointer;transition:var(--transition);background:linear-gradient(135deg,#059669,#10b981);border:none;border-radius:14px;align-items:center;gap:8px;padding:14px 32px;font-family:Inter,sans-serif;font-size:1rem;font-weight:600;display:inline-flex;box-shadow:0 4px 20px #10b98166}.btn-success:hover{transform:translateY(-2px);box-shadow:0 8px 30px #10b98180}.input-field{border:1px solid var(--border);color:var(--text-primary);width:100%;transition:var(--transition);background:#ffffff0f;border-radius:12px;outline:none;padding:14px 18px;font-family:Inter,sans-serif;font-size:1rem}.input-field::placeholder{color:var(--text-muted)}.input-field:focus{border-color:var(--accent-violet);background:#ffffff14;box-shadow:0 0 0 3px #8b5cf633}.option-btn{cursor:pointer;width:100%;transition:var(--transition);color:#fff;border:none;border-radius:16px;align-items:center;gap:16px;padding:20px 24px;font-family:Inter,sans-serif;font-size:1.1rem;font-weight:700;display:flex;position:relative;overflow:hidden;box-shadow:0 4px 20px #0000004d}.option-btn:before{content:"";background:linear-gradient(90deg,#0000,#ffffff26,#0000);width:100%;height:100%;transition:left .4s;position:absolute;top:0;left:-100%}.option-btn:hover:before{left:100%}.option-btn:hover{filter:brightness(1.1);transform:translateY(-3px)scale(1.01)}.option-btn:active{transform:scale(.98)}.option-btn:disabled{cursor:not-allowed;opacity:.7;transform:none}.option-btn.option-a{background:linear-gradient(135deg,#dc2626,#ef4444)}.option-btn.option-b{background:linear-gradient(135deg,#2563eb,#3b82f6)}.option-btn.option-c{background:linear-gradient(135deg,#059669,#10b981)}.option-btn.option-d{background:linear-gradient(135deg,#d97706,#f59e0b)}.option-btn.correct{animation:.5s pulse-green;box-shadow:0 0 0 4px #10b981,0 8px 30px #10b98180}.option-btn.wrong{opacity:.4}.option-label{background:#00000040;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:.9rem;font-weight:800;display:flex}.timer-ring{justify-content:center;align-items:center;display:inline-flex;position:relative}.timer-ring svg{transform:rotate(-90deg)}.timer-ring .timer-text{color:#fff;font-family:Space Grotesk,sans-serif;font-size:1.8rem;font-weight:800;position:absolute}.progress-bar{background:#ffffff1a;border-radius:100px;height:6px;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--accent-purple), var(--accent-cyan));border-radius:100px;height:100%;transition:width 1s linear}.score-badge{background:linear-gradient(135deg, var(--accent-purple), var(--accent-pink));border-radius:100px;align-items:center;gap:6px;padding:6px 16px;font-size:.85rem;font-weight:700;display:inline-flex}.leaderboard-item{transition:var(--transition);background:#ffffff0a;border:1px solid #ffffff0f;border-radius:14px;align-items:center;gap:16px;padding:14px 20px;display:flex}.leaderboard-item:hover{background:#ffffff12}.leaderboard-item.rank-1{background:linear-gradient(135deg,#fbbf2426,#f59e0b0d);border-color:#fbbf244d}.leaderboard-item.rank-2{background:linear-gradient(135deg,#9ca3af26,#6b72800d);border-color:#9ca3af4d}.leaderboard-item.rank-3{background:linear-gradient(135deg,#b4784626,#9261380d);border-color:#b478464d}.rank-badge{border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:.95rem;font-weight:800;display:flex}.player-chip{background:#8b5cf626;border:1px solid #8b5cf64d;border-radius:100px;align-items:center;gap:8px;padding:8px 14px;font-size:.85rem;font-weight:500;animation:.3s slide-in;display:inline-flex}.feedback-correct{background:linear-gradient(135deg,#0596694d,#10b9811a);border:2px solid #10b98180}.feedback-wrong{background:linear-gradient(135deg,#dc26264d,#ef44441a);border:2px solid #ef444480}@keyframes slide-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse-green{0%{box-shadow:0 0 #10b981b3}70%{box-shadow:0 0 0 16px #10b98100}to{box-shadow:0 0 0 4px #10b981}}@keyframes bounce-in{0%{opacity:0;transform:scale(.5)}60%{transform:scale(1.1)}to{opacity:1;transform:scale(1)}}@keyframes float-up{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-60px)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes glow-pulse{0%,to{box-shadow:0 0 20px #7c3aed4d}50%{box-shadow:0 0 40px #7c3aed99}}@keyframes count-down{0%{stroke-dashoffset:0}to{stroke-dashoffset:339px}}.animate-bounce-in{animation:.5s cubic-bezier(.175,.885,.32,1.275) bounce-in}.animate-slide-in{animation:.4s slide-in}.animate-glow{animation:2s ease-in-out infinite glow-pulse}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:100px}@media (width<=768px){.option-btn{padding:16px 18px;font-size:.95rem}.option-btn .option-label{width:30px;height:30px}}