http-nu 0.17.2

/* Self-hosted Source Sans 3 + Source Code Pro. One variable-axis woff2
   per family; both 400 and 700 declarations point at the same file and
   the browser picks the weight off the wght axis. Latin + smart-quote
   / dash / currency subset (U+0000-00FF, U+2000-206F, plus a handful
   of singletons that Google's CSS pairs with the latin block). */
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/source-sans-3-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/source-sans-3-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Code Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/source-code-pro-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Code Pro";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/source-code-pro-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Palette aligned with http-nu/www: deep blue body, warm-cream headers,
     off-white primary text. Tile colors live in render.nu (untouched --
     the wood-grain palette reads fine against blue). */
  --bg: #0077b6;
  --fg: rgba(255, 255, 255, 0.85);
  --fg-header: #f4d9a0;
  --tile: #eee4da;
  --accent: #f59563;
  --accent-hover: #f67c5f;
  --accent-press: #d97a45;
  --brand: #00d4ff;          /* cyan from http-nu/www -- the link/underline accent that pops on blue */
  --brand-hover: #5ae5ff;
  --light: #f9f6f2;
  --gap: 8px;
  --radius: 4px;
  --font-sans: "Source Sans 3", sans-serif;
  --font-mono: "Source Code Pro", ui-monospace, monospace;
  /* Type scale -- declared as vars so sites that reuse a size can share
     the token. One-offs that appear in a single rule stay inline. */
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.5rem;
  --text-xl:   2rem;
}

/* ============================================================
   Normalize. Minimal house reset -- not normalize.css.
   Everything below this block is app styling and assumes these
   defaults are in place.
   ============================================================ */

/* Universal box-model + zeroed margins. ::before/::after included so
   border-box applies to pseudo elements too. */
*, *::before, *::after { box-sizing: border-box; margin: 0; }

/* Page baseline. dvh tracks the visible viewport on mobile (UA chrome
   resize). text-size-adjust pins iOS/Android from inflating em-sized
   children on narrow viewports. */
html, body {
  min-height: 100dvh;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* UA form controls don't inherit font/color -- fix at the source so
   buttons, inputs, etc. take body type without per-element overrides. */
button, input, textarea, select { font: inherit; color: inherit; }

/* Replaced elements: bound to container, preserve aspect ratio. Left
   as `display: inline` (UA default) so they flow with text -- the
   mascot in the site-header credit relies on it. */
img, picture, video, canvas, svg { max-width: 100%; height: auto; }

/* Anchors inherit text color and stay underlined; hover picks up the
   accent. Single source of truth for link color across the UI. */
a { color: inherit; text-decoration: underline; transition: color 0.2s; }
/* hover effects only where a real pointer exists -- on touch :hover
   sticks after a tap, leaving the element stuck in its hover state. */
@media (hover: hover) {
  a:hover { color: var(--accent); }
}

/* Semantic chrome + intrinsically-technical leaves are mono;
   everything else inherits the body's sans default. */
header, nav, code, kbd, samp, output { font-family: var(--font-mono); }

/* ============================================================
   App styles.
   ============================================================ */

/* MPA view-transitions: same-origin nav animates as a soft page
   transition (Chromium 126+; Safari 18+ behind a flag). */
@view-transition { navigation: auto; }

html {
  /* Subtle vignette: same color flat fill via radial gradient, matches
     the parent site at http-nu.cross.stream. */
  background: radial-gradient(ellipse at center, var(--bg) 0%, var(--bg) 100%);
}
body {
  display: flex;
  flex-direction: column;
  max-width: 900px;        /* the whole page is one centered column; */
  margin-inline: auto;     /* html paints the full-viewport background */
  padding: 12px 1rem;
  gap: 12px;
  background: var(--bg);
  color: var(--fg);
  font: var(--text-md)/1.6 var(--font-sans);
}

h1 { font-size: clamp(24px, 6vmin, 40px); }
/* Paragraphs inherit the body type (--text-md / 1.6). Secondary text
   that wants to be small opts in via a class (.hint, .credit, .by,
   ...) rather than every paragraph opting out of the base size. */
.hint { font-size: var(--text-sm); }

button {
  background: var(--accent);
  color: var(--light);
  border: 0;
  padding: 4px 14px;
  border-radius: var(--radius);
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 0 var(--accent-press);
  transition: background 120ms, transform 80ms, box-shadow 80ms;
}
@media (hover: hover) {
  button:hover { background: var(--accent-hover); }
}
button:active {
  background: var(--accent-press);
  transform: translateY(2px);
  box-shadow: none;
}

#game { position: relative; width: 100%; }

#board-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  /* Pending indicator: a solid line on the edge the player aimed
     toward, shown while a move request is in flight. JS sets
     [data-pending="h|j|k|l"] on dispatch and clears it when the SSE
     patch lands (or the HTTP request fails). 80ms reveal delay so
     sub-threshold round-trips never paint at all; both reveal and
     release fade over 150ms. */
  border: 3px solid transparent;
  transition: border-color 150ms ease-out;
}
#board-wrap[data-pending] { transition: border-color 150ms ease-in 80ms; }
#board-wrap[data-pending="h"] { border-left-color: #fff; }
#board-wrap[data-pending="l"] { border-right-color: #fff; }
#board-wrap[data-pending="k"] { border-top-color: #fff; }
#board-wrap[data-pending="j"] { border-bottom-color: #fff; }

