/* BattleRanker Ranking page.
   Styles formerly scattered across ranking.php.
   Preserved in their existing cascade order on 12 Sep 2026. */

/* Former inline stylesheet 1. */
.ranking-help-strong{
    color:var(--theme-role-text-333);
    font-size:14px;
    line-height:1.45;
    font-weight:700;
}


/* BattleRanker V3.23 — clean/simple mobile ranking page */
.mobile-ranking-simple-help{
    display:none;
}

.ranking-order-helper{
    margin:0 0 12px;
    color:var(--theme-role-text-98a4aa);
    font-size:12px;
    font-weight:700;
    line-height:1.45;
}

.ranking-order-helper strong{
    color:var(--theme-role-text-dfff00);
}

@media (max-width:760px){

    /* Public ranking: content first. */
    .public-ranking .ranking-battle-teaser{
        display:none !important;
    }

    /* Remove duplicate / instructional clutter around Your Ranking. */
    .mobile-manual-ranking-kicker,
    .your-ranking .ranking-context-title,
    .your-ranking .battle-mode-tabs,
    .your-ranking .edit-mode-banner,
    .your-ranking .ranking-help-strong,
    .your-ranking .save-line,
    .your-ranking .drag-hint{
        display:none !important;
    }

    .mobile-ranking-simple-help{
        display:block;
        margin:0 0 10px;
        color:var(--theme-role-text-8f999f);
        font-size:11px;
        font-weight:700;
        line-height:1.35;
    }

    /* Tighten the manual panel so the actual list starts quickly. */
    .ranking-layout .your-ranking{
        padding-top:12px !important;
    }

    .your-ranking .panel-title-row{
        margin-bottom:10px !important;
    }

    .your-ranking .panel-title{
        margin-bottom:0 !important;
    }

    .your-ranking .ranking-list{
        margin-top:0 !important;
    }

    /*
     * Keep the actual interaction + save control.
     * Make the save area visually quieter and simpler.
     */
    .your-ranking .manual-save-wrap{
        margin-top:10px !important;
        padding:10px !important;
        gap:10px !important;
    }

    .your-ranking .manual-save-copy{
        display:none !important;
    }

    .your-ranking .save-ranking-btn{
        width:100% !important;
        min-height:44px !important;
    }

    /* Reset stays available, but compact. */
    .your-ranking .reset-btn{
        min-height:38px !important;
        padding:0 12px !important;
        font-size:10px !important;
    }
}



/* BattleRanker V3.24 — mobile Your Ranking / Official tabs */
.ranking-mobile-compare-tabs{
    display:none;
}

@media (max-width:760px){

    .ranking-mobile-mode-switch-top{
        margin-bottom:10px;
    }

    .ranking-mobile-tabs-shell{
        display:block !important;
        width:100% !important;
    }

    .ranking-mobile-compare-tabs{
        display:grid;
        grid-template-columns:1fr 1fr;
        width:100%;
        margin:0 0 10px;
        border:1px solid var(--theme-role-border-303a40);
        background:var(--theme-role-surface-0b1013);
    }

    .ranking-mobile-compare-tabs button{
        min-height:46px;
        border:0;
        border-right:1px solid var(--theme-role-border-303a40);
        background:var(--theme-role-surface-0b1013);
        color:var(--theme-role-text-8d989e);
        font-size:12px;
        font-weight:950;
        font-style:italic;
        letter-spacing:.25px;
        cursor:pointer;
    }

    .ranking-mobile-compare-tabs button:last-child{
        border-right:0;
    }

    .ranking-mobile-compare-tabs button.active{
        position:relative;
        color:var(--theme-role-text-fff);
        background:var(--theme-role-surface-11181c);
    }

    .ranking-mobile-compare-tabs button.active::after{
        content:"";
        position:absolute;
        left:18%;
        right:18%;
        bottom:-1px;
        height:4px;
        background:var(--theme-role-surface-dfff00);
    }

    /*
     * Only one ranking panel is visible at a time on mobile.
     * Your Ranking is the default.
     */
    .ranking-mobile-tabs-shell [data-ranking-mobile-panel]{
        display:none !important;
        width:100% !important;
        max-width:none !important;
        margin:0 !important;
        box-sizing:border-box !important;
    }

    .ranking-mobile-tabs-shell [data-ranking-mobile-panel].is-mobile-active{
        display:block !important;
    }

    /*
     * Fix the current narrower Your Ranking list.
     * Make panel, list and rows use the same full width as Official.
     */
    .ranking-mobile-tabs-shell .your-ranking,
    .ranking-mobile-tabs-shell .public-ranking,
    .ranking-mobile-tabs-shell .ranking-list,
    .ranking-mobile-tabs-shell .public-list{
        width:100% !important;
        max-width:none !important;
        box-sizing:border-box !important;
    }

    .ranking-mobile-tabs-shell .your-ranking{
        padding-left:12px !important;
        padding-right:12px !important;
    }

    .ranking-mobile-tabs-shell .ranking-list{
        margin-left:0 !important;
        margin-right:0 !important;
        padding-left:0 !important;
        padding-right:0 !important;
    }

    .ranking-mobile-tabs-shell .rank-row{
        width:100% !important;
        max-width:none !important;
        box-sizing:border-box !important;
    }

    /*
     * Match the public list's visual footprint more closely.
     */
    .ranking-mobile-tabs-shell .public-ranking .panel-title-row,
    .ranking-mobile-tabs-shell .your-ranking .panel-title-row{
        margin-top:0 !important;
    }

    .ranking-mobile-tabs-shell .public-ranking{
        padding-top:12px !important;
    }
}



