/* =========================================================================
   Pixel Kingdom Wars docs — the codex layer over site.css (Cloudfall tokens
   only; published content-hashed as /docs/docs.<sha8>.css by build-docs.mjs).
   Reading first: Atkinson Hyperlegible Next at ~17px/1.68 on midnight navy,
   VT323 for display headings, Press Start 2P only for small labels. Pixel
   rules: 2 px steps, notched corners, gold nail-heads, no blur on sprites.
   ========================================================================= */

:root {
  --doc-measure: 720px;
  --side-w: 264px;
  --toc-w: 216px;
  --shell-gap: clamp(28px, 3.4vw, 56px);
  /* the site header: 68 px, taller by the top inset past its 10 px padding */
  --head-h: calc(68px + max(0px, env(safe-area-inset-top, 0px) - 10px));
  --tip: var(--grass);
  --why: var(--cyan);
  --warn: var(--ember);
  --soon: var(--gold);
  --glass: rgba(11, 20, 38, .86);
  --px-mag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Cpath fill='%23FFE08A' d='M3 0h4v1H3zM2 1h1v1H2zM7 1h1v1H7zM1 2h1v4H1zM8 2h1v4H8zM2 6h1v1H2zM7 6h1v1H7zM3 7h4v1H3zM8 7h1v1H8zM9 8h1v1H9zM10 9h1v1h-1zM11 10h1v2h-1zM10 11h1v1h-1z'/%3E%3Cpath fill='%235FE1EE' d='M3 2h2v1H3zM2 3h1v1H2z'/%3E%3C/svg%3E");
  --px-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='8' shape-rendering='crispEdges'%3E%3Cpath fill='%23F2B544' d='M0 0h1v1H0zM1 1h1v1H1zM2 2h1v1H2zM3 3h1v2H3zM2 5h1v1H2zM1 6h1v1H1zM0 7h1v1H0z'/%3E%3C/svg%3E");
  --px-crenel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='12' shape-rendering='crispEdges'%3E%3Cpath fill='%231C2D52' d='M0 8h40v4H0zM0 0h12v8H0zM20 0h12v8H20z'/%3E%3Cpath fill='%232A3B62' d='M0 0h12v2H0zM20 0h12v2H20zM12 8h8v2h-8zM32 8h8v2h-8z'/%3E%3C/svg%3E");
}

/* ---------- page frame ---------- */
.docs-main { position: relative; }
.doc-hero { height: clamp(200px, 27vw, 380px); }
.doc-hero img { animation-duration: 44s; }
/* Pixel-art header art: whole-pixel edges and no sub-pixel drift (it would shimmer). */
.hero-band img.px { image-rendering: pixelated; animation: none; transform: none; }
/* Reading progress: a scroll-driven gold bar under the header, no JavaScript. */
.read-progress { display: none; }
@supports (animation-timeline: scroll()) {
  .read-progress { display: block; position: fixed; z-index: 49; top: var(--head-h); left: 0; right: 0; height: 3px; pointer-events: none;
    background: linear-gradient(90deg, var(--gold-dp), var(--gold) 60%, var(--gold-hi)); transform-origin: 0 50%; transform: scaleX(0);
    animation: pkw-read linear both; animation-timeline: scroll(root); }
  @keyframes pkw-read { to { transform: scaleX(1); } }
}
@media (prefers-reduced-motion: reduce) { .read-progress { display: none !important; } }
.doc-ribbon { height: clamp(84px, 9vw, 128px); }

/* ---------- section banner with the page title in its calm band ----------
   The AI-lane banners keep one focal point right of centre and the left ~40 %
   calm (sky, meadow) for a title. On wide screens the title sits there over a
   soft navy scrim — never a box over the subject; on narrow screens the art
   stays uncovered and the title follows below it. */
.doc-banner { position: relative; }
.doc-banner .doc-hero { height: clamp(200px, 30vw, 440px); }
.doc-banner-title { position: relative; z-index: 2; padding: 6px max(var(--gutter), env(safe-area-inset-left)) 0; }
.doc-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px; font: 400 9px/1.5 var(--font-pixel); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-hi); }
.kicker-icon { display: inline-grid; place-items: center; width: 32px; height: 32px; }
.kicker-icon .icon { width: 32px; height: 32px; image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(6, 12, 25, .65)); }
.doc-banner .doc-title { margin: 0; }
@media (min-width: 1024px) {
  .doc-banner .doc-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(6, 12, 25, .55), transparent 45%); }
  .doc-banner-title {
    position: absolute; left: 0; right: 0; top: 0; bottom: 30%; display: flex; flex-direction: column; justify-content: center;
    padding: 0 max(var(--gutter), calc((100vw - var(--side-w) - var(--doc-measure) - var(--toc-w) - 2 * var(--shell-gap)) / 2));
  }
  .doc-banner-title > * { max-width: min(42vw, 600px); }
  .doc-banner .doc-title { font-size: clamp(52px, 1.4rem + 3.3vw, 96px); text-shadow: 0 4px 0 var(--navy-0), 0 2px 28px rgba(6, 12, 25, .55); }
  .doc-kicker { text-shadow: 0 2px 0 var(--navy-0); }
  .has-banner .doc { padding-top: 8px; }
}
@media (prefers-reduced-motion: reduce) { .doc-banner .hero-band img, .home-hero img { animation: none; transform: none; } }
.docs-shell {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--shell-gap); align-items: start;
  max-width: calc(var(--side-w) + var(--doc-measure) + var(--toc-w) + 2 * var(--shell-gap) + 2 * var(--gutter));
  margin: 0 auto; padding: 0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
}
@media (min-width: 1024px) {
  .docs-shell { grid-template-columns: var(--side-w) minmax(0, var(--doc-measure)); justify-content: center; }
}
@media (min-width: 1280px) {
  .docs-shell { grid-template-columns: var(--side-w) minmax(0, var(--doc-measure)) var(--toc-w); }
}