/* Disconnected: desaturate the board so tile numbers stay readable;
   disable the reset button. Keyboard input is gated in script.js;
   pointer input is gated by pointer-events:none. */
body[data-conn="down"] #board-wrap {
  filter: grayscale(1);
  pointer-events: none;
}
body[data-conn="down"] button {
  opacity: 0.4;
  pointer-events: none;
}
/* Hide the stale RTT readout while disconnected; the conn dot
   represents the status on its own. */
body[data-conn="down"] #rtt { visibility: hidden; }
#board-wrap { transition: filter 320ms ease; }
button { transition: opacity 320ms ease; }

/* A move's response hasn't landed yet. Dim the board so a slow or stalled
   round-trip reads as "waiting" instead of a silently frozen board. The
   1s reveal delay means normal fast moves never flash; the dim clears as
   soon as the snapshot patch acks (via the base #board-wrap transition). */
body.move-pending #board-wrap {
  filter: grayscale(0.7) brightness(0.85);
  transition: filter 200ms ease-in 1s;
}

/* Failed-move flash: brief red wash across the whole page. */
body.flash-red { animation: flash-red 300ms ease; }
@keyframes flash-red {
  0%, 100% { background: var(--bg); }
  50%      { background: #e05252; }
}

/* Board layout, palette, and tile styling all live inside the
   <game-board> shadow DOM (see static/game-board.js). Nothing in this
   stylesheet targets the board; the host page just gives the WC a
   container with width and the WC handles aspect-ratio internally. */

/* Tight viewports (landscape phones): hide the hint to give more room. */
@media (max-height: 600px) {
  p.hint { display: none; }
  h1 { font-size: 20px; }
}

/* /games splash: list of board thumbnails inside the shared .page
   column. Empty-state hint shows only when no cards. */
.games-list:not(:empty) + .empty-state { display: none; }
.games-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 2rem;
}
/* Splash card. A thumbnail board with the max-value tile bright and
   everything else dimmed via a tinted overlay; on hover the whole
   board lights back up. Overlays carry the metadata (last-active,
   won/over badge) on top. */
.game-card {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  text-decoration: none;
  font-family: var(--font-mono);
}
.game-card .board-wrap { width: 100%; height: 100%; }

/* /leaderboard: top-5 per-player best. The first slot takes the full
   row width (the "podium"); ranks 2-3 and 4-5 sit two-up below it.
   Mobile collapses to one column. Each row reuses .game-card as a
   dimmed thumbnail; click-through goes to /watch/<game_id>. */
