/* ══════════════════════════════════════════════════════════════════
   COP · LA SALA DE BATALLA DE SOBRES  (Franco, 08/09/2026)
   ──────────────────────────────────────────────────────────────────
   *«cuando entro tienen que tener la interfaz de la pantalla, que tiene
   que tener en la parte de arriba de todo el indicador del duelo con las
   camisetas y los nombres de los 2 usuarios como en la página de
   comparación de picks. Abajo de eso dice el monto juntado por cada uno
   en los sobres (…) abajo hay un carrusel con sobres pequeños que indica
   el sobre que se abre por cada ronda, con un número grande al inicio
   del carrusel que indica la ronda (…) y abajo de eso la pantalla con el
   sobre que me tocó a mí, y cuando hago scroll puedo ver el sobre del
   rival»*.

   LAS CUATRO ZONAS, DE ARRIBA A ABAJO:
     .bs-duelo    las dos camisetas con los alias
     .bs-marcador lo que lleva juntado cada uno
     .bs-rondas   el carrusel: nº de ronda + los dos sobres
     .bs-visor    el sobre mío y, deslizando, el del rival

   ⚠⚠ EL DUELO DE ARRIBA ES EL DE LA COMPARACIÓN DE PICKS, con sus
   nombres de clase (`fi-camiseta`, `fi-alias`): Franco pidió «como en la
   página de comparación de picks» y la lectura sostenible de eso es la
   misma pieza, no una parecida. Lo único que se agrega acá es el VS del
   medio, que allá no existe.

   ⚠ SIN CAJAS (regla 1): las zonas se separan con una línea y su aire,
   no con recuadros de otro color. Lo que sí tiene marco es lo que es una
   ficha —la carta y el sobre—, que son objetos.
   ══════════════════════════════════════════════════════════════════ */

/* ── LA SALA ───────────────────────────────────────────────────────
   ⚠ ALTO COMPLETO Y EL VISOR CRECIENDO: el carrusel de rondas y el
   marcador miden lo que miden, y lo que sobra es del sobre. Con todo en
   flujo normal, en un teléfono bajo el sobre quedaba debajo del pliegue
   y el jugador no veía lo que estaba abriendo. */
