* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
}

img {
  display: block;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
}

body {
  font-family: "Impact", "Arial", sans-serif;
  margin: 0px;
  padding: 0px;
}

button {
  background: none;
  border: none;
  font-family: "Impact", "Arial", sans-serif;
}

.wrapper {
  position: absolute;
  width: 320px;
  height: 480px;
  top: 0;
  left: 0;
  overflow: hidden;
  cursor: pointer;
  opacity: 0;
}

.bg,
.border,
.in_sc,
.instr,
.gl_cn,
.win_gl,
.lose_bg,
.ls_fn,
.ls_lp,
.ls_or {
  position: absolute;
  width: 320px;
  height: 480px;
  top: 0;
  left: 0;
  pointer-events: none;
}

.bg {
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(assets/bg-finish.png);
  background-size: cover;
}

.sunbg {
  position: absolute;
  width: 320px;
  height: 30px;
  left: 0;
  top: 0;
  background-position: 50% 0;
  background-size: cover;
  overflow: hidden;
  opacity: 0;
}

.game_cn,
.track {
  position: absolute;
  width: 320px;
  height: 480px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.track {
  background-repeat: no-repeat;
  background-position: top 30% center;
  background-size: cover;
}

.game_cn {
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(assets/lose_bg.png);
}

.fanhit {
  position: absolute;
  width: 100px;
  height: 140px;
  bottom: 10px;
  left: 20px;
  z-index: 2;
  transition: 0.1s;
}

.fanhit.skew-l .target-inner {
  transform: scaleY(0.65) skewX(-15deg);
}
.fanhit.skew-r .target-inner {
  transform: scaleY(0.65) skewX(15deg);
}

.target {
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0px;
  left: 0px;
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: contain;
  background-image: url(assets/target.png);
}
.target-inner {
  position: absolute;
  width: 100%;
  height: 150px;
  bottom: -15px;
  left: 0px;
  transform: scaleY(0.65) skewX(0deg);
  z-index: 10;
  touch-action: none;
  transition: 0.1s;
}

.fm_inst,
.fm_inst2,
.fm_inst3,
.fm_inst4,
.fm_inst5,
.em_inst,
.bn_inst {
  position: absolute;
  width: 100px;
  height: 132px;
  top: 0;
  left: 0;
  background-size: 100% auto;
}

.spl {
  position: absolute;
  width: 120px;
  height: 120px;
  bottom: 120px;
  left: 0px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.spl.wb_1 {
  background-image: url(assets/wb_1.png);
}
.spl.wb_2 {
  background-image: url(assets/wb_2.png);
}
.spl.wb_3 {
  background-image: url(assets/wb_3.png);
}
.spl.wb_4 {
  background-image: url(assets/wb_4.png);
}

.em_inst {
  opacity: 0;
}

.score {
  position: absolute;
  width: 34px;
  height: 22px;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 15px;
  font-family: "Impact", "Arial", sans-serif;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  line-height: 20px;
  color: #08efd1;
  z-index: 99;
  /* text-shadow:
   -1px -1px 0 #ffffff,
    1px -1px 0 #ffffff,
    -1px 1px 0 #ffffff,
     1px 1px 0 #ffffff; */
  /* background-color: #ccc; */
}
.text-info {
  padding: 5px 20px;
  text-align: center;
  position: absolute;
  width: 100%;
  left: 0;
  top: 80px;
  font-family: "Impact", "Arial", sans-serif;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  line-height: 28px;
  color: #08efd1;
  z-index: 99;
  /* text-shadow:
   -1px -1px 0 #ffffff,
    1px -1px 0 #ffffff,
    -1px 1px 0 #ffffff,
     1px 1px 0 #ffffff; */
  opacity: 0;
}

.logo {
  position: absolute;
  top: 15px;
  left: 50%;
  margin-left: -83px;
}

.side-bg {
  position: absolute;
  top: 0;
  left: 0;
}

/* .track{
    background: none!important;
} */
.fscr {
  background: url("assets/fscr.png") no-repeat center;
  position: absolute;
  z-index: 99;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
}

.icon_0 {
  background-image: url("assets/fm_inst1.png") !important;
}
.icon_1 {
  background-image: url("assets/fm_inst2.png") !important;
}

.icon_2 {
  background-image: url("assets/fm_inst3.png") !important;
}

.icon_3 {
  background-image: url("assets/fm_inst4.png") !important;
}

.icon_4 {
  background-image: url("assets/fm_inst1.png") !important;
}

.icon_5 {
  background-image: url("assets/fm_inst2.png") !important;
}

.em_inst {
  background-image: url("assets/em_inst.png") !important;
}

/* fire animation */
.fire {
  position: absolute;
  z-index: -1;
  width: 75px;
  height: auto;
  bottom: 40px;
  left: 58%;
  transform-origin: center bottom;
  transform: rotate(180deg) scaleY(0.5);
}
.flame {
  animation-name: flamefly;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  opacity: 0;
  transform-origin: 50% 50% 0;
}

.flame.one {
  animation-delay: 0.25s;
  animation-duration: 0.75s;
}

.flame3.two {
  animation-duration: 1.25s;
  animation-delay: 0.25s;
}

.flame-main {
  animation-name: flameWobble;
  animation-duration: 0.75s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.flame-main.one {
  animation-duration: 1s;
  animation-delay: 0.25s;
}

.flame-main.two {
  animation-duration: 0.75s;
  animation-delay: 0.5s;
}

.flame-main.three {
  animation-duration: 0.5s;
  animation-delay: 0.75s;
}

.flame-main.four {
  animation-duration: 0.8s;
  animation-delay: 1s;
}

.flame-main.five {
  animation-duration: 0.65s;
  animation-delay: 1.25s;
}

@keyframes flameWobble {
  50% {
    transform: scale(1, 1.2) translate(0, -30px) rotate(-2deg);
  }
}

@keyframes flamefly {
  0% {
    transform: translate(0) rotate(180deg);
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: translate(-20px, -100px) rotate(180deg);
    opacity: 0;
  }
}

/* light */
.light-inner {
  position: absolute;
  width: 100px;
  height: 100px;
  z-index: 1;
  bottom: 54px;
  left: 18%;
  transform: rotate(14deg) scaleY(1.25);
}
.lightning {
}
.lightning-path {
  stroke: transparent;
  filter: drop-shadow(0px 4px 8px rgba(255, 255, 255, 0.75));
  stroke-width: 2;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: none;
}
.light-run .lightning-path {
  animation: lightAnim 0.5s linear;
}

@keyframes lightAnim {
  0% {
    stroke: transparent;
    stroke-dashoffset: 200;
    stroke-width: 2;
  }
  20% {
    stroke: #08efd1;
  }
  40% {
    stroke-dashoffset: 400;
    stroke-width: 7;
    stroke: red;
  }
  60% {
    stroke-width: 3;
  }
  80% {
    stroke-dashoffset: 600;
    stroke-width: 7;
    stroke: #08efd1;
  }
  100% {
    stroke-dashoffset: 600;
    stroke: transparent;
    stroke-width: 2;
  }
}

/* music */
.music {
  position: absolute;
  top: 30px;
  left: 15px;
  width: auto;
  z-index: 999;
}
.music.music-second {
  left: auto;
  right: 15px;
}

.now.music .bar {
  display: inline-block;
  position: relative;
  margin-right: 1px;
  width: 10px;
  height: 1px;
  overflow: hidden;
  background: linear-gradient(to bottom, #07efd1, #396555);
  color: transparent;
  animation-name: pulseMusic;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
.paused.music .bar {
  /* animation-iteration-count: 1; */
  animation: none;
}
.n1 {
  animation-delay: 0.5s;
}
.n2 {
  animation-delay: 0.2s;
}
.n3 {
  animation-delay: 1.2s;
}
.n4 {
  animation-delay: 0.9s;
}
.n5 {
  animation-delay: 2.3s;
}
.n6 {
  animation-delay: 1.3s;
}
.n7 {
  animation-delay: 3.1s;
}
.n8 {
  animation-delay: 1.9s;
}
@keyframes pulseMusic {
  0% {
    height: 1px;
    margin-top: 0;
  }
  10% {
    height: 20px;
    margin-top: -20px;
  }
  50% {
    height: 10px;
    margin-top: -10px;
  }
  60% {
    height: 15px;
    margin-top: -15px;
  }
  80% {
    height: 40px;
    margin-top: -40px;
  }
  100% {
    height: 1px;
    margin-top: 0;
  }
}