*{box-sizing:border-box}
:root{--bg:var(--theme-raw-080b0e);--panel:var(--theme-raw-0e1318);--line:var(--theme-raw-2e353b);--lime:var(--theme-raw-dfff00);--red:var(--theme-raw-ff174d);--blue:var(--theme-raw-176fff);--muted:var(--theme-raw-a4adb3)}
html{background:var(--bg)}
body{margin:0;background:radial-gradient(circle at 70% 0%,var(--theme-raw-rgba-223-255-0-07-71b46f),transparent 28%),var(--theme-raw-080b0e);color:var(--theme-raw-fff);font-family:Arial,Helvetica,sans-serif}
button,a{font:inherit}.brfeed-header{height:82px;padding:0 28px;border-bottom:2px solid var(--lime);display:flex;align-items:center;gap:32px;background:var(--theme-raw-06080a)}
.brfeed-brand{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:7px;min-width:230px;color:var(--theme-raw-fff);text-decoration:none}
.brfeed-brand .crown{grid-row:1/3;color:var(--lime);font-size:30px;transform:rotate(-8deg)}
.brfeed-brand strong{font-size:29px;line-height:.9;font-style:italic;letter-spacing:-2px}.brfeed-brand strong span{color:var(--lime)}
.brfeed-brand small{font-size:10px;color:var(--theme-raw-bbb);font-weight:700;margin-top:4px}
.brfeed-header nav{margin-left:auto;display:flex;gap:28px}.brfeed-header nav a{color:var(--theme-raw-ddd);text-decoration:none;font-size:12px;font-weight:1000}
.brfeed-header nav a.active,.brfeed-header nav a:hover{color:var(--lime)}
.brfeed-shell{width:min(1420px,calc(100% - 28px));margin:0 auto;padding:30px 0 70px}
.brfeed-top{display:grid;grid-template-columns:.75fr 1.25fr;gap:32px;align-items:end;margin-bottom:18px}
.eyebrow{color:var(--lime);font-size:11px;font-weight:1000;letter-spacing:.08em}.brfeed-top h1{margin:7px 0 0;font-size:clamp(42px,5vw,73px);line-height:.84;letter-spacing:-.055em;font-style:italic;font-weight:1000}
.brfeed-top h1 em{color:var(--lime);font-style:normal}.brfeed-top p{max-width:560px;color:var(--theme-raw-c5cbd0);font-size:14px;font-weight:700}
.mode-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mode-tabs a{min-height:58px;display:flex;align-items:center;justify-content:center;border:2px solid var(--theme-raw-343b41);background:var(--theme-raw-12181d);color:var(--theme-raw-ddd);text-decoration:none;font-size:18px;font-weight:1000;font-style:italic}
.mode-tabs a.active{background:var(--lime);border-color:var(--lime);color:var(--theme-raw-080b0e)}
.battle-stage{overflow:hidden;border:2px solid var(--lime);background:var(--theme-raw-0d1115);box-shadow:0 0 36px var(--theme-raw-rgba-223-255-0-08-30cff5),8px 8px 0 var(--theme-raw-000)}
.battle-topline{min-height:46px;padding:8px 14px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:var(--theme-raw-090c0f);border-bottom:1px solid var(--theme-raw-31373c)}
.battle-topline strong{color:var(--lime);font-size:15px;font-style:italic;text-align:center}.battle-topline a{text-align:right;color:var(--theme-raw-fff);text-decoration:none;font-size:10px;font-weight:1000}.battle-topline a:hover{color:var(--lime)}
.live-pill{justify-self:start;padding:6px 8px;background:var(--theme-raw-df1426);border-radius:4px;font-size:10px;font-weight:1000}
.battle-visual{position:relative;display:grid;grid-template-columns:1fr 1fr;height:clamp(390px,44vw,600px);overflow:hidden}
.battle-side{position:relative;width:100%;height:100%;border:0;padding:0;background:var(--theme-raw-151a1f);overflow:hidden;cursor:pointer}
.battle-image-wrap{position:absolute;inset:0}.battle-side img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .23s ease,filter .23s ease}.battle-side:hover img{transform:scale(1.035);filter:brightness(1.08)}
.image-fallback{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--theme-raw-171d22),var(--theme-raw-090c0f));color:var(--theme-raw-667078);font-size:100px;font-weight:1000}
.battle-side.no-image .image-fallback{display:flex}.battle-side.no-image img{display:none}.shade{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 28%,var(--theme-raw-rgba-0-0-0-08-c5102c) 48%,var(--theme-raw-rgba-0-0-0-9-b27fc3) 100%)}
.battle-copy{position:absolute;left:32px;right:32px;bottom:27px;display:flex;flex-direction:column;align-items:flex-start;text-align:left;pointer-events:none}.battle-side.right .battle-copy{align-items:flex-end;text-align:right}
.battle-copy small{max-width:85%;min-height:13px;color:var(--theme-raw-e0e4e7);font-size:11px;font-weight:800;text-shadow:0 2px 4px var(--theme-raw-000)}.battle-copy strong{margin-top:5px;color:var(--theme-raw-fff);font-size:clamp(31px,4vw,60px);line-height:.95;font-style:italic;font-weight:1000;text-transform:uppercase;text-shadow:0 3px 9px var(--theme-raw-000)}
.battle-copy b{margin-top:9px;padding:5px 8px;background:var(--red);font-size:10px;font-weight:1000;transform:rotate(-1deg)}.battle-side.right .battle-copy b{background:var(--blue);transform:rotate(1deg)}
.bolt{position:absolute;z-index:5;left:50%;top:-8%;bottom:-8%;width:13px;transform:translateX(-50%) rotate(4deg);background:var(--lime);box-shadow:0 0 23px var(--lime);clip-path:polygon(38% 0,100% 0,60% 38%,100% 38%,0 100%,35% 55%,0 55%)}
.vs{position:absolute;z-index:7;left:50%;top:50%;width:115px;height:115px;transform:translate(-50%,-50%) rotate(-3deg);border:5px solid var(--lime);border-radius:50%;background:var(--theme-raw-07090b);display:flex;align-items:center;justify-content:center;font-size:46px;font-style:italic;font-weight:1000;box-shadow:0 0 0 7px var(--theme-raw-rgba-0-0-0-55-41e5a9),0 0 34px var(--theme-raw-rgba-223-255-0-4-7ffe5d)}
.battle-side.picked img{transform:scale(1.045);filter:brightness(1.08) saturate(1.08)}.battle-side.loser img{filter:brightness(.55) saturate(.65)}
.battle-result{padding:13px 16px;background:var(--theme-raw-090c0f);border-top:1px solid var(--theme-raw-30363b)}.result-head{display:flex;justify-content:space-between;gap:15px;margin-bottom:9px;color:var(--theme-raw-aeb7bc);font-size:11px;font-weight:800}.result-head strong{color:var(--theme-raw-fff);font-size:12px}
.result-bar{height:62px;display:flex;overflow:hidden;background:var(--theme-raw-222);border:2px solid var(--theme-raw-050607);box-shadow:0 5px 0 var(--theme-raw-050607)}.result-left,.result-right{display:flex;align-items:center;overflow:hidden;transition:width .72s cubic-bezier(.15,.8,.2,1)}.result-left{width:50%;justify-content:flex-start;padding-left:20px;background:linear-gradient(135deg,var(--theme-raw-ff174d),var(--theme-raw-d50835))}.result-right{width:50%;justify-content:flex-end;padding-right:20px;background:linear-gradient(135deg,var(--theme-raw-176fff),var(--theme-raw-0854c5))}
.result-bar b{font-size:31px;font-style:italic;font-weight:1000}.vote-counts{display:flex;justify-content:space-between;color:var(--theme-raw-9ba4aa);font-size:10px;font-weight:900;margin-top:8px}
.battle-actions{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 16px 18px}.battle-actions>span{color:var(--theme-raw-929ba1);font-size:10px;font-weight:900}.battle-actions button{min-width:250px;min-height:57px;border:3px solid var(--theme-raw-080b0e);background:var(--lime);color:var(--theme-raw-080b0e);font-size:20px;font-style:italic;font-weight:1000;box-shadow:5px 5px 0 var(--theme-raw-000);cursor:pointer;transform:skew(-3deg)}.battle-actions button:hover:not(:disabled){background:var(--theme-raw-fff)}.battle-actions button:disabled{opacity:.25;cursor:not-allowed}
.up-next{margin-top:27px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:15px;padding-bottom:9px;margin-bottom:12px;border-bottom:1px solid var(--theme-raw-30363b)}.section-head>div{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.section-head h2{margin:0;font-size:21px;font-style:italic}.section-head small{color:var(--theme-raw-9ba4aa);font-size:10px}.section-head>b{color:var(--lime);font-size:10px}
.queue{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.queue-card{min-width:0;border:1px solid var(--theme-raw-343b41);background:var(--theme-raw-11171c);overflow:hidden}.queue-card:first-child{border-color:var(--lime);box-shadow:0 0 22px var(--theme-raw-rgba-223-255-0-1-9a8665)}.queue-visual{position:relative;height:155px;display:grid;grid-template-columns:1fr 1fr;background:var(--theme-raw-151a1f)}.queue-half{position:relative;overflow:hidden}.queue-half img{width:100%;height:100%;object-fit:cover}.queue-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--theme-raw-171d22);color:var(--theme-raw-6d777d);font-size:35px;font-weight:1000}.queue-vs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:40px;height:40px;border:2px solid var(--lime);border-radius:50%;background:var(--theme-raw-07090b);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:1000}
.queue-copy{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:9px 10px}.queue-copy strong{font-size:12px;line-height:1.05;text-transform:uppercase}.queue-copy strong:last-child{text-align:right}.queue-meta{display:flex;justify-content:space-between;gap:8px;padding:0 10px 10px;color:var(--theme-raw-90999f);font-size:9px;font-weight:800}.queue-card:first-child .queue-meta b{color:var(--lime)}
.feed-principle{margin-top:27px;border:1px dashed var(--theme-raw-3b4248);padding:14px 16px;display:flex;gap:10px;color:var(--theme-raw-999);font-size:11px}.feed-principle strong{color:var(--lime)}
.feed-empty{padding:40px;border:3px solid var(--theme-raw-222);background:var(--theme-raw-11161a);display:flex;flex-direction:column;gap:10px}.feed-empty strong{font-size:26px;color:var(--lime)}.feed-empty span{color:var(--theme-raw-aaa)}.feed-empty a{color:var(--theme-raw-fff);font-weight:1000}
@media(max-width:980px){.brfeed-header{height:auto;min-height:76px;flex-wrap:wrap;padding:12px 16px}.brfeed-header nav{width:100%;margin:0;justify-content:space-between;gap:8px}.brfeed-top{grid-template-columns:1fr}.queue{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.brfeed-shell{width:calc(100% - 16px);padding-top:18px}.brfeed-brand{min-width:0}.brfeed-header nav a{font-size:10px}.brfeed-top h1{font-size:43px}.mode-tabs a{min-height:48px;font-size:14px}.battle-topline{grid-template-columns:1fr 1fr}.battle-topline strong{display:none}.battle-visual{height:auto;grid-template-columns:1fr}.battle-side{height:270px}.battle-side.right{border-top:4px solid var(--lime)}.bolt{display:none}.vs{width:72px;height:72px;font-size:27px}.battle-copy{left:18px;right:18px;bottom:18px}.battle-copy strong{font-size:31px}.result-bar{height:52px}.result-bar b{font-size:23px}.battle-actions{align-items:stretch;flex-direction:column}.battle-actions button{width:100%;min-width:0}.queue{grid-template-columns:1fr}.queue-visual{height:210px}.feed-principle{flex-direction:column}}


/* V2 — endless feed + skip */
.battle-action-buttons{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
}
.battle-actions .skip-battle{
    min-width:175px;
    min-height:46px;
    border:2px solid var(--theme-raw-4a5258);
    background:var(--theme-raw-12181d);
    color:var(--theme-raw-d4d9dc);
    box-shadow:none;
    font-size:11px;
    font-style:normal;
    transform:none;
}
.battle-actions .skip-battle:hover:not(:disabled){
    border-color:var(--theme-raw-fff);
    background:var(--theme-raw-1d242a);
    color:var(--theme-raw-fff);
}
.battle-actions .skip-battle:disabled{
    opacity:.3;
}
.queue-card.is-loading{
    display:flex;
    min-height:230px;
    align-items:center;
    justify-content:center;
    border-style:dashed;
    color:var(--theme-raw-9aa3aa);
    font-size:11px;
    font-weight:900;
}
.feed-loading-dot{
    width:9px;
    height:9px;
    margin-right:8px;
    border-radius:50%;
    background:var(--lime);
    box-shadow:0 0 13px var(--lime);
    animation:brfeedPulse .75s ease-in-out infinite alternate;
}
@keyframes brfeedPulse{
    from{opacity:.3;transform:scale(.75)}
    to{opacity:1;transform:scale(1.15)}
}
@media(max-width:680px){
    .battle-action-buttons{
        width:100%;
        flex-direction:column-reverse;
        align-items:stretch;
    }
    .battle-actions .skip-battle,
    .battle-actions .battle-next,
    .battle-actions button{
        width:100%;
    }
}


/* V2.1 — mobile floating NEXT BATTLE overlay */
.mobile-next-overlay{
    display:none;
}
@media(max-width:680px){
    .mobile-next-overlay{
        display:block;
        position:fixed;
        left:12px;
        right:12px;
        bottom:12px;
        z-index:120;
        min-height:58px;
        border:3px solid var(--theme-raw-080b0e);
        background:var(--lime);
        color:var(--theme-raw-080b0e);
        font-size:20px;
        font-style:italic;
        font-weight:1000;
        box-shadow:0 6px 0 var(--theme-raw-000), 0 10px 30px var(--theme-raw-rgba-0-0-0-45-70cab9);
        opacity:0;
        pointer-events:none;
        transform:translateY(18px);
        transition:opacity .18s ease, transform .18s ease;
    }
    .mobile-next-overlay b{
        font-size:24px;
    }
    .mobile-next-overlay.is-visible{
        opacity:1;
        pointer-events:auto;
        transform:translateY(0);
    }
    body.has-mobile-next{
        padding-bottom:88px;
    }
}


/* BattleRanker V3.4 — make battle/ranking title the obvious context */
.battle-topline{
    position:relative;
    min-height:60px;
    padding:9px 14px;
    grid-template-columns:1fr minmax(280px,auto) 1fr;
    overflow:visible;
}

.battle-topline strong{
    position:relative;
    z-index:8;
    display:block;
    max-width:min(760px,72vw);
    padding:7px 14px 8px;
    background:var(--lime);
    color:var(--theme-raw-080b0e);
    border:2px solid var(--theme-raw-080b0e);
    box-shadow:3px 3px 0 var(--theme-raw-000);
    font-size:clamp(22px,2.5vw,34px);
    line-height:1;
    letter-spacing:-.025em;
    font-style:normal;
    font-weight:1000;
    text-align:center;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    transform:translateY(4px);
}

@media(max-width:680px){
    .battle-topline{
        min-height:54px;
        grid-template-columns:1fr;
        gap:6px;
        padding:8px 10px 10px;
    }

    .battle-topline .live-pill,
    .battle-topline a{
        display:none;
    }

    .battle-topline strong{
        display:block;
        justify-self:center;
        max-width:100%;
        width:auto;
        padding:6px 10px 7px;
        font-size:clamp(18px,5.7vw,26px);
        line-height:1.02;
        transform:none;
    }
}


/* BattleRanker V3.6 — clearer result payoff + in-flow mobile Next */
.result-head{
    align-items:flex-start;
}

.result-head #resultMessage{
    font-size:14px;
    line-height:1.2;
}

