/* ====================================================================
   Void Arcade — SEO content blocks
   ====================================================================
   Styles the indexable article that sits BELOW the playable canvas on
   every game page, and the category hub pages.

   Design intent: this is a quiet reading surface that belongs to the
   existing premium dark arcade identity. It never competes with the
   game itself — the game owns the viewport, this begins after it.

   This content is visible to everyone. Nothing here is hidden from
   users and served only to crawlers.
   ==================================================================== */

:root {
  --va-seo-ink: #e8eef8;
  --va-seo-ink-dim: #9aa8c2;
  --va-seo-ink-faint: #6d7c96;
  --va-seo-line: rgba(140, 160, 200, 0.16);
  --va-seo-line-soft: rgba(140, 160, 200, 0.09);
  --va-seo-surface: rgba(18, 23, 33, 0.72);
  --va-seo-accent: #7fb4ff;
  --va-seo-bg: #070a10;
}

/* ---- shell ------------------------------------------------------- */

.va-seo-content {
  position: relative;
  z-index: 1;
  background: var(--va-seo-bg);
  border-top: 1px solid var(--va-seo-line);
  color: var(--va-seo-ink-dim);
  font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.65;
  padding: 56px 24px 72px;
  /* The game shell uses overflow:hidden on body; this block lives after
     it in the flow, so it needs to establish its own normal layout. */
  text-align: left;
}

.va-seo-article {
  max-width: 760px;
  margin: 0 auto;
}

/* ---- breadcrumb -------------------------------------------------- */

.va-seo-breadcrumb {
  max-width: 760px;
  margin: 0 auto 28px;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--va-seo-ink-faint);
}

.va-seo-breadcrumb a {
  color: var(--va-seo-ink-faint);
  text-decoration: none;
  transition: color 0.18s ease;
}

.va-seo-breadcrumb a:hover { color: var(--va-seo-accent); }

.va-seo-breadcrumb span[aria-current] { color: var(--va-seo-ink-dim); }

.va-seo-crumb-sep {
  margin: 0 8px;
  opacity: 0.5;
}

/* ---- header ------------------------------------------------------ */

.va-seo-header { margin-bottom: 26px; }

.va-seo-content .va-seo-h1 {
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--va-seo-ink);
  margin: 0 0 6px;
}

.va-seo-tagline {
  margin: 0;
  font-size: 16px;
  color: var(--va-seo-ink-faint);
}

/* ---- fact strip -------------------------------------------------- */

.va-seo-facts {
  list-style: none;
  margin: 0 0 30px;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px 22px;
  background: var(--va-seo-surface);
  border: 1px solid var(--va-seo-line-soft);
  border-radius: 14px;
}

.va-seo-facts li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  color: var(--va-seo-ink);
}

.va-seo-fact-k {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--va-seo-ink-faint);
}

/* ---- prose ------------------------------------------------------- */

.va-seo-lede {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--va-seo-ink-dim);
  margin: 0 0 12px;
}

.va-seo-block { margin-top: 38px; }

.va-seo-content h2,
.va-seo-content h3 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--va-seo-accent);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--va-seo-line-soft);
}

.va-seo-content p { margin: 0 0 14px; }

.va-seo-content ol,
.va-seo-content ul {
  margin: 0 0 14px;
  padding-left: 20px;
}

.va-seo-content li { margin-bottom: 7px; }

.va-seo-content a {
  color: var(--va-seo-accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(127, 180, 255, 0.28);
  transition: border-color 0.18s ease;
}

.va-seo-content a:hover { border-bottom-color: var(--va-seo-accent); }

.va-seo-note {
  font-size: 13.5px;
  color: var(--va-seo-ink-faint);
}

/* ---- controls table ---------------------------------------------- */

.va-seo-controls {
  width: 100%;
  border-collapse: collapse;
  margin-top: 18px;
  font-size: 14px;
}

.va-seo-controls caption {
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--va-seo-ink-faint);
  padding-bottom: 8px;
}

