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

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

html {
    box-sizing: border-box
}

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

p {
    margin: 0
}

picture {
    display: block
}

img {
    display: block;
    border: none
}

img, svg {
    vertical-align: middle
}

a {
    background-color: transparent;
    color: inherit;
    text-decoration: none
}

:focus {
    outline: none
}

button {
    all: unset
}

:root {
    --font-main-weight: 900;
    --font-main-color: #fff;
    --font-main-style: italic;
    --font-optical-sizing: auto;
    --font-main: "Inter", sans-serif;
    /*--bg-color: #000D27;*/
}

body {
    line-height: 1;
    text-rendering: optimizeSpeed;
    -webkit-text-decoration-skip: objects;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    /*background-color: var(--bg-color);*/
    font-family: var(--font-main), sans-serif;
    font-weight: var(--font-main-weight);
    color: var(--font-main-color);
    font-optical-sizing: var(--font-optical-sizing);
    font-style: var(--font-main-style);
    text-transform: uppercase;
    height: -webkit-fill-available;
    display: flex;
    flex-direction: column;
    height: 100dvh;
    position: relative;
}

.main {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
}

/*TODO*/
.main--overflow-hidden {
    overflow: hidden;
}

.content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    overflow: hidden;
    width: auto;
    pointer-events: auto;
}

.content__wrapper {
    position: relative;
    width: auto;
    max-width: 100%;
    z-index: 2;
}

.content__wrapper--isolate {
    z-index: auto;
}

.cloud-wrapper {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}

.left-cloud {
    aspect-ratio: 896 / 497;
    width: 100%;
    position: absolute;
    left: 0;
    z-index: 1;
    background: image-set(
            url('../img/cloud/left_cloud@1x.webp') 1x,
            url('../img/cloud/left_cloud@2x.webp') 2x
    ) no-repeat left bottom;
    background-size: contain;
    pointer-events: none;
}

.right-cloud {
    aspect-ratio: 878 / 409;
    width: 100%;
    position: absolute;
    right: 0;
    z-index: 1;
    background: image-set(
            url('../img/cloud/right_cloud@1x.webp') 1x,
            url('../img/cloud/right_cloud@2x.webp') 2x
    ) no-repeat left bottom;
    background-size: contain;
    pointer-events: none;
}

.right-cloud-small {
    aspect-ratio: 375 / 371;
    width: 100%;
    position: absolute;
    right: 0;
    z-index: 0;
    background: image-set(
            url('../img/cloud/right_cloud_small@1x.webp') 1x,
            url('../img/cloud/right_cloud_small@2x.webp') 2x
    ) no-repeat left bottom;
    background-size: contain;
    pointer-events: none;
}

.content-isolate {
    z-index: auto;
}

.counter {
    width: 100%;
    font-weight: 900;
    height: auto;
    line-height: 1;
    letter-spacing: 1px;
    z-index: 5;
    font-size: 24px;
    white-space: nowrap;
}

.counter__text {
    color: #fff;
}

.counter__number {
    color: #14A2F6;
}

.center-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.title {
    font-size: 24px;
    line-height: 1.1;
    color: #fff;
    white-space: nowrap;
}

.logo {
    height: auto;
    margin: 0 auto;
    position: relative;
    aspect-ratio: 611 / 44;
    isolation: isolate;
    z-index: 100;
    opacity: 1;
}

.logo-isolate {
    opacity: 0;
}

.cart__btn {
    aspect-ratio: 308 / 105;
    background: url('../img/cart_btn.svg') no-repeat center center;
    background-size: auto;
    color: #050E6B;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 1.1;
    font-weight: 900;
    font-size: 32px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.5s ease;
    padding: 0;
}

.cart__btn--active {
    opacity: 1;
}

.cart__btn-text--second {
    display: flex;
}

.cart__btn-text--hide {
    display: none !important;
}

.cart__btn-text--visible {
    display: block;
}

.rocket {
    aspect-ratio: 260 / 556;
    position: absolute;
    z-index: 2;
}