.result-head #resultMeta{
    color:var(--lime);
    font-size:12px;
    line-height:1.2;
    font-weight:1000;
    text-align:right;
}

.battle-stage.has-result .battle-result{
    background:
        linear-gradient(180deg,var(--theme-raw-rgba-223-255-0-035-1f9f0a),transparent 55%),
        var(--theme-raw-090c0f);
}

.battle-stage.has-result .result-head #resultMessage{
    color:var(--theme-raw-fff);
}

.battle-stage.has-result .result-head #resultMeta{
    color:var(--lime);
}

/* Permanently retire the old fixed overlay; it obscured the payoff. */
.mobile-next-overlay{
    display:none !important;
}
body.has-mobile-next{
    padding-bottom:0 !important;
}

@media(max-width:680px){
    .battle-result{
        padding:15px 12px 13px;
    }

    .result-head{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:6px;
        margin-bottom:12px;
    }

    .result-head #resultMessage{
        width:100%;
        font-size:17px;
        line-height:1.15;
    }

    .result-head #resultMeta{
        width:100%;
        font-size:13px;
        line-height:1.25;
        text-align:left;
    }

    .result-bar{
        height:48px;
        box-shadow:none;
    }

    .result-bar b{
        font-size:21px;
    }

    .vote-counts{
        margin-top:7px;
        font-size:9px;
    }

    /*
     * Before a vote: keep Skip available and hide the disabled Next button.
     * After a vote: remove the clutter and turn the ordinary Next button into
     * a large full-width continuation block directly under the result.
     */
    .battle-stage:not(.has-result) #nextBattle{
        display:none;
    }

    .battle-stage.has-result .battle-actions{
        display:block;
        padding:10px 12px 14px;
        background:var(--theme-raw-090c0f);
        border-top:0;
    }

    .battle-stage.has-result #feedProgress,
    .battle-stage.has-result #skipBattle{
        display:none;
    }

    .battle-stage.has-result .battle-action-buttons{
        display:block;
        width:100%;
    }

    .battle-stage.has-result #nextBattle{
        display:flex;
        width:100%;
        min-height:68px;
        margin:0;
        align-items:center;
        justify-content:center;
        border:3px solid var(--theme-raw-080b0e);
        background:var(--lime);
        color:var(--theme-raw-080b0e);
        box-shadow:0 5px 0 var(--theme-raw-000);
        font-size:23px;
        font-style:italic;
        font-weight:1000;
        transform:none;
    }

    .battle-stage.has-result #nextBattle b{
        margin-left:10px;
        font-size:28px;
    }

    .battle-stage.has-result #nextBattle:hover:not(:disabled){
        background:var(--theme-raw-fff);
    }
}


/* BattleRanker V3.7 — swipe-to-next + protected fixed Next + impact toast */

/* Result becomes a deliberate payoff card, not loose text on black. */
.battle-stage.has-result .battle-result{
    position:relative;
    border-top:3px solid var(--lime);
    border-bottom:1px solid var(--theme-raw-394249);
    background:
        radial-gradient(circle at 90% 0,var(--theme-raw-rgba-223-255-0-12-77324d),transparent 34%),
        linear-gradient(135deg,var(--theme-raw-10171c),var(--theme-raw-090d10) 72%);
}

.battle-stage.has-result .result-head{
    margin-bottom:12px;
}

.battle-stage.has-result .result-head #resultMessage{
    color:var(--theme-raw-fff);
    font-size:16px;
}

.battle-stage.has-result .result-head #resultMeta{
    display:inline-block;
    padding:7px 10px;
    border:1px solid var(--theme-raw-rgba-223-255-0-48-cfd935);
    background:var(--theme-raw-rgba-223-255-0-10-0b4a61);
    color:var(--lime);
    font-size:13px;
    font-weight:1000;
    letter-spacing:.015em;
}

/* Ranking impact toast */
.ranking-impact-toast{
    position:fixed;
    z-index:500;
    left:50%;
    top:18%;
    width:min(620px,calc(100% - 28px));
    overflow:hidden;
    padding:18px 22px 19px;
    border:3px solid var(--lime);
    background:
        linear-gradient(135deg,var(--theme-raw-11191e) 0%,var(--theme-raw-080b0e) 76%);
    color:var(--theme-raw-fff);
    box-shadow:
        0 14px 45px var(--theme-raw-rgba-0-0-0-62-cfa90c),
        7px 7px 0 var(--theme-raw-000),
        0 0 36px var(--theme-raw-rgba-223-255-0-22-13ec45);
    opacity:0;
    pointer-events:none;
    transform:translate(-50%,-24px) scale(.96);
    transition:
        opacity .22s ease,
        transform .28s cubic-bezier(.18,.8,.22,1);
}

.ranking-impact-toast.is-visible{
    opacity:1;
    transform:translate(-50%,0) scale(1);
}

.ranking-impact-toast.is-leaving{
    opacity:0;
    transform:translate(-50%,-34px) scale(.98);
}

.ranking-impact-kicker{
    position:relative;
    z-index:2;
    display:block;
    margin-bottom:5px;
    color:var(--lime);
    font-size:11px;
    font-weight:1000;
    letter-spacing:.08em;
}

.ranking-impact-toast strong{
    position:relative;
    z-index:2;
    display:block;
    color:var(--theme-raw-fff);
    font-size:clamp(25px,4vw,40px);
    line-height:.94;
    font-style:italic;
    font-weight:1000;
    text-transform:uppercase;
}

.ranking-impact-toast small{
    position:relative;
    z-index:2;
    display:block;
    margin-top:8px;
    color:var(--theme-raw-c4ccd1);
    font-size:12px;
    font-weight:900;
}

.ranking-impact-shine{
    position:absolute;
    z-index:1;
    top:-55%;
    bottom:-55%;
    left:-36%;
    width:20%;
    background:linear-gradient(
        90deg,
        transparent,
        var(--theme-raw-rgba-255-255-255-04-12b43a),
        var(--theme-raw-rgba-255-255-255-38-3cea3f),
        var(--theme-raw-rgba-223-255-0-22-13ec45),
        var(--theme-raw-rgba-255-255-255-06-08e149),
        transparent
    );
    transform:skewX(-18deg);
}

.ranking-impact-toast.is-visible .ranking-impact-shine{
    animation:brRankingImpactShine 1.15s ease .28s 1 both;
}

@keyframes brRankingImpactShine{
    from{left:-36%}
    to{left:125%}
}

/*
 * Override V3.6: restore the compact fixed mobile Next control.
 * We reserve bottom space while it is visible and automatically nudge the
 * viewport if necessary, so it does not sit over the result.
 */
@media(max-width:680px){
    .battle-stage:not(.has-result) #nextBattle{
        display:flex;
    }

    .battle-stage.has-result .battle-actions{
        display:flex;
        padding:14px 12px 18px;
        background:var(--theme-raw-090c0f);
    }

    .battle-stage.has-result #feedProgress{
        display:block;
    }

    .battle-stage.has-result #skipBattle{
        display:none;
    }

    .battle-stage.has-result .battle-action-buttons{
        display:flex;
        width:auto;
    }

    .battle-stage.has-result #nextBattle{
        display:none;
    }

    .mobile-next-overlay{
        display:block !important;
        position:fixed;
        left:10px;
        right:10px;
        bottom:max(10px,env(safe-area-inset-bottom));
        z-index:220;
        min-height:54px;
        border:2px solid var(--theme-raw-080b0e);
        background:var(--lime);
        color:var(--theme-raw-080b0e);
        box-shadow:0 5px 0 var(--theme-raw-000),0 10px 26px var(--theme-raw-rgba-0-0-0-48-c5c38f);
        opacity:0;
        pointer-events:none;
        transform:translateY(16px);
        transition:opacity .18s ease,transform .18s ease;
        font-size:18px;
        font-style:italic;
        font-weight:1000;
    }

    .mobile-next-overlay::before{
        content:"SWIPE UP  ↑   OR";
        margin-right:10px;
        font-size:9px;
        font-style:normal;
        letter-spacing:.04em;
        opacity:.7;
    }

    .mobile-next-overlay.is-visible{
        opacity:1;
        pointer-events:auto;
        transform:translateY(0);
    }

    body.has-mobile-next{
        padding-bottom:82px !important;
    }

    .battle-stage.has-result .battle-result{
        padding:14px 12px 13px;
    }

    .battle-stage.has-result .result-head #resultMessage{
        font-size:17px;
    }

    .battle-stage.has-result .result-head #resultMeta{
        display:block;
        width:100%;
        padding:9px 10px;
        font-size:13px;
        line-height:1.25;
        text-align:left;
    }

    .ranking-impact-toast{
        top:15%;
        padding:16px 17px 17px;
    }

    .ranking-impact-toast strong{
        font-size:clamp(24px,7.2vw,34px);
    }
}

