/* ============================================================
   BATTLE NEXUS — unified premium champion-select presentation
   battle-setupv2 / ranked-setup / mission-setup

   Visual-only override layer. Keeping this separate makes the redesign
   easy to remove without touching any draft, mission or ranked logic.
   ============================================================ */

body.bsv2-page {
    --draft-accent: #52d8ef;
    --draft-accent-rgb: 82, 216, 239;
    --draft-accent-soft: #a7f2ff;
    --draft-rival: #ef6b66;
    --draft-rival-rgb: 239, 107, 102;
    --draft-gold: #d7b96d;
    --draft-gold-bright: #f3dda0;
    --draft-ink: #02060b;
    --draft-panel: rgba(5, 12, 20, .86);
    --draft-title: "BATTLE NEXUS // HŐSVÁLASZTÁS";
    --draft-code: "SZIMULÁCIÓS PROTOKOLL";
    background: #01050a;
}

body.ranked-page {
    --draft-accent: #d7b96d;
    --draft-accent-rgb: 215, 185, 109;
    --draft-accent-soft: #ffe4a0;
    --draft-rival: #df5759;
    --draft-rival-rgb: 223, 87, 89;
    --draft-title: "RANKED NEXUS // VERSENYDRAFT";
    --draft-code: "RANGSOROLT PROTOKOLL";
}

body.mission-setup-page {
    --draft-accent: #69dfac;
    --draft-accent-rgb: 105, 223, 172;
    --draft-accent-soft: #bdffe1;
    --draft-rival: #eb6f58;
    --draft-rival-rgb: 235, 111, 88;
    --draft-title: "KAMPÁNY NEXUS // BEVETÉSI DRAFT";
    --draft-code: "KÜLDETÉSI PROTOKOLL";
}

/* A normál draft kapjon valódi levegőt a fix felső navigáció alatt.
   A magasságból ugyanennyit visszaveszünk, így az alsó dokk a viewportban marad. */
body.bsv2-page:not(.ranked-page):not(.mission-setup-page) #bsv2-arena {
    margin-top: 12px;
    height: calc(100vh - 124px);
    height: calc(100dvh - 124px);
}

body.bsv2-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .38;
    background:
        linear-gradient(rgba(91, 181, 203, .024) 1px, transparent 1px),
        linear-gradient(90deg, rgba(91, 181, 203, .024) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, #000 25%, transparent 82%);
}

body.bsv2-page #bsv2-bg {
    inset: -22px;
    background-image: url("../image/backgrounds/battlev3_vs.webp");
    background-position: center 42%;
    filter: blur(7px) brightness(.32) saturate(.82) contrast(1.08);
    opacity: .76;
    transform: scale(1.035);
}

body.bsv2-page #bsv2-vignette {
    background:
        linear-gradient(180deg, rgba(1, 5, 10, .35), transparent 20%, transparent 78%, rgba(1, 4, 8, .9)),
        radial-gradient(ellipse at 50% 38%, rgba(var(--draft-accent-rgb), .08), transparent 44%),
        radial-gradient(ellipse at center, transparent 18%, rgba(1, 4, 9, .5) 70%, #010307 100%);
}

/* ---------- Main draft shell ---------- */

body.bsv2-page #bsv2-arena {
    width: min(calc(100% - clamp(18px, 2vw, 42px)), 2180px);
    grid-template-columns: clamp(205px, 15vw, 286px) minmax(0, 1fr) clamp(205px, 15vw, 286px);
    gap: clamp(10px, 1vw, 18px);
    padding: clamp(37px, 3.3vh, 48px) clamp(12px, 1.2vw, 24px) clamp(12px, 1.4vh, 20px);
    border: 1px solid rgba(214, 184, 111, .3);
    border-radius: 0;
    background:
        linear-gradient(180deg, rgba(10, 19, 29, .86), rgba(2, 7, 13, .9)),
        radial-gradient(ellipse at 50% 0%, rgba(var(--draft-accent-rgb), .12), transparent 45%);
    box-shadow:
        0 22px 70px rgba(0, 0, 0, .64),
        inset 0 1px rgba(255, 255, 255, .035),
        inset 0 0 80px rgba(0, 0, 0, .24);
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}

body.bsv2-page #bsv2-arena::before {
    content: var(--draft-title);
    position: absolute;
    top: 13px;
    left: 50%;
    z-index: 5;
    transform: translateX(-50%);
    color: rgba(229, 217, 187, .72);
    font: 700 clamp(.48rem, .55vw, .63rem)/1 "Montserrat", sans-serif;
    letter-spacing: .24em;
    white-space: nowrap;
    text-shadow: 0 0 16px rgba(var(--draft-accent-rgb), .5);
}

body.bsv2-page #bsv2-arena::after {
    content: "";
    position: absolute;
    top: 30px;
    left: clamp(18px, 7vw, 130px);
    right: clamp(18px, 7vw, 130px);
    z-index: 4;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(var(--draft-accent-rgb), .55) 22%, rgba(231, 207, 145, .78) 50%, rgba(var(--draft-accent-rgb), .55) 78%, transparent);
    box-shadow: 0 0 12px rgba(var(--draft-accent-rgb), .25);
}

body.bsv2-page #bsv2-arena-frame { inset: 0; z-index: 4; }
body.bsv2-page .bsv2-corner { width: 58px; height: 58px; }
body.bsv2-page .bsv2-corner path {
    stroke: var(--draft-gold);
    stroke-width: 1.2;
    opacity: .62;
    filter: drop-shadow(0 0 6px rgba(215, 185, 109, .26));
}

/* ---------- Team wings ---------- */

body.bsv2-page .bsv2-team {
    position: relative;
    z-index: 1;
    gap: 7px;
    padding: 9px;
    border: 1px solid rgba(var(--draft-accent-rgb), .17);
    background:
        linear-gradient(180deg, rgba(var(--draft-accent-rgb), .055), transparent 28%),
        linear-gradient(90deg, rgba(5, 13, 21, .84), rgba(3, 8, 14, .66));
    box-shadow: inset 0 0 32px rgba(0, 0, 0, .28);
    clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%);
}

