/* ══════════════════════════════════════════════════════════════════
   COP · LA FILA DE SALA — la del lobby de Mega Spin  (08/09/2026)
   ──────────────────────────────────────────────────────────────────
   Franco: *«en la página de Survival las tarjetas tienen que tener el
   mismo diseño que las de Mega Spin (…) y arriba del botón de Jugar
   Ahora tiene que estar el botón de "Recompensas", igual que en Mega
   Spin»*.

   ⚠⚠ ESTABA ESCRITO ADENTRO DE `spin.html` Y SE MUDÓ ACÁ. Es la tercera
   vez en esta sesión que «el mismo diseño que…» resulta ser, en los
   hechos, «el mismo archivo que…». Copiadas a Survival, estas reglas se
   habrían separado en la primera corrección.
   ⚠ LOS NOMBRES SON LOS QUE YA USABA MEGA SPIN (`.sc-fila`,
   `.sc-acciones`, `.sc-entrada`, `.sc-fila1`): mudanza sin renombrar,
   para que esa pantalla no se mueva un pixel.
   ⚠ EL CUERPO DE LA FILA SIGUE SIENDO `.gr-hor` de
   `cop-tarjeta-grupo.css` — camiseta a la izquierda, dos renglones en el
   medio, algo a la derecha—. Esta hoja sólo la convierte en fila de
   lobby: sin caja, con líneas entre filas y con la columna de botones.
   Las dos hojas se cargan juntas.

   CÓMO SE USA:
     <div class="lobby-grid">
       <div class="gr-card gr-hor sc-fila"> … </div>
     </div>
   ══════════════════════════════════════════════════════════════════ */

/* ── LA LISTA ──────────────────────────────────────────────────────
   ⚠ SIN CAJA Y CON LÍNEA ENTRE FILAS (Franco, 02/09/2026): *«las
   tarjetas no tienen que tener ni ese borde ni ese color de fondo»*.
   ⚠ ARRIBA DE LA PRIMERA TAMBIÉN VA LÍNEA («la de arriba y abajo»): la
   pone un `::before` sólo en la primera, no una línea por fila — dos
   líneas pegadas se ven como una barra.
   ⚠ NO SE TOCA `.gr-hor`: la usan Grupos, Equipos y Salas. Todo esto
   está encerrado en el contenedor `.lobby-grid`. */
/* ⚠⚠ LAS TRES MEDIDAS DE LA FILA VIVEN ACÁ ARRIBA (Franco, 08/09/2026).
   La fila tiene DOS columnas con contenido —el texto y los botones— y
   Franco pidió que se lean renglón por renglón: *«poné el título de la
   cantidad de monedas y distribución del premio a la misma altura que el
   botón de Recompensas, y la línea de abajo del jackpot máximo alineada
   con el botón de Jugar Ahora»*.
   Que dos columnas distintas coincidan renglón a renglón no se logra
   centrando cada una por su lado —que es lo que había, y por eso el
   texto quedaba «entre» los dos botones—: se logra dándoles LA MISMA
   grilla de filas. Estas variables son esa grilla, y por eso son tres
   números y no seis repartidos por el archivo. */
