/**
 * Cosmic Dark Mode Background
 * Nebula + starfield + comet applied site-wide in dark mode.
 * Chapter pages (/mind/chapter/*) have their own implementation and skip this.
 */

/* ============================================================================
   BASE: Dark background on html
   ============================================================================ */
[data-theme="dark"] html,
[data-theme="dark"] {
    background: #1a1a2e;
}

/* ============================================================================
   NEBULA
   ============================================================================ */
.cosmic-nebula { display: none; }
[data-theme="dark"] .cosmic-nebula {
    display: block;
    position: fixed;
    top: -20px; left: -20px; right: -20px; bottom: -20px;
    pointer-events: none;
    z-index: 0;
    animation: cosmicNebulaDrift 80s ease-in-out infinite alternate;
    background:
        radial-gradient(ellipse 900px 600px at 20% 0%, rgba(139,92,246,0.38), transparent 70%),
        radial-gradient(ellipse 800px 550px at 80% 5%, rgba(234,120,20,0.25), transparent 70%),
        radial-gradient(ellipse 600px 400px at 55% 15%, rgba(255,255,255,0.06), transparent 65%),
        radial-gradient(ellipse 800px 500px at 15% 45%, rgba(139,92,246,0.28), transparent 70%),
        radial-gradient(ellipse 700px 450px at 85% 40%, rgba(234,120,20,0.2), transparent 70%),
        radial-gradient(ellipse 500px 350px at 40% 35%, rgba(255,255,255,0.04), transparent 60%),
        radial-gradient(ellipse 600px 420px at 70% 55%, rgba(34,197,94,0.2), transparent 70%),
        radial-gradient(ellipse 450px 300px at 25% 70%, rgba(34,197,94,0.12), transparent 65%),
        radial-gradient(ellipse 550px 380px at 90% 75%, rgba(255,255,255,0.05), transparent 65%),
        radial-gradient(ellipse 600px 400px at 50% 85%, rgba(168,85,247,0.28), transparent 70%),
        radial-gradient(ellipse 500px 350px at 10% 100%, rgba(234,88,12,0.18), transparent 70%);
}

@media (max-width: 768px) {
    [data-theme="dark"] .cosmic-nebula {
        background:
            radial-gradient(ellipse 320px 220px at 20% 0%, rgba(139,92,246,0.15), transparent 70%),
            radial-gradient(ellipse 280px 200px at 80% 15%, rgba(234,120,20,0.1), transparent 70%),
            radial-gradient(ellipse 240px 170px at 60% 50%, rgba(34,197,94,0.08), transparent 65%),
            radial-gradient(ellipse 200px 150px at 40% 30%, rgba(255,255,255,0.03), transparent 60%),
            radial-gradient(ellipse 260px 180px at 50% 90%, rgba(168,85,247,0.12), transparent 70%);
    }
}
@media (orientation: landscape) and (max-height: 500px) {
    [data-theme="dark"] .cosmic-nebula { display: none !important; }
}

/* ============================================================================
   STARFIELD
   ============================================================================ */
