/* ================================================================
   BattleRanker Homepage — Ranking Cards V2 experiment
   Loaded ONLY by index2.php.
   ================================================================ */

.rank-card-v2{
    min-width:0;
    overflow:hidden;
    border:1px solid var(--theme-role-border-46506c);
    border-radius:12px;
    background:var(--theme-role-surface-11172e);
    box-shadow:0 8px 18px var(--theme-role-shadow-rgba-0-0-0-20-d5b06a);
    transition:transform .16s ease,border-color .16s ease;
}

.rank-card-v2:hover{
    transform:translateY(-2px);
    border-color:var(--theme-role-border-e7ff00);
}

.rank-card-v2-art{
    position:relative;
    display:grid;
    grid-template-columns:1fr 1fr;
    height:176px;
    overflow:hidden;
    border-bottom:1px solid var(--theme-role-border-35405c);
    background:var(--theme-role-surface-0d1228);
    text-decoration:none;
}

.rank-card-v2-side{
    position:relative;
    display:grid;
    place-items:center;
    min-width:0;
    overflow:hidden;
    background:
        radial-gradient(circle at 50% 42%,var(--theme-role-surface-rgba-231-255-0-07-5875df),transparent 42%),
        var(--theme-role-surface-171d35);
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
}

.rank-card-v2-side + .rank-card-v2-side{
    border-left:1px solid var(--theme-role-border-rgba-255-255-255-10-661e9e);
}

.rank-card-v2-side::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,var(--theme-role-surface-rgba-0-0-0-01-b7faf2),var(--theme-role-surface-rgba-0-0-0-16-dc0c50));
}

.rank-card-v2-side b{
    position:relative;
    z-index:2;
    color:var(--theme-role-text-e7ff00);
    font-size:34px;
    font-style:italic;
    font-weight:1000;
}

.rank-card-v2-vs{
    position:absolute;
    z-index:5;
    left:50%;
    top:50%;
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    transform:translate(-50%,-50%) rotate(-5deg);
    border:2px solid var(--theme-role-border-080b14);
    border-radius:50%;
    background:var(--theme-role-surface-e7ff00);
    color:var(--theme-role-text-080b14);
    font-size:10px;
    font-style:italic;
    font-weight:1000;
    box-shadow:0 0 0 3px var(--theme-role-shadow-rgba-13-18-40-78-e296db),0 4px 10px var(--theme-role-shadow-rgba-0-0-0-32-78ad00);
}

.rank-card-v2-heading{
    position:relative;
    min-height:104px;
    padding:14px 16px 13px 18px;
    border-bottom:1px solid var(--theme-role-border-303956);
    background:
        linear-gradient(135deg,var(--theme-role-surface-rgba-231-255-0-04-c0516f),transparent 48%),
        var(--theme-role-surface-151b34);
}

.rank-card-v2-heading::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:4px;
    background:var(--theme-role-surface-e7ff00);
}

.rank-card-v2-heading small{
    display:inline-flex;
    align-items:center;
    min-height:21px;
    margin:0 0 8px;
    padding:0 7px;
    border:1px solid var(--theme-role-border-rgba-231-255-0-42-8febc9);
    border-radius:5px;
    background:var(--theme-role-surface-rgba-231-255-0-07-5875df);
    color:var(--theme-role-text-e7ff00);
    font-size:8px;
    line-height:1;
    font-weight:1000;
    letter-spacing:.45px;
}

.rank-card-v2-heading strong{
    display:block;
    color:var(--theme-role-text-fff);
    font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
    font-size:24px;
    line-height:.91;
    font-style:italic;
    font-weight:1000;
    letter-spacing:-.45px;
}

.rank-card-v2-live{
    display:grid;
    grid-template-columns:minmax(0,1fr) 114px;
    gap:11px;
    min-height:146px;
    padding:12px 13px 13px;
    background:var(--theme-role-surface-10162d);
}

.rank-card-v2-label{
    display:block;
    margin:0 0 5px 3px;
    color:var(--theme-role-text-aeb7ca);
    font-size:9px;
    line-height:1;
    font-weight:1000;
    letter-spacing:.45px;
}

.rank-card-v2-top3 ol{
    list-style:none;
    margin:0;
    padding:0;
}

.rank-card-v2-top3 li{
    display:grid;
    grid-template-columns:20px 34px minmax(0,1fr);
    align-items:center;
    gap:7px;
    min-height:35px;
    padding:3px 5px 3px 2px;
    border-bottom:1px solid var(--theme-role-border-2b3450);
}

.rank-card-v2-top3 li:last-child{
    border-bottom:0;
}

.rank-card-v2-top3 li>b{
    color:var(--theme-role-text-e7ff00);
    font-size:17px;
    line-height:1;
    font-style:italic;
    font-weight:1000;
    text-align:center;
}

.rank-card-v2-thumb{
    display:grid;
    place-items:center;
    width:34px;
    height:30px;
    overflow:hidden;
    border-radius:4px;
    background:var(--theme-role-surface-232b45);
}

.rank-card-v2-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.rank-card-v2-thumb i{
    color:var(--theme-role-text-e7ff00);
    font-size:11px;
    font-style:normal;
    font-weight:1000;
}

.rank-card-v2-top3 li>strong{
    min-width:0;
    overflow:hidden;
    color:var(--theme-role-text-f4f6fb);
    font-size:10px;
    line-height:1.08;
    font-weight:950;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.rank-card-v2-stat{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-width:0;
    padding:9px 7px;
    border:1px solid var(--theme-role-border-3b4666);
    border-radius:9px;
    background:
        radial-gradient(circle at 50% 20%,var(--theme-role-surface-rgba-231-255-0-06-6e76e4),transparent 55%),
        var(--theme-role-surface-141a33);
    text-align:center;
}

.rank-card-v2-stat>span{
    color:var(--theme-role-text-e7ff00);
    font-size:7px;
    line-height:1;
    font-weight:1000;
    letter-spacing:.35px;
}

.rank-card-v2-stat>strong{
    display:block;
    margin:8px 0 1px;
    color:var(--theme-role-text-fff);
    font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
    font-size:40px;
    line-height:.82;
    font-style:italic;
    font-weight:1000;
    letter-spacing:-1px;
}

.rank-card-v2-stat>b{
    color:var(--theme-role-text-d7dceb);
    font-size:10px;
    line-height:1;
    font-weight:1000;
}

.rank-card-v2-stat>small{
    display:block;
    margin-top:5px;
    color:var(--theme-role-text-858fa9);
    font-size:7px;
    line-height:1.1;
    font-weight:850;
}

.rank-card-v2-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    min-height:56px;
    border-top:1px solid var(--theme-role-border-35405c);
    background:var(--theme-role-surface-12182f);
}

.rank-card-v2-actions a{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
    min-height:56px;
    padding:0 12px;
    color:var(--theme-role-text-f4f6fb);
    text-decoration:none;
    font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
    font-size:12px;
    line-height:1;
    font-weight:1000;
    letter-spacing:.05px;
}

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

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

.rank-card-v2-actions .battle span{
    margin-right:4px;
    color:var(--theme-role-text-ff812c);
    font-size:13px;
}

.rank-card-v2-actions .battle:hover{
    color:var(--theme-role-text-e7ff00);
}

@media(max-width:1150px){
    .rank-card-v2-live{
        grid-template-columns:minmax(0,1fr) 102px;
    }

    .rank-card-v2-stat>strong{
        font-size:35px;
    }
}

@media(max-width:760px){
    .rank-card-v2-art{
        height:166px;
    }

    .rank-card-v2-heading{
        min-height:94px;
        padding:13px 14px 12px 16px;
    }

    .rank-card-v2-heading strong{
        font-size:22px;
    }

    .rank-card-v2-live{
        grid-template-columns:minmax(0,1fr) 104px;
        min-height:136px;
        gap:9px;
        padding:10px 11px 11px;
    }

    .rank-card-v2-actions,
    .rank-card-v2-actions a{
        min-height:52px;
    }
}

@media(max-width:390px){
    .rank-card-v2-art{
        height:152px;
    }

    .rank-card-v2-live{
        grid-template-columns:minmax(0,1fr) 94px;
    }

    .rank-card-v2-top3 li{
        grid-template-columns:18px 30px minmax(0,1fr);
        gap:5px;
    }

    .rank-card-v2-thumb{
        width:30px;
        height:27px;
    }

    .rank-card-v2-stat>strong{
        font-size:31px;
    }

    .rank-card-v2-actions a{
        font-size:11px;
        padding:0 8px;
    }
}


/* V2.1 — cleaner Top 3 rows: no mini thumbnails */
.rank-card-v2-top3 li{
    grid-template-columns:20px minmax(0,1fr) !important;
    gap:8px !important;
}

.rank-card-v2-thumb{
    display:none !important;
}

@media(max-width:390px){
    .rank-card-v2-top3 li{
        grid-template-columns:18px minmax(0,1fr) !important;
        gap:6px !important;
    }
}


/* V2.2 — shallower landscape battle image header */
.rank-card-v2-art{
    height:138px !important;
}

