/* BattleRanker homepage — styles formerly embedded in index.php. */
/* Homepage hero battle — make the ranking title prominent. */
        .pop-feature-footer > span{
            font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
            font-size:20px;
            line-height:1;
            font-weight:950;
            font-style:italic;
            letter-spacing:-.45px;
        }



        /* Battle modes + live rankings — compact stacked homepage feature area. */
        .pop-battle-overview{
            display:block;
            margin:0 0 14px;
        }

        .pop-battle-overview .pop-mode-strip{
            display:block;
            height:auto;
            margin:0 0 14px;
        }

        .pop-battle-overview .pop-mode-grid{
            display:grid;
            grid-template-columns:repeat(3,minmax(0,1fr));
            gap:10px;
        }

        .pop-battle-overview .pop-mode-pill{
            min-height:82px;
            height:auto;
            padding:13px 15px;
        }

        .pop-battle-overview .pop-mode-icon{
            width:48px;
            height:48px;
        }

        .pop-battle-overview .pop-mode-copy strong{
            font-size:21px;
        }

        .pop-live-rankings{
            display:block;
            min-width:0;
            padding:12px 14px;
            border:2px solid var(--theme-role-border-343c56);
            border-radius:16px;
            background:var(--theme-role-surface-10162b);
            box-shadow:0 4px 0 var(--theme-role-shadow-rgba-0-0-0-24-120af2);
        }

        .pop-live-rankings-head{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            margin:0 0 10px;
            padding:0 0 9px;
            border-bottom:1px solid var(--theme-role-border-303956);
        }

        .pop-live-rankings-head div{
            min-width:0;
        }

        .pop-live-rankings-head small{
            display:block;
            margin:0 0 2px;
            color:var(--theme-role-text-dfff00);
            font-size:8px;
            font-weight:950;
            letter-spacing:.9px;
            text-transform:uppercase;
        }

        .pop-live-rankings-head strong{
            display:block;
            color:var(--theme-role-text-fff);
            font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
            font-size:20px;
            line-height:1;
            font-weight:950;
            font-style:italic;
            text-transform:uppercase;
        }

        .pop-live-rankings-head span{
            color:var(--theme-role-text-8994ad);
            font-size:9px;
            font-weight:800;
            line-height:1.2;
            text-align:right;
        }

        .pop-live-ranking-list{
            display:grid;
            grid-template-columns:repeat(3,minmax(0,1fr));
            gap:9px;
        }

        .pop-live-ranking{
            display:block;
            min-width:0;
            padding:8px 9px;
            border:1px solid var(--theme-role-border-303956);
            border-radius:9px;
            background:var(--theme-role-surface-151b35);
            color:var(--theme-role-text-fff);
            text-decoration:none;
        }

        .pop-live-ranking:hover{
            border-color:var(--theme-role-border-dfff00);
        }

        .pop-live-ranking-title{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:8px;
            margin:0 0 6px;
        }

        .pop-live-ranking-title strong{
            min-width:0;
            color:var(--theme-role-text-fff);
            font-size:9px;
            font-weight:950;
            line-height:1.1;
            text-transform:uppercase;
        }

        .pop-live-ranking-title span{
            flex:0 0 auto;
            color:var(--theme-role-text-dfff00);
            font-size:12px;
            font-weight:950;
        }

        .pop-live-top3{
            display:grid;
            grid-template-columns:repeat(3,minmax(0,1fr));
            gap:6px;
        }

        .pop-live-entry{
            display:grid;
            grid-template-columns:16px 26px minmax(0,1fr);
            align-items:center;
            gap:5px;
            min-width:0;
            color:var(--theme-role-text-d7dced);
            font-size:8px;
            font-weight:850;
        }

        .pop-live-entry b{
            color:var(--theme-role-text-dfff00);
            font-size:10px;
            font-style:italic;
            text-align:center;
        }

        .pop-live-entry img,
        .pop-live-entry .pop-live-noimg{
            display:block;
            width:26px;
            height:24px;
            object-fit:cover;
            border-radius:4px;
            background:var(--theme-role-surface-252d45);
        }

        .pop-live-entry span:last-child{
            min-width:0;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
        }

        @media(max-width:980px){
            .pop-live-ranking-list{
                grid-template-columns:1fr;
            }

            .pop-live-top3{
                grid-template-columns:repeat(3,minmax(0,1fr));
            }
        }

        @media(max-width:820px){
            .pop-battle-overview .pop-mode-grid{
                grid-template-columns:1fr;
            }

            .pop-live-rankings-head{
                align-items:flex-start;
            }

            .pop-live-top3{
                grid-template-columns:1fr;
            }
        }

        /* Ranked-list cards: view the ranking quietly, choose battle mode via battle-start. */
        .pop-list-meta-row{
            display:flex;
            align-items:center;
            flex-wrap:wrap;
            gap:10px 14px;
            margin-top:10px;
        }
        .pop-list-meta-row em{
            margin:0 !important;
        }
        .pop-list-view-link{
            color:var(--theme-role-text-d7dced);
            font-size:10px;
            font-weight:950;
            text-decoration:none;
            letter-spacing:.15px;
        }
        .pop-list-view-link:hover{
            color:var(--theme-role-text-dfff00);
        }
        .pop-list-main{
            cursor:default;
        }
        .pop-list-art{
            text-decoration:none;
        }
        .pop-list-actions-battle-only{
            display:block !important;
        }
        .pop-list-actions-battle-only .pop-battle-btn-full{
            display:flex !important;
            width:100% !important;
            min-height:46px;
            align-items:center;
            justify-content:center;
            box-sizing:border-box;
        }

        /* Battle mode chooser — prominent entry points above Quick Battles. */
        .pop-mode-strip{
            margin:0 0 22px;
        }
        .pop-mode-kicker{
            display:block;
            margin:0 0 9px;
            color:var(--theme-role-text-8f99aa);
            font-size:9px;
            font-weight:950;
            letter-spacing:.9px;
            text-transform:uppercase;
        }
        .pop-mode-grid{
            display:grid;
            grid-template-columns:repeat(3,minmax(0,1fr));
            gap:12px;
        }
        .pop-mode-pill{
            position:relative;
            display:flex;
            align-items:center;
            gap:13px;
            min-height:84px;
            padding:14px 18px;
            border:2px solid var(--theme-role-border-343c56);
            border-radius:18px;
            background:var(--theme-role-surface-151b35);
            color:var(--theme-role-text-fff);
            text-decoration:none;
            overflow:hidden;
            box-shadow:0 5px 0 var(--theme-role-shadow-rgba-0-0-0-28-ca0b96);
            transition:transform .15s ease,border-color .15s ease,background .15s ease;
        }
        .pop-mode-icon{
            flex:0 0 auto;
            display:grid;
            place-items:center;
            width:54px;
            height:54px;
            border-radius:15px;
            background:var(--theme-role-surface-dfff00);
            color:var(--theme-role-text-101225);
            font-size:22px;
            font-weight:950;
            box-shadow:3px 3px 0 var(--theme-role-shadow-080a15);
        }
        .pop-mode-copy{
            min-width:0;
            display:flex;
            flex-direction:column;
            gap:4px;
        }
        .pop-mode-copy strong{
            font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
            font-size:24px;
            line-height:.95;
            font-weight:950;
            font-style:italic;
            letter-spacing:-.45px;
            text-transform:uppercase;
        }
        .pop-mode-copy span{
            color:var(--theme-role-text-aeb6cb);
            font-size:10px;
            font-weight:800;
            line-height:1.25;
        }
        .pop-mode-pill:nth-child(2) .pop-mode-icon{
            background:var(--theme-role-surface-20d7cf);
        }
        .pop-mode-pill:nth-child(3) .pop-mode-icon{
            background:var(--theme-role-surface-ff3f92);
            color:var(--theme-role-text-fff);
        }
        @media(max-width:820px){
            .pop-mode-grid{
                grid-template-columns:1fr;
                gap:9px;
            }
            .pop-mode-pill{
                min-height:70px;
                padding:11px 14px;
                border-radius:14px;
            }
            .pop-mode-icon{
                width:44px;
                height:44px;
                border-radius:12px;
            }
            .pop-mode-copy strong{
                font-size:20px;
            }
        }

        @media(min-width:1050px){
            .pop-quick-grid{
                grid-template-columns:repeat(4,minmax(0,1fr));
                gap:14px;
            }
            .pop-quick-card{
                height:138px;
                min-height:138px;
                border-radius:12px;
                display:grid;
                grid-template-columns:minmax(0,1fr) minmax(0,1fr);
                position:relative;
            }
            .pop-quick-side{
                width:auto;
                min-width:0;
                height:138px;
            }
            .pop-quick-side:first-child{
                grid-column:1;
            }
            .pop-quick-side:nth-of-type(3){
                grid-column:2;
            }
            .pop-quick-vs{
                position:absolute;
                left:50%;
                top:50%;
                transform:translate(-50%,-50%);
                margin:0;
                z-index:6;
            }
            .pop-quick-side b{
                padding:10px 9px;
                font-size:12px;
                line-height:1.05;
            }
            .pop-quick-vs{
                width:42px;
                height:42px;
                font-size:12px;
            }
            .pop-quick-arrow{
                display:none;
            }
        }

        @media(max-width:699px){
            .pop-feature-footer > span{
                font-size:16px;
                line-height:1.05;
            }
        }
    
        /* Final homepage flow: battle-mode promo row straight into ranked lists. */
        .pop-mode-strip-standalone{
            margin:18px 0 24px;
        }
        .pop-mode-strip-standalone .pop-mode-grid{
            display:grid;
            grid-template-columns:repeat(3,minmax(0,1fr));
            gap:10px;
        }
        .pop-mode-strip-standalone .pop-mode-pill{
            min-height:82px;
            height:auto;
            padding:13px 15px;
        }
        @media(max-width:820px){
            .pop-mode-strip-standalone{
                margin:14px 0 18px;
            }
            .pop-mode-strip-standalone .pop-mode-grid{
                grid-template-columns:1fr;
            }
        }




        /* Battle modes are part of the hero identity, above the lime divider. */
        .pop-hero-modes{
            position:relative;
            z-index:3;
            padding-bottom:18px;
        }

        .pop-hero-modes .pop-mode-strip{
            margin:0;
        }

        .pop-hero-modes .pop-mode-kicker{
            color:var(--theme-role-text-b7bfcc);
        }

        .pop-hero-modes .pop-mode-grid{
            display:grid;
            grid-template-columns:repeat(3,minmax(0,1fr));
            gap:10px;
        }

        .pop-hero-modes .pop-mode-pill{
            min-height:76px;
            padding:12px 14px;
            background:var(--theme-role-surface-rgba-20-27-53-92-8a1337);
        }

        /* Actual current ranking orders below the browse cards. */
        .pop-live-results-section{
            padding:28px 0 10px;
            background:var(--theme-role-surface-0c1125);
        }

        .pop-live-results-heading{
            margin-bottom:14px;
        }

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

        .pop-live-result-card{
            overflow:hidden;
            border:1px solid var(--theme-role-border-39435f);
            border-radius:12px;
            background:var(--theme-role-surface-151b35);
            box-shadow:0 4px 0 var(--theme-role-shadow-rgba-0-0-0-22-41d185);
        }

        .pop-live-result-title{
            display:flex;
            align-items:flex-end;
            justify-content:space-between;
            gap:12px;
            padding:13px 14px;
            border-bottom:1px solid var(--theme-role-border-343d59);
            color:var(--theme-role-text-fff);
            text-decoration:none;
        }

        .pop-live-result-title > span{
            min-width:0;
        }

        .pop-live-result-title small{
            display:block;
            margin:0 0 4px;
            color:var(--theme-role-text-dfff00);
            font-size:8px;
            font-weight:950;
            letter-spacing:.7px;
            text-transform:uppercase;
        }

        .pop-live-result-title strong{
            display:block;
            color:var(--theme-role-text-fff);
            font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
            font-size:18px;
            line-height:1;
            font-weight:950;
            font-style:italic;
            text-transform:uppercase;
        }

        .pop-live-result-title b{
            flex:0 0 auto;
            color:var(--theme-role-text-dfff00);
            font-size:8px;
            font-weight:950;
            white-space:nowrap;
        }

        .pop-live-result-list{
            list-style:none;
            margin:0;
            padding:8px;
        }

        .pop-live-result-list li{
            display:grid;
            grid-template-columns:34px 52px minmax(0,1fr);
            align-items:center;
            gap:9px;
            min-height:54px;
            padding:5px 7px;
            border-bottom:1px solid var(--theme-role-border-2f3852);
        }

        .pop-live-result-list li:last-child{
            border-bottom:0;
        }

        .pop-live-result-pos{
            color:var(--theme-role-text-dfff00);
            font-size:18px;
            font-weight:950;
            font-style:italic;
            text-align:center;
        }

        .pop-live-result-thumb{
            display:grid;
            place-items:center;
            width:52px;
            height:44px;
            overflow:hidden;
            border-radius:6px;
            background:var(--theme-role-surface-252d45);
            color:var(--theme-role-text-dfff00);
            font-weight:950;
        }

        .pop-live-result-thumb img{
            width:100%;
            height:100%;
            object-fit:cover;
        }

        .pop-live-result-name{
            min-width:0;
            color:var(--theme-role-text-fff);
            font-size:11px;
            font-weight:900;
            line-height:1.1;
        }

        @media(max-width:900px){
            .pop-live-results-grid{
                grid-template-columns:1fr;
            }
        }

        @media(max-width:820px){
            .pop-hero-modes .pop-mode-grid{
                grid-template-columns:1fr;
            }

            .pop-hero-modes{
                padding-bottom:14px;
            }

            .pop-live-result-title{
                align-items:flex-start;
            }
        }


        /* Ranking card footer: direct Battle, direct Quick 10, or more modes. */
        .pop-list-actions-three{
            display:grid !important;
            grid-template-columns:1.05fr 1fr .8fr;
            min-height:44px;
        }
        .pop-list-actions-three .pop-card-battle{
            display:flex;
            align-items:center;
            justify-content:center;
            min-width:0;
            min-height:44px;
            padding:0 8px;
            border-right:1px solid var(--theme-role-border-35405c);
            background:var(--theme-role-surface-151b35);
            color:var(--theme-role-text-fff);
            font-size:10px;
            font-weight:950;
            letter-spacing:.15px;
            text-decoration:none;
            text-transform:uppercase;
            box-sizing:border-box;
        }
        .pop-list-actions-three .pop-card-battle:last-child{
            border-right:0;
        }
        .pop-list-actions-three .pop-card-battle:hover{
            background:var(--theme-role-surface-202846);
            color:var(--theme-role-text-dfff00);
        }
        .pop-list-actions-three .pop-card-battle-main{
            color:var(--theme-role-text-dfff00);
        }
        .pop-list-actions-three .pop-card-battle-quick{
            background:var(--theme-role-surface-1a213c);
        }
        .pop-list-actions-three .pop-card-battle-more{
            color:var(--theme-role-text-c3cada);
        }
        @media(max-width:520px){
            .pop-list-actions-three .pop-card-battle{
                min-height:42px;
                padding:0 5px;
                font-size:9px;
            }
        }


        /* Final ranked-list card action bar: four equal actions on one row. */
        .pop-list-card{
            position:relative;
            overflow:hidden;
        }

        .pop-list-card::before{
            content:"";
            position:absolute;
            left:0;
            top:0;
            bottom:0;
            width:4px;
            background:var(--theme-role-surface-dfff00);
            z-index:9;
            pointer-events:none;
        }

        .pop-list-main{
            border-left:0 !important;
        }

        .pop-list-actions-four{
            display:grid !important;
            grid-template-columns:repeat(4,minmax(0,1fr)) !important;
            width:100%;
            min-height:54px;
            padding:0 !important;
            margin:0 !important;
            border-top:1px solid var(--theme-role-border-35405c);
            box-sizing:border-box;
        }

        .pop-list-actions-four .pop-card-action{
            display:flex !important;
            align-items:center;
            justify-content:center;
            min-width:0;
            min-height:44px;
            padding:0 6px;
            border-right:1px solid var(--theme-role-border-35405c);
            background:var(--theme-role-surface-151b35);
            color:var(--theme-role-text-d8deed);
            font-size:9px;
            font-weight:950;
            line-height:1;
            letter-spacing:.1px;
            text-align:center;
            text-decoration:none;
            text-transform:uppercase;
            white-space:nowrap;
            box-sizing:border-box;
        }

        .pop-list-actions-four .pop-card-action:last-child{
            border-right:0;
        }

        .pop-list-actions-four .pop-card-action:hover{
            background:var(--theme-role-surface-202846);
            color:var(--theme-role-text-dfff00);
        }

        .pop-list-actions-four .pop-card-battle,
        .pop-list-actions-four .pop-card-quick{
            color:var(--theme-role-text-dfff00);
        }

        .pop-list-actions-four .pop-card-more{
            color:var(--theme-role-text-aeb7ca);
        }

        @media(max-width:520px){
            .pop-list-actions-four{
                grid-template-columns:repeat(2,minmax(0,1fr)) !important;
            }

            .pop-list-actions-four .pop-card-action:nth-child(2){
                border-right:0;
            }

            .pop-list-actions-four .pop-card-action:nth-child(-n+2){
                border-bottom:1px solid var(--theme-role-border-35405c);
            }
        }



        /* Homepage ranked cards — final two-action footer, dark Battle treatment. */
        .pop-list-actions-two{
            display:grid !important;
            grid-template-columns:1fr 1fr !important;
            width:100%;
            min-height:58px !important;
            padding:0 !important;
            margin:0 !important;
            border-top:1px solid var(--theme-role-border-35405c);
            background:var(--theme-role-surface-11172e) !important;
        }

        .pop-list-actions-two .pop-card-action{
            display:flex !important;
            align-items:center;
            justify-content:center;
            min-width:0;
            min-height:58px !important;
            padding:0 14px !important;
            background:var(--theme-role-surface-151b35) !important;
            color:var(--theme-role-text-d8deed) !important;
            border:0 !important;
            text-decoration:none;
            font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
            font-size:13px !important;
            line-height:1 !important;
            font-weight:1000;
            letter-spacing:.15px;
            text-transform:uppercase;
            transition:background .15s ease,color .15s ease,border-color .15s ease;
        }

        .pop-list-actions-two .pop-card-view{
            border-right:1px solid var(--theme-role-border-35405c) !important;
        }

        .pop-list-actions-two .pop-card-battle{
            position:relative;
            color:var(--theme-role-text-f4f6fb) !important;
            background:var(--theme-role-surface-181f3a) !important;
        }

        .pop-list-actions-two .pop-card-battle span{
            margin-right:3px;
            color:var(--theme-role-text-ff812c);
            font-size:14px !important;
            line-height:1 !important;
        }

        .pop-list-actions-two .pop-card-view:hover{
            background:var(--theme-role-surface-202846) !important;
            color:var(--theme-role-text-fff) !important;
        }

        .pop-list-actions-two .pop-card-battle:hover{
            background:var(--theme-role-surface-202846) !important;
            color:var(--theme-role-text-e7ff00) !important;
        }

        @media(max-width:520px){
            .pop-list-actions-two,
            .pop-list-actions-two .pop-card-action{
                min-height:50px;
            }
            .pop-list-actions-two .pop-card-action{
                min-height:54px !important;
                font-size:11px !important;
            }
        }



        /* Homepage cards V4 — visual teaser only.
           Ranking detail now belongs on the Rankings page. */
        .rank-card-v2-heading{
            padding-bottom:14px !important;
        }

        .rank-card-v2-heading > span{
            margin-top:6px !important;
        }

        .home-rankings-grid .ranking-card-copy > em{
            font-size:10px !important;
            letter-spacing:.35px;
        }


        /* ==========================================================
           Homepage — big View Rankings gateway
           Sits between the ranking cards and the "Think You Know Better?" block.
           ========================================================== */
        .pop-view-rankings-section{
            padding:30px 0 32px;
            background:var(--theme-role-surface-0c1125);
        }

        .pop-view-rankings-link{
            display:flex;
            align-items:center;
            justify-content:center;
            gap:14px;
            width:max-content;
            max-width:100%;
            margin:0 auto;
            padding:18px 34px;
            border:1px solid var(--theme-role-border-3b4562);
            border-radius:10px;
            background:var(--theme-role-surface-11172e);
            color:var(--theme-role-text-fff);
            text-decoration:none;
            box-shadow:0 5px 0 var(--theme-role-shadow-rgba-0-0-0-24-120af2);
            transition:transform .15s ease,border-color .15s ease,background .15s ease;
        }

        .pop-view-rankings-link:hover{
            transform:translateY(-2px);
            border-color:var(--theme-role-border-e7ff00);
            background:var(--theme-role-surface-171e38);
        }

        .pop-view-rankings-icon{
            display:inline-flex;
            align-items:flex-end;
            justify-content:center;
            width:34px;
            height:34px;
            flex:0 0 34px;
            color:var(--theme-role-text-e7ff00);
            filter:drop-shadow(0 0 7px var(--theme-role-shadow-rgba-231-255-0-14-5672f3));
        }

        .pop-view-rankings-icon svg{
            display:block;
            width:100%;
            height:100%;
        }

        .pop-view-rankings-icon rect{
            fill:currentColor;
        }

        .pop-view-rankings-copy{
            display:flex;
            align-items:center;
            gap:10px;
            min-width:0;
            font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
            font-size:30px;
            line-height:1;
            font-style:italic;
            font-weight:1000;
            letter-spacing:-.6px;
            text-transform:uppercase;
        }

        .pop-view-rankings-arrow{
            color:var(--theme-role-text-e7ff00);
            font-size:32px;
            line-height:1;
            font-style:normal;
            transform:translateY(-1px);
        }

        @media(max-width:699px){
            .pop-view-rankings-section{
                padding:20px 0 24px;
            }

            .pop-view-rankings-link{
                width:100%;
                padding:16px 18px;
                gap:11px;
                box-sizing:border-box;
            }

            .pop-view-rankings-icon{
                width:27px;
                height:27px;
                flex-basis:27px;
            }

            .pop-view-rankings-copy{
                font-size:29px;
            }

            .pop-view-rankings-arrow{
                font-size:20px;
            }
        }

        /* Hero proof strip — scale + energy without changing the hero layout. */
        .pop-hero-stats-shell{
            position:relative;
            z-index:2;
            margin-top:18px;
        }

        .pop-hero-stats{
            display:grid;
            grid-template-columns:repeat(3,minmax(0,1fr));
            gap:14px;
            width:100%;
            max-width:1080px;
            margin:0 auto;
            padding:0;
        }

        .pop-hero-stat{
            display:flex;
            flex-direction:column;
            align-items:center;
            justify-content:center;
            gap:6px;
            min-height:82px;
            padding:15px 18px;
            border:1px solid var(--theme-role-border-rgba-231-255-0-20-f657aa);
            border-radius:12px;
            background:var(--theme-role-surface-rgba-10-14-24-68-1865e3);
            box-shadow:0 4px 14px var(--theme-role-shadow-rgba-0-0-0-18-09884d);
            text-align:center;
        }

        .pop-hero-stat strong{
            color:var(--theme-role-text-dfff00);
            font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
            font-size:25px;
            line-height:.95;
            font-style:italic;
            font-weight:1000;
            letter-spacing:-.45px;
            text-transform:uppercase;
        }

        .pop-hero-stat small{
            color:var(--theme-role-text-f4f6fb);
            font-size:11px;
            line-height:1.1;
            font-weight:950;
            letter-spacing:.65px;
            text-transform:uppercase;
        }

        .pop-hero-stat-copy strong{
            font-size:23px;
        }

        @media(max-width:760px){
            .pop-hero-stats-shell{
                margin-top:14px;
            }

            .pop-hero-stats{
                grid-template-columns:1fr;
                gap:9px;
            }

            .pop-hero-stat{
                min-height:64px;
                padding:12px 13px;
            }

            .pop-hero-stat strong{
                font-size:24px;
            }

            .pop-hero-stat small{
                font-size:9px;
                letter-spacing:.55px;
            }
        }