/* BattleRanker V3.25 — seamless mobile Your Ranking / Official comparison */
@media (max-width:760px){

    /* --------------------------------------------------------------
       Joined bold comparison tabs, matching the supplied mock.
       -------------------------------------------------------------- */
    .ranking-mobile-compare-tabs{
        display:grid !important;
        grid-template-columns:1.08fr .92fr;
        width:100%;
        margin:0 0 14px;
        padding:0;
        border:0 !important;
        background:transparent !important;
        overflow:visible;
    }

    .ranking-mobile-compare-tabs button{
        position:relative;
        min-height:66px;
        padding:0 24px;
        border:0 !important;
        background:var(--theme-role-surface-1e4cff) !important;
        color:var(--theme-role-text-dfff00) !important;
        font-size:18px;
        font-weight:950;
        font-style:italic;
        line-height:1;
        letter-spacing:-.2px;
        text-align:center;
        clip-path:polygon(0 0, 92% 0, 100% 50%, 92% 100%, 0 100%, 8% 50%);
    }

    .ranking-mobile-compare-tabs button:first-child{
        clip-path:polygon(0 0, 92% 0, 100% 50%, 92% 100%, 0 100%, 4% 50%);
        margin-right:-14px;
        z-index:2;
    }

    .ranking-mobile-compare-tabs button:last-child{
        padding-left:34px;
        z-index:1;
    }

    .ranking-mobile-compare-tabs button.active{
        background:var(--theme-role-surface-dfff00) !important;
        color:var(--theme-role-text-0a0e10) !important;
        z-index:3;
    }

    .ranking-mobile-compare-tabs button.active::after{
        display:none !important;
    }

    /* --------------------------------------------------------------
       Both panels occupy the exact same footprint.
       -------------------------------------------------------------- */
    .ranking-mobile-tabs-shell{
        width:100% !important;
        max-width:none !important;
        padding-left:0 !important;
        padding-right:0 !important;
    }

    .ranking-mobile-tabs-shell [data-ranking-mobile-panel]{
        width:100% !important;
        max-width:none !important;
        margin:0 !important;
        box-sizing:border-box !important;
    }

    .ranking-mobile-tabs-shell .your-ranking,
    .ranking-mobile-tabs-shell .public-ranking{
        width:100% !important;
        max-width:none !important;
        margin:0 !important;
        padding:14px 14px 16px !important;
        border:1px solid var(--theme-role-border-364148) !important;
        border-top:4px solid var(--theme-role-border-dfff00) !important;
        border-radius:14px !important;
        background:var(--theme-role-surface-0d1215) !important;
        box-sizing:border-box !important;
    }

    /* --------------------------------------------------------------
       Hide panel-specific heading furniture so changing tabs feels like
       changing the same list, not navigating to a different component.
       -------------------------------------------------------------- */
    .public-ranking .panel-title-row,
    .public-ranking .ranking-context-title-public,
    .public-ranking .ranking-battle-teaser{
        display:none !important;
    }

    .your-ranking .panel-title-row{
        display:flex !important;
        margin:0 0 10px !important;
        padding:0 !important;
        border-bottom:1px solid var(--theme-role-border-333d43) !important;
    }

    .your-ranking .panel-title-row .panel-title{
        display:none !important;
    }

    .your-ranking .reset-btn{
        margin-left:auto !important;
        min-height:38px !important;
    }

    .mobile-ranking-simple-help{
        margin:0 0 12px !important;
        color:var(--theme-role-text-9ba4aa) !important;
        font-size:11px !important;
        line-height:1.35 !important;
    }

    /* --------------------------------------------------------------
       Make OFFICIAL list visually mirror YOUR RANKING rows.
       Same card height, image footprint, number placement and spacing.
       -------------------------------------------------------------- */
    .public-ranking .public-list,
    .your-ranking .ranking-list{
        width:100% !important;
        max-width:none !important;
        margin:0 !important;
        padding:0 !important;
        border:0 !important;
        background:transparent !important;
        box-sizing:border-box !important;
    }

    .public-ranking .public-list{
        list-style:none !important;
    }

    .public-ranking .public-rank-row,
    .your-ranking .rank-row{
        display:grid !important;
        grid-template-columns:68px 110px minmax(0,1fr) 64px !important;
        align-items:center !important;
        gap:10px !important;
        width:100% !important;
        min-height:124px !important;
        margin:0 0 8px !important;
        padding:10px !important;
        border:1px solid var(--theme-role-border-354047) !important;
        border-radius:10px !important;
        background:var(--theme-role-surface-11181d) !important;
        box-sizing:border-box !important;
        overflow:hidden !important;
    }

    .public-ranking .public-rank-row:last-child,
    .your-ranking .rank-row:last-child{
        margin-bottom:0 !important;
    }

    /* Number column */
    .public-ranking .public-pos,
    .your-ranking .personal-position{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        width:68px !important;
        min-width:68px !important;
        color:var(--theme-role-text-dfff00) !important;
        font-size:31px !important;
        font-weight:950 !important;
        font-style:italic !important;
        line-height:1 !important;
        text-align:center !important;
        white-space:nowrap !important;
    }

    .your-ranking .personal-position .position-number::before{
        content:"#";
    }

    /* Thumbnail column */
    .public-ranking .public-thumb,
    .your-ranking .thumb{
        display:block !important;
        width:110px !important;
        height:100px !important;
        min-width:110px !important;
        min-height:100px !important;
        margin:0 !important;
        border:1px solid var(--theme-role-border-4a565d) !important;
        border-radius:6px !important;
        overflow:hidden !important;
        background:var(--theme-role-surface-242d32) !important;
        box-sizing:border-box !important;
    }

    .public-ranking .public-thumb img,
    .your-ranking .thumb img{
        width:100% !important;
        height:100% !important;
        object-fit:cover !important;
    }

    /* Copy column */
    .public-ranking .public-name,
    .your-ranking .item-copy{
        display:block !important;
        min-width:0 !important;
        padding:0 !important;
        margin:0 !important;
    }

    .public-ranking .public-name strong,
    .your-ranking .item-copy h3{
        display:block !important;
        margin:0 !important;
        color:var(--theme-role-text-fff) !important;
        font-size:18px !important;
        font-weight:900 !important;
        line-height:1.08 !important;
    }

    .public-ranking .public-name strong a,
    .your-ranking .item-copy h3 a{
        color:var(--theme-role-text-fff) !important;
        text-decoration:none !important;
    }

    .public-ranking .public-entry-context,
    .your-ranking .ranking-entry-context{
        display:none !important;
    }

    .public-ranking .public-entry-meta,
    .your-ranking .ranking-entry-meta{
        display:block !important;
        margin-top:4px !important;
        color:var(--theme-role-text-7f8a90) !important;
        font-size:9px !important;
        font-weight:800 !important;
        text-transform:uppercase !important;
        line-height:1.2 !important;
    }

    /* Right column: manual arrows vs a quiet placeholder on Official */
    .your-ranking .move-controls{
        display:grid !important;
        gap:6px !important;
        width:54px !important;
        margin-left:auto !important;
    }

    .public-ranking .movement{
        display:block !important;
        width:54px !important;
        min-width:54px !important;
        color:var(--theme-role-text-5f6a70) !important;
        text-align:center !important;
        font-size:16px !important;
    }

    .your-ranking .move-btn{
        width:54px !important;
        min-width:54px !important;
        height:42px !important;
        min-height:42px !important;
    }

    /* Hide drag handle on mobile to keep the exact same four-column layout. */
    .your-ranking .drag-handle{
        display:none !important;
    }

    /* Your-ranking save control remains beneath the same-size list. */
    .your-ranking .manual-save-wrap{
        width:100% !important;
        margin:12px 0 0 !important;
    }

    /* On very small mobiles, trim dimensions but keep both views identical. */
    @media (max-width:430px){
        .ranking-mobile-compare-tabs button{
            min-height:60px;
            padding-left:14px;
            padding-right:14px;
            font-size:16px;
        }

        .public-ranking .public-rank-row,
        .your-ranking .rank-row{
            grid-template-columns:52px 86px minmax(0,1fr) 48px !important;
            gap:8px !important;
            min-height:104px !important;
            padding:8px !important;
        }

        .public-ranking .public-pos,
        .your-ranking .personal-position{
            width:52px !important;
            min-width:52px !important;
            font-size:27px !important;
        }

        .public-ranking .public-thumb,
        .your-ranking .thumb{
            width:86px !important;
            min-width:86px !important;
            height:86px !important;
            min-height:86px !important;
        }

        .public-ranking .public-name strong,
        .your-ranking .item-copy h3{
            font-size:16px !important;
        }

        .public-ranking .movement,
        .your-ranking .move-controls,
        .your-ranking .move-btn{
            width:46px !important;
            min-width:46px !important;
        }

        .your-ranking .move-btn{
            height:38px !important;
            min-height:38px !important;
        }
    }
}



