/* =========================================================================
   Cloudfall — the Pixel Kingdom Wars site design system (M47 §2).
   Bright day sky over the kingdom -> the midnight navy of the logo.
   Shipped content-hashed (build-dist.mjs -> /site.<sha256>.css); every page
   links /site.css in source. Pixel rules: hard 2 px steps, notched corners,
   no blur on sprites, one focal point per view.
   ========================================================================= */

@font-face { font-family: "Press Start 2P"; src: url("/assets/fonts/Press_Start_2P.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "VT323"; src: url("/assets/fonts/VT323.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/fonts/AtkinsonHyperlegibleNext-latin-400.woff2?v=5cb240a4") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; 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: "Atkinson Hyperlegible Next"; src: url("/fonts/AtkinsonHyperlegibleNext-latin-700.woff2?v=0dbe07ed") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; 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 {
  /* M47 §2 tokens (exact) */
  --sky-0: #6FC3F7; --sky-1: #BFE7FF; --cloud: #F7FBFF;
  --navy-0: #060C19; --navy: #0B1426; --navy-2: #13213D; --navy-3: #1C2D52; --rule: #2A3B62;
  --cream: #F3E7C9; --parch: #FFF6E0;
  --gold: #F2B544; --gold-hi: #FFE08A; --gold-dp: #A86B10;
  --cyan: #5FE1EE; --ember: #D2472F; --grass: #62B043; --muted: #9AA8C2;
  /* derived */
  --ink: #C9D3E6;            /* body copy on navy (AA 11:1 on --navy) */
  --ink-dim: #9AA8C2;        /* = --muted */
  --gold-lo: #D9962A;        /* hover face between gold and gold-dp */
  --grass-dp: #3D7A2A; --ember-dp: #8E2A1B;
  --stone: #22355E; --stone-hi: #34497A; --stone-dp: #0E1830;
  --focus: var(--cyan);
  --font-pixel: "Press Start 2P", ui-monospace, "Courier New", monospace;
  --font-display: "VT323", ui-monospace, "Courier New", monospace;
  --font-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --gutter: clamp(16px, 4vw, 40px);
  --content: 1200px;         /* the site's content column (header, footer, every .wrap); big screens widen it below */
  --narrow: 820px;           /* the reading column of the legal pages (.wrap.narrow) */
  --measure: 68ch;
  --px: 2px;                 /* one art pixel of chrome */
  --notch: 2px 0 0 0 var(--nc, var(--rule)), -2px 0 0 0 var(--nc, var(--rule)), 0 2px 0 0 var(--nc, var(--rule)), 0 -2px 0 0 var(--nc, var(--rule));
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  margin: 0; min-width: 300px; overflow-x: clip;
  background-color: var(--navy);
  /* a faint 4 px dither so large navy fields read as painted, not flat */
  background-image:
    radial-gradient(rgba(191, 231, 255, .035) 1px, transparent 1.2px),
    linear-gradient(180deg, var(--navy) 0, var(--navy) 60%, var(--navy-0) 100%);
  background-size: 4px 4px, 100% 100%;
  color: var(--ink); font-family: var(--font-body); font-size: clamp(16px, .95rem + .18vw, 18px); line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, picture { max-width: 100%; }
img { display: block; height: auto; }
.px, .sprite { image-rendering: pixelated; }
a { color: var(--gold-hi); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--parch); }
strong, b { color: var(--cream); font-weight: 700; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { color: var(--cream); margin: 0; font-weight: 400; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 0; }
::selection { background: var(--gold); color: var(--navy-0); }
.sr-only, .sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: 100%; max-width: calc(var(--content) + 2 * var(--gutter)); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }
.wrap.narrow { max-width: calc(var(--narrow) + 2 * var(--gutter)); }
/* Big screens (owner 2026-09-28, photos of a large desktop monitor): the
   column and the body type grow in two steps so a 1440p or ultrawide monitor
   at 100 %, or a 1080p one zoomed out to 80 % / 67 %, keeps the proportions
   of 1080p instead of a 1200 px island. 1440 px at >= 2200 CSS px is the same
   physical width on a 27" 1440p panel as 1200 px on a 24" 1080p one; from
   3000 px (ultrawide, 4K) the column is 1760 px, and a 4K panel at 100 %
   (>= 3000 x 1600) also gets larger type. The header, the footer, every
   .wrap and the page-hero calm band key on --content, so the nav always lines
   up with the column. Up to 2199 px nothing changes. */
@media (min-width: 2200px) { :root { --content: 1440px; --narrow: 900px; } body { font-size: 19px; } }
@media (min-width: 3000px) { :root { --content: 1760px; } }
@media (min-width: 3000px) and (min-height: 1600px) { :root { --narrow: 1000px; } body { font-size: 21px; } }

/* ---------- skip link ---------- */
.skip-link {
  position: fixed; z-index: 1000; top: max(10px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left));
  padding: 12px 16px 10px; font: 400 11px/1 var(--font-pixel); letter-spacing: .08em; text-decoration: none;
  background: var(--gold); color: var(--navy-0); --nc: var(--navy-0); box-shadow: var(--notch);
  /* fully above the screen even under a top safe-area inset (its top follows it) */
  transform: translateY(calc(-100% - max(10px, env(safe-area-inset-top)) - 4px)); transition: transform .15s steps(3);
}
.skip-link:focus, .skip-link:focus-visible { transform: none; color: var(--navy-0); }

