@font-face {
  font-display: swap;
  font-family: MouseMemoris;
  font-style: normal;
  font-weight: 200 700;
  src: url(/fonts/MouseMemoirs-Regular.ttf?1d63ae5d190d892b276892234e1feb1f) format("truetype");
}

@font-face {
  font-display: swap;
  font-family: Goosberry;
  font-style: normal;
  font-weight: 200 700;
  src: url(/fonts/goosberry_version_02.otf) format("opentype");
}

@font-face {
  font-display: swap;
  font-family: Baloo;
  font-style: normal;
  font-weight: 200 700;
  src: url(/fonts/baloo-cyrillic.ttf) format("truetype");
}

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

:root {
  --font-family: Baloo;
}

body {
  background-color: #050237;
  color: #fff;
  font-size: 15px;
  line-height: 1.7em;
  margin: 0 auto;
  max-height: 100vh;
  max-width: 100vw;
  min-height: 100vh;
  overflow: hidden;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  width: 100vw;
}

body,
html {
  background: #020237;
}

body,
body#index,
html {
  font-family: var(--font-family);
}

#app {
  align-content: space-between;
  background: linear-gradient(0deg, #4c0652, #000036);
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-height: 100vh;
  max-width: 100vw;
  overflow: hidden;
  overscroll-behavior-y: none;
  position: relative;
  scrollbar-width: none;
  touch-action: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  width: 100vw;
}

a,
button,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

