/* SKYLEAR Universe Atlas — HUD. Tokens from ../css/tokens.css. Never Inter. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--void); color: var(--paper); overflow: hidden; }
body { font-family: var(--f-sans); font-size: var(--t-sm); line-height: 1.45; -webkit-font-smoothing: antialiased; touch-action: none; overscroll-behavior: none; }
button, input { font: inherit; color: inherit; }
.mono { font-family: var(--f-mono); }
.tiny { font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; }
kbd { font-family: var(--f-mono); font-size: 10px; padding: 1px 5px; border: 1px solid var(--line-strong); border-radius: 3px; color: var(--haze); background: rgba(255,255,255,0.03); }
:focus-visible { outline: 1.5px solid var(--ion); outline-offset: 2px; }
.skip-link { position: fixed; left: 12px; top: -60px; z-index: var(--z-modal); background: var(--deep); padding: 8px 12px; border: 1px solid var(--line-strong); color: var(--paper); }
.skip-link:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

:root {
  --glass: rgba(9, 14, 26, 0.62);
  --glass-strong: rgba(8, 12, 22, 0.82);
  --hud-pad: clamp(14px, 2.2vw, 28px);
}

#stage { position: fixed; inset: 0; z-index: var(--z-canvas); }
#gl { display: block; width: 100%; height: 100%; cursor: grab; }
#gl.dragging { cursor: grabbing; }
#labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.label-layer { position: absolute; inset: 0; pointer-events: none; transition: opacity 0.4s linear; }
#fade { position: fixed; inset: 0; background: var(--void); opacity: 0; pointer-events: none; z-index: 5; transition: opacity 0.5s var(--ease-out); }

/* ICOMAT-style crosshair corner marks */
.frame-marks i { position: fixed; width: 14px; height: 14px; z-index: 6; pointer-events: none; opacity: 0.55; }
.frame-marks i::before, .frame-marks i::after { content: ""; position: absolute; background: var(--haze); }
.frame-marks i::before { left: 6.5px; top: 0; width: 1px; height: 14px; }
.frame-marks i::after { top: 6.5px; left: 0; height: 1px; width: 14px; }
.frame-marks i:nth-child(1) { left: 8px; top: 8px; } .frame-marks i:nth-child(2) { right: 8px; top: 8px; }
.frame-marks i:nth-child(3) { left: 8px; bottom: 8px; } .frame-marks i:nth-child(4) { right: 8px; bottom: 8px; }

/* ---------- Top ---------- */
.hud-top { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-hud); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: var(--hud-pad) calc(var(--hud-pad) + 10px) 0; pointer-events: none; }
.hud-top > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--paper); }
.brand img { height: 20px; width: auto; display: block; }
.brand-text { font-family: var(--f-wide); font-style: italic; font-weight: 300; font-stretch: 125%; font-variation-settings: "wdth" 125; font-size: 20px; letter-spacing: 0.08em; }
.brand-sub { font-size: var(--t-xs); letter-spacing: 0.22em; text-transform: uppercase; color: var(--mist); padding-left: 14px; border-left: 1px solid var(--line-strong); }
.top-actions { display: flex; gap: 8px; align-items: center; }

.chip-btn { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 2px; background: var(--glass); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); color: var(--paper); font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: border-color var(--d-fast), background var(--d-fast); }
.chip-btn:hover { border-color: rgba(156, 200, 255, 0.5); background: rgba(21, 35, 59, 0.7); }
.chip-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.chip-btn[aria-expanded="true"], .chip-btn[aria-pressed="true"] { border-color: var(--ion); color: var(--ion); }