.cosmic-starfield { display: none; }
[data-theme="dark"] .cosmic-starfield {
    display: block;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.cosmic-star-layer {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
}

@keyframes cosmicTwinkleSlow {
    0%, 100% { opacity: 1; }
    40% { opacity: 0.25; }
    70% { opacity: 0.75; }
}
@keyframes cosmicTwinkleMed {
    0%, 100% { opacity: 0.85; }
    30% { opacity: 0.15; }
    60% { opacity: 0.65; }
    80% { opacity: 0.3; }
}
@keyframes cosmicTwinkleFast {
    0%, 100% { opacity: 0.75; }
    25% { opacity: 0.1; }
    50% { opacity: 0.85; }
    75% { opacity: 0.2; }
}

/* Layer 1: big bright stars, slow twinkle 7s
   Colors: white, blue-white (Rigel), amber (Betelgeuse), pale yellow (Sun-type), cool red */
.cosmic-star-layer-1 {
    background-image:
        /* Original 9 */
        radial-gradient(4px 4px at 18% 28%, rgba(255,255,255,1), rgba(255,255,255,0.2) 50%, transparent),
        radial-gradient(3.5px 3.5px at 62% 72%, rgba(255,255,255,0.95), transparent),
        radial-gradient(4.5px 4.5px at 85% 18%, rgba(255,255,255,1), rgba(255,255,255,0.2) 50%, transparent),
        radial-gradient(3.5px 3.5px at 42% 88%, rgba(200,180,255,0.85), transparent),
        radial-gradient(3px 3px at 75% 45%, rgba(255,200,150,0.8), transparent),
        radial-gradient(4px 4px at 8% 65%, rgba(255,255,255,0.95), transparent),
        radial-gradient(3.5px 3.5px at 28% 52%, rgba(180,210,255,0.85), transparent),
        radial-gradient(4px 4px at 95% 82%, rgba(255,255,255,0.9), transparent),
        radial-gradient(3px 3px at 52% 12%, rgba(255,200,150,0.8), transparent),
        /* New stars with space colors */
        radial-gradient(4px 4px at 35% 8%, rgba(155,190,255,0.95), transparent),        /* blue-white (Rigel) */
        radial-gradient(3.5px 3.5px at 72% 35%, rgba(255,180,100,0.85), transparent),   /* amber (Betelgeuse) */
        radial-gradient(4.5px 4.5px at 12% 82%, rgba(255,255,220,1), rgba(255,255,220,0.2) 50%, transparent), /* pale yellow (Sun) */
        radial-gradient(3px 3px at 58% 55%, rgba(255,150,120,0.7), transparent),         /* cool red */
        radial-gradient(4px 4px at 90% 48%, rgba(155,190,255,0.9), transparent),         /* blue-white */
        radial-gradient(3.5px 3.5px at 22% 38%, rgba(255,255,255,0.95), transparent),
        radial-gradient(3px 3px at 48% 95%, rgba(255,210,160,0.8), transparent),         /* warm amber */
        radial-gradient(4px 4px at 78% 15%, rgba(255,255,240,0.9), transparent),         /* pale yellow */
        radial-gradient(3.5px 3.5px at 5% 45%, rgba(200,180,255,0.85), transparent),    /* lavender */
        /* Extra white + blue-white */
        radial-gradient(4px 4px at 45% 42%, rgba(255,255,255,1), rgba(255,255,255,0.2) 50%, transparent),
        radial-gradient(3.5px 3.5px at 15% 15%, rgba(155,190,255,0.95), transparent),   /* blue-white */
        radial-gradient(4px 4px at 68% 8%, rgba(255,255,255,0.95), transparent),
        radial-gradient(3px 3px at 32% 62%, rgba(155,190,255,0.9), transparent),         /* blue-white */
        radial-gradient(4.5px 4.5px at 55% 32%, rgba(255,255,255,1), rgba(255,255,255,0.2) 50%, transparent),
        radial-gradient(3.5px 3.5px at 88% 65%, rgba(180,210,255,0.9), transparent),    /* blue-white */
        radial-gradient(3px 3px at 2% 92%, rgba(255,255,255,0.9), transparent),
        radial-gradient(4px 4px at 72% 88%, rgba(155,190,255,0.85), transparent),        /* blue-white */
        radial-gradient(3.5px 3.5px at 40% 18%, rgba(255,255,255,0.95), transparent);
    animation: cosmicTwinkleSlow 7s ease-in-out infinite;
}

/* Layer 2: medium stars, twinkle 3.5s
   Same color palette at reduced size/opacity */
.cosmic-star-layer-2 {
    background-image:
        /* Original 12 */
        radial-gradient(2.5px 2.5px at 32% 15%, rgba(255,255,255,0.9), transparent),
        radial-gradient(2px 2px at 55% 42%, rgba(200,180,255,0.8), transparent),
        radial-gradient(3px 3px at 78% 62%, rgba(255,255,255,0.85), transparent),
        radial-gradient(2.5px 2.5px at 15% 78%, rgba(255,200,150,0.75), transparent),
        radial-gradient(2px 2px at 92% 35%, rgba(255,255,255,0.8), transparent),
        radial-gradient(2.5px 2.5px at 48% 58%, rgba(200,180,255,0.75), transparent),
        radial-gradient(2px 2px at 25% 92%, rgba(255,255,255,0.75), transparent),
        radial-gradient(3px 3px at 68% 8%, rgba(255,200,150,0.8), transparent),
        radial-gradient(2.5px 2.5px at 5% 22%, rgba(180,210,255,0.75), transparent),
        radial-gradient(2px 2px at 88% 68%, rgba(200,180,255,0.7), transparent),
        radial-gradient(2.5px 2.5px at 38% 38%, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 2px at 72% 25%, rgba(255,255,255,0.75), transparent),
        /* New stars */
        radial-gradient(2.5px 2.5px at 10% 55%, rgba(155,190,255,0.8), transparent),    /* blue-white */
        radial-gradient(2px 2px at 42% 72%, rgba(255,180,100,0.7), transparent),         /* amber */
        radial-gradient(3px 3px at 85% 88%, rgba(255,255,220,0.8), transparent),         /* pale yellow */
        radial-gradient(2.5px 2.5px at 60% 18%, rgba(255,150,120,0.6), transparent),     /* cool red */
        radial-gradient(2px 2px at 28% 5%, rgba(155,190,255,0.75), transparent),         /* blue-white */
        radial-gradient(2.5px 2.5px at 75% 48%, rgba(255,210,160,0.7), transparent),     /* warm amber */
        radial-gradient(2px 2px at 50% 85%, rgba(255,255,255,0.75), transparent),
        radial-gradient(3px 3px at 18% 32%, rgba(200,180,255,0.7), transparent),
        radial-gradient(2.5px 2.5px at 95% 55%, rgba(255,255,240,0.75), transparent),    /* pale yellow */
        radial-gradient(2px 2px at 35% 62%, rgba(255,255,255,0.7), transparent),
        radial-gradient(2.5px 2.5px at 82% 22%, rgba(180,210,255,0.75), transparent),    /* blue-tinted */
        radial-gradient(2px 2px at 62% 38%, rgba(255,180,100,0.65), transparent),        /* amber */
        /* Extra white + blue-white */
        radial-gradient(2.5px 2.5px at 22% 45%, rgba(255,255,255,0.85), transparent),
        radial-gradient(2px 2px at 58% 82%, rgba(155,190,255,0.75), transparent),        /* blue-white */
        radial-gradient(3px 3px at 42% 12%, rgba(255,255,255,0.8), transparent),
        radial-gradient(2.5px 2.5px at 8% 68%, rgba(180,210,255,0.75), transparent),    /* blue-white */
        radial-gradient(2px 2px at 75% 32%, rgba(255,255,255,0.8), transparent),
        radial-gradient(2.5px 2.5px at 30% 95%, rgba(155,190,255,0.7), transparent),    /* blue-white */
        radial-gradient(2px 2px at 88% 15%, rgba(255,255,255,0.75), transparent),
        radial-gradient(3px 3px at 52% 52%, rgba(180,210,255,0.7), transparent),         /* blue-white */
        radial-gradient(2.5px 2.5px at 15% 8%, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 2px at 68% 65%, rgba(155,190,255,0.7), transparent),         /* blue-white */
        radial-gradient(2.5px 2.5px at 45% 28%, rgba(255,255,255,0.75), transparent),
        radial-gradient(2px 2px at 90% 78%, rgba(180,210,255,0.7), transparent);         /* blue-white */
    animation: cosmicTwinkleMed 3.5s ease-in-out 1.2s infinite;
}

/* Layer 3: tiny flickering stars, twinkle 2.2s
   Densest layer -- doubled with color variety */
.cosmic-star-layer-3 {
    background-image:
        /* Original 14 */
        radial-gradient(1.2px 1.2px at 22% 48%, rgba(255,255,255,0.85), transparent),
        radial-gradient(1.2px 1.2px at 45% 25%, rgba(200,180,255,0.7), transparent),
        radial-gradient(1.5px 1.5px at 68% 82%, rgba(255,255,255,0.75), transparent),
        radial-gradient(1.2px 1.2px at 88% 55%, rgba(255,200,150,0.65), transparent),
        radial-gradient(1.2px 1.2px at 12% 38%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1.5px 1.5px at 52% 72%, rgba(200,180,255,0.6), transparent),
        radial-gradient(1.2px 1.2px at 35% 5%, rgba(255,255,255,0.65), transparent),
        radial-gradient(1.2px 1.2px at 82% 28%, rgba(255,200,150,0.6), transparent),
        radial-gradient(1.2px 1.2px at 5% 85%, rgba(255,255,255,0.65), transparent),
        radial-gradient(1.5px 1.5px at 72% 48%, rgba(200,180,255,0.55), transparent),
        radial-gradient(1.2px 1.2px at 18% 15%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1.2px 1.2px at 62% 95%, rgba(180,210,255,0.55), transparent),
        radial-gradient(1.5px 1.5px at 95% 12%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1.2px 1.2px at 42% 62%, rgba(255,200,150,0.55), transparent),
        /* New stars */
        radial-gradient(1.2px 1.2px at 8% 22%, rgba(155,190,255,0.65), transparent),    /* blue-white */
        radial-gradient(1.5px 1.5px at 30% 75%, rgba(255,180,100,0.55), transparent),   /* amber */
        radial-gradient(1.2px 1.2px at 55% 8%, rgba(255,255,220,0.6), transparent),     /* pale yellow */
        radial-gradient(1.2px 1.2px at 78% 42%, rgba(255,150,120,0.5), transparent),    /* cool red */
        radial-gradient(1.5px 1.5px at 15% 58%, rgba(155,190,255,0.6), transparent),    /* blue-white */
        radial-gradient(1.2px 1.2px at 48% 35%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1.2px 1.2px at 92% 72%, rgba(255,210,160,0.55), transparent),   /* warm amber */
        radial-gradient(1.5px 1.5px at 25% 88%, rgba(200,180,255,0.5), transparent),
        radial-gradient(1.2px 1.2px at 65% 15%, rgba(255,255,255,0.55), transparent),
        radial-gradient(1.2px 1.2px at 38% 48%, rgba(180,210,255,0.5), transparent),    /* blue-tinted */
        radial-gradient(1.5px 1.5px at 85% 8%, rgba(255,180,100,0.5), transparent),     /* amber */
        radial-gradient(1.2px 1.2px at 2% 68%, rgba(255,255,240,0.55), transparent),    /* pale yellow */
        radial-gradient(1.2px 1.2px at 58% 52%, rgba(255,150,120,0.45), transparent),   /* cool red */
        radial-gradient(1.5px 1.5px at 75% 92%, rgba(155,190,255,0.55), transparent),   /* blue-white */
        /* Extra white + blue-white */
        radial-gradient(1.2px 1.2px at 28% 32%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1.5px 1.5px at 42% 78%, rgba(155,190,255,0.6), transparent),    /* blue-white */
        radial-gradient(1.2px 1.2px at 72% 18%, rgba(255,255,255,0.65), transparent),
        radial-gradient(1.2px 1.2px at 10% 52%, rgba(180,210,255,0.55), transparent),   /* blue-white */
        radial-gradient(1.5px 1.5px at 88% 38%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1.2px 1.2px at 52% 88%, rgba(155,190,255,0.5), transparent),    /* blue-white */
        radial-gradient(1.2px 1.2px at 32% 12%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1.5px 1.5px at 68% 58%, rgba(180,210,255,0.55), transparent),   /* blue-white */
        radial-gradient(1.2px 1.2px at 15% 72%, rgba(255,255,255,0.55), transparent),
        radial-gradient(1.2px 1.2px at 82% 5%, rgba(155,190,255,0.5), transparent),     /* blue-white */
        radial-gradient(1.5px 1.5px at 45% 45%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1.2px 1.2px at 95% 62%, rgba(180,210,255,0.5), transparent),    /* blue-white */
        radial-gradient(1.2px 1.2px at 20% 92%, rgba(255,255,255,0.55), transparent),
        radial-gradient(1.5px 1.5px at 60% 28%, rgba(155,190,255,0.55), transparent);   /* blue-white */
    animation: cosmicTwinkleFast 2.2s ease-in-out 0.7s infinite;
}

/* ============================================================================
   COMET
   ============================================================================ */
.cosmic-comet { display: none; }
[data-theme="dark"] .cosmic-comet {
    display: block;
    position: fixed;
    top: 12%;
    right: 8%;
    width: 420px;
    height: 40px;
    pointer-events: none;
    z-index: 0;
    transform: rotate(-18deg);
    transform-origin: right center;
}
.cosmic-comet-tail {
    position: absolute;
    top: 50%;
    left: 0;
    right: 30px;
    height: 3px;
    transform: translateY(-50%);
    background: linear-gradient(
        to right,
        rgba(180, 220, 255, 0) 0%,
        rgba(180, 220, 255, 0.2) 30%,
        rgba(200, 230, 255, 0.6) 70%,
        rgba(230, 245, 255, 0.9) 95%,
        rgba(255, 255, 255, 1) 100%
    );
    border-radius: 50%;
    filter: blur(2px) drop-shadow(0 0 8px rgba(200, 230, 255, 0.6));
    box-shadow:
        0 0 10px rgba(200, 230, 255, 0.5),
        0 0 22px rgba(180, 220, 255, 0.3),
        0 0 40px rgba(139, 92, 246, 0.15);
    animation: cosmicCometTailShimmer 5s ease-in-out infinite;
}
@keyframes cosmicCometTailShimmer {
    0% {
        filter: blur(2px) drop-shadow(0 0 8px rgba(200, 230, 255, 0.6));
        opacity: 0.75;
    }
    20% {
        filter: blur(1.5px) drop-shadow(0 0 14px rgba(220, 240, 255, 0.95));
        opacity: 1;
    }
    40% {
        filter: blur(2.5px) drop-shadow(0 0 6px rgba(200, 230, 255, 0.5));
        opacity: 0.7;
    }
    65% {
        filter: blur(1.5px) drop-shadow(0 0 16px rgba(230, 245, 255, 1));
        opacity: 1;
    }
    80% {
        filter: blur(2px) drop-shadow(0 0 10px rgba(200, 230, 255, 0.7));
        opacity: 0.8;
    }
    100% {
        filter: blur(2px) drop-shadow(0 0 8px rgba(200, 230, 255, 0.6));
        opacity: 0.75;
    }
}
.cosmic-comet-head {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 22px;
    height: 22px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: radial-gradient(circle at center,
        rgba(255, 255, 255, 1) 0%,
        rgba(220, 240, 255, 0.8) 30%,
        rgba(180, 220, 255, 0.3) 60%,
        transparent 100%);
    animation: cosmicCometPulse 4s ease-in-out infinite;
}
@keyframes cosmicCometPulse {
    0%, 100% {
        box-shadow:
            0 0 30px rgba(220, 235, 255, 0.9),
            0 0 60px rgba(180, 220, 255, 0.6),
            0 0 100px rgba(180, 220, 255, 0.35),
            0 0 150px rgba(139, 92, 246, 0.25);
    }
    50% {
        box-shadow:
            0 0 45px rgba(240, 250, 255, 1),
            0 0 85px rgba(200, 230, 255, 0.8),
            0 0 140px rgba(180, 220, 255, 0.5),
            0 0 200px rgba(139, 92, 246, 0.4);
    }
}
@media (max-width: 768px) {
    [data-theme="dark"] .cosmic-comet {
        width: 280px;
        right: 4%;
        top: 15%;
    }
    .cosmic-comet-head { width: 16px; height: 16px; }
}

/* ============================================================================
   SITE-WIDE DARK MODE TRANSPARENCY
   The cosmic layers are fixed-position at z-index: 0. Everything else paints
   on top. We make body transparent so the nebula/stars show through, and give
   the navbar and footer translucent backgrounds.
   ============================================================================ */
[data-theme="dark"] body {
    background: transparent;
}

/* Navbar: translucent so nebula peeks through */
html[data-theme="dark"] #mainNavbar.navbar,
html[data-theme="dark"] nav#mainNavbar {
    background-color: rgba(26, 26, 46, 0.85) !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Footer: translucent */
html[data-theme="dark"] .footer_area {
    background: rgba(26, 26, 46, 0.88) !important;
}

/* Dropdowns should stay opaque for readability */
html[data-theme="dark"] .dropdown-menu {
    background-color: #252538 !important;
}

.cosmic-aurora { display: none; }

/* ============================================================================
   NEBULA DRIFT -- slow float so the background never feels frozen
   ============================================================================ */
@keyframes cosmicNebulaDrift {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(12px, -8px); }
    50%  { transform: translate(-6px, 10px); }
    75%  { transform: translate(8px, 4px); }
    100% { transform: translate(-10px, -6px); }
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
    .cosmic-nebula,
    .cosmic-star-layer,
    .cosmic-comet-tail,
    .cosmic-comet-head {
        animation: none;
    }
}

