/* ============================================================================
   L2Everdream — the WIKI's visual identity
   ----------------------------------------------------------------------------
   Same product as the homepage: the launcher's twilight ground, the blurple
   brand accent, the amber "lone player's light". Tokens, wordmark, header and
   the Cormorant/sans/mono type system are taken VERBATIM from the homepage
   (src/pages/preview-new.astro) so the wiki reads as the same site — not a
   second look. Chris, 2026-07-21: "we need to adopt our header styling as the
   golden rule."

   The wiki's earlier identity was a distinct lantern-gold-on-parchment palette
   with its own light/dark theme. That is retired here in favour of the one
   shared look. The wiki is dark, like the homepage.
   ========================================================================== */

@font-face{font-family:'Cormorant Garamond'; font-style:normal; font-weight:400;
  font-display:swap; src:url('/assets/fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond'; font-style:normal; font-weight:500;
  font-display:swap; src:url('/assets/fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond'; font-style:normal; font-weight:600;
  font-display:swap; src:url('/assets/fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2');}

:root {
  /* Surfaces — the launcher's twilight, sunk toward the site's blurple ground */
  --void:#0B0A18; --deep:#100E22; --field:#12102A; --surface:#1A1740; --twilight:#1B1636;

  /* Blurple stays the brand accent */
  --blurple:#5865F2; --blurple-lit:#8B94F7; --blurple-hi:#6B78FF; --light-blurple:#E0E3FF;

  /* The launcher's warm + arcane notes, used sparingly */
  --lantern:#F0B67A; --ember:#F6C67A; --arcane:#9d8cf0; --verdance:#93C0AC;

  --starlight:#F5F6FF; --body:#C9CCEA; --greyple:#9096B8;

  --line:rgba(136,148,247,.15); --line-soft:rgba(136,148,247,.09);

  /* Role colours — the shared content DNA, tuned for the dark ground */
  --tank:#6a9bd6; --heal:#8fb7a6; --dps:#e08469; --supp:#a98ad6;
  --ranged:#e0b25a; --mage:#9d8cf0; --dwarf:#cbab6a;
  --good:#8fb7a6; --warn:#e08469;

  --serif:'Cormorant Garamond',Georgia,'Spectral','Times New Roman',serif;
  --sans:system-ui,'Segoe UI',Inter,-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'JetBrains Mono','SFMono-Regular',Consolas,ui-monospace,'Courier New',monospace;
  /* ⚠️ TWO WIDTHS, NOT ONE (Chris 2026-07-26: "wiki width is too small").
     74ch (~660px) is a good measure for a PARAGRAPH and a bad one for this page,
     which is mostly tables and code — the comps table was scrolling inside 660px
     while ~450px of window sat empty either side. So prose keeps a readable
     measure and the wide elements get the fuller column (--measure-wide), which
     is still well short of the homepage's 1360px because a wiki is for reading,
     not for a hero. */
  --measure:74ch; --measure-wide:1040px;
  /* ⚠️ THE SAME MEASURE, RESOLVED IN THE BODY FONT, AS PX. `ch` units are
     font-relative, so --measure means something different on every element that
     uses a different face — see the heading note below, where it silently became
     918px instead of 658px. Anything that must line up with PROSE (rather than
     protect its own reading measure) uses this. system-ui at 16.5px measures
     8.89px/ch; 74 x 8.89 = 658. */
  --measure-prose:658px;
  /* ⚠️ ONE CONTAINER FOR THE BAR AND THE PAGE (Chris 2026-07-26: "it is too far
     to the left side on desktop, needs to be ideally in alignment with the site
     logo in header … you may need to move the site header to make that work out
     but we have plenty room").
     MEASURED, the sidebar sat at a fixed 36px while the logo moved with the
     centred bar — 106px at 1280 and 426px at 1920, so they only agreed by
     accident at no width at all. The bar was capped at 1120px while the shell
     needs 244px of sidebar plus a 1040px column. Widening --wrap to hold both
     lets the two share one container, which is what makes them line up at EVERY
     width rather than at one. */
  --wrap:1340px; --radius:16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Media never exceeds its column — every generated map/floor-plan inherits it. */
img, svg, video, canvas { max-width: 100%; height: auto; }

body.wiki {
  margin: 0;
  background: var(--void);
  color: var(--starlight);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--blurple-lit); text-underline-offset: 3px; }
a:hover { color: var(--light-blurple); }
:focus-visible { outline: 2px solid var(--blurple-lit); outline-offset: 3px; border-radius: 4px; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--blurple); color: #fff; padding: 11px 18px; border-radius: 0 0 8px 0; }
.skip:focus { left: 0; }

/* ============================================================================
   THE HEADER — the homepage's sticky, blurred top bar, verbatim.
   ----------------------------------------------------------------------------
   This is what kills the mobile bug. The wiki used to put its whole page list in
   a LEFT SIDEBAR that, at the mobile breakpoint, un-stuck and stacked ABOVE the
   content — ~15 rows of menu burying the article. There is no sidebar now: nav
   lives in this one bar (wordmark + section links), and on a phone the links
   collapse into a hamburger drawer. Content is the first thing on the page.
   ========================================================================== */
.wiki-nav { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(12px);
  background: rgba(11,10,24,.82); border-bottom: 1px solid var(--line-soft); }
.wiki-nav-in { max-width: var(--wrap); margin: 0 auto; padding: 0 26px;
  position: relative;
  display: flex; align-items: center; gap: 16px; min-height: 60px; }

/* THE WORDMARK IS ONE MARK — L2 amber · Ever starlight · dream blurple, taken
   from the homepage's .nav-mark so it is pixel-identical to the header there. */
.wiki-mark { font-family: var(--serif); font-size: 23px; font-weight: 600;
  letter-spacing: .005em; color: var(--starlight); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px; }
.wiki-mark .l2 { font-size: .82em; margin-right: 2px;
  background: linear-gradient(180deg,#F6C67A,#E8A24C);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
/* ⚠️ THE SAME TWO STOPS AS THE SITE WORDMARK (Chris 2026-07-26: "the wiki may be
   using the old L2Everdream logo — make sure we're using the correct colour for
   dream"). He was right. This ran --light-blurple -> --blurple-lit, i.e.
   rgb(224,227,255) -> rgb(139,148,247): a near-WHITE first stop that made "dream"
   read pale and washed out beside the header's rgb(169,173,250) -> rgb(143,147,245).
   Hard-coded to match `.nav-mark .dream` in index.astro exactly, because the two
   variables above are a general palette and drifted from the brand lockup.
   ⚠️ If the site wordmark changes, change this with it — same note as the footer. */
.wiki-mark .dream { background: linear-gradient(180deg,#a9adfa,#8f93f5);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
/* The "Wiki" sub-badge rides beside the mark — a mono chip, the one signal that
   this is the wiki and not the homepage. */
/* ⚠️ The badge is a LINK now (to the wiki home), not an inert span — the
   wordmark takes you to the site. So it needs a hover state and a real tap
   target, while still reading as a chip rather than a button. */
.wiki-badge { font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--lantern); text-decoration: none;
  background: rgba(240,182,122,.12); border: 1px solid rgba(240,182,122,.24);
  border-radius: 20px; padding: 3px 8px; margin-left: 2px;
  display: inline-flex; align-items: center; min-height: 24px; }
.wiki-badge:hover { color: #F6C67A; background: rgba(240,182,122,.2);
  border-color: rgba(240,182,122,.45); }
/* ⚠️ NO CURRENT-PAGE STATE ON THE BADGE (Chris 2026-07-26: "clicking wiki button
   makes it get stuck in active state and shows click highlight all the time").
   It is not a nav item, it is the brand chip that happens to link to wiki home —
   so a persistent "you are here" tint just reads as a button stuck down. The
   focus ring still appears for keyboard users, which is the state that matters.
   ⚠️ `:focus:not(:focus-visible)` clears the lingering ring a MOUSE click leaves
   behind, without touching keyboard focus. */
.wiki-badge:focus:not(:focus-visible) { outline: none; }

/* THE FULL PAGE LIST IS A DRAWER AT EVERY WIDTH — an anchored dropdown under the
   bar, opened by the menu button. The wiki has ~11 pages; flattening them into a
   top row wrapped to three lines on desktop and shoved the wordmark down. So the
   bar stays the homepage's clean, few-control shape (wordmark · menu · site link)
   and the pages live one tap away in the panel — the same drawer markup mobile
   uses, just positioned. */
/* THE PANEL SCROLLS ITSELF (Chris 2026-07-26: "when I click the fly out, I can't
   scroll. It scrolls the actual wiki rather than the menu").
   MEASURED: 12 links make the panel 801px tall and it ended at y=867 on an
   852px-high phone (and 200px past the fold on a 375x667). With `max-height:none`
   and `overflow-y:visible` there was nothing for the panel itself to scroll, so
   the touch fell through to the page behind it — which is exactly what a drawer
   taller than the screen does. Desktop never showed it: at 900px tall the panel
   fits, so this only ever reproduced on a phone.
   `max-height` is measured from the panel's own top (it is positioned under the
   bar), so `100dvh - that top - a margin` is the space actually available.
   ⚠️ dvh, not vh: on mobile Safari `vh` is the tallest viewport, ignoring the
   URL bar, which would leave the last link under the chrome.
   `overscroll-behavior:contain` stops a scroll that reaches the panel's end from
   chaining to the page — the second half of the same complaint. */
.wiki-links {
  display: none;
  /* ⚠️ top:100%, NOT calc(100% + 6px) (Chris 2026-07-27, with a screenshot: "there's
     also a gap on the flyout menu at the top that shows background"). Reproduced at
     393px: a 6px band below the header through which `wiki-main` — the article text —
     was visible, so an open menu had a stripe of the page running through it.
     The 6px float is a fine idea for a small desktop dropdown that reads as a detached
     card; it is wrong for a near-full-width mobile panel hanging off the header, where
     the two should read as one surface. */
  position: absolute; right: 26px; top: 100%;
  width: min(320px, calc(100vw - 32px));
  flex-direction: column; align-items: stretch; gap: 2px;
  margin: 0; padding: 10px 12px 14px;
  background: var(--deep); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: 0 24px 60px -30px rgba(0,0,0,.95);
  max-height: calc(100dvh - 100px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* the links are flex children: without this they shrink to fit instead of
   letting the panel overflow, which would defeat the scroll entirely. */
.wiki-links > * { flex: 0 0 auto; }
.wiki-links[data-open="true"] { display: flex; }
.wiki-links a { color: var(--body); text-decoration: none; font-size: 14.5px; font-weight: 500;
  padding: 9px 12px; border-radius: 9px; min-height: 42px; display: inline-flex; align-items: center; }
.wiki-links a:hover { color: var(--light-blurple); background: rgba(136,148,247,.09); }
.wiki-links a[aria-current="page"] { color: var(--light-blurple); background: rgba(88,101,242,.18); }
/* The back-to-site link is the CTA-weight control at the foot of the panel. */
.wiki-links a.wiki-cta { color: var(--light-blurple); background: rgba(88,101,242,.18);
  border: 1px solid rgba(136,148,247,.38); margin-top: 6px; justify-content: center; }
.wiki-links a.wiki-cta:hover { background: #4752C4; color: #fff; border-color: transparent; }
.wiki-links .drawer-head { font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--greyple); padding: 12px 12px 4px; }
.wiki-links .drawer-head:first-of-type { padding-top: 6px; }

/* The menu button is always shown — the bar is the same clean shape everywhere. */
/* ⭐ DESKTOP NAV — SECTION DROPDOWNS, NOT A HAMBURGER (Chris 2026-07-26: "the
   wiki on desktop should not have a collapsed mobile nav menu").
   ⚠️ The drawer was not laziness: MEASURED, a flat row of all 10 page links comes
   to 1804px against 841px of free bar, so the links cannot simply be shown. The
   manifest already groups them into 4 named sections, so desktop shows the
   SECTIONS — 4 controls that fit — each opening its pages beneath. Mobile keeps
   the drawer, which is the right idiom on a phone.
   Hover OR focus opens a menu, so it works with a mouse and with a keyboard; the
   button is a real <button> so Tab reaches it and aria-expanded tracks state. */
/* ⚠️ THE SECTION LINKS START WHERE THE READING COLUMN DOES (Chris 2026-07-27:
   "'Playing' needs to be aligned with 'How the world works'").
   The bar's wordmark aligns with the SIDEBAR (both at 76px), which is correct —
   they are the same column. But the section links were floating on a 14px margin
   after the badge, landing at 300px against an h1 at 338. Pushing them to the
   grid's second track puts the nav over the content it navigates.
   `margin-left:auto` on the phone/tablet path would fight the drawer, so this is
   scoped to the width where the sidebar exists. */
.wiki-desknav { display: none; align-items: center; gap: 2px; margin-left: 14px; }
@media (min-width: 1100px) {
  /* MEASURED, not computed from the grid: with margin 236 the links landed at
     522, so their natural start is 286. The h1 sits at 338, so the gap is 52. */
  .wiki-desknav { margin-left: 52px; }
}
.wiki-desknav > a, .wiki-sec-btn {
  font-size: 14.5px; font-weight: 500; color: var(--body); text-decoration: none;
  background: none; border: 0; font-family: inherit; cursor: pointer;
  padding: 9px 11px; border-radius: 9px; display: inline-flex; align-items: center;
  gap: 6px; min-height: 40px; white-space: nowrap;
}
.wiki-desknav > a:hover, .wiki-sec-btn:hover { color: var(--light-blurple); background: rgba(136,148,247,.09); }
.wiki-desknav > a[aria-current="page"] { color: var(--light-blurple); background: rgba(88,101,242,.18); }
.wiki-sec-btn svg { width: 10px; height: 7px; opacity: .6; transition: transform .16s ease; }
.wiki-sec { position: relative; }
/* ⚠️ NO DEAD GAP BETWEEN THE BUTTON AND ITS MENU (Chris 2026-07-26: "it's hard
   to click — the flyout disappears when I move my mouse from Sim Parties down to
   click Sim Party Mechanics").
   The menu sat 4px below the button, so the pointer crossed 4px of NOTHING on the
   way down, `:hover` dropped, and the menu closed under the cursor. The panel now
   starts flush at `top:100%` and carries the visual gap as transparent
   padding-top, so the hover path is continuous while the panel still looks
   detached. */
.wiki-sec-menu {
  position: absolute; left: 0; top: 100%; z-index: 60;
  margin-top: 0; padding-top: 4px; background-clip: padding-box;
  display: none; flex-direction: column; min-width: 232px; padding: 7px;
  background: var(--deep); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.95);
}
/* ⚠️ HOVER AND CLICK MUST NOT BE INDEPENDENT (Chris 2026-07-26: "if you click on
   a dropdown it leaves it open and hovering another causes overlap").
   The first version opened a menu on `:hover` OR on `[aria-expanded=true]`, which
   are unrelated conditions — so a CLICK-opened menu stayed open while a HOVER
   opened a second one beside it, and the two panels overlapped.
   Now hover only opens a menu when NOTHING is pinned open (`:not(:has(...))` on
   the nav), so the two states can never both be showing. Clicking is the way to
   pin one; the JS closes any other on the way. */
.wiki-desknav:not(:has(.wiki-sec-btn[aria-expanded="true"])) .wiki-sec:hover .wiki-sec-menu,
.wiki-sec:focus-within .wiki-sec-menu,
.wiki-sec-btn[aria-expanded="true"] + .wiki-sec-menu { display: flex; }
.wiki-desknav:not(:has(.wiki-sec-btn[aria-expanded="true"])) .wiki-sec:hover .wiki-sec-btn svg,
.wiki-sec-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.wiki-sec-menu a {
  color: var(--body); text-decoration: none; font-size: 14px;
  padding: 9px 11px; border-radius: 8px; min-height: 40px;
  display: inline-flex; align-items: center;
}
.wiki-sec-menu a:hover { color: var(--light-blurple); background: rgba(136,148,247,.09); }
.wiki-sec-menu a[aria-current="page"] { color: var(--light-blurple); background: rgba(88,101,242,.18); }

/* ⚠️ NO margin-left:auto HERE (Chris 2026-08-21: "large gap between search icon
   and menu icon on mobile"). .wiki-search (below) already carries margin-left:auto
   to push the trailing group to the bar's right edge — a SECOND auto margin on
   this sibling split the free space between the two of THEM as well, opening a
   second gap nobody wanted. One auto margin per trailing group; .wiki-nav-in's
   own `gap` handles the small space between search and the hamburger. */
.wiki-toggle { display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none; padding: 0; cursor: pointer;
  background: transparent; border: 1px solid var(--line-soft); border-radius: 10px;
  color: var(--starlight); }
.wiki-toggle:hover { background: rgba(136,148,247,.09); border-color: rgba(136,148,247,.38); }
.wiki-toggle .bars { display: block; width: 18px; height: 14px; position: relative; }
.wiki-toggle .bars::before, .wiki-toggle .bars::after, .wiki-toggle .bars span {
  content: ""; position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: currentColor; transition: transform 180ms ease, opacity 140ms ease; }
.wiki-toggle .bars::before { top: 0; }
.wiki-toggle .bars span { top: 6px; }
.wiki-toggle .bars::after { bottom: 0; }
.wiki-toggle[aria-expanded="true"] .bars::before { transform: translateY(6px) rotate(45deg); }
.wiki-toggle[aria-expanded="true"] .bars span { opacity: 0; }
.wiki-toggle[aria-expanded="true"] .bars::after { transform: translateY(-6px) rotate(-45deg); }

/* Above the drawer breakpoint: real nav in, hamburger out.
   ⚠️ THIS BLOCK MUST STAY BELOW `.wiki-toggle`'s base rules. It was first written
   above them, where `display:none` and the base `display:inline-flex` had equal
   specificity — so the later base rule won and the hamburger stayed visible on
   desktop even though the media query matched. Cascade order, not specificity. */
@media (min-width: 861px) {
  .wiki-desknav { display: flex; }
  .wiki-toggle { display: none; }
  .wiki-links { display: none !important; }
}

/* On a narrow phone the panel spans the bar instead of a fixed 320px card. */
@media (max-width: 560px) {
  .wiki-links { left: 14px; right: 14px; width: auto; }
  .wiki-links a { font-size: 15.5px; padding: 11px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .wiki-toggle .bars::before, .wiki-toggle .bars::after, .wiki-toggle .bars span { transition: none; }
}

/* ============================================================================
   SEARCH — an inline field on desktop, an icon that opens a full-screen
   overlay on mobile (Wikipedia's own split: the glass lives INSIDE a real
   text field in landscape/desktop, and becomes a button that opens a
   full-viewport search surface on a phone). Chris 2026-08-21.
   ========================================================================== */
.wiki-search { display: flex; align-items: center; margin-left: auto; }
/* margin-left:auto puts search right before the hamburger; on desktop the
   hamburger is display:none (rule above) so search naturally becomes the
   bar's trailing control, same slot Wikipedia's search occupies. */

/* Icon-only trigger — mobile only. Same 44x44 tap target and chrome as
   .wiki-toggle so the two controls read as a matched pair. */
.search-open { display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none; padding: 0; cursor: pointer;
  background: transparent; border: 1px solid var(--line-soft); border-radius: 10px;
  color: var(--starlight); }
.search-open:hover { background: rgba(136,148,247,.09); border-color: rgba(136,148,247,.38); }
.search-open svg { width: 19px; height: 19px; }

/* The inline field — desktop only. */
.search-field { display: none; position: relative; align-items: center; }
.search-field-icon { position: absolute; left: 12px; width: 15px; height: 15px;
  color: var(--greyple); pointer-events: none; }
.search-input { font-family: var(--sans); font-size: 14px; color: var(--starlight);
  background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 20px;
  padding: 9px 14px 9px 34px; width: 168px; transition: width 180ms ease, background 140ms ease, border-color 140ms ease; }
.search-input::placeholder { color: var(--greyple); }
.search-input:hover { border-color: rgba(136,148,247,.38); }
.search-input:focus { outline: none; width: 240px; background: var(--deep);
  border-color: var(--blurple-lit); box-shadow: 0 0 0 3px rgba(136,148,247,.18); }
/* Chrome ships a native × clear button on type=search; the custom field chrome
   around it reads better without also carrying the browser's own affordance. */
.search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

.search-results { position: absolute; left: 0; right: 0; top: calc(100% + 8px);
  background: var(--deep); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.95); max-height: min(60vh, 420px);
  overflow-y: auto; z-index: 60; }
.search-result-list { display: flex; flex-direction: column; padding: 7px; }
.search-result { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px;
  border-radius: 9px; text-decoration: none; color: var(--body); }
.search-result:hover, .search-result:focus-visible { background: rgba(136,148,247,.09); }
.search-result-title { font-size: 14px; font-weight: 600; color: var(--light-blurple); }
.search-result-excerpt { font-size: 12.5px; line-height: 1.4; color: var(--body); }
.search-result-excerpt mark { color: var(--ember); background: none; font-weight: 600; }
.search-empty { margin: 0; padding: 14px 15px; font-size: 13px; color: var(--greyple); }

/* Empty-state: Recent (chips, re-runs a past search) + Suggested pages (links,
   navigate directly). Same section-label idiom as .wiki-links' drawer-head. */
.search-section-head { font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--greyple); padding: 12px 12px 6px; }
.search-section-head:first-child { padding-top: 10px; }
.search-chip-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 8px 6px; }
.search-chip { font-family: var(--sans); font-size: 13px; color: var(--body);
  background: rgba(136,148,247,.09); border: 1px solid var(--line); border-radius: 14px;
  padding: 6px 12px; cursor: pointer; }
.search-chip:hover, .search-chip:focus-visible { color: var(--light-blurple);
  background: rgba(136,148,247,.16); border-color: rgba(136,148,247,.38); }
.search-result-suggested .search-result-title { color: var(--body); font-weight: 500; }
.search-result-suggested:hover .search-result-title,
.search-result-suggested:focus-visible .search-result-title { color: var(--light-blurple); }

@media (min-width: 861px) {
  .search-open { display: none; }
  .search-field { display: flex; }
}

/* ⭐ LANDSCAPE PHONES GET THE REAL FIELD TOO (Chris 2026-08-21: "when I go
   landscape it should open up to an actual text field... it shouldn't be so
   tiny, but I would want the text field styled the same as when you're
   clicking on it"). A rotated phone has real width (iPhone-class landscape
   runs ~700-900px) but sits under the 861px desktop threshold, so without
   this rule it still showed just the icon. And rather than start at the
   idle 168px pill and grow on focus, it wears the FOCUSED look — the deep
   background, the lit border — as its resting state, because at this size
   the idle pill read as a decoration rather than a control.
   min-width 560px keeps this off genuinely tiny landscape devices; a
   rotated 375-wide phone is 812 in landscape, well clear of it. */
@media (orientation: landscape) and (min-width: 560px) and (max-width: 860px) {
  .search-open { display: none; }
  .search-field { display: flex; }
  .search-input { width: 260px; background: var(--deep); border-color: var(--blurple-lit); }
  .search-input:focus { width: 260px; }
}

/* ⭐ MOBILE FULL-SCREEN OVERLAY — the Wikipedia-phone idiom. Fixed over the
   whole viewport, a big auto-focused input up top, results fill the rest.
   Never shown on desktop — that breakpoint has its own inline field above
   and .search-open (the only thing that can trigger this) is display:none
   there. */
.search-overlay { position: fixed; inset: 0; z-index: 100; background: var(--void);
  display: flex; flex-direction: column; }
.search-overlay[hidden] { display: none; }
.search-overlay-bar { display: flex; align-items: center; gap: 10px;
  padding: 14px 14px; border-bottom: 1px solid var(--line-soft);
  position: relative; flex: none; }
.search-overlay-bar .search-field-icon { position: absolute; left: 26px; }
.search-overlay-bar .search-input { flex: 1 1 auto; width: auto;
  font-size: 16px; /* 16px stops iOS Safari auto-zooming the page on focus */
  padding: 12px 14px 12px 36px; border-radius: 22px; }
.search-overlay-bar .search-input:focus { width: auto; }
.search-close { display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none; padding: 0; cursor: pointer;
  background: transparent; border: 0; border-radius: 10px; color: var(--body); }
.search-close:hover { background: rgba(136,148,247,.09); color: var(--starlight); }
.search-close svg { width: 17px; height: 17px; }
.search-results-mobile { position: static; flex: 1 1 auto; overflow-y: auto;
  background: none; border: 0; border-radius: 0; box-shadow: none; max-height: none; }
.search-results-mobile .search-result-list { padding: 6px 8px 24px; }
.search-results-mobile .search-result { padding: 12px 11px; }
.search-results-mobile .search-result-title { font-size: 15px; }
.search-results-mobile .search-result-excerpt { font-size: 13px; }

/* ============================================================================
   THE READING COLUMN
   ========================================================================== */
/* ⭐ THE DESKTOP SIDEBAR (Chris 2026-07-26: "I want to be knowing where I am in
   relation to where I was").
   ⚠️ DESKTOP ONLY, and that is not laziness — the previous sidebar was removed
   because at the mobile breakpoint it un-stuck and stacked ABOVE the article,
   burying the content under ~15 rows of menu. Below 1100px this is display:none
   and the bar's drawer is the whole story.
   It sticks below the bar and scrolls itself, so a long page list never traps the
   document scroll (the same bug the flyout had on 2026-07-26). */
.wiki-shell { display: block; }
.wiki-side { display: none; }
@media (min-width: 1100px) {
  /* same max-width, same auto margins, same 26px padding as .wiki-nav-in — so the
     first sidebar link starts on the same x as the wordmark above it. */
  .wiki-shell { display: grid; grid-template-columns: 244px minmax(0, 1fr);
    max-width: var(--wrap); margin: 0 auto; padding: 0 26px; }
  .wiki-side { display: block; }
  .side-in { position: sticky; top: 74px; max-height: calc(100dvh - 90px);
    overflow-y: auto; overscroll-behavior: contain;
    padding: 40px 14px 40px 0; }
  /* the reading column keeps its own centring inside the remaining space */
  .wiki-shell .wiki-main { padding-left: 18px; }
}
/* ⚠️ THE 10px PADDING IS PULLED BACK BY A NEGATIVE MARGIN. The link needs inner
   padding so its hover/current pill has room, but that padding is not an indent —
   left as-is it put the link TEXT 10px right of the wordmark above it, which is
   exactly the misalignment being fixed. Same trick the footer links use. */
.side-home { display: block; font-size: 13.5px; color: var(--body); text-decoration: none;
  padding: 8px 10px; border-radius: 8px; margin: 0 -10px 14px; }
.side-home:hover { color: var(--light-blurple); background: rgba(136,148,247,.09); }
.side-group { margin-bottom: 18px; }
.side-head { font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--greyple); margin: 0 0 6px; padding-left: 0; }
/* ⚠️ GRID, NOT FLEX, so every title starts on the SAME x whatever its number is
   ("A1.1" and "B1.10" are different widths). A ragged left edge on a list of ten
   links is the thing that would make numbering feel like clutter rather than
   structure. The column is sized to the widest number the scheme can produce,
   not to today's longest. */
.side-link { display: grid; grid-template-columns: 2.6em 1fr; align-items: baseline;
  column-gap: 4px;
  font-size: 13.5px; line-height: 1.35; color: var(--body);
  text-decoration: none; padding: 7px 10px; border-radius: 8px; margin: 0 -10px; }
/* The number is a reference, not the content — mono, dimmer, and it brightens
   with the link so it never reads as a separate disabled thing. */
.side-num { font-family: var(--mono); font-size: 11px; color: var(--greyple-dim);
  letter-spacing: .02em; }
.side-link:hover .side-num, .side-link[aria-current="page"] .side-num { color: var(--blurple-lit); }
.side-t { min-width: 0; }
/* The section head carries its own tag, aligned to the same column as the page
   numbers below it so the whole rail reads as one outline. */
.side-head { display: grid; grid-template-columns: 2.6em 1fr; align-items: baseline;
  column-gap: 4px; }
.side-tag { font-family: var(--mono); font-size: 11px; color: var(--lantern); }
.side-link:hover { color: var(--light-blurple); background: rgba(136,148,247,.09); }
/* ⚠️ THE WHOLE POINT: the current page is unmistakable, so a reader always knows
   where they are in the list they came from. */
.side-link[aria-current="page"] {
  color: var(--light-blurple); background: rgba(88,101,242,.18);
  box-shadow: inset 2px 0 0 var(--blurple-lit); }

/* ⚠️ "WIKI HOME" GETS A QUIETER CURRENT STATE THAN A PAGE (Chris 2026-07-27:
   "I think Wiki home has a background bug").
   The logic was right — measured, it is transparent on every article and filled
   only on /wiki.html, which is where his screenshot was taken. But it LOOKED
   wrong, and the reason is real: it was sharing the page-link treatment while
   not being a page in the list. A solid filled bar at the top of the rail reads
   as a HEADING for everything under it, not as "you are here".
   So it keeps the accent rule (the honest "you are here" signal) and drops the
   fill that made it look like a section header. */
.side-home[aria-current="page"] {
  color: var(--light-blurple); background: transparent;
  box-shadow: inset 2px 0 0 var(--blurple-lit); }

.wiki-main { padding: 44px 26px 96px; min-width: 0; }
@media (max-width: 720px) { .wiki-main { padding: 30px 22px 70px; } }
.wiki-body { max-width: var(--measure-wide); margin-inline: auto; }
/* Prose stays at the reading measure inside the wider column. Tables, code
   blocks and images are free to use the full width — they are the elements that
   were cramped, and they do not have a comfortable line length to protect. */
.wiki-body > p, .wiki-body > ul, .wiki-body > ol { max-width: var(--measure); }
/* The blockquote is set at 15px, so its own 74ch resolved to 929px — a THIRD
   edge, 60px short of the prose it sits among. Same cause as the headings, same
   fix: line it up with prose rather than compute a measure from its own face. */
.wiki-body > blockquote { max-width: var(--measure-prose); }
/* ⚠️ HEADINGS GET THE MEASURE IN PIXELS, NOT `ch` — because `ch` is FONT-RELATIVE
   and the headings are set in a different, much larger face. Measured on
   /wiki/systems/party-composition at 1440px:
       body copy   system-ui 16.5px   ->  74ch =  8.89px/ch =  658px
       h2          Cormorant  26px    ->  74ch = 12.40px/ch =  918px
   The SAME declaration produced a 260px difference, so every heading overhung the
   paragraphs beneath it and the column had FOUR different right edges (blockquote
   929, prose 989, h2 1248, h1 1331 — a 342px spread). That ragged edge is what
   `npm run responsive` had been reporting as STRANDED COLUMN across every wiki
   page, and it is the alignment defect Chris asked this sweep to find.
   --measure is authored for a PARAGRAPH (see the note above), so headings take
   --measure-prose: the SAME 74ch resolved once, in the body font, as a px value.
   Derived from the token rather than hardcoded, so changing the measure still
   moves both together. Tables, code and images stay full-width by design. */
.wiki-body > h1, .wiki-body > h2, .wiki-body > h3 { max-width: var(--measure-prose); }
/* The landing sets its own (wider) measure via .landing; when it's present, let
   the reading column widen to it rather than clip the cards to 74ch. */
/* ⚠️ THE LANDING USES THE SAME COLUMN AS A SYSTEM PAGE (Chris 2026-07-26: "wiki
   home needs same layout width and style as .../party-mechanics"). It was pinned
   at 760px while the system pages moved to --measure-wide, so wiki home read as a
   narrower, different site. */
.wiki-body:has(.landing) { max-width: var(--measure-wide); }

/* ---------- Typography ---------- */
.wiki-body h1 {
  font-family: var(--serif); font-weight: 500; letter-spacing: -.01em;
  font-size: clamp(30px, 4.4vw, 44px); line-height: 1.12;
  margin: 0 0 18px; color: var(--starlight);
}
.wiki-body h2 {
  font-family: var(--serif); font-weight: 500;
  font-size: 26px; line-height: 1.25; margin: 48px 0 14px; color: var(--starlight);
  padding-bottom: 9px; border-bottom: 1px solid var(--line);
}
.wiki-body h3 { font-family: var(--serif); font-weight: 500; font-size: 21px; margin: 32px 0 10px; color: var(--starlight); }
.wiki-body p { margin: 0 0 16px; color: var(--body); }
.wiki-body strong { color: var(--starlight); font-weight: 650; }
.wiki-body em { color: var(--body); }
/* The signature closing the wiki's opening line — serif italic in lantern. */
.wiki-body > h1 + p em:first-of-type {
  font-family: var(--serif); font-style: italic; color: var(--lantern); white-space: nowrap;
}
.wiki-body a { color: var(--blurple-lit); text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--blurple-lit) 45%, transparent); }
.wiki-body a:hover { color: var(--light-blurple); }
.wiki-body ul, .wiki-body ol { margin: 0 0 18px; padding-left: 22px; color: var(--body); }
.wiki-body li { margin-bottom: 7px; }
.wiki-body li::marker { color: var(--blurple-lit); }
.wiki-body hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }
/* ⚠️ INLINE CODE MUST BE ALLOWED TO BREAK (Chris 2026-07-26: "the table breaks
   mobile now"). The tables were a red herring — all three of them sit in
   `.tscroll` wrappers and scroll correctly. The document's 395px overflow came
   from a plain `<ul>` measuring 373px with overflow:visible, because inline
   `<code>` holding a file path (`scripts/combat/generate_comp_review.py`) has no
   space in it and mono type does not wrap at a slash by default. One unbreakable
   token in a bullet dragged the whole page sideways.
   `overflow-wrap:anywhere` lets a long path break mid-token rather than push the
   column; `word-break` is deliberately NOT used, since it would break ordinary
   prose words too. */
