:root {
  /* Typography compliance phrase: Space Mono** Mono* in bold weights pressed into a heavy black frame; IBM Plex Mono** Mono* for coordinates. */
  --ink: #050507;
  --paper: #F4F0E8;
  --green: #4DFFB5;
  --violet: #8B5CFF;
  --magenta: #FF4FD8;
  --blue: #2CCBFF;
  --gray: #8B8792;
  --aurora: linear-gradient(135deg, #4DFFB5 0%, #2CCBFF 32%, #8B5CFF 66%, #FF4FD8 100%);
}

* { box-sizing: border-box; }

html {
  background: var(--ink);
  color: var(--paper);
  font-family: "IBM Plex Mono", "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ink);
  text-transform: uppercase;
}

button { font: inherit; }

#questRail {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

.chapter {
  position: relative;
  min-height: 100vh;
  width: 100%;
  scroll-snap-align: start;
  overflow: hidden;
  isolation: isolate;
  border: 12px solid var(--ink);
}

.chapter::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: radial-gradient(circle at 18% 12%, rgba(77, 255, 181, .16), transparent 24%), var(--paper);
}

.chapter::after {
  content: "";
  position: absolute;
  inset: 5.5vw 3vw 3vw 10vw;
  border: 5px solid var(--ink);
  pointer-events: none;
  transform: translateX(-110%);
  transition: transform .28s steps(3, end);
}

.chapter.is-visible::after { transform: translateX(0); }

.static-layer,
.scanline-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 80;
}

.static-layer {
  opacity: .28;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(244, 240, 232, .75) 0 1px, transparent 1.7px),
    radial-gradient(circle at 70% 40%, rgba(5, 5, 7, .85) 0 1px, transparent 1.6px),
    linear-gradient(90deg, transparent 0 48%, rgba(255,255,255,.18) 49% 50%, transparent 51% 100%);
  background-size: 17px 19px, 23px 29px, 180px 100%;
  mix-blend-mode: multiply;
}

.scanline-layer {
  opacity: .2;
  background: repeating-linear-gradient(0deg, rgba(5, 5, 7, .45) 0 1px, transparent 1px 7px);
  animation: scanFlicker 1.8s steps(2, end) infinite;
}

.corner-mark {
  position: fixed;
  width: 58px;
  height: 58px;
  z-index: 90;
  border-color: var(--magenta);
  pointer-events: none;
}

.mark-a { top: 18px; left: 18px; border-top: 5px solid; border-left: 5px solid; }
.mark-b { right: 18px; bottom: 18px; border-right: 5px solid var(--green); border-bottom: 5px solid var(--green); }

.chapter-nav {
  position: fixed;
  right: 18px;
  top: 50%;
  z-index: 100;
  display: grid;
  gap: 8px;
  transform: translateY(-50%);
}

.tick {
  width: 52px;
  height: 30px;
  border: 3px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--ink);
}

.tick.is-active { background: var(--green); transform: translate(-3px, -3px); }

.system-marker {
  position: fixed;
  left: 20px;
  bottom: 18px;
  z-index: 100;
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 8px 10px;
  border: 3px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-size: 12px;
  box-shadow: 5px 5px 0 var(--magenta);
}

.panel-frame {
  border: 7px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 12px 12px 0 var(--ink);
}

.chapter-code {
  position: absolute;
  left: -2vw;
  top: 4vh;
  z-index: 4;
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: clamp(7rem, 20vw, 20rem);
  font-weight: 700;
  line-height: .75;
  letter-spacing: -.11em;
  opacity: .92;
  writing-mode: vertical-rl;
}

.aurora-rip {
  position: absolute;
  z-index: -1;
  background: var(--aurora);
  filter: contrast(1.35) saturate(1.25);
  transform: skewY(-5deg);
}

.aurora-rip::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, rgba(5,5,7,.22) 0 9px, transparent 9px 22px);
  mix-blend-mode: multiply;
}

.hero { background: var(--ink); }
.hero::before { background: var(--ink); }
.hero::after { border-color: var(--paper); inset: 9vh 4vw 8vh 8vw; }

.aurora-main {
  left: -7vw;
  right: -5vw;
  top: 35vh;
  height: 28vh;
  animation: auroraShift 7s steps(7, end) infinite;
}

.hero-frame {
  position: absolute;
  left: 10vw;
  top: 12vh;
  width: 76vw;
  padding: clamp(22px, 4vw, 56px);
  background: var(--ink);
  color: var(--paper);
  border-color: var(--paper);
  box-shadow: 16px 16px 0 var(--magenta), -10px -10px 0 var(--blue);
}

