/* ==========================================================
   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;
    contain:layout paint;

    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:
        opacity .2s ease;
}

.lb-item:hover::after{
    transform:none;
    opacity:.35;
}


/* ==========================================================
   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:none;

    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:none;

    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;

    /* CPU-friendly: no permanent per-item animation.
       With many prize items visible, dozens of infinite transforms
       force continuous compositor work. Keep the image static until hover. */
    animation:none;

    filter:
        drop-shadow(
            0 6px 10px rgba(0,0,0,.30)
        );

    transform:translateY(0) scale(1);

    transition:
        transform .28s cubic-bezier(.2,.8,.2,1),
        filter .28s ease;
}


.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);
}



/* ==========================================================
   LATEST WINNERS — ROW LAYOUT
   # | Player | Reward | Price | Date
   ========================================================== */

.lb-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0 8px;
}

.lb-table thead th{
    padding:0 14px 7px;
    border:0;
    font-family:var(--cx-display, "Chakra Petch");
    font-size:10px;
    font-weight:800;
    letter-spacing:.10em;
    text-transform:uppercase;
    color:rgba(255,255,255,.55);
}

.lb-table tbody tr:not(:has(.lb-empty)){
    background:linear-gradient(
        90deg,
        rgba(255,255,255,.035),
        rgba(255,255,255,.018)
    );
    transition:background .18s ease, box-shadow .18s ease;
}

.lb-table tbody tr:not(:has(.lb-empty)):hover{
    background:linear-gradient(
        90deg,
        rgba(255,106,0,.075),
        rgba(161,92,255,.045)
    );
    box-shadow:0 8px 24px rgba(0,0,0,.16);
}

.lb-table tbody tr:not(:has(.lb-empty)) > td{
    padding:12px 14px;
    border-top:1px solid rgba(255,255,255,.075);
    border-bottom:1px solid rgba(255,255,255,.075);
    vertical-align:middle;
}

.lb-table tbody tr:not(:has(.lb-empty)) > td:first-child{
    border-left:1px solid rgba(255,255,255,.075);
    border-radius:10px 0 0 10px;
}

.lb-table tbody tr:not(:has(.lb-empty)) > td:last-child{
    border-right:1px solid rgba(255,255,255,.075);
    border-radius:0 10px 10px 0;
}

.lb-cell-reward{
    min-width:0;
}

