@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap');

:root { color-scheme: dark; --bg:#08080c; --card:#12121a; --ink:#f5f5ec; --muted:#8e8e9c; --cyan:#4dd2ff; --red:#ff5c6e; --yellow:#f7e94e; --green:#6ce5a3; }
* { box-sizing:border-box; }
html,body { min-height:100%; margin:0; background:radial-gradient(circle at top,#18212b 0,#08080c 48%); color:var(--ink); font-family:'Space Grotesk',system-ui,sans-serif; }
body { display:grid; place-items:center; padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom)); }
button,input { font:inherit; }
button { min-height:52px; border:0; border-radius:12px; padding:12px 18px; font-weight:700; cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.48; }
input { width:100%; min-height:54px; border:1px solid #343442; border-radius:12px; background:#0b0b10; color:var(--ink); padding:12px 14px; outline:none; }
input:focus { border-color:var(--cyan); box-shadow:0 0 0 3px #4dd2ff26; }
#app { width:min(100%,440px); }
.panel { width:100%; min-height:620px; display:flex; flex-direction:column; justify-content:center; gap:18px; border:1px solid #292936; border-radius:24px; background:#0d0d13e8; box-shadow:0 30px 100px #0009; padding:28px; }
.loading { align-items:center; color:var(--muted); }
.spinner { width:34px; height:34px; border:3px solid #30303c; border-top-color:var(--cyan); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.eyebrow { margin:0; color:var(--cyan); font-size:12px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
h1,h2,p { margin:0; }
h1 { font-size:clamp(34px,10vw,52px); line-height:.96; text-transform:uppercase; }
h2 { font-size:26px; line-height:1.15; }
.muted { color:var(--muted); }
.code { font-size:48px; font-weight:700; letter-spacing:.22em; text-align:center; text-transform:uppercase; }
.stack { display:grid; gap:12px; }
.row { display:flex; gap:10px; }
.primary { background:var(--cyan); color:#08080c; box-shadow:4px 4px 0 var(--red); }
.secondary { background:#1b1b25; color:var(--ink); border:1px solid #343442; }
.danger { background:#31171c; color:#ff9ba6; }
.link { min-height:auto; background:transparent; color:var(--cyan); padding:4px; }
.error { border:1px solid #ff5c6e55; border-radius:10px; background:#ff5c6e16; color:#ff9ba6; padding:11px 12px; font-size:13px; }
.connection { border:1px solid #f7e94e55; border-radius:10px; background:#f7e94e12; color:var(--yellow); padding:9px 12px; text-align:center; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.account { display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid #292936; padding-top:14px; font-size:12px; color:var(--muted); }
.account button { min-height:auto; padding:7px 10px; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.stat { border:1px solid #292936; border-radius:12px; background:#12121a; padding:12px 8px; text-align:center; }
.stat strong { display:block; font-size:20px; }
.stat span { color:var(--muted); font-size:10px; text-transform:uppercase; }
.countdown { font-variant-numeric:tabular-nums; font-size:38px; font-weight:700; color:var(--yellow); }
.answers { display:grid; gap:10px; }
.answer { display:grid; grid-template-columns:42px 1fr; align-items:center; min-height:68px; text-align:left; background:#181821; color:var(--ink); border:1px solid #343442; }
.answer .letter { color:var(--cyan); font-size:22px; }
.answer.selected { border-color:var(--cyan); background:#15252d; }
.answer.correct { border-color:var(--green); background:#123023; }
.answer.wrong { border-color:var(--red); background:#35171d; }
.answer:disabled { opacity:1; }
.locked { border:1px solid #f7e94e55; border-radius:12px; background:#f7e94e12; color:var(--yellow); padding:12px; text-align:center; font-weight:700; }
.leaderboard { list-style:none; display:grid; gap:7px; margin:0; padding:0; }
.leaderboard li { display:grid; grid-template-columns:30px 1fr auto; gap:8px; border-bottom:1px solid #242430; padding:9px 4px; }
.leaderboard .me { color:var(--cyan); font-weight:700; }
.result { font-size:34px; font-weight:700; text-transform:uppercase; }
.correct-text { color:var(--green); }
.wrong-text { color:var(--red); }
@media(max-width:480px){ body{padding:0;} #app{width:100%;} .panel{min-height:100dvh;border:0;border-radius:0;padding:24px 20px;} }