.kingdom-purchase-backdrop {
    position: fixed;
    inset: 0;
    z-index: 12000;

    display: grid;
    place-items: center;

    padding:
        max(20px, env(safe-area-inset-top))
        max(18px, env(safe-area-inset-right))
        max(20px, env(safe-area-inset-bottom))
        max(18px, env(safe-area-inset-left));

    background:
        rgba(2, 8, 15, 0.68);

    backdrop-filter:
        blur(3px);
}

.kingdom-purchase-backdrop[hidden] {
    display: none;
}


.kingdom-purchase-panel {
    position: relative;

    width:
        min(680px, 100%);

    max-height:
        min(880px, calc(100dvh - 40px));

    overflow:
        auto;

    border:
        1px solid
        rgba(220, 181, 83, 0.92);

    border-radius:
        18px;

    background:
        linear-gradient(
            180deg,
            rgba(13, 28, 42, 0.985),
            rgba(5, 18, 30, 0.995)
        );

    box-shadow:
        0 28px 90px
        rgba(0, 0, 0, 0.62),
        inset 0 0 0 3px
        rgba(202, 160, 57, 0.08);

    color:
        #f3ead6;
}


.kingdom-purchase-panel::before {
    content: "";

    position: absolute;
    inset: 7px;

    pointer-events: none;

    border:
        1px solid
        rgba(207, 165, 62, 0.24);

    border-radius:
        12px;
}


.kingdom-purchase-panel__close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 5;

    width: 46px;
    height: 46px;

    border:
        1px solid
        rgba(225, 190, 100, 0.72);

    border-radius:
        50%;

    background:
        rgba(5, 15, 26, 0.92);

    color:
        #f5ead2;

    font:
        400 30px/1 system-ui, sans-serif;

    cursor:
        pointer;
}


.kingdom-purchase-panel__preview {
    height:
        clamp(190px, 31vh, 330px);

    display: grid;
    place-items: center;

    overflow: hidden;

    border-radius:
        17px 17px 0 0;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(35, 74, 86, 0.65),
            rgba(7, 21, 34, 0.96)
        );
}


.kingdom-purchase-panel__preview img {
    display: block;

    max-width:
        78%;

    max-height:
        82%;

    object-fit:
        contain;

    filter:
        drop-shadow(
            0 16px 18px
            rgba(0, 0, 0, 0.5)
        );
}


.kingdom-purchase-panel__content {
    position: relative;

    padding:
        26px
        clamp(22px, 5vw, 46px)
        30px;

    text-align:
        center;
}


.kingdom-purchase-panel__ornament {
    display: grid;

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

    align-items:
        center;

    gap:
        12px;

    max-width:
        300px;

    margin:
        0 auto 8px;

    color:
        #d9ab3d;

    font-size:
        21px;
}


.kingdom-purchase-panel__ornament span {
    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(218, 173, 67, 0.85)
        );
}


.kingdom-purchase-panel__ornament span:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(218, 173, 67, 0.85),
            transparent
        );
}


.kingdom-purchase-panel h2 {
    margin:
        0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(32px, 6vw, 48px);

    font-weight:
        600;

    letter-spacing:
        -0.02em;

    color:
        #f4ead4;

    text-shadow:
        0 2px 16px
        rgba(0, 0, 0, 0.5);
}


.kingdom-purchase-panel__description {
    max-width:
        520px;

    margin:
        16px auto 24px;

    color:
        rgba(240, 232, 214, 0.84);

    font:
        400 17px/1.55
        system-ui,
        sans-serif;
}


.kingdom-purchase-panel__economy {
    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items:
        center;

    gap:
        18px;

    padding:
        16px 18px;

    border:
        1px solid
        rgba(159, 178, 187, 0.42);

    border-radius:
        12px;

    background:
        rgba(1, 10, 18, 0.34);
}


.kingdom-purchase-panel__economy div {
    display: grid;

    gap:
        5px;
}


.kingdom-purchase-panel__economy small {
    color:
        rgba(240, 232, 214, 0.72);

    font-size:
        14px;
}


