*{box-sizing:border-box}

.rankings-browse-page{
    margin:0;
    background:var(--theme-role-surface-0e1429);
    color:var(--theme-role-text-fff);
    font-family:Arial,Helvetica,sans-serif;
}

.rankings-shell{
    width:min(1400px,calc(100% - 44px));
    margin:0 auto;
}

/* HERO */
.rankings-hero{
    overflow:hidden;
    border-bottom:1px solid var(--theme-role-border-323b60);
    background:
        radial-gradient(circle at 82% 20%,var(--theme-role-surface-rgba-91-32-200-22-518f95),transparent 330px),
        radial-gradient(circle at 18% -20%,var(--theme-role-surface-rgba-34-82-190-18-206c0e),transparent 380px),
        linear-gradient(135deg,var(--theme-role-surface-111832) 0%,var(--theme-role-surface-0a1024) 72%);
}

.rankings-hero-inner{
    min-height:290px;
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:40px;
    padding-top:42px;
    padding-bottom:42px;
}

.rankings-kicker{
    display:inline-flex;
    min-height:30px;
    padding:0 12px;
    align-items:center;
    background:var(--theme-role-surface-e7ff00);
    color:var(--theme-role-text-101225);
    font-size:10px;
    font-weight:1000;
    letter-spacing:.06em;
}

.rankings-hero h1{
    margin:15px 0 10px;
    color:var(--theme-role-text-fff);
    font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
    font-size:clamp(60px,7vw,102px);
    line-height:.82;
    font-style:italic;
    font-weight:1000;
    letter-spacing:-.055em;
}

.rankings-hero p{
    max-width:690px;
    margin:0;
    color:var(--theme-role-text-b2b8cf);
    font-size:15px;
    line-height:1.45;
    font-weight:700;
}

.rankings-hero-mark{
    color:var(--theme-role-text-rgba-231-255-0-07-5875df);
    font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
    font-size:190px;
    line-height:.8;
    font-style:italic;
    font-weight:1000;
    letter-spacing:-.08em;
    transform:rotate(-7deg);
}

/* CATEGORY STRIP */
.rankings-category-section{
    position:sticky;
    top:0;
    z-index:35;
    border-bottom:1px solid var(--theme-role-border-343d61);
    background:var(--theme-role-surface-rgba-12-18-39-96-0571d6);
    backdrop-filter:blur(8px);
}

.rankings-categories{
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding:14px 0;
    scrollbar-width:thin;
}

.rankings-categories a{
    flex:0 0 auto;
    min-height:37px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 15px;
    border:1px solid var(--theme-role-border-414a6e);
    border-radius:5px;
    background:var(--theme-role-surface-171d38);
    color:var(--theme-role-text-dfe2ec);
    text-decoration:none;
    font-size:9px;
    font-weight:1000;
    white-space:nowrap;
}

.rankings-categories a:hover{
    border-color:var(--theme-role-border-69749d);
    color:var(--theme-role-text-fff);
}

.rankings-categories a.active{
    border-color:var(--theme-role-border-e7ff00);
    background:var(--theme-role-surface-e7ff00);
    color:var(--theme-role-text-101225);
}

/* SHARED SECTION */
.rankings-block{
    padding:34px 0 6px;
}

.rankings-section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:15px;
    padding-bottom:10px;
    border-bottom:1px solid var(--theme-role-border-343d60);
}

.rankings-section-head>div>span{
    color:var(--theme-role-text-e7ff00);
    font-size:9px;
    font-weight:1000;
    letter-spacing:.09em;
}

.rankings-section-head h2{
    margin:4px 0 0;
    color:var(--theme-role-text-fff);
    font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
    font-size:29px;
    line-height:1;
    font-style:italic;
    font-weight:1000;
}

.rankings-section-head small{
    color:var(--theme-role-text-8f97ae);
    font-size:10px;
    font-weight:800;
}

/* FEATURED */
.rankings-featured-grid{
    display:grid;
    grid-template-columns:1.25fr 1fr 1fr;
    gap:15px;
}

.rankings-featured-card{
    overflow:hidden;
    border:1px solid var(--theme-role-border-465174);
    border-radius:10px;
    background:var(--theme-role-surface-171d38);
    box-shadow:0 10px 24px var(--theme-role-shadow-rgba-0-0-0-18-09884d);
}

.rankings-featured-card.primary{
    border-color:var(--theme-role-border-e7ff00);
}

.rankings-featured-main{
    position:relative;
    min-height:290px;
    display:block;
    color:var(--theme-role-text-fff);
    text-decoration:none;
    overflow:hidden;
}

.rankings-featured-card.primary .rankings-featured-main{
    min-height:360px;
}

.rankings-featured-art{
    position:absolute;
    inset:0;
    overflow:hidden;
    background:var(--theme-role-surface-151a33);
}

.rankings-featured-art img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .25s ease;
}

.rankings-featured-card:hover img{
    transform:scale(1.035);
}

.rankings-featured-art>b{
    position:absolute;
    left:50%;
    top:45%;
    transform:translate(-50%,-50%);
    color:var(--theme-role-text-e7ff00);
    font-size:70px;
    font-style:italic;
}

.rankings-featured-shade{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,var(--theme-role-surface-rgba-8-12-28-02-40e4dc) 20%,var(--theme-role-surface-rgba-8-12-28-28-a59521) 50%,var(--theme-role-surface-rgba-8-12-28-96-e93837) 100%);
}

.rankings-featured-copy{
    position:absolute;
    z-index:3;
    left:22px;
    right:22px;
    bottom:21px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.rankings-featured-copy small,
.ranking-card-copy>small,
.rankings-trending-copy small{
    color:var(--theme-role-text-e7ff00);
    font-size:9px;
    font-weight:1000;
    letter-spacing:.07em;
}

.rankings-featured-copy strong{
    margin-top:5px;
    color:var(--theme-role-text-fff);
    font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
    font-size:clamp(24px,2.6vw,38px);
    line-height:.94;
    font-style:italic;
    font-weight:1000;
    text-transform:uppercase;
    text-shadow:0 3px 11px var(--theme-role-shadow-rgba-0-0-0-75-33bd21);
}

.rankings-featured-copy em{
    margin-top:9px;
    color:var(--theme-role-text-c7ccda);
    font-size:9px;
    font-style:normal;
    font-weight:900;
}

.rankings-featured-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    border-top:1px solid var(--theme-role-border-3d4667);
}

