/* ═══════════════════════════════════════
   URBAN HAVOC — Retro Gaming Website
   80s Arcade Aesthetic
   ═══════════════════════════════════════ */

/* ─── Fonts ─── */
@font-face {
  font-family: 'Oric Atmos';
  src: url('../fonts/oric-atmos.otf.woff2?v=a2a57c5a') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ─── Reset & Base ─── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg-dark: #0a0a0e;
  --bg-panel: #0f0f15;
  --bg-card: #14141e;

  --neon-magenta: #ff00ff;
  --neon-pink: #ff2d95;
  --neon-cyan: #00ffff;
  --neon-green: #39ff14;
  --neon-yellow: #ffe600;
  --neon-purple: #b829dd;
  --neon-orange: #ff6600;
  --neon-amber: #ffb000;
  --neon-red: #ff2020;

  --text-primary: #e8e8e8;
  --text-dim: #888899;
  --text-dark: #555566;

  --font-pixel: 'Press Start 2P', monospace;
  --font-mono: 'Oric Atmos', 'Courier New', Courier, monospace;

  --glow-magenta: 0 0 7px #ff00ff, 0 0 15px rgb(255 0 255 / 50%), 0 0 30px rgb(255 0 255 / 20%);
  --glow-cyan: 0 0 7px #00ffff, 0 0 15px rgb(0 255 255 / 50%), 0 0 30px rgb(0 255 255 / 20%);
  --glow-green: 0 0 7px #39ff14, 0 0 15px rgb(57 255 20 / 50%), 0 0 30px rgb(57 255 20 / 20%);
  --glow-amber: 0 0 7px #ffb000, 0 0 15px rgb(255 176 0 / 50%), 0 0 30px rgb(255 176 0 / 20%);
  --glow-red: 0 0 7px #ff2020, 0 0 15px rgb(255 32 32 / 50%), 0 0 30px rgb(255 32 32 / 20%);

  /* ─── Font Sizes — single source of truth ─── */
  --fs-body: 32px;              /* prose, paragraphs, descriptions */
  --fs-body-lead: 56px;         /* lead/intro paragraphs */
  --fs-section-tag: 18px;       /* small labels above sections */
  --fs-section-title: clamp(30px, 5vw, 90px); /* section headings */
  --fs-nav: 20px;               /* shared: hero tagline, next-name, next-arrow */
  --fs-nav-link: 17px;          /* the top menu itself */
  --fs-nav-logo: 28px;          /* nav logo */
  --fs-button: 22px;            /* button text */
  --fs-button-sub: 16px;        /* button subtexts */
  --fs-badge: 16px;             /* badges and small labels */
  --fs-caption: 28px;           /* metadata, credits, footnotes */
  --fs-quote: 48px;             /* character quotes */
  --fs-quote-mark: 56px;        /* quotation marks */
  --fs-card-title: 42px;        /* card headings (crew names etc) */
  --fs-card-subtitle: 16px;     /* card subtitles/roles */
  --fs-stat-value: 36px;        /* game stat numbers */
  --fs-stat-label: 14px;        /* game stat labels */
  --fs-marquee: 20px;           /* scrolling ticker */
  --fs-footer: 16px;            /* footer content */
  --fs-input: 20px;             /* form inputs */
}

html {
  scroll-behavior: smooth;
  scrollbar-color: var(--neon-magenta) var(--bg-dark);
}

body {
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  background: var(--bg-dark);
  color: var(--text-primary);
  overflow-x: hidden;
  line-height: 1.0;
}

::selection {
  background: var(--neon-magenta);
  color: #000;
}

::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-dark);
}
::-webkit-scrollbar-thumb {
  background: var(--neon-magenta);
  border-radius: 4px;
}

/* ─── Scanlines Overlay ─── */
.scanlines {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    rgb(0 0 0 / 8%) 0px,
    rgb(0 0 0 / 8%) 1px,
    transparent 1px,
    transparent 3px
  );
}

/* ─── Starfield Canvas ─── */
#starfield {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ─── Container ─── */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ─── Navigation ─── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 16px 0;
  transition: all 0.3s ease;
  background: transparent;
}

.nav.scrolled {
  background: rgb(10 10 14 / 95%);
  backdrop-filter: blur(10px);
  padding: 10px 0;
  border-bottom: 1px solid rgb(255 0 255 / 15%);
}

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  /* space-between already parts these when there is room to spare; the gap is
     the floor, so a wide menu can never crowd up against the logo */
  gap: 56px;
}

.nav-logo {
  font-family: var(--font-pixel);
  font-size: var(--fs-nav-logo);
  color: var(--text-primary);
  text-decoration: none;
  letter-spacing: 2px;
  transition: text-shadow 0.3s;
}

.nav-logo:hover {
  text-shadow: var(--glow-magenta);
}

.logo-bracket {
  color: var(--neon-magenta);
}

.logo-accent {
  color: var(--neon-magenta);
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 32px;
}

.nav-links a {
  font-family: var(--font-pixel);
  font-size: var(--fs-nav-link);
  color: var(--neon-yellow);
  text-decoration: none;
  letter-spacing: 2px;
  transition: all 0.3s;
  position: relative;
  padding: 4px 0;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--neon-magenta);
  box-shadow: 0 0 8px var(--neon-magenta);
  transition: width 0.3s;
}

.nav-links a:hover {
  color: #fff;
  text-shadow: 0 0 10px rgb(255 255 255 / 50%);
}

.nav-links a:hover::after {
  width: 100%;
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--neon-magenta);
  transition: all 0.3s;
}

.nav-toggle.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.nav-toggle.open span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ─── Hero Section ─── */
.hero {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 24px 60px;
}

.hero-content {
  position: relative;
}

.hero-badge {
  font-family: var(--font-pixel);
  font-size: var(--fs-badge);
  color: var(--neon-magenta);
  letter-spacing: 4px;
  margin-bottom: 40px;
  animation: pulse-opacity 3s ease-in-out infinite;
}

.hero-title {
  margin-bottom: 24px;
}

.title-line {
  display: block;
  font-family: var(--font-pixel);
  line-height: 1.2;
}

.title-urban {
  font-size: clamp(48px, 10vw, 100px);
  color: #fff;
  text-shadow:
    0 0 10px rgb(255 255 255 / 80%),
    0 0 20px rgb(255 255 255 / 40%),
    0 0 40px rgb(255 0 255 / 30%),
    0 0 80px rgb(255 0 255 / 15%);
  letter-spacing: 8px;
}

.title-havoc {
  font-size: clamp(48px, 10vw, 100px);
  color: var(--neon-magenta);
  text-shadow:
    0 0 10px rgb(255 0 255 / 80%),
    0 0 30px rgb(255 0 255 / 60%),
    0 0 60px rgb(255 0 255 / 40%),
    0 0 100px rgb(255 0 255 / 20%);
  letter-spacing: 8px;
  animation: glow-magenta 4s ease-in-out infinite alternate;
}

.hero-tagline {
  font-family: var(--font-pixel);
  font-size: var(--fs-nav);
  color: var(--neon-cyan);
  letter-spacing: 8px;
  text-shadow: var(--glow-cyan);
  margin-bottom: 16px;
}

.hero-generated {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text-dark);
  letter-spacing: 3px;
  margin-bottom: 8px;
}

.hero-generated strong {
  color: var(--neon-yellow);
}

.hero-philosophy {
  font-size: var(--fs-body);
  color: var(--text-dim);
  font-style: italic;
  max-width: 600px;
  margin: 0 auto 32px;
  line-height: 1.0;
  min-height: 1.6em;
}