@media(max-width:760px){
    .rank-card-v2-art{
        height:132px !important;
    }
}

@media(max-width:390px){
    .rank-card-v2-art{
        height:124px !important;
    }
}


/* V2.3 — diagonal split, tighter live-stat pill, narrower footer buttons */

/* Create a sharp diagonal meeting line between the two contenders. */
.rank-card-v2-art{
    isolation:isolate;
}

.rank-card-v2-side:first-child{
    z-index:2;
    clip-path:polygon(0 0, 100% 0, 88% 100%, 0 100%);
}

.rank-card-v2-side:last-child{
    z-index:1;
    margin-left:-7%;
    padding-left:7%;
    clip-path:polygon(12% 0, 100% 0, 100% 100%, 0 100%);
}

.rank-card-v2-side + .rank-card-v2-side{
    border-left:0 !important;
}

.rank-card-v2-vs{
    left:50%;
}

/* Make the live battle-count block feel like a compact pill rather than a panel. */
.rank-card-v2-live{
    grid-template-columns:minmax(0,1fr) 92px !important;
    align-items:center;
}

.rank-card-v2-stat{
    justify-self:end;
    width:86px;
    min-height:86px;
    padding:7px 5px;
    border-radius:12px;
}

.rank-card-v2-stat>span{
    font-size:6px;
}

.rank-card-v2-stat>strong{
    margin:6px 0 1px;
    font-size:31px;
}

.rank-card-v2-stat>b{
    font-size:8px;
}

.rank-card-v2-stat>small{
    margin-top:3px;
    font-size:6px;
}

/* Keep the two actions centred and deliberately narrower than the card. */
.rank-card-v2-actions{
    grid-template-columns:repeat(2, minmax(0, 138px));
    justify-content:center;
    gap:8px;
    min-height:52px;
    padding:7px 10px;
    border-top:1px solid var(--theme-role-border-35405c);
}

.rank-card-v2-actions a{
    min-height:38px;
    border:1px solid var(--theme-role-border-35405c);
    border-radius:7px;
    background:var(--theme-role-surface-151b35);
}

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

@media(max-width:760px){
    .rank-card-v2-side:first-child{
        clip-path:polygon(0 0, 100% 0, 90% 100%, 0 100%);
    }

    .rank-card-v2-side:last-child{
        margin-left:-6%;
        padding-left:6%;
        clip-path:polygon(10% 0, 100% 0, 100% 100%, 0 100%);
    }

    .rank-card-v2-live{
        grid-template-columns:minmax(0,1fr) 84px !important;
    }

    .rank-card-v2-stat{
        width:78px;
        min-height:80px;
    }

    .rank-card-v2-actions{
        grid-template-columns:repeat(2, minmax(0, 132px));
        gap:7px;
        padding:7px 9px;
    }
}

@media(max-width:390px){
    .rank-card-v2-actions{
        grid-template-columns:repeat(2, minmax(0, 122px));
    }
}


/* V2.4 — cleaner title block; category label removed for later image overlay */
.rank-card-v2-heading{
    display:flex;
    align-items:center;
    min-height:82px;
    padding:13px 16px 13px 18px;
}

.rank-card-v2-heading small{
    display:none !important;
}

.rank-card-v2-heading strong{
    font-family:"Segoe UI",Arial,sans-serif;
    font-size:21px;
    line-height:1.08;
    font-style:normal;
    font-weight:800;
    letter-spacing:-.2px;
}

@media(max-width:760px){
    .rank-card-v2-heading{
        min-height:76px;
        padding:12px 14px 12px 16px;
    }

    .rank-card-v2-heading strong{
        font-size:20px;
        line-height:1.08;
    }
}


/* V2.5 — remove title-row accent bar; add 3 yellow mini accents before Top 3 numbers */
.rank-card-v2-heading::before{
    display:none !important;
}

.rank-card-v2-top3 li{
    grid-template-columns:12px 20px minmax(0,1fr) !important;
    gap:7px !important;
}

.rank-card-v2-top3 li::before{
    content:"";
    display:block;
    width:10px;
    height:8px;
    align-self:center;
    background:
        linear-gradient(
            90deg,
            var(--theme-role-surface-e7ff00) 0 2px,
            transparent 2px 4px,
            var(--theme-role-surface-e7ff00) 4px 6px,
            transparent 6px 8px,
            var(--theme-role-surface-e7ff00) 8px 10px
        );
    border-radius:1px;
    opacity:.98;
}

@media(max-width:390px){
    .rank-card-v2-top3 li{
        grid-template-columns:10px 18px minmax(0,1fr) !important;
        gap:6px !important;
    }

    .rank-card-v2-top3 li::before{
        width:9px;
        height:7px;
        background:
            linear-gradient(
                90deg,
                var(--theme-role-surface-e7ff00) 0 2px,
                transparent 2px 3.5px,
                var(--theme-role-surface-e7ff00) 3.5px 5.5px,
                transparent 5.5px 7px,
                var(--theme-role-surface-e7ff00) 7px 9px
            );
    }
}


/* V2.6 — Top 3 accent changed to one slim bar per row, matching the mock more closely */
.rank-card-v2-top3 li{
    grid-template-columns:8px 22px minmax(0,1fr) !important;
    gap:11px !important;
}

.rank-card-v2-top3 li::before{
    content:"";
    display:block;
    width:4px;
    height:22px;
    align-self:center;
    background:var(--theme-role-surface-e7ff00);
    border-radius:1px;
    opacity:1;
}

@media(max-width:390px){
    .rank-card-v2-top3 li{
        grid-template-columns:7px 20px minmax(0,1fr) !important;
        gap:9px !important;
    }

    .rank-card-v2-top3 li::before{
        width:4px;
        height:20px;
    }
}


/* V2.7 — final cleanup pass to match the mock more closely
   - 2 cards per row on desktop for more horizontal space
   - much shallower image header
   - cleaner TOP 3 block with one single left accent bar
   - crisper title / number / row typography
   - tighter, neater live-ranking pill
*/

@media(min-width:900px){
    .pop-list-grid{
        grid-template-columns:repeat(2, minmax(0,1fr)) !important;
        gap:22px !important;
    }
}

@media(max-width:899px){
    .pop-list-grid{
        grid-template-columns:1fr !important;
    }
}

.rank-card-v2{
    border-radius:14px;
}

.rank-card-v2-art{
    height:112px !important;
}

.rank-card-v2-side:first-child{
    clip-path:polygon(0 0, 100% 0, 89% 100%, 0 100%);
}

.rank-card-v2-side:last-child{
    margin-left:-6%;
    padding-left:6%;
    clip-path:polygon(11% 0, 100% 0, 100% 100%, 0 100%);
}

.rank-card-v2-vs{
    width:42px;
    height:42px;
    font-size:11px;
}

.rank-card-v2-heading{
    min-height:0;
    padding:15px 18px 8px;
    border-bottom:0;
    background:var(--theme-role-surface-121830);
}

.rank-card-v2-heading strong{
    color:var(--theme-role-text-f5f7fb);
    font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
    font-size:19px;
    line-height:1.02;
    font-style:normal;
    font-weight:900;
    letter-spacing:.1px;
}

.rank-card-v2-live{
    grid-template-columns:minmax(0,1fr) 84px !important;
    gap:16px;
    min-height:0;
    padding:0 18px 14px;
    align-items:start;
    background:var(--theme-role-surface-121830);
}

.rank-card-v2-label{
    margin:0 0 10px;
    color:var(--theme-role-text-c6cedd);
    font-size:11px;
    line-height:1;
    font-weight:900;
    letter-spacing:.08em;
}

.rank-card-v2-top3 ol{
    position:relative;
    margin:0;
    padding:0 0 0 16px;
}

.rank-card-v2-top3 ol::before{
    content:"";
    position:absolute;
    left:0;
    top:1px;
    bottom:2px;
    width:4px;
    border-radius:2px;
    background:var(--theme-role-surface-e7ff00);
}

.rank-card-v2-top3 li{
    grid-template-columns:24px minmax(0,1fr) !important;
    gap:14px !important;
    min-height:44px;
    margin:0 0 7px;
    padding:0 12px 0 10px;
    border:0;
    border-radius:2px;
    background:linear-gradient(90deg, var(--theme-role-surface-rgba-255-255-255-045-53fc29), var(--theme-role-surface-rgba-255-255-255-02-d33d85));
}

.rank-card-v2-top3 li:last-child{
    margin-bottom:0;
}

.rank-card-v2-top3 li::before{
    display:none !important;
}

.rank-card-v2-top3 li>b{
    color:var(--theme-role-text-e7ff00);
    font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
    font-size:21px;
    line-height:1;
    font-style:normal;
    font-weight:900;
    text-align:center;
}

.rank-card-v2-top3 li>strong{
    color:var(--theme-role-text-f4f6fb);
    font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
    font-size:18px;
    line-height:1;
    font-weight:900;
    letter-spacing:.1px;
    white-space:nowrap;
}