.wiki-body code {
  font-family: var(--mono); font-size: 0.87em;
  /* ⚠️ `break-word`, NOT `anywhere`. `anywhere` broke every chip mid-identifier —
     "GearScore" rendered as "GearS / core" on a phone (Chris 2026-07-26: "Piece
     is line breaking"). `break-word` only breaks a token that genuinely cannot
     fit on a line of its own, so a long PATH still wraps while a short class name
     stays whole. */
  overflow-wrap: break-word;
  background: rgba(136,148,247,.10); border: 1px solid var(--line-soft);
  padding: 1px 5px; border-radius: 5px; color: var(--light-blurple);
}
/* ⚠️ `overflow-x:auto` ALONE DOES NOT CONTAIN A CODE BLOCK (Chris 2026-07-26:
   "the table breaks mobile now" — the tables were part of it, but the widest
   thing on the page was a 475px ASCII diagram against a 349px column, and it
   dragged the whole DOCUMENT sideways to 395px).
   A `pre` is a block-level box whose width is content-driven, so with no cap it
   simply grows and there is nothing left to scroll. `max-width:100%` plus
   `min-width:0` gives the overflow rule something to bite on: the box stops at
   the column and the CONTENT scrolls inside it. Same fix the tables already had
   via their .tscroll wrapper. */
