/* User site solid background — loaded last so it always wins */
:root {
    --color-primary: #32174D;
    --color-primary-dark: #32174D;
    --color-primary-darker: #32174D;
    --color-primary-light: #32174D;
    --color-primary-lighter: #3d2060;
    --site-bg-0: #32174D;
    --site-bg-1: #32174D;
    --site-bg-2: #32174D;
    --site-panel: #32174D;
    --site-panel-2: #32174D;
    --site-panel-solid: #32174D;
    --site-ink: #ffffff;
}

html,
body,
.app-body,
.app-body-home,
.app-content,
.app-content-home,
main,
main.app-content,
main.app-content-home,
.wallet-topup-card,
.contact-page-card,
.profile-card,
.game-packages-card,
.home-games-section,
.home-quick-actions {
    background: #32174D !important;
    background-color: #32174D !important;
    background-image: none !important;
    color: #ffffff !important;
}

html::before,
html::after,
body::before,
body::after,
.app-body::before,
.app-body::after {
    display: none !important;
    content: none !important;
    background: none !important;
    opacity: 0 !important;
}

.toolbox,
.toolbox-inner,
.bottom-nav,
.bottom-nav-inner,
.bottom-nav::before,
.bottom-nav::after {
    background: #32174D !important;
    background-color: #32174D !important;
    background-image: none !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.wallet-topup-form input,
.wallet-topup-form select,
.game-order-fields input,
.contact-card,
.profile-menu-btn,
.home-quick-action,
.game-package-item,
.amount-preset,
.wallet-bank-card {
    background: #3a1c58 !important;
    color: #ffffff !important;
}

.game-packages-head {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
}

.game-packages-logo-wrap {
    width: 64px !important;
    height: 64px !important;
    max-width: 64px !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #32174D !important;
}

.game-packages-logo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Tap home logo/name: image recedes slightly, then go to shop page */
main.app-content-home .home-game-media,
main.app-content-home .home-game-logo {
    filter: none !important;
    transition: transform 0.12s ease !important;
}

main.app-content-home .home-game-link:hover .home-game-logo,
main.app-content-home .home-game-link:hover .home-game-media {
    filter: none !important;
    transform: none !important;
}

main.app-content-home .home-game-link:active .home-game-media {
    filter: none !important;
    transform: scale(0.92) !important;
}

main.app-content-home .home-game-link:active .home-game-logo {
    filter: none !important;
    transform: none !important;
}

/* Same spacing for browser link and installed web app */
.toolbox {
    padding-top: env(safe-area-inset-top, 0px) !important;
}

.app-body {
    padding-top: calc(48px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: var(--bottom-nav-space, calc(88px + env(safe-area-inset-bottom, 0px))) !important;
}

/* Safe-area only once (inner). Last game row must sit above the nav. */
.bottom-nav {
    padding-bottom: 0 !important;
}

.bottom-nav-inner {
    padding-top: 8px !important;
    padding-right: 10px !important;
    padding-left: 10px !important;
    padding-bottom: calc(8px + constant(safe-area-inset-bottom)) !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
}

.bottom-nav.is-keyboard .bottom-nav-inner {
    padding-bottom: 8px !important;
}

@media (max-width: 1023px) {
    main.app-content-home,
    .app-content-home {
        padding-bottom: 20px !important;
    }

    main.app-content-home .home-games-section,
    .home-games-section {
        padding-bottom: 16px !important;
        margin-bottom: 0 !important;
    }
}