body.bsv2-page .bsv2-team:nth-of-type(2),
body.bsv2-page #bsv2-team-1,
body.bsv2-page #ranked-team-ai {
    border-color: rgba(var(--draft-rival-rgb), .18);
    background:
        linear-gradient(180deg, rgba(var(--draft-rival-rgb), .06), transparent 28%),
        linear-gradient(270deg, rgba(5, 13, 21, .84), rgba(3, 8, 14, .66));
    clip-path: polygon(11px 0, 100% 0, 100% 100%, 0 100%, 0 11px);
}

body.bsv2-page .bsv2-team::before {
    content: "SZÖVETSÉGES EGYSÉGEK";
    position: absolute;
    top: 54px;
    left: 13px;
    z-index: 2;
    color: rgba(var(--draft-accent-rgb), .67);
    font: 700 .47rem/1 "Montserrat", sans-serif;
    letter-spacing: .17em;
    text-transform: uppercase;
}

body.bsv2-page #bsv2-team-1::before,
body.bsv2-page #ranked-team-ai::before {
    content: "ELLENFÉL EGYSÉGEK";
    left: auto;
    right: 13px;
    color: rgba(var(--draft-rival-rgb), .7);
}

body.mission-setup-page #bsv2-team-0::before { content: "ELLENFÉL ALAKULAT"; }
body.mission-setup-page #bsv2-team-1::before { content: "BEVETÉSI ALAKULAT"; }
body.ranked-page #ranked-team-user::before { content: "SAJÁT DRAFT"; }
body.ranked-page #ranked-team-ai::before { content: "ELLENFÉL DRAFT"; }

/* Missionben a bal oldal a kötött ellenfél, a jobb oldal a játékosé. */
body.mission-setup-page #bsv2-team-0 {
    border-color: rgba(var(--draft-rival-rgb), .2);
    background:
        linear-gradient(180deg, rgba(var(--draft-rival-rgb), .065), transparent 28%),
        linear-gradient(90deg, rgba(5, 13, 21, .84), rgba(3, 8, 14, .66));
}

body.mission-setup-page #bsv2-team-1 {
    border-color: rgba(var(--draft-accent-rgb), .2);
    background:
        linear-gradient(180deg, rgba(var(--draft-accent-rgb), .065), transparent 28%),
        linear-gradient(270deg, rgba(5, 13, 21, .84), rgba(3, 8, 14, .66));
}

body.mission-setup-page #bsv2-team-0::before { color: rgba(var(--draft-rival-rgb), .72); }
body.mission-setup-page #bsv2-team-1::before { color: rgba(var(--draft-accent-rgb), .72); }

body.bsv2-page .bsv2-team-name {
    position: relative;
    z-index: 3;
    width: 100%;
    min-height: 38px;
    box-sizing: border-box;
    padding: 9px 12px 8px;
    border: 0;
    border-bottom: 1px solid rgba(var(--draft-accent-rgb), .52);
    border-radius: 0;
    outline: 0;
    background:
        linear-gradient(90deg, rgba(var(--draft-accent-rgb), .16), transparent 88%);
    color: #e9edf0;
    font-family: "AOW", "SpectralBold", serif;
    font-size: clamp(.86rem, 1vw, 1.08rem);
    letter-spacing: .11em;
    text-align: left;
    text-transform: uppercase;
}

body.bsv2-page #bsv2-team-1 .bsv2-team-name,
body.bsv2-page #ranked-team-ai .bsv2-team-name {
    border-bottom-color: rgba(var(--draft-rival-rgb), .52);
    background: linear-gradient(270deg, rgba(var(--draft-rival-rgb), .16), transparent 88%);
    color: #e9edf0;
    text-align: right;
}

body.mission-setup-page #bsv2-team-0 .bsv2-team-name {
    border-bottom-color: rgba(var(--draft-rival-rgb), .55);
    background: linear-gradient(90deg, rgba(var(--draft-rival-rgb), .16), transparent 88%);
}

body.mission-setup-page #bsv2-team-1 .bsv2-team-name {
    border-bottom-color: rgba(var(--draft-accent-rgb), .55);
    background: linear-gradient(270deg, rgba(var(--draft-accent-rgb), .16), transparent 88%);
}

body.bsv2-page .bsv2-team-name:focus {
    box-shadow: inset 0 -2px rgba(var(--draft-accent-rgb), .48), 0 8px 22px rgba(var(--draft-accent-rgb), .09);
}

body.bsv2-page .bsv2-team-spacer { flex-basis: 18px; }
body.bsv2-page .bsv2-slots { gap: 7px; }

