/* ============================================================
   CENTRAL WALLPAPER — used by all pages.
   Themes in 4 categories: Signature · Nature · Night Sky · Live.

   Switch by adding body.theme-<id>. assets/scenic.js applies
   the saved choice from localStorage('msi_theme') automatically.
   Custom uploaded image uses CSS variable --msi-custom-bg.
   ============================================================ */

/* =====================================================================
   CATEGORY 1: SIGNATURE
   ===================================================================== */

/* OCEAN BLUE — default. Deep navy + cyan glows. */
body, body.theme-ocean {
    background:
        radial-gradient(ellipse 60% 50% at 15% 15%, rgba(99, 102, 241, 0.28), transparent 65%) fixed,
        radial-gradient(ellipse 60% 50% at 85% 85%, rgba(14, 165, 200, 0.22), transparent 65%) fixed,
        radial-gradient(ellipse 50% 35% at 50% 40%, rgba(56, 189, 248, 0.12), transparent 70%) fixed,
        linear-gradient(135deg, #0a1a2f 0%, #122a4a 25%, #1a3a5c 50%, #122a4a 75%, #0a1a2f 100%) fixed
        !important;
    background-color: #0f172a !important;
    background-repeat: no-repeat !important;
}

/* CUSTOM IMAGE — user-uploaded wallpaper.
   The actual url() comes from --msi-custom-bg (set by scenic.js
   after reading from localStorage). Fallback = ocean look.
   A dark translucent overlay layer is ALWAYS painted on top of the
   image so white text + icons stay readable regardless of which
   photo the user uploads. Adjust the 0.50 alpha to taste. */
body.theme-custom {
    background:
        linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.50)) fixed,
        var(--msi-custom-bg, none) center center / cover no-repeat fixed,
        linear-gradient(135deg, #0a1a2f, #122a4a, #0a1a2f) fixed
        !important;
    background-color: #0f172a !important;
}

/* =====================================================================
   CATEGORY 2: NATURE
   ===================================================================== */

/* GREEN HILLS — Windows XP "Bliss" inspired: bright green field + blue sky */
body.theme-hills {
    background:
        linear-gradient(rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.28)) fixed,
        radial-gradient(ellipse 100% 30% at 50% 100%, rgba(34, 197, 94, 0.55), transparent 70%) fixed,
        radial-gradient(ellipse 80% 25% at 50% 95%, rgba(22, 163, 74, 0.50), transparent 70%) fixed,
        radial-gradient(ellipse 50% 30% at 50% 85%, rgba(132, 204, 22, 0.30), transparent 70%) fixed,
        linear-gradient(180deg, #38bdf8 0%, #7dd3fc 40%, #bae6fd 60%, #22c55e 75%, #16a34a 100%) fixed
        !important;
    background-color: #38bdf8 !important;
    background-repeat: no-repeat !important;
}

