.modal {
    position: fixed;
    inset: 0;
    z-index: 101;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity .35s ease;
    transition: opacity .35s ease;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.modal::before {
    content: '';
    position: absolute;
    z-index: 3;
    bottom: 0;
    left: 0;
    aspect-ratio: 279 / 139;
    max-width: 279px;
}

.modal::after {
    content: '';
    position: absolute;
    z-index: 0;
    opacity: 0;
}

.modal--active {
    opacity: 1;
    pointer-events: all;
}

.modal--active::after {
    -webkit-animation: lightning-flash 3s infinite;
    animation: lightning-flash 3s infinite;
}

.modal__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    pointer-events: none;
    opacity: 0;
    -webkit-transition: opacity .25s ease;
    transition: opacity .25s ease;
    -webkit-transition-delay: .1s;
    transition-delay: .1s;
}

.modal--active .modal__content {
    opacity: 1;
}

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

.modal__hide-title {
    opacity: 0;
    visibility: hidden;
}

.modal__img {
    position: relative;
    z-index: 2;
    /*aspect-ratio: 995 / 666;*/
    aspect-ratio: 1048 / 720;
    max-width: 1048px;
    width: var(--modal-image-width);
    display: flex;
    flex-direction: column;
    align-items: center;
    background: image-set(
            url("../../img/modal/modal_frame@1x.webp") 1x,
            url("../../img/modal/modal_frame@2x.webp") 2x
    ) center/contain no-repeat;
}

.modal__title {
    line-height: 1;
    text-align: center;
    font-size: calc(var(--modal-image-width) * var(--modal-title-fs-coeff));
    padding-top: calc(var(--modal-image-width) * var(--modal-title-pt-coeff));
    margin-bottom: calc(var(--modal-image-width) * var(--modal-title-mb-coeff));
    color: #fff;
    text-transform: uppercase;
}

.modal__subtitle {
    line-height: 1;
    text-align: center;
    font-size: calc(var(--modal-image-width) * var(--modal-subtitle-fs-coeff));
    margin-bottom: calc(var(--modal-image-width) * var(--modal-subtitle-mb-coeff));
    color: #fff;
    text-transform: uppercase;
}

.modal__subtitle_2,
.modal__subtitle_3,
.modal__subtitle_4 {
    /*color: #37CF38;*/
}

.modal__subtitle span {
    display: block;
}

.modal__btn {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: calc(var(--modal-image-width) * var(--modal-btn-fs-coef));
    width: calc(var(--modal-image-width) * var(--modal-btn-width-coef));
    border-radius: 9999px;
    border-width: calc(var(--modal-image-width) * var(--modal-btn-border-w-coef));
}

.modal__zeus {
    position: fixed;
    z-index: 2;
    aspect-ratio: 849 / 1227;
    width: var(--modal-zeus-w);
    pointer-events: none;
}

.modal__ligthning {
    position: absolute;
    z-index: 0;
}

.highlight {
    display: inline-block !important;
    color: #37CF38;
}

@media (orientation: portrait) and (min-width: 0px) {
    :root {
        --modal-image-width: clamp(100px, min(100vw, 60svh), 800px);
        --modal-zeus-w: clamp(100px, min(80vw, 45svh), 758px);
        --modal-zeus-top-coeff: 1.25;
        --modal-title-fs-coeff: 0.0604;
        --modal-title-pt-coeff: 0.165;
        --modal-title-mb-coeff: 0.03243;
        --modal-subtitle-fs-coeff: 0.040324;
        --modal-subtitle-mb-coeff: 0.04243;
        --modal-btn-fs-coef: 0.03783;
        --modal-btn-width-coef: 0.50979;
        --modal-btn-border-w-coef: 0.004608;
        --modal-logo-w-coeff: 0.3704;
        --modal-logo-mb-coeff: 0.183;
    }

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

    .modal::before {
        width: clamp(16px, min(64vw, 88vh), 279px);
        background: image-set(
                url("../../img/clouds/cloud_mobile_left@1x.webp") 1x,
                url("../../img/clouds/cloud_mobile_left@2x.webp") 2x
        ) center/contain no-repeat;
    }

    .modal::after {
        top: 45%;
        aspect-ratio: 935 / 569;
        width: 200%;
        background: url("../../img/lightning/lightning_portrait_mobile.webp") center/contain no-repeat;
    }

    .modal__zeus {
        left: 50%;
        transform: translateX(-50%);
        top: calc(var(--modal-zeus-w) * var(--modal-zeus-top-coeff));
    }

    .modal__subtitle_2,
    .modal__subtitle_3,
    .modal__subtitle_4 {
        font-size: calc(var(--modal-image-width) * var(--modal-subtitle-fs-coeff));
    }
}

