/* PF2e Compendium — dark theme with gold accents */
:root {
  --parch: #15171b; --parch-2: #1c1e23; --ink: #e9e3d4; --ink-soft: #a7a08d;
  --gold: #b3862a; --gold-bright: #cda23c; --gold-tint: #2c2413; --line: #3a3a42;
  --card: #23262d; --accent: #c79e3e; --shadow: 0 2px 6px rgba(0,0,0,.5);
  --rare: #6aa0ff; --uncommon: #e0934f; --unique: #c489dd; --rarity-common: #9a9484;
  --chip: #2a2c33; --chip-on: #b3862a; --on-gold: #17110a;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--parch); color: var(--ink); font: 15px/1.5 "Segoe UI", system-ui, sans-serif;
  display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
h1,h2,h3,h4 { color: var(--gold-bright); margin: 0 0 .4em; }
a { color: var(--accent); text-decoration: none; cursor: pointer; }
a:hover { text-decoration: underline; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: #3e3a30; border-radius: 6px; border: 2px solid var(--parch); }
::-webkit-scrollbar-thumb:hover { background: #524a38; }
* { scrollbar-color: #3e3a30 var(--parch); scrollbar-width: thin; }

#topbar { display: flex; align-items: center; gap: 16px; padding: 10px 18px;
  background: linear-gradient(180deg,#23252b,#15161a); color: #ece6d6; box-shadow: var(--shadow); position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--gold); }
#filter-toggle { display: none; background: transparent; border: 1px solid var(--gold); color: var(--gold-bright);
  font-size: 18px; line-height: 1; padding: 6px 10px; border-radius: 8px; cursor: pointer; flex: none; }
#filter-backdrop { display: none; }
.brand { font-size: 19px; font-weight: 700; color: var(--gold-bright); white-space: nowrap; letter-spacing: .01em; }
.brand .rune { color: #d4ad48; }
.searchwrap { flex: 1; max-width: 720px; }
#search { width: 100%; padding: 9px 14px; border: 1px solid #0f1013; border-radius: 20px; font-size: 15px;
  background: #0f1115; color: var(--ink); outline: none; }
#search::placeholder { color: #7f7a6c; }
#search:focus { box-shadow: 0 0 0 3px rgba(179,134,42,.45); border-color: var(--gold); }
.count { font-size: 13px; color: #d8ccac; white-space: nowrap; min-width: 90px; text-align: right; }

#layout { display: grid; grid-template-columns: var(--side-w, 290px) 6px 1fr 0 0; flex: 1; min-height: 0; }
#layout.detail-open { grid-template-columns: var(--side-w, 290px) 6px 1fr 6px var(--detail-w, 40%); }
.splitter { background: var(--line); cursor: col-resize; touch-action: none; transition: background .12s; }
.splitter:hover, .splitter.drag { background: var(--gold); }
#split-detail { background: transparent; }
#layout.detail-open #split-detail { background: var(--line); }
#layout.detail-open #split-detail:hover, #split-detail.drag { background: var(--gold); }

/* category tabs */
#tabs { display: flex; gap: 2px; padding: 0 12px; flex: none; overflow-x: auto;
  background: linear-gradient(180deg, #1b1d22, #16171b); border-bottom: 1px solid var(--line); }
.tab { background: transparent; border: none; border-bottom: 3px solid transparent; color: var(--ink-soft);
  padding: 9px 15px; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.tab:hover { color: var(--ink); }
.tab.active { color: var(--gold-bright); border-bottom-color: var(--gold); }
#subtabs { display: flex; gap: 6px; padding: 6px 14px; flex: none; overflow-x: auto;
  background: var(--parch-2); border-bottom: 1px solid var(--line); }
#subtabs:empty { display: none; }
.subtab { background: var(--card); border: 1px solid var(--line); color: var(--ink-soft); padding: 3px 11px;
  border-radius: 13px; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.subtab:hover { border-color: var(--gold); color: var(--ink); }
.subtab.active { background: var(--gold); color: var(--on-gold); border-color: var(--gold); font-weight: 600; }
#subsubtabs { display: flex; flex-wrap: wrap; gap: 5px; padding: 6px 14px; flex: none;
  background: var(--bg); border-bottom: 1px solid var(--line); }
#subsubtabs:empty { display: none; }
.subsubtab { background: transparent; border: 1px solid var(--line); color: var(--ink-soft); padding: 2px 9px;
  border-radius: 11px; font-size: 11.5px; cursor: pointer; white-space: nowrap; }
.subsubtab:hover { border-color: var(--gold); color: var(--ink); }
.subsubtab.active { background: var(--gold-tint); color: var(--gold-bright); border-color: var(--gold); font-weight: 600; }

#filters { overflow-y: auto; padding: 14px 14px 60px; border-right: 1px solid var(--line); background: var(--parch-2); }
.reset { width: 100%; padding: 7px; margin-bottom: 10px; border: 1px solid var(--line); background: var(--card);
  border-radius: 6px; cursor: pointer; color: var(--ink); font-size: 13px; }
.reset:hover { background: #2c2f37; border-color: var(--gold); }

.facet { border-bottom: 1px solid var(--line); padding: 10px 2px; }
.facet > h4 { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft);
  cursor: pointer; display: flex; justify-content: space-between; }
.facet > h4 .car { transition: transform .15s; color: var(--gold); }
.facet.collapsed .car { transform: rotate(-90deg); }
.facet.collapsed .facet-body { display: none; }
.facet-body { margin-top: 8px; }
.facet-grouphdr { margin: 4px 0 2px; font-size: 11px; color: var(--ink-soft); }
.relbtn { display: block; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--line);
  color: var(--accent); padding: 5px 9px; border-radius: 6px; font-size: 13px; cursor: pointer; margin: 3px 0; }
.relbtn:hover { border-color: var(--gold); color: var(--gold-bright); }
.optrow { display: flex; align-items: center; gap: 4px; }
.optrow.excluded .opt { color: #b06a5a; text-decoration: line-through; opacity: .8; }
.opt { display: flex; align-items: center; gap: 7px; padding: 2px 0; font-size: 13.5px; cursor: pointer; flex: 1; min-width: 0; }
.opt input { accent-color: var(--gold); }
.opt .n { margin-left: auto; color: #7c7768; font-size: 11.5px; }
.exq { flex: none; border: none; background: transparent; color: #6a6356; cursor: pointer; font-size: 13px; line-height: 1;
  padding: 2px 4px; border-radius: 4px; opacity: .45; }
.optrow:hover .exq { opacity: 1; }
.exq:hover { color: #d9694f; background: rgba(217,105,79,.12); }
.exq.on { color: #d9694f; opacity: 1; }
.facet .more-opts { font-size: 12px; color: var(--accent); cursor: pointer; margin-top: 4px; display: inline-block; }
.facet select, .facet input[type=number], .facet input[type=text] {
  width: 100%; padding: 5px 7px; border: 1px solid var(--line); border-radius: 5px; background: var(--card); color: var(--ink); font-size: 13px; }
.facet select optgroup { color: var(--gold-bright); background: #1a1c20; font-style: normal; }
.facet select option { color: var(--ink); background: #1a1c20; }
.range-row { display: flex; gap: 6px; align-items: center; }
.range-row input { width: 50%; }
.grant-row { display: grid; gap: 6px; }

#results { overflow-y: auto; padding: 0 0 60px; }
#resultbar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; position: sticky; top: 0;
  background: var(--parch); border-bottom: 1px solid var(--line); z-index: 5; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; }
.chip { background: var(--chip-on); color: var(--on-gold); font-size: 12px; padding: 2px 8px 2px 9px; border-radius: 11px; cursor: pointer; font-weight: 600; }
.chip:hover { background: #a8741f; }
.chip::after { content: " ✕"; opacity: .7; }
.chip-excl { background: #7a3320; color: #f0d8cf; }
.chip-excl:hover { background: #9a3f25; }
.sort { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.sort select { margin-left: 5px; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 5px; padding: 3px 5px; }

.list { list-style: none; margin: 0; padding: 6px 12px; }
.row { display: flex; gap: 11px; align-items: center; padding: 8px 10px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; }
.row:hover { background: var(--card); border-color: var(--line); box-shadow: var(--shadow); }
.row.sel { background: var(--gold-tint); border-color: var(--gold); }
.row.kb { background: var(--card); border-color: var(--gold); box-shadow: var(--shadow); }
.row mark, #detail-body mark { background: rgba(201,162,74,.32); color: var(--ink); border-radius: 2px; padding: 0 1px; }
.row .sub.match { color: var(--ink-soft); font-style: italic; white-space: normal; }
.row img { width: 38px; height: 38px; border-radius: 6px; object-fit: cover; background: #2a2f36; border: 1px solid var(--line); flex: none; }
.row .main { flex: 1; min-width: 0; }
.row .nm { font-weight: 700; color: var(--gold-bright); font-size: 18px; line-height: 1.3; margin-bottom: 2px; }
.nm .rank, .row .nm .lvl { background: #2a2c33; color: var(--gold-bright); font-weight: 700; font-size: 18px;
  padding: 0 10px; border-radius: 10px; vertical-align: middle; }
.row .sub { font-size: 13.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .sub.def { color: var(--ink); }
.row .tbadge { font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; background: var(--chip); color: var(--ink-soft);
  padding: 1px 6px; border-radius: 4px; flex: none; align-self: flex-start; }
.more { text-align: center; padding: 14px; }
.more button { padding: 8px 22px; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 8px; cursor: pointer; }
.more button:hover { background: #2c2f37; border-color: var(--gold); }
.empty { text-align: center; color: var(--ink-soft); padding: 50px 20px; }

/* rarity + trait chips */
.rar-uncommon { color: var(--uncommon); } .rar-rare { color: var(--rare); } .rar-unique { color: var(--unique); }
.traits { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.trait { font-size: 15px; background: var(--chip); color: var(--ink-soft); border: 1px solid var(--line); padding: 1px 7px; border-radius: 3px; text-transform: capitalize; }
.trait.tt-rare { background: var(--rare); color: #0a0f18; border-color: var(--rare); }
.trait.tt-uncommon { background: var(--uncommon); color: #1a0f04; border-color: var(--uncommon); }
.trait.tt-unique { background: var(--unique); color: #160a1c; border-color: var(--unique); }
/* spell category + tradition chips */
.trait.scat { background: #1f8a8a; color: #06201f; border-color: #1f8a8a; font-weight: 700; text-transform: none; }
.trait.trad-arcane { background: #3f63c0; color: #fff; border-color: #3f63c0; }
.trait.trad-divine { background: #c9a23a; color: #1c1408; border-color: #c9a23a; }
.trait.trad-occult { background: #8a4fd0; color: #fff; border-color: #8a4fd0; }
.trait.trad-primal { background: #3f9a55; color: #06200f; border-color: #3f9a55; }
/* source-origin chips: third-party module + Starfinder */
.trait.tt-module { background: #2a2336; color: #d8c6f0; border-color: #6d54a0; text-transform: none; font-weight: 600; }
.trait.tt-sf2e { background: #1d3a52; color: #8fd0ff; border-color: #3a78b0; text-transform: none; font-weight: 700; letter-spacing: .3px; }
/* edition badge: shown under the type indicator (Creature/Action/…) */
.ebadge { font-size: 10.5px; letter-spacing: .03em; padding: 1px 6px; border-radius: 4px; white-space: nowrap; text-align: center; }
.ebadge.rm { background: #1c3a24; color: #7fd99a; border: 1px solid #3a7a4e; }
.ebadge.pr { background: #34302a; color: #b8a888; border: 1px solid #5a5040; }
/* row type column: type badge with edition stacked below */
.tcol { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; }
/* detail header: type + level on row 1, edition below */
.sb-title .sb-tags { flex-direction: column; align-items: flex-end; gap: 5px; }
.sb-title .tagrow { display: inline-flex; gap: 6px; align-items: baseline; }
.tt-ed { margin-top: 4px; }

/* detail panel */
.detail { overflow-y: auto; background: var(--card); border-left: 2px solid var(--gold); padding: 0; position: relative; }
.detail[hidden] { display: none; }
.detail-close { position: absolute; top: 10px; right: 12px; border: none; background: transparent; font-size: 19px; cursor: pointer; color: var(--ink-soft); z-index: 2; }
.detail-close:hover { color: var(--gold-bright); }
#detail-body { padding: 20px 24px 60px; }
.sb-head { display: flex; gap: 14px; align-items: flex-start; border-bottom: 2px solid var(--gold); padding-bottom: 10px; margin-bottom: 10px; }
.sb-head img { width: 72px; height: 72px; border-radius: 8px; object-fit: cover; border: 1px solid var(--line); background: #2a2f36; flex: none; }
img.zoomable { cursor: zoom-in; }
#lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.85); cursor: zoom-out; padding: 24px; }
#lightbox[hidden] { display: none; }
#lightbox img { max-width: 96vw; max-height: 96vh; border-radius: 8px; box-shadow: 0 8px 40px rgba(0,0,0,.6); border: 1px solid var(--gold); }
.sb-title { flex: 1; }
.sb-title h2 { font-size: 23px; margin: 0; display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.sb-title .sb-name { flex: 1; min-width: 0; }
.sb-title .sb-tags { display: inline-flex; gap: 6px; align-items: baseline; flex: none; }
.sb-title .typ { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--on-gold); background: var(--gold); padding: 2px 8px; border-radius: 4px; font-weight: 700; }
.sb-title .tier-pill { font-size: 13px; font-weight: 700; color: var(--gold-bright); background: #2a2c33; border: 1px solid var(--line); padding: 1px 10px; border-radius: 10px; white-space: nowrap; }
.sb-meta { font-size: 13px; color: var(--ink-soft); margin-top: 3px; }
.kv { margin: 6px 0; } .kv b { color: var(--gold-bright); }
.kvline { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 14.5px; }
.kvline .kv { margin: 0; }
.statline { background: var(--parch-2); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; margin: 8px 0; font-size: 14px; }
.statline b { color: var(--gold-bright); }
.section-h { border-bottom: 2px solid var(--gold); margin: 18px 0 8px; padding-bottom: 4px; font-size: 13px;
  font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--gold-bright); }
/* each ability is a clearly separated block with a heavier name line */
.ability { margin: 0; padding: 9px 0 10px; border-top: 1px solid var(--line); }
.ability:first-of-type { border-top: none; padding-top: 2px; }
.ability .an { display: inline; font-weight: 700; color: var(--gold-bright); font-size: 16.5px; line-height: 1.35; }
.ability .an .action-glyph { font-size: 17px; margin-right: 2px; }
.ability .prose { margin-top: 3px; }
.ability .sb-meta { font-style: italic; }
/* Foundry-style NPC statblock layout */
.npc-vitals { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.vital { background: var(--parch-2); border: 1px solid var(--line); border-radius: 6px; padding: 4px 11px; text-align: center; min-width: 50px; }
.vital .vl { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--gold-bright); font-weight: 700; }
.vital .vv { display: block; font-size: 17px; font-weight: 700; color: var(--ink); }
.npc-defense { font-size: 15px; margin: 5px 0 9px; }
.npc-sec { border: 1px solid var(--line); border-radius: 7px; margin: 10px 0; overflow: hidden; background: var(--card); }
.npc-sec-h { margin: 0; padding: 6px 11px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  color: var(--gold-bright); background: linear-gradient(180deg, #2c2415, #221b0f); border-bottom: 1px solid var(--gold); }
.npc-sec-body { padding: 9px 11px; }
.npc-sec-body > .ability:first-child { border-top: none; padding-top: 0; }
/* senses / languages chips — larger, readable */
.npc-sec-body > .trait { font-size: 15px; text-transform: none; padding: 2px 9px; margin: 2px 4px 2px 0; }
/* trait chips on attacks / actions / passives */
.atraits { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 4px; vertical-align: middle; }
.atraits .trait { font-size: 15px; text-transform: none; padding: 2px 9px; }
.attr-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
.attr { text-align: center; background: var(--parch-2); border: 1px solid var(--line); border-radius: 4px; padding: 2px 1px; font-size: 11px; font-weight: 600; }
.attr b { font-weight: 700; color: var(--gold-bright); text-transform: uppercase; letter-spacing: .3px; margin-right: 3px; }
.prose { font-size: 14.5px; }
.prose p { margin: .5em 0; } .prose hr { border: none; border-top: 1px solid var(--line); margin: 8px 0; }
.gives { background: #221c10; border: 1px solid var(--gold-tint); border-radius: 6px; padding: 8px 10px; margin: 10px 0; }
.gives h4 { margin: 0 0 4px; } .gives ul { margin: 0; padding-left: 18px; }

/* inline tag rendering */
@font-face { font-family: "Pathfinder2eActions"; src: url("../fonts/pathfinder-2e-actions.woff2") format("woff2"); font-display: swap; }
.action-glyph, .pf2-icon { font-family: "Pathfinder2eActions", sans-serif; font-weight: normal; font-style: normal;
  letter-spacing: 0; color: var(--gold-bright); line-height: 1; vertical-align: baseline; }
.act-range { color: var(--gold-bright); font-weight: 700; }
.inline-check { font-weight: 600; color: var(--gold-bright); }
.inline-damage { font-weight: 600; color: #e88a63; }
.inline-template { font-style: italic; color: var(--ink); }
.inline-roll { font-weight: 600; color: var(--ink); }
.ref { border-bottom: 1px dotted var(--accent); }
.ref-ext { color: var(--ink-soft); border-bottom: 1px dotted #555; }

.trait.sup-trait { font-size: 9px; padding: 0 4px; margin-left: 3px; vertical-align: middle; opacity: .9; }
/* trait chips that link to their definition */
a.appsearch { color: var(--accent); border-bottom: 1px dotted var(--accent); cursor: pointer; }
a.trait.ref { border-bottom: none; cursor: pointer; text-decoration: none; }
a.trait.ref:hover { border-color: var(--gold); color: var(--ink); }
/* AoN rules rendering (headings reuse the journal .prose h2/h3 styles) */
.prose .aon-aside { background: #221c10; border: 1px solid var(--gold-tint); border-left: 3px solid var(--gold); border-radius: 6px; padding: 8px 12px; margin: 12px 0; }
.prose .aon-aside h2, .prose .aon-aside h3 { font-size: 14px; margin: 8px 0 2px; }
.prose .aon-center { text-align: center; }
.aon-credit { margin: 16px 0 4px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-soft); font-style: italic; }
.aon-credit a { color: var(--accent); }
/* journal tables (GM Screen etc.) */
.prose table { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 13px; }
.prose th, .prose td { border: 1px solid var(--line); padding: 4px 8px; text-align: left; vertical-align: top; }
.prose th { background: var(--parch-2); color: var(--gold-bright); }
.prose th.th-sort, .prose .th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.prose .th-sort:hover { color: var(--gold); }
.prose .th-sort::after { content: " \2195"; opacity: .35; font-size: .85em; }
.prose .th-sort[data-sort="asc"]::after { content: " \2191"; opacity: 1; }
.prose .th-sort[data-sort="desc"]::after { content: " \2193"; opacity: 1; }
.prose tr:nth-child(even) td { background: rgba(255,255,255,.02); }
.prose img { max-width: 100%; height: auto; border-radius: 4px; }
.prose h1, .prose h3 { font-size: 16px; }
/* embedded feat/ability blocks (archetypes, class features, etc.) */
.prose h2 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  border-bottom: 1px solid var(--line); padding-bottom: 3px; margin: 16px 0 6px; font-size: 17px; }
.prose h2 a.ref { color: var(--gold-bright); border-bottom-color: var(--gold); }
.prose h2 [style*="float"] { float: none !important; font-size: 13px; font-weight: 400; color: var(--ink-soft); white-space: nowrap; }
.prose ul.tags, .prose ul.paizo-style { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 0; margin: 5px 0; }
.prose li.tag { font-size: 10.5px; background: var(--chip); color: var(--ink-soft); border: 1px solid var(--line);
  padding: 0 6px; border-radius: 3px; text-transform: capitalize; }
.prose p > span:only-child[style*="float"] { display: block; float: none !important; text-align: right;
  font-size: 12px; font-style: italic; color: var(--ink-soft); }
.prose p:empty { display: none; }
.prose .embed { margin: 2px 0 12px; padding-left: 11px; border-left: 2px solid var(--gold-tint); }

/* hover tooltip */
#tooltip { position: fixed; z-index: 60; max-width: 340px; background: #191b20; border: 1px solid var(--gold);
  border-radius: 8px; padding: 9px 12px; box-shadow: 0 6px 22px rgba(0,0,0,.6); font-size: 13px; pointer-events: none; display: none; }
#tooltip.on { display: block; }
#tooltip .tt-h { font-weight: 700; color: var(--gold-bright); font-size: 14px; }
#tooltip .tt-t { color: var(--ink-soft); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; }
#tooltip .tt-l { color: var(--ink); margin-top: 4px; }
#tooltip .tt-s { color: var(--ink-soft); margin-top: 5px; line-height: 1.4; }

.loading { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: var(--parch); font-size: 18px; color: var(--gold-bright); z-index: 50; }
.loading.done { display: none; }

@media (max-width: 900px) {
  #topbar { gap: 10px; padding: 8px 12px; flex-wrap: wrap; }
  #filter-toggle { display: inline-flex; align-items: center; }
  .brand { font-size: 16px; }
  .count { display: none; }
  .searchwrap { order: 4; flex-basis: 100%; max-width: none; }
  #tabs .tab { padding: 9px 12px; font-size: 13px; }

  #layout, #layout.detail-open { grid-template-columns: 1fr; }
  .splitter { display: none; }

  /* filters become a slide-in drawer */
  #filters { position: fixed; top: 0; bottom: 0; left: 0; width: 86%; max-width: 340px; z-index: 60;
    transform: translateX(-100%); transition: transform .22s ease; box-shadow: 3px 0 20px rgba(0,0,0,.55); }
  #filters.open { transform: translateX(0); }
  #filter-backdrop.open { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 55; }

  /* detail opens full-screen over the list */
  #layout.detail-open .detail { position: fixed; inset: 0; z-index: 50; width: 100%; border-left: none; }
  #detail-body { padding: 16px 16px 60px; }
  .detail-close { width: 40px; height: 40px; font-size: 22px; }

  .npc-vitals { gap: 5px; } .vital { min-width: 44px; padding: 4px 8px; }
  .attr-grid { grid-template-columns: repeat(3, 1fr); }
  .sb-head img { width: 56px; height: 56px; }
  .sb-title h2 { font-size: 19px; }
}