:root {
  --bg: #0e0d12;
  --panel: #17161d;
  --panel-2: #201f27;
  --ink: #ede4d3;
  --ink-soft: #c9c2b4;
  --muted: #9c978c;
  --gold: #e6b93d;
  --gold-fill: #e6b93d;
  --gold-soft: #3a2f14;
  --red: #e05260;
  --gem: #57b8f5;
  --arcane: #b18cff;
  --green: #8fc97e;
  --line: #55525d;
  --line-strong: #68636f;
  --track: #514e59;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 22px rgba(0, 0, 0, 0.35);
  --drop-bg: #121118;
  --navh: 88px;
  --colpad: max(18px, calc((100% - 1060px) / 2 + 18px));
  --sans: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.5;
}
.wrap { max-width: 1060px; margin: 0 auto; padding: calc(26px + var(--navh)) 18px 64px; }
h2, h3 { font-family: var(--sans); margin: 0; }
.mono { font-family: var(--mono); }
header.lede { border-bottom: 3px double var(--red); padding-bottom: 18px; margin-bottom: 20px; }
header.lede h1 { font-family: "Cinzel", serif; font-size: clamp(30px, 5.4vw, 44px); font-weight: 800; letter-spacing: 0.01em; line-height: 1.08; margin: 0; }
header.lede h1 .accent { color: var(--red); }
header.lede p { margin: 10px 0 0; color: var(--ink-soft); max-width: 62ch; font-size: 17.5px; }
header.lede p b { color: var(--ink); }
.drop {
  border: 2px dashed var(--line-strong);
  background: var(--drop-bg);
  border-radius: 10px;
  padding: 26px 22px;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}
