.destination-rail {
    position: fixed;
    z-index: 9500;

    top:
        max(
            14px,
            calc(
                env(safe-area-inset-top)
                + 8px
            )
        );

    right:
        max(
            14px,
            calc(
                env(safe-area-inset-right)
                + 8px
            )
        );

    display: flex;
    gap: 8px;

    pointer-events: none;
}


.destination-rail__button {
    position: relative;

    display: grid;
    place-items: center;

    width: 46px;
    height: 46px;

    margin: 0;
    padding: 0;

    border:
        1px solid
        rgba(
            221,
            188,
            104,
            0.40
        );

    border-radius: 14px;

    background:
        rgba(
            7,
            14,
            24,
            0.88
        );

    color:
        rgba(
            245,
            237,
            215,
            0.94
        );

    box-shadow:
        0 10px 28px
        rgba(
            0,
            0,
            0,
            0.28
        );

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    cursor: pointer;

    pointer-events: auto;
}


.destination-rail__button:hover,
.destination-rail__button:focus-visible {
    border-color:
        rgba(
            231,
            193,
            90,
            0.88
        );

    background:
        rgba(
            18,
            31,
            48,
            0.96
        );
}


.destination-rail__button:focus-visible {
    outline:
        2px solid
        rgba(
            235,
            199,
            103,
            0.85
        );

    outline-offset:
        3px;
}


.destination-rail__icon {
    display: grid;
    place-items: center;

    width: 26px;
    height: 26px;
}


.destination-rail__icon svg {
    display: block;

    width: 100%;
    height: 100%;
}


.destination-rail__label {
    position: absolute;

    top: calc(100% + 7px);
    right: 0;

    padding:
        5px
        8px;

    border-radius:
        7px;

    background:
        rgba(
            5,
            10,
            18,
            0.94
        );

    color:
        #ffffff;

    font-size:
        0.68rem;

    font-weight:
        700;

    white-space:
        nowrap;

    opacity: 0;

    transform:
        translateY(-3px);

    pointer-events:
        none;

    transition:
        opacity 120ms ease,
        transform 120ms ease;
}


.destination-rail__button:hover
.destination-rail__label,
.destination-rail__button:focus-visible
.destination-rail__label {
    opacity: 1;

    transform:
        translateY(0);
}


.destination-rail__badge {
    position: absolute;

    top: -6px;
    right: -6px;

    display: grid;
    place-items: center;

    min-width: 20px;
    height: 20px;

    padding:
        0
        5px;

    border:
        2px solid
        #09111c;

    border-radius:
        999px;

    background:
        #d4a536;

    color:
        #09111c;

    font-size:
        0.66rem;

    font-weight:
        900;

    line-height:
        1;
}


.destination-rail__badge[hidden] {
    display: none;
}


/*
 * Kingdom owns the complete screen while open.
 * Its internal close control replaces the destination rail.
 */
body.queenk-kingdom-active
.destination-rail {
    visibility: hidden;
    pointer-events: none;
}


/* =========================================================
   Phone destination rail
   ========================================================= */

@media (max-width: 760px) {
    .destination-rail {
        top: 50%;
        right:
            max(
                7px,
                env(safe-area-inset-right)
            );

        flex-direction:
            column;

        gap: 9px;

        transform:
            translateY(-50%);
    }


    .destination-rail__button {
        width: 42px;
        height: 42px;

        border-radius:
            13px;

        background:
            rgba(
                5,
                12,
                22,
                0.76
            );
    }


    .destination-rail__icon {
        width: 24px;
        height: 24px;
    }


    /*
     * Tooltips would obstruct gameplay on touch screens.
     */
    .destination-rail__label {
        display: none;
    }
}

@media (min-width: 761px) {
    .destination-rail {
        top: 92px;
        right: 18px;

        flex-direction: column;
        gap: 10px;
    }
}


/* =========================================================
   Desktop destination labels
   ========================================================= */

@media (min-width: 761px) {
    .destination-rail__label {
        top: 50%;
        right: calc(100% + 10px);

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

        padding:
            6px
            9px;

        border:
            1px solid
            rgba(
                221,
                188,
                104,
                0.30
            );

        box-shadow:
            0 8px 22px
            rgba(
                0,
                0,
                0,
                0.34
            );
    }


    .destination-rail__button:hover
    .destination-rail__label,
    .destination-rail__button:focus-visible
    .destination-rail__label {
        transform:
            translate(
                0,
                -50%
            );
    }
}