/* ---------- Scale rail ---------- */
.scale-rail { position: fixed; left: calc(var(--hud-pad) + 10px); top: 50%; transform: translateY(-50%); z-index: var(--z-hud); width: 188px; }
.rail-title { margin: 0 0 10px; font-size: var(--t-xs); letter-spacing: 0.22em; text-transform: uppercase; color: var(--mist); }
.scale-rail ol { list-style: none; margin: 0; padding: 0 0 0 0; position: relative; border-left: 1px solid var(--line-strong); }
.scale-rail li { position: relative; }
.rail-btn { display: grid; grid-template-columns: 22px 1fr; align-items: baseline; width: 100%; padding: 7px 0 7px 14px; background: none; border: 0; text-align: left; cursor: pointer; color: var(--mist); font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; transition: color var(--d-fast); }
.rail-btn .n { color: var(--mist); opacity: 0.7; }
.rail-btn .sub { grid-column: 2; font-size: 10px; letter-spacing: 0.08em; text-transform: none; color: var(--mist); opacity: 0; max-height: 0; overflow: hidden; transition: opacity var(--d-med), max-height var(--d-med); }
.rail-btn::before { content: ""; position: absolute; left: -3px; top: 12px; width: 5px; height: 5px; border: 1px solid var(--mist); background: var(--void); transform: rotate(45deg); transition: all var(--d-fast); }
.rail-btn:hover { color: var(--paper); }
.rail-btn[aria-current="true"] { color: var(--paper); }
.rail-btn[aria-current="true"] .n { color: var(--ion); opacity: 1; }
.rail-btn[aria-current="true"] .sub { opacity: 1; max-height: 20px; }
.rail-btn[aria-current="true"]::before { background: var(--ion); border-color: var(--ion); box-shadow: 0 0 10px var(--ion); }
.rail-readout { margin-top: 12px; padding-left: 14px; font-size: var(--t-xs); letter-spacing: 0.1em; color: var(--haze); }

/* ---------- Meta / scale bar ---------- */
.hud-meta { position: fixed; left: calc(var(--hud-pad) + 10px); bottom: calc(var(--hud-pad) + 6px); z-index: var(--z-hud); font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mist); display: grid; gap: 8px; pointer-events: none; }
.scalebar { display: flex; align-items: center; gap: 10px; color: var(--haze); }
#scalebar-line { display: block; height: 7px; width: 80px; border: 1px solid var(--haze); border-top: 0; transition: width 0.2s linear; }

/* ---------- Time bar ---------- */
.time-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--hud-pad) + 2px); z-index: var(--z-hud); display: flex; align-items: center; gap: 14px; padding: 6px 8px 6px 14px; background: var(--glass); border: 1px solid var(--line); border-radius: 2px; backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); transition: opacity var(--d-med); }
.time-bar.is-dim { opacity: 0.55; }
.time-read { display: grid; line-height: 1.2; min-width: 148px; }
.time-read .tiny { color: var(--mist); font-size: 10px; }
#sim-date { font-size: 12.5px; color: var(--paper); letter-spacing: 0.04em; white-space: nowrap; }
.time-controls, .scale-toggle { display: flex; gap: 2px; }
.scale-toggle { padding-left: 12px; border-left: 1px solid var(--line); }
.t-btn { min-width: 38px; height: 30px; padding: 0 8px; background: transparent; border: 1px solid transparent; border-radius: 2px; color: var(--haze); font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.06em; cursor: pointer; transition: all var(--d-fast); display: inline-flex; align-items: center; justify-content: center; }
.t-btn:hover { color: var(--paper); border-color: var(--line-strong); }
.t-btn.is-active, .t-btn[aria-pressed="true"] { color: var(--ion); border-color: rgba(156, 200, 255, 0.45); background: rgba(61, 123, 255, 0.08); }
.t-play svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.t-play .i-play { fill: currentColor; stroke: none; display: none; }
.t-play.is-paused .i-play { display: block; } .t-play.is-paused .i-pause { display: none; }
.t-now { color: var(--ignition); }
.t-now:hover { color: #ff9a6b; }

/* ---------- Hints ---------- */
.hints { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--hud-pad) + 58px); z-index: var(--z-hud); display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; transition: opacity 1.2s var(--ease-out); pointer-events: none; }
.hints li { padding: 5px 10px; border: 1px solid var(--line); background: rgba(8, 12, 22, 0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mist); border-radius: 2px; white-space: nowrap; }
.hints b { color: var(--paper); font-weight: 500; }
.hints.is-hidden { opacity: 0; }
.skip-intro { position: fixed; right: calc(var(--hud-pad) + 10px); bottom: calc(var(--hud-pad) + 64px); z-index: var(--z-nav); background: var(--glass); border: 1px solid var(--line-strong); padding: 9px 14px; color: var(--paper); font-size: var(--t-xs); letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; border-radius: 2px; }

/* ---------- Panels ---------- */
.panel { background: var(--glass-strong); border: 1px solid var(--line); backdrop-filter: blur(22px) saturate(1.25); -webkit-backdrop-filter: blur(22px) saturate(1.25); color: var(--paper); border-radius: 2px; }
.panel::before, .panel::after { content: "+"; position: absolute; font-family: var(--f-mono); font-size: 12px; line-height: 1; color: var(--mist); pointer-events: none; }
.panel::before { left: -4px; top: -7px; } .panel::after { right: -4px; bottom: -7px; }

