/* ══════════════════════════════════════════════════════════════════
   COP · LA TARJETA DE DUELO — el componente definitivo (19/09/2026)
   ──────────────────────────────────────────────────────────────────
   Franco: *«quiero que hagas exactamente este mismo diseño de tarjetas
   en todas las competencias, tenés que hacer este el componente
   definitivo de las tarjetas de duelos. Tanto en partidos e historial de
   Champions Clash, como Rivals League, Torneos, Clash Draft, etc. En
   todos lados este es el componente final de tarjeta de partidos y de
   historial»*.

   ⚠⚠⚠ POR ESO ESTO ES UN ARCHIVO Y NO UN BLOQUE ADENTRO DE UNA PÁGINA.
   «El mismo diseño en todas las competencias» tiene exactamente dos
   caminos: uno es copiar este CSS en doce pantallas —y a la tercera
   corrección habrá doce tarjetas que se parecen—, y el otro es este.
   El proyecto ya pagó ese precio cuatro veces: cuatro tarjetas de
   historial nacidas de una copia, Franco pidió un cambio y apareció en
   una sola. **Se muda, no se copia.**

   ⚠⚠ Y NO REEMPLAZA A `cop-ui-partido.css`: SE APOYA EN ÉL. La tarjeta
   sigue siendo `.cop-partidos > article.cop-partido` con sus `mc-row`,
   su columna fija, su línea divisoria y su alto mínimo. Este archivo
   agrega tres cosas que esa tarjeta no tenía:

     1. la BARRA del partido real, con las dos camisetas y la luz de
        cada equipo llenando su mitad;
     2. la LUZ detrás de la camiseta de cada duelista, con el color de
        su propia camiseta;
     3. el VEREDICTO (victoria / derrota) y las MONEDAS ganadas, en la
        columna donde la tarjeta de partido pone el botón.

   Quitando este archivo, la tarjeta vuelve a ser una tarjeta de partido
   normal: no rompe nada, sólo pierde lo de arriba.

   ══════════════════════════════════════════════════════════════════
   CÓMO SE USA
   ══════════════════════════════════════════════════════════════════
       <link rel="stylesheet" href="cop-ui-partido.css?v=335">
       <link rel="stylesheet" href="cop-tarjeta-duelo.css?v=1">
       <script src="cop-camisetas.js?v=290"></script>
       <script src="cop-tarjeta-duelo.js?v=1"></script>

       contenedor.innerHTML = COPDuelo.lista([
         { yo:{alias:'frandragotto', pts:80},
           rival:{alias:'nico_arq',  pts:44},
           partido:{ local:'Bayern München', visita:'Barcelona',
                     marcador:'3-1' },
           res:'g', ganado:4560 }
       ]);

   ⚠ TODO LO QUE NO SE PASA, NO SE DIBUJA: sin `partido` no hay barra,
   sin `res` no hay veredicto, sin `ganado` no hay monedas. Una tarjeta
   con menos datos no se ve rota, se ve más simple. Es lo que le permite
   servir para un partido que todavía no se jugó y para uno terminado.
   ══════════════════════════════════════════════════════════════════ */

/* ── EL ANCHO DE LAS COLUMNAS ──────────────────────────────────────
   ⚠ El botón de esta tarjeta es más angosto que el de la tarjeta de
   partido (112 contra 140): acá no existe «Jugar 59m 56s», que es el
   texto que fijó aquel número. Y la columna del marcador se achica
   porque lleva un puntaje de dos dígitos y no un resultado. */
.cop-partidos .cop-duelo{ --cop-pt-btn:112px; --cop-pt-marc:52px }

