/* ==========================================================
   WINNER / POOL FILTER BUTTONS
   ========================================================== */

.lb-winner-filters{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.lb-winner-filter{
    position:relative;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:105px;
    padding:8px 16px;

    border:0;
    border-radius:8px;

    font-family:var(--cx-display, "Chakra Petch");
    font-size:12px;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;

    color:#fff;

    background:linear-gradient(
        135deg,
        #ff7a1a 0%,
        #ff6a3d 45%,
        #a15cff 100%
    );

    box-shadow:0 4px 14px rgba(161,92,255,.30);

    cursor:pointer;

    transition:
        transform .18s ease,
        filter .18s ease,
        box-shadow .18s ease;
}

.lb-winner-filter:hover{
    transform:translateY(-2px);
    filter:brightness(1.08);
    box-shadow:0 8px 20px rgba(255,140,0,.35);
}

.lb-winner-filter.active{
    background:linear-gradient(
        135deg,
        #ffa63d 0%,
        #ff7a1a 40%,
        #c06cff 100%
    );

    filter:brightness(1.1);

    box-shadow:
        0 0 0 2px rgba(255,255,255,.18),
        0 10px 26px rgba(255,106,0,.55);
}

.lb-winner-filter:active{
    transform:translateY(0);
}

.lb-winner-filter:disabled{
    background:linear-gradient(
        180deg,
        #6b7280,
        #4b5563
    );

    color:#e5e7eb;
    cursor:not-allowed;
    filter:grayscale(100%);
    opacity:.9;
    box-shadow:none;
}


/* ==========================================================
   LOAD MORE BUTTON
   ========================================================== */

.lb-load-more-wrap{
    display:flex;
    justify-content:center;
    margin-top:22px;
}

.lb-load-more{
    position:relative;

    min-width:180px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:10px 24px;

    border:0;
    border-radius:8px;

    font-family:var(--cx-display, "Chakra Petch");
    font-size:12px;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;

    color:#fff;

    background:linear-gradient(
        135deg,
        #ff7a1a 0%,
        #ff6a3d 45%,
        #a15cff 100%
    );

    box-shadow:0 4px 14px rgba(161,92,255,.30);

    cursor:pointer;

    transition:
        transform .18s ease,
        filter .18s ease,
        box-shadow .18s ease;
}

.lb-load-more:hover:not(:disabled){
    transform:translateY(-2px);
    filter:brightness(1.08);
    box-shadow:0 8px 20px rgba(255,140,0,.35);
}

.lb-load-more[hidden]{
    display:none !important;
}

.lb-load-more:disabled{
    background:linear-gradient(
        180deg,
        #6b7280,
        #4b5563
    );

    color:#e5e7eb;
    cursor:not-allowed;
    filter:grayscale(100%);
    opacity:.9;
    box-shadow:none;
}


/* ==========================================================
   PRIZE POOL GRID
   ========================================================== */

.lb-pool-grid{
    display:grid;

    grid-template-columns:repeat(
        auto-fill,
        minmax(170px,1fr)
    );

    align-items:stretch;
    gap:22px;

    padding:10px 0;
}


/* ==========================================================
   PRIZE ITEM CARD
   Card itself does not move
   ========================================================== */

.lb-item{
    position:relative;
    isolation:isolate;

    display:flex;
    flex-direction:column;
    align-items:center;

    min-width:0;
    min-height:265px;

    padding:16px 14px 15px;

    border-radius:15px;
    overflow:hidden;

    transition:
        border-color .22s ease,
        box-shadow .22s ease,
        filter .22s ease;
}

.lb-item:hover{
    z-index:5;
    filter:brightness(1.05);
}


/* ==========================================================
   CARD LIGHT / SHINE
   ========================================================== */

.lb-item::before{
    content:"";

    position:absolute;
    inset:-45%;

    z-index:-2;

    background:radial-gradient(
        circle,
        rgba(255,255,255,.13),
        transparent 68%
    );

    opacity:.55;
    pointer-events:none;
}

.lb-item::after{
    content:"";

    position:absolute;
    inset:0;

    z-index:-1;

    border-radius:inherit;

    background:linear-gradient(
        120deg,
        transparent 20%,
        rgba(255,255,255,.09) 48%,
        transparent 76%
    );

    opacity:.35;
    pointer-events:none;

    transform:translateX(-90%);

    transition:
        transform .65s ease,
        opacity .3s ease;
}

.lb-item:hover::after{
    transform:translateX(90%);
    opacity:.7;
}


/* ==========================================================
   MINI RARITY BADGE — CENTERED
   ========================================================== */

.lb-item-tier{
    position:relative;
    z-index:4;

    align-self:center;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:max-content;
    min-width:0;
    min-height:18px;

    padding:3px 7px;
    margin:0 auto 8px;

    border-radius:999px;

    font-family:var(--cx-display, "Chakra Petch");
    font-size:8px;
    font-weight:900;
    letter-spacing:.10em;
    line-height:1;
    text-align:center;
    text-transform:uppercase;
    white-space:nowrap;

    color:#fff;

    backdrop-filter:blur(5px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 3px 8px rgba(0,0,0,.22);
}


/* ==========================================================
   IMAGE BOX
   Item name is inside the box
   ========================================================== */

.lb-item-img{
    position:relative;
    z-index:3;

    width:100%;
    height:178px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;

    padding:11px 10px 10px;

    border-radius:13px;

    background:linear-gradient(
        180deg,
        rgba(7,10,16,.58),
        rgba(13,17,25,.38)
    );

    border:1px solid rgba(255,255,255,.10);

    box-shadow:
        inset 0 0 24px rgba(0,0,0,.24),
        0 8px 18px rgba(0,0,0,.20);

    backdrop-filter:blur(5px);

    transition:
        border-color .25s ease,
        box-shadow .25s ease;
}

.lb-item-img::before{
    content:"";

    position:absolute;
    inset:7px;

    border-radius:9px;

    border:1px solid rgba(255,255,255,.035);

    pointer-events:none;
}


/* ==========================================================
   ITEM NAME INSIDE IMAGE BOX
   ========================================================== */

.lb-item-name{
    position:relative;
    z-index:4;

    width:100%;
    min-height:38px;

    display:flex;
    align-items:flex-start;
    justify-content:center;

    padding:1px 5px 8px;

    font-family:var(--cx-display, "Chakra Petch");
    font-size:13px;
    font-weight:800;
    line-height:1.25;
    text-align:center;

    color:#f8fafc;

    overflow-wrap:anywhere;

    text-shadow:
        0 2px 8px rgba(0,0,0,.55);
}


/* ==========================================================
   SKIN IMAGE
   Only the image floats
   ========================================================== */

.lb-item-img img{
    position:relative;
    z-index:3;

    display:block;

    width:auto;
    max-width:96%;

    height:auto;
    max-height:135px;

    margin:auto 0 0;

    object-fit:contain;
    object-position:center;

    image-rendering:auto;
    backface-visibility:hidden;

    animation:
        lb-skin-float
        3.4s
        ease-in-out
        infinite;

    filter:
        drop-shadow(
            0 8px 14px rgba(0,0,0,.38)
        );

    transition:
        transform .24s ease,
        filter .24s ease;
}


/* Different animation timing per item */

.lb-item:nth-child(2n) .lb-item-img img{
    animation-delay:-.8s;
}

.lb-item:nth-child(3n) .lb-item-img img{
    animation-delay:-1.6s;
}

.lb-item:nth-child(4n) .lb-item-img img{
    animation-delay:-2.4s;
}

.lb-item:nth-child(5n) .lb-item-img img{
    animation-delay:-1.2s;
}


/* Gentle image-only floating */

@keyframes lb-skin-float{
    0%,
    100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-6px);
    }
}