.va-seo-controls th,
.va-seo-controls td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--va-seo-line-soft);
  text-align: left;
}

.va-seo-controls th {
  width: 36%;
  font-weight: 500;
  color: var(--va-seo-ink);
  font-variant-numeric: tabular-nums;
}

.va-seo-controls td { color: var(--va-seo-ink-dim); }

/* ---- changelog --------------------------------------------------- */

.va-seo-changelog {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
}

.va-seo-changelog > li {
  padding-left: 18px;
  border-left: 1px solid var(--va-seo-line);
  padding-bottom: 20px;
}

.va-seo-changelog > li:last-child { padding-bottom: 0; }

.va-seo-version {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--va-seo-ink);
  margin-bottom: 8px;
}

.va-seo-version time {
  font-weight: 400;
  font-size: 12px;
  color: var(--va-seo-ink-faint);
  font-variant-numeric: tabular-nums;
}

.va-seo-changelog ul { padding-left: 18px; }

/* ---- related ----------------------------------------------------- */

.va-seo-related {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.va-seo-related a {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px;
  border: 1px solid var(--va-seo-line-soft);
  border-radius: 12px;
  background: var(--va-seo-surface);
  text-decoration: none;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.va-seo-related a:hover {
  border-color: rgba(127, 180, 255, 0.4);
  transform: translateY(-1px);
}

.va-seo-related strong {
  color: var(--va-seo-ink);
  font-weight: 600;
  font-size: 15px;
}

.va-seo-related span {
  color: var(--va-seo-ink-faint);
  font-size: 13px;
}

.va-seo-about { color: var(--va-seo-ink-faint); }

/* ====================================================================
   Category hub pages
   ==================================================================== */

.va-hub {
  min-height: 100vh;
  background: var(--va-seo-bg);
  color: var(--va-seo-ink-dim);
  font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.65;
}

.va-hub-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}

.va-hub-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 30px;
  color: var(--va-seo-ink-faint);
  text-decoration: none;
  font-size: 14px;
}

.va-hub-back:hover { color: var(--va-seo-accent); }

.va-hub-back img { height: 22px; width: auto; opacity: 0.75; }

.va-hub-header {
  max-width: 720px;
  margin-bottom: 42px;
}

.va-hub-header h1 {
  font-size: clamp(30px, 6vw, 46px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--va-seo-ink);
  margin: 0 0 14px;
}

.va-hub-intro {
  font-size: 17px;
  line-height: 1.65;
  color: var(--va-seo-ink-dim);
  margin: 0;
}

.va-hub-count {
  display: inline-block;
  margin-top: 16px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--va-seo-ink-faint);
}

/* ---- grid -------------------------------------------------------- */

.va-hub-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 18px;
}

.va-hub-card a {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--va-seo-line-soft);
  border-radius: 16px;
  overflow: hidden;
  background: var(--va-seo-surface);
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.va-hub-card a:hover {
  border-color: rgba(127, 180, 255, 0.4);
  transform: translateY(-2px);
}

.va-hub-shot {
  display: block;
  aspect-ratio: 16 / 9;
  background: #0d1119;
  overflow: hidden;
}

.va-hub-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.va-hub-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px 18px;
}

.va-hub-tag {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--va-seo-accent);
}

.va-hub-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--va-seo-ink);
}

.va-hub-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--va-seo-ink-dim);
}

.va-hub-meta {
  margin-top: 4px;
  font-size: 12px;
  color: var(--va-seo-ink-faint);
}

/* ---- hub footer / cross-links ------------------------------------ */

.va-hub-more {
  margin-top: 56px;
  padding-top: 26px;
  border-top: 1px solid var(--va-seo-line-soft);
}

.va-hub-more h2 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--va-seo-ink-faint);
  margin: 0 0 14px;
}

.va-hub-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}