/* BattleRanker V3.26 — tabs inside card, no reset, no LIST/BATTLE strip */
@media (max-width:760px){

    /* Separate page-level LIST / BATTLE control is gone on mobile. */
    .ranking-mobile-mode-switch,
    .ranking-mobile-mode-switch-top{
        display:none !important;
        border:0 !important;
    }

    /* Reset adds clutter on mobile; remove it entirely. */
    .your-ranking .reset-btn{
        display:none !important;
    }

    /* Old title-row furniture is no longer needed in either tab. */
    .your-ranking .panel-title-row,
    .public-ranking .panel-title-row{
        display:none !important;
    }

    /*
     * Tabs now sit INSIDE each ranking card and are the first thing the user
     * sees. Pull them neatly to the card edges.
     */
    .your-ranking .ranking-mobile-compare-tabs,
    .public-ranking .ranking-mobile-compare-tabs{
        margin:0 0 14px !important;
    }

    .your-ranking,
    .public-ranking{
        padding-top:14px !important;
    }

    .mobile-ranking-simple-help{
        margin:0 0 12px !important;
    }

    /*
     * Avoid any leftover lime underline/spacing from the deleted page-level
     * switch.
     */
    .ranking-mobile-tabs-shell{
        margin-top:0 !important;
    }
}



