/* GENERADO por tools/generar-tema-s2.js: copia de css/styles.css con la
   paleta de la Season 2, más tools/tema-s2-base.css al final. NO SE EDITA A
   MANO: se cambia styles.css, la base o el generador y se vuelve a ejecutar. */

/* ============================================================
   BO2 ARENA — Design System "Dark Ops HUD"
   Ver design-system/MASTER.md para tokens y reglas.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Paleta Black Ops 2 / logo LAS: negro carbón + naranja + plata */
  --bg: #07040d;
  --surface: #110a1f;
  --surface-2: #1a1030;
  --border: #2a1d45;
  --border-strong: #3d2a63;

  --primary: var(--s2-acento);
  --primary-hover: var(--s2-acento-claro);
  --primary-dim: rgba(var(--s2-acento-rgb), 0.10);
  --on-primary: #ffffff;

  --text: #F2F2F0;
  --text-2: #b2a8cc;
  --text-3: #8a80a6;
  --steel: #C4C8CE;

  --win: #3DDC84;
  --win-dim: rgba(61, 220, 132, 0.12);
  --loss: #FF6B6B;
  --loss-dim: rgba(255, 107, 107, 0.12);
  --accent-blue: #4DA3FF;
  --accent-blue-dim: rgba(77, 163, 255, 0.12);

  --font-display: "Rajdhani", "Arial Narrow", sans-serif;
  --font-stencil: "Black Ops One", "Rajdhani", "Arial Narrow", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  --radius: 4px;
  --nav-h: 64px;
  --container: 1160px;

  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.35);
  --glow: 0 0 0 1px rgba(var(--s2-acento-rgb), 0.35), 0 6px 24px rgba(var(--s2-acento-rgb), 0.08);

  --t-fast: 160ms ease-out;
  --t-med: 240ms ease-out;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  min-height: 100dvh;
}

img, svg { display: block; max-width: 100%; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.15;
  margin: 0 0 0.5em;
}

/* Titulares grandes en stencil Black Ops; UI y subtítulos en Rajdhani */
h1, h2 {
  font-family: var(--font-stencil);
  font-weight: 400;
  letter-spacing: 0.015em;
}
h1 { font-size: clamp(1.9rem, 4.6vw, 2.9rem); }
h2 { font-size: clamp(1.35rem, 3vw, 1.9rem); }
h3 { font-size: 1.25rem; font-weight: 600; }
h4 { font-size: 1.05rem; font-weight: 600; }

p { margin: 0 0 1em; }

a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--t-fast);
}
a:hover { color: var(--primary-hover); }

button {
  font-family: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection { background: var(--primary); color: var(--on-primary); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Utilidades ---------- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

.skip-link {
  position: absolute;
  top: -48px;
  left: 16px;
  z-index: 200;
  background: var(--primary);
  color: var(--on-primary);
  padding: 10px 16px;
  font-weight: 600;
  border-radius: var(--radius);
  transition: top var(--t-fast);
}
.skip-link:focus { top: 12px; color: var(--on-primary); }

.text-2 { color: var(--text-2); }
.text-3 { color: var(--text-3); }
.tnum { font-variant-numeric: tabular-nums; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.section { padding-block: 72px; scroll-margin-top: calc(var(--nav-h) + 16px); }
.section--tight { padding-block: 48px; }

.section-head { margin-bottom: 36px; }
.section-head .kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 8px;
}
.section-head .kicker::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--primary);
}
.section-head p { max-width: 62ch; color: var(--text-2); margin-bottom: 0; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 22px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: background var(--t-fast), border-color var(--t-fast),
              color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.btn:active { transform: scale(0.97); }
.btn svg { width: 18px; height: 18px; }

.btn--primary {
  background: var(--primary);
  color: var(--on-primary);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
.btn--primary {
  position: relative;
  overflow: hidden;
}
/* Destello diagonal que cruza el botón al pasar el ratón */
.btn--primary::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}
.btn--primary:hover::after { animation: btnShine 620ms ease-out; }
@keyframes btnShine {
  0%   { left: -60%; opacity: 0; }
  18%  { opacity: 1; }
  100% { left: 130%; opacity: 0; }
}
.btn--primary:hover {
  background: var(--primary-hover);
  color: var(--on-primary);
  box-shadow: var(--glow);
}

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}
.btn--ghost:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-dim);
}

.btn--sm { min-height: 38px; padding: 6px 16px; font-size: 0.9rem; }
.btn--block { width: 100%; }

.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------- Navbar ---------- */
/* Banner de donación (GoFundMe): flujo normal, ANTES de la navbar en el
   DOM. Sin position:fixed a propósito — así no tapa nada ni se lleva por
   delante el z-index: 100 de la barra pegajosa de abajo. */
.banner-donacion {
  background: linear-gradient(180deg, rgba(var(--s2-acento-rgb), .10), rgba(var(--s2-acento-rgb), .04));
  border-bottom: 1px solid rgba(var(--s2-acento-rgb), .35);
}
.banner-donacion__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  text-align: center;
}
.banner-donacion__inner p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text-2);
  max-width: 640px;
}
.banner-donacion__inner p b { color: var(--text); }
.banner-donacion__acciones { display: flex; align-items: center; gap: 8px; flex: none; }
.banner-donacion__cerrar {
  background: none;
  border: 0;
  padding: 4px;
  line-height: 0;
  color: var(--text-3);
  cursor: pointer;
  border-radius: 3px;
}
.banner-donacion__cerrar svg { width: 16px; height: 16px; }
.banner-donacion__cerrar:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
@media (max-width: 640px) {
  .banner-donacion__inner { padding: 10px 16px; }
}

.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  background: rgba(7, 4, 13, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.navbar__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Orden en escritorio: marca · enlaces (a la derecha) · campana junto al CTA */
.navbar__inner > nav { margin-left: auto; order: 1; }
.nav-bell { position: relative; order: 2; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.05em;
  color: var(--text);
}
.brand:hover { color: var(--text); }
.brand svg { width: 28px; height: 28px; color: var(--primary); }
.brand img {
  /* Escudo ACL con transparencia: sin marco ni recorte */
  width: 38px;
  height: 38px;
  object-fit: contain;
}
.brand span { color: var(--steel); letter-spacing: 0.16em; }
.brand span em { color: var(--primary); font-style: normal; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  border-radius: var(--radius);
  position: relative;
}
.nav-links a:hover { color: var(--text); background: var(--surface-2); }
/* Subrayado que crece desde el centro al pasar el ratón */
.nav-links a::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-links a:hover::before { transform: scaleX(1); }
.nav-links .nav-cta a::before { display: none; }
.nav-links a[aria-current="page"] { color: var(--primary); }
.nav-links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 2px;
  background: var(--primary);
}
.nav-links .nav-cta { margin-left: 8px; position: relative; }

/* ---------- Desplegables del menú (Torneos / Competición) ---------- */
.nav-drop { position: relative; }
.nav-drop__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  background: none;
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast);
}
.nav-drop__btn:hover { color: var(--text); background: var(--surface-2); }
.nav-drop__btn.is-active { color: var(--primary); }
.nav-drop__btn .nav-caret {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  transition: transform var(--t-fast);
}
.nav-drop__btn[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }

.nav-drop__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 120;
  min-width: 190px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.nav-drop__menu[hidden] { display: none; }
/* Puente invisible: evita que el menú se cierre al cruzar el hueco con el ratón */
.nav-drop__menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}
.nav-drop__menu a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 12px;
  border-radius: 3px;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  color: var(--text-2);
  /* Sin esto, "Clasificación Arena" partía en dos líneas: el desplegable se
     queda con su ancho mínimo y es el texto el que se rompe. Así el menú se
     ensancha hasta el renglón más largo y ninguno se parte. */
  white-space: nowrap;
  gap: 12px;
}
.nav-drop__menu a::before,
.nav-drop__menu a::after { display: none; }
.nav-drop__menu a:hover { background: var(--surface-2); color: var(--text); }
.nav-drop__menu a[aria-current="page"] { color: var(--primary); }

@media (max-width: 767px) {
  .nav-drop__btn { width: 100%; justify-content: space-between; min-height: 48px; }
  .nav-drop__menu {
    position: static;
    box-shadow: none;
    min-width: 0;
    margin: 4px 0 4px 12px;
    padding: 0;
    background: transparent;
    border: none;
    border-left: 2px solid var(--border-strong);
    border-radius: 0;
  }
  .nav-drop__menu a { min-height: 44px; padding-left: 14px; }
}

/* Flecha del botón de usuario: indica desplegable y gira al abrirlo */
#nav-account .um-caret {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform var(--t-fast);
}
#nav-account[aria-expanded="true"] .um-caret { transform: rotate(180deg); }

/* Menú desplegable del usuario */
.user-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  z-index: 150;
}
.user-menu a,
.user-menu button {
  display: block;
  width: 100%;
  padding: 9px 12px;
  font-family: var(--font-body);
  font-size: 0.93rem;
  font-weight: 500;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-2);
  background: none;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  min-height: 0;
}
.user-menu a:hover,
.user-menu button:hover { background: var(--surface-2); color: var(--text); }
.user-menu hr { border: 0; border-top: 1px solid var(--border); margin: 6px 0; }
.user-menu .um-out { color: var(--loss); }
.user-menu .um-out:hover { background: var(--loss-dim); color: var(--loss); }
@media (max-width: 767px) {
  /* Dentro del menú hamburguesa el desplegable va en flujo, a lo ancho */
  .user-menu {
    position: static;
    box-shadow: none;
    margin-top: 6px;
    min-width: 0;
    width: 100%;
  }
}
@media (max-width: 767px) {
  .user-menu {
    position: static;
    box-shadow: none;
    margin-top: 6px;
    min-width: 0;
  }
}

/* El CTA (botón naranja) nunca hereda los colores de enlace del nav:
   texto siempre oscuro sobre naranja, sin subrayado de página activa.
   (Solo el hijo directo: los enlaces del menú desplegable no se ven afectados.) */
.nav-links .nav-cta > a,
.nav-links .nav-cta > a[aria-current="page"] { color: var(--on-primary); }
.nav-links .nav-cta > a:hover {
  color: var(--on-primary);
  background: var(--primary-hover);
}
.nav-links .nav-cta > a[aria-current="page"]::after { display: none; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text);
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

@media (max-width: 767px) {
  .nav-toggle { display: inline-flex; }
  /* Móvil: la campana queda siempre visible en la barra, junto a la hamburguesa */
  .navbar__inner > nav { margin-left: 0; order: 0; }
  .nav-bell { order: 1; margin-left: auto; }
  .nav-toggle { order: 2; }
  .nav-links {
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 12px 16px 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-card);
    display: none;
  }
  .nav-links.is-open { display: flex; }
  .nav-links a { min-height: 48px; }
  .nav-links .nav-cta { margin: 8px 0 0; }
}

/* ---------- Notificaciones (campana + panel) ---------- */
.bell-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-2);
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.bell-btn:hover,
.bell-btn[aria-expanded="true"] {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-dim);
}
.bell-btn svg { width: 20px; height: 20px; }
.bell-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--on-primary);
  background: var(--primary);
  border: 2px solid var(--bg);
  border-radius: 999px;
}

.notif-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(360px, calc(100vw - 24px));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  z-index: 150;
  overflow: hidden;
}
.notif-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.notif-panel__head h4 { margin: 0; font-size: 0.95rem; }
.notif-mark {
  background: none;
  border: none;
  padding: 4px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--primary);
}
.notif-mark:hover { text-decoration: underline; }

.notif-list { max-height: 380px; overflow-y: auto; }
.notif {
  display: block;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
  font-size: 0.9rem;
  line-height: 1.45;
  transition: background var(--t-fast);
}
.notif:last-child { border-bottom: none; }
.notif:hover { background: var(--surface-2); color: var(--text); }
.notif.is-unread {
  background: var(--primary-dim);
  box-shadow: inset 3px 0 0 var(--primary);
  color: var(--text);
}
.notif.is-unread:hover { background: rgba(var(--s2-acento-rgb), 0.16); }
.notif__time {
  display: block;
  font-size: 0.75rem;
  color: var(--text-3);
  margin-top: 3px;
}
@media (max-width: 767px) {
  /* En móvil el panel ancla al viewport, no a la campana: en Android se salía por la izquierda */
  .notif-panel {
    position: fixed;
    left: 12px;
    right: 12px;
    top: calc(var(--nav-h) + 8px);
    width: auto;
    max-width: none;
  }
}
.notif-empty {
  margin: 0;
  padding: 28px 16px;
  text-align: center;
  color: var(--text-3);
  font-size: 0.9rem;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 96px 0 80px;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(ellipse 900px 420px at 70% -10%, rgba(var(--s2-acento-rgb), 0.13), transparent 60%),
    var(--bg);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(178, 168, 204, 0.05) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(178, 168, 204, 0.05) 47px 48px);
  mask-image: radial-gradient(ellipse 80% 90% at 60% 20%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 60% 20%, #000 30%, transparent 75%);
  pointer-events: none;
}
.hero__inner { position: relative; max-width: 820px; }
.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  margin-bottom: 20px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--primary-dim);
  border: 1px solid rgba(var(--s2-acento-rgb), 0.3);
  border-radius: 999px;
}
.hero .eyebrow .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--win);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.hero h1 em { color: var(--primary); font-style: normal; }
.hero .lead {
  font-size: 1.15rem;
  color: var(--text-2);
  max-width: 56ch;
  margin-bottom: 32px;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Hero con arte de BO2 de fondo (degradado a la izquierda para el texto) */
/* La foto vive en su propia capa para poder animarla sin repintar el fondo */
.hero--photo { background: var(--bg); }
.hero--photo::before {
  content: "";
  position: absolute;
  inset: -2%;                    /* margen extra: el zoom nunca descubre los bordes */
  background: url("../assets/img/bo2-hero.jpg") right center / cover no-repeat;
  mask-image: none;
  -webkit-mask-image: none;
  transform-origin: 12% 50%;
  animation: heroZoom 30s ease-in-out infinite alternate;
  z-index: 0;
}
/* Velo oscuro por encima de la foto para que el texto siempre se lea */
.hero--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 4, 13, 0.97) 0%, rgba(7, 4, 13, 0.88) 42%, rgba(7, 4, 13, 0.55) 72%, rgba(7, 4, 13, 0.4) 100%);
  z-index: 1;
  pointer-events: none;
}
.hero--photo .hero__grid,
.hero--photo .container { position: relative; z-index: 2; }

@keyframes heroZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}

/* Entrada escalonada del hero al cargar */
@keyframes heroIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.hero--photo .eyebrow,
.hero--photo h1,
.hero--photo .lead,
.hero--photo .hero__actions,
.hero--photo .hero__announce,
.hero--photo .hero__stats {
  animation: heroIn 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero--photo .eyebrow       { animation-delay: 80ms; }
.hero--photo h1             { animation-delay: 180ms; }
.hero--photo .lead          { animation-delay: 300ms; }
.hero--photo .hero__actions { animation-delay: 420ms; }
.hero--photo .hero__announce{ animation-delay: 540ms; }
.hero--photo .hero__stats   { animation-delay: 640ms; }

/* Texto + panel de anuncios en dos columnas (una en móvil) */
.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 48px;
  align-items: center;
}
@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; gap: 32px; }
  .hero__announce { max-width: 440px; }
}

/* Panel de anuncios rotatorio */
.hero__announce {
  position: relative;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  padding: 20px 22px 12px;
  background: rgba(16, 16, 19, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
.ann-viewport { position: relative; flex: 1; padding-bottom: 6px; }
.ann-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  transition: opacity 500ms ease;
  pointer-events: none;
}
.ann-slide.is-on { opacity: 1; pointer-events: auto; }
.ann--sin-fundido .ann-slide { transition: none; }
.ann-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
}
.ann-kicker::before { content: ""; width: 20px; height: 2px; background: var(--primary); }
.ann-slide h3 { margin: 0; font-size: 1.45rem; }
.ann-sub { margin: 0; color: var(--text-2); font-size: 0.95rem; }
/* Escudo fantasma de fondo en la diapositiva del torneo */
.ann-slide--torneo::before {
  content: "";
  position: absolute;
  right: -34px;
  bottom: 22px;
  width: 190px;
  height: 190px;
  background: url("../assets/img/s2/acl-logo-morado.png") center / contain no-repeat;
  opacity: 0.08;
  pointer-events: none;
}
.ann-slide--torneo > * { position: relative; z-index: 1; }

.ann-slide--logo { align-items: center; text-align: center; }
.ann-slide--logo img {
  width: 104px;
  height: 104px;
  object-fit: contain;
  filter: drop-shadow(0 6px 24px rgba(var(--s2-acento-rgb), 0.25));
}
.ann-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.ann-dot {
  position: relative;
  width: 28px;
  height: 16px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
}
.ann-dot::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  height: 4px;
  border-radius: 2px;
  background: var(--border-strong);
  transition: background var(--t-fast);
}
.ann-dot:hover::after { background: var(--text-3); }
.ann-dot.is-on::after { background: var(--primary); }

@media (max-width: 900px) {
  /* En vertical la foto se ve arriba (el soldado encuadrado) y el texto
     queda por debajo sobre un velo oscuro: siempre legible. */
  .hero--photo::before {
    background-position: 62% 18%;
    background-size: 150% auto;
    background-repeat: no-repeat;
  }
  .hero--photo::after {
    background: linear-gradient(180deg,
      rgba(7, 4, 13, 0.35) 0%,
      rgba(7, 4, 13, 0.72) 32%,
      rgba(7, 4, 13, 0.95) 58%,
      rgba(7, 4, 13, 0.99) 100%);
  }
  .hero--photo { padding-top: 132px; }   /* aire para que se vea la foto */
}
@media (max-width: 560px) {
  .hero--photo::before { background-size: 190% auto; background-position: 60% 14%; }
  .hero--photo { padding-top: 112px; }
}

.hero__stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  margin-top: 56px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.stat {
  background: var(--surface);
  padding: 18px 20px;
}
.stat b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.stat span {
  font-size: 0.85rem;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.card--cut {
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
.card--hover:hover {
  border-color: rgba(var(--s2-acento-rgb), 0.55);
  box-shadow: var(--glow);
  transform: translateY(-2px);
}

.grid {
  display: grid;
  gap: 20px;
}
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid;
}
.badge svg { width: 13px; height: 13px; }
.badge--open   { color: var(--win); background: var(--win-dim); border-color: rgba(61, 220, 132, 0.35); }
.badge--soon   { color: var(--primary); background: var(--primary-dim); border-color: rgba(var(--s2-acento-rgb), 0.35); }
.badge--closed { color: var(--text-3); background: var(--surface-2); border-color: var(--border-strong); }
.badge--blue   { color: var(--accent-blue); background: var(--accent-blue-dim); border-color: rgba(77, 163, 255, 0.35); }
.badge--live   { color: var(--loss); background: var(--loss-dim); border-color: rgba(255, 107, 107, 0.35); }
/* Morado de Élite (arena), reutilizado para marcar "esto es de 2v2" en las
   tarjetas de mapa de /reglas: un mapa puede estar en el pool de 4v4, en el
   de 2v2, o en los dos a la vez, y hacía falta un color que no fuera
   ninguno de los tres modos de 4v4 (verde/naranja/azul de arriba). */
.badge--duo    { color: #B47CFF; background: rgba(180, 124, 255, 0.12); border-color: rgba(180, 124, 255, 0.35); }

/* ---------- Torneo card ---------- */
.event-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.event-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.event-card__date {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
  font-size: 0.92rem;
}
.event-card__date svg { width: 16px; height: 16px; color: var(--primary); flex-shrink: 0; }
.event-card h3 { margin-bottom: 2px; }
.event-card .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 0.92rem;
  color: var(--text-2);
}
.event-card .meta li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  list-style: none;
}
.event-card .meta { padding: 0; margin: 0; }
.event-card .meta svg { width: 15px; height: 15px; color: var(--text-3); }
.event-card__foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.slots { font-size: 0.9rem; color: var(--text-2); }
.slots b { color: var(--text); font-variant-numeric: tabular-nums; }

/* ---------- Tabla ---------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  min-width: 640px;
}
caption {
  text-align: left;
  padding: 16px 20px 4px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-2);
}
thead th {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}
tbody td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background var(--t-fast); }
tbody tr:hover { background: var(--surface-2); }
td.team-cell { color: var(--text); font-weight: 600; white-space: nowrap; }
td .tag {
  display: inline-block;
  min-width: 46px;
  margin-right: 10px;
  padding: 2px 7px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--primary);
  background: var(--primary-dim);
  border: 1px solid rgba(var(--s2-acento-rgb), 0.3);
  border-radius: 3px;
}
.pos { font-family: var(--font-display); font-weight: 700; color: var(--text-3); }
tr.is-top .pos { color: var(--primary); }
tr.is-top td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.pts { color: var(--text) !important; font-weight: 700; }
.diff-pos { color: var(--win) !important; }
.diff-neg { color: var(--loss) !important; }

.form-streak {
  display: inline-flex;
  gap: 4px;
}
.form-streak i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 3px;
}
.form-streak .w { background: var(--win-dim); color: var(--win); }
.form-streak .l { background: var(--loss-dim); color: var(--loss); }

/* ---------- Tabs ---------- */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 32px;
  overflow-x: auto;
  scroll-margin-top: calc(var(--nav-h) + 16px);
}
.tab-btn {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  min-height: 48px;
  padding: 10px 18px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.tab-btn:hover { color: var(--text); }
.tab-btn[aria-selected="true"] {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.tab-panel[hidden] { display: none; }

/* ---------- Equipo card ---------- */
.team-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.team-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--primary);
  background: var(--primary-dim);
  border: 1px solid rgba(var(--s2-acento-rgb), 0.35);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
/* Equipo verificado: el mismo recuadro, pero con su escudo dentro. Se quita
   el tinte naranja para no teñir el logo y se deja el borde neutro. */
.team-card__logo--img {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border);
  padding: 3px;
}
.team-card__logo--img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* En la ficha del equipo el escudo es el protagonista: va grande y sin marco,
   que ahí solo competiría con el logo. Se fija la ALTURA y no el ancho —los
   escudos apaisados se quedaban diminutos dentro de un cuadrado—, así todos
   pesan lo mismo en la cabecera aunque tengan proporciones distintas.
   112 px es el techo: por encima, los escudos que llegaron en JPEG se ven
   blandos en pantallas 2x. */
.team-card__logo--hero { width: 64px; height: 64px; font-size: 1.2rem; }
.team-card__logo--hero.team-card__logo--img {
  width: auto;
  height: 112px;
  /* 260 = lo que mide el escudo más apaisado (2SAVAGE, 2,29:1) a 112 px de
     alto. Con un tope menor se quedaba corto de ancho y perdía altura. */
  max-width: 260px;
  padding: 0;
  background: none;
  border: none;
  clip-path: none;
}
.team-card__logo--hero.team-card__logo--img img { width: auto; max-width: 100%; }
@media (max-width: 560px) {
  .team-card__logo--hero.team-card__logo--img { height: 84px; max-width: 200px; }
}
.team-card__head h3 { margin: 0; font-size: 1.15rem; }
.team-card__head .record { font-size: 0.85rem; color: var(--text-3); }
.roster {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.roster li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  font-size: 0.93rem;
  color: var(--text-2);
  background: var(--surface-2);
  border-radius: 3px;
}
.roster li svg { width: 15px; height: 15px; color: var(--text-3); flex-shrink: 0; }
.roster .cap {
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--primary);
  border: 1px solid rgba(var(--s2-acento-rgb), 0.4);
  border-radius: 3px;
  padding: 1px 6px;
}

/* ---------- Calendario / partidos ---------- */
.matchday { margin-bottom: 36px; }
.matchday__title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.matchday__title h3 { margin: 0; }
.match-list { display: grid; gap: 10px; }
.match {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.match .side {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  min-width: 0;
}
.match .side span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match .side:last-child { justify-content: flex-end; }
.match .score {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text);
  background: var(--surface-2);
  border-radius: 3px;
  padding: 4px 14px;
}
.match .score .vs { color: var(--text-3); font-size: 0.85rem; }
.match .side.winner span { color: var(--primary); }
.match--pending .score { color: var(--text-3); }

/* ---------- Bracket ---------- */
/* ---------- Vista plegada del cuadro ----------
   Un cuadro de 64 mide 6 columnas: en un móvil hay que arrastrar media
   pantalla para llegar a la final. Por debajo de 1000 px se enseña una ronda
   cada vez con un selector arriba; por encima, el cuadro entero como siempre. */
/* El selector se ve en cualquier tamano: en PC permite aislar una ronda
   cuando el cuadro es grande, sin perder la opcion de verlo entero. */
.bracket-rondas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.bracket-ronda {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-2);
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 14px;
  cursor: pointer;
  white-space: nowrap;
}
.bracket-ronda.is-activa {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}

@media (max-width: 1000px) {
  /* En pantalla estrecha el cuadro entero no cabe: "Todas las rondas" sobra
     y los botones se reparten en filas para que se vean todos. */
  .bracket-ronda { flex: 1 1 auto; text-align: center; }
  .bracket-ronda--todas { display: none; }
}

.bracket-wrap {
  overflow-x: auto;
  padding-bottom: 12px;
}
.bracket {
  position: relative;   /* ancla del SVG con las lineas de union */
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  /* Separacion generosa entre columnas: las lineas de union necesitan sitio
     para el tramo horizontal. Con 32 px quedaban dos muniones de 16 px y una
     vertical larguisima, y el cuadro se leia como cajas sueltas. */
  column-gap: 72px;
  row-gap: 32px;
  min-width: 820px;
}
.bracket__round > h4 {
  text-align: center;
  color: var(--text-3);
  letter-spacing: 0.12em;
  margin-bottom: 20px;
}
/* Lineas que unen los cruces. Van detras de las tarjetas y no capturan clics */
/* Cuadro plegado: solo se ve la ronda elegida, en una sola columna */
.bracket.is-plegado { grid-template-columns: 1fr !important; min-width: 0 !important; }
.bracket.is-plegado .bracket__round { display: none; }
.bracket.is-plegado .bracket__round.is-activa { display: block; }

.bracket-lineas {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}
.bracket__round { position: relative; z-index: 1; }


.bracket__matches {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 20px;
  height: 100%;
}
.b-match {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.b-match--final { border-color: rgba(var(--s2-acento-rgb), 0.5); box-shadow: var(--glow); }
.b-match .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  font-size: 0.93rem;
  color: var(--text-2);
}
.b-match .row + .row { border-top: 1px solid var(--border); }
.b-match .row.win {
  color: var(--text);
  font-weight: 600;
  background: linear-gradient(90deg, var(--primary-dim), transparent 70%);
  box-shadow: inset 3px 0 0 var(--primary);
}
.b-match .row b { font-variant-numeric: tabular-nums; font-weight: 700; }
.b-match .row.win b { color: var(--primary); }

/* Cruce clicable (modo admin): marcar ganador */
.b-match button.row {
  width: 100%;
  background: none;
  border: none;
  font: inherit;
  color: var(--text-2);
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast);
}
.b-match button.row:hover { background: var(--primary-dim); color: var(--text); }
.b-match button.row.win { color: var(--text); }

/* Mapas y hosts dentro de un cruce del cuadro */
.b-plan { border-top: 1px solid var(--border); }
.b-plan summary {
  cursor: pointer;
  padding: 6px 14px;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.b-plan summary:hover { color: var(--primary); }
.b-plan ol { margin: 0; padding: 0 14px 10px 30px; display: grid; gap: 4px; }
.b-plan li { font-size: 0.82rem; color: var(--text-2); }
.b-plan li b { color: var(--text); font-weight: 600; }
.b-plan li span { display: block; font-size: 0.76rem; color: var(--text-3); }

/* Estado y reporte de un cruce */
.b-status {
  padding: 6px 14px;
  border-top: 1px solid var(--border);
  font-size: 0.78rem;
  color: var(--text-3);
  background: var(--primary-dim);
}
.b-status--disputa { color: var(--loss); background: var(--loss-dim); }
.b-report {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid var(--border);
}
.b-report .btn { flex: 1; min-height: 34px; padding: 4px 10px; font-size: 0.82rem; }

/* Nombre de equipo clicable (ranking → perfil de equipo) */
.team-link {
  display: inline-flex;
  align-items: center;
  color: inherit;
}
.team-link:hover { color: var(--primary); }

/* Corte del top 32 en el ranking */
.rank-cut td {
  text-align: center !important;
  padding: 8px 16px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary) !important;
  background: var(--primary-dim);
  border-top: 1px dashed rgba(var(--s2-acento-rgb), 0.45);
  border-bottom: 1px dashed rgba(var(--s2-acento-rgb), 0.45);
}

/* Clasificados provisionales del Major */
.qual-list {
  max-height: 520px;
  overflow-y: auto;
  padding-right: 4px;
}
.qual-list li .pos {
  min-width: 26px;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-3);
}
.qual-list li:nth-child(-n+8) .pos { color: var(--primary); }