/* ---------- type ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font: 400 10px/1.5 var(--font-pixel); letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
}
.display {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em;
  font-size: clamp(46px, 2.6rem + 5vw, 112px); line-height: .84; color: var(--cream);
  text-shadow: 0 4px 0 var(--navy-0), 0 0 48px rgba(95, 225, 238, .16);
  text-wrap: balance;
}
.display .gild { color: var(--gold); }
.lede { font-size: clamp(17px, 1rem + .3vw, 20px); line-height: 1.55; color: var(--ink); max-width: 60ch; text-wrap: pretty; }
.section-title {
  font-family: var(--font-display); font-size: clamp(36px, 1.8rem + 1.6vw, 56px); line-height: .95; text-transform: uppercase; color: var(--cream);
  text-shadow: 0 3px 0 var(--navy-0);
}
.section-title::after {
  /* stepped gold underline: three pixel bars, widest first */
  content: ""; display: block; width: 72px; height: 4px; margin-top: 14px;
  background: linear-gradient(90deg, var(--gold) 0 48px, transparent 48px 52px, var(--gold-dp) 52px 64px, transparent 64px 68px, var(--gold-dp) 68px 72px);
}
.kicker { font: 400 10px/1.6 var(--font-pixel); letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
.muted { color: var(--muted); }
.num, .tabular { font-variant-numeric: tabular-nums; }

/* ---------- buttons ---------- */
.btn {
  --face: var(--stone); --hi: var(--stone-hi); --lo: var(--stone-dp); --txt: var(--cream);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 15px 20px 13px; border: 0; cursor: pointer;
  font: 400 11px/1.2 var(--font-pixel); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  color: var(--txt); background: var(--face);
  box-shadow:
    inset 2px 2px 0 0 var(--hi), inset -2px -4px 0 0 var(--lo),
    2px 0 0 0 var(--navy-0), -2px 0 0 0 var(--navy-0), 0 2px 0 0 var(--navy-0), 0 -2px 0 0 var(--navy-0),
    0 6px 0 -2px var(--navy-0);
  transition: transform .08s steps(2), background-color .12s steps(2);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { color: var(--txt); background: var(--hi); }
.btn:active {
  transform: translateY(4px);
  box-shadow:
    inset 2px 4px 0 0 var(--lo), inset -2px -2px 0 0 var(--hi),
    2px 0 0 0 var(--navy-0), -2px 0 0 0 var(--navy-0), 0 2px 0 0 var(--navy-0), 0 -2px 0 0 var(--navy-0);
}
.btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 6px; }
.btn-gold { --face: var(--gold); --hi: var(--gold-hi); --lo: var(--gold-dp); --txt: var(--navy-0); }
.btn-gold:hover { background: #F7C45C; }
.btn-stone { --face: var(--stone); --hi: var(--stone-hi); --lo: var(--stone-dp); --txt: var(--cream); }
.btn-sm { min-height: 40px; padding: 11px 14px 9px; font-size: 9px; }
.btn[disabled], .btn[aria-disabled="true"] { filter: saturate(.3) brightness(.8); cursor: not-allowed; }
.btn .arrow, .rn-more .arrow { display: inline-block; width: 8px; height: 10px; background: currentColor;
  clip-path: polygon(0 0, 50% 0, 50% 20%, 75% 20%, 75% 40%, 100% 40%, 100% 60%, 75% 60%, 75% 80%, 50% 80%, 50% 100%, 0 100%, 0 80%, 25% 80%, 25% 60%, 50% 60%, 50% 40%, 25% 40%, 25% 20%, 0 20%); }
.cta-row { display: flex; flex-wrap: wrap; gap: 18px 16px; align-items: center; }

/* ---------- badges & chips ---------- */
.badge {
  --bg: var(--muted); --fg: var(--navy-0);
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 8px 5px; vertical-align: middle;
  font: 400 9px/1 var(--font-pixel); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  color: var(--fg); background: var(--bg); --nc: var(--bg); box-shadow: 2px 0 0 0 var(--nc), -2px 0 0 0 var(--nc), 0 2px 0 0 var(--nc), 0 -2px 0 0 var(--nc);
}
.badge-live { --bg: var(--grass); }
.badge-live::before { content: ""; width: 6px; height: 6px; background: var(--parch); box-shadow: 0 0 0 2px var(--grass-dp); animation: pkw-blink 1.6s steps(1) infinite; }
.badge-coming { --bg: var(--gold); }
.badge-planned { --bg: var(--muted); }
.badge-ember { --bg: var(--ember); --fg: var(--parch); }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 5px; font: 400 9px/1.2 var(--font-pixel); letter-spacing: .08em;
  color: var(--cream); background: var(--navy-3); --nc: var(--rule); box-shadow: var(--notch);
}
@keyframes pkw-blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .15; } }

