/*!*************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Modals/LevelDone/style.scss ***!
  \*************************************************************************************************************************************/
.levelDoneModal {
  height: 587px;
  width: 562px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  background: url(/assets/img/levelDoneBg0959a22d79fc371d8415.webp) center/cover no-repeat;
}
@media (max-width: 767px) {
  .levelDoneModal.mobile {
    height: 100%;
    width: 100%;
    background: url(/assets/img/levelDoneBgMobe0d5a46c19625ced6ab5.webp) top/cover no-repeat;
  }
  .levelDoneModal.mobile::after {
    background: url(/assets/img/icea51aea0d6544e5e2b964.webp) top/cover no-repeat;
    width: 100%;
    content: "";
    height: 385px;
    position: absolute;
    bottom: 0;
  }
}
@media (max-width: 767px) and (max-width: 425px) {
  .levelDoneModal.mobile::after {
    background-position: center;
    height: 308px;
  }
}
@media (max-width: 767px) {
  @supports (-webkit-touch-callout: none) {
    .levelDoneModal.mobile {
      height: 100dvh;
      width: 100dvw;
    }
  }
  .levelDoneModal.mobile .levelDoneModal__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 5%;
  }
}
@media (max-width: 767px) and (max-width: 420px) {
  .levelDoneModal.mobile .levelDoneModal__body {
    scale: 80%;
  }
}
@media (max-width: 767px) {
  .levelDoneModal.mobile .levelDoneModal__buttons-main {
    position: static;
    order: 3;
    bottom: unset;
    height: unset;
    flex: 0 1 calc((100% - 10px) / 2);
    color: #252d33;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    border-radius: 100px;
    border-top: 1px solid #252d33;
    border-right: 4px solid #252d33;
    border-bottom: 4px solid #252d33;
    border-left: 1px solid #252d33;
    transition: 0.3s ease;
    padding: 8px 24px;
    text-decoration: none;
    order: 3;
  }
  .levelDoneModal.mobile .levelDoneModal__buttons-next {
    order: 2;
    margin-right: 0;
    flex: 0 1 calc((100% - 10px) / 2);
  }
  .levelDoneModal.mobile .levelDoneModal__buttons-continue {
    width: 100%;
    flex: 1 0 100%;
    order: 1;
    margin-bottom: 12px;
  }
  .levelDoneModal.mobile .levelDoneModal__buttons {
    column-gap: 10px;
    flex-wrap: wrap;
    width: 100%;
  }
}
.levelDoneModal__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.levelDoneModal__body {
  position: relative;
  z-index: 10;
  margin-bottom: 55px;
  max-width: 380px;
}
.levelDoneModal__score {
  color: #252d33;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  line-height: 17.6px;
  letter-spacing: -0.176px;
  margin-bottom: 7px;
}
.levelDoneModal__text {
  margin-bottom: 14px;
}
.levelDoneModal__buttons {
  display: flex;
  justify-content: center;
}
.levelDoneModal__buttons-main {
  color: #616161;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  text-decoration-line: underline;
  transition: 0.3s ease;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 17px;
  left: 0;
  bottom: -35px;
}
@media (hover: hover) {
  .levelDoneModal__buttons-main:hover {
    cursor: pointer;
    opacity: 0.8;
  }
}
.levelDoneModal__buttons-continue {
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
  border-radius: 100px;
  border-top: 1px solid #530a02;
  border-right: 4px solid #530a02;
  border-bottom: 4px solid #530a02;
  border-left: 1px solid #530a02;
  background: #d0351d;
  transition: 0.3s ease;
  padding: 8px 10px;
  flex: 0 1 calc((100% - 10px) / 2);
}
@media (hover: hover) {
  .levelDoneModal__buttons-continue:hover {
    cursor: pointer;
    opacity: 0.8;
  }
}
.levelDoneModal__buttons-next {
  flex: 0 1 calc((100% - 10px) / 2);
  color: #252d33;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
  border-radius: 100px;
  border-top: 1px solid #252d33;
  border-right: 4px solid #252d33;
  border-bottom: 4px solid #252d33;
  border-left: 1px solid #252d33;
  transition: 0.3s ease;
  padding: 8px 10px;
  margin-right: 12px;
}
@media (hover: hover) {
  .levelDoneModal__buttons-next:hover {
    cursor: pointer;
    opacity: 0.8;
  }
}
/*!************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Modals/GameOver/style.scss ***!
  \************************************************************************************************************************************/
