/* ============================================================================
   BATTLE · Tema BLACK OPS 2  (futuro cercano 2025 / Strike Force / HUD holografico)
   ----------------------------------------------------------------------------
   Estetica: tecnologica/holografica, HUD futurista, azules/cian con acento
   naranja, lineas angulares, glow, drones. Mas limpio y futurista que BO1.
   TODO scoped bajo body[data-game="blackops2"] -> NO afecta a BO7 ni BO1.
   ========================================================================== */

body[data-game="blackops2"] {
  --gt-bg: #060a12;
  --gt-surface: rgba(0, 229, 255, 0.05);
  --gt-surface-2: rgba(0, 229, 255, 0.10);
  --gt-border: rgba(0, 229, 255, 0.34);
  --gt-accent: #00e5ff;            /* cian HUD */
  --gt-accent-2: #ff7a1a;          /* naranja Strike Force */
  --gt-on-accent: #04121a;
  --gt-text: #eaf6ff;
  --gt-muted: #8aa6bd;
  --gt-glow: rgba(0, 229, 255, 0.32);
  --gt-radius: 4px;

  background-color: var(--gt-bg) !important;
  background-image:
    radial-gradient(1100px 560px at 50% -10%, rgba(0, 229, 255, 0.10), transparent 60%),
    radial-gradient(800px 520px at 0% 100%, rgba(255, 122, 26, 0.06), transparent 55%),
    /* rejilla holografica sutil */
    linear-gradient(rgba(0, 229, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, 0.05) 1px, transparent 1px),
    linear-gradient(180deg, #060a12 0%, #04070e 100%) !important;
  background-size: auto, auto, 44px 44px, 44px 44px, auto !important;
  color: var(--gt-text);
  font-feature-settings: "tnum" 1;
}

/* --- Barrido holografico muy sutil por encima (no captura clics) ----------- */
body[data-game="blackops2"]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(0, 229, 255, 0.05) 0px,
      rgba(0, 229, 255, 0.05) 1px,
      transparent 2px,
      transparent 4px
    );
  opacity: 0.4;
}

/* --- Tipografia futurista (Exo 2) en titulares; datos en mono -------------- */
body[data-game="blackops2"] .mx-page-hero__title,
body[data-game="blackops2"] .podium-title {
  font-family: "Exo 2", "Bakbak One", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gt-accent);
  text-shadow: 0 0 14px var(--gt-glow);
}
body[data-game="blackops2"] .mx-kicker,
body[data-game="blackops2"] .ladder-game-filter .btn,
body[data-game="blackops2"] .bhome-game-filter .btn,
body[data-game="blackops2"] .clist-tab,
body[data-game="blackops2"] .ladder-table thead th,
body[data-game="blackops2"] .ladder-table td[data-label]::before,
body[data-game="blackops2"] .podium-mode-badge {
  font-family: "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
body[data-game="blackops2"] .mx-kicker { color: var(--gt-accent-2); }

/* --- Hero con marco HUD (corchetes angulares en las esquinas) -------------- */
body[data-game="blackops2"] .mx-page-hero {
  position: relative;
  border-bottom: 1px solid var(--gt-border);
  background: linear-gradient(180deg, rgba(0, 229, 255, 0.07), transparent 70%);
}
body[data-game="blackops2"] .mx-page-hero::before,
body[data-game="blackops2"] .mx-page-hero::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  pointer-events: none;
}
body[data-game="blackops2"] .mx-page-hero::before {
  top: 10px;
  left: 10px;
  border-top: 2px solid var(--gt-accent);
  border-left: 2px solid var(--gt-accent);
  box-shadow: -2px -2px 12px var(--gt-glow);
}
body[data-game="blackops2"] .mx-page-hero::after {
  bottom: 10px;
  right: 10px;
  border-bottom: 2px solid var(--gt-accent-2);
  border-right: 2px solid var(--gt-accent-2);
  box-shadow: 2px 2px 12px rgba(255, 122, 26, 0.35);
}

/* --- Superficies: tabla/cards con borde cian y esquinas achaflanadas ------- */
body[data-game="blackops2"] .ladder-table {
  color: var(--gt-text);
  border: 1px solid var(--gt-border);
  background: rgba(6, 10, 18, 0.6);
}
body[data-game="blackops2"] .ladder-table thead th {
  color: var(--gt-accent);
  border-bottom: 1px solid var(--gt-border);
  background: rgba(0, 229, 255, 0.07);
  font-size: 0.75rem;
}
body[data-game="blackops2"] .ladder-table td,
body[data-game="blackops2"] .ladder-table th[scope="row"] {
  border-color: rgba(0, 229, 255, 0.14);
}
body[data-game="blackops2"] .points-col { color: var(--gt-accent); font-weight: 700; }
body[data-game="blackops2"] .wins-col { color: var(--gt-accent); }
body[data-game="blackops2"] .losses-col { color: var(--gt-accent-2); }

