@keyframes breathe {
  to {
    transform: scale(1.1);
  }
}
.preload-img {
  position: absolute;
  opacity: 0;
  z-index: -99;
  pointer-events: none;
}
.preload-img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
}

audio {
  z-index: -1;
  position: absolute;
  opacity: 0;
  top: 0;
  left: 0;
}

html, body, a:hover {
  cursor: none;
}

.cursor-aim {
  z-index: 99;
  pointer-events: none;
  position: absolute;
  width: 20%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.kv {
  position: relative;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
}
.kv .title {
  display: block;
  width: 65%;
  margin: auto;
  padding-top: 10%;
}
.kv .btn-start {
  display: block;
  width: 55%;
  margin: auto;
  margin-top: 10%;
  animation: breathe 1s infinite alternate;
}

.scene {
  display: none;
  position: relative;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
}
.scene .rule {
  z-index: 3;
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 75%;
}
.scene .scene-flex {
  z-index: 1;
  position: absolute;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5% 8%;
  width: 100%;
  top: 0;
  left: 0;
  font-size: 1.5rem;
  color: #FFF;
  -webkit-text-stroke: 0.4rem #331300;
  text-stroke: 0.4rem #331300;
  paint-order: stroke fill;
  white-space: nowrap;
  pointer-events: none;
}
.scene .scene-flex div {
  display: flex;
  justify-items: flex-start;
  align-items: center;
  gap: 0.75rem;
}
.scene .scene-flex div p {
  color: #faee00;
  font-size: 1.35em;
  margin-top: -0.1em;
  width: 2em;
}
.scene .aim {
  z-index: 3;
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}
.scene .aim .target-words {
  display: block;
  width: 20%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.scene .aim .aim-target {
  display: block;
  width: 40%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.scene .aim .aim-target.disabled {
  pointer-events: none;
}
.scene .aim .aim-target img {
  animation: breathe 1s infinite alternate;
}
.scene .start-countdown {
  z-index: 3;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-text-stroke: 0.8rem #331300;
  text-stroke: 0.8rem #331300;
  paint-order: stroke fill;
  font-size: 7rem;
  color: #faee00;
  text-align: center;
}
.scene .start-countdown p {
  display: none;
}
.scene .monster-block {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.scene .monster-block .position-tree {
  display: block;
  position: absolute;
  top: 5%;
  left: 65%;
  width: 35%;
  padding-top: 35%;
}
.scene .monster-block .position-lake {
  display: block;
  position: absolute;
  top: 37%;
  left: 40%;
  width: 20%;
  padding-top: 20%;
}
.scene .monster-block .position-back {
  display: block;
  position: absolute;
  top: 29%;
  left: 10%;
  width: 25%;
  padding-top: 25%;
}
.scene .monster-block .position-sky {
  display: block;
  position: absolute;
  top: 15%;
  left: 30%;
  width: 30%;
  padding-top: 30%;
}
.scene .monster-block .position-middle {
  display: block;
  position: absolute;
  top: 52%;
  left: 38%;
  width: 32%;
  padding-top: 32%;
}
.scene .monster-block .position-left {
  display: block;
  position: absolute;
  top: 47%;
  left: 8%;
  width: 27%;
  padding-top: 27%;
}
.scene .monster-block .position-right {
  display: block;
  position: absolute;
  top: 46%;
  left: 67%;
  width: 30%;
  padding-top: 30%;
}
.scene .monster-block .position-bottom {
  display: block;
  position: absolute;
  top: 62%;
  left: -12%;
  width: 40%;
  padding-top: 40%;
}
.scene .monster-block .monster {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: monster steps(2) 0.75s infinite;
  transition: opacity 0.25s 0.25s, transform 0.25s 0.25s;
  border-radius: 25%;
}
.scene .monster-block .monster.disabled {
  pointer-events: none;
  opacity: 0;
  transform: scale(0.75);
}
@keyframes monster {
  to {
    background-position: left 200% center;
  }
}
.scene .monster-block .monster-greenoil {
  background: url("../img/monster-greenoil.png") no-repeat left center;
  background-size: auto 100%;
}
.scene .monster-block .monster-monkey {
  background: url("../img/monster-monkey.png") no-repeat left center;
  background-size: auto 100%;
  animation-duration: 0.6s;
}
.scene .monster-block .monster-deer {
  background: url("../img/monster-deer.png") no-repeat left center;
  background-size: auto 100%;
  animation-duration: 1s;
}
.scene .monster-block .monster-fish {
  background: url("../img/monster-fish.png") no-repeat left center;
  background-size: auto 100%;
  animation-duration: 0.7s;
}
.scene .monster-block .monster-bear {
  background: url("../img/monster-bear.png") no-repeat left center;
  background-size: auto 100%;
  animation-duration: 0.8s;
}
.scene .monster-block .monster-purple {
  background: url("../img/monster-purple.png") no-repeat left center;
  background-size: auto 100%;
  animation-duration: 0.65s;
}
.scene .monster-block .monster-orange {
  background: url("../img/monster-orange.png") no-repeat left center;
  background-size: auto 100%;
  animation-duration: 0.75s;
}
.scene .monster-block .monster-blue {
  background: url("../img/monster-blue.png") no-repeat left center;
  background-size: auto 100%;
  animation-duration: 0.85s;
}
.scene .monster-block .monster-yellow {
  background: url("../img/monster-yellow.png") no-repeat left center;
  background-size: auto 100%;
  animation-duration: 0.9s;
}
.scene .monster-block .score-plus,
.scene .monster-block .score-minus {
  z-index: 1;
  pointer-events: none;
  display: block;
  position: absolute;
  top: 35%;
  left: 25%;
  width: 8rem;
  padding-top: 8rem;
  opacity: 0;
  animation: score 0.75s forwards;
}
.scene .monster-block .score-plus {
  background: url("../img/score-plus.png") no-repeat center center;
  background-size: contain;
}
.scene .monster-block .score-minus {
  background: url("../img/score-minus.png") no-repeat center center;
  background-size: contain;
}
@keyframes score {
  25%, 85% {
    opacity: 1;
    transform: translateY(-100%);
  }
  100% {
    opacity: 0;
    transform: translateY(-150%);
  }
}
.scene .monster-block .net {
  display: block;
  position: absolute;
  pointer-events: none;
  top: -35%;
  left: -6rem;
  width: 12rem;
  padding-top: 9rem;
  background: url("../img/net.png") no-repeat center center;
  background-size: contain;
  transform-origin: bottom left;
  animation: netleft 0.75s forwards;
}
@keyframes netleft {
  25% {
    opacity: 1;
    transform: rotate(25deg) translateX(15%);
  }
  100% {
    transform: rotate(25deg) translateX(15%);
    opacity: 0;
  }
}
.scene .monster-block .position-back .net,
.scene .monster-block .position-left .net {
  left: 16rem;
  transform: scale(-1, 1);
  animation: netright 0.75s forwards;
}
@keyframes netright {
  25% {
    opacity: 1;
    transform: rotate(-25deg) translateX(-15%) scale(-1, 1);
  }
  100% {
    transform: rotate(-25deg) translateX(-15%) scale(-1, 1);
    opacity: 0;
  }
}
.scene .net-all {
  display: block;
  position: absolute;
  pointer-events: none;
  width: 12rem;
  padding-top: 9rem;
  background: url("../img/net.png") no-repeat center center;
  background-size: contain;
  transform-origin: bottom left;
  opacity: 0;
  animation: netall 0.75s forwards;
}
@keyframes netall {
  25% {
    opacity: 1;
    transform: rotate(25deg) translateX(15%);
  }
  100% {
    transform: rotate(25deg) translateX(15%);
    opacity: 0;
  }
}
.scene .cheer-block {
  z-index: 1;
  position: absolute;
  pointer-events: none;
  width: 100%;
  height: 50%;
  bottom: 0;
  left: 0;
}
.scene .cheer-block .cheer-doll {
  display: none;
  position: absolute;
  width: 70%;
  bottom: 0;
  right: 3%;
}
.scene .cheer-block .words-plus,
.scene .cheer-block .words-minus {
  position: absolute;
  width: 25%;
  padding-top: 12%;
  bottom: 5%;
  left: 10%;
  animation: score 1.5s forwards;
}
.scene .cheer-block .words-plus {
  background: url("../img/words-plus.png") no-repeat center center;
  background-size: contain;
}
.scene .cheer-block .words-minus {
  background: url("../img/words-minus.png") no-repeat center center;
  background-size: contain;
}
.scene .time-up {
  display: none;
  z-index: 3;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
}
.scene .time-up img {
  transform: scale(0);
  animation: pop 0.25s forwards;
}
.scene .result {
  display: none;
  z-index: 3;
  position: absolute;
  width: 100%;
  height: 100%;
}
.scene .result > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.scene .result > div .score-title,
.scene .result > div .result-score {
  -webkit-text-stroke: 0.4rem #331300;
  text-stroke: 0.4rem #331300;
  paint-order: stroke fill;
  color: #FFF;
  font-size: 3rem;
}
.scene .result > div .result-score {
  font-size: 7rem;
  line-height: 6rem;
  color: #faee00;
  transform: scale(0);
  animation: pop 0.25s 0.25s forwards;
}
.scene .result > div > img {
  display: block;
  width: 75%;
  margin: 15% 0 8% 0;
  transform: scale(0);
  animation: pop 0.25s 0.5s forwards;
}
.scene .result > div .btn-index {
  display: block;
  width: 40%;
  animation: breathe 1s 1s infinite alternate;
}
@keyframes pop {
  to {
    transform: scale(1);
  }
}

.black {
  display: none;
  z-index: 3;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.75);
}/*# sourceMappingURL=index.css.map */