*, :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
}

body {
    font-family: "Sansation", sans-serif;
    font-weight: 700;
    font-style: normal;
    height: -webkit-fill-available;
    display: flex;
    flex-direction: column;
    height: 100svh;
    position: relative;
}

.main {
    flex: 1;
    display: flex;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.particles {
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: auto;
}

.content {
    position: relative;
    z-index: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: auto;
    width: 100%;
}

.left-block {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: fit-content;
    pointer-events: none;
}

.logo {
    position: relative;
    z-index: 10;
    aspect-ratio: 364 / 116;
    max-width: 364px;
    width: calc(var(--game-w) * var(--logo-w-coeff));
    margin-bottom: calc(var(--game-w) * var(--logo-mb-coeff));
}

.title {
    font-size: calc(var(--game-w) * var(--title-fs-coeff));
    margin-bottom: calc(var(--game-w) * var(--title-mb-coeff));
    text-align: center;
    color: #002F5E;
    line-height: 1.1;
    text-transform: uppercase;
}

.btn {
    position: relative;
    aspect-ratio: 452 / 92;
    height: fit-content;
    color: #fff;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--game-w) * var(--btn-w-coeff));
    font-size: calc(var(--game-w) * var(--btn-w-coeff) * var(--btn-fs-coeff));
    border-radius: 65px;
    border: 5px solid transparent;
    background-image:
            linear-gradient(90deg, #106019 13%, #3BD93B 50%, #106019 93%),
            linear-gradient(
                    90deg,
                    #98681A 0%,
                    #E1C889 15%,
                    #FFEEB6 22%,
                    #FFF5D3 38%,
                    #FDEFCA 39%,
                    #F8E2B3 40%,
                    #F0CC8D 41%,
                    #EEC480 42%,
                    #DBAF69 43%,
                    #C2954C 45%,
                    #AF8135 48%,
                    #A27325 50%,
                    #9A6A1B 53%,
                    #986819 57%,
                    #C49240 74%,
                    #EFBE67 88%,
                    #DEAC56 100%
            );
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    pointer-events: auto;
    text-transform: uppercase;
}

.btn > span {
    position: relative;
    z-index: 2;
}

.btn:after {
    content: '';
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 101%;
    height: 101%;
    border-radius: inherit;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.btn:after {
    background: linear-gradient(90deg, rgba(59, 217, 59, 0.35) 0%, rgba(16, 96, 25, 0.2) 50%, rgba(59, 217, 59, 0.35) 100%);
    opacity: 0;
}

.btn-pulse {
    -webkit-animation: pulse 1.5s ease-in-out infinite;
    animation: pulse 1.5s ease-in-out infinite;
}

.btn--disabled {
    pointer-events: none;
    cursor: not-allowed;
    -webkit-animation: none !important;
    animation: none !important;
    box-shadow: none;
    opacity: 0.85;
}

.right-block__content {
    width: 100%;
    position: absolute;
    z-index: 1;
    bottom: clamp(16px, min(5.5vw, 6.5vh), 40px);
    left: 50%;
    transform: translateX(-50%);
}

.subtitle {
    color: #002F5E;
    text-transform: uppercase;
    text-align: center;
    font-size: calc(var(--zeus-w) * var(--subtitle-fs-coeff));
    margin-bottom: calc(var(--zeus-w) * var(--subtitle-mb-coeff));
    text-shadow: 0 4px 4px rgba(15, 5, 67, 0.35);
}

.btn--disabled {
    pointer-events: none;
    cursor: not-allowed;
    -webkit-animation: none !important;
    animation: none !important;
    box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
    .btn:hover:after {
        opacity: 1;
    }
}

.btn:active {
    -webkit-animation: none;
    animation: none;
    transform: scale(0.98) translateY(1px);
}

@media (orientation: portrait) and (min-width: 0px) {
    :root {
        --logo-w-coeff: 0.3864;
        --logo-mb-coeff: 0.0702;
        --title-fs-coeff: 0.052;
        --title-mb-coeff: 0.0502;
        --zeus-w: clamp(100px, min(50vw, 27svh), 400px);
        --zeus-w-top-coeff: 0.25;
        --subtitle-fs-coeff: 0.08963;
        --subtitle-mb-coeff: 0.09;
        --btn-fs-coef: 0.0732;
        --btn-width-coef: 1.1;
        --btn-border-w-coef: 0.0157;
    }

    .main {
        padding: clamp(16px, min(5.5vw, 6.5vh), 60px) 0 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        background: image-set(
                url("../../img/bg/bg_mobile@1x.webp") 1x,
                url("../../img/bg/bg_mobile@2x.webp") 2x
        ) center/cover no-repeat;
    }

    .left-block {
        position: relative;
        z-index: 1;
    }

    .right-block {
        position: relative;
        top: 0;
        z-index: 2;
        pointer-events: none;
        display: block;
        width: 100%;
        height: 100%;
    }

    .zeus_wrapper {
        position: absolute;
        top: calc(var(--zeus-w) * var(--zeus-w-top-coeff) * -1);
        left: 50%;
        transform: translateX(-50%);
        width: var(--zeus-w);
        aspect-ratio: 191 / 453;
        bottom: 0;
    }

    .zeus {
        aspect-ratio: 191 / 453;
        width: var(--zeus-w);
    }

    .main_btn {
        margin: 0 auto;
        font-size: calc(var(--zeus-w) * var(--btn-fs-coef));
        width: calc(var(--zeus-w) * var(--btn-width-coef));
        border-radius: 9999px;
        border-width: calc(var(--zeus-w) * var(--btn-border-w-coef));
    }

    .clouds {
        position: relative;
        z-index: 1;
        width: 200%;
        height: 100%;
        background: image-set(
                url("../../img/clouds/cloud_mobile@1x.webp") 1x,
                url("../../img/clouds/cloud_mobile@2x.webp") 2x
        ) center bottom/contain no-repeat;
        bottom: -30%;
        left: 50%;
        transform: translateX(-50%);
    }

    .right-block__content {
        bottom: clamp(16px, min(5.5vw, 6.5vh), 40px);
    }
}

@media (orientation: portrait) and (min-width: 0px) and (min-height: 800px) {
    .main {
        background: image-set(
                url("../../img/bg/bg_tablet@1x.webp") 1x,
                url("../../img/bg/bg_tablet@2x.webp") 2x
        ) center/cover no-repeat;
        background-size: auto 110%;
    }
}

@media (orientation: portrait) and (min-width: 768px) and (min-height: 800px) {
    :root {
        --logo-w-coeff: 0.3864;
        --logo-mb-coeff: 0.03553;
        --title-fs-coeff: 0.04568;
        --title-mb-coeff: 0.0203;
        --zeus-w-top-coeff: 0.45;
        --subtitle-mb-coeff: 0.04;
        --btn-fs-coef: 0.06722;
        --btn-width-coef: 0.9663;
        --btn-border-w-coef: 0.0157;
    }

    .main {
        padding: clamp(16px, min(4vw, 5vh), 60px) 0 0;
        background: image-set(
                url("../../img/bg/bg_tablet@1x.webp") 1x,
                url("../../img/bg/bg_tablet@2x.webp") 2x
        ) left center/cover no-repeat;
    }

    .zeus_wrapper {
        left: 75%;
    }

    .clouds {
        background: image-set(
                url("../../img/clouds/cloud_tablet@1x.webp") 1x,
                url("../../img/clouds/cloud_tablet@2x.webp") 2x
        ) center bottom/contain no-repeat;
    }
}

@media (orientation: landscape) and (min-width: 0px) {
    :root {
        --game-w: clamp(100px, min(42vw, 82svh), 1048px);
        --logo-w-coeff: 0.3187;
        --logo-mb-coeff: 0.04866;
        --title-fs-coeff: 0.04961;
        --title-mb-coeff: 0.03053;
        --game-mb-coeff: 0.06128;
        --btn-w-coeff: 0.67;
        --btn-fs-coeff: 0.158;
        --btn-border-w-coeff: 0.0172;
        --zeus-w: clamp(100px, min(20vw, 38svh), 500px);
        --subtitle-fs-coeff: 0.1;
        --subtitle-mb-coeff: 0.09;
        --btn-fs-coef: 0.065;
        --btn-width-coef: 0.96;
        --btn-border-w-coef: 0.0109;
    }

    .main {
        position: relative;
        padding: clamp(16px, min(5vw, 6vh), 74px);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        background: image-set(
                url("../../img/bg/bg_mobile@1x.webp") 1x,
                url("../../img/bg/bg_mobile@2x.webp") 2x
        ) center/cover no-repeat;
    }

    .main::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        aspect-ratio: 531 / 287;
        max-width: 531px;
        width: clamp(16px, min(24vw, 38vh), 531px);
        background: image-set(
                url("../../img/clouds/cloud_desktop_left@1x.webp") 1x,
                url("../../img/clouds/cloud_desktop_left@2x.webp") 2x
        ) center/contain no-repeat;
    }

    .left-block {
        align-self: center;
    }

    .right-block {
        position: relative;
        z-index: 2;
        align-self: stretch;
        display: flex;
    }

    .right-block::before {
        content: '';
        position: absolute;
        z-index: 1;
        bottom: -5%;
        left: -40%;
        aspect-ratio: 1340 / 608;
        max-width: 1340px;
        width: clamp(16px, min(52vw, 100vh), 1340px);
        background: image-set(
                url("../../img/clouds/cloud_mobile_right@1x.webp") 1x,
                url("../../img/clouds/cloud_mobile_right@2x.webp") 2x
        ) center/contain no-repeat;
    }

    .right-block__content {
        bottom: clamp(16px, min(5vw, 9vh), 120px);
    }

    .main_btn {
        margin: 0 auto;
        font-size: calc(var(--zeus-w) * var(--btn-fs-coef));
        width: calc(var(--zeus-w) * var(--btn-width-coef));
        border-radius: 9999px;
        border-width: calc(var(--zeus-w) * var(--btn-border-w-coef));
    }

    .zeus_wrapper {
        position: relative;
        height: 100%;
        width: var(--zeus-w);
        overflow: hidden;
        aspect-ratio: 456 / 1084;
        max-width: 500px;
    }

    .zeus {
        aspect-ratio: 456 / 1084;
        width: var(--zeus-w);
        max-width: 500px;
        position: absolute;
        bottom: 0;
    }
}

@media (orientation: landscape) and (min-width: 1024px) {
    .main {
        background: image-set(
                url("../../img/bg/bg_tablet@1x.webp") 1x,
                url("../../img/bg/bg_tablet@2x.webp") 2x
        ) center/cover no-repeat;
    }

    .right-block::before {
        background: image-set(
                url("../../img/clouds/cloud_tablet_right@1x.webp") 1x,
                url("../../img/clouds/cloud_tablet_right@2x.webp") 2x
        ) center/contain no-repeat;
    }
}

@media (orientation: landscape) and (min-width: 1440px) {
    .main {
        background: image-set(
                url("../../img/bg/bg_desktop@1x.webp") 1x,
                url("../../img/bg/bg_desktop@2x.webp") 2x
        ) center/cover no-repeat;
    }

    .right-block::before {
        background: image-set(
                url("../../img/clouds/cloud_desktop_right@1x.webp") 1x,
                url("../../img/clouds/cloud_desktop_right@2x.webp") 2x
        ) center/contain no-repeat;
    }
}