/* ---------- Podio ---------- */
.podium { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.podium .card { text-align: center; }
.podium .place {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.podium h3 { margin: 6px 0 2px; }
.podium .prize { color: var(--primary); font-weight: 600; font-size: 0.95rem; }
.podium .card--gold { border-color: rgba(var(--s2-acento-rgb), 0.55); box-shadow: var(--glow); }
.podium svg { width: 34px; height: 34px; margin: 0 auto 10px; }
.podium .card--gold svg { color: var(--primary); }
.podium .card:not(.card--gold) svg { color: var(--text-3); }

/* ---------- Steps (cómo funciona) ---------- */
.step { position: relative; }
.step .num {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1px var(--primary);
  line-height: 1;
  margin-bottom: 12px;
}
.step h3 { font-size: 1.15rem; }
.step p { color: var(--text-2); margin: 0; font-size: 0.96rem; }

/* ---------- Reglas ---------- */
.rules-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  align-items: start;
}
.rules-nav {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
}
.rules-nav h4 { color: var(--text-3); font-size: 0.85rem; letter-spacing: 0.12em; }
.rules-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rules-nav a {
  display: block;
  padding: 9px 14px;
  font-size: 0.95rem;
  color: var(--text-2);
  border-left: 2px solid var(--border);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.rules-nav a:hover { color: var(--text); background: var(--surface-2); }
.rules-nav a.is-active {
  color: var(--primary);
  border-left-color: var(--primary);
  background: var(--primary-dim);
}
@media (max-width: 900px) {
  .rules-layout { grid-template-columns: 1fr; gap: 24px; }
  .rules-nav { position: static; }
  .rules-nav ul { display: flex; flex-wrap: wrap; gap: 6px; }
  .rules-nav a { border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px; }
  .rules-nav a.is-active { border-color: var(--primary); }
}

.rule-block { margin-bottom: 48px; scroll-margin-top: calc(var(--nav-h) + 24px); }
.rule-block h2 {
  font-size: 1.5rem;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
}
.rule-block h2 svg { width: 22px; height: 22px; color: var(--primary); flex-shrink: 0; }
.rule-block ol, .rule-block ul { color: var(--text-2); padding-left: 22px; }
.rule-block li { margin-bottom: 8px; }
.rule-block li::marker { color: var(--primary); font-weight: 600; }

.allow-deny { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.allow-deny .card h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.allow-deny .card h4 svg { width: 18px; height: 18px; }
.allow-deny .ok h4 { color: var(--win); }
.allow-deny .no h4 { color: var(--loss); }
.allow-deny ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.allow-deny li {
  font-size: 0.94rem;
  color: var(--text-2);
  padding: 6px 10px;
  background: var(--surface-2);
  border-radius: 3px;
}

/* ---------- Configuración de modos (reglas) ---------- */
.cfg {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: 12px;
}
.cfg summary {
  cursor: pointer;
  padding: 14px 18px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
  list-style-position: inside;
}
.cfg summary:hover { color: var(--primary); }
.cfg[open] summary {
  border-bottom: 1px solid var(--border);
  color: var(--primary);
}
/* Los grupos se empaquetan en columnas tipo mosaico: sin huecos verticales */
.cfg__body {
  padding: 16px 18px;
  columns: 2 320px;
  column-gap: 20px;
}
.cfg__body > div {
  break-inside: avoid;
  margin-bottom: 20px;
}
.cfg__body > div:last-child { margin-bottom: 0; }
.cfg__body h4 {
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  color: var(--primary);
  margin-bottom: 10px;
}
.cfg-list { margin: 0; display: grid; gap: 5px; }
.cfg-list > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 9px;
  font-size: 0.88rem;
  background: var(--surface-2);
  border-radius: 3px;
}
.cfg-list dt { color: var(--text-3); }
.cfg-list dd { margin: 0; color: var(--text); font-weight: 500; text-align: right; }

/* ---------- Mapas ---------- */
.map-card { padding: 0; overflow: hidden; }
.map-card__img {
  /* Las fotos de mapa son 16:9 — con esta proporción encajan sin recorte */
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(var(--s2-acento-rgb), 0.22), transparent 60%),
    repeating-linear-gradient(45deg, var(--surface-2) 0 10px, var(--surface) 10px 20px);
  border-bottom: 1px solid var(--border);
  position: relative;
}
.map-card__img::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px dashed var(--border-strong);
  border-radius: 2px;
}
/* Con foto real (style inline): sin marco punteado de relleno */
.map-card__img[style]::after { display: none; }
.map-card__body { padding: 16px 18px 18px; }
.map-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.map-card .modes { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- Selector de fecha/hora con chips ---------- */
.pick-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.pick-chip {
  appearance: none;
  min-height: 38px;
  padding: 6px 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.pick-chip:hover { border-color: var(--primary); color: var(--text); }
.pick-chip.is-sel {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}
.pick-chip--hora {
  font-variant-numeric: tabular-nums;
  padding: 6px 11px;
  font-size: 0.85rem;
}
#pick-resumen { color: var(--primary); font-weight: 600; }

/* Desplegables de día y hora (los chips viven dentro del panel) */
.pick-dd { position: relative; }
.pick-dd__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.pick-dd__btn:hover { border-color: var(--primary); }
.pick-dd__btn[aria-expanded="true"] {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--s2-acento-rgb), 0.18);
}
.pick-dd__lbl {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.pick-dd__btn b { font-weight: 600; }
.pick-caret {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--text-3);
  transition: transform var(--t-fast);
}
.pick-dd__btn[aria-expanded="true"] .pick-caret { transform: rotate(180deg); }
.pick-dd__panel {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 80;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px;
  width: max-content;
  max-width: min(340px, 82vw);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
/* Panel de horas: lista vertical compacta con scroll, como un select de verdad */
.pick-dd__panel--horas {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 2px;
  padding: 6px;
  width: 170px;
  max-height: 264px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.pick-dd__panel[hidden] { display: none; }
.pick-opt {
  appearance: none;
  width: 100%;
  padding: 8px 14px;
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.93rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  background: none;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.pick-opt:hover { background: var(--surface-2); color: var(--text); }
.pick-opt.is-sel {
  background: var(--primary-dim);
  color: var(--primary);
  box-shadow: inset 3px 0 0 var(--primary);
  font-weight: 600;
}
.pick-chip[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ---------- Formularios ---------- */
.form-card { max-width: 760px; }
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px 20px;
}
.form-grid .span-2 { grid-column: 1 / -1; }

.field label {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 6px;
}
.field .req { color: var(--primary); }
.field .hint {
  display: block;
  font-size: 0.82rem;
  color: var(--text-3);
  margin-top: 5px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field textarea { resize: vertical; min-height: 90px; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23B4B6B4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 42px;
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--s2-acento-rgb), 0.18);
}
.field.has-error input, .field.has-error select {
  border-color: var(--loss);
}
.field .error-msg {
  display: none;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--loss);
}
.field .error-msg svg { width: 14px; height: 14px; flex-shrink: 0; }
.field.has-error .error-msg { display: flex; }

.fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin: 0;
}
.fieldset legend {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  padding: 0 8px;
}

.check-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.check-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--primary);
  flex-shrink: 0;
}
.check-row label { font-size: 0.94rem; color: var(--text-2); font-weight: 400; }

.form-success {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 20px;
  border: 1px solid rgba(61, 220, 132, 0.4);
  background: var(--win-dim);
  border-radius: var(--radius);
}
.form-success svg { width: 22px; height: 22px; color: var(--win); flex-shrink: 0; margin-top: 2px; }
.form-success h3 { color: var(--win); font-size: 1.05rem; margin-bottom: 4px; }
.form-success p { margin: 0; color: var(--text-2); font-size: 0.95rem; }

/* ---------- Info banner ---------- */
.banner {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 20px;
  background: var(--accent-blue-dim);
  border: 1px solid rgba(77, 163, 255, 0.35);
  border-radius: var(--radius);
  color: var(--text-2);
  font-size: 0.95rem;
}
.banner svg { width: 20px; height: 20px; color: var(--accent-blue); flex-shrink: 0; margin-top: 2px; }
.banner b { color: var(--text); }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 64px 24px;
  background:
    radial-gradient(ellipse 600px 300px at 50% 120%, rgba(var(--s2-acento-rgb), 0.18), transparent 65%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}
/* Escudo ACL como marca de agua sutil en la banda de CTA */
.cta-band::after {
  content: "";
  position: absolute;
  right: -50px;
  bottom: -70px;
  width: 360px;
  height: 360px;
  background: url("../assets/img/s2/acl-logo-morado.png") center / contain no-repeat;
  opacity: 0.07;
  pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { margin-bottom: 8px; }
.cta-band p { color: var(--text-2); max-width: 52ch; margin: 0 auto 28px; }

/* ---------- Page header ---------- */
.page-head {
  position: relative;
  overflow: hidden;
  padding: 64px 0 40px;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(ellipse 700px 300px at 80% -20%, rgba(var(--s2-acento-rgb), 0.1), transparent 60%),
    var(--bg);
}
/* Escudo ACL fantasma en la cabecera de todas las páginas interiores */
.page-head::after {
  content: "";
  position: absolute;
  right: 3%;
  top: 50%;
  transform: translateY(-46%);
  width: 300px;
  height: 300px;
  background: url("../assets/img/s2/acl-logo-morado.png") center / contain no-repeat;
  opacity: 0.07;
  pointer-events: none;
}
.page-head .container { position: relative; z-index: 1; }
.page-head .kicker,
.page-head h1,
.page-head > .container > p {
  animation: heroIn 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.page-head .kicker { animation-delay: 60ms; }
.page-head h1 { animation-delay: 150ms; }
.page-head > .container > p { animation-delay: 250ms; }
@media (max-width: 700px) {
  .page-head::after { width: 210px; right: -40px; opacity: 0.05; }
}
.page-head .kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 8px;
}
.page-head .kicker::before { content: ""; width: 24px; height: 2px; background: var(--primary); }
.page-head h1 { margin-bottom: 8px; }
.page-head p { color: var(--text-2); max-width: 64ch; margin: 0; }

/* ---------- Footer ---------- */
.footer {
  margin-top: 96px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding: 48px 0 32px;
  font-size: 0.93rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 36px;
}
.footer h4 {
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  color: var(--text-3);
  margin-bottom: 14px;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer ul a { color: var(--text-2); }
.footer ul a:hover { color: var(--primary); }
.footer .about p { color: var(--text-2); max-width: 40ch; }
.footer__bottom {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  color: var(--text-3);
  font-size: 0.85rem;
}
.footer__legal a { color: var(--text-2); }
.footer__legal a:hover { color: var(--primary); }
@media (max-width: 767px) {
  .footer__grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ============================================================
   XP MATCHES · CUENTAS · EQUIPOS
   ============================================================ */

/* ---------- Banner variantes ---------- */
.banner--warn {
  background: var(--primary-dim);
  border-color: rgba(var(--s2-acento-rgb), 0.35);
}
.banner--warn svg { color: var(--primary); }

/* ---------- Píldora de XP ---------- */
.xp-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  padding: 4px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  white-space: nowrap;
}
.xp-pill .up { color: var(--win); }
.xp-pill .down { color: var(--loss); }
.xp-pill .sep { color: var(--text-3); font-weight: 400; }

.xp-big {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.xp-big span { font-size: 0.8rem; color: var(--text-3); letter-spacing: 0.1em; }

/* ---------- Rival oculto ---------- */
.mystery-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-3);
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

/* ---------- Tarjeta de reto ---------- */
.challenge-card { display: flex; flex-direction: column; gap: 12px; }
.challenge-card__head { display: flex; align-items: center; gap: 14px; }
.challenge-card__head h3 { margin: 0; font-size: 1.1rem; }
.challenge-card__head .sub { font-size: 0.85rem; color: var(--text-3); }
.challenge-card .meta-rows {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.93rem;
  color: var(--text-2);
}
.challenge-card .meta-rows li { display: flex; align-items: center; gap: 9px; }
.challenge-card .meta-rows svg { width: 15px; height: 15px; color: var(--text-3); flex-shrink: 0; }
.challenge-card .note {
  font-size: 0.88rem;
  color: var(--text-3);
  font-style: italic;
  background: var(--surface-2);
  padding: 8px 12px;
  border-radius: 3px;
  margin: 0;
}
.challenge-card__foot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.challenge-card .why-no { font-size: 0.83rem; color: var(--text-3); }

/* ---------- Estado vacío ---------- */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-3);
}
.empty-state svg { width: 36px; height: 36px; margin: 0 auto 12px; color: var(--text-3); }
.empty-state p { margin: 0; }
.empty-state b { color: var(--text-2); }

/* ---------- Miembros de equipo ---------- */
.member-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.member-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.95rem;
}
.member-list li svg { width: 16px; height: 16px; color: var(--text-3); flex-shrink: 0; }
.member-list .cap {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--primary);
  border: 1px solid rgba(var(--s2-acento-rgb), 0.4);
  border-radius: 3px;
  padding: 1px 6px;
}
.member-list .end { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* ---------- Botones extra ---------- */
.btn--danger {
  background: transparent;
  color: var(--loss);
  border-color: rgba(255, 107, 107, 0.45);
}
.btn--danger:hover { background: var(--loss-dim); border-color: var(--loss); color: var(--loss); }
.btn--win {
  background: transparent;
  color: var(--win);
  border-color: rgba(61, 220, 132, 0.45);
}
.btn--win:hover { background: var(--win-dim); border-color: var(--win); color: var(--win); }

.action-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ---------- Bloques de cuenta ---------- */
.account-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .account-grid { grid-template-columns: 1fr; } }
.profile-rows { display: grid; gap: 10px; margin: 0; }
.profile-rows div { display: flex; justify-content: space-between; gap: 12px; font-size: 0.95rem; }
.profile-rows dt { color: var(--text-3); }
.profile-rows dd { margin: 0; color: var(--text); font-weight: 500; text-align: right; overflow-wrap: anywhere; }

/* ---------- Partido propio (mis partidos) ---------- */
.my-match {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px;
}
.my-match__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.my-match__head h3 { margin: 0; font-size: 1.05rem; }
.my-match .sub { font-size: 0.88rem; color: var(--text-3); }
.my-match .delta-w { color: var(--win); font-weight: 700; }
.my-match .delta-l { color: var(--loss); font-weight: 700; }

/* ---------- Detalle del reto (reto.html) ---------- */
.ms-num {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--primary-dim);
  border: 1px solid rgba(var(--s2-acento-rgb), 0.3);
  border-radius: 3px;
  padding: 2px 8px;
  white-space: nowrap;
}
.ms-hint { margin: 0; font-size: 0.82rem; color: var(--text-3); }

.reto-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.reto-head .kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 4px;
}
.reto-head .kicker::before { content: ""; width: 24px; height: 2px; background: var(--primary); }
.reto-head h1 { margin: 4px 0 8px; }
.reto-head .vs-mini { color: var(--text-3); font-size: 0.55em; }
.reto-head .sub {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--text-2);
  margin: 0;
}

/* Banners de mapa (referencia CMG adaptada) */
.map-banners { display: grid; gap: 10px; }
.map-banner {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    linear-gradient(90deg, rgba(7, 4, 13, 0.94) 0%, rgba(7, 4, 13, 0.6) 55%, rgba(var(--s2-acento-rgb), 0.12) 100%),
    repeating-linear-gradient(45deg, var(--surface-2) 0 14px, var(--surface) 14px 28px);
  background-size: cover;
  background-position: center;
  box-shadow: inset 3px 0 0 var(--primary);
  min-height: 112px;
  display: flex;
  align-items: center;
}
.map-banner__body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
}
.map-banner h3 { margin: 2px 0 0; font-size: 1.15rem; }
.map-banner p { margin: 0; font-size: 0.88rem; color: var(--text-3); }
.map-banner p b { color: var(--text-2); }

/* Panel de equipo con roster */
.team-panel { margin-top: 8px; }
.team-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
}
/* Clubes de ACL ONE: su banner encima de la cabecera (bannerAclOne en app.js) */
.team-banner {
  position: relative; aspect-ratio: 4 / 1; overflow: hidden;
  border: 1px solid var(--border); border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0; background: var(--surface);
}
.team-banner img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
@media (max-width: 640px) { .team-banner { aspect-ratio: 3 / 1; } }
.team-banner + .team-panel__head { border-radius: 0; }
.team-banner__liga {
  position: absolute; right: 14px; bottom: 12px; padding: 4px 12px; border-radius: 999px;
  font: 700 0.72rem var(--font-body); letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff; text-decoration: none; background: rgba(0, 0, 0, .55);
  border: 1px solid rgba(255, 255, 255, .25); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
a.team-banner__liga:hover { border-color: var(--primary); }
.team-panel__head h2 {
  margin: 0 0 2px;
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.team-panel__head .sub { font-size: 0.88rem; color: var(--text-3); }
.team-panel .table-wrap { border-radius: 0 0 var(--radius) var(--radius); }
.roster-table { min-width: 520px; }
/* La columna de rango se queda con lo suyo y el resto se reparte lo demás.
   Sin esto, en el lobby de Arena —dos plantillas en dos columnas, con la
   regla global «table { width: 100% }» apretándolas— la celda salía más
   estrecha que la chapa; y como .rango es inline-flex con nowrap, el borde
   se dibujaba corto y el número se salía por la derecha del recuadro. */
.roster-table .rango-cell { width: 1%; white-space: nowrap; }

.res-win, .res-loss {
  font-family: var(--font-display);
  font-size: 0.62em;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.res-win { color: var(--win); }
.res-loss { color: var(--loss); }

.psn-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border-radius: 999px;
  /* Azul PlayStation con texto blanco (como las pastillas de gamertag de CMG) */
  background: #0059C1;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 0.88rem;
  white-space: nowrap;
}
.psn-pill svg { width: 16px; height: 16px; flex-shrink: 0; }
.cap-chip {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--primary);
  border: 1px solid rgba(var(--s2-acento-rgb), 0.4);
  border-radius: 3px;
  padding: 0 5px;
  vertical-align: 2px;
}

/* Separador VS */
.vs-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0;
}
.vs-divider::before,
.vs-divider::after { content: ""; flex: 1; height: 1px; background: var(--border-strong); }
.vs-divider span {
  font-family: var(--font-stencil);
  font-size: 1.3rem;
  color: var(--primary);
  letter-spacing: 0.1em;
}

/* Popup "reto aceptado" */
.reto-popup {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(5, 5, 6, 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.reto-popup[hidden] { display: none; }
.reto-popup__card {
  width: min(440px, 100%);
  background: var(--surface);
  border: 1px solid rgba(var(--s2-acento-rgb), 0.5);
  border-radius: var(--radius);
  box-shadow: var(--glow), 0 24px 64px rgba(0, 0, 0, 0.5);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  padding: 28px 26px;
  text-align: center;
}
.reto-popup__card .rp-icon { width: 38px; height: 38px; margin: 0 auto 10px; color: var(--primary); }
.reto-popup__card .kicker {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 6px;
}
.reto-popup__card h3 { font-size: 1.3rem; margin-bottom: 4px; }
.reto-popup__card .sub { color: var(--text-3); font-size: 0.9rem; margin-bottom: 20px; }
.reto-popup__card .action-row { justify-content: center; }
@media (prefers-reduced-motion: no-preference) {
  .reto-popup__card { animation: rp-in 240ms ease-out; }
  @keyframes rp-in {
    from { opacity: 0; transform: translateY(10px) scale(0.97); }
    to { opacity: 1; transform: none; }
  }
}

/* ---------- Reportar a un jugador de Arena ----------
   Reaprovecha .reto-popup, que ya trae el fondo, la tarjeta y la animación.
   Aquí solo va lo que cambia por llevar un formulario dentro: los avisos van
   centrados, pero una etiqueta encima de su campo tiene que ir a la
   izquierda o no se sabe a cuál pertenece. Y en un móvil bajo la tarjeta
   pasa de alto, así que se le deja scroll propio en vez de que se salga de
   la pantalla. */
.rep-card { text-align: left; max-height: calc(100vh - 32px); overflow-y: auto; }
.rep-card .kicker,
.rep-card h3 { text-align: center; }
.rep-card h3 { margin-bottom: 18px; }
.rep-campo { margin-bottom: 14px; }
.rep-campo label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.9rem;
  color: var(--text-2);
}
.rep-campo select,
.rep-campo textarea { width: 100%; }
.rep-campo textarea { min-height: 72px; resize: vertical; line-height: 1.45; }
/* .banner viene en fila (icono a la izquierda, texto a la derecha). Aquí no
   hay icono y sí un botón debajo del aviso, así que se apila. */
.rep-aviso {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin: 16px 0 14px;
  padding: 14px 16px;
}
.rep-aviso p { margin: 0 0 10px; font-size: 0.9rem; line-height: 1.5; }
.rep-aviso .btn { align-self: flex-start; }
/* La casilla y su texto, alineados por arriba: con dos líneas de texto un
   center deja la casilla flotando a media altura. */
.rep-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 20px;
  font-size: 0.92rem;
  color: var(--text-2);
  cursor: pointer;
}
.rep-check input { margin-top: 2px; width: 17px; height: 17px; accent-color: var(--primary); }

/* La chapa de "trae pruebas" de los partes en /admin */
.chip-pruebas {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--win-dim);
  color: var(--win);
}
.chip-pruebas.no { background: var(--surface-2); color: var(--text-3); }

/* ---------- Buscadores de la comunidad ---------- */
.buscador {
  position: relative;
  margin-bottom: 24px;
  max-width: 460px;
}
.buscador svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--text-3);
  pointer-events: none;
}
.buscador input {
  width: 100%;
  min-height: 48px;
  padding: 10px 16px 10px 44px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}
.buscador input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--s2-acento-rgb), 0.18);
}

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -8px 0 22px;
}
.filtro-chip {
  min-height: 38px;
  padding: 7px 16px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.filtro-chip:hover { color: var(--text); border-color: var(--primary); }
.filtro-chip.is-on {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}

/* Tarjetas de redes sociales */
.red-card { display: block; color: inherit; }
.red-card:hover { color: inherit; }
.red-card svg { width: 34px; height: 34px; color: var(--primary); margin-bottom: 12px; }
.red-card h3 { margin: 0 0 6px; }
.red-card p { font-size: 0.93rem; margin: 0 0 14px; }
.red-cta {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
}

/* ---------- Calendario ---------- */
.cal-list { display: grid; gap: 10px; }
.cal-list--pasado { opacity: 0.72; }
.cal-item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: inherit;
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.cal-item:hover {
  border-color: rgba(var(--s2-acento-rgb), 0.5);
  transform: translateX(3px);
  box-shadow: var(--glow);
  color: inherit;
}
.cal-item--mio { box-shadow: inset 3px 0 0 var(--primary); }
.cal-date {
  flex-shrink: 0;
  width: 58px;
  text-align: center;
  line-height: 1.1;
}
.cal-date b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.cal-date span {
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.cal-body { flex: 1; min-width: 0; }
.cal-tipo {
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.cal-body h3 { margin: 2px 0; font-size: 1.05rem; }
.cal-body .sub { font-size: 0.85rem; color: var(--text-3); }
@media (max-width: 560px) {
  .cal-item { flex-wrap: wrap; gap: 12px; }
  .cal-body { flex: 1 1 60%; }
}

/* ---------- Chat lateral del partido ---------- */
.chat-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(400px, 100vw);
  z-index: 300;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -16px 0 48px rgba(0, 0, 0, 0.5);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 240ms ease-out, visibility 0s linear 240ms;
}
.chat-drawer.is-open {
  transform: none;
  visibility: visible;
  transition: transform 240ms ease-out;
}
.chat-drawer__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.chat-drawer__head h3 { margin: 0 0 2px; font-size: 1.05rem; }
.chat-drawer__head .sub { font-size: 0.82rem; color: var(--text-3); display: block; }
.chat-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-2);
  transition: border-color var(--t-fast), color var(--t-fast);
}
.chat-close:hover { border-color: var(--primary); color: var(--primary); }
.chat-close svg { width: 18px; height: 18px; }

.chat-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-msg {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 0.92rem;
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.chat-msg .who {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  color: var(--text-3);
  margin-bottom: 3px;
}
.chat-msg .who b { color: var(--text-2); }
.chat-msg .who .chip {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0 5px;
  border-radius: 3px;
  border: 1px solid rgba(var(--s2-acento-rgb), 0.4);
  color: var(--primary);
}
.chat-msg--own {
  align-self: flex-end;
  background: var(--primary-dim);
  border-color: rgba(var(--s2-acento-rgb), 0.3);
  color: var(--text);
}
.chat-msg--admin {
  background: var(--accent-blue-dim);
  border-color: rgba(77, 163, 255, 0.4);
  color: var(--text);
}
.chat-msg--admin .who .chip {
  border-color: rgba(77, 163, 255, 0.5);
  color: var(--accent-blue);
}
.chat-msg--system {
  align-self: center;
  max-width: 100%;
  background: none;
  border: none;
  text-align: center;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--text-3);
  padding: 2px 8px;
}

.chat-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  font-size: 0.85rem;
  color: var(--text-2);
}
.chat-tools span { display: inline-flex; align-items: center; gap: 8px; }
.chat-tools svg { width: 15px; height: 15px; color: var(--primary); flex-shrink: 0; }
.chat-tools .btn svg { color: currentColor; }

/* Imagen adjunta en el chat (pruebas) */
.chat-img {
  display: block;
  max-width: 100%;
  border-radius: 4px;
  margin-top: 4px;
  border: 1px solid var(--border);
}

/* Botón de adjuntar imagen en la barra del chat */
.chat-attach {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-2);
  transition: border-color var(--t-fast), color var(--t-fast);
}
.chat-attach:hover { border-color: var(--primary); color: var(--primary); }
.chat-attach svg { width: 18px; height: 18px; }

/* Panel "Disputar reto" */
.chat-dispute {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--loss-dim);
}
.chat-dispute p {
  margin: 0 0 10px;
  font-size: 0.85rem;
  color: var(--text-2);
}
.chat-dispute .action-row { gap: 8px; align-items: center; }
.chat-dispute #dispute-count { font-size: 0.82rem; color: var(--text-3); }
.dispute-select {
  flex: 1;
  min-width: 200px;
  min-height: 40px;
  padding: 6px 12px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}

.chat-admin {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--accent-blue-dim);
}
.chat-admin p {
  margin: 0 0 10px;
  font-size: 0.85rem;
  color: var(--text-2);
}
.chat-admin .action-row { gap: 8px; }

.chat-cerrado {
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 0.88rem;
  color: var(--text-3);
  text-align: center;
}
.chat-cerrado span { display: inline-flex; align-items: center; gap: 8px; }
.chat-cerrado svg { width: 15px; height: 15px; flex-shrink: 0; }

.chat-form {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.chat-form input {
  flex: 1;
  min-height: 44px;
  padding: 8px 14px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}
.chat-form input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--s2-acento-rgb), 0.18);
}
.chat-form button svg { width: 18px; height: 18px; }

/* ---------- Animación de entrada ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(22px) scale(0.985);
    transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .reveal.is-visible { opacity: 1; transform: none; }
}

/* ---------- Responsive ajustes ---------- */
@media (max-width: 640px) {
  .container { padding-inline: 16px; }
  .hero { padding: 64px 0 56px; }
  .section { padding-block: 48px; }
  .match { grid-template-columns: 1fr; gap: 8px; text-align: center; }
  .match .side, .match .side:last-child { justify-content: center; }
}

