/* Vantage City OS — a single, deliberately dark instrument look (HUD over a night map). */
:root {
  color-scheme: dark;
  --ground: #02070b;
  --glass: rgba(5, 17, 25, 0.66);
  --glass-2: rgba(8, 28, 40, 0.5);
  --line: rgba(120, 220, 255, 0.14);
  --line-2: rgba(140, 232, 255, 0.34);
  --cyan: #62e6ff;
  --ice: #dff8ff;
  --text: #c9e6f0;
  --muted: #6b93a5;
  --faint: #3d6070;
  --amber: #ffb547;
  --red: #ff3b5c;
  --green: #45f5a1;
  --violet: #b98cff;
  --display: 'Oxanium', 'Segoe UI', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --body: 'Barlow Semi Condensed', 'Segoe UI', system-ui, sans-serif;
  --gutter: 16px;
  --rail: 272px;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--ground);
  color: var(--text);
  font: 400 13px/1.4 var(--body);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; color: inherit; }
kbd {
  font: 500 9px/1 var(--mono);
  color: var(--muted);
  border: 1px solid var(--line);
  padding: 2px 4px;
  border-radius: 2px;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 1px solid var(--cyan); outline-offset: 2px; }

#map, #fx { position: fixed; inset: 0; width: 100%; height: 100%; }
#fx { pointer-events: none; }
#panels, #tags { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
#os-brand { position: fixed; inset: 0; pointer-events: none; z-index: 1; }
/* Official OS logo and copyright (os-api-branding), placed clear of the HUD. */
/* Telemetry is at most 3 rows × 13px + gaps (43px) above 10px of padding, so it tops out at 53px. */
#os-brand .os-api-branding.logo { left: calc(var(--gutter) - 8px); bottom: 62px; }
#os-brand .os-api-branding.copyright {
  left: 116px; right: auto; bottom: 78px; padding: 2px 6px;
  background: rgba(2, 7, 11, 0.62); color: var(--muted); font: 400 9.5px/1.3 var(--mono); letter-spacing: 0.04em;
}
body.os-on .rail-left { bottom: 110px; }

.fx-vignette {
  position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0, 4, 8, 0.72) 100%);
}
.fx-scan {
  position: fixed; inset: 0; pointer-events: none; opacity: 0.22; mix-blend-mode: overlay;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px);
}

