/* ══════════════════════════════════════════════════════════════════
   COP · LA TARJETA DE TORNEO  (07/09/2026)
   ──────────────────────────────────────────────────────────────────
   Franco: *«en la página de torneos tenés que crear un diseño de
   tarjeta moderno y horizontal para mostrar la info del torneo con
   nombre, fecha de inicio, tiempo hasta fecha de inicio, monto de
   entrada y bolsa de premios, con un diseño moderno y elegante que vaya
   a tono con la plataforma, sus fuentes y colores y tamaños. Tenés que
   usar los logos de Clash Coins y también los Tournaments Points»*.

   ══ POR QUÉ ES UNA PIEZA NUEVA ════════════════════════════════════
   ⚠⚠ HASTA HOY UN TORNEO SE MOSTRABA CON LA TARJETA DE PARTIDO
   (`.match-card` + `.cop-partido`), con la bandera del país donde va un
   escudo, «Bracket» donde va la liga y dos filas de equipos que un
   torneo no tiene. Se veía como un partido raro. Un torneo tiene otros
   datos —cuándo empieza, cuánto cuesta entrar, cuánto hay en juego— y
   por eso es otra tarjeta, no un ajuste de la de partido.

   ══ LO QUE ESTA HOJA NO DIBUJA ════════════════════════════════════
   ⚠ LOS DOS LOGOS SON `cop-iconos.css`: `.cop-ico--moneda` y
   `.cop-ico--punto`. Acá va sólo su tamaño en esta tarjeta.
   ⚠ EL MARCO ES `cop-borde`: la tarjeta NO declara `background` —
   dibuja con dos capas y cualquier fondo propio las apaga.

   ══ CÓMO SE USA ═══════════════════════════════════════════════════
   La arma `COPTarjetaTorneo.html({...})`. El marcado no se escribe a
   mano en ninguna pantalla.
   ══════════════════════════════════════════════════════════════════ */