/* BattleRanker V3.27 — desktop ranking page cleanup */
@media (min-width:761px){
    .your-ranking .battle-mode-tabs,
    .your-ranking .ranking-help-strong,
    .your-ranking .save-line,
    .your-ranking .ranking-context-title{
        display:none !important;
    }

    .your-ranking .desktop-save-ranking{
        display:inline-flex !important;
        align-items:center;
        justify-content:center;
        min-width:96px;
        min-height:38px;
        padding:0 16px;
        border:1px solid var(--theme-role-border-dfff00);
        background:var(--theme-role-surface-dfff00);
        color:var(--theme-role-text-071006);
        font-size:10px;
        font-weight:950;
        font-style:italic;
        cursor:pointer;
    }

    .your-ranking .desktop-save-ranking:disabled{
        opacity:.72;
        cursor:default;
    }

    .desktop-start-battle{
        display:flex !important;
        align-items:center;
        justify-content:space-between;
        gap:18px;
        min-height:58px;
        padding:0 24px;
        border:1px solid var(--theme-role-border-39444a);
        background:var(--theme-role-surface-10161a);
        color:var(--theme-role-text-dfff00);
        text-decoration:none;
        box-sizing:border-box;
    }

    .desktop-start-battle strong{
        color:var(--theme-role-text-dfff00) !important;
        font-size:30px !important;
        line-height:1 !important;
        font-weight:950 !important;
        font-style:italic !important;
    }

    .desktop-start-battle span{
        color:var(--theme-role-text-dfff00) !important;
        font-size:28px !important;
        line-height:1 !important;
    }

    .desktop-start-battle small{
        display:none !important;
    }

    .desktop-start-battle:hover{
        border-color:var(--theme-role-border-dfff00);
        background:var(--theme-role-surface-141c20);
    }

    .your-ranking .ranking-list{
        margin-top:10px !important;
    }
}

@media (max-width:760px){
    .desktop-start-battle,
    .desktop-save-ranking{
        display:none !important;
    }
}

/* Valid rule retained after removing four browser-inactive nested style units. */
.personal-ranking-badge{display:inline-flex;margin:0 0 9px;padding:6px 9px;border:1px solid var(--theme-role-border-dfff00);border-radius:4px;background:var(--theme-role-surface-141a32);color:var(--theme-role-text-dfff00);font-size:8px;font-weight:1000;letter-spacing:.05em}

/* Former inline stylesheet 2. */
.save-state-button{
    font:inherit;
}
.save-state-button.top-save-ready{
    border-color:var(--theme-role-border-111);
    background:var(--theme-role-surface-dfff00);
    color:var(--theme-role-text-111);
    cursor:pointer;
    opacity:1;
}
.save-state-button.top-save-ready:hover{
    background:var(--theme-role-surface-111);
    color:var(--theme-role-text-fff);
}
.save-state-button:disabled{
    cursor:default;
}

