/* Realm skin for the player site (2026-10-26). Loaded after site.css; it re-points site.css's tokens at the launcher's
   palette and dresses elements in the accepted UI kit's pieces. Source of truth for the tokens and the 9-slice classes:
   launcher/renderer/skin-realm.css (content/design/ui/LAUNCHER-SKIN.md). The kit PNGs are byte copies of
   launcher/assets/kit/*.png, copied into site/dist/assets/kit/ by tools/site.mjs at build time; the title art is
   launcher/assets/title-backdrop.png -> site/dist/assets/title-backdrop.png. Every piece is a border-image at one kit
   pixel = 2 CSS px (--rk-px), pixelated, never tinted; no gradients, glows or outlines added to kit pieces.
   Meaning colours are NOT re-pointed: rarity (--r-*), bag borders (--bag), origin labels, status badges keep site.css's. */
:root {
  /* palette (kit v2 names; same values as launcher/renderer/skin-realm.css) */
  --rk-ink: #130f16;
  --rk-plum: #211820;
  --rk-plum-raised: #2c202b;
  --rk-plum-pressed: #19131c;
  --rk-plum-selected: #263537;
  --rk-plum-edge: #45313e;
  --rk-bronze-dark: #765746;
  --rk-bronze: #b29679;
  --rk-gold: #d9bc86;
  --rk-ivory: #eee4d0;
  --rk-muted: #b9aebc;
  --rk-disabled: #68616c;
  --rk-cobalt: #498cce;
  --rk-emerald: #45a895;
  --rk-hp: #dc5665;
  --rk-xp: #d3b35d;
  --rk-fame: #ff9900;
  --rk-bg: var(--rk-ink);
  --rk-text: var(--rk-ivory);
  --rk-dim: var(--rk-muted);
  --rk-faint: #8f8494;
  --rk-accent: var(--rk-gold);
  --rk-good: var(--rk-emerald);
  --rk-warn: var(--rk-xp);
  --rk-bad: var(--rk-hp);
  --rk-backdrop-dim: rgba(19, 15, 22, .84);
  --rk-backdrop-veil: rgba(19, 15, 22, .9);
  --rk-px: 2px;
  --rk-sans: "Segoe UI", Tahoma, system-ui, Arial, sans-serif;
  --rk-mono: "Cascadia Mono", Consolas, ui-monospace, monospace;
  --rk-text-shadow: 0 2px 0 #000;
  --rk-body: 14px;
  --rk-small: 13px;
  --rk-label: 12px;

  /* site.css tokens re-pointed at the kit palette (layout and meaning colours untouched) */
  --bg: var(--rk-ink);
  --bg-2: var(--rk-plum-pressed);
  --line: var(--rk-plum-edge);
  --text: var(--rk-ivory);
  --dim: var(--rk-muted);
  --faint: var(--rk-faint);
  --accent: var(--rk-gold);
  --mono: var(--rk-mono);
  --sans: var(--rk-sans);
  --ours: #ff6a2b;              /* the OURS origin label keeps its ember: it is a meaning colour, not the accent */
}

/* ---------- base ---------- */
html, body { background: var(--rk-ink); }
body { color: var(--rk-text); font-family: var(--rk-sans); }
a { text-decoration-color: var(--rk-bronze-dark); }
a:hover { color: var(--rk-gold); text-decoration-color: var(--rk-gold); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--rk-ink); }
::-webkit-scrollbar-thumb { background: var(--rk-plum-edge); border: 3px solid var(--rk-ink); }
::-webkit-scrollbar-thumb:hover { background: var(--rk-bronze-dark); }
::selection { background: var(--rk-plum-selected); color: var(--rk-ivory); }
kbd { border-color: var(--rk-plum-edge); color: var(--rk-muted); border-radius: 0; background: var(--rk-plum); }

