/*
 * Smooth generated obsidian surface for authentication and modal panels.
 * The source image is intentionally rendered as one cover layer: never tile it.
 */
body.rakion-eternal {
    --rk-modal-surface: url('/assets/silkroad/images/modal-surface-v3.webp');
}

body.rakion-eternal.portal-auth-page .auth-card,
body.rakion-eternal .cash-checkout-panel,
body.rakion-eternal.portal-player-page .am-box,
body.rakion-eternal .am-dialog .amd-box,
body.rakion-eternal .ti-detail.is-modal {
    background-color: #101419 !important;
    background-image:
        linear-gradient(rgba(3, 6, 8, .08), rgba(3, 6, 8, .08)),
        var(--rk-modal-surface) !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: center, center !important;
    background-size: cover, cover !important;
}

/* Keep large auth panels quiet enough for labels and form controls. */
body.rakion-eternal.portal-auth-page .auth-card {
    box-shadow:
        0 24px 70px rgba(0, 0, 0, .72),
        inset 0 1px rgba(255, 255, 255, .035);
}

/* Modal surfaces sit closer to the viewer, so their edge needs a little more separation. */
body.rakion-eternal .cash-checkout-panel,
body.rakion-eternal.portal-player-page .am-box,
body.rakion-eternal .am-dialog .amd-box,
body.rakion-eternal .ti-detail.is-modal {
    box-shadow:
        0 28px 78px rgba(0, 0, 0, .76),
        inset 0 1px rgba(255, 255, 255, .04);
}

@media (max-width: 640px) {
    body.rakion-eternal.portal-auth-page .auth-card,
    body.rakion-eternal .cash-checkout-panel,
    body.rakion-eternal.portal-player-page .am-box,
    body.rakion-eternal .am-dialog .amd-box,
    body.rakion-eternal .ti-detail.is-modal {
        background-position: 50% 42%, center !important;
    }
}