/* ============================================
   📱 OPTIMIZACIONES MÓVILES CRÍTICAS
   ============================================ */

/* OPTIMIZACIÓN 1: Reducir partículas en móvil */
@media (max-width: 768px) {
    /* Reducir brasas en FIGHT - puramente decorativas */
    .e7, .e8, .e9, .e10, .e11, .e12 {
        display: none !important;
    }
    
    /* Reducir partículas en PREPARING - puramente decorativas */
    .p5, .p6, .p7, .p8 {
        display: none !important;
    }
    
    /* Reducir hojas en REST - puramente decorativas */
    .leaf:nth-child(n+6) {
        display: none !important;
    }
    
    /* FIX #6: "Invisible Wall" - Mantener accesibilidad para elementos con significado */
    /* fight-pulse podría indicar estado, usar visibility en vez de display */
    .fight-pulse {
        visibility: hidden !important;
        position: absolute !important;
        pointer-events: none !important;
    }
    
    /* preparing-waves es puramente decorativo */
    .preparing-waves .wave-3 {
        display: none !important;
    }
}

/* OPTIMIZACIÓN 2: Simplificar efectos en móviles pequeños */
@media (max-width: 480px) {
    /* Desactivar sombras complejas */
    .fight-vignette,
    .preparing-container::before {
        animation: none !important;
        opacity: 0.5 !important;
    }
    
    /* Reducir complejidad de text-shadow */
    body.fighting .fs-status {
        text-shadow: 
            0 0 10px rgba(255, 69, 0, 0.8),
            0 0 20px rgba(255, 69, 0, 0.6) !important;
    }
    
    body.preparing .fs-time {
        text-shadow: 
            0 0 15px rgba(0, 217, 165, 0.8),
            0 0 30px rgba(0, 217, 165, 0.5) !important;
    }
    
    /* Simplificar breath circle - ocultar visualmente pero mantener en árbol de accesibilidad */
    .breath-circle {
        box-shadow: 0 0 30px rgba(0, 217, 165, 0.4) !important;
    }
    
    /* Ocultar líneas de energía - puramente decorativas */
    .energy-lines {
        display: none !important;
    }
}

/* OPTIMIZACIÓN 3: Reducir FPS de animaciones en móvil */
@media (max-width: 768px) {
    /* Ralentizar animaciones costosas */
    .ember {
        animation-duration: 6s !important;
    }
    
    .particle {
        animation-duration: 8s !important;
    }
    
    .leaf {
        animation-duration: 8s !important;
    }
    
    .wave {
        animation-duration: 5s !important;
    }
}

/* OPTIMIZACIÓN 4: Dispositivos de bajo rendimiento */
@media (hover: none) and (max-width: 480px) {
    /* Desactivar transformaciones complejas - usar visibility para mantener accesibilidad */
    .fight-pulse {
        visibility: hidden !important;
        position: absolute !important;
    }
    
    /* breath-core podría tener significado para guiar respiración - mantener en árbol a11y */
    .breath-core {
        animation: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
    
    /* Simplificar confetti - puramente decorativo */
    .confetti:nth-child(n+11) {
        display: none !important;
    }
    
    /* Reducir estrellas en settings - puramente decorativo */
    .star:nth-child(n+6) {
        display: none !important;
    }
}

/* OPTIMIZACIÓN 5: Mejorar rendimiento de settings panel */
@media (max-width: 768px) {
    .settings-panel {
        will-change: opacity !important;
        transform: none !important;
    }
    
    .settings-panel.show {
        transform: none !important;
    }
    
    /* Simplificar partículas de fuego en kcal section - puramente decorativas */
    .fire-particle:nth-child(n+4) {
        display: none !important;
    }
}

/* OPTIMIZACIÓN 6: Reducir will-change en móvil */
@media (max-width: 768px) {
    .ember,
    .particle,
    .wave,
    .leaf {
        will-change: auto !important;
    }
}

/* OPTIMIZACIÓN 7: Landscape móvil - máxima simplificación */
@media (max-height: 500px) and (orientation: landscape) {
    /* Ocultar efectos decorativos pero mantener estructura para accesibilidad */
    .fight-effects > *:not(.fight-vignette) {
        display: none !important;
    }
    
    .preparing-container > *:not(.preparing-container::before) {
        display: none !important;
    }
    
    /* Partículas puramente decorativas */
    .ember,
    .particle,
    .leaf {
        display: none !important;
    }
}

/* ============================================
   📋 NOTAS DE ACCESIBILIDAD (A11y)
   ============================================
   
   ELEMENTOS CON DISPLAY:NONE (puramente decorativos):
   - Partículas (.ember, .particle, .leaf)
   - Efectos visuales (.confetti, .star, .fire-particle)
   - Líneas de energía (.energy-lines)
   - Ondas decorativas (.preparing-waves .wave-3)
   
   ELEMENTOS CON VISIBILITY:HIDDEN (podrían tener significado):
   - .fight-pulse (indica estado de lucha)
   - .breath-core (guía visual de respiración)
   
   Esto asegura que elementos con potencial significado semántico
   permanecen en el árbol de accesibilidad aunque no sean visibles.
   ============================================ */