body.bsv2-page .bsv2-slot {
    gap: 10px;
    min-height: 0;
    padding: 8px 9px;
    border: 1px solid rgba(109, 162, 181, .19);
    border-left: 2px solid rgba(var(--draft-accent-rgb), .44);
    border-radius: 0;
    background: rgba(2, 8, 14, .72);
    box-shadow: inset 0 1px rgba(255, 255, 255, .02);
    clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

body.bsv2-page .bsv2-slot-reverse {
    border-left: 1px solid rgba(109, 162, 181, .19);
    border-right: 2px solid rgba(var(--draft-rival-rgb), .45);
    clip-path: polygon(9px 0, 100% 0, 100% 100%, 0 100%, 0 9px);
}

body.bsv2-page .bsv2-slot-banner-bg {
    background-position: center 24%;
    filter: saturate(.9) contrast(1.04);
    opacity: .64;
    transform: scale(1.05);
}

body.bsv2-page .bsv2-slot::after {
    background:
        linear-gradient(90deg, rgba(2, 8, 14, .35), rgba(2, 8, 14, .72) 72%, rgba(2, 8, 14, .94)),
        linear-gradient(180deg, transparent, rgba(1, 4, 8, .4));
}

body.bsv2-page .bsv2-slot-reverse::after {
    background:
        linear-gradient(270deg, rgba(2, 8, 14, .35), rgba(2, 8, 14, .72) 72%, rgba(2, 8, 14, .94)),
        linear-gradient(180deg, transparent, rgba(1, 4, 8, .4));
}

body.bsv2-page .bsv2-slot.is-active {
    border-color: rgba(var(--draft-accent-rgb), .8);
    box-shadow: 0 0 22px rgba(var(--draft-accent-rgb), .18), inset 3px 0 rgba(var(--draft-accent-rgb), .28);
    animation: draftSlotPulse 1.8s ease-in-out infinite;
}

body.bsv2-page .bsv2-slot.is-editing {
    border-color: rgba(var(--draft-accent-rgb), .82);
    box-shadow: 0 0 22px rgba(var(--draft-accent-rgb), .2), inset 3px 0 rgba(var(--draft-accent-rgb), .24);
    animation: draftSlotPulse 1.8s ease-in-out infinite;
}

body.bsv2-page:not(.mission-setup-page) #bsv2-team-1 .bsv2-slot.is-active,
body.ranked-page #ranked-team-ai .bsv2-slot.is-active {
    border-color: rgba(var(--draft-rival-rgb), .8);
    box-shadow: 0 0 22px rgba(var(--draft-rival-rgb), .18), inset -3px 0 rgba(var(--draft-rival-rgb), .28);
    animation-name: draftRivalSlotPulse;
}

@keyframes draftSlotPulse {
    0%, 100% { box-shadow: 0 0 14px rgba(var(--draft-accent-rgb), .16), inset 3px 0 rgba(var(--draft-accent-rgb), .18); }
    50% { box-shadow: 0 0 25px rgba(var(--draft-accent-rgb), .34), inset 3px 0 rgba(var(--draft-accent-rgb), .3); }
}

@keyframes draftRivalSlotPulse {
    0%, 100% { box-shadow: 0 0 14px rgba(var(--draft-rival-rgb), .16), inset -3px 0 rgba(var(--draft-rival-rgb), .18); }
    50% { box-shadow: 0 0 25px rgba(var(--draft-rival-rgb), .34), inset -3px 0 rgba(var(--draft-rival-rgb), .3); }
}

body.bsv2-page .bsv2-slot.is-locked {
    border-color: rgba(var(--draft-accent-rgb), .42);
    box-shadow: inset 3px 0 rgba(var(--draft-accent-rgb), .14);
}

body.bsv2-page .bsv2-slot-reverse.is-locked {
    border-color: rgba(var(--draft-rival-rgb), .42);
    box-shadow: inset -3px 0 rgba(var(--draft-rival-rgb), .14);
}

body.bsv2-page .bsv2-slot.bsv2-slot-clickable:hover {
    transform: translateX(3px);
    border-color: rgba(var(--draft-accent-rgb), .72);
    box-shadow: 0 0 20px rgba(var(--draft-accent-rgb), .16), inset 3px 0 rgba(var(--draft-accent-rgb), .2);
}

body.bsv2-page .bsv2-slot-portrait {
    width: clamp(46px, 4.2vw, 68px);
    height: clamp(46px, 4.2vw, 68px);
}

body.bsv2-page .bsv2-slot-portrait::after {
    inset: 1px;
    border: 1px solid var(--role-color);
    box-shadow: 0 0 0 3px rgba(1, 5, 9, .75), 0 0 12px color-mix(in srgb, var(--role-color) 42%, transparent);
}

body.bsv2-page .bsv2-slot-avatar { inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); }
body.bsv2-page .bsv2-slot-name { font-size: clamp(.72rem, .9vw, .94rem); letter-spacing: .015em; text-shadow: 0 2px 8px #000; }
body.bsv2-page .bsv2-slot-role-label { margin-top: 3px; color: rgba(192, 210, 219, .55); font-size: clamp(.5rem, .58vw, .65rem); letter-spacing: .12em; }
body.bsv2-page .bsv2-slot-spells { gap: 4px; }
body.bsv2-page .bsv2-slot-spell-icon { width: clamp(18px, 1.5vw, 23px); height: clamp(18px, 1.5vw, 23px); border-radius: 2px; border-color: rgba(220, 192, 120, .48); }

/* ---------- Center / phase / filtering ---------- */

body.bsv2-page #bsv2-center { position: relative; z-index: 1; gap: 8px; }

body.bsv2-page #bsv2-pick-status {
    position: relative;
    min-height: 40px;
    padding: 7px clamp(54px, 9vw, 150px);
    border: 0;
    color: #eee9dc;
    font-family: "AOW", "SpectralBold", serif;
    font-size: clamp(.92rem, 1.35vw, 1.34rem);
    font-weight: 400;
    letter-spacing: .12em;
    line-height: 1.1;
    text-shadow: 0 2px 12px #000, 0 0 18px rgba(var(--draft-accent-rgb), .16);
    animation: none;
}

body.bsv2-page #bsv2-pick-status::before,
body.bsv2-page #bsv2-pick-status::after {
    content: "";
    position: absolute;
    top: 50%;
    width: clamp(30px, 8vw, 130px);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--draft-accent-rgb), .65));
}

body.bsv2-page #bsv2-pick-status::before { left: 8px; }
body.bsv2-page #bsv2-pick-status::after { right: 8px; transform: rotate(180deg); }

body.bsv2-page #bsv2-filterbar {
    flex-basis: 48px;
    height: 48px;
    gap: 14px;
    padding: 6px 8px 6px 11px;
    border: 1px solid rgba(116, 159, 175, .2);
    border-radius: 0;
    background: linear-gradient(180deg, rgba(11, 23, 34, .83), rgba(4, 11, 18, .9));
    box-shadow: inset 0 1px rgba(255, 255, 255, .025), 0 8px 18px rgba(0, 0, 0, .2);
    clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
}

body.bsv2-page #bsv2-class-filters { gap: 5px; scrollbar-width: none; }
body.bsv2-page #bsv2-class-filters::-webkit-scrollbar { display: none; }

