/* ==========================================================================
   Planet Clicker 2 - design tokens, reset, and the space backdrop.

   The palette leans further out of the solar system than the first game did:
   the same teal energy colour, but violet and gold carry more of the weight,
   because half the worlds here are gas giants and ice giants and the interface
   sits next to them all game.
   ========================================================================== */

:root {
  /* Surfaces, darkest to lightest. */
  --void: #04050d;
  --deep: #080b1a;
  --surface: #0e1226;
  --surface-2: #151b35;
  --surface-3: #1d2547;
  --line: #262f57;
  --line-soft: #1a2143;

  /* Text. */
  --text: #eef1ff;
  --text-muted: #99a3cc;
  --text-dim: #6b76a3;

  /* Brand: electric cyan energy against a violet cosmos. */
  --energy: #38e1d0;
  --energy-bright: #6ff5e8;
  --energy-dim: #1d8a80;
  --violet: #8b5cf6;
  --violet-bright: #a78bfa;
  --magenta: #f062c8;
  --amber: #fbbf5c;
  --danger: #f2606b;
  --success: #4ade80;

  /* Dark Matter, the prestige currency. Deliberately unlike the energy teal:
     the two numbers sit next to each other in the header all game and must
     never be mistaken for one another. */
  --dark-matter: #c4a5ff;
  --dark-matter-bright: #e2d2ff;
  --dark-matter-deep: #4b2f8f;

  /* Comets and the boost they leave behind. */
  --comet: #9fe4ff;
  --comet-bright: #e6f8ff;

  /* Medals. */
  --gold: #ffd45e;
  --silver: #cfd8ec;
  --bronze: #d99358;

  /* Type. */
  --font-ui: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-num: 'SF Mono', 'Cascadia Mono', 'Roboto Mono', 'Courier New', monospace;

  /* Geometry. */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;

  /* Elevation and glow. */
  --shadow-1: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 12px 34px rgba(0, 0, 0, 0.5);
  --shadow-3: 0 26px 70px rgba(0, 0, 0, 0.62);
  --glow-energy: 0 0 26px rgba(56, 225, 208, 0.36);
  --glow-violet: 0 0 30px rgba(139, 92, 246, 0.34);
  --glow-dark-matter: 0 0 30px rgba(196, 165, 255, 0.38);
  --glow-comet: 0 0 34px rgba(159, 228, 255, 0.55);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 240ms;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

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

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

html {
  /* Stops iOS from inflating text in landscape. */
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-ui);
  background: var(--void);
  color: var(--text);
  line-height: 1.5;
  /* The board scrolls internally; the page itself never should. */
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4, p, dl, dd, ol, ul, figure {
  margin: 0;
}

ol, ul {
  padding: 0;
  list-style: none;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

/* Any class that sets `display` would otherwise beat the [hidden] attribute.
   Elements are hidden and shown by toggling `hidden` all over this project, so
   make that attribute win everywhere. */
[hidden] { display: none !important; }

button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

img, svg { display: block; max-width: 100%; }

/* Ringed worlds and orbiting moons are drawn outside the planet's own circle,
   and an SVG clips to its viewport by default. Without this, Saturn loses its
   rings and every moon disappears at the edge of the box. */
.planet-svg { overflow: visible; }

/* --------------------------------------------------------------------------
   Focus: always visible, never only a colour change.
   -------------------------------------------------------------------------- */

:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--energy-bright);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Backdrop: a static starfield plus two slow nebula washes.
   Both are composited layers, so they cost nothing per frame.
   -------------------------------------------------------------------------- */

.starfield,
.nebula {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.starfield { overflow: hidden; }

.star {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  opacity: var(--star-opacity, 0.5);
  animation: twinkle var(--twinkle-duration, 4s) ease-in-out infinite;
  animation-delay: var(--twinkle-delay, 0s);
  will-change: opacity;
}

@keyframes twinkle {
  0%, 100% { opacity: calc(var(--star-opacity, 0.5) * 0.35); }
  50%      { opacity: var(--star-opacity, 0.5); }
}

.nebula {
  background:
    radial-gradient(58% 46% at 14% 8%, rgba(139, 92, 246, 0.20), transparent 62%),
    radial-gradient(50% 42% at 88% 18%, rgba(56, 225, 208, 0.14), transparent 60%),
    radial-gradient(70% 55% at 50% 108%, rgba(240, 98, 200, 0.13), transparent 64%);
  animation: drift 34s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes drift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1.02); }
  to   { transform: translate3d(1.5%, 1.5%, 0) scale(1.07); }
}

.noscript {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--void);
  color: var(--text);
  padding: 24px;
  text-align: center;
  z-index: 999;
}

/* --------------------------------------------------------------------------
   Reduced motion: keep every state change, drop the movement.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .nebula { animation: none; }
  .star { animation: none; opacity: var(--star-opacity, 0.5); }
}

/* Same, but driven by the in-game setting rather than the OS. */
body.reduced-effects .nebula { animation: none; }
body.reduced-effects .star { animation: none; }
body.reduced-effects .float-num { animation-duration: 600ms; }