/* ==========================================================================
   content.css — typography + layout for the SEO content sections.
   Loaded on every page. style.css handles the game itself; this file
   handles the site header, footer, article content, and homepage scroll
   region below the game.
   ========================================================================== */

:root {
  --content-bg:     #1a1832;
  --content-fg:     #ebe5d9;
  --content-fg-dim: rgba(235, 229, 217, 0.70);
  --content-link:   #ffd166;
  --content-link-h: #ffe2a1;
  --content-rule:   rgba(255, 255, 255, 0.08);
  --content-card:   rgba(255, 255, 255, 0.04);
  --content-width:  720px;
}

/* ---------- site header (content pages only) ---------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--content-rule);
  background: rgba(26, 24, 50, 0.85);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 10;
}
.site-brand {
  font: 700 18px -apple-system, system-ui, sans-serif;
  letter-spacing: -0.01em;
  color: var(--content-fg);
  text-decoration: none;
}
.site-brand span { color: var(--accent); font-weight: 600; }
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  justify-content: flex-end;
}
.site-nav a {
  color: var(--content-fg-dim);
  font: 600 13px -apple-system, system-ui, sans-serif;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: color 0.15s ease;
}
.site-nav a:hover { color: var(--content-link); }

/* Language switcher in the site header — only appears on pages that
   have translations (see buildLangSwitcher in scripts/build.js). */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 700 12px -apple-system, system-ui, sans-serif;
  letter-spacing: 0.08em;
  color: var(--content-fg-dim);
  margin-left: 14px;
}
.lang-switcher a { color: var(--content-fg-dim); text-decoration: none; transition: color 0.15s ease; }
.lang-switcher a:hover { color: var(--content-link); }
.lang-current { color: var(--content-link); font-weight: 800; }
.lang-sep { opacity: 0.4; }

@media (max-width: 560px) {
  .site-header { padding: 12px 14px; flex-wrap: wrap; gap: 6px 12px; }
  .site-brand  { flex: 0 0 100%; }     /* brand stacks on its own line */
  .site-nav    { gap: 6px 14px; justify-content: flex-start; }
  .site-nav a  { font-size: 12px; letter-spacing: 0.03em; }
  .lang-switcher { margin-left: auto; gap: 4px; font-size: 11px; }
}

/* ---------- homepage scroll cue ---------- */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  color: var(--content-fg-dim);
  text-align: center;
  line-height: 36px;
  font-size: 18px;
  text-decoration: none;
  z-index: 8;
  animation: scrollCueBob 2.2s ease-in-out infinite;
  pointer-events: auto;
  /* The scroll-cue sits inside #game-area's stacking context so it disappears
     naturally when the user has scrolled past the game. */
}
.scroll-cue {
  /* Belongs to the homepage game area — anchor it relative to that. */
  top: calc(100svh - 54px);
}
@keyframes scrollCueBob {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.55; }
  50%      { transform: translate(-50%, 6px); opacity: 1.0;  }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue { animation: none; }
}

/* ---------- homepage sub-nav (under the game area) ---------- */
.sub-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  padding: 18px 16px 8px;
  border-bottom: 1px solid var(--content-rule);
  background: var(--content-bg);
}
.sub-nav a {
  color: var(--content-fg-dim);
  font: 600 13px -apple-system, system-ui, sans-serif;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 4px 6px;
  transition: color 0.15s ease;
}
.sub-nav a:hover { color: var(--content-link); }