/* Hover: pause movement and zoom image slightly */

.lb-item:hover .lb-item-img img{
    animation-play-state:paused;

    transform:scale(1.06);

    filter:
        drop-shadow(
            0 12px 20px rgba(0,0,0,.52)
        );
}

.lb-item:hover .lb-item-img{
    border-color:rgba(255,255,255,.18);
}


/* ==========================================================
   PRICE BELOW IMAGE BOX
   ========================================================== */

.lb-item-price{
    position:relative;
    z-index:3;

    margin-top:13px;

    font-family:var(--cx-display, "Chakra Petch");
    font-size:15px;
    font-weight:900;
    letter-spacing:.05em;

    color:#ffd166;

    text-shadow:
        0 2px 8px rgba(0,0,0,.55);
}


/* ==========================================================
   COMMON TIER
   ========================================================== */

.lb-tier-common{
    background:linear-gradient(
        180deg,
        rgba(101,106,116,.34),
        rgba(36,39,46,.70)
    );

    border:1px solid rgba(174,181,193,.32);

    box-shadow:
        0 12px 28px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.06);
}

.lb-tier-common .lb-item-tier{
    background:linear-gradient(
        180deg,
        rgba(156,163,175,.90),
        rgba(75,85,99,.92)
    );

    border:1px solid rgba(209,213,219,.40);
}

.lb-tier-common .lb-item-img{
    border-color:rgba(190,196,207,.34);

    box-shadow:
        inset 0 0 25px rgba(255,255,255,.035),
        0 0 16px rgba(156,163,175,.16),
        0 8px 18px rgba(0,0,0,.24);
}

.lb-tier-common:hover{
    border-color:#9ca3af;

    box-shadow:
        0 16px 34px rgba(0,0,0,.38),
        0 0 22px rgba(156,163,175,.30),
        inset 0 1px 0 rgba(255,255,255,.09);
}

.lb-tier-common:hover .lb-item-img{
    border-color:rgba(209,213,219,.58);

    box-shadow:
        inset 0 0 25px rgba(255,255,255,.05),
        0 0 22px rgba(156,163,175,.25),
        0 10px 22px rgba(0,0,0,.28);
}


/* ==========================================================
   RARE TIER
   ========================================================== */