.info-panel { position: fixed; right: calc(var(--hud-pad) + 10px); top: calc(var(--hud-pad) + 56px); bottom: calc(var(--hud-pad) + 64px); width: min(360px, 32vw); z-index: var(--z-hud); overflow-y: auto; overscroll-behavior: contain; padding: 20px 20px 18px; scrollbar-width: thin; scrollbar-color: var(--stratos) transparent; animation: panelIn var(--d-med) var(--ease-out); }
@keyframes panelIn { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
.panel-grip { display: none; }
.info-head { position: relative; padding-right: 36px; }
.info-head .tiny { color: var(--ion); margin: 0 0 6px; }
.info-head h2 { margin: 0; font-family: var(--f-wide); font-style: italic; font-weight: 300; font-stretch: 112.5%; font-variation-settings: "wdth" 112.5; font-size: 26px; line-height: 1.1; letter-spacing: 0.01em; }
.info-class { margin: 6px 0 0; color: var(--haze); font-size: var(--t-sm); }
.icon-btn { position: absolute; right: -6px; top: -6px; width: 34px; height: 34px; display: grid; place-items: center; background: transparent; border: 1px solid transparent; border-radius: 2px; color: var(--haze); cursor: pointer; }
.icon-btn:hover { border-color: var(--line-strong); color: var(--paper); }
.icon-btn svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.4; fill: none; }
.info-actions { display: flex; gap: 6px; margin: 14px 0 4px; }
.info-section { margin-top: 18px; }
.info-section h3 { margin: 0 0 8px; color: var(--mist); font-weight: 400; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.kv { margin: 0; display: grid; grid-template-columns: minmax(96px, 42%) 1fr; column-gap: 12px; }
.kv dt, .kv dd { margin: 0; padding: 6px 0; border-bottom: 1px dashed rgba(190, 210, 240, 0.08); font-size: var(--t-sm); }
.kv dt { color: var(--mist); }
.kv dd { font-family: var(--f-mono); font-size: 13px; color: var(--paper); font-variant-numeric: tabular-nums; word-break: break-word; }
.info-note { color: var(--mist); margin: 16px 0 0; line-height: 1.6; text-transform: none; letter-spacing: 0.04em; font-size: 11px; }

.tooltip { position: fixed; z-index: var(--z-nav); pointer-events: none; padding: 6px 9px; background: var(--glass-strong); border: 1px solid var(--line-strong); font-size: 11px; letter-spacing: 0.08em; white-space: nowrap; transform: translate(14px, 14px); border-radius: 2px; }
.tooltip small { display: block; color: var(--mist); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; }

.layers-panel { position: fixed; top: calc(var(--hud-pad) + 50px); right: calc(var(--hud-pad) + 10px); z-index: var(--z-nav); width: 250px; padding: 14px 14px 10px; }
.layers-panel h2 { margin: 0 0 8px; color: var(--mist); font-weight: 400; }
.layers-panel ul { list-style: none; margin: 0; padding: 0; }
.layer-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 2px; background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; font-size: var(--t-sm); color: var(--haze); text-align: left; }
.layer-btn:hover { color: var(--paper); }
.layer-btn .sw { width: 26px; height: 14px; border: 1px solid var(--line-strong); border-radius: 8px; position: relative; flex: none; transition: all var(--d-fast); }
.layer-btn .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 8px; height: 8px; border-radius: 50%; background: var(--mist); transition: all var(--d-fast); }
.layer-btn[aria-pressed="true"] { color: var(--paper); }
.layer-btn[aria-pressed="true"] .sw { border-color: var(--ion); background: rgba(61, 123, 255, 0.18); }
.layer-btn[aria-pressed="true"] .sw::after { left: 14px; background: var(--ion); }