/* ---------- main content / article ---------- */
.content {
  background: var(--content-bg);
  padding: 36px 24px 64px;
  /* Flex with default min-width:auto lets long-line article content
     punch past the viewport — switched to plain block + margin auto. */
}
.content > article {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: var(--content-width);
  color: var(--content-fg);
  line-height: 1.65;
  font-size: 17px;
  min-width: 0;
  overflow-wrap: anywhere;        /* break unwieldy URLs / strings instead of overflowing */
}
.content-head { margin-bottom: 14px; }
.content h1 {
  font: 700 36px -apple-system, system-ui, sans-serif;
  letter-spacing: -0.02em;
  margin: 6px 0 16px;
  line-height: 1.15;
}
.content-lede {
  font-size: 19px;
  color: var(--content-fg-dim);
  margin: 0 0 32px;
  line-height: 1.55;
}
.content h2 {
  font: 700 24px -apple-system, system-ui, sans-serif;
  letter-spacing: -0.01em;
  margin: 44px 0 14px;
  line-height: 1.25;
  scroll-margin-top: 76px;
}
.content h3 {
  font: 700 18px -apple-system, system-ui, sans-serif;
  margin: 28px 0 10px;
}
.content p { margin: 0 0 16px; }
.content a {
  color: var(--content-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.content a:hover { color: var(--content-link-h); }
.content ul, .content ol {
  margin: 0 0 18px;
  padding-left: 24px;
}
.content li { margin: 6px 0; }
.content kbd {
  display: inline-block;
  padding: 1px 6px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 4px;
  vertical-align: 1px;
}
.content strong { color: var(--content-fg); font-weight: 700; }
.content em { color: var(--content-fg); font-style: italic; }
.content figure {
  background: var(--content-card);
  border: 1px solid var(--content-rule);
  border-radius: 10px;
  padding: 18px;
  margin: 24px 0;
}
.content figcaption {
  color: var(--content-fg-dim);
  font-size: 14px;
  margin-top: 8px;
}

/* ---------- inline diagram figures (.content-figure) ---------- */
/* Used for in-content SVG diagrams in the guide pages. Same card look
   as the default `.content figure`, but with tighter padding, a centred
   SVG, and a centred caption. The SVG itself uses viewBox so it scales
   responsively up to a 600 px cap. */
.content-figure {
  margin: 28px 0;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
}
.content-figure svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 600px;
  margin: 0 auto;
}
.content-figure figcaption {
  color: var(--content-fg-dim);
  font-size: 13px;
  text-align: center;
  margin-top: 8px;
}

/* ---------- author card ---------- */
.author-card {
  display: flex;
  gap: 18px;
  align-items: center;
  margin: 28px 0;
  padding: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
}
.author-card img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.05);
  flex: 0 0 96px;
}
.author-card figcaption {
  color: var(--content-fg-dim);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  text-align: left;
}
.author-card figcaption strong { color: var(--content-fg); }
@media (max-width: 520px) {
  .author-card { flex-direction: column; align-items: flex-start; }
  .author-card figcaption { text-align: left; }
}

/* ---------- code blocks (embed docs) ---------- */
.content code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.88em;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--content-fg);
}
.content pre.code-block {
  margin: 18px 0 22px;
  padding: 16px 18px;
  background: #14122a;
  border: 1px solid var(--content-rule);
  border-radius: 10px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.55;
  color: #ebe5d9;
}
.content pre.code-block code {
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
  color: inherit;
  white-space: pre;
}

/* ---------- embed live-preview frame ---------- */
.content figure.embed-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px;
}
.content figure.embed-preview iframe {
  display: block;
  max-width: 100%;
  border: 0;
  border-radius: 10px;
  background: #1a1632;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.content figure.embed-preview figcaption {
  text-align: center;
}
.content-cta {
  margin-top: 40px;
  text-align: center;
}
.play-cta {
  display: inline-block;
  padding: 12px 26px;
  background: var(--content-link);
  color: #1a1632;
  font: 700 14px -apple-system, system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  transition: transform 0.15s ease, background 0.15s ease;
}
.play-cta:hover {
  background: var(--content-link-h);
  transform: translateY(-1px);
}

/* ---------- breadcrumbs ---------- */
.breadcrumbs {
  font-size: 13px;
  color: var(--content-fg-dim);
  letter-spacing: 0.03em;
  margin-bottom: 18px;
}
.breadcrumbs a {
  color: var(--content-fg-dim);
  text-decoration: none;
}
.breadcrumbs a:hover { color: var(--content-link); }
.breadcrumbs .sep { margin: 0 8px; opacity: 0.5; }