/* MOUNTAIN MIST — layered blue mountains with soft mist */
body.theme-mountain {
    background:
        radial-gradient(ellipse 90% 25% at 50% 95%, rgba(15, 23, 42, 0.65), transparent 70%) fixed,
        radial-gradient(ellipse 70% 25% at 30% 80%, rgba(30, 58, 138, 0.45), transparent 65%) fixed,
        radial-gradient(ellipse 70% 25% at 70% 80%, rgba(67, 56, 202, 0.45), transparent 65%) fixed,
        radial-gradient(ellipse 60% 20% at 50% 75%, rgba(255, 255, 255, 0.10), transparent 70%) fixed,
        linear-gradient(180deg, #fde68a 0%, #fdba74 18%, #fb7185 32%, #818cf8 55%, #1e3a8a 80%, #0f172a 100%) fixed
        !important;
    background-color: #0f172a !important;
    background-repeat: no-repeat !important;
}

/* BEACH DAY — turquoise sea + golden sand + sky */
body.theme-beach {
    background:
        linear-gradient(rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.30)) fixed,
        radial-gradient(ellipse 80% 12% at 50% 95%, rgba(202, 138, 4, 0.55), transparent 70%) fixed,
        radial-gradient(ellipse 90% 25% at 50% 80%, rgba(14, 165, 233, 0.55), transparent 70%) fixed,
        radial-gradient(ellipse 60% 30% at 50% 60%, rgba(56, 189, 248, 0.35), transparent 70%) fixed,
        linear-gradient(180deg, #fef3c7 0%, #fde68a 18%, #7dd3fc 45%, #0891b2 75%, #fbbf24 95%) fixed
        !important;
    background-color: #fde68a !important;
    background-repeat: no-repeat !important;
}

/* AUTUMN FOREST — warm orange/red leaves vibe */
body.theme-autumn {
    background:
        radial-gradient(ellipse 60% 50% at 20% 25%, rgba(234, 88, 12, 0.50), transparent 60%) fixed,
        radial-gradient(ellipse 60% 50% at 80% 25%, rgba(217, 119, 6, 0.50), transparent 60%) fixed,
        radial-gradient(ellipse 70% 40% at 50% 80%, rgba(120, 53, 15, 0.55), transparent 65%) fixed,
        radial-gradient(ellipse 40% 25% at 50% 50%, rgba(251, 146, 60, 0.30), transparent 70%) fixed,
        linear-gradient(135deg, #2a1408 0%, #4a2310 35%, #6a3818 60%, #4a2310 85%, #2a1408 100%) fixed
        !important;
    background-color: #2a1408 !important;
    background-repeat: no-repeat !important;
}

/* SNOWY PINES — white snow + dark pine silhouettes */
body.theme-snowy {
    background:
        linear-gradient(rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.30)) fixed,
        radial-gradient(ellipse 90% 20% at 50% 100%, rgba(255, 255, 255, 0.95), transparent 70%) fixed,
        radial-gradient(ellipse 30% 50% at 20% 90%, rgba(15, 76, 50, 0.85), transparent 60%) fixed,
        radial-gradient(ellipse 25% 45% at 50% 88%, rgba(20, 83, 45, 0.85), transparent 60%) fixed,
        radial-gradient(ellipse 28% 48% at 80% 92%, rgba(15, 76, 50, 0.85), transparent 60%) fixed,
        radial-gradient(circle at 25% 25%, rgba(255,255,255,0.9) 1px, transparent 2px),
        radial-gradient(circle at 75% 35%, rgba(255,255,255,0.9) 1px, transparent 2px),
        radial-gradient(circle at 45% 15%, rgba(255,255,255,0.9) 1px, transparent 2px),
        linear-gradient(180deg, #1e293b 0%, #334155 40%, #94a3b8 70%, #e2e8f0 100%) fixed
        !important;
    background-size: auto, auto, auto, auto, 100px 100px, 130px 130px, 90px 90px, auto !important;
    background-color: #1e293b !important;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, repeat, no-repeat !important;
}

/* =====================================================================
   CATEGORY 3: NIGHT SKY
   ===================================================================== */

/* STARRY GALAXY — deep space with twinkling stars */
body.theme-galaxy {
    background:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,0.95) 1px, transparent 2px),
        radial-gradient(circle at 35% 60%, rgba(255,255,255,0.85) 1.5px, transparent 2.5px),
        radial-gradient(circle at 65% 30%, rgba(255,255,255,0.9) 1px, transparent 2px),
        radial-gradient(circle at 85% 75%, rgba(255,255,255,0.8) 1.5px, transparent 2.5px),
        radial-gradient(ellipse 60% 40% at 30% 30%, rgba(168, 85, 247, 0.30), transparent 60%) fixed,
        radial-gradient(ellipse 60% 40% at 75% 75%, rgba(99, 102, 241, 0.30), transparent 60%) fixed,
        linear-gradient(135deg, #0a0420 0%, #1a0838 35%, #0f0524 65%, #050210 100%) fixed
        !important;
    background-size: 90px 90px, 140px 140px, 110px 110px, 160px 160px, auto, auto, auto !important;
    background-color: #050210 !important;
    background-repeat: repeat, repeat, repeat, repeat, no-repeat, no-repeat, no-repeat !important;
}

/* NORTHERN LIGHTS — aurora ribbons */
body.theme-aurora {
    background:
        radial-gradient(ellipse 90% 30% at 50% 15%, rgba(16, 185, 129, 0.45), transparent 65%) fixed,
        radial-gradient(ellipse 80% 25% at 35% 30%, rgba(56, 189, 248, 0.40), transparent 65%) fixed,
        radial-gradient(ellipse 80% 25% at 65% 35%, rgba(168, 85, 247, 0.35), transparent 65%) fixed,
        radial-gradient(circle at 20% 80%, rgba(255,255,255,0.7) 1px, transparent 2px),
        radial-gradient(circle at 70% 85%, rgba(255,255,255,0.8) 1px, transparent 2px),
        linear-gradient(180deg, #050610 0%, #0a0e1a 50%, #0e1428 80%, #060710 100%) fixed
        !important;
    background-size: auto, auto, auto, 130px 130px, 110px 110px, auto !important;
    background-color: #050610 !important;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat !important;
}

/* PINK TWILIGHT — pink + purple sunset sky */
body.theme-twilight {
    background:
        linear-gradient(rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.28)) fixed,
        radial-gradient(circle at 25% 75%, rgba(255,255,255,0.85) 1px, transparent 2px),
        radial-gradient(circle at 75% 25%, rgba(255,255,255,0.7) 1px, transparent 2px),
        radial-gradient(ellipse 80% 40% at 50% 10%, rgba(236, 72, 153, 0.45), transparent 65%) fixed,
        radial-gradient(ellipse 70% 35% at 30% 60%, rgba(168, 85, 247, 0.40), transparent 65%) fixed,
        linear-gradient(180deg, #fbcfe8 0%, #f0abfc 15%, #c084fc 35%, #7c3aed 55%, #312e81 80%, #0c0a1f 100%) fixed
        !important;
    background-size: 150px 150px, 110px 110px, auto, auto, auto !important;
    background-color: #312e81 !important;
    background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat !important;
}

/* COSMIC NEBULA — magenta + cyan space clouds */
body.theme-nebula {
    background:
        radial-gradient(circle at 18% 22%, rgba(255,255,255,0.9) 1.5px, transparent 2.5px),
        radial-gradient(circle at 72% 68%, rgba(255,255,255,0.85) 1px, transparent 2px),
        radial-gradient(ellipse 60% 45% at 25% 30%, rgba(236, 72, 153, 0.55), transparent 60%) fixed,
        radial-gradient(ellipse 60% 45% at 75% 70%, rgba(56, 189, 248, 0.50), transparent 60%) fixed,
        radial-gradient(ellipse 50% 35% at 50% 50%, rgba(168, 85, 247, 0.35), transparent 65%) fixed,
        linear-gradient(135deg, #02010a 0%, #0a0420 50%, #02010a 100%) fixed
        !important;
    background-size: 130px 130px, 100px 100px, auto, auto, auto, auto !important;
    background-color: #02010a !important;
    background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat !important;
}

/* MOONLIT SEA — deep ocean blue with moon glow */
body.theme-moonsea {
    background:
        radial-gradient(circle at 75% 18%, rgba(255, 251, 235, 0.95), rgba(255, 251, 235, 0.4) 5%, transparent 9%) fixed,
        radial-gradient(circle at 75% 18%, rgba(255, 251, 235, 0.2), transparent 18%) fixed,
        radial-gradient(circle at 15% 30%, rgba(255,255,255,0.8) 1px, transparent 2px),
        radial-gradient(circle at 45% 50%, rgba(255,255,255,0.7) 1px, transparent 2px),
        radial-gradient(ellipse 90% 30% at 50% 100%, rgba(8, 47, 73, 0.85), transparent 70%) fixed,
        linear-gradient(180deg, #020617 0%, #082f49 50%, #0c4a6e 80%, #082f49 100%) fixed
        !important;
    background-size: auto, auto, 130px 130px, 100px 100px, auto, auto !important;
    background-color: #020617 !important;
    background-repeat: no-repeat, no-repeat, repeat, repeat, no-repeat, no-repeat !important;
}

/* =====================================================================
   CATEGORY 4: LIVE WALLPAPER (animated)
   Subtle drift animations on a tiled background-position translate.
   ===================================================================== */

@keyframes msi-drift-down {
    from { background-position-y: 0%; }
    to   { background-position-y: 100%; }
}
@keyframes msi-drift-up {
    from { background-position-y: 100%; }
    to   { background-position-y: 0%; }
}
@keyframes msi-drift-side {
    from { background-position-x: 0%; }
    to   { background-position-x: 100%; }
}

/* PETAL RAIN — pink petals drifting down on a sky background */
body.theme-petals {
    background:
        linear-gradient(rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.28)),
        radial-gradient(ellipse 8px 4px at 20% 10%, #f9a8d4, transparent 70%),
        radial-gradient(ellipse 6px 3px at 70% 40%, #f472b6, transparent 70%),
        radial-gradient(ellipse 10px 5px at 45% 70%, #fbcfe8, transparent 70%),
        radial-gradient(ellipse 7px 4px at 85% 85%, #ec4899, transparent 70%),
        radial-gradient(ellipse 60% 45% at 50% 90%, rgba(34, 197, 94, 0.35), transparent 65%) fixed,
        linear-gradient(180deg, #fce7f3 0%, #fbcfe8 35%, #f9a8d4 60%, #16a34a 95%) fixed
        !important;
    background-size: 200px 200px, 180px 180px, 250px 250px, 160px 160px, auto, auto !important;
    background-repeat: repeat, repeat, repeat, repeat, no-repeat, no-repeat !important;
    background-color: #fce7f3 !important;
    animation: msi-drift-down 18s linear infinite;
}

/* SNOWFALL — falling white snowflakes on dark sky */
body.theme-snowfall {
    background:
        linear-gradient(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.22)),
        radial-gradient(circle at 20% 10%, rgba(255,255,255,0.95) 2px, transparent 3px),
        radial-gradient(circle at 70% 30%, rgba(255,255,255,0.85) 1.5px, transparent 2.5px),
        radial-gradient(circle at 45% 60%, rgba(255,255,255,0.9) 2px, transparent 3px),
        radial-gradient(circle at 85% 80%, rgba(255,255,255,0.8) 1px, transparent 2px),
        radial-gradient(ellipse 90% 25% at 50% 100%, rgba(255,255,255,0.7), transparent 70%) fixed,
        linear-gradient(180deg, #0f172a 0%, #1e293b 50%, #475569 90%, #e2e8f0 100%) fixed
        !important;
    background-size: 110px 110px, 140px 140px, 90px 90px, 160px 160px, auto, auto !important;
    background-repeat: repeat, repeat, repeat, repeat, no-repeat, no-repeat !important;
    background-color: #0f172a !important;
    animation: msi-drift-down 22s linear infinite;
}

/* BUBBLE RISE — translucent bubbles rising up from ocean depth */
body.theme-bubbles {
    background:
        radial-gradient(circle at 25% 25%, rgba(186,230,253,0.7) 4px, transparent 5px),
        radial-gradient(circle at 70% 60%, rgba(125,211,252,0.6) 5px, transparent 6px),
        radial-gradient(circle at 45% 85%, rgba(186,230,253,0.5) 6px, transparent 7px),
        radial-gradient(circle at 85% 35%, rgba(56,189,248,0.55) 3px, transparent 4px),
        linear-gradient(180deg, #0c4a6e 0%, #075985 35%, #0369a1 65%, #0c4a6e 100%) fixed
        !important;
    background-size: 130px 130px, 170px 170px, 100px 100px, 200px 200px, auto !important;
    background-repeat: repeat, repeat, repeat, repeat, no-repeat !important;
    background-color: #0c4a6e !important;
    animation: msi-drift-up 20s linear infinite;
}

/* GOLDEN PARTICLES — slow golden dots floating through dark space */
body.theme-particles {
    background:
        radial-gradient(circle at 20% 30%, rgba(251,191,36,0.85) 2px, transparent 3px),
        radial-gradient(circle at 65% 70%, rgba(245,158,11,0.7) 3px, transparent 4px),
        radial-gradient(circle at 45% 20%, rgba(252,211,77,0.8) 2px, transparent 3px),
        radial-gradient(circle at 85% 85%, rgba(251,191,36,0.6) 2.5px, transparent 3.5px),
        linear-gradient(135deg, #1c0a04 0%, #0a0420 50%, #1c0a04 100%) fixed
        !important;
    background-size: 130px 130px, 170px 170px, 100px 100px, 200px 200px, auto !important;
    background-repeat: repeat, repeat, repeat, repeat, no-repeat !important;
    background-color: #1c0a04 !important;
    animation: msi-drift-side 24s linear infinite;
}

/* The picker UI lives inside secure.php. No floating widget on other pages. */