body.bsv2-page .bsv2-class-filter-btn {
    width: 33px;
    height: 33px;
    border: 1px solid rgba(110, 154, 171, .16);
    border-radius: 1px;
    background: rgba(1, 7, 12, .56);
    color: #91a5af;
    clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 0 100%);
}

body.bsv2-page .bsv2-class-filter-btn img { width: 22px; height: 22px; opacity: .68; filter: grayscale(.2); }
body.bsv2-page .bsv2-class-filter-btn:hover { border-color: rgba(var(--draft-accent-rgb), .5); background: rgba(var(--draft-accent-rgb), .08); }
body.bsv2-page .bsv2-class-filter-btn:hover img { opacity: 1; filter: drop-shadow(0 0 5px rgba(var(--draft-accent-rgb), .5)); }
body.bsv2-page .bsv2-class-filter-btn.is-active {
    border-color: rgba(var(--draft-accent-rgb), .8);
    background: linear-gradient(145deg, rgba(var(--draft-accent-rgb), .18), rgba(var(--draft-accent-rgb), .04));
    box-shadow: 0 0 12px rgba(var(--draft-accent-rgb), .18), inset 0 0 10px rgba(var(--draft-accent-rgb), .08);
}
body.bsv2-page .bsv2-class-filter-btn.is-active img { opacity: 1; filter: drop-shadow(0 0 5px rgba(var(--draft-accent-rgb), .6)); }

body.bsv2-page #bsv2-sort,
body.bsv2-page #ranked-sort,
body.bsv2-page #bsv2-search,
body.bsv2-page #ranked-search {
    height: 34px;
    box-sizing: border-box;
    border: 1px solid rgba(127, 164, 176, .25);
    border-radius: 0;
    background: rgba(1, 7, 12, .74);
    color: #c4d0d5;
    font-family: "Montserrat", sans-serif;
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .035em;
}

body.bsv2-page #bsv2-sort:hover,
body.bsv2-page #ranked-sort:hover,
body.bsv2-page #bsv2-search:hover,
body.bsv2-page #ranked-search:hover,
body.bsv2-page #bsv2-sort:focus,
body.bsv2-page #ranked-sort:focus,
body.bsv2-page #bsv2-search:focus,
body.bsv2-page #ranked-search:focus {
    border-color: rgba(var(--draft-accent-rgb), .62);
    background: rgba(5, 17, 25, .92);
    box-shadow: 0 0 13px rgba(var(--draft-accent-rgb), .1);
}

body.bsv2-page #bsv2-search-icon { stroke: rgba(var(--draft-accent-rgb), .65); }

/* ---------- Champion archive grid ---------- */

body.bsv2-page #bsv2-grid-wrap {
    border: 1px solid rgba(116, 159, 175, .21);
    border-radius: 0;
    background:
        radial-gradient(ellipse at 50% 20%, rgba(var(--draft-accent-rgb), .055), transparent 50%),
        linear-gradient(180deg, rgba(4, 12, 20, .82), rgba(1, 6, 11, .92));
    box-shadow: inset 0 0 55px rgba(0, 0, 0, .34), 0 12px 28px rgba(0, 0, 0, .24);
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}

body.bsv2-page #bsv2-grid-wrap::before {
    background:
        linear-gradient(rgba(var(--draft-accent-rgb), .018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--draft-accent-rgb), .018) 1px, transparent 1px),
        radial-gradient(circle at 50% 34%, rgba(var(--draft-accent-rgb), .08), transparent 58%);
    background-size: 38px 38px, 38px 38px, auto;
    opacity: .8;
    mix-blend-mode: screen;
}

body.bsv2-page #bsv2-grid {
    grid-template-columns: repeat(10, minmax(0, 1fr));
    grid-auto-rows: max-content;
    container-type: inline-size;
    justify-content: stretch;
    column-gap: clamp(7px, .55vw, 11px);
    row-gap: clamp(9px, .7vw, 14px);
    align-items: start;
    padding: clamp(11px, .85vw, 17px);
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--draft-accent-rgb), .45) rgba(2, 7, 12, .55);
}

body.bsv2-page #bsv2-grid::-webkit-scrollbar { width: 5px; }
body.bsv2-page #bsv2-grid::-webkit-scrollbar-track { background: rgba(2, 7, 12, .6); }
body.bsv2-page #bsv2-grid::-webkit-scrollbar-thumb { background: linear-gradient(var(--draft-gold), var(--draft-accent)); }

body.bsv2-page .bsv2-champ-card {
    isolation: isolate;
    display: block;
    min-width: 0;
    min-height: 0;
    height: calc((100cqw - 99px) / 10);
    align-self: start;
    aspect-ratio: auto;
    overflow: hidden;
    border: 1px solid rgba(119, 154, 167, .23);
    border-radius: 0;
    background: #03080e;
    box-shadow: 0 7px 16px rgba(0, 0, 0, .34);
    clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
    transition: transform 180ms cubic-bezier(.2,.75,.2,1), border-color 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

body.bsv2-page .bsv2-champ-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 48%, rgba(1, 5, 9, .45) 67%, rgba(1, 5, 9, .98) 100%);
}

body.bsv2-page .bsv2-champ-card::after {
    content: "";
    position: absolute;
    left: 9px;
    right: 9px;
    bottom: 0;
    z-index: 3;
    height: 1px;
    opacity: .45;
    background: linear-gradient(90deg, transparent, rgba(var(--draft-accent-rgb), .8), transparent);
}

body.bsv2-page .bsv2-champ-card > img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    object-fit: cover;
    filter: saturate(.9) brightness(.9) contrast(1.03);
    transform: none;
    transition: transform 260ms ease, filter 180ms ease;
}

body.bsv2-page .bsv2-champ-name {
    position: absolute;
    left: 5px;
    right: 5px;
    bottom: 8px;
    z-index: 2;
    max-width: none;
    color: rgba(236, 239, 236, .86);
    font-family: "Montserrat", sans-serif;
    font-size: clamp(.48rem, .52vw, .61rem);
    font-weight: 700;
    letter-spacing: .075em;
    line-height: 1.1;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 2px 7px #000;
}