.rank-card-v2-stat{
    width:84px;
    min-height:78px;
    padding:8px 5px 7px;
    border:1px solid var(--theme-role-border-45506f);
    border-radius:14px;
    background:linear-gradient(180deg, var(--theme-role-surface-rgba-255-255-255-02-d33d85), var(--theme-role-surface-rgba-255-255-255-01-7eb5c1));
}

.rank-card-v2-stat>span{
    font-size:6px;
    letter-spacing:.03em;
}

.rank-card-v2-stat>strong{
    margin:4px 0 0;
    font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
    font-size:29px;
    line-height:.85;
    font-style:italic;
    font-weight:1000;
}

.rank-card-v2-stat>b{
    font-size:8px;
    letter-spacing:.04em;
}

.rank-card-v2-stat>small{
    margin-top:2px;
    font-size:6px;
}

.rank-card-v2-actions{
    grid-template-columns:repeat(2, minmax(0, 122px));
    justify-content:flex-start;
    gap:10px;
    min-height:0;
    padding:8px 18px 16px;
    border-top:0;
    background:var(--theme-role-surface-121830);
}

.rank-card-v2-actions a{
    min-height:35px;
    padding:0 10px;
    border:1px solid var(--theme-role-border-35405c);
    border-radius:7px;
    background:var(--theme-role-surface-151b35);
    font-size:11px;
    font-weight:900;
}

.rank-card-v2-actions .battle span{
    margin-right:4px;
    font-size:12px;
}

@media(max-width:760px){
    .rank-card-v2-art{
        height:106px !important;
    }

    .rank-card-v2-heading{
        padding:14px 16px 8px;
    }

    .rank-card-v2-heading strong{
        font-size:18px;
    }

    .rank-card-v2-live{
        grid-template-columns:minmax(0,1fr) 78px !important;
        gap:12px;
        padding:0 16px 13px;
    }

    .rank-card-v2-label{
        font-size:10px;
    }

    .rank-card-v2-top3 ol{
        padding-left:14px;
    }

    .rank-card-v2-top3 li{
        grid-template-columns:22px minmax(0,1fr) !important;
        gap:12px !important;
        min-height:40px;
        padding:0 10px 0 9px;
    }

    .rank-card-v2-top3 li>b{
        font-size:19px;
    }

    .rank-card-v2-top3 li>strong{
        font-size:16px;
    }

    .rank-card-v2-stat{
        width:78px;
        min-height:72px;
    }

    .rank-card-v2-stat>strong{
        font-size:27px;
    }

    .rank-card-v2-actions{
        grid-template-columns:repeat(2, minmax(0, 116px));
        gap:8px;
        padding:7px 16px 14px;
    }
}

@media(max-width:390px){
    .rank-card-v2-art{
        height:98px !important;
    }

    .rank-card-v2-live{
        grid-template-columns:minmax(0,1fr) 74px !important;
        gap:10px;
        padding:0 14px 12px;
    }

    .rank-card-v2-top3 li{
        grid-template-columns:20px minmax(0,1fr) !important;
        gap:10px !important;
        min-height:37px;
    }

    .rank-card-v2-top3 li>b{
        font-size:17px;
    }

    .rank-card-v2-top3 li>strong{
        font-size:14px;
    }

    .rank-card-v2-actions{
        grid-template-columns:repeat(2, minmax(0, 108px));
        padding:7px 14px 14px;
    }
}


/* V3 — fresh card direction
   Cleaner editorial card: image battle first, ranking identity second,
   live Top 3 as the proof, with battle count reduced to a tiny status chip.
*/

@media(min-width:900px){
    .pop-list-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:20px !important;
    }
}

.rank-card-v2{
    overflow:hidden;
    border:1px solid var(--theme-role-border-414b68);
    border-radius:14px;
    background:var(--theme-role-surface-11172d);
    box-shadow:0 8px 20px var(--theme-role-shadow-rgba-0-0-0-20-d5b06a);
}

.rank-card-v2:hover{
    transform:translateY(-2px);
    border-color:var(--theme-role-border-6e7897);
    box-shadow:0 11px 24px var(--theme-role-shadow-rgba-0-0-0-26-5f9bcc);
}

/* Give the battle images enough room to feel exciting again. */
.rank-card-v2-art{
    height:150px !important;
    border-bottom:0;
}

.rank-card-v2-side:first-child{
    clip-path:polygon(0 0,100% 0,91% 100%,0 100%);
}

.rank-card-v2-side:last-child{
    margin-left:-5%;
    padding-left:5%;
    clip-path:polygon(9% 0,100% 0,100% 100%,0 100%);
}

.rank-card-v2-vs{
    width:38px;
    height:38px;
    font-size:10px;
    box-shadow:0 0 0 3px var(--theme-role-shadow-rgba-10-14-28-86-6f82ed),0 4px 10px var(--theme-role-shadow-rgba-0-0-0-32-78ad00);
}

/* Category belongs on the visual, not in the copy block. */
.rank-card-v2-category{
    position:absolute;
    z-index:8;
    left:12px;
    bottom:10px;
    display:inline-flex;
    align-items:center;
    min-height:22px;
    padding:0 8px;
    border:1px solid var(--theme-role-border-rgba-231-255-0-62-1f4efd);
    border-radius:5px;
    background:var(--theme-role-surface-rgba-9-13-25-88-c67d03);
    color:var(--theme-role-text-e7ff00);
    font-size:8px;
    line-height:1;
    font-weight:1000;
    letter-spacing:.5px;
    box-shadow:0 2px 7px var(--theme-role-shadow-rgba-0-0-0-25-a59544);
}

/* Ranking identity: simple, crisp, easy to scan. */
.rank-card-v2-heading{
    display:block;
    min-height:0;
    padding:15px 16px 13px;
    border-bottom:1px solid var(--theme-role-border-303956);
    background:var(--theme-role-surface-151b34);
}

.rank-card-v2-heading strong{
    display:block;
    color:var(--theme-role-text-f7f8fb);
    font-family:"Segoe UI",Arial,sans-serif;
    font-size:21px;
    line-height:1.06;
    font-style:normal;
    font-weight:750;
    letter-spacing:-.2px;
}

.rank-card-v2-heading>span{
    display:block;
    margin-top:7px;
    color:var(--theme-role-text-8e98b0);
    font-size:9px;
    line-height:1;
    font-weight:900;
    letter-spacing:.45px;
}

/* Live proof: one clean block, no dashboard panel. */
.rank-card-v2-live{
    display:block;
    min-height:0;
    padding:12px 16px 14px;
    background:var(--theme-role-surface-10162c);
}

.rank-card-v2-live-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:8px;
}

.rank-card-v2-label{
    margin:0;
    color:var(--theme-role-text-b9c1d1);
    font-family:"Segoe UI",Arial,sans-serif;
    font-size:10px;
    line-height:1;
    font-weight:800;
    letter-spacing:.45px;
}

.rank-card-v2-battle-chip{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    gap:4px;
    min-height:24px;
    padding:0 8px;
    border:1px solid var(--theme-role-border-3a4564);
    border-radius:999px;
    background:var(--theme-role-surface-151c36);
    color:var(--theme-role-text-8f99b1);
    font-size:8px;
    line-height:1;
    font-weight:900;
    letter-spacing:.25px;
}

.rank-card-v2-battle-chip b{
    color:var(--theme-role-text-e7ff00);
    font-size:10px;
    font-weight:1000;
}

.rank-card-v2-top3 ol{
    position:relative;
    margin:0;
    padding:0;
}

.rank-card-v2-top3 ol::before{
    display:none !important;
}

.rank-card-v2-top3 li{
    position:relative;
    display:grid;
    grid-template-columns:28px minmax(0,1fr) !important;
    align-items:center;
    gap:10px !important;
    min-height:37px;
    margin:0;
    padding:0 8px 0 10px;
    border:0;
    border-bottom:1px solid var(--theme-role-border-2b344e);
    border-radius:0;
    background:transparent;
}

.rank-card-v2-top3 li:last-child{
    border-bottom:0;
}

.rank-card-v2-top3 li::before{
    content:"" !important;
    display:block !important;
    position:absolute;
    left:0;
    top:50%;
    width:3px;
    height:20px;
    transform:translateY(-50%);
    border-radius:2px;
    background:var(--theme-role-surface-e7ff00);
}

.rank-card-v2-top3 li>b{
    color:var(--theme-role-text-e7ff00);
    font-family:"Segoe UI",Arial,sans-serif;
    font-size:16px;
    line-height:1;
    font-style:normal;
    font-weight:900;
    text-align:center;
}

.rank-card-v2-top3 li>strong{
    min-width:0;
    overflow:hidden;
    color:var(--theme-role-text-f0f2f8);
    font-family:"Segoe UI",Arial,sans-serif;
    font-size:13px;
    line-height:1;
    font-weight:700;
    letter-spacing:0;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* Retire the old standalone stat panel entirely. */
.rank-card-v2-stat{
    display:none !important;
}

/* Footer should feel like part of the card again, not floating pills. */
.rank-card-v2-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    justify-content:stretch;
    gap:0;
    min-height:48px;
    padding:0;
    border-top:1px solid var(--theme-role-border-35405c);
    background:var(--theme-role-surface-12182f);
}