/* ---------- world-anchored holographic panels ---------- */
.holo-panel {
  position: absolute; left: 0; top: 0; width: 260px;
  transform-origin: 0 0;
  padding: 12px 14px 11px;
  color: var(--ice);
  background: linear-gradient(180deg, rgba(20, 70, 92, 0.42), rgba(4, 18, 27, 0.30));
  border: 1px solid rgba(150, 235, 255, 0.40);
  box-shadow: inset 0 0 26px rgba(98, 230, 255, 0.10), 0 0 22px rgba(98, 230, 255, 0.10);
  will-change: transform;
  --accent: var(--cyan);
}
.holo-panel::before, .holo-panel::after {
  content: ''; position: absolute; width: 12px; height: 12px; border: 2px solid var(--accent);
}
.holo-panel::before { left: -3px; top: -3px; border-right: 0; border-bottom: 0; }
.holo-panel::after { right: -3px; bottom: -3px; border-left: 0; border-top: 0; }
.hp-kicker {
  font: 500 9px/1.3 var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(170, 225, 240, 0.72); margin-bottom: 5px;
}
.hp-title {
  font: 400 21px/1.05 var(--display); letter-spacing: 0.12em; text-transform: uppercase;
  color: #f2fdff; text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 70%, transparent);
  text-wrap: balance;
}
.hp-sub {
  font: 500 11px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); margin-top: 5px;
}
.hp-rows {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; margin: 9px 0 0; padding-top: 8px;
  border-top: 1px solid rgba(150, 235, 255, 0.18);
  font: 400 11px/1.35 var(--mono); font-variant-numeric: tabular-nums;
}
.hp-rows dt { color: rgba(170, 220, 235, 0.7); text-transform: uppercase; letter-spacing: 0.08em; }
.hp-rows dd { margin: 0; text-align: right; color: #eafcff; }
.hp-rows small { color: rgba(170, 220, 235, 0.7); }
.hp-body { margin: 8px 0 0; font: 400 12.5px/1.35 var(--body); color: rgba(225, 245, 252, 0.88); }
.hp-note {
  margin-top: 8px; padding: 5px 8px; font: 500 10px/1.35 var(--mono); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-left: 2px solid var(--accent);
}
.holo-panel.warn { --accent: var(--amber); border-color: rgba(255, 190, 90, 0.55); background: linear-gradient(180deg, rgba(90, 58, 10, 0.40), rgba(28, 16, 4, 0.30)); }
.holo-panel.crit { --accent: var(--red); border-color: rgba(255, 90, 110, 0.6); background: linear-gradient(180deg, rgba(96, 14, 30, 0.42), rgba(30, 4, 10, 0.30)); }
.holo-panel.route { --accent: #ff4d6a; border-color: rgba(255, 110, 130, 0.5); }
.holo-panel.green { --accent: var(--green); border-color: rgba(90, 245, 170, 0.5); background: linear-gradient(180deg, rgba(10, 80, 52, 0.40), rgba(3, 24, 16, 0.28)); }
.holo-panel.os { --accent: #b9a8ff; border-color: rgba(185, 168, 255, 0.55); background: linear-gradient(180deg, rgba(40, 34, 100, 0.72), rgba(8, 7, 26, 0.6)); }
.holo-panel.ghost { background: none; border-color: transparent; box-shadow: none; padding: 0; }
.holo-panel.ghost::before, .holo-panel.ghost::after { display: none; }
.holo-panel.ghost .hp-title { font-size: 28px; font-weight: 300; }

/* ---------- screen tags ---------- */
.holo-tag {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  font: 500 9.5px/1.2 var(--mono); letter-spacing: 0.06em; color: var(--ice);
}
.holo-tag > * { display: block; }
.holo-tag.ac { padding: 0 0 0 14px; margin-top: -9px; }
.holo-tag.ac b { font-weight: 500; color: #fff6d8; text-shadow: 0 0 8px rgba(255, 200, 90, 0.5); }
.holo-tag.ac span { color: rgba(200, 225, 235, 0.75); }
.holo-tag.ac.ground b { color: var(--muted); text-shadow: none; }
.holo-tag.aq { transform-origin: 0 0; margin: -26px 0 0 -14px; text-align: center; width: 28px; }
.holo-tag.aq b { font: 500 13px/1 var(--display); color: #fff; text-shadow: 0 0 10px rgba(120, 240, 200, 0.7); }
.holo-tag.aq span { font-size: 7px; color: var(--muted); letter-spacing: 0.14em; }

/* ---------- HUD chrome ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; transition: opacity 0.35s ease, visibility 0s linear 0s; }
/* visibility (after the fade) also stops the hidden cards' backdrop blurs being composited. */
#hud.hidden { opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0s linear 0.35s; }
#hud.hidden * { pointer-events: none !important; }
#hud > * { pointer-events: auto; }

.topbar {
  position: absolute; left: 0; right: 0; top: 0;
  display: grid; grid-template-columns: var(--rail) 1fr auto; align-items: center; gap: 16px;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) var(--gutter) 10px;
  background: linear-gradient(180deg, rgba(2, 7, 11, 0.9), rgba(2, 7, 11, 0));
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--cyan); }
.brand-mark { flex: 0 0 auto; width: 30px; height: 30px; animation: spin 24s linear infinite; }
.brand-name { font: 500 18px/1 var(--display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ice); }
.brand-name span { margin-left: 8px; font-weight: 300; color: var(--cyan); letter-spacing: 0.14em; }
.brand-sub { font: 400 9.5px/1.4 var(--mono); letter-spacing: 0.08em; color: var(--muted); margin-top: 3px; white-space: nowrap; }

.search { position: relative; max-width: 460px; width: 100%; justify-self: center; }
.search input {
  width: 100%; padding: 9px 36px 9px 12px; background: var(--glass); border: 1px solid var(--line-2);
  border-radius: 0; font: 400 13px var(--mono); letter-spacing: 0.02em; color: var(--ice);
  backdrop-filter: blur(10px);
}
.search input::placeholder { color: var(--faint); }
.search kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }
.search-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px 0; list-style: none;
  background: rgba(3, 12, 18, 0.94); border: 1px solid var(--line-2); max-height: 50vh; overflow: auto;
}
.search-results li { padding: 7px 12px; cursor: pointer; font-size: 13px; }
.search-results li small { display: block; color: var(--muted); font: 400 10px/1.3 var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-results li[aria-selected='true'], .search-results li:hover { background: rgba(98, 230, 255, 0.1); }
.search-results .empty { color: var(--muted); cursor: default; }
.search-results .src {
  float: right; margin-left: 8px; padding: 1px 5px; border: 1px solid currentColor;
  font: 500 8.5px/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.search-results .src-os { color: #b9a8ff; }
.search-results .src-grid { color: var(--cyan); }

.clock { text-align: right; }
.clock-time { font: 400 20px/1 var(--display); letter-spacing: 0.12em; color: var(--ice); font-variant-numeric: tabular-nums; }
.clock-sub { font: 400 9.5px/1.4 var(--mono); letter-spacing: 0.12em; color: var(--muted); margin-top: 3px; text-transform: uppercase; }
.mobile-toggles { display: none; gap: 6px; }
.mobile-toggles button { background: var(--glass); border: 1px solid var(--line-2); padding: 6px 10px; font: 500 11px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }

.rail {
  position: absolute; top: 70px; bottom: 58px; width: var(--rail);
  display: flex; flex-direction: column; gap: 10px; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--faint) transparent;
}
.rail-left { left: var(--gutter); }
.rail-right { right: var(--gutter); width: 296px; }

.card {
  background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(12px) saturate(1.2);
  padding: 11px 12px 12px; position: relative;
}
.card::before {
  content: ''; position: absolute; left: -1px; top: -1px; width: 14px; height: 1px; background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}
.card-h {
  margin: 0 0 9px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  font: 500 10.5px/1.2 var(--display); letter-spacing: 0.24em; text-transform: uppercase; color: var(--cyan);
}
.card-meta { font: 400 9px/1.2 var(--mono); letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; text-align: right; }

.toggles { display: grid; gap: 2px; }
.toggle {
  display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 9px;
  padding: 5px 6px; background: none; border: 0; text-align: left; cursor: pointer; color: var(--text);
  font: 400 13px/1.2 var(--body); letter-spacing: 0.02em;
}
.toggle:hover { background: rgba(98, 230, 255, 0.06); }
.toggle .led { width: 8px; height: 8px; border: 1px solid var(--faint); transform: rotate(45deg); }
.toggle[aria-pressed='true'] .led { background: var(--c, var(--cyan)); border-color: var(--c, var(--cyan)); box-shadow: 0 0 8px var(--c, var(--cyan)); }
.toggle[aria-pressed='false'] { color: var(--muted); }
.fx-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 7px; cursor: pointer;
  background: none; border: 1px solid var(--line); font: 500 10px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.chip[aria-pressed='true'] { color: var(--ice); border-color: var(--line-2); background: rgba(98, 230, 255, 0.08); }
.chip-os[aria-pressed='true'] { color: #efeaff; border-color: rgba(185, 168, 255, 0.6); background: rgba(185, 168, 255, 0.14); }
.chip[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; }

.waypoints { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.waypoints button {
  padding: 6px 7px; background: none; border: 1px solid var(--line); cursor: pointer; text-align: left;
  font: 500 10px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text);
}
.waypoints button:hover { border-color: var(--line-2); color: var(--ice); background: rgba(98, 230, 255, 0.06); }

.feeds { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.feeds li { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 5px 0; border-bottom: 1px dashed rgba(120, 220, 255, 0.08); }
.feeds li:last-child { border-bottom: 0; }
.feed-name { font: 500 12px/1.2 var(--body); color: var(--text); }
.feed-src { grid-column: 1; font: 400 9px/1.2 var(--mono); letter-spacing: 0.06em; color: var(--faint); text-transform: uppercase; }
.feed-state { grid-row: 1 / span 2; grid-column: 2; align-self: center; text-align: right; font: 500 9px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.feed-state b { display: inline-block; padding: 2px 5px; border: 1px solid currentColor; font-weight: 500; }
.feed-state small { display: block; color: var(--faint); margin-top: 2px; letter-spacing: 0.04em; }
.st-live { color: var(--green); }
.st-loading { color: var(--cyan); }
.st-error { color: var(--red); }
.st-idle, .st-off { color: var(--faint); }

.bars { display: grid; gap: 7px; margin-bottom: 10px; }
.bar { display: grid; grid-template-columns: 78px 1fr 46px; align-items: center; gap: 8px; font: 400 10px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.bar-track { height: 6px; background: rgba(120, 220, 255, 0.08); position: relative; overflow: hidden; }
.bar-fill { position: absolute; inset: 0 auto 0 0; background: var(--c); box-shadow: 0 0 10px var(--c); transition: width 0.6s ease; }
.bar-v { text-align: right; color: var(--ice); font-variant-numeric: tabular-nums; }

.kv { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; margin: 0; font: 400 11px/1.3 var(--mono); font-variant-numeric: tabular-nums; }
.kv dt { color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-size: 10px; }
.kv dd { margin: 0; text-align: right; color: var(--ice); }
.kv-4 { grid-template-columns: auto 1fr auto 1fr; }

.big { font: 300 38px/1 var(--display); color: var(--ice); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.small-caps { font: 400 9px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.air-top, .wx-top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.band { display: inline-block; font: 500 10px/1 var(--mono); letter-spacing: 0.14em; padding: 4px 6px; border: 1px solid currentColor; color: var(--muted); }
.band.good { color: #33f2d9; } .band.fair { color: #74f274; } .band.moderate { color: var(--amber); }
.band.poor { color: #ff7433; } .band.vpoor { color: var(--red); } .band.xpoor { color: var(--violet); }
.spark { width: 100%; height: 44px; display: block; margin-bottom: 8px; }
.wx-cond { font: 400 14px/1.1 var(--display); letter-spacing: 0.06em; color: var(--ice); }
.wind { margin-left: auto; display: grid; justify-items: center; gap: 2px; color: var(--cyan); font: 400 10px var(--mono); }
.wind svg { width: 34px; height: 34px; }
#wx-arrow { transform-origin: 20px 20px; transition: transform 0.8s ease; }

.seg { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line-2); margin-bottom: 8px; }
.seg button { padding: 6px 0; background: none; border: 0; cursor: pointer; font: 500 10px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed='true'] { color: var(--ground); background: var(--cyan); }
.alts { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.alts li {
  display: grid; grid-template-columns: 14px 1fr auto; gap: 2px 8px; align-items: center; padding: 6px 7px;
  border: 1px solid var(--line); font: 400 10.5px/1.3 var(--mono); font-variant-numeric: tabular-nums;
}
.alts li .sw { width: 10px; height: 3px; background: var(--amber); box-shadow: 0 0 6px var(--amber); }
.alts li.best { border-color: rgba(255, 90, 110, 0.55); background: rgba(255, 45, 85, 0.07); }
.alts li.best .sw { background: #ff2d55; box-shadow: 0 0 8px #ff2d55; }
.alts li .meta { grid-column: 2 / span 2; color: var(--muted); font-size: 9.5px; letter-spacing: 0.04em; }
.alts li .tagx { font-size: 9px; letter-spacing: 0.12em; color: #ff6b83; }
.route-actions { display: flex; gap: 6px; }
.btn {
  flex: 1; padding: 7px 8px; background: rgba(98, 230, 255, 0.1); border: 1px solid var(--line-2); cursor: pointer;
  font: 500 10px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ice);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn.ghost { flex: 0 0 auto; background: none; color: var(--muted); }
.btn[aria-pressed='true'] { background: var(--cyan); color: var(--ground); }
.hint { margin: 8px 0 0; font: 400 11.5px/1.35 var(--body); color: var(--muted); }

.bottombar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 16px;
  padding: 10px var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 10px);
  background: linear-gradient(0deg, rgba(2, 7, 11, 0.88), rgba(2, 7, 11, 0));
  pointer-events: none;
}
.bottombar > * { pointer-events: auto; }
/* Fixed columns and single-line cells: the block is the same height at every width, so the
   OS logo placed above it can never collide. Long values truncate instead of wrapping. */
.telemetry {
  --t-row: 13px;
  display: grid; grid-template-columns: 110px 112px 68px 92px; grid-auto-rows: var(--t-row); gap: 2px 10px;
  font: 400 9.5px/var(--t-row) var(--mono); letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; font-variant-numeric: tabular-nums;
}
.telemetry > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.telemetry b { font-weight: 500; color: var(--ice); }
.log { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; align-content: end; max-height: 64px; overflow: hidden; font: 400 10.5px/1.35 var(--mono); }
.log li { display: grid; grid-template-columns: 56px 58px 1fr; gap: 8px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: logIn 0.4s ease; }
.log li > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.log li:nth-child(n + 2) { opacity: 0.66; }
.log li:nth-child(n + 3) { opacity: 0.42; }
.log time { color: var(--faint); }
.log .tg { color: var(--cyan); letter-spacing: 0.1em; }
.log .warn .tg { color: var(--amber); }
.log .crit .tg { color: var(--red); }
.compass { display: grid; justify-items: center; gap: 2px; background: none; border: 0; cursor: pointer; color: var(--cyan); font: 500 10px var(--mono); letter-spacing: 0.12em; margin-bottom: 18px; }
.compass svg { width: 54px; height: 54px; }

.maplibregl-ctrl-attrib {
  background: rgba(2, 7, 11, 0.7) !important; color: var(--faint) !important; font: 400 9px var(--mono) !important;
}
.maplibregl-ctrl-attrib a { color: var(--muted) !important; }
.maplibregl-ctrl-attrib-button { filter: invert(1) hue-rotate(180deg); }
.maplibregl-ctrl-bottom-right { z-index: 3; }

.picker-hint {
  position: fixed; left: 50%; top: 76px; transform: translateX(-50%); z-index: 20;
  padding: 8px 14px; background: rgba(40, 6, 14, 0.85); border: 1px solid rgba(255, 90, 110, 0.6);
  font: 500 11px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #ffd0d8;
}
body.picking #map { cursor: crosshair; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes logIn { from { opacity: 0; transform: translateY(4px); } }

@media (max-width: 1100px) {
  .log { display: none; }
  .bottombar { grid-template-columns: 1fr auto; }
}
@media (max-width: 820px) {
  :root { --rail: 100%; }
  .topbar { grid-template-columns: 1fr auto; gap: 10px; }
  .topbar .search { grid-column: 1 / -1; grid-row: 2; max-width: none; }
  .clock { display: none; }
  .brand-name { font-size: 15px; }
  .brand-name span { display: none; }
  /* The coordinate line would push the sound, Layers and Intel buttons off a phone screen. */
  .brand-sub { display: none; }
  .brand { min-width: 0; }
  .mobile-toggles { display: flex; }
  .rail { top: 112px; bottom: 70px; left: var(--gutter); right: var(--gutter); width: auto; display: none; }
  .rail.open { display: flex; }
  .rail-right { width: auto; }
  .telemetry { grid-template-columns: 110px 112px; }
  .telemetry .t-opt { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-mark { animation: none; }
  .log li, #boot-log li { animation: none; }
}

/* ---------- panel backing, close buttons, collapsible cards ---------- */
:root { --panel-dim: 0.7; }
.holo-panel { --panel-tint: linear-gradient(180deg, rgba(20, 70, 92, 0.42), rgba(4, 18, 27, 0.30)); }
.holo-panel.warn { --panel-tint: linear-gradient(180deg, rgba(90, 58, 10, 0.40), rgba(28, 16, 4, 0.30)); }
.holo-panel.crit { --panel-tint: linear-gradient(180deg, rgba(96, 14, 30, 0.42), rgba(30, 4, 10, 0.30)); }
.holo-panel.green { --panel-tint: linear-gradient(180deg, rgba(10, 80, 52, 0.40), rgba(3, 24, 16, 0.28)); }
.holo-panel.os { --panel-tint: linear-gradient(180deg, rgba(40, 34, 100, 0.55), rgba(8, 7, 26, 0.35)); }
/* Tint over an adjustable black backing (Panel backing slider); declared last so it wins over variants. */
.holo-panel:not(.ghost) { background: var(--panel-tint), linear-gradient(rgba(1, 5, 8, var(--panel-dim)), rgba(1, 5, 8, var(--panel-dim))); }
.hp-content .hp-kicker { padding-right: 22px; }
.hp-close {
  position: absolute; top: 5px; right: 5px; z-index: 1; width: 22px; height: 22px; padding: 0;
  display: grid; place-items: center; cursor: pointer; pointer-events: auto;
  color: var(--accent); background: rgba(2, 7, 11, 0.55);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  opacity: 0.7; transition: opacity 0.15s ease, background 0.15s ease;
}
.hp-close:hover, .hp-close:focus-visible { opacity: 1; background: color-mix(in srgb, var(--accent) 22%, rgba(2, 7, 11, 0.7)); }
.hp-close svg { width: 10px; height: 10px; stroke: currentColor; stroke-width: 1.7; fill: none; }
.holo-panel.ghost .hp-close { top: -6px; right: -6px; opacity: 0.45; }

.slider-row { display: grid; grid-template-columns: auto 1fr 34px; align-items: center; gap: 8px; margin-top: 10px; font: 500 9.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.slider-row input { width: 100%; accent-color: var(--cyan); height: 14px; }
.slider-row output { text-align: right; color: var(--ice); font-variant-numeric: tabular-nums; }

.card-h { position: relative; }
.card-toggle {
  flex: 0 0 auto; width: 18px; height: 18px; margin-left: 4px; padding: 0; display: grid; place-items: center;
  background: none; border: 1px solid var(--line); color: var(--muted); cursor: pointer;
}
.card-toggle:hover { color: var(--ice); border-color: var(--line-2); }
.card-toggle svg { width: 9px; height: 9px; stroke: currentColor; stroke-width: 1.6; fill: none; transition: transform 0.2s ease; }
.card.collapsed .card-toggle svg { transform: rotate(-90deg); }
.card.collapsed > :not(.card-h) { display: none !important; }
.card.collapsed .card-h { margin-bottom: 0; }
.card-h-right { display: flex; align-items: center; gap: 4px; margin-left: auto; }

.sector-place { margin: -2px 0 10px; padding: 7px 9px; border-left: 2px solid #b9a8ff; background: rgba(185, 168, 255, 0.08); }
.sector-place b { display: block; font: 500 13px/1.2 var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: #efeaff; }
.sector-place span { display: block; margin-top: 3px; font: 400 9.5px/1.35 var(--mono); letter-spacing: 0.04em; color: #a99fd6; }

.snd {
  width: 34px; height: 34px; padding: 0; display: grid; place-items: center; cursor: pointer;
  background: var(--glass); border: 1px solid var(--line-2); color: var(--cyan);
}
.snd svg, .intro-sound svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.snd .mute, .intro-sound .mute { display: none; }
.snd[aria-pressed='false'], .intro-sound[aria-pressed='false'] { color: var(--muted); }
.snd[aria-pressed='false'] .wave, .intro-sound[aria-pressed='false'] .wave { display: none; }
.snd[aria-pressed='false'] .mute, .intro-sound[aria-pressed='false'] .mute { display: inline; }
.topbar { grid-template-columns: var(--rail) 1fr auto auto; }

/* ---------- welcome / cinematic intro ---------- */
#intro {
  position: fixed; inset: 0; z-index: 60; overflow: hidden; color: var(--text);
  background:
    radial-gradient(90% 70% at 72% 50%, rgba(1, 5, 8, 0) 0%, rgba(1, 5, 8, 0.55) 70%, rgba(1, 5, 8, 0.9) 100%),
    linear-gradient(90deg, rgba(1, 5, 8, 0.96) 0%, rgba(1, 5, 8, 0.86) 36%, rgba(1, 5, 8, 0.42) 68%, rgba(1, 5, 8, 0.2) 100%);
  transition: opacity 1.2s ease 0.5s, visibility 0s linear 1.7s;
}
#intro.leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.intro-bar {
  position: absolute; left: 0; right: 0; z-index: 2; height: max(7vh, 44px); padding: 0 max(16px, 4vw);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: #000; font: 500 9.5px/1.3 var(--mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint);
  transition: transform 1.3s cubic-bezier(0.7, 0, 0.2, 1);
}
.intro-bar-top { top: 0; border-bottom: 1px solid rgba(98, 230, 255, 0.18); }
.intro-bar-bottom { bottom: 0; border-top: 1px solid rgba(98, 230, 255, 0.18); letter-spacing: 0.12em; justify-content: center; text-align: center; }
#intro.leaving .intro-bar-top { transform: translateY(-100%); }
#intro.leaving .intro-bar-bottom { transform: translateY(100%); }
.intro-sweep {
  position: absolute; left: 0; right: 0; height: 22vh; top: -22vh; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(98, 230, 255, 0.06) 60%, rgba(160, 245, 255, 0.14) 98%, transparent);
  animation: sweep 7s linear infinite;
}
.intro-grain {
  position: absolute; inset: -50%; pointer-events: none; opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.9s steps(4) infinite;
}
.intro-frame {
  position: relative; z-index: 1; height: 100%;
  display: grid; grid-template-columns: minmax(0, 720px) 1fr minmax(240px, 300px); gap: 3vw; align-items: center;
  padding: calc(max(7vh, 44px) + 2.5vh) max(16px, 5vw);
  transition: transform 1.4s cubic-bezier(0.6, 0, 0.2, 1), opacity 0.8s ease, filter 1s ease;
}
#intro.leaving .intro-frame { transform: scale(1.06) translateY(-1.5vh); opacity: 0; filter: blur(6px); }
.intro-main { grid-column: 1; }
.intro-side { grid-column: 3; align-self: end; }
.intro-kicker { margin: 0 0 14px; display: flex; align-items: center; gap: 10px; font: 500 11px/1.3 var(--mono); letter-spacing: 0.28em; text-transform: uppercase; color: var(--cyan); }
.rec { width: 8px; height: 8px; border-radius: 50%; background: #ff3b5c; box-shadow: 0 0 10px #ff3b5c; animation: rec 1.6s ease-in-out infinite; }
#intro h1 { margin: 0; font-family: var(--display); text-transform: uppercase; }
.intro-welcome { display: block; font-weight: 300; font-size: clamp(15px, 1.5vw, 20px); letter-spacing: 0.5em; color: var(--muted); }
.intro-name {
  display: block; margin-top: 8px; font-weight: 300; font-size: clamp(38px, 5vw, 76px); line-height: 0.95; letter-spacing: 0.1em;
  background: linear-gradient(92deg, #ffffff 0%, #dff8ff 40%, #62e6ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px rgba(98, 230, 255, 0.35)); text-wrap: balance;
}
.intro-lede { margin: 18px 0 18px; max-width: 60ch; font: 400 clamp(14.5px, 1.15vw, 17px)/1.5 var(--body); color: #b9d6e2; }
.intro-list { list-style: none; margin: 0 0 16px; padding: 12px 0 0; display: grid; gap: 7px; border-top: 1px solid rgba(98, 230, 255, 0.12); }
.intro-list li { display: grid; grid-template-columns: 12px 158px 1fr; gap: 10px; align-items: baseline; font: 400 13.5px/1.4 var(--body); color: #a9c7d3; }
.intro-list .dot { width: 7px; height: 7px; transform: translateY(-1px) rotate(45deg); background: var(--faint); }
.intro-list .dot.st-live { background: var(--green); box-shadow: 0 0 8px var(--green); }
.intro-list .dot.st-loading { background: var(--cyan); animation: rec 1s ease-in-out infinite; }
.intro-list .dot.st-error { background: var(--red); }
.intro-list .dot.st-part { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
.intro-list b { font: 500 10.5px/1.5 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ice); }
.intro-tech { margin: 0 0 20px; font: 400 10.5px/1.5 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.intro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.intro-enter {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 16px; padding: 16px 26px 16px 28px; cursor: pointer;
  font: 500 14px/1 var(--display); letter-spacing: 0.3em; text-transform: uppercase; color: var(--ground);
  background: linear-gradient(90deg, #9ff4ff, #62e6ff); border: 0;
  box-shadow: 0 0 0 1px rgba(160, 245, 255, 0.6), 0 0 32px rgba(98, 230, 255, 0.35);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.intro-enter::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.65) 50%, transparent 70%);
  animation: shine 3.2s ease-in-out infinite 1s;
}
.intro-enter:hover, .intro-enter:focus-visible { transform: translateY(-1px); box-shadow: 0 0 0 1px #dffaff, 0 0 48px rgba(98, 230, 255, 0.6); }
.intro-enter svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.intro-sound {
  display: inline-flex; align-items: center; gap: 9px; padding: 13px 16px; cursor: pointer;
  font: 500 10.5px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan);
  background: rgba(5, 17, 25, 0.6); border: 1px solid var(--line-2);
}
.intro-hint { margin: 14px 0 0; font: 400 11px/1.5 var(--mono); letter-spacing: 0.06em; color: var(--faint); }
.intro-hint kbd { color: var(--muted); }
.intro-side { padding: 14px 16px 12px; background: rgba(2, 8, 12, 0.86); border: 1px solid var(--line); }
.intro-side-h { display: flex; justify-content: space-between; font: 500 10.5px/1.2 var(--display); letter-spacing: 0.24em; text-transform: uppercase; color: var(--cyan); }
.intro-side-h span:last-child { font-family: var(--mono); letter-spacing: 0.08em; color: var(--muted); }
.intro-meter { height: 2px; margin: 10px 0 8px; background: rgba(98, 230, 255, 0.12); }
.intro-meter span { display: block; height: 100%; width: 0; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); transition: width 0.5s ease; }
#boot-log { list-style: none; margin: 0; padding: 0; font: 400 10.5px/1.85 var(--mono); letter-spacing: 0.04em; color: var(--muted); }
#boot-log li { display: flex; gap: 8px; animation: logIn 0.25s ease; }
#boot-log li::after { content: ''; flex: 1; order: 1; border-bottom: 1px dotted var(--faint); margin-bottom: 6px; }
#boot-log li b { order: 2; font-weight: 500; }
#boot-log li b.ok { color: var(--green); } #boot-log li b.err { color: var(--red); } #boot-log li b.wait { color: var(--cyan); }
@keyframes sweep { to { transform: translateY(150vh); } }
@keyframes grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-5%, 3%); } 50% { transform: translate(4%, -4%); } 75% { transform: translate(-3%, -2%); } }
@keyframes rec { 50% { opacity: 0.3; } }
@keyframes shine { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
body.in-intro #panels, body.in-intro #tags { opacity: 0; }
#panels, #tags { transition: opacity 1.2s ease; }
@media (max-height: 820px) and (min-width: 981px) {
  .intro-name { font-size: clamp(34px, 4.2vw, 60px); }
  .intro-lede { margin: 12px 0; }
  .intro-list { gap: 4px; }
  .intro-tech { display: none; }
}
@media (max-width: 980px) {
  .intro-frame { grid-template-columns: 1fr; align-content: start; align-items: start; overflow-y: auto; gap: 24px; }
  .intro-name { font-size: clamp(32px, 10.5vw, 56px); }
  .intro-tech { display: none; }
  .intro-bar-top span:first-child { display: none; }
  .intro-side { grid-column: 1; align-self: start; }
  .intro-list li { grid-template-columns: 12px 1fr; }
  .intro-list li span:last-child { grid-column: 2; }
  .intro-bar-bottom span { font-size: 8px; letter-spacing: 0.06em; }
}
@media (max-width: 820px) {
  .topbar { grid-template-columns: 1fr auto auto; }
  .intro-side { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-sweep, .intro-grain, .intro-enter::after, .rec { animation: none; }
}