/* ---------- search trigger (sidebar, home) ---------- */
.search-trigger {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 10px 12px 10px 14px; cursor: pointer;
  font: 400 15px/1 var(--font-body); color: var(--muted); text-align: left;
  background: var(--navy-0); border: 0; --nc: var(--rule); box-shadow: var(--notch), inset 0 2px 0 rgba(0, 0, 0, .35);
  transition: color .12s steps(2), box-shadow .12s steps(2);
}
.search-trigger:hover, .search-trigger:focus-visible { color: var(--cream); --nc: var(--gold-dp); }
/* Hidden until docs.js wires search, but its box is reserved so revealing it
   never shifts the page (CLS: /docs/ measured 0.078 in CI when it popped in). */
.search-trigger[hidden] { display: flex; visibility: hidden; }
.st-glyph { flex: none; width: 18px; height: 18px; background: var(--px-mag) center / 18px 18px no-repeat; image-rendering: pixelated; }
.st-label { flex: 1; }
kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px;
  font: 400 9px/1 var(--font-pixel); color: var(--gold-hi); background: var(--navy-3);
  box-shadow: inset 0 -2px 0 var(--navy-0), 0 0 0 2px var(--rule);
}

/* ---------- sidebar / drawer ---------- */
.docs-side { position: sticky; top: var(--head-h); z-index: 30; margin: 0 calc(-1 * var(--gutter)); padding: 10px var(--gutter);
  background: var(--glass); border-bottom: 2px solid var(--rule); }
@supports (backdrop-filter: blur(6px)) { .docs-side { backdrop-filter: blur(8px) saturate(1.2); background: rgba(11, 20, 38, .74); } }
.side-inner { display: flex; gap: 10px; align-items: flex-start; }
.side-inner > .search-trigger { flex: none; width: 48px; min-height: 48px; padding: 0; justify-content: center; }
.side-inner > .search-trigger .st-label, .side-inner > .search-trigger kbd { display: none; }
.docs-drawer { flex: 1; min-width: 0; }
.drawer-btn {
  list-style: none; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; cursor: pointer;
  font: 400 10px/1.3 var(--font-pixel); letter-spacing: .08em; text-transform: uppercase; color: var(--cream);
  background: var(--navy-3); --nc: var(--rule); box-shadow: var(--notch);
}
.drawer-btn::-webkit-details-marker { display: none; }
.drawer-glyph { position: relative; width: 16px; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }
.drawer-label { flex: 1; }
.drawer-count { color: var(--muted); font-size: 8px; }
@media (max-width: 480px) { .drawer-count { display: none; } }
.docs-drawer[open] .drawer-btn { color: var(--gold-hi); --nc: var(--gold-dp); }
.docs-nav { max-height: min(70vh, 640px); overflow-y: auto; overscroll-behavior: contain; margin-top: 10px; padding: 14px 6px 18px 4px;
  background: var(--navy-0); --nc: var(--rule); box-shadow: var(--notch); scrollbar-width: thin; scrollbar-color: var(--gold-dp) transparent; }
.nav-home { display: block; margin: 0 8px 10px; padding: 8px 10px; font: 400 9px/1.4 var(--font-pixel); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); text-decoration: none; }
.nav-home:hover, .nav-home[aria-current="page"] { color: var(--gold-hi); }
.nav-list, .nav-list ul { list-style: none; margin: 0; padding: 0; }
.nav-sec + .nav-sec { margin-top: 16px; }
.nav-h { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; padding: 0 8px;
  font: 400 9px/1.5 var(--font-pixel); letter-spacing: .1em; text-transform: uppercase; color: var(--cream); }
