.egg-cracked {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}


.egg {
  position: relative !important;
  width: clamp(1.8rem, 2.5vw, 2.5rem);
  height: clamp(1.8rem, 2.5vw, 2.5rem);
  aspect-ratio: 1 / 1;
}

.egg img {
  width: 100%;
  height: 100%;
}

/* default */
.egg-box {
  z-index: 1;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.egg:not(.cracking):not(.unlocked):not(.egg-cracked) .egg-box:hover {
  opacity: 0.9;
}

.egg-cracked,
.egg-reward {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.egg.unlocked .egg-box,
.egg.unlocked .egg-cracked {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* cracking animation */
.egg.cracking .egg-box {
  animation: crack 0.6s forwards;
}

@keyframes crack {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-0.4em); }
  100% { transform: translateY(0); opacity: 0; }
}

/* show cracked briefly */
.egg.cracking .egg-cracked {
  opacity: 1 !important; /* Force visibility */
  visibility: visible !important;
  animation: moon 1.8s ease;
}

/* unlocked permanent state */
.egg.unlocked .egg-reward {
  opacity: 1;
  visibility: visible;
}

@keyframes moon {
  0%   { transform: translate(0, 20px) scale(0.5) rotate(-45deg); opacity: 0; }
  25%  { transform: translate(-15px, -10px) scale(1.2) rotate(20deg); opacity: 1; }
  50%  { transform: translate(15px, -20px) scale(1) rotate(-15deg); }
  75%  { transform: translate(-5px, -25px) scale(1.1) rotate(10deg); }
  100% { transform: translate(0, -30px) scale(1) rotate(0deg); opacity: 1; }
}