/* Former inline stylesheet 3. */
.save-toast{
    position:fixed;
    right:18px;
    bottom:18px;
    z-index:9999;
    min-width:110px;
    padding:10px 14px;
    border:2px solid var(--theme-role-border-111);
    background:var(--theme-role-surface-111);
    color:var(--theme-role-text-fff);
    font:inherit;
    font-size:12px;
    font-weight:1000;
    letter-spacing:.02em;
    text-align:center;
    box-shadow:4px 4px 0 var(--theme-role-shadow-rgba-0-0-0-18-09884d);
    opacity:0;
    transform:translateY(8px);
    pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
}
.save-toast.is-visible{
    opacity:1;
    transform:translateY(0);
}
.save-toast.is-saved{
    background:var(--theme-role-surface-dfff00);
    color:var(--theme-role-text-111);
}
.save-toast.is-error{
    background:var(--theme-role-surface-fff);
    color:var(--theme-role-text-b00020);
    border-color:var(--theme-role-border-b00020);
}
@media(max-width:760px){
    .save-toast{
        right:12px;
        bottom:12px;
        left:12px;
        min-width:0;
    }
}

/* Former inline stylesheet 4. */
/* BattleRanker V3.20 — mobile LIST / BATTLE ranking switch */
.ranking-mobile-mode-switch{display:none}
.mobile-manual-ranking-kicker{display:none}

@media (max-width:760px){
    .mobile-manual-ranking-kicker{
        display:block;
        margin:0 0 10px;
        color:var(--theme-role-text-dfff00);
        font-size:10px;
        font-weight:900;
        font-style:italic;
        letter-spacing:.6px;
    }
    .ranking-mobile-mode-switch{
        display:grid;
        grid-template-columns:1fr 1fr;
        width:100%;
        min-height:44px;
        margin:0;
        border-top:1px solid var(--theme-role-border-30363b);
        border-bottom:2px solid var(--theme-role-border-dfff00);
        background:var(--theme-role-surface-0b0f12);
    }

    .ranking-mobile-mode-switch a,
    .ranking-mobile-mode-switch span{
        position:relative;
        display:flex;
        align-items:center;
        justify-content:center;
        min-height:44px;
        color:var(--theme-role-text-c9cdd0);
        font-size:13px;
        font-weight:900;
        font-style:italic;
        letter-spacing:.45px;
        text-decoration:none;
    }

    .ranking-mobile-mode-switch a:active{
        background:var(--theme-role-surface-141a1e);
    }

    .ranking-mobile-mode-switch .active{
        color:var(--theme-role-text-fff);
    }

    .ranking-mobile-mode-switch .active::after{
        content:"";
        position:absolute;
        left:18%;
        right:18%;
        bottom:-2px;
        height:4px;
        background:var(--theme-role-surface-dfff00);
    }

    /*
     * LIST means the actual public ranking on mobile.
     * Put Britain's/public ranking first, with manual Your Ranking below it.
     */
    .ranking-layout{
        display:flex !important;
        flex-direction:column !important;
    }

    .ranking-layout .public-ranking{
        order:1;
    }

    .ranking-layout .your-ranking{
        order:2;
    }

    /*
     * The new LIST / BATTLE switch replaces the old inner
     * RANK THE LIST / BATTLES tabs on mobile.
     */
    .your-ranking .battle-mode-tabs{
        display:none !important;
    }

    .public-ranking .ranking-mobile-mode-switch{
        margin:0 0 12px 0;
    }
}

/* Former inline stylesheet 5. */
/* BattleRanker V3.26.1 — final mobile Official cleanup */
@media (max-width:760px){
    .public-ranking .public-title-row{
        display:flex !important;
        min-height:0 !important;
        margin:0 0 10px !important;
        padding:0 !important;
        border:0 !important;
        box-shadow:none !important;
        background:transparent !important;
    }

    .public-ranking .public-title-row .panel-title,
    .public-ranking .public-title-row .black-tab{
        display:none !important;
    }

    .public-ranking .public-title-row::before,
    .public-ranking .public-title-row::after{
        display:none !important;
        content:none !important;
    }

    .public-ranking .based-on{
        width:100% !important;
        margin:0 !important;
        padding:0 !important;
        border:0 !important;
        text-align:left !important;
    }
}

/* Former inline stylesheet 6. */
/* BattleRanker V3.27.3 — definitive desktop button styling */
@media (min-width:761px){

    /* SAVE: force a quiet dark treatment */
    button.desktop-save-ranking,
    .your-ranking button.desktop-save-ranking,
    .your-ranking .reset-btn.desktop-save-ranking{
        background:var(--theme-role-surface-161d21) !important;
        color:var(--theme-role-text-ffffff) !important;
        border:1px solid var(--theme-role-border-4b565d) !important;
        box-shadow:none !important;
        text-shadow:none !important;
        filter:none !important;
        transform:none !important;
        clip-path:none !important;
        font-size:11px !important;
        font-weight:900 !important;
        font-style:normal !important;
    }

    button.desktop-save-ranking:hover,
    .your-ranking button.desktop-save-ranking:hover{
        background:var(--theme-role-surface-20292e) !important;
        color:var(--theme-role-text-ffffff) !important;
        border-color:var(--theme-role-border-6b7880) !important;
    }

    button.desktop-save-ranking:disabled,
    .your-ranking button.desktop-save-ranking:disabled{
        background:var(--theme-role-surface-11171a) !important;
        color:var(--theme-role-text-9aa3a8) !important;
        border-color:var(--theme-role-border-343d42) !important;
        opacity:1 !important;
    }

    /* START BATTLE: larger, bolder, still plain text */
    a.desktop-start-battle{
        color:var(--theme-role-text-dfff00) !important;
        font-size:28px !important;
        font-weight:950 !important;
        font-style:italic !important;
        letter-spacing:-.5px !important;
        line-height:1 !important;
    }
}

