.flower_yellow3 {
  position: absolute;
  top: 24%;
  left: -7%;
  width: 4%;
  height: auto;
  animation: left-right 4.5s linear infinite;
  transition: all 1s;
}

.flower_yellow2 {
  position: absolute;
  top: 37%;
  left: 75%;
  width: 3%;
  height: auto;
  pointer-events: none;
  animation: rotateel 4s linear infinite;
}

.flower_red2 {
  position: absolute;
  top: 4%;
  right: -10%;
  width: 5%;
  height: auto;
  animation: right-left 5s linear infinite;
  transition: all 1s;
  z-index: 100;
}

.flower_green2 {
  position: absolute;
  top: 20%;
  right: 2%;
  width: 4%;
  height: auto;
  animation: rotateel 4s linear infinite;
}

@keyframes left-right {
  from {
    top: 24%;
    left: -7%;
    transform: rotate(0deg);
  }
  to {
    top: 100%;
    left: 100%;
    transform: rotate(660deg);
  }
}
@keyframes right-left {
  from {
    top: 4%;
    right: -10%;
    transform: rotate(0deg);
  }
  to {
    top: 100%;
    right: 100%;
    transform: rotate(720deg);
  }
}
@keyframes rotateel {
  from {
    transform: rotate(0deg);
    opacity: 0;
    transition: fade-in 1 ease;
  }
  to {
    transform: rotate(720deg);
    opacity: 1;
    transition: fade-out 1 ease;
  }
  from {
    transform: rotate(0deg);
    opacity: 0;
    transition: fade-in 1 ease;
  }
}

/* Initial hidden state */
#gameOverPopup.hidden {
  display: none;
}

/* Fade-in backdrop */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Pop-in popup */
@keyframes popIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
#gameOverPopup.exit {
  animation: fadeOut 0.4s ease-out;
}

.popup-container.exit {
  animation: popOut 0.4s ease-out;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes popOut {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.8);
    opacity: 0;
  }
}