/* ─── Generated Logo Styles ─── */
.gen-hero {
  margin-bottom: 24px;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gen-bracket {
  color: var(--neon-magenta);
  text-shadow: var(--glow-magenta);
}

.gen-word1 {
  font-family: var(--font-pixel);
  font-size: clamp(36px, 8vw, 80px);
  color: #fff;
  text-shadow: 0 0 10px rgb(255 255 255 / 80%), 0 0 40px rgb(255 0 255 / 30%);
  letter-spacing: 6px;
}

.gen-word2 {
  font-family: var(--font-pixel);
  font-size: clamp(36px, 8vw, 80px);
  color: var(--neon-magenta);
  text-shadow: var(--glow-magenta);
  letter-spacing: 6px;
}

.gen-sep {
  font-family: var(--font-pixel);
  font-size: clamp(24px, 5vw, 48px);
  color: var(--neon-cyan);
  text-shadow: var(--glow-cyan);
  margin: 0 8px;
}

.gen-stacked {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.gen-line1 {
  font-family: var(--font-pixel);
  font-size: clamp(36px, 8vw, 80px);
  color: #fff;
  text-shadow: 0 0 10px rgb(255 255 255 / 80%), 0 0 40px rgb(255 0 255 / 30%);
  letter-spacing: 6px;
}

.gen-line2 {
  font-family: var(--font-pixel);
  font-size: clamp(36px, 8vw, 80px);
  color: var(--neon-magenta);
  text-shadow: var(--glow-magenta);
  letter-spacing: 6px;
}

.gen-terminal {
  font-family: var(--font-mono);
  font-size: clamp(18px, 4vw, 36px);
  color: #fff;
  text-shadow: 0 0 10px rgb(255 255 255 / 60%);
  text-align: left;
}

.gen-cmd {
  color: #fff;
}

.gen-flag {
  color: #fff;
}

.gen-cursor {
  color: var(--neon-green);
  animation: blink-cursor 1s step-end infinite;
}

@keyframes blink-cursor {
  50% { opacity: 0; }
}

.gen-ascii {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.gen-border {
  font-family: var(--font-mono);
  font-size: clamp(12px, 2vw, 18px);
  color: var(--neon-cyan);
  text-shadow: var(--glow-cyan);
  letter-spacing: 2px;
}

.gen-ascii-text {
  font-family: var(--font-pixel);
  font-size: clamp(28px, 6vw, 64px);
  color: #fff;
  text-shadow: 0 0 10px rgb(255 255 255 / 80%), 0 0 40px rgb(255 0 255 / 30%);
  letter-spacing: 8px;
}

.gen-glitch {
  font-family: var(--font-pixel);
  font-size: clamp(36px, 8vw, 72px);
  color: #fff;
  letter-spacing: 6px;
  position: relative;
}

.gen-glitch::before,
.gen-glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.gen-glitch::before {
  color: var(--neon-cyan);
  animation: glitch-1 2s infinite linear;
  clip-path: inset(0 0 65% 0);
}

.gen-glitch::after {
  color: var(--neon-magenta);
  animation: glitch-2 2s infinite linear;
  clip-path: inset(35% 0 0 0);
}

.gen-minimal {
  display: flex;
  align-items: center;
  gap: 4px;
}

.gen-minimal .gen-word1,
.gen-minimal .gen-word2 {
  font-size: clamp(60px, 12vw, 120px);
}

.gen-dot {
  font-size: clamp(24px, 5vw, 48px);
  color: var(--neon-cyan);
  text-shadow: var(--glow-cyan);
  margin: 0 12px;
}

.gen-hex {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gen-addr {
  font-family: var(--font-mono);
  font-size: clamp(12px, 2vw, 16px);
  color: var(--neon-green);
  text-shadow: var(--glow-green);
  letter-spacing: 4px;
  margin-bottom: 8px;
}

.gen-hex .gen-word1,
.gen-hex .gen-word2 {
  font-size: clamp(32px, 7vw, 72px);
}

.gen-retro {
  font-family: var(--font-pixel);
  font-size: clamp(24px, 5vw, 48px);
  color: var(--neon-yellow);
  text-shadow: 0 0 7px var(--neon-yellow), 0 0 15px rgb(255 230 0 / 50%);
  letter-spacing: 4px;
}

.gen-version {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gen-ver {
  font-family: var(--font-mono);
  font-size: clamp(10px, 2vw, 14px);
  color: var(--text-dark);
  letter-spacing: 3px;
  margin-top: 8px;
}

.gen-deprecated {
  font-family: var(--font-pixel);
  font-size: clamp(28px, 6vw, 64px);
  color: var(--text-dim);
  letter-spacing: 6px;
}

.gen-deprecated del {
  text-decoration-color: var(--neon-magenta);
  text-decoration-thickness: 3px;
}

.gen-dep-label {
  font-size: clamp(10px, 2vw, 16px);
  color: var(--neon-yellow);
  margin-left: 12px;
  vertical-align: middle;
}

.hero-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 32px;
}

.hero-divider span:first-child,
.hero-divider span:last-child {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--neon-magenta), transparent);
}

.hero-divider .diamond {
  width: 8px;
  height: 8px;
  background: var(--neon-magenta);
  transform: rotate(45deg);
  box-shadow: 0 0 10px var(--neon-magenta);
}

.hero-sub {
  font-size: var(--fs-body);
  color: var(--text-dim);
  margin-bottom: 48px;
  line-height: 1.0;
  letter-spacing: 1px;
}

.hero-scroll-hint {
  position: absolute;
  bottom: -60px;
  left: 50%;
  transform: translateX(-50%);
  animation: bounce 2s ease-in-out infinite;
}

.arrow-down {
  display: block;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--neon-magenta);
  border-bottom: 2px solid var(--neon-magenta);
  transform: rotate(45deg);
  opacity: 0.5;
}

/* ─── Buttons ─── */
.btn {
  display: inline-block;
  text-decoration: none;
  font-family: var(--font-pixel);
  text-align: center;
  cursor: pointer;
  border: none;
  transition: all 0.3s;
  position: relative;
}

.btn-primary {
  background: transparent;
  border: 2px solid var(--neon-magenta);
  padding: 20px 40px;
  color: #fff;
  box-shadow: var(--glow-magenta);
  animation: btn-pulse 2s ease-in-out infinite;
}

.btn-primary:hover {
  background: rgb(255 0 255 / 15%);
  box-shadow:
    0 0 15px var(--neon-magenta),
    0 0 30px rgb(255 0 255 / 50%),
    0 0 60px rgb(255 0 255 / 30%),
    inset 0 0 30px rgb(255 0 255 / 10%);
  transform: scale(1.05);
}

.btn-secondary {
  background: transparent;
  border: 2px solid var(--neon-cyan);
  padding: 16px 32px;
  color: var(--neon-cyan);
  box-shadow: var(--glow-cyan);
}

.btn-secondary:hover {
  background: rgb(0 255 255 / 10%);
  box-shadow:
    0 0 15px var(--neon-cyan),
    0 0 30px rgb(0 255 255 / 40%);
  transform: scale(1.05);
}

.btn-text {
  display: block;
  font-size: var(--fs-button);
  letter-spacing: 3px;
}

.btn-subtext {
  display: block;
  font-size: var(--fs-button-sub);
  letter-spacing: 2px;
  margin-top: 6px;
  opacity: 0.6;
}

.btn-submit {
  font-family: var(--font-mono);
  font-size: var(--fs-button);
  letter-spacing: 2px;
  padding: 16px 28px;
  background: var(--neon-green);
  color: #000;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-submit:hover {
  box-shadow: var(--glow-green);
  transform: scale(1.05);
}

/* ─── Sections ─── */
.section {
  position: relative;
  z-index: 1;
  padding: 100px 0;
}

.section-header {
  text-align: center;
  margin-bottom: 64px;
}

.section-tag {
  font-family: var(--font-pixel);
  font-size: var(--fs-section-tag);
  color: var(--text-dark);
  letter-spacing: 4px;
  display: block;
  margin-bottom: 16px;
}

.section-title {
  font-family: var(--font-pixel);
  font-size: var(--fs-section-title);
  letter-spacing: 5px;
  margin-bottom: 24px;
}

.section-title.neon-magenta {
  color: var(--neon-magenta);
  text-shadow: var(--glow-magenta);
}

.section-title.neon-cyan {
  color: var(--neon-cyan);
  text-shadow: var(--glow-cyan);
}

.section-title.neon-green {
  color: var(--neon-green);
  text-shadow: var(--glow-green);
}

.section-line {
  width: 60px;
  height: 3px;
  margin: 0 auto;
  background: var(--neon-magenta);
  box-shadow: 0 0 10px var(--neon-magenta);
}

.section-line.cyan {
  background: var(--neon-cyan);
  box-shadow: 0 0 10px var(--neon-cyan);
}

.section-line.green {
  background: var(--neon-green);
  box-shadow: 0 0 10px var(--neon-green);
}

.section-title.neon-red {
  color: var(--neon-red);
  text-shadow: var(--glow-red);
}

.section-line.red {
  background: var(--neon-red);
  box-shadow: 0 0 10px var(--neon-red);
}

.section-title.neon-amber {
  color: var(--neon-amber);
  text-shadow: var(--glow-amber);
}

.section-line.amber {
  background: var(--neon-amber);
  box-shadow: 0 0 10px var(--neon-amber);
}

/* ─── Underscore glyph (Oric font lacks one) ─── */
.uc {
  display: inline-block;
  width: 1ch;
  border-bottom: 2px solid currentColor;
  vertical-align: baseline;
  position: relative;
  top: 0.1em;
}

/* ─── Downloads Table ─── */
.dl-table {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  border-collapse: collapse;
}

.dl-platform {
  vertical-align: middle;
  text-align: center;
  width: 100px;
  padding: 16px;
  border: 2px solid rgb(255 176 0 / 25%);
}

.dl-platform svg {
  width: 48px;
  height: 48px;
  fill: var(--text-dim);
}

.dl-arch {
  vertical-align: middle;
  text-align: center;
  width: 80px;
  padding: 12px;
  border: 2px solid rgb(255 176 0 / 25%);
  color: var(--text-dim);
}

.dl-arch svg {
  width: 60px;
  height: 60px;
}

.dl-arch svg.dl-arch-badge {
  width: 60px;
  height: 36px;
  display: block;
  margin: 2px auto;
}

.dl-file {
  padding: 12px 20px;
  border: 2px solid rgb(255 176 0 / 25%);
  font-family: var(--font-mono);
  font-size: var(--fs-body);
}

.dl-file a {
  color: var(--neon-amber);
  text-decoration: none;
  text-shadow: 0 0 5px rgb(255 176 0 / 30%);
  transition: text-shadow 0.2s;
}

.dl-file a:hover {
  text-shadow: var(--glow-amber);
}

.dl-file .dl-coming-soon {
  color: var(--text-dark);
  font-style: italic;
}

.dl-file.dl-note {
  color: var(--text-dim);
  font-size: var(--fs-caption);
  font-style: italic;
}

.dl-warning {
  color: #ff3333;
  font-style: normal;
  font-weight: bold;
}

.dl-file.dl-note code {
  font-family: var(--font-mono);
  color: var(--neon-amber);
  font-style: normal;
}

.dl-file .dl-size {
  float: right;
  color: var(--text-dim);
  font-size: var(--fs-caption);
}

/* ─── Neon Overlay Effect ─── */
.neon-wrap {
  position: relative;
  display: inline-block;
}

/* 45% of section glow (7/15/30 → 3.15/6.75/13.5) */
.neon-wrap .neon-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: rgb(255 255 255 / 50%);
  text-shadow:
    0 0 3.15px rgb(255 255 255 / 80%),
    0 0 6.75px rgb(255 255 255 / 50%),
    0 0 13.5px rgb(255 255 255 / 20%);
  pointer-events: none;
  z-index: 1;
}

