/* THE GAME: the map on the table (design/game-map-spec.md). Loaded by the-game.html only.
   One coordinate set: every box, prop and highlight is in desktop image pixels (D-space, 1920 x 1072).
   Wide screens lay the overlay over the painted scene in the same cover box as .scene__art; phones
   show a closer crop of the table (the-game-table.webp = D-space x 848.4, y 516.3, w 491.2, h 555.3)
   and scale the same D-space box behind it, so no position is ever authored twice.
   The map is only shown once game-map.js runs (html.map-ready); without it the article carries
   every section. */

/* ---------- Visibility contract ---------- */

.game-map[hidden], .game-map { display: none; }
.map-ready .game-map:not([hidden]) { display: block; }
.map-ready:not(.is-reading) #game-narrative { display: none; }
.game-read__back, .briefing__read { display: none; }
.map-ready .game-read__back { display: block; }
.map-ready .briefing__read { display: inline-flex; }
.is-reading .game-map:not([hidden]), .is-reading .read-sheet, .map-ready.is-reading .briefing__read { display: none; }
#game-narrative:focus { outline: none; }

/* ---------- Compact intro card ---------- */

.page-game .briefing { padding-bottom: 1.25rem; }
.page-game .briefing__head { margin-bottom: 1rem; }
.page-game .briefing .inlay__plaque { font-size: 1.25rem; padding: 0.55rem 0.9rem 0.5rem; }
.page-game .briefing__body {
  display: block;
  min-height: 0;
  padding: 0.9rem 1rem 1rem;
  background: rgb(2 8 26 / 0.6);
}
.page-game .briefing .icon-tile { display: none; }
.page-game .briefing__copy .chapter__title { margin: 0 0 0.6rem; font-size: 0.8125rem; line-height: 1.7; }
.page-game .briefing__copy p { margin: 0 0 0.5rem; font: 400 1.0625rem/1.5 var(--body); color: #e6ecfb; }
.page-game .briefing__copy p:first-of-type { font: 400 1.375rem/1.2 var(--term); color: var(--cyan-strong); }
.page-game .briefing__copy .briefing__status {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.75rem 0 0;
  font: 400 1.25rem/1.2 var(--term);
  color: var(--amber);
}
.briefing__status::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; background: var(--amber); box-shadow: 0 0 6px rgb(255 200 97 / 0.7); }
.briefing__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.25rem; margin-top: 0.6rem; }
/* Both actions are inline text links: reading about the game first, the sign-up beside it. */
.briefing__read, .briefing__join {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 400 1.25rem/1.2 var(--term);
}
.inlay a.briefing__read { color: var(--cyan-strong); }
.inlay a.briefing__join { color: #ff9ce6; }
.inlay a.briefing__read:hover, .inlay a.briefing__join:hover { color: var(--lantern); }

/* ---------- The map layer ---------- */

.game-map {
  --cyan: #4fd8ff;
  --magenta: #ff5fd2;
  --amber: #ffc861;
}
.game-map__art { position: absolute; }

/* Anything positioned in D-space: --x, --y, --w, --h in image pixels. */
.prop, .spot { position: absolute; }
.prop {
  left: calc(var(--x) / 19.2 * 1%);
  top: calc(var(--y) / 10.72 * 1%);
  width: calc(var(--w) / 19.2 * 1%);
  height: calc(var(--h) / 10.72 * 1%);
  image-rendering: pixelated;
  pointer-events: none;
  user-select: none;
}
.prop--id-tag { --x: 948; --y: 834; --w: 24; --h: 32; }
.prop--route-knot { --x: 1122; --y: 868; --w: 20; --h: 20; }
.prop--guard-post { --x: 1224; --y: 876; --w: 32; --h: 48; }
.prop--case-note { --x: 1152; --y: 994; --w: 64; --h: 40; rotate: -12deg; }

.game-map__ink { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

/* Highlight shapes: invisible at rest; hover/focus cyan, choice preview dashed amber, selected magenta. */
.hl { fill: transparent; stroke: transparent; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.hl--line { fill: none; stroke-width: 4; stroke-linecap: round; }
.hl.is-hot { fill: rgb(79 216 255 / 0.16); stroke: var(--cyan); }
.hl--line.is-hot { fill: none; }
.hl.is-preview { stroke: var(--amber); stroke-dasharray: 6 4; }
.hl.is-sel { fill: rgb(255 95 210 / 0.14); stroke: var(--magenta); stroke-dasharray: none; }
.hl--line.is-sel { fill: none; }

/* Route trace: pixel dashes drawn along the painted roads (revealed by the mask in game-map.js). */
.trace { fill: none; stroke: var(--cyan); stroke-width: 4; stroke-dasharray: 8 8; stroke-linecap: butt; vector-effect: non-scaling-stroke; opacity: 0; }
.trace.is-on { opacity: 0.95; }
.trace.is-past { opacity: 0.8; }
.trace--under { stroke: #04101e; stroke-width: 8; stroke-dasharray: none; }
.trace--under.is-on { opacity: 0.55; }
.trace--under.is-past { opacity: 0.4; }
@media (prefers-reduced-motion: no-preference) {
  .trace { transition: opacity 0.3s; }
}

/* ---------- Markers ---------- */

.spot {
  --b: rgb(79 216 255 / 0.7);
  --bl: 14px;
  --bt: 3px;
  --min: 44px;
  left: calc((var(--x) + var(--w) / 2) / 19.2 * 1%);
  top: calc((var(--y) + var(--h) / 2) / 10.72 * 1%);
  width: max(var(--min), calc(var(--w) / 19.2 * 1%));
  height: max(var(--min), calc(var(--h) / 10.72 * 1%));
  translate: -50% -50%;
  pointer-events: auto;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
@media (pointer: coarse) { .spot { --min: 48px; } }
.spot--castle { --x: 1052; --y: 735; --w: 128; --h: 111; }
.spot--identity { --x: 888; --y: 785; --w: 74; --h: 105; }
.spot--routes { --x: 1096; --y: 848; --w: 68; --h: 62; }
.spot--noticed { --x: 1212; --y: 870; --w: 88; --h: 80; }
.spot--escaped { --x: 1138; --y: 972; --w: 112; --h: 72; }
.spot--making { --x: 1124; --y: 546; --w: 104; --h: 174; }

.spot__brackets {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--b) 0 0) left top / var(--bl) var(--bt),
    linear-gradient(var(--b) 0 0) left top / var(--bt) var(--bl),
    linear-gradient(var(--b) 0 0) right top / var(--bl) var(--bt),
    linear-gradient(var(--b) 0 0) right top / var(--bt) var(--bl),
    linear-gradient(var(--b) 0 0) left bottom / var(--bl) var(--bt),
    linear-gradient(var(--b) 0 0) left bottom / var(--bt) var(--bl),
    linear-gradient(var(--b) 0 0) right bottom / var(--bl) var(--bt),
    linear-gradient(var(--b) 0 0) right bottom / var(--bt) var(--bl);
  background-repeat: no-repeat;
  filter: drop-shadow(1px 1px 0 rgb(0 9 22 / 0.9)) drop-shadow(-1px -1px 0 rgb(0 9 22 / 0.5));
}
/* Suggested next stop: amber brackets and a glint on the top-left corner. */
.spot.is-next { --b: var(--amber); }
.spot.is-next .spot__brackets::before {
  content: "";
  position: absolute;
  left: -5px;
  top: -5px;
  width: 6px;
  height: 6px;
  background: #fff3c4;
  box-shadow: 0 0 6px var(--amber);
}
@media (prefers-reduced-motion: no-preference) {
  .spot.is-next .spot__brackets::before { animation: glint 3.2s steps(1) infinite; }
}
@keyframes glint { 0%, 88% { opacity: 1; } 90% { opacity: 0; } 94% { opacity: 1; } 96% { opacity: 0; } 100% { opacity: 1; } }

.spot.is-visited:not(.is-next) { --b: rgb(255 200 97 / 0.5); }
.spot:hover, .spot:focus-visible, .spot.is-hot { --b: #8ce6ff; }
.spot:hover .spot__brackets, .spot:focus-visible .spot__brackets, .spot.is-hot .spot__brackets { inset: -3px; }
.spot.is-preview { --b: var(--amber); }
.spot[aria-current="location"] { --b: var(--magenta); }
.spot:active .spot__brackets { inset: 3px; }
.spot:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }

/* Name plates: always visible, on a dark plate so they read over the parchment. */
.spot__plate {
  position: absolute;
  left: var(--pl, 50%);
  top: var(--pt, 100%);
  translate: var(--ptx, -50%) var(--pty, 6px);
  padding: 2px 8px 3px;
  white-space: nowrap;
  font: 400 20px/1.1 var(--term);
  color: #f3f6ff;
  background: rgb(0 9 22 / 0.9);
  box-shadow: 0 0 0 1px var(--ui-edge), 0 3px 0 1px rgb(0 0 0 / 0.45);
}
.spot:hover .spot__plate, .spot:focus-visible .spot__plate, .spot.is-hot .spot__plate { box-shadow: 0 0 0 1px var(--ui-select-edge), 0 0 8px rgb(62 140 255 / 0.6); }
.spot[aria-current="location"] .spot__plate { background: var(--magenta); color: #12021c; box-shadow: 0 0 0 1px #ffb3ef, 0 0 10px rgb(255 95 210 / 0.6); }
/* Visited: a small wax seal on the plate's corner. */
.spot.is-visited:not([aria-current]) .spot__plate, .places__item.is-visited:not([aria-current]) { color: #ffd98a; }
.spot.is-visited .spot__plate::after, .places__item.is-visited::after {
  content: "";
  position: absolute;
  right: -6px;
  top: -6px;
  width: 11px;
  height: 11px;
  background: var(--magenta);
  box-shadow: inset 2px 2px 0 #ffb3ef, inset -2px -2px 0 #a8227f, 0 0 0 1px #2a0820;
}
/* Plate sides (default: centred below the object). */
.spot--castle, .spot--noticed, .spot--escaped { --pl: 100%; --pt: 50%; --ptx: 8px; --pty: -50%; }
.spot--identity { --pt: 0%; --pty: calc(-100% - 6px); }
.spot--making { --pl: 0%; --pt: 62%; --ptx: calc(-100% - 8px); --pty: -50%; }

/* The selected object's prop lights up. */
.game-map__art.sel-noticed .prop--guard-post,
.game-map__art.sel-escaped .prop--case-note,
.game-map__art.sel-identity .prop--id-tag,
.game-map__art.sel-routes .prop--route-knot { filter: brightness(1.25) drop-shadow(0 0 3px rgb(255 95 210 / 0.8)); }

/* ---------- The instruction and the explored count ---------- */

.game-map__say {
  margin: 0;
  font: 400 1.375rem/1.15 var(--term);
  color: #f6ecd2;
}
.game-map__count { margin: 0.35rem 0 0; font: 400 0.75rem/1.6 var(--pixel); color: var(--amber); }

/* ---------- Places list (phones: the no-precision way to every location) ---------- */

.places { display: none; }
.places__list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 0; list-style: none; }
.places__item {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0.5rem 0.85rem;
  font: 400 1.3125rem/1.1 var(--term);
  color: #f3f6ff;
  text-decoration: none;
  background: rgb(0 9 22 / 0.88);
  box-shadow: inset 0 0 0 2px var(--ui-edge);
}
.places__item:hover, .places__item:focus-visible { box-shadow: inset 0 0 0 2px var(--cyan); color: #fff; }
.places__item.is-next { box-shadow: inset 0 0 0 2px var(--amber); }
.places__item[aria-current="location"] { background: var(--magenta); color: #12021c; box-shadow: inset 0 0 0 2px #ffb3ef; }

/* ---------- Reading panel / sheet ---------- */

.read-sheet {
  border: 0;
  padding: 8px;
  margin: 0;
  background: transparent;
  color: #e6ecfb;
  overscroll-behavior: contain;
}
.read-sheet:not([open]) { display: none; }
.read-sheet__inner { --pad: 1.4rem; padding: 0.5rem var(--pad) var(--pad); }
.read-sheet__inner > .inlay__frame::after { background: rgb(3 10 31 / 0.96); }
.read-sheet__inner > .inlay__frame::before { background: linear-gradient(180deg, var(--magenta) 0 4px, var(--neon) 4px); }
.read-sheet__pin { position: absolute; top: 9px; width: 6px; height: 6px; background: var(--magenta); box-shadow: 0 0 6px rgb(255 95 210 / 0.8); }
.read-sheet__pin--l { left: 12px; }
.read-sheet__pin--r { right: 12px; }
.read-sheet__bar {
  position: sticky;
  top: -8px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 calc(-1 * var(--pad) + 8px) 0.6rem;
  padding: 0.6rem calc(var(--pad) - 8px) 0.4rem;
  background: rgb(3 10 31 / 0.96);
}
.read-sheet__grab { display: none; }
.read-sheet__where { flex: 1 1 auto; font: 400 1.25rem/1.1 var(--term); color: var(--amber); }
.inlay a.read-sheet__back, .read-sheet__back {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0 0.25rem;
  font: 400 0.625rem/1.4 var(--pixel);
  color: var(--cyan-strong);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.read-sheet__back::before { content: ""; border-block: 5px solid transparent; border-right: 6px solid currentColor; }
.inlay a.read-sheet__back:hover { color: var(--lantern); }
.read-sheet__title { font-size: 0.9375rem; margin-bottom: 1.1rem; }
.read-sheet__title:focus { outline: none; }
.read-sheet__title:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.inlay .read-sheet__body p { max-width: 62ch; margin: 0 0 0.9em; font: 400 1.125rem/1.65 var(--body); color: #e6ecfb; }

/* Conversation choices, like a dialogue menu. */
.read-sheet__choices { margin-top: 1.25rem; border-top: 2px solid rgb(62 200 255 / 0.4); }
.choices { margin: 0; padding: 0; list-style: none; }
.choices li { border-bottom: 1px solid rgb(73 117 157 / 0.6); }
.inlay a.choice {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.75rem;
  min-height: 48px;
  padding: 0.55rem 0.5rem 0.55rem 1.6rem;
  font: 400 1.375rem/1.15 var(--term);
  color: #f3f6ff;
  text-decoration: none;
}
.choice::before {
  content: "";
  position: absolute;
  left: 0.45rem;
  top: 50%;
  width: 8px;
  height: 10px;
  margin-top: -5px;
  background: var(--hero-eye);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  opacity: 0;
}
.inlay a.choice:hover, .inlay a.choice:focus-visible { color: #fff; background: linear-gradient(90deg, rgb(62 200 255 / 0.16), transparent 80%); }
.choice:hover::before, .choice:focus-visible::before { opacity: 1; }
.choice:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.choice__to {
  font: 400 1rem/1.2 var(--term);
  color: var(--amber);
  white-space: nowrap;
}
.choice__to::before { content: "> "; }
.inlay a.choice--back { color: var(--text-dim); }

/* Reading view: back links above and below the article. */
.game-read__back { margin: 0; }
.game-read__back a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  font: 400 0.75rem/1.4 var(--pixel);
  color: var(--cyan-strong);
  text-shadow: 0 2px 0 #000;
}
.game-read__back a::before { content: ""; border-block: 5px solid transparent; border-right: 6px solid currentColor; }
.game-read__back a:hover { color: var(--lantern); }
/* The reading view uses the panel's comfortable body face for the same copy. */
.is-reading #game-narrative .chapter > p { font: 400 1.125rem/1.65 var(--body); }

/* ================= Wide screens: the overlay on the painted scene ================= */

@media (min-width: 64rem) and (orientation: landscape) {
  /* A closer view of the table. One column on the left (the intro, then the reading panel, with the
     instruction at its foot) and the table framed in the space to its right. --u is one image pixel
     on screen: large enough to cover the viewport, and as close as the table (D y 530 to 1060, the
     markers plus their plates) allows with a 24px safe area. The focus point D (1094, 795) sits in
     the middle of the free space, clamped so the painting always covers the screen. */
  .map-ready:not(.is-reading) .page-game {
    --col: clamp(300px, 27vw, 400px);
    --u: max(
      calc(max(104vw, 100vw + 48px, (100vh + 48px) * 1920 / 1072) / 1920),
      min(calc((100vh - 64px - 88px) / 530), calc((100vw - var(--col) - 72px - 320px) / 420), 1.6px)
    );
    --map-w: calc(var(--u) * 1920);
    --map-h: calc(var(--u) * 1072);
    /* The +1px floor keeps the right and bottom edges past the viewport despite sub-pixel rounding
       (Firefox put the bottom edge at 1079.9999px of 1080 when the clamp hit its floor). */
    --map-x: clamp(100vw - var(--map-w) + 1px, var(--col) + 48px + (100vw - var(--col) - 48px) / 2 - var(--u) * 1094, 0px);
    --map-y: clamp(100vh - var(--map-h) + 1px, 64px + (100vh - 64px) / 2 - var(--u) * 795, 0px);
  }
  /* While the map is in use the painting holds still: no entrance zoom or pointer drift, so the
     markers (and the objects they sit on) never move under the pointer. */
  .map-ready:not(.is-reading) .page-game .scene__art,
  .map-ready:not(.is-reading) .game-map__art {
    left: var(--map-x);
    top: var(--map-y);
    width: var(--map-w);
    height: var(--map-h);
    margin: 0;
  }
  .map-ready:not(.is-reading) .page-game .scene__art { transform: none !important; }

  .game-map { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
  .game-map__stage { position: absolute; inset: 0; }

  /* The instruction: a small note at the foot of the left column, clear of every object. */
  .game-map__note {
    position: absolute;
    left: 24px;
    bottom: 24px;
    width: var(--col);
    padding: 0.55rem 0.9rem 0.5rem;
    background: rgb(0 9 22 / 0.86);
    box-shadow: 0 0 0 2px #6b4a24, 0 0 0 3px rgb(0 9 22 / 0.9), 0 6px 14px rgb(0 0 0 / 0.45);
  }
  .game-map__say { font-size: 1.25rem; }
  .map-open .game-map__note { display: none; }

  .map-ready:not(.is-reading) .page-game .screen {
    width: var(--col);
    min-height: calc(100svh - 64px);
    margin: 0 0 0 24px;
    padding: 16px 0 24px;
    gap: 16px;
  }
  .map-ready:not(.is-reading) .page-game .briefing { z-index: 1; padding-bottom: 0.9rem; }
  .map-open .page-game .briefing { display: none; }
  .page-game .briefing__head { margin-bottom: 0.75rem; }
  .page-game .briefing__body { padding: 0.75rem 0.9rem 0.6rem; }
  .page-game .briefing__copy .chapter__title { font-size: 0.75rem; margin-bottom: 0.4rem; }
  .page-game .briefing__copy p { font-size: 1rem; line-height: 1.45; margin-bottom: 0.4rem; }
  .page-game .briefing__copy p:first-of-type { font-size: 1.25rem; }
  .page-game .briefing__copy .briefing__status { font-size: 1.125rem; margin-top: 0.5rem; }

  /* The reading panel takes the column; the passage scrolls and the choices stay in view below it. */
  .read-sheet[open] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    max-height: calc(100svh - 64px - 40px);
    overflow: hidden;
  }
  .read-sheet__inner { display: flex; flex-direction: column; min-height: 0; flex: 0 1 auto; }
  .read-sheet__bar { position: static; }
  /* A soft fade at the foot says the passage continues; the padding lets its last line clear it. */
  .read-sheet__body {
    flex: 0 1 auto;
    min-height: 5rem;
    padding-bottom: 1.25rem;
    overflow-y: auto;
    mask-image: linear-gradient(180deg, #000 calc(100% - 1.75rem), transparent);
    scrollbar-width: thin;
    scrollbar-color: var(--ui-edge) transparent;
  }
  .read-sheet__title { font-size: 0.8125rem; margin-bottom: 0.7rem; }
  .read-sheet__choices { flex: 0 0 auto; margin-top: 0.75rem; }
  .inlay a.choice { font-size: 1.25rem; min-height: 44px; padding-block: 0.35rem; }
}

/* ================= Phones, portrait tablets, small landscape: the closer tabletop ================= */

@media (max-width: 63.99rem), (orientation: portrait) {
  .game-map { position: relative; }
  /* A compact intro, so the table (castle, figure and crossroads at least) is in the first screen. */
  .map-ready:not(.is-reading) .page-game .screen { padding-top: 0.5rem; gap: 0.5rem; }
  .page-game .briefing { --pad: 0.75rem; padding-top: 0.6rem; padding-bottom: 0.55rem; }
  .page-game .briefing__head { margin-bottom: 0.4rem; }
  .doc .page-game .briefing .inlay__plaque, .page-game .briefing .inlay__plaque { font-size: 0.75rem; padding: 0.35rem 0.6rem 0.3rem; }
  .page-game .briefing__body { padding: 0.45rem 0.7rem 0.1rem; }
  .page-game .briefing__copy .chapter__title { margin-bottom: 0.3rem; font-size: 0.6875rem; line-height: 1.6; }
  .page-game .briefing__copy p { margin-bottom: 0.25rem; font-size: 0.9375rem; line-height: 1.35; }
  .page-game .briefing__copy p:first-of-type { font-size: 1.125rem; }
  .page-game .briefing__copy .briefing__status { margin-top: 0.2rem; font-size: 1rem; }
  .briefing__actions { margin-top: 0; }
  .briefing__read, .briefing__join { font-size: 1.125rem; }

  /* The instruction: one strip along the top edge of the tabletop. */
  .game-map__note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: min(100%, calc(72svh * 1056 / 1194), 720px);
    margin: 0 auto;
    padding: 0.35rem 0.6rem 0.3rem;
    background: rgb(0 9 22 / 0.92);
    box-shadow: 0 0 0 3px var(--neon), 0 0 0 5px var(--ui-void);
    position: relative;
    z-index: 1;
  }
  .game-map__say { font-size: 0.9375rem; line-height: 1.15; }
  .game-map__say br { display: none; }
  .game-map__count { flex: 0 0 auto; margin: 0; font-size: 0.625rem; }
  /* Room to scroll the selected object into the strip of table above the open sheet. */
  .map-open .page-game .screen { padding-bottom: 72svh; }
  .game-map__stage {
    position: relative;
    width: min(100%, calc(72svh * 1056 / 1194), 720px);
    aspect-ratio: 1056 / 1194;
    margin: 0 auto;
    overflow: hidden;
    background: #5a3a1c url("/media/pages/the-game-table.webp?v=20261011g") 0 0 / 100% 100% no-repeat;
    box-shadow: 0 0 0 3px var(--neon), 0 0 0 5px var(--ui-void), 0 0 14px rgb(62 200 255 / 0.4);
  }
  /* The full D-space box, scaled and offset so the crop fills the stage exactly. */
  .game-map__art {
    left: calc(100% * -848.4 / 491.2);
    top: calc(100% * -516.3 / 555.3);
    width: calc(100% * 1920 / 491.2);
    height: calc(100% * 1072 / 555.3);
  }
  .spot { --bl: 12px; }
  .spot__plate { font-size: 17px; padding: 1px 6px 2px; }
  /* Plate sides that fit inside the closer crop. */
  .spot--identity { --pl: calc(-36 / 74 * 100%); --ptx: 0%; }
  .spot--noticed { --pl: 50%; --pt: 0%; --ptx: -50%; --pty: calc(-100% - 6px); }
  .spot--escaped { --pl: 0%; --pt: 50%; --ptx: calc(-100% - 8px); --pty: -50%; }

  .places { display: block; margin-top: 1rem; }
  .map-ready:not(.is-reading) .page-game .screen { gap: 1.5rem; }

  .read-sheet { padding: 0; }
  .read-sheet[open] {
    position: fixed;
    inset: auto 0 0 0;
    display: block;
    width: 100%;
    max-width: none;
    max-height: 72svh;
    overflow-y: auto;
  }
  .read-sheet::backdrop { background: rgb(0 5 16 / 0.35); }
  .read-sheet__inner { --pad: 1.1rem; padding-bottom: calc(var(--pad) + env(safe-area-inset-bottom)); }
  .read-sheet__inner > .inlay__frame::before, .read-sheet__inner > .inlay__frame::after { clip-path: polygon(6px 0, calc(100% - 6px) 0, calc(100% - 6px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 6px, 100% 6px, 100% 100%, 0 100%, 0 6px, 3px 6px, 3px 3px, 6px 3px); }
  .read-sheet__bar { top: 0; flex-wrap: wrap; padding-top: 0.9rem; }
  .read-sheet__grab { display: block; position: absolute; left: 50%; top: 6px; width: 36px; height: 6px; margin-left: -18px; background: var(--ui-edge); }
  .inlay .read-sheet__body p { font-size: 1.0625rem; }
}

/* Phones held sideways: the tabletop follows the width, so the markers keep their spacing. */
@media (orientation: landscape) and (max-height: 30rem) and (max-width: 63.99rem) {
  .game-map__stage, .game-map__note { width: min(100%, 520px); }
}


/* ---------- Forced colours ---------- */

@media (forced-colors: active) {
  .spot__brackets { background: none; border: 2px solid CanvasText; filter: none; }
  .spot[aria-current="location"] .spot__brackets { border-color: Highlight; }
  .spot__plate, .places__item { border: 2px solid CanvasText; }
  .hl { display: none; }
  .read-sheet__inner { border: 2px solid CanvasText; }
}