/* ─────────────────────────────────────────────────────────────────────────
   SITE.CSS — the written pages around the game (how to play, the arena, the
   bosses, multiplayer, about, FAQ, changelog, privacy, terms).

   These are plain static HTML files served straight out of public/. They are
   deliberately NOT part of the Vite bundle: the game's own style.css is built
   around a fullscreen canvas with fixed HUD furniture and would fight a
   scrolling article on every rule. This sheet is small enough to read in one
   sitting and shares only the palette, so the pages look like the game
   without inheriting its layout.

   Dark only, matching the game's default theme. The game lets you switch to
   light because you stare at it for twenty seconds at a time with a chaser on
   your heels; a page of prose has no such problem.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --bg: #0b0f16;
  --panel: #131a25;
  --line: #223047;
  --ink: #eef2f8;
  --dim: #8fa3c0;
  --faint: #5c7391;
  --teal: #46e1d7;
  --amber: #ffd166;
  --red: #ff5252;
  --purple: #b06aff;
  --green: #54e88a;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.65 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 20px 72px;
}

/* ── HEADER ─────────────────────────────────────────────────────────────── */

header.site {
  border-bottom: 1px solid var(--line);
  margin-bottom: 34px;
  padding: 18px 0 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 800;
  letter-spacing: .14em;
  font-size: 15px;
}

.brand svg { width: 44px; height: 18px; display: block; }

/* The nav scrolls sideways rather than wrapping to three ragged lines on a
   phone. Its scrollbar is hidden because it is eight short words, and a
   visible bar under them reads as a broken layout rather than an affordance. */
nav.site {
  display: flex;
  gap: 18px;
  margin: 14px 0 0;
  padding-bottom: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}

nav.site::-webkit-scrollbar { display: none; }

nav.site a {
  color: var(--dim);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  white-space: nowrap;
}

nav.site a:hover { color: var(--ink); }
nav.site a[aria-current="page"] { color: var(--amber); }

/* ── TYPE ───────────────────────────────────────────────────────────────── */

h1 {
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 0 0 10px;
}

h2 {
  font-size: 21px;
  line-height: 1.3;
  margin: 40px 0 12px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

h3 {
  font-size: 16px;
  margin: 26px 0 8px;
  letter-spacing: .06em;
  color: var(--amber);
}

p { margin: 0 0 16px; }

.lede {
  font-size: 18px;
  color: var(--dim);
  margin-bottom: 26px;
}

.muted { color: var(--faint); font-size: 14px; }

a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }

b, strong { color: var(--ink); font-weight: 700; }

ul, ol { margin: 0 0 18px; padding-left: 22px; }
li { margin-bottom: 8px; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 5px;
}

/* ── TABLES ─────────────────────────────────────────────────────────────── */

/* Wrapped in .scroll so a five-column table scrolls INSIDE its own box on a
   phone instead of making the whole page slide sideways. */
.scroll { overflow-x: auto; margin: 0 0 20px; }

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 460px;
  font-size: 14px;
}

th, td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

th {
  color: var(--dim);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
}

/* ── CARDS ──────────────────────────────────────────────────────────────── */

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 0 0 14px;
}

.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

/* THE TITLE FOLLOWS THE STRIP, NOT THE OTHER TWO GLOBAL RULES FIGHTING OVER IT.
   Unqualified `h3` sets amber (below) and unqualified `a` sets teal — same
   specificity, so source order alone decided the colour, and neither rule knew
   the card existed. A card's <h3> was amber when it held plain text (arena.html,
   bosses.html — every red/purple/green card title read amber) and teal when it
   held a link (the chase-games hub), regardless of which colour the strip
   actually was.
   `.card.<colour> h3` is two classes deep so it outranks bare `h3` outright, and
   `.card h3 a { color: inherit }` is specific enough to beat bare `a` too — so a
   linked title now takes the colour ITS card resolved, not teal by default. */
.card h3 a { color: inherit; }
.card.teal   h3 { color: var(--teal); }
.card.amber  h3 { color: var(--amber); }
.card.red    h3 { color: var(--red); }
.card.purple h3 { color: var(--purple); }
.card.green  h3 { color: var(--green); }

/* A left rule in the subject's colour — the arena is amber, quick play teal,
   the chasers red, exactly as in the game. */
