@media screen and (max-width: 1200px) {
   .game-wrap {
      padding: 0 4vw;
   }
}

@media screen and (max-width: 800px) {
   .first-screen__img {
      max-width: 590px;
   }

   .start-screen {
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      padding: 7vh 1vw;
   }

   .santa {
      bottom: auto;
      top: 15vh;
      max-width: 56vh;
   }

   .start-title {
      font-size: 6vw;
   }

   .table {
      bottom: 4vh;
      height: 50vh;
   }

   .game-screen {
      padding: 5.5vh 0 5vh;
   }

   .game-wrap {
      -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;
      gap: 30px;
   }

   .flasks-list {
      max-width: 100%;
   }

   .flask {
      width: calc(10% - 10.8px);
   }

   .ref-wrap {
      background: -o-linear-gradient(top, rgba(255, 255, 255, 0.4) 0%, rgba(153, 153, 153, 0.4) 100%);
      background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.4)), to(rgba(153, 153, 153, 0.4)));
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(153, 153, 153, 0.4) 100%);
      border: 2px solid #121717;
      border-radius: 16px;
      padding: 23px 9px 16px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: end;
      -ms-flex-align: end;
      align-items: flex-end;
      gap: 32px;
      padding: 11px 22px 16px;
   }

   .big-flask-list {
      height: 106px;
      width: 67px;
   }

   .formula-wrap {
      background: none;
      border: none;
      border-radius: 0;
      padding: 0;
      top: 0;
      left: 0;
      -webkit-transform: none;
      -ms-transform: none;
      transform: none;
      position: relative;
   }

   .flasks-list.bigger {
      max-width: 627px;
   }

   .flasks-list.bigger .flask {
      width: calc((100% / 9) - 10.7px);
   }

   .popup {
      padding: 4vh 0 7.3vh;
   }

   .final-text {
      font-size: 6vw;
      max-width: 595px;
   }

   .arrow {
      top: auto;
      bottom: 8.5%;
      left: 8%;
      -webkit-transform: none;
      -ms-transform: none;
      transform: none;
      height: 222px;
      max-width: 137px;
   }

   .arrow-bg {
      background-image: url('../img/arrow-tablet.webp');
   }

   .arrow-ball {
      border: 1px solid #B5CCDB;
      border-radius: 50%;
      height: 24px;
      width: 24px;
      position: absolute;
      top: 16px;
      bottom: auto;
      left: -3px;
      opacity: 0;
   }

   @-webkit-keyframes show-ball {
      0% {
         -webkit-transform: translate(0, 0);
         transform: translate(0, 0);
         opacity: 0;
      }

      10% {
         opacity: 1;
      }

      60% {
         -webkit-transform: translate(200%, 392%);
         transform: translate(200%, 392%);
         opacity: 1;
      }

      100% {
         -webkit-transform: translate(496%, 680%);
         transform: translate(496%, 680%);
         opacity: 0;
      }
   }

   @keyframes show-ball {
      0% {
         -webkit-transform: translate(0, 0);
         transform: translate(0, 0);
         opacity: 0;
      }

      10% {
         opacity: 1;
      }

      60% {
         -webkit-transform: translate(200%, 392%);
         transform: translate(200%, 392%);
         opacity: 1;
      }

      100% {
         -webkit-transform: translate(496%, 680%);
         transform: translate(496%, 680%);
         opacity: 0;
      }
   }
}

@media screen and (max-width: 450px) {
   .first-screen__img {
      max-width: 320px;
   }

   .start-screen {
      padding-bottom: 9.5vh;
   }

   .start-title {
      font-size: 6.5vw;
      max-width: 350px;
   }

   .button {
      font-size: 18px;
      height: 62px;
      width: 198px;
   }

   .table {
      bottom: -5vh;
   }

   .santa {
      top: 19vh;
      left: 52%;
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%);
      max-width: 123%;
      width: auto;
   }

   .game-screen {
      padding: 5vh 0;
   }

   .game-wrap {
      gap: 20px;
   }

   .flasks-list {
      gap: 12px 2px;
   }

   .flask {
      width: calc(10% - 1.8px);
   }

   .flasks-list.bigger .flask {
      width: calc((100% / 9) - 1.8px);
   }

   .ref-wrap {
      gap: 24px;
      padding-left: 18px;
      padding-right: 18px;
   }

   .big-flask-list {
      height: 76px;
      width: 48px;
   }

   .formula-title {
      font-size: 18px;
   }

   .formula-item {
      font-size: 28px;
      width: 34px;
      height: 34px;
   }

   .popup {
      padding-bottom: 8.3vh;
   }

   .popup-title {
      font-size: 48px;
   }

   .final-text {
      font-size: 7.5vw;
   }

   .arrow {
      top: auto;
      bottom: 12.5%;
      left: 4%;
      -webkit-transform: none;
      -ms-transform: none;
      transform: none;
      height: 88px;
      max-width: 66px;
   }

   .arrow-bg {
      background-image: url('../img/arrow-mob.webp');
   }

   .arrow-ball {
      top: -3px;
      left: -5px;
   }

   @-webkit-keyframes show-ball {
      0% {
         -webkit-transform: translate(0, 0);
         transform: translate(0, 0);
         opacity: 0;
      }

      10% {
         opacity: 1;
      }

      60% {
         -webkit-transform: translate(113%, 178%);
         transform: translate(113%, 178%);
         opacity: 1;
      }

      100% {
         -webkit-transform: translate(240%, 310%);
         transform: translate(240%, 310%);
         opacity: 0;
      }
   }

   @keyframes show-ball {
      0% {
         -webkit-transform: translate(0, 0);
         transform: translate(0, 0);
         opacity: 0;
      }

      10% {
         opacity: 1;
      }

      60% {
         -webkit-transform: translate(113%, 178%);
         transform: translate(113%, 178%);
         opacity: 1;
      }

      100% {
         -webkit-transform: translate(240%, 310%);
         transform: translate(240%, 310%);
         opacity: 0;
      }
   }
}