/* ---------- Captcha (Turnstile) ---------- */
.captcha-box { display: flex; justify-content: center; margin-bottom: 14px; }
.captcha-box:empty { display: none; margin: 0; }
.captcha-fallo { margin: 8px 0 0; font-size: 0.85rem; color: var(--danger, #E5484D); text-align: center; }

/* ============================================================
   HISTORIAL: racha de últimas partidas, proporción G/P y copas
   ============================================================ */

/* --- Racha: V / D con sus puntos --- */
.racha-wrap {
  padding: 16px 18px;
  border-top: 1px solid var(--border);
}
.racha {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.racha-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 52px;
  padding: 8px 6px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: rgba(255, 255, 255, .02);
  text-decoration: none;
  transition: border-color .16s ease, transform .16s ease;
}
.racha-item:hover { transform: translateY(-2px); }
.racha-item b {
  font-family: "Rajdhani", system-ui, sans-serif;
  font-size: 1.35rem;
  line-height: 1;
  letter-spacing: .5px;
}
.racha-item i {
  display: block;
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
}
.racha-item span {
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
  white-space: nowrap;
}
.racha-item.is-v { border-color: rgba(74, 222, 128, .35); }
.racha-item.is-v b { color: #4ADE80; }
.racha-item.is-v i { background: #4ADE80; }
.racha-item.is-v:hover { border-color: #4ADE80; }
.racha-item.is-d { border-color: rgba(229, 72, 77, .35); }
.racha-item.is-d b { color: #E5484D; }
.racha-item.is-d i { background: #E5484D; }
.racha-item.is-d:hover { border-color: #E5484D; }
.racha-vacia {
  margin: 0;
  font-size: .85rem;
  color: var(--text-3);
}
/* Dentro de una tarjeta de equipo la racha va más compacta */
.team-card .racha { margin: 12px 0 4px; gap: 6px; }
.team-card .racha-item { min-width: 42px; padding: 6px 4px; }
.team-card .racha-item b { font-size: 1.05rem; }
.team-card .racha-item span { font-size: .65rem; }
.team-card .racha-vacia { margin: 12px 0 4px; }

/* --- Proporción G/P (ej. 20/12 · 62%) --- */
.ratio {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-variant-numeric: tabular-nums;
}
.ratio-v { color: #4ADE80; }
.ratio-d { color: #E5484D; }
.ratio-sep { color: var(--text-3); margin: 0 1px; }
.ratio em {
  font-style: normal;
  font-size: .72em;
  color: var(--text-3);
  margin-left: 5px;
}

/* --- Copas: Minor plateada, Major dorada --- */
.copas {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  vertical-align: middle;
}
.copa {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.copa svg { width: 18px; height: 18px; display: block; }
.copa span {
  font-size: .78rem;
  font-weight: 600;
}

/* --- Equipos disueltos --- */
.disuelto { color: var(--text-3); font-style: italic; }
.team-panel--disuelto { opacity: .82; }
.team-panel--disuelto .team-card__logo { color: var(--text-3); }

/* ---------- Página de Staff ---------- */
.staff-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
/* Doble clase a propósito: `a.card` ya fija display:block y gana por
   especificidad a un `.staff-card` suelto. */
.card.staff-card {
  display: flex; align-items: center; gap: 14px;
  text-decoration: none;
}
.staff-card__b { min-width: 0; }
.staff-card__b h3 {
  margin: 0 0 2px; font-size: 1.05rem;
  overflow-wrap: anywhere;
}
.staff-card__p {
  margin: 0 0 8px; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary);
}
.staff-sep { height: 44px; }

/* --- Avatar del perfil de jugador --- */
.jug-avatar {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  flex: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(255, 255, 255, .03);
  color: var(--primary);
}
.jug-avatar svg { width: 32px; height: 32px; }
.jug-rec { margin-left: 10px; font-size: .85rem; }

/* Una tarjeta que es un enlace debe comportarse como bloque: suelta (fuera
   de una rejilla) el navegador la trata como texto en línea y la parte en
   varias cajas. Pasaba en el perfil de jugador, en "Dónde juega". */
a.card { display: block; }

/* Rótulo de la racha, con el mismo aire que los kickers de sección */
.racha-titulo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
}
.racha-titulo::before {
  content: "";
  width: 20px;
  height: 2px;
  background: var(--primary);
}

/* Dentro de la caja de estadísticas, el G/P conserva sus colores
   (si no, .stat b lo pinta todo naranja y se pierde la lectura) */
.stat b .ratio-v { color: #4ADE80; }
.stat b .ratio-d { color: #E5484D; }
.stat b .ratio-sep,
.stat b .ratio em { color: var(--text-3); }
.stat b .ratio { font-size: 1.5rem; }
/* Dentro de una tarjeta-enlace, el texto auxiliar no debe pintarse
   como si fuera otro enlace */
.team-card .why-no { color: var(--text-3); }

/* ============================================================
   MODERACIÓN: sellos, roles y sanciones
   ============================================================ */
.sello-ok {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: middle;
  margin-left: 6px;
  padding: 2px 8px 2px 6px;
  border: 1px solid rgba(74, 222, 128, .45);
  border-radius: 999px;
  background: rgba(74, 222, 128, .12);
  color: #4ADE80;
  font-family: var(--font-display);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
}
.sello-ok svg { width: 11px; height: 11px; }
.sello-ok--mini { padding: 2px; border-radius: 50%; margin-left: 5px; }
.sello-ok--mini svg { width: 10px; height: 10px; }

/* Insignia de usuario Premium. La altura va en em, no en px: a 16px fijos
   quedaba como un punto diminuto al lado de un nombre a 2.2rem en la ficha
   del jugador, y ahí es donde peor se veía. En em acompaña al texto que la
   rodea — grande junto al titular, pequeña en el chat o en una tabla. */
/* Placa Premium, junto al nombre en la ficha del jugador. Es apaisada
   (16:9), así que se dimensiona por ALTO en em para acompañar al titular sin
   comerse la línea: a 2.2rem de nombre son unos 56px de alto y 99 de ancho.
   El PNG va recortado al dibujo, sin margen transparente: si lo tuviera, el
   alto en em contaría ese hueco y la placa se vería más pequeña. */
.insignia-premium {
  /* inline-block a la fuerza: arriba hay un reset global "img, svg { display:
     block }" que la sacaba a su propia linea debajo del nombre, y con ella en
     bloque el vertical-align de abajo no pintaba nada. Llevaba asi desde la
     primera version de la placa. */
  display: inline-block;
  height: 1.6em;
  width: auto;
  vertical-align: -0.35em;
  margin-left: .4em;
}

/* Descenso: la chapa de rango avisa de que otra derrota te baja. El
   asterisco va pegado al XP —"200*"— y la flecha detrás, en rojo, para que
   se lea de un vistazo sin tener que pasar el ratón por encima. */
.rango.es-descenso { border-color: var(--loss, #FF6B6B); }
.desc-asterisco { color: var(--loss, #FF6B6B); margin-left: 1px; }
.desc-marca {
  display: inline-flex;
  align-items: center;
  color: var(--loss, #FF6B6B);
  margin-left: 3px;
  animation: desc-late 1.6s ease-in-out infinite;
}
.desc-marca svg { width: 10px; height: 10px; }
@keyframes desc-late {
  0%, 100% { opacity: .55; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(1px); }
}
@media (prefers-reduced-motion: reduce) {
  .desc-marca { animation: none; opacity: 1; }
}

/* Llama de racha. Arde de verdad: la animación combina un latido de escala
   con origen abajo —como una llama que sube y baja desde su base— y un halo
   que respira a otro ritmo, para que los dos ciclos no cuadren y no se vea
   el bucle. Los dos tiempos son primos entre sí a propósito. */
/* Nick y llama, indivisibles: sin esto el navegador rompe entre los dos y
   la llama aparece colgando en la línea de abajo. */
.nick-llama { white-space: nowrap; }

/* ============================================================
   BANDEJA DE INCIDENCIAS (panel de admin)
   Una fila por incidencia, con el tipo a la izquierda para poder barrer la
   lista en vertical y localizar de un vistazo lo que se busca.
   ============================================================ */
.bandeja-n {
  display: inline-block;
  min-width: 26px;
  padding: 2px 8px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--on-primary);
  font-size: .82rem;
  font-weight: 800;
  vertical-align: middle;
}
.bandeja-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.bandeja-filtros .filtro-chip b { color: var(--text); margin-left: 4px; }

/* La chapa que dice de qué es cada caso. Cada tipo con su color, siempre el
   mismo: en la lista de pendientes y en el historial, para que un reto se
   reconozca igual en los dos sitios sin leer la etiqueta. */
.bandeja__tipo {
  font-family: var(--font-display);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 3px;
  white-space: nowrap;
  min-width: 74px;
  text-align: center;
}
.bandeja__tipo--reto     { background: rgba(var(--s2-acento-rgb), .14);  color: var(--primary); }
.bandeja__tipo--arena    { background: rgba(77, 163, 255, .14); color: var(--accent-blue); }
.bandeja__tipo--conducta { background: rgba(255, 107, 107, .14); color: var(--loss); }
.bandeja__tipo--torneo   { background: rgba(167, 139, 250, .16); color: #A78BFA; }

/* ---------- Lista de casos de moderación ----------
   Una línea por cosa que espera a un árbitro, del tipo que sea. Al pulsar,
   la misma fila se abre con los datos y los botones debajo.

   Antes esto eran tres bloques distintos —el resumen, la ficha grande y
   otra vez en el historial como «sin resolver»—, así que cada incidencia
   salía tres veces y había que bajar media pantalla para trabajar. Ahora la
   fila y su detalle son la misma cosa: el scroll es una línea por caso. */
.casos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.caso {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: 6px;
  overflow: hidden;
}
/* Una disputa de verdad, no un "admin pedido": el borde la separa de un
   vistazo al recorrer la lista. */
.caso.es-grave { border-left-color: var(--loss, #FF6B6B); }
.caso.es-abierto { border-color: var(--primary); }

/* La fila cerrada. Es un <button> y no un <div> con onclick para que
   funcione con el teclado y los lectores de pantalla sepan que se abre. */
.caso__fila {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 11px 14px;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.caso__fila:hover { background: var(--surface-2, rgba(255,255,255,.03)); }
.caso__fila:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

.caso__txt { min-width: 0; }
.caso__txt b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.caso__txt > span {
  display: block;
  font-size: .84rem;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.caso__estado {
  text-align: right;
  font-size: .82rem;
  color: var(--text-2);
  white-space: nowrap;
}
.caso__estado small { display: block; color: var(--text-3); font-size: .76rem; }
/* Más de 24 h sin atender: eso ya es tarde para cualquiera de los tipos */
.caso__estado small.es-tarde { color: var(--loss, #FF6B6B); font-weight: 700; }

/* La flecha dice si la fila está abierta sin depender del color */
.caso__flecha {
  width: 8px; height: 8px;
  border-right: 2px solid var(--text-3);
  border-bottom: 2px solid var(--text-3);
  transform: rotate(45deg);
  transition: transform .15s ease;
}
.caso.es-abierto .caso__flecha { transform: rotate(-135deg); }
@media (prefers-reduced-motion: reduce) { .caso__flecha { transition: none; } }

.caso__detalle {
  padding: 2px 14px 14px;
  border-top: 1px solid var(--border);
}
.caso__datos { margin: 12px 0 14px; display: grid; gap: 8px; }
.caso__datos > div {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
}
.caso__datos dt {
  color: var(--text-3);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.caso__datos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.caso__datos dd small { color: var(--text-3); font-size: .84rem; }

/* Los lobbys de Arena en juego y sin nada pendiente: se piden aparte porque
   son la mayor parte del scroll y casi nunca hacen falta, pero tienen que
   seguir siendo alcanzables (un lobby tirado no aparece de otra forma). */
.casos-mas {
  display: block;
  width: 100%;
  margin: 10px 0 0;
  padding: 9px 14px;
  background: none;
  border: 1px dashed var(--border-strong);
  border-radius: 6px;
  color: var(--text-3);
  font: inherit;
  font-size: .86rem;
  cursor: pointer;
}
.casos-mas:hover { color: var(--text); border-color: var(--primary); }
.casos--tranquilos { margin-top: 8px; opacity: .82; }

.sub-tabs { margin: 0 0 16px; }

@media (max-width: 760px) {
  .caso__fila { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 8px; }
  .caso__estado { grid-column: 2 / -1; text-align: left; }
  .caso__datos > div { grid-template-columns: 1fr; gap: 2px; }
}

/* Los castigos de cola son ocho botones seguidos: sin esto se salen de la
   tarjeta en móvil. Y el indefinido se separa del resto porque es el único
   que no se quita solo — tiene que costar un poco más pulsarlo por error. */
.action-row--castigos { flex-wrap: wrap; gap: 6px; }
.action-row--castigos .es-indefinido {
  margin-left: 6px;
  border-color: var(--loss, #FF6B6B);
  font-weight: 700;
}

/* Un equipo vetado no está baneado: sigue en la web y termina lo que tenga
   aceptado. Va en ámbar, no en rojo, para que no se confunda con un baneo. */
.why-no.es-veto { color: var(--primary); font-weight: 600; }

/* ---------- Historial de moderación ----------
   Verde lo que sigue abierto, rojo lo que ya está cerrado. Va al revés que
   el resto de la web (donde el rojo avisa de un problema): aquí el color no
   dice "esto va mal", dice si el asunto sigue vivo o ya está zanjado.
   El punto de la izquierda lleva el color y el borde lo acompaña, para que
   se distinga también sin ver bien el color. */
.hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hist__i {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: 6px;
}
.hist__punto {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex: none;
}
.hist__i.es-abierto            { border-left-color: var(--win, #4ADE80); }
.hist__i.es-abierto .hist__punto  { background: var(--win, #4ADE80); }
.hist__i.es-cerrado            { border-left-color: var(--loss, #FF6B6B); }
.hist__i.es-cerrado .hist__punto  { background: var(--loss, #FF6B6B); }
/* Lo cerrado ya no pide nada: se apaga un poco para que lo abierto destaque */
.hist__i.es-cerrado { opacity: .86; }

.hist__txt { min-width: 0; }
.hist__txt b { margin-right: 8px; }
.hist__txt .bandeja__tipo { min-width: 0; padding: 2px 7px; font-size: .62rem; }
.hist__txt span {
  display: block;
  margin-top: 2px;
  font-size: .84rem;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hist__quien {
  text-align: right;
  font-size: .8rem;
  color: var(--text-2);
  white-space: nowrap;
}
.hist__quien small { display: block; color: var(--text-3); font-size: .74rem; }
.hist__abierto { color: var(--win, #4ADE80); }

@media (max-width: 760px) {
  .hist__i { grid-template-columns: auto minmax(0, 1fr); row-gap: 8px; }
  .hist__quien { grid-column: 2 / -1; text-align: left; }
  .hist__i .btn { grid-column: 2 / -1; justify-self: start; }
}

.llama-racha {
  height: 1.45em;
  width: auto;
  vertical-align: -0.4em;
  margin-left: .35em;
  transform-origin: 50% 100%;
  animation: llama-arde 1.1s ease-in-out infinite alternate,
             llama-halo 1.7s ease-in-out infinite;
  will-change: transform, filter;
}
@keyframes llama-arde {
  0%   { transform: scale(1)      rotate(-1.5deg); }
  40%  { transform: scaleY(1.09) scaleX(.97) rotate(1deg); }
  70%  { transform: scaleY(.98)  scaleX(1.03) rotate(-.5deg); }
  100% { transform: scaleY(1.06) scaleX(.99) rotate(1.5deg); }
}
@keyframes llama-halo {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(255, 140, 0, .55)); }
  50%      { filter: drop-shadow(0 0 7px rgba(255, 170, 30, .95)); }
}
/* Quien pide menos movimiento en su sistema ve la llama quieta, no sin ella */
@media (prefers-reduced-motion: reduce) {
  .llama-racha { animation: none; filter: drop-shadow(0 0 3px rgba(255, 140, 0, .6)); }
}

.badge--arbitro {
  border-color: rgba(167, 139, 250, .5);
  background: rgba(167, 139, 250, .14);
  color: #A78BFA;
}
.badge--supervisor {
  border-color: rgba(245, 158, 11, .5);
  background: rgba(245, 158, 11, .14);
  color: #F59E0B;
}
.badge--coment {
  border-color: rgba(34, 211, 238, .5);
  background: rgba(34, 211, 238, .14);
  color: #22D3EE;
}
.badge--ban {
  border-color: rgba(229, 72, 77, .55);
  background: rgba(229, 72, 77, .14);
  color: #E5484D;
}
.badge--ranking {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-color: rgba(229, 72, 77, .55);
  background: rgba(229, 72, 77, .12);
  color: #E5484D;
}
.badge--ranking svg { width: 12px; height: 12px; }

.card--ban {
  border-color: rgba(229, 72, 77, .5);
  background: linear-gradient(180deg, rgba(229, 72, 77, .1), transparent 60%), var(--surface);
}

.aviso-ranking {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(229, 72, 77, .4);
  border-left-width: 3px;
  border-radius: 5px;
  background: rgba(229, 72, 77, .07);
  color: var(--text-2);
  font-size: .92rem;
}
.aviso-ranking svg { width: 20px; height: 20px; flex: none; color: #E5484D; margin-top: 2px; }
.aviso-ranking b { color: var(--text); }

/* Puede encoger: con cuatro botones (verificar, árbitro, comentarista,
   banear) a ancho fijo se comía la columna del nombre. Al poder encoger,
   el flex-wrap de .action-row los baja a otra línea en vez de desbordar. */
.admin-fila .action-row { flex: 0 1 auto; justify-content: flex-end; }
@media (max-width: 640px) {
  .admin-fila { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* --- Copas por torneo: mismo trofeo, distinto color --- */
.copa { position: relative; }
.copa-num {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: grid;
  place-items: center;
  min-width: 12px;
  height: 12px;
  padding: 0 2px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid currentColor;
  font-family: var(--font-display);
  font-size: .55rem;
  font-style: normal;
  line-height: 1;
}

/* --- Tarjeta de calendario con el póster del Minor de fondo --- */
.cal-item--banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.cal-item--banner::before {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: min(38%, 290px);
  z-index: -2;
  background-image: var(--cal-banner);
  background-size: cover;
  background-position: center 27%;   /* el escudo, no las letras */
  opacity: .38;
  /* Se funde con la tarjeta por la izquierda en vez de cortarse en seco */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%);
          mask-image: linear-gradient(90deg, transparent, #000 55%);
  transition: opacity var(--t-fast);
}
.cal-item--banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, var(--surface) 30%, rgba(7, 4, 13, .55) 70%, transparent);
}
.cal-item--banner:hover::before { opacity: .55; }

.cal-item--major { border-left: 3px solid rgba(229, 72, 77, .6); }

/* Lema de la comunidad en el pie */
.footer__lema {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--primary);
}

/* ============================================================
   Cabeceras con brillo naranja BO2 en Torneos y Comunidad
   El degradado arranca justo bajo la línea que cierra la descripción.
   ============================================================ */
.page-head--torneos,
.page-head--comunidad { border-bottom-color: rgba(var(--s2-acento-rgb), .4); }

.section--glow {
  position: relative;
  isolation: isolate;
}
.section--glow::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 260px;
  z-index: -1;
  background:
    radial-gradient(ellipse 760px 190px at 50% 0%, rgba(var(--s2-acento-rgb), .22), transparent 72%),
    linear-gradient(180deg, rgba(var(--s2-acento-rgb), .085), transparent 78%);
  pointer-events: none;
}
.section--glow::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  z-index: -1;
  background: linear-gradient(90deg, transparent, var(--primary) 25%, var(--primary) 75%, transparent);
  opacity: .55;
}

/* ============================================================
   TROFEOS
   Oro = campeón de Minor · Morado = campeón del Major
   Plata = subcampeón de cualquier torneo. Misma copa, otro metal.
   ============================================================ */
.trofeos { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; margin-left: 8px; }
.trofeo { display: inline-flex; align-items: center; gap: 5px; }
.trofeo img { width: 22px; height: auto; display: block; }
.trofeo__t { font-size: .78rem; font-weight: 600; }

.trofeo--oro img { filter: drop-shadow(0 0 5px rgba(245, 196, 58, .45)); }
.trofeo--plata img { filter: drop-shadow(0 0 5px rgba(210, 215, 222, .40)); }
.trofeo--morado img { filter: drop-shadow(0 0 5px rgba(196, 69, 240, .50)); }
/* Copas en JPEG (Minor e Inaugural): fondo negro fundido y ancho compensado */
.trofeo--minor img, .trofeo--inaugural img { width: 34px; mix-blend-mode: screen; filter: none; }

/* Tamaño mayor cuando el trofeo va en una vitrina, no junto a un nombre */
.vitrina .trofeo img { width: 56px; }
.vitrina { display: flex; flex-wrap: wrap; gap: 18px; }
.vitrina .trofeo { flex-direction: column; gap: 6px; text-align: center; max-width: 120px; }

/* Leyenda de los tres metales */
.tr-oro    { color: #F5C43A; }
.tr-plata  { color: #D2D7DE; }
.tr-morado { color: #C445F0; }

/* ---------- Estrella: clasificado al Major (top 16, provisional) ---------- */
.estrella-major {
  display: inline-flex;
  align-items: center;
  margin-left: 7px;
  color: #E5232B;
  filter: drop-shadow(0 0 5px rgba(229, 35, 43, .6));
  vertical-align: middle;
}
.estrella-major svg { width: 17px; height: 17px; display: block; }
.rank-table .estrella-major svg { width: 15px; height: 15px; }
.team-panel__head .estrella-major svg { width: 24px; height: 24px; }

/* ============================================================
   PREGUNTAS FRECUENTES
   ============================================================ */
.faq-lema {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 6px;
  text-shadow: 0 0 18px rgba(var(--s2-acento-rgb), .35);
}
.faq-layout { display: grid; grid-template-columns: 230px 1fr; gap: 40px; align-items: start; }
@media (max-width: 900px) { .faq-layout { grid-template-columns: 1fr; gap: 24px; } }

.faq-nav { position: sticky; top: 90px; }
@media (max-width: 900px) { .faq-nav { position: static; } }
.faq-nav__t {
  font-family: var(--font-ui);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 10px;
}
.faq-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.faq-nav a {
  display: block;
  padding: 9px 12px;
  border-left: 2px solid var(--border);
  color: var(--text-2);
  font-size: .92rem;
  text-decoration: none;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.faq-nav a:hover { color: var(--text); border-left-color: var(--primary); background: rgba(var(--s2-acento-rgb), .06); }

.faq-block { margin-bottom: 44px; }
.faq-block h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  margin: 0 0 6px;
}
.faq-num {
  font-family: var(--font-display);
  font-size: .82rem;
  color: var(--primary);
  border: 1px solid rgba(var(--s2-acento-rgb), .4);
  padding: 3px 8px;
  background: var(--primary-dim);
}
.faq-intro { color: var(--text-2); margin: 0 0 16px; max-width: 66ch; }

.faq-q {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: 10px;
  transition: border-color var(--t-fast);
}
.faq-q[open] { border-color: rgba(var(--s2-acento-rgb), .45); }
.faq-q summary {
  cursor: pointer;
  list-style: none;
  padding: 15px 46px 15px 18px;
  position: relative;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
}
.faq-q summary::-webkit-details-marker { display: none; }
.faq-q summary::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  transform: rotate(45deg);
  transition: transform var(--t-fast);
}
.faq-q[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq-q summary:hover { color: var(--primary); }
.faq-a { padding: 0 18px 16px; color: var(--text-2); line-height: 1.65; }
.faq-a p { margin: 0 0 10px; }
.faq-a p:last-child, .faq-a ul:last-child, .faq-a ol:last-child { margin-bottom: 0; }
.faq-a ul, .faq-a ol { margin: 0 0 10px; padding-left: 22px; }
.faq-a li { margin-bottom: 5px; }

/* ============================================================
   FONDO GENERAL
   Cuatro capas muy finas en vez de negro plano. Ninguna se nota
   por separado; juntas dan profundidad y quitan el aire de "folio
   negro". Es CSS puro: no añade ni un byte de descarga.
     1 · grano fino  → rompe el plano y evita el bandeado
     2 · trama diagonal → textura de material técnico
     3 · dos focos naranjas anclados en esquinas opuestas
     4 · viñeta → oscurece los bordes y centra la mirada
   ============================================================ */
body { position: relative; }

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

body::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"),
    repeating-linear-gradient(45deg,  rgba(255, 255, 255, .008) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, .12)        0 1px, transparent 1px 5px);
  opacity: .32;
}

body::after {
  background:
    radial-gradient(ellipse 780px 560px at 8% 2%,   rgba(var(--s2-acento-rgb), .06), transparent 66%),
    radial-gradient(ellipse 680px 520px at 92% 96%, rgba(var(--s2-acento-rgb), .04), transparent 68%),
    radial-gradient(ellipse 95% 85% at 50% 45%, transparent 48%, rgba(0, 0, 0, .35));
}

/* ---------- Cuadro de torneo: entrar en el equipo desde el cruce ---------- */
.b-team {
  flex: 1;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--t-fast);
}
.b-team:hover,
.b-team:focus-visible { color: var(--primary); text-decoration: underline; }

/* Botón de admin para marcar ganador, separado del nombre */
.b-win {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  margin-left: 8px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: transparent;
  color: var(--text-3);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all var(--t-fast);
}
.b-win:hover { border-color: var(--primary); color: var(--primary); }
.row.win .b-win { border-color: var(--win); color: var(--win); }

/* ============================================================
   TARJETA DE TORNEO (componente TournamentCard)
   Bloque de fecha tipo billete · perforación punteada · marca de agua.
   Valores traducidos uno a uno desde la referencia en Tailwind.
   ============================================================ */
.t-card {
  position: relative;
  display: flex;
  overflow: hidden;
  border-radius: 12px;                    /* rounded-xl */
  border: 1px solid #262626;              /* neutral-800 */
  background: #171717;                    /* neutral-900 */
  margin-bottom: 24px;
}

/* --- Bloque de fecha --- */
.t-card__date {
  display: flex;
  width: 96px;                            /* w-24 */
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 8px;                      /* py-5 px-2 */
  text-align: center;
}
/* La chapa de fecha de un torneo próximo: es interfaz, no un color de
   identidad como los de los rangos, así que va con el naranja de la marca. */
.t-card--upcoming .t-card__date { background: var(--primary); color: #ffffff; }
.t-card--open     .t-card__date { background: #22C55E; color: #052E16; }  /* green-500 / green-950 */
.t-card--closed   .t-card__date { background: #404040; color: #D4D4D4; }  /* neutral-700 / neutral-300 */

.t-card__month { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; }
.t-card__days  { font-size: 34px; font-weight: 700; line-height: 1.25; letter-spacing: -0.025em; }
.t-card__wd    { margin-top: 4px; font-size: 11px; opacity: 0.7; }

/* --- Perforación del billete --- */
.t-card__perf {
  margin: 12px 0;                         /* my-3 */
  border-left: 1px dashed #404040;        /* neutral-700 */
}

/* --- Marca de agua --- */
.t-card__logo {
  pointer-events: none;
  user-select: none;
  position: absolute;
  bottom: -32px;
  right: -32px;
  width: 176px;                           /* w-44 */
  height: auto;
  opacity: 0.05;
}

/* --- Contenido --- */
.t-card__body { position: relative; flex: 1; min-width: 0; padding: 20px 24px; }
.t-card__series {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: #737373;                         /* neutral-500 */
}
.t-card__title { margin: 0 0 8px; font-size: 1.125rem; font-weight: 500; color: #FAFAFA; }
.t-card__meta  { margin: 0 0 16px; font-size: 13px; color: #A3A3A3; }
.t-card__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.t-card__actions:empty { display: none; }
.t-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.t-card__champ { margin: 14px 0 0; font-weight: 600; }

/* ---------- Equipos inscritos, en desplegable ----------
   Antes era una tira de tags: con 8 equipos iba bien, con 30 la tarjeta se
   convertia en un muro. Cerrado dice cuantos hay; abierto, la lista completa
   ordenada por XP, con el equipo propio marcado en verde. */
.t-card__vacio { margin: 0 0 14px; }
.t-inscritos { margin-top: 14px; margin-bottom: 16px; }
.t-inscritos > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display, "Saira Condensed"), sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  padding: 6px 12px;
  border: 1px solid rgba(var(--s2-acento-rgb), .35);
  background: rgba(var(--s2-acento-rgb), .06);
}
.t-inscritos > summary::-webkit-details-marker { display: none; }
.t-inscritos > summary::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--t-fast, .15s);
}
.t-inscritos[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.t-inscritos > summary:hover { border-color: var(--primary); background: rgba(var(--s2-acento-rgb), .12); }

.t-inscritos__lista {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  max-height: 320px;      /* con muchos equipos, la lista scrollea dentro */
  overflow-y: auto;
  border: 1px solid var(--line);
}
.t-inscritos__lista li { border-bottom: 1px solid rgba(255, 255, 255, .05); }
.t-inscritos__lista li:last-child { border-bottom: 0; }
.t-inscritos__lista a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 12px;
  text-decoration: none;
  color: inherit;
}
.t-inscritos__lista a:hover { background: rgba(var(--s2-acento-rgb), .06); }
/* Escudo + tag en la misma celda de la rejilla: así el equipo que no tiene
   logo no deja un hueco y la columna del tag sigue alineada con las demás. */
/* ---------- Reportes de un lobby de Arena ----------
   Quién ha reportado y qué ha dicho. Cuando los dos se contradicen se pinta
   en rojo, que es lo que va a mirar el árbitro. */
.arena-reportes {
  border: 1px solid var(--line);
  border-left: 3px solid var(--text-3);
  border-radius: 4px;
  padding: 10px 14px;
  margin: 14px 0;
  background: rgba(255, 255, 255, .02);
}
.arena-reportes.es-disputa { border-left-color: var(--loss, #E5484D); }
.arena-reportes__t {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.arena-reportes ul { list-style: none; margin: 0; padding: 0; }
.arena-reportes li { font-size: .9rem; padding: 2px 0; }
.arena-reportes li.es-falta { color: var(--text-3); }

/* La banderita de reportar a un jugador, en la plantilla del lobby.
   Comparte celda con la chapa de rango: una columna más desbordaba la tabla
   y el scroll horizontal se la comía. */
.rango-y-rep { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
/* Ni la chapa ni el botón se encogen. Sin esto, dentro de una celda con
   width:1% los hijos del flex se comprimen por debajo de su contenido y la
   banderita acaba fuera del recuadro, cortada por el scroll de la tabla. */
.rango-y-rep > * { flex: none; }

.btn-reportar {
  background: none;
  border: 0;
  padding: 3px;
  cursor: pointer;
  color: var(--text-2);          /* el mástil; la tela va roja fija */
  line-height: 0;
  border-radius: 3px;
  opacity: .85;
  transition: opacity var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.btn-reportar svg { width: 19px; height: 19px; display: block; }
.btn-reportar:hover {
  opacity: 1;
  background: rgba(229, 72, 77, .14);
  transform: scale(1.12);
}
/* Cuál de las dos banderas se ve. El corte son los 860px en los que
   .grid--2 pasa a una columna y la tabla empieza a necesitar scroll. */
.rep--estrecho { display: none; vertical-align: middle; margin-left: 6px; }
@media (max-width: 860px) {
  .rep--ancho { display: none; }
  .rep--estrecho { display: inline-block; }
}

.t-inscritos__eq { display: flex; align-items: center; gap: 8px; }
.t-inscritos__escudo {
  width: 28px; height: 20px;
  object-fit: contain;
  flex: none;
}
.t-inscritos__nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-inscritos__xp { color: var(--text-3); font-size: 0.85rem; }
/* Los tags, con recuadro como en el ranking: si solo el propio llevaba
   fondo, parecia un error de pintado en vez de una marca. */
.t-inscritos__lista .tag {
  font-family: "Chakra Petch", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #ffffff;
  background: #c3bad6;
  padding: 4px 8px;
  min-width: 46px;
  text-align: center;
}
/* Y el tuyo en verde, igual que en el ranking */
.t-inscritos__lista li.es-mio .tag { background: var(--win); color: #06200f; }

/* Los tags de equipo inscrito llevan a su ficha */
.tag--link { text-decoration: none; transition: border-color var(--t-fast), color var(--t-fast); }
.tag--link:hover { border-color: var(--primary); color: var(--primary); }

@media (max-width: 560px) {
  .t-card__date { width: 74px; padding: 14px 6px; }
  .t-card__days { font-size: 26px; }
  .t-card__body { padding: 16px; }
  .t-card__logo { width: 130px; }
}

/* La tarjeta como enlace (calendario) */
.t-card--link { text-decoration: none; color: inherit; transition: border-color var(--t-fast), transform var(--t-fast); }
.t-card--link:hover { border-color: #525252; transform: translateY(-2px); }
.t-card--mio { box-shadow: inset 3px 0 0 var(--primary); }
.t-card__badge { margin-bottom: 12px; }
.t-card__badge:empty { display: none; }
/* Un rango de días (15–16) no cabe a 34px en un bloque de 96px */
.t-card__days { white-space: nowrap; }
.t-card__days--rango { font-size: 25px; letter-spacing: -0.03em; }
@media (max-width: 560px) { .t-card__days--rango { font-size: 19px; } }

/* ============================================================
   PORTADA — REDISEÑO DE SECCIONES
   Todo va dentro de .rd a propósito: .kicker, .btn y .section-head
   ya existen en el resto de la web, y sin acotar cambiarían todas
   las páginas. El fondo global y el pie no se tocan.
   ============================================================ */
.rd {
  --naranja: var(--s2-acento);
  --naranja-claro: var(--s2-acento-claro);
  --texto: #f3effb;
  --texto-suave: #b2a8cc;
  --texto-mute: #8a80a6;
  --borde: rgba(255, 255, 255, .09);
  --card-bg: linear-gradient(170deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
  font-family: "Barlow", system-ui, sans-serif;
}

/* Al pulsar «Publica tu propio reto», el formulario parpadea un momento:
   si ya estaba en pantalla, el desplazamiento solo no se nota. */
#post-box.is-destacado {
  animation: destacar 1.6s ease-out;
}
@keyframes destacar {
  0%, 100% { box-shadow: none; }
  15%, 55% { box-shadow: 0 0 0 2px rgba(var(--s2-acento-rgb), .85), 0 0 28px rgba(var(--s2-acento-rgb), .35); }
}
@media (prefers-reduced-motion: reduce) {
  #post-box.is-destacado { animation: none; box-shadow: 0 0 0 2px rgba(var(--s2-acento-rgb), .85); }
}

/* Filtros de moderación en Jugadores: solo los ven los administradores */
.filtro-chip--admin {
  border-color: rgba(var(--s2-acento-rgb), .45);
  color: #ffb37a;
}

/* Hora fuera de la ventana de 12 h del reto: se ve, pero no se elige */
.pick-opt.is-fuera {
  opacity: .32;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* ---------- Cinta de estado ---------- */
.rd .ticker {
  overflow: hidden;
  padding: 12px 0;
  border-top: 1px solid rgba(var(--s2-acento-rgb), .35);
  border-bottom: 1px solid rgba(var(--s2-acento-rgb), .35);
  background: rgba(var(--s2-acento-rgb), .05);
}
.rd .ticker-track { display: flex; width: max-content; animation: ticker 30s linear infinite; }
.rd .ticker-group {
  display: flex;
  gap: 48px;
  padding-right: 48px;
  white-space: nowrap;
  font-family: "Chakra Petch", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  /* Las mayúsculas van aquí y no en el texto: así el HTML de arranque y lo que
     escribe js/app.js se ven igual y la cinta no cambia de aspecto al cargar. */
  text-transform: uppercase;
  color: #d9d2c6;
}
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .rd .ticker-track { animation: none; } }

/* ---------- Cabecera de sección ---------- */
.rd .section-head { margin-bottom: 64px; }
.rd .kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  font-family: "Chakra Petch", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--naranja-claro);
}
.rd .kicker::before { content: none; }
.rd .kicker-bar { width: 30px; height: 3px; background: var(--naranja); flex-shrink: 0; }
.rd .section-head h2 {
  margin: 0;
  font-family: "Saira Condensed", sans-serif;
  font-weight: 800;
  font-size: clamp(40px, 4.2vw, 60px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--texto);
}
.rd .rd-lead { margin: 18px 0 0; max-width: 60ch; color: var(--texto-suave); font-size: 15px; }

/* ---------- Fases del circuito ---------- */
.rd .fases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1000px) { .rd .fases { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .rd .fases { grid-template-columns: 1fr; } }

.rd .fase-card {
  position: relative;
  border: 1px solid var(--borde);
  background: var(--card-bg);
  padding: 28px 24px 30px;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.rd .fase-card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--s2-acento-rgb), .55);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .8);
}
.rd .fase-badge {
  font-family: "Chakra Petch", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 5px 10px;
  border: 1px solid;
  display: inline-block;
  margin-bottom: 20px;
}
.rd .fase-badge--verde   { border-color: rgba(74, 222, 128, .4); color: #4ade80; }
.rd .fase-badge--naranja { border-color: rgba(var(--s2-acento-rgb), .45); color: var(--naranja-claro); }
.rd .fase-badge--gris    { border-color: rgba(255, 255, 255, .18); color: var(--texto-mute); }
.rd .fase-badge--solido  { border-color: var(--naranja); background: var(--naranja); color: #ffffff; }

.rd .fase-card h3 {
  margin: 0 0 12px;
  font-family: "Saira Condensed", sans-serif;
  font-weight: 800;
  font-size: 26px;
  text-transform: uppercase;
  color: var(--texto);
}
.rd .fase-card p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--texto-suave); }
.rd .fase-card b { color: var(--texto); }

.rd .fase-card--destacada {
  border: 1px solid rgba(var(--s2-acento-rgb), .45);
  background: linear-gradient(170deg, rgba(var(--s2-acento-rgb), .1), rgba(var(--s2-acento-rgb), .02));
}
.rd .fase-card--destacada::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 46px;
  height: 3px;
  background: var(--naranja);
}

/* ---------- Pasos ---------- */
.rd .pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; position: relative; }
.rd .pasos::before {
  content: "";
  position: absolute;
  top: 34px;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--s2-acento-rgb), .5), rgba(var(--s2-acento-rgb), .5), transparent);
}
@media (max-width: 860px) {
  .rd .pasos { grid-template-columns: 1fr; gap: 40px; }
  .rd .pasos::before { display: none; }
}
.rd .paso-num {
  position: relative;
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  background: var(--bg);
  border: 1px solid rgba(var(--s2-acento-rgb), .5);
  transform: rotate(45deg);
  margin-bottom: 30px;
}
.rd .paso-num span {
  transform: rotate(-45deg);
  font-family: "Saira Condensed", sans-serif;
  font-weight: 900;
  font-size: 28px;
  color: var(--naranja);
}
.rd .paso h3 {
  margin: 0 0 10px;
  font-family: "Saira Condensed", sans-serif;
  font-weight: 800;
  font-size: 21px;
  text-transform: uppercase;
  color: var(--texto);
}
.rd .paso p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--texto-suave); }
.rd .paso a { color: var(--naranja-claro); }

/* ---------- Estadísticas con contador ---------- */
.rd .rd-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--borde);
  border: 1px solid var(--borde);
  margin-bottom: 28px;
}
@media (max-width: 640px) { .rd .rd-stats { grid-template-columns: repeat(2, 1fr); } }
.rd .rd-stat { background: #0e0d0c; padding: 20px 22px; }
.rd .rd-stat b {
  display: block;
  font-family: "Saira Condensed", sans-serif;
  font-weight: 900;
  font-size: 34px;
  line-height: 1;
  color: var(--naranja-claro);
  font-variant-numeric: tabular-nums;
}
.rd .rd-stat span {
  display: block;
  margin-top: 6px;
  font-family: "Chakra Petch", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--texto-mute);
}

/* ---------- Tabla de ranking ---------- */
.rd .rk-tabla { border: 1px solid var(--borde); background: var(--card-bg); }
.rd .rk-fila {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 64px 76px;
  gap: 10px;
  align-items: center;
  padding: 15px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  position: relative;
  transition: background .2s;
  text-decoration: none;
  color: inherit;
}
.rd .rk-fila:last-child { border-bottom: 0; }
.rd a.rk-fila:hover { background: rgba(var(--s2-acento-rgb), .05); }
.rd .rk-head {
  padding: 14px 24px;
  font-family: "Chakra Petch", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--texto-mute);
}
.rd .rk-head span:nth-child(3),
.rd .rk-head span:nth-child(4) { text-align: right; }
.rd .rk-pos {
  font-family: "Saira Condensed", sans-serif;
  font-weight: 900;
  font-size: 22px;
  color: var(--texto);
}
.rd .rk-pos--lider { color: var(--naranja); }
.rd .rk-equipo { display: flex; align-items: center; min-width: 0; color: var(--texto); }
/* Escudo del equipo en la fila. El hueco se reserva siempre, tenga escudo o
   no, para que los tags y los nombres queden en columna. */
/* Más ancho que alto: los escudos cuadrados (casi todos) se quedan en 30 px
   de alto y los apaisados —un wordmark como el de 2SAVAGE— aprovechan el
   ancho de más en vez de encogerse a una tira ilegible. */
.rd .rk-escudo {
  width: 44px; height: 30px; flex: none; margin-right: 9px;
  display: flex; align-items: center; justify-content: center;
}
.rd .rk-escudo img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
@media (max-width: 720px) {
  .rd .rk-escudo { width: 34px; height: 24px; margin-right: 6px; }
}
/* min-width: 0 es lo que le deja encogerse dentro del flex. Sin eso un nombre
   largo no se recorta con puntos suspensivos: se desborda de su columna y se
   monta encima de PJ, que es justo lo que pasaba en pantallas de 360 px. */
.rd .rk-nombre {
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rd .rk-tag {
  font-family: "Chakra Petch", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #ffffff;
  background: #c3bad6;
  padding: 4px 8px;
  margin-right: 12px;
  flex-shrink: 0;
}
/* Tu propio equipo, en verde, para localizarlo de un vistazo en la tabla.
   Es el unico color que queda en la columna del tag, asi que no compite
   con nada. */
.rd .rk-fila--mio .rk-tag { background: var(--win); color: #06200f; }
.rd .rk-record {
  text-align: right;
  font-family: "Chakra Petch", sans-serif;
  font-size: 13px;
  color: #c3bad6;
}
.rd .rk-xp {
  text-align: right;
  font-family: "Saira Condensed", sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: var(--naranja-claro);
}
.rd .rk-fila::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: var(--bar, 0%);
  background: linear-gradient(90deg, var(--naranja), rgba(var(--s2-acento-rgb), 0));
}
.rd .rk-vacio { padding: 28px 24px; text-align: center; color: var(--texto-mute); }

/* ---------- Botones ---------- */
.rd .btn-liga {
  font-family: "Saira Condensed", sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1.5px;
  font-size: 18px;
  padding: 15px 34px;
  display: inline-block;
  text-decoration: none;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  transition: all .2s;
  border: 0;
  cursor: pointer;
}
.rd .btn-liga--pri { background: var(--naranja); color: #ffffff; }
.rd .btn-liga--pri:hover { background: var(--naranja-claro); transform: translateY(-2px); }
.rd .btn-liga--sec {
  color: var(--texto);
  /* Sin fondo declarado, en un <button> salia el gris del navegador: los
     demas sitios donde se usa son enlaces y por eso no se notaba. */
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .22);
  clip-path: none;
}
.rd .btn-liga--sec:hover { border-color: var(--naranja); background: rgba(var(--s2-acento-rgb), .08); }

/* La banda final hereda la tipografía nueva */
.rd .cta-band h2 {
  font-family: "Saira Condensed", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.05;
}
.rd .cta-band p { color: var(--texto-suave); }

/* ---------- Ranking a dos columnas ---------- */
.rd .rk-split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 56px;
  align-items: start;
}
@media (max-width: 940px) {
  .rd .rk-split { grid-template-columns: 1fr; gap: 36px; }
}
.rd .rk-texto h2 {
  margin: 0;
  font-family: "Saira Condensed", sans-serif;
  font-weight: 800;
  font-size: clamp(36px, 3.6vw, 52px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--texto);
}
.rd .rk-texto .rd-lead { margin: 18px 0 26px; }
.rd .rd-stats--2 {
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 28px;
}
.rd .rd-stats--2 .rd-stat { padding: 16px 18px; }
.rd .rd-stats--2 .rd-stat b { font-size: 28px; }
.rd .rk-pie {
  margin: 0;
  padding: 13px 24px;
  border-top: 1px solid rgba(255, 255, 255, .05);
  font-family: "Chakra Petch", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--texto-mute);
}

/* ---------- CTA final ---------- */
.rd .cta-final {
  text-align: center;
  padding: 72px 24px 78px;
  border: 1px solid var(--borde);
  background: var(--card-bg);
}
.rd .cta-kicker {
  margin: 0 0 22px;
  font-family: "Chakra Petch", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--naranja-claro);
}
.rd .cta-final h2 {
  margin: 0 0 22px;
  font-family: "Saira Condensed", sans-serif;
  font-weight: 900;
  font-size: clamp(38px, 5vw, 68px);
  line-height: .98;
  text-transform: uppercase;
  color: var(--texto);
}
.rd .cta-final h2 em { font-style: normal; color: var(--naranja); }
.rd .cta-lead {
  margin: 0 auto 34px;
  max-width: 46ch;
  color: var(--texto-suave);
  font-size: 15px;
  line-height: 1.65;
}
.rd .cta-botones { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
@media (max-width: 480px) {
  .rd .cta-botones { flex-direction: column; }
  .rd .cta-botones .btn-liga { width: 100%; text-align: center; }
}

/* ---------- Marca de agua del CTA final ---------- */
.rd .cta-final { position: relative; overflow: hidden; isolation: isolate; }
.rd .cta-logo {
  pointer-events: none;
  user-select: none;
  position: absolute;
  right: -40px;
  bottom: -56px;
  width: 260px;
  height: auto;
  opacity: .06;
  z-index: -1;
}
@media (max-width: 640px) {
  .rd .cta-logo { width: 180px; right: -30px; bottom: -40px; }
}

/* ---------- Separación entre apartados ----------
   Los apartados alternan tono de fondo, que separa mucho mejor que una
   línea: cada sección se lee como un bloque propio. El filo superior e
   inferior remata el corte. */
.rd--alt {
  position: relative;
  background: rgba(255, 255, 255, .016);
  border-top: 1px solid rgba(255, 255, 255, .055);
  border-bottom: 1px solid rgba(255, 255, 255, .055);
}

/* La última sección pega con el pie: sin hueco muerto entre medias */
.rd--ultima { padding-bottom: 0; border-bottom: 0; }
/* El pie trae margin-top: 96px, que en la portada deja un hueco muerto
   bajo el CTA. Lo anulamos SOLO en el inicio: el pie es hermano de <main>,
   así que no vale un selector de hermano adyacente. */
body[data-page="inicio"] .footer { margin-top: 0; }

/* ---------- Aire bajo el hero en la portada ----------
   El hero trae 80px de relleno inferior, pensados para separarlo de la
   siguiente sección. Con la cinta justo debajo quedaba un hueco muerto.
   Solo se toca en el inicio: el hero de otras páginas no cambia. */
body[data-page="inicio"] .hero { padding-bottom: 36px; }
@media (max-width: 720px) {
  body[data-page="inicio"] .hero { padding-bottom: 28px; }
}

/* ============================================================
   SISTEMA NUEVO EN TODA LA WEB
   La clase .rd va en el <body> de las 20 páginas. Redefiniendo aquí
   las variables de fuente, las ~50 reglas que ya usaban
   var(--font-display) y compañía adoptan la tipografía nueva sin
   tocarlas una por una.
   ============================================================ */
body.rd {
  --font-display: "Saira Condensed", "Arial Narrow", sans-serif;
  --font-stencil: "Saira Condensed", "Arial Narrow", sans-serif;
  --font-ui: "Chakra Petch", sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, sans-serif;
}

/* Títulos: la condensada pide más peso y menos interlínea */
body.rd h1,
body.rd h2 {
  font-family: var(--font-stencil);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.02;
  text-transform: uppercase;
}
body.rd h3,
body.rd h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .01em;
}

/* Kicker: la barrita naranja en todas las páginas.
   En la portada ya viene como <span>, así que no la duplicamos. */
body.rd .kicker::before {
  content: "";
  width: 30px;
  height: 3px;
  background: var(--naranja, var(--s2-acento));
  flex-shrink: 0;
}
body.rd .kicker:has(.kicker-bar)::before { content: none; }
body.rd .section-head .kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Chakra Petch", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--s2-acento-claro);
  text-transform: uppercase;
}

/* Etiquetas y datos: Chakra Petch, como en la portada */
body.rd .badge,
body.rd .tag,
body.rd .psn-pill,
body.rd .kicker,
body.rd .cal-tipo,
body.rd th {
  font-family: "Chakra Petch", sans-serif;
  letter-spacing: 1.5px;
}

/* Botones con el corte diagonal de la liga */
body.rd .btn {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border-radius: 0;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
/* Los que no deben cortarse: los pequeños, los fantasma y los del chat */
body.rd .btn--sm,
body.rd .btn--ghost,
body.rd .btn--block,
body.rd .btn--icon { clip-path: none; }
body.rd .btn--ghost { border-radius: 3px; }

/* Números tabulares donde hay cifras */
body.rd .pts,
body.rd .tnum,
body.rd .stat b { font-variant-numeric: tabular-nums; }

/* ============================================================
   PÁGINAS INTERIORES — CABECERA BROADCAST
   Las 14 interiores comparten la misma estructura (.page-head con
   kicker + h1 + intro), así que se rehace solo con CSS.
   ============================================================ */
body.rd .page-head {
  position: relative;
  padding: 90px 0 60px;
  overflow: hidden;
  isolation: isolate;
}
/* Resplandor naranja detrás del titular */
body.rd .page-head::after {
  content: "";
  position: absolute;
  top: -20%;
  left: 4%;
  width: 620px;
  height: 420px;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(var(--s2-acento-rgb), .16), transparent);
  pointer-events: none;
}
body.rd .page-head h1 {
  margin: 0;
  font-family: "Saira Condensed", sans-serif;
  font-weight: 900;
  font-size: clamp(52px, 6vw, 84px);
  line-height: .95;
  text-transform: uppercase;
  letter-spacing: -.01em;
}
body.rd .page-head > .container > p:not(.kicker) {
  max-width: 640px;
  margin: 18px 0 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--texto-suave, #b2a8cc);
}
body.rd .page-head .kicker { margin-bottom: 16px; }
@media (max-width: 720px) {
  body.rd .page-head { padding: 56px 0 40px; }
  body.rd .page-head::after { width: 380px; height: 300px; }
}

/* Enlaces del sistema nuevo: SOLO dentro del texto de contenido.
   Una regla amplia con :not() ganaba en especificidad al nav y al pie
   y los pintaba de naranja. */
body.rd main p a,
body.rd main li a,
body.rd main dd a,
body.rd .faq-a a,
body.rd .rule-block a,
body.rd .page-head a { color: var(--s2-acento-claro); }
body.rd main p a:hover,
body.rd main li a:hover,
body.rd .faq-a a:hover,
body.rd .rule-block a:hover { color: #ffa75c; }

/* ============================================================
   RANKING
   ============================================================ */
body.rd .rank-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--borde, rgba(255, 255, 255, .09));
  border: 1px solid var(--borde, rgba(255, 255, 255, .09));
  margin-bottom: 32px;
}
@media (max-width: 640px) { body.rd .rank-stats { grid-template-columns: 1fr; } }
body.rd .rank-stats .rd-stat { background: #0e0d0c; padding: 20px 22px; }
/* Dúos no tiene "Plazas en el Major": solo dos cifras, no tres. */
body.rd .rank-stats--2 { grid-template-columns: repeat(2, 1fr); }

body.rd .rk-v, body.rd .rk-d, body.rd .rk-pj {
  text-align: right;
  font-family: "Chakra Petch", sans-serif;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
body.rd .rk-v { color: #4ade80; }
body.rd .rk-d { color: #f87171; }
body.rd .rk-pj { color: var(--texto-mute, #8a80a6); }

/* Corte del Major */
body.rd .rk-corte {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 24px;
  background: rgba(var(--s2-acento-rgb), .05);
  border-top: 1px solid rgba(var(--s2-acento-rgb), .45);
  border-bottom: 1px solid rgba(var(--s2-acento-rgb), .45);
  font-family: "Chakra Petch", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--s2-acento-claro);
  justify-content: center;
}
body.rd .rk-fila--fuera { opacity: .55; }

/* Estado vacío */
body.rd .rk-vacio-grande {
  padding: 64px 24px;
  text-align: center;
  border: 1px solid var(--borde, rgba(255, 255, 255, .09));
  background: var(--card-bg, rgba(255, 255, 255, .02));
}
body.rd .rk-vacio-grande h3 {
  margin: 0 0 8px;
  font-family: "Saira Condensed", sans-serif;
  font-weight: 800;
  font-size: clamp(24px, 3vw, 34px);
  text-transform: uppercase;
  color: var(--texto, #f3effb);
}
body.rd .rk-vacio-grande p { margin: 0 0 22px; color: var(--texto-suave, #b2a8cc); }

/* ============================================================
   RETOS (xp-matches.html)
   ============================================================ */

/* Tira de formato: nada de caja, borde izquierdo naranja */
body.rd .banner,
body.rd .aviso {
  border: 0;
  border-left: 3px solid var(--naranja, var(--s2-acento));
  border-radius: 0;
  background: rgba(var(--s2-acento-rgb), .06);
  padding: 14px 18px;
}
body.rd .banner > p,
body.rd .aviso p {
  font-family: "Chakra Petch", sans-serif;
  font-size: 12px;
  letter-spacing: 1.6px;
  line-height: 1.7;
  text-transform: uppercase;
  color: #d9d2c6;
}
body.rd .banner > p b,
body.rd .aviso p b { color: var(--s2-acento-claro); }
body.rd .banner > svg,
body.rd .aviso > svg { color: var(--naranja, var(--s2-acento)); flex-shrink: 0; }

/* Formulario de publicar reto: card con barrita naranja arriba */
body.rd #post-box {
  position: relative;
  border-radius: 0;
  background: var(--card-bg, linear-gradient(170deg, rgba(255,255,255,.04), rgba(255,255,255,.01)));
}
body.rd #post-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 46px;
  height: 3px;
  background: var(--naranja, var(--s2-acento));
}
body.rd #post-box input,
body.rd #post-box select,
body.rd #post-box textarea,
body.rd .form-card input,
body.rd .form-card select {
  background: rgba(255, 255, 255, .04);
  border-color: var(--borde, rgba(255, 255, 255, .09));
  border-radius: 0;
}
body.rd #post-box input:focus,
body.rd #post-box select:focus,
body.rd .form-card input:focus,
body.rd .form-card select:focus {
  border-color: var(--naranja, var(--s2-acento));
  box-shadow: 0 0 0 1px rgba(var(--s2-acento-rgb), .35);
}

/* Pestañas */
body.rd .tabs [role="tab"],
body.rd .tabs button {
  font-family: "Saira Condensed", sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--texto-mute, #8a80a6);
  border-bottom: 3px solid transparent;
  border-radius: 0;
  transition: color .2s, border-color .2s;
}
body.rd .tabs [role="tab"]:hover,
body.rd .tabs button:hover { color: var(--texto, #f3effb); }
body.rd .tabs [aria-selected="true"],
body.rd .tabs .is-active {
  color: var(--s2-acento-claro);
  border-bottom-color: var(--naranja, var(--s2-acento));
}

/* Tarjeta de reto */
body.rd .challenge-card {
  border-radius: 0;
  clip-path: none;
  border: 1px solid var(--borde, rgba(255, 255, 255, .09));
  background: var(--card-bg, rgba(255, 255, 255, .02));
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
body.rd .challenge-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--s2-acento-rgb), .55);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .8);
}
/* Rombo con la interrogación */
body.rd .mystery-logo {
  width: 58px;
  height: 58px;
  border-radius: 0;
  transform: rotate(45deg);
  border: 2px dashed rgba(var(--s2-acento-rgb), .55);
  background: transparent;
  display: grid;
  place-items: center;
  font-size: 0;
  flex-shrink: 0;
}
body.rd .mystery-logo::before {
  content: "?";
  transform: rotate(-45deg);
  font-family: "Saira Condensed", sans-serif;
  font-weight: 900;
  font-size: 30px;
  color: var(--naranja, var(--s2-acento));
}
body.rd .challenge-card__head { gap: 18px; align-items: center; }
body.rd .challenge-card h3 {
  font-family: "Saira Condensed", sans-serif;
  font-weight: 800;
  font-size: 22px;
  text-transform: uppercase;
  margin: 0 0 2px;
}
body.rd .challenge-card .sub,
body.rd .challenge-card .meta-rows {
  font-family: "Chakra Petch", sans-serif;
  font-size: 12px;
  letter-spacing: 1.4px;
  color: var(--texto-suave, #b2a8cc);
}
body.rd .challenge-card .meta-rows li { border: 0; }

/* Chips de XP */
body.rd .challenge-card .xp-pill { background: none; border: 0; padding: 0; display: inline-flex; gap: 6px; }
body.rd .challenge-card .xp-pill .up,
body.rd .challenge-card .xp-pill .down {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1px;
  padding: 4px 9px;
  border: 1px solid;
}
body.rd .challenge-card .xp-pill .up { color: #4ade80; border-color: rgba(74, 222, 128, .45); background: rgba(74, 222, 128, .12); }
body.rd .challenge-card .xp-pill .down { color: #f87171; border-color: rgba(248, 113, 113, .45); background: rgba(248, 113, 113, .12); }
body.rd .challenge-card .xp-pill .sep { display: none; }

/* Estado vacío grande, reutilizable */
body.rd .vacio-liga {
  padding: 60px 24px;
  text-align: center;
  border: 1px solid var(--borde, rgba(255, 255, 255, .09));
  background: var(--card-bg, rgba(255, 255, 255, .02));
}
body.rd .vacio-liga__rombo {
  width: 76px;
  height: 76px;
  margin: 0 auto 26px;
  display: grid;
  place-items: center;
  transform: rotate(45deg);
  border: 2px dashed rgba(var(--s2-acento-rgb), .5);
}
body.rd .vacio-liga__rombo span {
  transform: rotate(-45deg);
  font-family: "Saira Condensed", sans-serif;
  font-weight: 900;
  font-size: 36px;
  color: var(--naranja, var(--s2-acento));
}
body.rd .vacio-liga h3 {
  margin: 0 0 8px;
  font-family: "Saira Condensed", sans-serif;
  font-weight: 800;
  font-size: clamp(22px, 3vw, 32px);
  text-transform: uppercase;
}
body.rd .vacio-liga p { margin: 0 0 22px; color: var(--texto-suave, #b2a8cc); }

/* ============================================================
   REGLAS
   ============================================================ */
body.rd .rules-nav a,
body.rd .rule-index a {
  font-family: "Chakra Petch", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-left: 3px solid transparent;
  border-radius: 0;
  transition: all .2s;
}
body.rd .rules-nav a.is-active,
body.rd .rule-index a.is-active,
body.rd .rules-nav a:hover,
body.rd .rule-index a:hover {
  border-left-color: var(--naranja, var(--s2-acento));
  background: rgba(var(--s2-acento-rgb), .08);
  color: var(--s2-acento-claro);
}
body.rd .rule-block h2 {
  font-family: "Saira Condensed", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}
body.rd .rule-block ol { counter-reset: regla; list-style: none; padding-left: 0; }
body.rd .rule-block ol > li {
  counter-increment: regla;
  position: relative;
  padding: 14px 0 14px 42px;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  font-size: 15px;
  line-height: 1.7;
}
body.rd .rule-block ol > li:last-child { border-bottom: 0; }
body.rd .rule-block ol > li::before {
  content: counter(regla);
  position: absolute;
  left: 0;
  top: 12px;
  font-family: "Saira Condensed", sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: var(--naranja, var(--s2-acento));
}
body.rd .rule-block ul > li { line-height: 1.7; }

/* Permitido / prohibido */
body.rd .ok-list,
body.rd .no-list {
  border-radius: 0;
  padding: 22px;
}
body.rd .ok-list { border: 1px solid rgba(74, 222, 128, .4); background: rgba(74, 222, 128, .04); }
body.rd .no-list { border: 1px solid rgba(248, 113, 113, .4); background: rgba(248, 113, 113, .04); }

/* Avisos de sección */
body.rd .callout,
body.rd .nota-regla {
  border: 0;
  border-left: 3px solid var(--naranja, var(--s2-acento));
  border-radius: 0;
  background: rgba(var(--s2-acento-rgb), .06);
}

/* ============================================================
   CALENDARIO
   ============================================================ */
body.rd .cal-list { position: relative; }
body.rd .filtro-chip {
  font-family: "Chakra Petch", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 0;
  border: 1px solid var(--borde, rgba(255, 255, 255, .09));
  transition: all .2s;
}
body.rd .filtro-chip.is-on {
  background: var(--naranja, var(--s2-acento));
  border-color: var(--naranja, var(--s2-acento));
  color: #ffffff;
}
body.rd .filtro-chip:not(.is-on):hover { border-color: rgba(var(--s2-acento-rgb), .55); color: var(--s2-acento-claro); }

/* Los chips ya dicen que son XP: la palabra suelta sobraba */
body.rd .challenge-card .xp-pill { font-size: 0; }
body.rd .challenge-card .xp-pill .up,
body.rd .challenge-card .xp-pill .down { font-size: 12px; }

/* ============================================================
   PULIDO — REGLA DE ORO TIPOGRÁFICA
   Mayúsculas + letter-spacing SOLO en etiquetas de 1–4 palabras.
   Los párrafos, en Barlow normal. (El lote anterior puso el banner
   de Retos entero en versales espaciadas: ilegible.)
   ============================================================ */
body.rd .banner > p,
body.rd .aviso p {
  font-family: "Barlow", system-ui, sans-serif;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 1.65;
  text-transform: none;
  color: var(--texto-suave, #b2a8cc);
}
body.rd .pts, body.rd .tnum, body.rd .rd-stat b,
body.rd .rk-xp, body.rd .rk-v, body.rd .rk-d, body.rd .rk-pj,
body.rd td, body.rd th { font-variant-numeric: tabular-nums; }

::selection { background: rgba(var(--s2-acento-rgb), .35); }
body.rd :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--naranja, var(--s2-acento));
  outline-offset: 2px;
}

/* ============================================================
   RETOS — banners con jerarquía
   ============================================================ */
/* El de formato: informativo, discreto, sin fondo */
body.rd .banner {
  background: none;
  border: 0;
  border-left: 3px solid var(--naranja, var(--s2-acento));
  padding: 4px 0 4px 14px;
  align-items: baseline;
  gap: 10px;
}
body.rd .banner > svg { display: none; }
body.rd .banner > p b {
  font-family: "Chakra Petch", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--s2-acento-claro);
  margin-right: 6px;
}

/* El accionable sí lleva fondo */
body.rd .aviso {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: rgba(var(--s2-acento-rgb), .06);
  border: 0;
  border-left: 3px solid var(--naranja, var(--s2-acento));
  padding: 16px 18px;
}
body.rd .aviso p { flex: 1; min-width: 260px; margin: 0; }
body.rd .aviso p b { color: var(--texto, #f3effb); }

/* ============================================================
   RANKING — estadísticas sin caja
   ============================================================ */
body.rd .rank-stats {
  border: 0;
  border-top: 1px solid var(--borde, rgba(255, 255, 255, .09));
  background: none;
  gap: 0;
  margin-bottom: 40px;
}
body.rd .rank-stats .rd-stat {
  background: none;
  padding: 22px 26px;
  border-left: 1px solid var(--borde, rgba(255, 255, 255, .09));
}
body.rd .rank-stats .rd-stat:first-child { border-left: 0; padding-left: 0; }
body.rd .rank-stats .rd-stat b { font-size: 44px; }
@media (max-width: 640px) {
  body.rd .rank-stats .rd-stat { border-left: 0; padding: 16px 0; border-top: 1px solid var(--borde); }
  body.rd .rank-stats .rd-stat:first-child { border-top: 0; }
}

/* ============================================================
   RANKING — tabla
   ============================================================ */
body.rd .rk-tabla--full .rk-fila {
  grid-template-columns: 52px minmax(0, 1fr) 64px 48px 48px 96px;
}
body.rd .rk-tabla--full .rk-head span:nth-child(n+3) { text-align: right; }

/* Movil: tiene que ir DESPUES de la regla de arriba, no antes. Con las medidas
   de escritorio las columnas fijas suman 406 px y en una pantalla de 394 px la
   del equipo colapsaba a 0: el escudo, el tag y el nombre se salian encima de
   PJ. Aqui se estrechan las fijas para que al equipo le quede sitio de sobra. */
@media (max-width: 720px) {
  body.rd .rk-tabla--full .rk-fila {
    grid-template-columns: 30px minmax(0, 1fr) 28px 28px 28px 54px;
    padding: 13px 12px;
    gap: 4px;
    font-size: 13px;
  }
  body.rd .rk-tabla--full .rk-xp { font-size: 16px; }
  body.rd .rk-pos { font-size: 18px; }

  /* Con el escudo delante, el tag sobra y se come el sitio del nombre: sin él
     los nombres cortados bajan de 16 de 20 a 3. Solo se quita donde hay
     escudo — quien todavía no lo ha mandado conserva su tag para no quedarse
     sin nada con lo que reconocerlo. Si el navegador no entiende :has(), el
     tag simplemente se queda: se ve como hasta ahora, sin romper nada. */
  body.rd .rk-equipo:has(.rk-escudo img) .rk-tag { display: none; }

  /* Y al revés: quien no tiene escudo no gasta el hueco que se le reserva en
     escritorio para alinear. Así cada fila enseña UN distintivo —escudo o
     tag— y el nombre se queda con todo lo demás. En una pantalla de 320 px
     ese hueco vacío más el tag no cabían y se desbordaban sobre PJ. */
  body.rd .rk-escudo:empty { display: none; }

  /* El tag va más justo: con el margen de escritorio, el más largo (DEMON)
     se pasaba 1 px sobre PJ en pantallas de 320 px. */
  body.rd .rk-tag { padding: 4px 6px; margin-right: 8px; letter-spacing: .5px; }
}

/* Líder: fondo degradado y barra lateral */
/* El lider del ranking: la fila ENTERA en naranja, no solo el recuadro del
   tag. Con el fondo naranja el texto claro no se leeria, asi que todo el
   contenido de la fila pasa a tinta oscura. */
/* El primero NO lleva fondo naranja: la fila se ve como las demas. Que va
   en cabeza ya lo dicen el "01" y su posicion en la tabla; pintarla entera
   competia con el verde de tu propio equipo, que es lo que de verdad hay
   que localizar de un vistazo. */
body.rd .rk-pos { color: var(--texto-mute, #8a80a6); }
body.rd .rk-pos--podio { color: var(--naranja, var(--s2-acento)); }

/* V y D en gris mientras valgan 0: en verde/rojo metían ruido */
body.rd .rk-v, body.rd .rk-d { color: var(--texto-mute, #8a80a6); }
body.rd .rk-v--hay { color: #4ade80; }
body.rd .rk-d--hay { color: #f87171; }

/* Nota final como callout */
body.rd .rk-nota {
  margin-top: 28px;
  padding: 14px 0 14px 16px;
  border-left: 3px solid var(--naranja, var(--s2-acento));
  font-size: 14px;
  line-height: 1.7;
  color: var(--texto-suave, #b2a8cc);
}

/* ============================================================
   REGLAS — ancho de lectura y numeración
   ============================================================ */
body.rd .rule-block { max-width: 760px; }
body.rd .rule-block h2 > svg { display: none; }
body.rd .rule-seccion {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  font-family: "Chakra Petch", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--s2-acento-claro);
}
body.rd .rule-seccion::before {
  content: "";
  width: 26px;
  height: 3px;
  background: var(--naranja, var(--s2-acento));
  flex-shrink: 0;
}
/* Nada de grid en el <li>: convertiría cada <b> del texto en una celda
   propia y despedazaría la frase. El número va en absoluto sobre un
   padding izquierdo, que da el mismo resultado visual. */
body.rd .rule-block ol > li {
  position: relative;
  padding: 16px 0 16px 46px;
}
body.rd .rule-block ol > li::before {
  position: absolute;
  left: 0;
  top: 14px;
  width: 34px;
  text-align: left;
  font-size: 22px;
  line-height: 1.5;
}
body.rd .rules-nav a, body.rd .rule-index a { transition: all .25s; }

/* Barra de progreso de lectura */
.rd-progreso {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--naranja, var(--s2-acento));
  z-index: 200;
  pointer-events: none;
  transition: width .1s linear;
}

/* ============================================================
   RITMO — contenedor y espaciado
   ============================================================ */
body.rd .container { max-width: 1240px; padding-inline: 40px; }
@media (max-width: 720px) { body.rd .container { padding-inline: 20px; } }

/* ============================================================
   RETOS — tablón a dos columnas
   ============================================================ */
body.rd .board-split {
  display: grid;
  grid-template-columns: minmax(0, 880px) 300px;
  gap: 32px;
  align-items: start;
}
@media (max-width: 1080px) {
  body.rd .board-split { grid-template-columns: 1fr; }
  body.rd .board-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
}
body.rd .board-side { position: sticky; top: 88px; display: grid; gap: 16px; }
@media (max-width: 1080px) { body.rd .board-side { position: static; } }

body.rd .side-box {
  border: 1px solid var(--borde, rgba(255, 255, 255, .09));
  background: var(--card-bg, rgba(255, 255, 255, .02));
  padding: 18px 20px;
}
body.rd .side-t {
  margin: 0 0 12px;
  font-family: "Chakra Petch", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--texto-mute, #8a80a6);
}
body.rd .side-equipo { display: flex; align-items: center; text-decoration: none; margin-bottom: 8px; }
body.rd .side-equipo .rk-nombre {
  font-family: "Saira Condensed", sans-serif;
  font-weight: 700;
  font-size: 19px;
  text-transform: uppercase;
  color: var(--texto, #f3effb);
}
body.rd .side-torneo {
  display: block;
  margin-bottom: 6px;
  font-family: "Saira Condensed", sans-serif;
  font-weight: 700;
  font-size: 19px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--texto, #f3effb);
}
body.rd .side-torneo:hover, body.rd .side-equipo:hover .rk-nombre { color: var(--s2-acento-claro); }
body.rd .side-dato { margin: 0 0 14px; font-size: 13.5px; line-height: 1.6; color: var(--texto-suave, #b2a8cc); }
body.rd .side-box .btn-liga { font-size: 15px; padding: 11px 22px; }

body.rd .side-top { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
body.rd .side-top li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  font-size: 14px;
}
body.rd .side-top b {
  font-family: "Saira Condensed", sans-serif;
  font-weight: 900;
  font-size: 17px;
  color: var(--texto-mute, #8a80a6);
}
body.rd .side-top li:first-child b { color: var(--naranja, var(--s2-acento)); }
body.rd .side-top a {
  color: var(--texto, #f3effb);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.rd .side-top a:hover { color: var(--s2-acento-claro); }
body.rd .side-top span {
  font-family: "Chakra Petch", sans-serif;
  font-size: 12px;
  color: var(--s2-acento-claro);
  font-variant-numeric: tabular-nums;
}

/* Cierre de sección cuando hay pocos retos */
body.rd .board-cierre {
  margin-top: 22px;
  padding: 34px 24px;
  text-align: center;
  border: 1px dashed rgba(var(--s2-acento-rgb), .4);
}
body.rd .board-cierre p {
  margin: 0 0 16px;
  font-family: "Saira Condensed", sans-serif;
  font-weight: 700;
  font-size: 21px;
  text-transform: uppercase;
  color: var(--texto, #f3effb);
}

/* ============================================================
   RETOS — tarjeta
   ============================================================ */
body.rd .challenge-card { position: relative; }
body.rd .chip-abierto {
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid rgba(74, 222, 128, .4);
  background: rgba(74, 222, 128, .1);
  font-family: "Chakra Petch", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #4ade80;
}
body.rd .chip-abierto i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { body.rd .chip-abierto i { animation: none; } }

/* Brillo que cruza el rombo */
body.rd .mystery-logo { position: relative; overflow: hidden; }
body.rd .mystery-logo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 177, 51, .3) 50%, transparent 60%);
  animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(200%); }
}
@media (prefers-reduced-motion: reduce) { body.rd .mystery-logo::after { animation: none; } }

/* Píldora de XP segmentada: +10 | −5 | XP */
body.rd .challenge-card .xp-pill {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--borde, rgba(255, 255, 255, .09));
  background: rgba(255, 255, 255, .03);
  font-size: 0;
}
body.rd .challenge-card .xp-pill .up,
body.rd .challenge-card .xp-pill .down {
  border: 0;
  background: none;
  padding: 6px 12px;
  font-size: 13px;
}
body.rd .challenge-card .xp-pill .up { color: #4ade80; }
body.rd .challenge-card .xp-pill .down { color: #f87171; border-left: 1px solid var(--borde); }
body.rd .challenge-card .xp-pill .sep { display: none; }
body.rd .challenge-card .xp-pill::after {
  content: "XP";
  padding: 6px 12px;
  border-left: 1px solid var(--borde, rgba(255, 255, 255, .09));
  font-family: "Chakra Petch", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--texto-mute, #8a80a6);
  display: flex;
  align-items: center;
}

/* Pie de la tarjeta: chips a la izquierda, acción a la derecha */
body.rd .challenge-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
body.rd .challenge-card__foot .why-no { margin: 0; font-size: 13.5px; }

/* El banner accionable (avisos con .banner--warn) sí destaca: es el que
   pide algo al jugador. El de formato es solo informativo. */
body.rd .banner--warn {
  background: rgba(var(--s2-acento-rgb), .07);
  padding: 15px 18px;
  align-items: center;
}
body.rd .banner--warn > p b { color: var(--texto, #f3effb); font-family: inherit; font-size: inherit; letter-spacing: 0; text-transform: none; }
body.rd .banner--warn > p a { color: var(--s2-acento-claro); font-weight: 600; }


/* Mientras se comprueba la sesión guardada, el botón de la barra se
   reserva el hueco pero no muestra "Acceder": evita el parpadeo al
   navegar entre páginas teniendo sesión iniciada. */
/* Mientras arranca la capa de datos ya sabemos (por el localStorage) que hay
   sesión, aunque todavía no quién. Ocultamos las dos piezas que delatarían lo
   contrario: el botón "Acceder" y el enlace "Inscríbete". El de la cuenta va
   con visibility para no mover la barra; el de inscribirse con display:none,
   que es justo como acabará al terminar initNav, así no hay salto. */
.cargando-sesion #nav-account { visibility: hidden; }
.cargando-sesion #nav-inscribete { display: none; }

/* Una notificación sin enlace es un botón: que se vea igual que el resto */
body.rd button.notif {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
}

/* La estrella del top 16 va junto al número de posición: pegada al nombre
   cambiaba de altura según lo largo que fuera y quedaba desalineada. */
body.rd .rk-pos {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
body.rd .rk-pos .estrella-major { margin-left: 0; }
body.rd .rk-pos .estrella-major svg { width: 12px; height: 12px; }

/* El corte diagonal de las tarjetas viejas no encaja con el sistema nuevo:
   deja una esquina mordida que parece un fallo de render. Además su
   clip-path recorta desplegables. Fuera en todo el sitio. */
body.rd .card--cut { clip-path: none; }

/* Marca de agua del logo en la cabecera de cada página */
body.rd .page-head::before {
  content: "";
  position: absolute;
  right: -50px;
  top: 50%;
  transform: translateY(-50%);
  width: 360px;
  height: 360px;
  z-index: -1;
  background: url("../assets/img/s2/acl-logo-morado.png") no-repeat center / contain;
  opacity: .05;
  pointer-events: none;
}
@media (max-width: 900px) {
  body.rd .page-head::before { width: 220px; height: 220px; right: -60px; opacity: .04; }
}

/* En móvil se oculta PJ: la cabecera debe ocultar su celda también, o las
   columnas se desplazan y XP se sale del cuadro. */
@media (max-width: 720px) {
  body.rd .rk-tabla--full .rk-head span { font-size: 9px; letter-spacing: 1px; }
}

/* Botón para ampliar el ranking por tramos */
body.rd .rk-mas {
  display: block;
  width: 100%;
  padding: 16px;
  background: none;
  border: 0;
  border-top: 1px solid var(--borde, rgba(255, 255, 255, .09));
  color: var(--s2-acento-claro);
  font-family: "Chakra Petch", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s;
}
body.rd .rk-mas:hover { background: rgba(var(--s2-acento-rgb), .06); }
body.rd .rk-mas span { color: var(--texto-mute, #8a80a6); letter-spacing: 1px; }

/* Las estadísticas ahora van bajo la tabla */
body.rd .rank-stats { margin: 28px 0 0; }

/* ============================================================
   CLASIFICACIÓN ARENA — la tabla partida por rangos
   Es la misma tabla que el ranking de escuadrones (.rk-tabla--full) con
   una cabecera intercalada cada vez que cambia el rango. El color de cada
   cabecera sale de --rg, la variable que ya definen las clases
   .rango--<clase> más arriba, así que aquí no se repite ningún color: si
   algún día se cambia el tono de Leyenda, se cambia en un solo sitio.
   ============================================================ */
body.rd .rkg {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 24px 13px 21px;
  border-left: 3px solid var(--rg, #9AA3AF);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .025);
}
/* Sin borde arriba a propósito: lo que va justo encima es siempre otra fila
   de la tabla, y esa ya cierra con su propia raya. Con las dos salía un
   hilo doble que parecía un fallo de render. */
body.rd .rkg__img {
  width: 40px;
  height: 40px;
  flex: none;
  object-fit: contain;
}
body.rd .rkg__txt { min-width: 0; }
body.rd .rkg__n {
  margin: 0;
  font-family: "Saira Condensed", sans-serif;
  font-weight: 900;
  font-size: 21px;
  line-height: 1;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--rg, #9AA3AF);
}
body.rd .rkg__x {
  margin: 5px 0 0;
  font-family: "Chakra Petch", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--texto-mute, #8a80a6);
}
body.rd .rkg__c {
  margin-left: auto;
  font-family: "Chakra Petch", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--texto-mute, #8a80a6);
  white-space: nowrap;
}
/* El Olimpo no es un tramo de XP sino los diez primeros: se le nota el sitio */
body.rd .rkg.rango--olimpo { background: rgba(235, 220, 168, .06); }

/* El nick ocupa la misma columna que el nombre del equipo en el otro ranking.
   No lleva escudo —un jugador no tiene— pero sí el tag de su escuadrón si
   está en uno, que es con lo que se le reconoce. */
body.rd .rk-jugador {
  display: flex;
  align-items: center;
  min-width: 0;
  color: var(--texto);
}

@media (max-width: 720px) {
  body.rd .rkg { padding: 11px 12px 11px 9px; gap: 10px; }
  body.rd .rkg__img { width: 30px; height: 30px; }
  body.rd .rkg__n { font-size: 17px; }
  body.rd .rkg__x { letter-spacing: 1.2px; }
  /* El recuento es lo primero que sobra cuando no hay ancho */
  body.rd .rkg__c { display: none; }
}

/* ---------- Tu sitio en la clasificación de Arena ----------
   La tabla se abre por tu puesto, no por el primero, así que tu fila tiene
   que cantar sin buscarla. En el ranking de escuadrones basta con teñir el
   tag porque todos llevan uno; aquí hay gente sin equipo, así que el aviso
   va en la fila entera. Va dentro de #arena-clas-root para no tocar el otro
   ranking, que se queda como estaba. */
body.rd #arena-clas-root .rk-fila--mio {
  background: rgba(61, 220, 132, .07);
  box-shadow: inset 3px 0 0 var(--win, #3DDC84);
}
body.rd #arena-clas-root a.rk-fila--mio:hover { background: rgba(61, 220, 132, .12); }

/* La barra de encima de la tabla: tu puesto a la izquierda, el salto al top
   a la derecha. */
body.rd .clas-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}
body.rd .clas-tu {
  margin: 0;
  font-family: "Chakra Petch", sans-serif;
  font-size: 13px;
  letter-spacing: .6px;
  color: var(--texto-suave, #b2a8cc);
}
body.rd .clas-tu b { color: var(--texto, #f3effb); }
/* Aquí no hace falta el tamaño de un botón de portada: es un atajo, no un CTA */
body.rd .clas-barra .btn-liga { font-size: 14px; padding: 10px 22px; }

/* El mismo botón de "Mostrar más" pero mirando hacia arriba: cierra la tabla
   por su borde de arriba en vez del de abajo. */
body.rd .rk-mas--arriba {
  border-top: 0;
  border-bottom: 1px solid var(--borde, rgba(255, 255, 255, .09));
}

/* La barra de navegación es pegajosa: sin esto, saltar a una fila la deja
   escondida detrás del menú. */
body.rd #arena-clas-root .rk-tabla,
body.rd #arena-clas-root .rk-fila {
  scroll-margin-top: calc(var(--nav-h, 64px) + 18px);
}

@media (max-width: 560px) {
  body.rd .clas-barra { gap: 10px; }
  body.rd .clas-barra .btn-liga { width: 100%; text-align: center; }
}

/* ============================================================
   PÁGINA DE TORNEO Y DE ENFRENTAMIENTO
   ============================================================ */
body.rd .t-detalle { margin-bottom: 26px; }
body.rd .t-volver {
  display: inline-block;
  margin-bottom: 20px;
  font-family: "Chakra Petch", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--texto-mute, #8a80a6);
  text-decoration: none;
}
body.rd .t-volver:hover { color: var(--s2-acento-claro); }
body.rd .t-detalle h1 {
  margin: 0;
  font-family: "Saira Condensed", sans-serif;
  font-weight: 900;
  font-size: clamp(40px, 5vw, 68px);
  line-height: .98;
  text-transform: uppercase;
}
body.rd .t-detalle__meta { margin: 12px 0 0; color: var(--texto-suave, #b2a8cc); font-size: 15px; }

body.rd .t-campeon {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  padding: 18px 22px;
  border: 1px solid rgba(var(--s2-acento-rgb), .4);
  background: linear-gradient(90deg, rgba(var(--s2-acento-rgb), .1), transparent 70%);
}
body.rd .t-campeon svg { width: 34px; height: 34px; color: #F5C43A; flex-shrink: 0; }
body.rd .t-campeon--mini svg { width: 26px; height: 26px; }
body.rd .t-campeon span {
  display: block;
  font-family: "Chakra Petch", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--texto-mute, #8a80a6);
}
body.rd .t-campeon b {
  font-family: "Saira Condensed", sans-serif;
  font-weight: 800;
  font-size: 22px;
  text-transform: uppercase;
}
body.rd .t-campeon a { color: inherit; text-decoration: none; }
body.rd .t-campeon a:hover { color: var(--s2-acento-claro); }

/* Botón para entrar al cruce desde el cuadro */
body.rd .b-ver {
  display: block;
  padding: 9px 14px;
  border-top: 1px solid var(--borde, rgba(255, 255, 255, .09));
  font-family: "Chakra Petch", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--texto-mute, #8a80a6);
  text-decoration: none;
  transition: color .2s, background .2s;
}
body.rd .b-ver:hover { color: var(--s2-acento-claro); background: rgba(var(--s2-acento-rgb), .06); }

body.rd .team-panel--gana { border-color: rgba(var(--s2-acento-rgb), .45); }
body.rd .grid--2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 860px) { body.rd .grid--2 { grid-template-columns: 1fr; } }

/* El botón de "Ir al torneo" se ancla abajo a la derecha, dejando libre
   la esquina donde está la marca de agua del logo. */
@media (min-width: 900px) {
  body.rd .t-card__body { position: relative; padding-bottom: 26px; }
  body.rd .t-card__actions:has(a[href^="torneo.html"]) {
    position: absolute;
    right: 132px;
    bottom: 22px;
    margin: 0;
  }
}

/* ============================================================
   CHAT GLOBAL DE LA COMUNIDAD (js/chat-global.js)
   Burbuja flotante + panel. Reutiliza .chat-drawer y .chat-msg del
   chat de partidos; aquí solo va lo propio de la sala general.
   ============================================================ */
.chatg-burbuja {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 290;                 /* por debajo del chat de partido (300) */
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--primary);
  color: var(--on-primary);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-card), var(--glow);
  transition: transform var(--t-fast), background var(--t-fast);
}
.chatg-burbuja:hover { background: var(--primary-hover); transform: translateY(-2px); }
.chatg-burbuja:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.chatg-burbuja svg { width: 24px; height: 24px; }

.chatg-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--loss);
  color: #fff;
  font: 700 11px/20px var(--font-body);
  text-align: center;
  border: 2px solid var(--bg);
}

.chatg-panel { z-index: 295; }
.chatg-panel .chat-msgs { padding-bottom: 8px; }

.chatg-hora {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.chatg-texto { overflow-wrap: anywhere; }

.chatg-borrar {
  background: none;
  border: none;
  color: var(--text-3);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 2px;
  margin-left: 6px;
  cursor: pointer;
}
.chatg-borrar:hover { color: var(--loss); }

.chatg-pie {
  padding: 8px 16px;
  font-size: 0.82rem;
  color: var(--primary);
  border-top: 1px solid var(--border);
  background: var(--primary-dim);
}

@media (max-width: 600px) {
  .chatg-burbuja { right: 14px; bottom: 14px; width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .chatg-burbuja { transition: none; }
  .chatg-burbuja:hover { transform: none; }
}

/* Silenciados del chat global (js/chat-global.js) */
.chatg-mudo {
  background: none;
  border: none;
  padding: 0 2px;
  margin-left: 6px;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.65;
}
.chatg-mudo:hover { opacity: 1; }
.chip--mudo {
  background: var(--loss-dim) !important;
  color: var(--loss) !important;
  border-color: var(--loss) !important;
}

/* ---- Inscripción por alineaciones (torneos tipo 3v3 Variante) ---- */
.t-alin-form { border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-2); padding: 16px; margin-top: 14px; }
.t-alin-jugadores { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.t-alin-jugadores label { display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 6px 8px; border-radius: 3px; }
.t-alin-jugadores label:hover { background: rgba(255,255,255,.03); }
.t-alin-jugadores label.ocupado { cursor: not-allowed; }
.t-mis-alin { display: grid; gap: 8px; margin: 12px 0; }
.t-alin { border-left: 2px solid var(--primary); padding: 6px 0 6px 10px; font-size: 0.9rem; }
.t-alin-nombre { margin-top: 14px; display: grid; gap: 6px; }
.t-alin-nombre input {
  width: 100%; padding: 10px 12px; background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  color: var(--text); font: 500 0.95rem var(--font-body);
}
.t-alin-nombre input:focus { outline: none; border-color: var(--primary); }
.t-inscritos__jug { display: block; font-size: 0.78rem; color: var(--text-3);
  margin-top: 2px; font-weight: 400; }

/* ---------- Vitrina (trofeos con contador, perfil y equipo) ---------- */
.vit-tabs { display: flex; gap: 10px; margin: 26px 0 18px; }
.vit-tab {
  flex: 1; padding: 13px 18px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text-2); font: 700 0.86rem var(--font-body);
  letter-spacing: 0.14em; text-transform: uppercase; text-align: center;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.vit-tab:hover { border-color: var(--primary); color: var(--text); }
.vit-tab.is-on {
  background: var(--primary); border-color: var(--primary);
  color: var(--on-primary, #000);
}
.vit-caja {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: 18px; margin-bottom: 24px;
}
.vit-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 12px;
}
.vit-card {
  position: relative; overflow: hidden; text-align: center;
  border: 1px solid var(--border); border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.18));
  padding: 20px 10px 14px; display: flex; flex-direction: column;
  align-items: center; gap: 6px;
}
.vit-card::before {
  content: ""; position: absolute; top: 0; left: 16%; right: 16%; height: 3px;
  background: var(--vit-c); border-radius: 0 0 3px 3px;
}
.vit-card img {
  width: 54px; height: auto;
  filter: drop-shadow(0 0 14px var(--vit-glow));
}
.vit-card__t {
  font: 700 0.72rem var(--font-body); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--vit-c); line-height: 1.35;
  min-height: 2.2em; display: flex; align-items: center;
}
.vit-card__n { font-size: 1.9rem; font-weight: 800; line-height: 1; color: var(--text); }
.vit-card--oro       { --vit-c: #FFD34D; --vit-glow: rgba(255, 211, 77, .35); }
.vit-card--morado    { --vit-c: #B47CFF; --vit-glow: rgba(180, 124, 255, .35); }
.vit-card--plata     { --vit-c: #C9CDD6; --vit-glow: rgba(201, 205, 214, .28); }
.vit-card--minor     { --vit-c: #6EB1FF; --vit-glow: rgba(110, 177, 255, .35); }
.vit-card--inaugural { --vit-c: var(--win); --vit-glow: rgba(61, 220, 132, .32); }
/* Las copas nuevas son JPEG apaisados sobre negro: la fusión "screen" hace
   transparente el fondo y el ancho extra compensa el marco de la foto */
.vit-card--minor img, .vit-card--inaugural img { width: 86px; mix-blend-mode: screen; filter: none; }
.vit-card--cero.vit-card--minor img, .vit-card--cero.vit-card--inaugural img {
  filter: grayscale(1) brightness(0.5); opacity: 1; }
.vit-card--cero::before { opacity: 0.4; }
.vit-card--cero img { filter: grayscale(1) brightness(0.75); opacity: 0.5; }
.vit-card--cero .vit-card__t { color: var(--text-3); opacity: 0.75; }
.vit-card--cero .vit-card__n { opacity: 0.45; }
.vit-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  border-top: 1px solid var(--border); margin-top: 16px; padding-top: 4px;
}
.vit-stat { text-align: center; padding: 12px 6px 4px; }
.vit-stat + .vit-stat { border-left: 1px solid var(--border); }
.vit-stat b { display: block; font-size: 1.7rem; font-weight: 800; line-height: 1.1; }
.vit-stat span {
  display: block; margin-top: 3px; font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3);
}
@media (max-width: 560px) {
  .vit-grid { grid-template-columns: repeat(2, 1fr); }
  .vit-stat b { font-size: 1.4rem; }
}

/* La proporción dentro de una estadística de vitrina: en línea, sin apilarse */
.vit-stat b .ratio { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.vit-stat b .ratio em { font-size: 0.85rem; color: var(--text-3); }

/* ---------- Modo Arena (prototipo) ---------- */
.rango { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px;
  border: 1px solid var(--rg, #9AA3AF); border-radius: 4px; font-size: 0.76rem;
  font-weight: 600; color: var(--rg, #9AA3AF); white-space: nowrap; }
.rango img { width: 22px; height: auto; }
.rango--novato  { --rg: #9AA3AF; }
.rango--amateur { --rg: #C9CDD6; }
.rango--experto { --rg: #F5C43A; }
.rango--elite   { --rg: #B47CFF; }
.rango--leyenda { --rg: #E5484D; }
.rango--dios    { --rg: #F97316; }
.rango--olimpo  { --rg: #EBDCA8; }
/* El halo solo en la chapa pequeña, no en todo lo que lleve el color */
.rango.rango--olimpo { box-shadow: 0 0 12px rgba(235, 220, 168, .25); }
/* Season 2: los colores del cartel nuevo. Entran Héroe (verde) y Zeus
   (plata azulada, el número 1), y Dios pasa del naranja al oro. Experto se
   queda en ámbar para no confundirse con Dios. html.arena-s2 lo pone
   js/app.js con ARENA_S2, así que no depende del tema morado. */
html.arena-s2 .rango--experto { --rg: #F59E0B; }
html.arena-s2 .rango--dios    { --rg: #FACC15; }
.rango--heroe { --rg: #22C55E; }
.rango--zeus  { --rg: #8FC7FF; }
.rango.rango--zeus { box-shadow: 0 0 14px rgba(143, 199, 255, .35); }
body.rd .rkg.rango--zeus { background: rgba(143, 199, 255, .07); }

/* ---------- Rango de Arena en la vitrina ----------
   Reaprovecha las variables --rg de las clases .rango--<rango> de arriba,
   así que el color va solo con el rango que toque. */
.vit-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.vit-head__nota {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-3); white-space: nowrap;
}
.rango-hero {
  display: flex; align-items: center; gap: 18px;
  padding-bottom: 18px; border-bottom: 1px solid var(--border);
}
.rango-hero__img {
  width: 96px; height: 96px; flex: none; object-fit: contain;
}
.rango-hero__k {
  margin: 0 0 4px; font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3);
}
.rango-hero__n {
  margin: 0; font-family: var(--font-display); line-height: 1;
  font-size: clamp(1.6rem, 5vw, 2.3rem); text-transform: uppercase;
  color: var(--rg, var(--text));
}
.rango-hero__xp { margin: 8px 0 0; font-size: 0.9rem; color: var(--text-3); }
.rango-hero__xp b { color: var(--text); font-size: 1.1rem; font-weight: 800; }

/* Lo que llevas recorrido del peldaño actual al siguiente */
.rango-progreso { margin-top: 18px; }
.rango-barra {
  height: 8px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--border);
}
.rango-barra span {
  display: block; height: 100%; border-radius: 999px;
  background: var(--rg, var(--primary));
  transition: width 400ms ease;
}
.rango-barra__pies {
  display: flex; justify-content: space-between; gap: 12px; margin-top: 7px;
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-3);
}
.rango-barra__pies b { color: var(--text-2); }

.rango-escalera { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.rango-paso {
  flex: 1 1 auto; text-align: center; padding: 7px 6px;
  border: 1px solid var(--border); border-radius: 4px;
  background: rgba(255, 255, 255, .02);
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-3);
}
/* Los ya pasados se tiñen de su color, apagados; el actual va encendido */
.rango-paso.is-hecho { color: var(--rg); opacity: 0.6; }
.rango-paso.is-on {
  color: var(--rg); border-color: var(--rg);
  background: rgba(255, 255, 255, .06);
}
.rango-pie { margin: 14px 0 0; font-size: 0.86rem; color: var(--text-2); }

/* El techo del jugador. Solo sale si está por debajo de su mejor momento,
   así que cuando aparece es porque cuenta algo que no se ve en el rango de
   arriba: sobre todo el Olimpo, que no lo dice ningún XP. */
.rango-techo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  font-size: .86rem;
  color: var(--text-3);
}
.rango-techo span { color: var(--text-3); font-size: .82rem; }
.rango-pie b { color: var(--text); }

@media (max-width: 560px) {
  .rango-hero { gap: 14px; }
  .rango-hero__img { width: 72px; height: 72px; }
  .rango-paso { flex: 1 1 28%; }
}

.arena-panel { border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: 18px; margin-bottom: 22px; }
.arena-cuenta { font-size: 2rem; font-weight: 800; color: var(--primary); }
.arena-eq { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0; }
.arena-eq h4 { margin: 0 0 10px; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.82rem; }
.arena-eq ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.arena-eq li { display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  border: 1px solid var(--border); border-radius: 6px; }
.arena-eq li.es-cap { border-color: var(--primary); background: var(--primary-dim); }
/* Suelta, no atada a .arena-eq: la misma chapa se usa ahora en la plantilla
   del lobby, que va en una tabla y no en una lista. */
.cap-tag {
  display: inline-block;
  font-size: 0.62rem;
  border: 1px solid rgba(var(--s2-acento-rgb), .5);
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 4px;
  color: var(--primary);
  font-weight: 700;
  letter-spacing: .06em;
  white-space: nowrap;
  vertical-align: middle;
}
.arena-eq li .end { margin-left: auto; }
@media (max-width: 640px) { .arena-eq { grid-template-columns: 1fr; } }
.arena-sim { border: 1px dashed #B8860B; border-radius: var(--radius); padding: 12px 16px;
  margin-bottom: 22px; background: rgba(184, 134, 11, 0.06); }
.arena-sim p { margin: 0 0 10px; font-size: 0.85rem; color: #D3A94C; }
.arena-eq li svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-3); }
.arena-lobby summary { display: flex; align-items: center; gap: 14px; cursor: pointer;
  list-style: none; user-select: none; }
.arena-lobby summary::-webkit-details-marker { display: none; }
.arena-lobby__t { font-weight: 600; }
.arena-lobby__t b { color: var(--primary); }
.arena-caret { margin-left: auto; color: var(--text-3); transition: transform 160ms ease; }
.arena-lobby[open] .arena-caret { transform: rotate(180deg); }
.arena-lobby summary:hover .arena-caret { color: var(--primary); }

/* ============================================================
   ARENA · SALAS SEGMENTADAS POR RANGO
   La página dejó de ser UNA sala para ser el listado de las que hay
   abiertas. Cada tarjeta lleva su franja de acceso, su ocupación y sus ocho
   huecos; las que no te admiten se quedan en gris, no se esconden.
   ============================================================ */

/* ---------- La chapa de franja: "AMATEUR – LEYENDA" ---------- */
.franja {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border: 1px solid var(--rg, var(--steel));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--rg, var(--steel));
  white-space: nowrap;
}
.franja img { width: 18px; height: auto; flex: none; }
.franja b { font-weight: 700; }

.franjas-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.arena-franjas { margin-top: 30px; }
.arena-franjas h2 { font-size: 1.15rem; }

/* ---------- El botón grande de cola automática ---------- */
/* .rd .kicker es flex sin wrap y este lleva tres cuentas con sus separadores:
   en una pantalla muy estrecha se salian por la derecha. Aqui si tienen que
   poder bajar de linea. */
.arena-buscar .kicker { flex-wrap: wrap; row-gap: 2px; }

.arena-buscar__btn {
  width: 100%;
  min-height: 58px;
  font-size: 1.15rem;
  letter-spacing: 0.1em;
  margin-top: 6px;
}
.arena-buscar__pie {
  margin: 10px 0 0;
  font-size: 0.86rem;
  color: var(--text-3);
  text-align: center;
}
.arena-buscar__dentro {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 14px;
  font-size: 0.92rem;
  color: var(--text-2);
}
.arena-buscar__dentro b { color: var(--text); }

/* ---------- DuoQ (Season 2): el dúo, dentro de "Buscar partida" ---------- */
.duo-tag {
  display: inline-block;
  font-size: 0.62rem;
  border: 1px solid rgba(96, 165, 250, .55);
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 4px;
  color: #93C5FD;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.arena-duo {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--text-2);
}
.arena-duo > .btn { align-self: flex-start; }
.arena-duo__t,
.arena-duo__fila {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
.arena-duo__t .duo-tag { margin-left: 0; }
.arena-duo__nick { color: var(--text); }
.arena-duo__form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.arena-duo__form label { font-size: 0.8rem; color: var(--text-3); width: 100%; }
.arena-duo__form input { flex: 1 1 180px; min-width: 0; }

/* ---------- El listado ---------- */
.salas-lista {
  display: grid;
  /* El min() no sobra: con minmax(320px, 1fr) a secas, en un movil de 320px
     de ancho la tarjeta media 320 y arrancaba tras el margen del contenedor,
     asi que la pagina se iba de lado. Con min(320px, 100%) la tarjeta nunca
     pide mas de lo que hay. */
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 16px;
}
.sala {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 16px;
  display: flex;
  flex-direction: column;
}
.sala.es-mia { border-color: var(--primary); box-shadow: var(--glow); }
/* En gris, no escondida: si la ocultas, el jugador cree que no hay nadie
   jugando; en gris entiende que hay actividad y que a él le toca otra sala. */
.sala.es-bloqueada { opacity: 0.55; filter: grayscale(0.85); }
.sala.es-confirmando { border-style: dashed; }

.sala__head { display: flex; align-items: flex-start; gap: 12px; }
.sala__id { min-width: 0; }
.sala__n {
  margin: 0 0 7px;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.sala__ocup {
  margin-left: auto;
  flex: none;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-3);
}
.sala__ocup b { font-size: 1.5rem; color: var(--primary); }

.sala-huecos {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.sala-hueco {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 4px 8px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  color: var(--text-3);
  font-size: 0.8rem;
}
.sala-hueco svg { width: 15px; height: 15px; flex: none; opacity: 0.5; }
.sala-hueco.es-lleno {
  border-style: solid;
  background: rgba(255, 255, 255, 0.02);
}
.sala-hueco.es-mio { border-color: var(--primary); background: var(--primary-dim); }
/* La chapa de rango dentro del hueco va sin caja propia: dos bordes uno
   dentro de otro en un cuadro de 34px de alto se ve apretado. */
.sala-hueco .rango {
  border: 0;
  background: none;
  padding: 0;
  font-size: 0.78rem;
  min-width: 0;
}
.sala-hueco .rango img { width: 19px; }

.sala__pie {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.sala-nota { font-size: 0.8rem; color: var(--text-3); }
.sala-nota.es-dentro { color: var(--win); }
.sala-bloq {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text-3);
  cursor: not-allowed;
}
.sala-bloq svg { width: 15px; height: 15px; }

/* La franja también en la capa de "partida encontrada": es lo que dice con
   quién vas a jugar, y ahí es donde se acepta. */
.mr-franja { margin: 10px 0 0; }

/* La nota del listado ("Los nombres van ocultos...") es bastante mas larga
   que la otra que usa esta misma chapa ("Se reinician cada temporada"), y el
   nowrap heredado la sacaba de la pantalla en un movil. Aqui se deja partir. */
@media (max-width: 620px) {
  .salas-head .vit-head__nota { white-space: normal; text-align: left; }
}

@media (max-width: 420px) {
  .sala-huecos { grid-template-columns: 1fr; }
}

/* ============================================================
   REESTRUCTURACIÓN: menú por grupos, "Pronto" y Próximamente
   ============================================================ */

/* ---------- Menú de Competición, que va por grupos ---------- */
.nav-drop__menu--grupos { min-width: 268px; }
.nav-drop__grupo {
  padding: 12px 12px 5px;
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary);
}
.nav-drop__grupo:first-child { padding-top: 6px; }
.nav-drop__sep {
  height: 1px;
  margin: 6px 8px;
  background: var(--border);
}
/* ---------- Grupos plegables dentro del menú ---------- */
.nav-sub__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  padding: 6px 12px;
  border: none;
  border-radius: 3px;
  background: none;
  cursor: pointer;
  font-family: var(--font-display);
  /* Un punto por encima de sus hijos: antes iba a 0.7rem y los renglones de
     dentro se veían más grandes que la cabecera que los agrupa. */
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  text-align: left;
}
.nav-sub__btn:hover { background: var(--surface-2); }
.nav-sub__btn .nav-caret {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  opacity: .8;
  transition: transform var(--t-fast);
}
.nav-sub__btn[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
.nav-sub__menu {
  list-style: none;
  margin: 2px 0 6px 12px;
  padding: 0;
  border-left: 1px solid var(--border-strong);
}
.nav-sub__menu[hidden] { display: none; }
.nav-sub__menu a { padding-left: 14px; font-size: 0.86rem; }

/* Marca de "todavía no está abierto" */
.nav-pronto {
  /* auto la empuja a la derecha; flex:none impide que se aplaste cuando el
     renglón llena el desplegable entero. El aire con el texto lo pone el
     gap del enlace. */
  margin-left: auto;
  flex: none;
  padding: 2px 7px;
  border: 1px solid rgba(var(--s2-acento-rgb), .35);
  border-radius: 999px;
  background: rgba(var(--s2-acento-rgb), .10);
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  white-space: nowrap;
}
.nav-drop__menu a:has(.nav-pronto) { color: var(--text-3); }

@media (max-width: 767px) {
  .nav-drop__menu--grupos { min-width: 0; }
  .nav-drop__grupo { padding: 10px 0 4px 14px; }
  .nav-drop__sep { margin: 6px 0 6px 14px; }
}

/* ---------- Bloque "Próximamente" con el reloj ---------- */
.prox {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 30px 20px 40px;
}
.prox__reloj {
  position: relative;
  width: 168px;
  height: 168px;
  margin-bottom: 26px;
}
/* Halo que respira por detrás de la esfera */
.prox__reloj::before {
  content: "";
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--s2-acento-rgb), .20), transparent 68%);
  animation: prox-halo 3.4s ease-in-out infinite;
}
.prox__reloj svg { position: relative; width: 100%; height: 100%; }
.prox__aro { fill: none; stroke: var(--border-strong); stroke-width: 2; }
/* El arco que da vueltas: un trazo corto sobre la circunferencia */
.prox__barrido {
  fill: none;
  stroke: var(--primary);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 60 267;
  transform-origin: 60px 60px;
  animation: prox-giro 2.6s cubic-bezier(.45, 0, .25, 1) infinite;
}
.prox__marcas line { stroke: var(--border-strong); stroke-width: 2; stroke-linecap: round; }
.prox__marcas line.es-cuarto { stroke: var(--text-3); stroke-width: 3; }
.prox__aguja {
  stroke: var(--text);
  stroke-width: 3.4;
  stroke-linecap: round;
  transform-origin: 60px 60px;
}
.prox__aguja--min {
  stroke: var(--primary);
  stroke-width: 2.6;
  animation: prox-giro-aguja 2.6s linear infinite;
}
.prox__aguja--hora { animation: prox-giro-aguja 15.6s linear infinite; }
.prox__eje { fill: var(--primary); }

@keyframes prox-giro-aguja { to { transform: rotate(360deg); } }
@keyframes prox-giro {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes prox-halo {
  0%, 100% { opacity: .45; transform: scale(.94); }
  50%      { opacity: 1;   transform: scale(1.04); }
}

.prox__k {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--primary);
}
.prox__cuando {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 5vw, 2.6rem);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--text);
}
.prox__t {
  max-width: 52ch;
  margin: 14px 0 0;
  color: var(--text-2);
}
.prox__nota {
  margin: 22px 0 0;
  padding: 9px 16px;
  border: 1px dashed var(--border-strong);
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--text-3);
}

/* A quien le molesten las animaciones, el reloj se queda quieto */
@media (prefers-reduced-motion: reduce) {
  .prox__reloj::before,
  .prox__barrido,
  .prox__aguja--min,
  .prox__aguja--hora { animation: none; }
}

/* ---------- Tarjetas de modalidad (inicio y Mis equipos) ---------- */
.mod-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.mod-card { position: relative; display: flex; flex-direction: column; gap: 10px; }
.mod-card__top { display: flex; align-items: center; gap: 12px; }
.mod-card__n {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--text);
}
.mod-card__f {
  padding: 3px 9px;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--primary);
}
.mod-card__d { margin: 0; color: var(--text-2); font-size: 0.93rem; }
.mod-card__pie { margin-top: auto; padding-top: 6px; }
.mod-card--pronto { opacity: .72; }
.mod-card--pronto .mod-card__n { color: var(--text-3); }
.mod-card--pronto .mod-card__f { color: var(--text-3); }


/* ============================================================
   HOJA DE RUTA DE LA TEMPORADA (/calendario)
   Una fila por hito: fecha, qué se enciende ese día y su estado.
   ============================================================ */
.hr-aviso {
  margin: 0 0 20px;
  color: var(--text-3);
  font-size: 0.93rem;
}
.hr-aviso b { color: var(--text-2); }

.hoja-ruta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.hr-item {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.hr-item:hover { border-color: var(--border-strong); }
.hr-item--futuro { opacity: 0.8; }
.hr-item--pasado { opacity: 0.62; }
.hr-item--previo { border-left-color: var(--primary); }
.hr-item--activo {
  border-color: rgba(var(--s2-acento-rgb), 0.45);
  border-left-color: var(--primary);
  box-shadow: var(--glow);
  background:
    linear-gradient(90deg, rgba(var(--s2-acento-rgb), 0.09), rgba(var(--s2-acento-rgb), 0) 45%),
    var(--surface);
}

.hr-fecha {
  text-align: center;
  font-family: var(--font-display);
  line-height: 1;
}
.hr-dia {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.hr-mes {
  display: block;
  margin-top: 3px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--primary);
}
.hr-item--pasado .hr-mes { color: var(--text-3); }

.hr-kicker {
  margin: 0 0 3px;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.hr-titulo { margin: 0 0 5px; font-size: 1.05rem; }
.hr-titulo a { color: var(--text); text-decoration: none; }
.hr-titulo a:hover { color: var(--primary); }
.hr-txt { margin: 0; color: var(--text-2); font-size: 0.92rem; line-height: 1.5; }
.hr-hora {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 7px 0 0;
  color: var(--text-3);
  font-size: 0.82rem;
}
.hr-hora svg { width: 14px; height: 14px; flex: none; }
.hr-estado { justify-self: end; }

@media (max-width: 640px) {
  .hr-item { grid-template-columns: 52px 1fr; gap: 14px; padding: 13px 14px; }
  .hr-dia { font-size: 1.45rem; }
  .hr-estado { grid-column: 2; justify-self: start; margin-top: 4px; }
}

/* Anuncio de hito: el popup de "reto aceptado" con su propio remate */
.anuncio-pop .rp-icon { color: var(--primary); }

/* Aterrizaje del recordatorio del Minor: /minors?ir=inscribir baja hasta el
   boton de inscripcion y lo señala un momento. Sin esto, la pagina abre por
   arriba y el boton queda fuera de pantalla en movil, que es justo lo que se
   queria evitar.

   Es outline y no border: un borde empujaria el resto de la tarjeta y se
   veria el salto. El outline se dibuja fuera y no ocupa sitio. */
.ojo-aqui {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: no-preference) {
  .ojo-aqui { animation: ojo-aqui 700ms ease-out 3; }
  @keyframes ojo-aqui {
    0%   { outline-color: var(--primary); box-shadow: 0 0 0 0 rgba(var(--s2-acento-rgb), .45); }
    70%  { outline-color: var(--primary); box-shadow: 0 0 0 10px rgba(var(--s2-acento-rgb), 0); }
    100% { outline-color: var(--primary); box-shadow: 0 0 0 0 rgba(var(--s2-acento-rgb), 0); }
  }
}
.anuncio-pop .sub { margin-bottom: 6px; }
/* ---------- #JugadonACL: el cartel con imagen ---------- */
/* Más ancho que el popup normal para que la imagen 16:9 luzca, y con
   position: relative para que la X se pegue a la esquina de la tarjeta.
   La imagen se sale del padding por los tres lados para ir a sangre; el
   clip-path de la tarjeta le recorta la esquina igual que al resto. */
.jugadon-pop .reto-popup__card { position: relative; width: min(520px, 100%); max-width: 100%; min-width: 0; padding-top: 0; overflow: hidden; }
.jg-img { display: block; width: calc(100% + 52px); max-width: none; margin: 0 -26px 18px; aspect-ratio: 16 / 9; object-fit: cover; }
.jugadon-pop .reto-popup__card.sin-img { padding-top: 28px; }
.jg-x { top: 10px; right: 10px; z-index: 1; width: 30px; height: 30px; color: #fff; background: rgba(0, 0, 0, .7); border: 1px solid rgba(255, 255, 255, .35); }
.jg-x:hover { color: #fff; background: #000; border-color: rgba(255, 255, 255, .7); }
.jugadon-pop .sub { margin-bottom: 18px; }
/* Discord a la izquierda, X a la derecha, cada uno con su icono */
.jg-row { justify-content: space-between; gap: 10px; }
.jg-row .btn { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 0; min-width: 0; justify-content: center; }
.jg-row .btn svg { width: 16px; height: 16px; flex: none; }
@media (max-width: 480px) {
  .jg-row { flex-direction: column; }
  .jg-row .btn { width: 100%; }
}
.anuncio-pop .an-pie {
  margin: 0 0 20px;
  color: var(--text-3);
  font-size: 0.82rem;
}
/* ---------- Comunicado de tolerancia cero (popup temporal) ---------- */
/* Tres parrafos: mas ancho que el popup normal, alineado a la izquierda
   para que se lea como un texto, y con scroll propio en moviles bajos. */
.trampas-pop .reto-popup__card { width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; }
.trampas-pop .sub { text-align: left; color: var(--text-2); margin-bottom: 10px; }
.trampas-pop .an-pie { margin-top: 14px; }

/* ---------- Tablón de rangos del Modo Liga ---------- */
.rangos-tablon {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(7, 1fr);
}
.rango-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(0, 0, 0, .28));
}
/* Un velo del color del rango que baja desde arriba, muy tenue */
.rango-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 78% at 50% 0%, var(--rg), transparent 62%);
  opacity: .12;
  pointer-events: none;
}
.rango-card > * { position: relative; }
.rango-card__n {
  margin: 0 0 7px;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--rg);
}
.rango-card__n::before,
.rango-card__n::after { content: "\2014"; margin: 0 6px; opacity: .45; }
.rango-card__t {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 1.02rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rg);
}
.rango-card__img {
  height: 106px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rango-card__img img { max-height: 100%; width: auto; }
.rango-card__xp {
  margin: 14px 0 0;
  font-size: 0.78rem;
  color: var(--text-2);
  white-space: nowrap;
}
.rango-card__xp::after {
  content: "";
  display: block;
  width: 54px;
  height: 2px;
  margin: 11px auto 0;
  border-radius: 2px;
  background: var(--rg);
}
@media (max-width: 1180px) { .rangos-tablon { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 720px)  { .rangos-tablon { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
@media (max-width: 720px)  { .rango-card__img { height: 84px; } }

/* ---------- Retos destacado dentro del menú de Competición ---------- */
.nav-drop__menu .nav-dest > a {
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-height: 0;
  margin-bottom: 4px;
  padding: 9px 12px;
  border: 1px solid rgba(var(--s2-acento-rgb), .30);
  border-radius: 4px;
  background: rgba(var(--s2-acento-rgb), .09);
}
.nav-drop__menu .nav-dest > a:hover {
  border-color: rgba(var(--s2-acento-rgb), .6);
  background: rgba(var(--s2-acento-rgb), .16);
}
.nav-dest__t {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
}
.nav-dest__s {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--text-3);
}

/* Interruptor: la lengua activa va sobre el naranja, la otra apagada. Antes
   era un texto gris con las dos opciones casi iguales y pasaba desapercibido. */
.lang-op {
  padding: 4px 9px;
  border-radius: 3px;
  color: var(--text-3);
  transition: background var(--t-fast), color var(--t-fast);
}
.lang-op.is-on { background: var(--primary); color: #ffffff; }
.lang-sep { display: none; }
@media (max-width: 767px) {
  .nav-lang { margin: 10px 0 0; }
  .lang-btn { min-height: 40px; padding: 0 14px; font-size: 0.8rem; }
}

/* ---------- Selector de idioma (junto al logotipo) ---------- */
.lang { position: relative; margin-left: 14px; flex: none; }
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-2);
  transition: border-color var(--t-fast), color var(--t-fast);
}
.lang-btn:hover { border-color: var(--primary); color: var(--text); }
.lang-btn[aria-expanded="true"] { border-color: var(--primary); color: var(--text); }
/* La bandera con un borde tenue: sobre fondo oscuro, el blanco de la inglesa
   se fundia con la caja y parecia un rectangulo rojo suelto. */
.lang-flag {
  width: 22px;
  height: 15px;
  flex: none;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .22);
}
.lang-caret { width: 12px; height: 12px; flex: none; opacity: .7; transition: transform var(--t-fast); }
.lang-btn[aria-expanded="true"] .lang-caret { transform: rotate(180deg); }

.lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 130;
  min-width: 128px;
  padding: 5px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
}
.lang-menu[hidden] { display: none; }
.lang-menu .lang-op {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  border: none;
  border-radius: 5px;
  background: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-2);
  text-align: left;
}
.lang-menu .lang-op:hover { background: var(--surface-2); color: var(--text); }
.lang-menu .lang-op[aria-current="true"] { background: var(--primary-dim); color: var(--primary); }

@media (max-width: 767px) {
  /* En movil la barra la ocupan el logo, la campana y el boton de menu:
     el selector se queda al lado del logo pero mas compacto. */
  .lang { margin-left: 10px; }
  .lang-btn { min-height: 34px; padding: 0 8px; gap: 5px; }
  .lang-act { display: none; }
}

/* ---------- Guía "Cómo jugar Arena" ---------- */
.ag-lead { font-size: 1.06rem; line-height: 1.7; color: var(--text-2); max-width: 66ch; }
.ag-lead--sec { margin-top: 14px; }

/* Los pasos numerados: el número va en un círculo fuera del texto, así la
   lectura no se rompe cuando un paso ocupa varios párrafos. */
.ag-pasos { list-style: none; margin: 0; padding: 0; counter-reset: ag; }
.ag-paso {
  counter-increment: ag;
  position: relative;
  padding: 0 0 26px 58px;
  border-left: 1px solid var(--border);
  margin-left: 17px;
}
.ag-paso:last-child { border-left-color: transparent; padding-bottom: 0; }
.ag-paso::before {
  content: counter(ag);
  position: absolute;
  left: -18px;
  top: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--primary);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
}
.ag-paso h3 {
  margin: 4px 0 10px;
  font-size: 1.12rem;
  letter-spacing: 0.02em;
}
.ag-paso p { margin: 0 0 10px; color: var(--text-2); max-width: 64ch; }
.ag-paso ul, .ag-lista {
  margin: 0 0 12px;
  padding-left: 20px;
  color: var(--text-2);
  max-width: 64ch;
}
.ag-paso li, .ag-lista li { margin-bottom: 6px; }

.ag-aviso {
  margin: 12px 0 0;
  padding: 11px 14px;
  border-left: 3px solid var(--primary);
  background: var(--primary-dim);
  color: var(--text-2);
  border-radius: 0 4px 4px 0;
  max-width: 64ch;
}
.ag-nota { margin: 12px 0 0; color: var(--text-3); max-width: 64ch; }
.ag-sub { margin: 30px 0 12px; font-size: 1.05rem; }

.ag-tabla { width: 100%; border-collapse: collapse; min-width: 320px; }
.ag-tabla th, .ag-tabla td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.ag-tabla thead th {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.ag-tabla tbody th { font-weight: 700; color: var(--text); }
.ag-mas { color: var(--win); font-weight: 700; }
.ag-menos { color: var(--loss, #E5484D); font-weight: 700; }
/* Cada rango con su color, el mismo de las chapas y del tablón */
.ag-tabla--rangos tbody th { color: var(--rg, var(--text)); }
/* El emblema que acompaña al nombre del rango en esa misma tabla. Es el
   mismo dibujo del tablón de arriba, en pequeño; el nombre va al lado, así
   que la imagen lleva alt vacío para no leerse dos veces.
   El display va explícito: el reset de arriba pone las imágenes en block, y
   sin esto el emblema se colocaba ENCIMA del nombre en vez de al lado. */
.ag-emblema {
  display: inline-block;
  vertical-align: middle;
  width: 26px;
  height: auto;
  margin: -2px 10px 0 0;
}
@media (max-width: 560px) { .ag-emblema { width: 20px; margin-right: 7px; } }
/* Las franjas de emparejamiento de la guia: cada nombre con el color de su
   rango, igual que en la tabla de arriba. */
.ag-franjas b { color: var(--rg, var(--text)); }
.ag-num {
  font-family: var(--font-display);
  color: var(--text-3);
  width: 48px;
  letter-spacing: 0.1em;
}

.ag-resumen {
  margin: 52px 0 0;
  padding: 24px 26px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(0, 0, 0, .22));
}
.ag-resumen ul { margin: 14px 0 0; padding-left: 20px; color: var(--text-2); }
.ag-resumen li { margin-bottom: 7px; }
.ag-reto {
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--primary);
}
@media (max-width: 560px) {
  .ag-paso { padding-left: 44px; margin-left: 15px; }
  .ag-paso::before { width: 30px; height: 30px; left: -16px; font-size: 0.88rem; }
  .ag-resumen { padding: 20px 18px; }
}

/* ---------- Arena: "tu partida está lista" ---------- */
.mr {
  position: fixed;
  inset: 0;
  /* Por encima de todo, barra y chat incluidos: son 60 segundos y no hay
     nada mas que hacer en la pagina mientras tanto. */
  z-index: 500;
  display: flex;
  /* Centrado con "margin: auto" en la caja y NO con align/justify-content.
     Con centrado de flex, una caja mas alta que la pantalla se corta por
     ARRIBA y por abajo y no hay forma de llegar a lo cortado: en un movil
     en horizontal (360px de alto) se perdian el titulo, el aviso y el
     "Cancelar y salir". Con margin auto se centra cuando cabe y se pega
     arriba cuando no, y el overflow-y deja rodar hasta el final. */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px;
  background: rgba(6, 6, 8, .82);
  backdrop-filter: blur(6px);
  animation: mrEntra 180ms ease-out;
}
@keyframes mrEntra { from { opacity: 0; } to { opacity: 1; } }
.mr-caja {
  width: 100%;
  max-width: 520px;
  margin: auto;
  padding: 30px 28px 26px;
  text-align: center;
  border: 1px solid var(--primary);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(var(--s2-acento-rgb), .10), var(--surface) 55%);
  box-shadow: 0 0 0 1px rgba(var(--s2-acento-rgb), .18), 0 30px 70px rgba(0, 0, 0, .6);
}
.mr-t {
  margin: 0;
  font-size: clamp(1.4rem, 4.4vw, 1.9rem);
  letter-spacing: 0.02em;
  color: var(--primary);
}
.mr-sub {
  margin: 6px 0 22px;
  font-family: var(--font-display);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
}
/* Una sola fila siempre: en movil los huecos encogen en vez de partirse,
   que 7 arriba y 1 abajo queda fatal. Las columnas salen de cuantos haya. */
.mr-slots {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;
  max-width: 400px;
  margin: 0 auto;
}
/* Un hueco por jugador. Se encienden por orden segun cuantos han confirmado:
   no se enseña QUIEN ha confirmado porque el rival sigue oculto. */
.mr-slot {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: rgba(255, 255, 255, .04);
  color: var(--text-3);
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
}
.mr-slot svg { width: 19px; height: 19px; }
.mr-slot.is-ok {
  border-color: var(--win);
  background: rgba(61, 220, 132, .18);
  color: var(--win);
}
/* Cuenta atrás de la ventana de confirmación. Va entre el subtítulo y los
   huecos de jugador, que es lo primero que se mira al abrirse. */
.mr-reloj { margin: 0 0 20px; }
.mr-reloj b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 9vw, 3.4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.mr-reloj span {
  display: block;
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
/* Los últimos 30 segundos en rojo y latiendo: es el aviso de que te quedas
   fuera. El parpadeo se apaga para quien pide menos movimiento. */
.mr-reloj.es-urgente b { color: var(--loss); animation: mr-latido 1s ease-in-out infinite; }
@keyframes mr-latido {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
  .mr-reloj.es-urgente b { animation: none; }
}

.mr-cuenta { margin: 16px 0 8px; font-size: 0.94rem; color: var(--text-2); }
.mr-cuenta b { color: var(--text); font-size: 1.06rem; }
.mr-barra {
  height: 6px;
  margin: 0 auto 22px;
  max-width: 320px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  overflow: hidden;
}
.mr-barra span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--win);
  transition: width 300ms ease;
}
.mr-btn {
  width: 100%;
  min-height: 52px;
  border: none;
  border-radius: 8px;
  background: var(--primary);
  color: #ffffff;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.mr-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(var(--s2-acento-rgb), .3); }
.mr-espera {
  margin: 0;
  padding: 15px;
  border: 1px dashed var(--win);
  border-radius: 8px;
  color: var(--win);
  font-weight: 600;
}
.mr-aviso { margin: 16px 0 0; font-size: 0.8rem; line-height: 1.55; color: var(--text-3); }
.mr-salir {
  margin: 14px 0 0;
  padding: 6px 10px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--text-3);
  text-decoration: underline;
}
.mr-salir:hover { color: var(--text-2); }
@media (max-width: 480px) {
  .mr-caja { padding: 24px 18px 20px; }
  .mr-slots { gap: 5px; }
  .mr-slot svg { width: 16px; height: 16px; }
}

/* La etiqueta de formato dentro de la pestaña de modalidad en /cuenta
   (Escuadrón 4v4 · Dúo 2v2). */
.tab-btn__f {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--primary);
  background: var(--primary-dim);
  border-radius: 2px;
}
.tab-btn .why-no { margin-left: 6px; font-size: 0.78rem; }

/* Las fichas del jugador en su perfil: [4v4 · VND] [2v2 · VND-D].
   Solo se pintan cuando los dúos están abiertos. */
.ficha-pills { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ficha-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 3px 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.ficha-pill:hover { border-color: var(--primary); color: var(--primary); }
.ficha-pill__f {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--primary);
}


/* ---------- Zoom del cuadro (estilo Challonge) ----------
   El lienzo lleva el tamaño YA escalado; el cuadro de dentro se encoge con
   transform. Asi la pagina no deja un hueco enorme bajo un cuadro reducido.
   ------------------------------------------------------- */
.bracket-zoom {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
}
.bracket-zoom[hidden] { display: none; }
.bracket-zoom__et {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-right: 2px;
}
.bracket-z {
  min-height: 32px;
  padding: 5px 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.bracket-z:hover { color: var(--text); border-color: var(--primary); }
.bracket-z.is-activo {
  color: var(--on-primary);
  background: var(--primary);
  border-color: var(--primary);
}
.bracket-lienzo {
  position: relative;
  /* Sin escala no manda nada: el cuadro se dimensiona solo */
}
.bracket-lienzo > .bracket {
  transform-origin: top left;
  /* Al reducir, el navegador puede difuminar el texto; esto lo mantiene
     nitido en Chrome y Safari. */
  backface-visibility: hidden;
}
/* Reducido, las tarjetas se leen mal si mantienen el mismo grosor de borde */
.bracket-lienzo > .bracket[data-zoom] .b-match { will-change: auto; }
@media (max-width: 720px) {
  .bracket-zoom { flex-wrap: wrap; }
}

/* ============================================================
   EXPEDIENTE DE OPERADOR (js/app.js, initArena)
   El pop-up que sale al cerrarse una partida de Arena: una caja pequeña
   centrada con la tarjeta 9:16 (224 × 398: sirve tal cual como captura
   para TikTok) y los enlaces a las cuentas. Va a 600, por encima de la capa
   de "partida encontrada" (.mr, 500), que es el aviso mas alto que habia.
   ============================================================ */
.exp-modal { position: fixed; inset: 0; z-index: 600; display: flex; align-items: center; justify-content: center; background: rgba(5, 5, 6, .55); padding: 16px; }
.exp-pop { position: relative; width: 100%; max-width: 268px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 6px; padding: 14px 14px 12px; box-shadow: 0 24px 50px rgba(0, 0, 0, .55); display: grid; gap: 10px; justify-items: center; }
.exp-pop__t { width: 100%; font: 600 10px/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); padding: 4px 30px 0 0; }
.exp-x { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border: 0; background: transparent; color: var(--text-3); border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.exp-x:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.exp-x svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; }

/* La tarjeta. Degradado limpio, filete naranja arriba y el logo en grande
   como marca de agua. Los tamaños van en px a proposito: es una imagen. */
.exp-card { position: relative; width: 224px; height: 398px; background: linear-gradient(165deg, #1A1B20 0%, #0F1013 55%, #0B0B0D 100%); color: var(--text); overflow: hidden; border: 1px solid #3a2a5a; border-top: 3px solid var(--primary); font-family: var(--font-body); flex: none; }
.exp-card__in { position: absolute; inset: 0; padding: 14px; display: flex; flex-direction: column; z-index: 1; }
.exp-card .row { display: flex; justify-content: space-between; align-items: center; font: 600 7.5px/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--steel); }
.exp-card .row img { width: 12px; height: 12px; vertical-align: -3px; margin-right: 5px; }
.exp-card .row b { color: var(--text); }
.exp-card hr { border: 0; border-top: 1px solid #3a2a5a; margin: 9px 0 0; width: 100%; }
.exp-card .field { margin-top: 14px; }
.exp-card .lbl { font: 600 7px/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); margin-bottom: 3px; }
.exp-card .nick { font: 900 32px/.95 var(--font-display); text-transform: uppercase; overflow-wrap: anywhere; }
.exp-card .rango { font: 800 14px/1 var(--font-display); text-transform: uppercase; letter-spacing: .05em; display: inline-block; border: 2px solid var(--text); padding: 3px 8px 2px; margin-top: 2px; }
.exp-card .rango.sube { border-color: var(--primary); color: var(--primary); }
.exp-card .ficha { margin-top: 14px; display: grid; gap: 6px; font: 600 8.5px/1.2 var(--font-ui); letter-spacing: .05em; text-transform: uppercase; }
.exp-card .ficha div { display: flex; align-items: baseline; gap: 6px; }
.exp-card .ficha .k { color: var(--text-3); white-space: nowrap; }
.exp-card .ficha .dots { flex: 1; border-bottom: 1px dotted #3a2a5a; transform: translateY(-3px); }
.exp-card .ficha .v { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.exp-card .ficha .v.hot { color: var(--primary); }
.exp-card .foot { margin-top: auto; }
.exp-card .at { font: 800 15px/1 var(--font-display); }
.exp-card .at i { font-style: normal; color: var(--primary); }
.exp-card .liga { font: 600 6.5px/1.4 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-top: 2px; }
.exp-card .stamp { position: absolute; left: 50%; top: 252px; transform: translateX(-50%); border: 3px double var(--text); padding: 6px 14px 4px; font: 900 22px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--text); white-space: nowrap; background: rgba(11, 11, 13, .55); }
.exp-card .stamp.oro { border-color: var(--primary); color: var(--primary); }
.exp-card .stamp.rojo { border-color: var(--loss); color: var(--loss); }
.exp-card .stamp.peq { font-size: 17px; }
/* "Jugada de la semana": el gancho del sorteo, justo debajo del sello */
.exp-card .jugada { position: absolute; left: 50%; top: 304px; transform: translateX(-50%); font: 700 11px/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--primary); white-space: nowrap; }
.exp-card .glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(75% 45% at 0% 0%, rgba(var(--s2-acento-rgb), .14), transparent 70%); }
.exp-card .marca { position: absolute; width: 290px; height: 290px; right: -96px; bottom: -70px; opacity: .09; pointer-events: none; }

.exp-sigue { width: 100%; font: 600 9.5px/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); text-align: center; margin-top: 2px; }
.exp-par { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; }
.exp-btn { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 4px; font: 700 12px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--text); text-decoration: none; background: transparent; }
.exp-btn:hover { border-color: var(--text); color: var(--text); }
.exp-btn svg { width: 14px; height: 14px; fill: currentColor; flex: none; }
.exp-small { margin: 0; font-size: 10.5px; color: var(--text-3); line-height: 1.4; text-align: center; font-family: var(--font-body); max-width: none; }
.exp-small b { color: var(--steel); }
/* En pantalla ancha la caja se queda pequeña en proporcion: se escala
   entera, sin tocar la tarjeta, que sigue midiendo 224 × 398 para la captura. */
@media (min-width: 900px) { .exp-pop { transform: scale(1.2); } }

/* ============================================================
   NORMAS EN VIGOR — aviso fijo de /arena y lista del popup

   Mismo lenguaje visual que .aviso-ranking (rojo de alerta, barra
   izquierda), pero con la lista de restricciones en monoespaciada: son
   lineas cortas tipo "BAN = AN / SKORPION" que se leen de un vistazo y
   alineadas cuestan menos de repasar antes de entrar a la cola.
   ============================================================ */
.arena-normas {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  border: 1px solid rgba(229, 72, 77, .4);
  border-left-width: 3px;
  border-radius: 5px;
  background: rgba(229, 72, 77, .07);
}
.arena-normas > svg { width: 22px; height: 22px; flex: none; color: #E5484D; margin-top: 2px; }
.arena-normas h3 { font-size: 1.05rem; margin: 0 0 10px; }
.arena-normas__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9rem;
  letter-spacing: .02em;
  color: var(--text);
}
.arena-normas__pie {
  margin: 12px 0 0;
  font-size: .92rem;
  font-weight: 700;
  color: #E5484D;
}

/* ============================================================
   NOTICIAS (/noticias) — una tarjeta por entrada, la mas nueva arriba

   Misma familia que .rule-block y .card: superficie, borde y una barra
   naranja a la izquierda que marca cada entrada. La etiqueta de tipo
   reutiliza los colores de .badge (reglamento en rojo de alerta, torneo
   en naranja, web en azul, comunidad en verde).
   ============================================================ */
.noticias { display: grid; gap: 22px; max-width: 820px; margin: 0 auto; }
.noticia {
  position: relative;
  padding: 22px 24px 24px 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: 6px;
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.noticia__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  color: var(--text-3);
  font-size: .86rem;
}
.noticia__tipo {
  display: inline-flex;
  padding: 2px 9px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid;
}
.noticia__tipo--reglamento { color: #E5484D; background: rgba(229, 72, 77, .10); border-color: rgba(229, 72, 77, .35); }
.noticia__tipo--torneo     { color: var(--primary); background: var(--primary-dim); border-color: rgba(var(--s2-acento-rgb), .35); }
.noticia__tipo--web        { color: var(--accent-blue); background: var(--accent-blue-dim); border-color: rgba(77, 163, 255, .35); }
.noticia__tipo--comunidad  { color: var(--win); background: var(--win-dim); border-color: rgba(61, 220, 132, .35); }
/* El # se ve poco hasta que se pasa por encima: esta para copiar el enlace */
.noticia__ancla { margin-left: auto; color: var(--text-3); text-decoration: none; opacity: .5; font-weight: 700; }
.noticia__ancla:hover, .noticia__ancla:focus-visible { opacity: 1; color: var(--primary); }
.noticia__titulo { font-size: 1.35rem; margin: 0 0 12px; line-height: 1.25; }
.noticia__titulo a { color: var(--text); text-decoration: none; }
.noticia__titulo a:hover { color: var(--primary); }
.noticia p { color: var(--text-2); margin: 0 0 12px; line-height: 1.6; }
.noticia p b { color: var(--text); }
.noticia__lineas {
  margin: 14px 0 6px;
  padding: 12px 14px;
  border: 1px solid rgba(229, 72, 77, .35);
  border-radius: 5px;
  background: rgba(229, 72, 77, .06);
}
.noticia__btn { margin-top: 10px; }
@media (max-width: 560px) {
  .noticia { padding: 18px 16px 20px 18px; }
  .noticia__titulo { font-size: 1.15rem; }
}
/* El cartel de una noticia: centrado, con tope de alto (los carteles para X
   son verticales) y clic para verlo entero */
.noticia__img { display: block; width: fit-content; max-width: 100%; margin: 0 auto 16px; }
.noticia__img img { display: block; max-width: 100%; max-height: 560px; border: 1px solid var(--border); border-radius: 5px; }
.noticia__img:hover img { border-color: var(--primary); }

/* Editar / Borrar de cada noticia y el editor de /noticias: solo los ven
   los administradores (initNoticias en js/app.js) */
.noticia__admin { display: inline-flex; gap: 6px; }
.noticia__admin .btn { min-height: 0; padding: 3px 10px; font-size: .78rem; }
.noticia__fija { font-size: .74rem; color: var(--text-3); border: 1px dashed var(--border-strong); border-radius: 999px; padding: 1px 8px; }
#not-editor { max-width: 820px; margin: 0 auto 26px; }
.not-ed { padding: 22px 24px; }
.not-ed__titulo { margin: 0 0 16px; }
.not-ed h4 { margin: 4px 0 0; font-size: 1rem; }
.not-ed__img:not(:empty) { margin-top: 8px; font-size: .86rem; color: var(--text-3); }
.not-ed__extra { margin: 20px 0 6px; }
.not-ed__extra summary { cursor: pointer; font-weight: 600; }
.not-ed__extra .hint { color: var(--text-3); font-size: .86rem; }
.not-ed__idioma { margin-top: 14px; }
.not-ed__error { color: #E5484D; font-weight: 600; margin: 14px 0 0; }
.not-ed .action-row { margin-top: 18px; }
.not-ed__vista-tit { margin-top: 26px !important; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; font-size: .78rem !important; }
.not-ed__vista { margin-top: 10px; }
.not-ed__vista .hint { color: var(--text-3); font-size: .9rem; }
@media (max-width: 560px) { .not-ed { padding: 18px 16px; } }

/* ============================================================
   MAJOR — grupos + doble eliminación (/major, /torneo y la ficha
   del enfrentamiento). Morado como el cartel del Major y el trofeo
   de campeón. Todo va bajo .mj-* para no tocar el resto de la web.
   ============================================================ */
.mj, .mj-panel-res, .mj-bans, .mj-quien, .mj-seed-chip, .mj-otros, .mj-admin, .mj-slot {
  --mj: #A855F7;
  --mj-claro: #C99BFF;
  --mj-hondo: #5B21B6;
  --mj-dim: rgba(168, 85, 247, .12);
  --mj-borde: rgba(168, 85, 247, .38);
  --mj-borde-suave: rgba(168, 85, 247, .18);
  --mj-card: linear-gradient(180deg, rgba(168, 85, 247, .07), rgba(255, 255, 255, .012));
  --mj-wb: #3DDC84;
  --mj-lb: #F5B83D;
  --mj-fuera: #FF6B6B;
}
.mj-pagina { padding-top: 0; }
.mj { font-family: "Barlow", var(--font-body); }
.mj-m__tag, .mj-top, .mj-j, .mj-titulo, .mj-sub, .mj-col__cab h4, .mj-gf__bo,
.mj-grupo__tit, .mj-campeon__tit, .mj-gf__rol, .mj-pie, .mj-chip, .mj-m__eti {
  font-family: "Chakra Petch", var(--font-display);
}

/* ---------- Cartel ----------
   A todo lo ancho, sin marco: detrás, la misma imagen desenfocada y
   oscurecida rellena los lados (en una pantalla ancha el cartel no llega a
   los bordes); delante, la nítida se funde con ella por los lados y con el
   fondo de la página por abajo. Así no parece una foto pegada encima. */
.mj-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  justify-content: center;
  margin: 0 calc(50% - 50vw);
  overflow: hidden;
  /* Se desvanece entero por abajo (el fondo desenfocado incluido) en vez de
     fundirse a un color fijo: debajo hay humo y brillos, no un plano. */
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
}
.mj-hero__fondo {
  position: absolute;
  inset: -60px;
  z-index: -1;
  background: url("../assets/img/major-hero.webp") center 45% / cover no-repeat;
  filter: blur(30px) saturate(1.3) brightness(.42);
}
.mj-hero__img {
  display: block;
  width: min(100%, 1320px);
  height: auto;
  aspect-ratio: 1254 / 352;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}
@media (max-width: 640px) {
  /* En el móvil el cartel entero queda diminuto: se recorta al centro */
  .mj-hero__img {
    aspect-ratio: 16 / 8.5;
    object-position: 50% 62%;
    -webkit-mask-image: none;
            mask-image: none;
  }
}

.mj-aviso { color: var(--text-2); margin: 0 0 18px; max-width: 70ch; }
.mj-estado {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 28px;
}
.mj-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--mj-borde-suave);
  border-radius: 999px;
  background: var(--mj-dim);
  color: var(--text-2);
  font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.mj-chip svg { width: 14px; height: 14px; color: var(--mj-claro); }
.mj-ganador { border-color: var(--mj-borde); }

/* ---------- Títulos de sección ---------- */
.mj-sec { margin: 0 0 44px; }
.mj-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin: 0 0 16px; }
.mj-titulo {
  position: relative;
  margin: 0;
  padding-left: 26px;
  font-size: clamp(1.45rem, 3.2vw, 2rem);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #F4EEFF;
  text-shadow: 0 0 22px rgba(168, 85, 247, .35);
}
.mj-titulo::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 14px; height: 26px;
  transform: translateY(-50%);
  background: var(--mj);
  clip-path: polygon(0 0, 100% 50%, 0 100%, 35% 50%);
}
.mj-titulo--centro {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  padding-left: 0;
  margin-bottom: 18px;
  text-align: center;
}
.mj-titulo--centro::before, .mj-titulo--centro::after {
  content: "";
  position: static; transform: none;
  flex: 1 1 0; max-width: 220px; height: 8px;
  background: linear-gradient(90deg, transparent, var(--mj));
  clip-path: polygon(0 40%, 92% 40%, 100% 0, 100% 100%, 92% 60%, 0 60%);
}
.mj-titulo--centro::after { transform: scaleX(-1); }
.mj-sub {
  margin: 0;
  color: var(--mj-claro);
  font-size: .85rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
}
.mj-sub span { color: var(--text-3); margin: 0 6px; }

/* ---------- Vuestros enfrentamientos ---------- */
.mj-tuyo {
  margin: 0 0 34px;
  padding: 16px 18px;
  border: 1px solid var(--mj-borde);
  border-left: 3px solid var(--mj);
  border-radius: 6px;
  background: var(--mj-card);
}
.mj-tuyo__tit {
  margin: 0 0 10px;
  font-family: "Chakra Petch", var(--font-display);
  font-size: 1rem; letter-spacing: .14em; color: var(--mj-claro);
}
.mj-tuyo ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mj-tuyo a {
  display: grid;
  grid-template-columns: minmax(130px, auto) 1fr auto auto;
  align-items: center; gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: rgba(7, 4, 13, .55);
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.mj-tuyo a:hover, .mj-tuyo a:focus-visible { border-color: var(--mj); background: rgba(168, 85, 247, .08); }
.mj-tuyo__donde { color: var(--text-3); font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; }
.mj-tuyo__rival { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mj-tuyo__estado { color: var(--mj-claro); font-size: .82rem; font-weight: 600; }
.mj-tuyo__ir { color: var(--mj); font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; }
@media (max-width: 640px) {
  .mj-tuyo a { grid-template-columns: 1fr auto; }
  .mj-tuyo__donde { grid-column: 1 / -1; }
  .mj-tuyo__ir { display: none; }
}

/* ---------- Fase de grupos ---------- */
.mj-grupos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 1100px) { .mj-grupos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .mj-grupos { grid-template-columns: 1fr; } }

.mj-grupo {
  position: relative;
  padding: 14px 14px 12px 22px;
  border: 1px solid var(--mj-borde);
  background: var(--mj-card);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  min-width: 0;
}
/* La franja rayada de la izquierda, como en el cartel */
.mj-grupo::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 9px;
  background: repeating-linear-gradient(135deg, var(--mj) 0 5px, var(--mj-hondo) 5px 10px);
  opacity: .85;
}
.mj-grupo__tit {
  margin: 0 0 10px;
  text-align: center;
  color: var(--mj-claro);
  font-size: 1.15rem; font-weight: 700; letter-spacing: .14em;
}
.mj-seeds { list-style: none; margin: 0; padding: 0; }
.mj-seeds li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 4px;
  border-top: 1px solid var(--mj-borde-suave);
  min-width: 0;
}
.mj-seeds li.is-mio { background: rgba(168, 85, 247, .1); }
.mj-top { flex: 0 0 auto; width: 58px; color: var(--text); font-weight: 700; letter-spacing: .06em; font-size: .92rem; }
.mj-seeds__eq { display: flex; gap: 6px; min-width: 0; align-items: baseline; }

.mj-m__tag { font-weight: 700; color: var(--text); letter-spacing: .03em; flex: 0 0 auto; }
.mj-m__nom {
  color: var(--text-3); font-size: .85em;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.mj-tabla { width: 100%; border-collapse: collapse; font-size: .88rem; table-layout: fixed; }
.mj-tabla th {
  padding: 0 4px 6px; text-align: center;
  color: var(--text-3); font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.mj-tabla th:nth-child(1) { width: 22px; }
.mj-tabla th:nth-child(2) { text-align: left; }
.mj-tabla th:nth-child(3), .mj-tabla th:nth-child(4) { width: 46px; }
.mj-tabla th:nth-child(5) { width: 34px; }
.mj-tabla td { padding: 7px 4px; border-top: 1px solid var(--mj-borde-suave); text-align: center; }
.mj-tabla td:nth-child(2) { text-align: left; }
.mj-tabla td a { display: flex; gap: 6px; align-items: baseline; min-width: 0; color: inherit; text-decoration: none; }
.mj-tabla td a:hover .mj-m__tag { color: var(--mj-claro); }
.mj-tabla tr td:first-child { font-weight: 700; box-shadow: inset 3px 0 0 transparent; }
.mj-tabla tr.is-wb td:first-child { color: var(--mj-wb); box-shadow: inset 3px 0 0 var(--mj-wb); }
.mj-tabla tr.is-lb td:first-child { color: var(--mj-lb); box-shadow: inset 3px 0 0 var(--mj-lb); }
.mj-tabla tr.is-fuera td:first-child { color: var(--mj-fuera); box-shadow: inset 3px 0 0 var(--mj-fuera); }
.mj-tabla tr.is-mio td { background: rgba(168, 85, 247, .1); }
.mj-tabla__pts { font-weight: 700; color: var(--text); }

.mj-partidos { list-style: none; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px dashed var(--mj-borde-suave); display: grid; gap: 3px; }
.mj-partidos a {
  display: grid;
  grid-template-columns: 26px 1fr auto 1fr;
  align-items: center; gap: 6px;
  padding: 4px 6px;
  border-radius: 4px;
  color: var(--text-2); text-decoration: none; font-size: .84rem;
}
.mj-partidos a:hover, .mj-partidos a:focus-visible { background: rgba(168, 85, 247, .1); color: var(--text); }
.mj-partidos a.is-mio { box-shadow: inset 2px 0 0 var(--mj); }
.mj-j { color: var(--mj-claro); font-size: .72rem; font-weight: 700; }
.mj-partidos__eq { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mj-partidos__eq:last-of-type { text-align: right; }
.mj-partidos__eq.is-gana { color: var(--text); font-weight: 700; }
.mj-partidos__sc { min-width: 34px; text-align: center; color: var(--text); font-weight: 700; }
.mj-partidos__estado { grid-column: 2 / -1; color: var(--mj-claro); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }

.mj-reglas {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr 1fr;
  gap: 8px 22px; align-items: start;
  padding: 16px 18px;
  border: 1px solid var(--mj-borde);
  background: var(--mj-card);
  font-size: .9rem; color: var(--text-2);
}
.mj-reglas p { margin: 0; }
.mj-reglas b { color: var(--text); }
.mj-reglas .text-3 { grid-column: 2 / -1; }
.mj-destinos { list-style: none; margin: 0; padding: 0 18px 0 0; border-right: 1px solid var(--mj-borde-suave); grid-row: span 2; }
.mj-destinos li { display: flex; gap: 10px; padding: 3px 0; }
.mj-destinos b { width: 56px; font-family: "Chakra Petch", var(--font-display); }
.mj-destinos span { color: var(--text); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: .85rem; }
.mj-destinos .is-wb b { color: var(--mj-wb); }
.mj-destinos .is-lb b { color: var(--mj-lb); }
.mj-destinos .is-fuera b { color: var(--mj-fuera); }
@media (max-width: 900px) {
  .mj-reglas { grid-template-columns: 1fr; }
  .mj-reglas .text-3 { grid-column: auto; }
  .mj-destinos { border-right: 0; padding: 0 0 10px; border-bottom: 1px solid var(--mj-borde-suave); grid-row: auto; }
}

/* ---------- Cuadros (Winner / Loser) ---------- */
.mj-panel {
  border: 1px solid var(--mj-borde);
  background: linear-gradient(180deg, rgba(168, 85, 247, .05), rgba(7, 4, 13, .3));
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}
.mj-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 16px 16px 18px; }
.mj-arbol {
  position: relative;
  display: grid;
  gap: 0 34px;
  align-items: stretch;
}
.mj-arbol--wb { grid-template-columns: repeat(3, minmax(190px, 1fr)) minmax(180px, .9fr); min-width: 860px; }
.mj-arbol--lb { grid-template-columns: repeat(5, minmax(170px, 1fr)) minmax(170px, .9fr); min-width: 1120px; }
.mj-lineas { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.mj-col { display: flex; flex-direction: column; min-width: 0; position: relative; z-index: 1; }
.mj-col__cab { min-height: 54px; margin-bottom: 8px; text-align: center; }
.mj-col__cab h4 { margin: 0; font-size: .88rem; letter-spacing: .1em; color: var(--text); }
.mj-col__cab p { margin: 2px 0 0; font-size: .74rem; color: var(--text-3); line-height: 1.3; }
.mj-col__cuerpo { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 14px; }
.mj-arbol--wb .mj-col__cuerpo { min-height: 330px; }
.mj-arbol--lb .mj-col__cuerpo { min-height: 330px; }

.mj-m {
  position: relative;
  display: block;
  border: 1px solid var(--mj-borde);
  border-radius: 4px;
  background: rgba(16, 12, 22, .92);
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
a.mj-m:hover, a.mj-m:focus-visible { border-color: var(--mj); box-shadow: 0 0 0 1px var(--mj), 0 8px 24px rgba(168, 85, 247, .2); }
.mj-m.is-mio { border-color: var(--mj-claro); box-shadow: 0 0 0 1px rgba(201, 155, 255, .5); }
.mj-m.is-vivo { border-left: 3px solid var(--mj); }
.mj-m__eti {
  position: absolute; top: -9px; left: 8px;
  padding: 0 6px;
  background: #140d1e;
  border: 1px solid var(--mj-borde);
  border-radius: 3px;
  color: var(--mj-claro);
  font-size: .64rem; font-weight: 700; letter-spacing: .08em; line-height: 16px;
}
.mj-m__fila {
  display: flex; align-items: center; gap: 7px;
  min-height: 32px;
  padding: 5px 9px;
  font-size: .88rem;
  min-width: 0;
}
.mj-m__fila + .mj-m__fila { border-top: 1px solid var(--mj-borde-suave); }
.mj-m__fila.is-gana { background: linear-gradient(90deg, rgba(168, 85, 247, .22), transparent); }
.mj-m__fila.is-gana .mj-m__tag { color: #fff; }
.mj-m__fila.is-pierde { opacity: .5; }
.mj-m__seed { flex: 0 0 18px; color: var(--text-3); font-size: .7rem; text-align: right; }
.mj-m__ph { padding-right: 4px; color: var(--text-3); font-size: .8rem; font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mj-m__pts { margin-left: auto; padding-left: 6px; font-weight: 700; color: var(--text); }
.mj-m__estado {
  display: block;
  padding: 3px 9px 4px;
  border-top: 1px solid var(--mj-borde-suave);
  color: var(--mj-claro);
  font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}

.mj-campeon {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 74px;
  padding: 10px;
  border: 2px solid var(--mj);
  border-radius: 4px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(168, 85, 247, .18), rgba(16, 12, 22, .9));
  box-shadow: 0 0 24px rgba(168, 85, 247, .25), inset 0 0 18px rgba(168, 85, 247, .12);
  text-align: center;
}
.mj-campeon__tit { color: var(--mj-claro); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.mj-campeon__eq { display: flex; gap: 6px; align-items: baseline; min-height: 1.4em; max-width: 100%; }
.mj-campeon.is-lleno .mj-m__tag { font-size: 1.05rem; }

.mj-notas { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 4px; color: var(--text-2); font-size: .88rem; }
.mj-notas li { position: relative; padding-left: 16px; }
.mj-notas li::before { content: "›"; position: absolute; left: 2px; color: var(--mj); font-weight: 700; }
.mj-notas b { color: var(--text); }

/* ---------- Gran Final ---------- */
.mj-gf {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  border: 1px solid var(--mj-borde);
  background: var(--mj-card);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}
.mj-gf > div { padding: 18px 20px; min-width: 0; }
.mj-gf > div + div { border-left: 1px solid var(--mj-borde-suave); }
.mj-gf__cab { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.mj-gf__cab .mj-titulo { padding-left: 0; }
.mj-gf__cab .mj-titulo::before { content: none; }
.mj-gf__corona { flex: 0 0 auto; width: 48px; color: var(--mj); filter: drop-shadow(0 0 8px rgba(168, 85, 247, .6)); }
.mj-gf__bo { color: var(--mj-claro); font-weight: 700; letter-spacing: .12em; padding-left: 12px; border-left: 1px solid var(--mj-borde); }
.mj-gf__vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 12px; }
.mj-gf__lado { min-width: 0; }
.mj-gf__rol { display: block; text-align: center; color: var(--text-2); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; }
.mj-gf__eq {
  display: flex; align-items: baseline; justify-content: center; gap: 6px;
  min-height: 46px; padding: 10px;
  border: 2px solid var(--mj);
  border-radius: 4px;
  background: rgba(16, 12, 22, .92);
  box-shadow: 0 0 18px rgba(168, 85, 247, .2);
  min-width: 0;
}
.mj-gf__lado.is-gana .mj-gf__eq { background: linear-gradient(180deg, rgba(168, 85, 247, .3), rgba(16, 12, 22, .9)); }
.mj-gf__pts { margin-left: 8px; font-weight: 800; font-size: 1.1rem; color: #fff; }
.mj-gf__x { font-family: "Saira Condensed", var(--font-display); font-weight: 800; font-size: 1.8rem; color: var(--text); padding-bottom: 8px; }
.mj-gf__ir { display: inline-block; margin-top: 14px; color: var(--mj-claro); font-weight: 600; font-size: .88rem; }
.mj-gf h3 { margin: 0 0 10px; color: var(--mj-claro); font-family: "Chakra Petch", var(--font-display); font-size: .9rem; letter-spacing: .12em; }
.mj-gf__reglas p { margin: 0 0 8px; color: var(--text-2); font-size: .9rem; }
.mj-mapas { width: 100%; border-collapse: collapse; font-size: .86rem; }
.mj-mapas th, .mj-mapas td { padding: 5px 8px; border-top: 1px solid var(--mj-borde-suave); text-align: left; }
.mj-mapas th { color: var(--text); font-weight: 600; white-space: nowrap; }
.mj-mapas td:nth-child(2) { color: var(--mj-claro); font-weight: 700; font-family: "Chakra Petch", var(--font-display); }
.mj-mapas td:nth-child(3) { color: var(--text-2); }
@media (max-width: 980px) {
  .mj-gf { grid-template-columns: 1fr 1fr; }
  .mj-gf__duelo { grid-column: 1 / -1; }
  .mj-gf > div + div { border-left: 0; border-top: 1px solid var(--mj-borde-suave); }
  .mj-gf > .mj-gf__reglas { border-left: 1px solid var(--mj-borde-suave); }
}
@media (max-width: 620px) {
  .mj-gf { grid-template-columns: 1fr; }
  .mj-gf > .mj-gf__reglas { border-left: 0; }
  .mj-gf__vs { grid-template-columns: 1fr; }
  .mj-gf__x { text-align: center; padding: 0; font-size: 1.3rem; }
}

.mj-final { min-width: 0; width: 100%; }
.mj-otros { margin: 0 0 28px; color: var(--text-2); }
.mj-otros h3 { font-size: 1rem; }
.mj-otros ul { margin: 0; padding-left: 18px; }
.mj-admin { margin: 0 0 28px; }

.mj-pie {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 10px 0 0; padding: 16px 0 0;
  border-top: 1px solid var(--mj-borde-suave);
  color: var(--text-2); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
}
.mj-pie i { font-style: normal; color: var(--text-3); margin: 0 6px; }
.mj-pie b { color: var(--mj-claro); }
.mj-pie__lema { letter-spacing: .5em; color: var(--text); }
@media (max-width: 620px) {
  .mj-pie { justify-content: center; text-align: center; }
  .mj-pie__lema { letter-spacing: .28em; width: 100%; order: -1; }
}

/* ---------- Ficha del enfrentamiento ---------- */
.mj-kicker-sep { margin: 0 6px; color: var(--text-3); }
.mj-marcador { margin-left: 8px; padding: 1px 8px; border-radius: 4px; background: rgba(168, 85, 247, .2); color: #fff; }
.mj-panel-res { margin-bottom: 20px; }
.mj-panel-res > p { margin: 0 0 12px; }
.mj-panel-res > p.mj-panel-res__nota { margin: 10px 0 0; font-size: .82rem; color: var(--text-3); }
.mj-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
.mj-botones__et { min-width: 110px; font-weight: 600; color: var(--text-2); font-size: .88rem; }
.mj-botones .btn { min-width: 58px; font-variant-numeric: tabular-nums; }
.mj-quien { color: var(--text-2); margin: 0 0 14px; }
.mj-quien b { color: var(--text); }
.mj-bans {
  margin: 0 0 16px; padding: 14px 16px;
  border: 1px solid var(--mj-borde); border-radius: 6px;
  background: rgba(168, 85, 247, .06);
}
.mj-bans h3 { margin: 0 0 8px; font-size: 1rem; color: var(--mj-claro); }
.mj-bans ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mj-bans li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mj-bans__modo { min-width: 150px; font-weight: 600; }
.mj-bans__mapa { color: var(--loss); text-decoration: line-through; }
.mj-slot.is-libre { background: linear-gradient(90deg, rgba(168, 85, 247, .08), rgba(7, 4, 13, .6)); border-style: dashed; }
.mj-slot__sep { margin: 0 8px; color: var(--text-3); }
.mj-elige { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.mj-elige select {
  min-width: 150px; padding: 6px 10px;
  border: 1px solid var(--mj-borde); border-radius: 4px;
  background: #140d1e; color: var(--text); font: inherit;
}
.mj-seed-chip {
  display: inline-block; margin: 2px 0 4px; padding: 1px 8px;
  border: 1px solid var(--border-strong); border-radius: 999px;
  color: var(--text-2); font-size: .74rem; font-weight: 600; letter-spacing: .04em;
}
.mj-seed-chip.is-alto { border-color: var(--mj-borde); color: var(--mj-claro); background: var(--mj-dim); }

/* Banco de pruebas del Major: solo aparece en localhost */
.mj-pruebas {
  position: fixed; left: 12px; bottom: 34px; z-index: 9998;
  display: grid; gap: 6px;
  width: 250px; padding: 10px 12px;
  border: 1px solid #B8860B; border-radius: 6px;
  background: rgba(20, 16, 6, .96); color: #f2e6c4;
  font: 500 12px/1.4 system-ui, sans-serif;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
}
.mj-pruebas label { display: grid; gap: 2px; }
.mj-pruebas select { width: 100%; padding: 3px; background: #0d0d0d; color: #fff; border: 1px solid #555; }
.mj-pruebas__btns { display: flex; flex-wrap: wrap; gap: 4px; }
.mj-pruebas button {
  padding: 3px 8px; border: 1px solid #B8860B; border-radius: 3px;
  background: #2a2208; color: #f2e6c4; font: inherit; cursor: pointer;
}
.mj-pruebas button:hover { background: #B8860B; color: #000; }
.mj-pruebas small { color: #b9a77a; }
/* La regla general de tablas (min-width: 640px) no vale dentro de una tarjeta de grupo */
.mj-tabla, .mj-mapas, .mj-final { min-width: 0; }
.mj-partidos a .mj-partidos__eq { color: var(--text-2); }
.mj-partidos a .mj-partidos__eq.is-gana { color: var(--text); }
.mj-partidos a:hover .mj-partidos__eq { color: var(--text); }
/* El Loser Bracket tiene 6 columnas: más justas para que quepa en escritorio sin barra */
.mj-arbol--lb { grid-template-columns: repeat(5, minmax(132px, 1fr)) minmax(128px, .9fr); gap: 0 20px; min-width: 900px; }
/* El panel de resultado va en columna: título, fila de victorias, fila de derrotas */
.banner.mj-panel-res { display: block; }

/* Selector de rondas del Major: el mismo de los Minors, en morado */
.mj-rondas { margin: 0 0 12px; }
.mj-rondas .bracket-ronda { border-color: var(--mj-borde); color: var(--text-2); }
.mj-rondas .bracket-ronda:hover { border-color: var(--mj); color: var(--text); }
.mj-rondas .bracket-ronda.is-activa { background: var(--mj); border-color: var(--mj); color: #fff; }
/* Una ronda suelta: una columna a todo el ancho, sin barra lateral ni líneas */
.mj-arbol.is-plegado { grid-template-columns: 1fr !important; min-width: 0 !important; }
.mj-arbol.is-plegado .mj-col { display: none; }
.mj-arbol.is-plegado .mj-col.is-activa { display: flex; }
.mj-arbol.is-plegado .mj-col__cuerpo { min-height: 0; justify-content: flex-start; gap: 18px; }
.mj-arbol.is-plegado .mj-col__cab { min-height: 0; }


/* ============================================================
   TEMA DEL MAJOR — el fondo de la página entera, no solo el cuadro
   body.tema-major lo lleva /major siempre, y /torneo y /enfrentamiento
   cuando lo que enseñan es un Major. Sustituye la trama gris y los focos
   naranjas de siempre (body::before / ::after, más arriba) por la
   atmósfera del cartel: negro morado, humo, focos desde arriba y viñeta.
   Todo CSS: no se descarga ninguna imagen de más.
   ============================================================ */
body.tema-major {
  background: #07050c;
  overflow-x: clip;               /* el cartel y las bandas van a todo lo ancho */
}
/* Capa 1: humo morado (ruido grande, teñido) + grano fino */
body.tema-major::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='1000'%3E%3Cfilter id='h'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0028 .0045' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .16 0 0 0 0 .62 1.5 0 0 0 -.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23h)' opacity='.42'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
  background-size: 100% 100%, 140px 140px;
  background-repeat: no-repeat, repeat;
  opacity: 1;
}
/* Capa 2: focos desde arriba como los del escenario, brillos y viñeta */
body.tema-major::after {
  background:
    linear-gradient(104deg, transparent 22%, rgba(168, 85, 247, .05) 27%, transparent 33%),
    linear-gradient(76deg,  transparent 67%, rgba(168, 85, 247, .05) 73%, transparent 78%),
    radial-gradient(ellipse 70% 42% at 50% -6%, rgba(124, 58, 237, .26), transparent 70%),
    radial-gradient(ellipse 45% 55% at -4% 62%, rgba(91, 33, 182, .16), transparent 70%),
    radial-gradient(ellipse 45% 55% at 104% 88%, rgba(168, 85, 247, .12), transparent 70%),
    radial-gradient(ellipse 95% 85% at 50% 45%, transparent 48%, rgba(0, 0, 0, .6));
}

body.tema-major .navbar {
  background: rgba(8, 5, 14, .84);
  border-bottom-color: rgba(168, 85, 247, .22);
}
body.tema-major .footer {
  background: linear-gradient(180deg, #0c0716, #07050c);
  border-top-color: rgba(168, 85, 247, .22);
}

/* Los chips de estado se meten en el degradado del cartel */
.tema-major .mj-estado { position: relative; z-index: 1; margin-top: -4px; }
@media (max-width: 640px) { .tema-major .mj-estado { margin-top: -10px; } }

/* Cada bloque, una banda a todo lo ancho con su raya morada arriba,
   como las franjas del cartel */
.tema-major .mj-sec:not(.mj-gf) {
  position: relative;
  isolation: isolate;
  padding-top: 30px;
}
.tema-major .mj-sec:not(.mj-gf)::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0; bottom: -22px;
  left: calc(50% - 50vw); right: calc(50% - 50vw);
  background:
    radial-gradient(ellipse 50% 120px at 50% 0, rgba(168, 85, 247, .10), transparent 100%),
    linear-gradient(180deg, rgba(20, 11, 34, .55), rgba(7, 5, 12, 0) 70%);
  border-top: 1px solid rgba(168, 85, 247, .2);
}
/* La raya que sigue al título hasta el borde */
.tema-major .mj-cab::after {
  content: "";
  flex: 1 1 80px;
  align-self: center;
  height: 1px;
  background: linear-gradient(90deg, rgba(168, 85, 247, .55), transparent);
}

/* Paneles de cristal oscuro, con un filo de luz arriba */
.tema-major .mj-grupo,
.tema-major .mj-reglas,
.tema-major .mj-panel,
.tema-major .mj-gf,
.tema-major .mj-tuyo {
  background: linear-gradient(180deg, rgba(30, 16, 52, .72), rgba(11, 7, 19, .88));
  box-shadow: inset 0 1px 0 rgba(201, 155, 255, .14), 0 18px 50px rgba(0, 0, 0, .35);
}
.tema-major .mj-m { background: rgba(12, 8, 21, .94); }

/* Ficha del enfrentamiento: las tarjetas de siempre, en morado */
.tema-major .team-panel,
.tema-major .map-banner:not([style]) {
  background-color: rgba(18, 11, 30, .82);
  border-color: rgba(168, 85, 247, .24);
}
.tema-major .t-detalle .kicker-bar { background: var(--mj, #A855F7); }

/* El rival en "Vuestros enfrentamientos": blanco, no el naranja de los enlaces */
.mj-tuyo__rival, .mj-tuyo__rival b { color: var(--text); }

/* En las páginas del Major, el naranja de la web pasa a morado DENTRO del
   contenido (títulos pequeños, bordes de avisos, "Mapa 1", botón principal).
   La barra de arriba y el botón del chat se quedan con el naranja de la marca. */
body.tema-major main {
  --naranja: #A855F7;
  --naranja-claro: #C99BFF;
  --primary: #A855F7;
  --primary-hover: #C084FC;
  --primary-dim: rgba(168, 85, 247, .12);
  --on-primary: #fff;
}

/* ---------- Entrada a las cartas de jugador (js/app.js, cartasMajorHtml) ----------
   Un cartel con tres cartas en abanico a la derecha. Las cartas son solo
   decorado (el arte de cartas-major.html, teñido de morado): no piden datos. */
.tema-major .mj-sec.mj-cartas,
.mj-cartas {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: 1fr minmax(240px, 320px); align-items: center; gap: 24px;
  padding: 26px clamp(18px, 4vw, 40px);
  border: 1px solid rgba(168, 85, 247, .35); border-radius: 4px;
  background:
    radial-gradient(ellipse 55% 130% at 82% 50%, rgba(124, 58, 237, .38), transparent 70%),
    linear-gradient(180deg, rgba(30, 16, 52, .82), rgba(11, 7, 19, .94));
  box-shadow: inset 0 1px 0 rgba(201, 155, 255, .16), 0 18px 50px rgba(0, 0, 0, .35);
}
.tema-major .mj-sec.mj-cartas::before { display: none; }
.mj-cartas__kicker {
  display: flex; align-items: center; gap: 10px; margin: 0 0 8px;
  font: 700 12px/1 "Chakra Petch", sans-serif; letter-spacing: .22em; text-transform: uppercase; color: #A855F7;
}
.mj-cartas__kicker::before { content: ""; width: 22px; height: 2px; background: currentColor; }
body .mj-cartas .mj-cartas__tit {
  margin: 0 0 10px; font: 900 clamp(30px, 4.4vw, 42px)/.95 "Saira Condensed", sans-serif;
  text-transform: uppercase; letter-spacing: .01em; color: #fff;
}
.mj-cartas__txt p:not(.mj-cartas__kicker) { margin: 0 0 18px; max-width: 52ch; color: var(--text-2); }
.mj-cartas__abanico { position: relative; display: block; height: 200px; }
.mj-cartas__mini {
  position: absolute; left: 50%; top: 50%; width: 112px; aspect-ratio: 5 / 7;
  margin: -78px 0 0 -56px;
  border: 1px solid rgba(201, 155, 255, .55);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 9px, 100% 100%, 12px 100%, 0 calc(100% - 9px));
  background-color: #0b0713;
  background-image:
    linear-gradient(180deg, rgba(124, 58, 237, .55), rgba(30, 11, 58, .5) 55%, rgba(7, 5, 12, .95) 88%),
    var(--arte);
  background-size: cover, var(--tam, cover);
  background-position: center, var(--pos, 50% 0);
  background-repeat: no-repeat;
  background-blend-mode: color, normal;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .6));
  transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
.mj-cartas__mini i {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(233, 213, 255, .18) 45%, transparent 55%);
}
.mj-cartas__mini b {
  position: absolute; left: 10px; bottom: 9px;
  font: 900 22px/1 "Saira Condensed", sans-serif;
  background: linear-gradient(180deg, #fff, #E4E0EC 45%, #9C95AA 55%, #F4F1F8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mj-cartas__mini--1 { --arte: url("../assets/img/cartas/soldado-bo2.webp"); --tam: auto 80%; --pos: 58% 0; transform: translateX(-70px) rotate(-13deg); }
.mj-cartas__mini--2 { --arte: url("../assets/img/cartas/operador.webp"); transform: translateY(-10px); z-index: 2; }
.mj-cartas__mini--3 { --arte: url("../assets/img/cartas/soldado-bo2.webp"); --tam: auto 80%; --pos: 40% 0; transform: translateX(70px) rotate(13deg); }
.mj-cartas:hover .mj-cartas__mini--1 { transform: translateX(-84px) rotate(-17deg); }
.mj-cartas:hover .mj-cartas__mini--2 { transform: translateY(-18px); }
.mj-cartas:hover .mj-cartas__mini--3 { transform: translateX(84px) rotate(17deg); }
@media (max-width: 640px) {
  .tema-major .mj-sec.mj-cartas, .mj-cartas { grid-template-columns: 1fr; gap: 10px; }
  .mj-cartas__abanico { height: 170px; order: -1; }
  .mj-cartas__mini { width: 96px; margin: -67px 0 0 -48px; }
}
@media (prefers-reduced-motion: reduce) { .mj-cartas__mini { transition: none; } }

/* ---------- Major cerrado hasta su apertura ---------- */
.mj-cerrado { text-align: center; padding-bottom: 10px; }
.mj-cerrado__candado {
  width: 64px; height: 64px; margin: 6px auto 14px;
  display: grid; place-items: center;
  border: 1px solid var(--mj-borde); border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, .25), rgba(16, 10, 28, .9));
  color: var(--mj-claro);
  box-shadow: 0 0 30px rgba(168, 85, 247, .35);
}
.mj-cerrado__candado svg { width: 26px; height: 26px; }
.mj-cerrado__cuenta { margin: 4px 0 10px; color: var(--text-2); font-size: 1.05rem; letter-spacing: .04em; }
.mj-cerrado__cuenta b {
  color: #fff; font-family: "Chakra Petch", var(--font-display); font-size: 1.6rem;
  text-shadow: 0 0 18px rgba(168, 85, 247, .6);
}
.mj-cerrado__txt { margin: 0 auto 26px; max-width: 62ch; color: var(--text-2); }
.mj-fases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; text-align: left; }
@media (max-width: 720px) { .mj-fases { grid-template-columns: 1fr; } }
.mj-fase {
  padding: 18px 20px;
  border: 1px solid var(--mj-borde);
  background: linear-gradient(180deg, rgba(30, 16, 52, .72), rgba(11, 7, 19, .88));
  box-shadow: inset 0 1px 0 rgba(201, 155, 255, .14);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.mj-fase h3 { margin: 0 0 4px; color: var(--mj-claro); font-family: "Chakra Petch", var(--font-display); letter-spacing: .14em; }
.mj-fase__cuando { margin: 0 0 10px; color: #fff; font-weight: 600; }
.mj-fase p { color: var(--text-2); margin: 0 0 8px; }
.badge svg + span, .badge svg { vertical-align: middle; }

/* ---------- Hora pactada en listas y cajas ---------- */
.mj-partidos__estado, .mj-m__estado, .mj-tuyo__estado { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.mj-hora { color: #fff; font-weight: 600; text-transform: none; letter-spacing: 0; }

/* ---------- Bloque de horario en la ficha del enfrentamiento ---------- */
.mj-horario {
  margin: 8px 0 24px;
  padding: 16px 18px;
  border: 1px solid var(--mj-borde);
  border-left: 3px solid var(--mj);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(30, 16, 52, .55), rgba(11, 7, 19, .8));
}
.mj-horario h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 1rem; color: var(--mj-claro); }
.mj-horario h3 svg { width: 18px; height: 18px; }
.mj-horario p { margin: 0 0 8px; }
.mj-horario__ok b, .mj-horario__prop b { color: #fff; }
.mj-horario__prop { padding: 10px 12px; margin: 0 0 10px; border-radius: 5px; background: rgba(168, 85, 247, .1); }
.mj-horario__form label { display: block; margin: 0 0 6px; font-weight: 600; }
.mj-horario__form input {
  padding: 7px 10px; border: 1px solid var(--mj-borde); border-radius: 4px;
  background: #140d1e; color: var(--text); font: inherit; color-scheme: dark;
}
.mj-horario__nota { margin-top: 6px !important; font-size: .82rem; }
.mj-horario__plazo { font-size: .85rem; color: var(--text-3); }
.mj-horario__hist summary { cursor: pointer; color: var(--text-2); font-size: .88rem; }
.mj-horario__hist ol { margin: 8px 0 0; padding-left: 18px; font-size: .86rem; color: var(--text-2); }

.mj-pruebas__check { display: flex !important; align-items: center; gap: 6px; }

/* Insignia MVP en la vitrina del jugador (PNG con transparencia: sin la
   fusión "screen" de las copas JPEG). Algo más grande: es un escudo, no una copa. */
.vit-card--mvp { --vit-c: #9D6BFF; --vit-glow: rgba(140, 82, 255, .45); }
.vit-card--mvp img { width: 64px; }

/* ============================================================
   RETOS CON AN/SK: casilla al publicar, chapa y aviso en el tablón
   ============================================================ */
.check-ansk {
  display: inline-flex !important; align-items: center; gap: 10px; cursor: pointer;
  padding: 10px 14px; border: 1px solid var(--border-strong);
  font-weight: 700; color: var(--text);
}
.check-ansk input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent-blue); cursor: pointer; }
.check-ansk:has(input:checked) { border-color: var(--accent-blue); background: var(--accent-blue-dim); }
.chip-ansk {
  display: inline-block; padding: 1px 6px; border: 1px solid var(--accent-blue); border-radius: 3px;
  background: var(--accent-blue-dim); color: var(--accent-blue);
  font: 700 0.7rem var(--font-body); letter-spacing: 0.08em; vertical-align: middle; white-space: nowrap;
}
.challenge-card--ansk { box-shadow: inset 0 0 0 1px rgba(77, 163, 255, .55); }
.aviso-ansk {
  display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; padding: 8px 12px;
  border-left: 3px solid var(--accent-blue); background: var(--accent-blue-dim);
  font-size: 0.9rem; color: var(--text);
}
.aviso-ansk b { font-size: 1rem; letter-spacing: 0.06em; color: var(--accent-blue); }

/* ============================================================
   REVANCHA: chapa en el tablón, aviso en el formulario
   ============================================================ */
body.rd .chip-revancha {
  position: absolute; top: 18px; right: 18px;
  padding: 5px 11px; border: 1px solid rgba(255, 107, 107, .45);
  background: var(--loss-dim); color: var(--loss);
  font: 700 10px "Chakra Petch", sans-serif; letter-spacing: 2px; text-transform: uppercase;
}
body.rd .chip-revancha--mini { position: static; display: inline-block; padding: 3px 8px; margin-right: 4px; }
.challenge-card--revancha { box-shadow: inset 0 0 0 1px rgba(255, 107, 107, .5); }
.challenge-card--revancha.challenge-card--ansk { box-shadow: inset 0 0 0 1px rgba(255, 107, 107, .5), inset 0 0 0 2px rgba(77, 163, 255, .45); }
.challenge-card--revancha .challenge-card__head .team-card__logo { width: 56px; height: 56px; flex: none; }
.challenge-card--revancha .challenge-card__head h3 .rk-tag { font-size: 0.7rem; vertical-align: middle; }
.aviso-revancha {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; padding: 10px 12px;
  border-left: 3px solid var(--loss); background: var(--loss-dim); color: var(--text); font-size: 0.92rem;
}
.aviso-revancha b { color: var(--loss); letter-spacing: 0.06em; text-transform: uppercase; }
.aviso-revancha .btn { margin-left: auto; }

/* ============================================================
   TEMPORADAS: selector del ranking, chapas y franja del equipo
   ============================================================ */
.rk-temporadas:empty { display: none; }
.rk-temporadas { margin: 0 0 18px; }
.rk-temp { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rk-temp__t {
  font: 700 0.72rem var(--font-body); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-3);
}
.rk-temp select {
  min-width: 260px; max-width: 100%; padding: 10px 12px;
  border: 1px solid var(--border-strong); border-radius: 0;
  background: #110a1f; color: var(--text);
  font: 600 0.95rem var(--font-body); color-scheme: dark; cursor: pointer;
}
.rk-temp select:focus { border-color: var(--primary); box-shadow: 0 0 0 1px rgba(var(--s2-acento-rgb), .35); outline: none; }
.rk-temp option:disabled { color: var(--text-3); }
.rk-temp__nota { margin: 10px 0 0; font-size: 0.9rem; color: var(--text-2); }
.rk-temp__nota b { color: var(--text); }
@media (max-width: 560px) {
  .rk-temp { display: flex; }
  .rk-temp select { min-width: 0; width: 100%; }
}

/* "T1 · #4" en las tarjetas de /equipos */
.temp-chip {
  display: inline-block; margin-right: 8px; padding: 1px 6px;
  border: 1px solid var(--border-strong); border-radius: 3px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  color: var(--text-2); white-space: nowrap;
}

/* Franja de temporadas cerradas en la ficha del equipo */
.eq-temps { border-top: 1px solid var(--border); }
.eq-temp {
  display: flex; align-items: baseline; gap: 6px 18px; flex-wrap: wrap;
  padding: 12px 18px; color: var(--text-2); text-decoration: none;
  font-size: 0.92rem; transition: background var(--t-fast);
}
.eq-temp + .eq-temp { border-top: 1px solid var(--border); }
.eq-temp:hover { background: rgba(255, 255, 255, .03); }
.eq-temp__n {
  font: 700 0.72rem var(--font-body); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-3); min-width: 110px;
}
.eq-temp b { color: var(--primary); font-size: 1.05rem; }
/* "como WAR KINGS [WK]": el nombre con el que jugó esa temporada, si era otro */
.eq-temp__como {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-3); font-size: 0.85rem;
}
.eq-temp__como img { width: 20px; height: 20px; object-fit: contain; }
.eq-temp .eq-temp__como b { color: var(--text-2); font-size: inherit; }

/* ============================================================
   VITRINA HISTÓRICA (/historia)
   ============================================================ */
.hist-abiertas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px; margin-bottom: 40px;
}
.hist-temp { margin-bottom: 56px; }
.hist-temp--abierta {
  margin: 0; padding: 18px 20px; border: 1px solid var(--border); border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.18));
}
.hist-temp--abierta p { margin: 8px 0 0; color: var(--text-2); font-size: 0.95rem; }
.hist-temp--viva { border-color: rgba(var(--s2-acento-rgb), .45); }
.hist-temp__head { display: flex; align-items: baseline; gap: 4px 14px; flex-wrap: wrap; margin-bottom: 4px; }
.hist-temp__head .kicker { flex-basis: 100%; margin: 0; }
.hist-temp__head h2 { margin: 0; }
.hist-temp--abierta .hist-temp__head h2 { font-size: 1.5rem; }
.hist-estado {
  padding: 2px 8px; border: 1px solid var(--border-strong); border-radius: 3px;
  font: 700 0.7rem var(--font-body); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-3);
}
.hist-temp--viva .hist-estado { border-color: var(--primary); color: var(--primary); }
.hist-sub {
  margin: 32px 0 14px; font-size: 0.8rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-3);
}
.hist-et {
  font: 700 0.68rem var(--font-body); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-3);
}
.hist-eq { display: inline-flex; align-items: center; min-width: 0; color: var(--text); text-decoration: none; }
a.hist-eq:hover { color: var(--primary); }
.hist-eq > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-mas { margin: 18px 0 0; }
.hist-mas .btn-liga { font-size: 15px; padding: 11px 26px; }
.hist-lider { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hist-lider b { color: var(--primary); }

/* El Major, en grande */
.hist-major {
  display: flex; align-items: center; gap: 24px; margin-top: 24px; padding: 22px 24px;
  border: 1px solid rgba(180, 124, 255, .45); border-radius: 12px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(180, 124, 255, .16), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.25));
}
.hist-major__copa { width: 120px; height: auto; flex: none; filter: drop-shadow(0 0 22px rgba(180, 124, 255, .45)); }
.hist-major__txt { min-width: 0; }
.hist-major__k {
  margin: 0; font: 700 0.75rem var(--font-body); letter-spacing: 0.14em;
  text-transform: uppercase; color: #B47CFF;
}
.hist-major h3 { margin: 2px 0 8px; font-size: 1.1rem; }
.hist-major h3 a { color: var(--text-2); text-decoration: none; }
.hist-major h3 a:hover { color: var(--text); }
.hist-major__camp { margin: 0; font-size: 1.6rem; font-weight: 800; line-height: 1.2; }
.hist-major__camp .rk-escudo { width: 56px; height: 40px; }
.hist-major__plantilla { margin: 8px 0 0; color: var(--text-2); font-size: 0.92rem; }
.hist-major__plantilla a { color: inherit; text-decoration: none; }
.hist-major__plantilla a:hover { color: var(--text); }
.hist-major__resto { list-style: none; margin: 14px 0 0; padding: 0; display: flex; gap: 8px 24px; flex-wrap: wrap; }
.hist-major__resto li { display: flex; align-items: center; gap: 10px; }
@media (max-width: 560px) {
  .hist-major { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px 16px; }
  .hist-major__copa { width: 84px; }
  .hist-major__camp { font-size: 1.3rem; }
}

/* Torneo Inaugural y Minors */
.hist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.hist-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px;
  padding: 18px 16px 16px; border: 1px solid var(--border); border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.18));
  color: var(--text); text-decoration: none; transition: border-color var(--t-fast);
}
.hist-card::before {
  content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 3px;
  background: var(--vit-c); border-radius: 0 0 3px 3px;
}
.hist-card:hover { border-color: var(--vit-c); }
.hist-card--minor     { --vit-c: #6EB1FF; }
.hist-card--inaugural { --vit-c: var(--win); }
.hist-card--oro       { --vit-c: #FFD34D; }
.hist-card img { width: 64px; height: auto; mix-blend-mode: screen; margin-bottom: 4px; }
.hist-card__k { font-weight: 800; font-size: 1.1rem; color: var(--vit-c); }
.hist-card__f { font-size: 0.82rem; color: var(--text-3); margin-bottom: 6px; }
.hist-card__p { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hist-card__p .hist-eq { font-weight: 700; }
.hist-card__p--sub .hist-eq { font-weight: 500; color: var(--text-2); }
.hist-card .rk-escudo { width: 34px; height: 24px; margin-right: 8px; }

/* MVP */
.hist-mvps { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.hist-mvp {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  padding: 16px 10px 14px; border: 1px solid var(--border); border-radius: 10px;
  background: linear-gradient(180deg, rgba(140, 82, 255, .08), rgba(0,0,0,.18));
  color: var(--text); text-decoration: none; transition: border-color var(--t-fast);
}
.hist-mvp:hover { border-color: #9D6BFF; }
.hist-mvp img { width: 56px; height: auto; filter: drop-shadow(0 0 12px rgba(140, 82, 255, .45)); }
.hist-mvp__n { font-weight: 800; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-mvp__x { font-weight: 800; color: #9D6BFF; }
.hist-mvp__t { font-size: 0.78rem; color: var(--text-3); }

/* Podio del ranking final */
.hist-podio { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.hist-podio li { display: flex; align-items: center; gap: 14px; padding: 12px 16px; }
.hist-podio li + li { border-top: 1px solid var(--border); }
.hist-podio .hist-eq { flex: 1; font-weight: 700; }
.hist-podio__pos { width: 28px; font-size: 1.4rem; font-weight: 800; color: var(--primary); text-align: center; }
.hist-podio__1 { background: rgba(var(--s2-acento-rgb), .07); }
.hist-podio b { white-space: nowrap; }
.hist-podio__rec { color: var(--text-3); font-size: 0.85rem; white-space: nowrap; }
@media (max-width: 560px) {
  .hist-podio li { flex-wrap: wrap; gap: 4px 12px; }
  .hist-podio .hist-eq { flex-basis: calc(100% - 42px); }
  .hist-podio b { margin-left: 42px; }
}

/* ============================================================
   APP (PWA) — aviso de "Instala la app" (js/pwa.js)
   Abajo, dejando sitio a la burbuja del chat (.chatg-burbuja, abajo a la
   derecha) y por debajo de ella y de los chats (z-index 290/300).
   ============================================================ */
.app-aviso {
  position: fixed;
  left: 12px;
  right: 84px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 280;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px 10px 10px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  animation: appAvisoEntra .35s ease-out;
}
.app-aviso img { flex-shrink: 0; border-radius: 10px; }
.app-aviso__txt { flex: 1; min-width: 0; font-size: .82rem; line-height: 1.35; color: var(--text-2); }
.app-aviso__txt b { display: block; color: var(--text); font-size: .9rem; }
.app-aviso__si { flex-shrink: 0; }
.app-aviso__x {
  flex-shrink: 0; width: 30px; height: 30px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; color: var(--text-3); cursor: pointer;
}
.app-aviso__x svg { width: 18px; height: 18px; }
@keyframes appAvisoEntra { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .app-aviso { animation: none; } }

/* Pie de la campana: activar los avisos al móvil (js/pwa.js) */
.notif-push {
  padding: 12px 16px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  font-size: .8rem;
  color: var(--text-3);
  line-height: 1.4;
}
.notif-push p { margin: 6px 0 0; }
.notif-push p:first-child { margin-top: 0; }
.notif-push .btn { width: 100%; justify-content: center; }
.notif-push__si { color: var(--win); font-weight: 600; display: inline; }
.notif-push__btn--no {
  float: right; background: none; border: 0; padding: 0;
  font: inherit; font-weight: 600; color: var(--text-3); text-decoration: underline; cursor: pointer;
}
.notif-push__error { color: #E5484D; }
/* Anuncio "La ACL ya es una app" (js/pwa.js): el icono de la app arriba */
.app-anuncio__icono { display: block; width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 14px; }
/* .btn fuerza display:inline-flex y se comeria el hidden del boton Instalar */
.app-anuncio .btn[hidden] { display: none; }


/* ============================================================
   Tema Season 2 — la parte escrita a mano
   Lo que no sale cambiando colores: fondo, cabecera, pie y botones como
   los de la portada nueva (inicio-s2.html / css/inicio-s2.css).
   tools/generar-tema-s2.js lo pone al final de css/tema-s2.css, para que mande.
   ============================================================ */

/* ---------- El acento de cada sección ----------
   Toda la web comparte fondo, cabecera, logo y estructura; lo que cambia
   por sección es el ACENTO (botones, brillos, títulos destacados, bordes).
   Morado = la marca (portada, ACL ONE, Temporada, Comunidad...). js/tema.js
   pone en <html> la clase de la sección según la página.
   Van en <html> y no en <body> a propósito: --primary y compañía se
   declaran en :root (el <html>) con var(--s2-acento), y ahí se resuelven;
   cambiar el acento en el body ya no les llegaría.
   El verde y el rojo NO son los de victoria (#4ADE80) y derrota (#FF6B6B):
   un esmeralda y un carmesí, para que en las tablas no se confundan. */
html.tema-s2 {
  --s2-acento: #8b3dff;  --s2-acento-rgb: 139, 61, 255;
  --s2-acento-claro: #b585ff;
  --s2-acento-brillo: #8f45ff;  --s2-acento-oscuro: #5b1fd1;
}
html.tema-s2.seccion-equipo {          /* Retos, Desafíos, Ranking, Minors */
  --s2-acento: #10b981;  --s2-acento-rgb: 16, 185, 129;
  --s2-acento-claro: #6ee7b7;
  --s2-acento-brillo: #19c98d;  --s2-acento-oscuro: #047857;
}
html.tema-s2.seccion-duo {             /* Retos, Desafíos y Ranking de dúos, Torneos */
  --s2-acento: #3b82f6;  --s2-acento-rgb: 59, 130, 246;
  --s2-acento-claro: #93c5fd;
  --s2-acento-brillo: #4f8ff7;  --s2-acento-oscuro: #1d4ed8;
}
html.tema-s2.seccion-arena {           /* Modo Liga, Clasificación y Cómo jugar */
  --s2-acento: #e11d48;  --s2-acento-rgb: 225, 29, 72;
  --s2-acento-claro: #fb7185;
  --s2-acento-brillo: #f43f5e;  --s2-acento-oscuro: #9f1239;
}

/* ---------- Fondo: negro, con el brillo del acento y sin el grano gris ---------- */
html.tema-s2 body {
  background:
    radial-gradient(900px 500px at 75% 0%, rgba(var(--s2-acento-rgb), .14), transparent 60%),
    radial-gradient(700px 600px at 0% 100%, rgba(var(--s2-acento-rgb), .08), transparent 60%),
    #07040d;
  --borde: rgba(var(--s2-acento-rgb), .22);
  --card-bg: linear-gradient(170deg, rgba(var(--s2-acento-rgb), .07), rgba(17, 10, 31, .65));
  --steel: #d9d0ee;
}
html.tema-s2 body::before { display: none; }     /* el grano de ruido agrisaba el fondo */

/* ---------- Ancho de la cabecera ----------
   Cada cabecera se alinea con el contenido de SU página: en las interiores,
   con la columna centrada de siempre (.container), así el logo queda encima
   de donde empieza el título; en la portada, cuyo contenido va de borde a
   borde, con el mismo margen lateral que el hero (--s2-x, en inicio-s2.css).
   De borde a borde en todas, el logo y el idioma quedaban muy a la izquierda
   del contenido de las páginas interiores. */
html.tema-s2 body.s2 .navbar__inner.container { max-width: none; padding-left: var(--s2-x); padding-right: var(--s2-x); }

/* ---------- Cabecera, como la de la portada ---------- */
html.tema-s2 .navbar {
  background: rgba(7, 4, 13, .94);
  border-bottom: 1px solid rgba(var(--s2-acento-rgb), .22);
}
/* js/tema.js cambia el escudo naranja por el logo morado y el texto "ACL"
   por "Arena Champions League" en tres líneas. El logo es la marca: morado
   en todas las secciones. */
html.tema-s2 .brand img { width: 84px; height: auto; mix-blend-mode: screen; }
html.tema-s2 .brand .brand-s2 {
  font: 500 0.54rem/1.35 "Chakra Petch", sans-serif; letter-spacing: 0.32em;
  text-transform: uppercase; color: #b2a8cc;
}
/* En una línea y con menos relleno: la cabecera va en la columna del
   contenido y "ACL ONE" o un nick con guion se partían en dos líneas */
html.tema-s2 .nav-links a,
html.tema-s2 .nav-drop__btn {
  font-family: "Chakra Petch", sans-serif; font-weight: 500; font-size: 0.78rem;
  letter-spacing: 0.06em; color: #b2a8cc; white-space: nowrap; padding: 0 10px;
}
html.tema-s2 .nav-links a::before,
html.tema-s2 .nav-links a[aria-current="page"]::after { left: 10px; right: 10px; }
html.tema-s2 .nav-links .nav-cta > a { padding: 0 14px; }
html.tema-s2 .nav-links a:hover,
html.tema-s2 .nav-drop__btn:hover { color: #fff; background: rgba(var(--s2-acento-rgb), .1); }
html.tema-s2 .nav-links a[aria-current="page"],
html.tema-s2 .nav-drop__btn.is-active { color: #fff; font-weight: 700; }
html.tema-s2 .nav-links a::before,
html.tema-s2 .nav-links a[aria-current="page"]::after { box-shadow: 0 0 10px var(--s2-acento); }
html.tema-s2 .nav-drop__menu {
  background: rgba(14, 8, 28, .98); border-color: rgba(var(--s2-acento-rgb), .3);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5), 0 0 24px rgba(var(--s2-acento-rgb), .12);
}
html.tema-s2 .nav-drop__menu a { font-family: "Barlow", sans-serif; font-size: 0.9rem; text-transform: none; }
html.tema-s2 .nav-drop__menu a:hover { background: rgba(var(--s2-acento-rgb), .14); }
/* La cuenta: botón con borde del acento, como "Iniciar sesión" en la portada */
html.tema-s2 .nav-links .nav-cta > a,
html.tema-s2 .nav-links .nav-cta > a.btn--primary {
  background: rgba(var(--s2-acento-rgb), .2); color: #fff; border: 1px solid var(--s2-acento-claro);
  box-shadow: none; font-family: "Chakra Petch", sans-serif; letter-spacing: 0.12em;
}
html.tema-s2 .nav-links .nav-cta > a:hover { background: rgba(var(--s2-acento-rgb), .4); }

/* El desplegable de la cuenta va dentro de .nav-links y heredaba la letra
   pequeña y espaciada de la barra (0.78rem): ahí se lee como un menú, no
   como la barra. */
html.tema-s2 .user-menu {
  min-width: 240px; background: rgba(14, 8, 28, .98); border-color: rgba(var(--s2-acento-rgb), .3);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5), 0 0 24px rgba(var(--s2-acento-rgb), .12);
}
html.tema-s2 .nav-links .user-menu a,
html.tema-s2 .nav-links .user-menu button {
  font-family: "Barlow", sans-serif; font-size: 1rem; font-weight: 500; letter-spacing: 0;
  padding: 10px 14px; white-space: normal; color: #d9d0ee;
}
html.tema-s2 .nav-links .user-menu a::before,
html.tema-s2 .nav-links .user-menu a::after { display: none; }
html.tema-s2 .nav-links .user-menu a:hover,
html.tema-s2 .nav-links .user-menu button:hover { background: rgba(var(--s2-acento-rgb), .14); color: #fff; }
html.tema-s2 .nav-links .user-menu a[aria-current="page"] { color: #fff; font-weight: 700; }
html.tema-s2 .nav-links .user-menu .um-out { color: var(--loss); }

/* ---------- Botones ---------- */
html.tema-s2 .btn--primary,
html.tema-s2 .rd .btn-liga--pri {
  background: linear-gradient(180deg, var(--s2-acento-brillo), var(--s2-acento-oscuro));
  border: 1px solid var(--s2-acento-claro); color: #fff;
  box-shadow: 0 0 22px rgba(var(--s2-acento-rgb), .35);
}
html.tema-s2 .btn--primary:hover,
html.tema-s2 .rd .btn-liga--pri:hover {
  background: linear-gradient(180deg, var(--s2-acento-claro), var(--s2-acento)); color: #fff;
  box-shadow: 0 0 30px rgba(var(--s2-acento-rgb), .55);
}
html.tema-s2 .rd .btn-liga--sec { border-color: rgba(var(--s2-acento-rgb), .45); }

/* ---------- Tarjetas y cajas: borde tenue del acento, como los paneles ---------- */
html.tema-s2 .card,
html.tema-s2 .rd .card { border-color: rgba(var(--s2-acento-rgb), .22); }
html.tema-s2 .card--hover:hover { border-color: rgba(var(--s2-acento-rgb), .55); box-shadow: 0 0 28px rgba(var(--s2-acento-rgb), .12); }

/* ---------- Cabecera de cada página ---------- */
html.tema-s2 body.rd .page-head {
  background: radial-gradient(700px 360px at 85% 0%, rgba(var(--s2-acento-rgb), .22), transparent 70%), #06030b;
  border-bottom: 1px solid rgba(var(--s2-acento-rgb), .18);
}
html.tema-s2 body.rd .page-head h1 { text-shadow: 0 0 28px rgba(var(--s2-acento-rgb), .25); }

/* ---------- Pie ---------- */
html.tema-s2 .footer {
  background: rgba(5, 3, 9, .96);
  border-top: 1px solid rgba(var(--s2-acento-rgb), .18);
}
html.tema-s2 .footer .brand img { width: 110px; }
html.tema-s2 .footer h4 { font-family: "Chakra Petch", sans-serif; letter-spacing: 0.2em; color: var(--s2-acento-claro); }
html.tema-s2 .footer__bottom { border-top-color: rgba(var(--s2-acento-rgb), .18); }

/* ---------- El tag de las tablas de ranking ----------
   En la paleta vieja era texto casi negro sobre gris cálido; al pasar los
   colores, el gris sale lavanda claro y el texto blanco, y no se leía. Ahora
   va como una chapa del acento. Tu equipo sigue en verde. */
html.tema-s2 .rd .rk-tag {
  background: rgba(var(--s2-acento-rgb), .2); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(var(--s2-acento-rgb), .5);
}
html.tema-s2 .rd .rk-fila--mio .rk-tag { background: var(--win); color: #06200f; box-shadow: none; }

/* ---------- Burbuja del chat (js/chat-global.js) ---------- */
html.tema-s2 .chatg-burbuja {
  background: linear-gradient(180deg, var(--s2-acento-brillo), var(--s2-acento-oscuro)); color: #fff;
  border-color: var(--s2-acento-claro); box-shadow: 0 0 22px rgba(var(--s2-acento-rgb), .45);
}