.rankings-featured-actions a{
    min-height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--theme-role-text-dadde8);
    text-decoration:none;
    font-size:9px;
    font-weight:1000;
}

.rankings-featured-actions a+ a{
    border-left:1px solid var(--theme-role-border-3d4667);
}

.rankings-featured-actions a.battle{
    color:var(--theme-role-text-e7ff00);
}

.rankings-featured-actions a:hover{
    background:var(--theme-role-surface-202744);
    color:var(--theme-role-text-fff);
}

/* TRENDING */
.rankings-trending-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.rankings-trending-card{
    min-height:92px;
    display:grid;
    grid-template-columns:54px 1fr auto;
    gap:15px;
    align-items:center;
    padding:14px 16px;
    border:1px solid var(--theme-role-border-3e486b);
    border-radius:8px;
    background:var(--theme-role-surface-151b35);
    color:var(--theme-role-text-fff);
    text-decoration:none;
}

.rankings-trending-card:hover{
    border-color:var(--theme-role-border-63709b);
    background:var(--theme-role-surface-1a213f);
}

.rankings-trending-number{
    color:var(--theme-role-text-e7ff00);
    font-size:28px;
    font-style:italic;
    font-weight:1000;
    text-align:center;
}

.rankings-trending-copy{
    min-width:0;
    display:flex;
    flex-direction:column;
}

.rankings-trending-copy strong{
    margin-top:3px;
    color:var(--theme-role-text-fff);
    font-size:15px;
    line-height:1.06;
    font-style:italic;
    font-weight:1000;
}

.rankings-trending-copy em{
    margin-top:5px;
    overflow:hidden;
    color:var(--theme-role-text-9ca4bb);
    font-size:9px;
    font-style:normal;
    font-weight:800;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.rankings-trending-stat{
    color:var(--theme-role-text-828ba4);
    font-size:7px;
    font-weight:900;
    text-align:right;
}

.rankings-trending-stat b{
    display:block;
    margin-bottom:3px;
    color:var(--theme-role-text-fff);
    font-size:15px;
}

/* ALL RANKINGS */
.rankings-all-block{
    padding-bottom:32px;
}

.rankings-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}

.ranking-card{
    overflow:hidden;
    border:1px solid var(--theme-role-border-465174);
    border-radius:9px;
    background:var(--theme-role-surface-171d38);
    box-shadow:0 8px 20px var(--theme-role-shadow-rgba-0-0-0-16-dc0c50);
}

.ranking-card-main{
    display:grid;
    grid-template-columns:42% 58%;
    min-height:220px;
    color:var(--theme-role-text-fff);
    text-decoration:none;
}

.ranking-card-art{
    position:relative;
    overflow:hidden;
    background:var(--theme-role-surface-11162d);
}

.ranking-card-art img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .22s ease;
}

.ranking-card:hover .ranking-card-art img{
    transform:scale(1.035);
}

.ranking-card-art>b{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    color:var(--theme-role-text-e7ff00);
    font-size:48px;
}

.ranking-card-number{
    position:absolute;
    left:10px;
    top:10px;
    min-width:32px;
    min-height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--theme-role-border-rgba-231-255-0-6-5d9e7b);
    background:var(--theme-role-surface-rgba-8-12-28-82-7ece3c);
    color:var(--theme-role-text-e7ff00);
    font-size:10px;
    font-weight:1000;
}

.ranking-card-copy{
    min-width:0;
    display:flex;
    flex-direction:column;
    padding:20px 17px 16px;
    background:var(--theme-role-surface-171d38);
}

.ranking-card-copy>strong{
    margin-top:5px;
    color:var(--theme-role-text-fff);
    font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
    font-size:22px;
    line-height:.95;
    font-style:italic;
    font-weight:1000;
    text-transform:uppercase;
}

.ranking-card-leaders{
    display:grid;
    gap:5px;
    margin-top:15px;
}

.ranking-card-leaders span{
    min-width:0;
    display:grid;
    grid-template-columns:22px 1fr;
    gap:7px;
    color:var(--theme-role-text-b6bccd);
    font-size:9px;
    line-height:1.12;
}

.ranking-card-leaders b{
    color:var(--theme-role-text-e7ff00);
}

.ranking-card-copy>em{
    margin-top:auto;
    padding-top:13px;
    color:var(--theme-role-text-858da5);
    font-size:8px;
    font-style:normal;
    font-weight:900;
}

.ranking-card-copy>em i{
    margin:0 5px;
    font-style:normal;
}

.ranking-card-actions{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    border-top:1px solid var(--theme-role-border-3c4566);
}

.ranking-card-actions a{
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--theme-role-text-d8dbe6);
    text-decoration:none;
    font-size:8px;
    font-weight:1000;
}

.ranking-card-actions a+a{
    border-left:1px solid var(--theme-role-border-3c4566);
}

.ranking-card-actions a.battle,
.ranking-card-actions a.quick{
    color:var(--theme-role-text-e7ff00);
}

.ranking-card-actions a:hover{
    background:var(--theme-role-surface-202744);
    color:var(--theme-role-text-fff);
}

.rankings-empty{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:42px 32px;
    border:1px solid var(--theme-role-border-465174);
    background:var(--theme-role-surface-151b35);
}

.rankings-empty strong{
    color:var(--theme-role-text-e7ff00);
    font-size:24px;
    font-style:italic;
}

.rankings-empty span{
    color:var(--theme-role-text-a0a8bc);
}

.rankings-empty a{
    margin-top:5px;
    color:var(--theme-role-text-fff);
    font-weight:1000;
}

/* CREATE */
.rankings-create{
    padding:0 0 55px;
}

.rankings-create-card{
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:22px;
    align-items:center;
    padding:30px 34px;
    border:2px solid var(--theme-role-border-e7ff00);
    border-radius:10px;
    background:
        radial-gradient(circle at 12% 50%,var(--theme-role-surface-rgba-231-255-0-08-1625d1),transparent 180px),
        var(--theme-role-surface-131a34);
}

.rankings-create-card>span{
    color:var(--theme-role-text-e7ff00);
    font-size:44px;
}

.rankings-create-card small{
    color:var(--theme-role-text-e7ff00);
    font-size:9px;
    font-weight:1000;
    letter-spacing:.07em;
}

.rankings-create-card h2{
    margin:3px 0 3px;
    font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
    font-size:32px;
    line-height:1;
    font-style:italic;
}

.rankings-create-card p{
    margin:0;
    color:var(--theme-role-text-aab1c5);
    font-size:11px;
    font-weight:700;
}

