/* =====================================================================
   POLEANA PRO · LOBBY
   El arte manda: logo al centro, la ficha de JUGAR debajo, las tarjetas
   a los lados y la fila de placas abajo. El HTML solo pone lo que cambia
   (nombre, nivel, fichas) y lo hace con el mismo marco de oro.
   ===================================================================== */

.lobby{
  display:grid;
  /* minmax(0,1fr) y no 1fr: sin esto, la fila de placas —que mide más que
     la pantalla y se desliza— estira la rejilla entera y el techo se sale
     del teléfono. */
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr) auto;
  min-height:100dvh;
  padding:calc(var(--r3) + var(--seguro-sup)) var(--r3) calc(var(--r3) + var(--seguro-inf));
  gap:var(--r3);
}

/* =====================================================================
   TECHO · jugador a la izquierda, fichas y ajustes a la derecha
   ===================================================================== */
.techo{
  display:flex; align-items:center; justify-content:space-between; gap:var(--r3);
}

.jugador{--muesca:12px; text-align:left; max-width:340px}
.jugador > .cara{display:flex; align-items:center; gap:11px; padding:7px 18px 7px 7px}
.jugador-cara{
  width:56px; height:56px; border-radius:50%; flex:none;
  box-shadow:0 0 0 2px var(--oro-medio), 0 2px 8px #000a;
}
.jugador-datos{display:flex; flex-direction:column; gap:4px; min-width:0}
.jugador-nom{
  font-family:var(--ui); font-size:21px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; line-height:1.1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.jugador-niv{display:flex; align-items:center; gap:9px}
.jugador-niv .etq{font-size:11px; letter-spacing:.1em; white-space:nowrap; color:var(--oro-claro)}
.xp{
  width:74px; height:9px; border-radius:5px; overflow:hidden;
  background:#04160C; box-shadow:inset 0 0 0 1px var(--oro-hondo);
}
.xp i{display:block; height:100%; background:linear-gradient(180deg,#FFE07A,#D79E22)}

.techo-der{display:flex; align-items:center; gap:var(--r2)}

.fichas{--muesca:10px}
.fichas > .cara{display:flex; align-items:center; gap:9px; padding:8px 10px 8px 12px}
.ficha-moneda{
  width:30px; height:30px; flex:none;
  filter:drop-shadow(0 1px 3px #000a);
  /* La ficha gira sobre su eje cada tanto, como si alguien la hiciera
     bailar en la mesa. Es lo único que se mueve solo en el techo. */
  animation:girarFicha 9s ease-in-out infinite;
  transform-style:preserve-3d;
}
.fichas b{font-family:var(--ui); font-size:20px; font-weight:700; color:var(--crema); letter-spacing:.03em}
.mas{
  width:28px; height:28px; display:grid; place-items:center; cursor:pointer;
  border-radius:4px; background:linear-gradient(180deg,#1F7A3A,#0D4520);
  box-shadow:inset 0 0 0 1.5px var(--oro-medio);
  font-family:var(--ui); font-size:20px; font-weight:700; color:var(--oro-claro);
  line-height:1;
}


.redondo{--muesca:8px; width:46px; height:46px}
.redondo > .cara{
  display:grid; place-items:center; height:100%;
  font-size:21px; color:var(--oro-claro);
}


/* =====================================================================
   MESA · el bloque central del lobby
   ===================================================================== */
.mesa{
  display:grid;
  grid-template-columns:minmax(0,224px) minmax(0,1fr) minmax(0,196px);
  grid-template-rows:auto 1fr;
  grid-template-areas:
    "logo centro der"
    "izq  centro der";
  align-items:center; justify-items:center;
  gap:var(--r3) var(--r4);
  padding:var(--r2) 0;
  min-height:0;
}
.logo{grid-area:logo; align-self:end}
.centro{grid-area:centro; align-self:start}
.tarjeta.izq{grid-area:izq; align-self:start}
.tarjeta.der{grid-area:der}

.centro{
  display:flex; flex-direction:column; align-items:center;
  gap:var(--r2);
  width:100%;
  align-self:start;          /* arriba del área, no al centro */
}
.logo{
  width:100%; height:auto; max-height:26vh; object-fit:contain;
  filter:drop-shadow(0 10px 26px #000000b0);
}

/* --- La ficha de JUGAR: el único elemento que respira solo --------- */
.jugar{
  position:relative; display:block;
  height:clamp(104px,19vh,178px);
  transition:transform .16s ease, filter .16s ease;
}
.jugar img{height:100%; width:auto}
.jugar::before{
  content:''; position:absolute; inset:-14%;
  border-radius:50%; z-index:-1;
  background:radial-gradient(circle,#F7E3A155 0%,#F7E3A100 62%);
  animation:latir 3.6s ease-in-out infinite;
}
.jugar img{filter:drop-shadow(0 8px 22px #000000b0)}
.jugar:active{transform:scale(.97); filter:brightness(.94)}
@keyframes latir{0%,100%{opacity:.55; transform:scale(.97)}50%{opacity:1; transform:scale(1.04)}}

.mesa-elegida{--muesca:9px; max-width:100%}
.mesa-elegida > .cara{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:8px 18px;
}
.mesa-elegida b{
  font-family:var(--ui); font-size:15.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--oro-claro);
}
.info{
  width:20px; height:20px; flex:none; display:grid; place-items:center;
  border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--oro-medio);
  font-family:var(--titulo); font-size:12px; color:var(--oro);
}


/* --- Tarjetas de los lados ----------------------------------------- */
.tarjeta{
  width:100%; max-height:38vh; transition:transform .16s ease, filter .16s ease;
  filter:drop-shadow(0 8px 20px #000000a0);
}
.tarjeta img{max-height:38vh; width:auto; margin:0 auto}
.tarjeta:active{transform:translateY(1px)}

/* =====================================================================
   PLACAS DE ABAJO
   ===================================================================== */
.placas{--muesca:12px; min-width:0; max-width:100%}
.placas > .cara{
  min-width:0;
  display:grid; grid-template-columns:repeat(5,1fr);
  align-items:center; gap:var(--r2);
  padding:10px var(--r3);
}
.placa{
  transition:transform .14s ease, filter .14s ease;
  filter:drop-shadow(0 4px 10px #00000080);
}
.placa img{width:100%; max-height:15vh; object-fit:contain; margin:0 auto}
.placa:active{transform:translateY(1px)}

/* =====================================================================
   PANTALLAS CHICAS
   La calle es apaisada: en un teléfono de pie se apila y las tarjetas
   de los lados bajan a una fila que se desliza.
   ===================================================================== */
@media (max-width:1000px){
  .mesa{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto auto;
    grid-template-areas:
      "logo   logo"
      "centro centro"
      "izq    der";
    gap:var(--r3);
  }
  .logo{width:min(300px,52vw); justify-self:center; align-self:center}
  .tarjeta{width:min(230px,44vw)}
  .tarjeta.izq{justify-self:end; align-self:center}
  .tarjeta.der{justify-self:start}
  .tarjeta img{max-height:26vh}
}

/* Teléfono acostado: hay ancho de sobra y nada de alto. Vuelve el reparto
   de tres columnas del escritorio, apretado, para que las placas no queden
   debajo del doblez. */
@media (max-width:1000px) and (orientation:landscape){
  .mesa{
    grid-template-columns:minmax(0,148px) minmax(0,1fr) minmax(0,132px);
    grid-template-rows:auto 1fr;
    grid-template-areas:
      "logo centro der"
      "izq  centro der";
    gap:var(--r2) var(--r3);
  }
  .logo{width:100%; max-height:20vh; justify-self:center}
  .tarjeta{width:100%}
  .tarjeta.izq{justify-self:center; align-self:start}
  .tarjeta.der{justify-self:center}
  .tarjeta img{max-height:22vh}
  .jugar{height:clamp(84px,26vh,152px)}
  .placa img{max-height:15vh}
  .placas > .cara{padding:6px 10px}
  .lobby{gap:var(--r2); padding-top:8px; padding-bottom:8px}
  .jugador > .cara{padding:5px 14px 5px 5px}
  .jugador-cara{width:44px; height:44px}
}

@media (max-width:760px){
  .placas > .cara{
    grid-template-columns:repeat(5,minmax(118px,1fr));
    overflow-x:auto; padding:9px 10px;
    scrollbar-width:none;
  }
  .placas > .cara::-webkit-scrollbar{display:none}
}

@media (max-width:640px){
  .jugador{max-width:none; flex:1 1 auto}
  .jugador-nom{font-size:18px}
  .logo{max-width:92%}
  .antecedentes dd{font-size:23px}
}

@media (max-width:520px){
  /* El teléfono de pie: el jugador ocupa su renglón y las fichas el suyo. */
  .techo{flex-direction:column; align-items:stretch; gap:var(--r2)}
  .techo-der{justify-content:flex-end}
  .jugador > .cara{padding:6px 14px 6px 6px}
  .jugador-cara{width:48px; height:48px}
  .tarjeta img{max-height:21vh}
}

/* De pie y con poca altura: el logo cede espacio para que JUGAR y las
   placas queden a la vista sin desplazar. */
@media (orientation:portrait){
  .logo{max-height:15vh}
  .jugar{height:clamp(96px,14vh,168px)}
}


/* =====================================================================
   ANIMACIONES
   Todo es transform y opacity: el navegador las resuelve en la tarjeta
   de video y no vuelven a calcular la página. Nada anima antes de que
   su imagen esté decodificada, así que la entrada no retrasa la carga.

   La secuencia: el logo entra creciendo en el centro, se planta un
   instante y se va achicando hacia su sitio de la izquierda. Mientras
   viaja, lo demás va apareciendo por debajo, cada cosa a su manera.
   ===================================================================== */

/* Antes de empezar, las piezas están escondidas; pero solo si hay
   JavaScript vivo para volver a mostrarlas. */
html.js body:not(.anima):not(.sinAnimar):not(.listo) .logo,
html.js body:not(.anima):not(.sinAnimar):not(.listo) .jugador,
html.js body:not(.anima):not(.sinAnimar):not(.listo) .techo-der,
html.js body:not(.anima):not(.sinAnimar):not(.listo) .placas,
html.js body:not(.anima):not(.sinAnimar):not(.listo) .tarjeta,
html.js body:not(.anima):not(.sinAnimar):not(.listo) .jugar,
html.js body:not(.anima):not(.sinAnimar):not(.listo) .mesa-elegida{opacity:0}

/* El logo viaja con lo que mide la pantalla, medido en el momento:
   --dx y --dy son la distancia hasta el centro, --esc cuánto crece. */
.logo.entra{
  z-index:20; pointer-events:none; will-change:transform,opacity;
  animation:entradaLogo 2.1s cubic-bezier(.62,.02,.2,1) both;
}
@keyframes entradaLogo{
  0%  {opacity:0; transform:translate(var(--dx),var(--dy)) scale(calc(var(--esc) * .34))}
  22% {opacity:1}
  34% {transform:translate(var(--dx),var(--dy)) scale(calc(var(--esc) * 1.05))}
  46% {transform:translate(var(--dx),var(--dy)) scale(var(--esc))}
  100%{opacity:1; transform:translate(0,0) scale(1)}
}

/* Cada pieza entra distinto, y todas empiezan mientras el logo va de paso. */
.anima .jugador      {animation:bajar .55s cubic-bezier(.2,.9,.3,1) .25s both}
.anima .techo-der    {animation:bajar .55s cubic-bezier(.2,.9,.3,1) .38s both}
.anima .placas       {animation:subir .6s cubic-bezier(.2,.9,.3,1) .45s both}
.anima .placa        {animation:asomar .45s ease-out calc(.6s + var(--turno) * .07s) both}
.anima .tarjeta.izq  {animation:desdeIzq .6s cubic-bezier(.2,.9,.3,1) .75s both}
.anima .tarjeta.der  {animation:desdeDer .6s cubic-bezier(.2,.9,.3,1) .85s both}
.anima .jugar        {animation:brincar .7s cubic-bezier(.18,1.2,.35,1) 1.25s both}
.anima .mesa-elegida {animation:asomar .5s ease-out 1.6s both}

@keyframes bajar   {from{opacity:0; transform:translateY(-26px)} to{opacity:1; transform:none}}
@keyframes subir   {from{opacity:0; transform:translateY(34px)}  to{opacity:1; transform:none}}
@keyframes asomar  {from{opacity:0; transform:translateY(10px) scale(.96)} to{opacity:1; transform:none}}
@keyframes desdeIzq{from{opacity:0; transform:translateX(-38px) rotate(-3deg)} to{opacity:1; transform:none}}
@keyframes desdeDer{from{opacity:0; transform:translateX(38px) rotate(3deg)}  to{opacity:1; transform:none}}
@keyframes brincar {from{opacity:0; transform:scale(.4)} to{opacity:1; transform:scale(1)}}

/* --- Vida propia, ya asentado el lobby ------------------------------ */
@keyframes girarFicha{
  0%,72%{transform:rotateY(0)}
  86%   {transform:rotateY(180deg)}
  100%  {transform:rotateY(360deg)}
}
.tarjeta.izq img{animation:flotar 6.5s ease-in-out 2.4s infinite}
.tarjeta.der img{animation:flotar 7.8s ease-in-out 3.1s infinite}
@keyframes flotar{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* Cuando la entrada termina, 'anima' se retira y en su lugar queda
   'sinAnimar'. Importa: una animación con fill 'both' se queda mandando
   sobre el transform del elemento para siempre, y entonces el alzado del
   ratón no tiene efecto. Al quitar la clase, el transform vuelve a ser
   del CSS normal y los botones responden. */


/* =====================================================================
   LO QUE SE PUEDE PULSAR SE ALZA
   Una sola lista, para que no haya un botón del lobby que responda y
   otro que no. Fuera de (hover:hover) —o sea, en el teléfono— no corre:
   ahí el efecto se quedaría encendido después de tocar.
   ===================================================================== */
.jugador,.mesa-elegida,.redondo,.mas,.tarjeta,.placa,.jugar,.pin,.niv{
  transition:transform .15s ease, filter .15s ease;
}

@media (hover:hover) and (pointer:fine){
  .jugador:hover,
  .mesa-elegida:hover,
  .redondo:hover,
  .mas:hover,
  .niv:hover{transform:translateY(-2px); filter:brightness(1.14)}

  .tarjeta:hover{
    transform:translateY(-4px);
    filter:brightness(1.08) drop-shadow(0 12px 26px #000000a0);
  }
  .placa:hover{
    transform:translateY(-4px);
    filter:brightness(1.1) drop-shadow(0 8px 16px #00000080);
  }
  .pin:hover{transform:translateY(-3px); filter:brightness(1.1)}

  /* La ficha de JUGAR no se levanta: crece. Es la pieza principal y su
     gesto tiene que ser distinto al de todo lo demás. */
  .jugar:hover{transform:scale(1.05)}
}

/* El cursor también avisa: si se puede pulsar, es una manita. */
.jugador,.mesa-elegida,.redondo,.mas,.tarjeta,.placa,.jugar,.pin,.niv{cursor:pointer}

/* =====================================================================
   LA MARCA DE LA CUENTA
   Un sello sobre el retrato. Antes esto solo se sabía abriendo la ficha
   y bajando hasta el final, o sea que no se sabía.
   ===================================================================== */
.jugador-retrato{position:relative; flex:none; display:block}
.jugador-marca{
  position:absolute; right:-2px; bottom:-2px;
  width:20px; height:20px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--ui); font-size:12px; font-weight:700; line-height:1;
  background:linear-gradient(180deg,#2BA35A,#12622F);
  color:#EAFBEF;
  box-shadow:0 0 0 2px #04160C, 0 1px 3px #000a;
}
.jugador-marca.invitado{
  background:linear-gradient(180deg,#6E6A5A,#403D33);
  color:#D8D2C0;
}

/* =====================================================================
   LA SALA EN RED
   ===================================================================== */
.ancho{width:100%}
.sala-o{
  margin:var(--r2) 0 var(--r1); text-align:center;
  font-family:var(--ui); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tenue2);
}
.sala-teclado{display:flex; gap:8px}
#salaTeclado{
  flex:1; min-width:0; padding:11px 14px; border-radius:6px;
  background:#0A0D13; color:var(--crema);
  box-shadow:inset 0 0 0 1.5px #2A3446;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:22px; font-weight:700; letter-spacing:.34em; text-align:center;
}
#salaTeclado::placeholder{color:#3A4658; letter-spacing:.34em}

.sala-etiqueta{
  font-family:var(--ui); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--tenue2); text-align:center;
}
.sala-codigo-caja{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin:6px 0 var(--r2);
}
.sala-codigo{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:clamp(28px,7vw,40px); font-weight:900; letter-spacing:.22em;
  color:var(--oro-claro); text-shadow:0 3px 12px #000;
}
.sala-cuenta{
  text-align:center; font-family:var(--ui); font-size:13px; color:var(--crema2);
  margin-bottom:8px;
}

/* Siempre cuatro huecos: se ve cuánta gente falta sin contar. */
.sillas{display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:var(--r2)}
.silla{
  display:grid; gap:2px; padding:9px 11px; border-radius:6px;
  background:#101722; box-shadow:inset 0 0 0 1.5px #26303F;
}
.silla b{font-family:var(--ui); font-size:14px; color:var(--crema)}
.silla-etq{font-family:var(--ui); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--tenue2)}
.silla.listo{box-shadow:inset 0 0 0 1.5px var(--verde, #24F58A)}
.silla.listo .silla-etq{color:var(--verde, #24F58A)}
.silla.bot{opacity:.66}
.silla.vacia{background:#0C1119; box-shadow:inset 0 0 0 1.5px #1C2330; place-items:center}
.silla-hueco{font-family:var(--ui); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:#3A4658}

.sala-nota{font-family:var(--ui); font-size:12px; color:var(--tenue2);
  text-align:center; margin-bottom:var(--r2); line-height:1.5}
.sala-botones{display:flex; flex-wrap:wrap; gap:8px; justify-content:center}
.sala-aviso{
  margin-top:var(--r2); text-align:center;
  font-family:var(--ui); font-size:12.5px; color:var(--crema2);
}
.sala-aviso.malo{color:#FF9B90}
@media (max-width:420px){ .sillas{grid-template-columns:1fr} }

/* El papel de cada silla: tres ladrones y un policía. */
.silla{position:relative}
.silla-papel{
  position:absolute; right:9px; top:9px;
  font-family:var(--ui); font-size:9.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--tenue2); opacity:.8;
}
.silla-papel.poli{color:#7FB6FF}

/* El camino de vuelta al código, siempre visible dentro de una mesa. */
.sala-otra{
  display:block; width:100%; margin-top:var(--r2);
  padding:8px; border-radius:6px;
  background:transparent; color:var(--tenue2);
  font-family:var(--ui); font-size:12px; letter-spacing:.08em;
  text-decoration:underline; text-underline-offset:3px;
}
.sala-otra:hover{color:var(--oro-claro)}

/* =====================================================================
   ELEGIR COLOR EN LA SALA
   Marco dorado y fondo oscuro, como los carteles del juego: la sala es
   parte de la partida, no un formulario.
   ===================================================================== */
.silla{
  position:relative;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:10px; padding:9px 12px; border-radius:7px;
  background:linear-gradient(180deg,#12211Bee,#0A130Fee);
  box-shadow:inset 0 0 0 1.5px #3A5344, 0 4px 14px #0008;
  transition:transform .12s, box-shadow .15s;
}
/* El color de cada silla, que es con el que se juega. */
.silla.color0{--tono:#E8C33A} .silla.color1{--tono:#D8483F}
.silla.color2{--tono:#4FA84C} .silla.color3{--tono:#3E7FD1}
.silla::before{
  content:''; position:absolute; left:0; top:8%; bottom:8%; width:4px;
  border-radius:0 3px 3px 0; background:var(--tono,#5A6B7A);
}
.silla b{font-family:var(--titulo); font-size:15px; color:var(--crema)}
.silla-etq{grid-column:2; font-size:11px; color:var(--tenue2); letter-spacing:.06em}
.silla-papel{
  font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  padding:3px 9px; border-radius:5px;
  background:#0A0D13; color:var(--oro-claro);
  box-shadow:inset 0 0 0 1.2px var(--oro-hondo);
}
.silla-papel.poli{color:#9FC6FF; box-shadow:inset 0 0 0 1.2px #2E4C7A}

/* El retrato de quien está registrado; si no, el número de la silla. */
.silla-cara{
  grid-row:1 / span 2; width:42px; height:42px; border-radius:50%;
  object-fit:cover; background:#0A0D13;
  box-shadow:0 0 0 2px var(--tono,#26303F);
}
.silla-cara.vacia{
  display:grid; place-items:center;
  font-family:var(--titulo); font-size:17px; color:#4A566B;
}

/* La silla que se puede tomar invita a tocarla. */
.silla.elegible{cursor:pointer}
.silla.elegible:hover{
  transform:translateY(-2px);
  box-shadow:inset 0 0 0 1.5px var(--tono,#C6A24A), 0 8px 22px #000a;
}
.silla.elegible .silla-etq{color:var(--oro-claro)}

/* La mía, con el marco dorado de los carteles. */
.silla.mia{
  box-shadow:inset 0 0 0 2px var(--oro), 0 6px 20px #000a;
  background:linear-gradient(180deg,#1B2A1Fee,#0C1610ee);
}
.silla.listo .silla-etq{color:#7BE3A8}