.rocket:hover {
    animation: float 1.2s linear infinite;;
    -webkit-animation: float 1.2s linear infinite;;
}

.rocket-shake {
    animation: shakeAndStop 10s linear infinite;
    -webkit-animation: shakeAndStop 10s linear infinite;
}

.left_chip,
.center_chip,
.right_chip {
    position: absolute;
    aspect-ratio: 1 / 1;
    z-index: 2;
}

.counter__wrapper {
    position: relative;
    z-index: 3;
}

.coin-wrapper {
    perspective: 1000px;
    display: inline-block;
}

.red-square--animation {
    display: block;
    transform-style: preserve-3d;
    animation: spin-coin-right 2s ease-in-out infinite reverse;
    -webkit-animation: spin-coin-right 2s ease-in-out infinite reverse;
    transform-origin: center;
}

.dark-card--animation {
    display: block;
    transform-style: preserve-3d;
    animation: spin-coin-right 2s ease-in-out infinite reverse;
    -webkit-animation: spin-coin-right 2s ease-in-out infinite reverse;
    animation-delay: .5s;
    transform-origin: center;
}

.red-card--animation {
    display: block;
    transform-style: preserve-3d;
    animation: spin-coin-right 2s ease-in-out infinite reverse;
    -webkit-animation: spin-coin-right 2s ease-in-out infinite reverse;
    animation-delay: .1s;
    transform-origin: center;
}

.clubs--animation {
    display: block;
    transform-style: preserve-3d;
    animation: spin-coin-right 2s ease-in-out infinite reverse;
    -webkit-animation: spin-coin-right 2s ease-in-out infinite reverse;
    animation-delay: .5s;
    transform-origin: center;
}

.left-dice--animation {
    animation: coin-wobble 3s ease-in-out infinite reverse;
    -webkit-animation: coin-wobble 3s ease-in-out infinite reverse;
    transform-origin: center center;
    display: inline-block;
}

.right-dice--animation {
    animation: coin-wobble 3s ease-in-out infinite reverse;
    -webkit-animation: coin-wobble 3s ease-in-out infinite reverse;
    transform-origin: center center;
    animation-delay: 1s;
    display: inline-block;
}

@media (orientation: portrait) and (min-width: 0px) {
    .main {
        flex: 1;
        display: flex;
        flex-direction: column;
        position: relative;
        background: image-set(
                url('../img/bg/bg_portrait@1x.webp') 1x,
                url('../img/bg/bg_portrait@2x.webp') 2x
        ) no-repeat center center;
        background-size: cover;
    }

    .title--landscape,
    .counter__wrapper--landscape,
    .counter__wrapper--tablet-portrait,
    .rocket--landscape {
        display: none;
    }

    .title-block-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 20px;
        width: 100%;
        margin-bottom: clamp(10px, 3vw, 30px);
    }

    .title--portrait {
        display: block;
        font-size: clamp(14px, 5vw, 24px);
    }

    .content {
        display: block;
        padding: clamp(20px, 5vw, 86px) clamp(20px, 8vw, 70px) 0;
    }

    .counter__wrapper--mobile-portrait,
    .counter--portrait {
        display: block;
    }

    .counter__wrapper--mobile-portrait {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        margin-top: 10px;
    }

    .counter {
        width: 45%;
        white-space: wrap;
        font-size: clamp(12px, 4vw, 16px);
    }

    .counter--portrait-withoutSpinner {
        width: 100% !important;
        white-space: nowrap !important;
        font-size: 20px;
    }

    .cart__btn {
        width: 55%;
        max-width: 200px;
        font-size: clamp(12px, 4vw, 20px);
        background-size: contain;
    }

    .logo {
        width: 100%;
        max-width: 686px;
        margin-bottom: clamp(16px, 8vw, 56px);
    }

    .left-cloud {
        display: none;
    }

    .right-cloud {
        bottom: -12%;
        right: -1%;
        max-width: 100%;
        background-size: contain;
    }

    .right-cloud-small {
        bottom: 0;
        right: 0;
        max-width: clamp(100px, 30vw, 200px);
        background-size: contain;
    }

    .rocket--portrait {
        display: block;
    }

    .rocket {
        position: absolute;
        left: 2%;
        bottom: 1%;
        width: clamp(70px, 18vw, 230px);
    }

    .red-square {
        display: none;
    }

    .dark-card,
    .left-dice {
        display: none;
    }

    .right-dice {
        position: absolute;
        top: 105%;
        right: 30%;
        width: clamp(40px, 18vw, 101px);
    }

    .red-card {
        position: absolute;
        top: 12%;
        right: 5%;
        width: clamp(40px, 20vw, 82px);
    }

    .clubs {
        position: absolute;
        top: 100%;
        right: 10%;
        width: clamp(40px, 18vw, 67px);
    }

    .left_chip,
    .center_chip,
    .right_chip {
        width: clamp(60px, 8vw, 140px);
    }

    .left_chip {
        left: 30%;
        bottom: 0;
    }

    .center_chip {
        display: none;
    }

    .right_chip {
        right: 5%;
        bottom: 3%;
    }
}

