@font-face {
  font-family: "Press Start 2P";
  src: url("/fonts/press-start-2p-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Terminal body face for the sub-pages (VT323, OFL); never requested by home. */
@font-face {
  font-family: "VT323";
  src: url("/fonts/vt323-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0b1530;
  --bg-deep: #070d20;
  --ink: #040916;
  --night: #02050f;
  --text: #f3f6ff;
  --text-dim: #c3cde8;
  --cyan: #4fd8ff;
  --cyan-strong: #8ce6ff;
  --magenta: #ff5fd2;
  --amber: #ffc861;
  --violet: #2a1f74;
  --error: #ffb3b3;
  --success: #a6f4c5;
  --line: rgba(140, 230, 255, 0.6);
  --panel: rgba(4, 9, 22, 0.76);
  --focus: #ffe08a;
  --px: 3px; /* one "pixel" of UI framing */
  --pixel: "Press Start 2P", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --term: "VT323", ui-monospace, "Cascadia Mono", Consolas, monospace;
  /* The game's panel language: 3px neon edge, stepped pixel corners, soft outer glow. */
  --neon: #3ec8ff;
  --neon-dim: #2a86b8;
  --neon-glow: drop-shadow(0 0 5px rgb(62 200 255 / 0.5));
  --panel-fill: rgb(4 12 36 / 0.9);
  --px-clip: polygon(6px 0, calc(100% - 6px) 0, calc(100% - 6px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 3px) calc(100% - 6px), calc(100% - 3px) calc(100% - 3px), calc(100% - 6px) calc(100% - 3px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 3px), 3px calc(100% - 3px), 3px calc(100% - 6px), 0 calc(100% - 6px), 0 6px, 3px 6px, 3px 3px, 6px 3px);
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  /* In-game UI palette, sampled from the game's screen mockups and cover art. */
  --ui-void: #000916;
  --ui-void-2: #010e23;
  --ui-select: #0d285b;
  --ui-edge: #49759d;
  --ui-edge-hi: #86aacb;
  --ui-select-edge: #3e8cff;
  --ui-magenta-edge: #c484c9;
  --ui-magenta-fill: #200134;
  --ui-magenta-mid: #854b93;
  --world-sky: #03103a;
  --world-blue: #113988;
  --lantern: #f6d77c;
  --hero-eye: #ffd84a;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  min-height: 100vh;
  min-height: 100svh;
  background: var(--bg);
  color: var(--text);
  font: 400 1rem/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

a { color: var(--cyan-strong); text-underline-offset: 0.18em; }
a:hover { color: #fff; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 8-bit frame: square block borders plus side bars set one pixel outside the box, leaving the four
   corner pixels open (stepped corners). Technique ported from 8bitcn's Input/Button — see the
   signup credit below. Colour comes from --frame. */
.px-frame {
  position: relative;
  border: 0;
  border-block: var(--px) solid var(--frame, var(--line));
  border-radius: 0;
}
.px-frame::before {
  content: "";
  position: absolute;
  inset: 0 calc(var(--px) * -1);
  border-inline: var(--px) solid var(--frame, var(--line));
  pointer-events: none;
}

/* ---------- Stage: the world ---------- */

.stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--bg-deep);
}

.stage__world, .stage picture, .stage__poster, .stage__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.stage__world { transform-origin: 62% 55%; }

.stage__poster, .stage__video {
  object-fit: cover;
  object-position: 68% 50%;
}

.stage__video {
  opacity: 0;
  transition: opacity 400ms ease;
}

.stage.is-playing .stage__video { opacity: 1; }

/* Cinematic grade: left-hand read zone, floor fade, top fade, edge vignette. */
.stage__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 9, 22, 0.9) 0%, rgba(4, 9, 22, 0.74) 30%, rgba(4, 9, 22, 0.14) 56%, rgba(4, 9, 22, 0) 70%),
    linear-gradient(0deg, rgba(4, 9, 22, 0.82) 0%, rgba(4, 9, 22, 0) 24%),
    linear-gradient(180deg, rgba(4, 9, 22, 0.45) 0%, rgba(4, 9, 22, 0) 16%),
    radial-gradient(130% 120% at 65% 45%, rgba(0, 0, 0, 0) 55%, rgba(2, 5, 15, 0.55) 100%);
}