.rank-card-v2-actions a{
    min-height:48px;
    padding:0 12px;
    border:0;
    border-radius:0;
    background:var(--theme-role-surface-151b35);
    font-family:"Segoe UI",Arial,sans-serif;
    font-size:10px;
    font-weight:850;
    letter-spacing:.15px;
}

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

.rank-card-v2-actions .battle{
    background:var(--theme-role-surface-181f39);
}

.rank-card-v2-actions .battle span{
    margin-right:4px;
    color:var(--theme-role-text-ff812c);
    font-size:12px;
}

@media(max-width:899px){
    .pop-list-grid{
        grid-template-columns:1fr !important;
    }

    .rank-card-v2-art{
        height:146px !important;
    }
}

@media(max-width:520px){
    .rank-card-v2-art{
        height:136px !important;
    }

    .rank-card-v2-heading{
        padding:14px 14px 12px;
    }

    .rank-card-v2-heading strong{
        font-size:19px;
    }

    .rank-card-v2-live{
        padding:11px 14px 13px;
    }

    .rank-card-v2-live-head{
        margin-bottom:7px;
    }

    .rank-card-v2-top3 li{
        min-height:36px;
    }

    .rank-card-v2-top3 li>strong{
        font-size:12px;
    }
}


/* V3.1 — back to 3 cards per row, with tighter/crisper Top 3 rows */
@media(min-width:1100px){
    .pop-list-grid{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:16px !important;
    }
}

@media(min-width:900px) and (max-width:1099px){
    .pop-list-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:18px !important;
    }
}

.rank-card-v2-live{
    padding:10px 14px 12px;
}

.rank-card-v2-live-head{
    margin-bottom:6px;
    gap:8px;
}

.rank-card-v2-label{
    font-size:9px;
    letter-spacing:.4px;
}

.rank-card-v2-battle-chip{
    min-height:22px;
    padding:0 7px;
    font-size:7px;
}

.rank-card-v2-battle-chip b{
    font-size:9px;
}

.rank-card-v2-top3 li{
    grid-template-columns:22px minmax(0,1fr) !important;
    gap:8px !important;
    min-height:31px;
    padding:0 4px 0 9px;
}

.rank-card-v2-top3 li::before{
    width:3px;
    height:16px;
}

.rank-card-v2-top3 li>b{
    font-size:14px;
}

.rank-card-v2-top3 li>strong{
    font-size:12px;
    font-weight:750;
}

.rank-card-v2-heading{
    padding:14px 14px 12px;
}

.rank-card-v2-heading strong{
    font-size:20px;
}

.rank-card-v2-heading>span{
    margin-top:6px;
    font-size:8px;
}

@media(max-width:520px){
    .rank-card-v2-live{
        padding:10px 12px 12px;
    }

    .rank-card-v2-top3 li{
        min-height:30px;
        padding:0 2px 0 8px;
    }

    .rank-card-v2-top3 li>b{
        font-size:13px;
    }

    .rank-card-v2-top3 li>strong{
        font-size:11px;
    }
}


/* V3.2 — close up the image split gap and add a yellow divider */
.rank-card-v2-art{
    position:relative;
}

.rank-card-v2-side:first-child{
    clip-path:polygon(0 0,100% 0,94% 100%,0 100%) !important;
}

.rank-card-v2-side:last-child{
    margin-left:-2.2% !important;
    padding-left:2.2% !important;
    clip-path:polygon(6% 0,100% 0,100% 100%,0 100%) !important;
}

.rank-card-v2-art::after{
    content:"";
    position:absolute;
    left:50%;
    top:0;
    bottom:0;
    width:4px;
    transform:translateX(-50%) skewX(-7deg);
    background:var(--theme-role-surface-e7ff00);
    box-shadow:0 0 0 1px var(--theme-role-shadow-rgba-7-10-19-72-7f1963), 0 0 10px var(--theme-role-shadow-rgba-231-255-0-14-5672f3);
    z-index:4;
    pointer-events:none;
}

.rank-card-v2-vs{
    z-index:6;
}

@media(max-width:520px){
    .rank-card-v2-side:first-child{
        clip-path:polygon(0 0,100% 0,93% 100%,0 100%) !important;
    }

    .rank-card-v2-side:last-child{
        margin-left:-2.5% !important;
        padding-left:2.5% !important;
        clip-path:polygon(7% 0,100% 0,100% 100%,0 100%) !important;
    }

    .rank-card-v2-art::after{
        width:3px;
    }
}


/* V3.3 — tighten the image join so there is no visible gap,
   keep the VS centred, and switch to a crisper thin dark divider. */
.rank-card-v2-art{
    background:var(--theme-role-surface-0a0f22);
}

.rank-card-v2-side:first-child{
    clip-path:polygon(0 0,100% 0,96.5% 100%,0 100%) !important;
    z-index:2;
}

.rank-card-v2-side:last-child{
    margin-left:-3.6% !important;
    padding-left:0 !important;
    clip-path:polygon(3.5% 0,100% 0,100% 100%,0 100%) !important;
    z-index:1;
}

.rank-card-v2-art::after{
    content:"";
    position:absolute;
    left:50%;
    top:-1px;
    bottom:-1px;
    width:2px;
    transform:translateX(-50%) skewX(-7deg);
    background:var(--theme-role-surface-080b14);
    box-shadow:none;
    z-index:5;
    pointer-events:none;
}

.rank-card-v2-vs{
    left:50%;
    z-index:6;
}

@media(max-width:520px){
    .rank-card-v2-side:first-child{
        clip-path:polygon(0 0,100% 0,96% 100%,0 100%) !important;
    }

    .rank-card-v2-side:last-child{
        margin-left:-4% !important;
        clip-path:polygon(4% 0,100% 0,100% 100%,0 100%) !important;
    }

    .rank-card-v2-art::after{
        width:2px;
    }
}


/* V3.4 — REBUILT image join.
   Do not make two clipped halves try to meet.
   Instead, the right image sits underneath and the left image overlaps it.
   This guarantees there can never be a gap at the diagonal seam. */

.rank-card-v2-art{
    display:block !important;
    position:relative;
    overflow:hidden;
    background:var(--theme-role-surface-0a0f22);
    isolation:isolate;
}

.rank-card-v2-side{
    position:absolute !important;
    top:0;
    bottom:0;
    width:54% !important;
    height:100% !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    background-size:cover !important;
    background-repeat:no-repeat !important;
}

.rank-card-v2-side:first-child{
    left:0;
    right:auto;
    z-index:3;
    clip-path:polygon(0 0,100% 0,91% 100%,0 100%) !important;
    background-position:center center !important;
}

.rank-card-v2-side:last-of-type{
    right:0;
    left:auto;
    z-index:1;
    clip-path:none !important;
    background-position:center center !important;
}

/* Remove all legacy half-divider/border behaviour. */
.rank-card-v2-side + .rank-card-v2-side{
    border-left:0 !important;
}

.rank-card-v2-side::before,
.rank-card-v2-side::after{
    pointer-events:none;
}

/* One narrow dark seam laid over the overlap.
   Angle mirrors the actual clipped edge above. */
.rank-card-v2-art::after{
    content:"";
    position:absolute;
    z-index:5;
    left:50.7%;
    top:-8%;
    width:2px;
    height:116%;
    background:var(--theme-role-surface-080b14);
    box-shadow:0 0 0 1px var(--theme-role-shadow-rgba-255-255-255-025-40fa64);
    transform:rotate(5.8deg);
    transform-origin:center center;
    pointer-events:none;
}

/* Keep the VS exactly over the true visual join. */
.rank-card-v2-vs{
    left:50.7% !important;
    top:50% !important;
    z-index:7 !important;
}

.rank-card-v2-category{
    z-index:8;
}

/* Make sure older mobile clip overrides cannot reopen the seam. */
@media(max-width:520px){
    .rank-card-v2-side{
        width:54.5% !important;
        margin:0 !important;
        padding:0 !important;
    }

    .rank-card-v2-side:first-child{
        left:0;
        clip-path:polygon(0 0,100% 0,91% 100%,0 100%) !important;
    }

    .rank-card-v2-side:last-of-type{
        right:0;
        clip-path:none !important;
    }

    .rank-card-v2-art::after{
        left:50.8%;
        width:2px;
        transform:rotate(5.8deg);
    }

    .rank-card-v2-vs{
        left:50.8% !important;
    }
}


/* V3.5 — fix right-hand image targeting.
   The previous :last-of-type selector accidentally targeted the category
   label because it is also a <span>. Target the actual image side directly. */

.rank-card-v2-art > .rank-card-v2-vs + .rank-card-v2-side{
    position:absolute !important;
    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    left:auto !important;
    width:54% !important;
    height:100% !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    z-index:1 !important;
    clip-path:none !important;
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
}

