@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,700&family=Roboto:wght@100..900&display=swap');

body {
   background: #000;
   font-family: Roboto, sans-serif;
   font-weight: 400;
   font-size: 15px;
   line-height: 100%;
   color: #fff;
   text-align: left;
   overflow: hidden;
   height: 100%;
   width: 100%;
}

img {
   -webkit-user-drag: none;
   user-drag: none;
}

.screen {
   position: relative;
   overflow: hidden;
   height: 100dvh;
   width: 100%;
}

.start {
   background: url('../img/start-bg-1.webp') no-repeat center / cover;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   padding: 4.5vh 20px 6.6vh;
   -webkit-transition: all .2s ease-in;
   -o-transition: all .2s ease-in;
   transition: all .2s ease-in;
   position: fixed;
   inset: 0;
   z-index: 100;
}

.start.hide {
   -webkit-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -webkit-transform-origin: bottom;
   -ms-transform-origin: bottom;
   transform-origin: bottom;
}

.logo {
   display: block;
   margin: 0 auto;
   max-width: 586px;
}

.logo img {
   display: block;
}

.rules {
   margin-top: auto;
   overflow: hidden;
   max-width: 320px;
   width: 100%;
}

.rules__text {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   font-size: 32px;
   line-height: 115%;
   text-align: center;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

.rules__text p {
   padding: 0 10px;
   min-width: 100%;
}

.rules__dots {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   gap: 2px;
   margin-top: 13px;
}

.rules__dots li {
   background-color: rgba(255, 255, 255, .6);
   border-radius: 50%;
   height: 6px;
   width: 6px;
   cursor: pointer;
}

.rules__dots li.active {
   background-color: #fff;
}

.button {
   background: -o-linear-gradient(17.06deg, #F43F5E 0%, #FB7185 100%);
   background: linear-gradient(72.94deg, #F43F5E 0%, #FB7185 100%);
   border-radius: 100px;
   -webkit-box-shadow: 0px 10px 15px -3px rgba(244, 63, 94, 0.3);
   box-shadow: 0px 10px 15px -3px rgba(244, 63, 94, 0.3);
   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;
   font-family: Inter, sans-serif;
   font-size: 24px;
   color: #fff;
   line-height: 1;
   padding: 10px 10px;
   height: 77px;
   width: 252px;
}

.button:hover {
   -webkit-box-shadow: 0 0 15px 5px #F43F5E;
   box-shadow: 0 0 15px 5px #F43F5E;
}

.start__button {
   margin-top: 2vh;
   -webkit-animation: btn 1s ease-in-out infinite alternate;
   animation: btn 1s ease-in-out infinite alternate;
}

@-webkit-keyframes btn {
   100% {
      -webkit-transform: scale(1.2);
      transform: scale(1.2);
   }
}

@keyframes btn {
   100% {
      -webkit-transform: scale(1.2);
      transform: scale(1.2);
   }
}

.game {
   background: url('../img/game-bg.webp') no-repeat center center / cover;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   opacity: 0;
}

.game.active {
   opacity: 1;
}

.game:before {
   content: '';
   background: -o-linear-gradient(bottom, rgba(115, 115, 115, 0) 0%, #1B1B1B 100%);
   background: -webkit-gradient(linear, left bottom, left top, from(rgba(115, 115, 115, 0)), to(#1B1B1B));
   background: linear-gradient(360deg, rgba(115, 115, 115, 0) 0%, #1B1B1B 100%);
   position: absolute;
   left: 0;
   right: 0;
   height: 200px;
   z-index: 1;
}

.counters {
   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;
   position: absolute;
   top: 3.5vh;
   left: 0;
   right: 0;
   margin: auto;
   max-width: 367px;
   width: 100%;
   z-index: 10;
}

.counters__item {
   background-color: rgba(0, 0, 0, 0.7);
   border: 1px solid rgba(255, 255, 255, 0.1);
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   font-weight: 700;
   line-height: 115%;
   text-transform: uppercase;
   padding: 9px 13px;
}

.counters__saves {
   border-radius: 12px 0 0 12px;
}

.counter__title {
   font-size: 10px;
   color: #64748B;
}

.counter__value {
   font-size: 18px;
}

.counters__attempts {
   background-color: rgba(0, 0, 0, .5);
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   gap: 4px;
   padding: 11px 16px;
}

.counters__attempts li {
   background-color: rgba(255, 255, 255, .1);
   border: 1px solid rgba(255, 255, 255, .1);
   border-radius: 50%;
   height: 18px;
   width: 18px;
}

.counters__attempts li.success {
   background-color: #10B981;
   -webkit-box-shadow: 0px 0px 8px 0px #10B981;
   box-shadow: 0px 0px 8px 0px #10B981;
}

.counters__attempts li.fail {
   background-color: #F43F5E;
   -webkit-box-shadow: 0px 0px 8px 0px #F43F5E;
   box-shadow: 0px 0px 8px 0px #F43F5E;
}

.counters__speed {
   border-radius: 0 12px 12px 0;
}

.counter__speed-value.red {
   color: #FB7185;
}

.stadium {
   max-width: 956px;
   margin: auto;
   -ms-touch-action: none;
   touch-action: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   position: relative;
   -webkit-transition: all .3s ease-in-out;
   -o-transition: all .3s ease-in-out;
   transition: all .3s ease-in-out;
}

.stadium.hide {
   -webkit-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
}

.stadium__background {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   max-height: 100vh;
}

.stadium__background img {
   display: block;
   position: relative;
}

.stadium__background img:last-child {
   position: absolute;
   left: 0;
   top: 50%;
   -webkit-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
   max-height: none;
   max-width: none;
   width: 100%;
   -webkit-transition: opacity .2s ease-in-out;
   -o-transition: opacity .2s ease-in-out;
   transition: opacity .2s ease-in-out;
   opacity: 0;
}

.stadium__background.change-bg img:last-child {
   opacity: 1;
}

.img {
   position: absolute;
   z-index: 5;
}

.img img {
   display: block;
}

.keeper {
   max-width: 134px;
   left: calc(50% - 67px);
   bottom: 67%;
   z-index: 5;
   will-change: left;
}

.cupid {
   max-width: 224px;
   left: calc(50% - 112px);
   top: 62%;
   z-index: 7;
}

.ball {
   border-radius: 50%;
   max-width: 58px;
   left: calc(50% - 29px);
   top: 75.5%;
   z-index: 6;
}

.ball.flash {
   -webkit-animation: flash .5s cubic-bezier(.2, .7, .1, 1);
   animation: flash .5s cubic-bezier(.2, .7, .1, 1);
   -webkit-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
}

@-webkit-keyframes flash {
   0% {
      -webkit-filter: drop-shadow(0 0 0 rgba(255, 215, 0, 0));
      filter: drop-shadow(0 0 0 rgba(255, 215, 0, 0));
      -webkit-transform: scale(1);
      transform: scale(1);
   }

   40% {
      -webkit-filter: drop-shadow(0 0 18px rgba(255, 215, 0, .85)) drop-shadow(0 0 6px rgba(255, 200, 0, .6));
      filter: drop-shadow(0 0 18px rgba(255, 215, 0, .85)) drop-shadow(0 0 6px rgba(255, 200, 0, .6));
      -webkit-transform: scale(1.35);
      transform: scale(1.35);
   }

   65% {
      -webkit-filter: drop-shadow(0 0 22px rgba(255, 215, 0, .95)) drop-shadow(0 0 10px rgba(255, 200, 0, .7));
      filter: drop-shadow(0 0 22px rgba(255, 215, 0, .95)) drop-shadow(0 0 10px rgba(255, 200, 0, .7));
      -webkit-transform: scale(1.4);
      transform: scale(1.4);
   }

   100% {
      -webkit-filter: drop-shadow(0 0 0 rgba(255, 215, 0, 0));
      filter: drop-shadow(0 0 0 rgba(255, 215, 0, 0));
      -webkit-transform: scale(1);
      transform: scale(1);
   }
}

@keyframes flash {
   0% {
      -webkit-filter: drop-shadow(0 0 0 rgba(255, 215, 0, 0));
      filter: drop-shadow(0 0 0 rgba(255, 215, 0, 0));
      -webkit-transform: scale(1);
      transform: scale(1);
   }

   40% {
      -webkit-filter: drop-shadow(0 0 18px rgba(255, 215, 0, .85)) drop-shadow(0 0 6px rgba(255, 200, 0, .6));
      filter: drop-shadow(0 0 18px rgba(255, 215, 0, .85)) drop-shadow(0 0 6px rgba(255, 200, 0, .6));
      -webkit-transform: scale(1.35);
      transform: scale(1.35);
   }

   65% {
      -webkit-filter: drop-shadow(0 0 22px rgba(255, 215, 0, .95)) drop-shadow(0 0 10px rgba(255, 200, 0, .7));
      filter: drop-shadow(0 0 22px rgba(255, 215, 0, .95)) drop-shadow(0 0 10px rgba(255, 200, 0, .7));
      -webkit-transform: scale(1.4);
      transform: scale(1.4);
   }

   100% {
      -webkit-filter: drop-shadow(0 0 0 rgba(255, 215, 0, 0));
      filter: drop-shadow(0 0 0 rgba(255, 215, 0, 0));
      -webkit-transform: scale(1);
      transform: scale(1);
   }
}

.hint {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   gap: 12px;
   position: absolute;
   inset: 0;
   z-index: 10;
   -webkit-transition: all .3s;
   -o-transition: all .3s;
   transition: all .3s;
}

.hint img {
   max-width: 122px;
   -webkit-animation: img-hint 1s linear infinite alternate;
   animation: img-hint 1s linear infinite alternate;
}

.hint.hide {
   -webkit-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
}

@-webkit-keyframes img-hint {
   0% {
      -webkit-transform: rotate(20deg);
      transform: rotate(20deg);
   }

   100% {
      -webkit-transform: rotate(-20deg);
      transform: rotate(-20deg);
   }
}

@keyframes img-hint {
   0% {
      -webkit-transform: rotate(20deg);
      transform: rotate(20deg);
   }

   100% {
      -webkit-transform: rotate(-20deg);
      transform: rotate(-20deg);
   }
}

.hint span {
   background-color: rgba(0, 0, 0, .6);
   border-radius: 20px;
   font-weight: 700;
   font-size: 13px;
   line-height: 115%;
   padding: 10px 20px;
}

.popup {
   position: fixed;
   inset: 0;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   z-index: 100;
}

.popup.active {
   -webkit-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
}

.popup__content {
   background-color: rgba(0, 0, 0, 0.6);
   border-radius: 32px;
   margin: auto;
   text-align: center;
   padding: 48px;
   max-width: 500px;
   width: 100%;
}

.popup__title {
   font-weight: 700;
   font-size: 32px;
   line-height: 20px;
   text-transform: uppercase;
}

.popup__resalt {
   display: block;
   font-weight: 700;
   font-size: 64px;
   line-height: 115%;
   margin: 14px 0 24px;
}

.success .popup__resalt {
   color: #77FFD2;
}

.fail .popup__resalt {
   color: #F43F5E;
}

.popup__text {
   font-size: 32px;
   line-height: 115%;
}

.popup__text p+p {
   margin-top: 19px;
}

.success .popup__text p:first-child {
   font-weight: 700;
   color: #FACC15;
}

.popup__button {
   margin: 19px auto 0;
}