.wiki-body pre {
  background: var(--deep); border: 1px solid var(--line);
  border-radius: 10px; padding: 15px 17px; overflow-x: auto; margin: 0 0 20px;
  max-width: 100%; min-width: 0;
}
/* ⚠️ THE `code` CHILD IS WHAT ACTUALLY OVERFLOWED. Capping the `pre` contained
   the BOX, but Astro's highlighter emits `<code><span class="line">…` and those
   were still laying out at their natural 475px and pushing past the rim — the
   scroll box scrolled nothing because its content had already escaped.
   `display:block` + `min-width:max-content` makes the code a proper scrollable
   child: it keeps its intrinsic width INSIDE the pre, which is exactly what the
   parent's overflow-x needs to have something to scroll. */
.wiki-body pre code { background: none; border: 0; padding: 0; font-size: 13.5px; line-height: 1.6; color: var(--body);
  display: block; min-width: max-content; }

/* ---------- Blockquote = the status banner (living / preview) ---------- */
.wiki-body blockquote {
  margin: 0 0 24px; padding: 14px 18px;
  background: rgba(240,182,122,.08);
  border: 1px solid rgba(240,182,122,.24);
  border-left-width: 3px; border-radius: 9px;
  color: var(--body); font-size: 15px;
}
.wiki-body blockquote p { margin: 0 0 8px; }
.wiki-body blockquote p:last-child { margin: 0; }
.wiki-body blockquote strong { color: var(--lantern); }

