/* hud-theme.css — Open Brain HUD design system for cosmicodds.com (feature/hud-ui).
   Additive only: new utility classes + an optional body.hud-mode flag. Touches NO existing
   selectors, so it cannot break current layout/logic. Uses GPU-safe props (opacity/transform). */

:root {
  --hud-cyan:   #38e8ff;
  --hud-purple: #a371f7;
  --hud-red:    #ff5d6c;
  --hud-amber:  #ffc24b;
  --hud-green:  #45f08a;
  --hud-ink:    #cdeafe;
  --hud-bg:     #060912;
  --hud-panel:  rgba(10, 18, 32, 0.62);
  --hud-line:   rgba(56, 232, 255, 0.30);
  --hud-glow:   0 0 10px rgba(56,232,255,.55), 0 0 22px rgba(56,232,255,.25);
}

/* ---- neon text + edges ---- */
.hud-neon       { color: var(--hud-cyan); text-shadow: var(--hud-glow); }
.hud-neon-purple{ color: var(--hud-purple); text-shadow: 0 0 10px rgba(163,113,247,.6); }
.hud-edge       { border: 1px solid var(--hud-line); box-shadow: inset 0 0 12px rgba(56,232,255,.08), 0 0 10px rgba(56,232,255,.12); }
.hud-glow-soft  { filter: drop-shadow(0 0 6px rgba(56,232,255,.45)); }

/* ---- hex/ chamfered panels (clip-path; drop-shadow glow performs well on irregular shapes) ---- */
.hud-panel {
  background: var(--hud-panel);
  border: 1px solid var(--hud-line);
  backdrop-filter: blur(3px);                /* used sparingly, NOT animated */
  position: relative;
}
.hud-chamfer {
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.hud-hex {
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.hud-corner::before, .hud-corner::after {
  content: ""; position: absolute; width: 12px; height: 12px; border: 2px solid var(--hud-cyan);
  filter: drop-shadow(0 0 4px var(--hud-cyan)); pointer-events: none;
}
.hud-corner::before { inset-block-start: -1px; inset-inline-start: -1px; border-right: 0; border-bottom: 0; }
.hud-corner::after  { inset-block-end:  -1px; inset-inline-end:  -1px; border-left: 0;  border-top: 0;  }

/* ---- radial gauge (SVG stroke-dashoffset driven by --pct) ---- */
.hud-gauge { transform: rotate(-90deg); }
.hud-gauge-track { stroke: rgba(56,232,255,.12); fill: none; }
.hud-gauge-fill  { stroke: var(--hud-cyan); fill: none; stroke-linecap: round;
  filter: drop-shadow(0 0 4px var(--hud-cyan)); transition: stroke-dashoffset .6s ease; }
.hud-gauge-fill.is-red { stroke: var(--hud-red); filter: drop-shadow(0 0 4px var(--hud-red)); }

/* ---- full-screen scanline / CRT overlay (single fixed node, cheap) ---- */
.hud-scanlines {
  position: fixed; inset: 0; pointer-events: none; z-index: 9990; mix-blend-mode: overlay; opacity: .35;
  background: repeating-linear-gradient(0deg, rgba(56,232,255,.06) 0, rgba(56,232,255,.06) 1px, transparent 2px, transparent 4px);
  animation: hud-scan 8s linear infinite;
}
@keyframes hud-scan { from { transform: translateY(0); } to { transform: translateY(4px); } }

/* ---- animated rotating ring (decorative, transform-only) ---- */
.hud-ring { animation: hud-spin 14s linear infinite; transform-origin: center; }
.hud-ring-rev { animation: hud-spin 22s linear infinite reverse; transform-origin: center; }
@keyframes hud-spin { to { transform: rotate(360deg); } }

/* ---- fluid type so 9-lang text (verbose DE/RU) never clips ---- */
.hud-fluid { font-size: clamp(0.8rem, 0.7rem + 0.5vw, 1.05rem); min-height: 1.4em; }

@media (prefers-reduced-motion: reduce) {
  .hud-scanlines, .hud-ring, .hud-ring-rev { animation: none; }
}