.explosion {
  border-radius: 50%;
  background-color: rgba(255, 153, 0, 0.8);
  transform: scale(0);
  z-index: 100;
  pointer-events: none;
}

.explode-animation {
  animation: explode 0.5s ease-out forwards;
}

@keyframes explode {
  0% {
    transform: scale(0.1);
    background-color: rgba(255, 255, 0, 0.9);
    box-shadow: 0 0 20px 10px rgba(255, 200, 0, 0.8);
  }
  25% {
    background-color: rgba(255, 153, 0, 0.8);
    box-shadow: 0 0 30px 15px rgba(255, 153, 0, 0.8);
  }
  50% {
    background-color: rgba(255, 100, 0, 0.7);
    box-shadow: 0 0 40px 20px rgba(255, 100, 0, 0.7);
  }
  75% {
    background-color: rgba(255, 50, 0, 0.6);
    box-shadow: 0 0 50px 25px rgba(255, 50, 0, 0.6);
  }
  100% {
    transform: scale(1.5);
    background-color: rgba(255, 0, 0, 0);
    box-shadow: 0 0 60px 30px rgba(255, 0, 0, 0);
  }
}