/* URBAN: 45% of 10/20/40/80 */
.title-urban .neon-top {
  text-shadow:
    0 0 4.5px rgb(255 255 255 / 80%),
    0 0 9px rgb(255 255 255 / 40%),
    0 0 18px rgb(255 255 255 / 30%),
    0 0 36px rgb(255 255 255 / 15%);
}

/* HAVOC: 45% of 10/30/60/100 */
.title-havoc .neon-top {
  text-shadow:
    0 0 4.5px rgb(255 255 255 / 80%),
    0 0 13.5px rgb(255 255 255 / 60%),
    0 0 27px rgb(255 255 255 / 40%),
    0 0 45px rgb(255 255 255 / 20%);
}


/* ─── Rewrite Cycle Section ─── */
.rewrite-section {
  background: radial-gradient(ellipse at center, rgb(255 0 255 / 3%) 0%, transparent 70%);
}

.rewrite-intro {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.rewrite-intro p {
  color: var(--text-dim);
  margin-bottom: 16px;
  line-height: 1.0;
  font-size: var(--fs-body);
}

.rewrite-intro em {
  color: #fff;
  font-style: italic;
}

.rewrite-memo {
  background: var(--bg-card);
  border: 1px solid rgb(255 0 255 / 20%);
  border-left: 3px solid var(--neon-magenta);
  padding: 32px;
  font-size: var(--fs-body);
  line-height: 1.0;
  color: var(--text-dim);
  text-align: left;
  margin-top: 48px;
}

.rewrite-memo .memo-header {
  border-bottom-color: rgb(255 0 255 / 10%);
  color: var(--neon-magenta);
}

.rewrite-memo p {
  margin-bottom: 12px;
}

.rewrite-memo .memo-sign {
  color: var(--text-dark);
  font-style: italic;
  margin-top: 20px;
}

/* ─── Game Section ─── */
.game-section {
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at center, rgb(255 0 255 / 3%) 0%, transparent 70%);
}

/* ─── Astro release mode ───
   `astro-live` on <body> means Astro has shipped: the launch ribbon appears
   and every "coming soon" claim swaps for its released wording. Drop the class
   to put Astro back to coming soon. Neither rule sets a display value on the
   visible side, so each element keeps its natural display. */
body:not(.astro-live) .astro-when-live {
  display: none;
}

body.astro-live .astro-when-soon {
  display: none;
}

/* ─── Astro Launch Banner ─── */
.astro-launch-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  z-index: 10;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
}

.astro-launch-ribbon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 200%;
  padding: 28px 0;
  background: linear-gradient(
    180deg,
    rgb(255 0 255 / 0%) 0%,
    rgb(255 0 255 / 85%) 15%,
    rgb(255 0 255 / 95%) 50%,
    rgb(255 0 255 / 85%) 85%,
    rgb(255 0 255 / 0%) 100%
  );
  transform: rotate(-35deg);
  box-shadow:
    0 0 40px rgb(255 0 255 / 60%),
    0 0 80px rgb(255 0 255 / 30%);
}

.astro-launch-title {
  font-family: var(--font-pixel);
  font-size: clamp(18px, 4vw, 48px);
  color: #000;
  text-shadow: none;
  letter-spacing: 3px;
  white-space: nowrap;
}