/* ══ LOS DOS MARCADORES EN LA MISMA VERTICAL ══════════════════════
   Franco, 21/09/2026: *«necesito que el marcador de la parte de arriba
   esté centrado con el de la parte de abajo del resultado del duelo, en
   la misma vertical, usando la mitad de la pantalla como referencia»*.

   ⚠⚠ EL PROBLEMA NO ERA EL DE ARRIBA: el marcador de la barra ya caía
   en 195, que es justo la mitad de un iPhone 14. El que estaba corrido
   era el de ABAJO. La tarjeta de partido reparte la fila en
   `1fr | marcador | botón` con el botón FIJO en 112–140 px, así que la
   columna del número queda donde la deja el botón —centro en 214, o sea
   19 px a la derecha— y no en el medio. En una tarjeta de partido eso
   está bien: ahí abajo no hay nada con qué alinearse. Acá sí: la barra
   del partido real está justo encima.

   ⚠ LA SOLUCIÓN ES SIMÉTRICA Y NO UN NÚMERO: las dos columnas de los
   costados son `1fr`, así que la del medio queda exactamente en el
   centro sola, en cualquier ancho de pantalla. Un `margin-left:-19px`
   habría funcionado en el iPhone 14 y estado mal en todos los demás.
   ⚠ Y LA COLUMNA DERECHA NO SE ACHICA: en un iPhone SE le tocan 123 px,
   más que los 112 que pide el botón más largo de esta tarjeta.
   ⚠ `minmax(0,…)` en la primera se conserva: con `1fr` a secas el mínimo
   es el contenido y un alias largo empuja las otras dos columnas. Ya
   pasó. */
.cop-partidos > .cop-duelo .mc-row{
  grid-template-columns:minmax(0,1fr) var(--cop-pt-marc, 52px) minmax(0,1fr);
}

/* ══ 0 · LA CABECERA (opcional) ═══════════════════════════════════
   ⚠⚠ EL `mc-header` LO ESTILA `cop-ui-partido.css` Y ACÁ NO SE REDEFINE
   NADA DE ÉL: si esta hoja le tocara el alto, el color o el tamaño de
   letra, la cabecera de un duelo y la de un partido dejarían de medir lo
   mismo y al cambiar de pestaña la pantalla se reacomodaría — que es
   justo lo que Franco pidió que no pasara. Lo único que se dice acá es
   cuánto aire va entre la cabecera y la barra del partido real, que es
   una pieza nueva y por lo tanto nadie más podía saberlo.
   ⚠ Sin cabecera, la barra no tiene nada arriba y esta regla no aplica:
   el `+` la limita al caso en que las dos existen. */
.cop-duelo .mc-header + .cd-barra{ margin-top:var(--gap-sm, .5rem) }

/* ⚠ LA RONDA EN LA CABECERA (`cabecera.ronda`, «Ronda 2», «Cuartos»).
   El componente la dibujaba desde el 21/09 pero su estilo vivía SÓLO en
   `torneo-juego.html`: en cualquier otra pantalla salía con la letra por
   defecto, más grande y fina que la liga de al lado (lo vio la captura de
   las rondas de Doble o Nada, 24/09/2026). Ahora es del componente. */
.cop-duelo .mc-round{
  font-family:'Inter',sans-serif;font-weight:800;font-size:var(--fs-xs, .72rem);
  letter-spacing:1.2px;text-transform:uppercase;white-space:nowrap;
  color:rgb(var(--cop-acento-rgb, 12,149,235));
}
/* el cartel de un duelo de EJEMPLO: va donde iría la liga y en dorado,
   para que no se lea como un resultado
   ⚠ VIVE ACÁ Y NO EN LA PÁGINA: `.md-demo` estaba escrito adentro de
   `modos-competitivos.html` y hoy lo necesitan las cuatro competencias
   que se mudan a esta tarjeta. Copiarlo cuatro veces es exactamente la
   deuda que este archivo existe para no volver a pagar. */
.cop-duelo .cd-marca,
/* ⚠ el mismo cartel suelto, fuera de una tarjeta (la lista de jugadores
   de Survival, 24/09/2026): una sola regla para las dos */
