/* ========================================= */
/* --- ESMERALDA (EMERALD FIRE) STYLES ---   */
/* ========================================= */

/* Fondos y Bordes Base - Fuego Oscuro y Humo */
[data-rarity="Esmeralda"] .card-root {
    border-color: #10b981;
    /* Fondo que simula el calor ascendente: negro quemado abajo, verde ardiente arriba */
    background: linear-gradient(to top, #000000 0%, #022c22 40%, #065f46 100%);
    box-shadow: 0 0 25px rgba(16, 185, 129, 0.6);
}

/* Base geométrica oscurecida simulando carbón/ceniza caliente */
[data-rarity="Esmeralda"] .card-bg {
/*    background-image: url("/img/geometric.png");
    background-size: 35%;
    filter: sepia(0.5) hue-rotate(110deg) saturate(2) brightness(0.6) contrast(1.4);
    opacity: 0.9;*/
}

/* Oscurecimiento fuerte en los bordes para que resalte el fuego central */
[data-rarity="Esmeralda"] .card-overlay {
    background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,20,10,0.6) 100%);
}

/* Arte de la Carta - Sombra interna ardiente */
[data-rarity="Esmeralda"] .card-art {
    border-color: rgba(52, 211, 153, 0.8);
    box-shadow: inset 0 -15px 30px rgba(0, 0, 0, 0.7), inset 0 0 20px rgba(16, 185, 129, 0.5);
}

