html,
body {
  overflow: hidden;
  user-select: none;
  width: 100%;
  height: 100%;
}

.fps {
  position: absolute;
  top: 0;
  left: 0.25rem;
  font-size: 0.75rem;
  z-index: 999;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.container > .inner {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}
.view {
  background: #fff;
  display: none;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: 100%;
  height: 100%;
}
.subview {
  background: #fff;
  display: none;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: 100%;
  height: 100%;
  z-index: 300;
}
.view .menu {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 5%;
  left: 0;
  gap: 5px;
  width: 100%;
}
.subview .menu {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 5%;
  left: 0;
  gap: 5px;
  width: 100%;
}

/**
Transition
*/
.view.over-layer {
  animation: open-view 750ms linear 300ms;
  animation-fill-mode: forwards;
  clip-path: circle(0% at center);
  display: flex;
  z-index: 200;
}
.subview.over-layer {
  animation: fadeIn 300ms linear;
  animation-fill-mode: forwards;
  display: flex;
  z-index: 300;
}
.view.under-layer {
  display: flex;
  z-index: 99;
}
.view.under-layer:after {
  animation: open-view 750ms;
  animation-fill-mode: forwards;
  /* background: #ff8a00; */
  background: #ffb866;
  clip-path: circle(0% at center);
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 150;
}
.loading-view {
  display: flex;
  z-index: 1;
}

@keyframes open-view {
  0% {
    clip-path: circle(0% at center);
  }
  100% {
    clip-path: circle(100% at center);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/**
Button
*/
.btn {
  background: url(../img/btns.png) no-repeat;
  background-size: 300% 200%;
  border: none;
  display: inline-block;
  padding-top: 35%;
  width: 35%;
}

.newbtn {
  flex: 1;
  color: white;
  font-weight: 700;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 2rem;
  text-shadow: 0px 1px 2px black;
  display: grid;
  place-items: center;
  border: 6px solid white;
  border-radius: 0.5rem;
  height: 175px;
}

.btn-select {
  background-color: rgb(230 133 17 / 86%);
}
.btn-howto {
  background-color: rgb(1 116 72 / 72%);
}
.btn-settings {
  background-color: rgb(74 74 239 / 76%);
}
.btn-close {
  background-color: rgba(21, 169, 39, 0.76);
}
.btn-back {
  background-position: 100% 0;
}
.btn-next {
  background-position: 0 100%;
}
.btn-end {
  background-position: 50% 100%;
}
.btn-reload {
  background-position: 100% 100%;
}

/**
Mode Button
*/
.btn-play-easy,
.btn-play-normal,
.btn-play-hard {
  background: url(../img/btn_mode.png) no-repeat;
  background-size: 100% 300%;
  border: none;
  display: inline-block;
  padding-top: 24.44%;
  width: 71.66%;
}
.btn-play-easy {
  background-position: 0 0;
}
.btn-play-normal {
  background-position: 0 50%;
}
.btn-play-hard {
  background-position: 0 100%;
}

/**
Number
*/

.numbers {
  font-family: Oswald, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
}

/**
Score Number
*/
.score .numbers {
  filter: drop-shadow(-4px 3px 1px rgba(0, 0, 0, 0.3));
  font-size: 2rem;
  color: white;
}


/**
Combo Effect
*/
.combo-effect {
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.combo-effect > * {
  opacity: 0;
  position: absolute;
  top: 0;
  transition: opacity 500ms;
  width: 100%;
  height: 100%;
}
.combo-effect > *:before,
.combo-effect > *:after {
  background-repeat: no-repeat;
  background-size: 100%;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  transition: all 500ms;
  width: 100%;
  height: 100%;
}
.combo-effect > *:before {
  animation: orchestra-motion 500ms ease-in-out;
  animation-iteration-count: infinite;
}
.combo-effect > *:after {
  background-position: center;
  background-size: cover;
  animation: light-motion 1s linear;
  animation-iteration-count: infinite;
  opacity: 0.2;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  transform-origin: bottom center;
  width: 120%;
  height: 130%;
}
.combo-effect .level1:before {
  background-image: url(../img/orchestra_lower.png);
  top: 21%;
  z-index: 3;
}
.combo-effect .level2:before {
  animation-delay: 165ms;
  background-image: url(../img/orchestra_middle.png);
  top: 7%;
  z-index: 2;
}
.combo-effect .level3:before {
  animation-delay: 330ms;
  background-image: url(../img/orchestra_upper.png);
  z-index: 1;
}
.combo-effect .level2:after {
  animation-direction: alternate;
  background-image: url(../img/light_under.png);
  z-index: 2;
}
.combo-effect .level3:after {
  animation-direction: alternate-reverse;
  background-image: url(../img/light_top.png);
  z-index: 1;
}
.play-view[data-combo-gauge="1"] .combo-effect .level1 {
  opacity: 1;
}
.play-view[data-combo-gauge="2"] .combo-effect .level1,
.play-view[data-combo-gauge="2"] .combo-effect .level2 {
  opacity: 1;
}
.play-view[data-combo-gauge="3"] .combo-effect .level1,
.play-view[data-combo-gauge="3"] .combo-effect .level2,
.play-view[data-combo-gauge="3"] .combo-effect .level3 {
  opacity: 1;
}

@keyframes orchestra-motion {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -1%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes light-motion {
  0% {
    transform: translate3d(-50%, -50%, 0) rotate(3deg);
  }
  100% {
    transform: translate3d(-50%, -50%, 0) rotate(-3deg);
  }
}

/**
Judge Text
*/
.judge-text {
  animation: judge-text-motion 1.5s;
  animation-fill-mode: forwards;
  background: url(../img/judge_text.png) center/cover;
  background-size: 100% 300%;
}
.judge-text:before {
  content: "";
  display: block;
  padding-top: 37.24%;
}
.judge-text[data-text="perfect"] {
  background-position: 50% 0;
}
.judge-text[data-text="good"] {
  background-position: 50% 50%;
}
.judge-text[data-text="miss"] {
  background-position: 50% 100%;
}

@keyframes judge-text-motion {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 100%;
  }
  80% {
    opacity: 100%;
  }
  100% {
    opacity: 0;
  }
}

/**
Judge Effect
*/
.judge-effect {
  animation: judge-effect-motion 1.5s;
  animation-fill-mode: forwards;
  background: url(../img/judge_effect.png) center/cover;
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}

@keyframes judge-effect-motion {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
  }
  20% {
    opacity: 100%;
    transform: translate(-50%, -50%) scale(1.6);
  }
  80% {
    opacity: 100%;
    transform: translate(-50%, -50%) scale(1.6);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.6);
  }
}

/**
Lyrics
*/
.lyrics {
  background: rgba(18, 79, 96, 0.8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  position: absolute;
  top: 19.8%;
  left: 0;
  width: 100%;
  height: 6.14%;
}
.lyrics:before,
.lyrics:after {
  background: #75d1f8;
  content: "";
  display: block;
  padding-top: 0.92%;
  width: 100%;
}
.lyrics-text {
  background-position-x: 50%;
  background-repeat: no-repeat;
  background-size: 100%;
  /* flex: 1; */
  padding-top: 8.2875%;
  position: relative;
  left: 4%;
  transition: background-position-y 500ms;
  width: 85%;
}
/* .lyrics:before {
  background: red;
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 75%;
  width: 100%;
  height: 1px;
} */
.play-view[data-mode="easy"] .lyrics-text {
  background-image: url(../img/lyrics_easy.png?v=2022062302);
}
.play-view[data-mode="normal"] .lyrics-text {
  background-image: url(../img/lyrics_normal.png?v=2022062302);
}
.play-view[data-mode="hard"] .lyrics-text {
  background-image: url(../img/lyrics_hard.png?v=2022062302);
}

/**
Loading View
*/
.loading-view {
  background: rgb(255, 242, 239);
  background: -moz-linear-gradient(
    0deg,
    rgba(255, 242, 239, 1) 0%,
    rgba(212, 212, 212, 1) 100%
  );
  background: -webkit-linear-gradient(
    0deg,
    rgba(255, 242, 239, 1) 0%,
    rgba(212, 212, 212, 1) 100%
  );
  background: linear-gradient(
    0deg,
    rgba(255, 242, 239, 1) 0%,
    rgba(212, 212, 212, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fff2ef",endColorstr="#d4d4d4",GradientType=1);
  display: block;
}
.loading-view.hide {
  display: none;
}
.loading-view:before {
  background: url(../img/loading_text.png) center/cover no-repeat;
  content: "";
  display: block;
  opacity: 0;
  position: relative;
  transition: opacity 1s;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.loading-view .indicator {
  animation: 1.5s identifier linear infinite;
  padding-top: 45%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -73%);
  width: 45%;
}
.loading-view .indicator:before {
  border-radius: 50%;
  border: 1.5rem solid #ff8a00;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.loading-view .indicator:after {
  background: #ff8a00;
  border-radius: 50%;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -25%);
  width: 3.5rem;
  height: 3.5rem;
}
.loading-view.fade:before {
  opacity: 1;
}
.dialog-reload {
  background: url(../img/bg_reload.png) center/cover no-repeat;
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 200;
}
.dialog-reload.show {
  display: block;
}
.dialog-reload .menu {
  top: 50%;
  bottom: auto;
  transform: translate(0, 40%);
}

@keyframes identifier {
  0% {
    transform: translate(-50%, -73%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -73%) rotate(359.9deg);
  }
}

/**
Title View
*/
.title-view {
  background: url(../img/bg_title.png) center/cover;
}

/**
Howto View
*/
.howto-view {
  background: url(../img/bg_howto.png) center/cover;
}

.settings-view {
  background: url(../img/bg_play_easy.png) center/cover;
  flex-direction: column;
  align-items: center;
}

.change-keybinds-view {
  background-color: rgba(0, 0, 0, 0.3);
}
.change-menu {
  display: none;
  width: 100%;
  height: 6rem;
  text-align: center;
  position: fixed;
  z-index: 400;
  border: 5px solid black;
  background: green;
  top: 50%;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-family: 700;
  font-size: 3rem;
  transform: translateY(-50%);
}
.change-keybinds-inner {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.change-keybinds-keybinds {
  background: url(../img/btn_judge.png) center;
  position: relative;
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 90px;
  padding: 0 4%;
}
.change-keybinds-keybinds > * {
  position: relative;
  width: 17.5%;
  cursor: pointer;
}
.change-keybinds-keybinds > * > * {
  pointer-events: none;
}
.change-keybinds-keybinds .judge-keybind {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  color: white;
  opacity: 0.5;
  font-size: 3rem;
}
.absolute {
  position: absolute;
}

.settings {
  width: 90%;
  display: flex;
  flex-direction: column;
  padding-top: 3rem;
  gap: 1rem;
}

.flex-0 {
  flex: 0;
}

/**
Select View
*/
.select-view {
  background: url(../img/bg_select.png) center/cover;
}
.select-mode {
  display: flex;
  align-items: center;
  flex-direction: column;
  position: absolute;
  top: 39%;
  width: 100%;
}
.select-mode .btn + .btn {
  margin-left: 0;
  margin-top: 5%;
}

/**
Play View
*/
.play-view {
  background-repeat: no-repeat;
  background-size: cover;
  bottom: 0;
}
.play-view[data-mode="easy"] {
  background-image: url(../img/bg_play_easy.png);
}
.play-view[data-mode="normal"] {
  background-image: url(../img/bg_play_normal.png);
}
.play-view[data-mode="hard"] {
  background-image: url(../img/bg_play_hard.png);
}
.lanes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: 0.5;
  overflow: hidden;
  padding: 0px 19%;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: rotateX(45deg) translateX(-50%);
  transform-origin: center bottom;
  width: 156%;
  height: 200%;
}
.lanes > * {
  position: relative;
  width: 20%;
  height: 100%;
}
.judge-area {
  display: flex;
  padding: 0 12%;
  position: absolute;
  left: 0;
  /* bottom: 1.9058732010890704%;
  height: 2.2559315441462466%; */
  bottom: 2.905873%;
  height: 3.355932%;
  width: 100%;
}
.judge-area > * {
  width: 20%;
  height: 100%;
}
.note {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
}
.note:before {
  border-radius: 50%;
  background: yellow;
  content: "";
  display: block;
  padding-top: 33.33%;
  position: absolute;
  transform: translateY(-50%);
  width: 100%;
}
.btn-judge {
  background: url(../img/btn_judge.png) center/cover;
  display: flex;
  justify-content: space-between;
  padding: 0 4%;
  position: absolute;
  bottom: 10.15%;
  width: 100%;
}
.btn-judge > * {
  padding-top: 17.5%;
  position: relative;
  width: 17.5%;
}
.btn-judge > *::after {
  background: white;
  position: absolute;
  content: "";
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  opacity: 0;
}
.btn-judge > * > * {
  pointer-events: none;
}
.btn-judge .judge-text {
  position: absolute;
  top: 0;
  transform: translateY(-70%);
  width: 100%;
}
.btn-judge .judge-keybind {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  color: white;
  opacity: 0.5;
  font-size: 3rem;
}
.judge-area-miss,
.judge-area-good,
.judge-area-perfect {
  display: none;
  pointer-events: none;
  opacity: 0.5;
  position: absolute;
  left: 0;
  width: 100%;
}
.judge-area-miss {
  background: red;
}
.judge-area-good {
  background: blue;
}
.judge-area-perfect {
  background: green;
}
.play-view .score {
  background: url(../img/score.png) right top no-repeat;
  background-size: auto 100%;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 10.15%;
}
.play-view .score .numbers {
  position: absolute;
  top: 35%;
  right: 3.3%;
}
.play-view .combo {
  background: url(../img/combo.png) center/cover no-repeat;
  display: none;
  position: absolute;
  top: 10%;
  width: 25.74%;
  height: 12.44%;
}
.play-view .combo.show {
  display: block;
}
.play-view .combo .numbers {
  position: absolute;
  top:-20%;
  left: 0%;
  transform: rotate(344deg);
  transform-origin: left top;
  font-size: 2.5rem;
  color: rgb(255 0 180);
  -webkit-text-stroke: white 2px;
  text-stroke: white 2px;

}
.combo-gauge {
  background: url(../img/combo_gauge.png) center/cover;
  position: absolute;
  top: 17.03%;
  left: 3.61%;
  width: 4.62%;
  height: 49.74%;
}
.gauge-mask {
  clip-path: polygon(0 0, 0 100%, 100% 93.1%, 100% 0);
  position: absolute;
  top: 0.52%;
  left: 10%;
  width: 80%;
  height: 98.95%;
}
.gauge {
  background: rgb(124, 0, 177);
  background: -moz-linear-gradient(
    0deg,
    rgba(124, 0, 177, 1) 0%,
    rgba(239, 0, 254, 1) 100%
  );
  background: -webkit-linear-gradient(
    0deg,
    rgba(124, 0, 177, 1) 0%,
    rgba(239, 0, 254, 1) 100%
  );
  background: linear-gradient(
    0deg,
    rgba(124, 0, 177, 1) 0%,
    rgba(239, 0, 254, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#7c00b1",endColorstr="#ef00fe",GradientType=1);
  clip-path: inset(100% 0 0 0);
  transition: clip-path 300ms;
  height: 100%;
}
.end-text {
  animation: end-text-motion 150ms;
  animation-fill-mode: forwards;
  background: url(../img/end_text.png) center/cover no-repeat;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.end-text.show {
  display: block;
}

@keyframes end-text-motion {
  0% {
    opacity: 0;
    transform: scale(2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/**
Play View z-index
*/
.play-view .end-text {
  z-index: 100;
}
.play-view .btn-judge {
  z-index: 99;
}
.play-view .score {
  z-index: 99;
}
.play-view .combo-gauge {
  z-index: 98;
}
.play-view .combo {
  z-index: 97;
}
.play-view .lyrics {
  z-index: 96;
}
.play-view .dummy-judge-area {
  z-index: 95;
}
.play-view .lanes {
  z-index: 94;
}
.play-view .combo-effect {
  z-index: 93;
}

/**
Result View
*/
.result-view {
  background: url(../img/bg_result.png) center/cover;
}

/**
Last Result View
*/
.last-result-view {
  background: url(../img/bg_last_result.png) center/cover;
}
.result-view .score,
.last-result-view .score {
  position: absolute;
  left: 0;
  top: 35.7%;
  width: 100%;
  height: 10%;
}
.result-view .score .numbers {
  position: absolute;
  top: 30%;
  left: 40%;
}
.last-result-view .score .numbers {
  position: absolute;
  top: 30%;
  left: 40%;
}
.result-view .combo,
.last-result-view .combo {
  position: absolute;
  left: 0;
  top: 51%;
  width: 100%;
  height: 5%;
}
.result-view .combo .numbers,
.last-result-view .combo .numbers {
  position: absolute;
  top: 30%;
  left: 45%;
  font-size: 2rem;
  color: white;
}

.flex-unset {
  flex: unset;
}
.inline-block {
  display: inline-block;
}

.strums {
  width: 100%;
  perspective: 232.994px;
}