@media(prefers-reduced-motion:reduce){
    .ranking-impact-toast,
    .mobile-next-overlay{
        transition:none;
    }

    .ranking-impact-toast.is-visible .ranking-impact-shine{
        animation:none;
    }
}


/* BattleRanker V3.8 — stripped-back mobile Battle loop */

/* Dynamic image result overlays; hidden on desktop. */
.mobile-image-result{
    display:none;
}

@media(max-width:680px){

    /*
     * Mobile is intentionally stripped back:
     * title/context + two contenders + their result overlays.
     * Discovery/explanation modules belong on the homepage, not in the loop.
     */
    .brfeed-shell{
        width:100%;
        padding:0 0 24px;
    }

    .brfeed-top,
    .up-next,
    .feed-principle{
        display:none;
    }

    .battle-stage{
        border-left:0;
        border-right:0;
        box-shadow:none;
    }

    .battle-topline{
        min-height:52px;
        padding:7px 8px 9px;
    }

    .battle-topline strong{
        max-width:calc(100vw - 16px);
        font-size:clamp(17px,5vw,24px);
        box-shadow:2px 2px 0 var(--theme-raw-000);
    }

    .battle-visual{
        display:grid;
        grid-template-columns:1fr;
        height:auto;
    }

    .battle-side{
        height:min(36vh,285px);
        min-height:220px;
    }

    .battle-side.right{
        border-top:3px solid var(--lime);
    }

    .battle-copy{
        left:14px;
        right:14px;
        bottom:14px;
    }

    .battle-copy small{
        display:none;
    }

    .battle-copy strong{
        font-size:clamp(27px,8vw,38px);
    }

    .battle-copy b{
        margin-top:7px;
        padding:4px 7px;
        font-size:9px;
    }

    /*
     * Once results are revealed, the small TAP TO PICK chip is unnecessary.
     * Keep contender names, but give the percentages visual priority.
     */
    .battle-side.has-mobile-result .battle-copy b{
        display:none;
    }

    .mobile-image-result{
        position:absolute;
        z-index:20;
        top:50%;
        left:50%;
        width:min(210px,68%);
        min-height:92px;
        padding:12px 14px 11px;
        transform:translate(-50%,-50%) scale(.9);
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        border:2px solid var(--theme-raw-rgba-255-255-255-88-d0d52e);
        background:var(--theme-raw-rgba-4-7-9-82-6df69e);
        color:var(--theme-raw-fff);
        box-shadow:0 8px 28px var(--theme-raw-rgba-0-0-0-48-c5c38f);
        opacity:0;
        pointer-events:none;
        backdrop-filter:blur(3px);
        transition:opacity .22s ease,transform .28s ease;
    }

    .mobile-image-result.is-visible{
        opacity:1;
        transform:translate(-50%,-50%) scale(1);
    }

    .mobile-image-result.is-picked{
        border-color:var(--lime);
        background:var(--theme-raw-rgba-8-11-14-9-bb4f41);
        box-shadow:
            0 8px 28px var(--theme-raw-rgba-0-0-0-48-c5c38f),
            0 0 26px var(--theme-raw-rgba-223-255-0-22-13ec45);
    }

    .mobile-image-result strong{
        font-size:44px;
        line-height:.9;
        font-style:italic;
        font-weight:1000;
    }

    .mobile-image-result small{
        margin-top:7px;
        color:var(--theme-raw-d7dde0);
        font-size:10px;
        line-height:1;
        font-weight:1000;
        letter-spacing:.06em;
    }

    .mobile-image-result.is-picked small{
        color:var(--lime);
    }

    /*
     * The desktop result block remains in the DOM for accessibility and desktop,
     * but mobile gets the result directly on the images instead.
     */
    .battle-result,
    .battle-actions,
    .mobile-next-overlay{
        display:none !important;
    }

    body.has-mobile-next{
        padding-bottom:0 !important;
    }

    /*
     * Give a tiny gesture cue only after a result, without adding another box.
     */
    .battle-stage.has-result::after{
        content:"SWIPE LEFT  ←";
        display:block;
        padding:9px 10px 10px;
        border-top:1px solid var(--theme-raw-30383e);
        background:var(--theme-raw-080b0e);
        color:var(--lime);
        text-align:center;
        font-size:10px;
        font-weight:1000;
        letter-spacing:.12em;
    }

    /*
     * Ranking impact is a celebratory interruption, so it sits centrally and
     * stays long enough to be read. Swiping to the next Battle removes it.
     */
    .ranking-impact-toast{
        top:50%;
        width:calc(100% - 24px);
        padding:20px 18px 21px;
        transform:translate(-50%,-50%) scale(.94);
    }

    .ranking-impact-toast.is-visible{
        transform:translate(-50%,-50%) scale(1);
    }

    .ranking-impact-toast.is-leaving{
        transform:translate(-50%,-56%) scale(.98);
    }

    .ranking-impact-kicker{
        font-size:10px;
    }

    .ranking-impact-toast strong{
        font-size:clamp(28px,8.4vw,40px);
        line-height:.95;
    }

    .ranking-impact-toast small{
        font-size:12px;
        line-height:1.25;
    }
}

@media(max-width:390px){
    .battle-side{
        height:245px;
    }

    .mobile-image-result{
        min-height:82px;
    }

    .mobile-image-result strong{
        font-size:39px;
    }
}


/* BattleRanker V3.8.2 — smarter mobile image crops
   Portrait imagery is biased upward so faces/heads are less likely to be cut off.
   Landscape imagery remains centred. */
@media(max-width:680px){
    .battle-side img.crop-portrait{
        object-position:center 18%;
    }

    .battle-side img.crop-squareish{
        object-position:center 28%;
    }

    .battle-side img.crop-landscape{
        object-position:center center;
    }
}


/* ============================================================
   BattleRanker V3.12 — DESKTOP IMAGE RESULT OVERLAYS
   ============================================================ */

@media(min-width:681px){

    .battle-side{
        isolation:isolate;
    }

    .battle-side.picked-result-side::before,
    .battle-side.other-result-side::before{
        content:"";
        position:absolute;
        inset:0;
        z-index:8;
        pointer-events:none;
        opacity:0;
        animation:brDesktopResultTintIn .28s ease forwards;
    }

    .battle-side.left.picked-result-side::before{
        background:linear-gradient(135deg,var(--theme-raw-rgba-255-20-70-14-abf070),var(--theme-raw-rgba-255-20-70-32-06a9cc));
    }

    .battle-side.right.picked-result-side::before{
        background:linear-gradient(135deg,var(--theme-raw-rgba-0-111-255-14-b64a22),var(--theme-raw-rgba-0-111-255-32-62ca74));
    }

    .battle-side.other-result-side::before{
        background:var(--theme-raw-rgba-0-0-0-28-ca0b96);
    }

    .mobile-image-result{
        position:absolute;
        z-index:22;
        top:50%;
        left:50%;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        width:min(360px,54%);
        min-height:190px;
        padding:22px 24px 20px;
        transform:translate(-50%,-47%) scale(.92);
        border:2px solid var(--lime);
        border-radius:8px;
        background:var(--theme-raw-rgba-5-9-13-84-dbc0bb);
        color:var(--theme-raw-fff);
        box-shadow:0 18px 48px var(--theme-raw-rgba-0-0-0-42-dc1699);
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        backdrop-filter:blur(5px);
        transition:opacity .24s ease,transform .34s cubic-bezier(.2,.8,.2,1),visibility 0s linear .34s;
    }

    .mobile-image-result.is-visible{
        opacity:1;
        visibility:visible;
        transform:translate(-50%,-50%) scale(1);
        transition-delay:0s;
    }

    .battle-side.left .mobile-image-result.is-picked{
        border-color:var(--theme-raw-ff184d);
        background:linear-gradient(135deg,var(--theme-raw-rgba-255-20-70-80-84dc1c),var(--theme-raw-rgba-135-0-38-78-cf47e0));
    }

    .battle-side.right .mobile-image-result.is-picked{
        border-color:var(--theme-raw-37a0ff);
        background:linear-gradient(135deg,var(--theme-raw-rgba-0-110-255-80-17aac6),var(--theme-raw-rgba-0-55-160-78-b00383));
    }

    .mobile-image-result .image-result-kicker{
        display:block;
        margin-bottom:7px;
        color:var(--theme-raw-fff);
        font-size:19px;
        line-height:1;
        font-weight:1000;
        letter-spacing:.015em;
        text-transform:uppercase;
    }

    .mobile-image-result strong{
        display:block;
        color:var(--theme-raw-fff);
        font-size:72px;
        line-height:.86;
        font-weight:1000;
        font-style:italic;
        letter-spacing:-.045em;
        text-shadow:0 3px 10px var(--theme-raw-rgba-0-0-0-2-2bdb97);
    }

    .mobile-image-result small{
        display:block;
        margin-top:10px;
        color:var(--theme-raw-fff);
        font-size:15px;
        line-height:1.15;
        font-weight:900;
        text-align:center;
        text-transform:uppercase;
    }

    .mobile-image-result.is-loser-result{
        width:auto;
        min-width:128px;
        min-height:0;
        padding:13px 17px 12px;
        border:1px solid var(--theme-raw-rgba-255-255-255-56-14589c);
        background:var(--theme-raw-rgba-4-7-10-74-8826d2);
        box-shadow:0 10px 28px var(--theme-raw-rgba-0-0-0-32-78ad00);
    }

    .mobile-image-result.is-loser-result .image-result-kicker{
        display:none;
    }

    .mobile-image-result.is-loser-result strong{
        font-size:43px;
        line-height:.9;
    }

    .mobile-image-result.is-loser-result small{
        margin-top:5px;
        color:var(--theme-raw-c8d0d4);
        font-size:9px;
        letter-spacing:.05em;
    }

    .battle-side.has-mobile-result .battle-copy b{
        display:none;
    }

    @keyframes brDesktopResultTintIn{
        from{opacity:0;}
        to{opacity:1;}
    }
}

@media(max-width:680px){
    .mobile-image-result .image-result-kicker{
        display:block;
        margin-bottom:5px;
        color:var(--theme-raw-fff);
        font-size:9px;
        line-height:1;
        font-weight:1000;
        letter-spacing:.07em;
        text-transform:uppercase;
    }

    .mobile-image-result.is-loser-result .image-result-kicker{
        display:none;
    }
}


/* ============================================================
   BattleRanker V3.12.1 — MOBILE COLOUR RESULT OVERLAYS
   Match desktop visual language while keeping mobile compact.
   ============================================================ */

