/* ============================================================
   BATTLE MVP — MATCHES  |  Premium Neon Pro
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  --green:       #00ff9a;
  --green-dim:   rgba(0,255,154,.12);
  --green-glow:  rgba(0,255,154,.25);
  --purple:      #9b5cff;
  --purple-dim:  rgba(155,92,255,.12);
  --blue:        #4ecaff;
  --red:         #ff3d5a;
  --gold:        #ffcc44;
  --surface:     #0b1118;
  --surface2:    #0f1820;
  --surface3:    #141f2a;
  --border:      rgba(255,255,255,.06);
  --border2:     rgba(255,255,255,.1);
  --text:        #e2eefa;
  --text2:       #6a8099;
  --text3:       #2e3e50;
  --r:           13px;
  --r-sm:        8px;
  --dur:         .2s;
}
.bm-matches *,
.bm-matches *::before,
.bm-matches *::after{
    box-sizing:border-box;
}

.bm-matches{

    width:100%;

    max-width:none;

    padding:24px 0 60px;

    font-family:'Inter',sans-serif;

    color:var(--text);
}

.bm-matches > *{

    width:100%;
}

/* SECTION LABEL */
.bm-section{display:flex;align-items:center;gap:10px;margin:22px 0 8px;font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--text3)}
.bm-section__dot{width:6px;height:6px;border-radius:50%;background:var(--text3);flex-shrink:0}
.bm-section--live .bm-section__dot{background:var(--red);box-shadow:0 0 8px var(--red);animation:bm-pulse 1.4s infinite}
.bm-section--wait .bm-section__dot{background:var(--blue);box-shadow:0 0 6px var(--blue)}
.bm-section--server .bm-section__dot{background:var(--purple);box-shadow:0 0 6px var(--purple)}
.bm-section__count{background:rgba(255,255,255,.05);color:var(--text3);font-size:9px;padding:1px 7px;border-radius:99px}
.bm-section::after{content:'';flex:1;height:1px;background:var(--border)}
@keyframes bm-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(1.6)}}

