/* ============================================================
   TradingFight — RESTYLE por vista (overrides sobre main.css)
   Aprobado por el dueño vía previsualización (artifact ef93d20f, sec. 04-05):
   "la dirección visual es correcta, continua".

   Mismo patrón que standings.css: usa las clases que YA existen, aplica tokens,
   y gana por ORDEN DE CARGA (este fichero va después de main.css). Cero !important,
   cero selectores de ID.

   🔒 REGLA DE ORO DE ESTE FICHERO: solo se tocan propiedades de PINTADO
   (background, border, box-shadow, color, border-radius) y se ocultan overlays
   decorativos que son position:absolute + pointer-events:none. NUNCA se toca
   display/position/flex/grid/width/height de algo que participe en el layout.
   Motivo: se está trabajando SIN poder ver el resultado; repintar no puede romper
   una maquetación, re-maquetar sí. Cuando haya ojos, se podrá afinar el layout.
   ============================================================ */

/* ═══════════════ LOBBY ═══════════════
   El mockup aprobado es un panel contenido: sin glow difuso, sin rejilla neón,
   sin pulsos. Estos son overlays decorativos -> ocultarlos es seguro y es
   justo el delta con el mockup. */
.hero-glow,
.hero-neon-grid,
.hero-vs-pulse,
.mode-card-glow { display: none; }

/* Hero como panel de terminal, no escenario con luces */
.lobby-hero {
    background: var(--tf-surface-1);
    border: 1px solid var(--tf-border-default);
    border-radius: var(--tf-radius-md);
    box-shadow: none;
}

/* Los aros de los luchadores: color SOLO por semántica (LONG verde / SHORT rojo),
   filo nítido en vez de halo. (Son chrome del hero, no un cosmético de avatar.) */
.hero-fighter-ring { box-shadow: none; filter: none; }
.hero-ring-green { border-color: var(--tf-profit); }
.hero-ring-red   { border-color: var(--tf-loss); }

/* Switcher de modos: activo = acento CONTENIDO, sin glow */
.mode-tab { background: var(--tf-surface-1); border-color: var(--tf-border-subtle); box-shadow: none; }
.mode-tab-center.active,
.mode-tab.active {
    background: var(--tf-accent-muted);
    border-color: var(--tf-accent);
    box-shadow: none;
}

/* Barra de stats: panel contenido */
.live-stats-bar {
    background: var(--tf-surface-1);
    border: 1px solid var(--tf-border-subtle);
    border-radius: var(--tf-radius-sm);
    box-shadow: none;
}

/* Tarjetas de modo: contenidas y uniformes (como el mockup), borde en hover */
.lobby-mode-card {
    background: var(--tf-surface-1);
    border: 1px solid var(--tf-border-subtle);
    box-shadow: none;
}
.lobby-mode-card:hover { border-color: var(--tf-border-strong); box-shadow: none; }

/* ═══════════════ BOTONES: fuera el pulso de glow ═══════════════
   `.btn-glow::before` es un halo verde pulsante detrás de los botones (login del header
   + otros 7). Overlay decorativo (z-index:-1) -> ocultarlo es seguro y quita el último
   "latido de videojuego" del chrome. El botón conserva su fondo. */
.btn-glow::before { display: none; }

/* ═══════════════ AVATAR PROPIO: sin glow ni animación ═══════════════
   Reportado por el dueño: el avatar del HEADER "tiene glow alrededor" y el resto de
   avatares no -> era el único que seguía brillando tras el restyle.

   Causa: el avatar propio (header, perfil, juego, tarjeta de usuario) usa las clases
   legacy `.{hd,ps,pf,gp,uc}-avatar-ring.ring-*` con box-shadow de color + spin infinito
   (las pinta _applyFrameRing en app.js). Los avatares del resto de la app ya usan la
   familia tf-ring (nítida, sin glow, sin animación). Aquí se igualan: se quita el glow y
   la animación; el rim de color del marco se conserva (estático).

   Mismo criterio del sistema de diseño: los marcos se distinguen por precisión, no por
   cuánto brillan. Esto NO colapsa las familias (sigue pendiente esa decisión de producto),
   solo las serializa. ⬜ La `.aureola-fire` (halo mítico de nivel 100, cosmético de
   prestigio a 0-3-0) se DEJA brillar: mutarla es decisión del dueño. */
.hd-avatar-ring, .hd-avatar-ring[class*="ring-"],
.ps-avatar-ring, .ps-avatar-ring[class*="ring-"],
.pf-avatar-ring, .pf-avatar-ring[class*="ring-"],
.gp-avatar-ring, .gp-avatar-ring[class*="ring-"],
.uc-avatar-ring, .uc-avatar-ring[class*="ring-"] {
    box-shadow: none;
    animation: none;
}

/* ═══════════════ PERFIL ═══════════════
   El avatar y su marco los pinta el sistema tf-ring (o el marco equipado, que es
   cosmético y NO se toca). Aquí solo se contienen los paneles y las tarjetas de
   estadística: superficie de token, borde sutil, sin glow. (Clases verificadas
   en el markup: ps-stat, ps-trading-stat, ps-clan-stat, pf-stat-card, pf-panel.) */
.ps-stat,
.ps-trading-stat,
.ps-clan-stat,
.ps-quests-panel,
.ps-login-panel,
.pf-stat-card,
.pf-panel,
.pf-hero-card {
    background: var(--tf-surface-1);
    border: 1px solid var(--tf-border-subtle);
    box-shadow: none;
}