/* The one template for the six standalone information pages: How to play,
   What's new, Partners, Terms, Privacy and Connection check. Loads after
   guides/guide.css; page-specific component rules (partners/partners.css,
   connection-check/page.css) load after this. The blog keeps guide.css and
   its floating CTA (return-to-game.css) unchanged.

   The way back is ONE link, top-left in a sticky header: always in reach on a
   long phone page (why the floating button existed, CHANGELOG
   "Information-page navigation") without ever covering the text column.
   Static pages load no app CSS, so the menu tokens are mirrored here (values
   from src/ui/menu-tokens.css). */
:root {
  --fuux-bg: #0c121a;
  --fuux-line: #33404e;
  --fuux-text: #edf4f7;
  --fuux-muted: #b4c9d7;
  --fuux-subtle: #8ca4b5;
  --fuux-surface-raised: #15212c;
  --fuux-accent: #ffba2e;
  --fuux-accent-hover: #ffd66f;
  --fuux-accent-ink: #0b1118;
  --fuux-radius-control: 4px;
  --fuux-focus: 0 0 0 3px rgba(255, 186, 46, .22);
  --fuux-font-display: "Segoe UI", system-ui, sans-serif;
  --fuux-page-title: 700 clamp(28px, 2.8vw, 40px)/1.12 var(--fuux-font-display);
  --fuux-heading-tracking: -.015em;
  --info-header-h: 60px;
  background: var(--fuux-bg);
}
body { background: var(--fuux-bg); }
html { scroll-padding-top: calc(var(--info-header-h) + 12px); }
[hidden] { display: none !important; }

/* Header: back link top-left, wordmark top-right, pinned while scrolling. */
.site-header { position: sticky; top: 0; z-index: 10; min-height: var(--info-header-h); padding: 8px 0; background: var(--fuux-bg); border-bottom: 1px solid var(--fuux-line); }
.site-header .back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--fuux-muted); font-size: 15px; font-weight: 600; text-decoration: none; }
.site-header .back:hover { color: var(--fuux-text); }
.site-header .wordmark { font-size: 20px; font-weight: 800; letter-spacing: -.5px; color: var(--fuux-text); }

/* Title block: plain title-case page title, one short line under it. */
.intro { padding: 40px 0 28px; max-width: 760px; }
h1 { font: var(--fuux-page-title); letter-spacing: var(--fuux-heading-tracking); margin: 0 0 12px; color: var(--fuux-text); }
.intro > p:not(.eyebrow) { font-size: 17px; margin: 0 0 8px; }
.intro > .muted { font-size: 14px !important; color: var(--fuux-subtle); }
h2 { font-size: clamp(21px, 2.2vw, 26px); letter-spacing: var(--fuux-heading-tracking); margin: 8px 0 16px; }

/* Small labels: muted, lightly tracked, never gold. */
.eyebrow, .number { font-size: 12px; font-weight: 650; letter-spacing: .06em; color: var(--fuux-subtle); text-transform: uppercase; font-variant-numeric: tabular-nums; }
.contents { top: calc(var(--info-header-h) + 12px); }
/* "01 / WHO PROVIDES XFPS" only repeated the heading under it. */
.guide-layout section > .number { display: none; }
section { scroll-margin-top: calc(var(--info-header-h) + 12px); }

/* Update log entries: date, status and title read as one block. */
.chapters > section > .number { margin: 0 0 2px; }
.chapters > section > .number + .muted,
.chapters > section > h2 + .muted { margin: 0 0 4px; font-size: 14px; color: var(--fuux-subtle); }
.chapters > section > .number + h2,
.chapters > section > .muted + h2 { margin-top: 4px; }

/* One footer for all six pages. */
footer { gap: 8px 24px; }
footer a { color: var(--fuux-muted); text-decoration: none; }
footer a:hover, footer a[aria-current="page"] { color: var(--fuux-text); }

@media (max-width: 760px) {
  .intro { padding: 28px 0 20px; }
  .site-header .back { font-size: 14px; }
  .site-header .wordmark { font-size: 18px; }
}
@media print { .site-header { position: static; } }