:root {
  --bg: #03060b;
  --panel: rgba(8, 14, 24, 0.82);
  --line: rgba(120, 170, 220, 0.22);
  --text: #d8e4f0;
  --dim: #8095aa;
  --accent: #7fd1ff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--bg);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); }
#stage, #stage canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

#title {
  position: fixed; top: 16px; left: 16px; pointer-events: none; z-index: 5;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  padding: 8px 12px; backdrop-filter: blur(6px);
}
#title h1 {
  margin: 0; font-size: 15px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent);
}
#title p { margin: 4px 0 0; font-size: 12px; color: var(--dim); }

button, select, input { font: inherit; color: inherit; }
button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Left: legend + filters */
#filters {
  position: fixed; left: 16px; top: 84px; width: 264px; max-height: calc(100vh - 168px); overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  padding: 10px 12px; font-size: 12px; backdrop-filter: blur(6px); z-index: 4;
}
#filters:empty { display: none; }
.f-toggle {
  all: unset; display: flex; width: 100%; justify-content: space-between; box-sizing: border-box;
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim);
}
.f-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.f-headcount { letter-spacing: 0; text-transform: none; font-weight: 400; }
.f-sec { border: 0; margin: 10px 0 0; padding: 0; min-width: 0; }
.f-sec legend, .f-sec summary, .f-label { padding: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.f-sec summary { cursor: pointer; margin-bottom: 4px; }
.f-label { display: block; margin-bottom: 4px; }
.row { display: flex; align-items: center; gap: 8px; margin: 3px 0; cursor: pointer; }
.row .n { margin-left: auto; color: var(--dim); }
.row .sw { display: flex; }
.row input[type=checkbox] { margin: 0; accent-color: var(--accent); }
.row.all { color: var(--dim); }
.f-scroll { max-height: 176px; overflow-y: auto; padding-right: 4px; }
.alt-row { display: grid; grid-template-columns: 26px 1fr; gap: 0 6px; align-items: center; margin: 4px 0 0; }
.alt-row input { width: 100%; margin: 0; accent-color: var(--accent); }
.alt-out { grid-column: 2; color: var(--dim); font-size: 11px; margin-bottom: 2px; }
.presets { display: flex; gap: 4px; margin-top: 6px; }
.presets button, .tb-row button, #drawer-toggle {
  background: rgba(127, 209, 255, 0.08); border: 1px solid var(--line); border-radius: 4px; cursor: pointer; padding: 4px 8px; font-size: 12px;
}
.presets button { flex: 1; padding: 3px 0; }
.presets button:hover, .tb-row button:hover, #drawer-toggle:hover { background: rgba(127, 209, 255, 0.2); }
#owner-select { width: 100%; background: #0b1420; border: 1px solid var(--line); border-radius: 4px; padding: 4px 6px; text-overflow: ellipsis; }
#filters .note { margin: 10px 0 0; color: var(--dim); line-height: 1.4; }

/* Right: object card placeholder */
#card {
  position: fixed; right: 16px; top: 16px; width: 300px; max-height: calc(100vh - 100px); overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 12px; font-size: 12px; backdrop-filter: blur(6px); z-index: 4;
}
#card[hidden] { display: none; }

/* Bottom: time bar, drawer */
#status { position: fixed; bottom: 96px; left: 50%; transform: translateX(-50%); font-size: 12px; color: var(--dim); }
#timebar {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 6;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; backdrop-filter: blur(6px);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.tb-time { font-size: 15px; letter-spacing: 0.04em; }
.tb-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.tb-row button[aria-pressed=true] { background: var(--accent); color: #03060b; border-color: var(--accent); font-weight: 600; }
.tb-play { min-width: 34px; }
#drawer-toggle { position: fixed; right: 16px; bottom: 16px; z-index: 6; background: var(--panel); backdrop-filter: blur(6px); padding: 8px 12px; }
#drawer-toggle.on { background: var(--accent); color: #03060b; }
kbd { font: inherit; font-size: 10px; border: 1px solid currentColor; border-radius: 3px; padding: 0 3px; opacity: 0.7; }
#drawer {
  position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%); width: min(720px, calc(100vw - 640px)); min-width: 460px; z-index: 5;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; backdrop-filter: blur(6px);
}
#drawer[hidden] { display: none; }
#drawer h2 { margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.chart-key { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; color: var(--dim); margin-bottom: 4px; }
.chart-key span { display: inline-flex; align-items: center; gap: 5px; }
svg.chart { width: 100%; height: auto; display: block; }
svg.chart text { fill: var(--dim); font-size: 10px; font-family: inherit; }
svg.chart text.axis-label { fill: var(--text); font-size: 11px; }
svg.chart .axis { stroke: var(--dim); stroke-width: 1; }
svg.chart .gridline { stroke: var(--line); stroke-width: 1; }

@media (max-width: 1100px) {
  #drawer { width: calc(100vw - 32px); min-width: 0; left: 16px; transform: none; }
}

@media (min-width: 641px) { .f-toggle { pointer-events: none; } }

/* Phone: view only, panels become a compact bottom sheet */
@media (max-width: 640px) {
  #title { padding: 6px 10px; }
  #title h1 { font-size: 12px; }
  #title p { display: none; }
  #filters { top: auto; left: 8px; right: 8px; bottom: 112px; width: auto; max-height: 50vh; padding: 8px 12px; }
  #filters:not(.open) .f-body { display: none; }
  #filters.open { max-height: calc(100vh - 220px); }
  #timebar { left: 8px; right: 8px; bottom: 8px; transform: none; padding: 6px; }
  .tb-time { font-size: 13px; }
  .tb-row button { padding: 5px 6px; font-size: 11px; }
  #drawer-toggle, #drawer, #card { display: none !important; }
  #status { bottom: 160px; }
}

