:root {
  --ink: #20261f;
  --paper: #e7dfca;
  --muted: #a1a38e;
  --gold: #c7ad79;
  --rust: #bc6b43;
  --line: #455044;
  --dark: #191f1a;
  /* Type. Three families: a reading serif, a storybook display face, and a
     low-vision UI face. Nothing renders below 14px; test/typography.test.js
     enforces it. --scale follows the text-size setting. */
  --font-body: "Literata Variable", Literata, Georgia, serif;
  --font-display: "Fraunces Variable", Fraunces, Georgia, serif;
  --font-ui: "Atkinson Hyperlegible Next Variable", "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --scale: 1;
  --fs-label: calc(15px * var(--scale));
  --fs-ui-sm: calc(16px * var(--scale));
  --fs-ui: calc(17px * var(--scale));
  --fs-body: calc(19px * var(--scale));
  --fs-lead: calc(22px * var(--scale));
  --fs-h3: calc(27px * var(--scale));
  --story-size: calc(clamp(20px, 0.6vw + 15px, 23px) * var(--scale));
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.5;
  color: var(--paper);
  background: var(--ink);
  font-synthesis: none;
  color-scheme: dark;
}

/* ── The play screen ─────────────────────────────────────────────────────
   The world fills the screen in first person, drawn at a low resolution and
   scaled up pixel-sharp. Over it, a game HUD in one pixel face: the quest
   panel, the minimap, the crosshair and its prompt, the bag, and the framed
   dialogue box with the speaker's face. Every word is DOM text on the shared
   type scale; nothing is drawn as text on the canvas. */