dialog.panel { position: fixed; padding: 0; margin: 0; max-width: none; color: var(--paper); overflow: visible; }
dialog::backdrop { background: rgba(3, 5, 10, 0.55); backdrop-filter: blur(3px); }
.search-dialog { top: 12vh; left: 50%; transform: translateX(-50%); width: min(560px, calc(100vw - 32px)); }
.search-form { padding: 16px; display: grid; gap: 10px; }
.search-form label { color: var(--mist); }
#search-input { width: 100%; height: 46px; padding: 0 14px; background: rgba(3, 5, 10, 0.6); border: 1px solid var(--line-strong); border-radius: 2px; font-size: 16px; color: var(--paper); font-family: var(--f-sans); }
#search-input:focus-visible { outline: none; border-color: var(--ion); }
#search-results { list-style: none; margin: 0; padding: 0; max-height: min(52vh, 440px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--stratos) transparent; }
#search-results li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 10px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: var(--t-sm); }
#search-results li span:last-child { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mist); white-space: nowrap; }
#search-results li[aria-selected="true"], #search-results li:hover { background: rgba(61, 123, 255, 0.12); }
#search-results li[aria-selected="true"] span:first-child { color: var(--ion); }
.search-foot { color: var(--mist); margin: 0; display: flex; gap: 6px; align-items: center; }

