/* VOID · 全站選項 — 宇宙紫粉玻璃 + 左右極光光效（對齊召喚大廳） */

:root {
    --void-glass-bg: linear-gradient(
        155deg,
        rgba(34, 14, 68, 0.58) 0%,
        rgba(16, 10, 36, 0.65) 48%,
        rgba(22, 8, 48, 0.6) 100%
    );
    --void-glass-border: rgba(163, 112, 247, 0.42);
    --void-glass-blur: blur(14px);
    --void-glow-purple: rgba(127, 0, 255, 0.4);
    --void-glow-magenta: rgba(255, 0, 128, 0.32);
    --void-glow-cyan: rgba(0, 255, 255, 0.2);
    --void-glass-shadow:
        0 8px 32px rgba(0, 0, 0, 0.42),
        0 0 26px rgba(127, 0, 255, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --panel: rgba(18, 12, 36, 0.72);
}

/* —— 全頁左右極光底景 —— */
body::before {
    background:
        radial-gradient(ellipse 58% 78% at 0% 50%, rgba(127, 0, 255, 0.34), transparent 62%),
        radial-gradient(ellipse 58% 78% at 100% 50%, rgba(255, 0, 128, 0.28), transparent 60%),
        radial-gradient(ellipse 72% 48% at 50% -12%, rgba(127, 0, 255, 0.2), transparent),
        radial-gradient(ellipse 55% 38% at 50% 108%, rgba(0, 255, 255, 0.12), transparent);
    animation: voidPageAurora 22s ease-in-out infinite alternate;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.4;
    background: repeating-linear-gradient(
        105deg,
        transparent 0,
        transparent 52px,
        rgba(255, 255, 255, 0.016) 52px,
        rgba(255, 255, 255, 0.016) 53px
    );
}

#screen-app::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 48% 72% at -8% 48%, rgba(127, 0, 255, 0.24), transparent 58%),
        radial-gradient(ellipse 48% 72% at 108% 52%, rgba(255, 0, 128, 0.2), transparent 56%),
        radial-gradient(ellipse 35% 30% at 50% 8%, rgba(0, 255, 255, 0.08), transparent 55%);
    animation: voidSideBloom 16s ease-in-out infinite alternate;
}

@keyframes voidPageAurora {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0.92; transform: scale(1.03); }
}

@keyframes voidSideBloom {
    0% { opacity: 0.75; filter: blur(0); }
    100% { opacity: 1; filter: blur(2px); }
}

@keyframes voidOptGlowBreath {
    0% { opacity: 0.55; }
    100% { opacity: 0.92; }
}

/* —— 選項表面：玻璃底 + 邊框光暈（頂欄 fixed 見 app.css，勿設 position:relative） —— */
.pack-tile,
.summon-pillar__pedestal,
.gacha-banner-sidebar,
.gacha-banner-tile,
.machine-pool-tabs,
.machine-pool-tab,
.gacha-util-btn,
.summon-btn,
.panel-card,
.pool-card,
.stat-chip,
.task-card,
.zone-card.battle-zone,
.market-view .market-intro,
.market-tab,
.market-filter-btn,
.market-card-tile,
.market-dur-opt,
.friends-row,
.lb-tab,
#catalog-filter,
.mission-refresh-btn,
.gacha-hub,
.profile-card,
.auth-tabs,
.auth-tab {
    position: relative;
    isolation: isolate;
    border-color: var(--void-glass-border);
    backdrop-filter: var(--void-glass-blur) saturate(1.12);
    -webkit-backdrop-filter: var(--void-glass-blur) saturate(1.12);
}

.app-header,
.panel-card,
.pool-card,
.machine-pool-tabs,
.gacha-banner-sidebar,
.market-view .market-intro {
    background: var(--void-glass-bg);
    box-shadow: var(--void-glass-shadow);
}

.pack-tile {
    background: rgba(8, 6, 20, 0.55);
    box-shadow:
        var(--void-glass-shadow),
        var(--pack-glow, 0 4px 20px rgba(0, 0, 0, 0.55));
}

.pack-tile.active {
    box-shadow:
        0 0 32px rgba(255, 215, 0, 0.5),
        0 0 52px rgba(255, 0, 85, 0.3),
        0 0 24px rgba(127, 0, 255, 0.25),
        var(--pack-glow, none);
}

.summon-pillar__pedestal {
    background: var(--void-glass-bg);
    border-color: rgba(180, 120, 255, 0.35);
    box-shadow:
        var(--void-glass-shadow),
        0 8px 24px rgba(0, 0, 0, 0.55),
        inset 0 0 24px rgba(127, 0, 255, 0.12);
}

.summon-pillar.is-active .summon-pillar__pedestal {
    box-shadow:
        0 0 32px var(--pillar-glow, rgba(168, 85, 247, 0.55)),
        0 0 48px rgba(127, 0, 255, 0.25),
        inset 0 0 28px rgba(255, 215, 0, 0.14);
}