.leaderboard-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
/* #1 always spans the full grid width; everything else auto-flows. */
.leaderboard-list > .leaderboard-row:first-child { grid-column: 1 / -1; }

.leaderboard-row {
  display: grid;
  grid-template-columns: 3rem 140px 1fr;
  gap: 1rem;
  align-items: center;
}
/* The podium row is roomier than the secondary slots: bigger card,
   bigger rank, more breathing room. */
.leaderboard-list > .leaderboard-row:first-child {
  grid-template-columns: 4rem 220px 1fr;
  gap: 1.5rem;
}
.leaderboard-list > .leaderboard-row:first-child .row-card { width: 220px; }
.leaderboard-list > .leaderboard-row:first-child .rank { font-size: 2.5rem; }
.leaderboard-list > .leaderboard-row:first-child .row-meta .score { font-size: 1.75rem; }

.leaderboard-row .rank {
  font-family: var(--font-mono);
  font-size: 1.75rem;
  font-weight: 700;
  opacity: 0.7;
  text-align: right;
}
.leaderboard-row .row-card { width: 140px; aspect-ratio: 1; }
.leaderboard-row .row-card .game-card { display: block; width: 100%; height: 100%; }
.leaderboard-row .row-meta { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.leaderboard-row .row-meta .score {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
}
.leaderboard-row .row-meta .row-line,
.leaderboard-row .row-meta .by { margin: 0; font-size: var(--text-sm); opacity: 0.85; }
.leaderboard-title { margin-bottom: 0; }
.leaderboard-lede { margin: 0 0 0.5rem; opacity: 0.7; font-size: var(--text-sm); }

@media (max-width: 700px) {
  /* Collapse to a single column on mobile: #1 keeps its podium look,
     others share the same compact layout but stack vertically. */
  .leaderboard-list { grid-template-columns: 1fr; }
  .leaderboard-list > .leaderboard-row:first-child {
    grid-template-columns: 3rem 1fr;
    gap: 1rem;
  }
  .leaderboard-list > .leaderboard-row:first-child .row-card {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 280px;
    justify-self: center;
  }
  .leaderboard-list > .leaderboard-row:first-child .row-meta { grid-column: 2; }
  .leaderboard-list > .leaderboard-row:first-child .rank { grid-row: 1; align-self: start; }
}

.page {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
/* /play layout: grid with controls above the board, help to the right
   of the board (aligned with the BOARD's top, not the controls row).
   At narrow viewports help drops below the board. Everything is
   left-aligned with the breadcrumb's left edge -- the board hugs the
   .page left margin rather than centering. */
.play-layout {
  display: grid;
  gap: 0.5rem 1.5rem;
  grid-template-columns: 1fr;
  /* Stacked: DOM order is board-controls, column, help -- one column,
     help stretches full width. */
}
@media (min-width: 700px) {
  .play-layout {
    grid-template-columns: 2fr 1fr;
    grid-template-areas:
      "controls ."
      "board    help";
  }
  .board-controls { grid-area: controls; }
  .column         { grid-area: board; }
  /* align-self: start so help stays at its content height instead of
     stretching to match the board's height. Only set in wide mode --
     stacked mode wants help to fill its row. */
  .help           { grid-area: help; align-self: start; }
}

/* Breadcrumb header (used on both / and /play): left = nav crumb +
   keyboard shortcut, right = action/identity, baseline-aligned on one
   row. Same shape so the two pages share a header rhythm. */
.breadcrumb {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--text-base);
  /* font-family inherits from <nav> element rule (header,nav,code,kbd,... mono) */
}
.breadcrumb .left,
.breadcrumb .right {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

/* Board controls strip: score top-left, [u]ndo button top-right. */
.board-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
}
.score-block {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}
/* Score: big mono number in the cream header color; the *number* IS
   the label here, no word. */
/* Score: big readout on /play. Marked up as <output> so mono comes
   from the element rule; just size + color + tabular nums. */
#score {
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--fg-header);
  font-variant-numeric: tabular-nums;
}
/* Undo tally: small, muted, on the score's baseline. Hidden (data-show)
   until the game uses an undo, so a clean run shows just the score. */
