/* ============================================================================
   vulpecula.games — one stylesheet for the whole site.

   The palette, the type stack and the wordmark treatment are LIFTED FROM THE
   GAME, not re-picked by eye: the tokens below are The Far Carry's own
   `:root` values (index.html) and `scripts/banner.mjs`'s wordmark, so the
   store banner, the game's title screen and this site read as one thing.

   Dark only, on purpose. The game has no light theme, and a site that flips
   to white beside a black embed reads as two products.

   No web fonts, no third-party CSS, no trackers. Everything here is served
   from this origin.
   ========================================================================= */

:root {
  /* --- The game's own tokens (src index.html :root) ---------------------- */
  --bg: #0b0d12;          /* --gs-bg */
  --bg2: #11141b;         /* --gs-bg-2, the card fill */
  --bg3: #171b24;         /* one step up again, for raised rows */
  --ink: #ecffe9;         /* .gs-hero-title — a warmer white than the body ink */
  --text: #c8ccd4;        /* body copy */
  --dim: #8f97a6;         /* captions, meta */
  --accent: #5fd45a;      /* --gs-accent */
  --accent-soft: rgba(95, 212, 90, 0.14);
  --gold: #ffce54;
  --blue: #54c8ff;
  --violet: #b07dff;
  --warn: #ffc454;
  --line: rgba(236, 255, 233, 0.10);
  --line-strong: rgba(236, 255, 233, 0.20);

  --font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --col: 1080px;          /* content column */
  --col-narrow: 760px;    /* prose column — long text wants a shorter line */
  --radius: 16px;
  --pad: 20px;
}

/* --- Reset-ish ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 86px; /* the sticky header, so an anchor never lands under it */
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background-color: var(--bg);
  /* THE SKY IS A BACKGROUND LAYER, NOT AN ELEMENT (the game does the same —
     GS-space-sky). `--sky` is a seeded seamless star tile written by
     assets/js/sky.js at boot; with JS off the nebula washes below still paint,
     so the page is never a flat black rectangle. */
  background-image:
    radial-gradient(58% 44% at 12% 8%, rgba(59, 107, 214, 0.14) 0%, rgba(59, 107, 214, 0) 70%),
    radial-gradient(52% 40% at 88% 22%, rgba(194, 59, 143, 0.11) 0%, rgba(194, 59, 143, 0) 70%),
    radial-gradient(64% 48% at 78% 82%, rgba(47, 163, 154, 0.10) 0%, rgba(47, 163, 154, 0) 72%),
    var(--sky, none);
  background-attachment: fixed, fixed, fixed, fixed;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  min-height: 100vh;
}

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

a { color: var(--accent); text-decoration-color: rgba(95, 212, 90, 0.4); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Screen-reader-only, and the skip link that uses it. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--bg2); color: var(--ink); padding: 10px 16px;
  border: 1px solid var(--line-strong); border-radius: 10px;
  transition: top 0.15s ease;
}
.skip:focus { top: 12px; }

/* --- Layout -------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--col); margin: 0 auto; padding: 0 var(--pad); }
.wrap--narrow { max-width: var(--col-narrow); }

/* EVERY SECTION STARTS ON THE SAME LEFT EDGE. A narrower *wrap* centres itself
   inside the page, so a prose section under a full-width one visibly steps
   inward — it reads as a mistake rather than as an editorial choice. So the
   frame stays one width and the running TEXT is capped instead: same left edge
   down the whole page, and a measure the eye can still track.
   `.wrap--narrow` survives for genuinely centred pages (the 404).
   `.wrap--prose` is the same idea applied to a whole section: the frame keeps
   its width and every block inside it is capped.
   ⚠️ Neither may go on `.wrap` itself — `.wrap` is `margin:0 auto`, so capping
   it there just centres a narrower frame, which is the exact thing this is here
   to stop. */
.measure { max-width: 68ch; }
.wrap--prose > * { max-width: 68ch; }

section { padding: 46px 0; }
section + section { border-top: 1px solid var(--line); }

h1, h2, h3, h4 { color: var(--ink); line-height: 1.22; margin: 0 0 0.5em; font-weight: 700; }
h2 { font-size: clamp(24px, 3.4vw, 31px); letter-spacing: -0.01em; }
h3 { font-size: clamp(18px, 2.4vw, 21px); }
h4 { font-size: 16px; }
p { margin: 0 0 1.05em; }
ul, ol { margin: 0 0 1.05em; padding-left: 1.3em; }
li { margin: 0 0 0.5em; }
li > ul, li > ol { margin-top: 0.5em; }
strong, b { color: var(--ink); font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--line); margin: 34px 0; }

