/* ========================================= */
/* --- FIRE (RUBY) CARD STYLES ---           */
/* ========================================= */

/* Fondos y Bordes Base - Calor y Humo */
[data-rarity="Ruby"] .card-root {
    border-color: #ff4500; /* Naranja rojizo ardiente */
    /* Base aclarada para que no se vea negro al reposar */
    background: linear-gradient(to top, #3a0000 0%, #8c0000 40%, #ff2a00 100%);
    box-shadow: 0 0 20px rgba(255, 69, 0, 0.5);
}

/* Base geométrica tintada de rojo oscuro simulando calor interno */
[data-rarity="Ruby"] .card-bg {

}

/* Oscurecimiento para que resalte el fuego */
[data-rarity="Ruby"] .card-overlay {
    /* Redujimos la sombra negra del 70% (0.7) al 35% (0.35) */
    background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 100%);
}

/* Arte de la Carta - Sombra interna ardiente */
[data-rarity="Ruby"] .card-art {
    border-color: rgba(255, 69, 0, 0.8);
    /* Sombra reducida para que no tape al jugador */
    box-shadow: inset 0 -15px 25px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(255, 69, 0, 0.5);
}

/* Etiqueta Inferior e Insignias */
.rarity-pill.Ruby, [data-rarity="Ruby"] .badge-rarity {
    color: #ffffff;
    border-color: #ff8c00;
    background: linear-gradient(135deg, #ff0000 0%, #ff8c00 100%);
    box-shadow: 0 0 12px rgba(255, 69, 0, 0.8);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.9);
}

/* ========================================= */
/* SHINE LAYERS (Efecto Llamas y Calor)      */
/* ========================================= */

[data-rarity="Ruby"] .fx-ruby {
    display: block;
    /* Colores del fuego */
    --fire-core: hsla(50, 100%, 70%, 0.8); /* Amarillo caliente */
    --fire-mid: hsla(30, 100%, 55%, 0.6); /* Naranja */
    --fire-edge: hsla(0, 100%, 40%, 0.4); /* Rojo oscuro */

    background-image:
    /* 1. Ráfagas verticales que simulan el movimiento de las llamas */
    repeating-linear-gradient( calc(-45deg + (var(--pointer-num-x) * 0.5deg)), transparent 0%, rgba(255, 100, 0, 0.15) 5%, transparent 10%, rgba(255, 30, 0, 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) 20%, var(--fire-edge) 50%, transparent 80% );
    background-blend-mode: screen, normal;
    mix-blend-mode: soft-light;
    filter: brightness(calc(1 + (var(--hyp) * 0.3))) contrast(1.2) saturate(1.5);
    /* Mantengo un 15% del fuego visible en reposo para darle vida constante */
    opacity: calc(var(--opacity) * 0.85 + 0.15);
    transition: opacity 0.2s ease-out;
}

    /* Sub-capa BEFORE: Humo y resplandor ambiental ambiental */
    [data-rarity="Ruby"] .fx-ruby:before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle at calc(100% - var(--pointer-x)) calc(100% - var(--pointer-y)), rgba(255, 69, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 80%); /* Humo aclarado */
        mix-blend-mode: overlay;
        opacity: calc(var(--opacity) * 0.8);
    }

    /* Sub-capa AFTER: Chispas y brasas (Sparks) que flotan */
    [data-rarity="Ruby"] .fx-ruby:after {
        content: "";
        position: absolute;
        inset: 0;
        /* Puntos brillantes esparcidos */
        background-image: radial-gradient(circle at 10% 20%, rgba(255, 200, 0, 0.9) 1px, transparent 2px), radial-gradient(circle at 40% 60%, rgba(255, 100, 0, 0.8) 1.5px, transparent 2px), radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.9) 1px, transparent 2px), radial-gradient(circle at 70% 80%, rgba(255, 50, 0, 0.8) 2px, transparent 3px), radial-gradient(circle at 30% 90%, rgba(255, 150, 0, 0.9) 1px, transparent 2px);
        /* Las chispas se mueven hacia arriba y a los lados con el movimiento del mouse */
        background-position: calc(var(--pointer-num-x) * 1px) calc(var(--pointer-num-y) * -2px), calc(var(--pointer-num-x) * -1.5px) calc(var(--pointer-num-y) * -3px), calc(var(--pointer-num-x) * 2px) calc(var(--pointer-num-y) * -1.5px), calc(var(--pointer-num-x) * -0.5px) calc(var(--pointer-num-y) * -4px), calc(var(--pointer-num-x) * 1.5px) calc(var(--pointer-num-y) * -2.5px);
        mix-blend-mode: screen;
        opacity: calc(var(--opacity) * var(--hyp) * 1.5);
        filter: drop-shadow(0 0 2px rgba(255, 100, 0, 1));
    }

/* ========================================= */
/* GLARE LAYERS (Reflejo directo de luz)     */
/* ========================================= */

[data-rarity="Ruby"] .card__glare {
    /* Reflejo cálido anaranjado para acompañar el fuego */
    background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), rgba(255, 200, 100, 0.6) 0%, rgba(255, 69, 0, 0.2) 30%, transparent 70% );
    mix-blend-mode: overlay;
    opacity: calc(var(--opacity) * var(--hyp) * 0.9);
}

/* Borde Resplandeciente Reactivo - Ascuas rojas */
[data-rarity="Ruby"] .card-border {
    border: 2px solid #ffcc00;
    box-shadow: 0 0 25px rgba(255, 69, 0, 0.9), inset 0 0 15px rgba(255, 0, 0, 0.6), 0 0 8px rgba(255, 200, 0, 0.8);
    opacity: calc(var(--opacity) * 0.9 + 0.1);
}