@media(max-width:680px){

    .battle-side.left .mobile-image-result.is-picked{
        border-color:var(--theme-raw-ff184d);
        background:
            linear-gradient(135deg,var(--theme-raw-rgba-255-20-70-84-24434d),var(--theme-raw-rgba-132-0-36-82-201dfc));
        box-shadow:
            0 8px 28px var(--theme-raw-rgba-0-0-0-48-c5c38f),
            0 0 24px var(--theme-raw-rgba-255-24-77-20-1d2f7a);
    }

    .battle-side.right .mobile-image-result.is-picked{
        border-color:var(--theme-raw-37a0ff);
        background:
            linear-gradient(135deg,var(--theme-raw-rgba-0-110-255-84-f2147f),var(--theme-raw-rgba-0-52-153-82-1a4408));
        box-shadow:
            0 8px 28px var(--theme-raw-rgba-0-0-0-48-c5c38f),
            0 0 24px var(--theme-raw-rgba-55-160-255-20-6bf551);
    }

    .mobile-image-result.is-picked{
        width:min(220px,72%);
        min-height:96px;
        padding:12px 14px 11px;
    }

    .mobile-image-result.is-picked .image-result-kicker{
        display:block;
        margin-bottom:5px;
        color:var(--theme-raw-fff);
        font-size:9px;
        line-height:1;
        font-weight:1000;
        letter-spacing:.07em;
        text-transform:uppercase;
    }

    .mobile-image-result.is-picked strong{
        font-size:43px;
        line-height:.88;
    }

    .mobile-image-result.is-picked small{
        margin-top:7px;
        color:var(--theme-raw-fff);
        font-size:9px;
        line-height:1.05;
        font-weight:1000;
        letter-spacing:.035em;
    }

    /*
     * Non-picked side remains neutral/darker so the user's choice is the
     * obvious focus instead of both images shouting equally.
     */
    .mobile-image-result.is-loser-result{
        width:auto;
        min-width:112px;
        min-height:0;
        padding:10px 13px 9px;
        border-color:var(--theme-raw-rgba-255-255-255-5-8065eb);
        background:var(--theme-raw-rgba-4-7-10-76-8142e6);
        box-shadow:0 7px 22px var(--theme-raw-rgba-0-0-0-36-7bc0bc);
    }

    .mobile-image-result.is-loser-result strong{
        font-size:34px;
        line-height:.9;
    }

    .mobile-image-result.is-loser-result small{
        margin-top:4px;
        color:var(--theme-raw-c9d0d4);
        font-size:8px;
        letter-spacing:.04em;
    }
}


/* ============================================================
   BattleRanker V3.12.6 — SAFE LIGHTNING SEAM
   Images remain untouched 50/50 rectangles.
   The divider masks the straight join instead of clipping imagery.
   ============================================================ */

@media(min-width:681px){
    .battle-side.left,
    .battle-side.right{
        width:100% !important;
        margin:0 !important;
        clip-path:none !important;
    }

    .battle-side.left::after,
    .battle-side.right::after{
        content:none !important;
    }

    .battle-visual{
        grid-template-columns:1fr 1fr !important;
        overflow:hidden;
    }

    .bolt{
        position:absolute;
        z-index:28;
        left:50%;
        top:0;
        bottom:0;
        width:48px;
        transform:translateX(-50%) !important;
        background:none !important;
        box-shadow:none !important;
        clip-path:none !important;
        background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2048%20600%27%20preserveAspectRatio=%27none%27%3E%3Cpolyline%20points=%2725,0%2021,185%2027,185%2019,345%2025,345%2016,600%27%20fill=%27none%27%20stroke=%27%23070a0c%27%20stroke-width=%2718%27%20stroke-linejoin=%27miter%27%20stroke-linecap=%27square%27/%3E%3Cpolyline%20points=%2725,0%2021,185%2027,185%2019,345%2025,345%2016,600%27%20fill=%27none%27%20stroke=%27%23dfff00%27%20stroke-width=%275%27%20stroke-linejoin=%27miter%27%20stroke-linecap=%27square%27/%3E%3C/svg%3E") !important;
        background-repeat:no-repeat !important;
        background-position:center center !important;
        background-size:100% 100% !important;
        pointer-events:none;
    }

    .vs{
        z-index:31;
    }
}


/* ============================================================
   BattleRanker V3.12.7 — ANGLED + TAPERED LIGHTNING
   Keeps the safe overlay seam architecture; restores the drama.
   ============================================================ */

@media(min-width:681px){
    .bolt{
        left:50%;
        top:-1%;
        bottom:-1%;
        width:70px;
        transform:translateX(-50%) !important;
        background:none !important;
        box-shadow:none !important;
        clip-path:none !important;
        background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2070%20600%27%20preserveAspectRatio=%27none%27%3E%3Cpath%20d=%27M47%200%20L42%20180%20L47%20180%20L34%20314%20L37%20314%20L18%20600%27%20fill=%27none%27%20stroke=%27%23070a0c%27%20stroke-width=%2724%27%20stroke-linejoin=%27miter%27%20stroke-linecap=%27square%27/%3E%3Cpath%20d=%27M47%200%20L42%20180%20L47%20180%20L34%20314%27%20fill=%27none%27%20stroke=%27%23dfff00%27%20stroke-width=%278%27%20stroke-linejoin=%27miter%27%20stroke-linecap=%27square%27/%3E%3Cpath%20d=%27M34%20314%20L18%20600%27%20fill=%27none%27%20stroke=%27%23dfff00%27%20stroke-width=%273.2%27%20stroke-linejoin=%27miter%27%20stroke-linecap=%27square%27/%3E%3C/svg%3E") !important;
        background-repeat:no-repeat !important;
        background-position:center center !important;
        background-size:100% 100% !important;
        filter:drop-shadow(0 0 6px var(--theme-raw-rgba-223-255-0-48-cfd935));
    }
}


/* BattleRanker V3.20 — mobile LIST / BATTLE ranking switch */
.mobile-ranking-switch{
    display:none;
}

