/* === Tela de Finalização do Duelo === */
.duel-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 420px;
    padding: 32px 0 24px 0;
    background: linear-gradient(135deg, #1a1333 60%, #2c1a3a 100%);
    border-radius: 24px;
    box-shadow: 0 0 32px 8px rgba(80, 0, 120, 0.18);
    position: relative;
    animation: fadeInFinale 0.8s cubic-bezier(0.25, 0.8, 0.25, 1) both;
}
.duel-results.animated-finale {
    animation: popFinale 1.2s cubic-bezier(0.25, 0.8, 0.25, 1) both;
}
@keyframes fadeInFinale {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes popFinale {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    60% {
        opacity: 1;
        transform: scale(1.08);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
.champion-art-amplified {
    width: 220px;
    height: 320px;
    margin-bottom: 18px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 0 32px 8px rgba(80, 0, 120, 0.22);
    background: #2c1a3a;
    display: flex;
    align-items: center;
    justify-content: center;
}
.champion-art-amplified img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 0 24px 2px rgba(0, 0, 0, 0.45);
}
.champion-art-amplified.default-art {
    background: repeating-linear-gradient(135deg, #2c1a3a 0px, #3a1a4a 24px);
    color: #fff;
    font-size: 2.2em;
    display: flex;
    align-items: center;
    justify-content: center;
}
.winner-card {
    background: rgba(40, 20, 60, 0.92);
    border-radius: 18px;
    box-shadow: 0 0 24px 2px rgba(0, 0, 0, 0.25);
    padding: 24px 32px 18px 32px;
    margin-bottom: 18px;
    text-align: center;
    position: relative;
}
.winner-tag {
    display: inline-block;
    background: linear-gradient(90deg, #ff33cc 40%, #6c00ff 100%);
    color: #fff;
    font-weight: bold;
    font-size: 1.2em;
    padding: 6px 18px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(255, 0, 169, 0.12);
    margin-bottom: 12px;
    letter-spacing: 1px;
}
.alchemist-name {
    font-size: 1.5em;
    font-weight: 700;
    color: #ffe6ff;
    margin-bottom: 8px;
    text-shadow: 0 1px 8px #6c00ff88;
}
.champion-evolution-panel {
    background: rgba(60, 30, 80, 0.85);
    border-radius: 14px;
    box-shadow: 0 0 12px 2px rgba(80, 0, 120, 0.12);
    padding: 18px 24px;
    margin-top: 12px;
    text-align: left;
    color: #f8f8ff;
    font-size: 1.08em;
}
.champion-evolution-panel h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.18em;
    color: #ff33cc;
    text-shadow: 0 1px 6px #6c00ff44;
}
.evolution-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 18px;
    margin-bottom: 6px;
}
.evolution-stats div {
    font-size: 1em;
    color: #ffe6ff;
    background: rgba(40, 20, 60, 0.18);
    border-radius: 6px;
    padding: 4px 10px;
}
.evolution-level {
    font-size: 1.1em;
    color: #ff33cc;
    margin-bottom: 6px;
    font-weight: 600;
}
.evolution-name.celestial {
    color: #6cff00;
    text-shadow: 0 1px 8px #6cff0088;
}
.evolution-name.abissal {
    color: #ff33cc;
    text-shadow: 0 1px 8px #ff33cc88;
}
.duel-summary {
    font-size: 1.08em;
    color: #ffe6ff;
    margin-top: 18px;
    text-align: center;
    text-shadow: 0 1px 6px #6c00ff44;
}
.attribute-line {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    width: 100%;
    min-width: 0;
    padding: 0;
    margin: 0 0 2px 0;
    white-space: nowrap;
    overflow: hidden;
}
.attribute-line > .attribute-label {
    min-width: 0;
    text-align: left;
    padding-right: 4px; /* antes: 8px (reduz o espaço após ":") */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.attribute-line > .value {
    display: inline-block;
    font-weight: bold;
    white-space: nowrap;
    margin-left: 0;
    min-width: 24px; /* antes: 32px (deixa o valor mais próximo do ":") */
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Ajuste: evitar sobrescrever as cores de tema; usar especificidade leve sem !important */
.value.positive {
    color: var(--cor-cura);
}
.value.negative {
    color: var(--cor-texto-secundario);
}
.value.fury {
    color: #ff33cc;
    font-weight: bold;
    margin-left: 4px;
}
/* Atributos das cartas em linha única, compactos e elegantes */
/* Atributos restaurados: cada linha block, label e valor lado a lado, espaçamento harmônico */
.card-attributes {
    margin: 0 0 8px 0;
    padding: 0;
}

.attribute-line {
    margin: 0 0 2px 0;
    padding: 0 4px;
    font-size: 1em;
    line-height: 1.5;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px; /* antes: 8px (reduz o espaço entre label e valor) */
}
.attribute-line > .value:not(:first-child) {
    margin-left: 0; /* gap já cuida do espaçamento */
}
.attribute-line::first-line {
    flex-grow: 1;
}
/* Não force transformação na face frontal aqui; o flip depende da rotação padrão definida no componente. */
/* FLIP CORRIGIDO: Garante que .card-front e .card-display fiquem visíveis após a virada */
.card-flipper {
    position: relative !important;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d !important;
}
.card-front,
.card-back {
    /* Fundamental para o flip 3D: a face oculta não deve aparecer */
    backface-visibility: hidden !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.card-container.flip-permitida .card-front {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 2 !important;
}
.card-container.flip-permitida .card-back {
    display: none !important;
}
.card-container.front-locked .card-front {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 2 !important;
}
.card-container.front-locked .card-back {
    display: none !important;
}
/* Quando travado na frente, congele o flipper virado e desative transições para evitar giros */
.card-container.front-locked .card-flipper {
    transform: rotateY(180deg) !important;
    transition: none !important;
}
.card-container.front-locked .card-front {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.card-container.front-locked .card-back {
    display: none !important;
}

/* Durante a apresentação/contagem, bloqueie a frente completamente */
.card-container.presentation-lock .card-front {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}
.card-container.presentation-lock .card-display {
    opacity: 0 !important;
    visibility: hidden !important;
}
/* Durante a contagem, o flipper não deve animar nem virar; mantenha verso à mostra */
.card-container.presentation-lock .card-flipper {
    transform: rotateY(0deg) !important; /* mostra o verso */
    transition: none !important;
}
.card-container.presentation-lock .card-back {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}
/* Em presentation-lock, nenhum descendente "force-visible" pode reverter a ocultação */
.card-container.presentation-lock .force-visible,
.card-container.presentation-lock [data-force-visible='true'] {
    opacity: 0 !important;
    visibility: hidden !important;
}
/* Se o PRÓPRIO contêiner estiver marcado como force-visible ou data-force-visible, ainda assim mantenha a frente oculta */
.card-container.presentation-lock.force-visible .card-front,
.card-container.presentation-lock[data-force-visible='true'] .card-front {
    display: none !important;
}
.card-container.presentation-lock.force-visible .card-display,
.card-container.presentation-lock[data-force-visible='true'] .card-display {
    opacity: 0 !important;
    visibility: hidden !important;
}
/* Mas o verso deve permanecer visível durante a apresentação, mesmo sob force-visible */
.card-container.presentation-lock.force-visible .card-back,
.card-container.presentation-lock[data-force-visible='true'] .card-back {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}
/* Garantia de combate: fora da apresentação, nunca revele o verso */
.arena-combate .card-container:not(.presentation-lock) .card-back {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}
.arena-combate .card-container:not(.presentation-lock) .card-front {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 2 !important;
}
/* Além disso, garanta a orientação correta do flipper durante o combate */
.arena-combate .card-container:not(.presentation-lock) .card-flipper {
    transform: rotateY(180deg) !important;
    transition: none !important;
}

/* Fallback global: em QUALQUER lugar fora da apresentação, mantenha a frente visível e o verso oculto */
.card-container:not(.presentation-lock) .card-back {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}
.card-container:not(.presentation-lock) .card-front {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 2 !important;
}
.card-container:not(.presentation-lock) .card-flipper {
    transform: rotateY(180deg) !important;
    transition: none !important;
}
/* Lux e Forma restauradas: .card-container elegante e funcional */
.card-container {
    min-width: 220px;
    min-height: 320px;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 10;
    position: relative;
    box-shadow: 0 0 24px 2px rgba(0, 0, 0, 0.45), 0 2px 8px 0 rgba(255, 0, 169, 0.08);
    border-radius: 18px;
    background: none !important;
    border: none !important;
}
/* Lux e Forma: aplicar apenas quando a frente estiver permitida/visível */
.card-container.flip-permitida .card-display,
.card-container.front-locked .card-display {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 100 !important;
    background: linear-gradient(135deg, rgba(40, 40, 80, 0.92) 60%, rgba(60, 20, 80, 0.85) 100%) !important;
    color: #f8f8ff !important;
    box-shadow: 0 0 24px 2px rgba(0, 0, 0, 0.45), 0 2px 8px 0 rgba(255, 0, 169, 0.08);
    border-radius: 18px;
    border: none !important;
}
.card-header,
.card-body,
.card-footer,
.card-attributes,
.card-lore,
.card-abilities,
.card-status,
.card-alchemist {
    color: #f8f8ff !important;
    opacity: 1 !important;
    z-index: 101 !important;
    text-shadow: 0 1px 4px #000a;
}
/* Fim do bloco consolidado de Lux e Forma */
/* anti-flickering.css */
/* Estilos dedicados para prevenir flickering de elementos durante animações */

/* Garantia global para cartas visíveis - com otimização de desempenho */
.card-container,
.card-container.attacking,
.card-container.taking-damage {
    /* Garantia de visibilidade sem alterar o modelo de layout */
    opacity: 1 !important;
    visibility: visible !important;
    /* NUNCA force display aqui para evitar reflow/layout thrash em flex/grid */
    pointer-events: auto !important;
    transform: translateZ(0); /* Versão mais leve de GPU acceleration */
}

/* Classe especial aplicada a elementos protegidos pelo sistema anti-flickering */
.anti-flicker-protected {
    /* Manter visível sem mudar display para não mexer no fluxo */
    opacity: 1 !important;
    visibility: visible !important;
    position: relative; /* Garante o contexto de empilhamento */
    z-index: 1; /* Previne que seja coberto por outros elementos */
}

/* Força visibilidade durante animações */
/*
   IMPORTANTE: Não force "display: block" em TODOS os descendentes de .force-visible,
   pois isso quebra containers flex (ex.: .card-status) durante animações de ataque.
   Mantemos apenas visibilidade/opacidade.
*/
.force-visible {
    opacity: 1 !important;
    visibility: visible !important;
}
/* Removido o seletor global de descendentes para permitir animações internas e evitar blink */

/* Reforço específico: preserva layout flex de status durante ataques quando .force-visible está ativo */
.force-visible .card-status {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Otimização para elementos em animação */
[data-animating='true'],
[data-animating-damage='true'],
.animating {
    opacity: 1 !important;
    visibility: visible !important;
    backface-visibility: hidden; /* Otimização de rendering */
}
/* Evite forçar display em seletores genéricos; limite aos containers já cobertos acima */
.attacking,
.taking-damage,
.damage-pulse {
    opacity: 1 !important;
    visibility: visible !important;
    backface-visibility: hidden;
}

/* Janela pré-ataque/dano (antes da classe .attacking aparecer): nunca mostre o verso */
.card-container[data-animating-attack]:not(.presentation-lock) .card-back,
.card-container[data-animating-damage]:not(.presentation-lock) .card-back {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}
.card-container[data-animating-attack]:not(.presentation-lock) .card-front,
.card-container[data-animating-damage]:not(.presentation-lock) .card-front {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 2 !important;
}
.card-container[data-animating-attack]:not(.presentation-lock) .card-flipper,
.card-container[data-animating-damage]:not(.presentation-lock) .card-flipper {
    transform: rotateY(180deg) !important;
    transition: none !important;
}

/* Durante animações de combate, nunca revele o verso, mesmo sem classes de flip */
.card-container.attacking:not(.presentation-lock) .card-back,
.card-container.taking-damage:not(.presentation-lock) .card-back,
.card-container.damage-pulse:not(.presentation-lock) .card-back {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}
.card-container.attacking:not(.presentation-lock) .card-front,
.card-container.taking-damage:not(.presentation-lock) .card-front,
.card-container.damage-pulse:not(.presentation-lock) .card-front {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 2 !important;
}
/* E garante orientação correta do flipper durante o ataque para não mostrar o verso */
.card-container.attacking:not(.presentation-lock) .card-flipper,
.card-container.taking-damage:not(.presentation-lock) .card-flipper,
.card-container.damage-pulse:not(.presentation-lock) .card-flipper {
    transform: rotateY(180deg) !important;
    transition: none !important;
}

/* Regra preventiva: se marcado como force-visible (ou atributo), o verso não deve aparecer */
.card-container.force-visible:not(.presentation-lock) .card-back,
.card-container[data-force-visible='true']:not(.presentation-lock) .card-back {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}
.card-container.force-visible:not(.presentation-lock) .card-front,
.card-container[data-force-visible='true']:not(.presentation-lock) .card-front {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.card-container.force-visible:not(.presentation-lock) .card-flipper,
.card-container[data-force-visible='true']:not(.presentation-lock) .card-flipper {
    transform: rotateY(180deg) !important;
    transition: none !important;
}

/* Proteção extra para contêiner de duelo */
#arena-view .combat-container {
    contain: content; /* Isolamento de layout para otimização */
    will-change: contents; /* Sinaliza ao navegador otimizações de renderização */
}

/* Garantia de visibilidade para status e indicadores */
.card-status,
.regeneration-container,
.damage-indicator,
.hp-indicator {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none; /* Permite cliques nos elementos abaixo */
    z-index: 10; /* Mantém acima das cartas */
}

/* Compatibilidade com transformações 3D - simplificado */
.card-container {
    backface-visibility: hidden;
}

/* Removemos a animação infinita que estava causando problemas de desempenho */

/* ---------- Otimizações adicionais consolidadas (do arquivo raiz) ---------- */
/* Ativa aceleração e suaviza transições para elementos animados e indicadores */
.floating-indicator,
.attack-cost-container,
.damage-indicator,
.attack-cost-indicator,
.regeneration-indicator,
.attack-bonus-indicator,
.defense-bonus-indicator,
.fury-bonus-indicator {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
    will-change: transform, opacity;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

/* Previne animações sobrepostas */
[data-animating-attack='true'],
[data-animating-damage='true'],
[data-rendering-in-progress='true'] {
    pointer-events: none;
}

/* Indicadores flutuantes: alta prioridade de empilhamento e suavidade */
.floating-indicator {
    position: absolute !important;
    z-index: 9999 !important;
    pointer-events: none !important;
    white-space: nowrap;
    transform: translate3d(0, 0, 0);
    will-change: transform, opacity;
    transition: transform 300ms cubic-bezier(0.25, 0.1, 0.25, 1), opacity 300ms cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

/* Suavização específica para estados de ataque e dano */
/* Aplicar transições apenas no conteúdo interno para não tocar no container */
.card-container.attacking .card-display {
    transform: translate3d(0, 0, 0);
    will-change: transform;
    transition: transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    image-rendering: optimizeSpeed;
}
.card-container.taking-damage .card-display,
.card-container.damage-pulse .card-display {
    transform: translate3d(0, 0, 0);
    will-change: transform, opacity, box-shadow;
    transition: all 200ms cubic-bezier(0.215, 0.61, 0.355, 1) !important;
    image-rendering: optimizeSpeed;
}

/* Overlay de pulso de dano como filho do card (não altera estado do container) */
.card-container .damage-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border: 3px solid #ff4757;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    z-index: 1200; /* acima do conteúdo do card */
    animation: damage-pulse-animation 0.5s ease-out;
}

@keyframes damage-pulse-animation {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.5);
    }
    50% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2);
    }
}

/* Indicador de custo: nitidez em fontes e aceleração */
.attack-cost-indicator {
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate3d(0, 0, 0);
    will-change: transform, opacity;
}

/* Quadradinho padrão dos indicadores */
.indicator-box {
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background-color: rgba(0, 0, 0, 0.7);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
    transform: translate3d(0, 0, 0);
    will-change: transform;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
}

/* Contenção para evitar reflows caros durante transições de tela */
.arena-container,
.combate-container,
.card-container {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    will-change: transform, opacity;
    contain: layout style paint;
}

/* Remoção suave de elementos */
.removed-element {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 200ms ease-out, visibility 0s 200ms !important;
}

/* Classe opcional de depuração de visibilidade */
.debug-visibility {
    border: 3px solid red !important;
}

/* ------------ Kill-switch de Combate (final do arquivo para máxima precedência) ------------ */
/* Quando a arena estiver em combate ativo (data-combate='on'), o verso NUNCA aparece */
.arena-combate[data-combate='on'] .card-back {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
.arena-combate[data-combate='on'] .card-front {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
}
.arena-combate[data-combate='on'] .card-flipper {
    transform: rotateY(180deg) !important;
    transition: none !important;
    will-change: transform !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
}
.arena-combate[data-combate='on'] .card-container.attacking .card-front,
.arena-combate[data-combate='on'] .card-container.taking-damage .card-front,
.arena-combate[data-combate='on'] .card-container.damage-pulse .card-front {
    z-index: 2 !important;
}

/* BLOQUEIO DE TRANSIÇÕES NO CONTAINER DURANTE COMBATE E APRESENTAÇÃO */
/* Evita piscadas causadas por transitions herdadas (ex.: arena_animations.css) */
.arena-combate .card-container,
.arena-combate[data-combate='on'] .card-container,
.card-container.presentation-lock {
    opacity: 1 !important; /* nunca deixe opaco */
    transition: none !important; /* sem transitions no container */
    animation: none !important; /* e sem animations no container */
}
/* Classes auxiliares que alguns temas usam não devem afetar opacidade/transform na arena principal */
.arena-combate .card-container.em-cena {
    opacity: 1 !important;
    transform: none !important;
}