/* ============================================================================
   GPU-BASED PERFORMANCE TIERS
   JS detects GPU and sets: cosmic-tier-high, cosmic-tier-medium, cosmic-tier-low
   HIGH: full experience (all layers, animations, parallax)
   MEDIUM: reduced (2 star layers, no comet animation, no parallax)
   LOW: minimal (1 star layer, no comet, no animations, simplified nebula)
   ============================================================================ */

/* --- MEDIUM TIER: keep it pretty but lighter --- */
.cosmic-tier-medium .cosmic-star-layer-3 { display: none !important; }
.cosmic-tier-medium .cosmic-star-layer-1,
.cosmic-tier-medium .cosmic-star-layer-2 {
    animation-duration: 14s !important; /* Slow down twinkle = fewer repaints */
}
.cosmic-tier-medium .cosmic-comet-tail { animation: none !important; }
.cosmic-tier-medium .cosmic-comet-head { animation: none !important; }
.cosmic-tier-medium[data-theme="dark"] .cosmic-nebula,
.cosmic-tier-medium [data-theme="dark"] .cosmic-nebula {
    animation: none !important;
}

/* --- LOW TIER: minimal -- 2 fixed layers total, zero animations --- */
.cosmic-tier-low .cosmic-star-layer-2,
.cosmic-tier-low .cosmic-star-layer-3 { display: none !important; }
.cosmic-tier-low .cosmic-comet { display: none !important; }