.sec-icon {
  flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px;
  font: 400 8px/1 var(--font-pixel); color: var(--gold-hi); background: var(--navy-3);
  box-shadow: inset 2px 2px 0 var(--stone-hi), inset -2px -2px 0 var(--navy-0), 0 0 0 2px var(--navy-0);
}
.sec-icon.has-art { width: 36px; height: 36px; background: radial-gradient(circle at 50% 40%, var(--navy-3), var(--navy-0) 75%); }
/* Hook icons are 32 px pixel art: shown at exactly 1× or 2× so pixels stay square. */
.sec-icon .icon { width: 32px; height: 32px; image-rendering: pixelated; }
.nav-sec ul a {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-left: 22px; padding: 6px 10px 6px 14px; font-size: 15px; line-height: 1.35; color: var(--ink); text-decoration: none;
  border-left: 2px solid var(--navy-3);
}
.nav-sec ul a:hover { color: var(--parch); border-left-color: var(--gold-dp); background: rgba(242, 181, 68, .05); }
.nav-sec ul a[aria-current="page"] { color: var(--gold-hi); font-weight: 700; border-left-color: var(--gold); background: linear-gradient(90deg, rgba(242, 181, 68, .12), transparent 85%); }
.nav-sec ul a[aria-current="page"]::before { content: ""; position: absolute; left: -6px; top: 50%; width: 10px; height: 10px; margin-top: -5px;
  background: var(--gold); box-shadow: 2px 2px 0 var(--gold-dp); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.nav-status { flex: none; padding: 3px 4px 2px; font: 400 6px/1 var(--font-pixel); letter-spacing: .08em; color: var(--navy-0); background: var(--gold); }
.nav-status.nav-planned { background: var(--muted); }

@media (min-width: 1024px) {
  .docs-side { grid-row: span 2; top: calc(var(--head-h) + 20px); margin: 0; padding: 26px 0 0; background: none; border: 0; backdrop-filter: none; }
  .side-inner { display: block; }
  .side-inner > .search-trigger { width: 100%; min-height: 46px; padding: 10px 12px 10px 14px; justify-content: flex-start; margin-bottom: 18px; }
  .side-inner > .search-trigger .st-label, .side-inner > .search-trigger kbd { display: inline-flex; }
  .drawer-btn { display: none; }
  .docs-drawer::details-content { content-visibility: visible; display: block; }
  .docs-nav { max-height: calc(100vh - var(--head-h) - 130px); margin: 0; padding: 4px 8px 28px 0; background: none; box-shadow: none; }
  .nav-home { margin-left: 0; }
}

/* ---------- article head ---------- */
.doc { min-width: 0; padding: 26px 0 0; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0 0 18px; padding: 0; list-style: none; font-size: 13.5px; color: var(--muted); }
.crumbs li + li::before { content: ""; display: inline-block; width: 5px; height: 8px; margin: 0 10px; background: var(--px-chev) no-repeat; image-rendering: pixelated; opacity: .8; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--gold-hi); text-decoration: underline; }
.crumbs [aria-current] { color: var(--cream); }
.doc-flag { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 18px; padding: 10px 14px 9px;
  font-size: 14px; line-height: 1.45; color: var(--cream); background: linear-gradient(90deg, rgba(242, 181, 68, .16), rgba(242, 181, 68, .03) 70%, transparent);
  box-shadow: inset 4px 0 0 var(--gold); }
.doc-flag-planned { background: linear-gradient(90deg, rgba(154, 168, 194, .14), transparent 70%); box-shadow: inset 4px 0 0 var(--muted); }
.status-glyph { flex: none; image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(6, 12, 25, .6)); }
.doc-title {
  margin: 0 0 16px; font: 400 clamp(50px, 2.6rem + 2.8vw, 92px)/.86 var(--font-display); text-transform: uppercase; letter-spacing: .005em;
  color: var(--cream); text-shadow: 0 4px 0 var(--navy-0), 0 0 42px rgba(95, 225, 238, .12); text-wrap: balance;
}
.status-coming .doc-title { color: var(--parch); text-shadow: 0 4px 0 var(--navy-0), 0 0 46px rgba(242, 181, 68, .2); }
.doc-lede { max-width: 62ch; margin: 0 0 18px; font-size: clamp(18px, 1.05rem + .25vw, 20.5px); line-height: 1.55; color: var(--cream); text-wrap: pretty; }
.doc-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 0; font: 400 8px/1.6 var(--font-pixel); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.doc-meta time { color: var(--ink); }
.doc-head { position: relative; padding-bottom: 30px; margin-bottom: 34px; }
.doc-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: var(--px-crenel) 0 0 / 40px 12px repeat-x; }
.toc-inline { margin-top: 22px; background: var(--navy-2); --nc: var(--rule); box-shadow: var(--notch); }
.toc-inline summary { cursor: pointer; padding: 13px 16px 12px; font: 400 9px/1.4 var(--font-pixel); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); list-style: none; }
.toc-inline summary::-webkit-details-marker { display: none; }
.toc-inline summary::after { content: " +"; color: var(--muted); }
.toc-inline[open] summary::after { content: " −"; }
.toc-inline ol { margin: 0; padding: 0 16px 14px; list-style: none; }
.toc-inline li a { display: block; padding: 5px 0; font-size: 15px; color: var(--ink); text-decoration: none; }
.toc-inline li.toc-l3 a { padding-left: 16px; font-size: 14px; color: var(--muted); }
@media (min-width: 1280px) { .toc-inline { display: none; } }

/* ---------- on this page (right rail) ---------- */
.doc-toc { display: none; }
@media (min-width: 1280px) {
  .doc-toc { display: block; position: sticky; top: calc(var(--head-h) + 20px); padding-top: 26px; max-height: calc(100vh - var(--head-h) - 40px); overflow-y: auto; scrollbar-width: none; }
  .toc-card { padding: 4px 0 20px; }
  .toc-h { margin: 0 0 12px; font: 400 8px/1.5 var(--font-pixel); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
  .doc-toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--navy-3); }
  .doc-toc a { display: block; margin-left: -2px; padding: 5px 0 5px 14px; border-left: 2px solid transparent; font-size: 13.5px; line-height: 1.35; color: var(--muted); text-decoration: none; transition: color .12s steps(2); }
  .doc-toc li.toc-l3 a { padding-left: 26px; font-size: 13px; }
  .doc-toc a:hover { color: var(--cream); }
  .doc-toc a[aria-current] { color: var(--gold-hi); border-left-color: var(--gold); }
  .doc-toc .toc-top { display: inline-block; margin-top: 16px; font: 400 8px/1.5 var(--font-pixel); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
  .doc-toc .toc-top:hover { color: var(--gold-hi); }
}