/* Former inline stylesheet 7. */
/* BattleRanker V3.27.5 — remove stray desktop VS badge */
@media (min-width:761px){
    .your-ranking .vs-orb,
    .your-ranking .vs-badge,
    .your-ranking .battle-vs,
    .your-ranking .vs-circle,
    .your-ranking .ranking-vs,
    .your-ranking .battle-mode-vs,
    .your-ranking [class*="vs-"],
    .your-ranking [class*="-vs"]{
        display:none !important;
    }
}

/* Former inline stylesheet 8. */
/* BattleRanker V3.27.6 — remove the actual generated desktop panel VS */
@media (min-width:761px){
    .ranking-layout::before,
    .ranking-layout::after,
    .ranking-layout .your-ranking::before,
    .ranking-layout .your-ranking::after,
    .ranking-layout .public-ranking::before,
    .ranking-layout .public-ranking::after{
        content:none !important;
    }
}

/* Former inline stylesheet 9. */
.post-create-image-warning{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:14px;
    margin-bottom:14px;
    padding:14px 16px;
    border:2px solid var(--theme-role-border-d6a400);
    background:var(--theme-role-surface-fff6cf);
    color:var(--theme-role-text-211d11);
    font-weight:700;
    line-height:1.45;
    box-sizing:border-box;
}
.post-create-image-warning strong{flex:0 0 auto;}
.post-create-image-warning span{flex:1 1 auto;}
.post-create-image-warning a{
    flex:0 0 auto;
    font-weight:900;
    color:var(--theme-role-text-111);
}
@media (max-width:760px){
    .post-create-image-warning{
        align-items:flex-start;
        flex-direction:column;
        gap:6px;
        margin-top:10px;
        margin-bottom:10px;
    }
}

/* Former inline stylesheet 10. */
/* Battle-only personal ranking, Aug 2026 */
.your-ranking .personal-battle-summary{
    margin:0 0 16px;
    padding:16px 18px;
    border:1px solid var(--theme-role-border-2c3b63);
    background:linear-gradient(180deg,var(--theme-role-surface-121a33) 0%,var(--theme-role-surface-0c1328) 100%);
    box-shadow:0 8px 24px var(--theme-role-shadow-rgba-0-0-0-18-09884d);
}
.your-ranking .personal-battle-kicker{
    display:block;
    font-size:12px;
    font-weight:950;
    letter-spacing:1.2px;
    margin-bottom:5px;
    color:var(--theme-role-text-dfff00);
}
.your-ranking .personal-battle-summary strong{
    display:block;
    font-size:18px;
    line-height:1.15;
    color:var(--theme-role-text-ffffff);
}
.your-ranking .personal-battle-summary p{
    margin:7px 0 0;
    line-height:1.4;
    color:var(--theme-role-text-c8d2e3);
}
.your-ranking .personal-battle-start{
    display:inline-flex;
    margin-top:12px;
    padding:10px 14px;
    background:var(--theme-role-surface-dfff00);
    color:var(--theme-role-text-101418);
    text-decoration:none;
    font-weight:950;
}
.your-ranking .personal-battle-ranking .rank-row{cursor:default;grid-template-columns:68px 110px minmax(0,1fr) !important;column-gap:16px !important;row-gap:12px !important;}
.your-ranking .personal-battle-ranking .personal-position{grid-column:1 !important;grid-row:1 !important;}
.your-ranking .personal-battle-ranking .thumb{grid-column:2 !important;grid-row:1 !important;justify-self:start !important;}
.your-ranking .personal-battle-ranking .item-copy{grid-column:3 !important;grid-row:1 !important;align-self:center !important;min-width:0 !important;position:relative !important;z-index:2 !important;}
.your-ranking .personal-battle-ranking .item-copy h3{margin:0 0 4px !important;}
.your-ranking .personal-battle-ranking .position-number::before{content:none !important;}
.your-ranking .personal-battle-ranking .move-controls,
.your-ranking .personal-battle-ranking .drag-handle{display:none !important;}
.not-yet-battled{
    margin-top:18px;
    padding:16px 18px;
    border:1px solid var(--theme-role-border-2c3b63);
    background:linear-gradient(180deg,var(--theme-role-surface-11182f) 0%,var(--theme-role-surface-0c1224) 100%);
}
.not-yet-battled-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:10px;}
.not-yet-battled-head span{font-size:12px;font-weight:950;letter-spacing:1px;color:var(--theme-role-text-dfff00);}
.not-yet-battled-head strong{font-size:12px;color:var(--theme-role-text-b4bfd2);}
.not-yet-battled-items{display:flex;flex-wrap:wrap;gap:7px;}
.not-yet-battled-items span{
    display:inline-block;
    padding:6px 9px;
    border:1px solid var(--theme-role-border-34456d);
    background:var(--theme-role-surface-16203d);
    color:var(--theme-role-text-ffffff);
    font-size:12px;
    font-weight:800;
}
.not-yet-battled-note{
    margin:0 0 10px;
    color:var(--theme-role-text-b4bfd2);
    font-size:12px;
    line-height:1.4;
}
@media(max-width:760px){
    .your-ranking .personal-battle-summary{margin:0 12px 12px;padding:14px;}
    .not-yet-battled{margin:14px 12px 0;padding:14px;}
    .your-ranking .personal-battle-ranking .rank-row{grid-template-columns:42px 58px minmax(0,1fr) !important;column-gap:10px !important;}
    .your-ranking .personal-battle-ranking .personal-position{grid-column:1 !important;grid-row:1 !important;}
    .your-ranking .personal-battle-ranking .thumb{grid-column:2 !important;grid-row:1 !important;}
    .your-ranking .personal-battle-ranking .item-copy{grid-column:3 !important;grid-row:1 !important;}
}

/* Isolate battle-only rows from the legacy manual-ranking grid rules. */
html body .your-ranking .personal-battle-ranking .rank-row{
    display:flex !important;
    align-items:center !important;
    gap:16px !important;
}
html body .your-ranking .personal-battle-ranking .personal-position{
    flex:0 0 68px !important;
    width:68px !important;
    min-width:68px !important;
    max-width:68px !important;
    margin:0 !important;
    padding:0 !important;
}
html body .your-ranking .personal-battle-ranking .thumb{
    position:relative !important;
    flex:0 0 110px !important;
    width:110px !important;
    min-width:110px !important;
    max-width:110px !important;
    height:100px !important;
    min-height:100px !important;
    max-height:100px !important;
    margin:0 !important;
}
html body .your-ranking .personal-battle-ranking .item-copy{
    position:relative !important;
    flex:1 1 auto !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 12px 0 0 !important;
    overflow:visible !important;
}
@media(max-width:760px){
    html body .your-ranking .personal-battle-ranking .rank-row{
        gap:10px !important;
    }
    html body .your-ranking .personal-battle-ranking .personal-position{
        flex-basis:42px !important;
        width:42px !important;
        min-width:42px !important;
        max-width:42px !important;
    }
    html body .your-ranking .personal-battle-ranking .thumb{
        flex-basis:58px !important;
        width:58px !important;
        min-width:58px !important;
        max-width:58px !important;
        height:58px !important;
        min-height:58px !important;
        max-height:58px !important;
    }
    html body .your-ranking .personal-battle-ranking .item-copy{
        padding-right:4px !important;
    }
}

