/* ACTA · Custom Styles */

/* Alpine x-cloak: Flackern beim Initialisieren verhindern */
[x-cloak] { display: none !important; }

/* Material Symbols Default-Settings */
.material-symbols-outlined {
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
  vertical-align: middle;
  user-select: none;
}

/* Scrollbar im Gold-Schema */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #513916; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #7a571a; }

/* Firefox */
* { scrollbar-color: #513916 #0a0a0a; scrollbar-width: thin; }

/* Fokus-Ringe im Gold */
:focus-visible {
  outline: 2px solid #e0a83c !important;
  outline-offset: 2px !important;
}

/* Subtle backdrop pattern */
body {
  background-image:
    radial-gradient(ellipse at top, rgba(224,168,60,0.03), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(224,168,60,0.02), transparent 60%);
}

/* ============================================================
   ACTA · Sci-Fi-Hintergrund (Paket 7)
   ============================================================ */

/* Body-Hintergrund: animierter Sternenhimmel + Scan-Linien */
.acta-scifi-bg {
  position: relative;
  background-color: #050505;
  background-image:
    radial-gradient(ellipse at top, rgba(224,168,60,0.06), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(80,30,20,0.04), transparent 60%);
}

/* Sterne-Ebene 1 (weit, klein) */
.acta-scifi-bg::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
  background-image:
    radial-gradient(1px 1px at 20% 30%,  rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 80% 70%,  rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 50% 50%,  rgba(224,168,60,0.5), transparent),
    radial-gradient(1px 1px at 15% 85%,  rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 60% 15%,  rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 90% 40%,  rgba(224,168,60,0.3), transparent),
    radial-gradient(1px 1px at 40% 90%,  rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 75% 25%,  rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 30% 55%,  rgba(224,168,60,0.4), transparent),
    radial-gradient(1px 1px at 95% 80%,  rgba(255,255,255,0.4), transparent);
  background-size: 400px 400px;
  animation: acta-stars-drift 120s linear infinite;
}

/* Sterne-Ebene 2 (nah, größer, schneller — Parallax-Effekt) */
.acta-scifi-bg::after {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.3;
  background-image:
    radial-gradient(2px 2px at 25% 45%,  rgba(224,168,60,0.8), transparent),
    radial-gradient(2px 2px at 70% 25%,  rgba(255,255,255,0.6), transparent),
    radial-gradient(1.5px 1.5px at 45% 75%, rgba(224,168,60,0.6), transparent),
    radial-gradient(2px 2px at 10% 15%,  rgba(255,255,255,0.7), transparent),
    radial-gradient(1.5px 1.5px at 85% 65%, rgba(255,255,255,0.5), transparent);
  background-size: 600px 600px;
  animation: acta-stars-drift-near 80s linear infinite;
}

@keyframes acta-stars-drift {
  from { transform: translate(0, 0); }
  to   { transform: translate(-400px, -200px); }
}
@keyframes acta-stars-drift-near {
  from { transform: translate(0, 0); }
  to   { transform: translate(-600px, 300px); }
}

/* Scan-Linien-Overlay (sehr subtil, über ganze Seite) */
.acta-scifi-bg > * {
  position: relative;
  z-index: 1;
}

/* Goldene Leuchteffekte bei Hover auf Navigationsbuttons */
.acta-glow {
  transition: box-shadow 0.2s, border-color 0.2s;
}
.acta-glow:hover {
  box-shadow: 0 0 12px rgba(224,168,60,0.3);
}

/* Lauftext-Streifen für Footer/Header-Deko */
@keyframes acta-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.acta-marquee {
  display: flex;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}
.acta-marquee-inner {
  display: flex;
  gap: 3rem;
  flex-shrink: 0;
  animation: acta-marquee 60s linear infinite;
  white-space: nowrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: rgba(224,168,60,0.3);
  text-transform: uppercase;
  letter-spacing: 0.2em;
}
.acta-marquee-inner:hover {
  animation-play-state: paused;
}

/* Glowing-Border für aktive Elemente */
.acta-active-glow {
  box-shadow: 0 0 0 1px rgba(224,168,60,0.5), 0 0 20px rgba(224,168,60,0.15);
}

/* Pulse-Glow für Online-Dots */
@keyframes acta-pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0.7); }
  50%      { box-shadow: 0 0 0 4px rgba(74,222,128,0); }
}

/* ============================================================
   ACTA · Paket 7 Teil 3: Hero + Cockpit-Feel
   ============================================================ */

/* ----- Hero-Banner ----- */
.acta-hero {
  position: relative;
  /* Transparent, damit die Sterne im body-Hintergrund durchscheinen */
  background: radial-gradient(ellipse at center, rgba(224,168,60,0.03) 0%, transparent 80%);
}

.acta-hero-img {
  /* Subtle "burn-in"-Effekt am unteren Rand */
  filter: brightness(0.95) contrast(1.05);
}