@media (max-width:760px){
    .mobile-ranking-switch{
        display:none;
        grid-template-columns:1fr 1fr;
        width:100%;
        min-height:44px;
        margin:0;
        border-top:1px solid var(--theme-raw-30363b);
        border-bottom:2px solid var(--theme-raw-dfff00);
        background:var(--theme-raw-0b0f12);
    }

    .mobile-ranking-switch.is-available{
        display:grid;
    }

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

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

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

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


/* BattleRanker V3.21.1 — compact hero, preserve original lime emphasis */
.brfeed-top{
    grid-template-columns:.9fr 1.1fr;
    gap:24px;
    margin-bottom:12px;
}

.brfeed-top h1{
    font-size:clamp(40px,4.4vw,64px);
    line-height:.86;
    margin-top:5px;
}

.brfeed-top h1 .battle-anything-line{
    white-space:nowrap;
}

.brfeed-top p{
    margin-top:8px;
    margin-bottom:0;
}

@media(max-width:680px){
    .brfeed-top{
        grid-template-columns:1fr;
        gap:12px;
        margin-bottom:12px;
    }

    .brfeed-top h1{
        font-size:40px;
    }

    .brfeed-top h1 .battle-anything-line{
        white-space:normal;
    }
}


/* ================================================================
   BattleRanker V3.28 — approved compact desktop Battle layout
   ================================================================ */

/* The old progress / Skip / Next row is intentionally gone. */
.legacy-battle-actions{
    display:none !important;
}

.desktop-next-overlay{
    display:none;
}

@media (min-width:681px){

    /* Much quieter area above the contenders. */
    .brfeed-shell{
        padding-top:12px !important;
    }

    .compact-feed-intro{
        display:grid !important;
        grid-template-columns:minmax(420px,1fr) auto !important;
        align-items:center !important;
        gap:22px !important;
        min-height:54px !important;
        margin:0 0 10px !important;
        padding:0 !important;
    }

    .compact-feed-intro > div:first-child{
        display:flex !important;
        align-items:center !important;
        gap:16px !important;
        min-width:0 !important;
    }

    .compact-feed-intro .eyebrow{
        display:none !important;
    }

    .compact-feed-intro h1{
        flex:0 0 auto !important;
        margin:0 !important;
        font-size:21px !important;
        line-height:1 !important;
        letter-spacing:-.35px !important;
        white-space:nowrap !important;
    }

    .compact-feed-intro h1 br{
        display:none !important;
    }

    .compact-feed-intro h1 em{
        color:inherit !important;
    }

    .compact-feed-intro h1 em::before{
        content:" ";
    }

    .compact-feed-intro p{
        min-width:0 !important;
        margin:0 !important;
        color:var(--theme-raw-929da3) !important;
        font-size:10px !important;
        font-weight:700 !important;
        line-height:1.25 !important;
        white-space:nowrap !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
    }

    .compact-feed-intro .mode-tabs{
        width:auto !important;
        min-width:360px !important;
        margin:0 !important;
        gap:8px !important;
    }

    .compact-feed-intro .mode-tabs a{
        min-width:174px !important;
        min-height:42px !important;
        padding:0 18px !important;
        font-size:13px !important;
    }

    /* Card heading is compact, but the ranking remains obvious. */
    .battle-topline{
        min-height:46px !important;
        padding:6px 12px !important;
    }

    .battle-topline strong{
        font-size:24px !important;
        line-height:1 !important;
    }

    .battle-topline .live-pill{
        font-size:9px !important;
    }

    .battle-topline a{
        font-size:9px !important;
    }

    /* Gain more of the screen back without shrinking the photography too far. */
    .battle-visual{
        height:min(470px,56vh) !important;
    }

    .battle-side.right{
        position:relative !important;
    }

    /*
     * Appears only after all result / ranking-impact reporting has finished.
     * This replaces the old lower NEXT button.
     */
    .desktop-next-overlay{
        position:absolute !important;
        right:22px !important;
        bottom:24px !important;
        z-index:60 !important;
        min-width:190px !important;
        min-height:56px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        padding:0 22px !important;
        border:2px solid var(--theme-raw-dfff00) !important;
        background:var(--theme-raw-dfff00) !important;
        color:var(--theme-raw-090d0f) !important;
        font-size:17px !important;
        font-weight:1000 !important;
        font-style:italic !important;
        line-height:1 !important;
        box-shadow:0 6px 0 var(--theme-raw-rgba-0-0-0-72-551182) !important;
        opacity:0 !important;
        pointer-events:none !important;
        transform:translateY(10px) !important;
        transition:opacity .18s ease,transform .18s ease !important;
    }

    .desktop-next-overlay.is-visible{
        opacity:1 !important;
        pointer-events:auto !important;
        transform:translateY(0) !important;
    }

    .desktop-next-overlay:hover{
        filter:brightness(1.04);
    }

    /* The queue now follows the battle immediately. */
    .up-next{
        margin-top:12px !important;
        padding-top:0 !important;
    }

    .up-next .section-head{
        margin-bottom:8px !important;
    }

    .feed-principle{
        margin-top:14px !important;
    }
}

/*
 * Preserve the established stripped-back mobile experience.
 * Desktop image-overlay continuation is never shown here.
 */
@media (max-width:680px){
    .desktop-next-overlay{
        display:none !important;
    }
}


/* ================================================================
   BattleRanker V3.29 — POP HOME VISUAL ALIGNMENT
   Design-only layer. Existing Battle mechanics and lightning geometry
   remain untouched.
   ================================================================ */

:root{
    --br-pop-bg:var(--theme-bg);
    --br-pop-panel:var(--theme-surface);
    --br-pop-panel-2:var(--theme-surface-raised);
    --br-pop-purple:var(--theme-purple);
    --br-pop-purple-dark:var(--theme-purple-deep);
    --br-pop-teal:var(--theme-teal);
    --br-pop-pink:var(--theme-pink);
    --br-pop-orange:var(--theme-orange);
    --br-pop-cream:var(--theme-cream);

    /* Retain the existing variable name so all established interaction
       states inherit the new BattleRanker accent without rewiring JS/CSS. */
    --lime:var(--br-pop-teal);
}

html{
    background:var(--br-pop-bg);
}

body{
    background:
        radial-gradient(circle at 12% 0%,var(--theme-raw-rgba-91-32-200-20-21d7c1),transparent 360px),
        radial-gradient(circle at 88% 8%,var(--theme-raw-rgba-32-215-207-09-45f344),transparent 320px),
        var(--br-pop-bg);
}

/* Header now belongs to the same purple/teal product family as home2. */
.brfeed-header{
    min-height:72px;
    height:auto;
    padding:10px 28px;
    border-bottom:1px solid var(--theme-raw-353b61);
    background:var(--theme-raw-rgba-7-10-27-96-f6c0a5);
    box-shadow:0 7px 25px var(--theme-raw-rgba-0-0-0-20-d5b06a);
}

.brfeed-brand .crown{
    color:var(--br-pop-teal);
}

.brfeed-brand strong span{
    color:var(--br-pop-teal);
}

.brfeed-brand small{
    color:var(--theme-raw-969db9);
}

.brfeed-header nav a{
    color:var(--theme-raw-c7cada);
}

.brfeed-header nav a.active,
.brfeed-header nav a:hover{
    color:var(--br-pop-teal);
}

/* Desktop intro: compact but with a little of the homepage personality. */
@media (min-width:681px){
    .brfeed-shell{
        width:min(1380px,calc(100% - 34px));
        padding-top:18px !important;
    }

    .compact-feed-intro{
        min-height:58px !important;
        margin-bottom:12px !important;
    }

    .compact-feed-intro h1{
        position:relative;
        color:var(--theme-raw-fff);
        font-size:23px !important;
        font-style:italic;
        letter-spacing:-.55px !important;
    }

    .compact-feed-intro h1::after{
        content:"";
        display:inline-block;
        width:34px;
        height:8px;
        margin-left:10px;
        border-radius:3px;
        background:var(--br-pop-pink);
        transform:rotate(-3deg);
    }

    .compact-feed-intro p{
        color:var(--theme-raw-9ca3bd) !important;
    }

    .compact-feed-intro .mode-tabs{
        min-width:350px !important;
    }

    .compact-feed-intro .mode-tabs a{
        min-height:40px !important;
        border:1px solid var(--theme-raw-444b71);
        border-radius:7px;
        background:var(--theme-raw-151a34);
        color:var(--theme-raw-cbd0df);
        box-shadow:none;
    }

    .compact-feed-intro .mode-tabs a.active{
        border-color:var(--br-pop-teal);
        background:var(--br-pop-teal);
        color:var(--theme-raw-101225);
    }
}

/* The main battle card gets cleaner framing; image geometry is unchanged. */
.battle-stage{
    overflow:hidden;
    border:1px solid var(--theme-raw-535b80);
    border-radius:12px;
    background:var(--theme-raw-0d1227);
    box-shadow:
        0 20px 50px var(--theme-raw-rgba-0-0-0-30-6d79cf),
        0 0 0 1px var(--theme-raw-rgba-255-255-255-025-40fa64);
}

.battle-topline{
    border-bottom:1px solid var(--theme-raw-424967);
    background:
        linear-gradient(90deg,var(--theme-raw-rgba-91-32-200-16-792842),transparent 28%),
        var(--theme-raw-11162c);
}

.battle-topline strong{
    border-color:var(--theme-raw-11152a);
    border-radius:7px;
    background:var(--br-pop-teal);
    color:var(--theme-raw-101225);
    box-shadow:3px 3px 0 var(--theme-raw-090c1d);
}

.live-pill{
    border-radius:999px;
    background:var(--br-pop-pink);
    color:var(--theme-raw-fff);
}

.battle-topline a{
    color:var(--theme-raw-b9bfd3);
}

.battle-topline a:hover{
    color:var(--br-pop-teal);
}

/* Contender labels now echo the bright homepage accents. */
.battle-copy b{
    border-radius:5px;
    background:var(--br-pop-pink);
    box-shadow:2px 2px 0 var(--theme-raw-rgba-0-0-0-45-70cab9);
}

.battle-side.right .battle-copy b{
    background:var(--br-pop-purple);
}

.battle-copy strong{
    text-shadow:0 4px 16px var(--theme-raw-rgba-0-0-0-85-0ef6af);
}

/* VS is more playful but still centered over the EXISTING bolt seam. */
.vs{
    border-color:var(--br-pop-teal);
    background:var(--theme-raw-0b1026);
    color:var(--theme-raw-fff);
    box-shadow:
        0 0 0 7px var(--theme-raw-rgba-7-10-24-60-7ffe82),
        0 0 30px var(--theme-raw-rgba-32-215-207-30-ac678e);
}

/* Desktop result overlays use the homepage pink/purple language. */
@media(min-width:681px){
    .battle-side.left .mobile-image-result.is-picked{
        border-color:var(--theme-raw-ff6cab);
        background:linear-gradient(135deg,var(--theme-raw-rgba-255-63-146-88-bc979d),var(--theme-raw-rgba-151-16-91-84-9e6d69));
    }

    .battle-side.right .mobile-image-result.is-picked{
        border-color:var(--theme-raw-9d7cff);
        background:linear-gradient(135deg,var(--theme-raw-rgba-91-32-200-90-b1cd0f),var(--theme-raw-rgba-43-15-107-86-405dec));
    }

    .mobile-image-result{
        border-radius:12px;
        border-color:var(--br-pop-teal);
        background:var(--theme-raw-rgba-9-13-34-88-bec51a);
    }

    .desktop-next-overlay{
        border-color:var(--br-pop-teal) !important;
        border-radius:8px !important;
        background:var(--br-pop-teal) !important;
        color:var(--theme-raw-101225) !important;
        box-shadow:0 6px 0 var(--theme-raw-080b1e),0 12px 28px var(--theme-raw-rgba-0-0-0-32-78ad00) !important;
    }
}

/* Desktop result strip is quieter so the images/result overlays stay primary. */
.battle-result{
    background:var(--theme-raw-0d1227);
    border-top:1px solid var(--theme-raw-404766);
}

.battle-stage.has-result .battle-result{
    border-top:2px solid var(--br-pop-teal);
    background:
        radial-gradient(circle at 92% 0,var(--theme-raw-rgba-32-215-207-09-45f344),transparent 32%),
        var(--theme-raw-0e142b);
}

.battle-stage.has-result .result-head #resultMeta{
    border-color:var(--theme-raw-rgba-32-215-207-42-ca388f);
    background:var(--theme-raw-rgba-32-215-207-08-4eaa78);
    color:var(--br-pop-teal);
}

.result-left{
    background:linear-gradient(135deg,var(--theme-raw-ff3f92),var(--theme-raw-c32170));
}

.result-right{
    background:linear-gradient(135deg,var(--theme-raw-6b35db),var(--theme-raw-4319a7));
}

/* Up Next now reads like the homepage quick-battle rail. */
.up-next{
    margin-top:18px !important;
}

.section-head{
    border-color:var(--theme-raw-353c5c);
}

.section-head h2{
    color:var(--theme-raw-fff);
}

.section-head>b{
    color:var(--br-pop-teal);
}

.queue{
    gap:10px;
}

.queue-card{
    overflow:hidden;
    border:1px solid var(--theme-raw-454d70);
    border-radius:9px;
    background:var(--theme-raw-151a33);
    box-shadow:0 7px 18px var(--theme-raw-rgba-0-0-0-18-09884d);
}

.queue-card:first-child{
    border-color:var(--br-pop-teal);
    box-shadow:0 0 22px var(--theme-raw-rgba-32-215-207-10-5c71a9);
}

.queue-vs{
    border-color:var(--br-pop-teal);
    background:var(--theme-raw-0b1024);
}

.queue-meta{
    color:var(--theme-raw-9299b3);
}

.queue-card:first-child .queue-meta b{
    color:var(--br-pop-teal);
}

.feed-principle{
    border-color:var(--theme-raw-444b68);
    border-radius:8px;
    background:var(--theme-raw-10152b);
    color:var(--theme-raw-969db6);
}

.feed-principle strong{
    color:var(--br-pop-teal);
}

/* Ranking impact celebration: same functionality, new palette. */
.ranking-impact-toast{
    border-color:var(--br-pop-teal);
    border-radius:12px;
    background:
        radial-gradient(circle at 90% 0,var(--theme-raw-rgba-91-32-200-28-dd5a28),transparent 42%),
        linear-gradient(135deg,var(--theme-raw-151b37),var(--theme-raw-090d22) 78%);
    box-shadow:
        0 14px 45px var(--theme-raw-rgba-0-0-0-58-b16608),
        6px 6px 0 var(--theme-raw-060918),
        0 0 32px var(--theme-raw-rgba-32-215-207-17-909681);
}

.ranking-impact-kicker{
    color:var(--br-pop-teal);
}

.ranking-impact-shine{
    background:linear-gradient(
        90deg,
        transparent,
        var(--theme-raw-rgba-255-255-255-05-44501a),
        var(--theme-raw-rgba-255-255-255-34-5d18da),
        var(--theme-raw-rgba-255-63-146-28-42c99b),
        var(--theme-raw-rgba-32-215-207-20-79004b),
        transparent
    );
}

/* ================================================================
   Mobile remains the stripped-back tap/result/swipe loop.
   Only presentation changes; no extra modules are introduced.
   ================================================================ */
@media(max-width:680px){
    body{
        background:var(--theme-raw-080c20);
    }

    .brfeed-header{
        min-height:64px;
        padding:9px 12px 8px;
        border-bottom:1px solid var(--theme-raw-343b60);
    }

    .brfeed-brand strong{
        font-size:22px;
    }

    .brfeed-brand small{
        font-size:8px;
    }

    .brfeed-header nav{
        padding-top:5px;
        border-top:1px solid var(--theme-raw-252b48);
    }

    .brfeed-header nav a{
        font-size:9px;
    }

    .battle-stage{
        border:0;
        border-radius:0;
        background:var(--theme-raw-080c20);
    }

    .battle-topline{
        min-height:50px;
        padding:7px 9px 8px;
        border-top:1px solid var(--theme-raw-303755);
        border-bottom:1px solid var(--theme-raw-303755);
        background:var(--theme-raw-10152d);
    }

    .battle-topline strong{
        border:0;
        border-radius:6px;
        background:var(--br-pop-teal);
        box-shadow:2px 2px 0 var(--theme-raw-070a1a);
        color:var(--theme-raw-101225);
    }

    .mobile-ranking-switch{
        border-top:0;
        border-bottom-color:var(--br-pop-teal);
        background:var(--theme-raw-0d1228);
    }

    .mobile-ranking-switch .active::after{
        background:var(--br-pop-teal);
    }

    /*
     * Existing mobile split remains vertically stacked.
     * This only replaces the old lime separator colour.
     */
    .battle-side.right{
        border-top-color:var(--br-pop-teal);
    }

    .battle-copy b{
        background:var(--br-pop-pink);
    }

    .battle-side.right .battle-copy b{
        background:var(--br-pop-purple);
    }

    .battle-side.left .mobile-image-result.is-picked{
        border-color:var(--theme-raw-ff73b2);
        background:linear-gradient(135deg,var(--theme-raw-rgba-255-63-146-88-bc979d),var(--theme-raw-rgba-142-13-82-85-a6aa0c));
        box-shadow:0 8px 28px var(--theme-raw-rgba-0-0-0-46-6ac08d),0 0 24px var(--theme-raw-rgba-255-63-146-17-96f5c0);
    }

    .battle-side.right .mobile-image-result.is-picked{
        border-color:var(--theme-raw-a789ff);
        background:linear-gradient(135deg,var(--theme-raw-rgba-91-32-200-91-c45936),var(--theme-raw-rgba-47-16-113-88-bf395b));
        box-shadow:0 8px 28px var(--theme-raw-rgba-0-0-0-46-6ac08d),0 0 24px var(--theme-raw-rgba-91-32-200-22-518f95);
    }

    .mobile-image-result.is-loser-result{
        background:var(--theme-raw-rgba-8-11-28-80-44a598);
    }

    .battle-stage.has-result::after{
        border-top-color:var(--theme-raw-303755);
        background:var(--theme-raw-0c1126);
        color:var(--br-pop-teal);
    }

    .ranking-impact-toast{
        border-color:var(--br-pop-teal);
    }
}