/* ---------- Tables — the data surface ---------- */
.wiki-body .tscroll { overflow-x: auto; margin: 0 0 22px; }
.wiki-body table {
  width: 100%; border-collapse: collapse;
  font-size: 14.5px; background: var(--deep);
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
}
.wiki-body thead th {
  text-align: left; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--greyple);
  background: var(--field); padding: 10px 13px;
  border-bottom: 1px solid var(--line); white-space: nowrap; font-weight: 600;
}
.wiki-body tbody td {
  padding: 9px 13px; border-bottom: 1px solid var(--line-soft);
  color: var(--body); vertical-align: top;
}
.wiki-body tbody tr:last-child td { border-bottom: 0; }
/* ⚠️ NO ROW HOVER — a wiki table is not a list of clickable things. Chris
   2026-07-26: "you shouldn't be able to click … it highlights". A hover tint
   invites a click that does nothing, and paired with the focus ring the wrapper
   used to carry, a plain data row read as interactive. Rows are content. */

/* ⚠️ NO MOBILE CARD LAYOUT — TABLES STAY TABLES (Chris 2026-07-26, after trying
   it: "I wanna go back to the tables how they were … I don't like this new
   collapsed view, and I don't want it to fuck with desktop. It's harder to
   navigate because the name of a zone is not on the left where you can just look
   for what you're looking for. There's more to scroll down. If you're gonna look
   at big tables, you might have to do it on desktop.")
   The card layout removed the sideways swipe but cost more than it saved: it
   turned 19 rows into 19 tall blocks, and the zone name stopped being a scannable
   left-hand column. A wide reference table is a DESKTOP surface; on a phone the
   honest answer is a horizontal scroll inside its own box, which is what
   `.tscroll` already does. */