/* ---------- panels ---------- */
.panel {
  position: relative; padding: clamp(18px, 2.6vw, 30px);
  background-color: var(--navy-2);
  /* gold nail-heads in the four corners, drawn as 2x2 art pixels */
  background-image:
    linear-gradient(var(--gold-dp), var(--gold-dp)), linear-gradient(var(--gold-dp), var(--gold-dp)),
    linear-gradient(var(--gold-dp), var(--gold-dp)), linear-gradient(var(--gold-dp), var(--gold-dp)),
    linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 40%);
  background-size: 2px 2px, 2px 2px, 2px 2px, 2px 2px, 100% 100%;
  background-position: 6px 6px, calc(100% - 6px) 6px, 6px calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), 0 0;
  background-repeat: no-repeat;
  --nc: var(--rule); box-shadow: var(--notch), 0 18px 40px -18px rgba(0, 0, 0, .6);
}
.panel.gilded { --nc: var(--gold-dp); }
.panel > :first-child { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }
.tile {
  position: relative; padding: 18px 14px 16px; text-align: center; background: var(--navy-2);
  --nc: var(--rule); box-shadow: var(--notch), inset 0 2px 0 0 var(--navy-3);
}
.tile b, .tile .v { display: block; font: 400 clamp(34px, 1.6rem + 1.6vw, 52px)/.9 var(--font-display); color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.tile span, .tile .k { display: block; margin-top: 10px; font: 400 9px/1.5 var(--font-pixel); letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }

/* ---------- data tables ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--navy-2); --nc: var(--rule); box-shadow: var(--notch); scrollbar-color: var(--gold-dp) var(--navy-0); }
table.data { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.data caption { caption-side: top; text-align: left; padding: 14px 16px 10px; font: 400 10px/1.5 var(--font-pixel); letter-spacing: .1em; color: var(--gold); text-transform: uppercase; }
table.data th { text-transform: uppercase; padding: 12px 16px; text-align: left; font: 400 9px/1.4 var(--font-pixel); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-hi); background: var(--navy-0); border-bottom: 2px solid var(--gold-dp); }
table.data td { padding: 12px 16px; border-bottom: 2px solid var(--navy-3); color: var(--ink); }
table.data tbody tr:nth-child(even) td { background: rgba(28, 45, 82, .35); }
table.data tbody tr:hover td { background: rgba(242, 181, 68, .08); }
table.data .num { text-align: right; }

/* ---------- code / hash blocks ---------- */
.hash {
  display: block; padding: 12px 14px; font: 400 14px/1.5 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color: var(--cyan);
  background: var(--navy-0); overflow-wrap: anywhere; word-break: break-all; --nc: var(--rule); box-shadow: var(--notch);
}

/* ---------- hash rows with a copy button (download) ---------- */
.hash-row { display: grid; gap: 8px; min-width: 0; }
.hash-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hash-label { font: 400 9px/1.4 var(--font-pixel); letter-spacing: .1em; color: var(--gold); text-transform: uppercase; }
.copy-btn {
  min-height: 34px; padding: 10px 12px 8px; border: 0; cursor: pointer;
  font: 400 9px/1 var(--font-pixel); letter-spacing: .1em; color: var(--cream); background: var(--navy-3);
  --nc: var(--rule); box-shadow: var(--notch); transition: background-color .12s steps(2);
}
.copy-btn:hover { background: var(--stone-hi); }
.copy-btn.done { color: var(--navy-0); background: var(--grass); --nc: var(--grass-dp); }
.copy-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.hash-note { margin: 0; font-size: 13px; color: var(--muted); }
.hash-note code { color: var(--cyan); white-space: nowrap; }

/* ---------- release notes (/changelog; the landing's "What's new") ---------- */
.rn-list { list-style: none; margin: 0; padding: 0; }
.rn-entry { padding: 18px 0 20px; border-top: 2px solid var(--navy-3); scroll-margin-top: 200px; }
.rn-entry:first-child { padding-top: 0; border-top: 0; }
.rn-entry:last-child { padding-bottom: 0; }
.rn-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }
.cat {
  --c: var(--muted); display: inline-flex; align-items: center; gap: 7px; padding: 6px 8px 5px;
  font: 400 9px/1 var(--font-pixel); letter-spacing: .1em; text-transform: uppercase; color: var(--navy-0); background: var(--c);
  box-shadow: 2px 0 0 0 var(--c), -2px 0 0 0 var(--c), 0 2px 0 0 var(--c), 0 -2px 0 0 var(--c);
}
.cat-glyph { flex: none; width: 9px; height: 9px; fill: currentColor; }
.cat-new { --c: var(--gold); }
.cat-world { --c: var(--sky-0); }
.cat-improved { --c: var(--cyan); }
.cat-balance { --c: var(--ember); color: var(--parch); }
.cat-fixed { --c: var(--grass); }
.cat-android { --c: var(--cream); }
.plat { font: 400 9px/1 var(--font-pixel); letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }
.rn-title { margin: 0 0 6px; font: 700 clamp(18px, 1rem + .35vw, 21px)/1.3 var(--font-body); color: var(--cream); text-wrap: balance; }
.rn-anchor { color: inherit; text-decoration: none; }
.rn-anchor::after { content: "#"; margin-left: .35em; color: var(--gold-dp); opacity: 0; transition: opacity .12s steps(2); }
.rn-anchor:hover { color: var(--gold-hi); }
.rn-anchor:hover::after, .rn-anchor:focus-visible::after { opacity: 1; }
.rn-body { margin: 0; max-width: 72ch; color: var(--ink); text-wrap: pretty; }
.rn-quiet .rn-title { font-weight: 400; color: var(--muted); }
.rn-more { margin-left: .4em; font-weight: 700; white-space: nowrap; }
.rn-more .arrow { width: 6px; height: 8px; margin-left: 2px; }