/* Loading state follows the new accent. */
.feed-loading-dot{
    background:var(--br-pop-teal);
    box-shadow:0 0 13px var(--br-pop-teal);
}


/* ================================================================
   BattleRanker V3.30 — polish pass
   Compact mobile header + calmer Up Next cards.
   No battle mechanics or lightning geometry changed.
   ================================================================ */

/* Desktop queue: slightly calmer, cleaner, less dense. */
@media(min-width:681px){
    .up-next{
        margin-top:16px !important;
    }

    .up-next .section-head{
        margin-bottom:10px !important;
        padding-bottom:8px;
    }

    .section-head h2{
        font-size:19px;
        letter-spacing:-.3px;
    }

    .section-head small{
        color:var(--theme-raw-858da8);
        font-size:9px;
    }

    .queue{
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:11px;
    }

    .queue-card{
        border-radius:10px;
        border-color:var(--theme-raw-3f4768);
        background:var(--theme-raw-13182f);
        box-shadow:0 6px 14px var(--theme-raw-rgba-0-0-0-16-dc0c50);
    }

    .queue-card:hover{
        transform:translateY(-2px);
        border-color:var(--theme-raw-657097);
    }

    .queue-visual{
        height:148px;
    }

    .queue-copy{
        padding:8px 10px 6px;
    }

    .queue-copy strong{
        font-size:11px;
        line-height:1.05;
    }

    .queue-meta{
        padding:0 10px 9px;
        font-size:8px;
        line-height:1.15;
    }

    .queue-vs{
        width:36px;
        height:36px;
        font-size:10px;
        border-width:2px;
        box-shadow:0 0 0 3px var(--theme-raw-rgba-8-12-29-86-319915);
    }

    .feed-principle{
        margin-top:16px !important;
        padding:12px 14px;
        font-size:10px;
    }
}

/* Mobile header: much less dead vertical space before the Battle. */
@media(max-width:680px){
    .brfeed-header{
        display:grid;
        grid-template-columns:1fr;
        gap:0;
        min-height:0;
        padding:8px 12px 0;
    }

    .brfeed-brand{
        min-height:46px;
        display:grid;
        grid-template-columns:30px 1fr;
        grid-template-rows:auto auto;
        align-items:center;
        column-gap:8px;
        padding-bottom:7px;
    }

    .brfeed-brand .crown{
        grid-row:1/3;
        font-size:27px;
        line-height:1;
    }

    .brfeed-brand strong{
        font-size:21px;
        line-height:.88;
    }

    .brfeed-brand small{
        margin-top:2px;
        font-size:7px;
        line-height:1;
    }

    .brfeed-header nav{
        width:100%;
        display:grid;
        grid-template-columns:repeat(4,1fr);
        align-items:center;
        gap:0;
        margin:0;
        padding:0;
        border-top:1px solid var(--theme-raw-252b48);
    }

    .brfeed-header nav a{
        min-height:37px;
        display:flex;
        align-items:center;
        justify-content:center;
        padding:0 3px;
        font-size:8px;
        line-height:1;
        text-align:center;
        white-space:nowrap;
    }

    .brfeed-header nav a.active{
        position:relative;
    }

    .brfeed-header nav a.active::after{
        content:"";
        position:absolute;
        left:24%;
        right:24%;
        bottom:0;
        height:3px;
        border-radius:3px 3px 0 0;
        background:var(--br-pop-teal);
    }

    .battle-topline{
        min-height:47px;
        padding:6px 8px 7px;
    }

    .battle-topline strong{
        padding:6px 10px;
        font-size:clamp(16px,4.8vw,22px);
        line-height:1;
    }

    /* Keep the battle itself visually dominant. */
    .battle-side{
        height:min(34vh,270px);
        min-height:215px;
    }

    .battle-copy{
        bottom:13px;
    }

    .battle-copy strong{
        font-size:clamp(27px,7.6vw,36px);
    }

    .vs{
        width:68px;
        height:68px;
        font-size:25px;
        border-width:4px;
        box-shadow:
            0 0 0 5px var(--theme-raw-rgba-7-10-24-56-e41154),
            0 0 24px var(--theme-raw-rgba-32-215-207-24-2c1996);
    }
}

/* Narrow phones: prevent nav labels from feeling cramped. */
@media(max-width:390px){
    .brfeed-header{
        padding-left:9px;
        padding-right:9px;
    }

    .brfeed-header nav a{
        font-size:7.5px;
    }

    .brfeed-brand strong{
        font-size:20px;
    }
}


/* ================================================================
   BattleRanker V3.31 — final mobile Battle polish
   ================================================================ */
@media(max-width:680px){

    /* Slightly tighter header so the Battle begins sooner. */
    .brfeed-header{
        padding-top:6px;
    }

    .brfeed-brand{
        min-height:40px;
        padding-bottom:5px;
    }

    .brfeed-brand .crown{
        font-size:25px;
    }

    .brfeed-brand strong{
        font-size:20px;
    }

    .brfeed-brand small{
        font-size:6.5px;
        margin-top:1px;
    }

    .brfeed-header nav a{
        min-height:34px;
    }

    /* Ranking title reads more like a compact label than a banner. */
    .battle-topline{
        min-height:44px;
        padding:5px 8px 6px;
    }

    .battle-topline strong{
        max-width:88vw;
        padding:5px 9px;
        font-size:clamp(15px,4.5vw,20px);
        border-radius:6px;
        box-shadow:2px 2px 0 var(--theme-raw-070a1a);
    }

    /* Long contender names get a little breathing room. */
    .battle-copy{
        left:16px;
        right:16px;
    }

    .battle-copy strong{
        max-width:96%;
        font-size:clamp(25px,7.1vw,34px);
        line-height:.94;
        letter-spacing:-.035em;
        overflow-wrap:anywhere;
    }

    .battle-side.right .battle-copy strong{
        max-width:94%;
    }
}

@media(max-width:390px){
    .battle-copy strong{
        font-size:clamp(24px,6.8vw,32px);
    }

    .battle-topline strong{
        max-width:92vw;
    }
}

/* ================================================================
   BattleRanker V3.33 — HYBRID BUZZ PASS
   New compact layout retained. Old battle energy reintroduced:
   big desktop intro, pink-vs-blue arena language, selective electric yellow.
   Mobile stays compact. Lightning geometry is NOT redefined.
   ================================================================ */

:root{
    --br-arena-yellow:var(--theme-arena-electric);
    --br-arena-pink:var(--theme-battle-left);
    --br-arena-blue:var(--theme-battle-right);
}

@media(min-width:681px){
    .compact-feed-intro{
        min-height:112px !important;
        margin:8px 0 14px !important;
        align-items:center !important;
    }

    .compact-feed-intro > div:first-child{
        display:block !important;
        min-width:0 !important;
    }

    .compact-feed-intro .eyebrow{
        display:block !important;
        margin:0 0 5px !important;
        color:var(--br-arena-yellow) !important;
        font-size:9px !important;
        font-weight:950 !important;
        letter-spacing:.08em !important;
    }

    .compact-feed-intro h1{
        margin:0 !important;
        max-width:760px !important;
        font-size:clamp(36px,4vw,58px) !important;
        line-height:.84 !important;
        letter-spacing:-.05em !important;
        white-space:normal !important;
    }

    .compact-feed-intro h1 .battle-anything-line{
        color:var(--theme-raw-fff) !important;
    }

    .compact-feed-intro h1 em{
        color:var(--br-arena-yellow) !important;
        font-style:italic !important;
    }

    .compact-feed-intro h1::after{
        width:42px !important;
        height:8px !important;
        margin-left:13px !important;
        background:var(--br-arena-pink) !important;
    }

    .compact-feed-intro p{
        margin:8px 0 0 !important;
        max-width:560px !important;
        color:var(--theme-raw-a5abc2) !important;
        font-size:10px !important;
        line-height:1.4 !important;
    }

    .compact-feed-intro .mode-tabs{
        min-width:340px !important;
    }

    .compact-feed-intro .mode-tabs a.active{
        border-color:var(--theme-raw-29ddd6) !important;
        background:var(--theme-raw-29d5d2) !important;
        color:var(--theme-raw-101225) !important;
    }
}

.battle-stage{
    border-color:var(--theme-raw-4d5576);
}

.battle-topline strong{
    background:var(--br-arena-yellow) !important;
    color:var(--theme-raw-101225) !important;
}

.live-pill{
    background:var(--br-arena-pink) !important;
    color:var(--theme-raw-fff) !important;
}

.battle-side.left .battle-copy b{
    background:var(--br-arena-pink) !important;
    color:var(--theme-raw-090d22) !important;
}

.battle-side.right .battle-copy b{
    background:var(--br-arena-blue) !important;
    color:var(--theme-raw-090d22) !important;
}

.result-left{
    background:linear-gradient(135deg,var(--theme-raw-ff174d),var(--theme-raw-dc0f42)) !important;
}

.result-right{
    background:linear-gradient(135deg,var(--theme-raw-1776ff),var(--theme-raw-125bd6)) !important;
}

.battle-side.left .mobile-image-result.is-picked{
    border-color:var(--theme-raw-ff5c7d) !important;
    background:linear-gradient(135deg,var(--theme-raw-rgba-255-23-77-91-3c4138),var(--theme-raw-rgba-150-7-45-88-62b164)) !important;
}

.battle-side.right .mobile-image-result.is-picked{
    border-color:var(--theme-raw-67a8ff) !important;
    background:linear-gradient(135deg,var(--theme-raw-rgba-23-111-255-92-e1b3f1),var(--theme-raw-rgba-10-60-160-88-bd6f5f)) !important;
}

.vs{
    border-color:var(--theme-raw-20d7cf) !important;
}

.battle-stage.has-result .result-head #resultMeta{
    border-color:var(--theme-raw-rgba-231-255-0-34-9c68c7) !important;
    background:var(--theme-raw-rgba-231-255-0-055-0e4447) !important;
    color:var(--br-arena-yellow) !important;
}

.ranking-impact-kicker{
    color:var(--br-arena-yellow) !important;
}

.section-head > div > span{
    color:var(--br-arena-yellow) !important;
}

.queue-card:first-child .queue-meta b{
    color:var(--br-arena-yellow) !important;
}

.queue-card:first-child{
    border-color:var(--theme-raw-20d7cf) !important;
}

@media(max-width:680px){
    .battle-topline strong{
        background:var(--theme-raw-20d7cf) !important;
        color:var(--theme-raw-101225) !important;
    }

    .battle-side.left .battle-copy b{
        background:var(--br-arena-pink) !important;
        color:var(--theme-raw-090d22) !important;
    }

    .battle-side.right .battle-copy b{
        background:var(--br-arena-blue) !important;
        color:var(--theme-raw-090d22) !important;
    }

    .battle-side.left .mobile-image-result.is-picked{
        border-color:var(--theme-raw-ff5c7d) !important;
        background:linear-gradient(135deg,var(--theme-raw-rgba-255-23-77-91-3c4138),var(--theme-raw-rgba-150-7-45-88-62b164)) !important;
    }

    .battle-side.right .mobile-image-result.is-picked{
        border-color:var(--theme-raw-67a8ff) !important;
        background:linear-gradient(135deg,var(--theme-raw-rgba-23-111-255-92-e1b3f1),var(--theme-raw-rgba-10-60-160-88-bd6f5f)) !important;
    }
}



