/* The public RAID guide site (backend/app/codex/README.md). The app's "forged" theme: obsidian, iron plates
   with a bronze hairline and gold corner brackets, gold for chrome and the ONE primary action, violet only for
   AI, colour only where it means something (rarity, affinity, buff vs debuff). Nothing loads from another site. */
@font-face { font-family: "Cinzel"; src: url("/site/cinzel-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
:root {
  color-scheme: dark;
  --bg: #0a0b0e; --bar: #0c0d11; --iron1: #15171e; --iron2: #0f1116; --panel: #101218;
  --hair: rgba(200,164,100,0.15); --hair2: rgba(200,164,100,0.32);
  --gold: #d8b36a; --gold-hi: #f0d391; --text: #ece5d3; --muted: #a39a86; --dim: #6d6658;
  --arcane: #9b7bff; --ok: #7cc47f; --bad: #e07a6a; --warn: #ffd998;
  --buff: #6fb7e8; --debuff: #e08a6a; --ability: #c9b07a;
  --display: "Cinzel", Georgia, "Times New Roman", serif;
  --body: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}
* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--text); font: 15px/1.6 var(--body); background: var(--bg); min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
img { max-width: 100%; }
h1, h2, h3 { line-height: 1.25; }
h1 { font-family: var(--display); font-weight: 600; letter-spacing: .02em; font-size: clamp(26px, 4.2vw, 38px); margin: 6px 0 10px; }
h2 { font-family: var(--display); font-weight: 600; letter-spacing: .03em; font-size: 21px; margin: 30px 0 12px; }
h3 { font-size: 16px; margin: 20px 0 6px; }
p { margin: 0 0 12px; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; }
main { flex: 1; padding-bottom: 40px; }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── top bar ─────────────────────────────────────────────────────────── */
.top { position: sticky; top: 0; z-index: 50; background: var(--bar); border-bottom: 1px solid var(--hair); }
.top .wrap { display: flex; align-items: center; gap: 18px; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); flex-shrink: 0; }
.brand:hover { text-decoration: none; }
.brand img { width: 32px; height: 32px; border-radius: 5px; }
.brand b { font-family: var(--display); font-weight: 600; letter-spacing: .12em; font-size: 15px; line-height: 1.05; display: block; }
.brand small { display: block; font-size: 9.5px; letter-spacing: .2em; color: var(--muted); text-transform: uppercase; font-weight: 600; }
.nav { display: flex; gap: 2px; }
.nav a { color: var(--muted); font-size: 13.5px; font-weight: 600; padding: 8px 11px; border-radius: 3px; white-space: nowrap; }
.nav a:hover { color: var(--text); background: rgba(216,179,106,0.06); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--gold); background: rgba(216,179,106,0.09); }
.nav a.app { color: var(--gold); border: 1px solid rgba(216,179,106,0.35); margin-left: 6px; }
.menu-btn { display: none; margin-left: auto; background: none; border: 1px solid var(--hair2); color: var(--text); border-radius: 3px; height: 36px; padding: 0 12px; font: 600 13px var(--body); cursor: pointer; }

/* ── search ──────────────────────────────────────────────────────────── */
.search { position: relative; margin-left: auto; width: 280px; }
.search input { width: 100%; height: 38px; padding: 0 12px 0 34px; border-radius: 3px; border: 1px solid var(--hair2); background: #07080a; color: var(--text); font: 14px var(--body); }
.search input::placeholder { color: var(--dim); }
.search input:focus { outline: none; border-color: var(--gold); }
.search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.search kbd { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); }
.search.big { width: 100%; max-width: 620px; margin: 0; }
.search.big input { height: 52px; font-size: 16px; padding-left: 44px; }
.search.big svg { left: 15px; }
.results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; min-width: 300px; max-height: 70vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--hair2); border-radius: 4px; box-shadow: 0 18px 50px rgba(0,0,0,0.6); z-index: 60; padding: 6px; }
.results[hidden] { display: none; }
.results .grp { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); font-weight: 700; padding: 8px 8px 4px; }
.results a { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 3px; color: var(--text); }
.results a:hover, .results a.on { background: rgba(216,179,106,0.1); text-decoration: none; }
.results a small { color: var(--muted); margin-left: auto; font-size: 12px; text-align: right; }
.results .none { padding: 12px; color: var(--muted); }
.results img, .results .ph { width: 28px; height: 28px; border-radius: 3px; flex-shrink: 0; }
kbd { font: 11px/1 var(--mono); padding: 3px 6px; border: 1px solid var(--hair2); border-radius: 3px; color: var(--muted); background: rgba(0,0,0,0.35); }

