/* VOID GACHA — 全站神殿星空底圖（images/gacha/bg.jpg） */

:root {
    --void-cosmic-bg-url: url('../images/gacha/bg.jpg?v=3');
    --void-cosmic-bg-color: #060613;
    --panel: rgba(0, 0, 0, 0.6);
    --void-glass-bg: linear-gradient(
        155deg,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.58) 48%,
        rgba(0, 0, 0, 0.52) 100%
    );
}

html {
    min-height: 100%;
    background-color: var(--void-cosmic-bg-color);
}

/* 固定底圖層（z-index 0 + body 1，避免負 z-index 被畫到畫布外） */
html::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--void-cosmic-bg-url);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    image-rendering: auto;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

html::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.04);
}

body {
    position: relative;
    z-index: 1;
    background: transparent !important;
}

body::before,
body::after,
#screen-app::after,
#screen-auth::before {
    display: none !important;
}

#screen-app,
#screen-auth,
.view-panel,
.home-arena,
.missions-view,
.market-view,
.friends-view,
.leaderboard-view,
.playground-view,
.profile-view,
.bag-view,
.catalog-view,
.gacha-view.view-panel {
    background: transparent !important;
}

#screen-app {
    position: relative;
    z-index: 1;
}

#screen-auth {
    background: transparent !important;
}

/* 首頁極光與 home-arena 光暈會蓋住神殿底圖，維持關閉 */
.home-aurora,
.home-aurora-2,
.home-aurora-3 {
    opacity: 0 !important;
    animation: none !important;
}

.home-arena::before {
    display: none !important;
}

.profile-arena-base {
    background: transparent !important;
}

.profile-arena-glow {
    opacity: 0.4;
}

.gacha-holo-wall::before {
    background:
        radial-gradient(ellipse 55% 70% at 0% 50%, rgba(127, 0, 255, 0.16), transparent 58%),
        radial-gradient(ellipse 55% 70% at 100% 50%, rgba(255, 0, 128, 0.12), transparent 58%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.48)) !important;
}

.gacha-hub--machine:has(.summon-chamber) {
    background: transparent !important;
}

#leaderboard-panel,
#friends-panel,
#market-panel,
.missions-eng,
.showcase-arena,
.task-card,
.eng-task-card,
.auth-box,
.panel-card,
.pool-card,
.machine-pool-tabs,
.zone-card.battle-zone,
.adventure-picker,
.missions-section,
#achieve-list.panel-card {
    background: rgba(0, 0, 0, 0.6) !important;
}

.eng-task-card {
    background: rgba(0, 0, 0, 0.55) !important;
}

.showcase-arena {
    background: rgba(0, 0, 0, 0.58) !important;
}

#pull-overlay {
    background: transparent !important;
}

.pc-void-bg {
    background-color: var(--void-cosmic-bg-color);
    background-image: var(--void-cosmic-bg-url) !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

.pc-void-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    pointer-events: none;
}

.hero-welcome {
    background: transparent !important;
}

.summon-chamber__bg {
    background-color: var(--void-cosmic-bg-color);
    background-image: var(--void-cosmic-bg-url) !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

@media (prefers-reduced-motion: reduce) {
    html::before,
    .summon-chamber__bg,
    .pc-void-bg {
        background-attachment: scroll !important;
    }
}

/* 手機：固定背景易錯位／露出色帶 */
@media (max-width: 720px) {
    html::before,
    .summon-chamber__bg,
    .pc-void-bg {
        background-attachment: scroll !important;
        background-position: center top !important;
    }

    #market-panel,
    .missions-section,
    .missions-eng {
        background: rgba(8, 10, 24, 0.94) !important;
    }
}
