/* Moon overlay for BuddyDoro
   - Sits inside #scene so it moves with the background
   - Pointer-events disabled so UI beneath remains clickable
*/

#moon {
  position: absolute;
  /* position above/right of the dragon; tweak as you like */
  right: 12vw;           /* horizontal offset from right edge */
  top: 8vh;              /* vertical offset from top edge */
  width: 12vw;           /* responsive size */
  max-width: 180px;      /* upper bound so it doesn’t get huge */
  min-width: 96px;       /* lower bound for small screens */
  aspect-ratio: 1 / 1;

/* moon.css */
#moon {
  /* …other rules unchanged… */
  background-image: url("../assets/artwork/Moon.png");  /* ✅ UPDATED */
}


  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;

  pointer-events: none;  /* never intercept clicks */
  z-index: 1;            /* above the background (#scene is z=0) */

  /* soft glow + fade in/out */
  filter: drop-shadow(0 0 10px rgba(255,255,255,.65))
          drop-shadow(0 0 24px rgba(255,255,255,.35));
  opacity: 0;
  transition: opacity 300ms ease-in-out;
}

#moon.moon--visible {
  opacity: 1;
}

/* Small screens: nudge slightly so it stays on-screen */
@media (max-width: 640px) {
  #moon {
    right: 6vw;
    top: 6vh;
    width: 18vw;
    max-width: 140px;
  }
}