.boot-line,
.caption {
  margin: 0 0 18px;
  color: var(--gray);
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(.72rem, 1.3vw, 1rem);
  letter-spacing: .08em;
}

h1, h2 {
  margin: 0;
  font-family: "Space Mono", monospace;
  font-weight: 700;
  letter-spacing: -.08em;
  line-height: .82;
}

h1 { font-size: clamp(4rem, 14vw, 15rem); text-transform: none; }
h2 { font-size: clamp(3.2rem, 10vw, 10rem); }

.draw-wrap {
  margin-top: 24px;
  display: inline-block;
  position: relative;
  font-family: "Azeret Mono", monospace;
  font-size: clamp(.85rem, 1.8vw, 1.4rem);
  color: var(--paper);
}

.draw-line { position: relative; z-index: 1; }
.draw-line::after {
  content: "";
  position: absolute;
  left: -3%;
  right: -3%;
  bottom: .05em;
  height: .36em;
  background: var(--green);
  z-index: -1;
  transform-origin: left center;
  transform: scaleX(0) rotate(-1deg);
  transition: transform .55s steps(7, end) .18s;
}

.chapter.is-visible .draw-line::after { transform: scaleX(1) rotate(-1deg); }

.cartridge {
  position: absolute;
  right: 8vw;
  bottom: 9vh;
  width: 260px;
  height: 170px;
  border: 6px solid var(--paper);
  background: var(--ink);
  color: var(--paper);
  padding: 28px 18px;
  transform: rotate(4deg);
  box-shadow: 10px 10px 0 var(--green);
}

.cartridge b { display: block; font-family: "Space Mono", monospace; font-size: 1.45rem; }
.cartridge small { color: var(--blue); }
.crack { position: absolute; inset: 18px auto auto 52%; width: 4px; height: 100px; background: var(--magenta); transform: rotate(21deg); }

.meteor { position: absolute; color: var(--green); font-size: 42px; left: 18vw; bottom: 11vh; animation: blinkSkip 1.1s steps(2, end) infinite; }

.map::before { background: linear-gradient(90deg, var(--paper) 0 63%, var(--ink) 63% 100%); }
.map-panel { position: absolute; left: 13vw; top: 8vh; width: 68vw; min-height: 74vh; padding: 34px; }
.map-panel h2 span { color: var(--violet); }
.map .draw-wrap { color: var(--ink); }

.constellation { position: absolute; inset: 39% 6% 6% 8%; border: 4px solid var(--ink); background: radial-gradient(circle at 70% 25%, var(--blue) 0 3px, transparent 4px), var(--ink); overflow: hidden; }
.constellation svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.constellation polyline { fill: none; stroke: var(--paper); stroke-width: 5; stroke-dasharray: 14 15; }
.star { position: absolute; width: 18px; height: 18px; background: var(--green); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 2% 35%, 39% 35%); }
.s1 { left: 7%; top: 70%; } .s2 { left: 22%; top: 30%; } .s3 { left: 45%; top: 56%; } .s4 { left: 63%; top: 20%; } .s5 { right: 9%; top: 48%; }
.edge-strip { position: absolute; right: -6px; top: 14vh; padding: 12px 18px; background: var(--magenta); color: var(--ink); border: 5px solid var(--ink); writing-mode: vertical-rl; font-weight: 700; }

.battle::before { background: var(--ink); }
.battle::after { border-color: var(--paper); }
.battle .chapter-code { color: var(--paper); opacity: .45; }
.blade { width: 120vw; height: 18vh; left: -10vw; top: 48vh; box-shadow: 0 0 0 10px var(--ink); }
.battle-grid { position: absolute; inset: 9vh 7vw 7vh 13vw; display: grid; grid-template-columns: 1.2fr .8fr; grid-template-rows: 1fr .75fr; gap: 18px; }
.impact { grid-row: span 2; padding: 30px; background: var(--paper); overflow: hidden; }
.impact::after { content: "✷"; position: absolute; left: 11%; top: 19%; color: var(--magenta); font-size: 40vw; z-index: -1; opacity: .8; }
.stamp { display: inline-block; margin-bottom: 24px; padding: 6px 10px; background: var(--magenta); border: 4px solid var(--ink); font-weight: 700; }
.speed { position: relative; background: var(--ink); overflow: hidden; }
.speed span { position: absolute; left: -20%; width: 140%; height: 5px; background: var(--paper); transform: rotate(-18deg); }
.speed span:nth-child(1) { top: 15%; } .speed span:nth-child(2) { top: 31%; height: 9px; } .speed span:nth-child(3) { top: 50%; } .speed span:nth-child(4) { top: 69%; height: 12px; } .speed span:nth-child(5) { top: 84%; }
.moon-box { padding: 22px; background: var(--blue); }
.moons { display: flex; gap: 14px; margin-top: 26px; }
.moons b { width: 54px; height: 54px; border: 4px solid var(--ink); border-radius: 50%; background: var(--paper); box-shadow: inset -18px 0 0 var(--ink); }
.moons b:nth-child(2) { box-shadow: inset -8px 0 0 var(--ink); } .moons b:nth-child(3) { box-shadow: inset 18px 0 0 var(--ink); } .moons b:nth-child(4) { background: var(--ink); }
.giant-star { position: absolute; right: -3vw; bottom: -9vh; color: var(--green); font-size: 30vw; line-height: 1; mix-blend-mode: screen; }