/* ── plates, chips, buttons ──────────────────────────────────────────── */
.plate { position: relative; border: 1px solid var(--hair); border-radius: 4px; background: linear-gradient(180deg, var(--iron1), var(--iron2)); padding: 18px; }
.plate::before, .plate::after { content: ""; position: absolute; width: 11px; height: 11px; border: 1px solid var(--gold); opacity: .6; pointer-events: none; }
.plate::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.plate::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.eyebrow::before { content: ""; width: 6px; height: 6px; background: currentColor; transform: rotate(45deg); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 3px; font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #1a1408; background: linear-gradient(180deg, #e9c982, #b8893f); border: 1px solid #f0d391; cursor: pointer; }
.btn:hover { background: linear-gradient(180deg, #f3d897, #c99a4d); text-decoration: none; }
.btn.ghost { background: none; color: var(--gold); border-color: rgba(216,179,106,0.45); }
.btn.ghost:hover { background: rgba(216,179,106,0.08); }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 11px; border-radius: 3px; border: 1px solid var(--hair2); background: rgba(10,11,14,0.6); color: var(--muted); font: 600 12.5px var(--body); cursor: pointer; white-space: nowrap; }
a.chip:hover, button.chip:hover { color: var(--text); border-color: var(--gold); text-decoration: none; }
.chip[aria-pressed="true"] { color: #1a1408; background: var(--gold); border-color: var(--gold-hi); }
.chip .x { font-size: 15px; line-height: 1; margin-left: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 3px; font-size: 12px; font-weight: 600; border: 1px solid; white-space: nowrap; }
a.tag:hover { text-decoration: none; filter: brightness(1.2); }
.tag.debuff { color: var(--debuff); border-color: rgba(224,138,106,0.4); background: rgba(224,138,106,0.07); }
.tag.buff { color: var(--buff); border-color: rgba(111,183,232,0.4); background: rgba(111,183,232,0.07); }
.tag.ability { color: var(--ability); border-color: rgba(201,176,122,0.4); background: rgba(201,176,122,0.07); }
.tag.plain { color: var(--muted); border-color: var(--hair2); }
.tag small { opacity: .8; font-weight: 700; }

/* rarity + affinity: the game's colours */
.r-common { --rc: #8a8f98; --rf: linear-gradient(165deg,#d3d6db,#8a8f98 40%,#3a3d42 100%); }
.r-uncommon { --rc: #3fb86a; --rf: linear-gradient(165deg,#a8f0bf,#3fb86a 40%,#154a29 100%); }
.r-rare { --rc: #3d86e0; --rf: linear-gradient(165deg,#a9ccff,#3d86e0 40%,#163766 100%); }
.r-epic { --rc: #a15ce6; --rf: linear-gradient(165deg,#d9b3ff,#8f4fd6 40%,#43206e 100%); }
.r-legendary { --rc: #e8a93a; --rf: linear-gradient(165deg,#f6dc98,#c08a36 40%,#6c4818 100%); }
.r-mythical { --rc: #e0425a; --rf: linear-gradient(165deg,#ff9aa8,#c42a44 40%,#5c0f1c 100%); }
.rar { color: var(--rc); font-weight: 700; }
.gem { vertical-align: -3px; flex-shrink: 0; }
.por { position: relative; display: block; padding: 2px; border-radius: 5px; background: var(--rf, #333); flex-shrink: 0; }
.por img.av, .por .ph { display: block; width: 100%; aspect-ratio: 1; border-radius: 3px; background: #0d0e12; object-fit: cover; }
.por .ph, .results .ph { display: grid; place-items: center; font: 600 22px var(--display); color: var(--muted); background: #14161c; }
.por .gem { position: absolute; right: -4px; bottom: -4px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.9)); }

/* ── breadcrumbs, page head ──────────────────────────────────────────── */
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12.5px; color: var(--dim); padding: 18px 0 2px; }
.crumbs a { color: var(--muted); }
.crumbs span[aria-hidden] { color: var(--dim); }
.lead { color: var(--muted); font-size: 16px; max-width: 720px; }
.pagehead { padding-bottom: 14px; border-bottom: 1px solid var(--hair); margin-bottom: 22px; }

/* ── home ────────────────────────────────────────────────────────────── */
.hero { padding: 46px 0 30px; display: grid; gap: 18px; }
.hero h1 { font-size: clamp(30px, 5.4vw, 52px); max-width: 860px; margin: 0; }
.hero .lead { font-size: 17px; }
.facts { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--muted); font-size: 13px; }
.facts b { color: var(--text); font-variant-numeric: tabular-nums; }
.doors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.door { display: flex; flex-direction: column; gap: 6px; color: var(--text); padding: 18px; min-height: 150px; }
.door:hover { text-decoration: none; border-color: var(--hair2); background: linear-gradient(180deg, #1a1d25, var(--iron2)); }
.door b { font-family: var(--display); font-size: 17px; font-weight: 600; letter-spacing: .02em; }
.door span { color: var(--muted); font-size: 13.5px; }
.door em { margin-top: auto; color: var(--gold); font-style: normal; font-size: 13px; font-weight: 600; }
.cols2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.linklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.linklist a { display: flex; flex-direction: column; gap: 1px; padding: 8px 8px; border-radius: 3px; color: var(--text); }
.linklist a:hover { background: rgba(216,179,106,0.06); text-decoration: none; }
.linklist a span { color: var(--muted); font-size: 13px; }
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.section-title a { font-size: 13px; font-weight: 600; white-space: nowrap; }

/* ── champions list ─────────────────────────────────────────────────── */
.list-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 22px; align-items: start; }
.filters { position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow-y: auto; padding: 16px; display: grid; gap: 16px; }
.filters h3 { margin: 0 0 7px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
.filters .chips .chip { min-height: 30px; padding: 3px 9px; font-size: 12px; }
.field { width: 100%; height: 38px; padding: 0 10px; border-radius: 3px; border: 1px solid var(--hair2); background: #07080a; color: var(--text); font: 14px var(--body); }
select.field { cursor: pointer; }
.field:focus { outline: none; border-color: var(--gold); }
.filters-toggle { display: none; }
.resultbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 14px; min-height: 34px; }
.resultbar .count { color: var(--muted); font-size: 13.5px; }
.resultbar .count b { color: var(--text); }
.resultbar .sort { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.resultbar .sort .field { width: auto; height: 34px; }
.linkbtn { background: none; border: 0; color: var(--gold); font: 600 13px var(--body); cursor: pointer; padding: 4px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
.cc { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 10px 6px 12px; border-radius: 4px; border: 1px solid transparent; color: var(--text); }
.cc:hover { border-color: var(--hair2); background: rgba(21,23,30,0.8); text-decoration: none; }
.cc .por { width: 82px; }
.cc b { font-size: 13px; font-weight: 600; line-height: 1.25; }
.cc small { font-size: 11.5px; color: var(--muted); display: block; line-height: 1.35; }
.cc[hidden] { display: none; }
.empty { padding: 40px 16px; text-align: center; color: var(--muted); }

/* ── champion page ──────────────────────────────────────────────────── */
.champ-head { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 22px; align-items: center; padding: 6px 0 20px; }
.champ-head .por { width: 132px; }
.champ-head h1 { margin: 0 0 8px; }
.meta-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.aura { margin-top: 12px; display: flex; gap: 8px; align-items: baseline; color: var(--muted); font-size: 14px; }
.aura b { color: var(--gold); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.champ-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.side { display: grid; gap: 16px; position: sticky; top: 76px; }
.side h2 { font-size: 15px; margin: 0 0 10px; letter-spacing: .06em; }
.statgrid { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 14px; }
.statgrid th { text-align: left; font-weight: 600; color: var(--muted); padding: 6px 0; }
.statgrid td { text-align: right; padding: 6px 0 6px 10px; }
.statgrid tr + tr th, .statgrid tr + tr td { border-top: 1px solid rgba(200,164,100,0.08); }
.statgrid thead th { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); text-align: right; }
.statgrid thead th:first-child { text-align: left; }
.statgrid td.hi { color: var(--text); font-weight: 600; }
.statgrid td.lo { color: var(--dim); }
.brings { display: grid; gap: 10px; }
.brings > div > b { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-bottom: 6px; }
.skill { padding: 16px 18px; margin-bottom: 12px; }
.skill-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 8px; }
.skill-head h3 { margin: 0; font-size: 16.5px; }
.slot { font: 700 11px var(--mono); color: #1a1408; background: var(--gold); border-radius: 2px; padding: 2px 6px; }
.slot.passive { background: none; color: var(--muted); border: 1px solid var(--hair2); }
.cd { margin-left: auto; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.cd b { color: var(--text); }
.desc { color: #d8d1bf; font-size: 14.5px; }
.desc .hl { color: #7fdc8a; font-weight: 600; }
.desc a.fx { color: #7fdc8a; font-weight: 600; text-decoration: underline dotted rgba(127,220,138,0.5); text-underline-offset: 3px; }
.skill-foot { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.skill-foot b { color: var(--text); font-weight: 600; }
.skill details { margin-top: 8px; font-size: 13px; color: var(--muted); }
.skill summary { cursor: pointer; color: var(--gold); font-weight: 600; }
.skill ol { margin: 6px 0 0; padding-left: 22px; }
.asc { font-size: 12px; color: var(--arcane); border: 1px solid rgba(155,123,255,0.4); border-radius: 3px; padding: 1px 7px; }
.tabs { display: flex; gap: 6px; margin: 4px 0 14px; flex-wrap: wrap; }
[data-panel][hidden], [data-tabs][hidden], .formname[hidden] { display: none; }
.minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.minis .cc .por { width: 58px; }
.minis .cc b { font-size: 12px; }
.source-note { font-size: 12.5px; color: var(--dim); margin-top: 18px; }

/* ── guides ─────────────────────────────────────────────────────────── */
.guide-layout { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 36px; align-items: start; }
.toc { position: sticky; top: 76px; font-size: 13px; border-left: 1px solid var(--hair); padding-left: 14px; }
.toc b { display: block; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); margin-bottom: 8px; }
.toc a { display: block; color: var(--muted); padding: 4px 0; line-height: 1.35; }
.toc a:hover { color: var(--text); }
.toc-mobile { display: none; }
.prose { max-width: 760px; font-size: 15.5px; line-height: 1.7; }
.prose h2 { scroll-margin-top: 80px; padding-top: 6px; border-top: 1px solid var(--hair); }
.prose h3 { scroll-margin-top: 80px; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 14px; }
.prose li { margin: 4px 0; }
.prose li::marker { color: var(--gold); }
.prose code { font: 13px var(--mono); background: rgba(0,0,0,0.4); border: 1px solid var(--hair); border-radius: 3px; padding: 1px 5px; }
.prose strong, .prose b { color: #f6efdc; }
.tldr, .tip, .warn, .note, .formula { border-radius: 4px; padding: 14px 16px; margin: 16px 0; border: 1px solid; }
.tldr { border-color: rgba(216,179,106,0.45); background: rgba(216,179,106,0.06); }
.tldr > b:first-child { display: block; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.tldr ul { margin: 0; }
.tip { border-color: rgba(124,196,127,0.4); background: rgba(124,196,127,0.06); }
.tip > b:first-child { color: var(--ok); margin-right: 4px; }
.warn { border-color: rgba(255,217,152,0.4); background: rgba(255,217,152,0.05); }
.warn > b:first-child { color: var(--warn); margin-right: 4px; }
.note { border-color: var(--hair2); background: rgba(255,255,255,0.02); color: var(--muted); font-size: 14px; }
.note > b:first-child { color: var(--text); margin-right: 4px; }
.formula { font: 14px/1.6 var(--mono); color: #f3e7c6; border-color: var(--hair2); background: #0b0c10; overflow-x: auto; }
ol.steps { list-style: none; counter-reset: s; padding: 0; display: grid; gap: 8px; }
ol.steps li { counter-increment: s; position: relative; padding: 11px 14px 11px 48px; border: 1px solid var(--hair); border-radius: 4px; background: rgba(15,17,22,0.7); margin: 0; }
ol.steps li::before { content: counter(s); position: absolute; left: 13px; top: 10px; width: 24px; height: 24px; border: 1px solid var(--gold); color: var(--gold); font: 600 13px var(--display); display: grid; place-items: center; border-radius: 2px; }
dl.terms { display: grid; grid-template-columns: minmax(130px, max-content) minmax(0, 1fr); gap: 0; margin: 0 0 16px; border-top: 1px solid var(--hair); }
dl.terms dt, dl.terms dd { padding: 9px 0; border-bottom: 1px solid var(--hair); margin: 0; }
dl.terms dt { font-weight: 700; color: var(--gold); padding-right: 16px; }
dl.terms dd { color: #d8d1bf; }
.table-wrap { overflow-x: auto; margin: 0 0 16px; border: 1px solid var(--hair); border-radius: 4px; }
.prose table, .data-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.prose th, .prose td, .data-table th, .data-table td { padding: 8px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(200,164,100,0.1); }
.prose thead th, .data-table thead th { background: rgba(216,179,106,0.07); color: var(--gold); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.prose tbody tr:last-child td, .data-table tbody tr:last-child td { border-bottom: 0; }
.guide-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--dim); font-size: 12.5px; }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 34px; max-width: 760px; }
.pager a { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; color: var(--text); }
.pager a:hover { text-decoration: none; border-color: var(--hair2); }
.pager small { color: var(--dim); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.pager .next { text-align: right; grid-column: 2; }
.paths { display: grid; gap: 26px; }
.path-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.path-head h2 { margin: 0; }
.path-head span { color: var(--muted); font-size: 14px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.gcard { display: flex; gap: 12px; padding: 14px 16px; color: var(--text); }
.gcard:hover { text-decoration: none; border-color: var(--hair2); background: linear-gradient(180deg, #1a1d25, var(--iron2)); }
.gcard i { font: 600 14px var(--display); color: var(--gold); font-style: normal; min-width: 18px; }
.gcard b { display: block; font-size: 14.5px; margin-bottom: 2px; }
.gcard span { color: var(--muted); font-size: 13px; line-height: 1.45; display: block; }

/* ── effects + gear sets lists ──────────────────────────────────────── */
.listbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px; }
.listbar .field { max-width: 320px; }
.entries { display: grid; gap: 10px; }
.entry { padding: 14px 18px; scroll-margin-top: 80px; }
.entry[hidden] { display: none; }
.entry:target { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.entry-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 6px; }
.entry-head h2, .entry-head h3 { margin: 0; font-family: var(--body); font-size: 16.5px; letter-spacing: 0; border: 0; padding: 0; }
.entry-head .count { margin-left: auto; font-size: 13px; font-weight: 600; }
.entry p { margin: 0 0 6px; color: #d8d1bf; }
.entry p.dim { color: var(--dim); font-size: 13.5px; }
.ladder { margin-top: 8px; }
.ladder td:first-child { white-space: nowrap; color: var(--muted); }

/* ── app page ───────────────────────────────────────────────────────── */
.app-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 26px; align-items: center; padding: 26px 0 10px; }
.dl { display: flex; flex-direction: column; gap: 10px; }
.dl .meta { font-size: 12.5px; color: var(--muted); }
.dl .note2 { font-size: 12.5px; color: var(--dim); }
.dl .new { font-size: 13px; color: var(--muted); border-top: 1px solid var(--hair); padding-top: 10px; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.grid4 p { color: var(--muted); font-size: 13.5px; margin: 0; }
.grid4 h3 { margin: 6px 0 4px; font-size: 15px; }
.ai .eyebrow { color: var(--arcane); }

/* ── footer ─────────────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--hair); padding: 22px 0 30px; color: var(--dim); font-size: 12.5px; }
footer .wrap { display: grid; gap: 8px; }
footer nav { display: flex; flex-wrap: wrap; gap: 6px 16px; }
footer nav a { color: var(--muted); }

/* ── small screens ──────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .champ-layout { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .guide-layout { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
  .toc-mobile { display: block; margin: 0 0 18px; border: 1px solid var(--hair); border-radius: 4px; padding: 0 14px; background: rgba(15,17,22,0.7); }
  .toc-mobile summary { cursor: pointer; padding: 11px 0; font-weight: 600; color: var(--gold); }
  .toc-mobile a { display: block; padding: 5px 0; color: var(--muted); }
  .toc-mobile nav { padding-bottom: 10px; }
}
@media (max-width: 920px) {
  .top .wrap { gap: 10px; }
  .nav { display: none; position: absolute; top: 60px; left: 0; right: 0; flex-direction: column; background: var(--bar); border-bottom: 1px solid var(--hair); padding: 8px 12px 14px; }
  .nav.open { display: flex; }
  .nav a { padding: 11px 10px; font-size: 15px; }
  .nav a.app { margin: 6px 0 0; text-align: center; }
  .menu-btn { display: inline-flex; align-items: center; margin-left: 0; }
  .search { width: auto; flex: 1; min-width: 0; }
  .search kbd { display: none; }
  .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .list-layout { grid-template-columns: minmax(0, 1fr); }
  .filters { position: static; max-height: none; display: none; }
  .filters.open { display: grid; }
  .filters-toggle { display: inline-flex; }
  .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-hero, .cols2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  body { font-size: 14.5px; }
  .brand small { display: none; }
  .brand b { font-size: 13px; letter-spacing: .08em; }
  .doors, .grid4 { grid-template-columns: minmax(0, 1fr); }
  .door { min-height: 0; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
  .cc .por { width: 68px; }
  .champ-head { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; }
  .champ-head .por { width: 88px; }
  .cd { margin-left: 0; width: 100%; }
  dl.terms { grid-template-columns: minmax(0, 1fr); }
  dl.terms dt { border-bottom: 0; padding-bottom: 0; }
  .pager { grid-template-columns: minmax(0, 1fr); }
  .pager .next { grid-column: 1; }
  .resultbar .sort { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
.spaced { margin-top: 14px; }
.hint { margin: 0 0 8px; font-size: 12.5px; }
.formname { font-family: var(--display); font-size: 15px; color: var(--gold); margin: 18px 0 10px; }
.minisec { margin-top: 30px; }
.minisec h2 { margin-top: 0; }
.jump { margin: -4px 0 18px; }
.jump .chip { min-height: 30px; }
.champ-main { min-width: 0; }
.overview p { font-size: 15px; color: #d8d1bf; }
.overview h2, #useful h2, .buildsec h2 { margin-top: 0; }
#useful, .overview { margin-bottom: 16px; }
.bookbox { margin-bottom: 14px; padding: 14px 18px; }
.bookbox h3 { margin: 0; }
.booklist, .plainlist { margin: 6px 0 0; padding-left: 22px; }
.booklist li, .plainlist li { margin: 5px 0; }
.buildsec { margin-top: 28px; }
.buildsec h3 { margin: 18px 0 6px; }
.buildsec [data-panel] > h3.formname + h3 { margin-top: 2px; }
.mains th { color: var(--muted); font-weight: 600; white-space: nowrap; width: 110px; }
.mains td:nth-child(2) { white-space: nowrap; }
.trees { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.tree h4 { margin: 4px 0 6px; font-family: var(--display); color: var(--gold); font-size: 14px; letter-spacing: .06em; }
.mlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mlist li { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 8px; padding: 7px 10px; border: 1px solid var(--hair); border-radius: 3px; background: rgba(10,11,14,0.5); cursor: help; }
.mlist .tier { grid-row: span 2; font: 700 11px var(--mono); color: var(--gold); align-self: center; }
.mlist .muted { font-size: 12.5px; }
.fit { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 3px; white-space: nowrap; }
.fit3 { color: #1a1408; background: var(--gold); }
.fit2 { color: var(--gold); border: 1px solid rgba(216,179,106,0.5); }
.fit1 { color: var(--muted); border: 1px solid var(--hair2); }
@media (max-width: 560px) { .trees { grid-template-columns: minmax(0, 1fr); } }
.bookval { display: flex; gap: 14px; align-items: center; }
.bookval h3 { margin: 0 0 2px; }
.bookval p { margin: 0; font-size: 13.5px; }
.bv { flex-shrink: 0; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 4px; font: 600 26px var(--display);
  color: #1a1408; background: var(--gold); line-height: 1; }
.bv small { font: 700 11px var(--body); opacity: .75; }
.bv1, .bv2, .bv3, .bv4 { background: none; color: var(--muted); border: 1px solid var(--hair2); }
.bv5, .bv6, .bv7 { background: none; color: var(--gold); border: 1px solid rgba(216,179,106,0.6); }
.combos { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.combo { padding: 10px 12px; border: 1px solid var(--hair); border-radius: 4px; background: rgba(10,11,14,0.5); }
.combo-sets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 4px; }
.combo .muted { font-size: 13.5px; }
.combo .dim { font-size: 12.5px; }
.setpart { display: inline-flex; align-items: center; gap: 6px; color: var(--text); }
.setpart small { color: var(--gold); font-weight: 700; }
.plus { color: var(--dim); font-weight: 700; }
.seticon { flex-shrink: 0; image-rendering: auto; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 26px; }
.shotcard { margin: 0; padding: 10px; }
.shotcard figcaption { display: grid; gap: 2px; padding: 10px 4px 2px; font-size: 13.5px; }
.shotcard figcaption span { color: var(--muted); }
.shot { display: block; border: 1px solid var(--hair2); border-radius: 4px; overflow: hidden; margin: 12px 0; }
.shot img { display: block; width: 100%; height: auto; }
.shot:hover { border-color: var(--gold); }
.prose.wide { max-width: 980px; }
ol.steps.big > li { padding: 16px 18px 16px 52px; }
ol.steps.big > li > ol { margin: 8px 0; }
.dl.inline { margin-top: 12px; max-width: 460px; }
.guide-screen { padding-bottom: 8px; }
@media (max-width: 920px) { .gallery { grid-template-columns: minmax(0, 1fr); } }
ol.steps ol { list-style: decimal; counter-reset: none; padding-left: 22px; display: block; }
ol.steps ol li { counter-increment: none; padding: 3px 0; border: 0; background: none; margin: 0; }
ol.steps ol li::before { display: none; }