/* GENERATED by dev/prerender.mjs — DO NOT EDIT, DO NOT COMMIT.
 * index.html’s inline <style>, verbatim, so the prerendered entity pages render through the
 * SAME rules as the SPA instead of a hand-matched copy. Re-extracted on every build.
 * Loaded BEFORE wiki-data/entity-page.css, which owns the static page frame and wins on overlap.
 */
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(1200px 600px at 50% -10%,var(--bg-grad-top) 0%,var(--bg) 60%);color:var(--ink);font-family:var(--font-body);font-size:14px;line-height:1.5}
a{color:var(--acc);text-decoration:none}a:hover{text-decoration:underline}
header{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;padding:12px 20px;background:var(--header-bg);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.logo{font-family:var(--font-display);font-weight:var(--fw-bold);letter-spacing:.06em;font-size:18px;color:var(--ink-strong);cursor:pointer;flex:none;text-decoration:none}
.logo:hover{text-decoration:none}
.brand{display:flex;align-items:baseline;gap:14px;flex:none}
.logo .sv{color:var(--acc)}
.tagline{color:var(--faint);font-size:11.5px;font-weight:500;flex:none;letter-spacing:.01em}
@media(max-width:680px){.tagline{display:none}}









/* look lives in wiki-data/theme.css (shared component); this page owns only the header-slot layout */
#gsearch{flex:0 1 420px;max-width:420px}
.grow{flex:1}
@media(max-width:640px){header{flex-wrap:wrap;column-gap:8px;row-gap:8px;padding:12px}#gsearch{order:5;flex:1 1 100%;max-width:none}}
main{max-width:1180px;margin:0 auto;padding:22px 20px 60px;transition:margin-right .22s ease}
/* CLS reservation (#130): nav.tabs ships EMPTY and is filled by wikitabs.js -- whose own CSS (incl.
   this same min-height) arrives with the module, ~1.5s into a throttled cold load, and whose content
   arrives later still. Without a reservation here, in this page's INLINE critical CSS, the bar's
   appearance pushed the entire page down 43px: measured 0.78 CLS on '/' mobile, the worst single
   shift on the site. Keep the value equal to wikitabs.js's TABS_H -- verify.mjs [tabs reserve]. */
nav.tabs{min-height:43px;box-sizing:border-box}
/* CLS structural reservation (#130). ONE rule that covers every phase and route: keep #view at least a
   viewport tall so the footer and the report bar are never inside the first screenful, whatever the SPA
   is doing. Scoping this to the loading placeholder instead was not enough -- the reservation vanished
   the moment ANY content rendered, so (a) a two-stage route (#/changelog, #/cosmetics: shell first, feed
   after a second fetch) collapsed to ~256px in between and (b) a genuinely SHORT route (#/dungeons)
   settled shorter than the placeholder, pulling the footer back up. Both showed up as 0.2-0.6 shifts.
   Cost: short routes leave whitespace above the footer. That is the deliberate side of the
   over-reserving tradeoff -- whitespace below the fold beats moving content the user is reading. */
#view{min-height:calc(100vh - 150px)}
h1{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:24px;margin:0 0 4px;color:var(--ink-strong)}
h2{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:15px;letter-spacing:.05em;color:var(--acc2);margin:22px 0 10px;padding-bottom:7px;border-bottom:1px solid var(--line)}
.sub{color:var(--faint);font-size:13px;margin:0 0 18px}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 10px}
.filters input,.filters select{background:var(--panel2);border:1px solid var(--line2);color:var(--ink);border-radius:8px;padding:7px 10px;font:inherit}
.filters input{flex:1;min-width:180px}
.chip{padding:5px 11px;border-radius:20px;border:1px solid var(--line2);background:var(--panel2);color:var(--dim);cursor:pointer;font-size:12px;font-weight:600}
.chip.on{background:var(--chip-on-bg);border-color:var(--acc);color:var(--chip-on-ink)}
.count{color:var(--faint);font-size:12px;margin-left:auto;font-family:var(--font-mono)}
.filters2{display:flex;gap:14px 12px;flex-wrap:wrap;align-items:center;margin:0 0 16px;padding:11px 13px;background:var(--panel);border:1px solid var(--line);border-radius:11px}
.fgrp{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.flab{color:var(--faint);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-right:1px}
.fsel{background:var(--panel2);border:1px solid var(--line2);color:var(--ink);border-radius:8px;padding:6px 9px;font:inherit;font-size:12.5px;max-width:200px}
.chip.sm{padding:3px 9px;font-size:11px}
.frange{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.frlab{color:var(--faint);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.frval{font-family:var(--font-mono);font-size:12px;color:var(--acc);min-width:62px;text-align:center}
.dslider{position:relative;width:190px;height:22px;flex:none}
.dtrack{position:absolute;top:50%;left:1px;right:1px;height:4px;transform:translateY(-50%);background:var(--line2);border-radius:3px}
.dfill{position:absolute;top:50%;height:4px;transform:translateY(-50%);background:var(--acc);border-radius:3px}
.dslider input[type=range]{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.dslider input[type=range]:focus{outline:none}
.dslider input[type=range]::-webkit-slider-runnable-track{background:none;border:none}
.dslider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;pointer-events:auto;width:15px;height:15px;margin-top:-5.5px;border-radius:50%;background:var(--acc);border:2px solid var(--panel);box-shadow:0 1px 3px rgba(0,0,0,.55);cursor:grab}
.dslider input[type=range]::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.12)}
.dslider input[type=range]::-moz-range-track{background:none;border:none}
.dslider input[type=range]::-moz-range-thumb{pointer-events:auto;width:15px;height:15px;border:2px solid var(--panel);border-radius:50%;background:var(--acc);box-shadow:0 1px 3px rgba(0,0,0,.55);cursor:grab}
.fclear{color:var(--faint);font-size:11.5px;font-weight:600;cursor:pointer;border:0;background:none;padding:4px 2px;text-decoration:underline}
.fclear:hover{color:var(--ink)}
.zcell{font-size:12px;line-height:1.4;max-width:210px}
.zlink{font-weight:600}
.craftrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.craftrow:last-child{border-bottom:0}
.csrc{font-size:12px;text-align:right}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:10px}
.card{display:flex;gap:11px;align-items:flex-start;background:var(--panel);border:1px solid transparent;border-radius:11px;padding:11px 12px;cursor:pointer;min-width:0;margin:0} /* wiki list TILE, not the theme.css module card — margin pinned against the shared base */
.card:hover{border-color:var(--acc);text-decoration:none}
.ic{width:42px;height:42px;border-radius:9px;flex:none;background:var(--panel2);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;overflow:hidden;font-weight:700;font-size:14px}
.ic img{width:100%;height:100%;object-fit:cover;display:block}
.mth{width:22px;height:22px;border-radius:6px;flex:none;display:inline-block;vertical-align:middle;overflow:hidden;background:var(--panel2);border:1px solid var(--line2)}
.mth img{width:100%;height:100%;object-fit:cover;display:block}
.mrow{display:flex;align-items:center;gap:8px;min-width:0}
a.mrow,a.mrow:hover{color:inherit;text-decoration:none} /* row-name link: native new-tab gestures, list-row look */
.cbmeta{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-bottom:14px}
.cbmeta .tag{background:none;border:0;padding:0;margin:0;color:var(--faint);text-transform:uppercase;font-size:10.5px;letter-spacing:.05em;font-weight:700}
.cbmeta .tag.coin{color:#e8c15a}.cbmeta .tag.exp{color:#7cc4f0}
[data-theme=light] .cbmeta .tag.coin{color:#7a5500}[data-theme=light] .cbmeta .tag.exp{color:#1c62a0}
.sbars{display:grid;grid-template-columns:1fr 1fr;gap:6px 20px;max-width:560px}
.sbar{display:flex;align-items:center;gap:8px;font-size:11.5px}
.sbar .sk{width:30px;color:var(--dim);font-weight:700;font-family:var(--font-mono);font-size:10.5px}
.sbar .strack{flex:1;height:7px;border-radius:4px;background:var(--panel2);border:1px solid var(--line2);overflow:hidden}
.sbar .strack i{display:block;height:100%;background:linear-gradient(90deg,var(--acc2),var(--acc))}
.sbar .sv{width:26px;text-align:right;color:var(--ink);font-family:var(--font-mono)}
.dstats{display:flex;gap:0;flex-wrap:wrap;margin-bottom:16px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel2)}
.ds{background:none;border:0;border-right:1px solid var(--line);border-radius:0;padding:10px 14px;flex:1 1 auto;min-width:max-content}
.ds:last-child{border-right:0}
.dsk{display:block;font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.04em}
.dsv{display:block;font-family:var(--font-mono);font-size:18px;color:var(--acc);font-weight:600;margin-top:1px;font-variant-numeric:tabular-nums;white-space:nowrap}
.elaff{display:flex;flex-direction:column;gap:8px}
.elaff .elrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.elaff .elk{width:64px;flex:none;font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--dim);font-weight:700}
.elaff .elk.wk{color:#ff7043}.elaff .elk.rs{color:#4f8cff}
.elbadges{display:flex;flex-wrap:wrap;gap:6px}
.elbdg{display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 4px;border:0;border-radius:20px;background:var(--panel2);font-size:11.5px;font-weight:600;color:var(--ink)}
.elbdg img{width:16px;height:16px;object-fit:contain;display:block;flex:none}
.elbdg b{font-family:var(--font-mono);font-weight:700;font-size:10.5px;color:var(--dim)}
.tag img.eli{width:13px;height:13px;object-fit:contain;vertical-align:-2px;margin-right:4px}
.skillgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.skill{display:flex;align-items:center;gap:9px;padding:7px 9px;border:1px solid transparent;border-radius:9px;background:none;min-width:0}
.skill:hover{border-color:var(--line);background:var(--hover);text-decoration:none}
.skico{width:30px;height:30px;border-radius:7px;flex:none;overflow:hidden;background:var(--panel);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;color:var(--acc2)}
.skico img{width:100%;height:100%;object-fit:cover;display:block}
.skico.skx{color:var(--dim)}
.skn{font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.skn b{color:var(--acc2);font-weight:600;font-family:var(--font-mono);font-size:11px}
.usagelist{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.usageb{display:flex;align-items:center;gap:9px;padding:7px 9px;border:1px solid transparent;border-radius:9px;background:none;min-width:0}
.usageb:hover{border-color:var(--line);background:var(--hover);text-decoration:none}
.usageb .ub-ico{width:26px;height:26px;border-radius:6px;flex:none;object-fit:cover;background:var(--panel);border:1px solid var(--line2)}
.usageb .ub-t{min-width:0;display:flex;flex-direction:column;line-height:1.25}
.usageb .ub-n{font-size:12.5px;color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.usageb .ub-a{font-size:11px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.artpieces{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.artpiece{display:flex;gap:10px;align-items:stretch;background:var(--panel2);border:0;border-radius:9px;padding:9px 10px}
.artpiece .ic{width:44px;height:44px;flex:none}
.artpiece .apbody{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.apd{font-size:11.5px;color:var(--dim);line-height:1.45}
.apsrc{display:flex;flex-wrap:wrap;gap:4px;margin-top:auto;padding-top:6px}
.bgroup{margin-bottom:12px}
.bgroup:last-child{margin-bottom:0}
.bglabel{display:block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);margin:0 0 6px}
.ci{min-width:0;flex:1}
.cn{display:block;font-weight:600;color:var(--ink-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13.5px}
.cnrow{display:flex;align-items:baseline;gap:8px}
.cnrow .cn{flex:1}
.cviews{flex:none;color:var(--faint);font-size:11px;font-weight:600;font-family:var(--font-mono);display:inline-flex;align-items:center;gap:3px;line-height:1}
.cviews svg{width:12px;height:12px;opacity:.7;transform:translateY(.5px)}
.cm{display:block;color:var(--faint);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.cd{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;line-height:1.35;min-width:0;overflow:hidden}
.sct{display:inline-flex;align-items:center;max-width:100%;min-width:0;background:var(--panel2);border:0;border-radius:5px;padding:1px 6px;font-size:10.5px;color:var(--acc2);font-family:var(--font-mono);white-space:normal;overflow-wrap:anywhere;line-height:1.35}
.sct.mut{color:var(--dim)}
.cdesc{color:var(--faint);font-size:11.5px;margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Comfy density (prototype): roomier rows + un-truncated detail. Toggle lives in the list toolbar. */
.grid.comfy{grid-template-columns:repeat(auto-fill,minmax(430px,1fr))}
.grid.comfy .card{padding:14px 15px;gap:14px}
.grid.comfy .ic{width:56px;height:56px;font-size:16px;border-radius:11px}
.grid.comfy .cn{white-space:normal}
.grid.comfy .cm{white-space:normal;font-size:12px}
.grid.comfy .cd{overflow:visible;margin-top:7px}
.grid.comfy .cx{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:8px;font-size:11.5px;color:var(--dim)}
.grid.comfy .cxi{display:inline-flex;align-items:center;gap:5px}
.grid.comfy .cxk{color:var(--faint);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:9.5px}
.grid.comfy .cxnm{color:var(--ink-strong);font-weight:600}
.grid.comfy .cx .pel{display:inline-flex;align-items:center;gap:3px;font-weight:700}
.grid.comfy .cx .pel img{width:13px;height:13px;object-fit:contain}
.grid.comfy .cxlv{color:var(--faint);font-family:var(--font-mono);font-size:10.5px;margin-left:5px}
/* Comfy table (equipment): EQUIPMENT | STATS | OBTAINED — roomy 3-column reference layout, own palette */
.ctable{--ctcols:minmax(190px,1fr) minmax(210px,1.15fr) minmax(210px,1.2fr);display:block}
.cthead{display:grid;grid-template-columns:var(--ctcols);gap:14px 24px;padding:0 6px 11px;border-bottom:1px solid var(--line2)}
.cth{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.ctrow{display:grid;grid-template-columns:var(--ctcols);gap:14px 24px;padding:16px 6px;border-bottom:1px solid var(--line);align-items:start}
.ctrow:hover{background:var(--hover)}
.cteq{display:flex;gap:13px;align-items:flex-start;text-decoration:none;min-width:0}
.cteq:hover{text-decoration:none}
.cteq .ic{width:56px;height:56px;font-size:16px;border-radius:11px;flex:none}
.cteqinfo{min-width:0;display:flex;flex-direction:column;gap:8px;padding-top:2px}
.cteq .cn{font-size:15px;font-weight:700;color:var(--acc);line-height:1.25;white-space:normal;overflow:visible;text-overflow:clip}
.cttags{display:flex;flex-wrap:wrap;gap:6px}
.cttag{font-size:10.5px;font-weight:600;color:var(--warn);border:1px solid var(--warn);border-radius:6px;padding:1px 8px;line-height:1.6;white-space:nowrap}
.cttag.uniq{color:var(--uniq-ink);border-color:var(--uniq-ink);background:var(--uniq-bg)}
.ctstats{font-size:12.5px;line-height:1.5;color:var(--ink)}
.cstk{color:var(--dim)}
.cstv{color:var(--ink);font-weight:700}
.cstsp{height:10px}
.ctobt{font-size:12.5px;line-height:1.5;min-width:0}
.ctline{margin-bottom:3px}
.ctlv{color:var(--faint);font-family:var(--font-mono);font-size:11px}
.ctlink{color:var(--acc);font-weight:600}
.ctpct{display:inline-block;border:1px solid currentColor;border-radius:20px;padding:0 7px;font-size:10px;font-family:var(--font-mono);vertical-align:middle;margin-left:2px}
.ctpct.lead{box-sizing:border-box;width:46px;text-align:center;margin-left:0;margin-right:8px}
.ctcraft{margin-top:8px;color:var(--dim)}
.ctmat{color:var(--dim);margin-top:1px}
.ctdesc{margin:0;color:var(--dim);font-size:12px;line-height:1.45}
.ctgrp{margin-bottom:9px}
.ctgrp:last-child{margin-bottom:0}
.ctgl{display:block;color:var(--faint);font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}
.ctmore{color:var(--faint);font-size:11.5px;margin-top:3px}
@media(max-width:720px){.cthead{display:none}.ctrow{grid-template-columns:1fr;gap:12px}}
.badge{display:inline-block;font-size:10px;font-weight:700;padding:1px 7px;border-radius:20px;vertical-align:middle}
.badge.boss{background:var(--boss-bg);color:var(--boss-ink)}
.rb{font-family:var(--font-mono);font-size:11px;color:var(--gold)}
/* cosmetics gallery (#/cosmetics) */
.cosc{cursor:default}
.cosc:hover{border-color:var(--line2)}
.cosprice{display:inline-flex;align-items:center;gap:4px;flex:none;font-family:var(--font-mono);font-size:12px;color:var(--gold);white-space:nowrap}
.cosprice img{width:13px;height:13px}
.cossec{margin:20px 0 8px}
.cosc .ic{width:52px;height:52px}
/* detail */
.back{display:inline-block;color:var(--faint);font-size:12.5px;margin-bottom:12px;cursor:pointer}
.dhead{display:flex;gap:16px;align-items:flex-start;margin-bottom:8px}
.dhead .ic{width:72px;height:72px;font-size:22px;border-radius:13px}
.dmeta{flex:1;min-width:0}
/* .tag base from theme.css */
.tag-link{color:var(--acc);cursor:pointer}
.tag-link:hover{border-color:var(--acc);color:var(--ink-strong);text-decoration:none}
.desc{color:var(--dim);font-size:13px;margin:10px 0;max-width:70ch}
.panel{background:none;border:0;border-radius:0;padding:0;margin:26px 0 0}
.mcols{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:16px;align-items:start}
.mcol-side{min-width:0}
.mcol-side .panel{margin-top:0}
/* set 3D preview (wiki set detail) — the singleton viz3d canvas is re-parented into #setVizMount */
.setviz{position:relative;width:100%;height:360px;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:radial-gradient(120% 120% at 50% 0%,var(--viz-bg-top,#22314c) 0%,var(--viz-bg-bot,#0d131f) 70%)}
.setviz canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none}
.setviz canvas:active{cursor:grabbing}
.setviz-hint{position:absolute;bottom:8px;left:10px;font-size:11px;color:var(--faint);pointer-events:none;background:var(--panel);padding:2px 8px;border-radius:999px;opacity:.85}
.setviz-note{position:absolute;top:10px;left:10px;margin:0!important;pointer-events:none}
.setviz-look{position:absolute;top:8px;right:8px;font-size:11px;color:var(--acc);background:var(--acc-bg);border:1px solid var(--acc);border-radius:999px;padding:3px 10px;cursor:pointer;user-select:none}
.setviz-look:hover{filter:brightness(1.12)}
.npcgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.npc{display:flex;gap:9px;align-items:flex-start;background:var(--panel2);border:0;border-radius:10px;padding:9px 11px}
.npcico{font-size:18px;line-height:1.25;flex:none;width:24px;text-align:center}
.npcglyph{width:22px;height:22px;object-fit:contain}
.npcico .npcglyph{vertical-align:-5px}
.npcmeta{min-width:0}
.npcname{font-weight:600;color:var(--ink-strong);font-size:13px}
.npcadv{color:var(--acc);font-weight:600}
.npcrole{color:var(--faint);font-size:11.5px;margin-top:1px}
.npcshop{margin-top:6px;display:flex;flex-wrap:wrap;gap:4px}
.npcbuy{font-size:11px;background:var(--bg);border:0;border-radius:6px;padding:2px 6px;color:var(--dim)}
.npcbuy b{color:var(--gold);font-weight:600}
.npcbuy a{color:var(--dim)}.npcbuy a:hover{color:var(--acc)}
@media(max-width:820px){.mcols{grid-template-columns:1fr}}
.stat{display:flex;justify-content:space-between;gap:14px;padding:6px 0;border-bottom:1px solid var(--line);font-size:13px}
.stat:last-child{border-bottom:none}.stat .k{color:var(--dim)}.stat .v{color:var(--acc);font-family:var(--font-mono);text-align:right}
/* "How it works" engine-formula sub-definitions (wiki-data/mechanics-explain.js) */
.xpl{border-top:1px solid var(--line);padding:6px 0}
.xpl:first-of-type{border-top:0}
.xpl>summary{cursor:pointer;font-size:13px;color:var(--acc);padding:4px 0;list-style:none}
.xpl>summary::-webkit-details-marker{display:none}
.xpl>summary::before{content:"+";color:var(--acc2);font-weight:700;margin-right:7px}
.xpl[open]>summary::before{content:"−"}
.xpl-lead{font-size:12.5px;line-height:1.55;margin:4px 0 6px;color:var(--fg)}
.xpl-b{margin:0 0 8px;padding-left:18px}
.xpl-b li{font-size:12px;line-height:1.5;color:var(--faint);margin:2px 0}
.xpl-fx{background:var(--panel2,rgba(255,255,255,.03));border-left:2px solid var(--acc2);padding:6px 9px;margin:6px 0;border-radius:3px}
.xpl-flabel{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);margin-bottom:3px}
.xpl-expr{display:block;font-size:12px;color:var(--acc);word-break:break-word;white-space:pre-wrap}
.xpl-note,.xpl-prov{font-size:11.5px;color:var(--faint);margin-top:4px;line-height:1.45}
.xpl-prov code{font-size:11px}
.xpl-more{display:inline-block;font-size:11.5px;margin-top:4px}
.statnote{color:var(--faint);font-size:11.5px;line-height:1.45;padding:3px 0 3px 18px}
.statnote::before{content:"\21b3";color:var(--acc2);margin-left:-14px;margin-right:6px}
/* potential-substats panel (equipment + artifacts) */
.subphdr{margin:0 0 12px;color:var(--dim);font-size:12px;line-height:1.55}
.subline{display:flex;align-items:baseline;gap:12px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px}
.subline:last-of-type{border-bottom:none}
.subline .sublk{flex:none;width:74px;color:var(--faint);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.subline .sublopts{flex:1;min-width:0;color:var(--dim);line-height:1.5}
.subline .sublopts em{color:var(--faint);font-style:normal;font-size:11.5px;padding:0 3px}
.subline .sublv{flex:none;color:var(--acc);font-family:var(--font-mono);text-align:right;white-space:nowrap}
.subline .subopt{white-space:nowrap}
.subline .subopt b{color:var(--acc);font-family:var(--font-mono);font-weight:400}
.subline .subdot{color:var(--faint)}
.subline.sublguar{border-bottom:2px solid var(--line)}
.subline.sublguar .sublk{color:var(--gold)}
.subline.sublguar .sublopts{color:var(--ink)}
.subline.sublguar .sublv{color:var(--gold)}
/* "a drop fills 2 of these N pools" — sits ON the pool block, between the guaranteed row and the
   rows it qualifies, because the same sentence buried at the end of .subphdr was never read. */
.subpick{margin:14px 0 0;padding:6px 0 6px 10px;border-left:2px solid var(--acc2);color:var(--dim);font-size:12px;line-height:1.55}
.subpick b{color:var(--ink)}
.subeg{margin:10px 0 0;color:var(--faint);font-size:11.5px;line-height:1.7}
.subeg b{color:var(--dim);font-weight:600}
.subeg .egstar{color:var(--gold)}
.subeg .subdot{color:var(--line)}
.subfoot{margin:12px 0 0;color:var(--dim);font-size:12px;line-height:1.55;border-left:2px solid var(--chaos-line);padding-left:10px}
.subfoot b{color:var(--chaos-ink)}
.contrib{display:flex;gap:14px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.contrib:last-child{border-bottom:none}
.contrib b{flex:none;min-width:120px;color:var(--ink-strong)}
.contrib span{color:var(--dim)}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;color:var(--faint);font-weight:600;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;padding:7px 8px;border-bottom:1px solid var(--line2)}
td{padding:7px 8px;border-bottom:1px solid var(--line)}
td.r,th.r{text-align:right;font-family:var(--font-mono)}
tr.clk{cursor:pointer}tr.clk:hover td{background:var(--row-hover)}
.pct{font-family:var(--font-mono)}.pct.hi{color:var(--acc)}.pct.lo{color:var(--warn)}.pct.rare{color:var(--rare)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:8px;background:var(--panel2);border:0;margin:0 6px 6px 0;font-size:12.5px;cursor:pointer}
.pill:hover{background:var(--hover);text-decoration:none}
.pill .dot{width:8px;height:8px;border-radius:50%}
.pill .pel{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:700;letter-spacing:.02em;opacity:.92}
.pill .pel img{width:12px;height:12px;object-fit:contain;flex:none}
.pill.asrc{align-items:center}
.asn{display:flex;flex-direction:column;gap:1px;min-width:0;text-align:left}
.asname{font-weight:600;color:var(--ink-strong);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.asloc{font-size:10px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mapwrap{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line2);margin-bottom:18px;background:var(--img-bg)}
/* Direct children only: the world map (.mapwrap>img) and a zone's minimap
   (.mapstage>img). NOT a descendant selector -- pin glyphs are <img> too, and
   would otherwise each pick up the --img-bg backdrop as a black box. */
.mapwrap>img,.mapstage>img{display:block;max-width:100%;max-height:520px;width:auto;margin:0 auto;background:var(--img-bg)}
.mapstage{position:relative;width:fit-content;margin:0 auto}
.mpin{position:absolute;transform:translate(-50%,-50%);font-size:15px;line-height:1;cursor:default;z-index:2;filter:drop-shadow(0 1px 2px rgba(0,0,0,.65));transition:transform .12s}
.mpin:hover{transform:translate(-50%,-50%) scale(1.35);z-index:3}
.mpin .npcglyph{width:20px;height:20px;display:block}
.mpin.mportal{width:24px;height:24px;border-radius:50%;cursor:pointer}
.mpin.mportal:hover{box-shadow:0 0 0 2px rgba(140,220,255,.95),0 0 14px 4px rgba(120,210,255,.55)}
.mpin.pulse{animation:mpulse 1s ease-out 3;border-radius:50%}
@keyframes mpulse{0%{box-shadow:0 0 0 0 rgba(120,210,255,.95)}70%{box-shadow:0 0 0 22px rgba(120,210,255,0)}100%{box-shadow:0 0 0 0 rgba(120,210,255,0)}}
.npc[data-pn]{cursor:pointer}
.npc[data-pn]:hover{outline:1px solid var(--line2)}
.mapcap{position:absolute;left:0;bottom:0;right:0;padding:14px 16px;background:linear-gradient(transparent,var(--mapcap-grad));font-family:var(--font-display);font-size:15px;color:var(--on-image)}
.mfarm{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.mfi{display:flex;flex-direction:column;gap:2px;padding:7px 12px;border:1px solid var(--line);border-radius:8px;min-width:110px}
.mfk{color:var(--faint);font-weight:700;text-transform:uppercase;font-size:9.5px;letter-spacing:.05em}
.mfv{color:var(--acc);font-family:var(--font-mono);font-size:14px}
.mfv .hint{font-family:var(--font-body);color:var(--dim)}
footer{max-width:1180px;margin:20px auto 40px;padding:16px 20px;border-top:1px solid var(--line);color:var(--faint);font-size:11.5px;line-height:1.6}
.hint{color:var(--faint);font-size:12px}
.ztiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-top:14px}
.ztile{position:relative;display:flex;flex-direction:column;gap:3px;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:12px 13px;overflow:hidden;transition:opacity .15s,transform .1s,border-color .15s}
.ztile:hover{border-color:var(--zc);text-decoration:none;transform:translateY(-1px)}
.ztile .zbar{position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--zc)}
.ztile .zn{font-family:var(--font-body);font-weight:600;color:var(--ink-strong);font-size:14px;padding-left:7px}
.ztile .zm{color:var(--faint);font-size:11.5px;padding-left:7px;font-family:var(--font-mono)}
.ztile.dim{opacity:.18;filter:grayscale(.7)}
.zthumb{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.15;z-index:0;transition:opacity .15s}
.ztile:hover .zthumb{opacity:.3}
.ztile .zbar,.ztile .zn,.ztile .zm{position:relative;z-index:1}
.ztile{min-height:64px}
.homehero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(290px,.75fr);gap:24px;align-items:center;margin:0 0 20px;padding:26px 24px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(135deg,rgba(95,211,154,.09),transparent 55%),var(--panel);overflow:hidden}
.heroL{min-width:0}
.herospot-slot{min-width:0}
.herospot{display:flex;flex-direction:column;gap:10px;background:linear-gradient(160deg,var(--acc-bg),var(--panel) 70%);border:1px solid var(--line);border-radius:14px;padding:16px 17px;text-decoration:none;transition:border-color .14s,transform .12s}
.herospot:hover{border-color:var(--acc);text-decoration:none;transform:translateY(-1px)}
.herospot.skel{min-height:150px;animation:fbpulse 1.3s ease-in-out infinite;border-style:dashed}
.spottag{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);font-weight:var(--fw-semibold)}
.spothead{display:flex;align-items:center;gap:11px;min-width:0}
.spotico{width:48px;height:48px;font-size:16px}
.spotti{min-width:0;flex:1}
.spotname{font-weight:var(--fw-semibold);color:var(--ink-strong);font-size:15.5px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.spotmeta{color:var(--dim);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.spoteqrow{display:flex;flex-wrap:wrap;gap:6px;padding-top:2px}
.spoteq{position:relative;width:36px;height:36px;border-radius:8px;flex:none;background:var(--inset);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;overflow:hidden}
.spoteq img{width:100%;height:100%;object-fit:cover;display:block}
.eqrf{position:absolute;right:0;bottom:0;font-size:8px;font-weight:700;color:var(--gold);background:var(--badge-bg);border-top-left-radius:5px;padding:0 2px 0 3px;font-family:var(--font-mono);line-height:1.35}
.spotgo{color:var(--acc);font-size:12.5px;font-weight:var(--fw-semibold);margin-top:2px}
.homehero h1{font-size:30px;margin:3px 0 8px}
.homehero .eyebrow{display:block;color:var(--acc);font-family:var(--font-display);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:var(--fw-semibold)}
.homehero .lead{color:var(--dim);font-size:15px;max-width:62ch;margin:0 0 16px}
.homehero .visit{margin:14px 0 0;color:var(--faint);font-size:12px}
.herocta{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.hbtn{display:inline-flex;align-items:center;gap:7px;padding:10px 18px;border-radius:10px;font-weight:var(--fw-semibold);font-size:14px;text-decoration:none;border:1px solid var(--line2);color:var(--ink);background:var(--surface);transition:border-color .14s,transform .12s,filter .14s}
.hbtn:hover{border-color:var(--acc);text-decoration:none;transform:translateY(-1px)}
.hbtn.pri{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.hbtn.pri:hover{filter:brightness(1.07)}
.heronew{display:inline-block;margin:12px 0 0;color:var(--dim);font-size:12.5px;text-decoration:none}
.heronew:hover{color:var(--acc)}
.verflash{display:inline-flex;align-items:center;gap:8px;max-width:100%;margin:9px 0 2px;padding:5px 12px 5px 11px;border-radius:999px;background:var(--acc-bg);border:1px solid var(--acc);color:var(--acc);font-family:var(--font-display);font-size:11.5px;font-weight:var(--fw-semibold);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .14s,transform .12s}
.verflash:hover{text-decoration:none;transform:translateY(-1px);background:var(--chip-on-bg,var(--acc-bg))}
.vf-lbl{flex:none}
.vf-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(54vw,360px);font-family:var(--font-body);font-weight:var(--fw-medium);letter-spacing:.01em;text-transform:none;color:var(--ink-strong);border-left:1px solid color-mix(in srgb,var(--acc) 40%,transparent);padding-left:9px}
.vf-go{flex:none;opacity:.85}
.vf-spark{flex:none;display:block}
.sechead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:22px 0 10px}
.sechead h2{margin:0;border:0;padding:0}
.homeh2{margin:22px 0 10px}
.gsec{grid-template-columns:repeat(auto-fill,minmax(176px,1fr));margin-top:10px}
.gsec .card{padding:8px 10px;gap:9px}
.gsec .ic{width:32px;height:32px;font-size:12px}
.gsec .cn{font-size:12.5px}
.gsec .cm{font-size:11px}
.fbgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.fbcard{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:13px 14px;min-width:0;text-decoration:none;transition:border-color .14s,transform .12s}
.fbcard:hover{border-color:var(--acc);text-decoration:none;transform:translateY(-1px)}
.fbico{width:46px;height:46px;border-radius:9px;flex:none;background:hsl(var(--h,150) 40% 14%);border:1px solid hsl(var(--h,150) 45% 32%);display:flex;align-items:center;justify-content:center;overflow:hidden;font-weight:700;font-size:14px;color:hsl(var(--h,150) 60% 74%)}
.fbico img{width:100%;height:100%;object-fit:cover;display:block}
.fbbody{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.fbname{font-weight:var(--fw-semibold);color:var(--ink-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.fbmeta{color:var(--faint);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fbby{color:var(--dim)}
.fbcard,.herospot{cursor:pointer}
.fbpl{display:inline-flex;align-items:center;line-height:0;flex:none}
.fbpl:empty{display:none}
.fbpl .svplink{margin-left:0}
.fblikes{flex:none;display:inline-flex;align-items:center;gap:3px;color:var(--gold);font-size:11.5px;font-weight:600;font-family:var(--font-mono)}.fblikes svg{display:block}
.fbcmts{flex:none;display:inline-flex;align-items:center;gap:3px;color:var(--faint);font-size:11.5px;font-weight:600;font-family:var(--font-mono)}.fbcmts svg{display:block}
.fbstats{flex:none;display:inline-flex;align-items:center;gap:9px}
.fbcard.skel{height:74px;background:var(--panel2);border-style:dashed;pointer-events:none;animation:fbpulse 1.3s ease-in-out infinite}
@keyframes fbpulse{0%,100%{opacity:.5}50%{opacity:.85}}
.fbcta{display:inline-block;padding:10px 16px;border-radius:10px;background:var(--surface);border:1px solid var(--line2);color:var(--ink);font-weight:var(--fw-semibold);font-size:13.5px;text-decoration:none}
.fbcta:hover{border-color:var(--acc);text-decoration:none}
.heroicons span:nth-child(2),.heroicons span:nth-child(4){transform:translateY(14px)}
.wmap{position:relative;width:100%;aspect-ratio:16/9;background:var(--img-bg) 0 0/100% 100% no-repeat;border:1px solid var(--line2);border-radius:14px;overflow:hidden;margin:6px 0 18px}
/* homepage market-listings teaser: top active listings by value, both sides (blue=WTB, green=sell) */
.mktgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin:6px 0 18px}
.mktcard{display:flex;align-items:center;gap:11px;padding:11px 13px;border:1px solid var(--line);border-radius:12px;background:var(--panel);text-decoration:none;transition:border-color .14s,transform .12s}
.mktcard:hover{border-color:var(--acc);text-decoration:none;transform:translateY(-1px)}
.mktcard.buy{box-shadow:inset 3px 0 0 #6ea8fe}
.mktcard.sell{box-shadow:inset 3px 0 0 var(--acc)}
.mktcard .mktico{width:40px;height:40px;flex:none;border-radius:9px;overflow:hidden;background:var(--panel2);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;color:var(--acc2);font-size:12px;font-weight:700}
.mktcard .mktico img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.mktcard .mktmeta{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.mktcard .mktname{font-weight:var(--fw-semibold,700);color:var(--ink-strong);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mktcard .mktname .rf{color:var(--gold,#e8b04b);font-family:var(--font-mono);font-size:11px}
.mktcard .mktside{font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:var(--fw-semibold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mktcard.buy .mktside{color:#6ea8fe}
.mktcard.sell .mktside{color:var(--acc)}
.mktcard .mktval{flex:none;font-family:var(--font-mono);font-size:13px;color:var(--ink-strong);text-align:right;line-height:1.2}
.mktcard .mktval small{display:block;color:var(--faint);font-size:9.5px;font-family:var(--font-body);letter-spacing:0;text-transform:none}
.mktcard.skel{min-height:62px;animation:fbpulse 1.3s ease-in-out infinite;border-style:dashed}
.toolnav{margin:18px 0 24px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,var(--panel),var(--panel2));overflow:hidden}
.toolnav .th{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:15px 17px;border-bottom:1px solid var(--line)}
.toolnav .th b{font-family:var(--font-display);color:var(--ink-strong);font-size:15px;letter-spacing:.05em}
.toolnav .th span{color:var(--faint);font-size:12.5px;text-align:right}
.toolgrid{display:grid;grid-template-columns:repeat(3,1fr)}
.tool{position:relative;display:grid;grid-template-columns:66px minmax(0,1fr) auto;gap:13px;align-items:center;min-height:112px;padding:15px 16px;color:var(--ink);border-right:1px solid var(--line);text-decoration:none;transition:background .14s,border-color .14s,transform .14s}
.tool:last-child{border-right:0}
.tool:hover{background:var(--hover);text-decoration:none;transform:translateY(-1px)}
.tool:after{content:'\203A';color:var(--faint);font-size:22px;line-height:1}
.tool:hover:after{color:var(--acc)}
.toolart{position:relative;width:66px;height:66px;border-radius:13px;background:#0c120e;border:1px solid var(--line2);overflow:hidden;display:block;box-shadow:inset 0 0 18px rgba(95,211,154,.08)}
.toolart img{position:absolute;object-fit:contain;display:block;filter:drop-shadow(0 2px 5px rgba(0,0,0,.55))}
.toolart img:first-child{width:48px;height:48px;left:8px;top:8px}
.toolart img:nth-child(2){width:28px;height:28px;right:4px;bottom:4px;background:rgba(12,18,14,.78);border:1px solid var(--line2);border-radius:8px;padding:2px}
.tool b{display:block;color:var(--ink-strong);font-size:13.5px;margin-bottom:3px}
.tool span:not(.toolart){display:block;color:var(--faint);font-size:12px;line-height:1.35}
@media(max-width:860px){.homehero{grid-template-columns:1fr}.toolgrid{grid-template-columns:1fr}.tool{border-right:0;border-bottom:1px solid var(--line)}.tool:last-child{border-bottom:0}.toolnav .th{display:block}.toolnav .th span{display:block;text-align:left;margin-top:3px}}
/* Savi for Discord band (home route). Replaces the old fixed-position pill: same install path, but
   in the page flow next to the tools grid instead of floating over every wiki route. */
.savisec{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:16px;align-items:center;margin:18px 0 26px;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(115deg,rgba(88,101,242,.13),transparent 56%),linear-gradient(180deg,var(--panel),var(--panel2))}
.savisec .sfico{width:64px;height:64px;border-radius:14px;display:block;object-fit:cover;background:var(--panel2);border:1px solid var(--line2);box-shadow:0 6px 18px var(--shadow)}
.savibody b{display:block;font-family:var(--font-display);color:var(--ink-strong);font-size:15px;letter-spacing:.05em}
.savibody p{margin:5px 0 0;color:var(--faint);font-size:12.5px;line-height:1.5}
.savicmds{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.savicmd{font-family:var(--font-mono);font-size:11px;color:var(--acc2);background:var(--panel2);border:1px solid var(--line2);border-radius:6px;padding:2px 7px}
.saviadd{display:flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;padding:11px 16px;border-radius:10px;background:#5865f2;color:#fff;font-weight:800;font-size:13.5px;text-decoration:none;box-shadow:0 6px 18px rgba(88,101,242,.3)}
.saviadd:hover{filter:brightness(1.08);color:#fff;text-decoration:none}
.saviadd svg{width:17px;height:17px}
.savinote{margin:7px 0 0;text-align:center;color:var(--faint);font-size:11px}
@media(max-width:860px){.savisec{grid-template-columns:48px minmax(0,1fr);row-gap:13px;align-items:start}.savisec .sfico{width:48px;height:48px;border-radius:11px}.savicta{grid-column:1/-1}}
.wtile{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;cursor:pointer;border:1px solid var(--wtile-border);background:var(--wtile-bg);border-radius:3px;padding:1px;overflow:hidden;transition:background .12s,transform .12s,opacity .12s;text-decoration:none}
.wtile:hover{background:var(--wtile-hover);transform:scale(1.14);z-index:5}
.wtile .wn{color:var(--on-image);font-weight:700;font-size:8.2px;line-height:1.04;text-shadow:-1px 1px 3px var(--on-image-shadow),0 0 3px var(--on-image-shadow)}
.wtile .wl{color:var(--on-image-dim);font-size:6.6px;font-weight:700;text-shadow:0 1px 2px var(--on-image-shadow)}
.wtile.dim{opacity:.12}
.wtile .wbi{position:absolute;top:1px;right:1px;width:44%;max-width:16px;min-width:9px;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--panel);border:1.5px solid var(--bc,var(--wboss));box-shadow:0 1px 3px var(--on-image-shadow),0 0 0 1px rgba(0,0,0,.35);z-index:3}
.wtile .wbi img{width:100%;height:100%;object-fit:cover;display:block}
.wtile .wbi.star{display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);border-color:var(--wboss)}
.wtile .wbi.star::before{content:'\2605';color:var(--wboss);font-size:8px;line-height:1;text-shadow:0 0 2px var(--on-image-shadow)}
.wtile:hover .wbi{border-color:var(--acc)}
.wedges{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:visible}
/* World-map connection arrows use the brand mint (theme-independent — they sit over dark map art).
   These stylesheet rules override the SVG presentation attributes set in JS, so no JS edit needed.
   The literal fallback is REQUIRED: --map-edge lives in the separately-cached theme.css, so a client
   on a stale theme.css would otherwise resolve var() to invalid -> stroke:none -> arrows vanish (#62). */
.wedges line{stroke:var(--map-edge,#5fd39a)}
.wedges circle{fill:var(--map-edge,#5fd39a)}
.wedges marker path{stroke:var(--map-edge,#5fd39a)}
/* World-map max-level slider: brand accent instead of the OS/browser default (was rendering purple). */
#mlvl{accent-color:var(--acc)}
/* CLS reservation (#130). The placeholder used to be ~170px tall, which left the footer AND the report
   bar inside the first viewport on every device; when the route rendered (~5s cold+throttled) they were
   shoved thousands of px down -- 0.34 CLS on '/' mobile even after the tabs-bar fix. Reserving roughly
   a viewport of height puts both BELOW the fold at first paint, so their later move is off-screen and
   costs nothing. The reservation rides the placeholder, not #view, so it evaporates the moment real
   content lands: no route can inherit a permanently over-tall empty area (the over-reserving trap).
   Slack is deliberate -- 100vh minus the tallest chrome (header 106 + tabs 43 + main padding 82). */
.loading{text-align:center;color:var(--faint);padding:60px;box-sizing:border-box;min-height:calc(100vh - 150px);display:flex;align-items:center;justify-content:center}


a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,.chip:focus-visible,.pill:focus-visible,.card:focus-visible,.tool:focus-visible,.ztile:focus-visible,nav.tabs a:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
@media(max-width:640px){.dhead{flex-direction:column}}
/* detail sidebar drawer */
#sidebar{position:fixed;top:97px;right:0;width:clamp(320px,34vw,460px);height:calc(100vh - 97px);background:var(--panel);border-left:1px solid var(--line);box-shadow:-14px 0 34px var(--shadow);transform:translateX(100%);transition:transform .22s ease;z-index:18;display:flex;flex-direction:column}
#sidebar.open{transform:translateX(0)}
#sbHead{display:flex;align-items:center;gap:8px;padding:13px 18px;border-bottom:1px solid var(--line);flex:none}
#sbTitle{font-family:var(--font-body);font-size:15px;color:var(--ink-strong);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:4px}
.sbdiv{width:1px;height:22px;background:var(--line2);flex:none;margin:0 2px}
#sbClose{flex:none;background:var(--panel2);border:1px solid var(--line2);color:var(--ink);border-radius:8px;width:30px;height:30px;font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .15s,color .15s}
#sbClose:hover{border-color:var(--acc);color:var(--acc)}
.sbbtn{flex:none;background:var(--panel2);border:1px solid var(--line2);color:var(--dim);border-radius:8px;width:30px;height:30px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .15s,color .15s}
.sbbtn:hover{border-color:var(--acc);color:var(--acc)}
.sharebtn{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:8px;border:1px solid var(--line2);background:var(--panel2);color:var(--dim);font:inherit;font-size:12px;font-weight:600;cursor:pointer;vertical-align:middle;text-decoration:none;transition:border-color .15s,color .15s}
.sharebtn:hover{border-color:var(--acc);color:var(--acc);text-decoration:none}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(10px);background:var(--panel);border:1px solid var(--acc);color:var(--ink-strong);border-radius:9px;padding:9px 16px;font-size:13px;font-weight:600;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:90}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
#maptip{position:fixed;z-index:70;max-width:290px;background:var(--panel);border:1px solid var(--line2);border-radius:10px;box-shadow:0 12px 30px var(--shadow);padding:9px 11px;font-size:12px;pointer-events:none;display:none}
#maptip.on{display:block}
#maptip .mtt{font-weight:700;color:var(--ink-strong);font-size:13px}
#maptip .mtsub{color:var(--dim);font-size:11px;margin-top:2px}
#maptip .mtrow{margin-top:6px;color:var(--dim);font-size:11px;line-height:1.45}
#maptip .mtk{color:var(--faint);font-weight:700;text-transform:uppercase;font-size:9.5px;letter-spacing:.05em;display:block;margin-bottom:2px}
#maptip .mtb{color:var(--gold)}
#maptip .npcglyph{width:16px;height:16px;vertical-align:-3px}
#sidebarBody{padding:16px 16px 44px;overflow:auto;flex:1}
#sidebarBody h1{font-size:20px}
#lgrid .card.active{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc) inset}
body.sb-open main{margin-left:max(20px,calc((100vw - 1180px)/2));margin-right:clamp(320px,34vw,460px)}
@media(max-width:800px){#sidebar{top:0;height:100vh;width:100%;box-shadow:none;z-index:40}body.sb-open main{margin-right:0;margin-left:auto}}
/* ===== Site Updates (#/changelog) — editorial cards + machine data diffs ===== */
.clentry{margin:0;max-width:800px;padding:30px 2px}
.clentry+.clentry{border-top:1px solid var(--line)}
.clentry.sn-mile{border:1px solid var(--gold-line,#4a3d1c);border-radius:12px;padding:24px 26px 26px;margin:12px 0;background:linear-gradient(var(--gold-bg,#221c0c) 0,var(--panel2) 120px)}
.clentry+.clentry.sn-mile{border-top:1px solid var(--gold-line,#4a3d1c)}
.clhead{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin:0 0 12px}
.sn-date{font-family:var(--font-mono);font-size:12px;color:var(--faint);min-width:52px;font-variant-numeric:tabular-nums}
.sn-badge{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:5px;white-space:nowrap}
.sn-b-mile{background:var(--gold);color:var(--on-gold,#241c07)}
.sn-b-new{background:var(--acc);color:var(--on-acc,#062012)}
.sn-b-feat{background:var(--acc-bg,transparent);color:var(--acc);border:1px solid var(--line2)}
.sn-b-impr{background:transparent;color:var(--dim);border:1px solid var(--line2)}
.sn-b-data{background:var(--arti-bg,#10141d);color:var(--arti-pic-line,#a8b6d8);border:1px solid var(--arti-line,#2d3650)}
.sn-title{font-family:var(--font-display);font-size:25px;font-weight:600;line-height:1.25;letter-spacing:.01em;color:var(--ink-strong);margin:0 0 7px;padding:0;border:0;max-width:34ch;text-wrap:balance}
.sn-tag{font-size:15px;font-style:italic;color:var(--acc2);margin:0 0 13px;max-width:60ch}
.sn-body{margin:0;max-width:64ch;font-size:15px;line-height:1.68;color:var(--ink)}
.sn-body+.sn-body{margin-top:10px}
ul.sn-hl{margin:15px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
ul.sn-hl li{padding-left:19px;position:relative;font-size:14.5px;line-height:1.5;max-width:64ch}
ul.sn-hl li::before{content:"\25c6";position:absolute;left:0;top:3px;font-size:8px;color:var(--acc)}
.sn-links{margin-top:16px;display:flex;gap:18px;flex-wrap:wrap;font-size:13.5px;font-weight:500}
.sn-links a::after{content:" \2192"}
.clsum{display:inline-flex;gap:9px;font-family:var(--font-mono);font-size:12.5px;margin-left:auto;font-variant-numeric:tabular-nums}
.sn-dsum{margin:0;max-width:64ch;font-size:15px;line-height:1.6;color:var(--ink)}
details.sn-diff{margin-top:12px;border-top:1px solid var(--line);padding-top:2px}
details.sn-diff summary{cursor:pointer;font-family:var(--font-mono);font-size:12.5px;color:var(--faint);padding:7px 0;list-style:none;display:flex;align-items:center;gap:8px}
details.sn-diff summary::-webkit-details-marker{display:none}
details.sn-diff summary::before{content:"\25b8";font-size:10px;transition:transform .15s}
details.sn-diff[open] summary::before{transform:rotate(90deg)}
details.sn-diff summary:hover{color:var(--dim)}
@media(prefers-reduced-motion:reduce){details.sn-diff summary::before{transition:none}}
.sn-month{font-family:var(--font-mono);font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin:34px 0 12px;display:flex;align-items:center;gap:14px;max-width:780px}
.sn-month::after{content:"";flex:1;height:1px;background:var(--line)}
.sn-pills{display:flex;gap:8px;margin:16px 0 4px;flex-wrap:wrap}
/* #clbody is a flow-root so the first .sn-month's 34px top margin can't collapse THROUGH the empty
   container (#130): while the feed loaded, clbody's own top sat 22px higher, and filling it dropped
   the whole 34,000px feed by 22px -- a shift worth 0.56 on #/changelog. flow-root keeps child margins
   inside the box, so clbody's position no longer depends on what it contains. */
#clbody{display:flow-root}
.sn-pill{font-size:12.5px;font-weight:500;padding:7px 14px;border-radius:999px;border:1px solid var(--line2);color:var(--dim);background:transparent;cursor:pointer;font-family:var(--font-body)}
.sn-pill:hover{background:var(--hover)}
.sn-pill.on{background:var(--chip-on-bg);color:var(--chip-on-ink);border-color:transparent}
.clsec{margin:10px 0 0}
.clseclab{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:0 0 5px}
.clrow{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;padding:2.5px 0;font-size:13.5px}
.clmark{font-family:var(--font-mono);font-weight:700;width:14px;text-align:center;flex:none}
.cladd{color:#5fbf77}.clrm{color:#e07070}.clch{color:var(--acc)}
.clfield{color:var(--dim)}
.clv{font-family:var(--font-mono);font-size:12.5px;color:var(--ink-strong)}
.clv .cladd,.clv .clrm,.clv .clch{font-weight:600}.cldot{color:var(--faint)}
.clnew{flex-basis:100%;margin-left:21px;line-height:1.55}
.clprev{flex-basis:100%;margin-left:21px;color:var(--dim)}
.clprev summary{cursor:pointer;font-size:12px}
.clprev .clv{display:block;margin-top:4px;color:var(--dim);line-height:1.55}
/* ===== Dungeons (#/dungeons) ===== */
.dgmeta{color:var(--dim);font-size:13px;margin:0 0 14px}
.dgmeta a{color:var(--acc)}
.dgfloors{padding:2px 16px}
.dgfl-row{display:flex;gap:16px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--line)}
.dgfl-row:first-child{border-top:0}
.dgfl-n{flex:0 0 96px;font-size:12px;color:var(--faint);line-height:1.5}
.dgfl-n b{display:block;font-family:var(--font-mono);font-size:19px;color:var(--acc)}
.dgfl-m{flex:1;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
@media(max-width:600px){.dgfl-row{flex-direction:column;gap:4px}.dgfl-n{flex:none;display:flex;gap:10px;align-items:baseline}.dgfl-n b{display:inline}}
/* tower economy panel (dungeon detail: currency earn + exchange) */
.dgecon{padding:14px 16px}
.dgecon-h{display:flex;align-items:flex-start;gap:12px;margin-bottom:10px}
.dgcur-ic{width:40px;height:40px;flex:none;border-radius:9px;overflow:hidden;background:var(--panel2);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center}
.dgcur-ic img{width:100%;height:100%;object-fit:cover;display:block}
.dgecon-ht h2{margin:0;font-size:16px}
.dgecon-ht .hint{margin:2px 0 0}
.dgbands{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 4px}
.dgband{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11.5px;font-weight:600;color:var(--dim);background:var(--panel2);border:1px solid var(--line2);border-radius:7px;padding:3px 9px}
.dgband b{color:var(--gold);font-weight:700}
.dgexlab{margin:13px 0 8px}
.dgex{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:8px}
/* exchange card shares .pgchip so the #pgtip stats hover fires; .dgex-scoped so these win over .pgchip */
.dgex .exchcard{display:flex;align-items:center;gap:10px;padding:7px 11px;border-radius:10px;border:1px solid var(--line2);background:var(--panel2);color:var(--ink);font-size:12.5px}
.dgex .exchcard:hover{border-color:var(--acc);text-decoration:none}
.exchcard .exic{width:38px;height:38px;flex:none;border-radius:8px;overflow:hidden;background:var(--panel);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--dim)}
.exchcard .exic img{width:100%;height:100%;object-fit:cover;display:block}
.exchcard .exb{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
.exchcard .exn{font-family:var(--font-display);font-weight:600;color:var(--ink-strong);font-size:13px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.exchcard .exs{font-size:11px;color:var(--faint)}
.exchcard .exc{flex:none;display:inline-flex;align-items:center;gap:3px;font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--gold)}
.exchcard .exci{width:16px;height:16px;flex:none;display:inline-flex}
.exchcard .exci img{width:100%;height:100%;object-fit:contain;display:block}
/* ===== Progression guide (#/guide) ===== */
.pgbar{position:sticky;z-index:16;display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:0 0 16px}
.pglab{font-family:var(--font-body);color:var(--ink-strong);font-size:14px;font-weight:600}
.pgnum{width:70px;background:var(--panel2);border:1px solid var(--line2);color:var(--acc);border-radius:9px;padding:8px 10px;font-family:var(--font-mono);font-size:18px;font-weight:600;text-align:center}
.pgslide{flex:1;min-width:180px;accent-color:var(--acc)}
.pgstep{background:var(--panel2);border:1px solid var(--line2);color:var(--ink);border-radius:8px;width:32px;height:32px;font-size:17px;cursor:pointer}
.pgstep:hover{border-color:var(--acc)}
.pgclswrap{display:inline-flex;align-items:center;gap:6px;flex:none}
.pgclsico{width:22px;height:22px;border-radius:6px;object-fit:cover;background:var(--panel2);border:1px solid var(--line2)}
#pgClsSel{background:var(--panel2);border:1px solid var(--line2);color:var(--ink);border-radius:9px;padding:8px 10px;font:inherit;font-weight:600}
#pgClsSel:hover{border-color:var(--acc)}
.pghero{background:linear-gradient(180deg,var(--bg-grad-top),var(--panel));border:1px solid var(--line);border-radius:14px;padding:16px 22px;margin-bottom:16px}
.pgeyebrow{color:var(--acc);font-family:var(--font-display);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.pgh1{font-family:var(--font-display);font-size:26px;color:var(--ink-strong);margin:5px 0 4px}
.pglead{color:var(--dim);font-size:14px;max-width:66ch;margin:0}
.pgcap{display:flex;justify-content:space-between;align-items:baseline;margin-top:16px;margin-bottom:6px;font-size:10px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.pgcapval{font-family:var(--font-mono);color:var(--acc);text-transform:none;letter-spacing:0;font-size:11px}
.pgrail{position:relative;height:8px;border-radius:6px;background:var(--panel2);border:1px solid var(--line2);margin:0 0 4px;overflow:hidden}
.pgfill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--acc2),var(--acc))}
.pgstats{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.pgstat{background:var(--panel2);border:1px solid var(--line2);border-radius:9px;padding:7px 14px}
.pgstat .k{display:block;font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.04em}
.pgstat .v{display:block;font-family:var(--font-mono);font-size:17px;color:var(--acc);font-weight:600}
.pgcols{display:grid;grid-template-columns:1fr 300px;gap:22px;align-items:start}
@media(max-width:900px){.pgcols{grid-template-columns:1fr}}
.pgside{position:sticky;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 15px}
@media(max-width:900px){.pgside{position:static}}
.pgside h3{font-family:var(--font-display);font-size:13px;color:var(--acc);margin:0 0 3px}
.pgnow{font-family:var(--font-mono);font-size:12px;color:var(--ink-strong);margin-bottom:4px}
.pgsmall{font-size:11.5px}
.pgsec{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.pgseclab{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.pgrow{display:flex;align-items:center;gap:7px;font-size:12.5px;padding:3px 0;color:var(--ink)}
.pgrow:hover{color:var(--acc);text-decoration:none}
.pgrdot{width:8px;height:8px;border-radius:50%;flex:none}
.pgrow b{font-family:var(--font-mono);font-size:10px;color:var(--dim);margin-left:auto}
.pgsvc{display:inline-block;font-size:11px;color:var(--dim);background:var(--panel2);border:1px solid var(--line2);border-radius:6px;padding:2px 8px;margin:0 4px 4px 0}
.pgroad{position:relative;margin-left:14px;padding-left:26px;border-left:2px solid var(--line2)}
.pgband{position:relative;margin:0 0 22px}
.pgband:before{content:'';position:absolute;left:-33px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--line2);border:2px solid var(--bg)}
.pgband.done:before{background:var(--acc2)}
.pgband.here:before{background:var(--acc);box-shadow:0 0 0 5px rgba(95,211,154,.2)}
.pgband.done{opacity:.5}
.pgband.up{opacity:.82}
.pgrlab{font-family:var(--font-mono);font-size:13px;color:var(--dim);font-weight:600;margin-bottom:8px}
.pgband.here .pgrlab{color:var(--acc)}
.pguhere{display:inline-block;margin-left:8px;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--on-acc);background:var(--acc);padding:2px 7px;border-radius:6px}
.pgmaps{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.pgband:not(.here) .pgmaps{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.pgcard{position:relative;border:1px solid var(--line2);border-radius:12px;overflow:hidden;background:var(--panel2);display:flex;flex-direction:column;min-width:0}
.pgcard.mini:hover{border-color:var(--acc);text-decoration:none}
.pgthumb{display:block;height:96px;background-size:cover;background-position:center;background-color:var(--img-bg);position:relative}
.pgthumb:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,15,12,.05),rgba(11,15,12,.82))}
.pgbandbadge{position:absolute;top:8px;left:8px;z-index:2;font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--on-acc);background:var(--acc);padding:2px 8px;border-radius:6px}
.pgbossbadge{position:absolute;top:8px;right:8px;z-index:2}
.pgcbody{padding:10px 12px}
.pgname{display:block;font-family:var(--font-body);font-size:15px;color:var(--ink-strong);margin:0 0 4px}
.pgname:hover{color:var(--acc);text-decoration:none}
.pgname.sm{font-size:13px;margin:0}
.pgdots{display:inline-flex;gap:3px;vertical-align:middle;margin-left:6px}
.pgdot{width:9px;height:9px;border-radius:50%;display:inline-block;border:1px solid rgba(0,0,0,.3)}
.pgmeta{color:var(--faint);font-size:12px;margin-bottom:8px}
.pgmobline{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.pgmob{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:2px 8px 2px 3px;color:var(--dim)}
.pgmob:hover{border-color:var(--acc);text-decoration:none;color:var(--ink)}
.pgmob .mth{width:18px;height:18px;border-radius:50%}
.pgmob b{color:var(--ink);font-weight:600;font-family:var(--font-mono);font-size:10px}
.pgdrops{display:flex;flex-wrap:wrap;gap:5px}
.pgchip{display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:2px 8px 2px 3px;border-radius:6px;border:1px solid var(--line2);background:var(--panel);color:var(--acc2)}
.pgchip:hover{border-color:var(--acc);text-decoration:none}
.pgchip.nolink{color:var(--dim)}
.pgci{width:16px;height:16px;border-radius:4px;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;background:var(--panel2);font-size:8px;color:var(--dim);flex:none}
.pgci img{width:100%;height:100%;object-fit:cover;display:block}
.pgbring{font-size:11.5px;color:var(--dim);margin-top:2px}
.pgbring b{color:var(--ink)}
.pgbring img{width:14px;height:14px;vertical-align:-3px;margin:0 1px}
.pgmrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2px 0 8px}
.pgtip{font-size:11px}
.mtag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px;border:1px solid var(--line2)}
.mtag.great{color:var(--on-acc);background:var(--acc);border-color:var(--acc)}
.mtag.good{color:var(--chip-on-ink);background:var(--chip-on-bg);border-color:var(--acc)}
.mtag.even{color:var(--dim);background:var(--panel)}
.mtag.tough{color:var(--boss-ink);background:var(--boss-bg);border-color:#7a3a3a}
.pgbanner{display:flex;align-items:center;justify-content:space-between;gap:16px;background:linear-gradient(120deg,var(--chip-on-bg),var(--panel));border:1px solid var(--acc);border-radius:14px;padding:15px 20px;margin:0 0 16px}
.pgbanner:hover{text-decoration:none;box-shadow:0 0 0 1px var(--acc) inset}
.pgbanner .eyebrow{display:block;color:var(--acc);font-family:var(--font-display);font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.pgbtext b{display:block;font-family:var(--font-display);font-size:19px;color:var(--ink-strong);margin:2px 0}
.pgbtext .pgbsub{color:var(--dim);font-size:13px}
.pgbgo{flex:none;font-weight:700;color:var(--acc);font-family:var(--font-body);white-space:nowrap}
#pgtip{position:fixed;z-index:80;max-width:280px;background:var(--panel);border:1px solid var(--line2);border-radius:11px;box-shadow:0 14px 34px var(--shadow);padding:11px 13px;font-size:12.5px;display:none;pointer-events:none}
#pgtip.on{display:block}
.pgtiphd{display:flex;gap:9px;align-items:flex-start;margin-bottom:8px}
.pgtipico{width:36px;height:36px;flex:none;border-radius:8px;overflow:hidden;background:var(--panel2);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--acc2)}
.pgtipico img{width:100%;height:100%;object-fit:cover;display:block}
.pgtipname b{display:block;font-family:var(--font-body);font-size:14px;color:var(--ink-strong);line-height:1.2}
.pgtipmeta{color:var(--faint);font-size:11px}
.pgtipstats{border-top:1px solid var(--line);padding-top:2px;margin-top:2px}
.pgtipstats .stat{padding:4px 0;font-size:12px}
.pgtipdesc{color:var(--dim);font-size:11.5px;margin:6px 0 0}
/* ================= Classes section (#/classes) ================= */
.clineage{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.clbranch{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.clbranch .clkids{display:flex;gap:10px;flex-wrap:wrap;flex:1 1 auto}
.clspecial{flex-direction:column;align-items:stretch;gap:8px}
.clspecial .clnote{color:var(--faint);font-size:12px}
.clarrow{color:var(--dim);font-size:16px;flex:none}
.clarrow.big{font-size:22px;color:var(--acc2)}
.clcard{display:flex;align-items:center;gap:11px;min-width:220px;flex:1 1 220px;max-width:320px;padding:11px 13px;border:1px solid var(--line2);border-left:3px solid var(--cc,var(--acc));border-radius:12px;background:var(--panel2);text-decoration:none;color:var(--ink);transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}
.clcard:hover{transform:translateY(-2px);border-color:var(--cc,var(--acc));box-shadow:0 6px 20px rgba(0,0,0,.22);text-decoration:none}
.clcard.dim{opacity:.28;filter:grayscale(.5)}
.clico{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:none;border-radius:8px;overflow:hidden;background:var(--panel);color:var(--acc2);font-weight:800;font-size:12px}
.clico img{width:100%;height:100%;object-fit:contain}
/* Class icon tiles (issue #137). SAME treatment as the Build Library's .cico/.dico: a per-class
   hue plate, always dark, in both themes. --h is SVComponents.hue(name), the shared deterministic
   name->hue the build cards already use, so a class looks identical everywhere on the site.
   Why a DARK plate works for both art styles: the base-class art is a black line drawing with an
   OPAQUE WHITE FILL, so on a dark tile the fill becomes the glyph and the black outline vanishes
   into the background — the same white-on-dark read the silhouette art gives. No inversion, no
   per-icon special-casing. (The white silhouettes on the old PALE tile were the actual bug.) */
.clico{background:hsl(var(--h,150) 40% 14%);border:1px solid hsl(var(--h,150) 45% 32%);color:hsl(var(--h,150) 60% 74%)}
.clico img{padding:1px}
.clcardico{width:42px;height:42px}
.clheroico{width:76px;height:76px;border-radius:14px;font-size:22px}
.clcbody{display:flex;flex-direction:column;gap:3px;min-width:0}
.clcname{font-weight:var(--fw-bold,700);font-size:14px;display:flex;align-items:center;gap:7px}
.clcmeta{color:var(--dim);font-size:11.5px}
.clels{display:flex;gap:5px;flex-wrap:wrap;margin-top:2px}
.clel{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;color:var(--ec,var(--dim));border:1px solid var(--ec,var(--line2));border-radius:20px;padding:1px 7px 1px 4px;opacity:.9}
.clel img{width:12px;height:12px}
.cltag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:1px 7px;border-radius:20px;border:1px solid var(--line2);color:var(--dim)}
.cltag.base{color:#43b86f;border-color:#43b86f66}
.cltag.advanced{color:var(--gold);border-color:#d9b24a66}
.cltag.special{color:#b06bff;border-color:#b06bff66}
/* announced (not yet playable) classes — deliberately quieter than every released card, and dashed
   so "this does not exist yet" reads at a glance without needing the label */
.clcard.ghost{border-style:dashed;border-left-style:dashed;border-color:var(--line2);background:transparent;opacity:.72}
.clcard.ghost:hover{opacity:1;border-color:var(--dim);box-shadow:none;transform:translateY(-1px)}
.clcard.ghost .clico{opacity:.8} /* keep the plate colour — greyscaling it made the row look half-finished */
.cltag.announced{color:var(--dim);border-color:var(--line2);border-style:dashed}
.clcbody .clcmeta2{display:block;font-size:11.5px;color:var(--faint);margin-top:1px}
.clhero.ghost{border-style:dashed;border-left-color:var(--line2);opacity:.95}
.clhero.ghost .clico{opacity:.85}
.clnotyet{margin:10px 0 2px;padding:9px 12px;border:1px dashed var(--line2);border-radius:10px;background:var(--panel2);color:var(--dim);font-size:13px;max-width:680px}
.clroad .clrmrow{display:flex;gap:12px;padding:7px 0;border-top:1px solid var(--line)}
.clroad .clrmrow:first-of-type{border-top:0}
.clroad .clrmk{flex:0 0 108px;color:var(--faint);font-size:12.5px;padding-top:2px}
.clroad .clrmv{flex:1 1 auto;display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:13.5px}
.chipflat{display:inline-block;padding:2px 9px;border:1px solid var(--line2);border-radius:20px;font-size:12px;color:var(--ink)}
.chipflat.attr{color:var(--acc);border-color:var(--acc)}
.clrmnote{margin:14px 0 0;padding:8px 11px;border-left:2px solid var(--line2);color:var(--dim);font-size:12.5px;font-style:italic}
.clrmwarn{margin:16px 0 0;padding:11px 13px;border:1px solid var(--line2);border-radius:10px;background:var(--panel2);color:var(--dim);font-size:12.5px;line-height:1.55}
/* the caveat and the vote CTA are two separate boxed blocks — .clbtn only carries margin-BOTTOM, so
   without this they butt straight up against each other at the foot of the panel */
.clroad .clbtn{margin-top:16px}
.clroad .clrmrow:last-of-type{padding-bottom:2px}
/* detail */
.clhero{display:flex;gap:18px;align-items:flex-start;padding:18px;border:1px solid var(--line);border-left:4px solid var(--cc,var(--acc));border-radius:16px;background:linear-gradient(120deg,color-mix(in srgb,var(--cc,var(--acc)) 9%,var(--panel)),var(--panel));margin:10px 0 16px}
.clhero .clhmeta{min-width:0;flex:1}
.clhero h1{margin:0 0 8px;font-size:26px}
.cltags{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-bottom:9px}
.clhdesc{color:var(--ink);font-size:14px;max-width:70ch;margin:0 0 11px;line-height:1.55}
.cllineage{display:flex;flex-direction:column;gap:5px}
.cllabel{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint)}
.cllinrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cllin{display:inline-flex;align-items:center;gap:6px;padding:4px 9px 4px 5px;border:1px solid var(--line2);border-radius:20px;background:var(--panel2);color:var(--ink);text-decoration:none;font-size:12.5px;font-weight:600}
.cllin:hover{border-color:var(--acc);text-decoration:none}
.cllin.cur{border-color:var(--cc,var(--acc));background:color-mix(in srgb,var(--cc,var(--acc)) 14%,var(--panel2))}
.cllin .clico{width:22px;height:22px;font-size:9px}
.clcols{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.clcols>.panel{flex:1 1 320px;margin:0}
.clkithead{font-size:14px;color:var(--ink);margin-bottom:9px}
.clkithead b{font-size:18px;font-weight:800;color:var(--ink-strong)}
.clkitbar{display:flex;height:12px;border-radius:7px;overflow:hidden;background:var(--panel);border:1px solid var(--line2)}
.clkitseg{height:100%;min-width:3px}
.clkitseg:not(:last-child){border-right:1px solid var(--panel)}
.clkitleg{display:flex;flex-wrap:wrap;gap:10px 14px;margin-top:9px}
.clkitlg{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--dim)}
.clkitlg i{width:9px;height:9px;border-radius:3px;display:inline-block;flex:none}
.clkitlg b{color:var(--ink-strong);font-weight:700}
.clglrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:13px}
.clelrow{display:flex;flex-wrap:wrap;gap:6px}
.clsigfocus{margin:11px 0 0}
.clhkit{margin:2px 0 11px;color:var(--acc2);font-size:12.5px;font-weight:600}
.clsigsk{margin-bottom:14px}
.clsig-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.clsig-card{display:flex;gap:11px;align-items:flex-start;padding:11px 12px;border:1px solid var(--line2);border-radius:12px;background:var(--panel2);color:var(--ink);text-decoration:none;transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}
.clsig-card:hover{transform:translateY(-2px);border-color:var(--acc);box-shadow:0 6px 18px rgba(0,0,0,.2);text-decoration:none}
.clsig-ic{flex:none;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:9px;overflow:hidden;background:var(--panel);color:var(--acc2);font-weight:800;font-size:12px}
.clsig-ic img{width:100%;height:100%;object-fit:contain}
.clsig-b{display:flex;flex-direction:column;gap:3px;min-width:0}
.clsig-n{font-weight:700;font-size:13.5px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.clsig-m{display:flex;gap:8px;flex-wrap:wrap;font-family:var(--font-mono);font-size:11px}
.clsig-pw{color:var(--gold)}
.clsig-cd{color:var(--faint)}
.clsig-d{color:var(--dim);font-size:12px;line-height:1.45}
.clbuilds{margin-bottom:16px}
.clbuilds .sechead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.clbuilds .sechead h2{margin:0}
.clbuild-cta{display:inline-block;padding:11px 14px;border:1px dashed var(--line2);border-radius:12px;background:var(--panel2);color:var(--dim);text-decoration:none;font-size:13px}
.clbuild-cta:hover{border-color:var(--acc);color:var(--ink);text-decoration:none}
.cllinks{display:flex;flex-direction:column}
.clbtn{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--line2);border-radius:11px;background:var(--panel2);color:var(--ink);text-decoration:none;margin-bottom:8px;transition:border-color .12s ease,transform .12s ease}
.clbtn:last-child{margin-bottom:0}
.clbtn:hover{border-color:var(--acc);transform:translateX(2px);text-decoration:none}
.clbtn b{font-size:13.5px}
.clbtn span{color:var(--dim);font-size:11.5px}
/* skill tree */
.cltabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.cltab{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border:1px solid var(--line2);border-radius:20px;background:var(--panel2);color:var(--dim);font-size:12.5px;font-weight:600;cursor:pointer}
.cltab.on{color:var(--acc);border-color:var(--acc);background:color-mix(in srgb,var(--acc) 12%,var(--panel2))}
.cltab .clico{width:22px;height:22px;font-size:9px}
.clstage{position:relative;display:grid;gap:18px;justify-content:center;padding:8px 4px;overflow-x:auto}
.cledges{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
.cledge{fill:none;stroke:var(--line2);stroke-width:2;stroke-linecap:round}
.cledge.hot{stroke:var(--acc);stroke-width:2.5}
.clnode{position:relative;z-index:1;width:54px;height:54px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line2);border-radius:12px;background:var(--panel2);color:var(--ink);text-decoration:none;transition:transform .1s ease,border-color .1s ease,box-shadow .1s ease}
.clnode:hover,.clnode.hot{transform:scale(1.08);border-color:var(--acc);box-shadow:0 0 0 2px color-mix(in srgb,var(--acc) 40%,transparent);text-decoration:none}
.clnode.passive{border-style:dashed}
.clnico{width:40px;height:40px;display:flex;align-items:center;justify-content:center;overflow:hidden;font-weight:800;font-size:11px;color:var(--acc2)}
.clnico img{width:100%;height:100%;object-fit:contain}
.clnlv{position:absolute;right:-4px;bottom:-4px;min-width:16px;height:16px;padding:0 3px;border-radius:9px;background:var(--acc);color:var(--on-acc);font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1}
.clnp{position:absolute;left:-4px;top:-4px;width:15px;height:15px;border-radius:8px;background:var(--panel);border:1px solid var(--line2);color:var(--faint);font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center}
.clthint{margin:12px 0 0}
.cztip{position:fixed;z-index:1000;max-width:300px;padding:10px 12px;border:1px solid var(--line2);border-radius:11px;background:var(--panel);box-shadow:0 10px 30px rgba(0,0,0,.35);pointer-events:none;display:none;font-size:12px}
.cztip.on{display:block}
.czt-h{font-weight:800;font-size:13px;color:var(--ink-strong);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.czt-el{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:600;color:var(--ec);border:1px solid var(--ec);border-radius:6px;padding:0 4px;line-height:1.5}
.czt-el img{width:11px;height:11px}
.czt-m{color:var(--acc2);font-size:11px;margin:1px 0 5px}
.czt-d{color:var(--dim);line-height:1.5;margin-top:6px}
.czt-r{color:var(--faint);margin-top:5px;font-size:11px}
.czt-c{color:var(--acc);margin-top:6px;font-size:11px;font-weight:600}
.czt-stats{margin:6px 0 0;font-size:11px;display:flex;flex-direction:column;gap:2px}
.czt-kv{display:flex;justify-content:space-between;gap:12px}
.czt-k{color:var(--faint)}
.czt-v{color:var(--ink-strong);font-weight:600;text-align:right;white-space:nowrap}
.czt-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.czt-tag{font-size:10px;color:var(--dim);border:1px solid var(--line2);border-radius:6px;padding:0 5px;line-height:1.6}
.czt-fx{margin-top:6px;font-size:11px;line-height:1.6}
.czt-fxl{color:var(--faint);margin-right:4px}
.czt-fxi{color:var(--acc2);margin-right:8px;white-space:nowrap}
.czt-fxm{color:var(--faint);font-weight:400}
.czt-pe{color:var(--dim);line-height:1.5}
@media(max-width:640px){.clhero{flex-direction:column;gap:12px}.clheroico{width:60px;height:60px}.clcard{max-width:none}}