@media (orientation: portrait) and (min-width: 390px) {
    .right-cloud {
        bottom: -13%;
        right: -1%;
        max-width: 100%;
    }

    .right-cloud-small {
        bottom: -1%;
        right: 0;
        max-width: clamp(100px, 35vw, 240px);
    }

    .rocket {
        position: absolute;
        left: 2%;
        bottom: 1%;
        width: clamp(90px, 18vw, 230px);
    }

    .left_chip,
    .center_chip,
    .right_chip {
        width: clamp(60px, 8vw, 140px);
    }

    .right_chip {
        right: 5%;
        bottom: 10%;
    }
}

@media (orientation: portrait) and (min-width: 768px) and (min-height: 1024px) {
    .content {
        display: block;
        padding: clamp(20px, 8vw, 86px) clamp(20px, 8vw, 70px) 0;
    }


    .counter__wrapper--mobile-portrait {
        display: none;
    }

    .title--portrait {
        width: 65%;
    }

    .counter__wrapper--tablet-portrait {
        display: block;
        width: 35%;
    }

    .counter {
        width: 45%;
        white-space: nowrap !important;
        font-size: clamp(12px, 5vw, 20px);
    }

    .counter--portrait {
        margin-bottom: 16px;
    }

    .cart__btn {
        width: 100%;
        max-width: 300px;
        font-size: clamp(12px, 4vw, 24px);
        background-size: contain;
    }

    .right-cloud {
        bottom: -8%;
        right: -5%;
        max-width: clamp(200px, 85vw, 900px);
    }

    .right-cloud-small {
        display: none;
    }

    .left-dice {
        display: block;
        position: absolute;
        top: 45%;
        left: 2%;
        width: clamp(40px, 15vw, 101px);
    }

    .dark-card {
        display: block;
        position: absolute;
        bottom: 15%;
        left: 2%;
        width: clamp(40px, 14vw, 147px);
    }

    .right-dice {
        position: absolute;
        top: auto;
        bottom: 0;
        right: 10%;
        width: clamp(40px, 15vw, 101px);
    }

    .red-card {
        position: absolute;
        top: 50%;
        right: 5%;
        width: clamp(40px, 14vw, 147px);
    }

    .clubs {
        position: absolute;
        top: 70%;
        right: 2%;
        width: clamp(40px, 14vw, 126px);
    }

    .left_chip,
    .right_chip {
        width: clamp(60px, 15vw, 140px);
    }

    .left_chip {
        left: 30%;
        bottom: 4%;
    }

    .right_chip {
        right: 30%;
        bottom: 14%;
    }
}

