/* The story map: a coloured-pencil world under a map-maker's HUD. The title band, cards and
   cartouches are vellum and ink, the one carved-wood piece is the signpost button that walks
   the party on. Tokens follow the site: black and red ink on vellum, gold for gathered light. */

:root {
  color-scheme: light dark;
  --vellum: #ECE3CC;
  --ink: #221F1A;
  --faded: #6E6754;
  --red-ink: #962A1C;
  --gold: #B8862B;
  --banner: #2F4F7F;

  --vellum-hi: #F5EEDC;
  --vellum-deep: #E2D6B8;
  --rule: rgba(34, 31, 26, 0.78);
  --rule-soft: rgba(34, 31, 26, 0.22);
  --shadow: rgba(40, 28, 12, 0.28);
  --wood-hi: #7A5638;
  --wood: #4E3624;
  --wood-lo: #2C1E14;
  --wood-ink: #F4E7C6;
  --wood-faded: #CDB993;
  --gold-lit: #F0C75A;
  --lamp: #F2C14E;
  --flame: #E0762E;
  --panel-wood: #3A2A1C;
  --band: color-mix(in srgb, var(--vellum-hi) 93%, transparent);

  --display: "IM Fell English", "Iowan Old Style", Georgia, serif;
  --body: "Alegreya Sans", "Gill Sans", "Trebuchet MS", sans-serif;
  --gutter: 16px;
  --top-h: 62px;
  --card-w: min(440px, 36vw);
  /* paper grain, drawn by an inline SVG filter */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .27 0 0 0 0 .14 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --paper: var(--grain), radial-gradient(ellipse at 20% 0%, rgba(255, 255, 255, 0.45), transparent 60%), radial-gradient(ellipse at 100% 100%, rgba(150, 110, 50, 0.16), transparent 65%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --vellum: #1C1912;
    --ink: #E9E1CC;
    --faded: #A89F86;
    --red-ink: #E08A6E;
    --gold: #E0B34E;
    --banner: #7E9CCB;
    --vellum-hi: #24201A;
    --vellum-deep: #2C271E;
    --rule: rgba(233, 225, 204, 0.6);
    --rule-soft: rgba(233, 225, 204, 0.18);
    --shadow: rgba(0, 0, 0, 0.5);
    --wood-hi: #5A3F2A;
    --wood: #3A2819;
    --wood-lo: #1A120C;
    --panel-wood: #241912;
    --band: color-mix(in srgb, var(--vellum-hi) 92%, transparent);
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .82 0 0 0 0 .62 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --paper: var(--grain), radial-gradient(ellipse at 20% 0%, rgba(255, 230, 180, 0.05), transparent 60%);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body.game, body.preview {
  background: var(--vellum);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.55;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:focus-visible { outline: 2px solid var(--red-ink); outline-offset: 2px; }
button { font: inherit; color: inherit; }
a { color: var(--red-ink); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
[hidden] { display: none !important; }

/* vellum: the shared surface of the band, cards and cartouches */
.vellum, .topbar, .card-sheet, .contents, .start-sheet, .ending-sheet, .age-banner, .atlas-ch, .hint, .status, .res, .verse p, .enc-name {
  background-color: var(--vellum-hi);
  background-image: var(--paper);
  color: var(--ink);
}

/* ---------- the map ---------- */

.app { position: fixed; inset: 0; overflow: hidden; }

.map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.map.dragging { cursor: grabbing; }
.map:focus-visible { outline: none; }
.kbd .map:focus-visible { outline: 3px solid var(--red-ink); outline-offset: -3px; }

.rune {
  position: absolute;
  width: 18px;
  height: 18px;
  color: var(--gold);
  pointer-events: none;
}
.rune.tl { top: -6px; left: -6px; }
.rune.tr { top: -6px; right: -6px; transform: rotate(90deg); }
.rune.br { bottom: -6px; right: -6px; transform: rotate(180deg); }
.rune.bl { bottom: -6px; left: -6px; transform: rotate(270deg); }

/* ---------- the title band ---------- */

.topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 6;
  min-height: var(--top-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 6px var(--gutter) 9px;
  padding-top: max(6px, env(safe-area-inset-top));
  background-color: var(--band);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 3px 0 -1px var(--band), 0 4px 0 -1px var(--rule), 0 10px 22px -8px var(--shadow);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.where { min-width: 0; }
.realm { margin: 0; font-family: var(--display); font-size: 28px; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.realm-sub { margin: 1px 0 0; font-size: 14px; line-height: 1.2; font-style: italic; color: var(--faded); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* this leg of the road: the chapter's moments, the creature and the beacon, with the party's place */
.leg { --p: 0; position: relative; width: min(380px, 34vw); height: 32px; margin-bottom: 14px; }
.leg-next { position: absolute; left: 0; right: 0; top: 100%; margin: 0; font-size: 12px; line-height: 14px; font-style: italic; color: var(--faded); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.leg-stops { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 0; list-style: none; }
.leg::before, .leg::after {
  content: "";
  position: absolute;
  left: 13px; right: 13px; top: 50%;
  height: 0;
  border-top: 1.5px dashed color-mix(in srgb, var(--red-ink) 55%, transparent);
}
.leg::after { right: auto; width: calc(var(--p) * (100% - 26px)); border-top: 2.5px solid var(--red-ink); margin-top: -0.5px; transition: width 120ms linear; }
.leg-stop { position: relative; z-index: 1; display: grid; place-items: center; width: 26px; height: 32px; }
.leg-stop > button, .leg-stop > span {
  display: grid; place-items: center;
  width: 26px; height: 30px;
  padding: 0; border: 0; border-radius: 13px;
  background: var(--vellum-hi);
  color: var(--ink);
  cursor: default;
}
.leg-stop > button { cursor: pointer; }
.leg-stop > button:hover { color: var(--red-ink); }
.leg-ico { width: 15px; height: 19px; --lamp-glass: transparent; --flame-fill: transparent; }
.leg-stop.moment.done .leg-ico { --lamp-glass: var(--lamp); }
.leg-stop.beacon.done .leg-ico { --flame-fill: var(--flame); color: #8A3A14; }
.leg-stop.encounter.done { opacity: 0.45; }
.leg-stop.here > * { box-shadow: 0 0 0 1.5px var(--red-ink); }
.leg-party {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: calc(13px + var(--p) * (100% - 26px));
  width: 11px; height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: var(--red-ink);
  box-shadow: 0 0 0 2px var(--vellum-hi), 0 1px 4px rgba(0, 0, 0, 0.35);
  transition: left 120ms linear;
  pointer-events: none;
}

.corner { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.hud-btn, .hud-link {
  appearance: none;
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid transparent;
  background: none;
  color: var(--ink);
  font-size: 16px;
  line-height: 1;
  padding: 8px 10px 9px;
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.hud-btn:hover, .hud-link:hover { border-color: var(--rule-soft); background: color-mix(in srgb, var(--vellum-deep) 60%, transparent); }
.hud-btn[aria-pressed="true"], .hud-btn[aria-expanded="true"] { color: var(--red-ink); border-color: color-mix(in srgb, var(--red-ink) 45%, transparent); }
.hud-ico { width: 18px; height: 18px; flex: none; }
#btn-sound .wave { opacity: 0.25; }
#btn-sound.on .wave { opacity: 1; }
.more-items {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 9;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding: 8px;
  width: 240px;
  background-color: var(--vellum-hi);
  background-image: var(--paper);
  border: 1px solid var(--rule);
  outline: 1px solid var(--rule-soft);
  outline-offset: 3px;
  box-shadow: 0 14px 30px var(--shadow);
}
.corner.open .more-items { display: flex; }
.more-items .hud-btn, .more-items .hud-link { font-size: 16px; padding: 10px; text-align: left; }
.more-items .hud-link { color: var(--red-ink); }
.menu-tribute { margin: 6px 4px 2px; font-size: 14px; line-height: 1.35; color: var(--faded); white-space: normal; }

/* ---------- contents ---------- */

.contents {
  position: absolute;
  z-index: 9;
  top: calc(var(--top-h) + 14px);
  right: var(--gutter);
  width: min(400px, calc(100% - 2 * var(--gutter)));
  max-height: min(72vh, 640px);
  overflow: auto;
  border: 1px solid var(--rule);
  outline: 1px solid var(--rule-soft);
  outline-offset: 3px;
  box-shadow: 0 16px 36px var(--shadow);
  scrollbar-width: thin;
}
.contents-count { margin: 0; padding: 12px 18px 2px; font-size: 14px; font-style: italic; color: var(--faded); }
.contents ol { list-style: none; margin: 0; padding: 0; }
.contents > ol { padding: 0 0 12px; }
.contents button { appearance: none; display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left; border: 0; background: none; padding: 6px 18px 7px 26px; font-size: 16px; line-height: 1.3; color: var(--ink); cursor: pointer; }
.contents .ct-chapter { align-items: baseline; padding: 12px 18px 4px; font-family: var(--display); font-size: 24px; line-height: 1.1; }
.ct-n { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--rule); border-radius: 50%; font-size: 15px; transform: translateY(-3px); flex: none; }
.ct-years { margin-left: auto; font-family: var(--body); font-size: 14px; font-style: italic; color: var(--faded); }
.ct-lamp { width: 12px; height: 15px; flex: none; transform: translateY(2px); --lamp-glass: transparent; color: var(--faded); }
.contents button.read .ct-lamp { --lamp-glass: var(--lamp); color: var(--ink); }
.contents button:hover, .contents button:focus-visible { background: color-mix(in srgb, var(--vellum-deep) 80%, transparent); outline-offset: -2px; }
.contents button[aria-current="true"] { color: var(--red-ink); }
.ct-ch.ahead .ct-chapter .ct-name { color: var(--faded); }

/* ---------- hint and status ---------- */

.hint, .status {
  margin: 0;
  padding: 5px 14px 6px;
  font-size: 16px;
  font-style: italic;
  border: 1px solid var(--rule);
  box-shadow: 0 6px 16px -6px var(--shadow);
}
.hint {
  position: absolute;
  z-index: 4;
  top: calc(var(--top-h) + 16px);
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 2 * var(--gutter));
  text-align: center;
  pointer-events: none;
  transition: opacity 600ms ease, transform 600ms ease;
}
.hint.gone { opacity: 0; transform: translate(-50%, -6px); }
.at-start .hint, .at-start .topbar, .at-start .dock, .at-start .card, .app.at-start ~ .tribute-foot { visibility: hidden; }
.status { max-width: 100%; text-align: center; opacity: 0; transform: translateY(4px); transition: opacity 400ms ease, transform 400ms ease; pointer-events: none; }
.status.show { opacity: 1; transform: none; }

/* ---------- the dock: the light bar, Walk on, the beacon and the encounter actions ---------- */

.dock {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(620px, calc(100% - 2 * var(--gutter)));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.dock > * { pointer-events: auto; }
.status { pointer-events: none; }
.main-row { display: flex; flex-direction: column; align-items: stretch; gap: 0; }

/* the slim light bar: what the villagers have gathered toward the next beacon */
.res {
  display: flex;
  gap: 4px;
  margin: 0 0 -1px;
  padding: 4px 10px 5px;
  list-style: none;
  border: 1px solid var(--rule);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}
.res.done { display: none; }
/* a grid, so the label row above the counters never widens the bar */
.res:not(.done) { display: grid; grid-template-columns: repeat(4, auto); }
.res-label { grid-column: 1 / -1; text-align: center; font-size: 12px; line-height: 1.1; font-style: italic; color: var(--faded); }
.res-item { --have: 0; position: relative; display: flex; align-items: center; gap: 4px; padding: 1px 7px 5px; white-space: nowrap; font-size: 15px; line-height: 1.2; border-radius: 3px; }
.ico { width: 20px; height: 20px; flex: none; }
.res-count { font-weight: 500; min-width: 2ch; text-align: right; color: var(--ink); }
.res-cost { font-size: 13px; color: var(--faded); }
.res-bar { position: absolute; left: 7px; right: 7px; bottom: 1px; height: 2.5px; border-radius: 2px; background: var(--rule-soft); overflow: hidden; }
.res-bar span { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--have)); background: linear-gradient(90deg, var(--gold), var(--gold-lit)); transition: transform 200ms linear; }
.res-item.met .res-count { color: var(--gold); }
.res-item.met .res-bar span { background: var(--gold); }
.res-item.boost { background: color-mix(in srgb, var(--gold-lit) 26%, transparent); }
.res-item.boost .res-bar span { animation: boost 700ms ease-in-out infinite alternate; }
@keyframes boost { to { filter: brightness(1.35); } }
.res-item.flash { animation: flash 700ms ease 2; }
@keyframes flash { 50% { background: color-mix(in srgb, var(--red-ink) 30%, transparent); } }
.at-beacon .res { border-color: var(--gold); box-shadow: 0 0 18px -4px color-mix(in srgb, var(--gold-lit) 70%, transparent); }

/* the signpost: carved wood, the one heavy thing on screen */
.main-btn, .begin {
  position: relative;
  overflow: hidden;
  appearance: none;
  border: 1px solid #120C08;
  outline: 1px solid color-mix(in srgb, var(--gold) 80%, transparent);
  outline-offset: -4px;
  background-color: var(--wood);
  background-image:
    repeating-linear-gradient(91deg, rgba(0, 0, 0, 0.08) 0 1px, transparent 1px 5px, rgba(255, 220, 170, 0.05) 5px 6px, transparent 6px 11px),
    radial-gradient(ellipse at 30% 40%, rgba(0, 0, 0, 0.12), transparent 40%),
    linear-gradient(180deg, var(--wood-hi), var(--wood) 45%, var(--wood-lo));
  color: var(--wood-ink);
  font-family: var(--display);
  cursor: pointer;
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 220, 170, 0.22), 0 3px 0 rgba(0, 0, 0, 0.35), 0 12px 26px -6px rgba(20, 12, 6, 0.55);
}
.main-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 58px; min-width: 260px; padding: 8px 34px 10px 46px; font-size: 25px; line-height: 1.05; }
.main-btn.small { min-height: 46px; min-width: 0; font-size: 21px; padding: 7px 20px 9px; }
.main-btn:hover, .begin:hover { color: #FFF6DC; }
.main-btn:focus-visible, .begin:focus-visible { outline: 2px solid var(--red-ink); outline-offset: 3px; }
.main-btn[data-state="busy"], .main-btn[aria-disabled="true"] { cursor: default; color: var(--wood-faded); }
.main-label, .main-sub, .cw-label, .cw-next { position: relative; }
.main-sub, .cw-next { font-family: var(--body); font-style: italic; font-size: 14px; line-height: 1.2; color: var(--wood-faded); max-width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.main-sub:empty { display: none; }
.main-fill { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0); background: linear-gradient(90deg, rgba(160, 70, 20, 0.5), rgba(236, 146, 46, 0.62)); transition: transform 200ms linear; }
.main-flame {
  position: absolute;
  left: 18px; top: 50%;
  width: 14px; height: 22px;
  margin-top: -12px;
  border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%;
  background: radial-gradient(ellipse at 50% 75%, #FFF0B8 0 20%, #F2A33A 45%, #B4461E 80%, transparent 82%);
  opacity: 0.5;
}
.main-btn[data-state="walk"] .main-flame { opacity: 0.85; }
.main-btn[data-state="ready"] .main-flame { opacity: 1; animation: flicker 900ms ease-in-out infinite alternate; }
.main-btn[data-state="ready"] { animation: ready 1.6s ease-in-out infinite; color: #FFF6DC; }
@keyframes ready { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 220, 170, 0.18), 0 3px 0 rgba(0, 0, 0, 0.35), 0 0 0 rgba(255, 180, 70, 0); } 50% { box-shadow: inset 0 1px 0 rgba(255, 220, 170, 0.3), 0 3px 0 rgba(0, 0, 0, 0.35), 0 0 26px rgba(255, 180, 70, 0.8); } }
@keyframes flicker { from { transform: scale(0.92, 0.95) rotate(-3deg); } to { transform: scale(1.06, 1.08) rotate(3deg); } }
.card-open #btn-main { display: none; }

.enc { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.enc-name { margin: 0; padding: 4px 16px 5px; font-family: var(--display); font-size: 22px; line-height: 1.2; border: 1px solid var(--rule); box-shadow: 0 6px 16px -6px var(--shadow); }
.enc-thread { position: relative; width: 180px; height: 3px; margin-top: -6px; background: var(--rule-soft); border-radius: 2px; overflow: hidden; }
.enc-thread span { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: var(--red-ink); transition: transform 150ms linear; }
.enc-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 14px; max-width: calc(100vw - 32px); }
.act-btn { padding-left: 30px; padding-right: 30px; }
.enc-actions .pass-btn { white-space: nowrap; }
.pass-btn { appearance: none; border: 0; background: none; padding: 8px 10px; font-size: 16px; color: var(--red-ink); text-decoration: underline; text-underline-offset: 0.22em; text-decoration-thickness: 1px; cursor: pointer; }
.dock .pass-btn { background: var(--band); border: 1px solid var(--rule-soft); }
/* the ring is also drawn on the map under the party; this twin is for keyboards and screen readers */
.kbd-only:not(:focus-visible) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- the moment card ---------- */

.card {
  position: absolute;
  z-index: 8;
  top: calc(var(--top-h) + 22px);
  bottom: 28px;
  width: var(--card-w);
  display: flex;
  align-items: center;
  pointer-events: none;
}
.card[data-side="left"] { left: max(28px, 4vw); }
.card[data-side="right"] { right: max(28px, 4vw); }
.card-sheet {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  max-height: 100%;
  padding: 26px 30px 18px;
  border: 1px solid var(--rule);
  outline: 1px solid var(--rule);
  outline-offset: 4px;
  box-shadow: 0 0 0 9px color-mix(in srgb, var(--vellum-hi) 55%, transparent), 0 28px 70px var(--shadow);
  pointer-events: auto;
  animation: card-in 460ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes card-in { from { opacity: 0; transform: translateY(14px) rotate(-0.4deg); } }
.card-body { overflow: auto; min-height: 0; scrollbar-width: thin; max-width: 68ch; padding-right: 4px; padding-left: 10px; margin-left: -10px; }
.card-body .entry-title { font-family: var(--display); font-weight: 400; font-size: 36px; line-height: 1.05; margin: 0 0 6px; text-wrap: balance; }
.card-body .entry-meta { margin: 0 0 14px; padding-bottom: 12px; font-size: 15px; font-style: italic; color: var(--faded); border-bottom: 3px double var(--rule-soft); }
.card-body .entry-text p { position: relative; margin: 0 0 12px; font-size: 18px; line-height: 1.55; }
/* The drop cap is drawn from data-dc (written by sync-story.mjs) with empty alt text. The real
   letter stays in the text at zero size, so innerText and screen readers read whole words. */
.card-body .entry-text .dc { font-size: 0; }
.card-body .entry-text p[data-dc]::before {
  content: attr(data-dc) / "";
  float: left;
  font-family: var(--display);
  font-size: 64px;
  line-height: 0.8;
  padding: 6px 8px 0 0;
  color: var(--red-ink);
}
.card-body .entry-text p[data-ph]::after {
  content: "[" / "";
  position: absolute;
  left: -9px; top: 2px;
  font-size: 14px;
  color: var(--faded);
}
/* what I took from it: a keepsake, sealed in red */
.card-body .entry-took {
  position: relative;
  margin: 16px 0 4px;
  padding: 12px 14px 12px 50px;
  font-size: 17px;
  line-height: 1.45;
  background: color-mix(in srgb, var(--vellum-deep) 70%, transparent);
  border-left: 2px solid var(--red-ink);
}
.card-body .entry-took em { display: block; font-size: 14px; color: var(--faded); }
.took-seal { position: absolute; left: 12px; top: 12px; width: 28px; height: 28px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3)); }
.entry-took.fresh .took-seal { animation: stamp 700ms cubic-bezier(0.3, 1.6, 0.5, 1) 280ms backwards; }
@keyframes stamp { from { transform: scale(2.2) rotate(-25deg); opacity: 0; } }
.kept-note { display: block; margin-top: 4px; font-size: 13px; font-style: italic; color: var(--red-ink); animation: rise 600ms ease 700ms backwards; }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } }
.card-body .entry-song { margin: 0 0 12px; padding-left: 12px; border-left: 1px solid var(--red-ink); }
.card-body .entry-song p { margin: 0; font-family: var(--display); font-style: italic; font-size: 22px; line-height: 1.2; }
.card-body .entry-song footer { font-size: 14px; color: var(--faded); }
.card-body .entry-contact-title { margin: 14px 0 4px; font-family: var(--display); font-weight: 400; font-size: 21px; }
.card-body .entry-contact { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 0; list-style: none; font-size: 17px; }
.card-body .placeholder { color: var(--faded); font-size: 14px; }
.card-grab { display: none; }
.card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule-soft); }
.card-pips { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.card-pips button { display: grid; place-items: center; width: 30px; height: 34px; padding: 0; border: 0; background: none; color: var(--faded); cursor: pointer; border-radius: 4px; --lamp-glass: transparent; }
.card-pips button svg { width: 16px; height: 20px; }
.card-pips button.read { color: var(--ink); --lamp-glass: var(--lamp); }
.card-pips button[aria-current="true"] { color: var(--red-ink); --lamp-glass: var(--lamp); background: color-mix(in srgb, var(--lamp) 22%, transparent); }
.card-pips button:hover { background: color-mix(in srgb, var(--vellum-deep) 80%, transparent); }
.pip-of { margin-left: 6px; font-size: 14px; font-style: italic; color: var(--faded); white-space: nowrap; }
.card-actions { display: flex; align-items: center; gap: 8px; min-width: 0; margin-left: auto; }
#card-walk { align-items: flex-start; text-align: left; max-width: 250px; }
#card-walk .cw-next { max-width: 200px; }

/* ---------- the story map ---------- */

.atlas { position: absolute; inset: 0; z-index: 3; pointer-events: none; animation: fade 500ms ease; }
@keyframes fade { from { opacity: 0; } }
.atlas-ink { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.atlas-road { fill: none; stroke: var(--red-ink); stroke-width: 1.6; stroke-dasharray: 5 4; opacity: 0.75; }
.atlas-walked { fill: none; stroke: var(--red-ink); stroke-width: 3; stroke-linecap: round; }
.atlas-lead { fill: none; stroke: var(--rule); stroke-width: 0.9; opacity: 0.55; }
.atlas-marks > * { position: absolute; left: 0; top: 0; pointer-events: auto; }
.atlas-ch {
  padding: 7px 12px 8px;
  border: 1px solid var(--rule);
  outline: 1px solid var(--rule-soft);
  outline-offset: 3px;
  box-shadow: 0 12px 28px -10px var(--shadow);
  transition: opacity 300ms ease;
}
.atlas-ch.current { outline-color: var(--red-ink); }
.atlas-ch.ahead { background-image: var(--grain); opacity: 0.86; }
.atlas-ch.ahead .atlas-name { color: var(--faded); }
.atlas-name { display: flex; align-items: baseline; gap: 8px; padding: 0; border: 0; background: none; font-family: var(--display); font-size: 23px; line-height: 1.1; text-align: left; cursor: pointer; }
.atlas-name:hover { color: var(--red-ink); }
.atlas-n { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1px solid currentColor; border-radius: 50%; font-size: 15px; transform: translateY(-3px); flex: none; }
.atlas-years { display: block; margin: -2px 0 2px 32px; font-size: 13px; font-style: italic; color: var(--faded); }
.atlas-ch ol { margin: 0; padding: 0; list-style: none; }
.atlas-ch li button { display: block; width: 100%; padding: 2px 0 2px 32px; border: 0; background: none; text-align: left; font-size: 15px; line-height: 1.25; cursor: pointer; position: relative; }
.atlas-ch li button::before { content: attr(data-n); position: absolute; left: 8px; top: 50%; width: 16px; height: 16px; margin-top: -8px; display: grid; place-items: center; font-size: 11px; line-height: 1; border: 1px solid var(--rule); border-radius: 50%; }
.atlas-ch li button.read::before { background: var(--lamp); border-color: #7A5A10; color: #221F1A; }
.atlas-ch li button:hover { color: var(--red-ink); }
.atlas-stretch { margin: 0; translate: -50% -50%; font-family: var(--display); font-style: italic; font-size: 16px; line-height: 1; color: var(--ink); white-space: nowrap; pointer-events: none !important; text-shadow: 0 0 3px var(--vellum-hi), 0 0 6px var(--vellum-hi), 0 0 10px var(--vellum-hi); }
.atlas-lamp {
  width: 24px; height: 28px;
  margin: -24px 0 0 -12px;
  display: grid; place-items: center;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 12px 12px 6px 6px;
  background: var(--vellum-hi);
  color: var(--ink);
  cursor: pointer;
  --lamp-glass: transparent;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: transform 120ms ease;
}
.atlas-lamp svg { width: 13px; height: 17px; }
.atlas-num { position: absolute; right: -7px; bottom: -5px; min-width: 13px; height: 13px; padding: 0 2px; font-size: 10px; line-height: 13px; font-weight: 500; text-align: center; color: var(--ink); background: var(--vellum-hi); border: 1px solid var(--rule); border-radius: 7px; }
.atlas-glyph { fill: var(--vellum-hi); stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: round; }
.atlas-place { translate: 0 -50%; font-family: var(--display); font-size: 14px; line-height: 1; white-space: nowrap; color: var(--ink); pointer-events: none !important; text-shadow: 0 0 3px var(--vellum-hi), 0 0 6px var(--vellum-hi), 0 0 10px var(--vellum-hi); }
.atlas-place[data-side="left"] { translate: -100% -50%; }
.atlas-place[data-side="under"] { translate: -50% 0; font-size: 13px; }
.map-open .hint { opacity: 0; }
.atlas-lamp.read { --lamp-glass: var(--lamp); box-shadow: 0 0 10px rgba(255, 190, 80, 0.75), 0 2px 6px rgba(0, 0, 0, 0.3); }
.atlas-lamp.open { border-color: var(--red-ink); color: var(--red-ink); }
.atlas-lamp:hover { box-shadow: 0 0 0 2px var(--red-ink), 0 2px 6px rgba(0, 0, 0, 0.3); }
.atlas-beacon { width: 18px; height: 22px; margin: -20px 0 0 -9px; color: var(--ink); pointer-events: none !important; --flame-fill: transparent; opacity: 0.7; }
.atlas-beacon svg { width: 18px; height: 22px; }
.atlas-beacon.lit { --flame-fill: var(--flame); color: #7A2E0E; opacity: 1; filter: drop-shadow(0 0 5px rgba(255, 150, 50, 0.9)); }
.atlas-party { pointer-events: none !important; }
.atlas-pin { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%; background: var(--red-ink); box-shadow: 0 0 0 2.5px var(--vellum-hi), 0 2px 6px rgba(0, 0, 0, 0.45); }
.atlas-pin::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1.5px solid var(--red-ink); animation: ping 2s ease-out infinite; }
@keyframes ping { from { transform: scale(0.5); opacity: 0.9; } to { transform: scale(1.4); opacity: 0; } }
.atlas-who { position: absolute; left: 22px; top: -2px; padding: 0 6px 1px; font-size: 14px; font-style: italic; white-space: nowrap; background: var(--vellum-hi); border: 1px solid var(--rule-soft); }
.atlas-party[data-side="left"] .atlas-who { left: auto; right: 22px; }
.atlas-hint { position: absolute; left: 50%; bottom: 104px; transition: opacity 300ms ease; transform: translateX(-50%); margin: 0; padding: 4px 12px 5px; font-size: 14px; font-style: italic; color: var(--faded); background: var(--band); border: 1px solid var(--rule-soft); white-space: nowrap; pointer-events: none !important; }
.atlas.narrow .atlas-ch { padding: 6px 8px; }
.atlas.narrow .atlas-lamp { width: 19px; height: 23px; margin: -20px 0 0 -9.5px; border-radius: 10px 10px 5px 5px; }
.atlas.narrow .atlas-lamp svg { width: 11px; height: 14px; }
.atlas.narrow .atlas-name { font-size: 17px; gap: 4px; flex-direction: column; }
.atlas.narrow .atlas-n { width: 20px; height: 20px; font-size: 13px; }
/* on a narrow map the cartouches hold only their names until a tap opens one */
.atlas.narrow .atlas-years, .atlas.narrow .atlas-ch ol { display: none; }
.atlas.narrow .atlas-ch.open { z-index: 2; opacity: 1; box-shadow: 0 16px 36px var(--shadow); }
.atlas.narrow .atlas-ch.open ol { display: block; margin-top: 4px; }
.atlas.narrow .atlas-ch.open .atlas-name { flex-direction: row; align-items: baseline; }
.atlas.narrow .atlas-ch.open li button { padding: 7px 0 7px 30px; font-size: 15px; }
.atlas.narrow .atlas-stretch { font-size: 12px; }
.atlas.narrow .atlas-place { font-size: 12px; }
.map-open.status-on .atlas-hint { opacity: 0; }
.atlas.narrow .atlas-ch[data-side="left"]:not(.open) .atlas-name { align-items: flex-end; }
.map-open .dock .res, .enc-on .res { display: none; }

/* ---------- verse card ---------- */

.verse {
  position: absolute;
  z-index: 7;
  bottom: 170px;
  left: 50%;
  transform: translate(-50%, 10px);
  width: min(620px, calc(100% - 2 * var(--gutter)));
  margin: 0;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 900ms ease, transform 1100ms ease;
}
.verse.show { opacity: 1; transform: translate(-50%, 0); }
.verse p { margin: 0; display: inline-block; padding: 7px 24px 9px; font-family: var(--display); font-style: italic; font-size: 21px; line-height: 1.3; text-wrap: balance; border-top: 3px double var(--rule); border-bottom: 3px double var(--rule); box-shadow: 0 20px 50px -10px var(--shadow); }

/* ---------- the chapter banner ---------- */

.age-banner {
  position: absolute;
  z-index: 8;
  top: calc(var(--top-h) + 26px);
  left: 50%;
  transform: translate(-50%, 0) scale(0.96);
  width: min(660px, calc(100% - 2 * var(--gutter)));
  padding: 10px 30px 18px;
  text-align: center;
  border-top: 3px double var(--rule);
  border-bottom: 3px double var(--rule);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent), 0 24px 60px var(--shadow), 0 0 90px rgba(255, 170, 60, 0.38);
  opacity: 0;
  pointer-events: none;
  transition: opacity 800ms ease, transform 1000ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.age-banner.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
/* with a card open on a wide screen, the banner and verse sit in the space the card leaves */
@media (min-width: 720px) and (min-height: 501px) {
  .card-open[data-card="right"] .age-banner, .card-open[data-card="right"] .verse { left: calc((100% - var(--card-w) - max(28px, 4vw)) / 2); width: min(600px, calc(100% - var(--card-w) - max(28px, 4vw) - 48px)); }
  .card-open[data-card="left"] .age-banner, .card-open[data-card="left"] .verse { left: calc(var(--card-w) + max(28px, 4vw) + (100% - var(--card-w) - max(28px, 4vw)) / 2); width: min(600px, calc(100% - var(--card-w) - max(28px, 4vw) - 48px)); }
}
.age-flame { width: 22px; height: 30px; margin: 0 auto 2px; border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%; background: radial-gradient(ellipse at 50% 75%, #FFF0B8 0 20%, #F2A33A 45%, #B4461E 80%, transparent 82%); animation: flicker 800ms ease-in-out infinite alternate; }
.age-name { margin: 0; font-family: var(--display); font-weight: 400; font-size: 72px; line-height: 0.95; }
.age-years { margin: 6px 0 0; font-size: 16px; font-style: italic; color: var(--gold); }
.age-intro { margin: 4px auto 0; max-width: 50ch; font-size: 17px; line-height: 1.4; }

/* ---------- the ending ---------- */

.ending { position: absolute; z-index: 12; top: calc(var(--top-h) + 22px); bottom: 28px; right: max(28px, 4vw); width: min(460px, 38vw); display: flex; align-items: center; }
.ending-sheet { position: relative; flex: 1; min-width: 0; max-height: 100%; overflow: auto; scrollbar-width: thin; padding: 26px 30px 20px; border: 1px solid var(--rule); outline: 1px solid var(--rule); outline-offset: 4px; box-shadow: 0 0 0 9px color-mix(in srgb, var(--vellum-hi) 55%, transparent), 0 28px 70px var(--shadow); animation: card-in 900ms ease; }
.ending-sheet > * { animation: rise 900ms ease backwards; }
.ending-sheet > :nth-child(2) { animation-delay: 600ms; }
.ending-sheet > :nth-child(n+3) { animation-delay: 1200ms; }
.ending .rune { animation: none; }
.at-end .dock, .at-end .hint { visibility: hidden; }
/* a moment opened from the map or Contents at the ending takes the sheet's place until it closes */
.at-end.card-open .ending { visibility: hidden; }
.ending .song { margin: 0 0 6px; }
.ending-caption { margin: 0 0 12px; font-style: italic; color: var(--faded); }
.ending-verse { margin: 0 0 12px; font-style: italic; white-space: pre-line; }
.ending-verse p { margin: 0; }
.ending-verse footer { font-size: 13px; color: var(--faded); font-style: normal; }
.ending-verse:has(p:empty) { display: none; }
.ending-h { margin: 18px 0 6px; font-family: var(--display); font-weight: 400; font-size: 22px; border-bottom: 1px solid var(--rule-soft); padding-bottom: 2px; }
.keepsakes[hidden], .ending-h[hidden] { display: none; }
.keepsakes { margin: 0; padding: 0; list-style: none; font-size: 15px; display: grid; gap: 6px; }
.keepsakes li { position: relative; display: grid; padding-left: 26px; }
.keepsakes li::before { content: ""; position: absolute; left: 4px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--red-ink); box-shadow: inset 0 0 0 2.5px color-mix(in srgb, var(--red-ink) 70%, #000), 0 1px 1px rgba(0, 0, 0, 0.25); }
.ks-group { padding-left: 0 !important; margin-top: 6px; font-size: 13px; font-style: italic; color: var(--faded); }
.ks-group::before { display: none; }
.ks-title { font-family: var(--display); font-size: 17px; line-height: 1.2; }
.ks-took { color: var(--ink); line-height: 1.35; }
.ks-none { color: var(--faded); font-style: italic; }
.ending-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.ending-party { margin: 0; font-size: 16px; }
.end-links { display: flex; flex-wrap: wrap; gap: 2px 18px; margin: 0; padding: 0; list-style: none; font-size: 16px; }
.ending-actions { display: flex; align-items: center; gap: 16px; margin: 22px 0 0; }
.ending .tribute { margin: 12px 0 0; font-size: 12px; line-height: 1.35; }

/* ---------- start screen ---------- */

.start {
  position: absolute;
  inset: 0;
  z-index: 20;
  overflow: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 28px var(--gutter);
  background: radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--vellum) 70%, transparent), color-mix(in srgb, var(--vellum) 30%, transparent) 75%);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.start-sheet {
  position: relative;
  width: min(1120px, 100%);
  min-width: 0;
  padding: 32px 36px 24px;
  border: 1px solid var(--rule);
  outline: 1px solid var(--rule);
  outline-offset: 5px;
  box-shadow: 0 0 0 12px color-mix(in srgb, var(--vellum-hi) 45%, transparent), 0 30px 90px var(--shadow);
  animation: card-in 700ms ease;
}
.start-title { margin: 0; font-family: var(--display); font-weight: 400; font-size: 72px; line-height: 1; }
.song { margin: 10px 0 24px; }
.song blockquote { margin: 0; }
.song p { margin: 0; font-family: var(--display); font-style: italic; font-size: 28px; line-height: 1.2; }
.song figcaption { font-size: 14px; color: var(--faded); margin-top: 2px; }

.heroes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.hero-card {
  appearance: none;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 10px 10px 12px;
  text-align: left;
  background: color-mix(in srgb, var(--vellum-deep) 70%, transparent);
  border: 1px solid var(--rule-soft);
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.hero-card:hover { transform: translateY(-3px); border-color: var(--rule); box-shadow: 0 12px 24px -10px var(--shadow); }
.hero-card[aria-pressed="true"] { border-color: var(--red-ink); box-shadow: 0 0 0 2px var(--red-ink), 0 12px 26px -8px var(--shadow); background: var(--vellum-hi); }
.hero-portrait { display: block; width: 100%; aspect-ratio: 4 / 5; margin-bottom: 8px; }
.hero-text, .hero-desc { display: flex; flex-direction: column; gap: 2px; }
.hero-name { font-family: var(--display); font-size: 28px; line-height: 1.05; }
.hero-title { font-size: 16px; font-style: italic; color: var(--faded); }
.hero-line { font-size: 16px; line-height: 1.4; margin-top: 4px; }
.hero-bonus { font-size: 14px; font-weight: 500; margin-top: auto; padding-top: 6px; border-top: 1px solid var(--rule-soft); }
.hero-line { margin-bottom: 6px; }
.hero-card[aria-pressed="true"] .hero-name { color: var(--red-ink); }

.start-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 24px; }
.begin { padding: 12px 30px 14px; font-size: 28px; line-height: 1; }
.start-links { margin: 0; display: flex; gap: 20px; font-size: 16px; }
.tribute { margin: 18px 0 0; font-size: 14px; color: var(--faded); }

.tribute-foot {
  position: fixed;
  z-index: 4;
  left: var(--gutter);
  bottom: 8px;
  max-width: 300px;
  margin: 0;
  padding: 1px 8px 2px;
  font-size: 13px;
  line-height: 18px;
  color: var(--faded);
  background: var(--band);
  border: 1px solid var(--rule-soft);
}

.noscript { position: absolute; inset: auto 16px 16px; padding: 12px; background: var(--vellum); border: 1px solid var(--ink); }

/* ---------- mid widths ---------- */

@media (max-width: 1180px) {
  .tribute-foot { display: none; }
  .corner > .hud-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hud-btn { padding: 9px; }
  .more-items .hud-btn span { display: inline; }
  .realm { font-size: 24px; }
  .res-cost { display: none; }
}
@media (max-width: 960px) {
  .heroes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .start-title { font-size: 42px; }
  :root { --card-w: min(400px, 46vw); }
}

/* ---------- phones ---------- */

@media (max-width: 719px), (max-height: 500px) {
  :root { --top-h: 100px; }
  .topbar { grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 2px 8px; padding: 6px 10px 6px 14px; padding-top: max(6px, env(safe-area-inset-top)); }
  .where { grid-column: 1; grid-row: 1; }
  .corner { grid-column: 2; grid-row: 1; gap: 0; }
  .leg { grid-column: 1 / -1; grid-row: 2; width: 100%; height: 30px; margin-bottom: 13px; }
  .realm { font-size: 22px; }
  .realm-sub { font-size: 13px; }
  .corner > .hud-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hud-btn { padding: 9px; }
  .hud-ico { width: 20px; height: 20px; }
  #btn-sound { display: none; }
  .more-items { top: calc(100% + 6px); width: 230px; }
  .more-items .hud-btn span { display: inline; }
  .hint { top: calc(var(--top-h) + 10px); font-size: 14px; padding: 5px 10px 6px; width: max-content; }
  .dock { bottom: max(12px, env(safe-area-inset-bottom)); }
  .res { gap: 0; padding: 3px 6px 4px; }
  .res-item { padding: 1px 6px 5px; font-size: 14px; }
  .res-cost { display: inline; font-size: 12px; }
  .ico { width: 18px; height: 18px; }
  .main-btn { min-width: min(300px, 100%); font-size: 22px; min-height: 54px; padding: 7px 24px 9px 40px; }
  .main-sub { max-width: 220px; }
  .card { top: auto; left: 0 !important; right: 0 !important; bottom: 0; width: auto; max-height: 60%; align-items: stretch; }
  .card-sheet { padding: 20px 20px 12px; padding-bottom: max(12px, env(safe-area-inset-bottom)); outline: none; border-width: 1px 0 0; border-radius: 12px 12px 0 0; box-shadow: 0 -14px 40px var(--shadow); animation: sheet-in 420ms cubic-bezier(0.2, 0.8, 0.2, 1); }
  .card-sheet::before { content: ""; position: absolute; top: 7px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--rule-soft); }
  .card .rune { display: none; }
  @keyframes sheet-in { from { transform: translateY(40%); opacity: 0.4; } }
  .card-body .entry-title { font-size: 28px; }
  .card-body .entry-meta { margin-bottom: 10px; padding-bottom: 8px; font-size: 14px; }
  .card-body .entry-text p { font-size: 17px; }
  .card-body .entry-text p[data-dc]::before { font-size: 54px; }
  .card-body .entry-took { font-size: 16px; padding: 10px 12px 10px 46px; }
  .card-foot { margin-top: 10px; padding-top: 8px; }
  .pip-of { display: none; }
  #card-walk { max-width: 190px; padding: 6px 14px 8px; font-size: 20px; }
  #card-walk .cw-next { max-width: 160px; font-size: 13px; }
  .card-pips button { width: 26px; }
  .card-actions { gap: 2px; }
  .card-open .dock { visibility: hidden; }
  .verse p { font-size: 18px; padding: 6px 14px 8px; }
  .card-open .verse { display: none; }
  /* the chapter banner is one line under the top bar, so the horizon stays in view */
  .age-banner { top: calc(var(--top-h) + 6px); display: flex; align-items: baseline; justify-content: center; gap: 10px; padding: 4px 14px 6px; border-width: 1px 0; box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent), 0 10px 26px var(--shadow), 0 0 40px rgba(255, 170, 60, 0.3); }
  .age-name { font-size: 24px; line-height: 1.1; white-space: nowrap; }
  .age-years { margin: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .age-flame, .age-intro { display: none; }
  .card-grab { display: block; position: absolute; top: 0; left: 0; right: 0; height: 26px; z-index: 2; touch-action: none; cursor: grab; }
  .tribute-foot { display: none; }
  .start { padding: 12px 10px; place-items: start center; }
  .start-sheet { padding: 20px 0 0; box-shadow: 0 20px 50px var(--shadow); }
  .start-sheet > .start-title, .start-sheet > .song, .start-sheet > .tribute { margin-left: 16px; margin-right: 16px; }
  .start-title { font-size: 36px; }
  .song { margin-bottom: 16px; }
  .song p { font-size: 22px; }
  /* the companions in one row that swipes, so Begin stays in reach */
  .heroes { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 16px 10px; scroll-padding: 0 16px; scrollbar-width: none; }
  .heroes::-webkit-scrollbar { display: none; }
  .heroes li { flex: 0 0 min(46vw, 190px); scroll-snap-align: start; }
  .hero-card { padding: 8px 8px 10px; }
  .hero-name { font-size: 22px; }
  .hero-line { font-size: 14px; }
  .hero-title { font-size: 14px; }
  .start-actions { position: sticky; bottom: 0; z-index: 1; margin: 6px 0 0; padding: 12px 16px; gap: 16px; background: var(--vellum-hi); border-top: 1px solid var(--rule-soft); }
  .begin { font-size: 24px; padding: 11px 22px 13px; }
  .start .tribute { margin-top: 10px; margin-bottom: 14px; }
  .ending { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 54%; align-items: stretch; }
  .ending-sheet { padding: 20px 18px 16px; padding-bottom: max(16px, env(safe-area-inset-bottom)); outline: none; border-width: 1px 0 0; border-radius: 12px 12px 0 0; box-shadow: 0 -14px 40px var(--shadow); }
  .ending .rune { display: none; }
  .ending-cols { grid-template-columns: 1fr; }
  .ending-h { margin-top: 12px; }
  /* Begin again and Go home stay in reach at the sheet's foot */
  .ending-actions { position: sticky; bottom: -16px; z-index: 1; margin: 14px -18px 0; padding: 10px 18px 12px; background: var(--vellum-hi); border-top: 1px solid var(--rule-soft); }
  .ending .tribute { margin-top: 18px; }
  .atlas-hint { bottom: 96px; font-size: 13px; }
  .contents { top: calc(var(--top-h) + 8px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

body.preview .map { pointer-events: none; }