@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 .2s linear 0s, transform .1s linear 0s;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

@media (hover: hover) {

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

@media (hover: none) {

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

input,
textarea {
    font-family: var(--font-family);
    margin: 0;
    outline: none;
    transition: all .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: .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: .1s
}

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

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

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

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

    5% {
        filter: brightness(135%) grayscale(.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(.9) translateY(0)
    }

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

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

    14% {
        transform: scale(.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(.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: .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: .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%, .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(.2, .6, .8, .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, .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: .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: .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: .2s;
    animation-iteration-count: infinite;
    animation-name: rockets-shake;
    animation-timing-function: ease-in
}

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

    33% {
        transform: translate(-.3vw, .3vh)
    }

    66% {
        transform: translate(-.3vw, -.3vh)
    }

    to {
        transform: translate(.3vw, -.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 .3s ease-in, visibility .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: .25s
}

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

.app__game-rockets_flames-flame:nth-child(4) {
    animation-delay: .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: .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: .875rem;
    height: 100%;
    justify-content: space-between;
    letter-spacing: .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: .975rem
}

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

.app__friends-reward--item div:last-child {
    align-content: center;
    display: flex;
    gap: 5px;
    justify-content: center
}

.app__friends-reward--item img {
    height: 24px;
    width: 24px
}

.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: .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: .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: .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: .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, .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: .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: .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: .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: .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: .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: .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, .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: .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: .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: .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: .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%, .25);
    --gray-bg-opacity: hsla(0, 0%, 100%, .35);
    --gray-bg-dark-opacity: hsla(0, 0%, 100%, .12);
    --dark-bg: #010307;
    --dark-bg-opacity: rgba(1, 3, 7, .2);
    --black-bg: #000;
    --black-bg-opacity: rgba(0, 0, 0, .6);
    --purple-bg-1: #1d122b;
    --purple-bg-1-opacity: rgba(35, 18, 48, .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: .5px
}

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

@media (hover: hover) {

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

@media (hover: none) {

    .bpform a:active,
    .bpform button:active {
        transform: scale(.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: .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: .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 .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: .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: .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 .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 .5s ease, opacity .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 .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%, .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 .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: .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: .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%, .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: .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(.33, 1, .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: .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 .3s
}

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

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

.winner-content {
    animation: scaleIn .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(.7)
    }

    to {
        transform: scale(1)
    }
}

.background-overlay {
    background-color: #000;
    background-position: 50%;
    background-size: cover;
    filter: blur(8px);
    height: 100%;
    left: 0;
    opacity: .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: .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: .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: .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: .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: .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: .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: .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: .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: .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: .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;
    width: 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: center;
    width: -moz-max-content;
    width: max-content;
}

.roulette__chance-item {
    display: flex;
    z-index: 1;
    align-items: center;
    justify-content: center;
}

.roulette__chance-prize {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    gap: 7px;
}

.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;
}

.roulette__chance-percent {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.roulette__chance-percent span {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3px;
}

.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: .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: .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: .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, .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: .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;
}






/* #gigaAdFrame,
iframe {
    top: calc(var(--tg-safe-area-inset-top, 10px) + var(--tg-content-safe-area-inset-top, 10px) + 20px) !important;
}


#adsContainer svg,
#adsContainer button{
    top: calc(var(--tg-safe-area-inset-top, 10px) + var(--tg-content-safe-area-inset-top, 10px) + 20px) !important;
} */