/* Hallmark theme: Furrow (MIT, github.com/hallmark), adapted by hand. See RESKIN.md. */
/* Critique: map game, not a landing page. Floor rules 1, 2, 4, 6, 7 applied; 9 applied to tracking only (game copy in capitals is content, unchanged); 12 to 14 do not apply to a game screen. */
@font-face { font-family: "National Park"; src: url("fonts/NationalPark-Bold.ttf") format("truetype"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/InstrumentSans-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/InstrumentSans-Bold.ttf") format("truetype"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "Red Hat Mono"; src: url("fonts/RedHatMono-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }

:root {
  --sheet: #E9E6E0; /* Neutral 10 */
  --sheet-2: #EFEFE7; /* Neutral 5 */
  --paper-3: #E9E3D9; /* Neutral 15 */
  --ink: #000000; /* Black */
  --ink-2: #53575B; /* Gray 40 */
  --pencil: #C8C0AB; /* Neutral 25 */
  --ink-idle: #53575B; /* Gray 40: Gray 35 is 4.32:1 on paper, fails */
  --pencil-idle: #A9ADAD; /* Gray 20 */
  --accent: #974A07; /* Yellow 35 */
  --accent-fill: #E66A1F; /* Yellow 25, black text only */
  --accent-soft: #FFD61A; /* Yellow 5 */
  --focus: #974A07; /* Yellow 35: Yellow 30 is 2.27:1 on the sea */
  --green: #206B3F; /* Green 35 */
  --sea: #BDC0C0; /* Gray 15, MAP_COLORS.sea */
  --grid: #E9E3D9; /* Neutral 15 */
  --shade: rgb(0 0 0 / 0.45); /* Black */
  --font-display: "National Park", "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-figure: "Red Hat Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --edge: 12px;
  --radius-card: 10px;
  --radius-entry: 14px;
  --radius-key: 6px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur-short: 120ms;
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.08), 0 14px 28px -16px rgb(0 0 0 / 0.28);
  --shadow-lift: 0 1px 1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.1), 0 24px 44px -20px rgb(0 0 0 / 0.42);
  --key-lit: inset 0 1px 0 rgb(239 239 231 / 0.32), inset 0 -1px 0 rgb(0 0 0 / 0.12);
  --ring-drop: 0 0 0 1px var(--ink), var(--key-lit), 0 1px 2px rgb(0 0 0 / 0.18);
  /* Weathered paper (owner, 2026-10-27): seeded SVG noise, thresholded into sparse ink specks over a fine grain.
     Static and tiled under the panel only; the map draws its own paper as MapLibre patterns. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .404 0 0 0 0 .278 0 0 0 0 .188 7 0 0 0 -4.6'/%3E%3C/filter%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .404 0 0 0 0 .278 0 0 0 0 .188 1 0 0 0 -.3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.1'/%3E%3Crect width='180' height='180' filter='url(%23s)' opacity='.3'/%3E%3C/svg%3E");
  /* map hover cursor (owner play-test 2026-11-04): black crosshair, white halo, hotspot at the centre */
  --cursor-map: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><g fill='none' stroke-linecap='round'><path d='M16 3v8M16 21v8M3 16h8M21 16h8' stroke='%23FFF' stroke-width='5'/><circle cx='16' cy='16' r='3' stroke='%23FFF' stroke-width='5'/><path d='M16 3v8M16 21v8M3 16h8M21 16h8' stroke='%23000' stroke-width='2'/><circle cx='16' cy='16' r='3' stroke='%23000' stroke-width='2'/></g><circle cx='16' cy='16' r='1' fill='%23E66A1F'/></svg>") 16 16, crosshair;
  --frame: 9px; /* map frame band: paper, rule, paper strip, rule */
  --notebook: linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 8px 8px, linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 8px 8px, var(--sheet-2);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; overflow-x: clip; }