.gameOverModal {
  height: 630px;
  width: 570px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  background: url(/assets/img/gameOverBg0db0ad204b29da11e816.webp) center/cover no-repeat;
}
@media (max-width: 767px) {
  .gameOverModal.mobile {
    height: 100%;
    width: 100%;
    background: url(/assets/img/gameOverMobfff1e59860d27d3f5532.webp) center/cover no-repeat;
  }
  .gameOverModal.mobile::after {
    background: url(/assets/img/icea51aea0d6544e5e2b964.webp) top/cover no-repeat;
    width: 100%;
    content: "";
    height: 385px;
    position: absolute;
    bottom: 0;
  }
}
@media (max-width: 767px) and (max-width: 425px) {
  .gameOverModal.mobile::after {
    height: 308px;
    background-position: center;
  }
}
@media (max-width: 767px) {
  @supports (-webkit-touch-callout: none) {
    .gameOverModal.mobile {
      height: 100dvh;
      width: 100dvw;
    }
  }
  .gameOverModal.mobile .gameOverModal__buttons-main {
    color: #252d33;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    border-radius: 100px;
    border-top: 1px solid #252d33;
    border-right: 4px solid #252d33;
    border-bottom: 4px solid #252d33;
    border-left: 1px solid #252d33;
    transition: 0.3s ease;
    padding: 8px 24px;
    margin-right: 12px;
    position: static;
    text-decoration: unset;
  }
  .gameOverModal.mobile .gameOverModal__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 5%;
    width: 100%;
  }
}
@media (max-width: 767px) and (max-width: 420px) {
  .gameOverModal.mobile .gameOverModal__body {
    width: 100%;
    padding: 0 10px;
  }
}
@media (max-width: 767px) {
  .gameOverModal.mobile .gameOverModal__text {
    width: 100%;
  }
  .gameOverModal.mobile .gameOverModal__buttons {
    width: 100%;
    height: 33px;
  }
}
.gameOverModal__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gameOverModal__body {
  position: relative;
  z-index: 10;
  margin-bottom: 33px;
  max-width: 392px;
}
.gameOverModal__score {
  color: #252d33;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  line-height: 17.6px;
  letter-spacing: -0.176px;
  margin-bottom: 5px;
}
.gameOverModal__text {
  margin-bottom: 8px;
}
.gameOverModal__subtext {
  text-align: center;
  color: #316995;
  font-size: 16px;
  font-weight: 400;
  line-height: 120%; /* 19.2px */
  letter-spacing: -0.176px;
}
.gameOverModal__buttons {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.gameOverModal__buttons-main {
  color: #616161;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  text-decoration-line: underline;
  transition: 0.3s ease;
  position: absolute;
  bottom: -61px;
  left: 135px;
}
@media (hover: hover) {
  .gameOverModal__buttons-main:hover {
    cursor: pointer;
    opacity: 0.8;
  }
}
.gameOverModal__buttons-continue {
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
  border-radius: 100px;
  border-top: 1px solid #530a02;
  border-right: 4px solid #530a02;
  border-bottom: 4px solid #530a02;
  border-left: 1px solid #530a02;
  background: #d0351d;
  transition: 0.3s ease;
  padding: 5px 24px;
  max-width: 170px;
  width: 100%;
}
@media (hover: hover) {
  .gameOverModal__buttons-continue:hover {
    cursor: pointer;
    opacity: 0.8;
  }
}
/*!************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Modals/ShowGift/style.scss ***!
  \************************************************************************************************************************************/
.showGiftModal {
  height: 616px;
  width: 562px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  background: url(/assets/img/showGiftBg905e64a29879e011bab6.webp) center/cover no-repeat;
}
@media (max-width: 767px) {
  .showGiftModal.mobile {
    height: 100%;
    width: 100%;
    background: url(/assets/img/showGiftBgMob25ee43263ecab0308180.webp) top/cover no-repeat;
  }
  .showGiftModal.mobile::after {
    background: url(/assets/img/icea51aea0d6544e5e2b964.webp) top/cover no-repeat;
    width: 100%;
    content: "";
    height: 385px;
    position: absolute;
    bottom: 0;
  }
}
@media (max-width: 767px) and (max-width: 425px) {
  .showGiftModal.mobile::after {
    background-position: center;
    height: 308px;
  }
}
@media (max-width: 767px) {
  @supports (-webkit-touch-callout: none) {
    .showGiftModal.mobile {
      height: 100dvh;
      width: 100dvw;
    }
  }
  .showGiftModal.mobile .showGiftModal__body {
    margin-bottom: 5%;
  }
}
@media (max-width: 767px) and (max-width: 425px) {
  .showGiftModal.mobile .showGiftModal__body {
    scale: 80%;
  }
}
@media (max-width: 767px) {
  .showGiftModal.mobile .showGiftModal__buttons {
    width: 100%;
  }
  .showGiftModal.mobile .showGiftModal__buttons-continue {
    width: 100%;
  }
}
.showGiftModal__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.showGiftModal__body {
  position: relative;
  z-index: 10;
  margin-bottom: 50px;
  max-width: 424px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.showGiftModal__score {
  color: #252d33;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  line-height: 17.6px;
  letter-spacing: -0.176px;
  margin-bottom: 7px;
}
.showGiftModal__text {
  margin-bottom: 8px;
  width: 100%;
}
.showGiftModal__buttons {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.showGiftModal__buttons-main {
  color: #252d33;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 120%; /* 19.2px */
  letter-spacing: -0.176px;
  margin-bottom: 12px;
}
.showGiftModal__buttons-continue {
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
  border-radius: 100px;
  border-top: 1px solid #530a02;
  border-right: 4px solid #530a02;
  border-bottom: 4px solid #530a02;
  border-left: 1px solid #530a02;
  background: #d0351d;
  transition: 0.3s ease;
  padding: 8px 7px;
  width: 170px;
}
@media (hover: hover) {
  .showGiftModal__buttons-continue:hover {
    cursor: pointer;
    opacity: 0.8;
  }
}
/*!**************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Modals/DishesDone/style.scss ***!
  \**************************************************************************************************************************************/
.dishesDoneModal {
  height: 637px;
  width: 562px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  background: url(/assets/img/dishesDoneBg675112b8dd1888caa98a.webp) center/cover no-repeat;
}
@media (max-width: 767px) {
  .dishesDoneModal.mobile {
    height: 100%;
    width: 100%;
    background: url(/assets/img/dishesDoneMob6331f068eeeaba60e623.webp) center/cover no-repeat;
  }
  .dishesDoneModal.mobile::after {
    background: url(/assets/img/icea51aea0d6544e5e2b964.webp) center/cover no-repeat;
    width: 100%;
    content: "";
    height: 385px;
    position: absolute;
    bottom: 0;
  }
}
@media (max-width: 767px) and (max-width: 425px) {
  .dishesDoneModal.mobile::after {
    height: 308px;
  }
}
@media (max-width: 767px) {
  @supports (-webkit-touch-callout: none) {
    .dishesDoneModal.mobile {
      height: 100dvh;
      width: 100dvw;
    }
  }
  .dishesDoneModal.mobile .dishesDoneModal__buttons-continue {
    flex: 0 1 calc((100% - 12px) / 2);
    width: 100%;
  }
  .dishesDoneModal.mobile .dishesDoneModal__buttons-main {
    position: static;
    bottom: unset;
    height: unset;
    text-decoration: none;
    color: #252d33;
    margin-right: 12px;
    color: #252d33;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    border-radius: 100px;
    border-top: 1px solid #252d33;
    border-right: 4px solid #252d33;
    border-bottom: 4px solid #252d33;
    border-left: 1px solid #252d33;
    transition: 0.3s ease;
    padding: 8px 10px;
    flex: 0 1 calc((100% - 12px) / 2);
  }
  .dishesDoneModal.mobile .dishesDoneModal__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 5%;
  }
}
@media (max-width: 767px) and (max-width: 420px) {
  .dishesDoneModal.mobile .dishesDoneModal__body {
    scale: 80%;
  }
}
@media (max-width: 767px) {
  .dishesDoneModal.mobile .dishesDoneModal__buttons {
    width: 100%;
  }
}
.dishesDoneModal__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dishesDoneModal__body {
  position: relative;
  z-index: 10;
  margin-bottom: 55px;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dishesDoneModal__score {
  color: #252d33;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  line-height: 17.6px;
  letter-spacing: -0.176px;
  margin-bottom: 7px;
}
.dishesDoneModal__text {
  margin-bottom: 6px;
}
.dishesDoneModal__subtext {
  color: #316995;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 19.2px;
  letter-spacing: -0.176px;
  margin-bottom: 14px;
}
.dishesDoneModal__buttons {
  display: flex;
  justify-content: center;
}
.dishesDoneModal__buttons-main {
  color: #616161;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  text-decoration-line: underline;
  transition: 0.3s ease;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 17px;
  left: 0;
  bottom: -35px;
}
@media (hover: hover) {
  .dishesDoneModal__buttons-main:hover {
    cursor: pointer;
    opacity: 0.8;
  }
}
.dishesDoneModal__buttons-continue {
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
  border-radius: 100px;
  border-top: 1px solid #530a02;
  border-right: 4px solid #530a02;
  border-bottom: 4px solid #530a02;
  border-left: 1px solid #530a02;
  background: #d0351d;
  transition: 0.3s ease;
  padding: 8px 19.5px;
  width: 170px;
}
@media (hover: hover) {
  .dishesDoneModal__buttons-continue:hover {
    cursor: pointer;
    opacity: 0.8;
  }
}
/*!*************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Modals/NoConnect/style.scss ***!
  \*************************************************************************************************************************************/
.noConnectModal {
  padding: 35px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
@media (max-width: 767px) {
  .noConnectModal.mobile {
    height: 100%;
    width: 100%;
    padding-bottom: 5%;
  }
  @supports (-webkit-touch-callout: none) {
    .noConnectModal.mobile {
      height: 100dvh;
      width: 100dvw;
    }
  }
  .noConnectModal.mobile .noConnectModal__buttons-main {
    margin-bottom: 12px;
    margin-right: 0;
  }
}
@media (max-width: 767px) and (max-width: 375px) {
  .noConnectModal.mobile .noConnectModal__body {
    scale: 80%;
  }
}
@media (max-width: 767px) {
  .noConnectModal.mobile .noConnectModal__button {
    width: 100%;
  }
}
.noConnectModal__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.noConnectModal__body {
  position: relative;
  z-index: 10;
  max-width: 450px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.noConnectModal__title {
  color: #252d33;
  text-align: center;
  font-size: 24px;
  font-weight: 800;
  line-height: 26.4px;
  letter-spacing: -0.264px;
  margin-bottom: 8px;
  transform: scale(0);
  animation: scale 0.5s ease forwards 0.5s;
}
.noConnectModal__text {
  color: #316995;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 19.2px;
  letter-spacing: -0.176px;
  transform: scale(0);
  animation: scale 0.5s ease forwards 0.7s;
}
.noConnectModal__button {
  display: flex;
  justify-content: center;
  transform: scale(0);
  animation: scale 0.5s ease forwards 0.9s;
}
.noConnectModal__button div {
  padding: 8px 24px;
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  border-radius: 100px;
  border-top: 1px solid #530a02;
  border-right: 4px solid #530a02;
  border-bottom: 4px solid #530a02;
  border-left: 1px solid #530a02;
  background: #d0351d;
  transition: 0.3s ease;
}
@media (hover: hover) {
  .noConnectModal__button div:hover {
    cursor: pointer;
    opacity: 0.8;
  }
}
/*!*********************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Modals/Error/style.scss ***!
  \*********************************************************************************************************************************/
.errorModal {
  padding: 35px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  background: url(/assets/img/errorb71ae6414bbb4506bf26.webp) center/cover no-repeat;
}
@media (max-width: 767px) {
  .errorModal.mobile {
    height: 100%;
    width: 100%;
    background: url(/assets/img/errorMob1641121cb3c1db20db8f.webp) center/cover no-repeat;
  }
  @supports (-webkit-touch-callout: none) {
    .errorModal.mobile {
      height: 100dvh;
      width: 100dvw;
    }
  }
  .errorModal.mobile .errorModal__buttons-main {
    margin-bottom: 12px;
    margin-right: 0;
  }
}
@media (max-width: 767px) and (max-width: 375px) {
  .errorModal.mobile .errorModal__body {
    scale: 80%;
  }
}
@media (max-width: 767px) {
  .errorModal.mobile .errorModal__button {
    width: 100%;
  }
}
.errorModal__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.errorModal__body {
  position: relative;
  z-index: 10;
  max-width: 450px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.errorModal__title {
  color: #252d33;
  text-align: center;
  font-size: 24px;
  font-weight: 800;
  line-height: 26.4px;
  letter-spacing: -0.264px;
  margin-bottom: 8px;
  transform: scale(0);
  animation: scale 0.5s ease forwards 0.5s;
}
.errorModal__text {
  color: #316995;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 19.2px;
  letter-spacing: -0.176px;
  margin-bottom: 8px;
  transform: scale(0);
  animation: scale 0.5s ease forwards 0.7s;
}
.errorModal__button {
  display: flex;
  justify-content: center;
  transform: scale(0);
  animation: scale 0.5s ease forwards 0.9s;
}
.errorModal__button div {
  padding: 8px 24px;
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  border-radius: 100px;
  border-top: 1px solid #530a02;
  border-right: 4px solid #530a02;
  border-bottom: 4px solid #530a02;
  border-left: 1px solid #530a02;
  background: #d0351d;
  transition: 0.3s ease;
}
@media (hover: hover) {
  .errorModal__button div:hover {
    cursor: pointer;
    opacity: 0.8;
  }
}
/*!*********************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Modals/Pause/style.scss ***!
  \*********************************************************************************************************************************/
.pauseModal {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
}
@media (max-width: 767px) {
  .pauseModal.mobile .pauseModal__button {
    width: 130px;
    height: 130px;
  }
  .pauseModal.mobile .pauseModal__lobby {
    bottom: 24px;
  }
}
.pauseModal__text {
  margin-bottom: 30px;
}
.pauseModal__button {
  width: 157px;
  height: 157px;
  transition: 0.3s ease;
}
@media (hover: hover) {
  .pauseModal__button:hover {
    opacity: 0.8;
  }
}
.pauseModal__lobby {
  color: #616161;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  text-decoration-line: underline;
  position: absolute;
  bottom: 51px;
  transition: 0.3s ease;
}
@media (hover: hover) {
  .pauseModal__lobby:hover {
    cursor: pointer;
    opacity: 0.8;
  }
}
/*!****************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Modals/AlmostRecord/style.scss ***!
  \****************************************************************************************************************************************/
.almostRecordModal {
  height: 630px;
  width: 570px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  background: url(/assets/img/almostRecorde145082deb1aca7dedfc.webp) center/cover no-repeat;
}
@media (max-width: 767px) {
  .almostRecordModal.mobile {
    height: 100%;
    width: 100%;
    background: url(/assets/img/almostRecordMobe5d076c19e11dda11333.webp) center/cover no-repeat;
  }
  .almostRecordModal.mobile::after {
    background: url(/assets/img/icea51aea0d6544e5e2b964.webp) center/cover no-repeat;
    width: 100%;
    content: "";
    height: 385px;
    position: absolute;
    bottom: 0;
  }
}
@media (max-width: 767px) and (max-width: 425px) {
  .almostRecordModal.mobile::after {
    height: 308px;
  }
}
@media (max-width: 767px) {
  @supports (-webkit-touch-callout: none) {
    .almostRecordModal.mobile {
      height: 100dvh;
      width: 100dvw;
    }
  }
  .almostRecordModal.mobile .almostRecordModal__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 3%;
  }
}
@media (max-width: 767px) and (max-width: 420px) {
  .almostRecordModal.mobile .almostRecordModal__body {
    scale: 80%;
  }
}
@media (max-width: 767px) {
  .almostRecordModal.mobile .almostRecordModal__buttons {
    column-gap: 10px;
    flex-wrap: wrap;
    width: 100%;
  }
  .almostRecordModal.mobile .almostRecordModal__buttons-next {
    order: 2;
    margin-right: 0;
    flex: 0 1 calc((100% - 10px) / 2);
  }
  .almostRecordModal.mobile .almostRecordModal__buttons-restart {
    flex: 1 0 100%;
    order: 1;
    margin-bottom: 12px;
  }
  .almostRecordModal.mobile .almostRecordModal__buttons-main {
    position: static;
    order: 3;
    bottom: unset;
    height: unset;
    flex: 0 1 calc((100% - 10px) / 2);
    color: #252d33;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    border-radius: 100px;
    border-top: 1px solid #252d33;
    border-right: 4px solid #252d33;
    border-bottom: 4px solid #252d33;
    border-left: 1px solid #252d33;
    transition: 0.3s ease;
    padding: 8px 24px;
    text-decoration: none;
  }
  .almostRecordModal.mobile.lastLvl .almostRecordModal__buttons-restart {
    flex: 1 1 calc((100% - 10px) / 2);
    margin-bottom: 0;
  }
  .almostRecordModal.mobile.lastLvl .almostRecordModal__buttons-main {
    flex: 1 1 calc((100% - 10px) / 2);
  }
}
.almostRecordModal.lastLvl .almostRecordModal__buttons-next {
  display: none;
}
.almostRecordModal__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.almostRecordModal__body {
  position: relative;
  z-index: 10;
  margin-bottom: 55px;
  max-width: 380px;
}
.almostRecordModal__score {
  color: #252d33;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  line-height: 17.6px;
  letter-spacing: -0.176px;
  margin-bottom: 7px;
}
.almostRecordModal__text {
  margin-bottom: 6px;
}
.almostRecordModal__subtext {
  color: #316995;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 19.2px;
  letter-spacing: -0.176px;
  margin-bottom: 17px;
}
.almostRecordModal__buttons {
  display: flex;
  justify-content: center;
}
.almostRecordModal__buttons-next {
  color: #252d33;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
  border-radius: 100px;
  border-top: 1px solid #252d33;
  border-right: 4px solid #252d33;
  border-bottom: 4px solid #252d33;
  border-left: 1px solid #252d33;
  transition: 0.3s ease;
  padding: 8px 14px;
  margin-right: 12px;
  flex: 0 1 calc((100% - 10px) / 2);
}
@media (hover: hover) {
  .almostRecordModal__buttons-next:hover {
    cursor: pointer;
    opacity: 0.8;
  }
}
.almostRecordModal__buttons-restart {
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
  border-radius: 100px;
  border-top: 1px solid #530a02;
  border-right: 4px solid #530a02;
  border-bottom: 4px solid #530a02;
  border-left: 1px solid #530a02;
  background: #d0351d;
  transition: 0.3s ease;
  padding: 8px 24px;
  flex: 1 0 auto;
  flex: 0 1 calc((100% - 10px) / 2);
}
@media (hover: hover) {
  .almostRecordModal__buttons-restart:hover {
    cursor: pointer;
    opacity: 0.8;
  }
}
.almostRecordModal__buttons-main {
  color: #616161;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  text-decoration-line: underline;
  transition: 0.3s ease;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 17px;
  left: 0;
  bottom: -35px;
}
@media (hover: hover) {
  .almostRecordModal__buttons-main:hover {
    cursor: pointer;
    opacity: 0.8;
  }
}
/*!*****************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Modals/NewRecordFail/style.scss ***!
  \*****************************************************************************************************************************************/
.newRecordFailModal {
  height: 632px;
  width: 570px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  background: url(/assets/img/newRecordFail7d4396aaf41c51d90083.webp) center/cover no-repeat;
}
@media (max-width: 767px) {
  .newRecordFailModal.mobile {
    height: 100%;
    width: 100%;
    background: url(/assets/img/newRecordFailMoba47b17336277dcd0c7e8.webp) center/cover no-repeat;
  }
  .newRecordFailModal.mobile::after {
    background: url(/assets/img/icea51aea0d6544e5e2b964.webp) center/cover no-repeat;
    width: 100%;
    content: "";
    height: 385px;
    position: absolute;
    bottom: 0;
  }
}
@media (max-width: 767px) and (max-width: 425px) {
  .newRecordFailModal.mobile::after {
    background-position: center;
  }
}
@media (max-width: 767px) {
  @supports (-webkit-touch-callout: none) {
    .newRecordFailModal.mobile {
      height: 100dvh;
      width: 100dvw;
    }
  }
  .newRecordFailModal.mobile .newRecordFailModal__buttons-main {
    color: #252d33;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    border-radius: 100px;
    border-top: 1px solid #252d33;
    border-right: 4px solid #252d33;
    border-bottom: 4px solid #252d33;
    border-left: 1px solid #252d33;
    transition: 0.3s ease;
    padding: 8px 24px;
    position: static;
    text-decoration: unset;
    width: 100%;
  }
  .newRecordFailModal.mobile .newRecordFailModal__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 5%;
    scale: 90%;
  }
  .newRecordFailModal.mobile .newRecordFailModal__buttons-continue {
    width: 100%;
    margin-bottom: 12px;
  }
  .newRecordFailModal.mobile .newRecordFailModal__buttons-share {
    width: 100%;
  }
  .newRecordFailModal.mobile .newRecordFailModal__buttons-container {
    display: flex;
    width: 100%;
    order: 1;
  }
  .newRecordFailModal.mobile .newRecordFailModal__text {
    width: 100%;
  }
  .newRecordFailModal.mobile .newRecordFailModal__buttons {
    width: 100%;
    flex-direction: column;
  }
}
.newRecordFailModal__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.newRecordFailModal__body {
  position: relative;
  z-index: 10;
  margin-bottom: 40px;
  max-width: 433px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.newRecordFailModal__score {
  color: #252d33;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  line-height: 17.6px;
  letter-spacing: -0.176px;
  margin-bottom: 5px;
}
.newRecordFailModal__text {
  width: 380px;
}
.newRecordFailModal__subtext {
  text-align: center;
  color: #316995;
  font-size: 16px;
  font-weight: 400;
  line-height: 120%; /* 19.2px */
  letter-spacing: -0.176px;
}
.newRecordFailModal__buttons {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.newRecordFailModal__buttons-main {
  color: #616161;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  text-decoration-line: underline;
  transition: 0.3s ease;
  position: absolute;
  bottom: -61px;
  left: 165px;
}
@media (hover: hover) {
  .newRecordFailModal__buttons-main:hover {
    cursor: pointer;
    opacity: 0.8;
  }
}
.newRecordFailModal__buttons-share {
  color: #252d33;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
  border-radius: 100px;
  border-top: 1px solid #252d33;
  border-right: 4px solid #252d33;
  border-bottom: 4px solid #252d33;
  border-left: 1px solid #252d33;
  transition: 0.3s ease;
  padding: 8px 24px;
  margin-right: 12px;
}
@media (hover: hover) {
  .newRecordFailModal__buttons-share:hover {
    cursor: pointer;
    opacity: 0.8;
  }
}
.newRecordFailModal__buttons-continue {
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
  border-radius: 100px;
  border-top: 1px solid #530a02;
  border-right: 4px solid #530a02;
  border-bottom: 4px solid #530a02;
  border-left: 1px solid #530a02;
  background: #d0351d;
  transition: 0.3s ease;
  padding: 8px 24px;
  width: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (hover: hover) {
  .newRecordFailModal__buttons-continue:hover {
    cursor: pointer;
    opacity: 0.8;
  }
}
/*!*************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Modals/NewRecord/style.scss ***!
  \*************************************************************************************************************************************/
.newRecordModal {
  height: 612px;
  width: 570px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  background: url(/assets/img/newRecordd0fb5f92f5832d45b9ce.webp) center/cover no-repeat;
}
@media (max-width: 767px) {
  .newRecordModal.mobile {
    height: 100%;
    width: 100%;
    background: url(/assets/img/newRecordMob0b3444e79353114f543a.webp) top/cover no-repeat;
  }
  .newRecordModal.mobile::after {
    background: url(/assets/img/icea51aea0d6544e5e2b964.webp) center/cover no-repeat;
    width: 100%;
    content: "";
    height: 385px;
    position: absolute;
    bottom: 0;
  }
}
@media (max-width: 767px) and (max-width: 425px) {
  .newRecordModal.mobile::after {
    background-position: center;
    height: 308px;
  }
}
@media (max-width: 767px) {
  @supports (-webkit-touch-callout: none) {
    .newRecordModal.mobile {
      height: 100dvh;
      width: 100dvw;
    }
  }
  .newRecordModal.mobile .newRecordModal__buttons-main {
    color: #252d33;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    border-radius: 100px;
    border-top: 1px solid #252d33;
    border-right: 4px solid #252d33;
    border-bottom: 4px solid #252d33;
    border-left: 1px solid #252d33;
    transition: 0.3s ease;
    padding: 8px 24px;
    position: static;
    text-decoration: unset;
    width: 100%;
    grid-area: main;
  }
  .newRecordModal.mobile .newRecordModal__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 5%;
    scale: 90%;
  }
}
@media (max-width: 767px) and (max-width: 375px) {
  .newRecordModal.mobile .newRecordModal__body {
    scale: 80%;
  }
}
@media (max-width: 767px) {
  .newRecordModal.mobile .newRecordModal__buttons-continue {
    width: 100%;
    grid-area: next;
  }
  .newRecordModal.mobile .newRecordModal__subtext {
    max-width: 365px;
  }
  .newRecordModal.mobile .newRecordModal__buttons-restart {
    grid-area: restart;
    margin-right: 0;
  }
  .newRecordModal.mobile .newRecordModal__buttons-share {
    width: 100%;
    grid-area: share;
    margin-right: 0;
  }
  .newRecordModal.mobile .newRecordModal__text {
    width: 100%;
  }
  .newRecordModal.mobile .newRecordModal__buttons {
    width: 100%;
    display: grid;
    gap: 8px 10px;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "restart next" "share main";
  }
  .newRecordModal.mobile.lastLvl .newRecordModal__buttons-share, .newRecordModal.mobile.lastLvl .newRecordModal__buttons-main {
    flex: 1 1 calc((100% - 10px) / 2);
    width: unset !important;
  }
  .newRecordModal.mobile.lastLvl .newRecordModal__buttons-restart {
    grid-column: 1/3;
    width: unset !important;
  }
}
.newRecordModal.lastLvl .newRecordModal__buttons-continue {
  display: none;
}
.newRecordModal.lastLvl .newRecordModal__buttons-share {
  width: 130px;
}
.newRecordModal.lastLvl .newRecordModal__buttons-restart {
  width: 130px;
  border-top: 1px solid #530a02;
  border-right: 4px solid #530a02;
  border-bottom: 4px solid #530a02;
  border-left: 1px solid #530a02;
  background: #d0351d;
  color: #fff;
}
.newRecordModal__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.newRecordModal__body {
  position: relative;
  z-index: 10;
  margin-bottom: 45px;
  max-width: 433px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.newRecordModal__score {
  color: #252d33;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  line-height: 17.6px;
  letter-spacing: -0.176px;
  margin-bottom: 8px;
}
.newRecordModal__text {
  width: 380px;
}
.newRecordModal__subtext {
  text-align: center;
  color: #316995;
  font-size: 16px;
  font-weight: 400;
  line-height: 120%; /* 19.2px */
  letter-spacing: -0.176px;
}
.newRecordModal__buttons {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}
.newRecordModal__buttons-main {
  color: #616161;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  text-decoration-line: underline;
  transition: 0.3s ease;
  position: absolute;
  bottom: -71px;
  left: 145px;
}
@media (hover: hover) {
  .newRecordModal__buttons-main:hover {
    cursor: pointer;
    opacity: 0.8;
  }
}
.newRecordModal__buttons-share {
  color: #252d33;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
  border-radius: 100px;
  border-top: 1px solid #252d33;
  border-right: 4px solid #252d33;
  border-bottom: 4px solid #252d33;
  border-left: 1px solid #252d33;
  transition: 0.3s ease;
  padding: 8px 24px;
  margin-right: 12px;
}
@media (hover: hover) {
  .newRecordModal__buttons-share:hover {
    cursor: pointer;
    opacity: 0.8;
  }
}
.newRecordModal__buttons-restart {
  border-radius: 100px;
  border-top: 1px solid #252d33;
  border-right: 4px solid #252d33;
  border-bottom: 4px solid #252d33;
  border-left: 1px solid #252d33;
  transition: 0.3s ease;
  padding: 8px 19.5px;
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (hover: hover) {
  .newRecordModal__buttons-restart:hover {
    cursor: pointer;
    opacity: 0.8;
  }
}
.newRecordModal__buttons-continue {
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
  border-radius: 100px;
  border-top: 1px solid #530a02;
  border-right: 4px solid #530a02;
  border-bottom: 4px solid #530a02;
  border-left: 1px solid #530a02;
  background: #d0351d;
  transition: 0.3s ease;
  padding: 5px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (hover: hover) {
  .newRecordModal__buttons-continue:hover {
    cursor: pointer;
    opacity: 0.8;
  }
}
/*!********************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Modals/Fail/style.scss ***!
  \********************************************************************************************************************************/
.fail {
  height: 100%;
  width: 100%;
}
/*!***************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/containers/Modals/style.scss ***!
  \***************************************************************************************************************************/
.modal {
  position: fixed;
  top: 50%;
  right: 0;
  bottom: 0;
  left: 50%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  z-index: 9999;
  transition: 0s ease;
  transform: translate(-50%, -50%);
  width: 680px;
  height: 740px;
}
@media (max-width: 767px) {
  .modal.mobile {
    height: 100%;
    width: 100%;
  }
  .modal.mobile .modal__content {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
  }
  .modal.mobile .modal__title {
    font-size: 22px;
    font-weight: 500;
    line-height: 28.6px;
    margin-bottom: 4px;
  }
  .modal.mobile .modal__close {
    display: none;
  }
}
.modal.show-modal {
  visibility: visible;
  opacity: 1;
  transition: 0.3s ease;
}
.modal.show-modal .modal__content {
  transform: scale(1);
}
.modal .modal__content {
  max-width: 680px;
  max-height: 740px;
  position: relative;
  border-radius: 16px;
  transform: scale(0);
  transition: 0.4s ease-in-out 0.2s;
  box-sizing: border-box;
}
.modal .modal__close {
  position: absolute;
  width: 28px;
  height: 28px;
  top: 0px;
  right: -34px;
  transition: 0.3s ease;
}
.modal .modal__close img {
  width: 100%;
  height: 100%;
}
@media (hover: hover) {
  .modal .modal__close:hover {
    cursor: pointer;
    opacity: 0.8;
  }
}
.modal .modal__title {
  color: #1a1a1a;
  text-align: center;
  font-size: 24px;
  font-weight: 500;
  line-height: 31.2px;
  margin-bottom: 10px;
}
.modal.noConnect, .modal.error, .modal.pause {
  padding: 0;
}
.modal.noConnect .modal__content, .modal.error .modal__content, .modal.pause .modal__content {
  width: 100%;
  height: 100%;
  max-width: unset;
  max-height: unset;
}
/*!*******************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Main/Lobby/style.scss ***!
  \*******************************************************************************************************************************/
.lobby {
  padding: 20px 32.5px 0;
  width: 100%;
  background: #0a0a16;
}
@media (max-width: 767px) {
  .lobby.mobile {
    padding: 0;
    height: 100%;
  }
  @supports (-webkit-touch-callout: none) {
    @media screen and (max-width: 767px) and (min-height: 737px) {
      .lobby.mobile {
        padding: 58px 0 10px 0px;
      }
      .lobby.mobile .level__close {
        top: 78px !important;
      }
      .lobby.mobile .level__info-button {
        bottom: 30px !important;
      }
      .lobby.mobile .level__progress {
        top: 78px !important;
      }
    }
  }
  .lobby.mobile .lobby__container {
    padding: 16px;
    justify-content: unset;
  }
  .lobby.mobile .lobby__userBar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px;
  }
  .lobby.mobile .lobby__userBar-highScore {
    font-size: 14px;
    order: 2;
  }
  .lobby.mobile .lobby__userBar-title {
    font-size: 18px;
    order: 1;
    width: 100%;
    flex: 1 0 auto;
    text-align: center;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(111, 111, 157, 0.2);
  }
  .lobby.mobile .lobby__userBar-buttons {
    order: 3;
    display: grid;
    grid-template-columns: auto auto;
  }
  .lobby.mobile .lobby__userBar-button {
    transition: 0.3s ease;
  }
  .lobby.mobile .lobby__userBar-button img {
    width: 20px;
    height: 20px;
  }
  .lobby.mobile .lobby__userBar-button:first-child {
    position: relative;
  }
  .lobby.mobile .lobby__userBar-button:first-child::before {
    width: 14px;
    height: 14px;
    font-size: 10px;
  }
  .lobby.mobile .lobby__start-arrow {
    right: 42%;
    z-index: 15;
    transform: scale(0);
    width: 50px;
  }
  .lobby.mobile .lobby__start div {
    top: 0px;
    transform: translateY(-100%);
  }
  .lobby.mobile .lobby__start-girl {
    width: 62.899px;
    height: 61.842px;
  }
  .lobby.mobile .lobby__start-text {
    font-size: 10px;
    line-height: 11px;
    letter-spacing: -0.11px;
    padding: 9px 16px;
  }
  .lobby.mobile .lobby__levels {
    margin: auto 0;
  }
  .lobby.mobile .lobby__levels-item {
    border-radius: 8px;
  }
  .lobby.mobile .lobby__levels-item.closed {
    width: 55px;
  }
  .lobby.mobile .lobby__levels-item.level-0.prev {
    width: 65px;
  }
}
.lobby__container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}
.lobby__userBar {
  border-radius: 12px;
  background: #1b1b34;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transform: scale(0);
  animation: scale 0.3s ease forwards 0.2s;
}
.lobby__userBar-highScore {
  color: #6f6f9d;
  font-size: 18px;
  font-weight: 600;
  line-height: normal;
  flex: 0 0 110px;
}
.lobby__userBar-highScore span {
  opacity: 0;
  animation: arrow-opacity 0.3s ease forwards 0.5s;
}
.lobby__userBar-title {
  color: #fff;
  font-size: 24px;
  font-weight: 600;
  line-height: normal;
}
.lobby__userBar-buttons {
  display: flex;
  align-items: center;
  gap: 16px;
}
.lobby__userBar-button {
  transition: 0.3s ease;
}
@media (hover: hover) {
  .lobby__userBar-button:hover {
    cursor: pointer;
    opacity: 0.8;
  }
}
.lobby__userBar-button:first-child {
  position: relative;
}
.lobby__userBar-button:first-child::before {
  content: attr(data-gifts);
  position: absolute;
  border-radius: 50px;
  border: 2px solid #1b1b34;
  background: #d0351d;
  width: 16px;
  height: 16px;
  bottom: 0;
  right: 0;
  transform: translate(6px, 7px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  opacity: 0;
  animation: arrow-opacity 0.3s ease forwards 0.5s;
}
.lobby__start {
  width: 100%;
}
.lobby__start-arrow {
  position: absolute;
  top: 22%;
  right: 40%;
  transform: translateY(0px);
  opacity: 0;
  animation: arrow-opacity 0.5s ease forwards 1.4s, arrow-move 1.5s infinite cubic-bezier(0.3, 0.7, 0.6, 1) 1.4s;
}
.lobby__start div {
  display: flex;
  align-items: flex-end;
  align-items: center;
  justify-content: center;
  gap: 15px;
  position: absolute;
  top: -20px;
  width: 100%;
  z-index: 15;
}
.lobby__start-girl {
  width: 126px;
  height: 118px;
  transform: scale(0);
  animation: scale 0.5s ease forwards 0.6s;
}
.lobby__start-text {
  color: #7c6461;
  font-size: 14px;
  font-weight: 400;
  line-height: 15.4px;
  letter-spacing: -0.154px;
  padding: 15px 18px;
  background: #fff;
  border-radius: 13px 13px 13px 0;
  position: relative;
  max-width: 306px;
  transform: scale(0);
  animation: scale 0.5s ease forwards 1.1s;
  box-shadow: 5px 15px 45px 5px rgba(10, 10, 22, 0.53);
}
.lobby__start-text::after {
  content: "";
  position: absolute;
  height: 23px;
  width: 14px;
  left: -14px;
  bottom: 0;
  border-top: 23px solid transparent;
  border-left: 14px solid transparent;
  border-bottom: 23px solid #fff;
  border-right: 14px solid #fff;
}
.lobby__levels {
  position: relative;
}
.lobby__levels-bg {
  width: 100%;
  height: 100%;
  max-height: 615px;
  max-width: 615px;
  background: center/cover no-repeat;
}
.lobby__levels-item {
  position: absolute;
  color: #fff;
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  border-radius: 100px;
  transition: 0.3s ease;
  width: 80px;
  padding: 4px;
  z-index: 10;
  transform: scale(0);
  user-select: none;
}
@supports (font-size: clamp( 0.625rem , 0.484375rem  +  0.625vw , 0.75rem )) {
  .lobby__levels-item {
    font-size: clamp( 0.625rem , 0.484375rem  +  0.625vw , 0.75rem );
  }
}
@supports not (font-size: clamp( 0.625rem , 0.484375rem  +  0.625vw , 0.75rem )) {
  .lobby__levels-item {
    font-size: calc(0.625rem + 0.125 * (100vw - 22.5rem) / 20);
  }
}
@supports (width: clamp( 3.125rem , 1.015625rem  +  9.375vw , 5rem )) {
  .lobby__levels-item {
    width: clamp( 3.125rem , 1.015625rem  +  9.375vw , 5rem );
  }
}
@supports not (width: clamp( 3.125rem , 1.015625rem  +  9.375vw , 5rem )) {
  .lobby__levels-item {
    width: calc(3.125rem + 1.875 * (100vw - 22.5rem) / 20);
  }
}
@media (hover: hover) {
  .lobby__levels-item:hover {
    cursor: pointer;
    opacity: 0.9;
  }
}
.lobby__levels-item::before {
  content: attr(data-label);
  position: absolute;
  color: #7c6461;
  width: 100px;
  top: -24px;
  left: 0;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
}
@supports (left: clamp( -1.5625rem , -2.6171875rem  +  4.6875vw , -0.625rem )) {
  .lobby__levels-item::before {
    left: clamp( -1.5625rem , -2.6171875rem  +  4.6875vw , -0.625rem );
  }
}
@supports not (left: clamp( -1.5625rem , -2.6171875rem  +  4.6875vw , -0.625rem )) {
  .lobby__levels-item::before {
    left: calc(-1.5625rem + 0.9375 * (100vw - 22.5rem) / 20);
  }
}
@supports (top: clamp( -1.5rem , -0.4375rem  +  -2.5vw , -1rem )) {
  .lobby__levels-item::before {
    top: clamp( -1.5rem , -0.4375rem  +  -2.5vw , -1rem );
  }
}
@supports not (top: clamp( -1.5rem , -0.4375rem  +  -2.5vw , -1rem )) {
  .lobby__levels-item::before {
    top: calc(-1rem + -0.5 * (100vw - 22.5rem) / 20);
  }
}
@supports (font-size: clamp( 0.625rem , 0.484375rem  +  0.625vw , 0.75rem )) {
  .lobby__levels-item::before {
    font-size: clamp( 0.625rem , 0.484375rem  +  0.625vw , 0.75rem );
  }
}
@supports not (font-size: clamp( 0.625rem , 0.484375rem  +  0.625vw , 0.75rem )) {
  .lobby__levels-item::before {
    font-size: calc(0.625rem + 0.125 * (100vw - 22.5rem) / 20);
  }
}
.lobby__levels-item.prev {
  border-top: 1px solid rgba(30, 66, 46, 0.8);
  border-right: 3px solid rgba(30, 66, 46, 0.8);
  border-bottom: 3px solid rgba(30, 66, 46, 0.8);
  border-left: 1px solid rgba(30, 66, 46, 0.8);
  background: rgba(31, 151, 84, 0.9);
  box-shadow: 0px 2px 40px 0px rgba(0, 0, 0, 0.8);
}
.lobby__levels-item.prev::before {
  display: none;
}
.lobby__levels-item.current {
  border-top: 1px solid #530a02;
  border-right: 4px solid #530a02;
  border-bottom: 4px solid #530a02;
  border-left: 1px solid #530a02;
  background: #d0351d;
}
.lobby__levels-item.closed {
  border: 1px solid #fffdfd;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.2);
  color: #cabab8;
  pointer-events: none;
}
.lobby__levels-item.closed::after {
  content: url(/assets/img/lock6db71156c0775b374ee6.svg);
  position: absolute;
  right: -7.5px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 20px;
}
.lobby__levels-item.closed::before {
  display: none;
}
.lobby__levels-item.level-0 {
  top: 47.1544%;
  right: 41.9268%;
  animation: scale 0.3s ease forwards 0.2s;
}
.lobby__levels-item.level-0.prev {
  top: 58.2113%;
  right: 42.2764%;
}
.lobby__levels-item.level-1 {
  top: 23.252%;
  right: 31.2195%;
  animation: scale 0.3s ease forwards 0.3s;
}
.lobby__levels-item.level-1.prev {
  top: 28.943%;
  right: 31.0569%;
}
.lobby__levels-item.level-1.closed {
  top: 20.3252%;
  right: 31.2195%;
}
.lobby__levels-item.level-2 {
  top: 49.4308%;
  right: 76.2601%;
  animation: scale 0.3s ease forwards 0.4s;
}
.lobby__levels-item.level-2.prev {
  top: 55.1219%;
  right: 75.7723%;
}
.lobby__levels-item.level-2.closed {
  top: 46.504%;
  right: 76.2601%;
}
.lobby__levels-item.level-3 {
  top: 70.7317%;
  right: 20.4878%;
  animation: scale 0.3s ease forwards 0.5s;
}
.lobby__levels-item.level-3.prev {
  top: 79.5121%;
  right: 20.4878%;
}
.lobby__levels-item.level-3.closed {
  top: 67.8048%;
  right: 20.4878%;
}
.lobby__levels-item.level-4 {
  top: 76.2601%;
  right: 45.691%;
  animation: scale 0.3s ease forwards 0.6s;
}
.lobby__levels-item.level-4.prev {
  top: 80.6504%;
  right: 45.3658%;
}
.lobby__levels-item.level-4.closed {
  top: 73.3333%;
  right: 45.3658%;
}
.lobby__levels-item.level-5 {
  top: 49.1056%;
  right: 10.5691%;
  animation: scale 0.3s ease forwards 0.7s;
}
.lobby__levels-item.level-5.prev {
  top: 58.0487%;
  right: 10.5691%;
}
.lobby__levels-item.level-5.closed {
  top: 46.1788%;
  right: 10.5691%;
}
.lobby__levels-item.level-6 {
  top: 72.6829%;
  right: 69.1056%;
  animation: scale 0.3s ease forwards 0.8s;
}
.lobby__levels-item.level-6.prev {
  top: 80.6504%;
  right: 69.1056%;
}
.lobby__levels-item.level-6.closed {
  top: 69.756%;
  right: 69.1056%;
}
.lobby__levels-salad {
  position: absolute;
}
.lobby__levels-salad.closed {
  display: none;
}
.lobby__levels-salad.salad-0 {
  top: 32.3577235772%;
  right: 33.0081300813%;
}
@supports (width: clamp( 6.375rem , -0.8671875rem  +  32.1875vw , 12.8125rem )) {
  .lobby__levels-salad.salad-0 {
    width: clamp( 6.375rem , -0.8671875rem  +  32.1875vw , 12.8125rem );
  }
}
@supports not (width: clamp( 6.375rem , -0.8671875rem  +  32.1875vw , 12.8125rem )) {
  .lobby__levels-salad.salad-0 {
    width: calc(6.375rem + 6.4375 * (100vw - 22.5rem) / 20);
  }
}
@supports (height: clamp( 5.9375rem , -0.8125rem  +  30vw , 11.9375rem )) {
  .lobby__levels-salad.salad-0 {
    height: clamp( 5.9375rem , -0.8125rem  +  30vw , 11.9375rem );
  }
}
@supports not (height: clamp( 5.9375rem , -0.8125rem  +  30vw , 11.9375rem )) {
  .lobby__levels-salad.salad-0 {
    height: calc(5.9375rem + 6 * (100vw - 22.5rem) / 20);
  }
}
.lobby__levels-salad.salad-1 {
  top: 12.6829268293%;
  right: 26.0162601626%;
}
@supports (width: clamp( 4.53125rem , -0.5699921875rem  +  22.6721875vw , 9.0656875rem )) {
  .lobby__levels-salad.salad-1 {
    width: clamp( 4.53125rem , -0.5699921875rem  +  22.6721875vw , 9.0656875rem );
  }
}
@supports not (width: clamp( 4.53125rem , -0.5699921875rem  +  22.6721875vw , 9.0656875rem )) {
  .lobby__levels-salad.salad-1 {
    width: calc(4.53125rem + 4.5344375 * (100vw - 22.5rem) / 20);
  }
}
@supports (height: clamp( 4.03125rem , -0.510375rem  +  20.185vw , 8.06825rem )) {
  .lobby__levels-salad.salad-1 {
    height: clamp( 4.03125rem , -0.510375rem  +  20.185vw , 8.06825rem );
  }
}
@supports not (height: clamp( 4.03125rem , -0.510375rem  +  20.185vw , 8.06825rem )) {
  .lobby__levels-salad.salad-1 {
    height: calc(4.03125rem + 4.037 * (100vw - 22.5rem) / 20);
  }
}
.lobby__levels-salad.salad-2 {
  top: 36.7479674797%;
  right: 69.918699187%;
}
@supports (width: clamp( 4.96875rem , -0.48046875rem  +  24.21875vw , 9.8125rem )) {
  .lobby__levels-salad.salad-2 {
    width: clamp( 4.96875rem , -0.48046875rem  +  24.21875vw , 9.8125rem );
  }
}
@supports not (width: clamp( 4.96875rem , -0.48046875rem  +  24.21875vw , 9.8125rem )) {
  .lobby__levels-salad.salad-2 {
    width: calc(4.96875rem + 4.84375 * (100vw - 22.5rem) / 20);
  }
}
@supports (height: clamp( 4.59375rem , -0.57421875rem  +  22.96875vw , 9.1875rem )) {
  .lobby__levels-salad.salad-2 {
    height: clamp( 4.59375rem , -0.57421875rem  +  22.96875vw , 9.1875rem );
  }
}
@supports not (height: clamp( 4.59375rem , -0.57421875rem  +  22.96875vw , 9.1875rem )) {
  .lobby__levels-salad.salad-2 {
    height: calc(4.59375rem + 4.59375 * (100vw - 22.5rem) / 20);
  }
}
.lobby__levels-salad.salad-3 {
  top: 56.5853658537%;
  right: 13.6585365854%;
}
@supports (width: clamp( 5.4375rem , -0.6796875rem  +  27.1875vw , 10.875rem )) {
  .lobby__levels-salad.salad-3 {
    width: clamp( 5.4375rem , -0.6796875rem  +  27.1875vw , 10.875rem );
  }
}
@supports not (width: clamp( 5.4375rem , -0.6796875rem  +  27.1875vw , 10.875rem )) {
  .lobby__levels-salad.salad-3 {
    width: calc(5.4375rem + 5.4375 * (100vw - 22.5rem) / 20);
  }
}
@supports (height: clamp( 5.25rem , -0.65625rem  +  26.25vw , 10.5rem )) {
  .lobby__levels-salad.salad-3 {
    height: clamp( 5.25rem , -0.65625rem  +  26.25vw , 10.5rem );
  }
}
@supports not (height: clamp( 5.25rem , -0.65625rem  +  26.25vw , 10.5rem )) {
  .lobby__levels-salad.salad-3 {
    height: calc(5.25rem + 5.25 * (100vw - 22.5rem) / 20);
  }
}
.lobby__levels-salad.salad-4 {
  top: 65.5284552846%;
  right: 41.7886178862%;
}
@supports (width: clamp( 3.96875rem , -0.49609375rem  +  19.84375vw , 7.9375rem )) {
  .lobby__levels-salad.salad-4 {
    width: clamp( 3.96875rem , -0.49609375rem  +  19.84375vw , 7.9375rem );
  }
}
@supports not (width: clamp( 3.96875rem , -0.49609375rem  +  19.84375vw , 7.9375rem )) {
  .lobby__levels-salad.salad-4 {
    width: calc(3.96875rem + 3.96875 * (100vw - 22.5rem) / 20);
  }
}
@supports (height: clamp( 3.84375rem , -0.48046875rem  +  19.21875vw , 7.6875rem )) {
  .lobby__levels-salad.salad-4 {
    height: clamp( 3.84375rem , -0.48046875rem  +  19.21875vw , 7.6875rem );
  }
}
@supports not (height: clamp( 3.84375rem , -0.48046875rem  +  19.21875vw , 7.6875rem )) {
  .lobby__levels-salad.salad-4 {
    height: calc(3.84375rem + 3.84375 * (100vw - 22.5rem) / 20);
  }
}
.lobby__levels-salad.salad-5 {
  top: 35.9349593496%;
  right: 3.9024390244%;
}
@supports (width: clamp( 4.89375rem , -0.63984375rem  +  24.59375vw , 9.8125rem )) {
  .lobby__levels-salad.salad-5 {
    width: clamp( 4.89375rem , -0.63984375rem  +  24.59375vw , 9.8125rem );
  }
}
@supports not (width: clamp( 4.89375rem , -0.63984375rem  +  24.59375vw , 9.8125rem )) {
  .lobby__levels-salad.salad-5 {
    width: calc(4.89375rem + 4.91875 * (100vw - 22.5rem) / 20);
  }
}
@supports (height: clamp( 4.71875rem , -0.58984375rem  +  23.59375vw , 9.4375rem )) {
  .lobby__levels-salad.salad-5 {
    height: clamp( 4.71875rem , -0.58984375rem  +  23.59375vw , 9.4375rem );
  }
}
@supports not (height: clamp( 4.71875rem , -0.58984375rem  +  23.59375vw , 9.4375rem )) {
  .lobby__levels-salad.salad-5 {
    height: calc(4.71875rem + 4.71875 * (100vw - 22.5rem) / 20);
  }
}
.lobby__levels-salad.salad-6 {
  top: 59.674796748%;
  right: 62.1138211382%;
}
@supports (width: clamp( 5.09375rem , -0.63671875rem  +  25.46875vw , 10.1875rem )) {
  .lobby__levels-salad.salad-6 {
    width: clamp( 5.09375rem , -0.63671875rem  +  25.46875vw , 10.1875rem );
  }
}
@supports not (width: clamp( 5.09375rem , -0.63671875rem  +  25.46875vw , 10.1875rem )) {
  .lobby__levels-salad.salad-6 {
    width: calc(5.09375rem + 5.09375 * (100vw - 22.5rem) / 20);
  }
}
@supports (height: clamp( 4.84375rem , -0.60546875rem  +  24.21875vw , 9.6875rem )) {
  .lobby__levels-salad.salad-6 {
    height: clamp( 4.84375rem , -0.60546875rem  +  24.21875vw , 9.6875rem );
  }
}
@supports not (height: clamp( 4.84375rem , -0.60546875rem  +  24.21875vw , 9.6875rem )) {
  .lobby__levels-salad.salad-6 {
    height: calc(4.84375rem + 4.84375 * (100vw - 22.5rem) / 20);
  }
}
.lobby__sound {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 40px;
  height: 40px;
  transition: 0.3s ease;
}
@media (hover: hover) {
  .lobby__sound:hover {
    opacity: 0.8;
    cursor: pointer;
  }
}
.lobby__clearSession {
  position: absolute;
  left: 16px;
  bottom: 16px;
  width: 40px;
  height: 40px;
  transition: 0.3s ease;
}
@media (hover: hover) {
  .lobby__clearSession:hover {
    opacity: 0.8;
    cursor: pointer;
  }
}
/*!*************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/containers/Main/style.scss ***!
  \*************************************************************************************************************************/
.main {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/*!*******************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Main/Level/style.scss ***!
  \*******************************************************************************************************************************/
.level {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: url(/assets/img/levelBgc3a4e349d078b1f5d2d7.webp) center/cover no-repeat;
}
@media (max-width: 767px) {
  .level.mobile {
    height: 100%;
  }
  @supports (-webkit-touch-callout: none) {
    @media screen and (max-width: 767px) and (min-height: 737px) {
      .level.mobile {
        padding: 58px 0 10px 0px;
      }
      .level.mobile .level__close {
        top: 78px !important;
      }
      .level.mobile .level__info-button {
        bottom: 30px !important;
      }
      .level.mobile .level__progress {
        top: 78px !important;
      }
    }
  }
  .level.mobile .level__info {
    padding: 16px;
    height: 100%;
  }
  .level.mobile .level__info-title {
    font-size: 18px;
    line-height: 19.8px;
    letter-spacing: -0.198px;
  }
  .level.mobile .level__info-instruction {
    font-size: 14px;
    line-height: 16.8px;
    letter-spacing: -0.154px;
  }
  .level.mobile .level__info-body {
    flex-direction: column;
    padding: 20px;
    overflow: auto;
    background: none;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.3);
  }
  .level.mobile .level__info-button {
    position: fixed;
    bottom: 20px;
    width: 170px;
    left: 50%;
    transform: translateX(-50%);
  }
  .level.mobile .level__info-right {
    padding-bottom: 50px;
  }
  .level.mobile .level__info-right > div:nth-child(2) {
    height: unset;
  }
  .level.mobile .level__progress {
    padding: 12px;
    top: 20px;
    left: 16px;
  }
  .level.mobile .level__progress-barFull {
    width: 155px;
  }
  .level.mobile .level__sound {
    right: 16px;
    bottom: 16px;
    width: 40px;
    height: 40px;
  }
  .level.mobile .level__pause {
    left: 16px;
    bottom: 16px;
    width: 40px;
    height: 40px;
  }
}
@media (max-width: 450px) {
  .level.mobile .level__info-button {
    left: 16px;
    width: calc(100% - 32px);
    transform: translateX(0);
  }
}
.level__close {
  position: absolute;
  left: 20px;
  top: 20px;
  transition: 0.3s ease;
}
@media (hover: hover) {
  .level__close:hover {
    opacity: 0.8;
    cursor: pointer;
  }
}
.level__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}
.level__info-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 550px;
  text-align: center;
}
.level__info-lvl {
  color: rgba(255, 255, 255, 0.5);
  font-size: 16px;
  font-weight: 400;
  line-height: 19.2px;
  letter-spacing: -0.176px;
}
.level__info-title {
  color: #fff;
  font-size: 24px;
  font-weight: 800;
  line-height: 26.4px;
  letter-spacing: -0.264px;
}
.level__info-instruction {
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  line-height: 19.2px;
  letter-spacing: -0.176px;
}
.level__info-body {
  max-width: 608px;
  border-radius: 10px;
  padding: 36px 30px;
  display: flex;
  justify-content: space-between;
  background: url(/assets/img/subtract94db1170be83ff881a19.webp) center/cover no-repeat;
  gap: 20px;
}
.level__info-left {
  display: flex;
  flex-direction: column;
  gap: 25px;
  flex: 0 1 250px;
}
.level__info-right {
  display: flex;
  flex-direction: column;
  gap: 25px;
  flex: 0 1 250px;
}
.level__info-right > div:nth-child(2) {
  height: 118px;
}
.level__info-img {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 9px;
}
.level__info-img .cut {
  position: relative;
  transform: translateY(0);
}
.level__info-img .cut::after {
  content: url(/assets/img/cut386a46a4747b7675a400.png);
  position: absolute;
  top: 0;
  left: 0;
}
.level__info-img .cut.unwanted {
  animation: recipie-move 1.5s ease-in infinite 0.5s;
}
.level__info-img .cut.unwanted::after {
  transform: scale(0.6) rotate(50deg) translate(-20px, 30px);
}
.level__info-img .cut.stopper {
  animation: recipie-move 1.5s ease infinite 0.3s;
}
.level__info-img .cut.stopper::after {
  transform: scale(0.85) rotate(160deg) translate(30px, 10px);
}
.level__info-img .cut.gift {
  animation: recipie-move 1.5s ease-in infinite 0.4s;
}
.level__info-img .cut.gift img {
  height: 30px;
}
.level__info-img .cut.gift::after {
  transform: scale(0.85) rotate(0deg) translate(-45px, 10px);
}
.level__info-img img {
  height: 50px;
  flex: 0 0 auto;
}
.level__info-img img.move {
  transform: translateY(0px);
}
.level__info-img img.move:nth-child(1) {
  animation: recipie-move 1.5s ease-in infinite 0.3s;
}
.level__info-img img.move:nth-child(2) {
  animation: recipie-move 1.5s ease infinite 0.5s;
}
.level__info-img img.move:nth-child(3) {
  animation: recipie-move 1.5s ease-in infinite 0.4s;
}
.level__info-img img.move:nth-child(4) {
  animation: recipie-move 1.5s ease infinite 0.3s;
}
.level__info-img img.move:nth-child(5) {
  animation: recipie-move 1.5s ease-in infinite 0.5s;
}
.level__info-text {
  color: #804b43;
  text-align: center;
  font-size: 14px;
  font-weight: 300;
  line-height: 15.4px;
}
.level__info-recipe {
  color: #cabab8;
  font-size: 18px;
  font-weight: 600;
  line-height: 21.6px;
  letter-spacing: -0.198px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.level__info-recipe::before {
  content: url(/assets/img/goodddd5e1a7c033c8fc7706.svg);
  width: 28px;
  height: 28px;
}
.level__info-unwanted {
  color: #cabab8;
  font-size: 18px;
  font-weight: 600;
  line-height: 21.6px;
  letter-spacing: -0.198px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.level__info-unwanted::before {
  content: url(/assets/img/bad63ffa7a00c9059106219.svg);
  width: 28px;
  height: 28px;
}
.level__info-button div {
  padding: 8px 24px;
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  border-radius: 100px;
  border-top: 1px solid #530a02;
  border-right: 4px solid #530a02;
  border-bottom: 4px solid #530a02;
  border-left: 1px solid #530a02;
  background: #d0351d;
  transition: 0.3s ease;
  transform: scale(0);
  animation: scale 0.5s ease forwards 0.9s;
}
@media (hover: hover) {
  .level__info-button div:hover {
    cursor: pointer;
    opacity: 0.8;
  }
}
.level__progress {
  position: absolute;
  top: 30px;
  left: 30px;
  border-radius: 10px;
  border: 1.5px solid #210802;
  background: rgba(43, 20, 20, 0.5);
  padding: 13px 23px;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s ease;
}
.level__progress-barFull {
  z-index: 10;
  margin-bottom: 11px;
  width: 170px;
  height: 16px;
  border-radius: 10px;
  border: 1px solid #804b43;
  background: #210802;
  position: relative;
  transition: 0.3s ease;
}
.level__progress-barFull::after {
  content: attr(data-score);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  color: #804b43;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  transition: 0.3s ease;
}
.level__progress-barFull img {
  position: absolute;
  width: 100%;
  height: 11.5px;
  top: -3px;
  left: 0;
  z-index: 15;
}
.level__progress-barFull.progressUp {
  box-shadow: 0px 0px 10px 0px rgba(97, 255, 0, 0.5019607843);
}
.level__progress-barFull.progressUp .level__progress-bar {
  animation-name: progressUp;
}
.level__progress-barFull.progressUp .level__progress-dark::before {
  opacity: 1;
  visibility: visible;
}
.level__progress-barFull.progressDown {
  box-shadow: 0px 0px 10px 0px rgba(255, 0, 0, 0.9490196078);
}
.level__progress-barFull.progressDown .level__progress-bar {
  animation-name: progressDown;
}
.level__progress-barFull.progressDown .level__progress-dark::before {
  opacity: 1;
  visibility: visible;
}
@keyframes progressUp {
  0% {
    background-position: center;
  }
  50% {
    background-position: right;
  }
  100% {
    background-position: center;
  }
}
@keyframes progressDown {
  0% {
    background-position: center;
  }
  50% {
    background-position: left;
  }
  100% {
    background-position: center;
  }
}
.level__progress-bar {
  transition: 0.3s ease;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 0, 0, 0.9490196078), #9f0, rgba(97, 255, 0, 0.5019607843));
  background-size: 500% 400%;
  background-position: center;
  transform: translate3d(0, 0, 0);
  animation: 0.6s ease-in;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 4px 4px 0px rgba(255, 255, 255, 0.4) inset, 0px -4px 6px 0px rgba(35, 19, 0, 0.4) inset;
}
.level__progress-dark {
  position: absolute;
  border-radius: 0 10px 10px 0;
  width: calc(100% - 8px);
  transition: 0.3s ease;
  height: 14px;
  right: 0;
  top: 0;
  background: #210802;
}
.level__progress-dark::after {
  content: "";
  position: absolute;
  left: -8px;
  top: 0;
  border-bottom: 7px solid #210802;
  border-right: 4px solid #210802;
  border-top: 7px solid transparent;
  border-left: 4px solid transparent;
}
.level__progress-dark::before {
  content: url(/assets/img/progressFlash6e13eba35fab7930fba2.png);
  position: absolute;
  left: 0;
  top: 0;
  height: 39px;
  width: 31px;
  transform: translate(-21px, -15px);
  z-index: 20;
  transition: 0.3s ease;
  opacity: 0;
  visibility: hidden;
}
.level__progress-dark.hide {
  opacity: 0;
  visibility: hidden;
}
.level__progress-fruits {
  display: flex;
  align-items: center;
  justify-content: center;
}
.level__progress-fruits img {
  height: 45px;
  flex: 0 0 auto;
  margin-left: -10px;
}
.level__progress-fruits img:first-child {
  margin-left: 0;
}
.level__progress-fruits img.gift {
  height: 30px;
}
.level__progress-fruits img.cut {
  position: relative;
}
.level__progress-fruits img.cut::after {
  content: url(/assets/img/cut386a46a4747b7675a400.png);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}
.level__sound {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 50px;
  height: 50px;
  transition: 0.3s ease;
  z-index: 500;
  opacity: 0;
  visibility: hidden;
}
@media (hover: hover) {
  .level__sound:hover {
    opacity: 0.8;
    cursor: pointer;
  }
}
.level__pause {
  position: absolute;
  left: 30px;
  bottom: 20px;
  width: 50px;
  height: 50px;
  transition: 0.3s ease;
  z-index: 500;
  opacity: 0;
  visibility: hidden;
}
@media (hover: hover) {
  .level__pause:hover {
    opacity: 0.8;
    cursor: pointer;
  }
}
.level #info {
  display: block;
  width: 100%;
  height: 100%;
  color: #555555;
}
.level canvas {
  display: none;
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
}
/*!*************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/containers/Game/style.scss ***!
  \*************************************************************************************************************************/
.game {
  display: flex;
  align-items: center;
  justify-content: center;
}
/*!**************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/containers/Entry/style.scss ***!
  \**************************************************************************************************************************/
.start {
  padding: 35px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background: url(/assets/img/startBg6dbf8777307b3d8d98da.webp) center/cover no-repeat;
}
@media (max-width: 767px) {
  .start.mobile {
    height: 100%;
    padding: 20px 16px 10%;
    background: url(/assets/img/startBgMob54d8984d49318011bcbf.webp) top/cover no-repeat;
  }
  @supports (-webkit-touch-callout: none) {
    .start.mobile {
      height: 100dvh;
    }
  }
  .start.mobile.auth {
    background: url(/assets/img/startBgAuthMobe91d0403b4bf31be04db.webp) center/cover no-repeat;
    z-index: 3;
  }
  .start.mobile::after {
    background: url(/assets/img/icea51aea0d6544e5e2b964.webp) top/cover no-repeat;
    width: 100%;
    content: "";
    height: 385px;
    position: absolute;
    bottom: 0;
    z-index: -1;
  }
  .start.mobile .start__rubilovo {
    width: 100%;
  }
  .start.mobile .start__title {
    font-size: 18px;
    line-height: 19.8px;
    letter-spacing: -0.198px;
  }
  .start.mobile .start__text {
    font-size: 14px;
    line-height: 15px;
    letter-spacing: -0.154px;
    margin-bottom: 14px;
  }
  .start.mobile .start__button {
    width: 100%;
  }
  .start.mobile .start__button div {
    width: 100%;
  }
  .start.mobile .start__wait {
    padding: 20px;
  }
  .start.mobile .start__wait-title {
    font-size: 18px;
    line-height: 21.6px;
    letter-spacing: -0.198px;
  }
  .start.mobile .start__wait-text {
    font-size: 14px;
    font-weight: 400;
    line-height: 16.8px;
    letter-spacing: -0.154px;
  }
}
.start.auth {
  background: url(/assets/img/startBgAuth83a60021bb28c22d336e.webp) center/cover no-repeat;
  justify-content: flex-end;
}
.start__title {
  color: #252d33;
  text-align: center;
  font-size: 24px;
  font-weight: 800;
  line-height: 26.4px;
  letter-spacing: -0.264px;
  margin-bottom: 8px;
  max-width: 380px;
  transform: scale(0);
  animation: scale 0.5s ease forwards 0.5s;
}
.start__text {
  color: #316995;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 19.2px;
  letter-spacing: -0.176px;
  margin-bottom: 22px;
  transform: scale(0);
  animation: scale 0.5s ease forwards 0.7s;
}
.start__button {
  display: flex;
  justify-content: center;
  transform: scale(0);
  animation: scale 0.5s ease forwards 0.9s;
}
.start__button div {
  padding: 8px 24px;
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  border-radius: 100px;
  border-top: 1px solid #530a02;
  border-right: 4px solid #530a02;
  border-bottom: 4px solid #530a02;
  border-left: 1px solid #530a02;
  background: #d0351d;
  transition: 0.3s ease;
}
@media (hover: hover) {
  .start__button div:hover {
    cursor: pointer;
    opacity: 0.8;
  }
}
.start__wait {
  border-radius: 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  background: rgba(122, 182, 216, 0.2);
  box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  padding: 20px 30px;
  text-align: center;
}
.start__wait-loader {
  height: 32px;
  width: 32px;
  animation: rotate 1.8s linear infinite;
}
.start__wait-title {
  color: #fff;
  text-align: center;
  text-shadow: 0px 4px 8px rgba(46, 78, 127, 0.16);
  font-size: 24px;
  font-weight: 800;
  line-height: 28.8px;
  letter-spacing: -0.264px;
  margin-bottom: 6px;
  margin-top: 16px;
}
.start__wait-text {
  color: #fff;
  text-align: center;
  text-shadow: 0px 4px 8px rgba(46, 78, 127, 0.16);
  font-size: 16px;
  font-weight: 400;
  line-height: 19.2px;
  letter-spacing: -0.176px;
}
@keyframes rotate {
  from {
    transform: rotate(-360deg);
  }
}
/*!**************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/containers/Gifts/style.scss ***!
  \**************************************************************************************************************************/
.gifts {
  width: 100%;
  height: 100%;
}
@media (max-width: 767px) {
  .gifts.mobile {
    height: 100%;
  }
  @supports (-webkit-touch-callout: none) {
    @media screen and (max-width: 767px) and (min-height: 737px) {
      .gifts.mobile .gifts__container {
        padding: 58px 0 10px 0px;
      }
      .gifts.mobile .gifts__container .level__close {
        top: 78px !important;
      }
      .gifts.mobile .gifts__container .level__info-button {
        bottom: 30px !important;
      }
      .gifts.mobile .gifts__container .level__progress {
        top: 78px !important;
      }
    }
  }
  .gifts.mobile .gifts__container > div {
    padding: 20px 16px;
  }
  .gifts.mobile .gifts__close {
    left: 16px;
    top: 16px;
  }
  .gifts.mobile .gifts__bg-1 {
    opacity: 0.85;
  }
  .gifts.mobile .gifts__bg-2 {
    opacity: 0.85;
    right: 20px;
    top: -10px;
    transform: rotate(10deg);
  }
  .gifts.mobile .gifts__bg-3 {
    opacity: 0.85;
    top: -20px;
  }
  .gifts.mobile .gifts__items {
    grid-template-columns: 1fr;
  }
  .gifts.mobile .gifts__empty {
    padding: 16px;
  }
  .gifts.mobile .gifts__empty-title {
    font-size: 18px;
    line-height: 19.8px;
    letter-spacing: -0.198px;
  }
  .gifts.mobile .gifts__empty-text {
    font-size: 14px;
    line-height: 16.8px;
    letter-spacing: -0.154px;
    margin-bottom: 10px;
  }
}
.gifts__container {
  height: 100%;
}
.gifts__container > div {
  background: #0a0a16;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px;
  position: relative;
  overflow: auto;
}
.gifts__container > div::-webkit-scrollbar {
  width: 4px;
  height: 3px;
  margin-left: 30px;
}
.gifts__container > div::-webkit-scrollbar-thumb {
  height: 50px;
  background-color: #003d71;
  border-radius: 10px;
}
.gifts__close {
  position: absolute;
  left: 30px;
  top: 30px;
  transition: 0.3s ease;
  z-index: 10;
}
@media (hover: hover) {
  .gifts__close:hover {
    opacity: 0.8;
    cursor: pointer;
  }
}
.gifts__bg-1 {
  position: absolute;
  height: 74px;
  top: 0;
  left: 0;
}
.gifts__bg-3 {
  position: absolute;
  width: 120px;
  top: 0;
  left: 102px;
}
.gifts__bg-2 {
  position: absolute;
  height: 74px;
  top: 0;
  right: 70px;
}
.gifts__title {
  color: #fff;
  text-align: center;
  font-size: 24px;
  font-weight: 800;
  line-height: 26.4px;
  letter-spacing: -0.264px;
  margin-bottom: 17px;
  z-index: 1;
}
.gifts__text {
  color: #6f6f9d;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 19.2px;
  letter-spacing: -0.176px;
  margin-bottom: 24px;
  z-index: 1;
}
.gifts__items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.gifts__items .gift {
  padding: 16px;
  border-radius: 12px;
  background: #1b1b34;
  box-shadow: 0px 2px 14px 0px rgba(101, 101, 101, 0.1);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}
.gifts__items .gift.expired {
  opacity: 0.7;
  pointer-events: none;
}
.gifts__items .gift__img {
  border-radius: 8px;
  width: 100%;
  overflow: hidden;
  margin-bottom: 4px;
}
.gifts__items .gift__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gifts__items .gift__label {
  position: absolute;
  top: 26px;
  left: 26px;
  border-radius: 6px;
  backdrop-filter: blur(84.5593338013px);
  padding: 4px 6px;
  color: #fff;
  text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12);
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
}
.gifts__items .gift__label.expires {
  border: 1px solid #fff;
  background: #fff;
  color: #6f6f9d;
}
.gifts__items .gift__label.received {
  background: #1f9754;
}
.gifts__items .gift__label.expired {
  background: #4d4d72;
}
.gifts__items .gift__title {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  -moz-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  box-orient: vertical;
  flex: 1 0 auto;
}
.gifts__items .gift__button {
  display: flex;
  justify-content: center;
  transition: 0.3s ease;
}
.gifts__items .gift__button a {
  width: 100%;
  padding: 8px 24px;
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  border-radius: 100px;
  border-radius: 100px;
  border-top: 1px solid #4d4d72;
  border-right: 4px solid #4d4d72;
  border-bottom: 4px solid #4d4d72;
  border-left: 1px solid #4d4d72;
  background: #6f6f9d;
  transition: 0.3s ease;
  position: relative;
}
.gifts__items .gift__button a img {
  position: absolute;
  right: 22px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
}
@media (hover: hover) {
  .gifts__items .gift__button a:hover {
    cursor: pointer;
    opacity: 0.8;
  }
}
.gifts__items .gift__code {
  border-radius: 100px;
  border: 1px dashed #6F6F9D;
  box-shadow: 0px 4px 11px 0px rgba(30, 34, 170, 0.2);
  padding: 9.5px 40px;
  color: #6F6F9D;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  text-transform: lowercase;
  transition: 0.3s ease;
  position: relative;
}
.gifts__items .gift__code img {
  position: absolute;
  right: 22px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
}
@media (hover: hover) {
  .gifts__items .gift__code:hover {
    opacity: 0.8;
    cursor: pointer;
  }
}
.gifts__items .gift__ad {
  color: #41416C;
  font-size: 12px;
  font-weight: 200;
  line-height: 14px;
}
.gifts__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 35px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  background: url(/assets/img/giftsEmpty405e5072910a0300fbd9.webp) center/cover no-repeat;
}
.gifts__empty-title {
  color: #252d33;
  text-align: center;
  font-size: 24px;
  font-weight: 800;
  line-height: 26.4px;
  letter-spacing: -0.264px;
  margin-bottom: 8px;
  max-width: 450px;
  transition: 0.3s ease;
}
.gifts__empty-text {
  color: #316995;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 19.2px;
  letter-spacing: -0.176px;
  margin-bottom: 8px;
  max-width: 450px;
  transition: 0.3s ease;
}
.gifts__empty-button {
  display: flex;
  justify-content: center;
  transition: 0.3s ease;
}
.gifts__empty-button div {
  padding: 8px 24px;
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  border-radius: 100px;
  border-top: 1px solid #530a02;
  border-right: 4px solid #530a02;
  border-bottom: 4px solid #530a02;
  border-left: 1px solid #530a02;
  background: #d0351d;
  transition: 0.3s ease;
}
@media (hover: hover) {
  .gifts__empty-button div:hover {
    cursor: pointer;
    opacity: 0.8;
  }
}
/*!***************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Loader/style.scss ***!
  \***************************************************************************************************************************/
.loader {
  visibility: hidden;
  opacity: 0;
  transition: 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.loader.loader-on {
  visibility: visible;
  opacity: 1;
}
.loader.loader-on .loader__text {
  animation: textOpacity 4.5s infinite;
}
.loader.loader-on .loader__text_second {
  animation-delay: 1.5s;
}
.loader.loader-on .loader__text_third {
  animation-delay: 3s;
}
.loader__spin {
  height: 32px;
  width: 32px;
  animation: rotate 1.8s linear infinite;
}
.loader__text {
  color: #fff;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 120%; /* 19.2px */
  letter-spacing: -0.176px;
  position: absolute;
  top: 53%;
  opacity: 0;
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes textOpacity {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.3;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
/*!*********************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/assets/scss/index.scss ***!
  \*********************************************************************************************************************/
@font-face {
  font-family: "Inter";
  src: url(/assets/fonts/Inter-Regular.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url(/assets/fonts/Inter-Medium.ttf) format("truetype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url(/assets/fonts/Inter-SemiBold.ttf) format("truetype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url(/assets/fonts/Inter-Bold.ttf) format("truetype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url(/assets/fonts/Inter-ExtraBold.ttf) format("truetype");
  font-weight: 800;
  font-style: normal;
}
.splide__container {
  box-sizing: border-box;
  position: relative;
}

.splide__list {
  backface-visibility: hidden;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.splide.is-initialized:not(.is-active) .splide__list {
  display: block;
}

.splide__pagination {
  -ms-flex-align: center;
  align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0;
  pointer-events: none;
}

.splide__pagination li {
  display: inline-block;
  line-height: 1;
  list-style-type: none;
  margin: 0;
  pointer-events: auto;
}

.splide:not(.is-overflow) .splide__pagination {
  display: none;
}

.splide__progress__bar {
  width: 0;
}

.splide {
  position: relative;
  visibility: hidden;
}

.splide.is-initialized, .splide.is-rendered {
  visibility: visible;
}

.splide__slide {
  backface-visibility: hidden;
  box-sizing: border-box;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  list-style-type: none !important;
  margin: 0;
  position: relative;
}

.splide__slide img {
  vertical-align: bottom;
}

.splide__spinner {
  animation: splide-loading 1s linear infinite;
  border: 2px solid #999;
  border-left-color: transparent;
  border-radius: 50%;
  bottom: 0;
  contain: strict;
  display: inline-block;
  height: 20px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
}

.splide__sr {
  clip: rect(0 0 0 0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.splide__toggle.is-active .splide__toggle__play, .splide__toggle__pause {
  display: none;
}

.splide__toggle.is-active .splide__toggle__pause {
  display: inline;
}

.splide__track {
  overflow: hidden;
  position: relative;
  z-index: 0;
}

@keyframes splide-loading {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(1turn);
  }
}
.splide__track--draggable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.splide__track--fade > .splide__list > .splide__slide {
  margin: 0 !important;
  opacity: 0;
  z-index: 0;
}

.splide__track--fade > .splide__list > .splide__slide.is-active {
  opacity: 1;
  z-index: 1;
}

.splide--rtl {
  direction: rtl;
}

.splide__track--ttb > .splide__list {
  display: block;
}

.splide__arrow {
  -ms-flex-align: center;
  align-items: center;
  background: #ccc;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: -ms-flexbox;
  display: flex;
  height: 2em;
  -ms-flex-pack: center;
  justify-content: center;
  opacity: 0.7;
  padding: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2em;
  z-index: 1;
}

.splide__arrow svg {
  fill: #000;
  height: 1.2em;
  width: 1.2em;
}

.splide__arrow:hover:not(:disabled) {
  opacity: 0.9;
}

.splide__arrow:disabled {
  opacity: 0.3;
}

.splide__arrow:focus-visible {
  outline: 3px solid #0bf;
  outline-offset: 3px;
}

.splide__arrow--prev {
  left: 1em;
}

.splide__arrow--prev svg {
  transform: scaleX(-1);
}

.splide__arrow--next {
  right: 1em;
}

.splide.is-focus-in .splide__arrow:focus {
  outline: 3px solid #0bf;
  outline-offset: 3px;
}

.splide__pagination {
  bottom: 0.5em;
  left: 0;
  padding: 0 1em;
  position: absolute;
  right: 0;
  z-index: 1;
}

.splide__pagination__page {
  background: #ccc;
  border: 0;
  border-radius: 50%;
  display: inline-block;
  height: 8px;
  margin: 3px;
  opacity: 0.7;
  padding: 0;
  position: relative;
  transition: transform 0.2s linear;
  width: 8px;
}

.splide__pagination__page.is-active {
  background: #fff;
  transform: scale(1.4);
  z-index: 1;
}

.splide__pagination__page:hover {
  cursor: pointer;
  opacity: 0.9;
}

.splide__pagination__page:focus-visible {
  outline: 3px solid #0bf;
  outline-offset: 3px;
}

.splide.is-focus-in .splide__pagination__page:focus {
  outline: 3px solid #0bf;
  outline-offset: 3px;
}

.splide__progress__bar {
  background: #ccc;
  height: 3px;
}

.splide__slide {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.splide__slide:focus {
  outline: 0;
}

@supports (outline-offset: -3px) {
  .splide__slide:focus-visible {
    outline: 3px solid #0bf;
    outline-offset: -3px;
  }
}
@media screen and (-ms-high-contrast: none) {
  .splide__slide:focus-visible {
    border: 3px solid #0bf;
  }
}
@supports (outline-offset: -3px) {
  .splide.is-focus-in .splide__slide:focus {
    outline: 3px solid #0bf;
    outline-offset: -3px;
  }
}
@media screen and (-ms-high-contrast: none) {
  .splide.is-focus-in .splide__slide:focus {
    border: 3px solid #0bf;
  }
  .splide.is-focus-in .splide__track > .splide__list > .splide__slide:focus {
    border-color: #0bf;
  }
}
.splide__toggle {
  cursor: pointer;
}

.splide__toggle:focus-visible {
  outline: 3px solid #0bf;
  outline-offset: 3px;
}

.splide.is-focus-in .splide__toggle:focus {
  outline: 3px solid #0bf;
  outline-offset: 3px;
}

.splide__track--nav > .splide__list > .splide__slide {
  border: 3px solid transparent;
  cursor: pointer;
}

.splide__track--nav > .splide__list > .splide__slide.is-active {
  border: 3px solid #000;
}

.splide__arrows--rtl .splide__arrow--prev {
  left: auto;
  right: 1em;
}

.splide__arrows--rtl .splide__arrow--prev svg {
  transform: scaleX(1);
}

.splide__arrows--rtl .splide__arrow--next {
  left: 1em;
  right: auto;
}

.splide__arrows--rtl .splide__arrow--next svg {
  transform: scaleX(-1);
}

.splide__arrows--ttb .splide__arrow {
  left: 50%;
  transform: translate(-50%);
}

.splide__arrows--ttb .splide__arrow--prev {
  top: 1em;
}

.splide__arrows--ttb .splide__arrow--prev svg {
  transform: rotate(-90deg);
}

.splide__arrows--ttb .splide__arrow--next {
  bottom: 1em;
  top: auto;
}

.splide__arrows--ttb .splide__arrow--next svg {
  transform: rotate(90deg);
}

.splide__pagination--ttb {
  bottom: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  left: auto;
  padding: 1em 0;
  right: 0.5em;
  top: 0;
}

.splide__track--nav > .splide__list > .splide__slide {
  border: 3px solid transparent;
  cursor: pointer;
  opacity: 0.7;
}

.splide__track--nav > .splide__list > .splide__slide.is-active {
  border: 3px solid #00bfff;
  opacity: 1;
}

.splide__arrow {
  -ms-flex-align: center;
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  display: -ms-flexbox;
  display: flex;
  height: 2.5em;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5em;
  z-index: 1;
}

.splide__arrow svg {
  fill: #00bfff;
  height: 2.5em;
  transition: fill 0.2s linear;
  width: 2.5em;
}

.splide__arrow:hover:not(:disabled) svg {
  fill: #66d9ff;
}

.splide__arrow:disabled {
  opacity: 0.3;
}

.splide__arrow:focus-visible {
  outline: 3px solid #00bfff;
  outline-offset: 3px;
}

.splide__arrow--prev {
  left: 1em;
}

.splide__arrow--prev svg {
  transform: scaleX(-1);
}

.splide__arrow--next {
  right: 1em;
}

.splide.is-focus-in .splide__arrow:focus {
  outline: 3px solid #00bfff;
  outline-offset: 3px;
}

.splide__pagination {
  bottom: 0.5em;
  left: 0;
  padding: 0 1em;
  position: absolute;
  right: 0;
  z-index: 1;
}

.splide__pagination__page {
  background: #ccc;
  border: 0;
  border-radius: 50%;
  display: inline-block;
  height: 10px;
  margin: 3px;
  padding: 0;
  position: relative;
  transition: background-color 0.2s linear, transform 0.2s linear;
  width: 10px;
}

.splide__pagination__page.is-active {
  background: #00bfff;
  transform: scale(1.4);
  z-index: 1;
}

.splide__pagination__page:hover {
  background: #66d9ff;
  cursor: pointer;
  opacity: 0.9;
}

.splide__pagination__page:focus-visible {
  outline: 3px solid #00bfff;
  outline-offset: 3px;
}

.splide.is-focus-in .splide__pagination__page:focus {
  outline: 3px solid #00bfff;
  outline-offset: 3px;
}

.splide__container {
  box-sizing: border-box;
  position: relative;
}

.splide__list {
  backface-visibility: hidden;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.splide.is-initialized:not(.is-active) .splide__list {
  display: block;
}

.splide__pagination {
  -ms-flex-align: center;
  align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0;
  pointer-events: none;
}

.splide__pagination li {
  display: inline-block;
  line-height: 1;
  list-style-type: none;
  margin: 0;
  pointer-events: auto;
}

.splide:not(.is-overflow) .splide__pagination {
  display: none;
}

.splide__progress__bar {
  width: 0;
}

.splide {
  position: relative;
  visibility: hidden;
}

.splide.is-initialized, .splide.is-rendered {
  visibility: visible;
}

.splide__slide {
  backface-visibility: hidden;
  box-sizing: border-box;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  list-style-type: none !important;
  margin: 0;
  position: relative;
}

.splide__slide img {
  vertical-align: bottom;
}

.splide__spinner {
  animation: splide-loading 1s linear infinite;
  border: 2px solid #00bfff;
  border-left-color: transparent;
  border-radius: 50%;
  bottom: 0;
  contain: strict;
  display: inline-block;
  height: 20px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
}

.splide__sr {
  clip: rect(0 0 0 0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.splide__toggle.is-active .splide__toggle__play, .splide__toggle__pause {
  display: none;
}

.splide__toggle.is-active .splide__toggle__pause {
  display: inline;
}

.splide__track {
  overflow: hidden;
  position: relative;
  z-index: 0;
}

@keyframes splide-loading {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(1turn);
  }
}
.splide__track--draggable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.splide__track--fade > .splide__list > .splide__slide {
  margin: 0 !important;
  opacity: 0;
  z-index: 0;
}

.splide__track--fade > .splide__list > .splide__slide.is-active {
  opacity: 1;
  z-index: 1;
}

.splide--rtl {
  direction: rtl;
}

.splide__track--ttb > .splide__list {
  display: block;
}

.splide__progress__bar {
  background: #ccc;
  height: 3px;
}

.splide__slide {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.splide__slide:focus {
  outline: 0;
}

@supports (outline-offset: -3px) {
  .splide__slide:focus-visible {
    outline: 3px solid #00bfff;
    outline-offset: -3px;
  }
}
@media screen and (-ms-high-contrast: none) {
  .splide__slide:focus-visible {
    border: 3px solid #00bfff;
  }
}
@supports (outline-offset: -3px) {
  .splide.is-focus-in .splide__slide:focus {
    outline: 3px solid #00bfff;
    outline-offset: -3px;
  }
}
@media screen and (-ms-high-contrast: none) {
  .splide.is-focus-in .splide__slide:focus {
    border: 3px solid #00bfff;
  }
  .splide.is-focus-in .splide__track > .splide__list > .splide__slide:focus {
    border-color: #00bfff;
  }
}
.splide__toggle {
  cursor: pointer;
}

.splide__toggle:focus-visible {
  outline: 3px solid #00bfff;
  outline-offset: 3px;
}

.splide.is-focus-in .splide__toggle:focus {
  outline: 3px solid #00bfff;
  outline-offset: 3px;
}

.splide__arrows--rtl .splide__arrow--prev {
  left: auto;
  right: 1em;
}

.splide__arrows--rtl .splide__arrow--prev svg {
  transform: scaleX(1);
}

.splide__arrows--rtl .splide__arrow--next {
  left: 1em;
  right: auto;
}

.splide__arrows--rtl .splide__arrow--next svg {
  transform: scaleX(-1);
}

.splide__arrows--ttb .splide__arrow {
  left: 50%;
  transform: translate(-50%);
}

.splide__arrows--ttb .splide__arrow--prev {
  top: 1em;
}

.splide__arrows--ttb .splide__arrow--prev svg {
  transform: rotate(-90deg);
}

.splide__arrows--ttb .splide__arrow--next {
  bottom: 1em;
  top: auto;
}

.splide__arrows--ttb .splide__arrow--next svg {
  transform: rotate(90deg);
}

.splide__pagination--ttb {
  bottom: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  left: auto;
  padding: 1em 0;
  right: 0.5em;
  top: 0;
}

.splide__track--nav > .splide__list > .splide__slide {
  border: 3px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.7;
}

.splide__track--nav > .splide__list > .splide__slide.is-active {
  border: 3px solid #20b2aa;
  opacity: 1;
}

.splide__arrows--ttb .splide__arrow {
  left: 50%;
  transform: translate(-50%);
}

.splide__arrows--ttb .splide__arrow--prev {
  top: 1em;
}

.splide__arrows--ttb .splide__arrow--prev svg {
  transform: rotate(-90deg);
}

.splide__arrows--ttb .splide__arrow--next {
  bottom: 1em;
  top: auto;
}

.splide__arrows--ttb .splide__arrow--next svg {
  transform: rotate(90deg);
}

.splide__pagination--ttb {
  bottom: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  left: auto;
  padding: 1em 0;
  right: 1em;
  top: 0;
}

.splide__pagination--ttb .splide__pagination__page {
  height: 20px;
  width: 5px;
}

.splide__arrow {
  -ms-flex-align: center;
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  display: -ms-flexbox;
  display: flex;
  height: 2.5em;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5em;
  z-index: 1;
}

.splide__arrow svg {
  fill: #20b2aa;
  height: 2.5em;
  transition: fill 0.2s linear;
  width: 2.5em;
}

.splide__arrow:hover:not(:disabled) svg {
  fill: #57e1d9;
}

.splide__arrow:disabled {
  opacity: 0.3;
}

.splide__arrow:focus-visible {
  outline: 3px solid #20b2aa;
  outline-offset: 3px;
}

.splide__arrow--prev {
  left: 1em;
}

.splide__arrow--prev svg {
  transform: scaleX(-1);
}

.splide__arrow--next {
  right: 1em;
}

.splide.is-focus-in .splide__arrow:focus {
  outline: 3px solid #20b2aa;
  outline-offset: 3px;
}

.splide__pagination {
  bottom: 1em;
  left: 0;
  padding: 0 1em;
  position: absolute;
  right: 0;
  z-index: 1;
}

.splide__pagination__page {
  background: #ccc;
  border: 0;
  border-radius: 2.5px;
  display: inline-block;
  height: 5px;
  margin: 3px;
  padding: 0;
  position: relative;
  transition: background-color 0.2s linear;
  width: 20px;
}

.splide__pagination__page.is-active {
  background: #20b2aa;
  z-index: 1;
}

.splide__pagination__page:hover {
  background: #57e1d9;
  cursor: pointer;
  opacity: 0.9;
}

.splide__pagination__page:focus-visible {
  outline: 3px solid #20b2aa;
  outline-offset: 3px;
}

.splide.is-focus-in .splide__pagination__page:focus {
  outline: 3px solid #20b2aa;
  outline-offset: 3px;
}

.splide__slide {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  border-radius: 4px;
}

.splide__slide:focus {
  outline: 0;
}

@supports (outline-offset: -3px) {
  .splide__slide:focus-visible {
    outline: 3px solid #20b2aa;
    outline-offset: -3px;
  }
}
@media screen and (-ms-high-contrast: none) {
  .splide__slide:focus-visible {
    border: 3px solid #20b2aa;
  }
}
@supports (outline-offset: -3px) {
  .splide.is-focus-in .splide__slide:focus {
    outline: 3px solid #20b2aa;
    outline-offset: -3px;
  }
}
@media screen and (-ms-high-contrast: none) {
  .splide.is-focus-in .splide__slide:focus {
    border: 3px solid #20b2aa;
  }
  .splide.is-focus-in .splide__track > .splide__list > .splide__slide:focus {
    border-color: #20b2aa;
  }
}
.splide__container {
  box-sizing: border-box;
  position: relative;
}

.splide__list {
  backface-visibility: hidden;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.splide.is-initialized:not(.is-active) .splide__list {
  display: block;
}

.splide__pagination {
  -ms-flex-align: center;
  align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0;
  pointer-events: none;
}

.splide__pagination li {
  display: inline-block;
  line-height: 1;
  list-style-type: none;
  margin: 0;
  pointer-events: auto;
}

.splide:not(.is-overflow) .splide__pagination {
  display: none;
}

.splide__progress__bar {
  width: 0;
}

.splide {
  position: relative;
  visibility: hidden;
}

.splide.is-initialized, .splide.is-rendered {
  visibility: visible;
}

.splide__slide {
  backface-visibility: hidden;
  box-sizing: border-box;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  list-style-type: none !important;
  margin: 0;
  position: relative;
}

.splide__slide img {
  vertical-align: bottom;
}

.splide__spinner {
  animation: splide-loading 1s linear infinite;
  border: 2px solid #20b2aa;
  border-left-color: transparent;
  border-radius: 50%;
  bottom: 0;
  contain: strict;
  display: inline-block;
  height: 20px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
}

.splide__sr {
  clip: rect(0 0 0 0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.splide__toggle.is-active .splide__toggle__play, .splide__toggle__pause {
  display: none;
}

.splide__toggle.is-active .splide__toggle__pause {
  display: inline;
}

.splide__track {
  overflow: hidden;
  position: relative;
  z-index: 0;
}

@keyframes splide-loading {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(1turn);
  }
}
.splide__track--draggable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.splide__track--fade > .splide__list > .splide__slide {
  margin: 0 !important;
  opacity: 0;
  z-index: 0;
}

.splide__track--fade > .splide__list > .splide__slide.is-active {
  opacity: 1;
  z-index: 1;
}

.splide--rtl {
  direction: rtl;
}

.splide__track--ttb > .splide__list {
  display: block;
}

.splide__progress__bar {
  background: #ccc;
  height: 3px;
}

.splide__toggle {
  cursor: pointer;
}

.splide__toggle:focus-visible {
  outline: 3px solid #20b2aa;
  outline-offset: 3px;
}

.splide.is-focus-in .splide__toggle:focus {
  outline: 3px solid #20b2aa;
  outline-offset: 3px;
}

.splide__arrows--rtl .splide__arrow--prev {
  left: auto;
  right: 1em;
}

.splide__arrows--rtl .splide__arrow--prev svg {
  transform: scaleX(1);
}

.splide__arrows--rtl .splide__arrow--next {
  left: 1em;
  right: auto;
}

.splide__arrows--rtl .splide__arrow--next svg {
  transform: scaleX(-1);
}

.splide__slider > .splide__arrows .splide__arrow--prev {
  left: -2.5em;
}

.splide__slider > .splide__arrows .splide__arrow--next {
  right: -2.5em;
}

.splide {
  padding: 3em;
}

@keyframes splide-loading {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(1turn);
  }
}
.splide__track--draggable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.splide__track--fade > .splide__list > .splide__slide {
  margin: 0 !important;
  opacity: 0;
  z-index: 0;
}

.splide__track--fade > .splide__list > .splide__slide.is-active {
  opacity: 1;
  z-index: 1;
}

.splide--rtl {
  direction: rtl;
}

.splide__track--ttb > .splide__list {
  display: block;
}

.splide__container {
  box-sizing: border-box;
  position: relative;
}

.splide__list {
  backface-visibility: hidden;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.splide.is-initialized:not(.is-active) .splide__list {
  display: block;
}

.splide__pagination {
  -ms-flex-align: center;
  align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0;
  pointer-events: none;
}

.splide__pagination li {
  display: inline-block;
  line-height: 1;
  list-style-type: none;
  margin: 0;
  pointer-events: auto;
}

.splide:not(.is-overflow) .splide__pagination {
  display: none;
}

.splide__progress__bar {
  width: 0;
}

.splide {
  position: relative;
  visibility: hidden;
}

.splide.is-initialized, .splide.is-rendered {
  visibility: visible;
}

.splide__slide {
  backface-visibility: hidden;
  box-sizing: border-box;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  list-style-type: none !important;
  margin: 0;
  position: relative;
}

.splide__slide img {
  vertical-align: bottom;
}

.splide__spinner {
  animation: splide-loading 1s linear infinite;
  border: 2px solid #999;
  border-left-color: transparent;
  border-radius: 50%;
  bottom: 0;
  contain: strict;
  display: inline-block;
  height: 20px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
}

.splide__sr {
  clip: rect(0 0 0 0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.splide__toggle.is-active .splide__toggle__play, .splide__toggle__pause {
  display: none;
}

.splide__toggle.is-active .splide__toggle__pause {
  display: inline;
}

.splide__track {
  overflow: hidden;
  position: relative;
  z-index: 0;
}

a,
button,
button:active,
button:focus,
input,
input:active,
input:focus,
div:focus,
select,
textarea,
textarea:active,
textarea:focus,
img {
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}

* {
  padding: 0;
  margin: 0;
  border: 0;
}

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

:focus,
:active {
  outline: none;
}

a:focus,
a:active {
  outline: none;
}

nav,
footer,
header,
aside {
  display: block;
}

html {
  height: 100%;
}

body {
  height: 100%;
  width: 100%;
  font-size: 100%;
  line-height: 1;
  font-size: 14px;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

input,
button,
textarea {
  font-family: inherit;
}

input::-ms-clear {
  display: none;
}

button {
  cursor: pointer;
  background: transparent;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

a,
a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

ul li {
  list-style: none;
}

img {
  vertical-align: top;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

html {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
@supports (-webkit-touch-callout: none) {
  html {
    height: 100dvh;
  }
}

body {
  margin: 0 auto;
  max-width: 680px;
  width: 100%;
  height: 100%;
  background: #e8e8e8;
  font-family: "Inter";
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-overflow-scrolling: touch;
  overflow-anchor: none;
  overflow: hidden;
  background: #0a0a16;
}

#root {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
#root::-webkit-scrollbar {
  width: 4px;
  height: 3px;
  margin-left: 30px;
}
#root::-webkit-scrollbar-thumb {
  height: 50px;
  background-color: #003d71;
  border-radius: 10px;
}

section {
  height: 100%;
}

@keyframes scale {
  0% {
    transform: scale(0);
  }
  80% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes arrow-opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes arrow-move {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes recipie-move {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(3px);
  }
  100% {
    transform: translateY(0px);
  }
}