/* ---------- leaderboard / records tables ---------- */
.lb-table, .records-grid {
  width: 100%;
  margin: 24px 0;
}
.lb-table {
  border-collapse: collapse;
}
/* Wrap each leaderboard table in its own horizontal-scroll context so a
   long player name can't push the whole content column off the right. */
.lb-table { display: block; overflow-x: auto; }
.lb-table thead, .lb-table tbody { display: table; width: 100%; table-layout: fixed; }
.lb-table td, .lb-table th { word-break: break-word; }
.lb-table th, .lb-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--content-rule);
  font-variant-numeric: tabular-nums;
}
.lb-table th {
  font: 600 12px -apple-system, system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--content-fg-dim);
}
.lb-table td:first-child { color: var(--content-link); font-weight: 700; width: 60px; }
.lb-table td:last-child  { text-align: right; font-weight: 700; }
.lb-empty-row td {
  text-align: center;
  color: var(--content-fg-dim);
  font-style: italic;
  padding: 24px 12px;
}
.records-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}
.record-card {
  background: var(--content-card);
  border: 1px solid var(--content-rule);
  border-radius: 10px;
  padding: 16px 18px;
}
.record-card .label {
  font: 600 11px -apple-system, system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--content-fg-dim);
  margin: 0 0 6px;
}
.record-card .value {
  font: 700 28px -apple-system, system-ui, sans-serif;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--content-fg);
}
.record-card .meta {
  font-size: 12px;
  color: var(--content-fg-dim);
  margin-top: 4px;
}

/* ---------- daily-challenge highlight box ---------- */
.daily-card {
  background: linear-gradient(135deg, rgba(255, 209, 102, 0.12), rgba(94, 255, 138, 0.06));
  border: 1px solid rgba(255, 209, 102, 0.30);
  border-radius: 12px;
  padding: 22px;
  margin: 24px 0;
}
.daily-card .label {
  font: 600 11px -apple-system, system-ui, sans-serif;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 8px;
}
.daily-card .challenge {
  font: 700 22px -apple-system, system-ui, sans-serif;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.daily-card .date {
  font-size: 13px;
  color: var(--content-fg-dim);
}

/* ---------- footer ---------- */
.site-footer {
  background: #15132a;
  border-top: 1px solid var(--content-rule);
  padding: 32px 24px 24px;
  color: var(--content-fg-dim);
  font-size: 13px;
}
.site-footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  justify-content: center;
  margin-bottom: 18px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.site-footer-nav a {
  color: var(--content-fg-dim);
  text-decoration: none;
  font: 600 13px -apple-system, system-ui, sans-serif;
}
.site-footer-nav a:hover { color: var(--content-link); }
.site-footer-meta {
  text-align: center;
  font-size: 12px;
  color: var(--content-fg-dim);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.5;
}

/* ---------- 404 page ---------- */
.page-404 .four-oh-four {
  font: 800 96px -apple-system, system-ui, sans-serif;
  letter-spacing: -0.04em;
  color: var(--accent);
  margin: 8px 0 4px;
  line-height: 1;
}
.page-404 h1 {
  font-size: 30px;
  margin: 0 0 18px;
}

/* ---------- responsive tweaks ---------- */
@media (max-width: 560px) {
  .content { padding: 28px 18px 48px; }
  .content > article { font-size: 16px; }
  .content h1 { font-size: 30px; }
  .content h2 { font-size: 21px; margin-top: 36px; }
  .content-lede { font-size: 17px; }
  .page-404 .four-oh-four { font-size: 80px; }
}

/* ==========================================================================
   /records page — score distribution, recent runs, firsts.
   Each block is a self-contained card matching .record-card's surface so
   the page reads as one set of artefacts rather than three styled widgets.
   ========================================================================== */

/* ---------- score distribution (inline SVG bar chart) ---------- */
.score-dist {
  background: var(--content-card);
  border: 1px solid var(--content-rule);
  border-radius: 10px;
  padding: 18px 18px 14px;
  margin: 20px 0 22px;
  max-width: 100%;
  overflow-x: auto;
}
.score-dist svg {
  display: block;
  max-width: 100%;
  height: auto;
}
.score-dist svg .bar {
  fill: var(--content-link);
  opacity: 0.85;
}
.score-dist svg .bar-label {
  fill: var(--content-fg-dim);
  font: 600 11px -apple-system, system-ui, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.score-dist svg .bar-value {
  fill: var(--content-fg);
  font: 600 12px -apple-system, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}
.score-dist svg .bar-pct {
  fill: var(--content-fg-dim);
  font-weight: 400;
}
.score-dist-meta {
  margin: 6px 2px 0;
  font-size: 12px;
  color: var(--content-fg-dim);
}
.score-dist-empty,
.recent-runs-empty,
.firsts-empty {
  background: var(--content-card);
  border: 1px solid var(--content-rule);
  border-radius: 10px;
  padding: 18px;
  margin: 20px 0;
  color: var(--content-fg-dim);
  font-style: italic;
  text-align: center;
}

/* ---------- recent notable runs ---------- */
.recent-runs {
  width: 100%;
  margin: 20px 0 22px;
  border-collapse: collapse;
  background: var(--content-card);
  border: 1px solid var(--content-rule);
  border-radius: 10px;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.recent-runs th,
.recent-runs td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--content-rule);
}
.recent-runs tbody tr:last-child td { border-bottom: 0; }
.recent-runs th {
  font: 600 11px -apple-system, system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--content-fg-dim);
  background: rgba(255, 255, 255, 0.02);
}
.recent-runs td:first-child {
  color: var(--content-link);
  font-weight: 700;
  width: 56px;
}
.recent-runs td:nth-child(3) {
  font-weight: 700;
  color: var(--content-fg);
}
.recent-runs td:last-child {
  color: var(--content-fg-dim);
  font-size: 14px;
  text-align: right;
  white-space: nowrap;
}