body {
  background: var(--grain), var(--sheet);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; border-radius: var(--radius-key); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.app {
  display: grid;
  grid-template-columns: 1fr clamp(380px, 36vw, 480px);
  height: 100dvh;
}

.stage { position: relative; min-height: 0; background: var(--sea); }
.map { position: absolute; inset: 0; }
.map .maplibregl-canvas { cursor: var(--cursor-map); }
.loading {
  position: absolute; inset: 0; margin: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  font-size: 20px; color: var(--ink); text-align: center; padding-inline: var(--edge, 16px);
}
.loading p { margin: 0; }
/* N4 the failure message sits above the title card, which would otherwise cover the Retry. */
.loading.failed {
  z-index: 4; inset: auto; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(420px, calc(100% - 2 * var(--edge))); padding: 18px 22px;
  background: var(--notebook); border-radius: var(--radius-entry); box-shadow: 0 0 0 1px var(--ink), var(--shadow-lift);
}

.names { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.names span {
  position: absolute; left: 0; top: 0;
  padding: 2px 4px 1px; border-radius: 2px;
  font-family: var(--font-figure); font-size: 10px; line-height: 1; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap;
  background: var(--sheet-2); box-shadow: 0 0 0 1px var(--ink-idle);
}

/* Map frame: a ruled border with degree ticks and boxed degree tags, over the map edge.
   Look only: pointer-events none, so every click still reaches the map. */
.grat { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.grat::before {
  content: ""; position: absolute; inset: 0;
  border: 4px solid var(--paper-3);
  box-shadow: inset 0 0 0 1px var(--ink), inset 0 0 0 4px var(--paper-3), inset 0 0 0 5px var(--ink);
}
.grat span { position: absolute; left: 0; top: 0; }
.grat-tick { width: 1px; height: 5px; background: var(--ink); }
.grat-tick--top { translate: 0 var(--frame); }
.grat-tick--bottom { translate: 0 calc(-100% - var(--frame)); }
.grat-tick--left, .grat-tick--right { width: 5px; height: 1px; }
.grat-tick--left { translate: var(--frame) 0; }
.grat-tick--right { translate: calc(-100% - var(--frame)) 0; }
.grat-tag {
  padding: 0 3px; border-radius: 2px;
  font-family: var(--font-figure); font-size: 9.5px; line-height: 12px; letter-spacing: .08em; white-space: nowrap;
  color: var(--ink-2); background: var(--sheet-2); box-shadow: 0 0 0 1px var(--ink);
}
.grat-tag--top { translate: -50% calc(var(--frame) / 2 - 50%); }
.grat-tag--left { translate: 2px -50%; }

.pin {
  width: 20px; height: 20px;
  border: 4px solid var(--accent-fill);
  box-shadow: 0 0 0 1px var(--ink), inset 0 0 0 1px var(--ink);
  border-radius: 50%;
  background: color-mix(in oklab, var(--sheet) 35%, transparent);
  pointer-events: none;
}
.pin--refused { border-style: dashed; opacity: .8; }

.map-ctl { position: absolute; z-index: 2; }
.map-ctl--zoom { left: var(--edge); bottom: calc(var(--edge) + 22px); display: grid; gap: 10px; }
.map-ctl--reset { right: var(--edge); bottom: var(--edge); }
.sq {
  width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: var(--radius-key); background: var(--sheet-2);
  box-shadow: var(--ring-drop);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.sq:active { box-shadow: 0 0 0 1px var(--ink); transform: translateY(1px); }
.map-ctl--zoom .sq, #reset { width: 44px; height: 44px; }
.credit {
  position: absolute; left: var(--edge); bottom: 0; margin: 0; z-index: 2;
  padding: 0 4px; border-radius: 2px;
  font-family: var(--font-figure); font-size: 10px; line-height: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); background: var(--paper-3);
}

.panel {
  display: flex; flex-direction: column; gap: var(--edge);
  padding: var(--edge);
  border-left: 3px double var(--ink);
  min-height: 0; overflow: auto;
}
.hud { display: flex; align-items: center; height: 46px; border-bottom: 1px solid var(--ink); }
.wordmark { font-family: var(--font-display); font-size: 20px; }
.card { background: var(--sheet-2); border-radius: var(--radius-card); box-shadow: 0 0 0 1px var(--ink), var(--shadow-card); padding: 12px 14px; }
.eyebrow { margin: 0 0 4px; font-family: var(--font-figure); font-size: 13px; letter-spacing: .12em; color: var(--accent); } /* typewriter caps, as on the trail map */
.prompt { margin: 0; font-size: 20px; line-height: 27px; font-weight: 600; }
.debug pre { margin: 0 0 8px; font: inherit; font-size: 13.5px; line-height: 18px; white-space: pre-wrap; }
.debug label { display: block; font-size: 13.5px; }
.fine { margin: 6px 0 0; font-size: 12px; line-height: 16px; color: var(--ink-2); }

.actions { margin-top: auto; display: grid; gap: 8px; }
.readout { margin: 0; min-height: 25px; }
.readout--warn { color: var(--accent); }
.drop {
  height: 60px; border: 0; cursor: pointer;
  font-size: 20px;
  /* R3-U04 greyed with colour, not opacity, so the focus ring keeps full strength. */
  background: transparent; color: var(--ink-idle); font-weight: 600;
  box-shadow: 0 0 0 1px var(--pencil-idle);
}
.drop--ready {
  background: var(--accent-fill); color: var(--ink);
  box-shadow: var(--ring-drop);
}
.drop--ready:active { box-shadow: 0 0 0 1px var(--ink); transform: translateY(1px); }
.drop--refused { box-shadow: none; outline: 2px dashed var(--ink-2); outline-offset: -2px; }
/* R3-U01 the refused state's dashed outline must not hide keyboard focus. */
.drop--refused:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* S3: screens, overlays, round, reveal, camp */
:root {
  --ink-3: #53575B; /* Gray 40 */
  --gold: #FFB81C; /* Yellow 10 */
  --route: var(--accent-fill);
  --route-deep: var(--ink);
  --dial-ok: var(--green);
  --flag-miss: #7DE3F4; /* Blue 10 */
  --flag-hit: var(--green);
  --shadow-chroma: var(--shadow-card);
  --ring-cta: 0 0 0 1px var(--ink), var(--key-lit);
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.center { text-align: center; }
.screen { display: flex; flex-direction: column; gap: var(--edge); flex: 1; min-height: 0; }

/* HUD */
.hud { gap: 10px; justify-content: space-between; font-size: 16px; }
.hud-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-dist { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.hud-dist b { font-weight: normal; }
.meter {
  display: inline-block; width: 64px; height: 10px;
  background: var(--paper-3); box-shadow: 0 0 0 1px var(--ink); border-radius: 2px; overflow: hidden;
}
.meter > span { display: block; height: 100%; max-width: 100%; background: var(--route); }
.hud-band { color: var(--accent); }

/* title card (home) */
.title-card {
  position: absolute; z-index: 3; left: 50%; top: 18%; transform: translateX(-50%);
  width: min(560px, calc(100% - 2 * var(--edge)));
  padding: 18px 22px 16px; text-align: center;
  background: var(--notebook); border-radius: var(--radius-entry); box-shadow: 0 0 0 1px var(--ink), var(--shadow-lift);
}
.title-art {
  display: block; width: calc(100% + 44px); height: auto; margin: -18px -22px 14px;
  border-radius: var(--radius-entry) var(--radius-entry) 0 0; border-bottom: 1px solid var(--ink);
}
@media (max-width: 767px) {
  .title-art { width: calc(100% + 28px); margin: -12px -14px 10px; max-height: 120px; object-fit: cover; }
}
/* Design 2: result stamp on the title card after play. Shares the stamp-slam motion. */
.result-stamp {
  position: absolute; z-index: 1; top: 62px; right: 12px; display: grid; gap: 1px; justify-items: center;
  padding: 4px 12px 5px; color: var(--accent); background: var(--notebook); box-shadow: 0 2px 6px rgba(0,0,0,.25);
  border: 3px double var(--accent); border-radius: 6px; font-family: var(--font-figure); text-transform: uppercase;
  pointer-events: none;
}
.result-stamp[hidden] { display: none; }
.result-stamp .rs-km { font-size: 24px; line-height: 26px; font-weight: 700; letter-spacing: .04em; }
.result-stamp .rs-band { font-size: 11px; letter-spacing: .14em; }
.title-word { margin: 0; font-family: var(--font-display); font-size: 40px; line-height: 44px; overflow-wrap: break-word; min-width: 0; }
.title-sub {
  margin: 10px 0 0; padding-top: 8px; border-top: 2px solid var(--accent-fill);
  font-family: var(--font-figure); font-size: 15px; letter-spacing: .14em; color: var(--accent);
}
.title-tag { margin: 8px 0 0; font-size: 13.5px; color: var(--ink-2); }

/* stopwatch dial */
.dial {
  --left: 1;
  --c: var(--dial-ok);
  position: absolute; z-index: 3; right: var(--edge); top: calc(var(--edge) + 8px);
  width: 76px; height: 76px; border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(var(--c) calc(var(--left) * 360deg), var(--sheet-2) 0);
  box-shadow: 0 0 0 1px var(--ink), var(--shadow-card);
}
.dial::before {
  content: ""; position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  width: 14px; height: 10px; border-radius: 2px; background: var(--ink);
}
.dial span {
  position: relative; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c); color: var(--sheet);
  box-shadow: 0 0 0 1px var(--ink);
  font-family: var(--font-figure); font-size: 26px; line-height: 1;
}
.dial--red { --c: var(--accent-fill); }
.dial--red span { color: var(--ink); }
.noclock {
  position: absolute; z-index: 3; right: var(--edge); top: var(--edge); margin: 0;
  padding: 6px 10px; text-align: center; font-size: 13.5px; line-height: 17px;
  background: var(--sheet-2); border-radius: var(--radius-key); box-shadow: 0 0 0 1px var(--ink);
}

/* reveal stamp card on the map */
.stamp-card {
  position: absolute; z-index: 3; left: 50%; bottom: calc(var(--edge) + 34px); transform: translateX(-50%);
  min-width: 260px; max-width: calc(100% - 2 * var(--edge));
  padding: 10px 18px 12px; text-align: center;
  background: var(--notebook); border-radius: var(--radius-entry); box-shadow: 0 0 0 1px var(--ink), var(--shadow-lift);
}
.sc-name { margin: 0; font-family: var(--font-display); font-size: 30px; line-height: 36px; overflow-wrap: break-word; min-width: 0; }
.sc-row { margin: 6px 0 0; display: flex; justify-content: center; align-items: center; gap: 12px; }
.sc-km { font-family: var(--font-figure); font-size: 18px; }
.new-loc {
  position: absolute; top: -14px; right: -18px;
  padding: 2px 8px; font-size: 13.5px; font-weight: 600; border-radius: var(--radius-key);
  color: var(--ink); background: var(--accent-fill); box-shadow: 0 0 0 1px var(--ink);
}
.tier-stamp {
  --tier-ink: var(--ink);
  --tier-fill: var(--sheet-2);
  display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; padding: 1px 8px 0;
  font-size: 16px; line-height: 22px;
  color: var(--tier-ink);
  background: color-mix(in srgb, var(--tier-fill) 15%, var(--sheet)); /* R3-U03 15% so all six pass 4.5:1 */
  font-weight: 600; border-radius: var(--radius-key);
  box-shadow: 0 0 0 1px var(--tier-ink);
}
.tier-stamp img { display: block; width: 28px; height: 28px; margin: -3px 0; object-fit: contain; flex: none; }

/* home */
.home-msg { margin: 0; font-size: 20px; line-height: 28px; }
.home-wait { margin: 0; color: var(--accent); text-align: center; }
.home-streak { margin: 0; text-align: center; color: var(--ink-2); }
.cta {
  height: 60px; padding: 4px 18px 0; border: 0; cursor: pointer; width: 100%;
  font-size: 20px;
  font-weight: 600; border-radius: var(--radius-key);
  background: var(--ink); color: var(--sheet); box-shadow: var(--ring-cta);
}
.cta:active { transform: translateY(1px); }
.textlink {
  justify-self: center; border: 0; background: none; padding: 4px 6px; cursor: pointer;
  font-size: 16px; font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent-fill); text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* round */
.prompt { min-height: 56px; }
.search { display: grid; gap: 2px; }
.search select {
  font: inherit; font-size: 16px; height: 36px; padding: 0 6px; border-radius: 0;
  border: 0; border-radius: var(--radius-key); background: var(--sheet-2); box-shadow: 0 0 0 1px var(--ink-2); color: var(--ink);
}
/* Trail map: drawn route, Nauvoo (east) to the Salt Lake Valley (west); the wagon is the day total.
   Look (owner, 2026-10-27): speckled paper, framed border, spaced mono labels, faint icon field. */
.trail-map { display: block; width: 100%; height: auto; border-radius: 4px; }
.trail-map text { font-family: var(--font-figure); text-transform: uppercase; }
.tm-paper { fill: var(--paper-3); }
.tm-speck { fill: var(--ink-idle); opacity: .35; }
.tm-frame { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.tm-edge { font-size: 7px; letter-spacing: .3em; fill: var(--ink-idle); }
.tm-name { font-size: 6.2px; letter-spacing: .12em; fill: var(--ink); font-weight: 600; paint-order: stroke; stroke: var(--paper-3); stroke-width: 1.8px; stroke-linejoin: round; }
.tm-leader { fill: none; stroke: var(--ink-2); stroke-width: .5; }
.tm-art { pointer-events: none; }
.tm-ink, .tm-faint { fill: none; stroke: var(--ink-2); stroke-width: 1.1; stroke-linejoin: round; stroke-linecap: round; }
.tm-faint { stroke: var(--ink-idle); stroke-width: .9; opacity: .45; }
.tm-water { fill: none; stroke: var(--sea); stroke-width: 2.6; stroke-linecap: round; }
.tm-lake { fill: none; stroke: var(--ink-idle); stroke-width: 1; stroke-dasharray: 1.5 2; }
.tm-t { opacity: .38; stroke: none; }
.tm-t-tick { fill: none; stroke-width: .8; stroke-linecap: round; opacity: .7; }
.tm-t-plains { fill: var(--green); stroke: var(--green); }
.tm-t-tan { fill: #C9A66B; stroke: #8E6F3C; }
.tm-t-orange { fill: var(--route); stroke: var(--route); }
.tm-t-ice { fill: #BFD8E0; stroke: #5E8797; }
.tm-t-gold { fill: var(--gold); stroke: #B07F00; }
.tm-t.tm-t { stroke: none; }
.tm-t-tick { fill: none !important; }
.tm-route { fill: none; stroke: var(--ink-2); stroke-width: 1.8; stroke-dasharray: 3.5 3; }
.tm-walked { display: none; fill: none; stroke: var(--route); stroke-width: 3; stroke-linecap: round; }
.tm-walked--lit { display: inline; }
.tm-stop { fill: var(--sheet-2); stroke: var(--ink); stroke-width: 1.2; }
.tm-stop--reached { fill: var(--route); }
.tm-cover { fill: var(--sheet-2); stroke: var(--ink); stroke-width: 1.1; }
.tm-bed { fill: var(--accent); stroke: var(--ink); stroke-width: 1; }
.tm-wheel { fill: var(--sheet-2); stroke: var(--ink); stroke-width: 1.2; }
.hint { margin: 0; text-align: center; font-size: 13.5px; color: var(--ink-2); }
.hint-coarse { display: none; }
@media (pointer: coarse) { .hint-fine { display: none; } .hint-coarse { display: inline; } }
.page-links { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13.5px; }
.page-links a, .fine a { color: var(--accent); }
.drop--next {
  background: var(--ink); color: var(--sheet); box-shadow: var(--ring-cta); opacity: 1;
}
.drop--next:active { transform: translateY(1px); }
/* UX4: waiting for the reveal to finish. Outline only, then it fills in. */
.drop--next { transition: background-color .25s ease, color .25s ease, box-shadow .25s ease; }
.drop--wait { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 2px var(--ink-2); }
.drop--wait:active { transform: none; }

/* Design 1: stamp-slam. Lands with a small overshoot and settles slightly tilted, like ink on paper. */
.stamp-slam { transform: rotate(-2deg); animation: stamp-slam .42s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes stamp-slam {
  0% { transform: scale(2.4) rotate(-14deg); opacity: 0; }
  55% { opacity: 1; }
  100% { transform: scale(1) rotate(-2deg); opacity: 1; }
}

/* result card */
.result-head { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.r-km { font-family: var(--font-figure); font-size: 18px; white-space: nowrap; }
.r-name { margin: 8px 0 0; font-size: 20px; line-height: 26px; font-weight: 600; }
.r-line { margin: 6px 0 0; }
/* "See more…" (owner, 2026-10-29): a quiet line under the guess that opens the popped result.
   The button is 44 px tall; the negative margins keep it to one text line in the card. */
.r-more {
  display: block; min-height: 44px; margin: -8px 0; padding: 0; border: 0; background: none;
  font: inherit; font-size: 14px; line-height: 20px; color: var(--ink-2); text-align: left; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.r-more:focus-visible { outline: 2px solid var(--ink); outline-offset: -8px; }
.result[data-size="pop"] .r-more { display: none; }
.fact-summary { margin: 8px 0 0; font-size: 14px; line-height: 20px; color: var(--ink); overflow-wrap: anywhere; }
.answers { margin-top: 8px; }
.answers summary {
  cursor: pointer; list-style: none;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.answers summary::-webkit-details-marker { display: none; }
.answers summary::before { content: "+"; width: 14px; color: var(--accent); }
.answers[open] > summary::before { content: "-"; }
.answers ul { margin: 2px 0 6px; padding-left: 18px; columns: 2; column-gap: 16px; }
.answers li { break-inside: avoid; }
.answers li.mine { color: var(--accent); }
.answers li.mine::after { content: " \2190 your pin"; font-size: 13.5px; }
.ans-tier { margin: 8px 0 0; font-size: 13.5px; }

/* camp */
.camp-top { display: grid; grid-template-columns: 1fr 1fr; gap: var(--edge); }
.camp-rows { list-style: none; margin: 0; display: grid; gap: 8px; align-content: start; }
.camp-rows li { display: flex; align-items: center; gap: 10px; }
.camp-rows li.camp-pending { opacity: 0; transform: translateY(8px); }
.camp-rows li.camp-in { animation: camp-in .3s ease-out both; }
@keyframes camp-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .camp-rows li.camp-in { animation: none; } }
.camp-rows li > span:first-child { width: 14px; color: var(--ink-2); }
/* The camp Bonus row (owner ruling 2026-11-03): a tier stamp in green with a tick, or red with a cross. */
.bonus-mark--got { --tier-ink: #235C35; --tier-fill: #50A83E; }
.bonus-mark--missed { --tier-ink: #A1162B; --tier-fill: #E10F2A; }
.poster {
  text-align: center; display: grid; align-content: center; gap: 4px;
  background: var(--notebook); border-radius: var(--radius-entry); box-shadow: 0 0 0 1px var(--ink), var(--shadow-lift);
}
.poster p { margin: 0; }
.poster-word { font-size: 13.5px; }
.poster-km { font-family: var(--font-figure); font-size: 18px; }
.poster-km b { font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 48px; }
.poster-band { color: var(--accent); font-weight: 600; }
.share {
  height: 60px; border: 0; cursor: pointer;
  font-size: 20px;
  font-weight: 600; border-radius: var(--radius-key);
  background: var(--accent-fill); color: var(--ink); box-shadow: var(--ring-drop);
}
.share:active { box-shadow: 0 0 0 1px var(--ink); transform: translateY(1px); }
.camp-line { margin: 0; text-align: center; }
.camp-next { margin: 0; text-align: center; color: var(--ink-2); font-size: 13.5px; }
.camp-answer { border-top: 1px solid var(--pencil); padding-top: 6px; }

/* camp map flags */
.flag {
  min-width: 22px; height: 22px; padding: 0 4px; /* no position here: maplibre sets the marker absolute */
  display: grid; place-items: center;
  font-family: var(--font-figure); font-size: 13.5px; line-height: 1; color: var(--ink);
  background: var(--flag-miss); box-shadow: 0 0 0 1px var(--ink); border-radius: var(--radius-key);
  margin-bottom: 10px;
}
.flag::after {
  content: ""; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%);
  width: 2px; height: 10px; background: var(--ink);
}
.flag--hit { background: var(--flag-hit); color: var(--sheet); } /* R3-U02 paper on Green 35, 5.21:1 */
.flag--miss { background: var(--flag-miss); color: var(--ink); }
.flag--last { background: var(--accent-fill); color: var(--ink); }

/* S6 §29 layout at 390 x 844: one column. The panel and the screens dissolve
   (display: contents) so their parts can sit above and below the map:
   HUD, prompt, map, result, actions. Camp scrolls as a page, map last, RETURN HOME sticky. */
@media (max-width: 767px) {
  .app {
    display: flex; flex-direction: column; height: 100dvh;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
  }
  .panel, .screen { display: contents; }
  .panel > *, .screen > * { margin-inline: var(--edge); }
  .hud { order: 0; flex: none; height: 46px; font-size: 13.5px; gap: 6px; }
  .hud-line { flex: 1; text-align: center; white-space: normal; line-height: 17px; }
  .hud-dist { flex: 1; justify-content: center; gap: 6px; font-size: 13.5px; }
  /* S6d: the longest band names pushed the HUD past 390 px. Drop the label; truncate as a last guard. */
  .hud-dist { min-width: 0; }
  .hud-label { display: none; }
  .hud-band { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .meter { width: 40px; }
  #round > .prompt-card, #round > .search { order: 1; flex: none; margin-top: var(--edge); }
  .prompt-card { padding: 8px 12px; }
  .prompt { font-size: 18px; line-height: 22px; min-height: 44px; }
  .stage {
    order: 2; flex: 1 1 auto; min-height: 200px;
    margin: var(--edge) var(--edge) 0; box-shadow: 0 0 0 1px var(--ink);
  }
  /* The trail shows on the reveal only, as a strip above the result, so the wagon is seen walking. */
  #round:has(#result[hidden]) > .trail { display: none; }
  #round > .trail { order: 3; flex: none; margin-top: var(--edge); padding: 0; background: none; box-shadow: none; }
  #round > .trail .eyebrow { display: none; }
  .trail-map { max-height: 140px; margin: 0 auto; width: auto; max-width: 100%; }
  /* The reveal card on a phone (owner, 2026-10-29): tier, km, the guess and "See more…" only, always
     whole. The rest of the answer shows in the popped card. The trail strip and the map give way. */
  #round > .result {
    order: 3; flex: none;
    margin-top: var(--edge); padding: 8px 12px;
  }
  #round > .result:not([data-size="pop"]) > :not(.result-head, .r-name, .r-more, .size-btn) { display: none; }
  #round:has(#result:not([hidden])) > .trail .trail-map { max-height: clamp(64px, calc(100dvh - 580px), 140px); }
  .app:has(#round:not([hidden]) #result:not([hidden])) .stage { min-height: 140px; }
  #round:has(#result:not([hidden])) .readout:empty { display: none; }
  .actions {
    order: 4; flex: none; margin-top: 0;
    padding: var(--edge) 0 calc(var(--edge) + env(safe-area-inset-bottom));
  }
  .debug { order: 6; flex: none; margin-bottom: var(--edge); max-height: 96px; overflow: auto; }
  .readout { text-align: center; }
  .home-streak, .home-wait { font-size: 13.5px; line-height: 18px; }
  .home-msg { order: 1; flex: none; margin-top: var(--edge); font-size: 16px; line-height: 22px; text-align: center; }
  .home-msg:empty { display: none; }
  #home-retry { order: 1; flex: none; align-self: center; }
  .title-card { top: var(--edge); padding: 12px 14px 10px; }
  .title-word { font-size: 30px; line-height: 38px; }
  .title-tag { display: none; }
  .dial { width: 60px; height: 60px; }
  .dial span { width: 40px; height: 40px; font-size: 21px; }
  .sc-name { font-size: 20px; line-height: 28px; }
  .sc-row { flex-wrap: wrap; gap: 2px 10px; }
  .sc-km { white-space: nowrap; }
  /* clear of the +/- column (left) and the reset button (right) */
  .stamp-card {
    bottom: calc(var(--edge) + 22px); min-width: 0; width: auto;
    left: calc(2 * var(--edge) + 44px); right: calc(2 * var(--edge) + 44px); transform: none;
    padding: 8px 10px 10px;
  }
  /* the map is short at 390; tier and km repeat in the result card right below, so the stamp keeps only the name */
  .stamp-card .sc-row { display: none; }
  .answers ul { columns: 1; }
  .drop, .cta, .share { height: 52px; font-size: 19px; padding-inline: 8px; }

  /* camp: the page scrolls, cards first, the map with numbered flags below the answers */
  .app:has(#camp:not([hidden])) { height: auto; min-height: 100dvh; }
  .app:has(#camp:not([hidden])) .stage { order: 3; flex: none; height: 52vh; margin-top: var(--edge); }
  #camp > * { order: 1; flex: none; margin-top: var(--edge); }
  #camp > .actions {
    order: 4; position: sticky; bottom: 0; z-index: 5; margin-top: var(--edge);
    background: var(--sheet); box-shadow: 0 -1px 0 var(--ink);
  }
  /* Owner, 2026-11-04: on phone the bonus must show with no scrolling. #q6-camp sticks right above the
     RETURN HOME bar; app.js keeps --camp-bar-h at that bar's height. Desktop keeps its place in the page. */
  #camp > .q6-camp:not([hidden]) {
    order: 4; position: sticky; bottom: var(--camp-bar-h, 104px); z-index: 5;
    padding-top: var(--edge); background: var(--sheet); box-shadow: 0 -1px 0 var(--ink);
  }
  #camp:has(> .q6-camp:not([hidden])) > .actions { margin-top: 0; box-shadow: none; }
  /* The round screen's trail clamp, so SHARE stays clear of the bonus bar on short phones (375x667). */
  #camp:has(> .q6-camp:not([hidden])) > .camp-trail .trail-map { max-height: clamp(64px, calc(100dvh - 580px), 140px); }
  .camp-top { grid-template-columns: 1fr 1fr; }
  .camp-rows { padding: 10px; }
  .camp-rows li .tier-stamp { font-size: 13.5px; line-height: 18px; }
  .poster-km b { font-size: 30px; line-height: 40px; }
}
@media (max-width: 767px) and (orientation: portrait) {
  .app:has(#round:not([hidden]) #result[hidden]) .stage {
    max-height: calc(100vw - 2 * var(--edge) - env(safe-area-inset-left) - env(safe-area-inset-right));
  }
}

/* S4: menu drawer and panels */
.burger { width: 36px; height: 36px; padding: 0; border: 0; background: none; cursor: pointer; flex: none; display: grid; place-items: center; }
.burger span, .burger span::before, .burger span::after { display: block; width: 20px; height: 3px; background: var(--ink); position: relative; content: ""; }
.burger span::before { position: absolute; top: -7px; }
.burger span::after { position: absolute; top: 7px; }
.menu-shade { position: fixed; inset: 0; z-index: 19; background: var(--shade); }
.drawer {
  position: fixed; z-index: 20; left: 0; top: 0; bottom: 0; width: min(480px, 100vw);
  overflow: auto; padding: var(--edge); background: var(--sheet); box-shadow: 1px 0 0 var(--ink);
  display: flex; flex-direction: column; gap: var(--edge);
}
.menu-back { align-self: start; border: 0; background: none; padding: 0; cursor: pointer; text-align: left; display: grid; line-height: 20px; }
.menu-back small { font-size: 12px; color: var(--ink-2); }
.menu-back span { color: var(--accent); }
.menu-back span::before { content: "\2190\0020"; }
#menu-body > div { display: flex; flex-direction: column; gap: 10px; }
.panel-title { margin: 0; font-family: var(--font-display); font-size: 30px; line-height: 36px; overflow-wrap: break-word; min-width: 0; }
.big-count { margin: 0; font-size: 20px; }
.menu-item, .tile {
  display: grid; gap: 2px; text-align: left; padding: 10px 14px; cursor: pointer; border: 0;
  border-radius: var(--radius-card); background: var(--sheet-2); box-shadow: 0 0 0 1px var(--ink), var(--shadow-card);
}
.mi-label { font-weight: 600; display: flex; gap: 8px; align-items: center; }
.mi-sub { font-size: 13.5px; color: var(--ink-2); }
.new-tag { font-size: 12px; font-weight: 600; line-height: 16px; padding: 0 5px; border-radius: 4px; color: var(--ink); background: var(--accent-fill); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.tile { padding: 8px; align-content: start; }
.tile .new-tag { justify-self: start; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { display: grid; text-align: center; padding: 6px; border-radius: var(--radius-key); box-shadow: 0 0 0 1px var(--ink); background: var(--sheet-2); }
.stat b { font-family: var(--font-figure); font-weight: normal; font-size: 20px; }
.stat span { font-size: 12px; color: var(--ink-2); }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-head { text-align: center; font-size: 12px; color: var(--ink-2); }
.cal-cell { aspect-ratio: 1; display: grid; place-content: center; text-align: center; font: inherit; font-size: 13.5px; line-height: 15px; border: 0; border-radius: 4px; padding: 0; background: var(--paper-3); color: var(--ink-2); }
.cal-cell small { font-size: 11px; }
.cal-played { background: var(--band); color: var(--ink); cursor: pointer; box-shadow: 0 0 0 1px var(--ink); }
.cal-open { cursor: pointer; box-shadow: 0 0 0 1px var(--accent); }
.play-tag { color: var(--accent); }
.cal-today { box-shadow: 0 0 0 2px var(--ink); color: var(--ink); }
.cal-closed, .cal-future { opacity: .45; }
.key { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--ink-2); }
.key i, .counts i { display: inline-block; width: 10px; height: 10px; margin-right: 4px; box-shadow: 0 0 0 1px var(--ink); }
.counts, .pp-list, .sv-list, .pw-list, .dd-pins { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.counts li, .pp-list li, .pw-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.counts b { font-weight: normal; }
.tier-stamp--sm { font-size: 12px; line-height: 16px; padding: 0 5px; }
.tier-stamp--sm img { width: 14px; height: 14px; }
.dd-pins li { display: grid; grid-template-columns: auto 1fr; gap: 0 8px; align-items: center; }
.dd-pins li .fine { grid-column: 1 / -1; margin: 0; }
.seg { display: flex; gap: 8px; }
.seg button { flex: 1; height: 36px; cursor: pointer; border: 0; background: var(--sheet-2); box-shadow: 0 0 0 1px var(--ink), var(--key-lit); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--sheet); }
.seg .danger { background: var(--accent-fill); color: var(--ink); }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pp-list li { border-bottom: 1px solid var(--pencil); padding-bottom: 2px; }
.pp-list li:not(.pp-found) { color: var(--ink-2); }
.sv-list li { display: grid; padding: 4px 0; border-bottom: 1px solid var(--pencil); }
.sv-list li:not(.sv-done) .sv-name { color: var(--ink-2); }
.sv-name { display: flex; gap: 8px; align-items: center; }
.sv-name img { display: block; width: 28px; height: 28px; object-fit: contain; flex: none; }
.pw-name small { display: block; font-size: 12px; color: var(--ink-2); }
.pips { display: flex; gap: 3px; }
.pips i { width: 12px; height: 12px; box-shadow: 0 0 0 1px var(--ink); }
.steps { margin: 0; padding-left: 22px; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 13.5px; }
.facts dt { font-weight: 600; color: var(--accent); }
.facts dd { margin: 0; }
.confirm { display: grid; gap: 8px; }
.confirm p { margin: 0; }
@media (max-width: 767px) {
  .drawer { width: 100vw; box-shadow: none; }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .tile { padding: 6px; font-size: 13.5px; line-height: 18px; }
  .tile .mi-label { }
  .tile .mi-sub { font-size: 12px; }
}

/* §23 header speaker toggle */
.speaker { width: 36px; height: 36px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; flex: none; display: grid; place-items: center; }
.speaker .snd-off { display: none; }
.speaker--off .snd-on { display: none; }
.speaker--off .snd-off { display: inline; }

/* Floor 7: honour reduced motion. Press offsets and any future transition fall back to none. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .sq:active, .drop--ready:active, .drop--next:active, .cta:active, .share:active { transform: none; }
}

/* §17 camp note: "SHOULD SOMETHING ELSE COUNT?" */
.ruling-link { display: inline-block; margin: 6px 0 0; font-size: 13.5px; }
.dispute { margin: 6px 0 8px; display: grid; justify-items: start; gap: 6px; }
.dispute .textlink { justify-self: start; padding-inline: 0; font-size: 13.5px; }
.dispute-box { display: grid; gap: 8px; width: 100%; }
.dispute-box .fine { margin: 0; }
.dispute-note {
  width: 100%; resize: vertical; padding: 8px 10px;
  font-family: var(--font-figure); font-size: 13px; line-height: 18px; color: var(--ink);
  background: var(--sheet); border: 0; border-radius: var(--radius-key); box-shadow: 0 0 0 1px var(--ink);
}
.dispute-copy {
  justify-self: start; height: 40px; padding: 0 14px; border: 0; cursor: pointer;
  font-size: 15px; font-weight: 600; background: var(--ink); color: var(--sheet);
}

/* §11 below the fold, home only: steps, a short pitch, FAQ, footer. The page scrolls past the game frame. */
.below {
  border-top: 3px double var(--ink);
  padding: 32px var(--edge) calc(32px + env(safe-area-inset-bottom));
  display: grid; gap: 16px; justify-items: stretch;
}
.below > * { width: 100%; max-width: 720px; margin: 0 auto; }
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--edge); counter-reset: step; }
.step { counter-increment: step; background: var(--sheet-2); border-radius: var(--radius-card); box-shadow: 0 0 0 1px var(--ink), var(--shadow-card); padding: 12px 14px; text-align: center; }
.step svg { width: 64px; height: 48px; display: block; margin: 0 auto 6px; }
.step .ln { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.step .fill { fill: var(--sheet); }
.step .acc { stroke: var(--accent); }
.step .dash { stroke-dasharray: 3 4; stroke: var(--accent); }
.step-t { margin: 0; font-weight: 600; }
.step-t::before { content: counter(step) ". "; font-family: var(--font-figure); color: var(--accent); }
.step .fine { margin-top: 2px; }
.below-h { margin: 8px auto 0; font-family: var(--font-display); font-size: 24px; line-height: 30px; }
.below > p { margin-top: 0; margin-bottom: 0; }
.faq { border-top: 1px solid var(--pencil); }
.faq-item { border-bottom: 1px solid var(--pencil); }
.faq-item h3 { margin: 0; font-size: inherit; }
.faq-q {
  width: 100%; display: flex; gap: 10px; align-items: baseline; text-align: left;
  padding: 10px 0; border: 0; background: none; cursor: pointer; font-weight: 600;
}
.faq-q::before { content: "+"; width: 14px; flex: none; font-family: var(--font-figure); color: var(--accent); }
.faq-q[aria-expanded="true"]::before { content: "-"; }
.faq-a p { margin: 0 0 12px 24px; color: var(--ink-2); }
.foot { display: grid; justify-items: center; gap: 10px; padding-top: 8px; text-align: center; }
.foot .page-links { justify-content: center; }
.foot .fine { margin: 0; }

@media (max-width: 767px) {
  .steps { grid-template-columns: 1fr; }
  .step { display: grid; grid-template-columns: 64px 1fr; column-gap: 12px; text-align: left; align-items: center; }
  .step svg { grid-row: span 2; margin: 0; }
  .below-h { font-size: 21px; line-height: 26px; }
}

/* Walk-through (owner, 2026-10-28). The spotlight's huge shadow dims everything but the lit part. */
.tour { position: fixed; inset: 0; z-index: 50; }
.tour-veil { position: absolute; inset: 0; }
.tour--note .tour-veil { background: rgb(0 0 0 / 0.55); }
.tour-spot {
  position: fixed; border-radius: 10px; pointer-events: none;
  box-shadow: 0 0 0 3px var(--accent-fill), 0 0 0 9999px rgb(0 0 0 / 0.55);
  transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease;
}
.tour-card {
  position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(420px, calc(100vw - 32px)); padding: 16px 18px;
}
.tour-card--top { bottom: auto; top: max(16px, env(safe-area-inset-top)); }
.tour--note .tour-card { bottom: auto; top: 50%; transform: translate(-50%, -50%); }
.tour-title { font-weight: 700; font-size: 20px; margin: 4px 0 6px; }
.tour-body { margin: 0 0 14px; line-height: 1.45; color: var(--ink-2); white-space: pre-line; } /* card 1 breaks its lines */
.tour-nav { display: flex; align-items: center; gap: 8px; }
.tour-gap { flex: 1; }
.tour-nav .tour-btn { width: auto; height: 44px; margin: 0; padding: 2px 16px 0; font-size: 16px; }
#tour-back { background: var(--sheet-2); color: var(--ink); box-shadow: 0 0 0 1px var(--ink); border: 0; border-radius: var(--radius-card); font: inherit; font-weight: 700; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .tour-spot { transition: none; } }

/* Expand and shrink (owner, 2026-10-28): a corner button on every panel. Expand pops the panel
   out as a larger centered box over a grayed backdrop; shrink puts it back in its spot. */
[data-label] { position: relative; }
.size-li { list-style: none; display: contents; }
.size-btn {
  position: absolute; z-index: 6; top: 0; right: 0;
  width: 44px; height: 44px; padding: 0; border: 0; background: none;
  font-size: 18px; line-height: 1; color: var(--ink-2); cursor: pointer;
}
.size-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
.stage > .size-btn { right: auto; left: 0; top: 0; z-index: 4; color: var(--ink); }
.prompt-card[data-label], .result[data-label], .camp-rows[data-label] { padding-right: 44px; }

.size-spot { flex: none !important; visibility: hidden; list-style: none; }
.size-shade { position: fixed; inset: 0; z-index: 39; width: auto; max-width: none; margin: 0; background: rgb(40 36 30 / .55); backdrop-filter: grayscale(1); }
.size-shade:has(+ [hidden]) { display: none; }
[data-size="pop"] {
  position: fixed !important; z-index: 40 !important; left: 50% !important; top: 50% !important; right: auto !important; bottom: auto !important;
  transform: translate(-50%, -50%); order: 0 !important;
  width: min(960px, calc(100vw - 16px)) !important; height: auto !important; max-height: calc(100dvh - 48px) !important;
  margin: 0 !important; overflow: auto; flex: none !important;
  padding-top: 44px; background: var(--sheet-2);
  border-radius: var(--radius-card); box-shadow: 0 0 0 2px var(--ink), 0 18px 48px rgb(0 0 0 / .4) !important;
}
.stage[data-size="pop"] { height: min(720px, calc(100dvh - 48px)) !important; padding: 0; background: var(--sea); overflow: hidden; }
#round > .trail[data-size="pop"], #trail[data-size="pop"] { display: block !important; background: var(--sheet-2); padding: 44px 16px 16px; }
[data-size="pop"] .trail-map { max-height: none; width: 100%; }
.actions[data-size="pop"] { display: grid; align-content: center; padding: 44px var(--edge) var(--edge); }
.camp-rows[data-size="pop"] { display: grid; }
.poster[data-size="pop"] { display: grid; }
[data-size][hidden] { display: none !important; }
@media (max-width: 767px) { #round:has(#result[hidden]) > .trail[data-size] { display: none !important; } }
/* On a phone the result card's own padding is set by #round > .result; keep the km figure clear of the button. */
@media (max-width: 767px) { #round > .result[data-label] { padding-right: 44px; } }

/* Thanks for playing (owner, 2026-10-28): once a day at camp. The pop-out look: grayed backdrop,
   highlighted box. */
.thanks { position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; padding: 16px; }
.thanks[hidden] { display: none; }
.thanks-shade { position: absolute; inset: 0; background: rgb(40 36 30 / .55); backdrop-filter: grayscale(1); }
.thanks-box {
  position: relative; width: min(420px, 100%); padding: 20px 20px 18px; text-align: center;
  background: var(--sheet-2); border-radius: var(--radius-card);
  box-shadow: 0 0 0 2px var(--ink), 0 18px 48px rgb(0 0 0 / .4);
}
.thanks-box:focus { outline: none; }
.thanks-box:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.thanks-badge { display: block; width: 104px; height: 104px; margin: 0 auto 8px; border-radius: 50%; box-shadow: 0 0 0 2px var(--ink-2); }
.thanks-title { font-weight: 700; font-size: 22px; margin: 0 0 6px; }
.thanks-body { margin: 0 0 16px; line-height: 1.45; color: var(--ink-2); }
.thanks-btn { width: auto; height: 44px; margin: 0; padding: 2px 24px 0; font-size: 16px; }

/* Lost sheep (owner, 2026-10-29): a lamb on its paper card, first miss of the day. It sits over the
   trail strip, centred on it at the west end, so the wrong country on the map stays fully seen.
   On a short phone the strip is under 128 px; the card then hangs down from the strip's top
   over the result card, never up into the map, and stays clear of NEXT PROMPT. */
#trail { position: relative; }
.sheep {
  position: absolute; z-index: 3; top: 0; bottom: 0; margin-block: auto; left: var(--edge, 16px);
  height: min(128px, 100%); aspect-ratio: 1; padding: 0; overflow: hidden; cursor: pointer;
  border: 0; border-radius: var(--radius-card); background: var(--sheet-2);
  box-shadow: 0 0 0 1px var(--ink), var(--shadow-lift);
}
.sheep[hidden] { display: none; }
.sheep-img { display: block; width: 100%; height: 100%; }
.sheep-img--open, .sheep--open .sheep-img--closed { display: none; }
.sheep--open .sheep-img--open { display: block; }
.sheep--in { animation: sheep-in 250ms cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes sheep-in {
  0% { opacity: 0; transform: translateY(-16px) scale(.6); }
  100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .sheep--in { animation: none; } }

/* Question 6: unscored map overlay. Laid out like the game (owner, 2026-11-03): the map on the
   left, a panel on the right with the question card, the result card and the CHECK button; under
   768 px the parts stack in the game's phone order. */
.q6-camp { display: grid; gap: 6px; }
.q6-open { font-size: 15px; }
.q6 {
  position: fixed; inset: 0; z-index: 30; display: grid; grid-template-columns: 1fr clamp(380px, 36vw, 480px); grid-template-rows: 1fr auto;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) max(8px, env(safe-area-inset-bottom)) env(safe-area-inset-left);
  background: var(--sheet); color: var(--ink); overflow: hidden; touch-action: pan-y;
}
.q6:focus { outline: none; }
/* The map and the panel, the same two columns as .app; the statement sits under the panel. */
.q6-body { grid-column: 1 / -1; min-height: 0; display: grid; grid-template-columns: 1fr clamp(380px, 36vw, 480px); }
.q6-panel {
  min-height: 0; display: flex; flex-direction: column; gap: var(--edge);
  padding: var(--edge) var(--edge) 0; border-left: 3px double var(--ink); overflow: hidden auto; overscroll-behavior: contain;
}
.q6-head { display: flex; align-items: center; gap: 8px; flex: none; height: 46px; border-bottom: 1px solid var(--ink); }
.q6-title { margin: 0; flex: 1; font-size: 12px; }
.q6-ask-card { flex: none; }
.q6-strip { position: relative; flex: none; height: 128px; }
.q6-strip:not(:has(.sheep:not([hidden]))) { display: none; }
.q6-actions { margin-top: auto; flex: none; display: grid; gap: 8px; }
.q6-draft { font-family: var(--font-figure); font-size: 11px; letter-spacing: .08em; padding: 1px 6px; border: 1px solid var(--accent); color: var(--accent); border-radius: var(--radius-key); }
.q6-close { height: 44px; padding: 0 12px; border: 0; background: none; cursor: pointer; font-size: 14px; font-weight: 600; }
.q6-ask { margin: 0; font-size: 16px; line-height: 21px; font-weight: 600; }
.q6-stage {
  position: relative; min-height: 200px; overflow: hidden; touch-action: none;
  background: var(--paper-3); box-shadow: 0 0 0 1px var(--ink); cursor: var(--cursor-map); user-select: none; -webkit-user-select: none;
}
.q6-stage:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.q6-layer { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.q6-img { display: block; width: 100%; height: 100%; max-width: none; pointer-events: none; }
.q6-tiles { position: absolute; inset: 0; pointer-events: none; }
.q6-tile { position: absolute; display: block; max-width: none; pointer-events: none; }
/* Multiply keeps the map's ink and names dark under the lit territory. */
.q6-terr { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: multiply; }
.q6-borders { stroke-linejoin: round; stroke-linecap: round; }
.q6-marks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.q6-pin { fill: var(--accent-fill); stroke: var(--ink); stroke-width: 2; }
.q6-ring { fill: none; stroke: var(--accent); stroke-width: 3; }
.q6-band { fill: none; stroke: var(--accent-fill); stroke-opacity: .35; stroke-linecap: round; stroke-linejoin: round; }
.q6-zoom { position: absolute; right: 8px; top: 8px; display: grid; gap: 6px; }
.q6-zoom-btn { width: 44px; height: 44px; border: 0; background: var(--sheet-2); box-shadow: 0 0 0 1px var(--ink); font-size: 22px; cursor: pointer; }
.q6-fail { position: absolute; inset: 0; display: grid; align-content: center; gap: 8px; padding: 16px; text-align: center; background: var(--paper-3); }
.q6-fail p { margin: 0; }
.q6-hint { margin: 0; text-align: center; }
.q6-check { height: 52px; flex: none; }
.q6-check:disabled { background: var(--pencil); color: var(--ink-2); cursor: default; }
.q6-caption { grid-column: 2; margin: 0; padding: var(--edge) var(--edge) 0; border-left: 3px double var(--ink); }
.q6-result { flex: none; display: grid; gap: 2px; }
.q6-result p { margin: 0; }
.q6-result .result-head { margin-bottom: 6px; }
.q6-verdict { line-height: 23px; } /* 24 px tall with its padding: the old verdict line's signed-off height */
/* A fresh CHECK pops the verdict in, with the lost sheep's motion. */
.q6-verdict--in { animation: sheep-in 250ms cubic-bezier(.34, 1.56, .64, 1) both; }
@media (prefers-reduced-motion: reduce) { .q6-verdict--in { animation: none; } }
.q6-answer { font-size: 18px; font-weight: 600; }
.q6-cite { font-size: 14px; line-height: 19px; }
.q6-link { font-size: 14px; color: var(--accent); min-height: 24px; }
/* Phone: the game's stacked order, the body scrolling only on a screen too short to hold it. */
@media (max-width: 767px) {
  .q6 { display: flex; flex-direction: column; }
  .q6-body { flex: 1 1 0; display: flex; flex-direction: column; gap: 8px; padding: 8px var(--edge) 6px; overflow: hidden auto; overscroll-behavior: contain; }
  .q6-panel { display: contents; }
  .q6-head { order: 0; height: auto; min-height: 46px; }
  .q6-ask-card { order: 1; padding: 8px 12px; }
  .q6-ask { font-size: 18px; line-height: 22px; min-height: 44px; }
  .q6-stage { order: 2; flex: 1 1 auto; }
  .q6-strip { order: 3; height: 96px; }
  .q6-result { order: 3; padding: 8px 12px; }
  .q6-actions { order: 4; }
  .q6-caption { border: 0; padding: 0; margin: 0 var(--edge); flex: none; }
}

/* Hold to aim: the pin lifts above the finger and wobbles slightly so it reads as picked up. */
.aiming .pin { transform-origin: center; box-shadow: 0 6px 10px rgba(0,0,0,.28); }

/* UX2: the last open day of the past week */
.pw-name .last-tag { margin-left: 8px; vertical-align: 1px; }
.pw-list li.pw-last { background: var(--sheet-2); box-shadow: inset 3px 0 0 var(--accent-fill); padding: 4px 6px 4px 9px; }
.pw-name small.closes { color: var(--accent); font-weight: 600; }

/* Staggered menu motion: reduced motion drops the delay too, so everything lands at once. */
@media (prefers-reduced-motion: reduce) {
  .stamp-slam, .menu-list .menu-item, .sv-present, .sv-present * { animation-delay: 0s !important; }
}

/* Design 3: menu items as small illustrated objects, drawn in menu-art.js. Colour comes from these classes. */
.menu-item { grid-template-columns: 44px 1fr; column-gap: 12px; align-items: center; }
.menu-item .mi-icon { grid-row: 1 / 3; grid-column: 1; width: 44px; height: 44px; display: grid; place-items: center; transform-origin: 50% 80%; transition: transform .2s cubic-bezier(.34,1.56,.64,1); }
.menu-item .mi-icon svg { width: 40px; height: 40px; overflow: visible; }
.menu-item .mi-label { grid-column: 2; }
.menu-item .mi-sub { grid-column: 2; }
.menu-item:hover .mi-icon, .menu-item:focus-visible .mi-icon { transform: rotate(-5deg) scale(1.08); }
.menu-list .menu-item { animation: mi-in .36s cubic-bezier(.34,1.56,.64,1) both; }
.menu-list .menu-item:nth-child(1) { animation-delay: .02s; }
.menu-list .menu-item:nth-child(2) { animation-delay: .07s; }
.menu-list .menu-item:nth-child(3) { animation-delay: .12s; }
.menu-list .menu-item:nth-child(4) { animation-delay: .17s; }
.menu-list .menu-item:nth-child(5) { animation-delay: .22s; }
.menu-list .menu-item:nth-child(6) { animation-delay: .27s; }
.menu-list .menu-item:nth-child(7) { animation-delay: .32s; }
@keyframes mi-in { from { opacity: 0; transform: translateX(-14px) scale(.97); } to { opacity: 1; transform: none; } }
.mi-icon .ma-cloth { fill: var(--ink-2); stroke: var(--ink); stroke-width: 1.2; }
.mi-icon .ma-paper, .mi-icon .ma-paper-card, .mi-icon .ma-tag { fill: var(--sheet); stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }
.mi-icon .ma-line, .mi-icon .ma-paper-line, .mi-icon .ma-ticks { fill: none; stroke: var(--ink-2); stroke-width: 1.4; stroke-linecap: round; }
.mi-icon .ma-paper-line { stroke: var(--sheet); }
.mi-icon .ma-acc { fill: var(--accent-fill); stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; }
.mi-icon .ma-acc-line { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; }
.mi-icon .ma-edge { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linecap: round; }
.mi-icon .ma-ring { fill: none; stroke: var(--sheet); stroke-width: 1.2; }
.mi-icon .ma-stamp { fill: var(--accent-fill); stroke: var(--ink); stroke-width: 1.2; }
.mi-icon .ma-stamp-tick { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mi-icon .ma-box { fill: var(--pencil); stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }
.mi-icon .ma-box-top { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }
.mi-icon .ma-string { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mi-icon .ma-ticket { fill: var(--accent-fill); stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }
.mi-icon .ma-perf { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 2 2; }
.mi-icon .ma-dial { fill: var(--sheet); stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }
.mi-icon .ma-needle { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; transform-origin: 20px 29px; transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.mi-icon .ma-hub { fill: var(--ink); }
.menu-item:hover .ma-needle, .menu-item:focus-visible .ma-needle { transform: rotate(-30deg); }
.mi-icon .ma-fold { fill: var(--paper-3); stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }
.mi-icon .ma-pencil { fill: var(--accent-fill); stroke: var(--ink); stroke-width: 1.1; stroke-linejoin: round; }
.mi-icon .ma-hole { fill: var(--paper-3); stroke: var(--ink); stroke-width: 1.2; }

/* Design 4: previews of each setting. */
.pv-pair { display: flex; gap: 8px; }
.pv { flex: 1; min-width: 0; margin: 0; display: grid; gap: 3px; padding: 4px; border-radius: var(--radius-key); background: var(--sheet-2); box-shadow: 0 0 0 1px var(--pencil); opacity: .75; transition: opacity .2s, box-shadow .2s; }
.pv svg { width: 100%; height: auto; display: block; }
.pv figcaption { font-size: 12px; line-height: 16px; text-align: center; color: var(--ink-2); }
.pv--on { opacity: 1; box-shadow: 0 0 0 2px var(--ink); animation: pv-pop .3s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes pv-pop { from { transform: scale(.94); } to { transform: none; } }
.pv-sea { fill: var(--paper-3); }
.pv-land { fill: var(--sheet); stroke: var(--ink-2); stroke-width: 1; stroke-linejoin: round; }
.pv-land--bare { stroke: var(--ink); stroke-width: 1.3; }
.pv-text { font: 600 6px var(--font-body, sans-serif); fill: var(--ink); text-anchor: middle; }
.pv-text--sea { fill: var(--ink-2); font-style: italic; }
.pv-mono { font: 6px ui-monospace, monospace; fill: var(--ink); }
.pv-pin { fill: var(--accent-fill); stroke: var(--ink); stroke-width: 1; }
.pv-readout { fill: var(--sheet); stroke: var(--ink); stroke-width: .8; }
.pv-border { fill: none; stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 1.5; stroke-linecap: round; }
.pv-face { fill: var(--sheet); stroke: var(--ink); stroke-width: 1.2; }
.pv-arc { fill: none; stroke: var(--accent-fill); stroke-width: 3; stroke-linecap: round; }
.pv-hand { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.pv-big { font: 11px var(--font-figure, serif); fill: var(--ink); }
.pv-list { fill: var(--sheet); stroke: var(--ink); stroke-width: .8; }
.pv-row { fill: none; stroke: var(--ink-2); stroke-width: 1.4; stroke-linecap: round; }
.pv-lens { fill: var(--sheet); fill-opacity: .6; stroke: var(--ink); stroke-width: 1.6; }
.pv-handle { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }

/* PX2: souvenir present flow, one card at a time. */
.sv-present { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: var(--edge); background: rgb(0 0 0 / .55); animation: sv-fade .2s both; }
.sv-card { width: min(100%, 320px); display: grid; justify-items: center; gap: 8px; text-align: center; padding: 20px 16px 16px; border-radius: var(--radius-card); background: var(--sheet); box-shadow: 0 0 0 1px var(--ink), var(--shadow-lift); animation: sv-pop .42s cubic-bezier(.34,1.56,.64,1) both; }
.sv-card img { width: 96px; height: 96px; object-fit: contain; animation: sv-pop .5s .08s cubic-bezier(.34,1.56,.64,1) both; }
.sv-card .sv-title { margin: 0; font-family: var(--font-display); font-size: 24px; line-height: 30px; }
.sv-card .fine { margin: 0; }
.sv-card .sv-n { margin: 0; font-size: 12px; color: var(--ink-2); letter-spacing: .06em; }
.sv-card .seg { width: 100%; margin-top: 6px; }
@keyframes sv-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sv-pop { from { opacity: 0; transform: scale(.8) rotate(-3deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .menu-list .menu-item, .pv--on, .sv-present, .sv-present *, .menu-item .mi-icon, .mi-icon .ma-needle { animation: none !important; transition: none !important; }
}