/* ══════════════════════════════════════════════════════════════════
   COP · EL PANEL SEMANAL DE UNA COMPETENCIA (24/08/2026)
   ------------------------------------------------------------------
   La pestaña «Ranking» de Clash Draft y de Draft Doble: victorias de la
   semana, puesto en el ranking general, vidas que quedan y el camino de
   recompensas. Y la INSIGNIA compacta —corona + victorias + vidas— que
   va a la derecha de cada fila en el ranking de la competencia.

   ⚠⚠ UN SOLO ARCHIVO PARA LAS DOS COMPETENCIAS Y LAS DOS PANTALLAS.
   Clash Draft y Draft Doble comparten esto entero; lo único que cambia
   es el acento, que sale de `--cs-c` y cada página ya define. Si esto
   se hubiera escrito adentro de cada página serían cuatro copias del
   mismo panel, que es exactamente lo que pasó con las tarjetas de
   historial en agosto.

   ⚠ EL DISEÑO SALE DE LA REFERENCIA DE FRANCO, EL ESTILO NO. La captura
   que pasó es de otro juego, con relieve, dorados y trazo grueso. Lo que
   se copia es la ESTRUCTURA —el número de victorias arriba, el puesto
   debajo, las vidas, y el camino de niveles— traducida al lenguaje
   oscuro y plano de esta app. Copiar el estilo habría metido una isla
   visual en el medio del producto.
   ══════════════════════════════════════════════════════════════════ */