body.bsv2-page .bsv2-champ-card:hover:not(:disabled) {
    z-index: 5;
    transform: translateY(-2px);
    border-color: rgba(var(--draft-accent-rgb), .78);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .52), 0 0 19px rgba(var(--draft-accent-rgb), .21);
}

body.bsv2-page .bsv2-champ-card:hover:not(:disabled) > img {
    border: 0;
    filter: saturate(1.08) brightness(1.08);
    box-shadow: none;
    transform: scale(1.025);
}

body.bsv2-page .bsv2-champ-card.is-selected {
    z-index: 8;
    border-color: #fff0ad;
    outline: 1px solid rgba(255, 218, 112, .82);
    outline-offset: 2px;
    box-shadow:
        0 0 0 1px rgba(255, 248, 203, .38) inset,
        0 0 14px rgba(255, 219, 108, .72),
        0 0 32px rgba(var(--draft-accent-rgb), .46),
        0 13px 28px rgba(0, 0, 0, .72);
    transform: translateY(-2px) scale(1.025);
    animation: draftChampionSelected 1.8s ease-in-out infinite;
}

body.bsv2-page .bsv2-champ-card.is-selected::before {
    opacity: 1;
    background:
        linear-gradient(112deg, transparent 20%, rgba(255, 246, 197, 0) 38%, rgba(255, 246, 197, .42) 49%, rgba(255, 246, 197, 0) 60%, transparent 78%) -160% 0 / 230% 100% no-repeat,
        radial-gradient(circle at 50% 0, rgba(255, 224, 126, .35), transparent 45%),
        linear-gradient(180deg, transparent 38%, rgba(2, 6, 10, .34) 63%, rgba(1, 4, 8, .96) 100%);
    animation: draftChampionSweep 2.4s cubic-bezier(.4, 0, .2, 1) infinite;
}

body.bsv2-page .bsv2-champ-card.is-selected::after {
    inset: 5px;
    width: auto;
    height: auto;
    opacity: 1;
    background:
        linear-gradient(90deg, #fff0a9, #c99332) left top / 22px 2px no-repeat,
        linear-gradient(180deg, #fff0a9, #c99332) left top / 2px 22px no-repeat,
        linear-gradient(270deg, #fff0a9, #c99332) right top / 22px 2px no-repeat,
        linear-gradient(180deg, #fff0a9, #c99332) right top / 2px 22px no-repeat,
        linear-gradient(90deg, #c99332, #fff0a9) left bottom / 22px 2px no-repeat,
        linear-gradient(0deg, #fff0a9, #c99332) left bottom / 2px 22px no-repeat,
        linear-gradient(270deg, #c99332, #fff0a9) right bottom / 22px 2px no-repeat,
        linear-gradient(0deg, #fff0a9, #c99332) right bottom / 2px 22px no-repeat;
    filter: drop-shadow(0 0 4px rgba(255, 218, 105, .95));
    animation: draftChampionCorners 1.8s ease-in-out infinite;
}

body.bsv2-page .bsv2-champ-card.is-selected > img {
    border: 0;
    filter: saturate(1.22) brightness(1.12) contrast(1.06);
    box-shadow: none;
    transform: scale(1.045);
}

body.bsv2-page .bsv2-champ-card.is-selected .bsv2-champ-name {
    color: #fff3bd;
    font-weight: 800;
    letter-spacing: .12em;
    text-shadow: 0 1px 3px #000, 0 0 9px rgba(255, 211, 91, .82);
}

@keyframes draftChampionSelected {
    0%, 100% {
        box-shadow: 0 0 0 1px rgba(255, 248, 203, .34) inset, 0 0 12px rgba(255, 219, 108, .62), 0 0 27px rgba(var(--draft-accent-rgb), .38), 0 13px 28px rgba(0, 0, 0, .72);
    }
    50% {
        box-shadow: 0 0 0 1px rgba(255, 248, 203, .52) inset, 0 0 19px rgba(255, 229, 137, .88), 0 0 42px rgba(var(--draft-accent-rgb), .56), 0 13px 28px rgba(0, 0, 0, .72);
    }
}

@keyframes draftChampionSweep {
    0%, 18% { background-position: -160% 0, center, center; }
    62%, 100% { background-position: 155% 0, center, center; }
}

@keyframes draftChampionCorners {
    0%, 100% { opacity: .76; filter: drop-shadow(0 0 3px rgba(255, 218, 105, .72)); }
    50% { opacity: 1; filter: drop-shadow(0 0 7px rgba(255, 230, 147, 1)); }
}

body.bsv2-page .bsv2-champ-card.is-disabled { opacity: .24; filter: grayscale(.9) brightness(.62); }
body.ranked-page .bsv2-champ-card.is-ban-selected { border-color: rgba(var(--draft-rival-rgb), .9); box-shadow: 0 0 18px rgba(var(--draft-rival-rgb), .35); }
body.ranked-page .bsv2-champ-card.is-ban-selected > img { border: 0; box-shadow: none; }

body.bsv2-page .bsv2-champ-card .ranked-card-badge {
    z-index: 4;
    border-radius: 0;
    font-family: "Montserrat", sans-serif;
    backdrop-filter: blur(2px);
}

/* ---------- Loadout command dock ---------- */

body.bsv2-page #bsv2-loadout-bar {
    z-index: 3;
    gap: 9px;
    min-height: 58px;
    padding: 8px clamp(12px, 1.3vw, 24px);
}

body.bsv2-page #bsv2-loadout-bar::before {
    border: 1px solid rgba(213, 184, 111, .34);
    border-radius: 0;
    background:
        linear-gradient(180deg, rgba(16, 27, 36, .94), rgba(3, 9, 15, .96)),
        radial-gradient(ellipse at 50% 0%, rgba(var(--draft-accent-rgb), .1), transparent 60%);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .52), inset 0 1px rgba(255, 255, 255, .035);
    clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%, 0 10px);
}

body.bsv2-page #bsv2-loadout-bar::after {
    content: var(--draft-code);
    position: absolute;
    top: -7px;
    left: 50%;
    z-index: 2;
    transform: translateX(-50%);
    padding: 0 11px;
    background: #071019;
    color: rgba(218, 201, 158, .62);
    font: 700 .44rem/1 "Montserrat", sans-serif;
    letter-spacing: .19em;
    white-space: nowrap;
}

body.bsv2-page #bsv2-action-row { gap: 7px; }

body.bsv2-page #bsv2-lockin-btn,
body.bsv2-page #bsv2-randomize-btn,
body.bsv2-page #ranked-lockin-btn,
body.bsv2-page #ranked-confirm-btn {
    min-width: clamp(126px, 9vw, 178px);
    min-height: 39px;
    padding: 9px 17px;
    border: 1px solid rgba(243, 221, 160, .64);
    border-radius: 0;
    background: linear-gradient(180deg, #e7ce8a, #9e762b);
    color: #171005;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(.63rem, .76vw, .82rem);
    font-weight: 800;
    letter-spacing: .15em;
    box-shadow: 0 0 17px rgba(211, 176, 90, .17), inset 0 1px rgba(255, 255, 255, .36);
    clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
}

body.ranked-page #ranked-confirm-btn {
    border-color: rgba(245, 137, 129, .65);
    background: linear-gradient(180deg, #ef8a82, #8f292d);
    color: #210506;
}

body.bsv2-page #bsv2-lockin-btn:hover:not(:disabled),
body.bsv2-page #bsv2-randomize-btn:hover,
body.bsv2-page #ranked-lockin-btn:hover:not(:disabled),
body.bsv2-page #ranked-confirm-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(229, 199, 120, .38), inset 0 1px rgba(255, 255, 255, .4);
}

body.bsv2-page #bsv2-lockin-btn:disabled,
body.bsv2-page #ranked-lockin-btn:disabled,
body.bsv2-page #ranked-confirm-btn:disabled {
    border-color: rgba(135, 153, 160, .17);
    background: linear-gradient(180deg, rgba(54, 67, 75, .32), rgba(18, 27, 34, .38));
    color: rgba(166, 180, 186, .4);
    box-shadow: none;
}

body.bsv2-page #bsv2-randomize-btn {
    border-color: rgba(var(--draft-accent-rgb), .42);
    background: linear-gradient(180deg, rgba(29, 67, 78, .96), rgba(8, 30, 39, .96));
    color: #b8eef6;
}

