/* ════════════════════════════════════════════════════════════════════
   lobby.css — el Inicio de Piofly como lobby de videojuego (2026-10-08)
   ────────────────────────────────────────────────────────────────────
   Un solo tema, oscuro, a propósito: el lobby es un mundo de neón y no
   una hoja. Todo color se pinta explícito aquí, sin depender del tema.

   EL ESCENARIO SE MIDE: la foto (assets/lobby/escenario*.webp) cubre el
   área como un `cover`, pero en un elemento de verdad (.lb-mundo) que
   lobby.js dimensiona. Así lo que va encima (tu Pío, tu party) se pone
   en % de la FOTO y cae siempre sobre sus pedestales, mida lo que mida
   la ventana. --u es el 1 % del alto de la foto, en px: todo lo que va
   en el escenario se mide en u para crecer con él.
   ════════════════════════════════════════════════════════════════════ */
:root {
  --lb-fondo: #0B0814;
  --lb-panel: rgba(20, 14, 34, .72);
  --lb-panel-solido: #171026;
  --lb-borde: rgba(196, 166, 255, .16);
  --lb-txt: #F4F0FF;
  --lb-sub: #B9AFD0;
  --lb-mute: #8A80A6;
  --lb-morado: #8B5CF6;
  --lb-morado-2: #A855F7;
  --lb-naranja: #FF8A00;
  --lb-verde: #34D399;
  --lb-rosa: #F472B6;
  --lb-glow: 0 0 24px rgba(168, 85, 247, .35);
}
html, body.lb-body { margin: 0; height: 100%; background: var(--lb-fondo); color: var(--lb-txt); }
body.lb-body { font-family: 'Nunito', system-ui, sans-serif; overflow: hidden; }
/* El lobby empieza donde acaba el menú (riel.css lo mide en --riel-w) y,
   en el teléfono, termina donde empieza la barra de abajo. */
.lb { position: fixed; top: 0; right: 0; bottom: var(--bnav-h, 0px); left: var(--riel-w, 0px); display: flex; }
.lb [hidden] { display: none !important; }
.lb a { color: inherit; text-decoration: none; }
.lb button { font-family: inherit; }
.lb :focus-visible { outline: 2px solid var(--lb-morado-2); outline-offset: 3px; }

/* ══ EL ESCENARIO ══ */
.lb-escena { position: relative; flex: 1; min-width: 0; overflow: hidden; background: #120B22; }
.lb-mundo { position: absolute; left: 0; top: 0; --u: 9px; }
/* La foto va DIFUMINADA (Edgar 2026-10-08: «difumínala un 10 % para que
   sobresalga el pájaro y los pájaros de mis amigos», y luego «se ve muy
   difuminado, quítale un 75 %», y «redúcelo un poco más»: de 0.4 u a
   0.05 u): fondo apenas suave,
   pájaros nítidos, como la profundidad de campo de una cámara. Va en un
   ::before para que el desenfoque no toque a los pájaros, y se pasa un
   poco del borde para que el desenfoque no deje la orilla transparente. */
.lb-mundo::before {
  content: ''; position: absolute; inset: -1.5%; z-index: 0; pointer-events: none;
  background: url(../../assets/lobby/escenario.webp?v=2) center / 100% 100% no-repeat;
  filter: blur(calc(var(--u) * .05));
}
.lb-escena::after {
  /* viñeta: la UI se lee sobre la foto sin tapar el escenario */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 5, 16, .55) 0%, transparent 18%, transparent 70%, rgba(8, 5, 16, .7) 100%),
    radial-gradient(120% 90% at 50% 60%, transparent 55%, rgba(8, 5, 16, .5) 100%);
}

/* Tú, sobre el pedestal grande. El bloque deja pasar el clic (tu nombre
   y tu Pío son para verse): solo lo atrapan sus botones, .lb-vestir. */
.lb-yo {
  position: absolute; left: 50.2%; top: 73.8%; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  transform: translate(-50%, -100%);
  pointer-events: none;
}
/* El dibujo trae aire arriba (la corona) y abajo (el encuadre): los
   márgenes negativos lo paran SOBRE el pedestal y lo pegan a su nombre. */
.lb-yo-pio { width: calc(var(--u) * 34); height: calc(var(--u) * 34); margin-top: calc(var(--u) * -2.5); margin-bottom: calc(var(--u) * -5.5); filter: drop-shadow(0 calc(var(--u) * 2) calc(var(--u) * 3) rgba(0, 0, 0, .45)); }
.lb-yo-pio > .pio { width: 100%; height: 100%; }
/* Tu caja es un botón: solo en una party se puede tocar (su menú tiene
   «Salir de la party»). Fuera de una party está apagado y se ve igual. */
