/* ================================================================
   BATTLE REBRAND — Vibrant Block / Maximalist  (2026)
   Brand tokens mirror mx-global.css for consistency
   ================================================================ */
:root {
  --mx-bg:          #010729;
  --mx-surface:     #001E46;
  --mx-surface-2:   #0B2E6B;
  --mx-accent:      #AFDFF9;
  --mx-red:         #D30535;
  --mx-text:        #ffffff;
  --mx-text-soft:   rgba(175,223,249,0.82);
  --mx-text-muted:  rgba(175,223,249,0.50);
  --mx-font-d:      "Bakbak One", sans-serif;
  --mx-font-b:      "Space Mono", monospace;
  --mx-border:      rgba(175,223,249,0.12);
  /* legacy aliases kept so existing refs don't break */
  --battle-ink:     #010729;
  --battle-ink-2:   #001E46;
  --battle-electric: #AFDFF9;
  --battle-hot:     #D30535;
  --battle-gold:    #AFDFF9;
  --battle-muted:   rgba(175,223,249,0.50);
}

.battle-zone {
  font-family: var(--mx-font-b);
  background: var(--mx-bg);
  color: var(--mx-text);
}

.battle-header {
  background: var(--mx-surface);
  border-bottom: 2px solid var(--mx-accent);
  backdrop-filter: blur(8px);
}

.battle-header .battle-topbar {
  gap: 1rem;
}

.battle-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.battle-brand-logo {
  width: 140px;
  max-width: 34vw;
}

.battle-brand-copy {
  display: flex;
  flex-direction: column;
  line-height: 0.95;
}

.battle-brand-kicker {
  color: var(--mx-accent);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-family: var(--mx-font-b);
}

.battle-brand-title {
  font-family: var(--mx-font-d);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--mx-text);
}

.battle-nav-list .nav-link {
  color: var(--mx-text-soft);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.75rem;
  font-family: var(--mx-font-b);
  border: 1px solid transparent;
  border-radius: 0;
  padding: 0.35rem 0.8rem !important;
}

.battle-nav-list .nav-link:hover,
.battle-nav-list .nav-link:focus {
  color: var(--mx-text);
  border-color: var(--mx-border);
  background: var(--mx-surface-2);
}

.battle-nav-list .nav-link.highlight {
  border-color: rgba(211,5,53,0.5);
  background: rgba(211,5,53,0.15);
  color: #ffd6d8;
}

.battle-header .navbar-toggler {
  border: 1px solid var(--mx-border);
}

.battle-header .navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgba(175,223,249,0.2);
}

/* ----------------------------------------------------------------
   HERO — challs-hero used in battle_home + chall_list
   ---------------------------------------------------------------- */
.battle-zone .challs-hero {
  position: relative;
  overflow: hidden;
  background: var(--mx-surface);
  border-bottom: 2px solid var(--mx-accent);
}

.battle-zone .challs-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(175,223,249,0.07) 0%, transparent 38%),
    linear-gradient(295deg, rgba(211,5,53,0.10) 0%, transparent 36%);
}

.battle-zone .challs-hero-eyebrow {
  color: var(--mx-accent);
  letter-spacing: 0.2em;
  font-family: var(--mx-font-b);
  font-size: 0.7rem;
}

.battle-zone .challs-hero-title {
  font-family: var(--mx-font-d);
  letter-spacing: 0.04em;
  font-size: clamp(2.4rem, 5.5vw, 4.5rem);
  line-height: 0.9;
  color: var(--mx-text);
}

.battle-zone .challs-hero-subtitle {
  color: var(--mx-text-soft);
  font-family: var(--mx-font-b);
  font-size: 0.85rem;
}

/* ----------------------------------------------------------------
   FILTER BAR
   ---------------------------------------------------------------- */
.battle-zone .chall-filters {
  border-radius: 0;
  border: 1px solid var(--mx-border);
  background: var(--mx-surface);
}