.va-hub-links a {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--va-seo-line-soft);
  border-radius: 999px;
  color: var(--va-seo-ink-dim);
  text-decoration: none;
  font-size: 13.5px;
  transition: border-color 0.18s ease, color 0.18s ease;
}

.va-hub-links a:hover {
  border-color: rgba(127, 180, 255, 0.4);
  color: var(--va-seo-accent);
}

/* ---- prose pages (self-evolving arcade, reports) ----------------- */

.va-doc {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 24px 88px;
  font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--va-seo-ink-dim);
  font-size: 16px;
  line-height: 1.72;
}

.va-doc h1 {
  font-size: clamp(30px, 6vw, 46px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--va-seo-ink);
  margin: 0 0 16px;
}

.va-doc .va-doc-standfirst {
  font-size: 18px;
  line-height: 1.6;
  color: var(--va-seo-ink-dim);
  margin: 0 0 40px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--va-seo-line-soft);
}

.va-doc h2 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--va-seo-ink);
  margin: 44px 0 14px;
  text-transform: none;
  border: 0;
  padding: 0;
}

.va-doc h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--va-seo-ink);
  margin: 28px 0 10px;
}

.va-doc p { margin: 0 0 16px; }

.va-doc ul,
.va-doc ol { margin: 0 0 16px; padding-left: 22px; }

.va-doc li { margin-bottom: 8px; }

.va-doc a {
  color: var(--va-seo-accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(127, 180, 255, 0.28);
}

.va-doc a:hover { border-bottom-color: var(--va-seo-accent); }

.va-doc-callout {
  margin: 28px 0;
  padding: 18px 22px;
  background: var(--va-seo-surface);
  border: 1px solid var(--va-seo-line-soft);
  border-left: 2px solid var(--va-seo-accent);
  border-radius: 12px;
  font-size: 15px;
}

.va-doc-callout p:last-child { margin-bottom: 0; }

.va-doc-meta {
  font-size: 13px;
  color: var(--va-seo-ink-faint);
  margin-bottom: 30px;
}

.va-doc-meta time { font-variant-numeric: tabular-nums; }

/* A definition-style lead-in used on the self-evolving arcade page so the
   answer to "what is a self-evolving arcade?" is the first thing present. */
.va-doc-definition {
  margin: 0 0 34px;
  padding: 22px 24px;
  background: linear-gradient(180deg, rgba(127, 180, 255, 0.07), rgba(127, 180, 255, 0.02));
  border: 1px solid rgba(127, 180, 255, 0.2);
  border-radius: 14px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--va-seo-ink);
}

.va-doc-definition p:last-child { margin-bottom: 0; }

/* ---- responsive -------------------------------------------------- */

@media (max-width: 640px) {
  .va-seo-content { padding: 40px 18px 56px; }
  .va-hub-inner { padding: 24px 18px 64px; }
  .va-doc { padding: 24px 18px 64px; }
  .va-seo-facts { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
  .va-hub-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .va-hub-card a,
  .va-seo-related a {
    transition: none;
  }
  .va-hub-card a:hover,
  .va-seo-related a:hover {
    transform: none;
  }
}

/* ====================================================================
   Game-page integration
   ====================================================================
   Game pages set `body { overflow: hidden }` and position #gameContainer
   as `position: fixed`, so the game already sits outside normal flow and
   owns the viewport. To make the article below it reachable WITHOUT
   touching any game CSS or layout:

     - `body` is allowed to scroll vertically again on game pages that
       opt in via .va-has-seo-content.
     - A spacer reserves exactly one viewport so the game is what you see
       on load; the article begins immediately after it.
     - #gameContainer stays `position: fixed`, so it does not move, does
       not resize, and is not affected by the scroll. The canvas keeps the
       full viewport it was built against.

   This is additive only. No existing rule is overridden, and a page that
   does not carry .va-has-seo-content behaves exactly as before.
   ==================================================================== */

body.va-has-seo-content {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  /* The game shell centres content with flex; the SEO layer must stack
     normally underneath rather than being centred as a flex sibling. */
  display: block !important;
  min-height: 100vh;
  /* `position: static` so <body> is NOT the containing block for the
     games that centre #gameContainer with `position:absolute; top:50%`
     (void-gate, and any portrait game following that pattern). If body
     stayed the containing block, the spacer + article would double its
     height and "50%" would resolve to the middle of the whole document,
     dropping the game a full viewport down the page. With body static,
     those containers resolve against the initial containing block (the
     viewport), which is what they were written against. */
  position: static !important;
}

/* Games that position #gameContainer absolutely were centring against a
   viewport-tall <body>. Now that the document is taller than the viewport,
   they must be pinned to the viewport explicitly — `fixed` keeps them
   exactly where `absolute` used to put them, and keeps the game on screen
   while the article scrolls underneath it (the same behaviour the games
   that already use `position: fixed` have). */
body.va-has-seo-content #gameContainer {
  position: fixed !important;
}