.astro-launch-subtitle {
  font-family: var(--font-pixel);
  font-size: clamp(10px, 2vw, 22px);
  color: #1a001a;
  letter-spacing: 2px;
  white-space: nowrap;
}

.astro-launch-banner:hover .astro-launch-ribbon {
  box-shadow:
    0 0 60px rgb(255 0 255 / 80%),
    0 0 120px rgb(255 0 255 / 50%);
}

.astro-launch-banner:hover .astro-launch-title {
  text-shadow: 0 0 10px rgb(255 255 255 / 50%);
}

.game-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.game-info-centered {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

/* CRT Monitor Frame */
.crt-frame {
  max-width: 100%;
}

.crt-bezel {
  background: #1a1a22;
  border-radius: 16px;
  padding: 16px;
  border: 2px solid #2a2a35;
  box-shadow:
    0 0 30px rgb(0 0 0 / 80%),
    inset 0 0 30px rgb(0 0 0 / 50%);
  position: relative;
}

.crt-label {
  font-family: var(--font-pixel);
  font-size: var(--fs-caption);
  color: var(--text-dark);
  letter-spacing: 3px;
  text-align: center;
  margin-bottom: 12px;
}

.crt-screen {
  position: relative;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: inset 0 0 40px rgb(0 0 0 / 80%);
}

.crt-screen canvas {
  display: block;
  width: 100%;
  height: auto;
}

.crt-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 60%, rgb(0 0 0 / 40%) 100%);
  border-radius: 8px;
}

.crt-base {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 10px 0 4px;
}

.crt-vent {
  width: 40px;
  height: 3px;
  background: #222;
  border-radius: 2px;
}

.game-start-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(0 0 0 / 60%);
  cursor: pointer;
  z-index: 5;
  transition: opacity 0.5s;
}

.game-start-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.start-text {
  text-align: center;
}

.start-text .blink {
  display: block;
  font-family: var(--font-pixel);
  font-size: var(--fs-button);
  color: #fff;
  text-shadow: var(--glow-magenta);
  animation: blink 1s step-end infinite;
}

.start-text .start-sub {
  display: block;
  font-family: var(--font-pixel);
  font-size: var(--fs-caption);
  color: var(--text-dim);
  margin-top: 12px;
  letter-spacing: 2px;
}

.game-controls-hint {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 16px;
  font-family: var(--font-pixel);
  font-size: var(--fs-caption);
  color: var(--text-dark);
  letter-spacing: 1px;
}

.game-controls-hint kbd {
  display: inline-block;
  background: var(--bg-card);
  border: 1px solid #333;
  border-radius: 3px;
  padding: 3px 6px;
  margin: 0 2px;
  font-family: var(--font-pixel);
  font-size: var(--fs-caption);
  color: var(--text-dim);
}

/* Game Info Panel */
.game-info {
  padding-top: 8px;
}

.game-badges {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.badge {
  font-family: var(--font-pixel);
  font-size: var(--fs-badge);
  letter-spacing: 2px;
  padding: 8px 16px;
  border-radius: 2px;
}

.badge-new {
  background: rgb(255 0 255 / 15%);
  border: 1px solid var(--neon-magenta);
  color: var(--neon-magenta);
  animation: pulse-opacity 2s ease-in-out infinite;
}

.badge-free {
  background: rgb(57 255 20 / 10%);
  border: 1px solid var(--neon-green);
  color: var(--neon-green);
}

.game-desc {
  font-size: var(--fs-body);
  color: var(--text-primary);
  line-height: 1.0;
  margin-bottom: -0.3em;
  margin-bottom: 28px;
}

.game-features {
  list-style: none;
  margin-bottom: 32px;
}

.game-features li {
  font-family: var(--font-mono);
  font-size: var(--fs-section-tag);
  color: var(--text-dim);
  padding: 8px 0;
  border-bottom: 1px solid rgb(255 255 255 / 4%);
  letter-spacing: 1px;
}

.feature-icon {
  color: var(--neon-magenta);
  margin-right: 8px;
}

.game-stats {
  display: flex;
  gap: 24px;
  margin-bottom: 32px;
}

.stat {
  text-align: center;
  flex: 1;
  padding: 16px;
  background: var(--bg-panel);
  border: 1px solid rgb(255 255 255 / 5%);
  border-radius: 4px;
}

.stat-value {
  display: block;
  font-family: var(--font-pixel);
  font-size: var(--fs-stat-value);
  color: var(--neon-cyan);
  text-shadow: var(--glow-cyan);
  margin-bottom: 8px;
}

.stat-label {
  font-family: var(--font-pixel);
  font-size: var(--fs-stat-label);
  color: var(--text-dark);
  letter-spacing: 2px;
}

/* ─── Marquee ─── */
.marquee-section {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 16px 0;
  border-top: 1px solid rgb(255 0 255 / 15%);
  border-bottom: 1px solid rgb(255 0 255 / 15%);
  background: rgb(255 0 255 / 3%);
}

.marquee-track {
  white-space: nowrap;
  animation: marquee 30s linear infinite;
}

.marquee-content {
  font-family: var(--font-pixel);
  font-size: var(--fs-marquee);
  color: var(--neon-magenta);
  letter-spacing: 4px;
  text-shadow: 0 0 10px rgb(255 0 255 / 50%);
}

/* ─── About Section ─── */
.about-section {
  background: radial-gradient(ellipse at center, rgb(0 255 255 / 2%) 0%, transparent 70%);
}

/* Story Intro */
.story-intro {
  max-width: 800px;
  margin: 0 auto 72px;
  text-align: center;
}

.about-lead {
  font-size: var(--fs-body-lead);
  color: #fff;
  margin-bottom: 24px;
  line-height: 1.0;
}

.about-lead strong {
  color: var(--neon-cyan);
  text-shadow: 0 0 10px rgb(0 255 255 / 30%);
}

.story-intro p {
  color: var(--text-dim);
  margin-bottom: 16px;
  line-height: 1.0;
  font-size: var(--fs-body);
}

.story-tagline {
  font-family: var(--font-mono);
  font-size: var(--fs-marquee);
  color: var(--neon-yellow);
  letter-spacing: 2px;
  margin-top: 28px;
  text-shadow: 0 0 10px rgb(255 230 0 / 30%);
}

/* Crew Cards */
.crew-layout {
  display: flex;
  flex-direction: column;
  gap: 60px;
  margin-bottom: 80px;
}

.crew-card {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
  align-items: start;
  background: var(--bg-panel);
  border: 1px solid rgb(255 255 255 / 6%);
  border-radius: 8px;
  padding: 40px;
  position: relative;
  overflow: hidden;
}

.crew-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
}

.eddie-card::before {
  background: linear-gradient(90deg, transparent, var(--neon-magenta), transparent);
  box-shadow: 0 0 15px rgb(255 0 255 / 30%);
}

.marvin-card::before {
  background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent);
  box-shadow: 0 0 15px rgb(0 255 255 / 30%);
}

.crew-avatar {
  text-align: center;
}