.undo-tally {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--fg);
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}

/* Thumb control pad (/play): a cross D-pad -- up / left+right / down.
   (Undo is a meta action and lives in the breadcrumb, not here.) Same
   fixed-size markup on mobile and desktop -- big thumb targets on a
   phone, proportional next to the board on a wide screen. */
.help {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  align-content: start;
  color: var(--fg-header);
}
.dpad {
  display: grid;
  /* Fixed key size (not 1fr) so the cross stays a compact, comfortable
     thumb target instead of stretching to fill a phone's full width --
     and so mobile and desktop render the same size. Centered in the
     column. */
  grid-template-columns: repeat(3, 5rem);
  grid-template-areas:
    ".    up    ."
    "left .     right"
    ".    down  .";
  gap: 0.5rem;
  justify-content: center;
}
.dpad-up    { grid-area: up; }
.dpad-left  { grid-area: left; }
.dpad-right { grid-area: right; }
.dpad-down  { grid-area: down; }
.dpad-key {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  aspect-ratio: 1;
  border: 0;
  border-radius: 0.8rem;
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
  cursor: pointer;
  /* chunky bottom edge so the key reads as a physical cap; collapses on
     :active for a satisfying press. */
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
  transition: transform 80ms, box-shadow 80ms, background 0.15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.dpad-key .arrow {
  font-size: clamp(1.6rem, 9vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
}
.dpad-key .hint {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  opacity: 0.5;
  line-height: 1;
}
/* :hover only where a real pointer exists -- on touch it sticks after a
   tap. The press accent comes from .is-pressed, which JS sets for the
   in-flight move and clears on the server's ack. */
@media (hover: hover) {
  .dpad-key:hover { background: var(--accent); }
}
.dpad-key.is-pressed { background: var(--accent); }
.dpad-key:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.35);
}
/* kbd-btn: every clickable is a bracketed phrase. The phrase IS the
   button; the keyboard shortcut sits inside as `[k]`. Two variants:
     default  subdued slab; turns orange (`--accent`) on :hover and
              on [aria-pressed="true"] (toggle state).
     primary  always orange (`--accent`); turns oranger (`--accent-hover`)
              on :hover / [aria-pressed="true"]. Used for the splash CTA.
   Used as <button> (JS-wired via [data-intent]) or <a> (real href, so
   right-click-open-in-tab works). Same class either way. */