/* FILTERS */
.bm-filters{display:flex;align-items:center;gap:6px;margin-bottom:20px;flex-wrap:wrap}
.bm-filters__sep{flex:1}
.bm-filter{font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:6px 13px;border-radius:6px;border:1px solid var(--border2);background:transparent;color:var(--text2);cursor:pointer;transition:var(--dur);user-select:none;font-family:'Inter',sans-serif}
.bm-filter:hover{color:var(--text);border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.04)}
.bm-filter.active{background:var(--green);color:#001a0f;border-color:var(--green);box-shadow:0 0 14px var(--green-glow)}
.bm-filter[data-mode].active{background:var(--purple);color:#fff;border-color:var(--purple);box-shadow:0 0 14px rgba(155,92,255,.4)}



.bm-match:hover{

    transform:translateY(-3px);

    border-color:rgba(0,255,154,.22);

    box-shadow:
    0 0 45px rgba(0,255,154,.08),
    0 20px 60px rgba(0,0,0,.45);
}

.bm-match.active{border-color:rgba(0,255,154,.32);box-shadow:0 0 36px rgba(0,255,154,.09)}

/* top accent line */
.bm-match__line{height:2px;background:linear-gradient(90deg,var(--green) 0%,rgba(0,255,154,0) 70%)}
.bm-match.mode-5v5 .bm-match__line{background:linear-gradient(90deg,var(--purple) 0%,rgba(155,92,255,0) 70%)}


.bm-badge{font-size:9px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;padding:3px 8px;border-radius:4px;width:fit-content}
.bm-badge--1v1{background:var(--green-dim);color:var(--green);border:1px solid rgba(0,255,154,.2)}
.bm-badge--5v5{background:var(--purple-dim);color:var(--purple);border:1px solid rgba(155,92,255,.2)}
.bm-id{font-size:24px;font-weight:900;color:rgba(255,255,255,.06);letter-spacing:-1px;line-height:1}


.bm-avatar{

    width:30px;
    height:30px;

    border-radius:10px;

    flex-shrink:0;

    object-fit:cover;

    border:1px solid rgba(255,255,255,.08);
}
.bm-avatars{display:flex;gap:3px;flex-shrink:0}
.bm-avatars .bm-avatar{width:24px;height:24px;border-radius:5px}

.bm-stat{

    min-width:auto;
}

.bm-stat__val--rp{

    color:#7dcfff;

    font-weight:700;

    opacity:.9;
}
.bm-stat__val--adr{color:var(--blue)}
.bm-stat__val--elo{color:var(--gold)}
.bm-stat__val--rank{

    color:#7dd3fc;

    font-size:11px;

    font-weight:900;

    text-shadow:
        0 0 12px rgba(125,211,252,.45);
}

.bm-stat-sep{width:1px;height:14px;background:var(--border);flex-shrink:0}

.bm-status{font-size:8px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;padding:2px 6px;;border-radius:4px;display:flex;align-items:center;gap:4px;white-space:nowrap}
.bm-status--live{background:rgba(255,61,90,.1);color:var(--red);border:1px solid rgba(255,61,90,.22)}
.bm-status--waiting{background:rgba(78,202,255,.07);color:var(--blue);border:1px solid rgba(78,202,255,.18)}
.bm-status--server{background:var(--purple-dim);color:var(--purple);border:1px solid rgba(155,92,255,.22)}
.bm-status--finished{background:rgba(255,255,255,.03);color:var(--text3);border:1px solid var(--border)}
.bm-live-dot{width:5px;height:5px;border-radius:50%;background:var(--red);box-shadow:0 0 6px var(--red);animation:bm-pulse 1.4s infinite;flex-shrink:0}

/* chevron */
.bm-chevron{display:flex;align-items:center;justify-content:center;color:var(--text3);transition:color var(--dur),transform var(--dur)}
.bm-match.active .bm-chevron{color:var(--green);transform:rotate(180deg)}

/* winbar */
.bm-winbar{height:2px;display:flex;background:var(--surface3)}
.bm-winbar__a{background:var(--green);transition:width .5s ease}
.bm-winbar__b{background:var(--purple);flex:1}

/* ── LEVEL 2 EXPANDED ── */
.bm-expand{max-height:0;overflow:hidden;opacity:0;transition:max-height .38s ease,opacity .28s ease;border-top:1px solid transparent}
.bm-match.active .bm-expand{

    max-height:1400px;

    opacity:1;

    border-top-color:var(--border);
}

/* expand header */
.bm-expand__tname{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--text2)}
.bm-expand__tname--right{text-align:right}
.bm-expand__map{font-size:8px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--text3)}

/* player row */
.bm-prow{display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:var(--r-sm);background:rgba(255,255,255,.02);border:1px solid var(--border);margin-bottom:4px;transition:background var(--dur),border-color var(--dur)}
.bm-prow:hover{background:rgba(0,255,154,.04);border-color:rgba(0,255,154,.1)}
.bm-prow--right{flex-direction:row-reverse}
.bm-prow__flag{width:17px;height:12px;object-fit:cover;border-radius:2px;opacity:.75;flex-shrink:0}
.bm-prow__av{
    width:22px;
    height:22px;
    border-radius:6px;
        object-fit:cover;
    border:1px solid rgba(255,255,255,.07);
    flex-shrink:0;
    background:
        var(--surface3)}
.bm-prow__nick{flex:1;font-size:12px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.bm-prow--right .bm-prow__nick{text-align:right}
.bm-prow__stats{display:flex;align-items:center;gap:3px;flex-shrink:0}
.bm-prow--right .bm-prow__stats{flex-direction:row-reverse}
.bm-ps{display:flex;flex-direction:column;align-items:center;min-width:30px}
.bm-ps__v{font-size:10px;font-weight:800;line-height:1}
.bm-ps__v--kd{color:var(--green)}
.bm-ps__v--adr{color:var(--blue)}
.bm-ps__v--hs{color:var(--gold)}
.bm-ps__v--elo{color:rgba(255,255,255,.3)}
.bm-ps__l{font-size:7px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--text3);margin-top:1px}
.bm-ps-sep{width:1px;height:12px;background:var(--border);flex-shrink:0}

/* rank */

