:root {
  color-scheme: light dark;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  --app-height: 100%;
}

a {
  color: #26316C;
}

a:hover {
  color: #26316C;
}

body {
  margin: auto;
  display: flex;
  place-items: center;
  background-repeat: repeat;
  background-size: 600px;
  background-image: url("../img/bg.jpg");
  background-color: white;
  color: #282626;
  font-family: "inter-variable", sans-serif;
  height: 100dvh;
  width: 100dvw;
  touch-action: manipulation;
  overflow: hidden;
}

.orange__button {
  background-color: #E67919;
}

.real__button {
  top: 72.5%;
}

.test__button {
  top: 64.7%;
}

.test__50__score {
  font-size: 5.4vh;
  font-weight: 700;
  font-family: "inter-variable", sans-serif;
  background: #FCC104;
  background: radial-gradient(circle, rgb(252, 193, 4) 0%, rgb(234, 136, 51) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  padding: 0 1.5%;
}

.gameContainer.active__font .test__50__score {
  font-size: 9.6vw;
}

.test__50__text {
  position: absolute;
  top: 46.3%;
  width: 100%;
  display: flex;
  justify-content: center;
  font-size: 2.55vh;
  font-weight: 700;
  font-family: "ruddy", sans-serif;
  text-transform: none;
  display: flex;
  align-items: center;
  padding: 0;
  color: #26316C;
}

.real__50__text {
  top: 48.3%;
}

.gameContainer.active__font .test__50__text {
  font-size: 4.54vw;
}

.leaderboard__real__button {
  top: 62%;
}

.real__50__ranking__score {
  color: #E67919;
  font-size: 4.5vh;
}

.gameContainer.active__font .real__50__ranking__score {
  font-size: 6.22vw;
}

.real__50__ranking__text {
  top: 54%;
  width: 100%;
  display: flex;
  justify-content: center;
  font-size: 2.05vh;
}

.gameContainer.active__font .real__50__ranking__text {
  font-size: 3.64vw;
}

.real__50__ranking__text--win {
  top: 42.4%;
}

.real__50__text--win {
  top: 36.1%;
}

button {
  border: 0;
  background-color: transparent;
  position: absolute;
  border-radius: 500px;
  cursor: pointer;
  font-family: "ohno-softie-variable", sans-serif;
  font-weight: 700;
  font-size: 2.7vh;
  top: 85.2%;
  height: 6.5%;
  left: 14.4%;
  width: 71%;
  background-color: #26316C;
  opacity: 0;
  transform: translateY(3vh);
  animation: buttonEnter 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  will-change: transform, opacity;
  color: white;
}

.gameContainer.active__font button {
  font-size: 4.8vw;
}

h1 {
  font-size: 3.2em;
  line-height: 1.1;
}

.loader {
  position: absolute;
  width: 100%;
  height: 100%;
  font-size: 24px;
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
}

.gameContainer,
.overlay {
  position: absolute;
  margin: auto;
  height: 177.7777dvw;
  width: 100dvw;
  max-height: 100dvh;
  max-width: 56.25dvh;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

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

:root {
  --background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, .8));
  --perfect-color: rgba(255, 101, 229, .8);
  --good-color: rgba(82, 236, 51, .8);
  --bad-color: rgba(207, 53, 53, .8);
  --miss-color: rgba(199, 184, 184, .8);
  --maxcombo-color: rgba(0, 110, 255, .8);
  --score-color: rgba(240, 202, 36, .8);
  /* --hit-effect: linear-gradient(to bottom, rgba(255, 255, 255, .5), rgba(255, 255, 255, .3)); */
  --hit-color: rgba(255, 255, 255, .8);
  --key-red: rgba(254, 45, 87, 1);
  --key-blue: rgba(28, 121, 228, 1);
  --key-orange: rgba(240, 128, 60, 1);
  --keypress-red: linear-gradient(to top, #f9ae00, rgba(254, 45, 87, 0));
  --keypress-blue: linear-gradient(to top,rgba(38, 49, 108, 1) , rgba(28, 121, 228, 0));
  --keypress-green: linear-gradient(to top, rgba(230, 121, 25, 1), rgba(240, 128, 60, 0));
}

html {
  font-size: 62.5%;
}

main {
  height: 100vh;
  width: 100vw;
  display: flex;
}

h2 {
  padding: 1rem;
  text-transform: uppercase;
}

.game {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  position: relative;
  z-index: 10;
  margin: auto;
  height: 177.7777vw;
  width: 100%;
  max-height: 100vh;
  max-width: 56.25vh;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  touch-action: manipulation;
}

.game__points {
  color: #F9AE00;
  font-size: 4.6vh;
  font-weight: 700;
  font-family: "ruddy", sans-serif;
  position: absolute;
  top: 13.3%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  padding: 0;
  line-height: 1;
  text-align: center;
  width: -moz-max-content;
  width: max-content;
  display: flex;
  justify-content: center;
  align-items: center;
}

.game__points.active__font {
  font-size: 8.17vw;
}

.game__pointsLabel {
  display: block;
  margin-bottom: 0.08em;
  color: #26316C;
  font-size: 0.56em;
  font-weight: 700;
  font-family: "ruddy", sans-serif;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
  padding-left: 3px;
}

.game__pointsValue {
  display: block;
}

.game__pointsGain {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, 0.65em);
  color: inherit;
  font-size: 1em;
  font-weight: 700;
  font-family: inherit;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  animation: gamePointsGain 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

@keyframes gamePointsGain {
  0% {
    opacity: 0;
    transform: translate(-50%, 0.65em);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, 0.35em);
  }
  45% {
    opacity: 1;
    transform: translate(-50%, 0.35em);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -1.1em);
  }
}
.hit {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.hit__combo {
  font-size: 10vh;
  background: #FCC104;
  background: radial-gradient(circle, rgb(252, 193, 4) 0%, rgb(234, 136, 51) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-family: "inter-variable", sans-serif;
  font-weight: 700;
  position: absolute;
  top: 40%;
}

.hit__combo.active__font {
  font-size: 17.777vw;
}

.hit__accuracy {
  font-size: 3vh;
  font-family: "ruddy", sans-serif;
  font-weight: 700;
  color: #26316C;
  text-transform: uppercase;
  position: absolute;
  top: 54%;
}

.hit__accuracy.active__font {
  font-size: 5.33vw;
}

.hit__accuracy--perfect {
  opacity: 0;
  animation: fade 0.5s;
}

.hit__accuracy--good {
  opacity: 0;
  animation: fade 0.5s;
}

.hit__accuracy--bad {
  opacity: 0;
  animation: fade 0.5s;
}

.hit__accuracy--miss {
  opacity: 0;
  animation: fade 0.5s;
}

.track-container {
  display: flex;
  flex: 1 0 auto;
  height: 83%;
  position: relative;
  touch-action: manipulation;
}

.hit-line {
  position: absolute;
  left: 0;
  width: 100%;
  border-top: 2px dashed rgba(255, 94, 87, 0.95);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
  pointer-events: none;
  z-index: 40;
}

.hit-line__label {
  position: absolute;
  top: 0;
  right: 4%;
  transform: translateY(-50%);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.95);
  color: #ff5e57;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.track {
  position: relative;
  flex: 0 0 33.3333333333%;
  overflow: hidden;
}

.key-container {
  position: relative;
  display: flex;
  flex: 0 0 17%;
  height: 17%;
  touch-action: manipulation;
}

.arrow__img {
  height: 70%;
}

.key {
  flex: 0 0 33.3333333333%;
  text-align: center;
  position: relative;
  justify-content: center;
  align-items: center;
  display: flex;
}

.key span {
  font-weight: bold;
  writing-mode: vertical-lr;
  text-orientation: upright;
  margin: auto;
  border-radius: 500px;
  width: 51%;
  height: 56.2%;
  margin-top: 21.9%;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}

video {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  touch-action: manipulation;
}

.note {
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  display: flex;
  justify-content: center;
  width: 39.63%;
  height: 8.9%;
  top: -8.9%;
  border-radius: 500px;
}

.keypress {
  position: absolute;
  width: 100%;
  height: 143%;
  bottom: 0;
  display: none;
}

.key__hit {
  position: absolute;
  width: 10%;
  height: 10%;
  top: -108%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: 0 0;
  background: var(--hit-color);
  opacity: 0;
  border-radius: 50%;
  animation: scaleFade 1s;
}

.key__hit:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid var(--hit-color);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  animation: scaleBorder 1s;
}

