/* ===========================
   LOCKED BADGES
   =========================== */

.lq-badge-pill-locked {
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb) !important;
    border-color: #d1d5db !important;
    color: #6b7280 !important;
}

.lq-badge-pill-locked::after {
    content: "🔒";
    margin-left: 6px;
    font-size: 0.95rem;
    opacity: 0.85;
}


/* ===========================
   COMPACT PILL BADGES
   =========================== */

.lq-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    box-shadow: 0 1px 4px rgba(15,23,42,0.12);
    margin: 4px 4px 0 0;
    white-space: nowrap;
    font-weight: 600;
}

/* Icon inside the pill */
.lq-badge-pill-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    line-height: 1;
}

/* Make BI icons + images align visually with emoji */
.lq-badge-pill-icon i {
    font-size: 1.2rem;
}

.lq-badge-pill-icon img {
    width: 16px;        /* You can tweak */
    height: 16px;
    object-fit: contain;
    display: block;
}

/* ===========================
     COMMON 20 options
   =========================== */

/* 1) Silver */
.lq-pill-common-1 {
    background: linear-gradient(135deg, #f9fafb, #e5e7eb);
    border-color: #d1d5db;
    color: #111827;
}

/* 2) Graphite */
.lq-pill-common-2 {
    background: linear-gradient(135deg, #111827, #1f2933);
    border-color: #4b5563;
    color: #f9fafb;
}

/* 3) Soft Gray */
.lq-pill-common-3 {
    background: #f3f4f6;
    border-color: #e5e7eb;
    color: #111827;
}

/* 4) Ice Blue */
.lq-pill-common-4 {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-color: #bfdbfe;
    color: #1e3a8a;
}

/* 5) Ocean Blue */
.lq-pill-common-5 {
    background: linear-gradient(135deg, #dbeafe, #3b82f6);
    border-color: #2563eb;
    color: #0b1120;
}

/* 6) Sky */
.lq-pill-common-6 {
    background: linear-gradient(135deg, #e0f2fe, #38bdf8);
    border-color: #0ea5e9;
    color: #0f172a;
}

/* 7) Royal Blue */
.lq-pill-common-7 {
    background: linear-gradient(135deg, #e0e7ff, #6366f1);
    border-color: #4f46e5;
    color: #020617;
}

/* 8) Indigo */
.lq-pill-common-8 {
    background: linear-gradient(135deg, #e0e7ff, #4f46e5);
    border-color: #4338ca;
    color: #eef2ff;
}

/* 9) Violet */
.lq-pill-common-9 {
    background: linear-gradient(135deg, #f5f3ff, #8b5cf6);
    border-color: #7c3aed;
    color: #312e81;
}

/* 10) Purple */
.lq-pill-common-10 {
    background: linear-gradient(135deg, #ede9fe, #a855f7);
    border-color: #9333ea;
    color: #2e1065;
}

/* 11) Magenta / Fuchsia */
.lq-pill-common-11 {
    background: linear-gradient(135deg, #fdf2ff, #e879f9);
    border-color: #d946ef;
    color: #701a75;
}

/* 12) Pink */
.lq-pill-common-12 {
    background: linear-gradient(135deg, #fdf2f8, #f472b6);
    border-color: #ec4899;
    color: #831843;
}

/* 13) Rose */
.lq-pill-common-13 {
    background: linear-gradient(135deg, #fff1f2, #fb7185);
    border-color: #f97373;
    color: #7f1d1d;
}

/* 14) Peach */
.lq-pill-common-14 {
    background: linear-gradient(135deg, #fff7ed, #fdba74);
    border-color: #fb923c;
    color: #7c2d12;
}

/* 15) Amber */
.lq-pill-common-15 {
    background: linear-gradient(135deg, #fffbeb, #facc15);
    border-color: #eab308;
    color: #78350f;
}

/* 16) Orange / Fire */
.lq-pill-common-16 {
    background: linear-gradient(135deg, #fff7ed, #fb923c, #f97316);
    border-color: #ea580c;
    color: #7c2d12;
}

/* 17) Lime */
.lq-pill-common-17 {
    background: linear-gradient(135deg, #f7fee7, #bef264);
    border-color: #84cc16;
    color: #365314;
}

/* 18) Emerald */
.lq-pill-common-18 {
    background: linear-gradient(135deg, #ecfdf5, #34d399);
    border-color: #10b981;
    color: #064e3b;
}

/* 19) Teal */
.lq-pill-common-19 {
    background: linear-gradient(135deg, #f0fdfa, #5eead4);
    border-color: #14b8a6;
    color: #115e59;
}

/* 20) Night (for dark theme sections) */
.lq-pill-common-20 {
    background: radial-gradient(circle at top, #111827, #020617);
    border-color: #374151;
    color: #e5e7eb;
}

/* ===========================
     RARE 9 options
   =========================== */
.lq-pill-rare-1 {
    position: relative;
    background: linear-gradient(
        135deg,
        #2e1065,
        #7e22ce,
        #ec4899,
        #f97316
    );
    background-size: 260% 260%;
    border-color: #e879f9;
    color: #fdf2ff;
    box-shadow:
        0 0 0 1px rgba(232,121,249,0.8),
        0 0 18px rgba(168,85,247,0.9);
    animation: lq-rare1-orchid-wave 4s ease-in-out infinite;
}

.lq-pill-rare-1::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: inherit;
    background: radial-gradient(circle at 25% 0%, rgba(255,255,255,0.45), transparent 60%);
    pointer-events: none;
}

@keyframes lq-rare1-orchid-wave {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}


.lq-pill-rare-2 {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 0% 0%, #fff7d6, #fde68a, #facc15);
    border-color: #facc15;
    color: #1f2937;
    box-shadow:
        0 0 0 1px rgba(250,204,21,0.8),
        0 0 18px rgba(250,204,21,0.9);
}

.lq-pill-rare-2::after {
    content: "";
    position: absolute;
    inset: -40%;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.95) 14%,
        rgba(255,255,255,0) 28%
    );
    transform: translateX(-80%);
    animation: lq-rare-regal-beam 2.8s linear infinite;
    pointer-events: none;
}

@keyframes lq-rare-regal-beam {
    from { transform: translateX(-80%); }
    to   { transform: translateX(80%); }
}

.lq-pill-rare-3 {
    position: relative;
    overflow: hidden;

    /* Neon-ish gradient */
    background: linear-gradient(
        135deg,
        #020617,
        #0f172a,
        #0ea5e9,
        #22d3ee,
        #38bdf8
    );
    background-size: 220% 220%;
    animation: lq-rare3-bg 4s ease-in-out infinite alternate;

    /* STATIC border + glow */
    border: 1px solid #38bdf8;
    color: #e0f2fe;
    box-shadow: 0 0 16px rgba(56,189,248,0.8);
}

/* animate only the background, not border/box-shadow */
@keyframes lq-rare3-bg {
    0%   { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* inner moving shine, kept inside the border */
.lq-pill-rare-3::after {
    content: "";
    position: absolute;
    inset: 1px;                      /* inset so it never touches border */
    border-radius: inherit;
    background: linear-gradient(
        120deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.55) 45%,
        rgba(255,255,255,0) 90%
    );
    transform: translateX(-80%);
    animation: lq-rare3-shine 3.2s linear infinite;
    pointer-events: none;
}

@keyframes lq-rare3-shine {
    from { transform: translateX(-80%); }
    to   { transform: translateX(80%); }
}

.lq-pill-rare-4 {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #2e1065, #4c1d95, #7c3aed);
    border-color: #a855f7;
    color: #f3e8ff;
    box-shadow:
        0 0 0 1px rgba(168,85,247,0.7),
        0 0 16px rgba(129,140,248,0.9);
}

.lq-pill-rare-4::after {
    content: "";
    position: absolute;
    inset: -40%;
    background: linear-gradient(
        120deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.65) 40%,
        rgba(255,255,255,0) 80%
    );
    transform: translateX(-60%);
    animation: lq-rare-purple-sheen 3.2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes lq-rare-purple-sheen {
    0%   { transform: translateX(-60%); }
    100% { transform: translateX(60%); }
}
.lq-pill-rare-5 {
    position: relative;
    overflow: hidden;
    background: linear-gradient(
        135deg,
        #0b1120,
        #1e40af,
        #3b82f6,
        #22d3ee
    );
    background-size: 220% 220%;
    border: 1px solid #60a5fa;       /* stays sharp */
    color: #e0f2fe;
    box-shadow:
        0 0 12px rgba(59,130,246,0.7),
        0 0 18px rgba(59,130,246,0.4);
    animation: lq-rare5-aurora-bg 4s ease-in-out infinite alternate;
}

@keyframes lq-rare5-aurora-bg {
    0%   { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* Moving shine stripe */
.lq-pill-rare-5::after {
    content: "";
    position: absolute;
    inset: -40%;
    background: linear-gradient(
        120deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.75) 35%,
        rgba(255,255,255,0) 70%
    );
    transform: translateX(-70%);
    animation: lq-rare5-aurora-shine 3.2s linear infinite;
    pointer-events: none;
}

@keyframes lq-rare5-aurora-shine {
    from { transform: translateX(-70%); }
    to   { transform: translateX(70%); }
}

.lq-pill-rare-6 {
    background: linear-gradient(135deg, #022c22, #047857, #22c55e);
    border-color: #22c55e;
    color: #ecfdf5;
    box-shadow:
        0 0 0 1px rgba(34,197,94,0.7),
        0 0 18px rgba(16,185,129,0.8);
    animation: lq-rare-emerald-flow 4s ease-in-out infinite alternate;
}

@keyframes lq-rare-emerald-flow {
    0%   { filter: brightness(1); }
    50%  { filter: brightness(1.2); }
    100% { filter: brightness(1); }
}
.lq-pill-rare-7 {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #fff1f2, #fecaca, #fb7185, #f97316);
    border-color: #fb7185;
    color: #7f1d1d;
    box-shadow:
        0 0 0 1px rgba(248,113,113,0.7),
        0 0 16px rgba(248,113,113,0.8);
}

.lq-pill-rare-7::after {
    content: "";
    position: absolute;
    inset: -50%;
    background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, transparent 55%);
    transform: translateX(-40%);
    animation: lq-rare-rose-drift 3.4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes lq-rare-rose-drift {
    0%   { transform: translateX(-40%); }
    50%  { transform: translateX(20%); }
    100% { transform: translateX(-40%); }
}
/* RARE 8 – AQUA WATERFLOW */
.lq-pill-rare-8 {
    position: relative;
    overflow: hidden;

    background: linear-gradient(
        135deg,
        #ecfeff,
        #6ee7f9,
        #0ea5e9
    );
    border-color: #22d3ee;
    color: #013a40;

    box-shadow:
        0 0 0 1px rgba(34,211,238,0.85),
        0 0 18px rgba(45,212,191,0.8);
}

/* liquid water effect */
.lq-pill-rare-8::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;

    background: radial-gradient(
            circle at 30% 40%,
            rgba(255,255,255,0.8),
            transparent 60%
        ),
        radial-gradient(
            circle at 70% 60%,
            rgba(255,255,255,0.6),
            transparent 60%
        ),
        radial-gradient(
            circle at 40% 80%,
            rgba(255,255,255,0.4),
            transparent 70%
        );

    mix-blend-mode: screen;
    opacity: 0.5;

    animation: rare8-waterflow 6s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes rare8-waterflow {
    0%   { transform: translateX(-8%) translateY(-4%); }
    50%  { transform: translateX(8%) translateY(6%); }
    100% { transform: translateX(-8%) translateY(-4%); }
}


/* RARE 9 – PINK GEM + WHITE CRYSTAL SHINE */
.lq-pill-rare-9 {
    position: relative;
    overflow: hidden;

    background: linear-gradient(
        135deg,
        #fff1f2,
        #f9a8d4,
        #ec4899
    );
    border-color: #f472b6;
    color: #831843;

    box-shadow:
        0 0 0 1px rgba(244,114,182,0.8),
        0 0 18px rgba(244,114,182,0.85);
}

/* WHITE CRYSTAL SHINE */
.lq-pill-rare-9::after {
    content: "";
    position: absolute;
    inset: -40%;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.95) 14%,   /* bright white shine */
        rgba(255,255,255,0) 28%
    );
    transform: translateX(-80%);
    animation: lq-rare9-crystal-shine 2.8s linear infinite;
    pointer-events: none;
}

@keyframes lq-rare9-crystal-shine {
    from { transform: translateX(-80%); }
    to   { transform: translateX(80%); }
}
/* ===========================
     EPIC 6 options
   =========================== */
/* EPIC 1 – CRIMSON ECLIPSE (new design, red-based) */
.lq-pill-epic-1 {
    position: relative;
    overflow: hidden;

    /* Bright red core → deep crimson → almost black edges */
    background: radial-gradient(
        circle at 50% 40%,
        #ff1a1a 0%,
        #b91c1c 40%,
        #450a0a 75%,
        #050000 100%
    );

    border: 2px solid #fecaca;  /* soft platinum-red border */
    color: #fee2e2;

    box-shadow:
        0 0 6px rgba(248,113,113,0.9),
        0 0 26px rgba(248,113,113,0.85);
}

/* Rotating halo ring */
.lq-pill-epic-1::before {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: inherit;

    background: conic-gradient(
        from 0deg,
        rgba(0,0,0,0) 0%,
        rgba(254,226,226,0.0) 12%,
        rgba(254,226,226,0.85) 22%,
        rgba(248,113,113,0.95) 30%,
        rgba(127,29,29,0.0) 40%,
        rgba(0,0,0,0) 100%
    );

    mix-blend-mode: screen;
    opacity: 0.9;
    pointer-events: none;

    animation: epic1-eclipse-ring 5.2s linear infinite;
}

/* Inner soft glow / core breathing */
.lq-pill-epic-1::after {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: inherit;

    background: radial-gradient(
        circle,
        rgba(254,226,226,0.9) 0%,
        rgba(248,113,113,0.55) 40%,
        transparent 100%
    );

    mix-blend-mode: screen;
    pointer-events: none;

    animation: epic1-eclipse-core 3.4s ease-in-out infinite;
}

@keyframes epic1-eclipse-ring {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes epic1-eclipse-core {
    0%   { opacity: 0.55; transform: scale(0.96); }
    50%  { opacity: 1.0;  transform: scale(1.02); }
    100% { opacity: 0.55; transform: scale(0.96); }
}

/* EPIC 2 – LIGHTNING ENERGY (purple + electric cyan) */
.lq-pill-epic-2 {
    position: relative;
    overflow: hidden;

    background: radial-gradient(circle at 30% 0%, #22d3ee, #020617 60%, #000000 100%);
    border-color: #38bdf8;
    color: #e0f2fe;

    box-shadow:
        0 0 0 1px rgba(56,189,248,0.9),
        0 0 24px rgba(56,189,248,0.9);
}

/* electric zig-zag path */
.lq-pill-epic-2::after {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: inherit;

    background: linear-gradient(
        90deg,
        #22d3ee,
        #e0f2fe,
        #22d3ee
    );

    clip-path: polygon(
        0% 45%,
        14% 60%,
        26% 35%,
        38% 65%,
        50% 30%,
        62% 62%,
        74% 35%,
        86% 63%,
        100% 40%,
        100% 70%,
        0% 70%
    );

    filter: drop-shadow(0 0 8px rgba(56,189,248,0.95));
    opacity: 0.9;
    mix-blend-mode: screen;
    pointer-events: none;

    animation: lq-epic2-lightning 1.2s ease-in-out infinite;
}

@keyframes lq-epic2-lightning {
    0% {
        opacity: 0.3;
        transform: translateX(0) translateY(0);
        filter: drop-shadow(0 0 4px rgba(56,189,248,0.7));
    }
    25% {
        opacity: 1;
        transform: translateX(1px) translateY(-1px);
        filter: drop-shadow(0 0 12px rgba(125,211,252,1));
    }
    50% {
        opacity: 0.5;
        transform: translateX(-1px) translateY(1px);
        filter: drop-shadow(0 0 6px rgba(56,189,248,0.8));
    }
    75% {
        opacity: 1;
        transform: translateX(0.5px) translateY(-0.5px);
        filter: drop-shadow(0 0 12px rgba(191,219,254,1));
    }
    100% {
        opacity: 0.4;
        transform: translateX(0) translateY(0);
        filter: drop-shadow(0 0 5px rgba(56,189,248,0.8));
    }
}
/* EPIC 3 – HOLOGRAPHIC ROTATION (pink + teal) */
.lq-pill-epic-3 {
    position: relative;
    overflow: hidden;

    background: linear-gradient(
        135deg,
        #0f172a,
        #4c1d95,
        #be185d
    );
    border-color: #f472b6;
    color: #ffe4e6;

    box-shadow:
        0 0 0 1px rgba(244,114,182,0.9),
        0 0 24px rgba(236,72,153,0.9);
}

/* rotating holo overlay */
.lq-pill-epic-3::after {
    content: "";
    position: absolute;
    inset: -30%;
    border-radius: inherit;

    background: conic-gradient(
        from 0deg,
        rgba(244,114,182,0.0),
        rgba(244,114,182,0.75),
        rgba(56,189,248,0.85),
        rgba(34,197,94,0.8),
        rgba(244,114,182,0.0)
    );

    mix-blend-mode: screen;
    opacity: 0.8;
    pointer-events: none;

    animation: lq-epic3-holo 6s linear infinite;
}

@keyframes lq-epic3-holo {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
/* EPIC 4 – EMERALD PARTICLE DRIFT */
.lq-pill-epic-4 {
    position: relative;
    overflow: hidden;

    background: linear-gradient(
        135deg,
        #022c22,
        #047857,
        #22c55e
    );
    border-color: #4ade80;
    color: #ecfdf5;

    box-shadow:
        0 0 0 1px rgba(74,222,128,0.9),
        0 0 22px rgba(16,185,129,0.9);
}

/* drifting particle field */
.lq-pill-epic-4::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;

    background-image:
        radial-gradient(circle, rgba(190,242,100,0.9) 0, transparent 55%),
        radial-gradient(circle, rgba(52,211,153,0.9) 0, transparent 55%),
        radial-gradient(circle, rgba(187,247,208,0.9) 0, transparent 55%);
    background-size: 6px 6px, 8px 8px, 10px 10px;

    mix-blend-mode: screen;
    opacity: 0.8;
    pointer-events: none;

    animation: lq-epic4-particles 7s linear infinite;
}

@keyframes lq-epic4-particles {
    0%   { background-position: 0 0, 20px 30px, -10px 10px; }
    50%  { background-position: 40px 60px, -10px 25px, 20px 40px; }
    100% { background-position: 0 0, 20px 30px, -10px 10px; }
}
/* EPIC 5 – POWER CORE (v3: plasma + inner lightning) */
.lq-pill-epic-5 {
    position: relative;
    overflow: hidden;

    background: radial-gradient(
        circle at 20% 0%,
        #fb923c,
        #c2410c 55%,
        #7c2d12 90%
    );

    border-color: #fb923c;
    color: #fff7ed;

    box-shadow:
        0 0 0 1px rgba(251,146,60,0.9),
        0 0 24px rgba(251,146,60,0.9);
}

/* ⚡ inner lightning crackles */
.lq-pill-epic-5::before {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: inherit;

    /* bright warm lightning line */
    background: linear-gradient(
        90deg,
        rgba(255,248,225,1),
        rgba(252,211,77,1),
        rgba(254,226,226,1)
    );

    /* jagged lightning-like path */
    clip-path: polygon(
        0% 55%,
        10% 45%,
        20% 60%,
        32% 40%,
        44% 62%,
        56% 38%,
        68% 60%,
        80% 42%,
        90% 58%,
        100% 48%,
        100% 70%,
        0% 70%
    );

    mix-blend-mode: screen;
    opacity: 0.0; /* base, animation will bring it up */
    filter: drop-shadow(0 0 6px rgba(253,224,71,0.9));
    pointer-events: none;

    animation: epic5-lightning 2.2s ease-in-out infinite;
}

/* 🔥 inner plasma core */
.lq-pill-epic-5::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: inherit;

    background: radial-gradient(
        circle,
        rgba(255,90,95,0.7) 0%,
        rgba(249,115,22,0.85) 40%,
        rgba(124,29,29,0.9) 100%
    );

    mix-blend-mode: screen;
    pointer-events: none;

    animation: epic5-plasma 3.4s ease-in-out infinite;
}

/* subtle plasma breathing + slight swirl */
@keyframes epic5-plasma {
    0%   { transform: scale(0.97) rotate(0deg);   opacity: 0.82; }
    50%  { transform: scale(1.03) rotate(3deg);   opacity: 1.0;  }
    100% { transform: scale(0.97) rotate(0deg);   opacity: 0.82; }
}

/* subtle lightning flicker + jitter */
@keyframes epic5-lightning {
    0%   { opacity: 0;   transform: translateX(0) translateY(0); }
    20%  { opacity: 0.65; transform: translateX(0.5px) translateY(-0.5px); }
    30%  { opacity: 0.25; transform: translateX(-0.5px) translateY(0.5px); }
    40%  { opacity: 0.9;  transform: translateX(1px) translateY(-1px); }
    55%  { opacity: 0.2;  transform: translateX(0) translateY(0.5px); }
    100% { opacity: 0;   transform: translateX(0) translateY(0); }
}

/* EPIC 6 – CRYSTAL CUT (indigo + pink) */
.lq-pill-epic-6 {
    position: relative;
    overflow: hidden;

    background: linear-gradient(
        135deg,
        #1e1b4b,
        #4c1d95,
        #db2777
    );
    border-color: #a855f7;
    color: #fdf2ff;

    box-shadow:
        0 0 0 1px rgba(168,85,247,0.9),
        0 0 24px rgba(192,38,211,0.9);
}

/* angled side facets */
.lq-pill-epic-6::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.45),
            rgba(255,255,255,0.05)
        ),
        linear-gradient(
            -135deg,
            rgba(236,72,153,0.55),
            rgba(236,72,153,0.0)
        );
    mix-blend-mode: screen;
    opacity: 0.9;
    pointer-events: none;
}

/* central highlight band */
.lq-pill-epic-6::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: inherit;

    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.05),
        rgba(255,255,255,0.55),
        rgba(255,255,255,0.05)
    );

    opacity: 0.8;
    pointer-events: none;

    animation: lq-epic6-cut 3.8s ease-in-out infinite;
}

@keyframes lq-epic6-cut {
    0%   { opacity: 0.45; }
    50%  { opacity: 1;    }
    100% { opacity: 0.45; }
}
/* =====================================
   LEGENDARY 3 options
   ===================================== */

/* LEGENDARY 1 – CELESTIAL AURORA CORE */
.lq-pill-legendary-1 {
    position: relative;
    overflow: hidden;

    /* slightly bigger + stronger than normal pills */
    padding: 6px 18px;
    border-radius: 999px;

    /* dark cosmic core with gold / violet glow */
    background:
        radial-gradient(circle at 20% 0%, #facc15 0%, #f97316 22%, transparent 55%),
        radial-gradient(circle at 80% 100%, #22d3ee 0%, #4f46e5 30%, transparent 70%),
        radial-gradient(circle at 50% 50%, #020617 0%, #020617 60%, #000000 100%);
    border: 2px solid rgba(250, 250, 249, 0.8);
    color: #fefce8;

    box-shadow:
        0 0 0 1px rgba(250, 204, 21, 0.85),
        0 0 20px rgba(250, 204, 21, 0.9),
        0 0 40px rgba(129, 140, 248, 0.85);

    text-shadow: 0 0 6px rgba(0, 0, 0, 0.85);

    /* slow breathing to feel alive */
    animation: lq-legend1-core-breathe 4.5s ease-in-out infinite;
}

/* orbiting prismatic halo */
.lq-pill-legendary-1::before {
    content: "";
    position: absolute;
    inset: -45%;
    border-radius: inherit;

    background: conic-gradient(
        from 0deg,
        rgba(250, 204, 21, 0.0),
        rgba(250, 204, 21, 0.9),
        rgba(248, 113, 113, 0.85),
        rgba(244, 114, 182, 0.9),
        rgba(59, 130, 246, 0.95),
        rgba(34, 197, 235, 0.9),
        rgba(250, 204, 21, 0.0)
    );

    mix-blend-mode: screen;
    opacity: 0.85;
    pointer-events: none;

    animation: lq-legend1-orbit 7.5s linear infinite;
}

/* inner crystal sheen + subtle star shimmer */
.lq-pill-legendary-1::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: inherit;

    background:
        /* central band highlight */
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.0),
            rgba(255, 255, 255, 0.45),
            rgba(255, 255, 255, 0.0)
        ),
        /* small stars */
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.8), transparent 55%),
        radial-gradient(circle at 70% 65%, rgba(255, 255, 255, 0.65), transparent 60%),
        radial-gradient(circle at 45% 80%, rgba(250, 250, 249, 0.55), transparent 65%);

    mix-blend-mode: screen;
    opacity: 0.9;
    pointer-events: none;

    animation: lq-legend1-sheen 3.2s ease-in-out infinite;
}

/* --- keyframes --- */

@keyframes lq-legend1-core-breathe {
    0% {
        transform: scale(1);
        box-shadow:
            0 0 0 1px rgba(250, 204, 21, 0.75),
            0 0 18px rgba(250, 204, 21, 0.85),
            0 0 32px rgba(129, 140, 248, 0.7);
    }
    50% {
        transform: scale(1.03);
        box-shadow:
            0 0 0 1px rgba(250, 250, 249, 1),
            0 0 26px rgba(250, 204, 21, 1),
            0 0 52px rgba(129, 140, 248, 0.95);
    }
    100% {
        transform: scale(1);
        box-shadow:
            0 0 0 1px rgba(250, 204, 21, 0.75),
            0 0 18px rgba(250, 204, 21, 0.85),
            0 0 32px rgba(129, 140, 248, 0.7);
    }
}

@keyframes lq-legend1-orbit {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes lq-legend1-sheen {
    0% {
        opacity: 0.6;
        background-position:
            0% 50%,
            15% 30%,
            70% 60%,
            45% 80%;
    }
    50% {
        opacity: 1;
        background-position:
            100% 50%,
            20% 35%,
            65% 55%,
            50% 85%;
    }
    100% {
        opacity: 0.6;
        background-position:
            0% 50%,
            15% 30%,
            70% 60%,
            45% 80%;
    }
}


/* LEGENDARY 2 – STORM HORIZON (NAVY + ELECTRIC UNIVERSE) */
.lq-pill-legendary-2 {
    position: relative;
    overflow: hidden;

    padding: 5px 18px;
    border-radius: 999px;

    /* Deep navy / cosmic base, almost matte */
    background:
        radial-gradient(circle at 50% 130%, #000814 0%, #000814 40%, #000010 85%, #000000 100%),
        radial-gradient(circle at -10% -20%, #001b8a 0%, transparent 60%);

    border: 1px solid #1d4ed8;   /* crisp, not glowing */

    /* very restrained glow – just enough to feel special */
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.9),
        0 0 16px rgba(30,64,175,0.7);

    color: #e5e7eb;
    font-weight: 600;
    letter-spacing: 0.04em;

    text-shadow: 0 0 3px rgba(0,0,0,0.9);
}

/* ELECTRIC HORIZON BAND ACROSS THE PILL */
.lq-pill-legendary-2::before {
    content: "";
    position: absolute;
    left: 2px;
    right: 2px;
    top: 50%;
    height: 40%;                /* thin-ish band in the middle */
    transform: translateY(-50%);
    border-radius: 999px;

    /* sharp electric band: navy core with cyan streaks */
    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,0) 0%,
            #00f0ff 14%,
            rgba(255,255,255,0.9) 24%,
            #00f0ff 34%,
            rgba(0,0,0,0) 50%,
            #00f0ff 64%,
            rgba(255,255,255,0.9) 74%,
            #00f0ff 84%,
            rgba(0,0,0,0) 100%
        );
    background-size: 260% 100%;

    box-shadow:
        0 0 12px rgba(56,189,248,0.9);

    mix-blend-mode: screen;
    opacity: 0.85;
    pointer-events: none;

    /* fast scan across, feels like a charged horizon */
    animation: lq-legend2-storm-scan 2.4s linear infinite;
}

/* STARFIELD + SPARSE ELECTRIC SPARKS (VERY SUBTLE) */
.lq-pill-legendary-2::after {
    content: "";
    position: absolute;
    inset: -10%;
    border-radius: inherit;

    background:
        radial-gradient(circle at 15% 30%, rgba(148,163,196,0.8) 0, transparent 55%),
        radial-gradient(circle at 80% 60%, rgba(129,140,248,0.85) 0, transparent 55%),
        radial-gradient(circle at 55% 15%, rgba(56,189,248,0.8) 0, transparent 55%);

    mix-blend-mode: screen;
    opacity: 0.45;
    pointer-events: none;

    /* slight drift + flicker, not breathing */
    animation: lq-legend2-storm-sparks 5.2s ease-in-out infinite;
}

/* ======================
   KEYFRAMES
   ====================== */

/* electric band scan – this is the main effect */
@keyframes lq-legend2-storm-scan {
    0%   { background-position: -60% 0; opacity: 0.3; }
    10%  { opacity: 0.9; }
    40%  { background-position: 10% 0; opacity: 0.75; }
    70%  { background-position: 50% 0; opacity: 0.4; }
    100% { background-position: 120% 0; opacity: 0.25; }
}

/* sparse sparks shifting – no big glow pulses */
@keyframes lq-legend2-storm-sparks {
    0% {
        opacity: 0.35;
        transform: translateX(-3%) translateY(3%);
    }
    40% {
        opacity: 0.7;
        transform: translateX(2%) translateY(-2%);
    }
    80% {
        opacity: 0.5;
        transform: translateX(4%) translateY(1%);
    }
    100% {
        opacity: 0.35;
        transform: translateX(-3%) translateY(3%);
    }
}




/* LEGENDARY 3 – VOID CRYSTAL (SHATTERED PRISMS + PURPLE ENERGY) */
.lq-pill-legendary-3 {
    position: relative;
    overflow: hidden;

    padding: 6px 16px;
    border-radius: 999px;

    /* deep void base with amethyst core */
    background:
        radial-gradient(circle at 30% 20%, #a855f7 0%, #6d28d9 28%, transparent 60%),
        radial-gradient(circle at 70% 80%, #f472b6 0%, #6b21a8 30%, transparent 65%),
        radial-gradient(circle at 50% 50%, #020617 0%, #020617 55%, #000000 100%);

    border: 2px solid rgba(216,180,254,0.9);

    box-shadow:
        0 0 0 1px rgba(15,23,42,1),
        0 0 22px rgba(168,85,247,0.95),
        0 0 46px rgba(236,72,153,0.9);

    color: #fdf2ff;
    text-shadow:
        0 0 4px rgba(15,23,42,1),
        0 0 8px rgba(15,23,42,0.9);

    /* subtle energy breathing, no rotation */
    animation: lq-legend3-void-core 5.2s ease-in-out infinite;
}

/* PRISMATIC FACETS / SHATTERED CRYSTAL */
.lq-pill-legendary-3::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;

    background:
        /* diagonal shard band */
        linear-gradient(
            135deg,
            rgba(244,114,182,0.0) 0%,
            rgba(244,114,182,0.7) 25%,
            rgba(244,114,182,0.1) 50%,
            rgba(56,189,248,0.65) 75%,
            rgba(56,189,248,0.0) 100%
        ),
        /* scattered light fragments */
        radial-gradient(circle at 20% 70%, rgba(244,114,182,0.9), transparent 55%),
        radial-gradient(circle at 80% 30%, rgba(129,140,248,0.9), transparent 55%),
        radial-gradient(circle at 45% 40%, rgba(34,211,238,0.85), transparent 60%);

    mix-blend-mode: screen;
    opacity: 0.85;
    pointer-events: none;

    /* prismatic shimmer / slight glitch */
    animation: lq-legend3-facets 3.6s ease-in-out infinite;
}

/* ENERGY STRIPES / HOLO REFRACTION */
.lq-pill-legendary-3::after {
    content: "";
    position: absolute;
    inset: -20%;
    border-radius: inherit;

    background:
        linear-gradient(
            100deg,
            rgba(255,255,255,0.0) 0%,
            rgba(244,244,245,0.35) 18%,
            rgba(255,255,255,0.0) 36%,
            rgba(224,231,255,0.4) 56%,
            rgba(255,255,255,0.0) 74%
        );

    mix-blend-mode: screen;
    opacity: 0.7;
    pointer-events: none;

    /* refracted band sliding slowly across */
    animation: lq-legend3-refraction 4.4s ease-in-out infinite;
}

/* --- KEYFRAMES --- */

/* void core breathing */
@keyframes lq-legend3-void-core {
    0% {
        filter: brightness(1);
        box-shadow:
            0 0 0 1px rgba(15,23,42,1),
            0 0 20px rgba(168,85,247,0.85),
            0 0 40px rgba(236,72,153,0.8);
    }
    50% {
        filter: brightness(1.08);
        box-shadow:
            0 0 0 1px rgba(15,23,42,1),
            0 0 28px rgba(192,132,252,1),
            0 0 60px rgba(236,72,153,1);
    }
    100% {
        filter: brightness(1);
        box-shadow:
            0 0 0 1px rgba(15,23,42,1),
            0 0 20px rgba(168,85,247,0.85),
            0 0 40px rgba(236,72,153,0.8);
    }
}

/* facets shimmering / slightly shifting – “shattered crystal” */
@keyframes lq-legend3-facets {
    0% {
        opacity: 0.7;
        transform: translateX(0) translateY(0);
        filter: brightness(1);
    }
    40% {
        opacity: 1;
        transform: translateX(-2%) translateY(-1%);
        filter: brightness(1.15);
    }
    70% {
        opacity: 0.85;
        transform: translateX(1%) translateY(1%);
        filter: brightness(1.05);
    }
    100% {
        opacity: 0.7;
        transform: translateX(0) translateY(0);
        filter: brightness(1);
    }
}

/* holo band refraction slowly sweeping */
@keyframes lq-legend3-refraction {
    0% {
        opacity: 0.5;
        transform: translateX(-8%) skewX(-3deg);
    }
    50% {
        opacity: 0.95;
        transform: translateX(6%) skewX(2deg);
    }
    100% {
        opacity: 0.5;
        transform: translateX(-8%) skewX(-3deg);
    }
}