/* ==========================================================
   BATTLE MVP — MATCH PAGE (redesign: connect prominent)
   ========================================================== */

:root {
  --acc:  #00ffa6;
  --acc2: #00cfff;
  --ora:  #ff6b2b;
  --bg:   #060d0f;
  --c1:   #081018;
  --sep:  rgba(255,255,255,.06);
  --bdr:  rgba(0,255,166,.1);
  --mut:  #3a5566;
  --txt:  #eaf1ff;
  --r:    10px;
  --f1:   'Barlow Condensed', sans-serif;
}

.mx { display:flex; flex-direction:column; gap:10px; }

/* ==========================================================
   BREADCRUMB
   ========================================================== */

.mx-bread {
  display:flex; align-items:center; gap:8px;
  font-size:12px; color:var(--mut);
}

.mx-bread a { color:var(--acc); text-decoration:none; font-weight:600; }
.mx-bread a:hover { text-decoration:underline; }

.mx-bstat {
  padding:2px 8px; border-radius:4px;
  font-size:9px; font-weight:800; letter-spacing:.12em;
  background:rgba(255,255,255,.06); border:1px solid var(--sep); color:var(--mut);
}

.mx-bstat.live { background:rgba(248,113,113,.12); border-color:rgba(248,113,113,.3); color:#f87171; animation:mx-blink 1.2s ease-in-out infinite; }
.mx-bstat.wait { background:rgba(251,191,36,.1);  border-color:rgba(251,191,36,.25);  color:#fbbf24; }
.mx-bstat.fin  { background:rgba(0,255,166,.1);   border-color:rgba(0,255,166,.2);    color:var(--acc); }

.mx-elapsed { font-size:11px; color:var(--acc); font-weight:600; }

/* ==========================================================
   ① CONNECT BANNER — главный элемент
   ========================================================== */

.mx-connect-banner {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 20px;
  border-radius:var(--r);
  border:2px solid;
  position:relative; overflow:hidden;
}

.mx-connect-banner.live {
  background:linear-gradient(135deg,rgba(248,113,113,.12),rgba(248,113,113,.06));
  border-color:rgba(248,113,113,.4);
}

.mx-connect-banner.wait {
  background:linear-gradient(135deg,rgba(251,191,36,.1),rgba(251,191,36,.04));
  border-color:rgba(251,191,36,.35);
}

.mx-cb-left { display:flex; flex-direction:column; gap:4px; flex:1; min-width:0; }

.mx-cb-status {
  font-size:9px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:#f87171;
}

.mx-connect-banner.wait .mx-cb-status { color:#fbbf24; }

.mx-cb-label {
  font-size:10px; font-weight:700; letter-spacing:.1em;
  color:rgba(234,241,255,.5); text-transform:uppercase;
}

.mx-cb-ip {
  font-family:'Rajdhani',monospace;
  font-size:22px; font-weight:800; color:#fff;
  letter-spacing:.06em; line-height:1;
  word-break:break-all;
}

.mx-cb-right { display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex-shrink:0; }

.mx-cb-copy {
  padding:12px 24px; border-radius:9px;
  background:linear-gradient(135deg,var(--acc),var(--acc2));
  color:#001a0f; font-size:14px; font-weight:800;
  border:none; cursor:pointer;
  transition:all .2s;
  white-space:nowrap;
  box-shadow:0 4px 16px rgba(0,255,166,.3);
}

.mx-cb-copy:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,255,166,.45); }

.mx-cb-copy.copied {
  background:rgba(0,255,166,.15); border:1px solid rgba(0,255,166,.3); color:var(--acc);
}

.mx-cb-hint { font-size:10px; color:rgba(234,241,255,.45); text-align:right; }

.mx-cb-gotv { font-size:10px; color:var(--mut); text-align:right; }

/* ==========================================================
   ② HERO
   ========================================================== */

.mx-hero {
  position:relative; border-radius:var(--r);
  overflow:hidden; border:1px solid var(--bdr);
}

.mx-hbg { position:absolute; inset:0; pointer-events:none; z-index:0; }

.mx-hbg-ga {
  position:absolute; top:-50px; left:-60px; width:220px; height:220px;
  background:radial-gradient(circle,rgba(0,255,166,.18),transparent 70%); filter:blur(50px);
}

.mx-hbg-gb {
  position:absolute; top:-50px; right:-60px; width:220px; height:220px;
  background:radial-gradient(circle,rgba(255,107,43,.14),transparent 70%); filter:blur(50px);
}

.mx-hero-in{
    position:relative;
    z-index:1;

    align-items:center;
    gap:26px;

    padding:22px 24px;

    background:linear-gradient(135deg,#071218,#030810);

    min-height:220px;
    
}

.mx-crown { font-size:9px; font-weight:800; letter-spacing:.12em; color:var(--acc); }

.mx-hav{
  width:62px;
  height:62px;

  border-radius:16px;

  object-fit:cover;

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

  background:#081018;

  box-shadow:
    0 0 18px rgba(0,0,0,.45);

  transition:.2s;
}

.mx-hav:hover{
  transform:translateY(-4px);

  box-shadow:
    0 0 18px rgba(0,255,166,.18);
}

.mx-havs{
  display:flex;
  align-items:center;
}

.mx-hteam.b .mx-havs{
  justify-content:flex-end;
}

.mx-hstatus{
  display:flex;
  align-items:center;
  gap:7px;
  min-height:14px;

  font-size:11px;
  font-weight:900;

  letter-spacing:.14em;

  text-transform:uppercase;

  color:#00ffa6;

  margin-top:2px;
}

.mx-hstatus-dot{
  width:9px;
  height:9px;

  border-radius:50%;

  background:#00ffa6;

  box-shadow:
    0 0 12px #00ffa6,
    0 0 24px rgba(0,255,166,.35);

  animation:mx-blink 1s infinite;
}
.mx-hteam.a .mx-hagg{
  justify-content:flex-start;
}

.mx-hteam.b .mx-hagg{
  justify-content:flex-end;
}
.mx-hstatus.wait .mx-hstatus-dot{
  background:#ffb84d;
  box-shadow:0 0 10px #ffb84d;
}

.mx-hstatus.live .mx-hstatus-dot{
  background:#ff4d6d;
  box-shadow:0 0 10px #ff4d6d;
}

.mx-hagg{
  display:flex;
  align-items:center;
  gap:8px;

  margin-top:2px;

  font-size:12px;
  font-weight:800;

  letter-spacing:.04em;
}

.mx-hagg .mk{
  color:#00ffa6;
}

.mx-hagg .md{
  color:#ff6b6b;
}

.mx-hagg .ms{
  color:rgba(255,255,255,.18);
}

/* CENTER */
.mx-hcenter{
    max-width: 320px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:100%;
    gap:14px;

    min-width:0;
}

.mx-map-chip {
  display:flex; align-items:center; gap:6px;
  padding:3px 10px; border-radius:10px;
  background:rgba(255,255,255,.06); border:1px solid var(--sep);
  font-size:10px; font-weight:700; letter-spacing:.12em; color:var(--mut);
}

.mx-map-dot {
  width:5px; height:5px; border-radius:50%; background:var(--mut);
}

.mx-map-dot.live { background:var(--acc); box-shadow:0 0 6px var(--acc); animation:mx-blink 1s infinite; }
.mx-map-dot.wait { background:#fbbf24; animation:mx-blink 1.5s infinite; }

.mx-map-mode { color:rgba(234,241,255,.4); font-size:9px; margin-left:2px; }

.mx-scoreline { display:flex; align-items:center; gap:10px; }

.mx-sn {
  font-family:var(--f1); font-size:64px; font-weight:900; line-height:1;
  color:rgba(234,241,255,.25); font-variant-numeric:tabular-nums; transition:color .3s;
}

.mx-sn.win  { color:#fff; text-shadow:0 0 28px rgba(0,255,166,.25); }
.mx-sn.lose { color:rgba(234,241,255,.18); }

.mx-smid { position:relative; width:44px; display:flex; align-items:center; justify-content:center; }

.mx-col { font-family:var(--f1); font-size:48px; color:var(--mut); font-weight:700; }

.mx-lorb { position:absolute; inset:-12px; }

.mx-lr {
  position:absolute; inset:0;
  border-radius:50%; border:1px solid rgba(248,113,113,.25);
  animation:mx-spin 5s linear infinite;
}

.mx-lr.r2 { inset:5px; animation-duration:3.5s; animation-direction:reverse; border-color:rgba(248,113,113,.14); }

/* STATUS TAGS */
.mx-live-tag {
  display:flex; align-items:center; gap:6px;
  font-size:11px; font-weight:800; letter-spacing:.14em; color:#f87171;
}

.mx-lt-dot {
  width:7px; height:7px; border-radius:50%; background:#f87171;
  box-shadow:0 0 8px #f87171; animation:mx-blink .8s infinite;
}

.mx-wait-tag {
  font-size:10px; font-weight:800; letter-spacing:.1em; color:#fbbf24;
  animation:mx-blink 1.5s ease-in-out infinite;
}

.mx-fin-tag {
  font-size:10px; font-weight:800; letter-spacing:.12em;
  color:var(--acc); padding:3px 10px; border-radius:5px;
  background:rgba(0,255,166,.1); border:1px solid rgba(0,255,166,.2);
}

/* CHIPS */
.mx-hchips{
    display:flex;
    gap:6px;
    flex-wrap:nowrap;
    width:100%;
    justify-content:center;
}

/* ==========================================================
   ACTION BAR
   ========================================================== */

.mx-bar {
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 12px; border-radius:var(--r);
  background:var(--c1); border:1px solid var(--sep);
}

.mx-bar-l, .mx-bar-r { display:flex; align-items:center; gap:6px; }

.mx-ab {
  display:flex; align-items:center; gap:5px;
  padding:6px 12px; border-radius:8px;
  background:rgba(255,255,255,.04); border:1px solid var(--sep);
  color:var(--txt); font-size:12px; cursor:pointer; transition:all .15s;
}

.mx-ab:hover { background:rgba(0,255,166,.07); border-color:rgba(0,255,166,.2); color:var(--acc); }
.mx-ab.like.active { background:rgba(255,80,80,.1); border-color:rgba(255,80,80,.2); color:#f87171; }
.mx-ab.spec { color:#fbbf24; border-color:rgba(251,191,36,.2); }

.mx-mark-btn {
  padding:7px 14px; border-radius:8px;
  background:linear-gradient(135deg,#7b3cff,#b066ff);
  color:#fff; font-weight:700; font-size:12px;
  border:none; cursor:pointer; transition:all .2s;
  box-shadow:0 0 10px rgba(123,60,255,.3);
}

.mx-mark-btn:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(123,60,255,.5); }
.mx-mark-btn.sm { padding:4px 10px; font-size:11px; }

/* ==========================================================
   BODY GRID
   ========================================================== */

.mx-body{
    display:grid;
    grid-template-columns:minmax(0,1fr) 290px;
    gap:22px;
    align-items:start;
}


/* ==========================================================
   SCOREBOARD TABLE
   ========================================================== */


.mx-tbl-hdr {
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 14px;
  font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
}

.mx-tbl-hdr.a {
  background:rgba(0,255,166,.07); border-bottom:1px solid rgba(0,255,166,.12); color:var(--acc);
}

.mx-tbl-hdr.b {
  background:rgba(255,107,43,.06); border-bottom:1px solid rgba(255,107,43,.1); color:var(--ora);
}

.mx-tbl-hdr-l { display:flex; align-items:center; gap:8px; }
.mx-tbl-hdr-r { display:flex; align-items:center; gap:10px; font-size:12px; }
.mx-score-big { font-family:var(--f1); font-size:22px; font-weight:800; }

.mx-tdot {
  width:8px; height:8px; border-radius:50%;
}

.mx-tdot.a { background:var(--acc); box-shadow:0 0 8px var(--acc); }
.mx-tdot.b { background:var(--ora); box-shadow:0 0 8px var(--ora); }

.mx-win-tag {
  font-size:8px; font-weight:800; padding:2px 6px; border-radius:4px;
  background:rgba(245,158,11,.15); border:1px solid rgba(245,158,11,.3); color:#f59e0b;
}

.mxtbl {
  width:100%; border-collapse:collapse; background:var(--c1);
}

.mxtbl thead tr {
  background:rgba(255,255,255,.02); border-bottom:1px solid var(--sep);
}

.mxtbl th {
  padding:7px 10px; font-size:9px; font-weight:700;
  letter-spacing:.12em; color:var(--mut); text-transform:uppercase; text-align:left;
}

.mxth-pl { padding-left:12px; }

.mxtr {
  border-bottom:1px solid rgba(255,255,255,.03);
  cursor:pointer; transition:background .12s;
}

.mxtr:last-child { border-bottom:none; }
.mxtr:hover { background:rgba(255,255,255,.03); }
.mxtr.me { background:rgba(0,255,166,.04) !important; border-left:2px solid var(--acc); }

.mxtbl td { padding:9px 10px; font-size:12px; color:var(--txt); }
.mxtd-pl { padding-left:12px; }

.mxtd-av { width:30px; height:30px; border-radius:7px; object-fit:cover; display:block; }

.mxtd-pi { display:flex; align-items:center; gap:9px; }

.mxtd-nm {
  font-size:13px; font-weight:700; color:#fff;
  display:flex; align-items:center; gap:5px;
}

.mxtd-sub {
  display:flex; align-items:center; gap:4px;
  font-size:9px; color:var(--mut); margin-top:1px;
}

.mxfl { width:12px; height:8px; border-radius:1px; object-fit:cover; }

.mxk { color:var(--acc); font-weight:700; }
.mxd { color:#f87171; font-weight:700; }
.mxa { color:rgba(234,241,255,.5); }
.mxmut { color:var(--mut); }
.mxpm { color:var(--acc); font-weight:600; }
.mxmm { color:#f87171; font-weight:600; }

.mxYou {
  font-size:8px; font-weight:800; letter-spacing:.1em; color:var(--acc);
  background:rgba(0,255,166,.1); padding:1px 4px; border-radius:3px;
}

.mxMvp {
  font-size:8px; font-weight:800; letter-spacing:.1em; color:#f59e0b;
  background:rgba(245,158,11,.12); padding:1px 4px; border-radius:3px;
  border:1px solid rgba(245,158,11,.2);
}

.mxrat {
  padding:2px 6px; border-radius:4px;
  font-size:11px; font-weight:700;
  background:rgba(255,255,255,.05);
}

.mxrat.g { background:rgba(0,255,166,.1); color:var(--acc); }
.mxrat.r { background:rgba(248,113,113,.1); color:#f87171; }

/* ROUND HISTORY */
.mx-rh {
  margin-top:12px; padding:10px 12px;
  border-radius:var(--r); border:1px solid var(--sep);
  background:rgba(255,255,255,.02);
}

.mx-rh-lbl {
  font-size:8px; font-weight:700; letter-spacing:.14em;
  color:var(--mut); text-transform:uppercase; margin-bottom:8px;
}

.mx-rh-rounds { display:flex; flex-wrap:wrap; gap:4px; }

.mx-rh-r {
  width:22px; height:22px; border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  font-size:8px; font-weight:700;
}

.mx-rh-r.a { background:rgba(0,255,166,.15); color:var(--acc); border:1px solid rgba(0,255,166,.2); }
.mx-rh-r.b { background:rgba(255,107,43,.12); color:var(--ora); border:1px solid rgba(255,107,43,.18); }
.mx-rh-empty { font-size:11px; color:var(--mut); }

/* TIMELINE */
.mx-tli {
  display:grid; grid-template-columns:36px 16px 1fr auto;
  align-items:center; gap:8px;
  padding:9px 0; border-bottom:1px solid rgba(255,255,255,.03);
}

.mx-tli:last-child { border-bottom:none; }
.mx-tli-rnd { font-size:11px; font-weight:700; color:var(--mut); }

.mx-tli-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--sep); margin:0 auto;
}

.mx-tli.ace .mx-tli-dot    { background:#fbbf24; box-shadow:0 0 6px #fbbf24; }
.mx-tli.clutch .mx-tli-dot { background:var(--acc); box-shadow:0 0 6px var(--acc); }

.mx-tli-type { font-size:13px; font-weight:700; color:var(--txt); }
.mx-tli.ace .mx-tli-type    { color:#fbbf24; }
.mx-tli.clutch .mx-tli-type { color:var(--acc); }

.mx-tli-pl { font-size:11px; color:var(--mut); margin-left:8px; }
.mx-tli-sc { font-family:var(--f1); font-size:14px; font-weight:700; color:rgba(234,241,255,.4); }

/* HIGHLIGHTS */
.mx-hl-bar {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:10px; font-size:11px; color:var(--mut);
}

.mx-hli {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 12px; border-radius:8px;
  background:rgba(255,255,255,.03); border:1px solid var(--sep);
  margin-bottom:6px; cursor:pointer; transition:all .15s;
}

.mx-hli:hover { background:rgba(0,255,166,.05); border-color:rgba(0,255,166,.18); transform:translateX(3px); }
.mx-hli-l { display:flex; align-items:center; gap:10px; }
.mx-hli-type { font-size:13px; font-weight:700; color:var(--txt); }
.mx-hli-rnd  { font-size:10px; color:var(--mut); margin-top:1px; }
.mx-hli-watch { font-size:11px; font-weight:700; color:var(--acc); padding:3px 8px; border-radius:5px; background:rgba(0,255,166,.08); }

/* DISCUSSION */
.mx-ci {
  display:flex; align-items:center; gap:8px;
  margin-bottom:10px; padding:7px 10px;
  border-radius:8px; background:rgba(255,255,255,.03); border:1px solid var(--sep);
}

.mx-ci-av { width:28px; height:28px; border-radius:6px; object-fit:cover; flex-shrink:0; }

.mx-ci input {
  flex:1; background:none; border:none; outline:none;
  color:var(--txt); font-size:13px; font-family:inherit;
}

.mx-ci input::placeholder { color:var(--mut); }

.mx-ci button {
  padding:5px 12px; border-radius:6px;
  background:var(--acc); color:#001a0f;
  font-weight:800; font-size:12px; border:none; cursor:pointer;
}

.mx-login-cta { padding:10px; text-align:center; }
.mx-login-cta a { color:var(--acc); font-size:13px; font-weight:600; }

.mx-cm {
  display:flex; align-items:flex-start; gap:8px;
  padding:8px 10px; border-radius:8px;
  background:rgba(255,255,255,.03); border:1px solid var(--sep); margin-bottom:5px;
}

.mx-cm-av { width:28px; height:28px; border-radius:6px; object-fit:cover; flex-shrink:0; }
.mx-cm-body { flex:1; min-width:0; }
.mx-cm-nm { font-size:11px; font-weight:700; color:var(--acc); }
.mx-cm-tx { font-size:12px; color:var(--txt); margin-top:1px; }
.mx-cm-t  { font-size:9px; color:var(--mut); flex-shrink:0; }

/* REPORTS */
.mx-rep-trigger {
  padding:7px 14px; border-radius:7px;
  background:rgba(248,113,113,.08); border:1px solid rgba(248,113,113,.2);
  color:#f87171; font-size:12px; font-weight:700;
  cursor:pointer; margin-bottom:10px; transition:all .15s;
}

.mx-rep-trigger:hover { background:rgba(248,113,113,.15); }
.mx-rpi { padding:7px 10px; border-radius:7px; background:rgba(248,113,113,.05); border:1px solid rgba(248,113,113,.1); font-size:12px; color:var(--txt); margin-bottom:5px; }

/* EMPTY */
.mxempty {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:28px 16px; text-align:center;
}

.mxempty > div:first-child { font-size:26px; opacity:.4; }
.mxempty > div:nth-child(2){ font-size:12px; color:rgba(234,241,255,.4); }

/* ==========================================================
   SIDEBAR
   ========================================================== */

.mx-sb { display:flex; flex-direction:column; gap:10px; }

.mx-sc {
  padding:13px; border-radius:var(--r);
  background:var(--c1); border:1px solid var(--sep);
}

.mx-sc-conn {
  border-color:rgba(0,255,166,.18);
  background:rgba(0,255,166,.04);
}

.mx-sc-t {
  font-size:9px; font-weight:700; letter-spacing:.14em;
  color:var(--mut); text-transform:uppercase; margin-bottom:10px;
}

.mx-rows { display:flex; flex-direction:column; }

.mx-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:6px 0; border-bottom:1px solid rgba(255,255,255,.03); font-size:11px;
}

.mx-row:last-child { border-bottom:none; }
.mx-row > span:first-child { color:var(--mut); }
.mx-row > b { color:var(--txt); font-weight:600; }

.mx-ist { font-weight:700; }
.mx-ist.live { color:#f87171; animation:mx-blink 1.2s infinite; }
.mx-ist.wait { color:#fbbf24; }
.mx-ist.fin  { color:var(--acc); }

/* CONNECT in sidebar */
.mx-conn-ip {
  font-family:'Rajdhani',monospace; font-size:14px; font-weight:700;
  color:var(--txt); letter-spacing:.06em; margin-bottom:8px; word-break:break-all;
}

.mx-conn-btn-full {
  width:100%; padding:8px; border-radius:7px;
  background:rgba(0,255,166,.1); border:1px solid rgba(0,255,166,.25);
  color:var(--acc); font-weight:700; font-size:11px; cursor:pointer; transition:all .15s;
}

.mx-conn-btn-full:hover { background:rgba(0,255,166,.2); }

.mx-gotv { font-size:9px; color:var(--mut); margin-top:6px; text-align:center; }

/* PLAYERS */
.mx-pl-hdr {
  display:flex; justify-content:space-between; align-items:center;
  padding:4px 0 6px; font-size:9px; font-weight:700;
  letter-spacing:.12em; color:var(--mut);
  border-bottom:1px solid var(--sep); margin-bottom:4px;
}

.mx-pl-sc { font-family:var(--f1); font-size:18px; font-weight:800; color:#fff; }

.mx-plr {
  display:flex; align-items:center; gap:7px;
  padding:5px 4px; border-radius:7px;
  border-bottom:1px solid rgba(255,255,255,.03); transition:background .12s;
}

.mx-plr:last-of-type { border-bottom:none; }
.mx-plr:hover { background:rgba(255,255,255,.03); }
.mx-plr.me { background:rgba(0,255,166,.05) !important; border-radius:7px; }

.mx-plr-av-w { position:relative; flex-shrink:0; }
.mx-plr-av { width:26px; height:26px; border-radius:6px; object-fit:cover; display:block; }

.mx-plr-dot {
  position:absolute; bottom:-1px; right:-1px;
  width:7px; height:7px; border-radius:50%; border:1px solid var(--bg);
}

.mx-plr-dot.a { background:var(--acc); }
.mx-plr-dot.b { background:var(--ora); }

.mx-plr-inf { flex:1; min-width:0; }
.mx-plr-nm  { font-size:11px; font-weight:700; color:var(--txt); display:flex; align-items:center; gap:4px; }
.mx-plr-elo { display:flex; align-items:center; gap:3px; font-size:9px; color:var(--mut); margin-top:1px; }

.mx-plr-kd { display:flex; align-items:center; gap:2px; font-size:11px; font-weight:700; }

/* RECENT MATCHES */
.mx-rm {
  display:flex; align-items:center; gap:8px;
  padding:6px 0; border-bottom:1px solid rgba(255,255,255,.03);
  text-decoration:none; color:var(--txt); font-size:11px; transition:color .12s;
}

.mx-rm:last-child { border-bottom:none; }
.mx-rm:hover { color:var(--acc); }

.mx-rm-res {
  width:16px; height:16px; border-radius:3px;
  display:flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:800; flex-shrink:0;
}

.mx-rm-res.w { background:rgba(0,255,166,.15); color:var(--acc); }
.mx-rm-res.l { background:rgba(248,113,113,.12); color:#f87171; }
.mx-rm-map { flex:1; text-transform:capitalize; }
.mx-rm-sc { color:var(--mut); }

/* SHARE */
.mx-share-row { display:flex; gap:6px; }

.mx-sh-btn {
  flex:1; padding:7px; border-radius:7px;
  background:rgba(255,255,255,.05); border:1px solid var(--sep);
  color:var(--txt); font-size:11px; font-weight:600;
  cursor:pointer; text-align:center; text-decoration:none;
  display:block; transition:all .15s;
}

.mx-sh-btn:hover { background:rgba(0,255,166,.08); border-color:rgba(0,255,166,.2); color:var(--acc); }

/* ==========================================================
   ANIMATIONS
   ========================================================== */

@keyframes mx-blink { 0%,100%{opacity:1} 50%{opacity:.25} }
@keyframes mx-scan  { 0%{left:-40%} 100%{left:130%} }
@keyframes mx-spin  { to{transform:rotate(360deg)} }

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width:1050px) {
  .mx-body { grid-template-columns:1fr; }
  .mx-sb { display:grid; grid-template-columns:1fr 1fr; }
  .mx-connect-banner { flex-direction:column; align-items:flex-start; }
  .mx-cb-right { align-items:flex-start; }
}

@media (max-width:760px) {
  .mx-hero-in { grid-template-columns:1fr; padding:14px; gap:12px; }
  .mx-sn { font-size:52px; }
  .mx-hchips { flex-wrap:wrap; }
  .mx-sb { grid-template-columns:1fr; }
  .mxtbl th:nth-child(n+6), .mxtbl td:nth-child(n+6) { display:none; }
}

.mx-hteam{
    position:relative;

    display:flex;
    flex-direction:column;
    justify-content:center;

    gap:12px;

    width:100%;
    min-height:170px;

    padding:24px;

    border-radius:24px;

    background:
        linear-gradient(
            180deg,
            rgba(8,16,24,.96),
            rgba(3,8,12,.96)
        );

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

    overflow:hidden;
    box-sizing:border-box;
}

.mx-hteam.a{
  align-items:flex-start;
  text-align:left;
  justify-self:start;
  border-left:4px solid #00ffa6;

  box-shadow:
    inset 0 0 35px rgba(0,255,166,.05),
    0 0 22px rgba(0,255,166,.05);
}

.mx-hteam.b{
    justify-self:end;
    margin-left:auto;
  display:flex;
  flex-direction:column;

  align-items:flex-end;
  justify-content:center;

  text-align:right;

  padding-right:28px;

  border-right:4px solid #ff6b2b;

  box-shadow:
    inset 0 0 35px rgba(255,107,43,.05),
    0 0 22px rgba(255,107,43,.05);
}

.mx-hteam.b .mx-havs,
.mx-hteam.b .mx-hagg,
.mx-hteam.b .mx-hstatus{
  justify-content:flex-end;
}

.mx-hteam.b .mx-hnm{
  width:100%;
  text-align:right;
}

.mx-hteam::after{
  content:'';

  position:absolute;

  width:140px;
  height:140px;

  border-radius:50%;

  filter:blur(45px);

  pointer-events:none;
}

.mx-hteam.a::after{
  left:-60px;
  top:-60px;

  background:rgba(0,255,166,.10);
}

.mx-hteam.b::after{
  right:-60px;
  top:-60px;

  background:rgba(255,107,43,.10);
}

/* =========================================
   WAITING PLAYERS BLOCK
========================================= */

.mx-wait-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}

.mx-wait-online{
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  color:#00ffa6;
}

.mx-wait-timer{
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  color:#ffb84d;
}

.mx-wait-timer span{
  color:#fff;
  font-size:14px;
  margin-left:6px;
}
.mx-hteam.b .mx-hagg{
  justify-content:flex-end;
}

.bmStoryGrid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:18px;
    margin-top:24px;
}

.bmStoryCard{
    background:rgba(8,15,20,.92);
    border:1px solid rgba(0,255,170,.12);
    border-radius:18px;
    padding:18px;
    box-shadow:
        0 0 30px rgba(0,255,170,.05),
        inset 0 0 0 1px rgba(255,255,255,.02);
}

.bmStoryCard h3{
    margin:0 0 14px;
    color:#00ffae;
    font-size:15px;
    letter-spacing:.08em;
}

.bmHighlightItem,
.bmTimelineItem,
.bmTopPlayer{
    padding:10px 0;
    border-bottom:1px solid rgba(255,255,255,.05);
}

.bmHighlightItem:last-child,
.bmTimelineItem:last-child,
.bmTopPlayer:last-child{
    border-bottom:none;
}

/* =========================================
   MATCH HUB TABS
========================================= */

.mx-tabs{
    display:flex;
    align-items:center;
    gap:14px;

    padding:0 4px 16px;

    margin-bottom:20px;

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

    overflow-x:auto;
}

.mx-tab{
    position:relative;
    border:none;
    background:none;
    color:#6f7f96;
    font-size:14px;
    font-weight:700;
    letter-spacing:.04em;
    cursor:pointer;
    padding:0 0 12px;
    transition:.2s;
}

.mx-tab:hover{
    color:#dff;
}

.mx-tab.active::after{
    content:'';
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:2px;
    border-radius:10px;
    background:#00f7c3;
    box-shadow:0 0 12px rgba(0,247,195,.8);
}

/* =========================================
   TAB CONTENT
========================================= */

.mx-content{
    position:relative;
    min-height:520px;
}

.mx-panel{
    display:none;
    animation:mxFade .18s ease;
}

.mx-panel.active{
    display:block;
}

@keyframes mxFade{
    from{
        opacity:0;
        transform:translateY(6px);
    }
    to{
        opacity:1;
        transform:none;
    }
}

/* =========================================
   MVP BLOCK
========================================= */

.bmMvpLabel{
    color:#ffcf66;
    font-size:12px;
    font-weight:800;
    letter-spacing:.14em;
    margin-bottom:10px;
}

.bmMvpNick{
    font-size:28px;
    font-weight:900;
    color:#fff;
    margin-bottom:10px;
}

.bmMvpStats{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
}

.bmMvpStats span{
    color:#9fb0c3;
    font-size:13px;
    font-weight:700;
}

/* =========================================
   TIMELINE
========================================= */

.bmTimelineGrid{
    display:grid;
    gap:14px;
}

.bmTimelineCard{
    padding:16px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.06);
    background:rgba(8,13,22,.72);
}

.bmTimelineType{
    font-size:16px;
    font-weight:900;
    color:#fff;
    margin-bottom:6px;
}

.bmTimelineDesc{
    color:#9fb0c3;
    line-height:1.5;
}

/* =========================================
   HIGHLIGHTS
========================================= */

.bmHighlightsGrid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:16px;
}

.bmHighlightCard{
    padding:18px;
    border-radius:18px;
    border:1px solid rgba(255,170,0,.12);
    background:
        linear-gradient(
            135deg,
            rgba(255,170,0,.08),
            rgba(0,0,0,.35)
        );
}

.bmHighlightTitle{
    font-size:18px;
    font-weight:900;
    color:#fff;
    margin-bottom:8px;
}

.bmHighlightScore{
    font-size:28px;
    font-weight:900;
    color:#ffb347;
}

/* =========================================
   DISCUSSION
========================================= */

.mxDiscussionBox{
    padding:18px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.06);
    background:#0a111c;
}

.mxDiscussionInput{
    display:flex;
    gap:10px;
    margin-bottom:18px;
}

.mxDiscussionInput input{
    flex:1;
    height:46px;
    border:none;
    outline:none;
    border-radius:12px;
    background:#071019;
    color:#fff;
    padding:0 16px;
}

.mxDiscussionInput button{
    height:46px;
    padding:0 24px;
    border:none;
    border-radius:12px;
    font-weight:800;
    background:#00f7c3;
    color:#000;
    cursor:pointer;
}

/* =========================================
   REPORTS
========================================= */

.mxReportsBox{
    padding:18px;
    border-radius:18px;
    border:1px solid rgba(255,70,70,.12);
    background:#0c1118;
}


.mx-tab.active{
    color:#fff;
    border-bottom:2px solid #00f0b5;
}

.mx-hero.cancelled{

    border-color:rgba(255,80,80,.16);

    background:
        linear-gradient(
            135deg,
            rgba(255,40,40,.04),
            rgba(5,10,15,.96)
        );
}

.mx-cancel-tag{

    padding:6px 14px;

    border-radius:8px;

    font-size:11px;
    font-weight:900;

    letter-spacing:.12em;

    color:#ff6b6b;

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

    background:
        rgba(255,60,60,.08);
}

.mx-hero.cancelled .mx-fin-tag,
.mx-hero.cancelled .mx-cancel-tag{

    color:#ff6b6b;

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

    background:
        rgba(255,60,60,.08);
}
.mvpBadge{
    margin-left:8px;
}

/* =========================================================
   MATCH SCOREBOARD PLAYER ROW
========================================================= */

.bmPlayerCell{
    display:flex;
    align-items:center;
    gap:12px;
    min-height:58px;
}

.mxtd-av{
    width:42px;
    height:42px;
    border-radius:10px;
    object-fit:cover;
    flex-shrink:0;

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

.bmPlayerMeta{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:4px;
}

.bmPlayerNickRow{
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
}

.bmPlayerNick{
    font-size:18px;
    font-weight:800;
    color:#fff;
    line-height:1;
}

.bmPlayerSub{
    display:flex;
    align-items:center;
    gap:8px;
}

.mxRp{
    font-size:12px;
    font-weight:700;
    color:#30ffd1;
}

.mxRank{
    font-size:11px;
    font-weight:800;
}

.mxYou,
.mxMvp{
    height:18px;
    padding:0 6px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    border-radius:5px;

    font-size:10px;
    font-weight:800;
    letter-spacing:.08em;
}

.mxYou{
    background:#00d084;
    color:#04140f;
}

.mxMvp{
    background:#ffb800;
    color:#1a1200;
}

/* =========================
   SCOREBOARD TABLE
========================= */

.mxtbl td{
    font-size:15px;
    font-weight:700;
    vertical-align:middle;
}

.mxtbl th{
    font-size:11px;
    letter-spacing:.12em;
}

/* same card heights */

.mx-tbl-wrap{
    position:relative;

    background:
        linear-gradient(
            180deg,
            rgba(7,14,24,.94),
            rgba(4,10,18,.96)
        );

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

    border-radius:22px;

    overflow:hidden;

    margin-bottom:14px;

    box-shadow:
        0 10px 40px rgba(0,0,0,.35),
        inset 0 0 0 1px rgba(255,255,255,.02);
}

.mxtbl {
    table-layout: fixed;
    width: 100%;
}

.mxtbl th,
.mxtbl td {
    text-align: center;
    vertical-align: middle;
}

.mxtbl .mxth-pl,
.mxtbl .mxtd-pl {
    width: 42%;
    text-align: left;
    padding-left: 18px;
}

.mxtbl td:not(.mxtd-pl),
.mxtbl th:not(.mxth-pl) {
    width: 7%;
}

.bmPlayerCell {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.bmPlayerMeta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.bmPlayerNick {
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

.bmPlayerSub {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

/* =========================================================
   FINAL 5V5 FIX
========================================================= */

.mx-hero-in{
    display:grid;

    grid-template-columns:
        minmax(280px,1fr)
        minmax(220px,320px)
        minmax(280px,1fr);

    grid-template-areas:
        "left center right"
        "bottom bottom bottom";

    align-items:start;

    gap:18px;

    padding:22px;
}

.mx-hteam{
    width:100%;
    min-width:0;
    overflow:hidden;
}

.mx-havs{
    width:100%;
    overflow:hidden;
    flex-wrap:nowrap;
}

.mx-hav{
    width:56px;
    height:56px;
    flex:0 0 56px;
}

.mx-hnm{
    width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.mxtbl{
    width:100%;
    table-layout:fixed;
    border-collapse:collapse;
}

.mxtbl .mxth-pl,
.mxtbl .mxtd-pl{
    width:38%;
    min-width:280px;
}

.mxtbl th:not(.mxth-pl),
.mxtbl td:not(.mxtd-pl){
    width:8%;
}

.bmPlayerCell{
    display:flex;
    align-items:center;
    gap:14px;

    min-width:0;
    overflow:hidden;
}

.bmPlayerMeta{
    min-width:0;
    overflow:hidden;
}

.bmPlayerNick{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    font-size:17px;
    font-weight:800;
}

.bmPlayerSub{
    flex-wrap:wrap;
}

.mx-body{
    position:relative;

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

    border-radius:28px;

    padding:18px;

    overflow:hidden;
}

@media(max-width:1400px){

    .mx-hero-in{
        grid-template-columns:1fr;
    }

    .mx-body{
        grid-template-columns:1fr;
    }

    .mx-sb{
        width:100%;
        min-width:0;
    }
}

.mx-hero-meta{
    display:flex;
    align-items:center;
    gap:6px;

    font-size:13px;
    font-weight:700;
    letter-spacing:.02em;

    white-space:nowrap;

    opacity:.92;
}



.mx-metaCard{
    height:84px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:14px 18px;

    border-radius:16px;

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

    background:
        linear-gradient(
            180deg,
            rgba(10,18,30,.96),
            rgba(5,12,22,.98)
        );
    position:relative;
    overflow:hidden;
    min-width:0;
}

.mx-metaCard::before{
    content:'';

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle at top left,
            rgba(0,255,170,.08),
            transparent 60%
        );

    pointer-events:none;
}

.mx-metaTop{
    font-size:10px;

    font-weight:800;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:#6b7f95;

    margin-bottom:8px;
}

.mx-metaMain{
    font-size:17px;

    font-weight:800;

    color:#fff;

    line-height:1.15;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
}
.mx-heroCenter{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.mx-metaInline{
    width:100%;

    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:12px;

    margin-top:26px;
}

.mx-inlineCard{
    height:74px;

    border-radius:16px;

    padding:12px 16px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    background:
        linear-gradient(
            180deg,
            rgba(10,20,32,.95),
            rgba(6,14,24,.98)
        );

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

    position:relative;

    overflow:hidden;
}

.mx-inlineCard::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at top left,
            rgba(0,255,170,.12),
            transparent 60%
        );

    pointer-events:none;
}

.mx-inlineCard span{
    font-size:11px;

    letter-spacing:.16em;

    text-transform:uppercase;

    color:#6d89a8;

    margin-bottom:8px;

    font-weight:700;
}

.mx-inlineCard strong{
    font-size:24px;

    font-weight:900;

    color:#fff;

    line-height:1;
}


.mx-metaWideTop{
    font-size:11px;
    font-weight:800;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:#7e95ab;
    margin-bottom:12px;
}

.mx-metaWideMain{
    font-size:30px;
    line-height:1;
    font-weight:900;
    color:#fff;
    margin-bottom:10px;
}

.mx-metaWideSub{
    font-size:13px;
    font-weight:700;
    color:#00ffb2;
    opacity:.92;
}

@media(max-width:1100px){

    .mx-metaWide{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:700px){

    .mx-metaWide{
        grid-template-columns:1fr;
    }
}
/* =========================================
   MATCH MVP — PREMIUM WIDE VERSION
========================================= */

.bmMatchMVP{
    position:relative;
    overflow:hidden;

    background:
        radial-gradient(circle at top left,
            rgba(0,255,200,.10),
            transparent 45%),

        radial-gradient(circle at top right,
            rgba(0,140,255,.08),
            transparent 40%),

        linear-gradient(
            180deg,
            rgba(5,14,24,.96) 0%,
            rgba(3,10,18,.98) 100%
        );

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

    border-radius:24px;

    padding:28px;

    box-shadow:
        0 0 0 1px rgba(0,255,180,.03) inset,
        0 20px 60px rgba(0,0,0,.45),
        0 0 40px rgba(0,255,180,.06);

    backdrop-filter: blur(10px);

    margin-bottom:22px;
}

/* top row */

.bmMvpTop{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:26px;

    width:100%;
}

/* left side */

.bmMvpInfo{
    flex:1;
    min-width:0;
}

.bmMvpLabel{
    font-size:11px;
    font-weight:800;
    letter-spacing:.16em;

    color:#ffcf66;

    margin-bottom:10px;
}

.bmMvpNick{
    font-size:26px;
    font-weight:900;
    line-height:1.05;

    color:#fff;

    margin:0;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.bmMvpSub{
    margin-top:10px;

    font-size:13px;
    font-weight:700;

    color:#8ea7b7;

    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

/* avatar */

.bmMvpAvatarWrap{
    position:relative;

    width:84px;
    height:84px;

    flex-shrink:0;
}

.bmMvpAvatar{
    width:84px;
    height:84px;

    border-radius:20px;

    object-fit:cover;

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

    position:relative;
    z-index:2;
}

.bmMvpGlow{
    position:absolute;
    inset:-10px;

    border-radius:28px;

    background:rgba(0,255,170,.18);

    filter:blur(22px);

    z-index:1;
}

/* stat cards */

.bmMvpGrid{
    width:100%;

    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:14px;

    margin-top:22px;
}

.bmMvpCard{
    min-height:86px;

    padding:14px 16px;

    border-radius:18px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.03),
            rgba(255,255,255,.015)
        );

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

    display:flex;
    flex-direction:column;
    justify-content:center;

    box-sizing:border-box;
}

.bmMvpCardTop{
    font-size:10px;
    font-weight:800;

    letter-spacing:.14em;
    text-transform:uppercase;

    color:#7890a1;

    margin-bottom:10px;
}

.bmMvpCardMain{
    font-size:20px;
    font-weight:900;

    line-height:1;

    color:#00ffb2;
}

/* responsive */

@media(max-width:1100px){

    .bmMvpGrid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:700px){

    .bmMvpTop{
        align-items:flex-start;
    }

    .bmMvpNick{
        font-size:22px;
    }

    .bmMvpGrid{
        grid-template-columns:1fr;
    }

    .bmMvpAvatar{
        width:72px;
        height:72px;
    }

    .bmMvpAvatarWrap{
        width:72px;
        height:72px;
    }
}
/* =========================
   META BAR COMPACT PREMIUM
========================= */

.mx-metaWide{
    width:100%;

    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:14px;
}

.mx-metaWideCard{
    position:relative;

    min-height:108px;

    padding:16px 18px;

    border-radius:20px;

    overflow:hidden;

    display:flex;
    flex-direction:column;
    justify-content:center;

    background:
        linear-gradient(
            180deg,
            rgba(7,18,28,.94),
            rgba(3,8,16,.98)
        );

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

    box-shadow:
        0 0 20px rgba(0,255,170,.03);

    transition:.18s ease;
}

.mx-metaWideCard:hover{
    transform:translateY(-2px);

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

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

/* top label */

.mx-metaWideTop{
    font-size:10px;

    font-weight:800;

    letter-spacing:.16em;

    text-transform:uppercase;

    color:#6d8498;

    margin-bottom:10px;
}

/* BIG TEXT */

.mx-metaWideMain{
    font-size:22px;

    line-height:1.05;

    font-weight:900;

    color:#ffffff;

    margin-bottom:8px;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* sub */

.mx-metaWideSub{
    font-size:13px;

    font-weight:700;

    line-height:1.3;

    color:#00ffb2;

    opacity:.95;
}

/* responsive */

@media(max-width:1100px){

    .mx-metaWide{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }
}

@media(max-width:700px){

    .mx-metaWide{
        grid-template-columns:1fr;
    }
}
/* =========================================================
   BATTLE MVP — PREMIUM MATCH META CARDS
========================================================= */


.bmMetaTop{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    margin-bottom:10px;
}

.bmMetaLabel{

    font-size:11px;

    font-weight:800;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:rgba(220,235,255,.62);
}

.bmMetaSmall{

    font-size:13px;
    font-weight:800;
    letter-spacing:.12em;

    text-transform:uppercase;

    color:rgba(220,230,255,.48);
}

.bmMetaLine{

    width:36px;
    height:4px;

    border-radius:20px;

    margin-top:8px;

    background:#00ffd0;

    box-shadow:0 0 12px rgba(0,255,208,.55);
}

.bmMetaIcon{

    width:46px;
    height:46px;

    border-radius:14px;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:20px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.05),
            rgba(255,255,255,.015)
        );

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

    color:#dfe7ff;
}

.bmMetaValue{

    margin-top:8px;

    font-weight:900;

    line-height:1;

    color:#fff;
}

.bmMetaTitle{

    margin-top:8px;

    font-size:15px;

    line-height:1.05;

    font-weight:850;

    letter-spacing:-0.01em;

    color:#fff;
}

.bmMetaSub{

    margin-top:6px;

    font-size:10px;

    line-height:1.35;

    font-weight:700;

    color:#00ffd0;
}

.bmMetaCard.map .bmMetaSub{
    color:#00ffd0;
}

.bmMetaCard.mode .bmMetaSub{
    color:#26ffd9;
}

.bmMetaCard.match .bmMetaSub{
    color:#00ffb3;
}

.bmMetaCard.mvp .bmMetaSub{
    color:#00ffd0;
}

.mx-hero-grid{

    display:grid;

    grid-template-columns:
        minmax(280px,1fr)
        minmax(220px,320px)
        minmax(280px,1fr);

    grid-template-areas:
        "left center right"
        "bottom bottom bottom";

    gap:18px;

    align-items:start;
}

.mx-grid-left{
    grid-area:left;
}

.mx-grid-center{
    grid-area:center;
}

.mx-grid-right{
    grid-area:right;
}

.mx-grid-bottom{
    grid-area:bottom;

    width:100%;
}

/* =========================================
   ULTRA COMPACT META ROW
========================================= */

.bmMetaWrap{

    width:100%;

    grid-column:1/-1;

    margin-top:10px;
}

.bmMetaGrid{

    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:10px;

    width:100%;
}

/* =========================================
   CARD
========================================= */

.bmMetaCard{

    position:relative;

    overflow:hidden;

    min-height:92px;

    border-radius:18px;

    padding:12px 14px;

    background:
        linear-gradient(
            180deg,
            rgba(8,18,28,.96),
            rgba(3,8,16,.98)
        );

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

    transition:.2s ease;
}

.bmMetaCard:hover{

    transform:translateY(-1px);

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

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

.bmMetaTop{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    margin-bottom:8px;
}

.bmMetaSmall{

    font-size:9px;

    letter-spacing:.14em;

    text-transform:uppercase;

    color:#7c8ea3;

    font-weight:800;
}

.bmMetaLine{

    width:28px;
    height:3px;

    border-radius:20px;

    margin-top:6px;

    background:#00ffd0;
}

/* =========================================
   ICON
========================================= */

.bmMetaIcon{

    width:38px;
    height:38px;

    border-radius:12px;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:17px;

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

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

/* =========================================
   TITLES
========================================= */

.bmMetaTitle{

    font-size:13px;

    line-height:1.05;

    font-weight:850;

    color:#fff;

    margin-bottom:5px;

    letter-spacing:-.01em;
}

.bmMetaValue{


    line-height:1;

    font-weight:900;

    color:#fff;

    margin-bottom:4px;
}

.bmMetaSub{

    font-size:10px;

    line-height:1.25;

    color:#00ffd0;

    font-weight:700;
}

/* =========================================
   THEMES
========================================= */

.bmMetaCard.mvp{
    background:
        linear-gradient(
            180deg,
            rgba(24,22,10,.96),
            rgba(10,8,4,.98)
        );
}

.bmMetaCard.map{
    background:
        linear-gradient(
            180deg,
            rgba(8,18,28,.96),
            rgba(3,8,18,.98)
        );
}

.bmMetaCard.mode{
    background:
        linear-gradient(
            180deg,
            rgba(16,10,28,.96),
            rgba(6,4,18,.98)
        );
}

.bmMetaCard.match{
    background:
        linear-gradient(
            180deg,
            rgba(8,22,20,.96),
            rgba(3,10,10,.98)
        );
}

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

@media (max-width:900px){

    .bmMetaGrid{

        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }
}

@media (max-width:560px){

    .bmMetaGrid{

        grid-template-columns:1fr;
    }
}
/* =========================================================
   FINAL BACKGROUND FIX
========================================================= */

.mx-main{

    position:relative;

    overflow:hidden;

    border-radius:28px;

    padding:18px;

    background:
        linear-gradient(
            180deg,
            rgba(5,12,20,.985),
            rgba(2,6,12,.995)
        );

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

    box-shadow:
        0 20px 80px rgba(0,0,0,.45);
}

/* grid overlay UNDER content */

.mx-main::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:28px;

    background:

        radial-gradient(
            circle at top center,
            rgba(0,255,170,.08),
            transparent 38%
        ),

        radial-gradient(
            circle at bottom left,
            rgba(0,140,255,.05),
            transparent 40%
        ),

        linear-gradient(
            180deg,
            rgba(4,10,18,.15),
            rgba(1,4,8,.45)
        );

    pointer-events:none;

    z-index:0;
}

.mx-main > *{

    position:relative;

    z-index:2;
}

.mx::before{
    z-index:0 !important;
    opacity:.22;
    pointer-events:none;
}

/* content ABOVE grid */

.mx-main,
.mx-body,
.mx-content,
.mx-panel,
.bmMatchMVP,
.mx-tbl-wrap,
.mx-sb{
    position:relative;
    z-index:2;
}


/* smoother scoreboard background */

.mx-tbl-wrap::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at top left,
            rgba(0,255,180,.05),
            transparent 55%
        );

    pointer-events:none;
}
/* =========================================================
   FINAL GRID CONTAINER FIX
========================================================= */

.mx{
    position:relative;
}


/* CONTENT ABOVE GRID */

.mx > *{
    position:relative;
    z-index:2;
}

/* MAIN WRAPPER */

.mx-main{

    position:relative;

    overflow:hidden;

    border-radius:28px;

    background:
        linear-gradient(
            180deg,
            rgba(5,12,20,.97),
            rgba(2,6,12,.99)
        );

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

    box-shadow:
        0 20px 80px rgba(0,0,0,.45);
}

.mx-sb{

    display:flex;

    flex-direction:column;

    gap:16px;

    align-self:start;

    position:relative;

    top:0;

    padding-right:5px;
}