* { box-sizing: border-box; }
:root { color-scheme: dark; --bg:#111216; --panel:#1b1d24; --muted:#a6a8b3; --accent:#f0b84b; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 50% 0,#292a31 0,var(--bg) 55%); color:#f7f7f8; font-family:system-ui,-apple-system,Segoe UI,sans-serif; }
.wrap { width:min(900px,94vw); margin:0 auto; padding:38px 0 24px; }
header { text-align:center; margin-bottom:28px; }
.eyebrow { color:var(--accent); text-transform:uppercase; letter-spacing:.16em; font-size:12px; font-weight:800; }
h1 { font-size:clamp(34px,7vw,62px); line-height:1.03; margin:12px 0; letter-spacing:-.045em; }
.sub,.muted,.hint { color:var(--muted); }
.panel { background:rgba(27,29,36,.94); border:1px solid #343640; border-radius:22px; padding:clamp(18px,4vw,32px); box-shadow:0 18px 60px #0005; }
.progress-line,.stats-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; color:var(--muted); font-size:14px; }
.choices { display:grid; grid-template-columns:1fr auto 1fr; gap:16px; align-items:center; margin:26px 0 14px; }
.choice { display:flex; flex-direction:column; gap:12px; align-items:center; padding:12px; background:#242630; border:2px solid #393b46; border-radius:18px; color:white; cursor:pointer; min-width:0; transition:.15s ease; }
.choice:hover { transform:translateY(-3px); border-color:var(--accent); }
.choice:focus-visible,button:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.choice img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; background:#30323b; }
.choice-name { font-size:clamp(16px,2.5vw,22px); font-weight:800; text-align:center; overflow-wrap:anywhere; }
.versus { font-size:13px; color:var(--accent); font-weight:900; letter-spacing:.12em; }
.hint { text-align:center; margin:20px 0 0; }
.status { color:var(--muted); min-height:1.4em; text-align:center; font-size:14px; }
.hidden { display:none; }
h2 { margin:0 0 12px; font-size:28px; }
.primary,.secondary { border:0; border-radius:12px; padding:13px 18px; font-weight:800; cursor:pointer; margin:8px 8px 0 0; }
.primary { background:var(--accent); color:#191919; }
.secondary { background:#343640; color:white; }
.text-button { background:none; border:0; color:var(--accent); cursor:pointer; font:inherit; }
.stat-row { display:grid; grid-template-columns:1fr auto; gap:8px; padding:15px 0; border-bottom:1px solid #363842; }
.stat-title { font-weight:750; }
.stat-meta { color:var(--muted); font-size:13px; }
.stat-value { font-size:20px; font-weight:900; color:var(--accent); }
.bar { height:8px; border-radius:20px; background:#393b46; overflow:hidden; grid-column:1/-1; }
.bar > span { display:block; height:100%; background:var(--accent); border-radius:20px; }
footer { text-align:center; color:#777985; font-size:12px; padding:24px 10px; }
@media(max-width:560px) { .choices { gap:7px; } .choice { padding:7px; border-radius:13px; } .choice img { aspect-ratio:1/1; } .versus { font-size:10px; } }