body {
  bottom: 0;
  left: 0;
  margin: 0;
  height: 100vh;
  overflow: hidden;
  position: relative;
  font-family: Arial, sans-serif;
  background: linear-gradient(to bottom, #87ceeb 0%, #b0e0ff 70%, #7cfc00 100%);
}

.scene {
  position: relative;
  height: 100dvh;
  overflow-y: hidden;
}

@media screen and (min-width: 1500px) {
  .scene {
    overflow-x: hidden;
  }
}

.ground {
  position: absolute;
  bottom: 0;
  width: 100%;
  min-width: 1700px;
  height: 80px;
  background: linear-gradient(to top, #228b22, #7cfc00);
  z-index: 1;
}

.stickman {
  position: absolute;
  bottom: 60px;
  left: 40px;
  width: 40px;
  height: 150px;
  z-index: 10;
  transition: bottom 0.2s linear;
}

.runner {
  width: 50px;
  transform: scale(0.55);
  bottom: 35px;
  left: 10px;
  z-index: -100;
}

.sun {
  position: absolute;
  top: 30px;
  right: 40px;
  width: 80px;
  height: 80px;
  background: radial-gradient(
    circle at center,
    #fff700 0%,
    #f7d600 60%,
    #f1b700 100%
  );
  border-radius: 50%;
  box-shadow: 0 0 30px 10px #fff700aa;
  z-index: 0;
}

.head {
  width: 30px;
  height: 30px;
  background: #000;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 5px;
}

.body {
  width: 4px;
  height: 60px;
  background: #000;
  position: absolute;
  top: 30px;
  left: 18px;
}

.arm,
.leg {
  width: 4px;
  height: 40px;
  background: #000;
  position: absolute;
  transform-origin: top center;
}

.arm.left {
  top: 30px;
  left: 18px;
  animation: swing-left 0.3s infinite alternate ease-in-out;
}

.arm.right {
  top: 30px;
  left: 18px;
  animation: swing-right 0.3s infinite alternate ease-in-out;
}

.leg.left {
  top: 90px;
  left: 18px;
  animation: swing-right 0.3s infinite alternate ease-in-out;
}

.leg.right {
  top: 90px;
  left: 18px;
  animation: swing-left 0.3s infinite alternate ease-in-out;
}

@keyframes swing-left {
  0% {
    transform: rotate(35deg);
  }
  100% {
    transform: rotate(-35deg);
  }
}

@keyframes swing-right {
  0% {
    transform: rotate(-35deg);
  }
  100% {
    transform: rotate(35deg);
  }
}

.hurdle {
  position: absolute;
  bottom: 80px;
  width: 100px;
  height: 90px;
  z-index: 15;
}

.bar {
  position: absolute;
  top: 14px;
  left: 0;
  width: 100%;
  height: 10px;
  background-color: #f39c12;
  border-radius: 4px;
}

.support-left,
.support-right {
  position: absolute;
  bottom: 0;
  width: 10px;
  background-color: grey;
  border-radius: 4px;
}

.support-left {
  left: 0;
}

.support-right {
  right: 0;
}

.ladder {
  position: absolute;
  bottom: 80px;
  width: 60px;
  height: 300px;
  z-index: 4;
}

.ladder::before,
.ladder::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 100%;
  background-color: #555;
  top: 0;
}

.ladder::before {
  left: 0;
}

.ladder::after {
  right: 0;
}

.ladder .rung {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #888;
}

.ladder .rung:nth-child(n) {
  bottom: calc(30px * var(--i));
}

.finish-line {
  position: absolute;
  bottom: 80px;
  width: 120px;
  height: 200px;
  z-index: 5;
}

.finish-line .pole {
  position: absolute;
  bottom: 0;
  width: 8px;
  height: 200px;
  background-color: #333;
}

.finish-line .pole.left {
  left: 0;
}

.finish-line .pole.right {
  right: 0;
}

.finish-line .banner {
  position: absolute;
  top: 10px;
  left: 8px;
  right: 8px;
  height: 40px;
  background: red;
  color: white;
  font-weight: bold;
  text-align: center;
  line-height: 40px;
  font-size: 18px;
  border-radius: 4px;
}

.confetti-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 100;
}

.confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  animation: confetti-fall linear forwards;
}

@keyframes confetti-fall {
  to {
    transform: translateY(100vh) rotateZ(720deg);
    opacity: 0;
  }
}

.thrower {
  position: absolute;
  bottom: 40px;
  left: 80px;
  width: 40px;
  height: 150px;
  z-index: 3;
  transform: scale(0.7);
}

.thrower .head,
.thrower .body,
.thrower .arm,
.thrower .leg {
  background: #000;
}

.thrower .arm.left,
.thrower .arm.right,
.thrower .leg.left,
.thrower .leg.right {
  animation: none !important;
}

.grenade {
  position: absolute;
  width: 10px;
  height: 10px;
  background: black;
  border-radius: 50%;
  z-index: 2;
}

.target {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 40px;
  background: radial-gradient(
    ellipse at center,
    red 40%,
    white 41%,
    white 90%,
    black 91%
  );
  border-radius: 50% / 50%;
  box-shadow: inset 0 8px 15px rgba(0, 0, 0, 0.5), 0 5px 10px rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.sniper-stickman {
  position: absolute;
  bottom: 30px;
  width: 90px;
  height: 80px;
  z-index: -4;
}

.sniper-stickman .head {
  width: 20px;
  height: 20px;
  background: #000;
  border-radius: 50%;
  position: absolute;
  top: -16px;
  left: 75px;
}

.sniper-stickman .body {
  position: absolute;
  top: 9px;
  left: 40px;
  width: 45px;
  height: 6px;
  background: #000;
  border-radius: 3px;
  transform: rotate(-35deg);
}

.sniper-stickman .sniper-arm,
.sniper-stickman .sniper-leg {
  background: #000;
  position: absolute;
  animation: none !important;
}
.sniper-stickman .over-arm {
  top: 10px;
  left: 65px;
  width: 25px;
  height: 4px;
  transform: rotate(15deg);
  transform-origin: left center;
}

.sniper-stickman .under-arm {
  top: 17.5px;
  left: 87.5px;
  width: 22px;
  height: 4px;
  transform: rotate(-50deg);
  transform-origin: left center;
}

.sniper-stickman .sniper-leg.front {
  top: 22px;
  left: 22px;
  width: 25px;
  height: 5px;
  transform-origin: left center;
}

.sniper-stickman .rifle {
  position: absolute;
  top: -1.5px;
  left: 92.5px;
  width: 40px;
  height: 4px;
  background: #333;
  border-radius: 2px;
}

.bullet {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: black;
  bottom: 106px;
  left: 805px;
  opacity: 0;
  z-index: 10;
}

.shooting-target {
  position: absolute;
  bottom: 90px;
  left: 1200px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    black 10%,
    white 10%,
    white 20%,
    black 20%,
    black 30%,
    white 30%,
    white 40%,
    black 40%,
    black 50%,
    white 50%,
    white 60%,
    black 60%
  );
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.target-stand {
  position: absolute;
  bottom: 40px;
  left: 1218px;
  width: 4px;
  height: 50px;
  background: linear-gradient(to bottom, #8b5a2b, #deb887);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  z-index: 0;
}

@keyframes shoot {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(450px);
    opacity: 0;
  }
}