.world-map-button {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 6200;

    display: inline-flex;
    align-items: center;
    gap: 0.5rem;

    min-height: 2.8rem;
    padding: 0.65rem 1rem;

    border:
        1px solid
        rgba(185, 205, 255, 0.45);

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            rgba(14, 20, 46, 0.96),
            rgba(57, 27, 82, 0.96)
        );

    color: #f7f4ff;

    font: inherit;
    font-weight: 700;

    box-shadow:
        0 0.8rem 2.4rem
        rgba(0, 0, 0, 0.4);

    cursor: pointer;
}


.world-map {
    position: fixed;
    inset: 0;
    z-index: 9500;
}


.world-map__backdrop {
    position: absolute;
    inset: 0;

    background:
        rgba(1, 4, 14, 0.76);

    backdrop-filter:
        blur(10px);
}


.world-map__panel {
    position: absolute;

    left: 50%;
    top: 50%;

    width:
        min(
            92vw,
            52rem
        );

    max-height: 84vh;

    transform:
        translate(
            -50%,
            -50%
        );

    overflow: auto;

    padding: 1.25rem;

    border:
        1px solid
        rgba(181, 196, 255, 0.36);

    border-radius: 1.4rem;

    background:
        radial-gradient(
            circle at 20% 0%,
            rgba(105, 72, 160, 0.28),
            transparent 45%
        ),
        linear-gradient(
            160deg,
            #0a1024,
            #120b20 70%
        );

    color: #f7f4ff;

    box-shadow:
        0 2rem 6rem
        rgba(0, 0, 0, 0.62);
}


.world-map__header {
    display: flex;
    align-items: flex-start;
    justify-content:
        space-between;
    gap: 1rem;
}


.world-map__header small {
    color: #aebbf2;
}


.world-map__header h2 {
    margin:
        0.15rem 0 0;

    font-size:
        clamp(
            1.8rem,
            5vw,
            3rem
        );
}


.world-map__close {
    border: 0;
    background: transparent;
    color: white;

    font-size: 2rem;
    line-height: 1;

    cursor: pointer;
}


.world-map__intro {
    color: #c7cbe2;

    max-width: 42rem;

    line-height: 1.55;
}


.world-map__areas {
    display: grid;
    gap: 0.9rem;

    margin-top: 1.2rem;
}


.world-map__area {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 1rem;

    padding: 1rem;

    border:
        1px solid
        rgba(180, 198, 255, 0.18);

    border-radius: 1rem;

    background:
        rgba(255, 255, 255, 0.045);
}


.world-map__area.is-current {
    border-color:
        rgba(191, 145, 255, 0.62);

    background:
        rgba(131, 80, 185, 0.14);
}


.world-map__area.is-locked {
    opacity: 0.52;
}


.world-map__area h3 {
    margin:
        0.2rem 0 0.35rem;
}


.world-map__area small {
    color: #aebbf2;
}


.world-map__area p {
    margin: 0;

    color: #bec3d9;

    line-height: 1.45;
}


.world-map__area button {
    min-width: 7rem;

    padding:
        0.65rem
        0.9rem;

    border:
        1px solid
        rgba(185, 205, 255, 0.42);

    border-radius: 0.75rem;

    background:
        rgba(128, 92, 192, 0.2);

    color: #fff;

    font: inherit;
    font-weight: 700;

    cursor: pointer;
}


.world-map__area button:disabled {
    cursor: default;

    opacity: 0.56;
}


@media (max-width: 640px) {
    .world-map__area {
        grid-template-columns:
            1fr;
    }

    .world-map__area button {
        width: 100%;
    }
}


/* =========================================================
   QueenK fantasy world map
   ========================================================= */

.world-map-overlay,
.queenk-world-map {
    position: fixed !important;
    inset: 0 !important;

    z-index: 9600 !important;

    width: 100vw !important;
    height: 100vh !important;

    padding: clamp(1rem, 3vw, 3rem) !important;

    overflow: auto;

    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(69, 64, 105, 0.42),
            transparent 32rem
        ),
        linear-gradient(
            rgba(3, 11, 18, 0.80),
            rgba(2, 8, 12, 0.94)
        ),
        url("/assets/images/ancient-gate/gate-00-ruined.webp")
        center / cover no-repeat !important;
}


.world-map-overlay::before,
.queenk-world-map::before {
    content: "";

    position: fixed;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 50% 50%,
            transparent 20%,
            rgba(0, 0, 0, 0.68) 100%
        );
}


.world-map-overlay > *,
.queenk-world-map > * {
    position: relative;
    z-index: 1;
}


[data-map-areas] {
    position: relative;

    display: block !important;

    width: min(1100px, 94vw);
    min-height: 620px;

    margin:
        2rem
        auto;

    border:
        1px solid
        rgba(186, 209, 229, 0.28);

    border-radius:
        2rem;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(14, 44, 38, 0.86),
            rgba(14, 25, 42, 0.90)
        );

    box-shadow:
        0 2rem 6rem
        rgba(0, 0, 0, 0.55);
}


[data-map-areas]::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0.45;

    background:
        radial-gradient(
            ellipse at 18% 76%,
            rgba(52, 109, 56, 0.8),
            transparent 25%
        ),
        radial-gradient(
            ellipse at 50% 48%,
            rgba(73, 106, 99, 0.7),
            transparent 22%
        ),
        radial-gradient(
            ellipse at 80% 24%,
            rgba(45, 74, 91, 0.8),
            transparent 24%
        );
}


/*
 * The road connecting discovered QueenK locations.
 */
[data-map-areas]::after {
    content: "";

    position: absolute;

    left: 17%;
    top: 23%;

    width: 66%;
    height: 54%;

    border:
        5px dashed
        rgba(213, 184, 119, 0.42);

    border-left-color:
        transparent;

    border-bottom-color:
        transparent;

    border-radius:
        50%;

    transform:
        rotate(-9deg);

    pointer-events: none;
}


[data-map-areas] > * {
    position: absolute !important;

    width:
        clamp(
            13rem,
            24vw,
            19rem
        ) !important;

    min-height:
        8.5rem;

    padding:
        1rem !important;

    border:
        1px solid
        rgba(210, 229, 238, 0.32) !important;

    border-radius:
        1.25rem !important;

    backdrop-filter:
        blur(9px);

    background:
        rgba(4, 18, 23, 0.82) !important;

    box-shadow:
        0 1rem 3rem
        rgba(0, 0, 0, 0.35);

    transition:
        transform 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease;
}


[data-map-areas] > *:hover {
    transform:
        translateY(-4px)
        scale(1.015);

    border-color:
        rgba(125, 224, 255, 0.75) !important;

    box-shadow:
        0 1.2rem 3.5rem
        rgba(0, 0, 0, 0.45),
        0 0 1.8rem
        rgba(76, 182, 220, 0.15);
}


/* Ancient Gate */
[data-map-areas] > :nth-child(1) {
    left: 8%;
    bottom: 10%;
}


/* Moon Courtyard */
[data-map-areas] > :nth-child(2) {
    left: 39%;
    top: 34%;
}


/* Dragon Roost */
[data-map-areas] > :nth-child(3) {
    right: 7%;
    top: 9%;
}


@media (max-width: 700px) {
    [data-map-areas] {
        min-height:
            auto;

        padding:
            1rem;

        display:
            grid !important;

        gap:
            1rem;
    }


    [data-map-areas]::after {
        display: none;
    }


    [data-map-areas] > * {
        position:
            relative !important;

        inset:
            auto !important;

        width:
            100% !important;
    }
}