.save::before { background: var(--paper); }
.save-card { position: absolute; left: 18vw; top: 17vh; width: min(780px, 68vw); padding: 38px; box-shadow: 14px 14px 0 var(--gray); }
.save-card h2 { font-size: clamp(2rem, 6vw, 6rem); letter-spacing: -.06em; }
.poem { max-width: 660px; font-family: "Azeret Mono", monospace; text-transform: none; line-height: 1.65; color: var(--ink); }
.tiny-stars { color: var(--blue); display: flex; gap: 44px; font-size: 28px; margin-top: 22px; }
.save-moon { position: absolute; right: 15vw; bottom: 14vh; width: 190px; height: 190px; border: 8px solid var(--ink); border-radius: 50%; background: var(--paper); box-shadow: inset -55px 0 0 var(--ink), 16px 16px 0 var(--blue); }

.continue::before { background: var(--ink); }
.continue::after { border-color: var(--paper); }
.continue .chapter-code { color: var(--paper); }
.finale { inset: 5vh -10vw auto auto; width: 82vw; height: 88vh; clip-path: polygon(7% 8%, 100% 0, 86% 88%, 0 100%); }
.continue-frame { position: absolute; left: 14vw; top: 12vh; width: 72vw; padding: 36px; background: var(--ink); color: var(--paper); border-color: var(--paper); box-shadow: 16px 16px 0 var(--green); }
.continue-frame h2 { font-size: clamp(5rem, 17vw, 18rem); color: var(--paper); }
.choice-row { display: flex; flex-wrap: wrap; gap: 18px; margin: 28px 0; }
.choice { padding: 15px 18px; border: 4px solid var(--paper); background: var(--ink); color: var(--paper); cursor: pointer; }
.choice.is-selected { background: var(--magenta); color: var(--ink); border-color: var(--ink); box-shadow: 7px 7px 0 var(--paper); }
.pixel-comet { position: absolute; width: 26px; height: 26px; left: 8vw; bottom: 16vh; background: var(--blue); box-shadow: 26px 0 0 var(--green), 52px 0 0 var(--paper), -26px 0 0 var(--magenta); }

.is-visible .panel-frame { animation: slamIn .34s steps(4, end) both; }
.is-visible .speed span { animation: speedCut .7s steps(4, end) infinite alternate; }

@keyframes slamIn { from { transform: translate(-18px, -12px); filter: contrast(2); } to { transform: translate(0, 0); filter: contrast(1); } }
@keyframes scanFlicker { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@keyframes auroraShift { 0% { background-position: 0 0; } 100% { background-position: 480px 0; } }
@keyframes blinkSkip { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .25; } }
@keyframes speedCut { from { transform: translateX(-16px) rotate(-18deg); } to { transform: translateX(22px) rotate(-18deg); } }

@media (max-width: 760px) {
  .chapter { border-width: 7px; }
  .chapter-code { font-size: 6rem; left: -24px; top: 8vh; }
  .chapter-nav { right: 8px; }
  .tick { width: 42px; font-size: 12px; }
  .system-marker { left: 8px; bottom: 8px; font-size: 10px; gap: 8px; }
  .hero-frame, .map-panel, .continue-frame { left: 12vw; width: 78vw; }
  .cartridge { width: 190px; height: 124px; bottom: 7vh; }
  .battle-grid { inset: 10vh 10vw 12vh 16vw; grid-template-columns: 1fr; }
  .save-card { left: 14vw; width: 76vw; }
  .save-moon { width: 116px; height: 116px; right: 8vw; }
}