.rankings-create-card a{
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 20px;
    background:var(--theme-role-surface-e7ff00);
    color:var(--theme-role-text-101225);
    text-decoration:none;
    font-size:10px;
    font-weight:1000;
}

/* FOOTER */
.rankings-footer{
    border-top:1px solid var(--theme-role-border-333b59);
    background:var(--theme-role-surface-090f22);
}

.rankings-footer-inner{
    min-height:70px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    color:var(--theme-role-text-858da7);
    font-size:9px;
    font-weight:1000;
}

/* TABLET */
@media(max-width:1050px){
    .rankings-featured-grid{
        grid-template-columns:1fr 1fr;
    }

    .rankings-featured-card.primary{
        grid-column:1/-1;
    }

    .rankings-featured-card.primary .rankings-featured-main{
        min-height:320px;
    }

    .rankings-grid{
        grid-template-columns:1fr 1fr;
    }

    .rankings-trending-grid{
        grid-template-columns:1fr;
    }
}

/* MOBILE */
@media(max-width:720px){
    .rankings-shell{
        width:calc(100% - 18px);
    }

    .rankings-hero-inner{
        min-height:240px;
        grid-template-columns:1fr;
        padding-top:30px;
        padding-bottom:30px;
    }

    .rankings-hero h1{
        font-size:55px;
    }

    .rankings-hero p{
        font-size:13px;
    }

    .rankings-hero-mark{
        display:none;
    }

    .rankings-category-section{
        top:0;
    }

    .rankings-categories{
        padding-top:10px;
        padding-bottom:10px;
    }

    .rankings-categories a{
        min-height:34px;
        padding:0 12px;
        font-size:8px;
    }

    .rankings-block{
        padding-top:25px;
    }

    .rankings-section-head{
        align-items:flex-start;
        flex-direction:column;
        gap:5px;
    }

    .rankings-section-head h2{
        font-size:25px;
    }

    .rankings-featured-grid,
    .rankings-grid{
        grid-template-columns:1fr;
    }

    .rankings-featured-card.primary{
        grid-column:auto;
    }

    .rankings-featured-card.primary .rankings-featured-main,
    .rankings-featured-main{
        min-height:270px;
    }

    .rankings-trending-card{
        grid-template-columns:45px 1fr;
    }

    .rankings-trending-stat{
        display:none;
    }

    .ranking-card-main{
        grid-template-columns:42% 58%;
        min-height:190px;
    }

    .ranking-card-copy{
        padding:16px 13px 13px;
    }

    .ranking-card-copy>strong{
        font-size:19px;
    }

    .ranking-card-leaders{
        margin-top:11px;
    }

    .ranking-card-actions a{
        min-height:43px;
        font-size:7.5px;
    }

    .rankings-create-card{
        grid-template-columns:auto 1fr;
        padding:25px 20px;
    }

    .rankings-create-card>a{
        grid-column:1/-1;
    }
}

@media(max-width:390px){
    .rankings-hero h1{
        font-size:48px;
    }

    .ranking-card-main{
        grid-template-columns:40% 60%;
        min-height:185px;
    }

    .ranking-card-copy>strong{
        font-size:17px;
    }

    .ranking-card-leaders span{
        font-size:8px;
    }
}


/* ================================================================
   Rankings V1.2 — FEATURED ALIGNMENT + SECTION DIVERSITY SUPPORT
   All three Start Here cards now share the same height and action baseline.
   ================================================================ */

.rankings-featured-grid{
    align-items:stretch;
}

.rankings-featured-card{
    display:flex;
    flex-direction:column;
    height:100%;
}

.rankings-featured-main,
.rankings-featured-card.primary .rankings-featured-main{
    flex:1 1 auto;
    min-height:330px;
}

.rankings-featured-actions{
    flex:0 0 auto;
    margin-top:auto;
    width:100%;
}

@media(max-width:1050px){
    .rankings-featured-card.primary .rankings-featured-main,
    .rankings-featured-main{
        min-height:300px;
    }
}

@media(max-width:720px){
    .rankings-featured-card.primary .rankings-featured-main,
    .rankings-featured-main{
        min-height:270px;
    }
}


/* ================================================================
   Rankings V1.3 — FEATURED ACTION TYPOGRAPHY + CARD FOOTER LOCK
   - Start Here buttons match the cleaner homepage card action style.
   - All Rankings action bars are pinned to the bottom of every card.
   ================================================================ */

/* START HERE — same visual language as homepage card actions */
.rankings-featured-actions{
    min-height:54px;
    background:var(--theme-role-surface-151b35);
    border-top:1px solid var(--theme-role-border-35405c);
}

.rankings-featured-actions a{
    min-height:54px;
    padding:0 14px;
    color:var(--theme-role-text-f7f8fb);
    font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
    font-size:13px;
    line-height:1;
    font-weight:1000;
    letter-spacing:-.01em;
    text-transform:uppercase;
}

.rankings-featured-actions a.battle{
    color:var(--theme-role-text-f7f8fb);
}

.rankings-featured-actions a.battle::first-letter{
    color:var(--theme-role-text-ff812c);
}

.rankings-featured-actions a + a{
    border-left:1px solid var(--theme-role-border-35405c);
}

.rankings-featured-actions a:hover{
    background:var(--theme-role-surface-202744);
    color:var(--theme-role-text-fff);
}

/* Keep the orange bolt compact and close to BATTLE. */
.rankings-featured-actions .battle{
    word-spacing:1px;
}

/* ALL RANKINGS — lock every action bar to the card bottom */
.rankings-grid{
    align-items:stretch;
}

.ranking-card{
    display:flex;
    flex-direction:column;
    height:100%;
}

.ranking-card-main{
    flex:1 1 auto;
    width:100%;
}

.ranking-card-actions{
    flex:0 0 auto;
    width:100%;
    margin-top:auto;
}

@media(max-width:720px){
    .rankings-featured-actions,
    .rankings-featured-actions a{
        min-height:50px;
    }

    .rankings-featured-actions a{
        font-size:12px;
    }
}


/* ================================================================
   Rankings V1.4 — tighter Top 3 leader spacing
   Built on top of the V1.3 fixed card/footer CSS.
   ================================================================ */
.ranking-card-leaders span{
    grid-template-columns:16px minmax(0,1fr);
    gap:3px;
}


/* ================================================================
   Rankings V1.5 — SIMPLER FLOW + TOP 4 PREVIEWS
   START HERE removed. Trending now follows categories directly.
   Catalogue cards show four live leaders instead of three.
   ================================================================ */