.cop-tt{
  /* ⚠ `border-box` ESCRITO ACÁ: hay pantallas sin reset global y ahí el
     relleno se SUMA al ancho. */
  box-sizing:border-box;
  display:block; width:100%;
  position:relative;
  text-align:left;
  text-decoration:none;
  color:var(--text, #f4f6fb);
  font-family:var(--texto, 'Inter', system-ui, sans-serif);
  cursor:pointer;
  padding:var(--gap-lg, 1rem);

  /* los números del marco, para `cop-borde` */
  --borde-rgb:var(--cop-acento-rgb, 12,149,235);
  --borde-abajo:1;
  --borde-arriba:.12;
  --borde-grosor:1.5px;
  --borde-radio:var(--r-card, 14px);
  --borde-fondo:var(--bg, #0b0e14);

  transition:transform 120ms cubic-bezier(.2,.8,.2,1);
}
.cop-tt[hidden]{display:none}
@media (hover:hover) and (pointer:fine){
  .cop-tt:hover{ --borde-arriba:.30 }
}
.cop-tt:active{ transform:scale(.995) }
.cop-tt:focus{outline:none}
.cop-tt:focus-visible{
  --borde-arriba:.9; --borde-grosor:2px;
  box-shadow:0 0 0 3px rgba(var(--borde-rgb, 12,149,235), .22);
}

/* ── ARRIBA: la categoría y la cuenta regresiva ────────────────────
   ⚠ LA CUENTA VA ARRIBA A LA DERECHA Y ES LO ÚNICO QUE SE MUEVE de la
   tarjeta. Es el dato que decide si entro ahora o después, así que
   tiene que leerse sin buscarlo. */
.cop-tt-top{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--gap-md, .7rem);
  margin-bottom:var(--gap-sm, .5rem);
}
/* ⚠⚠ LA ETIQUETA CEDE, LA CUENTA NO. Los dos comparten una fila con
   `space-between`, y hasta hoy los dos eran `nowrap` sin poder achicarse:
   una etiqueta larga —«EVENTO · PREMIER LEAGUE · PREMIER LEAGUE»— se
   dibujaba ENCIMA de la cuenta regresiva. No lo vio ninguna medición
   (los dos textos estaban completos y dentro de la tarjeta): se vio en
   la captura.
   ⚠ QUIÉN CEDE ESTÁ ELEGIDO, no es casualidad: la cuenta es el dato que
   decide si entro ahora o después, y recortada no sirve de nada. La
   etiqueta dice de qué es el torneo, y recortada sigue diciendo la
   primera mitad.
   ⚠ `min-width:0` ES LO QUE HABILITA EL RECORTE: un ítem de flex no baja
   de su ancho de contenido sin eso, y el `text-overflow` no llega a
   aplicarse nunca. */
.cop-tt-tier{
  font-size:var(--fs-xs, .72rem); font-weight:800;
  letter-spacing:.08em; text-transform:uppercase;
  color:rgb(var(--cop-acento-rgb, 12,149,235));
  white-space:nowrap;
  min-width:0; overflow:hidden; text-overflow:ellipsis;
}
/* ⚠⚠ LOS COLORES POR CATEGORÍA SE FUERON (Franco, 07/09/2026). Eran
   cuatro reglas que pintaban «Legend» de dorado, «Pro» de violeta y
   «Rookie» de gris. Franco sacó la categoría de la tarjeta —*«tenés que
   eliminar el “Plata”, ya que la idea de los torneos es que sean por
   división y puntos»*— y con ella se van sus colores: la etiqueta ahora
   dice para qué divisiones es el torneo y de qué liga, y eso no tiene
   jerarquía que pintar. Un torneo de la división 9 no vale menos que uno
   de la 4: son para gente distinta.
   ⚠ EL ACENTO SE QUEDA porque es el de la competencia, no el de una
   categoría. */

.cop-tt-cuenta{
  display:inline-flex; align-items:center; gap:var(--gap-xs, .3rem);
  font-size:var(--fs-xs, .72rem); font-weight:800;
  color:var(--text-dim, #9aa3b5);
  white-space:nowrap;
  flex:0 0 auto;          /* no cede: ver la nota de `.cop-tt-tier` */
}
.cop-tt-cuenta svg{ width:13px; height:13px; display:block; flex:0 0 auto }
/* ⚠ CUANDO FALTA POCO, LA CUENTA SE PONE DORADA. Es el único momento en
   que el dato cambia de significado: de «cuándo es» a «se cierra». */
.cop-tt-cuenta.urge{ color:var(--gold, #ffc233) }
/* y cuando ya arrancó, deja de ser una cuenta */
.cop-tt-cuenta.vivo{ color:var(--ok, #22c55e) }

/* ── EL NOMBRE Y LA FECHA ──────────────────────────────────────────
   ⚠ ANTON PARA EL NOMBRE, y con techo en `--fs-xl`: es el título de una
   tarjeta, no el de la pantalla. */
.cop-tt-nombre{
  margin:0;
  font-family:'Anton', 'Arial Narrow', Impact, sans-serif;
  font-weight:400;
  font-size:clamp(1.05rem, 4.4vw, var(--fs-xl, 1.3rem));
  line-height:var(--lh-tight, 1.1);
  text-transform:uppercase;
  letter-spacing:.01em;
  color:var(--text, #f4f6fb);
  /* ⚠ NO SE RECORTA CON «…»: un nombre de torneo cortado no se puede
     buscar ni nombrar. Si no entra, baja de línea. */
  overflow-wrap:anywhere;
}
.cop-tt-fecha{
  margin:.18rem 0 0;
  font-size:var(--fs-sm, .8rem); font-weight:600;
  line-height:var(--lh-base, 1.3);
  color:var(--text-dim, #9aa3b5);
}

/* ── ABAJO: entrada · bolsa · inscriptos ───────────────────────────
   ⚠⚠ ES UNA FILA HORIZONTAL, que es lo que pidió Franco, y las columnas
   se separan con una LÍNEA y no con un fondo (regla 1). La línea va
   como borde IZQUIERDO de cada celda menos la primera: pintando el
   fondo del contenedor y dejando asomar el `gap`, con celdas de
   distinto alto quedan trazos sueltos colgando.
   ⚠ `minmax(0,1fr)` Y NO `1fr`: sin el `minmax`, un número largo
   —«1.250.000»— estira su columna y desalinea las otras dos. */
.cop-tt-datos{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:0;
  margin-top:var(--gap-lg, 1rem);
  padding-top:var(--gap-md, .7rem);
  border-top:1px solid var(--card-border, #1e2330);
}
.cop-tt-dato{
  min-width:0;
  padding:0 var(--gap-md, .7rem);
  border-left:1px solid var(--card-border, #1e2330);
}
.cop-tt-dato:first-child{ border-left:0; padding-left:0 }
.cop-tt-dato:last-child { padding-right:0 }

.cop-tt-k{
  display:block;
  font-size:var(--fs-xs, .72rem); font-weight:700;
  letter-spacing:.03em; text-transform:uppercase;
  color:var(--text-faint, #5a6275);
  margin-bottom:.22rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* ⚠ EL NÚMERO Y SU LOGO EN LA MISMA LÍNEA, con el logo primero: el ojo
   lee «moneda 500» como una cantidad de monedas, y «500 moneda» como un
   número con una nota al pie. */
.cop-tt-v{
  display:flex; align-items:center; gap:var(--gap-xs, .3rem);
  min-width:0;
  font-family:'Anton', 'Arial Narrow', Impact, sans-serif;
  font-weight:400;
  /* ⚠ ES UN NÚMERO DE DISPLAY, la excepción de la regla 4: el techo de
     1.5rem es para el TEXTO. */
  font-size:clamp(1rem, 4.6vw, 1.25rem);
  line-height:1;
  color:var(--text, #f4f6fb);
}
.cop-tt-v .cop-ico{ --cop-ico:18px; flex:0 0 auto }
.cop-tt-v span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

/* ⚠ LA BOLSA ES EL DATO QUE MÁS SE MIRA de un torneo: va en dorado, y
   es el único de la fila que se destaca. */
.cop-tt-dato--bolsa .cop-tt-v{ color:var(--gold, #ffc233) }
/* la entrada gratis no es «0»: es «Gratis» */
.cop-tt-dato--gratis .cop-tt-v{ color:var(--ok, #22c55e) }

/* los inscriptos: número de a dos, «24 / 32» */
.cop-tt-cupo{ color:var(--text-dim, #9aa3b5) }

/* ── EL EVENTO: LA MISMA TARJETA, CON SU COLOR ─────────────────────
   Franco (13/09/2026): *«las de eventos igual pero con el color de fondo
   de la liga o el evento»*.

   ⚠⚠ EL COLOR VA EN UNA CAPA HIJA Y NO EN `background`. `.cop-tt` lleva
   `cop-borde`, que dibuja el marco con DOS capas de fondo recortadas
   (una al `padding-box` y otra al `border-box`): un `background` propio
   las apaga y la tarjeta queda pintada Y SIN MARCO. Está escrito en
   `cop-borde.css` desde que existe, y se paga cada vez que alguien lo
   olvida.

   ⚠ `inset:0` CAE JUSTO ADENTRO DEL MARCO, sin taparlo: el borde de
   `cop-borde` es un `border` transparente de verdad, así que el bloque
   contenedor de un hijo absoluto es la caja de relleno — o sea, por
   dentro del degradado. Nada que restar a mano.

   ⚠ EL RADIO SE CALCULA, NO SE COPIA: el radio de la caja de relleno es
   el del borde menos su grosor. Con `border-radius:inherit` asoma un
   pelo de color en las cuatro esquinas. */
.cop-tt-arte{
  position:absolute; inset:0; z-index:0;
  pointer-events:none;
  border-radius:calc(var(--borde-radio, 14px) - var(--borde-grosor, 1.5px));
  background:
    radial-gradient(ellipse at 82% 6%,
      rgba(var(--tt-ev-rgb, 157,43,255), .40), transparent 62%),
    linear-gradient(155deg,
      rgba(var(--tt-ev-rgb, 157,43,255), .22), rgba(0,0,0,.50) 74%);
}
/* ⚠ EL CONTENIDO TIENE QUE SUBIR. Un hijo absoluto se dibuja POR ENCIMA
   del contenido en flujo aunque esté declarado primero: sin esto, el
   degradado tapa el nombre y los tres números. Es la misma regla que ya
   aplicaba `.bn-bg` en la tarjeta de evento anterior. */
/* ⚠⚠⚠ LAS PIEZAS DE LA TARJETA DE SALA ESTABAN FALTANDO EN ESTA LISTA
   (23/09/2026) y el emblema quedaba DEBAJO del degradado de color. No
   desaparecía —por eso casi se me pasa mirando la captura—, se veía
   apagado, como si el logo estuviera mal exportado. Un hijo absoluto se
   dibuja por encima del contenido en flujo aunque esté declarado
   primero; sólo suben los que tienen `position` propio. El arnés lo
   comprueba ahora pieza por pieza. */
.cop-tt-cab, .cop-tt-pie, .cop-tt-emblema,
.cop-tt-top, .cop-tt-nombre, .cop-tt-fecha, .cop-tt-datos{
  position:relative; z-index:1;
}
/* ⚠ EL MARCO TAMBIÉN TOMA EL COLOR DEL EVENTO: con el degradado adentro
   y el marco celeste, la tarjeta se lee como dos piezas pegadas. Es el
   mismo mecanismo del acento de competencia, con otra variable. */
.cop-tt[data-evento]{
  --borde-rgb:var(--tt-ev-rgb, 157,43,255);
}
/* ⚠ SOBRE EL DEGRADADO, LOS RÓTULOS GRISES SE PIERDEN. El fondo de la
   tarjeta dejó de ser el negro plano de la página, así que la tinta
   apagada que se leía sobre `--bg` acá queda por debajo del mínimo. */
.cop-tt[data-evento] .cop-tt-k{ color:rgba(255,255,255,.72) }
.cop-tt[data-evento] .cop-tt-fecha{ color:rgba(255,255,255,.82) }
.cop-tt[data-evento] .cop-tt-tier{ color:#fff }
.cop-tt[data-evento] .cop-tt-nombre{ text-shadow:0 2px 10px rgba(0,0,0,.45) }
/* y las líneas que separan las columnas, que se apoyaban en el gris del
   borde de tarjeta */
.cop-tt[data-evento] .cop-tt-datos,
.cop-tt[data-evento] .cop-tt-dato{ border-color:rgba(255,255,255,.18) }

/* ── EL PUESTO (historial) ─────────────────────────────────────────
   ⚠ EL «de 8» VA EN LA MISMA LÍNEA Y MÁS CHICO: es la escala del puesto,
   no un segundo número. Puesto abajo, en su renglón, la celda crece y
   desalinea las otras dos. */
.cop-tt-de{
  font-family:var(--texto, 'Inter', system-ui, sans-serif);
  font-style:normal; font-weight:700;
  font-size:var(--fs-xs, .72rem);
  color:var(--text-dim, #9aa3b5);
  margin-left:.3rem;
  white-space:nowrap;
}

/* ── ESTADOS ───────────────────────────────────────────────────────
   ⚠ EL TORNEO CERRADO SE APAGA, NO SE ESCONDE (regla 9): el jugador
   tiene que ver que existió y cómo terminó. */
.cop-tt[data-estado="terminado"],
.cop-tt[data-estado="anulado"]{
  --borde-rgb:255,255,255;
  --borde-abajo:.30;
  --borde-arriba:.04;
}
.cop-tt[data-estado="terminado"] .cop-tt-nombre,
.cop-tt[data-estado="anulado"]   .cop-tt-nombre{ color:var(--text-dim, #9aa3b5) }
.cop-tt[data-estado="terminado"] .cop-tt-dato--bolsa .cop-tt-v,
.cop-tt[data-estado="anulado"]   .cop-tt-dato--bolsa .cop-tt-v{ color:var(--text-dim, #9aa3b5) }
/* ⚠ Y EL COLOR DEL EVENTO SE APAGA CON ÉL. Un evento terminado con su
   degradado a full se lee más vivo que los torneos abiertos que tiene al
   lado: el color dejaría de significar «esto está pasando».
   ⚠ Estas dos reglas van DESPUÉS de las de `[data-evento]` a propósito:
   empatan en especificidad (clase + atributo) y gana la última. */
.cop-tt[data-estado="terminado"] .cop-tt-arte,
.cop-tt[data-estado="anulado"]   .cop-tt-arte{ opacity:.28 }

/* ── LA LISTA ──────────────────────────────────────────────────────
   ⚠ SEPARADAS POR AIRE Y NO POR UNA LÍNEA: cada tarjeta ya tiene su
   marco, y una línea entre dos marcos es un tercer trazo. */
.cop-tt-lista{
  display:flex; flex-direction:column;
  gap:var(--gap-md, .7rem);
}
.cop-tt-lista[hidden]{display:none}
/* ⚠⚠ LOS MÁRGENES DE LA APP (24/09/2026). Franco: «las tarjetas de
   historial de torneos no respetan los márgenes laterales, asegurate de
   achicarlas y acomodarlas (…) las tarjetas de eventos también».
   La causa: en Historial y Eventos la lista vive adentro de un contenedor
   `.cop-partidos`, que en el teléfono va a SANGRE (100vw, para que las
   filas de partido lleguen al borde). Una tarjeta con marco no es una
   fila: se pegaba a los dos bordes de la pantalla. Se le devuelve el
   aire de la app —el mismo que tiene la cartelera de la tab Torneos— y
   el rótulo de ejemplo también. En escritorio el contenedor no sangra,
   así que ahí no se agrega nada. */
@media (max-width:760px){
  .cop-partidos > .cop-tt-lista,
  .cop-partidos > .cop-ejemplo-nota{ padding-inline:var(--aire-contenido, 16px); box-sizing:border-box }
}

/* ── PANTALLA CHICA ────────────────────────────────────────────────
   ⚠ A 320 px LAS TRES COLUMNAS NO ENTRAN con el logo adentro: pasan a
   dos y la tercera baja. Las líneas se recalculan por posición, no se
   borran. */
@media (max-width:359px){
  .cop-tt-datos{ grid-template-columns:repeat(2, minmax(0, 1fr)); row-gap:var(--gap-md, .7rem) }
  .cop-tt-dato:nth-child(odd){ border-left:0; padding-left:0 }
  .cop-tt-dato:nth-child(3){ padding-top:var(--gap-md, .7rem);
    border-top:1px solid var(--card-border, #1e2330) }
}

/* ══════════════════════════════════════════════════════════════════
   EL MODELO DE SUPERVIVENCIA  (16/09/2026)
   ──────────────────────────────────────────────────────────────────
   Franco pasó los torneos a pool único sin cupo: la tercera celda dejó
   de decir «5 / 8» —no hay denominador— y pasó a decir cuánto falta
   para que el torneo arranque.
   ⚠ `.cop-tt-de` ya existe y ya trae el tamaño y el color apagados: acá
   sólo se agregan los dos casos nuevos. Escribir un estilo propio
   habría sido la segunda forma de decir lo mismo.
   ══════════════════════════════════════════════════════════════════ */

/* «ya arranca»: es una buena noticia, y el verde del sistema es el
   único color que ya significa eso en toda la app. */
.cop-tt-arranca{ color:var(--ok, #22c55e); font-style:normal; font-weight:600 }

/* la entrada en cartas: el número y la rareza, sin ícono de moneda.
   ⚠ `text-transform:capitalize` y no el nombre escrito con mayúscula en
   el JS: la rareza viene de la base en minúscula y así se sigue
   comparando en minúscula en todos lados. */
.cop-tt-dato--cartas .cop-tt-v{ text-transform:capitalize }

/* ══ LA VARIANTE DE SALA (21/09/2026) ══════════════════════════════
   Franco: *«las tarjetas de Mega Spin tienen que tener el mismo mismo
   diseño que las de torneos»*, con el logo, el nombre y los dos botones
   arriba, y abajo las tres celdas de siempre.

   ⚠⚠ ACÁ NO SE REDEFINE NADA DE LA TARJETA: ni el fondo, ni el marco,
   ni la grilla de las tres celdas, ni la tipografía. Todo eso ya está
   arriba y es lo que hace que las dos se vean iguales. Lo único que se
   escribe es la fila de arriba, que es la única pieza nueva. */
/* ══════════════════════════════════════════════════════════════════
   LA TARJETA DE SALA, REHECHA  (23/09/2026)
   ──────────────────────────────────────────────────────────────────
   Franco: *«quiero que rehagas completamente el diseño interno de la
   tarjeta, ya que quiero que el logo de la competencia sea totalmente
   protagonista en tamaño y el título también, acomodando el resto de
   información y botones de forma moderna y elegante»*.

   La forma se acordó mirando una probeta, tanda por tanda. El resultado
   en una línea: EMBLEMA y NOMBRE arriba, ocupando el mismo alto; el
   contador de usuarios flotando en la esquina; y abajo dos datos y el
   botón, todo en un renglón.

   ══⚠⚠⚠ LO QUE SE PROBÓ Y NO QUEDÓ, para no repetirlo ══════════════
   · El contador como FILA propia: costaba 40 px de alto y dejaba la
     tarjeta MÁS ALTA que la de tres filas que se venía a achicar.
     Flotando en la esquina no cuesta un píxel. Medido: 213 contra 167.
   · El nombre en dos renglones al lado del emblema, con las cifras a la
     derecha: obliga a bajar el nombre a 21 px para que entre, o sea que
     el título deja de ser protagonista — que era el pedido.
   · El marco de esquinas en los BOTONES: les apaga los estados (hover,
     apretado, foco), que están escritos sobre otra perilla. Ver el
     comentario largo en `cop-boton.css`.
   ══════════════════════════════════════════════════════════════════ */
.cop-tt--sala{
  text-align:left;
  /* ⚠ el contador va `absolute` contra la tarjeta */
  position:relative;
  display:grid;
  /* ⚠⚠ `minmax(0,1fr)` Y NO LA COLUMNA AUTOMÁTICA (23/09/2026). Con la
     columna `auto`, el ancho mínimo del pie —la suma de sus datos— estira
     la columna MÁS ALLÁ de la tarjeta: con el historial de Mega Spin
     (cuatro piezas en el pie) el «POSICIÓN» se salía 16 px por la derecha
     y ningún número se achicaba para hacerle lugar. Así la columna mide
     lo que mide la tarjeta y los datos ceden adentro. */
  grid-template-columns:minmax(0, 1fr);
  gap:var(--gap-md, .8rem);
}

/* ── EL CONTADOR DE USUARIOS, EN LA ESQUINA ───────────────────────
   ⚠ ES EL MISMO DIBUJO Y EL MISMO GRIS QUE `.lv-gente` DE LA TARJETA DE
   PARTIDO, a pedido de Franco: *«como en nuestras tarjetas de
   partidos»*. No es una pieza nueva que haya que mantener aparte.
   ⚠⚠ SIN LA PALABRA «JUGANDO» (Franco, 23/09/2026): *«simplemente el
   logo de usuarios y la cantidad de los mismos»*. */
.cop-tt-gente{
  /* ⚠⚠ YA NO VA EN LA ESQUINA (Franco, 24/09/2026): va a la DERECHA DEL
     NOMBRE, en su renglón, y el ícono es CELESTE como en las filas de la
     Arena (`cop-fila-modo.css`). En la esquina quedaba «mal colocado
     encima» y además obligaba al nombre a reservarle 30 px. */
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:var(--fs-sm, .8rem); font-weight:600;
  color:var(--text-dim, #9aa3b5);
  white-space:nowrap; pointer-events:none;
}
.cop-tt-gente svg{ width:15px; height:15px; flex:0 0 auto; color:rgb(var(--tt-ev-rgb, 12,149,235)) }
.cop-tt-gente b{ color:var(--text, #f4f6fb); font-weight:700;
                 font-variant-numeric:tabular-nums }

/* ── ARRIBA: EMBLEMA Y NOMBRE ─────────────────────────────────────── */
.cop-tt-cab{
  display:grid;
  grid-template-columns:var(--tt-emblema, 98px) minmax(0, 1fr);
  gap:var(--gap-md, .9rem);
  align-items:center;
}
/* ⚠⚠ CAJA FIJA, NO ALTO LIBRE. Los tres logos no tienen la misma
   proporción: Mega Spin es 260×174 y Survival y Doble o Nada 260×195.
   Con alto libre, cada competencia daba una tarjeta de distinto alto y
   la simetría se caía justo al cambiar de pantalla. El arnés compara el
   alto del emblema entre las tres competencias por esto. */
.cop-tt-emblema{
  width:var(--tt-emblema, 98px);
  height:var(--tt-emblema-alto, 68px);
  display:grid; place-items:center;
}
.cop-tt-emblema img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  display:block;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.45));
}
/* ⚠ EL HUECO DEL CONTADOR: sin esta reserva un nombre largo se mete por
   debajo del número de la esquina. 30 px y no más, porque cada píxel de
   acá es un píxel menos de nombre — y el ajuste automático comprueba
   además que no se pisen, así que el margen no hace falta que sobre. */
.cop-tt-tit{
  min-height:var(--tt-emblema-alto, 68px);
  display:flex; align-items:center; gap:var(--gap-md, .7rem);
  min-width:0;
}
/* ⚠⚠ EL TAMAÑO LO ESCRIBE `COPTarjetaTorneo.ajustarNombres()` EN
   `--tt-nom-px`, y no está escrito acá a propósito: es el más grande con
   el que el nombre más largo entra en UN renglón, medido en la pantalla
   de verdad con la fuente ya cargada. El valor de acá es sólo el
   respaldo para el instante anterior a la medición. */
.cop-tt-nombre--sala{
  font-family:'Anton', 'Arial Narrow', Impact, sans-serif;
  font-weight:400;
  font-size:var(--tt-nom-px, 22px);
  line-height:.95;
  letter-spacing:.005em;
  text-transform:uppercase;
  /* ⚠ UN SOLO RENGLÓN, SIEMPRE (Franco: *«necesito que siempre esté todo
     visible en una sola fila»*). El `nowrap` es además lo que hace
     posible el cálculo: con el texto en un renglón, `scrollWidth` dice
     exactamente cuánto mide el nombre. */
  white-space:nowrap;
  margin:0;
  overflow-wrap:normal;
}

/* ── ABAJO: DOS DATOS Y LA ACCIÓN, EN UN RENGLÓN ──────────────────── */
.cop-tt-pie{
  display:flex; align-items:flex-end; gap:var(--gap-md, .75rem);
  border-top:1px solid var(--card-border, #2a3040);
  padding-top:var(--gap-md, .8rem);
}
/* ══ LA SALA MÁS BAJA (Franco, 24/09/2026) ═════════════════════════
   *«en las tarjetas de ingreso por categoría de Survival, Doble o Nada y
   Mega Spin tenés que hacerlas más bajas, ya que sobra espacio innecesario
   entre las cosas de adentro (…) y bajar la línea del medio divisoria más
   cerca del contenido de abajo»*. Vale igual para el historial, que es la
   misma pieza.
   Medido antes (390 px): 177 de alto; el emblema en una caja de 68, 13 px
   de aire hasta la línea y 28 desde la línea hasta los datos.
   · el emblema baja a una caja de 84 × 54 (la proporción de los tres
     logos entra igual: 260×174 y 260×195);
   · el relleno de la tarjeta baja a 12 px arriba y abajo;
   · la línea queda a 6 px de lo de abajo y a 12 de lo de arriba: se lee
     como el borde de ARRIBA de los datos, que es lo que es. */
.cop-tt--sala{
  --tt-emblema:84px; --tt-emblema-alto:54px;
  padding-top:var(--gap-md, .7rem); padding-bottom:var(--gap-md, .7rem);
  gap:var(--gap-md, .7rem);
}
.cop-tt--sala .cop-tt-pie{ padding-top:var(--gap-sm, .5rem); }
/* ⚠ SIN LAS LÍNEAS DIVISORIAS ENTRE DATOS de la tarjeta de torneo: acá
   son dos y el separador de más los apretaba. El aire alcanza. */
.cop-tt-datos--sala{
  display:flex; gap:var(--gap-xl, 1.2rem); flex:1 1 auto; min-width:0;
  grid-template-columns:none; border:0; padding:0;
  /* ⚠ y SIN el `margin-top` de 16 px que trae `.cop-tt-datos` del torneo:
     era aire invisible entre la línea y los datos (24/09/2026) */
  margin-top:0;
}
.cop-tt-datos--sala .cop-tt-dato{
  border:0; padding:0; min-width:0;
}
.cop-tt-pie .cop-b{ flex:0 0 auto; white-space:nowrap }

/* ── EL RESULTADO EN EL LUGAR DEL BOTÓN (historial) ────────────────
   «Posición 1» · «Ronda 3». Lo dibuja `marca()` en el JS con la MISMA
   estructura de una celda (`.cop-tt-k` + `.cop-tt-v`); leé ahí por qué va
   apilado. Acá sólo se alinea contra el borde derecho y se le da el alto
   del botón chico (36 px), que es lo que mantiene la tarjeta del
   historial igual de alta que la del lobby. */
.cop-tt-marca{
  flex:0 0 auto;
  display:flex; flex-direction:column; justify-content:flex-end;
  align-items:flex-end; text-align:right;
  min-height:36px; box-sizing:border-box;
}
.cop-tt-marca .cop-tt-k{ margin-bottom:.22rem }
.cop-tt-marca .cop-tt-v{ justify-content:flex-end }
/* ⚠ CON CUATRO PIEZAS EN EL PIE LA SEPARACIÓN BAJA A `--gap-md`. La del
   lobby (1.15rem) es para dos datos y un botón; con tres datos y la
   marca, esos 7 px por hueco son los que hacen que «Recompensa» entre
   entera a 360 px. Sólo en el historial: el lobby no se mueve. */
.cop-tt-datos--sala.cop-tt-datos--hist{ gap:var(--gap-md, .7rem) }
.cop-tt-datos--hist .cop-tt-dato{ flex:0 1 auto }
/* ⚠⚠ POR DEBAJO DE 360 PX EL LOBBY TAMBIÉN APRIETA (28/09/2026, tanda F).
   A 330 px la sala de 1.000 mostraba «ENTRA…», «1.0…» y «100.…»: el
   número ya está en su piso (1rem) y el botón es de la ley, así que lo
   único que puede ceder es el aire. Entre los dos datos baja a
   `--gap-md` (el mismo que el historial) y entre datos y botón a
   `--gap-sm`. Medido con Inter y Anton de verdad: entran enteros a 330
   (`_salas-tarjeta-torneo`, ancho «mini»). De 360 para arriba no cambia
   nada. */
@media (max-width:359px){
  .cop-tt--sala .cop-tt-pie{ gap:var(--gap-sm, .5rem) }
  .cop-tt-datos--sala{ gap:var(--gap-md, .7rem) }
}

/* ── LA CAPA DE COLOR, MÁS SUAVE EN LA SALA ───────────────────────
   ⚠ La tarjeta de TORNEO usa un baño fuerte (.40 arriba a la derecha y
   .22 en diagonal) que ahí funciona: es una tarjeta grande con una foto
   de evento detrás. En la sala, con el emblema y el nombre en grande,
   ese mismo baño se come el contraste y el celeste del marco de
   esquinas deja de distinguirse del fondo. Éste es el tono de la
   probeta que Franco aprobó. No se toca el de torneos. */
.cop-tt--sala .cop-tt-arte{
  background:linear-gradient(145deg,
    rgba(var(--tt-ev-rgb, 12,149,235), .20) 0%,
    rgba(var(--tt-ev-rgb, 12,149,235), .05) 42%,
    transparent 72%);
}

/* ⚠⚠ EL JACKPOT SE LLEVA EL ANCHO QUE SOBRA — corregido el 21/09 sobre
   una captura. Con las tres columnas en `1fr` iguales, la sala de 1.000
   mostraba «100.…» en lugar de 100.000: el número más largo de la fila
   vivía en la columna más apretada. La entrada y los jugadores son de
   uno a cuatro caracteres y no necesitan un tercio de la tarjeta.
   ⚠ SÓLO EN LA SALA: en un torneo las tres columnas sí miden parecido y
   las iguales dan una grilla más prolija. */
.cop-tt--sala .cop-tt-datos{
  grid-template-columns:auto minmax(0, 1fr) auto;
}

/* ── LA SALA EN PANTALLA ANGOSTA ───────────────────────────────────
   ⚠⚠ ACÁ HABÍA DOS MEDIA QUERIES DE LA TARJETA ANTERIOR (21/09/2026),
   escritas para `.cop-tt-logo`, `.cop-tt-top--sala`, `.cop-tt-sub` y
   `.cop-tt-acciones` —clases que la tarjeta rehecha del 23/09 ya no
   tiene— y SE BORRARON el 23/09/2026. No eran inofensivas: la única que
   todavía encontraba su pieza clavaba `.cop-tt-nombre--sala` en .9rem por
   debajo de 360 px, y como va al final del archivo le ganaba al tamaño
   calculado por `ajustarNombres()`: en un teléfono de 320 el nombre salía
   de 14 px aunque entraba de 34. Lo caza `_historial-salas` (F), que
   compara lo dibujado contra lo calculado.
   El nombre ya no necesita una regla por ancho: el cálculo baja solo
   hasta donde entra. */


/* ══ FONDO Y MARCO DE LA LIGA (Franco, 07/10/2026) ═══════════════════
   La imagen de Franco teñida por liga (marca/torneos/, de
   `hacer-fondo-torneo.py`), con el logo CP a la derecha. Va en una capa
   hija como `.cop-tt-arte`: un `background` propio apagaría las dos capas
   con que `cop-borde` dibuja el marco. El velo de la izquierda deja leer
   el nombre y los números. */
.cop-tt[data-liga-color]{ --borde-rgb:var(--tt-liga-rgb, 12,149,235) }
.cop-tt-fondo{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  border-radius:calc(var(--borde-radio, 14px) - var(--borde-grosor, 1.5px));
  background:
    linear-gradient(90deg, rgba(5,8,14,.88) 0%, rgba(5,8,14,.70) 45%, rgba(5,8,14,.25) 75%, rgba(5,8,14,.05) 100%),
    var(--tt-fondo-img, url('marca/torneos/fondo-celeste.webp?v=1')) 100% 30% / auto 118% no-repeat,
    #05080e;
}
.cop-tt[data-liga-color="violeta"] { --tt-fondo-img:url('marca/torneos/fondo-violeta.webp?v=1') }
.cop-tt[data-liga-color="azul"]    { --tt-fondo-img:url('marca/torneos/fondo-azul.webp?v=1') }
.cop-tt[data-liga-color="rojo"]    { --tt-fondo-img:url('marca/torneos/fondo-rojo.webp?v=1') }
.cop-tt[data-liga-color="verde"]   { --tt-fondo-img:url('marca/torneos/fondo-verde.webp?v=1') }
.cop-tt[data-liga-color="dorado"]  { --tt-fondo-img:url('marca/torneos/fondo-dorado.webp?v=1') }
.cop-tt[data-liga-color="plateado"]{ --tt-fondo-img:url('marca/torneos/fondo-plateado.webp?v=1') }
.cop-tt[data-estado="terminado"] .cop-tt-fondo,
.cop-tt[data-estado="anulado"]   .cop-tt-fondo{ opacity:.35; filter:grayscale(.6) }
/* sobre la imagen, los rótulos grises se pierden (igual que en el evento) */
.cop-tt[data-liga-color] .cop-tt-k{ color:rgba(255,255,255,.72) }
.cop-tt[data-liga-color] .cop-tt-fecha{ color:rgba(255,255,255,.82) }
.cop-tt[data-liga-color] .cop-tt-nombre{ text-shadow:0 2px 10px rgba(0,0,0,.5) }
.cop-tt[data-liga-color] .cop-tt-datos,
.cop-tt[data-liga-color] .cop-tt-dato{ border-color:rgba(255,255,255,.16) }
.cop-tt[data-liga-color] .cop-tt-tier{ color:rgb(var(--tt-liga-rgb, 12,149,235)) }

/* ══ 09/10/2026 · HISTORIAL DE MEGA SPIN: el estado y el partido al pie ══ */
.cop-tt-estado{
  margin-left:auto; flex:0 0 auto; white-space:nowrap;
  font-size:var(--fs-xs, .72rem); font-weight:700; letter-spacing:0;
  color:var(--text-dim, #9aa3b5);
}
.cop-tt-estado[data-est="vivo"]{ color:#ff5a6a }
.cop-tt-estado[data-est="vivo"]::before{
  content:''; display:inline-block; width:.42rem; height:.42rem; border-radius:50%;
  background:currentColor; margin-right:.35rem; vertical-align:.08rem;
  animation:cop-tt-late 1.4s ease-in-out infinite;
}
.cop-tt-estado[data-est="fin"]{ color:var(--primary, #0c95eb) }
/* reglas1 (13/10/2026): el partido terminó y la sala todavía no pagó; y la anulada */
.cop-tt-estado[data-est="calculando"]{ color:#ffc233 }
.cop-tt-estado[data-est="anulada"]{ color:var(--text-dim, #9aa3b5) }
@keyframes cop-tt-late{ 50%{ opacity:.35 } }
@media (prefers-reduced-motion:reduce){ .cop-tt-estado[data-est="vivo"]::before{ animation:none } }
.cop-tt-debajo{
  position:relative; margin-top:var(--gap-md, .75rem); padding-top:var(--gap-md, .75rem);
  border-top:1px solid var(--linea, rgba(255,255,255,.09));
}
/* ══ 09/10/2026 · LOS CUPOS (salas16): con 3 datos y botón, el botón va
   abajo a lo ancho y los datos tienen el renglón entero (en Survival el
   pozo «1.140» se cortaba). Mismo armado que el duelo al azar de los drafts. */
.cop-tt--sala .cop-tt-pie:has(.cop-tt-dato:nth-child(3)):not(:has(.cop-tt-dato:nth-child(4))):has(> .cop-b){ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--gap-md, .7rem) }
.cop-tt--sala .cop-tt-pie:has(.cop-tt-dato:nth-child(3)):not(:has(.cop-tt-dato:nth-child(4))):has(> .cop-b) .cop-tt-datos{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)) }
.cop-tt--sala .cop-tt-pie:has(.cop-tt-dato:nth-child(3)):not(:has(.cop-tt-dato:nth-child(4))):has(> .cop-b) > .cop-b{ width:100% }