/* Layout: one-screen app, map first. A slim stage-blue top bar, then the map
   filling the rest of the screen, with the clue card, the progress chips and
   the map buttons floating over it as frosted glass. The card docks low on
   phones and becomes a sidebar on wide screens. Gold buttons press in.
   Prompts are styled as Texas road signs: green guide signs for towns, brown
   recreation signs for landmarks. */
:root {
  --ground: #18227a;      /* stage blue, for the top band only */
  --top-ink: #ffffff;
  --top-soft: #b6bdf5;
  --logo-tap: #ff4747;    /* "State" white, "Tap" red: the flag's colors */
  --surface: #ffffff;
  --ink: #161c52;
  --ink-soft: #5e6177;
  --line: #e7e3da;
  --link: #2f4fd6;
  --focus: #2f4fd6;

  --water: #e9e4d8;      /* sand behind the map, sea included */
  --land-tx: #fffdf7;
  --land-tx-hover: #fff3d1;
  --land-other: #f4f0e6;
  --county: #e6dcc6;
  --border-tx: #18227a;
  --map-plain: #e9e4d8;

  --sign-green: #0d6a46;
  --sign-brown: #6c4128;
  --sign-ink: #ffffff;
  --sign-white: #ffffff;
  --sign-blue: #1d4f99;
  --sign-white-ink: #151515;
  --sign-marker: #262624;
  --sign-marker-ink: #e8e4d8;
  --sign-marker-edge: #262624;
  --stripe-county: #ffffff;
  --stripe-history: #c9c4b0;
  --zone: rgb(24 34 122 / 0.16);
  --zone-edge: #18227a;
  --zone-solid: #d5d8ee;

  --accent: #ffc72c;
  --accent-ink: #161c52;
  --accent-edge: #d99a00;
  --disabled-edge: #d3cdbf;
  --pin: #ff3358;
  --pin-ring: #ffffff;
  --star: #18227a;
  --star-ring: #ffffff;

  --band-star: #3657e8;
  --band-good: #19a35a;
  --band-ok: #f2b705;
  --band-ok-ink: #161c52;
  --band-meh: #ef6c00;
  --band-bad: #ff3358;

  --font-display: "Lilita One", "Rubik", system-ui, sans-serif;
  --font-ui: "Rubik", system-ui, sans-serif;
  --font-sign: "Overpass", "Highway Gothic", "Arial Narrow", Arial, system-ui, sans-serif;

  --radius: 14px;
  --glass: rgb(255 255 255 / 0.9);
  --glass-edge: rgb(255 255 255 / 0.65);
  --chip-glass: rgb(12 18 66 / 0.62);
  --lb-bg: rgb(24 34 122 / 0.045);
  --shadow-card: 0 14px 34px rgb(6 10 40 / 0.3), 0 2px 6px rgb(6 10 40 / 0.14);
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0d1250;
    --top-soft: #9aa2e6;
    --surface: #1c1c21;
    --ink: #f2f2f5;
    --ink-soft: #a9abb8;
    --line: #34343c;
    --link: #9fb2ff;
    --focus: #ffc72c;
    --water: #121215;
    --land-tx: #2b2b31;
    --land-tx-hover: #36363d;
    --land-other: #1f1f24;
    --county: #3e3e46;
    --border-tx: #d4d7ee;
    --map-plain: #121215;
    --sign-green: #0f7650;
    --sign-brown: #7a4a2f;
    --sign-blue: #2a5fae;
    --sign-marker-edge: #57574f;
    --zone: rgb(255 199 44 / 0.2);
    --zone-edge: #ffc72c;
    --zone-solid: #4a4a6a;
    --disabled-edge: #111114;
    --pin-ring: #121215;
    --star: #ffc72c;
    --star-ring: #121215;
    --glass: rgb(26 26 32 / 0.9);
    --glass-edge: rgb(255 255 255 / 0.08);
    --lb-bg: rgb(255 255 255 / 0.04);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #0d1250;
  --top-soft: #9aa2e6;
  --surface: #1c1c21;
  --ink: #f2f2f5;
  --ink-soft: #a9abb8;
  --line: #34343c;
  --link: #9fb2ff;
  --focus: #ffc72c;
  --water: #121215;
  --land-tx: #2b2b31;
  --land-tx-hover: #36363d;
  --land-other: #1f1f24;
  --county: #3e3e46;
  --border-tx: #d4d7ee;
  --map-plain: #121215;
  --sign-green: #0f7650;
  --sign-brown: #7a4a2f;
  --sign-blue: #2a5fae;
  --sign-marker-edge: #57574f;
  --zone: rgb(255 199 44 / 0.2);
  --zone-edge: #ffc72c;
  --zone-solid: #4a4a6a;
  --disabled-edge: #111114;
  --pin-ring: #121215;
  --star: #ffc72c;
  --star-ring: #121215;
  --glass: rgb(26 26 32 / 0.9);
  --glass-edge: rgb(255 255 255 / 0.08);
  --lb-bg: rgb(255 255 255 / 0.04);
  color-scheme: dark;
}

/* Satellite map: NASA imagery with no county or state lines. Texas keeps a
   faint outline, the area outside play is shaded a little, and answers are
   drawn in white and gold so they read on any terrain. */
