

.slug {
    background-size: contain;
    height: 125px;
    position: absolute;
    transform-origin: center center;
    width: 125px;
    z-index: 9999;
}

.slug.dead {
  animation: floatAway 3.5s ease-out forwards;
}
@keyframes floatAway {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-120px);
    opacity: 0;
  }
}

.slug-trail {
    z-index: 9998;
}

.slug-slime {
  width: 50px;
  height: 30px;
  background: radial-gradient(ellipse at center, #9eff72, #3c8033);
  border-radius: 60% 40% 50% 50% / 40% 60% 60% 40%;
  position: relative;
  box-shadow:
    inset 0 0 4px #2e6f2e,
    0 0 6px rgba(0, 255, 0, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.3);
  animation: quiver 1.5s infinite ease-in-out;
}

.slime {
  position: absolute;
  width: 36px;
  height: 14px;
  background: radial-gradient(ellipse at 40% 60%, rgba(160, 255, 120, 0.85), rgba(76, 175, 80, 0.6));
  border-radius: 60% 40% 50% 70% / 80% 50% 60% 40%;
  transform: rotate(-3deg) scaleX(1.2) skewX(-5deg);
  box-shadow:
    0 0 6px rgba(0, 255, 0, 0.2),
    inset 0 0 4px rgba(50, 150, 50, 0.4);
  animation: stretchPulse 2.5s infinite ease-in-out;
  opacity: 0.85;
  z-index: 1;
}

/* Blurred smear glow behind */
.slime::before {
  content: '';
  position: absolute;
  left: -6px;
  top: -4px;
  width: 48px;
  height: 18px;
  background: radial-gradient(ellipse at center, rgba(130, 255, 100, 0.25), transparent 70%);
  filter: blur(4px);
  border-radius: 50% 60% 40% 70% / 70% 60% 50% 50%;
  z-index: -1;
}

/* Shape variation */
.slime:nth-child(2n) {
  transform: rotate(2deg) scaleX(1.5) scaleY(0.85) skewX(3deg);
  border-radius: 50% 70% 60% 40% / 60% 40% 70% 50%;
}
.slime:nth-child(3n) {
  transform: rotate(-5deg) scaleX(1.5) scaleY(0.8) skewX(-2deg);
  border-radius: 65% 45% 55% 75% / 75% 55% 65% 50%;
}

/* Pulse animation */
@keyframes stretchPulse {
  0%, 100% {
    transform: scaleX(1.2) scaleY(1.2) skewX(-5deg);
  }
  50% {
    transform: scaleX(1.4) scaleY(0.9) skewX(-2deg);
  }
}


.saltshaker-active {
  cursor: url('/images/saltshaker/Unshaken.png'), auto;
}

.saltshaker-shake-down {
  cursor: url('/images/saltshaker/Shake-1.png'), auto;
}
.saltshaker-shake-up {
  cursor: url('/images/saltshaker/Shake-2.png'), auto;
}