@media (orientation: landscape) and (min-width: 0px) {
    .main {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        /*justify-content: center;*/
        position: relative;
        background: image-set(
                url('../img/bg/bg_landscape@1x.webp') 1x,
                url('../img/bg/bg_landscape@2x.webp') 2x
        ) no-repeat center center;
        background-size: auto;
        padding: clamp(20px, 3vw, 100px) clamp(20px, 5vw, 120px) 0;
    }

    .content {
        display: flex;
        flex-direction: row;
        justify-content: center;
        position: relative;
        gap: clamp(4px, 1vw, 120px);
    }

    .logo {
        width: clamp(100px, 30vw, 611px);
        margin-bottom: clamp(12px, 3vw, 100px);
    }

    .counter__wrapper--landscape {
        position: relative;
        /*background: red;*/
        align-self: stretch;
    }

    .counter--landscape {
        margin-bottom: clamp(10px, 1.5vw, 45px);
    }

    .counter {
        font-size: clamp(13px, 1.3vw, 24px);
    }

    .title--landscape {
        position: relative;
        font-size: clamp(13px, 1.1vw, 24px);
        align-self: stretch;
    }

    .cart__btn {
        width: clamp(130px, 16vw, 308px);
        font-size: clamp(12px, 1.5vw, 32px);
        background-size: contain;
    }

    .title--portrait,
    .counter__wrapper--mobile-portrait,
    .counter__wrapper--tablet-portrait,
    .rocket--portrait {
        display: none;
    }

    .left-cloud {
        bottom: -10%;
        left: -5%;
        max-width: clamp(200px, 35vw, 900px);
        background-size: contain;
    }

    .right-cloud {
        bottom: -9%;
        right: -1%;
        max-width: clamp(200px, 35vw, 900px);
        background-size: contain;
    }

    .right-cloud-small {
        bottom: 3%;
        right: 0;
        max-width: clamp(100px, 17vw, 375px);
        background-size: contain;
    }

    .rocket {
        display: block;
        position: absolute;
        left: 101%;
        bottom: clamp(20px, 5vw, 60px);
        width: clamp(70px, 12vw, 260px);
    }

    .red-square {
        position: absolute;
        left: -2%;
        top: 45%;
        aspect-ratio: 1 / 1;
        width: clamp(40px, 7vw, 128px);
    }

    .left-dice {
        position: absolute;
        top: 25%;
        left: 10%;
        width: clamp(40px, 7vw, 128px);
    }

    .right-dice {
        position: absolute;
        bottom: 10%;
        right: -0%;
        width: clamp(40px, 7vw, 128px);
    }

    .dark-card {
        position: absolute;
        bottom: 10%;
        left: 10%;
        width: clamp(40px, 7vw, 172px);
    }

    .red-card {
        position: absolute;
        top: 25%;
        right: -2%;
        width: clamp(40px, 7vw, 172px);
    }

    .clubs {
        position: absolute;
        top: 50%;
        right: -4%;
        width: clamp(40px, 7vw, 126px);
    }

    .left_chip,
    .center_chip,
    .right_chip {
        width: clamp(50px, 8vw, 140px);
    }

    .left_chip {
        left: 10%;
        bottom: 1%;
    }

    .center_chip {
        left: 50%;
        bottom: -6%;
        transform: translateX(-50%);
    }

    .right_chip {
        right: 5%;
        bottom: 1%;
    }
}

@media (orientation: landscape) and (min-width: 860px) {
    .counter {
        font-size: clamp(14px, 1.9vw, 24px);
    }

    .title--landscape {
        font-size: clamp(14px, 1.9vw, 24px);
    }

    .cart__btn {
        width: clamp(170px, 18vw, 308px);
        font-size: clamp(15px, 1.5vw, 32px);
        background-size: contain;
    }
}

@media (orientation: landscape) and (min-width: 1024px) and (min-height: 600px) {
    .left-cloud {
        max-width: clamp(200px, 42vw, 900px);
    }

    .right-cloud {
        max-width: clamp(200px, 42vw, 900px);
    }

    .left_chip {
        left: 10%;
        bottom: 5%;
    }

    .center_chip {
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
    }

    .right_chip {
        right: 5%;
        bottom: 5%;
    }
}

