/* Pre-boot Inline Styles */
    *, *::before, *::after { box-sizing: border-box; }

    html, body {
      margin: 0; padding: 0;
      width: 100%; height: 100%;
      overflow: hidden;
      background: #04040f;
      color: #c8deff;
    }


/* ============================================================
   style.css — Alien Clicker: Galactic Edition v8.0
   AAA Layout System — Two-Panel, Fullscreen, No Overlaps
   ============================================================ */

/* ---- CSS Variables ---------------------------------------- */
:root {
  --bg:            #04040f;
  --panel:         rgba(8, 8, 28, 0.92);
  --border:        rgba(80, 200, 255, 0.20);
  /* Global brand accent — fixed, NOT tied to the current world's identity.
     Galaxy UI, HUD, nav, modals and other shared chrome must stay visually
     consistent across every world (see worldThemeSystem.js header comment).
     World-specific screens/effects should reference --world-accent /
     --world-glow directly instead of this token. An equipped cosmetic UI
     theme overrides this with an explicit inline --accent, which always
     wins — cosmetics are a deliberate global choice, separate from world
     identity. */
  --accent:        #50c8ff;
  --gold:          #ffd060;
  --green:         #3dffa0;
  --danger:        #ff4455;
  --text:          #c8deff;
  --text-dim:      #6080a0;
  --radius:        14px;
  --hdr-h:         62px;
  --nav-h:         68px;
  --side-w:        260px;
  --font-ui:       'Exo 2', 'Segoe UI', sans-serif;
  --font-hd:       'Orbitron', monospace;
  --vh:            1vh;

  /* World identity system — overridden by worldThemeSystem.js at runtime */
  --world-accent:       #7ec8ff;
  --world-ripple-color: rgba(140,200,255,0.55);
  --world-shake-amp:    2px;
  --world-ambient:      rgba(100,160,240,0.05);
  --world-glow:         rgba(61,255,160,0.95);
  --world-glow-dim:     rgba(61,255,160,0.38);
  --world-glow-second:  rgba(80,200,255,0.50);
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}

/* ============================================================
   SCROLLBARS
   ============================================================ */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(80,200,255,0.20); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(80,200,255,0.40); }

/* ============================================================
   ACCESSIBILITY — REDUCED MOTION
   Honors OS-level "reduce motion" setting: shortens/disables
   decorative animations site-wide so celebration moments never
   rely on motion alone. Layout-critical transitions (modals,
   panels) keep a minimal fade so the UI doesn't jump.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   UTILITIES
   ============================================================ */
.text-gold  { color: var(--gold); }
.text-green { color: var(--green); }
.text-dim   { color: var(--text-dim); }
.fullscreen { position: fixed; inset: 0; width: 100%; height: 100%; }

/* Canvas z-order in game screen */
#bg-canvas-game {
  z-index: 1;
}
#orbit-canvas   { z-index: 2; }
#alien-area     { z-index: 10; }