/* nightscape.css — minimal baseline + responsive layout switch.
   All component styling is inline in the React tree (matches the design's
   computed-color approach). This file only sets the page baseline and the
   desktop ScaledStage / mobile breakpoint. */

*, *::before, *::after { box-sizing: border-box; }

/* Defensive: nginx injects sitewide chrome stylesheets at </body> which load
   AFTER this file. Use !important for the page lock-down so the immersive
   layout doesn't get clobbered. */
html, body {
  margin: 0 !important; padding: 0 !important; height: 100% !important;
  background: #02030a !important;
  color: #e8eaf2;
  font-family: 'Inter Tight', -apple-system, system-ui, sans-serif;
  overflow: hidden !important;
  -webkit-font-smoothing: antialiased;
}
body { overscroll-behavior: none; }

/* Hide injected fcc footer chrome on the immersive Nightscape page.
   The Classic UI keeps it (separate index.html). */
.fcc-footer-chrome,
[data-fcc-footer-chrome],
.fcc-version-chip,
[data-fcc-version-chip] { display: none !important; }

/* ScaledStage: 1280×800 canvas centered, scales uniformly to fit viewport. */
.stage {
  position: fixed; inset: 0; overflow: hidden;
  background: #02030a;
  display: flex; align-items: center; justify-content: center;
}
.canvas {
  position: relative; width: 1280px; height: 800px;
  transform-origin: center center;
}

/* Mobile vs desktop layout switch. */
@media (max-width: 760px) {
  .stage { display: none !important; }
}
@media (min-width: 761px) {
  .mobile { display: none !important; }
}

/* Reduced-motion users: freeze sway/flicker/clouds.
   Implemented as a CSS hint; React components honor `prefers-reduced-motion`
   in v1.1. For now this kills CSS-driven transitions only. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}