:root{--bg-primary: #09090f;--bg-surface: #13131e;--bg-surface2: #1a1a2e;--bg-card: #16162a;--accent: #9b5cff;--accent-light: #c084fc;--accent-glow: rgba(155, 92, 255, .3);--success: #22c55e;--danger: #ef4444;--warning: #eab308;--info: #3b82f6;--text: #e2e2e8;--text-secondary: #8888a0;--text-dim: #55556a;--border: rgba(155, 92, 255, .12);--border-bright: rgba(155, 92, 255, .3);--radius: 16px;--radius-sm: 10px;--radius-xs: 6px;--shadow: 0 8px 32px rgba(0, 0, 0, .4);--shadow-glow: 0 0 20px var(--accent-glow)}body{background:var(--bg-primary);color:var(--text)}a{color:var(--accent-light);text-decoration:none}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;transition:border-color .2s,transform .15s}.card:hover{border-color:var(--border-bright)}.card-glow{box-shadow:var(--shadow-glow);border-color:var(--accent)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:var(--radius-sm);border:none;font-family:Inter,sans-serif;font-weight:600;font-size:14px;cursor:pointer;transition:all .15s}.btn-primary{background:linear-gradient(135deg,var(--accent),#7c3aed);color:#fff;box-shadow:0 4px 16px #9b5cff4d}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px #9b5cff66}.btn-secondary{background:var(--bg-surface2);color:var(--text);border:1px solid var(--border)}.btn-secondary:hover{border-color:var(--accent)}.btn-danger{background:#ef444426;color:var(--danger);border:1px solid rgba(239,68,68,.2)}.btn-sm{padding:8px 16px;font-size:12px;border-radius:var(--radius-xs)}.btn-lg{padding:16px 32px;font-size:16px;border-radius:var(--radius)}.btn-icon{width:40px;height:40px;padding:0;border-radius:50%}.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:600}.badge-accent{background:#9b5cff26;color:var(--accent-light)}.badge-success{background:#22c55e26;color:var(--success)}.badge-danger{background:#ef444426;color:var(--danger)}.badge-warning{background:#eab30826;color:var(--warning)}.timer-ring{position:relative;display:inline-flex;align-items:center;justify-content:center}.timer-ring svg{transform:rotate(-90deg)}.timer-ring circle{fill:none;stroke-linecap:round;transition:stroke-dashoffset .3s}.timer-text{position:absolute;font-size:24px;font-weight:800;color:var(--text)}.progress-bar{height:8px;border-radius:4px;background:var(--bg-surface2);overflow:hidden}.progress-fill{height:100%;border-radius:4px;transition:width .5s ease;background:linear-gradient(90deg,var(--accent),var(--accent-light))}.input{width:100%;padding:12px 16px;border-radius:var(--radius-sm);background:var(--bg-surface);border:1px solid var(--border);color:var(--text);font-family:Inter,sans-serif;font-size:14px;outline:none;transition:border-color .2s}.input:focus{border-color:var(--accent)}.show-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;padding:20px}.show-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden}.show-card:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:var(--shadow-glow)}.show-card-icon{font-size:48px;margin-bottom:12px}.show-card-title{font-size:18px;font-weight:700;margin-bottom:6px}.show-card-desc{font-size:13px;color:var(--text-secondary);line-height:1.5}.show-card-meta{display:flex;gap:8px;margin-top:12px}.option-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.option-btn{padding:16px 20px;border-radius:var(--radius-sm);border:2px solid var(--border);background:var(--bg-surface2);color:var(--text);font-size:16px;font-weight:600;cursor:pointer;transition:all .15s;text-align:left;display:flex;align-items:center;gap:12px}.option-btn:hover{border-color:var(--accent);background:#9b5cff14}.option-btn.selected{border-color:var(--accent);background:#9b5cff26;box-shadow:var(--shadow-glow)}.option-btn.correct{border-color:var(--success);background:#22c55e26}.option-btn.wrong{border-color:var(--danger);background:#ef444426}.option-letter{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;font-weight:800;font-size:14px;flex-shrink:0}.leaderboard{display:flex;flex-direction:column;gap:6px}.lb-row{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:var(--radius-sm);background:var(--bg-surface)}.lb-row.top{background:#9b5cff1a;border:1px solid var(--border-bright)}.lb-rank{width:28px;font-weight:800;color:var(--accent-light);text-align:center}.lb-name{flex:1;font-weight:600}.lb-score{font-weight:800;color:var(--accent);font-size:16px}.lb-streak{font-size:11px;color:var(--warning)}.overlay-bg{background:transparent;min-height:100vh}.overlay-question{background:var(--bg-card);border:2px solid var(--border-bright);border-radius:var(--radius);padding:32px;margin:20px;box-shadow:var(--shadow),var(--shadow-glow)}.overlay-question-text{font-size:24px;font-weight:700;line-height:1.4;text-align:center;margin-bottom:24px}.vote-bar{display:flex;height:40px;border-radius:var(--radius-sm);overflow:hidden}.vote-bar-yes{background:var(--success);transition:width .5s;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;min-width:30px}.vote-bar-no{background:var(--danger);transition:width .5s;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;min-width:30px}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes glow{0%,to{box-shadow:0 0 10px var(--accent-glow)}50%{box-shadow:0 0 25px var(--accent-glow)}}@keyframes pop{0%{transform:scale(.8);opacity:0}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}@keyframes flipIn{0%{transform:rotateY(90deg);opacity:0}to{transform:rotateY(0);opacity:1}}@keyframes countUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes eliminated{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.5) translateY(20px);color:var(--danger)}}.anim-fadeIn{animation:fadeIn .3s ease}.anim-slideUp{animation:slideUp .4s ease}.anim-pop{animation:pop .4s ease}.anim-glow{animation:glow 2s ease infinite}.anim-shake{animation:shake .3s ease}.anim-flip{animation:flipIn .5s ease}.anim-eliminated{animation:eliminated .8s ease forwards}