/* ---------- prose ---------- */
.doc-body { font-size: clamp(16.5px, .95rem + .2vw, 18px); line-height: 1.7; color: var(--ink); }
.doc-body > :first-child { margin-top: 0; }
.doc-body p, .doc-body ul, .doc-body ol { margin: 0 0 1.05em; }
.doc-body h2, .doc-body h3, .doc-body h4 { position: relative; scroll-margin-top: calc(var(--head-h) + 76px); }
@media (min-width: 1024px) { .doc-body h2, .doc-body h3, .doc-body h4 { scroll-margin-top: calc(var(--head-h) + 24px); } }
.doc-body h2 {
  margin: 1.9em 0 .7em; font: 400 clamp(34px, 1.55rem + 1.3vw, 48px)/.95 var(--font-display); text-transform: uppercase;
  color: var(--cream); text-shadow: 0 3px 0 var(--navy-0); text-wrap: balance;
}
.doc-body h2::after {
  content: ""; display: block; width: 72px; height: 4px; margin-top: 12px;
  background: linear-gradient(90deg, var(--gold) 0 48px, transparent 48px 52px, var(--gold-dp) 52px 64px, transparent 64px 68px, var(--gold-dp) 68px 72px);
}
.doc-body h3 { margin: 1.9em 0 .55em; font: 700 clamp(19px, 1.1rem + .2vw, 21px)/1.3 var(--font-body); color: var(--cream); }
.doc-body h3::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 12px; vertical-align: 3px; background: var(--gold); box-shadow: 2px 2px 0 var(--gold-dp); }
.doc-body h4 { margin: 1.7em 0 .5em; font: 400 10px/1.6 var(--font-pixel); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.anchor { margin-left: 10px; font: 400 .8em/1 var(--font-display); color: var(--gold-dp); text-decoration: none; opacity: 0; transition: opacity .12s steps(2); }
.doc-body h3 .anchor, .doc-body h4 .anchor { font-size: 1.1em; }
h2:hover .anchor, h3:hover .anchor, h4:hover .anchor, .anchor:focus-visible { opacity: 1; }
.anchor:hover { color: var(--gold-hi); }
.doc-body a { color: var(--gold-hi); }
.doc-body a:hover { color: var(--parch); }
.doc-body strong { color: var(--cream); }
.doc-body em { color: var(--parch); }
.doc-body ul { list-style: none; padding-left: 1.5em; }
.doc-body ul > li { position: relative; margin: .42em 0; }
.doc-body ul > li::before { content: ""; position: absolute; left: -1.15em; top: .66em; width: 6px; height: 6px; background: var(--gold); box-shadow: 2px 2px 0 var(--gold-dp); }
.doc-body ul ul > li::before { background: var(--muted); box-shadow: none; }
.doc-body ol { padding-left: 2.3em; counter-reset: pkw; list-style: none; }
.doc-body ol > li { position: relative; margin: .5em 0; counter-increment: pkw; }
.doc-body ol > li::before { content: counter(pkw, decimal-leading-zero); position: absolute; left: -2.3em; top: .38em; font: 400 9px/1.5 var(--font-pixel); color: var(--gold); }
.doc-body li > ul, .doc-body li > ol { margin: .4em 0 .2em; }
.doc-body code { padding: 2px 6px 1px; font: 400 .88em/1.4 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color: var(--cyan); background: var(--navy-0); box-shadow: 0 0 0 1px var(--navy-3); overflow-wrap: anywhere; }
.doc-body .code { position: relative; margin: 1.5em 0; background: var(--navy-0); --nc: var(--rule); box-shadow: var(--notch); }
.doc-body pre { margin: 0; padding: 18px 20px; overflow-x: auto; font: 400 14.5px/1.6 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color: var(--cream); scrollbar-color: var(--gold-dp) transparent; }
.doc-body pre code { padding: 0; background: none; box-shadow: none; color: inherit; font: inherit; overflow-wrap: normal; }
.copy { position: absolute; top: 8px; right: 8px; padding: 6px 7px 5px; font: 400 7px/1 var(--font-pixel); letter-spacing: .1em; color: var(--muted); background: var(--navy-3); border: 0; cursor: pointer; }
.copy:hover { color: var(--gold-hi); }
.doc-body blockquote { margin: 1.5em 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--navy-3); color: var(--muted); }
.doc-body hr { height: 12px; margin: 2.6em 0; border: 0; background: var(--px-crenel) 0 0 / 40px 12px repeat-x; }
.doc-body .badge { vertical-align: 1px; }

/* ---------- tables ---------- */
.doc-body .table-wrap { margin: 1.6em 0; }
.doc-body table.data { font-size: 15px; line-height: 1.45; }
.doc-body table.data th, .doc-body table.data td { padding: 11px 14px; vertical-align: middle; }
.doc-body table.data thead th { white-space: nowrap; }
.doc-body table.data .num { text-align: right; white-space: nowrap; }
.doc-body table.data .mid { text-align: center; }
.doc-body table.data tbody th { font: 700 15px/1.35 var(--font-body); color: var(--cream); text-align: left; letter-spacing: 0; text-transform: none; background: transparent; border-bottom: 2px solid var(--navy-3); }
.doc-body table.data tbody tr:nth-child(even) th { background: rgba(28, 45, 82, .35); }
.pkw-table { margin: 1.8em 0; }
.pkw-table .table-wrap { margin: 0; }
.art-cell { display: flex; align-items: center; gap: 12px; min-width: 150px; }
.pkw-table .sprite-slot { display: inline-grid; place-items: end center; flex: none; width: 52px; height: 48px; margin: -8px 0; }
.pkw-table .sprite { width: auto; height: auto; max-width: 52px; max-height: 48px; object-fit: contain; filter: drop-shadow(0 3px 0 rgba(6, 12, 25, .55)); }
.pkw-table .thumb { flex: none; width: 88px; height: 72px; margin: -8px 0; object-fit: contain; filter: drop-shadow(0 4px 0 rgba(6, 12, 25, .5)); }
.table-note { margin: 10px 2px 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }

/* ---------- figures ---------- */
.fig { margin: 2.1em 0; }
.fig .zoom, .fig > video {
  position: relative; display: block; background: var(--navy-0); cursor: zoom-in;
  --nc: var(--rule); box-shadow: var(--notch), 0 20px 40px -24px rgba(0, 0, 0, .8);
}
.fig > video { cursor: default; width: 100%; height: auto; }
.fig .zoom::after {
  content: "ZOOM"; position: absolute; top: 10px; right: 10px; padding: 6px 7px 5px 20px; font: 400 7px/1 var(--font-pixel); letter-spacing: .12em;
  color: var(--gold-hi); background: var(--px-mag) 5px 50% / 10px 10px no-repeat, rgba(6, 12, 25, .86); opacity: 0; transition: opacity .15s steps(3);
}
.fig .zoom:hover::after, .fig .zoom:focus-visible::after { opacity: 1; }
.fig .zoom:hover { --nc: var(--gold-dp); }
.fig picture, .fig img.media { display: block; width: 100%; height: auto; }
/* A phone screenshot is shown phone-sized, not stretched to the column (a
   720 px wide portrait ran 1,561 px tall). */
.fig img.media.portrait { width: min(100%, 360px); margin-inline: auto; }
.fig .zoom:has(img.portrait) { width: min(100%, 360px); margin-inline: auto; }
.fig img.px-exact { width: var(--fit); max-width: 100%; margin-inline: auto; image-rendering: pixelated; }
@media (min-resolution: 2dppx) { .fig img.px, .card-art.is-px img, .pkw-table .thumb.px { image-rendering: pixelated; } }
.fig figcaption { display: flex; gap: 12px; align-items: baseline; margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.fig-n { flex: none; padding: 4px 6px 3px; font: 400 7px/1.2 var(--font-pixel); letter-spacing: .1em; text-transform: uppercase; color: var(--navy-0); background: var(--gold); }
.doc-body p img.media { display: inline-block; width: auto; max-height: 1.6em; vertical-align: middle; }
.fig img.px-half { width: var(--fit); max-width: 100%; margin-inline: auto; }
@media (min-resolution: 2dppx) { .fig img.px-half { image-rendering: pixelated; } }
.fig img.anim { background: var(--navy-2); }
/* Pixel-art figures and loops shown at whole (or half) steps carry their own
   notched plate: the zoom frame hugs them instead of adding a second box. */
.fig .zoom:has(img.px-exact), .fig .zoom:has(img.px-half) { width: fit-content; max-width: 100%; margin-inline: auto; background: none; box-shadow: none; }
.fig:has(img.px-exact) figcaption, .fig:has(img.px-half) figcaption { max-width: 720px; }

/* ---------- inline icons (title "icon"): crests, resources, steps ---------- */
.icon-inline { display: inline-block; vertical-align: middle; image-rendering: pixelated; }
.doc-body h2 .icon-inline, .doc-body h3 .icon-inline { margin: -8px 14px -4px 0; vertical-align: middle; filter: drop-shadow(0 3px 0 rgba(6, 12, 25, .6)); }
.doc-body h3:has(> .icon-inline)::before { display: none; }
/* A heading led by its crest (a realm, a section) reads as a codex plate. */
.doc-body h3:has(> .icon-inline:first-child) { display: flex; align-items: center; margin-top: 2.2em; padding: 10px 16px 10px 12px;
  font: 400 clamp(30px, 1.4rem + .9vw, 38px)/1 var(--font-display); text-transform: uppercase; letter-spacing: .01em;
  background: linear-gradient(90deg, var(--navy-2), rgba(19, 33, 61, 0) 85%); box-shadow: inset 3px 0 0 var(--gold); }
.doc-body h3:has(> .icon-inline:first-child) .icon-inline { margin: 0 14px 0 0; }
.doc-body table.data .icon-inline { margin: -8px 12px -8px 0; filter: drop-shadow(0 3px 0 rgba(6, 12, 25, .5)); }
.doc-body table.data td:has(> .icon-inline), .doc-body table.data th:has(> .icon-inline) { white-space: nowrap; }
/* The site's img max-width:100% counts as zero in a cell's min-content width,
   so a column could shrink under its icon and the icon would paint over the
   next cell (seen at 390 px). Icons keep their size; on phones they drop to
   exactly 1x (zoom .5 of the 2x markup) and their labels may wrap. */
.doc-body table.data .icon-inline { max-width: none; }
@media (max-width: 600px) {
  .doc-body table.data .icon-inline { zoom: .5; margin: -8px 16px -8px 0; }
  .doc-body table.data td:has(> .icon-inline), .doc-body table.data th:has(> .icon-inline) { white-space: normal; }
}
/* A list item that starts with an icon hangs it in a 64 px gutter, so the text
   keeps one clean left edge. */
.doc-body li:has(> .icon-inline:first-child) { position: relative; padding-left: 80px; min-height: 48px; }
.doc-body li > .icon-inline:first-child { position: absolute; left: 32px; top: 0; transform: translateX(-50%); filter: drop-shadow(0 3px 0 rgba(6, 12, 25, .55)); }
.doc-body ul:has(> li > .icon-inline:first-child) { padding-left: 0; }
.doc-body ul > li:has(> .icon-inline:first-child)::before { display: none; }
/* A numbered list whose steps start with an icon reads as a row of step cards. */
.doc-body ol:has(> li > .icon-inline:first-child) { padding-left: 0; }
.doc-body ol:has(> li > .icon-inline:first-child) > li { margin: 0 0 12px; padding: 16px 18px 14px 96px; min-height: 84px;
  background: linear-gradient(90deg, var(--navy-2), rgba(19, 33, 61, .45)); --nc: var(--rule); box-shadow: var(--notch); }
.doc-body ol > li > .icon-inline:first-child { left: 48px; top: 18px; }
.doc-body ol:has(> li > .icon-inline:first-child) > li::before { left: 8px; top: 8px; z-index: 1; padding: 3px 4px 2px; font-size: 8px; color: var(--navy-0); background: var(--gold); box-shadow: 0 0 0 2px var(--navy-0); }
@media (max-width: 600px) {
  .doc-body li:has(> .icon-inline:first-child) { padding-left: 68px; }
  .doc-body li > .icon-inline:first-child { left: 26px; }
  .doc-body ol:has(> li > .icon-inline:first-child) > li { padding-left: 80px; }
  .doc-body ol > li > .icon-inline:first-child { left: 40px; }
}
.pkw-table .crest-slot { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; }
.pkw-table .crest-slot .icon { width: 32px; height: 32px; image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(6, 12, 25, .55)); }