.cs-panel{
  /* ⚠⚠ SIN RECUADRO (Franco, 24/08/2026): *"eliminá ese recuadro general
     alrededor del indicador de rondas, vidas y carrusel de niveles, el
     contenido tiene que estar full visible sobre el fondo de la página"*.
     Antes esto era una tarjeta con borde, fondo y padding propio, y ese
     padding era además el que recortaba el carrusel a los costados. Sin
     caja, el aire lateral lo pone la página —una sola vez— y el riel
     puede llegar al borde físico. */
  --cs-c: var(--cd-c, var(--primary,#0c95eb));
  --cs-rgb: var(--cd-rgb, 12,149,235);
  /* el aire lateral de la página, para poder cancelarlo en el riel */
  --cs-aire: 1rem;
  position:relative;
  padding:var(--gap-sm, .5rem) 0 0;
  background:none;border:0;border-radius:0;
  /* ⚠ NO lleva `overflow:hidden`: era lo que cortaba el resplandor de
     los niveles alcanzados contra el borde de la caja. */
  overflow:visible;
}

/* ── VICTORIAS: el número grande de arriba ────────────────────────── */
.cs-tit{
  text-align:center;font-family:'Inter',sans-serif;
  font-size:var(--fs-xs, .72rem);font-weight:800;letter-spacing:2.6px;text-transform:uppercase;
  color:var(--text-dim,#9aa3b5);margin:0 0 .5rem;
}
/* ══ VICTORIAS Y PUESTO, UNO AL LADO DEL OTRO (10/09/2026) ═════════
   *«el indicador de puesto… con el mismo tamaño de título que el de
   victorias, a la derecha, alineados, y el número grande como el logo de
   victorias, en Anton. Entonces quedan a la misma altura con el mismo
   tamaño»* (Franco).
   ⚠ MITAD Y MITAD, y las dos columnas alineadas ARRIBA (`start`): son
   dos datos del mismo peso, y centrarlos verticalmente dejaría los
   rótulos a distinta altura porque el escudo es más alto que el número.
   ⚠ EL NÚMERO DEL PUESTO SE CENTRA EN EL ALTO DEL ESCUDO: sin eso queda
   pegado al rótulo y la fila se lee torcida. */
.cs-duo{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--gap-md, .7rem);align-items:start;
}
.cs-duo-col{display:flex;flex-direction:column;align-items:center;min-width:0}
.cs-vic{
  display:flex;align-items:center;justify-content:center;gap:.7rem;margin-bottom:var(--gap-sm, .5rem);
}
/* ⚠⚠ EL ESCUDO ES `escudo-victorias.webp` (tanda BH, 02/09/2026): el
   hexágono CP que cargó Franco, el MISMO para las dos competencias —
   por eso ya no toma el color de la competencia (acá vivía un SVG
   laurel pintado con `--cs-c`; se fue con la imagen). La caja respeta
   la proporción del archivo (341×512, un hexágono alto).
   ⚠ Los márgenes de esta columna (y los del puesto, las vidas y el
   botón) se AJUSTARON el 02/09/2026 al agrandar el camino a 4 por
   pantalla: la regla del 28/08 —«todo debe entrar sin scroll»— sigue
   vigente y la mide lote-s A9; las cajas grandes se pagan con aire de
   los márgenes, no con scroll. */
.cs-vic-escudo{
  position:relative;width:66px;height:99px;flex:0 0 auto;
  display:grid;place-items:center;
}
.cs-vic-escudo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.cs-vic-n{
  position:relative;z-index:1;
  font-family:'Anton',sans-serif;font-size:2.1rem;line-height:1;color:#fff;
  text-shadow:0 3px 16px rgba(0,0,0,.55);
  /* un pelo hacia arriba: el logo CP vive en la punta de abajo del
     hexágono y el número centrado exacto se le encimaba */
  transform:translateY(-14%);
}

/* ── PUESTO ───────────────────────────────────────────────────────── */
/* ⚠⚠ SIN CAJA (Franco, 28/08/2026): *«el recuadro de puesto tiene que ser
   más chico y no tener ni bordes ni ese fondo celeste; la posición del
   jugador tiene que estar sobre el fondo de la pantalla directamente, y
   centrado»*. Era una píldora de 260 px con borde y fondo del color de
   la competencia, y con el rótulo a la izquierda y el número pegado a la
   derecha —o sea, el número no estaba centrado en ningún lado—. Ahora el
   rótulo y el número van juntos en el medio, sobre el fondo. Es la misma
   decisión que ya se tomó con `.cs-panel` el 24/08: menos cajas
   anidadas, el contenido sobre la página. */
/* ⚠ EL RÓTULO YA NO VIVE ACÁ: es un `.cs-tit`, el MISMO que «Victorias»,
   que es lo que pidió Franco («con el mismo tamaño de título»). Tener dos
   rótulos con dos tamaños para dos datos del mismo peso era la razón por
   la que el puesto se leía como una nota al pie. */
.cs-puesto{
  display:grid;place-items:center;
  /* la misma altura que el escudo, para que los dos números queden a la
     misma línea sin escribir un margen a mano */
  height:99px;margin:0 0 var(--gap-sm, .5rem);
  padding:0;border:0;background:none;
}
.cs-puesto-n{
  font-family:'Anton',sans-serif;font-size:2.1rem;line-height:1;color:#fff;
  text-shadow:0 3px 16px rgba(0,0,0,.55);font-variant-numeric:tabular-nums;
}
/* ⚠ sin puesto todavía va un guion, NO un «1»: un número inventado en
   una tabla que no existe se lee como un dato. */
.cs-puesto-n.vacio{color:var(--text-faint,#5a6275)}

/* ── VIDAS / DERROTAS ─────────────────────────────────────────────── */
/* ══ DERROTAS, A TODO EL ANCHO (Franco, 10/09/2026) ════════════════
   *«el indicador de derrotas más amplio, cubriendo todo el ancho de la
   pantalla pero respetando los márgenes»*.
   Los chips iban en una fila centrada con `gap:var(--gap-sm, .5rem)`, así que tres
   derrotas ocupaban 98 px en el medio de una pantalla de 390 y el bloque
   se leía como un detalle. Ahora es una grilla de columnas iguales que
   ocupa el ancho del panel — y el ancho del panel YA respeta los
   márgenes, así que no hace falta escribir ninguno.
   ⚠ LOS CHIPS NO SE ESTIRAN: la caja crece y el chip se queda en su
   medida, centrado en su columna. Un chip de 90 px de ancho con un
   corazón adentro no es un chip, es una barra. */
.cs-vidas{display:flex;flex-direction:column;align-items:stretch;gap:var(--gap-xs, .3rem);margin-bottom:var(--gap-md, .7rem)}
.cs-vidas-lab{
  font-size:var(--fs-xs, .72rem);font-weight:800;letter-spacing:2px;text-transform:uppercase;
  color:#ff5c7a;
}
.cs-vidas-fila{
  display:grid;grid-template-columns:repeat(var(--cs-vidas, 3), minmax(0,1fr));
  gap:var(--gap-sm, .5rem);justify-items:center;width:100%;
}
/* ⚠⚠ EL CHIP LLEVA `cop-borde` DESDE EL MARCADO (Franco, 02/09/2026,
   tanda BH): fondo de la página + degradé gris de la competencia. Acá
   NO pueden volver `border`, `background` ni `border-radius` propios:
   cualquiera de los tres le apaga el degradé al componente (la misma
   regla que en `.cs-nivel-caja`). Solo se escriben las VARIABLES y la
   medida. Antes: borde fijo `#2a3040` + fondo blanquecino. */
.cs-vida{
  width:30px;height:30px;
  display:grid;place-items:center;
  --borde-rgb:var(--cs-rgb);--borde-abajo:.45;--borde-arriba:.05;
  --borde-radio:9px;--borde-grosor:1.5px;
}
.cs-vida svg{width:15px;height:15px;display:block;color:var(--red, #ff3b5c)}
/* la vida gastada: la cruz roja, y el MISMO degradé virado al rojo —
   pintarle un fondo, como antes, mataría las capas de `cop-borde` */
.cs-vida.usada{--borde-rgb:255,59,92;--borde-abajo:.6;--borde-arriba:.12}

/* ── EL CAMINO DE RECOMPENSAS ─────────────────────────────────────
   ⚠⚠ CINCO POR PANTALLA (Franco, 10/09/2026: *«el camino de recompensas
   tiene que ser igual, y tiene que verse 100% visible los 5 recuadros
   uno al lado del otro sin que el borde tape algo»*).
   Historia corta, porque este número ya cambió dos veces: cinco desde el
   24/08 —y la sexta asomaba—, cuatro desde el 02/09, y cinco otra vez
   ahora. Lo que hacía asomar a la de al lado no era la cantidad: era que
   el riel se sangraba a `100vw` (se corrigió el 08/09) y que no tenía
   dónde dibujar el marco (se corrige hoy con `--cs-luz`). Con las dos
   cosas resueltas, cinco entran enteras adentro de los márgenes.
   Avanza de a uno, sin una línea de JS: cada nivel lleva
   `scroll-snap-align:start` y el imán del navegador para en CADA nivel. */
.cs-camino-tit{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--gap-md, .7rem);
  margin:0 0 var(--gap-sm, .5rem);
}
.cs-camino-tit b{
  font-size:var(--fs-xs, .72rem);font-weight:800;letter-spacing:2px;text-transform:uppercase;
  color:var(--text-dim,#9aa3b5);
}
.cs-camino-tit span{font-size:var(--fs-xs, .72rem);color:var(--text-faint,#5a6275)}
.cs-camino{
  display:flex;gap:.5rem;
  overflow-x:auto;
  /* ⚠⚠ EL IMÁN PARA EN CADA POSICIÓN (Franco, 08/09/2026: *«el scroll
     tiene que ser de posición en posición»*): `mandatory` + un
     `scroll-snap-align:start` por nivel. Con `proximity` el navegador
     decide si engancha o no, y el carrusel queda a veces a mitad de
     camino. */
  scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;

  /* ⚠⚠ ACÁ VIVÍA UNA SANGRÍA A `100vw` Y SE FUE (Franco, 08/09/2026:
     *«tenés que respetar los márgenes de los dos costados; acomodá las 4
     recompensas para que estén iguales de tamaño dentro de los márgenes
     laterales»*).

     La sangría venía del 24/08 —«el límite tiene que ser el borde real
     de la pantalla»— y con ella la cuarta recompensa quedaba PISANDO el
     margen derecho: la tira medía la pantalla entera y las cuatro cajas
     se repartían hasta el filo. Ahora el riel mide lo mismo que el resto
     del contenido y las cuatro entran adentro, del mismo tamaño.
     ⚠ SIN `width:100vw`, SIN MÁRGENES NEGATIVOS Y SIN RELLENO PROPIO: el
     aire lateral ya lo pone la página. Agregarlo otra vez acá sería
     sumarlo dos veces. */
  /* ══ Y AIRE PARA EL BORDE DE LAS CAJAS (Franco, 10/09/2026) ══════
     *«tiene que verse 100% visible los 5 recuadros uno al lado del otro
     SIN QUE EL BORDE TAPE ALGO, del diseño de los recuadros»*.
     El riel recorta en horizontal (`overflow-x:auto`), así que el marco
     en degradé y el resplandor de los niveles conseguidos se cortaban
     justo en el primero y en el último — que son los dos que siempre se
     ven. ⚠ EL RELLENO SE COMPENSA CON UN MARGEN NEGATIVO IGUAL: así el
     riel se estira `--cs-luz` para cada lado sólo para tener dónde
     dibujar, pero su caja de CONTENIDO sigue arrancando exactamente en
     el margen de la página. El `100%` de la cuenta de abajo es esa caja
     de contenido, así que los cinco siguen entrando adentro de los
     márgenes. Sin la compensación, esto sería sumar aire dos veces —el
     error que ya se corrigió el 08/09. */
  --cs-luz:10px;
  padding-inline:var(--cs-luz);
  margin-inline:calc(-1 * var(--cs-luz));
  /* ⚠⚠ Y EL IMÁN TIENE QUE ENTERARSE DEL RELLENO (10/09/2026). Sin esta
     línea el carrusel arrancaba CORRIDO 10 px y la primera recompensa
     quedaba pisando el margen izquierdo —justo lo que Franco pidió que
     no pasara—. La causa: `scroll-snap-align:start` alinea contra el
     borde del ÁREA VISIBLE, que en un contenedor con scroll es su caja
     de RELLENO y no la de contenido; el imán empujaba el riel `--cs-luz`
     hacia la derecha apenas cargaba (`scrollLeft` medido: 10).
     `scroll-padding-inline` mete el área de enganche esos mismos píxeles
     para adentro y las dos cuentas vuelven a coincidir.
     ⚠ SIEMPRE DEL MISMO TAMAÑO QUE EL RELLENO: las tres líneas leen la
     misma variable a propósito, así no pueden desincronizarse. */
  scroll-padding-inline:var(--cs-luz);
  padding-top:.3rem;padding-bottom:var(--gap-sm, .5rem);
}
.cs-camino::-webkit-scrollbar{display:none}
.cs-nivel{
  /* ⚠⚠ CUATRO POR PANTALLA Y LA QUINTA NO ASOMA (02/09/2026): el `100%`
     del riel es su ancho ÚTIL (100vw menos los DOS aires), pero lo que
     se VE desde el primer nivel alineado hasta el borde físico incluye
     el aire derecho — con la cuenta sobre el 100% a secas, el nivel
     siguiente arrancaba justo ahí y ASOMABA (así se veía la sexta en el
     diseño de cinco). Sumar UN aire al numerador hace que los cuatro
     niveles llenen exacto hasta el borde de la pantalla y el quinto
     quede del otro lado. */
  /* ⚠⚠ CUATRO IGUALES ADENTRO DE LOS MÁRGENES (08/09/2026). El `100%`
     ahora ES el ancho del contenido —el riel dejó de sangrarse—, así que
     la cuenta es la de siempre y sin correcciones: cuatro cajas y los
     tres huecos de .5rem que hay entre ellas. La cuenta vieja sumaba un
     aire al numerador para llegar al borde físico; con el borde donde
     tiene que estar, ese sumando dejaba la cuarta pisando el margen. */
  /* ⚠⚠ CINCO POR PANTALLA (Franco, 10/09/2026: *«tiene que verse 100%
     visible los 5 recuadros uno al lado del otro»*). Fueron cinco hasta
     el 02/09 y cuatro desde entonces; vuelven a cinco, pero ahora con el
     aire del borde resuelto arriba, que era lo que hacía que la quinta
     asomara cortada.
     ⚠ LA CUENTA ES CINCO CAJAS Y LOS CUATRO HUECOS QUE HAY ENTRE ELLAS,
     sobre el ancho del CONTENIDO. Ningún sumando de corrección: el día
     que aparece uno, es que el riel volvió a sangrarse. */
  flex:0 0 calc((100% - 4 * .5rem) / 5);
  scroll-snap-align:start;
  display:flex;flex-direction:column;align-items:center;gap:.3rem;
  min-width:0;
}
/* ⚠⚠ EL MARCO LO PONE `cop-borde` (Franco, 28/08/2026). Acá NO puede
   volver a escribirse `background`, `border` ni `border-radius`: el
   degradé son dos capas de fondo y cualquier fondo propio lo apaga, y el
   radio propio recorta una capa y deja la otra cuadrada. Lo único que se
   escribe son las VARIABLES del componente y la medida de la caja. */
.cs-nivel-caja{
  width:100%;aspect-ratio:1/1;
  display:grid;place-items:center;
  font-size:var(--fs-lg, 1.15rem);
  position:relative;
  /* ⚠ EL COLOR ES EL DE LA COMPETENCIA EN LOS TRES ESTADOS, y lo que
     cambia con el avance es la INTENSIDAD. Franco pidió *«los recuadros
     de recompensa por nivel con el color plateado de la competencia»* —
     los recuadros, no sólo los ganados. Arrancarlos en blanco y pasarlos
     a plateado al ganarlos habría sido un cambio de color donde el
     jugador espera un cambio de brillo. */
  --borde-rgb:var(--cs-rgb);--borde-abajo:.45;--borde-arriba:.05;
  --borde-radio:12px;--borde-grosor:1.5px;
}
.cs-nivel-n{
  font-family:'Inter',sans-serif;font-size:.62rem;font-weight:800;
  color:var(--text-faint,#5a6275);letter-spacing:.4px;
}
/* alcanzado: se enciende con el color de la competencia, con la MISMA
   intensidad que `.cop-borde.active` en toda la app (1 abajo, .28
   arriba). Los números no se eligieron de nuevo. */
.cs-nivel.hecho .cs-nivel-caja{
  --borde-abajo:1;--borde-arriba:.28;
  box-shadow:0 0 16px rgba(var(--cs-rgb),.18);
}
.cs-nivel.hecho .cs-nivel-n{color:var(--cs-c)}
/* ⚠ EL PRÓXIMO YA NO ES PUNTEADO: `cop-borde` dibuja el marco con el
   fondo, no con el `border` —que queda transparente a propósito— así que
   un `border-style:dashed` no se vería. Se distingue por INTENSIDAD, que
   es como se distingue todo lo demás en esta app: apagado, a medias, y
   encendido. */
.cs-nivel.proximo .cs-nivel-caja{--borde-abajo:.8;--borde-arriba:.14}
.cs-nivel.proximo .cs-nivel-n{color:#fff}
/* ── la recompensa adentro de la caja: el logo Clash Coins y el monto
   debajo (Franco, 02/09/2026, tanda BH) ── */
.cs-premio{
  display:flex;flex-direction:column;align-items:center;gap:.22rem;min-width:0;
}
.cs-premio .cop-ico{--cop-ico:30px}
.cs-premio-n{
  font-family:'Inter',sans-serif;font-weight:800;font-size:var(--fs-xs, .72rem);line-height:1;
  color:var(--gold,#ffc233);font-variant-numeric:tabular-nums;
}
.cs-tilde{
  position:absolute;right:-3px;top:-3px;width:16px;height:16px;border-radius:50%;
  background:var(--cs-c);display:grid;place-items:center;
}
.cs-tilde svg{width:9px;height:9px;color:var(--s0, #0b0e14);display:block}

/* ── EL BOTÓN ─────────────────────────────────────────────────────── */
/* ⚠ `.cs-ver` y `.cs-ver-fila` (el botón «Ver Ranking») SE BORRARON el
   24/09/2026: las dos pantallas tienen su pestaña Ranking. */

/* ══ LA INSIGNIA DE LA FILA DE RANKING ═════════════════════════════
   La corona con las victorias y, debajo, las vidas. Es la MISMA idea
   que el panel de arriba en chico: por eso vive en este archivo y no
   en el de la fila de ranking, que no sabe de semanas ni de vidas. */
.cs-insignia{
  --cs-c: var(--cd-c, var(--primary,#0c95eb));
  --cs-rgb: var(--cd-rgb, 12,149,235);
  flex:0 0 auto;margin-left:auto;
  display:flex;flex-direction:column;align-items:center;gap:var(--gap-xs, .3rem);
  min-width:96px;
}
.cs-ins-top{display:flex;align-items:center;gap:var(--gap-sm, .5rem)}
/* ⚠ ACÁ VIVÍA `.cs-ins-corona` (una corona en un círculo, con el número
   AL LADO) y se fue el 02/09/2026 (tanda BH): *«reemplaza coronas +
   número»* — ahora es el mismo `escudo-victorias.webp` del panel, en
   chico, con el número ADENTRO. */
.cs-ins-escudo{
  position:relative;width:26px;height:39px;flex:0 0 auto;
  display:grid;place-items:center;
}
.cs-ins-escudo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.cs-ins-n{
  position:relative;z-index:1;
  font-family:'Anton',sans-serif;font-size:var(--fs-md, .88rem);line-height:1;color:#fff;
  transform:translateY(-14%);
}
.cs-ins-vidas{display:flex;gap:.18rem}
/* la misma regla que `.cs-vida`: variables de `cop-borde`, nada propio */
.cs-ins-vida{
  width:13px;height:13px;
  display:grid;place-items:center;
  --borde-rgb:var(--cs-rgb);--borde-abajo:.45;--borde-arriba:.05;
  --borde-radio:4px;--borde-grosor:1px;
}
.cs-ins-vida svg{width:8px;height:8px;color:var(--red, #ff3b5c);display:block}
.cs-ins-vida.usada{--borde-rgb:255,59,92;--borde-abajo:.6;--borde-arriba:.12}

@media(max-width:380px){
  .cs-insignia{min-width:84px}
  .cs-ins-n{font-size:var(--fs-sm, .8rem)}
  .cs-vida{width:26px;height:26px}
}


/* ══ LOS TRES INDICADORES (21/09/2026) ════════════════════════════
   Franco: *«3 recuadros verticales con la info en la misma fila, con la
   info de División, Posición y Vidas»*.
   ⚠⚠ TRES COLUMNAS IGUALES Y NO `auto`: con `auto`, la columna de
   «División» —que lleva una palabra y no un número— se comía el ancho y
   las otras dos quedaban apretadas contra el borde. Iguales, los tres se
   leen como tres lecturas del mismo estado.
   ⚠ EL RÓTULO ARRIBA Y EL NÚMERO ABAJO, igual que los dos que había:
   ésa era la única parte del diseño viejo que funcionaba. */
.cs-indics{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:0; margin-bottom:var(--gap-xl, 1.2rem);
}
/* ⚠⚠ SIN CAJAS (Franco, 13/10/2026): «eliminar esos recuadros feos de
   alrededor de división, posición y vidas y poner sólo líneas verticales
   separadoras». Los tres quedan sobre el fondo, partidos por una línea. */
.cs-ind{
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:var(--gap-xs, .3rem);
  padding:var(--gap-sm, .5rem) .5rem;
  min-width:0;
}
.cs-ind + .cs-ind{ border-left:1px solid rgba(255,255,255,.12) }
.cs-ind .cs-tit{ margin:0 }
/* ⚠ EL NÚMERO EN ANTON Y A UN TAMAÑO SOLO: «División 10» es una palabra
   larga y «3» un dígito. Con tamaños distintos por contenido, la fila
   dejaría de leerse pareja — que es todo el punto de los tres. */
.cs-ind-n{
  flex:0 0 auto;
  font:400 var(--fs-2xl, 1.5rem)/1.1 Anton, sans-serif;
  color:var(--text, #f4f6fb); text-align:center;
  font-variant-numeric:tabular-nums;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;
}
.cs-ind-n--vacio{ color:var(--tx-3, #7c8597) }
/* ⚠ SIN VIDAS SE PINTA EN ROJO: es el único de los tres que puede
   significar que se terminó la semana. */
.cs-ind--sin .cs-ind-n{ color:var(--red, #ff3b5c) }