/* ---------- firsts (milestones grid) ---------- */
.firsts-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin: 20px 0 22px;
}
.firsts-card {
  background: var(--content-card);
  border: 1px solid var(--content-rule);
  border-radius: 10px;
  padding: 16px 18px;
}
.firsts-empty-card {
  opacity: 0.65;
  background: transparent;
  border-style: dashed;
}
.firsts-label {
  font: 600 11px -apple-system, system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--content-fg-dim);
  margin: 0 0 6px;
}
.firsts-value {
  font: 700 22px -apple-system, system-ui, sans-serif;
  letter-spacing: -0.01em;
  color: var(--content-link);
  margin: 0;
  word-break: break-word;
}
.firsts-empty-card .firsts-value {
  color: var(--content-fg-dim);
  font-style: italic;
  font-weight: 600;
  font-size: 17px;
}
.firsts-meta {
  font-size: 12px;
  color: var(--content-fg-dim);
  margin: 6px 0 0;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .recent-runs th,
  .recent-runs td   { padding: 8px 10px; }
  .recent-runs td:last-child { font-size: 13px; }
  .firsts-value     { font-size: 19px; }
}

/* ==========================================================================
   POLISH LAYER — visual upgrades for the SEO content pages.
   Additive only; nothing above this block was modified. All new rules
   live below so the diff is obvious and easy to revert.
   ========================================================================== */

/* ---------- hero block (wraps breadcrumbs + kicker + h1 + lede) ----------
   Full-bleed dark gradient that sits inside .content (which provides the
   page padding). Negative margins pull it to the edges of .content so the
   gradient runs to the viewport sides without us having to break out of
   the layout. The kicker + rule combo gives the page a magazine-column
   feel that the flat body alone never had. */
.content > .hero {
  position: relative;
  margin: -36px -24px 40px;
  padding: 38px 24px 34px;
  background:
    radial-gradient(120% 140% at 85% 0%, rgba(255, 209, 102, 0.10) 0%, transparent 55%),
    radial-gradient(110% 130% at 0% 100%, rgba(94, 145, 255, 0.10) 0%, transparent 50%),
    linear-gradient(180deg, #221e3e 0%, #1d1a37 55%, var(--content-bg) 100%);
  border-bottom: 1px solid var(--content-rule);
  overflow: hidden;
}
.content > .hero::after {
  /* A single hairline of gold along the bottom edge — the only "decoration"
     in the hero. Reads as deliberate, not flashy. */
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 209, 102, 0.45), transparent);
}
.content > .hero > * {
  /* Constrain inner hero content to the same reading column as the article
     body, even though the hero itself extends full-bleed. */
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
}
.content > .hero .breadcrumbs { margin-bottom: 22px; }
.content > .hero h1 { margin-top: 4px; margin-bottom: 14px; }
.content > .hero .content-lede { margin-bottom: 0; }