:root {
  --font-pixel: "Pixelify Sans Variable", "Pixelify Sans", system-ui, sans-serif;
  --hud-bg: #15110dea;
  --hud-bg-soft: #15110db8;
  --hud-ink: #f4e8c8;
  --hud-dim: #c9b994;
  --hud-edge: #0a0806;
  --accent: #e8c262;
  --accent-deep: #9a4a2a;
  --speech: #ffcf7a;
  --notch: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
  --frame: inset 0 0 0 3px var(--hud-edge), inset 0 0 0 5px var(--accent-deep), inset 0 0 0 6px #0a080699, inset 0 8px 0 #ffffff0d;
}
.play[data-tale="wisdom"] { --accent: #e8c262; --accent-deep: #a8442c; }
.play[data-tale="tide"] { --accent: #f0d48a; --accent-deep: #b2382e; }
.play[data-tale="orchestra"] { --accent: #f0b450; --accent-deep: #6a4636; }
.play[data-tale="olives"] { --accent: #e4c070; --accent-deep: #2a4a96; }
body.playing .masthead,
body.playing .site-footer,
body.playing .skip-link { display: none; }
body.playing { overflow: hidden; }
main.play-screen { max-width: none; margin: 0; padding: 0; }
.play {
  position: fixed; inset: 0; height: 100dvh; overflow: hidden; background: #0e0c0a;
  font-family: var(--font-pixel); color: var(--hud-ink);
}
.play kbd {
  display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 5px;
  background: var(--hud-ink); color: var(--hud-edge); font: 700 var(--fs-label)/1 var(--font-pixel);
  box-shadow: inset 0 -3px 0 #0004;
}
.world-stage { position: absolute; inset: 0; z-index: 0; }
.world-view, .world-overlay, .world-light-layer, .world-weather, .world-fade { position: absolute; inset: 0; width: 100%; height: 100%; }
.world-view { display: block; image-rendering: pixelated; image-rendering: crisp-edges; touch-action: none; cursor: crosshair; }
.world-overlay { pointer-events: none; z-index: 2; }
.world-light-layer { z-index: 1; pointer-events: none; opacity: 0; transition: background 1.2s, opacity 1.2s; mix-blend-mode: soft-light; }
.world-stage[data-light="dawn"] .world-light-layer { background: linear-gradient(180deg, #f2b59a, #fff 70%); opacity: .25; }
.world-stage[data-light="dusk"] .world-light-layer { background: linear-gradient(180deg, #8a5b7a, #d68d58 70%); opacity: .3; }
.world-weather { z-index: 3; pointer-events: none; }
.world-fade { z-index: 4; pointer-events: none; background: #0e0c0a; opacity: 0; transition: opacity .28s steps(4); }
.world-fade.dark { opacity: 1; }
.world-loading { position: absolute; inset: 44% 0 auto; text-align: center; font: var(--fs-lead)/1.3 var(--font-pixel); color: var(--hud-ink); }
.bag-token { position: absolute; z-index: 9; left: -8px; top: -8px; width: 16px; height: 16px; background: var(--accent); box-shadow: 0 0 0 3px var(--hud-edge), 0 0 18px var(--accent); pointer-events: none; }

/* Panels share one frame: a dark plate, an ink rim, the tale's colour inside it, notched corners. */
.hud-panel, .story-band, .play-prompt, .play-bubble, .world-marker.world-exit, .hud-buttons button, .bag-slot, .play-message, .journal-drawer, .ending-page, .world-skill {
  clip-path: var(--notch);
}

/* Top of the screen: the quest on the left, the map and menu on the right. */
.hud-top {
  position: absolute; z-index: 6; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: max(12px, env(safe-area-inset-top)) 14px 0; pointer-events: none;
}
.hud-top > * { pointer-events: auto; }
.hud-quest { display: grid; gap: 2px; max-width: min(420px, 58vw); padding: 12px 18px 14px; background: var(--hud-bg-soft); box-shadow: var(--frame); }
.hud-tale { font: 700 var(--fs-lead)/1.1 var(--font-pixel); color: var(--accent); text-shadow: 2px 2px 0 var(--hud-edge); }
.hud-time { font: 500 var(--fs-label)/1.3 var(--font-pixel); color: var(--hud-dim); }
.hud-objective { display: flex; gap: 8px; margin: 6px 0 0; font: 500 var(--fs-ui)/1.3 var(--font-pixel); color: var(--hud-ink); text-shadow: 1px 1px 0 var(--hud-edge); }
.objective-mark { color: var(--accent); }
.hud-side { display: grid; justify-items: end; gap: 8px; }
.hud-minimap {
  width: 132px; height: 132px; image-rendering: pixelated; background: #0e0c0a;
  box-shadow: 0 0 0 3px var(--hud-edge), 0 0 0 5px var(--accent-deep), 0 0 0 6px var(--hud-edge);
}
.hud-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 280px; }
.hud-buttons button {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px;
  background: var(--hud-bg); box-shadow: var(--frame); color: var(--hud-ink); font: 600 var(--fs-ui-sm)/1 var(--font-pixel);
}
.hud-buttons button:hover:not(:disabled), .hud-buttons button:focus-visible { background: #2a2016f0; color: var(--accent); }
.hud-buttons button:focus-visible { outline: 3px solid var(--accent); outline-offset: -8px; }
.hud-buttons button:disabled { opacity: .45; }
.hud-buttons kbd { min-width: 22px; height: 22px; }
.journal-dot { position: absolute; top: 6px; right: 6px; width: 10px; height: 10px; background: var(--accent); box-shadow: 0 0 0 2px var(--hud-edge); }

/* The crosshair: four ticks, closing in and turning gold on something you can act on. */
.hud-crosshair { position: absolute; z-index: 5; left: 50%; top: 50%; width: 30px; height: 30px; translate: -50% -50%; pointer-events: none; transition: width .12s steps(3), height .12s steps(3); }
.hud-crosshair i { position: absolute; background: var(--hud-ink); box-shadow: 0 0 0 2px #0a0806b0; }
.hud-crosshair i:nth-child(1), .hud-crosshair i:nth-child(2) { left: 50%; width: 4px; height: 9px; translate: -50% 0; }
.hud-crosshair i:nth-child(1) { top: 0; }
.hud-crosshair i:nth-child(2) { bottom: 0; }
.hud-crosshair i:nth-child(3), .hud-crosshair i:nth-child(4) { top: 50%; height: 4px; width: 9px; translate: 0 -50%; }
.hud-crosshair i:nth-child(3) { left: 0; }
.hud-crosshair i:nth-child(4) { right: 0; }
.play[data-aim="place"] .hud-crosshair, .play[data-aim="thing"] .hud-crosshair { width: 22px; height: 22px; }
.play[data-aim="place"] .hud-crosshair i { background: var(--accent); }
.play:has(.story-band[data-state="trial"]) .hud-crosshair, .play:has(.play-ending:not([hidden])) .hud-crosshair { opacity: 0; }

/* What pressing E would do, just under the crosshair. */
.play-prompt {
  position: absolute; z-index: 5; left: 50%; top: calc(50% + 34px); translate: -50% 0; display: flex; gap: 10px; align-items: center;
  max-width: min(440px, 86vw); padding: 10px 16px 10px 12px; background: var(--hud-bg); box-shadow: var(--frame);
  font: 600 var(--fs-ui)/1.3 var(--font-pixel); color: var(--hud-ink); pointer-events: none;
}
.play-prompt[data-enabled="false"] { color: var(--hud-dim); font-weight: 500; }
.prompt-lock { width: 14px; height: 14px; background: var(--hud-dim); clip-path: polygon(20% 45%, 20% 20%, 35% 5%, 65% 5%, 80% 20%, 80% 45%, 100% 45%, 100% 100%, 0 100%, 0 45%); }
.play:has(.story-band[data-state="telling"]) .play-prompt { opacity: .35; }

/* The bag: slots along the right, above the dialogue box. */
.hud-bag {
  position: absolute; z-index: 5; right: 14px; bottom: calc(var(--band-h, 160px) + 24px); display: grid; grid-template-columns: repeat(3, 52px); gap: 6px;
}
.bag-slot { display: grid; place-items: center; width: 52px; height: 52px; padding: 4px; background: var(--hud-bg-soft); box-shadow: var(--frame); color: var(--accent); font: 700 var(--fs-lead)/1 system-ui, sans-serif; }
.bag-slot:disabled { opacity: .55; cursor: default; }
.bag-slot.filled:hover, .bag-slot.filled:focus-visible { background: #2a2016f0; }
.bag-slot.filled:focus-visible { outline: 3px solid var(--accent); outline-offset: -7px; }
.bag-slot canvas { width: 40px; height: 40px; image-rendering: pixelated; }

/* Chapter card: a new place, in big letters. */
.play-chapter {
  position: absolute; z-index: 5; top: 22%; left: 50%; transform: translateX(-50%); width: min(92vw, 820px);
  text-align: center; cursor: pointer; color: var(--hud-ink); animation: chapter-in .5s steps(5) both;
}
.play-chapter .eyebrow { display: inline-block; padding: 4px 12px; background: var(--hud-edge); font: 600 var(--fs-ui)/1.2 var(--font-pixel); color: var(--accent); }
.play-chapter h2 { margin: 12px 0 0; font: 700 clamp(40px, 7vw, 84px)/1 var(--font-pixel); color: var(--hud-ink); text-shadow: 4px 4px 0 var(--hud-edge), 0 0 30px #000c; }
.play-chapter h2::after { content: ""; display: block; width: 40%; height: 6px; margin: 16px auto 0; background: var(--accent); box-shadow: 0 4px 0 var(--hud-edge); }
.play-chapter.leaving { animation: chapter-out .4s steps(4) both; }
@keyframes chapter-in { from { opacity: 0; transform: translate(-50%, 16px); } }
@keyframes chapter-out { to { opacity: 0; transform: translate(-50%, -10px); } }

/* The dialogue box: a face on the left, the telling on the right. */
.story-band {
  position: absolute; z-index: 6; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start;
  width: min(calc(100vw - 24px), 980px); max-height: 46vh; overflow: auto; padding: 18px 22px 16px 18px;
  background: var(--hud-bg); box-shadow: var(--frame); color: var(--hud-ink);
}
.story-portrait { position: relative; width: 104px; height: 104px; background: #2a2016; box-shadow: inset 0 0 0 3px var(--hud-edge), inset 0 0 0 5px var(--accent-deep); }
.story-portrait canvas { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); image-rendering: pixelated; }
.story-portrait[data-who="teller"]::before {
  content: ""; position: absolute; inset: 22px; background: var(--accent);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.story-main { min-width: 0; }
.story-scene { margin: 0 0 6px; font: 700 var(--fs-ui)/1.2 var(--font-pixel); color: var(--accent); }
.story-scene:focus { outline: 0; }
.story-line { margin: 0; font: 500 var(--story-size)/1.5 var(--font-pixel); color: var(--hud-ink); min-height: 1.5em; }
.story-line q { color: var(--speech); }
.story-line q::before { content: "“"; }
.story-line q::after { content: "”"; }
.story-line .story-want { color: var(--hud-dim); }
.story-line .story-want::before { content: "Objective  "; color: var(--accent); font-weight: 700; }
.story-line .story-speaker { font: 700 var(--fs-lead)/1.2 var(--font-pixel); color: var(--speech); }
.story-line .story-deduction { color: #b8e08a; }
.story-band[data-tone="world"] .story-line { color: var(--hud-dim); }
.story-band[data-tone="encounter"] { --accent-deep: #c8402c; }
.story-band[data-tone="trial"] { --accent-deep: #c89a2e; }
.story-band[data-state="idle"] { padding-block: 12px; }
.story-band[data-state="idle"] .story-portrait { width: 64px; height: 64px; }
.story-band[data-state="ended"] { opacity: 0; pointer-events: none; }
.story-band[data-tone="chapter"] { opacity: 0; pointer-events: none; }
.trial-hint { margin: 10px 0 0; font: 600 var(--fs-ui)/1.35 var(--font-pixel); color: var(--accent); }
.trial-feedback { margin: 6px 0 0; min-height: 1.4em; font: 600 var(--fs-body)/1.35 var(--font-pixel); }
.trial-feedback[data-good="true"] { color: #b8e08a; }
.trial-feedback[data-good="false"] { color: #ff9a7a; }
.story-notes { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.story-notes:empty { display: none; }
.story-notes li { display: flex; gap: 8px; align-items: baseline; padding: 6px 12px; background: #ffffff10; box-shadow: inset 0 0 0 2px #ffffff22; font: 500 var(--fs-ui-sm)/1.3 var(--font-pixel); animation: note-in .3s steps(3) both; }
.story-notes li i { font-style: normal; color: var(--accent); }
.story-notes .note-clue { flex-basis: 100%; }
@keyframes note-in { from { opacity: 0; transform: translateY(6px); } }
.story-roll:empty { display: none; }
.story-roll .dice-tray { margin: 0 0 10px; color: var(--hud-ink); }
.story-choices { display: grid; gap: 4px; margin-top: 10px; }
.story-choices:empty { display: none; }
.choice {
  display: flex; gap: 12px; align-items: baseline; width: 100%; min-height: 44px; padding: 8px 12px; text-align: left;
  border: 0; background: transparent; color: var(--hud-ink); font: 500 var(--fs-body)/1.35 var(--font-pixel);
}
.choice:hover:not(:disabled), .choice:focus-visible { background: #ffffff12; color: var(--accent); }
.choice:hover:not(:disabled)::before, .choice:focus-visible::before { content: "▸"; color: var(--accent); margin-right: -4px; }
.choice:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.choice:disabled { opacity: .5; cursor: default; }
.choice .choice-key { flex: none; display: grid; place-items: center; min-width: 26px; height: 26px; background: var(--hud-ink); color: var(--hud-edge); font: 700 var(--fs-label)/1 var(--font-pixel); }
.choice small { display: block; margin-top: 2px; font: 500 var(--fs-label)/1.35 var(--font-pixel); color: var(--hud-dim); }
.choice .odds, .choice .odds-parts { color: var(--hud-dim); }
.choice.remembered { box-shadow: inset 4px 0 0 #9fc0c8; }
.choice .remembered-badge { font: normal 700 var(--fs-label) var(--font-pixel); color: #9fc0c8; }
.choice.quiet { font: 500 var(--fs-ui-sm)/1.3 var(--font-pixel); color: var(--hud-dim); }
.puzzle-slots { margin: 0 0 4px; font: 700 var(--fs-ui) var(--font-pixel); color: var(--accent); }
.story-next {
  position: sticky; float: right; bottom: 0; display: inline-flex; gap: 8px; align-items: center; min-height: 44px; margin-top: 6px; padding: 6px 10px;
  background: transparent; border: 0; color: var(--accent); font: 700 var(--fs-body)/1 var(--font-pixel);
}
@media (prefers-reduced-motion: no-preference) {
  body[data-motion="on"] .story-next > span { animation: blink 1s steps(2) infinite; }
}
@keyframes blink { 50% { opacity: 0; } }

/* Signposts for the roads out, and bubbles over whoever speaks. */
.play-markers { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.world-marker { position: absolute; left: 0; top: 0; pointer-events: auto; }
.world-marker.world-exit {
  display: inline-flex; align-items: center; gap: 8px; translate: -50% -50%; min-height: 40px; padding: 6px 14px;
  background: var(--hud-bg); box-shadow: var(--frame); color: var(--hud-ink); font: 600 var(--fs-ui-sm)/1.1 var(--font-pixel); white-space: nowrap;
}
.world-marker.world-exit:hover, .world-marker.world-exit:focus-visible { color: var(--accent); }
.world-marker.world-exit:focus-visible { outline: 3px solid var(--accent); outline-offset: -8px; }
.marker-arrow { width: 12px; height: 12px; background: var(--accent); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.world-marker[data-side="ahead"] .marker-arrow { rotate: -90deg; }
.world-marker[data-side="left"] .marker-arrow { rotate: 180deg; }
.play-bubble {
  position: absolute; z-index: 5; left: 0; top: 0; translate: -50% -100%; max-width: min(380px, 82vw);
  padding: 10px 16px; background: #f4e8c8; color: var(--hud-edge); box-shadow: inset 0 0 0 3px var(--hud-edge);
  font: 500 var(--fs-ui)/1.4 var(--font-pixel); pointer-events: none; animation: note-in .25s steps(3) both;
}
.play-bubble b { display: block; font: 700 var(--fs-label) var(--font-pixel); color: var(--accent-deep); }
.play-bubble b:empty { display: none; }
.play-message {
  position: absolute; z-index: 6; top: 50%; left: 50%; translate: -50% -140%; margin: 0; padding: 10px 18px;
  background: var(--hud-bg); box-shadow: var(--frame); color: var(--hud-ink); font: 600 var(--fs-ui)/1.3 var(--font-pixel); opacity: 0; pointer-events: none;
}
.play-message:empty { display: none; }
.play-message.show { animation: message 3.2s steps(8) both; }
@keyframes message { 8%, 80% { opacity: 1; } }

/* Touch: a stick on the left, buttons on the right, above the dialogue box. */
.play-touch { display: none; }
@media (pointer: coarse) {
  .hud-crosshair { opacity: .6; }
  .play-touch { position: absolute; z-index: 5; left: 0; right: 0; bottom: calc(var(--band-h, 150px) + 24px); display: flex; justify-content: space-between; align-items: end; padding: 0 16px; pointer-events: none; }
  .play-touch > * { pointer-events: auto; }
  .world-joystick { display: grid; place-items: center; width: 104px; height: 104px; background: var(--hud-bg-soft); box-shadow: var(--frame); clip-path: var(--notch); touch-action: none; }
  .world-joystick span { width: 44px; height: 44px; background: var(--hud-ink); box-shadow: inset 0 -4px 0 #0005; transform: translate(var(--stick-x, 0px), var(--stick-y, 0px)); }
  .touch-buttons { display: grid; grid-template-columns: repeat(2, 54px); gap: 8px; }
  .touch-buttons button { width: 54px; height: 54px; background: var(--hud-bg); box-shadow: var(--frame); color: var(--hud-ink); font: 700 var(--fs-body) var(--font-pixel); clip-path: var(--notch); }
  .touch-buttons [data-touch-act] { grid-column: span 2; justify-self: end; width: 70px; height: 70px; background: var(--accent); color: var(--hud-edge); }
  .touch-buttons button:disabled { opacity: .35; }
  .hud-bag { bottom: calc(var(--band-h, 150px) + 150px); }
}

/* The journal: a framed panel from the right. */
.journal-drawer {
  position: absolute; z-index: 8; top: 12px; right: 12px; bottom: 12px; width: min(460px, calc(100vw - 24px)); overflow: auto;
  padding: 22px 24px 28px; background: #1a150ff4; box-shadow: var(--frame); color: var(--hud-ink); font-family: var(--font-pixel);
  animation: drawer-in .25s steps(4) both;
}
@keyframes drawer-in { from { transform: translateX(30px); opacity: 0; } }
.journal-drawer .eyebrow, .journal-drawer small, .journal-drawer .fineprint { color: var(--hud-dim); }
.journal-drawer h2, .journal-drawer h3, .journal-drawer h4 { font-family: var(--font-pixel); color: var(--accent); }
.journal-drawer p, .journal-drawer li, .journal-drawer button { font-family: var(--font-pixel); }
.journal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.journal-head h2 { margin: 0; font: 700 var(--fs-h3)/1.1 var(--font-pixel); }
.journal-close { min-width: 44px; min-height: 44px; font: 700 var(--fs-lead) var(--font-pixel); color: var(--hud-ink); }
.journal-want p { margin: 4px 0 14px; font: 500 var(--fs-body)/1.4 var(--font-pixel); }
.journal-stats { display: grid; gap: 8px; margin-bottom: 16px; }
.journal-stats > div { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; font-size: var(--fs-ui-sm); }
.journal-stats .stat-track { grid-column: 1 / -1; height: 8px; background: #ffffff18; box-shadow: inset 0 0 0 2px var(--hud-edge); }
.journal-stats .stat-track span { display: block; height: 100%; background: var(--accent); }
.journal-tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 3px solid var(--hud-edge); padding-bottom: 8px; }
.journal-tabs button { min-height: 40px; padding: 6px 12px; color: var(--hud-ink); font: 600 var(--fs-ui-sm) var(--font-pixel); }
.journal-tabs button[aria-selected="true"] { background: var(--accent); color: var(--hud-edge); }
.journal-tabs small { opacity: .8; font-size: inherit; }
.journal-panel { padding: 14px 0; color: var(--hud-ink); }
.journal-hint { font-size: var(--fs-ui-sm); color: var(--hud-dim); }
.journal-panel .clue-list button, .journal-panel .inventory-item, .journal-panel .crafting button, .journal-panel .exits button { color: var(--hud-ink); border-color: #ffffff2a; background: #ffffff0c; font-family: var(--font-pixel); }
.journal-panel .clue-list button[aria-pressed="true"], .journal-panel .inventory-item.selected { background: #ffffff1c; outline: 3px solid var(--accent); }
.journal-panel .conclusion, .journal-panel .item-detail { background: #ffffff0e; color: var(--hud-ink); border-color: #ffffff2a; }
.journal-panel .map-svg { background: #2b3426; }
.journal-panel .people-list li { border-color: #ffffff22; }
.journal-panel .history p { color: var(--hud-ink); }
.journal-turn, .journal-save { margin-top: 16px; padding-top: 14px; border-top: 3px solid var(--hud-edge); font-size: var(--fs-ui-sm); }
.journal-turn button { display: flex; justify-content: space-between; width: 100%; min-height: 44px; padding: 8px 12px; border: 0; box-shadow: inset 0 0 0 2px #ffffff30; color: var(--hud-ink); margin: 6px 0; }
.journal-save { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.journal-save span { flex-basis: 100%; color: var(--hud-dim); }
.journal-save button { min-height: 40px; color: var(--accent); text-decoration: underline; }

/* The closing page. */
.play-ending { position: absolute; z-index: 9; inset: 0; overflow: auto; padding: 6vh 16px; background: #0e0c0add; }
.ending-page {
  max-width: 760px; margin: 0 auto; padding: clamp(24px, 5vw, 48px); background: #1a150ff8; color: var(--hud-ink); box-shadow: var(--frame);
  font-family: var(--font-pixel); animation: chapter-in-page .5s steps(5) both;
}
@keyframes chapter-in-page { from { opacity: 0; transform: translateY(14px); } }
.ending-page .eyebrow, .ending-page .fineprint { color: var(--hud-dim); }
.ending-page h1 { margin: 6px 0 16px; font: 700 clamp(36px, 5vw, 60px)/1.05 var(--font-pixel); color: var(--accent); text-shadow: 3px 3px 0 var(--hud-edge); }
.ending-page h1:focus { outline: 0; }
.ending-page h2 { margin: 26px 0 10px; font: 700 var(--fs-lead)/1.2 var(--font-pixel); color: var(--accent); }
.ending-text { font: 500 var(--story-size)/1.6 var(--font-pixel); }
.ending-reflection { font: 500 var(--fs-body)/1.5 var(--font-pixel); color: var(--hud-dim); }
.ending-page .echo-card { background: #ffffff0e; color: var(--hud-ink); border-color: #ffffff2a; }
.ending-page .footsteps li { margin: 4px 0; }
.ending-page .run-stats { color: var(--hud-ink); }
.ending-page .run-stats dt { color: var(--hud-dim); }
.ending-page .mark-chips li { color: var(--hud-ink); border-color: #ffffff30; }
.ending-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.ending-page .button { font-family: var(--font-pixel); border-radius: 0; }
.ending-page .button.secondary { color: var(--hud-ink); border-color: var(--hud-ink); }

/* Card trials (kinds the world does not stage), inside the play screen. */
.world-skill { position: absolute; z-index: 7; inset: auto 50% 50% auto; translate: 50% 50%; width: min(560px, calc(100vw - 24px)); display: grid; justify-items: center; gap: 14px; padding: clamp(20px, 5vw, 36px); background: var(--hud-bg); color: var(--hud-ink); box-shadow: var(--frame); text-align: center; font-family: var(--font-pixel); }
.world-skill h2 { margin: 0; font: 700 var(--fs-h3)/1.05 var(--font-pixel); color: var(--accent); }
.world-skill p { max-width: 52ch; margin: 0; }
.skill-play { width: min(100%, 460px); display: grid; gap: 12px; justify-items: center; }
.skill-track { position: relative; width: 100%; height: 34px; overflow: hidden; box-shadow: inset 0 0 0 3px var(--hud-edge); background: #3a3024; }
.skill-zone { position: absolute; top: 0; bottom: 0; background: #7a9a4a; }
.skill-marker { position: absolute; top: 3px; bottom: 3px; width: 5px; background: var(--hud-ink); }
.skill-stone { display: none; }
.scale-stones { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.balance-track { position: relative; width: 100%; height: 18px; background: linear-gradient(90deg, #a85c43, #c6ba8f 50%, #a85c43); }
.balance-sweetspot { position: absolute; left: 42%; width: 16%; top: 0; bottom: 0; border-inline: 3px solid var(--hud-edge); }
.balance-load { position: absolute; left: 50%; top: -4px; height: 26px; width: 6px; background: var(--hud-ink); transform: translateX(-50%); transition: left .12s; }
.scale-patience { width: 100%; accent-color: var(--accent); }
.scale-stones button[aria-pressed="true"] { outline: 3px solid var(--accent); }
.world-skill input[type="range"] { width: 100%; accent-color: var(--accent); }
.world-skill progress { width: 100%; accent-color: var(--accent); }
.skill-cancel { border: 0; background: transparent; color: var(--hud-ink); text-decoration: underline; min-height: 44px; }
.world-skill button:focus-visible, .world-skill input:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* While the box asks something of you (a conversation, a trial), the touch controls step aside. */
.play:has(.story-band[data-state="trial"]) .play-touch,
.play:has(.story-band[data-state="conversation"]) .play-touch { display: none; }
.touch-buttons button:disabled { visibility: hidden; }

@media (max-width: 700px) {
  .hud-top { padding: max(8px, env(safe-area-inset-top)) 8px 0; gap: 6px; }
  .hud-side { grid-template-columns: auto; }
  .hud-buttons { display: grid; grid-template-columns: repeat(2, auto); gap: 4px; max-width: none; }
  .hud-buttons button { min-height: 40px; padding: 4px 8px; }
  .world-marker.world-exit { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; padding: 6px 10px; }
  .world-marker.world-exit span:last-child { overflow: hidden; text-overflow: ellipsis; }
  .hud-quest { padding: 8px 12px 10px; max-width: 62vw; }
  .hud-tale { font-size: var(--fs-ui); }
  .hud-objective { font-size: var(--fs-ui-sm); }
  .hud-minimap { width: 92px; height: 92px; justify-self: end; }
  .hud-buttons button span { font-size: var(--fs-label); }
  .hud-buttons kbd { display: none; }
  .story-band { grid-template-columns: 1fr; padding: 14px 16px 12px; max-height: 50vh; gap: 8px; }
  .story-portrait { display: none; }
  /* The bag runs along under the quest panel, out of the way of the stick. */
  .hud-bag { top: calc(max(8px, env(safe-area-inset-top)) + 150px); bottom: auto; left: 8px; right: auto; grid-template-columns: repeat(6, 40px); gap: 4px; }
  .hud-bag .bag-slot:not(.filled) { display: none; }
  .bag-slot { width: 40px; height: 40px; }
  .bag-slot canvas { width: 30px; height: 30px; }
  .play-chapter { top: 18%; }
  .journal-drawer { inset: 6px; width: auto; }
}

/* Shelf: tales still being retold */
.story-card.retelling .cover img { filter: grayscale(.6) brightness(.8); }
.retelling-note { font: italic var(--fs-ui-sm)/1.3 var(--font-display); color: #d9c690; }

* {
  box-sizing: border-box;
}
/* The browser's default <small> is 13.3px; nothing here goes under 14px. */
small {
  font-size: max(14px, 0.85em);
}
body {
  margin: 0;
  min-width: 320px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' opacity='.035' filter='url(%23n)' d='M0 0h120v120H0z'/%3E%3C/svg%3E");
}
button,
input,
select {
  font: inherit;
}
button {
  cursor: pointer;
  color: inherit;
}
button:disabled {
  cursor: default;
}
button,
a,
input,
select,
summary {
  touch-action: manipulation;
}
button {
  border: 0;
  background: none;
}
a {
  color: var(--gold);
  text-underline-offset: 4px;
}
button:focus-visible,
a:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid #e7bd77;
  outline-offset: 4px;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 560;
  letter-spacing: -0.01em;
}
.eyebrow,
button,
input,
select,
label,
small,
dt,
dd {
  font-family: var(--font-ui);
}
button,
h1,
h2,
h3 {
  overflow-wrap: break-word;
}
h1:focus,
h2:focus {
  outline: 0;
}
[hidden] {
  display: none !important;
}
.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;
}
.skip-link {
  position: absolute;
  top: 10px;
  left: 10px;
  transform: translateY(-150%);
  background: var(--paper);
  color: var(--ink);
  padding: 15px;
  z-index: 30;
}
.skip-link:focus {
  transform: none;
}
.loading {
  padding: 80px;
  text-align: center;
}
.masthead,
.site-footer,
main {
  max-width: 1380px;
  margin: 0 auto;
}
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 27px 55px 23px;
  border-bottom: 1px solid #434b3e;
  gap: 24px;
}
.brand {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 0;
  text-align: left;
  font-size: 1.6rem;
  font-weight: bold;
  letter-spacing: 0.01em;
}
.brand-mark {
  font-size: 1.8rem;
  line-height: 1;
  border: 1px solid #9d9b74;
  padding: 9px 10px;
  position: relative;
  color: var(--gold);
}
.brand-mark:after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid #726e50;
}
.brand small {
  display: block;
  font: var(--fs-label)/1.6 var(--font-ui);
  letter-spacing: 0.01em;
  margin-top: 4px;
  color: #a4a78c;
}
.masthead nav {
  display: flex;
  align-items: center;
  gap: 29px;
}
.masthead nav button {
  font: var(--fs-label)/1.4 var(--font-ui);
  padding: 10px 0;
}
.masthead nav button:hover {
  color: var(--gold);
}
.settings-button {
  border: 1px solid #52604e !important;
  padding: 10px 13px !important;
}
.collection {
  padding: 0 55px;
}
.collection-intro {
  display: grid;
  grid-template-columns: 1fr 285px;
  gap: 50px;
  align-items: center;
  padding: 59px 0 51px;
}
.edition,
.eyebrow,
.intro-meta,
.seal-top,
.seal-bottom,
.shelf-header sup,
.discovery-count,
.filter,
.filter-note,
.cover-top,
.cover-caption > span,
.story-origin,
.card-foot,
.new-run,
.how-number,
.site-footer,
.journey-heading,
.cabinet-bar,
.stage-coordinate,
.stage-bottom,
.chapter-line,
.consequence > span,
.action-heading,
.action-button small,
.action-key,
.field-panel-head,
.stats label,
.panel-tabs,
.bag-heading,
.inventory-item,
.item-detail small,
.crafting button,
.save-tools,
.cabinet-footer,
.puzzle-top > span,
.puzzle-slots,
.fineprint,
.trail-list,
.clue-list > li > span,
.history small {
  font-family: var(--font-ui);
}
.edition {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-label);
  letter-spacing: 0.01em;
  color: var(--gold);
  margin-bottom: 23px;
}
.small-star {
  font-size: var(--fs-lead);
}
.edition .rule {
  display: block;
  width: 38px;
  height: 1px;
  background: #817f5c;
}
.intro-copy h1 {
  font-size: clamp(3rem, 5.8vw, 5rem);
  font-weight: normal;
  line-height: 1.06;
  letter-spacing: -0.04em;
  margin-bottom: 22px;
}
.intro-copy h1 em {
  color: #c6ac7d;
  font-weight: normal;
}
.intro-copy > p {
  font-size: 1.1rem;
  line-height: 1.65;
  color: #b6b7a5;
  margin-bottom: 28px;
}
.intro-meta {
  display: flex;
  gap: 23px;
  font-size: var(--fs-label);
  color: #b0ad90;
  letter-spacing: 0.01em;
}
.intro-meta span + span:before {
  content: "◆";
  font-size: var(--fs-label);
  margin-right: 23px;
  color: #b2764d;
}
.atlas-seal {
  text-align: center;
  color: var(--gold);
  transform: rotate(-9deg);
  padding-top: 16px;
  opacity: 0.75;
}
.seal-top,
.seal-bottom {
  font-size: var(--fs-label);
  letter-spacing: 0.01em;
}
.compass {
  width: 220px;
  height: 220px;
  margin: 6px auto;
  position: relative;
}
.compass svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #b7aa7f;
  stroke-width: 1;
}
.compass .needle {
  fill: #a0875d;
  stroke: none;
}
.compass-letter {
  position: absolute;
  font: var(--fs-label)/1.3 var(--font-display);
  background: var(--ink);
  padding: 4px;
}
.north {
  top: -4px;
  left: 102px;
}
.east {
  right: -2px;
  top: 102px;
}
.south {
  bottom: -5px;
  left: 102px;
}
.west {
  left: -4px;
  top: 102px;
}
.shelf-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 15px;
  padding-top: 27px;
  border-top: 1px solid #65705a;
}
.eyebrow {
  font-size: var(--fs-label);
  letter-spacing: 0.01em;
  color: var(--gold);
}
.shelf-header h2 {
  font-size: 2rem;
  font-weight: normal;
  letter-spacing: -0.025em;
  margin: 8px 0 20px;
}
.shelf-header sup {
  font-size: var(--fs-label);
  vertical-align: top;
  letter-spacing: 0;
  color: #9b9e86;
  margin-left: 9px;
  line-height: 2.8;
}
.discovery-count {
  font-size: var(--fs-label);
  color: #b6b49a;
  margin-bottom: 23px;
}
.filters {
  display: flex;
  gap: 8px;
  align-items: center;
  border-bottom: 1px solid #46513f;
  padding-bottom: 21px;
}
.filter {
  font-size: var(--fs-label);
  border: 1px solid #4e5846;
  padding: 8px 17px;
  color: #b9b9a5;
}
.filter.active {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}
.filter:hover {
  border-color: var(--gold);
}
.filter-note {
  margin-left: auto;
  font-size: var(--fs-label);
  letter-spacing: 0.01em;
  color: #9da38c;
}
.story-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding-top: 25px;
}
.story-card {
  border: 1px solid #59614d;
  background: #252c23;
  transition:
    transform 0.2s,
    border-color 0.2s;
}
.story-card:hover {
  border-color: #a29166;
  transform: translateY(-3px);
}
.cover {
  height: 300px;
  position: relative;
  overflow: hidden;
  background: #344433;
  border-bottom: 1px solid #6c7057;
  isolation: isolate;
}
.cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 50%;
  filter: saturate(0.78);
}
.cover:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 35%, #15221ae8 100%);
  z-index: 0;
}
.cover-top {
  position: absolute;
  top: 18px;
  left: 20px;
  right: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-label);
  color: #f0dfba;
  z-index: 1;
}
.cover-region {
  border: 1px solid #c2b68a85;
  padding: 5px 8px;
  font-size: var(--fs-label);
  letter-spacing: 0.01em;
  background: #1d2b2470;
}
.cover-caption {
  position: absolute;
  bottom: 21px;
  left: 23px;
  z-index: 1;
}
.cover-caption > span {
  font-size: var(--fs-label);
  letter-spacing: 0.01em;
  color: #c7b58a;
}
.cover-caption h3 {
  font-size: 2rem;
  font-weight: normal;
  line-height: 1.06;
  margin: 9px 0 0;
  letter-spacing: -0.035em;
}
.cover-corner {
  position: absolute;
  right: 18px;
  bottom: 21px;
  font-size: var(--fs-h3);
  color: #d0bd88;
  z-index: 1;
}
.tide .cover:after {
  background: linear-gradient(transparent 30%, #152a30ed);
}
.orchestra .cover:after {
  background: linear-gradient(transparent 30%, #1c2723ed);
}
.card-body {
  padding: 20px 22px 14px;
}
.story-origin {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--fs-label);
  color: #c5b78d;
}
.story-origin > span {
  color: #a5ac96;
  white-space: nowrap;
}
.card-body > p {
  font-size: var(--fs-ui);
  line-height: 1.6;
  color: #c3c6b4;
  min-height: 76px;
  margin: 16px 0 23px;
}
.card-bottom {
  display: flex;
  gap: 10px;
  align-items: center;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font: var(--fs-label)/1.3 var(--font-ui);
  text-decoration: none;
  letter-spacing: 0.01em;
  background: var(--gold);
  color: #21261e;
  padding: 14px 17px;
  min-height: 44px;
  border: 1px solid var(--gold);
  box-shadow:
    inset 0 1px #f0ddae,
    0 2px #141c16;
}
.button:hover {
  background: #e0c18a;
}
.button:active {
  transform: translateY(1px);
  box-shadow: none;
}
.button.secondary {
  background: none;
  border-color: #6c735a;
  box-shadow: none;
  color: var(--paper);
}
.button.secondary:hover {
  background: #35402f;
}
.start-button {
  flex: 1;
}
.source-button {
  font-size: var(--fs-lead);
  padding: 8px 4px;
  color: #b4b69c;
}
.source-button:hover {
  color: var(--gold);
}
.card-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid #464e3d;
  padding-top: 13px;
  margin-top: 19px;
  font-size: var(--fs-label);
  letter-spacing: 0.01em;
  color: #9da38b;
}
.new-run {
  color: #c5b78d;
  font-size: var(--fs-label);
  text-decoration: underline;
  padding: 12px 0 0;
}
.how-to {
  display: grid;
  grid-template-columns: 160px repeat(3, 1fr);
  gap: 28px;
  border-top: 1px solid #546049;
  border-bottom: 1px solid #546049;
  margin: 46px 0 0;
  padding: 25px 0;
}
.how-number {
  font-size: var(--fs-label);
  color: var(--gold);
  letter-spacing: 0.01em;
  align-self: center;
}
.how-to b {
  font-weight: normal;
  font-size: var(--fs-body);
}
.how-to p {
  font-size: var(--fs-label);
  line-height: 1.5;
  color: #a9ad96;
  margin: 8px 0 0;
}
.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: #919a82;
  font-size: var(--fs-label);
  padding: 29px 55px 31px;
}
.site-footer i {
  font-family: var(--font-display);
}
.site-footer button {
  padding: 0;
  font-size: var(--fs-label);
  color: #b6b69b;
}
.site-footer button:hover {
  color: var(--gold);
}
/* The play cabinet keeps the scene, objects and actions in one place. */
.play-screen {
  padding: 25px 55px 0;
  --accent: #c7ad79;
}
.play-screen.tide {
  --accent: #a2bfb0;
}
.play-screen.orchestra {
  --accent: #c7ba8e;
}
.journey-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: var(--fs-label);
  color: #a1aa92;
  padding-bottom: 20px;
}
.back-link {
  font-size: var(--fs-label);
  padding: 7px 0;
  color: #c2be9c;
}
.separator {
  margin: 0 13px;
  color: #6d775f;
}
.game-cabinet {
  border: 3px solid #111911;
  box-shadow:
    0 0 0 1px #7a7b5b,
    6px 7px 0 #131b16;
  background: #1c241d;
}
.cabinet-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 3px solid #10170f;
  background: #575b43;
  color: #e7ddbc;
  font-size: var(--fs-label);
  letter-spacing: 0.01em;
}
.status-light {
  width: 7px;
  height: 7px;
  background: #d1ab68;
  border: 1px solid #eee0b2;
  box-shadow: 0 0 0 2px #333d2d;
}
.bar-right {
  margin-left: auto;
  opacity: 0.75;
}
.game-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 315px;
}
.play-column {
  min-width: 0;
  border-right: 3px solid #111b13;
}
.scene-stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1.94;
  background: #2c3b2d;
  isolation: isolate;
}
.scene-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  display: block;
  filter: saturate(0.75);
}
.stage-grid {
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 0.07;
  background: repeating-linear-gradient(transparent 0 3px, #000 3px 4px);
  z-index: 1;
}
.scene-stage:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 75px #101c17aa;
  z-index: 1;
}
.scene-location {
  position: absolute;
  top: 16px;
  left: 19px;
  right: 19px;
  display: flex;
  justify-content: space-between;
  align-items: start;
  z-index: 2;
}
.scene-location .eyebrow {
  background: #15251dbf;
  padding: 8px 10px;
  color: #ecdfb9;
  max-width: 80%;
  font-size: var(--fs-label);
  border: 1px solid #c9c6a03d;
}
.location-marker {
  font-size: var(--fs-h3);
  color: #e2d4a7;
  opacity: 0.6;
}
.stage-coordinate {
  position: absolute;
  top: 55px;
  left: 20px;
  font-size: var(--fs-label);
  letter-spacing: 0.01em;
  color: #ecdfb9;
  opacity: 0.7;
  z-index: 2;
}
.stage-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 18px;
  display: flex;
  justify-content: space-between;
  gap: 15px;
  background: #14221be0;
  font-size: var(--fs-label);
  letter-spacing: 0.01em;
  color: #d6ccaa;
  border-top: 1px solid #a5ad7b44;
  z-index: 2;
}
.hotspot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 3;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}
.hotspot > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid #eddbab;
  background: #1d2d25bd;
  box-shadow: 0 0 0 4px #17281b55;
  color: #eddbab;
  font-size: var(--fs-lead);
  transition: background 0.2s;
}
.hotspot small {
  position: absolute;
  top: 45px;
  background: #17271ff0;
  padding: 8px 11px;
  width: max-content;
  max-width: 180px;
  border: 1px solid #b0a67e;
  color: #e7ddbc;
  font: var(--fs-label)/1.4 var(--font-ui);
  opacity: 0;
  pointer-events: none;
}
.hotspot:hover > span,
.hotspot:focus > span {
  background: #b99b60;
  color: #19231c;
}
.hotspot:hover small,
.hotspot:focus small {
  opacity: 1;
}
.narrative {
  padding: 23px 27px 28px;
  min-height: 350px;
}
.chapter-line {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: var(--fs-label);
  letter-spacing: 0.01em;
  color: #aeb194;
  margin-bottom: 13px;
}
.narrative h1 {
  font-size: 2.05rem;
  letter-spacing: -0.025em;
  line-height: 1.14;
  font-weight: normal;
  margin-bottom: 13px;
}
.story-text {
  font-size: var(--story-size);
  line-height: 1.72;
  color: #d4d6c1;
  margin-bottom: 15px;
  max-width: 70ch;
}
.scene-variant {
  font-size: var(--fs-ui);
  line-height: 1.65;
  font-style: italic;
  color: #b9c1a8;
}
.consequence {
  border-left: 2px solid #a08e5e;
  padding: 8px 12px;
  margin: 16px 0;
  background: #46503b38;
}
.consequence > span {
  font-size: var(--fs-label);
  letter-spacing: 0.01em;
  color: #c6b88c;
}
.consequence > p {
  font-size: var(--fs-label);
  line-height: 1.5;
  color: #bdc6af;
  margin: 5px 0 0;
}
.consequence.encounter-note {
  border-color: #c77d4f;
  background: #83503030;
}
.action-heading {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid #4a5543;
  padding-top: 18px;
  margin-top: 21px;
  font-size: var(--fs-label);
  letter-spacing: 0.01em;
  color: #c6b88c;
}
.action-heading > span + span {
  font-size: var(--fs-label);
  letter-spacing: 0;
  color: #8c9a81;
}
.actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 11px;
}
.action-button {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 13px;
  text-align: left;
  min-height: 65px;
  background: #303b2c;
  border: 1px solid #5a654d;
  box-shadow:
    inset 1px 1px #67745a55,
    inset -1px -1px #101f13;
  color: #dfdfc9;
  transition: background 0.15s;
}
.action-button:hover {
  background: #405037;
  border-color: #b5b58a;
}
.action-button:active {
  background: #202c1e;
  box-shadow: inset 1px 1px #111;
}
.action-button b {
  display: block;
  font-size: var(--fs-label);
  font-weight: normal;
  line-height: 1.35;
}
.action-button small {
  display: block;
  font-size: var(--fs-label);
  letter-spacing: 0.01em;
  color: #9eae8f;
  margin-top: 6px;
  line-height: 1.4;
}
.action-icon {
  font-size: var(--fs-lead);
  color: #b8bb8e;
  min-width: 19px;
  text-align: center;
}
.action-key {
  font-size: var(--fs-label);
  border: 1px solid #6a775955;
  color: #8e9c81;
  padding: 2px 4px;
  margin-left: auto;
  align-self: start;
}
.action-button.unavailable {
  background: #252e24;
  border-color: #3f4b39;
  box-shadow: none;
}
.unavailable b {
  color: #9aab93;
}
.unavailable .action-icon {
  opacity: 0.5;
}
.unavailable small {
  color: #a1ab90;
  text-transform: none;
  font-size: var(--fs-label);
}
.field-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #252e24;
}
.field-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--fs-label);
  letter-spacing: 0.01em;
  padding: 17px 19px;
  background: #3c4734;
  border-bottom: 1px solid #637054;
  color: #d4cfaa;
}
.field-panel-head > span + span {
  font-size: var(--fs-label);
  color: #adb89b;
}
.objective {
  padding: 21px 20px 17px;
  border-bottom: 1px solid #4c5842;
}
.objective p {
  font-size: 1.1rem;
  line-height: 1.45;
  margin: 11px 0 0;
  color: #e3dfc5;
}
.stats {
  padding: 17px 20px 19px;
  display: grid;
  gap: 15px;
}
.stats label {
  font-size: var(--fs-label);
  color: #abb89e;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.stats label > b {
  color: #d1caa3;
  font-weight: normal;
}
.stats label small {
  font-size: var(--fs-label);
  color: #b3b294;
  margin-left: 2px;
}
.stat-track {
  height: 4px;
  background: #121e16;
  margin-top: 7px;
  box-shadow: 0 1px #56604c;
}
.stat-track span {
  display: block;
  height: 100%;
  background: #aaa77a;
  min-width: 0;
  transition: width 0.3s;
}
.panel-tabs {
  display: flex;
  border-bottom: 1px solid #5c6c4b;
  padding: 0 19px;
  gap: 4px;
}
.panel-tabs button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
  font-size: var(--fs-label);
  padding: 12px 0;
  border: 1px solid transparent;
  border-bottom: none;
  color: #a7b89a;
}
.panel-tabs .selected {
  border-color: #657454;
  background: #34412e;
  color: #e4dec0;
  box-shadow: 0 1px #34412e;
}
.panel-tabs small {
  font-size: var(--fs-label);
  opacity: 0.8;
}
.panel-content {
  padding: 19px 19px 25px;
  flex: 1;
  background: #293527;
  min-height: 230px;
}
.bag-heading {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--fs-label);
  letter-spacing: 0.01em;
  color: #a6b394;
  margin-bottom: 13px;
}
.inventory-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.inventory-item {
  border: 1px solid #697956;
  background: #35432d;
  min-height: 89px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 9px 5px;
  color: #d9d8b8;
  font-size: var(--fs-label);
  text-align: center;
  box-shadow:
    inset 1px 1px #87916b55,
    inset -1px -1px #182511;
}
.inventory-item:hover,
.inventory-item.selected {
  background: #4d5c3b;
  border-color: var(--gold);
}
.item-glyph {
  font: 31px/1.1 var(--font-display);
  color: #d5c48f;
  text-shadow: 2px 2px #162319;
}
.item-detail {
  margin-top: 13px;
  padding: 14px;
  border: 1px solid #788365;
  background: #1b2819;
}
.item-detail b {
  font-size: var(--fs-ui);
  font-weight: normal;
  color: #dfd5b1;
}
.item-detail p {
  font-size: var(--fs-label);
  line-height: 1.6;
  color: #b9c4a7;
  margin: 8px 0 12px;
}
.item-detail small {
  font-size: var(--fs-label);
  letter-spacing: 0.01em;
  line-height: 1.6;
  color: #a3b18f;
}
.empty-bag {
  text-align: center;
  padding: 20px 10px;
  color: #b2bea1;
}
.empty-bag > span {
  font: 44px/1 var(--font-display);
  opacity: 0.5;
}
.empty-bag > p {
  font-size: var(--fs-body);
  margin: 11px 0 8px;
}
.empty-bag small {
  font: var(--fs-label)/1.7 var(--font-ui);
  color: #94a086;
}
.crafting {
  margin-top: 22px;
}
.crafting button {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px dashed #a6a877;
  margin-top: 10px;
  padding: 12px;
  color: #e0d4a8;
  font-size: var(--fs-label);
  background: #414d3233;
}
.crafting button:hover {
  background: #485c36;
}
.crafting button > span {
  float: right;
}
.crafting small {
  display: block;
  margin-top: 8px;
  font-size: var(--fs-label);
  color: #a9b598;
  line-height: 1.7;
}
.theme-box {
  padding: 18px 20px;
  border-top: 1px solid #526044;
}
.theme-box > .eyebrow {
  font-size: var(--fs-label);
  color: #adb597;
}
.theme-box button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border: 1px solid #60704e;
  width: 100%;
  padding: 11px 10px;
  margin: 10px 0;
  color: #d4c799;
  background: #303e28;
}
.theme-box button > span + span {
  font: var(--fs-label)/1.4 var(--font-ui);
}
.theme-box button:hover:enabled {
  background: #4a5836;
}
.theme-box button:disabled {
  opacity: 0.75;
}
.theme-box p {
  font: var(--fs-label)/1.7 var(--font-ui);
  color: #9eac8f;
  margin: 0;
}
.save-tools {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--fs-label);
  padding: 15px 19px;
  background: #1d291b;
  border-top: 1px solid #49593a;
  color: #a9b798;
}
.save-tools button {
  font-size: var(--fs-label);
  text-decoration: underline;
  padding: 0;
  color: #d4c69b;
}
.cabinet-footer {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  font-size: var(--fs-label);
  padding: 12px 17px;
  background: #424b35;
  border-top: 3px solid #152010;
  color: #bdc3a5;
}
.cabinet-footer > span + span {
  font-family: var(--font-display);
  font-style: italic;
  color: #c9c9ad;
}
.cabinet-footer button {
  font-size: var(--fs-label);
  padding: 0;
  color: #d6c798;
}
.clue-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.clue-list li {
  display: flex;
  gap: 12px;
  border-bottom: 1px solid #4b5b3f;
  padding: 0 0 14px;
  margin-bottom: 15px;
}
.clue-list > li > span {
  font-size: var(--fs-label);
  color: #c1b481;
  margin-top: 4px;
}
.clue-list p {
  font-size: var(--fs-ui);
  line-height: 1.6;
  color: #becbb0;
  margin: 0;
}
.history {
  margin-top: 20px;
}
.history summary {
  font: var(--fs-label)/1.4 var(--font-ui);
  color: #c5bc94;
  cursor: pointer;
  padding: 10px 0;
}
.history p {
  font-size: var(--fs-label);
  line-height: 1.5;
  border-top: 1px solid #46553b;
  padding-top: 10px;
  color: #b1bea1;
}
.history small {
  display: block;
  font-size: var(--fs-label);
  color: #95a485;
  margin-bottom: 5px;
}
.trail-list {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  font-size: var(--fs-label);
}
.trail-list li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0 0 19px 1px;
  color: #a7b99c;
}
.trail-list li:after {
  content: "";
  position: absolute;
  left: 4px;
  top: 13px;
  bottom: 4px;
  width: 1px;
  background: #637550;
}
.trail-list li:last-child:after {
  display: none;
}
.trail-list .current {
  color: #e3d6ad;
}
.trail-list span {
  font-size: var(--fs-label);
  color: #b4af78;
}
.trail-list small {
  display: block;
  width: 100%;
  padding-left: 20px;
  margin-top: -5px;
  font-size: var(--fs-label);
  color: #b8ae7d;
}
.fineprint {
  font-size: var(--fs-label);
  line-height: 1.8;
  color: #a7b497;
}
.full {
  width: 100%;
  font-size: var(--fs-label) !important;
  line-height: 1.6;
}
.puzzle {
  margin: 20px 0;
  padding: 17px;
  border: 1px solid #9e9d68;
  background: #3a432c;
  box-shadow: inset 0 0 0 3px #29351e;
}
.puzzle-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
.puzzle-top h2 {
  font-size: var(--fs-body);
  font-weight: normal;
  margin: 0;
}
.puzzle-top > span {
  font-size: var(--fs-label);
  color: #d3bd7b;
  white-space: nowrap;
}
.puzzle > p {
  font: var(--fs-label)/1.7 var(--font-ui);
  color: #bfc5a3;
  margin: 9px 0 15px;
}
.puzzle-slots {
  display: flex;
  gap: 7px;
  margin-bottom: 13px;
}
.puzzle-slots span {
  flex: 1;
  min-height: 38px;
  display: grid;
  place-items: center;
  font-size: var(--fs-label);
  border: 1px dashed #8b9865;
  color: #9aa77c;
  padding: 5px;
  text-align: center;
}
.puzzle-slots .filled {
  background: #192c1b;
  border-style: solid;
  color: #e2ce91;
}
.puzzle-options {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.puzzle-options button {
  flex: 1;
  font: var(--fs-label)/1.5 var(--font-ui);
  border: 1px solid #8a9863;
  background: #4b5835;
  padding: 10px 5px;
  min-width: 60px;
  color: #e6d6a7;
  box-shadow: inset 1px 1px #a4a67555;
}
.puzzle-options button:hover {
  background: #677349;
}
.puzzle-options button > span {
  display: block;
  font-size: var(--fs-body);
  margin-bottom: 4px;
}
.puzzle-options .puzzle-clear {
  background: none;
  box-shadow: none;
  flex: 0 0 55px;
  color: #b4c096;
}
.puzzle-success {
  color: #ddd7a5 !important;
  margin-bottom: 0 !important;
}
.ending-reflection {
  margin-top: 24px;
  padding-top: 23px;
  border-top: 1px solid #657050;
}
.ending-reflection > p {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: #c7cead;
  margin: 12px 0 23px;
  font-style: italic;
}
.ending-reflection h2 {
  font-size: 1.1rem;
  font-weight: normal;
}
.ending-reflection ul {
  padding-left: 18px;
  color: #a8b798;
  font-size: var(--fs-label);
  line-height: 1.9;
}
.ending-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 23px;
}
.ending-seal {
  position: absolute;
  top: 40%;
  left: 46%;
  font-size: 70px;
  color: #ead6a1;
  text-shadow: 0 3px #172819;
}
.interrupted {
  outline: 2px solid #bc8052;
  outline-offset: -5px;
}
.play-screen[data-theme="mystery"] .scene-image {
  filter: saturate(0.45) contrast(1.1);
}
.play-screen[data-theme="survival"] .scene-image {
  filter: saturate(0.65) sepia(0.15) brightness(0.86);
}
/* Dialogs and accessibility settings. */
dialog {
  color: var(--paper);
  background: #253123;
  border: 1px solid #a39c70;
  box-shadow:
    0 0 0 5px #142115,
    10px 15px 0 #101a14aa;
  padding: 35px;
  max-width: 660px;
  width: calc(100% - 40px);
  max-height: 85dvh;
  overflow-y: auto;
}
dialog::backdrop {
  background: #0c180fd9;
  backdrop-filter: blur(3px);
}
.dialog-close {
  position: absolute;
  top: 10px;
  right: 12px;
  font: var(--fs-h3)/1 var(--font-ui);
  padding: 5px;
  color: #b9bd9b;
}
.dialog-close:hover {
  color: var(--paper);
}
dialog h2 {
  font-size: 2rem;
  font-weight: normal;
  line-height: 1.15;
  margin: 15px 0 20px;
}
dialog > div > p,
.source-note p {
  font-size: var(--fs-ui);
  line-height: 1.75;
  color: #bfc9ad;
}
.source-note {
  border-top: 1px solid #586547;
  margin-top: 25px;
  padding-top: 24px;
}
.source-note h3 {
  font-size: 1.3rem;
  font-weight: normal;
  margin: 9px 0 14px;
}
.source-note a {
  font: var(--fs-label)/1.4 var(--font-ui);
}
.source-note .fineprint {
  font-size: var(--fs-label);
}
.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  border-top: 1px solid #526242;
  padding: 19px 0;
}
.setting-row label {
  font-size: var(--fs-body);
}
.setting-row small {
  display: block;
  margin-top: 7px;
  font: var(--fs-label)/1.5 var(--font-ui);
  color: #a7b495;
}
.setting-row input {
  width: 21px;
  height: 21px;
  accent-color: var(--gold);
}
.setting-row select {
  max-width: 140px;
  padding: 8px 11px;
  background: #33452b;
  border: 1px solid #7b8962;
  color: #e2d6b0;
  font: var(--fs-label)/1.4 var(--font-ui);
}
.dialog-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 25px;
}
.theme-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 25px;
}
.theme-choices > button {
  text-align: left;
  padding: 21px;
  border: 1px solid #7b8960;
  background: #34452b;
}
.theme-choices > button:hover {
  border-color: #d4bd7c;
  background: #415334;
}
.theme-choices > button > span {
  font-size: 35px;
  color: #d4bd7c;
  display: block;
  margin-bottom: 13px;
}
.theme-choices b {
  font-size: 1.4rem;
  font-weight: normal;
}
.theme-choices p {
  font-size: var(--fs-ui);
  line-height: 1.6;
  color: #c0cbae;
  margin: 10px 0 15px;
}
.theme-choices small {
  font: var(--fs-label)/1.8 var(--font-ui);
  color: #b9c79e;
}
.toast {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  background: #e0c48a;
  color: #1d2d1e;
  border: 2px solid #182d1b;
  box-shadow:
    0 0 0 1px #d2bb80,
    4px 4px 0 #13241690;
  max-width: calc(100% - 35px);
  width: max-content;
  padding: 14px 20px;
  font: var(--fs-label)/1.6 var(--font-ui);
}
body[data-text="large"] {
  --scale: 1.15;
}
body[data-motion="off"] *,
body[data-motion="off"] *:before,
body[data-motion="off"] *:after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: no-preference) {
  body[data-motion="on"] .narrative.enter {
    animation: appear 0.2s ease-out;
  }
  body[data-motion="on"] .interrupted {
    animation: alert 0.3s ease-out;
  }
  @keyframes appear {
    from {
      opacity: 0.5;
      transform: translateY(4px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes alert {
    25% {
      transform: translateX(2px);
    }
    75% {
      transform: translateX(-2px);
    }
  }
}
@media (min-width: 1500px) {
  .collection-intro {
    padding-top: 70px;
    padding-bottom: 63px;
  }
  .cover {
    height: 330px;
  }
}
@media (max-width: 1100px) {
  .masthead {
    padding: 23px 30px;
  }
  .collection {
    padding: 0 30px;
  }
  .play-screen {
    padding: 23px 30px 0;
  }
  .site-footer {
    padding: 26px 30px;
  }
  .game-layout {
    grid-template-columns: minmax(0, 1fr) 280px;
  }
  .narrative {
    padding: 22px;
  }
  .story-grid {
    gap: 17px;
  }
  .card-body {
    padding: 18px 17px 14px;
  }
  .cover {
    height: 280px;
  }
  .cover-caption {
    left: 18px;
  }
  .cover-caption h3 {
    font-size: 1.8rem;
  }
  .story-origin {
    font-size: var(--fs-label);
  }
  .card-body > p {
    font-size: var(--fs-ui);
    min-height: 92px;
  }
  .collection-intro {
    grid-template-columns: 1fr 230px;
    gap: 30px;
  }
  .atlas-seal {
    transform: scale(0.9) rotate(-9deg);
  }
  .how-to {
    grid-template-columns: 120px repeat(3, 1fr);
    gap: 20px;
  }
  .action-button {
    padding: 10px;
    gap: 8px;
  }
  .action-key {
    display: none;
  }
  .action-button b {
    font-size: var(--fs-label);
  }
}
@media (max-width: 850px) {
  .masthead {
    padding: 21px 24px;
  }
  .masthead nav {
    gap: 20px;
  }
  .brand {
    font-size: 1.4rem;
  }
  .brand small {
    font-size: var(--fs-label);
  }
  .collection {
    padding: 0 24px;
  }
  .intro-copy h1 {
    font-size: 3.7rem;
  }
  .collection-intro {
    grid-template-columns: 1fr 170px;
    gap: 10px;
    padding-top: 45px;
    padding-bottom: 40px;
  }
  .atlas-seal {
    transform: scale(0.7) rotate(-9deg);
    margin-left: -30px;
    margin-right: -30px;
  }
  .intro-meta {
    gap: 12px;
    font-size: var(--fs-label);
  }
  .intro-meta span + span:before {
    margin-right: 12px;
  }
  .story-grid {
    gap: 14px;
  }
  .cover {
    height: 240px;
  }
  .cover-caption h3 {
    font-size: 1.55rem;
  }
  .cover-caption > span {
    font-size: var(--fs-label);
  }
  .cover-top {
    left: 15px;
    right: 15px;
    font-size: var(--fs-label);
  }
  .cover-region {
    font-size: var(--fs-label);
    padding: 4px;
  }
  .cover-caption {
    left: 16px;
  }
  .cover-corner {
    display: none;
  }
  .story-origin {
    flex-direction: column;
    gap: 8px;
  }
  .card-body > p {
    min-height: 115px;
  }
  .button {
    padding: 12px 10px;
    font-size: var(--fs-label);
  }
  .card-foot {
    flex-direction: column;
    gap: 8px;
  }
  .how-to {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
  }
  .how-number {
    grid-column: 1/-1;
  }
  .play-screen {
    padding: 22px 24px 0;
  }
  .game-layout {
    grid-template-columns: minmax(0, 1fr) 255px;
  }
  .actions {
    grid-template-columns: 1fr;
  }
  .scene-stage {
    aspect-ratio: 1.4;
  }
  .narrative h1 {
    font-size: 1.8rem;
  }
  .story-text {
    font-size: var(--fs-body);
  }
  .narrative {
    padding: 20px;
  }
  .field-panel-head,
  .objective,
  .stats,
  .panel-content,
  .theme-box {
    padding-left: 16px;
    padding-right: 16px;
  }
  .panel-tabs {
    padding-left: 14px;
    padding-right: 14px;
  }
  .chapter-line {
    font-size: var(--fs-label);
  }
  .journey-heading {
    font-size: var(--fs-label);
  }
  .journey-heading .separator {
    margin: 0 5px;
  }
  .cabinet-footer > span + span {
    display: none;
  }
  .filter-note {
    font-size: var(--fs-label);
  }
  .site-footer {
    padding: 25px 24px;
  }
}
@media (max-width: 620px) {
  .masthead {
    gap: 12px;
    padding: 18px 19px;
  }
  .brand {
    gap: 10px;
    font-size: 1.25rem;
  }
  .brand-mark {
    font-size: 1.4rem;
    padding: 8px;
  }
  .brand small {
    font-size: var(--fs-label);
    letter-spacing: 0.01em;
  }
  .masthead nav {
    gap: 14px;
  }
  .masthead nav button {
    font-size: var(--fs-label);
  }
  .masthead #library-link {
    display: none;
  }
  .settings-button {
    padding: 9px !important;
  }
  .settings-button span {
    display: none;
  }
  .collection {
    padding: 0 20px;
  }
  .collection-intro {
    display: block;
    position: relative;
    padding-top: 35px;
    padding-bottom: 35px;
    overflow: hidden;
  }
  .intro-copy {
    position: relative;
    z-index: 1;
  }
  .intro-copy h1 {
    font-size: 3.2rem;
    line-height: 1.05;
    letter-spacing: -0.045em;
    margin-bottom: 20px;
  }
  .intro-copy > p {
    font-size: var(--fs-body);
  }
  .edition {
    font-size: var(--fs-label);
    gap: 9px;
    margin-bottom: 21px;
  }
  .edition .rule {
    width: 22px;
  }
  .small-star {
    font-size: var(--fs-body);
  }
  .atlas-seal {
    position: absolute;
    top: 10px;
    right: -81px;
    opacity: 0.12;
    transform: scale(0.9) rotate(-9deg);
    margin: 0;
    pointer-events: none;
  }
  .intro-meta {
    font-size: var(--fs-label);
    gap: 10px;
  }
  .intro-meta span + span:before {
    margin-right: 10px;
  }
  .shelf-header {
    padding-top: 23px;
  }
  .shelf-header h2 {
    font-size: 1.8rem;
  }
  .eyebrow {
    font-size: var(--fs-label);
  }
  .discovery-count {
    font-size: var(--fs-label);
    white-space: normal;
    text-align: left;
  }
  .filters {
    gap: 6px;
    padding-bottom: 18px;
    flex-wrap: wrap;
  }
  .filter {
    padding: 8px 13px;
    font-size: var(--fs-label);
  }
  .filter-note {
    display: none;
  }
  .story-grid {
    grid-template-columns: 1fr;
    gap: 23px;
    padding-top: 20px;
  }
  .cover {
    height: 290px;
  }
  .cover-top {
    left: 20px;
    right: 20px;
    top: 18px;
    font-size: var(--fs-label);
  }
  .cover-region {
    font-size: var(--fs-label);
    padding: 5px 8px;
  }
  .cover-caption {
    left: 24px;
    bottom: 22px;
  }
  .cover-caption h3 {
    font-size: 2.3rem;
  }
  .cover-caption > span {
    font-size: var(--fs-label);
  }
  .cover-corner {
    display: block;
    right: 22px;
    bottom: 24px;
  }
  .card-body {
    padding: 20px 22px 17px;
  }
  .story-origin {
    flex-direction: row;
    font-size: var(--fs-label);
  }
  .card-body > p {
    min-height: 0;
    font-size: var(--fs-body);
    margin: 16px 0 22px;
  }
  .card-foot {
    flex-direction: row;
    font-size: var(--fs-label);
  }
  .button {
    font-size: var(--fs-label);
    padding: 14px 16px;
  }
  .how-to {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 25px 0;
    margin-top: 32px;
  }
  .how-number {
    grid-column: auto;
  }
  .how-to > div {
    padding-left: 0;
  }
  .how-to b {
    font-size: 1.1rem;
  }
  .how-to p {
    margin-top: 5px;
  }
  .site-footer {
    padding: 24px 20px;
    flex-wrap: wrap;
    gap: 15px;
    font-size: var(--fs-label);
  }
  .site-footer > span:nth-child(2) {
    display: none;
  }
  .site-footer button {
    font-size: var(--fs-label);
    margin-left: auto;
  }
  .play-screen {
    padding: 17px 12px 0;
  }
  .journey-heading {
    gap: 10px;
    flex-wrap: wrap;
    font-size: var(--fs-label);
    padding: 0 3px 13px;
  }
  .journey-heading > span {
    order: 3;
    width: 100%;
    font-size: var(--fs-label);
  }
  .journey-heading button {
    font-size: var(--fs-label);
  }
  .cabinet-bar {
    font-size: var(--fs-label);
    padding: 10px;
    gap: 8px;
  }
  .bar-right {
    font-size: var(--fs-label);
  }
  .game-layout {
    grid-template-columns: 1fr;
  }
  .play-column {
    border-right: 0;
    border-bottom: 3px solid #111b13;
  }
  .scene-stage {
    aspect-ratio: 1.65;
  }
  .scene-location {
    top: 12px;
    left: 13px;
    right: 13px;
  }
  .scene-location .eyebrow {
    font-size: var(--fs-label);
    padding: 7px 8px;
  }
  .stage-coordinate {
    left: 14px;
    top: 47px;
    font-size: var(--fs-label);
  }
  .stage-bottom {
    padding: 9px 13px;
    font-size: var(--fs-label);
  }
  .narrative {
    padding: 21px 18px 24px;
  }
  .narrative h1 {
    font-size: 1.8rem;
  }
  .story-text {
    font-size: var(--story-size);
    line-height: 1.65;
  }
  .actions {
    grid-template-columns: 1fr;
  }
  .action-button {
    padding: 13px 14px;
    min-height: 65px;
    gap: 12px;
  }
  .action-button b {
    font-size: var(--fs-ui);
  }
  .action-button small {
    font-size: var(--fs-label);
  }
  .action-key {
    display: block;
  }
  .action-heading {
    font-size: var(--fs-label);
  }
  .action-heading > span + span {
    font-size: var(--fs-label);
  }
  .field-panel-head {
    padding: 15px 19px;
  }
  .objective {
    padding: 19px;
  }
  .objective p {
    font-size: var(--fs-body);
  }
  .stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 17px 19px 23px;
  }
  .stats label {
    font-size: var(--fs-label);
    flex-direction: column;
    gap: 5px;
  }
  .stats label b {
    font-size: var(--fs-label);
  }
  .stats label small {
    font-size: var(--fs-label);
  }
  .panel-tabs {
    padding: 0 19px;
  }
  .panel-tabs button {
    font-size: var(--fs-label);
    padding: 14px 0;
  }
  .panel-content {
    padding: 20px 19px;
    min-height: 160px;
  }
  .inventory-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .inventory-item {
    min-height: 93px;
    font-size: var(--fs-label);
  }
  .empty-bag {
    padding: 10px;
  }
  .empty-bag > span {
    font-size: 32px;
  }
  .theme-box {
    padding: 20px;
  }
  .theme-box button {
    padding: 14px;
  }
  .theme-box p {
    font-size: var(--fs-label);
  }
  .save-tools {
    padding: 16px 20px;
    font-size: var(--fs-label);
  }
  .save-tools button {
    font-size: var(--fs-label);
  }
  .cabinet-footer {
    font-size: var(--fs-label);
    padding: 12px;
  }
  .cabinet-footer button {
    font-size: var(--fs-label);
  }
  .puzzle {
    padding: 14px;
  }
  .puzzle-top h2 {
    font-size: var(--fs-body);
  }
  .puzzle-top > span {
    font-size: var(--fs-label);
  }
  .puzzle-options {
    gap: 6px;
  }
  .puzzle-options button {
    min-width: 55px;
    font-size: var(--fs-label);
  }
  .puzzle-slots {
    gap: 5px;
  }
  .puzzle-slots span {
    font-size: var(--fs-label);
  }
  .hotspot small {
    display: none;
  }
  .ending-buttons {
    flex-direction: column;
  }
  .ending-buttons .button {
    font-size: var(--fs-label);
  }
  .theme-choices {
    grid-template-columns: 1fr;
  }
  .theme-choices > button {
    padding: 18px;
  }
  .theme-choices > button > span {
    font-size: var(--fs-h3);
    margin-bottom: 10px;
  }
  .theme-choices b {
    font-size: 1.2rem;
  }
  dialog {
    padding: 28px 23px;
    width: calc(100% - 30px);
  }
  dialog h2 {
    font-size: 1.65rem;
    padding-right: 10px;
  }
  .setting-row {
    gap: 15px;
  }
  .setting-row small {
    font-size: var(--fs-label);
  }
  .toast {
    font-size: var(--fs-label);
    padding: 12px 15px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Second crossing: dice, deductions, echoes, map, atmosphere, chronicle.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  --echo: #9fc0c8;
  --pass: #b9c98a;
  --fail: #d48a5e;
}
body[data-text="larger"] {
  --scale: 1.3;
}
.masthead nav {
  gap: 22px;
}
.sound-button i {
  font-style: normal;
  color: var(--gold);
  margin-right: 2px;
}
.sound-button[aria-pressed="true"] {
  color: var(--gold);
}
.sound-button[aria-pressed="false"] i {
  opacity: 0.55;
  text-decoration: line-through;
}
.play-screen.olives {
  --accent: #d2b27a;
}
.olives .cover {
  background: #4b3b2b;
}
/* Four tales: a 4-up shelf on wide screens, 2-up on tablets. */
.story-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1250px) {
  .story-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .story-grid {
    grid-template-columns: 1fr;
  }
}

/* Cabinet bar tools */
.bar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 1;
}
.bar-right button {
  font: inherit;
  letter-spacing: 0.01em;
  border: 1px solid #8f9070;
  padding: 3px 8px;
  color: #f0e6c5;
  background: #474a35;
}
.bar-right button:hover:not(:disabled) {
  background: #6a6c4c;
}
.bar-right button:disabled {
  opacity: 0.45;
}
.bar-right .seed,
.bar-right .grace {
  color: #f3ecd2;
}
.bar-right .echo-count {
  color: #d9eef2;
}

/* Atmosphere layers over the scene art */
.weather-layer,
.light-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.light-layer {
  mix-blend-mode: multiply;
  transition:
    background 1.2s,
    opacity 1.2s;
  opacity: 0;
}
.light-layer[data-light="dawn"] {
  background: linear-gradient(180deg, #f2b59a 0%, #f5d9b6 55%, #ffffff 100%);
  opacity: 0.55;
}
.light-layer[data-light="dusk"] {
  background: linear-gradient(180deg, #8a5b7a 0%, #d68d58 55%, #b57a54 100%);
  opacity: 0.6;
}
.light-layer[data-light="night"] {
  background: linear-gradient(180deg, #1b2546 0%, #2c3a5a 60%, #23304a 100%);
  opacity: 0.78;
}
.light-layer[data-light="deep"] {
  background: radial-gradient(ellipse at 50% 0%, #c4e6dc 0%, #3f7a78 55%, #1e3f4a 100%);
  opacity: 0.5;
}
.light-layer[data-light="moon"] {
  background: radial-gradient(ellipse at 75% 10%, #e9eef2 0%, #5c7088 40%, #1b2438 100%);
  opacity: 0.72;
}
.scene-stage[data-weather="storm"] .scene-image {
  filter: saturate(0.55) brightness(0.8);
}
.stage-bottom .clock {
  opacity: 0.8;
}

/* Action buttons: odds, retry rules, remembered actions */
.action-button.check {
  border-color: #7d7a55;
}
.action-button.check.white {
  border-style: dashed;
}
.action-button .odds {
  display: flex;
  align-items: center;
  gap: 7px;
  letter-spacing: 0.01em;
  color: #e2d6a6;
}
.odds-meter {
  display: inline-block;
  width: 46px;
  height: 5px;
  background: #121e16;
  box-shadow: 0 1px #56604c;
  flex: none;
}
.odds-meter i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #a8664a, #c7ad79 50%, #b9c98a);
}
.odds-parts {
  display: block;
  margin-top: 4px;
  color: #a3ad91;
  letter-spacing: 0;
  text-transform: none;
}
.action-button.remembered {
  border-color: var(--echo);
  box-shadow:
    inset 0 0 0 1px #9fc0c855,
    inset -1px -1px #101f13;
  background: #2c3b3a;
}
.remembered-badge {
  display: block;
  font-style: normal;
  font-size: var(--fs-label);
  letter-spacing: 0.01em;
  color: var(--echo);
  margin-bottom: 4px;
}
.action-button .requires {
  text-transform: none;
}

/* The dice tray */
.dice-tray {
  margin: 16px 0;
  border: 1px solid #6f6b4c;
  background: #1a2219;
  box-shadow:
    inset 0 0 0 3px #232d21,
    3px 3px 0 #0f1610;
}
.dice-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  font-size: var(--fs-label);
  letter-spacing: 0.01em;
  color: #cbbf91;
  border-bottom: 1px solid #3e4836;
}
.dice-body {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 14px 12px;
}
.dice-pair {
  display: flex;
  gap: 8px;
}
.die {
  width: 46px;
  height: 46px;
}
.die rect {
  fill: #e7dfca;
  stroke: #2a3326;
  stroke-width: 5;
}
.die circle {
  fill: #20261f;
}
.dice-sum {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: var(--fs-body);
  color: #d9d4b8;
}
.dice-sum b {
  font-size: 1.5rem;
  font-weight: normal;
  color: #f0e6c5;
}
.dice-sum .vs {
  font-size: var(--fs-ui);
  color: #a7ae92;
}
.dice-parts {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: var(--fs-label);
  color: #a7b097;
}
.dice-parts li {
  display: flex;
  gap: 5px;
}
.dice-parts b {
  font-weight: normal;
  color: #d9d4b8;
}
.dice-stamp {
  font: 700 var(--fs-ui-sm)/1 var(--font-ui);
  letter-spacing: 0.01em;
  padding: 8px 9px;
  border: 2px solid currentColor;
  transform: rotate(-6deg);
}
.dice-tray.pass .dice-stamp {
  color: var(--pass);
}
.dice-tray.fail .dice-stamp {
  color: var(--fail);
}
.dice-tray.pass {
  border-color: #8c9a5f;
}
.dice-tray.fail {
  border-color: #9a6040;
}
.dice-note {
  margin: 0;
  padding: 0 14px 12px;
  font-size: var(--fs-label);
  font-style: italic;
  color: #c7c0a0;
}
@media (prefers-reduced-motion: no-preference) {
  body[data-motion="on"] .dice-tray.fresh .die {
    animation: tumble 0.55s cubic-bezier(0.3, 1.4, 0.6, 1);
  }
  body[data-motion="on"] .dice-tray.fresh .d2 {
    animation-delay: 0.06s;
  }
  body[data-motion="on"] .dice-tray.fresh .dice-stamp,
  body[data-motion="on"] .dice-tray.fresh .dice-math {
    animation: stamp 0.25s ease-out 0.55s both;
  }
  body[data-motion="on"] .consequence.after-roll {
    animation: appear 0.3s ease-out 0.7s both;
  }
  body[data-motion="on"] .consequence.deduction-note.enter {
    animation: glow 1.2s ease-out;
  }
  @keyframes tumble {
    0% {
      transform: translate(-30px, -18px) rotate(-200deg) scale(0.8);
      opacity: 0;
    }
    60% {
      transform: translate(4px, 3px) rotate(14deg);
      opacity: 1;
    }
    100% {
      transform: none;
    }
  }
  @keyframes stamp {
    from {
      opacity: 0;
      transform: scale(1.4) rotate(-6deg);
    }
    to {
      opacity: 1;
    }
  }
  @keyframes glow {
    from {
      box-shadow: 0 0 0 0 #9fc0c8aa;
    }
    to {
      box-shadow: 0 0 0 14px #9fc0c800;
    }
  }
}

/* Consequence variants */
.consequence.deduction-note {
  border-color: var(--echo);
  background: #2f4644aa;
}
.consequence.deduction-note > span {
  color: var(--echo);
}
.consequence.deduction-note b {
  font-weight: normal;
  font-size: var(--fs-body);
  color: #e3eee8;
}
.consequence.miss-note {
  border-color: #6c705a;
  background: transparent;
}

/* Mind: clues, connections, conclusions */
.clue-list.selectable {
  padding: 0;
  list-style: none;
}
.clue-list.selectable li {
  display: block;
  padding: 0;
  border: 0;
  margin-bottom: 6px;
}
.clue-list.selectable button {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 9px 9px 9px 8px;
  border: 1px solid #4a5a42;
  background: #2f3d2b;
}
.clue-list.selectable button:hover {
  border-color: #a59d70;
}
.clue-list.selectable button[aria-pressed="true"] {
  border-color: var(--echo);
  background: #304543;
  box-shadow: inset 3px 0 var(--echo);
}
.clue-list.selectable span {
  font-size: var(--fs-label);
  color: #a7b294;
}
.clue-list.selectable p {
  margin: 0;
  font-size: var(--fs-label);
  line-height: 1.45;
  color: #dad9c2;
}
.clue-list.selectable i {
  font-style: normal;
  font-size: var(--fs-label);
  color: var(--echo);
}
.button.connect {
  margin: 4px 0 18px;
}
.button.connect:disabled {
  opacity: 0.55;
  background: #3a4232;
  color: #b7b99f;
  border-color: #4d5641;
}
.conclusions {
  border-top: 1px solid #4c5842;
  padding-top: 14px;
}
.conclusion {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #5d7c78;
  background: #263634;
}
.conclusion b {
  display: block;
  font-weight: normal;
  color: #e3eee8;
  margin-bottom: 5px;
}
.conclusion p {
  margin: 0;
  font-size: var(--fs-label);
  line-height: 1.5;
  color: #b9cbc4;
}
.history .log-roll,
.history .log-deduction {
  color: #cfe0dc;
}
.history .log-encounter {
  color: #e2b08f;
}

/* People */
.people-list,
.people-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.people-list > li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid #435039;
}
.person-glyph {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid #7c7f5c;
  color: var(--gold);
  font-size: var(--fs-ui);
}
.people-list b {
  display: block;
  font-weight: normal;
  color: #ebe3c7;
}
.people-list small {
  display: block;
  font-size: var(--fs-label);
  color: #a2ad91;
  margin: 2px 0 6px;
}
.people-list ul li {
  font-size: var(--fs-label);
  line-height: 1.45;
  color: #c7ccb5;
  padding-left: 12px;
  position: relative;
  margin-top: 3px;
}
.people-list ul li:before {
  content: "·";
  position: absolute;
  left: 2px;
  color: var(--gold);
}
.disposition {
  margin: 4px 0 6px;
}
.disposition span {
  font-size: var(--fs-label);
  color: #b8b591;
}

/* Map */
.map-svg {
  width: 100%;
  aspect-ratio: 1;
  display: block;
  background:
    repeating-linear-gradient(0deg, transparent 0 9px, #3f4c3a33 9px 10px),
    repeating-linear-gradient(90deg, transparent 0 9px, #3f4c3a33 9px 10px),
    #223020;
  border: 1px solid #556349;
}
.map-svg .edge {
  stroke: #a39c74;
  stroke-width: 0.7;
}
.map-svg .exit {
  stroke: #e3d29c;
  stroke-width: 0.6;
  stroke-dasharray: 1.6 1.4;
}
.map-svg .exit.locked {
  stroke: #7d7a5f;
}
.map-svg .node circle,
.map-svg .node rect {
  fill: #c9bd8e;
  stroke: #1b241a;
  stroke-width: 0.6;
}
.map-svg .node.here circle:first-of-type,
.map-svg .node.here rect {
  fill: #f2e2a9;
}
.map-svg .pulse {
  fill: none !important;
  stroke: #f2e2a9 !important;
  stroke-width: 0.6 !important;
}
.map-svg text {
  font: 5.2px var(--font-ui); /* svg user units: ~14px at panel width */
  fill: #d8d2b3;
  paint-order: stroke;
  stroke: #1d281c;
  stroke-width: 0.9px;
}
.map-svg .unknown circle {
  fill: #223020;
  stroke: #e3d29c;
  stroke-width: 0.5;
  stroke-dasharray: 1 0.8;
}
.map-svg .unknown text {
  font-size: 4.4px; /* svg user units */
  fill: #e3d29c;
}
@media (prefers-reduced-motion: no-preference) {
  body[data-motion="on"] .map-svg .pulse {
    animation: pulse 2.2s ease-out infinite;
    transform-box: fill-box;
    transform-origin: center;
  }
  @keyframes pulse {
    from {
      opacity: 1;
      transform: scale(0.6);
    }
    to {
      opacity: 0;
      transform: scale(1.5);
    }
  }
}
.exits {
  margin: 14px 0;
  display: grid;
  gap: 6px;
}
.exits button {
  text-align: left;
  padding: 9px 10px;
  border: 1px solid #5b6a4d;
  background: #2f3d2b;
}
.exits button:hover:not(:disabled) {
  border-color: var(--gold);
}
.exits button:disabled {
  opacity: 0.5;
}
.exits button span {
  display: block;
  font-size: var(--fs-label);
  color: #e7e0c4;
}
.exits button small {
  display: block;
  font-size: var(--fs-label);
  color: #a8b297;
  margin-top: 3px;
}

/* Bag hints */
.inventory-item.usable {
  border-color: #c7ad79;
  box-shadow: inset 0 0 0 1px #c7ad7955;
}

/* Ending: stats, echoes, marks */
.run-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: #4a5541;
  border: 1px solid #4a5541;
  margin: 0 0 22px;
}
.run-stats div {
  background: #222c20;
  padding: 10px 12px;
}
.run-stats dt {
  font-size: var(--fs-label);
  letter-spacing: 0.01em;
  color: #a7b294;
}
.run-stats dd {
  margin: 4px 0 0;
  font-size: 1.1rem;
  color: #ece4c6;
}
.echo-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin: 10px 0 6px;
}
.echo-card {
  border: 1px solid #5d7c78;
  background: #263634;
  padding: 12px;
}
.echo-card.new {
  border-color: var(--echo);
  box-shadow: 0 0 0 3px #9fc0c822;
}
.echo-card .eyebrow {
  color: var(--echo);
}
.echo-card b {
  display: block;
  font-weight: normal;
  font-size: var(--fs-body);
  margin: 6px 0;
  color: #e3eee8;
}
.echo-card p {
  margin: 0;
  font-size: var(--fs-label);
  line-height: 1.5;
  color: #b9cbc4;
}
.mark-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 !important;
  margin: 10px 0 20px;
}
.mark-chips li {
  border: 1px solid #8a7e55;
  padding: 6px 10px;
  font-size: var(--fs-label);
  color: #e4d6a8;
}
.mark-chips li.new {
  background: #c7ad79;
  color: #1d261d;
}

/* Shelf progress */
.card-progress {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-size: var(--fs-label);
  letter-spacing: 0.01em;
  color: #a8ad94;
}
.slots {
  display: flex;
  gap: 4px;
}
.slot {
  color: #4e5845;
  font-size: var(--fs-ui-sm);
}
.slot.found {
  color: var(--gold);
}
.slot.secret {
  color: #3f5552;
}
.slot.secret.found {
  color: var(--echo);
}
.card-foot .new-run {
  margin: 0;
}
button.discovery-count {
  padding: 0;
  text-align: right;
}
button.discovery-count:hover {
  color: var(--gold);
}
.how-help {
  align-self: center;
  font-size: var(--fs-label);
  color: var(--gold);
  border: 1px solid #5b6450;
  padding: 10px 14px;
}

/* Guide, settings, chronicle dialogs */
.help-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 22px;
  margin-bottom: 18px;
}
.help-grid h3,
dialog h3 {
  font-weight: normal;
  font-size: var(--fs-body);
  margin: 0 0 6px;
  color: #ecdfb9;
}
.help-grid p {
  font-size: var(--fs-label);
  line-height: 1.55;
  color: #c7ccb5;
  margin: 0;
}
.keys {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  font-size: var(--fs-ui);
}
.keys dt {
  font: var(--fs-ui-sm)/1.4 var(--font-ui);
  color: var(--gold);
}
.keys dd {
  margin: 0;
  color: #c7ccb5;
}
.setting-group {
  margin-top: 18px !important;
  padding-top: 12px;
  border-top: 1px solid #47523f;
}
.setting-row input[type="range"] {
  width: 140px;
  accent-color: var(--gold);
}
.seed-input {
  width: 110px;
  padding: 8px 10px;
  background: #1a2219;
  border: 1px solid #6b7556;
  color: var(--paper);
  font: var(--fs-ui-sm)/1.4 var(--font-ui);
  letter-spacing: 0.01em;
}
.chronicle-tale {
  border-top: 1px solid #47523f;
  padding-top: 16px;
  margin-top: 16px;
}
.chronicle-tale h4 {
  font-weight: normal;
  font-size: var(--fs-ui);
  color: #d8cfa9;
  margin: 14px 0 6px;
}
.chronicle-tale h4 small {
  font-size: var(--fs-label);
  color: #9fa58b;
  margin-left: 6px;
}
.ending-list,
.echo-list,
.mark-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 5px;
}
.ending-list li,
.mark-list li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 9px;
  border: 1px solid #3e4937;
  color: #b3b9a3;
}
.ending-list li b,
.mark-list li b,
.echo-list b {
  font-weight: normal;
}
.ending-list li small,
.mark-list li small {
  font-size: var(--fs-label);
  text-align: right;
}
.ending-list li.found,
.mark-list li.earned {
  color: #e7dfc4;
  border-color: #6f6a4c;
}
.ending-list li.secret {
  border-style: dashed;
  border-color: #3f5552;
}
.echo-list li {
  padding: 8px 10px;
  border: 1px solid #4f6c68;
  background: #243231;
  color: var(--echo);
}
.echo-list p {
  margin: 4px 0 0;
  font-size: var(--fs-label);
  color: #b9cbc4;
}
.runs {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-label);
}
.runs th {
  text-align: left;
  font-weight: normal;
  font-size: var(--fs-label);
  letter-spacing: 0.01em;
  color: #a7b294;
  border-bottom: 1px solid #47523f;
  padding: 5px 4px;
}
.runs td {
  padding: 6px 4px;
  border-bottom: 1px solid #343f2f;
  color: #d3d2bd;
}
.runs code {
  font: var(--fs-ui-sm)/1.4 var(--font-ui);
  color: var(--gold);
}
dialog {
  max-height: calc(100dvh - 40px);
  overflow: auto;
}

@media (max-width: 1100px) {
  .masthead nav {
    gap: 16px;
  }
  .masthead #help-link {
    display: none;
  }
}
@media (max-width: 850px) {
  .masthead #chronicle-link,
  .masthead #sources-link {
    display: none;
  }
  .help-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 620px) {
  .sound-button span {
    display: none;
  }
  .bar-right {
    gap: 7px;
  }
  .bar-right .seed,
  .bar-right .grace {
    display: none;
  }
  .dice-body {
    grid-template-columns: auto 1fr;
  }
  .dice-stamp {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .die {
    width: 40px;
    height: 40px;
  }
  .run-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .card-progress {
    flex-wrap: wrap;
  }
  .exits button small,
  .people-list small {
    font-size: var(--fs-label);
  }
}

/* ── The title screen ────────────────────────────────────────────────────
   The tale you are looking at turns slowly behind the logo, drawn by the
   game's own renderer. Four cards, one per tale; a menu along the foot. */
body { background: #0e0c0a; }
main.title-screen {
  position: relative; max-width: none; min-height: 100dvh; margin: 0; padding: max(28px, env(safe-area-inset-top)) clamp(16px, 4vw, 56px) 28px;
  display: grid; grid-template-rows: auto 1fr auto auto; gap: 24px; overflow: hidden;
  font-family: var(--font-pixel); color: var(--hud-ink);
}
.title-view { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; image-rendering: pixelated; }
.title-shade { position: fixed; inset: 0; z-index: 0; background: linear-gradient(180deg, #0e0c0aa8, #0e0c0a40 30%, #0e0c0a66 60%, #0e0c0af0); }
.title-screen > :not(.title-view):not(.title-shade) { position: relative; z-index: 1; }
.title-head { text-align: center; }
.title-logo {
  margin: 0; font: 700 clamp(56px, 11vw, 144px)/0.95 var(--font-pixel); color: var(--accent);
  text-shadow: 5px 5px 0 var(--accent-deep), 10px 10px 0 var(--hud-edge);
}
.title-tag { margin: 18px 0 0; font: 600 var(--fs-lead)/1.3 var(--font-pixel); color: var(--hud-ink); text-shadow: 2px 2px 0 var(--hud-edge); }
.title-tales { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-self: end; }
.tale-card {
  display: grid; grid-template-rows: auto 1fr; background: var(--hud-bg); box-shadow: var(--frame); clip-path: var(--notch);
  transition: transform .15s steps(3);
}
.tale-card[data-tale="wisdom"] { --accent-deep: #a8442c; }
.tale-card[data-tale="tide"] { --accent-deep: #b2382e; }
.tale-card[data-tale="orchestra"] { --accent-deep: #8a5a2a; }
.tale-card[data-tale="olives"] { --accent-deep: #2a4a96; }
.tale-card.focused { transform: translateY(-8px); --frame: inset 0 0 0 3px var(--hud-edge), inset 0 0 0 6px var(--accent), inset 0 0 0 7px #0a080699; }
.tale-thumb { display: block; width: calc(100% - 12px); margin: 6px 6px 0; aspect-ratio: 16 / 9; height: auto; image-rendering: pixelated; background: #0e0c0a; }
.tale-meta { display: grid; align-content: start; gap: 8px; padding: 12px 16px 16px; }
.tale-origin { font: 600 var(--fs-label)/1.2 var(--font-pixel); color: var(--accent); }
.tale-meta h2 { margin: 0; font: 700 var(--fs-lead)/1.15 var(--font-pixel); color: var(--hud-ink); }
.tale-meta p { margin: 0; font: 500 var(--fs-ui-sm)/1.45 var(--font-pixel); color: var(--hud-dim); }
.tale-progress { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font: 600 var(--fs-label)/1.2 var(--font-pixel); color: var(--hud-dim); }
.tale-progress .slot { color: #5a5040; }
.tale-progress .slot.found { color: var(--accent); }
.tale-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.title-button {
  min-height: 44px; padding: 8px 14px; border: 0; background: #2a2016; color: var(--hud-ink); clip-path: var(--notch);
  box-shadow: inset 0 0 0 3px var(--hud-edge), inset 0 -4px 0 #0006; font: 700 var(--fs-ui-sm)/1 var(--font-pixel);
}
.title-button.primary { background: var(--accent); color: var(--hud-edge); }
.title-button:hover, .title-button:focus-visible { filter: brightness(1.15); }
.title-button:focus-visible { outline: 3px solid var(--hud-ink); outline-offset: -7px; }
.title-menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.title-menu button {
  min-height: 44px; padding: 8px 16px; background: var(--hud-bg-soft); color: var(--hud-ink); box-shadow: var(--frame); clip-path: var(--notch);
  font: 600 var(--fs-ui-sm)/1 var(--font-pixel);
}
.title-menu button:hover, .title-menu button:focus-visible { color: var(--accent); }
.title-menu button:focus-visible { outline: 3px solid var(--accent); outline-offset: -8px; }
.title-menu small { color: var(--accent); font-size: inherit; }
.title-foot { margin: 0; text-align: center; font: 500 var(--fs-label)/1.4 var(--font-pixel); color: var(--hud-dim); }
@media (max-width: 1100px) { .title-tales { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  main.title-screen { gap: 18px; padding-inline: 12px; }
  .title-tales { grid-template-columns: 1fr; }
  .tale-card { grid-template-columns: 112px 1fr; grid-template-rows: none; }
  .tale-thumb { width: 100px; margin: 6px; }
  .tale-meta { padding: 10px 12px 12px 4px; }
  .tale-meta p { display: none; }
}

/* Dialogs and toasts in the game's frame. */
dialog {
  background: #1a150f; color: var(--hud-ink); border: 0; padding: 32px; clip-path: var(--notch);
  box-shadow: var(--frame); font-family: var(--font-pixel);
}
dialog::backdrop { background: #0e0c0ad0; backdrop-filter: none; }
dialog h2, dialog h3, dialog h4 { font-family: var(--font-pixel); color: var(--accent); }
dialog h2 { font: 700 clamp(28px, 4vw, 40px)/1.1 var(--font-pixel); }
dialog p, dialog li, dialog label, dialog dd, dialog dt, dialog button, dialog small, dialog td, dialog th { font-family: var(--font-pixel); }
dialog > div > p, .source-note p { color: var(--hud-dim); }
dialog .eyebrow { color: var(--hud-dim); font-family: var(--font-pixel); }
dialog .button { border-radius: 0; clip-path: var(--notch); font-family: var(--font-pixel); }
.dialog-close { color: var(--hud-ink); font-family: var(--font-pixel); }
.toast { background: var(--hud-ink); color: var(--hud-edge); border: 0; box-shadow: 0 0 0 3px var(--hud-edge); clip-path: var(--notch); font: 600 var(--fs-ui-sm)/1.5 var(--font-pixel); }

/* ── Reading text, and a story panel that leaves room to play ────────────
   The pixel face is for short labels: titles, names, keys. Anything you
   read runs in Atkinson Hyperlegible, a face made to be read at a glance.
   The story keeps to a corner on a wide screen and to the top on a phone,
   so the middle of the view and the hero's hands stay clear. With nothing
   being told or asked it steps away entirely: the objective is already in
   the quest panel. H folds it to one line. */
:root { --font-read: var(--font-ui); }
.story-line, .story-line .story-speaker, .story-notes li, .choice, .choice.quiet, .choice small, .choice .remembered-badge,
.trial-hint, .trial-feedback, .puzzle-slots, .play-prompt, .play-bubble, .play-message, .hud-objective,
.journal-drawer p, .journal-drawer li, .journal-drawer button, .journal-want p, .journal-hint,
.ending-text, .ending-reflection, .ending-page p, .ending-page li,
.tale-meta p, .title-tag, .title-foot, dialog p, dialog li, dialog dd, dialog label, dialog small, dialog td, .toast,
.world-skill p, .world-loading {
  font-family: var(--font-read);
}
.story-line { font-weight: 500; line-height: 1.45; letter-spacing: 0; }
.story-line .story-speaker { font-weight: 700; }
.choice { font-weight: 500; }
.play-prompt { font-weight: 700; }
.play-bubble { font-weight: 500; }
.hud-objective { font-weight: 600; }

.story-band {
  left: 14px; right: auto; transform: none; bottom: max(14px, env(safe-area-inset-bottom));
  width: min(470px, calc(36vw + 40px)); max-height: 42vh; grid-template-columns: 1fr; gap: 0;
  padding: 14px 18px 12px; background: #15110de0; transition: opacity .2s, max-height .2s;
}
.story-band[data-tone="chapter"] { transform: none; }
.story-portrait { display: none; }
.story-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.story-head .story-scene { flex: 1; min-width: 0; margin: 0; }
.story-band:has(.story-portrait[data-who]:not([data-who="teller"])) .story-head::before {
  /* The speaker's face sits beside their name. */
  content: ""; flex: none; width: 44px; height: 44px; background: var(--portrait) center / contain no-repeat #2a2016;
  image-rendering: pixelated; box-shadow: inset 0 0 0 2px var(--hud-edge), 0 0 0 2px var(--accent-deep);
}
.story-fold {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 2px 8px;
  border: 0; background: transparent; color: var(--hud-dim); font: 600 var(--fs-label)/1 var(--font-pixel);
}
.story-fold:hover, .story-fold:focus-visible { color: var(--accent); }
.story-fold kbd { min-width: 22px; height: 22px; }
.story-line { font-size: var(--fs-lead); }
.story-next { margin-top: 2px; }

/* Nothing to tell and nothing to choose: the panel steps away. */
.story-band[data-state="idle"]:not(:has(.story-choices > *)) { opacity: 0; pointer-events: none; }
/* Folded: one line of the telling, the rest out of the way. A conversation or trial always shows. */
.play[data-fold="true"] .story-band[data-state="telling"] { max-height: none; opacity: .88; }
.play[data-fold="true"] .story-band[data-state="telling"] .story-line {
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--fs-ui);
}
.play[data-fold="true"] .story-band[data-state="telling"] :is(.story-notes, .story-roll) { display: none; }

/* The bag moves to the far corner, away from the story. */
.hud-bag { bottom: max(14px, env(safe-area-inset-bottom)); right: 14px; }
@media (pointer: coarse) {
  .play-touch { bottom: max(18px, env(safe-area-inset-bottom)); }
}

@media (max-width: 700px) {
  /* On a phone the story sits at the top, under a slimmer quest bar. */
  .hud-quest { padding: 6px 10px 8px; }
  .hud-quest .hud-tale, .hud-quest .hud-time { display: none; }
  .hud-objective { margin: 0; }
  /* Top row: the objective, then Journal, Undo and Quit. The minimap waits
     above the touch buttons; the story sits just under the top row. */
  .hud-quest { flex: 1; max-width: none; }
  .hud-side { display: contents; }
  .hud-buttons { display: flex; flex-wrap: nowrap; gap: 4px; }
  .hud-buttons #story-source { display: none; }
  .hud-buttons button { min-height: 44px; padding: 4px 8px; }
  .hud-minimap { position: fixed; right: 8px; bottom: calc(max(18px, env(safe-area-inset-bottom)) + 150px); width: 84px; height: 84px; }
  .story-band {
    top: calc(var(--top-h, 60px) + 6px); bottom: auto; left: 8px; right: 8px; width: auto;
    max-height: 32vh; padding: 10px 12px;
  }
  .story-line { font-size: var(--fs-body); }
  .story-band[data-state="trial"], .story-band[data-state="conversation"] { max-height: 44vh; }
  .hud-bag { top: auto; bottom: calc(max(18px, env(safe-area-inset-bottom)) + 130px); left: 8px; }
}