/* =========================
   BATTLE MVP HERO (UNIVERSAL PREMIUM)
   ========================= */

/* =========================
   BATTLE MVP HERO (FIXED PRO)
   ========================= */

.bmHero{
  position:relative;
  z-index:1;

  width:100%; /* 🔥 ВАЖНО */
  max-width:100%; /* защита */

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

  gap:24px;
  padding:26px;

  border-radius:18px;

  background:linear-gradient(135deg,#0f172a,#071021);
  border:1px solid rgba(255,255,255,.08);

  backdrop-filter: blur(12px);

  box-shadow:
    0 10px 40px rgba(0,0,0,.6),
    inset 0 0 30px rgba(255,255,255,.03);

  overflow:hidden;
}

/* ===== GLOW LAYERS ===== */

.bmHero::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:18px;

  background:
    radial-gradient(circle at 20% 50%, rgba(36,223,146,.15), transparent 40%),
    radial-gradient(circle at 80% 50%, rgba(59,130,246,.15), transparent 40%);

  pointer-events:none;
  z-index:0;
}

.bmHero::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:18px;

  background:linear-gradient(120deg, transparent, rgba(255,255,255,.05), transparent);

  opacity:.25;
  pointer-events:none;
  z-index:0;
}

/* ================= LEFT ================= */

.bmHero-left{
  position:relative;
  z-index:2;

  display:flex;
  flex-direction:column;
  gap:10px;
}

/* TAG */
.bmHero-tag{
  font-size:11px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#6b7280;
}

/* TITLE */
.bmHero-title{
  font-size:28px;
  font-weight:800;

  background:linear-gradient(90deg,#eaf1ff,#9cf6d6);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* SUB */
.bmHero-sub{
  font-size:14px;
  color:#9aa7b6;
}

/* ================= MODE SWITCH ================= */

.bmHero-modes{
  display:flex;
  gap:10px;
  margin-top:6px;
}

.bmHero-mode{
  padding:6px 14px;
  border-radius:999px;

  font-size:13px;
  color:#9aa7b6;

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

  cursor:pointer;
  transition:.2s;
}

.bmHero-mode.active{
  color:#fff;
  border-color:#24df92;
  box-shadow:0 0 10px rgba(36,223,146,.4);
}

/* ================= RIGHT ================= */

.bmHero-right{
  position:relative;
  z-index:2;

  display:flex;
  align-items:center;
  gap:14px;
}

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

.bmHero-stats{
  display:flex;
  gap:12px;
}

.bmHero-stat{
  display:flex;
  flex-direction:column;
  align-items:center;

  padding:10px 14px;

  min-width:72px;

  border-radius:12px;

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

  backdrop-filter: blur(6px);

  box-shadow:
    inset 0 0 10px rgba(255,255,255,.03),
    0 5px 15px rgba(0,0,0,.3);

  transition:.2s;
}

.bmHero-stat strong{
  font-size:16px;
  color:#fff;
}

.bmHero-stat span{
  font-size:11px;
  color:#6b7280;
}

.bmHero-stat:hover{
  transform:translateY(-2px);
  border-color:#24df92;
}

/* ================= BUTTON ================= */

.bmHero-btn{
  padding:10px 18px;

  border-radius:10px;
  border:none;

  font-weight:600;
  font-size:14px;

  color:#02120a;

  background:linear-gradient(135deg,#24df92,#00e1a0);

  cursor:pointer;

  transition:.2s;

  position:relative;
  z-index:3;
}

.bmHero-btn:hover{
  transform:translateY(-1px);

  box-shadow:
    0 0 20px rgba(36,223,146,.4),
    0 10px 25px rgba(0,0,0,.4);
}

/* ================= ONLINE DOT ================= */

.bmHero-online{
  width:10px;
  height:10px;

  border-radius:50%;

  background:#00e1a0;

  box-shadow:0 0 12px rgba(0,225,160,.9);
}

/* ================= SAFETY ================= */

/* 🔥 чтобы ничего не ломало клики */
.bmHero *{
  pointer-events:auto;
}

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

@media (max-width:900px){

  .bmHero{
    flex-direction:column;
    align-items:flex-start;
  }

  .bmHero-right{
    width:100%;
    justify-content:space-between;
  }

  .bmHero-stats{
    flex-wrap:wrap;
  }

}
/* =========================
   HERO STATES (ВАЖНО)
   ========================= */

/* SEARCHING */
.bmHero-btn.searching{
  background:#020617;
  color:#24df92;

  border:1px solid rgba(36,223,146,.5);

  box-shadow:
    0 0 25px rgba(36,223,146,.35);

  animation:heroSearchPulse 1.8s infinite;
}

/* ACCEPT */
.bmHero-btn.accept{
  background:linear-gradient(135deg,#ffb300,#ff6a00);
  color:#000;

  box-shadow:
    0 0 30px rgba(255,150,0,.6);
}

/* LIVE */
.bmHero-btn.live{
  background:#111827;
  color:#9aa7b6;

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

/* ERROR */
.bmHero-btn.error{
  background:#ff4d4f;
  color:#fff;
}

/* ANIMATION */
@keyframes heroSearchPulse{
  0%{transform:scale(1)}
  50%{transform:scale(1.05)}
  100%{transform:scale(1)}
}