:root {
  --bg: #0d1211;
  --panel: rgba(16, 22, 21, 0.97);
  --panel-2: #18211f;
  --line: #2c3a36;
  --ink: #e6e1cf;
  --muted: #9aa59f;
  --glow: #6dffab;
  --glow-soft: rgba(109, 255, 171, 0.35);
  --bad: #ff6464;
  --warn: #f0b24a;
  --W: #e9b545; --K: #6d9cf5; --I: #ee5d78; --C: #45c79c;
  --hud-h: 52px;
  --pw: 1600px;            /* page width, set by the zoom control */
  --serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --black: 'UnifrakturMaguntia', 'EB Garamond', serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: calc(var(--hud-h) + 8px); }
body {
  margin: 0; background: var(--bg) radial-gradient(ellipse at 50% 0, #1b2724 0, var(--bg) 70%) fixed;
  color: var(--ink); font: 17px/1.4 var(--serif);
  -webkit-text-size-adjust: 100%;
}
button { font: inherit; color: inherit; }
.noscript { padding: 80px 20px; text-align: center; }

/* ---- HUD ------------------------------------------------------------------------------------------- */
#hud {
  position: fixed; inset: 0 0 auto 0; height: var(--hud-h); z-index: 30;
  display: flex; align-items: center; gap: 10px; padding: 0 12px;
  background: linear-gradient(#0b100fee, #0b100fd8); border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 18px #000a; backdrop-filter: blur(6px);
}
.hud-title { font-family: var(--black); font-size: 24px; color: #cfe9dc; text-shadow: 0 0 10px var(--glow-soft); white-space: nowrap; margin-right: auto; }
.hud-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px;
}
.hud-btn:hover, .hud-btn:focus-visible { border-color: var(--glow); outline: none; box-shadow: 0 0 10px var(--glow-soft); }
.hud-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
#btn-build svg { fill: currentColor; stroke: none; }
.hud-points { display: flex; gap: 6px; }
.pt { display: inline-flex; align-items: center; gap: 4px; min-width: 64px; height: 36px; padding: 0 9px 0 5px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 18px; }
.pt img { width: 26px; height: 26px; object-fit: contain; }
.pt.neg .v { color: var(--bad); }
.pt.bump { animation: bump .35s ease; }
@keyframes bump { 40% { transform: scale(1.12); box-shadow: 0 0 12px var(--glow-soft); } }
.hud-chip { display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 10px; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 8px; font-size: 15px; white-space: nowrap; }
.hud-chip img { width: 22px; height: 22px; object-fit: contain; }
.hud-chip .n { font-weight: 600; font-variant-numeric: tabular-nums; }
.hud-chip:empty { display: none; }
.hud-mad .off { color: var(--warn); }
.badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--glow); color: #06130c; font-size: 13px; font-weight: 700; line-height: 20px; text-align: center; }
.badge.bad { background: var(--bad); color: #fff; }

/* ---- pages ------------------------------------------------------------------------------------------ */
#pages { padding: calc(var(--hud-h) + 12px) 0 60px; }
.page {
  position: relative; width: min(var(--pw), 100vw); margin: 0 auto 14px; aspect-ratio: 1600 / 10000;
  background: #151c1a center / 100% 100% no-repeat; box-shadow: 0 0 30px #000c; overflow: hidden;
}
.page img.tile { position: absolute; left: 0; width: 100%; height: 10%; display: block; user-select: none; -webkit-user-drag: none; }
.page svg.hot { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* hotspots */
.opt { cursor: pointer; outline: none; }
.opt .hit { fill: transparent; }
.opt .ring { fill: none; stroke: transparent; stroke-width: 3; vector-effect: non-scaling-stroke; transition: stroke .15s, fill .15s; }
.opt .veil { fill: transparent; pointer-events: none; transition: fill .15s; }
.opt:hover .ring, .kbd .opt:focus .ring { stroke: rgba(190, 255, 220, .75); stroke-width: 2; }
.kbd .opt:focus .ring { stroke-dasharray: 6 4; }
.opt.sel .ring { stroke: var(--glow); stroke-width: 4; fill: rgba(109, 255, 171, .09); filter: url(#glow); }
.opt.sel:hover .ring { stroke-width: 5; }
.opt.lock { cursor: not-allowed; }
.opt.lock .veil { fill: rgba(4, 7, 7, .58); }
.opt.lock:hover .veil { fill: rgba(4, 7, 7, .45); }
.opt.bad .ring { stroke: var(--bad); stroke-width: 4; fill: rgba(255, 90, 90, .08); filter: url(#glowbad); }
.opt.flash .ring { animation: flash 1.4s ease 1; }
@keyframes flash { 0%, 100% { stroke: transparent; } 20%, 60% { stroke: #fff; stroke-width: 6; } 40%, 80% { stroke: var(--glow); stroke-width: 6; } }
.var { cursor: pointer; }
.var .vhit { fill: transparent; }
.var:hover .vring { stroke: rgba(190, 255, 220, .8); }
.var .vring { fill: none; stroke: transparent; stroke-width: 2; vector-effect: non-scaling-stroke; }
.var.vlock .vhit { fill: rgba(4, 7, 7, .55); }
.var.vlock { cursor: not-allowed; }
.var.on .vring { stroke: var(--glow); stroke-width: 3; fill: rgba(109, 255, 171, .14); }
.mark { pointer-events: none; }
.mark circle { fill: var(--glow); stroke: #06130c; stroke-width: 3; }
.mark text { fill: #06130c; font: 700 30px/1 var(--serif); text-anchor: middle; dominant-baseline: central; }
.mark.bad circle { fill: var(--bad); }
.mark.bad text { fill: #fff; }
.mark .pill { fill: var(--glow); stroke: #06130c; stroke-width: 3; }
.mark .pilltxt { font-size: 24px; letter-spacing: 1px; }
.opt.free .ring { stroke: rgba(109, 255, 171, .55); stroke-width: 2; stroke-dasharray: 10 6; }
.mark.freemark .pill { fill: #0d1312; stroke: var(--glow); }
.mark.freemark .pilltxt { fill: var(--glow); }
.mark.lockmark circle { fill: #1c2523; stroke: #5d6d68; }
.mark.lockmark path { fill: none; stroke: #b9c4bf; stroke-width: 4; }
.minus { cursor: pointer; }
.minus circle { fill: #1c2523; stroke: var(--glow); stroke-width: 3; }
.minus:hover circle { fill: #2b3a36; }
.minus path { stroke: var(--glow); stroke-width: 5; stroke-linecap: round; }
.pagebtn { position: absolute; transform: translate(-50%, -50%); z-index: 2; padding: .35em 1em; cursor: pointer;
  font: 600 clamp(11px, 1.1vw, 17px) var(--serif); color: #06130c; background: var(--glow); border: 0; border-radius: 999px;
  box-shadow: 0 0 14px var(--glow-soft); }
.pagebtn:hover { filter: brightness(1.1); }
.pagebtn.roll { width: 16%; padding: .45em .3em; line-height: 1.15; white-space: normal; }
@media (max-width: 600px) { .pagebtn.roll { font-size: 10px; padding: .3em .2em; } }

/* ---- tooltip, menu, toast ----------------------------------------------------------------------------- */
.tip { position: fixed; z-index: 80; max-width: 340px; padding: 10px 12px; pointer-events: none;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 24px #000c; font-size: 15px; }
.tip h4 { margin: 0 0 4px; font-size: 17px; color: #fff; }
.tip .sub { color: var(--muted); font-size: 13px; margin-top: -2px; margin-bottom: 4px; }
.tip p { margin: 4px 0 0; }
.tip .why { color: var(--bad); }
.tip .good { color: var(--glow); }
.tip .hint { color: var(--muted); font-size: 13px; }
.price { display: inline-flex; flex-wrap: wrap; gap: 2px 8px; align-items: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.price span { display: inline-flex; align-items: center; gap: 2px; }
.price img { width: 18px; height: 18px; object-fit: contain; vertical-align: -3px; }
.price s { color: var(--muted); font-weight: 400; }
.menu { position: fixed; z-index: 85; min-width: 220px; max-width: 320px; padding: 6px; background: var(--panel);
  border: 1px solid var(--glow); border-radius: 10px; box-shadow: 0 8px 30px #000d, 0 0 14px var(--glow-soft); }
.menu h4 { margin: 4px 8px 6px; font-size: 16px; }
.menu .menu-sub { margin: -2px 8px 8px; color: var(--muted); font-size: 14px; }
.pathgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 2px; width: min(520px, calc(100vw - 40px)); }
.menu .pathgrid button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; text-align: center; font-size: 13px; }
.pathgrid img { width: 40px; height: 40px; }
.xrow { display: flex; align-items: center; gap: 8px; padding: 4px 8px; }
.xrow img { width: 26px; height: 26px; }
.xrow .xname { flex: 1; }
.xrow .xn { min-width: 28px; text-align: center; font-variant-numeric: tabular-nums; }
.menu .xbtn, .adj button { width: 30px; height: 30px; padding: 0; text-align: center; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2); cursor: pointer; font-size: 18px; line-height: 1; }
.adjust { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.adj { display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: #121917; border-radius: 6px; }
.adj img { width: 22px; height: 22px; }
.adj b { min-width: 30px; text-align: center; font-variant-numeric: tabular-nums; }
.hint-line { margin: -2px 0 6px; color: var(--muted); font-size: 14px; }
.menu:has(.pathgrid) { max-width: none; }
.picks .change { grid-column: 1 / -1; justify-self: start; background: none; border: 0; padding: 0; color: var(--glow); font-size: 13px; text-decoration: underline; cursor: pointer; }
.menu button { display: block; width: 100%; padding: 8px 10px; text-align: left; cursor: pointer; background: none; border: 0; border-radius: 6px; font-size: 15px; }
.menu button:hover, .menu button:focus-visible { background: #24312e; outline: none; }
.menu button.on { color: var(--glow); }
.menu button[disabled] { opacity: .45; cursor: not-allowed; }
.menu button small { display: block; color: var(--muted); font-size: 13px; line-height: 1.3; }
.toast { position: fixed; z-index: 90; left: 50%; bottom: 22px; transform: translateX(-50%); max-width: min(560px, calc(100vw - 32px));
  padding: 10px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 24px #000c; font-size: 15px; }
.toast.bad { border-color: var(--bad); }
.lens-open .toast, .drawer-open .toast { bottom: calc(96px + env(safe-area-inset-bottom)); }   /* above the zoom view's and drawers' buttons */
.toast { pointer-events: none; }              /* taps go through the message to what's under it... */
.toast button { pointer-events: auto; }        /* ...except on its Undo / Read buttons */
.toast button { margin-left: 10px; background: none; border: 0; color: var(--glow); cursor: pointer; text-decoration: underline; }

/* ---- zoom view ("lens") for reading a card on a small screen ---------------------------------------- */
.lens { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; background: #0b100fee; backdrop-filter: blur(4px); }
.lens-head { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px 4px; }
.lens-head h3 { margin: 0; font-size: 20px; }
.lens-head .sub { color: var(--muted); font-size: 14px; }
.lens .close { margin-left: auto; width: 40px; height: 40px; font-size: 30px; line-height: 1; background: none; border: 0; color: var(--muted); cursor: pointer; }
.lens-info { padding: 0 14px 6px; font-size: 15px; }
.lens-info p { margin: 3px 0; }
.lens-info .why { color: var(--bad); }
.lens-info .good { color: var(--glow); }
.lens-view { flex: 1; overflow: auto; padding: 8px; touch-action: pan-x pan-y pinch-zoom; }
.lens-img { position: relative; margin: 0 auto; overflow: hidden; border-radius: 6px; box-shadow: 0 0 0 1px var(--line); }
.lens-img img { position: absolute; display: block; max-width: none; }
.lens-page { position: absolute; inset: 0; }
.lens-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.lens-actions button { flex: 1; min-width: 90px; padding: 10px; font-size: 16px; cursor: pointer; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; }
.lens-actions button.primary { background: var(--glow); color: #06130c; border-color: var(--glow); font-weight: 600; }
.lens-actions button[disabled] { opacity: .45; }

/* ---- drawers ---------------------------------------------------------------------------------------- */
.scrim { position: fixed; inset: 0; z-index: 35; background: #0007; }
.drawer { position: fixed; top: 0; bottom: 0; z-index: 40; width: min(400px, 100vw); display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); box-shadow: 0 0 40px #000c; }
.drawer.left { left: 0; border-left: 0; }
.drawer.right { right: 0; border-right: 0; width: min(460px, 100vw); }
.drawer-head { display: flex; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { margin: 0; font: 400 28px var(--black); color: #cfe9dc; text-shadow: 0 0 10px var(--glow-soft); }
.drawer .close { margin-left: auto; width: 36px; height: 36px; font-size: 26px; line-height: 1; cursor: pointer; background: none; border: 0; color: var(--muted); }
.drawer .close:hover { color: #fff; }
.drawer-foot { padding: 10px 14px; border-top: 1px solid var(--line); }
.drawer-foot.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.drawer-foot.actions button { padding: 6px 12px; cursor: pointer; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; font-size: 15px; }
.drawer-foot.actions button:hover { border-color: var(--glow); }
.drawer-foot.actions .danger:hover { border-color: var(--bad); color: var(--bad); }
.free-mode { font-size: 14px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; margin-left: auto; }
#search { margin: 12px 14px 4px; padding: 8px 10px; background: #0d1312; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; font: inherit; }
#search:focus { outline: none; border-color: var(--glow); }
.search-results { list-style: none; margin: 0; padding: 0 8px; max-height: 40vh; overflow: auto; }
.search-results li button, #toc button { display: block; width: 100%; text-align: left; padding: 5px 8px; cursor: pointer; background: none; border: 0; border-radius: 6px; font-size: 16px; }
.search-results li button:hover, #toc button:hover, #toc button:focus-visible, .search-results li button:focus-visible { background: #24312e; outline: none; }
.search-results small, #toc small { color: var(--muted); font-size: 13px; }
#toc { flex: 1; overflow: auto; padding: 6px 8px 12px; }
#toc h3 { margin: 12px 8px 2px; font-size: 13px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
#toc button.here { color: var(--glow); }
#toc .cnt { float: right; color: var(--glow); font-size: 14px; }
.zoom { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--muted); }
.zoom input { flex: 1; accent-color: var(--glow); }

#build-body { flex: 1; overflow: auto; padding: 4px 14px 16px; }
#build-body h3 { margin: 16px 0 6px; font: 400 21px var(--black); color: #cfe9dc; }
.totals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.totals .pt { min-width: 0; justify-content: center; }
.bens { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 4px; }
.ben { display: flex; align-items: center; gap: 5px; padding: 3px 8px 3px 4px; border-radius: 6px; background: #121917; font-size: 14px; color: var(--muted); white-space: nowrap; }
.ben b { margin-left: auto; }
.ben img { width: 24px; height: 24px; object-fit: contain; }
.ben.on { color: var(--ink); background: #1b2623; }
.ben.on b { color: var(--glow); }
.ben.neg b { color: var(--bad); }
.ben.chosen { outline: 1px solid var(--glow); }
.warns { list-style: none; margin: 0; padding: 0; }
.warns li { margin: 4px 0; padding: 6px 10px; border-left: 3px solid var(--warn); background: #211d14; border-radius: 0 6px 6px 0; font-size: 15px; }
.warns li.bad { border-color: var(--bad); background: #2a1616; }
.warns li button { background: none; border: 0; padding: 0; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.warns li button:hover { text-decoration: underline; }
.picks { list-style: none; margin: 0; padding: 0; }
.picks li { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid #1f2a27; font-size: 16px; }
.picks li button.go { grid-column: 1; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; }
.picks li .rm { grid-column: 2; grid-row: 1; }
.picks li .price { grid-column: 1 / -1; }
.picks li button.go:hover { color: var(--glow); }
.picks li.bad button.go { color: var(--bad); }
.picks .vlabel { color: var(--glow); font-size: 14px; }
.picks .price { font-size: 14px; font-weight: 400; }
.picks .rm { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 18px; line-height: 1; padding: 0 4px; }
.picks .rm:hover { color: var(--bad); }
.picks .sechead { display: block !important; border: 0; padding: 10px 0 2px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.empty { color: var(--muted); font-style: italic; }
.counters { display: flex; flex-wrap: wrap; gap: 6px; }
.counter { padding: 4px 10px; border-radius: 6px; background: #121917; font-size: 15px; }
.counter b { font-variant-numeric: tabular-nums; }
.counter.off { background: #211d14; color: var(--warn); }

/* ---- small screens ------------------------------------------------------------------------------------ */
@media (max-width: 900px) {
  :root { --hud-h: 48px; }
  #hud { gap: 6px; padding: 0 8px; }
  .hud-title { display: none; }
  .hud-points { margin-right: auto; gap: 4px; }
  .pt { min-width: 0; padding: 0 6px 0 3px; font-size: 15px; height: 32px; }
  .pt img { width: 20px; height: 20px; }
  .hud-btn { height: 32px; padding: 0 8px; }
  .hud-btn .lbl { display: none; }
  #btn-benefits, .hud-mad { display: none; }
}
@media (max-width: 420px) { .pt { gap: 2px; font-size: 14px; } .hud-points { gap: 3px; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }