/* ──────────────────────────────
   1. CSS variables (sizes)
──────────────────────────────── */
:root {
  --sun-size:   65vmin; /* tweak as you like */
  --planet-size: 20vmin;
  --moon-size:   4vmin;
}

/* ──────────────────────────────
   2. Hard reset
──────────────────────────────── */
* { margin:0; padding:0; box-sizing:border-box; }

html,body{
  width:100%; height:100%;
  overflow:hidden;
  font-family:sans-serif;    /* avoids Times flash */
}

/* ──────────────────────────────
   3. Scene container
──────────────────────────────── */
.galaxy{
  position:relative;
  width:100%; height:100%;
  transform:translateZ(0);   /* kicks in GPU on some browsers */
  z-index: auto;
}

/* ──────────────────────────────
   4. Sun
──────────────────────────────── */
.sun{
  position:absolute;
  top:50%; left:50%;
  width:var(--sun-size); height:var(--sun-size);
  transform:translate(-50%,-50%);
}
.sun-pop{
  position:absolute; inset:0;
  border-radius:50%;
  overflow:hidden;
  pointer-events: none;
}
.sun-bw{
  position:absolute; inset:0;
  border-radius:50%;
  overflow:hidden;           /* crop SVG nicely */
}

/* ──────────────────────────────
   5. Planets
──────────────────────────────── */
.planet{
  position:absolute;
  top:50%; left:50%;
  width:var(--planet-size); height:var(--planet-size);
  transform:translate(-50%,-50%);
  z-index: 2;
}

.planet-pop{
  position:absolute; 
  inset:0;
  border-radius:50%;
  overflow:hidden;
  z-index: 3;
}


.planet-bw{
  position:absolute; 
  inset:0;
  border-radius:50%;
  overflow:hidden;
  z-index: 4;
  pointer-events: none;
}


/* ──────────────────────────────
   6. Moons
──────────────────────────────── */

.moon{
  position:absolute;
  top:50%; left:50%;
  width:var(--moon-size); height:var(--moon-size);
  transform:translate(-50%,-50%);
  border-radius:50%;
  overflow:hidden;
  z-index: 2;
  pointer-events: none;
}

/* ──────────────────────────────
   7. All embedded SVGs / PNGs
──────────────────────────────── */

.planet-pop img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: auto;  /* ✅ allow clicks */
  z-index: 4;
}

.planet-bw img,
.moon img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;  /* ✅ safe to disable here */
}