/* Reserves the first screenful for the game, which is fixed-position and
   therefore paints over this space. */
.va-seo-spacer {
  height: 100vh;
  height: 100svh;
  pointer-events: none;
}

/* The game is fixed and would paint over the article as you scroll past
   it. The start screen sits at z-index 9500 and some in-game overlays go
   higher still, so the article is lifted above all of them — it only ever
   occupies space below the first viewport, so this cannot cover the game
   while the game is the thing on screen. */
body.va-has-seo-content .va-seo-content {
  position: relative;
  z-index: 10000;
}

/* A quiet affordance telling players there is something below the game.
   Hidden once the reader has scrolled (handled in seo-enhance.js). */
.va-seo-scroll-cue {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  /* Above the mobile control overlay (a full-screen fixed layer with
     touch-action:none), or the cue cannot be tapped on a phone — and on
     touch devices tapping it is the only way into the article. */
  z-index: 9990;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(140, 160, 200, 0.18);
  background: rgba(10, 13, 18, 0.6);
  backdrop-filter: blur(6px);
  color: rgba(154, 168, 194, 0.85);
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0.75;
  transition: opacity 0.25s ease;
}

.va-seo-scroll-cue:hover { opacity: 1; }
.va-seo-scroll-cue[hidden] { display: none !important; }

/* On phones the cue must not sit over the on-screen controls, which own
   the bottom of the screen. It moves to the top-centre announcement band
   instead — still the only hint that there is anything below the game,
   and mobile is where that hint matters most. */
@media (pointer: coarse) {
  .va-seo-scroll-cue {
    bottom: auto;
    top: calc(8px + var(--va-safe-top, 0px));
    font-size: 11px;
    padding: 5px 11px;
    opacity: 0.6;
  }
}

/* The start screen is exactly where the cue belongs: the player has not
   committed to a run yet, there is room, and on touch devices tapping it
   is the only way into the article (the mobile control overlay is a
   full-screen `touch-action: none` layer that swallows swipes).

   During an active run it is hidden — nothing floats over live gameplay.
   The game-over screen owns the full viewport, so it is hidden there too. */
body.va-body-game-over .va-seo-scroll-cue {
  display: none !important;
}

/* Active play = neither start nor game-over is up. */
body.va-has-seo-content:not(.va-body-start):not(.va-body-game-over) .va-seo-scroll-cue {
  display: none !important;
}

/* ====================================================================
   Challenge loop
   ====================================================================
   The incoming-challenge banner sits above the game, top-centre, which
   is the announcement zone reserved by the UI rules. It clears itself on
   the first input so it never overlaps live play. Bottom-left stays free
   for the powerup tray; bottom-right stays free for game stats.
   ==================================================================== */