.cosmic-tier-low .cosmic-star-layer-1 {
    animation: none !important;
    background-image:
        radial-gradient(3.5px 3.5px at 18% 28%, rgba(255,255,255,0.85), transparent),
        radial-gradient(3px 3px at 62% 72%, rgba(255,255,255,0.8), transparent),
        radial-gradient(3.5px 3.5px at 85% 18%, rgba(155,190,255,0.75), transparent),
        radial-gradient(3px 3px at 42% 88%, rgba(200,180,255,0.7), transparent),
        radial-gradient(2.5px 2.5px at 75% 45%, rgba(255,200,150,0.65), transparent),
        radial-gradient(3px 3px at 35% 8%, rgba(255,255,255,0.8), transparent),
        radial-gradient(2.5px 2.5px at 8% 65%, rgba(155,190,255,0.7), transparent),
        radial-gradient(3px 3px at 55% 50%, rgba(255,255,255,0.75), transparent),
        radial-gradient(2px 2px at 28% 62%, rgba(255,255,255,0.65), transparent),
        radial-gradient(2px 2px at 90% 38%, rgba(180,210,255,0.6), transparent),
        radial-gradient(2.5px 2.5px at 48% 15%, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 72% 85%, rgba(255,200,150,0.6), transparent) !important;
}