.rank-bronze{background:rgba(160,100,50,.15);color:#cd7f32}
.rank-silver{background:rgba(180,180,180,.08);color:#a0b0c0}
.rank-gold{background:rgba(255,200,60,.1);color:var(--gold)}
.rank-platinum{background:rgba(78,202,255,.08);color:var(--blue)}
.rank-diamond{background:rgba(120,200,255,.08);color:#80d8ff}
.rank-master{background:var(--purple-dim);color:var(--purple)}
.rank-challenger{background:rgba(0,255,154,.1);color:var(--green)}

/* footer */
.bm-expand__footer{display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid var(--border)}
.bm-expand__footer-right{display:flex;gap:8px}
.bm-btn{display:inline-flex;align-items:center;gap:6px;font-family:'Inter',sans-serif;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:9px 18px;border-radius:var(--r-sm);border:1px solid transparent;cursor:pointer;transition:var(--dur);text-decoration:none}
.bm-btn--primary{background:var(--green);color:#001a0f;border-color:var(--green);box-shadow:0 0 16px var(--green-glow)}
.bm-btn--primary:hover{box-shadow:0 0 26px rgba(0,255,154,.5);transform:translateY(-1px)}
.bm-btn--ghost{background:transparent;border-color:var(--border2);color:var(--text2)}
.bm-btn--ghost:hover{border-color:rgba(255,255,255,.18);color:var(--text);background:rgba(255,255,255,.04)}
.bm-btn--danger{background:transparent;border-color:rgba(255,61,90,.18);color:var(--red)}
.bm-btn--danger:hover{background:rgba(255,61,90,.07);border-color:rgba(255,61,90,.38)}

.bm-empty{text-align:center;padding:48px;font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--text3)}

.bm-status--cancelled{
  background:rgba(255,80,80,.12);
  border:1px solid rgba(255,80,80,.22);
  color:#ff7b7b;
}

.bm-section--cancelled .bm-section__dot{
  background:#ff6b6b;
  box-shadow:0 0 12px rgba(255,107,107,.55);
}

.bm-rank{

    min-width:44px;

    height:24px;

    padding:0 10px;

    border-radius:8px;

    font-size:9px;

    font-weight:900;

    border:1px solid rgba(255,255,255,.06);

    box-shadow:none;
}



/* ─────────────────────────
   CALIBRATION
───────────────────────── */

.bm-rank--calibration{

    background:rgba(255,180,0,.06);

    border:1px solid rgba(255,180,0,.14);

    color:#ffbf47;

    box-shadow:none;

    text-shadow:none;
}



/* =========================================================
   MATCH CARD — STABLE STRUCTURE FIX
========================================================= */

/* CARD */

.bm-match{

    overflow:hidden;

    border-radius:12px;

    background:
        linear-gradient(
            180deg,
            rgba(8,14,24,.98),
            rgba(5,9,16,.98)
        );

    border:1px solid rgba(0,255,180,.12);

    margin-bottom:12px;
    backdrop-filter:blur(10px);
}

/* TOP ROW */

.bm-row{
    grid-template-columns:
        58px
        minmax(0,1fr)
        96px
        minmax(0,1fr)
        18px;

    min-height:46px;

    gap:8px;

    padding:0 10px;
}

/* SIDES */

.bm-side{

    display:flex;

    align-items:center;

    gap:10px;

    min-width:0;
    width:100%;
}

.bm-side-right{
    padding-right:8px;
    justify-content:flex-end;
}

/* PLAYER */
.bm-nick{
    font-size:13px;
    font-weight:800;
    line-height:1;
    color:#fff;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:120px;
}
.bm-player{

    display:flex;

    flex-direction:column;

    gap:2px;

    min-width:0;
}

/* NAME */

.bm-name{

    font-size:12px;

    font-weight:800;

    line-height:1;

    color:#fff;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

    max-width:120px;
}

/* STATS */

.bm-stats{

    display:flex;

    align-items:center;

    gap:4px;

    flex-wrap:nowrap;
}

.bm-stat{

    display:flex;

    align-items:center;

    gap:3px;
}

.bm-stat__val{
    font-size:10px;
    font-weight:800;
}

.bm-stat__lbl{
    font-size:8px;
    opacity:.55;
}
/* SCORE */

.bm-center{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:5px;
}

.bm-score{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:4px;

    font-size:16px;

    font-weight:900;

    line-height:1;

    color:#fff;
}

.bm-score__sep{

    opacity:.3;
}

/* EXPAND BLOCK */

.bm-expand{

    width:100%;

    background:
        linear-gradient(
            180deg,
            rgba(5,10,18,.98),
            rgba(4,8,14,.98)
        );

    border-top:1px solid rgba(255,255,255,.05);
}

/* INNER */

.bm-expand__inner{

    padding:8px 10px 10px;
}

/* REMOVE BROKEN HEADER */

.bm-expand__head{

    display:none !important;
}

/* PLAYERS */

.bm-players{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px;

    margin-bottom:10px;
}

/* PLAYER ROW */

.bm-prow{

    min-height:28px;
    padding:4px 6px;

    border-radius:8px;

    background:rgba(255,255,255,.02);

    border:1px solid rgba(255,255,255,.04);
}

/* FOOTER */

.bm-expand__footer{

    padding-top:10px;

    border-top:1px solid rgba(255,255,255,.05);
}
.bm-expand .bm-btn{

    height:26px;
    padding:0 10px;
    font-size:9px;
    letter-spacing:.6px;

    border-radius:9px;
}
/* MOBILE */

@media(max-width:1100px){

    .bm-row{

        grid-template-columns:1fr;

        padding:14px;

        gap:12px;
    }

    .bm-side-right{

        justify-content:flex-start;
    }

    .bm-center{

        order:-1;
    }

    .bm-players{

        grid-template-columns:1fr;
    }
}

.bm-team-head{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-bottom:6px;

    padding:0 2px;
}

.bm-team-head__lbl{
    font-size:10px;
    font-weight:800;
    color:#dce7f5;
}

.bm-team-head__elo{
    font-size:9px;
    color:#6e849e;
}

/* =========================================================
   FINAL PREMIUM MATCH FIX
========================================================= */

/* CARD */

.bm-match{

    position:relative;

    border-radius:14px;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            rgba(7,12,20,.98),
            rgba(4,8,14,.98)
        );

    border:1px solid rgba(0,255,170,.12);

    margin-bottom:10px;

    backdrop-filter:blur(10px);

    transition:
        border-color .2s,
        transform .2s,
        box-shadow .2s;
}

.bm-match:hover{

    transform:translateY(-2px);

    border-color:rgba(0,255,170,.24);

    box-shadow:
        0 0 26px rgba(0,255,170,.08);
}

/* =========================================================
   TOP ROW
========================================================= */

.bm-row{

    display:grid;

    grid-template-columns:
        56px
        minmax(0,1fr)
        110px
        minmax(0,1fr)
        18px;

    align-items:center;

    gap:10px;

    min-height:56px;

    padding:0 12px;
}

/* =========================================================
   META
========================================================= */

.bm-meta{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:4px;
}

.bm-id{

    font-size:18px;

    font-weight:900;

    color:rgba(255,255,255,.08);

    line-height:1;
}

/* =========================================================
   SIDES
========================================================= */

.bm-side{

    display:flex;

    align-items:center;

    gap:10px;

    min-width:0;
}

.bm-side--right{

    justify-content:flex-end;
}

/* =========================================================
   AVATAR
========================================================= */

.bm-avatar{

    width:30px;

    height:30px;

    border-radius:8px;

    object-fit:cover;

    flex-shrink:0;

    border:1px solid rgba(255,255,255,.08);
}

/* =========================================================
   PLAYER
========================================================= */

.bm-player{

    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:3px;

    min-width:0;
}

.bm-player--right{

    align-items:flex-end;
}

/* =========================================================
   NAME
========================================================= */

.bm-nick{

    font-size:13px;

    font-weight:800;

    line-height:1;

    color:#fff;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

    max-width:150px;
}

/* =========================================================
   STATS
========================================================= */

.bm-stats{

    display:flex;

    align-items:center;

    gap:5px;

    flex-wrap:nowrap;
}

.bm-player--right .bm-stats{

    justify-content:flex-end;
}

.bm-stat{

    display:flex;

    align-items:baseline;

    gap:3px;

    white-space:nowrap;
}

.bm-stat__val{

    font-size:10px;

    font-weight:800;

    line-height:1;
}

.bm-stat__lbl{

    font-size:8px;

    font-weight:700;

    opacity:.45;

    text-transform:uppercase;
}

.bm-stat-sep{

    width:1px;

    height:10px;

    background:rgba(255,255,255,.06);
}

/* =========================================================
   SCORE CENTER
========================================================= */

.bm-center{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:4px;
}

.bm-score{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:5px;

    font-size:18px;

    font-weight:900;

    line-height:1;

    color:#fff;
}

.bm-score__sep{

    opacity:.35;
}

/* =========================================================
   STATUS
========================================================= */

.bm-status{

    height:18px;

    padding:0 7px;

    border-radius:5px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:8px;

    font-weight:800;

    letter-spacing:1px;

    text-transform:uppercase;
}

/* =========================================================
   CHEVRON
========================================================= */

.bm-chevron{

    display:flex;

    align-items:center;

    justify-content:center;

    color:rgba(255,255,255,.22);

    transition:.2s;
}

.bm-match.active .bm-chevron{

    transform:rotate(180deg);

    color:var(--green);
}

/* =========================================================
   EXPAND
========================================================= */

.bm-expand{

    border-top:1px solid rgba(255,255,255,.05);

    background:
        linear-gradient(
            180deg,
            rgba(4,8,14,.96),
            rgba(3,6,11,.98)
        );
}

.bm-expand__inner{

    padding:10px;
}

/* =========================================================
   PLAYERS GRID
========================================================= */

.bm-players{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px;

    margin-bottom:10px;
}

/* =========================================================
   TEAM HEADER
========================================================= */

.bm-team-head{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:5px;

    padding:0 2px;
}

.bm-team-head__lbl{

    font-size:10px;

    font-weight:800;

    color:#dce7f5;
}

.bm-team-head__elo{

    font-size:9px;

    color:#6e849e;
}

/* =========================================================
   PLAYER ROW
========================================================= */

.bm-prow{

    display:flex;

    align-items:center;

    gap:6px;

    min-height:30px;

    padding:4px 6px;

    border-radius:8px;

    background:rgba(255,255,255,.02);

    border:1px solid rgba(255,255,255,.04);

    margin-bottom:4px;
}

.bm-prow--right{

    flex-direction:row-reverse;
}

.bm-prow__flag{

    width:15px;

    height:11px;

    border-radius:2px;

    opacity:.75;

    object-fit:cover;
}

.bm-prow__av{

    width:22px;

    height:22px;

    border-radius:6px;

    object-fit:cover;

    border:1px solid rgba(255,255,255,.08);
}

.bm-prow__nick{

    flex:1;

    font-size:11px;

    font-weight:700;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
}

.bm-prow--right .bm-prow__nick{

    text-align:right;
}

.bm-prow__stats{

    display:flex;

    align-items:center;

    gap:4px;

    flex-shrink:0;
}

.bm-prow--right .bm-prow__stats{

    flex-direction:row-reverse;
}

/* =========================================================
   FOOTER
========================================================= */

.bm-expand__footer{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding-top:10px;

    border-top:1px solid rgba(255,255,255,.05);
}

.bm-expand__footer-right{

    display:flex;

    gap:8px;
}

/* =========================================================
   BUTTONS
========================================================= */

.bm-btn{

    height:28px;

    padding:0 12px;

    border-radius:8px;

    font-size:9px;

    font-weight:800;

    letter-spacing:.8px;

    text-transform:uppercase;
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:1100px){

    .bm-row{

        grid-template-columns:1fr;

        gap:10px;

        padding:12px;
    }

    .bm-side--right{

        justify-content:flex-start;
    }

    .bm-player--right{

        align-items:flex-start;
    }

    .bm-player--right .bm-stats{

        justify-content:flex-start;
    }

    .bm-center{

        order:-1;
    }

    .bm-players{

        grid-template-columns:1fr;
    }
}