.avatar-frame {
  width: 240px;
  height: 240px;
  margin: 0 auto 16px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.eddie-avatar .avatar-frame {
  background: radial-gradient(circle at 40% 40%, #1a0a2e, #0a0a0e);
  border: 1px solid rgb(255 0 255 / 20%);
}

.eddie-art {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.eddie-icon {
  font-family: var(--font-pixel);
  font-size: 100px;
  color: var(--neon-magenta);
  text-shadow:
    0 0 20px rgb(255 0 255 / 80%),
    0 0 40px rgb(255 0 255 / 50%),
    0 0 80px rgb(255 0 255 / 30%);
  animation: glow-magenta 3s ease-in-out infinite alternate;
}

.marvin-avatar .avatar-frame {
  background: radial-gradient(circle at 40% 40%, #0a1a2a, #0a0a0e);
  border: 1px solid rgb(0 255 255 / 20%);
}

.marvin-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.crew-role {
  font-family: var(--font-mono);
  font-size: var(--fs-card-subtitle);
  letter-spacing: 4px;
  color: var(--text-dark);
  margin-top: 4px;
}

.crew-name {
  font-family: var(--font-pixel);
  font-size: var(--fs-card-title);
  letter-spacing: 4px;
  margin-bottom: 8px;
}

.crew-name.neon-magenta {
  color: var(--neon-magenta);
  text-shadow: var(--glow-magenta);
}

.crew-name.neon-cyan {
  color: var(--neon-cyan);
  text-shadow: var(--glow-cyan);
}

.crew-title {
  font-family: var(--font-mono);
  font-size: var(--fs-card-subtitle);
  color: var(--text-dark);
  letter-spacing: 2px;
  margin-bottom: 24px;
}

.crew-bio {
  color: var(--text-dim);
  font-size: var(--fs-body);
  line-height: 1.0;
  margin-bottom: -0.3em;
  margin-bottom: 16px;
}

.crew-quote {
  margin-top: 24px;
  padding: 20px 24px;
  background: rgb(0 0 0 / 30%);
  border-left: 3px solid var(--neon-cyan);
  border-radius: 0 4px 4px 0;
  font-style: italic;
  color: var(--text-primary);
  font-size: var(--fs-quote);
  line-height: 1.0;
  margin-bottom: -0.3em;
}

.eddie-card .crew-quote {
  border-left-color: var(--neon-magenta);
}

.quote-mark {
  font-family: var(--font-pixel);
  font-size: var(--fs-quote-mark);
  color: var(--neon-cyan);
  opacity: 0.5;
}

.eddie-card .quote-mark {
  color: var(--neon-magenta);
}

/* Mission Block */
.mission-block {
  margin-top: 20px;
}

.mission-inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  padding: 48px;
  background: var(--bg-panel);
  border: 1px solid rgb(255 255 255 / 6%);
  border-radius: 8px;
  position: relative;
}

.mission-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background: var(--neon-green);
  box-shadow: 0 0 10px var(--neon-green);
}

.mission-title {
  font-family: var(--font-pixel);
  font-size: var(--fs-card-title);
  color: var(--neon-green);
  text-shadow: var(--glow-green);
  letter-spacing: 4px;
  margin-bottom: 24px;
}

.mission-inner > p {
  color: var(--text-dim);
  font-size: var(--fs-body);
  line-height: 1.0;
  margin-bottom: -0.3em;
  margin-bottom: 16px;
}

.mission-inner em {
  color: #fff;
  font-style: normal;
}

.mission-inner strong {
  color: var(--neon-green);
  text-shadow: 0 0 8px rgb(57 255 20 / 30%);
}

.mission-values {
  display: flex;
  gap: 20px;
  margin-top: 36px;
}

/* Value Cards (shared) */
.value-card {
  flex: 1;
  background: rgb(0 0 0 / 30%);
  border: 1px solid rgb(255 255 255 / 6%);
  border-top: 2px solid var(--neon-cyan);
  padding: 24px 20px;
  border-radius: 4px;
  transition: all 0.3s;
  text-align: center;
}

.value-card:hover {
  border-top-color: var(--neon-magenta);
  background: rgb(255 0 255 / 3%);
  transform: translateY(-4px);
}

.value-icon {
  font-size: var(--fs-card-title);
  margin-bottom: 12px;
  color: var(--neon-cyan);
}

.value-card h3 {
  font-family: var(--font-pixel);
  font-size: var(--fs-section-tag);
  color: #fff;
  letter-spacing: 2px;
  margin-bottom: 8px;
}

.value-card p {
  font-size: var(--fs-body);
  color: var(--text-dim);
  line-height: 1.0;
}

/* ─── Contact Section ─── */
.contact-section {
  background: radial-gradient(ellipse at center, rgb(57 255 20 / 2%) 0%, transparent 70%);
}

.contact-layout {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.contact-text {
  font-size: var(--fs-body);
  color: var(--text-dim);
  margin-bottom: 32px;
  line-height: 1.0;
}

.newsletter-form {
  margin-bottom: 40px;
}

.input-group {
  display: flex;
  gap: 0;
  border: 2px solid var(--neon-green);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 15px rgb(57 255 20 / 15%);
  transition: box-shadow 0.3s;
}

.input-group:focus-within {
  box-shadow: 0 0 20px rgb(57 255 20 / 30%), 0 0 40px rgb(57 255 20 / 10%);
}

.input-field {
  flex: 1;
  background: var(--bg-panel);
  border: none;
  padding: 16px 20px;
  color: var(--neon-green);
  font-family: var(--font-pixel);
  font-size: var(--fs-input);
  letter-spacing: 2px;
  outline: none;
}

.input-field::placeholder {
  color: var(--text-dark);
}

.form-message {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  margin-top: 12px;
  letter-spacing: 1px;
  min-height: 20px;
}

.form-message.success {
  color: var(--neon-green);
  text-shadow: var(--glow-green);
}

.neon-yellow {
  color: var(--neon-yellow);
}

.contact-real {
  padding: 24px 0 32px;
  text-align: center;
}

.contact-real-tip {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text-dim);
  line-height: 1.0;
  margin-bottom: 20px;
}

.contact-email-link {
  display: inline-block;
  cursor: pointer;
}

.contact-email-img {
  max-width: 100%;
  height: auto;
  opacity: 0.85;
  transition: opacity 0.2s;
}

.contact-email-img:hover {
  opacity: 1;
}

/* ─── What's Next gallery ───
   Upcoming titles sit in a horizontal strip that scrolls once the cards
   outgrow the row, so adding a title never breaks the layout. `safe center`
   centres one or two cards but falls back to the left edge as soon as they
   overflow, which keeps the first card reachable; browsers without it fall
   back to the same left edge. The card is sized to fit the screenshot at its
   natural width. */
.next-intro {
  max-width: 700px;
  margin: 0 auto 32px;
  font-size: var(--fs-body);
  color: var(--text-primary);
  text-align: center;
}

.next-gallery {
  display: flex;
  justify-content: safe center;
  gap: 24px;
  padding-bottom: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-color: var(--neon-cyan) var(--bg-dark);
}

/* The screenshot IS the panel: it fills the card, cropped to the card's own
   ratio, and the copy sits at the bottom on flat black. Content is the only
   child in flow, so flex-end parks it against the floor of the card. */
.next-card {
  position: relative;
  display: flex;
  flex: 0 0 456px;
  flex-direction: column;
  justify-content: flex-end;
  max-width: 100%;
  min-height: 600px;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 4px;
  background: var(--bg-dark);
  scroll-snap-align: center;
  text-align: left;
  overflow: hidden;
}

/* Cropped to the card's ratio rather than squashed, so the art keeps its
   proportions whatever the source dimensions are. */
.next-bg {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The fade. Clear over the top of the card, then settling at 40% black and
   holding it to the floor, so 60% of the art still shines through behind the
   copy. The copy carries its own shadow to stay legible over whatever the
   screenshot puts there. */
.next-card::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 38%,
    rgb(10 10 14 / 25%) 52%,
    rgb(10 10 14 / 40%) 66%,
    rgb(10 10 14 / 40%) 100%
  );
  pointer-events: none;
}

.next-body {
  position: relative;
  z-index: 2;
  padding: 20px;
}

/* Banner for a title that is not a real thing yet. Amber rather than the
   card's cyan, so it reads as a caution and not as decoration. The card clips,
   so it cannot bleed past the corners. */
.next-banner {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
  padding: 8px 0;
  background: rgb(255 176 0 / 92%);
  font-family: var(--font-pixel);
  font-size: var(--fs-badge);
  color: var(--bg-dark);
  letter-spacing: 3px;
  text-align: center;
}

/* The phosphor recipe from docs/memory/phosphor-crt-effect.md: the glyph core
   is near-white and every bit of colour lives in the shadow behind it. Cyan
   text under a cyan halo has no hot centre to read, so at this size it just
   smears. The full --glow-cyan is built for the 90px section titles; its 30px
   outer wash is wider than these letters are tall, so the halo stops at 14px. */
.next-name {
  margin-bottom: 16px;
  font-family: var(--font-pixel);
  font-size: var(--fs-nav);
  color: #d6feff;
  letter-spacing: 2px;
  text-shadow:
    0 0 5px rgb(0 255 255 / 85%),
    0 0 14px rgb(0 255 255 / 45%),
    0 2px 6px rgb(0 0 0 / 90%);
}

/* One step down the --fs- scale from body (32px), to buy back some height. The
   shadow is what keeps the copy readable now that the screenshot shows through
   behind it at half strength. */
.next-card .game-desc,
.next-card .memo-sign {
  margin-bottom: 0;
  font-size: var(--fs-caption);
  text-shadow:
    0 1px 3px rgb(0 0 0 / 95%),
    0 0 12px rgb(0 0 0 / 80%);
}

/* Prev/next for the gallery. The script hides the whole row while everything
   fits and greys out an arrow at each end, so the controls only ever appear
   when there is somewhere to go. */
.next-controls {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
}

.next-controls[hidden] {
  display: none;
}

.next-arrow {
  padding: 10px 20px;
  border: 1px solid var(--neon-cyan);
  border-radius: 4px;
  background: none;
  font-family: var(--font-pixel);
  font-size: var(--fs-nav);
  color: var(--neon-cyan);
  letter-spacing: 2px;
  cursor: pointer;
  transition: box-shadow 0.3s, color 0.3s, border-color 0.3s;
}

.next-arrow:hover:not(:disabled),
.next-arrow:focus-visible:not(:disabled) {
  box-shadow: var(--glow-cyan);
}

.next-arrow:disabled {
  border-color: rgb(255 255 255 / 10%);
  color: var(--text-dark);
  cursor: default;
}

.next-actions {
  margin-top: 32px;
  text-align: center;
}

/* ─── Footer ─── */
.footer {
  position: relative;
  z-index: 1;
  padding: 40px 0;
  border-top: 1px solid rgb(255 255 255 / 6%);
  background: rgb(0 0 0 / 30%);
}

.footer-inner {
  text-align: center;
}

.footer-logo {
  font-family: var(--font-pixel);
  font-size: var(--fs-footer);
  color: var(--text-primary);
  letter-spacing: 2px;
  margin-bottom: 20px;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 24px;
}

.footer-links a {
  font-family: var(--font-pixel);
  font-size: var(--fs-footer);
  color: var(--text-dark);
  text-decoration: none;
  letter-spacing: 2px;
  transition: color 0.3s;
}

.footer-links a:hover {
  color: var(--neon-magenta);
}

.footer-copy p {
  font-family: var(--font-pixel);
  font-size: var(--fs-footer);
  color: var(--text-dark);
  letter-spacing: 1px;
}

.footer-sub {
  margin-top: 8px;
  opacity: 0.5;
}

/* ─── Marvin DM Popup ─── */
.marvin-dm {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 50000;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
  background: rgb(0 0 0 / 80%);
  backdrop-filter: blur(4px);
}

.marvin-dm.visible {
  display: flex;
}

.dm-window {
  background: #1a1a24;
  border: 1px solid rgb(0 255 255 / 30%);
  border-radius: 12px;
  width: 90%;
  max-width: 440px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 40px rgb(0 0 0 / 80%), 0 0 20px rgb(0 255 255 / 15%), 0 0 60px rgb(0 255 255 / 5%);
  transform: translateY(20px);
  transition: transform 0.4s ease;
}

.marvin-dm.visible .dm-window {
  transform: translateY(0);
}

.dm-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid rgb(255 255 255 / 8%);
}

