/* ============================================
   🥊 FIGHTING FIX - v2.0 (ADRENALINA)
   ============================================
   
   ENFOQUE: Mucho impacto visual, poco impacto en CPU
   - Vignette dinámica con gradientes
   - Efecto scanlines para warning
   - Animaciones solo con opacity/transform
   - Optimizado para móviles de gama media
   
   CARGAR DESPUÉS de boxing-timer.css
   ============================================ */

/* ============================================
   1️⃣ VARIABLES DE COMBATE
   ============================================ */

body.fighting {
    --fight-primary: #ff4500;
    --fight-secondary: #cc0000;
    --fight-glow: rgba(255, 69, 0, 0.8);
    --fight-dark: #1a0a0a;
}

body.fighting.warning,
body.fighting.warning-zone {
    --fight-primary: #ff0000;
    --fight-glow: rgba(255, 0, 0, 1);
}

/* ============================================
   2️⃣ FONDO FIGHTING - DEGRADADO INTENSO
   ============================================ */

body.fighting::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        #1a0505 0%,
        #2d0a0a 25%,
        #3d1515 50%,
        #2d0a0a 75%,
        #1a0505 100%
    ) !important;
    z-index: -2;
    transition: background 0.3s ease !important;
}

/* Warning - fondo más intenso */
body.fighting.warning::before,
body.fighting.warning-zone::before {
    background: linear-gradient(
        135deg,
        #2a0000 0%,
        #4a0505 50%,
        #2a0000 100%
    ) !important;
}

/* ============================================
   3️⃣ VIGNETTE DINÁMICA - BORDE ROJO PULSANTE
   ============================================ */

body.fighting::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 10;
    
    /* Gradiente periférico: rojo en los bordes, transparente en el centro */
    background: radial-gradient(
        ellipse at center,
        transparent 40%,
        rgba(255, 0, 0, 0.1) 60%,
        rgba(180, 0, 0, 0.25) 80%,
        rgba(100, 0, 0, 0.4) 100%
    );
    
    /* Animación de pulso con opacity (ligero para CPU) */
    animation: fightGlow 3s ease-in-out infinite;
    will-change: opacity;
}

@keyframes fightGlow {
    0%, 100% { 
        opacity: 0.5; 
    }
    50% { 
        opacity: 0.9; 
    }
}

/* Warning - vignette más intensa y rápida */
body.fighting.warning::after,
body.fighting.warning-zone::after {
    background: radial-gradient(
        ellipse at center,
        transparent 30%,
        rgba(255, 0, 0, 0.2) 50%,
        rgba(200, 0, 0, 0.4) 70%,
        rgba(120, 0, 0, 0.6) 100%
    );
    animation: warningGlow 0.8s ease-in-out infinite;
}

@keyframes warningGlow {
    0%, 100% { 
        opacity: 0.6; 
    }
    50% { 
        opacity: 1; 
    }
}

/* ============================================
   4️⃣ EFECTO SCANLINES - ALERTA FINAL DE ROUND
   ============================================ */

body.fighting.warning .fullscreen-timer::before,
body.fighting.warning-zone .fullscreen-timer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 5;
    
    /* Líneas horizontales finas */
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(255, 0, 0, 0.03) 2px,
        rgba(255, 0, 0, 0.03) 4px
    );
    
    /* Animación de scanlines moviéndose */
    animation: scanlines 0.1s linear infinite;
    will-change: transform;
}

@keyframes scanlines {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(4px);
    }
}

/* ============================================
   5️⃣ TEXTO FIGHTING - GRANDE E IMPACTANTE
   ============================================ */

body.fighting .fs-status {
    font-size: 12vw !important;
    font-weight: 900 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    color: #FFFFFF !important;
    
    /* Resplandor rojo */
    text-shadow: 
        0 0 20px rgba(255, 69, 0, 0.9),
        0 0 40px rgba(255, 69, 0, 0.6) !important;
    
    /* Animación optimizada */
    animation: fightTextPulse 2s ease-in-out infinite !important;
    will-change: opacity, transform !important;
}

@keyframes fightTextPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.9;
        transform: scale(1.02);
    }
}

/* Warning - texto más agresivo */
body.fighting.warning .fs-status,
body.fighting.warning-zone .fs-status {
    color: #ff6666 !important;
    text-shadow: 
        0 0 25px rgba(255, 0, 0, 1),
        0 0 50px rgba(255, 0, 0, 0.8),
        0 0 75px rgba(255, 0, 0, 0.4) !important;
    animation: warningTextPulse 0.4s ease-in-out infinite !important;
}