.lb-tier-rare{
    background:linear-gradient(
        145deg,
        rgba(37,99,235,.42),
        rgba(23,37,84,.72)
    );

    border:1px solid rgba(96,165,250,.48);

    box-shadow:
        0 12px 30px rgba(37,99,235,.24),
        inset 0 1px 0 rgba(147,197,253,.08);
}

.lb-tier-rare .lb-item-tier{
    background:linear-gradient(
        135deg,
        rgba(59,130,246,.96),
        rgba(29,78,216,.95)
    );

    border:1px solid rgba(147,197,253,.55);

    box-shadow:
        0 0 14px rgba(59,130,246,.28);
}

.lb-tier-rare .lb-item-img{
    border-color:rgba(96,165,250,.55);

    box-shadow:
        inset 0 0 26px rgba(59,130,246,.10),
        0 0 20px rgba(59,130,246,.28),
        0 8px 18px rgba(0,0,0,.23);
}

.lb-tier-rare:hover{
    border-color:#60a5fa;

    box-shadow:
        0 16px 36px rgba(0,0,0,.32),
        0 0 30px rgba(59,130,246,.50),
        inset 0 1px 0 rgba(191,219,254,.13);
}

.lb-tier-rare:hover .lb-item-img{
    border-color:#93c5fd;

    box-shadow:
        inset 0 0 28px rgba(59,130,246,.13),
        0 0 28px rgba(59,130,246,.44),
        0 10px 22px rgba(0,0,0,.28);
}


/* ==========================================================
   JACKPOT TIER
   ========================================================== */

.lb-tier-jackpot{
    background:linear-gradient(
        135deg,
        rgba(220,38,38,.44),
        rgba(168,85,247,.36),
        rgba(88,28,135,.72)
    );

    border:1px solid rgba(244,114,182,.55);

    box-shadow:
        0 14px 36px rgba(168,85,247,.29),
        inset 0 1px 0 rgba(253,164,175,.10);
}

.lb-tier-jackpot .lb-item-tier{
    background:linear-gradient(
        135deg,
        rgba(239,68,68,.96),
        rgba(236,72,153,.96),
        rgba(147,51,234,.96)
    );

    border:1px solid rgba(251,207,232,.55);

    box-shadow:
        0 0 18px rgba(236,72,153,.40);
}

.lb-tier-jackpot .lb-item-img{
    border-color:rgba(244,114,182,.68);

    box-shadow:
        inset 0 0 28px rgba(236,72,153,.10),
        0 0 24px rgba(236,72,153,.36),
        0 0 38px rgba(168,85,247,.20),
        0 8px 20px rgba(0,0,0,.24);
}

.lb-tier-jackpot:hover{
    border-color:#f472b6;

    box-shadow:
        0 18px 40px rgba(0,0,0,.34),
        0 0 34px rgba(236,72,153,.56),
        0 0 52px rgba(168,85,247,.30),
        inset 0 1px 0 rgba(255,255,255,.14);
}

.lb-tier-jackpot:hover .lb-item-img{
    border-color:#fbcfe8;

    box-shadow:
        inset 0 0 30px rgba(236,72,153,.13),
        0 0 30px rgba(236,72,153,.53),
        0 0 48px rgba(168,85,247,.30),
        0 10px 24px rgba(0,0,0,.30);
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width:768px){

    .lb-winner-filters{
        width:100%;

        display:grid;
        grid-template-columns:repeat(2,1fr);

        gap:10px;
    }

    .lb-winner-filter{
        width:100%;
        min-width:unset;
    }

    .lb-load-more{
        width:100%;
    }

    .lb-pool-grid{
        grid-template-columns:repeat(
            2,
            minmax(0,1fr)
        );

        gap:14px;
    }

    .lb-item{
        min-height:245px;
        padding:13px 10px;
    }

    .lb-item-tier{
        min-width:0;
        min-height:17px;

        margin-bottom:7px;
        padding:3px 6px;

        font-size:7px;
        letter-spacing:.09em;
    }

    .lb-item-img{
        height:162px;
        padding:9px 8px 8px;
    }

    .lb-item-name{
        min-height:35px;
        padding-bottom:6px;

        font-size:12px;
    }

    .lb-item-img img{
        max-width:90%;
        max-height:101px;
    }

    .lb-item-price{
        margin-top:11px;
        font-size:14px;
    }
}


/* ==========================================================
   VERY SMALL MOBILE
   ========================================================== */

@media (max-width:420px){

    .lb-pool-grid{
        grid-template-columns:1fr;
    }

    .lb-item{
        min-height:265px;
    }

    .lb-item-img{
        height:182px;
    }

    .lb-item-img img{
        max-width:92%;
        max-height:120px;
    }
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion:reduce){

    .lb-item-img img{
        animation:none !important;
    }

    .lb-item,
    .lb-item-img,
    .lb-item-img img,
    .lb-item::after{
        transition:none !important;
    }

    .lb-item:hover .lb-item-img img{
        transform:none;
    }
}