/* Mobile (¡Ü 768 px): hide stars entirely. The CSS box-shadow constellations
   were costing iOS Safari ~100+ MB of compositor memory per layer, triggering
   tab kill / auto-reload. On desktop they're a cosmetic flourish only.       */
@media (max-width: 768px) {
    #stars, #stars2, #stars3 { display: none !important; }
}

/* Desktop only: lightweight star backdrop using radial gradients instead of
   thousands of individual box-shadow points. ~50¡Á cheaper to render. */
@media (min-width: 769px) {
    #stars, #stars2, #stars3 {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 100vh;
        pointer-events: none;
        z-index: 0;
        background:
            radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.6), transparent 50%),
            radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,0.5), transparent 50%),
            radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,0.4), transparent 50%),
            radial-gradient(2px 2px at 80% 20%, rgba(255,255,255,0.6), transparent 50%),
            radial-gradient(1px 1px at 30% 60%, rgba(255,255,255,0.5), transparent 50%);
        background-size: 200px 200px;
        background-repeat: repeat;
    }
    #stars2 { opacity: 0.7; background-position: 100px 100px; }
    #stars3 { opacity: 0.5; background-position: 50px 150px; }
}