@keyframes warningTextPulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* ============================================
   6️⃣ TIEMPO - PROMINENTE
   ============================================ */

body.fighting .fs-time {
    font-size: clamp(80px, 15vh, 120px) !important;
    font-weight: 900 !important;
    color: #FFFFFF !important;
    font-family: 'Courier New', monospace !important;
    line-height: 1 !important;
    
    text-shadow: 
        0 0 25px rgba(255, 69, 0, 0.8),
        0 0 50px rgba(255, 69, 0, 0.5) !important;
    
    /* Sin animación continua */
    animation: none !important;
    will-change: transform, opacity !important;
    transform: translateZ(0) !important;
}

/* Warning - tiempo rojo brillante */
body.fighting.warning .fs-time,
body.fighting.warning-zone .fs-time {
    color: #ff6666 !important;
    text-shadow: 
        0 0 30px rgba(255, 0, 0, 1),
        0 0 60px rgba(255, 0, 0, 0.7),
        0 0 100px rgba(255, 0, 0, 0.4) !important;
    animation: warningTimePulse 0.3s ease-in-out infinite !important;
}

@keyframes warningTimePulse {
    0%, 100% {
        transform: translateZ(0) scale(1);
        opacity: 1;
    }
    50% {
        transform: translateZ(0) scale(1.03);
        opacity: 0.85;
    }
}

/* ============================================
   7️⃣ ROUND INFO
   ============================================ */

body.fighting .fs-round {
    font-size: 5vw !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 0 0 10px rgba(255, 69, 0, 0.6) !important;
    letter-spacing: 0.1em !important;
}

body.fighting.warning .fs-round,
body.fighting.warning-zone .fs-round {
    color: #ffaaaa !important;
    text-shadow: 0 0 15px rgba(255, 0, 0, 0.8) !important;
}

/* ============================================
   8️⃣ FULLSCREEN TIMER - OPTIMIZADO
   ============================================ */

body.fighting .fullscreen-timer {
    position: relative;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    will-change: transform, opacity !important;
    overflow: hidden; /* Para contener las scanlines */
}

/* ============================================
   9️⃣ SEGURIDAD DE CLICS - BOTONES ACCESIBLES
   ============================================ */

/* Todos los efectos visuales NO bloquean clics */
body.fighting::after,
body.fighting .vignette-overlay,
body.fighting .fullscreen-timer::before {
    pointer-events: none !important;
}

/* Botones siempre al frente */
body.fighting .btn-group,
body.fighting .timer-controls {
    position: relative !important;
    z-index: 9999 !important;
    pointer-events: auto !important;
    margin-top: 20px !important;
    bottom: auto !important;
    top: auto !important;
}

body.fighting .floating-controls {
    z-index: 9999 !important;
    pointer-events: auto !important;
}

body.fighting .float-btn,
body.fighting .btn,
body.fighting #resetBtn,
body.fighting #pauseBtn {
    pointer-events: auto !important;
}

/* ============================================
   🔟 RESPONSIVE - MÓVILES
   ============================================ */

@media (max-width: 768px) {
    body.fighting .fs-status {
        font-size: 10vw !important;
    }
    
    body.fighting .fs-time {
        font-size: clamp(80px, 15vh, 120px) !important;
    }
    
    body.fighting .fs-round {
        font-size: 4vw !important;
    }
}

@media (max-width: 480px) {
    body.fighting .fs-status {
        font-size: 9vw !important;
        text-shadow: 
            0 0 15px rgba(255, 69, 0, 0.8),
            0 0 30px rgba(255, 69, 0, 0.5) !important;
    }
    
    body.fighting .fs-time {
        font-size: clamp(80px, 15vh, 120px) !important;
        text-shadow: 
            0 0 20px rgba(255, 69, 0, 0.7),
            0 0 40px rgba(255, 69, 0, 0.4) !important;
    }
    
    body.fighting .fs-round {
        font-size: 3.5vw !important;
    }
    
    /* Simplificar efectos en móviles pequeños */
    body.fighting::after {
        animation-duration: 4s !important;
    }
    
    body.fighting.warning::after,
    body.fighting.warning-zone::after {
        animation-duration: 1s !important;
    }
}

@media (max-width: 360px) {
    body.fighting .fs-status {
        font-size: 8vw !important;
    }
    
    body.fighting .fs-time {
        font-size: clamp(80px, 15vh, 120px) !important;
    }
}