.keypress--red {
  background-image: var(--keypress-red);
}

.keypress--blue {
  background-image: var(--keypress-blue);
}

.keypress--green {
  background-image: var(--keypress-green);
}

.combo {
  color: var(--maxcombo-color);
}

.score {
  color: var(--score-color);
}

.apla__top {
  width: 65%;
  position: absolute;
  margin-right: auto;
  margin-left: auto;
  left: 0;
  right: 0;
  z-index: 15;
}

.play__again__test__button {
  top: 64%;
}

@keyframes moveDown {
  0% {
    top: -50px;
  }
  76% {
    top: 69.1%;
    opacity: 1;
  }
  100% {
    top: 91.1%;
    opacity: 0;
  }
}
@keyframes buttonEnter {
  0% {
    opacity: 0;
    transform: translateY(3vh);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fade {
  10% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes scaleFade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    width: 4rem;
    height: 4rem;
  }
}
@keyframes scaleBorder {
  100% {
    width: 10rem;
    height: 10rem;
    border: 2px solid transparent;
  }
}
.button__code {
  top: 74.2%;
}

textarea, input {
  position: absolute;
  background-color: #fff;
  resize: none;
  margin: 0;
  outline: none;
  border: 0;
  color: #26316C;
  font-family: "inter-variable", sans-serif;
  font-size: 2.1vh;
  font-weight: 700;
}

input::-moz-placeholder {
  color: #26316C;
  font-family: "inter-variable", sans-serif;
}

input::placeholder {
  color: #26316C;
  font-family: "inter-variable", sans-serif;
}

input:focus::-moz-placeholder {
  color: transparent;
}

input:focus::placeholder {
  color: transparent;
}

.gameContainer.active__font input,
.gameContainer.active__font textarea {
  font-size: 3.73vw;
}

#email,
#code,
#date,
#tel,
#name {
  width: 70.6%;
  height: 6.4%;
  left: 14.7%;
  border-radius: 100px;
  padding: 0 2%;
  border: 2px solid #26316C;
  text-align: center;
}

