/* ============================================================================
   BATTLE · Tema BLACK OPS 1  (Guerra Fria / SOG / documento clasificado)
   ----------------------------------------------------------------------------
   Estetica: oscuro militar retro, "estacion de radio / archivo clasificado",
   grano CRT + scanlines, acentos ambar fosforo y verde fosforo, teletipo/stencil,
   sellos "CLASSIFIED". Sobrio y aspero.
   TODO scoped bajo body[data-game="blackops1"] -> NO afecta a BO7 ni BO2.
   Mobile-first: colores/texturas no dependen del ancho; el layout lo da la base.
   ========================================================================== */

body[data-game="blackops1"] {
  --gt-bg: #0a0b07;
  --gt-surface: rgba(255, 176, 0, 0.055);
  --gt-surface-2: rgba(255, 176, 0, 0.10);
  --gt-border: rgba(255, 176, 0, 0.32);
  --gt-accent: #ffb000;            /* ambar fosforo */
  --gt-accent-2: #46e07a;          /* verde fosforo */
  --gt-on-accent: #140d00;
  --gt-text: #f3e9d2;
  --gt-muted: #b79b63;
  --gt-glow: rgba(255, 176, 0, 0.30);
  --gt-radius: 6px;
  --gt-stamp: #c2362a;             /* sello crimson apagado */

  background-color: var(--gt-bg) !important;
  background-image:
    radial-gradient(1200px 600px at 50% -10%, rgba(255, 176, 0, 0.08), transparent 60%),
    radial-gradient(900px 500px at 100% 100%, rgba(70, 224, 122, 0.05), transparent 60%),
    linear-gradient(180deg, #0a0b07 0%, #070804 100%) !important;
  color: var(--gt-text);
  font-feature-settings: "tnum" 1;
}

/* --- Filtro CRT: scanlines + vineta por encima (baratos, no capturan clics) -
   Nota: se evita feTurbulence/SVG y mix-blend-mode a pantalla completa por su
   coste de rasterizado; scanlines con repeating-linear-gradient es suficiente. */
body[data-game="blackops1"]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.22) 0px,
      rgba(0, 0, 0, 0.22) 1px,
      transparent 2px,
      transparent 3px
    );
  opacity: 0.5;
}
body[data-game="blackops1"]::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none;
  /* vineta barata via radial-gradient (sin filtros ni blend) */
  background: radial-gradient(120% 120% at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.72) 100%);
}

/* --- Tipografia teletipo en kickers, etiquetas y datos --------------------- */
body[data-game="blackops1"] .mx-kicker,
body[data-game="blackops1"] .ladder-game-filter .btn,
body[data-game="blackops1"] .bhome-game-filter .btn,
body[data-game="blackops1"] .clist-tab,
body[data-game="blackops1"] .ladder-table thead th,
body[data-game="blackops1"] .ladder-table td[data-label]::before,
body[data-game="blackops1"] .podium-mode-badge {
  font-family: "Space Mono", ui-monospace, "Courier New", monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* --- Hero: titular stencil ambar con leve glow y linea de transmision ------ */
body[data-game="blackops1"] .mx-page-hero {
  position: relative;
  border-bottom: 1px solid var(--gt-border);
  background:
    linear-gradient(180deg, rgba(255, 176, 0, 0.06), transparent 70%);
}
body[data-game="blackops1"] .mx-kicker {
  color: var(--gt-accent-2);
  text-shadow: 0 0 8px rgba(70, 224, 122, 0.45);
}
body[data-game="blackops1"] .mx-page-hero__title {
  color: var(--gt-accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-shadow: 0 0 12px var(--gt-glow), 0 2px 0 rgba(0, 0, 0, 0.6);
}
/* Sello "CLASSIFIED" en la cabecera */
body[data-game="blackops1"] .mx-page-hero::after {
  content: "// CLASSIFIED · SOG";
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  font-family: "Space Mono", monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--gt-stamp);
  border: 2px solid var(--gt-stamp);
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  transform: rotate(-6deg);
  opacity: 0.85;
  pointer-events: none;
}
@media (max-width: 575.98px) {
  body[data-game="blackops1"] .mx-page-hero::after {
    position: static;
    display: inline-block;
    transform: none;
    margin-top: 0.5rem;
  }
}

/* --- Superficies (cards, tablas, filas) con hairline ambar ----------------- */
body[data-game="blackops1"] .ladder-table {
  color: var(--gt-text);
  border: 1px solid var(--gt-border);
  background: rgba(10, 11, 7, 0.6);
}
body[data-game="blackops1"] .ladder-table thead th {
  color: var(--gt-accent);
  border-bottom: 1px solid var(--gt-border);
  background: rgba(255, 176, 0, 0.06);
  font-size: 0.75rem;
}
body[data-game="blackops1"] .ladder-table td,
body[data-game="blackops1"] .ladder-table th[scope="row"] {
  border-color: rgba(255, 176, 0, 0.14);
}
body[data-game="blackops1"] .points-col {
  color: var(--gt-accent);
  font-weight: 700;
}
body[data-game="blackops1"] .wins-col { color: var(--gt-accent-2); }
body[data-game="blackops1"] .losses-col { color: #d98a6a; }

/* Podio con marco ambar */
body[data-game="blackops1"] .podium-place {
  border: 1px solid var(--gt-border);
  background: linear-gradient(180deg, rgba(255, 176, 0, 0.08), rgba(10, 11, 7, 0.6));
  border-radius: var(--gt-radius);
}
body[data-game="blackops1"] .podium-points { color: var(--gt-accent); }
body[data-game="blackops1"] .podium-title { color: var(--gt-accent); }

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

/* --- Overrides de alta prioridad (la skin combat/vibe pisa estos colores) ---
   Scoped a blackops1: nunca afecta a BO7/BO2. */
body[data-game="blackops1"] .mx-kicker { color: var(--gt-accent-2) !important; }
body[data-game="blackops1"] .mx-page-hero__title { color: var(--gt-accent) !important; -webkit-text-fill-color: var(--gt-accent) !important; }
body[data-game="blackops1"] .ladder-table thead th { color: var(--gt-accent) !important; }
body[data-game="blackops1"] .points-col,
body[data-game="blackops1"] .podium-points { color: var(--gt-accent) !important; }
body[data-game="blackops1"] .wins-col { color: var(--gt-accent-2) !important; }
body[data-game="blackops1"] .podium-title { color: var(--gt-accent) !important; }
body[data-game="blackops1"] .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="blackops1"] .bhome-hero-eyebrow,
body[data-game="blackops1"] .challs-hero-eyebrow {
  color: var(--gt-accent-2) !important;
  font-family: "Space Mono", monospace;
  letter-spacing: 0.14em;
}
body[data-game="blackops1"] .bhome-hero-title-accent,
body[data-game="blackops1"] .challs-hero-title {
  color: var(--gt-accent) !important;
  -webkit-text-fill-color: var(--gt-accent) !important;
  text-shadow: 0 0 12px var(--gt-glow);
}
body[data-game="blackops1"] .bhome-metric-val { color: var(--gt-accent) !important; }
body[data-game="blackops1"] .bhome-panel-title { color: var(--gt-text) !important; }

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

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

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

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