/* ---------- site header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; view-transition-name: site-header;
  background: rgba(6, 12, 25, .92); border-bottom: 2px solid var(--rule);
  box-shadow: 0 2px 0 0 var(--navy-0), 0 10px 30px -12px rgba(0, 0, 0, .7);
}
/* .9 under the blur: at .8 page headings still ghosted through behind the wordmark on phones */
@supports (backdrop-filter: blur(8px)) { .site-header { background: rgba(6, 12, 25, .9); backdrop-filter: blur(10px) saturate(1.2); } }
.sh-inner {
  position: relative; display: flex; align-items: center; gap: clamp(10px, 2vw, 24px);
  max-width: calc(var(--content) + 2 * var(--gutter)); margin-inline: auto; min-height: 68px;
  padding: max(10px, env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right)) 10px max(var(--gutter), env(safe-area-inset-left));
}
.sh-brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; flex: none; }
.sh-icon { width: 44px; height: 44px; view-transition-name: site-logo; --nc: var(--navy-0); box-shadow: 0 0 0 2px var(--rule), 0 0 0 4px var(--navy-0); }
.sh-word { font: 400 10px/1.5 var(--font-pixel); letter-spacing: .06em; color: var(--cream); text-shadow: 2px 2px 0 var(--navy-0); }
.sh-brand:hover .sh-word { color: var(--gold-hi); }
.sh-inner > nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.sh-inner > nav a, .sh-menu-panel a:not(.btn) {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px;
  font: 400 10px/1 var(--font-pixel); letter-spacing: .06em; color: var(--ink); text-decoration: none; text-transform: uppercase;
}
.sh-inner > nav a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform .2s steps(5);
}
.sh-inner > nav a:hover { color: var(--parch); }
.sh-inner > nav a:hover::after { transform: scaleX(1); }
.sh-inner > nav a[aria-current="page"] { color: var(--gold-hi); }
.sh-inner > nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--gold-hi); }
.sh-play { flex: none; }
/* a 4K screen at 100 %: the header keeps its height, its type steps up with the body's */
@media (min-width: 3000px) and (min-height: 1600px) { .sh-inner > nav a, .sh-word, .site-header .sh-play { font-size: 12px; } }
.sh-menu { display: none; position: static; }
.sh-menu-btn {
  list-style: none; display: inline-flex; align-items: center; gap: 10px; min-width: 48px; min-height: 48px; padding: 0 12px; cursor: pointer;
  font: 400 9px/1 var(--font-pixel); letter-spacing: .08em; color: var(--cream); background: var(--navy-3); --nc: var(--rule); box-shadow: var(--notch);
}
.sh-menu-btn::-webkit-details-marker { display: none; }
.sh-burger { position: relative; width: 16px; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }
.sh-menu[open] .sh-burger { background: transparent; box-shadow: none; }
.sh-menu[open] .sh-burger::before, .sh-menu[open] .sh-burger::after {
  content: ""; position: absolute; inset: -6px 0; width: 16px; height: 14px;
  background: linear-gradient(45deg, transparent 43%, currentColor 43% 57%, transparent 57%), linear-gradient(-45deg, transparent 43%, currentColor 43% 57%, transparent 57%);
}
/* The panel scrolls inside the screen (a 932 x 430 landscape phone cut off
   its PLAY NOW and socials) and keeps clear of the landscape notch sides. */
.sh-menu-panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 2px); display: grid; gap: 2px;
  padding: 12px max(var(--gutter), env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
  max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px - env(safe-area-inset-top, 0px)); overflow-y: auto; overscroll-behavior: contain;
  background: var(--navy-0); border-bottom: 2px solid var(--rule); box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .8);
  animation: pkw-drop .18s steps(4) both;
}
.sh-menu-panel a:not(.btn) { min-height: 52px; font-size: 12px; border-bottom: 2px solid var(--navy-2); padding-inline: 4px; }
.sh-menu-panel a[aria-current="page"] { color: var(--gold-hi); }
.sh-menu-panel .btn { margin-top: 14px; justify-self: start; }
/* Rounded app-icon corners on every square logo (owner 2026-09-27, M47 §13.4: "logo needs round
   edges because it looks harsh square"). The ring shadows follow the radius. */