.kbd-btn {
  font-weight: 700;
  font-size: var(--text-base);
  color: #fff;
  background: rgba(0, 0, 0, 0.3);
  padding: 0.2rem 0.55rem;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
  transition: transform 80ms, box-shadow 80ms, background 0.15s;
  /* baseline so [k]ey + tail line up; gap between bracketed key and the
     surrounding phrase fragments so `[n]ew game` doesn't run together. */
  display: inline-flex;
  align-items: baseline;
  gap: 0.25em;
  line-height: 1;
}
@media (hover: hover) {
  .kbd-btn:hover { background: var(--accent); color: #fff; }
}
/* aria-pressed = real toggle state (audio); is-pressed = transient move
   feedback cleared on ack. Both reuse the accent treatment. */
.kbd-btn[aria-pressed="true"],
.kbd-btn.is-pressed { background: var(--accent); color: #fff; }
.kbd-btn:active {
  transform: translateY(2px);
  box-shadow: none;
}
/* Micro space between brackets and the key glyph: `[ h ]` reads more
   like a key-cap than `[h]`. */
.kbd-btn .bracket { opacity: 0.55; }
.kbd-btn .bracket:first-child { margin-right: 0.2em; }
.kbd-btn .bracket:last-child  { margin-left:  0.2em; }
.kbd-btn .key { color: #fff; }
/* `.phrase` wraps prefix/suffix text (e.g. "ew game" in `[n]ew game`).
   No gap inside the phrase span so suffix sits flush against the right
   bracket; the inter-segment gap is handled by the flex `gap` above. */
.kbd-btn .phrase { white-space: pre; }
/* primary variant: the splash CTA. Bigger, tilted, orange base; turns
   oranger on hover / aria-pressed via the rule above (overridden here
   to use accent-hover instead of accent). */
.kbd-btn.primary {
  background: var(--accent);
  font-size: 2.25rem;
  padding: 0.85rem 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 8px;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.3);
  transform: rotate(-2deg);
  transition: transform 0.12s, box-shadow 0.12s, background 0.15s;
}
.kbd-btn.primary:hover,
.kbd-btn.primary[aria-pressed="true"] {
  background: var(--accent-hover);
  transform: rotate(-2deg) translate(-1px, -1px);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.35);
}
.kbd-btn.primary:active {
  transform: rotate(-2deg) translate(2px, 2px);
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}
/* Splash hero. Title on its own row; below it, .splits is a flex row
   of two columns (.lede + .preview) that wraps to a single column on
   narrow viewports. Each column is a flex column. */
.hero {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 1rem 0 2.5rem;
}
.hero > h2 { font-family: var(--font-mono); color: var(--fg-header); font-size: 3rem; line-height: 1.1; }
.hero > audio { display: none; }

.splits { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; }
.splits > * { flex: 1 1 360px; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.kbd-btn.primary { align-self: flex-start; }

.desc                { font-size: var(--text-lg); }
.credit              { font-size: var(--text-sm); }
.splash-audio-credit { font-size: var(--text-sm); color: rgba(255, 255, 255, 0.7); }
#splash-board        { max-width: 380px; width: 100%; }

.splash-progress { display: flex; align-items: center; gap: 0.6rem; }
.splash-slider   { flex: 1; min-width: 0; accent-color: var(--accent); cursor: pointer; }
.splash-counter  { font-family: var(--font-mono); font-size: var(--text-sm); opacity: 0.7; font-variant-numeric: tabular-nums; }
/* Three rabbit-hole callouts under the PLAY NOW button. Just list +
   whitespace, no borders or backgrounds -- each item is a link with a
   muted explanatory clause. */
.callouts {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.callouts li { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; }
.callouts a { font-size: var(--text-lg); }
.callout-desc { font-size: var(--text-md); opacity: 0.85; }

/* Raw-tag typography: the look lives on the tag so it reads the same
   wherever the tag appears (essays, the /design markdown demo, ...).
   Vertical rhythm (margins) is added per context below, not here, since
   the reset zeroes margins for the flex-based chrome.
   Headings share one look (the body's sans + off-white, like h1); each
   step just sizes down. The cream (--fg-header) is a specialization
   applied where wanted -- e.g. the splash hero's .hero > h2. */
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
blockquote {
  padding: 0.25em 0 0.25em 1.25em;
  border-left: 3px solid var(--brand);
  color: var(--fg-header);
  font-style: italic;
  opacity: 0.9;
}
code {  /* mono is already set on the element; add the inline pill */
  font-size: 0.92em;
  padding: 0.1em 0.35em;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
}
pre {
  padding: 0.9em 1.1em;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 6px;
  overflow-x: auto;
  font-size: var(--text-sm);
  line-height: 1.5;
}
pre code { padding: 0; background: none; border-radius: 0; font-size: inherit; }

/* Vertical rhythm for content blocks inside <main>. App pages put a
   single .page/.hero in main, so this is a no-op for them; essay pages
   (/notes) put their prose blocks straight in main, where it does the
   spacing. Direct-child (>) keeps the splash hero's nested h2 out of it. */
main > * + * { margin-top: 1em; }
/* Section breaks before headings, in rem so they don't compound with the
   heading's own (large) font-size the way em would. */
main > h2 { margin-top: 2rem; }
main > h3 { margin-top: 1.5rem; }

/* Site header: shared by / and /play. Mirrors the http-nu/www header
   pattern -- `flex items-baseline justify-between mt-10 mb-2`. Title
   left, status + credit right. No divider lines; whitespace separates. */
.site-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 2rem 0 0.75rem;
  font-size: var(--text-sm);
}
.site-header .site-title {
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 2.75rem);
  color: var(--fg-header);
  /* underline inherited from global a -- reads as the home link it is */
}
.site-header-right {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  margin-left: auto;
}
.you-are { font-size: var(--text-sm); }
.site-nav-link { font-size: var(--text-sm); }
.site-presence { font-size: var(--text-sm); opacity: 0.8; font-variant-numeric: tabular-nums; }
.game-presence { font-family: var(--font-mono); font-size: var(--text-sm); opacity: 0.75; }

.site-header .status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
}
.site-header .stat { font-variant-numeric: tabular-nums; }
/* Reserve room for the largest realistic value ("9999ms") so the row
   doesn't reflow with digit count. text-align: left anchors digits
   next to the conn dot (visual pair); reserved slack sits on the right. */
