/* ---------- Jugar: los modos centrados; al elegir uno, el menú de la partida entra deslizándolos ---------- */
.screen.sin-relleno{padding:0;overflow:hidden;display:block}
.carril{display:flex;width:200%;height:100%;transition:transform .68s cubic-bezier(.3,.05,.15,1)}
.carril.abierto{transform:translateX(-50%)}
.panel{width:50%;height:100%;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;
  padding-block:calc(14px + env(safe-area-inset-top,0px)) calc(18px + env(safe-area-inset-bottom,0px));
  padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px))}
.carril .panel:not([inert]) .contenido>*{animation:sube-suave .55s var(--suave) backwards}
.carril .panel:not([inert]) .contenido>*:nth-child(2){animation-delay:.05s}
.carril .panel:not([inert]) .contenido>*:nth-child(3){animation-delay:.1s}
.carril .panel:not([inert]) .contenido>*:nth-child(4){animation-delay:.15s}
@keyframes sube-suave{from{opacity:0;transform:translateY(10px)}}
.centrado-v{margin-block:auto}
.centrado{text-align:center}
#tipoJuego{align-self:center;width:min(100%,460px)}
#tipoJuego .pestana{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:16px;padding:11px 16px}
.modos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;width:100%}
.modo.b3d{flex-direction:column;gap:4px;min-height:160px;padding:14px 10px 16px;font:inherit}
.modo b{font:400 clamp(22px,5vw,28px) var(--disp);color:var(--marfil)}
.modo span{font:500 14px/1.25 var(--cond);letter-spacing:.02em;color:var(--tenue)}
.modo svg{width:min(100%,120px);height:64px;display:block;filter:drop-shadow(0 4px 6px rgba(0,0,0,.4))}
.unirse{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
.unirse .fila{width:min(100%,420px)}
.unirse .entrada{flex:1;text-transform:uppercase;letter-spacing:.16em;font:700 18px var(--cond)}
@media (min-width:900px){.modos{grid-template-columns:repeat(4,minmax(0,1fr))}.contenido.estrecho:has(.modos){max-width:1000px}}

.cabmesa{display:flex;flex-direction:column;gap:2px;min-width:0}
.cabmesa b{font:400 clamp(28px,6vw,42px)/1 var(--disp);color:var(--laton);text-shadow:.04em .04em 0 var(--teja-hondo),.08em .08em 0 rgba(0,0,0,.5)}
.cabmesa span{font:500 15px var(--cond);color:var(--tenue)}
.idp{display:inline-block;align-self:flex-start;margin-top:4px;padding:2px 10px;border-radius:8px;font:700 15px var(--cond);letter-spacing:.14em;color:var(--tinta);background:var(--marfil);font-variant-numeric:tabular-nums}
#tipoMulti{width:min(100%,460px)}
.opc-rejilla{display:grid;gap:16px;grid-template-columns:minmax(0,1fr);align-items:start;padding-bottom:96px}
@media (min-width:760px){.opc-rejilla{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1120px){.opc-rejilla{grid-template-columns:repeat(3,minmax(0,1fr))}}
.grupo{display:flex;flex-direction:column;align-items:stretch;gap:16px}
.opcion{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.opcion-t{font:700 17px var(--cond);letter-spacing:.02em}
.opcion-d{max-width:46ch;font-size:13.5px;line-height:1.35;color:var(--tenue)}
.opcion .seg{justify-content:flex-start}
details.mas>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between}
details.mas>summary::after{content:"";width:10px;height:10px;border-right:2px solid var(--laton);border-bottom:2px solid var(--laton);transform:rotate(45deg) translateY(-3px);transition:transform .3s}
details.mas[open]>summary::after{transform:rotate(-135deg)}
details.mas>summary::-webkit-details-marker{display:none}
.rango-cola .fila{gap:16px}
.rango-nombre{font:400 26px/1.1 var(--disp);color:var(--laton-luz)}
.lista-reglas{margin:0;padding-left:18px;display:grid;gap:6px;color:var(--marfil-2)}
.crear{position:sticky;bottom:calc(-18px - env(safe-area-inset-bottom,0px));margin-top:auto;padding:18px 0 calc(10px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;background:linear-gradient(180deg,transparent,rgba(12,20,34,.92) 40%)}
.crear .b3d{min-width:min(100%,320px)}
@media (min-width:900px){#panelMesa .contenido{gap:20px}}

/* ---------- Reglas y opciones ---------- */
.reglas{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.reglas .tarjeta p+p{margin-top:8px}
@media (min-width:900px){.reglas{grid-template-columns:repeat(2,minmax(0,1fr))}.reglas .tarjeta.ancha{grid-column:1/-1}}
.tb{overflow-x:auto;width:100%}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
th{font:700 13px var(--cond);letter-spacing:.09em;text-transform:uppercase;color:var(--laton);text-align:center;padding:8px;border-bottom:2px solid rgba(220,170,76,.28)}
td{padding:8px;border-bottom:1px solid rgba(246,238,220,.1);vertical-align:middle;text-align:center}
.ej{display:inline-flex;gap:3px}
.ej img{width:36px;height:auto;display:block;border-radius:3px;box-shadow:0 2px 4px rgba(0,0,0,.4)}
.ajuste{display:flex;flex-direction:column;gap:6px}
.ajuste label{font:600 15px var(--cond);letter-spacing:.03em;color:var(--marfil-2)}
#creditos{max-width:80ch}

/* ---------- Sala privada ---------- */
.sala-codigo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.sala-codigo .codigo{font:400 clamp(34px,8vw,56px)/1 var(--disp);letter-spacing:.12em;color:var(--laton-luz);text-shadow:.04em .04em 0 var(--teja-hondo)}
.sala-enlace{display:flex;gap:10px;align-items:center;min-width:0;flex-wrap:wrap}
.sala-enlace code{flex:1;min-width:0;padding:10px 12px;border-radius:10px;background:rgba(0,0,0,.35);font:600 14px var(--cond);letter-spacing:.04em;color:var(--marfil-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sala-asientos{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr))}
.asiento-sala{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);min-width:0;animation:sube-suave .45s var(--suave) backwards}
.asiento-sala.vacio-sala{border:2px dashed rgba(220,170,76,.28);background:none;box-shadow:none;color:var(--tenue)}
.asiento-sala .columna{gap:2px}
.asiento-sala b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.asiento-sala .equipo{font:700 12px var(--cond);letter-spacing:.1em;text-transform:uppercase;color:var(--laton)}
.sala-pie{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;padding-top:8px}
.amigo-invitar{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.amigo-invitar b{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Buscando partida ---------- */
.buscando{display:flex;flex-direction:column;align-items:center;gap:16px}
.radar{position:relative;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(220,170,76,.14),rgba(220,170,76,.02) 65%,transparent 66%);box-shadow:inset 0 0 0 2px rgba(220,170,76,.25)}
.radar::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(220,170,76,.45),transparent 30%);animation:girar 2.2s linear infinite}
.radar::after{content:"";position:absolute;inset:26%;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(220,170,76,.2)}
.radar .avatar{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1}
.buscando .reloj-cola{font:400 34px/1 var(--disp);color:var(--laton-luz);font-variant-numeric:tabular-nums}