/* ============ RATICUA - HUD sobre la escena 3D ============ */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

:root {
  --bg: #0B0D0C;
  --card: #101312;
  --card-borde: #1E2421;
  --texto: #E8E6E1;
  --texto-suave: #8A8F88;
  --tagline: #4A5F3A;
  --verde: #5D8F27;
  --azul: #2E67C7;
  --naranja: #C64A28;
  --rojo: #C64A28;
  --oro: #e8b81c;
  --hueso: #fffdf7;
  --crema: #f4f0e6;
  --negro: #1c1c1c;
  --verde-ok: #5D8F27;
  --borde: #1E2421;
  --sombra: rgba(0, 0, 0, .35);
}

html, body { height: 100%; overflow: hidden; }
body {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  color: var(--texto);
  background: var(--bg);
}

/* El lienzo 3D ocupa toda la pantalla, detrás del HUD */
#lienzo { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }

.pantalla { display: none; }
.pantalla.activa { display: block; }

/* ---------- Lobby inicio (Raticua dark) ---------- */
#pantalla-inicio {
  position: fixed; inset: 0; z-index: 20;
  display: none;
  align-items: flex-start; justify-content: center;
  padding: 18px 18px 28px;
  background:
    radial-gradient(ellipse 55% 40% at 50% 6%, #10130f 0%, transparent 70%),
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255,255,255,.02), transparent 55%),
    #080a09;
  overflow-x: hidden;
  overflow-y: auto;
}
#pantalla-inicio.activa { display: flex; }

/* Gate: cuenta o invitado, antes del menú */
#pantalla-entrar {
  position: fixed; inset: 0; z-index: 21;
  display: none;
  align-items: center; justify-content: center;
  padding: 20px 18px 28px;
  background:
    radial-gradient(ellipse 55% 40% at 50% 8%, #121610 0%, transparent 72%),
    #080a09;
  overflow-y: auto;
}
#pantalla-entrar.activa { display: flex; }
body.auth-pendiente #pantalla-entrar,
body.auth-pendiente #pantalla-inicio { display: none !important; }