.credits-dialog { top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 64px); padding: 22px; overflow-y: auto; }
.credits-body { margin-top: 16px; }
.credits-body h3 { margin: 18px 0 8px; color: var(--mist); font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 400; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.credits-body ul { margin: 0; padding: 0; list-style: none; }
.credits-body li { padding: 7px 0; border-bottom: 1px dashed rgba(190, 210, 240, 0.08); font-size: var(--t-sm); color: var(--haze); }
.credits-body li b { color: var(--paper); font-weight: 500; }
.credits-body a { color: var(--ion); text-underline-offset: 3px; }
.credits-body p { color: var(--haze); font-size: var(--t-sm); }

/* ---------- Labels (CSS2D) ---------- */
.lbl { position: absolute; left: 0; top: 0; pointer-events: none; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--haze); white-space: nowrap; transition: opacity 0.35s linear; will-change: transform; }
.lbl .dot { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border: 1px solid currentColor; border-radius: 50%; pointer-events: auto; cursor: pointer; background: rgba(3,5,10,0.3); }
.lbl .dot::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; } /* larger hit area */
.lbl .txt { position: absolute; left: 10px; top: -7px; pointer-events: auto; cursor: pointer; padding: 1px 3px; text-shadow: 0 0 6px rgba(3,5,10,0.95), 0 0 2px rgba(3,5,10,1); transition: opacity 0.3s linear; }
.lbl .txt small { color: var(--mist); letter-spacing: 0.1em; margin-left: 6px; font-size: 9.5px; }
.lbl.txt-off .txt { opacity: 0; pointer-events: none; }
.lbl.faded { opacity: 0; }
.lbl.faded .dot, .lbl.faded .txt { pointer-events: none; }
.lbl:hover, .lbl.is-selected { color: var(--paper); z-index: 2; }
.lbl.is-selected .dot { border-color: var(--ion); box-shadow: 0 0 0 3px rgba(156,200,255,0.18); }
.lbl.k-planet { color: var(--paper); font-size: 11px; }
.lbl.k-planet .dot { width: 9px; height: 9px; left: -4.5px; top: -4.5px; }
.lbl.k-moon, .lbl.k-dwarf { color: var(--haze); font-size: 10px; }
.lbl.k-moon .dot { width: 5px; height: 5px; left: -2.5px; top: -2.5px; }
.lbl.k-craft { color: #c9f0dd; } .lbl.k-craft .dot { border-radius: 0; transform: rotate(45deg); width: 6px; height: 6px; left: -3px; top: -3px; }
.lbl.k-brand { color: var(--ignition); } .lbl.k-brand .dot { border-radius: 0; transform: rotate(45deg); width: 7px; height: 7px; left: -3.5px; top: -3.5px; background: rgba(255,106,43,0.25); }
.lbl.k-comet { color: #b9e4ff; }
.lbl.k-star { color: var(--haze); } .lbl.k-star .dot { opacity: 0; } .lbl.k-star.host .dot { opacity: 1; border-color: var(--ok); width: 12px; height: 12px; left: -6px; top: -6px; background: none; }
.lbl.k-region { color: var(--ion); font-size: 10px; letter-spacing: 0.3em; } .lbl.k-region .dot { display: none; } .lbl.k-region .txt { left: 0; transform: translateX(-50%); }
.lbl.k-arm { color: rgba(184, 196, 214, 0.75); font-size: 10px; letter-spacing: 0.34em; font-style: italic; } .lbl.k-arm .dot { display: none; } .lbl.k-arm .txt { left: 0; transform: translateX(-50%); pointer-events: none; }
.lbl.k-ring { color: var(--mist); font-size: 9.5px; } .lbl.k-ring .dot { display: none; } .lbl.k-ring .txt { left: 4px; pointer-events: none; }
.lbl.k-here { color: var(--ignition); } .lbl.k-here .dot { border-color: var(--ignition); animation: pulse 2.4s ease-out infinite; }
.lbl.k-dso { color: #f1c7d6; } .lbl.k-dso .dot { border-radius: 1px; }
.lbl.k-galaxy { color: #d8d2ff; }
.lbl.k-structure { color: #ffe0b0; }
.lbl.k-deep { color: #ffb8a0; } .lbl.k-deep .dot { border-style: dashed; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,106,43,0.55); } 100% { box-shadow: 0 0 0 14px rgba(255,106,43,0); } }

/* ---------- Loader ---------- */
.loader { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; background: var(--void); transition: opacity 0.9s var(--ease-out); }
.loader.is-done { opacity: 0; pointer-events: none; }
.loader-inner { display: grid; gap: 14px; justify-items: center; color: var(--mist); }
.loader-bar { width: 180px; height: 1px; background: var(--line); overflow: hidden; position: relative; }
.loader-bar i { position: absolute; inset: 0; background: var(--ion); transform-origin: left; animation: load 1.6s var(--ease-in-out) infinite; }
@keyframes load { 0% { transform: scaleX(0); } 60% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.noscript { position: fixed; inset: 0; display: grid; place-items: center; }

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
  .hud-meta { bottom: calc(var(--hud-pad) + 62px); max-width: 300px; }
  .hints { bottom: calc(var(--hud-pad) + 118px); }
}
@media (max-width: 1100px) {
  .scale-rail { width: 150px; }
  .scale-toggle { display: none; }
}
@media (max-width: 767px) {
  :root { --hud-pad: 12px; }
  .hud-top { padding: 12px 16px 0; }
  .brand-sub { display: none; }
  .top-actions .chip-btn span, .top-actions .chip-btn kbd { display: none; }
  .top-actions .chip-btn { width: 36px; padding: 0; justify-content: center; }
  .scale-rail { left: 0; right: 0; top: auto; bottom: 118px; transform: none; width: auto; padding: 0 16px; }
  .rail-title, .rail-readout { display: none; }
  .scale-rail ol { display: flex; border-left: 0; border-top: 1px solid var(--line-strong); justify-content: space-between; }
  .rail-btn { display: block; padding: 10px 0 0; text-align: center; width: 40px; }
  .rail-btn .lbl-t, .rail-btn .sub { display: none; }
  .rail-btn::before { left: 50%; top: -3px; margin-left: -3px; }
  .hud-meta { bottom: 170px; left: 16px; }
  #frame-label { display: none; }
  .time-bar { left: 12px; right: 12px; transform: none; bottom: 12px; flex-wrap: wrap; justify-content: space-between; gap: 6px; padding: 8px; }
  .time-read { min-width: 0; }
  .time-controls { overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .t-btn { min-width: 34px; height: 32px; padding: 0 5px; }
  .time-controls [data-rate="-2629800"], .time-controls [data-rate="2629800"] { display: none; }
  .hints { display: none; }
  .skip-intro { bottom: 180px; right: 16px; }
  .info-panel { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 58vh; padding: 10px 18px 24px; border-left: 0; border-right: 0; border-bottom: 0; animation: sheetIn var(--d-med) var(--ease-out); z-index: var(--z-nav); }
  .panel-grip { display: block; width: 44px; height: 4px; border-radius: 2px; background: var(--line-strong); margin: 0 auto 12px; }
  .info-head h2 { font-size: 22px; }
  .layers-panel { left: 12px; right: 12px; width: auto; }
  .frame-marks { display: none; }
}
@keyframes sheetIn { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
[hidden] { display: none !important; }

/* ======================= v2: SKYLEAR mission-control layer ======================= */
/* angled corner brackets replace the "+" marks on panels */
.panel::before, .panel::after { content: ""; width: 12px; height: 12px; border: 1px solid var(--ion); opacity: 0.8; font-size: 0; }
.panel::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
.panel::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.info-panel { clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); }
.info-panel.flicker { animation: holoIn 520ms steps(1, end) 1, panelIn var(--d-med) var(--ease-out); }
@keyframes holoIn { 0% { opacity: 0; } 12% { opacity: 0.8; } 18% { opacity: 0.2; } 30% { opacity: 1; } 38% { opacity: 0.55; } 50%, 100% { opacity: 1; } }
.info-panel::selection { background: rgba(156, 200, 255, 0.3); }
.info-head h2 { font-size: 30px; letter-spacing: 0.02em; }

/* ME3-style data card */
.info-card { margin-top: 16px; }
.card-grid { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-top: 1px solid var(--line-strong); }
.card-grid div { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--line); }
.card-grid div:nth-child(odd) { border-right: 1px solid var(--line); }
.card-grid div:nth-child(even) { padding-left: 10px; }
.card-grid div.wide { grid-column: 1 / -1; border-right: 0; }
.card-grid dt { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mist); margin-bottom: 4px; }
.card-grid dd { margin: 0; font-family: var(--f-mono); font-size: 13px; color: var(--paper); font-variant-numeric: tabular-nums; }
.info-text { margin: 14px 0 0; color: var(--haze); font-size: 14px; line-height: 1.6; }
.chip-accent { border-color: rgba(255, 106, 43, 0.55); color: #ffb18f; }
.chip-accent:hover { border-color: var(--ignition); background: rgba(255, 106, 43, 0.1); }
.chip-accent kbd { border-color: rgba(255, 106, 43, 0.4); color: #ffb18f; }
.scan-res { position: relative; }
.scan-res.reveal dd, .scan-res.reveal dt { animation: scanReveal 700ms var(--ease-out) both; }
@keyframes scanReveal { from { opacity: 0; transform: translateX(-6px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }

/* breadcrumb */
.crumbs { position: fixed; top: calc(var(--hud-pad) + 48px); left: calc(var(--hud-pad) + 10px); z-index: var(--z-hud); display: flex; align-items: center; gap: 8px; font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; max-width: calc(100vw - 520px); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 2px 0; list-style: none; margin: 0; padding: 0; }
.crumbs li { display: flex; align-items: center; color: var(--mist); }
.crumbs li + li::before { content: "›"; margin: 0 8px; color: var(--line-strong); }
.crumbs button { background: none; border: 0; padding: 4px 0; color: inherit; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.crumbs button:hover { color: var(--paper); }
.crumbs li:last-child { color: var(--ion); }
.crumb-back { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 2px; background: var(--glass); color: var(--haze); cursor: pointer; }
.crumb-back:hover { color: var(--paper); border-color: var(--ion); }
.crumb-back svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.5; }

/* target reticle */
.reticle { position: fixed; left: 0; top: 0; width: 64px; height: 64px; margin: -32px 0 0 -32px; z-index: 4; pointer-events: none; color: var(--ion); will-change: transform; }
.reticle svg { width: 100%; height: 100%; overflow: visible; animation: spin 14s linear infinite; }
.reticle .r-ring { fill: none; stroke: currentColor; stroke-width: 0.8; stroke-dasharray: 4 3; opacity: 0.7; }
.reticle .r-inner { fill: none; stroke: currentColor; stroke-width: 0.5; opacity: 0.35; }
.reticle .r-ticks line { stroke: currentColor; stroke-width: 1.2; }
.reticle .br { position: absolute; width: 10px; height: 10px; border: 1.5px solid var(--ignition); opacity: 0.9; }
.reticle .tl { left: -6px; top: -6px; border-right: 0; border-bottom: 0; }
.reticle .tr { right: -6px; top: -6px; border-left: 0; border-bottom: 0; }
.reticle .bl { left: -6px; bottom: -6px; border-right: 0; border-top: 0; }
.reticle .br2 { right: -6px; bottom: -6px; border-left: 0; border-top: 0; }
.reticle.lock svg { animation-duration: 5s; }
.reticle.is-big svg { display: none; }
.reticle.has-body .r-inner { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* compact hover card */
.tooltip { padding: 8px 11px; min-width: 150px; border-color: rgba(156, 200, 255, 0.35); clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); }
.tooltip small { color: var(--ion); }
.tooltip .tt-name { display: block; font-size: 12px; color: var(--paper); letter-spacing: 0.06em; margin: 2px 0; }
.tooltip .tt-meta { display: block; color: var(--mist); font-size: 10px; letter-spacing: 0.1em; }

.v1-link { pointer-events: auto; color: var(--mist); text-decoration: none; border-bottom: 1px solid var(--line-strong); width: max-content; }
.v1-link:hover { color: var(--paper); }

@media (max-width: 767px) {
  .crumbs { top: 58px; left: 16px; max-width: calc(100vw - 32px); }
  .crumbs li:not(:nth-last-child(-n+2)) { display: none; }
  .v1-link { display: none; }
  .info-panel { clip-path: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reticle svg { animation: none; }
}