/* Shared site background shell.
 *
 * 默认（窄屏）：body 整页渐变；.background-gradient 隐藏。
 * 桌面（≥768px）：body 透明 + fixed 视口渐变层。
 *
 * 例外：仅首页（body.home-page）桌面端可在页面 CSS 中关闭渐变、改用纯色（见 index.html）。
 *
 * html 使用 --site-background-fallback 兜底 overscroll（由 JS 从 body 同步 token）。
 */

html.site-fixed-background,
body.site-background-shell {
    width: 100%;
    max-width: 100%;
    min-height: 100%;
    overflow-x: hidden;
}

html.site-fixed-background {
    background-color: var(--site-background-fallback, #333);
    background-image: none;
}

/**
 * 仅 index 首页：html 加 class="home-page-root"，铺底不依赖 :has()（Chrome 杀进程恢复、自动刷新后
 * :has(body.home-page) 可能晚一帧，html 会先落到上面 #333、body 落到 #6f6f6f，整页像「灰屏」）。
 * 与 body.home-page 成对出现，其它页面勿加 home-page-root。
 */
html.site-fixed-background.home-page-root {
    background-color: #181818 !important;
    --site-background-fallback: #181818;
    --site-background-underlay: #181818;
}

html.site-fixed-background body.home-page.site-background-shell {
    --site-background-fallback: #181818;
    --site-background-underlay: #181818;
    --site-background-image: none;
    background-color: #181818 !important;
    background-image: none !important;
}

html.site-fixed-background body.home-page.site-background-shell .background-gradient {
    display: none !important;
}

body.site-background-shell {
    --bs-body-bg: transparent;
    background-color: var(--site-background-underlay, #6f6f6f) !important;
    background-image: var(--site-background-image, var(--primary-gradient, linear-gradient(135deg, #333 0%, #ddd 100%))) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    background-attachment: scroll !important;
    position: relative;
}

body.site-background-shell .background-gradient {
    display: none !important;
}

body.site-background-shell > *:not(.background-gradient):not(.nav-toggle):not(.nav-menu):not(.lang-switch):not(#floating-terms-button):not(#modal-container):not(.modal-overlay) {
    position: relative;
    z-index: 1;
}

body.site-background-shell .nav-menu,
body.site-background-shell .modal {
    inset: 0;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: 100lvh;
    height: auto;
}

body.site-background-shell #modal-container {
    position: relative;
    z-index: 1200;
    isolation: isolate;
}

@media (min-width: 768px) {
    body.site-background-shell {
        background-image: none !important;
        background-color: transparent !important;
    }

    body.site-background-shell .background-gradient {
        display: block !important;
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        min-height: 100vh;
        min-height: 100dvh;
        min-height: 100lvh;
        min-height: -webkit-fill-available;
        z-index: 0;
        pointer-events: none;
        background-color: var(--site-background-underlay, #6f6f6f);
        background-image: var(--site-background-image, var(--primary-gradient, linear-gradient(135deg, #333 0%, #ddd 100%)));
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center center;
        transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        isolation: isolate;
        contain: paint;
    }
}