:root {
  --bg: #fff7ed;
  --card: #ffffff;
  --ink: #2b1a05;
  --muted: #8a6d4a;
  --accent: #f59e0b;
  --accent-2: #d97706;
  --ok: #16a34a;
  --bad: #dc2626;
  --border: #f0dcc0;
  --radius: 16px;
  --shadow: 0 6px 20px rgba(217,119,6,.12);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1206;
    --card: #2a1d0c;
    --ink: #f6e9d6;
    --muted: #c3a983;
    --accent: #f59e0b;
    --accent-2: #fbbf24;
    --border: #3d2c13;
    --shadow: 0 6px 20px rgba(0,0,0,.4);
  }
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  background: var(--bg); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  min-height: 100vh;
}
.wrap { max-width: 520px; margin:0 auto; padding: 16px 16px 40px; }
.screen { display:none; }
.screen.active { display:block; }

.hero { text-align:center; padding: 10px 0 6px; }
.hero .badge {
  width:64px; height:64px; margin:0 auto 10px; border-radius:20px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  font-size:32px; display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow);
}
.hero h1 { margin:0; font-size:26px; }
.hero .tag { margin:4px 0 0; color: var(--muted); font-size:14px; }

.mystats { text-align:center; color: var(--muted); font-size:13px; min-height:18px; margin:10px 0; }
.pick { margin: 10px 0 8px; font-size:15px; }
.levels { display:flex; flex-direction:column; gap:10px; }
.lvl {
  background: var(--card); border:1px solid var(--border); border-radius: var(--radius);
  padding:16px; text-align:left; cursor:pointer; box-shadow: var(--shadow); color: var(--ink);
  display:flex; flex-direction:column; gap:3px;
}
.lvl:active { transform: scale(.98); }
.lvl b { font-size:17px; }
.lvl span { font-size:13px; color: var(--muted); }

.ranking-link {
  display:block; width:100%; margin-top:14px; background:none; border:none;
  color: var(--accent-2); font-size:15px; cursor:pointer; padding:8px;
}
.disclaimer { color: var(--muted); font-size:11px; text-align:center; margin-top:14px; }

.gbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; font-size:15px; }
.lives { font-size:18px; letter-spacing:2px; }
.progress { color: var(--muted); font-size:13px; }
.timer {
  background: var(--accent); color:#fff; border-radius:999px; min-width:34px; text-align:center;
  padding:4px 10px; font-weight:700; font-variant-numeric: tabular-nums;
}
.timer.low { background: var(--bad); }

.qcard { background: var(--card); border:1px solid var(--border); border-radius: var(--radius); padding:18px; box-shadow: var(--shadow); }
.qtext { margin:0 0 14px; font-size:18px; font-weight:600; line-height:1.35; }
.answers { display:flex; flex-direction:column; gap:10px; }
.answers button {
  background: var(--bg); border:1px solid var(--border); border-radius:12px;
  padding:14px; font-size:15px; text-align:left; cursor:pointer; color: var(--ink);
}
.answers button:active { border-color: var(--accent); }
.answers button.correct { background: rgba(22,163,74,.15); border-color: var(--ok); color: var(--ok); font-weight:600; }
.answers button.wrong { background: rgba(220,38,38,.12); border-color: var(--bad); color: var(--bad); }
.answers button:disabled { cursor:default; opacity:.9; }

.explain {
  margin-top:14px; background: var(--card); border-left:4px solid var(--accent);
  border-radius:10px; padding:12px 14px; font-size:14px; color: var(--ink);
}
.explain.hidden, .next.hidden { display:none; }
.next {
  margin-top:14px; width:100%; background: var(--accent); color:#fff; border:none;
  border-radius:12px; padding:14px; font-size:16px; font-weight:600; cursor:pointer;
}

.result-card { text-align:center; background: var(--card); border:1px solid var(--border); border-radius: var(--radius); padding:26px 18px; box-shadow: var(--shadow); margin-top:20px; }
.rbadge { font-size:48px; }
.rscore { font-size:44px; font-weight:800; color: var(--accent-2); margin:6px 0; }
.rsub { color: var(--muted); font-size:14px; margin:0 0 16px; }
.play { width:100%; background: var(--accent); color:#fff; border:none; border-radius:12px; padding:14px; font-size:16px; font-weight:600; cursor:pointer; }

.back { background:none; border:none; color: var(--accent-2); font-size:15px; padding:4px 0 12px; cursor:pointer; }
.toplist { padding-left: 0; list-style:none; margin:0; display:flex; flex-direction:column; gap:8px; }
.toplist li { background: var(--card); border:1px solid var(--border); border-radius:12px; padding:12px 14px; display:flex; align-items:center; gap:12px; }
.toplist .rank { font-weight:800; color: var(--accent-2); width:26px; }
.toplist .nm { flex:1; }
.toplist .sc { font-weight:700; }
.toplist .empty { text-align:center; color: var(--muted); padding:20px; }