/* ══════════════════════════════════════════════════════════════════
   COP · LA FILA DE MODO — las tarjetas de la Arena  (24/09/2026)
   ──────────────────────────────────────────────────────────────────
   Franco: *«rediseñá las tarjetas de arena, con separadores con líneas
   como se separan los partidos, fondo uniforme para cada uno sin ese
   diseño tan cargado»*. Se le pasaron tres opciones y eligió la A
   (*«en tarjetas de arena quiero la opción a, y al lado de cada título
   quiero el logo de cantidad de usuarios jugando esa competencia»*).

   ⚠⚠ ES UNA PIEZA NUEVA Y NO UN CAMBIO A `.cop-tc`. La tarjeta con
   lienzo (`cop-tarjeta-competencia.css`) sigue siendo la TAPA de cada
   competencia (Clash Draft, Spin, Grupos, el banner…): Franco pidió
   cambiar las tarjetas DE LA ARENA, no las cabeceras. La Arena dejó de
   usar `.cop-tc` y usa ésta.

   LA FORMA
     · sin caja: el fondo es el de la página, igual para todos;
     · el escudo del modo a la izquierda (el mismo `--tc-logo` de
       `cop-arte-modos.css`, que tiene que estar enlazado ANTES) con un
       halo de su color;
     · título en Anton + la gente jugando al lado; la bajada abajo;
     · una línea ENTRE filas —no arriba de la primera ni abajo de la
       última, la regla de `.cop-partidos` del 12/09— que arranca donde
       arranca el texto (la línea insertada de la opción A).

   ⚠ LA GENTE JUGANDO ES DE VERDAD O ES «—». La pinta `cop-fila-modo.js`
   con `COPJugando` (la RPC `jugando()`, que cuenta personas distintas
   con picks en partidos sin terminar, sin bots). Un modo cuyas jugadas
   no pasan por `alineaciones` no tiene de dónde sacar el número y queda
   con el guion: «todavía no lo sé», nunca un cero inventado.
   ══════════════════════════════════════════════════════════════════ */
.cop-fm{
  --fm-logo:64px; --fm-gap:14px;
  position:relative; box-sizing:border-box;
  display:grid; grid-template-columns:var(--fm-logo) minmax(0,1fr) auto;
  align-items:center; gap:var(--fm-gap);
  padding:var(--gap-lg, 1rem) 0;
  color:var(--text, #f4f6fb); text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  transition:transform .15s ease-out;
}
/* la línea entre filas, desde donde arranca el texto hasta el margen */
.cop-fm + .cop-fm::before{
  content:''; position:absolute; top:0; right:0;
  left:calc(var(--fm-logo) + var(--fm-gap));
  height:1px; background:var(--cop-pt-linea, rgba(255,255,255,.08));
  pointer-events:none;
}
.cop-fm:active{ transform:scale(.985); }
.cop-fm:focus-visible{ outline:2px solid var(--primary, #0c95eb); outline-offset:3px; border-radius:var(--r-card, 14px); }

/* el escudo, con el halo de su color detrás */
.cop-fm-logo{
  position:relative; width:var(--fm-logo); height:var(--fm-logo);
}
.cop-fm-logo::before{
  content:''; position:absolute; inset:-8px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(var(--tc-rgb, 12,149,235), .35), transparent 72%);
}
.cop-fm-logo::after{
  content:''; position:absolute; inset:0;
  background:var(--tc-logo, none) center / contain no-repeat;
}

.cop-fm-txt{ min-width:0; }
.cop-fm-fila{ display:flex; align-items:center; gap:var(--gap-sm, .5rem); min-width:0; }
/* ⚠ UN RENGLÓN: el que no entra se achica un escalón (lo mide el JS),
   no se corta con «…» — un texto recortado es un defecto. */
.cop-fm-tit{
  margin:0; min-width:0;
  font-family:'Anton', 'Arial Narrow', Impact, sans-serif; font-weight:400;
  font-size:var(--fm-tit, 1.3rem); line-height:1;
  letter-spacing:.3px; text-transform:uppercase;
  white-space:nowrap;
}
.cop-fm-jug{
  flex:none; display:inline-flex; align-items:center; gap:.25rem;
  color:var(--text-dim, #9aa3b5);
  font:600 .74rem/1 'Inter', sans-serif; font-variant-numeric:tabular-nums;
}
/* ⚠ TANDA 4 (24/09/2026): el dibujo es el Dúo en relieve de `cop-ico.js`
   (azul; violeta en División y Carrera con `data-ico-tono`). 15 → 18 px:
   a 15 el relieve se lee como una mancha. */
.cop-fm-jug svg{ width:18px; height:18px; display:block }
.cop-fm-sub{
  margin:.3rem 0 0;
  color:var(--text-dim, #9aa3b5);
  font:500 .8rem/1.35 'Inter', sans-serif;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.cop-fm-ir{
  font-style:normal; font-size:var(--fs-xl, 1.3rem); line-height:1;
  color:rgb(var(--tc-rgb, 12,149,235));
}

/* entrada: las filas aparecen de a una (stagger) */
@media (prefers-reduced-motion:no-preference){
  .cop-fm{ animation:copFmEntra .45s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(var(--i, 0) * 45ms); }
  .cop-fm-logo::before{ animation:copFmHalo 3.2s ease-in-out infinite alternate; }
}
@keyframes copFmEntra{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes copFmHalo{ from{ opacity:.7; } to{ opacity:1; } }
@media (hover:hover){ .cop-fm:hover .cop-fm-tit{ color:#fff; } .cop-fm:hover .cop-fm-ir{ transform:translateX(3px); } }
.cop-fm-ir{ transition:transform .2s ease-out; }
/* la última fila no lleva aire abajo: no hay línea que separar, y el aire
   sobre la barra de abajo lo pone `.cop-main` (regla del 24/09/2026) */
.cop-fm:last-child{ padding-bottom:0; }

/* ══ LA TAPA DE UNA COMPETENCIA (24/09/2026) ═══════════════════════
   Franco: *«cambiá el banner interno de las competencias que tengan uno
   (grupos, equipos competitivos, amistosos, clash draft, draft doble,
   mega spin, doble o nada, survival y batalla de sobres) (…) por el
   nuevo»*. Es la MISMA fila de la Arena, en grande y sin flecha: el
   escudo, el título, la gente jugando al lado y la bajada. Si el modo
   tiene «i» de información, va a la derecha, donde la fila de la Arena
   lleva la flecha.
   ⚠ Va como `<header>`: es la identidad de la pantalla, no un enlace. */
.cop-fm--tapa{
  --fm-logo:76px;
  padding:.2rem 0 .1rem; margin:0 0 var(--gap-lg, 1rem);
  cursor:default;
}
.cop-fm--tapa:active{ transform:none; }
.cop-fm--tapa .cop-fm-tit{ font-size:var(--fm-tit, 1.65rem); }
.cop-fm--tapa .cop-fm-sub{ font-size:var(--fs-md, .88rem); margin-top:var(--gap-xs, .3rem); -webkit-line-clamp:3; }
.cop-fm--tapa .cop-fm-logo::before{ inset:-10px; }
.cop-fm--tapa > .cop-mi-i{ align-self:center; }
@media (hover:hover){ .cop-fm--tapa:hover .cop-fm-tit{ color:inherit; } }