.stage__fx, .stage__fx > span {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.stage__fx > .fx-scan {
  background: repeating-linear-gradient(180deg, rgba(2, 5, 15, 0.24) 0 1px, rgba(2, 5, 15, 0) 1px 3px);
  opacity: 0.38;
}

.stage__fx > .fx-sweep {
  inset: auto 0;
  top: -16vh;
  height: 16vh;
  opacity: 0;
  background: linear-gradient(180deg, rgba(140, 230, 255, 0) 0%, rgba(140, 230, 255, 0.08) 70%, rgba(214, 248, 255, 0.42) 97%, rgba(140, 230, 255, 0) 100%);
}

.stage__fx > .fx-bar {
  inset: auto 0;
  height: 11%;
  background: var(--night);
  transform: scaleY(0);
}
.stage__fx > .fx-bar--top { top: 0; transform-origin: 50% 0; }
.stage__fx > .fx-bar--bottom { bottom: 0; transform-origin: 50% 100%; }

.stage__fx > .fx-flash {
  opacity: 0;
  background: radial-gradient(80% 80% at 60% 50%, rgba(214, 248, 255, 0.9), rgba(79, 216, 255, 0.35) 60%, rgba(255, 95, 210, 0.2));
}

.stage__fx > .fx-veil { opacity: 0; background: var(--night); }

/* Before the motion layer takes over (at most 1.1 s, see boot.js): world dark, UI held back. */
.intro .stage__fx > .fx-veil { opacity: 1; }
.intro .stage__fx > .fx-bar { transform: scaleY(1); }
.intro .content > *, .intro .footer { opacity: 0; }

/* ---------- Foreground ---------- */

.content {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: min(46rem, 100%);
  padding: clamp(1.5rem, 6vh, 4rem) 1rem 0.5rem clamp(1rem, 5vw, 5rem);
  container-type: inline-size;
}

/* The name and PRESS START hold the middle of the read zone; the mailing list sits low. */
.hero {
  width: 100%;
  margin-block: auto;
  padding-bottom: 2rem;
}

.title {
  margin: 0 0 1.1rem;
  /* 13 monospace glyphs: size to the column so the name never breaks mid-word. */
  font: 400 min(3.25rem, 7.1cqi)/1.15 var(--pixel);
  white-space: nowrap;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  text-shadow:
    0 0 1px #fff,
    0.065em 0.065em 0 var(--violet),
    0.13em 0.13em 0 rgba(255, 95, 210, 0.3),
    0 0 0.45em rgba(255, 95, 210, 0.5),
    0 0 0.9em rgba(79, 216, 255, 0.35);
}

.title__ch { display: inline-block; }

.tagline {
  margin: 0 0 1.75rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font: 400 clamp(0.75rem, 1.15vw, 0.95rem)/1.6 var(--pixel);
  color: var(--cyan-strong);
  text-shadow: 0 0 12px rgba(79, 216, 255, 0.45), 0 2px 0 #000;
}

/* A short HUD rule leading the line. */
.tagline::before {
  content: "";
  flex: 0 0 auto;
  width: 2.25rem;
  height: var(--px);
  background: linear-gradient(90deg, var(--magenta) 0 33%, var(--cyan) 33% 100%);
  box-shadow: 0 0 10px rgba(79, 216, 255, 0.6);
}

.lede {
  margin: 0 0 1.5rem;
  max-width: 32rem;
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.6;
  color: var(--text);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

/* ---------- PRESS START ---------- */

.press-start {
  --frame: var(--magenta);
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 3.5rem;
  margin: 0 0 1.75rem var(--px);
  padding: 0.95rem 1.6rem 0.95rem 1.35rem;
  background: linear-gradient(180deg, rgba(42, 31, 116, 0.6), rgba(4, 9, 22, 0.9));
  color: #fff;
  font: 400 clamp(0.95rem, 1.5vw, 1.2rem)/1 var(--pixel);
  letter-spacing: 0.06em;
  cursor: pointer;
  text-shadow: 0 0 10px rgba(79, 216, 255, 0.7);
  filter: drop-shadow(0 0 14px rgba(255, 95, 210, 0.4)) drop-shadow(0 var(--px) 0 var(--violet));
  transition: filter 200ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.press-start:focus-visible { outline-offset: calc(var(--px) * 2 + 2px); }
.press-start[hidden] { display: none; }
.press-start__icon {
  width: 0.75em; height: 0.85em;
  background: var(--amber);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
@media (hover: hover) {
  .press-start:hover {
    --frame: #fff;
    filter: drop-shadow(0 0 22px rgba(255, 95, 210, 0.7)) drop-shadow(0 var(--px) 0 var(--violet));
  }
}
.press-start:active { translate: 0 2px; filter: drop-shadow(0 0 10px rgba(255, 95, 210, 0.5)); }
@media (prefers-reduced-motion: no-preference) {
  .press-start { animation: press-start-blink 1.6s steps(1, end) infinite; }
  .press-start:hover, .press-start:focus-visible { animation: none; }
}
@keyframes press-start-blink { 50% { --frame: var(--cyan-strong); } }

/* ---------- Mailing list: a slim bar anchored low, details deferred to a dialog ----------
   Placement follows witchbrook.com: one email field and one button set low in the composition,
   below the name and the call to action, so the world keeps the frame. The 8-bit field and button
   frames are ported from 21st.dev "8-bit Newsletter Signup" by OrcDev (8bitcn, MIT):
   https://21st.dev/@theorcdev/components/8bit-advanced3 — rebuilt in plain CSS. */

.signup {
  position: relative;
  width: 100%;
  max-width: 38rem;
}

.signup .lede { margin: 0 0 1rem; }
/* Each lede line is its own box so the motion layer can fold and reveal it (motion.js). */
.lede__line { display: inline-block; }

.signup__label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.signup__row {
  display: flex;
  gap: calc(0.75rem + var(--px) * 2);
  padding-inline: var(--px);
}

.signup__field {
  --frame: var(--line);
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  background: rgba(4, 9, 22, 0.88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: box-shadow 300ms var(--ease-out);
}
.signup__field:focus-within {
  --frame: var(--focus);
  box-shadow: 0 0 22px rgba(255, 224, 138, 0.22);
}
.signup__field:has([aria-invalid="true"]) { --frame: var(--error); }
/* After the intro ends, the bar takes the light: the next move is joining the list. */
.signup.is-calling .signup__field:not(:focus-within) {
  --frame: rgba(255, 224, 138, 0.85);
  box-shadow: 0 0 30px rgba(255, 200, 97, 0.3);
}

.signup__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 3rem;
  padding: 0.7rem 0.9rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  caret-color: var(--cyan);
  font: 500 1rem/1.3 var(--body);
}
.signup__input::placeholder { color: #8d9bc2; opacity: 1; }
/* The field frame carries the focus indicator (turns amber, 3px, with a glow). */
.signup__input:focus-visible { outline: none; }

.signup__button {
  --frame: var(--cyan-strong);
  flex: 0 0 auto;
  min-height: 3rem;
  padding: 0.75rem 1.1rem;
  background: var(--cyan);
  color: #06102a;
  font: 400 0.6875rem/1.2 var(--pixel);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  filter: drop-shadow(0 4px 0 var(--violet));
  transition: background-color 150ms, filter 150ms, translate 120ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.signup__button:focus-visible { outline-offset: calc(var(--px) * 2 + 2px); }
@media (hover: hover) {
  .signup__button:hover { --frame: #fff; background: var(--cyan-strong); translate: 0 -1px; filter: drop-shadow(0 5px 0 var(--violet)); }
}
.signup__button:active { translate: 0 3px; filter: drop-shadow(0 1px 0 var(--violet)); }
.signup__button[disabled] {
  cursor: progress;
  background: #b5ecfb;
  translate: 0 2px;
  filter: drop-shadow(0 2px 0 var(--violet));
}

/* Without JavaScript the consent text sits under the bar, before anything is sent. */
.signup__consent {
  margin: 1rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-dim);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.signup__status {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
.signup__status:not(:empty) {
  position: relative;
  margin-top: 0.9rem;
  padding-left: 1.1rem;
}
.signup__status:not(:empty)::before {
  content: "";
  position: absolute;
  left: 0; top: 0.45em;
  width: 0.5rem; height: 0.5rem;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}
.signup__status[data-tone="error"] { color: var(--error); }
.signup__status[data-tone="success"] { color: var(--success); }
.signup__status:focus { outline: none; }

.signup.is-done .signup__row { display: none; }
.signup.is-done .signup__status { margin-top: 0; }

.hp {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Confirmation dialog ---------- */

.confirm {
  width: min(34rem, calc(100% - 2rem));
  max-width: none;
  max-height: calc(100% - 2rem);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  overflow: visible;
}
.confirm::backdrop {
  background: rgba(2, 5, 15, 0.74);
  -webkit-backdrop-filter: blur(6px) saturate(0.8);
  backdrop-filter: blur(6px) saturate(0.8);
}
@media (prefers-reduced-motion: no-preference) {
  .confirm[open]::backdrop { animation: confirm-dim 260ms ease-out; }
}
@keyframes confirm-dim { from { opacity: 0; } }
.confirm.is-closing::backdrop { opacity: 0; transition: opacity 200ms ease-in; }

.confirm__panel {
  max-height: calc(100svh - 2rem);
  overflow-y: auto;
  padding: clamp(1.25rem, 4vw, 1.9rem);
  border: 1px solid rgba(140, 230, 255, 0.22);
  background:
    linear-gradient(var(--cyan), var(--cyan)) top left / 16px 3px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) top left / 3px 16px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) top right / 16px 3px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) top right / 3px 16px no-repeat,
    linear-gradient(var(--magenta), var(--magenta)) bottom left / 16px 3px no-repeat,
    linear-gradient(var(--magenta), var(--magenta)) bottom left / 3px 16px no-repeat,
    linear-gradient(var(--magenta), var(--magenta)) bottom right / 16px 3px no-repeat,
    linear-gradient(var(--magenta), var(--magenta)) bottom right / 3px 16px no-repeat,
    linear-gradient(180deg, #101b3d 0%, var(--bg-deep) 100%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 60px rgba(79, 216, 255, 0.12);
}

.confirm__title {
  margin: 0 0 1.25rem;
  font: 400 clamp(0.8125rem, 3.4vw, 0.95rem)/1.6 var(--pixel);
  color: #fff;
  text-wrap: balance;
  text-shadow: 0.1em 0.1em 0 var(--violet), 0 0 14px rgba(255, 95, 210, 0.45);
}

/* The address being joined: read-only, so it reads as a stamped line, not another field. */
.confirm__address {
  margin: 0 0 1.25rem;
  padding: 0.65rem 0.9rem;
  border-left: var(--px) solid var(--cyan);
  background: linear-gradient(90deg, rgba(79, 216, 255, 0.14), rgba(79, 216, 255, 0.03));
  color: #fff;
  font: 600 1rem/1.4 var(--body);
  overflow-wrap: anywhere;
}

.confirm .signup__consent {
  margin: 0;
  font-size: 0.875rem;
  text-shadow: none;
}

/* Optional open-tracking consent: unticked by default. */
.signup__optin {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px;
  margin: 0.6rem 0 0;
  font-size: 0.875rem;
  color: var(--text);
  cursor: pointer;
}
.signup__optin input {
  appearance: none;
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  border: 2px solid var(--cyan-strong);
  background: var(--bg-deep);
  display: grid;
  place-content: center;
  cursor: pointer;
}
.signup__optin input::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  background: var(--cyan-strong);
  transform: scale(0);
}
.signup__optin input:checked::before { transform: scale(1); }
.signup__optin input:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.confirm .signup__optin { margin-top: 0.9rem; }

.confirm__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 1rem calc(0.75rem + var(--px) * 2);
  margin-top: 1.6rem;
  padding-inline: var(--px);
}

.confirm__back {
  --frame: rgba(195, 205, 232, 0.55);
  min-height: 3rem;
  padding: 0.75rem 1.1rem;
  background: transparent;
  color: var(--text);
  font: 400 0.6875rem/1.2 var(--pixel);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 150ms;
}
.confirm__back:focus-visible { outline-offset: calc(var(--px) * 2 + 2px); }
@media (hover: hover) {
  .confirm__back:hover { --frame: #fff; background: rgba(42, 31, 116, 0.55); }
}

/* ---------- Footer HUD ---------- */

.footer {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1.4rem;
  padding: 0.6rem clamp(1rem, 5vw, 5rem) max(0.9rem, env(safe-area-inset-bottom));
  font-size: 0.8125rem;
  color: var(--text-dim);
  text-shadow: 0 1px 2px #000;
}

.footer__note { margin: 0; }
.footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--text);
  text-decoration-color: rgba(140, 230, 255, 0.5);
}
.footer__link:hover { color: var(--cyan-strong); }

.sound-toggle {
  --frame: var(--magenta);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  margin-left: auto;
  padding: 0.45rem 0.95rem;
  background: rgba(4, 9, 22, 0.82);
  color: var(--text);
  font: 600 0.8125rem/1 var(--body);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color 150ms;
}
.sound-toggle[aria-pressed="true"] { --frame: var(--cyan-strong); }
.sound-toggle[hidden] { display: none; }
@media (hover: hover) {
  .sound-toggle:hover { --frame: #fff; background: rgba(42, 31, 116, 0.65); }
}
.sound-toggle:active { translate: 0 1px; }
.sound-toggle:focus-visible { outline-offset: calc(var(--px) * 2 + 1px); }

/* ---------- Top bar: the in-game HUD strip ----------
   Built from the exploration-screen mockup: separate chamfered HUD tiles, a framed hood portrait as
   the home link, and one shared selection frame (nav.js) that glides to whichever tile is hovered or
   focused and rests on the current page. Without JavaScript the tiles carry their own hover and
   current states. On sub-pages the bar is a full-width sticky strip; on home it floats over the
   world. */

.topbar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: max(0.75rem, env(safe-area-inset-top)) clamp(1rem, 4vw, 3rem) 0.5rem;
}
.intro .topbar { opacity: 0; }

.doc-page .topbar {
  position: sticky;
  top: 0;
  min-height: 64px;
  padding-block: max(0.5rem, env(safe-area-inset-top)) 0.5rem;
  background:
    repeating-linear-gradient(0deg, rgb(255 255 255 / 0.025) 0 1px, transparent 1px 3px),
    rgb(0 9 22 / 0.92);
  box-shadow: 0 3px 0 var(--neon), 0 4px 0 var(--ui-void), 0 5px 0 rgb(62 200 255 / 0.35), 0 0 14px rgb(62 200 255 / 0.35), 0 10px 24px rgb(0 0 0 / 0.35);
}
/* 2px checker dither fading out under the strip. */
.doc-page .topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 5px);
  height: 12px;
  background: conic-gradient(rgb(0 9 22 / 0.7) 25%, transparent 0 50%, rgb(0 9 22 / 0.7) 0 75%, transparent 0) 0 0 / 4px 4px;
  -webkit-mask: linear-gradient(#000, transparent);
  mask: linear-gradient(#000, transparent);
  pointer-events: none;
}

.topbar__home {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  min-width: 44px;
  color: #fff;
  text-decoration: none;
}
/* Two-tone logotype like the game header: ATTACK in magenta, PATHMAN in cyan, hard pixel shadow. */
.topbar__name {
  font: 400 1.125rem/1.2 var(--pixel);
  color: #ff5fd8;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 #3a0a4f, 0 0 10px rgb(255 95 216 / 0.35);
  white-space: nowrap;
}
.topbar__name-b { color: #5fe0ff; text-shadow: 2px 2px 0 #062a5c, 0 0 10px rgb(95 224 255 / 0.35); }
.topbar__home:hover .topbar__name { filter: brightness(1.15); }
.topbar__home:focus-visible { outline-offset: 3px; }

/* The hood portrait tile (dialog-box portrait frame): a 1x sprite shown at 2x, face only. */
.hud-face {
  --c: 6px;
  position: relative;
  flex: 0 0 auto;
  display: block;
  width: 44px;
  height: 44px;
  filter: var(--neon-glow);
}
.hud-face::before, .hud-face::after {
  content: "";
  position: absolute;
  clip-path: var(--px-clip);
}
.hud-face::before { inset: 0; background: var(--neon); }
.hud-face::after {
  --c: 5px;
  inset: 3px;
  background: url("/media/hero-sprite.png") -22px -10px / 64px 114px no-repeat, var(--ui-select);
  image-rendering: pixelated;
}
/* Eyelids for the idle blink (nav.js toggles .is-blinking): face colour over the two yellow eyes.
   The sprite is 2x with its origin at 3 - 22 = -19px, so sprite eye pixels x 18-20 and 25-26,
   y 14-18 land at x 17-22 and 31-34, y 21-30 in this tile. */
.hud-face__lids {
  position: absolute;
  z-index: 1;
  left: 17px;
  top: 21px;
  width: 18px;
  height: 10px;
  background:
    linear-gradient(#0c0a1f, #0c0a1f) 0 0 / 6px 10px no-repeat,
    linear-gradient(#0c0a1f, #0c0a1f) 14px 0 / 4px 10px no-repeat;
  opacity: 0;
}
.hud-face.is-blinking .hud-face__lids, .portrait.is-blinking .portrait__lids { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hud-face.is-blinking .hud-face__lids, .portrait.is-blinking .portrait__lids { opacity: 0; }
}
.topbar__home:hover .hud-face::before { background: var(--focus); }

.topbar__nav {
  position: relative;
  isolation: isolate;
}

.topbar__menu {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each item is a HUD tile: li paints the chamfered edge and fill, the link carries the label,
   the pointer and the current-page bar. */
.topbar__menu > li {
  --c: 6px;
  position: relative;
}
.topbar__menu > li::before, .topbar__menu > li::after {
  content: "";
  position: absolute;
  z-index: 0;
  clip-path: var(--px-clip);
  pointer-events: none;
}
.topbar__menu > li::before { inset: 0; background: var(--neon-dim); }
.topbar__menu > li::after {
  --c: 5px;
  inset: 3px;
  background:
    repeating-linear-gradient(0deg, rgb(255 255 255 / 0.03) 0 1px, transparent 1px 3px),
    rgb(1 14 35 / 0.94);
}
.topbar__menu > li:has(> [aria-current])::after {
  background:
    repeating-linear-gradient(0deg, rgb(255 255 255 / 0.03) 0 1px, transparent 1px 3px),
    var(--ui-select);
}
.topbar:not(.has-selector) .topbar__menu > li:hover::before,
.topbar:not(.has-selector) .topbar__menu > li:focus-within::before { background: var(--neon); }
.topbar:not(.has-selector) .topbar__menu > li:has(> [aria-current])::before { background: var(--neon); }

.topbar__link {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.75rem 1rem 0.75rem 1.75rem;
  color: #dfe8ff;
  font: 400 1rem/1 var(--pixel);
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
}
.topbar__link:hover, .topbar__link:focus-visible, .topbar__link[aria-current] { color: #fff; }
.topbar__link:focus-visible { outline-offset: 3px; }

/* Amber pixel pointer, shown on the hovered, focused or current tile. */
.topbar__link::before {
  content: "";
  position: absolute;
  left: 0.65rem;
  top: 50%;
  width: 7px;
  height: 8px;
  margin-top: -4px;
  background: var(--hero-eye);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  filter: drop-shadow(1px 1px 0 #8a5a00);
  opacity: 0;
}
.topbar__link:hover::before, .topbar__link:focus-visible::before, .topbar__link[aria-current]::before { opacity: 1; }
/* While another tile is pointed at, the current tile's pointer gives way. */
.topbar__menu:has(.topbar__link:hover) .topbar__link[aria-current]:not(:hover)::before { opacity: 0; }

/* Current page: a lantern bar under the label. */
.topbar__link[aria-current]::after {
  content: "";
  position: absolute;
  left: 1.75rem;
  right: 1rem;
  bottom: 6px;
  height: 2px;
  background: var(--lantern);
  box-shadow: 0 0 6px rgb(246 215 124 / 0.6);
}

/* The shared selection frame (inserted by nav.js). */
.topbar__selector {
  --c: 6px;
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgb(62 200 255 / 0.65));
}
.topbar__selector.is-on { opacity: 1; }
.topbar__selector::before, .topbar__selector::after {
  content: "";
  position: absolute;
  clip-path: var(--px-clip);
}
.topbar__selector::before { inset: 0; background: var(--neon); }
.topbar__selector::after {
  --c: 5px;
  inset: 3px;
  background:
    linear-gradient(180deg, rgb(140 230 255 / 0.18), transparent 40%),
    var(--ui-select);
}
@media (prefers-reduced-motion: no-preference) {
  .topbar__selector { transition: transform 180ms var(--ease-out), width 180ms var(--ease-out), height 180ms var(--ease-out), opacity 120ms; }
  .topbar__link::before, .hud-pointer { animation: hud-bob 1s steps(1, end) infinite; }
}
@keyframes hud-bob { 50% { translate: 3px 0; } }

.topbar__toggle {
  --c: 6px;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0.6rem 0.9rem;
  border: 0;
  background: transparent;
  color: #fff;
  font: 400 0.75rem/1 var(--pixel);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.topbar__toggle.px-frame { border: 0; }
.topbar__toggle.px-frame::before, .topbar__toggle::after {
  content: "";
  position: absolute;
  z-index: -1;
  border: 0;
  clip-path: var(--px-clip);
}
.topbar__toggle.px-frame::before { inset: 0; background: var(--neon); }
.topbar__toggle::after {
  --c: 5px;
  inset: 3px 3px 5px;
  background: linear-gradient(180deg, #16305f, var(--ui-void-2));
}
.topbar__toggle:active { translate: 0 2px; }
.topbar__toggle:active::after { inset: 3px; }

.topbar__toggle, .topbar__toggle[hidden] { display: none; }
.topbar__toggle:focus-visible { outline-offset: 3px; }
/* Three pixel bars; they close into an X while the menu is open. */
.topbar__icon {
  position: relative;
  width: 14px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
}
.topbar.is-open .topbar__toggle.px-frame::before { background: var(--focus); }
.topbar.is-open .topbar__icon { height: 0; box-shadow: none; }
.topbar.is-open .topbar__icon::before, .topbar.is-open .topbar__icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 14px;
  height: 2px;
  background: currentColor;
  transform: rotate(45deg);
}
.topbar.is-open .topbar__icon::after { transform: rotate(-45deg); }

@media (max-width: 64rem) {
  .topbar__name { font-size: 0.875rem; }
  .topbar__link { font-size: 0.75rem; padding: 0.75rem 0.75rem 0.75rem 1.5rem; }
  .topbar__link::before { left: 0.55rem; }
  .topbar__link[aria-current]::after { left: 1.5rem; right: 0.75rem; }
}
@media (min-width: 40.01rem) and (max-width: 56rem) {
  .topbar__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@media (max-width: 40rem) {
  .topbar { padding-inline: 1rem; }
  .doc-page .topbar { min-height: 56px; }
  .topbar__name { font-size: 0.75rem; }
  .topbar__link { font-size: 0.75rem; }
  .has-toggle .topbar__nav { position: static; }
  .has-toggle .topbar__toggle:not([hidden]) { display: inline-flex; }
  .topbar__selector { display: none; }
  /* The pause menu: a full-width panel dropped from under the strip. */
  .has-toggle .topbar__menu {
    display: none;
    position: absolute;
    left: 1rem;
    right: 1rem;
    top: calc(100% + 0.75rem);
    flex-direction: column;
    gap: 10px;
    padding: 3.25rem 16px 16px;
    background: var(--neon);
    clip-path: var(--px-clip);
    isolation: isolate;
  }
  /* Panel fill with the inner hairline, and a PAUSE header row with a rule. */
  .has-toggle .topbar__menu::before {
    content: "";
    position: absolute;
    inset: 3px;
    z-index: -1;
    clip-path: var(--px-clip);
    background:
      repeating-linear-gradient(0deg, rgb(255 255 255 / 0.025) 0 1px, transparent 1px 3px),
      rgb(4 12 36 / 0.98);
    box-shadow: inset 0 0 0 4px rgb(4 12 36), inset 0 0 0 5px rgb(62 200 255 / 0.35), inset 0 0 28px rgb(62 200 255 / 0.12);
  }
  .has-toggle .topbar__menu::after {
    content: "PAUSE" / "";
    position: absolute;
    left: 20px;
    right: 20px;
    top: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgb(62 200 255 / 0.5);
    font: 400 0.75rem/1.2 var(--pixel);
    color: var(--cyan-strong);
    pointer-events: none;
  }
  .has-toggle.is-open .topbar__menu { display: flex; }
  .has-toggle .topbar__link { min-height: 56px; padding-left: 2rem; font-size: 1rem; }
  .has-toggle .topbar__link::before { left: 0.85rem; }
  .has-toggle .topbar__link[aria-current]::after { left: 2rem; right: auto; width: 3rem; bottom: 10px; }
  .has-toggle .topbar__menu > li:hover::before, .has-toggle .topbar__menu > li:focus-within::before { background: var(--neon); }
  .has-toggle .topbar__menu > li:focus-within::after, .has-toggle .topbar__menu > li:hover::after { background: var(--ui-select); }
}

/* Without JavaScript the links stay visible on narrow screens and wrap under the mark. */
@media (max-width: 40rem) {
  .topbar:not(.has-toggle) { flex-wrap: wrap; }
  .topbar:not(.has-toggle) .topbar__menu { flex-wrap: wrap; }
}

/* ---------- Portrait / mobile composition ---------- */

@media (orientation: portrait) {
  .home .topbar { position: absolute; top: 0; left: 0; right: 0; }
  .stage {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 52svh;
    flex: 0 0 auto;
  }
  .stage__world { transform-origin: 50% 60%; }
  .stage__poster, .stage__video { object-position: 50% 50%; }
  .stage__scrim {
    background:
      linear-gradient(0deg, var(--bg) 0%, rgba(11, 21, 48, 0.65) 18%, rgba(11, 21, 48, 0) 42%),
      linear-gradient(180deg, rgba(4, 9, 22, 0.5) 0%, rgba(4, 9, 22, 0) 18%),
      radial-gradient(120% 110% at 50% 45%, rgba(0, 0, 0, 0) 60%, rgba(2, 5, 15, 0.5) 100%);
  }
  .content {
    width: 100%;
    justify-content: flex-start;
    margin-top: -3.25rem;
    padding: 0 1rem 1.25rem;
  }
  .title { font-size: min(2.6rem, 7.1cqi); margin-bottom: 0.9rem; }
  .tagline { font-size: clamp(0.62rem, 3vw, 0.9rem); margin-bottom: 1.4rem; gap: 0.7rem; }
  .tagline::before { width: 1.5rem; }
  .press-start {
    width: calc(100% - var(--px) * 2);
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: clamp(1rem, 4.6vw, 1.25rem);
  }
  .hero { margin-block: 0; padding-bottom: 0; }
  .signup .lede { margin-bottom: 1rem; }
  .signup__row { flex-direction: column; gap: 0.9rem; }
  .signup__button { width: 100%; }
  .confirm__actions { flex-direction: column-reverse; }
  .confirm__actions > button { width: 100%; }
  .footer { padding-left: 1rem; padding-right: 1rem; gap: 0 1.1rem; }
}

@media (orientation: landscape) and (max-height: 560px) {
  .content { padding-top: 1rem; justify-content: flex-start; }
  .title { margin-bottom: 0.5rem; }
  .tagline { margin-bottom: 0.9rem; }
  .press-start { margin-bottom: 0.9rem; }
  .hero { padding-bottom: 1rem; }
  .signup .lede { margin-bottom: 0.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .stage__video { transition: none; }
  .signup__button, .press-start, .sound-toggle, .signup__field, .confirm__back, .topbar__link::after { transition: none; }
  .signup__button:active, .press-start:active, .sound-toggle:active { translate: none; }
}

/* ---------- Document pages (privacy, confirmation outcomes) ---------- */

.doc-page { background: var(--bg); display: block; }

.doc {
  width: min(44rem, 100%);
  margin: 0 auto;
  padding: clamp(1.5rem, 6vh, 3.5rem) 1rem 3rem;
}

.doc__home {
  display: inline-block;
  margin-bottom: 1.5rem;
  font: 400 0.85rem/1.4 var(--pixel);
  color: #fff;
  text-decoration: none;
  text-shadow: 2px 2px 0 #2a1f74, 0 0 14px rgba(255, 95, 210, 0.45);
}

.doc h1 {
  margin: 0 0 1rem;
  font: 400 clamp(1rem, 3.6vw, 1.4rem)/1.4 var(--pixel);
  color: var(--cyan-strong);
}

.doc h2 { margin: 2rem 0 0.5rem; font-size: 1.1rem; }
.doc .muted { color: var(--text-dim); font-size: 0.9rem; }
.doc table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 0.45rem 0.5rem; border-bottom: 1px solid rgba(195, 205, 232, 0.25); }
.doc__legal { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid rgba(195, 205, 232, 0.25); font-size: 0.875rem; color: var(--text-dim); }
.doc__list { padding-left: 1.25rem; }
.doc__list li { margin-bottom: 0.4rem; }
.doc__empty {
  margin: 1.5rem 0 0;
  padding: clamp(1.25rem, 4vw, 1.75rem);
  border-left: var(--px) solid var(--magenta);
  background: linear-gradient(90deg, rgba(79, 216, 255, 0.1), rgba(79, 216, 255, 0.02));
}
.doc__empty p { margin: 0 0 1.25rem; font-size: 1.0625rem; }
.doc__cta {
  display: inline-flex;
  align-items: center;
  margin-inline: var(--px);
  text-decoration: none;
}
.doc__cta:hover { color: #06102a; }

/* Blog index */
.posts { margin: 1.5rem 0 0; padding: 0; list-style: none; }
.posts__item {
  padding: 1.5rem 0;
  border-top: 1px solid rgba(195, 205, 232, 0.25);
}
.posts__item:last-child { border-bottom: 1px solid rgba(195, 205, 232, 0.25); }
.doc .posts__title { margin: 0 0 0.6rem; font: 400 clamp(0.8125rem, 3vw, 1rem)/1.6 var(--pixel); }
.posts__title a { color: #fff; text-decoration: none; text-shadow: 2px 2px 0 var(--violet); }
.posts__title a:hover { color: var(--cyan-strong); }
.posts__date { margin: 0 0 0.75rem; color: var(--text-dim); font-size: 0.9rem; }
.posts__excerpt { margin: 0 0 0.9rem; font-size: 1.0625rem; }
.posts__more { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* Article: a letter set for long reading. */
.doc--article { width: min(42rem, 100%); }
.post { font-size: 1.125rem; line-height: 1.75; }
.post p { max-width: 68ch; margin: 0 0 1.15em; }
.doc .post__title {
  margin-bottom: 0.9rem;
  font-size: clamp(1rem, 4.2vw, 1.6rem);
  line-height: 1.5;
  color: #fff;
  text-wrap: balance;
  text-shadow: 0.1em 0.1em 0 var(--violet), 0 0 14px rgba(255, 95, 210, 0.4);
}
.post .post__byline {
  margin-bottom: 2.25rem;
  padding-bottom: 1.25rem;
  border-bottom: var(--px) solid transparent;
  border-image: linear-gradient(90deg, var(--magenta) 0 2.5rem, var(--cyan) 2.5rem 6rem, transparent 6rem) 1;
  color: var(--text-dim);
  font-size: 0.95rem;
}
.post .post__salute { font-style: italic; color: var(--cyan-strong); }
.post .post__signoff {
  margin: 2rem 0 1.75rem;
  font: 400 1rem/1.4 var(--pixel);
  color: #fff;
  text-shadow: 2px 2px 0 var(--violet);
}
.post .post__ps {
  padding: 1rem 1.15rem;
  border-left: var(--px) solid var(--amber);
  background: rgba(255, 200, 97, 0.07);
  font-size: 1rem;
  color: var(--text-dim);
}
.post__back { margin: 1.5rem 0 0; }
.post__back a { display: inline-flex; align-items: center; min-height: 44px; }
.doc__art { display: block; width: 100%; height: auto; border-radius: 6px; margin: 0 0 1.25rem; }

@media (forced-colors: active) {
  .confirm__panel { border: 2px solid CanvasText; }
  .px-frame, .px-frame::before { border-color: ButtonText; }
  .signup__field:focus-within { outline: 3px solid Highlight; }
}

/* Dim layer behind the open pause menu (inserted by nav.js); a tap on it closes the menu. */
.menu-scrim {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: none;
  background:
    repeating-linear-gradient(0deg, rgb(255 255 255 / 0.03) 0 1px, transparent 1px 3px),
    rgb(2 6 20 / 0.72);
}
.menu-scrim.is-on { display: block; }
@media (min-width: 40.01rem) { .menu-scrim.is-on { display: none; } }

/* In-place page changes (router.js) move focus to the new heading; it is not a control. */
h1[tabindex="-1"]:focus { outline: none; }