/* Object card contents */
.c-head { display: flex; align-items: flex-start; gap: 8px; }
.c-name { margin: 0; flex: 1; font-size: 15px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; color: var(--text); }
.c-close {
  flex: none; width: 26px; height: 26px; line-height: 1; font-size: 18px; cursor: pointer;
  background: rgba(127, 209, 255, 0.08); border: 1px solid var(--line); border-radius: 4px;
}
.c-close:hover { background: rgba(127, 209, 255, 0.2); }
.c-sub { margin: 12px 0 2px; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.c-list { display: grid; grid-template-columns: 82px 1fr; gap: 3px 8px; margin: 8px 0 0; }
.c-list dt { color: var(--dim); }
.c-list dd { margin: 0; overflow-wrap: anywhere; }
.c-type { display: inline-flex; align-items: center; gap: 6px; }

/* Observer panel (right side). The object card slides left of it while it is open. */
#observer-toggle {
  position: fixed; right: 124px; bottom: 16px; z-index: 6; cursor: pointer;
  background: var(--panel); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 4px; padding: 8px 12px; font-size: 12px;
}
#observer-toggle:hover { background: rgba(127, 209, 255, 0.2); }
#observer-toggle.on { background: var(--accent); color: #03060b; }
#observer {
  position: fixed; right: 16px; top: 16px; bottom: 68px; width: 410px; z-index: 5;
  display: flex; flex-direction: column; gap: 8px; overflow-x: hidden; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 12px; font-size: 12px; backdrop-filter: blur(6px);
}
#observer[hidden] { display: none; }
#observer > :not(.ob-list) { flex-shrink: 0; }
body.observer-open #card { right: 442px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ob-det { flex: none; border-top: 1px solid var(--line); padding-top: 6px; }
.ob-det > summary { cursor: pointer; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.ob-body { margin-top: 8px; }
.ob-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ob-field > span:first-child { font-size: 11px; color: var(--dim); }
.ob-field.wide { margin-bottom: 6px; }
.ob-field input, #observer input[type=text] {
  width: 100%; background: #0b1420; border: 1px solid var(--line); border-radius: 4px; padding: 5px 6px; color-scheme: dark;
}
.ob-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 6px; }
.ob-grid.two { grid-template-columns: 1fr 1fr; margin-top: 10px; }
.ob-ft, .ob-hint, .ob-now { color: var(--dim); font-size: 11px; margin: 0; }
.ob-hint { margin-top: 4px; line-height: 1.35; }
.ob-now { align-self: center; overflow-wrap: anywhere; }
.ob-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
#observer button:not(.c-close) {
  background: rgba(127, 209, 255, 0.08); border: 1px solid var(--line); border-radius: 4px; cursor: pointer; padding: 5px 10px;
}
#observer button:not(.c-close):hover:not(:disabled) { background: rgba(127, 209, 255, 0.2); }
#observer button:disabled { opacity: 0.7; cursor: default; filter: saturate(0.4); }
.ob-foot .ob-primary { white-space: nowrap; flex: none; }
#observer button.ob-primary { background: var(--accent); color: #03060b; border-color: var(--accent); font-weight: 600; }
#observer button.ob-primary:hover:not(:disabled) { background: #a5e0ff; }
.ob-row .ob-primary { white-space: nowrap; }
.ob-msg { margin: 6px 0 0; color: #ffb48a; min-height: 0; }
.ob-msg:empty { display: none; }
.ob-suggest { list-style: none; margin: -2px 0 6px; padding: 2px; background: #0b1420; border: 1px solid var(--line); border-radius: 4px; max-height: 190px; overflow-y: auto; }
.ob-suggest[hidden] { display: none; }
.ob-suggest li { padding: 5px 6px; border-radius: 3px; cursor: pointer; }
.ob-suggest li:hover, .ob-suggest li.on { background: rgba(127, 209, 255, 0.2); }
.ob-progress { flex: none; margin: 0; color: var(--text); min-height: 15px; }
.ob-bar { flex: none; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.ob-bar > div { height: 100%; width: 0; background: var(--accent); transition: width 0.2s; }
.ob-dome-canvas { display: block; width: 100%; aspect-ratio: 1; max-width: 340px; margin: 8px auto 0; }
.ob-caption { margin: 6px 0 0; color: var(--dim); line-height: 1.4; }
.ob-legend { margin: 6px 0 0; }
.ob-legend span { white-space: nowrap; }
.ob-filters { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; }
.ob-count { margin-left: auto; color: var(--dim); }
.ob-list { flex: 1 0 150px; min-height: 150px; overflow-y: auto; border: 1px solid var(--line); border-radius: 4px; }
.ob-table { width: 100%; border-collapse: collapse; }
.ob-table th { position: sticky; top: 0; background: #0b1420; text-align: left; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); padding: 5px 6px; z-index: 1; }
.ob-table td { padding: 4px 6px; border-top: 1px solid rgba(120, 170, 220, 0.1); vertical-align: top; }
.ob-table tbody tr { cursor: pointer; }
.ob-table tbody tr:hover, .ob-table tbody tr.on { background: rgba(127, 209, 255, 0.16); }
.ob-table tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ob-table td.nm { max-width: 118px; overflow-wrap: anywhere; }
.ob-table .utc { color: var(--dim); font-size: 10px; }
.ob-table td.yes { color: #6fe39a; font-weight: 600; }
.ob-table td.no { color: var(--dim); }
.ob-star { color: #ffd34d; margin-left: 4px; }
.ob-more { margin: 6px; }
.ob-more[hidden], .ob-empty[hidden] { display: none; }
.ob-empty { margin: 0; color: var(--dim); }
.ob-foot { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ob-foot .ob-hint { margin: 0; flex: 1 0 100%; }
.ob-notice { margin: 0; }

@media (max-width: 640px) {
  #observer, #observer-toggle { display: none !important; }
}

/* Replays panel (right side, shares the observer slot) */
#replays-toggle {
  position: fixed; right: 232px; bottom: 16px; z-index: 6; cursor: pointer;
  background: var(--panel); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 4px; padding: 8px 12px; font-size: 12px;
}
#replays-toggle:hover { background: rgba(127, 209, 255, 0.2); }
#replays-toggle.on { background: var(--accent); color: #03060b; }
#replays {
  position: fixed; right: 16px; top: 16px; bottom: 68px; width: 410px; z-index: 5;
  display: flex; flex-direction: column; gap: 8px; overflow-x: hidden; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 12px; font-size: 12px; backdrop-filter: blur(6px);
}
#replays[hidden] { display: none; }
#replays > * { flex-shrink: 0; }
body.replays-open #card { right: 442px; }
#replays button { background: rgba(127, 209, 255, 0.08); border: 1px solid var(--line); border-radius: 4px; cursor: pointer; padding: 5px 8px; }
#replays button:hover { background: rgba(127, 209, 255, 0.2); }
#replays button.c-close { padding: 0; }
.rp-ev { text-align: left; display: block; width: 100%; line-height: 1.4; }
.rp-ev[aria-pressed=true] { border-color: var(--accent); background: rgba(127, 209, 255, 0.16); }
.rp-ev b { font-size: 13px; }
.rp-ev span { display: block; color: var(--dim); }
.rp-tag { display: inline-block; border: 1px solid var(--line); border-radius: 3px; padding: 0 4px; font-size: 10px; color: var(--text); }
.rp-sec { border-top: 1px solid var(--line); padding-top: 8px; }
.rp-sec h3 { margin: 0 0 4px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.rp-sec label { display: flex; gap: 6px; align-items: flex-start; margin: 3px 0; cursor: pointer; }
.rp-sec input[type=number] { width: 90px; background: #0b1420; border: 1px solid var(--line); border-radius: 4px; padding: 4px 6px; color-scheme: dark; }
.rp-sec input[type=range] { width: 100%; accent-color: var(--accent); }
.rp-dim { color: var(--dim); line-height: 1.4; margin: 4px 0 0; }
.rp-leg { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--dim); }
.rp-leg span { display: inline-flex; align-items: center; gap: 5px; }
.chart-note { margin: 4px 0 0; font-size: 10px; color: var(--dim); line-height: 1.35; }
#replay-caption, #sandbox-caption {
  position: fixed; left: 50%; top: 16px; transform: translateX(-50%); z-index: 6; pointer-events: none;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 6px 14px; font-size: 14px; white-space: nowrap;
}
#replay-caption[hidden], #sandbox-caption[hidden] { display: none; }
body.capture #sandbox,
body.capture #title, body.capture #filters, body.capture #card, body.capture #drawer, body.capture #timebar,
body.capture #observer, body.capture #replays, body.capture button, body.capture #status { display: none !important; }
body.capture #replay-caption, body.capture #sandbox-caption { top: auto; bottom: 40px; font-size: 22px; padding: 10px 22px; }
@media (max-width: 640px) { #replays, #replays-toggle, #sandbox, #sandbox-toggle { display: none !important; } }

/* Sandbox panel (right side, shares the observer and replays slot) */
#sandbox-toggle {
  position: fixed; right: 340px; bottom: 16px; z-index: 6; cursor: pointer;
  background: var(--panel); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 4px; padding: 8px 12px; font-size: 12px;
}
#sandbox-toggle:hover { background: rgba(127, 209, 255, 0.2); }
#sandbox-toggle.on { background: var(--accent); color: #03060b; }
#sandbox {
  position: fixed; right: 16px; top: 16px; bottom: 68px; width: 430px; z-index: 5;
  display: flex; flex-direction: column; gap: 8px; overflow-x: hidden; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 12px; font-size: 12px; backdrop-filter: blur(6px);
}
#sandbox[hidden], #sandbox [hidden] { display: none !important; }
#sandbox > * { flex-shrink: 0; }
body.sandbox-open #card { right: 462px; }
#sandbox button, #sandbox select { background: rgba(127, 209, 255, 0.08); border: 1px solid var(--line); border-radius: 4px; cursor: pointer; padding: 5px 8px; }
#sandbox button:hover { background: rgba(127, 209, 255, 0.2); }
#sandbox button.c-close { padding: 0; }
#sandbox button:disabled { opacity: 0.45; cursor: default; }
#sandbox button.on { border-color: var(--accent); background: rgba(127, 209, 255, 0.22); }
#sandbox button.sb-small { padding: 2px 6px; font-size: 11px; }
#sandbox button.sb-run { width: 100%; padding: 9px; background: var(--accent); color: #03060b; font-weight: 600; }
#sandbox button.sb-run:disabled { background: rgba(127, 209, 255, 0.25); color: var(--text); }
#sandbox select { color-scheme: dark; background: #0b1420; }
#sandbox input[type=search], #sandbox input[type=number] { background: #0b1420; border: 1px solid var(--line); border-radius: 4px; padding: 4px 6px; color-scheme: dark; min-width: 0; }
#sandbox input[type=number] { width: 96px; }
#sandbox input[type=search] { flex: 1; }
#sandbox progress { width: 100%; accent-color: var(--accent); }
.sb-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.sb-lab { color: var(--dim); min-width: 118px; }
.sb-chosen { font-weight: 600; overflow-wrap: anywhere; }
.sb-results { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.sb-hit { text-align: left; display: block; width: 100%; line-height: 1.35; }
.sb-hit span { display: block; color: var(--dim); }
.sb-plain { margin: 0 0 6px; line-height: 1.5; font-size: 13px; }
.sb-dl { margin: 6px 0; display: grid; grid-template-columns: 1fr; gap: 2px; }
.sb-dl dt { color: var(--dim); margin-top: 6px; }
.sb-dl dd { margin: 0; overflow-wrap: anywhere; }
.sb-dl dd b { font-size: 13px; font-weight: 600; }
.sb-result h3:not(:first-child) { margin-top: 16px; }
#sandbox > .rp-dim:last-child { margin-bottom: 4px; }
.sb-table { width: 100%; border-collapse: collapse; font-size: 11px; margin-top: 4px; }
.sb-table th, .sb-table td { border-top: 1px solid var(--line); padding: 4px 4px; text-align: right; vertical-align: top; }
.sb-table th[scope=row], .sb-table thead td { text-align: left; font-weight: 400; }
.sb-table thead th { color: var(--dim); font-weight: 400; }
.sb-table tbody th { color: var(--text); }
.sb-setup { display: flex; flex-direction: column; gap: 8px; }
.sb-setup > summary { cursor: pointer; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); margin-bottom: 8px; }
.sb-setup:not([open]) > summary { margin-bottom: 0; }
.sb-setup > summary:hover { color: var(--text); }
.sb-setup > * + * { margin-top: 8px; }

/* Cascade game screen (key C): takes over the page, the globe dims behind it */
#cascade-toggle {
  position: fixed; right: 448px; bottom: 16px; z-index: 6; cursor: pointer;
  background: var(--panel); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 4px; padding: 8px 12px; font-size: 12px;
}
#cascade-toggle:hover { background: rgba(127, 209, 255, 0.2); }
#cascade-toggle.on { background: var(--accent); color: #03060b; }
#cascade {
  position: fixed; inset: 0; z-index: 20; overflow-y: auto; padding: 14px 18px 18px; font-size: 12px;
  background: rgba(3, 6, 11, 0.92); backdrop-filter: blur(5px);
}
#cascade[hidden] { display: none; }
body.cascade-open #cascade-toggle { display: none; }
.cs-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.cs-head .c-name { flex: none; font-size: 16px; }
.cs-head .rp-dim { flex: 1; margin: 0; }
.cs-body { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; }
.cs-levers { display: flex; flex-direction: column; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 12px; position: sticky; top: 0; }
#cascade button, #cascade select { background: rgba(127, 209, 255, 0.08); border: 1px solid var(--line); border-radius: 4px; cursor: pointer; padding: 5px 8px; }
#cascade button:hover { background: rgba(127, 209, 255, 0.2); }
#cascade button:disabled { opacity: 0.55; cursor: default; }
#cascade button.c-close { padding: 0; }
#cascade input[type=number] { background: #0b1420; border: 1px solid var(--line); border-radius: 4px; padding: 4px 6px; color-scheme: dark; width: 72px; }
#cascade input[type=range] { width: 100%; accent-color: var(--accent); margin: 0; }
#cascade progress { width: 100%; accent-color: var(--accent); }
.cs-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
#cascade .cs-presets button[aria-pressed=true] { background: var(--accent); color: #03060b; border-color: var(--accent); font-weight: 600; }
.cs-lever { margin-top: 8px; }
.cs-lab { display: block; color: var(--text); font-weight: 600; margin-bottom: 2px; }
.cs-ctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cs-out { color: var(--accent); }
.cs-unit { color: var(--dim); }
.cs-lever .rp-dim { margin: 2px 0 0; font-size: 11px; }
.cs-cons { border: 0; margin: 8px 0 0; padding: 0; min-width: 0; }
.cs-cons legend { padding: 0; font-weight: 600; margin-bottom: 2px; }
.cs-cons .row { align-items: flex-start; }
#cascade button.cs-run { width: 100%; margin-top: 10px; padding: 9px; background: var(--accent); color: #03060b; font-weight: 600; }
.cs-status { min-height: 2.6em; }
.cs-headline { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.25; color: var(--text); }
.cs-sub { margin: 4px 0 10px; color: var(--dim); font-size: 13px; line-height: 1.4; }
.cs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cs-card { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; min-width: 0; }
.cs-card h3 { margin: 0 0 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.cs-card .chart-note { font-size: 10.5px; }
.cs-note { margin: 12px 0 4px; line-height: 1.5; font-size: 12px; max-width: 1180px; }
.cs-foot a { color: var(--accent); }
svg.chart text.band-label { font-size: 10px; }
@media (max-width: 1100px) { .cs-body { grid-template-columns: 1fr; } .cs-levers { position: static; } .cs-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { #cascade, #cascade-toggle { display: none !important; } }
body.capture #cascade-toggle { display: none !important; }

/* Cascade playback on the globe: the screen shrinks to a side strip (src/ui/cascade-player.js) */
.cs-player { display: none; }
#cascade.cs-globe-mode { inset: 0 0 0 auto; width: 380px; padding: 12px 12px 14px; background: rgba(3, 6, 11, 0.8); border-left: 1px solid var(--line); }
#cascade.cs-globe-mode .cs-body, #cascade.cs-globe-mode .cs-hint { display: none; }
#cascade.cs-globe-mode .cs-player { display: flex; flex-direction: column; gap: 10px; }
#cascade.cs-globe-mode .cs-head { margin-bottom: 4px; }
#cascade.cs-globe-mode .cs-head .c-name { flex: 1; font-size: 13px; }
body.cascade-globe #filters, body.cascade-globe #timebar, body.cascade-globe #card, body.cascade-globe #drawer, body.cascade-globe #clock,
body.cascade-globe #drawer-toggle, body.cascade-globe #observer-toggle, body.cascade-globe #replays-toggle, body.cascade-globe #sandbox-toggle,
body.cascade-globe #replay-caption { display: none !important; }
.cp-year { display: flex; align-items: baseline; gap: 12px; }
.cp-y { font-size: 40px; font-weight: 700; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.cp-cal { font-size: 22px; color: var(--accent); font-variant-numeric: tabular-nums; }
.cp-stats { display: grid; grid-template-columns: 1fr; gap: 2px; }
.cp-stats div { display: flex; align-items: baseline; gap: 8px; }
.cp-num { font-size: 20px; font-weight: 600; color: #E87BC1; font-variant-numeric: tabular-nums; min-width: 7.5ch; text-align: right; }
.cp-stats div:nth-child(2) .cp-num { color: #56B4E9; }
.cp-stats .cp-coll { color: #FFE38A; }
/* Captures hide every button (body.capture button); the playback's own controls stay visible. */
body.capture #cascade.cs-globe-mode button.cp-play, body.capture #cascade.cs-globe-mode button.cp-charts { display: inline-block !important; }
.cp-legend .cp-flash-note { color: var(--dim); font-size: 11px; padding-left: 19px; }
.cp-busy { margin: 2px 0 0; color: var(--dim); }
.cp-busy span { color: var(--text); }
.cp-controls { display: flex; align-items: center; gap: 8px; }
#cascade .cp-play { min-width: 64px; padding: 7px 10px; background: var(--accent); color: #03060b; font-weight: 600; }
#cascade .cp-scrub { flex: 1; }
#cascade .cp-speed { flex: 1; color: var(--text); }
#cascade .cp-speed option { background: #0b1420; }
.cp-scale { margin: 0 0 6px; color: var(--text); }
.cp-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.cp-legend li { display: flex; align-items: center; gap: 7px; }
.cp-legend svg { flex: none; }
.cp-rep { margin: 6px 0 0; }
.cp-heat { width: 100%; height: auto; }
#cascade .cs-globe-btn { margin: 0 0 10px; padding: 7px 12px; background: var(--accent); color: #03060b; font-weight: 600; }
svg.chart .heat-now rect { shape-rendering: crispEdges; }

/* Constellation list scroll cue */
.f-scroll { scrollbar-width: thin; scrollbar-color: var(--accent) transparent; }
.f-scroll::-webkit-scrollbar { width: 6px; }
.f-scroll::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; }
.f-more { display: none; margin-top: 2px; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); text-align: center; }
.f-det.more .f-more { display: block; }
.f-det.more .f-more::before { content: "\2193  "; }

/* About panel (key A) and first-load card */
#about-toggle {
  position: fixed; left: 16px; bottom: 16px; z-index: 6; cursor: pointer;
  background: var(--panel); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 4px; padding: 8px 12px; font-size: 12px;
}
#about-toggle:hover { background: rgba(127, 209, 255, 0.2); }
#about-toggle.on { background: var(--accent); color: #03060b; }
body.cascade-open #about-toggle { display: none; }
body.capture #about-toggle { display: none !important; }
#about, #welcome {
  position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(3, 6, 11, 0.72); backdrop-filter: blur(4px);
}
#about[hidden], #welcome[hidden] { display: none; }
.ab-card, .wl-card {
  position: relative; background: #08101b; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; line-height: 1.5;
}
.ab-card { width: min(880px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; }
.ab-body { overflow-y: auto; padding: 18px 22px 22px; }
.ab-close { position: absolute; top: 10px; right: 12px; z-index: 1; cursor: pointer; background: rgba(127, 209, 255, 0.08); border: 1px solid var(--line); border-radius: 4px; padding: 4px 10px; }
.ab-close:hover, .wl-card button:hover { background: rgba(127, 209, 255, 0.2); }
.ab-body h2 { margin: 0 70px 8px 0; font-size: 18px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.ab-body h3 { margin: 20px 0 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.ab-lead { margin: 0; font-size: 14px; }
.ab-list { margin: 0; padding-left: 18px; }
.ab-list li { margin: 5px 0; }
.ab-dim { color: var(--dim); font-size: 12px; margin: 6px 0; }
.ab-body a { color: var(--accent); }
.ab-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ab-table th, .ab-table td { border-top: 1px solid var(--line); padding: 6px 8px 6px 0; text-align: left; vertical-align: top; }
.ab-table thead th { color: var(--dim); font-weight: 400; border-top: 0; }
.ab-table tbody th { font-weight: 600; width: 22%; }
.ab-pass, .ab-part, .ab-fail { white-space: nowrap; font-weight: 600; }
.ab-pass::before, .ab-part::before, .ab-fail::before { margin-right: 4px; }
.ab-pass::before { content: "\25CF"; color: #4dd6a0; }
.ab-part::before { content: "\25D0"; color: #f0c04a; }
.ab-fail::before { content: "\25A0"; color: #ff7a6b; }
.wl-card { width: min(520px, 100%); padding: 20px 24px; font-size: 14px; }
.wl-card h2 { margin: 0 0 8px; font-size: 18px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.wl-card p { margin: 0 0 10px; }
.wl-keys { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; font-size: 12px; color: var(--dim); }
.wl-keys kbd { color: var(--text); opacity: 1; min-width: 22px; display: inline-block; text-align: center; }
.wl-row { display: flex; gap: 8px; }
.wl-card button { cursor: pointer; background: rgba(127, 209, 255, 0.08); border: 1px solid var(--line); border-radius: 4px; padding: 8px 14px; }
.wl-card button.wl-go { background: var(--accent); color: #03060b; font-weight: 600; }
@media (max-width: 640px) { #about-toggle { display: none !important; } .wl-keys { grid-template-columns: 1fr; } }

/* Sandbox playback (M7): scrubber labels under the slider */
.sb-scrub-labels { position: relative; height: 16px; font-size: 10px; margin: 0 8px 4px; }
.sb-scrub-labels span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.sb-scrub-labels span:first-child { transform: none; left: -8px !important; }
.sb-scrub-labels span:last-child { transform: translateX(-100%); left: calc(100% + 8px) !important; }
.sb-play { min-width: 64px; }

/* Look up (M8, key L): first-person sky view from the observer (src/ui/lookup.js) */
#lookup-toggle {
  position: fixed; right: 556px; bottom: 16px; z-index: 6; cursor: pointer;
  background: var(--panel); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 4px; padding: 8px 12px; font-size: 12px;
}
#lookup-toggle:hover { background: rgba(127, 209, 255, 0.2); }
#lookup { position: fixed; inset: 0; z-index: 5; background: #02040a; }
#lookup[hidden] { display: none; }
.lk-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.lk-canvas:active { cursor: grabbing; }
.lk-banner {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: min(640px, calc(100vw - 420px)); min-width: 320px;
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 6px; padding: 8px 14px;
  backdrop-filter: blur(6px); pointer-events: none;
}
.lk-main { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; }
.lk-sub { margin: 3px 0 0; font-size: 12px; color: var(--dim); line-height: 1.35; }
.lk-sub:empty { display: none; }
.lk-controls { position: absolute; top: 16px; right: 16px; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.lk-controls button {
  background: var(--panel); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 4px; padding: 6px 10px; font-size: 12px; cursor: pointer;
}
.lk-controls button:hover:not(:disabled) { background: rgba(127, 209, 255, 0.2); }
.lk-controls button[aria-pressed=true] { background: var(--accent); color: #03060b; border-color: var(--accent); font-weight: 600; }
.lk-controls button[hidden] { display: none; }
.lk-controls button:disabled { opacity: 0.7; cursor: default; }
.lk-info {
  position: absolute; left: 16px; bottom: 16px; max-width: calc(50vw - 250px); min-width: 240px; margin: 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; font-size: 12px; line-height: 1.4; color: var(--text);
  backdrop-filter: blur(6px); pointer-events: none;
}
.lk-msg {
  position: absolute; right: 16px; top: 132px; max-width: 280px; margin: 0; font-size: 12px; line-height: 1.4;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px;
}
.lk-msg:empty { display: none; }
body.lookup-open #title, body.lookup-open #filters, body.lookup-open #card, body.lookup-open #drawer,
body.lookup-open #observer, body.lookup-open #replays, body.lookup-open #sandbox, body.lookup-open #cascade,
body.lookup-open #replay-caption, body.lookup-open #sandbox-caption,
body.lookup-open #drawer-toggle, body.lookup-open #observer-toggle, body.lookup-open #replays-toggle,
body.lookup-open #sandbox-toggle, body.lookup-open #cascade-toggle, body.lookup-open #lookup-toggle,
body.lookup-open #about-toggle { display: none !important; }
body.capture #lookup-toggle { display: none !important; }
#observer button.ob-look { margin-left: auto; }
@media (max-width: 1100px) {
  .lk-banner { width: calc(100vw - 200px); min-width: 0; left: 16px; transform: none; }
  .lk-info { max-width: calc(100vw - 32px); bottom: 104px; }
}
@media (max-width: 640px) {
  #lookup-toggle { right: 8px; top: 8px; bottom: auto; padding: 6px 10px; }
  #lookup-toggle kbd { display: none; }
  .lk-banner { top: 8px; left: 8px; right: 8px; width: auto; transform: none; padding: 6px 10px; }
  .lk-main { font-size: 14px; }
  .lk-controls { top: auto; bottom: 330px; right: 8px; left: 8px; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
  .lk-controls button { padding: 6px 8px; font-size: 11px; }
  .lk-info { left: 8px; right: 8px; bottom: 112px; max-width: none; min-width: 0; font-size: 11px; padding: 4px 8px; }
  .lk-msg { top: auto; bottom: 372px; right: 8px; left: 8px; max-width: none; }
}
.lk-legend { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 4px; color: var(--dim); font-size: 11px; }
.lk-legend span { display: inline-flex; align-items: center; gap: 5px; }
.lk-sw { display: inline-block; width: 6px; height: 6px; }
.lk-sw.star { border-radius: 50%; background: #f4f4ff; }
.lk-sw.sat-lit { width: 4px; height: 4px; background: #96e8ff; }
.lk-sw.sat { width: 3px; height: 3px; background: #69a0c8; }
.lk-sw.sat-faint { width: 3px; height: 3px; background: #78c8eb; }
.lk-hint { display: block; margin-top: 4px; color: var(--accent); font-size: 11px; }
.lk-sw.track { width: 14px; height: 0; border-top: 2px dotted #7fd1ff; }
.lk-sw.name { width: 10px; height: 2px; }
.lk-legend[hidden] { display: none; }
.lk-card {
  position: absolute; left: 16px; top: 16px; width: 290px; margin: 0; padding: 8px 12px 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; backdrop-filter: blur(6px); font-size: 12px; line-height: 1.4;
}
.lk-card[hidden] { display: none; }
.lk-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.lk-card h2 { margin: 0; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.lk-card .lk-card-close { background: none; border: 0; color: var(--dim); font-size: 18px; line-height: 1; padding: 0 2px; cursor: pointer; }
.lk-card .lk-card-close:hover { color: var(--text); }
.lk-card dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 6px 0 0; }
.lk-card dt { color: var(--dim); }
.lk-card dd { margin: 0; }
@media (max-width: 1100px) { .lk-card { top: 100px; } }
@media (max-width: 640px) { .lk-card { top: 86px; left: 8px; right: 8px; width: auto; padding: 6px 10px 8px; } .lk-card dl { margin-top: 4px; } }

/* Weapons screen (key W): space weapons, what if (src/ui/weapons.js). Shares the sandbox panel's look. */
#weapons-toggle {
  position: fixed; right: 664px; bottom: 16px; z-index: 6; cursor: pointer;
  background: var(--panel); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 4px; padding: 8px 12px; font-size: 12px;
}
#weapons-toggle:hover { background: rgba(127, 209, 255, 0.2); }
#weapons-toggle.on { background: var(--accent); color: #03060b; }
#weapons {
  position: fixed; right: 16px; top: 16px; bottom: 68px; width: 450px; z-index: 5;
  display: flex; flex-direction: column; gap: 8px; overflow-x: hidden; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 12px; font-size: 12px; backdrop-filter: blur(6px);
}
#weapons[hidden], #weapons [hidden] { display: none !important; }
#weapons > * { flex-shrink: 0; }
body.weapons-open #card { right: 482px; }
#weapons button, #weapons select { background: rgba(127, 209, 255, 0.08); border: 1px solid var(--line); border-radius: 4px; cursor: pointer; padding: 5px 8px; }
#weapons button:hover { background: rgba(127, 209, 255, 0.2); }
#weapons button.c-close { padding: 0; }
#weapons button:disabled { opacity: 0.45; cursor: default; }
#weapons button.on { border-color: var(--accent); background: rgba(127, 209, 255, 0.22); }
#weapons button.sb-run { width: 100%; padding: 9px; background: var(--accent); color: #03060b; font-weight: 600; margin-top: 8px; }
#weapons button.sb-run:disabled { background: rgba(127, 209, 255, 0.25); color: var(--text); }
#weapons select { color-scheme: dark; background: #0b1420; }
#weapons input[type=number] { background: #0b1420; border: 1px solid var(--line); border-radius: 4px; padding: 4px 6px; color-scheme: dark; min-width: 0; width: 80px; }
#weapons input[type=range] { width: 100%; accent-color: var(--accent); }
#weapons progress { width: 100%; accent-color: var(--accent); }
#weapons a { color: var(--accent); }
.wp-label-bar { margin: 0; padding: 4px 8px; border: 1px solid var(--accent); border-radius: 4px; color: var(--accent); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.wp-sec { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 4px; }
.wp-sec > summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text); padding: 2px 0 6px; }
.wp-sec > summary:hover { color: var(--accent); }
.wp-sec > * + * { margin-top: 8px; }
.wp-sec .rp-sec { margin-top: 10px; }
.wp-h { margin: 12px 0 2px; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.wp-card { border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; line-height: 1.45; }
.wp-card .wp-h:first-child { margin-top: 0; }
.wp-list { margin: 0; padding-left: 18px; line-height: 1.45; }
.wp-list li { margin: 3px 0; }
.wp-src { color: var(--dim); font-size: 11px; }
.wp-inv { display: inline-block; border: 1px solid #E69F00; color: #E69F00; border-radius: 3px; padding: 0 5px; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.wp-note { margin: 4px 0 0; line-height: 1.45; color: var(--text); border-left: 2px solid #E69F00; padding-left: 8px; }
.wp-big { margin: 0; font-size: 17px; font-weight: 600; color: #FFE38A; }
.wp-radios label { margin: 5px 0; }
.wp-facts { display: grid; grid-template-columns: 104px 1fr; gap: 3px 8px; }
.wp-facts dt { margin-top: 0 !important; }
.wp-facts dd { overflow-wrap: anywhere; }
.wp-cloud { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
#weapons-labels { position: fixed; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.wp-label {
  position: absolute; left: 0; top: 0; padding: 1px 6px; font-size: 12px; font-weight: 600; white-space: nowrap;
  background: rgba(3, 6, 11, 0.72); border: 1px solid var(--wp-c, #fff); color: var(--wp-c, #fff); border-radius: 3px;
}
.wp-label[hidden] { display: none; }
#weapons-inset {
  position: fixed; left: 16px; bottom: 96px; z-index: 5; width: 360px; padding: 6px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--panel); backdrop-filter: blur(6px);
}
#weapons-inset[hidden] { display: none; }
#weapons-inset .wi-title { font-size: 11px; color: var(--dim); margin: 0 0 4px; letter-spacing: 0.06em; text-transform: uppercase; }
#weapons-inset canvas { display: block; width: 348px; height: 222px; border-radius: 3px; }
#weapons-caption {
  position: fixed; left: 50%; top: 16px; transform: translateX(-50%); z-index: 6; pointer-events: none;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 6px 14px; font-size: 13px; max-width: calc(100vw - 520px);
  white-space: normal; text-align: center;
}
#weapons-caption[hidden] { display: none; }
body.weapons-play #filters, body.weapons-play #card { display: none !important; }
/* Captures hide page chrome and every button; the Weapons panel and its controls stay. */
body.capture #weapons:not([hidden]) { display: flex !important; }
body.capture #weapons button:not([hidden]) { display: inline-block !important; }
body.capture #weapons button.sb-run:not([hidden]) { display: block !important; }
body.capture #weapons-toggle { display: none !important; }
body.capture #weapons-caption { top: 16px; }
body.cascade-open #weapons-toggle, body.cascade-open #weapons { display: none !important; }
body.lookup-open #weapons, body.lookup-open #weapons-toggle, body.lookup-open #weapons-caption, body.lookup-open #weapons-inset, body.lookup-open #weapons-labels { display: none !important; }
@media (max-width: 640px) { #weapons, #weapons-toggle, #weapons-inset, #weapons-labels, #weapons-caption { display: none !important; } }

.wp-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.5); vertical-align: -1px; }
.sb-table th.wp-group { text-align: center; color: var(--text); border-left: 1px solid var(--line); }

/* History screen (key Y): the catalog from 1957 to today (src/ui/history.js). A side strip, like the cascade playback. */
#history-toggle {
  position: fixed; right: 772px; bottom: 16px; z-index: 6; cursor: pointer;
  background: var(--panel); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 4px; padding: 8px 12px; font-size: 12px;
}
#history-toggle:hover { background: rgba(127, 209, 255, 0.2); }
#history-toggle.on { background: var(--accent); color: #03060b; }
body.history-open #history-toggle { display: none; }
#history {
  position: fixed; inset: 0 0 0 auto; width: 400px; z-index: 20; overflow-x: hidden; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 14px; font-size: 12px;
  background: rgba(3, 6, 11, 0.8); border-left: 1px solid var(--line); backdrop-filter: blur(5px);
}
#history[hidden], #history [hidden] { display: none !important; }
#history > * { flex-shrink: 0; }
#history .c-name { font-size: 15px; }
#history button, #history select { background: rgba(127, 209, 255, 0.08); border: 1px solid var(--line); border-radius: 4px; cursor: pointer; padding: 5px 8px; }
#history button:hover { background: rgba(127, 209, 255, 0.2); }
#history button.c-close { padding: 0; }
#history .hs-body { display: flex; flex-direction: column; gap: 10px; }
.hs-top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.hs-date { font-size: 36px; font-weight: 700; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.hs-since { color: var(--accent); font-size: 12px; }
.hs-counts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.hs-counts li { display: flex; align-items: center; gap: 8px; }
.hs-counts li span { flex: 1; color: var(--dim); }
.hs-counts svg { flex: none; }
.hs-num { font-size: 15px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; text-align: right; min-width: 7ch; }
.hs-counts .hs-sum { border-top: 1px solid var(--line); margin-top: 3px; padding-top: 4px; }
.hs-counts .hs-sum span { color: var(--text); }
.hs-total { font-size: 20px; color: var(--accent); }
.hs-controls { display: flex; align-items: center; gap: 8px; }
#history .hs-play { min-width: 64px; padding: 7px 10px; background: var(--accent); color: #03060b; font-weight: 600; }
#history .hs-speed { flex: 1; color: var(--text); color-scheme: dark; background: #0b1420; }
.hs-scrubwrap { display: flex; flex-direction: column; gap: 0; }
#history .hs-scrub { width: 100%; margin: 0; accent-color: var(--accent); }
.hs-years { position: relative; height: 14px; margin: 0 7px; font-size: 10px; color: var(--dim); }
.hs-years span { position: absolute; top: 0; transform: translateX(-50%); }
.hs-chartcard { padding: 8px 12px 8px; }
.hs-chart { display: block; width: 100%; touch-action: none; cursor: ew-resize; }
.hs-key { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 3px 14px; font-size: 11px; color: var(--dim); }
.hs-key li { display: inline-flex; align-items: center; gap: 5px; }
.hs-notes p { margin: 3px 0 0; }
#history-caption {
  position: fixed; left: calc((100vw - 400px) / 2); transform: translateX(-50%); bottom: 28px; z-index: 6;
  width: min(640px, calc(100vw - 460px)); text-align: center; padding: 10px 18px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; backdrop-filter: blur(6px);
}
#history-caption[hidden] { display: none; }
#history-caption .hc-date { font-size: 12px; color: var(--accent); letter-spacing: 0.08em; }
#history-caption .hc-text { font-size: 17px; line-height: 1.3; margin: 3px 0; color: var(--text); }
#history-caption .hc-src { font-size: 10px; color: var(--dim); line-height: 1.35; overflow-wrap: anywhere; }
#history-caption.hc-end .hc-text { font-size: 26px; font-weight: 700; }
#history-caption .hc-live { margin-top: 8px; padding: 7px 14px; background: var(--accent); color: #03060b; font-weight: 600; border: 0; border-radius: 4px; cursor: pointer; }
#history-caption .hc-live[hidden] { display: none; }
body.history-open #filters, body.history-open #timebar, body.history-open #card, body.history-open #drawer, body.history-open #clock,
body.history-open #drawer-toggle, body.history-open #observer-toggle, body.history-open #replays-toggle, body.history-open #sandbox-toggle,
body.history-open #cascade-toggle, body.history-open #lookup-toggle, body.history-open #weapons-toggle, body.history-open #replay-caption { display: none !important; }
@media (max-width: 640px) { #history, #history-toggle, #history-caption { display: none !important; } }
body.capture #history-toggle { display: none !important; }
body.capture #history:not([hidden]) { display: flex !important; }
body.capture #history button:not([hidden]), body.capture #history-caption .hc-live:not([hidden]) { display: inline-block !important; }

/* Screen buttons: one row on the right, time controls on the left beside About, so the row can grow
   without covering the time controls (the per-button right offsets above only apply on phones now). */
@media (min-width: 641px) {
  #screens { position: fixed; right: 16px; bottom: 16px; z-index: 6; display: flex; gap: 8px; align-items: flex-end; }
  #screens > button { position: static !important; right: auto !important; bottom: auto !important; top: auto !important; left: auto !important; }
  #timebar { left: 108px; transform: none; }
  body.lookup-open #timebar { left: 50%; transform: translateX(-50%); }
}
@media (min-width: 641px) and (max-width: 1360px) { #screens kbd { display: none; } #screens { gap: 6px; } }
@media (max-width: 640px) { #screens { display: contents; } }
body.lookup-open #weapons-toggle, body.lookup-open #history-toggle { display: none !important; }
@media (min-width: 641px) and (max-width: 1120px) { #screens > button { padding: 6px 8px; font-size: 13px; } #screens { gap: 4px; } }
@media (min-width: 641px) and (max-width: 1180px) { #timebar { left: 16px; bottom: 64px; } body.lookup-open #timebar { left: 50%; bottom: 16px; } }