/* Left image overlaps the right image, so the diagonal can never open a gap. */
.rank-card-v2-art > .rank-card-v2-side:first-child{
    position:absolute !important;
    top:0 !important;
    bottom:0 !important;
    left:0 !important;
    right:auto !important;
    width:54% !important;
    height:100% !important;
    margin:0 !important;
    padding:0 !important;
    z-index:3 !important;
    clip-path:polygon(0 0,100% 0,91% 100%,0 100%) !important;
}

/* Keep the seam/VS tied to the same centre point. */
.rank-card-v2-art::after{
    left:50.7% !important;
}

.rank-card-v2-vs{
    left:50.7% !important;
}

@media(max-width:520px){
    .rank-card-v2-art > .rank-card-v2-vs + .rank-card-v2-side{
        width:54.5% !important;
    }

    .rank-card-v2-art > .rank-card-v2-side:first-child{
        width:54.5% !important;
    }

    .rank-card-v2-art::after,
    .rank-card-v2-vs{
        left:50.8% !important;
    }
}


/* V3.6 — wording polish, thinner Top 3 accents, full-width bottom yellow accent */

/* Slightly finer Top 3 markers. */
.rank-card-v2-top3 li::before{
    width:2px !important;
    height:16px !important;
}

/* Thin electric underline across the full bottom edge of every card. */
.rank-card-v2{
    position:relative;
    border-bottom-color:var(--theme-role-border-e7ff00);
}

.rank-card-v2::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:12;
    height:3px;
    background:var(--theme-role-surface-e7ff00);
    pointer-events:none;
}

/* Give the footer a touch of clearance above the underline. */
.rank-card-v2-actions{
    padding-bottom:3px;
}


/* V3.7 — final polish pass
   - tighter title block
   - slightly more prominent Top 3 names
   - smaller battles chip
   - subtler full-width bottom accent
   - minor seam / VS nudge
*/

.rank-card-v2-heading{
    padding:12px 16px 10px !important;
}

.rank-card-v2-heading strong{
    font-size:20px !important;
    line-height:1.02 !important;
    font-weight:780 !important;
}

.rank-card-v2-heading > span{
    margin-top:5px !important;
    font-size:8px !important;
    letter-spacing:.4px !important;
}

.rank-card-v2-live{
    padding:10px 16px 12px !important;
}

.rank-card-v2-live-head{
    margin-bottom:6px !important;
    gap:8px !important;
}

.rank-card-v2-label{
    font-size:9px !important;
    letter-spacing:.42px !important;
}

.rank-card-v2-battle-chip{
    min-height:20px !important;
    padding:0 6px !important;
    font-size:7px !important;
    letter-spacing:.18px !important;
}

.rank-card-v2-battle-chip b{
    font-size:8px !important;
}

.rank-card-v2-top3 li{
    grid-template-columns:24px minmax(0,1fr) !important;
    gap:8px !important;
    min-height:31px !important;
    padding:0 4px 0 9px !important;
}

.rank-card-v2-top3 li::before{
    width:2px !important;
    height:14px !important;
}

.rank-card-v2-top3 li > b{
    font-size:14px !important;
    font-weight:950 !important;
}

.rank-card-v2-top3 li > strong{
    font-size:12px !important;
    line-height:1 !important;
    font-weight:800 !important;
    color:var(--theme-role-text-f7f9fc) !important;
}

/* Minor seam refinement */
.rank-card-v2-art::after,
.rank-card-v2-vs{
    left:50.55% !important;
}

/* Softer bottom underline */
.rank-card-v2::after{
    height:2px !important;
}

.rank-card-v2-actions{
    padding-bottom:2px !important;
}

@media(max-width:520px){
    .rank-card-v2-heading{
        padding:11px 14px 9px !important;
    }

    .rank-card-v2-heading strong{
        font-size:18px !important;
    }

    .rank-card-v2-live{
        padding:9px 14px 11px !important;
    }

    .rank-card-v2-top3 li{
        min-height:29px !important;
        padding:0 2px 0 8px !important;
    }

    .rank-card-v2-top3 li > strong{
        font-size:11px !important;
    }

    .rank-card-v2-art::after,
    .rank-card-v2-vs{
        left:50.65% !important;
    }
}


/* V3.8 — align the dark seam precisely to the left image's clipped edge.
   The left image runs from 54% at the top to 49.14% at the bottom,
   so the divider must share that same midpoint and angle. */
.rank-card-v2-art::after{
    left:51.57% !important;
    transform:rotate(7.2deg) !important;
}

.rank-card-v2-vs{
    left:51.57% !important;
}

@media(max-width:520px){
    .rank-card-v2-art::after{
        left:51.6% !important;
        transform:rotate(7.2deg) !important;
    }

    .rank-card-v2-vs{
        left:51.6% !important;
    }
}

/* ================================================================
   BattleRanker Homepage Ranking Cards V3.9 — larger card copy
   Visual-only polish: stronger ranking title and action labels.
   ================================================================ */

.rank-card-v2-heading strong{
    font-size:23px !important;
    line-height:1.04 !important;
    font-weight:850 !important;
}

.rank-card-v2-actions a{
    font-size:13px !important;
    font-weight:950 !important;
    letter-spacing:.1px !important;
}

.rank-card-v2-actions .battle span{
    font-size:14px !important;
}

@media(max-width:760px){
    .rank-card-v2-heading strong{
        font-size:21px !important;
    }

    .rank-card-v2-actions a{
        font-size:12px !important;
    }
}

@media(max-width:390px){
    .rank-card-v2-heading strong{
        font-size:20px !important;
    }
}

/* ================================================================
   BattleRanker Homepage Ranking Cards V4.0 — shared nav icon language
   Use the same lime/yellow visual language as BATTLE / RANKINGS
   in the main header.
   ================================================================ */

.rank-card-v2-actions a{
    gap:7px;
}

.rank-card-action-icon{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:var(--theme-role-text-e7ff00);
}

.rank-card-action-icon svg{
    display:block;
    width:100%;
    height:100%;
    overflow:visible;
}

.rank-card-action-icon-ranking{
    width:18px;
    height:18px;
}

.rank-card-action-icon-ranking rect{
    fill:currentColor;
}

.rank-card-action-icon-battle{
    width:14px;
    height:18px;
}

.rank-card-action-icon-battle path{
    fill:currentColor;
}

/* Override the old orange lightning treatment. */
.rank-card-v2-actions .battle > span{
    margin-right:0 !important;
    color:var(--theme-role-text-e7ff00) !important;
    font-size:inherit !important;
}

@media(max-width:760px){
    .rank-card-action-icon-ranking{
        width:17px;
        height:17px;
    }

    .rank-card-action-icon-battle{
        width:13px;
        height:17px;
    }
}



/* ================================================================
   BattleRanker Homepage Ranking Cards V4.1 — readable category meta
   Category gets the accent; item count remains secondary.
   ================================================================ */
.rank-card-v2-heading > .rank-card-v2-meta{
    display:flex !important;
    align-items:center !important;
    flex-wrap:wrap !important;
    gap:6px !important;
    margin-top:9px !important;
    font-family:"Arial Narrow","Segoe UI",Arial,sans-serif !important;
    font-size:10px !important;
    line-height:1.1 !important;
    font-weight:850 !important;
    letter-spacing:.42px !important;
    text-transform:uppercase !important;
}

.rank-card-v2-heading > .rank-card-v2-meta b{
    color:var(--theme-role-text-e7ff00) !important;
    font:inherit !important;
    font-weight:900 !important;
}

.rank-card-v2-heading > .rank-card-v2-meta i{
    color:var(--theme-role-text-79849f) !important;
    font:inherit !important;
    font-style:normal !important;
}

.rank-card-v2-heading > .rank-card-v2-meta em{
    color:var(--theme-role-text-aab2c5) !important;
    font:inherit !important;
    font-style:normal !important;
    font-weight:850 !important;
}

@media(max-width:760px){
    .rank-card-v2-heading > .rank-card-v2-meta{
        margin-top:7px !important;
        font-size:9px !important;
        gap:5px !important;
    }
}

/* ================================================================
   BattleRanker Homepage Cards V4.2 — Songs vinyl fallback
   Song rankings use intentional record artwork instead of initial letters.
   Real uploaded song imagery still wins when present.
   ================================================================ */
.rank-card-v2.is-song-ranking .rank-card-v2-side:not(.has-image){
    background:
        radial-gradient(circle at 50% 45%,var(--theme-role-surface-rgba-231-255-0-045-5d766f),transparent 48%),
        var(--theme-role-surface-12182f) !important;
}

.rank-card-v2.is-song-ranking .rank-card-v2-side:not(.has-image)::after{
    background:linear-gradient(180deg,var(--theme-role-surface-rgba-0-0-0-01-b7faf2),var(--theme-role-surface-rgba-0-0-0-12-a6f872)) !important;
}