.va-challenge-banner {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px 11px 18px;
  max-width: calc(100vw - 32px);
  border-radius: 14px;
  border: 1px solid rgba(127, 180, 255, 0.28);
  background: rgba(12, 17, 26, 0.9);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  font-family: 'Outfit', system-ui, sans-serif;
  color: #e8eef8;
  animation: va-challenge-in 0.32s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

@keyframes va-challenge-in {
  from { opacity: 0; transform: translate(-50%, -10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

.va-challenge-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6d7c96;
  white-space: nowrap;
}

.va-challenge-score {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #7fb4ff;
  font-variant-numeric: tabular-nums;
}

.va-challenge-hint {
  font-size: 13px;
  color: #9aa8c2;
  white-space: nowrap;
}

.va-challenge-close {
  margin-left: 2px;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(140, 160, 200, 0.12);
  color: #9aa8c2;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.va-challenge-close:hover {
  background: rgba(140, 160, 200, 0.22);
  color: #e8eef8;
}

@media (max-width: 520px) {
  .va-challenge-banner { gap: 9px; padding: 9px 12px 9px 14px; }
  .va-challenge-label { font-size: 10px; }
  .va-challenge-score { font-size: 17px; }
  .va-challenge-hint { display: none; }
}

/* ---- copy-link toast --------------------------------------------- */

.va-challenge-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 70;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(140, 160, 200, 0.2);
  background: rgba(12, 17, 26, 0.94);
  backdrop-filter: blur(8px);
  color: #e8eef8;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  opacity: 1;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.va-challenge-toast.is-out {
  opacity: 0;
  transform: translate(-50%, 8px);
}

@media (prefers-reduced-motion: reduce) {
  .va-challenge-banner { animation: none; }
  .va-challenge-toast { transition: none; }
}

/* ====================================================================
   Homepage — browse by type + brand positioning
   ====================================================================
   Lives inside the existing homepage layout and inherits its section
   header rhythm, so it reads as part of the page rather than an SEO
   appendage bolted to the bottom.
   ==================================================================== */

.va-home-seo {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px 10px;
}

.va-home-cats {
  list-style: none;
  margin: 0 0 54px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.va-home-cats a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border: 1px solid rgba(140, 160, 200, 0.14);
  border-radius: 999px;
  background: rgba(18, 23, 33, 0.5);
  color: #9aa8c2;
  text-decoration: none;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 14px;
  letter-spacing: 0.01em;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.va-home-cats a:hover {
  border-color: rgba(127, 180, 255, 0.45);
  background: rgba(127, 180, 255, 0.07);
  color: #e8eef8;
}

.va-home-cats a span {
  font-size: 11.5px;
  color: #6d7c96;
  font-variant-numeric: tabular-nums;
}

.va-home-about {
  max-width: 760px;
  margin: 0 0 40px;
  font-family: 'Outfit', system-ui, sans-serif;
  color: #9aa8c2;
  font-size: 15.5px;
  line-height: 1.7;
}

.va-home-about h2 {
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #e8eef8;
  margin: 0 0 14px;
  text-transform: none;
}

.va-home-about p { margin: 0 0 14px; }

.va-home-about a {
  color: #7fb4ff;
  text-decoration: none;
  border-bottom: 1px solid rgba(127, 180, 255, 0.28);
}

.va-home-about a:hover { border-bottom-color: #7fb4ff; }

@media (max-width: 900px) {
  .va-home-seo { padding: 0 20px 6px; }
  .va-home-cats { margin-bottom: 38px; }
}

/* ── Standalone SEO pages: the page IS the document ─────────────────────── */
/* These pages are not a game shell, so nothing else was resetting the body.
   The browser's default 8px margin over a transparent body let the white
   canvas show as a border all the way round the page. */
html:has(body.va-seo-page),
body.va-seo-page {
  margin: 0;
  padding: 0;
  background: var(--va-seo-bg);
}
body.va-seo-page { min-height: 100%; }

/* ── Category tiles ─────────────────────────────────────────────────────── */
/* Square, four across on a desktop. The glyph IS the logo for the genre: big,
   centred, and the tile is built out of that genre's colour rather than merely
   tinted by it. The colour arrives per tile as --cat, so one rule set dresses
   every category. */
.va-cat-grid {
  list-style: none;
  margin: 0 0 54px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.va-cat-tile { margin: 0; }

.va-cat-tile > a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  aspect-ratio: 1 / 1;
  padding: 18px 14px 22px;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--cat) 34%, transparent);
  border-radius: 20px;
  background:
    radial-gradient(78% 58% at 50% 40%, color-mix(in srgb, var(--cat) 26%, transparent) 0%, transparent 72%),
    linear-gradient(158deg, color-mix(in srgb, var(--cat) 16%, transparent) 0%, transparent 52%),
    linear-gradient(180deg, rgba(20, 26, 38, 0.94), rgba(10, 14, 23, 0.98));
  color: var(--va-seo-ink);
  text-decoration: none;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cat) 22%, transparent);
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1), border-color 0.28s ease, box-shadow 0.28s ease;
}

