/* playterathos.com: the game's own world. Colours are the client's Theme (crates/client/src/ui/theme.rs),
   type is the game's two pixel faces at whole multiples of their 8 px grid, and every sprite is shown
   at a whole multiple (--s) with nearest-neighbour scaling. */

@font-face {
  font-family: "Galmuri7";
  src: url("../fonts/Galmuri7-Latin.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Tiny5";
  src: url("../fonts/Tiny5-Regular.ttf") format("truetype");
  font-display: swap;
}

:root {
  /* Theme.ui */
  --ink: #f2ead7;
  --paper: #1b2136;
  --backdrop: #0f1322;
  --raised: #303a5c;
  --edge: #c9c2ad;
  --shadow: #0b0d17;
  --accent: #f4c95d;
  --dim: #9aa2bf;
  --darkness: #7a3fb8;
  /* Theme plates: at rest and chosen */
  --rim: #b08c44;
  --fill-dark: #121626;
  --chosen-rim: #fff1bc;
  --chosen-light: #ffdf88;
  --chosen-dark: #c29238;
  /* the Mereway's grass, for the page ground between scenes */
  --grass: #46a06e;
  --grass-deep: #2f6b52;

  --s: 3;               /* sprite scale: whole multiples only */
  --px: 3px;            /* one base pixel of the UI */
  --type: 16px;         /* body: Galmuri7 at 2x its grid */
  --lh: 24px;
  color-scheme: dark;
}
@media (max-width: 900px) {
  :root { --s: 2; --px: 2px; }
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--backdrop);
  color: var(--ink);
  font: var(--type) / var(--lh) "Galmuri7", ui-monospace, monospace;
  -webkit-font-smoothing: none;
  font-smooth: never;
  text-rendering: optimizeSpeed;
}
img { image-rendering: pixelated; }
a { color: var(--accent); text-underline-offset: 4px; }
::selection { background: var(--accent); color: var(--paper); }
:focus-visible { outline: var(--px) solid var(--chosen-rim); outline-offset: var(--px); }
html { scrollbar-color: var(--rim) var(--paper); }
kbd { font: inherit; }

.skip {
  position: absolute; left: 8px; top: -64px; z-index: 50;
  padding: 8px 16px; background: var(--accent); color: var(--paper);
}
.skip:focus { top: 8px; }

