/* Outer Space: landing page and manual.
   Same skin as the web client (web-client/src/styles.css): indigo panels with
   bevelled metal frames, amber accents, Chakra Petch for display text and
   Share Tech Mono for readouts. No build step, no external requests. */

@font-face { font-family: "Chakra Petch"; font-weight: 400; font-display: swap; src: url("fonts/chakra-petch-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-weight: 500; font-display: swap; src: url("fonts/chakra-petch-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-weight: 600; font-display: swap; src: url("fonts/chakra-petch-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-weight: 700; font-display: swap; src: url("fonts/chakra-petch-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Share Tech Mono"; font-weight: 400; font-display: swap; src: url("fonts/share-tech-mono-latin-400-normal.woff2") format("woff2"); }

:root {
  --font-display: "Chakra Petch", "DejaVu Sans", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "DejaVu Sans", sans-serif;
  --font-mono: "Share Tech Mono", "DejaVu Sans Mono", Consolas, monospace;

  --bg: #000006;
  --fg: #e8ecff;
  --muted: #aab4dc;
  --panel: #262e52;
  --inset: #161c38;
  --accent: #ffc94a;
  --accent-dim: #b8862a;
  --readout: #bfeaff;
  --good: #8ef0a8;
  --frame-light: #8a9be0;
  --frame-dark: #080b1c;
  --grid: rgba(160, 180, 255, 0.14);
  --panel-grad: linear-gradient(180deg, #2b3460 0%, #232a4d 100%);
  --plate-grad: linear-gradient(180deg, #46549c 0%, #2e3874 55%, #262f63 100%);
  --button-grad: linear-gradient(180deg, #4d5ba0 0%, #36427a 100%);
  --button-grad-hover: linear-gradient(180deg, #5d6cbc 0%, #42509a 100%);
  --primary-grad: linear-gradient(180deg, #ffd977 0%, #e0a93a 55%, #b9821f 100%);
  --bevel: inset 1px 1px 0 rgba(255, 255, 255, 0.28), inset -1px -1px 0 rgba(0, 0, 0, 0.45);
  --chamfer: 0.7rem;
  --wrap: 72rem;

  color-scheme: dark;
  color: var(--fg);
  background: var(--bg);
  font-family: var(--font-body);
  line-height: 1.6;
  font-size: 17px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  /* A faint star field and the map grid, both pure CSS. */
  background:
    radial-gradient(1px 1px at 12% 18%, #fff8 50%, transparent 51%),
    radial-gradient(1px 1px at 67% 9%, #fff6 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 84% 41%, #ffe9a088 50%, transparent 51%),
    radial-gradient(1px 1px at 31% 63%, #fff5 50%, transparent 51%),
    radial-gradient(1px 1px at 52% 87%, #bfeaff77 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 6% 92%, #fff6 50%, transparent 51%),
    radial-gradient(1px 1px at 93% 76%, #fff5 50%, transparent 51%),
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 100% 12rem,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 12rem 100%,
    var(--bg);
  background-attachment: fixed;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--readout); text-underline-offset: 0.15em; }
a:hover { color: #fff; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.15;
  margin: 0 0 0.6em;
}
h2 { font-size: 2rem; }
h3 { font-size: 1.25rem; color: var(--accent); }
p { margin: 0 0 1em; }

code, kbd, .mono { font-family: var(--font-mono); }
kbd {
  display: inline-block;
  padding: 0 0.35em;
  border: 1px solid var(--frame-dark);
  background: var(--button-grad);
  box-shadow: var(--bevel);
  font-size: 0.85em;
}

.wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; }

/* ---------- Top bar (echoes the game's tab bar) ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: linear-gradient(180deg, #232b55, #161b36);
  border-bottom: 1px solid var(--frame-dark);
  box-shadow: 0 1px 0 rgba(138, 155, 224, 0.35), 0 6px 20px #0008;
}
.topbar .wrap { display: flex; align-items: center; gap: 1rem; min-height: 3.2rem; }
.brand {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg); text-decoration: none;
}
.brand img { width: 1.6rem; height: 1.6rem; }
.topbar nav { display: flex; gap: 0.2rem; margin-left: auto; flex-wrap: wrap; }
.topbar nav a {
  font-family: var(--font-display); font-weight: 600; font-size: 0.85rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; padding: 0.4rem 0.7rem;
}
.topbar nav a:hover, .topbar nav a[aria-current="page"] { color: var(--accent); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  border: 1px solid var(--frame-dark);
  background: #36427a var(--button-grad);
  box-shadow: var(--bevel);
  color: var(--fg);
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
}
.btn:hover { background: #42509a var(--button-grad-hover); color: #fff; }
.btn.primary { background: #e0a93a var(--primary-grad); color: #1b1503; }
.btn.primary:hover { filter: brightness(1.08); color: #000; }
.btn.small { padding: 0.35rem 0.9rem; font-size: 0.8rem; }

/* ---------- Panels ---------- */
.panel {
  background: var(--panel) var(--panel-grad);
  border: 1px solid var(--frame-dark);
  box-shadow: var(--bevel), 0 0 0 1px rgba(138, 155, 224, 0.25), 0 10px 30px #0009;
  padding: 1.4rem 1.5rem;
}
.plate {
  display: inline-block;
  margin: -1.4rem 0 1rem -1.5rem;
  padding: 0.3rem 1.4rem 0.3rem 1.5rem;
  background: var(--plate-grad);
  box-shadow: var(--bevel);
  font-family: var(--font-display); font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--chamfer)) 100%, 0 100%);
}

.screenshot {
  margin: 0;
  border: 1px solid var(--frame-dark);
  box-shadow: 0 0 0 1px var(--frame-light), 0 0 0 4px #161b36, 0 0 0 5px rgba(138, 155, 224, 0.5), 0 20px 50px #000c;
  background: #000;
}
.screenshot a { display: block; }
figure figcaption, .caption {
  font-size: 0.85rem; color: var(--muted); margin-top: 0.7rem;
}

/* ---------- Landing ---------- */
.hero { padding: 4.5rem 0 3.5rem; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; align-items: center; }
.eyebrow {
  font-family: var(--font-mono); color: var(--readout); letter-spacing: 0.12em;
  text-transform: uppercase; font-size: 0.85rem; margin-bottom: 1rem;
}
.hero h1 { font-size: clamp(2.4rem, 4.6vw, 3.6rem); text-transform: uppercase; letter-spacing: 0.04em; }
.hero h1 span { color: var(--accent); display: block; }
.hero .lead { font-size: 1.2rem; color: #d4dbff; }
.cta { display: flex; gap: 0.8rem; flex-wrap: wrap; margin: 1.8rem 0 1rem; }
.hero .note { font-size: 0.85rem; color: var(--muted); }

.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--frame-dark); border: 1px solid var(--frame-dark);
  box-shadow: 0 0 0 1px rgba(138, 155, 224, 0.25);
  margin-bottom: 4rem;
}
.stats div { background: var(--inset); padding: 1rem 1.2rem; box-shadow: inset 1px 1px 0 #0008; }
.stats b { display: block; font-family: var(--font-mono); font-weight: 400; font-size: 2rem; color: var(--readout); line-height: 1.1; }
.stats span { font-size: 0.85rem; color: var(--muted); }

section { padding: 3rem 0; }
.section-head { max-width: 46rem; margin-bottom: 2rem; }
.section-head p { color: #cfd6f6; font-size: 1.05rem; }

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.feature h3 { display: flex; align-items: center; gap: 0.6rem; }
.feature h3 img { width: 37px; height: 37px; flex: none; border: 1px solid var(--frame-dark); box-shadow: 0 0 0 1px rgba(138, 155, 224, 0.35); }
.feature p { color: #cfd6f6; margin: 0; }

.showcase { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2.5rem; align-items: center; margin-bottom: 4rem; }
.showcase.flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.showcase.flip .screenshot { order: 2; }
.showcase ul { padding-left: 1.2rem; color: #cfd6f6; }
.showcase li { margin-bottom: 0.4rem; }

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.gallery figure { margin: 0; }

.pace { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.pace .panel b { font-family: var(--font-mono); font-weight: 400; color: var(--readout); font-size: 1.6rem; display: block; }

.final-cta { text-align: center; padding: 4rem 0 5rem; }
.final-cta h2 { font-size: 2.4rem; text-transform: uppercase; }
.final-cta .cta { justify-content: center; }

footer {
  border-top: 1px solid var(--frame-dark);
  box-shadow: 0 -1px 0 rgba(138, 155, 224, 0.25);
  background: #0a0d1f;
  color: var(--muted);
  font-size: 0.85rem;
  padding: 1.6rem 0;
}
footer .wrap { display: flex; gap: 1rem 2rem; flex-wrap: wrap; justify-content: space-between; }
footer p { margin: 0; }

/* ---------- Manual ---------- */
.manual { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 2.5rem; padding: 2.5rem 0 4rem; }
.toc { position: sticky; top: 4.5rem; align-self: start; max-height: calc(100vh - 5.5rem); overflow: auto; }
.toc .panel { padding: 1.4rem 1rem 1rem 1.5rem; }
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a {
  display: block; padding: 0.25rem 0; text-decoration: none; color: var(--muted);
  font-family: var(--font-display); font-weight: 500; font-size: 0.92rem;
}
.toc a::before { content: counter(toc, decimal-leading-zero) "  "; font-family: var(--font-mono); color: var(--accent-dim); }
.toc a:hover { color: var(--accent); }

.doc { max-width: 50rem; }
.doc > header h1 { font-size: 2.6rem; text-transform: uppercase; }
.doc > header .lead { font-size: 1.15rem; color: #d4dbff; }
.doc section { padding: 2.5rem 0 0.5rem; border-top: 1px solid rgba(138, 155, 224, 0.2); margin-top: 1.5rem; }
.doc section > h2::before {
  content: attr(data-n); display: block;
  font-family: var(--font-mono); font-size: 0.85rem; font-weight: 400;
  color: var(--accent-dim); letter-spacing: 0.2em; margin-bottom: 0.4rem;
}
.doc h3 { margin-top: 1.8rem; }
.doc ul, .doc ol { padding-left: 1.3rem; }
.doc li { margin-bottom: 0.35rem; }
.doc figure { margin: 1.5rem 0 2rem; }
.doc .screenshot { max-width: 100%; }

.steps { list-style: none; padding: 0 !important; counter-reset: step; }
.steps > li {
  counter-increment: step; position: relative; padding-left: 3rem; margin-bottom: 1rem !important;
}
.steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 2rem; height: 2rem; display: grid; place-items: center;
  font-family: var(--font-mono); color: #1b1503; background: var(--primary-grad);
  clip-path: polygon(0.4rem 0, 100% 0, 100% calc(100% - 0.4rem), calc(100% - 0.4rem) 100%, 0 100%, 0 0.4rem);
}

.callout {
  border-left: 3px solid var(--accent);
  background: rgba(22, 28, 56, 0.85);
  padding: 0.9rem 1.2rem;
  margin: 1.4rem 0;
}
.callout.tip { border-left-color: var(--good); }
.callout b:first-child { font-family: var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.85rem; color: var(--accent); margin-right: 0.4rem; }
.callout.tip b:first-child { color: var(--good); }
.callout p:last-child { margin-bottom: 0; }

table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: 0.95rem; }
th, td { text-align: left; padding: 0.5rem 0.7rem; border-bottom: 1px solid rgba(138, 155, 224, 0.2); vertical-align: top; }
th { font-family: var(--font-display); font-weight: 600; color: var(--accent); background: rgba(22, 28, 56, 0.85); letter-spacing: 0.04em; }
td:first-child { white-space: nowrap; font-family: var(--font-display); font-weight: 600; }

dl.glossary { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1.2rem; }
dl.glossary dt { font-family: var(--font-display); font-weight: 600; color: var(--readout); }
dl.glossary dd { margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero .wrap, .showcase, .showcase.flip { grid-template-columns: 1fr; }
  .showcase.flip .screenshot { order: 0; }
  .features, .gallery, .pace { grid-template-columns: 1fr 1fr; }
  .manual { grid-template-columns: 1fr; }
  .toc { position: static; max-height: none; }
}
@media (max-width: 640px) {
  :root { font-size: 16px; }
  .features, .gallery, .pace, .stats { grid-template-columns: 1fr; }
  .topbar nav a { padding: 0.4rem; font-size: 0.75rem; }
  .hero { padding-top: 2.5rem; }
  dl.glossary { grid-template-columns: 1fr; }
}
.doc figure.narrow { max-width: 28rem; }
.gallery .screenshot img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; width: 100%; }
.brand { white-space: nowrap; }
.doc section { scroll-margin-top: 2.5rem; }
@media (max-width: 640px) {
  .topbar nav a:not(.btn):not([href="manual.html"]) { display: none; }
  .brand { font-size: 1rem; }
}