.card.teal   { border-left: 3px solid var(--teal); }
.card.amber  { border-left: 3px solid var(--amber); }
.card.red    { border-left: 3px solid var(--red); }
.card.purple { border-left: 3px solid var(--purple); }
.card.green  { border-left: 3px solid var(--green); }

.note {
  border-left: 3px solid var(--amber);
  background: rgba(255, 209, 102, .06);
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
  margin: 0 0 20px;
  font-size: 15px;
}

.note p:last-child { margin-bottom: 0; }

/* ── PLAY BUTTON ────────────────────────────────────────────────────────── */

.play {
  display: inline-block;
  background: var(--teal);
  color: #04231f;
  font-weight: 800;
  letter-spacing: .12em;
  font-size: 15px;
  padding: 13px 26px;
  border-radius: 10px;
  margin: 6px 0 28px;
}

.play:hover { text-decoration: none; filter: brightness(1.08); }

/* ── SCREENSHOTS ────────────────────────────────────────────────────────── */

/* These pages went out as nine solid walls of text about a game you cannot
   see, which is a poor way to explain anything visual. The shots are the ones
   already shipped for the store listing (public/covers/play-screenshots), so
   nothing new is added to the bundle.

   They are PORTRAIT PHONE captures — 1080x2160, a 1:2 ratio — so they are
   capped by height rather than width. Left at 100% width a single screenshot
   would be twice as tall as the reader's viewport and push the whole article
   off screen. */
figure.shot {
  margin: 28px 0;
  text-align: center;
}

figure.shot img {
  max-width: 100%;
  max-height: 62vh;
  width: auto;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--line);
  display: block;
  margin: 0 auto;
}

figure.shot figcaption {
  margin-top: 10px;
  color: var(--faint);
  font-size: 13px;
  line-height: 1.5;
}

/* two shots side by side where a comparison earns it; stacks under 560px */
.shotRow {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 28px 0;
}

.shotRow figure.shot {
  margin: 0;
  flex: 1 1 220px;
  max-width: 280px;
}

.shotRow figure.shot img { max-height: 52vh; }

/* ── AD SLOT ────────────────────────────────────────────────────────────── */

/* One per page, between sections, never inside a run of prose. No reserved
   min-height: an unfilled unit collapses to nothing, which is better than a
   labelled empty box sitting in the middle of the article — and until the
   account is approved, unfilled is every one of them. */
.ad {
  display: block;
  margin: 34px 0;
  overflow: hidden;
}

.ad ins { display: block; }

/* COLLAPSE AN EMPTY SLOT. AdSense sets data-ad-status="unfilled" when it has
   nothing to serve, and in that state it does NOT always collapse the unit —
   it holds the slot at its requested height and paints the ad iframe's own
   white background, which on this page is a 280px white slab dropped into the
   middle of dark prose. (The <ins> and the iframe are both transparent; the
   white is the placeholder document Google loads inside it.)

   Collapsing on the attribute is Google's own documented answer. It is not a
   pre-approval workaround to be removed later: while the account is unapproved
   every impression is unfilled, so this hides all of them, and afterwards it
   hides only the ones that genuinely came back empty — which is what you want
   either way. A blank reserved box is worse than no box. */
ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }

/* ── FOOTER ─────────────────────────────────────────────────────────────── */

footer.site {
  border-top: 1px solid var(--line);
  margin-top: 52px;
  padding-top: 22px;
  color: var(--faint);
  font-size: 13px;
}

footer.site nav {
  display: flex;
  flex-wrap: wrap;
  /* Measured, not guessed: at the .wrap column's fixed 680px content width,
     the ten links need 700px at this gap — Terms alone dropped to a second
     row on every desktop size, since .wrap caps out well before any viewport
     does. 14px closes that to 664px, a real margin rather than a hairline
     fit. Font size is untouched; the gap was the only lever that didn't cost
     legibility. Still wraps on a narrow phone, where ten real links cannot
     fit one line at any gap — that fallback is correct, not a compromise. */
  gap: 8px 14px;
  margin-bottom: 16px;
}

footer.site a { color: var(--dim); font-weight: 600; }

@media (max-width: 480px) {
  h1 { font-size: 26px; }
  .lede { font-size: 17px; }
}