#tel {
  top: 42.5%;
}

#date {
  top: 57%;
}

#email {
  top: 29%;
}

#email.email__mobile {
  font-size: 2.1vh;
  line-height: 1;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}

#email.email__mobile.active__font {
  font-size: 3.73vw;
}

#code {
  top: 61.9%;
}

label {
  padding-left: 8.6% !important;
  font-size: 1.44vh;
  color: #858585;
}

.gameContainer.active__font label {
  font-size: 2.66vw;
}

input:-webkit-autofill.show-error,
input:-webkit-autofill:hover.show-error,
input:-webkit-autofill:focus.show-error,
input:-webkit-autofill:active.show-error,
.show-error {
  border-color: #df0024 !important;
}

input:-webkit-autofill.show-error,
input:-webkit-autofill:hover.show-error,
input:-webkit-autofill:focus.show-error,
input:-webkit-autofill:active.show-error {
  box-shadow: 0 0 0 1000px #fff inset, 0 0 0 0.3vh rgba(223, 0, 36, 0.18);
}

.show-error {
  box-shadow: 0 0 0 0.3vh rgba(223, 0, 36, 0.18);
}

.fieldError {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 70.8%;
  padding: 0.5em 1em;
  border-radius: 999px;
  background-color: #df0024;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 1.15vh;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  text-transform: none;
  box-sizing: border-box;
  z-index: 3;
  pointer-events: none;
}

.gameContainer.active__font .fieldError {
  font-size: 2vw;
}

.fieldError--visible {
  display: inline-flex;
}

.fieldError--email {
  top: 36.5%;
}

.fieldError--tel {
  top: 49.8%;
}

.fieldError--code {
  top: 69.3%;
}

.fieldError--checkbox {
  max-width: 74.3%;
}

.fieldError--checkbox1 {
  top: 55.8%;
}

.fieldError--checkbox2 {
  top: 65.2%;
}

.fieldError--checkbox3 {
  top: 73.8%;
}

input[type=checkbox],
input[type=radio] {
  display: none;
}

input[type=checkbox] + label,
input[type=radio] + label {
  cursor: pointer;
  display: inline-block;
  position: absolute;
  padding: 0 0 0 0px;
  background-size: 9% !important;
  width: 74.3%;
  left: 14.6%;
  line-height: 1.1;
  background: url("../img/checkbox.png") left no-repeat;
  font-family: Arial;
}

