:root{
  box-sizing:border-box;
  --bg:#f4f3f0; --card:#ffffff; --ink:#16181d; --muted:#6c7079;
  --line:#e3e1dc; --accent:#13407f; --chip:#efede8;
  --good:#1d7a45; --good-bg:#e5f4ea; --bad:#b3261e; --bad-bg:#fbe9e7;
  --land:#e9e6df; --land-active:#d8e3f2; --land-hover:#c7d7ee; --border:#ffffff;
  --sq:#ffffff; --sq-line:#3b4250;
  --try1:#2e8b57; --try2:#d4a017; --try3:#e07b24; --missed:#c0392b;
  --dem:#1f5fbf; --rep:#c0392b; --ind:#6b4fa0;
  --shadow:0 1px 2px rgba(0,0,0,.06), 0 6px 18px rgba(0,0,0,.05);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#101114; --card:#191b20; --ink:#eceef2; --muted:#9aa0aa;
    --line:#2a2d34; --accent:#7ba7f0; --chip:#23262d;
    --good:#6fd39a; --good-bg:#15291e; --bad:#ff8a80; --bad-bg:#33191a;
    --land:#262a31; --land-active:#2c3a52; --land-hover:#36496a; --border:#101114;
    --sq:#eceef2; --sq-line:#101114;
    --dem:#7ba7f0; --rep:#ff8a80; --ind:#c3a6f0;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#101114; --card:#191b20; --ink:#eceef2; --muted:#9aa0aa;
  --line:#2a2d34; --accent:#7ba7f0; --chip:#23262d;
  --good:#6fd39a; --good-bg:#15291e; --bad:#ff8a80; --bad-bg:#33191a;
  --land:#262a31; --land-active:#2c3a52; --land-hover:#36496a; --border:#101114;
  --sq:#eceef2; --sq-line:#101114;
  --dem:#7ba7f0; --rep:#ff8a80; --ind:#c3a6f0;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.35);
}
*,*::before,*::after{ box-sizing:inherit; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-tap-highlight-color:transparent;
}
a{ color:var(--accent); }
button{ font:inherit; }
.wrap{ max-width:1100px; margin:0 auto; padding:16px 16px 48px; }
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.brand{ font-size:1.3rem; font-weight:700; letter-spacing:-.01em; color:var(--ink); text-decoration:none; }
.brand span{ color:var(--muted); font-weight:500; }
.muted{ color:var(--muted); }
.small{ font-size:.85rem; }

.seg{ display:inline-flex; gap:4px; background:var(--chip); padding:4px; border-radius:12px; }
.seg button{ border:0; background:transparent; color:var(--muted); font-size:.85rem; padding:6px 10px; border-radius:9px; cursor:pointer; }
.seg button[aria-pressed="true"]{ background:var(--card); color:var(--ink); font-weight:600; box-shadow:var(--shadow); }

.card{ background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:16px; }
.btn{ border:1px solid var(--line); background:var(--chip); color:var(--ink); padding:8px 14px; border-radius:10px; cursor:pointer; font-weight:600; }
.btn:hover{ border-color:var(--accent); }
.btn.primary{ background:var(--accent); border-color:var(--accent); color:var(--card); }
.icon-btn{ border:1px solid var(--line); background:var(--chip); color:var(--ink); width:34px; height:34px; border-radius:50%; cursor:pointer; display:inline-grid; place-items:center; flex:none; }
.icon-btn:hover{ border-color:var(--accent); }
.icon-btn svg{ width:18px; height:18px; }

/* Hub */
.hub h2{ font-size:1rem; margin:24px 0 8px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.grid{ display:grid; gap:10px; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); }
.quiz-card{ display:block; text-decoration:none; color:var(--ink); padding:10px; border-radius:14px; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); }
.quiz-card:hover{ border-color:var(--accent); }
.quiz-card svg{ width:100%; height:auto; display:block; margin-bottom:6px; }
.quiz-card .t{ font-weight:650; }
.quiz-card .s{ font-size:.82rem; color:var(--muted); display:flex; justify-content:space-between; gap:8px; }
.mini path{ fill:var(--land); stroke:var(--border); stroke-width:1; }
.mini path.on{ fill:var(--accent); }
.roster-note{ font-size:.85rem; color:var(--muted); margin-top:6px; }