@media (orientation: portrait) and (min-width: 768px) and (min-height: 800px) {
    :root {
        --modal-zeus-w: clamp(100px, min(80vw, 45svh), 758px);
        --modal-zeus-top-coeff: 1.05;
        --modal-title-fs-coeff: 0.05333;
        --modal-title-pt-coeff: 0.1466;
        --modal-title-mb-coeff: 0.02666;
        --modal-subtitle-fs-coeff: 0.0428;
        --modal-subtitle-mb-coeff: 0.030666;
        --modal-btn-fs-coef: 0.038;
        --modal-btn-width-coef: 0.5;
        --modal-btn-border-w-coef: 0.004608;
        --modal-logo-w-coeff: 0.3864;
        --modal-logo-mb-coeff: 0.105;
    }

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

    .modal::before {
        aspect-ratio: 496 / 218;
        max-width: 496px;
        width: clamp(16px, min(64vw, 88vh), 496px);
        background: image-set(
                url("../../img/clouds/cloud_tablet_left@1x.webp") 1x,
                url("../../img/clouds/cloud_tablet_left@2x.webp") 2x
        ) center/contain no-repeat;
    }

    .modal::after {
        top: 45%;
        aspect-ratio: 1280 / 731;
        width: 180%;
        background: url("../../img/lightning/lightning_landscape_tablet.webp") center/contain no-repeat;
    }

    .modal__subtitle_2,
    .modal__subtitle_3,
    .modal__subtitle_4 {
        font-size: calc(var(--modal-image-width) * var(--modal-subtitle-fs-coeff) * 0.8888);
    }
}

@media (orientation: landscape) and (min-width: 0px) {
    :root {
        --modal-image-width: clamp(100px, min(51vw, 80svh), 1048px);
        --modal-zeus-w: clamp(100px, min(34vw, 64svh), 849px);
        --modal-zeus-top-coeff: 0.3;
        --modal-title-fs-coeff: 0.06035;
        --modal-title-pt-coeff: 0.1549;
        --modal-title-mb-coeff: 0.04723;
        --modal-subtitle-fs-coeff: 0.046324;
        --modal-subtitle-mb-coeff: 0.04839;
        --modal-btn-fs-coef: 0.03;
        --modal-btn-width-coef: 0.4165;
        --modal-btn-border-w-coef: 0.004608;
        --modal-logo-w-coeff: 0.3078;
        --modal-logo-mb-coeff: 0.14;
    }

    .modal {
        padding: clamp(16px, min(5vw, 6vh), 74px);
        background: image-set(
                url("../../img/bg/modal_bg_mobile@1x.webp") 1x,
                url("../../img/bg/modal_bg_mobile@2x.webp") 2x
        ) left center/cover no-repeat;
        align-items: center;
    }

    .modal::before {
        aspect-ratio: 531 / 287;
        width: clamp(16px, min(24vw, 38vh), 531px);
        max-width: 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;
    }

    .modal::after {
        top: 0;
        right: 0;
        aspect-ratio: 800 / 457;
        width: clamp(16px, min(74vw, 143vh), 800px);
        max-width: 800px;
        background: url("../../img/lightning/lightning_landscape_mobile.webp") center/contain no-repeat;
    }

    .modal__content {
        align-self: center;
    }

    .modal__zeus {
        top: 55%;
        transform: translateY(-50%);
        left: 50%;
    }

    .modal__subtitle_2,
    .modal__subtitle_3,
    .modal__subtitle_4 {
        font-size: calc(var(--modal-image-width) * var(--modal-subtitle-fs-coeff) * 0.8333);
    }
}

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

    .modal::after {
        aspect-ratio: 1280 / 731;
        width: clamp(16px, min(74vw, 143vh), 1280px);
        max-width: 1280px;
        background: url("../../img/lightning/lightning_landscape_tablet.webp") center/contain no-repeat;
    }
}

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

    .modal::after {
        aspect-ratio: 1899 / 1123;
        width: clamp(16px, min(74vw, 143vh), 1899px);
        max-width: 1899px;
        background: url("../../img/lightning/lightning_landscape_desktop.webp") center/contain no-repeat;
    }
}