/* Overclocked — Act III deep-time scene (js/hud/cosmos.js). Class prefix: co-
 * Stacking inside #hud-cosmos-scene: .co-under (2D glows) → .co-gl (WebGL points) → .co-over (lines, labels)
 * → vignette (::after) → chrome (.co-name, .co-bar, .co-legend). The top-left corner stays free for the
 * deep-gauges date pill. Night-palette tokens only (css/act3.css owns them). */

.hud-cosmos-scene.co-scene {
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius, 6px);
  background:
    radial-gradient(115% 85% at 50% 53%, color-mix(in srgb, var(--bg-sunk) 85%, transparent) 0%, transparent 72%),
    var(--bg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rule) 70%, transparent);
  contain: layout paint;
}

.co-cv {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; pointer-events: none;
}
.co-under { z-index: 0; }
.co-gl { z-index: 1; }
.co-over { z-index: 2; }

/* soft vignette: the edges sink into the page */
.co-scene::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(120% 95% at 50% 53%, transparent 62%, color-mix(in srgb, var(--bg) 78%, transparent) 100%);
}

/* ---------- scale name (top-right) ---------- */
.co-name {
  position: absolute; top: 10px; right: 12px; z-index: 4;
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
  font-family: var(--mono); text-transform: uppercase; text-align: right;
  pointer-events: none; max-width: 58%;
}
.co-name-t { font-size: 10px; line-height: 12px; letter-spacing: .09em; color: var(--ink); white-space: nowrap; }
.co-name-p { font-size: 9px; line-height: 11px; letter-spacing: .05em; color: var(--muted); text-transform: none; white-space: nowrap; }

/* ---------- scale bar (bottom-left) ---------- */
.co-bar {
  position: absolute; left: 12px; bottom: 11px; z-index: 4;
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  font-family: var(--mono); pointer-events: none;
}
.co-bar-t { font-size: 9px; line-height: 11px; letter-spacing: .05em; color: var(--ink-2); white-space: nowrap; }
.co-bar-l {
  display: block; height: 5px; width: 40px;
  border: 1px solid var(--ink-2); border-top: 0;
  transition: width 120ms linear;
}

/* ---------- galaxy-brain legend (bottom-right) ---------- */
.co-legend {
  position: absolute; right: 12px; bottom: 11px; z-index: 4;
  display: flex; align-items: center; gap: 6px; max-width: 64%;
  font-family: var(--mono); font-size: 9px; line-height: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); pointer-events: none;
  opacity: 0; transform: translateY(3px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.co-legend.is-on { opacity: 1; transform: none; }
.co-legend-k { display: inline-flex; gap: 2px; flex: 0 0 auto; }
.co-legend-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.co-dot--g { background: #e8c26a; box-shadow: 0 0 6px #e8c26a; }
.co-dot--b { background: #7fb2ff; box-shadow: 0 0 6px #7fb2ff; }

@media (prefers-reduced-motion: reduce) {
  .co-legend, .co-bar-l { transition: none; }
}