@charset "UTF-8";
body {
  padding: 0;
  margin: 0;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
}

* {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.container {
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}

.bg {
  width: 100%;
  pointer-events: none;
}

.second {
  font-size: 28px;
  font-weight: 900;
  position: absolute;
  top: 15.2%;
  right: 16%;
  margin: 0;
}

@media screen and (max-width: 575px) {
  .second {
    font-size: 22px;
  }
}

@media screen and (max-width: 450px) {
  .second {
    font-size: 18px;
  }
}

@media screen and (max-width: 350px) {
  .second {
    font-size: 14px;
  }
}

.balloon {
  width: 80%;
  padding-bottom: 80%;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  top: 10.2%;
  transform: translateX(-50%);
}

.balloon.rotate {
  -webkit-animation: balloonRotate 3s linear infinite;
          animation: balloonRotate 3s linear infinite;
}

.balloon_item {
  position: absolute;
  width: 45%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.balloon_item > img.static {
  width: 100%;
}

.balloon_item > img.animation {
  width: 115%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  display: none;
}

.balloon_item.crack > img.static {
  opacity: 0;
}

.balloon_item.crack > img.animation {
  display: block;
  -webkit-animation: boom 2s linear forwards;
          animation: boom 2s linear forwards;
}

.balloon_1 {
  -webkit-transform: translate(-50%, -105%) rotate(0deg);
          transform: translate(-50%, -105%) rotate(0deg);
}

.balloon_2 {
  -webkit-transform: translate(-50%, -50%) rotate(60deg) translateY(-55%);
          transform: translate(-50%, -50%) rotate(60deg) translateY(-55%);
}

.balloon_3 {
  -webkit-transform: translate(-50%, -50%) rotate(120deg) translateY(-55%);
          transform: translate(-50%, -50%) rotate(120deg) translateY(-55%);
}

.balloon_4 {
  -webkit-transform: translate(-50%, 5%) rotate(180deg);
          transform: translate(-50%, 5%) rotate(180deg);
}

.balloon_5 {
  -webkit-transform: translate(-50%, -50%) rotate(240deg) translateY(-55%);
          transform: translate(-50%, -50%) rotate(240deg) translateY(-55%);
}

.balloon_6 {
  -webkit-transform: translate(-50%, -50%) rotate(300deg) translateY(-55%);
          transform: translate(-50%, -50%) rotate(300deg) translateY(-55%);
}

@-webkit-keyframes boom {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes boom {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes balloonRotate {
  0% {
    -webkit-transform: translateX(-50%) rotate(0deg);
            transform: translateX(-50%) rotate(0deg);
  }
  33.3333% {
    -webkit-transform: translateX(-50%) rotate(120deg);
            transform: translateX(-50%) rotate(120deg);
  }
  66.6666% {
    -webkit-transform: translateX(-50%) rotate(240deg);
            transform: translateX(-50%) rotate(240deg);
  }
  100% {
    -webkit-transform: translateX(-50%) rotate(360deg);
            transform: translateX(-50%) rotate(360deg);
  }
}

@keyframes balloonRotate {
  0% {
    -webkit-transform: translateX(-50%) rotate(0deg);
            transform: translateX(-50%) rotate(0deg);
  }
  33.3333% {
    -webkit-transform: translateX(-50%) rotate(120deg);
            transform: translateX(-50%) rotate(120deg);
  }
  66.6666% {
    -webkit-transform: translateX(-50%) rotate(240deg);
            transform: translateX(-50%) rotate(240deg);
  }
  100% {
    -webkit-transform: translateX(-50%) rotate(360deg);
            transform: translateX(-50%) rotate(360deg);
  }
}

.dart {
  position: absolute;
  width: 4.5%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  top: 29.5%;
}

.dart > img {
  width: 100%;
}

.dart::before {
  position: absolute;
  content: "Miss";
  font-size: 20px;
  font-weight: 700;
  top: 0;
  left: calc(110%);
  opacity: 0;
}

.dart.miss::before {
  -webkit-animation: miss 0.5s linear;
          animation: miss 0.5s linear;
}

@-webkit-keyframes miss {
  0% {
    opacity: 0;
  }
  33.3333% {
    opacity: 1;
  }
  66.6666% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes miss {
  0% {
    opacity: 0;
  }
  33.3333% {
    opacity: 1;
  }
  66.6666% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.shot {
  width: 30%;
  padding-bottom: 30%;
  position: absolute;
  top: 28.5%;
  right: 5%;
  cursor: pointer;
}

.shot > img {
  position: absolute;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  top: 0%;
  left: 0%;
}

.shot > img.active {
  opacity: 0;
}

.times {
  position: absolute;
  width: 7.5%;
  left: 7%;
  top: 13.2%;
}

.times_item {
  width: 100%;
}

.times_item > img {
  width: 100%;
}

.times_item > img.used {
  display: none;
}

.times_item.usedd > img.notused {
  display: none;
}

.times_item.usedd > img.used {
  display: block;
}

.start {
  position: absolute;
  width: 95%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  top: 14.5%;
}

.start_bg {
  width: 100%;
}

.start_btn {
  position: absolute;
  width: 60%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  top: 45%;
}

.gameBox, .sucess, .fail {
  position: absolute;
  width: 100%;
  background-color: #fff;
  opacity: 0;
  height: 22.5%;
  left: 0;
  top: 6%;
  z-index: 35;
}

.fail {
  background-color: transparent;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  opacity: 1;
  display: none;
}

.fail_bg {
  width: 90%;
}

.fail_btn {
  position: absolute;
  width: 66%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  bottom: 23%;
}

.sucess {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  display: none;
  opacity: 1;
  background-color: transparent;
}

.firework {
  width: 90%;
}
/*# sourceMappingURL=style.css.map */