.rankings-trending-block{
    padding-top:30px;
}

.ranking-card-leaders{
    gap:4px;
    margin-top:12px;
}

.ranking-card-leaders span{
    grid-template-columns:16px minmax(0,1fr);
    gap:3px;
    font-size:8.5px;
    line-height:1.08;
}

.ranking-card-copy{
    padding-top:17px;
    padding-bottom:14px;
}

@media(max-width:720px){
    .rankings-trending-block{
        padding-top:24px;
    }

    .ranking-card-leaders{
        margin-top:9px;
        gap:3px;
    }

    .ranking-card-leaders span{
        font-size:8px;
    }
}

/* ================================================================
   Rankings V1.6 — NEW / HOT / ALL browse filters
   Compact mode tabs above the ranking strip. HOT is the default.
   ================================================================ */

.rankings-mode-bar{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    margin:0 0 14px;
}

.rankings-mode-tabs{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:4px;
    border:1px solid var(--theme-role-border-343d60);
    border-radius:7px;
    background:var(--theme-role-surface-11172e);
}

.rankings-mode-tabs a{
    min-width:76px;
    min-height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 16px;
    border:1px solid transparent;
    border-radius:5px;
    color:var(--theme-role-text-b8bfd0);
    text-decoration:none;
    font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
    font-size:12px;
    line-height:1;
    font-weight:1000;
    letter-spacing:.03em;
    text-transform:uppercase;
    transition:background .14s ease,color .14s ease,border-color .14s ease,transform .14s ease;
}

.rankings-mode-tabs a:hover{
    color:var(--theme-role-text-fff);
    border-color:var(--theme-role-border-4d587c);
    background:var(--theme-role-surface-171e39);
}

.rankings-mode-tabs a.active{
    border-color:var(--theme-role-border-e7ff00);
    background:var(--theme-role-surface-e7ff00);
    color:var(--theme-role-text-101225);
    box-shadow:2px 2px 0 var(--theme-role-shadow-060913);
}

@media(max-width:720px){
    .rankings-mode-bar{
        margin-bottom:12px;
    }

    .rankings-mode-tabs{
        width:100%;
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:5px;
    }

    .rankings-mode-tabs a{
        min-width:0;
        min-height:38px;
        padding:0 8px;
        font-size:11px;
    }
}



/* Songs browse cards: subtle musical identity behind the copy. */
.ranking-card.rankings-category-songs .ranking-card-copy{position:relative;overflow:hidden;isolation:isolate;}
.ranking-card.rankings-category-songs .ranking-card-copy::after{content:"♫";position:absolute;z-index:0;top:34px;right:12px;color:var(--theme-role-text-e7ff00);font-family:"Segoe UI Symbol","Segoe UI",Arial,sans-serif;font-size:92px;line-height:.8;font-weight:1000;opacity:.10;transform:rotate(-8deg);pointer-events:none;}
.ranking-card.rankings-category-songs .ranking-card-copy>*{position:relative;z-index:1;}

/* ================================================================
   Rankings V1.8 — live-site Top 10 leaderboards
   Keeps the Top10s9 information layout, but uses the existing live
   BattleRanker theme roles, typography, radii, borders and controls.
   ================================================================ */

.rankings-leaderboard-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
    align-items:start;
}

.rankings-leaderboard-card{
    min-width:0;
    overflow:hidden;
    border:1px solid var(--theme-role-border-465174);
    border-radius:9px;
    background:var(--theme-role-surface-171d38);
    color:var(--theme-role-text-fff);
    box-shadow:0 8px 20px var(--theme-role-shadow-rgba-0-0-0-16-dc0c50);
}

.rankings-leaderboard-head{
    min-height:92px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:18px;
    padding:15px 17px 14px;
    border-bottom:1px solid var(--theme-role-border-3d4667);
    background:var(--theme-role-surface-151b35);
    color:var(--theme-role-text-fff);
}

.rankings-leaderboard-head>div{min-width:0}

.rankings-leaderboard-head span{
    display:block;
    margin-bottom:4px;
    color:var(--theme-role-text-e7ff00);
    font-size:9px;
    font-weight:1000;
    letter-spacing:.07em;
}