.cosmic-tier-low[data-theme="dark"] .cosmic-nebula,
.cosmic-tier-low [data-theme="dark"] .cosmic-nebula {
    background:
        radial-gradient(ellipse 600px 400px at 20% 10%, rgba(139,92,246,0.3), transparent 70%),
        radial-gradient(ellipse 500px 350px at 80% 30%, rgba(234,120,20,0.18), transparent 70%),
        radial-gradient(ellipse 450px 320px at 60% 60%, rgba(34,197,94,0.15), transparent 70%),
        radial-gradient(ellipse 400px 300px at 40% 85%, rgba(168,85,247,0.2), transparent 70%) !important;
    animation: none !important;
}

/* Backward compat: cosmic-android maps to low tier behavior */
.cosmic-android .cosmic-star-layer-2,
.cosmic-android .cosmic-star-layer-3 { display: none !important; }
.cosmic-android .cosmic-comet { display: none !important; }
.cosmic-android .cosmic-star-layer-1 { animation: none !important; }
.cosmic-android[data-theme="dark"] .cosmic-nebula { animation: none !important; }

/* ============================================================================
   PRINT
   ============================================================================ */
@media print {
    .cosmic-nebula,
    .cosmic-starfield,
    .cosmic-comet {
        display: none !important;
    }
}