.gacha-banner-sidebar {
    border-right-color: rgba(163, 112, 247, 0.35);
}

.gacha-banner-tile {
    background: rgba(24, 12, 48, 0.45);
    border-color: rgba(163, 112, 247, 0.28);
    overflow: hidden;
}

.gacha-banner-tile:hover {
    border-color: rgba(192, 132, 252, 0.5);
    box-shadow: 0 0 16px rgba(127, 0, 255, 0.3);
}

.gacha-banner-tile.active {
    background: linear-gradient(160deg, rgba(80, 30, 140, 0.55), rgba(30, 10, 60, 0.7));
    border-color: rgba(255, 215, 0, 0.65);
    box-shadow:
        0 0 22px rgba(255, 215, 0, 0.38),
        0 0 32px rgba(127, 0, 255, 0.28);
}

.machine-pool-tabs {
    background: rgba(8, 6, 22, 0.55);
    border-color: rgba(0, 255, 255, 0.28);
    box-shadow:
        var(--void-glass-shadow),
        inset 0 0 28px rgba(127, 0, 255, 0.12);
}

.machine-pool-tab {
    background: var(--void-glass-bg);
    border-color: rgba(163, 112, 247, 0.3);
    overflow: hidden;
}

.machine-pool-tab:hover {
    border-color: rgba(0, 255, 255, 0.5);
    box-shadow: 0 0 22px rgba(127, 0, 255, 0.45);
}

.machine-pool-tab.is-active {
    background: linear-gradient(160deg, rgba(70, 24, 110, 0.75), rgba(22, 8, 44, 0.88));
    box-shadow:
        0 0 26px rgba(255, 0, 180, 0.35),
        0 0 36px rgba(127, 0, 255, 0.25),
        inset 0 0 18px rgba(255, 215, 0, 0.1);
}

.task-card,
.friends-row,
.market-card-tile {
    background: var(--void-glass-bg);
    box-shadow: var(--void-glass-shadow);
    overflow: hidden;
}

.zone-card.battle-zone {
    border-color: rgba(163, 112, 247, 0.35);
    box-shadow: var(--void-glass-shadow);
}

.zone-card-inner {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.stat-chip {
    background: var(--void-glass-bg);
    border: 1px solid rgba(163, 112, 247, 0.35);
    box-shadow: 0 0 14px rgba(127, 0, 255, 0.15);
}

.market-tab,
.market-filter-btn,
.lb-tab,
.market-dur-opt {
    background: rgba(14, 10, 32, 0.55);
    overflow: hidden;
}

.market-tab.active,
.market-filter-btn.active,
.lb-tab.active {
    background: linear-gradient(135deg, rgba(127, 0, 255, 0.48), rgba(255, 0, 128, 0.26));
    border-color: rgba(192, 132, 252, 0.55);
    box-shadow: 0 0 20px rgba(127, 0, 255, 0.35);
}

.market-view .market-intro {
    border-color: rgba(163, 112, 247, 0.38);
}

.gacha-hub {
    background: var(--void-glass-bg);
    border: 1px solid rgba(163, 112, 247, 0.35);
    box-shadow: var(--void-glass-shadow);
}

.profile-card {
    background: var(--void-glass-bg);
    border-color: rgba(163, 112, 247, 0.38);
    box-shadow: var(--void-glass-shadow);
}

.auth-tabs {
    background: rgba(8, 6, 22, 0.55);
    border: 1px solid rgba(163, 112, 247, 0.3);
    box-shadow: inset 0 0 20px rgba(127, 0, 255, 0.1);
}

.auth-tab.active {
    box-shadow:
        0 0 18px rgba(127, 0, 255, 0.35),
        0 0 28px rgba(255, 0, 128, 0.15);
}

.mission-refresh-btn {
    background: var(--void-glass-bg);
    border: 1px solid rgba(163, 112, 247, 0.35);
}

.gacha-util-btn {
    background: rgba(20, 12, 40, 0.55);
    border-color: rgba(163, 112, 247, 0.35);
}

.gacha-util-btn:hover {
    border-color: rgba(255, 215, 0, 0.5);
    box-shadow: 0 0 18px rgba(127, 0, 255, 0.4);
}

.summon-btn--single:not(.mythic-summon-btn),
.summon-btn--ten:not(.mythic-summon-btn) {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

#catalog-filter,
.catalog-search-input,
.catalog-search-suggest {
    background: var(--void-glass-bg);
    border: 1px solid var(--void-glass-border);
    box-shadow: var(--void-glass-shadow);
}

.catalog-search-suggest {
    backdrop-filter: var(--void-glass-blur) saturate(1.12);
    -webkit-backdrop-filter: var(--void-glass-blur) saturate(1.12);
}

/* —— 內層左右極光（::after） —— */
.pack-tile::after,
.gacha-banner-tile::after,
.machine-pool-tab::after,
.task-card::after,
.friends-row::after,
.market-card-tile::after,
.market-tab::after,
.market-filter-btn::after,
.lb-tab::after,
.stat-chip::after,
.panel-card::after,
.pool-card::after,
.zone-card.battle-zone::after,
.summon-pillar__pedestal::after,
.gacha-hub::after,
.profile-card::after,
.auth-tab::after,
.app-header::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 95% 85% at 0% 50%, var(--void-glow-purple), transparent 58%),
        radial-gradient(ellipse 90% 80% at 100% 50%, var(--void-glow-magenta), transparent 55%),
        radial-gradient(ellipse 65% 45% at 50% 0%, var(--void-glow-cyan), transparent 52%);
    opacity: 0.7;
    animation: voidOptGlowBreath 5.5s ease-in-out infinite alternate;
    mix-blend-mode: screen;
}