/* Scanlines OVER dem Banner */
.acta-hero-scanlines {
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, 0.15) 2px,
    rgba(0, 0, 0, 0.15) 3px
  );
  mix-blend-mode: multiply;
  opacity: 0.6;
}

.acta-hero-vignette {
  background: linear-gradient(to bottom, transparent 0%, rgba(5, 5, 5, 0.4) 50%, #050505 100%);
}

/* Subtile horizontale Scan-Linie die alle 8s nach unten wandert */
.acta-hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: -5%;
  height: 3px;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(224, 168, 60, 0.2) 40%,
    rgba(224, 168, 60, 0.6) 50%,
    rgba(224, 168, 60, 0.2) 60%,
    transparent 100%);
  pointer-events: none;
  z-index: 11;
  animation: acta-scan 10s linear infinite;
  opacity: 0.7;
}
@keyframes acta-scan {
  0%   { top: -5%; opacity: 0; }
  5%   { opacity: 0.7; }
  95%  { opacity: 0.7; }
  100% { top: 105%; opacity: 0; }
}

/* ----- Cockpit-Grid-Overlay (auf body) ----- */
.acta-scifi-bg {
  /* Schwächer: damit das Grid dominiert */
}

/* Neue Ebene: grid-overlay */
.acta-scifi-bg::before {
  /* Ebene 1: dichte Sternen-Schicht + feines Grid */
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
  background-image:
    /* Sterne — 24 Punkte verteilt */
    radial-gradient(1px 1px at 20% 30%,  rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 80% 70%,  rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 50% 50%,  rgba(224,168,60,0.8), transparent),
    radial-gradient(1px 1px at 15% 85%,  rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 60% 15%,  rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 90% 40%,  rgba(224,168,60,0.6), transparent),
    radial-gradient(1px 1px at 40% 90%,  rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 75% 25%,  rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 30% 55%,  rgba(224,168,60,0.6), transparent),
    radial-gradient(1px 1px at 95% 80%,  rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 5%  20%,  rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 12% 65%,  rgba(224,168,60,0.5), transparent),
    radial-gradient(1px 1px at 35% 12%,  rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 48% 78%,  rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 55% 38%,  rgba(224,168,60,0.5), transparent),
    radial-gradient(1px 1px at 68% 58%,  rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 82% 8%,   rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 88% 92%,  rgba(224,168,60,0.5), transparent),
    radial-gradient(1px 1px at 25% 42%,  rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 63% 82%,  rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 7%  48%,  rgba(224,168,60,0.5), transparent),
    radial-gradient(1px 1px at 92% 18%,  rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 45% 5%,   rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 22% 95%,  rgba(224,168,60,0.5), transparent),
    /* Grid-Linien */
    linear-gradient(90deg, rgba(224, 168, 60, 0.06) 1px, transparent 1px),
    linear-gradient( 0deg, rgba(224, 168, 60, 0.06) 1px, transparent 1px);
  background-size:
    400px 400px, 400px 400px, 400px 400px, 400px 400px, 400px 400px,
    400px 400px, 400px 400px, 400px 400px, 400px 400px, 400px 400px,
    400px 400px, 400px 400px, 400px 400px, 400px 400px, 400px 400px,
    400px 400px, 400px 400px, 400px 400px, 400px 400px, 400px 400px,
    400px 400px, 400px 400px, 400px 400px, 400px 400px,
    60px 60px, 60px 60px;
  animation: acta-stars-drift 180s linear infinite;
}

/* Ebene 2: größere nahe Sterne (Parallax) + Scanlines */
.acta-scifi-bg::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.75;
  background-image:
    /* 12 größere Sterne (Parallax-Vordergrund) */
    radial-gradient(2px 2px at 25% 45%,  rgba(224,168,60,0.9), transparent),
    radial-gradient(2px 2px at 70% 25%,  rgba(255,255,255,0.7), transparent),
    radial-gradient(1.5px 1.5px at 45% 75%, rgba(224,168,60,0.7), transparent),
    radial-gradient(2px 2px at 10% 15%,  rgba(255,255,255,0.8), transparent),
    radial-gradient(1.5px 1.5px at 85% 65%, rgba(255,255,255,0.6), transparent),
    radial-gradient(2px 2px at 55% 10%,  rgba(224,168,60,0.7), transparent),
    radial-gradient(1.5px 1.5px at 20% 80%, rgba(255,255,255,0.6), transparent),
    radial-gradient(2px 2px at 90% 50%,  rgba(255,255,255,0.7), transparent),
    radial-gradient(1.5px 1.5px at 5%  60%, rgba(224,168,60,0.6), transparent),
    radial-gradient(2px 2px at 65% 88%,  rgba(255,255,255,0.6), transparent),
    radial-gradient(1.5px 1.5px at 38% 35%, rgba(255,255,255,0.5), transparent),
    radial-gradient(2px 2px at 78% 92%,  rgba(224,168,60,0.6), transparent),
    /* Globale Scanlines: alle 3 Pixel eine dünne dunkle Linie */
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 2px,
      rgba(0, 0, 0, 0.08) 2px,
      rgba(0, 0, 0, 0.08) 3px
    );
  background-size:
    600px 600px, 600px 600px, 600px 600px, 600px 600px, 600px 600px, 600px 600px,
    600px 600px, 600px 600px, 600px 600px, 600px 600px, 600px 600px, 600px 600px,
    auto;
  animation: acta-stars-drift-near 120s linear infinite;
}