/* ---------- callouts ---------- */
.callout {
  --c: var(--tip);
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; margin: 1.9em 0; padding: 18px 20px 16px 18px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 10%, var(--navy-2)), var(--navy-2) 60%);
  --nc: color-mix(in srgb, var(--c) 55%, var(--navy-0)); box-shadow: var(--notch), inset 3px 0 0 var(--c);
}
.callout-why { --c: var(--why); }
.callout-warning { --c: var(--warn); }
.callout-coming { --c: var(--soon); }
.co-icon {
  display: grid; place-items: center; width: 40px; height: 40px; font: 400 14px/1 var(--font-pixel); color: var(--navy-0); background: var(--c);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .45), inset -2px -3px 0 rgba(0, 0, 0, .3), 0 0 0 2px var(--navy-0);
}
.co-icon.has-art { background: var(--navy-0); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 60%, var(--navy-0)); }
.co-icon .icon { width: 32px; height: 32px; image-rendering: pixelated; }
.co-body { min-width: 0; font-size: .96em; }
.co-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 2px 0 8px !important; font: 400 9px/1.6 var(--font-pixel); letter-spacing: .1em; text-transform: uppercase; color: var(--c); }
.co-body > :last-child { margin-bottom: 0; }
.co-body p, .co-body ul { max-width: none; }
.badge-sm { padding: 4px 5px 3px; font-size: 7px; }
@supports not (color: color-mix(in srgb, red, blue)) {
  .callout { background: var(--navy-2); --nc: var(--rule); }
}

/* ---------- pager ---------- */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 64px 0 0; padding-top: 34px; position: relative; }
.pager::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; background: var(--px-crenel) 0 0 / 40px 12px repeat-x; }
.pager-card {
  display: grid; gap: 6px; padding: 18px 20px 16px; text-decoration: none; background: var(--navy-2);
  --nc: var(--rule); box-shadow: var(--notch); transition: transform .1s steps(2), box-shadow .1s steps(2);
}
.pager-next { text-align: right; justify-items: end; }
.pager-card:hover { transform: translateY(-2px); --nc: var(--gold-dp); box-shadow: var(--notch), 0 6px 0 -2px var(--navy-0); }
.pager-k { font: 400 8px/1.4 var(--font-pixel); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.pager-t { font: 400 clamp(24px, 1.2rem + .6vw, 30px)/1 var(--font-display); text-transform: uppercase; color: var(--cream); }
.pager-s { font-size: 13px; color: var(--muted); }
@media (max-width: 560px) { .pager { grid-template-columns: 1fr; } .pager-next { text-align: left; justify-items: start; } }

/* ---------- docs home ---------- */
.home-wrap { max-width: calc(1180px + 2 * var(--gutter)); }
.home-plate { padding-bottom: 8px; }
.home-plate .display { max-width: none; font-size: clamp(56px, 2.4rem + 5.2vw, 124px); }
.home-plate .eyebrow { margin-bottom: 20px; }
.home-meta { margin: 4px 0 0; font: 400 8px/1.6 var(--font-pixel); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.home-meta time { color: var(--ink); }
.home-search { display: grid; justify-items: center; gap: 18px; margin-top: 30px; }
.search-big { width: min(640px, 100%); min-height: 60px; padding: 14px 16px 14px 20px; font-size: 18px; box-shadow: var(--notch), inset 0 2px 0 rgba(0, 0, 0, .35), 0 16px 34px -20px rgba(0, 0, 0, .9); }
.search-big .st-glyph { width: 22px; height: 22px; background-size: 22px 22px; }
.quick { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.quick .chip { text-decoration: none; min-height: 36px; padding: 8px 14px; font: 700 14px/1.2 var(--font-body); letter-spacing: 0; }
.quick .chip:hover { color: var(--navy-0); background: var(--gold); --nc: var(--gold-dp); }
.home-block { margin-top: clamp(64px, 8vw, 112px); }
.home-block-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; margin-bottom: 26px; }
.home-h { font: 400 clamp(38px, 1.8rem + 1.7vw, 58px)/.92 var(--font-display); text-transform: uppercase; color: var(--cream); text-shadow: 0 3px 0 var(--navy-0); }
.home-h::after { 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); }
.home-block-head .eyebrow { margin-bottom: 14px; }
.more { font: 400 9px/1.5 var(--font-pixel); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-hi); text-decoration: none; white-space: nowrap; }
.more::after { content: ""; display: inline-block; width: 5px; height: 8px; margin-left: 10px; vertical-align: 0; background: var(--px-chev) no-repeat; }
.more:hover { color: var(--parch); text-decoration: underline; }