/* Kicker — small uppercase label above the H1. Per-page kicker text is
   set on the <header class="hero" data-kicker="..."> element so the same
   CSS works everywhere without per-page HTML duplication. The leading
   gold bullet matches the section dividers below — single visual motif. */
.content > .hero[data-kicker]::before {
  content: "\2022\00a0\00a0" attr(data-kicker);
  display: block;
  max-width: var(--content-width);
  margin: 0 auto 14px;
  font: 700 11px -apple-system, system-ui, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---------- section dividers ----------
   A single gold dot before each H2 inside an article. Same motif as the
   hero kicker — quiet, consistent, never decorative noise. Section H2s
   get a hairline of breathing room above (border + extra top margin) so
   the visual rhythm of the long-form pages is unambiguous. */
.content > article > section { margin-top: 10px; }
.content > article > section > h2 {
  position: relative;
  padding-top: 32px;
  border-top: 1px solid var(--content-rule);
}
.content > article > section:first-of-type > h2 {
  /* First section sits right under the hero — no extra border needed. */
  padding-top: 0;
  border-top: 0;
  margin-top: 8px;
}
.content > article > section > h2::before {
  content: "\2022";              /* gold dot prefix */
  color: var(--accent);
  margin-right: 12px;
  font-weight: 900;
  display: inline-block;
  transform: translateY(-1px);
}
.content > article > section:first-of-type > h2::before {
  /* Hide the dot on the first H2 — already visually anchored by the hero. */
  display: none;
}

/* ---------- in-content link polish ----------
   Slightly thicker underline, a subtle gold-glow on hover, no layout
   shift. Animation only on the underline — never on text size or weight. */
.content a:not(.play-cta) {
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.content a:not(.play-cta):hover {
  text-decoration-color: var(--content-link-h);
  text-decoration-thickness: 2px;
}

/* ---------- play CTA — bigger, prouder, with a soft gold halo ---------- */
.play-cta {
  padding: 16px 34px;
  font-size: 15px;
  letter-spacing: 0.08em;
  box-shadow:
    0 0 0 1px rgba(255, 209, 102, 0.55),
    0 10px 30px -8px rgba(255, 209, 102, 0.40),
    0 2px 6px rgba(0, 0, 0, 0.25);
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
              background 0.18s ease,
              box-shadow 0.18s ease;
}
.play-cta:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(255, 226, 161, 0.75),
    0 16px 36px -8px rgba(255, 209, 102, 0.55),
    0 4px 10px rgba(0, 0, 0, 0.30);
}
.play-cta:active {
  transform: translateY(0);
}
.content-cta {
  margin-top: 52px;
  margin-bottom: 8px;
}

/* ---------- redesigned footer ----------
   Two-column on desktop (links left, meta right), stacked on mobile.
   Uppercase column label, hairline divider. */
.site-footer {
  padding: 40px 24px 28px;
  background: linear-gradient(180deg, #15132a 0%, #110f23 100%);
}
.site-footer-inner {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 36px 48px;
  align-items: start;
}
.site-footer-col-label {
  font: 700 11px -apple-system, system-ui, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--content-rule);
}
/* Override the legacy centered .site-footer-nav rules when it sits inside
   the new two-column grid. */
.site-footer-inner .site-footer-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 22px;
  margin: 0;
  justify-content: start;
}
.site-footer-inner .site-footer-nav a {
  color: var(--content-fg);
  opacity: 0.78;
  padding: 2px 0;
  transition: color 0.15s ease, opacity 0.15s ease;
}
.site-footer-inner .site-footer-nav a:hover {
  color: var(--content-link);
  opacity: 1;
}
.site-footer-inner .site-footer-meta {
  text-align: left;
  max-width: none;
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}
.site-footer-meta strong {
  color: var(--content-fg);
  font-weight: 700;
}
.site-footer-credit {
  margin-top: 14px;
  font-size: 12px;
  color: var(--content-fg-dim);
  opacity: 0.85;
}
.site-footer-credit a {
  color: var(--content-fg-dim);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 209, 102, 0.25);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.site-footer-credit a:hover {
  color: var(--content-link);
  border-bottom-color: var(--content-link);
}
@media (max-width: 720px) {
  .site-footer-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .site-footer-inner .site-footer-nav {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- list polish ----------
   Custom markers in the accent color. Tighter spacing without losing
   readability. Ordered lists get gold tabular numerals. */
.content ul,
.content ol {
  padding-left: 0;
  list-style: none;
}
.content ul > li,
.content ol > li {
  position: relative;
  padding-left: 26px;
  margin: 8px 0;
}
.content ul > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.78em;
  width: 12px;
  height: 1.5px;
  background: var(--accent);
  border-radius: 1px;
  opacity: 0.85;
}
.content ol {
  counter-reset: hjlist;
}
.content ol > li {
  counter-increment: hjlist;
}
.content ol > li::before {
  content: counter(hjlist) ".";
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  text-align: right;
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 0.95em;
  letter-spacing: -0.01em;
}

/* Tables (leaderboard, controls keyboard table, recent runs) intentionally
   reset list spacing inside cells. They use their own marker styling, so
   we keep our list-marker rules scoped to article-level lists only by
   relying on .content > article > section > ul/ol cascades — but if a
   table cell ever uses an inline <ul>, we don't want our pseudo-bullet.
   Defensive opt-out: */
.content table ul,
.content table ol { padding-left: 18px; list-style: revert; }
.content table ul > li,
.content table ol > li { padding-left: 0; }
.content table ul > li::before,
.content table ol > li::before { content: none; }

/* ---------- kbd — real keycaps ---------- */
.content kbd {
  padding: 3px 9px;
  min-width: 22px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  color: var(--content-fg);
  background: linear-gradient(180deg, #2a274a 0%, #211e3d 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom-color: rgba(0, 0, 0, 0.55);
  border-radius: 5px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 1px 0 rgba(0, 0, 0, 0.45),
    0 2px 0 rgba(0, 0, 0, 0.25);
  vertical-align: 1px;
  line-height: 1.2;
}

/* ---------- related cards (replaces "Next up: a · b · c") ----------
   A small grid of tap-targets at the foot of every page. Each card is a
   thin border + a label + an arrow that slides right on hover. Tasteful
   not flashy: no shadow, no background fill, just the rule and the
   arrow. */
.related {
  margin: 44px 0 8px;
}
.related-label {
  font: 700 11px -apple-system, system-ui, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.related-grid a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  color: var(--content-fg);
  background: var(--content-card);
  border: 1px solid var(--content-rule);
  border-radius: 8px;
  text-decoration: none;
  font: 600 14px -apple-system, system-ui, sans-serif;
  letter-spacing: -0.005em;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.related-grid a::after {
  content: "\2192";              /* → */
  color: var(--content-fg-dim);
  font-weight: 400;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.15s ease;
}
.related-grid a:hover {
  border-color: rgba(255, 209, 102, 0.45);
  background: rgba(255, 209, 102, 0.06);
  transform: translateY(-1px);
}
.related-grid a:hover::after {
  transform: translateX(3px);
  color: var(--content-link);
}

/* ---------- responsive tweaks for the polish layer ---------- */
@media (max-width: 560px) {
  .content > .hero {
    margin: -28px -18px 32px;
    padding: 28px 18px 26px;
  }
  .content > .hero::after { left: 18px; right: 18px; }
  .content > .hero .breadcrumbs { margin-bottom: 16px; }
  .content > article > section > h2 { padding-top: 24px; }
  .play-cta { padding: 14px 28px; font-size: 14px; }
  .related-grid { grid-template-columns: 1fr; }
}