/* =========================================
   Rarity badges
   ========================================= */
.rarity-mythic {
    background: #ff006e; color: #fff;
}
.rarity-ultra-legendary {
    background: #ff4500; color: #fff;
}
.rarity-legendary {
    background: #e4b600; color: #000;
}
.rarity-epic {
    background: #a74aff; color: #fff;
}
.rarity-rare {
    background: #3498db; color: #fff;
}
.rarity-uncommon {
    background: #2ecc71; color: #fff;
}
.rarity-common {
    background: #999999; color: #fff;
}
/* =========================================
    Rarity colour stripes
========================================= */
.card-legendary::after,
.card-ultra-legendary::after,
.card-epic::after,
.card-mythic::after,
.card-rare::after {
    content: "";
    position: absolute;
    top: 10%;
    left: 60%;
    width: 20%;
    height: 100%;
    /* gradient built from variables set per rarity */
    background: linear-gradient(
            120deg,
            var(--glow-0) 0%,
            var(--glow-1) 40%,
            var(--glow-2) 50%,
            var(--glow-1) 60%,
            var(--glow-0) 100%
    );
    transform: skewX(-20deg);
    z-index: -1;
    pointer-events: none;
    border-radius: 16px;
    filter: blur(8px);
}
/* =========================================
   Rarity Palettes (only the colors differ)
   ========================================= */
.card-legendary {
    --glow-0: rgba(218, 165, 32, 0);
    --glow-1: rgba(255, 215, 0, 0.35);
    --glow-2: rgba(255, 239, 184, 0.5);
}

.card-ultra-legendary {
    --glow-0: rgba(139,   0,   0, 0);
    --glow-1: rgba(255,  69,   0, 0.35);
    --glow-2: rgba(255,  99,  71, 0.5);
}

.card-epic {
    --glow-0: rgba(167,  74, 255, 0);
    --glow-1: rgba(200, 120, 255, 0.35);
    --glow-2: rgba(220, 160, 255, 0.5);
}

.card-mythic {
    --glow-0: rgba(255,   0, 110, 0);
    --glow-1: rgba(255,  80, 150, 0.35);
    --glow-2: rgba(255, 120, 180, 0.5);
}
.card-rare {
    --glow-0: rgba(52, 152, 219, 0);       /* transparent blue */
    --glow-1: rgba(100, 180, 230, 0.35);   /* lighter blue glow */
    --glow-2: rgba(150, 210, 240, 0.5);    /* brightest soft blue */
}