.battle-zone .chall-filters .form-label {
  color: var(--mx-text-muted);
  font-family: var(--mx-font-b);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.battle-zone .chall-filters .form-select {
  border-color: var(--mx-border);
  background-color: var(--mx-surface-2);
  color: var(--mx-text);
  border-radius: 0;
  font-family: var(--mx-font-b);
  font-size: 0.82rem;
}

.battle-zone .chall-filters .form-select:focus {
  border-color: var(--mx-accent);
  box-shadow: 0 0 0 0.2rem rgba(175,223,249,0.15);
}

/* ----------------------------------------------------------------
   CHALL CARDS
   ---------------------------------------------------------------- */
.battle-zone .chall-card {
  position: relative;
  border-radius: 0;
  border: 1px solid var(--mx-border);
  background: var(--mx-surface);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.battle-zone .chall-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(140deg, rgba(175,223,249,0.04), transparent 40%);
}

.battle-zone .chall-card > * {
  position: relative;
  z-index: 1;
}

.battle-zone .chall-card:hover {
  border-color: var(--mx-accent);
  box-shadow: 0 12px 36px rgba(0,0,0,0.5), 0 0 24px rgba(175,223,249,0.12);
  transform: translateY(-3px);
}

.battle-zone .chall-card-header {
  background: var(--mx-surface-2);
  border-bottom: 1px solid var(--mx-border);
}

.battle-zone .chall-card .mode {
  background: rgba(175,223,249,0.12);
  color: var(--mx-accent);
  border: 1px solid rgba(175,223,249,0.24);
  font-family: var(--mx-font-b);
  font-size: 0.7rem;
}

.battle-zone .platform-pill {
  background: rgba(211,5,53,0.14);
  color: #ffc9cc;
  border: 1px solid rgba(211,5,53,0.28);
  font-family: var(--mx-font-b);
  font-size: 0.7rem;
}

.battle-zone .status {
  border: 1px solid var(--mx-border);
  font-family: var(--mx-font-b);
  font-size: 0.68rem;
  border-radius: 999px;
}

.battle-zone .status-open {
  background: rgba(175,223,249,0.12);
  color: var(--mx-accent);
  border-color: rgba(175,223,249,0.28);
}

.battle-zone .status-accepted {
  background: rgba(34,197,94,0.14);
  color: #86efac;
  border-color: rgba(34,197,94,0.28);
}

.battle-zone .status-reported {
  background: rgba(251,191,36,0.14);
  color: #fde68a;
  border-color: rgba(251,191,36,0.28);
}

.battle-zone .status-disputed {
  background: rgba(211,5,53,0.14);
  color: #fca5a5;
  border-color: rgba(211,5,53,0.28);
}

.battle-zone .info-pill {
  border-color: var(--mx-border);
  background: rgba(175,223,249,0.06);
  color: var(--mx-text-soft);
  font-family: var(--mx-font-b);
  font-size: 0.68rem;
}

.battle-zone .team-name {
  font-family: var(--mx-font-d);
  font-size: 1rem;
  color: var(--mx-text);
}

.battle-zone .vs {
  font-family: var(--mx-font-d);
  color: var(--mx-accent);
}

.battle-zone .team-xp {
  background: rgba(175,223,249,0.10);
  color: var(--mx-accent);
  border: 1px solid rgba(175,223,249,0.18);
  font-family: var(--mx-font-b);
}

.battle-zone .team-open {
  color: var(--mx-accent);
  font-family: var(--mx-font-b);
}

/* ----------------------------------------------------------------
   BATTLE HOME — stats, quick cards, panels
   ---------------------------------------------------------------- */
.battle-zone .battle-home-stat-card {
  border: 1px solid var(--mx-border);
  border-radius: 0;
  background: var(--mx-surface);
}

.battle-zone .battle-home-stat-label {
  color: var(--mx-text-muted);
  font-family: var(--mx-font-b);
}

.battle-zone .battle-home-stat-value {
  font-family: var(--mx-font-d);
  color: var(--mx-accent);
}

.battle-zone .battle-home-section-title {
  font-family: var(--mx-font-d);
  color: var(--mx-text);
  border-bottom: 2px solid var(--mx-accent);
  padding-bottom: 0.4rem;
  letter-spacing: 0.06em;
}

.battle-zone .battle-home-quick-card {
  border: 1px solid var(--mx-border);
  border-radius: 0;
  background: var(--mx-surface);
  color: var(--mx-text-soft);
}

.battle-zone .battle-home-quick-card:hover,
.battle-zone .battle-home-quick-card:focus-visible {
  border-color: var(--mx-accent);
  background: var(--mx-surface-2);
  color: var(--mx-text);
}

.battle-zone .battle-home-quick-icon {
  color: var(--mx-accent);
}

.battle-zone .battle-home-quick-title {
  font-family: var(--mx-font-d);
  color: var(--mx-text);
}

.battle-zone .battle-home-quick-copy {
  font-family: var(--mx-font-b);
  font-size: 0.78rem;
  color: var(--mx-text-muted);
}

.battle-zone .battle-home-panel {
  border: 1px solid var(--mx-border);
  border-radius: 0;
  background: var(--mx-surface);
}

.battle-zone .battle-home-list-item {
  border: 1px solid var(--mx-border);
  border-radius: 0;
  background: var(--mx-surface-2);
}

/* ----------------------------------------------------------------
   BATTLE BOARD — tablón
   ---------------------------------------------------------------- */
.battle-zone .battle-board-panel {
  border: 1px solid var(--mx-border);
  border-radius: 0;
  background: var(--mx-surface);
}

.battle-zone .battle-board-title {
  font-family: var(--mx-font-d);
  color: var(--mx-text);
  letter-spacing: 0.08em;
}

.battle-zone .battle-board-subtitle {
  color: var(--mx-text-soft);
  font-family: var(--mx-font-b);
  font-size: 0.82rem;
}

.battle-zone .battle-board-card {
  border: 1px solid var(--mx-border);
  border-radius: 0;
  background: var(--mx-surface-2);
}

.battle-zone .battle-board-card h3 {
  font-family: var(--mx-font-d);
  color: var(--mx-text);
  font-size: 1rem;
  letter-spacing: 0.05em;
}

.battle-zone .battle-board-card p {
  color: var(--mx-text-soft);
  font-family: var(--mx-font-b);
  font-size: 0.82rem;
}

/* ----------------------------------------------------------------
   FOOTER
   ---------------------------------------------------------------- */
.battle-footer {
  border-top: 2px solid var(--mx-accent);
  background: var(--mx-surface);
}

.battle-footer .footer-link {
  color: var(--mx-text-soft);
  text-decoration: none;
  font-family: var(--mx-font-b);
}

.battle-footer .footer-link:hover,
.battle-footer .footer-link:focus {
  color: var(--mx-text);
}

/* ----------------------------------------------------------------
   BUTTONS — brand overrides inside battle-zone
   ---------------------------------------------------------------- */
.battle-zone .btn-primary {
  background: var(--mx-accent);
  color: var(--mx-bg);
  border: none;
  border-radius: 0;
  font-family: var(--mx-font-d);
  letter-spacing: 0.06em;
  font-weight: 400;
}

.battle-zone .btn-primary:hover,
.battle-zone .btn-primary:focus {
  background: #d2f2ff;
  color: var(--mx-bg);
}

.battle-zone .btn-outline-info {
  border-color: var(--mx-accent);
  color: var(--mx-accent);
  border-radius: 0;
  font-family: var(--mx-font-b);
}

.battle-zone .btn-outline-info:hover {
  background: var(--mx-accent);
  color: var(--mx-bg);
}

.battle-zone .btn-outline-light {
  border-color: var(--mx-border);
  color: var(--mx-text-soft);
  border-radius: 0;
  font-family: var(--mx-font-b);
}

.battle-zone .btn-outline-light:hover {
  background: var(--mx-surface-2);
  color: var(--mx-text);
  border-color: var(--mx-accent);
}

.battle-zone .btn-outline-danger {
  border-color: rgba(211,5,53,0.6);
  color: #fca5a5;
  border-radius: 0;
  font-family: var(--mx-font-b);
}

.battle-zone .btn-outline-danger:hover {
  background: rgba(211,5,53,0.2);
  color: #fff;
}

.battle-zone .btn-outline-warning {
  border-color: rgba(251,191,36,0.5);
  color: #fde68a;
  border-radius: 0;
  font-family: var(--mx-font-b);
}

.battle-zone .btn-outline-warning:hover {
  background: rgba(251,191,36,0.15);
  color: #fff;
}

.battle-zone .btn-battle-accent {
  background: var(--mx-surface-2);
  border: 1px solid var(--mx-accent);
  color: var(--mx-accent);
  border-radius: 0;
  font-family: var(--mx-font-b);
}

.battle-zone .btn-battle-accent:hover {
  background: var(--mx-accent);
  color: var(--mx-bg);
}

/* ----------------------------------------------------------------
   BATTLE HEADER — final detailed pass
   ---------------------------------------------------------------- */
.battle-zone {
  position: relative;
}

.battle-header {
  border-bottom: 2px solid var(--mx-accent);
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.battle-header::after {
  display: none; /* replaced by solid border */
}

.battle-brand-title {
  font-family: var(--mx-font-d);
  font-size: 1.5rem;
  letter-spacing: 0.1em;
}

.battle-header .battle-topbar {
  min-height: 64px;
  gap: 1rem;
}

.battle-header .battle-brand {
  gap: 0.55rem;
  flex-shrink: 0;
}

.battle-header .battle-brand-logo {
  width: auto;
  max-width: none;
  height: 34px;
  object-fit: contain;
}

.battle-header .battle-brand-copy {
  line-height: 0.9;
}

.battle-header .battle-brand-kicker {
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  font-family: var(--mx-font-b);
}

.battle-header .battle-brand-title {
  font-size: 1.22rem;
  letter-spacing: 0.08em;
}

.battle-header .battle-nav-list {
  gap: 0.2rem;
}

.battle-header .battle-nav-list .nav-link {
  position: relative;
  border: 0;
  border-radius: 0;
  padding: 0.4rem 0.72rem !important;
  background: transparent;
  box-shadow: none;
  font-size: 0.72rem;
  font-family: var(--mx-font-b);
  color: var(--mx-text-soft);
}

.battle-header .battle-nav-list .nav-link::after {
  content: "";
  position: absolute;
  left: 0.72rem;
  right: 0.72rem;
  bottom: 0.2rem;
  height: 2px;
  background: var(--mx-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.16s ease;
}

.battle-header .battle-nav-list .nav-link:hover,
.battle-header .battle-nav-list .nav-link:focus {
  border-color: transparent;
  background: var(--mx-surface-2);
  color: var(--mx-text);
  transform: none;
  box-shadow: none;
}

.battle-header .battle-nav-list .nav-link:hover::after,
.battle-header .battle-nav-list .nav-link:focus::after {
  transform: scaleX(1);
}

.battle-header .battle-nav-list .nav-link.highlight {
  border: 1px solid rgba(211,5,53,0.5);
  background: rgba(211,5,53,0.14);
  color: #ffd6d8;
}

.battle-header .battle-nav-list .nav-link.highlight::after {
  display: none;
}

@media (max-width: 991.98px) {
  .battle-header .battle-brand-logo {
    height: 30px;
  }

  .battle-header .battle-brand-copy {
    display: none;
  }

  .battle-header #battleNavbar {
    margin-top: 0.7rem;
    border: 1px solid var(--mx-border);
    border-radius: 0;
    background: var(--mx-surface);
    padding: 0.42rem;
  }

  .battle-header .battle-nav-list {
    width: 100%;
    align-items: stretch !important;
  }

  .battle-header .battle-nav-list .nav-link {
    width: 100%;
    border: 1px solid var(--mx-border);
    background: var(--mx-surface-2);
  }

  .battle-header .battle-nav-list .nav-link::after {
    display: none;
  }
}

/* ----------------------------------------------------------------
   SURFACE NORMALIZATION — kill white Bootstrap blocks
   ---------------------------------------------------------------- */
.battle-zone main {
  background: transparent !important;
}

.battle-zone .card {
  background: var(--mx-surface);
  border: 1px solid var(--mx-border);
  color: var(--mx-text);
  border-radius: 0;
}

.battle-zone .card .card-footer {
  background: transparent;
  border-top-color: var(--mx-border);
}

.battle-zone .table {
  --bs-table-bg: var(--mx-surface);
  --bs-table-color: var(--mx-text);
  --bs-table-border-color: var(--mx-border);
  --bs-table-striped-bg: rgba(175,223,249,0.03);
  --bs-table-striped-color: var(--mx-text);
  --bs-table-hover-bg: rgba(175,223,249,0.06);
  --bs-table-hover-color: var(--mx-text);
}

.battle-zone .table-light,
.battle-zone .table-light > :not(caption) > * > * {
  background: var(--mx-surface) !important;
  color: var(--mx-text) !important;
  border-color: var(--mx-border) !important;
}

.battle-zone .alert-info.alert-persistent,
.battle-zone .alert.alert-info {
  background: rgba(175,223,249,0.10);
  color: var(--mx-accent);
  border-color: rgba(175,223,249,0.28);
}

.battle-zone .alert-warning.alert-persistent,
.battle-zone .alert.alert-warning {
  background: rgba(251,191,36,0.12);
  color: #fde68a;
  border-color: rgba(251,191,36,0.28);
}

.battle-zone .alert-danger.alert-persistent,
.battle-zone .alert.alert-danger {
  background: rgba(211,5,53,0.12);
  color: #fca5a5;
  border-color: rgba(211,5,53,0.28);
}

.battle-zone .alert-success {
  background: rgba(34,197,94,0.12);
  color: #86efac;
  border-color: rgba(34,197,94,0.28);
}

.battle-zone .breadcrumb {
  --bs-breadcrumb-bg: var(--mx-surface-2);
  --bs-breadcrumb-divider-color: var(--mx-text-muted);
  --bs-breadcrumb-item-active-color: var(--mx-text);
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--mx-border);
  border-radius: 0;
}

.battle-zone .breadcrumb a {
  color: var(--mx-accent);
}

.battle-zone .form-control,
.battle-zone .form-select,
.battle-zone textarea {
  background-color: var(--mx-surface-2);
  border-color: var(--mx-border);
  color: var(--mx-text);
  border-radius: 0;
  font-family: var(--mx-font-b);
}

.battle-zone .form-control:focus,
.battle-zone .form-select:focus,
.battle-zone textarea:focus {
  background-color: var(--mx-surface-2);
  border-color: var(--mx-accent);
  box-shadow: 0 0 0 0.2rem rgba(175,223,249,0.15);
  color: var(--mx-text);
}

.battle-zone .form-label {
  color: var(--mx-text-muted);
  font-family: var(--mx-font-b);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ----------------------------------------------------------------
   MODAL surface
   ---------------------------------------------------------------- */
.battle-zone .modal-content {
  background: var(--mx-surface);
  border: 1px solid var(--mx-border);
  border-radius: 0;
  color: var(--mx-text);
}

.battle-zone .modal-header {
  border-bottom-color: var(--mx-border);
  background: var(--mx-surface-2);
}

.battle-zone .modal-footer {
  border-top-color: var(--mx-border);
}

/* ----------------------------------------------------------------
   PAGINATION
   ---------------------------------------------------------------- */
.battle-zone .page-link {
  background: var(--mx-surface-2);
  border-color: var(--mx-border);
  color: var(--mx-accent);
  font-family: var(--mx-font-b);
  border-radius: 0;
}

.battle-zone .page-item.active .page-link {
  background: var(--mx-accent);
  border-color: var(--mx-accent);
  color: var(--mx-bg);
}

.battle-zone .page-item.disabled .page-link {
  background: var(--mx-surface);
  color: var(--mx-text-muted);
  border-color: var(--mx-border);
}

/* ----------------------------------------------------------------
   BADGE overrides
   ---------------------------------------------------------------- */
.battle-zone .badge.bg-danger { background: var(--mx-red) !important; }
.battle-zone .badge.bg-warning { background: rgba(251,191,36,0.85) !important; }
.battle-zone .badge.bg-success { background: rgba(34,197,94,0.85) !important; }
.battle-zone .badge.bg-secondary { background: var(--mx-surface-2) !important; border: 1px solid var(--mx-border); color: var(--mx-text-soft) !important; }