/* En movil, las tarjetas de fila con corte HUD en una esquina */
@media (max-width: 767.98px) {
  body[data-game="blackops2"] .ladder-table tr {
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
    border-left: 3px solid var(--gt-accent);
  }
}

/* Podio holografico */
body[data-game="blackops2"] .podium-place {
  border: 1px solid var(--gt-border);
  background: linear-gradient(180deg, rgba(0, 229, 255, 0.09), rgba(6, 10, 18, 0.6));
  border-radius: var(--gt-radius);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
body[data-game="blackops2"] .podium-points { color: var(--gt-accent); }

/* CTAs / badge de juego */
body[data-game="blackops2"] .btn-info,
body[data-game="blackops2"] .cmc-game {
  background: var(--gt-accent);
  border-color: var(--gt-accent);
  color: var(--gt-on-accent);
}
body[data-game="blackops2"] a { color: var(--gt-accent); }
body[data-game="blackops2"] a.alert-link { color: var(--gt-accent-2); }

/* --- Overrides de alta prioridad (la skin combat/vibe pisa estos colores) ---
   Scoped a blackops2: nunca afecta a BO7/BO1. */
body[data-game="blackops2"] .mx-kicker { color: var(--gt-accent-2) !important; }
body[data-game="blackops2"] .mx-page-hero__title { color: var(--gt-accent) !important; -webkit-text-fill-color: var(--gt-accent) !important; }
body[data-game="blackops2"] .ladder-table thead th { color: var(--gt-accent) !important; }
body[data-game="blackops2"] .points-col,
body[data-game="blackops2"] .podium-points { color: var(--gt-accent) !important; }
body[data-game="blackops2"] .wins-col { color: var(--gt-accent) !important; }
body[data-game="blackops2"] .podium-title { color: var(--gt-accent) !important; }
body[data-game="blackops2"] .btn-info { background: var(--gt-accent) !important; border-color: var(--gt-accent) !important; color: var(--gt-on-accent) !important; }

/* --- Heros del HUB (bhome-*) y del LISTADO (challs-hero-*) ------------------ */
body[data-game="blackops2"] .bhome-hero-eyebrow,
body[data-game="blackops2"] .challs-hero-eyebrow {
  color: var(--gt-accent-2) !important;
  font-family: "Space Mono", monospace;
  letter-spacing: 0.12em;
}
body[data-game="blackops2"] .bhome-hero-title-accent,
body[data-game="blackops2"] .challs-hero-title {
  color: var(--gt-accent) !important;
  -webkit-text-fill-color: var(--gt-accent) !important;
  font-family: "Exo 2", system-ui, sans-serif;
  text-shadow: 0 0 14px var(--gt-glow);
}
body[data-game="blackops2"] .bhome-metric-val { color: var(--gt-accent) !important; }
body[data-game="blackops2"] .bhome-panel-title { color: var(--gt-text) !important; }

/* --- Ambiente del hero del HUB: retintar el rojo por defecto a cian --------- */
body[data-game="blackops2"] .bhome-hero-glow--red {
  background: radial-gradient(circle, rgba(0, 229, 255, 0.22), transparent 70%) !important;
}
body[data-game="blackops2"] .bhome-hero-glow--blue {
  background: radial-gradient(circle, rgba(255, 122, 26, 0.16), transparent 70%) !important;
}
body[data-game="blackops2"] .bhome-btn-primary,
body[data-game="blackops2"] .bhome-hero .btn-primary,
body[data-game="blackops2"] .challs-hero .btn-primary {
  background: var(--gt-accent) !important;
  border-color: var(--gt-accent) !important;
  color: var(--gt-on-accent) !important;
}
body[data-game="blackops2"] .bhome-live-dot { background: var(--gt-accent-2) !important; }

/* --- Fondo del hero del hub: retintar su linear-gradient rojo a cian -------- */
body[data-game="blackops2"] .bhome-hero {
  background-image: linear-gradient(135deg, rgba(0, 229, 255, 0.16) 0%, rgba(0, 0, 0, 0) 60%) !important;
}

/* --- Botones outline del hero del hub al acento del juego ------------------- */
body[data-game="blackops2"] .bhome-hero-ctas .btn-outline-info,
body[data-game="blackops2"] .bhome-hero-ctas .btn-outline-light,
body[data-game="blackops2"] .challs-hero-actions .btn-outline-info {
  color: var(--gt-accent) !important;
  border-color: var(--gt-accent) !important;
}
body[data-game="blackops2"] .bhome-hero { border-bottom: 1px solid var(--gt-border) !important; }

/* --- Pagina de CREACION de reto (card generica) ---------------------------- */
body[data-game="blackops2"] .card.custom-grey h1,
body[data-game="blackops2"] .card.custom-grey .h4 {
  color: var(--gt-accent) !important;
  -webkit-text-fill-color: var(--gt-accent) !important;
}
body[data-game="blackops2"] .card.custom-grey {
  border-color: var(--gt-border) !important;
}
body[data-game="blackops2"] .card.custom-grey .form-label {
  color: var(--gt-muted) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
}