.dm-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--neon-magenta);
  flex-shrink: 0;
  object-fit: cover;
}

.dm-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.dm-name {
  font-family: var(--font-pixel);
  font-size: var(--fs-caption);
  color: #fff;
  letter-spacing: 1px;
}

.dm-handle {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text-dark);
}

.dm-close {
  background: none;
  border: none;
  color: var(--text-dark);
  font-size: 28px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color 0.2s;
}

.dm-close:hover {
  color: var(--neon-magenta);
}

.dm-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 200px;
  max-height: 50vh;
}

.dm-bubble {
  background: rgb(0 255 255 / 8%);
  border: 1px solid rgb(0 255 255 / 15%);
  border-radius: 4px 12px 12px;
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text-dim);
  line-height: 1.0;
  max-width: 90%;
  animation: dm-fade-in 0.3s ease;
}

@keyframes dm-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* DM typing indicator */
.dm-typing {
  background: rgb(0 255 255 / 5%);
  border-color: rgb(0 255 255 / 10%);
  display: flex;
  gap: 6px;
  padding: 16px 20px;
  min-width: 60px;
}

.typing-dot {
  display: block;
  width: 8px;
  height: 8px;
  background: var(--neon-cyan);
  border-radius: 50%;
  opacity: 0.4;
  animation: typing-bounce 1.4s ease-in-out infinite;
}

.typing-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing-bounce {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }

  30% {
    transform: translateY(-6px);
    opacity: 1;
  }
}

/* User message bubble */
.dm-bubble-user {
  background: rgb(255 0 255 / 12%);
  border-color: rgb(255 0 255 / 20%);
  border-radius: 12px 4px 12px 12px;
  align-self: flex-end;
  color: var(--text-primary);
}

/* System message */
.dm-system {
  text-align: center;
  font-family: var(--font-pixel);
  font-size: 10px;
  color: var(--neon-magenta);
  letter-spacing: 1px;
  padding: 12px 0;
  opacity: 0.8;
  animation: dm-fade-in 0.3s ease;
}

/* DM input form */
.dm-input-form {
  display: flex;
  align-items: center;
  border-top: 1px solid rgb(255 255 255 / 8%);
}

.dm-input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 14px 20px;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text-primary);
  outline: none;
}

.dm-input::placeholder {
  color: var(--text-dark);
}

.dm-input:disabled {
  opacity: 0.3;
}

.dm-send {
  font-family: var(--font-pixel);
  font-size: 10px;
  color: var(--neon-cyan);
  background: transparent;
  border: none;
  padding: 14px 20px;
  cursor: pointer;
  letter-spacing: 2px;
  transition: color 0.2s;
}

.dm-send:hover {
  color: #fff;
}

.dm-send:disabled {
  cursor: default;
}

.dm-send-blocked {
  color: var(--neon-magenta);
  opacity: 0.5;
}

/* ─── Marvin's Widgets ─── */
.marvin-widgets {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 49000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  animation: widget-entrance 0.6s ease 1s both;
}

@keyframes widget-entrance {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.widget-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #1a1a24;
  border: 1px solid rgb(0 255 255 / 30%);
  color: var(--neon-cyan);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, color 0.2s, box-shadow 0.2s;
  box-shadow: 0 0 10px rgb(0 255 255 / 10%);
}

.widget-btn:hover,
.widget-btn.active {
  border-color: var(--neon-magenta);
  color: var(--neon-magenta);
  box-shadow: var(--glow-magenta);
}

