/* transmission.css - Estilos para o Modo de Transmissão da Arena */

/* ========================================
   MODO TRANSMISSÃO - LAYOUT PURO
======================================== */

.transmission-mode {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
    overflow: hidden;
}

.transmission-mode #main-nav {
    display: none !important;
}

.transmission-mode #content-display {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    background: transparent;
}

.transmission-mode #duel-animation {
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

/* Remove elementos vazios que podem criar quadrados negros */
.transmission-mode .action-display > *:empty {
    display: none !important;
}

.transmission-mode .action-display {
    background: none !important;
}

/* ========================================
   EFEITOS DE IMPACTO - TREMIDINHA DINÂMICA
======================================== */

@keyframes damage-shake {
    0% {
        transform: translateX(0) translateY(0);
    }
    10% {
        transform: translateX(-8px) translateY(-2px);
    }
    20% {
        transform: translateX(8px) translateY(2px);
    }
    30% {
        transform: translateX(-6px) translateY(-1px);
    }
    40% {
        transform: translateX(6px) translateY(1px);
    }
    50% {
        transform: translateX(-4px) translateY(-1px);
    }
    60% {
        transform: translateX(4px) translateY(1px);
    }
    70% {
        transform: translateX(-2px) translateY(-0.5px);
    }
    80% {
        transform: translateX(2px) translateY(0.5px);
    }
    90% {
        transform: translateX(-1px) translateY(-0.25px);
    }
    100% {
        transform: translateX(0) translateY(0);
    }
}

@keyframes heavy-damage-shake {
    0% {
        transform: translateX(0) translateY(0) rotate(0deg);
    }
    5% {
        transform: translateX(-12px) translateY(-3px) rotate(-1deg);
    }
    10% {
        transform: translateX(12px) translateY(3px) rotate(1deg);
    }
    15% {
        transform: translateX(-10px) translateY(-2px) rotate(-0.8deg);
    }
    20% {
        transform: translateX(10px) translateY(2px) rotate(0.8deg);
    }
    25% {
        transform: translateX(-8px) translateY(-1px) rotate(-0.6deg);
    }
    30% {
        transform: translateX(8px) translateY(1px) rotate(0.6deg);
    }
    35% {
        transform: translateX(-6px) translateY(-1px) rotate(-0.4deg);
    }
    40% {
        transform: translateX(6px) translateY(1px) rotate(0.4deg);
    }
    50% {
        transform: translateX(-4px) translateY(-0.5px) rotate(-0.2deg);
    }
    60% {
        transform: translateX(4px) translateY(0.5px) rotate(0.2deg);
    }
    70% {
        transform: translateX(-2px) translateY(-0.25px) rotate(-0.1deg);
    }
    80% {
        transform: translateX(2px) translateY(0.25px) rotate(0.1deg);
    }
    90% {
        transform: translateX(-1px) translateY(-0.1px) rotate(0deg);
    }
    100% {
        transform: translateX(0) translateY(0) rotate(0deg);
    }
}

@keyframes attack-lunge {
    0% {
        transform: translateX(0) scale(1);
    }
    20% {
        transform: translateX(-15px) scale(1.05);
    }
    40% {
        transform: translateX(30px) scale(1.1);
    }
    60% {
        transform: translateX(10px) scale(1.05);
    }
    80% {
        transform: translateX(-5px) scale(1.02);
    }
    100% {
        transform: translateX(0) scale(1);
    }
}

@keyframes critical-impact {
    0% {
        transform: translateX(0) translateY(0) scale(1);
        filter: brightness(1) hue-rotate(0deg);
    }
    10% {
        transform: translateX(-15px) translateY(-5px) scale(1.08);
        filter: brightness(1.5) hue-rotate(15deg);
    }
    20% {
        transform: translateX(15px) translateY(5px) scale(1.06);
        filter: brightness(1.3) hue-rotate(-10deg);
    }
    30% {
        transform: translateX(-12px) translateY(-3px) scale(1.04);
        filter: brightness(1.2) hue-rotate(8deg);
    }
    40% {
        transform: translateX(12px) translateY(3px) scale(1.02);
        filter: brightness(1.1) hue-rotate(-5deg);
    }
    50% {
        transform: translateX(-8px) translateY(-2px) scale(1.01);
        filter: brightness(1.05) hue-rotate(3deg);
    }
    60% {
        transform: translateX(8px) translateY(2px) scale(1);
        filter: brightness(1.02) hue-rotate(-2deg);
    }
    70% {
        transform: translateX(-4px) translateY(-1px) scale(1);
        filter: brightness(1.01) hue-rotate(1deg);
    }
    80% {
        transform: translateX(4px) translateY(1px) scale(1);
        filter: brightness(1) hue-rotate(0deg);
    }
    90% {
        transform: translateX(-2px) translateY(-0.5px) scale(1);
        filter: brightness(1) hue-rotate(0deg);
    }
    100% {
        transform: translateX(0) translateY(0) scale(1);
        filter: brightness(1) hue-rotate(0deg);
    }
}