.cop-marca-ejemplo{
  display:inline-block; padding:0 var(--gap-sm, .5rem); height:22px; line-height:22px;
  border-radius:7px; background:rgba(255,194,51,.12);
  border:1px solid rgba(255,194,51,.45); color:var(--gold, #ffc233);
  font:700 .6rem/22px Inter, sans-serif; letter-spacing:.06em; white-space:nowrap;
}

/* ══ 1 · LA BARRA DEL PARTIDO REAL ════════════════════════════════
   ⚠⚠ SE LLEVA LA LÍNEA ENTERA. Dos mitades exactas —`1fr auto 1fr`—
   cada una con la luz de SU equipo llenando su mitad, y la costura al
   medio. El local va camiseta → nombre y el visitante nombre →
   camiseta: espejados, con los dos escudos en los extremos. Es lo que
   hace que la barra se lea como un partido y no como una lista.
   ⚠ `overflow:hidden` en la barra para que ninguna de las dos luces se
   derrame sobre la otra mitad. */
.cop-duelo .cd-barra{
  position:relative; isolation:isolate; overflow:hidden;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:var(--gap-sm, .5rem); height:var(--cd-barra-alto, 46px); margin-bottom:.5rem;
  border-radius:var(--r-card, 14px);
  background:var(--s1, #11141d);
  /* ⚠ EL BORDE VA COMO SOMBRA INTERIOR Y NO COMO `border`, y es por un
     píxel que se ve: un `border` real corre el contenido 1 px hacia
     adentro, así que la camiseta caía en 23 contra los 22 del escudo de
     abajo y la de la derecha en 367 contra 368. Un píxel no se nota
     mirando una tarjeta; se nota en una lista de ocho, como un temblor
     en la columna. `inset` pinta la misma línea sin ocupar lugar. */
  box-shadow:inset 0 0 0 1px var(--b1, #1e2330);
}
/* ⚠⚠ SIN AIRE A LOS COSTADOS: LAS CAMISETAS SE ALINEAN CON LAS DE
   ABAJO (Franco, 21/09/2026). *«la camiseta del equipo de la izquierda
   debe estar a la misma altura que las camisetas de los usuarios abajo
   (…) y la de la derecha va posicionada en el margen, misma distancia
   máxima que la info de abajo»*.
   La barra ya ocupaba exactamente el ancho del contenido (22 → 368 en
   un iPhone 14), pero sus camisetas tenían 10 px de aire propio: una
   arrancaba en 33 contra los 22 del escudo de abajo, y la otra terminaba
   en 357 contra los 368 del veredicto. Se saca ese aire y cada camiseta
   pasa a vivir en una columna del MISMO ancho que el escudo de la fila
   —`--cop-pt-crest`, 38 px—, centrada adentro. Así las dos comparten eje
   con la de abajo aunque el dibujo sea más chico, que es lo que hace que
   la tarjeta se lea como una sola grilla y no como dos. */
.cop-duelo .cd-lado{
  position:relative; display:flex; align-items:center; gap:var(--gap-sm, .5rem);
  min-width:0; padding:0; height:100%;
}
/* ⚠ EL VISITANTE ES EL ESPEJO, NO EL REVÉS. `row-reverse` parecía lo
   correcto y ponía la camiseta ANTES del nombre, metida hacia adentro.
   Lo que se quiere es el orden natural —nombre, camiseta— empujado al
   margen derecho. */
.cop-duelo .cd-lado--der{ justify-content:flex-end }
/* ⚠ EL AIRE SE LO QUEDA EL NOMBRE, NO LA CAMISETA: el nombre sí tiene
   que despegarse de la costura del medio, pero la camiseta tiene que
   tocar el margen para alinear con la de abajo. */
.cop-duelo .cd-lado b{ padding-right:var(--gap-xs, .3rem) }
.cop-duelo .cd-lado--der b{ padding-right:0; padding-left:var(--gap-xs, .3rem) }
.cop-duelo .cd-lado::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(70% 150% at 12% 120%,
    var(--cd-luz, #31b6ff) 0%, transparent 72%);
  filter:saturate(1.3); opacity:.34;
}
.cop-duelo .cd-lado--der::before{
  background:radial-gradient(70% 150% at 88% 120%,
    var(--cd-luz, #31b6ff) 0%, transparent 72%);
}
.cop-duelo .cd-kit{
  position:relative; z-index:1; flex:none;
  /* la columna mide lo que el escudo de la fila de abajo; el dibujo va
     centrado adentro y más chico, porque la barra es más baja */
  width:var(--cd-kit-col, 38px); height:100%;
  display:grid; place-items:center;
}

/* ⚠ EL DIBUJO SIGUE MIDIENDO 26, NO 38: la COLUMNA se agrandó para
   alinear con el escudo de abajo, pero la barra tiene 46 px de alto y
   una camiseta de 38 la toca arriba y abajo. La columna alinea; el
   dibujo respira. */
.cop-duelo .cd-kit img{
  width:26px; height:26px; object-fit:contain; display:block;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.55));
}
.cop-duelo .cd-lado b{
  position:relative; z-index:1; min-width:0;
  font:700 .68rem/1 Inter, sans-serif; letter-spacing:.05em;
  text-transform:uppercase; color:var(--text, #f4f6fb);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cop-duelo .cd-lado--der b{ text-align:right }
/* la costura del medio: la misma línea de luz que parte la pantalla del
   duelo, en chico */
.cop-duelo .cd-eje{
  position:relative; z-index:1; display:grid; place-items:center;
  padding:0 .5rem; height:100%;
}
/* ⚠⚠ LA COSTURA DEL MEDIO SE FUE (Franco, 21/09/2026): *«la sección del
   partido real no tiene que tener esa línea divisoria al medio
   blanca»*. Estaba para marcar que la barra son dos mitades, y no hacía
   falta: las dos luces de color ya lo dicen, cada una llenando la suya.
   La línea sumaba un elemento blanco en el único lugar de la tarjeta
   donde no hay ningún otro, y se llevaba la vista al centro en vez de a
   los equipos. Se borra, no se esconde: una regla apagada vuelve. */
/* ⚠ EL VS Y EL MARCADOR OCUPAN EL MISMO LUGAR porque son dos estados
   del mismo partido, nunca los dos a la vez (ver el comentario del
   dibujante). Por eso el eje sigue siendo una sola celda centrada y no
   una columna: probé apilarlos y Franco lo corrigió el mismo día. */
.cop-duelo .cd-vs{
  font:700 .58rem/1 Inter, sans-serif; letter-spacing:.12em;
  text-transform:uppercase; color:var(--tx-3, #7c8597); font-style:normal;
}
.cop-duelo .cd-mar{
  font:400 var(--fs-lg, 1.15rem)/1 Anton, sans-serif; font-style:normal;
  color:var(--text, #f4f6fb); font-variant-numeric:tabular-nums;
}

/* ══ 2 · LA LUZ DETRÁS DE LA CAMISETA DEL DUELISTA ════════════════
   ⚠⚠ EL COLOR LO PONE EL JS LEYENDO LA MISMA TABLA QUE PINTA LA
   CAMISETA, y viene ACLARADO. Es la corrección que más costó encontrar:
   la luz estaba puesta y medida —opacidad .42, degradé dibujado— pero
   `COPKit.datos()` devuelve el color BASE de la camiseta, pensado para
   pintar tela y no para iluminar. Un verde a 30 % de luz, al 42 % de
   opacidad, sobre un fondo al 6 %, no se ve. Subir la opacidad sólo
   ensuciaba el fondo: lo que hacía falta era subirle la LUZ al color.
   ⚠ VA DETRÁS Y LA CAMISETA ADELANTE: encima, el dibujo se lava. */
.cop-duelo .cd-crest{ position:relative; isolation:isolate }
.cop-duelo .cd-crest::before{
  content:''; position:absolute; inset:-24%; border-radius:50%; z-index:0;
  background:radial-gradient(50% 50% at 50% 55%,
    var(--cd-luz, #31b6ff) 0%, transparent 72%);
  filter:saturate(1.35) blur(1px); opacity:.5;
}
.cop-duelo .cd-crest img{ position:relative; z-index:1 }
/* ⚠ EL HUECO SIN RIVAL: se marca con una silueta apenas insinuada, no
   con un cuadro vacío. Un hueco negro se lee como un dibujo que no
   cargó; un contorno punteado dice «acá va alguien y todavía no está». */
.cop-duelo .cd-crest--vacio{
  border:1px dashed rgba(255,255,255,.15); border-radius:var(--r-card, 14px);
  background:rgba(255,255,255,.025);
}
.cop-duelo .cd-crest--vacio::before{ content:none }

/* ══ 3 · EL PUNTAJE, EL VEREDICTO Y LAS MONEDAS ═══════════════════
   ⚠ El puntaje va en la columna fija del marcador —donde un partido
   pone los goles—, así los dos caen uno debajo del otro pase lo que
   pase con el largo de los alias. */
.cop-duelo .cd-pts{
  font:400 var(--fs-lg, 1.15rem)/1 Anton, sans-serif;
  font-variant-numeric:tabular-nums; color:var(--text, #f4f6fb);
  text-align:center; white-space:nowrap;
}
.cop-duelo .cd-pts--vacio{ color:var(--tx-3, #7c8597); font-size:var(--fs-md, .88rem) }

/* ⚠⚠ EL VEREDICTO VA SIEMPRE EN LA FILA DEL JUGADOR —la primera—, nunca
   en la del rival: es TU resultado el que estás buscando.
   ⚠ LLEVA EL SÍMBOLO **Y EL MONTO** (21/09/2026): el símbolo dice si
   ganaste, el número dice cuánto. La palabra «Victoria» decía lo mismo
   que el símbolo y se fue; sólo queda como reemplazo cuando la
   competencia no trae el monto, para que el hueco nunca quede mudo.
   ⚠ EL ÍCONO NO SE VA NUNCA: el color no alcanza —hay gente que no
   distingue verde de rojo— y un «+500» solo no dice de dónde salió. */
.cop-duelo .cd-ver,
.cop-duelo .cd-gana{
  grid-column:3; width:100%;
  display:inline-flex; align-items:center; justify-content:flex-end; gap:var(--gap-xs, .3rem);
}
.cop-duelo .cd-ver b{
  font:700 .66rem/1 Inter, sans-serif; letter-spacing:.07em; text-transform:uppercase;
}
.cop-duelo .cd-ver--g b{ color:var(--ok, #22c55e) }
.cop-duelo .cd-ver--p b{ color:var(--red, #ff3b5c) }
.cop-duelo .cd-ico{ display:inline-grid; place-items:center; width:17px; height:17px; flex:none }
.cop-duelo .cd-ico svg{ width:100%; height:100%; display:block }
.cop-duelo .cd-ver--g .cd-ico{ color:var(--ok, #22c55e) }
.cop-duelo .cd-ver--p .cd-ico{ color:var(--red, #ff3b5c) }

/* ── LAS MONEDAS GANADAS, EN LA FILA DE ABAJO ──────────────────────
   ⚠⚠ VAN ABAJO Y NO AL LADO DEL SÍMBOLO (Franco, 21/09/2026, corrigiendo
   la prueba del mismo día). Los dos datos son distintos y cada uno se
   lleva su renglón: arriba QUÉ pasó, abajo CUÁNTO dejó.
   ⚠ SON DORADAS AUNQUE EL SÍMBOLO DE ARRIBA SEA VERDE: el dorado es el
   color de las Clash Coins en toda la app —la moneda, la tienda, el
   jackpot—. Pintarlas de verde porque el duelo se ganó las convertiría
   en «un número bueno» en vez de monedas.
   ⚠ EL CERO VA EN GRIS Y SIN `+`: no se ganó nada.
   ⚠ `tabular-nums` para que las cifras de varias tarjetas caigan en la
   misma columna; si no, la lista tiembla al leerla. */
.cop-duelo .cd-gana{
  font:400 var(--fs-lg, 1.15rem)/1 Anton, sans-serif; color:var(--gold, #ffc233);
  font-variant-numeric:tabular-nums;
}
/* ⚠ LA MONEDA A .9em Y NO A .8: `moneda.png` es un dibujo con relieve,
   no un ícono plano, y por debajo de ~16 px se le pierde el borde y
   queda una mancha marrón. Acá el texto va en `--fs-lg`, así que .9em
   la deja cerca de los 19 px con los que se lee en el resto de la app. */
/* ⚠ TANDA 4 (24/09/2026): 0,9em → 1,1em. Franco: «las monedas de la
   tarjeta de historial tienen que ser más grandes, quedaron muy chicas, un
   poco nada más, tampoco tanto». Queda a la altura de las cifras en Anton
   (~23 px con el texto en `--fs-lg`), no más: más grande le gana al número. */
.cop-duelo .cd-gana .cop-ico{ --cop-ico:1.1em; width:1.1em; height:1.1em }
.cop-duelo .cd-gana--cero{ color:var(--tx-3, #7c8597) }
.cop-duelo .cd-gana--cero .cop-ico{ opacity:.5 }

/* ── EL DATO DE LA SEGUNDA FILA (el puesto, en grupos) ─────────────
   ⚠⚠ MISMO HUECO, MISMA ALINEACIÓN Y MISMO PESO QUE LAS MONEDAS: lo
   único que cambia es el dato. Un duelo de dos deja monedas; un
   free-for-all de ocho deja un puesto. Si esto se dibujara más chico o
   corrido, dos competencias vecinas dejarían de verse iguales — que es
   justamente lo que el componente vino a resolver.
   ⚠ EL «de 8» VA AL LADO Y CHICO, no debajo: un segundo renglón acá
   estira la fila y desalinea las tarjetas vecinas. */
.cop-duelo .cd-dato{
  grid-column:3; width:100%;
  display:inline-flex; align-items:baseline; justify-content:flex-end; gap:.28rem;
}
.cop-duelo .cd-dato b{
  font:400 var(--fs-lg, 1.15rem)/1 Anton, sans-serif; font-weight:400;
  color:var(--text, #f4f6fb); font-variant-numeric:tabular-nums;
}
/* ⚠ el estado —«Sin liquidar», «Anulado»— va chico y gris: es una
   explicación, no un resultado. En Anton grande le ganaba en peso al
   veredicto de la tarjeta de al lado. */
.cop-duelo .cd-dato--tenue b{
  font:500 var(--fs-md, .88rem)/1.2 Inter, sans-serif;
  color:var(--tx-3, #7c8597); text-align:right;
}
.cop-duelo .cd-dato i{
  font:500 var(--fs-sm, .8rem)/1 Inter, sans-serif; font-style:normal;
  color:var(--tx-3, #7c8597); white-space:nowrap;
}

/* ── VARIANTE COMPACTA ─────────────────────────────────────────────
   ⚠ Para las listas de contexto —las rondas anteriores de una
   competencia, por ejemplo—: se achica el ALTO, nunca la tipografía. El
   dato se tiene que seguir leyendo igual de bien. */
.cop-partidos .cop-duelo--mini{ --cop-pt-alto:0px }
.cop-duelo--mini .mc-row{ padding-block:.28rem }
.cop-duelo--mini .cd-barra{ --cd-barra-alto:38px }

/* ══════════════════════════════════════════════════════════════════
   LA TARJETA SIN DUELO — SÓLO EL PARTIDO SORTEADO  (21/09/2026)
   ──────────────────────────────────────────────────────────────────
   Franco: *«no empareja con el rival en ese momento (…) entonces no
   aparecen todavía las camisetas del jugador y del rival, aparece
   únicamente el partido que le salió sorteado»*.

   ⚠ NO HAY REGLA DE DIBUJO NUEVA: la cabecera y la barra del partido
   real son las mismas. Lo único que cambia es que abajo no hay dos
   filas, así que el relleno de abajo de la barra sobra — sin esto queda
   un hueco del alto de una fila debajo del marcador.
   ⚠ Y SI HAY BOTÓN, VA CENTRADO: en la tarjeta normal se apoya contra
   el nombre del jugador de su fila; acá no hay fila contra la que
   apoyarse. */
/* ⚠⚠ Y DESDE LA CORRECCIÓN DE ESA MISMA TARDE, cuando el modo trae
   `stats`/`jugar` no se dibuja la barra. ⚠ ronda 18 (24/09/2026): ese
   caso ya ni siquiera es esta tarjeta — es `COPTarjetaPartido`
   (`cop-tarjeta-partido.css`). Con él se fueron de acá `.mc-btn--apagado`
   (el botón apagado ahora es un `<button disabled>` y lo dibuja
   `.cop-b[disabled]`) y `.cop-partidos > .cop-duelo--solo .mc-row` (la
   columna del marcador cerrada de las dos filas de equipos, que ya no
   existen en este modo). Se verificó con grep que nadie más las usaba.
   Estas reglas siguen valiendo para el caso sin botones. */
.cop-duelo--solo .cd-barra{ margin-bottom:0 }
.cd-solo{
  display:flex; align-items:center; justify-content:center;
  padding-top:var(--gap-sm, .5rem);
}

/* ══ 5 · LAS DOS CARTAS (07/10/2026, `cartas:true`) ═════════════════
   Franco: «a la izquierda la tarjeta del usuario y a la derecha la del
   rival, con el monto de puntos al medio (…) abajo de los puntos las
   recompensas (…) arriba de los puntos victoria o derrota (…) las
   tarjetas pueden ser de tamaño normal».
   ⚠ Tres columnas: carta · duelo · carta. Las cartas comparten ancho
   (1fr) y no pasan de 132 px: a 390 miden ~107, a 320 ~84 — ni póster
   ni miniatura. El medio tiene un piso para que «Victoria» y un «1.250»
   entren sin cortar. */
.cop-duelo--cartas .cd-dos{
  /* ⚠ EL MEDIO TIENE ANCHO FIJO: con `auto`, un «1250» o «Buscando rival»
     lo ensanchaba y las cartas cambiaban de tamaño de una tarjeta a otra
     (lo mostró la captura). Fijo, las cartas miden lo mismo en toda la lista.
     ⚠ `cd-dos` y no `cd-vs`: `cd-vs` ya es el «vs» de la barra. */
  display:grid; grid-template-columns:minmax(0,1fr) 6.8rem minmax(0,1fr);
  align-items:center; gap:var(--gap-md, .7rem);
  padding:var(--gap-md, .7rem) var(--gap-sm, .5rem) var(--gap-lg, 1rem);
}
.cop-duelo--cartas .cd-vs-carta{ width:100%; max-width:132px; justify-self:center; min-width:0 }
.cop-duelo--cartas .cd-vs-carta:first-child{ justify-self:end }
.cop-duelo--cartas .cd-vs-carta:last-child{ justify-self:start }
/* el hueco sin rival: el mismo tamaño que una carta, y lo dice */
.cop-duelo--cartas .cd-vs-hueco{
  aspect-ratio:1052 / 1328; box-sizing:border-box;
  display:grid; place-items:center; text-align:center; padding:var(--gap-sm, .5rem);
  border:1px dashed rgba(255,255,255,.18); border-radius:var(--r-card, 14px);
  font:700 var(--fs-xs, .72rem)/1.2 Inter, sans-serif; color:var(--text-dim, #9aa3b5);
}
.cop-duelo--cartas .cd-vs-centro{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--gap-sm, .5rem); min-width:0; text-align:center;
}
/* el veredicto, centrado y en su renglón (no la columna 3 de las filas) */
.cop-duelo--cartas .cd-vs-centro .cd-ver{ grid-column:auto; width:auto; justify-content:center }
.cop-duelo--cartas .cd-ver--e b{ color:var(--text-dim, #9aa3b5) }
.cop-duelo--cartas .cd-vs-estado{
  font:700 .66rem/1 Inter, sans-serif; letter-spacing:.07em; text-transform:uppercase;
  color:var(--text-dim, #9aa3b5);
}
/* los puntos: mis puntos a la izquierda, los del rival a la derecha */
.cop-duelo--cartas .cd-vs-pts{
  display:flex; align-items:center; justify-content:center; gap:var(--gap-sm, .5rem);
  font:400 1.6rem/1 Anton, sans-serif; font-variant-numeric:tabular-nums; white-space:nowrap;
}
.cop-duelo--cartas .cd-vs-pts i{ width:1px; height:1.1em; background:rgba(255,255,255,.18) }
.cop-duelo--cartas .cd-vs-yo{ color:var(--text, #f4f6fb) }
.cop-duelo--cartas .cd-vs-ri{ color:var(--text-dim, #9aa3b5) }
.cop-duelo--cartas .cd-vs-vacio{ color:var(--tx-3, #7c8597); font-size:var(--fs-lg, 1.15rem) }
.cop-duelo--cartas .cd-vs-rot{
  margin-top:calc(-1 * var(--gap-xs, .3rem));
  font:700 var(--fs-xs, .72rem)/1 Inter, sans-serif; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-dim, #9aa3b5);
}
/* las recompensas: trofeos y monedas, uno debajo del otro */
.cop-duelo--cartas .cd-vs-prem{ display:flex; flex-direction:column; align-items:center; gap:var(--gap-xs, .3rem) }
.cop-duelo--cartas .cd-vs-prem .cd-gana{ grid-column:auto; width:auto; justify-content:center; font-size:var(--fs-base, 1rem) }
.cop-duelo--cartas .cd-vs-tro{
  display:inline-flex; align-items:center; gap:var(--gap-xs, .3rem);
  font:400 var(--fs-base, 1rem)/1 Anton, sans-serif; color:var(--gold, #ffc233); font-variant-numeric:tabular-nums;
}
.cop-duelo--cartas .cd-vs-tro svg{ width:1.15em; height:1.15em }
.cop-duelo--cartas .cd-vs-tro--menos{ color:var(--text-dim, #9aa3b5) }
@media (max-width:359px){
  .cop-duelo--cartas .cd-dos{ gap:var(--gap-sm, .5rem); grid-template-columns:minmax(0,1fr) 5.6rem minmax(0,1fr) }
  .cop-duelo--cartas .cd-vs-pts{ font-size:1.3rem }
}

/* ══ 6 · EL GANADOR DE UN DUELO GRUPAL (07/10/2026, `ganadorCarta:true`) ══
   La carta del ganador a la izquierda (el mismo ancho que en el 1 vs 1)
   y, a su lado, el dato: «Ganador», sus puntos, cuántos jugaron y mi
   puesto — sin mi nombre (Franco: «eso se tiene que ver adentro»). */
.cop-duelo--ganador .cd-gn{
  display:grid; grid-template-columns:minmax(0,150px) minmax(0,1fr);
  align-items:stretch; gap:var(--gap-xl, 1.3rem);
  padding:var(--gap-md, .75rem) var(--aire-contenido, 16px) var(--gap-lg, 1.1rem);
}
@media (max-width:420px){ .cop-duelo--ganador .cd-gn{ grid-template-columns:minmax(0,44%) minmax(0,1fr); gap:var(--gap-lg, 1.1rem) } }
.cop-duelo--ganador .cd-gn .cd-vs-carta{ max-width:150px; justify-self:start; align-self:center }
.cop-duelo--ganador .cd-gn-info{ display:flex; flex-direction:column; justify-content:center; min-width:0 }
.cop-duelo--ganador .cd-gn-top{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--gap-sm, .5rem); padding-bottom:var(--gap-md, .75rem) }
.cop-duelo--ganador .cd-gn-info .cd-ver{ grid-column:auto; width:auto; justify-content:flex-start; font-size:var(--fs-base, 1rem) }
.cop-duelo--ganador .cd-gn-pts{ font:400 2.4rem/1 Anton, sans-serif; color:var(--text, #f4f6fb); font-variant-numeric:tabular-nums }
.cop-duelo--ganador .cd-gn-pts small{ margin-left:.35rem; font:700 var(--fs-sm, .8rem)/1 Inter, sans-serif; color:var(--text-dim, #9aa3b5); text-transform:uppercase; letter-spacing:.05em }
.cop-duelo--ganador .cd-gn-jug{ display:inline-flex; align-items:center; gap:var(--gap-xs, .3rem);
  font:700 var(--fs-md, .88rem)/1 Inter, sans-serif; color:var(--text, #f4f6fb) }
.cop-duelo--ganador .cd-gn-jug svg{ width:17px; height:17px }
.cop-duelo--ganador .cd-gn-yo{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap-md, .75rem);
  padding-top:var(--gap-md, .75rem); border-top:1px solid rgba(255,255,255,.1); width:100% }
.cop-duelo--ganador .cd-gn-c{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--gap-xs, .3rem); min-width:0 }
.cop-duelo--ganador .cd-gn-c > i{ font:700 var(--fs-xs, .72rem)/1 Inter, sans-serif; font-style:normal;
  color:var(--text-dim, #9aa3b5); text-transform:uppercase; letter-spacing:.05em }
.cop-duelo--ganador .cd-gn-c .cd-dato{ grid-column:auto; width:auto; justify-content:flex-start; font-size:1.5rem }
.cop-duelo--ganador .cd-gn-mis{ font:400 1.5rem/1 Anton, sans-serif; color:var(--text, #f4f6fb); font-variant-numeric:tabular-nums }

/* ══ 7 · EL PARTIDO COMO EN RESULTADOS (08/10/2026) ═══════════════════
   `presentacion()` → `COPTarjetaPartido.fila()`; acá sólo el aire con el
   borde de la tarjeta (el mismo de la cabecera). */
.cop-duelo .cd-res{padding:0 var(--cd-aire, 1rem);margin:0 0 var(--gap-sm, .45rem)}
.cop-duelo .cd-res .ctp--res{padding:var(--gap-xs, .3rem) 0}
.cop-duelo--carrera .cd-ca-obj{ font:700 var(--fs-base, 1rem)/1 Inter, sans-serif; color:#fff; }
.cop-duelo--ganador .cd-gn-c .cd-dato b{ font:400 1.5rem/1 Anton, sans-serif }