.entrar-caja {
  width: 100%;
  max-width: 420px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible;
  position: relative;
}
.entrar-logo {
  display: block;
  width: min(540px, calc(100vw - 36px));
  max-width: none;
  height: auto;
  margin: 0;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  object-fit: contain;
}
.entrar-eleccion {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  margin-top: 20px;
}
.entrar-eleccion.oculto { display: none !important; }
.entrar-pregunta {
  margin: 0 0 16px;
  color: var(--texto);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .01em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.entrar-pregunta::before,
.entrar-pregunta::after {
  content: "";
  flex: 1;
  max-width: 64px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #2a332e, transparent);
}
.entrar-op {
  display: block;
  width: 100%;
  text-align: left;
  padding: 18px 16px;
  border-radius: 16px;
  border: 1px solid var(--card-borde);
  background: #101312;
  color: var(--texto);
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.entrar-op:hover {
  background: #141816;
  border-color: color-mix(in srgb, var(--verde) 45%, var(--card-borde));
  filter: none;
}
.entrar-op:active { transform: scale(.99); }
.entrar-op-cuenta {
  border-color: color-mix(in srgb, var(--verde) 55%, var(--card-borde));
}
.entrar-op-cuenta:hover {
  border-color: color-mix(in srgb, var(--verde) 80%, var(--card-borde));
}
.entrar-op-guest {
  border-color: var(--card-borde);
}
.entrar-op-guest:hover {
  border-color: color-mix(in srgb, var(--verde) 35%, var(--card-borde));
}
.entrar-op-fila {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
}
.entrar-op-ico {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.entrar-op-cuenta .entrar-op-ico { color: var(--verde); }
.entrar-op-guest .entrar-op-ico { color: #d5d8d2; }
.entrar-op-ico svg {
  display: block;
  width: 24px;
  height: 24px;
}
.entrar-op-texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.entrar-op-titulo {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.2;
}
.entrar-op-sub {
  font-size: .84rem;
  font-weight: 560;
  color: var(--texto-suave);
  line-height: 1.35;
}
.entrar-op-flecha {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #c8cdc4;
}
.entrar-op-cuenta .entrar-op-flecha { color: var(--verde); }
.entrar-op-flecha svg {
  display: block;
  width: 20px;
  height: 20px;
}
.entrar-cuenta {
  margin-top: 18px;
  text-align: center;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.entrar-cuenta.oculto { display: none !important; }
.entrar-atras {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  align-self: center;
  margin: 22px 0 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--texto-suave);
  font: inherit;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
}
.entrar-atras:hover { color: var(--texto); filter: none; }
.entrar-cuenta-lead {
  margin: 0 0 18px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--texto);
  line-height: 1.35;
  text-align: center;
}
.entrar-cuenta-lead strong {
  color: var(--verde);
  font-weight: 800;
}
.entrar-cuenta-nota {
  margin: 16px 0 0;
  font-size: .82rem;
  font-weight: 560;
  color: var(--texto-suave);
  line-height: 1.35;
  text-align: center;
}

.link-como {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--texto-suave);
  text-decoration: none;
  font-size: .82rem;
  font-weight: 600;
  padding: 7px 12px 7px 10px;
  border: 1px solid var(--card-borde);
  border-radius: 999px;
  background: rgba(16, 19, 18, .65);
  transition: color .15s, background .15s, border-color .15s;
}
.link-como:hover {
  color: var(--texto);
  background: rgba(255,255,255,.04);
  border-color: #2a332e;
}
.link-como-ico {
  width: 18px; height: 18px;
  border-radius: 4px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}
.link-como:hover .link-como-ico { opacity: 1; }

#pantalla-sala {
  position: fixed; inset: 0; z-index: 20;
  display: none;
  align-items: center; justify-content: center;
  padding: 48px 14px 20px;
  background: var(--bg);
  overflow-y: auto;
}
#pantalla-sala.activa { display: flex; }

.caja {
  width: 100%; max-width: 440px;
  background: var(--card);
  border-radius: 18px;
  padding: 26px 24px;
  box-shadow: 0 12px 40px var(--sombra);
  border: 1px solid var(--card-borde);
  color: var(--texto);
}
.caja-sala {
  position: relative;
  max-width: 420px;
  padding: 52px 20px 18px;
  text-align: center;
  overflow: visible;
}
.sala-mascota {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -52%);
  display: block;
  width: 92px;
  height: auto;
  margin: 0;
  object-fit: contain;
  z-index: 2;
  pointer-events: none;
}
.sala-codigo-bloque { margin-bottom: 16px; }
.sala-visibilidad-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 8px 0 0;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--card-borde) 90%, transparent);
  background: color-mix(in srgb, var(--card) 88%, #000);
  color: var(--texto-suave, #b9ad90);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.sala-visibilidad-badge.is-publica {
  color: var(--verde);
  border-color: color-mix(in srgb, var(--verde) 35%, var(--card-borde));
  background: color-mix(in srgb, var(--verde) 12%, var(--card));
}
.sala-visibilidad {
  margin: 0 0 14px;
  padding: 0;
  text-align: left;
}
.sala-visibilidad .cp-titulo {
  margin-bottom: 8px;
}
.sala-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  color: var(--verde);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.sala-label span {
  display: block;
  width: 18px;
  height: 1px;
  background: color-mix(in srgb, var(--verde) 55%, transparent);
}
.sala-codigo-fila {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 42px;
}
.sala-codigo-fila .codigo {
  position: relative;
  appearance: none;
  border: none;
  border-radius: 0;
  margin: 0;
  padding: 4px 8px 4px calc(8px + .12em);
  font: inherit;
  font-size: clamp(2.8rem, 10vw, 3.4rem);
  letter-spacing: .12em;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  box-shadow: none;
  color: var(--texto);
  background: transparent;
  -webkit-text-fill-color: currentColor;
}
.sala-codigo-fila .codigo:hover,
.sala-codigo-fila .codigo:focus-visible {
  color: transparent;
  background-image: linear-gradient(
    110deg,
    var(--texto) 0%,
    var(--texto) 38%,
    #7aab3a 46%,
    #c8f06a 50%,
    #7aab3a 54%,
    var(--texto) 62%,
    var(--texto) 100%
  );
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: codigo-shine 4.5s linear infinite;
  filter: none;
  outline: none;
}
.sala-codigo-fila .codigo:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--verde) 45%, transparent);
  border-radius: 10px;
}
.sala-codigo-fila .codigo:active {
  transform: none;
  filter: none;
}
.sala-codigo-fila .codigo.copiado {
  color: var(--verde);
  background: none;
  animation: none;
  -webkit-text-fill-color: var(--verde);
}
.sala-codigo-fila .codigo.copiado:hover,
.sala-codigo-fila .codigo.copiado:focus-visible {
  color: transparent;
  background-image: linear-gradient(
    110deg,
    var(--verde) 0%,
    var(--verde) 38%,
    #9fd45a 46%,
    #e4ff9a 50%,
    #9fd45a 54%,
    var(--verde) 62%,
    var(--verde) 100%
  );
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: codigo-shine 4.5s linear infinite;
}
@keyframes codigo-shine {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sala-codigo-fila .codigo:hover,
  .sala-codigo-fila .codigo:focus-visible,
  .sala-codigo-fila .codigo.copiado:hover,
  .sala-codigo-fila .codigo.copiado:focus-visible {
    animation: none;
    color: var(--texto);
    background: none;
    -webkit-text-fill-color: currentColor;
  }
  .sala-codigo-fila .codigo.copiado,
  .sala-codigo-fila .codigo.copiado:hover,
  .sala-codigo-fila .codigo.copiado:focus-visible {
    color: var(--verde);
    -webkit-text-fill-color: var(--verde);
  }
}
.sala-codigo-fila .codigo::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  padding: 6px 10px;
  border-radius: 8px;
  background: #1a211e;
  border: 1px solid var(--card-borde);
  color: var(--texto);
  -webkit-text-fill-color: var(--texto);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 5;
}
.sala-codigo-fila .codigo:hover::after,
.sala-codigo-fila .codigo:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.toast-copiar {
  /* Pegado al viewport visible (no al fondo del scroll del lobby). */
  position: fixed;
  left: 50%;
  right: auto;
  bottom: max(16px, calc(env(safe-area-inset-bottom, 0px) + 12px));
  top: auto;
  transform: translateX(-50%) translateY(12px);
  z-index: 200; /* por encima de pantallas (20) y popups (100) */
  max-width: min(92vw, 360px);
  width: max-content;
  padding: 12px 16px;
  border-radius: 12px;
  background: #121816;
  border: 1px solid color-mix(in srgb, var(--verde) 45%, var(--card-borde));
  color: var(--texto);
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 10px 28px rgba(0,0,0,.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.toast-copiar.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast-copiar strong {
  color: var(--verde);
  font-weight: 800;
}
.caja-sala .sub {
  margin: 8px 0 0;
  font-size: .82rem;
  color: var(--texto-suave);
}
.marquesina { display: flex; align-items: center; justify-content: center; gap: 12px; }
.marquesina h1 { font-size: 1.65rem; text-align: center; letter-spacing: -.5px; }
.luz {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--oro); box-shadow: 0 0 12px var(--oro);
  animation: parpadeo 1.4s infinite alternate;
}
.marquesina .luz:last-child { animation-delay: .7s; }
@keyframes parpadeo { from { opacity: .28; } to { opacity: 1; } }

h2 { text-align: center; color: var(--texto); font-weight: 800; }
.sub { text-align: center; color: var(--texto-suave); margin: 8px 0 16px; font-size: .92rem; }
.nota { font-size: .78rem; color: var(--texto-suave); text-align: center; margin: 10px 0; }

label { display: block; font-weight: 600; margin: 14px 0 6px; font-size: .88rem; }
input {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--card-borde); border-radius: 12px;
  font-size: 1rem; background: #0E1110; font-family: inherit;
  color: var(--texto);
}
input:focus { outline: none; border-color: #3a4540; box-shadow: 0 0 0 3px rgba(93,143,39,.15); }
.fila { display: flex; gap: 8px; }
.fila input { flex: 1; }

button {
  cursor: pointer; border: none; border-radius: 10px;
  font-weight: 800; font-size: 1rem; padding: 12px 16px;
  background: var(--naranja); color: #fff; font-family: inherit;
  transition: transform .06s, filter .15s, box-shadow .15s;
}
button:hover { filter: brightness(1.06); }
button:active { transform: translateY(1px); }
button:disabled { background: #3a3f3c; cursor: not-allowed; filter: none; }
.btn-grande { width: 100%; margin-top: 16px; padding: 15px; font-size: 1.05rem; }
.btn-practica {
  background: var(--verde);
  padding: 14px; line-height: 1.35;
}
.btn-practica small {
  display: block; font-weight: 500; font-size: .76rem; opacity: .88; margin-top: 3px;
}

.btn-volver {
  width: 100%; margin-top: 10px; padding: 11px;
  background: none; color: var(--texto-suave);
  border: 1px solid var(--card-borde); border-radius: 10px;
  font-size: .9rem; font-weight: 700;
}
.btn-volver:hover { background: rgba(255,255,255,.04); color: var(--texto); filter: none; }

/* ============================================================================
   MENÚ DE INICIO — Raticua
   ========================================================================== */
.menu {
  position: relative; z-index: 1;
  width: 100%; max-width: 1000px;
  padding: 4px 4px 12px;
  margin: auto;
  overflow: visible;
  animation: menu-entra .45s ease-out both;
}
@keyframes menu-entra {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.menu-cabeza { text-align: center; margin-bottom: 16px; }
.logo-marca {
  display: block;
  width: clamp(340px, 72vw, 560px);
  height: auto;
  margin: 0 auto 2px;
  object-fit: contain;
}
.menu-tagline {
  margin-top: 6px;
  color: var(--tagline);
  font-size: clamp(.88rem, 2vw, .98rem);
  font-weight: 560;
  letter-spacing: .01em;
}

.menu-identidad {
  max-width: 460px;
  margin: 0 auto 36px;
}

.menu-nombre { margin-bottom: 10px; }
.menu-nombre label,
.caja-cuenta label {
  color: var(--texto-suave);
  text-align: left;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .68rem;
  font-weight: 700;
  margin: 0 0 6px;
}

.campo-icono {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #0E1110;
  border: 1px solid var(--card-borde);
  border-radius: 12px;
  padding: 4px 8px 4px 14px;
  transition: border-color .15s, box-shadow .15s;
}
.campo-icono:focus-within {
  border-color: #3a4540;
  box-shadow: 0 0 0 3px rgba(93,143,39,.12);
}
.campo-icono.campo-error,
.campo-icono.campo-error:focus-within {
  border-color: #e07a5f;
  box-shadow: 0 0 0 3px rgba(224, 122, 95, .22);
  animation: campo-error-shake .4s ease;
}
.modo-fila input.campo-error,
#input-otp.campo-error,
#input-invitar-nombre.campo-error,
#input-nombre-nuevo.campo-error,
#input-nombre-cuenta.campo-error {
  border-color: #e07a5f !important;
  box-shadow: 0 0 0 3px rgba(224, 122, 95, .22) !important;
  animation: campo-error-shake .4s ease;
}
@keyframes campo-error-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  50% { transform: translateX(3px); }
  75% { transform: translateX(-2px); }
}
.campo-ico {
  display: flex; color: var(--texto-suave); flex-shrink: 0;
}
.campo-icono input {
  border: none; background: transparent; box-shadow: none;
  padding: 10px 6px; font-weight: 650; font-size: .98rem;
  color: var(--texto);
}
.campo-icono input:focus { box-shadow: none; border: none; }
.campo-icono input::placeholder { color: #555b57; font-weight: 560; }

.campo-cuenta { padding-right: 6px; }
.campo-cuenta .cuenta-email {
  flex: 1;
  min-width: 0;
  font-size: .9rem;
  font-weight: 600;
  color: #C9C7C1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.caja-cuenta {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  text-align: left;
}
.caja-cuenta.oculto,
.cuenta-paso.oculto { display: none !important; }
#cuenta-invitado.cuenta-paso {
  text-align: center;
}

.cuenta-hint {
  display: block;
  margin-top: 8px;
  font-size: .75rem;
  color: var(--texto-suave);
  font-weight: 560;
  text-align: center;
}
.cuenta-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 10px;
}
.btn-cuenta,
.btn-cuenta-primario,
.btn-cuenta-sec {
  font-size: .86rem;
  padding: 9px 14px;
  border-radius: 10px;
  font-weight: 700;
}
.btn-cuenta {
  width: 100%;
  background: transparent;
  color: var(--texto);
  border: 1px solid var(--card-borde);
}
.btn-cuenta:hover { background: rgba(255,255,255,.04); filter: none; }
.btn-cuenta-correo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border-color: color-mix(in srgb, var(--verde) 65%, var(--card-borde));
  color: var(--texto);
  font-size: .92rem;
  font-weight: 700;
}
.btn-cuenta-correo:hover {
  border-color: var(--verde);
  background: rgba(93, 143, 39, .08);
}
.btn-cuenta-correo-ico {
  flex-shrink: 0;
  color: var(--verde);
  display: block;
}
.btn-cuenta-google {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: .92rem;
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 700;
  font-family: inherit;
  background: #fff;
  color: #1f1f1f;
  border: 1px solid #dadce0;
  cursor: pointer;
}
.btn-cuenta-google:hover {
  background: #f7f8f8;
  filter: none;
}
.btn-cuenta-google:disabled {
  opacity: .65;
  cursor: wait;
}
.btn-google-ico {
  flex-shrink: 0;
  display: block;
}
.cuenta-sep {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
  color: var(--texto-suave);
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: lowercase;
}
.cuenta-sep::before,
.cuenta-sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--card-borde);
}
.btn-cuenta-primario {
  background: var(--verde);
  border: none;
  color: #fff;
}
.btn-cuenta-sec {
  background: transparent;
  color: var(--texto-suave);
  border: 1px solid var(--card-borde);
  padding: 8px 12px;
  font-size: .8rem;
}
.btn-cuenta-sec:hover { background: rgba(255,255,255,.04); filter: none; color: var(--texto); }
.campo-cuenta .btn-cuenta-sec {
  flex-shrink: 0;
  border: 1px solid var(--card-borde);
  background: transparent;
  color: var(--texto);
}
.caja-cuenta input#input-otp {
  text-align: center;
  font-weight: 800;
  letter-spacing: .35em;
  font-size: 1.2rem;
  margin-top: 4px;
  background: #0E1110;
  color: var(--texto);
  border: 1px solid var(--card-borde);
}
.error-cuenta { min-height: 0; margin-top: 8px; color: #e07a5f; }

.modos {
  display: grid; gap: 16px;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  padding-top: 0;
}

.modo {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 6px;
  padding: 16px 16px 16px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--modo-accent) 55%, var(--card-borde));
  background: var(--card);
  color: var(--texto);
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
  cursor: pointer;
  font-family: inherit;
  overflow: visible;
  isolation: isolate;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.modo-solo  { --modo-accent: var(--verde); }
.modo-mesa  { --modo-accent: var(--azul); }
.modo-unir  { --modo-accent: var(--naranja); cursor: default; }

