/* Vector Barrage – Design-Tokens: holographisches Gefechtsinterface (Schwarz + Cyan-Linien + Glühen).
   Farbe wählbar (Hologrammfarbe, kosmetisch): data-theme = cyan | amber | green | violet an <html>. */
:root {
  --bg: #02060c;
  --bg-2: #061421;
  --cyan: #39e6ff;
  --cyan-hi: #b8f6ff;
  --cyan-dim: #1b9db8;
  --accent: var(--cyan);
  --accent-hi: var(--cyan-hi);
  --accent-dim: var(--cyan-dim);
  --amber: #ffb020;
  --red: #ff4d6d;
  --green: #38ffb0;
  --violet: #a58bff;

  --line: rgb(var(--acc-rgb) / .46);
  --line-dim: rgb(var(--acc-rgb) / .2);
  --line-faint: rgb(var(--acc-rgb) / .09);
  --acc-rgb: 57 230 255;

  --panel: rgb(3 20 33 / .6);
  --panel-solid: #051a2b;
  --panel-hi: rgb(8 40 62 / .72);
  --text: #d9f6ff;
  --muted: #8dbccd;
  --faint: #56798a;
  --danger: #ff5d7a;

  --glow: 0 0 10px rgb(var(--acc-rgb) / .55);
  --glow-strong: 0 0 18px rgb(var(--acc-rgb) / .8), 0 0 42px rgb(var(--acc-rgb) / .35);

  --font-display: 'Orbitron', 'Exo 2', system-ui, sans-serif;
  --font-ui: 'Exo 2', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Share Tech Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --cut: 10px;
  --r: 2px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t: 180ms;

  /* Ebenen (z-index-Skala) */
  --z-gl: 0; --z-scan: 2; --z-screen: 10; --z-hud: 20; --z-tip: 30; --z-banner: 35; --z-overlay: 40; --z-dialog: 50; --z-toast: 60;
}
:root[data-theme='amber']  { --cyan: #ffb020; --cyan-hi: #ffe2a3; --cyan-dim: #b57a10; --acc-rgb: 255 176 32; --amber: #39e6ff; --panel: rgb(30 18 3 / .6); --panel-solid: #1e1204; --panel-hi: rgb(58 34 6 / .72); --bg-2: #160d03; --text: #ffefd2; --muted: #c9a878; --faint: #86694a; }
:root[data-theme='green']  { --cyan: #38ffb0; --cyan-hi: #c1ffe6; --cyan-dim: #1aa870; --acc-rgb: 56 255 176; --panel: rgb(3 28 20 / .6); --panel-solid: #04241a; --panel-hi: rgb(6 50 36 / .72); --bg-2: #05170f; --text: #d6ffee; --muted: #86c9ac; --faint: #4f8770; }
:root[data-theme='violet'] { --cyan: #a58bff; --cyan-hi: #ddd2ff; --cyan-dim: #6a52c4; --acc-rgb: 165 139 255; --panel: rgb(16 10 36 / .62); --panel-solid: #120a2b; --panel-hi: rgb(30 18 66 / .72); --bg-2: #0c0620; --text: #eae4ff; --muted: #a99bd6; --faint: #6c5f98; }

@keyframes vb-scan { from { background-position: 0 0; } to { background-position: 0 4px; } }
@keyframes vb-sweep { 0% { transform: translateY(-120%); } 100% { transform: translateY(2200%); } }
@keyframes vb-flicker { 0%, 100% { opacity: 1; } 47% { opacity: 1; } 48% { opacity: .78; } 50% { opacity: 1; } 78% { opacity: .9; } 79% { opacity: 1; } }
@keyframes vb-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes vb-dash { to { stroke-dashoffset: -60; } }
@keyframes vb-spin { to { transform: rotate(360deg); } }
@keyframes vb-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes vb-blink { 50% { opacity: 0; } }
@keyframes vb-glitch {
  0%, 92%, 100% { transform: translate(0); clip-path: inset(0); }
  93% { transform: translate(-3px, 1px); clip-path: inset(20% 0 55% 0); }
  95% { transform: translate(3px, -1px); clip-path: inset(60% 0 12% 0); }
  97% { transform: translate(-2px, 0); clip-path: inset(38% 0 38% 0); }
}

.mono { font-family: var(--font-mono); letter-spacing: .04em; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }

/* Holographische Fläche: dunkles Glas, dünne Linie, Eckklammern */
.holo {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line-dim);
  -webkit-backdrop-filter: blur(7px) saturate(130%);
  backdrop-filter: blur(7px) saturate(130%);
  box-shadow: inset 0 0 28px rgb(var(--acc-rgb) / .05), 0 8px 30px rgb(0 0 0 / .45);
}
.brackets::after {
  content: ''; position: absolute; inset: -1px; pointer-events: none;
  --b: 12px; --w: 2px; --c: var(--accent);
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--b) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) top left / var(--w) var(--b) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--b) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--w) var(--b) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--b) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--w) var(--b) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--b) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--w) var(--b) no-repeat;
  filter: drop-shadow(0 0 4px rgb(var(--acc-rgb) / .8));
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}