.lb-yo-cab { position: relative; display: flex; flex-direction: column; align-items: center; }
.lb-yo.is-menu { z-index: 6; }
.lb-yo-tag {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 18px 7px; border-radius: 16px; font-family: inherit; color: inherit; text-align: center; cursor: default;
  background: rgba(14, 9, 26, .62); border: 1px solid var(--lb-borde); backdrop-filter: blur(8px);
  transition: background .18s ease, border-color .18s ease;
}
.lb-yo-tag:not(:disabled) { pointer-events: auto; cursor: pointer; }
.lb-yo-tag:not(:disabled):hover, .lb-yo-tag[aria-expanded="true"] { background: rgba(30, 20, 52, .82); border-color: rgba(196, 166, 255, .45); }
.lb-yo-nombre { display: flex; align-items: center; gap: 6px; }
.lb-yo-n { font-size: 17px; font-weight: 900; color: #fff; letter-spacing: -.2px; white-space: nowrap; }
.lb-yo-nombre .lb-corona { font-size: 17px; }
/* «Cambiar a Pío» y «Emotes» (Edgar 2026-10-08: «haz que se pueda
   clickear bien»). La caja de Pío sube 2.5 u sobre ellos y su filtro le
   da capa propia: pintaba y atrapaba el clic encima de los botones y
   solo respondía la franja de arriba. Ahora Pío deja pasar el clic, la
   fila va encima de él y cada pastilla mide 36 px de alto (40 en el
   teléfono). */
.lb-vestir {
  position: relative; pointer-events: auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; margin-top: 8px; padding: 0 15px; border-radius: 999px;
  font-size: 13px; font-weight: 800; color: #E9DDFF; background: rgba(139, 92, 246, .22); border: 1px solid rgba(196, 166, 255, .3);
  transition: background .18s ease, transform .18s cubic-bezier(0.22, 1, 0.36, 1);
}
/* El área del clic se pasa unos px de la pastilla: perdona la orilla y
   no se le escapa al mouse cuando, al pasar encima, sube 1 px. */
.lb-vestir::after { content: ''; position: absolute; inset: -6px -3px; border-radius: inherit; }
.lb-vestir:hover { background: rgba(139, 92, 246, .38); transform: translateY(-1px); }
.lb-yo-acc { position: relative; z-index: 1; display: flex; gap: 6px; justify-content: center; }
button.lb-vestir { cursor: pointer; font-family: inherit; }
.lb-vestir[aria-expanded="true"] { background: rgba(139, 92, 246, .55); border-color: rgba(216, 180, 254, .7); }

/* ══ La rueda de emotes ══
   Se abre centrada en tu Pío (lobby.js pone --cx y --cy). Los seis
   emotes salen del centro escalonados, como abanico; el centro dice el
   que señalas. */
.lb-rueda {
  position: absolute; inset: 0; z-index: 9;
  background: radial-gradient(circle at var(--cx) var(--cy), rgba(8, 5, 16, .2), rgba(8, 5, 16, .62) 60%);
  animation: lb-rueda-velo .2s ease both;
}
@keyframes lb-rueda-velo { from { opacity: 0; } to { opacity: 1; } }
.lb-rueda-disco {
  position: absolute; left: var(--cx); top: var(--cy); width: 330px; height: 330px; margin: -165px 0 0 -165px; border-radius: 50%;
  background: radial-gradient(circle, rgba(30, 20, 52, .55) 0 34%, rgba(30, 20, 52, .78) 35% 66%, transparent 67%);
  box-shadow: 0 0 0 1px rgba(196, 166, 255, .22), 0 24px 60px rgba(0, 0, 0, .45);
  animation: lb-rueda-abre .32s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes lb-rueda-abre { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.lb-rueda-centro {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 104px;
  display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; pointer-events: none;
}
.lb-rueda-centro b { font-size: 15px; font-weight: 900; color: #fff; line-height: 1.15; }
.lb-rueda-centro span { font-size: 10.5px; font-weight: 800; color: var(--lb-sub); }
.lb-emote {
  position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer;
  border: 1.5px solid rgba(196, 166, 255, .3); background: rgba(24, 16, 42, .92); color: #fff; font-family: inherit;
  transform: translate(calc(var(--x) * 120px), calc(var(--y) * 120px));
  animation: lb-emote-sale .36s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: calc(var(--i) * 35ms);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
@keyframes lb-emote-sale { from { transform: translate(0, 0) scale(.4); opacity: 0; } to { transform: translate(calc(var(--x) * 120px), calc(var(--y) * 120px)); opacity: 1; } }
.lb-emote i { font-size: 26px; color: #FFB35C; }
.lb-emote span { font-size: 10.5px; font-weight: 800; color: var(--lb-sub); max-width: 70px; line-height: 1.1; }
.lb-emote b { position: absolute; top: 4px; right: 8px; font-size: 9.5px; font-weight: 900; color: var(--lb-mute); }
.lb-emote:hover, .lb-emote:focus-visible { background: rgba(139, 92, 246, .55); border-color: rgba(216, 180, 254, .8); box-shadow: 0 0 22px rgba(168, 85, 247, .5); outline: none; }
.lb-emote:hover span, .lb-emote:focus-visible span { color: #fff; }
@media (max-width: 899px) {
  .lb-rueda-disco { width: 270px; height: 270px; margin: -135px 0 0 -135px; }
  .lb-emote { width: 64px; height: 64px; margin: -32px 0 0 -32px; transform: translate(calc(var(--x) * 96px), calc(var(--y) * 96px)); }
  @keyframes lb-emote-sale { from { transform: translate(0, 0) scale(.4); opacity: 0; } to { transform: translate(calc(var(--x) * 96px), calc(var(--y) * 96px)); opacity: 1; } }
  .lb-emote i { font-size: 22px; }
}

/* El estado: Listo / No listo / Hablando / Desconectado / Invitado */
.lb-estado { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; color: var(--lb-mute); white-space: nowrap; }
.lb-estado::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.lb-estado--listo { color: var(--lb-verde); }
.lb-estado--nolisto { color: #FBBF24; }
.lb-estado--hablando { color: var(--lb-rosa); }
.lb-estado--hablando::before { animation: lb-latir .9s ease-in-out infinite; }
.lb-estado--off { color: var(--lb-mute); }
.lb-estado--invitado { color: #C4B5FD; }
.lb-estado--fuera { color: #C4B5FD; }   /* en el vestidor, o en otra página de Piofly */
.lb-estado--lobby { color: #C4B5FD; }   /* solo, sin party: nada para lo que estar listo */
@keyframes lb-latir { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.6); opacity: .6; } }

/* ══ LA PARTY: cada amigo DE PIE en su pedestal (Edgar 2026-10-08) ══
   «Me gustaría ver el pájaro ahí, no solo un cuadrito, y arriba, en el
   cuadro negro, el nombre y el listo y no listo.» Igual que tú en el
   centro: la caja oscura arriba y el Pío entero debajo, parado en su
   pedestal. Más chico (22 u contra tus 34): está más lejos. La ranura se
   ancla por ABAJO en el pedestal; los márgenes negativos del Pío le
   quitan el aire que trae el dibujo para que pise la tarima. */
.lb-ranura {
  position: absolute; z-index: 2; transform: translate(-50%, -100%);
  width: calc(var(--u) * 22);
  display: flex; flex-direction: column; align-items: center;
}
.lb-ranura.is-menu { z-index: 6; }
.lb-ranura[data-r="0"] { left: 34%;   top: 68.8%; }
.lb-ranura[data-r="1"] { left: 65.7%; top: 68.8%; }
.lb-ranura[data-r="2"] { left: 77%;   top: 68.8%; }
.lb-ranura[data-r="3"] { left: 23.4%; top: 68.8%; }
.lb-socio { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.lb-socio-cab {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  pointer-events: auto; animation: lb-entra .45s cubic-bezier(0.22, 1, 0.36, 1) .09s backwards;
}
.lb-socio-tag {
  display: flex; flex-direction: column; align-items: center; gap: 1px; max-width: calc(var(--u) * 26); min-width: 96px;
  padding: 6px 13px 5px; border-radius: 14px; font-family: inherit; color: inherit; text-align: center;
  background: rgba(14, 9, 26, .62); border: 1px solid var(--lb-borde); backdrop-filter: blur(8px);
  transition: background .18s ease, border-color .18s ease, transform .18s cubic-bezier(0.22, 1, 0.36, 1);
}
button.lb-socio-tag { cursor: pointer; }
button.lb-socio-tag:hover, button.lb-socio-tag[aria-expanded="true"] { background: rgba(30, 20, 52, .82); border-color: rgba(196, 166, 255, .45); }
.lb-socio-n { display: flex; align-items: center; justify-content: center; gap: 5px; max-width: 100%; font-size: 14.5px; font-weight: 900; color: #fff; white-space: nowrap; }
.lb-socio-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lb-socio-x {
  padding: 4px 11px; border-radius: 999px; border: none; cursor: pointer; font-family: inherit;
  font-size: 11.5px; font-weight: 800; color: var(--lb-sub); background: rgba(20, 14, 34, .72); backdrop-filter: blur(6px);
}
.lb-socio-x:hover { color: #fff; background: rgba(255, 255, 255, .14); }
.lb-socio-pio {
  width: calc(var(--u) * 22); height: calc(var(--u) * 22);
  margin-top: calc(var(--u) * -1.6); margin-bottom: calc(var(--u) * -3.5);
  filter: drop-shadow(0 calc(var(--u) * 1.4) calc(var(--u) * 2) rgba(0, 0, 0, .45));
  animation: lb-socio-llega .6s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  transition: opacity .35s ease, filter .35s ease;
}
.lb-socio-pio > .pio { width: 100%; height: 100%; }
/* Llega: baja un poco desde arriba y se posa, con un destello de luz en
   su pedestal (como quien entra a la sala). */
@keyframes lb-socio-llega {
  from { opacity: 0; transform: translateY(calc(var(--u) * -2.4)) scale(.9); }
  to { opacity: 1; transform: none; }
}
.lb-socio::after {
  content: ''; position: absolute; left: 50%; bottom: calc(var(--u) * -1.8); width: calc(var(--u) * 17); height: calc(var(--u) * 3.6);
  transform: translateX(-50%); border-radius: 50%; pointer-events: none; z-index: -1; opacity: 0;
  background: radial-gradient(ellipse at center, rgba(196, 166, 255, .75), rgba(139, 92, 246, .25) 55%, transparent 72%);
  animation: lb-socio-luz 1.1s cubic-bezier(0.22, 1, 0.36, 1) .05s both;
}
@keyframes lb-socio-luz { 0% { opacity: 0; transform: translateX(-50%) scale(.4); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) scale(1.25); } }
/* Se va (se desconectó o salió): se desvanece hacia atrás. */
.lb-socio.is-saliendo { animation: lb-socio-sale .42s cubic-bezier(0.55, 0, 0.85, 0.4) forwards; }
@keyframes lb-socio-sale { to { opacity: 0; transform: scale(.88); filter: blur(4px); } }
/* Los estados que se ven en el Pío, no solo en la caja */
.lb-socio--invitado .lb-socio-pio { opacity: .42; filter: grayscale(.45) drop-shadow(0 calc(var(--u) * 1.4) calc(var(--u) * 2) rgba(0, 0, 0, .35)); }
.lb-socio--fuera .lb-socio-pio { opacity: .62; }
.lb-socio--off .lb-socio-pio { opacity: .45; filter: grayscale(.6); }
.lb-socio--hablando .lb-socio-tag { box-shadow: 0 0 0 2px var(--lb-rosa), 0 0 18px rgba(244, 114, 182, .5); animation: lb-habla-tag 1s ease-in-out infinite; }
@keyframes lb-habla-tag { 0%, 100% { box-shadow: 0 0 0 2px var(--lb-rosa), 0 0 10px rgba(244, 114, 182, .35); } 50% { box-shadow: 0 0 0 2px var(--lb-rosa), 0 0 24px rgba(244, 114, 182, .75); } }

/* ══ La corona ══
   Dorada y con brillo. Cuando cambia de cabeza, cae girando sobre la del
   nuevo líder y su caja destella en oro. */
.lb-corona { flex-shrink: 0; font-size: 15px; color: #FBBF24; filter: drop-shadow(0 0 6px rgba(251, 191, 36, .5)); }
.lb-corona.is-nueva { animation: lb-corona-llega .75s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes lb-corona-llega {
  0% { opacity: 0; transform: translateY(-14px) scale(.3) rotate(-30deg); }
  60% { opacity: 1; transform: translateY(1px) scale(1.3) rotate(8deg); }
  100% { opacity: 1; transform: none; }
}
.lb-socio-tag.is-coronado, .lb-yo-tag.is-coronado { animation: lb-tag-oro 1.2s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes lb-tag-oro {
  0% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
  25% { box-shadow: 0 0 0 3px rgba(251, 191, 36, .85), 0 0 30px rgba(251, 191, 36, .55); border-color: rgba(251, 191, 36, .9); }
  100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
}
.lb-tag-mas { flex-shrink: 0; font-size: 11px; color: var(--lb-sub); transition: transform .2s cubic-bezier(0.22, 1, 0.36, 1); }
[aria-expanded="true"] > .lb-socio-n .lb-tag-mas, [aria-expanded="true"] > .lb-yo-nombre .lb-tag-mas { transform: rotate(180deg); }
.lb-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ══ El menú de una caja: pasar la corona (el líder, en la de un amigo)
   o salir de la party (cualquiera, en la suya) ══ */
.lb-menu {
  position: absolute; top: calc(100% + 6px); left: 50%; z-index: 6; min-width: 196px; padding: 6px;
  transform: translateX(-50%); border-radius: 15px; pointer-events: auto;
  background: var(--lb-panel-solido); border: 1px solid rgba(196, 166, 255, .32);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55), var(--lb-glow);
  animation: lb-menu-abre .24s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes lb-menu-abre { from { opacity: 0; transform: translate(-50%, -6px) scale(.94); } to { opacity: 1; transform: translateX(-50%); } }
.lb-menu-op {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 14px;
  border: 0; border-radius: 11px; background: none; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 14px; font-weight: 800; color: #fff; white-space: nowrap;
}
.lb-menu-op i { font-size: 18px; }
.lb-menu-op:hover, .lb-menu-op:focus-visible { background: rgba(139, 92, 246, .28); outline: none; }
.lb-menu-op--corona i { color: #FBBF24; }
.lb-menu-op--salir i { color: #FCA5A5; }
.lb-menu-op--sacar i { color: #FCA5A5; }
.lb-menu-op--reportar i { color: #FCA5A5; }
/* Sacar de la party: el primer toque pregunta en el mismo renglón. */
.lb-menu-op.is-armado { color: #FECACA; background: rgba(239, 68, 68, .2); box-shadow: inset 0 0 0 1px rgba(248, 113, 113, .5); }

/* ══ Los avisos de tu party ══
   «Lalo se desconectó», «Ana te pasó la corona». Arriba a la izquierda
   del escenario (a la derecha están la racha y Amigos), con el Pío de
   quien se fue o llegó. Entran cayendo con rebote y se van solos. */
.lb-avisos {
  position: absolute; top: 18px; left: 24px; z-index: 7; width: min(340px, calc(100% - 48px));
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; pointer-events: none;
}
.lb-toast {
  display: flex; align-items: center; gap: 11px; padding: 8px 15px 8px 8px; border-radius: 17px;
  font-size: 13.5px; line-height: 1.35; color: var(--lb-txt);
  background: linear-gradient(180deg, rgba(44, 30, 76, .96), rgba(24, 16, 42, .96)); border: 1px solid rgba(196, 166, 255, .35);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5); backdrop-filter: blur(10px);
  animation: lb-toast-entra .5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.lb-toast b { font-weight: 900; color: #fff; }
.lb-toast.is-fuera { animation: lb-toast-sale .4s cubic-bezier(0.55, 0, 0.85, 0.4) forwards; }
@keyframes lb-toast-entra { from { opacity: 0; transform: translateY(-14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes lb-toast-sale { to { opacity: 0; transform: translateY(-10px); } }
.lb-toast-av { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(139, 92, 246, .3); font-size: 19px; color: #E9DDFF; }
.lb-toast-av > .pio { width: 100%; height: 100%; }
.lb-toast--desconectado { border-color: rgba(248, 113, 113, .45); }
.lb-toast--desconectado .lb-toast-av, .lb-toast--salio .lb-toast-av { filter: grayscale(.65); opacity: .85; }
.lb-toast--entro { border-color: rgba(52, 211, 153, .5); }
.lb-toast--corona { border-color: rgba(251, 191, 36, .6); box-shadow: 0 14px 34px rgba(0, 0, 0, .5), 0 0 24px rgba(251, 191, 36, .22); }
@media (min-width: 900px) and (max-width: 1599px) {
  /* ahí el aviso de invitación también vive arriba a la izquierda */
  .lb:has(#lb-aviso:not([hidden])) .lb-avisos { top: 96px; }
}
.lb-pedestal-extra {
  /* «Salón futurista al atardecer» trae tres pedestales chicos (uno a la
     izquierda y dos a la derecha); el cuarto se dibuja, en espejo. */
  position: absolute; left: 23.4%; top: 69.4%; width: calc(var(--u) * 20); height: calc(var(--u) * 3.2);
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(99, 102, 241, .5), rgba(30, 20, 60, .9) 62%, rgba(10, 8, 20, 0) 72%);
  box-shadow: 0 0 0 2px rgba(129, 140, 248, .55), 0 0 18px rgba(99, 102, 241, .6);
  filter: blur(calc(var(--u) * .05));   /* desenfocado como el resto del fondo */
}
@keyframes lb-entra { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
/* El punto verde de «en línea» (en el cajón de Amigos). */
.lb-carta-online { position: absolute; right: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--lb-verde); box-shadow: 0 0 0 3px #1A1230; }
/* La ranura vacía: + Invitar amigo (del ancho de antes: la ranura ahora
   es del ancho de un Pío). */
.lb-invitar {
  width: calc(var(--u) * 15); min-width: 108px; max-width: 160px;
  display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer;
  padding: 14px 8px 12px; border-radius: 18px; border: 1px dashed rgba(196, 166, 255, .35);
  background: rgba(20, 14, 34, .45); color: var(--lb-sub); backdrop-filter: blur(6px);
  font-size: 13px; font-weight: 800; line-height: 1.2;
  transition: background .18s ease, border-color .18s ease, transform .18s cubic-bezier(0.22, 1, 0.36, 1);
  animation: lb-entra .45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.lb-invitar:hover { background: rgba(139, 92, 246, .2); border-color: rgba(196, 166, 255, .7); color: #fff; transform: translateY(-2px); }
.lb-invitar-mas {
  width: calc(var(--u) * 6.4); height: calc(var(--u) * 6.4); min-width: 46px; min-height: 46px; max-width: 60px; max-height: 60px;
  border-radius: 50%; display: grid; place-items: center; font-size: 22px; color: #fff;
  border: 1.5px solid rgba(196, 166, 255, .5); background: rgba(139, 92, 246, .15);
}

/* ══ HUD de arriba ══ */
.lb-hud { position: absolute; top: 18px; right: 22px; z-index: 4; display: flex; align-items: center; gap: 10px; }
.lb-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px;
  font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums; backdrop-filter: blur(8px);
}
.lb-chip i { font-size: 18px; }
.lb-chip--racha { color: #FFB35C; background: rgba(255, 138, 0, .14); border: 1px solid rgba(255, 138, 0, .4); }
.lb-chip--fz { color: #5BE39C; background: rgba(34, 197, 94, .12); border: 1px solid rgba(34, 197, 94, .35); }
/* Amigos: abre el cajón para invitar, y cuenta los que están en línea
   y aún no están en tu party. */
.lb-chip--amigos {
  position: relative; cursor: pointer; font-family: inherit; color: var(--lb-txt);
  background: rgba(139, 92, 246, .18); border: 1px solid rgba(196, 166, 255, .38);
  transition: background .18s ease, border-color .18s ease;
}
.lb-chip--amigos:hover { background: rgba(139, 92, 246, .3); border-color: rgba(196, 166, 255, .6); }
.lb-amigos-n {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center;
  font-size: 11px; font-weight: 900; color: #1A0F2E; background: var(--lb-verde);
}

/* ══ Lo contextual: dónde te quedaste (chico) ══ */
.lb-lado {
  position: absolute; top: 84px; right: 22px; z-index: 4; width: 300px;
  padding: 14px; border-radius: 20px;
  background: linear-gradient(180deg, rgba(30, 21, 50, .86), rgba(16, 11, 28, .88));
  border: 1px solid var(--lb-borde); backdrop-filter: blur(12px); box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  animation: lb-entra .5s cubic-bezier(0.22, 1, 0.36, 1) .1s both;
}
.lb-lado-k { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 900; letter-spacing: 1.3px; text-transform: uppercase; color: var(--lb-sub); margin-bottom: 10px; }
.lb-lado-k i { font-size: 15px; color: var(--lb-morado-2); }
.lb-lado-fila { display: flex; gap: 12px; align-items: center; }
.lb-lado-img { width: 74px; height: 74px; flex-shrink: 0; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(233, 180, 76, .22), rgba(215, 38, 61, .16)); border: 1px solid rgba(233, 180, 76, .3); }
.lb-lado-img svg { width: 86%; height: 86%; }
.lb-lado-tx { min-width: 0; }
.lb-lado-tx b { display: block; font-size: 15.5px; font-weight: 900; color: #fff; }
.lb-lado-tx span { display: block; font-size: 12.5px; line-height: 1.4; color: var(--lb-sub); margin-top: 2px; }
.lb-lado-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 12px; padding: 11px; border-radius: 13px;
  font-size: 14.5px; font-weight: 900; color: #2A1600; background: linear-gradient(180deg, #FFA233, var(--lb-naranja));
  box-shadow: 0 8px 22px rgba(255, 138, 0, .3); transition: transform .18s cubic-bezier(0.22, 1, 0.36, 1), filter .18s ease;
}
.lb-lado-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }

/* ══ Abajo: el micrófono · JUGAR ══
   Un solo micrófono (Edgar 2026-10-08: «hay un micrófono y luego otro
   botón de chat de voz, no entiendo para qué»). Tres columnas iguales a
   los lados para que JUGAR siga exactamente al centro aunque a su derecha
   ya no haya nada. */
.lb-controles {
  position: absolute; left: 50%; bottom: 26px; z-index: 4; transform: translateX(-50%);
  display: grid; grid-template-columns: 112px auto 112px; align-items: start; gap: 22px;
}
.lb-controles > .lb-redondo { justify-self: end; }
/* Sin party: el botón se ve más quieto y, al tocarlo, explica que la voz
   es con tu party. */
.lb-redondo.is-solo .lb-redondo-b { color: var(--lb-sub); background: rgba(20, 14, 34, .55); }
.lb-redondo { display: flex; flex-direction: column; align-items: center; gap: 6px; border: none; background: none; cursor: pointer; padding: 0; color: var(--lb-sub); }
.lb-redondo-b {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; color: #fff;
  background: rgba(20, 14, 34, .78); border: 1.5px solid var(--lb-borde); backdrop-filter: blur(8px);
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.lb-redondo:hover .lb-redondo-b { border-color: rgba(196, 166, 255, .6); }
.lb-redondo-t { font-size: 11.5px; font-weight: 800; max-width: 96px; text-align: center; line-height: 1.2; }
.lb-redondo[aria-pressed="true"] .lb-redondo-b { border-color: var(--lb-verde); box-shadow: 0 0 0 4px rgba(52, 211, 153, .18); }
.lb-redondo.is-hablando .lb-redondo-b { box-shadow: 0 0 0 5px rgba(244, 114, 182, .3), 0 0 22px rgba(244, 114, 182, .5); border-color: var(--lb-rosa); }
.lb-jugar {
  display: inline-flex; align-items: center; gap: 12px; height: 64px; padding: 0 46px; border-radius: 20px; border: none; cursor: pointer;
  font-size: 22px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; color: #2A1600;
  background: linear-gradient(180deg, #FFB040 0%, #FF8A00 55%, #F06A00 100%);
  box-shadow: 0 0 0 2px rgba(255, 200, 120, .5), 0 14px 36px rgba(255, 138, 0, .42), inset 0 2px 0 rgba(255, 255, 255, .35);
  transition: transform .18s cubic-bezier(0.34, 1.56, 0.64, 1), filter .18s ease;
}
.lb-jugar i { font-size: 28px; }
.lb-jugar:hover { transform: translateY(-2px) scale(1.02); filter: brightness(1.06); }
.lb-jugar:active { transform: scale(.98); }
.lb-jugar--listo { color: #052E1F; background: linear-gradient(180deg, #6EE7B7, #34D399 60%, #10B981); box-shadow: 0 0 0 2px rgba(110, 231, 183, .5), 0 14px 36px rgba(16, 185, 129, .4), inset 0 2px 0 rgba(255, 255, 255, .35); }
.lb-jugar--espera { color: #E9DDFF; background: linear-gradient(180deg, #4C3A7A, #31245A); box-shadow: 0 0 0 2px rgba(196, 166, 255, .35); cursor: default; }
.lb-jugar--espera:hover { transform: none; filter: none; }
.lb-nota-voz {
  position: absolute; left: 50%; bottom: 120px; z-index: 5; transform: translateX(-50%); max-width: 340px;
  padding: 12px 16px; border-radius: 14px; font-size: 13px; line-height: 1.45; color: var(--lb-txt); text-align: center;
  background: var(--lb-panel-solido); border: 1px solid var(--lb-borde); box-shadow: 0 14px 30px rgba(0, 0, 0, .45);
  animation: lb-nota-entra .3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Su propia entrada: lb-entra terminaba en `transform: none` y se comía el
   translateX(-50%), así que la nota quedaba corrida a la derecha. */
@keyframes lb-nota-entra { from { opacity: 0; transform: translate(-50%, 10px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0); } }

/* La invitación que te llega */
.lb-aviso {
  position: absolute; top: 18px; left: 50%; z-index: 6; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(44, 30, 76, .95), rgba(24, 16, 42, .95)); border: 1px solid rgba(196, 166, 255, .4);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5), var(--lb-glow); animation: lb-baja .45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes lb-baja { from { opacity: 0; transform: translate(-50%, -14px); } to { opacity: 1; transform: translate(-50%, 0); } }
.lb-aviso-av { width: 44px; height: 44px; border-radius: 50%; background: rgba(139, 92, 246, .3); }
.lb-aviso-av > .pio { width: 100%; height: 100%; }
.lb-aviso-tx { font-size: 14px; color: var(--lb-txt); }
.lb-aviso-tx b { font-weight: 900; }
.lb-btn { padding: 9px 16px; border-radius: 12px; border: none; cursor: pointer; font-size: 13.5px; font-weight: 900; }
.lb-btn--si { color: #052E1F; background: var(--lb-verde); }
.lb-btn--no { color: var(--lb-sub); background: rgba(255, 255, 255, .08); }
.lb-btn--si:hover { filter: brightness(1.08); }
.lb-btn--no:hover { color: #fff; background: rgba(255, 255, 255, .14); }

/* ══ Cajón de amigos ══ */
.lb-cajon {
  position: fixed; top: 0; bottom: var(--bnav-h, 0px); left: var(--riel-w, 0px); z-index: 8; width: 360px; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #1E1533, #120C20); border-right: 1px solid var(--lb-borde);
  box-shadow: 24px 0 60px rgba(0, 0, 0, .5); animation: lb-cajon .35s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes lb-cajon { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
/* Se cierra como se abrió, al revés (Edgar 2026-10-08), con la curva de
   salida de la casa. Mientras sale ya no atrapa clics. */
.lb-cajon.is-cerrando { animation: lb-cajon-sale .28s cubic-bezier(0.55, 0, 0.85, 0.4) both; pointer-events: none; }
@keyframes lb-cajon-sale { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-24px); } }
@keyframes lb-cajon-sube { from { opacity: .6; transform: translateY(100%); } to { opacity: 1; transform: none; } }
@keyframes lb-cajon-baja { from { opacity: 1; transform: none; } to { opacity: .6; transform: translateY(100%); } }
.lb-cajon-cab { display: flex; align-items: center; justify-content: space-between; padding: 22px 20px 12px; }
.lb-cajon-cab b { font-size: 19px; font-weight: 900; color: #fff; }
.lb-x { width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer; display: grid; place-items: center; font-size: 16px; color: var(--lb-sub); background: rgba(255, 255, 255, .07); }
.lb-x:hover { color: #fff; background: rgba(255, 255, 255, .14); }
.lb-cajon-cuerpo { flex: 1; overflow: auto; padding: 4px 14px 24px; }
.lb-cajon-k { padding: 16px 8px 8px; font-size: 11px; font-weight: 900; letter-spacing: 1.3px; text-transform: uppercase; color: var(--lb-mute); }
.lb-amigo { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 14px; }
.lb-amigo:hover { background: rgba(255, 255, 255, .04); }
.lb-amigo-av { position: relative; width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; background: rgba(139, 92, 246, .25); }
.lb-amigo-av > .pio { width: 100%; height: 100%; }
.lb-amigo-av .lb-carta-online { width: 11px; height: 11px; right: 0; top: 0; box-shadow: 0 0 0 3px #1A1230; }
.lb-amigo-tx { flex: 1; min-width: 0; }
.lb-amigo-tx b { display: block; font-size: 14.5px; font-weight: 800; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-amigo-tx span { font-size: 12px; color: var(--lb-mute); }
.lb-amigo--off .lb-amigo-av { opacity: .55; }
.lb-amigo-btn { padding: 8px 14px; border-radius: 11px; border: none; cursor: pointer; font-size: 13px; font-weight: 900; color: #fff; background: var(--lb-morado); }
.lb-amigo-btn:hover { background: var(--lb-morado-2); }
.lb-amigo-btn:disabled { cursor: default; color: var(--lb-sub); background: rgba(255, 255, 255, .07); }
.lb-vacio { margin: 18px 8px; font-size: 14px; line-height: 1.55; color: var(--lb-sub); }
.lb-vacio-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 16px; border-radius: 12px; font-size: 14px; font-weight: 900; color: #fff; background: var(--lb-morado); }

/* ══ Elegir modo ══ */
.lb-modos {
  position: fixed; top: 0; bottom: var(--bnav-h, 0px); right: 0; left: var(--riel-w, 0px); z-index: 7; overflow: auto; padding: 30px 40px 40px;
  background: radial-gradient(900px 500px at 70% -10%, rgba(139, 92, 246, .28), transparent 70%), linear-gradient(180deg, #160E28, #0B0814);
  animation: lb-entra .35s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.lb-modos-cab { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 26px; }
.lb-modos-cab h1 { margin: 0; font-size: 34px; font-weight: 900; letter-spacing: -.8px; color: #fff; }
.lb-modos-cab p { margin: 6px 0 0; font-size: 15px; color: var(--lb-sub); max-width: 60ch; }
.lb-volver { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--lb-borde); background: rgba(255, 255, 255, .05); color: #fff; cursor: pointer; font-size: 14px; font-weight: 800; }
.lb-volver:hover { background: rgba(255, 255, 255, .1); }
.lb-modos-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.lb-modo {
  position: relative; display: flex; flex-direction: column; min-height: 250px; padding: 0; border-radius: 22px; overflow: hidden; text-align: left;
  border: 1px solid var(--lb-borde); background: #150E26; color: #fff; cursor: pointer;
  transition: transform .2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .2s ease, border-color .2s ease;
  animation: lb-entra .45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.lb-modo:nth-child(2) { animation-delay: .05s; } .lb-modo:nth-child(3) { animation-delay: .1s; }
.lb-modo:nth-child(4) { animation-delay: .15s; } .lb-modo:nth-child(5) { animation-delay: .2s; } .lb-modo:nth-child(6) { animation-delay: .25s; }
.lb-modo:hover:not(:disabled) { transform: translateY(-4px); border-color: rgba(196, 166, 255, .6); box-shadow: 0 18px 40px rgba(0, 0, 0, .45), var(--lb-glow); }
.lb-modo-arte { height: 140px; display: grid; place-items: center; font-size: 62px; color: rgba(255, 255, 255, .92); background: var(--arte); position: relative; }
.lb-modo-arte::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(21, 14, 38, .95)); }
.lb-modo-arte i { position: relative; z-index: 1; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .4)); }
.lb-modo-tx { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.lb-modo-tx b { font-size: 19px; font-weight: 900; }
.lb-modo-tx span { font-size: 13.5px; line-height: 1.45; color: var(--lb-sub); }
.lb-modo-pie { margin-top: auto; padding-top: 10px; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 900; color: var(--lb-naranja); }
.lb-modo-pill { position: absolute; top: 12px; right: 12px; z-index: 2; padding: 5px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 900; }
.lb-modo-pill--ya { color: #052E1F; background: var(--lb-verde); }
.lb-modo-pill--pronto { color: #E9DDFF; background: rgba(20, 14, 34, .8); border: 1px solid var(--lb-borde); }
.lb-modo:disabled { cursor: default; }
.lb-modo:disabled .lb-modo-arte { filter: saturate(.55) brightness(.8); }
.lb-modos-aviso { margin: 0 0 18px; padding: 12px 16px; border-radius: 14px; font-size: 14px; color: #FDE68A; background: rgba(251, 191, 36, .1); border: 1px solid rgba(251, 191, 36, .3); }

/* ══ La partida empezó ══ */
.lb-arranque { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(8, 5, 16, .82); backdrop-filter: blur(6px); animation: lb-entra .3s ease both; }
.lb-arranque-caja { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.lb-arranque-k { font-size: 13px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: var(--lb-naranja); }
.lb-arranque-n { font-size: 34px; font-weight: 900; color: #fff; }
.lb-arranque-cuenta { font-size: 96px; font-weight: 900; color: #fff; text-shadow: 0 0 40px rgba(168, 85, 247, .8); animation: lb-cuenta 1s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; }
@keyframes lb-cuenta { 0% { transform: scale(1.4); opacity: 0; } 30% { transform: scale(1); opacity: 1; } 100% { transform: scale(.9); opacity: .6; } }

.lb-demo { position: fixed; left: 50%; bottom: 6px; z-index: 30; transform: translateX(-50%); padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 900; color: #1A0F2E; background: #FDE047; }

/* ══ EL TELÉFONO (y la ventana angosta): el escenario vertical ══
   La foto vertical tiene el pedestal grande al centro y dos chicos a los
   lados: caben tú y dos de tu party; los demás van en una fila arriba.
   El menú es el de todas las páginas: angosto a la izquierda y, en el
   teléfono, la barra de abajo. */
@media (max-width: 899px) {
  .lb-mundo::before { background-image: url(../../assets/lobby/escenario-movil.webp?v=3); }
  .lb-yo { left: 50%; top: 79.6%; }
  .lb-yo-pio { width: calc(var(--u) * 24); height: calc(var(--u) * 24); }
  .lb-yo-n { font-size: 15px; }
  /* Más altos para el dedo, igual de anchos: a los lados están tus amigos. */
  .lb-vestir { min-height: 40px; padding: 0 12px; gap: 6px; font-size: 12px; white-space: nowrap; }
  /* Tus amigos, uno en cada nido de la foto (Edgar 2026-10-09: el balcón
     con cuatro nidos en las ramas): caben los cuatro de la party. Sus
     cajas se recorren solas si el borde de la pantalla las cortaría
     (lobby.js). */
  .lb-ranura { width: calc(var(--u) * 13); }
  .lb-ranura[data-r="0"] { left: 20.5%; top: 50.4%; }
  .lb-ranura[data-r="1"] { left: 82.5%; top: 57.4%; }
  .lb-ranura[data-r="2"] { left: 80.5%; top: 36.6%; }
  .lb-ranura[data-r="3"] { left: 22.5%; top: 29.8%; }
  .lb-pedestal-extra { display: none; }
  /* En party, «Continúa donde te quedaste» taparía los nidos de arriba:
     ahí lo que importa es tu party, así que la tarjeta se va. Sola o sin
     cuenta, se queda. */
  .lb[data-estado="party"] .lb-lado { display: none; }
  .lb-socio-pio { width: calc(var(--u) * 14); height: calc(var(--u) * 14); margin-top: calc(var(--u) * -1); margin-bottom: calc(var(--u) * -2.2); }
  .lb-socio-tag { min-width: 0; max-width: 104px; padding: 5px 9px 4px; border-radius: 12px; }
  .lb-socio-n { font-size: 12.5px; gap: 4px; }
  .lb-corona { font-size: 13px; }
  .lb-estado { font-size: 11px; }
  .lb-invitar { width: calc(var(--u) * 11); min-width: 92px; max-width: 120px; padding: 10px 6px; font-size: 11.5px; }
  .lb-menu { min-width: 180px; }
  .lb-avisos { top: calc(58px + env(safe-area-inset-top)); left: 12px; right: 12px; width: auto; align-items: center; }
  .lb:has(#lb-aviso:not([hidden])) .lb-avisos { top: calc(176px + env(safe-area-inset-top)); }
  .lb-hud { top: calc(10px + env(safe-area-inset-top)); right: 12px; gap: 6px; }
  .lb-chip { padding: 6px 11px; font-size: 13px; }
  .lb-chip--amigos .lb-chip-t { display: none; }
  .lb-lado { top: calc(58px + env(safe-area-inset-top)); bottom: auto; left: 12px; right: 12px; width: auto; padding: 10px 12px; }
  .lb-lado-k { margin-bottom: 6px; }
  .lb-lado-img { width: 48px; height: 48px; }
  .lb-lado-btn { display: none; }
  .lb-lado-fila { cursor: pointer; }
  .lb-controles { bottom: 18px; gap: 12px; grid-template-columns: 46px auto 46px; }
  .lb-redondo-b { width: 46px; height: 46px; font-size: 19px; }
  .lb-redondo-t { display: none; }
  /* «Entrar a jugar» (sin cuenta) es la etiqueta más larga y se partía
     en tres renglones. Desde que el lobby es la puerta de piofly.com es
     lo primero que ve quien llega por el teléfono: un renglón, siempre. */
  .lb-jugar { height: 54px; padding: 0 22px; gap: 8px; font-size: clamp(14px, 4.3vw, 18px); letter-spacing: .8px; white-space: nowrap; }
  .lb-jugar i { font-size: 24px; }
  .lb-cajon { left: var(--riel-w, 0px); right: 0; width: auto; top: auto; max-height: 78svh; border-radius: 22px 22px 0 0; border-right: none; animation-name: lb-cajon-sube; }
  /* En el teléfono el cajón sube desde abajo, y baja al cerrarse. */
  .lb-cajon.is-cerrando { animation-name: lb-cajon-baja; }
  .lb-modos { padding: 20px 16px 90px; }
  .lb-modos-cab { flex-direction: column; gap: 10px; }
  .lb-modos-cab h1 { font-size: 26px; }
  .lb-aviso { width: calc(100% - 24px); max-width: 420px; top: calc(60px + env(safe-area-inset-top)); flex-wrap: wrap; }
}
/* En el teléfono la cabecera de las otras páginas no entra: el lobby ya
   trae arriba tu racha, tus monedas y tus amigos. */
@media (max-width: 760px) {
  .lb-body .header { display: none; }
}
@media (max-width: 899px) and (max-height: 700px) {
  .lb-lado { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lb-invitar, .lb-lado, .lb-aviso, .lb-cajon, .lb-modos, .lb-modo, .lb-arranque, .lb-nota-voz,
  .lb-rueda, .lb-rueda-disco, .lb-emote,
  .lb-socio-cab, .lb-socio-pio, .lb-socio.is-saliendo, .lb-corona.is-nueva, .lb-menu,
  .lb-socio-tag.is-coronado, .lb-yo-tag.is-coronado, .lb-toast, .lb-toast.is-fuera, .lb-cajon.is-cerrando { animation: none; }
  .lb-socio::after { animation: none; opacity: 0; }
  .lb-estado--hablando::before, .lb-socio--hablando .lb-socio-tag, .lb-arranque-cuenta { animation: none; }
  .lb-jugar, .lb-vestir, .lb-invitar, .lb-modo, .lb-lado-btn, .lb-socio-tag, .lb-socio-pio, .lb-yo-tag, .lb-tag-mas, .lb-redondo-b { transition: none; }
  .lb-jugar:hover, .lb-vestir:hover, .lb-invitar:hover, .lb-modo:hover:not(:disabled), .lb-lado-btn:hover { transform: none; }
}