#world-is-open-popup {
    box-sizing: border-box;
    position: fixed;
    inset: 0;
    width: min(820px, calc(100vw - 24px));
    max-width: none;
    max-height: calc(100dvh - 24px);
    margin: auto;
    padding: 0 12px;
    overflow: auto;
    border: 1px solid #e8bd67;
    border-radius: 20px;
    background: radial-gradient(ellipse at top left, #253766, #0a142b 65%);
    color: #fff;
    box-shadow: 0 0 0 5px #e8bd6712, 0 0 80px #e8bd6726, 0 32px 100px #000a;
    font-family: Arial, sans-serif;
}

#world-is-open-popup::backdrop {
    background: #030816d9;
    backdrop-filter: blur(7px);
}

#world-is-open-popup .world-is-open-popup__heading {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    margin: 0;
    padding: 0 52px 0 8px;
    color: #f8da99;
    font: 700 13px/1.4 Arial, sans-serif;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

#world-is-open-popup .world-is-open-popup__heading span {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #ffce74;
    box-shadow: 0 0 12px #ffce74b3;
}

#world-is-open-popup .world-is-open-popup__close {
    position: absolute;
    top: 7px;
    right: 10px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #ffffff52;
    border-radius: 50%;
    background: #ffffff12;
    color: #fff;
    font: 30px/1 Arial, sans-serif;
    cursor: pointer;
}

#world-is-open-popup .world-is-open-popup__close:hover {
    background: #ffffff2b;
}

#world-is-open-popup .world-is-open-popup__image-link {
    display: block;
    border-radius: 10px;
}

#world-is-open-popup .world-is-open-popup__image {
    display: block;
    width: 100%;
    height: auto;
    max-height: calc(100dvh - 222px);
    object-fit: contain;
    border-radius: 10px;
    background: #050b1b;
}

#world-is-open-popup .world-is-open-popup__footer {
    padding: 14px 20px 26px;
}

#world-is-open-popup .world-is-open-popup__details {
    margin: 0 0 12px;
    color: #e2e8f5;
    text-align: center;
    font: 400 15px/1.4 Arial, sans-serif;
}

#world-is-open-popup .world-is-open-popup__details span {
    padding: 0 8px;
    color: #e8bd67;
}

#world-is-open-popup .world-is-open-popup__register {
    display: block;
    padding: 14px 24px;
    border: 1px solid #fff0ae;
    border-radius: 12px;
    background: linear-gradient(180deg, #fff1ae 0%, #ffda59 20%, #f5b823 55%, #e6a019 56%, #ffd45b 100%);
    color: #241700;
    box-shadow: inset 0 2px 0 #fff8d6, inset 0 -2px 0 #b97616,
        0 4px 0 #835011, 0 0 18px #ffcc4d99, 0 0 42px #ffb92366, 0 10px 60px #ffb92333;
    text-align: center;
    text-decoration: none;
    font: 700 21px/1.4 Arial, sans-serif;
    text-shadow: 0 1px 0 #fff5c280;
    transition: box-shadow 180ms ease, filter 180ms ease;
}

#world-is-open-popup .world-is-open-popup__register:hover,
#world-is-open-popup .world-is-open-popup__register:focus-visible {
    color: #241700;
    filter: brightness(1.08);
    box-shadow: inset 0 2px 0 #fff8d6, inset 0 -2px 0 #b97616,
        0 4px 0 #835011, 0 0 22px #ffcc4dcc, 0 0 52px #ffb92399, 0 10px 70px #ffb92355;
}

@media (prefers-reduced-motion: reduce) {
    #world-is-open-popup .world-is-open-popup__register {
        transition: none;
    }
}

#world-is-open-popup :focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

@media (max-width: 480px) {
    #world-is-open-popup {
        border-radius: 14px;
        padding: 0 8px;
    }

    #world-is-open-popup .world-is-open-popup__heading {
        font-size: 11px;
        letter-spacing: 1px;
    }

    #world-is-open-popup .world-is-open-popup__footer {
        padding-right: 12px;
        padding-left: 12px;
    }
}