/* Shine del borde en hover */
.modo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    110deg,
    transparent 0%,
    transparent 38%,
    color-mix(in srgb, var(--modo-accent) 55%, #fff) 46%,
    #fff 50%,
    color-mix(in srgb, var(--modo-accent) 55%, #fff) 54%,
    transparent 62%,
    transparent 100%
  );
  background-size: 200% 100%;
  background-position: 200% 0;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  z-index: 3;
  transition: opacity .2s ease;
}
.modo:hover::after,
.modo:focus-visible::after {
  opacity: 1;
  animation: modo-border-shine 3.2s linear infinite;
}
@keyframes modo-border-shine {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .modo:hover::after,
  .modo:focus-visible::after {
    animation: none;
    opacity: 0;
  }
}

.modo:hover, .modo:focus-visible {
  transform: translateY(-3px);
  border-color: var(--modo-accent);
  box-shadow: 0 10px 22px rgba(0,0,0,.28);
  outline: none;
  filter: none;
}
.modo:hover .modo-arte img,
.modo:focus-visible .modo-arte img {
  transform: scale(1.02);
}
button.modo:active { transform: translateY(1px) scale(.985); }

/* Toque al clicar un CTA / card */
@keyframes modo-tap {
  0%   { transform: translateY(-3px) scale(1); }
  35%  { transform: translateY(2px) scale(.97); }
  70%  { transform: translateY(-1px) scale(1.01); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes cta-tap {
  0%   { transform: scale(1); filter: brightness(1); }
  35%  { transform: scale(.94); filter: brightness(1.18); }
  100% { transform: scale(1); filter: brightness(1); }
}
.modo.modo-clic,
.modo.modo-clic:hover,
.modo.modo-clic:active,
button.modo.modo-clic:active {
  transition: none;
  animation: modo-tap .34s cubic-bezier(.22,1,.36,1);
}
.modo-pie.cta-clic,
.modo.modo-clic .modo-pie.cta-clic,
.modo-fila button.cta-clic {
  transition: none;
  animation: cta-tap .3s cubic-bezier(.22,1,.36,1);
}

.modo-arte {
  width: 100%;
  max-width: 176px;
  margin: 0 auto;
  display: grid; place-items: center;
  background: transparent;
  overflow: visible;
}
.modo-arte img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 168px;
  object-fit: contain;
  border-radius: 10px;
  transition: transform .18s ease;
}
.modo-titulo {
  font-size: 1.08rem; font-weight: 800; letter-spacing: -.2px;
  color: var(--texto);
  margin-top: 2px;
}
.modo-sub {
  font-size: .8rem; font-weight: 500; line-height: 1.4;
  color: var(--texto-suave);
  margin-bottom: 2px;
  flex: 1;
}
.link-mesas-publicas {
  display: inline;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: #4a9bb8;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: color .15s ease, text-decoration-color .15s ease;
}
.link-mesas-publicas:hover,
.link-mesas-publicas:focus-visible {
  color: #6ebfd4;
  text-decoration: underline;
  text-underline-offset: 2px;
  outline: none;
}
.modo-pie {
  margin-top: auto;
  height: 42px;
  box-sizing: border-box;
  padding: 0 16px;
  border-radius: 11px;
  background: var(--modo-accent); color: #fff;
  border: none;
  font-weight: 800; letter-spacing: .01em; font-size: .9rem;
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.modo:hover .modo-pie { filter: brightness(1.06); }

.modo-fila {
  display: flex; gap: 8px; width: 100%;
  margin-top: auto;
  align-items: stretch;
  height: 42px;
}
.modo-fila input {
  flex: 1; min-width: 0; text-align: center;
  font-weight: 700; font-size: .9rem; letter-spacing: .03em;
  padding: 0 8px;
  background: #171b19; color: var(--texto);
  border: 1px solid #2a332e; border-radius: 11px;
  box-shadow: none;
  height: 42px;
}
.modo-fila input::placeholder {
  color: #7a847c;
  letter-spacing: 0;
  font-weight: 560;
}
.modo-fila input:focus {
  border-color: var(--naranja);
  box-shadow: 0 0 0 3px rgba(198, 74, 40, .15);
  outline: none;
  background: #1b211e;
}
.modo-fila button {
  background: var(--naranja); color: #fff;
  font-weight: 800; letter-spacing: .02em; padding: 0 16px;
  border: none; border-radius: 11px;
  box-shadow: none;
  height: 42px;
}

/* Secundario: acción vacía del modal de mesas públicas */
button.btn-mesas-publicas {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border: 1.5px solid rgba(198, 74, 40, 0.7);
  border-radius: 10px;
  background: rgba(198, 74, 40, 0.12);
  box-shadow: 0 0 0 1px rgba(198, 74, 40, 0.18);
  color: #e08a6e;
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
button.btn-mesas-publicas:hover,
button.btn-mesas-publicas:focus-visible {
  color: #f0a890;
  border-color: rgba(198, 74, 40, 0.95);
  background: rgba(198, 74, 40, 0.2);
  box-shadow: 0 0 0 2px rgba(198, 74, 40, 0.28);
  outline: none;
  filter: none;
}
button.btn-mesas-publicas:active {
  color: #e08a6e;
  background: rgba(198, 74, 40, 0.28);
}

.popup-mesas-caja { max-width: 380px; }
.lista-mesas-publicas {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(52vh, 320px);
  overflow-y: auto;
}
.mesa-publica-fila {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #0E1110;
  border: 1px solid var(--card-borde);
  border-radius: 12px;
}
.mesa-publica-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  text-align: left;
}
.mesa-publica-codigo {
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}
.mesa-publica-cupo {
  font-size: .78rem;
  font-weight: 600;
  color: var(--texto-suave);
}
.mesa-publica-host {
  font-size: .72rem;
  font-weight: 560;
  color: #6a9080;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mesa-publica-acciones {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.mesa-publica-tip {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 9px;
  border: 1px solid var(--card-borde);
  background: #171b19;
  color: #7aa8b8;
  font: inherit;
  font-size: .88rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mesa-publica-tip:hover,
.mesa-publica-tip:focus-visible {
  color: #9fd0e0;
  border-color: color-mix(in srgb, #4a9bb8 45%, var(--card-borde));
  outline: none;
}
.mesa-publica-entrar {
  flex-shrink: 0;
  height: 32px;
  padding: 0 12px;
  border: none;
  border-radius: 9px;
  background: var(--naranja);
  color: #fff;
  font: inherit;
  font-size: .78rem;
  font-weight: 800;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 2;
}
.mesa-publica-entrar:hover { filter: brightness(1.06); }
.mesa-publica-entrar:disabled {
  opacity: .65;
  cursor: wait;
}
.mesas-publicas-vacio {
  text-align: center;
  padding: 8px 4px 2px;
}
.mesas-publicas-vacio p {
  margin: 0;
  font-size: .88rem;
  font-weight: 600;
  color: var(--texto-suave);
  line-height: 1.4;
}
.error-mesas-publicas {
  min-height: 18px;
  margin: 10px 0 0;
  text-align: center;
  font-size: .82rem;
  font-weight: 700;
  color: #e07a5f;
}

/* Detalle de mesa pública (ℹ) */
#popup-mesa-detalle { z-index: 110; }
.mesa-detalle-ajustes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.mesa-detalle-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 8px;
  background: #0E1110;
  border: 1px solid var(--card-borde);
  border-radius: 12px;
  text-align: center;
}
.mesa-detalle-chip b {
  font-size: .9rem;
  font-weight: 800;
  color: var(--texto);
}
.mesa-detalle-chip span {
  font-size: .68rem;
  font-weight: 600;
  color: var(--texto-suave);
}
.mesa-detalle-subtitulo {
  margin: 0 0 8px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--texto-suave);
  text-align: left;
  letter-spacing: .02em;
}
.mesa-detalle-jugadores {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: min(36vh, 220px);
  overflow-y: auto;
}
.mesa-detalle-jugadores li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  background: #0E1110;
  border: 1px solid var(--card-borde);
  border-radius: 10px;
  font-size: .88rem;
  font-weight: 700;
  color: var(--texto);
  text-align: left;
}
.mesa-detalle-jugadores .mesa-detalle-host {
  font-size: .68rem;
  font-weight: 700;
  color: #6a9080;
  flex-shrink: 0;
}
.mesa-detalle-vacio {
  margin: 0 0 16px;
  padding: 12px;
  color: var(--texto-suave);
  font-size: .85rem;
  text-align: center;
  background: #0E1110;
  border: 1px dashed var(--card-borde);
  border-radius: 10px;
}

#pantalla-inicio .error { color: #e07a5f; font-weight: 700; min-height: 16px; margin-top: 10px; }

@media (max-width: 1024px) {
  .menu { max-width: 900px; }
  .modo-arte { max-width: 150px; }
  .modo-arte img { max-height: 140px; }
}

@media (max-width: 760px) {
  .link-como { top: 10px; right: 10px; font-size: .78rem; }
  .menu-cabeza { margin-bottom: 14px; }
  .menu-identidad { margin-bottom: 32px; }
  .modos { grid-template-columns: 1fr; gap: 16px; max-width: 380px; margin: 0 auto; }
  .modo { transform: none; padding: 14px 14px 14px; }
  .modo:hover, .modo:focus-visible { transform: translateY(-2px); }
  .modo-arte { max-width: 170px; }
  .modo-arte img { max-height: 160px; }
}

.error { color: #e07a5f; text-align: center; margin-top: 12px; min-height: 20px; font-size: .88rem; }
.codigo { color: var(--naranja); letter-spacing: 4px; font-weight: 900; }

.equipos { display: flex; gap: 10px; margin: 16px 0 6px; overflow: visible; }
.equipo { flex: 1; border-radius: 14px; padding: 12px 10px; background: #0E1110; overflow: visible; }
.equipo-a { border: 1px solid var(--azul); }
.equipo-b { border: 1px solid var(--naranja); }
.equipo h3 {
  text-align: center; margin-bottom: 10px; font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase; font-weight: 800;
}
.equipo-a h3 { color: #6ea0e8; }
.equipo-b h3 { color: #e07a5f; }
.equipo ul { list-style: none; min-height: 66px; overflow: visible; }
.equipo li {
  position: relative;
  background: transparent;
  border-radius: 8px;
  padding: 7px 4px;
  margin-bottom: 4px;
  font-weight: 650;
  text-align: left;
  font-size: .86rem;
  color: var(--texto);
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: visible;
}
.equipo li::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: #4a534e;
  flex-shrink: 0;
}
.equipo li:not(.vacio)::before {
  width: 14px; height: 14px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, #c9c7c1 28%, transparent 29%),
    radial-gradient(circle at 50% 78%, #c9c7c1 38%, transparent 39%),
    #2a332e;
  border: 1px solid #4a534e;
}
.equipo li.vacio { color: #6a736d; font-weight: 500; font-style: normal; min-height: 38px; }
.equipo.host-drop-equipo.drop-over {
  background: rgba(93, 143, 39, .1);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--verde) 50%, transparent);
}
.equipo li.host-editable,
.equipo li.host-draggable {
  cursor: grab;
  position: relative;
  transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}
.equipo li.host-editable:hover,
.equipo li.host-editable.menu-abierto,
.equipo li.host-draggable:hover {
  background: rgba(255,255,255,.04);
}
.equipo li.arrastrando {
  opacity: .4;
}
.equipo li.drop-over,
.equipo.drop-over {
  background: rgba(93, 143, 39, .12);
  outline: 1.5px dashed color-mix(in srgb, var(--verde) 55%, transparent);
  outline-offset: -2px;
}
.equipo li.vacio.drop-over { color: var(--verde); }
.equipo li .pl-nombre { min-width: 0; flex: 1; }
.pl-corona {
  color: #e8c547;
  font-size: .95em;
  margin-left: 2px;
  vertical-align: baseline;
}
.pl-acciones {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-left: auto;
}
.pl-act {
  width: 28px;
  height: 28px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #0E1110;
  color: var(--texto-suave);
  border: 1px solid var(--card-borde);
  font-size: .85rem;
  line-height: 1;
  cursor: pointer;
}
.pl-act:hover { color: var(--texto); background: #171b19; filter: none; }
.pl-act-drag { cursor: grab; touch-action: none; }
.pl-act-drag:active { cursor: grabbing; }
.pl-act-host:hover { color: var(--verde); border-color: color-mix(in srgb, var(--verde) 45%, var(--card-borde)); }
.pl-act-kick { color: #e07a5f; border-color: color-mix(in srgb, #e07a5f 35%, var(--card-borde)); }
.pl-act-kick:hover { background: rgba(198,74,40,.12); filter: none; }
.drag-ghost {
  position: fixed;
  z-index: 90;
  transform: translate(-50%, -120%);
  pointer-events: none;
  padding: 8px 12px;
  border-radius: 10px;
  background: #121816;
  border: 1px solid var(--verde);
  color: var(--texto);
  font-size: .82rem;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(0,0,0,.45);
  white-space: nowrap;
}
#btn-sortear-parejas:disabled {
  opacity: .4;
  cursor: not-allowed;
}
.host-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  z-index: 40;
  width: min(200px, calc(100vw - 32px));
  min-width: 190px;
  max-width: 210px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: #101312;
  border: 1px solid #232824;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .42);
  animation: host-menu-abre .16s ease-out;
}
@keyframes host-menu-abre {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: none; }
}
.host-menu-sep {
  height: 1px;
  margin: 4px 6px;
  background: #232824;
  flex-shrink: 0;
}
.host-menu-btn {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 0 12px;
  border-radius: 8px;
  background: transparent;
  color: #e8ebe9;
  border: none;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 650;
  letter-spacing: .01em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.host-menu-ico {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  opacity: .78;
  color: inherit;
}
.host-menu-label {
  min-width: 0;
  line-height: 1.2;
}
.host-menu-btn:hover,
.host-menu-btn:focus-visible {
  background: #191D1A;
  filter: none;
  outline: none;
}
.host-menu-btn:active {
  background: #1c211e;
}
.host-menu-kick {
  color: #d4896a;
}
.host-menu-kick .host-menu-ico { opacity: .9; }
.host-menu-ban {
  color: #e06a5a;
}
.host-menu-ban .host-menu-ico { opacity: .95; }
.host-menu-kick:hover,
.host-menu-ban:hover {
  background: #191D1A;
}
.popup-aviso-caja { max-width: 340px; text-align: center; }
.popup-aviso-img {
  display: block;
  width: min(140px, 42vw);
  height: auto;
  margin: 0 auto 12px;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}
.popup-aviso-img.oculto { display: none; }
.popup-aviso-titulo {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--texto);
}
.popup-aviso-texto {
  margin: 0 0 16px;
  font-size: .9rem;
  line-height: 1.45;
  color: var(--texto-suave);
}
.popup-aviso-acciones {
  display: flex;
  gap: 8px;
}
.popup-aviso-acciones .cp-op { flex: 1; }
.popup-nombre-label {
  display: block;
  text-align: left;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin: 0 0 6px;
}
#input-nombre-nuevo,
#input-invitar-nombre,
#input-nombre-cuenta {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--borde);
  background: #0E1110;
  color: var(--texto);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
}
#input-nombre-nuevo:focus,
#input-invitar-nombre:focus,
#input-nombre-cuenta:focus {
  outline: none;
  border-color: #3a4540;
  box-shadow: 0 0 0 3px rgba(93,143,39,.15);
}
.popup-nombre-error {
  min-height: 18px;
  margin: 0 0 10px;
  text-align: left;
}
/* Fondo de invitación: se ve oscuro pero NO cierra al tocarlo. */
.popup-fondo-fijo { cursor: default; }
#popup-invitar-nombre .popup-sala-cabeza,
#popup-nombre-cuenta .popup-sala-cabeza {
  margin-bottom: 8px;
}
#popup-invitar-nombre .popup-aviso-titulo,
#popup-nombre-cuenta .popup-aviso-titulo {
  margin: 0;
  text-align: left;
  flex: 1;
  padding-right: 8px;
}
#popup-invitar-nombre .popup-aviso-texto,
#popup-nombre-cuenta .popup-aviso-texto {
  text-align: left;
}
#popup-nombre-cuenta .popup-aviso-titulo {
  margin: 0 0 8px;
}
.caja-sala .nota { margin: 0 0 22px; font-size: .75rem; }