.widget-panel {
  position: absolute;
  bottom: 124px;
  right: 0;
  display: flex;
  flex-direction: column;
  visibility: hidden;
  pointer-events: none;
  width: min(380px, calc(100vw - 48px));
  max-height: 60vh;
  background: #1a1a24;
  border: 1px solid rgb(0 255 255 / 30%);
  border-radius: 12px;
  box-shadow: 0 0 40px rgb(0 0 0 / 80%), 0 0 20px rgb(0 255 255 / 15%), 0 0 60px rgb(0 255 255 / 5%);
  transform: translateY(10px);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s;
}

.widget-panel.open {
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  opacity: 1;
}

.widget-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid rgb(255 255 255 / 8%);
}

.widget-panel-title {
  flex: 1;
  font-family: var(--font-pixel);
  font-size: 10px;
  color: var(--neon-cyan);
  letter-spacing: 2px;
}

.widget-panel-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 150px;
  max-height: 45vh;
}

.widget-panel-form {
  border-top: 1px solid rgb(255 255 255 / 8%);
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .widget-btn {
    width: 44px;
    height: 44px;
  }

  .widget-btn svg {
    width: 18px;
    height: 18px;
  }

  .marvin-widgets {
    bottom: 16px;
    right: 16px;
  }
}

/* ─── Animations ─── */
@keyframes glow-magenta {
  from {
    text-shadow:
      0 0 10px rgb(255 0 255 / 80%),
      0 0 30px rgb(255 0 255 / 60%),
      0 0 60px rgb(255 0 255 / 40%),
      0 0 100px rgb(255 0 255 / 20%);
  }
  to {
    text-shadow:
      0 0 15px rgb(255 0 255 / 100%),
      0 0 40px rgb(255 0 255 / 70%),
      0 0 80px rgb(255 0 255 / 50%),
      0 0 120px rgb(255 0 255 / 30%);
  }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes pulse-opacity {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes btn-pulse {
  0%, 100% {
    box-shadow: 0 0 7px var(--neon-magenta), 0 0 15px rgb(255 0 255 / 30%);
  }
  50% {
    box-shadow: 0 0 15px var(--neon-magenta), 0 0 30px rgb(255 0 255 / 50%), 0 0 50px rgb(255 0 255 / 20%);
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
  40% { transform: translateX(-50%) translateY(-10px); }
  60% { transform: translateX(-50%) translateY(-5px); }
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ─── Fade-in on Scroll ─── */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger child animations */
.crew-layout .crew-card:nth-child(2) { transition-delay: 0.15s; }
.mission-values .value-card:nth-child(1) { transition-delay: 0.1s; }
.mission-values .value-card:nth-child(2) { transition-delay: 0.2s; }
.mission-values .value-card:nth-child(3) { transition-delay: 0.3s; }

/* ─── Logo Graveyard Section ─── */
.logo-section {
  background: linear-gradient(180deg, transparent, rgb(255 230 0 / 2%) 50%, transparent);
}

.section-title.neon-yellow {
  color: var(--neon-yellow);
  text-shadow: 0 0 7px var(--neon-yellow), 0 0 15px rgb(255 230 0 / 50%), 0 0 30px rgb(255 230 0 / 20%);
}

.section-line.yellow {
  background: linear-gradient(90deg, transparent, var(--neon-yellow), transparent);
}

.logo-intro {
  max-width: 800px;
  margin: 0 auto 64px;
}

.marvin-memo {
  background: var(--bg-card);
  border: 1px solid rgb(255 230 0 / 20%);
  border-left: 3px solid var(--neon-yellow);
  padding: 32px;
  font-size: var(--fs-body);
  line-height: 1.0;
  margin-bottom: -0.3em;
  color: var(--text-dim);
}

.memo-header {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-pixel);
  font-size: var(--fs-badge);
  color: var(--neon-yellow);
  letter-spacing: 2px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgb(255 230 0 / 10%);
}

.marvin-memo p {
  margin-bottom: 12px;
}

.memo-sign {
  color: var(--text-dark);
  font-style: italic;
  margin-top: 20px;
}

.logo-graveyard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  margin-bottom: 64px;
}

.logo-tombstone {
  background: var(--bg-card);
  border: 1px solid rgb(255 230 0 / 10%);
  padding: 32px;
  text-align: center;
  position: relative;
  transition: border-color 0.3s;
  overflow: hidden;
}

.logo-tombstone:hover {
  border-color: rgb(255 230 0 / 30%);
}

.tombstone-badge {
  font-family: var(--font-pixel);
  font-size: var(--fs-badge);
  color: #000;
  background: var(--neon-yellow);
  display: inline-block;
  padding: 4px 12px;
  letter-spacing: 2px;
  margin-bottom: 24px;
  position: absolute;
  top: -1px;
  right: -1px;
}

.logo-display {
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

/* ASCII logo */
.logo-ascii pre {
  font-family: 'Courier New', Courier, monospace;
  font-size: var(--fs-caption);
  color: var(--neon-green);
  text-shadow: 0 0 5px rgb(57 255 20 / 40%);
  line-height: 1.1;
  text-align: left;
  display: inline-block;
  margin: 0;
  padding: 0;
}

/* Corporate logo */
.logo-corporate {
  flex-direction: column;
}

.corp-logo {
  font-family: 'Georgia', serif;
  font-size: clamp(18px, 4vw, var(--fs-card-title));
  color: #999;
  letter-spacing: 4px;
  font-weight: 300;
}

.corp-logo em {
  font-style: normal;
  color: #bbb;
  font-weight: 600;
}

.corp-tm {
  font-size: var(--fs-caption);
  color: #555;
  margin-top: 4px;
}

/* Neon logo */
.neon-logo-text {
  font-family: var(--font-pixel);
  font-size: clamp(12px, 4vw, var(--fs-stat-value));
  color: #fff;
  text-shadow: var(--glow-magenta);
  letter-spacing: 3px;
}

.neon-logo-text .neon-accent {
  color: var(--neon-magenta);
}

/* Minimal logo */
.minimal-u, .minimal-h {
  font-family: var(--font-pixel);
  font-size: var(--fs-quote-mark);
  color: #fff;
  letter-spacing: 2px;
}

.minimal-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--neon-cyan);
  border-radius: 50%;
  margin: 0 12px;
  box-shadow: 0 0 8px var(--neon-cyan);
  vertical-align: middle;
}

/* Glitch logo */
.logo-glitch span {
  font-family: var(--font-pixel);
  font-size: var(--fs-body-lead);
  color: #fff;
  position: relative;
  letter-spacing: 4px;
}

.logo-glitch span::before,
.logo-glitch span::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.logo-glitch span::before {
  color: var(--neon-cyan);
  animation: glitch-1 3s infinite linear;
  clip-path: inset(0 0 65% 0);
}

.logo-glitch span::after {
  color: var(--neon-magenta);
  animation: glitch-2 3s infinite linear;
  clip-path: inset(35% 0 0 0);
}

/* Void logo */
.void-brackets {
  font-family: var(--font-pixel);
  font-size: var(--fs-stat-value);
  color: rgb(255 230 0 / 30%);
  letter-spacing: 2px;
}

/* Epitaphs */
.tombstone-epitaph {
  font-size: var(--fs-body);
  color: var(--text-dark);
  font-style: italic;
  line-height: 1.0;
}

/* Conclusion */
.logo-conclusion {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.logo-conclusion .crew-quote {
  margin-bottom: 24px;
}

.conclusion-note {
  font-family: var(--font-mono);
  font-size: var(--fs-section-tag);
  color: var(--text-dark);
  letter-spacing: 2px;
}

.conclusion-footnote {
  margin-top: 32px;
  font-size: var(--fs-body);
  color: var(--text-dark);
  font-style: italic;
  line-height: 1.0;
  margin-bottom: -0.3em;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Glitch keyframes */
@keyframes glitch-1 {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-3px, 2px); }
  40% { transform: translate(3px, -1px); }
  60% { transform: translate(-1px, 1px); }
  80% { transform: translate(2px, -2px); }
}

@keyframes glitch-2 {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(3px, -2px); }
  40% { transform: translate(-2px, 1px); }
  60% { transform: translate(1px, -1px); }
  80% { transform: translate(-3px, 2px); }
}