.sh-icon, .sf-icon, .app-icon-round { border-radius: 22%; }
/* Social links (M47 §13.2): icon buttons in the header, the mobile menu and the footer. */
.social { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 6px; }
.social-link {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px;
  color: var(--cream); background: var(--navy-3); box-shadow: inset 0 0 0 2px var(--rule);
  transition: color .15s steps(2), background-color .15s steps(2), transform .15s steps(2);
}
.social-link svg { width: 18px; height: 18px; fill: currentColor; }
.social-link:hover { color: var(--navy-0); background: var(--gold); box-shadow: inset 0 0 0 2px var(--gold-dp); transform: translateY(-2px); }
.social-link:active { transform: translateY(1px); }
.social-link:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 2px; }
.sh-social { flex: none; }
.sh-menu-social { padding-top: 14px; gap: 10px; }
.sh-menu-social .social-link { width: 48px; height: 48px; }
.sh-menu-social .social-link svg { width: 22px; height: 22px; }
.sf-social { margin-top: 8px; gap: 8px; }
/* The official Solana dApp Store badge (M47 §13.3), shown unmodified at its own aspect ratio. */
.store-badge-img { display: block; width: auto; height: 56px; max-width: 100%; }
a:has(> .store-badge-img) { display: inline-block; border-radius: 12px; line-height: 0; }
a:has(> .store-badge-img):hover .store-badge-img { filter: brightness(1.12); }
a:has(> .store-badge-img):focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 4px; }
@keyframes pkw-drop { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
/* 1100, not 1040: the full row (wordmark, nav, socials, PLAY NOW) needs
   ~1064 px, so 1041-1063 px scrolled sideways (an iPad in landscape). */
@media (max-width: 1100px) {
  .sh-inner > nav, .sh-social { display: none; }
  .sh-menu { display: block; }
  .sh-play { margin-left: auto; }
}
/* Phones (owner 2026-09-28, iPhone 17 Pro Max at 440 px: the row overflowed
   and pushed MENU off-screen under the landing's pause button). One compact
   row that fits with its gutters at every width down to 320 px: 40 px logo,
   8 px wordmark (hidden below 390 px, the logo art already carries the name),
   a 44 px PLAY NOW and an icon-only 44 px menu whose label stays in the
   accessibility tree (a nameless <summary> is not a control). The bar keeps
   its 68 px height: docs.css --head-h and the landing captions key on it. */
@media (max-width: 600px) {
  .sh-inner { gap: 8px; }
  .sh-brand { gap: 10px; min-width: 44px; }
  .sh-icon { width: 40px; height: 40px; }
  .sh-word { font-size: 8px; }
  .sh-play { min-height: 44px; padding: 12px 14px 10px; font-size: 9px; }
  .sh-menu-btn { justify-content: center; padding: 0; min-width: 44px; min-height: 44px; }
  .sh-menu-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 389px) { .sh-word { display: none; } }

/* ---------- hero: an uncovered art band + a title plate below it ---------- */
.hero-band {
  position: relative; height: clamp(230px, 36vw, 520px); overflow: hidden; background: var(--navy);
  /* the art dissolves into the page instead of ending on a hard edge */
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 66%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 66%, transparent 100%);
}
/* big screens: the 520 px cap follows the screen height (46vh), so a 4K band stays a band, not a 7:1 strip */
@media (min-width: 2200px) { .hero-band { height: clamp(230px, 36vw, max(520px, 46vh)); } }
/* ... and, like .banner-hero, a band wider than its 3:1 art keeps the art's top and crops below, under the mask */
@media (min-width: 2200px) and (min-aspect-ratio: 7/5) { .hero-band:not(.doc-hero) img { object-position: 50% 15%; } }
.hero-band picture, .hero-band img { width: 100%; height: 100%; }
.hero-band img { object-fit: cover; object-position: var(--focus-xy, 50% 50%); transform-origin: var(--focus-xy, 50% 50%); animation: pkw-drift 38s ease-in-out infinite alternate; }
@keyframes pkw-drift { from { transform: scale(1.02); } to { transform: scale(1.1) translate3d(-1.2%, .8%, 0); } }
@supports (animation-timeline: scroll()) {
  .hero-band picture { animation: pkw-parallax linear both; animation-timeline: scroll(root); animation-range: 0 520px; }
  @keyframes pkw-parallax { to { transform: translate3d(0, 22%, 0); } }
}
.hero-band .credit {
  position: absolute; right: var(--gutter); bottom: 44%; margin: 0; font: 400 8px/1 var(--font-pixel); letter-spacing: .1em; color: rgba(247, 251, 255, .0);
}
.title-plate { position: relative; z-index: 2; padding-top: clamp(8px, 1.5vw, 20px); text-align: center; } /* never overlaps the band: nothing is drawn over art */
.title-plate .emblem { display: block; margin: 0 auto 18px; filter: drop-shadow(0 6px 0 rgba(6, 12, 25, .55)); }
.title-plate .eyebrow { justify-content: center; margin-bottom: 18px; }
.title-plate .display { margin: 0 auto 20px; max-width: 16ch; }
.title-plate .lede { margin: 0 auto 28px; }
.title-plate .cta-row { justify-content: center; }
.title-plate.left { text-align: left; }
.title-plate.left .eyebrow, .title-plate.left .cta-row { justify-content: flex-start; }
.title-plate.left .display, .title-plate.left .lede { margin-left: 0; }

/* ---------- page hero: an AI banner whose calm left band holds the title ----------
   The banner (site-chrome renderBanner) is uncovered art with one focal point
   right of centre. On wide screens the eyebrow + H1 sit in the calm left band
   over a soft navy scrim that fades out long before the focal point; on
   phones the banner is a 3:2 crop on its focal point and the title follows
   below it. Nothing else is ever drawn over the art. */
.page-hero { position: relative; isolation: isolate; }
/* width: 100% is load-bearing. With an auto width, aspect-ratio carries
   max-height over to the width: 3:1 under a 640 px cap is at most 1920 px
   wide, so on any wider screen (1440p, ultrawide, 4K, 1080p zoomed out) the
   banner stopped part-way and left navy on its right (owner photos
   2026-09-28); the same cap cut landscape phones short. A definite width keeps
   the art full-bleed and max-height crops it, on its focal point. */
.banner-hero {
  position: relative; overflow: hidden; background: var(--navy-2);
  width: 100%; aspect-ratio: 3 / 2; max-height: 70vh;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 80%, transparent 100%);
}
.banner-hero picture, .banner-hero img { display: block; width: 100%; height: 100%; }
.banner-hero img { object-fit: cover; object-position: var(--focus-xy, 60% 50%); transform-origin: var(--focus-xy, 60% 50%); animation: pkw-drift 42s ease-in-out infinite alternate; }
@supports (animation-timeline: scroll()) {
  .banner-hero picture { animation: pkw-parallax linear both; animation-timeline: scroll(root); animation-range: 0 640px; }
}
.page-hero-copy { position: relative; z-index: 2; padding-top: clamp(4px, 1vw, 12px); }
.page-hero-copy .eyebrow { margin: 0 0 14px; }
.page-hero .display { margin: 0; max-width: 12ch; font-size: clamp(48px, 1.5rem + 3.6vw, 88px); }
.page-hero-sub { margin: 14px 0 0; font: 400 10px/1.7 var(--font-pixel); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-hi); }
/* 3:1 up to 1920 px (640 px tall); past that the cap follows the screen
   height (66vh) so a 4K banner is as tall a share of the screen as a 1080p
   one instead of a 6:1 strip. The 2400w AVIF is the largest master. */
@media (min-width: 700px) { .banner-hero { aspect-ratio: 3 / 1; max-height: max(640px, 66vh); } }
/* >= 700 px the box is 3:1 or wider, so the 3:1 art only ever crops
   vertically (ultrawide, short windows). The bottom already dissolves under
   the mask, so keep the tops (spires, pennants, crane) and crop below. The
   focal point still sets the drift origin and the phone crop. */
