:root{
  --bg:#0f1115; --card:#1a1f28; --card2:#232a36; --ink:#e8ecf2; --muted:#9aa5b4;
  --accent:#ffd23f; --good:#3ecf6e; --bad:#ff6b6b; --off:#f4f6f8; --def:#ff5d5d;
  --radius:14px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0; padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  display:flex; flex-direction:column; min-height:100dvh;
}
#top{
  position:sticky; top:0; z-index:20; background:var(--bg);
  padding-bottom:8px; box-shadow:0 12px 18px -12px rgba(0,0,0,.85);
}
header{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 14px calc(4px + env(safe-area-inset-top)) 14px; padding-top:calc(10px + env(safe-area-inset-top));
}
header .brand{display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--ink)}
body.in-scenario header .brand h1{display:none}
header .brand svg{display:block}
header h1{font-size:17px; margin:0; letter-spacing:.3px}
header h1 span{color:var(--accent)}
.chips{display:flex; gap:6px; align-items:center}
.chip{font-size:12px; color:var(--muted); background:var(--card); border-radius:99px; padding:4px 10px; white-space:nowrap}
.chip.score{color:var(--accent)}
.chip.btn{cursor:pointer; border:1px solid #313a49; color:var(--ink)}
#fieldwrap{padding:0 10px; position:relative}
svg#field{display:block; width:100%; height:auto; border-radius:12px}
#replay{
  position:absolute; right:18px; bottom:8px; font-size:12px; color:#dfe6ee;
  background:rgba(15,17,21,.55); border:1px solid rgba(255,255,255,.25); border-radius:99px;
  padding:4px 10px; display:none;
}
main{flex:1; padding:12px 14px calc(20px + env(safe-area-inset-bottom)) 14px; max-width:640px; width:100%; margin:0 auto}
.card{background:var(--card); border-radius:var(--radius); padding:16px; animation:rise .25s ease}
.card + .card, .card + button.go, button.go + .card{margin-top:10px}
@keyframes rise{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
.card h2{margin:0 0 6px; font-size:16px}
.card p{margin:6px 0; line-height:1.45; font-size:14.5px}
.muted{color:var(--muted)}
.who{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:1px;
  color:#0f1115; background:var(--accent); border-radius:6px; padding:3px 8px; margin-bottom:8px;
}
.who.wr{background:#7fd4ff} .who.rb{background:#c9a3ff}
button.opt, button.go{
  display:block; width:100%; text-align:left; margin-top:8px; padding:12px 14px;
  background:var(--card2); color:var(--ink); border:1px solid #313a49; border-radius:12px;
  font-size:14.5px; line-height:1.35; cursor:pointer; font-family:inherit;
}
button.go{
  background:var(--accent); color:#14161a; font-weight:700; text-align:center; border:none;
  font-size:15.5px; padding:13px;
}
button.go.secondary{background:var(--card2); color:var(--ink); font-weight:600}
button.opt.correct{background:#173324; border-color:var(--good)}
button.opt.wrong{background:#381f22; border-color:var(--bad)}
button.opt:disabled{cursor:default; opacity:1}
button:focus-visible, a:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.explain{margin-top:10px; padding:12px; border-radius:10px; background:var(--card2); font-size:14px; line-height:1.5}
.explain.good{border-left:3px solid var(--good)} .explain.bad{border-left:3px solid var(--bad)}
ul.points{margin:8px 0 0; padding-left:20px}
ul.points li{margin:6px 0; line-height:1.45; font-size:14.5px}
.final h2{font-size:20px}
.bigscore{font-size:40px; font-weight:800; color:var(--accent); margin:8px 0}
a{color:#7fd4ff}

/* field */
.grass{fill:#2c7a45}
.stripe{fill:#2f8149}
.line{stroke:#e9f5ec; stroke-width:1.6; opacity:.55}
.los{stroke:#ffd23f; stroke-width:2; opacity:.85}
.hash{stroke:#e9f5ec; stroke-width:1; opacity:.3}
.pl-o circle{fill:var(--off); stroke:#3a4656; stroke-width:1.5}
.pl-o text{fill:#1c2430}
.pl-d circle{fill:var(--def); stroke:#7e1f1f; stroke-width:1.5}
.pl-d text{fill:#fff}
.pl text{font-size:8px; font-weight:700; text-anchor:middle; dominant-baseline:central; pointer-events:none}
.ring{fill:none; stroke:var(--accent); stroke-width:2.5; animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.25} 50%{opacity:.95}}
.dl{fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.dl.route{stroke:#f4f6f8; opacity:.9}
.dl.hot{stroke:#ffd23f}
.dl.read{stroke:#ff8888; stroke-dasharray:5 4}
.dlabel{fill:#f4f6f8; font-size:8px; font-weight:600; paint-order:stroke; stroke:#0f1115; stroke-width:2px}

/* home / table of contents */
.module{margin-top:12px}
.module .mhead{display:flex; justify-content:space-between; align-items:baseline; gap:8px}
.module h2{font-size:16px}
.module .mprog{font-size:12px; color:var(--muted); white-space:nowrap}
.module p.blurb{color:var(--muted); font-size:13.5px; margin:4px 0 8px}
.slist{display:flex; flex-direction:column; gap:6px}
.srow{
  display:flex; align-items:center; gap:10px; padding:11px 12px;
  background:var(--card2); border:1px solid #313a49; border-radius:12px;
  color:var(--ink); font-size:14.5px; cursor:pointer; text-align:left; width:100%; font-family:inherit;
}
.srow .status{width:22px; height:22px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  font-size:12px; background:#313a49; color:var(--muted)}
.srow.done .status{background:#173324; color:var(--good)}
.srow .best{margin-left:auto; font-size:12px; color:var(--muted); white-space:nowrap}
.srow.done .best{color:var(--good)}

/* auth modal */
#modal{position:fixed; inset:0; z-index:50; display:none; align-items:flex-end; justify-content:center;
  background:rgba(5,7,10,.6)}
#modal.open{display:flex}
.sheet{background:var(--card); border-radius:16px 16px 0 0; width:100%; max-width:520px;
  padding:18px 16px calc(22px + env(safe-area-inset-bottom)); animation:rise .2s ease}
.sheet h2{margin:0 0 4px; font-size:17px}
.tabs{display:flex; gap:6px; margin:10px 0}
.tabs button{flex:1; padding:9px; border-radius:10px; border:1px solid #313a49; background:var(--card2);
  color:var(--muted); font-weight:600; cursor:pointer; font-family:inherit; font-size:14px}
.tabs button.on{background:var(--accent); color:#14161a; border-color:var(--accent)}
.sheet input{width:100%; padding:12px; border-radius:10px; border:1px solid #313a49; background:var(--bg);
  color:var(--ink); font-size:16px; margin-top:8px}
.sheet .err{color:var(--bad); font-size:13px; margin-top:6px; min-height:16px}
.sheet .note{color:var(--muted); font-size:13px; margin-top:8px; line-height:1.4}
.sheet select{font-family:inherit}
.joinnote{background:#332b17; border:1px solid #57491f; color:var(--ink); border-radius:10px;
  padding:10px 12px; font-size:14px; margin:10px 0 4px}
table.lb{width:100%; border-collapse:collapse; font-size:14px; margin-top:6px}
table.lb th{color:var(--muted); text-align:left; font-weight:600; font-size:11.5px; letter-spacing:.5px;
  text-transform:uppercase; padding:6px 8px; border-bottom:1px solid #313a49}
table.lb td{padding:9px 8px; border-bottom:1px solid #232a36}
table.lb tr:last-child td{border-bottom:none}
table.lb .n{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
table.lb tr.you td{background:#20262f}
table.lb .muted{color:var(--muted); font-size:12px}
.sheet .close{position:absolute}
#toast{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(18px + env(safe-area-inset-bottom));
  background:var(--card2); border:1px solid #3a4454; color:var(--ink); padding:10px 16px; border-radius:99px;
  font-size:13.5px; z-index:60; display:none; box-shadow:0 6px 20px rgba(0,0,0,.5)}
@media (prefers-reduced-motion: reduce){
  .card, .sheet{animation:none}
  .ring{animation:none; opacity:.8}
}