*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: system-ui, -apple-system, sans-serif;
  background: #0a0a0a;
  color: #fafafa;
  overflow: hidden;
  cursor: crosshair;
}

#scene {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.layer {
  position: absolute;
  inset: 0;
  will-change: transform;
}

/* Deep starfield - many small dots via radial gradients */
.stars-far {
  background-image:
    radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 40%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 38% 8%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 52% 60%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 65% 25%, rgba(255,255,255,0.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 72% 78%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 45%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 92% 12%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 18% 70%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 44% 88%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 5%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 77% 55%, rgba(255,255,255,0.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 5% 50%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 92%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 48% 33%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 88% 68%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 3% 80%, rgba(200,220,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 96% 35%, rgba(255,200,220,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 95%, rgba(220,255,220,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 14% 28%, rgba(255,240,200,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 81% 15%, rgba(200,200,255,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 55%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 90%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 21% 3%, rgba(255,255,255,0.9) 0%, transparent 100%);
  animation: twinkle-far 8s ease-in-out infinite alternate;
}

@keyframes twinkle-far {
  0% { opacity: 0.7; }
  100% { opacity: 1; }
}

/* Brighter near stars */
.stars-near {
  background-image:
    radial-gradient(2px 2px at 8% 30%, rgba(255,255,255,1) 0%, transparent 100%),
    radial-gradient(2px 2px at 45% 18%, rgba(255,240,210,0.9) 0%, transparent 100%),
    radial-gradient(3px 3px at 67% 72%, rgba(210,240,255,1) 0%, transparent 100%),
    radial-gradient(2px 2px at 82% 8%, rgba(255,255,255,0.9) 0%, transparent 100%),
    radial-gradient(2px 2px at 15% 85%, rgba(255,220,255,1) 0%, transparent 100%),
    radial-gradient(3px 3px at 58% 45%, rgba(255,255,220,0.9) 0%, transparent 100%),
    radial-gradient(2px 2px at 33% 62%, rgba(255,255,255,1) 0%, transparent 100%),
    radial-gradient(2px 2px at 90% 88%, rgba(220,220,255,0.9) 0%, transparent 100%),
    radial-gradient(4px 4px at 50% 22%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(2px 2px at 72% 40%, rgba(255,255,255,1) 0%, transparent 100%);
  animation: twinkle-near 5s ease-in-out infinite alternate;
}

@keyframes twinkle-near {
  0% { opacity: 0.8; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}

/* Base nebula cloud */
.nebula-base {
  background:
    radial-gradient(ellipse 80% 50% at 40% 50%, rgba(80, 0, 140, 0.35) 0%, transparent 70%),
    radial-gradient(ellipse 60% 70% at 60% 45%, rgba(0, 60, 130, 0.3) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 30% 60%, rgba(140, 0, 80, 0.2) 0%, transparent 60%);
  animation: nebula-drift 20s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}

@keyframes nebula-drift {
  0% { transform: scale(1) rotate(0deg); opacity: 0.8; }
  100% { transform: scale(1.08) rotate(2deg); opacity: 1; }
}

/* Colored glow regions */
.nebula-glow {
  background:
    radial-gradient(ellipse 45% 35% at 35% 48%, rgba(255, 80, 120, 0.2) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 65% 55%, rgba(80, 180, 255, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 35% 30% at 50% 35%, rgba(255, 200, 80, 0.12) 0%, transparent 50%);
  animation: glow-pulse 12s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}

@keyframes glow-pulse {
  0% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
  100% { opacity: 0.7; transform: scale(0.97); }
}

/* Wispy tendrils */
.nebula-wisp1 {
  background:
    radial-gradient(ellipse 90% 20% at 50% 35%, rgba(160, 80, 255, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse 20% 80% at 25% 50%, rgba(80, 200, 255, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 70% 15% at 60% 70%, rgba(255, 120, 80, 0.1) 0%, transparent 55%);
  animation: wisp1 18s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}

@keyframes wisp1 {
  0% { transform: rotate(-3deg) scaleX(1); opacity: 0.7; }
  100% { transform: rotate(3deg) scaleX(1.1); opacity: 1; }
}

.nebula-wisp2 {
  background:
    radial-gradient(ellipse 30% 90% at 70% 40%, rgba(255, 80, 200, 0.1) 0%, transparent 55%),
    radial-gradient(ellipse 60% 25% at 40% 65%, rgba(100, 255, 200, 0.1) 0%, transparent 50%);
  animation: wisp2 22s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}

@keyframes wisp2 {
  0% { transform: rotate(2deg) scaleY(1); opacity: 0.5; }
  100% { transform: rotate(-4deg) scaleY(1.12); opacity: 0.9; }
}

/* Bright core / star cluster */
.core {
  background:
    radial-gradient(ellipse 12% 10% at 48% 47%, rgba(255,255,255,0.9) 0%, rgba(255,220,180,0.6) 30%, transparent 70%),
    radial-gradient(ellipse 20% 18% at 48% 47%, rgba(255,180,100,0.3) 0%, transparent 70%),
    radial-gradient(ellipse 5% 4% at 62% 35%, rgba(255,255,255,0.7) 0%, rgba(200,220,255,0.4) 40%, transparent 70%);
  animation: core-pulse 6s ease-in-out infinite alternate;
}

@keyframes core-pulse {
  0% { opacity: 0.85; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.03); }
}

/* Lens flare streaks */
.flare {
  background:
    linear-gradient(90deg, transparent 47%, rgba(255,255,255,0.06) 49%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.06) 51%, transparent 53%),
    linear-gradient(0deg, transparent 45%, rgba(255,255,255,0.04) 48%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 52%, transparent 55%),
    linear-gradient(45deg, transparent 45%, rgba(255,200,150,0.04) 49%, rgba(255,200,150,0.07) 50%, rgba(255,200,150,0.04) 51%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, rgba(150,200,255,0.03) 49%, rgba(150,200,255,0.06) 50%, rgba(150,200,255,0.03) 51%, transparent 55%);
  animation: flare-pulse 4s ease-in-out infinite alternate;
}

@keyframes flare-pulse {
  0% { opacity: 0.5; }
  100% { opacity: 1; }
}

#hint {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  pointer-events: none;
  letter-spacing: 0.04em;
  white-space: nowrap;
}