.bs-sala{
  position:fixed;inset:0;z-index:70;display:none;
  flex-direction:column;
  background:var(--bg, #0b0e14);
  padding:calc(.6rem + env(safe-area-inset-top,0px)) var(--aire-contenido,16px)
          calc(.8rem + env(safe-area-inset-bottom,0px));
  overflow:hidden;
}
.bs-sala.abierta{display:flex}

/* la ✕ de salir, arriba a la derecha */
.bs-salir{
  position:absolute;top:calc(.55rem + env(safe-area-inset-top,0px));right:.7rem;z-index:3;
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);
  color:var(--text-dim,#9aa3b5);cursor:pointer;padding:0;
}
.bs-salir svg{width:17px;height:17px}

/* ── 1 · EL DUELO ──────────────────────────────────────────────────── */
.bs-duelo{
  flex:0 0 auto;display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:var(--gap-md, .7rem);padding:.2rem 0 .7rem;
}
.bs-duelo .fi-celda{display:flex;flex-direction:column;align-items:center;gap:.25rem;min-width:0}
/* ⚠ LA CAMISETA MÁS CHICA QUE EN LA COMPARACIÓN: allá es la pantalla
   entera; acá es una cabecera y abajo hay tres zonas más. */
.bs-duelo .fi-camiseta{width:min(46%,58px);aspect-ratio:1/1;object-fit:contain}
.bs-duelo .fi-alias{font-size:clamp(.78rem,3.6vw,1rem);-webkit-line-clamp:1}
.bs-vs{
  font-family:'Anton',sans-serif;font-weight:400;font-size:var(--fs-base, 1rem);letter-spacing:1px;
  color:var(--text-faint,#5a6275);
}

/* ── 2 · EL MARCADOR ───────────────────────────────────────────────
   Lo que lleva juntado cada uno. Es el número que decide el duelo, así
   que es el más grande de la cabecera. */
.bs-marcador{
  flex:0 0 auto;display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:var(--gap-md, .7rem);padding:0 0 var(--gap-md, .7rem);
  border-bottom:1px solid var(--card-border,#1e2330);
}
.bs-monto{display:flex;align-items:center;justify-content:center;gap:var(--gap-xs, .3rem);min-width:0}
.bs-monto .cop-ico{--cop-ico:19px;flex:0 0 auto}
.bs-monto b{
  font-family:'Anton',sans-serif;font-weight:400;
  font-size:clamp(1.3rem,7vw,1.9rem);line-height:1;color:#fff;
  font-variant-numeric:tabular-nums;
}
/* ⚠ EL QUE VA GANANDO SE PINTA, EL OTRO NO. Pintar los dos —uno verde y
   uno rojo— convertiría ir segundo en una derrota, y la batalla todavía
   no terminó. */
.bs-monto.gana b{color:var(--gold,#ffc233)}
.bs-guion{color:var(--text-faint,#5a6275);font-weight:800}

/* ── 3 · EL CARRUSEL DE RONDAS ─────────────────────────────────────
   *«un carrusel con sobres pequeños que indica el sobre que se abre por
   cada ronda, con un número grande al inicio del carrusel que indica la
   ronda, por ejemplo un 3 grande y a su derecha hay 2 espacios con
   sobres»*.
   ⚠ CADA RONDA ES UN BLOQUE de número + dos sobres, y el riel se corre
   solo a la ronda en curso. No se puede tocar: las rondas se abren
   automáticamente y un riel que además se arrastra invita a pensar que
   se puede adelantar. */
.bs-rondas{
  flex:0 0 auto;display:flex;gap:var(--gap-xl, 1.2rem);overflow-x:auto;
  padding:var(--gap-lg, 1rem) 0;scrollbar-width:none;scroll-behavior:smooth;
}
.bs-rondas::-webkit-scrollbar{display:none}
.bs-ronda{flex:0 0 auto;display:flex;align-items:center;gap:.5rem;opacity:.35;
  transition:opacity .3s ease}
.bs-ronda.aca{opacity:1}
.bs-ronda.lista{opacity:.6}
.bs-ronda-n{
  font-family:'Anton',sans-serif;font-weight:400;
  font-size:1.9rem;line-height:1;color:var(--text-dim,#9aa3b5);
  font-variant-numeric:tabular-nums;
}
.bs-ronda.aca .bs-ronda-n{color:rgb(var(--cop-acento-rgb,12,149,235))}
.bs-ronda-sobres{display:flex;gap:.3rem}
.bs-mini{
  width:30px;height:40px;border-radius:6px;display:block;object-fit:contain;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.5));
}
/* ⚠ EL SOBRE ABIERTO SE APAGA, no desaparece: la ronda anterior sigue
   contando y el jugador tiene que poder ver cuántas van. */
.bs-ronda.lista .bs-mini{filter:grayscale(.7);opacity:.75}

/* ── LA BARRA DE LOS 10 SEGUNDOS ───────────────────────────────────
   *«con un período de 10 segundos para ver el contenido del sobre, si no
   lo vio se devela todo y sigue al siguiente de forma automática»*.
   ⚠ SE VE CUÁNTO FALTA. Un reloj invisible que de golpe revela todo se
   siente como un error de la app, no como una regla. */
.bs-reloj{flex:0 0 auto;height:3px;border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,.08)}
.bs-reloj i{display:block;height:100%;width:100%;border-radius:999px;
  background:rgb(var(--cop-acento-rgb,12,149,235));transform-origin:left center}

/* ── 4 · EL VISOR ──────────────────────────────────────────────────
   *«abajo de eso la pantalla con el sobre que me tocó a mí, y cuando
   hago scroll puedo ver el sobre del rival»*.
   ⚠ DOS PANELES A ANCHO COMPLETO CON `scroll-snap`: se desliza de uno al
   otro y siempre queda uno entero en pantalla. Y `scroll-padding-inline`
   igual al relleno, porque `snap-align:start` engancha en el borde del
   CONTENEDOR y no en el del relleno — la trampa de siempre. */
.bs-visor{
  flex:1;min-height:0;display:flex;gap:var(--aire-contenido,16px);
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;
  margin-inline:calc(-1 * var(--aire-contenido,16px));
  padding-inline:var(--aire-contenido,16px);
  scroll-padding-inline:var(--aire-contenido,16px);
}
.bs-visor::-webkit-scrollbar{display:none}
.bs-panel{
  flex:0 0 100%;scroll-snap-align:start;min-width:0;
  display:flex;flex-direction:column;gap:.5rem;
}
.bs-panel-tit{
  flex:0 0 auto;display:flex;align-items:baseline;justify-content:space-between;gap:var(--gap-md, .7rem);
  font-size:var(--fs-xs, .72rem);font-weight:800;letter-spacing:.6px;
  text-transform:uppercase;color:var(--text-dim,#9aa3b5);
}
.bs-panel-tit b{font-family:'Anton',sans-serif;font-weight:400;font-size:var(--fs-base, 1rem);
  letter-spacing:.3px;color:var(--gold,#ffc233);text-transform:none}
.bs-panel-tit b .cop-ico{--cop-ico:14px;vertical-align:-2px;margin-right:.15rem}

/* la grilla de las cinco cartas del sobre */
/* ⚠ LAS DOS FILAS VAN CENTRADAS EN EL VISOR, no pegadas arriba
   (08/09/2026). El visor es `flex:1` de una sala de alto fijo, así que en
   un teléfono alto sobra sitio debajo de la segunda fila y la pantalla se
   leía desfondada: cinco cartas arriba y medio visor vacío.
   ⚠⚠ Y VA `safe center`, NO `center` a secas: en un contenedor que
   scrollea, `center` con contenido más alto que la caja empuja el
   sobrante FUERA del borde de arranque —la fila de arriba queda cortada y
   no hay forma de llegar a ella—. `safe` vuelve a `start` justo en ese
   caso. La primera declaración es la reserva para el navegador que no
   entienda la palabra. */
.bs-cartas{
  flex:1;min-height:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.5rem;overflow-y:auto;scrollbar-width:none;
  align-content:start;
  align-content:safe center;
}
.bs-cartas::-webkit-scrollbar{display:none}
.bs-hueco{position:relative;display:flex;flex-direction:column;gap:.25rem;min-width:0}

/* la carta dada vuelta: el sobre cerrado */
.bs-tapa{
  width:100%;aspect-ratio:1024/1536;border-radius:var(--r-card, 14px);
  display:grid;place-items:center;
  background:
    repeating-linear-gradient(125deg, rgba(255,255,255,.05) 0 6px, transparent 6px 14px),
    linear-gradient(165deg,#1b2233,#080b12);
  border:1.5px solid rgba(255,255,255,.09);
}
.bs-tapa img{width:46%;opacity:.5}
/* ⚠ LA CARTA APARECE CON UN GOLPE CORTO, no con un giro de medio
   segundo: se abren cinco seguidas y una animación larga convierte
   abrir un sobre en esperar. */
.bs-hueco.abierta .bs-carta{animation:bsSale .28s cubic-bezier(.2,.9,.3,1.2)}
@keyframes bsSale{
  0%{transform:scale(.82);opacity:0}
  100%{transform:scale(1);opacity:1}
}
.bs-carta{width:100%}
/* el valor debajo de la carta, en dorado como toda moneda de la app */
.bs-valor{
  display:flex;align-items:center;justify-content:center;gap:.2rem;
  font-family:'Anton',sans-serif;font-weight:400;font-size:var(--fs-md, .88rem);
  color:var(--gold,#ffc233);font-variant-numeric:tabular-nums;line-height:1;
}
.bs-valor .cop-ico{--cop-ico:13px}
.bs-valor.oculto{color:var(--text-faint,#5a6275)}

/* el aviso de abajo: qué hacer */
.bs-pie{
  flex:0 0 auto;text-align:center;padding-top:var(--gap-sm, .5rem);
  font-size:var(--fs-xs, .72rem);font-weight:700;color:var(--text-faint,#5a6275);
}
.bs-pie[hidden]{display:none}

/* ── ESPERANDO RIVAL (economía v3 · tanda 2b, 30/09/2026) ─────────────
   ⚠ La entrada ya está pagada y las cartas todavía NO existen: el
   servidor las sortea cuando llega el rival. Por eso el lugar del rival
   no tiene camiseta ni nombre inventados: late el logo, y el sobre queda
   tapado y quieto (tocar no da vuelta nada). */
.bs-buscando{
  width:min(46%,58px);aspect-ratio:1/1;display:grid;place-items:center;border-radius:50%;
  background:rgba(var(--cop-acento-rgb,12,149,235),.08);
  box-shadow:0 0 0 1.5px rgba(var(--cop-acento-rgb,12,149,235),.35) inset;
  animation:bsBusca 1.6s ease-in-out infinite;
}
.bs-buscando img{width:52%;opacity:.8}
@keyframes bsBusca{
  0%,100%{box-shadow:0 0 0 1.5px rgba(var(--cop-acento-rgb,12,149,235),.35) inset,0 0 0 0 rgba(var(--cop-acento-rgb,12,149,235),.28)}
  50%{box-shadow:0 0 0 1.5px rgba(var(--cop-acento-rgb,12,149,235),.6) inset,0 0 0 10px rgba(var(--cop-acento-rgb,12,149,235),0)}
}
@media (prefers-reduced-motion:reduce){ .bs-buscando{animation:none} }
.bs-sala.esperando .bs-duelo .fi-alias{color:var(--text-dim,#9aa3b5)}
.bs-sala.esperando .bs-visor{cursor:default}
.bs-sala.esperando .bs-tapa{opacity:.7}
.bs-sala.esperando .bs-ronda{opacity:.35}
/* la acción de salir de la cola: el secundario del sistema, centrado */
.bs-salir-cola{flex:0 0 auto;align-self:center;width:100%;max-width:320px;margin-top:var(--gap-sm, .5rem)}
.bs-salir-cola[hidden]{display:none}
/* el rótulo de ejemplo, cuando la sala de ejemplo lo trae adentro */
.bs-sala > .cop-ejemplo{flex:0 0 auto;margin:0 3rem var(--gap-sm, .5rem) 0}

/* un listado vacío o que no cargó: se dice, sin caja */
.bs-vacio{padding:var(--gap-2xl, 1.8rem) var(--gap-lg, 1rem);text-align:center;
  color:var(--text-dim,#9aa3b5);font-size:var(--fs-md, .88rem);line-height:1.5;margin:0}
.bs-vacio[hidden]{display:none}

/* ── EL CIERRE ─────────────────────────────────────────────────────── */
.bs-final{
  position:absolute;inset:0;z-index:4;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:1rem;
  background:rgba(8,9,12,.94);backdrop-filter:blur(6px);
  padding:1.4rem var(--aire-contenido,16px);
}
.bs-final.abierto{display:flex}
.bs-final-ico{font-size:3.2rem;line-height:1}
.bs-final-tit{
  font-family:'Anton',sans-serif;font-weight:400;font-size:1.7rem;letter-spacing:.8px;
  text-transform:uppercase;color:#fff;text-align:center;
}
.bs-final-sub{font-size:var(--fs-sm, .8rem);color:var(--text-dim,#9aa3b5);text-align:center}
.bs-final-pozo{
  display:flex;align-items:center;gap:var(--gap-sm, .5rem);
  font-family:'Anton',sans-serif;font-weight:400;font-size:2.1rem;
  color:var(--gold,#ffc233);
}
.bs-final-pozo .cop-ico{--cop-ico:26px}
.bs-final .cop-b{width:100%;max-width:320px}
/* ⚠ EL RÓTULO DEL NÚMERO (30/09/2026): el número de abajo ya no es un
   «190» escrito; es lo que cobraste, lo que se llevó el rival o la entrada
   que se devolvió, y sin rótulo no se sabe cuál de las tres. */
.bs-final-pozo:has(#bsPozo:empty){display:none}
.bs-final-rot{
  margin-top:calc(-1 * var(--gap-sm, .5rem));
  font-size:var(--fs-sm, .8rem);font-weight:700;color:var(--text-dim,#9aa3b5);
  text-align:center;text-transform:uppercase;letter-spacing:.06em;
}
.bs-final-rot:empty{display:none}

/* ── LA HOJA DE RECOMPENSAS (qué vale cada división) ─────────────────
   ⚠ LA VENTANA ES LA MISMA FORMA que la de Grupos (`.g-modal` /
   `.g-caja`), pero esas reglas viven adentro de `grupo.html`: se
   escriben acá con los mismos nombres en vez de mudar una hoja entera
   por una ventana de diez filas. Si aparece una tercera pantalla que la
   necesite, ahí sí se muda. */
.g-modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;
  background:rgba(0,0,0,.72);padding:1rem}
.g-modal[hidden]{display:none}
.g-caja{width:100%;max-width:420px;max-height:80vh;overflow:auto;background:var(--s2, #161b25);
  border-radius:var(--r-card, 14px);border:1px solid rgba(255,255,255,.1);padding:var(--gap-xl, 1.2rem)}
.g-caja h3{font-family:'Anton',sans-serif;font-size:var(--fs-xl, 1.3rem);letter-spacing:.5px;
  text-transform:uppercase;margin:0 0 .1rem;color:#fff}
.g-caja-sub{color:var(--text-dim,#9aa3b5);font-size:var(--fs-sm, .8rem);margin:0 0 var(--gap-lg, 1rem);line-height:1.4}
.g-cerrar{width:100%;margin-top:var(--gap-lg, 1rem)}

.bs-tabla{display:flex;flex-direction:column}
.bs-fila{display:flex;align-items:center;gap:.7rem;padding:var(--gap-sm, .5rem) .1rem;
  font-weight:700;font-size:var(--fs-md, .88rem)}
.bs-fila + .bs-fila{border-top:1px solid var(--card-border,#1e2330)}
.bs-fila .cop-div{--cop-div:26px;flex:0 0 auto}
.bs-fila-nom{flex:1;min-width:0;color:#fff}
/* ⚠ la probabilidad publicada de cada división (sale de la misma tabla
   que usa el sorteo), debajo del nombre y apagada: el dato fuerte es el valor */
.bs-fila-prob{display:block;font-size:var(--fs-xs, .72rem);font-weight:600;color:var(--text-dim,#9aa3b5)}
.bs-fila-val{flex:0 0 auto;display:inline-flex;align-items:center;gap:.25rem;
  font-family:'Anton',sans-serif;font-weight:400;font-size:var(--fs-base, 1rem);
  color:var(--gold,#ffc233);font-variant-numeric:tabular-nums}
.bs-fila-val .cop-ico{--cop-ico:15px}

/* ── ANCHOS ────────────────────────────────────────────────────────
   ⚠ EN PANTALLA ANCHA LOS DOS SOBRES ENTRAN A LA VEZ: el deslizamiento
   es una solución al ancho del teléfono, no una regla del modo. Con
   sitio para los dos, verlos juntos es mejor —es una batalla—. */
@media (min-width:760px){
  .bs-visor{overflow-x:hidden;scroll-snap-type:none}
  .bs-panel{flex:1 1 0}
  .bs-sala{padding-inline:max(var(--aire-contenido,16px),calc((100vw - 900px) / 2))}
}
/* 09/10/2026 · la tarjeta de cada jugador arriba (no la camiseta) */
.bs-duelo .bs-carta-lado{ width:min(34vw, 120px) }
.bs-duelo .bs-carta-lado .cjc{ width:100% }