.kingdom-purchase-panel__economy strong {
    color:
        #f0d27d;

    font-size:
        25px;
}


.kingdom-purchase-panel__economy strong.is-short {
    color:
        #ff6666;
}


.kingdom-purchase-panel__divider {
    width:
        1px;

    height:
        54px;

    background:
        rgba(205, 218, 222, 0.28);
}


.kingdom-purchase-panel__notice {
    display: flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    margin-top:
        14px;

    padding:
        11px 14px;

    border-radius:
        10px;

    font-size:
        14px;
}


.kingdom-purchase-panel__notice p {
    margin:
        0;
}


.kingdom-purchase-panel__notice--warning {
    border:
        1px solid
        rgba(211, 67, 67, 0.85);

    background:
        rgba(114, 21, 27, 0.48);

    color:
        #ffd8d8;
}


.kingdom-purchase-panel__notice--success {
    border:
        1px solid
        rgba(101, 169, 118, 0.7);

    background:
        rgba(29, 87, 54, 0.4);

    color:
        #d7f2dd;
}


.kingdom-purchase-panel__primary {
    width:
        100%;

    min-height:
        58px;

    margin-top:
        14px;

    border:
        1px solid
        rgba(224, 184, 83, 0.86);

    border-radius:
        11px;

    background:
        linear-gradient(
            180deg,
            #d7ad42,
            #a87818
        );

    color:
        #12100a;

    font:
        700 18px/1.2
        system-ui,
        sans-serif;

    cursor:
        pointer;

    box-shadow:
        inset 0 1px 0
        rgba(255, 245, 198, 0.35),
        0 8px 22px
        rgba(0, 0, 0, 0.24);
}


.kingdom-purchase-panel__primary:disabled {
    border-color:
        rgba(175, 181, 184, 0.28);

    background:
        linear-gradient(
            180deg,
            #596168,
            #3a4147
        );

    color:
        rgba(235, 238, 239, 0.42);

    cursor:
        not-allowed;

    box-shadow:
        none;
}


.kingdom-purchase-panel__alternatives {
    display: grid;

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

    gap:
        10px;

    margin-top:
        12px;
}


.kingdom-purchase-panel__alternatives button,
.kingdom-purchase-panel__cancel {
    min-height:
        54px;

    border:
        1px solid
        rgba(111, 146, 163, 0.52);

    border-radius:
        10px;

    background:
        rgba(20, 52, 72, 0.78);

    color:
        #ecf4f6;

    cursor:
        pointer;
}


.kingdom-purchase-panel__alternatives button {
    display: grid;

    place-content:
        center;

    gap:
        2px;
}


.kingdom-purchase-panel__alternatives button small {
    opacity:
        0.66;
}


.kingdom-purchase-panel__alternatives button:disabled {
    opacity:
        0.46;

    cursor:
        not-allowed;
}


.kingdom-purchase-panel__buy-crowns {
    grid-column:
        1 / -1;

    border-color:
        rgba(221, 177, 63, 0.65)
        !important;

    background:
        rgba(135, 93, 19, 0.72)
        !important;
}


.kingdom-purchase-panel__cancel {
    width:
        min(270px, 100%);

    margin-top:
        18px;

    background:
        transparent;
}


@media (
    max-width: 640px
) {
    .kingdom-purchase-backdrop {
        align-items:
            end;

        padding:
            0;
    }


    .kingdom-purchase-panel {
        width:
            100%;

        max-height:
            calc(
                100dvh
                - env(safe-area-inset-top)
            );

        border-radius:
            18px 18px 0 0;
    }


    .kingdom-purchase-panel__preview {
        height:
            min(230px, 30vh);
    }


    .kingdom-purchase-panel__content {
        padding:
            22px
            18px
            max(
                22px,
                env(safe-area-inset-bottom)
            );
    }


    .kingdom-purchase-panel__description {
        font-size:
            15px;
    }


    .kingdom-purchase-panel__economy {
        padding:
            13px 12px;
    }


    .kingdom-purchase-panel__economy strong {
        font-size:
            21px;
    }
}