:root {
  color-scheme: dark;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  background: #000;
  color: #fff;
  --zinc-50: #fafafa;
  --zinc-200: #e4e4e7;
  --zinc-300: #d4d4d8;
  --zinc-400: #a1a1aa;
  --zinc-500: #71717a;
  --zinc-700: #3f3f46;
  --zinc-800: #27272a;
  --zinc-900: #18181b;
  /* spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  /* semantic tokens */
  --surface-0: #000;
  --surface-1: var(--zinc-900);
  --surface-2: var(--zinc-800);
  --border: var(--zinc-800);
  --border-strong: var(--zinc-700);
  --text-primary: #fff;
  --text-secondary: var(--zinc-300);
  --text-muted: var(--zinc-400);
  --text-faint: var(--zinc-500);
  --accent: #93c5fd;
  --accent-2: #2dd4bf;
  --danger: #b91c1c;
  --danger-surface: #270808;
  --nav-active: #334155;
  /* tag palette (single source of truth; JS emits var(--tag-*) references) */
  --tag-physical: #e6d2d2;
  --tag-fire: #e51c23;
  --tag-lightning: #ffee58;
  --tag-ice: #4fc3f7;
  --tag-nature: #72d572;
  --tag-arcane: #f06292;
  --tag-dark: #9c27b0;
  --tag-holy: #f6fe8d;
  --tag-sorcery: #e91e63;
  --tag-conjuration: #f36c60;
  --tag-enchantment: #31a490;
  --tag-word: #ffd54f;
  --tag-orb: #f8a8b7;
  --tag-dragon: #b0120a;
  --tag-translocation: #ba68c8;
  --tag-metallic: #909cba;
  --tag-eye: #fff;
  --tag-chaos: #ffab4d;
  --tag-blood: #860d07;
  --tag-slime: #cedc38;
  --tag-living: #aed581;
  --tag-undead: #616161;
  --tag-demon: #f04646;
  --tag-poison: #42bd41;
  --tag-shields: #4dfdfc;
  --tag-damage: #d70000;
  --tag-duration: #31a490;
  --tag-range: #b464ff;
  --tag-radius: #e91e63;
  --tag-max-charges: #ff8000;
  --tag-num-targets: #ff8000;
  --tag-num-summons: #ff8000;
  --tag-minion-damage: #f36c60;
  --tag-minion-health: #f36c60;
  --tag-minion-duration: #f36c60;
  --tag-minion-range: #b464ff;
  --tag-shot-cooldown: #ffcc99;
  --tag-cooldown: #ffcc99;
  --tag-strikechance: #ffee58;
  --tag-heal: #31a490;
  --tag-max-channel: #993366;
  --tag-quick-cast: #fff;
  --tag-hp-cost: #860d07;
  --tag-any: #a1a1aa;
}
* { box-sizing: border-box; }
html { scrollbar-color: var(--zinc-700) transparent; }
html, body { margin: 0; min-height: 100%; background: #000; color: #fff; }
body { font-size: 15px; line-height: 1.25; overflow-x: hidden; }
button, input { font: inherit; }
a { color: var(--accent); text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
#search:focus-visible { outline: 0; border-bottom-color: var(--accent); }
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgb(9 9 11 / .92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
  padding: var(--space-2) var(--space-3);
}
.top-inner { max-width: 1580px; margin: 0 auto; display: flex; gap: 20px; align-items: center; }
nav { display: flex; gap: 8px; flex-wrap: wrap; }
.nav-btn {
  border: 0;
  color: var(--zinc-200);
  background: transparent;
  padding: 4px 8px;
  cursor: pointer;
}
.nav-btn:hover { color: #fff; background: var(--nav-active); }
.nav-btn.active { color: #fff; background: transparent; box-shadow: inset 0 -2px 0 var(--accent); }
.search-wrap { margin-left: auto; display: flex; align-items: center; gap: 14px; min-width: min(410px, 40vw); }
#search {
  width: 100%;
  color: var(--text-secondary);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-strong);
  outline: 0;
  padding: 4px 8px;
}
#search:focus { border-bottom-color: var(--text-secondary); }
.json-links { display: flex; gap: 10px; color: var(--text-faint); white-space: nowrap; font-size: 12px; align-self: center; }
.json-links a { color: var(--text-faint); }
.json-links a:hover { color: var(--text-muted); }
.page { width: 100%; max-width: none; margin: 0 auto; padding: var(--space-3); }
.shell { display: grid; grid-template-columns: 170px minmax(320px, 430px) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.tag-rail { position: sticky; top: 52px; display: flex; flex-direction: column; gap: var(--space-1); color: var(--text-muted); padding-top: 25px; }
.tag-btn {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  text-align: left;
  padding: 1px 6px;
  cursor: pointer;
}
.tag-btn:hover, .tag-btn.active { color: #fff; background: var(--surface-1); }
.tag-btn .first, .short-tag { color: var(--tag-color, var(--text-secondary)); }
.recipe-code { display: inline-flex; gap: 0; letter-spacing: .02em; white-space: nowrap; }
.recipe-tag { color: var(--tag-color, var(--text-secondary)); }
.recipe-any { color: var(--text-muted); }
.item-list { display: table; width: 100%; border-collapse: collapse; table-layout: fixed; }
.item-row {
  display: table-row;
  color: #fff;
  cursor: pointer;
  line-height: 1.35;
  text-decoration: none;
}
.item-row:hover { background: var(--surface-1); }
.item-row.active { background: var(--surface-2); }
.item-row.active .name-cell { box-shadow: inset 2px 0 0 var(--accent); }
.item-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cell { display: table-cell; vertical-align: middle; padding: 1px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.name-cell { width: 100%; padding-left: var(--space-2); }
.level-cell { width: 5ch; color: #fff; text-align: right; padding-right: var(--space-3); font-variant-numeric: tabular-nums; }
.tags-cell { width: 10ch; letter-spacing: .04em; }
.name-wrap { display: flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; overflow: hidden; }
/* bespoke effect highlight chip squeezed into a list row: never wraps, never
   pushes the name out */
.name-wrap .reason-chip { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; padding: 0 5px; }
.fx-chips { margin: var(--space-3) 0; }
.item-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon { --icon-size: 18px; width: var(--icon-size); height: var(--icon-size); display: inline-block; vertical-align: middle; background-repeat: no-repeat; background-position: center; background-size: contain; image-rendering: pixelated; flex: 0 0 var(--icon-size); }
.icon.sprite { background-size: calc(var(--cols) * var(--icon-size)) calc(var(--rows) * var(--icon-size)); background-position-y: calc(var(--idle-row) * var(--icon-size) * -1); animation: sprite-idle 900ms steps(var(--cols)) infinite; }
.icon.missing { opacity: .35; outline: 1px solid var(--danger); background-color: var(--danger-surface); }
.muted { color: var(--text-muted); }
.detail-pane { min-width: 0; }
.back-link { display: none; }
.detail { width: 100%; max-width: none; min-width: 0; }
.detail-head { display: grid; grid-template-columns: minmax(0, 1fr) 72px; gap: var(--space-5); align-items: start; }
h1 { margin: 0 0 var(--space-2); font-size: 27px; font-weight: 700; line-height: 1.15; letter-spacing: 0; }
h2 {
  margin: var(--space-7) 0 var(--space-3);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--text-muted);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--border);
}
h3 { margin: var(--space-4) 0 var(--space-2); font-size: 14px; font-weight: 700; color: var(--text-secondary); }
.list-head { padding-left: var(--space-2); }
.section-label, .attrs-title, .recipe-title, .list-head {
  margin: 0 0 var(--space-2);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.big-icon { --icon-size: 64px; width: var(--icon-size); height: var(--icon-size); display: inline-block; background-repeat: no-repeat; background-position: center; background-size: contain; image-rendering: pixelated; justify-self: end; }
.big-icon.sprite { background-size: calc(var(--cols) * var(--icon-size)) calc(var(--rows) * var(--icon-size)); background-position-y: calc(var(--idle-row) * var(--icon-size) * -1); animation: sprite-idle 900ms steps(var(--cols)) infinite; }
@keyframes sprite-idle { from { background-position-x: 0; } to { background-position-x: calc(var(--cols) * var(--icon-size) * -1); } }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.tag { color: var(--text-muted); white-space: nowrap; }
.tag .first { color: var(--tag-color, var(--text-secondary)); }
.core-stats { margin: var(--space-5) 0 var(--space-6); display: grid; gap: 1px; color: #fff; }
.attrs { margin: var(--space-6) 0; color: #fff; }
.attr-line { color: var(--attr-color, #fff); line-height: 1.25; display: flex; gap: .45ch; align-items: baseline; white-space: nowrap; }
.attr-value { color: var(--attr-color, #fff); }
.attr-key { color: var(--attr-color, #fff); }
.desc { white-space: pre-wrap; line-height: 1.5; max-width: 980px; }
.recipe-detail { margin: var(--space-6) 0; }
.recipe-detail .recipe-code { font-size: 1.08em; }
.token { color: var(--tag-color, var(--accent-2)); }
.upgrade-list, .bonus-list, .chain-list, .edge-list, .monster-spells, .variant-list, .effect-list { display: grid; gap: var(--space-3); }
.upgrade-list { gap: 0; }
.upgrade-row { display: grid; grid-template-columns: 4ch minmax(150px, .52fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; padding: var(--space-2); }
.upgrade-row:nth-child(even) { background: var(--surface-1); }
.upgrade-cost { text-align: right; color: #fff; }
.upgrade-name { color: #fff; font-weight: 700; }
.upgrade-desc { white-space: pre-wrap; color: var(--zinc-200); line-height: 1.35; }
.bonus-row, .chain-row, .edge-row, .spell-row {
  display: grid;
  grid-template-columns: minmax(145px, .35fr) minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--border);
}
a.chain-row { color: inherit; }
a.chain-row:hover { background: var(--surface-1); }
.chain-title { color: #fff; font-weight: 700; overflow-wrap: anywhere; min-width: 0; }
/* Provenance is a feature, but a secondary one: file:line references and
   code snippets read as metadata, not as primary copy. */
.evidence { color: var(--text-faint); font-size: 12px; }
/* Unrecognized raw guard expressions collapse to a generic pill; the raw
   text stays in the tooltip. */
.condition-pill { color: var(--text-muted); font-style: italic; cursor: help; }
details.step-source { margin-top: 2px; font-size: 12px; }
details.step-source summary, details.source-details summary { color: var(--text-faint); cursor: pointer; width: fit-content; }
details.step-source summary:hover, details.source-details summary:hover { color: var(--text-muted); }
details.step-source[open] summary, details.source-details[open] summary { color: var(--text-muted); }
details.source-details { margin: var(--space-2) 0; }
details.step-source .code, details.source-details .code { overflow-wrap: anywhere; }
.effect-actions { margin: var(--space-3) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.effect-load {
  border: 1px solid var(--border-strong);
  background: var(--surface-1);
  color: #fff;
  padding: 5px 8px;
  cursor: pointer;
  border-radius: 4px;
}
.effect-load:hover { border-color: var(--text-muted); }
.effect-card, .variant-row, .coverage-row {
  display: grid;
  grid-template-columns: minmax(160px, .34fr) minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--border);
}
.coverage-pill { color: var(--text-secondary); background: var(--surface-1); border: 1px solid var(--border-strong); padding: 1px 6px; border-radius: 4px; display: inline-block; max-width: 100%; overflow-wrap: anywhere; font-size: 12px; }
/* gate/required-state pill carrying the owning spell's icon */
a.upgrade-pill { display: inline-flex; align-items: center; gap: 5px; color: var(--text-secondary); vertical-align: middle; }
a.upgrade-pill:hover { color: #fff; border-color: var(--accent); }
a.upgrade-pill .icon { --icon-size: 14px; }
.augment-list { display: grid; gap: var(--space-1); }
.augment-row {
  display: grid;
  grid-template-columns: minmax(180px, .45fr) minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--border);
}
.augment-item { display: flex; align-items: center; gap: var(--space-2); min-width: 0; flex-wrap: wrap; }
.augment-shared { margin: var(--space-1) 0 var(--space-2); display: flex; flex-wrap: wrap; gap: var(--space-1); }
.augment-compact-row {
  grid-template-columns: minmax(180px, .45fr) 3ch minmax(6ch, .15fr) minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  align-items: center;
}
.augment-level { color: var(--text-muted); font-size: 12px; text-align: right; }
.augment-tags { display: inline-flex; gap: 2px; letter-spacing: .02em; }
.reason-chip {
  color: var(--tag-color, var(--text-secondary));
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  padding: 1px 6px;
  border-radius: 4px;
  display: inline-block;
  font-size: 12px;
  white-space: nowrap;
}
/* malus chips: dimmed with a danger-tinted border; effect chips: accent-styled */
.reason-chip.reason-malus { color: var(--text-muted); border-color: rgb(185 28 28 / .55); }
.reason-chip.reason-effect { color: var(--accent-2); border-color: var(--accent-2); white-space: normal; overflow-wrap: anywhere; }
.bonus-chips { margin-top: var(--space-2); }
.effect-meta { color: var(--text-muted); font-size: 13px; overflow-wrap: anywhere; }
.entity-link { color: inherit; display: inline-flex; align-items: center; gap: 5px; }
.entity-link:hover { color: var(--accent); }
.code { color: var(--accent); font-size: 13px; }
.empty { color: var(--text-faint); padding: var(--space-4); border: 1px dashed var(--border-strong); border-radius: 4px; }
.build-page { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.build-pickers { min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-6); }
.build-pickers .section-label { margin: var(--space-4) 0 var(--space-1); }
.build-pickers .section-label:first-child { margin-top: 0; }
.build-chip-row { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.build-chip { flex: 0 0 auto; border: 1px solid var(--border-strong); border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.build-chip.active { border-color: var(--accent); color: #fff; }
.build-picked { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.build-x {
  border: 1px solid var(--border-strong);
  background: var(--surface-1);
  color: var(--text-secondary);
  width: 22px;
  height: 22px;
  line-height: 1;
  border-radius: 4px;
  cursor: pointer;
  flex: 0 0 auto;
}
.build-x:hover { border-color: var(--text-muted); color: #fff; }
.build-search {
  width: 100%;
  color: var(--text-secondary);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-strong);
  padding: 4px 2px;
}
.build-search:focus { outline: 0; border-bottom-color: var(--accent); }
.build-results { display: flex; flex-direction: column; gap: 1px; }
.build-result {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  text-align: left;
  padding: 3px 4px;
  cursor: pointer;
  min-width: 0;
}
.build-result:hover { color: #fff; background: var(--surface-1); }
.build-main { max-width: 980px; }
.pill-good { color: var(--accent-2); border-color: var(--accent-2); }
.pill-warn { color: var(--text-muted); }
/* owned gear shows its recipe letters as quiet provenance, never as a nag */
.recipe-muted { opacity: .5; }
/* compact text action (own / plan / crafted-it) on build rows */
.mini-act {
  border: 1px solid var(--border-strong);
  background: var(--surface-1);
  color: var(--text-secondary);
  border-radius: 4px;
  padding: 1px 7px;
  font-size: 12px;
  cursor: pointer;
  flex: 0 0 auto;
  white-space: nowrap;
}
.mini-act:hover { border-color: var(--text-muted); color: #fff; }
.planned-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.shopping-list { align-items: center; }
/* "with <upgrade/component>" annotation on conditional augment rows */
.cond-pill { color: var(--text-muted); font-size: 12px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; margin-left: var(--space-1); }
/* upgrade row hint: taking this upgrade unlocks more augmenting items */
.reason-chip.reason-unlocks { color: var(--accent-2); }
/* per-spell upgrade toggle chips in the build pickers column */
.upgrade-choice-row { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0 0 var(--space-1) 23px; }
.upgrade-chip { font-size: 12px; padding: 1px 8px; }
.upgrade-chip[disabled] { opacity: .4; cursor: not-allowed; }
/* inline save control in the build header; saved-build rows in the pickers */
.build-save-row { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 var(--space-4); max-width: 420px; }
.build-save-name { flex: 1 1 auto; }
.saved-build-row .saved-build-load { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.chain-page { display: grid; grid-template-columns: 170px minmax(300px, 390px) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.chain-index { min-width: 0; }
.chain-index-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--zinc-900);
  background: transparent;
  color: var(--text-secondary);
  text-align: left;
  padding: 7px 6px;
  cursor: pointer;
  white-space: normal;
  overflow-wrap: anywhere;
}
.chain-index-row:hover, .chain-index-row.active { color: #fff; background: var(--surface-2); }
.chain-index-title { min-width: 0; display: inline; overflow-wrap: anywhere; }
.chain-index-segment { display: inline; }
.chain-index-segment .icon { --icon-size: 16px; margin-right: 4px; }
.chain-index-arrow { color: var(--text-muted); margin: 0 .35em; }
.chain-source-row { display: flex; flex-wrap: wrap; gap: var(--space-1); padding: var(--space-2) var(--space-1); }
.source-pill {
  flex: 0 0 auto;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  padding: 2px 10px;
  white-space: nowrap;
  cursor: pointer;
}
.source-pill:hover { color: #fff; }
.source-pill.active { border-color: var(--accent); color: #fff; }
.path-meta { margin-bottom: var(--space-3); }
.timeline { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.step { display: grid; grid-template-columns: 4ch minmax(0, 1fr); gap: var(--space-3); border-top: 1px solid var(--border); padding-top: var(--space-3); }
.step-no { color: var(--text-faint); text-align: right; }
.loader { color: var(--text-muted); padding: var(--space-7) var(--space-3); }
@media (min-width: 1051px) {
  /* Three independent scroll columns: the document never scrolls; each
     .scroll-col scrolls on its own. Flex column layout means the topbar can
     wrap to two rows (~1051-1200px) without any hardcoded height math. */
  html, body { height: 100%; }
  body { overflow: hidden; display: flex; flex-direction: column; }
  .page { flex: 1 1 auto; min-height: 0; overflow: hidden; }
  .shell, .chain-page, .build-page { height: 100%; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  .scroll-col { min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-gutter: stable; padding-bottom: var(--space-8); }
  .tag-rail { position: static; }
  /* the list count label sticks to the top of its own scroll column */
  .list-head { position: sticky; top: 0; z-index: 5; background: rgb(9 9 11 / .92); margin: 0; padding-top: var(--space-2); padding-bottom: var(--space-2); }
}
@media (max-width: 1050px) {
  .top-inner { align-items: stretch; flex-direction: column; gap: var(--space-2); }
  .search-wrap { margin-left: 0; min-width: 0; width: 100%; }
  .shell, .chain-page, .build-page { grid-template-columns: 1fr; gap: var(--space-3); }
  .build-pickers { padding-top: var(--space-3); }
  /* tag rail becomes a horizontal scrollable chip strip */
  .tag-rail {
    position: static;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .tag-btn {
    flex: 0 0 auto;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    padding: 4px 12px;
    white-space: nowrap;
  }
  .tag-btn.active { border-color: var(--accent); }
  .detail { max-width: none; }
  .attrs { margin: var(--space-5) 0; }
  /* one pane at a time: hash route with an id shows detail, without shows list */
  .shell.mode-list .detail-pane { display: none; }
  .shell.mode-detail .list-pane, .shell.mode-detail .tag-rail { display: none; }
  .back-link { display: inline-block; padding: var(--space-2) 0; margin-bottom: var(--space-2); }
}
@media (max-width: 680px) {
  body { font-size: 14px; }
  .json-links { display: none; }
  .upgrade-row, .bonus-row, .chain-row, .edge-row, .spell-row, .effect-card, .variant-row, .coverage-row, .augment-row { grid-template-columns: 1fr; gap: var(--space-1); }
  .upgrade-row { grid-template-columns: 4ch minmax(0, 1fr); gap: var(--space-1) var(--space-3); }
  .augment-compact-row { grid-template-columns: minmax(0, 1fr) 3ch auto; }
  .augment-compact-row .augment-reasons { grid-column: 1 / -1; }
  .upgrade-desc { grid-column: 1 / -1; }
  .detail-head { grid-template-columns: 1fr; }
  .big-icon { justify-self: start; }
  .tags-cell .recipe-code { max-width: 100%; overflow: hidden; }
  /* touch targets >= 40px */
  .cell { padding: 11px 0; }
  .nav-btn { padding: 10px 12px; }
  .tag-btn { padding: 10px 14px; }
  .chain-index-row { padding: 11px var(--space-2); }
  .source-pill { padding: 8px 12px; }
  .effect-load { padding: 10px 12px; }
  .back-link { padding: var(--space-3) 0; }
}