:root[data-mapstyle="satellite"] {
  --water: #0a1a3f;
  --map-plain: #0a1a3f;
  --border-tx: rgb(255 255 255 / 0.6);
  --zone: rgb(255 255 255 / 0.22);
  --zone-edge: #ffffff;
  --zone-solid: #ffffff;
  --star: #ffc72c;
  --star-ring: #161c52;
}
:root[data-mapstyle="satellite"] :is(.land-other, .neighbor-lines, .county, .state, .state-lines, .us-outline) { display: none; }
:root:not([data-mapstyle="satellite"]) :is(.imagery, .outside, .inset-label) { display: none; }
.outside { fill: rgb(0 0 0 / 0.28); fill-rule: evenodd; pointer-events: none; }
.fade-stop { stop-color: var(--water); }
.imagery-fade { pointer-events: none; }
.inset-label {
  fill: rgb(255 255 255 / 0.85); font: 600 10px/1 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase;
  text-anchor: middle; paint-order: stroke; stroke: rgb(0 0 0 / 0.45); stroke-width: 2.5px; pointer-events: none;
}
:root[data-mapstyle="satellite"] .tx-outline { stroke-width: 1.2; }
:root[data-mapstyle="satellite"] .zone-band { opacity: 0.55; }
:root[data-mapstyle="satellite"] .link { stroke: #ffffff; opacity: 0.9; }
:root[data-mapstyle="satellite"] .map-wrap:has(#map:focus-visible)::after {
  background:
    linear-gradient(#fff, #fff) center / 2px 100% no-repeat,
    linear-gradient(#fff, #fff) center / 100% 2px no-repeat;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 15px/1.45 var(--font-ui);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.app {
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr); /* a too-wide top bar clips instead of widening the page */
}

/* ── Top bar ─────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 9px;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
  color: var(--top-ink);
  position: relative;
  z-index: 5;
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.22);
}
.topbar :focus-visible { outline-color: var(--accent); }
.topbar-start { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-word {
  font-family: var(--font-display); font-size: 1.45rem; letter-spacing: 0.01em; line-height: 1;
  color: var(--top-ink); text-decoration: none; white-space: nowrap;
}
.brand-tap { color: var(--logo-tap); }
.brand-word { display: inline-flex; align-items: center; gap: 0.28em; }
/* The logo: a gold map pin with the Lone Star in it */
.brand-mark { width: 0.95em; height: 1.14em; flex: none; overflow: visible; }
.brand-pin { fill: var(--accent); stroke: #fff; stroke-width: 2.4; stroke-linejoin: round; }
.brand-star { fill: var(--ground); }
.topbar-end { display: flex; align-items: center; gap: 12px; flex: none; }
.about-link {
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 50%; background: rgb(255 255 255 / 0.12);
  font-family: var(--font-display); font-size: 1.1rem; text-decoration: none; color: var(--top-ink);
}
.about-link:hover { background: rgb(255 255 255 / 0.22); }

/* Look switch: Classic or New, like a light/dark toggle. Computers show it in
   the top bar; phones find it in the Me sheet. */
.look-switch { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: rgb(255 255 255 / 0.1); }
.look-switch button {
  appearance: none; border: 0; background: none; cursor: pointer; position: relative;
  padding: 4px 11px; border-radius: 999px; color: var(--top-soft); font: 700 0.8rem/1.2 var(--font-ui);
  transition: background 150ms, color 150ms;
}
.look-switch button:hover { color: var(--top-ink); }
.look-switch button[aria-pressed="true"] { background: var(--top-ink); color: var(--ground); }
/* A dot on "New" until it's been tried */
.look-switch button.is-fresh::after { content: ""; position: absolute; top: 2px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: #ff4747; box-shadow: 0 0 0 2px var(--ground); }
@media (max-width: 760px) { .look-switch { display: none; } }

/* Game tabs: each is a real link to that game's page, switched in place by app.js */
.tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.1);
  min-width: 0;
}
.tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 8px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--top-soft);
  min-width: 0;
  transition: background 150ms, color 150ms;
}
.tab:hover { color: var(--top-ink); }
.tab.is-active { background: var(--top-ink); color: #18227a; }
.tab-mark { width: 22px; height: 22px; flex: none; }
.tab-mark path { fill: currentColor; }
.tab-name { font-weight: 700; font-size: 1rem; }
.tab-status {
  white-space: nowrap;
  font-size: 0.7rem; font-weight: 800; font-variant-numeric: tabular-nums;
  padding: 2px 6px; border-radius: 999px;
  background: var(--band-good); color: var(--sign-ink);
}
.tab:not(.is-active) .tab-status { background: rgb(255 255 255 / 0.18); color: var(--top-ink); }
.running { display: flex; align-items: baseline; gap: 6px; padding: 3px 12px 4px; border-radius: 999px; background: rgb(255 255 255 / 0.1); line-height: 1.05; }
.running-label { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--top-soft); }
.running-value { font-family: var(--font-display); font-size: 1.4rem; color: var(--accent); font-variant-numeric: tabular-nums; }