/* ========================================
   CLASSES DE EFEITO PARA APLICAÇÃO DINÂMICA
======================================== */

.transmission-mode .card-container.taking-damage,
.transmission-mode .champion-card.taking-damage {
    animation: damage-shake 0.6s ease-in-out;
}

.transmission-mode .card-container.taking-heavy-damage,
.transmission-mode .champion-card.taking-heavy-damage {
    animation: heavy-damage-shake 0.8s ease-in-out;
}

.transmission-mode .card-container.attacking,
.transmission-mode .champion-card.attacking {
    animation: attack-lunge 0.7s ease-out;
}

.transmission-mode .card-container.critical-hit,
.transmission-mode .champion-card.critical-hit {
    animation: critical-impact 1s ease-in-out;
}

/* ========================================
   EFEITOS DE PARTÍCULAS DE IMPACTO
======================================== */

.transmission-mode .impact-particles {
    position: absolute;
    pointer-events: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.transmission-mode .impact-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, #ff6b35, #ff8c42);
    border-radius: 50%;
    animation: particle-burst 0.8s ease-out forwards;
}

@keyframes particle-burst {
    0% {
        opacity: 1;
        transform: scale(1) translate(0, 0);
    }
    100% {
        opacity: 0;
        transform: scale(0.2) translate(var(--particle-x, 0), var(--particle-y, 0));
    }
}

/* ========================================
   PULSO DE DANO - FEEDBACK VISUAL
======================================== */

/* Removido: agora usamos definição em anti-flickering.css para overlay de pulso */

/* ========================================
   MODO TRANSMISSÃO - CARTAS AMPLIADAS
======================================== */

.transmission-mode .card-container,
.transmission-mode .champion-card {
    transition: all 0.3s ease;
    position: relative;
    overflow: visible;
}

.transmission-mode .card-container::before,
.transmission-mode .champion-card::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.transmission-mode .card-container.in-combat::before,
.transmission-mode .champion-card.in-combat::before {
    opacity: 1;
}

/* ========================================
   NARRAÇÃO APRIMORADA PARA TRANSMISSÃO
======================================== */

.transmission-mode .narration {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 15px 30px;
    border-radius: 25px;
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    max-width: 80vw;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    /* Evite forçar display/opacidade/visibilidade aqui para prevenir reflows durante ações */
}

.transmission-mode .narration.damage-text {
    color: #ff4757;
    animation: narration-pulse 0.5s ease-out;
}

/* CURA CRÍTICA: Remove apenas a narração padrão vazia, não nossa transmissão */
.transmission-mode .narration-text:empty {
    display: none !important;
}

.transmission-mode .narration-text:not(.narration) {
    display: none !important;
}

/* Remove fundos escuros de elementos vazios */
.transmission-mode .action-display > div:empty {
    background: none !important;
    min-height: 0 !important;
}

@keyframes narration-pulse {
    0% {
        transform: translateX(-50%) scale(0.9);
    }
    50% {
        transform: translateX(-50%) scale(1.05);
    }
    100% {
        transform: translateX(-50%) scale(1);
    }
}

/* ========================================
   REMOVER BRILHOS ESTÁTICOS
======================================== */

.transmission-mode .glow,
.transmission-mode .static-glow,
.transmission-mode .champion-card .glow-effect {
    display: none !important;
}

/* Substituir por efeitos dinâmicos */
.transmission-mode .card-container.active,
.transmission-mode .champion-card.active {
    box-shadow: 0 0 20px rgba(74, 144, 226, 0.6);
    border: 2px solid rgba(74, 144, 226, 0.8);
}