/* Game */
.game{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px; align-items:start; }
@media (max-width:820px){ .game{ grid-template-columns:1fr; } .side{ order:-1; } }
.mapbox{ padding:8px; position:relative; }
.map{ width:100%; height:auto; max-height:80vh; display:block; user-select:none; touch-action:manipulation; }
.map .st{ fill:var(--land); stroke:var(--border); stroke-width:.8; vector-effect:non-scaling-stroke; }
.map .st.active{ fill:var(--land-active); }
.map .lead{ stroke:var(--muted); stroke-width:.8; vector-effect:non-scaling-stroke; fill:none; }
.map .sq rect{ fill:var(--sq); stroke:var(--sq-line); stroke-width:1.2; vector-effect:non-scaling-stroke; cursor:pointer; }
.map .sq:hover rect{ stroke:var(--accent); stroke-width:2.4; }
.map .sq text{ font-weight:700; fill:var(--sq-line); text-anchor:middle; dominant-baseline:central; pointer-events:none; }
.map .sq.done rect{ cursor:default; stroke-width:1; }
.map .sq.done text{ fill:#fff; }
.map .sq.t1 rect{ fill:var(--try1); } .map .sq.t2 rect{ fill:var(--try2); }
.map .sq.t3 rect{ fill:var(--try3); } .map .sq.t4 rect{ fill:var(--missed); }
.map .sq.wrong rect{ fill:var(--missed); animation:shake .3s; }
.map .sq.hint rect{ animation:blink .7s infinite; }
@keyframes blink{ 50%{ fill:var(--missed); } }
@keyframes shake{ 25%{ transform:translateX(-1px);} 75%{ transform:translateX(1px);} }
.tip{ position:absolute; pointer-events:none; background:var(--ink); color:var(--bg); font-size:.8rem; padding:3px 8px; border-radius:6px; white-space:nowrap; transform:translate(-50%,-130%); }

.side{ display:flex; flex-direction:column; gap:12px; position:sticky; top:12px; }
.prompt{ display:flex; gap:12px; align-items:center; }
.prompt img, .prompt .ph{ width:84px; height:104px; object-fit:cover; border-radius:10px; background:var(--chip); flex:none; }
.prompt .ph{ display:grid; place-items:center; color:var(--muted); font-size:2rem; }
.prompt .who{ min-width:0; }
.prompt .label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.prompt .name{ font-size:1.2rem; font-weight:700; line-height:1.2; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.party{ display:inline-block; padding:1px 8px; border-radius:999px; font-size:.8rem; font-weight:700; color:#fff; }
.party.D{ background:var(--dem); } .party.R{ background:var(--rep); } .party.I{ background:var(--ind); }
:root[data-theme="dark"] .party, .party{ color:var(--card); }
.facts{ font-size:.9rem; color:var(--muted); margin-top:4px; }
.badge{ display:inline-block; font-size:.72rem; padding:1px 6px; border-radius:6px; background:var(--chip); color:var(--muted); border:1px solid var(--line); }
.status{ display:flex; justify-content:space-between; font-variant-numeric:tabular-nums; font-size:.95rem; }
.status b{ font-size:1.1rem; }
.msg{ font-size:.9rem; min-height:1.4em; }
.msg.bad{ color:var(--bad); } .msg.good{ color:var(--good); }
.legend{ display:flex; gap:10px; flex-wrap:wrap; font-size:.75rem; color:var(--muted); }
.legend i{ display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:4px; vertical-align:-1px; }
.progress{ margin:8px 0; height:6px; background:var(--chip); border-radius:3px; overflow:hidden; }
.progress div{ height:100%; background:var(--accent); width:0; transition:width .2s; }

/* Results + leaderboard */
.results h2{ margin:0 0 4px; }
.big{ font-size:2.4rem; font-weight:800; letter-spacing:-.02em; }
.lb{ width:100%; border-collapse:collapse; font-size:.9rem; font-variant-numeric:tabular-nums; }
.lb th{ text-align:left; color:var(--muted); font-weight:600; font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; padding:4px 6px; }
.lb td{ padding:5px 6px; border-top:1px solid var(--line); }
.lb tr.me td{ background:var(--good-bg); font-weight:650; }
.lb td.r{ text-align:right; }
.namebox{ display:flex; gap:8px; flex-wrap:wrap; }
.namebox input{ flex:1; min-width:140px; font:inherit; padding:8px 10px; border-radius:10px; border:1px solid var(--line); background:var(--bg); color:var(--ink); }
.row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.review{ font-size:.85rem; max-height:260px; overflow:auto; }
.review div{ padding:3px 0; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:8px; }

/* Prompt extras */
.respell{ font-size:.85rem; color:var(--muted); font-style:italic; margin-top:1px; }
.funfacts{ margin-top:12px; border-top:1px solid var(--line); padding-top:8px; }
.funfacts summary{ cursor:pointer; font-size:.8rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.funfacts ul{ margin:6px 0 0; padding-left:18px; font-size:.86rem; line-height:1.4; }
.funfacts li + li{ margin-top:4px; }
.icon-btn[data-sound][aria-pressed="false"]{ color:var(--muted); }

/* Support menu (same pattern as sports.elegy.io) */
.support{ position:relative; flex:none; }
.support-btn{ display:inline-flex; align-items:center; gap:6px; font-size:.8rem; font-weight:600; color:var(--muted);
  background:var(--chip); border:1px solid var(--line); border-radius:999px; padding:6px 12px; cursor:pointer; white-space:nowrap; }
.support-btn svg{ width:15px; height:15px; flex:none; }
.support-btn:hover, .support-btn[aria-expanded="true"]{ color:var(--accent); border-color:var(--accent); }
.support-menu{ position:absolute; right:0; top:calc(100% + 8px); z-index:30; width:min(270px, calc(100vw - 32px));
  background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:12px; }
.support-menu p{ margin:0 2px 10px; font-size:.8rem; color:var(--muted); line-height:1.4; }
.support-links{ display:flex; flex-direction:column; gap:6px; }
.support-links a{ display:flex; justify-content:space-between; align-items:center; gap:10px; text-decoration:none; color:var(--ink);
  font-size:.86rem; font-weight:600; background:var(--chip); border:1px solid transparent; border-radius:10px; padding:9px 12px; }
.support-links a:hover{ border-color:var(--accent); }
.support-links a span{ font-size:.72rem; font-weight:500; color:var(--muted); }

/* Results pop-up */
.overlay{ position:fixed; inset:0; z-index:50; background:rgba(10,12,16,.55); display:grid; place-items:center; padding:16px; overflow:auto; }
.overlay[hidden]{ display:none; }
.modal{ position:relative; width:min(460px, 100%); max-height:calc(100dvh - 32px); overflow:auto; background:var(--card); color:var(--ink);
  border:1px solid var(--line); border-radius:18px; box-shadow:0 20px 60px rgba(0,0,0,.35); padding:20px; }
.modal .close{ position:absolute; top:12px; right:12px; font-size:1.2rem; line-height:1; }
.modal h2.big{ margin:4px 0 2px; }
.modal .section{ margin-top:16px; }
.modal .good{ color:var(--good); font-weight:600; }
.tipline{ margin:16px 0 0; text-align:center; }
@media (prefers-reduced-motion: no-preference){ .modal{ animation:rise .2s ease-out; } }
@keyframes rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@media (max-width:560px){ .seg button{ padding:6px 8px; font-size:.8rem; } }
#nerr:empty{ display:none; }

/* Right state, wrong class */
:root{ --near:#e0a100; }
.map .sq.near rect{ fill:var(--near); animation:nudge .45s ease-in-out 2; }
.map .st.near{ fill:var(--near); fill-opacity:.55; transition:fill .15s; }
.msg.near{ color:var(--near); font-weight:600; }
@keyframes nudge{ 0%,100%{ transform:none; } 30%{ transform:translateY(-1.5px); } 60%{ transform:translateY(1px); } }
.map .sq rect{ transform-box:fill-box; transform-origin:center; }

/* Phones: the game screen fits the viewport and never scrolls. Senator on top,
   map in the middle, status and buttons at the bottom. */
@media (max-width:820px){
  /* The game screen is exactly as tall as the visible area (--app-h, measured in app.js), so
     there's nothing to scroll. It stays in normal page flow rather than position:fixed, so it
     always starts below the browser's own bars (Chrome on iOS puts its address bar on top). */
  html:has(body.playing), body.playing{ overflow:hidden; overscroll-behavior:none; height:var(--app-h, 100dvh); }
  body.playing .wrap{ height:var(--app-h, 100dvh); max-width:none; display:flex; flex-direction:column;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom)); }
  body.playing .topbar{ margin-bottom:8px; flex-wrap:nowrap; }
  body.playing .topbar .seg{ display:none; }
  body.playing .brand{ font-size:1.1rem; }
  body.playing .support-btn{ padding:6px 9px; }
  body.playing .support-btn{ font-size:0; gap:0; }
  body.playing .support-btn svg{ width:17px; height:17px; }
  .game{ flex:1; min-height:0; display:grid; align-items:stretch; grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr) auto auto; gap:8px; }
  .side{ display:contents; }
  /* The senator card scrolls on its own if the facts are long; the map keeps at least half the screen. */
  .g-prompt{ order:1; padding:10px 12px; max-height:38vh; max-height:38dvh; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  .mapbox{ order:2; min-height:0; padding:4px; display:flex; }
  .mapbox .map{ width:100%; height:100%; max-height:none; }
  .g-status{ order:3; padding:8px 12px; }
  .g-actions{ order:4; flex-wrap:nowrap; }
  .g-actions .btn{ flex:1; text-align:center; padding:7px 6px; font-size:.85rem; }
  .g-legend, .g-label{ display:none; }
  .prompt{ gap:10px; }
  .prompt img, .prompt .ph{ width:52px; height:64px; border-radius:8px; }
  .prompt .name{ font-size:1.05rem; }
  .prompt .icon-btn{ width:30px; height:30px; }
  .facts{ margin-top:2px; font-size:.82rem; }
  .respell{ font-size:.78rem; }
  .funfacts{ margin-top:8px; padding-top:6px; }
  .funfacts ul{ font-size:.82rem; }
  .status{ font-size:.85rem; } .status b{ font-size:.95rem; }
  .progress{ margin:6px 0; }
  .msg{ font-size:.82rem; min-height:2.6em; }
}

/* Placed seats show the senator's photo, ringed in the colour for how many tries it took */
.map g.sq rect.ring{ fill:none; stroke-width:2.5; vector-effect:non-scaling-stroke; pointer-events:none; }
.map .sq.t1 .ring{ stroke:var(--try1); } .map .sq.t2 .ring{ stroke:var(--try2); }
.map .sq.t3 .ring{ stroke:var(--try3); } .map .sq.t4 .ring{ stroke:var(--missed); }
.map .sq.photo rect:first-child{ fill:var(--chip); }
.map .sq image{ pointer-events:none; }
.map .sq.done text{ display:none; }
.map .sq.done:not(.photo) .ring{ stroke:var(--card); }

/* State-only mode: the state's shape is clickable too */
.map.mode-state .st.active{ cursor:pointer; }
.map.mode-state .st.active:hover{ fill:var(--land-hover); }
.map .st.wrongst{ fill:var(--missed); fill-opacity:.35; }
.map.mode-state .sq:not(.done) rect{ fill:var(--sq); fill-opacity:.85; }

/* Flag button */
.icon-btn.flag{ margin-left:6px; color:var(--muted); }
.icon-btn.flag[aria-pressed="true"]{ color:var(--bad); border-color:var(--bad); background:var(--bad-bg); }
.icon-btn.flag[aria-pressed="true"] svg path:last-child{ fill:currentColor; }

/* Personal-best badge on quiz cards */
.quiz-card{ position:relative; }
.best-badge{ position:absolute; top:8px; right:8px; z-index:1; font-size:.75rem; font-weight:700; padding:2px 9px; border-radius:999px;
  border:1px solid var(--line); background:var(--card); color:var(--muted); box-shadow:var(--shadow); font-variant-numeric:tabular-nums; }
.best-badge.none{ font-weight:600; background:var(--chip); box-shadow:none; }
.best-badge.low{ color:var(--bad); border-color:var(--bad); }
.best-badge.ok{ color:#b7791f; border-color:#b7791f; }
.best-badge.good{ color:var(--good); border-color:var(--good); background:var(--good-bg); }
.best-badge.perfect{ color:#7a5b00; border-color:#d4a017; background:#fdf3d0; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .best-badge.perfect{ color:#f5d36b; background:#3a2f0b; } }
:root[data-theme="dark"] .best-badge.perfect{ color:#f5d36b; background:#3a2f0b; }