/* A fine diagonal hatch in the genre colour: texture, so the face is not flat. */
.va-cat-tile > a::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(118deg,
    color-mix(in srgb, var(--cat) 9%, transparent) 0 1px,
    transparent 1px 11px);
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

/* The floor: a solid bar of the genre colour, not a hairline. */
.va-cat-tile > a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--cat) 85%, transparent) 22%,
    var(--cat) 50%,
    color-mix(in srgb, var(--cat) 85%, transparent) 78%,
    transparent 100%);
  opacity: 0.85;
  transition: opacity 0.28s ease, height 0.28s ease;
}

.va-cat-ico {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  color: var(--cat);
  line-height: 0;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--cat) 52%, transparent));
  transition: transform 0.42s cubic-bezier(0.2, 0.7, 0.3, 1), filter 0.32s ease;
}

.va-cat-ico svg {
  width: 112px;
  height: 112px;
  display: block;
  stroke-width: 1.25;                      /* thinner line at this size reads as drawn, not as clip-art */
  /* One pen, one speed. The puzzle glyph is a single 64.3-unit path and drew in
     0.75s, which is the pace this is set from: 0.75s / 64.3 units. Every other
     glyph now moves at it too, because each stroke carries its own length
     (--l) and the ink laid before it (--o); see CAT_ICONS in seo/render.js.

     The floor is for the sparse glyphs. At one speed an icon with half the ink
     is done in half the time, and the runner's four short strokes were over in
     0.36s while the puzzle took 0.75s. Below the floor the pen slows down for
     that icon so the gesture still reads; above it nothing changes, which is
     every glyph but the runner and the stopwatch. */
  --va-pen-overlap: 0.62;                  /* the next stroke starts before the last one lands */
  --va-pen-speed: 0.0117s;                 /* seconds per user unit of stroke */
  --va-draw-floor: 0.5s;
  --va-span: calc(var(--ink, 64) * var(--va-pen-overlap)
                  + var(--last, 64) * calc(1 - var(--va-pen-overlap)));
  --va-pen: max(var(--va-pen-speed), calc(var(--va-draw-floor) / var(--va-span)));
}

/* The dash figure is the stroke's own length, so at rest the line is solid and
   on hover it has exactly one length to travel. */
.va-cat-ico svg > * { stroke-dasharray: var(--l, 64); }

.va-cat-name {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  line-height: 1.1;
  color: #f2f6ff;
  text-shadow: 0 0 18px color-mix(in srgb, var(--cat) 45%, transparent);
}

/* The count is a badge in the corner, in the genre's own colour. */
.va-cat-count {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--cat) 50%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--cat) 15%, rgba(8, 11, 20, 0.82));
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cat) 78%, #ffffff);
  font-variant-numeric: tabular-nums;
  transition: background 0.28s ease, border-color 0.28s ease;
}