@media (min-width: 700px) { .banner-hero img { object-position: 50% 15%; } }
@media (min-width: 900px) {
  .banner-hero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, rgba(6, 12, 25, .74) 0, rgba(6, 12, 25, .56) 16%, rgba(6, 12, 25, .24) 32%, rgba(6, 12, 25, 0) 46%);
  }
  /* --calm: the width from the wrap's left edge to 38% of the viewport, the
     calm band every AI banner keeps free (the art scales with the viewport,
     the wrap does not). The title never crosses it: the block is capped to
     it and the display size follows it (the longest title word, LEADERBOARD,
     is 5.5em of VT323). */
  .page-hero { --calm: calc(38vw - max(0px, (100vw - var(--content) - 2 * var(--gutter)) / 2) - var(--gutter)); }
  .page-hero-copy { position: absolute; inset: 0 0 12% 0; display: flex; align-items: center; padding: 0; pointer-events: none; }
  .page-hero-copy .wrap > * { max-width: var(--calm); pointer-events: auto; }
  .page-hero .display { font-size: clamp(40px, calc(var(--calm) / 6), 84px); text-shadow: 0 4px 0 var(--navy-0), 0 0 42px rgba(6, 12, 25, .85); }
  .page-hero-copy .eyebrow { text-shadow: 0 2px 0 var(--navy-0); text-wrap: balance; } /* no orphan word ("KINGDOM" alone on /campaigns) */
}

/* the copy that continues the hero: lede and actions left, the fine print right */
.intro { display: grid; gap: 18px clamp(28px, 5vw, 72px); padding-top: clamp(18px, 2.6vw, 34px); align-items: start; }
.intro .lede { margin: 0; }
.intro .cta-row { margin-top: 24px; }
.intro .fine { margin: 0; font-size: 14px; color: var(--muted); text-wrap: pretty; }
.intro .fine a { color: var(--gold-hi); }
.intro-emblem { display: flex; align-items: center; gap: 18px; }
.intro-emblem img { flex: none; }
@media (min-width: 900px) {
  .intro { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .intro > .intro-aside { padding: 18px 20px; background: var(--navy-2); --nc: var(--rule); box-shadow: var(--notch); }
}

/* ---------- "in the game": the real game under the cinematic banner ----------
   A band of day sky (the Cloudfall story in reverse: navy -> sky -> navy)
   holding ONE real screenshot in a pixel game window, or phone screenshots in
   pixel phone frames. The screenshot is the focal point; CSS clouds sit on
   the sky beside it, never over it. Window shots are 1:1 crops of the game
   world: drawn at 1:1 where they fit, pixelated when a screen scales them. */
.ingame-band {
  position: relative; margin-top: clamp(72px, 10vw, 136px); padding: clamp(56px, 8vw, 104px) 0 clamp(64px, 9vw, 112px);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='12' shape-rendering='crispEdges'%3E%3Cg fill='%23F7FBFF'%3E%3Crect x='10' y='1' width='8' height='2'/%3E%3Crect x='6' y='3' width='14' height='2'/%3E%3Crect x='20' y='4' width='6' height='2'/%3E%3Crect x='4' y='5' width='24' height='3'/%3E%3Crect x='1' y='8' width='32' height='3'/%3E%3C/g%3E%3Crect x='1' y='11' width='32' height='1' fill='%23BFE7FF'/%3E%3Crect x='12' y='1' width='4' height='1' fill='%23FFFFFF'/%3E%3C/svg%3E") 7% 7% / 136px 48px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='12' shape-rendering='crispEdges'%3E%3Cg fill='%23F7FBFF'%3E%3Crect x='10' y='1' width='8' height='2'/%3E%3Crect x='6' y='3' width='14' height='2'/%3E%3Crect x='20' y='4' width='6' height='2'/%3E%3Crect x='4' y='5' width='24' height='3'/%3E%3Crect x='1' y='8' width='32' height='3'/%3E%3C/g%3E%3Crect x='1' y='11' width='32' height='1' fill='%23BFE7FF'/%3E%3Crect x='12' y='1' width='4' height='1' fill='%23FFFFFF'/%3E%3C/svg%3E") 93% 4% / 102px 36px no-repeat,
    linear-gradient(180deg, var(--navy) 0, var(--sky-0) 14%, var(--sky-1) 62%, color-mix(in srgb, var(--sky-1) 58%, var(--navy-3)) 82%, var(--navy) 100%);
}
.ingame-head { max-width: 62ch; margin: 0 auto clamp(26px, 3.4vw, 40px); text-align: center; }
.ingame-head .kicker { display: inline-block; padding: 7px 10px 6px; color: var(--navy-0); background: var(--cloud); --nc: var(--navy-0); box-shadow: var(--notch); }
.ingame-head h2 { margin: 16px 0 10px; font: 400 clamp(38px, 1.6rem + 2.2vw, 64px)/.92 var(--font-display); text-transform: uppercase; color: var(--navy-0); text-shadow: 0 3px 0 var(--cloud); text-wrap: balance; }
.ingame-head p { margin: 0 auto; max-width: 56ch; font-size: clamp(16px, .95rem + .2vw, 18px); font-weight: 700; color: var(--navy-2); text-wrap: pretty; }
.ingame { margin: 0 auto; width: min(100%, var(--shot-w, 1120px)); }
.ingame-frame {
  position: relative; background: var(--navy-0); padding: 0 6px 6px;
  box-shadow: 0 0 0 2px var(--navy-0), 0 0 0 4px var(--gold-dp), 0 0 0 6px var(--navy-0), 0 30px 60px -24px rgba(6, 12, 25, .9);
}
.ingame-bar { display: flex; align-items: center; gap: 12px; min-height: 34px; padding: 8px 4px 8px; font: 400 9px/1 var(--font-pixel); letter-spacing: .08em; color: var(--muted); }
.ingame-dots { display: inline-flex; gap: 6px; }
.ingame-dots i { width: 8px; height: 8px; background: var(--rule); }
.ingame-dots i:first-child { background: var(--ember); }
.ingame-dots i:nth-child(2) { background: var(--gold); }
.ingame-url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 6px 10px 5px; color: var(--ink); background: var(--navy-2); }
.ingame-bar .badge { flex: none; }
.ingame picture, .ingame img { display: block; width: 100%; height: auto; }
.ingame img { image-rendering: pixelated; background: var(--navy-2); }
.ingame figcaption, .phones-note { display: table; margin: 22px auto 0; max-width: 72ch; padding: 9px 14px 8px; font-size: 14px; font-weight: 700; color: var(--navy-0); text-align: center; text-wrap: pretty; background: var(--cloud); --nc: var(--navy-0); box-shadow: var(--notch); }
.ingame-tag { display: inline-block; margin-right: 8px; padding: 5px 7px 4px; font: 400 8px/1 var(--font-pixel); letter-spacing: .12em; color: var(--cloud); background: var(--navy-0); vertical-align: 1px; }
/* scroll-driven entrance: the window rises into place (no JS, no layout shift) */
@supports (animation-timeline: view()) {
  .ingame-frame, .phone-frame { animation: pkw-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
  /* transform only: an opacity ramp left the window bar's text below AA contrast until scrolled into view */
  @keyframes pkw-rise { from { transform: translate3d(0, 40px, 0); } to { transform: none; } }
}
@media (max-width: 699px) {
  .ingame-band { padding-inline: 0; background-size: 68px 24px, 51px 18px, 100% 100%; background-position: 4% 14px, 96% 8px, 0 0; }
  .ingame-frame { padding: 0 4px 4px; }
  .ingame-bar { gap: 8px; min-height: 30px; font-size: 8px; }
  .ingame-dots { display: none; }
}

/* phones: pixel phone frames, 1x CSS size of the capture (430 css px), shown
   at 300 px wide on desktop and side by side; one column on small phones */
.phones-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: clamp(28px, 5vw, 64px); }
.phones .phones-note { margin-top: clamp(22px, 3vw, 34px); }
.phone { margin: 0; width: min(300px, 62vw); }
.phone:nth-child(2) { transform: translateY(-28px); }
.phone-frame {
  position: relative; padding: 18px 8px 22px; background: var(--navy-0); border-radius: 0;
  box-shadow: 0 0 0 2px var(--rule), 0 0 0 4px var(--navy-0), inset 0 0 0 2px var(--navy-3), 0 30px 60px -24px rgba(6, 12, 25, .9);
}
.phone-frame::before { content: ""; position: absolute; top: 7px; left: 50%; width: 36px; height: 4px; margin-left: -18px; background: var(--navy-3); }
.phone-frame::after { content: ""; position: absolute; bottom: 8px; left: 50%; width: 48px; height: 4px; margin-left: -24px; background: var(--rule); }
.phone picture, .phone img { display: block; width: 100%; height: auto; }
.phone img { background: var(--navy-2); }
.phone figcaption { margin-top: 16px; font: 400 10px/1.4 var(--font-pixel); letter-spacing: .12em; text-transform: uppercase; color: var(--navy-0); text-align: center; }
@media (max-width: 699px) { .phone:nth-child(2) { transform: none; } }