.rank-card-v2.is-song-ranking .rank-card-v2-side:not(.has-image) b{
    position:relative;
    z-index:3;
    display:grid;
    place-items:center;
    width:92px;
    height:92px;
    border:1px solid var(--theme-role-border-60709d);
    border-radius:50%;
    background:
        radial-gradient(circle at 50% 50%,var(--theme-role-surface-dce5ff) 0 4px,var(--theme-role-surface-a9b7df) 4px 7px,transparent 7px),
        repeating-radial-gradient(circle at 50% 50%,var(--theme-role-surface-rgba-255-255-255-075-d6fe16) 0 1px,transparent 1px 5px),
        radial-gradient(circle at 34% 28%,var(--theme-role-surface-rgba-255-255-255-14-e65a35),transparent 28%),
        radial-gradient(circle at 50% 50%,var(--theme-role-surface-52618e) 0 20%,var(--theme-role-surface-202a4b) 20% 38%,var(--theme-role-surface-10172d) 38% 70%,var(--theme-role-surface-070b17) 70% 100%);
    color:var(--theme-role-text-e7ff00);
    font-family:"Segoe UI Symbol","Arial Unicode MS",sans-serif;
    font-size:48px;
    line-height:1;
    font-style:normal;
    font-weight:900;
    text-shadow:0 0 16px var(--theme-role-shadow-rgba-231-255-0-16-856f02);
    box-shadow:0 8px 18px var(--theme-role-shadow-rgba-0-0-0-30-6d79cf),inset 0 0 0 1px var(--theme-role-shadow-rgba-255-255-255-05-44501a);
}

.rank-card-v2.is-song-ranking .rank-card-v2-side:not(.has-image) b::before{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:28px;
    height:28px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:radial-gradient(circle,var(--theme-role-surface-eff3ff) 0 2px,var(--theme-role-surface-c6d1ee) 2px 5px,var(--theme-role-surface-60709d) 5px 100%);
    box-shadow:0 0 0 1px var(--theme-role-shadow-rgba-255-255-255-10-661e9e);
    z-index:-1;
}

.rank-card-v2.is-song-ranking .rank-card-v2-heading > .rank-card-v2-meta em{
    color:var(--theme-role-text-c7cfdf) !important;
}

@media(max-width:520px){
    .rank-card-v2.is-song-ranking .rank-card-v2-side:not(.has-image) b{
        width:78px;
        height:78px;
        font-size:41px;
    }

    .rank-card-v2.is-song-ranking .rank-card-v2-side:not(.has-image) b::before{
        width:24px;
        height:24px;
    }
}


/* ================================================================
   Homepage V5 — battle-first cards + simple product loop
   Hero is intentionally untouched.
   ================================================================ */

.home-how-it-works{
    padding:18px 0;
    border-bottom:1px solid var(--theme-role-border-252d49);
    background:var(--theme-role-surface-0b1023);
    color:var(--theme-role-text-fff);
}

.home-how-strip{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;
    gap:16px;
    padding:14px 18px;
    border:1px solid var(--theme-role-border-36405c);
    border-radius:12px;
    background:
        linear-gradient(110deg,var(--theme-role-surface-rgba-231-255-0-045-5d766f),transparent 34%),
        var(--theme-role-surface-11172e);
}

.home-how-step{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}

.home-how-number{
    flex:0 0 34px;
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    border-radius:9px;
    background:var(--theme-role-surface-e7ff00);
    color:var(--theme-role-text-080b14);
    font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
    font-size:18px;
    font-style:italic;
    font-weight:1000;
    box-shadow:3px 3px 0 var(--theme-role-shadow-05070d);
}

.home-how-copy{
    display:flex;
    flex-direction:column;
    min-width:0;
    gap:3px;
}

.home-how-copy strong{
    color:var(--theme-role-text-fff);
    font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
    font-size:17px;
    line-height:1;
    font-style:italic;
    font-weight:1000;
    letter-spacing:-.2px;
}

.home-how-copy small{
    color:var(--theme-role-text-97a1b8);
    font-size:9px;
    line-height:1.2;
    font-weight:800;
}

.home-how-arrow{
    color:var(--theme-role-text-e7ff00);
    font-size:22px;
    font-weight:1000;
}

/* The Battle List itself now advertises the product with a matchup,
   rather than looking like a generic single-cover content card. */
.home-rankings-grid .home-battle-card-art{
    position:relative;
    display:block !important;
    min-height:170px;
    height:170px;
    overflow:hidden;
    isolation:isolate;
    background:var(--theme-role-surface-0a0f22);
}

.home-battle-card-side{
    position:absolute;
    top:0;
    bottom:0;
    width:54%;
    overflow:hidden;
    display:flex;
    align-items:flex-end;
    background:var(--theme-role-surface-151b35);
}

.home-battle-card-left{
    left:0;
    z-index:3;
    clip-path:polygon(0 0,100% 0,91% 100%,0 100%);
}

.home-battle-card-right{
    right:0;
    z-index:1;
}

.home-battle-card-side img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .18s ease;
}

.ranking-card:hover .home-battle-card-side img{
    transform:scale(1.025);
}

.home-battle-card-side::after{
    content:"";
    position:absolute;
    inset:38% 0 0;
    z-index:2;
    background:linear-gradient(transparent,var(--theme-role-surface-rgba-4-7-14-82-3d7016));
    pointer-events:none;
}

.home-battle-card-side em{
    position:relative;
    z-index:4;
    display:block;
    width:100%;
    padding:10px 11px;
    overflow:hidden;
    color:var(--theme-role-text-fff);
    font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
    font-size:11px;
    line-height:1;
    font-style:italic;
    font-weight:1000;
    text-overflow:ellipsis;
    text-shadow:1px 2px 3px var(--theme-role-shadow-000);
    text-transform:uppercase;
    white-space:nowrap;
}

.home-battle-card-right em{
    text-align:right;
}

.home-battle-card-side > b{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    color:var(--theme-role-text-e7ff00);
    font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
    font-size:42px;
    font-style:italic;
    font-weight:1000;
}

.home-battle-card-art::after{
    content:"";
    position:absolute;
    left:51.57%;
    top:-8%;
    z-index:5;
    width:2px;
    height:116%;
    background:var(--theme-role-surface-080b14);
    transform:rotate(7.2deg);
    transform-origin:center;
    pointer-events:none;
}

.home-battle-card-vs{
    position:absolute;
    left:51.57%;
    top:50%;
    z-index:7;
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    transform:translate(-50%,-50%) rotate(-6deg);
    border:2px solid var(--theme-role-border-080b14);
    border-radius:50%;
    background:var(--theme-role-surface-e7ff00);
    color:var(--theme-role-text-080b14);
    font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
    font-size:11px;
    font-style:italic;
    font-weight:1000;
    box-shadow:0 0 0 3px var(--theme-role-shadow-rgba-13-18-40-82-17516d),0 4px 10px var(--theme-role-shadow-rgba-0-0-0-34-c366e4);
}

.home-battle-card-art .ranking-card-number{
    z-index:9;
}

/* Card body stays familiar, but the artwork is now the star. */
.home-rankings-grid .ranking-card-main{
    min-height:0 !important;
}

.home-rankings-grid .ranking-card-copy{
    min-height:182px;
}

@media(max-width:760px){
    .home-how-it-works{
        padding:13px 0;
    }

    .home-how-strip{
        grid-template-columns:1fr;
        gap:8px;
        padding:12px 14px;
    }

    .home-how-step{
        gap:10px;
    }

    .home-how-number{
        flex-basis:30px;
        width:30px;
        height:30px;
        font-size:16px;
    }

    .home-how-copy strong{
        font-size:15px;
    }

    .home-how-copy small{
        font-size:9px;
    }

    .home-how-arrow{
        display:none;
    }

    .home-rankings-grid .home-battle-card-art{
        min-height:158px;
        height:158px;
    }

    .home-battle-card-vs{
        width:36px;
        height:36px;
        font-size:10px;
    }

    .home-battle-card-side em{
        font-size:10px;
    }

    .home-rankings-grid .ranking-card-copy{
        min-height:0;
    }
}

/* ================================================================
   Homepage Battle Lists V4.3 — FULL-WIDTH MATCHUP HEADER
   The matchup owns the complete top of the card. Copy/details sit
   underneath, returning to the earlier BattleRanker card silhouette.
   ================================================================ */
.home-rankings-grid .ranking-card-main{
    display:block !important;
    grid-template-columns:none !important;
    width:100% !important;
    min-height:0 !important;
}

.home-rankings-grid .ranking-card-main > .home-battle-card-art{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    min-width:100% !important;
    height:184px !important;
    min-height:184px !important;
}

.home-rankings-grid .ranking-card-main > .ranking-card-copy{
    display:flex !important;
    width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    box-sizing:border-box !important;
}

/* Let each contender use a generous half of the full card header. */
.home-rankings-grid .home-battle-card-side{
    width:54% !important;
}

@media(max-width:1050px){
    .home-rankings-grid .ranking-card-main > .home-battle-card-art{
        height:178px !important;
        min-height:178px !important;
    }
}

@media(max-width:720px){
    .home-rankings-grid .ranking-card-main > .home-battle-card-art{
        height:176px !important;
        min-height:176px !important;
    }
}

@media(max-width:420px){
    .home-rankings-grid .ranking-card-main > .home-battle-card-art{
        height:162px !important;
        min-height:162px !important;
    }
}

