:root {
  --ink: #211508;
  --brown: #6e2f08;
  --rust: #a3430b;
  --gold: #d79316;
  --frame: #f3a72a;
  --paper: #fff58a;
  --cream: #fffbd1;
  --sky: #65c9e8;
  --green: #39a72d;
  --red: #b72c17;
  --white: #fffef0;
  --paper-texture: url("./assets/parchment-texture.png");
  /* One tint per season, so the month picker and the leaderboard name the same four things the same way. */
  --spring: #4ea82f;
  --summer: #e2a417;
  --fall: #c2570e;
  --winter: #6fa8cd;
  --animal-common: #6e2f08;
  --animal-rare: #c77a16;
  --animal-special: #7b3f98;
}

[data-season="spring"] { --season: var(--spring); }
[data-season="summer"] { --season: var(--summer); }
[data-season="fall"] { --season: var(--fall); }
[data-season="winter"] { --season: var(--winter); }

* { box-sizing: border-box; }

html { font-size: 20px; }
html, body { min-height: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(circle at 50% 8%, #3a2a18 0, #171009 34rem, #060504 70rem),
    #060504;
  color: var(--ink);
  font-family: "VT323", ui-monospace, monospace;
  font-synthesis: none;
  image-rendering: pixelated;
}

button, input { font: inherit; }

button { touch-action: manipulation; }

/* Screenshot fixtures opt into a quiet, deterministic frame. The class is set
   only for ?gallery-screen=... and has no effect on normal play. */
.gallery-capture *, .gallery-capture *::before, .gallery-capture *::after {
  animation: none !important;
  transition: none !important;
  caret-color: transparent !important;
}

.app-shell {
  /* The screen is 3:2, so the cabinet is also capped by the window's height: 216px is the chrome
     above and below the screen plus the margins, 98px the frame on either side. */
  width: min(1180px, calc(100vw - 24px), max(720px, calc((100dvh - 216px) * 1.5 + 98px)));
  margin: 12px auto;
}

.game-bar {
  min-height: 54px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  color: #f8edd4;
  letter-spacing: .06em;
  border: 2px solid #3e2a15;
  border-bottom: 0;
  background: #0d0906;
  padding: 10px 16px;
}

.brand { font-size: 1.05rem; font-weight: 700; color: inherit; text-decoration: none; cursor: pointer; }
.brand:hover, .brand:focus-visible { text-decoration: underline; }
.brand-mark { color: var(--frame); }
.bar-copy { color: #b7a98f; font-size: .9rem; }

.sound-toggles {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
}

.sound-button {
  border: 0;
  color: #f8edd4;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
}
.sound-button.is-off { color: #8a7a60; }

.ornate-frame {
  position: relative;
  padding: 12px;
  background: #f2a128;
  border: 24px solid transparent;
  border-image: url("./assets/deluxe-frame-border.png") 24 round;
  box-shadow:
    inset 0 0 0 3px #7a3009,
    0 20px 70px rgba(0,0,0,.55);
}

.ornate-frame::before,
.ornate-frame::after {
  content: none;
}

.inner-bevel {
  border: 8px ridge #b9660d;
  background: #b9660d;
  padding: 5px;
}

.screen {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 3px solid var(--ink);
  background: var(--paper);
}

.help-strip {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: #cdbb9c;
  background: #0d0906;
  border: 2px solid #3e2a15;
  border-top: 0;
  padding: 10px 14px;
  font-size: .82rem;
}

.screen-panel { position: absolute; inset: 0; }
/* Every screen is laid out to fit 3:2; scrolling is only a safety net for odd window shapes. */
.screen-panel:not(.hunt-screen) { overflow-y: auto; }

.title-screen {
  display: grid;
  place-items: end center;
  padding: 28px;
  background:
    linear-gradient(to bottom, rgba(101,201,232,.08), transparent 55%),
    url("./assets/title-landscape.png") center / cover no-repeat;
}

.title-ribbon {
  position: absolute;
  top: 7%;
  left: 5%;
  right: 5%;
  /* The title is centered on the ribbon's cream front face (rows 23–117 of the
     art's 180); the folded tails fill the artwork below that face. */
  padding: 38px 88px 79px;
  color: #130c06;
  text-align: center;
  background: url("./assets/title-ribbon.png") center / 100% 100% no-repeat;
  container-type: inline-size;
}

.title-ribbon h1 {
  margin: 0;
  font-family: "Rye", Georgia, serif;
  /* Cap the display face before the widest glyphs can touch the folded edge. */
  font-size: min(clamp(2.3rem, 5.3vw, 4.8rem), 8.7cqi);
  font-weight: 400;
  line-height: 1.02;
  white-space: nowrap;
  letter-spacing: .02em;
  text-shadow: 3px 3px 0 #d3a64d;
}

.menu-row {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.menu-row .pixel-button {
  min-width: 170px;
  padding-inline: 20px;
  font-size: 1.05rem;
  white-space: nowrap;
}

.pixel-button {
  min-height: 46px;
  padding: 8px 14px;
  color: var(--ink);
  border: 3px solid var(--ink);
  background: var(--paper);
  box-shadow: inset -3px -3px 0 #c58e21, inset 3px 3px 0 var(--white);
  cursor: pointer;
  font-weight: 700;
  letter-spacing: .03em;
}

.pixel-button:hover,
.pixel-button:focus-visible { background: var(--white); outline: 3px solid var(--rust); outline-offset: 2px; }
.pixel-button:active { transform: translate(2px, 2px); box-shadow: inset 2px 2px 0 #c58e21; }
.pixel-button.primary { background: #fff36b; }
.pixel-button.small { min-height: 38px; padding: 5px 12px; }

.paper-screen { padding: clamp(14px, 3.4vw, 40px) clamp(20px, 5vw, 64px); background-color: var(--paper); background-image: var(--paper-texture); }
.paper-screen h2 { margin: 0 0 18px; text-align: center; font-size: clamp(1.6rem, 3vw, 2.5rem); }
.paper-screen p { max-width: 760px; margin: 0 auto 24px; font-size: clamp(1rem, 1.8vw, 1.35rem); line-height: 1.55; }

.setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 36px; align-items: start; max-width: 900px; margin: 0 auto; }
.field label { display: block; margin-bottom: 8px; font-weight: 700; }
.field input { width: 100%; border: 3px solid var(--ink); background: #fffbc4; padding: 10px; }
/* The line under a name field. It starts as a quiet rule; `nudge` says why a keystroke didn't land, and `refused`
   is the trail boss turning a name down: plain and readable, a paper note rather than a red error. */
.name-note { margin: 6px 0 0; color: #6d5a33; font-size: .85em; font-style: italic; line-height: 1.25; }
.name-note.nudge { color: var(--ink); font-style: normal; }
.name-note.refused { padding: 6px 10px; border: 3px solid var(--ink); border-left-width: 8px; border-left-color: var(--fall); background: #fff1b8; color: var(--ink); font-style: normal; font-weight: 700; animation: note-in .25s ease-out; }
@keyframes note-in { from { transform: translateY(-4px); opacity: 0; } }
.choice-box { border: 3px solid var(--ink); padding: 16px; }
.choice-box legend { padding: 0 10px; font-size: 1.2rem; font-weight: 700; }
.choice-box label { display: block; margin: 6px 0; font-size: 1.08rem; }
.setup-column { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.paper-screen .party-heading { margin: 0 0 8px; text-align: left; font-size: 1.2rem; }
.setup-grid .choice-box p { margin: 4px 0 0; font-size: 1.05rem; line-height: 1.3; }
.setup-actions { grid-column: 1 / -1; display: flex; justify-content: center; gap: 16px; }
.setup-ok { min-width: 220px; min-height: 58px; font-size: 1.35rem; letter-spacing: .12em; }

.dashboard {
  display: grid;
  grid-template-columns: 15% 43% 27% 15%;
  grid-template-rows: minmax(0, 1fr);
  container-type: size;
  /* The dashboard's one body-text size: the journal, the Conditions rows and the guide all use it.
     Its cqw resolves against the dashboard wherever it's used, even on the guide panel (itself a container). */
  --dash-text: clamp(.74rem, 2.25cqw, 1.4rem);
  background: #fff58a;
  border: 2px solid var(--ink);
  box-shadow: inset 0 0 0 2px #fffbc8;
}
.side-rail {
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  align-items: center;
  padding: 4px 6px;
  border-right: 3px solid #6b3309;
  background: #fff58a;
}
.side-rail.right { border-right: 0; border-left: 3px solid #6b3309; }
.rail-button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.rail-medallion {
  display: block;
  /* As big as the row allows once the label is under it. */
  width: min(11.5cqw, calc(25cqh - 40px), 102px);
  aspect-ratio: 1;
  background-image: url("./assets/dashboard-icon-atlas.png");
  background-repeat: no-repeat;
  background-size: 500% 200%;
  background-position: calc(var(--icon-column) * 25%) calc(var(--icon-row) * 100%);
  image-rendering: pixelated;
  transition: transform 80ms steps(1);
  flex: 0 0 auto;
}
.rail-label {
  /* Tucked under its own medallion, overlapping the rim a little, like the old game's ribbons. */
  position: relative;
  z-index: 1;
  width: calc(100% + 8px);
  height: 42px;
  margin-top: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  /* Keep the baseline above the lower fold at every responsive text size. */
  padding: 4px 6px 12px;
  color: #241406;
  background-image: url("./assets/dashboard-ribbon.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  line-height: 1;
  font-size: clamp(.66rem, 2.05cqw, 1.15rem);
  font-weight: 700;
  letter-spacing: .015em;
  white-space: nowrap;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 #d9a43a;
  image-rendering: pixelated;
}
.rail-button[data-label="LEADERBOARD"] .rail-label,
.rail-button[data-label="ACHIEVEMENTS"] .rail-label,
.rail-button:hover .rail-medallion,
.rail-button:focus-visible .rail-medallion { transform: translateY(-2px); filter: brightness(1.08); }
.rail-button:focus-visible { outline: 3px solid var(--rust); outline-offset: -2px; }
.rail-button.active .rail-label { filter: brightness(1.08) saturate(1.15); }
.rail-button.not-yet { cursor: default; }
.rail-button.not-yet .rail-medallion,
.rail-button.not-yet:hover .rail-medallion,
.rail-button.not-yet:focus-visible .rail-medallion { transform: none; filter: grayscale(.75) opacity(.55); }
.rail-button.not-yet .rail-label { color: #6d5a33; text-shadow: none; }
/* MAP starts locked for a brand new career. */
.rail-button.locked { cursor: default; }
.rail-button.locked .rail-medallion,
.rail-button.locked:hover .rail-medallion,
.rail-button.locked:focus-visible .rail-medallion { transform: none; filter: grayscale(1) brightness(.6); opacity: .55; }
.rail-button.locked .rail-label { color: #6d5a33; text-shadow: none; }
/* Rail controls can carry a padlock or a NEW badge. */
.rail-badge { position: absolute; top: 6%; right: 14%; z-index: 2; display: grid; place-items: center; pointer-events: none; }
.rail-badge.new { padding: 2px 6px; border: 2px solid var(--ink); background: #ffe04d; color: var(--red); font-size: .8rem; font-weight: 700; line-height: 1; box-shadow: 2px 2px 0 var(--rust); animation: blink 1s steps(2) infinite; }
.rail-badge.locked { padding: 4px; border: 2px solid var(--ink); background: var(--cream); }
/* A padlock drawn in CSS: a body, and a shackle (::before) that lifts off it once open. */
.padlock { position: relative; display: inline-block; width: .6em; height: .48em; margin: .32em .3em 0 0; border-radius: 2px; background: var(--ink); vertical-align: baseline; }
.padlock::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: .4em; height: .36em; margin-left: -.2em; border: .1em solid var(--ink); border-bottom: 0; border-radius: .2em .2em 0 0; box-sizing: border-box; }
.padlock.open::before { transform: translate(.24em, -.1em); }
.rail-badge .padlock { margin: .3em 0 0; font-size: 1.1rem; }

.dashboard-main { position: relative; display: grid; grid-template-rows: minmax(0, 50%) auto minmax(0, 1fr); min-width: 0; border-right: 3px solid #6b3309; }
.trail-view {
  position: relative;
  overflow: hidden;
  /* Longhands, because a MAP stop's scene is two layers: its painting over its hunt field (sceneAsset in main.js). */
  background-color: #68cee9;
  background-image: var(--trail-scene, url("./assets/dashboard-trail-scene.png"));
  background-position: center 38%;
  background-size: cover;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}
/* The location heads the bottom half, above the journal. */
.location {
  padding: 6px 8px;
  text-align: center;
  background: #fff58a;
  border-top: 3px solid #6b3309;
  border-bottom: 3px solid #6b3309;
  font-size: clamp(.95rem, 3cqw, 1.75rem);
  font-weight: 700;
}
.journal {
  margin: 0;
  padding: 8px 12px;
  overflow: auto;
  scrollbar-color: #5c5c5c #d7d7d7;
  font-size: var(--dash-text);
  line-height: 1.14;
  font-weight: 700;
  background: #fff58a;
}
.journal p { margin: 0 0 4px; }
/* Each day opens with its date, so the space above a date is the gap under the day before it.
   The first line showing needs none: there is no day above it to separate from. */
.journal p.journal-day:not(:first-child) { margin-top: 12px; }

.conditions {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  min-width: 0;
  padding: 8px 12px 10px;
  background: #fff58a;
}
.conditions h2, .conditions h3 { margin: 0; text-align: center; }
.conditions h2 { font-size: clamp(1.4rem, 4.3cqw, 2.7rem); line-height: .9; }
.conditions-head > h3 { font-size: clamp(.9rem, 2.6cqw, 1.6rem); }
.stat-group { margin: 5px 0 0; padding-top: 4px; }
.stat-group h3 { font-size: clamp(1.2rem, 3.5cqw, 2.2rem); }
.stat-row { display: flex; justify-content: space-between; gap: 8px; margin: 2px 0; font-size: var(--dash-text); line-height: 1.05; }
.stat-row strong { white-space: nowrap; }
.wagon-stats .stopped { margin-top: 12px; }
.dashboard-actions { display: grid; gap: 8px; padding-top: 8px; border-top: 3px solid #6b3309; }
.trail-command {
  min-height: 39px;
  color: var(--ink);
  border: 5px double #82400c;
  border-radius: 7px;
  background: #fffbd1;
  box-shadow: inset 0 0 0 2px #f0bd41;
  cursor: pointer;
  font-size: clamp(.8rem, 2.5cqw, 1.5rem);
  font-weight: 700;
  letter-spacing: .03em;
}
.trail-command:hover,
.trail-command:focus-visible { background: #fff; outline: 2px solid var(--rust); }

.hunt-screen { display: grid; place-items: center; padding: clamp(6px, 2vw, 18px); background: var(--paper); container-type: size; }
/* Size from the space the panel actually has (container units), not a guess at the chrome around it. */
.hunt-stage {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(100cqw, calc(100cqh * 4 / 3));
  max-height: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 3px solid var(--ink);
  background: #fff58a;
  box-shadow: inset 0 0 0 3px #fffbc8, 6px 6px 0 #a75b0b;
}
#hunt-canvas {
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 8 / 5;
  cursor: none;
  touch-action: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.hunt-controls {
  position: relative;
  inset: auto;
  grid-row: 2;
  height: auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  place-items: center;
  gap: 8%;
  padding: 1.5% 9%;
  border-top: 2px solid var(--ink);
  background: #fff58a;
}
.hunt-controls::before,
.hunt-controls::after {
  content: "⌜⌟";
  position: absolute;
  bottom: 4px;
  color: #b14c0d;
  font-size: clamp(.7rem, 1.5vw, 1.1rem);
  letter-spacing: 2px;
}
.hunt-controls::before { left: 6px; }
.hunt-controls::after { right: 6px; transform: scaleX(-1); }
.hunt-command {
  width: 100%;
  min-height: 35px;
  padding: 3px 10px;
  border: 2px solid #5d2507;
  border-radius: 7px;
  color: var(--ink);
  background: #fffef0;
  box-shadow: 0 0 0 3px #f5c335, 0 0 0 5px #6e2f08, inset 2px 2px 0 #fff;
  cursor: pointer;
  font-weight: 700;
  letter-spacing: .05em;
}
.hunt-command:hover,
.hunt-command:focus-visible { background: #fffbd1; outline: 2px solid #9f3c09; outline-offset: 5px; }
.hunt-command:active { transform: translate(1px, 1px); }
.hunt-stage.is-moving #hunt-canvas { opacity: .35; }
.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; }

.modal {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 5;
  padding: 24px;
  background: rgba(20,11,5,.68);
}
.modal-card { width: min(620px, 100%); padding: 24px; background: var(--paper); border: 5px solid var(--ink); box-shadow: 10px 10px 0 var(--rust); text-align: center; }
.modal-card h2 { margin-top: 0; font-size: 2rem; }
.modal-card p { font-size: 1.15rem; }

/* Up off the bottom edge, clear of the grass and the buttons under the field. */
.toast { position: absolute; left: 50%; bottom: 30%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); text-align: center; z-index: 10; background: var(--paper); border: 3px solid var(--ink); padding: 10px 16px; box-shadow: 5px 5px 0 var(--rust); }

/* ── Results, achievements, ledger ───────────────────────── */
.results-screen { overflow: auto; padding: clamp(6px, 1.4vw, 12px); }
.results-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(880px, 100%);
  height: min(640px, 100%);
  max-height: 100%;
  overflow: hidden;
  padding: 0;
  border: 4px solid #6e2f08;
  box-shadow: inset 0 0 0 3px #ffdc55, 7px 7px 0 #6e2f08;
  background: #fff58a;
}
.results-banner { position: relative; padding: 7px 24px 6px; border-bottom: 4px double #6e2f08; background: #fffbd1; text-align: center; }
.results-banner::before, .results-banner::after { content: "◆ ◇ ◆ ◇ ◆"; position: absolute; top: 50%; color: #a3430b; font-size: .55rem; letter-spacing: 3px; transform: translateY(-50%); }
.results-banner::before { left: 15px; }
.results-banner::after { right: 15px; }
.results-banner > span { display: block; color: #704511; font-size: .7rem; letter-spacing: .12em; }
.results-card h2 { margin: 0; font-family: "Rye", Georgia, serif; font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 400; }
.results-reason { margin: 1px 0 0 !important; font-size: .92rem !important; }
.results-columns { display: grid; grid-template-columns: minmax(320px, 47%) 1fr; min-height: 0; }
.score-panel { display: flex; flex-direction: column; justify-content: safe center; gap: 10px; min-height: 0; overflow: auto; padding: 14px 18px; border-right: 3px solid #6e2f08; background: #fff58a; }
/* Score / Bonus points / Final score each sit in their own card, so the ledger reads as three grouped steps instead of one dense list. */
.ledger-group { background: rgba(255, 255, 255, .4); border: 2px solid #c9a44a; border-radius: 8px; padding: 7px 14px; box-shadow: 2px 2px 0 rgba(110, 47, 8, .25); }
.ledger-group .ledger-heading-row, .ledger-group .ledger-heading-row.ledger-bonus-heading { margin-top: 0; }
.ledger-group .ledger-line { margin: 5px 0; }
.ledger-group-final { text-align: center; }
.ledger-group-final .final-score { margin: 0; padding: 0; border-top: 0; }
.awards-panel { min-width: 0; overflow: auto; padding: 12px 16px; background: #fff8a8; }
.final-score { display: grid; justify-items: center; margin: 8px 0 0; padding-top: 7px; border-top: 3px double #6e2f08; }
.final-score small { font-size: .8rem; letter-spacing: .15em; }
.final-score span { font-size: clamp(2.4rem, 5.5vw, 3.4rem); font-weight: 700; line-height: .9; text-shadow: 3px 3px 0 var(--gold); }
.final-score em { margin-top: 4px; font-style: normal; font-weight: 700; color: var(--red); animation: blink 1s steps(2) infinite; }
.ledger { width: 100%; margin: 0 auto; padding: 2px 0; text-align: left; }
.ledger-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0; border-bottom: 1px dotted #b38b3a; }
.ledger > .ledger-line:last-child { border-bottom: 0; }
.ledger-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-width: 0; line-height: 1.05; }
.ledger-label > small { color: #6d5a33; font-size: .64em; font-weight: 400; white-space: nowrap; }
.ledger-line.bad strong { color: var(--red); }
.ledger-line strong, .final-score span, .board .pts { font-family: "VT323", ui-monospace, monospace; font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.ledger-line strong { line-height: 1; }
.ledger-line strong small { font-size: .8em; color: #6d5a33; }
/* A compact checkpoint separates points won in the field from end-of-hunt bonuses. */
.ledger-line.subtotal { margin-top: 4px; border-bottom: 0; border-top: 2px solid #b38b3a; padding-top: 3px; font-weight: 700; }
.ledger-heading-row { position: relative; display: flex; align-items: center; gap: 5px; width: fit-content; }
.ledger-heading-row.ledger-bonus-heading { margin-top: 9px; }
.ledger-heading-row .ledger-heading { margin-top: 0; }
.ledger-help-button { display: grid; place-items: center; width: 17px; height: 17px; padding: 0; border: 1px solid currentColor; border-radius: 50%; background: transparent; color: #6d5a33; font: 700 .66rem/1 Georgia, serif; cursor: pointer; }
.ledger-help-button:hover, .ledger-help-button:focus-visible { background: #6d5a33; color: #fffbd1; outline: 2px solid #fffbd1; outline-offset: 1px; }
.ledger-help-popover { position: absolute; z-index: 4; top: calc(100% + 4px); left: 0; width: min(310px, calc(100vw - 54px)); padding: 7px 9px; border: 2px solid #6e2f08; background: #fffbd1; box-shadow: 3px 3px 0 #b38b3a; color: #3b2410; font-size: .68rem; line-height: 1.2; letter-spacing: normal; text-transform: none; }
.ledger-help-popover[hidden] { display: none; }
.ledger-help-popover p { margin: 0 0 5px; }
.ledger-help-popover p:last-child { margin-bottom: 0; }
.achievements-heading { margin: 0 0 8px; padding-bottom: 5px; border-bottom: 3px double #6e2f08; letter-spacing: .12em; text-transform: uppercase; }
.awards-panel .achievements-heading:not(:first-child) { margin-top: 14px; }
/* Game Bagged: a picture tile per species with its count. */
.bag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.bag-tile { display: grid; justify-items: center; gap: 0; padding: 4px 2px 2px; background: var(--cream); border: 2px solid #6e2f08; }
.bag-tile .guide-animal-sprite { width: 56px; height: 50px; }
.bag-tile strong { font-family: "VT323", ui-monospace, monospace; font-weight: 400; font-size: 1.25rem; line-height: 1; color: #3b2410; }
.hunt-achievement-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; }
.hunt-achievement { display: grid; justify-items: center; gap: 2px; padding: 8px 7px; background: var(--cream); border: 2px solid #6e2f08; box-shadow: 3px 3px 0 var(--gold); opacity: 0; animation: achievement-in .45s cubic-bezier(.2, 1.6, .5, 1) forwards; }
.hunt-achievement-icon {
  display: block;
  width: 48px;
  height: 48px;
  background: url("./assets/hunt-achievement-atlas.png") no-repeat;
  background-size: 800% 500%;
  background-position: calc(var(--award-column) * 14.285714%) calc(var(--award-row) * 25%);
  image-rendering: pixelated;
}
.hunt-achievement small { font-size: .8rem; line-height: 1.25; }
.achievement-none { margin: 0; }
.new-game-achievements { display: grid; gap: 4px; margin-top: 10px; padding: 8px; background: #ffe04d; border: 2px dashed var(--ink); animation: achievement-in .45s 1.8s both; }
.results-footer { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 7px 16px; border-top: 4px double #6e2f08; background: #fffbd1; }
.ledger-signed { margin: 0; }
/* The technical line under a refused score: there to be read out or screenshotted, so it stays selectable. */
.ledger-detail {
  display: block;
  margin-top: 4px;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: .64rem;
  line-height: 1.35;
  color: #9b8a6d;
  word-break: break-word;
  user-select: all;
}
.results-actions { display: flex; gap: 8px; }
.results-footer .pixel-button { min-height: 38px; padding: 5px 12px; }
@keyframes achievement-in { from { opacity: 0; transform: scale(.4) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes bonus-flash {
  0% { opacity: 0; transform: scale(.9); background: transparent; }
  45% { opacity: 1; transform: scale(1.04); background: #ffe04d; }
  100% { opacity: 1; transform: scale(1); background: transparent; }
}
.ledger-line.score-reveal, .score-checkpoint { opacity: 0; }
.ledger-line.score-reveal.revealed, .score-checkpoint.revealed { opacity: 1; }
.ledger-line.score-reveal.counting { animation: bonus-pulse .6s ease-in-out infinite alternate; }
@keyframes bonus-pulse {
  from { transform: scale(1); background: transparent; }
  to { transform: scale(1.035); background: #ffe04d; }
}
@keyframes blink { 50% { opacity: .35; } }

/* ── Leaderboard and achievements ──────────────────────────── */
.scores-screen, .achievements-screen { overflow: auto; padding: clamp(10px, 2.2vw, 24px); }
.scores-screen h2, .achievements-screen h2 { margin-bottom: 14px; }
.section-art {
  width: 160px;
  height: 100px;
  flex: 0 0 auto;
  background: url("./assets/menu-section-art.png") 0 0 / 300% 100% no-repeat;
  image-rendering: pixelated;
}
/* The first cell was drawn as a field guide -- quail plates, tracks, a feather and a spyglass -- and went unused
   until the guide got a screen of its own. */
.section-art-guide { background-position: 0 0; }
.section-art-leaderboard { background-position: 50% 0; }
.section-art-achievements { background-position: 100% 0; }
.score-ledger-shell { width: min(760px, 100%); min-height: 100%; margin: 0 auto; padding: 0 24px 20px; border: 4px solid #6e2f08; background: #fffbd1; box-shadow: inset 0 0 0 3px #f2c44d, 8px 8px 0 #a3430b; }
.score-ledger-title { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 -24px 12px; padding: 4px 20px; border-bottom: 4px double #6e2f08; background: #fff58a; text-align: center; }
.score-ledger-title .section-art { width: 128px; height: 80px; }
.score-ledger-title span { color: #704511; font-size: .7rem; letter-spacing: .14em; }
.score-ledger-title h2 { margin: 0; font-family: "Rye", Georgia, serif; font-weight: 400; }
.board-body { max-width: 640px; min-height: 330px; margin: 0 auto 16px; padding: 8px 14px; border: 3px solid #6e2f08; background: #fffef0; }
.board { margin: 0; padding: 0; list-style: none; border-top: 3px double #6e2f08; }
.board li { display: grid; grid-template-columns: 2.4em 1fr 2em 2.8em 4.5em 5.5em; align-items: center; gap: 6px; padding: 5px 6px; border-bottom: 1px dotted #b38b3a; font-size: 1.05rem; }
.board li:nth-child(-n+3) .rank { color: var(--rust); font-weight: 700; }
.board .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score-animal-sprite { position: relative; display: block; width: 28px; height: 28px; background-position: 0 50%; background-size: 800% auto; background-repeat: no-repeat; image-rendering: pixelated; }
.score-animal-empty { text-align: center; }
.board .when { font-size: .8rem; color: #6d5a33; }
.score-season { justify-self: center; display: block; width: 18px; height: 18px; }
.score-season svg { display: block; width: 100%; height: 100%; }
.score-season.empty { width: auto; height: auto; color: #b38b3a; }
.board .pts { text-align: right; }
.board li.mine { background: #ffe04d; outline: 3px solid var(--rust); animation: blink .6s steps(2) 4; }
.board-empty { text-align: center; }
.ledger-actions { display: flex; justify-content: center; gap: 12px; }
.board-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 640px; margin: 0 auto 10px; }
.board-tab { padding: 4px 12px; border: 3px solid #6e2f08; background: #fffef0; color: var(--ink); font: inherit; font-size: 1rem; cursor: pointer; }
.board-tab:hover, .board-tab:focus-visible { background: #fff58a; }
.board-tab.active { background: #ffe04d; box-shadow: 3px 3px 0 var(--rust); font-weight: 700; }
.family-tabs { margin-top: -4px; padding-top: 7px; border-top: 1px dotted #b38b3a; }
.family-tabs .board-tab { padding: 2px 6px; line-height: 0; }
.family-tab-sprite { position: relative; display: block; width: 40px; height: 34px; background-position: 0 50%; background-repeat: no-repeat; image-rendering: pixelated; }

/* ── Hunt modes ────────────────────────────────────────────── */
.hunt-modes-screen { overflow: auto; padding: clamp(10px, 2.2vw, 24px); }
.trails-note { max-width: 640px; margin: 0 auto 12px; text-align: center; color: #6d5a33; }
.trail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 10px; max-width: 780px; margin: 0 auto 16px; }
.trail-card { position: relative; display: grid; align-content: start; gap: 6px; padding: 12px; border: 3px solid var(--ink); background: var(--cream); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.trail-card strong { font-family: "Rye", Georgia, serif; font-size: 1.15rem; font-weight: 400; }
.trail-card small { font-size: .9rem; line-height: 1.2; }
.trail-card.open { background: #ffe04d; box-shadow: 4px 4px 0 var(--rust); }
.trail-card.open:hover, .trail-card.open:focus-visible { transform: translate(-1px, -2px); box-shadow: 5px 6px 0 var(--rust); }
.trail-card.locked { background: #efe6bd; color: #5a4a2a; }
.trail-card.locked .padlock { background: #5a4a2a; }
.trail-card.locked .padlock::before { border-color: #5a4a2a; }
.trail-new { position: absolute; top: -10px; right: -6px; padding: 2px 6px; border: 2px solid var(--ink); background: var(--white); color: var(--red); font-style: normal; font-weight: 700; animation: blink 1s steps(2) infinite; }
.trail-progress { display: block; height: 10px; border: 2px solid #5a4a2a; background: var(--white); }
.trail-progress span { display: block; height: 100%; background: var(--gold); }
.mode-checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; font-size: .76rem; line-height: 1.2; }
.mode-checklist span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mode-checklist .done { color: #286025; font-weight: 700; }
.hunter-picker { max-width: 680px; margin: 0 auto 16px; }
.hunter-picker h3 { margin: 0 0 8px; border-bottom: 3px solid var(--ink); }
.hunter-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
.hunter-game { position: relative; display: grid; justify-items: center; gap: 2px; padding: 6px; border: 2px solid var(--ink); background: var(--cream); color: var(--ink); font: inherit; cursor: pointer; }
.hunter-game:hover, .hunter-game:focus-visible { background: #ffe04d; }
.hunter-game.locked { color: #6b5a44; background: transparent; cursor: help; }
.hunter-game.locked:hover, .hunter-game.locked:focus-visible { background: rgba(255, 224, 77, .35); }
.hunter-game small { font-size: .75rem; }
.new-trail .padlock { color: var(--ink); }

/* ── Achievements ──────────────────────────────────────────── */
.achievements-title { display: flex; align-items: center; justify-content: center; gap: 16px; margin: -8px 0 8px; }
.achievements-title .section-art { width: 144px; height: 90px; }
.achievements-title h2 { margin: 0; }
.career-line { text-align: center; margin: 3px 0 0; }
.achievements-screen h3 { margin: 16px 0 8px; border-bottom: 3px solid var(--ink); }
.achievements-screen h3 small { font-size: .85rem; }
/* What a section counts and over what span, so Game and Hunt Achievements stay distinct. */
.achievements-screen .section-note { max-width: none; margin: -4px 0 8px; color: #6d5a33; font-size: .82rem; line-height: 1.35; }
.achievements-screen .moved-note { margin-top: 18px; font-style: italic; }
.achievements-screen, .scores-screen { cursor: pointer; }
.achievements-back { margin-top: 28px; }
.achievement-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.achievement-card { display: grid; justify-items: center; text-align: center; gap: 2px; padding: 8px; border: 3px solid var(--ink); background: var(--cream); }
.achievement-card small { font-size: .78rem; line-height: 1.2; }
.achievement-card.got { background: #ffe04d; box-shadow: 3px 3px 0 var(--rust); }
.achievement-card.locked { opacity: .55; }
.art-icon { display: block; width: 48px; height: 48px; image-rendering: pixelated; }
.achievement-icon { background: url("./assets/game-achievement-atlas.png") no-repeat; background-size: 800% 200%; background-position: calc(var(--art-column) * 14.285714%) calc(var(--art-row) * 100%); }
.hunt-achievement-gallery-icon { background: url("./assets/hunt-achievement-atlas.png") no-repeat; background-size: 800% 500%; background-position: calc(var(--art-column) * 14.285714%) calc(var(--art-row) * 25%); }
.achievement-card.locked .art-icon { filter: grayscale(1) brightness(.38); }
.achievement-card.secret.locked .achievement-icon { display: grid; place-items: center; background-image: none; filter: none; }
.achievement-card.secret.locked .achievement-icon::before { content: "?"; color: var(--ink); font-size: 1.8rem; }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
.guide-entry { position: relative; display: grid; justify-items: center; padding: 6px; border: 2px solid var(--ink); text-align: center; }
.guide-animal-sprite { display: block; width: 72px; height: 64px; background-position: 0 50%; background-size: 800% auto; background-repeat: no-repeat; image-rendering: pixelated; }
.guide-entry.locked { color: #6b5a44; }
.guide-points { font-size: .8rem; opacity: .7; }

/* ── Easter eggs ───────────────────────────────────────────── */
.ornate-frame.tipped { animation: tip-over 2.6s ease-in-out; transform-origin: 90% 100%; }
@keyframes tip-over {
  0% { transform: none; }
  25%, 60% { transform: rotate(14deg) translateY(30px); }
  70% { transform: rotate(-3deg); }
  80% { transform: rotate(1.5deg); }
  100% { transform: none; }
}

/* Shorter windows make a shorter 3:2 screen: pack the setup form tighter. */
@media (max-height: 800px) {
  .setup-grid { gap: 14px 28px; }
  .setup-column { gap: 12px; }
  .choice-box { padding: 8px 14px; }
  .choice-box label { margin: 3px 0; }
  .field input { padding: 6px 10px; }
  .setup-ok { min-height: 46px; }
  .score-panel { padding-block: 4px; gap: 5px; font-size: .82rem; }
  .score-panel .ledger-heading { margin-top: 2px; font-size: .82em; }
  .score-panel .ledger { padding-block: 0; }
  .score-panel .ledger-line, .score-panel .ledger-group .ledger-line { margin-block: 0; }
  .score-panel .ledger-heading-row.ledger-bonus-heading { margin-top: 4px; }
  .score-panel .ledger-group { padding: 5px 10px; }
  .score-panel .final-score { margin-top: 3px; padding-top: 3px; }
  .score-panel .final-score small { font-size: .64rem; }
  .score-panel .final-score span { font-size: 2.2rem; }
}

@media (max-width: 820px) {
  .app-shell { width: 100%; margin: 0; }
  .game-bar { grid-template-columns: 1fr auto; }
  .bar-copy { display: none; }
  .ornate-frame { padding: 20px; border-width: 3px; }
  .screen { aspect-ratio: auto; height: calc(100vh - 128px); min-height: 500px; }
  .help-strip { display: none; }
  .menu-row .pixel-button { flex: 1 1 40%; min-width: 0; }
  .menu-row .primary { flex-basis: 100%; }
  .dashboard { grid-template-columns: 80px 1fr 180px 80px; }
  .rail-label { font-size: .68rem; }
  .conditions { font-size: .88rem; }
  .conditions h2 { font-size: 1.35rem; }
}

@media (max-width: 640px), (orientation: portrait) {
  .screen { aspect-ratio: auto; min-height: 620px; height: calc(100vh - 106px); }
  .ornate-frame { padding: 8px; border-width: 16px; }
  .game-bar { min-height: 48px; padding: 8px 10px; }
  .brand { font-size: .86rem; }
  .sound-button { font-size: .72rem; }
  .sound-toggles { gap: 8px; }
  .title-screen { padding: 16px; }
  .title-ribbon { top: 6%; left: 2%; right: 2%; padding: 7px 42px 48px; }
  .title-ribbon h1 { font-size: min(2.45rem, 10cqi); }
  .menu-row { gap: 7px; }
  .board li { grid-template-columns: 2em 1fr 1.6em 2.6em 4.5em; }
  .board .when { display: none; }
  .pixel-button { font-size: .82rem; padding: 6px; }
  .setup-grid { grid-template-columns: 1fr; gap: 10px; }
  .setup-column { gap: 10px; }
  .setup-grid .choice-box { padding: 8px 12px; }
  .setup-grid .choice-box label { margin: 4px 0; }
  .setup-grid .choice-box p { margin: 4px 0 0; line-height: 1.2; }
  .setup-grid .occupation label { display: inline-block; margin-right: 12px; }
  .paper-screen .party-heading { margin: 0 0 6px; font-size: 1.1rem; }
  .setup-actions { grid-column: 1; }
  .dashboard { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; overflow: auto; }
  .dashboard-main { grid-column: 1 / -1; grid-row: 1; }
  .conditions { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border: 3px solid var(--ink); max-height: 190px; overflow: auto; }
  .conditions .stat-group { margin: 0; }
  .conditions-head { grid-column: 1 / -1; display: flex; justify-content: center; align-items: baseline; gap: 10px; }
  .conditions-head h2 { font-size: 1rem; }
  .conditions-head > h3 { font-size: .82rem; }
  .dashboard-actions { display: none; }
  .side-rail { display: none; }
  .talk-panel { grid-template-columns: minmax(88px, 34%) minmax(0, 1fr); gap: 8px; padding-right: 10px; }
  .talk-panel .speech-bubble { font-size: clamp(.78rem, 3.2vw, .96rem); }
  .talk-panel .speech-text { padding: 9px 11px; }
  .results-card { height: auto; max-height: none; overflow: visible; }
  .results-banner::before, .results-banner::after { display: none; }
  .results-columns { grid-template-columns: 1fr; }
  .score-panel { border-right: 0; border-bottom: 3px solid #6e2f08; }
  .results-footer { grid-template-columns: 1fr; }
  .ledger-signed { text-align: center; }
  .results-actions { justify-content: center; }
  .score-ledger-shell { padding-inline: 12px; }
  .score-ledger-title { margin-inline: -12px; }
  .score-ledger-title .section-art { width: 96px; height: 60px; }
  .achievements-title { flex-direction: column; gap: 0; }
  .achievements-title .section-art { width: 112px; height: 70px; }
  .board-body { min-height: 260px; padding-inline: 6px; }
  .hunt-stage { width: 100%; }
  .hunt-command { min-height: 30px; font-size: clamp(.62rem, 2.4vw, .82rem); }
}

/* A hunt in progress: fit.js sizes the screen to the field, and the cabinet shrink-wraps it. */
body:has(.app-shell.is-fitted) { display: grid; place-content: center; min-height: 100dvh; }
.is-fitted .game-bar { grid-template-columns: 1fr auto; }
.is-fitted .bar-copy, .is-fitted .help-strip > span + span { display: none; }
.is-fitted .screen { aspect-ratio: auto; min-height: 0; }
.is-fitted .hunt-screen { padding: 0; }
.is-fitted .hunt-stage { border: 0; box-shadow: none; }

/* Landscape phones: height is the scarce axis, so trim the chrome to slivers and let the hunt fill the viewport. */
@media (orientation: landscape) and (max-height: 540px) {
  .app-shell { width: 100%; margin: 0; }
  .game-bar { grid-template-columns: 1fr auto; min-height: 0; padding: 3px 10px; font-size: .78rem; }
  .brand { font-size: .78rem; }
  .bar-copy, .help-strip { display: none; }
  .ornate-frame { padding: 3px; border-width: 8px; box-shadow: inset 0 0 0 2px #7a3009; }
  .ornate-frame::before, .ornate-frame::after { display: none; }
  .inner-bevel { border-width: 3px; padding: 2px; }
  .screen { aspect-ratio: auto; min-height: 0; height: calc(100dvh - 48px); }
  .screen-panel:not(.hunt-screen) { overflow-y: auto; }
  .paper-screen { padding: 14px 24px; }
  .title-screen { padding: 10px; }
  .title-ribbon { top: 5%; left: 7%; right: 7%; padding: 12px 44px 44px; }
  .title-ribbon h1 { font-size: min(clamp(1.6rem, 11vh, 3.4rem), 10cqi); }
  .menu-row { flex-wrap: nowrap; gap: 6px; }
  .menu-row .pixel-button, .menu-row .primary { flex: 0 1 auto; min-width: 0; font-size: .74rem; }
  .pixel-button { min-height: 34px; padding: 4px 6px; font-size: .74rem; }
  .hunt-screen { padding: 3px; }
  .hunt-command { min-height: 0; padding: 1px 8px; font-size: clamp(.62rem, 2.2vh, .9rem); }
  .setup-ok { min-width: 160px; min-height: 42px; font-size: 1rem; }
  /* Hunt Complete: one scrolling report with the action bar pinned to the bottom. */
  .results-screen { place-items: start center; overflow-y: auto; }
  .results-card { height: auto; max-height: none; overflow: visible; grid-template-rows: auto auto auto; }
  .results-banner { padding: 4px 12px; }
  .results-banner > span, .results-banner::before, .results-banner::after { display: none; }
  .results-card h2 { font-size: 1.4rem; }
  .final-score span { font-size: 2.4rem; }
  .score-panel, .awards-panel { padding: 6px 12px; }
  .score-panel { gap: 5px; }
  .score-panel .ledger-group { padding: 5px 10px; }
  .hunt-achievement-icon { width: 36px; height: 36px; }
  .results-footer { position: sticky; bottom: 0; z-index: 2; padding: 5px 12px; }
  /* The dashboard keeps its columns; Conditions shrinks its text and scrolls if it still runs long. */
  .conditions { overflow-y: auto; padding: 4px 8px; }
  .conditions h2 { font-size: 1.2rem; }
  .conditions-head > h3, .stat-group h3 { font-size: .9rem; }
  .stat-group { margin-top: 2px; padding-top: 2px; }
  .stat-row { margin: 0; font-size: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; animation: none !important; }
}

/* TALK and STATUS: panels that cover the trail scene. */
.trail-panel {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #fff58a;
  cursor: pointer;
  font-weight: 700;
}
.talk-panel { display: grid; grid-template-columns: minmax(104px, 42%) minmax(0, 1fr); align-items: stretch; gap: 3%; padding: 8px 4% 16px 0; overflow: hidden; background-color: var(--paper); }
.talk-portrait { position: relative; height: 100%; margin: 0; display: grid; place-items: end center; }
.talk-portrait-image { display: block; height: 100%; width: auto; max-width: 100%; object-fit: contain; image-rendering: pixelated; }
.speech-bubble {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  max-height: 88%;
  border: 3px solid var(--ink);
  border-radius: 30px / 26px;
  background: #fff58a;
  font-size: clamp(.72rem, 1.35vw, 1.02rem);
  line-height: 1.15;
}
/* The scrolling lives inside, so the bubble itself can let its tail hang out. */
.speech-text { flex: 0 1 auto; min-height: 0; overflow: auto; padding: 10px 16px; }
/* A curved tail from the bubble's flat bottom rim (past the 30px corner) out left toward the speaker. Its top edge sits over the rim, so the outline joins up. */
.speech-tail { position: absolute; left: -16px; top: 100%; width: 76px; height: 32px; margin-top: -3px; overflow: visible; pointer-events: none; filter: drop-shadow(3px 3px 0 #49413a); }
.speech-tail path { fill: #fff58a; stroke: var(--ink); stroke-width: 3px; stroke-linejoin: round; }

.choice-panel { display: grid; grid-template-rows: auto 1fr; padding: 6px 14px 16px; }
.choice-panel h3 { margin: 0 0 2px; font-size: clamp(1rem, 1.7vw, 1.28rem); }
/* CHANGE NAME: Account Profile's name field, in the trail scene. */
.name-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-content: center; align-items: center; font-size: var(--dash-text); }
.name-form label { grid-column: 1 / -1; font-weight: 700; }
.name-help { grid-column: 1 / -1; margin: -6px 0 0; color: #6d5a33; font-size: .88em; font-weight: 400; line-height: 1.25; }
.name-input { min-width: 0; border: 3px solid var(--ink); background: #fffbc4; padding: 8px 10px; color: var(--ink); font: inherit; }
.name-actions { display: flex; gap: 8px; }
.name-form .name-note { grid-column: 1 / -1; }
.name-form .name-note.pending { color: #704511; font-style: normal; }
.dashboard.name-modal-open > :not(.dashboard-main),
.dashboard.name-modal-open .location,
.dashboard.name-modal-open .journal { pointer-events: none; }
/* GUIDE: the How to Play pages, paged with arrows. Like TALK, the panel covers only the trail scene, so the
   location and journal stay readable underneath. Pages are kept short enough to fit that box without
   scrolling. Type matches the rest of the dashboard: body text is --dash-text, like the journal, and the
   title is about the location's size. */
.howto-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 1.2cqh; padding: 2cqh 4cqw 1.8cqh; font-size: var(--dash-text); line-height: 1.14; overflow: hidden; container-type: size; }
.howto-panel .howto-footer { margin-top: 0; padding: 1.4cqh 0 0; border-top: 2px dashed #c9a44a; }
.page-button {
  min-width: 5.6em; padding: 4px 10px;
  color: var(--ink); border: 2px solid #000; border-radius: 6px;
  background: #fffbd1; box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px #c9a44a, 2px 2px 0 #6b3309;
  font: inherit; font-size: 1em; font-weight: 700; letter-spacing: .03em; cursor: pointer;
}
.page-button:disabled { opacity: .4; cursor: default; pointer-events: none; }
.page-button:not(:disabled):hover, .page-button:focus-visible { background: #fff; outline: 2px solid var(--rust); outline-offset: 1px; }
.page-button:active { transform: translate(1px, 1px); box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px #c9a44a; }
.howto-count { white-space: nowrap; opacity: .7; }
.howto-panel h3 { margin: 0; padding-bottom: 1.2cqh; border-bottom: 2px dashed #c9a44a; text-align: center; font-size: 1.22em; line-height: 1.1; }
.howto-panel .howto-page { gap: 1.2cqh; justify-content: safe center; overflow-y: auto; }
.howto-panel .howto-page p { max-width: 30em; font-size: 1em; line-height: 1.14; }
.howto-panel .howto-page strong { color: #8a2b06; }
.howto-panel .howto-facts { gap: 1.2cqh 3cqw; margin-bottom: 0; }
.howto-panel .howto-facts + p { margin-top: 0; }
.howto-panel .howto-chip { padding: 2px 8px; border-width: 2px; box-shadow: 2px 2px 0 #6e2f08; font-size: 1em; }
.howto-panel .howto-chip.big { min-width: 4.6ch; font-size: 1.6em; }
.howto-panel .howto-sprite { width: clamp(36px, min(7cqh, 14cqw), 90px); }
.howto-panel .howto-facts .howto-sprite { width: clamp(56px, min(13cqh, 28cqw), 140px); }
.howto-panel .howto-tile figcaption { font-size: 1em; line-height: 1.05; }
.howto-panel .howto-row { gap: .8cqh 5cqw; }

/* TALK stays inside the upper trail-view panel; the journal remains visible below. */
/* Portraits sit in the bottom-left corner: the window edges crop the body. */
.talk-panel { padding-bottom: 0; }
.talk-panel .talk-portrait { min-height: 0; place-items: end start; }
.talk-panel .talk-portrait-image {
  width: 100%; height: 100%; object-fit: contain; object-position: left bottom;
  /* An ink sprite outline plus the usual hard shadow lifts the figure off the scene. */
  filter: drop-shadow(2px 0 0 #241406) drop-shadow(-2px 0 0 #241406) drop-shadow(0 2px 0 #241406) drop-shadow(0 -2px 0 #241406) drop-shadow(3px 3px 0 #49413a);
}
.talk-panel .speech-bubble { align-self: start; margin-top: 2%; max-height: calc(100% - 64px); font-size: clamp(.86rem, 2.2cqw, 1.4rem); font-style: italic; line-height: 1.3; box-shadow: 3px 3px 0 #49413a; }
/* Each follow-up bubble pops in, so it reads as a new thing said rather than the text changing. */
.talk-panel .speech-bubble.again { animation: bubble-in .18s ease-out; transform-origin: 0 100%; }
@keyframes bubble-in { from { opacity: 0; transform: scale(.85); } }

/* Hunt complete: score breakdown, then the other stats. */
.ledger-heading { margin: 6px 0 0; font-size: .9em; letter-spacing: .08em; text-transform: uppercase; color: #6d5a33; }

/* How to Play: compact pages that fit the frame without scrolling. */
.howto-screen { display: grid; grid-template-rows: auto 1fr auto; padding: clamp(10px, 2.4vw, 26px) clamp(14px, 3.5vw, 40px); }
.howto-screen h2 { margin: 0 0 clamp(6px, 1.4vw, 14px); }
.howto-page { display: flex; flex-direction: column; justify-content: center; gap: clamp(4px, 1vw, 10px); min-height: 0; }
.howto-page p { margin: 0 auto; text-align: center; font-size: clamp(.95rem, 2vw, 1.4rem); line-height: 1.45; }
.howto-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(8px, 2vw, 20px); margin-bottom: clamp(4px, 1vw, 10px); }
.howto-chip { border: 3px solid var(--ink); box-shadow: 3px 3px 0 #6e2f08; background: #fffbc4; padding: 6px 12px; font-size: clamp(.85rem, 1.6vw, 1.2rem); }
.howto-chip b { margin-left: 6px; color: #d79316; font-size: 1.3em; }
.howto-chip.hot b { color: #c0180c; }
.howto-chip.big { display: grid; place-items: center; min-width: 7ch; font-size: clamp(1.5rem, 3.4vw, 2.4rem); line-height: 1; }
.howto-chip.big small { font-size: .38em; letter-spacing: .08em; text-transform: uppercase; }
.howto-row { display: flex; flex-wrap: wrap; align-items: end; justify-content: center; gap: clamp(2px, .8vw, 8px); }
.howto-tile { position: relative; display: grid; justify-items: center; margin: 0; padding: 3px; border: 2px solid transparent; }
.howto-sprite { width: clamp(40px, 8vw, 84px); aspect-ratio: 1; background: 0 50% / 800% auto no-repeat; image-rendering: pixelated; }
.howto-tile figcaption { display: grid; justify-items: center; font-size: clamp(.6rem, 1.2vw, .95rem); line-height: 1.1; }
.howto-tile figcaption b { font-size: 1.15em; }
.howto-tile.bad figcaption b { color: #c0180c; }
.animal-tier-common { --animal-tier-color: var(--animal-common); --animal-tier-accent: #a86b36; }
.animal-tier-rare { --animal-tier-color: var(--animal-rare); --animal-tier-accent: #f2c44d; }
.animal-tier-special { --animal-tier-color: var(--animal-special); --animal-tier-accent: var(--gold); }
:is(.howto-tile, .guide-entry, .hunter-game, .bag-tile, .strip-tile, .animal-info-thumbnail)[class*="animal-tier-"] {
  border: 2px solid var(--animal-tier-color);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px var(--animal-tier-accent);
}
:is(.score-animal-sprite, .family-tab-sprite)[class*="animal-tier-"] {
  border: 1px solid var(--animal-tier-color);
  box-shadow: inset 0 0 0 1px var(--animal-tier-accent);
}
.animal-tier-stars {
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  padding: 0 2px;
  background: var(--cream);
  color: var(--animal-tier-accent);
  font: 700 .72rem/.8 "VT323", ui-monospace, monospace;
  letter-spacing: -.08em;
  text-shadow: 1px 0 var(--animal-tier-color), -1px 0 var(--animal-tier-color), 0 1px var(--animal-tier-color), 0 -1px var(--animal-tier-color);
}
.strip-tile .animal-tier-stars { top: -5px; font-size: .58rem; }
.score-animal-sprite .animal-tier-stars, .family-tab-sprite .animal-tier-stars { top: -5px; font-size: .5rem; }
.bag-tile, .strip-tile { position: relative; }
.animal-info-thumbnail { position: relative; }
.animal-silhouette { filter: brightness(0); opacity: .56; }
.howto-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: clamp(6px, 1.4vw, 14px); }
.howto-dots { display: flex; gap: 8px; }
.howto-dots span { width: 10px; height: 10px; border: 2px solid var(--ink); background: #fffbc4; }
.howto-dots span.on { background: var(--ink); }
.howto-facts .howto-sprite { width: clamp(84px, 16vw, 150px); }

/* A single subtle generated paper grain unifies the flat interface surfaces
   while their existing colors, responsive geometry, and live text stay CSS. */
.dashboard,
.side-rail,
.journal,
.conditions,
.hunt-screen,
.hunt-controls,
.modal-card,
.toast,
.results-card,
.results-banner,
.score-panel,
.awards-panel,
.results-footer,
.score-ledger-shell,
.score-ledger-title,
.board-body,
.achievement-card,
.trail-panel,
.speech-bubble {
  background-image: var(--paper-texture);
}

/* TALK backdrops: each speaker stands in their own corner of the town painting. */
.trail-panel.talk-panel {
  /* A parchment wash pushes the painting back so the speaker stays in front. */
  --talk-wash: linear-gradient(rgba(255, 244, 200, .42), rgba(255, 244, 200, .42));
  /* The speakers always stand in the town, whichever MAP stop the scene above shows. */
  background: var(--talk-wash), var(--talk-scene, url("./assets/dashboard-trail-scene.png")) var(--paper) no-repeat;
  background-size: 100% 100%, 260% auto;
  box-shadow: inset 0 0 0 3px #6b3309;
  image-rendering: pixelated;
}
.talk-panel[data-character="scott"] { background-size: 100% 100%, 260% auto; background-position: 0 0, 82% 88%; }
.talk-panel[data-character="sophie"] { background-size: 100% 100%, 240% auto; background-position: 0 0, 10% 82%; }
.talk-panel[data-character="chris"] { background-size: 100% 100%, 260% auto; background-position: 0 0, 97% 62%; }
.talk-panel[data-character="adrienne"] { background-size: 100% 100%, 260% auto; background-position: 0 0, 72% 40%; }
@media (max-width: 640px), (orientation: portrait) {
  .talk-panel .speech-bubble { max-height: calc(100% - 48px); margin-top: 0; font-size: clamp(.78rem, 3.2vw, 1.04rem); line-height: 1.22; }
  .talk-panel .speech-text { padding: 8px 10px; }
}
@media (max-height: 480px) {
  .talk-panel .speech-bubble { font-size: .76rem; line-height: 1.18; }
  .talk-panel .speech-text { padding: 6px 9px; }
}

/* Setup: one occupation this season. */
.occupation.locked label { color: #8a7a55; cursor: not-allowed; }
.occupation.locked label.picked { color: var(--ink); font-weight: 700; }
.occupation.locked input { cursor: not-allowed; }
.occupation.locked small { display: block; margin-top: 4px; font-size: .8rem; color: #6d5a33; }

/* Google sign-in: the title screen's account line and the dashboard's Account Profile panel. */
.title-screen { grid-template-rows: 1fr auto; }
.account-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 12px; margin-top: 10px; }
.account-row[hidden] { display: none; }
.account-row:empty { display: none; }
.account-row a.pixel-button { display: inline-grid; place-items: center; text-decoration: none; }
.account-line { padding: 4px 10px; color: var(--ink); background: rgba(255, 251, 209, .9); border: 2px solid var(--ink); font-weight: 700; }
.google-button { display: inline-block; min-height: 40px; }
.account-profile-panel {
  grid-template-rows: auto auto auto auto auto;
  align-content: start;
  gap: clamp(5px, 1.2cqh, 10px);
  padding: clamp(8px, 1.7cqh, 14px) clamp(12px, 3cqw, 22px);
  overflow-y: auto;
  cursor: default;
  container-type: size;
  font-size: var(--dash-text);
}
.account-profile-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 5px; border-bottom: 3px double #6e2f08; }
.account-profile-head h3 { margin: 0; font-size: clamp(1.04rem, 2.2cqw, 1.35rem); }
.account-profile-kicker { display: block; color: #704511; font-size: .68em; letter-spacing: .13em; }
.account-save-status { flex: 0 0 auto; padding: 2px 7px; border: 2px solid var(--ink); background: #fffbd1; font-size: .72em; line-height: 1.15; text-align: center; }
.account-save-status.account { background: #e6f1c7; color: #234b1f; }
.account-save-status.device { color: #704511; }
.account-identity { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 2px 10px; }
.account-identity > span { color: #704511; font-size: .72em; letter-spacing: .08em; text-transform: uppercase; }
.account-identity > strong { overflow: hidden; font-family: "Rye", Georgia, serif; font-size: 1.05em; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.account-identity p { grid-column: 1 / -1; margin: 2px 0 0; color: #574629; font-size: .8em; font-weight: 400; line-height: 1.25; }
.account-highlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.account-highlights > div { display: grid; align-content: center; min-width: 0; padding: 5px 6px; border: 2px solid var(--ink); background: #fffbd1; text-align: center; }
.account-highlights span { color: #704511; font-size: .7em; text-transform: uppercase; }
.account-highlights strong { overflow: hidden; font-size: 1.16em; text-overflow: ellipsis; white-space: nowrap; }
.account-collections { min-width: 0; }
.account-collections h4 { margin: 0 0 3px; color: #704511; font-size: .78em; letter-spacing: .06em; text-transform: uppercase; }
.account-collection-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 16px; padding-block: 5px; border-block: 2px dashed #c9a44a; }
.account-collection-grid > div { display: flex; justify-content: space-between; gap: 7px; min-width: 0; font-size: .78em; }
.account-collection-grid span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-collection-grid strong { flex: 0 0 auto; white-space: nowrap; }
.account-profile-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 7px; }
.account-profile-actions .google-button:empty { display: none; }
@media (max-width: 640px), (orientation: portrait) {
  .name-form { grid-template-columns: 1fr; }
  .name-input, .name-actions { grid-column: 1; }
  .name-actions { justify-content: center; }
  .account-profile-panel { gap: 5px; padding: 7px 10px; }
  .account-profile-head { align-items: start; }
  .account-save-status { max-width: 10em; }
  .account-collection-grid { grid-template-columns: 1fr; }
}
/* The sign-out warning stands where the button stood, on the title row and in Account Profile alike. On the title screen it
   sits straight on the painting, so it carries the same paper plate as the account line to stay readable. */
.sign-out-confirm { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 8px; align-items: center; max-width: 30em; }
.sign-out-confirm small { flex: 1 0 100%; padding: 4px 10px; color: var(--ink); background: rgba(255, 251, 209, .9); border: 2px solid var(--ink); font-size: .78rem; line-height: 1.3; text-align: center; }
/* Inside Account Profile there is already paper under it, so it reads as a plain warning over the two buttons, and the
   other choices step aside -- the panel is pinned to the trail view and can't grow a row. */
.account-profile-panel .sign-out-confirm small { padding: 0; background: none; border: 0; text-align: left; }
.account-profile-actions.is-confirming > :not(.sign-out-confirm) { display: none; }

/* The location line is a button: it opens the MAP. */
button.location { display: block; width: 100%; color: inherit; font-family: inherit; cursor: pointer; }
button.location:hover, button.location:focus-visible { background: #fffbd1; outline: none; text-decoration: underline dotted; }

/* MAP: the whole trail on parchment, Missouri on the right, Oregon on the left. */
.trail-panel.map-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: .4cqh; padding: 1.2cqh 0; cursor: default; container-type: size; font-size: var(--dash-text); }
.map-panel h3 { margin: 0 3cqw; padding-bottom: .6cqh; border-bottom: 2px dashed #c9a44a; text-align: center; font-size: 1.22em; }
.map-panel .map-note { margin: 0 3cqw; text-align: center; font-size: .9em; }
/* The painted map (docs/agent-task-trail-map.md), 1600×900: its trail runs through each stop's x, y in locations.js,
   so the pins land on it. The whole map shows, letterboxed to the room the panel has. */
.trail-map { display: grid; place-items: center; min-height: 0; overflow: hidden; container-type: size; }
.map-canvas { position: relative; width: min(100cqw, 177.78cqh); aspect-ratio: 16 / 9; background: url("./assets/map/trail-map.png") center / 100% 100% no-repeat; }
.map-pin {
  position: absolute; width: 1.1em; height: 1.1em; transform: translate(-50%, -50%);
  padding: 0; border: 0; background: none; color: var(--ink); font: inherit; line-height: 1.05; cursor: pointer;
}
.map-dot { display: block; width: 100%; height: 100%; box-sizing: border-box; border: 2px solid #000; border-radius: 50%; background: #fffbd1; box-shadow: 2px 2px 0 #6b3309; }
/* Labels sit below the pin; the map leaves room there. */
.map-label { position: absolute; left: 50%; top: calc(100% + .2em); display: grid; justify-items: center; transform: translateX(-50%); }
.map-name { padding: 1px 5px; border-radius: 4px; background: rgba(255, 251, 209, .85); font-size: .82em; white-space: nowrap; }
.map-mile { font-size: .66em; font-weight: 400; white-space: nowrap; }
.map-pin:hover .map-dot, .map-pin:focus-visible .map-dot { background: #fff; outline: 2px solid var(--rust); outline-offset: 1px; }
.map-pin:focus-visible { outline: none; }
.map-pin.here .map-dot { background: #ffd23f; animation: map-glow 1.4s ease-in-out infinite; }
.map-pin.here .map-name { background: var(--rust); color: #fff; }
@keyframes map-glow { 50% { box-shadow: 2px 2px 0 #6b3309, 0 0 0 .35em rgba(255, 210, 63, .55); } }
@media (prefers-reduced-motion: reduce) { .map-pin.here .map-dot { animation: none; } }
/* A stop whose way isn't open yet: greyed, padlocked. Clicking it says what it's waiting on. */
.map-pin.locked .map-dot { display: grid; place-items: center; background: #b8ad8a; box-shadow: 2px 2px 0 #5a4a2a; }
.map-pin.locked .map-dot .padlock { margin: .18em 0 0; font-size: .95em; }
.map-pin.locked .map-label { opacity: .7; }
.map-pin.locked .map-name { background: rgba(214, 204, 170, .85); }

/* NEW! on a map pin whose stop just opened. */
.map-pin > .rail-badge { top: -1.5em; right: auto; left: 50%; transform: translateX(-50%); font-size: .7em; }

/* The rare+ strip along the bottom of the trail scene: one tile per animal that lives here. Sits under where a
   panel (TALK/GUIDE/MAP/etc.) mounts, so a panel fully covers it. */
.animal-strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 4px;
  overflow-x: auto;
  padding: 4px 6px;
  background: rgba(255, 251, 209, .72);
}
.strip-tile {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(34px, 7cqw, 52px);
  height: clamp(34px, 7cqw, 52px);
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 4px;
  background: var(--cream);
  cursor: pointer;
}
.strip-tile .guide-animal-sprite { width: 100%; height: 100%; background-size: 800% auto; }

/* The animal and location pop-ups: same trail-panel chrome as TALK/GUIDE, click anywhere to dismiss. */
.trail-panel.animal-info-panel, .trail-panel.location-info-panel {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 6px;
  padding: 10px 8%;
  text-align: center;
  background-color: var(--paper);
}
.animal-info-panel .guide-animal-sprite { width: 96px; height: 86px; background-size: 800% auto; }
.animal-info-panel h3, .location-info-panel h3 { margin: 0; font-size: 1.3em; }
.animal-stats { margin: 0; font-size: .9em; }
.animal-fact, .location-info-panel p:not(.map-mile) { margin: 0; max-width: 46ch; font-weight: 400; }