@media (orientation: landscape) and (min-width: 1024px) and (min-height: 1024px) {
    .left-cloud {
        max-width: clamp(200px, 50vw, 900px);
    }

    .right-cloud {
        max-width: clamp(200px, 50vw, 900px);
    }

    .content {
        gap: clamp(30px, 2vw, 120px);
    }
}

@media (orientation: landscape) and (min-width: 1440px) {
    .content {
        gap: clamp(30px, 1vw, 140px);
    }
}

@media (orientation: landscape) and (min-width: 1640px) {
    .content {
        gap: clamp(30px, 6vw, 140px);
    }

    .counter__wrapper--landscape {
        padding-left: 10%;
    }

    .title--landscape {
        padding-right: 10%;
    }
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -webkit-transform: scale(1.03);
        transform: scale(1.03);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -webkit-transform: scale(1.03);
        transform: scale(1.03);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@-webkit-keyframes sway {
    0% {
        -webkit-transform: rotate(-40deg);
        transform: rotate(-40deg)
    }
    50% {
        -webkit-transform: rotate(-30deg);
        transform: rotate(-30deg)
    }
    100% {
        -webkit-transform: rotate(-40deg);
        transform: rotate(-40deg)
    }
}

@keyframes sway {
    0% {
        -webkit-transform: rotate(-40deg);
        transform: rotate(-40deg)
    }
    50% {
        -webkit-transform: rotate(-30deg);
        transform: rotate(-30deg)
    }
    100% {
        -webkit-transform: rotate(-40deg);
        transform: rotate(-40deg)
    }
}

@keyframes shakeAndStop {
    0%   { transform: translate(1px, 1px) rotate(0deg);     -webkit-transform: translate(1px, 1px) rotate(0deg); }
    5%   { transform: translate(-1px, -2px) rotate(-1deg);  -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
    10%  { transform: translate(-3px, 0px) rotate(1deg);    -webkit-transform: translate(-3px, 0px) rotate(1deg); }
    15%  { transform: translate(3px, 2px) rotate(0deg);     -webkit-transform: translate(3px, 2px) rotate(0deg); }
    20%  { transform: translate(1px, -1px) rotate(1deg);    -webkit-transform: translate(1px, -1px) rotate(1deg); }
    25%  { transform: translate(-1px, 2px) rotate(-1deg);   -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
    30%  { transform: translate(-3px, 1px) rotate(0deg);    -webkit-transform: translate(-3px, 1px) rotate(0deg); }
    35%  { transform: translate(3px, 1px) rotate(-1deg);    -webkit-transform: translate(3px, 1px) rotate(-1deg); }
    40%  { transform: translate(-1px, -1px) rotate(1deg);   -webkit-transform: translate(-1px, -1px) rotate(1deg); }
    45%  { transform: translate(1px, 2px) rotate(0deg);     -webkit-transform: translate(1px, 2px) rotate(0deg); }
    50%  { transform: translate(1px, -2px) rotate(-1deg);   -webkit-transform: translate(1px, -2px) rotate(-1deg); }
    50%,
    100% { transform: translate(0) rotate(0);               -webkit-transform: translate(0) rotate(0); }
}

@keyframes float {
    0% {
        transform: translate(0);
        -webkit-transform: translate(0);
    }
    50% {
        transform: translateY(2%);
        -webkit-transform: translateY(2%);
    }
    100% {
        transform: translate(0);
        -webkit-transform: translate(0);
    }
}

@keyframes spin-coin-right {
    0% {
        transform: rotateY(0deg);
        -webkit-transform: rotateY(0deg);
    }
    50% {
        transform: rotateY(25deg);
        -webkit-transform: rotateY(25deg);
    }
    100% {
        transform: rotateY(0deg);
        -webkit-transform: rotateY(0deg);
    }
}

@keyframes coin-wobble {
    0%, 100% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    50% {
        transform: rotate(-10deg);
        -webkit-transform: rotate(-10deg);
    }
}