/* Homepage layout tidy-up — move the 3-step bar into the main battle-lists section */
.home-how-strip-inline{
    margin:0 0 20px;
}

@media(max-width:760px){
    .home-how-strip-inline{
        margin:0 0 16px;
    }
}


/* Homepage V5.1 — stronger 3-step product guide */
.home-how-strip{
    gap:22px;
    padding:19px 24px;
    border-radius:14px;
}

.home-how-step{
    gap:15px;
}

.home-how-number{
    flex-basis:44px;
    width:44px;
    height:44px;
    border-radius:11px;
    font-size:23px;
    box-shadow:4px 4px 0 var(--theme-role-shadow-05070d);
}

.home-how-copy{
    gap:5px;
}

.home-how-copy strong{
    font-size:21px;
    line-height:.98;
    letter-spacing:-.3px;
}

.home-how-copy small{
    font-size:10px;
    line-height:1.25;
}

.home-how-arrow{
    font-size:27px;
}

.home-how-strip-inline{
    margin-bottom:26px;
}

@media(max-width:980px) and (min-width:761px){
    .home-how-strip{
        gap:14px;
        padding:17px 18px;
    }

    .home-how-step{
        gap:11px;
    }

    .home-how-number{
        flex-basis:39px;
        width:39px;
        height:39px;
        font-size:20px;
    }

    .home-how-copy strong{
        font-size:18px;
    }
}

@media(max-width:760px){
    .home-how-strip{
        gap:11px;
        padding:15px 16px;
    }

    .home-how-step{
        gap:12px;
    }

    .home-how-number{
        flex-basis:36px;
        width:36px;
        height:36px;
        font-size:18px;
    }

    .home-how-copy strong{
        font-size:17px;
    }

    .home-how-copy small{
        font-size:9.5px;
    }

    .home-how-strip-inline{
        margin-bottom:20px;
    }
}

/* ================================================================
   Homepage Battle Cards V6 — slimmer, taller, calmer card redesign
   - taller portrait-friendly matchup area
   - tighter copy block
   - one dominant Battle CTA
   - Ranking / Quick 10 demoted to quiet secondary actions
   ================================================================ */

.home-rankings-grid{
    width:min(1220px,100%) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    gap:18px !important;
}

.home-rankings-grid .ranking-card{
    overflow:hidden;
    border-color:var(--theme-role-border-3c4765) !important;
    border-radius:14px !important;
    background:var(--theme-role-surface-10172e) !important;
    box-shadow:0 7px 18px var(--theme-role-shadow-rgba-0-0-0-20-d5b06a) !important;
}

.home-rankings-grid .ranking-card:hover{
    border-color:var(--theme-role-border-596783) !important;
    box-shadow:0 10px 24px var(--theme-role-shadow-rgba-0-0-0-27-16dde4) !important;
}

/* The important experiment: make the two image halves feel portrait-led. */
.home-rankings-grid .ranking-card-main > .home-battle-card-art{
    height:248px !important;
    min-height:248px !important;
    border-bottom:1px solid var(--theme-role-border-303a56);
}

.home-rankings-grid .home-battle-card-side{
    width:55% !important;
}

.home-battle-card-left{
    clip-path:polygon(0 0,100% 0,89% 100%,0 100%) !important;
}

.home-battle-card-side img{
    object-fit:cover;
    object-position:center 24%;
}

.home-battle-card-art::after{
    left:51.35% !important;
    height:118%;
    top:-9%;
}

.home-battle-card-vs{
    left:51.35% !important;
    width:43px;
    height:43px;
    font-size:12px;
}

.home-battle-card-side em{
    padding:12px 12px 13px;
    font-size:12px;
    letter-spacing:.1px;
}

/* Calm the body down: less dead height, stronger spacing hierarchy. */
.home-rankings-grid .ranking-card-main > .ranking-card-copy{
    min-height:0 !important;
    padding:17px 17px 15px !important;
    background:var(--theme-role-surface-121a33) !important;
}

.home-rankings-grid .ranking-card-copy > small{
    margin-bottom:7px !important;
    font-size:9px !important;
    letter-spacing:.55px !important;
}

.home-rankings-grid .ranking-card-copy > strong{
    margin-bottom:12px !important;
    font-size:25px !important;
    line-height:.96 !important;
    letter-spacing:-.35px !important;
}

.home-rankings-grid .ranking-card-leaders{
    margin-top:0 !important;
}

.home-rankings-grid .ranking-card-leaders > span{
    min-height:24px !important;
    padding:3px 0 !important;
    border-bottom:1px solid var(--theme-role-border-rgba-255-255-255-055-ca2d2f);
    font-size:10px !important;
    line-height:1.15 !important;
}

.home-rankings-grid .ranking-card-leaders > span:last-child{
    border-bottom:0;
}

.home-rankings-grid .ranking-card-leaders > span b{
    margin-right:7px !important;
    color:var(--theme-role-text-e7ff00) !important;
}

.home-rankings-grid .ranking-card-copy > em{
    margin-top:13px !important;
    padding-top:10px !important;
    border-top:1px solid var(--theme-role-border-rgba-255-255-255-07-bdbe0b);
    color:var(--theme-role-text-949fb5) !important;
    font-size:8px !important;
    letter-spacing:.35px !important;
}

/* Replace the old equal 3-way footer with a clearer action hierarchy. */
.home-rankings-grid .home-card-actions{
    display:block !important;
    min-height:0 !important;
    padding:12px 14px 14px !important;
    border-top:1px solid var(--theme-role-border-303a56) !important;
    background:var(--theme-role-surface-0f162d) !important;
}

.home-rankings-grid .home-card-actions > .home-card-battle-primary{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    width:100% !important;
    min-height:46px !important;
    padding:0 14px !important;
    border:1px solid var(--theme-role-border-e7ff00) !important;
    border-radius:8px !important;
    background:var(--theme-role-surface-e7ff00) !important;
    color:var(--theme-role-text-080b14) !important;
    font-family:"Arial Narrow","Segoe UI",Arial,sans-serif !important;
    font-size:15px !important;
    font-style:italic !important;
    font-weight:1000 !important;
    letter-spacing:.3px !important;
    text-decoration:none !important;
    text-transform:uppercase !important;
    box-shadow:0 4px 0 var(--theme-role-shadow-05070d) !important;
}

.home-rankings-grid .home-card-actions > .home-card-battle-primary:hover{
    transform:translateY(-1px);
    filter:brightness(1.02);
}

.home-card-battle-primary > span{
    font-size:16px;
    line-height:1;
}

.home-card-secondary-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
    margin-top:10px;
}

.home-rankings-grid .home-card-secondary-actions > a{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
    min-width:0 !important;
    min-height:39px !important;
    padding:0 9px !important;
    border:1px solid var(--theme-role-border-3b4765) !important;
    border-radius:7px !important;
    background:var(--theme-role-surface-11192f) !important;
    color:var(--theme-role-text-c8d0de) !important;
    font-family:"Segoe UI",Arial,sans-serif !important;
    font-size:9px !important;
    line-height:1 !important;
    font-weight:800 !important;
    letter-spacing:.05px !important;
    text-decoration:none !important;
    text-transform:none !important;
}

.home-rankings-grid .home-card-secondary-actions > a:hover{
    border-color:var(--theme-role-border-64708d) !important;
    background:var(--theme-role-surface-18213b) !important;
    color:var(--theme-role-text-fff) !important;
}

.home-card-action-icon{
    position:relative;
    display:inline-block;
    flex:0 0 auto;
    width:14px;
    height:14px;
    opacity:.85;
}

/* CSS-only mini bar-chart icon. */
.home-card-action-ranking{
    background:
        linear-gradient(to top,currentColor 0 55%,transparent 55%) left bottom/3px 100% no-repeat,
        linear-gradient(to top,currentColor 0 80%,transparent 80%) center bottom/3px 100% no-repeat,
        linear-gradient(to top,currentColor 0 100%,transparent 100%) right bottom/3px 100% no-repeat;
}

/* CSS-only clock icon. */
.home-card-action-clock{
    border:1.5px solid currentColor;
    border-radius:50%;
}
.home-card-action-clock::before,
.home-card-action-clock::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:1.5px;
    background:currentColor;
    transform-origin:50% 100%;
}
.home-card-action-clock::before{
    height:4px;
    transform:translate(-50%,-100%);
}
.home-card-action-clock::after{
    height:4px;
    transform:translate(-50%,-100%) rotate(125deg);
}

@media(max-width:1050px){
    .home-rankings-grid{
        width:100% !important;
    }

    .home-rankings-grid .ranking-card-main > .home-battle-card-art{
        height:235px !important;
        min-height:235px !important;
    }
}

@media(max-width:720px){
    .home-rankings-grid .ranking-card-main > .home-battle-card-art{
        height:225px !important;
        min-height:225px !important;
    }

    .home-rankings-grid .ranking-card-copy > strong{
        font-size:23px !important;
    }
}