/* headings: bold, gold, a hard one-kit-pixel black drop (Realm's text edge); text only */
h1, h2 { font-weight: 800; color: var(--rk-gold); letter-spacing: .1em; text-shadow: var(--rk-text-shadow); }
h1 { font-size: clamp(34px, 5.4vw, 60px); text-shadow: 0 3px 0 #000; }
h2 { font-size: clamp(24px, 3.2vw, 34px); }
h3 { font-weight: 700; color: var(--rk-ivory); text-shadow: var(--rk-text-shadow); }
.eyebrow { color: var(--rk-gold); font-weight: 700; font-size: var(--rk-label); letter-spacing: .3em; text-shadow: var(--rk-text-shadow); }
.eyebrow::before { content: none; }
.lede { color: var(--rk-muted); }
h4 { color: var(--rk-gold); font-weight: 700; text-shadow: var(--rk-text-shadow); }

/* ---------- kit pieces as classes (same as the launcher's) ---------- */
/* plain panel: panel.png 32x32, borders 4 */
.panel-kit {
  border-style: solid; border-width: calc(4 * var(--rk-px));
  border-image: url(kit/panel.png) 4 fill / calc(4 * var(--rk-px)) stretch;
  image-rendering: pixelated; background: none;
}
/* ornate panel: panel-ornament-cobalt.png 32x32, borders 8 (gem corners fixed, edges/centre stretch) */
.panel-ornate {
  border-style: solid; border-width: calc(8 * var(--rk-px));
  border-image: url(kit/panel-ornament-cobalt.png) 8 fill / calc(8 * var(--rk-px)) stretch;
  image-rendering: pixelated; background: none;
}
.panel-ornate.emerald { border-image-source: url(kit/panel-ornament-emerald.png); }
/* ornate frame without the centre fill (the art shows through) */
.frame-ornate {
  border-style: solid; border-width: calc(8 * var(--rk-px));
  border-image: url(kit/panel-ornament-cobalt.png) 8 / calc(8 * var(--rk-px)) stretch;
  image-rendering: pixelated;
}
/* button: control-*.png 32x16, borders 4; five states, never tinted */
.btn-kit, .btn, .nav a, .menu-btn {
  border-style: solid; border-width: calc(4 * var(--rk-px));
  border-image: url(kit/control-normal.png) 4 fill / calc(4 * var(--rk-px)) stretch;
  image-rendering: pixelated; background: none; border-radius: 0;
  color: var(--rk-text); font-family: var(--rk-sans); font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  text-shadow: var(--rk-text-shadow); text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; outline: none;
}
.btn-kit:hover, .btn-kit:focus-visible, .btn:hover, .btn:focus-visible, .nav a:hover, .nav a:focus-visible, .menu-btn:hover, .menu-btn:focus-visible {
  border-image-source: url(kit/control-hover.png); color: var(--rk-gold); background: none; filter: none; }
.btn-kit:active, .btn:active, .nav a:active, .menu-btn:active { border-image-source: url(kit/control-pressed.png); }
.btn-kit.on, .btn-kit[aria-selected=true], .btn-kit[aria-pressed=true], .nav a[aria-current="page"], .menu-btn[aria-expanded=true] {
  border-image-source: url(kit/control-selected.png); color: var(--rk-ivory); }
.btn-kit:disabled, .btn[aria-disabled="true"] { border-image-source: url(kit/control-disabled.png); color: var(--rk-disabled); text-shadow: none; opacity: 1; }
/* call to action: the same pieces, a larger gold label (the launcher's SIGN IN / PLAY) */
.btn.primary, .btn-kit.cta-kit { color: var(--rk-gold); background: none; font-size: 15px; letter-spacing: .22em; }
.btn.primary:hover, .btn-kit.cta-kit:hover { color: var(--rk-ivory); }
.btn { height: calc(24 * var(--rk-px)); padding: 0 22px; font-size: var(--rk-label); }
/* well: stat-row.png 16x16, borders 2 (the kit's recessed row) */
.well-kit {
  border-style: solid; border-width: calc(2 * var(--rk-px));
  border-image: url(kit/stat-row.png) 2 fill / calc(2 * var(--rk-px)) stretch;
  image-rendering: pixelated; background: none;
}
.pill-kit {
  border-style: solid; border-width: calc(2 * var(--rk-px));
  border-image: url(kit/stat-row.png) 2 fill / calc(2 * var(--rk-px)) stretch;
  image-rendering: pixelated; background: none;
  display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 10px;
  font-size: var(--rk-label); letter-spacing: .14em; font-weight: 700; color: var(--rk-dim); text-shadow: var(--rk-text-shadow);
}
/* text field: control-square-pressed.png 12x12 borders 2, control-square-hover.png when focused */
.field-kit, .search input {
  border-style: solid; border-width: calc(2 * var(--rk-px));
  border-image: url(kit/control-square-pressed.png) 2 fill / calc(2 * var(--rk-px)) stretch;
  image-rendering: pixelated; background: none !important; color: var(--rk-ivory); border-radius: 0;
}
.field-kit:focus, .search input:focus { border-image-source: url(kit/control-square-hover.png); outline: none; }
.field-kit::placeholder, .search input::placeholder { color: var(--rk-faint); }
/* title band: title-band.png 32x16 borders L8 B3 R8 T3 (cobalt gems on the caps) */
.band-kit {
  border-style: solid; border-width: calc(3 * var(--rk-px)) calc(8 * var(--rk-px));
  border-image: url(kit/title-band.png) 3 8 fill / calc(3 * var(--rk-px)) calc(8 * var(--rk-px)) stretch;
  image-rendering: pixelated; background: none;
  display: flex; align-items: center; justify-content: center; min-height: calc(16 * var(--rk-px));
  color: var(--rk-gold); font-weight: 700; letter-spacing: .24em; text-transform: uppercase; text-shadow: var(--rk-text-shadow);
}
/* divider: divider.png 24x5 borders L4 B1 R4 T1 */
.divider-kit {
  height: calc(5 * var(--rk-px)); border-style: solid; border-width: var(--rk-px) calc(4 * var(--rk-px));
  border-image: url(kit/divider.png) 1 4 fill / var(--rk-px) calc(4 * var(--rk-px)) stretch;
  image-rendering: pixelated; background: none;
}
/* bar: bar-boss-frame.png 200x6 border 1 as the track; the fill is a kit strip */
.bar-kit {
  position: relative; display: block; height: calc(6 * var(--rk-px)); overflow: hidden;
  border-style: solid; border-width: var(--rk-px);
  border-image: url(kit/bar-boss-frame.png) 1 fill / var(--rk-px) stretch;
  image-rendering: pixelated; background: none;
}
.bar-kit > b, .bar-kit > span {
  position: absolute; top: 0; bottom: 0; left: 0; width: 0;
  background: url(kit/bar-xp-skin-fill.png) 0 0 / 100% 100% no-repeat; image-rendering: pixelated;
}

/* ---------- header: plum bar, bronze rule, nav as kit tabs ---------- */
.top { background: var(--rk-plum); backdrop-filter: none; border-bottom: 0; padding: 12px 24px calc(5 * var(--rk-px) + 12px); gap: 16px; }
.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(5 * var(--rk-px)); box-sizing: border-box;
  border-style: solid; border-width: var(--rk-px) calc(4 * var(--rk-px));
  border-image: url(kit/divider.png) 1 4 fill / var(--rk-px) calc(4 * var(--rk-px)) stretch; image-rendering: pixelated; }