/* what's new */
.new-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.new-list a { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px 12px; height: 100%; padding: 16px 18px 18px; text-decoration: none;
  background: var(--navy-2); --nc: var(--rule); box-shadow: var(--notch); transition: transform .1s steps(2); }
.new-list a:hover { transform: translateY(-2px); --nc: var(--gold-dp); }
.new-list time { font: 400 8px/1.4 var(--font-pixel); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.new-list .chip { justify-self: end; padding: 4px 6px 3px; font-size: 7px; }
.new-t { grid-column: 1 / -1; font-weight: 700; font-size: 16px; line-height: 1.35; color: var(--cream); }
.chip-new { background: var(--grass-dp); --nc: var(--grass); }
.chip-world { background: #1E4F73; --nc: var(--sky-0); }
.chip-improved { background: #134A54; --nc: var(--cyan); }
.chip-fixed { background: var(--ember-dp); --nc: var(--ember); }
.chip-balance { background: #5A3E0E; --nc: var(--gold); }
.chip-android { background: #24452A; --nc: var(--grass); }

/* onchain gameplay */
.home-onchain { position: relative; padding: clamp(24px, 3.4vw, 44px); background:
  radial-gradient(120% 90% at 100% 0, rgba(242, 181, 68, .13), transparent 55%),
  linear-gradient(180deg, var(--navy-2), var(--navy) 80%);
  --nc: var(--gold-dp); box-shadow: var(--notch), 0 30px 60px -40px rgba(0, 0, 0, .9); }
.home-onchain::before, .home-onchain::after { content: ""; position: absolute; top: 8px; width: 4px; height: 4px; background: var(--gold); box-shadow: 0 0 0 2px var(--gold-dp); }
.home-onchain::before { left: 8px; }
.home-onchain::after { right: 8px; }
.home-safe { margin: -8px 0 24px; max-width: 60ch; color: var(--cream); }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.feature { display: flex; flex-direction: column; height: 100%; text-decoration: none; background: var(--navy-0); --nc: var(--rule); box-shadow: var(--notch); transition: transform .1s steps(2); }
.feature:hover { transform: translateY(-3px); --nc: var(--gold); }
.card-art { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--navy-2); border-bottom: 2px solid var(--navy-3); }
.card-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.feature:hover .card-art img { transform: scale(1.04); }
.also { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 22px 0 0; }
.also-k { font: 400 8px/1.5 var(--font-pixel); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.also-link { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; font-weight: 700; font-size: 14.5px; color: var(--cream); text-decoration: none; background: var(--navy-0); --nc: var(--rule); box-shadow: var(--notch); }
.also-link:hover { color: var(--gold-hi); --nc: var(--gold-dp); }
.feature-body { display: grid; gap: 8px; padding: 16px 18px 18px; }
.feature-t { font: 400 28px/1 var(--font-display); text-transform: uppercase; color: var(--cream); }
.feature-d { font-size: 14.5px; line-height: 1.5; color: var(--ink); }
/* Five update pages on a wide screen: the first is the featured card, two
   rows tall, so the grid closes as one block instead of leaving a lone card. */
@media (min-width: 1024px) {
  .feature-grid:has(> li:nth-child(5):last-child) { grid-template-columns: 1.35fr 1fr 1fr; }
  .feature-grid:has(> li:nth-child(5):last-child) > li:first-child { grid-row: span 2; }
  .feature-grid:has(> li:nth-child(5):last-child) > li:first-child .card-art { flex: 1 1 auto; aspect-ratio: auto; min-height: 240px; }
  .feature-grid:has(> li:nth-child(5):last-child) > li:first-child .feature-t { font-size: 38px; }
  .feature-grid:has(> li:nth-child(5):last-child) > li:first-child .feature-d { font-size: 16px; }
}

/* sections */
.sec-grid { margin: 0; padding: 0; list-style: none; columns: 3 300px; column-gap: 18px; }
.sec-card { break-inside: avoid; margin: 0 0 18px; padding: 22px 22px 18px; background: var(--navy-2); --nc: var(--rule); box-shadow: var(--notch); scroll-margin-top: calc(var(--head-h) + 20px); }
.sec-card:target { --nc: var(--gold); }
.sec-card-head { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; }
.sec-card-head .sec-icon { width: 52px; height: 52px; font-size: 12px; }
.sec-card-head .sec-icon.has-art { width: 72px; height: 72px; }
.sec-card-head .sec-icon .icon { width: 64px; height: 64px; }
.sec-card-head .badge { margin-top: 8px; }
.sec-card h3 { margin: 0 0 4px; font: 400 32px/.95 var(--font-display); text-transform: uppercase; color: var(--cream); }
.sec-card-head p { margin: 0; font-size: 14px; line-height: 1.4; color: var(--muted); }
.sec-card ul { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--navy-3); }
.sec-card li a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 2px; font-size: 15.5px; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--navy-3); }
.sec-card li a::after { content: ""; flex: none; width: 5px; height: 8px; margin-left: auto; background: var(--px-chev) no-repeat; opacity: .5; }
.sec-card .sec-t { flex: 1; }
.sec-card li a::after { margin-left: 0; }
.sec-card li a:hover { color: var(--gold-hi); }
.sec-card li a:hover::after { opacity: 1; }

/* ---------- search dialog ---------- */
.search-dialog {
  width: min(700px, calc(100vw - 24px)); max-height: min(78vh, 720px); margin: 10vh auto auto; padding: 0; color: var(--ink); border: 0;
  background: var(--navy-0); --nc: var(--gold-dp); box-shadow: var(--notch), 0 40px 80px -30px rgba(0, 0, 0, .95); overflow: hidden;
  display: none; flex-direction: column;
}
.search-dialog[open] { display: flex; animation: pkw-drop .16s steps(4) both; }
.search-dialog::backdrop { background: rgba(6, 12, 25, .72); backdrop-filter: blur(3px); }
.sd-form { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 18px; border-bottom: 2px solid var(--rule); }
.sd-form .st-glyph { width: 22px; height: 22px; background-size: 22px 22px; }
.sd-input { flex: 1; min-width: 0; height: 40px; padding: 0; font: 400 19px/1 var(--font-body); color: var(--cream); background: none; border: 0; outline: none; }
.sd-input::placeholder { color: var(--muted); }
.sd-input::-webkit-search-cancel-button { display: none; }
.sd-close { padding: 7px 8px 6px; font: 400 8px/1 var(--font-pixel); color: var(--muted); background: var(--navy-3); border: 0; cursor: pointer; }
.sd-close:hover { color: var(--gold-hi); }
.sd-status { margin: 0; padding: 10px 18px; font: 400 8px/1.5 var(--font-pixel); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sd-results { flex: 1; overflow-y: auto; margin: 0; padding: 0 8px 8px; list-style: none; scrollbar-color: var(--gold-dp) transparent; }
.sd-results a { display: grid; gap: 4px; padding: 12px 14px; text-decoration: none; border-left: 3px solid transparent; }
.sd-results li[aria-selected="true"] a, .sd-results a:hover { background: var(--navy-2); border-left-color: var(--gold); }
.sr-path { font: 400 7px/1.5 var(--font-pixel); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sr-title { font-weight: 700; font-size: 16.5px; line-height: 1.3; color: var(--cream); }
.sr-text { font-size: 14px; line-height: 1.5; color: var(--ink); }
.sr-text mark, .sr-title mark { color: var(--navy-0); background: var(--gold-hi); padding: 0 2px; }
.sd-foot { margin: 0; padding: 10px 18px 12px; border-top: 2px solid var(--navy-2); font-size: 12.5px; color: var(--muted); }
.sd-foot kbd { margin: 0 2px; }

/* ---------- lightbox ---------- */
.lightbox { max-width: none; max-height: none; width: 100vw; height: 100vh; margin: 0; padding: 0; border: 0; background: transparent; display: none; place-items: center; cursor: zoom-out; }
.lightbox[open] { display: grid; }
.lightbox::backdrop { background: rgba(6, 12, 25, .95); backdrop-filter: blur(4px); }
.lightbox figure { margin: 0; display: grid; justify-items: center; gap: 12px; }
.lightbox img { max-width: 94vw; max-height: 86vh; width: auto; height: auto; box-shadow: 0 0 0 2px var(--rule), 0 30px 80px rgba(0, 0, 0, .8); background: var(--navy-0); }
.lightbox img.px { image-rendering: pixelated; }
.lightbox figcaption { max-width: 70ch; padding: 0 16px; text-align: center; font-size: 14px; color: var(--muted); }
.lightbox figcaption .fig-n { margin-right: 10px; }
.lb-close { position: fixed; top: 16px; right: 16px; padding: 9px 10px 8px; font: 400 8px/1 var(--font-pixel); color: var(--cream); background: var(--navy-3); border: 0; cursor: pointer; }

/* ---------- small screens ---------- */
@media (max-width: 1023px) {
  .doc { padding-top: 22px; }
  /* The open drawer drops as one full-width panel under the bar. */
  .docs-drawer .docs-nav { position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% - 2px);
    max-height: min(72vh, 640px); box-shadow: var(--notch), 0 30px 60px -20px rgba(0, 0, 0, .85); }
}
@media (max-width: 600px) {
  .doc-body table.data { font-size: 14px; }
  .doc-body table.data th, .doc-body table.data td { padding: 9px 10px; }
  .callout { grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 16px 14px 14px 12px; }
  .co-icon { width: 32px; height: 32px; font-size: 11px; }
  .co-icon .icon { width: 24px; height: 24px; }
  .home-search { margin-top: 22px; }
  .search-big { font-size: 16px; min-height: 54px; }
}

/* ---------- forced colors / print ---------- */
@media (forced-colors: active) {
  .callout, .pager-card, .sec-card, .feature, .search-trigger, .docs-nav, .fig .zoom { border: 2px solid CanvasText; box-shadow: none; }
}
@media print {
  .docs-side, .doc-toc, .toc-inline, .pager, .search-trigger, .anchor, .doc-hero, .doc-ribbon { display: none !important; }
  .docs-shell { display: block; }
  .doc-body, .doc-lede, .doc-title { color: #000; text-shadow: none; }
  .callout { border: 2px solid #000; background: none; }
}