.kicker {
  margin: 0 0 10px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.lede { font-size: clamp(18px, 2.2vw, 20px); color: var(--ink); }
.muted { color: var(--dim); }
.small { font-size: 14.5px; }

code, kbd, samp {
  font-family: var(--mono);
  font-size: 0.88em;
  background: rgba(236, 255, 233, 0.07);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 5px;
}
kbd { color: var(--ink); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); white-space: nowrap; }

/* --- The wordmark (scripts/banner.mjs wordmarkCSS, as CSS) --------------- */
.wordmark {
  display: inline-flex;
  align-items: center;
  margin: 0;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.045em;
  line-height: 1.1;
  white-space: nowrap;
  /* Glow radii scale WITH the face — the banner's rule, so a small header mark
     never wears a hero's halo. */
  text-shadow:
    0 0 calc(0.63em * 0.5) rgba(95, 212, 90, 0.42),
    0 0 calc(1.27em * 0.5) rgba(255, 206, 84, 0.20);
}
.wordmark__flag {
  height: 0.88em;
  width: 0.605em;
  margin-right: 0.22em;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 0.14em rgba(95, 212, 90, 0.5));
}

/* --- Header -------------------------------------------------------------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(11, 13, 18, 0.82);
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
  border-bottom: 1px solid var(--line);
}
.site-head__in {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 62px;
  flex-wrap: wrap;
  padding-top: 8px;
  padding-bottom: 8px;
}
.site-head__brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.03em;
  font-size: 16px;
  margin-right: auto;
}
.site-head__brand .fox { width: 26px; height: 26px; flex: 0 0 auto; }
.site-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.site-nav a {
  color: var(--text);
  text-decoration: none;
  padding: 7px 12px;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 600;
}
.site-nav a:hover { background: rgba(236, 255, 233, 0.07); color: var(--ink); }
.site-nav a[aria-current='page'] { color: var(--accent); background: var(--accent-soft); }

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 24px;
  min-height: 48px;               /* a real touch target at every size */
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--bg3);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.btn:hover { background: #1d222d; border-color: var(--line-strong); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary {
  background: linear-gradient(180deg, #6ee169, #45b942);
  border-color: rgba(0, 0, 0, 0.25);
  color: #08210a;
  box-shadow: 0 6px 24px rgba(95, 212, 90, 0.22);
}
.btn--primary:hover { background: linear-gradient(180deg, #7dee78, #4fc94b); }
.btn--ghost { background: transparent; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* --- Cards --------------------------------------------------------------- */
.card {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}
.card h3 { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }

.grid { display: grid; gap: 18px; }
/* `--2` has to actually mean two. At a 300px floor a 1040px column fits THREE,
   which stranded the fourth game mode on a row by itself. 340 is the floor that
   resolves to two columns in both places this is used — the 1040px page column
   and the guide's 750px prose column — and folds to one on a phone. */
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }

/* A mode / character card with a coloured spine. `--mc` is the accent, exactly
   as the game's own nav tiles do it. */
.tile {
  position: relative;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--mc, var(--accent));
  border-radius: 12px;
  padding: 18px 20px;
}
.tile h3 { margin: 0 0 6px; font-size: 18px; color: var(--mc, var(--ink)); }
.tile p { margin: 0; font-size: 15.5px; }
.tile p + p { margin-top: 0.7em; }

/* --- Hero ---------------------------------------------------------------- */
.hero { padding: 64px 0 52px; text-align: center; }
.hero .wordmark { font-size: clamp(38px, 8.6vw, 76px); }
.hero__tag {
  margin: 20px auto 0;
  max-width: 34ch;
  font-size: clamp(17px, 2.4vw, 21px);
  color: var(--text);
}
.hero .btn-row { justify-content: center; margin-top: 30px; }
.hero__note { margin-top: 16px; font-size: 14px; color: var(--dim); }

/* --- Figures / screenshots ----------------------------------------------- */
figure { margin: 0 0 18px; }
figure img {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg);
}
figcaption { margin-top: 9px; font-size: 14px; color: var(--dim); }

.shots {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}
/* The world gallery is FIVE pictures and they are a set. At the general 220px
   floor a 1080px column fits four and strands the fifth on a row of its own,
   which reads as an afterthought rather than as the fifth world. 180px lets all
   five share one row on a desktop, and it still folds to 3 · 2 · 1 on the way
   down. */
.shots--five { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }

/* --- Callouts ------------------------------------------------------------ */
.note {
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 12px 12px 0;
  padding: 16px 20px;
  margin: 0 0 1.2em;
}
.note--warn { border-left-color: var(--warn); background: rgba(255, 196, 84, 0.10); }
.note--info { border-left-color: var(--blue); background: rgba(84, 200, 255, 0.10); }
.note > :last-child { margin-bottom: 0; }
.note strong:first-child { color: var(--ink); }

blockquote {
  margin: 26px 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--line-strong);
  color: var(--ink);
  font-size: 18px;
}
blockquote p:last-child { margin-bottom: 0; }