.brand { gap: 10px; text-shadow: var(--rk-text-shadow); }
.brand-mark { font-weight: 800; font-size: 20px; letter-spacing: .2em; color: var(--rk-gold); }
.brand-sub { color: var(--rk-ivory); font-weight: 700; font-size: 11px; letter-spacing: .32em; }
.nav { gap: 4px; align-items: center; }
.nav a { height: calc(16 * var(--rk-px)); padding: 0 6px; font-size: 11px; letter-spacing: .08em; color: var(--rk-muted); }
.search input { height: calc(16 * var(--rk-px)); width: 160px; padding: 0 8px; font: var(--rk-small) var(--rk-mono); }

/* ---------- footer: plum, bronze rule on top ---------- */
.foot { position: relative; border-top: 0; background: var(--rk-plum); color: var(--rk-faint); padding-top: calc(5 * var(--rk-px) + 24px); }
.foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(5 * var(--rk-px)); box-sizing: border-box;
  border-style: solid; border-width: var(--rk-px) calc(4 * var(--rk-px));
  border-image: url(kit/divider.png) 1 4 fill / var(--rk-px) calc(4 * var(--rk-px)) stretch; image-rendering: pixelated; }
.foot a { color: var(--rk-gold); }

/* ---------- Nexus (home): the title crest as the hero ---------- */
/* The home page has the same plain page background as every other page (Sloan 2026-10-26: the painting behind the page
   repeated the wordmark - "maybe just not one in the background"). The crest is a window onto the title painting at
   exactly half size (1448x1086 -> 724x543) showing horns to wordmark (x 52-672, y 65-445 of the half-size image), framed
   by the ornate kit panel without its centre fill; a painting, so smoothed, not kit pixels. On a narrow screen the
   window scales down (percent background geometry). */
body[data-section="nexus"] main { padding-top: 32px; }
.nexus-hero { position: relative; margin: 0 0 72px; text-align: center; }
.crest-row { display: flex; justify-content: center; align-items: flex-end; gap: 24px; }
/* Rotating Nexus scene (Sloan, 2026-11-05; replaces the inherited key art). brand.js picks one of three per page load
   (<html data-nexus-bg>, never the one the last load showed) and sets --bgpx = CSS px of one art pixel at a whole number of
   device px (k = ceil(width / 480)). Native 480x200 art, an 8-frame strip, 120 ms a frame, pixelated. The element lives in
   the Nexus page body and sits under the header; the soft navigation swaps <main> only, so the pick survives every swap. */
body[data-section="nexus"] { overflow-x: clip; }
.nexus-hero > :not(.nexus-bg) { position: relative; }   /* a positioned layer paints above the plain hero text, so the scene goes first and the rest is lifted over it */
.nexus-bg { position: absolute; top: -32px; left: 50%; margin-left: calc(-240 * var(--bgpx, 4px)); width: calc(480 * var(--bgpx, 4px)); height: calc(120 * var(--bgpx, 4px));
  -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent);
  image-rendering: pixelated; background-repeat: no-repeat; background-position: 0 0; background-size: calc(3840 * var(--bgpx, 4px)) calc(200 * var(--bgpx, 4px));
  animation: nexus-bg-turn .96s steps(8) infinite; pointer-events: none; }
html[data-nexus-bg="rift"] .nexus-bg { background-image: url(backgrounds/rift-wiki.png); }
html[data-nexus-bg="dusk"] .nexus-bg { background-image: url(backgrounds/dusk-wiki.png); }
html[data-nexus-bg="crew"] .nexus-bg { background-image: url(backgrounds/crew-wiki.png); }
@keyframes nexus-bg-turn { to { background-position-x: calc(-3840 * var(--bgpx, 4px)); } }
@media (prefers-reduced-motion: reduce) { .nexus-bg { animation: none; } }
.flank { display: none; }   /* the boss sprites beside the logo are gone (they sat on the busiest part of every scene) */
.flank { display: flex; align-items: flex-end; gap: 4px; padding-bottom: 14px; }
.flank img { width: 128px; height: 128px; image-rendering: pixelated; }
.nexus-hero .eyebrow { margin: 22px 0 10px; }
.nexus-hero .lede { margin: 0 auto; max-width: 760px; color: var(--rk-ivory); text-shadow: var(--rk-text-shadow); }
.nexus-hero .pitch-origin { margin: 14px auto 0; display: inline-block; text-align: left; border-left: var(--rk-px) solid var(--rk-gold); color: var(--rk-muted); }
.nexus-hero .buttons { justify-content: center; margin: 24px 0 16px; }
.nexus-hero .btn.primary { height: calc(28 * var(--rk-px)); padding: 0 34px; }
/* Sloan 2026-11-05: the scene must end where the hero ends (the next section starts on the plain page, never under the
   art) and the hero text needs a dark backing to read on the bright scenes. The hero is at least as tall as the scene. */