.rankings-leaderboard-head h3{
    margin:0;
    overflow:hidden;
    color:var(--theme-role-text-fff);
    font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
    font-size:26px;
    font-style:italic;
    font-weight:1000;
    line-height:.95;
    letter-spacing:-.025em;
    text-transform:uppercase;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.rankings-leaderboard-head p{
    display:flex;
    align-items:center;
    gap:7px;
    margin:7px 0 0;
    color:var(--theme-role-text-9ca4bb);
    font-size:8px;
    font-weight:900;
    line-height:1;
    letter-spacing:.04em;
}

.rankings-leaderboard-head p i{
    display:inline-block;
    width:3px;
    height:3px;
    border-radius:50%;
    background:var(--theme-role-text-828ba4);
}

.rankings-leaderboard-head>b{
    min-width:58px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 10px;
    border:1px solid var(--theme-role-border-e7ff00);
    border-radius:5px;
    background:var(--theme-role-surface-rgba-231-255-0-08-1625d1);
    color:var(--theme-role-text-e7ff00);
    font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
    font-size:13px;
    font-style:italic;
    font-weight:1000;
    line-height:1;
    white-space:nowrap;
}

.rankings-leaderboard-columns{
    min-height:30px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 72px 210px;
    align-items:center;
    border-bottom:1px solid var(--theme-role-border-343d60);
    background:var(--theme-role-surface-11172e);
    color:var(--theme-role-text-8f97ae);
    font-size:7px;
    font-weight:1000;
    letter-spacing:.07em;
}

.rankings-leaderboard-columns span{padding:0 11px}
.rankings-leaderboard-columns span:nth-child(2),
.rankings-leaderboard-columns span:last-child{text-align:center}

.rankings-leaderboard-list{
    list-style:none;
    margin:0;
    padding:0;
}

.rankings-leaderboard-list>li{
    min-height:62px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 72px 210px;
    border-bottom:1px solid var(--theme-role-border-343d60);
    background:var(--theme-role-surface-171d38);
}

.rankings-leaderboard-list>li:nth-child(even){
    background:var(--theme-role-surface-151b35);
}

.rankings-leaderboard-entry{
    min-width:0;
    display:grid;
    grid-template-columns:38px 46px minmax(0,1fr);
    align-items:center;
    gap:9px;
    padding:7px 11px;
}

.rankings-leaderboard-pos{
    color:var(--theme-role-text-e7ff00);
    font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
    font-size:18px;
    font-style:italic;
    font-weight:1000;
    line-height:1;
    text-align:center;
}

.rankings-leaderboard-thumb{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    overflow:hidden;
    border:1px solid var(--theme-role-border-465174);
    border-radius:5px;
    background:var(--theme-role-surface-11162d);
    color:var(--theme-role-text-e7ff00);
    font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
    font-size:21px;
    font-style:italic;
    font-weight:1000;
}

.rankings-leaderboard-thumb img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.rankings-leaderboard-name{
    min-width:0;
    overflow:hidden;
    color:var(--theme-role-text-f7f8fb);
    font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
    font-size:16px;
    font-style:italic;
    font-weight:1000;
    line-height:1;
    text-transform:uppercase;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.rankings-leaderboard-move{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border-left:1px solid var(--theme-role-border-343d60);
    color:var(--theme-role-text-8f97ae);
}

.rankings-leaderboard-move strong{
    font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
    font-size:15px;
    font-style:italic;
    font-weight:1000;
    line-height:1;
}

.rankings-leaderboard-move small{
    margin-top:4px;
    font-size:6px;
    font-weight:1000;
    letter-spacing:.07em;
}

.rankings-leaderboard-move.is-up{color:var(--theme-role-text-e7ff00)}
.rankings-leaderboard-move.is-down{color:var(--theme-role-text-8f97ae)}

.rankings-leaderboard-record{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-left:1px solid var(--theme-role-border-343d60);
}

.rankings-leaderboard-record span{
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border-left:1px solid var(--theme-role-border-343d60);
}

.rankings-leaderboard-record span:first-child{border-left:0}

.rankings-leaderboard-record strong{
    color:var(--theme-role-text-f7f8fb);
    font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
    font-size:16px;
    font-style:italic;
    font-weight:1000;
    line-height:.95;
}

.rankings-leaderboard-record small{
    margin-top:5px;
    color:var(--theme-role-text-828ba4);
    font-size:6px;
    font-weight:1000;
    letter-spacing:.04em;
    white-space:nowrap;
}

.rankings-leaderboard-list>li.is-number-one{
    min-height:92px;
    border-bottom:1px solid var(--theme-role-border-e7ff00);
    background:var(--theme-role-surface-202744);
}

.rankings-leaderboard-list>li.is-number-one .rankings-leaderboard-entry{
    grid-template-columns:44px 70px minmax(0,1fr);
    gap:12px;
    padding-top:10px;
    padding-bottom:10px;
}

.rankings-leaderboard-list>li.is-number-one .rankings-leaderboard-pos{font-size:25px}

.rankings-leaderboard-list>li.is-number-one .rankings-leaderboard-thumb{
    width:70px;
    height:70px;
    border-color:var(--theme-role-border-e7ff00);
}

.rankings-leaderboard-list>li.is-number-one .rankings-leaderboard-name{font-size:23px}
.rankings-leaderboard-list>li.is-number-one .rankings-leaderboard-move strong{font-size:18px}
.rankings-leaderboard-list>li.is-number-one .rankings-leaderboard-record strong{font-size:20px}

.rankings-leaderboard-actions{
    min-height:52px;
    display:grid;
    grid-template-columns:1fr 1fr;
    border-top:1px solid var(--theme-role-border-3c4566);
    background:var(--theme-role-surface-151b35);
}

.rankings-leaderboard-actions a{
    min-height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:0 14px;
    color:var(--theme-role-text-f7f8fb);
    font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
    font-size:12px;
    font-weight:1000;
    line-height:1;
    text-decoration:none;
    text-transform:uppercase;
}

.rankings-leaderboard-actions a+a{
    border-left:1px solid var(--theme-role-border-3c4566);
}

.rankings-leaderboard-actions a.battle{
    color:var(--theme-role-text-e7ff00);
}

.rankings-leaderboard-actions a:hover{
    background:var(--theme-role-surface-202744);
    color:var(--theme-role-text-fff);
}

.rankings-leaderboard-actions span{font-size:12px}

@media(max-width:1060px){
    .rankings-leaderboard-columns,
    .rankings-leaderboard-list>li{
        grid-template-columns:minmax(0,1fr) 64px 180px;
    }

    .rankings-leaderboard-record strong{font-size:15px}
}

@media(max-width:860px){
    .rankings-leaderboard-grid{grid-template-columns:1fr}
}

@media(max-width:620px){
    .rankings-leaderboard-grid{gap:14px}

    .rankings-leaderboard-card{border-radius:8px}

    .rankings-leaderboard-head{
        min-height:78px;
        padding:12px 13px;
        gap:10px;
    }

    .rankings-leaderboard-head h3{
        font-size:22px;
        white-space:normal;
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
    }

    .rankings-leaderboard-head>b{
        min-width:52px;
        height:36px;
        padding:0 8px;
        font-size:11px;
    }

    .rankings-leaderboard-columns{display:none}

    .rankings-leaderboard-list>li{
        grid-template-columns:minmax(0,1fr) 55px;
        min-height:68px;
    }

    .rankings-leaderboard-entry{
        grid-template-columns:33px 48px minmax(0,1fr);
        gap:7px;
        padding:7px 8px;
    }

    .rankings-leaderboard-pos{font-size:17px}

    .rankings-leaderboard-thumb{
        width:48px;
        height:48px;
    }

    .rankings-leaderboard-name{font-size:15px}

    .rankings-leaderboard-move{
        grid-column:2;
        grid-row:1;
        border-left:1px solid var(--theme-role-border-343d60);
    }

    .rankings-leaderboard-record{
        grid-column:1 / -1;
        min-height:39px;
        display:grid;
        grid-template-columns:repeat(3,1fr);
        border-top:1px solid var(--theme-role-border-343d60);
        border-left:0;
    }

    .rankings-leaderboard-record strong{font-size:15px}
    .rankings-leaderboard-record small{font-size:6px}

    .rankings-leaderboard-list>li.is-number-one{
        grid-template-columns:minmax(0,1fr) 58px;
        min-height:0;
    }

    .rankings-leaderboard-list>li.is-number-one .rankings-leaderboard-entry{
        grid-template-columns:37px 62px minmax(0,1fr);
        gap:8px;
        padding:10px 8px;
    }

    .rankings-leaderboard-list>li.is-number-one .rankings-leaderboard-pos{font-size:23px}

    .rankings-leaderboard-list>li.is-number-one .rankings-leaderboard-thumb{
        width:62px;
        height:62px;
    }

    .rankings-leaderboard-list>li.is-number-one .rankings-leaderboard-name{font-size:20px}
    .rankings-leaderboard-list>li.is-number-one .rankings-leaderboard-record{grid-column:1 / -1}
    .rankings-leaderboard-list>li.is-number-one .rankings-leaderboard-record strong{font-size:18px}

    .rankings-leaderboard-actions,
    .rankings-leaderboard-actions a{min-height:50px}

    .rankings-leaderboard-actions a{font-size:11px}
}

@media(max-width:390px){
    .rankings-leaderboard-entry{grid-template-columns:30px 43px minmax(0,1fr)}

    .rankings-leaderboard-thumb{
        width:43px;
        height:43px;
    }

    .rankings-leaderboard-name{font-size:14px}

    .rankings-leaderboard-list>li.is-number-one .rankings-leaderboard-entry{
        grid-template-columns:34px 56px minmax(0,1fr);
    }

    .rankings-leaderboard-list>li.is-number-one .rankings-leaderboard-thumb{
        width:56px;
        height:56px;
    }

    .rankings-leaderboard-list>li.is-number-one .rankings-leaderboard-name{font-size:18px}
}


/* ================================================================
   Rankings V1.9 — image-led categories + filters above/right
   Matches the visual category language now used on Browse.
   ================================================================ */

/* The stronger image rail no longer needs to be sticky. */
.rankings-category-section{
    position:relative !important;
    top:auto !important;
    z-index:20;
    padding:14px 0 17px;
    border-bottom:1px solid var(--theme-role-border-343d61);
    background:var(--theme-role-surface-10162b);
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
}

/* NEW / HOT / ALL sits above the visual categories and aligns right on desktop. */
.rankings-category-topline{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    min-height:44px;
    padding:0 0 13px;
    border-bottom:1px solid var(--theme-role-border-35405e);
}

.rankings-category-topline .rankings-mode-tabs{
    margin:0;
}

/* Retire the old text-pill category strip. */
.rankings-categories{
    display:none !important;
}

/* Image category navigation. */
.rankings-category-rail{
    display:flex;
    gap:10px;
    margin:0;
    padding:14px 0 2px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
}

.rankings-category-rail::-webkit-scrollbar{display:none}

.rankings-category-tile{
    flex:0 0 150px;
    min-width:0;
    overflow:hidden;
    scroll-snap-align:start;
    border:1px solid var(--theme-role-border-46516d);
    border-radius:9px;
    background:var(--theme-role-surface-151b34);
    color:var(--theme-role-text-fff);
    text-decoration:none;
    box-shadow:0 4px 12px var(--theme-role-shadow-rgba-0-0-0-16-dc0c50);
    transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
}

.rankings-category-tile:hover{
    transform:translateY(-2px);
    border-color:var(--theme-role-border-e7ff00);
    box-shadow:0 7px 15px var(--theme-role-shadow-rgba-0-0-0-22-41d185);
}

.rankings-category-tile-image{
    position:relative;
    display:block;
    height:76px;
    overflow:hidden;
    background:
        radial-gradient(circle at 50% 40%,var(--theme-role-surface-rgba-231-255-0-07-5875df),transparent 48%),
        var(--theme-role-surface-171d35);
}

.rankings-category-tile-image img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .18s ease;
}

.rankings-category-tile:hover .rankings-category-tile-image img{transform:scale(1.035)}

.rankings-category-tile-shade{
    position:absolute;
    inset:0;
    z-index:2;
    background:linear-gradient(180deg,transparent 32%,var(--theme-role-surface-rgba-3-6-12-42-62316c));
    pointer-events:none;
}

.rankings-category-tile-image.is-fallback{
    display:grid;
    place-items:center;
}

.rankings-category-tile-image.is-fallback b{
    position:relative;
    z-index:1;
    color:var(--theme-role-text-e7ff00);
    font-family:var(--theme-font-display,"Arial Narrow",sans-serif);
    font-size:34px;
    font-weight:700;
}

.rankings-category-tile>strong{
    display:flex;
    align-items:center;
    min-height:38px;
    padding:7px 9px;
    color:var(--theme-role-text-f5f7fb);
    font-family:var(--theme-font-display,"Arial Narrow",sans-serif);
    font-size:14px;
    line-height:1;
    font-weight:600;
    letter-spacing:.2px;
    text-transform:uppercase;
    transition:background .15s ease,color .15s ease;
}

.rankings-category-tile>strong::after{
    content:"→";
    margin-left:auto;
    padding-left:6px;
    color:var(--theme-role-text-e7ff00);
    font-family:Arial,sans-serif;
    font-size:12px;
    font-weight:900;
}

.rankings-category-tile.active{
    border-color:var(--theme-role-border-e7ff00);
    box-shadow:0 0 0 1px var(--theme-role-shadow-rgba-231-255-0-18-718b80),0 6px 15px var(--theme-role-shadow-rgba-0-0-0-22-41d185);
}

.rankings-category-tile.active>strong{
    background:var(--theme-role-surface-e7ff00);
    color:var(--theme-role-text-080b14);
}

.rankings-category-tile.active>strong::after{
    color:var(--theme-role-text-080b14);
}

/* The old standalone mode block has been removed from the markup. These
   rules keep spacing tidy if a cached copy ever renders it. */
.rankings-trending-block:has(.rankings-mode-bar:only-child){
    display:none;
}

/* The leaderboard catalogue now follows the category controls directly. */
.rankings-all-block{
    padding-top:30px;
}

@media(max-width:720px){
    .rankings-category-section{
        padding:11px 0 13px;
    }

    .rankings-category-topline{
        min-height:0;
        padding:0 0 11px;
    }

    .rankings-category-topline .rankings-mode-tabs{
        width:100%;
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:5px;
    }

    .rankings-category-rail{
        gap:8px;
        margin-right:-9px;
        padding:11px 9px 2px 0;
    }

    .rankings-category-tile{
        flex-basis:118px;
        border-radius:8px;
    }

    .rankings-category-tile-image{
        height:62px;
    }

    .rankings-category-tile-image.is-fallback b{
        font-size:29px;
    }

    .rankings-category-tile>strong{
        min-height:35px;
        padding:7px 8px;
        font-size:12px;
    }

    .rankings-category-tile>strong::after{
        font-size:11px;
    }

    .rankings-all-block{
        padding-top:24px;
    }
}

@media(max-width:390px){
    .rankings-category-tile{flex-basis:112px}
    .rankings-category-tile-image{height:59px}
    .rankings-category-tile>strong{font-size:11.5px}
}


/* ================================================================
   Rankings V2.0 — calmer mobile leaderboard presentation
   Keeps every stat, but makes the secondary data read as one strip
   instead of a stack of boxed table cells. Desktop is unchanged.
   ================================================================ */
@media(max-width:620px){
    .rankings-leaderboard-card{
        border-radius:8px;
    }

    /* Header: give long list titles more room and quieten the TOP 10 badge. */
    .rankings-leaderboard-head{
        min-height:0;
        padding:13px 13px 12px;
        gap:9px;
    }

    .rankings-leaderboard-head span{
        margin-bottom:5px;
        font-size:8px;
    }

    .rankings-leaderboard-head h3{
        font-size:21px;
        line-height:.98;
        white-space:normal;
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
    }

    .rankings-leaderboard-head p{
        margin-top:7px;
        gap:6px;
        font-size:7px;
        color:var(--theme-role-text-8f97ae);
    }

    .rankings-leaderboard-head>b{
        min-width:48px;
        height:33px;
        padding:0 7px;
        border-radius:5px;
        background:var(--theme-role-surface-rgba-231-255-0-08-1625d1);
        font-size:10px;
    }

    /* Each contender becomes one clear identity row + one quiet stats strip. */
    .rankings-leaderboard-list>li,
    .rankings-leaderboard-list>li:nth-child(even){
        grid-template-columns:minmax(0,1fr) 50px;
        min-height:0;
        background:var(--theme-role-surface-171d38);
        border-bottom:1px solid var(--theme-role-border-343d60);
    }

    .rankings-leaderboard-entry{
        grid-template-columns:31px 44px minmax(0,1fr);
        gap:7px;
        min-height:64px;
        padding:8px 8px 8px 9px;
    }

    .rankings-leaderboard-pos{
        font-size:17px;
    }

    .rankings-leaderboard-thumb{
        width:44px;
        height:44px;
        border-radius:5px;
    }

    .rankings-leaderboard-name{
        font-size:15px;
        line-height:1.02;
        white-space:normal;
        overflow:visible;
        text-overflow:clip;
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
    }

    /* Movement stays obvious, but no longer feels like another table cell. */
    .rankings-leaderboard-move{
        grid-column:2;
        grid-row:1;
        min-width:0;
        padding:0 4px;
        border-left:0;
        background:var(--theme-role-surface-151b35);
    }

    .rankings-leaderboard-move strong{
        font-size:14px;
    }

    .rankings-leaderboard-move small{
        margin-top:3px;
        font-size:5.5px;
        letter-spacing:.05em;
    }

    /* One continuous secondary-information band, not three boxed cells. */
    .rankings-leaderboard-record{
        grid-column:1 / -1;
        min-height:40px;
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:6px;
        padding:6px 8px 7px;
        border-top:1px solid var(--theme-role-border-2f3852);
        border-left:0;
        background:var(--theme-role-surface-11172e);
    }

    .rankings-leaderboard-record span{
        min-width:0;
        padding:0 2px;
        border-left:0 !important;
        background:transparent;
    }

    .rankings-leaderboard-record strong{
        font-size:14px;
        line-height:1;
        color:var(--theme-role-text-f7f8fb);
    }

    .rankings-leaderboard-record small{
        margin-top:4px;
        color:var(--theme-role-text-737d96);
        font-size:5.5px;
        letter-spacing:.035em;
    }

    /* #1 remains special, but with a quieter side accent instead of a bright full-width rule. */
    .rankings-leaderboard-list>li.is-number-one{
        grid-template-columns:minmax(0,1fr) 52px;
        min-height:0;
        border-bottom:1px solid var(--theme-role-border-343d60);
        background:var(--theme-role-surface-202744);
        box-shadow:inset 3px 0 0 var(--theme-role-surface-e7ff00);
    }

    .rankings-leaderboard-list>li.is-number-one .rankings-leaderboard-entry{
        grid-template-columns:34px 58px minmax(0,1fr);
        gap:8px;
        min-height:78px;
        padding:9px 8px 9px 11px;
    }

    .rankings-leaderboard-list>li.is-number-one .rankings-leaderboard-pos{
        font-size:22px;
    }

    .rankings-leaderboard-list>li.is-number-one .rankings-leaderboard-thumb{
        width:58px;
        height:58px;
    }

    .rankings-leaderboard-list>li.is-number-one .rankings-leaderboard-name{
        font-size:19px;
        line-height:1;
    }

    .rankings-leaderboard-list>li.is-number-one .rankings-leaderboard-move strong{
        font-size:16px;
    }

    .rankings-leaderboard-list>li.is-number-one .rankings-leaderboard-record{
        grid-column:1 / -1;
        background:var(--theme-role-surface-151b35);
    }

    .rankings-leaderboard-list>li.is-number-one .rankings-leaderboard-record strong{
        font-size:15px;
    }

    .rankings-leaderboard-actions,
    .rankings-leaderboard-actions a{
        min-height:48px;
    }

    .rankings-leaderboard-actions a{
        font-size:10.5px;
    }
}

@media(max-width:390px){
    .rankings-leaderboard-head h3{font-size:19px}

    .rankings-leaderboard-list>li{
        grid-template-columns:minmax(0,1fr) 47px;
    }

    .rankings-leaderboard-entry{
        grid-template-columns:29px 41px minmax(0,1fr);
        gap:6px;
        min-height:61px;
        padding-left:8px;
    }

    .rankings-leaderboard-thumb{
        width:41px;
        height:41px;
    }

    .rankings-leaderboard-name{font-size:14px}

    .rankings-leaderboard-record{
        gap:3px;
        padding-left:6px;
        padding-right:6px;
    }

    .rankings-leaderboard-record strong{font-size:13px}

    .rankings-leaderboard-list>li.is-number-one{
        grid-template-columns:minmax(0,1fr) 49px;
    }

    .rankings-leaderboard-list>li.is-number-one .rankings-leaderboard-entry{
        grid-template-columns:32px 54px minmax(0,1fr);
        min-height:74px;
        padding-left:10px;
    }

    .rankings-leaderboard-list>li.is-number-one .rankings-leaderboard-thumb{
        width:54px;
        height:54px;
    }

    .rankings-leaderboard-list>li.is-number-one .rankings-leaderboard-name{
        font-size:18px;
    }
}

/* ================================================================
   Rankings mobile polish V2 — unify contender + stats into one card cell
   Keep the current mobile structure/data exactly where it is, but remove
   the visual split between the identity row and its Fought/Won/Win Rate.
   Desktop is untouched.
   ================================================================ */
@media(max-width:620px){
    .rankings-leaderboard-record{
        border-top:0 !important;
        background:var(--theme-role-surface-171d38) !important;
        padding-top:2px;
        padding-bottom:8px;
    }

    .rankings-leaderboard-list>li:nth-child(even) .rankings-leaderboard-record{
        background:var(--theme-role-surface-171d38) !important;
    }

    .rankings-leaderboard-list>li.is-number-one .rankings-leaderboard-record{
        border-top:0 !important;
        background:var(--theme-role-surface-202744) !important;
    }

    .rankings-leaderboard-record span{
        border:0 !important;
        background:transparent !important;
    }
}


/* Rankings V2.1 — title accent + neutral #1 row */
.rankings-leaderboard-head{
    border-bottom:2px solid var(--theme-role-border-e7ff00);
}

.rankings-leaderboard-list>li.is-number-one,
.rankings-leaderboard-list>li.is-number-one:nth-child(even){
    border-bottom:1px solid var(--theme-role-border-343d60);
    background:var(--theme-role-surface-171d38);
    box-shadow:none;
}

@media(max-width:620px){
    .rankings-leaderboard-list>li.is-number-one{
        border-bottom:1px solid var(--theme-role-border-343d60);
        background:var(--theme-role-surface-171d38);
        box-shadow:none;
    }

    .rankings-leaderboard-list>li.is-number-one .rankings-leaderboard-record{
        background:var(--theme-role-surface-171d38) !important;
    }
}

/* ================================================================
   Rankings V2.3 — desktop category rail arrows
   Mirrors Browse; mobile keeps native swipe scrolling.
   ================================================================ */
.rankings-category-rail-wrap{
    position:relative;
}

.rankings-category-arrow{
    display:none;
}

@media(min-width:721px){
    .rankings-category-rail-wrap{
        padding:0 46px;
    }

    .rankings-category-rail{
        padding-left:0;
        padding-right:0;
    }

    .rankings-category-arrow{
        position:absolute;
        top:14px;
        z-index:12;
        display:flex;
        width:36px;
        height:114px;
        align-items:center;
        justify-content:center;
        padding:0 0 4px;
        border:1px solid var(--theme-role-border-46516d);
        border-radius:8px;
        background:var(--theme-role-surface-11172e);
        color:var(--theme-role-text-e7ff00);
        font-family:Arial,sans-serif;
        font-size:34px;
        line-height:1;
        font-weight:400;
        cursor:pointer;
        box-shadow:0 4px 12px var(--theme-role-shadow-rgba-0-0-0-16-dc0c50);
        transition:border-color .15s ease,background .15s ease,color .15s ease,opacity .15s ease;
    }

    .rankings-category-arrow-left{left:0}
    .rankings-category-arrow-right{right:0}

    .rankings-category-arrow:hover:not(:disabled){
        border-color:var(--theme-role-border-e7ff00);
        background:var(--theme-role-surface-e7ff00);
        color:var(--theme-role-text-080b14);
    }

    .rankings-category-arrow:disabled{
        opacity:.24;
        cursor:default;
    }

    .rankings-category-rail-wrap:not(.has-overflow) .rankings-category-arrow{
        visibility:hidden;
    }
}

@media(max-width:720px){
    .rankings-category-arrow{
        display:none !important;
    }
}



/* Songs category tile — shared vinyl identity */
.rankings-category-tile.is-songs .rankings-category-tile-image {
    display:grid; place-items:center;
    background:radial-gradient(circle at 50% 45%,rgba(231,255,0,.07),transparent 43%),#11172e;
}
.rankings-category-tile.is-songs .rankings-category-tile-image > img { display:none; }
.rankings-category-tile.is-songs .category-vinyl {
    position:relative; z-index:3; display:grid; place-items:center;
    width:64px; height:64px; border:1px solid #6675a6; border-radius:50%;
    background:radial-gradient(circle,#d7e1ff 0 3px,#a8b4da 3px 6px,transparent 6px),
      repeating-radial-gradient(circle,rgba(255,255,255,.08) 0 1px,rgba(255,255,255,0) 1px 5px),
      radial-gradient(circle at 32% 28%,rgba(255,255,255,.18),rgba(255,255,255,0) 28%),
      radial-gradient(circle,#2a355b 0 23%,#121a33 23% 42%,#0a1020 42% 72%,#050913 72% 100%);
    box-shadow:0 7px 16px rgba(0,0,0,.32),inset 0 0 0 1px rgba(255,255,255,.06);
}
.rankings-category-tile.is-songs .category-vinyl b {
    color:#e7ff00; font-family:"Segoe UI Symbol","Segoe UI",Arial,sans-serif;
    font-size:31px; line-height:1; font-weight:900; transform:translateY(-1px);
    text-shadow:0 0 18px rgba(231,255,0,.16);
}

@media(max-width:680px){.rankings-category-tile.is-songs .category-vinyl{width:52px;height:52px} .rankings-category-tile.is-songs .category-vinyl b{font-size:26px}}


/* ================================================================
   Rankings V2.4 — reduced yellow accent on browse controls
   Matches the calmer treatment used on Browse.
   ================================================================ */

/* NEW / HOT / ALL: selected state uses the dark site surface with
   yellow as an outline/text accent instead of a solid yellow fill. */
.rankings-mode-tabs a.active{
    border-color:var(--theme-role-border-e7ff00);
    background:var(--theme-role-surface-171e39);
    color:var(--theme-role-text-e7ff00);
    box-shadow:none;
}

/* Selected category: keep the image card dark and use yellow only
   for the border, title and arrow. */
.rankings-category-tile.active{
    border-color:var(--theme-role-border-e7ff00);
    background:var(--theme-role-surface-151b34);
    box-shadow:0 0 0 1px var(--theme-role-shadow-rgba-231-255-0-18-718b80),0 6px 15px var(--theme-role-shadow-rgba-0-0-0-22-41d185);
}

.rankings-category-tile.active>strong{
    background:var(--theme-role-surface-171e39);
    color:var(--theme-role-text-e7ff00);
}

.rankings-category-tile.active>strong::after{
    color:var(--theme-role-text-e7ff00);
}