/* ---------- HUD del juego ---------- */
#pantalla-juego { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
#pantalla-juego.activa { display: block; }

.marcador {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  background: linear-gradient(to bottom, rgba(0,0,0,.62), transparent);
  color: #fff;
}
.tanteo { text-align: center; min-width: 84px; position: relative; }
.tanteo .nombre-eq { display: block; font-size: .72rem; opacity: .8; letter-spacing: .5px; }
.tanteo .puntos { font-size: 2.1rem; font-weight: 900; line-height: 1; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.tanteo-a .puntos { color: #9fc6ff; }
.tanteo-b .puntos { color: #ffb0a0; }
.bono {
  display: block; font-size: .82rem; font-weight: 800; color: var(--oro);
  min-height: 16px; text-shadow: 0 1px 4px #000;
}
.centro-info { text-align: center; }
#turno-info {
  font-weight: 800; font-size: 1.02rem;
  text-shadow: 0 2px 6px rgba(0,0,0,.8);
  padding: 5px 14px; border-radius: 20px;
  background: rgba(0,0,0,.35);
}
#turno-info.mi-turno {
  background: var(--verde-ok); color: #06301c;
  animation: pulso 1.3s infinite;
}
@keyframes pulso { 0%,100% { box-shadow: 0 0 0 0 rgba(55,201,122,.6); } 50% { box-shadow: 0 0 0 12px rgba(55,201,122,0); } }
.mini { font-size: .72rem; opacity: .75; margin-top: 4px; text-shadow: 0 1px 3px #000; }

/* Carteles flotantes sobre los personajes */
#carteles { position: absolute; inset: 0; }
/* El nombre va SUELTO sobre la cabeza del personaje: nada de recuadro, que
   tapaba la escena. Se lee por el borde oscuro, no por un fondo. */
.cartel {
  position: absolute; transform: translate(-50%, -50%);
  color: #fff; text-align: center; white-space: nowrap;
  pointer-events: none; line-height: 1.15;
}
.c-nombre {
  display: block; font-weight: 900; font-size: .95rem; letter-spacing: .3px;
  color: #fff;
  /* contorno oscuro para que se lea sobre cualquier fondo */
  text-shadow: 0 0 4px #000, 0 0 4px #000, 0 2px 3px #000,
               -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  transition: color .2s;
}
.cartel.companero .c-nombre { color: #a8d8ff; }
.cartel.activo .c-nombre { color: #ffe14d; }

/* La cuenta atrás, debajo del nombre y solo del que está jugando */
.c-reloj {
  display: none; font-weight: 900; font-size: .88rem; color: #ffe14d;
  text-shadow: 0 0 4px #000, 0 0 4px #000, -1px -1px 0 #000, 1px -1px 0 #000,
               -1px 1px 0 #000, 1px 1px 0 #000;
}
.c-reloj.visible { display: block; }
.c-reloj.poco { color: #ff6a5c; animation: latir-chico .7s infinite; }
@keyframes latir-chico { 50% { transform: scale(1.22); } }

/* Conteo del tranque */
#conteo { position: absolute; inset: 0; display: none; }
#conteo.visible { display: block; }
.conteo-titulo {
  position: absolute; left: 50%; top: 14%;
  transform: translateX(-50%);
  color: #ffe9a8; font-weight: 900; font-size: 1.25rem;
  text-shadow: 0 2px 10px #000; white-space: nowrap;
}
/* Un cartelito por jugador, del lado en que estan sus fichas en la mesa */
.conteo-lado {
  position: absolute;
  background: rgba(10,8,6,.86); border: 2px solid rgba(255,255,255,.22);
  border-radius: 12px; padding: 5px 13px; text-align: center; min-width: 96px;
  transform: translate(-50%, -50%);
}
.conteo-p0 { left: 50%; top: 88%; }   /* yo, abajo */
.conteo-p1 { left: 88%; top: 50%; }   /* mi derecha */
.conteo-p2 { left: 50%; top: 13%; }   /* el de enfrente */
.conteo-p3 { left: 12%; top: 50%; }   /* mi izquierda */
.conteo-lado.gana { border-color: var(--oro); box-shadow: 0 0 16px rgba(255,200,80,.5); }
.conteo-nombre { display: block; color: #fff; font-weight: 800; font-size: .85rem; }
.conteo-pts {
  display: block; color: var(--oro); font-weight: 900; font-size: 1.7rem; line-height: 1.15;
  text-shadow: 0 2px 8px #000;
}

/* ---- Reloj del turno ---- */
#reloj-turno {
  position: absolute; left: 50%; top: 96px; transform: translateX(-50%);
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(10,8,6,.82); border: 3px solid var(--oro);
  display: none; align-items: center; justify-content: center;
  color: #fff; font-weight: 900; font-size: 1.35rem;
}
#reloj-turno.visible { display: flex; }
#reloj-turno.poco { border-color: #ff5a4d; color: #ffb3ab; animation: latir .7s infinite; }
@keyframes latir { 50% { transform: translateX(-50%) scale(1.13); } }

/* ---- Menú de la partida ---- */
#btn-menu {
  position: absolute; left: 14px; bottom: 14px;
  background: rgba(12,10,8,.78); color: #f0e6cf;
  border: 1px solid rgba(255,255,255,.24); border-radius: 10px;
  padding: 7px 14px; font-size: 1.05rem; cursor: pointer; opacity: .6;
  font-family: inherit; transition: opacity .15s;
}
#btn-menu:hover { opacity: 1; }
body:not(.en-juego) #btn-menu, body:not(.en-juego) #reloj-turno { display: none; }

#panel-menu, #panel-voto {
  position: absolute; inset: 0; background: rgba(0,0,0,.62);
  display: none; align-items: center; justify-content: center; z-index: 30;
}
#panel-menu.visible, #panel-voto.visible { display: flex; }
.menu-caja, .voto-caja {
  background: #17120d; border: 2px solid rgba(255,255,255,.2);
  border-radius: 16px; padding: 20px 24px; min-width: 300px; max-width: 92vw;
  box-shadow: 0 18px 50px rgba(0,0,0,.6);
}
.menu-caja h3 { margin: 0 0 14px; color: var(--oro); font-size: 1.15rem; }
.fila-cfg {
  display: flex; align-items: center; gap: 10px;
  color: #e9e0cc; font-size: .9rem; margin-bottom: 12px;
}
.fila-cfg > span:first-child { flex: 0 0 92px; }
.fila-cfg input[type=range] { flex: 1; accent-color: #35ff9a; }
.fila-cfg b { flex: 0 0 30px; text-align: right; color: var(--oro); }
.fila-cfg.chk { gap: 8px; }
.fila-cfg.chk input { width: 17px; height: 17px; accent-color: #35ff9a; }
.fila-cfg select {
  flex: 1; background: #241c14; color: #e9e0cc; font-family: inherit;
  border: 1px solid rgba(255,255,255,.2); border-radius: 7px; padding: 5px;
}
.menu-botones { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.menu-botones button, .voto-botones button {
  padding: 10px; border-radius: 10px; font-family: inherit; font-weight: 700;
  font-size: .9rem; cursor: pointer;
  background: #2c2319; color: #e9e0cc; border: 1px solid rgba(255,255,255,.2);
}
.menu-botones button:hover, .voto-botones button:hover { background: #3a2e21; }
.btn-primario { background: #1d7d4f !important; border-color: #35ff9a !important; color: #fff !important; }
.btn-peligro { background: #7a2018 !important; border-color: #d9483a !important; color: #ffd9d4 !important; }

/* ---- Votación de rebarajeo ---- */
#btn-rebarajeo {
  position: absolute; left: 50%; bottom: 20%; transform: translateX(-50%);
  background: #7a5a12; color: #ffeeb8; border: 2px solid var(--oro);
  border-radius: 12px; padding: 10px 18px; font-weight: 800; font-size: .92rem;
  cursor: pointer; font-family: inherit; z-index: 20;
}
#btn-rebarajeo.oculto { display: none; }
.voto-caja { text-align: center; }
.voto-titulo { color: var(--oro); font-weight: 900; font-size: 1.2rem; margin-bottom: 6px; }
.voto-sub { color: #d8cdb4; font-size: .9rem; margin-bottom: 14px; }
.voto-marcador { color: #fff; font-size: .95rem; margin-bottom: 14px; }
.voto-botones { display: flex; gap: 10px; justify-content: center; }

/* ---- Cartel de "pasó" sobre el jugador ---- */
.cartel .c-paso {
  display: block; background: #d13a2c; color: #fff; font-weight: 900;
  font-size: .72rem; border-radius: 5px; padding: 1px 8px; margin-top: 2px;
  letter-spacing: 1px; box-shadow: 0 2px 8px rgba(0,0,0,.6);
  animation: asomar-paso .25s ease-out;
}
@keyframes asomar-paso {
  from { opacity: 0; transform: translateY(-6px) scale(.8); }
  to   { opacity: 1; transform: none; }
}

/* Botón para volver la cámara a su sitio */
#btn-camara {
  position: absolute; right: 14px; bottom: 14px;
  background: rgba(12,10,8,.78); color: #f0e6cf;
  border: 1px solid rgba(255,255,255,.24); border-radius: 10px;
  padding: 7px 13px; font-size: .82rem; font-weight: 700;
  cursor: pointer; font-family: inherit; opacity: .55;
  transition: opacity .15s;
}
#btn-camara:hover { opacity: 1; }
body:not(.en-juego) #btn-camara { display: none; }

/* ============================================================================
   LA LIBRETA AL COSTADO
   El mismo marcador que lleva la rata de la esquina, pero en grande y legible.
   Se abre y se cierra cuando el jugador quiera: no estorba al que ya lo sabe
   y esta ahi para el que se perdio la cuenta.
   ========================================================================== */
/* La libreta: pegada al borde derecho y a media altura, del tamaño de una
   pestaña de cuaderno. Solo el icono, sin texto: se entiende sola y así no
   compite con la mesa. Al abrirse el panel, se corre con él y queda de
   pestaña sobre su borde. */
#btn-puntaje {
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  width: 62px; height: 76px;
  display: flex; align-items: center; justify-content: center;
  /* Amarilla y bien viva: el colmado esta en penumbra y con el crema de
     antes la pestana se perdia contra la madera de la mesa. */
  background: linear-gradient(160deg, #ffd94a, #e8a90f);
  border: 3px solid #7a5c0a; border-right: none;
  border-radius: 14px 0 0 14px;
  box-shadow: -6px 0 18px rgba(0,0,0,.5), 0 0 22px rgba(255,200,40,.35);
  padding: 0; line-height: 1;
  cursor: pointer; font-family: inherit; opacity: .95;
  transition: transform .28s cubic-bezier(.3,1.4,.6,1), opacity .15s, filter .15s;
  z-index: 31;
}
#btn-puntaje svg { display: block; flex: none; }
#btn-puntaje:hover { opacity: 1; filter: brightness(1.1); }
body:not(.en-juego) #btn-puntaje { display: none; }
/* cuando el panel esta abierto, el boton viaja con el y hace de pestaña */
body.puntaje-abierto #btn-puntaje {
  transform: translate(calc(-1 * min(84vw, 268px)), -50%);
  opacity: 1;
}

#panel-puntaje {
  position: absolute; right: 0; top: 50%;
  transform: translate(105%, -50%);
  width: min(84vw, 268px);
  background: linear-gradient(170deg, #f7f3e4, #e8e0c9);
  color: #1f3566;
  border: 3px solid #b8a878; border-right: none;
  border-radius: 14px 0 0 14px;
  box-shadow: -10px 0 34px rgba(0,0,0,.55);
  padding: 12px 14px 14px;
  opacity: 0; pointer-events: none;
  transition: transform .28s cubic-bezier(.3,1.4,.6,1), opacity .2s;
  z-index: 30;
}
body.puntaje-abierto #panel-puntaje {
  transform: translate(0, -50%); opacity: 1; pointer-events: auto;
}

.pp-cabeza { display: flex; align-items: center; justify-content: space-between; }
.pp-titulo { font-weight: 900; font-size: 1.05rem; letter-spacing: .5px; }
#btn-cerrar-puntaje {
  background: none; color: #7a6a4a; border: none; padding: 2px 6px;
  font-size: 1rem; font-weight: 900; cursor: pointer; line-height: 1;
}
#btn-cerrar-puntaje:hover { color: var(--rojo); background: none; filter: none; }
.pp-meta { font-size: .74rem; color: #7a6a4a; font-weight: 700; margin-bottom: 8px; }

.pp-filas { display: flex; flex-direction: column; gap: 8px; }
.pp-fila {
  border-radius: 10px; padding: 8px 10px;
  border: 2px solid transparent; background: rgba(255,255,255,.55);
}
.pp-fila.pp-a { border-color: #1c4f96; }
.pp-fila.pp-b { border-color: #a8291c; }
.pp-eq { display: block; font-size: .7rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; opacity: .75; }
.pp-nums { display: flex; align-items: baseline; gap: 7px; }
.pp-nums b { font-size: 2.1rem; font-weight: 900; line-height: 1.05; }
.pp-nums i { font-style: normal; font-weight: 900; font-size: .85rem; color: #b8860b; }
.pp-a .pp-nums b { color: #1c4f96; }
.pp-b .pp-nums b { color: #a8291c; }
.pp-quien { display: block; font-size: .72rem; color: #5d5138; font-weight: 600; }
/* La barra de avance hacia la meta: de un vistazo se ve quién va ganando. */
.pp-barra { display: block; height: 6px; border-radius: 3px; background: rgba(0,0,0,.14); margin-top: 6px; overflow: hidden; }
.pp-barra > span { display: block; height: 100%; width: 0; border-radius: 3px; transition: width .35s; }
.pp-a .pp-barra > span { background: #1c4f96; }
.pp-b .pp-barra > span { background: #a8291c; }
.pp-pie { margin-top: 9px; font-size: .74rem; color: #5d5138; font-weight: 700; text-align: center; min-height: 16px; }

@media (max-width: 520px) {
  #panel-puntaje { top: auto; bottom: 0; transform: translate(0, 105%); width: 100%; border-radius: 14px 14px 0 0; border-right: 3px solid #b8a878; }
  body.puntaje-abierto #panel-puntaje { transform: translate(0, 0); }
  /* En móvil el panel sube desde abajo, así que el botón no se corre al
     costado: se queda en el borde y solo se apaga un poco. */
  #btn-puntaje { width: 52px; height: 64px; }
  #btn-puntaje svg { width: 28px; height: 28px; }
  body.puntaje-abierto #btn-puntaje { transform: translateY(-50%); opacity: .35; }
}

/* Reparto: barajeo y tomar fichas */
#reparto {
  position: absolute; left: 50%; bottom: 13%;
  transform: translateX(-50%);
  text-align: center; display: none;
}
#reparto.visible { display: block; }
#reparto-texto {
  color: #fff5dc; font-weight: 800; font-size: 1rem;
  text-shadow: 0 2px 8px #000; margin-bottom: 10px;
}
.btn-tomar {
  background: linear-gradient(135deg, #e0a72c, #b97d10);
  color: #2a1c00; font-size: .95rem; padding: 11px 22px;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
}

/* Ayuda para elegir punta */
#ayuda-puntas {
  position: absolute; left: 50%; bottom: 21%;
  transform: translateX(-50%) translateY(8px);
  background: rgba(10,8,6,.78); color: #d7ffe9;
  border: 1px solid rgba(53,255,154,.45);
  padding: 7px 16px; border-radius: 20px;
  font-size: .8rem; font-weight: 600; white-space: nowrap;
  opacity: 0; transition: opacity .25s, transform .25s;
}
#ayuda-puntas.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Avisos */
#aviso {
  position: absolute; left: 50%; top: 58%;
  transform: translate(-50%, -50%) scale(.9);
  background: rgba(10,8,6,.85); color: #fff;
  padding: 10px 20px; border-radius: 26px;
  font-weight: 700; font-size: .92rem;
  opacity: 0; transition: opacity .25s, transform .25s;
  border: 1px solid rgba(255,255,255,.2);
}
#aviso.visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }

#cartel-grande {
  position: absolute; left: 50%; top: 42%;
  transform: translate(-50%, -50%) scale(.5);
  opacity: 0; transition: opacity .3s, transform .3s;
  text-align: center; color: #fff;
}
#cartel-grande.visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.cg-titulo {
  font-size: 3.1rem; font-weight: 900; letter-spacing: -1px;
  color: var(--oro);
  text-shadow: 0 0 30px rgba(232,184,28,.9), 0 4px 10px #000;
  -webkit-text-stroke: 2px #7a5c00;
}
.cg-sub { font-size: 1.2rem; font-weight: 800; text-shadow: 0 2px 8px #000; }

/* Paso corrido (+30): mismo cartelon que el kapicua pero en rojo, para que de
   un vistazo se sepa cual de los dos bonos cayo. El titulo es mas largo, asi
   que va un punto mas chico y con el ancho limitado para que no se desborde. */
#cartel-grande { max-width: min(94vw, 760px); }
#cartel-grande.paso .cg-titulo {
  /* Es UNA palabra corta (TREINTA, SESENTA...), así que puede ir bien grande. */
  font-size: clamp(2.6rem, 11vw, 4.4rem);
  color: #ff6a4d;
  text-shadow: 0 0 34px rgba(220,60,30,.95), 0 5px 12px #000;
  -webkit-text-stroke: 3px #6d1200;
  letter-spacing: 2px;
}

/* TRANCA: el tercer cartelón. Va en azul acero y frío a propósito, para que
   no se confunda ni con el dorado del raticúa ni con el rojo del paso
   corrido: de un vistazo se sabe cuál de las tres cosas pasó. */
#cartel-grande.tranca .cg-titulo {
  font-size: clamp(2.8rem, 12vw, 4.8rem);
  color: #9fd8ff;
  text-shadow: 0 0 36px rgba(60,150,230,.95), 0 5px 12px #000;
  -webkit-text-stroke: 3px #0d3a63;
  letter-spacing: 4px;
}
#cartel-grande.tranca .cg-sub { color: #dbeeff; }

/* NO CABEN: los 30 de un pase que no se pueden anotar porque dejarían al
   equipo en los puntos. Va en gris ceniza y SIN brillo: es lo contrario de un
   premio, y tiene que leerse distinto de un vistazo. */
#cartel-grande.nocaben .cg-titulo {
  font-size: clamp(2.4rem, 10vw, 4rem);
  color: #c9c4bb;
  text-shadow: 0 4px 12px #000;
  -webkit-text-stroke: 3px #33302c;
  letter-spacing: 5px;
}
#cartel-grande.nocaben .cg-sub { color: #ded7c9; }
/* entra torcido y se endereza, como algo que rebota y no pasa */
#cartel-grande.nocaben.visible { animation: rechazo .45s ease-out; }
@keyframes rechazo {
  0%   { transform: translate(-50%, -50%) scale(1.35) rotate(5deg); opacity: 0; }
  60%  { transform: translate(-50%, -50%) scale(.97) rotate(-2deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; }
}
/* El portazo: el cartel entra de golpe y rebota, no crece suavecito. */
#cartel-grande.tranca.visible { animation: trancazo .42s cubic-bezier(.2,1.7,.4,1); }
@keyframes trancazo {
  0%   { transform: translate(-50%, -50%) scale(1.9) rotate(-7deg); opacity: 0; }
  55%  { transform: translate(-50%, -50%) scale(.92) rotate(2deg);  opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; }
}

/* Pie */
.pie { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 16px 12px; text-align: center; }
.mi-info {
  display: inline-block; color: #fff; font-weight: 800; font-size: .85rem;
  background: rgba(0,0,0,.45); padding: 4px 14px; border-radius: 14px;
  text-shadow: 0 1px 3px #000;
}
/* Los mensajes de la mesa: uno solo, el ultimo, como una tira discreta.
   Antes eran tres lineas amontonadas y tapaban la escena. */
.mensajes {
  margin-top: 8px; min-height: 26px;
  display: flex; justify-content: center;
}
.mensajes div {
  display: inline-block; max-width: min(88vw, 620px);
  color: #f4ecd8; font-size: .8rem; font-weight: 600;
  background: rgba(10,8,6,.55); backdrop-filter: blur(3px);
  border-left: 3px solid var(--oro);
  padding: 5px 14px; border-radius: 4px;
  text-shadow: 0 1px 3px #000;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  animation: entrar-msg .3s ease-out;
}
@keyframes entrar-msg {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Panel de fin */
.panel-fin {
  position: absolute; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55);
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.panel-fin.visible { opacity: 1; pointer-events: auto; }
.panel-fin-caja {
  background: var(--hueso); border-radius: 18px; padding: 28px 30px;
  text-align: center; max-width: 400px; margin: 14px;
  box-shadow: 0 22px 60px rgba(0,0,0,.7);
  border: 3px solid var(--oro);
}
.fin-titulo { font-size: 1.5rem; font-weight: 900; margin-bottom: 10px; }
.fin-detalle { font-size: 1rem; line-height: 1.6; }
.fin-bonos {
  margin-top: 12px; padding-top: 10px; border-top: 2px dashed #e0d8bf;
  color: #9a6f00; font-weight: 800; font-size: .92rem;
}
/* Los 30 de un pase que NO se suman porque con pases no se gana la partida.
   Va bien marcado: si no se ve, parece que la partida se ganó con el pase. */
.fin-anulado {
  margin-top: 10px; padding: 8px 10px; border-radius: 10px;
  background: rgba(190,40,30,.1); border: 2px dashed rgba(190,40,30,.55);
  color: #a32718; font-weight: 800; font-size: .9rem; line-height: 1.35;
}

/* ===================== CHAT DE LA MESA (texto + voz) =====================
   Entra por la IZQUIERDA, en espejo de la libreta que entra por la derecha,
   y con la misma pestaña que viaja con el panel. Va sobre el 3D, así que el
   panel entero lleva pointer-events y el resto del HUD sigue dejando pasar
   el dedo hasta la mesa. */
#btn-chat {
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 62px; height: 76px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(200deg, #24313f, #16202b);
  color: #cfe8ff;
  border: 3px solid #3d5a72;
  border-left: none;
  border-radius: 0 14px 14px 0;
  box-shadow: 6px 0 18px rgba(0,0,0,.45);
  padding: 0; font-size: 1.9rem; line-height: 1;
  cursor: pointer; font-family: inherit; opacity: .9;
  transition: transform .28s cubic-bezier(.3,1.4,.6,1), opacity .15s, filter .15s;
  z-index: 31;
}
#btn-chat:hover { opacity: 1; filter: brightness(1.15); }
body:not(.en-juego) #btn-chat { display: none; }
body.chat-abierto #btn-chat {
  transform: translate(min(88vw, 320px), -50%);
  opacity: 1;
}
/* El globito rojo con los mensajes sin leer */
.chat-nuevos {
  position: absolute; top: 8px; right: 6px;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px; background: #d63b26; color: #fff;
  font-size: .72rem; font-weight: 900; line-height: 20px;
  display: none;
}
.chat-nuevos.visible { display: block; }

#panel-chat {
  position: absolute; left: 0; top: 50%;
  transform: translate(-105%, -50%);
  width: min(88vw, 320px);
  max-height: min(76vh, 520px);
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #1b2530, #131b24);
  color: #e8f1fa;
  border: 3px solid #3d5a72; border-left: none;
  border-radius: 0 14px 14px 0;
  box-shadow: 10px 0 34px rgba(0,0,0,.6);
  opacity: 0; pointer-events: none;
  transition: transform .28s cubic-bezier(.3,1.4,.6,1), opacity .2s;
  z-index: 30;
}
#panel-chat.visible {
  transform: translate(0, -50%); opacity: 1; pointer-events: auto;
}
.chat-cabeza {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px 7px; border-bottom: 2px solid rgba(255,255,255,.1);
}
.chat-titulo { font-weight: 900; font-size: .95rem; letter-spacing: .5px; }
#btn-cerrar-chat {
  background: none; border: none; color: #9fb8cc;
  font-size: 1rem; cursor: pointer; font-family: inherit; padding: 2px 4px;
}
#btn-cerrar-chat:hover { color: #fff; }

/* --- La barra del micrófono --- */
.voz-barra { display: flex; gap: 6px; padding: 9px 10px 4px; }
.btn-voz {
  flex: 1; padding: 9px 10px; border-radius: 10px;
  background: linear-gradient(180deg, #2f7d4f, #24613d);
  color: #fff; border: 2px solid #46a86b;
  font-weight: 800; font-size: .82rem; cursor: pointer; font-family: inherit;
}
.btn-voz:hover { filter: brightness(1.12); }
.btn-voz.encendido {
  background: linear-gradient(180deg, #b5401f, #8c2f16); border-color: #e0663f;
}
/* Mientras hablas TÚ, el botón se ilumina: es el único aviso que tienes de
   que el micrófono te está tomando (a ti no te sale cartel sobre la cabeza). */
.btn-voz.hablando {
  box-shadow: 0 0 0 2px #35ff9a, 0 0 16px rgba(53,255,154,.75);
}
.btn-voz-chico {
  width: 42px; border-radius: 10px;
  background: #24313f; color: #cfe8ff; border: 2px solid #3d5a72;
  font-size: 1rem; cursor: pointer; font-family: inherit;
}
.btn-voz-chico.activo { background: #b5401f; border-color: #e0663f; }
.voz-estado {
  padding: 2px 12px 8px; font-size: .74rem; color: #9fb8cc; min-height: 16px;
  border-bottom: 2px solid rgba(255,255,255,.1);
}

/* --- Los mensajes --- */
.chat-lista {
  flex: 1; overflow-y: auto; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
  min-height: 120px;
}
.chat-msg {
  background: rgba(255,255,255,.07);
  border-left: 3px solid #6d8ba5;
  border-radius: 4px 9px 9px 4px;
  padding: 5px 9px; font-size: .84rem; line-height: 1.35;
  word-break: break-word;      /* que un pegote larguísimo no rompa el panel */
}
.chat-msg.eq-a { border-left-color: #4d90e0; }
.chat-msg.eq-b { border-left-color: #e06a4d; }
.chat-msg.mio { background: rgba(90,180,120,.16); }
.chat-quien { display: block; font-weight: 900; font-size: .72rem; opacity: .85; }
.chat-texto { display: block; }
.chat-msg.chat-sistema {
  background: none; border-left: none; text-align: center;
  color: #9fb8cc; font-size: .76rem; font-style: italic; padding: 2px;
}

/* --- Escribir --- */
.chat-forma { display: flex; gap: 6px; padding: 8px 10px 10px; }
.chat-forma input {
  flex: 1; padding: 9px 11px; border-radius: 10px;
  background: rgba(0,0,0,.35); color: #fff;
  border: 2px solid #3d5a72; font-family: inherit; font-size: .86rem;
}
.chat-forma input:focus { outline: none; border-color: #6aa9d8; }
#btn-chat-enviar {
  width: 44px; border-radius: 10px; cursor: pointer; font-family: inherit;
  background: linear-gradient(180deg, #3a6ea8, #2b5482);
  color: #fff; border: 2px solid #5b90c4; font-size: 1rem;
}
#btn-chat-enviar:hover { filter: brightness(1.15); }

/* --- El globito de lo que dijo, sobre la cabeza del jugador --- */
.c-globo {
  display: none;
  max-width: 190px; margin-top: 3px;
  background: #fdfaf0; color: #1c2733;
  border-radius: 10px; padding: 4px 9px;
  font-size: .78rem; font-weight: 700; line-height: 1.25;
  box-shadow: 0 4px 14px rgba(0,0,0,.5);
  word-break: break-word;
  white-space: normal;
  animation: globo-pop .28s cubic-bezier(.3,1.5,.5,1);
}
.c-globo.emote {
  max-width: none; font-size: 1.85rem; line-height: 1;
  padding: 6px 10px; background: rgba(253,250,240,.95);
  border-radius: 16px;
}
.c-globo.frase {
  font-size: .72rem; padding: 3px 8px; border-radius: 12px;
  max-width: 150px;
}
@keyframes globo-pop {
  from { transform: scale(.55); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* --- Emotes y frases: botón abajo-izq + popup --- */
#reacciones-wrap {
  position: absolute;
  left: 12px;
  bottom: 14px;
  z-index: 22;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  pointer-events: none;
}
body:not(.en-juego) #reacciones-wrap,
body.mirando #reacciones-wrap { display: none; }

#btn-reacciones {
  pointer-events: auto;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(12, 10, 8, .82);
  color: #f0e6cf;
  font-size: 1.45rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
  transition: transform .12s, filter .12s, background .12s;
  -webkit-tap-highlight-color: transparent;
}
#btn-reacciones:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}
#btn-reacciones:active { transform: scale(.94); }
#btn-reacciones[aria-expanded="true"] {
  background: rgba(40, 28, 16, .92);
  border-color: rgba(240, 180, 90, .45);
}

#popup-reacciones {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  width: min(292px, calc(100vw - 28px));
  padding: 10px 10px 12px;
  border-radius: 16px;
  background: rgba(14, 12, 10, .94);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  transform: translateY(8px) scale(.96);
  transform-origin: bottom left;
  transition: opacity .18s ease, transform .2s cubic-bezier(.3,1.2,.5,1);
  pointer-events: none;
}
#popup-reacciones.abierto {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
#popup-reacciones.oculto { display: none !important; }

.reac-pop-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.reac-pop-cabeza span {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #b8b0a0;
}
#btn-cerrar-reacciones {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: #c9c2b4;
  font-size: .85rem;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}
#btn-cerrar-reacciones:hover { color: #fff; background: rgba(255,255,255,.08); }

.mi-reaccion {
  display: none;
  background: #fdfaf0; color: #1c2733;
  border-radius: 12px; padding: 4px 10px;
  font-size: .78rem; font-weight: 800; line-height: 1.2;
  box-shadow: 0 4px 16px rgba(0,0,0,.45);
  animation: globo-pop .28s cubic-bezier(.3,1.5,.5,1);
  pointer-events: none; max-width: 200px; text-align: center;
}
.mi-reaccion.emote { font-size: 1.7rem; padding: 5px 12px; border-radius: 16px; }
.mi-reaccion.frase { font-size: .72rem; }
.mi-reaccion.visible { display: block; }

.reac-emotes, .reac-frases {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.reac-emotes button, .reac-frases button {
  cursor: pointer; font-family: inherit;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06); color: #f0e6cf;
  transition: transform .12s, filter .12s, background .12s;
  -webkit-tap-highlight-color: transparent;
}
.reac-emotes button {
  width: 44px; height: 44px; border-radius: 12px;
  font-size: 1.4rem; line-height: 1; padding: 0;
}
.reac-frases button {
  border-radius: 999px; padding: 7px 11px;
  font-size: .72rem; font-weight: 800; white-space: nowrap;
}
.reac-emotes button:hover, .reac-frases button:hover {
  filter: brightness(1.15); transform: translateY(-1px);
  background: rgba(255,255,255,.1);
}
.reac-emotes button:active, .reac-frases button:active {
  transform: scale(.92);
}
.reac-emotes button:disabled, .reac-frases button:disabled {
  opacity: .45; cursor: default; transform: none;
}

@media (max-width: 520px) {
  #reacciones-wrap { left: 10px; bottom: 12px; }
  #btn-reacciones { width: 44px; height: 44px; font-size: 1.3rem; border-radius: 12px; }
  #popup-reacciones { width: min(280px, calc(100vw - 24px)); }
  .reac-emotes button { width: 40px; height: 40px; font-size: 1.25rem; }
  .reac-frases button { font-size: .66rem; padding: 6px 9px; }
  #panel-chat { max-height: 60vh; }
  #btn-chat { width: 52px; height: 66px; font-size: 1.6rem; }
}

/* --- El aro verde de "está hablando" --- */
.cartel.hablando .c-nombre {
  box-shadow: 0 0 0 2px #35ff9a, 0 0 14px rgba(53,255,154,.8);
  border-radius: 8px;
}

/* ============ LA LIBRETA, MANO POR MANO ============
   Como el papel del colmado: una raya por mano y el total arriba. La columna
   de cada pareja va del color de su equipo, y la mano que se está jugando
   AHORA se marca aparte, porque se mueve sola cuando caen los 30 de un pase. */
.pp-libreta {
  margin-top: 12px; border-top: 2px solid #cdbf9a; padding-top: 8px;
}
.pl-cabeza, .pl-fila {
  display: grid; grid-template-columns: 1fr 58px 58px;
  align-items: center; gap: 2px;
}
.pl-cabeza {
  font-size: .72rem; font-weight: 900; color: #6f6244;
  text-transform: uppercase; letter-spacing: .5px;
  border-bottom: 1px solid #cdbf9a; padding-bottom: 3px; margin-bottom: 2px;
}
.pl-cabeza .pl-a, .pl-cabeza .pl-b { text-align: right; }
.pl-cabeza .pl-a { color: #1c4f96; }
.pl-cabeza .pl-b { color: #a8291c; }
.pl-cuerpo { max-height: 168px; overflow-y: auto; }
.pl-fila {
  font-size: .84rem; font-weight: 800; color: #3a3120;
  padding: 2px 0; border-bottom: 1px dashed rgba(120,105,70,.28);
}
.pl-fila span:nth-child(2), .pl-fila span:nth-child(3) { text-align: right; }
.pl-fila .gano { color: #1a7a3c; }
.pl-fila .nada { color: #b9ad90; }
.pl-fila.enCurso {
  background: rgba(232,184,28,.22); border-radius: 5px;
  border-bottom-color: transparent;
}
.pl-fila.enCurso .pl-mano { font-style: italic; }
.pl-vacio { font-size: .78rem; color: #8a7c5e; font-style: italic; padding: 4px 0; }

/* ============ PAREJAS, MIRONES Y EL ARRETAR ============ */
.sala-btn-ajustes {
  width: 100%;
  margin: 4px 0 2px;
}
.caja-parejas {
  margin: 0 0 12px; padding: 0;
  background: transparent;
  border-radius: 0;
  border: none;
  text-align: left;
}
.caja-parejas + .caja-parejas {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--card-borde);
}
.cp-titulo {
  display: block;
  font-size: .72rem;
  font-weight: 800;
  color: var(--verde);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 10px;
  text-align: left;
}
.cp-botones { display: flex; gap: 8px; flex-wrap: nowrap; }
.cp-botones-col { flex-direction: column; }
.cp-chips { flex-wrap: wrap; gap: 6px; }
.cp-chip {
  flex: 0 1 auto;
  min-width: 0;
  padding: 7px 12px;
  border-radius: 999px;
  background: transparent;
  color: var(--texto-suave);
  border: 1.5px solid var(--card-borde);
  font-family: inherit;
  font-weight: 700;
  font-size: .78rem;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.cp-chip:hover {
  filter: none;
  color: var(--texto);
  border-color: #2a332e;
  background: transparent;
}
.cp-chip.activa {
  background: transparent;
  border-color: var(--verde);
  color: var(--verde);
  box-shadow: none;
  animation: cp-select .32s cubic-bezier(.22,1,.36,1);
}
.cp-op {
  flex: 1; min-width: 0; padding: 11px 12px; border-radius: 12px;
  background: #0E1110; color: var(--texto);
  border: 1px solid var(--card-borde);
  font-family: inherit; font-weight: 700; font-size: .86rem; cursor: pointer;
  transition:
    background .22s ease,
    border-color .22s ease,
    color .22s ease,
    transform .22s cubic-bezier(.22,1,.36,1),
    box-shadow .22s ease;
}
.cp-op:active:not(:disabled) { transform: scale(.97); }
.cp-op-wide { width: 100%; }
.cp-op.activa {
  background: var(--verde);
  border-color: var(--verde);
  color: #fff;
  box-shadow: 0 6px 18px rgba(93, 143, 39, .28);
  animation: cp-select .32s cubic-bezier(.22,1,.36,1);
}
.cp-op:disabled { opacity: .45; cursor: default; }
@keyframes cp-select {
  0% { transform: scale(.96); }
  55% { transform: scale(1.04); }
  100% { transform: scale(1); }
}
.cp-quien {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
  justify-content: center;
  align-items: center;
  transform-origin: top center;
  animation: cp-quien-abre .28s cubic-bezier(.22,1,.36,1);
}
.cp-quien.oculto { display: none !important; }
@keyframes cp-quien-abre {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to { opacity: 1; transform: none; }
}
.cp-quien button {
  padding: 9px 14px; border-radius: 10px; cursor: pointer; font-family: inherit;
  background: #0E1110; color: var(--texto);
  border: 1px solid var(--card-borde); font-weight: 700; font-size: .84rem;
  transition:
    background .22s ease,
    border-color .22s ease,
    color .22s ease,
    transform .22s cubic-bezier(.22,1,.36,1),
    box-shadow .22s ease;
}
.cp-quien button:active { transform: scale(.96); }
.cp-quien button.elegido {
  background: var(--verde);
  color: #fff;
  border-color: var(--verde);
  box-shadow: 0 6px 16px rgba(93, 143, 39, .26);
  animation: cp-select .32s cubic-bezier(.22,1,.36,1);
}

.popup-sala {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  pointer-events: none;
}
.popup-sala.oculto { display: none !important; }
.popup-sala.abierto,
.popup-sala.cerrando { pointer-events: auto; }
.popup-sala-fondo {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  opacity: 0;
  transition: opacity .22s ease, backdrop-filter .28s ease, -webkit-backdrop-filter .28s ease;
}
.popup-sala.abierto .popup-sala-fondo {
  opacity: 1;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.popup-sala.cerrando .popup-sala-fondo {
  opacity: 0;
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
}
.popup-sala-caja {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 360px;
  max-height: min(86vh, 640px);
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--card-borde);
  border-radius: 18px;
  padding: 16px 16px 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  opacity: 0;
  transform: translateY(12px) scale(.96);
  transition:
    opacity .22s ease,
    transform .28s cubic-bezier(.22,1,.36,1);
}
.popup-sala.abierto .popup-sala-caja {
  opacity: 1;
  transform: none;
}
.popup-sala.cerrando .popup-sala-caja {
  opacity: 0;
  transform: translateY(10px) scale(.97);
  transition-duration: .18s, .2s;
}
.popup-sala-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.popup-sala-cabeza h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--texto);
  text-align: left;
}
.popup-sala-cerrar {
  width: 34px; height: 34px;
  padding: 0;
  border-radius: 10px;
  background: #0E1110;
  color: var(--texto-suave);
  border: 1px solid var(--card-borde);
  font-size: .95rem;
  line-height: 1;
  transition: color .15s, background .15s, transform .15s;
}
.popup-sala-cerrar:hover {
  color: var(--texto);
  background: #171b19;
  filter: none;
}
.popup-sala-cerrar:active { transform: scale(.92); }

.sala-estado {
  margin-top: 16px;
  padding: 12px 14px;
  background: #0E1110;
  border: 1px solid var(--card-borde);
  border-radius: 14px;
  text-align: left;
}
.sala-estado-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  font-size: .84rem;
  font-weight: 700;
  color: #a8b5a4;
}
.sala-estado-cuenta {
  color: var(--verde);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sala-progreso {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
.sala-progreso i {
  display: block;
  height: 5px;
  border-radius: 99px;
  background: #1e2622;
}
.sala-progreso i.lleno { background: var(--verde); }
.btn-empezar-sala {
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  border-radius: 11px;
  font-size: .92rem;
  background: #1a221e;
  color: #8a948c;
  border: 1px solid var(--card-borde);
}
.btn-empezar-sala.listo {
  background: var(--verde);
  color: #fff;
  border-color: var(--verde);
}
.btn-empezar-sala:disabled:not(.listo) {
  background: #1a221e;
  color: #8a948c;
  cursor: default;
}

.caja-sala .btn-volver {
  margin-top: 12px;
  border: none;
  background: transparent;
  color: #6a736d;
  font-weight: 650;
  font-size: .88rem;
}
.caja-sala .btn-volver:hover {
  background: transparent;
  color: var(--texto);
}

.caja-mirones { margin: 10px 0 2px; text-align: left; }
.cm-titulo { font-size: .78rem; font-weight: 800; color: var(--texto-suave); }
.cm-lista { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.cm-lista span {
  background: #0E1110; border: 1px solid var(--card-borde);
  border-radius: 20px; padding: 3px 11px; font-size: .78rem; color: #c9c7c1;
}
.cm-lista span.arreta { border-color: var(--oro); color: #ffe9a8; font-weight: 800; }

/* La barra del que mira, arriba del todo */
.barra-mirando {
  position: absolute; left: 50%; top: 74px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  background: rgba(10,8,6,.85); border: 2px solid rgba(255,255,255,.22);
  border-radius: 24px; padding: 6px 8px 6px 16px;
  color: #f0e6cf; font-weight: 800; font-size: .85rem;
  z-index: 25; white-space: nowrap;
}
.btn-arretar {
  background: linear-gradient(180deg, #d8a01c, #a87608);
  color: #2a1e00; border: 2px solid #ffe08a; border-radius: 20px;
  padding: 7px 16px; font-family: inherit; font-weight: 900; font-size: .82rem;
  cursor: pointer; letter-spacing: .5px;
}
.btn-arretar:hover { filter: brightness(1.12); }
.btn-arretar.puesto { background: linear-gradient(180deg, #2f6d45, #1f4a2f); color: #d6ffe6; border-color: #4fbf7d; }

.relevo-botones { display: flex; gap: 10px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.relevo-botones button {
  padding: 10px 16px; border-radius: 11px; cursor: pointer; font-family: inherit;
  font-weight: 800; font-size: .88rem; border: 2px solid #b8a878;
  background: #f0e8d2; color: #3a2c10;
}
.relevo-reloj { margin-top: 10px; font-size: .82rem; color: #9a6f00; font-weight: 800; }

.oculto { display: none !important; }

/* Los botones y campos sí reciben clicks (el resto del HUD deja pasar al 3D) */
button, input, .panel-fin.visible { pointer-events: auto; }

@media (max-width: 520px) {
  .tanteo .puntos { font-size: 1.6rem; }
  .marquesina h1 { font-size: 1.35rem; }
  .cg-titulo { font-size: 2.2rem; }
  #turno-info { font-size: .9rem; }
}