/* PixelLab 32 px icons: always an integer scale, never smoothed. */
.icon-px { image-rendering: pixelated; flex: none; }
.icon-x1 { width: 32px; height: 32px; }
.icon-x2 { width: 64px; height: 64px; }
.icon-x3 { width: 96px; height: 96px; }

/* the plain (art-less) variant used by legal pages: a sliver of day sky
   with two pixel clouds, dissolving into the navy of the logo (Cloudfall in
   miniature). The clouds are CSS on sky, never drawn over art. */
.sky-ribbon {
  height: clamp(110px, 12vw, 160px);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='12' shape-rendering='crispEdges'%3E%3Cg fill='%23F7FBFF'%3E%3Crect x='10' y='1' width='8' height='2'/%3E%3Crect x='6' y='3' width='14' height='2'/%3E%3Crect x='20' y='4' width='6' height='2'/%3E%3Crect x='4' y='5' width='24' height='3'/%3E%3Crect x='1' y='8' width='32' height='3'/%3E%3C/g%3E%3Crect x='1' y='11' width='32' height='1' fill='%23BFE7FF'/%3E%3Crect x='12' y='1' width='4' height='1' fill='%23FFFFFF'/%3E%3C/svg%3E") 14% 34% / 136px 48px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='12' shape-rendering='crispEdges'%3E%3Cg fill='%23F7FBFF'%3E%3Crect x='10' y='1' width='8' height='2'/%3E%3Crect x='6' y='3' width='14' height='2'/%3E%3Crect x='20' y='4' width='6' height='2'/%3E%3Crect x='4' y='5' width='24' height='3'/%3E%3Crect x='1' y='8' width='32' height='3'/%3E%3C/g%3E%3Crect x='1' y='11' width='32' height='1' fill='%23BFE7FF'/%3E%3Crect x='12' y='1' width='4' height='1' fill='%23FFFFFF'/%3E%3C/svg%3E") 78% 18% / 102px 36px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='12' shape-rendering='crispEdges'%3E%3Cg fill='%23F7FBFF'%3E%3Crect x='10' y='1' width='8' height='2'/%3E%3Crect x='6' y='3' width='14' height='2'/%3E%3Crect x='20' y='4' width='6' height='2'/%3E%3Crect x='4' y='5' width='24' height='3'/%3E%3Crect x='1' y='8' width='32' height='3'/%3E%3C/g%3E%3Crect x='1' y='11' width='32' height='1' fill='%23BFE7FF'/%3E%3Crect x='12' y='1' width='4' height='1' fill='%23FFFFFF'/%3E%3C/svg%3E") 52% 58% / 68px 24px no-repeat,
    linear-gradient(180deg, var(--sky-0) 0%, var(--sky-1) 46%, var(--navy) 100%);
}
@media (max-width: 600px) { .sky-ribbon { background-size: 102px 36px, 68px 24px, 0 0, 100% 100%; } }