body.bsv2-page #bsv2-edit-cancel-btn {
    border: 1px solid rgba(var(--draft-accent-rgb), .48);
    border-radius: 0;
    background: rgba(5, 24, 32, .9);
    box-shadow: 0 0 14px rgba(var(--draft-accent-rgb), .14);
}

body.bsv2-page .bsv2-loadout-sep,
body.bsv2-page #bsv2-loadout-divider,
body.bsv2-page .bsv2-spell-separator {
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(215, 185, 109, .68), transparent);
}

body.bsv2-page #bsv2-game-mode,
body.bsv2-page #bsv2-ai-spell-toggle,
body.bsv2-page #bsv2-ai-item-toggle,
body.bsv2-page #bsv2-runepage,
body.bsv2-page .ranked-ai-toggle {
    min-height: 38px;
    box-sizing: border-box;
    border: 1px solid rgba(131, 162, 174, .24);
    border-radius: 0;
    background: rgba(3, 11, 18, .76);
    color: #bdc9cf;
    font-family: "Montserrat", sans-serif;
    font-size: .63rem;
    letter-spacing: .04em;
}

body.bsv2-page #bsv2-game-mode:hover,
body.bsv2-page #bsv2-ai-spell-toggle:hover,
body.bsv2-page #bsv2-ai-item-toggle:hover,
body.bsv2-page #bsv2-runepage:hover,
body.bsv2-page .ranked-ai-toggle:hover {
    border-color: rgba(var(--draft-accent-rgb), .55);
    background: rgba(7, 24, 33, .92);
    box-shadow: 0 0 13px rgba(var(--draft-accent-rgb), .12);
}

body.bsv2-page #bsv2-runepage { min-width: 160px; }
body.bsv2-page #bsv2-runepage-icon { width: 24px; height: 24px; filter: drop-shadow(0 0 6px rgba(var(--draft-accent-rgb), .35)); }
body.bsv2-page #bsv2-runepage-name { color: #c7d3d6; font-size: .66rem; }
body.bsv2-page #bsv2-runepage-dropdown {
    border: 1px solid rgba(var(--draft-accent-rgb), .52);
    border-radius: 0;
    background: rgba(2, 9, 15, .98);
    box-shadow: 0 15px 38px rgba(0, 0, 0, .68), 0 0 22px rgba(var(--draft-accent-rgb), .1);
}

body.bsv2-page .bsv2-runepage-option.is-active { color: var(--draft-accent-soft); border-left-color: var(--draft-accent); background: rgba(var(--draft-accent-rgb), .08); }

body.bsv2-page .bsv2-spell-slot {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(215, 185, 109, .42);
    border-radius: 0;
    background: #030a10;
    box-shadow: inset 0 0 9px rgba(0, 0, 0, .72), 0 0 0 3px rgba(4, 11, 17, .75);
    clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 0 100%);
}

body.bsv2-page .bsv2-spell-slot:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.04);
    border-color: var(--draft-gold-bright);
    box-shadow: 0 0 14px rgba(215, 185, 109, .28);
}

/* ---------- Mission briefing ---------- */

body.mission-setup-page #msv2-mission-bar {
    position: relative;
    min-height: 48px;
    margin: 0;
    padding: 7px 15px 7px 17px;
    border: 1px solid rgba(var(--draft-accent-rgb), .35);
    border-left: 3px solid var(--draft-accent);
    border-radius: 0;
    background:
        linear-gradient(90deg, rgba(var(--draft-accent-rgb), .12), transparent 34%),
        rgba(3, 12, 18, .88);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .25), inset 0 1px rgba(255, 255, 255, .025);
    clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
}

