#combat-container {
  font-family: "Merriweather", serif;
  font-size: 1.1em;
  padding: 10px;
  margin: 10px;
  box-sizing: border-box;
  border-radius: 10px;
  position: absolute;
  bottom: 0;
  z-index: 100;
  width: 100vw;
  max-width: 1015px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-around;
  color: white;
}
#image-container {
  position: absolute;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  z-index: 0;
}
#image {
  min-width: 200px;
  max-width: 100vw;
  max-height: 100vh;
}
.move-option {
  width: 220px;
  height: 45px;
  margin: 2px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #0a0a0a;
  color: white;
  border-radius: 6px;

  font-size: 1.2rem;
  letter-spacing: 2px;

  cursor: pointer;
  border: none;

  transition:
    background 0.15s,
    transform 0.1s,
    border-color 0.15s;
}

.move-option:hover {
  background: rgb(134, 20, 44);
}

.move-option:active {
  transform: translateY(0);
}
#damage-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  box-shadow: inset 0 0 50px rgba(255, 0, 0, 0);
  transition: box-shadow 1s ease-out;
  z-index: 9999;
}
#damage-overlay.damage-hit {
  background: rgba(255, 0, 0, 0.4);
  box-shadow:
    inset 0 0 100px rgba(0, 0, 0, 0.8),
    0 0 50px red;
  backdrop-filter: saturate(2) brightness(1.5) blur(2px);
  animation: 0.4s;
}
.heartbeat {
  animation: heart-logic 3s ease-in-out infinite;
}
@keyframes heart-logic {
  0% {
    box-shadow: inset 0 0 0px rgba(255, 0, 150, 0);
    backdrop-filter: blur(0px) brightness(1);
    transform: scale(1);
  }
  10% {
    box-shadow: inset 0 0 100px rgba(255, 0, 150, 0.7);
    backdrop-filter: blur(0px) brightness(0.8);
    transform: scale(1.01);
  }
  15% {
    box-shadow: inset 0 0 40px rgba(255, 0, 150, 0.3);
  }
  25% {
    box-shadow: inset 0 0 250px rgba(255, 0, 150, 0.9);
    backdrop-filter: blur(1px) brightness(0.6);
    transform: scale(1.03);
  }
  50% {
    box-shadow: inset 0 0 0px rgba(255, 0, 150, 0);
    backdrop-filter: blur(0px) brightness(1);
    transform: scale(1);
  }
  100% {
    box-shadow: inset 0 0 0px rgba(255, 0, 150, 0);
  }
}
#damage-overlay.heal-flash {
  box-shadow:
    inset 0 0 150px rgba(0, 255, 100, 0.8),
    0 0 50px rgba(0, 255, 100, 0.5);
  backdrop-filter: brightness(1.3) saturate(2) blur(1px);
  animation: heal-impact 0.5s ease-out forwards;
}
@keyframes heal-impact {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
#damage-overlay.cum {
  background: white;
  opacity: 0;
  pointer-events: none;
  z-index: 10000;
  box-shadow: inset 0 0 0vw 0vw rgba(255, 255, 255, 0.649);
  animation: climax 3s;
}
@keyframes climax {
  0% {
    opacity: 0;
    backdrop-filter: saturate(1) brightness(1) blur(0px);
  }
  15% {
    opacity: 0.7;
    backdrop-filter: saturate(3) brightness(1.5) blur(2px);
  }
  25% {
    opacity: 0.1;
  }
  40% {
    opacity: 0.9;
    backdrop-filter: saturate(5) brightness(2) blur(5px);
  }
  55% {
    opacity: 0.2;
  }
  75% {
    opacity: 1;
    backdrop-filter: saturate(10) brightness(5) blur(10px);
    box-shadow: inset 0 0 100vw 50vw rgba(255, 255, 255, 0.649);
  }
  88% {
    opacity: 1;
    background: rgba(255, 255, 255, 0.649);
  }
  100% {
    opacity: 0.2;
  }
}

@media (max-height: 500px) {
  #image {
    width: 55%;
  }
  .move-option {
    width: 150px;
    font-size: 1em;
  }
}