:root {
  --bg: #f5f2ea;
  --paper: #fbf9f3;
  --ink: #1a1a1a;
  --muted: #6b6356;
  --accent: #b11116;
  --accent-2: #8a0d11;
  --ok: #1a7d4b;
  --bad: #b11116;
  --border: #d8d1c0;
  --radius: 4px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141210;
    --paper: #1c1a17;
    --ink: #ece7dc;
    --muted: #a59b88;
    --accent: #e4484d;
    --accent-2: #f26b6f;
    --border: #322d26;
  }
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  background: var(--bg); color: var(--ink);
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  min-height: 100vh;
}
.paper { max-width: 540px; margin:0 auto; background: var(--paper); min-height:100vh; padding: 18px 18px 40px; }
.screen { display:none; }
.screen.active { display:block; }

.rule { height:2px; background: var(--ink); margin: 6px 0; }
.masthead { text-align:center; }
.masthead h1 { margin: 2px 0; font-size: 34px; letter-spacing:.5px; font-weight: 800; }
.masthead .date { margin: 0; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 2px; font-family: system-ui, sans-serif; }

.streakbar { text-align:center; margin: 12px 0; font-family: system-ui, sans-serif; font-size: 14px; color: var(--muted); min-height: 20px; }
.streakbar b { color: var(--accent); }

.lead { border:1px solid var(--border); border-top: 3px solid var(--accent); padding: 16px; margin: 10px 0 20px; background: var(--paper); }
.lead .kicker { display:inline-block; background: var(--accent); color:#fff; font-family: system-ui, sans-serif; font-size: 11px; letter-spacing:1px; text-transform: uppercase; padding: 3px 8px; margin-bottom: 8px; }
.lead h2 { margin: 6px 0 4px; font-size: 24px; }
.lead p { margin: 0 0 14px; color: var(--muted); font-family: system-ui, sans-serif; font-size: 14px; }
.lead.done { opacity:.75; }

.section-title { font-size: 15px; text-transform: uppercase; letter-spacing: 1px; border-bottom: 2px solid var(--ink); padding-bottom: 4px; margin: 20px 0 12px; font-family: system-ui, sans-serif; }
.topics { display:grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.topic {
  background: transparent; border:1px solid var(--border); border-radius: var(--radius);
  padding: 12px; text-align:left; cursor:pointer; color: var(--ink);
  font-family: ui-serif, Georgia, serif; font-size: 15px; line-height:1.25;
}
.topic:active { background: var(--border); }
.topic small { display:block; color: var(--muted); font-family: system-ui, sans-serif; font-size:11px; margin-top:4px; }

.cta { background: var(--accent); color:#fff; border:none; border-radius: var(--radius); padding: 12px 16px; font-size: 15px; font-weight:700; cursor:pointer; font-family: system-ui, sans-serif; }
.cta:active { background: var(--accent-2); }
.cta.hidden { display:none; }
.ghost-link { display:block; width:100%; margin-top:18px; background:none; border:none; color: var(--accent); font-size:15px; cursor:pointer; font-family: system-ui, sans-serif; }
.colophon { color: var(--muted); font-size: 11px; text-align:center; margin-top:14px; font-family: system-ui, sans-serif; }

.gbar { display:flex; justify-content:space-between; align-items:baseline; margin-bottom: 14px; font-family: system-ui, sans-serif; }
.glabel { font-weight:700; color: var(--accent); text-transform: uppercase; font-size: 12px; letter-spacing:1px; }
.gprog { color: var(--muted); font-size: 13px; }
.qbox { border:1px solid var(--border); border-left: 4px solid var(--accent); padding: 16px; }
.qtext { margin: 0 0 14px; font-size: 20px; font-weight: 700; line-height:1.3; }
.answers { display:flex; flex-direction:column; gap: 9px; font-family: system-ui, sans-serif; }
.answers button { background: transparent; border:1px solid var(--border); border-radius: var(--radius); padding: 13px; font-size: 15px; text-align:left; cursor:pointer; color: var(--ink); }
.answers button:active { border-color: var(--ink); }
.answers button.correct { background: rgba(26,125,75,.14); border-color: var(--ok); color: var(--ok); font-weight:600; }
.answers button.wrong { background: rgba(177,17,22,.12); border-color: var(--bad); color: var(--bad); }
.answers button:disabled { cursor:default; }

.explain { margin-top: 14px; border-top:1px dotted var(--border); padding-top: 12px; font-family: system-ui, sans-serif; font-size: 14px; }
.explain.hidden { display:none; }

.over-card { text-align:center; padding: 10px 0; }
.over-score { font-size: 40px; font-weight: 800; color: var(--accent); margin: 10px 0 4px; }
.over-sub { color: var(--muted); font-family: system-ui, sans-serif; font-size: 14px; margin-bottom: 18px; }

.back { background:none; border:none; color: var(--accent); font-size: 15px; padding: 4px 0 12px; cursor:pointer; font-family: system-ui, sans-serif; }
.toplist { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap: 8px; font-family: system-ui, sans-serif; }
.toplist li { border:1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; display:flex; align-items:center; gap:12px; }
.toplist .rank { font-weight:800; color: var(--accent); width: 24px; }
.toplist .nm { flex:1; }
.toplist .st { font-size: 13px; color: var(--muted); }
.toplist .empty { text-align:center; color: var(--muted); padding: 20px; }