/* Stagger tombstone fade-in */
.logo-graveyard .logo-tombstone:nth-child(1) { transition-delay: 0s; }
.logo-graveyard .logo-tombstone:nth-child(2) { transition-delay: 0.1s; }
.logo-graveyard .logo-tombstone:nth-child(3) { transition-delay: 0.15s; }
.logo-graveyard .logo-tombstone:nth-child(4) { transition-delay: 0.2s; }
.logo-graveyard .logo-tombstone:nth-child(5) { transition-delay: 0.25s; }
.logo-graveyard .logo-tombstone:nth-child(6) { transition-delay: 0.3s; }

/* ─── Astro Page ─── */
.page-astro .astro-hero {
  min-height: 60vh;
}

.astro-back-link {
  font-family: var(--font-pixel);
  font-size: var(--fs-badge);
  color: var(--neon-cyan);
  text-decoration: none;
  letter-spacing: 1px;
  transition: text-shadow 0.3s;
}

.astro-back-link:hover {
  text-shadow: var(--glow-cyan);
}

/* Screenshots */
.astro-screenshot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.astro-screenshot {
  width: 100%;
  border: 2px solid var(--neon-magenta);
  border-radius: 4px;
  transition: box-shadow 0.3s, transform 0.3s;
}

.astro-screenshot:hover {
  box-shadow: var(--glow-magenta);
  transform: scale(1.02);
}

.astro-screenshot-placeholder,
.astro-video-placeholder,
.astro-track-placeholder {
  font-family: var(--font-pixel);
  font-size: var(--fs-badge);
  color: var(--text-dim);
  text-align: center;
  padding: 80px 24px;
  border: 2px dashed var(--text-dark);
  border-radius: 8px;
  letter-spacing: 2px;
}

/* Video */
.astro-video-container {
  width: 100%;
  margin: 32px auto 0;
}

.astro-video-container iframe,
.astro-video-container video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 2px solid var(--neon-green);
  border-radius: 4px;
}

/* Soundtrack */
.astro-tracklist {
  max-width: 700px;
  margin: 32px auto 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.astro-track {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 20px;
  background: var(--bg-card);
  border: 1px solid rgb(255 0 255 / 20%);
  border-radius: 4px;
}

.astro-track-name {
  font-family: var(--font-pixel);
  font-size: var(--fs-badge);
  color: var(--neon-magenta);
  white-space: nowrap;
  min-width: 200px;
}

.astro-track audio {
  flex: 1;
  min-width: 0;
  height: 36px;
}

/* ─── Games Index ─── */

/* The astro hero is 60vh with its content centred, which suits a page that has
   badges and a screenshot under the fold. This one is a short list, so 60vh of
   centred hero plus a full section pad left a band of dead black between the
   title and the table. Size the hero to its content instead. */
.page-games .astro-hero {
  min-height: auto;
  padding-bottom: 40px;
}

/* the divider is the last thing in this hero, so its trailing margin is dead */
.page-games .hero-divider {
  margin-bottom: 0;
}

.page-games .section {
  padding-top: 56px;
}

.games-list {
  max-width: 900px;
  margin: 0 auto;
}

.games-head,
.game-row {
  display: grid;
  grid-template-columns: 1fr auto 190px 40px;
  align-items: center;
  gap: 24px;
  padding: 18px 22px;
}

.games-head {
  border-bottom: 1px solid rgb(255 255 255 / 12%);
  font-family: var(--font-pixel);
  font-size: var(--fs-badge);
  color: var(--text-dark);
  letter-spacing: 3px;
}

.game-row {
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 4px;
  margin-top: 14px;
  background: var(--bg-card);
  text-decoration: none;
  transition: border-color 0.3s, background 0.3s, transform 0.3s;
}

.game-row:hover,
.game-row:focus {
  border-color: rgb(0 255 255 / 45%);
  background: #181826;
  transform: translateX(4px);
}

.game-row-name {
  /* phosphor logic: hot near-white core, colour lives in the shadow behind it */
  font-family: var(--font-pixel);
  font-size: 22px;
  color: #d6feff;
  text-shadow: 0 0 5px rgb(0 255 255 / 85%), 0 0 14px rgb(0 255 255 / 45%);
}

.game-row-version {
  font-family: var(--font-pixel);
  font-size: var(--fs-badge);
  color: var(--neon-green);
}

.game-row-date {
  font-size: var(--fs-caption);
  color: var(--text-dim);
}

.game-row-go {
  font-family: var(--font-pixel);
  font-size: var(--fs-badge);
  color: var(--text-dark);
  text-align: right;
  transition: color 0.3s;
}

.game-row:hover .game-row-go,
.game-row:focus .game-row-go {
  color: var(--neon-cyan);
}

.games-note {
  max-width: 900px;
  margin: 32px auto 0;
  font-size: var(--fs-caption);
  color: var(--text-dark);
  text-align: center;
}

@media (width <= 720px) {
  .games-head {
    display: none;
  }

  .game-row {
    grid-template-columns: 1fr auto;
    gap: 6px 16px;
    row-gap: 6px;
  }

  .game-row-date {
    grid-column: 1 / -1;
  }

  .game-row-go {
    display: none;
  }
}

/* ─── Responsive ─── */
@media (max-width: 900px) {
  .game-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .crew-card {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px 24px;
    text-align: center;
  }

  .crew-avatar {
    order: -1;
  }

  .crew-quote {
    text-align: left;
  }

  .mission-values {
    flex-direction: column;
  }

  .mission-inner {
    padding: 36px 24px;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 70%;
    max-width: 300px;
    height: 100vh;
    background: rgb(10 10 14 / 98%);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 32px;
    transition: right 0.4s ease;
    border-left: 1px solid rgb(255 0 255 / 20%);
  }

  .nav-links.open {
    right: 0;
  }

  .logo-graveyard {
    grid-template-columns: 1fr;
  }

  .memo-header {
    flex-direction: column;
  }
}

@media (max-width: 600px) {
  .section {
    padding: 60px 0;
  }

  .section-header {
    margin-bottom: 40px;
  }

  .game-stats {
    gap: 12px;
  }

  .astro-launch-ribbon {
    padding: 18px 0;
    gap: 10px;
  }

  .stat {
    padding: 12px 8px;
  }


  .game-controls-hint {
    flex-direction: column;
    gap: 8px;
  }

  .input-group {
    flex-direction: column;
    border: none;
    gap: 8px;
  }

  .input-field {
    border: 2px solid var(--neon-green);
    border-radius: 4px;
  }

  .btn-submit {
    border-radius: 4px;
  }

  .footer-links {
    flex-direction: column;
    gap: 12px;
  }

  .hero-sub br {
    display: none;
  }

  .astro-screenshot-grid {
    grid-template-columns: 1fr;
  }

  .astro-track {
    flex-direction: column;
    align-items: flex-start;
  }

  .astro-track-name {
    min-width: auto;
  }
}