/* --- Definition-ish rows (controls, settings) ---------------------------- */
.rows { display: grid; gap: 12px; margin: 0 0 1.2em; }
.row {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 16px;
  align-items: start;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
}
.row__key {
  font-size: 24px;
  line-height: 1.25;
  text-align: center;
  color: var(--ink);
}
.row__key .lbl { display: block; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); margin-top: 2px; }
.row__body { min-width: 0; }
/* The row's TITLE is the first <b>, and only that one gets to be a block.
   `.row__body b { display:block }` also caught every <b> inside the row's
   prose, so "tap the green **Swing** button" broke across three lines and the
   aim-assist row came apart entirely. */
.row__body b { color: var(--ink); }
.row__body > b:first-child { display: block; }
.row__body p { margin: 2px 0 0; font-size: 15px; }
@media (max-width: 480px) {
  .row { grid-template-columns: 1fr; gap: 8px; }
  .row__key { text-align: left; }
}

/* --- Tables -------------------------------------------------------------- */
.table-scroll { overflow-x: auto; margin: 0 0 1.2em; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: 15.5px; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--ink); font-weight: 700; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }

/* --- Guide: sticky contents + prose -------------------------------------- */
.guide-layout {
  display: grid;
  gap: 40px;
  grid-template-columns: 250px minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 900px) {
  .guide-layout { grid-template-columns: 1fr; gap: 24px; }
}

.toc {
  position: sticky;
  top: 78px;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  font-size: 15px;
}
@media (max-width: 900px) {
  .toc { position: static; max-height: none; }
  /* Fifteen entries stacked is most of a phone screen before the guide starts.
     Two columns halves it without hiding anything behind a disclosure the
     reader has to find. */
  .toc ol { columns: 2; column-gap: 10px; }
  .toc li { break-inside: avoid; }
}
.toc h2 { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); margin-bottom: 10px; }
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { margin: 0; }
.toc a {
  display: block;
  padding: 6px 8px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  border-left: 2px solid transparent;
}
.toc a:hover { background: rgba(236, 255, 233, 0.06); color: var(--ink); }
.toc a[aria-current='true'] { color: var(--accent); border-left-color: var(--accent); background: var(--accent-soft); }

.prose > section {
  padding: 0 0 8px;
  border-top: 0;
  scroll-margin-top: 86px;
}
.prose > section + section { margin-top: 44px; padding-top: 34px; border-top: 1px solid var(--line); }
/* Hold the MEASURE, not the column. The prose column is 750px on a desktop,
   which is ~78 characters — past the point where the eye starts losing the
   next line. Capping the running text alone keeps the cards, grids, tables and
   figures at full width, where they want to be. */
.prose > section > p,
.prose > section > ul,
.prose > section > ol,
.prose > section > h3 { max-width: 68ch; }

.prose h2 { display: flex; align-items: baseline; gap: 12px; }
.prose h2 .num {
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

/* --- Footer -------------------------------------------------------------- */
.site-foot {
  border-top: 1px solid var(--line);
  background: rgba(11, 13, 18, 0.6);
  padding: 34px 0 46px;
  font-size: 15px;
  color: var(--dim);
}
.site-foot a { color: var(--text); }
.site-foot__cols {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  margin-bottom: 26px;
}
.site-foot h3 { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); margin-bottom: 8px; }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin: 0 0 6px; }
.site-foot__legal { border-top: 1px solid var(--line); padding-top: 20px; font-size: 14px; }

/* --- Bits ---------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(236, 255, 233, 0.05);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.pill--accent { color: var(--accent); border-color: rgba(95, 212, 90, 0.4); background: var(--accent-soft); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 1.2em; }

.anchor {
  color: var(--dim);
  text-decoration: none;
  font-weight: 400;
  opacity: 0;
  transition: opacity 0.12s ease;
}
h2:hover .anchor, h3:hover .anchor, .anchor:focus { opacity: 1; }