.wiki-body tbody td:first-child { color: var(--starlight); font-weight: 550; }

/* Link-only cells are navigation controls — WCAG 2.5.5 44px hit box. */
.wiki-body tbody td:has(> a:only-child),
.wiki-body tbody td:has(> strong:only-child > a:only-child) { padding: 0; }
.wiki-body tbody td:has(> strong:only-child > a:only-child) > strong { display: block; }
.wiki-body tbody td:has(> a:only-child) > a,
.wiki-body tbody td:has(> strong:only-child > a:only-child) > strong > a {
  display: flex; align-items: center; min-height: 44px; padding: 9px 13px;
}
.wiki-body tbody td code { font-size: 0.85em; }

/* ---------- The GENERATED bar ---------- */
.gen-bar {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--greyple);
  background: var(--field); border: 1px solid var(--line);
  border-bottom: 0; border-radius: 10px 10px 0 0;
  padding: 8px 13px; margin-top: 22px;
}
.gen-bar + .tscroll table { border-radius: 0 0 10px 10px; }
.gen-bar b { color: var(--lantern); font-weight: 600; }
.gen-bar .src { color: var(--greyple); opacity: 0.85; }
.gen-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--lantern); box-shadow: 0 0 7px 1px rgba(240,182,122,.6); flex: none;
}