/* Former inline stylesheet 11. */
/* BattleRanker V3.28 — large Official / Your Ranking view tabs */
@media (min-width:761px){
    .theme-ranking-electric .ranking-view-tabs{
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        min-height:96px !important;
        border:1px solid var(--theme-role-border-434b68) !important;
        border-radius:12px 12px 0 0 !important;
        background:var(--theme-role-surface-0e142b) !important;
        overflow:hidden !important;
    }

    .theme-ranking-electric .ranking-view-tabs button{
        position:relative !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:flex-start !important;
        justify-content:center !important;
        gap:7px !important;
        min-height:96px !important;
        padding:17px 28px 18px !important;
        border:0 !important;
        border-right:1px solid var(--theme-role-border-39415d) !important;
        border-radius:0 !important;
        background:var(--theme-role-surface-0e142b) !important;
        color:var(--theme-role-text-8f99b2) !important;
        text-align:left !important;
        cursor:pointer !important;
        transition:background .16s ease,color .16s ease !important;
    }

    .theme-ranking-electric .ranking-view-tabs button:last-child{
        border-right:0 !important;
    }

    .theme-ranking-electric .ranking-view-tabs button:hover{
        background:var(--theme-role-surface-121a35) !important;
        color:var(--theme-role-text-dce2f1) !important;
    }

    .theme-ranking-electric .ranking-view-tab-title{
        display:flex !important;
        align-items:center !important;
        gap:10px !important;
        color:inherit !important;
        font-family:"Arial Narrow","Segoe UI",Arial,sans-serif !important;
        font-size:22px !important;
        line-height:1 !important;
        font-style:italic !important;
        font-weight:950 !important;
        letter-spacing:-.02em !important;
    }

    .theme-ranking-electric .ranking-view-tab-icon{
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        width:25px !important;
        color:var(--theme-role-text-79839d) !important;
        font-size:23px !important;
        line-height:1 !important;
        font-style:normal !important;
    }

    .theme-ranking-electric .ranking-view-tab-icon-personal{
        font-size:18px !important;
    }

    .theme-ranking-electric .ranking-view-tab-subtitle{
        display:block !important;
        padding-left:35px !important;
        color:var(--theme-role-text-7f89a1) !important;
        font-family:"Segoe UI",Arial,sans-serif !important;
        font-size:13px !important;
        line-height:1.25 !important;
        font-style:normal !important;
        font-weight:600 !important;
        letter-spacing:0 !important;
    }

    .theme-ranking-electric .ranking-view-tabs button.active{
        background:linear-gradient(180deg,var(--theme-role-surface-151e3a) 0%,var(--theme-role-surface-10172f) 100%) !important;
        color:var(--theme-role-text-ffffff) !important;
    }

    .theme-ranking-electric .ranking-view-tabs button.active .ranking-view-tab-icon{
        color:var(--theme-role-text-dfff00) !important;
    }

    .theme-ranking-electric .ranking-view-tabs button.active .ranking-view-tab-subtitle{
        color:var(--theme-role-text-c1cadc) !important;
    }

    .theme-ranking-electric .ranking-view-tabs button.active::after{
        content:"" !important;
        position:absolute !important;
        left:28px !important;
        right:28px !important;
        bottom:0 !important;
        height:4px !important;
        background:var(--theme-role-surface-dfff00) !important;
    }
}

/* Former inline stylesheet 12. */
/* BattleRanker V3.29 — ranking thumbnails use saved Battle crop + square frames. */
.theme-ranking-electric img.ranking-entry-crop.has-ranking-entry-crop{
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center center !important;
    transform:
        translate(var(--ranking-crop-x,0%),var(--ranking-crop-y,0%))
        scale(var(--ranking-crop-scale,1)) !important;
    transform-origin:center center !important;
}

@media(min-width:761px){
    /* Standard Official rows: square artwork instead of landscape strips. */
    .theme-ranking-electric .public-ranking .public-list > li.has-inline-stats{
        min-height:140px !important;
        grid-template-columns:58px 126px minmax(0,1fr) !important;
    }
    .theme-ranking-electric .public-ranking .public-list > li.has-inline-stats .public-thumb{
        flex:0 0 126px !important;
        width:126px !important;
        min-width:126px !important;
        max-width:126px !important;
        height:126px !important;
        min-height:126px !important;
        max-height:126px !important;
        aspect-ratio:1 / 1 !important;
    }

    /* Champion gets the same square treatment, just with more visual weight. */
    .theme-ranking-electric .public-ranking .public-list > li.is-champion{
        min-height:292px !important;
        grid-template-columns:72px 250px minmax(0,1fr) !important;
    }
    .theme-ranking-electric .public-ranking .public-list > li.is-champion .public-thumb{
        flex:0 0 250px !important;
        width:250px !important;
        min-width:250px !important;
        max-width:250px !important;
        height:250px !important;
        min-height:250px !important;
        max-height:250px !important;
        aspect-ratio:1 / 1 !important;
    }

    /* Your Ranking also uses a true square frame. */
    html body.theme-ranking-electric .your-ranking .personal-battle-ranking .thumb{
        flex:0 0 120px !important;
        width:120px !important;
        min-width:120px !important;
        max-width:120px !important;
        height:120px !important;
        min-height:120px !important;
        max-height:120px !important;
        aspect-ratio:1 / 1 !important;
    }
    html body.theme-ranking-electric .your-ranking .personal-battle-ranking .rank-row{
        min-height:136px !important;
    }
}

@media(max-width:760px){
    .theme-ranking-electric .public-ranking .public-thumb{
        width:86px !important;
        min-width:86px !important;
        max-width:86px !important;
        height:86px !important;
        min-height:86px !important;
        max-height:86px !important;
        aspect-ratio:1 / 1 !important;
    }
    .theme-ranking-electric .public-ranking .public-rank-row{
        grid-template-columns:52px 86px minmax(0,1fr) !important;
        min-height:104px !important;
    }

    html body.theme-ranking-electric .your-ranking .personal-battle-ranking .thumb{
        width:64px !important;
        min-width:64px !important;
        max-width:64px !important;
        height:64px !important;
        min-height:64px !important;
        max-height:64px !important;
        flex-basis:64px !important;
        aspect-ratio:1 / 1 !important;
    }
}