a,
button {
  cursor: pointer;
  font-family: var(--font-family);
  font-weight: 500;
  outline: none !important;
  position: relative;
  text-decoration: none;
  transition: all 0.2s linear 0s, transform 0.1s linear 0s;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

@media (hover: hover) {

  a:hover,
  button:hover {
    transform: scale(0.96) translateX(1px) translateY(3px);
  }
}

@media (hover: none) {

  a:active,
  button:active {
    transform: scale(0.96) translateX(1px) translateY(3px);
  }
}

input,
textarea {
  font-family: var(--font-family);
  margin: 0;
  outline: none;
  transition: all 0.2s ease 0s;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.app__shadow {
  height: 100%;
  width: 100%;
  z-index: 1;
}

.app__shadow,
.app__shadow-item,
.app__start .app__shadow-item {
  position: fixed;
}

.app__shadow-item[data-shadow-id="start_title_first"] {
  animation: animation-shadow-start_title_first 5s linear 2s infinite;
  bottom: 0;
  right: 0;
  transform: translate3d(0, 105px, 0);
}

.app__shadow-item[data-shadow-id="start_title_first"] img {
  width: 100%;
}

@keyframes animation-shadow-start_title_first {
  0% {
    transform: translate3d(0, 105px, 0);
  }

  50% {
    transform: translate3d(40px, 90px, 0);
  }

  to {
    transform: translate3d(0, 105px, 0);
  }
}

.app__shadow-item[data-shadow-id="start_title_second"] {
  animation: animation-shadow-start_title_second 5s linear 2s infinite;
  left: 0;
  top: 0;
  transform: translate3d(-50px, 0, 0);
}

.app__shadow-item[data-shadow-id="start_title_second"] img {
  width: 100%;
}

@keyframes animation-shadow-start_title_second {
  0% {
    transform: translate3d(-50px, 0, 0);
  }

  50% {
    transform: translate3d(-30px, 20px, 0);
  }

  to {
    transform: translate3d(-50px, 0, 0);
  }
}

.app__shadow-item[data-shadow-id="start_top"] {
  animation: animation-shadow-start_top 5s linear 2s infinite;
  right: 0;
  top: 60px;
  transform: translate3d(-5px, -45px, 0);
}

.app__shadow-item[data-shadow-id="start_top"] img {
  height: 100vh;
  width: 1354px;
}

@keyframes animation-shadow-start_top {
  0% {
    transform: translate3d(-5px, -45px, 0);
  }

  50% {
    transform: translate3d(20px, -25px, 0);
  }

  to {
    transform: translate3d(-5px, -45px, 0);
  }
}

.app__shadow-item[data-shadow-id="start_bot"] {
  animation: animation-shadow-start_bot 5s linear infinite;
  bottom: 0;
  right: 0;
  transform: translate3d(130px, 310px, 0);
}

.app__shadow-item[data-shadow-id="start_bot"] img {
  height: 625px;
  width: 903px;
}

@keyframes animation-shadow-start_bot {
  0% {
    transform: translate3d(130px, 310px, 0);
  }

  50% {
    transform: translate3d(30px, 320px, 0);
  }

  to {
    transform: translate3d(130px, 310px, 0);
  }
}

.app__shadow-item[data-shadow-id="5"] {
  bottom: -20px;
  left: 0;
}

.app__shadow-item[data-shadow-id="5"] img {
  width: 100%;
}

.app__planets {
  height: 100%;
  width: 100%;
  z-index: 1;
}

.app__planets,
.app__planets-item {
  position: fixed;
}

.app__planets-item[data-planets-id="auth_top"] {
  animation-duration: 10s;
  filter: drop-shadow(0 0 6px #6461a1);
  height: 130px;
  left: 5%;
  top: -2%;
  width: 130px;
}

.app__planets-item[data-planets-id="auth_top"] img {
  height: 100%;
  width: 100%;
}

.app__planets-item[data-planets-id="auth_bot"] {
  animation-duration: 30s;
  bottom: -2%;
  filter: drop-shadow(0 0 6px #ffe261);
  height: 170px;
  right: -4%;
  width: 170px;
}

.app__planets-item[data-planets-id="auth_bot"] img {
  height: 100%;
  width: 100%;
}

.app__planets-item[data-planets-id="start_top"] {
  animation-duration: 10s;
  filter: drop-shadow(0 0 6px #6461a1);
  height: 130px;
  left: 20%;
  top: 7%;
  width: 130px;
}

.app__planets-item[data-planets-id="start_top"] img {
  height: 100%;
  width: 100%;
}

.app__planets-item[data-planets-id="start_bot"] {
  animation-duration: 30s;
  bottom: -3%;
  filter: drop-shadow(0 0 6px #6461a1);
  height: 320px;
  left: -10%;
  width: 320px;
}

.app__planets-item[data-planets-id="start_bot"] img {
  height: 100%;
  width: 100%;
}

.app__planets-item[data-planets-id="game_top_left"] {
  filter: drop-shadow(0 0 10px #1fdcff);
  height: 210px;
  left: -10%;
  top: 15%;
  width: 210px;
}

.app__planets-item[data-planets-id="game_top_left"] img {
  height: 100%;
  width: 100%;
}

.app__planets-item[data-planets-id="game_top_right"] {
  animation-duration: 45s;
  filter: drop-shadow(0 0 6px #76587f);
  height: 265px;
  right: -10%;
  top: 0;
  width: 265px;
}

.app__planets-item[data-planets-id="game_top_right"] img {
  height: 100%;
  width: 100%;
}

@media (max-width: 768px) {
  .app__planets-item[data-planets-id="start_top"] {
    filter: drop-shadow(0 0 6px #6461a1);
    height: 115px;
    left: 25%;
    top: 10%;
    width: 115px;
  }

  .app__planets-item[data-planets-id="start_bot"] {
    bottom: -3%;
    filter: drop-shadow(0 0 6px #6461a1);
    height: 260px;
    left: -10%;
    width: 260px;
  }

  .app__planets-item[data-planets-id="game_top_left"] {
    height: 195px;
    left: -10%;
    top: 15%;
    width: 195px;
  }

  .app__planets-item[data-planets-id="game_top_right"] {
    animation-duration: 45s;
    filter: drop-shadow(0 0 6px #76587f);
    height: 240px;
    right: -10%;
    top: 0;
    transform: translate3d(-20px, -20px, 10px);
    width: 240px;
  }
}

@media (max-width: 576px) {
  .app__planets-item[data-planets-id="start_top"] {
    filter: drop-shadow(0 0 10px #5c69da);
    height: 110px;
    left: 25%;
    top: 10%;
    width: 110px;
  }

  .app__planets-item[data-planets-id="start_bot"] {
    bottom: -3%;
    filter: drop-shadow(0 0 6px #6461a1);
    height: 230px;
    left: -7%;
    width: 230px;
  }

  .app__planets-item[data-planets-id="game_top_left"] {
    height: 140px;
    left: -10%;
    top: 15%;
    width: 140px;
  }

  .app__planets-item[data-planets-id="game_top_right"] {
    animation-duration: 45s;
    filter: drop-shadow(0 0 6px #76587f);
    height: 165px;
    right: -15%;
    top: 0;
    transform: translate3d(-20px, -20px, 10px);
    width: 165px;
  }
}

@media (max-width: 426px) {
  .app__planets-item[data-planets-id="start_top"] {
    filter: drop-shadow(0 0 6px #6461a1);
    height: 95px;
    left: 15%;
    top: 15%;
    width: 95px;
  }

  .app__planets-item[data-planets-id="start_bot"] {
    bottom: -3%;
    filter: drop-shadow(0 0 6px #6461a1);
    height: 200px;
    left: -10%;
    width: 200px;
  }

  .app__planets-item[data-planets-id="game_top_left"] {
    height: 110px;
    left: -10%;
    top: 10%;
    width: 110px;
  }

  .app__planets-item[data-planets-id="game_top_right"] {
    animation-duration: 45s;
    filter: drop-shadow(0 0 6px #76587f);
    height: 140px;
    right: -17%;
    top: 0;
    transform: translate3d(-20px, -20px, 10px);
    width: 140px;
  }
}

.app__rocks {
  height: 100%;
  position: fixed;
  width: 100%;
  z-index: 1;
}

@media screen and (max-height: 630px),
screen and (max-width: 300px) {
  .app__rocks {
    display: none;
  }
}

.app__rocks-item[data-rocks-id="game_1"] {
  animation-duration: 20s;
  filter: drop-shadow(0 0 3px #985965);
  height: 81px;
  left: 30%;
  position: absolute;
  top: 5%;
  width: 85px;
}

.app__rocks-item[data-rocks-id="game_1"] img {
  height: 100%;
  width: 100%;
}

.app__rocks-item[data-rocks-id="game_2"] {
  animation-duration: 15s;
  filter: drop-shadow(0 0 1px #985965);
  height: 25px;
  left: 5%;
  position: absolute;
  top: 45%;
  width: 40px;
}

.app__rocks-item[data-rocks-id="game_2"] img {
  height: 100%;
  width: 100%;
}

.app__rocks-item[data-rocks-id="game_3"] {
  animation-duration: 3s;
  filter: drop-shadow(0 0 4px #985965);
  height: 40px;
  position: absolute;
  right: 33%;
  top: 15%;
  width: 75px;
}

.app__rocks-item[data-rocks-id="game_3"] img {
  height: 100%;
  width: 100%;
}

.app__rocks-item[data-rocks-id="game_4"] {
  animation-duration: 6s;
  filter: drop-shadow(0 0 3px #985965);
  height: 110px;
  position: absolute;
  right: 5%;
  top: 35%;
  width: 150px;
}

.app__rocks-item[data-rocks-id="game_4"] img {
  height: 100%;
  width: 100%;
}

@media (max-width: 768px) {
  .app__rocks-item[data-rocks-id="game_1"] {
    height: 66px;
    left: 30%;
    top: 3%;
    width: 70px;
  }

  .app__rocks-item[data-rocks-id="game_2"] {
    height: 25px;
    left: 5%;
    top: 45%;
    width: 40px;
  }

  .app__rocks-item[data-rocks-id="game_3"] {
    height: 40px;
    right: 40%;
    top: 15%;
    width: 75px;
  }

  .app__rocks-item[data-rocks-id="game_4"] {
    height: 90px;
    right: 5%;
    top: 32%;
    width: 130px;
  }
}

@media (max-width: 576px) {
  .app__rocks-item[data-rocks-id="game_1"] {
    height: 55px;
    left: 20%;
    top: 2%;
    width: 60px;
  }

  .app__rocks-item[data-rocks-id="game_2"] {
    height: 20px;
    left: 5%;
    top: 40%;
    width: 35px;
  }

  .app__rocks-item[data-rocks-id="game_3"] {
    height: 30px;
    right: 40%;
    top: 10%;
    width: 65px;
  }

  .app__rocks-item[data-rocks-id="game_4"] {
    height: 45px;
    right: 5%;
    top: 25%;
    width: 80px;
  }
}

@media (max-width: 426px) {
  .app__rocks-item[data-rocks-id="game_1"] {
    height: 46px;
    left: 25%;
    top: 3%;
    width: 50px;
  }

  .app__rocks-item[data-rocks-id="game_2"] {
    height: 15px;
    left: 5%;
    top: 45%;
    width: 20px;
  }

  .app__rocks-item[data-rocks-id="game_3"] {
    height: 35px;
    right: 30%;
    top: 10%;
    width: 65px;
  }

  .app__rocks-item[data-rocks-id="game_4"] {
    height: 50px;
    right: 3%;
    top: 17%;
    width: 80px;
  }
}

.animation-levitation {
  animation: animation-levitation 4s linear infinite;
  animation-direction: alternate;
}

.animation-levitation-inverse {
  animation: animation-levitation-inverse 8s linear infinite;
  animation-direction: alternate;
}

.animation-rotate {
  animation: animation-rotate 35s linear infinite;
}

.animation-rotate-inverse {
  animation: animation-rotate-inverse 35s linear infinite;
}

@keyframes animation-levitation {
  0% {
    transform: rotate(-12deg) translate3d(4px, -7px, 0);
  }

  to {
    transform: rotate(0deg) translateZ(0);
  }
}

@keyframes animation-levitation-inverse {
  0% {
    transform: rotate(20deg) translate3d(-4px, -5px, 0);
  }

  to {
    transform: rotate(0deg) translateZ(0);
  }
}

@keyframes animation-rotate {
  0% {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(1turn);
  }
}

@keyframes animation-rotate-inverse {
  0% {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-1turn);
  }
}

.app {
  justify-content: space-between;
}

.app,
.app__auth {
  display: flex;
  flex: 4;
  flex-direction: column;
  height: 100%;
  margin: auto;
  min-height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.app__auth {
  align-items: center;
  gap: 20px;
  justify-content: center;
  z-index: 1;
}

.app__auth-preload_coin {
  display: flex;
  height: 100px;
  justify-content: center;
  position: relative;
  width: 100px;
}

.app__auth-preload_coin img {
  height: 100%;
  position: absolute;
}

.app__auth-title {
  color: #fcc755;
  font-size: 35px;
  text-align: center;
  text-shadow: 2px 1px 0 #c5781c;
}

.app__auth-desc {
  font-size: 20px;
  margin: 0 5%;
  text-align: center;
  text-shadow: 2px 1px 0 #7872b8;
}

.app__auth-qr {
  width: 50%;
}

.app__auth-social {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  row-gap: 15px;
}

.app__auth-social_link {
  background: transparent;
  border: none;
  color: #fcc755;
  flex: 50%;
  font-size: 25px;
  min-width: -moz-max-content;
  min-width: max-content;
  text-align: center;
  text-decoration: underline;
  text-shadow: 1px 1px 0 #c5781c;
  width: 50%;
}

.app__auth-qr img {
  border-radius: 40px;
  height: 100%;
  width: 100%;
}

.app__auth-switch {
  background: transparent;
  border: none;
  color: #fcc755;
  font-size: 18px;
  text-align: center;
  text-decoration: underline;
  text-shadow: 1px 1px 0 #c5781c;
}

.app__start {
  align-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  margin: auto;
  z-index: 5;
}

.app__start-spaceship {
  animation: animation-spaceship 5s linear infinite;
  position: relative;
  width: 40%;
}

.app__start-spaceship img {
  position: relative;
  width: 100%;
  z-index: 2;
}

.app__start-spaceship:before {
  background: #51bddb;
  box-shadow: 0 0 45px 15px #51bddb;
  left: 6%;
  top: 47%;
  width: 85%;
}

.app__start-spaceship:after,
.app__start-spaceship:before {
  border-radius: 50%;
  content: "";
  display: block;
  height: 10px;
  position: absolute;
  transform: rotate(-15deg);
  z-index: 1;
}

.app__start-spaceship:after {
  background: #ff391e;
  bottom: 30%;
  box-shadow: 0 0 20px 20px #ff391e;
  right: 30%;
  width: 35%;
}

@keyframes animation-spaceship {
  0% {
    transform: rotate(4deg) translateY(3px);
  }

  50% {
    transform: rotate(-5deg) translateY(-20px);
  }

  to {
    transform: rotate(4deg) translateY(3px);
  }
}

.app__start-first_name {
  align-items: center;
  display: flex;
  justify-content: center;
  margin-top: 45px;
  position: relative;
  width: 80%;
}

.app__start-first_name_img {
  height: 80px;
  position: relative;
  width: 80px;
}

.app__start-first_name:before {
  background: #4166d4;
  border-radius: 50%;
  box-shadow: 0 0 50px 40px #4166d4;
  content: "";
  display: block;
  height: 100px;
  opacity: 0.3;
  position: absolute;
  top: 20px;
  width: 100%;
  z-index: 1;
}

.app__start-first_name_img img {
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-name: animation-first_name;
  animation-timing-function: linear;
  height: 100%;
  position: relative;
  width: 100%;
  z-index: 1;
}

.app__start-first_name_img[data-firstname="s"] img {
  animation-delay: 0s;
}

.app__start-first_name_img[data-firstname="p"] img {
  animation-delay: 0.1s;
}

.app__start-first_name_img[data-firstname="a"] img {
  animation-delay: 0.2s;
}

.app__start-first_name_img[data-firstname="c"] img {
  animation-delay: 0.3s;
}

.app__start-first_name_img[data-firstname="e"] img {
  animation-delay: 0.4s;
}

@keyframes animation-first_name {
  0% {
    filter: brightness(100%) grayscale(0);
    transform: scale(1);
  }

  5% {
    filter: brightness(135%) grayscale(0.1);
    transform: scale(1.1);
  }

  10%,
  to {
    filter: brightness(100%) grayscale(0);
    transform: scale(1);
  }
}

.app__start-second_name {
  animation: animation-second_name 5s ease-out infinite;
  margin-top: 15px;
  position: relative;
  width: 60%;
  z-index: 2;
}

.app__start-second_name img {
  width: 100%;
}

@keyframes animation-second_name {
  0% {
    transform: scale(1) translateY(0);
  }

  3% {
    transform: scale(0.9) translateY(0);
  }

  7% {
    transform: scale(1.05) translateY(-10px);
  }

  10% {
    transform: scale(1.1) translateY(-2px);
  }

  14% {
    transform: scale(0.93) translateY(6px);
  }

  18%,
  to {
    transform: scale(1) translateY(0);
  }
}

.app__start-start {
  margin-top: 20px;
}

@media (max-width: 480px) {
  .app__start-first_name {
    margin-top: 35px;
  }

  .app__start-first_name_img {
    height: 70px;
    width: 60px;
  }

  .app__start-second_name {
    margin-top: 10px;
  }
}

@media (max-width: 380px) {
  .app__start-first_name {
    margin-top: 20px;
  }

  .app__start-first_name_img {
    height: 55px;
    width: 50px;
  }

  .app__start-second_name {
    margin-top: 8px;
  }
}

.wrapper {
  flex: 1 1 0%;
  flex-direction: column;
  margin-top: calc(var(--tg-safe-area-inset-top, 10px) + var(--tg-content-safe-area-inset-top, 10px));
  overflow: auto;
  overscroll-behavior: none;
  scrollbar-width: none;
}

.btn,
.wrapper {
  display: flex;
  position: relative;
}

.btn {
  align-items: center;
  border-radius: 8px;
  font-size: 15px;
  gap: 5px;
  justify-content: center;
  min-height: 40px;
  min-width: 40px;
}

.btn__yellow-xl {
  background: url(/img/btn/btn-xl-yellow.png);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: none;
  color: #fe5302;
  font-size: 1.325rem;
  margin: 0;
  padding: 10px 15px;
  text-shadow: 2px 1px 0 #ad4a1b;
}

a.btn__yellow-xl {
  padding: 18px 22px;
}

.btn__yellow-xl:disabled {
  filter: grayscale(1) brightness(0.6);
}

.btn__yellow-xl:disabled:active,
.btn__yellow-xl:disabled:hover {
  transform: none !important;
}

@media (max-width: 768px) {
  .btn__yellow-xl {
    font-size: 1.325rem;
  }
}

@media (max-width: 576px) {
  .btn__yellow-xl {
    font-size: 1.325rem;
  }
}

@media (max-height: 579px) {
  .btn__yellow-xl {
    font-size: 22px;
    padding: 12px 16px;
  }
}

.modal__tutorial {
  align-content: center;
  align-items: center;
  background: linear-gradient(0deg, #4c0652, #000036);
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: auto;
  overflow: hidden;
  padding-bottom: calc(var(--tgm-safe-area-inset-bottom, 15px) + 20px);
  padding-top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px) + 60px);
  position: fixed;
  width: 100vw;
  z-index: 160;
}

.modal__tutorial-slide {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 10px;
  overflow: auto;
  transition: 0.2s;
}

.modal__tutorial-slide h2 {
  color: #fcc755;
  font-size: 1.325rem;
  margin: 0;
  text-align: center;
  text-shadow: 1px 1px 0 #c5781c;
}

.modal__tutorial-slide p {
  font-size: 0.925rem;
  margin: 0 15px;
  text-align: center;
  text-shadow: 1px 1px 0 #7872b8;
}

.modal__tutorial-icon {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
  margin: 0 auto;
  padding: 10px;
}

.modal__tutorial-icon img[data-id="2_0"] {
  height: 80px;
  width: 100px;
}

.modal__tutorial-icon img[data-id="2_1"] {
  height: 80px;
  width: 160px;
}

.modal__tutorial-icon img[data-id="3_0"] {
  height: 200px;
}

.modal__tutorial-icon img[data-id="3_1"] {
  height: 200px;
  width: 170px;
}

.modal__tutorial-icon img[data-id="4_0"] {
  height: 200px;
  width: 65.5px;
}

.modal__tutorial-icon img[data-id="4_1"] {
  height: 200px;
  width: 170px;
}

.modal__tutorial-icon img[data-id="5_0"],
.modal__tutorial-icon img[data-id="6_0"] {
  height: 200px;
  width: 180px;
}

.modal__tutorial-icon img[data-id="7_0"] {
  height: 230px;
  width: 200px;
}

.modal__tutorial-icon img {
  border-radius: 16px;
  max-height: 100%;
  max-width: 100%;
}

.game__menu {
  background: var(--bg-section-dark);
  border-top: 1px solid var(--bg-section-gray);
  display: flex;
  gap: 10px;
  justify-content: space-evenly;
  margin: auto;
  overflow: auto;
  padding: 10px 5px;
  padding-bottom: calc(var(--tgm-safe-area-inset-bottom, 15px) + 10px);
  width: 100%;
  z-index: 1;
}

@media (min-width: 768px) {
  .game__menu {
    max-width: 760px;
  }
}

.game__menu-btn {
  background: url(/img/btn/btn-yellow.png);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: none;
  flex: 4;
  height: 65px;
  margin: 0;
  max-width: 115px;
  padding: 0;
  position: relative;
}

.game__menu-btn:nth-child(2n) {
  background: url(/img/btn/btn-blue.png);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.game__menu-btn_content {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
}

.game__menu-btn svg {
  fill: #fe5302;
  height: 50%;
  width: 50%;
}

.game__menu-btn_icon {
  align-items: center;
  background: #fe5302;
  border-radius: 100%;
  display: flex;
  height: 30px;
  justify-content: center;
  left: 0;
  padding: 8px;
  position: absolute;
  top: -5px;
  width: 30px;
}

.game__menu-btn_icon svg {
  fill: #fff;
  height: 100%;
  width: 100%;
}

@media (max-width: 768px) {
  .game__menu-btn {
    height: 75px;
  }
}

@media (max-width: 576px) {
  .game__menu-btn {
    height: 75px;
  }
}

@media (max-width: 430px) {
  .game__menu-btn {
    height: 60px;
  }
}

@media (max-width: 300px) {
  .game__menu-btn {
    height: 45px;
  }
}

@media (max-height: 579px) {
  .game__menu {
    width: 100%;
  }

  .game__menu-btn {
    height: 65px;
  }
}

.game__menu-btn:nth-child(2n) svg {
  fill: #1d6dff;
}

.app__game {
  align-content: center;
  flex-direction: column;
  gap: 15px;
  height: 100%;
  position: relative;
  width: 100%;
  z-index: 5;
}

.app__game,
.app__game-balance {
  align-items: center;
  display: flex;
  justify-content: center;
}

@media (max-height: 579px) {
  .app__game {
    gap: 10px;
  }
}

.app__game-balance {
  align-items: center;
  display: flex;
  gap: 5px;
  justify-content: center;
}

.app__game-balance_img {
  height: 19px;
  margin-top: -2px;
  width: 19px;
}

.app__game-balance_img img {
  height: 100%;
  width: 100%;
}

.app__game-balance_text {
  color: #fcc755;
  font-size: 1.275rem;
  text-shadow: 2px 1px 0 #c5781c;
}

.app__game-donate {
  align-items: center;
  display: flex;
  gap: 5px;
  justify-content: center;
}

.app__game-donate_img {
  height: 19px;
  margin-top: -2px;
  width: 19px;
}

.app__game-donate_img img {
  height: 100%;
  width: 100%;
}

.app__game-donate_text {
  color: #fc5fff;
  font-size: 1.275rem;
  text-shadow: 2px 1px 0 #800a82;
}

.app__game-donate_btn {
  align-items: center;
  background: #140d1d;
  background: linear-gradient(45deg, #750376, #a446a6);
  border: 2px solid #fc5fff;
  border-radius: 10px;
  color: #fc5fff;
  display: flex;
  gap: 3px;
  justify-content: center;
  padding: 2px 5px;
}

.app__game-donate_btn svg {
  fill: #e867eb;
  height: 11px;
  width: 11px;
}

.app__game-claimed {
  width: 35%;
}

@media (max-width: 576px) {
  .app__game-claimed {
    width: 40%;
  }
}

@media (max-width: 350px) {
  .app__game-claimed {
    width: 70%;
  }
}

.app__game-claimed_bar {
  align-items: center;
  display: flex;
  justify-content: center;
  position: relative;
  width: 100%;
}

.app__game-claimed_bar:before {
  background: linear-gradient(279deg, #e2edff 65%, #a8bbff 70%);
  border-radius: 7% 15px 4px 11px;
  content: "";
  height: calc(100% + 4px);
  margin: auto;
  position: absolute;
  width: calc(100% + 4px);
  z-index: -1;
}

.app__game-claimed_value:after {
  background: linear-gradient(74deg, #ffd62f 50%, #ffa104 84%);
  border-radius: 0 10% 8px 0;
  bottom: 0;
  content: "";
  left: 0;
  margin: auto;
  position: absolute;
  top: 0;
  width: var(--size);
  z-index: -1;
}

.app__game-claimed_value {
  background: #29163f;
  border-radius: 7% 15px 4px 11px;
  font-size: 1rem;
  overflow: hidden;
  padding: 0 10px;
  position: relative;
  text-align: center;
  text-shadow: 2px 1px 0 #7872b8;
  z-index: 2;
}

@media (max-height: 579px) {
  .app__game-claimed_value {
    font-size: 16px;
    height: 18px;
    padding: 0 5px;
  }
}

.app__game-claimed_value,
.app__game-rockets {
  align-items: center;
  display: flex;
  justify-content: space-evenly;
  width: 100%;
}

.app__game-rockets {
  max-width: 100%;
  padding: 1.5rem 15px 0;
  position: relative;
  width: 100%;
  z-index: 1;
}

.app__game-rockets_left,
.app__game-rockets_right {
  align-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  justify-content: center;
  position: relative;
}

.app__game-rockets_left {
  order: 1;
}

.app__game-rockets_item-label {
  bottom: calc(100% + 5px);
  font-size: 1.1rem;
  position: absolute;
  text-shadow: 2px 1px 0 #7872b8;
  width: -moz-max-content;
  width: max-content;
}

.app__game-rockets_item-bar {
  flex: auto;
}

.app__game-bar_fuel {
  align-items: center;
  border-radius: 0;
  display: flex;
  height: 100%;
  justify-content: center;
  position: relative;
  width: 40px;
}

.app__game-bar_fuel:before {
  background: linear-gradient(279deg, #e2edff 65%, #a8bbff 70%);
  border-radius: 18px 15% 15px 23%;
  content: "";
  height: calc(100% + 4px);
  margin: auto;
  position: absolute;
  width: calc(100% + 4px);
  z-index: -1;
}

.app__game-bar_fuel .fuel__inner {
  background: #29163f;
  border-radius: 18px 15% 15px 23%;
  height: 100%;
  overflow: hidden;
  width: 100%;
}

.app__game-bar_fuel .fuel__inner:before {
  height: 20px;
  right: 40%;
  top: 60%;
}

.app__game-bar_fuel .fuel__inner:after,
.app__game-bar_fuel .fuel__inner:before {
  background: hsla(0, 0%, 100%, 0.2);
  border-radius: 50%;
  content: "";
  position: absolute;
  width: 20px;
  z-index: 2;
}

.app__game-bar_fuel .fuel__inner:after {
  height: 40px;
  right: 30%;
  top: 15%;
  transform: rotate(-20deg);
}

.app__game-bar_fuel .fuel__fill {
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-name: fillAction;
  animation-timing-function: cubic-bezier(0.2, 0.6, 0.8, 0.4);
  height: 100%;
  overflow: hidden;
  width: 100%;
}

.app__game-bar_fuel .fuel__fill svg {
  height: 100%;
  position: absolute;
  width: 100%;
}

.app__game-bar_fuel .fuel__wave {
  fill: #7bd532;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-name: waveAction;
  animation-timing-function: linear;
  height: 100%;
  width: 100%;
}

@keyframes fillAction {
  0% {
    -webkit-transform: translateY(100%);
  }

  to {
    -webkit-transform: translateY(var(--fuel));
  }
}

@keyframes waveAction {
  0% {
    -webkit-transform: translate(-130px);
  }

  to {
    -webkit-transform: translate(0);
  }
}

.app__game-bar_shield {
  align-items: center;
  border-radius: 0;
  display: flex;
  height: 100%;
  justify-content: center;
  position: relative;
  width: 40px;
}

@media (max-width: 768px) {

  .app__game-bar_fuel,
  .app__game-bar_shield {
    width: 35px;
  }
}

@media (max-width: 576px) {
  .app__game-bar_fuel {
    width: 25px;
  }

  .app__game-bar_fuel .fuel__inner,
  .app__game-bar_fuel:before {
    border-radius: 20px 6% 9px 18%;
  }

  .app__game-bar_shield {
    width: 25px;
  }
}

.app__game-bar_shield:before {
  background: linear-gradient(279deg, #e2edff 65%, #a8bbff 70%);
  border-radius: 20% 15px 15% 18px;
  content: "";
  height: calc(100% + 4px);
  margin: auto;
  position: absolute;
  width: calc(100% + 4px);
  z-index: -1;
}

.app__game-bar_shield .shield__inner {
  background: #29163f;
  border-radius: 0;
  border-radius: 20% 15px 15% 18px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 100%;
  justify-content: flex-end;
  overflow: hidden;
  width: 100%;
}

.app__game-bar_shield .shield__bar {
  background: linear-gradient(341deg, #c3bbeb, #8079da, #608cda, #438ed1);
  border: 2px solid rgba(32, 219, 255, 0.15);
  border-radius: 5px;
  box-shadow: inset 0 0 10px 0 #b9d3f3;
  height: var(--size);
  position: relative;
  width: 100%;
}

.app__game-rockets_item-icon {
  align-items: center;
  display: flex;
  height: 35px;
  justify-content: center;
  width: 35px;
}

.app__game-rockets_item-icon img {
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  width: 100%;
}

@media (max-height: 579px) {
  .app__game-rockets_item-icon {
    height: 20px;
    width: 20px;
  }

  .app__game-bar_fuel,
  .app__game-bar_shield {
    width: 15px;
  }

  .app__game-rockets_item-label {
    font-size: 18px;
  }
}

.app__game-rockets_item-icon svg {
  fill: #fff;
  filter: drop-shadow(3px 2px 0 #7872b8);
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
}

.app__game-rockets_right {
  order: 3;
}

.app__game-rockets_midle {
  align-items: center;
  display: flex;
  justify-content: center;
  max-width: 120px;
  min-width: 75px;
  order: 2;
  position: relative;
  width: -moz-max-content;
  width: 25%;
}

@media (min-width: 400px) {
  .app__game-rockets_midle {
    width: 20%;
  }
}

.app__game-rockets_midle.shield:before {
  background: radial-gradient(#b8de98, #1c8dff);
  border: 2px solid #fff;
  border-radius: 45%;
  content: "";
  display: flex;
  height: 130%;
  margin: auto;
  opacity: 0.25;
  position: absolute;
  width: 150%;
  z-index: 1;
}

.app__game-rockets_info {
  align-content: flex-start;
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  left: 105%;
  position: absolute;
  top: 0;
}

.app__game-rockets_info--item {
  align-items: center;
  display: flex;
  font-size: 0.825rem;
  gap: 4px;
  justify-content: flex-start;
}

.app__game-rockets_info--icon {
  height: 16px;
  width: 16px;
}

.app__game-rockets_info--icon svg {
  height: 100%;
  width: 100%;
}

.app__game-rockets_midle img {
  height: 100%;
  -o-object-fit: cover;
  object-fit: contain;
  width: -moz-max-content;
  width: 100%;
}

@media (min-width: 550px) {
  .app__game-rockets_midle img {
    max-height: 105px;
  }
}

.app__game-rockets_midle.launched .app__game-rockets_midle--rocket {
  animation-direction: alternate;
  animation-duration: 0.2s;
  animation-iteration-count: infinite;
  animation-name: rockets-shake;
  animation-timing-function: ease-in;
}

@keyframes rockets-shake {
  0% {
    transform: translate(0.3vw, 0.3vh);
  }

  33% {
    transform: translate(-0.3vw, 0.3vh);
  }

  66% {
    transform: translate(-0.3vw, -0.3vh);
  }

  to {
    transform: translate(0.3vw, -0.3vh);
  }
}

.app__game-rockets_flames {
  height: 70px;
  left: 50%;
  opacity: 0;
  position: absolute;
  top: 90%;
  transform: translateX(-50%) rotate(-45deg);
  visibility: hidden;
  width: 60px;
  z-index: 0;
}

@media (max-width: 992px) {
  .app__game-rockets_flames {
    height: 50px;
    width: 35px;
  }
}

@media (max-width: 768px) {
  .app__game-rockets_flames {
    height: 60px;
    width: 50px;
  }
}

@media (max-width: 576px) {
  .app__game-rockets_flames {
    height: 50px;
    width: 40px;
  }
}

.app__game-rockets_midle.launched .app__game-rockets_flames {
  opacity: 1;
  transition: opacity 0.3s ease-in, visibility 0.3s ease-in;
  visibility: visible;
}

.app__game-rockets_flames-flame {
  background-color: #ffdc01;
  border-radius: 30vw;
  height: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 0;
}

.app__game-rockets_flames-flame:nth-child(odd) {
  animation: flameodd 1.5s ease-in infinite;
}

.app__game-rockets_flames-flame:nth-child(2n) {
  animation: flameeven 1.5s ease-in infinite;
}

.app__game-rockets_flames-flame:first-child {
  animation-delay: 0s;
}

.app__game-rockets_flames-flame:nth-child(2) {
  animation-delay: 0.25s;
}

.app__game-rockets_flames-flame:nth-child(3) {
  animation-delay: 0.5s;
}

.app__game-rockets_flames-flame:nth-child(4) {
  animation-delay: 0.75s;
}

.app__game-rockets_flames-flame:nth-child(5) {
  animation-delay: 1s;
}

.app__game-rockets_flames-flame:nth-child(6) {
  animation-delay: 1.25s;
}

@keyframes flameodd {

  0%,
  to {
    height: 0;
    width: 0;
  }

  25% {
    height: 100%;
    width: 100%;
  }

  0% {
    background-color: #ffdc01;
    z-index: 15;
  }

  40% {
    background-color: #fdac01;
    z-index: 15;
  }

  to {
    background-color: #f73b01;
    z-index: -10;
  }

  0% {
    right: 0;
    top: 0;
  }

  25% {
    right: 1%;
    top: 2%;
  }

  to {
    right: 150%;
    top: 170%;
  }
}

@keyframes flameeven {

  0%,
  to {
    height: 0;
    width: 0;
  }

  25% {
    height: 100%;
    width: 100%;
  }

  0% {
    background-color: #ffdc01;
    z-index: 15;
  }

  40% {
    background-color: #fdac01;
    z-index: 15;
  }

  to {
    background-color: #f73b01;
    z-index: -10;
  }

  0% {
    right: 0;
    top: 0;
  }

  25% {
    right: 2%;
    top: 1%;
  }

  to {
    right: 170%;
    top: 150%;
  }
}

.app__hud-rb {
  right: 5px;
}

.app__hud-lb,
.app__hud-rb {
  align-items: flex-end;
  bottom: 5px;
  position: absolute;
  z-index: 3;
}

.app__hud-lb {
  left: 5px;
}

.app__hud-lb,
.app__hud-rb {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.app__hud-btn {
  align-items: center;
  background: transparent;
  border: none;
  justify-content: center;
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.app__hud-new {
  background: linear-gradient(45deg, #76031e, #da2e3a);
  border-radius: 5px;
  color: #fff;
  left: 0;
  padding: 0px 2px;
  position: absolute;
  font-size: 0.675rem;
  line-height: 1.1rem;
  top: -2px;
  z-index: 1;
}

.app__hud-icon {
  height: 48px;
  width: 48px;
}

.app__hud-icon img {
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  width: 100%;
}

.app__hud-icon--roulette {
  animation: spin-rotate 2.25s ease-in-out infinite;
}

.app__hud-text {
  color: #fff;
  font-size: 0.925rem;
  line-height: 16px;
}

@keyframes spin-rotate {
  to {
    transform: rotate(1turn);
  }

  0% {
    transform: rotate(0deg);
  }
}

.app__game-btn {
  align-items: center;
  display: flex;
  justify-content: center;
  margin-top: 0;
  z-index: 2;
}

.app__friends {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  justify-content: flex-start;
  overflow: auto;
  padding: 35px 15px 0;
  position: relative;
  z-index: 5;
}

.app__friends-title {
  color: #fcc755;
  font-size: 1.425rem;
  text-align: center;
  text-shadow: 2px 1px 0 #c5781c;
}

.app__friends-description {
  font-size: 0.925rem;
  margin: 0;
  text-align: center;
  text-shadow: 1px 1px 0 #7872b8;
}

.app__friends-label {
  font-size: 1rem;
  margin-top: 15px;
  text-shadow: 2px 1px 0 #7872b8;
}

.app__friends-link {
  align-items: center;
  display: flex;
  gap: 15px;
  justify-content: space-between;
  margin-bottom: 10px;
  margin-top: -5px;
}

.app__friends-link_input {
  align-items: center;
  display: flex;
  flex: 4;
  justify-content: center;
  position: relative;
}

.app__friends-link_input:before {
  background: linear-gradient(279deg, #d2d6dd6e 65%, #a8bbff52 70%);
  border-radius: 10% 14px 15% 18px;
  content: "";
  height: calc(100% + 4px);
  position: absolute;
  width: calc(100% + 4px);
  z-index: -1;
}

.app__friends-link_input input {
  align-items: center;
  background: #29163f;
  border: none;
  border-radius: 10% 14px 15% 18px;
  color: #fff;
  display: flex;
  flex-wrap: nowrap;
  font-size: 0.875rem;
  height: 100%;
  justify-content: space-between;
  letter-spacing: 0.5px;
  overflow: hidden;
  padding: 10px;
  width: 100%;
}

.app__friends-link_button {
  align-items: center;
  background: url(/img/ui/buttons/btn-gray.png);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: none;
  color: #6d67a0;
  display: flex;
  flex: 1 1 auto;
  font-size: 1rem;
  height: 48px;
  justify-content: center;
  margin: 0;
  max-width: -moz-max-content;
  max-width: max-content;
  min-width: 100px;
  padding: 0 15px;
  position: relative;
  text-shadow: 2px 1px 0 #d1ceff;
}

.app__friends-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 10px;
}

.app__friends-header {
  color: #b6b6b6;
  display: flex;
  font-size: 15px;
  justify-content: space-between;
  padding: 0 15px;
  text-shadow: 2px 1px 0 #6a64a99e;
}

.app__friends-list_items {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.app__friends-item {
  position: relative;
}

.app__friends-item:before {
  background: linear-gradient(279deg, #d2d6dd6e 65%, #a8bbff52 70%);
  border-radius: 10% 14px 15% 18px;
  bottom: 0;
  content: "";
  height: calc(100% + 6px);
  left: -3px;
  margin: auto;
  position: absolute;
  right: 0;
  top: -1px;
  width: calc(100% + 6px);
}

.app__friends-block {
  align-items: center;
  background: #29163f;
  border-radius: 10% 14px 15% 18px;
  display: flex;
  flex-wrap: nowrap;
  font-size: 16px;
  height: 100%;
  justify-content: space-between;
  overflow: hidden;
  padding: 7px 10px;
  width: 100%;
}

.app__friends-profit {
  align-items: center;
  display: flex;
  gap: 15px;
  justify-content: center;
}

.app__friends-amount,
.app__friends-dimond {
  align-items: center;
  display: flex;
  gap: 5px;
  justify-content: center;
}

.app__friends-amount_value {
  color: #fcc755;
  text-shadow: 2px 1px 0 #c5781c;
}

.app__friends-dimond .app__friends-amount_value {
  color: #00ddf4;
  text-shadow: 2px 1px 0 #1d6dff;
}

.app__friends-amount_img {
  height: 30px;
  width: 30px;
}

.app__friends-amount_img img {
  height: 100%;
  width: 100%;
}

.app__friends-reward--table {
  align-content: space-around;
  align-items: center;
  background: #29163f;
  border-radius: 4% 10px 3% 8px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  font-size: 15px;
  height: 100%;
  justify-content: space-between;
  margin-top: 15px;
  padding: 10px 15px;
  position: relative;
  width: 100%;
}

.app__friends-reward--label {
  font-size: 0.975rem;
}

.app__friends-reward--item {
  align-items: center;
  display: flex;
  font-size: 0.875rem;
  justify-content: space-between;
  width: 100%;
}

.app__friends-reward--value {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.app__friends-reward--value div {
  display: flex;
  gap: 5px;
  justify-content: center;
  align-items: center;
}

.app__friends-reward--value div img {
  height: 20px;
  width: 20px;
}

.app__friends-reward--table:before {
  background: linear-gradient(279deg, #d2d6dd6e 65%, #a8bbff52 70%);
  border-radius: 4% 10px 3% 8px;
  bottom: 0;
  content: "";
  height: calc(100% + 6px);
  left: -3px;
  margin: auto;
  position: absolute;
  right: 0;
  top: -1px;
  width: calc(100% + 6px);
  z-index: -2;
}

.app__earn {
  display: flex;
  flex-direction: column;
  gap: 15px;
  height: 100%;
  justify-content: flex-start;
  overflow: auto;
  padding: 35px 15px 0;
  position: relative;
  width: 100%;
  z-index: 5;
}

.app__earn-title {
  color: #fcc755;
  font-size: 1.425rem;
  text-align: center;
  text-shadow: 2px 1px 0 #c5781c;
}

.app__earn-description {
  font-size: 0.925rem;
  margin: 0;
  text-align: center;
  text-shadow: 1px 1px 0 #7872b8;
}

.app__earn-label {
  font-size: 1.025rem;
  text-shadow: 1px 1px 0 #7872b8;
}

.app__earn-list {
  display: flex;
  flex-direction: column;
  gap: 15px !important;
}

.app__earn-item {
  align-items: center;
  background: linear-gradient(279deg, #d2d6ddbd 100%, #a8bbffb3 0);
  border-radius: 10% 14px 15% 18px;
  display: flex;
  flex-wrap: nowrap;
  gap: 15px;
  justify-content: space-between;
  padding: 15px;
  position: relative;
  width: 100%;
}

.app__earn-item:before {
  background: #29163f;
  border-radius: 10% 14px 15% 18px;
  bottom: 0;
  content: "";
  height: calc(100% - 6px);
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: calc(100% - 6px);
  z-index: 0;
}

.app__earn-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.app__earn-itemblock {
  align-items: center;
  background: linear-gradient(279deg, #d2d6ddbd 100%, #a8bbffb3 0);
  border-radius: 10% 14px 15% 18px;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: space-between;
  padding: 15px;
  position: relative;
  width: 100%;
}

.app__earn-itemblock--flag {
  position: absolute;
  top: -5px;
  right: -5px;
  border-radius: 10% 14px 15% 18px;
  background: #fcc755;
  color: #fe5303;
  padding: 2px 10px;
}

.app__earn-itemblock:before {
  background: #29163f;
  border-radius: 10% 14px 15% 18px;
  bottom: 0;
  content: "";
  height: calc(100% - 6px);
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: calc(100% - 6px);
  z-index: 0;
}

.app__earn-itemblock {
  display: flex;
}

.app__earn-itemblock--content {
  align-items: flex-start;
  display: flex;
  flex: 4;
  flex-direction: column;
  gap: 5px;
  z-index: 1;
}

.app__earn-itemblock--content h2 {
  color: #fff;
  font-size: 1.125rem;
  line-height: 1.225rem;
  margin: 0;
  text-align: left;
  text-shadow: 1px 1px 0 #7872b8;
}

.app__earn-itemblock--content button,
.app__earn-itemblock--content a {
  background: url(/img/btn/btn-xl-yellow.png);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: none;
  color: #fe5302;
  font-size: 0.925rem;
  margin: 0;
  padding: 8px 10px;
  text-shadow: 1px 1px 0 #ad4a1b;
  width: -moz-max-content;
  width: max-content;
}

.app__earn-itemblock--image {
  align-items: center;
  display: flex;
  justify-content: center;
  z-index: 1;
}

.app__earn-itemblock--image img {
  height: auto;
  width: 45px;
}

@media (max-width: 386px) {
  .app__earn-itemblock {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

.app__earn-item_icon {
  background: #9993ce;
  border-radius: 16% 13px 10px 16px;
  height: 45px;
  min-height: 45px;
  min-width: 45px;
  padding: 2px;
  width: 45px;
  z-index: 1;
}

.app__earn-item_icon img {
  background: #fff;
  border-radius: 16% 13px 10px 16px;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  width: 100%;
}

.app__earn-item_info {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-right: auto;
  width: 100%;
  z-index: 1;
}

.app__earn-item_name {
  font-size: 0.875rem;
  line-height: 18px;
}

.app__earn-bot {
  flex-wrap: wrap;
  gap: 15px;
}

.app__earn-bot,
.app__earn-item_reward {
  display: flex;
  justify-content: flex-start;
}

.app__earn-item_reward {
  align-items: center;
  gap: 5px;
}

.app__earn-item_reward img {
  height: 20px;
  width: 20px;
}

.app__earn-item_reward p {
  font-size: 0.875rem;
  margin: 0;
}

.app__earn-item_action {
  width: -moz-max-content;
  width: max-content;
  z-index: 1;
}

.app__earn-item_for_payout {
  position: absolute;
  top: -10px;
  left: -5px;
  background: #fcc755;
  color: #fe5302;
  width: 25px;
  height: 25px;
  padding: 4px;
  border-radius: 100%;
}

.app__earn-item_for_payout svg {
  width: 100%;
  height: 100%;
}

.app__earn-item_action button {
  background: url(/img/ui/buttons/btn-gray.png);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: none;
  color: #6d67a0;
  flex: 1;
  font-size: 25px;
  height: 55px;
  margin: 0;
  max-width: 95px;
  padding: 0 25px;
  position: relative;
  text-shadow: 2px 1px 0 #d1ceff;
}

.popup {
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  background: rgba(42, 42, 42, 0.55);
  height: 100vh;
  padding: 0;
  padding-top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px) + 2svh);
  top: 0;
  z-index: 24;
}

.popup,
.popup__block {
  bottom: 0;
  left: 0;
  margin: auto;
  position: fixed;
  right: 0;
  width: 100%;
}

.popup__block {
  align-items: center;
  background: linear-gradient(280deg, #d2d6ddcf 100%, #a8bbff8f 0);
  border-radius: 13px 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
  justify-content: flex-start;
  max-height: calc(92vh - var(--tg-safe-area-inset-top, 0px) - var(--tg-content-safe-area-inset-top, 0px));
  min-height: 60vh;
  padding: 45px 18px 20px;
  padding-bottom: calc(var(--tg-safe-area-inset-bottom, 0px) + 20px);
  text-align: center;
  z-index: 9;
}

.popup__block:before {
  background: #29163f;
  border-radius: 13px 16px 0 0;
  bottom: 0;
  content: "";
  height: calc(100% - 3px);
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 100%;
  z-index: -1;
}

.popup__block-close {
  background-color: transparent;
  background-image: url(/img/ui/buttons/btn-blue.png);
  background-size: 100% 100%;
  border: none;
  height: 40px;
  padding: 0;
  position: absolute;
  right: 15px;
  top: 15px;
  width: 50px;
}

.popup__block-close,
.popup__block-close_content {
  align-items: center;
  display: flex;
  justify-content: center;
}

.popup__block-close_content img {
  height: 100%;
  width: 100%;
}

.popup__block-header {
  align-items: center;
  display: flex;
  gap: 5px;
  justify-content: center;
}

.popup__block-content {
  flex: 4;
  height: 100%;
  overflow: auto;
  padding: 5px 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}

.popup__header-icon {
  height: 38px;
  width: 38px;
}

.popup__header-icon img {
  height: 100%;
  width: 100%;
}

.popup__block-title {
  font-size: 20px;
}

.popup__block-desc {
  font-size: 0.925rem;
  line-height: 1.275rem;
}

.popup__block-minibtn button {
  background: transparent;
  border: none;
  color: #fcc755;
  font-size: 0.975rem;
  text-align: center;
  text-decoration: underline;
  text-shadow: 2px 1px 0 #c5781c;
}

.promo__earn-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.promo__earn-item {
  align-items: center;
  background: linear-gradient(279deg, #d2d6ddbd 100%, #a8bbffb3 0);
  border-radius: 10% 14px 15% 18px;
  display: flex;
  flex-wrap: nowrap;
  gap: 15px;
  justify-content: space-between;
  overflow: hidden;
  padding: 10px 15px;
  position: relative;
  width: 100%;
}

.promo__earn-item:before {
  background: #29163f;
  border-radius: 10% 14px 15% 18px;
  bottom: 0;
  content: "";
  height: calc(100% - 6px);
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: calc(100% - 6px);
  z-index: 0;
}

.promo__earn-item--icon {
  background: #9993ce;
  border-radius: 16% 13px 10px 16px;
  height: 45px;
  min-height: 45px;
  min-width: 45px;
  padding: 2px;
  width: 45px;
  z-index: 1;
}

.promo__earn-item--icon img {
  height: 100%;
  width: 100%;
}

.promo__earn-item--label {
  line-height: 1.125rem;
  text-align: left;
  z-index: 1;
}

.promo__earn-item--btn button {
  align-items: center;
  background: url(/img/ui/buttons/btn-gray.png);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: none;
  color: #6d67a0;
  display: flex;
  flex: 1;
  font-size: 25px;
  height: 55px;
  justify-content: center;
  margin: 0;
  max-width: 95px;
  padding: 0 25px;
  position: relative;
  text-shadow: 2px 1px 0 #d1ceff;
}

.popup__block-captcha_example {
  align-items: center;
  background: #2f1849;
  border: 2px solid #aabbfa;
  border-radius: 13% 12px 19% 15px;
  display: flex;
  justify-content: center;
  padding: 7px;
  transition: 0.2s;
  width: -moz-max-content;
  width: max-content;
  margin: auto;
}

.popup__block-captcha_example img {
  height: 35px;
  -o-object-fit: contain;
  object-fit: contain;
  width: 35px;
}

.popup__block-captcha_select {
  display: grid;
  gap: 10px 10px;
  grid-template-columns: repeat(3, 1fr);
}

.captcha-label {
  align-items: center;
  background: #2f1849;
  border: 3px solid #aabbfa;
  border-radius: 13% 12px 19% 15px;
  display: flex;
  justify-content: center;
  padding: 10px;
  transition: 0.2s;
}

.captcha-label.selected {
  border-color: #feb013;
}

.captcha-label img {
  height: 50px;
  -o-object-fit: contain;
  object-fit: contain;
  width: 50px;
}

.daily__content-prize {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 15px 10px;
  justify-content: flex-start;
  padding: 10px 0;
  width: 100%;
}

.daily__prize-item {
  align-items: center;
  background: #1a0e2b;
  border: 2px solid #71688a;
  border-radius: 20px 10% 10px 16%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  padding: 10px 5px;
  position: relative;
  transition: 0.15s;
  width: calc(33% - 10px);
}

.daily__prize-item.claimed {
  border-color: #26a70a;
}

.daily__prize-check {
  align-items: center;
  background: #26a808;
  border-radius: 10px 32% 12px 52%;
  display: flex;
  height: 32px;
  justify-content: center;
  position: absolute;
  right: -10px;
  top: -10px;
  width: 36px;
}

.daily__prize-check svg {
  stroke: #fff;
  height: 30px;
  width: 30px;
}

.daily__prize-time {
  font-size: 13px;
}

.daily__prize-icon {
  align-items: center;
  display: flex;
  gap: 5px;
  justify-content: center;
}

.daily__prize-icon img {
  height: 23px;
  -o-object-fit: contain;
  object-fit: contain;
  width: 23px;
}

.daily__prize-value {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.earn__modal-button button {
  background: url(/img/btn/btn-xl-yellow.png);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: none;
  color: #fe5302;
  font-size: 20px;
  margin: 0;
  padding: 10px;
  text-shadow: 2px 1px 0 #ad4a1b;
}

.app__earn-item_action button,
.modal {
  align-items: center;
  display: flex;
  justify-content: center;
}

.earn__modal {
  align-items: center;
  background: linear-gradient(279deg, #d2d6dd6e 100%, #a8bbff52 0);
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 15px;
  height: -moz-max-content;
  height: max-content;
  justify-content: space-between;
  max-height: calc(100% - 95px);
  overflow: hidden;
  padding: 35px 18px 20px;
  padding-top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px) + 35px);
  position: fixed;
  text-align: center;
  top: -5px;
  width: 100%;
  z-index: 9;
}

.earn__modal,
.earn__modal:before {
  border-radius: 0 0 15% 18px;
  bottom: 0;
}

.earn__modal:before {
  background: #29163f;
  content: "";
  height: calc(100% - 6px);
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: calc(100% - 6px);
  z-index: -1;
}

.earn__modal-close {
  align-items: center;
  background-color: transparent;
  background-image: url(/img/ui/buttons/btn-blue.png);
  background-size: 100% 100%;
  border: none;
  display: flex;
  height: 55px;
  justify-content: center;
  padding: 0;
  position: fixed;
  right: 15px;
  top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px) + 10px);
  width: 65px;
}

.earn__modal-close img {
  height: 40px;
  height: 30px;
  width: 30px;
}

.earn__modal-photo {
  background: #9993ce;
  border-radius: 16% 13px 10px 16px;
  height: 45px;
  min-height: 45px;
  min-width: 45px;
  padding: 3px;
  width: 45px;
}

.earn__modal-photo img {
  background: #fff;
  border-radius: 16% 13px 10px 16px;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  width: 100%;
}

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

.earn__modal-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: auto;
  width: 100%;
}

.earn__modal-text {
  font-size: 15px;
}

.earn__modal-reward img {
  height: 25px;
  width: 25px;
}

.earn__modal-reward {
  align-items: center;
  display: flex;
  font-size: 23px;
  gap: 8px;
  justify-content: center;
}

.earn__modal-input input {
  background: #71688a;
  border: none;
  border-radius: inherit;
  border-radius: 10px 10% 10px 14%;
  color: #2a1d39;
  font-size: 17px;
  min-width: -moz-max-content;
  min-width: max-content;
  padding: 8px 10px;
  position: relative;
  width: -moz-max-content;
  width: max-content;
}

.earn__modal-reward p {
  margin: 0;
}

.app__leaderboard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  justify-content: flex-start;
  max-width: 100%;
  overflow: auto;
  padding: 35px 15px 0;
  position: relative;
  z-index: 5;
}

.app__leaderboard-title {
  color: #fcc755;
  font-size: 1.425rem;
  text-align: center;
  text-shadow: 2px 1px 0 #c5781c;
}

.app__leaderboard-description {
  font-size: 0.925rem;
  margin: 0;
  text-align: center;
  text-shadow: 1px 1px 0 #7872b8;
}

.app__leaderboard-time {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.app__leaderboard-time_text {
  font-size: 0.925rem;
  margin: 0;
  text-align: center;
  text-shadow: 2px 1px 0 #7872b8;
}

.app__leaderboard-time_value {
  color: #fcc755;
  font-size: 1.6rem;
  text-align: center;
  text-shadow: 1px 1px 0 #c5781c;
}

.app__leaderboard-category {
  align-items: center;
  background: linear-gradient(279deg, #d2d6dd6e 65%, #a8bbff52 70%);
  border-radius: 10% 14px 15% 18px;
  display: flex;
  flex-wrap: wrap;
  font-size: 16px;
  gap: 10px;
  height: -moz-max-content;
  height: max-content;
  justify-content: space-between;
  margin-top: 10px;
  padding: 10px;
  position: relative;
  width: 100%;
}

.app__leaderboard-category:before {
  background: #29163f;
  border-radius: 10% 14px 15% 18px;
  bottom: 0;
  content: "";
  height: calc(100% - 5px);
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: calc(100% - 5px);
}

.app__leaderboard-category button {
  background: #71688a;
  border: none;
  border-radius: inherit;
  color: #2a1d39;
  flex: 4;
  font-size: 14px;
  min-width: -moz-max-content;
  min-width: max-content;
  padding: 10px 20px;
  position: relative;
  width: -moz-max-content;
  width: max-content;
}

.app__leaderboard-category button.active {
  background: #fcc755;
  color: #fe5302;
}

.app__leaderboard-category_count {
  align-items: center;
  background: #fe5302;
  border-radius: 100%;
  color: #fff;
  display: flex;
  height: 25px;
  justify-content: center;
  min-width: 25px;
  padding: 0 5px;
  position: absolute;
  right: -5px;
  top: -5px;
}

.app__leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 10px;
  max-width: 100%;
  width: 100%;
}

.app__leaderboard-header {
  color: #b6b6b6;
  display: flex;
  font-size: 15px;
  justify-content: space-between;
  padding: 0 15px;
  text-shadow: 2px 1px 0 #6a64a99e;
}

.app__leaderboard-item {
  max-width: 100%;
  position: relative;
}

.app__leaderboard-item:before {
  background: linear-gradient(279deg, #d2d6dd6e 65%, #a8bbff52 70%);
  border-radius: 10% 14px 15% 18px;
  bottom: 0;
  content: "";
  height: calc(100% + 6px);
  left: -3px;
  margin: auto;
  position: absolute;
  right: 0;
  top: -1px;
  width: calc(100% + 6px);
}

.app__leaderboard-block {
  align-items: center;
  background: #29163f;
  border-radius: 10% 14px 15% 18px;
  display: flex;
  flex-wrap: nowrap;
  font-size: 16px;
  gap: 20px;
  height: 100%;
  justify-content: space-between;
  overflow: hidden;
  padding: 7px 10px;
  width: 100%;
}

.app__leaderboard-item.active:before {
  background: linear-gradient(279deg, #ffb20b 65%, #ffb710 70%);
}

.app__leaderboard-item.active .app__leaderboard-block {
  background: #44226b;
}

.app__leaderboard-place {
  align-items: center;
  border-radius: 100%;
  display: flex;
  height: 35px;
  justify-content: center;
  padding: 10px;
  width: 35px;
}

.app__leaderboard-item:nth-child(2) .app__leaderboard-place {
  background-image: linear-gradient(225deg, #ffe866, #ffc814);
  color: #fff;
}

.app__leaderboard-item:nth-child(3) .app__leaderboard-place {
  background-image: linear-gradient(120deg, #c4c4c4, #e8e8e8, #c7c7c7);
  color: #4e4e4e;
}

.app__leaderboard-item:nth-child(4) .app__leaderboard-place {
  background-image: linear-gradient(90deg, #461111, #890f0d);
}

.app__leaderboard-info {
  margin-right: auto;
}

.app__leaderboard-value {
  align-items: center;
  display: flex;
  gap: 5px;
  justify-content: flex-start;
}

.app__leaderboard-value p {
  margin: 0;
}

.app__leaderboard-value img {
  height: 20px;
  width: 20px;
}

.app__leaderboard-amount {
  align-items: center;
  display: flex;
  font-size: 19px;
  gap: 5px;
  justify-content: center;
}

.app__leaderboard-amount_img {
  height: 30px;
  width: 30px;
}

.app__leaderboard-amount_img img {
  height: 100%;
  width: 100%;
}

.modal {
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  background: rgba(42, 42, 42, 0.55);
  bottom: 0;
  height: 100vh;
  left: 0;
  margin: auto;
  padding: 10px 20px;
  padding-bottom: calc(var(--tg-safe-area-inset-bottom, 10px) + var(--tg-content-safe-area-inset-bottom, 0px));
  padding-top: calc(var(--tg-safe-area-inset-top, 10px) + var(--tg-content-safe-area-inset-top, 0px));
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 24;
}

.modal__block {
  background-image: url(/img/ui/window.png);
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-height: 90vh;
  min-height: 35vh;
  padding: 20px;
  position: relative;
  transition: 0.2s;
  width: 100%;
}

.modal__block,
.modal__block-close {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.modal__block-close {
  background-color: transparent;
  background-image: url(/img/ui/buttons/btn-blue.png);
  border: none;
  height: 62px;
  padding: 0;
  position: absolute;
  right: -10px;
  top: -20px;
  width: 70px;
}

.modal__block-close_content {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
}

.modal__block-close img {
  height: 30px;
  margin-top: -2px;
  width: 30px;
}

.modal__block-title {
  font-size: 28px;
  text-align: center;
  text-shadow: 3px 2px 0 #7872b8;
}

.modal__block-content {
  max-height: 0;
  position: relative;
  transition: inherit;
}

.modal__block-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: 0.2s;
}

.modal__block-image {
  align-items: center;
  background-image: url(/img/ui/buttons/btn-gray.png);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  height: 100px;
  justify-content: center;
  margin: 0 auto;
  padding: 10px;
  width: 120px;
}

.modal__block-image img {
  max-height: 100%;
  max-width: 100%;
}

.modal__block-label {
  font-size: 22px;
  text-align: center;
  text-shadow: 2px 2px 0 #7872b8;
}

.modal__block-description,
.modal__block-free {
  font-size: 16px;
  text-align: center;
  text-shadow: 1px 1px 0 #7872b8;
}

.modal__block-btn {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
  margin-top: auto;
}

.modal__block-btn_nav {
  background-color: transparent;
  background-image: url(/img/ui/buttons/btn-blue.png);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: none;
  height: 55px;
  padding: 0;
  width: 65px;
}

.modal__block-btn_nav img {
  height: 26px;
  width: 20px;
}

.modal__block-btn_event {
  border: none;
  font-size: 24px;
  height: 60px;
  min-width: -moz-max-content;
  min-width: max-content;
  padding: 0 10px;
  width: 100px;
}

.popup__block .modal__block-btn_event {
  font-size: 18px;
  height: 55px;
}

@media (max-height: 579px) {
  .modal__block-btn_event {
    font-size: 18px;
    height: 50px;
  }

  .modal__block-item {
    gap: 5px;
  }

  .modal__block {
    gap: 14px;
  }

  .modal__block-title {
    font-size: 24px;
  }

  .modal__block-image {
    height: 65px;
    width: 80px;
  }

  .modal__block-label {
    font-size: 18px;
  }

  .modal__block-description {
    font-size: 15px;
    line-height: 20px;
  }
}

@media (max-width: 380px) {
  .modal__block-image {
    height: 55px;
    width: 70px;
  }

  .modal__block-label {
    font-size: 18px;
  }

  .modal__block-title {
    font-size: 22px;
  }

  .modal__block-item {
    gap: 3px;
  }

  .modal__block-description,
  .modal__block-free {
    font-size: 14px;
    line-height: 20px;
  }

  .modal__block-btn_event {
    font-size: 18px;
    height: 50px;
    padding: 0 15px;
    width: -moz-max-content;
    width: max-content;
  }
}

.btn__event-primary {
  background-image: url(/img/ui/buttons/btn-l-yellow.png);
  color: #fe5302;
}

.btn__event-primary,
.btn__event-secondary {
  background-color: transparent;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.btn__event-secondary {
  background-image: url(/img/ui/buttons/btn-blue.png);
  color: #1c6fff;
}

.btn__event-purple {
  background-image: url(/img/ui/buttons/btn-purple.png);
  color: #fff;
}

.btn__event-gray,
.btn__event-purple {
  background-color: transparent;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.btn__event-gray {
  background-image: url(/img/ui/buttons/btn-gray.png);
  color: #6d67a0;
  text-shadow: 2px 1px 0 #d1ceff;
}

.btn__event-gray svg {
  fill: #6d67a0;
  filter: drop-shadow(2px 2px 0 #d1ceff);
  height: 25px;
  width: 25px;
}

.modal__block-btn_event img {
  background: none;
  height: 24px;
  margin-top: -5px;
  width: 24px;
}

.modal__block-btn_event_secondary img {
  height: 35px;
  width: 35px;
}

.modal__block-btn_nav_content {
  align-items: center;
  display: flex;
  gap: 5px;
  height: 100%;
  justify-content: center;
  width: 100%;
}

.modal__block-btn_text {
  background: transparent;
  border: none;
  color: #fcc755;
  font-size: 0.975rem;
  text-align: center;
  text-decoration: underline;
  text-shadow: 2px 1px 0 #c5781c;
}

.form__groupe {
  gap: 15px;
  padding: 0 5%;
  width: 100%;
}

.form__groupe,
.form__groupe-block {
  display: flex;
  flex-direction: column;
}

.form__groupe-block {
  gap: 10px;
}

.form__groupe-label {
  font-size: 22px;
  text-shadow: 2px 1px 0 #7872b8;
}

.form__input {
  position: relative;
}

.form__input input {
  align-items: center;
  background: #29163f;
  border: none;
  border-radius: 10% 14px 15% 18px;
  color: #fff;
  display: flex;
  flex-wrap: nowrap;
  font-size: 18px;
  height: 100%;
  justify-content: space-between;
  letter-spacing: 0.5px;
  overflow: hidden;
  padding: 12px;
  width: 100%;
}

.form__input:before {
  background: linear-gradient(279deg, #d2d6dd6e 65%, #a8bbff52 70%);
  border-radius: 10% 14px 15% 18px;
  bottom: 0;
  content: "";
  height: calc(100% + 6px);
  left: -3px;
  margin: auto;
  position: absolute;
  right: 0;
  top: -1px;
  width: calc(100% + 6px);
}

.form__groupe-btn {
  align-items: center;
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

@font-face {
  font-display: swap;
  font-family: Unbounded;
  font-style: normal;
  font-weight: 500;
  src: url(/fonts/Unbounded-Medium.eot);
  src: local("Unbounded Medium"), local("Unbounded-Medium"),
    url(/fonts/Unbounded-Medium.eot?#iefix) format("embedded-opentype"),
    url(/fonts/Unbounded-Medium.woff2) format("woff2"),
    url(/fonts/Unbounded-Medium.woff) format("woff"),
    url(/fonts/Unbounded-Medium.ttf) format("truetype");
}

@font-face {
  font-display: swap;
  font-family: Unbounded;
  font-style: normal;
  font-weight: 700;
  src: url(/fonts/Unbounded-Bold.eot);
  src: local("Unbounded Bold"), local("Unbounded-Bold"),
    url(/fonts/Unbounded-Bold.eot?#iefix) format("embedded-opentype"),
    url(/fonts/Unbounded-Bold.woff2) format("woff2"),
    url(/fonts/Unbounded-Bold.woff) format("woff"),
    url(/fonts/Unbounded-Bold.ttf) format("truetype");
}

@font-face {
  font-display: swap;
  font-family: Unbounded;
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/Unbounded-Regular.eot);
  src: local("Unbounded Regular"), local("Unbounded-Regular"),
    url(/fonts/Unbounded-Regular.eot?#iefix) format("embedded-opentype"),
    url(/fonts/Unbounded-Regular.woff2) format("woff2"),
    url(/fonts/Unbounded-Regular.woff) format("woff"),
    url(/fonts/Unbounded-Regular.ttf) format("truetype");
}

@font-face {
  font-display: swap;
  font-family: Unbounded;
  font-style: normal;
  font-weight: 900;
  src: url(/fonts/Unbounded-Black.eot);
  src: local("Unbounded Black"), local("Unbounded-Black"),
    url(/fonts/Unbounded-Black.eot?#iefix) format("embedded-opentype"),
    url(/fonts/Unbounded-Black.woff2) format("woff2"),
    url(/fonts/Unbounded-Black.woff) format("woff"),
    url(/fonts/Unbounded-Black.ttf) format("truetype");
}

@font-face {
  font-display: swap;
  font-family: Unbounded;
  font-style: normal;
  font-weight: 300;
  src: url(/fonts/Unbounded-Light.eot);
  src: local("Unbounded Light"), local("Unbounded-Light"),
    url(/fonts/Unbounded-Light.eot?#iefix) format("embedded-opentype"),
    url(/fonts/Unbounded-Light.woff2) format("woff2"),
    url(/fonts/Unbounded-Light.woff) format("woff"),
    url(/fonts/Unbounded-Light.ttf) format("truetype");
}

@font-face {
  font-display: swap;
  font-family: Unbounded Blond;
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/Unbounded-Blond.eot);
  src: local("Unbounded Blond"), local("Unbounded-Blond"),
    url(/fonts/Unbounded-Blond.eot?#iefix) format("embedded-opentype"),
    url(/fonts/Unbounded-Blond.woff2) format("woff2"),
    url(/fonts/Unbounded-Blond.woff) format("woff"),
    url(/fonts/Unbounded-Blond.ttf) format("truetype");
}

@font-face {
  font-display: swap;
  font-family: SF Pro Display;
  font-style: normal;
  font-weight: 300;
  src: url(/fonts/SF-Pro-Display-Thin.otf);
}

@font-face {
  font-display: swap;
  font-family: SF Pro Display;
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/SF-Pro-Display-Light.otf);
}

@font-face {
  font-display: swap;
  font-family: SF Pro Display;
  font-style: normal;
  font-weight: 500;
  src: url(/fonts/SF-Pro-Display-Regular.otf);
}

@font-face {
  font-display: swap;
  font-family: SF Pro Display;
  font-style: normal;
  font-weight: 600;
  src: url(/fonts/SF-Pro-Display-Medium.otf);
}

@font-face {
  font-display: swap;
  font-family: SF Pro Display;
  font-style: normal;
  font-weight: 700;
  src: url(/fonts/SF-Pro-Display-Semibold.otf);
}

@font-face {
  font-display: swap;
  font-family: SF Pro Display;
  font-style: normal;
  font-weight: 800;
  src: url(/fonts/SF-Pro-Display-Bold.otf);
}

@font-face {
  font-display: swap;
  font-family: SF Pro Display;
  font-style: normal;
  font-weight: 900;
  src: url(/fonts/SF-Pro-Display-Black.otf);
}

@font-face {
  font-display: swap;
  font-family: Vampiro One;
  font-style: normal;
  font-weight: 500;
  src: url(/fonts/VampiroOne-Regular.ttf);
}

:root {
  --white-color: #fff;
  --white-color-light: #f0f0f0;
  --gray-color: #4d4f51;
  --gray-color-light: #8b8c8e;
  --dark-color: #040609;
  --black-color: #000;
  --purple-primary-1: #fec7ff;
  --purple-primary-2: #ff8be5;
  --purple-primary-3: #f450f8;
  --purple-primary-4: #d22ecc;
  --purple-primary-5: #6a3d66;
  --purple-primary-6: #661a55;
  --purple-primary-7: #401841;
  --purple-primary-8: #281226;
  --gray-bg-light-opacity: hsla(0, 0%, 85%, 0.25);
  --gray-bg-opacity: hsla(0, 0%, 100%, 0.35);
  --gray-bg-dark-opacity: hsla(0, 0%, 100%, 0.12);
  --dark-bg: #010307;
  --dark-bg-opacity: rgba(1, 3, 7, 0.2);
  --black-bg: #000;
  --black-bg-opacity: rgba(0, 0, 0, 0.6);
  --purple-bg-1: #1d122b;
  --purple-bg-1-opacity: rgba(35, 18, 48, 0.45);
  --purple-bg-2: #140a1d;
}

.bpform {
  background: radial-gradient(100% 100% at 73% -5%,
      var(--white-color) 0,
      var(--purple-primary-1) 20%,
      var(--purple-primary-6) 90%,
      #020103 140%);
  background: radial-gradient(100% 125% at 25% 25%,
      #fff 1%,
      #ff8be5 6%,
      #661a55 50%,
      #010307 110%);
  bottom: 0;
  font-family: SF Pro Display;
  font-weight: 300;
  margin: auto;
  position: fixed;
  z-index: 25;
}

.bpform,
.bpform:before {
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
}

.bpform:before {
  background-color: #4e254a;
  background-image: url(https://bountyplay.fun/img/main/background_top.png);
  background-position: 100% 0;
  background-repeat: no-repeat;
  background-size: auto 100%;
  content: "";
  mix-blend-mode: multiply;
  opacity: 1;
  position: absolute;
  z-index: -1;
}

.bpform button {
  font-family: SF Pro Display;
  letter-spacing: 0.5px;
}

.bpform button:hover {
  transform: scale(1);
}

@media (hover: hover) {

  .bpform a:hover,
  .bpform button:hover {
    transform: scale(0.96) translateX(1px) translateY(3px);
  }
}

@media (hover: none) {

  .bpform a:active,
  .bpform button:active {
    transform: scale(0.96) translateX(1px) translateY(3px);
  }
}

.bpform__modal {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.bpform__modal-header {
  align-items: center;
  background: #000;
  display: flex;
  justify-content: space-between;
  padding: 0 20px 15px;
  padding-top: calc(var(--tg-safe-area-inset-top, 15px) + var(--tg-content-safe-area-inset-top, 0px));
}

.bpform__header-logo {
  align-items: center;
  display: flex;
  gap: 10px;
}

.bpform__logo-image {
  display: flex;
  height: 45px;
  width: 45px;
}

.bpform__logo-image img {
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  width: 100%;
}

.bpform__logo-name {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bpform__logo-first {
  color: var(--white-color);
  font-family: Unbounded;
  font-size: 23px;
  font-weight: 700;
}

.bpform__logo-second {
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-image: radial-gradient(ellipse,
      var(--purple-primary-1) 0,
      var(--purple-primary-4) 33%,
      var(--purple-primary-2) 67%);
  color: var(--purple-primary-1);
  font-family: Vampiro one;
  font-optical-sizing: auto;
  font-size: 23px;
  font-stretch: normal;
  font-style: italic;
  margin-top: -7px;
  padding-left: 7px;
}

.bpform__header-close button {
  align-items: center;
  background: #1b1b1b;
  border: none;
  border-radius: 16px;
  display: flex;
  height: 55px;
  justify-content: center;
  width: 55px;
}

.bpform__header-close button svg {
  height: 19px;
  width: 19px;
}

.bpform__header-close button svg path:first-child {
  transform: translate(4px, -3px) rotate(45deg);
}

.bpform__header-close button svg path:nth-child(2) {
  transform: translate(-1.5px, 5.5px) rotate(-45deg);
}

.bpform__modal-main {
  gap: 15px;
  letter-spacing: 1px;
  overflow: auto;
}

.bpform__modal-content,
.bpform__modal-main {
  display: flex;
  flex-direction: column;
  padding: 15px;
}

.bpform__modal-content {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: #00000061;
  border-radius: 16px;
  gap: 10px;
}

.bpfrom__push {
  background: #201c07d9;
  border: 1px solid #ffe04970;
  border-radius: 12px;
  padding: 10px;
}

.bpfrom__push-text {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.bpfrom__push-text p {
  margin: 0;
}

.bpform__groupe-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bpform__groupe-solo:first-child {
  display: flex;
  justify-content: flex-end;
}

.bpform__groupe-multi {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  justify-content: flex-start;
  width: 100%;
}

.bpform__groupe-block {
  display: flex;
  flex: 4;
  flex-direction: column;
  gap: 6px;
}

.bpform__groupe-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.bpform__currency-button {
  align-items: center;
  background: none;
  border: none;
  display: flex;
  font-family: SF Pro Display;
  font-weight: 400;
  gap: 6px;
  padding: 5px;
}

.bpform__button-value {
  color: #fff;
  font-size: 16px;
}

.bpform__list-item {
  font-size: 16px;
  font-weight: 500;
  padding: 10px 20px;
}

.bpform__groupe-label {
  font-size: 16px;
  width: -moz-max-content;
  width: max-content;
}

.bpform__groupe-value {
  font-size: 20px;
  font-weight: 600;
}

.bpform__groupe-info {
  display: flex;
  justify-content: center;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
  color: var(--purple-primary-3);
  font-size: 0.825rem;
  margin-top: -5px;
  position: relative;
}

.bpform__groupe-info svg {
  width: 19px;
  height: 19px;
}

.bpform__groupe-info span {}

.bpform__groupe-info--popup {
  color: #fff;
  position: absolute;
  bottom: 100%;
  left: 0;
  background: #000000de;
  padding: 10px 15px;
  width: -moz-max-content;
  width: max-content;
  max-width: 140%;
  border-radius: 18px;
  font-size: 0.775rem;
  line-height: 1.3rem;
}

.bpform__groupe-info--popup p {
  margin: 0;
}

.bpform__groupe-input {
  align-items: center;
  display: flex;
  flex: 4;
  position: relative;
  width: 100%;
}

.bpform__groupe-input input {
  background: #00000061;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #fff;
  display: flex;
  font-family: SF Pro Display;
  font-size: 18px;
  font-weight: 400;
  padding: 18px 40px 18px 15px;
  width: 100%;
}

.bpform__groupe-input input:focus {
  background: #00000078;
  border-color: #d22ecc;
}

.no-arrows::-webkit-inner-spin-button,
.no-arrows::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.bpform__groupe-icon {
  height: 30px;
  position: absolute;
  right: 10px;
  width: 30px;
}

.bpform__groupe-icon_text {
  font-size: 14px;
  opacity: 0.7;
  position: absolute;
  right: 10px;
}

.bpform__groupe-icon img {
  height: 100%;
  width: 100%;
}

.bpform__groupe-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.modal__payout-btn {
  align-items: flex-start;
  background: #00000061;
  border: 1px solid transparent;
  border-radius: 16px;
  color: #fff;
  display: flex;
  flex: calc(33% - 20px);
  flex-direction: column;
  gap: 10px;
  min-width: -moz-max-content;
  min-width: max-content;
  padding: 30px 12px 15px;
  position: relative;
  width: calc(33% - 20px);
}

.modal__payout-btn.active {
  background: #00000078;
  border-color: #d22ecc;
}

.payout__btn-fee {
  font-size: 12px;
  letter-spacing: 1px;
  opacity: 0.4;
  position: absolute;
  right: 10px;
  top: 8px;
}

.payout__btn-icon {
  height: 30px;
  width: 30px;
}

.payout__btn-icon img {
  border-radius: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  width: 100%;
}

.payout__btn-name {
  font-size: 14px;
}

.payout__btn-bonus {
  align-items: center;
  background: linear-gradient(179.89deg, #fb4fff 0.1%, #850087 123.39%);
  border-radius: 6px;
  display: flex;
  gap: 1px;
  justify-content: center;
  padding: 3px;
  position: absolute;
  top: 5px;
}

.payout__btn-bonus p {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  order: 1;
}

.payout__btn-bonus svg {
  fill: #fff;
  height: 16px;
  order: 2;
  width: 16px;
}

.bpform__groupe-btn {
  align-items: center;
  background: #d22ecc;
  border: none;
  border-radius: 6px;
  color: #fff;
  display: flex;
  font-weight: 600;
  gap: 10px;
  justify-content: center;
  padding: 15px 20px;
  width: 100%;
}

.bpform__groupe-btn_text {
  font-size: 16px;
}

.bpform__groupe-btn_icon {
  display: flex;
}

.bpform__switch {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
}

.bpform__switch-btn {
  align-items: center;
  background: none;
  border: none;
  border-radius: 10px;
  color: #fff;
  display: flex;
  flex: 1;
  font-size: 17px;
  font-weight: 600;
  justify-content: center;
  max-width: -moz-max-content;
  max-width: max-content;
  min-width: -moz-max-content;
  min-width: max-content;
  padding: 14px 18px;
  position: relative;
  transition: 0.2s;
}

.bpform__switch-btn.active {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: #00000061;
}

.bpform__switch-btn:before {
  background: var(--purple-primary-2);
  border-radius: 100%;
  bottom: 0;
  content: "";
  height: 2px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  transition: 0.2s;
  width: 0;
}

.bpform__switch-btn.active:before {
  width: 40%;
}

.bpform__currency-add {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 10px;
}

.bpform__currency-add_btn {
  align-items: center;
  background: #00000061;
  border: none;
  border-radius: 6px;
  color: #fff;
  display: flex;
  flex: 4;
  font-family: SF Pro Display;
  font-size: 16px;
  gap: 5px;
  justify-content: center;
  min-width: -moz-max-content;
  min-width: max-content;
  padding: 12px 15px;
  position: relative;
  width: 20%;
}

.bpform__currency-icon {
  height: 18px;
  min-height: 18px;
  min-width: 18px;
  width: 18px;
}

.bpform__currency-icon img {
  height: 100%;
  width: 100%;
}

.bpform__currency-bonus {
  align-items: center;
  background: linear-gradient(179.89deg, #fb4fff 0.1%, #850087 123.39%);
  border-radius: 6px;
  display: flex;
  gap: 1px;
  justify-content: center;
  padding: 3px;
}

.bpform__currency-bonus svg {
  fill: #fff;
  height: 16px;
  order: 2;
  width: 16px;
}

.bpform__currency-bonus p {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  order: 1;
}

.bpform__currency {
  position: relative;
}

.bpform__button-arrow {
  align-items: center;
  display: flex;
  height: 8px;
  justify-content: center;
  width: 13px;
}

.bpform__button-arrow svg {
  height: 100%;
  width: 100%;
}

.bpform__currency-list {
  align-items: center;
  background: #000;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 0;
  opacity: 0;
  overflow: auto;
  padding: 0;
  position: absolute;
  right: 0;
  top: calc(100% + 5px);
  transition: max-height 0.5s ease, opacity 0.5s ease;
  z-index: 25;
}

.bpform__currency-list::-webkit-scrollbar {
  width: 2px;
}

.bpform__currency-list::-webkit-scrollbar-track {
  background: transparent;
}

.bpform__currency-list::-webkit-scrollbar-thumb {
  background-color: #d22ecc;
  border-radius: 20px;
}

.bpform__currency-list.open {
  max-height: 250px;
  opacity: 1;
}

.bpbalance {
  align-items: center;
  background: linear-gradient(179.89deg, #fb4fff 0.1%, #850087 123.39%);
  border-radius: 16px;
  flex-wrap: wrap;
  gap: 5px 10px;
}

.bpbalance,
.bpbalance__left {
  display: flex;
  position: relative;
}

.bpbalance__left {
  padding: 25px 30px 25px 25px;
}

.bpbalance__left:before {
  background: #fff;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 50px;
  border-top-left-radius: 16px;
  border-top-right-radius: 40px;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0;
}

.bpbalance__image {
  display: flex;
  height: 55px;
  width: 55px;
  z-index: 0;
}

.bpbalance__image img {
  filter: drop-shadow(3px 3px 7px #00000092);
  height: 100%;
  width: 100%;
}

.bpbalance__right {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 15px 20px;
  width: -moz-max-content;
  width: max-content;
}

.bpbalance__label {
  color: hsla(0, 0%, 100%, 0.53);
}

.bpbalance__value {
  font-size: 30px;
  font-weight: 700;
}

.bpform__info {
  background: #140d1d;
  border: 1px solid #533d6f21;
  border-radius: 10px;
  display: flex;
  padding: 15px 20px;
}

.bpform__info-text {
  color: #fff;
  font-size: 16px;
}

.bpform__info-text b {
  color: #fb4fff;
}

.bpform__info-bonus {
  align-items: center;
  background: linear-gradient(179.89deg, #fb4fff 0.1%, #850087 123.39%);
  border-radius: 6px;
  display: flex;
  gap: 1px;
  justify-content: center;
  margin: 0 5px;
  padding: 1px 5px;
  width: -moz-max-content;
  width: max-content;
}

.bpform__info-bonus p {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  order: 1;
}

.bpform__info-bonus svg {
  fill: #fff;
  height: 16px;
  order: 2;
  width: 16px;
}

.table-header {
  align-items: flex-end;
}

.table-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.table-row {
  align-items: center;
  display: flex;
  flex-grow: 1;
  flex-shrink: 1;
}

.table-header .table-row {
  align-items: flex-end;
  background: var(--dark-bg-2);
  border-radius: 8px 8px 0 0;
}

.table-body .table-row {
  background-color: #00000061;
  border-radius: 8px;
  color: #fff;
  position: relative;
  transition: 0.2s;
  will-change: transform;
  z-index: 1;
}

.table-body .table-row_desc {
  background-color: #000000d4;
  margin-top: -15px;
  min-height: 35px !important;
}

.table-body .table-row:last-child {
  border-radius: 0 0 8px 8px;
}

.table-body .table-row_none {
  align-items: center;
  background-color: var(--dark-bg-3);
  display: flex;
  justify-content: center;
}

.table-body.table-loading .table-row {
  overflow: hidden;
  position: relative;
}

.table-body.table-loading .table-row:before {
  animation: table-rows-loading-shine 1.25s linear infinite;
  background: linear-gradient(111deg,
      var(--dark-bg-3) 30%,
      var(--dark-bg-2) 45%,
      var(--dark-bg-3) 75%);
  background-size: 200% 100%;
  border-radius: inherit;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 5;
}

@keyframes table-rows-loading-shine {
  to {
    background-position-x: -200%;
  }
}

.table-col {
  display: flex;
  min-width: 0;
  padding: 20px 25px;
  position: relative;
  width: 100%;
}

.table-row_desc .table-col {
  padding: 0 !important;
}

.table-header .table-col {
  color: #784a70;
  font-size: 14px;
  font-weight: 600;
  padding: 14px 25px;
  text-transform: uppercase;
}

@media (max-width: 1200px) {
  .table-col_hide {
    display: none !important;
  }
}

.table-col:first-child {
  padding-left: 25px;
}

.table-col_flex {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  flex-direction: column;
}

.table-col_column {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: flex-start;
  overflow-x: auto;
}

.table-col_center {
  text-align: center;
}

.table-col_right {
  display: flex;
  justify-content: flex-end;
  text-align: right;
}

.table-col_left {
  text-align: left;
}

@media (max-width: 576px) {
  .table-body {
    margin-top: 0;
  }

  .table-col {
    padding: 10px 12px;
  }

  .table-col:first-child {
    padding-left: 15px;
  }

  .table-body .table-row {
    min-height: 50px;
  }
}

.table-col_none {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  max-width: 350px;
  padding: 80px 0;
  text-align: center;
  width: 80%;
}

@media (max-width: 400px) {
  .table-col_none {
    margin: 30px 15px;
    width: 100% !important;
  }
}

.table-col_none-title {
  color: var(--red-primary-2);
  font-size: 16px;
  font-weight: 600;
}

@media (max-width: 576px) {
  .table-col_none-title {
    font-size: 16px;
    line-height: 26px;
  }
}

@media (max-width: 400px) {
  .table-col_none-title {
    font-size: 14px;
    line-height: 24px;
  }
}

.table-col_none-text {
  font-size: 14px;
}

@media (max-width: 400px) {
  .table-col_none-text {
    font-size: 12px;
    line-height: 20px;
  }
}

.table-col_status {
  align-items: center;
  background: transparent;
  border-radius: 8px;
  display: inline-flex;
  font-size: 14px;
  font-weight: 500;
  padding: 5px 10px;
  width: -moz-max-content;
  width: max-content;
}

.table-col_status.blue {
  background: rgb(37 161 255/30%);
  color: var(--color-main-light);
}

.table-col_status.grey {
  background: #f4f4f4;
  color: var(--text-grey-dark);
}

.table-col_status.green {
  color: #00f076;
}

.table-col_status.orange {
  color: orange;
}

.table-col_status.red {
  color: red;
}

.table-col_btn {
  flex-wrap: wrap;
  gap: 5px;
}

.table-col_btn,
.table-col_photo {
  align-items: center;
  display: flex;
  justify-content: center;
}

.table-col_photo {
  margin-right: 7px;
}

.table-col_photo img {
  height: 25px;
  -o-object-fit: contain;
  object-fit: contain;
  width: 25px;
}

.table-col_text {
  font-size: 14px;
  font-weight: 500;
}

.table-col_icon {
  height: 28px;
  width: 28px;
}

.table-col_icon img {
  height: 100%;
  width: 100%;
}

.table-col_longtext {
  font-size: 12px;
  max-height: 90px;
  overflow: auto;
  padding: 6px;
}

.table-col_amount,
.table-col_longtext {
  background: var(--dark-bg-1);
  border-radius: 8px;
  font-weight: 500;
}

.table-col_amount {
  font-size: 14px;
  padding: 6px 10px;
  width: -moz-max-content;
  width: max-content;
}

.table-col_amount.nth {
  background: var(--dark-bg-2);
}

.table-body .table-row:nth-child(2n) .table-col_amount.nth {
  background: var(--dark-bg-3);
}

.table-col_amount.dark {
  background: var(--dark-bg-1);
}

.table-col_amount.light {
  background: var(--dark-bg-4);
}

.table-col_amount.red {
  background: var(--red-primary-1);
}

.table-col_amount.orange {
  background: var(--orange-primary-2);
}

.table-col_select {
  background: var(--red-primary-2);
  border-radius: 8px;
  color: var(--white-color);
  padding: 6px 10px;
  width: -moz-max-content;
  width: max-content;
}

.table-col_link,
.table-col_select {
  font-size: 14px;
  font-weight: 500;
}

.table-col_link a {
  border-bottom: 1px dashed var(--red-primary-1);
  color: var(--white-color);
}

.table-col_link a:hover {
  border-color: var(--white-color);
  color: var(--red-primary-1);
}

.table__pagination {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 10px 0 0;
}

.pagination {
  border-radius: 0.25rem;
  display: flex;
  list-style: none;
  padding-left: 0;
}

.table__pagination-current {
  background: var(--bg-black);
  color: var(--color-white);
  font-size: 14px;
  font-weight: 500;
  padding: 15px 20px;
}

.table__pagination-page .pagination .disabled span {
  background: var(--bg-black);
  color: var(--color-white);
  cursor: no-drop;
}

.table__pagination-page .pagination .active span,
.table__pagination-page .pagination .disabled span {
  align-items: center;
  display: flex;
  font-size: 14px;
  height: 35px;
  justify-content: center;
  min-width: 35px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  width: -moz-max-content;
  width: max-content;
}

.table__pagination-page .pagination .active span {
  background: var(--color-main-light);
  color: var(--color-dark);
  font-weight: 500;
}

.table__pagination-page .pagination li {
  margin: 0 2px;
}

.table__pagination-page .pagination li button {
  align-items: center;
  background: var(--bg-black);
  border: none;
  color: var(--color-white);
  display: flex;
  font-size: 14px;
  font-weight: 500;
  height: 35px;
  justify-content: center;
  min-width: 35px;
  width: -moz-max-content;
  width: max-content;
}

.table__pagination-page .pagination li button:hover {
  background: var(--bg-white);
  color: var(--color-dark);
}

.bpform__loading {
  animation: spin 1s linear infinite;
  border: 3px solid hsla(0, 0%, 100%, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  height: 20px;
  margin: auto;
  width: 20px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(1turn);
  }
}

.app__game-payout_btn {
  align-items: center;
  background: linear-gradient(352deg, #f68621, #f37c22);
  background: #281740;
  border: 2px solid #fcc755;
  border-radius: 10px;
  color: #fdc856;
  display: flex;
  gap: 3px;
  justify-content: center;
  padding: 2px 5px;
}

.app__game-payout_btn svg {
  height: 13px;
  width: 13px;
}

.modal__window {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-height: 100vh;
  min-height: 35vh;
  padding: 0;
  position: relative;
  transition: 0.2s;
  width: 100%;
}

.modal__window-close {
  background-color: transparent;
  background-image: url(/img/ui/buttons/btn-blue.png);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: none;
  bottom: 100%;
  height: 50px;
  padding: 0;
  position: absolute;
  right: -5px;
  width: 60px;
}

.modal__window-close_icon {
  align-items: center;
  display: flex;
  height: 30px;
  justify-content: center;
  margin: auto;
  width: 30px;
}

.modal__window-close_content {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
}

.modal__window-close img {
  height: 100%;
  margin-top: -2px;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
}

.modal__window-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.modal__window-free {
  text-align: center;
}

.modal__window-btn {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
}

.modal__window-btn_event {
  border: none;
  font-size: 1.2rem;
  padding: 15px 20px;
  width: -moz-max-content;
  width: max-content;
}

.modal__window-btn_event img {
  background: none;
  height: 24px;
  margin-top: -5px;
  width: 24px;
}

.modal__window-btn_event_secondary img {
  height: 35px;
  width: 35px;
}

.modal__window-btn_nav_content {
  align-items: center;
  display: flex;
  gap: 5px;
  height: 100%;
  justify-content: center;
  width: 100%;
}

.modal__window-btn_text {
  font-size: 16px;
  text-shadow: 2px 1px 0 #7872b8;
  text-transform: uppercase;
}

.roulette__block,
.roulette__wheel-wrapper {
  display: flex;
  position: relative;
}

.roulette__wheel-wrapper {
  align-items: center;
  border-radius: 50%;
  height: 80vw;
  justify-content: center;
  margin: 2px auto;
  max-height: 450px;
  max-width: 450px;
  overflow: hidden;
  padding: 6px;
  width: 80vw;
  min-width: 250px;
  min-height: 250px;
}

.roulette__wheel-wrapper:before {
  background: linear-gradient(279deg, #e2edff 65%, #a8bbff 70%);
  border-radius: 100%;
  content: "";
  height: 100%;
  margin: auto;
  position: absolute;
  width: 100%;
  z-index: 0;
}

.roulette__wheel {
  border-radius: 50%;
  box-shadow: inset 0 0 20px 15px #29163f;
  height: 100%;
  overflow: hidden;
  position: relative;
  transition: transform 5s cubic-bezier(0.33, 1, 0.68, 1);
  width: 100%;
}

.roulette__sector {
  align-items: flex-start;
  height: 100%;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
}

.roulette__content,
.roulette__sector {
  display: flex;
  justify-content: center;
  transform-origin: center;
}

.roulette__content {
  align-content: center;
  align-items: center;
  gap: 5px;
  position: relative;
  text-align: center;
  transform: translateY(10svw);
}

.roulette__content img {
  height: 6svw;
  max-height: 35px;
  max-width: 35px;
  -o-object-fit: contain;
  object-fit: contain;
  width: 6svw;
}

.roulette__content span {
  color: #fff;
  font-size: 0.925rem;
  font-weight: 700;
  margin: auto;
  position: absolute;
  text-align: center;
  top: 100%;
  white-space: nowrap;
  width: -moz-max-content;
  width: max-content;
}

.roulette__arrow {
  animation: pointerGlow 1.5s infinite alternate;
  background: linear-gradient(45deg, #ffc024, #ffa402);
  border: 2px solid #ff8e17;
  border-radius: 8px;
  box-shadow: 0 0 30px #ffa402, 0 0 70px #ffa402, 0 0 30px #ffa402;
  height: 40px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: -24px;
  transform: rotate(44deg);
  width: 40px;
  z-index: 1;
}

@keyframes pointerGlow {
  0% {
    box-shadow: 0 0 40px #ffa402, 0 0 50px #ffa402, 0 0 20px #ffa402;
  }

  to {
    box-shadow: 0 0 30px #ffc024, 0 0 70px #ffc024, 0 0 30px #ffc024;
  }
}

.spin-button {
  background: url(/img/btn/btn-xl-yellow.png);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: none;
  border-radius: 5px;
  color: #fe5302;
  margin-top: 20px;
  overflow: hidden;
  padding: 14px 20px;
  position: relative;
  text-shadow: 2px 1px 0 #ad4a1b;
  transition: background-color 0.3s;
}

.spin-button:disabled {
  cursor: not-allowed;
}

.winner-modal {
  align-items: center;
  animation: fadeIn 0.5s;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  background-color: hsla(0, 0%, 7%, 0.15);
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1001;
}

.winner-content {
  animation: scaleIn 0.5s;
  background-image: url(/img/ui/window.png);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-radius: 10px;
  color: #ecf0f1;
  max-width: 90%;
  padding: 30px;
  position: relative;
  text-align: center;
}

.winner-content h2 {
  font-size: 28px;
  text-align: center;
  text-shadow: 3px 2px 0 #7872b8;
}

.winner-image {
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  width: 100%;
}

.winner-name {
  font-size: 1.5rem;
}

.winner-name p {
  font-size: 16px;
  text-align: center;
  text-shadow: 1px 1px 0 #7872b8;
}

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

  to {
    opacity: 1;
  }
}

@keyframes scaleIn {
  0% {
    transform: scale(0.7);
  }

  to {
    transform: scale(1);
  }
}

.background-overlay {
  background-color: #000;
  background-position: 50%;
  background-size: cover;
  filter: blur(8px);
  height: 100%;
  left: 0;
  opacity: 0.3;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

@media (max-width: 768px) {
  .roulette-container {
    max-height: 300px;
    max-width: 95%;
  }

  .winner-content {
    padding: 20px;
  }

  .winner-image {
    height: 100%;
    width: 100%;
  }

  .winner-image-div {
    align-items: center;
    background-image: url(/img/ui/buttons/btn-gray.png);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    height: 100px;
    justify-content: center;
    margin: 0 auto;
    padding: 10px;
    width: 120px;
  }

  .winner-name {
    font-size: 1.2rem;
  }

  .spin-button {
    font-size: 1rem;
  }

  .prize-content {
    font-size: 10px;
  }

  .roulette-segment {
    flex: 0 0 100px;
  }

  .prize-image {
    height: 40px;
    width: 40px;
  }

  .prize-name {
    font-size: 14px;
  }
}

.jackpot {
  background: linear-gradient(279deg, #e2edff 65%, #a8bbff 70%);
  border-radius: 20%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 250px;
  padding: 20px 15px 10px;
  position: relative;
}

.jackpot:before {
  background: #36254a;
  border-radius: inherit;
  bottom: 0;
  content: "";
  height: calc(100% - 4px);
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: calc(100% - 4px);
}

.jackpot__title {
  font-size: 20px;
  z-index: 1;
}

.jackpot__block {
  display: flex;
  gap: 15px;
  justify-content: center;
  padding: 5px 10px;
  z-index: 1;
}

.jackpot__prize {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jackpot__prize-img {
  display: flex;
}

.jackpot__prize-img img {
  height: 33px;
  width: 33px;
}

.jackpot__prize-value {
  font-size: 14px;
}

.jackpot__header {
  align-items: center;
  background: linear-gradient(279deg, #e2edff 65%, #a8bbff 70%);
  border-radius: 20%;
  display: flex;
  justify-content: center;
  left: 50%;
  padding: 6px 14px;
  position: absolute;
  top: 0;
  transform: translate(-50%, -50%);
  width: -moz-max-content;
  width: max-content;
  z-index: 1;
}

.jackpot__header:before {
  background: #36254a;
  border-radius: inherit;
  bottom: 0;
  content: "";
  height: calc(100% - 5px);
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: calc(100% - 5px);
}

.jackpot__desc {
  text-align: center;
  z-index: 1;
}

.app__hud-rt {
  align-items: flex-end;
  right: 5px;
}

.app__hud-lt,
.app__hud-rt {
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: absolute;
  top: calc(var(--tgm-safe-area-inset-bottom, 5px) + 0px);
  z-index: 33;
}

.app__hud-lt {
  align-items: flex-start;
  left: 8px;
}

.app__level {
  align-items: center;
  background: #29153e;
  border-radius: 7px 11% 10px 12%;
  display: flex;
  font-size: 0.825rem;
  gap: 3px;
  height: 30px;
  justify-content: center;
  min-width: -moz-max-content;
  min-width: max-content;
  padding: 0 8px;
  position: relative;
  width: -moz-max-content;
  width: max-content;
}

.app__level:before {
  background: linear-gradient(279deg, #e2edff 65%, #a8bbff 70%);
  border-radius: 7px 11% 10px 12%;
  content: "";
  height: calc(100% + 4px);
  left: -2px;
  margin: auto;
  position: absolute;
  top: -2px;
  width: calc(100% + 4px);
  z-index: -1;
}

.language__dropdown {
  position: relative;
}

.language__dropdown-btn {
  align-items: center;
  background: linear-gradient(279deg, #e2edff 65%, #a8bbff 70%);
  border-radius: 13px 15% 11px 21%;
  display: flex;
  gap: 3px;
  height: 40px;
  justify-content: center;
  min-width: -moz-max-content;
  min-width: max-content;
  padding: 0 5px;
  width: 65px;
}

.language__dropdown-btn:before {
  background: #29163f;
  border-radius: 13px 15% 11px 21%;
  content: "";
  height: calc(100% - 4px);
  left: 0;
  margin: auto;
  position: absolute;
  right: 1px;
  top: 2px;
  width: calc(100% - 4px);
  z-index: 1;
}

.language__btn-icon {
  height: 22px;
  width: 22px;
  z-index: 2;
}

.language__btn-icon img {
  height: 100%;
  width: 100%;
}

.language__btn-text {
  font-size: 0.975rem;
  margin-top: 2px;
  z-index: 2;
}

.language__dropdown-list {
  align-items: flex-start;
  background: linear-gradient(279deg, #e2edff 65%, #a8bbff 70%);
  border-radius: 8px 3% 6px 4%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: -moz-max-content;
  min-width: max-content;
  padding: 4px;
  position: absolute;
  right: 0;
  top: calc(100% + 5px);
  z-index: 9;
}

.language__dropdown-list:before {
  background: #29163f;
  border-radius: 8px 3% 6px 4%;
  content: "";
  height: calc(100% - 4px);
  left: 0;
  margin: auto;
  position: absolute;
  right: 1px;
  top: 2px;
  width: calc(100% - 4px);
  z-index: 1;
}

.language__dropdown-ul {
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(2, 1fr);
  margin: 0;
  max-height: calc(90vh - 100px);
  overflow-y: auto;
  padding: 2px 5px !important;
  width: 100%;
}

.language__list-item {
  align-items: center;
  display: flex;
  gap: 5px;
  justify-content: center;
  padding: 0 5px;
}

.language__list-icon {
  height: 25px;
  width: 25px;
  z-index: 2;
}

.language__list-icon img {
  height: 100%;
  width: 100%;
}

.language__list-text {
  font-size: 16px;
  margin-top: 2px;
  z-index: 2;
}

.sound__button {
  align-items: center;
  background: linear-gradient(279deg, #e2edff 65%, #a8bbff 70%);
  border: none;
  border-radius: 13px 15% 11px 21%;
  display: flex;
  gap: 3px;
  justify-content: center;
  padding: 10px 16px;
}

.sound__button:before {
  background: #29163f;
  border-radius: 13px 15% 11px 21%;
  content: "";
  height: calc(100% - 4px);
  margin: auto;
  position: absolute;
  width: calc(100% - 4px);
  z-index: 1;
}

.sound__button-icon {
  color: #fff;
  filter: drop-shadow(2px 1px 0 #7872b8);
  height: 20px;
  position: relative;
  width: 20px;
  z-index: 1;
}

.task {
  --adsgram-task-font-size: 0.875rem;
  --adsgram-task-icon-size: 45px;
  --adsgram-task-icon-title-gap: 15px;
  --adsgram-task-button-width: 60px;
  --adsgram-task-icon-border-radius: 8px;
  background: linear-gradient(279deg, #d2d6ddbd 100%, #a8bbffb3 0);
  display: flex;
  flex-wrap: nowrap;
  font-family: var(--font-family);
  gap: 15px;
  justify-content: space-between;
  padding: 14px 18px;
  position: relative;
  width: 100%;
}

.task,
.task:before {
  border-radius: 10% 14px 15% 18px;
}

.task:before {
  background: #29163f;
  bottom: 0;
  content: "";
  height: calc(100% - 6px);
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: calc(100% - 6px);
  z-index: 0;
}

.task__reward {
  align-items: center;
  display: flex;
  font-size: 1rem;
  gap: 5px;
  justify-content: flex-start;
  margin: 5px 0 0;
}

.task__reward-icon {
  height: 20px;
  width: 20px;
}

.task__reward-text {
  font-size: 0.875rem;
}

.task__button {
  background-color: #e0def6;
  border-radius: 5px;
  color: #35495c;
  margin-left: 10px;
  padding: 6px 12px;
}

.task__button_done {
  background-color: #00c962;
  color: #fff;
  margin-left: 0;
}

.combo__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 0;
}

.combo__container-cells {
  display: flex;
  gap: 10px;
  padding: 10px 15px;
  background: #391c5b;
  border-radius: 9% 25px 13% 23px;
  width: 100%;
  flex-wrap: wrap;
  align-content: stretch;
  align-items: stretch;
  justify-content: center;
}

.combo__container-cell {
  background: linear-gradient(279deg, #d2d6ddbd 100%, #a8bbffb3 0);
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 16% 16px 20% 19px;
  height: 9svh;
  min-height: 80px;
  max-height: 100px;
  width: calc(25% + -10px);
  min-width: 50px;
  position: relative;
}

.combo__container-cell:before {
  content: "";
  background: #29163f;
  border-radius: 10% 14px 15% 18px;
  bottom: 0;
  content: "";
  height: calc(100% - 6px);
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: calc(100% - 6px);
  z-index: 0;
}

.combo__container-cell.hovered {
  border-color: var(--bg-primary);
}

.combo__container-cell.correct {
  background: #1deb24;
}

.combo__container-cell.misplaced {
  background: #ffbe30;
}

.combo__container-cell.incorrect {
  background: #dc1515;
}

.combo__container-cell--item {
  padding: 12px 12px;
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  z-index: 1;
}

.combo__container-cell--item-indicator {
  position: absolute;
  right: -4px;
  top: -4px;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  border-radius: 5px 25% 2px 22%;
  padding: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.combo__container-cell.correct .combo__container-cell--item-indicator {
  background: #1deb24;
}

.combo__container-cell.misplaced .combo__container-cell--item-indicator {
  background: #ffbe30;
  color: #29163f;
}

.combo__container-cell.incorrect .combo__container-cell--item-indicator {
  background: #dc1515;
}

.combo__container-cell--item-indicator svg {
  width: 100%;
  height: 100%;
}

.combo__container-remove {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #db542e;
  color: #fff;
  border: none;
  width: 21px;
  height: 21px;
  padding: 3px 4px;
  border-radius: 6px;
  z-index: 1;
}

.combo__container-remove svg {
  width: 100%;
  height: 100%;
}

.combo__container-cell--item img {
  width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.combo__container-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 5px;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.combo__container-list--item {
  flex: 1;
  min-width: calc(25% - 5px);
  height: calc(22vw - 5px);
  background: linear-gradient(279deg, #d2d6ddbd 100%, #a8bbffb3 0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: grab;
  border-radius: 16% 16px 20% 19px;
  padding: 12px 12px;
  position: relative;
}

.combo__container-list--item:before {
  content: "";
  background: #29163f;
  border-radius: 10% 14px 15% 18px;
  bottom: 0;
  content: "";
  height: calc(100% - 6px);
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: calc(100% - 6px);
  z-index: 0;
}

.combo__container-list--item img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  z-index: 1;
}

.combo__container-list--item.disabled img {
  opacity: 0.3;
}

.combo__info-img {
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  gap: 10px;
  padding: 15px 20px;
  background: var(--bg-page-primary);
  border-radius: 16px;
  width: 100%;
}

.combo__info-img--item {
  flex: 4;
  background: var(--bg-section-dark);
  border: 1px dashed;
  border-color: var(--bg-section-gray);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  height: 9svh;
  min-height: 70px;
  max-height: 80px;
  width: calc(25% + 10px);
  padding: 10px;
}

.combo__info-img--item.orange {
  border-color: var(--bg-color-process);
}

.combo__info-img--item.green {
  border-color: var(--bg-color-success);
}

.combo__info-img--item.red {
  border-color: var(--bg-color-error);
}

.combo__info-img--item img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.combo__info-reward {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.combo__info-reward--item {
  position: relative;
  padding: 0 0 0 25px;
  color: var(--text-color-gray);
  font-weight: 400;
  font-size: 0.875rem;
}

.combo__info-reward--item:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

.combo__info-reward--item.red:before {
  background: var(--bg-color-error);
}

.combo__info-reward--item.orange:before {
  background: var(--bg-color-process);
}

.combo__info-reward--item.green:before {
  background: var(--bg-color-success);
}

.app__giveaways {
  display: flex;
  flex-direction: column;
  gap: 15px;
  height: 100%;
  justify-content: flex-start;
  overflow: auto;
  padding: 35px 15px 0;
  position: relative;
  width: 100%;
  z-index: 5;
}

.app__giveaways-title {
  color: #fcc755;
  font-size: 1.425rem;
  text-align: center;
  text-shadow: 2px 1px 0 #c5781c;
}

.app__giveaways-description {
  font-size: 0.925rem;
  margin: 0;
  text-align: center;
  text-shadow: 1px 1px 0 #7872b8;
}

.app__giveaways-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.app__giveaways-buttons button {
  width: -moz-max-content;
  width: max-content;
  background: transparent;
  border: none;
  color: #fcc755;
  font-size: 0.975rem;
  text-align: center;
  text-decoration: underline;
  text-shadow: 2px 1px 0 #c5781c;
}

.app__giveaways-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.app__giveaways-item {
  align-items: center;
  background: linear-gradient(279deg, #d2d6ddbd 100%, #a8bbffb3 0);
  border-radius: 10% 14px 15% 18px;
  flex-wrap: wrap;
  gap: 10px;
  padding: 15px;
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.app__giveaways-item:before {
  background: #29163f;
  border-radius: 10% 14px 15% 18px;
  bottom: 0;
  content: "";
  height: calc(100% - 6px);
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: calc(100% - 6px);
  z-index: 0;
}

.giveaways__item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
  position: relative;
  width: 100%;
  padding: 0px 10px;
}

.giveaways__item-header--label {
  font-size: 1.125rem;
  text-shadow: 1px 1px 0 #7872b8;
}

.giveaways__item-header--participants {
  border-radius: 11% 12px 15% 15px;
  background: #fcc755;
  color: #fe5303;
  padding: 2px 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.giveaways__item-header--participants svg {
  width: 18px;
  height: 18px;
}

.giveaways__item-header--participants span {
  margin-top: 1px;
}

.giveaways__item-content {
  z-index: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.giveaways__item-reward {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.giveaways__item-reward--fund {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  position: relative;
  padding: 0px 10px 0px 0px;
}

.giveaways__item-reward--fund:after {
  content: "/";
  position: absolute;
  right: 0px;
  color: #898989;
  font-size: 1.125rem;
}

.giveaways__item-reward--fund img {
  width: 22px;
  height: 22px;
}

.giveaways__item-reward--fund span {
  font-size: 1.125rem;
}

.giveaways__item-reward--size {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  position: relative;
  padding: 0px 10px;
  margin-top: -2px;
}

.giveaways__item-reward--size:before {
  content: "(";
  left: 2px;
}

.giveaways__item-reward--size:after {
  content: ")";
  right: 2px;
}

.giveaways__item-reward--size:before,
.giveaways__item-reward--size:after {
  position: absolute;
  top: 1px;
  color: #898989;
}

.giveaways__item-rewardsize--left {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

.giveaways__item-rewardsize--left img {
  width: 16px;
  height: 16px;
  -o-object-fit: contain;
  object-fit: contain;
}

.giveaways__item-rewardsize--left span {
  font-size: 0.875rem;
  margin-top: 2px;
}

.giveaways__item-rewardsize--mid {
  color: #898989;
}

.giveaways__item-rewardsize--right {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

.giveaways__item-rewardsize--right svg {
  width: 16px;
  height: 16px;
  -o-object-fit: contain;
  object-fit: contain;
  color: #00bdf9;
}

.giveaways__item-rewardsize--right span {
  font-size: 0.925rem;
  margin-top: 2px;
}

.giveaways__item-desc {
  font-size: 0.875rem;
  line-height: 1.125rem;
}

.people {
  color: #00bdf9;
}

.reward {
  color: #fe5302;
}

.giveaways__item-buttons {
  z-index: 1;
  position: relative;
}

.giveaways__item-buttons button {
  border-radius: 11% 12px 15% 15px;
  border: none;
  background: #fcc755;
  color: #fe5303;
  padding: 7px 15px;
  font-size: 0.925rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.giveaways__item-buttons button[disabled] {
  background: #898989;
  color: #413c3c;
}

.giveaways__item-timer {
  z-index: 1;
  position: relative;
  text-align: center;
  text-shadow: 2px 1px 0 #7872b8;
  display: flex;
  flex-direction: column;
  line-height: 1.375rem;
}

.giveaways__item-timer--label {
  font-size: 0.925rem;
}

.giveaways__item-timer--value {
  font-size: 1.275rem;
}

.giveaways__history {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.giveaways__history-day {
  padding: 10px;
  background: #391c5b;
  border-radius: 27px 22px 25px 21px;
}

.giveaways__history-header {}

.giveaways__history-day-label {
  color: #fcc755;
  font-size: 1.025rem;
  text-align: center;
  text-shadow: 1px 1px 0 #c5781c;
}

.giveaways__history-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.giveaways__history-give {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.giveaways__history-give--label {
  text-align: left;
  font-size: 0.925rem;
  margin: 0;
  text-shadow: 1px 1px 0 #7872b8;
  border-bottom: 1px solid #7872b8;
  border-top: 1px solid #7872b8;
}

.giveaways__history-give:first-child .giveaways__history-give--label {
  border-top: none;
}

.giveaways__history-give--winners {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.giveaways__history-give--user {
  display: flex;
  justify-content: space-between;
}

.giveaways__history-give--username {
  font-size: 0.925rem;
  margin: 0;
  text-align: center;
  text-shadow: 1px 1px 0 #7872b8;
}

.giveaways__history-give--useramount {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3px;
}

.giveaways__history-give--useramount span {
  font-size: 0.925rem;
  margin-top: 3px;
}

.giveaways__history-give--useramount img {
  width: 17px;
  height: 17px;
}

.roulette__chance {
  align-items: center;
  background: linear-gradient(279deg, #d2d6ddbd 100%, #a8bbffb3 0);
  border-radius: 10% 14px 15% 18px;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: space-between;
  padding: 15px 20px;
  position: relative;
  width: -moz-max-content;
  margin: auto;
}

.roulette__chance:before {
  background: #29163f;
  border-radius: 10% 14px 15% 18px;
  bottom: 0;
  content: "";
  height: calc(100% - 6px);
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: calc(100% - 6px);
  z-index: 0;
}

.roulette__chance-list {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: flex-start;
  width: -moz-max-content;
  padding: 10px 10px;
  max-height: 250px;
  overflow: auto;
  gap: 10px;
}

.roulette__chance-item {
  display: flex;
  z-index: 1;
  align-items: center;
  justify-content: space-between;
  align-content: space-around;
  gap: 5px;
}

.roulette__chance-prize {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 0.825rem;
  gap: 7px;
  flex: 4;
}

.roulette__chance-prize span {
  text-align: left;
  line-height: 1.1rem;
}

.roulette__chance-prize img {
  width: 18px;
  height: 18px;
}

.roulette__chance-line {
  flex: 4;
  border-bottom: 1px dashed #898989;
  margin: auto 5px 5px;
  padding: 0 25px 0;
  display: none;
}

.roulette__chance-percent {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  min-width: -moz-min-content;
  min-width: min-content;
  width: -moz-min-content;
  width: min-content;
}

.roulette__chance-percent span {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3px;
  font-size: 0.825rem;
}

.roulette__chance-percent span svg {
  width: 12px;
  height: 12px;
  fill: #fff;
}

.app__exchange-timer {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.app__exchange-timer--label {
  font-size: 0.925rem;
  margin: 0;
  text-align: center;
  text-shadow: 1px 1px 0 #7872b8;
}

.app__exchange-timer--value {
  color: #fcc755;
  font-size: 1.525rem;
  text-shadow: 2px 1px 0 #c5781c;
}

.app__exchange-pool {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.app__exchange-pool--label {
  font-size: 0.925rem;
  margin: 0;
  text-shadow: 1px 1px 0 #7872b8;
}

.app__exchange-pool--value {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.app__exchange-pool--value span {
  color: #fcc755;
  font-size: 1.525rem;
  text-shadow: 2px 1px 0 #c5781c;
}

.app__exchange-pool--value img {
  width: 24px;
  height: 24px;
}

.app__exchange-rates {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.app__exchange-rates--title {
  font-size: 0.925rem;
  margin: 0;
  text-shadow: 1px 1px 0 #7872b8;
}

.app__exchange-rates--flex {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  font-size: 1.325rem;
}

.app__exchange-rates--item {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

.app__exchange-rates--icon {
  display: flex;
  justify-content: center;
  align-items: center;
}

.app__exchange-rates--icon img {
  width: 24px;
  height: 24px;
}

.app__exchange-rates--icon svg {
  width: 24px;
  height: 24px;
  color: #fcc755;
  text-shadow: 2px 1px 0 #c5781c;
}

.app__exchange-rates--middle {}

.app__exchange-swap {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 15px;
  flex-wrap: wrap;
}

.app__exchange-input {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.banner__popup-wrapper {
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  background: rgba(42, 42, 42, 0.55);
  bottom: 0;
  height: 100vh;
  left: 0;
  margin: auto;
  padding: 20px 20px;
  padding-bottom: calc(var(--tg-safe-area-inset-bottom, 10px) + var(--tg-content-safe-area-inset-bottom, 0px));
  padding-top: calc(var(--tg-safe-area-inset-top, 10px) + var(--tg-content-safe-area-inset-top, 0px));
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 24;
  display: flex;
  justify-content: center;
  align-items: center;
}

.banner__popup-item {
  background: #29163f;
  border: 2px solid #71688a;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 90vh;
  min-height: 20vh;
  padding: 35px 20px 25px;
  position: relative;
  transition: 0.2s;
  width: 100%;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  justify-content: flex-end;
}

.banner__popup-close {
  background-color: transparent;
  background-image: url(/img/ui/buttons/btn-blue.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border: none;
  padding: 0;
  position: absolute;
  right: 8px;
  top: 8px;
  width: 50px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup__block-close_content {
  display: flex;
  width: 17px;
}

.banner__popup-image {}

.banner__popup-image img {}

.banner__popup-header {
  font-size: 1.275rem;
  text-align: center;
  text-shadow: 3px 2px 0 #7872b8;
  padding: 0px 25px;
}

.banner__popup-header h3 {
  margin: 0;
}

.banner__popup-content {
  font-size: 0.975rem;
  text-align: center;
  text-shadow: 1px 1px 0 #7872b8;
}

.banner__popup-content p {
  margin: 0;
}

.banner__popup-btn {
  display: flex;
  justify-content: center;
  align-items: center;
}

.banner__popup-btn button {
  height: 42px;
  font-size: 1.075rem;
}

#tads-container-721 {}

#tads-container-721 .tads {
  background: linear-gradient(279deg, #d2d6ddbd 100%, #a8bbffb3 0);
  display: flex;
  flex-wrap: nowrap;
  font-family: var(--font-family);
  gap: 15px;
  justify-content: space-between;
  padding: 14px 18px;
  position: relative;
  width: 100%;
  border-radius: 10% 14px 15% 18px;
}

#tads-container-721 .tads:before {
  background: #29163f;
  bottom: 0;
  content: "";
  height: calc(100% - 6px);
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: calc(100% - 6px);
  z-index: 0;
  border-radius: inherit;
}

.tads-image {
  z-index: 1;
  background: #9993ce;
  border-radius: 16% 13px 10px 16px !important;
  height: 45px !important;
  width: 45px !important;
  min-height: 45px !important;
  min-width: 45px !important;
  padding: 2px;
  z-index: 1;
}

.tads-text-wrapper {
  z-index: 1;
}

.tads-title {
  font-size: 0.875rem !important;
  line-height: 18px;
}

.tads-text {
  font-size: 0.725rem !important;
}

#gigaAdFrame {
  padding-top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px) + 0px) !important;
}

iframe {
  padding-top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px) + 0px) !important;
}

#adsContainer svg,
#adsContainer button {
  top: calc(var(--tg-safe-area-inset-top, 10px) + var(--tg-content-safe-area-inset-top, 10px) + 20px) !important;
}

.ra-ti-header-wrapper {
  padding-top: calc(var(--tg-safe-area-inset-top, 5px) + var(--tg-content-safe-area-inset-top, 5px) + 0px) !important;
  transform: translateY(30px) !important;
}

.vast_player__vpaid-frame {
  padding-top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px) + 0px) !important;
}

.daily-roulette-overlay {
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  background-color: hsla(0, 0%, 7%, 0.45);
  gap: 15px;
  height: 100%;
  justify-content: center;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

.daily-roulette-overlay,
.daily-roulette-container {
  align-items: center;
  display: flex;
  flex-direction: column;
}

.daily-roulette-container {
  max-height: 300px;
  max-width: 800px;
  position: relative;
  width: 95%;
}

@media (max-width: 768px) {
  .roulette-container {
    max-height: 300px;
    max-width: 95%;
  }
}

.daily-roulette-wrapper {
  -webkit-backface-visibility: hidden;
  background: linear-gradient(279deg, #e2edff 65%, #a8bbff 70%);
  border-radius: 7% 31px 13% 26px;
  font-size: 20px;
  height: 165px;
  overflow: hidden;
  padding: 0;
  position: relative;
  -webkit-transform: translateZ(0);
  width: 100%;
}

.daily-roulette-wrapper:before {
  background: #29163f;
  border-radius: inherit;
  bottom: 0;
  content: "";
  height: calc(100% - 4px);
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: calc(100% - 4px);
}

.daily-roulette-wheel {
  display: flex;
  height: 100%;
  padding: 0 0px;
  transition: transform 5s cubic-bezier(0.33, 1, 0.68, 1);
  width: calc(100% - 2px);
}

.daily-roulette-segment {
  align-items: center;
  background-color: hsla(0, 0%, 100%, 0.1);
  box-sizing: border-box;
  display: flex;
  flex: 0 0 100px;
  height: 100%;
  justify-content: center;
  position: relative;
}

.daily-roulette-segment.good {
  border: 2px solid green;
}

.daily-roulette-segment.fail {
  border: 2px solid red;
}

.daily-roulette-segment:nth-child(2n) {
  background-color: hsla(0, 0%, 100%, 0.05);
}

.daily-roulette-segment:last-child {
  border-right: none;
}

.daily-prize-content {
  align-items: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: flex-start;
  pointer-events: none;
  position: relative;
  text-align: center;
}

@media (max-width: 768px) {
  .daily-prize-content {
    font-size: 10px;
  }
}

.daily-prize-image {
  height: 40px;
  -o-object-fit: contain;
  object-fit: contain;
  width: 40px;
}

@media (max-width: 768px) {
  .daily-prize-image {
    height: 40px;
    width: 40px;
  }
}

.daily-prize-name {
  align-items: center;
  display: flex;
  font-size: 14px;
  justify-content: center;
  line-height: 15px;
  text-align: center;
  text-shadow: 1px 1px 2px #000;
}

@media (max-width: 768px) {
  .daily-prize-name {
    font-size: 14px;
  }
}

.daily-roulette-pointer {
  animation: pointerGlow 1.5s infinite alternate;
  background: linear-gradient(45deg, #ffc024, #ffa402);
  border: 2px solid #ff8e17;
  border-radius: 0 0 8px 0;
  box-shadow: 0 0 30px #ffa402, 0 0 70px #ffa402, 0 0 30px #ffa402;
  height: 35px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: -20px;
  transform: rotate(45deg);
  width: 35px;
}

@keyframes pointerGlow {
  0% {
    box-shadow: 0 0 40px #ffa402, 0 0 50px #ffa402, 0 0 20px #ffa402;
  }

  to {
    box-shadow: 0 0 30px #ffc024, 0 0 70px #ffc024, 0 0 30px #ffc024;
  }
}

.daily-roulette-btns {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 20px;
}

.daily-roulette-spin-button {
  background: url(/img/btn/btn-xl-yellow.png);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: none;
  border-radius: 5px;
  color: #fe5302;
  overflow: hidden;
  padding: 14px 20px;
  position: relative;
  text-shadow: 2px 1px 0 #ad4a1b;
  transition: background-color 0.3s;
}

.daily-roulette-info-btn {
  background: transparent;
  border: none;
  color: #fcc755;
  font-size: 0.975rem;
  text-align: center;
  text-decoration: underline;
  text-shadow: 2px 1px 0 #c5781c;
}

.winner-modal {
  align-items: center;
  animation: fadeIn 0.5s;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  background-color: hsla(0, 0%, 7%, 0.15);
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1001;
}

.daily-roulette-winner-content {
  animation: scaleIn 0.5s;
  background-image: url(/img/ui/window.png);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-radius: 10px;
  color: #ecf0f1;
  max-width: 90%;
  padding: 30px;
  position: relative;
  text-align: center;
}

.daily-roulette-winner-content h2 {
  font-size: 28px;
  text-align: center;
  text-shadow: 3px 2px 0 #7872b8;
}

@media (max-width: 768px) {
  .daily-roulette-winner-content {
    padding: 20px;
  }
}

@media (max-width: 768px) {
  .daily-roulette-winner-image-div {
    align-items: center;
    background-image: url(/img/ui/buttons/btn-gray.png);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    height: 100px;
    justify-content: center;
    margin: 0 auto;
    padding: 10px;
    width: 120px;
  }

  .daily-roulette-winner-image {
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    width: 100%;
  }
}

.daily-roulette-winner-name {
  font-size: 1.5rem;
}

.daily-roulette-winner-name p {
  font-size: 16px;
  text-align: center;
  text-shadow: 1px 1px 0 #7872b8;
}

.daily-roulette-winner-name {
  font-size: 1.5rem;
}

@media (max-width: 768px) {
  .daily-roulette-winner-name {
    font-size: 1.2rem;
  }
}