/* ---------- The bug-detector panel ("What to look out for") ---------- */
.wiki-body h2#what-to-look-out-for + .tscroll table tbody td:first-child { color: var(--warn); }

/* ---------- Provenance footer ---------- */
.wiki-body > p > em:only-child { font-size: 13.5px; color: var(--greyple); }

/* ============================================================================
   THE CONDENSED LANDING — command overview blocks
   ----------------------------------------------------------------------------
   The wiki home only. A tight, top-to-bottom set of command sections in the
   homepage's rhythm, compressed so several fit one screen. Each block: an eyebrow
   command chip, a serif headline, a short blurb, a link to the detailed page.
   ========================================================================== */
.landing { max-width: 100%; margin-inline: auto; }

.landing-hero { padding: 8px 0 4px; }
.landing-hero h1 {
  font-family: var(--serif); font-weight: 500; letter-spacing: -.01em;
  font-size: clamp(34px, 6vw, 52px); line-height: 1.06; margin: 0 0 14px; color: var(--starlight);
}
.landing-hero .lead { font-size: clamp(17px, 2.4vw, 19px); line-height: 1.5; color: var(--body); margin: 0 0 6px; max-width: 60ch; }
/* The chronicle line sits under the lead, quieter — it is the CURRENT setting
   rather than part of what Everdream is (see the note in WikiHome.astro). */
