:root {
  --bg1: #7dd3fc;
  --bg2: #fef08a;
  --ink: #172554;
  --panel: rgba(255,255,255,.92);
  --border: rgba(15,23,42,.14);
  --good: #16a34a;
  --bad: #dc2626;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: radial-gradient(circle at top left, var(--bg2), transparent 35%), linear-gradient(135deg, var(--bg1), #c084fc);
}
.app-shell { width: min(1100px, 100%); margin: 0 auto; padding: 18px; }
.topbar { display:flex; justify-content:space-between; margin-bottom:16px; }
.home-link { color: var(--ink); font-weight: 800; text-decoration: none; }
header { text-align:center; margin-bottom:18px; }
.game-title { margin: 0; font-size: clamp(2rem, 7vw, 4.5rem); line-height: .95; letter-spacing: -0.05em; }
.subtitle { margin: 10px auto 0; max-width: 680px; font-weight: 700; opacity:.8; }
.stage { display:grid; grid-template-columns: 1.5fr .9fr; gap:16px; align-items:start; }
.panel { background: var(--panel); border: 2px solid var(--border); box-shadow: 0 20px 50px rgba(15,23,42,.18); border-radius: 28px; padding: 18px; }
.question-panel { grid-row: span 2; }
.question-card { min-height: 180px; display:grid; place-items:center; text-align:center; border-radius: 24px; padding: 24px; background: #fff; border:2px solid var(--border); }
.question-card h2 { margin:0; font-size: clamp(2.4rem, 11vw, 6rem); letter-spacing:-.06em; }
.hint { font-weight: 800; opacity:.72; }
.answers { display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-top:16px; }
button { cursor:pointer; border:0; border-radius:18px; padding:16px 18px; font-size:1rem; font-weight:900; box-shadow: 0 8px 0 rgba(15,23,42,.18); }
button:disabled { opacity:.55; cursor:not-allowed; }
.primary, .answers button:first-child { background:#22c55e; color:#052e16; }
.secondary, .answers button:last-child { background:#facc15; color:#422006; }
.player-form { display:grid; gap:8px; }
label { font-weight:900; }
input { border:2px solid var(--border); border-radius:14px; padding:13px 14px; font-size:1rem; }
.stats { display:grid; grid-template-columns: repeat(3,1fr); gap:8px; margin-top:14px; }
.stat { background:#fff; border:2px solid var(--border); border-radius:18px; padding:12px; text-align:center; }
.stat span { display:block; font-size:.75rem; font-weight:900; opacity:.7; text-transform:uppercase; }
.stat strong { font-size:1.5rem; }
.feedback { min-height: 28px; font-weight:900; text-align:center; }
.feedback.good { color: var(--good); }
.feedback.bad { color: var(--bad); }
.error-box { display:none; padding:12px; border-radius:14px; background:#fee2e2; color:#991b1b; font-weight:800; }
.error-box.show { display:block; }
.finish-actions { display:none; gap:10px; margin-top:12px; }
.finish-actions.show { display:flex; }
.leaderboard-row { display:grid; grid-template-columns: 36px 1fr auto; gap:10px; align-items:center; padding:10px 0; border-bottom:1px solid var(--border); }
.empty { opacity:.7; font-weight:800; }
@media (max-width: 760px) {
  .stage { grid-template-columns:1fr; }
  .question-panel { grid-row:auto; }
  .answers { grid-template-columns:1fr; }
}