body.mission-setup-page .msv2-mission-bar-number { color: rgba(var(--draft-accent-rgb), .75); font: 700 .52rem/1 "Montserrat", sans-serif; letter-spacing: .17em; }
body.mission-setup-page .msv2-mission-bar-name { color: #e8eee9; font-family: "AOW", serif; font-size: clamp(.95rem, 1.2vw, 1.22rem); letter-spacing: .035em; }
body.mission-setup-page .msv2-mission-bar-difficulty { border-color: rgba(var(--draft-rival-rgb), .56); border-radius: 1px; background: rgba(var(--draft-rival-rgb), .08); color: #f0a498; font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; }
body.mission-setup-page .msv2-mission-bar-rule { color: rgba(211, 222, 221, .72); font-size: .7rem; }
body.mission-setup-page .msv2-mission-bar-rule-icon { color: var(--draft-accent); text-shadow: 0 0 8px rgba(var(--draft-accent-rgb), .6); }
body.mission-setup-page .msv2-slot-index { color: var(--draft-accent-soft); text-shadow: 0 0 9px rgba(var(--draft-accent-rgb), .45); }

/* ---------- Ranked ban terminal ---------- */

body.ranked-page #bsv2-bottom-row { gap: 10px; }
body.ranked-page #ranked-ban-row {
    gap: 10px;
    min-height: 58px;
    box-sizing: border-box;
    padding: 7px 14px;
    border: 1px solid rgba(var(--draft-rival-rgb), .34);
    border-radius: 0;
    background: linear-gradient(180deg, rgba(42, 12, 15, .72), rgba(13, 5, 9, .86));
    box-shadow: 0 10px 28px rgba(0, 0, 0, .4), inset 0 1px rgba(255, 255, 255, .025);
    clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%, 0 7px);
}

body.ranked-page #ranked-ban-row-label { color: #e98b86; font-size: .53rem; font-weight: 700; letter-spacing: .17em; }
body.ranked-page #ranked-ban-slots { gap: 6px; }
body.ranked-page .ranked-ban-slot {
    width: 38px;
    height: 38px;
    border-radius: 0;
    border-color: rgba(var(--draft-rival-rgb), .42);
    background: rgba(3, 7, 12, .76);
    clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 0 100%);
}
body.ranked-page .ranked-ban-slot.is-filled { box-shadow: 0 0 12px rgba(var(--draft-rival-rgb), .2); }
body.ranked-page .ranked-ban-slot img { filter: grayscale(.75) brightness(.55) contrast(1.15); }

/* ---------- Popups / audio / transition ---------- */

body.bsv2-page .bsv2-popup-window {
    border: 1px solid rgba(var(--draft-accent-rgb), .42);
    border-radius: 0;
    background: rgba(2, 9, 15, .98);
    box-shadow: 0 22px 52px rgba(0, 0, 0, .72), 0 0 28px rgba(var(--draft-accent-rgb), .1);
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

body.bsv2-page .bsv2-popup-item { border-radius: 0; border-color: rgba(129, 163, 174, .22); background: rgba(3, 10, 16, .75); }
body.bsv2-page .bsv2-popup-item:hover,
body.bsv2-page .bsv2-popup-item.is-selected { border-color: var(--draft-accent); background: rgba(var(--draft-accent-rgb), .1); box-shadow: 0 0 13px rgba(var(--draft-accent-rgb), .17); }

body.bsv2-page #bsv2-audio-controls { right: clamp(12px, 1.5vw, 26px); bottom: clamp(12px, 1.5vw, 22px); z-index: 8; }
body.bsv2-page .bsv2-audio-btn {
    width: 35px;
    height: 35px;
    border: 1px solid rgba(var(--draft-accent-rgb), .24);
    border-radius: 0;
    background: rgba(2, 9, 15, .8);
    clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 0 100%);
}
body.bsv2-page .bsv2-audio-btn:hover { border-color: rgba(var(--draft-accent-rgb), .65); background: rgba(5, 23, 31, .94); box-shadow: 0 0 14px rgba(var(--draft-accent-rgb), .14); }

body.bsv2-page #bsv2-transition {
    background:
        radial-gradient(ellipse at center, rgba(var(--draft-accent-rgb), .18), transparent 44%),
        rgba(1, 5, 9, .96);
}
body.bsv2-page #bsv2-transition-text { color: #f2ead7; text-shadow: 0 0 28px rgba(var(--draft-accent-rgb), .55); }

/* ---------- Responsive density ---------- */

@media (max-width: 1500px) and (min-width: 821px) {
    body.bsv2-page #bsv2-arena {
        grid-template-columns: clamp(170px, 13.5vw, 220px) minmax(0, 1fr) clamp(170px, 13.5vw, 220px);
        padding-inline: 12px;
        gap: 9px;
    }
    body.bsv2-page #bsv2-grid { grid-template-columns: repeat(9, minmax(0, 1fr)); column-gap: 7px; row-gap: 9px; padding: 10px; }
    body.bsv2-page .bsv2-champ-card { height: calc((100cqw - 56px) / 9); }
    body.bsv2-page .bsv2-slot { padding: 6px; gap: 7px; }
    body.bsv2-page .bsv2-slot-portrait { width: 48px; height: 48px; }
    body.bsv2-page .bsv2-slot-spells { display: none; }
    body.bsv2-page .bsv2-team::before { font-size: .42rem; }
    body.bsv2-page:not(.ranked-page):not(.mission-setup-page) #bsv2-arena {
        margin-top: 8px;
        height: calc(100vh - 76px);
        height: calc(100dvh - 76px);
    }
}

