*{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 V2 — LEADERBOARDS / DATA-FIRST REDESIGN
   Images become secondary. The live positions are now the main visual.
   ================================================================ */

/* A shallower intro keeps the ranking catalogue above the fold. */
.rankings-hero-inner{
    min-height:205px;
    padding-top:30px;
    padding-bottom:30px;
    gap:28px;
}

.rankings-kicker{
    min-height:26px;
    padding:0 10px;
    font-size:9px;
}

.rankings-hero h1{
    margin:11px 0 8px;
    font-size:clamp(48px,5.4vw,76px);
    line-height:.88;
}

.rankings-hero p{
    max-width:760px;
    font-size:13px;
    line-height:1.45;
}

.rankings-hero-mark{
    font-size:142px;
    opacity:.78;
}

/* Tighten the filter-to-content transition. */
.rankings-trending-block{
    padding-top:22px;
    padding-bottom:0;
}

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

/* The page is now a board catalogue rather than an image-card gallery. */
.rankings-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    align-items:stretch;
}

.ranking-card{
    min-width:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid var(--theme-role-border-465174);
    border-radius:7px;
    background:var(--theme-role-surface-151b35);
    box-shadow:0 6px 16px var(--theme-role-shadow-rgba-0-0-0-14-278e75);
}

.ranking-card:hover{
    border-color:var(--theme-role-border-69749d);
}

.ranking-card-main{
    flex:1 1 auto;
    width:100%;
    min-height:0;
    display:flex;
    flex-direction:column;
    padding:14px;
    color:var(--theme-role-text-fff);
    text-decoration:none;
}

/* Small identity strip: enough imagery to recognise the list,
   but it no longer competes with the positions underneath. */
.ranking-card-head{
    min-width:0;
    display:grid;
    grid-template-columns:68px minmax(0,1fr);
    gap:12px;
    align-items:center;
    padding-bottom:13px;
    border-bottom:1px solid var(--theme-role-border-343d60);
}

.ranking-card-thumb{
    position:relative;
    width:68px;
    height:68px;
    display:block;
    overflow:hidden;
    border:1px solid var(--theme-role-border-414a6e);
    border-radius:4px;
    background:var(--theme-role-surface-11162d);
}

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

.ranking-card:hover .ranking-card-thumb img{
    transform:none;
}

.ranking-card-thumb>b{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--theme-role-text-e7ff00);
    font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
    font-size:22px;
    font-style:italic;
    font-weight:1000;
}

.ranking-card-copy{
    min-width:0;
    display:flex;
    flex-direction:column;
    padding:0;
    background:transparent;
}

.ranking-card-copy>small{
    margin:0 0 4px;
    color:var(--theme-role-text-e7ff00);
    font-size:8px;
    line-height:1;
    font-weight:1000;
    letter-spacing:.07em;
}

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

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

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

/* The live leaderboard is the dominant block. */
.ranking-card-leaders{
    display:grid;
    gap:0;
    margin:11px 0 0;
    border:1px solid var(--theme-role-border-343d60);
    border-radius:4px;
    overflow:hidden;
    background:var(--theme-role-surface-11172e);
}

.ranking-card-leaders>span{
    min-width:0;
    min-height:35px;
    display:grid;
    grid-template-columns:34px minmax(0,1fr);
    gap:0;
    align-items:center;
    color:var(--theme-role-text-d7dbe6);
    font-size:11px;
    line-height:1.05;
    background:transparent;
}

.ranking-card-leaders>span+span{
    border-top:1px solid var(--theme-role-border-303958);
}

.ranking-card-leaders>span>b{
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    border-right:1px solid var(--theme-role-border-303958);
    color:var(--theme-role-text-8f97ae);
    font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
    font-size:13px;
    font-style:italic;
    font-weight:1000;
}

.ranking-card-leaders>span>i{
    min-width:0;
    display:block;
    padding:0 10px;
    overflow:hidden;
    color:inherit;
    font-style:normal;
    font-weight:800;
    white-space:nowrap;
    text-overflow:ellipsis;
}

/* #1 gets hierarchy, not a giant photograph. */
.ranking-card-leaders>span.leader-first{
    min-height:42px;
    background:var(--theme-role-surface-rgba-231-255-0-08-1625d1);
    color:var(--theme-role-text-fff);
}

.ranking-card-leaders>span.leader-first>b{
    color:var(--theme-role-text-101225);
    background:var(--theme-role-surface-e7ff00);
    border-right-color:var(--theme-role-border-e7ff00);
    font-size:16px;
}

.ranking-card-leaders>span.leader-first>i{
    font-size:12px;
    font-weight:1000;
}

/* Footer actions are deliberately secondary to the ranking table. */
.ranking-card-actions{
    flex:0 0 auto;
    width:100%;
    display:grid;
    grid-template-columns:1.35fr .8fr .8fr;
    margin-top:auto;
    border-top:1px solid var(--theme-role-border-3c4566);
    background:var(--theme-role-surface-11172e);
}

.ranking-card-actions a{
    min-height:40px;
    padding:0 8px;
    color:var(--theme-role-text-d8dbe6);
    font-size:8px;
    font-weight:1000;
    letter-spacing:.01em;
}

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

/* Remove the old image-card geometry entirely in this layout. */
.ranking-card-art,
.ranking-card-number{
    display:none!important;
}

/* Song cards keep a tiny hint of identity, but no oversized note. */
.ranking-card.rankings-category-songs .ranking-card-copy::after{
    display:none;
}

@media(max-width:1150px){
    .rankings-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:720px){
    .rankings-hero-inner{
        min-height:178px;
        padding-top:24px;
        padding-bottom:24px;
    }

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

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

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

    .ranking-card-main{
        padding:12px;
    }

    .ranking-card-head{
        grid-template-columns:58px minmax(0,1fr);
        gap:10px;
        padding-bottom:11px;
    }

    .ranking-card-thumb{
        width:58px;
        height:58px;
    }

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

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

    .ranking-card-leaders>span{
        min-height:34px;
        font-size:10.5px;
    }

    .ranking-card-leaders>span.leader-first{
        min-height:40px;
    }

    .ranking-card-actions{
        grid-template-columns:1.3fr .8fr .8fr;
    }

    .ranking-card-actions a{
        min-height:40px;
        padding:0 5px;
        font-size:7.5px;
    }
}

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

    .ranking-card-head{
        grid-template-columns:54px minmax(0,1fr);
    }

    .ranking-card-thumb{
        width:54px;
        height:54px;
    }

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