/* ── Progress: five chips floating over the map ───────── */
.markers {
  position: absolute; z-index: 3;
  top: 10px; left: max(10px, env(safe-area-inset-left, 0px));
  list-style: none; margin: 0; padding: 4px;
  display: flex; gap: 4px;
  border-radius: 999px;
  background: var(--chip-glass);
  -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.25);
}
.chip {
  min-width: 36px; height: 28px; padding: 0 8px;
  display: grid; place-items: center;
  border-radius: 999px;
  font: 800 0.78rem/1 var(--font-ui); font-variant-numeric: tabular-nums;
  color: rgb(255 255 255 / 0.72);
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.2);
  transition: background 250ms, color 250ms, box-shadow 250ms;
}
.chip.is-bonus:not(.is-done) { color: var(--accent); }
.chip.is-current { color: #fff; box-shadow: inset 0 0 0 2px var(--accent); animation: chip-pulse 1.8s ease-in-out infinite; }
@keyframes chip-pulse { 50% { box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 4px rgb(255 199 44 / 0.28); } }
.chip.is-done { color: #fff; box-shadow: none; animation: chip-in 420ms cubic-bezier(.3, 1.6, .5, 1); }
@keyframes chip-in { from { transform: scale(0.5); } }
.band-star { background: var(--band-star); }
.band-good { background: var(--band-good); }
.band-ok { background: var(--band-ok); }
.band-meh { background: var(--band-meh); }
.band-bad { background: var(--band-bad); }
/* Yellow is too light for white numbers. */
.chip.band-ok, .recap-dot.band-ok { color: var(--band-ok-ink); }

/* ── Stage: the map fills it; card, chips and buttons float ─ */
.stage {
  position: relative;
  min-height: 0;
  overflow: hidden;
}
.map-wrap {
  position: absolute;
  inset: 0;
  background: var(--water);
  overflow: hidden;
}
.map-wrap[data-map="usa"] { background: var(--map-plain); }
.map-wrap { transition: opacity 160ms ease; }
.map-wrap.is-switching { opacity: 0.25; }
#map:focus { outline: none; }
#map:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
/* Keyboard crosshair: Enter drops the pin here */
.map-wrap:has(#map:focus-visible)::after {
  content: "";
  position: absolute;
  left: var(--view-x, 50%); top: var(--view-y, 50%);
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  pointer-events: none;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 2px 100% no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 100% 2px no-repeat;
  opacity: 0.8;
}
.state { fill: var(--land-tx); stroke: none; transition: fill 120ms; }
#map.is-guessing .state:hover { fill: var(--land-tx-hover); }
.state-lines { fill: none; stroke: var(--county); stroke-width: 0.9; vector-effect: non-scaling-stroke; }
.us-outline { fill: none; stroke: var(--border-tx); stroke-width: 1.3; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
#map { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#map.is-guessing { cursor: crosshair; }

.land-other { fill: var(--land-other); stroke: var(--land-other); stroke-width: 2; vector-effect: non-scaling-stroke; }
.neighbor-lines { fill: none; stroke: var(--county); stroke-width: 0.8; vector-effect: non-scaling-stroke; }
.county { fill: var(--land-tx); stroke: var(--county); stroke-width: 0.6; vector-effect: non-scaling-stroke; transition: fill 120ms; }
#map.is-guessing .county:hover { fill: var(--land-tx-hover); }
.tx-outline { fill: none; stroke: var(--border-tx); stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

.zone { fill: var(--zone); stroke: var(--zone-edge); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
path.zone.is-path, path.zone.is-path-edge { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: none; }
path.zone.is-path-edge { stroke: var(--zone-edge); }
path.zone.is-path { stroke: var(--zone-solid); }
.zone-band { opacity: 0.7; }
.zone-band.is-new { animation: band-in 500ms ease-out; }
@keyframes band-in { from { opacity: 0; } to { opacity: 0.7; } }
.zone.is-new { animation: zone-in 500ms ease-out; }
@keyframes zone-in { from { opacity: 0; } to { opacity: 1; } }
.link { fill: none; stroke: var(--ink-soft); stroke-width: 1.6; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.pin-body { fill: var(--pin); stroke: var(--pin-ring); stroke-width: 1.5; }
.pin-label { fill: #fff; font: 800 10px/1 var(--font-sign); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.pin.is-pending .pin-body { animation: drop 260ms cubic-bezier(.3, 1.4, .6, 1); transform-origin: 0 0; }
.star-body { fill: var(--star); stroke: var(--star-ring); stroke-width: 1.5; stroke-linejoin: round; }
.star.is-new .star-body { animation: pop 420ms cubic-bezier(.3, 1.6, .5, 1); transform-origin: 0 0; }
@keyframes drop { from { transform: translateY(-14px) scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }

.zoom-controls {
  position: absolute; z-index: 3;
  top: 10px;
  right: max(10px, env(safe-area-inset-right, 0px));
  display: grid;
  justify-items: end;
  gap: 8px;
}
.zoom-group, .sound-toggle {
  background: var(--glass);
  -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.22), inset 0 0 0 1px var(--glass-edge);
}
.zoom-group { display: grid; border-radius: 14px; overflow: hidden; }
.zoom-group button + button { border-top: 1px solid var(--line); }
.zoom-controls button {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 120ms;
}
.zoom-group button:hover { background: rgb(0 0 0 / 0.05); }
.zoom-group button:active { background: rgb(0 0 0 / 0.1); }
.zoom-controls .sound-toggle { border-radius: 50%; background: var(--glass); color: var(--ink); }
.zoom-controls svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Panel: a frosted card floating over the bottom of the map ─ */
.panel {
  position: absolute; z-index: 4;
  left: max(8px, env(safe-area-inset-left, 0px));
  right: max(8px, env(safe-area-inset-right, 0px));
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  max-height: min(60%, 540px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 24px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: var(--shadow-card), inset 0 0 0 1px var(--glass-edge);
  padding: 16px 16px 0;
  transition: max-height 340ms cubic-bezier(.2, .8, .2, 1);
}
/* Results take most of the screen; "Map" folds them down to the score. */
.panel[data-phase="intro"] { max-height: min(80%, 600px); }
.panel[data-phase="done"] { max-height: calc(100% - 56px); }
.panel.is-collapsed { max-height: 128px; overflow: hidden; }
.panel.is-collapsed .panel-inner > :not(.done-head, .hero), .panel.is-collapsed .final-verdict { display: none; }
/* While results fill the screen, the map buttons step aside. */
.zoom-controls { transition: opacity 200ms; }
.stage:has(.panel[data-phase="done"]:not(.is-collapsed)) .zoom-controls { opacity: 0; pointer-events: none; }
@media (min-width: 860px) { .stage:has(.panel[data-phase="done"]) .zoom-controls { opacity: 1; pointer-events: auto; } }
.panel-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: 34rem; margin-inline: auto; padding-bottom: 16px; }
/* Primary action stays on screen while longer write-ups scroll beneath it. */
.actions {
  position: sticky;
  bottom: 0;
  padding-block: 8px 16px;
  margin-bottom: -16px;
  background: linear-gradient(to bottom, transparent, var(--glass) 10px);
}

/* "Counties   3 of 5   Double points" */
.eyebrow {
  margin: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;
  font-size: 0.9rem; font-weight: 500; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.eyebrow .bonus {
  padding: 2px 9px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 0.8rem; font-weight: 700;
}

.sign {
  --sign-bg: var(--sign-green);
  justify-self: start;
  max-width: 100%;
  background: var(--sign-bg);
  color: var(--sign-ink);
  border-radius: 12px;
  padding: 4px;
  box-shadow: 0 2px 0 rgb(0 0 0 / 0.18);
  font-family: var(--font-sign);
}
.sign.is-brown { --sign-bg: var(--sign-brown); }
.sign.is-blue { --sign-bg: var(--sign-blue); }
/* Great Americans and Texas legends: a stage-blue plaque with a gold rule. */
.sign.is-legend { --sign-bg: #1b2470; color: #ffffff; box-shadow: 0 0 0 1px #ffc72c inset, 0 2px 0 rgb(0 0 0 / 0.25); }
.sign.is-legend .sign-inner { border-color: #ffc72c; }
.sign.is-legend .sign-kicker { color: #ffc72c; opacity: 1; }
.sign.is-white { --sign-bg: var(--sign-white); color: var(--sign-white-ink); box-shadow: 0 0 0 1px var(--line), 0 2px 0 rgb(0 0 0 / 0.18); }
.sign.is-marker { --sign-bg: var(--sign-marker); color: var(--sign-marker-ink); border-radius: 6px; box-shadow: 0 0 0 1px var(--sign-marker-edge), 0 2px 0 rgb(0 0 0 / 0.25); }
.sign.is-marker .sign-inner { border-radius: 3px; border-style: double; border-width: 4px; }
.sign.is-marker .sign-kicker { text-transform: none; letter-spacing: 0.08em; }
.sign.is-long .sign-name { font-size: clamp(1.15rem, 4.6vw, 1.45rem); line-height: 1.2; }
.sign.is-small.is-long .sign-name { font-size: 1.05rem; }
.sign.is-chip { padding: 2px; border-radius: 6px; justify-self: auto; }
.sign.is-chip .sign-inner { padding: 2px 7px 1px; border-width: 1.5px; border-radius: 4px; font-size: 0.72rem; font-weight: 800; white-space: nowrap; }
.sign.is-marker.is-chip .sign-inner { border-width: 3px; }
.sign-inner {
  border: 2px solid currentColor;
  border-radius: 9px;
  padding: 7px 18px 9px;
  display: grid;
  gap: 1px;
}
.sign-kicker { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.92; }
.sign-name { font-size: clamp(1.55rem, 6.5vw, 2.15rem); font-weight: 800; line-height: 1.08; text-wrap: balance; overflow-wrap: anywhere; }
.sign.is-small .sign-inner { padding: 5px 14px 7px; }
.sign.is-small .sign-name { font-size: 1.2rem; }

.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.hint { margin: 0; color: var(--ink-soft); font-size: 0.92rem; }
/* Touch screens and mice get their own instructions. */
.for-mouse { display: none; }
@media (hover: hover) and (pointer: fine) {
  .for-touch { display: none; }
  .for-mouse { display: inline; }
}

/* Gold game-show button that presses in */
.btn {
  appearance: none;
  border: 0;
  border-radius: 16px;
  padding: 13px 22px 11px;
  margin-bottom: 4px;
  font-family: var(--font-display);
  font-size: 1.28rem;
  letter-spacing: 0.02em;
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 4px 0 var(--accent-edge), 0 8px 18px rgb(217 154 0 / 0.25);
  cursor: pointer;
  transition: transform 70ms, box-shadow 70ms, background 150ms;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--accent-edge); }
.btn:disabled { background: var(--line); color: var(--ink-soft); box-shadow: 0 4px 0 var(--disabled-edge); transform: none; cursor: not-allowed; }
/* Secondary action: an outlined button */
.btn-ghost {
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: 700 0.98rem/1.2 var(--font-ui);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 150ms, background 150ms;
}
.btn-ghost:hover { border-color: var(--accent); background: rgb(255 199 44 / 0.08); }
.btn.is-wide { width: 100%; }

.result { display: flex; flex-wrap: wrap; gap: 6px 28px; align-items: end; }
.stat { display: grid; gap: 1px; }
.stat-label { font-size: 0.85rem; font-weight: 500; color: var(--ink-soft); }
.stat-value { font-family: var(--font-display); font-size: 1.9rem; line-height: 1.05; font-variant-numeric: tabular-nums; }
.stat-sub { font-family: var(--font-ui); font-size: 0.8rem; font-weight: 500; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.stat-value .stat-sub { margin-left: 6px; }

.answer { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.25; }
.answer span { display: block; font-size: 0.85rem; font-weight: 500; color: var(--ink-soft); }
.stat.is-inside .stat-value { color: var(--band-good); }
.blurb { margin: 0; font-size: 1rem; line-height: 1.55; max-width: 65ch; }
.blurb.is-missing { color: var(--ink-soft); font-style: italic; }
.place-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 0.82rem; color: var(--ink-soft); }
.place-meta a { text-underline-offset: 2px; }

/* Intro */
.intro-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.9rem, 7.5vw, 2.4rem); line-height: 1.02; letter-spacing: 0.005em; text-wrap: balance; }
.intro-copy { margin: 0; font-size: 1rem; line-height: 1.5; max-width: 60ch; }
.themes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.themes li { display: flex; align-items: center; gap: 7px; font-size: 0.86rem; font-weight: 500; white-space: nowrap; }

/* Results: score, then the leaderboard, then sharing and the details */
.panel-inner.is-done { gap: 14px; }
.done-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-toggle {
  appearance: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 12px 6px 9px; border-radius: 999px;
  background: var(--line); color: var(--ink); font: 700 0.84rem/1 var(--font-ui);
}
.card-toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 250ms; }
.panel.is-collapsed .card-toggle svg { transform: rotate(180deg); }
.hero { display: grid; gap: 4px; }
.final { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.final-score { font-family: var(--font-display); font-size: clamp(3.4rem, 15vw, 4.4rem); line-height: 0.95; font-variant-numeric: tabular-nums; }
.final-max { font-size: 1.1rem; font-weight: 600; color: var(--ink-soft); }
.final-verdict { margin: 0; font-size: 1rem; font-weight: 500; color: var(--ink-soft); }
.share-row .btn { margin-bottom: 4px; }
.toast { margin: -8px 0 0; text-align: center; font-size: 0.88rem; font-weight: 600; color: var(--band-good); }
.toast:empty { display: none; }
.share-preview {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1.5px dashed var(--line);
  font: 500 0.95rem/1.5 var(--font-ui);
  white-space: pre-wrap;
  user-select: all;
}
.answers { border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); }
.answers summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; font-weight: 700;
}
.answers summary::-webkit-details-marker { display: none; }
.answers summary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms; }
.answers[open] summary svg { transform: rotate(180deg); }
.answers .recap { padding: 0 14px 6px; }
.recap { list-style: none; margin: 0; padding: 0; display: grid; }
.recap li {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.recap-dot { width: 1.6rem; height: 1.6rem; border-radius: 8px; display: grid; place-items: center; color: var(--sign-ink); font-family: var(--font-display); font-size: 0.95rem; }
.recap-name { font-weight: 500; min-width: 0; overflow-wrap: anywhere; line-height: 1.25; }
.recap-name small { display: block; font-size: 0.75rem; font-weight: 500; color: var(--ink-soft); }
.recap-mi { color: var(--ink-soft); font-size: 0.88rem; }
.recap-pts { font-family: var(--font-display); font-size: 1.1rem; min-width: 3ch; text-align: right; }
.done-foot { display: grid; gap: 10px; justify-items: center; }
.countdown { margin: 0; font-size: 0.9rem; font-weight: 500; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* Phones: brand, both tabs, score and help share one row. Tab outlines go, and
   the active tab drops its progress (the score tiles already show it). */
@media (max-width: 500px) {
  .running-label { display: none; }
  .running { padding: 3px 10px 4px; }
  .tab-mark { display: none; }
  .tab { padding: 5px 10px; }
  .tab.is-active .tab-status, .tab-score { display: none; }
  .topbar, .topbar-start, .topbar-end { gap: 8px; }
  .about-link { width: 28px; height: 28px; }
  .brand-word { font-size: 1.3rem; }
  .running-value { font-size: 1.45rem; }
}
@media (max-width: 400px) {
  .topbar, .topbar-start { gap: 6px; }
}
@media (max-width: 370px) {
  .tab { padding: 5px 8px; }
  .brand-word { font-size: 1.15rem; }
}
/* The smallest phones keep the name and drop the pin */
@media (max-width: 340px) {
  .brand-mark { display: none; }
}

/* Wide screens: the card becomes a floating sidebar (app.js keeps the map
   fitted to the space beside it). */
@media (min-width: 860px) {
  .panel, .panel[data-phase="done"] { left: auto; top: 12px; right: 12px; bottom: auto; width: 412px; max-height: calc(100% - 24px); padding: 20px 20px 0; }
  .zoom-controls { right: 448px; }
  .card-toggle { display: none; }
  .markers { top: 12px; left: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── About and 404 pages ─────────────────────────────────── */
body.page-doc { overflow: auto; height: auto; background: var(--surface); }
.doc-header {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding-block: 14px;
  padding-left: var(--gutter-l); padding-right: var(--gutter-r);
  background: var(--ground);
}
.doc-header .brand-word { margin-right: auto; }
.doc-back {
  font-weight: 700; color: var(--top-ink); text-decoration: none;
  padding: 6px 12px; border-radius: 999px; background: rgb(255 255 255 / 0.12);
}
.doc-back:hover { background: rgb(255 255 255 / 0.22); }
.doc {
  max-width: 44rem; margin-inline: auto;
  padding-block: 8px 64px;
  padding-left: var(--gutter-l); padding-right: var(--gutter-r);
  font-size: 1.05rem; line-height: 1.6;
}
.doc h1, .doc h2, .doc h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.1; letter-spacing: 0.005em; text-wrap: balance; }
.doc h1 { font-size: clamp(2.2rem, 8vw, 2.9rem); margin: 24px 0 8px; }
.doc h2 { font-size: 1.5rem; margin: 36px 0 8px; }
.doc h3 { font-size: 1.15rem; margin: 20px 0 4px; }
.doc p { margin: 0 0 12px; max-width: 65ch; }
.doc-lede { font-size: 1.15rem; }
.doc a { color: var(--link); text-underline-offset: 2px; }
.doc-games dt { font-family: var(--font-display); font-size: 1.1rem; margin-top: 12px; }
.doc-games dd { margin: 2px 0 0; }
.doc-bands { list-style: none; padding: 0; margin: 12px 0 16px; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 0.9rem; font-weight: 500; }
.doc-bands li { display: flex; align-items: center; gap: 8px; }
.doc-bands b { width: 22px; height: 10px; border-radius: 4px; display: inline-block; }
.doc-email { user-select: all; font-weight: 700; }

/* ── Level badge (top bar) ───────────────────────────────── */
.me-button {
  --progress: 0%;
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; flex: none;
  display: grid; place-items: center;
  background: conic-gradient(var(--accent) var(--progress), rgb(255 255 255 / 0.2) 0);
}
.me-level {
  width: 25px; height: 25px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ground); color: var(--top-ink); font: 400 0.95rem/1 var(--font-display);
}

/* ── Sound toggle (map controls) ─────────────────────────── */
.sound-toggle svg { width: 17px; height: 17px; }
.sound-toggle .spk { fill: currentColor; stroke: none; }
.sound-toggle .waves, .sound-toggle .cross { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.sound-toggle .cross, .sound-toggle.is-muted .waves { display: none; }
.sound-toggle.is-muted .cross { display: inline; }
.sound-toggle.is-muted { color: var(--ink-soft); }

/* ── Which look is better? (results card) and the look row (Me sheet) ── */
.look-vote { display: grid; gap: 10px; padding: 14px; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line); text-align: center; }
.look-vote b { display: block; font-weight: 700; }
.look-vote p { margin: 0; }
.look-vote small { display: block; margin-top: 2px; color: var(--ink-soft); font-size: 0.82rem; }
.look-vote-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.look-vote-row .btn-ghost[aria-pressed="true"] { border-color: var(--ink); }
.look-vote .lb-link { margin: 0; }
.look-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.look-row > span { font-weight: 700; }
.look-row small { display: block; font-weight: 500; font-size: 0.78rem; color: var(--ink-soft); }

/* ── Panel steps fade in; switching days fades out first ── */
.panel-inner { animation: panel-in 220ms ease-out; }
@keyframes panel-in { from { opacity: 0; transform: translateY(6px); } }
.panel.is-changing .panel-inner { opacity: 0; transform: translateY(6px); transition: opacity 150ms, transform 150ms; }

/* ── Day picker ──────────────────────────────────────────── */
.day-pick-wrap { display: inline-flex; }
.day-pick {
  appearance: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px 3px 11px; border-radius: 999px;
  background: var(--line); color: var(--ink); font: inherit; font-weight: 600;
}
.day-pick:hover { background: color-mix(in srgb, var(--line) 70%, var(--accent)); }
.day-pick .caret { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 180ms; }
.day-pick[aria-expanded="true"] .caret { transform: rotate(180deg); }
.day-menu {
  position: fixed; z-index: 40; width: min(300px, calc(100vw - 32px));
  max-height: min(420px, 60vh); overflow-y: auto; overscroll-behavior: contain;
  display: grid; gap: 2px; padding: 6px;
  background: var(--surface); color: var(--ink); border-radius: 16px;
  box-shadow: 0 0 0 1px var(--line), 0 16px 40px rgb(0 0 0 / 0.25);
  opacity: 0; transform: translateY(-6px) scale(0.98); transform-origin: top left;
  transition: opacity 160ms ease, transform 200ms cubic-bezier(.2, .8, .2, 1);
}
.day-menu.is-above { transform-origin: bottom left; transform: translateY(6px) scale(0.98); }
.day-menu.is-open { opacity: 1; transform: none; }
.day-option {
  appearance: none; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; text-align: left;
  display: grid; grid-template-columns: minmax(0, 1fr) auto 3.4rem; align-items: center; gap: 10px;
  padding: 10px 10px; border-radius: 11px;
}
.day-option:hover, .day-option:focus-visible { background: var(--line); outline: none; }
.day-option.is-current { background: rgb(255 199 44 / 0.22); }
.day-name { font-weight: 600; }
.day-no { font-size: 0.8rem; color: var(--ink-soft); }
.day-score { justify-self: end; font: 400 1.05rem/1 var(--font-display); }
.day-progress { justify-self: end; font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); }
.day-play { justify-self: end; font-size: 0.85rem; font-weight: 700; color: var(--link); }

/* ── Level on the final screen ───────────────────────────── */
.level-badge {
  width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); font: 400 1.05rem/1 var(--font-display);
  box-shadow: 0 3px 0 var(--accent-edge);
}
.level-line {
  appearance: none; border: 0; cursor: pointer; font: inherit; color: inherit; text-align: left;
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 12px; border-radius: var(--radius); background: var(--line);
}
.level-text { display: grid; gap: 4px; flex: 1; min-width: 0; }
.level-text b { font-weight: 700; }
.level-text small { font-size: 0.78rem; color: var(--ink-soft); }
.level-bar { display: block; height: 8px; border-radius: 999px; background: rgb(0 0 0 / 0.08); overflow: hidden; }
.level-bar span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width 600ms ease; }
.level-up {
  display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--radius);
  background: rgb(255 199 44 / 0.25); animation: pop-in 420ms cubic-bezier(.3, 1.5, .5, 1);
}
@keyframes pop-in { from { transform: scale(0.9); opacity: 0; } }
.row .btn-quiet { margin-bottom: 5px; }

/* ── The Me sheet ────────────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sheet-layer { position: fixed; inset: 0; z-index: 50; }
.sheet-layer[hidden] { display: none; }
.sheet-backdrop { position: absolute; inset: 0; background: rgb(8 12 40 / 0.55); opacity: 0; transition: opacity 240ms; }
.sheet-layer.is-open .sheet-backdrop { opacity: 1; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 90%;
  display: grid; grid-template-rows: auto auto auto minmax(0, 1fr);
  background: var(--surface); color: var(--ink);
  border-radius: 22px 22px 0 0; box-shadow: 0 -10px 40px rgb(0 0 0 / 0.3);
  padding: 14px var(--gutter-r) 0 var(--gutter-l);
  transform: translateY(100%); transition: transform 280ms cubic-bezier(.2, .8, .2, 1);
}
.sheet-layer.is-open .sheet { transform: none; }
@media (min-width: 720px) {
  .sheet { left: 50%; right: auto; bottom: auto; top: 50%; width: 480px; max-height: 86%; border-radius: 22px;
    transform: translate(-50%, -46%) scale(0.97); opacity: 0; transition: transform 240ms cubic-bezier(.2, .8, .2, 1), opacity 200ms; padding: 16px 20px 0; }
  .sheet-layer.is-open .sheet { transform: translate(-50%, -50%); opacity: 1; }
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sheet-close {
  width: 34px; height: 34px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--line); color: var(--ink);
}
.sheet-close svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--line); }
.seg button {
  appearance: none; border: 0; background: none; cursor: pointer; color: var(--ink-soft);
  padding: 7px 14px; border-radius: 999px; font: inherit; font-weight: 600;
  transition: background 150ms, color 150ms;
}
.seg button:is([aria-selected="true"], [aria-pressed="true"]) { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgb(0 0 0 / 0.15); }
.seg-games { justify-self: start; margin-top: 12px; }
.seg-scope { margin-bottom: 6px; }
.sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: 14px 0 calc(24px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 12px; align-content: start; }
.sheet-body h3 { margin: 8px 0 0; font: 400 1.15rem/1.1 var(--font-display); }
.sheet-body h3 small { font: 500 0.78rem var(--font-ui); color: var(--ink-soft); margin-left: 6px; }
.me-card { display: grid; gap: 8px; padding: 14px; border-radius: var(--radius); background: rgb(255 199 44 / 0.16); }
.me-card { grid-template-columns: auto 1fr; align-items: center; }
.me-xp { grid-column: 1 / -1; font-size: 0.78rem; color: var(--ink-soft); }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tile { display: grid; justify-items: center; gap: 2px; padding: 10px 4px; border-radius: 12px; background: var(--line); text-align: center; }
.tile-value { font: 400 1.6rem/1 var(--font-display); }
.tile-label { font-size: 0.75rem; font-weight: 600; color: var(--ink-soft); }
.tile small { font-size: 0.68rem; color: var(--ink-soft); }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 130px; padding-top: 6px; }
.bar-col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; }
.bar { width: 100%; max-width: 30px; border-radius: 6px 6px 2px 2px; animation: grow 500ms cubic-bezier(.2, .8, .2, 1) both; transform-origin: bottom; }
@keyframes grow { from { transform: scaleY(0); } }
.bar-num { font-size: 0.62rem; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.bar-day { font-size: 0.6rem; color: var(--ink-soft); white-space: nowrap; }
.spread { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.spread li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: center; gap: 10px; font-size: 0.85rem; }
.themes-avg li { grid-template-columns: 8rem minmax(0, 1fr); }
.themes-avg .sign.is-chip { justify-self: start; }
.spread-label { color: var(--ink-soft); font-weight: 500; }
.spread-bar span {
  display: block; min-width: 1.6rem; padding: 3px 7px; border-radius: 6px; text-align: right;
  background: var(--ink-soft); color: #fff; font-weight: 700; font-size: 0.78rem; font-variant-numeric: tabular-nums;
  animation: grow-x 500ms cubic-bezier(.2, .8, .2, 1) both; transform-origin: left;
}
@keyframes grow-x { from { transform: scaleX(0); } }
/* ── Leaderboard (results card and the Me sheet) ─────────── */
.lb { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px; border-radius: 20px; background: var(--lb-bg); box-shadow: inset 0 0 0 1px var(--line); }
.lb-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lb-title { margin: 0; font: 400 1.3rem/1 var(--font-display); letter-spacing: 0.005em; }
.lb-live { display: inline-flex; align-items: center; gap: 5px; font: 800 0.66rem/1 var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--band-good); }
.lb-live[hidden] { display: none; }
.lb-live i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: live 1.8s ease-in-out infinite; }
@keyframes live { 50% { opacity: 0.35; transform: scale(0.8); } }
.lb-scope { margin-left: auto; }
.lb-scope button { padding: 6px 12px; font-size: 0.84rem; }
@media (max-width: 420px) {
  .lb-title { font-size: 1.14rem; }
  .lb-scope button { padding: 5px 9px; font-size: 0.8rem; }
}
.lb-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }

/* Your rank, front and center */
.lb-you {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 12px 16px; border-radius: 16px;
  background: linear-gradient(135deg, #18227a, #26319a); color: #fff;
  box-shadow: 0 8px 20px rgb(24 34 122 / 0.25);
  animation: pop-in 420ms cubic-bezier(.3, 1.4, .5, 1);
}
.lb-you-rank { display: inline-flex; align-items: center; gap: 4px; font: 400 2.1rem/1 var(--font-display); color: var(--accent); font-variant-numeric: tabular-nums; }
.lb-you-text { display: grid; gap: 2px; min-width: 0; }
.lb-you-text b { font-weight: 700; font-size: 0.98rem; line-height: 1.2; }
.lb-you-text small { font-size: 0.8rem; color: #b6bdf5; font-variant-numeric: tabular-nums; }
.lb-pct { padding: 6px 10px; border-radius: 999px; background: rgb(255 255 255 / 0.14); font: 800 0.78rem/1 var(--font-ui); white-space: nowrap; }
.lb-you.is-first { box-shadow: inset 0 0 0 2px var(--accent), 0 8px 24px rgb(255 199 44 / 0.3); }
.lb-crown { width: 24px; height: 24px; fill: var(--accent); }
.lb-you.is-pending .lb-you-rank { animation: live 1.2s ease-in-out infinite; }

/* The list: medals for the top three, you highlighted */
.lb-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.lb-row {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 8px 8px; border-radius: 12px; font-variant-numeric: tabular-nums;
}
.lb-row + .lb-row { box-shadow: 0 -1px 0 var(--line); }
.lb-rank { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; font: 800 0.84rem/1 var(--font-ui); color: var(--ink-soft); }
.lb-row.is-1 .lb-rank { background: linear-gradient(135deg, #ffe07a, #e0a400); color: #3d2a00; box-shadow: 0 2px 6px rgb(224 164 0 / 0.4); }
.lb-row.is-2 .lb-rank { background: linear-gradient(135deg, #f3f5f9, #b5bcc8); color: #2a2f3a; }
.lb-row.is-3 .lb-rank { background: linear-gradient(135deg, #f3c194, #c47a3d); color: #3b1f08; }
.lb-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-name em {
  margin-left: 7px; padding: 2px 6px; border-radius: 999px; vertical-align: 2px;
  background: var(--accent); color: var(--accent-ink); font: 800 0.6rem/1.3 var(--font-ui); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase;
}
.lb-name small { display: block; margin-top: 1px; font-size: 0.72rem; font-weight: 500; color: var(--ink-soft); }
.lb-pts { font: 400 1.15rem/1 var(--font-display); }
.lb-row.is-me { background: rgb(255 199 44 / 0.22); box-shadow: none; }
.lb-row.is-me + .lb-row { box-shadow: none; }
.lb-gap { display: flex; justify-content: center; gap: 4px; padding: 6px; }
.lb-gap i { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-soft); opacity: 0.45; }
.lb-list.is-new .lb-row { animation: row-in 380ms cubic-bezier(.2, .8, .2, 1) both; }
.lb-list.is-new .lb-row:nth-child(2) { animation-delay: 35ms; }
.lb-list.is-new .lb-row:nth-child(3) { animation-delay: 70ms; }
.lb-list.is-new .lb-row:nth-child(4) { animation-delay: 105ms; }
.lb-list.is-new .lb-row:nth-child(5) { animation-delay: 140ms; }
.lb-list.is-new .lb-row:nth-child(6) { animation-delay: 175ms; }
.lb-list.is-new .lb-row:nth-child(7) { animation-delay: 210ms; }
.lb-list.is-new .lb-row:nth-child(8) { animation-delay: 245ms; }
.lb-list.is-new .lb-row:nth-child(n+9) { animation-delay: 280ms; }
@keyframes row-in { from { opacity: 0; transform: translateY(8px); } }

/* Your name */
.lb-as { margin: 0; font-size: 0.86rem; color: var(--ink-soft); text-align: center; }
.lb-as b { color: var(--ink); }
.lb-link { appearance: none; border: 0; background: none; padding: 0; margin-left: 6px; color: var(--link); font: inherit; font-weight: 700; cursor: pointer; }
.lb-nick { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 12px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.lb-nick label { font-weight: 700; font-size: 0.92rem; }
.lb-nick-row { display: flex; gap: 8px; }
.lb-nick input {
  flex: 1; width: 0; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--line);
  background: var(--surface); color: var(--ink); font: inherit;
}
.lb-nick input:focus { border-color: var(--accent); outline: none; }
.lb-nick button {
  appearance: none; border: 0; border-radius: 10px; padding: 10px 16px; cursor: pointer;
  background: var(--accent); color: var(--accent-ink); font: 400 1.05rem/1 var(--font-display); box-shadow: 0 3px 0 var(--accent-edge);
}
.lb-nick button:disabled { opacity: 0.6; }
.lb-nick-msg { font-size: 0.78rem; color: var(--ink-soft); min-height: 1em; }
.lb-empty { margin: 0; padding: 8px; text-align: center; color: var(--ink-soft); font-size: 0.92rem; }

/* Loading */
.lb-you.is-skeleton { height: 60px; background: var(--line); box-shadow: none; animation: none; }
.lb-you.is-skeleton span { display: none; }
.lb-list.is-skeleton li {
  height: 40px; margin-top: 6px; border-radius: 12px;
  background: linear-gradient(90deg, var(--line) 0%, color-mix(in srgb, var(--line) 45%, transparent) 50%, var(--line) 100%);
  background-size: 200% 100%; animation: shimmer 1.2s linear infinite;
}
.lb-list.is-skeleton li span { display: none; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* Locked until you've played */
.lb-locked { display: grid; justify-items: center; gap: 8px; padding: 22px 12px 14px; text-align: center; }
.lb-lock-icon { width: 48px; height: 48px; fill: none; stroke: var(--accent-edge); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.lb-locked b { font: 400 1.3rem/1.15 var(--font-display); max-width: 17em; text-wrap: balance; }
.lb-locked p { margin: 0; color: var(--ink-soft); }
.lb-locked .btn { margin-top: 6px; }
.sheet .empty { margin: 8px 0; color: var(--ink-soft); }
.sheet .fine { margin: 4px 0 0; font-size: 0.75rem; color: var(--ink-soft); }
.btn-quiet { color: var(--ink); }
.sheet-help { font-weight: 600; color: var(--link); }
.sheet-head .seg button { white-space: nowrap; padding: 7px 12px; }

/* Phones: the level badge takes the help button's spot (help moves into the sheet). */
@media (max-width: 500px) {
  .about-link { display: none; }
}
@media (max-width: 370px) {
  .running-label { display: none; }
  .running-value { font-size: 1.3rem; }
  .me-button { width: 30px; height: 30px; }
  .me-level { width: 23px; height: 23px; font-size: 0.85rem; }
}

/* ── First-game walkthrough ──────────────────────────────── */
.coach-layer {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px;
  background: rgb(8 12 40 / 0.6); opacity: 0; transition: opacity 200ms;
}
.coach-layer.is-open { opacity: 1; }
.coach {
  width: min(360px, 100%); display: grid; gap: 14px; padding: 22px 20px 16px; border-radius: 22px;
  background: var(--surface); color: var(--ink); box-shadow: 0 20px 50px rgb(0 0 0 / 0.35);
  transform: translateY(10px) scale(0.97); transition: transform 240ms cubic-bezier(.2, .8, .2, 1);
}
.coach-layer.is-open .coach { transform: none; }
.coach-body { display: grid; justify-items: center; gap: 8px; text-align: center; min-height: 190px; align-content: start; animation: panel-in 220ms ease-out; }
.coach-icon { width: 64px; height: 64px; }
.coach h2 { margin: 4px 0 0; font: 400 1.7rem/1.05 var(--font-display); }
.coach p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }
.coach-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.coach-dots { display: flex; gap: 6px; }
.coach-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: background 150ms, transform 150ms; }
.coach-dots i.is-on { background: var(--accent); transform: scale(1.25); }
.coach .btn { min-width: 120px; }

/* Bigger map buttons on touch screens */
@media (pointer: coarse) {
  .zoom-controls button { width: 42px; height: 42px; }
}