/* BattleRanker V3.34 — restore yellow desktop Next Battle overlay */
@media(min-width:681px){
    .desktop-next-overlay{
        border-color:var(--theme-raw-e7ff00) !important;
        background:var(--theme-raw-e7ff00) !important;
        color:var(--theme-raw-101225) !important;
        box-shadow:
            0 6px 0 var(--theme-raw-080b1e),
            0 12px 28px var(--theme-raw-rgba-0-0-0-32-78ad00),
            0 0 20px var(--theme-raw-rgba-231-255-0-16-856f02) !important;
    }

    .desktop-next-overlay:hover{
        background:var(--theme-raw-f1ff4a) !important;
        border-color:var(--theme-raw-f1ff4a) !important;
        color:var(--theme-raw-101225) !important;
    }
}


/* BattleRanker V3.35 — restore yellow VS circles */
.vs{
    border-color:var(--theme-raw-e7ff00) !important;
    box-shadow:
        0 0 0 7px var(--theme-raw-rgba-7-10-24-60-7ffe82),
        0 0 30px var(--theme-raw-rgba-231-255-0-22-cb9295) !important;
}

.queue-vs{
    border-color:var(--theme-raw-e7ff00) !important;
    box-shadow:0 0 0 3px var(--theme-raw-rgba-8-12-29-86-319915) !important;
}

@media(max-width:680px){
    .vs{
        border-color:var(--theme-raw-e7ff00) !important;
        box-shadow:
            0 0 0 5px var(--theme-raw-rgba-7-10-24-56-e41154),
            0 0 24px var(--theme-raw-rgba-231-255-0-20-f657aa) !important;
    }
}


/* BattleRanker V3.36 — yellow Ranking Impact outline */
.ranking-impact-toast{
    border-color:var(--theme-raw-e7ff00) !important;
    box-shadow:
        0 14px 45px var(--theme-raw-rgba-0-0-0-58-b16608),
        6px 6px 0 var(--theme-raw-060918),
        0 0 32px var(--theme-raw-rgba-231-255-0-16-856f02) !important;
}

.ranking-impact-kicker{
    color:var(--theme-raw-e7ff00) !important;
}


/* ================================================================
   BattleRanker Theme V1 integration — arena tokens
   Geometry intentionally untouched.
   ================================================================ */
.battle-stage{border-color:var(--theme-arena-electric)!important;}
.battle-topline strong{background:var(--theme-arena-electric)!important;color:var(--theme-ink)!important;}
.live-pill{background:var(--theme-battle-left)!important;}
.battle-side.left .battle-copy b{background:var(--theme-battle-left)!important;}
.battle-side.right .battle-copy b{background:var(--theme-battle-right)!important;}
.result-left{background:var(--theme-battle-left)!important;}
.result-right{background:var(--theme-battle-right)!important;}
.vs,.queue-vs{border-color:var(--theme-arena-electric)!important;}
.desktop-next-overlay{background:var(--theme-arena-electric)!important;border-color:var(--theme-arena-electric)!important;color:var(--theme-ink)!important;}
.ranking-impact-toast{border-color:var(--theme-arena-electric)!important;}
.ranking-impact-kicker{color:var(--theme-arena-electric)!important;}
.section-head>div>span{color:var(--theme-arena-electric)!important;}
.queue-card{border-color:var(--theme-arena-electric)!important;}
.queue-card:first-child{border-color:var(--theme-arena-electric)!important;}
.queue-card:first-child .queue-meta b{color:var(--theme-arena-electric)!important;}
@media(max-width:680px){
  .battle-topline strong{background:var(--theme-teal)!important;}
}
\n\n/* ================================================================\n   BattleRanker Theme V1.1 — Battle Feed page accent\n   Yellow owns arena chrome; pink/blue remain the two contenders.\n   ================================================================ */\n.theme-battle-arena .brfeed-brand strong span{\n    color:var(--theme-page-accent)!important;\n}\n\n.theme-battle-arena .brfeed-brand .crown{\n    color:var(--theme-page-accent)!important;\n}\n\n.theme-battle-arena .brfeed-header nav a.active,\n.theme-battle-arena .brfeed-header nav a:hover{\n    color:var(--theme-page-accent)!important;\n}\n\n.theme-battle-arena .compact-feed-intro .eyebrow{\n    color:var(--theme-page-accent)!important;\n}\n\n@media(min-width:681px){\n    .theme-battle-arena .compact-feed-intro .mode-tabs a.active{\n        border-color:var(--theme-page-accent)!important;\n        background:var(--theme-page-accent)!important;\n        color:var(--theme-ink)!important;\n    }\n}\n\n.theme-battle-arena .battle-stage.has-result .result-head #resultMeta,\n.theme-battle-arena .result-head #resultMeta{\n    color:var(--theme-page-accent)!important;\n}\n\n.theme-battle-arena .battle-stage.has-result .result-head #resultMeta{\n    border-color:var(--theme-raw-rgba-231-255-0-38-dfb955)!important;\n    background:var(--theme-raw-rgba-231-255-0-06-6e76e4)!important;\n}\n\n.theme-battle-arena .section-head>b,\n.theme-battle-arena .queue-card:first-child .queue-meta b,\n.theme-battle-arena .feed-principle strong{\n    color:var(--theme-page-accent)!important;\n}\n\n.theme-battle-arena .feed-loading-dot{\n    background:var(--theme-page-accent)!important;\n    box-shadow:0 0 13px var(--theme-page-accent)!important;\n}\n\n/* Keep the mobile ranking title teal: it is structural context, not arena action. */\n@media(max-width:680px){\n    .theme-battle-arena .battle-topline strong{\n        background:var(--theme-teal)!important;\n    }\n}\n

/* ================================================================
   BattleRanker Theme V1.2 — verified Battle Feed yellow chrome
   Theme file is now loaded by battle-feed.php before this stylesheet.
   ================================================================ */

.theme-battle-arena .brfeed-brand .crown,
.theme-battle-arena .brfeed-brand strong span{
    color:var(--theme-arena-electric) !important;
}

.theme-battle-arena .brfeed-header nav a.active,
.theme-battle-arena .brfeed-header nav a.active:hover{
    color:var(--theme-arena-electric) !important;
}

.theme-battle-arena .compact-feed-intro .eyebrow{
    color:var(--theme-arena-electric) !important;
}

@media(min-width:681px){
    .theme-battle-arena .compact-feed-intro .mode-tabs a.active{
        border-color:var(--theme-arena-electric) !important;
        background:var(--theme-arena-electric) !important;
        color:var(--theme-ink) !important;
    }
}

.theme-battle-arena .result-head #resultMeta,
.theme-battle-arena .battle-stage.has-result .result-head #resultMeta{
    color:var(--theme-arena-electric) !important;
}

.theme-battle-arena .section-head > b,
.theme-battle-arena .feed-principle strong{
    color:var(--theme-arena-electric) !important;
}

.theme-battle-arena .feed-loading-dot{
    background:var(--theme-arena-electric) !important;
    box-shadow:0 0 13px var(--theme-arena-electric) !important;
}


/* ================================================================
   BattleRanker V3.37 — MOBILE YELLOW CONTEXT + OPTIONAL NEXT BUTTON
   - ranking title returns to Electric Yellow
   - horizontal contender divider returns to Electric Yellow
   - retire text-only SWIPE LEFT footer
   - show an in-flow yellow NEXT button after result
   Swipe-left remains available as an alternative gesture.
   Desktop lightning geometry is untouched.
   ================================================================ */
@media(max-width:680px){

    .theme-battle-arena .battle-topline strong{
        background:var(--theme-arena-electric) !important;
        color:var(--theme-ink) !important;
    }

    .theme-battle-arena .battle-side.right{
        border-top-color:var(--theme-arena-electric) !important;
    }

    .theme-battle-arena .battle-stage.has-result::after{
        content:none !important;
        display:none !important;
    }

    .theme-battle-arena .mobile-next-overlay{
        display:none !important;
        position:static !important;
        left:auto !important;
        right:auto !important;
        bottom:auto !important;
        z-index:auto !important;
        width:calc(100% - 24px) !important;
        min-height:58px !important;
        margin:12px auto 14px !important;
        padding:0 18px !important;
        align-items:center !important;
        justify-content:center !important;
        border:3px solid var(--theme-ink) !important;
        border-radius:6px !important;
        background:var(--theme-arena-electric) !important;
        color:var(--theme-ink) !important;
        box-shadow:0 5px 0 var(--theme-shadow-deep) !important;
        opacity:0 !important;
        pointer-events:none !important;
        transform:none !important;
        font-size:20px !important;
        line-height:1 !important;
        font-style:italic !important;
        font-weight:1000 !important;
        letter-spacing:.01em !important;
    }

    .theme-battle-arena .mobile-next-overlay::before{
        content:none !important;
        display:none !important;
    }

    .theme-battle-arena .mobile-next-overlay.is-visible{
        display:flex !important;
        opacity:1 !important;
        pointer-events:auto !important;
        transform:none !important;
    }

    .theme-battle-arena .mobile-next-overlay b{
        margin-left:8px !important;
        font-size:24px !important;
        line-height:1 !important;
    }

    body.theme-battle-arena.has-mobile-next{
        padding-bottom:0 !important;
    }
}


/* ================================================================
   BattleRanker V3.38 — RESULT PERCENTAGE COUNT-UP PAYOFF
   Number animation is driven by JS. The chosen result gets one
   restrained finishing "hit"; the overlay card geometry is unchanged.
   ================================================================ */
.mobile-image-result .animated-result-percent{
    display:block;
    transform:scale(1);
    transform-origin:center center;
    will-change:transform;
}

.mobile-image-result .animated-result-percent.percent-hit{
    animation:brResultPercentHit .24s cubic-bezier(.2,.9,.25,1);
}

@keyframes brResultPercentHit{
    0%{transform:scale(1);}
    48%{transform:scale(1.10);}
    100%{transform:scale(1);}
}

@media(prefers-reduced-motion:reduce){
    .mobile-image-result .animated-result-percent.percent-hit{
        animation:none;
    }
}


/* ================================================================
   BattleRanker V3.39 — MOBILE POST-BATTLE NAV
   Quiet View List escape + primary Next.
   Uses the current battle's real ranking_slug from battle-feed-real.js.
   Desktop lightning/divider geometry is untouched.
   ================================================================ */
.mobile-post-battle-actions{display:none;}
@media(max-width:680px){
    .theme-battle-arena .battle-stage.has-result .mobile-post-battle-actions{
        display:grid;
        grid-template-columns:1fr;
        gap:8px;
        width:calc(100% - 24px);
        margin:10px auto 13px;
    }
    .theme-battle-arena .battle-stage.has-result .mobile-post-battle-actions.has-view-list{
        grid-template-columns:1fr 1fr;
    }
    .theme-battle-arena .mobile-view-list{
        display:none;
        width:100%;
        min-width:0;
        min-height:56px;
        margin:0;
        padding:0 12px;
        align-items:center;
        justify-content:center;
        border:1px solid var(--theme-raw-4a526e);
        border-radius:6px;
        background:var(--theme-raw-151a33);
        color:var(--theme-raw-cbd0df);
        box-shadow:0 4px 0 var(--theme-shadow-deep);
        text-decoration:none;
        text-align:center;
        font-size:15px;
        line-height:1;
        font-style:italic;
        font-weight:1000;
        letter-spacing:.01em;
    }
    .theme-battle-arena .mobile-post-battle-actions.has-view-list .mobile-view-list{display:flex;}
    .theme-battle-arena .mobile-view-list:active{
        background:var(--theme-raw-202640);
        color:var(--theme-raw-fff);
        transform:translateY(1px);
        box-shadow:0 3px 0 var(--theme-shadow-deep);
    }
    .theme-battle-arena .mobile-post-battle-actions .mobile-next-overlay{
        width:100% !important;
        min-width:0 !important;
        min-height:56px !important;
        margin:0 !important;
        padding:0 12px !important;
        border-width:2px !important;
        box-shadow:0 4px 0 var(--theme-shadow-deep) !important;
        font-size:18px !important;
    }
    .theme-battle-arena .mobile-post-battle-actions .mobile-next-overlay.is-visible{display:flex !important;}
    .theme-battle-arena .mobile-post-battle-actions .mobile-next-overlay b{margin-left:7px !important;font-size:21px !important;}
}
@media(max-width:390px){
    .theme-battle-arena .battle-stage.has-result .mobile-post-battle-actions{gap:7px;width:calc(100% - 18px);}
    .theme-battle-arena .mobile-view-list{font-size:13px;padding:0 8px;}
    .theme-battle-arena .mobile-post-battle-actions .mobile-next-overlay{font-size:17px !important;padding:0 8px !important;}
}

