/* ============================================================================
   base.css — Reset, Body, Hintergrundebenen
   ----------------------------------------------------------------------------
   Bringt die App auf dieselbe Ausgangsbasis wie prototype/cosmic.html:53-137
   plus die Cosmic-Body-Defaults aus Zeilen 43-51. Enthält KEINE Komponenten
   oder Screen-Layouts — die liegen in components.css bzw. screens.css.
   ============================================================================ */

/* ── Reset ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; overflow: hidden; }

body {
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text-primary);
  background: var(--bg-space);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  user-select: none;
}

/* Hauptcontainer: Spalte aus Topbar + Screen, füllt das Fenster. */
#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* Screen-Wechsel-Klasse (von framework.js getoggelt). */
.screen { display: none; height: 100%; flex-direction: column; }
.screen.show { display: flex; }

/* ── Cosmic-Hintergrundebenen (cosmic.html:55-136) ───────────────────── */

.cosmos {
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(ellipse 60% 50% at 15% 25%, rgba(255, 27, 141, 0.45), transparent 60%),
    radial-gradient(ellipse 70% 60% at 85% 75%, rgba(34, 211, 238, 0.32), transparent 60%),
    radial-gradient(circle 35% at 50% 50%, rgba(255, 160, 122, 0.10), transparent 70%),
    var(--bg-space);
  animation: nebula-drift 30s ease-in-out infinite alternate;
}

@keyframes nebula-drift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-3%, 2%) scale(1.06); }
}

.scanlines {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0px, transparent 3px,
    rgba(255, 255, 255, 0.018) 3px, rgba(255, 255, 255, 0.018) 4px
  );
}

.starfield {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
  animation: twinkle var(--dur, 4s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes twinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.8); }
  50%      { opacity: 1;    transform: scale(1.4); }
}

/* ── Aufsteigende Partikel (cosmic.html:107-136) ─────────────────────── */

.particles {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.particle {
  position: absolute;
  bottom: -10vh;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--c, var(--nebula-cyan));
  box-shadow: 0 0 10px var(--c, var(--nebula-cyan));
  animation: float-up var(--dur, 18s) linear infinite,
             drift-x   var(--drift, 6s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s), 0s;
  opacity: 0;
}
@keyframes float-up {
  0%   { transform: translateY(0)        translateX(0);   opacity: 0; }
  10%  {                                                opacity: 0.6; }
  90%  {                                                opacity: 0.6; }
  100% { transform: translateY(-110vh)   translateX(0);   opacity: 0; }
}
@keyframes drift-x {
  from { margin-left: -25px; }
  to   { margin-left:  25px; }
}

/* Statuspunkt-Puls (cosmic.html:231-234) — wird in Welle 2 in components.css
   für die H1-Zustandsbindung ergänzt. */
@keyframes pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.25); opacity: 0.7; }
}

/* Countdown-Pop (style.css:638-642) — wandert NICHT in games.css, weil es
   zum Overlay-System gehört und auch in Welle 1.5 wieder auftaucht. */
@keyframes cd-pop {
  0%   { transform: scale(1.7); opacity: 0; }
  45%  { transform: scale(1);   opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}

/* ── Bewegungsreduktion (style.css:1170-1177 + cosmic.html) ──────────── */
@media (prefers-reduced-motion: reduce) {
  /* Globale Bremse: alle Übergänge und Animationen auf nahe-null. */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Cosmic-spezifisch: Partikel verschwinden, Nebel-Drift pausiert,
     Sterne stehen still. cosmic-bg.js prüft dieselbe Media Query und
     überspringt dann das Anlegen der Partikel-DOM-Knoten. */
  .particles { display: none !important; }
  .cosmos    { animation: none !important; }
  .star      { animation: none !important; opacity: 0.6; }
}

/* ── Eigene Scroll-Pfeile (Phase 3, ersetzt native Scrollbars) ──────── */
/* Voraussetzung: Container hat `data-arrow-scope` (gesetzt in
   index.html / framework.js) und ist `position: relative` (wird von
   enhanceScrollArrows ggf. nachgezogen). Sichtbarkeit hängt allein an
   der Klasse `.visible`, die JS anhand von scrollTop/clientHeight toggelt. */

.scroll-arrow {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
  z-index: 5;
}
.scroll-arrow.up   { top: 12px; }
.scroll-arrow.down { bottom: 12px; }
.scroll-arrow.visible {
  opacity: 0.7;
  pointer-events: auto;
}
.scroll-arrow:hover {
  opacity: 1;
  transform: translateX(-50%) scale(1.08);
}
.scroll-arrow::before {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  border-left: 2px solid #fff;
  border-top: 2px solid #fff;
  margin: auto;
}
.scroll-arrow.up::before   { transform: rotate(45deg);   margin-top: 7px;  }
.scroll-arrow.down::before { transform: rotate(-135deg); margin-bottom: 7px; }

/* Native Scrollbar weg auf allen data-arrow-scope-Elementen — die
   JS-Pfeile sind jetzt der einzige Hinweis. Browser ohne
   scrollbar-width-Support (alte Edge/IE) blenden die Bar über die
   ::-webkit-scrollbar-Regel aus. */
[data-arrow-scope] {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
[data-arrow-scope]::-webkit-scrollbar { display: none; }