/* =====================================================================================================
   UI theme "Bridge Terminal", part 3: overlay screens (sheets). Spec: docs/UI.md §4-§5.
   Every sheet is a plate that never scrolls; display titles are heavy compressed Mincho, either horizontal (seed,
   relic pick, reward) or a vertical spine (dossier sheets). No .cas rules, no !important.
   ===================================================================================================== */
.overlay { background: rgba(4, 6, 12, .62); }
.overlay.map { background: rgba(4, 6, 12, .68); }
.overlay.sub { background: rgba(4, 6, 12, .72); }
:is(#overlay, #mapOverlay, #subOverlay) > .card { --fill: var(--sheet); --arm: 20px; --bw: 3px; --drop: 6px; overflow: hidden; }
.overlay .row-btn { gap: 10px; align-items: center; }
/* a sheet boots once per screen (a re-render of the same screen does not replay it); it waits for the kill-cam */
.overlay > .card.boot { animation: sheetBoot 140ms steps(4, end) backwards; }
.has-world .stage.kill-cam #overlay > .card.boot { animation-delay: .75s; }
.has-world .stage.kill-cam.kill-lose #overlay > .card.boot { animation-delay: 1.05s; }
.overlay .card.boot :is(.relic-new, .relic.new) { animation: hexBlink 500ms steps(1, end) 3; }

/* display title, horizontal (seed / relic pick / reward): heavy Mincho, mechanically compressed */
:is(#overlay, #mapOverlay, #subOverlay) .card .big {
  display: inline-block; align-self: flex-start; padding-left: 0; margin: 0; color: var(--text); text-shadow: none;
  font: 900 calc(38px * var(--fs))/1.05 var(--f-disp); letter-spacing: .08em; transform: scaleX(.86); transform-origin: 0 50%;
}
/* display title, vertical spine with a thick bronze rule (dossier sheets) */
:is(#overlay, #mapOverlay, #subOverlay) > .card:is(.deck2, .shop, .summary, .invscreen, .hexmap, .camp) { position: relative; }
:is(#overlay, #mapOverlay, #subOverlay) > .card:is(.deck2, .shop, .summary, .invscreen, .hexmap, .camp) .big {
  position: absolute; left: 0; top: 0; bottom: 0; height: 100%; box-sizing: border-box; width: var(--spine); padding: 18px 0; margin: 0; transform: none;
  writing-mode: vertical-rl; text-orientation: mixed; text-align: start;
  font: 900 calc(34px * var(--fs))/var(--spine) var(--f-disp); letter-spacing: .14em; color: var(--text);
  background: linear-gradient(var(--bronze-hi) 0 0) 100% 0 / 4px 100% no-repeat, rgba(238, 241, 248, .035);
}
:is(#overlay, #mapOverlay, #subOverlay) > .card .big b { text-combine-upright: all; font: 800 calc(24px * var(--fs))/1 var(--f-lat); font-stretch: 75%; color: var(--text); margin: 0; }
#overlay > .card.summary.dead .big { color: var(--threat); background: linear-gradient(var(--threat) 0 0) 100% 0 / 4px 100% no-repeat, rgba(229, 72, 77, .06); }

/* section heads: label + count + an index rule running to the right edge */
.overlay .summary .sum-h, .overlay .shop .sum-h, .overlay .reward.v2 .rw-h {
  display: flex; align-items: baseline; gap: 10px; align-self: stretch; padding: 0; color: var(--text);
  font: 700 calc(13px * var(--fs))/1 var(--zh); letter-spacing: .16em;
}
.overlay .summary .sum-h::after, .overlay .shop .sum-h::after, .overlay .reward.v2 .rw-h::after { content: ""; flex: 1; height: 1px; align-self: center; background: linear-gradient(var(--text) 0 0) 0 0 / 22px 1px no-repeat, var(--hair); }
.overlay .summary .sum-h span, .overlay .shop .sum-h span { font: 600 calc(12px * var(--fs))/1 var(--f-lat); font-stretch: 75%; letter-spacing: .06em; color: var(--dim-text); }

/* ---------- seed / start: the title card (white Mincho on void) ---------- */
#overlay > .card.seed { width: 640px; padding: 30px 40px 28px; gap: 14px; align-items: stretch; text-align: left; --arm: 24px; --fill: var(--void); }
#overlay > .card.seed .big { font-size: calc(64px * var(--fs)); letter-spacing: .06em; transform: scaleX(.84); }
.overlay .card.seed .ver { align-self: stretch; margin: -6px 0 6px; padding-top: 6px; border-top: var(--rule-heavy); text-align: right; font: 600 calc(11px * var(--fs))/1 var(--f-lat); font-stretch: 125%; letter-spacing: .12em; color: var(--muted); }
.overlay .card.seed .seed-row, .overlay .card.seed .name-row { gap: 10px; }
.overlay .card.seed label { width: 48px; text-align: left; font: 500 calc(11px * var(--fs))/1 var(--zh); letter-spacing: .16em; color: var(--dim-text); }
.overlay .card.seed .name-row input, .overlay .card.seed input#seedIn { border: 0; border-bottom: 1px solid var(--hair-hi); border-radius: 0; background: rgba(4, 6, 12, .4); color: var(--text); padding: 8px 10px; }
.overlay .card.seed .name-row input { font: 500 calc(16px * var(--fs))/1.2 var(--zh); }
.overlay .card.seed input#seedIn { font: 700 calc(24px * var(--fs))/1.1 var(--f-lat); letter-spacing: .12em; text-align: left; }
.overlay .card.seed .name-row input:focus, .overlay .card.seed input:focus { outline: none; border-bottom: 2px solid var(--text); box-shadow: none; background: rgba(4, 6, 12, .6); }
.overlay .card.seed .row-btn { justify-content: flex-end; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--hair); }
#overlay #seedCancel { order: -1; margin-right: auto; }
#overlay #seedGo { font-size: calc(18px * var(--fs)); padding: 12px 30px 12px 24px; }

/* ---------- starting relic pick ---------- */
#overlay > .card.relicpick { width: 1100px; padding: 28px 36px 32px; gap: 18px; align-items: stretch; text-align: left; }
.overlay .relicpick .rp-opts { gap: 12px; padding-top: 14px; border-top: var(--rule-heavy); }
.overlay .relicpick .rp-item { min-height: 170px; padding: 22px 20px; gap: 10px; color: var(--text); transition: none; --hl: var(--hair-hi); --arm: 12px; }
.overlay .relicpick .rp-item:hover, .overlay .relicpick .rp-item:focus-visible { transform: none; box-shadow: var(--frame-shadow); --bk: var(--self); --hl: var(--self); --fill: var(--self-a); outline: none; }
.overlay .relicpick .rp-item .rn-name { font: 900 calc(24px * var(--fs))/1.1 var(--zh); letter-spacing: .1em; color: var(--text); }
.overlay .relicpick .rp-item .rn-desc { font: 400 calc(16px * var(--fs))/1.6 var(--zh); color: var(--dim-text); }

/* ---------- encounter map (choose and E view): hexagon = combat, octagon = safe places ---------- */
:is(#overlay, #mapOverlay) > .card.hexmap { padding: 20px 28px 20px calc(var(--spine) + 22px); gap: 28px; }
.overlay .hexmap .hm-head { justify-content: flex-end; }
.overlay .hexmap .hm-stat { gap: 18px; font: 500 calc(12px * var(--fs))/1 var(--zh); letter-spacing: .12em; color: var(--dim-text); }
.overlay .hexmap .hm-stat b { font: 700 calc(18px * var(--fs))/1 var(--f-lat); font-stretch: 75%; color: var(--text); }
.overlay .hexmap .hm-node { border-top: var(--rule-heavy); min-height: calc(200px * var(--fs)); }
.overlay .hexmap .hm-node:has(.mn-enemy) { flex: 0 0 auto; padding: 12px 14px 14px 22px; border: 1px solid rgba(229, 72, 77, .4);
  background: linear-gradient(var(--threat) 0 0) 0 0 / 12px 2px no-repeat, linear-gradient(var(--threat) 0 0) 0 0 / 2px 12px no-repeat,
              repeating-linear-gradient(180deg, rgba(238, 241, 248, .5) 0 1px, transparent 1px 8px) 6px 0 / 5px 100% no-repeat, var(--spectrum); }
.overlay .hexmap #mapGo { align-self: stretch; margin-top: auto; }
.hexmap .t-start { --c: var(--self); } .hexmap .t-enemy { --c: var(--threat); } .hexmap .t-elite { --c: var(--bt); } .hexmap .t-shop { --c: var(--shop); }
.hexmap .t-event { --c: var(--text); } .hexmap .t-camp { --c: var(--gain); } .hexmap .t-boss { --c: var(--threat); }
.hexmap .ln { stroke: var(--hair); stroke-width: 3; }
.hexmap .ln.far { stroke: rgba(196, 154, 82, .10); }
.hexmap .ln.next { stroke: rgba(238, 241, 248, .85); stroke-dasharray: 6 5; }
.hexmap .ln.walked { stroke: var(--self); }
.hexmap .nd .hx { fill: color-mix(in srgb, var(--c) 12%, #070912); stroke: var(--c); stroke-width: 1.5; stroke-linejoin: miter; transition: none; }
.hexmap .nd text { font-size: calc(26px * var(--fs)); }
.hexmap .nd:hover .hx { fill: color-mix(in srgb, var(--c) 26%, #070912); }
.hexmap .nd.t-elite .hx { stroke-width: 4; fill: color-mix(in srgb, var(--c) 22%, #070912); }
.hexmap .nd.t-boss .hx { stroke-width: 2; fill: var(--threat); }
.hexmap .nd.t-boss text { fill: var(--ink-key); }
.hexmap .nd.done .hx { stroke: var(--self); stroke-dasharray: 5 4; fill: color-mix(in srgb, var(--c) 6%, #070912); }
.hexmap .nd.here .hx, .hexmap .nd.target .hx { stroke: var(--self); stroke-width: 4; stroke-dasharray: none; fill: color-mix(in srgb, var(--self) 20%, #070912); }
.hexmap .nd.avail .hx { stroke-width: 3; animation: none; filter: none; }
.card.hexmap.boot .nd.avail .hx { animation: hexBlink 500ms steps(1, end) 3; }   /* blink on open only, not on node clicks */
.hexmap .nd .ring { stroke: var(--text); stroke-width: 2; stroke-dasharray: 8 5; }
.hexmap .mn-type { font: 900 calc(20px * var(--fs))/1.1 var(--zh); letter-spacing: .12em; }
.hexmap .mn-type .g { clip-path: var(--hex); width: 32px; height: 37px; background: color-mix(in srgb, var(--c) 30%, #070912); }
.hexmap .mn-type:is(.t-start, .t-shop, .t-event, .t-camp) .g, .hexmap .t-start .mn-type .g, .hexmap .t-shop .mn-type .g, .hexmap .t-event .mn-type .g, .hexmap .t-camp .mn-type .g { clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); width: 34px; height: 34px; }
.hexmap .mn-enemy .ne-svg, .overlay .next-enemy .ne-svg { display: none; }
.hexmap .mn-enemy .ne-name, .overlay .next-enemy .ne-name { font: 900 calc(20px * var(--fs))/1.1 var(--zh); letter-spacing: .08em; color: var(--text); }
.hexmap .mn-enemy .ne-name span, .overlay .next-enemy .ne-name span { font: 700 calc(12px * var(--fs))/1 var(--f-lat); font-stretch: 125%; letter-spacing: .1em; color: var(--dim-text); margin-left: 10px; }
.hexmap .ne-stats, .overlay .next-enemy .ne-stats { font: 400 calc(13px * var(--fs))/1.6 var(--zh); color: var(--dim-text); }
.hexmap .ne-stats b, .overlay .next-enemy .ne-stats b { font: 700 calc(15px * var(--fs))/1 var(--f-lat); font-stretch: 75%; color: var(--text); }
.hexmap .mn-line { font-size: calc(14px * var(--fs)); color: var(--dim-text); }
.hexmap .mn-line b { font: 700 calc(18px * var(--fs))/1 var(--f-lat); font-stretch: 75%; color: var(--text); }

/* ---------- deck editor: spine title, row labels on the hairlines, one-row footer (no scroll at 特大) ---------- */
#overlay > .card.editor.deck2 { padding: 10px 16px 10px calc(var(--spine) + 12px); gap: 3px; }
.overlay .deck2 .ed-head { min-height: 28px; align-items: center; }
.overlay .deck2 .dk-body { overflow: hidden; gap: 14px; margin-top: 0; padding-top: 12px; }   /* padding keeps the straddling title inside the clip box */
.overlay .deck2 .dk-slot { flex: none; width: 140px; pointer-events: none; }                    /* ghost chamber (an empty slot, not a card) */
.overlay .deck2 .dk-row.top, .overlay .deck2 .dk-row.bot { position: relative; padding: 14px 8px 6px; flex: 1 1 auto; --arm: 14px; }
.overlay .deck2 .dk-row.top { --fill: rgba(230, 176, 75, .05); --bk: var(--time); --hl: rgba(230, 176, 75, .4); }
.overlay .deck2 .dk-row.bot { --fill: rgba(238, 241, 248, .025); --hl: var(--hair); }
.overlay .deck2 .dk-title { position: absolute; left: 16px; top: auto; bottom: calc(100% - 9px); z-index: 2; min-height: 0; padding: 3px 9px; gap: 10px;
  background: rgba(4, 6, 12, .95); border: 1px solid var(--hl); font: 700 calc(12px * var(--fs))/1 var(--zh); letter-spacing: .16em; }
.overlay .deck2 .dk-row.top .dk-title { color: var(--time); }
.overlay .deck2 .dk-row.top .dk-title::before { content: none; }
.overlay .deck2 .dk-row.bot .dk-title { color: var(--text); }
.overlay .deck2 .dk-title b { font: 700 calc(14px * var(--fs))/1 var(--f-lat); font-stretch: 75%; }
.overlay .deck2 .dk-title b.ok { color: var(--text); }
.overlay .deck2 .dk-title .dk-hp { margin-left: 14px; color: var(--dim-text); }
.overlay .deck2 .dk-title .dk-cost { padding: 2px 6px; background: var(--threat); color: var(--ink-key); }
.overlay .deck2 .dk-title .tab { border-radius: 0; padding: 2px 8px; background: transparent; border: 1px solid transparent; color: var(--dim-text); font: 500 calc(11px * var(--fs))/1.2 var(--zh); letter-spacing: .08em; }
.overlay .deck2 .dk-title .tab:hover { border-color: var(--hair-hi); color: var(--text); }
.overlay .deck2 .dk-title .tab.on { color: var(--text); background: transparent; border-color: var(--hair-hi); box-shadow: inset 0 -2px 0 var(--text); }
.overlay .deck2 .dk-pager { grid-template-columns: 22px 1fr 22px; gap: 6px; }
.overlay .deck2 .dk-row .dk-nav { border-color: var(--hair); }
.overlay .deck2 .dk-page { position: absolute; right: 16px; top: auto; bottom: calc(100% - 9px); z-index: 2; min-height: 0; padding: 2px 7px; background: rgba(4, 6, 12, .95); border: 1px solid var(--hair); font: 600 calc(11px * var(--fs))/1 var(--f-lat); font-stretch: 75%; letter-spacing: .1em; color: var(--dim-text); }
.overlay .deck2 .dk-cnt { font-size: calc(11px * var(--fs)); color: var(--dim-text); }
.overlay .deck2 .dk-cnt b, .overlay .deck2 .dk-row.bot .dk-cnt b { font-family: var(--f-lat); font-stretch: 75%; color: var(--text); }
.overlay .deck2 .dk-row.top .dk-cnt b { color: var(--time); }
.overlay .deck2 .dk-foot { gap: 14px; align-items: stretch; }
.overlay .deck2 .dk-foot .dk-go { flex-direction: row; align-items: center; min-width: 0; gap: 8px; margin-left: auto; }
.overlay .deck2 .dk-go #btnNext, .overlay .deck2 .dk-go #btnBack { width: auto; }

/* enemy dossier = the one spectral analysis plate (deck footer) */
.overlay .next-enemy, .overlay .next-enemy.is-elite { position: relative; padding: 8px 16px 8px 24px; gap: 16px; --bk: var(--threat); --hl: rgba(229, 72, 77, .4); --arm: 12px; --fill: transparent;
  background-image: linear-gradient(var(--bk) 0 0), linear-gradient(var(--bk) 0 0), linear-gradient(var(--bk) 0 0), linear-gradient(var(--bk) 0 0), linear-gradient(var(--bk) 0 0), linear-gradient(var(--bk) 0 0), linear-gradient(var(--bk) 0 0), linear-gradient(var(--bk) 0 0),
    repeating-linear-gradient(180deg, rgba(238, 241, 248, .5) 0 1px, transparent 1px 8px), var(--spectrum);
  background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%, 8px 0, 0 0;
  background-size: var(--arm) var(--bw), var(--bw) var(--arm), var(--arm) var(--bw), var(--bw) var(--arm), var(--arm) var(--bw), var(--bw) var(--arm), var(--arm) var(--bw), var(--bw) var(--arm), 5px 100%, 100% 100%; }
.overlay .next-enemy.is-elite { --bw: 4px; --hl: rgba(229, 72, 77, .7); }
.overlay .next-enemy .ne-txt { display: grid; grid-template-columns: auto 1fr; column-gap: 20px; row-gap: 2px; align-items: center; }
.overlay .next-enemy .ne-h { grid-column: 1; grid-row: 1; font: 500 calc(11px * var(--fs))/1 var(--zh); letter-spacing: .16em; color: var(--dim-text); }
.overlay .next-enemy .ne-name { grid-column: 1; grid-row: 2; }
.overlay .next-enemy .ne-stats { grid-column: 2; grid-row: 1 / 3; }

/* ---------- reward ---------- */
#overlay > .card.reward.v2 { width: 1040px; padding: 22px 36px 0; gap: 16px; align-items: stretch; text-align: left; }
.overlay .reward.v2 .rw-head { flex-direction: column-reverse; align-items: flex-start; gap: 4px; padding-bottom: 8px; border-bottom: var(--rule-heavy); }
#overlay > .card.reward.v2 .rw-head .big { font-size: calc(46px * var(--fs)); }
.overlay .reward.v2 .rw-head .sub { font: 500 calc(12px * var(--fs))/1.4 var(--zh); letter-spacing: .08em; color: var(--dim-text); }
.overlay .reward.v2 .rw-h .hpline { color: var(--dim-text); letter-spacing: .06em; }
.overlay .reward.v2 .rw-h .hpline b { font-family: var(--f-lat); font-stretch: 75%; color: var(--text); }
.overlay .reward.v2 .rw-h .hpline b.g { color: var(--gain); }
.overlay .reward .loot-item .tick, .overlay .reward.v2 .loot-item .tick { border-radius: 0; padding: 4px 10px; border: 1px solid rgba(110, 231, 160, .6); background: transparent; color: var(--gain); font: 700 calc(12px * var(--fs))/1 var(--zh); letter-spacing: .1em; }
.overlay .reward .loot-item.on .tick { background: var(--glass-hi); color: var(--text); border-color: var(--text); box-shadow: inset 3px 0 0 var(--text); }
.overlay .reward.v2 .relic-new { align-self: flex-start; --arm: 10px; --bk: var(--bronze-hi); }
.relic-new .rn-h { font: 500 calc(11px * var(--fs))/1 var(--zh); letter-spacing: .16em; color: var(--dim-text); }
.relic-new .rn-name { font: 900 calc(20px * var(--fs))/1.2 var(--zh); letter-spacing: .1em; color: var(--text); }
.relic-new .rn-desc { color: var(--dim-text); }
.overlay .reward.v2 .rw-sec.relics .relic-strip { justify-content: flex-start; align-self: flex-start; }
.overlay .reward.v2 .loot { justify-content: flex-start; }
.overlay .reward.v2 .row-btn.end { position: static; width: auto; margin: 0 -36px; padding: 12px 36px 16px; background: none; border-top: 1px solid var(--hair); }

/* ---------- inventory (我的藍圖) ---------- */
#subOverlay > .card.invscreen { width: 1480px; padding: 48px 16px 12px calc(var(--spine) + 14px); gap: 6px; }
.overlay .invscreen .ed-head { position: static; min-height: 0; }
.overlay .invscreen #invClose { position: absolute; top: 10px; right: 14px; }
.overlay .invscreen .inv-pager { grid-template-columns: 22px 1fr 22px; gap: 8px; }
.overlay .invscreen .inv-grid { gap: 10px 8px; }
.overlay .invscreen .dk-page, .overlay .summary .dk-page { font: 600 calc(12px * var(--fs))/1 var(--f-lat); font-stretch: 75%; letter-spacing: .14em; color: var(--dim-text); }
.overlay .invscreen .mcnt, .overlay .summary .mcnt { color: var(--dim-text); }
.overlay .invscreen .mcnt b, .overlay .summary .mcnt b { font-family: var(--f-lat); font-stretch: 75%; color: var(--text); }
.overlay .summary .mcnt .dm { color: var(--time); }

/* ---------- shop: two columns sized by the stock, no scroll ---------- */
#overlay > .card.shop { width: 1360px; max-height: calc(100% - 12px); padding: 14px 20px 14px calc(var(--spine) + 18px); overflow: hidden;
  display: grid; grid-template-columns: calc(var(--shop-cols, 4) * 140px + (var(--shop-cols, 4) - 1) * 14px) 1fr; grid-template-rows: auto 1fr auto auto; column-gap: 28px; row-gap: 12px; align-items: start; }
.overlay .shop .ed-head { position: static; margin: 0; padding: 0 0 8px; background: none; border-bottom: var(--rule-heavy); grid-column: 1 / -1; grid-row: 1; justify-content: flex-start; }
.overlay .shop .gold-big { padding: 6px 12px; border: 1px solid color-mix(in srgb, var(--coin) 60%, transparent); border-radius: 0; background: var(--coin-a); }
.overlay .shop .gold-big span { font: 500 calc(11px * var(--fs))/1 var(--zh); letter-spacing: .16em; color: var(--dim-text); }
.overlay .shop .gold-big b { font: 800 calc(26px * var(--fs))/1 var(--f-lat); font-stretch: 75%; color: var(--coin); }
.overlay .shop .shop-sec:nth-child(2) { grid-column: 1; grid-row: 2 / 4; }
.overlay .shop .shop-sec:nth-child(3) { grid-column: 2; grid-row: 2; }
.overlay .shop > .relic-strip { grid-column: 2; grid-row: 3; align-self: end; }
.overlay .shop .row-btn.end { position: static; margin: 0; padding: 10px 0 0; background: none; border-top: 1px solid var(--hair); grid-column: 1 / -1; grid-row: 4; justify-content: flex-end; }
.overlay .shop .shop-cards { gap: 14px; }
.overlay .shop .shop-relics { grid-template-columns: 1fr; gap: 10px; }
.overlay .shop .shop-relic { padding: 12px 14px 12px 16px; --hl: var(--hair-hi); }
.overlay .shop .shop-relic .rn-name { font: 900 calc(17px * var(--fs))/1.2 var(--zh); letter-spacing: .1em; color: var(--text); }
.overlay .shop .shop-relic .rn-desc { color: var(--dim-text); }
.overlay .shop button.buy { border-radius: 0; padding: 7px 0; border: 1px solid color-mix(in srgb, var(--coin) 70%, transparent); background: transparent; color: var(--coin); font: 700 calc(15px * var(--fs))/1 var(--f-lat); font-stretch: 75%; letter-spacing: .1em; }
.overlay .shop button.buy:hover:not(:disabled) { background: var(--coin-a); border-color: var(--coin); }
.overlay .shop button.buy:disabled { opacity: 1; color: var(--muted); border-color: var(--hair); background: repeating-linear-gradient(135deg, rgba(139, 148, 174, .14) 0 2px, transparent 2px 7px); }

/* ---------- campfire / random event ---------- */
#overlay > .card.camp { min-width: 480px; min-height: calc(200px * var(--fs)); padding: 24px 30px 24px calc(var(--spine) + 24px); gap: 16px; align-items: flex-start; }
.overlay .camp .camp-opt { width: 320px; padding: 18px 18px; gap: 8px; color: var(--text); --bk: var(--gain); --hl: rgba(110, 231, 160, .45); --arm: 12px; }
.overlay .camp .camp-opt:hover:not(:disabled), .overlay .camp .camp-opt:focus-visible { box-shadow: var(--frame-shadow); outline: none; --fill: var(--gain-a); --hl: var(--gain); }
.overlay .camp .camp-opt .t { font: 900 calc(22px * var(--fs))/1.1 var(--zh); letter-spacing: .16em; color: var(--text); }
.overlay .camp .camp-opt .d { font-size: calc(13px * var(--fs)); color: var(--dim-text); }
.overlay .camp .ev-gain { font: 500 calc(13px * var(--fs))/1 var(--zh); letter-spacing: .16em; color: var(--dim-text); }
.overlay .camp .ev-gain b { font: 800 calc(34px * var(--fs))/1 var(--f-lat); font-stretch: 75%; color: var(--coin); margin-left: 8px; }

/* ---------- run summary: tabs + paging, no scroll ---------- */
#overlay > .card.summary { width: 1480px; max-width: none; max-height: calc(100% - 12px); padding: 12px 12px 12px calc(var(--spine) + 14px); gap: 8px; overflow: hidden; }
#overlay > .card.summary.dead { --bk: var(--threat); --hl: rgba(229, 72, 77, .45); }
.overlay .summary .sum-head { position: static; margin: 0; padding: 0 0 6px; background: none; border-bottom: var(--rule-heavy); align-items: center; }
.overlay .summary .sum-tabs { display: flex; gap: 4px; }
.overlay .summary .sum-tab { display: inline-flex; align-items: baseline; gap: 8px; padding: 7px 14px; border: 1px solid var(--hair); border-radius: 0; background: transparent; color: var(--dim-text); font: 700 calc(13px * var(--fs))/1 var(--zh); letter-spacing: .14em; }
.overlay .summary .sum-tab span { font: 600 calc(12px * var(--fs))/1 var(--f-lat); font-stretch: 75%; letter-spacing: .04em; }
.overlay .summary .sum-tab:hover { color: var(--text); border-color: var(--hair-hi); }
.overlay .summary .sum-tab.on { background: transparent; border-color: var(--hair-hi); color: var(--text); box-shadow: inset 0 -2px 0 var(--text); }
.overlay .summary > .sub { font: 500 calc(12px * var(--fs))/1.45 var(--zh); letter-spacing: .06em; color: var(--dim-text); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.overlay .summary .sum-seed { border: 1px solid var(--hair-hi); border-radius: 0; padding: 6px 12px; }
.overlay .summary .sum-seed span { font: 500 calc(10px * var(--fs))/1 var(--f-lat); font-stretch: 125%; letter-spacing: .14em; color: var(--muted); }
.overlay .summary .sum-seed b { font: 700 calc(17px * var(--fs))/1 var(--f-lat); font-stretch: 75%; letter-spacing: .08em; color: var(--text); }
.overlay .summary .sum-seed:first-child b { color: var(--coin); }
.overlay .summary .sum-page { display: grid; grid-template-columns: 22px 1fr 22px; gap: 8px; align-items: stretch; flex: 1 1 auto; min-height: 0; }
.overlay .summary .sum-cards { gap: 10px 8px; align-content: start; }
.overlay .summary .sum-relics { grid-template-columns: repeat(4, 1fr); gap: 8px; align-content: start; }
.overlay .summary .sum-relic { --hl: var(--hair-hi); --arm: 8px; padding: 10px 12px; }
.overlay .summary .sum-relic b { color: var(--text); }
.overlay .summary .row-btn.end { position: static; margin: 0; padding: 8px 0 0; background: none; border-top: 1px solid var(--hair); justify-content: space-between; }