/* ================================================================
   BattleRanker V3.40 — SHARING
   Sharing UI only. Battle image/lightning/divider geometry untouched.
   ================================================================ */
.battle-topline-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    min-width:0;
}
.battle-share-trigger{
    min-height:34px;
    padding:0 12px;
    border:1px solid var(--lime);
    border-radius:4px;
    background:transparent;
    color:var(--lime);
    font:inherit;
    font-size:10px;
    font-style:italic;
    font-weight:1000;
    letter-spacing:.04em;
    cursor:pointer;
}
.battle-share-trigger:hover{
    background:var(--lime);
    color:var(--theme-raw-080b0e);
}
.mobile-share-trigger{display:none;}

.battle-share-backdrop{
    position:fixed;
    inset:0;
    z-index:400;
    background:rgba(0,0,0,.72);
    backdrop-filter:blur(3px);
}
.battle-share-dialog{
    position:fixed;
    left:50%;
    top:50%;
    z-index:410;
    width:min(520px,calc(100% - 28px));
    padding:28px;
    transform:translate(-50%,-50%);
    border:2px solid var(--lime);
    border-radius:10px;
    background:var(--theme-raw-0b0f12);
    color:var(--theme-raw-fff);
    box-shadow:0 18px 70px rgba(0,0,0,.7), 7px 7px 0 var(--theme-raw-000);
}
.battle-share-dialog[hidden],
.battle-share-backdrop[hidden]{display:none!important;}
.battle-share-close{
    position:absolute;
    top:10px;
    right:12px;
    width:36px;
    height:36px;
    border:0;
    background:transparent;
    color:var(--theme-raw-cbd0df);
    font-size:30px;
    line-height:1;
    cursor:pointer;
}
.battle-share-kicker{
    display:block;
    margin-bottom:8px;
    color:var(--lime);
    font-size:12px;
    font-style:italic;
    font-weight:1000;
    letter-spacing:.07em;
}
.battle-share-dialog h2{
    margin:0 42px 12px 0;
    font-size:clamp(28px,5vw,42px);
    line-height:.95;
    font-style:italic;
}
.battle-share-dialog p{
    display:grid;
    gap:5px;
    margin:0 0 18px;
    color:var(--theme-raw-cbd0df);
    line-height:1.35;
}
.battle-share-dialog p strong{
    color:var(--theme-raw-fff);
    font-size:17px;
}
.battle-share-dialog p span{font-size:14px;}
.battle-share-scope{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
    margin-bottom:12px;
}
.battle-share-scope button,
.battle-share-actions button,
.battle-share-actions a{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    padding:0 12px;
    border:1px solid var(--theme-raw-4a526e);
    border-radius:5px;
    background:var(--theme-raw-151a33);
    color:var(--theme-raw-fff);
    text-decoration:none;
    text-align:center;
    font:inherit;
    font-size:12px;
    font-style:italic;
    font-weight:1000;
    cursor:pointer;
}
.battle-share-scope button.is-active{
    border-color:var(--lime);
    background:var(--lime);
    color:var(--theme-raw-080b0e);
}
.battle-share-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
}
.battle-share-actions .share-native{
    grid-column:1/-1;
    border-color:var(--lime);
    background:var(--lime);
    color:var(--theme-raw-080b0e);
    font-size:15px;
}
.battle-share-status{
    display:block;
    min-height:18px;
    margin-top:10px;
    color:var(--lime);
    text-align:center;
    font-size:12px;
    font-weight:1000;
}
body.share-dialog-open{overflow:hidden;}

@media(max-width:680px){
    .battle-topline-actions{display:none;}
    .mobile-ranking-switch.is-available{
        grid-template-columns:1fr 1fr 1fr;
    }
    .mobile-ranking-switch.has-share-only{
        display:grid;
        grid-template-columns:1fr 1fr;
    }
    .mobile-ranking-switch .mobile-share-trigger{
        position:relative;
        display:flex;
        align-items:center;
        justify-content:center;
        min-height:44px;
        padding:0;
        border:0;
        border-left:1px solid var(--theme-raw-30363b);
        background:transparent;
        color:var(--lime);
        font:inherit;
        font-size:13px;
        font-weight:900;
        font-style:italic;
        letter-spacing:.45px;
        cursor:pointer;
    }
    .battle-share-dialog{
        width:calc(100% - 20px);
        padding:23px 18px 18px;
    }
    .battle-share-actions{
        grid-template-columns:1fr 1fr;
    }
}


/* ================================================================
   BattleRanker V3.41 — MOBILE PINNED NEXT
   LIST now lives in the top LIST / BATTLE / SHARE switch, so the
   duplicate post-battle View List control is removed. After results,
   NEXT is pinned to the bottom of the mobile viewport for easy reach.
   Battle image/lightning/divider geometry is untouched.
   ================================================================ */
@media(max-width:680px){
    .theme-battle-arena .battle-stage.has-result .mobile-post-battle-actions,
    .theme-battle-arena .battle-stage.has-result .mobile-post-battle-actions.has-view-list{
        display:block;
        width:0;
        height:0;
        margin:0;
        padding:0;
    }

    .theme-battle-arena .mobile-view-list{
        display:none !important;
    }

    .theme-battle-arena .mobile-post-battle-actions .mobile-next-overlay{
        display:flex !important;
        position:fixed !important;
        left:12px !important;
        right:12px !important;
        bottom:max(12px,env(safe-area-inset-bottom)) !important;
        z-index:350 !important;
        width:auto !important;
        min-width:0 !important;
        min-height:56px !important;
        margin:0 !important;
        padding:0 16px !important;
        align-items:center;
        justify-content:center;
        border:2px solid var(--theme-raw-080b0e) !important;
        border-radius:6px;
        background:var(--lime) !important;
        color:var(--theme-raw-080b0e) !important;
        box-shadow:0 5px 0 var(--theme-raw-000),0 10px 26px var(--theme-raw-rgba-0-0-0-48-c5c38f) !important;
        opacity:0;
        pointer-events:none;
        transform:translateY(16px);
        transition:opacity .18s ease,transform .18s ease;
        font-size:18px !important;
        font-style:italic;
        font-weight:1000;
    }

    .theme-battle-arena .mobile-post-battle-actions .mobile-next-overlay::before{
        content:none !important;
    }

    .theme-battle-arena .mobile-post-battle-actions .mobile-next-overlay.is-visible{
        display:flex !important;
        opacity:1;
        pointer-events:auto;
        transform:translateY(0);
    }

    body.has-mobile-next{
        padding-bottom:80px !important;
    }
}

/* V3.42 — mobile pinned NEXT colour correction */
@media(max-width:680px){
    .theme-battle-arena .mobile-post-battle-actions .mobile-next-overlay,
    .theme-battle-arena .mobile-post-battle-actions .mobile-next-overlay.is-visible{
        background:var(--theme-arena-electric) !important;
        background-color:var(--theme-arena-electric) !important;
        color:var(--theme-ink) !important;
        border-color:var(--theme-ink) !important;
    }
    .theme-battle-arena .mobile-post-battle-actions .mobile-next-overlay b,
    .theme-battle-arena .mobile-post-battle-actions .mobile-next-overlay span{
        color:var(--theme-ink) !important;
    }
}


/* BattleRanker mobile battle actions — LIST | SHARE | SKIP
   BATTLE is deliberately omitted because the user is already on the battle view. */
@media(max-width:680px){
    .mobile-ranking-switch.is-available{
        grid-template-columns:1fr 1fr 1fr;
    }

    .mobile-ranking-switch.has-share-only{
        display:grid;
        grid-template-columns:1fr 1fr;
    }

    .mobile-ranking-switch .mobile-share-trigger,
    .mobile-ranking-switch .mobile-skip-trigger{
        position:relative;
        display:flex;
        align-items:center;
        justify-content:center;
        min-height:44px;
        padding:0;
        border:0;
        background:transparent;
        font:inherit;
        font-size:13px;
        font-weight:900;
        font-style:italic;
        letter-spacing:.45px;
        cursor:pointer;
    }

    .mobile-ranking-switch .mobile-share-trigger{
        border-left:1px solid var(--theme-raw-30363b);
        color:var(--lime);
    }

    .mobile-ranking-switch .mobile-skip-trigger{
        border-left:1px solid var(--theme-raw-30363b);
        color:var(--theme-raw-c9cdd0);
    }

    .mobile-ranking-switch .mobile-skip-trigger:active:not(:disabled){
        background:var(--theme-raw-141a1e);
    }

    .mobile-ranking-switch .mobile-skip-trigger:disabled{
        opacity:.32;
        cursor:default;
    }
}


/* BattleRanker desktop battle utilities — ranking / share / skip */
.desktop-skip-trigger{
    min-height:34px;
    padding:0 12px;
    border:1px solid var(--theme-raw-59616b);
    border-radius:4px;
    background:transparent;
    color:var(--theme-raw-c7cdd2);
    font:inherit;
    font-size:10px;
    font-style:italic;
    font-weight:1000;
    letter-spacing:.04em;
    cursor:pointer;
}

.desktop-skip-trigger:hover:not(:disabled){
    border-color:var(--theme-raw-fff);
    background:var(--theme-raw-171d24);
    color:var(--theme-raw-fff);
}

.desktop-skip-trigger:disabled{
    opacity:.28;
    cursor:default;
}

@media(max-width:680px){
    .desktop-skip-trigger{
        display:none;
    }
}


/* Desktop hero heading: keep "PICK A SIDE." together on one line.
   The markup already breaks before the <em>; prevent it from wrapping internally. */
.brfeed-top h1 em{
    display:inline-block;
    white-space:nowrap;
}

@media(max-width:680px){
    .brfeed-top h1 em{
        display:inline;
        white-space:normal;
    }
}




/* Per-ranking-entry MOBILE crop/zoom only.
   At 100% the image matches normal cover. Lower values reveal more source image.
   Desktop remains on its existing crop rules. */
@media(max-width:680px){
    .battle-image-wrap.has-entry-mobile-bg{
        background-image:
            linear-gradient(rgba(5,7,13,.42),rgba(5,7,13,.42)),
            var(--entry-mobile-bg);
        background-size:cover;
        background-position:var(--entry-focus-x,50%) var(--entry-focus-y,50%);
        background-repeat:no-repeat;
    }

    .battle-side img.has-entry-mobile-crop{
        object-fit:contain !important;
        object-position:var(--entry-focus-x,50%) var(--entry-focus-y,50%) !important;
        transform:scale(var(--entry-mobile-scale,1)) !important;
        transform-origin:center center !important;
    }

    .battle-side.picked img.has-entry-mobile-crop{
        transform:scale(calc(var(--entry-mobile-scale,1) * 1.045)) !important;
    }
}