.site-header #rtt { display: inline-block; min-width: 6ch; text-align: left; }

/* Site footer: whitespace partitions, no border or background. Links
   like nav -- each page anchors the same set of meta destinations. */
.site-footer {
  /* Content right-aligned within the page column. The link's muted look
     comes from the shared chrome-link rule. */
  margin: 4rem 0 1.5rem;
  text-align: right;
  font-size: var(--text-sm);
}
.site-header .credit .mascot {
  width: 64px;
  height: 36px;
  vertical-align: bottom;
}
.site-header #conn {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #888;
  align-self: center;
}
body[data-conn="ok"]   .site-header #conn { background: #2a9d4a; }
body[data-conn="down"] .site-header #conn { background: #c0392b; }

/* Splash: the nu2048 title is redundant (splash IS the landing). Keep
   player chip + credit on the right. `visibility: hidden` (not
   `display: none`) so the title still reserves its layout box -- the
   header row keeps the same height across every page. */
body.splash .site-title { visibility: hidden; }

/* Narrow viewports: the chrome rows carry more than fits on one line.
   Let both header rows wrap instead of clipping off the right edge, and
   drop the decorative "served by http-nu" credit (the 64px mascot is the
   biggest space hog and the link lives in the footer's spirit anyway). */
@media (max-width: 700px) {
  .site-header,
  .site-header-right,
  .breadcrumb,
  .breadcrumb .left,
  .breadcrumb .right { flex-wrap: wrap; }
  .site-header .credit { display: none; }
  /* The splash is the nav hub: leaderboard + the "you are" profile link
     live there. On every other page they'd just crowd the header on a
     phone, so hide them off-splash -- tap the nu2048 title to get back.
     The /play spectator ("watch") link is non-essential to the player,
     so it drops here too, keeping the breadcrumb to a single row. */
  body:not(.splash) .site-nav-link,
  body:not(.splash) .you-are,
  .spectate-link { display: none; }
  /* Reclaim vertical space so the board + full control pad fit one phone
     screen: tighter top margin and inter-block gaps. */
  .site-header { margin-top: 1rem; }
  .page { gap: 0.6rem; }
  /* On /play, the breadcrumb's per-game "N here" duplicates the
     site-header presence; drop it (and its separator) so the game-id and
     the undo / new-game actions fit on one row instead of wrapping. */
  body.play .game-presence,
  body.play .breadcrumb .left .sep { display: none; }
}

/* Inline link-styled button (e.g. undo in the footer). */
.linklike {
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  cursor: pointer;
  box-shadow: none;
  transition: opacity 0.2s;
}
.linklike:hover { opacity: 0.8; background: none; }
.linklike:active { transform: none; box-shadow: none; }

/* Status badge ("game over" / "you win!") lives inside the <game-board>
   shadow DOM -- its styles are encapsulated there. The board's tile
   slide / merge-pop / spawn-in animations also run inside the shadow
   DOM via Web Animations API, so there are no ::view-transition rules
   here either. Only the MPA navigation transition (@view-transition
   above) is still in play; it animates whole-page nav, not boards. */