/* ---------- sections ---------- */
.section { margin-top: clamp(64px, 9vw, 120px); scroll-margin-top: 96px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 26px; }
.section-head p { margin: 0; max-width: 56ch; color: var(--muted); }

/* ---------- long-form prose (legal, notes) ---------- */
.prose { max-width: var(--measure); }
.prose h2 { font: 400 clamp(26px, 1.3rem + .9vw, 34px)/1.05 var(--font-display); text-transform: uppercase; color: var(--gold-hi); margin: 2.2em 0 .5em; text-shadow: 0 2px 0 var(--navy-0); }
.prose h3 { font: 700 1.05em/1.3 var(--font-body); color: var(--cream); margin: 1.6em 0 .4em; }
.prose p, .prose li { color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin: .35em 0; }
.prose li::marker { color: var(--gold); }
.prose table { width: 100%; border-collapse: collapse; margin: 1.2em 0; display: block; overflow-x: auto; font-size: .94em; }
.prose th, .prose td { border: 2px solid var(--navy-3); padding: 9px 12px; text-align: left; vertical-align: top; }
.prose th { font: 400 9px/1.5 var(--font-pixel); letter-spacing: .08em; color: var(--gold-hi); background: var(--navy-0); text-transform: uppercase; }
.prose code { font-size: .92em; color: var(--cyan); }

/* ---------- site footer: the castle wall ---------- */
.site-footer { position: relative; margin-top: clamp(96px, 12vw, 160px); background: var(--navy-0); color: var(--muted); }
.site-footer::before {
  /* battlements: the footer is the castle wall. 20 px merlons with a 2 px
     rule on their tops and sides, 20 px crenels, rising 18 px off the footer. */
  content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20' shape-rendering='crispEdges'%3E%3Cpath fill='%23060C19' d='M0 0h20v20H0z'/%3E%3Cpath fill='%232A3B62' d='M0 0h20v2H0zM0 0h2v18H0zM18 0h2v18h-2zM20 16h20v2H20z'/%3E%3C/svg%3E") 0 0 / 40px 20px repeat-x;
}
.sf-inner {
  display: grid; grid-template-columns: minmax(200px, 1fr) 3fr; gap: 40px clamp(24px, 5vw, 72px);
  max-width: calc(var(--content) + 2 * var(--gutter)); margin-inline: auto; padding: 56px var(--gutter) 36px;
}
.sf-brand { display: grid; justify-items: start; align-content: start; gap: 12px; }
.sf-icon { width: 72px; height: 72px; box-shadow: 0 0 0 2px var(--rule), 0 0 0 4px var(--navy); }
.sf-word { margin: 6px 0 0; font: 400 11px/1.6 var(--font-pixel); letter-spacing: .06em; color: var(--cream); }
.sf-tag { margin: 0; font: 400 22px/1 var(--font-display); color: var(--gold); }
.site-footer nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
.sf-h { margin: 0 0 14px; font: 400 10px/1.5 var(--font-pixel); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.site-footer nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.site-footer nav a { display: inline-flex; align-items: center; min-height: 36px; color: var(--ink); text-decoration: none; font-size: 15px; }
.site-footer nav a:hover { color: var(--gold-hi); text-decoration: underline; }
.sf-base { max-width: calc(var(--content) + 2 * var(--gutter)); margin-inline: auto; padding: 22px var(--gutter) max(28px, env(safe-area-inset-bottom)); border-top: 2px solid var(--navy-2); font-size: 13px; color: var(--muted); }
.sf-base p { margin: 0 0 6px; max-width: 90ch; }
@media (max-width: 860px) {
  .sf-inner { grid-template-columns: 1fr; }
  .site-footer nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-brand { grid-template-columns: auto 1fr; align-items: center; column-gap: 16px; }
  .sf-icon { grid-row: span 2; width: 56px; height: 56px; }
  .sf-social { grid-column: 1 / -1; }
  .sf-word { margin: 0; }
}

/* ---------- cross-document view transitions ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; animation-timing-function: var(--ease-out); }
::view-transition-group(site-header), ::view-transition-group(site-logo) { animation-duration: .22s; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .hero-band img, .banner-hero img { transform: none; animation: none !important; }
  .ingame-frame, .phone-frame { transform: none; opacity: 1; animation: none !important; }
  .hero-band picture, .banner-hero picture { transform: none; animation: none !important; }
}

/* ---------- forced colors ---------- */
@media (forced-colors: active) {
  .btn, .badge, .chip, .panel, .tile, .sh-menu-btn, .cat, .copy-btn { border: 2px solid CanvasText; box-shadow: none; }
}

/* ---------- print ---------- */
@media print {
  body { background: #fff; color: #000; }
  .site-header, .site-footer::before, .hero-band, .banner-hero, .ingame-band, .sh-menu { display: none; }
  .site-footer { background: none; color: #000; }
}