.lb-reward{
    display:block;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.lb-cell-price{
    width:110px;
    white-space:nowrap;
}

.lb-cell-date{
    width:190px;
    white-space:nowrap;
}

.lb-reward-price{
    display:inline-block;
    margin:0;
    font-family:var(--cx-display, "Chakra Petch");
    font-weight:800;
    color:#ffd166;
}

.lb-date{
    color:rgba(255,255,255,.68);
}

/* ==========================================================
   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;
    }

    
}

/* ==========================================================
   LEADERBOARD SKIN MOTION — HOVER OR FOCUS ONLY
   ========================================================== */

/* Card itself never moves. */
.lb-page .lb-item,
.lb-page .lb-item:hover,
.lb-page .lb-item:focus,
.lb-page .lb-item:focus-within{
    transform:none !important;
    will-change:auto !important;
}

/* Default image state: completely static. */
.lb-page .lb-item-img img{
    animation:none !important;
    transform:translateY(0) scale(1);
    will-change:auto !important;
}

/* Animate only the card currently under the pointer or keyboard focus. */
.lb-page .lb-item:hover .lb-item-img img,
.lb-page .lb-item:focus .lb-item-img img,
.lb-page .lb-item:focus-within .lb-item-img img{
    animation:lb-active-skin-float 3.4s ease-in-out infinite !important;
    will-change:transform !important;
    filter:drop-shadow(0 9px 14px rgba(0,0,0,.40));
}

@keyframes lb-active-skin-float{
    0%,100%{
        transform:translateY(0) scale(1.025);
    }
    50%{
        transform:translateY(-6px) scale(1.025);
    }
}

/* Non-moving hover feedback on the card itself. */
.lb-page .lb-item:hover{
    filter:brightness(1.04);
}

/* Visible keyboard/click focus state. */
.lb-page .lb-item:focus{
    outline:1px solid rgba(255,122,26,.65);
    outline-offset:2px;
}

/* Respect reduced-motion preference. */
@media (prefers-reduced-motion:reduce){
    .lb-page .lb-item:hover .lb-item-img img,
    .lb-page .lb-item:focus .lb-item-img img,
    .lb-page .lb-item:focus-within .lb-item-img img{
        animation:none !important;
        transform:none !important;
    }
}


/* ==========================================================
   MOBILE COMPACT LEADERBOARD OVERRIDES
   Winners become compact cards; prize pools stay 2-up.
   ========================================================== */
@media (max-width:768px){
    /* Winners: remove horizontal table squeeze and render each row as a card. */
    .lb-table-wrap{
        overflow:visible;
    }

    .lb-table{
        display:block;
        width:100%;
    }

    .lb-table thead{
        display:block;
        width:100%;
    }

    .lb-table thead tr{
        display:grid;
        grid-template-columns:32px minmax(0,1fr) auto;
        grid-template-areas:
            "rank player price";
        column-gap:9px;
        width:100%;
        padding:8px 10px 6px;
        border:0;
        background:transparent;
    }

    .lb-table thead th{
        display:none;
        width:auto !important;
        padding:0 !important;
        border:0 !important;
        font-size:8px;
        line-height:1;
        letter-spacing:.08em;
        color:rgba(255,255,255,.42);
    }

    .lb-table thead th:nth-child(1){
        display:block;
        grid-area:rank;
        text-align:left;
    }

    .lb-table thead th:nth-child(2){
        display:block;
        grid-area:player;
        text-align:left;
    }

    .lb-table thead th:nth-child(4){
        display:block;
        grid-area:price;
        text-align:right !important;
    }

    .lb-table tbody{
        display:flex;
        flex-direction:column;
        gap:8px;
        width:100%;
    }

    .lb-table thead + tbody{
        margin-top:2px;
    }

    .lb-table tbody tr{
        display:grid;
        grid-template-columns:32px minmax(0,1fr) auto;
        grid-template-areas:
            "rank player player"
            "rank reward price"
            "rank date date";
        column-gap:9px;
        row-gap:4px;
        width:100%;
        padding:9px 10px;
        border:1px solid rgba(255,255,255,.08);
        border-radius:10px;
        background:rgba(255,255,255,.025);
    }

    .lb-table tbody td{
        display:block;
        width:auto !important;
        min-width:0;
        padding:0 !important;
        border:0 !important;
    }

    .lb-cell-rank{
        grid-area:rank;
        align-self:center;
    }

    .lb-cell-player{
        grid-area:player;
        align-self:center;
    }

    .lb-cell-reward{
        grid-area:reward;
        display:block !important;
        min-width:0;
        padding-left:0 !important;
    }

    .lb-cell-price{
        grid-area:price;
        align-self:baseline;
        text-align:right !important;
        white-space:nowrap;
    }

    .lb-cell-reward,
    .lb-cell-price{
        align-self:baseline;
    }

    .lb-cell-date{
        grid-area:date;
        text-align:left !important;
        padding-left:0 !important;
    }

    .lb-player{
        display:flex;
        align-items:center;
        gap:8px;
        min-width:0;
    }

    .lb-player img{
        width:30px;
        height:30px;
        flex:0 0 30px;
        border-radius:6px;
        object-fit:cover;
    }

    .lb-player-name{
        min-width:0;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        font-size:12px;
    }

    .lb-rank{
        font-size:11px;
    }

    .lb-reward{
        min-width:0;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        font-size:11px;
        line-height:1.25;
    }

    .lb-reward-price{
        margin:0 !important;
        font-size:11px;
        font-weight:800;
        white-space:nowrap;
    }

    .lb-date{
        font-size:9px;
        line-height:1.2;
        opacity:.78;
        white-space:nowrap;
    }

    /* Empty/loading rows should remain normal full-width messages. */
    .lb-table tbody tr:has(.lb-empty){
        display:block;
        padding:14px;
    }

    .lb-table .lb-empty{
        width:100% !important;
        text-align:center !important;
        padding:0 !important;
    }

    /* Prize pool: deliberately compact 2-column layout on phones. */
    .lb-pool-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
        padding:6px 0;
    }

    .lb-item{
        min-height:178px;
        padding:8px 6px 9px;
        border-radius:10px;
    }

    .lb-item-tier{
        min-height:15px;
        margin-bottom:5px;
        padding:2px 5px;
        font-size:6px;
        letter-spacing:.06em;
    }

    .lb-item-img{
        height:122px;
        padding:6px 5px 5px;
        border-radius:9px;
    }

    .lb-item-name{
        min-height:28px;
        padding:0 2px 4px;
        font-size:9px;
        line-height:1.15;
    }

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

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

@media (max-width:420px){
    /* Keep two pool items side-by-side even on small phones. */
    .lb-pool-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:7px;
    }

    .lb-item{
        min-height:166px;
        padding:7px 5px 8px;
    }

    .lb-item-img{
        height:112px;
        padding:5px 4px;
    }

    .lb-item-name{
        min-height:26px;
        font-size:8.5px;
    }

    .lb-item-img img{
        max-width:94%;
        max-height:70px;
    }

    .lb-item-price{
        margin-top:5px;
        font-size:10px;
    }

    .lb-table thead tr,
    .lb-table tbody tr{
        grid-template-columns:29px minmax(0,1fr) auto;
        column-gap:7px;
    }

    .lb-table thead tr{
        padding:7px 8px 6px;
    }

    .lb-table tbody tr{
        padding:8px;
    }

    .lb-cell-reward,
    .lb-cell-date{
        padding-left:0 !important;
    }

    .lb-player img{
        width:28px;
        height:28px;
        flex-basis:28px;
    }
}

/* Rank alignment refinement for mobile winners */
@media (max-width:768px){
    .lb-cell-rank{
        align-self:start;
        padding-top:1px !important;
    }

    .lb-rank{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        line-height:1;
        transform:translateY(-1px);
    }
}

@media (max-width:420px){
    .lb-cell-rank{
        padding-top:0 !important;
    }

    .lb-rank{
        transform:translateY(-1px);
    }
}