/* 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 {
  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 {
  border-image-source: url(kit/control-hover.png); color: var(--rk-gold); background: none; filter: none; }
.btn-kit:active, .btn:active, .nav a: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"] {
  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; }
.crest { flex: none; width: calc(620px + 16 * var(--rk-px)); max-width: 100%; line-height: 0; }
.crest .art { display: block; width: 100%; aspect-ratio: 620 / 380;
  background: url(title-backdrop.png) 50% 39.88% / 116.774% auto no-repeat var(--rk-ink); image-rendering: auto; }
.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; }
.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); }
.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) {
  .top { padding: 10px 16px calc(5 * var(--rk-px) + 10px); }
  .nav a { padding: 0 5px; }
  .search input { width: 100%; }
  .nexus-hero { margin-bottom: 56px; }
  body[data-section="nexus"] main { padding-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; }

/* phone and narrow windows: the header stops being sticky (nine kit tabs wrap to several rows) and the tabs become one
   row that scrolls sideways inside the header, so the page itself never scrolls horizontally */
@media (max-width: 860px) {
  .top { position: relative; flex-wrap: wrap; }
  .brand { order: 1; }
  .search { order: 2; flex: 1 1 100%; }
  .nav { order: 3; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
  .nav a { flex: none; }
}