@media(max-width:420px){
    .home-rankings-grid .ranking-card-main > .home-battle-card-art{
        height:210px !important;
        min-height:210px !important;
    }

    .home-rankings-grid .ranking-card-main > .ranking-card-copy{
        padding:15px 14px 13px !important;
    }

    .home-rankings-grid .home-card-actions{
        padding:11px 12px 13px !important;
    }
}

/* ================================================================
   Homepage Battle Lists — smart artwork + Songs vinyl fallback
   2026-08-28
   - Dedicated Battle List hero: one full-width image, never duplicated.
   - 2+ contender images: existing split treatment.
   - 1 contender image: one full-width image, never duplicated.
   - Songs with no images: vinyl/music-note fallback matching ranking.php.
   ================================================================ */
.home-battle-card-art-single::after,
.home-battle-card-art-single .home-battle-card-vs{
    display:none !important;
}

.home-battle-card-single-image{
    position:absolute;
    inset:0;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
    background:var(--theme-role-surface-151b35);
}

.home-battle-card-single-image img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    transition:transform .18s ease;
}

.ranking-card:hover .home-battle-card-single-image img{
    transform:scale(1.025);
}

.home-battle-card-single-image::after{
    content:"";
    position:absolute;
    inset:52% 0 0;
    z-index:2;
    background:linear-gradient(transparent,var(--theme-role-surface-rgba-4-7-14-72-cfe6d2));
    pointer-events:none;
}

.home-battle-card-single-image em{
    position:relative;
    z-index:4;
    display:block;
    width:100%;
    padding:12px;
    overflow:hidden;
    color:var(--theme-role-text-fff);
    font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
    font-size:12px;
    line-height:1;
    font-style:italic;
    font-weight:1000;
    text-overflow:ellipsis;
    text-shadow:1px 2px 3px var(--theme-role-shadow-000);
    text-transform:uppercase;
    white-space:nowrap;
}

/* Vinyl placeholder copied in spirit from the current Songs ranking page. */
.home-category-songs .home-song-fallback{
    align-items:flex-end;
    justify-content:center;
    background:
        radial-gradient(circle at 50% 45%,var(--theme-role-surface-rgba-223-255-0-055-5f48f3),transparent 42%),
        var(--theme-role-surface-11172e);
}

.home-category-songs .home-song-fallback::before{
    content:"";
    position:absolute;
    left:50%;
    top:47%;
    z-index:1;
    width:112px;
    height:112px;
    transform:translate(-50%,-50%);
    border:1px solid var(--theme-role-border-6675a6);
    border-radius:50%;
    background:
        radial-gradient(circle at 50% 50%,var(--theme-role-surface-d7e1ff) 0 5px,var(--theme-role-surface-a8b4da) 5px 8px,transparent 8px),
        repeating-radial-gradient(circle at 50% 50%,var(--theme-role-surface-rgba-255-255-255-08-0f1c00) 0 1px,var(--theme-role-surface-rgba-255-255-255-0-4babd7) 1px 7px),
        radial-gradient(circle at 32% 28%,var(--theme-role-surface-rgba-255-255-255-18-0d41ca),var(--theme-role-surface-rgba-255-255-255-0-4babd7) 28%),
        radial-gradient(circle at 50% 50%,var(--theme-role-surface-2a355b) 0 23%,var(--theme-role-surface-121a33) 23% 42%,var(--theme-role-surface-0a1020) 42% 72%,var(--theme-role-surface-050913) 72% 100%);
    box-shadow:0 8px 18px var(--theme-role-shadow-rgba-0-0-0-32-78ad00),inset 0 0 0 1px var(--theme-role-shadow-rgba-255-255-255-06-08e149);
}

.home-category-songs .home-song-fallback > b.home-song-fallback-glyph{
    position:absolute;
    left:50%;
    top:47%;
    right:auto;
    bottom:auto;
    inset:auto;
    z-index:3;
    display:block;
    width:auto;
    transform:translate(-50%,-50%);
    color:var(--theme-role-text-e6ff45);
    font-family:"Segoe UI Symbol","Segoe UI",Arial,sans-serif;
    font-size:58px;
    line-height:1;
    font-style:normal;
    font-weight:1000;
    text-shadow:0 0 22px var(--theme-role-shadow-rgba-223-255-0-14-36945f);
}

.home-category-songs .home-song-fallback::after{
    content:"";
    position:absolute;
    left:50%;
    top:47%;
    z-index:2;
    width:32px;
    height:32px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:radial-gradient(circle at 50% 50%,var(--theme-role-surface-edf1ff) 0 2px,var(--theme-role-surface-c6d0ee) 2px 5px,var(--theme-role-surface-5c6c9d) 5px 100%);
    box-shadow:0 0 0 1px var(--theme-role-shadow-rgba-255-255-255-12-895780);
    pointer-events:none;
}

/* Keep the title fade on top of the record without covering the record itself. */
.home-category-songs .home-song-fallback em{
    z-index:5;
    background:linear-gradient(transparent,var(--theme-role-surface-rgba-4-7-14-70-450b4a));
}

@media(max-width:420px){
    .home-category-songs .home-song-fallback::before{
        width:94px;
        height:94px;
    }
    .home-category-songs .home-song-fallback::after{
        width:27px;
        height:27px;
    }
    .home-category-songs .home-song-fallback > b.home-song-fallback-glyph{
        font-size:49px;
    }
}

/* ================================================================
   Homepage Battle Lists — Songs ghost-note identity
   2026-08-28
   Songs cards get a large, quiet double-note watermark in the copy area.
   It is decorative only and never changes card layout or click behaviour.
   ================================================================ */
.home-rankings-grid .home-category-songs .ranking-card-copy{
    position:relative !important;
    overflow:hidden !important;
    isolation:isolate;
}

.home-rankings-grid .home-category-songs .ranking-card-copy::after{
    content:"♫";
    position:absolute;
    z-index:0;
    top:23px;
    right:17px;
    color:var(--theme-role-text-e7ff00);
    font-family:"Segoe UI Symbol","Segoe UI",Arial,sans-serif;
    font-size:112px;
    line-height:.8;
    font-style:normal;
    font-weight:1000;
    opacity:.11;
    transform:rotate(-8deg);
    transform-origin:center;
    pointer-events:none;
    user-select:none;
}

.home-rankings-grid .home-category-songs .ranking-card-copy > small,
.home-rankings-grid .home-category-songs .ranking-card-copy > strong,
.home-rankings-grid .home-category-songs .ranking-card-copy > .ranking-card-leaders,
.home-rankings-grid .home-category-songs .ranking-card-copy > em{
    position:relative;
    z-index:1;
}

@media(max-width:520px){
    .home-rankings-grid .home-category-songs .ranking-card-copy::after{
        top:25px;
        right:12px;
        font-size:94px;
        opacity:.095;
    }
}


/* Songs shared album/soundtrack cover art — single card image, never duplicated. */
.home-category-songs .home-battle-card-art-single .home-battle-card-single-image{background:radial-gradient(circle at 50% 40%,var(--theme-role-surface-rgba-231-255-0-055-0e4447),transparent 40%),var(--theme-role-surface-0b1024);}
.home-category-songs .home-battle-card-art-single .home-battle-card-single-image img{object-fit:cover;object-position:center;}

/* ================================================================
   Homepage Battle Cards V6.1 — quieter two-action footer trial
   - Remove the large yellow Battle CTA.
   - View Ranking uses the shared electric-yellow ranking icon.
   - Battle is the second equal action, with electric-yellow lightning.
   ================================================================ */
.home-rankings-grid .home-card-actions{
    padding:12px 14px 14px !important;
}

.home-rankings-grid .home-card-secondary-actions-main{
    grid-template-columns:1fr 1fr;
    gap:9px;
    margin-top:0 !important;
}

.home-rankings-grid .home-card-secondary-actions-main > a{
    min-height:43px !important;
    font-size:10px !important;
    font-weight:900 !important;
}

.home-rankings-grid .home-card-ranking-link .home-card-action-ranking{
    color:var(--theme-role-text-e7ff00) !important;
    opacity:1 !important;
}

.home-rankings-grid .home-card-battle-link .home-card-action-battle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:14px;
    height:16px;
    color:var(--theme-role-text-e7ff00) !important;
    font-size:15px;
    line-height:1;
    opacity:1 !important;
}

.home-rankings-grid .home-card-ranking-link:hover,
.home-rankings-grid .home-card-battle-link:hover{
    color:var(--theme-role-text-fff) !important;
}

@media(max-width:420px){
    .home-rankings-grid .home-card-secondary-actions-main > a{
        min-height:41px !important;
        padding:0 7px !important;
        font-size:9px !important;
    }
}


/* Homepage Battle Cards V6.1.1 — use the shared CSS/SVG yellow lightning, not the coloured emoji glyph. */
.home-rankings-grid .home-card-battle-link .home-card-action-battle svg{
    display:block;
    width:13px;
    height:16px;
    overflow:visible;
}
.home-rankings-grid .home-card-battle-link .home-card-action-battle path{
    fill:var(--theme-role-text-e7ff00) !important;
}