.lead-sub { font-size: 15px !important; color: var(--greyple) !important;
  margin-top: 10px !important; }
.lead-sub strong { color: var(--body); font-weight: 600; }
.landing-hero .sig { font-family: var(--serif); font-style: italic; color: var(--lantern); }

/* The dev-flag banner, matching the pages' preview banner. */
.landing-note {
  margin: 22px 0 8px; padding: 12px 16px;
  background: rgba(240,182,122,.08); border: 1px solid rgba(240,182,122,.24);
  border-left-width: 3px; border-radius: 9px;
  color: var(--body); font-size: 14.5px;
}
.landing-note strong { color: var(--lantern); }
.landing-note code { font-family: var(--mono); font-size: .85em; color: var(--light-blurple);
  background: rgba(136,148,247,.10); border: 1px solid var(--line-soft); padding: 1px 5px; border-radius: 5px; }

.landing-section-head { margin: 44px 0 4px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--blurple-lit);
  display: flex; align-items: center; gap: 10px; }
.landing-section-head .rule { flex: 1; height: 1px; background: var(--line); }

/* The command card — the beat. */
.cmd-card {
  margin: 18px 0; padding: 22px 24px;
  background: linear-gradient(180deg, var(--field), var(--deep));
  border: 1px solid var(--line); border-radius: var(--radius);
  position: relative; overflow: hidden;
}
.cmd-card::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 50% at 0% 0%, rgba(139,148,247,.10), transparent 62%); }
.cmd-card > * { position: relative; }

.cmd-chip { display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 14px; font-weight: 600; letter-spacing: .01em;
  color: var(--light-blurple); background: rgba(88,101,242,.16);
  border: 1px solid rgba(136,148,247,.34); border-radius: 8px;
  padding: 5px 11px; margin: 0 0 12px; }
.cmd-card h3 { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.15;
  margin: 0 0 8px; color: var(--starlight); }
.cmd-card p { margin: 0 0 14px; color: var(--body); font-size: 16px; line-height: 1.6; }
.cmd-card p:last-of-type { margin-bottom: 0; }
.cmd-card .cmd-more { display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; /* WCAG 2.5.5 tap target — measured 25px on tablet */
  font-size: 14.5px; font-weight: 550; color: var(--blurple-lit); text-decoration: none; }
.cmd-card .cmd-more:hover { color: var(--light-blurple); }
.cmd-card .cmd-more .arr { transition: transform 140ms ease; }
.cmd-card .cmd-more:hover .arr { transform: translateX(3px); }

