.collision-area {
  position: fixed; 
  z-index: 1;
  bottom: 10em;
  left:0;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 50%;
  clip-path: polygon(0% 0%, 0% 100%, 45% 100%, 46% 0, 58% 0, 57% 100%, 45% 100%, 45% 100%, 100% 100%, 100% 0%);
}

.blood {
  visibility: hidden;
  width: 100%;
  height: 100%;
  background-image: url(/games/cascade-of-duty/images/soldier/blood.png);
  background-size: cover;
  transition: 0.5s;
}

.gun {
    display: none;
    position: fixed; 
    z-index: 1;
    bottom: 0em;
    left:0;
    left: 50%;
    transform: translateX(-50%);
    background-image: url(/games/cascade-of-duty/images/gun.png);
    background-size: cover;
    width: 70%;
    height: 70%;
    pointer-events: none;
    animation: shakeGun 0.2s cubic-bezier(.36,.07,.19,.97) both, shakeGun 0.2s cubic-bezier(.36,.07,.19,.97) both, shakeGun 0.2s cubic-bezier(.36,.07,.19,.97) both, shakeGun 0.2s cubic-bezier(.36,.07,.19,.97) both, shakeGun 0.2s cubic-bezier(.36,.07,.19,.97) both, shakeGun 0.2s cubic-bezier(.36,.07,.19,.97) both, shakeGun 0.2s cubic-bezier(.36,.07,.19,.97) both, shakeGun 0.2s cubic-bezier(.36,.07,.19,.97) both, shakeGun 0.2s cubic-bezier(.36,.07,.19,.97) both;
    animation-play-state: paused, paused, paused, paused, paused, paused, paused, paused, paused;
 }

 .bullet {
    position: absolute;
    display: block;
    height: 35em;
    width: 8em;
    top:0em;
    display: none;
    appearance: none;
 }

 .bullet:hover {
    cursor: crosshair;
 }

.room1 {
  animation: shake 0.2s cubic-bezier(.36,.07,.19,.97) both, shake 0.2s cubic-bezier(.36,.07,.19,.97) both, shake 0.2s cubic-bezier(.36,.07,.19,.97) both;
  animation-play-state: paused, paused, paused;
}

.room2 {
  animation: shake 0.2s cubic-bezier(.36,.07,.19,.97) both, shake 0.2s cubic-bezier(.36,.07,.19,.97) both, shake 0.2s cubic-bezier(.36,.07,.19,.97) both;
  animation-play-state: paused, paused, paused;
}

.room3 {
  animation: shake 0.2s cubic-bezier(.36,.07,.19,.97) both, shake 0.2s cubic-bezier(.36,.07,.19,.97) both, shake 0.2s cubic-bezier(.36,.07,.19,.97) both;
  animation-play-state: paused, paused, paused;
}

.blood:has(~.bullet:active) {
  visibility: visible;
}

.gun:has(~ .scene .room1 #bullet1:checked), .gun:has(~ .scene .room2 #bullet4:checked), .gun:has(~ .scene .room3 #bullet7:checked)  {
  animation-play-state: running, paused, paused;
}

.gun:has(~ .scene .room1 #bullet2:checked), .gun:has(~ .scene .room2 #bullet5:checked), .gun:has(~ .scene .room3 #bullet8:checked) {
  animation-play-state: paused, running, paused;
}

.gun:has(~ .scene .room1 #bullet3:checked), .gun:has(~ .scene .room2 #bullet6:checked), .gun:has(~ .scene .room3 #bullet9:checked) {
  animation-play-state: paused, paused, running;
}


.room1:has(#bullet1:checked), .room2:has(#bullet4:checked), .room3:has(#bullet7:checked) {
  animation-play-state: running, paused, paused;
}

.room1:has(#bullet2:checked), .room2:has(#bullet5:checked), .room3:has(#bullet8:checked) {
  animation-play-state: paused, running, paused;
}

.room1:has(#bullet3:checked), .room2:has(#bullet6:checked), .room3:has(#bullet9:checked) {
  animation-play-state: paused, paused, running;
}

.room1 .soldier1:has(#bullet3:checked), .room2 .soldier2:has(#bullet6:checked), .room3 .soldier3:has(#bullet9:checked) {
  visibility: hidden;
  pointer-events: none;
}

@keyframes shakeGun {
  10%, 90% {
    left: 51%;
  }
  
  20%, 80% {
    left: 49%;
  }

  30%, 50%, 70% {
    left: 51%;
  }

  40%, 60% {
    left: 50%;
  }
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-4px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(4px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-10px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(10px, 0, 0);
  }
}

 #bullet1:not(:checked), #bullet4:not(:checked), #bullet7:not(:checked) {
   display: block;
 }

 #bullet1:checked ~ .bullet1Sound, #bullet4:checked ~ .bullet4Sound, #bullet5:checked ~ .bullet5Sound, #bullet6:checked ~ .bullet6Sound, #bullet7:checked ~ .bullet7Sound, #bullet8:checked ~ .bullet8Sound, #bullet9:checked ~ .bullet9Sound {
    display: block;
 }

 #bullet1:checked, #bullet4:checked, #bullet7:checked {
   display: none !important;
 }

 .gun:has(.scene #bullet1:checked), .gun:has(.scene #bullet4:checked), .gun:has(.scene #bullet7:checked) {
   animation-play-state: running;
 }

 #bullet1:checked ~ #bullet2, #bullet4:checked ~ #bullet5, #bullet5:checked ~ #bullet6, #bullet6:checked ~ #bullet7, #bullet7:checked ~ #bullet8 {
   display: block;
 }

 #bullet2:checked ~ .bullet2Sound, #bullet5:checked ~ .bullet5Sound{
   display: block;
}

#bullet2:checked, #bullet5:checked {
  display: none !important;
}

#bullet2:checked ~ #bullet3, #bullet5:checked ~ #bullet6, #bullet8:checked ~ #bullet9 {
   display: block;
 }

 #bullet3:checked ~ .bullet3Sound, #bullet6:checked ~ .bullet6Sound, #bullet9:checked ~ .bullet9Sound {
   display: block;
}

#bullet3:checked, #bullet6:checked, #bullet9:checked {
  display: none !important;
}