/* Etiqueta Inferior (Flujo de energía térmica) */
.rarity-pill.Esmeralda, [data-rarity="Esmeralda"] .badge-rarity {
    color: #000000;
    border-color: #a7f3d0;
    background: linear-gradient(90deg, #10b981, #34d399, #6ee7b7, #10b981);
    background-size: 200% 200%;
    animation: emerald-fire-flow 3s linear infinite;
    box-shadow: 0 0 15px rgba(52, 211, 153, 0.8);
    font-weight: bold;
}

@keyframes emerald-fire-flow {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

/* ========================================= */
/* SHINE LAYERS (Llamas y Brazas Esmeralda)  */
/* ========================================= */

[data-rarity="Esmeralda"] .fx-esmeralda {
    display: block;
    overflow: hidden;
    /* Colores del fuego verde */
    --fire-core: hsla(150, 100%, 75%, 0.6); /* Menta incandescente */
    --fire-mid: hsla(150, 100%, 45%, 0.5); /* Esmeralda vivo */
    --fire-edge: hsla(150, 100%, 20%, 0.3); /* Verde oscuro humo */

    background-image:
    /* 1. Ráfagas verticales que simulan el movimiento errático de las llamas */
    repeating-linear-gradient( calc(-45deg + (var(--pointer-num-x) * 0.5deg)), transparent 0%, rgba(52, 211, 153, 0.15) 5%, transparent 10%, rgba(16, 185, 129, 0.15) 15%, transparent 20% ),
    /* 2. Núcleo de calor dinámico que sigue al cursor */
    radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), var(--fire-core) 0%, var(--fire-mid) 25%, var(--fire-edge) 55%, transparent 85% );
    /* Screen ilumina como fuego pero evita que la imagen del jugador se sature de blanco */
    mix-blend-mode: screen;
    filter: brightness(calc(1 + (var(--hyp) * 0.4))) contrast(1.2) saturate(1.3);
    /* Mantengo un brillo de fuego visible en reposo */
    opacity: calc(var(--opacity) * 0.8 + 0.2);
    transition: opacity 0.2s ease-out;
    z-index: 10;
}

    /* Sub-capa BEFORE: Humo y resplandor ambiental oscuro */
    [data-rarity="Esmeralda"] .fx-esmeralda:before {
        content: "";
        position: absolute;
        inset: 0;
        /* Humo oscuro que se opone al resplandor principal */
        background-image: radial-gradient( circle at calc(100% - var(--pointer-x)) calc(100% - var(--pointer-y)), rgba(16, 185, 129, 0.3) 0%, rgba(0, 0, 0, 0.5) 80% );
        mix-blend-mode: overlay;
        opacity: calc(var(--opacity) * 0.9);
        z-index: 11;
    }

    /* Sub-capa AFTER: Brazas y chispas de fuego que flotan violentamente */
    [data-rarity="Esmeralda"] .fx-esmeralda:after {
        content: "";
        position: absolute;
        inset: -10%;
        /* Puntos brillantes de diferentes tamaños simulando brazas calientes */
        background-image: radial-gradient(circle at 10% 20%, rgba(110, 231, 183, 0.9) 1.5px, transparent 2.5px), radial-gradient(circle at 40% 60%, rgba(16, 185, 129, 0.8) 2px, transparent 3px), radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.9) 1px, transparent 2px), radial-gradient(circle at 70% 80%, rgba(4, 120, 87, 0.8) 2.5px, transparent 3.5px), radial-gradient(circle at 30% 90%, rgba(52, 211, 153, 0.9) 1.5px, transparent 2.5px), radial-gradient(circle at 50% 10%, rgba(255, 255, 255, 0.9) 2px, transparent 3px), radial-gradient(circle at 90% 60%, rgba(16, 185, 129, 0.8) 1.5px, transparent 2.5px), radial-gradient(circle at 15% 75%, rgba(52, 211, 153, 0.9) 2.5px, transparent 3.5px), radial-gradient(circle at 60% 40%, rgba(167, 243, 208, 0.7) 1px, transparent 2px), radial-gradient(circle at 85% 90%, rgba(255, 255, 255, 0.8) 2px, transparent 3px);
        /* Tamaños irregulares para evitar patrones notorios */
        background-size: 100% 100%, 120% 120%, 90% 90%, 110% 110%, 130% 130%, 85% 85%, 105% 105%, 115% 115%, 95% 95%, 125% 125%;
        /* MOVIMIENTO ASCENDENTE: Las brazas suben a diferentes velocidades según muevas el mouse */
        background-position: calc(var(--pointer-num-x) * 1.5px) calc(var(--pointer-num-y) * -4.5px), calc(var(--pointer-num-x) * -2.5px) calc(var(--pointer-num-y) * -5.5px), calc(var(--pointer-num-x) * 3px) calc(var(--pointer-num-y) * -3.5px), calc(var(--pointer-num-x) * -1.5px) calc(var(--pointer-num-y) * -6.5px), calc(var(--pointer-num-x) * 2.5px) calc(var(--pointer-num-y) * -4.5px), calc(var(--pointer-num-x) * -3.5px) calc(var(--pointer-num-y) * -5.5px), calc(var(--pointer-num-x) * 1px) calc(var(--pointer-num-y) * -7.5px), calc(var(--pointer-num-x) * -2px) calc(var(--pointer-num-y) * -3px), calc(var(--pointer-num-x) * 4px) calc(var(--pointer-num-y) * -6px), calc(var(--pointer-num-x) * -1px) calc(var(--pointer-num-y) * -4px);
        mix-blend-mode: screen;
        opacity: calc(var(--opacity) * var(--hyp) * 2);
        /* Resplandor neón en las brazas */
        filter: drop-shadow(0 0 3px rgba(16, 185, 129, 1));
        z-index: 12;
    }

/* ========================================= */
/* GLARE LAYERS (Reflejo directo del fuego)  */
/* ========================================= */

[data-rarity="Esmeralda"] .card__glare {
    /* Destello vibrante verde flúor que viaja con la luz */
    background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), rgba(167, 243, 208, 0.6) 0%, rgba(16, 185, 129, 0.2) 30%, transparent 65% );
    filter: brightness(1.2) contrast(1.2);
    opacity: calc( var(--hyp) * var(--opacity) * 0.9 );
    mix-blend-mode: overlay;
    background-color: transparent;
    z-index: 20;
}

/* Borde Resplandeciente Reactivo - Anillo de Fuego */
[data-rarity="Esmeralda"] .card-border {
    border-color: #6ee7b7;
    box-shadow: 0 0 25px rgba(16, 185, 129, 0.9), inset 0 0 20px rgba(4, 120, 87, 0.7), 0 0 5px rgba(255, 255, 255, 0.4);
    opacity: calc(var(--opacity) * 0.9 + 0.1);
    z-index: 25;
}