/* ----- Boxen transparenter damit Hintergrund durchscheint ----- */
/* Wir ersetzen nicht die Tailwind-Klassen, sondern fügen einen "acta-card"-Modifier hinzu */
.acta-card {
  background: rgba(10, 10, 10, 0.55) !important;
  backdrop-filter: blur(4px);
  border-color: rgba(224, 168, 60, 0.35) !important;
  box-shadow:
    inset 0 1px 0 rgba(224, 168, 60, 0.1),
    0 0 20px rgba(224, 168, 60, 0.05);
}

.acta-card:hover {
  border-color: rgba(224, 168, 60, 0.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(224, 168, 60, 0.2),
    0 0 30px rgba(224, 168, 60, 0.1);
}

/* Globale Anpassung: alle bg-ink-900/60 werden halb-transparenter */
.acta-scifi-bg .bg-ink-900\/60 {
  background-color: rgba(10, 10, 10, 0.5) !important;
  backdrop-filter: blur(3px);
}

.acta-scifi-bg .bg-ink-900\/40 {
  background-color: rgba(10, 10, 10, 0.35) !important;
  backdrop-filter: blur(3px);
}

/* HUD-Ecken für Cockpit-Feel (einfach .acta-hud auf Container setzen) */
.acta-hud {
  position: relative;
}
.acta-hud::before,
.acta-hud::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid rgba(224, 168, 60, 0.6);
  pointer-events: none;
}
.acta-hud::before {
  top: -1px; left: -1px;
  border-right: none; border-bottom: none;
}
.acta-hud::after {
  bottom: -1px; right: -1px;
  border-left: none; border-top: none;
}

/* Glow-Kante für aktive Buttons */
.acta-scifi-bg .bg-gold-500 {
  box-shadow: 0 0 8px rgba(224, 168, 60, 0.4);
}

/* Subtile Pulse-Animation für "LIVE"-Elemente */
@keyframes acta-flicker {
  0%, 100% { opacity: 1; }
  48%      { opacity: 1; }
  50%      { opacity: 0.85; }
  52%      { opacity: 1; }
}
.acta-flicker { animation: acta-flicker 4s ease-in-out infinite; }

/* ============================================================
   ACTA · Ship-Hero-Card (Referenz-Stil, Cyan-Akzente)
   ============================================================ */

.acta-ship-hero {
  position: relative;
  box-shadow:
    inset 0 0 0 1px rgba(224,168,60, 0.1),
    0 0 20px rgba(224,168,60, 0.08);
}

/* Scan-Linien über dem Bild (subtil, horizontal) */
.acta-ship-scanlines {
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, 0.2) 2px,
    rgba(0, 0, 0, 0.2) 3px
  );
  mix-blend-mode: multiply;
  opacity: 0.5;
}

/* HUD-Ecken (dünne Cyan-Winkel oben-links/oben-rechts) */
.acta-ship-hud::before,
.acta-ship-hud::after {
  content: '';
  position: absolute;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(224,168,60, 0.6);
  pointer-events: none;
}
.acta-ship-hud::before {
  top: 8px;
  left: 8px;
  border-right: none;
  border-bottom: none;
}
.acta-ship-hud::after {
  top: 8px;
  right: 8px;
  border-left: none;
  border-bottom: none;
}

/* Ship-Name mit subtilem Leuchten + monospace-Akzent */
.acta-ship-name {
  text-shadow:
    0 0 10px rgba(224,168,60, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.8);
  letter-spacing: 0.08em;
}

/* Animierte horizontale Linie die über dem Bild wandert (alle 8s) */
.acta-ship-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -10%;
  height: 2px;
  background: linear-gradient(to bottom,
    transparent,
    rgba(224,168,60, 0.8),
    transparent);
  pointer-events: none;
  z-index: 25;
  animation: acta-ship-scan 8s linear infinite;
  opacity: 0.6;
}

@keyframes acta-ship-scan {
  0%   { top: -5%;  opacity: 0; }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.6; }
  100% { top: 105%; opacity: 0; }
}

/* ─── No-Spinner für number-Inputs (Klasse no-spin) ─── */
.no-spin::-webkit-outer-spin-button,
.no-spin::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.no-spin {
    -moz-appearance: textfield;
    appearance: textfield;
}