.drop.dragging { border-color: var(--red); background: var(--panel-2); }
.drop .big { font-family: inherit; font-weight: 700; font-size: 25px; letter-spacing: 0.01em; }
.drop .big .mono { font-family: "VT323", monospace; font-size: 32px; font-weight: 400; }
.drop p { margin: 6px auto 0; color: var(--muted); max-width: 58ch; }
.drop .datastamp { margin-top: 16px; font-size: 13.5px; color: var(--muted); }
.drop .actions { margin-top: 16px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.btn {
  font-family: inherit; font-size: 15.5px; font-weight: 600;
  border: 1.5px solid var(--line-strong); background: var(--panel); color: var(--ink);
  padding: 9px 18px; border-radius: 8px; cursor: pointer;
}
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--gold-fill); border-color: var(--gold-fill); color: #171106; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.small { padding: 8px 12px; font-size: 14px; border-radius: 7px; }
.loadmsg { margin-top: 12px; font-size: 15px; min-height: 1.2em; }
.loadmsg.err { color: var(--red); }
.loadmsg.ok { color: var(--green); }
.uploadalert { margin-top: 8px; font-size: 15px; color: var(--red); font-weight: 600; }
.uploadalert[hidden] { display: none; }
details.paths { margin-top: 14px; text-align: left; max-width: 720px; margin-left: auto; margin-right: auto; }
details.paths summary { cursor: pointer; color: var(--gem); font-weight: 600; font-size: 15px; text-align: center; }
details.paths .pathlist { margin-top: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; }
details.paths dt { font-weight: 600; margin-top: 8px; }
details.paths dt:first-child { margin-top: 0; }
details.paths dd { margin: 2px 0 0; color: var(--ink-soft); }
code.path { font-family: "VT323", monospace; font-size: 19px; background: var(--panel-2); padding: 1px 6px; border-radius: 4px; word-break: break-all; }
.stats { display: none; margin-top: 20px; }
.stats.on { display: block; }
.stats .overall { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.stats .overall .pct { font-family: "VT323", monospace; font-size: 52px; line-height: 1; color: var(--gold); }
.stats .overall .of { font-size: 17px; color: var(--ink-soft); }
.overallbar { height: 12px; background: var(--track); border-radius: 6px; overflow: hidden; margin: 10px 0 16px; }
.overallbar > div { height: 100%; background: var(--gold-fill); width: 0%; transition: width 0.5s ease; }
.statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 10px 14px 8px; box-shadow: var(--shadow); }
.stat .v { font-family: "VT323", monospace; font-size: 26px; line-height: 1.05; white-space: nowrap; }
.stat .k { font-size: 13.5px; color: var(--muted); letter-spacing: 0.02em; }
.statenote { margin-top: 10px; color: var(--muted); font-size: 14.5px; }
.moved { margin-top: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 14px 16px 12px; box-shadow: var(--shadow); }
.moved h2 { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.moved .mvblock { margin-top: 10px; }
.moved .flabel { font-weight: 700; color: var(--muted); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
.moved .mvline { font-size: 15px; margin-top: 4px; color: var(--ink-soft); }
.moved .mvless { color: var(--red); font-weight: 600; }
.moved .mvchips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.moved details.mvdet { margin-top: 6px; }
.moved details.mvdet summary { cursor: pointer; color: var(--gem); font-weight: 600; font-size: 14.5px; }
.controls { position: sticky; top: calc(var(--navh) - 2px); z-index: 20; background: var(--bg); padding: 10px 0 8px; margin-top: 22px; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--navh) - 2px); }
.secnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; flex-direction: column;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.tabrow {
  display: flex; gap: 7px; flex-wrap: nowrap; overflow-x: auto;
  padding: 7px var(--colpad);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.tabrow::-webkit-scrollbar { display: none; }
.navlink {
  flex: none; white-space: nowrap; text-decoration: none;
  font-family: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14.5px; font-weight: 600; color: var(--ink-soft);
  border: 1.5px solid var(--line-strong); background: var(--panel);
  padding: 9px 14px; border-radius: 999px;
}
.navlink .tabic { width: 19px; height: 19px; vertical-align: 0; }
.navlink[data-tab="secrets"] .tabic { color: var(--arcane); }
.navlink:hover { border-color: var(--red); color: var(--ink); }
.navlink.active { background: #1d1a29; border-color: var(--gold); color: var(--gold); }
.navlink.active .tabic { color: var(--gold); }
#secretsSec, #bestSec, #collSec, #advSec { scroll-margin-top: calc(var(--navh) + 113px); }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
.controls .row1 { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.controls input[type="search"] {
  flex: 1 1 220px; font: inherit; font-size: 16px; padding: 9px 13px;
  border: 1.5px solid var(--line-strong); border-radius: 8px; background: var(--panel); color: var(--ink);
}
.chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 0; }
.chip {
  font-family: inherit; font-size: 14px; font-weight: 600;
  border: 1.5px solid var(--line-strong); background: var(--panel); color: var(--ink-soft);
  padding: 8px 12px; border-radius: 999px; cursor: pointer;
}
.chip .tag { font-size: 11.5px; font-weight: 700; color: var(--muted); margin-left: 5px; letter-spacing: 0.04em; }
.chip[aria-pressed="true"] { background: var(--gold-fill); border-color: var(--gold-fill); color: #171106; }
.chip[aria-pressed="true"] .tag { color: #5c4303; }
#doneChip { margin-left: auto; }
#doneChip[hidden] { display: none; }
.dd { position: relative; display: inline-block; }
.ddbtn { display: inline-flex; align-items: center; }
.ddbtn .caret { font-size: 10.5px; margin-left: 6px; line-height: 1; }
.ddbtn-lg { font-size: 15.5px; padding: 8px 13px; }
.ddpanel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  min-width: 216px; max-width: min(80vw, 320px); max-height: 62vh; overflow-y: auto;
  background: var(--panel); border: 1.5px solid var(--line-strong); border-radius: 10px;
  box-shadow: var(--shadow); padding: 6px;
}
.dd.right .ddpanel { left: auto; right: 0; }
.ddpanel[hidden] { display: none; }
.ddopt {
  display: flex; align-items: center; gap: 9px; width: 100%;
  font-family: inherit; font-size: 14.5px; font-weight: 600;
  color: var(--ink-soft); background: transparent; border: 0; border-radius: 7px;
  padding: 7px 9px; cursor: pointer; text-align: left;
}
.ddopt:hover { background: var(--panel-2); color: var(--ink); }
.ddopt .box {
  width: 15px; height: 15px; flex: none; border: 1.5px solid var(--line-strong); border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; line-height: 1; color: transparent;
}
.ddopt[aria-pressed="true"] { color: var(--ink); }
.ddopt[aria-pressed="true"] .box { background: var(--gold-fill); border-color: var(--gold-fill); color: #171106; }
.ddopt .tick { width: 15px; flex: none; text-align: center; color: var(--gold); font-size: 13px; visibility: hidden; }
.ddopt .box .ic { width: 11px; height: 11px; stroke-width: 2.6; }
.card .rank .ic { width: 22px; height: 22px; }
.ddopt[aria-pressed="true"] .tick { visibility: visible; }
.ddopt .tag { font-size: 11.5px; font-weight: 700; color: var(--muted); margin-left: auto; letter-spacing: 0.04em; }
.showing { margin-top: 9px; color: var(--muted); font-size: 14.5px; }
.metalines { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; margin-top: 8px; color: var(--muted); font-size: 14.5px; }
.metalines .showing, .metalines .sessionscope { margin-top: 0; }
.metalines .sessionscope { font-size: inherit; }
.grouphead { display: flex; align-items: baseline; gap: 12px; margin: 30px 0 4px; }
.grouphead h2 { font-size: 23px; font-weight: 700; }
.grouphead h2::before { content: ""; display: inline-block; width: 4px; height: 0.92em; background: var(--red); border-radius: 2px; margin-right: 11px; vertical-align: -0.06em; }
#secretsSec .grouphead h2::before { background: var(--arcane); }
.grouphead .n { font-family: "VT323", monospace; font-size: 22px; color: var(--gold); }
.groupsub { color: var(--muted); margin: 0 0 12px; font-size: 15px; max-width: 70ch; }
.cards { display: flex; flex-direction: column; gap: 7px; }
.card {
  display: grid; grid-template-columns: 40px 1fr 218px; gap: 12px; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 14px; box-shadow: var(--shadow);
}
.card .rank { font-family: "VT323", monospace; font-size: 26px; color: var(--gold); text-align: center; line-height: 1; }
.card h3 { font-size: 17px; font-weight: 700; line-height: 1.25; }
.card .req { color: var(--ink-soft); margin-top: 2px; }
.card .meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; align-items: center; }
.pill { font-size: 12.5px; font-weight: 600; border: 1px solid var(--line-strong); border-radius: 999px; padding: 1px 9px; color: var(--ink-soft); background: var(--panel-2); }
.pill.dlc { border-color: var(--gold); color: var(--gold); background: transparent; }
.pill.kindp { border-color: var(--gold); color: var(--gold); background: var(--gold-soft); }
.meta .unlocks { font-size: 14px; color: var(--muted); }
.meta a.wiki { font-size: 14px; color: var(--gem); text-decoration: none; font-weight: 600; padding: 3px 4px; }
.meta a.wiki:hover { text-decoration: underline; }
.prog { text-align: right; }
.prog .pctline { display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; }
.prog .pct { font-family: "VT323", monospace; font-size: 34px; line-height: 1; }
.card.near .prog .pct { color: var(--gold); }
.prog .counts { font-family: var(--sans); font-size: 15px; color: var(--muted); }
.bar { height: 9px; background: var(--track); border-radius: 5px; overflow: hidden; margin-top: 7px; }
.bar > div { height: 100%; background: var(--gold-fill); }
.prog .togo { font-size: 14px; color: var(--muted); margin-top: 5px; }
.approx { color: var(--gold); font-weight: 700; }
.noprog { text-align: right; }
.noprog .why { font-size: 14px; color: var(--muted); max-width: 30ch; margin-left: auto; }
.markbtn { margin-top: 7px; }
.card.done { opacity: 0.85; }
.card.done .rank { color: var(--green); font-size: 20px; }
.donebadge { font-size: 12.5px; font-weight: 700; color: var(--green); border: 1px solid var(--green); border-radius: 999px; padding: 1px 9px; }
.donebadge.manual { color: var(--gold); border: 1.5px dashed var(--gold); }
.empty { border: 1px dashed var(--line-strong); border-radius: 10px; padding: 26px; text-align: center; color: var(--muted); }
footer { margin-top: 44px; border-top: 3px double var(--red); padding-top: 16px; color: var(--muted); font-size: 14.5px; }
footer p { margin: 0 0 8px; max-width: 78ch; }
footer a { color: var(--gem); }
.sessionscope { font-size: 13.5px; color: var(--muted); margin-top: 8px; }
.fdetail { font-size: 14px; color: var(--ink-soft); display: flex; flex-direction: column; gap: 3px; }
.fdetail .flabel { font-weight: 700; color: var(--muted); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
.farmblock { margin-top: 8px; border-top: 1px dashed var(--line); padding-top: 6px; }
.farmblock .farmhead { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.farmblock .fdetail { margin-top: 3px; }
.extrasec { margin-top: 36px; }
.secrow { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 9px 14px; box-shadow: var(--shadow); align-items: center; }
.secrow h3 { font-size: 16.5px; font-weight: 700; }
.secrow .hint { color: var(--ink-soft); font-size: 14.5px; margin-top: 2px; }
.secrow .spell { font-family: "VT323", monospace; font-size: 21px; background: var(--panel-2); padding: 1px 8px; border-radius: 5px; word-break: break-all; }
.secrow.done { opacity: 0.85; }
.bestgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin-top: 12px; }
.bestitem { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 7px 11px; font-size: 14px; box-shadow: var(--shadow); }
.bestitem .bn { font-weight: 700; }
.bestitem .bp { color: var(--muted); font-size: 13px; display: block; }
.bestitem .bk { color: var(--ink-soft); font-size: 13px; display: block; }
.bestitem.found { opacity: 0.8; }
.bestitem.arc .bp { color: var(--arcane); }
.bestitem .foundbadge { font-size: 11.5px; font-weight: 700; color: var(--green); border: 1px solid var(--green); border-radius: 999px; padding: 0 7px; margin-left: 6px; vertical-align: 1px; }
.bestitem .missbadge { font-size: 11.5px; font-weight: 700; color: var(--red); border: 1px solid var(--red); border-radius: 999px; padding: 0 7px; margin-left: 6px; vertical-align: 1px; }
.bestfilters { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; align-items: center; }
.bestgrid .ghead { grid-column: 1 / -1; font-weight: 700; font-size: 16.5px; margin-top: 12px; }
.bestgrid .ghead:first-child { margin-top: 0; }
.advblock { margin-top: 20px; }
.advblock:first-child { margin-top: 6px; }
.advhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
details.advblock > summary.advhead { cursor: pointer; list-style: none; }
details.advblock > summary.advhead::-webkit-details-marker { display: none; }
details.advblock > summary.advhead::after { content: "▾"; margin-left: auto; color: var(--muted); font-size: 15px; line-height: 1; transition: transform 0.15s; }
details.advblock[open] > summary.advhead::after { transform: rotate(180deg); }
.advhead h3 { font-size: 18.5px; font-weight: 700; }
.advtask { display: grid; grid-template-columns: 1fr auto; gap: 1px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; box-shadow: var(--shadow); margin-bottom: 6px; align-items: baseline; }
.advtask .advreq { font-weight: 600; }
.advtask .advunlocks { grid-column: 1; color: var(--muted); font-size: 14px; }
.advtask .advunlocks .arr { color: var(--muted); font-weight: 700; }
.advtask .advtype { grid-row: 1; grid-column: 2; color: var(--muted); font-size: 14.5px; }
.advtask.done { opacity: 0.75; }
.advtask.done .advreq { font-weight: 500; color: var(--ink-soft); }
.advalldone { color: var(--green); font-weight: 600; font-size: 15px; padding: 2px 0 8px; }
details.advdone { margin: 2px 0 8px; }
details.advdone summary { cursor: pointer; color: var(--gem); font-weight: 600; font-size: 14.5px; margin-bottom: 6px; }

.ic { width: 15px; height: 15px; flex: none; vertical-align: -2.5px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic .f { fill: currentColor; stroke: none; }
.ic-lg { width: 20px; height: 20px; vertical-align: -4px; color: var(--gold); margin-right: 7px; }
.sigils { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 13px; }
.sigil { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); border: 1px solid var(--line-strong); border-radius: 999px; padding: 3px 11px 3px 9px; background: var(--panel); }
.sigil .ic { color: var(--gold); }
.plats { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.plat { font-size: 13.5px; font-weight: 600; border: 1px solid var(--line); border-radius: 999px; padding: 2px 11px; color: var(--ink-soft); background: var(--panel); }
.plat .st { font-weight: 700; }
.plat.ok .st { color: var(--green); }
.plat.no { color: var(--muted); }
.plat.no .st { color: var(--red); }
.plat .dim { font-weight: 500; color: var(--muted); font-size: 12.5px; }
.meta .unlocks .arr { color: var(--muted); font-weight: 700; }
/* v13: at <=850px the sticky controls reflow into dense packed rows
   (search full-width, then the filter controls and the status line
   flow as one item stream) instead of a wrapping row1 that grew an
   extra row whenever the Show-completed chip appeared. No control is
   removed; the fine-print scope note and the chip's "matching
   filters" suffix yield first, since both repeat information that
   lives elsewhere on the page. */
@media (max-width: 850px) {
  .controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0 6px; }
  .controls .row1, .controls .metalines { display: contents; }
  .controls input[type="search"] { flex: 1 1 100%; }
  .ddbtn-lg { font-size: 14.5px; padding: 8px 11px; }
  #doneChip { margin-left: 0; }
  #doneChip .mf { display: none; }
  .metalines .sessionscope { display: none; }
}
@media (max-width: 720px) {
  :root { --navh: 84px; }
  .tabrow { padding: 9px var(--colpad); }
  .navlink { padding: 5px 14px; }
  .chip { padding: 6px 11px; }
  .controls input[type="search"] { padding: 8px 12px; }
  .card { grid-template-columns: 34px 1fr; }
  .card .rank { font-size: 24px; }
  .prog, .noprog { grid-column: 2; text-align: left; }
  .prog .pctline { justify-content: flex-start; }
  .noprog .why { margin-left: 0; }
  .stats .overall .pct { font-size: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .overallbar > div { transition: none; }
  .drop { transition: none; }
  details.advblock > summary.advhead::after { transition: none; }
}

/* --- Public-site additions (port) --- */
.skip { position: absolute; left: -999px; top: 0; z-index: 200; background: var(--panel); color: var(--ink); padding: 10px 14px; border: 1px solid var(--line-strong); }
.skip:focus { left: 8px; top: 8px; }
:focus-visible { outline: 3px solid var(--gem); outline-offset: 2px; }
.intro, .faq { margin: 18px 0; }
.faq h2 { margin: 0 0 8px; }
.intro strong.hl { color: var(--gold); }
.newernotice { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--red); background: var(--panel-2); color: var(--ink); font-size: 15px; }

/* --- v6: tab panels, overview tiles, up next, panel search --- */
#panels { scroll-margin-top: var(--navh); }
.tabpanel { margin-top: 20px; }
.tabpanel[hidden] { display: none; }
.tabpanel .controls, .tabpanel .extrasec { margin-top: 0; }
.tilegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.tile { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 12px 14px 10px; box-shadow: var(--shadow); cursor: pointer; }
.tile:hover { border-color: var(--muted); }
.tile .tk { font-size: 13.5px; font-weight: 600; color: var(--muted); letter-spacing: 0.02em; }
.tile .tv { font-family: "VT323", monospace; font-size: 38px; line-height: 1; color: var(--gold); }
.tile .tc { font-size: 14px; color: var(--ink-soft); }
.tilebar { height: 6px; background: var(--track); border-radius: 3px; overflow: hidden; margin-top: 7px; }
.tilebar > span { display: block; height: 100%; background: var(--gold-fill); }
.upnext .grouphead { margin-top: 26px; }
#continueBtn { margin-top: 12px; }
.panelsearch { margin: 12px 0 4px; }
.panelsearch input[type="search"] { width: 100%; font: inherit; font-size: 16px; padding: 9px 13px; border: 1.5px solid var(--line-strong); border-radius: 8px; background: var(--panel); color: var(--ink); }

/* --- v15: brand strip inside the sticky bar + raised coffin bars ---
   (Supersedes the v14 in-flow brand bar.) The brand strip is the top
   row of the fixed .secnav, above the tab pills, so the brand stays
   on screen while scrolling; --navh now measures strip + pills
   (88px desktop, 84px at <=720px) and every sticky offset follows it.
   The strip is ~30px: 16px mark, 6/7px padding, 1px hairline.
   The bar shell is full-bleed: .secnav is pinned left/right with no
   width cap (no viewport-width units anywhere, so it cannot force
   a horizontal scrollbar), while the strip contents and pills align to the
   page column through --colpad (the .wrap's own inset formula:
   18px inside the 1060px column).
   The coffin mark sits left of the lede title block on the
   construction grid (viewBox 96): bars w6 at x 29.4/39.8/50.2/60.6
   on a raised shared baseline y70 (was y76), heights 9.1/15.7/22.2/30
   (ratios unchanged), giving equal 4.7-unit side clearances at the
   baseline row and 18 units of foot clearance (was 12). */
.brandstrip { display: flex; align-items: center; gap: 8px; background: #121118; border-bottom: 1px solid #23222c; padding: 6px var(--colpad) 7px; }
.brandmark { flex: none; display: block; width: 16px; height: 16px; }
.brandword { font-size: 11px; font-weight: 600; letter-spacing: 0.34em; color: var(--ink); white-space: nowrap; }
header.lede { display: flex; gap: 16px; align-items: flex-start; }
.coffinmark { flex: none; display: block; width: 83.8px; height: 83.8px; }
.ledetext { min-width: 0; }
@media (max-width: 720px) {
  header.lede { gap: 12px; }
  .coffinmark { width: 101.1px; height: 101.1px; }
}

/* --- v16: bespoke icon set ---
   The sprite's four utility symbols were redrawn in the brand grammar
   (i-layers = Catalog: brand bars 30/52/74/100 in a frame; i-shield =
   the Keep: container + one bar; i-drop = into the coffin; i-diamond-
   check = bar-check, its rising stroke stretched like the tallest
   bar), joined by i-diamond-done (the same diamond filled green
   #8fc97e, dark check) as the check-off DONE state shown on Undo
   buttons, and six tab symbols (i-eye Overview, i-keyhole Unlocks,
   i-collection, i-banner Adventures, i-maw Bestiary, i-secrets).
   Filled sub-shapes carry class="f" plus their own fill/stroke
   presentation attributes, because <use> shadow clones inherit through
   the instance, not through document selectors. Tab pills stack the
   23px icon above the (retained) text label; --navh grows to match:
   108px desktop (strip 30 + tabrow 7+62.1+7 + hairline), 112px at
   <=720px (tabrow padding 9px). Active tab = gold icon + label on a
   dark ground (gold is the active-state color); the Secrets icon is
   lavender while inactive and yields to gold when active. */

/* --- v17: tab pills back to a single row + glyph unification ---
   User-directed correction to v16: tab icons move LEFT of their
   (retained) labels instead of stacking above them. Pills return to
   the exact v15 metrics (padding 9px 14px, inherited 1.5 line-height;
   5px 14px at <=720px), the icon sits at 19px in a 7px gap, and
   --navh returns to 88px desktop / 84px at <=720px (strip 30 +
   tabrow 7/9 + pill 42.75/34.75 + tabrow 7/9 + hairline, by the same
   CSS arithmetic as v15/v16); all three app.js fallbacks follow.
   Glyph unification: the last text glyphs serving as icons are gone.
   A new sprite symbol i-x (plain stroke X, same dialect) replaces
   every icon-x; every icon-check now speaks the check-off language
   (i-diamond-check in the dropdown ticks, the bar-check stroke inside
   the DLC dropdown's .box, i-diamond-done wherever a completed state
   is asserted: platform pills, the save-loaded message, done-card
   rank cells and "how" lines, completed adventure tasks). Glyphs
   inside sentence copy (the parse-error line's check/cross, the
   "Defeat N x Enemy" multiplier) and the caret/arrow punctuation
   were deliberately left as text. */

/* --- v18: dashboard icons + save-landing dock ---
   The Overview tiles carry their section icons (the same sprite
   symbols as the tab bar) at ~30px in the top-right corner;
   Secrets keeps its lavender. The stats strip — the totals /
   progress block — gets the eye at its top-right the same way,
   and a scroll dock identical to #panels: a save landing now
   scrolls HERE (scrollToOverviewTop) instead of to #panels below
   it, so the totals + giant bar are the first strip seen. */
#stats { scroll-margin-top: var(--navh); position: relative; }
.stats .statseye { position: absolute; top: 4px; right: 0; width: 30px; height: 30px; }
.stats .overall { padding-right: 42px; }
.tile { position: relative; }
.tile .tileic { position: absolute; top: 11px; right: 12px; width: 30px; height: 30px; }
.tile .tileic.sec { color: var(--arcane); }

/* --- v19: support-first platform strip ---
   The dropzone shows only the platforms that work (Steam, Epic,
   Linux pills); Xbox / PC Game Pass leave the hero entirely.
   Their whole presence is one quiet line at the end of the
   Find-your-save platform list, in that section's secondary
   text styling: no pill, no border, no icon, no red. */
details.paths .pathlist .xnote { margin: 10px 0 0; color: var(--ink-soft); font-size: 14px; }