.va-cat-count b { font-size: 15px; font-weight: 800; color: #ffffff; }

@media (hover: hover) {
  .va-cat-tile > a:hover {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--cat) 80%, transparent);
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--cat) 34%, transparent),
      0 16px 38px rgba(0, 0, 0, 0.5),
      0 0 30px color-mix(in srgb, var(--cat) 30%, transparent);
  }
  .va-cat-tile > a:hover::before { opacity: 1; }
  .va-cat-tile > a:hover::after { height: 6px; opacity: 1; }
  .va-cat-tile > a:hover .va-cat-ico {
    transform: translateY(-3px) scale(1.09);
    filter: drop-shadow(0 0 28px color-mix(in srgb, var(--cat) 85%, transparent));
  }
  .va-cat-tile > a:hover .va-cat-count {
    background: color-mix(in srgb, var(--cat) 28%, rgba(8, 11, 20, 0.82));
    border-color: color-mix(in srgb, var(--cat) 78%, transparent);
  }
  .va-cat-tile > a:hover .va-cat-ico svg > * {
    animation: va-cat-draw calc(var(--l, 64) * var(--va-pen)) cubic-bezier(0.3, 0.8, 0.3, 1)
               calc(var(--o, 0) * var(--va-pen) * var(--va-pen-overlap)) backwards;
  }
}

@keyframes va-cat-draw {
  from { stroke-dashoffset: var(--l, 64); }
  to   { stroke-dashoffset: 0; }
}

.va-cat-tile > a:focus-visible { outline: 2px solid var(--cat); outline-offset: 3px; }

.va-cat-tile.is-current > a {
  border-color: color-mix(in srgb, var(--cat) 80%, transparent);
}

.va-hub-more-link { margin: 0; font-size: 14px; }
.va-hub-more-link a { color: var(--va-seo-ink-dim); }
.va-hub-more-link a:hover { color: var(--va-seo-accent); }

@media (max-width: 1180px) {
  .va-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .va-cat-ico svg { width: 100px; height: 100px; }
}
@media (max-width: 760px) {
  .va-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
  .va-cat-tile > a { padding: 14px 10px 18px; border-radius: 16px; }
  .va-cat-ico svg { width: 68px; height: 68px; }
  .va-cat-name { font-size: 12.5px; letter-spacing: 0.12em; }
  .va-cat-count { top: 8px; right: 8px; padding: 3px 7px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .va-cat-tile > a, .va-cat-tile > a::before, .va-cat-tile > a::after, .va-cat-ico, .va-cat-count { transition: none; }
  .va-cat-tile > a:hover .va-cat-ico svg > * { animation: none; }
}

/* Older engines without color-mix still get a readable tile. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  .va-cat-tile > a { border-color: rgba(140, 160, 200, 0.26); }
  .va-cat-tile > a:hover { border-color: rgba(140, 160, 200, 0.55); }
  .va-cat-count { border-color: rgba(140, 160, 200, 0.3); background: rgba(8, 11, 20, 0.82); color: #c9d6ef; }
}
}
}

/* ── Hub page substance ─────────────────────────────────────────────────── */
.va-hub-summary {
  max-width: 68ch;
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.68;
  color: var(--va-seo-ink-dim);
}

.va-hub-faq {
  margin: 10px 0 46px;
  padding-top: 26px;
  border-top: 1px solid var(--va-seo-line-soft);
}

.va-hub-faq h2 {
  margin: 0 0 18px;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--va-seo-ink-faint);
}

.va-hub-faq dl { margin: 0; max-width: 72ch; }

.va-hub-faq dt {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--va-seo-ink);
  margin: 0 0 6px;
}

.va-hub-faq dd {
  margin: 0 0 20px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--va-seo-ink-dim);
}

.va-hub-faq dd:last-child { margin-bottom: 0; }