.checkbox_error {
  background: url("../img/checkbox_bad.png") left no-repeat !important;
}

.rules_checkbox + .rules_label {
  top: 54.2%;
  line-height: 1.5;
}

.marketing_checkbox + .marketing_label {
  top: 60%;
}

.third_checkbox + .third_label {
  top: 68.5%;
}

input[type=checkbox]:checked + label,
input[type=radio]:checked + label {
  background: url("../img/checkbox_ok.png") left no-repeat;
}

.form__required {
  position: absolute;
  top: 76.7%;
  left: 14.6%;
  width: 74.3%;
  color: #858585;
  font-family: Arial, sans-serif;
  font-size: 1.3vh;
  line-height: 1.2;
  text-align: left;
  box-sizing: border-box;
}

.gameContainer.active__font .form__required {
  font-size: 2.4vw;
}

.send-button {
  border: none;
  padding: 0;
  cursor: pointer;
  outline: none;
  width: 70.8%;
  height: 6.2%;
  left: 14.7%;
  top: 80.5%;
}

.rules__link {
  position: absolute;
  top: 68.8%;
  left: 36.6%;
  height: 2%;
  width: 39.6%;
}

.trening__button,
.ranking__button {
  left: 14.6%;
  width: 70.8%;
  height: 5.9%;
}

.trening__button {
  top: 75.9%;
}

.ranking__button {
  top: 83.6%;
}

.rankingRecords {
  position: absolute;
  top: 36.75%;
  left: 9.8%;
  width: 80.4%;
  height: 35.45%;
  display: flex;
  flex-direction: column;
  gap: 0.55%;
}

.personalRecords {
  position: absolute;
  top: 76.2%;
  left: 9.8%;
  width: 80.4%;
  height: 3.7%;
}

.rankingRecord {
  width: 100%;
  height: 6.58%;
  display: grid;
  grid-template-columns: 8% 38% 34% 20%;
  align-items: center;
  padding: 0 2.7%;
  border-radius: 1.2vh;
  background: rgba(244, 244, 248, 0.96);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8);
  color: #26316C;
}

.personalRecords .rankingRecord {
  height: 100%;
}

.rankingRecord--personal {
  background: #72B62B;
  color: white;
  box-shadow: none;
  font-weight: 700;
}

.rankingRecord p {
  margin: 0;
  line-height: 1;
  font-family: "inter-variable", sans-serif;
  font-size: 1.92vh;
}

.rankingRecord p.active__font {
  font-size: 3.42vw;
}

.rankingRecord__place {
  justify-self: start;
}

.rankingRecord__reward {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 62%;
  padding: 0 0.85em;
  border-radius: 999px;
  background-color: #E67919;
  color: white;
  font-size: 1vh !important;
  white-space: nowrap;
}

.rankingRecord__reward.active__font {
  font-size: 1.77vw !important;
}

.rankingRecord__phone {
  justify-self: center;
}

.rankingRecord__score {
  justify-self: end;
}

.rankingRecord--personal .rankingRecord__phone,
.rankingRecord--personal .rankingRecord__score,
.rankingRecord--personal .rankingRecord__place {
  color: white;
}

.rankingPagination {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.rankingPagination__button {
  width: 6.5%;
  height: 3.65%;
  top: 56.1%;
  border-radius: 50%;
  background-color: #26316C;
  color: white;
  opacity: 1;
  transform: none;
  animation: none;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 12;
  box-shadow: 0 0.45vh 1.1vh rgba(38, 49, 108, 0.18);
}

.rankingPagination__icon {
  width: 48%;
  height: auto;
  display: block;
}

.rankingPagination__icon--prev {
  transform: rotate(180deg);
}

.rankingPagination__button--prev {
  left: 3.4%;
}

.rankingPagination__button--next {
  left: auto;
  right: 1.8%;
}

.points {
  position: absolute;
  top: 19.3%;
  right: 45%;
  font-size: 12vh;
  color: #e5c658;
  font-family: "inter-variable", sans-serif;
  font-weight: 700;
}

.points.active__font {
  font-size: 21.33vw;
}/*# sourceMappingURL=style.css.map */