.nexus-hero { min-height: calc(120 * var(--bgpx, 4px) - 32px); margin-bottom: 40px; }
.nexus-hero .eyebrow, .nexus-hero .lede, .nexus-hero .pitch-origin, .nexus-hero .status-line {
  background: rgba(12, 9, 16, .82); padding: 8px 14px; border-radius: 4px; box-shadow: 0 0 0 1px rgba(255,255,255,.06); }
.nexus-hero .eyebrow { display: inline-block; }
.nexus-hero .lede { display: block; width: fit-content; }
.nexus-hero .status-line { display: inline-flex; }

.nexus-hero .btn:not(.primary) { height: calc(28 * var(--rk-px)); padding: 0 28px; font-size: 13px; }
.status-line.pill-kit { font-family: var(--rk-mono); font-weight: 400; letter-spacing: .02em; color: var(--rk-muted); }
.status-line .dot { width: var(--rk-px); height: var(--rk-px); box-sizing: content-box; border: var(--rk-px) solid var(--rk-faint); border-radius: 0; background: var(--rk-faint); }
@media (max-width: 1440px) { .flank img + img { display: none; } }
@media (max-width: 980px) { .flank { display: none; } }

/* Nexus counts, bag strip, badge legend, patch note: kit panels and wells */
.counts { gap: 12px; background: none; border: 0; }
.counts .count { border-style: solid; border-width: calc(8 * var(--rk-px));
  border-image: url(kit/panel-ornament-cobalt.png) 8 fill / calc(8 * var(--rk-px)) stretch; image-rendering: pixelated; background: none; padding: 12px 14px; }