/* 子元素置於光層之上 */
.pack-foot,
.pack-art,
.gacha-banner-tile > *,
.machine-pool-tab > *,
.task-card > *,
.friends-row > *,
.market-card-tile > *,
.market-tab,
.lb-tab,
.stat-chip > *,
.panel-card > *,
.pool-card > *,
.zone-card-inner,
.summon-pillar__pedestal > *:not(.summon-pillar__aura) {
    position: relative;
    z-index: 1;
}

.pack-tile::before {
    z-index: 0;
}

.pack-tile::after {
    z-index: 2;
    mix-blend-mode: soft-light;
    opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
    body::before,
    #screen-app::after,
    .pack-tile::after,
    .gacha-banner-tile::after,
    .machine-pool-tab::after,
    .task-card::after,
    .friends-row::after,
    .market-card-tile::after,
    .market-tab::after,
    .market-filter-btn::after,
    .lb-tab::after,
    .stat-chip::after,
    .panel-card::after,
    .pool-card::after,
    .zone-card.battle-zone::after,
    .summon-pillar__pedestal::after,
    .app-header::after,
    .gacha-hub::after,
    .profile-card::after,
    .auth-tab::after {
        animation: none;
    }
}

.missions-coin-label,
.missions-coin strong {
    position: relative;
    z-index: 1;
}

/* 右側主選單：不套用玻璃極光，沿用 app.css 深色簡潔樣板 */
.side-nav,
.side-nav::after,
.nav-btn,
.nav-btn::after {
    animation: none !important;
}

.side-nav::after,
.nav-btn::after {
    content: none !important;
    display: none !important;
}

.side-nav {
    position: fixed;
    top: 0 !important;
    right: 0;
    bottom: 0 !important;
    transform: none !important;
    z-index: 120;
    isolation: auto;
    overflow: hidden;
    padding: var(--void-app-header-offset) 8px max(6px, env(safe-area-inset-bottom, 0px)) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: linear-gradient(180deg, rgba(12, 8, 28, 0.97), rgba(6, 10, 22, 0.98)) !important;
    border: 1px solid rgba(140, 100, 255, 0.35) !important;
    border-right: none !important;
    border-top: none !important;
    border-radius: 0 0 0 16px !important;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.45), inset 1px 0 0 rgba(255, 255, 255, 0.06) !important;
}

.nav-btn {
    position: static;
    isolation: auto;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: transparent !important;
    border: 1px solid transparent !important;
    overflow: visible;
}

.nav-btn:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.nav-btn.active {
    background: linear-gradient(145deg, rgba(127, 0, 255, 0.45), rgba(255, 0, 128, 0.25)) !important;
    border-color: rgba(192, 132, 252, 0.55) !important;
    box-shadow: 0 0 16px rgba(127, 0, 255, 0.35) !important;
}

@media (max-width: 720px) {
    .side-nav {
        top: auto !important;
        right: 0 !important;
        left: 0 !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 14px 14px 0 0 !important;
        border-right: 1px solid rgba(140, 100, 255, 0.35) !important;
    }

    /* 任務／市集／個人資料等：關閉 backdrop-filter，避免 Safari 邊框發光破圖 */
    .profile-card,
    .task-card,
    .eng-task-card,
    .missions-eng,
    .missions-coin,
    .monthly-task-card,
    .market-view .market-intro,
    #market-panel,
    .market-tab,
    .market-filter-btn,
    .market-card-tile,
    .zone-card.battle-zone {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .profile-card::after,
    .task-card::after,
    .eng-task-card::after,
    .market-tab::after,
    .market-filter-btn::after,
    .market-card-tile::after,
    .zone-card.battle-zone::after {
        display: none !important;
    }

    .profile-card,
    .eng-task-card,
    .missions-eng,
    .missions-coin,
    .market-view .market-intro,
    #market-panel,
    .market-tab,
    .market-filter-btn,
    .market-card-tile {
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.38);
        border: 1px solid rgba(140, 100, 255, 0.28);
    }

    .task-card,
    .monthly-task-card {
        box-shadow: none;
        border: 1px solid rgba(140, 100, 255, 0.22);
    }
}