.lobby-grid{
  --sc-fil:36px;      /* el alto del botón chico: `.cop-b--sm` */
  --sc-gap:.35rem;    /* la separación entre los dos botones */
  /* ⚠⚠ 48 px Y NO 56, Y EL NÚMERO ESTÁ MEDIDO. El logo compite por el
     ancho con la línea del jackpot, que es EL dato de la fila: cada
     píxel que crece se lo saca a «Jackpot máx 🪙100.000». Medido en
     375 / 390 / 412 px, con 48 las cuatro salas mantienen esa línea en
     UN renglón; con 50 o más, la de 1.000 se parte en dos. 26 % más
     grande que los 38 de antes, sin romper el dato. */
  --sc-ico:48px;      /* el logo de Clash Coins de la izquierda */
  display:flex;flex-direction:column;gap:0;align-items:stretch;
}
.lobby-grid[hidden]{display:none}
.lobby-grid .sc-fila{
  position:relative;
  background:none;border:0;border-radius:0;box-shadow:none;
  padding:var(--gap-lg, 1rem) .2rem;min-height:0;
  cursor:pointer;
}
.lobby-grid .sc-fila::after{
  content:"";position:absolute;left:.2rem;right:.2rem;bottom:0;height:1px;
  background:var(--card-border,#1e2330);pointer-events:none;
}
.lobby-grid .sc-fila:first-child::before{
  content:"";position:absolute;left:.2rem;right:.2rem;top:0;height:1px;
  background:var(--card-border,#1e2330);pointer-events:none;
}
.lobby-grid .sc-fila:active{transform:none}

/* ⚠⚠ SIN LA BANDA DE COLOR DE LA IZQUIERDA. `.gr-cam` viene de la
   tarjeta de grupo: es un paralelogramo pintado con `--gc` que servía
   cuando la fila era una caja con fondo. Sin caja, esa banda inclinada
   queda flotando en el medio de la nada y encima se come 90 px del ancho
   — que es lo que dejaba el jackpot en «Jackpot máx 1…». Queda sólo el
   dibujo del medio. */
.lobby-grid .gr-cam{
  flex:0 0 auto; width:auto; min-width:0;
  background:none; clip-path:none; transform:none;
  /* ⚠ EL AIRE SE ACHICÓ AL AGRANDAR EL LOGO (.55/.1 → .3/0). No es
     capricho: una figura más grande necesita proporcionalmente menos
     aire alrededor, y los 11 px que devuelve son justo los que la línea
     del jackpot necesitaba para no partirse. Medido: a 360 px, con el
     logo viejo de 38 y el aire viejo, las cuatro filas YA se partían;
     con este aire, tres entran en un renglón. */
  padding:0 .3rem 0 0; display:grid; place-items:center;
}
/* ⚠⚠ EL LOGO SE MIDE CON `width`/`height` Y NO SÓLO CON `--cop-ico`
   (Franco, 08/09/2026: *«hacé el logo de las Clash Coins de la izquierda
   más grande»*).
   Acá había un `--cop-ico:30px` que NO HACÍA NADA: `cop-tarjeta-grupo.css`
   escribe `.gr-cam .cop-ico{width:38px;height:38px}` con el número
   literal, y un `width` puesto a mano no lee la variable. O sea que el
   logo medía 38 px mientras esta línea decía 30 y nadie lo notaba — el
   defecto más silencioso que hay, porque la regla existe y se ve
   correcta. Se escriben las tres cosas: la variable, para quien la lea, y
   el `width`/`height` derivados de ella, para ganarle al literal.
   ⚠ SE CENTRA SOLO entre los dos renglones porque `.gr-cam` es un
   `place-items:center` de la altura de la fila, y la fila la marca ahora
   la grilla de dos renglones de abajo. No hay ningún número mágico. */
.lobby-grid .gr-cam .cop-ico{
  --cop-ico:var(--sc-ico,56px);
  width:var(--sc-ico,56px); height:var(--sc-ico,56px);
}
/* ══ Y AHORA LO DE LA IZQUIERDA ES EL LOGO DE LA COMPETENCIA ═══════
   Franco, 10/09/2026: *«en lugar del logo grande de las Clash Coins a la
   izquierda de la tarjeta, ahí tenés que poner el logo de la
   competencia; por ejemplo en Mega Spin va el logo de Mega Spin»*.

   ⚠⚠ Y TIENE SENTIDO MÁS ALLÁ DEL GUSTO: las cuatro pantallas que usan
   esta fila —Mega Spin, Doble o Nada, Survival y Batalla de Sobres—
   mostraban EXACTAMENTE el mismo dibujo a la izquierda, así que una
   captura de cualquiera de las cuatro era indistinguible de las otras
   tres. La moneda no se pierde: pasa al lado del número de entrada,
   que es donde de verdad significa algo (`.sc-entrada .cop-ico`).

   ⚠ EL LOGO ES UN `<img>`, NO UN `.cop-ico`: `cop-iconos.css` es el
   registro de CONCEPTOS de la app —moneda, gema, XP, punto—, uno por
   archivo y reutilizados en todas partes. El logo de una competencia no
   es un concepto compartido: es el arte de esa pantalla, y meterlo ahí
   obligaría a agregar una línea al registro por cada modo nuevo.
   ⚠⚠ VA MÁS GRANDE QUE LA MONEDA (1.2×) Y EL NÚMERO ESTÁ MEDIDO, no
   elegido. El logo de un modo es un escudo con texto adentro («MEGA SPIN
   CLASH»), no un círculo liso: a 48 px se lee como una mancha azul. Pero
   cada píxel que crece se lo saca al texto de la fila, y el que primero
   se queda sin lugar es el renglón de arriba de Mega Spin 6-MAX.
   Medido en 360 / 375 / 390 / 412 / 430 px con la fila más apretada que
   hay: con 1.2 sobran 8 px en la peor combinación; con 1.3 sobran 3 y
   con 1.35 el texto se mete DEBAJO del botón. Se deja en 1.2.
   ⚠ ES UNA VARIABLE Y NO UN NÚMERO SUELTO: si mañana una pantalla
   necesita el logo más chico, cambia `--sc-logo-x` en su `.lobby-grid`
   sin tocar esta hoja ni las otras tres pantallas.
   ⚠ `object-fit:contain` porque los cuatro logos NO son cuadrados: sin
   esto, el navegador estira el más ancho hasta la caja.
   ⚠⚠ ESTA REGLA NO VA SCOPEADA A `.lobby-grid`, y es la única del
   archivo que no lo está. Doble o Nada dibuja la misma fila pero nunca
   entró a `.lobby-grid` —tiene su propio `.dn-lobby` con las reglas
   copiadas, la deuda de siempre—, así que scopearla dejaría a esa
   pantalla sin el logo o me obligaría a escribir una quinta copia.
   Colgada de `.gr-cam`, que sólo existe en esta familia de filas, sirve
   para las cuatro sin tocar el resto del diseño de ninguna. */
.gr-cam .sc-logo{
  width:calc(var(--sc-ico,56px) * var(--sc-logo-x,1.2));
  height:calc(var(--sc-ico,56px) * var(--sc-logo-x,1.2));
  object-fit:contain;
  display:block;
}
/* ⚠ Y EL DATO NO SE RECORTA MÁS: con la banda afuera hay lugar, pero el
   `ellipsis` heredado seguiría cortando igual. */
.lobby-grid .gr-info .gr-meta{
  overflow:visible; text-overflow:clip; white-space:normal;
}
.lobby-grid .gr-meta{font-size:var(--fs-sm, .8rem)}
.lobby-grid .gr-hor{gap:var(--gap-sm, .5rem)}

/* ── LOS DOS RENGLONES DEL MEDIO, RENGLÓN A RENGLÓN CON LOS BOTONES ──
   ⚠⚠ ES LA MISMA GRILLA QUE LA COLUMNA DE BOTONES, y ése es todo el
   truco. Antes las dos columnas se centraban cada una por su cuenta: el
   bloque de texto medía ~38 px y el de botones ~78, así que el primer
   renglón caía DEBAJO de «Recompensas» y el segundo ARRIBA de «Jugar
   Ahora» — visualmente, el texto quedaba metido entre los dos botones.
   Dándoles a las dos columnas dos filas del MISMO alto y el MISMO hueco,
   cada renglón cae exactamente en el centro de su botón, y sigue
   cayendo ahí si mañana cambia la talla del botón: se cambia `--sc-fil`
   y se mueven los dos lados juntos.
   ⚠ `justify-items:start` porque las celdas son cajas del ancho de la
   columna: sin eso, el texto se estiraría y el `ellipsis` del primer
   renglón mediría contra el ancho equivocado. */
.lobby-grid .gr-info{
  display:grid;
  grid-template-rows:var(--sc-fil,36px) var(--sc-fil,36px);
  row-gap:var(--sc-gap,.35rem);
  align-content:center;
  justify-items:start;
}
.lobby-grid .gr-info > *{align-self:center;max-width:100%}

/* El número grande de la entrada y, a su lado, el dato corto que la
   califica. */
.sc-entrada{font-family:'Anton',sans-serif;font-size:var(--fs-xl, 1.3rem);color:#fff;line-height:1.1}
/* ══ LA MONEDA, ANTES DEL NÚMERO ══════════════════════════════════
   Franco, 10/09/2026: *«en la línea 1 de contenido que ahora se muestra
   el monto de entrada tenés que poner el logo de Clash Coins antes del
   número de entrada, por ejemplo "(logo cc) 100"»*.
   Es el lugar donde la moneda dice algo: pegada al número, aclara que
   ese 100 son Clash Coins. Sola a la izquierda de la fila era un adorno
   que además se repetía idéntico en las cuatro pantallas.
   ⚠ EL NÚMERO SE VUELVE UNA FILA para que la moneda no arrastre el
   `line-height` de Anton: con la moneda como `inline`, el renglón crecía
   y desalineaba la entrada respecto del botón de al lado.
   ⚠ EL TAMAÑO SALE DEL TEXTO (`1em`) y no de un número fijo: si mañana
   cambia el cuerpo de `.sc-entrada`, la moneda lo sigue sola. */
.sc-entrada{display:inline-flex;align-items:center;gap:var(--gap-xs, .3rem)}
.sc-entrada .cop-ico{
  --cop-ico:1em;
  width:1em;height:1em;
  /* ⚠ Anton apoya sus números bastante arriba de la línea base: sin esta
     corrección la moneda se ve hundida respecto del número. */
  position:relative;top:-.04em;
}
/* ⚠⚠ CUÁNTA GENTE ESTÁ JUGANDO ESA SALA, al lado de la entrada. Vivía
   adentro de `survival.html` como `.sv-gente` y se mudó acá el
   21/09/2026, cuando Mega Spin pasó a mostrar lo mismo: dos pantallas
   con el mismo dato y dos reglas distintas es cómo terminan con dos
   tamaños de ícono. `.sv-gente` queda como alias mientras Survival
   termina de migrar.
   ⚠ EL ÍCONO A 14 px Y NO al tamaño del texto: es un símbolo de apoyo,
   no un dato. Si creciera con la cifra le pelearía el peso a la
   entrada, que es el número que manda en la fila. */
.sc-gente, .sv-gente{
  display:inline-flex; align-items:center; gap:.28rem;
  color:var(--text-dim,#9aa3b5); font-weight:700;
}
.sc-gente svg, .sv-gente svg{ width:14px; height:14px; display:block; flex:0 0 auto }

.sc-fila1{display:flex;align-items:baseline;gap:.5rem;min-width:0}
.sc-fila1 .gr-meta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── LOS DOS BOTONES DE LA DERECHA ─────────────────────────────────
   ⚠ EN COLUMNA Y DEL MISMO ANCHO: apilados y estirados, los dos se leen
   como un par. Con anchos distintos se leen como un botón y una
   etiqueta. */
.sc-acciones{
  flex:0 0 auto; align-self:center;
  display:flex;flex-direction:column;gap:var(--gap-xs, .3rem);
  min-width:96px;
}
.sc-acciones .cop-b{width:100%}
/* ⚠ EN EL LOBBY, LA MISMA GRILLA QUE EL TEXTO. Va scopeado a
   `.lobby-grid` y no en la regla de arriba porque el historial de Mega
   Spin usa `.sc-acciones` con UNA sola cosa adentro (la marca del
   resultado): dos filas fijas ahí dejarían la marca colgada arriba. */
.lobby-grid .sc-acciones{
  display:grid;
  grid-template-rows:var(--sc-fil,36px) var(--sc-fil,36px);
  row-gap:var(--sc-gap,.35rem);
  gap:var(--sc-gap,.35rem);
}

/* ══════════════════════════════════════════════════════════════════
   EL REDISEÑO DE LA FILA DEL MENÚ — 18/09/2026
   ──────────────────────────────────────────────────────────────────
   Franco: *«quiero que me hagas un nuevo diseño completo y moderno para
   las tarjetas del menú de Mega Spin, donde se muestren los datos
   clave, tenga mejor diseño y una estética top»*.

   ⚠⚠ LO QUE ESTABA MAL NO ERA EL GUSTO, ERA LA JERARQUÍA, y se puede
   medir mirando la captura de antes:

   1. LAS CUATRO FILAS ERAN IDÉNTICAS. La única decisión que el jugador
      toma en esta pantalla es a qué sala entra —100, 250, 500 o 1.000—
      y las cuatro filas se veían exactamente igual salvo por el número.
      Peor: `COLOR_SALA` YA EXISTÍA y llegaba a la fila como `--gc`,
      pero la banda inclinada que lo usaba se sacó el 08/09 y nadie
      reemplazó el portador. O sea: el dato del color venía viajando
      hasta el CSS para no pintarse en ningún lado.
   2. EL LOGO ERA LO MÁS GRANDE DE LA FILA (57,6 px) y decía «MEGA SPIN»
      cuatro veces adentro de la pantalla de Mega Spin. Cero información
      en el bloque más ruidoso.
   3. EL JACKPOT —que es LA razón para elegir una sala más cara— era el
      texto más chico y más apagado de la fila (.76rem, `--text-dim`).

   ⚠ LO QUE **NO** SE TOCA, PORQUE YA LO DECIDIÓ FRANCO:
   · La grilla de dos renglones contra los dos botones (08/09/2026,
     *«poné el título de la cantidad de monedas a la misma altura que el
     botón de Recompensas, y la línea del jackpot alineada con Jugar
     Ahora»*). Todo el rediseño pasa ADENTRO de esos dos renglones.
   · Los dos botones, que son ley fija.
   · Sin caja y sin fondo distinto: el color de la sala NO se pinta como
     fondo de la fila —eso es exactamente lo que Franco sacó el
     02/09—. Se pinta como LUZ en el medallón, que es un acento.
   ══════════════════════════════════════════════════════════════════ */

/* ── EL MEDALLÓN DE LA SALA ────────────────────────────────────────
   ⚠⚠ ES CSS PURO SOBRE `.gr-cam`, SIN MARCADO NUEVO, y eso es a
   propósito: `.gr-cam` es el único nodo que comparten las CUATRO
   pantallas de esta familia (Mega Spin, Doble o Nada, Survival y
   Batalla de Sobres) — y Doble o Nada ni siquiera entra a
   `.lobby-grid`. Un `<span>` nuevo habría que agregarlo en cuatro
   archivos, y el que se olvide queda sin medallón.

   ⚠ EL COLOR SALE DE `--tier-rgb`, CON EL ACENTO COMO RESPALDO: la
   pantalla que no declare escalón sigue viéndose bien, en el color de
   su competencia, sin una regla nueva acá. */
.lobby-grid .gr-cam{
  --sc-med: calc(var(--sc-ico,48px) + 8px);
  width:var(--sc-med); height:var(--sc-med);
  padding:0; margin-right:.3rem;
  border-radius:var(--r-card,14px);
  /* ⚠ NO ES UNA CAJA DE COLOR: es el fondo de la página con una luz del
     color del escalón encima, que a .12 de alfa se lee como brillo y no
     como relleno. El borde hace el resto del trabajo. */
  background:
    radial-gradient(120% 120% at 50% 0%,
      rgba(var(--tier-rgb, var(--cop-acento-rgb,12,149,235)), .16) 0%,
      rgba(var(--tier-rgb, var(--cop-acento-rgb,12,149,235)), .03) 70%,
      transparent 100%),
    var(--bg, #0b0e14);
  border:1.4px solid rgba(var(--tier-rgb, var(--cop-acento-rgb,12,149,235)), .45);
  box-sizing:border-box;
}
/* ⚠⚠ Y EL LOGO SE ACHICA DE 57,6 A 40 px. No es que quede lindo más
   chico: deja de ser el bloque más grande de una fila donde no aporta
   ningún dato, y devuelve 17 px de ancho al renglón del jackpot — que
   es el renglón que el 08/09 se partía en dos y por el que el logo
   tuvo que quedarse en 1.2×. Ahora sobra lugar para agrandar el dato.
   ⚠ Se escribe como factor de `--sc-ico` y no como número suelto, por
   lo mismo que la regla de arriba: una pantalla lo cambia sin tocar
   esta hoja. */
.lobby-grid .gr-cam .sc-logo{
  width:calc(var(--sc-ico,48px) * var(--sc-logo-x,.84));
  height:calc(var(--sc-ico,48px) * var(--sc-logo-x,.84));
}

/* ── EL RENGLÓN 1: LA ENTRADA ──────────────────────────────────────
   ⚠ ES UN NÚMERO DE DISPLAY y por eso pasa el techo de 1.5rem sin
   pedir permiso: es la excepción que el sistema ya define para
   marcadores, premios y contadores. Va en Anton, como manda.
   ⚠ EL RÓTULO «ENTRADA» EXISTE PORQUE EL NÚMERO SOLO ERA AMBIGUO: en
   una fila con dos montos —lo que pagás y lo que se puede ganar—,
   cuál es cuál se estaba adivinando por el tamaño. */
.lobby-grid .sc-entrada{font-size:var(--fs-xl, 1.3rem)}
.lobby-grid .sc-fila1{gap:.5rem;align-items:center}

/* ⚠⚠ EL RÓTULO VA ARRIBA DEL NÚMERO, NO AL LADO, Y LA CAPTURA ES LA QUE
   LO DECIDIÓ. Escrito en línea —«ENTRADA 🪙1.000»— la fila se metía
   DEBAJO del botón de Recompensas: la columna de texto mide 152 px en
   390 px de pantalla, y el rótulo en línea se comía 95 de esos 152. Los
   números decían que todo estaba bien —ningún desborde, la fila seguía
   midiendo 121— porque el texto se superpone al botón sin cambiar el
   tamaño de nada. Es exactamente la trampa que ya había costado el
   08/09 con el reparto.
   ⚠ APILADO CUESTA CERO ANCHO: el rótulo cae en el aire que el renglón
   ya tenía arriba del número, adentro de los mismos 36 px de la grilla.
   Por eso el rediseño entra sin tocar el alto de la fila ni la
   alineación con los botones. */
.sc-dato{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:.06rem; min-width:0; line-height:1;
}
.sc-rot{
  font:700 .62rem/1 Inter,sans-serif;
  letter-spacing:.11em; text-transform:uppercase;
  /* ⚠⚠ NO VA `--text-faint` — 19/09/2026, `MANUAL-DE-MARCA.md` §3.3.
     Este rótulo nació ayer en `--text-faint`, que da 3,16:1 sobre el
     fondo y NO llega al mínimo legible. Medido, no supuesto. A .62rem y
     al sol —que es donde se juega, en la calle y con una mano— ese gris
     desaparece. `--t-resto` da 5,21:1 y ya existía declarado: el
     reemplazo no hubo que inventarlo, hubo que usarlo. */
  color:var(--tx-3, #7c8597);
  white-space:nowrap;
}

/* ── EL RENGLÓN 2: EL JACKPOT ──────────────────────────────────────
   ⚠⚠ PASA DE .76rem EN GRIS A ANTON DORADO DE 1.05rem. Es el dato que
   decide la fila: el jugador compara salas por lo que se puede llevar,
   no por lo que paga. Que fuera el texto más chico de la fila estaba
   diciendo lo contrario de lo que la pantalla quiere decir.
   ⚠ EL DORADO ES `--gold` DEL SISTEMA, no un amarillo nuevo. */
.lobby-grid .sc-jackv{
  font-family:'Anton',sans-serif;
  font-size:var(--fs-base, 1rem); line-height:1.1;
  color:var(--gold,#ffc233);
  display:inline-flex; align-items:center; gap:.3rem;
}
.lobby-grid .sc-jackv .cop-ico{
  --cop-ico:.9em; width:.9em; height:.9em; position:relative; top:-.04em;
}
.lobby-grid .sc-jack{
  display:inline-flex; align-items:center; gap:var(--gap-sm, .5rem);
  font-size:inherit;
}

/* ⚠ EL APRETADO REEMPLAZA AL `transform:none` QUE HABÍA. Una fila que
   no devuelve nada al tocarla se siente rota en el teléfono, que es
   donde se juega. 120 ms, el mismo tiempo del botón del sistema.
   ⚠ Y EL HOVER VA SÓLO CON PUNTERO DE VERDAD: en el teléfono el
   navegador lo simula al apoyar el dedo y deja la fila pintada. */
.lobby-grid .sc-fila{transition:background-color .12s ease}
.lobby-grid .sc-fila:active{
  background-color:rgba(var(--tier-rgb, var(--cop-acento-rgb,12,149,235)), .07);
}
@media (hover:hover) and (pointer:fine){
  .lobby-grid .sc-fila:hover{
    background-color:rgba(var(--tier-rgb, var(--cop-acento-rgb,12,149,235)), .05);
  }
}

/* ⚠ A 359 px LOS BOTONES BAJAN debajo de los datos en vez de apretar la
   entrada a tres dígitos. */
@media (max-width:359px){
  .lobby-grid{--sc-ico:44px}
  .lobby-grid .sc-fila{flex-wrap:wrap}
  /* ⚠⚠ Y ACÁ SE DESHACE LA GRILLA DE DOS RENGLONES. Con los botones
     debajo del texto ya no hay nada con qué alinear: mantener las dos
     filas de 36 px sólo agregaría 40 px de aire vacío en la pantalla más
     chica, que es justo donde menos sobra. Alinear es para cuando hay
     dos columnas; cuando se apilan, se compacta. */
  .lobby-grid .gr-info{display:flex;flex-direction:column;justify-content:center;gap:.15rem}
  .lobby-grid .sc-acciones{display:flex;flex-direction:row;width:100%;margin-top:.5rem}
}