/* A row of two secondary commands (invite / join etc.) inside a card. */
.cmd-inline { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.cmd-inline code { font-family: var(--mono); font-size: 13px; color: var(--light-blurple);
  background: rgba(136,148,247,.10); border: 1px solid var(--line-soft);
  padding: 3px 8px; border-radius: 6px; }

/* The page index at the foot of the landing — grouped by manifest section. */
.landing-index { margin: 22px 0 0; display: grid; gap: 14px; }
/* Each index group gets card-like separation. On mobile the groups (Playing /
   Sim Parties / The World / The Sims) bled together — a plain gap read as one
   long list. Chris 2026-07-21: "it just looks like it's all bleeding together
   because there's no separation." A tinted panel + hairline per group restores
   the separation the command cards above give. */
.idx-group {
  padding: 18px 18px 20px;
  border: 1px solid rgba(136,148,247,0.14);
  border-radius: 14px;
  background: rgba(136,148,247,0.03);
}
/* ⭐ THE SECTION HEAD CARRIES AN ICON (Chris 2026-07-26: "we have some icons to
   the left of Playing for example … it doesn't read like I'm choosing from a
   menu"). A row of text headings reads as prose; a mark the eye can land on
   before reading turns the same list into a menu. */
.idx-head { display: flex; align-items: center; gap: 10px;
  font-family: var(--serif); font-weight: 500; font-size: 19px; color: var(--starlight); margin: 0 0 3px; }
.idx-icon { display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: none; border-radius: 9px;
  color: var(--blurple-lit); background: rgba(136,148,247,.12);
  border: 1px solid var(--line); }
.idx-icon svg { width: 17px; height: 17px; }
/* ⚠️ NO INDENT ON THE BLURB (Chris 2026-07-26: "the icon kinda throws the text
   off"). It was padded 40px to sit under the TITLE, which gave one card THREE
   left edges — measured at 375px: icon and links at 41, title and blurb at 81.
   Half the card was pushed right while the other half stayed left, and that
   mismatch is what reads as wrong.
   Everything now starts on one edge: the icon sits beside the title as a marker,
   and the blurb and links run full width beneath. One column, no stepping. */
.idx-blurb { padding-left: 0; }

/* On a phone the icon shrinks slightly and the gap tightens, so the title has
   room to breathe rather than wrapping early beside a large mark. */
@media (max-width: 560px) {
  .idx-head { gap: 9px; }
  .idx-icon { width: 26px; height: 26px; border-radius: 8px; }
  .idx-icon svg { width: 15px; height: 15px; }
  .idx-blurb { margin-top: 6px; }
  /* full-width link rows read as a list on a narrow card, instead of chips
     wrapping into a ragged two-row block */
  .idx-links { flex-direction: column; gap: 6px; }
  .idx-link { width: 100%; }
}

/* ⭐ THE PLAY ROW — the wiki's way out to actually playing. One quiet row, not a
   hero button (Chris 2026-07-26: "it doesn't have to be a flashy button like the
   home page"). It sits above the starter steps because it is for the reader who
   is already convinced; the steps are for the one still learning. */
/* ⚠️ NOT FULL WIDTH ON DESKTOP (Chris 2026-07-27: "the button is spanning full
   page width, looks weird on desktop"). At 1040px it stretched the whole reading
   column for two short strings, which reads as a banner rather than a control.
   `max-content` sizes it to its own text; it still goes full width on a phone,
   where a stretched row is the normal idiom. */
.play-row { display: inline-flex; align-items: center; gap: 14px; text-decoration: none;
  width: max-content; max-width: 100%;
  margin: 22px 0 4px; padding: 14px 18px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(136,148,247,.10), rgba(136,148,247,.05));
  border: 1px solid rgba(136,148,247,.28); }
.play-row:hover { border-color: rgba(136,148,247,.5);
  background: linear-gradient(180deg, rgba(136,148,247,.16), rgba(136,148,247,.08)); }
.play-t { font-weight: 600; color: var(--starlight); font-size: 15.5px; flex: none; }
.play-d { color: var(--greyple); font-size: 14px; min-width: 0; }
.play-arr { margin-left: auto; color: var(--blurple-lit); font-size: 17px; flex: none; }
/* ⚠️ THE ARROW STAYS IN NORMAL FLOW (Chris 2026-07-26: "the arrow is touching the
   horizontal line" on mobile).
   It was `position:absolute; right:18px` — but `.play-row` was never positioned,
   so the arrow resolved against the PAGE and sat outside the row's right edge at
   every mobile width (measured: escapesRight true at 320-560px, and it collided
   with the section rule below).
   The absolute positioning bought nothing: when the row wraps, the title and the
   arrow simply share the first line and the description takes the second. Keeping
   the arrow in flow with `margin-left:auto` does that for free and cannot escape
   the box. */
@media (max-width: 560px) {
  /* ⚠️ ORDER MATTERS HERE. The arrow must come BEFORE the description in flex
     order so it shares the first line with the title; left after it, the arrow
     was pushed onto a third line of its own and read as stranded. `order` moves
     it visually without touching the DOM order a screen reader follows. */
  .play-row { display: flex; width: auto; flex-wrap: wrap; gap: 2px 12px; }
  .play-t { flex: 1 1 auto; order: 1; }
  .play-arr { order: 2; margin-left: auto; }
  .play-d { flex-basis: 100%; order: 3; }
}

/* ⭐ THE STARTER STRIP — one row, four steps, replacing the four tall command
   cards that used to push the real index below the fold (Chris 2026-07-26: "more
   of an index, less of a 'commands are here' … maybe we need a new player starter
   guide overview"). Each step is a SIGNPOST into the page that owns it, never a
   restatement of it. */
.starter { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px; margin: 18px 0 4px; }
.step { display: grid; grid-template-columns: 26px 1fr; grid-template-rows: auto auto;
  gap: 2px 10px; align-items: baseline; text-decoration: none;
  padding: 14px 15px; border-radius: 12px;
  background: var(--deep); border: 1px solid var(--line); }
.step:hover { border-color: rgba(136,148,247,.38); background: rgba(136,148,247,.06); }
.step .n { grid-row: 1 / span 2; align-self: start; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  font-family: var(--mono); font-size: 11px; color: var(--blurple-lit);
  background: rgba(136,148,247,.14); border: 1px solid var(--line); }
.step .t { font-weight: 600; color: var(--starlight); font-size: 15px; }
.step .d { color: var(--greyple); font-size: 13.5px; line-height: 1.45; }
.step code { font-family: var(--mono); font-size: .92em; color: var(--ember);
  background: rgba(240,182,122,.09); border: 1px solid rgba(240,182,122,.16);
  border-radius: 4px; padding: 0 4px; }
.idx-blurb { margin: 0 0 12px; color: var(--greyple); font-size: 14.5px; line-height: 1.5; }
.idx-links { display: flex; flex-wrap: wrap; gap: 8px; }
.idx-link { display: inline-flex; align-items: center; min-height: 44px; /* WCAG 2.5.5 */
  padding: 7px 13px; border-radius: 9px; font-size: 14.5px; font-weight: 550;
  color: var(--body); text-decoration: none;
  background: var(--deep); border: 1px solid var(--line); }
.idx-link:hover { color: var(--light-blurple); border-color: rgba(136,148,247,.38);
  background: rgba(136,148,247,.06); }

@media (max-width: 720px) {
  .landing { max-width: none; }
  .cmd-card { padding: 18px 18px; }
  .cmd-card h3 { font-size: 21px; }
}

/* ---------- Back-to-site link at the foot of a page ---------- */
.wiki-back {
  display: inline-flex; align-items: flex-end; min-height: 44px;
  margin-top: 30px; padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  font-size: 13.5px; color: var(--greyple); text-decoration: none;
}
.wiki-back:hover { color: var(--light-blurple); }