.count .n { font-weight: 700; color: var(--rk-ivory); text-shadow: 0 3px 0 #000; }
.count .l { color: var(--rk-gold); font-weight: 700; text-shadow: var(--rk-text-shadow); }
.count .s { color: var(--rk-muted); }
.bags { gap: 8px; background: none; border: 0; }
.bags .bag { border-style: solid; border-width: calc(4 * var(--rk-px));
  border-image: url(kit/panel.png) 4 fill / calc(4 * var(--rk-px)) stretch; image-rendering: pixelated; background: none;
  position: relative; }
/* the bag colour (meaning, see SITE.md) as a 2-kit-px strip along the panel's inner top edge */
.bags .bag::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(2 * var(--rk-px)); background: var(--bag, transparent); }
.bag .t { color: var(--rk-ivory); font-weight: 700; letter-spacing: .1em; text-shadow: var(--rk-text-shadow); }
/* five bags in one row; the label may shrink but never runs past the panel border (Sloan 2026-11-05: LEGENDARY did) */
.bags { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.bags .bag { min-width: 0; }
.bag .t { min-width: 0; letter-spacing: .06em; overflow-wrap: anywhere; }
.bag .t img, .bag .t .sw { flex: none; }
.status-line[data-state="up"] .dot { background: #5bd36a; border-color: #2f8a3a; }
.status-line[data-state="down"] .dot { background: #d74a3a; border-color: #8a2a20; }
.bag .d { color: var(--rk-muted); }
.legend div { border-left: var(--rk-px) solid var(--rk-plum-edge); color: var(--rk-muted); }
.patch { border-left: 0; padding: 14px 18px; border-style: solid; border-width: calc(4 * var(--rk-px));
  border-image: url(kit/panel.png) 4 fill / calc(4 * var(--rk-px)) stretch; image-rendering: pixelated; }

@media (max-width: 860px) {
  .nexus-hero { margin-bottom: 56px; }
  body[data-section="nexus"] main { padding-top: 20px; }
  .nexus-bg { top: -20px; }
}

/* ================= S2: the data pages (Vault, Loot, Realm + dungeon pages, Bosses) =================
   Structure untouched: tables stay tables, chips stay chips. Frames become kit pieces; the bag colour (chip and icon
   borders, --bag) and the rarity colours (--r-*) are left exactly as site.css draws them. */

/* plain kit panel: cards, item cards, signature-drop cards, open loot tables, filter bar, patch notes */
.card, .item, .sig, .filters, .srcb, .stub {
  border-style: solid; border-width: calc(4 * var(--rk-px)); border-color: transparent;
  border-image: url(kit/panel.png) 4 fill / calc(4 * var(--rk-px)) stretch; image-rendering: pixelated;
  background: none; border-radius: 0;
}
.card { transition: none; }
.card:hover, .sig:hover { border-color: transparent; }
.card:hover h3, .sig:hover .wn { color: var(--rk-gold); }
.card > img { border-bottom: var(--rk-px) solid var(--rk-plum-edge); margin: -20px -20px 16px; }
.card .meta, .item .meta { color: var(--rk-muted); }
.card p { color: var(--rk-muted); }
.card .portrait { background: var(--rk-plum-pressed); border-bottom: var(--rk-px) solid var(--rk-plum-edge); }
/* the target of a #link (a Vault card, a loot block): a one-kit-pixel gold outline (no kit piece fits without changing
   the border width, which would jump the layout) */
.item:target, details.src:target > summary, .card:target { border-color: transparent; outline: var(--rk-px) solid var(--rk-gold); outline-offset: var(--rk-px); }
.stub { color: var(--rk-muted); }

/* recessed kit wells: icon boxes, portraits, facts, the count line */
.item .ic, .sig .por, .por-l { background: var(--rk-ink); border-radius: 0; }
.item .ic { border: var(--rk-px) solid var(--bag, var(--rk-plum-edge)); }   /* bag colour kept: it is the bag */
.sig .por, .por-l {
  border-style: solid; border-width: calc(2 * var(--rk-px));
  border-image: url(kit/stat-row.png) 2 fill / calc(2 * var(--rk-px)) stretch; image-rendering: pixelated; }
.facts { gap: 8px; background: none; border: 0; }
.fact { border-style: solid; border-width: calc(2 * var(--rk-px));
  border-image: url(kit/stat-row.png) 2 fill / calc(2 * var(--rk-px)) stretch; image-rendering: pixelated; background: none; }
.fact .k { color: var(--rk-gold); font-weight: 700; text-shadow: var(--rk-text-shadow); }
.fact .v { color: var(--rk-ivory); }
.search-count { color: var(--rk-gold); }

/* item card text */
.item h3 { font-weight: 700; }
.item .bn { color: var(--rk-emerald); }
.item .ds { color: var(--rk-faint); }
.item .dr .k, .lbl { color: var(--rk-gold); font-weight: 700; }
.item summary { color: var(--rk-muted); }

/* chips: kit-flat corners on the same bag-coloured border */
.chip { border-radius: 0; background: var(--rk-plum-pressed); }
a.chip:hover { background: var(--rk-plum-raised); }
a.chip:hover .cn { color: var(--rk-gold); }
.chip .ci { background: var(--rk-ink); }
.chip .co { color: var(--rk-faint); }
.chip.src-chip { --bag: var(--rk-plum-edge); }

/* tables: a plum head row with gold labels, plum-edge rules */
table { border-collapse: separate; border-spacing: 0; }
th { background: var(--rk-plum); color: var(--rk-gold); font-weight: 700; text-shadow: var(--rk-text-shadow); border-bottom: var(--rk-px) solid var(--rk-bronze-dark); }
td { border-bottom: 1px solid var(--rk-plum-edge); }
tr:hover td { background: var(--rk-plum); }

/* loot source blocks: <details> whose summary is a kit bar (control pieces: normal / hover / selected when open) */
details.src { border: 0; background: none; margin: 8px 0; }
details.src[open] { border: 0; }
details.src > summary {
  border-style: solid; border-width: calc(4 * var(--rk-px));
  border-image: url(kit/control-normal.png) 4 fill / calc(4 * var(--rk-px)) stretch; image-rendering: pixelated;
  padding: 4px 10px; min-height: calc(20 * var(--rk-px)); }
details.src > summary:hover { border-image-source: url(kit/control-hover.png); }
details.src[open] > summary { border-image-source: url(kit/control-selected.png); }
details.src > summary::before { color: var(--rk-gold); font-weight: 700; }
details.src > summary .nm { font-weight: 700; text-shadow: var(--rk-text-shadow); }
.srcb { padding: 10px 14px 12px; margin-top: 2px; }
/* every other <details> summary on the data pages (Vault "drops from" folds, unused groups, Muster/Guides folds) */
main details:not(.src) > summary { color: var(--rk-gold); }

/* headings that group the lists */
.band-head { border-bottom: 0; padding: 6px 18px; margin: 48px 0 16px;
  border-style: solid; border-width: calc(3 * var(--rk-px)) calc(8 * var(--rk-px));
  border-image: url(kit/title-band.png) 3 8 fill / calc(3 * var(--rk-px)) calc(8 * var(--rk-px)) stretch; image-rendering: pixelated; }
.band-head h3 { color: var(--rk-gold); letter-spacing: .14em; }
.band-head .r { color: var(--rk-muted); }
.osec { border-top: 0; position: relative; padding-top: calc(5 * var(--rk-px) + 28px); }
.osec::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(5 * var(--rk-px)); box-sizing: border-box;
  border-style: solid; border-width: var(--rk-px) calc(4 * var(--rk-px));
  border-image: url(kit/divider.png) 1 4 fill / var(--rk-px) calc(4 * var(--rk-px)) stretch; image-rendering: pixelated; }
.place-h a { color: var(--rk-ivory); }
.place-h a:hover span { color: var(--rk-gold); }
.crumbs, .crumbs a { color: var(--rk-muted); }

/* filters and toggles: kit fields and kit buttons */
.flt { color: var(--rk-gold); font-weight: 700; text-shadow: var(--rk-text-shadow); }
.flt select {
  border-style: solid; border-width: calc(2 * var(--rk-px)); border-radius: 0;
  border-image: url(kit/control-square-pressed.png) 2 fill / calc(2 * var(--rk-px)) stretch; image-rendering: pixelated;
  background: var(--rk-plum-pressed); color: var(--rk-ivory); font-weight: 400; text-shadow: none; height: calc(16 * var(--rk-px)); }
/* text centred in the kit frame: Chrome's own menulist ignores padding/line-height and set "All" high and left, so the
   native look is switched off (appearance: none), the text gets the launcher field's 10-px left inset and a line box the
   height of the frame's inside (32 - 2 x 4 = 24 px), and the arrow is drawn back as a 5x3-kit-pixel gold triangle
   (10x6 CSS px, crisp) inside the right inset, so it cannot be clipped */
.flt select {
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
  padding: 0 30px 0 10px; line-height: 24px; font: 400 14px/24px var(--rk-sans);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' shape-rendering='crispEdges'%3E%3Cpath fill='%23d9bc86' d='M0 0h10v2H0zM2 2h6v2H2zM4 4h2v2H4z'/%3E%3C/svg%3E") right 10px center / 10px 6px no-repeat var(--rk-plum-pressed);
}
.flt select option { background: var(--rk-plum); color: var(--rk-ivory); }
.search input { box-sizing: border-box; line-height: 24px; padding: 0 10px; }
.flt select:focus { border-image-source: url(kit/control-square-hover.png); outline: none; }
.flt.chk input { accent-color: var(--rk-emerald); }
.otoggle .k { color: var(--rk-gold); font-weight: 700; }
.otoggle button {
  border-style: solid; border-width: calc(4 * var(--rk-px)); border-radius: 0;
  border-image: url(kit/control-normal.png) 4 fill / calc(4 * var(--rk-px)) stretch; image-rendering: pixelated;
  background: none; color: var(--rk-muted); font-weight: 700; text-shadow: var(--rk-text-shadow); height: calc(16 * var(--rk-px)); padding: 0 10px; }
.otoggle button:hover { border-image-source: url(kit/control-hover.png); color: var(--rk-gold); }
.otoggle button[aria-pressed="true"] { border-image-source: url(kit/control-selected.png); color: var(--rk-ivory); }
.copyid { border-radius: 0; border-color: var(--rk-plum-edge); color: var(--rk-muted); background: var(--rk-plum-pressed); }
.copyid:hover { color: var(--rk-gold); border-color: var(--rk-bronze-dark); }

/* boss pages: captures and clips in a kit frame, phases on a gold rule */
img.capture { border-style: solid; border-width: calc(4 * var(--rk-px));
  border-image: url(kit/panel.png) 4 / calc(4 * var(--rk-px)) stretch; image-rendering: pixelated; }
.phase { border-left: var(--rk-px) solid var(--rk-gold); }
.phase .hp { color: var(--rk-muted); }
.phase blockquote { color: var(--rk-xp); }
.phase ul { color: var(--rk-muted); }
.phase .clip { border-style: solid; border-width: calc(4 * var(--rk-px));
  border-image: url(kit/panel.png) 4 / calc(4 * var(--rk-px)) stretch; image-rendering: pixelated; }
.pitch-origin { border-left-color: var(--rk-gold); }
/* meaning labels are flat colour blocks: no inherited text drop (it muddies dark text on a coloured badge) */
.rbadge, .origin, .badge, .nodrop, .cmark, .remade, .role { text-shadow: none; }
.flt select { letter-spacing: 0; text-transform: none; }
.rarity-sec { margin-bottom: 40px; }

/* rarity mark = the bag that rarity drops in (Sloan 2026-10-26), 16 px = 2x the 8-px bag cell (img/bags/bag-N.png are the cells at
   x4, so 16 px samples every second pixel: still whole kit pixels), pixelated, the rarity in the tooltip. Unique / Heroic / Galactic:
   white bag 6; Legendary: bag 10; Artifact: orange bag 8; Primal: bag 11; Galactic adds a small "G". Uncommon has no mark. */
.rbag { display: inline-block; position: relative; width: 16px; height: 16px; margin-left: 6px; vertical-align: -2px;
  background: center / 16px 16px no-repeat; image-rendering: pixelated; }
.rbag.sm { margin-left: 4px; }
.rbag-unique, .rbag-heroic, .rbag-galactic { background-image: url(../img/bags/bag-6.png); }
.rbag-legendary { background-image: url(../img/bags/bag-10.png); }
.rbag-artifact { background-image: url(../img/bags/bag-8.png); }
.rbag-primal { background-image: url(../img/bags/bag-11.png); }
.rbag-galactic::after { content: "G"; position: absolute; right: -4px; bottom: -3px; font: 700 9px/1 var(--rk-mono); color: var(--r-galactic); text-shadow: 0 1px 0 #000; }
/* boss pages: the warning above the phase clips (a kit well) */
.clip-warn { display: inline-block; margin: 0 0 10px; padding: 8px 14px; color: var(--rk-xp); font-size: var(--rk-small); text-shadow: var(--rk-text-shadow); }
.rword { display: inline-flex; align-items: center; gap: 6px; }
.rword .rbag { margin-left: 0; }
.rword b { font-weight: 700; }
/* Primal names: the Primal bag's red (BAG 11 #e10006, the Flash bag legend), not orange; orange is Artifact's alone */
:root { --r-primal: #e10006; }   /* the Vault's rarity legend (was class origin-sec, which now only marks origin UI) */
/* the field piece's centre is exactly --rk-plum-pressed (#19131c), so the select draws the frame without the centre fill
   (a filled border-image paints over the background, hiding the arrow) and the background supplies the same colour */
.flt select { border-image: url(kit/control-square-pressed.png) 2 / calc(2 * var(--rk-px)) stretch; }
.flt select:focus { border-image-source: url(kit/control-square-hover.png); }

/* ================= S3: Muster, Progression, Guides, Unassigned; the phone header ================= */
/* Progression XP chart: each bar is the kit bar (bar-boss-frame track, bar-xp-skin-fill strip), 6 kit px tall */
.cbar { height: calc(6 * var(--rk-px)); background: none; box-sizing: border-box;
  border-style: solid; border-width: var(--rk-px);
  border-image: url(kit/bar-boss-frame.png) 1 fill / var(--rk-px) stretch; image-rendering: pixelated; }
.cbar span { background: url(kit/bar-xp-skin-fill.png) 0 0 / 100% 100% no-repeat; image-rendering: pixelated; }
.crow.head .cbar { border: 0; border-image: none; height: auto; }
.crow .cl { color: var(--rk-muted); }
.crow .cm { color: var(--rk-xp); }
/* Muster Board: roles keep their meaning colours, square corners; stars and threat pips in kit gold / XP */
.role { border-radius: 0; }
.stars { color: var(--rk-xp); }
.pips { color: var(--rk-gold); }
ul.picks .k { color: var(--rk-gold); font-weight: 700; }
/* Guides: prose on parchment ivory, numbered steps with gold markers */
.prose, ol.steps { color: var(--rk-ivory); }
ol.steps li::marker { color: var(--rk-gold); font-weight: 700; }
code { font-family: var(--rk-mono); color: var(--rk-ivory); }
/* Unassigned: the rarity group headings sit on the divider rule */
.ua-rar > h2 { position: relative; padding-bottom: calc(5 * var(--rk-px) + 8px); }
.ua-rar > h2::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(5 * var(--rk-px)); box-sizing: border-box;
  border-style: solid; border-width: var(--rk-px) calc(4 * var(--rk-px));
  border-image: url(kit/divider.png) 1 4 fill / var(--rk-px) calc(4 * var(--rk-px)) stretch; image-rendering: pixelated; }

/* (the phone header lives in the MOBILE block at the end of this file) */

/* ---------- Epoch Realms Riftgate logo (Sloan's pick, 2026-11-05) ----------
   Native 1-px art drawn at a whole number of device pixels per art pixel; site/src/brand.js sets --logo-px and --hero-px. */
.brand-logo { display: block; width: calc(392 * var(--logo-px, 1px)); height: auto; aspect-ratio: 392 / 50; max-width: calc(100vw - 48px); image-rendering: pixelated; }   /* box reserved by CSS: brand.js only refines the scale */
.brand { line-height: 0; }
/* Sloan 2026-11-05: the Nexus hero is the TEXT-ONLY wordmark (no portal disc), like the launcher, so the rotating scenes shine. */
.hero-logo { flex: none; width: calc(524 * var(--hero-px, 1px)); height: calc(244 * var(--hero-px, 1px)); aspect-ratio: 524 / 244; max-width: 100%; image-rendering: pixelated;
  background: url(brand/text-only.png) 0 0 / 100% 100% no-repeat; }
.flank img + img { display: none; }   /* one boss a side: the 768-px logo needs the width */

/* soft navigation: a slow fetch dims the old page a little instead of freezing it */
main.navigating { opacity: .55; transition: opacity .15s .1s; }
main { min-height: 60vh; }

/* ================= MOBILE (2026-11-05, "make the wiki look good on mobile") =================
   Desktop (>= 981 px): the header is unchanged in look; the .menu wrapper vanishes (display: contents) and the button is hidden.
   <= 980 px (tablet and phone): the header is a compact sticky bar (logo + Menu button); the Menu opens a kit panel with the search
   box and the nine sections as a two-column list of 44-px kit buttons. Without JS (html:not(.js)) the panel simply shows below the logo.
   Phone type: inputs are 16 px (iOS does not zoom them), tap targets are >= 40-44 px, side padding is 16 px. */
.menu { display: contents; }
.menu-btn { display: none; }
.top .nav { order: 1; flex: 1 1 auto; flex-wrap: nowrap; }
.top .search { order: 2; }
.menu-ico { display: block; width: 16px; height: 2px; background: var(--rk-gold); box-shadow: 0 -6px 0 var(--rk-gold), 0 6px 0 var(--rk-gold); }
.menu-btn[aria-expanded=true] .menu-ico { box-shadow: none; transform: rotate(45deg); }
.menu-btn[aria-expanded=true] .menu-ico::after { content: ""; display: block; width: 16px; height: 2px; background: var(--rk-gold); transform: rotate(-90deg); }
.wide-table { position: relative; }
.wide-table.scrolls::before { content: "Swipe sideways to see every column \2192"; display: block; position: sticky; left: 0; font: 12px var(--rk-mono); color: var(--rk-gold); padding: 0 0 6px; }

@media (max-width: 1264px) {
  html { scroll-padding-top: 84px; }
  .top { position: sticky; top: 0; z-index: 20; flex-wrap: wrap; justify-content: space-between; gap: 0 12px; padding: 8px 16px calc(5 * var(--rk-px) + 8px); }
  .brand { min-width: 0; flex: 0 1 auto; }
  .menu-btn { display: inline-flex; flex: none; height: 44px; min-width: 104px; padding: 0 14px; gap: 10px; cursor: pointer; font-size: 12px; color: var(--rk-gold); }
  html:not(.js) .menu-btn { display: none; }
  .menu { display: block; flex: 1 1 100%; order: 3; padding-top: 12px; }
  html.js .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 30; padding: 12px 16px 18px; background: var(--rk-plum);
    max-height: calc(100vh - 76px); overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 16px 24px rgba(0, 0, 0, .65); border-bottom: calc(2 * var(--rk-px)) solid var(--rk-bronze-dark); }
  html.js .top[data-open] .menu { display: block; }
  .top .search, .top .nav { order: 0; }
  .search { display: block; }
  .search input { display: block; width: 100%; height: 44px; font-size: 16px; }
  .nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; overflow: visible; }
  .nav a { flex: none; height: 44px; padding: 0 8px; font-size: 12px; letter-spacing: .12em; color: var(--rk-ivory); }
  .nav a:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .cards, .items, .ua-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
  .facts { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .counts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
  .band-head { flex-wrap: wrap; gap: 2px 12px; padding: 6px 10px; margin: 36px 0 12px; }
  .wide-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .item, .sig { overflow-wrap: anywhere; }
  .chip .ct { overflow: hidden; }
  .chip .co { white-space: normal; }
}

@media (max-width: 640px) {
  :root { --rk-body: 15px; --rk-small: 14px; --rk-label: 12px; }
  body { font-size: 16px; }
  main { padding: 24px 16px 32px; }
  section { margin-bottom: 48px; }
  h1 { font-size: 30px; letter-spacing: .06em; overflow-wrap: anywhere; }
  h2 { font-size: 22px; letter-spacing: .06em; overflow-wrap: anywhere; }
  h3 { overflow-wrap: anywhere; }
  .lede { font-size: 17px; }
  .note, p.note, .card .meta, .item .meta, .crumbs { font-size: 13px; }
  .card p, .item p, .legend div, .legend { font-size: 15px; }
  table { font-size: 14px; }
  th, td { padding: 10px 10px; }
  /* panels: the kit borders are 8-16 px a side, so the padding inside shrinks */
  .card { padding: 12px; }
  .card > img { margin: -12px -12px 12px; max-width: calc(100% + 24px); width: calc(100% + 24px); }
  .card .portrait { margin: -12px -12px 12px; }
  .count { padding: 8px 8px; }
  .count .n { font-size: 44px; }
  .item { padding: 8px 10px; gap: 10px; }
  .sig { padding: 8px 10px; }
  .srcb { padding: 8px 10px 10px; }
  .filters { padding: 10px; gap: 12px; }
  .flt { flex: 1 1 140px; }
  .flt select { width: 100%; height: 44px; font-size: 16px; line-height: 36px; }
  .flt.chk { flex: 1 1 100%; min-height: 40px; }
  .flt.chk input { width: 22px; height: 22px; }
  .otoggle button { height: 44px; padding: 0 12px; font-size: 12px; }
  .copyid { padding: 9px 12px; font-size: 12px; }
  .crumbs a { display: inline-block; padding: 8px 2px; }
  main details:not(.src) > summary { padding: 8px 0; min-height: 40px; cursor: pointer; }
  .bags .bag:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .bags .bag { padding: 8px 8px 10px; }
  .bags { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .por-l { width: 128px; height: 128px; }
  .por-l img { width: 96px; height: 96px; }
  .crow { grid-template-columns: 24px minmax(0, 1fr) 72px 64px; gap: 8px; }
  .tagrow { gap: 8px; }
}

/* pixel art stays on whole pixels: the boss-without-a-portrait ring is 12 art px drawn at x8 / x10 */
svg.nop { display: block; color: var(--rk-plum-edge); image-rendering: pixelated; shape-rendering: crispEdges; }
.card .portrait svg.nop { width: 96px; height: 96px; }
.por-l svg.nop { width: 120px; height: 120px; }

/* Nexus hero: the scene is 480+ CSS px wide and centred, so on a phone it overhangs both sides; clip it at the hero's edge
   (clipping on <body> does not stop the page scrolling sideways) */
/* clip at the viewport, not the hero: the scene is full-bleed on desktop (Sloan 2026-11-05) and must not scroll a phone sideways */
html:has(body[data-section="nexus"]) { overflow-x: hidden; }
@media (max-width: 640px) {
  .nexus-hero .buttons { flex-direction: column; align-items: stretch; gap: 10px; margin: 20px 0 14px; }
  .nexus-hero .btn, .nexus-hero .btn.primary { width: 100%; height: 52px; padding: 0 12px; }
  .nexus-hero .eyebrow { display: block; padding: 8px 10px; letter-spacing: .2em; font-size: 12px; }
  .nexus-hero .lede { width: auto; padding: 10px 12px; font-size: 17px; }
  .nexus-hero .pitch-origin { display: block; }
  .nexus-hero .status-line { display: flex; justify-content: center; width: 100%; }
}

/* desktop header on ONE row from 1265 px: tighter tabs and a shorter search box (logo 392 + nine kit tabs + search) */
@media (min-width: 1265px) {
  .top { gap: 12px; padding-left: 20px; padding-right: 20px; }
  .top .nav { gap: 2px; }
  .nav a { padding: 0 4px; letter-spacing: .04em; }
  .search input { width: 128px; }
}