/* ---------- the plate: outline, gold rim, night fill, cut at an angle ---------- */
.plate {
  --cut: calc(var(--px) * 6);
  --o: var(--shadow);
  --r: var(--rim);
  --f: var(--paper);
  --t: var(--ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-width: 18rem;
  padding: calc(var(--px) * 4) calc(var(--px) * 9) calc(var(--px) * 4) calc(var(--px) * 10);
  color: var(--t);
  text-decoration: none;
  isolation: isolate;
  font-size: var(--type);
  line-height: var(--lh);
}
.plate::before,
.plate::after {
  content: "";
  position: absolute;
  z-index: -1;
  clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
}
/* the outline and the rim are one layer each: outline outermost, the rim one pixel in */
.plate::before { inset: 0; background: var(--o); }
.plate::after {
  inset: var(--px);
  background:
    linear-gradient(var(--f), var(--f)) padding-box;
  border: var(--px) solid var(--r);
  clip-path: polygon(calc(var(--cut) - var(--px)) 0, 100% 0, calc(100% - var(--cut) + var(--px)) 100%, 0 100%);
}
.plate__key { color: var(--accent); }
.plate--chosen { --r: var(--chosen-rim); --f: var(--accent); --t: var(--paper); }
.plate--chosen .plate__key { color: var(--paper); }
.plate--soon { --r: var(--raised); --t: var(--dim); cursor: default; }
.plate--soon .plate__key { color: var(--dim); }
a.plate:hover { --r: var(--chosen-rim); }
a.plate:hover:not(.plate--chosen) { --f: var(--raised); }
a.plate:active { transform: translateY(var(--px)); }

.nameplate {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  padding: 0 calc(var(--px) * 3);
  white-space: nowrap;
  font-size: 16px;
  line-height: 24px;
  color: var(--ink);
  background: var(--paper);
  border: var(--px) solid var(--rim);
  outline: var(--px) solid var(--shadow);
}
/* a crew's names in the game's partner green, no extra mark beside them */
.nameplate--crew { color: #62c370; }

/* ---------- top bar ---------- */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 24px;
  pointer-events: none;
}
.topbar a { pointer-events: auto; }
.topbar__home { font-family: "Tiny5", monospace; font-size: 24px; color: var(--ink); text-decoration: none; opacity: 0; }
.dex .topbar__home { opacity: 1; }
.topbar__nav { display: flex; gap: 24px; }
.topbar__nav a {
  color: var(--ink); text-decoration: none;
  padding: 0 calc(var(--px) * 3);
  background: var(--paper);
  border: var(--px) solid var(--rim);
  outline: var(--px) solid var(--shadow);
}
.topbar__nav a:hover { border-color: var(--chosen-rim); }

/* ---------- the route: a piece of the Mereway the visitor walks ---------- */
/* The game's overworld is its pixel art set out as a small lit diorama (HD-2D): the ground seen in
   perspective from above, whoever stands on it a card casting the sun's shadow, then haze, the
   light of the hour, a vignette and drifting motes. None of it is painted into the art: the art is
   drawn flat at a whole multiple, and the stage lays the light over it. */
.route {
  position: relative;
  background: var(--grass-deep);
  --tilt: 26deg;            /* the camera's look down the road */
  --lift: 1.11;             /* the ground stretched up so a painted tree keeps its height */
  --zoom: 1;
  --haze: #b9d6c4;          /* the far air by day */
  --sky: #8fbfd8;
  --tint: #ece9d6;          /* the light of the hour, multiplied over the stage */
  --sun: rgb(255 222 150 / 0.42);
  --shade: 0.34;            /* how dark the sun's shadows fall */
  --lamp: 0px;              /* the keeper's lantern, by night */
}
.route__stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  outline: none;
  perspective: 2200px;
  perspective-origin: 50% 25%;
  /* the sky past the far set, and the dark of the forest past the map's south edge */
  background: linear-gradient(var(--sky), var(--haze) 40%, #16301f 62%);
}
.route__world {
  position: absolute;
  inset: 0;
  transform-origin: 50% 82%;
  transform: rotateX(var(--tilt)) scaleY(var(--lift)) scale(var(--zoom));
  transition: transform 1100ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.route__map {
  position: absolute;
  left: 0; top: 0;
  width: calc(1024px * var(--s));
  height: calc(1280px * var(--s));
  transform-origin: 0 0;
  /* without script: the camera stands at the road's south end, by the arrival tile */
  transform: translate(calc(50vw - (var(--spawn-x) * 16px + 8px) * var(--s)), calc(100svh - 1280px * var(--s)));
  will-change: transform;
}
.route__ground { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* the water turns as the game turns its tiles: whole frames on one clock, never a fade. The sheet
   holds a clear slot (the ground's own frame) and then each later frame of the moving cells. */
.route__water {
  position: absolute; inset: 0;
  background: var(--water) 0 0 / 100% calc(100% * var(--frames)) no-repeat;
  image-rendering: pixelated;
  animation: water-turn calc(var(--beat) * var(--frames)) steps(var(--frames), jump-none) infinite;
}
@keyframes water-turn { to { background-position: 0 100%; } }
@media (prefers-reduced-motion: reduce) { .route__water { animation: none; } }
/* what stands on the map (trees, houses, rocks) casts the sun's shadow on the ground, short and to
   the lower right, soft at its edge */
.route__ground--shadow {
  filter: brightness(0) blur(calc(1.5px * var(--s)));
  opacity: calc(var(--shade) * 1.2);
  transform: translate(calc(5px * var(--s)), calc(6px * var(--s)));
}
/* What stands: a band per row of tiles its objects stand on, at that row's depth among whoever
   walks the map. `.route__standing` makes no stacking context of its own, so its bands and the
   walkers are stacked together. */
.route__standing { position: absolute; inset: 0; pointer-events: none; }
.route__standing i {
  position: absolute;
  left: calc(var(--x) * 1px * var(--s));
  top: calc(var(--y) * 1px * var(--s));
  width: calc(var(--w) * 1px * var(--s));
  height: calc(var(--h) * 1px * var(--s));
  background: var(--sheet) 0 calc(var(--sy) * -1px * var(--s)) / calc(var(--sw) * 1px * var(--s)) auto no-repeat;
  image-rendering: pixelated;
}

/* Whoever stands on a tile: feet on the tile's bottom edge, the picture centred on it. The picture
   is drawn by ::after and its shadow by ::before, both from the same frame of the same sheet
   (--img, --size, --pos), the shadow laid down behind the feet toward the lower right, away from
   the sun in the upper left. */
.standee, .route__you, .wild {
  --img: var(--sheet);
  --size: 100% auto;
  --pos: 0 0;
  --flip: 1;
  position: absolute;
  margin: 0;
}
.standee::before, .standee::after,
.route__you::before, .route__you::after,
.wild::before, .wild::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--img) var(--pos) / var(--size) no-repeat;
  image-rendering: pixelated;
  transform-origin: 50% calc(100% - 2px * var(--s));
}
.standee::after, .route__you::after, .wild::after { transform: scaleX(var(--flip)); }
.standee::before, .route__you::before, .wild::before {
  filter: brightness(0) blur(calc(0.5px * var(--s)));
  opacity: var(--shade);
  transform: skewX(42deg) scaleY(-0.4) scaleX(var(--flip));
}
.standee {
  width: calc(32px * var(--s));
  height: calc(32px * var(--s));
  left: calc((var(--tx) * 16px - 8px) * var(--s));
  top: calc((var(--ty) * 16px - 14px) * var(--s));
  z-index: calc(var(--ty) * 16 + 16);
}
.standee--keeper {
  --img: var(--keeper-idle);
  --size: calc(32px * var(--s)) calc(128px * var(--s));
}
.standee__lines {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; margin: 0;
}
.wild {
  width: calc(var(--fw) * 1px * var(--s));
  height: calc(var(--fh) * 1px * var(--s));
}
.route__you {
  --img: var(--idle);
  --size: calc(32px * var(--s)) calc(128px * var(--s));
  --pos: 0 calc(-96px * var(--s));
  z-index: calc(var(--spawn-y) * 16 + 16);
  width: calc(32px * var(--s));
  height: calc(32px * var(--s));
  left: calc((var(--spawn-x) * 16px - 8px) * var(--s));
  top: calc((var(--spawn-y) * 16px - 14px) * var(--s));
}
/* the nameplate stands over the card, upright */
.standee .nameplate { z-index: 1; }

/* the air and the light over the stage, in screen space */
.route__haze, .route__light, .route__sun, .route__vignette, .route__motes {
  position: absolute; inset: 0; pointer-events: none;
}
.route__haze {
  background: linear-gradient(color-mix(in srgb, var(--haze) 70%, transparent) 0%, color-mix(in srgb, var(--haze) 25%, transparent) 14%, transparent 34%);
}
.route__light {
  mix-blend-mode: multiply;
  background: radial-gradient(circle at var(--lx, 50%) var(--ly, 58%), var(--lamp-ink, #fff) 0, var(--lamp-ink, #fff) var(--lamp), var(--tint) calc(var(--lamp) * 2.4 + 1px));
  transition: background-color 900ms;
}
.route__sun {
  mix-blend-mode: screen;
  background: radial-gradient(ellipse 70% 60% at 8% 0%, var(--sun), transparent 70%);
}
.route__vignette {
  background: radial-gradient(ellipse 75% 70% at 50% 52%, transparent 58%, rgb(8 10 22 / 0.5) 100%);
}
.route__motes { width: 100%; height: 100%; }

/* the hours, as the game's day goes: dawn, noon, dusk and night */
.route__stage[data-light="dawn"] {
  --haze: #e4c9c4; --sky: #b7a6cf; --tint: #f6dcd6; --sun: rgb(255 190 170 / 0.4); --shade: 0.26;
}
.route__stage[data-light="dusk"] {
  --haze: #d9a27a; --sky: #6d4f8f; --tint: #e9b48e; --sun: rgb(255 160 90 / 0.45); --shade: 0.3;
}
.route__stage[data-light="night"] {
  --haze: #22305a; --sky: #0d1430; --tint: #4a5a9a; --sun: transparent; --shade: 0.12;
  --lamp: calc(34px * var(--s)); --lamp-ink: #ffe2b0;
}

/* a wild Terathoi met: the camera comes down low behind the keeper, as the game's battle opens */
.route__stage.is-battle { --tilt: 44deg; --zoom: 1.16; }

@media (prefers-reduced-motion: reduce) {
  .route__world { transition: none; }
}

.hud { --inset: clamp(16px, 4vw, 64px); position: absolute; inset: 0; pointer-events: none; z-index: 5000; }
.hud a, .hud button { pointer-events: auto; }
/* the title banner keeps the screen's margin on both of its sides, the same as the commands under
   it, so the HUD's two blocks frame the map from one inset */
.hud__title {
  position: absolute;
  left: var(--inset);
  top: var(--inset);
  padding: calc(var(--px) * 6) calc(var(--px) * 16) calc(var(--px) * 7) calc(var(--px) * 12);
  isolation: isolate;
  max-width: calc(100vw - 32px);
}
.hud__title::before,
.hud__title::after {
  content: ""; position: absolute; z-index: -1;
  clip-path: polygon(calc(var(--px) * 10) 0, 100% 0, calc(100% - var(--px) * 10) 100%, 0 100%);
}
.hud__title::before { inset: 0; background: var(--shadow); }
.hud__title::after { inset: var(--px); background: var(--paper); border: var(--px) solid var(--rim); }
/* Tiny5 is drawn on a grid of 8: the name steps through whole multiples of it, never between them */
.hud__name {
  margin: 0;
  font: 400 96px / 1 "Tiny5", monospace;
  color: var(--accent);
  text-transform: uppercase;
}
.hud__tagline {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: var(--px) solid var(--rim);
  font-size: 24px;
  line-height: 1.4;
}
@media (max-width: 1200px) {
  .hud__name { font-size: 80px; }
}
.hud__menu {
  position: absolute;
  left: var(--inset);
  bottom: var(--inset);
  display: grid;
  gap: calc(var(--px) * 3);
}
/* the hour of the stage's light, a command under the others */
.hud__hour[hidden] { display: none; }
.hud__hint {
  position: absolute;
  left: 50%; bottom: 16px;
  transform: translateX(-50%);
  margin: 0;
  white-space: nowrap;
  color: var(--ink);
  text-shadow: 0 var(--px) 0 var(--shadow);
  transition: opacity 400ms ease-out;
}
.hud__hint kbd { color: var(--accent); }
.hud__hint.is-done { opacity: 0; }
.route:not(.is-live) .hud__hint { display: none; }

/* the game's text box */
.dialogue {
  position: absolute;
  z-index: 6000;
  left: 50%;
  bottom: clamp(24px, 7vh, 72px);
  transform: translateX(-50%);
  width: min(720px, calc(100vw - 32px));
  margin: 0;
  padding: calc(var(--px) * 6) calc(var(--px) * 10) calc(var(--px) * 8);
  background: var(--paper);
  border: var(--px) solid var(--rim);
  outline: var(--px) solid var(--shadow);
}
.dialogue[hidden], .encounter[hidden], .ending[hidden] { display: none; }
.dialogue__who { margin: 0 0 8px; color: var(--accent); }
.dialogue__line { margin: 0; font-size: 16px; line-height: 24px; min-height: 48px; }
.dialogue__more {
  position: absolute;
  right: calc(var(--px) * 8);
  bottom: calc(var(--px) * 4);
  width: calc(var(--px) * 4);
  height: calc(var(--px) * 3);
  background: var(--accent);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  animation: more 800ms steps(2) infinite;
}
@keyframes more { 50% { transform: translateY(var(--px)); } }

/* the encounter: the battle is fought on the map's own stage, as in the game */
.encounter { position: absolute; inset: 0; z-index: 7000; }
.encounter__flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.encounter__field { position: absolute; inset: 0; background: rgb(11 13 23 / 0.32); }
/* the battle takes the light of the hour, as the game's battle takes its map's */
.encounter__field::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--tint);
  mix-blend-mode: multiply;
}
.encounter__foe, .encounter__you { filter: drop-shadow(calc(4px * var(--s)) calc(2px * var(--s)) 0 rgb(8 10 22 / 0.28)); }
.encounter__platform, .encounter__foe, .encounter__you { position: absolute; height: auto; image-rendering: pixelated; }
.encounter__platform--far { width: calc(128px * var(--s)); right: 14vw; top: calc(38vh + 80px * var(--s)); }
.encounter__foe { width: calc(96px * var(--s)); right: calc(14vw + 16px * var(--s)); top: calc(38vh - 4px * var(--s)); }
.encounter__platform--near { width: calc(144px * var(--s)); left: 12vw; top: calc(60vh + 54px * var(--s)); }
.encounter__you { width: calc(96px * var(--s)); left: calc(12vw + 24px * var(--s)); top: calc(60vh - 34px * var(--s)); }
.encounter__box, .ending {
  position: absolute;
  left: 50%;
  bottom: clamp(24px, 7vh, 72px);
  transform: translateX(-50%);
  width: min(760px, calc(100vw - 32px));
  padding: calc(var(--px) * 6) calc(var(--px) * 10);
  background: var(--paper);
  border: var(--px) solid var(--rim);
  outline: var(--px) solid var(--shadow);
}
.encounter__box { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.encounter__text { margin: 0; font-size: 24px; line-height: 32px; }
.encounter__plates, .ending__plates { display: flex; flex-wrap: wrap; gap: 12px; }
.encounter__plates .plate, .ending__plates .plate { min-width: 0; }
.ending { z-index: 7000; }
.ending__title { margin: 0 0 8px; font: 400 32px / 1.1 "Tiny5", monospace; color: var(--accent); }
.ending__line { margin: 0 0 20px; max-width: 56ch; }
button.plate { border: 0; background: none; font: inherit; cursor: pointer; }

/* the pad, on touch screens only */
.pad { display: none; }
@media (pointer: coarse) {
  .is-live .pad {
    position: absolute;
    z-index: 6500;
    left: 0; right: 0; bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 16px;
    pointer-events: none;
  }
  .pad__cross { position: relative; width: 144px; height: 144px; pointer-events: auto; }
  .pad__key, .pad__a {
    position: absolute;
    width: 48px; height: 48px;
    border: var(--px) solid var(--rim);
    outline: var(--px) solid var(--shadow);
    background: rgb(27 33 54 / 0.86);
    touch-action: none;
    -webkit-user-select: none; user-select: none;
  }
  .pad__key::after {
    content: ""; position: absolute; inset: 0; margin: auto;
    width: 14px; height: 10px; background: var(--accent);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
  }
  .pad__key:active, .pad__a:active { background: var(--raised); }
  .pad__key--up { left: 48px; top: 0; }
  .pad__key--down { left: 48px; top: 96px; }
  .pad__key--down::after { transform: rotate(180deg); }
  .pad__key--left { left: 0; top: 48px; }
  .pad__key--left::after { transform: rotate(-90deg); }
  .pad__key--right { left: 96px; top: 48px; }
  .pad__key--right::after { transform: rotate(90deg); }
  .pad__a {
    position: relative;
    width: 72px; height: 72px; border-radius: 50%;
    margin-bottom: 36px;
    color: var(--accent);
    font: 400 24px / 1 "Tiny5", monospace;
    pointer-events: auto;
  }
  .is-live .hud__hint { display: none; }
  /* on a touch screen the pad has the foot of the screen: the commands go, the hour too */
  .is-live .hud__menu { display: none; }
  .is-live .dialogue { bottom: 184px; }
  .is-live .encounter__box, .is-live .ending { bottom: 184px; }
}

/* under the scene, the follow plates stand again for whoever did not see them over the map */
.route-cta {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: center;
  padding: 24px 16px;
  background: var(--paper);
  border-top: var(--px) solid var(--rim);
  border-bottom: var(--px) solid var(--rim);
}

/* ---------- sections below the road ---------- */
.heading {
  margin: 0 0 16px;
  font: 400 clamp(32px, 4.5vw, 56px) / 1.05 "Tiny5", monospace;
  color: var(--accent);
  text-wrap: balance;
}
.lead { margin: 0; max-width: 60ch; color: var(--ink); font-size: 16px; line-height: 24px; }

.roster {
  padding: clamp(96px, 14vh, 160px) clamp(16px, 5vw, 80px) clamp(72px, 10vh, 120px);
  background:
    linear-gradient(var(--grass-deep), var(--grass-deep));
}
.roster--page { padding-top: 120px; min-height: 100vh; }
.roster__head { max-width: 960px; margin: 0 auto 56px; }
.roster__list {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: 1200px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(208px, 1fr));
  gap: 40px 24px;
}
.mon {
  display: grid;
  justify-items: center;
  gap: 4px;
  text-decoration: none;
  color: var(--ink);
}
.mon__stage {
  position: relative;
  display: grid; place-items: end center;
  width: 192px; height: 208px;
  background: url("../img/platform-far.png") center bottom / 192px auto no-repeat;
  image-rendering: pixelated;
}
.mon__art { width: 192px; height: 192px; margin-bottom: 10px; transition: transform 160ms steps(2); }
.mon:hover .mon__art, .mon:focus-visible .mon__art { transform: translateY(-6px); }
.mon__no { margin: 8px 0 0; color: var(--dim); font-size: 16px; }
.mon__name { font: 400 32px / 1 "Tiny5", monospace; color: var(--ink); }
.mon:hover .mon__name { color: var(--accent); }
.mon__types { display: flex; gap: 8px; margin: 4px 0 0; }
.chip {
  padding: 0 8px;
  font-size: 16px; line-height: 24px;
  color: var(--paper);
  background: var(--type-ink, var(--edge));
  outline: 2px solid var(--shadow);
}
.chip--neutral { --type-ink: #b9b4a3; }
.chip--ember { --type-ink: #ea6a3c; }
.chip--aqua { --type-ink: #469fe3; }
.chip--verdant { --type-ink: #5db85a; }
.chip--spark { --type-ink: #f1d343; }
.chip--terra { --type-ink: #b58552; }
.chip--gale { --type-ink: #8fd6cf; }
.chip--umbra { --type-ink: #906bd0; }
.chip--brawn { --type-ink: #d06a4c; }

/* the game's own screenshots: the same art on its lit stage */
.stage {
  padding: clamp(80px, 12vh, 140px) clamp(16px, 5vw, 80px);
  background: var(--backdrop);
}
.stage__head { max-width: 1200px; margin: 0 auto 48px; }
.stage__shots {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: 1200px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 32px;
}
.stage__shot { margin: 0; }
.stage__shot img {
  display: block; width: 100%; height: auto;
  padding: var(--px);
  background: var(--rim);
  outline: var(--px) solid var(--shadow);
  image-rendering: auto;
}
.stage__caption { margin: 16px 0 0; color: var(--dim); }

.shared {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  padding: clamp(80px, 12vh, 140px) clamp(16px, 5vw, 80px);
  background: var(--paper);
}
.shared__shot {
  padding: var(--px);
  background: var(--rim);
  outline: var(--px) solid var(--shadow);
}
.shared__shot img { display: block; width: 100%; height: auto; image-rendering: auto; }
.facts { margin: 24px 0 0; display: grid; gap: 20px; }
.facts__row { display: grid; gap: 4px; }
.facts dt { color: var(--accent); }
.facts dd { margin: 0; max-width: 46ch; }

.dusk {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(24px, 5vw, 72px);
  padding: clamp(80px, 12vh, 140px) clamp(16px, 5vw, 80px);
  background: #1a1030;
}
.dusk__art { width: 288px; height: 288px; flex: none; }
.dusk .heading { color: #c9a7ff; }

.footer {
  padding: 72px clamp(16px, 5vw, 80px) 40px;
  background: var(--backdrop);
  border-top: var(--px) solid var(--rim);
}
.footer__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; max-width: 1200px; margin: 0 auto; }
.footer__line { margin: 0; font: 400 32px / 1.1 "Tiny5", monospace; color: var(--ink); }
.footer__plates { display: flex; flex-wrap: wrap; gap: 16px; }
.footer__small { max-width: 1200px; margin: 48px auto 0; color: var(--dim); font-size: 16px; }

/* ---------- a Terathoi's page ---------- */
.entry {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 6vw, 96px);
  padding: 120px clamp(16px, 6vw, 96px) 80px;
  background: var(--grass-deep);
}
.entry__stage { position: relative; justify-self: center; width: 432px; height: 400px; }
.entry__platform { position: absolute; left: 0; bottom: 0; width: 432px; height: auto; }
.entry__art { position: absolute; left: 72px; bottom: 30px; width: 288px; height: 288px; }
.entry__card {
  padding: calc(var(--px) * 10) calc(var(--px) * 12);
  background: var(--paper);
  border: var(--px) solid var(--rim);
  outline: var(--px) solid var(--shadow);
}
.entry__name { margin: 8px 0 12px; font: 400 clamp(48px, 6vw, 80px) / 1 "Tiny5", monospace; color: var(--accent); }
.entry__line { margin: 24px 0 8px; font-size: 24px; line-height: 32px; max-width: 34ch; }
.entry__where { margin: 0 0 32px; color: var(--dim); }
.entry__nav { display: flex; flex-wrap: wrap; gap: 12px; }
.entry__nav .plate { min-width: 0; }

@media (max-width: 900px) {
  .hud { --inset: 16px; }
  .hud__title { padding: 14px 32px 16px 28px; }
  .hud__name { font-size: 64px; }
  .hud__tagline { margin-top: 10px; padding-top: 10px; font-size: 16px; }
  /* the hint line takes the foot of a narrow screen: the commands stand over it */
  .hud__menu { right: var(--inset); bottom: 56px; }
  .hud__menu .plate { min-width: 0; }
  .hud__hour { display: none; }
  .topbar__nav { display: none; }
  .shared { grid-template-columns: 1fr; }
  .stage__shots { grid-template-columns: 1fr; }
  .dusk { flex-direction: column; text-align: left; }
  .dusk__art { width: 192px; height: 192px; }
  .entry { grid-template-columns: 1fr; padding-top: 88px; }
  .entry__stage { width: 288px; height: 272px; }
  .entry__platform { width: 288px; }
  .entry__art { left: 48px; width: 192px; height: 192px; bottom: 20px; }
  .encounter__box { flex-direction: column; align-items: stretch; }
  .encounter__platform--far { right: 0; top: 22vh; }
  .encounter__foe { right: calc(16px * var(--s)); top: calc(22vh - 80px * var(--s)); }
  .encounter__platform--near { left: -24px; top: 46vh; }
  .encounter__you { left: calc(16px * var(--s)); top: calc(46vh - 66px * var(--s)); }
  .hud__hint { white-space: normal; text-align: center; width: calc(100vw - 32px); }
}

@media (prefers-reduced-motion: reduce) {
  .mon__art { transition: none; }
  .dialogue__more { animation: none; }
}

/* while a battle or the ending is up, the HUD steps aside */
.route:has(.encounter:not([hidden]), .ending:not([hidden])) .hud { visibility: hidden; }

/* ---------- the analytics question: a card at the foot of the screen, over everything ---------- */
.consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9000;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 960px; margin: 0 auto; padding: 16px 24px;
  background: var(--paper); color: var(--ink);
  border: var(--px) solid var(--rim); outline: var(--px) solid var(--shadow);
}
.consent[hidden] { display: none; }
.consent__line { margin: 0; flex: 1 1 22rem; font-size: var(--type); line-height: var(--lh); }
.consent__answers { display: flex; flex-wrap: wrap; gap: 12px; }
.consent .plate { min-width: 0; border: 0; background: none; font: inherit; cursor: pointer; }
button.plate:hover { --r: var(--chosen-rim); }
button.plate:hover:not(.plate--chosen) { --f: var(--raised); }
.footer__link { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.footer__link[hidden] { display: none; }

/* ---------- loading: the map's name over a bar, until the stage's pictures and data are in ---------- */
.route__loading {
  position: absolute; inset: 0; z-index: 5500;
  display: grid; place-content: center; justify-items: center; gap: 16px;
  background: var(--paper);
  transition: opacity 400ms;
}
.route__loading[hidden] { display: none; }
.route:not(.is-loading) .route__loading { opacity: 0; pointer-events: none; }
/* Chicabo walks toward the visitor on the spot, its two frames of the down row, 4 px a texel */
.route__loading-walker {
  width: 96px; height: 96px;
  background: var(--sheet) 0 0 / 192px auto no-repeat;
  image-rendering: pixelated;
  animation: chicabo-walk 500ms steps(1) infinite;
}
@keyframes chicabo-walk { 50% { background-position: -96px 0; } }
.route__loading-bar {
  width: min(320px, 70vw); height: calc(var(--px) * 6);
  padding: var(--px); background: var(--shadow);
  border: var(--px) solid var(--rim);
}
.route__loading-fill {
  height: 100%; background: var(--accent);
  transform-origin: 0 50%; transform: scaleX(var(--done, 0));
  transition: transform 200ms steps(4);
}
/* the command keys are the game's, on a keyboard and once the scene can hear them */
.route:not(.is-live) .hud__menu kbd.plate__key { display: none; }
@media (prefers-reduced-motion: reduce) {
  .route__loading, .route__loading-fill { transition: none; }
  .route__loading-walker { animation: none; }
}

/* the menus' cursor, as in the game: a Vessel crystal beside the command it is on, a base pixel of
   sway; it marks the plate under the pointer, the one with the keyboard and one just pressed */
.hud__menu .plate__label::before,
.ending__plates .plate__label::before {
  content: "";
  position: absolute;
  left: calc(var(--px) * -11);
  top: 50%;
  width: calc(var(--px) * 9);
  height: calc(var(--px) * 9);
  margin-top: calc(var(--px) * -4.5);
  background: url("../img/cursor.png") 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
  /* a base pixel of the palette's shadow under it, so it reads over the map's leaves */
  filter: drop-shadow(0 var(--px) 0 var(--shadow)) drop-shadow(var(--px) 0 0 var(--shadow));
  opacity: 0;
  pointer-events: none;
}
.hud__menu .plate:hover .plate__label::before,
.hud__menu .plate:focus-visible .plate__label::before,
.hud__menu .plate.is-pressed .plate__label::before,
.ending__plates .plate.is-current .plate__label::before {
  opacity: 1;
  animation: cursor-sway 640ms steps(1) infinite;
}
@keyframes cursor-sway { 50% { transform: translateX(calc(var(--px) * -1)); } }
.hud__menu .plate--soon .plate__label::before,
.ending__plates .plate--soon .plate__label::before { display: none; }
/* in the box at the bridge the cursor's plate is the chosen one, gold, as in the game's menus */
.ending__plates .plate.is-current { --r: var(--chosen-rim); --f: var(--accent); --t: var(--paper); }
.ending__plates .plate.is-current .plate__key { color: var(--paper); }
.ending__plates .plate:focus-visible { outline: none; }
/* room between the plates for the cursor, which stands left of its plate */
.ending__plates { column-gap: calc(var(--px) * 14); padding-left: calc(var(--px) * 12); }
/* a command pressed by its key lights gold and sinks a pixel before it goes */
.plate.is-pressed { --r: var(--chosen-rim); --f: var(--accent); --t: var(--paper); transform: translateY(var(--px)); }
.plate.is-pressed .plate__key { color: var(--paper); }
@media (prefers-reduced-motion: reduce) {
  .hud__menu .plate .plate__label::before { animation: none; }
}

/* a phone: the banner is a band across the top, one margin all round, the name a step smaller */
@media (max-width: 520px) {
  .hud__title { right: var(--inset); }
}
@media (max-width: 420px) {
  .hud__name { font-size: 56px; }
}