@media (max-height: 820px) and (min-width: 821px) {
    body.bsv2-page #bsv2-arena { padding-top: 35px; padding-bottom: 7px; }
    body.bsv2-page #bsv2-arena::before { top: 11px; }
    body.bsv2-page #bsv2-arena::after { top: 27px; }
    body.bsv2-page .bsv2-team { padding: 6px; gap: 4px; }
    body.bsv2-page .bsv2-team-name { min-height: 30px; padding-block: 6px; font-size: .78rem; }
    body.bsv2-page .bsv2-team::before { top: 41px; }
    body.bsv2-page .bsv2-team-spacer { flex-basis: 12px; }
    body.bsv2-page .bsv2-slots { gap: 4px; }
    body.bsv2-page .bsv2-slot { padding-block: 4px; }
    body.bsv2-page .bsv2-slot-portrait { width: 42px; height: 42px; }
    body.bsv2-page #bsv2-pick-status { min-height: 30px; padding-block: 3px; font-size: .88rem; }
    body.bsv2-page #bsv2-filterbar { flex-basis: 39px; height: 39px; padding-block: 3px; }
    body.bsv2-page .bsv2-class-filter-btn { width: 29px; height: 29px; }
    body.bsv2-page .bsv2-class-filter-btn img { width: 19px; height: 19px; }
    body.bsv2-page #bsv2-grid { column-gap: 5px; row-gap: 7px; padding: 7px; }
    body.bsv2-page .bsv2-champ-card { height: calc((100cqw - 40px) / 9); }
    body.bsv2-page #bsv2-loadout-bar { min-height: 50px; padding-block: 5px; }
    body.bsv2-page #bsv2-lockin-btn,
    body.bsv2-page #bsv2-randomize-btn,
    body.bsv2-page #ranked-lockin-btn,
    body.bsv2-page #ranked-confirm-btn { min-height: 34px; padding-block: 7px; }
    body.bsv2-page #bsv2-game-mode,
    body.bsv2-page #bsv2-ai-spell-toggle,
    body.bsv2-page #bsv2-ai-item-toggle,
    body.bsv2-page #bsv2-runepage,
    body.bsv2-page .ranked-ai-toggle { min-height: 34px; }
    body.bsv2-page .bsv2-spell-slot { width: 36px; height: 36px; }
    body.mission-setup-page #msv2-mission-bar { min-height: 38px; padding-block: 4px; }
    body.ranked-page #ranked-ban-row { min-height: 50px; padding-block: 5px; }
    body.ranked-page .ranked-ban-slot { width: 32px; height: 32px; }
}

@media (max-width: 820px) {
    body.bsv2-page { overflow-y: auto; }
    body.bsv2-page #bsv2-arena {
        width: calc(100% - 12px);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
        padding: 38px 8px 10px;
        clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
    }
    body.bsv2-page:not(.ranked-page):not(.mission-setup-page) #bsv2-arena {
        margin-top: 8px;
        height: auto;
    }
    body.bsv2-page #bsv2-center { grid-column: 1 / -1; }
    body.bsv2-page .bsv2-team { min-height: 340px; padding: 7px; }
    body.bsv2-page .bsv2-team::before { top: 45px; }
    body.bsv2-page .bsv2-team-spacer { flex-basis: 15px; }
    body.bsv2-page #bsv2-grid-wrap { height: clamp(430px, 64vh, 620px); }
    body.bsv2-page #bsv2-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    body.bsv2-page .bsv2-champ-card { height: calc((100cqw - 35px) / 8); }
    body.bsv2-page #bsv2-filterbar { height: auto; min-height: 46px; flex-wrap: wrap; }
    body.bsv2-page #bsv2-class-filters { flex: 1 1 280px; }
    body.bsv2-page #bsv2-filterbar-right { flex: 1 1 260px; justify-content: flex-end; }
    body.bsv2-page #bsv2-loadout-bar { padding: 12px; }
    body.bsv2-page #bsv2-loadout-bar::after { display: none; }
    body.ranked-page #bsv2-bottom-row { grid-column: 1 / -1; }
    body.mission-setup-page #msv2-mission-bar { align-items: center; }
}

@media (max-width: 520px) {
    body.bsv2-page #bsv2-arena::before { font-size: .42rem; letter-spacing: .15em; }
    body.bsv2-page #bsv2-arena::after { left: 18px; right: 18px; }
    body.bsv2-page #bsv2-pick-status { padding-inline: 36px; font-size: .76rem; }
    body.bsv2-page #bsv2-pick-status::before,
    body.bsv2-page #bsv2-pick-status::after { width: 25px; }
    body.bsv2-page #bsv2-filterbar-right { justify-content: stretch; }
    body.bsv2-page #bsv2-sort,
    body.bsv2-page #ranked-sort { flex: 1; min-width: 112px; }
    body.bsv2-page #bsv2-search-wrap { flex: 1; }
    body.bsv2-page #bsv2-search,
    body.bsv2-page #ranked-search { width: 100%; }
    body.bsv2-page #bsv2-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 5px; row-gap: 7px; padding: 6px; }
    body.bsv2-page .bsv2-champ-card { height: calc((100cqw - 15px) / 4); }
    body.bsv2-page .bsv2-champ-name { bottom: 6px; font-size: .44rem; }
    body.bsv2-page .bsv2-team { grid-column: 1 / -1; min-height: 360px; }
    body.bsv2-page #bsv2-loadout-bar { grid-column: 1 / -1; }
    body.bsv2-page #bsv2-lockin-btn,
    body.bsv2-page #bsv2-randomize-btn,
    body.bsv2-page #ranked-lockin-btn,
    body.bsv2-page #ranked-confirm-btn { min-width: 118px; }
    body.bsv2-page .bsv2-loadout-sep { display: none; }
    body.ranked-page #ranked-ban-row { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    body.bsv2-page .bsv2-slot.is-active,
    body.bsv2-page .bsv2-slot.is-editing,
    body.bsv2-page .bsv2-champ-card.is-selected,
    body.bsv2-page .bsv2-champ-card.is-selected::before,
    body.bsv2-page .bsv2-champ-card.is-selected::after { animation: none; }
    body.bsv2-page .bsv2-champ-card,
    body.bsv2-page .bsv2-champ-card > img { transition: none; }
}