/* ============================================
   1️⃣1️⃣ PREFERENCIA DE MOVIMIENTO REDUCIDO
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    body.fighting::after,
    body.fighting .fs-status,
    body.fighting .fs-time,
    body.fighting .fullscreen-timer::before,
    body.fighting.warning .fs-status,
    body.fighting.warning .fs-time,
    body.fighting.warning-zone .fs-status,
    body.fighting.warning-zone .fs-time {
        animation: none !important;
    }
}

/* ============================================
   1️⃣2️⃣ HINT TEXT
   ============================================ */

body.fighting .fs-hint {
    color: rgba(255, 200, 150, 0.7) !important;
    font-size: 3vw !important;
    text-shadow: 0 0 5px rgba(255, 69, 0, 0.3) !important;
}

body.fighting.warning .fs-hint,
body.fighting.warning-zone .fs-hint {
    color: rgba(255, 150, 150, 0.8) !important;
}

@media (max-width: 480px) {
    body.fighting .fs-hint {
        font-size: 3.5vw !important;
    }
}

/* ============================================
   1️⃣3️⃣ TRANSICIÓN DE SALIDA
   ============================================ */

body:not(.fighting)::after {
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

/* ============================================
   🔥 EMBERS — Brasas flotantes durante FIGHT
   ============================================ */

body.fighting .embers-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 15;
    overflow: hidden;
}

body.fighting .ember {
    position: absolute;
    bottom: -8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffffff 0%, #ffcc00 35%, #ff6600 70%, transparent 100%);
    box-shadow: 0 0 6px #ff8800, 0 0 12px rgba(255, 100, 0, 0.4);
    opacity: 0;
    animation: emberFloat var(--ember-dur, 6s) ease-in var(--ember-del, 0s) infinite;
    will-change: transform, opacity;
}

@keyframes emberFloat {
    0%   { transform: translateY(0)      translateX(0);                                   opacity: 0;   }
    8%   { transform: translateY(-5vh)   translateX(calc(var(--ember-drift, 15px) * 0.1)); opacity: 0.9; }
    60%  { transform: translateY(-60vh)  translateX(var(--ember-drift, 15px));             opacity: 0.5; }
    100% { transform: translateY(-105vh) translateX(calc(var(--ember-drift, 15px) * 1.3)); opacity: 0;   }
}

body.fighting .ember.e1  { left:  5%; --ember-drift: -12px; --ember-dur: 6.2s; --ember-del: 0.0s; }
body.fighting .ember.e2  { left: 14%; --ember-drift:  18px; --ember-dur: 5.5s; --ember-del: 0.9s; }
body.fighting .ember.e3  { left: 24%; --ember-drift: -20px; --ember-dur: 7.1s; --ember-del: 1.6s; }
body.fighting .ember.e4  { left: 35%; --ember-drift:  22px; --ember-dur: 5.8s; --ember-del: 0.4s; }
body.fighting .ember.e5  { left: 46%; --ember-drift: -15px; --ember-dur: 6.7s; --ember-del: 1.2s; }
body.fighting .ember.e6  { left: 57%; --ember-drift:  12px; --ember-dur: 5.3s; --ember-del: 0.7s; }
body.fighting .ember.e7  { left: 67%; --ember-drift: -25px; --ember-dur: 6.9s; --ember-del: 1.9s; }
body.fighting .ember.e8  { left: 76%; --ember-drift:  20px; --ember-dur: 5.6s; --ember-del: 0.3s; }
body.fighting .ember.e9  { left: 88%; --ember-drift: -18px; --ember-dur: 7.4s; --ember-del: 1.1s; }
body.fighting .ember.e10 { left: 20%; --ember-drift:  25px; --ember-dur: 6.0s; --ember-del: 2.1s; }
body.fighting .ember.e11 { left: 42%; --ember-drift: -22px; --ember-dur: 5.9s; --ember-del: 0.5s; }
body.fighting .ember.e12 { left: 82%; --ember-drift:  16px; --ember-dur: 6.4s; --ember-del: 1.4s; }

/* Reducir a 6 brasas en móvil pequeño */
@media (max-width: 480px) {
    body.fighting .ember.e7,
    body.fighting .ember.e8,
    body.fighting .ember.e9,
    body.fighting .ember.e10,
    body.fighting .ember.e11,
    body.fighting .ember.e12 { display: none !important; }
}

/* Sin brasas en landscape — prioridad rendimiento */
@media (max-height: 500px) and (orientation: landscape) {
    body.fighting .embers-container { display: none !important; }
}