/* WHO IS THIS story trail: the opening questions in Kay's dialog box, the chapter map (an attack path
   of Kay's life: nodes, connections that light up as they are followed) and the reading dialog (a
   journal page inside a game panel, with conversational choices beneath). Loaded by who-is-this.html
   only. Without JavaScript the trail stays hidden and the full story is the page. */

/* ---------- Layout: the map gets the room, the reading panels keep their width ---------- */

.page-who .screen { width: min(68rem, 100% - 2rem); }
.page-who .dialog, .page-who .story { width: min(52rem, 100%); margin-left: auto; }
.page-who .story { display: flex; flex-direction: column; gap: 2.5rem; }
.page-who .story[hidden], .trail[hidden], .story__end[hidden] { display: none; }
.has-trail .page-who .dialog .inlay { min-height: 0; }

/* ---------- Opening questions: dialogue option rows ---------- */

.asks {
  display: grid;
  gap: 6px;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: ask;
}
.ask, .reader__choice {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  min-height: 48px;
  padding: 0.35rem 0.9rem 0.35rem 2.1rem;
  border: 0;
  background: none;
  color: #e6ecfb;
  font: 400 1.5rem/1.15 var(--term);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.inlay a.ask { color: #e6ecfb; text-decoration: none; }
.ask::before, .reader__choice::before {
  counter-increment: ask;
  content: counter(ask);
  content: counter(ask) / ""; /* decoration only: kept out of the accessible name */
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 2px solid var(--ui-edge);
  background: var(--ui-void);
  font: 400 0.75rem/1 var(--pixel);
  color: var(--cyan-strong);
}
/* Row fill and edge, behind the label; hover and focus select the row (number lit amber). */
.ask::after, .reader__choice::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(1 14 35 / 0.92);
  box-shadow: inset 0 0 0 1px var(--ui-edge);
}
.ask:hover::after, .ask:focus-visible::after, .reader__choice:hover::after, .reader__choice:focus-visible::after {
  background: linear-gradient(90deg, rgb(62 200 255 / 0.16), transparent 65%), var(--ui-select);
  box-shadow: inset 0 0 0 2px var(--ui-select-edge), 0 0 12px rgb(62 140 255 / 0.45);
}
.ask:hover, .ask:focus-visible, .reader__choice:hover, .reader__choice:focus-visible { color: #fff; }
.inlay a.ask:hover { color: #fff; }
.ask:hover::before, .ask:focus-visible::before, .reader__choice:hover::before, .reader__choice:focus-visible::before {
  border-color: var(--lantern);
  color: var(--lantern);
}
.ask:focus-visible, .reader__choice:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* ---------- The trail panel ---------- */

.trail { padding-top: calc(var(--pad) - 0.25rem); }
.trail > .inlay__frame::after { background: rgb(3 10 31 / 0.9); }
.trail__bar { display: flex; justify-content: flex-end; margin: 0 0 0.5rem; }
.trail__full { cursor: pointer; color: #fff; font-family: var(--pixel); }
.trail__full:hover { color: var(--lantern); }
.trail__full[aria-expanded="true"] { border-color: var(--lantern); }
.trail__full:focus-visible, .story__back:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }

.trail__map {
  position: relative;
  height: clamp(32rem, 46vw, 37rem);
  margin: 0 -0.5rem;
}
.trail__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.trail__edge {
  fill: none;
  stroke: rgb(73 117 157 / 0.45);
  stroke-width: 2;
  stroke-dasharray: 2 7;
  stroke-linecap: square;
}
/* Connections appear as the path reaches them: unseen until one end is visited, faint from a visited
   chapter, marked from the current one, lit and directed once followed. */
.trail__link { opacity: 0; }
.trail__link.is-known { opacity: 0.25; }
.trail__link.is-next, .trail__link.is-followed { opacity: 1; }
.trail__link.is-next .trail__edge { stroke: rgb(134 170 203 / 0.9); stroke-dasharray: 6 6; }
.trail__lit {
  fill: none;
  stroke: var(--neon);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 4px rgb(62 200 255 / 0.85));
}
.trail__link.is-followed .trail__lit { stroke-dashoffset: 0; }
.trail__link.is-latest .trail__lit { stroke: var(--lantern); filter: drop-shadow(0 0 5px rgb(246 215 124 / 0.85)); }
/* Connector pips show only on connections that can be reached or have been followed. */
.trail__pip { fill: #0a1838; stroke: rgb(73 117 157 / 0.8); stroke-width: 2; visibility: hidden; }
.trail__link.is-next .trail__pip { visibility: visible; stroke: var(--ui-edge-hi); }
.trail__dir { fill: none; stroke: #dff6ff; stroke-width: 3; stroke-linecap: square; stroke-linejoin: miter; visibility: hidden; filter: drop-shadow(1px 1px 0 #000916); }
.trail__link.is-followed .trail__dir { visibility: visible; }
.trail__link.is-latest .trail__dir { stroke: #fff4cf; }

.trail__nodes { margin: 0; padding: 0; list-style: none; }
.trail__stop {
  --tile: 84px;
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: 10.5rem;
  margin: calc(var(--tile) / -2) 0 0 -5.25rem;
}
.trail__stop[data-node="kay"] { --tile: 112px; }
/* Where each chapter sits on the wide map (tile centre, % of the map). */
.trail__stop[data-node="kay"] { --x: 7; --y: 46; }
.trail__stop[data-node="band"] { --x: 27; --y: 15; }
.trail__stop[data-node="stays"] { --x: 52; --y: 12; }
.trail__stop[data-node="making"] { --x: 40; --y: 62; }
.trail__stop[data-node="where"] { --x: 73; --y: 20; }
.trail__stop[data-node="offscript"] { --x: 67; --y: 72; }
.trail__stop[data-node="people"] { --x: 91; --y: 47; }

.trail__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: #a9bbdb;
  font: 400 0.75rem/1.6 var(--pixel);
  text-align: center;
  cursor: pointer;
}
.trail__node:focus-visible { outline: none; }
.trail__tile {
  position: relative;
  display: block;
  width: var(--tile);
  height: var(--tile);
  background: #0b1530;
  box-shadow: 0 0 0 2px var(--ui-edge), 0 0 0 4px #000916, 0 6px 14px rgb(0 0 0 / 0.55);
}
.trail__tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.75;
  filter: saturate(0.4) brightness(0.9);
}
.trail__name {
  max-width: 100%;
  padding: 0.3rem 0.45rem 0.25rem;
  background: rgb(0 9 22 / 0.88);
  text-wrap: balance;
}
.trail__stop.is-near .trail__tile img { opacity: 0.95; filter: saturate(0.75) brightness(0.97); }
.trail__stop.is-near .trail__name { color: #d5e0f5; }
.trail__stop.is-visited .trail__tile { box-shadow: 0 0 0 3px var(--neon), 0 0 0 5px #000916, 0 0 14px rgb(62 200 255 / 0.55); }
.trail__stop.is-visited .trail__tile img { opacity: 1; filter: none; }
.trail__stop.is-visited .trail__name { color: var(--cyan-strong); }
/* A visited chapter carries a small lit pip in its corner. */
.trail__stop.is-visited .trail__tile::after {
  content: "";
  position: absolute;
  right: -7px;
  top: -7px;
  width: 12px;
  height: 12px;
  background: var(--neon);
  box-shadow: 0 0 0 2px #000916, 0 0 6px var(--neon);
}
.trail__stop.is-current .trail__tile { box-shadow: 0 0 0 3px var(--lantern), 0 0 0 5px #000916, 0 0 18px rgb(246 215 124 / 0.7); }
.trail__stop.is-current .trail__tile::after { background: var(--lantern); box-shadow: 0 0 0 2px #000916, 0 0 6px var(--lantern); }
.trail__stop.is-current .trail__name { color: var(--lantern); }
/* "You are here": the hero's hood above the current chapter. */
.trail__you {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  width: 48px;
  height: 40px;
  margin-left: -24px;
  background: url("/media/hero-sprite.png") 0 0 / 48px 85.5px no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 0 #000916);
  visibility: hidden;
}
.trail__stop.is-current .trail__you { visibility: visible; }
.trail__node:hover .trail__tile, .trail__node:focus-visible .trail__tile {
  box-shadow: 0 0 0 3px var(--ui-select-edge), 0 0 0 5px #000916, 0 0 16px rgb(62 140 255 / 0.7);
}
.trail__node:hover .trail__tile img, .trail__node:focus-visible .trail__tile img { opacity: 1; filter: none; }
.trail__node:hover .trail__name, .trail__node:focus-visible .trail__name { color: #fff; }
.trail__node:focus-visible .trail__name { outline: 3px solid var(--focus); outline-offset: 2px; }
.trail__node:focus-visible .trail__tile { outline: 3px solid var(--focus); outline-offset: 7px; }

/* ---------- The full story reads in the same book face as the journal pages ---------- */

.page-who .story .chapter p { font: 400 1.1875rem/1.72 Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", serif; letter-spacing: normal; }
.page-who .story .aside p { font-size: 1.3125rem; font-style: italic; line-height: 1.5; }

/* ---------- End of the full story ---------- */

.story__end { display: flex; justify-content: flex-end; }
.story__back { cursor: pointer; color: #fff; font-family: var(--pixel); }
.story__back:hover { color: var(--lantern); }
/* Jumps to a chapter or back to the trail land clear of the sticky HUD strip. */
.story h2, .trail { scroll-margin-top: 6.5rem; }
.story h2:focus { outline: none; }
.story h2:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }

/* ---------- The reading dialog: a journal page inside a game panel ---------- */

.reader-open { overflow: hidden; }
.reader {
  width: min(66rem, 100% - 2rem);
  max-width: none;
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  border: 0;
  padding: 8px;
  background:
    repeating-linear-gradient(0deg, rgb(255 255 255 / 0.02) 0 1px, transparent 1px 3px),
    rgb(3 10 31 / 0.97);
  box-shadow:
    inset 0 0 0 3px var(--neon), inset 0 0 0 7px #000916, inset 0 0 0 8px rgb(62 200 255 / 0.35),
    0 0 22px rgb(62 200 255 / 0.4), 0 24px 48px rgb(0 0 0 / 0.6);
  color: #e6ecfb;
  overflow: hidden;
}
.reader::backdrop { background: rgb(0 5 16 / 0.8); }
.reader__frame {
  position: relative;
  max-height: calc(100dvh - 2rem - 16px);
  padding: 0 1.25rem 1.2rem;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--ui-edge) transparent;
}
.reader__head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 -1.25rem;
  padding: 1rem 1.25rem;
  background: rgb(3 10 31);
}
.reader__head::after { content: ""; order: 1; flex: 1 1 auto; height: 3px; background: var(--neon); box-shadow: 0 0 6px rgb(62 200 255 / 0.6); }
.reader__title {
  margin: 0;
  font: 400 1rem/1.6 var(--pixel);
  color: #fff;
  text-shadow: 2px 2px 0 var(--violet);
  text-wrap: balance;
}
.reader__close {
  order: 2;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid var(--ui-edge);
  background: var(--ui-void);
  color: var(--cyan-strong);
  font: 400 0.875rem/1 var(--pixel);
  cursor: pointer;
}
.reader__close:hover { border-color: var(--lantern); color: var(--lantern); }
.reader__close:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.reader__body {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
}
.reader__art {
  position: sticky;
  top: 5.5rem;
  margin: 0.25rem 0 0;
  padding: 6px;
  background: #0b1530;
  box-shadow: 0 0 0 3px var(--lantern-warm, #cb976b), 0 0 0 6px #000916, 0 0 0 7px rgb(246 215 124 / 0.35);
}
.reader__art img { display: block; width: 100%; height: auto; }

/* The page itself: warm parchment, a book face, generous measure and spacing. */
.reader__page {
  padding: 2rem 2.25rem 1.75rem;
  background:
    radial-gradient(130% 120% at 50% 40%, transparent 60%, rgb(120 82 38 / 0.22)),
    linear-gradient(180deg, #f1e5c8, #eadbb8);
  box-shadow: inset 0 0 0 1px #c9a86c, inset 0 0 0 6px #f1e5c8, inset 0 0 0 7px rgb(160 120 60 / 0.45), 0 0 0 3px #3a2414;
  color: #2b1d10;
  font: 400 1.1875rem/1.72 Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", serif;
}
.reader__page:focus { outline: none; }
.reader__page:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.reader__page p { max-width: 62ch; margin: 0 0 1em; }
.reader__page > :last-child { margin-bottom: 0; }
.reader__page a { color: #7a2e0e; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.reader__page a:hover { color: #a3410f; }
.reader__page a:focus-visible { outline: 3px solid #7a2e0e; outline-offset: 2px; }
.reader__quote { margin: 1.2rem 0 1.4rem; padding: 0.1rem 0 0.1rem 1.1rem; border-left: 3px solid #a06a1c; }
.reader__quote p { margin: 0; font-size: 1.3125rem; font-style: italic; color: #4e3010; }

.reader__choices { padding-top: 1.25rem; }
.reader__list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: ask; }
.reader__choice--map { color: #c3cde8; }
.reader__choice--map::before { content: "\2190"; content: "\2190" / ""; font-family: var(--term); font-size: 1.25rem; }
.reader__choice--map::after { background: rgb(1 14 35 / 0.6); box-shadow: inset 0 0 0 1px rgb(73 117 157 / 0.6); }
.reader__aux { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; margin-top: 0.6rem; }
.reader__prev {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0 0.25rem;
  border: 0;
  background: none;
  color: var(--cyan-strong);
  font: 400 0.75rem/1.4 var(--pixel);
  cursor: pointer;
}
.reader__prev::before { content: ""; border-block: 5px solid transparent; border-right: 6px solid currentColor; }
.reader__prev:hover { color: var(--lantern); }
.reader__prev:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.reader__prev[hidden] { display: none; }
.reader__count { margin-left: auto; font: 400 0.75rem/1 var(--pixel); color: var(--ui-edge-hi); }
.reader__choice--seen { color: #97a6c8; }
.reader__choice--seen::before { border-color: rgb(62 200 255 / 0.55); background: rgb(62 200 255 / 0.2); color: #dff6ff; }

/* "More below": a fade at the foot of the panel while the passage continues out of view. */
.reader__more { position: sticky; bottom: 0; z-index: 1; height: 0; pointer-events: none; }
.reader__more[hidden] { display: none; }
.reader__more::before {
  content: "";
  position: absolute;
  left: -1.25rem;
  right: -1.25rem;
  bottom: -1.2rem;
  height: 6rem;
  background: linear-gradient(rgb(3 10 31 / 0), rgb(3 10 31 / 0.97) 72%);
}
.reader__more span {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.7rem;
  border: 2px solid var(--lantern);
  background: var(--ui-void);
  color: var(--lantern);
  font: 400 0.75rem/1 var(--pixel);
}
.reader__more span::after { content: ""; border-inline: 5px solid transparent; border-top: 6px solid currentColor; }

/* ---------- Motion (only when welcome): lines draw on, the panel unfolds, the hood bobs ---------- */

@media (prefers-reduced-motion: no-preference) {
  .trail__lit { transition: stroke-dashoffset 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
  .trail__link { transition: opacity 0.3s; }
  .trail__tile { transition: box-shadow 0.15s; }
  .trail__node:hover .trail__tile { translate: 0 -2px; }
  .trail__stop.is-current .trail__you { animation: trail-bob 1s steps(2) infinite; }
  .reader[open] .reader__frame { animation: reader-open 0.32s steps(6) both; }
  .reader[open]::backdrop { animation: reader-dim 0.2s ease-out both; }
}
@keyframes trail-bob { 50% { translate: 0 -3px; } }
@keyframes reader-open { from { clip-path: inset(50% 0 50% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes reader-dim { from { opacity: 0; } }

/* ---------- Narrow screens: a vertical trail, the reader fills the screen ---------- */

@media (max-width: 40rem) {
  .page-who .dialog, .page-who .story { width: 100%; }
  .ask, .reader__choice { font-size: 1.375rem; padding-left: 0.75rem; gap: 0.7rem; }
  .trail__bar { justify-content: stretch; }
  .trail__full { width: 100%; justify-content: center; }
  .trail__map { height: 70rem; margin: 0; }
  .trail__stop { --tile: 72px; width: 9.25rem; margin-left: -4.625rem; }
  .trail__stop[data-node="kay"] { --tile: 96px; --x: 50; --y: 8; }
  .trail__stop[data-node="band"] { --x: 27; --y: 20; }
  .trail__stop[data-node="stays"] { --x: 73; --y: 33; }
  .trail__stop[data-node="making"] { --x: 30; --y: 47; }
  .trail__stop[data-node="where"] { --x: 72; --y: 60; }
  .trail__stop[data-node="offscript"] { --x: 28; --y: 74; }
  .trail__stop[data-node="people"] { --x: 66; --y: 88; }

  .reader { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 6px; }
  .reader__frame { height: 100%; max-height: none; padding: 0 1rem max(1rem, env(safe-area-inset-bottom)); }
  .reader__title { font-size: 0.875rem; }
  .reader__head { margin: 0 -1rem; padding: 0.9rem 1rem 0.8rem; }
  .reader__more::before { left: -1rem; right: -1rem; }
  .reader__body { grid-template-columns: 1fr; gap: 1rem; }
  .page-who .story .chapter p { font-size: 1.0625rem; line-height: 1.66; }
  .page-who .story .aside p { font-size: 1.125rem; }
  .reader__art { position: static; width: 104px; margin: 0.25rem 0 0 3px; padding: 4px; }
  .reader__page { padding: 1.4rem 1.25rem 1.25rem; font-size: 1.0625rem; line-height: 1.66; }
  .reader__quote p { font-size: 1.125rem; }
  .reader__choices { padding-top: 0.9rem; }
}

@media (forced-colors: active) {
  .trail__tile, .ask, .reader__choice, .reader__page, .reader { border: 2px solid CanvasText; }
  .trail__dir { stroke: Highlight; }
  .trail__stop.is-current .trail__tile { outline: 3px solid Highlight; }
  .trail__lit { stroke: Highlight; }
}