:root { color-scheme: dark; }

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #04050b;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

/* ---------- living backgrounds ---------- */

.bg-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 3400ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}

.bg-layer.active { opacity: 1; }

.bg-space {
  background:
    radial-gradient(65% 55% at 72% 20%, rgba(88, 64, 200, 0.22), transparent 68%),
    radial-gradient(48% 42% at 20% 78%, rgba(190, 70, 150, 0.14), transparent 70%),
    radial-gradient(42% 38% at 52% 46%, rgba(40, 110, 190, 0.15), transparent 72%),
    radial-gradient(95% 85% at 50% 50%, #080b1a 0%, #04050c 68%, #020309 100%);
}

.bg-water {
  background:
    radial-gradient(120% 72% at 50% -12%, rgba(96, 205, 225, 0.17), transparent 62%),
    radial-gradient(85% 60% at 26% 102%, rgba(20, 84, 116, 0.30), transparent 72%),
    radial-gradient(60% 48% at 82% 88%, rgba(30, 110, 130, 0.14), transparent 70%),
    linear-gradient(180deg, #04131b 0%, #031018 44%, #02070d 100%);
}

.bg-sand {
  background:
    radial-gradient(80% 58% at 76% 18%, rgba(232, 170, 98, 0.20), transparent 70%),
    radial-gradient(72% 52% at 16% 74%, rgba(166, 95, 52, 0.20), transparent 72%),
    radial-gradient(50% 42% at 52% 44%, rgba(130, 82, 45, 0.14), transparent 74%),
    linear-gradient(166deg, #181008 0%, #21150b 46%, #0b0704 100%);
}

#bg {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#stage {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}

body.cursor-live #stage { cursor: none; }

/* ---------- cursor ---------- */

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border: 1px solid rgba(214, 228, 255, 0.42);
  border-radius: 50%;
  box-shadow:
    0 0 16px rgba(140, 180, 255, 0.2),
    inset 0 0 10px rgba(170, 205, 255, 0.12);
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transition: opacity 520ms ease, border-color 260ms ease, box-shadow 260ms ease;
  will-change: transform;
}

.cursor.on { opacity: 1; }

.cursor.down {
  border-color: rgba(255, 228, 186, 0.82);
  box-shadow:
    0 0 22px rgba(255, 205, 140, 0.3),
    inset 0 0 12px rgba(255, 215, 160, 0.18);
}

@media (pointer: coarse) {
  .cursor { display: none; }
}

.vignette {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(125% 105% at 50% 46%, transparent 40%, rgba(2, 3, 9, 0.66) 100%);
}

/* ---------- interface ---------- */

.hud {
  position: fixed;
  top: max(24px, env(safe-area-inset-top));
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  text-align: center;
  opacity: 0.92;
  transition: opacity 1.8s ease;
}

.hud h1 {
  font-size: clamp(12px, 0.55vw + 9px, 15px);
  font-weight: 400;
  letter-spacing: 0.52em;
  text-indent: 0.52em;
  text-transform: uppercase;
  color: #eef1ff;
  text-shadow: 0 0 26px rgba(168, 176, 255, 0.38);
}

.hud .sub {
  font-size: clamp(9px, 0.2vw + 8px, 10px);
  font-weight: 400;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-transform: uppercase;
  color: rgba(228, 233, 255, 0.4);
}

.tagline {
  position: fixed;
  bottom: max(22px, env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  z-index: 4;
  text-align: center;
  pointer-events: none;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: lowercase;
  color: rgba(228, 233, 255, 0.3);
  opacity: 0.9;
  transition: opacity 1.8s ease;
}

body.started .hud { opacity: 0.5; }
body.started .tagline { opacity: 0.18; }

@media (max-width: 520px) {
  .hud h1 { letter-spacing: 0.4em; text-indent: 0.4em; }
  .hud .sub { letter-spacing: 0.2em; text-indent: 0.2em; }
}

@media (prefers-reduced-motion: reduce) {
  .hud, .tagline { transition: none; }
  .bg-layer { transition-duration: 1400ms; }
  .cursor { transition: none; }
}