/* ============================================================================
   КОСМИЧЕСКИЕ МОТИВЫ · decorative component layer
   ----------------------------------------------------------------------------
   Reticle / HUD frames / telemetry chips / scan-lines / REC indicator.
   Pure CSS so it can be applied to any screen without touching its logic.
   Reads tokens from colors_and_type.css (--hud-line, --hud-tick, --rec, --team…).
   In the CALM theme these read muted; in IMMERSIVE they glow. Swap the theme,
   the decoration swaps with it.
   ========================================================================== */

/* ---- Starfield background ------------------------------------------------- */
.cz-starfield {
  position: relative;
  background-color: var(--kv-ink-900);
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,.9), transparent),
    radial-gradient(1px 1px at 28% 64%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.4px 1.4px at 47% 18%, rgba(174,224,255,.9), transparent),
    radial-gradient(1px 1px at 63% 78%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 78% 34%, rgba(255,255,255,.8), transparent),
    radial-gradient(1.6px 1.6px at 88% 66%, rgba(174,224,255,.85), transparent),
    radial-gradient(1px 1px at 8% 84%, rgba(255,255,255,.5), transparent),
    var(--grad-cosmos);
  background-repeat: no-repeat;
}
.cz-starfield--dense {
  background-image:
    radial-gradient(1px 1px at 5% 12%, #fff, transparent),
    radial-gradient(1px 1px at 17% 44%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.4px 1.4px at 24% 78%, #cfeeff, transparent),
    radial-gradient(1px 1px at 36% 28%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 44% 62%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.6px 1.6px at 56% 16%, #cfeeff, transparent),
    radial-gradient(1px 1px at 67% 50%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 73% 86%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.3px 1.3px at 84% 32%, #cfeeff, transparent),
    radial-gradient(1px 1px at 92% 70%, rgba(255,255,255,.6), transparent),
    var(--grad-cosmos);
}

/* ---- Scan-lines overlay --------------------------------------------------- */
.cz-scanlines { position: relative; }
.cz-scanlines::after {
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background: repeating-linear-gradient(
    to bottom, transparent 0 3px, var(--scanline) 3px 4px);
  mix-blend-mode: screen; opacity:.8;
}

/* ---- HUD frame — instrument panel with cut ("clipped") corners ------------ */
.cz-hud {
  position: relative;
  border: 1px solid var(--hud-line);
  background: var(--surface);
  /* notched corners */
  clip-path: polygon(
    14px 0, 100% 0, 100% calc(100% - 14px),
    calc(100% - 14px) 100%, 0 100%, 0 14px);
}
/* corner ticks for the HUD frame */
.cz-hud::before, .cz-hud::after {
  content:""; position:absolute; width:14px; height:14px; pointer-events:none;
  border-color: var(--hud-tick); border-style:solid;
}
.cz-hud::before { top:6px; left:6px; border-width:2px 0 0 2px; }
.cz-hud::after  { bottom:6px; right:6px; border-width:0 2px 2px 0; }

/* Corner-bracket variant (four L-brackets, no clip) */
.cz-brackets { position: relative; }
.cz-brackets > .cz-bk {
  position:absolute; width:16px; height:16px; border:2px solid var(--hud-tick); pointer-events:none;
}
.cz-bk.tl{ top:8px; left:8px; border-width:2px 0 0 2px; }
.cz-bk.tr{ top:8px; right:8px; border-width:2px 2px 0 0; }
.cz-bk.bl{ bottom:8px; left:8px; border-width:0 0 2px 2px; }
.cz-bk.br{ bottom:8px; right:8px; border-width:0 2px 2px 0; }

/* ---- Reticle / crosshair (прицел) — SVG-free, pure CSS ------------------- */
.cz-reticle {
  --rs: 64px;
  position: relative; width: var(--rs); height: var(--rs); flex: none;
}
.cz-reticle::before { /* ring */
  content:""; position:absolute; inset:0; border-radius:50%;
  border: 1.5px solid var(--team, var(--hud-tick));
  box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--team, var(--hud-tick)) 14%, transparent);
}
.cz-reticle::after { /* cross-hairs */
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(var(--team, var(--hud-tick)), var(--team, var(--hud-tick))) center/1.5px 100% no-repeat,
    linear-gradient(var(--team, var(--hud-tick)), var(--team, var(--hud-tick))) center/100% 1.5px no-repeat;
  -webkit-mask:
    linear-gradient(#000,#000) center/1.5px 26% no-repeat,
    linear-gradient(#000,#000) center/26% 1.5px no-repeat,
    linear-gradient(#000,#000) top/1.5px 18% no-repeat,
    linear-gradient(#000,#000) bottom/1.5px 18% no-repeat,
    linear-gradient(#000,#000) left/18% 1.5px no-repeat,
    linear-gradient(#000,#000) right/18% 1.5px no-repeat;
}
.cz-reticle.is-locked::before { animation: cz-spin 8s linear infinite; }
@keyframes cz-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .cz-reticle.is-locked::before { animation:none; } }

/* ---- Telemetry chip ------------------------------------------------------- */
.cz-chip {
  display:inline-flex; align-items:center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight:500;
  letter-spacing:.08em; text-transform:uppercase;
  padding: 5px 10px; border-radius: var(--r-sm);
  border: 1px solid var(--border); color: var(--text-muted);
  background: var(--surface-2);
}
.cz-chip .cz-dot { width:6px; height:6px; border-radius:50%; background: var(--team, var(--accent)); flex:none; }
.cz-chip--ok   { color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, transparent); background: var(--success-soft); }
.cz-chip--ok   .cz-dot{ background: var(--success); }
.cz-chip--warn { color: var(--pending); border-color: color-mix(in srgb, var(--pending) 40%, transparent); background: var(--pending-soft); }
.cz-chip--warn .cz-dot{ background: var(--pending); }
.cz-chip--err  { color: var(--error); border-color: color-mix(in srgb, var(--error) 40%, transparent); background: var(--error-soft); }
.cz-chip--err  .cz-dot{ background: var(--error); }

/* ---- REC indicator -------------------------------------------------------- */
.cz-rec {
  display:inline-flex; align-items:center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight:700;
  letter-spacing:.16em; color: var(--rec);
}
.cz-rec .cz-rec-dot { width:9px; height:9px; border-radius:50%; background: var(--rec);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--rec) 60%, transparent); animation: cz-pulse 1.6s var(--ease-out) infinite; }
@keyframes cz-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rec) 55%, transparent); }
  70%{ box-shadow: 0 0 0 7px transparent; }
  100%{ box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce){ .cz-rec .cz-rec-dot { animation:none; } }

/* ---- Telemetry readout (label over big mono value) ----------------------- */
.cz-readout { display:flex; flex-direction:column; gap:2px; }
.cz-readout .cz-r-label { font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:var(--ls-caps);
  text-transform:uppercase; color: var(--text-faint); }
.cz-readout .cz-r-value { font-family:var(--font-mono); font-weight:700; font-size:22px; color: var(--text);
  font-variant-numeric: tabular-nums; line-height:1; }
.cz-readout .cz-r-value small { font-size:12px; color: var(--text-faint); font-weight:500; }

/* ---- Dotted vector / trajectory divider ---------------------------------- */
.cz-trace { height:1px; background: repeating-linear-gradient(to right,
  var(--hud-tick) 0 6px, transparent 6px 12px); opacity:.7; }

/* ---- Progress as a mission gauge ----------------------------------------- */
.cz-gauge { height:8px; border-radius:var(--r-pill); background: var(--surface-inset);
  overflow:hidden; border:1px solid var(--border); }
.cz-gauge > i { display:block; height:100%; border-radius:inherit;
  background: var(--grad-blue); box-shadow: var(--glow); }
.team .cz-gauge > i { background: linear-gradient(90deg,
  color-mix(in srgb, var(--team) 60%, #000 0%), var(--team)); }