/* Minijuegos 1v1 — sala compartida, tableros y chat */
.juego-body { min-height: 100vh; background: radial-gradient(1200px 700px at 15% -10%, rgba(239, 120, 120, .18), transparent 60%), var(--fondo); }
.sala-cont { max-width: 1180px; margin: 0 auto; padding: 16px 16px 12px; }
.sala-cab {
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px;
  box-shadow: var(--sombra); padding: 7px 12px; margin-bottom: 10px;
}
/* Cabecera de la sala: el contenedor (#salaCab, más abajo) es una fila flex con
   tres zonas —juego · jugadores · apuesta/turno— y `.sala-cab-top` se disuelve
   con `display: contents`; los hijos son las celdas reales. */
.sala-cab-der { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.sala-cab-top .arcade-cab-jugadores { margin-top: 0; }
.sala-juego { display: block; min-width: 0; font-size: 15px; font-weight: 800; color: var(--azul); line-height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sala-juego > span:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: none;
  font-size: 18px;
  line-height: 1;
  overflow: hidden;
  vertical-align: middle;
  margin-right: 7px;
}
.sala-juego span { font-size: 18px; }
.sala-apuesta { display: inline-flex; align-items: center; gap: 5px; background: var(--oro); color: #fff; border-radius: 999px; padding: 2px 9px; font-weight: 800; font-size: 11.5px; line-height: 1.5; white-space: nowrap; }
.sala-estado { font-size: 12px; color: var(--suave); }
.sala-jugadores { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center; min-width: 0; }
.sala-jugador { display: flex; gap: 8px; align-items: center; border: 1px solid var(--borde); border-radius: 10px; padding: 3px 10px; background: var(--fondo); min-width: 0; min-height: 36px; }
.sala-jugador > div { min-width: 0; }
.sala-jugador.rival { justify-content: flex-end; text-align: right; }
.sala-jugador b { display: block; font-size: 13px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sala-jugador small { color: var(--suave); font-size: 11px; line-height: 1.2; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.sala-jugador .punto-estado { width: 7px; height: 7px; border-radius: 50%; background: var(--suave); display: inline-block; flex: none; }
.sala-jugador .punto-estado.on { background: var(--ok); box-shadow: 0 0 0 3px rgba(27,127,75,.18); }
.sala-vs { font-weight: 900; font-size: 10px; letter-spacing: .08em; color: var(--suave); padding: 2px 7px; border: 1px solid var(--borde); border-radius: 999px; line-height: 1.2; }
.sala-turno { margin-top: 6px; font-weight: 700; font-size: 13.5px; color: var(--azul); }
.sala-cab-der .sala-turno { margin-top: 0; white-space: nowrap; font-size: 12.5px; }
.sala-turno.mio { color: var(--ok); }
.sala-tiempo { font-variant-numeric: tabular-nums; color: var(--mal); font-weight: 800; }
/* En pantallas medianas los jugadores bajan a su propia fila y la cabecera
   queda en dos líneas parejas (juego · apuesta/turno). */
@media (max-width: 920px) {
  #salaCab { justify-content: space-between; }
  .sala-cab-top > .sala-juego { flex: 0 1 auto; }
  .sala-cab-top > .sala-cab-der { flex: 0 1 auto; }
  .sala-cab-top > .sala-jugadores { flex: 0 0 100%; }
}
/* Entre 641 y 920 px los chips ocupan el ancho completo: el contenido se
   centra para que no queden pegados a un borde. */
@media (min-width: 641px) and (max-width: 920px) {
  .sala-cab-top > .sala-jugadores .sala-jugador > div { justify-content: center; }
}
.sala-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: 14px; align-items: start; }
.sala-tablero {
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 16px;
  box-shadow: var(--sombra); padding: 18px; min-height: 380px;
}
.sala-lado { display: grid; gap: 14px; }
.sala-audio {
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 14px; box-shadow: var(--sombra);
  padding: 10px 12px; display: grid; gap: 8px; font-size: 13px;
}
.sala-audio-fila { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sala-audio input[type=range] { flex: 1 1 120px; min-width: 100px; }
.sala-audio .estado { color: var(--suave); }
.sala-chat { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 14px; box-shadow: var(--sombra); display: flex; flex-direction: column; height: 420px; overflow: hidden; }
.sala-chat-cab { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--borde); }
.sala-chat-mensajes { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 7px; }
.sala-msg { max-width: 85%; padding: 7px 10px; border-radius: 12px; background: var(--fondo); font-size: 13.5px; line-height: 1.35; word-break: break-word; }
.sala-msg.mio { align-self: flex-end; background: var(--azul-claro); color: var(--azul); }
.sala-msg small { display: block; font-size: 10.5px; opacity: .65; margin-bottom: 2px; }
.sala-chat-form { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--borde); }
.sala-chat-form input { flex: 1; min-width: 0; border: 1px solid var(--borde); border-radius: 10px; padding: 9px 10px; font: inherit; background: var(--tarjeta); color: var(--texto); }
/* ---------- Juegos de la plataforma (acceso rápido desde la sala) ---------- */
.sala-juegos {
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 14px; box-shadow: var(--sombra);
  padding: 10px 12px 12px; display: grid; gap: 9px;
}
/* La lista scrollea sola: la ventana no baja por su culpa. */
@media (min-width: 861px) {
  .sala-juegos { grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
  .sala-juegos-lista {
    max-height: calc(100vh - 250px); overflow-y: auto; overscroll-behavior: contain;
    padding-right: 4px; scrollbar-width: thin;
  }
}
.sala-juegos-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; justify-content: space-between; }
.sala-juegos-cab b { font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.sala-juegos-num {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 6px;
  border-radius: 999px; background: var(--perfil-accent, var(--oro)); color: var(--perfil-acento-texto, #111827);
  font-size: 11.5px; font-weight: 800; line-height: 1;
}
.sala-juegos-cab small { font-size: 11.5px; line-height: 1.3; }
.sala-juegos-lista { display: grid; gap: 6px; }
.sala-juego-item {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; align-items: center;
  width: 100%; padding: 7px 9px; border: 1px solid var(--borde); border-radius: 11px;
  background: var(--fondo); color: var(--texto); font: inherit; text-align: left; cursor: pointer;
  transition: border-color .15s, transform .1s, box-shadow .15s;
}
.sala-juego-item:hover:not(:disabled) { border-color: var(--oro); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(239, 120, 120, .16); }
/* Iconos y textos acotados: los emojis anchos (✌️, 🃏) no deben pisar el nombre */
.sala-juego-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  font-size: 18px;
  line-height: 1;
  overflow: hidden;
  border-radius: 8px;
}
.sala-juego-txt { display: grid; gap: 1px; min-width: 0; }
.sala-juego-txt b,
.sala-juego-txt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sala-juego-accion { white-space: nowrap; }
.sala-juego-item:disabled { cursor: default; opacity: .6; }
.sala-juego-item.actual { border-color: var(--ok); background: var(--ok-claro); opacity: 1; }
.sala-juego-icono { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--azul-claro); font-size: 17px; }
.sala-juego-txt { min-width: 0; display: grid; gap: 1px; }
.sala-juego-txt b { font-size: 13px; line-height: 1.2; }
.sala-juego-txt small {
  font-size: 10.5px; color: var(--suave); line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sala-juego-accion {
  font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  color: var(--azul); background: var(--azul-claro); border-radius: 999px; padding: 3px 8px;
}
.sala-juego-item.actual .sala-juego-accion { color: var(--ok); background: rgba(27,127,75,.16); }
/* Tateti */
.tateti { display: grid; grid-template-columns: repeat(3, minmax(78px, 1fr)); gap: 8px; max-width: 430px; margin: 10px auto; }
.tateti-celda {
  aspect-ratio: 1; font-size: clamp(34px, 7vw, 62px); font-weight: 900;
  border: 2px solid var(--borde); border-radius: 14px; background: var(--fondo); color: var(--azul);
  cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .08s, border-color .15s;
}
.tateti-celda:hover:not(:disabled) { border-color: var(--oro); transform: translateY(-1px); }
.tateti-celda:disabled { cursor: default; opacity: .92; }
.tateti-celda.x { color: var(--azul); }
.tateti-celda.o { color: var(--mal); }
.tateti-celda.ganadora { background: var(--ok-claro); border-color: var(--ok); }
/* PPT */
.ppt { display: grid; grid-template-columns: repeat(3, minmax(90px, 1fr)); gap: 10px; max-width: 520px; margin: 12px auto; }
.ppt-btn {
  border: 2px solid var(--borde); border-radius: 16px; background: var(--fondo); padding: 18px 8px;
  font-size: 42px; cursor: pointer; color: var(--texto); transition: transform .08s, border-color .15s;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  line-height: 1; min-width: 0; overflow: hidden;
}
.ppt-btn small {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height: 1.15;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.ppt-btn:hover:not(:disabled) { border-color: var(--oro); transform: translateY(-2px); }
.ppt-btn:disabled { cursor: default; opacity: .55; }
.ppt-btn.sel { border-color: var(--oro); background: var(--aviso-claro); opacity: 1; }
.ppt-reveal { display: flex; gap: 18px; justify-content: center; align-items: center; margin: 14px 0; font-size: 15px; }
.ppt-reveal span { font-size: 42px; }
/* Dados */
.dados { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; align-items: center; margin: 16px 0; }
.dado {
  width: 64px; height: 64px; border-radius: 14px; background: #fff; color: #111;
  border: 2px solid var(--borde); display: flex; align-items: center; justify-content: center;
  font-size: 34px; font-weight: 900; box-shadow: inset 0 -4px 0 rgba(0,0,0,.08);
}
.dado.small { width: 44px; height: 44px; font-size: 24px; }
.dado-tirada { display: flex; gap: 8px; align-items: center; }
.puntaje { display: flex; gap: 8px; justify-content: center; align-items: center; font-size: 18px; font-weight: 800; }
.puntaje .chip { font-size: 14px; }
/* Resultado */
.sala-resultado { text-align: center; padding: 22px 12px; }
.sala-resultado .emoji { font-size: 60px; line-height: 1; }
.sala-resultado h2 { margin: 10px 0 4px; }
.sala-resultado p { color: var(--suave); }
.sala-acciones { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.sala-espera { text-align: center; padding: 28px 12px; }
.sala-espera .reloj { font-size: 48px; font-weight: 900; color: var(--oro-osc); font-variant-numeric: tabular-nums; }
.sala-espera p { color: var(--suave); }
@media (max-width: 860px) {
  .sala-grid { grid-template-columns: 1fr; }
  .sala-chat { height: 320px; }
  .sala-jugadores { grid-template-columns: 1fr auto 1fr; gap: 6px; }
  .sala-jugador { padding: 8px; }
  .sala-jugador small { font-size: 11px; }
}
@media (max-width: 520px) {
  .sala-cont { padding: 10px 10px 30px; }
  .sala-tablero { padding: 12px; }
  .tateti { gap: 6px; }
  .ppt { gap: 6px; }
  .ppt-btn { font-size: 34px; padding: 12px 4px; }
  .sala-jugadores { grid-template-columns: 1fr; }
  .sala-jugador.rival { justify-content: flex-start; text-align: left; }
  .sala-vs { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tateti-celda, .ppt-btn { transition: none; }
}

/* ---------- Saldo y SFX ---------- */
.sala-saldo {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--borde); background: var(--tarjeta); color: var(--texto);
  border-radius: 999px; padding: 4px 10px; font-size: 13px; font-weight: 700;
}
.sala-saldo b { font-variant-numeric: tabular-nums; }

/* ---------- Tateti: pop y línea de neón ---------- */
.tateti-wrap { position: relative; max-width: 430px; margin: 10px auto; }
.tateti-wrap .tateti { max-width: none; margin: 0; }
.tateti-celda.pop { animation: marca-pop .34s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes marca-pop {
  from { transform: scale(.2) rotate(-8deg); opacity: .15; }
  60% { transform: scale(1.12) rotate(2deg); opacity: 1; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}
.tateti-neon { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.tateti-neon line {
  stroke: #39ff14; stroke-width: .045; stroke-linecap: round;
  filter: drop-shadow(0 0 2px #39ff14) drop-shadow(0 0 7px rgba(57,255,20,.9));
  animation: neon-draw .55s ease-out both;
}
@keyframes neon-draw { from { opacity: 0; stroke-dasharray: 0 6; } to { opacity: 1; stroke-dasharray: 6 0; } }
.chispa {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: #39ff14; box-shadow: 0 0 10px #39ff14; pointer-events: none;
  animation: chispa-vuela .9s ease-out forwards;
}
@keyframes chispa-vuela {
  from { transform: translate(0, 0) scale(1); opacity: 1; }
  to { transform: translate(var(--dx), var(--dy)) scale(.1); opacity: 0; }
}

/* ---------- PPT: canto y choque ---------- */
.ppt-anim { text-align: center; padding: 26px 10px; }
.ppt-manos { display: flex; justify-content: center; gap: clamp(30px, 10vw, 80px); font-size: clamp(48px, 12vw, 82px); }
.ppt-manos .mano { display: inline-block; transform-origin: 50% 100%; animation: mano-bounce .36s ease-in-out 3; }
.ppt-manos .mano.der { animation-delay: .12s; }
@keyframes mano-bounce {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-28px) rotate(-10deg); }
}
.ppt-canto { font-size: clamp(16px, 4vw, 22px); font-weight: 800; color: var(--oro-osc); margin-top: 14px; letter-spacing: .01em; }
.ppt-reveal.flash { animation: flash-impacto .42s ease-out; }
@keyframes flash-impacto { 0% { filter: brightness(2.4) saturate(1.4); } 100% { filter: brightness(1) saturate(1); } }
.mano-reveal { font-size: clamp(42px, 10vw, 60px); transition: transform .2s; }
.mano-reveal.gana { transform: scale(1.18); filter: drop-shadow(0 0 14px #ef7878); }

/* ---------- Dados: rodada 3D ---------- */
.dado { transition: transform .15s, box-shadow .2s; }
.dado.rolling { animation: dado-roll .75s cubic-bezier(.2, .7, .3, 1); }
@keyframes dado-roll {
  0% { transform: rotate(0) translateY(0); }
  25% { transform: rotate(160deg) translateY(-16px); }
  50% { transform: rotate(320deg) translateY(0); }
  75% { transform: rotate(480deg) translateY(-9px); }
  100% { transform: rotate(720deg) translateY(0); }
}
.mesa-rodando .dado-tirada { filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .28)); }

/* ---------- Penalito ---------- */
.penal-marcador { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; margin: 6px 0 10px; }
.penal-marcador-lado { border: 1px solid var(--borde); border-radius: 12px; padding: 8px 10px; text-align: center; background: var(--fondo); }
.penal-marcador-lado b { font-size: 13px; }
.penal-marcador-lado small { display: block; color: var(--suave); font-size: 11px; }
.penal-marcas { font-size: 17px; line-height: 1.5; min-height: 26px; letter-spacing: 1px; }
.marca-gol { color: #1b7f4b; filter: drop-shadow(0 0 4px rgba(57,255,20,.4)); }
.marca-atajada { color: #b3261e; }
.penal-vs { font-size: 26px; }
.penal-escena {
  position: relative; height: clamp(260px, 38vw, 340px); border-radius: 18px; overflow: hidden;
  background: linear-gradient(#0b2a4a 0%, #14532d 46%, #2e7d32 100%);
  box-shadow: inset 0 -24px 50px rgba(0,0,0,.25);
  perspective: 900px;
}
.penal-cielo { position: absolute; inset: 0 0 46% 0; background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,.16), transparent 65%); }
.penal-arco {
  position: absolute; left: 50%; top: 11%; width: 78%; height: 54%; transform: translateX(-50%);
  border: 7px solid #f5f7fa; border-bottom: 0; border-radius: 8px 8px 0 0;
  box-shadow: 0 0 18px rgba(255,255,255,.3), inset 0 0 22px rgba(0,0,0,.18);
}
.penal-red {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 11px, rgba(255,255,255,.25) 11px 12px),
    repeating-linear-gradient(90deg, transparent 0 11px, rgba(255,255,255,.22) 11px 12px);
  opacity: .9;
}
.penal-poste { position: absolute; top: -7px; bottom: -2px; width: 7px; background: #f5f7fa; border-radius: 4px; box-shadow: 0 0 10px rgba(255,255,255,.4); }
.penal-poste.pi { left: -7px; }
.penal-poste.pd { right: -7px; }
.penal-travesano { position: absolute; left: -7px; right: -7px; top: -7px; height: 7px; background: #f5f7fa; border-radius: 4px; }
.penal-arquero {
  position: absolute; left: 50%; bottom: 16%; width: 58px; height: 96px; transform: translateX(-50%);
  transition: left .55s cubic-bezier(.2,.8,.2,1), transform .55s cubic-bezier(.2,.8,.2,1);
  z-index: 3;
}
.penal-arquero .cabeza { position: absolute; left: 50%; top: 0; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #f2c9a0; box-shadow: 0 2px 4px rgba(0,0,0,.3); }
.penal-arquero .cuerpo { position: absolute; left: 50%; top: 17px; width: 26px; height: 40px; margin-left: -13px; border-radius: 10px 10px 6px 6px; background: linear-gradient(#ef7878, #d45050); }
.penal-arquero .brazo { position: absolute; top: 22px; width: 30px; height: 9px; border-radius: 8px; background: #f2c9a0; transform-origin: 50% 50%; }
.penal-arquero .brazo.i { left: -22px; transform: rotate(-24deg); }
.penal-arquero .brazo.d { right: -22px; transform: rotate(24deg); }
.penal-arquero.tirar-izquierda { left: 21%; transform: translateX(-50%) rotate(-26deg) translateY(-6px) scale(1.05); }
.penal-arquero.tirar-derecha { left: 79%; transform: translateX(-50%) rotate(26deg) translateY(-6px) scale(1.05); }
.penal-balon {
  position: absolute; left: 50%; bottom: 7%; width: 46px; height: 46px; margin-left: -23px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff 0 45%, #d7dbe0 46% 70%, #9aa3ad 71% 100%);
  border: 2px solid #222; box-shadow: 0 10px 18px rgba(0,0,0,.35), inset -4px -5px 8px rgba(0,0,0,.18);
  z-index: 4;
}
.penal-balon span {
  position: absolute; left: 50%; top: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px;
  background: #1d232b; clip-path: polygon(50% 0%, 100% 38%, 81% 100%, 19% 100%, 0% 38%);
}
.penal-balon.chutar-izquierda { animation: balon-izq .58s cubic-bezier(.2,.7,.3,1) forwards; }
.penal-balon.chutar-derecha { animation: balon-der .58s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes balon-izq {
  0% { left: 50%; bottom: 7%; transform: rotate(0) scale(1); }
  45% { left: 32%; bottom: 40%; transform: rotate(-110deg) scale(.9); }
  100% { left: 21%; bottom: 57%; transform: rotate(-240deg) scale(.78); }
}
@keyframes balon-der {
  0% { left: 50%; bottom: 7%; transform: rotate(0) scale(1); }
  45% { left: 68%; bottom: 40%; transform: rotate(110deg) scale(.9); }
  100% { left: 79%; bottom: 57%; transform: rotate(240deg) scale(.78); }
}
.penal-escena.lado-izq .penal-estela { animation: estela-izq .55s ease-out forwards; }
.penal-escena.lado-der .penal-estela { animation: estela-der .55s ease-out forwards; }
.penal-estela { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.85); opacity: 0; z-index: 2; }
.penal-estela.e1 { left: 44%; bottom: 20%; animation-delay: .03s; }
.penal-estela.e2 { left: 38%; bottom: 33%; animation-delay: .09s; }
.penal-estela.e3 { left: 30%; bottom: 46%; animation-delay: .15s; }
@keyframes estela-izq {
  0% { opacity: 0; transform: scale(.5); }
  30% { opacity: .9; }
  100% { opacity: 0; transform: translate(-26px, 22px) scale(.2); }
}
@keyframes estela-der {
  0% { opacity: 0; transform: scale(.5); }
  30% { opacity: .9; }
  100% { opacity: 0; transform: translate(96px, 22px) scale(.2); }
}
.penal-escena.anim-atajada { animation: sacudida .42s .08s; }
@keyframes sacudida {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(4px); }
}
.penal-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: clamp(34px, 9vw, 82px); font-weight: 900; color: #fff; text-align: center; padding: 0 10px;
  text-shadow: 0 4px 0 rgba(0,0,0,.35), 0 0 24px rgba(255,255,255,.35);
  z-index: 6; animation: grito .5s cubic-bezier(.2,1.6,.4,1) both;
}
.penal-overlay.gol { color: #39ff14; }
.penal-overlay.atajada { color: #ff4d6d; }
@keyframes grito {
  from { transform: scale(.35) rotate(-6deg); opacity: 0; }
  60% { transform: scale(1.12) rotate(2deg); opacity: 1; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}
.penal-prompt { text-align: center; font-weight: 700; margin: 10px 0 0; }
.penal-prompt.delantero { color: var(--azul); }
.penal-prompt.arquero { color: var(--oro-osc); }
.penal-controles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 540px; margin: 10px auto 0; }
.penal-btn {
  font: inherit; font-size: clamp(14px, 3.6vw, 17px); font-weight: 800; padding: 14px 8px;
  border-radius: 14px; border: 2px solid var(--borde); background: var(--fondo); color: var(--texto); cursor: pointer;
  transition: transform .08s, border-color .15s;
}
.penal-btn:hover:not(:disabled) { border-color: var(--oro); transform: translateY(-1px); }
.penal-btn:disabled { opacity: .55; cursor: default; }

/* ---------- Cierre de partida ---------- */
.sala-resultado.perdio .emoji, .sala-resultado.perdio h2, .sala-resultado.perdio p { filter: grayscale(.9); }
.sala-resultado.perdio h2 { color: var(--suave); }
.sala-tateti-final { margin-top: -4px; }
.sala-tateti-final .sala-resultado { padding-top: 10px; }
.confetti-capa { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; }
.confeti {
  position: absolute; top: -14px; width: 9px; height: 14px; opacity: .95; border-radius: 2px;
  animation-name: confeti-cae; animation-timing-function: linear; animation-fill-mode: forwards;
}
@keyframes confeti-cae {
  to { transform: translateY(110vh) rotate(var(--giro)); opacity: .15; }
}
.gema-vuela {
  position: fixed; z-index: 10000; font-size: 24px; pointer-events: none;
  animation: gema-viaja 1.1s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes gema-viaja {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(.35); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tateti-celda.pop, .tateti-neon line, .chispa, .ppt-manos .mano, .ppt-reveal.flash,
  .dado.rolling, .penal-balon, .penal-escena.anim-atajada, .penal-overlay,
  .penal-estela, .confeti, .gema-vuela { animation: none !important; }
}

/* ---------- Desactiva la Bomba ---------- */
.bomba-marcador { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; margin: 0 auto 6px; max-width: 720px; }
.bomba-marcador-lado { border: 1px solid var(--borde); border-radius: 12px; padding: 5px 9px; text-align: center; background: var(--fondo); }
.bomba-marcador-lado b { font-size: 12.5px; }
.bomba-marcador-lado small { display: block; color: var(--suave); font-size: 11px; line-height: 1.2; }
.bomba-iconos { font-size: 17px; line-height: 1.3; min-height: 22px; letter-spacing: 1px; }
.bomba-icono.logrado { filter: drop-shadow(0 0 6px rgba(255, 80, 40, .95)); }
.bomba-icono.pendiente { opacity: .2; filter: grayscale(1); }
.bomba-vs { display: grid; justify-items: center; gap: 1px; font-size: 22px; line-height: 1; }
.bomba-vs small { font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8793a2; }
.bomba-escena {
  position: relative; min-height: 330px; border-radius: 18px; overflow: hidden;
  background: radial-gradient(circle at 50% 18%, #243447, #0b111b 70%);
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: inset 0 -24px 60px rgba(0, 0, 0, .55);
}
.bomba-led {
  margin: 8px 0 6px; font-family: var(--mono); font-size: clamp(34px, 8vw, 52px); font-weight: 900;
  color: #ff3b30; letter-spacing: .04em; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 8px rgba(255, 59, 48, .9), 0 0 24px rgba(255, 59, 48, .4);
}
.bomba-led.safe { color: #39ff14; text-shadow: 0 0 10px rgba(57, 255, 20, .9); }
.bomba-led.boom { color: #ffb020; text-shadow: 0 0 14px rgba(255, 176, 32, 1); }
.bomba-luces { display: flex; gap: 6px; margin-bottom: 8px; }
.bomba-luces span { width: 8px; height: 8px; border-radius: 50%; background: #641b18; box-shadow: inset 0 0 3px #000; }
.bomba-luces span.verde { background: #39ff14; animation: luz-verde .7s ease-in-out infinite alternate; }
@keyframes luz-verde { from { opacity: .35; transform: scale(.9); } to { opacity: 1; transform: scale(1.15); } }
.bomba-progreso { height: 6px; border-radius: 4px; background: #0a0d12; overflow: hidden; }
.bomba-progreso span { display: block; height: 100%; background: linear-gradient(90deg, #39ff14, #ffb020, #ff3b30); transition: width .35s linear; }
.bomba-progreso span.urgente { animation: pulso-barra .4s infinite alternate; }
@keyframes pulso-barra { from { filter: brightness(1); } to { filter: brightness(1.7); } }
.bomba-cables { display: flex; justify-content: center; gap: clamp(10px, 4vw, 30px); margin: 18px auto 0; max-width: 520px; padding: 0 12px; }
.bomba-cable {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px;
  width: clamp(78px, 22vw, 120px); border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px;
  padding: 8px 6px 10px; background: rgba(255, 255, 255, .04); color: #fff; cursor: pointer;
  font: inherit; transition: transform .08s, background .15s;
}
.bomba-cable:hover:not(:disabled) { background: rgba(255, 255, 255, .10); transform: translateY(-2px); }
.bomba-cable:disabled { cursor: default; }
.bomba-cable .borne { width: 26px; height: 10px; border-radius: 3px; background: linear-gradient(#d9dde3, #7d858f); box-shadow: 0 1px 2px #000; }
.bomba-cable .cable-hilo {
  width: 14px; height: 64px; border-radius: 8px; background: currentColor;
  box-shadow: inset -3px 0 5px rgba(0, 0, 0, .35), 0 0 10px currentColor;
  transition: height .25s, opacity .25s;
}
.bomba-cable.rojo { color: #ff3b30; }
.bomba-cable.azul { color: #2f7bff; }
.bomba-cable.amarillo { color: #ffd60a; }
.bomba-cable.cortado .cable-hilo { height: 24px; opacity: .45; box-shadow: none; }
.bomba-cable.cortado .cable-hilo::after {
  content: ''; position: absolute; left: 50%; top: 36%; width: 10px; height: 2px;
  background: #fff; transform: translateX(-50%) rotate(-18deg); opacity: .7;
}
.bomba-cable.trampa .cable-hilo { box-shadow: 0 0 16px #ff3b30, 0 0 30px #ff3b30; }
.bomba-cable.marcada { outline: 2px solid #ffd60a; outline-offset: 2px; }
.bomba-cable .cable-nombre { font-size: 12px; font-weight: 700; color: #d8dee8; }
.bomba-cable .chispa-cable { position: absolute; right: 4px; top: 4px; font-size: 15px; filter: drop-shadow(0 0 4px #ffd60a); }
.bomba-alicate {
  position: absolute; right: 16%; bottom: 18%; font-size: 30px; opacity: .2;
  transform: rotate(-18deg); pointer-events: none; transition: opacity .2s, transform .2s;
}
.bomba-alicate.activo { opacity: 1; animation: tijera .5s ease-in-out infinite alternate; }
@keyframes tijera { from { transform: rotate(-18deg) translateY(0); } to { transform: rotate(-10deg) translateY(-4px); } }
.bomba-escena.explota { animation: sacudida-fuerte .55s; }
@keyframes sacudida-fuerte {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-12px, 6px) rotate(-1deg); }
  20% { transform: translate(14px, -8px) rotate(1deg); }
  30% { transform: translate(-10px, -6px); }
  40% { transform: translate(9px, 7px); }
  50% { transform: translate(-7px, 4px); }
  60% { transform: translate(5px, -3px); }
  80% { transform: translate(-3px, 2px); }
}
.bomba-humo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 4; }
.bomba-humo span {
  position: absolute; bottom: 22%; width: 70px; height: 70px; border-radius: 50%;
  background: radial-gradient(circle, rgba(210, 210, 210, .7), rgba(80, 80, 80, .1));
  filter: blur(6px); animation: humo .9s ease-out forwards;
}
.bomba-humo span:nth-child(1) { left: 30%; animation-delay: 0s; }
.bomba-humo span:nth-child(2) { left: 45%; animation-delay: .08s; }
.bomba-humo span:nth-child(3) { left: 58%; animation-delay: .16s; }
.bomba-humo span:nth-child(4) { left: 38%; animation-delay: .24s; }
.bomba-humo span:nth-child(5) { left: 52%; animation-delay: .32s; }
@keyframes humo { from { opacity: .9; transform: translateY(0) scale(.6); } to { opacity: 0; transform: translateY(-120px) scale(1.6); } }
.bomba-escena.safe { box-shadow: inset 0 0 60px rgba(57, 255, 20, .25); }
.bomba-vapor { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.bomba-vapor span {
  position: absolute; bottom: 30%; width: 60px; height: 60px; border-radius: 50%;
  background: radial-gradient(circle, rgba(220, 255, 220, .55), transparent 70%);
  filter: blur(7px); animation: vapor 1.2s ease-out forwards;
}
.bomba-vapor span:nth-child(1) { left: 35%; }
.bomba-vapor span:nth-child(2) { left: 48%; animation-delay: .12s; }
.bomba-vapor span:nth-child(3) { left: 60%; animation-delay: .24s; }
@keyframes vapor { from { opacity: .8; transform: translateY(10px) scale(.6); } to { opacity: 0; transform: translateY(-90px) scale(1.4); } }
.bomba-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: clamp(34px, 9vw, 84px); text-align: center; z-index: 6; pointer-events: none;
  animation: grito .5s cubic-bezier(.2, 1.6, .4, 1) both;
}
.bomba-overlay.explota { color: #ffd060; text-shadow: 0 0 24px #ff3b30, 0 4px 0 #5b0d00; }
.bomba-overlay.safe { color: #39ff14; text-shadow: 0 0 22px rgba(57, 255, 20, .8); }
.bomba-prompt { text-align: center; font-weight: 700; margin: 10px 0 0; }
.bomba-prompt.plantador { color: var(--azul); }
.bomba-prompt.desactivador { color: var(--oro-osc); }
.bomba-prompt.mal { color: var(--mal); }
.bomba-prompt.ok { color: var(--ok); }
@media (max-width: 520px) {
  .bomba-cable { width: 28%; }
  .bomba-cable .cable-hilo { height: 48px; }
  .bomba-alicate { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bomba-escena.explota, .bomba-humo span, .bomba-vapor span,
  .bomba-luces span.verde, .bomba-overlay, .bomba-alicate.activo { animation: none !important; }
}

/* =====================================================================
   PREMIUM ARCADE — profundidad, iluminación y partículas CSS
   ===================================================================== */
.juego-body { overflow-x: hidden; }
.juego-body .sala-tablero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 340px at 50% -12%, rgba(77,171,255,.13), transparent 65%),
    radial-gradient(700px 320px at 100% 108%, rgba(239, 120, 120, .09), transparent 65%),
    linear-gradient(180deg, #101a2b 0%, #0a1220 100%);
  border-color: rgba(255,255,255,.11);
  box-shadow: 0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.07);
}
.juego-body button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.tateti-celda, .ppt-btn, .penal-btn, .bomba-cable { -webkit-user-select: none; user-select: none; }

/* ---------- Tateti neón ---------- */
.tateti-wrap { max-width: 460px; }
.tateti {
  gap: 9px; padding: 9px; border-radius: 22px;
  background:
    radial-gradient(circle at 50% 0%, rgba(57,255,20,.12), transparent 62%),
    linear-gradient(145deg, #0a1d17, #06110e 62%, #030807);
  border: 1px solid rgba(57,255,20,.24);
  box-shadow: 0 18px 40px rgba(0,0,0,.55), inset 0 0 30px rgba(57,255,20,.07), 0 0 0 1px rgba(0,0,0,.55);
}
.tateti-celda {
  position: relative; overflow: hidden; border: 2px solid rgba(57,255,20,.22); border-radius: 16px;
  background: radial-gradient(circle at 50% 30%, rgba(57,255,20,.08), rgba(0,0,0,.18) 72%), #07130f;
  box-shadow: inset 0 0 16px rgba(0,0,0,.75), inset 0 0 22px rgba(57,255,20,.04), 0 4px 10px rgba(0,0,0,.35);
  color: #39ff14;
}
.tateti-celda::after {
  content: ''; position: absolute; inset: 6%; border-radius: 12px;
  border: 1px solid rgba(57,255,20,.06); pointer-events: none;
}
.tateti-celda:hover:not(:disabled) {
  border-color: rgba(57,255,20,.7);
  box-shadow: 0 0 20px rgba(57,255,20,.35), inset 0 0 20px rgba(57,255,20,.12);
}
.tateti-celda.x { color: #39ff14; }
.tateti-celda.o { color: #ff4d6d; border-color: rgba(255,77,109,.26); }
.tateti-celda.o:hover:not(:disabled) { border-color: rgba(255,77,109,.8); box-shadow: 0 0 20px rgba(255,77,109,.35), inset 0 0 20px rgba(255,77,109,.12); }
.tateti-celda.ganadora {
  border-color: #39ff14; background: radial-gradient(circle at 50% 40%, rgba(57,255,20,.24), rgba(4,18,10,.9) 72%);
  box-shadow: 0 0 30px rgba(57,255,20,.55), inset 0 0 26px rgba(57,255,20,.22);
}
.tateti-trazo { width: 72%; height: 72%; overflow: visible; filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 12px currentColor); }
.tateti-trazo line, .tateti-trazo circle {
  fill: none; stroke: currentColor; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100; stroke-dashoffset: 100; animation: trazo-neon .42s cubic-bezier(.2,.8,.2,1) forwards;
}
.tateti-trazo.o circle { stroke-width: 8; }
.tateti-trazo .t2 { animation-delay: .13s; }
@keyframes trazo-neon { to { stroke-dashoffset: 0; } }
.tateti-neon line {
  stroke-width: .075;
  stroke: #d7ffb0;
  filter: drop-shadow(0 0 2px #39ff14) drop-shadow(0 0 8px #39ff14) drop-shadow(0 0 18px rgba(57,255,20,.9));
}
.chispa { background: var(--color, #39ff14); box-shadow: 0 0 10px var(--color, #39ff14), 0 0 18px var(--color, #39ff14); }

/* ---------- PPT cartas doradas y shockwave ---------- */
.ppt { max-width: 540px; }
.ppt-btn {
  position: relative; overflow: hidden; border: 2px solid #c6972c; border-radius: 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,215,0,.16), transparent 56%),
    linear-gradient(145deg, #2a2417, #15110a 62%, #0b0804);
  box-shadow: 0 8px 0 #5a3d0a, 0 14px 28px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,235,160,.25);
}
.ppt-btn::before {
  content: ''; position: absolute; inset: -45% -20%; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.18) 48%, transparent 61%);
  transform: translateX(-70%) rotate(8deg); transition: transform .55s;
}
.ppt-btn:hover:not(:disabled)::before { transform: translateX(70%) rotate(8deg); }
.ppt-btn:hover:not(:disabled) {
  transform: translateY(-4px); border-color: #ffd166;
  box-shadow: 0 12px 0 #5a3d0a, 0 20px 32px rgba(0,0,0,.5), 0 0 24px rgba(255,209,102,.25);
}
.ppt-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 4px 0 #5a3d0a, 0 8px 18px rgba(0,0,0,.45); }
.ppt-btn.sel {
  border-color: #ffd166;
  box-shadow: 0 0 0 2px rgba(255,209,102,.35) inset, 0 0 28px rgba(255,209,102,.3), 0 8px 0 #5a3d0a;
}
.ppt-btn small { color: #f5dfa0; text-transform: uppercase; letter-spacing: .12em; }
.ppt-reveal { position: relative; min-height: 96px; gap: 26px; }
.ppt-shockwave {
  position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px;
  border-radius: 50%; border: 3px solid rgba(255,209,102,.9);
  box-shadow: 0 0 24px rgba(255,209,102,.8), inset 0 0 20px rgba(255,209,102,.4);
  pointer-events: none; animation: ppt-shockwave .7s ease-out forwards;
}
@keyframes ppt-shockwave { from { transform: scale(.2); opacity: 1; } to { transform: scale(9); opacity: 0; } }
.mano-reveal.izq { animation: ppt-choque-izq .52s cubic-bezier(.2,1.5,.4,1) both; }
.mano-reveal.der { animation: ppt-choque-der .52s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes ppt-choque-izq { from { transform: translateX(72px) scale(.6) rotate(12deg); opacity: .35; } to { transform: translateX(0) scale(1) rotate(0); opacity: 1; } }
@keyframes ppt-choque-der { from { transform: translateX(-72px) scale(.6) rotate(-12deg); opacity: .35; } to { transform: translateX(0) scale(1) rotate(0); opacity: 1; } }
.mano-reveal.gana { filter: drop-shadow(0 0 18px #ffd166) drop-shadow(0 0 34px rgba(255,209,102,.5)); }

/* ---------- Dados: paño verde, pips y giro 3D ---------- */
.dados {
  position: relative; padding: 36px 20px 26px; border-radius: 26px;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(80,220,140,.22), transparent 62%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.018) 0 2px, transparent 2px 7px),
    radial-gradient(ellipse at 50% 30%, #1d7a4a, #0d4a2b 58%, #062416 100%);
  border: 8px solid #4a2c16;
  box-shadow: inset 0 0 50px rgba(0,0,0,.55), inset 0 0 0 2px rgba(255,255,255,.06), 0 20px 40px rgba(0,0,0,.45);
  overflow: hidden;
}
.dado {
  position: relative; width: 70px; height: 70px; padding: 8px; border-radius: 14px;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 4px;
  background: linear-gradient(145deg, #fffef7 0%, #ece5d4 58%, #cbc1ab 100%);
  border: 1px solid #b8ae97;
  box-shadow: inset 0 2px 1px #fff, inset 0 -7px 12px rgba(0,0,0,.18), 0 8px 0 #8f846e, 0 14px 24px rgba(0,0,0,.45);
  transform-style: preserve-3d;
}
.dado.small { width: 58px; height: 58px; padding: 7px; gap: 3px; }
.dado > i { display: block; border-radius: 50%; }
.dado .pip {
  width: 9px; height: 9px; align-self: center; justify-self: center;
  background: radial-gradient(circle at 35% 30%, #4a4a4a, #050505 70%);
  box-shadow: inset 0 1px 2px #000, 0 1px 1px rgba(255,255,255,.75);
}
.dado.small .pip { width: 8px; height: 8px; }
.dado::after {
  content: ''; position: absolute; left: 12%; right: 12%; bottom: -16px; height: 10px;
  border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,.6), transparent 72%);
  filter: blur(2px); pointer-events: none;
}
.dado.rolling { animation: dado-3d .8s cubic-bezier(.2,.7,.3,1); }
.dado.rolling::after { animation: dado-sombra .8s cubic-bezier(.2,.7,.3,1); }
@keyframes dado-3d {
  0% { transform: translateY(0) rotateX(0) rotateY(0) rotateZ(0) scale(1); }
  20% { transform: translateY(-30px) rotateX(180deg) rotateY(120deg) rotateZ(40deg) scale(1.08); }
  45% { transform: translateY(-5px) rotateX(360deg) rotateY(300deg) rotateZ(100deg) scale(.96); }
  62% { transform: translateY(-18px) rotateX(520deg) rotateY(470deg) rotateZ(160deg) scale(1.04); }
  82% { transform: translateY(0) rotateX(700deg) rotateY(670deg) rotateZ(200deg) scale(.98); }
  100% { transform: translateY(0) rotateX(720deg) rotateY(720deg) rotateZ(360deg) scale(1); }
}
@keyframes dado-sombra {
  0%, 100% { transform: scale(1); opacity: .75; }
  30% { transform: scale(.55); opacity: .35; }
  55% { transform: scale(1.25); opacity: .9; }
  80% { transform: scale(.8); opacity: .5; }
}
.dados .dado-tirada { position: relative; z-index: 2; }

/* ---------- Penalito: estadio, TV y transmisión ---------- */
.penal-titulo { text-align: center; margin: 0 0 8px; font-size: clamp(20px, 4vw, 28px); letter-spacing: .01em; }
.penal-titulo span { display: block; font-size: 9px; letter-spacing: .24em; color: #ff4d6d; text-shadow: 0 0 10px rgba(255,77,109,.7); }
.penal-tv {
  position: relative; overflow: hidden; padding: 19px 14px 9px; border-radius: 14px;
  background: linear-gradient(180deg, #1b2330 0%, #0e131b 58%, #080b10 100%);
  border: 1px solid #3b4655;
  box-shadow: 0 10px 24px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.16);
}
.penal-tv::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.16) 3px 4px);
  opacity: .45;
}
.penal-tv-fila { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.penal-tv-equipo { display: flex; gap: 8px; align-items: center; min-width: 0; }
.penal-tv-equipo.rival { justify-content: flex-end; text-align: right; }
.penal-tv-equipo b { display: block; font-size: 12px; color: #fff; }
.penal-tv-equipo small { display: block; color: #8fa0b5; font-size: 10px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.penal-avatar {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; color: #fff; border: 2px solid #ef7878;
  background: radial-gradient(circle at 35% 28%, #9fd4ff, #2563a8 48%, #ef7878);
  box-shadow: 0 0 12px rgba(239, 120, 120, .45), inset 0 1px 1px rgba(255,255,255,.5);
}
.penal-avatar.rival { border-color: #ff4d6d; background: radial-gradient(circle at 35% 28%, #ffd0d8, #b3261e 48%, #3d0709); box-shadow: 0 0 12px rgba(255,77,109,.45), inset 0 1px 1px rgba(255,255,255,.5); }
.penal-tv-score { font-size: clamp(26px, 5vw, 36px); font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; line-height: 1; text-shadow: 0 0 14px rgba(77,171,255,.9), 0 2px 0 #000; }
.penal-tv-score span { color: #ef7878; margin: 0 3px; }
.penal-live { position: absolute; top: 5px; right: 9px; z-index: 3; display: inline-flex; align-items: center; gap: 4px; font-size: 8px; font-weight: 900; letter-spacing: .1em; color: #ff4d6d; }
.penal-live i { width: 5px; height: 5px; border-radius: 50%; background: #ff4d6d; box-shadow: 0 0 8px #ff4d6d; animation: live-pulse .9s infinite alternate; }
@keyframes live-pulse { from { opacity: .35; } to { opacity: 1; } }
.penal-tv-marcas { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; margin-top: 7px; }
.penal-marcas { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; justify-content: center; min-height: 22px; }
.penal-marcas span { font-size: 15px; line-height: 1; }
.marca-gol { filter: drop-shadow(0 0 5px rgba(57,255,20,.9)) drop-shadow(0 0 12px rgba(57,255,20,.35)); animation: marca-gol-pop .35s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes marca-gol-pop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.marca-atajada { color: #ff4d6d; filter: drop-shadow(0 0 5px rgba(255,77,109,.9)); }
.penal-tv-icono { font-size: 18px; filter: drop-shadow(0 0 8px rgba(255,255,255,.45)); }
.penal-tv-pie { position: relative; z-index: 2; text-align: center; margin-top: 4px; font-size: 9px; letter-spacing: .1em; color: #8fa0b5; text-transform: uppercase; }
.penal-escena {
  position: relative; height: clamp(320px, 44vw, 410px); border-radius: 22px; overflow: hidden;
  background: linear-gradient(#050b18 0%, #0b2a4a 36%, #0e3b22 58%, #1b6b3a 100%);
  box-shadow: inset 0 -34px 64px rgba(0,0,0,.55), 0 18px 42px rgba(0,0,0,.38);
  perspective: 900px; isolation: isolate; user-select: none;
}
.penal-tribuna {
  position: absolute; inset: 0 0 60% 0; z-index: 0; display: block; padding: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.62) 1.4px, transparent 1.9px),
    radial-gradient(circle, rgba(255,209,102,.58) 1.2px, transparent 1.7px),
    radial-gradient(circle, rgba(77,171,255,.5) 1px, transparent 1.5px),
    linear-gradient(180deg, #03060d, #0a1424 55%, #0d2135);
  background-size: 22px 16px, 31px 21px, 17px 13px, 100% 100%;
  background-position: 4px 6px, 15px 11px, 9px 4px, 0 0;
  border-bottom: 2px solid rgba(255,255,255,.08); overflow: hidden;
}
.penal-tribuna::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 100%, rgba(77,171,255,.18), transparent 65%); }
.penal-tribuna i { display: none; }
.penal-focos { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.penal-focos .foco { position: absolute; top: 1.5%; width: 13px; height: 13px; border-radius: 50%; background: #fffbe6; box-shadow: 0 0 12px #fff, 0 0 38px rgba(255,255,210,.9), 0 0 70px rgba(255,255,210,.4); }
.penal-focos .foco.izq { left: 12%; }
.penal-focos .foco.der { right: 12%; }
.penal-focos .haz {
  position: absolute; top: 4%; width: 36%; height: 58%; opacity: .55;
  background: linear-gradient(180deg, rgba(255,255,220,.28), transparent 82%);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); filter: blur(7px); mix-blend-mode: screen;
}
.penal-focos .haz.izq { left: 0; transform: rotate(-7deg); transform-origin: top center; }
.penal-focos .haz.der { right: 0; transform: rotate(7deg); transform-origin: top center; }
.penal-cielo {
  position: absolute; inset: 22% 0 44% 0; z-index: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(120,200,255,.18), transparent 65%);
}
.penal-cesped {
  position: absolute; left: 0; right: 0; bottom: 0; height: 57%; z-index: 0;
  background: repeating-linear-gradient(135deg, #1f7a43 0 18px, #176336 18px 36px);
  box-shadow: inset 0 20px 32px rgba(0,0,0,.4), inset 0 -30px 50px rgba(0,0,0,.3);
  border-top: 1px solid rgba(255,255,255,.2);
}
.penal-cesped::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 20%, rgba(255,255,255,.14), transparent 62%);
}
.penal-area {
  position: absolute; left: 50%; bottom: 0; width: 62%; height: 30%; z-index: 1; transform: translateX(-50%);
  border: 2px solid rgba(255,255,255,.58); border-bottom: 0; border-radius: 50% 50% 0 0 / 32% 32% 0 0;
  box-shadow: 0 0 14px rgba(255,255,255,.28);
}
.penal-punto {
  position: absolute; left: 50%; bottom: 17%; width: 9px; height: 6px; z-index: 1;
  transform: translateX(-50%); border-radius: 50%; background: #fff;
  box-shadow: 0 0 10px #fff, 0 0 20px rgba(255,255,255,.55);
}
.penal-arco {
  position: absolute; left: 50%; top: 11%; width: 78%; height: 52%; z-index: 2; transform: translateX(-50%);
  border: 8px solid #f5f7fa; border-bottom: 0; border-radius: 8px 8px 0 0;
  box-shadow: 0 0 24px rgba(255,255,255,.4), inset 0 0 26px rgba(0,0,0,.28), 0 8px 0 rgba(0,0,0,.25);
}
.penal-red {
  position: absolute; inset: 4% 1% 0; overflow: hidden; opacity: .92;
  background:
    repeating-linear-gradient(0deg, transparent 0 10px, rgba(255,255,255,.26) 10px 11px),
    repeating-linear-gradient(90deg, transparent 0 10px, rgba(255,255,255,.22) 10px 11px);
  transform: perspective(280px) rotateX(-5deg); transform-origin: top center;
}
.penal-red::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.18), transparent 65%); }
.penal-escena.anim-gol .penal-red { animation: red-impacto .72s cubic-bezier(.2,1.4,.4,1); }
@keyframes red-impacto {
  0% { transform: perspective(280px) rotateX(-5deg) scale(1); }
  22% { transform: perspective(280px) rotateX(-8deg) scale(1.04, 1.12); }
  48% { transform: perspective(280px) rotateX(-3deg) scale(.99, .93); }
  70% { transform: perspective(280px) rotateX(-7deg) scale(1.02, 1.06); }
  100% { transform: perspective(280px) rotateX(-5deg) scale(1); }
}
.penal-poste { position: absolute; top: -8px; bottom: -3px; width: 8px; border-radius: 5px; background: linear-gradient(90deg, #96a2b1, #fff 42%, #e7edf5 58%, #8e9baa); box-shadow: 0 0 12px rgba(255,255,255,.45), 2px 0 5px rgba(0,0,0,.25); }
.penal-poste.pi { left: -8px; }
.penal-poste.pd { right: -8px; }
.penal-travesano { position: absolute; left: -8px; right: -8px; top: -8px; height: 8px; border-radius: 5px; background: linear-gradient(180deg, #fff, #cfd8e3 52%, #94a0af); box-shadow: 0 0 12px rgba(255,255,255,.45), 0 3px 6px rgba(0,0,0,.3); }
.penal-arquero {
  position: absolute; left: 50%; bottom: 15%; width: 64px; height: 104px; z-index: 5; transform: translateX(-50%);
  filter: drop-shadow(0 12px 10px rgba(0,0,0,.55));
  transition: left .5s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.8,.2,1);
}
.penal-arquero .cabeza {
  position: absolute; left: 50%; top: 0; width: 19px; height: 19px; margin-left: -9.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe0bd, #cf9366 70%, #8f5a36);
  box-shadow: 0 2px 4px rgba(0,0,0,.35), inset 0 0 4px rgba(255,255,255,.35);
}
.penal-arquero .cuerpo {
  position: absolute; left: 50%; top: 17px; width: 28px; height: 44px; margin-left: -14px; border-radius: 11px 11px 6px 6px;
  background: linear-gradient(180deg, #ffce3a, #ef7878 42%, #b35c00 80%, #6b2d00);
  box-shadow: inset 0 0 10px rgba(255,255,255,.3), 0 4px 8px rgba(0,0,0,.35);
}
.penal-arquero .brazo { position: absolute; top: 23px; width: 34px; height: 9px; border-radius: 8px; background: linear-gradient(90deg, #ffd9b3, #cf9366); transform-origin: 50% 50%; box-shadow: 0 2px 4px rgba(0,0,0,.3); transition: transform .35s cubic-bezier(.2,1.4,.4,1); }
.penal-arquero .brazo.i { left: -26px; transform: rotate(-26deg); }
.penal-arquero .brazo.d { right: -26px; transform: rotate(26deg); }
.penal-arquero .brazo::after {
  content: ''; position: absolute; right: -7px; top: 50%; width: 17px; height: 17px; margin-top: -8.5px;
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff7c2, #ffce3a 42%, #b35c00);
  box-shadow: 0 0 10px rgba(255,206,58,.9), 0 0 20px rgba(255,206,58,.35);
}
.penal-arquero .brazo.i::after { right: auto; left: -7px; }
.penal-arquero.tirar-izquierda { left: 23%; transform: translateX(-50%) rotate(-34deg) translateY(-10px) scale(1.08); }
.penal-arquero.tirar-derecha { left: 77%; transform: translateX(-50%) rotate(34deg) translateY(-10px) scale(1.08); }
.penal-arquero.tirar-izquierda .brazo.i { transform: rotate(-78deg) translateX(-12px); }
.penal-arquero.tirar-izquierda .brazo.d { transform: rotate(-48deg); }
.penal-arquero.tirar-derecha .brazo.d { transform: rotate(78deg) translateX(12px); }
.penal-arquero.tirar-derecha .brazo.i { transform: rotate(48deg); }
.penal-balon {
  position: absolute; left: 50%; bottom: 7%; width: 56px; height: 56px; margin-left: -28px; z-index: 6;
  border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 32% 28%, #fff 0 38%, #eef2f6 46%, #c7ced6 68%, #7c8794 100%);
  border: 2px solid #1d232b;
  box-shadow: 0 14px 20px rgba(0,0,0,.42), inset -6px -7px 12px rgba(0,0,0,.24), inset 3px 3px 8px rgba(255,255,255,.5);
}
.penal-balon span, .penal-balon i {
  position: absolute; display: block; background: #1b222b;
  clip-path: polygon(50% 0%, 100% 38%, 81% 100%, 19% 100%, 0% 38%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.15);
}
.penal-balon span { left: 50%; top: 50%; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; }
.penal-balon .p1 { left: 12%; top: 23%; width: 9px; height: 9px; transform: rotate(22deg); }
.penal-balon .p2 { right: 11%; top: 20%; width: 8px; height: 8px; transform: rotate(-28deg); }
.penal-balon .p3 { left: 22%; bottom: 14%; width: 8px; height: 8px; transform: rotate(48deg); }
.penal-balon .p4 { right: 20%; bottom: 16%; width: 9px; height: 9px; transform: rotate(-12deg); }
.penal-balon .brillo {
  left: 22%; top: 12%; width: 19px; height: 10px; border-radius: 50%; transform: rotate(-28deg);
  background: radial-gradient(ellipse, rgba(255,255,255,.95), transparent 72%);
  clip-path: none; box-shadow: none;
}
.penal-balon-sombra {
  position: absolute; left: 50%; bottom: 5%; width: 70px; height: 18px; margin-left: -35px; z-index: 4;
  border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,.55), transparent 72%);
  filter: blur(3px); opacity: .8;
}
.penal-escena.anim-gol .penal-balon-sombra, .penal-escena.anim-atajada .penal-balon-sombra { animation: sombra-balon .62s ease-out forwards; }
@keyframes sombra-balon { from { opacity: .8; transform: scale(1); } 55% { opacity: .25; transform: scale(.6) translateY(-8px); } to { opacity: .05; transform: scale(.3) translateY(-18px); } }
.penal-estela { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.85); opacity: 0; z-index: 3; box-shadow: 0 0 12px rgba(255,255,255,.6); }
.penal-estela.e4 { left: 26%; bottom: 54%; animation-delay: .2s; }
.penal-estela.e5 { left: 68%; bottom: 48%; animation-delay: .13s; }
.penal-balon.chutar-izquierda { animation: balon-izq .62s cubic-bezier(.2,.7,.3,1) forwards; }
.penal-balon.chutar-derecha { animation: balon-der .62s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes balon-izq {
  0% { left: 50%; bottom: 7%; transform: rotate(0) scale(1.12, .9); }
  20% { left: 49%; bottom: 21%; transform: rotate(-40deg) scale(.9, 1.1); }
  55% { left: 34%; bottom: 45%; transform: rotate(-170deg) scale(.86); }
  100% { left: 21%; bottom: 58%; transform: rotate(-310deg) scale(.72); }
}
@keyframes balon-der {
  0% { left: 50%; bottom: 7%; transform: rotate(0) scale(1.12, .9); }
  20% { left: 51%; bottom: 21%; transform: rotate(40deg) scale(.9, 1.1); }
  55% { left: 66%; bottom: 45%; transform: rotate(170deg) scale(.86); }
  100% { left: 79%; bottom: 58%; transform: rotate(310deg) scale(.72); }
}
.penal-escena.anim-atajada { animation: sacudida-atajada .46s .06s; }
@keyframes sacudida-atajada {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  15% { transform: translate(-10px, 4px) rotate(-.8deg); }
  30% { transform: translate(9px, -5px) rotate(.7deg); }
  45% { transform: translate(-7px, 3px); }
  60% { transform: translate(5px, -2px); }
  80% { transform: translate(-2px, 1px); }
}
.penal-overlay {
  position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: clamp(34px, 9vw, 82px); font-weight: 900; color: #fff; text-align: center; padding: 0 10px;
  font-family: Impact, 'Arial Black', sans-serif; letter-spacing: .03em; pointer-events: none;
  animation: grito .5s cubic-bezier(.2,1.6,.4,1) both;
}
.penal-overlay small { display: block; font-family: inherit; font-size: .22em; letter-spacing: .24em; margin-top: 4px; opacity: .9; }
.penal-overlay.gol {
  color: #fbffb0;
  text-shadow: 0 2px 0 #b35c00, 0 5px 0 #6b2d00, 0 10px 22px #000, 0 0 30px #ffb703, 0 0 60px rgba(255,77,0,.8);
  animation: gol-cae .62s cubic-bezier(.2,1.6,.4,1) both;
}
@keyframes gol-cae {
  0% { transform: translateY(-60px) scale(1.5) rotate(-5deg); opacity: 0; }
  55% { transform: translateY(6px) scale(.94) rotate(2deg); opacity: 1; }
  75% { transform: translateY(-3px) scale(1.03) rotate(-1deg); }
  100% { transform: translateY(0) scale(1) rotate(0); opacity: 1; }
}
.penal-overlay.atajada { color: #ff4d6d; text-shadow: 0 3px 0 #5b000d, 0 8px 18px #000, 0 0 26px #ff003c; animation: atajada-golpe .38s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes atajada-golpe { 0% { transform: scale(1.5) rotate(-4deg); opacity: 0; } 55% { transform: scale(.94) rotate(2deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
.penal-escena.anim-gol .penal-tribuna { animation: tribuna-gol .6s ease-in-out 2 alternate; }
@keyframes tribuna-gol { from { background-position: 4px 6px, 15px 11px, 9px 4px, 0 0; } to { background-position: 4px 1px, 15px 6px, 9px -2px, 0 0; } }
.penal-escena.anim-gol .penal-focos .haz { animation: haz-gol .7s ease-out; }
@keyframes haz-gol { 0% { opacity: .55; } 35% { opacity: 1; filter: blur(3px) brightness(1.6); } 100% { opacity: .55; filter: blur(7px); } }
.penal-prompt { text-align: center; font-weight: 800; margin: 10px 0 0; }
.penal-btn {
  border: 2px solid #b8862a; border-radius: 14px; color: #fff6d8;
  background: linear-gradient(180deg, #3a2c14, #1b1308 65%, #0d0904);
  box-shadow: 0 6px 0 #5a3d0a, 0 10px 20px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,235,160,.22);
  transition: transform .08s, border-color .15s, box-shadow .15s;
}
.penal-btn:hover:not(:disabled) { border-color: #ffd166; transform: translateY(-2px); box-shadow: 0 8px 0 #5a3d0a, 0 14px 24px rgba(0,0,0,.45), 0 0 20px rgba(255,209,102,.2); }
.penal-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 3px 0 #5a3d0a, 0 6px 12px rgba(0,0,0,.4); }

/* ---------- Bomba: TNT vintage y consola industrial ---------- */
.bomba-marcador-lado {
  border: 1px solid #3b3020; border-radius: 12px; padding: 5px 9px; text-align: center;
  background: linear-gradient(180deg, rgba(35,28,18,.94), rgba(12,9,6,.94));
  box-shadow: inset 0 1px 0 rgba(255,220,150,.14), 0 6px 16px rgba(0,0,0,.35);
  transition: border-color .2s, box-shadow .2s;
}
.bomba-marcador-lado.punto {
  border-color: #ffd166;
  box-shadow: inset 0 1px 0 rgba(255,220,150,.2), 0 0 0 1px rgba(255,209,102,.4), 0 0 20px rgba(255,140,40,.45);
}
.bomba-marcador-lado b { color: #f6e7c1; letter-spacing: .08em; }
.bomba-iconos { filter: drop-shadow(0 0 6px rgba(255,80,40,.35)); }
.bomba-icono.logrado { filter: drop-shadow(0 0 8px #ff6b3a) drop-shadow(0 0 18px rgba(255,60,20,.6)); }
.bomba-escena {
  min-height: 380px; border-radius: 22px; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 6%, rgba(255,170,70,.14), transparent 55%),
    radial-gradient(circle at 50% 40%, #2a1c14 0%, #150e0a 48%, #070504 100%);
  border: 1px solid rgba(255,180,100,.14);
  box-shadow: inset 0 -30px 70px rgba(0,0,0,.75), inset 0 0 90px rgba(0,0,0,.5), 0 18px 44px rgba(0,0,0,.4);
}
.bomba-escena::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(0,0,0,.14) 4px 5px);
  opacity: .5;
}
.bomba-tnt { position: relative; width: min(68%, 390px); height: 190px; margin: 20px auto 0; z-index: 2; }
.tnt-tubos { position: absolute; inset: 8px 0 0; display: flex; gap: 4px; align-items: stretch; filter: drop-shadow(0 20px 16px rgba(0,0,0,.65)); }
.tnt-tubo {
  position: relative; flex: 1; border-radius: 12px 12px 9px 9px;
  background: linear-gradient(90deg, #3d0000 0%, #a30f18 17%, #ef2d35 36%, #ff8a7a 49%, #d00d1a 64%, #650006 100%);
  box-shadow: inset -5px 0 9px #2b0000, inset 5px 0 8px rgba(255,255,255,.22), 0 2px 0 #2b0000;
}
.tnt-tubo:nth-child(odd) { transform: translateY(2px); }
.tnt-tubo::before {
  content: ''; position: absolute; top: -3px; left: 5%; right: 5%; height: 11px; border-radius: 50%;
  background: linear-gradient(90deg, #4d0000, #ff6b6b 45%, #8f060c);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.2);
}
.tnt-tubo::after {
  content: ''; position: absolute; top: 9%; bottom: 7%; left: 16%; width: 10%; border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.55), transparent 72%); filter: blur(1px);
}
.tnt-correa {
  position: absolute; left: -4%; right: -4%; height: 17px; z-index: 3; border-radius: 4px;
  background: linear-gradient(180deg, #4a4a4a, #0b0b0b 42%, #3a3a3a 68%, #050505);
  box-shadow: 0 2px 5px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.14);
}
.tnt-correa.c1 { top: 36%; }
.tnt-correa.c2 { top: 70%; }
.tnt-correa i {
  position: absolute; left: 50%; top: 50%; width: 21px; height: 21px; transform: translate(-50%,-50%); border-radius: 3px;
  background: linear-gradient(135deg, #e2e7ec, #5c646e 52%, #2b3138);
  box-shadow: 0 1px 3px #000, inset 0 1px 0 rgba(255,255,255,.5);
}
.tnt-stencil {
  position: absolute; left: 50%; top: 17%; z-index: 4; transform: translateX(-50%) rotate(-4deg);
  text-align: center; white-space: nowrap; color: #f6e7c1; font-family: Impact, 'Arial Black', sans-serif;
  text-shadow: 0 1px 0 #2b0000, 0 2px 4px rgba(0,0,0,.9), 0 0 8px rgba(0,0,0,.6);
  opacity: .94; letter-spacing: .07em;
}
.tnt-stencil b { display: block; font-size: clamp(18px, 4.4vw, 31px); line-height: 1; }
.tnt-stencil span { display: block; font-size: clamp(7px, 1.5vw, 10px); letter-spacing: .18em; }
.bomba-panel {
  position: relative; width: min(58%, 320px); margin: -44px auto 0; z-index: 5; padding: 10px 14px 11px; border-radius: 12px;
  background: linear-gradient(180deg, #46505c 0%, #1b2028 46%, #0c0f14 100%);
  border: 2px solid #66707d;
  box-shadow: 0 14px 28px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -8px 14px rgba(0,0,0,.45);
}
.bomba-panel::before { content: ''; position: absolute; inset: 0; border-radius: 10px; pointer-events: none; background: repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 4px); opacity: .5; }
.bomba-tornillo { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #7d858f 45%, #20242a); box-shadow: inset 0 0 2px #000, 0 1px 1px rgba(0,0,0,.6); }
.bomba-tornillo.t1 { left: 5px; top: 5px; } .bomba-tornillo.t2 { right: 5px; top: 5px; }
.bomba-tornillo.t3 { left: 5px; bottom: 5px; } .bomba-tornillo.t4 { right: 5px; bottom: 5px; }
.bomba-panel-cab { display: flex; justify-content: space-between; gap: 6px; font-size: 8px; letter-spacing: .14em; color: #9aa6b5; text-transform: uppercase; }
.bomba-armado { color: #ffb020; }
.bomba-led {
  position: relative; overflow: hidden; margin: 5px 0 6px; padding: 2px 10px; text-align: center;
  border-radius: 6px; border: 1px solid #3c0006;
  background: linear-gradient(180deg, #070001 0%, #1b0004 55%, #090001 100%);
  font-family: 'Courier New', 'Lucida Console', monospace; font-size: clamp(32px, 7.5vw, 48px); font-weight: 900;
  color: #ff1133; letter-spacing: .08em; line-height: 1.05; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 6px #ff1133, 0 0 18px rgba(255,17,51,.75), 0 0 34px rgba(255,17,51,.4);
  box-shadow: inset 0 0 18px #000, 0 0 16px rgba(255,17,51,.18); text-align: center;
}
.bomba-led::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.32) 3px 4px); }
.bomba-led.safe { color: #00ff88; border-color: #064c2c; text-shadow: 0 0 8px #00ff88, 0 0 22px rgba(0,255,136,.8), 0 0 40px rgba(0,255,136,.4); box-shadow: inset 0 0 18px #000, 0 0 20px rgba(0,255,136,.22); }
.bomba-led.boom { color: #ffb020; border-color: #4d2a00; text-shadow: 0 0 10px #ffb020, 0 0 26px rgba(255,120,0,.9); }
.bomba-led.alerta { animation: led-alerta .2s infinite alternate; }
@keyframes led-alerta { from { opacity: 1; filter: brightness(1); } to { opacity: .5; filter: brightness(2); } }
.bomba-luces { display: flex; gap: 6px; justify-content: center; margin-bottom: 7px; }
.bomba-luces span { width: 9px; height: 9px; border-radius: 50%; background: #4a0c0c; box-shadow: inset 0 0 4px #000, 0 0 4px rgba(255,0,0,.25); }
.bomba-luces span.verde { background: #00ff88; box-shadow: 0 0 8px #00ff88, 0 0 16px rgba(0,255,136,.6); animation: luz-verde .55s ease-in-out infinite alternate; }
.bomba-progreso { height: 7px; border-radius: 5px; background: #06080b; overflow: hidden; box-shadow: inset 0 0 5px #000; }
.bomba-progreso span { display: block; height: 100%; background: linear-gradient(90deg, #00ff88, #ffd60a 48%, #ff1133); transition: width .25s linear; box-shadow: 0 0 8px rgba(255,17,51,.45); }
.bomba-progreso span.urgente { animation: pulso-barra .35s infinite alternate; }
.bomba-panel-pie { display: flex; justify-content: space-between; gap: 6px; margin-top: 5px; font-size: 7.5px; letter-spacing: .12em; color: #8793a2; text-transform: uppercase; }
.bomba-cables { display: flex; justify-content: center; gap: clamp(8px, 3vw, 22px); margin: 8px auto 0; max-width: 560px; padding: 0 12px; position: relative; z-index: 6; }
.bomba-cable {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; width: clamp(76px, 19vw, 108px);
  padding: 8px 6px 9px; border-radius: 14px; border: 1px solid #4a3a28; color: #fff; cursor: pointer; font: inherit;
  background: linear-gradient(180deg, #3a3024, #17120d 62%, #090705);
  box-shadow: 0 7px 0 #1a1208, 0 12px 20px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,225,170,.16);
  transition: transform .1s, border-color .15s, box-shadow .15s;
}
.bomba-cable:hover:not(:disabled), .bomba-cable:focus-visible {
  transform: translateY(-3px); border-color: #ffd166;
  box-shadow: 0 10px 0 #1a1208, 0 18px 28px rgba(0,0,0,.5), 0 0 22px rgba(255,209,102,.2);
}
.bomba-cable:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 3px 0 #1a1208, 0 6px 12px rgba(0,0,0,.4); }
.bomba-cable:disabled { cursor: default; }
.bomba-cable.cortando { animation: cable-cortando .35s ease-in-out; }
@keyframes cable-cortando { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.8); } }
.bomba-cable .borne { position: relative; width: 30px; height: 11px; border-radius: 4px; background: linear-gradient(180deg, #f4f7fa, #8b949f 52%, #3d444d); box-shadow: 0 1px 3px #000, inset 0 1px 0 rgba(255,255,255,.7); }
.bomba-cable .borne i { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #777 45%, #111); box-shadow: inset 0 0 2px #000; }
.bomba-cable .cable-hilo { position: relative; width: 30px; height: 82px; background: none; border-radius: 0; box-shadow: none; filter: drop-shadow(0 0 8px currentColor); }
.bomba-cable .cable-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bomba-cable .cable-base { fill: none; stroke: currentColor; stroke-width: 16; stroke-linecap: round; }
.bomba-cable .cable-brillo { fill: none; stroke: rgba(255,255,255,.38); stroke-width: 3.5; stroke-linecap: round; opacity: .55; }
.bomba-cable .cable-espiral { fill: none; stroke: rgba(0,0,0,.38); stroke-width: 2; stroke-dasharray: 2 5; stroke-linecap: round; }
.bomba-cable .cable-g { transition: transform .3s cubic-bezier(.2,1.6,.4,1); transform-box: fill-box; transform-origin: center; }
.bomba-cable.cortado .cable-hilo { height: 82px; opacity: 1; background: none; box-shadow: none; }
.bomba-cable.cortado .cable-hilo::after { display: none; }
.bomba-cable.cortado .cable-g.a { transform: translate(-4px, -12px) rotate(-16deg); }
.bomba-cable.cortado .cable-g.b { transform: translate(4px, 12px) rotate(16deg); }
.bomba-cable.rojo { color: #ff3b30; }
.bomba-cable.azul { color: #2f7bff; }
.bomba-cable.amarillo { color: #ffd60a; }
.bomba-cable.trampa .cable-hilo { box-shadow: none; filter: drop-shadow(0 0 10px #ff3b30) drop-shadow(0 0 26px rgba(255,59,48,.8)); }
.bomba-cable.marcada { outline: 2px solid #ffd60a; outline-offset: 3px; animation: cable-marcado .6s infinite alternate; }
@keyframes cable-marcado { from { box-shadow: 0 7px 0 #1a1208, 0 0 10px rgba(255,214,10,.25); } to { box-shadow: 0 7px 0 #1a1208, 0 0 28px rgba(255,214,10,.65); } }
.bomba-cable .cable-nombre { font-size: 11px; font-weight: 800; color: #e7dfcf; letter-spacing: .06em; text-transform: uppercase; }
.bomba-cable .cable-tijera {
  position: absolute; right: 1px; top: 24%; z-index: 4; font-size: 20px; opacity: 0; pointer-events: none;
  transform: translateX(7px) rotate(-24deg); filter: drop-shadow(0 0 6px #ffd166); transition: opacity .18s, transform .18s;
}
.bomba-cable:hover:not(:disabled) .cable-tijera, .bomba-cable:focus-visible .cable-tijera, .bomba-cable:active .cable-tijera {
  opacity: 1; transform: translateX(0) rotate(0); animation: tijera-snap .35s ease-in-out infinite alternate;
}
@keyframes tijera-snap { from { transform: rotate(-8deg) scale(1); } to { transform: rotate(8deg) scale(1.15); } }
.bomba-cable .chispa-cable { position: absolute; right: 4px; top: 6px; font-size: 14px; color: #ffd166; text-shadow: 0 0 8px #ffd166, 0 0 18px #ff8a00; animation: chispa-cable .7s ease-out; }
@keyframes chispa-cable { from { opacity: 1; transform: scale(1.4); } to { opacity: 0; transform: scale(.3); } }
.bomba-alicate { position: absolute; right: 13%; bottom: 15%; z-index: 7; font-size: 34px; opacity: .22; transform: rotate(-18deg); pointer-events: none; filter: drop-shadow(0 0 7px #ffd166); transition: opacity .2s, transform .2s; }
.bomba-alicate.activo { opacity: 1; animation: tijera .5s ease-in-out infinite alternate; }
.bomba-chispas-capa { position: fixed; inset: 0; z-index: 9996; pointer-events: none; overflow: hidden; }
.bomba-chispas-capa .bomba-chispa { position: absolute; }
.bomba-chispa {
  position: absolute; width: 5px; height: 5px; border-radius: 50%; z-index: 9; pointer-events: none;
  background: var(--color, #ffd166); box-shadow: 0 0 8px var(--color, #ffd166), 0 0 16px var(--color, #ffd166);
  animation: bomba-chispa .8s ease-out forwards;
}
@keyframes bomba-chispa { from { transform: translate(0,0) rotate(0) scale(1.3); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) rotate(var(--giro)) scale(.1); opacity: 0; } }
.bomba-escena.urgente { animation: bomba-tension .22s infinite; }
@keyframes bomba-tension { 0%,100% { transform: translate(0,0); } 25% { transform: translate(-1.5px,1px); } 50% { transform: translate(1.5px,-1px); } 75% { transform: translate(-1px,-1px); } }
.bomba-escena.explota { animation: sacudida-fuerte .6s cubic-bezier(.36,.07,.19,.97); }
.bomba-fuego {
  position: absolute; left: 50%; top: 40%; width: 75%; height: 65%; z-index: 3; pointer-events: none;
  transform: translate(-50%,-50%); border-radius: 50%; filter: blur(2px);
  background: radial-gradient(circle at 50% 56%, #fff 0 5%, #ffe39a 11%, #ffb020 25%, #ff4d00 44%, #8f0d00 66%, transparent 78%);
  animation: bomba-fuego .95s ease-out forwards;
}
@keyframes bomba-fuego { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.18); } 16% { opacity: 1; } 60% { opacity: .9; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.55); } }
.bomba-onda { position: absolute; left: 50%; top: 48%; width: 32px; height: 32px; margin: -16px; z-index: 4; border-radius: 50%; border: 3px solid rgba(255,221,150,.9); box-shadow: 0 0 22px rgba(255,180,70,.8); pointer-events: none; animation: bomba-onda .75s ease-out forwards; }
@keyframes bomba-onda { from { transform: scale(.2); opacity: 1; } to { transform: scale(8); opacity: 0; } }
.bomba-humo { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; }
.bomba-humo span {
  position: absolute; bottom: 20%; width: 76px; height: 76px; border-radius: 50%;
  background: radial-gradient(circle, rgba(150,150,150,.7), rgba(30,30,30,.08) 70%);
  filter: blur(7px); animation: humo .95s ease-out forwards;
}
.bomba-humo span:nth-child(1) { left: 26%; animation-delay: 0s; }
.bomba-humo span:nth-child(2) { left: 40%; animation-delay: .07s; }
.bomba-humo span:nth-child(3) { left: 53%; animation-delay: .14s; }
.bomba-humo span:nth-child(4) { left: 34%; animation-delay: .21s; }
.bomba-humo span:nth-child(5) { left: 48%; animation-delay: .28s; }
.bomba-humo span:nth-child(6) { left: 60%; animation-delay: .35s; }
.bomba-humo span:nth-child(7) { left: 30%; animation-delay: .42s; }
.bomba-humo span:nth-child(8) { left: 55%; animation-delay: .5s; }
@keyframes humo { from { opacity: .95; transform: translateY(0) scale(.55); } to { opacity: 0; transform: translateY(-145px) scale(1.75); } }
.bomba-escombros-v { position: absolute; inset: 0; z-index: 5; overflow: hidden; pointer-events: none; }
.bomba-escombros-v i {
  position: absolute; left: 50%; top: 45%; width: 6px; height: 6px; border-radius: 2px;
  background: var(--c, #ffb020); box-shadow: 0 0 6px rgba(255,170,50,.6);
  animation: escombro-v .95s ease-out var(--d, 0ms) forwards;
}
@keyframes escombro-v { from { transform: translate(0,0) rotate(0) scale(1); opacity: 1; } to { transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(.2); opacity: 0; } }
.bomba-escena.safe { box-shadow: inset 0 0 80px rgba(0,255,136,.22), inset 0 -30px 70px rgba(0,0,0,.7), 0 18px 44px rgba(0,0,0,.4); }
.bomba-balizas { position: absolute; left: 0; right: 0; top: 9px; z-index: 8; display: flex; justify-content: center; gap: 12px; pointer-events: none; }
.bomba-balizas span { width: 10px; height: 10px; border-radius: 50%; background: #0a2b12; border: 1px solid #1a5c2a; box-shadow: inset 0 0 4px #000; }
.bomba-balizas span.verde { background: #00ff88; box-shadow: 0 0 9px #00ff88, 0 0 22px rgba(0,255,136,.7); animation: baliza .65s ease-in-out infinite alternate; }
@keyframes baliza { from { opacity: .35; transform: scale(.85); } to { opacity: 1; transform: scale(1.2); } }
.bomba-vapor { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.bomba-vapor span { position: absolute; bottom: 28%; width: 66px; height: 66px; border-radius: 50%; background: radial-gradient(circle, rgba(220,255,225,.6), transparent 70%); filter: blur(8px); animation: vapor 1.25s ease-out forwards; }
.bomba-vapor span:nth-child(1) { left: 30%; }
.bomba-vapor span:nth-child(2) { left: 43%; animation-delay: .11s; }
.bomba-vapor span:nth-child(3) { left: 56%; animation-delay: .22s; }
.bomba-vapor span:nth-child(4) { left: 36%; animation-delay: .33s; }
.bomba-vapor span:nth-child(5) { left: 49%; animation-delay: .44s; }
@keyframes vapor { from { opacity: .85; transform: translateY(8px) scale(.55); } to { opacity: 0; transform: translateY(-105px) scale(1.5); } }
.bomba-overlay { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 900; font-size: clamp(36px, 9vw, 86px); text-align: center; font-family: Impact, 'Arial Black', sans-serif; letter-spacing: .03em; pointer-events: none; animation: grito .5s cubic-bezier(.2,1.6,.4,1) both; }
.bomba-overlay span { display: block; }
.bomba-overlay small { display: block; margin-top: 4px; font-size: .22em; letter-spacing: .3em; opacity: .9; }
.bomba-overlay.explota { color: #ffd166; text-shadow: 0 3px 0 #6b2d00, 0 7px 0 #3b1200, 0 12px 24px #000, 0 0 36px #ff4d00, 0 0 70px #ff4d00; animation: boom-texto .6s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes boom-texto { 0% { transform: scale(1.8) rotate(-5deg); opacity: 0; filter: brightness(3); } 50% { transform: scale(.94) rotate(2deg); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.bomba-overlay.safe { color: #b6ffd6; text-shadow: 0 2px 0 #064c2c, 0 6px 0 #012b17, 0 0 26px #00ff88, 0 0 60px rgba(0,255,136,.65); }
.bomba-prompt { text-align: center; font-weight: 800; margin: 10px 0 0; }
.bomba-prompt.plantador { color: #ffd166; } .bomba-prompt.desactivador { color: #7dd3fc; }
.bomba-prompt.mal { color: #ff6b4a; } .bomba-prompt.ok { color: #00ff88; }

/* ---------- Bomba: cabecera compacta (nombre + jugadores + reloj) ---------- */
/* Una sola fila en escritorio; en pantallas angostas los marcadores bajan a su
   propia fila, centrados y simétricos alrededor del VS. */
.bomba-cab { display: flex; align-items: center; gap: 4px 10px; min-width: 0; flex: 1 1 100%; }
.bomba-cab > .sala-juego { flex: 0 1 auto; min-width: 0; }
.bomba-cab > .sala-juego > b { font-size: 15px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Marcadores simétricos: dos columnas iguales con el VS justo en el centro. */
.bomba-cab-centro {
  flex: 1 1 auto; min-width: 0; margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 6px; max-width: min(100%, 440px);
}
.bomba-cab > .sala-cab-der { margin-left: 0; }
.bomba-cab-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 0;
  padding: 1px 9px; border-radius: 999px; font-size: 12px; line-height: 1.6;
  border: 1px solid var(--borde); background: var(--fondo); color: var(--texto);
}
.bomba-cab-chip b { font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bomba-cab-chip small { flex: none; color: var(--azul); font-variant-numeric: tabular-nums; font-weight: 800; }
.bomba-cab-chip.yo { border-color: var(--azul); }
.bomba-cab-chip.off { opacity: .55; }
.bomba-cab-chip .punto-estado { width: 7px; height: 7px; margin: 0; flex: none; border-radius: 50%; background: var(--suave); display: inline-block; }
.bomba-cab-chip .punto-estado.on { background: #34d399; box-shadow: 0 0 0 2px rgba(52, 211, 153, .2); }
.bomba-cab-vs { flex: none; font-size: 10px; font-weight: 900; letter-spacing: .08em; color: var(--suave); }
.bomba-cab-reloj {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px;
  padding: 0 7px; border-radius: 8px; border: 1px solid #3c0006;
  background: linear-gradient(180deg, #070001, #1b0004);
}
.bomba-cab-reloj .sala-tiempo { margin: 0; font-size: 12.5px; line-height: 1.8; color: #ff5a6e; text-shadow: 0 0 6px rgba(255, 17, 51, .7); }
@media (max-width: 620px) {
  .bomba-cab { flex-wrap: wrap; row-gap: 4px; }
  .bomba-cab > .sala-juego { flex: 1 1 auto; }
  .bomba-cab > .sala-juego > b { font-size: 14px; }
  .bomba-cab-centro { order: 3; flex: 1 1 100%; max-width: 100%; gap: 5px; }
  .bomba-cab-chip { font-size: 11.5px; padding: 1px 8px; }
  .bomba-cab-chip b { max-width: 27vw; }
}

/* ---------- Efectos globales de explosión ---------- */
.tb-flash-global {
  position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  background: radial-gradient(circle at 50% 45%, #fff 0%, #fff9d0 16%, #ffb020 34%, rgba(255,60,0,.78) 55%, transparent 78%);
  animation: tb-flash .2s ease-out forwards;
}
@keyframes tb-flash { 0% { opacity: 0; } 10% { opacity: 1; } 100% { opacity: 0; } }
.tb-boom-shake { animation: tb-camara .6s cubic-bezier(.36,.07,.19,.97); }
@keyframes tb-camara {
  0%, 100% { transform: translate(0,0) rotate(0); }
  10% { transform: translate(-12px, 7px) rotate(-.6deg); }
  20% { transform: translate(14px, -9px) rotate(.5deg); }
  30% { transform: translate(-11px, -6px) rotate(-.4deg); }
  42% { transform: translate(9px, 8px) rotate(.35deg); }
  55% { transform: translate(-7px, 4px); }
  70% { transform: translate(5px, -3px); }
  85% { transform: translate(-2px, 2px); }
}
.tb-escombros { position: fixed; inset: 0; z-index: 9997; pointer-events: none; overflow: hidden; }
.tb-escombros i {
  position: absolute; left: 50%; top: 45%; width: 8px; height: 8px; border-radius: 2px;
  background: var(--c, #ffb020); animation: tb-escombro 1s ease-out var(--d, 0ms) forwards;
}
@keyframes tb-escombro { from { transform: translate(0,0) rotate(0) scale(1); opacity: 1; } to { transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(.15); opacity: 0; } }

/* ---------- Responsive y accesibilidad ---------- */
@media (max-width: 640px) {
  .sala-chat-form input { font-size: 16px; }
  .penal-escena { height: 300px; border-radius: 16px; }
  .penal-tv { padding: 17px 10px 8px; }
  .penal-tv-equipo small { max-width: 82px; }
  .penal-tv-score { font-size: 26px; }
  .penal-arquero { width: 54px; height: 90px; }
  .penal-balon { width: 46px; height: 46px; margin-left: -23px; }
  .penal-balon span { width: 13px; height: 13px; margin: -6.5px; }
  .penal-balon-sombra { width: 56px; margin-left: -28px; }
  .penal-overlay { font-size: clamp(28px, 10vw, 58px); }
  .penal-btn { font-size: 14px; padding: 12px 6px; }
  .dados { padding: 30px 12px 20px; border-width: 6px; }
  .dado.small { width: 48px; height: 48px; padding: 6px; gap: 2px; }
  .dado.small .pip { width: 7px; height: 7px; }
  .tateti { gap: 6px; padding: 7px; }
  .bomba-escena { min-height: 340px; }
  .bomba-tnt { width: 88%; height: 158px; margin-top: 16px; }
  .bomba-panel { width: 72%; margin-top: -36px; padding: 8px 10px 9px; }
  .bomba-led { font-size: clamp(28px, 9vw, 40px); }
  .bomba-cables { gap: 7px; padding: 0 6px; }
  .bomba-cable { width: 29%; padding: 6px 4px 7px; }
  .bomba-cable .cable-hilo { height: 62px; }
  .bomba-cable .cable-nombre { font-size: 9px; }
  .bomba-alicate { display: block; right: 4%; bottom: 9%; font-size: 22px; opacity: .28; }
  .bomba-alicate.activo { opacity: .85; }
  .bomba-cable .cable-tijera { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .tb-flash-global, .tb-escombros, .bomba-fuego, .bomba-onda, .bomba-humo,
  .bomba-escombros-v, .bomba-chispas-capa, .bomba-vapor, .confetti-capa, .ppt-shockwave { display: none !important; }
  .tateti-trazo line, .tateti-trazo circle, .ppt-shockwave, .mano-reveal.izq, .mano-reveal.der,
  .dado.rolling, .dado.rolling::after, .penal-escena.anim-gol .penal-red, .penal-escena.anim-atajada,
  .penal-overlay, .penal-escena.anim-gol .penal-tribuna, .penal-escena.anim-gol .penal-focos .haz,
  .bomba-escena.urgente, .bomba-led.alerta, .bomba-fuego, .bomba-onda, .bomba-humo span,
  .bomba-escombros-v i, .tb-flash-global, .tb-escombros i, .tb-boom-shake, .bomba-chispa,
  .bomba-vapor span, .bomba-balizas span.verde, .bomba-overlay, .bomba-cable.marcada,
  .bomba-cable .cable-tijera, .bomba-cable.cortando { animation: none !important; }
}

/* ---------- Revancha dentro de la sala ---------- */
.revancha-panel {
  margin: 16px auto 4px; max-width: 560px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 13px 15px; border-radius: 16px; text-align: left;
  border: 1px solid rgba(77,171,255,.4);
  background: linear-gradient(135deg, rgba(15,35,60,.96), rgba(9,18,31,.96));
  box-shadow: 0 12px 28px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08);
}
.revancha-panel.entrante {
  border-color: rgba(239, 120, 120, .7);
  background: linear-gradient(135deg, rgba(55,38,12,.96), rgba(20,14,8,.96));
  box-shadow: 0 0 0 1px rgba(239, 120, 120, .22), 0 0 26px rgba(239, 120, 120, .18), 0 12px 28px rgba(0,0,0,.45);
  animation: revancha-pop .45s cubic-bezier(.2,1.5,.4,1) both;
}
.revancha-panel.enviada { border-color: rgba(77,171,255,.45); }
.revancha-icono {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 23px; border: 1px solid rgba(77,171,255,.35);
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.22), rgba(77,171,255,.15));
}
.revancha-panel.entrante .revancha-icono {
  border-color: rgba(239, 120, 120, .5); box-shadow: 0 0 16px rgba(239, 120, 120, .25);
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.28), rgba(239, 120, 120, .18));
}
.revancha-texto { flex: 1 1 220px; min-width: 0; }
.revancha-texto b { display: block; font-size: 15px; color: #fff; }
.revancha-panel.entrante .revancha-texto b { color: #ffe0a3; }
.revancha-texto p { margin: 3px 0 0; color: var(--suave); font-size: 12.5px; line-height: 1.35; }
.revancha-acciones { display: flex; gap: 7px; flex-wrap: wrap; }
.revancha-acciones .btn { font-size: 13px; padding: 8px 14px; }
@keyframes revancha-pop { from { transform: translateY(10px) scale(.96); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
@media (max-width: 560px) {
  .revancha-panel { align-items: flex-start; }
  .revancha-acciones { width: 100%; }
  .revancha-acciones .btn { flex: 1 1 0; }
}
@media (prefers-reduced-motion: reduce) { .revancha-panel.entrante { animation: none !important; } }

/* =====================================================================
   Integración con la Super-App: mismo encabezado, pie y tema social
   ===================================================================== */
.juego-body.superapp-body { padding-top: 56px; }
.juego-body > .sala-cont { position: relative; z-index: 1; padding-bottom: 82px; }
.juego-header .sala-saldo {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  min-height: 34px; padding: 0 12px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.07);
  color: #F1F5F9; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.juego-header .sala-saldo b { font-weight: 900; }
.juego-header .juego-perfil {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 180px;
  min-height: 36px; padding: 3px 10px 3px 4px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06);
  color: #F1F5F9; text-decoration: none; font-size: 13px; font-weight: 700;
  transition: background .2s ease, border-color .2s ease;
}
.juego-header .juego-perfil:hover { background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.25); }
.juego-header .juego-perfil b { max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.juego-avatar {
  width: 29px; height: 29px; flex: none; border-radius: 50%; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.28);
  background: linear-gradient(135deg, var(--perfil-accent, #38bdf8), var(--perfil-bg, #c94a4a));
  color: #fff; font-size: 12px; font-weight: 900; text-transform: uppercase;
}
.juego-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.juego-header .superapp-icono { color: #F1F5F9; }
.juego-header .superapp-icono svg { width: 18px; height: 18px; }
/* Accesos de la sala: cluster compacto y sin saltos */
.juego-body .superapp-acciones { gap: 6px; }
.juego-header .sala-saldo { min-height: 34px; }
@media (max-width: 1100px) {
  .juego-header .juego-perfil b { display: none; }
  .juego-header .juego-perfil { padding: 3px 5px 3px 3px; }
}
.juego-nav-activo { font-weight: 800 !important; }
.superapp-centro .juego-nav-activo {
  display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 34px;
  padding: 8px 14px; border-radius: 999px; color: #F1F5F9; font-size: 13px; font-weight: 800;
  white-space: nowrap; background: rgba(255,255,255,.08);
}
.superapp-centro .juego-nav-activo .icono-nav-svg { opacity: 1; stroke: var(--perfil-accent, #38BDF8); }
.footer-institucional {
  position: fixed; bottom: 0; left: 0; right: 0; width: 100%; max-width: 100%; height: 34px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0;
  padding: 0 24px; margin: 0; border-radius: 0;
  border-top: 1px solid var(--perfil-card-border, rgba(255,255,255,.08));
  background: var(--perfil-card-bg, rgba(15,23,42,.92)) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-sizing: border-box; overflow: hidden; font-size: 11.5px;
  color: var(--perfil-suave, rgba(241,245,249,.65)); z-index: 900;
}
.footer-col-izq { display: flex; align-items: center; justify-self: start; min-width: 0; opacity: .5; font-size: 11px; }
.footer-col-centro { display: flex; align-items: center; justify-content: center; justify-self: center; gap: 8px; min-width: 0; white-space: nowrap; text-align: center; }
.footer-col-der { display: flex; align-items: center; justify-content: flex-end; justify-self: end; gap: 14px; min-width: 0; }
.footer-col-der a, .footer-col-der span { color: var(--perfil-suave, rgba(241,245,249,.7)); text-decoration: none; transition: color .2s ease; cursor: pointer; }
.footer-col-der a:hover { color: var(--perfil-accent, #38BDF8); }
.footer-separador { opacity: .3; user-select: none; }
.footer-link { border: 0; padding: 2px 0; background: transparent; font: inherit; font-size: 11.5px; line-height: 1; cursor: pointer; }
.footer-link:focus-visible { color: var(--perfil-accent, #38BDF8); outline: none; }

/* El tema social manda sobre las variables históricas del juego. */
.juego-body[data-tema-activo] {
  --texto: var(--perfil-texto, #f8fafc);
  --suave: var(--perfil-suave, #aebdd2);
  --tarjeta: var(--perfil-superficie, rgba(15,23,42,.78));
  --borde: var(--perfil-borde, rgba(255,255,255,.12));
  --fondo: var(--perfil-superficie-2, rgba(2,6,23,.48));
  --azul: var(--perfil-accent, #38bdf8);
  --azul-2: var(--perfil-accent, #38bdf8);
  --azul-3: var(--perfil-accent, #38bdf8);
  --azul-claro: var(--perfil-acento-tenue, rgba(56,189,248,.16));
  --marca: var(--perfil-accent, #1f4f8f);
  --marca-2: var(--perfil-acento-borde, #2a62ad);
  --oro: var(--perfil-accent, #f49797);
  --oro-osc: var(--perfil-accent, #f49797);
  --btn-bg: var(--perfil-accent, #1f4f8f);
  --btn-bg-hover: var(--perfil-acento-borde, #2a62ad);
  --btn-texto: var(--perfil-acento-texto, #fff);
  --sombra: 0 18px 42px rgba(0,0,0,.35);
  background: var(--feed-fondo, var(--perfil-bg, #0f172a)) !important;
  background-attachment: fixed;
}
.juego-body[data-tema-activo]::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--tp-patron, none);
  background-size: var(--tp-size, 220px); background-repeat: repeat;
  opacity: var(--tp-op, .22); animation: var(--tp-anim, none);
}
.juego-body[data-tema-activo] > .sala-cont { position: relative; z-index: 1; }
.juego-body[data-tema-activo] > .superapp-header {
  background: var(--perfil-card-bg, rgba(15,23,42,.88)) !important;
  border-bottom: 1px solid var(--perfil-card-border, rgba(255,255,255,.08)) !important;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.juego-body[data-tema-activo] .superapp-header .superapp-marca,
.juego-body[data-tema-activo] .superapp-header .marca-texto,
.juego-body[data-tema-activo] .superapp-header .brand-text,
.juego-body[data-tema-activo] .superapp-header .marca-ek { color: var(--perfil-texto, #F1F5F9); }
.juego-body[data-tema-activo] .superapp-header .marca-ek i,
.juego-body[data-tema-activo] .superapp-header .brand-text i { color: var(--perfil-acento, #E25C50); }
.juego-body[data-tema-activo] .superapp-header .brand-icon { background: var(--perfil-acento, #E25C50); color: #ffffff; }
.juego-body[data-tema-activo] .superapp-header .icono-logo-svg { color: var(--perfil-acento, #E25C50); }
.juego-body[data-tema-activo] .superapp-header .icono-logo-svg rect { fill: var(--perfil-acento, #E25C50); }
.juego-body[data-tema-activo] .superapp-header .icono-logo-svg text { fill: #ffffff; }
.juego-body[data-tema-activo] .superapp-header .navbar-seccion-centro .nav-link-btn { color: var(--perfil-suave, rgba(241,245,249,.65)); }
.juego-body[data-tema-activo] .superapp-header .navbar-seccion-centro .nav-link-btn.activo,
.juego-body[data-tema-activo] .superapp-header .navbar-seccion-centro .nav-link-btn:hover:not(.activo) {
  background: var(--perfil-superficie-2, rgba(255,255,255,.08));
  border-color: var(--perfil-acento-borde, rgba(255,255,255,.05));
  color: var(--perfil-texto, #fff);
}
.juego-body[data-tema-activo] .superapp-centro .juego-nav-activo {
  color: var(--perfil-texto, #fff);
  background: var(--perfil-superficie-2, rgba(255,255,255,.08));
}
.juego-body[data-tema-activo] .superapp-header .superapp-icono {
  color: var(--perfil-texto, #F1F5F9);
  border-color: var(--perfil-borde, rgba(255,255,255,.14));
  background: var(--perfil-superficie-2, rgba(255,255,255,.04));
}
.juego-body[data-tema-activo] .superapp-header .superapp-icono:hover { background: var(--perfil-acento-tenue, rgba(255,255,255,.10)); }
.juego-body[data-tema-activo] .juego-header .sala-saldo {
  color: var(--perfil-texto, #F1F5F9);
  border-color: var(--perfil-borde, rgba(255,255,255,.14));
  background: var(--perfil-superficie-2, rgba(255,255,255,.04));
}
.juego-body[data-tema-activo] .juego-header .juego-perfil {
  color: var(--perfil-texto, #F1F5F9);
  border-color: var(--perfil-borde, rgba(255,255,255,.14));
  background: var(--perfil-superficie-2, rgba(255,255,255,.06));
}
.juego-body[data-tema-activo] .juego-header .juego-perfil:hover { background: var(--perfil-acento-tenue, rgba(255,255,255,.1)); }
.juego-body[data-tema-activo] .sala-tablero {
  background: radial-gradient(900px 340px at 50% -12%, var(--perfil-acento-tenue, rgba(56,189,248,.12)), transparent 65%), var(--perfil-superficie, #101a2b);
  border-color: var(--perfil-borde, rgba(255,255,255,.11));
  box-shadow: 0 24px 60px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
}
.juego-body[data-tema-activo] .sala-cab,
.juego-body[data-tema-activo] .sala-audio,
.juego-body[data-tema-activo] .sala-chat { border-color: var(--perfil-borde, rgba(255,255,255,.12)); }
.juego-body[data-tema-activo] .btn { color: var(--perfil-acento-texto, #fff); }
.juego-body[data-tema-activo] .btn.sec {
  background: var(--perfil-superficie-2, rgba(255,255,255,.08));
  color: var(--perfil-texto, #f8fafc);
  border-color: var(--perfil-borde, rgba(255,255,255,.16));
}
.juego-body[data-tema-activo] .btn.oro, .juego-body[data-tema-activo] .chip.oro { color: var(--perfil-acento-texto, #111827); }
.juego-body[data-tema-activo] .sala-apuesta { background: var(--perfil-accent, #f49797); color: var(--perfil-acento-texto, #111827); }
@media (max-width: 640px) {
  .juego-body > .sala-cont { padding-bottom: 110px; }
  .juego-header .juego-perfil { max-width: 132px; padding-right: 8px; }
  .juego-header .juego-perfil b { max-width: 70px; }
  .juego-header .sala-saldo { padding: 0 9px; font-size: 12px; }
  .footer-institucional { display: flex; flex-direction: column; justify-content: center; height: auto; min-height: 34px; padding: 8px 12px; gap: 4px; font-size: 10.5px; text-align: center; }
  .footer-col-izq { justify-self: auto; opacity: .45; font-size: 10px; }
  .footer-col-centro { justify-self: auto; white-space: normal; line-height: 1.35; }
  .footer-col-der { justify-self: auto; justify-content: center; gap: 8px; flex-wrap: wrap; }
  .footer-link { font-size: 10.5px; }
}
@media (max-width: 900px) {
  .juego-body .navbar-seccion-centro { gap: 4px; }
  .juego-body .navbar-seccion-centro .nav-link-btn { padding: 0 10px; font-size: 12.5px; }
}
@media (max-width: 768px) {
  .juego-body .superapp-header { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 8px; }
  .juego-body .navbar-seccion-centro .nav-label { display: none; }
  .juego-body .navbar-seccion-centro .nav-link-btn { width: 36px; padding: 0; gap: 0; }
  .juego-body .superapp-header .marca-texto { display: none; }
  .juego-body .juego-header .juego-perfil b { display: none; }
  .juego-body .juego-header .juego-perfil { padding: 3px 4px; }
}
@media (max-width: 480px) {
  .juego-body .superapp-header { padding: 0 10px; column-gap: 6px; }
  .juego-body .juego-header .sala-saldo { padding: 0 8px; }
}



/* =====================================================================
   PENALITO v3 — arquero arcade, balón 3D y rebote frontal
   ===================================================================== */
.penal-arquero-sombra {
  position: absolute; left: 50%; bottom: 12%; width: 82px; height: 19px; margin-left: -41px; z-index: 4;
  border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,.58), transparent 72%);
  filter: blur(3px); opacity: .85; transition: left .3s ease, transform .3s ease, opacity .3s ease;
}
.penal-arquero {
  position: absolute; left: 50%; bottom: 14%; width: 86px; height: 138px; z-index: 6;
  transform: translateX(-50%); transform-origin: 50% 100%;
  filter: drop-shadow(0 13px 10px rgba(0,0,0,.5));
  transition: left .3s cubic-bezier(.2,.8,.2,1), bottom .3s cubic-bezier(.2,.8,.2,1), transform .3s cubic-bezier(.2,.8,.2,1);
}
.arquero-cuerpo { position: absolute; inset: 0; transform-origin: 50% 100%; }
.penal-arquero.quieto .arquero-cuerpo { animation: arquero-idle 2.6s ease-in-out infinite; }
@keyframes arquero-idle {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-3px) rotate(.6deg); }
}
.penal-arquero.quieto .aq-brazo.i { animation: guante-idle-i 1.9s ease-in-out infinite; }
.penal-arquero.quieto .aq-brazo.d { animation: guante-idle-d 1.9s ease-in-out infinite; }
@keyframes guante-idle-i { 0%, 100% { transform: rotate(-18deg); } 50% { transform: rotate(-12deg) translateY(-1px); } }
@keyframes guante-idle-d { 0%, 100% { transform: rotate(18deg); } 50% { transform: rotate(12deg) translateY(-1px); } }
.aq-cabeza {
  position: absolute; left: 50%; top: 0; width: 24px; height: 26px; margin-left: -12px; z-index: 5;
  border-radius: 48% 48% 44% 44%; background: radial-gradient(circle at 38% 28%, #ffe1bf, #d69a6a 68%, #9a613a);
  box-shadow: inset 0 -3px 4px rgba(120,60,20,.22), 0 2px 3px rgba(0,0,0,.3);
}
.aq-cabeza::after {
  content: ''; position: absolute; left: 50%; top: 12px; width: 3px; height: 3px; margin-left: -6px;
  border-radius: 50%; background: #1e1712; box-shadow: 8px 0 0 #1e1712;
}
.aq-pelo {
  position: absolute; left: -1px; right: -1px; top: -3px; height: 13px; z-index: 1;
  border-radius: 50% 50% 28% 28%; background: linear-gradient(145deg, #4a2c1a, #1b1009 72%);
  box-shadow: inset 0 2px 3px rgba(255,255,255,.12);
}
.aq-cinta {
  position: absolute; left: -4px; right: -4px; top: 7px; height: 5px; z-index: 3; border-radius: 3px;
  background: linear-gradient(90deg, #b84a00, #ff8a1e 45%, #b84a00); transform: rotate(-2deg);
  box-shadow: 0 1px 2px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.35);
}
.aq-cinta::after { content: ''; position: absolute; left: 50%; top: -3px; width: 4px; height: 11px; background: #ffb02e; transform: translateX(-50%) rotate(16deg); border-radius: 2px; }
.aq-cuello {
  position: absolute; left: 50%; top: 22px; width: 11px; height: 8px; margin-left: -5.5px; z-index: 3;
  background: linear-gradient(#e0a172, #b97a4e); border-radius: 3px;
}
.aq-torso {
  position: absolute; left: 50%; top: 26px; width: 42px; height: 45px; margin-left: -21px; z-index: 4;
  border-radius: 13px 13px 10px 10px; overflow: hidden;
  background:
    linear-gradient(90deg, transparent 0 30%, rgba(255,122,0,.92) 30% 40%, transparent 40% 60%, rgba(255,122,0,.92) 60% 70%, transparent 70%),
    radial-gradient(circle at 35% 12%, #68ffa9, #15d873 42%, #087d43 100%);
  box-shadow: inset 0 3px 4px rgba(255,255,255,.28), inset 0 -7px 10px rgba(0,0,0,.28), 0 3px 5px rgba(0,0,0,.35);
}
.aq-torso::before { content: ''; position: absolute; left: 50%; top: -2px; width: 15px; height: 7px; transform: translateX(-50%); border-radius: 0 0 7px 7px; background: #f4f7f7; box-shadow: 0 1px 0 rgba(0,0,0,.25); }
.aq-torso::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(2,32,18,.28); }
.aq-franja { position: absolute; top: 0; bottom: 0; width: 4px; background: #ff7a00; opacity: .95; }
.aq-franja.f1 { left: 11px; } .aq-franja.f2 { right: 11px; }
.aq-dorsal {
  position: absolute; left: 50%; top: 8px; transform: translateX(-50%); z-index: 2;
  font: 900 14px/1 'Arial Black', Arial, sans-serif; color: #fff;
  text-shadow: 0 1px 0 #064f2b, 0 0 4px rgba(0,0,0,.8);
}
.aq-short {
  position: absolute; left: 50%; top: 66px; width: 38px; height: 21px; margin-left: -19px; z-index: 3;
  border-radius: 6px 6px 8px 8px; background: linear-gradient(180deg, #162538, #07101b 72%);
  box-shadow: inset 0 2px 2px rgba(255,255,255,.13), 0 2px 4px rgba(0,0,0,.35);
}
.aq-short::after { content: ''; position: absolute; left: 5px; right: 5px; top: 3px; height: 2px; border-radius: 2px; background: #ff7a00; }
.aq-short i { position: absolute; left: 50%; top: 8px; width: 4px; height: 10px; transform: translateX(-50%); background: rgba(255,255,255,.45); border-radius: 2px; }
.aq-pierna {
  position: absolute; top: 83px; width: 13px; height: 43px; z-index: 2; transform-origin: 50% 0;
  transition: transform .32s cubic-bezier(.2,1.3,.4,1);
}
.aq-pierna.i { left: 23px; transform: rotate(4deg); }
.aq-pierna.d { right: 23px; transform: rotate(-4deg); }
.aq-media {
  position: absolute; left: 0; right: 0; bottom: 5px; height: 28px; border-radius: 5px;
  background: linear-gradient(180deg, #f8faf7 0%, #e1e8e5 62%, #b9c7c4 100%);
  box-shadow: inset -2px 0 3px rgba(0,0,0,.15);
}
.aq-media::after { content: ''; position: absolute; left: 0; right: 0; top: 2px; height: 4px; background: #ff7a00; }
.aq-media::before { content: ''; position: absolute; left: 50%; top: 8px; width: 2px; height: 18px; transform: translateX(-50%); background: #0d9a56; opacity: .55; }
.aq-botin {
  position: absolute; left: -3px; bottom: -4px; width: 19px; height: 10px; z-index: 2;
  border-radius: 3px 7px 4px 4px; background: linear-gradient(180deg, #262c32, #080b0e);
  box-shadow: 0 2px 3px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.2);
}
.aq-botin::before {
  content: ''; position: absolute; left: 3px; right: 3px; bottom: -2px; height: 3px;
  background: radial-gradient(circle, #d7dde2 0 1.5px, transparent 2px) 0 0 / 7px 3px repeat-x;
  opacity: .8;
}
.aq-botin::after { content: ''; position: absolute; left: 3px; top: 2px; width: 8px; height: 2px; border-radius: 2px; background: #ff7a00; opacity: .85; }
.aq-brazo {
  position: absolute; top: 34px; width: 34px; height: 11px; z-index: 2; border-radius: 8px;
  background: linear-gradient(180deg, #ffe0bd, #d69a6a 68%, #a5663c);
  transform-origin: 100% 50%; transition: transform .3s cubic-bezier(.2,1.3,.4,1);
  box-shadow: 0 2px 4px rgba(0,0,0,.3);
}
.aq-brazo.i { left: -22px; transform: rotate(-18deg); }
.aq-brazo.d { right: -22px; transform-origin: 0 50%; transform: rotate(18deg); }
.aq-guante {
  position: absolute; top: 50%; width: 21px; height: 24px; margin-top: -12px; z-index: 3;
  border-radius: 8px 8px 10px 10px; border: 1px solid #5d2600;
  background:
    repeating-linear-gradient(45deg, rgba(75,20,0,.18) 0 2px, transparent 2px 5px),
    radial-gradient(circle at 32% 22%, #ffe08a, #ff9a1f 40%, #d25700 78%, #7d2a00);
  box-shadow: 0 3px 6px rgba(0,0,0,.45), inset 0 2px 2px rgba(255,255,255,.35);
}
.aq-brazo.i .aq-guante { left: -14px; }
.aq-brazo.d .aq-guante { right: -14px; }
.aq-guante::before {
  content: ''; position: absolute; left: 2px; right: 2px; top: 3px; bottom: 4px; border-radius: 6px;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.16) 0 1px, transparent 1px 4px);
  opacity: .8;
}
.aq-guante::after {
  content: ''; position: absolute; left: 50%; bottom: -4px; width: 17px; height: 5px; transform: translateX(-50%);
  border-radius: 2px; background: repeating-linear-gradient(90deg, #eef2f5 0 3px, #9aa5ad 3px 4px);
  box-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.penal-arquero.tirar-izquierda {
  left: 23%; bottom: 20%; transform: translateX(-50%) rotate(-42deg) scale(1.06);
}
.penal-arquero.tirar-derecha {
  left: 77%; bottom: 20%; transform: translateX(-50%) rotate(42deg) scale(1.06);
}
.penal-arquero.tirar-izquierda .aq-brazo.i { transform: rotate(-84deg) translateX(-13px) scaleY(1.18); }
.penal-arquero.tirar-izquierda .aq-brazo.d { transform: rotate(-64deg) translateX(-5px) scaleY(1.08); }
.penal-arquero.tirar-derecha .aq-brazo.d { transform: rotate(84deg) translateX(13px) scaleY(1.18); }
.penal-arquero.tirar-derecha .aq-brazo.i { transform: rotate(64deg) translateX(5px) scaleY(1.08); }
.penal-arquero.tirar-izquierda .aq-pierna.i { transform: rotate(-18deg); }
.penal-arquero.tirar-izquierda .aq-pierna.d { transform: rotate(9deg); }
.penal-arquero.tirar-derecha .aq-pierna.d { transform: rotate(18deg); }
.penal-arquero.tirar-derecha .aq-pierna.i { transform: rotate(-9deg); }
.penal-escena.anim-atajada .penal-arquero-sombra { opacity: .45; transform: scale(1.2, .7); }
.penal-escena.anim-atajada.arq-izq .penal-arquero-sombra { left: 23%; }
.penal-escena.anim-atajada.arq-der .penal-arquero-sombra { left: 77%; }
.penal-escena.anim-gol .penal-arquero-sombra { opacity: .45; transform: scale(1.18, .72); }
.penal-escena.anim-gol.arq-izq .penal-arquero-sombra { left: 23%; }
.penal-escena.anim-gol.arq-der .penal-arquero-sombra { left: 77%; }
.penal-escena.anim-gol .arquero-cuerpo { animation: arquero-lamento .82s .25s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes arquero-lamento {
  0% { transform: translateY(0) rotate(0) scale(1); opacity: 1; }
  42% { transform: translateY(5px) rotate(-9deg) scale(1); opacity: 1; }
  100% { transform: translateY(20px) rotate(-78deg) scale(.97); opacity: .9; }
}
.penal-arquero .aq-guante { transition: box-shadow .16s ease, transform .2s ease; }
.penal-escena.anim-atajada .penal-arquero .aq-guante { box-shadow: 0 0 18px rgba(255,220,80,.9), 0 0 36px rgba(255,140,0,.55), 0 3px 6px rgba(0,0,0,.45); }

.penal-balon {
  position: absolute; left: 50%; bottom: 7%; width: 60px; height: 60px; margin-left: -30px; z-index: 7;
  border-radius: 50%; overflow: hidden; border: 2px solid #1b2129;
  background: radial-gradient(circle at 31% 25%, #ffffff 0 18%, #f8fafc 30%, #dbe2e8 52%, #b0bac4 72%, #727d89 100%);
  box-shadow: 0 15px 22px rgba(0,0,0,.42), inset -7px -8px 14px rgba(0,0,0,.28), inset 5px 6px 12px rgba(255,255,255,.55);
  transform-origin: 50% 50%; will-change: left, bottom, transform;
}
.penal-balon::before {
  content: ''; position: absolute; inset: 0; z-index: 3; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 30% 22%, rgba(255,255,255,.92) 0 4%, transparent 17%), radial-gradient(circle at 72% 82%, rgba(0,0,0,.18), transparent 52%);
}
.penal-balon::after { content: ''; position: absolute; inset: 6%; z-index: 3; border-radius: 50%; border: 1px solid rgba(20,28,36,.14); pointer-events: none; }
.penal-balon span, .penal-balon i {
  position: absolute; display: block; background: #1b222b;
  clip-path: polygon(50% 0%, 100% 38%, 81% 100%, 19% 100%, 0% 38%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.18);
}
.penal-balon span { left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; z-index: 2; }
.penal-balon .p1 { left: 11%; top: 23%; width: 9px; height: 9px; transform: rotate(22deg); }
.penal-balon .p2 { right: 10%; top: 20%; width: 8px; height: 8px; transform: rotate(-28deg); }
.penal-balon .p3 { left: 22%; bottom: 13%; width: 8px; height: 8px; transform: rotate(48deg); }
.penal-balon .p4 { right: 19%; bottom: 15%; width: 9px; height: 9px; transform: rotate(-12deg); }
.penal-balon .costura {
  left: 13%; top: 18%; width: 74%; height: 64%; background: transparent; border: 1.5px solid rgba(20,28,36,.3);
  border-radius: 50%; transform: rotate(-24deg); clip-path: none; box-shadow: none; opacity: .7;
}
.penal-balon .costura::after {
  content: ''; position: absolute; inset: 15%; border: 1px solid rgba(20,28,36,.2); border-radius: 50%; transform: rotate(58deg);
}
.penal-balon .brillo {
  left: 20%; top: 10%; width: 21px; height: 11px; border-radius: 50%; transform: rotate(-28deg); z-index: 4;
  background: radial-gradient(ellipse, rgba(255,255,255,.95), transparent 72%);
  clip-path: none; box-shadow: none;
}
.penal-balon-sombra {
  position: absolute; left: 50%; bottom: 5%; width: 72px; height: 18px; margin-left: -36px; z-index: 4;
  border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,.56), transparent 72%);
  filter: blur(3px); opacity: .82; transform-origin: 50% 50%;
}
.penal-escena.anim-atajada .penal-balon-sombra { animation: sombra-rebote 1.02s ease-out forwards; }
.penal-escena.anim-atajada.lado-der .penal-balon-sombra { animation-name: sombra-rebote-der; }
@keyframes sombra-rebote-der {
  0% { left: 50%; bottom: 4%; width: 72px; margin-left: -36px; opacity: .82; transform: scale(1); }
  24% { left: 72%; bottom: 4%; width: 48px; margin-left: -24px; opacity: .32; transform: scale(.68); }
  52% { left: 61%; bottom: 4%; width: 82px; margin-left: -41px; opacity: .72; transform: scale(1.1); }
  68% { left: 51%; bottom: 3%; width: 64px; margin-left: -32px; opacity: .5; transform: scale(.86); }
  80% { left: 47%; bottom: 3%; width: 74px; margin-left: -37px; opacity: .62; transform: scale(1); }
  100% { left: 49%; bottom: 3%; width: 70px; margin-left: -35px; opacity: .7; transform: scale(.96); }
}
@keyframes sombra-rebote {
  0% { left: 50%; bottom: 4%; width: 72px; margin-left: -36px; opacity: .82; transform: scale(1); }
  24% { left: 28%; bottom: 4%; width: 48px; margin-left: -24px; opacity: .32; transform: scale(.68); }
  52% { left: 39%; bottom: 4%; width: 82px; margin-left: -41px; opacity: .72; transform: scale(1.1); }
  68% { left: 49%; bottom: 3%; width: 64px; margin-left: -32px; opacity: .5; transform: scale(.86); }
  80% { left: 53%; bottom: 3%; width: 74px; margin-left: -37px; opacity: .62; transform: scale(1); }
  100% { left: 51%; bottom: 3%; width: 70px; margin-left: -35px; opacity: .7; transform: scale(.96); }
}
.penal-escena.anim-gol.lado-izq .penal-balon-sombra { animation: sombra-gol-izq .82s ease-out forwards; }
.penal-escena.anim-gol.lado-der .penal-balon-sombra { animation: sombra-gol-der .82s ease-out forwards; }
@keyframes sombra-gol-izq {
  0% { left: 50%; bottom: 4%; width: 72px; margin-left: -36px; opacity: .82; transform: scale(1); }
  50% { left: 34%; bottom: 4%; width: 48px; margin-left: -24px; opacity: .4; transform: scale(.7); }
  100% { left: 21%; bottom: 4%; width: 28px; margin-left: -14px; opacity: .06; transform: scale(.4); }
}
@keyframes sombra-gol-der {
  0% { left: 50%; bottom: 4%; width: 72px; margin-left: -36px; opacity: .82; transform: scale(1); }
  50% { left: 66%; bottom: 4%; width: 48px; margin-left: -24px; opacity: .4; transform: scale(.7); }
  100% { left: 79%; bottom: 4%; width: 28px; margin-left: -14px; opacity: .06; transform: scale(.4); }
}
.penal-balon.chutar-izquierda.gol { animation: balon-gol-izq .92s cubic-bezier(.2,.8,.2,1) forwards; }
.penal-balon.chutar-derecha.gol { animation: balon-gol-der .92s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes balon-gol-izq {
  0% { left: 50%; bottom: 7%; transform: rotate(0) rotateY(0) scale(1.12, .9); }
  16% { left: 47%; bottom: 20%; transform: rotate(-42deg) rotateY(72deg) scale(.96); }
  55% { left: 34%; bottom: 44%; transform: rotate(-165deg) rotateY(220deg) scale(.84); }
  100% { left: 22%; bottom: 57%; transform: rotate(-305deg) rotateY(360deg) scale(.66); }
}
@keyframes balon-gol-der {
  0% { left: 50%; bottom: 7%; transform: rotate(0) rotateY(0) scale(1.12, .9); }
  16% { left: 53%; bottom: 20%; transform: rotate(42deg) rotateY(-72deg) scale(.96); }
  55% { left: 66%; bottom: 44%; transform: rotate(165deg) rotateY(-220deg) scale(.84); }
  100% { left: 78%; bottom: 57%; transform: rotate(305deg) rotateY(-360deg) scale(.66); }
}
.penal-balon.chutar-izquierda.atajada { animation: rebote-izq 1.02s cubic-bezier(.2,.8,.2,1) forwards; }
.penal-balon.chutar-derecha.atajada { animation: rebote-der 1.02s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes rebote-izq {
  0% { left: 50%; bottom: 7%; transform: rotate(0) rotateY(0) scale(1.12, .9); }
  14% { left: 47%; bottom: 19%; transform: rotate(-48deg) rotateY(78deg) scale(.9); }
  24% { left: 27%; bottom: 45%; transform: rotate(-122deg) rotateY(162deg) scale(.78); }
  30% { left: 25%; bottom: 43%; transform: rotate(-146deg) rotateY(180deg) scale(1.24, .82); }
  52% { left: 38%; bottom: 24%; transform: rotate(-222deg) rotateY(280deg) scale(1.48); }
  68% { left: 50%; bottom: 5%; transform: rotate(-270deg) rotateY(340deg) scale(1.38, .9); }
  80% { left: 54%; bottom: 15%; transform: rotate(-306deg) rotateY(378deg) scale(1.3); }
  90% { left: 51%; bottom: 7%; transform: rotate(-338deg) rotateY(410deg) scale(1.34, .95); }
  100% { left: 50%; bottom: 10%; transform: rotate(-360deg) rotateY(440deg) scale(1.28); }
}
@keyframes rebote-der {
  0% { left: 50%; bottom: 7%; transform: rotate(0) rotateY(0) scale(1.12, .9); }
  14% { left: 53%; bottom: 19%; transform: rotate(48deg) rotateY(-78deg) scale(.9); }
  24% { left: 73%; bottom: 45%; transform: rotate(122deg) rotateY(-162deg) scale(.78); }
  30% { left: 75%; bottom: 43%; transform: rotate(146deg) rotateY(-180deg) scale(1.24, .82); }
  52% { left: 62%; bottom: 24%; transform: rotate(222deg) rotateY(-280deg) scale(1.48); }
  68% { left: 50%; bottom: 5%; transform: rotate(270deg) rotateY(-340deg) scale(1.38, .9); }
  80% { left: 46%; bottom: 15%; transform: rotate(306deg) rotateY(-378deg) scale(1.3); }
  90% { left: 49%; bottom: 7%; transform: rotate(338deg) rotateY(-410deg) scale(1.34, .95); }
  100% { left: 50%; bottom: 10%; transform: rotate(360deg) rotateY(-440deg) scale(1.28); }
}
.penal-impacto {
  position: absolute; left: 25%; bottom: 43%; width: 24px; height: 24px; z-index: 9; opacity: 0;
  transform: translate(-50%, 50%) scale(.3); pointer-events: none;
}
.penal-escena.lado-der .penal-impacto { left: 75%; }
.penal-escena.anim-atajada .penal-impacto { animation: impacto-flash .52s .16s ease-out forwards; }
@keyframes impacto-flash {
  0% { opacity: 0; transform: translate(-50%, 50%) scale(.25); }
  24% { opacity: 1; transform: translate(-50%, 50%) scale(1.25); }
  55% { opacity: .85; transform: translate(-50%, 50%) scale(1.55); }
  100% { opacity: 0; transform: translate(-50%, 50%) scale(2.1); }
}
.penal-impacto span {
  position: absolute; inset: -10px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 8%, #ffe066 22%, rgba(255,140,0,.85) 42%, transparent 70%);
  filter: blur(1px);
}
.penal-impacto::before {
  content: ''; position: absolute; inset: -14px; border-radius: 50%;
  border: 2px solid rgba(255,240,180,.9); box-shadow: 0 0 18px rgba(255,190,60,.8);
}
.penal-impacto i {
  position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; border-radius: 50%;
  background: #ffd166; box-shadow: 0 0 8px #ffb020, 0 0 16px #ff7a00;
}
.penal-impacto i:nth-child(1) { transform: translate(-30px, -20px) rotate(-25deg); }
.penal-impacto i:nth-child(2) { transform: translate(22px, -26px) rotate(18deg); }
.penal-impacto i:nth-child(3) { transform: translate(-24px, 18px) rotate(12deg); }
.penal-impacto i:nth-child(4) { transform: translate(28px, 15px) rotate(-18deg); }
.penal-escena.anim-atajada { animation: sacudida-atajada .52s .12s; }
@keyframes sacudida-atajada {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  12% { transform: translate(-11px, 5px) rotate(-.7deg); }
  24% { transform: translate(10px, -7px) rotate(.6deg); }
  38% { transform: translate(-8px, 4px) rotate(-.4deg); }
  52% { transform: translate(7px, -3px); }
  68% { transform: translate(-4px, 2px); }
  82% { transform: translate(2px, -1px); }
}
@media (max-width: 640px) {
  .penal-escena { height: 320px; }
  .penal-arquero { width: 74px; height: 119px; bottom: 13%; }
  .penal-arquero .aq-cabeza { width: 21px; height: 23px; margin-left: -10.5px; }
  .penal-arquero .aq-torso { width: 36px; height: 39px; margin-left: -18px; }
  .penal-arquero .aq-short { width: 33px; margin-left: -16.5px; }
  .penal-arquero .aq-pierna.i { left: 20px; } .penal-arquero .aq-pierna.d { right: 20px; }
  .penal-arquero .aq-brazo { width: 29px; }
  .penal-arquero .aq-brazo.i { left: -19px; } .penal-arquero .aq-brazo.d { right: -19px; }
  .penal-balon { width: 54px; height: 54px; margin-left: -27px; }
  .penal-balon-sombra { width: 64px; margin-left: -32px; }
}
@media (prefers-reduced-motion: reduce) {
  .penal-arquero.quieto .arquero-cuerpo, .penal-arquero.quieto .aq-brazo,
  .penal-balon.chutar-izquierda, .penal-balon.chutar-derecha,
  .penal-escena.anim-atajada, .penal-escena.anim-atajada .penal-balon-sombra,
  .penal-escena.anim-atajada .penal-impacto, .penal-escena.anim-gol .arquero-cuerpo,
  .penal-escena.anim-gol .penal-balon-sombra { animation: none !important; }
}

/* =====================================================================
   ¿DÓNDE ESTÁ LA GEMA? — tres vasos, mesa de paño y mezcla rAF
   ===================================================================== */
.vasos-titulo { text-align: center; margin: 0 0 9px; font-size: clamp(20px, 4vw, 29px); letter-spacing: .01em; }
.vasos-titulo span { display: block; font-size: 9px; letter-spacing: .24em; color: var(--perfil-accent, #ffd166); opacity: .9; }
.vasos-tv {
  position: relative; overflow: hidden; padding: 10px 14px 9px; border-radius: 14px;
  background: linear-gradient(180deg, #202820 0%, #0c1710 62%, #070d0a 100%);
  border: 1px solid #43553d; box-shadow: 0 10px 24px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.13);
}
.vasos-tv::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.16) 3px 4px); opacity: .4; }
.vasos-live { position: absolute; top: 5px; right: 9px; z-index: 2; display: inline-flex; gap: 4px; align-items: center; font-size: 8px; font-weight: 900; letter-spacing: .1em; color: #ff6b4a; }
.vasos-live i { width: 5px; height: 5px; border-radius: 50%; background: #ff4d3d; box-shadow: 0 0 8px #ff4d3d; animation: vasos-live .9s infinite alternate; }
@keyframes vasos-live { from { opacity: .35; } to { opacity: 1; } }
.vasos-tv-fila { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.vasos-jugador { display: flex; align-items: center; gap: 8px; min-width: 0; }
.vasos-jugador.rival { justify-content: flex-end; text-align: right; }
.vasos-jugador b { display: block; font-size: 12px; color: #f4fff0; }
.vasos-jugador small { display: block; font-size: 10px; color: #9fb59a; }
.vasos-avatar {
  flex: none; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 900; color: #fff; border: 2px solid #ffd166; background: radial-gradient(circle at 35% 28%, #6effa7, #0d9a56 52%, #043d22);
  box-shadow: 0 0 12px rgba(255,209,102,.35), inset 0 1px 1px rgba(255,255,255,.4);
}
.vasos-avatar.rival { border-color: #ff6b6b; background: radial-gradient(circle at 35% 28%, #ffc3c3, #b3261e 52%, #3d0709); box-shadow: 0 0 12px rgba(255,107,107,.35), inset 0 1px 1px rgba(255,255,255,.4); }
.vasos-vidas { display: flex; gap: 2px; margin-top: 3px; justify-content: flex-start; }
.vasos-jugador.rival .vasos-vidas { justify-content: flex-end; }
.vasos-vida { font-size: 14px; line-height: 1; filter: drop-shadow(0 0 4px rgba(255,209,102,.4)); }
.vasos-vida.off { filter: grayscale(1); opacity: .38; }
.vasos-ronda { text-align: center; line-height: 1; }
.vasos-ronda span { display: block; font-size: 8px; letter-spacing: .18em; color: #8ea18a; }
.vasos-ronda b { display: block; font-size: 27px; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 0 12px rgba(126,255,150,.45); }
.vasos-ronda small { display: block; font-size: 9px; color: #8ea18a; }
.vasos-escena {
  position: relative; height: clamp(330px, 44vw, 410px); border-radius: 22px; overflow: hidden; margin-top: 10px;
  background: radial-gradient(ellipse at 50% 0%, #1b3140, #09131b 68%, #05090d);
  border: 1px solid rgba(126,255,150,.14); box-shadow: inset 0 -28px 60px rgba(0,0,0,.7), 0 18px 40px rgba(0,0,0,.35);
  isolation: isolate; touch-action: manipulation;
}
.vasos-tribuna { position: absolute; inset: 0 0 52% 0; z-index: 0; background: radial-gradient(ellipse at 50% 100%, rgba(126,255,150,.12), transparent 65%), linear-gradient(180deg, #060e14, #11242e); }
.vasos-tribuna::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.28) 1px, transparent 1.5px); background-size: 24px 16px; opacity: .35; }
.vasos-focos { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.vasos-focos i { position: absolute; top: 1%; width: 12px; height: 12px; border-radius: 50%; background: #fffbe6; box-shadow: 0 0 14px #fff, 0 0 44px rgba(255,255,200,.8); }
.vasos-focos i.izq { left: 14%; } .vasos-focos i.der { right: 14%; }
.vasos-mesa {
  position: absolute; left: 5%; right: 5%; bottom: 7%; height: 60%; z-index: 2; perspective: 900px;
  border-radius: 20px 20px 26px 26px; border: 10px solid #3d2512;
  background: linear-gradient(135deg, #0e3e35 0%, #146b52 45%, #0c352c 100%);
  box-shadow: inset 0 -24px 40px rgba(0,0,0,.6), inset 0 10px 24px rgba(255,255,255,.06), 0 22px 32px rgba(0,0,0,.55);
}
.vasos-mesa::before {
  content: ''; position: absolute; inset: 0; border-radius: 12px; pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 18px);
}
.vasos-pano { position: absolute; inset: 0; border-radius: 12px; background: radial-gradient(ellipse at 50% 20%, rgba(180,255,210,.16), transparent 65%); }
.vasos-gema-zocalo { position: absolute; left: 50%; bottom: 14%; width: 54%; height: 13%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,.32), transparent 70%); filter: blur(2px); z-index: 1; }
.vaso {
  position: absolute; left: 50%; bottom: 13%; width: clamp(64px, 15vw, 92px); height: clamp(100px, 21vw, 132px);
  padding: 0; border: 0; background: transparent; transform: translateX(-50%); z-index: 4; cursor: pointer;
  transition: filter .16s, transform .16s; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.vaso:hover:not(:disabled), .vaso:focus-visible:not(:disabled) { filter: drop-shadow(0 0 14px rgba(255,209,102,.7)); transform: translateX(-50%) translateY(-3px); }
.vaso:disabled { cursor: default; }
.vaso-sombra { position: absolute; left: 50%; bottom: -3%; width: 92%; height: 15%; border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,.6), transparent 72%); filter: blur(3px); transform: translateX(-50%); z-index: 0; transition: transform .2s, opacity .2s; }
.vaso-cuerpo {
  position: absolute; inset: 0 5% 12%; overflow: hidden; z-index: 2;
  clip-path: polygon(9% 0, 91% 0, 78% 82%, 50% 100%, 22% 82%);
  background:
    linear-gradient(90deg, #4d2b07 0%, #c58a1f 18%, #ffe28a 42%, #e5ad32 58%, #a46714 78%, #3c2205 100%);
  box-shadow: inset -8px 0 10px rgba(70,30,0,.55), inset 8px 0 8px rgba(255,247,190,.26), inset 0 -18px 26px rgba(80,35,0,.45);
}
.vaso-cuerpo::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(110deg, rgba(255,255,255,.13) 0 2px, transparent 2px 17px), repeating-linear-gradient(70deg, rgba(90,45,0,.12) 0 2px, transparent 2px 23px); opacity: .55; }
.vaso-aro { position: absolute; left: 4%; right: 4%; top: 0; height: 8%; border-radius: 50%; background: linear-gradient(180deg, #fff6b8, #e3aa2e 48%, #6a3b04); box-shadow: 0 2px 4px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.8); z-index: 3; }
.vaso-brillo { position: absolute; left: 20%; top: 11%; width: 12%; height: 62%; border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255,.75), transparent 75%); filter: blur(1px); opacity: .65; }
.vaso-base { position: absolute; left: 20%; right: 20%; bottom: 5%; height: 11%; border-radius: 50%; background: linear-gradient(180deg, #dba52e, #5e3305 70%, #2a1703); box-shadow: 0 3px 6px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.4); z-index: 3; }
.vaso-num { position: absolute; left: 50%; bottom: 1%; transform: translateX(-50%); z-index: 5; font-size: 10px; font-weight: 900; color: rgba(255,245,190,.8); text-shadow: 0 1px 2px #2e1900; }
.vaso.colocando { animation: vaso-coloca .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes vaso-coloca {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  32%, 64% { transform: translateX(-50%) translateY(-48px) rotate(-2deg); }
}
.vaso.cruzando .vaso-sombra { opacity: .35; transform: translateX(-50%) scale(.72); }
.vasos-gema {
  position: absolute; left: var(--gx); bottom: 18%; width: 38px; height: 44px; z-index: 2;
  transform: translateX(-50%) scale(.7); opacity: 0; pointer-events: none;
  filter: drop-shadow(0 0 10px rgba(56,189,248,.75)) drop-shadow(0 0 26px rgba(192,132,252,.45));
  transition: opacity .22s, transform .22s;
}
.vasos-gema.visible { opacity: 1; transform: translateX(-50%) scale(1); animation: gema-brilla 1.1s ease-in-out infinite alternate; }
@keyframes gema-brilla { from { filter: drop-shadow(0 0 8px rgba(56,189,248,.65)) drop-shadow(0 0 18px rgba(192,132,252,.35)); } to { filter: drop-shadow(0 0 14px rgba(125,211,252,1)) drop-shadow(0 0 34px rgba(216,180,254,.8)); } }
.vasos-gema i {
  position: absolute; inset: 0; display: block;
  clip-path: polygon(50% 0, 96% 34%, 50% 100%, 4% 34%);
  background: linear-gradient(135deg, #f0fdff 0%, #7dd3fc 26%, #38bdf8 48%, #7c3aed 74%, #f0abfc 100%);
  box-shadow: inset 0 4px 8px rgba(255,255,255,.7), inset 0 -6px 10px rgba(40,20,100,.55);
}
.vasos-gema i::after { content: ''; position: absolute; left: 50%; top: 8%; width: 48%; height: 58%; transform: translateX(-50%); clip-path: polygon(50% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.08)); opacity: .7; }
.vasos-gema b { position: absolute; left: 16%; bottom: 8%; width: 30%; height: 45%; background: linear-gradient(180deg, rgba(255,255,255,.5), transparent); clip-path: polygon(0 0,100% 35%,72% 100%,0 70%); opacity: .7; }
.vasos-gema > span { position: absolute; left: 52%; top: -8%; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px #fff, 0 0 20px #7dd3fc; animation: gema-chispa 1s ease-in-out infinite alternate; }
@keyframes gema-chispa { from { opacity: .2; transform: scale(.5); } to { opacity: 1; transform: scale(1.25); } }
.vasos-destellos { position: absolute; left: var(--gx); bottom: 22%; width: 10px; height: 10px; transform: translateX(-50%); z-index: 6; pointer-events: none; }
.vasos-destellos i { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: #ffe066; box-shadow: 0 0 10px #ffe066, 0 0 22px #ff9a1f; animation: destello-gema .9s ease-out infinite; }
.vasos-destellos i:nth-child(1) { --x: -58px; --y: -42px; animation-delay: 0s; }
.vasos-destellos i:nth-child(2) { --x: 46px; --y: -50px; animation-delay: .08s; }
.vasos-destellos i:nth-child(3) { --x: -72px; --y: 12px; animation-delay: .16s; }
.vasos-destellos i:nth-child(4) { --x: 65px; --y: 8px; animation-delay: .24s; }
.vasos-destellos i:nth-child(5) { --x: -20px; --y: -72px; animation-delay: .32s; }
.vasos-destellos i:nth-child(6) { --x: 16px; --y: -82px; animation-delay: .4s; }
.vasos-destellos i:nth-child(7) { --x: -40px; --y: 46px; animation-delay: .48s; }
.vasos-destellos i:nth-child(8) { --x: 38px; --y: 43px; animation-delay: .56s; }
@keyframes destello-gema { 0% { opacity: 0; transform: translate(0,0) scale(.2); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.3); } }
.vasos-estado {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 7;
  padding: 5px 13px; border-radius: 999px; border: 1px solid rgba(255,209,102,.35);
  background: rgba(6,16,13,.72); color: #ffe9a8; font-size: 9px; font-weight: 900; letter-spacing: .16em; white-space: nowrap;
  box-shadow: 0 0 16px rgba(255,209,102,.12); backdrop-filter: blur(4px);
}
.vasos-estado.mezcla { color: #9cffcb; border-color: rgba(126,255,150,.4); animation: vasos-live .55s infinite alternate; }
.vasos-estado.eleccion { color: #ffd166; }
.vasos-estado.revelar { color: #fff; }
.vasos-escena.revelar .vaso.elegido, .vasos-escena.revelar .vaso.verdadero { animation: vaso-revela .72s .12s cubic-bezier(.2,1.3,.4,1) forwards; }
.vasos-escena.revelar.fallo .vaso.elegido { animation: vaso-vacio .55s .08s ease-in-out; }
.vasos-escena.revelar.fallo .vaso.verdadero { animation: vaso-revela .72s .72s cubic-bezier(.2,1.3,.4,1) forwards; }
@keyframes vaso-revela { 0% { transform: translateX(-50%) translateY(0) rotate(0); } 38% { transform: translateX(-50%) translateY(-62px) rotate(-4deg); } 100% { transform: translateX(-50%) translateY(-54px) rotate(-2deg); } }
@keyframes vaso-vacio {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  20% { transform: translateX(-56%) translateY(-5px) rotate(-4deg); }
  40% { transform: translateX(-44%) translateY(-2px) rotate(4deg); }
  60% { transform: translateX(-55%) translateY(-4px) rotate(-3deg); }
  80% { transform: translateX(-46%) translateY(-1px) rotate(2deg); }
}
.vasos-escena.revelar .vasos-gema { z-index: 8; bottom: 24%; }
.vasos-overlay {
  position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: Impact, 'Arial Black', sans-serif; font-size: clamp(34px, 9vw, 82px); font-weight: 900; text-align: center;
  pointer-events: none; animation: grito .5s cubic-bezier(.2,1.6,.4,1) both;
}
.vasos-overlay small { display: block; margin-top: 4px; font-family: inherit; font-size: .22em; letter-spacing: .2em; opacity: .9; }
.vasos-overlay.acierto { color: #fbffb0; text-shadow: 0 3px 0 #6b4b00, 0 8px 20px #000, 0 0 28px #ffd166, 0 0 56px #ff9a1f; }
.vasos-overlay.fallo { color: #ff6b6b; text-shadow: 0 3px 0 #5b000d, 0 8px 18px #000, 0 0 24px #ff003c; animation: atajada-golpe .4s cubic-bezier(.2,1.4,.4,1) both; }
.vasos-prompt { text-align: center; font-weight: 800; margin: 10px 0 0; color: var(--texto); }
.vasos-prompt.escondedor { color: #ffd166; } .vasos-prompt.adivinador { color: #7dd3fc; }
.vasos-prompt.ok { color: #7dffb2; } .vasos-prompt.mal { color: #ff7b7b; }
.vasos-escena.revelar.acierto { box-shadow: inset 0 0 80px rgba(255,209,102,.16), inset 0 -28px 60px rgba(0,0,0,.7), 0 18px 40px rgba(0,0,0,.35); }
.vasos-escena.revelar.fallo { box-shadow: inset 0 0 70px rgba(255,77,109,.12), inset 0 -28px 60px rgba(0,0,0,.7), 0 18px 40px rgba(0,0,0,.35); }
@media (max-width: 640px) {
  .vasos-escena { height: 320px; border-radius: 16px; }
  .vasos-mesa { left: 3%; right: 3%; height: 52%; border-width: 7px; }
  .vaso { width: 62px; height: 99px; }
  .vasos-gema { width: 31px; height: 36px; }
  .vasos-tv { padding: 8px 10px; }
  .vasos-jugador small { display: none; }
  .vasos-jugador b { font-size: 11px; }
  .vasos-ronda b { font-size: 23px; }
  .vasos-overlay { font-size: clamp(28px, 10vw, 58px); }
  .vasos-titulo { margin-bottom: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .vaso.colocando, .vaso, .vasos-gema.visible, .vasos-gema > span, .vasos-destellos i,
  .vasos-overlay, .vasos-live i, .vasos-estado.mezcla,
  .vasos-escena.revelar .vaso.elegido, .vasos-escena.revelar .vaso.verdadero,
  .vasos-escena.revelar.fallo .vaso.elegido { animation: none !important; transition: none !important; }
}

/* ===== Damas ===== */
.damas-tv { max-width: 980px; margin: 0 auto; padding: 8px 10px 26px; }
.damas-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.damas-marca { display:flex; align-items:center; gap:10px; }
.damas-marca > span { font-size: 34px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.damas-marca b { display:block; font-size: 22px; letter-spacing:.5px; }
.damas-marca small { display:block; color: var(--suave, #b8a98f); font-size: 12px; }
.damas-marcador { display:flex; align-items:center; gap:9px; background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:7px 12px; }
.damas-lado { display:inline-flex; align-items:center; gap:5px; font-weight:800; font-variant-numeric:tabular-nums; color:#eee5d6; }
.damas-lado.mi-lado { color:#ffd166; text-shadow:0 0 10px rgba(255,209,102,.35); }
.damas-sep { opacity:.35; }
.mini-ficha { width:13px; height:13px; border-radius:50%; display:inline-block; box-shadow: inset 0 -2px 2px rgba(0,0,0,.4), inset 0 2px 2px rgba(255,255,255,.35), 0 1px 2px rgba(0,0,0,.4); }
.mini-ficha.blanca { background: radial-gradient(circle at 34% 28%, #fffdf4, #d9ccb3 45%, #8e8068 100%); }
.mini-ficha.negra { background: radial-gradient(circle at 34% 28%, #6c6257, #2b241e 48%, #0b0907 100%); border:1px solid rgba(255,255,255,.14); }
.damas-escena { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:18px; align-items:start; }
.damas-marco { position:relative; padding:18px; border-radius:17px; background: linear-gradient(145deg,#6b3f1d,#3d2411 48%,#2a180b); box-shadow: 0 26px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -5px 0 rgba(0,0,0,.5); transform: perspective(1200px) rotateX(3deg); border:1px solid #a56b32; }
.damas-marco::before { content:''; position:absolute; inset:9px; border-radius:11px; border:1px solid rgba(255,211,150,.25); pointer-events:none; }
.damas-tablero { display:grid; grid-template-columns:repeat(8,1fr); aspect-ratio:1; border-radius:6px; overflow:hidden; box-shadow: inset 0 0 22px rgba(0,0,0,.55), 0 4px 18px rgba(0,0,0,.35); background:#24150b; }
.dama-casilla { position:relative; border:0; padding:0; margin:0; aspect-ratio:1; display:flex; align-items:center; justify-content:center; cursor:default; overflow:visible; -webkit-tap-highlight-color:transparent; }
.dama-casilla.clara { background: linear-gradient(145deg,#e8d4ae,#c9ad7c 55%,#b79563); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.dama-casilla.oscura { background: linear-gradient(145deg,#6e3e1c,#43240e 55%,#2f1608); box-shadow: inset 0 0 0 1px rgba(255,196,120,.07), inset 0 8px 16px rgba(0,0,0,.18); }
.dama-casilla.oscura::after { content:''; position:absolute; inset:0; background: repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 2px, transparent 2px 7px); opacity:.5; pointer-events:none; }
.dama-casilla.puede { cursor:pointer; }
.dama-casilla.puede:not(.sel)::before { content:''; position:absolute; inset:8%; border-radius:7px; border:2px solid rgba(255,212,122,.5); box-shadow: 0 0 14px rgba(255,191,80,.18), inset 0 0 12px rgba(255,191,80,.1); animation: damaRespira 2s ease-in-out infinite; pointer-events:none; }
.dama-casilla.sel::before { content:''; position:absolute; inset:2%; border-radius:10px; border:2px solid #ffd166; box-shadow: 0 0 20px rgba(255,209,102,.6), inset 0 0 16px rgba(255,209,102,.18); pointer-events:none; z-index:2; }
.dama-casilla.destino { cursor:pointer; }
.dama-casilla.destino::before { content:''; position:absolute; inset:5%; border-radius:9px; border:2px dashed rgba(124,255,166,.78); box-shadow: inset 0 0 18px rgba(76,255,148,.22); pointer-events:none; }
.dama-casilla.destino.captura::before { border-color:#ff9b71; box-shadow: inset 0 0 18px rgba(255,104,66,.28), 0 0 16px rgba(255,104,66,.15); }
.dama-guia { width:24%; height:24%; border-radius:50%; background: radial-gradient(circle,#c8ffd8,#38c76d 55%,#187340); box-shadow:0 0 14px rgba(91,255,151,.65); animation: damaGuia .9s ease-in-out infinite; z-index:1; }
.dama-casilla.destino.captura .dama-guia { background: radial-gradient(circle,#ffe0c8,#ff7a45 55%,#8c2c12); box-shadow:0 0 16px rgba(255,116,61,.7); }
.dama-ficha { position:relative; width:70%; height:70%; border-radius:50%; display:flex; align-items:center; justify-content:center; z-index:3; transition: transform .18s ease, filter .18s ease; filter: drop-shadow(0 6px 5px rgba(0,0,0,.45)); pointer-events:none; }
.dama-cuerpo { position:absolute; inset:0; border-radius:50%; }
.dama-ficha.blanca .dama-cuerpo { background: radial-gradient(circle at 34% 24%, #fffef8 0 18%, #f1e6cf 36%, #cdbb9b 66%, #8b7658 100%); box-shadow: inset -4px -6px 9px rgba(70,52,27,.4), inset 3px 4px 7px rgba(255,255,255,.8), 0 2px 1px rgba(0,0,0,.28); border:1px solid rgba(255,248,224,.8); }
.dama-ficha.negra .dama-cuerpo { background: radial-gradient(circle at 34% 24%, #8a7e71 0 10%, #4c4237 34%, #272019 66%, #090706 100%); box-shadow: inset -4px -6px 9px rgba(0,0,0,.6), inset 3px 4px 7px rgba(255,255,255,.16), 0 2px 1px rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.12); }
.dama-ficha::after { content:''; position:absolute; inset:14%; border-radius:50%; border:1px solid rgba(0,0,0,.22); box-shadow: inset 0 1px 2px rgba(255,255,255,.24); }
.dama-ficha.reina::before { content:''; position:absolute; inset:-7%; border-radius:50%; border:1px solid rgba(255,209,102,.42); box-shadow:0 0 11px rgba(255,191,61,.42); animation: damaReina 1.8s ease-in-out infinite; }
.dama-corona { position:absolute; top:-28%; left:50%; transform:translateX(-50%); color:#ffd166; font-size:clamp(12px, 2.1vw, 22px); line-height:1; text-shadow:0 2px 3px rgba(0,0,0,.55), 0 0 11px rgba(255,193,62,.7); animation: damaCoronaFlota 1.7s ease-in-out infinite; z-index:5; }
.dama-casilla.sel:not(.llega) .dama-ficha:not(.volando) { animation: damaBob 1.5s ease-in-out infinite; }
.dama-casilla.ultima::after { content:''; position:absolute; inset:4%; border-radius:8px; box-shadow: inset 0 0 0 2px rgba(255,209,102,.36); pointer-events:none; }
.dama-casilla.capturada { box-shadow: inset 0 0 24px rgba(255,86,32,.38); }
.dama-casilla.en-peligro { box-shadow: inset 0 0 0 2px rgba(255,92,38,.55), inset 0 0 20px rgba(255,80,30,.32); }
.dama-casilla.en-peligro .dama-ficha { animation: damaPeligro 1.1s ease-in-out infinite; }

/* --- Animaciones del movimiento ------------------------------------- */
/* La ficha que vuela se dibuja en su casilla de origen y se traslada con
   `transform`. Una casilla equivale a 100/70 = 142.857 % del ancho de la
   ficha, así que el desplazamiento es exacto en cualquier resolución.
   `--retraso` es negativo (tiempo ya transcurrido): si el tablero se vuelve a
   pintar a mitad del vuelo, la animación sigue donde iba. */
.dama-ficha.volando {
  animation: damaVuelo var(--dur, 240ms) cubic-bezier(.34,.06,.42,1) both;
  animation-delay: var(--retraso, 0ms);
  transition: none;
  z-index: 8;
  pointer-events: none;
  will-change: transform;
}
.dama-ficha.volando .dama-cuerpo {
  box-shadow: inset -4px -6px 9px rgba(0,0,0,.42), inset 3px 4px 7px rgba(255,255,255,.45), 0 16px 22px rgba(0,0,0,.45), 0 0 18px rgba(255,214,140,.4);
}
.dama-ficha.volando.estela { position:absolute; left:15%; top:15%; width:70%; height:70%; z-index:7; filter: blur(1px) drop-shadow(0 0 8px rgba(255,222,160,.55)); }
.dama-ficha.estela.e1 { opacity:.38; }
.dama-ficha.estela.e2 { opacity:.18; }
/* La ficha que llega se materializa recién al terminar el vuelo. */
.dama-casilla.llega .dama-ficha {
  animation: damaLlega var(--dur, 240ms) cubic-bezier(.2,1.2,.35,1) both;
  animation-delay: calc(var(--retraso, 0ms) + var(--dur, 240ms));
}
/* La ficha comida se hincha, gira y se apaga al paso de la que vuela. */
.dama-ficha.moribunda {
  animation: damaMoribunda 470ms cubic-bezier(.3,.7,.4,1) both;
  animation-delay: calc(var(--retraso, 0ms) + var(--llegada, 0ms));
  z-index: 6;
  pointer-events: none;
}
.dama-boom { position:absolute; inset:12%; z-index:6; pointer-events:none; }
.dama-boom::before {
  content:''; position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(255,124,62,.92);
  box-shadow: 0 0 22px rgba(255,92,38,.8), inset 0 0 18px rgba(255,120,60,.5);
  animation: damaBoom 540ms ease-out both;
  animation-delay: calc(var(--retraso, 0ms) + var(--llegada, 0ms));
}
.dama-boom i { position:absolute; inset:0; }
.dama-boom i b {
  position:absolute; left:50%; top:50%; width:16%; height:16%; margin:-8% 0 0 -8%;
  border-radius:50%;
  background: radial-gradient(circle, #fff4d2, #ff9033 55%, rgba(255,72,20,0) 78%);
  animation: damaChispa 580ms ease-out both;
  animation-delay: calc(var(--retraso, 0ms) + var(--llegada, 0ms));
}
.damas-marco.sacudida {
  animation: damaSacudida 330ms ease-out both;
  animation-delay: calc(var(--retraso, 0ms) + var(--llegada, 0ms));
}
.dama-festejo {
  position:absolute; inset:0; display:grid; place-items:center;
  pointer-events:none; z-index:9; font-weight:900; letter-spacing:3px;
  font-size: clamp(22px, 5.4vw, 48px); color:#fff3cd;
  text-shadow: 0 3px 10px rgba(0,0,0,.65), 0 0 26px rgba(255,196,66,.95), 0 0 60px rgba(255,170,40,.6);
  animation: damaFestejo 900ms cubic-bezier(.2,1.3,.3,1) both;
  animation-delay: calc(var(--retraso, 0ms) + var(--dur, 240ms));
}
.dama-festejo::before {
  content:''; position:absolute; inset:-2%;
  background: radial-gradient(circle at 50% 50%, rgba(255,206,96,.36), rgba(255,170,40,.12) 42%, transparent 68%);
  animation: damaFestejoBrillo 900ms ease-out both;
  animation-delay: calc(var(--retraso, 0ms) + var(--dur, 240ms));
}
.damas-brillo { position:absolute; inset:18px; border-radius:6px; pointer-events:none; background: linear-gradient(115deg, rgba(255,255,255,.16), transparent 30%, transparent 72%, rgba(255,218,156,.06)); mix-blend-mode:screen; }
.damas-escena.mi-turno .damas-marco { box-shadow: 0 26px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -5px 0 rgba(0,0,0,.5), 0 0 0 1px rgba(255,209,102,.5), 0 0 34px rgba(255,178,46,.22); }
.damas-escena.turno-rival .damas-marco { box-shadow: 0 26px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -5px 0 rgba(0,0,0,.5), 0 0 0 1px rgba(126,178,255,.18); }
.damas-hud { background: linear-gradient(160deg, rgba(23,17,12,.92), rgba(15,12,9,.82)); border:1px solid rgba(255,206,135,.17); border-radius:16px; padding:15px 14px; box-shadow: 0 16px 28px rgba(0,0,0,.3); display:flex; flex-direction:column; gap:12px; }
.damas-turno { display:grid; grid-template-columns:auto 1fr; column-gap:8px; align-items:center; }
.damas-turno-punto { width:9px; height:9px; border-radius:50%; background:#746a5f; }
.damas-turno-punto.on { background:#7dffa9; box-shadow:0 0 10px rgba(92,255,148,.8); animation: damaPulso 1.2s infinite; }
.damas-turno b { font-size:15px; }
.damas-turno small { grid-column:2; color: var(--suave, #b8a98f); font-size:12px; }
.damas-reloj { position:relative; height:8px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; }
.damas-reloj span { display:block; height:100%; border-radius:inherit; background: linear-gradient(90deg,#ffcf5c,#ff8b3d); transition: width .24s linear; }
.damas-reloj b { position:absolute; right:7px; top:-17px; font-size:10px; color:#f7e5c7; font-variant-numeric:tabular-nums; }
.dama-chip { display:inline-flex; align-items:center; justify-content:center; align-self:flex-start; border-radius:999px; padding:5px 10px; font-size:11px; font-weight:800; letter-spacing:.2px; border:1px solid rgba(255,155,87,.4); background:rgba(255,118,44,.12); color:#ffc69d; }
.dama-chip.obligada { animation: damaChip 1.6s ease-in-out infinite; }
.dama-chip.tablas { border-color: rgba(126,178,255,.45); background: rgba(80,140,255,.12); color:#bcd8ff; }
.damas-ayuda { margin:0; color:#d8cbb8; font-size:12.5px; line-height:1.45; }
.damas-leyenda { display:flex; justify-content:space-between; gap:8px; padding-top:10px; border-top:1px solid rgba(255,255,255,.08); color:#b9ad9c; font-size:11px; }
.damas-leyenda span { display:inline-flex; align-items:center; gap:5px; }
@keyframes damaRespira { 0%,100% { opacity:.45; } 50% { opacity:1; } }
@keyframes damaGuia { 0%,100% { transform:scale(.72); opacity:.55; } 50% { transform:scale(1.06); opacity:1; } }
@keyframes damaCoronaFlota { 0%,100% { transform:translate(-50%,0) rotate(-3deg); } 50% { transform:translate(-50%,-3px) rotate(3deg); } }
@keyframes damaReina { 0%,100% { opacity:.3; } 50% { opacity:.9; } }
@keyframes damaPulso { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(.6); opacity:.55; } }
@keyframes damaChip { 0%,100% { box-shadow:0 0 0 rgba(255,122,62,0); } 50% { box-shadow:0 0 16px rgba(255,122,62,.25); } }
@keyframes damaBob { 0%,100% { transform:translateY(0) scale(1); } 50% { transform:translateY(-7%) scale(1.04); } }
@keyframes damaPeligro {
  0%,100% { filter: drop-shadow(0 6px 5px rgba(0,0,0,.45)); }
  50% { filter: drop-shadow(0 0 12px rgba(255,92,38,.95)) drop-shadow(0 6px 5px rgba(0,0,0,.4)); }
}
@keyframes damaVuelo {
  0% { transform: translate(0,0) scale(1); }
  18% { transform: translate(calc(var(--dc, 0) * 25.71%), calc(var(--dr, 0) * 25.71%)) scale(1.12); }
  82% { transform: translate(calc(var(--dc, 0) * 117.14%), calc(var(--dr, 0) * 117.14%)) scale(1.12); }
  100% { transform: translate(calc(var(--dc, 0) * 142.857%), calc(var(--dr, 0) * 142.857%)) scale(1); }
}
@keyframes damaLlega {
  0% { opacity:0; transform: scale(.55); }
  55% { opacity:1; transform: scale(1.14); }
  80% { transform: scale(.96); }
  100% { opacity:1; transform: scale(1); }
}
@keyframes damaMoribunda {
  0% { opacity:1; transform: scale(1) rotate(0deg); }
  26% { opacity:1; transform: scale(1.18) rotate(6deg); }
  100% { opacity:0; transform: scale(.24) rotate(-24deg) translateY(8%); filter: blur(3px); }
}
@keyframes damaBoom {
  0% { opacity:0; transform: scale(.3); }
  20% { opacity:1; transform: scale(1); }
  100% { opacity:0; transform: scale(2.1); }
}
@keyframes damaChispa {
  0% { opacity:0; transform: translateY(-30%) scale(.35); }
  22% { opacity:1; }
  100% { opacity:0; transform: translateY(-330%) scale(.15); }
}
@keyframes damaSacudida {
  0%, 100% { transform: perspective(1200px) rotateX(3deg) translate3d(0,0,0); }
  22% { transform: perspective(1200px) rotateX(3deg) translate3d(-3px,2px,0) rotate(-.25deg); }
  52% { transform: perspective(1200px) rotateX(3deg) translate3d(3px,-2px,0) rotate(.25deg); }
  78% { transform: perspective(1200px) rotateX(3deg) translate3d(-1px,1px,0); }
}
@keyframes damaFestejo {
  0% { opacity:0; transform: scale(.4) rotate(-8deg); }
  40% { opacity:1; transform: scale(1.12) rotate(2deg); }
  70% { transform: scale(1) rotate(0deg); }
  100% { opacity:0; transform: scale(1.08) translateY(-8%); }
}
@keyframes damaFestejoBrillo { 0% { opacity:0; } 30% { opacity:1; } 100% { opacity:0; } }
@keyframes damaUrgente { 0%,100% { opacity:1; } 50% { opacity:.5; } }
.damas-reloj.urgente span { background: linear-gradient(90deg,#ff9a5c,#ff3b30); animation: damaUrgente .85s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .dama-ficha.volando, .dama-ficha.estela, .dama-ficha.moribunda, .dama-boom::before, .dama-boom i b,
  .dama-casilla.llega .dama-ficha, .damas-marco.sacudida, .dama-festejo, .dama-festejo::before,
  .dama-casilla.sel .dama-ficha:not(.volando), .dama-guia, .dama-ficha.reina::before, .dama-corona {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
  }
}
@media (max-width: 820px) {
  .damas-escena { grid-template-columns:1fr; }
  .damas-hud { order:2; }
  .damas-marco { padding:11px; }
  .damas-top { align-items:flex-start; }
  .damas-marca b { font-size:19px; }
}
@media (max-width: 480px) {
  .damas-tv { padding-left:2px; padding-right:2px; }
  .damas-marco { border-radius:11px; padding:7px; }
  .damas-marcador { padding:5px 8px; font-size:12px; }
  .dama-corona { top:-32%; font-size:13px; }
}

/* ===== Ludo ===== */
.ludo-tv { max-width: 1120px; margin: 0 auto; padding: 8px 10px 24px; }

/* Cabecera de una sola fila: juego · jugadores · turno (todo alineado y simétrico) */
#salaCab.cab-ludo { display:grid; grid-template-columns:max-content minmax(0,1fr) max-content; align-items:center; gap:6px 10px; padding:5px 10px; }
#salaCab.cab-ludo > .sala-cab-top { display:contents; }
#salaCab.cab-ludo > .sala-cab-top > .sala-juego { min-width:0; white-space:nowrap; }
#salaCab.cab-ludo > .sala-cab-top:has(> .sala-cab-der) > .sala-juego { min-width:0; flex:none; }
#salaCab.cab-ludo > .sala-cab-top:has(> .sala-cab-der) > .sala-cab-der { min-width:0; flex:none; }
#salaCab.cab-ludo > .sala-cab-top > .sala-juego > span { flex:none; }
#salaCab.cab-ludo > .sala-cab-top > .sala-cab-der { flex:none; min-width:0; justify-self:end; display:flex; align-items:center; gap:6px; }
#salaCab.cab-ludo .ludo-cab-jugadores { min-width:0; }
.ludo-cab-top { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:6px 10px; }
.ludo-cab-jugadores { display:flex; flex-wrap:wrap; gap:5px; min-width:0; }
.ludo-chip { position:relative; display:flex; align-items:center; gap:6px; flex:1 1 58px; min-width:0; height:26px; padding:0 9px 0 6px; border-radius:999px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04); overflow:hidden; transition:border-color .18s, background .18s, box-shadow .18s; }
.ludo-chip b { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; line-height:1; font-weight:700; color:#f0e7d6; }
.ludo-chip small { flex:none; font-size:10.5px; line-height:1; color:#c4b6a1; font-variant-numeric:tabular-nums; }
.ludo-chip-color { flex:none; width:13px; height:13px; border-radius:50%; background:radial-gradient(circle at 34% 26%, #fff9, transparent 48%), var(--lc,#888); box-shadow:0 0 6px color-mix(in srgb, var(--lc,#888) 55%, transparent), inset 0 -1px 1px #0005; }
.ludo-chip-prog { position:absolute; left:0; bottom:0; height:2px; width:var(--pct,0%); background:var(--lc,#888); opacity:.85; transition:width .35s ease; }
.ludo-chip.turno { border-color:color-mix(in srgb, var(--lc,#888) 72%, transparent); background:color-mix(in srgb, var(--lc,#888) 16%, transparent); box-shadow:0 0 12px color-mix(in srgb, var(--lc,#888) 30%, transparent); }
.ludo-chip.turno b { color:#fff; }
.ludo-chip.turno .ludo-chip-color { animation:ludoChipLate 1.7s ease-in-out infinite; }
.ludo-chip.yo b { color:#ffd166; }
.ludo-chip.sin-linea { opacity:.55; }
.ludo-cab-top .sala-cab-der { gap:6px; }
.ludo-cab-top .sala-turno { display:inline-flex; align-items:baseline; gap:7px; font-size:12.5px; }

/* Tablero */
.ludo-escena { display:grid; grid-template-columns:minmax(0,1fr) 264px; gap:14px; align-items:start; }
.ludo-board-wrap { min-width:0; }
.ludo-marco { padding:10px; border-radius:16px; background:linear-gradient(145deg,#4b3423,#21160e 58%,#120c07); border:1px solid #8b6138; box-shadow:0 25px 48px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.14); }
.ludo-tablero { display:grid; grid-template-columns:repeat(15,1fr); grid-template-rows:repeat(15,1fr); width:100%; aspect-ratio:1; border-radius:9px; overflow:hidden; background:#ece2cf; box-shadow:inset 0 0 22px rgba(0,0,0,.22), inset 0 0 0 1px rgba(0,0,0,.22); }
.ludo-celda { position:relative; display:flex; align-items:center; justify-content:center; min-width:0; min-height:0; }
.ludo-celda.fuera { background:linear-gradient(160deg,#efe6d3,#e4d7c0); }
.ludo-celda.camino { background:#fdf9ef; box-shadow:inset 0 0 0 1px rgba(120,92,55,.2); }
.ludo-celda.camino.seguro { background:#f7ecd0; }
.ludo-celda.seguro::before { content:''; position:absolute; inset:14%; border-radius:50%; border:1px solid rgba(180,140,40,.32); }
.ludo-celda.base { background:color-mix(in srgb, var(--zona) 26%, #f3ebdb); box-shadow:inset 0 0 0 1px rgba(120,92,55,.1); }
.ludo-celda.base::after { content:none; }
.ludo-celda.nido { background:linear-gradient(150deg,#fffdf7,#f6efe1); box-shadow:inset 0 0 0 1px rgba(120,92,55,.16); }
.ludo-celda.base-rojo { --zona:#ef4444; }
.ludo-celda.base-azul { --zona:#3b82f6; }
.ludo-celda.base-amarillo { --zona:#f5c542; }
.ludo-celda.base-verde { --zona:#22c55e; }
.ludo-celda.pasillo-rojo { background:#f6c9c2; }
.ludo-celda.pasillo-azul { background:#c9dbf6; }
.ludo-celda.pasillo-amarillo { background:#f8e8b2; }
.ludo-celda.pasillo-verde { background:#c5ebcf; }
.ludo-celda.pasillo { box-shadow:inset 0 0 0 1px rgba(120,92,55,.16); }
.ludo-celda.centro { background:linear-gradient(135deg,#ffeab0,#eec05a); box-shadow:inset 0 0 0 1px rgba(151,102,21,.22); }
.ludo-celda.nucleo::after { content:'META'; position:absolute; font-size:clamp(4px,.85vw,9px); font-weight:900; letter-spacing:.06em; color:#8a5f0a; opacity:.5; }
.ludo-celda.meta { background:color-mix(in srgb, var(--mc) 30%, #fbf6ea); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--mc) 55%, transparent); }
.ludo-celda.meta-rojo { --mc:#ef4444; }
.ludo-celda.meta-azul { --mc:#3b82f6; }
.ludo-celda.meta-amarillo { --mc:#f5c542; }
.ludo-celda.meta-verde { --mc:#22c55e; }
.ludo-meta-marca { position:absolute; font-size:clamp(6px,1vw,11px); opacity:.5; pointer-events:none; filter:saturate(.85); }
.ludo-estrella { position:absolute; color:#c08a12; font-size:clamp(6px,1.05vw,12px); opacity:.8; pointer-events:none; text-shadow:0 1px 0 #fff; }
/* Casilla de destino: se puede tocar toda la casilla (la ficha es chica en celular) */
.ludo-celda.destino { z-index:2; cursor:pointer; background:#dcf8e6; box-shadow:inset 0 0 0 2px rgba(34,197,94,.85), 0 0 10px rgba(34,197,94,.4); animation:ludoDestino 1.35s ease-in-out infinite; }
.ludo-celda.destino.captura { background:#ffe3da; box-shadow:inset 0 0 0 2px rgba(239,68,68,.9), 0 0 10px rgba(239,68,68,.45); }
.ludo-celda.destino:focus-visible { outline:2px solid #fff; outline-offset:-3px; }
/* Fichas */
.ludo-fichas { position:absolute; inset:0; display:grid; place-items:center; padding:1px; z-index:3; pointer-events:none; }
.ludo-fichas[data-cant="2"] { grid-template-columns:1fr 1fr; }
.ludo-fichas[data-cant="3"], .ludo-fichas[data-cant="4"] { grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
.ludo-fichas[data-cant="5"], .ludo-fichas[data-cant="6"], .ludo-fichas[data-cant="7"], .ludo-fichas[data-cant="8"] { grid-template-columns:repeat(3,1fr); grid-template-rows:1fr 1fr; }
.ludo-ficha { position:relative; display:block; width:78%; max-width:19px; aspect-ratio:.74; border:0; padding:0; background:none; pointer-events:auto; cursor:default; filter:drop-shadow(0 2px 2px rgba(0,0,0,.38)); -webkit-tap-highlight-color:transparent; }
.ludo-fichas[data-cant="3"] .ludo-ficha, .ludo-fichas[data-cant="4"] .ludo-ficha { width:92%; }
.ludo-fichas[data-cant="5"] .ludo-ficha, .ludo-fichas[data-cant="6"] .ludo-ficha,
.ludo-fichas[data-cant="7"] .ludo-ficha, .ludo-fichas[data-cant="8"] .ludo-ficha { width:100%; max-width:15px; }
.ludo-ficha i { position:absolute; left:50%; top:0; width:44%; height:44%; transform:translateX(-50%); border-radius:50%; background:radial-gradient(circle at 32% 25%,#fff9,#fff0 38%,#0005 100%), var(--fc); border:1px solid rgba(255,255,255,.5); box-shadow:inset -1px -1px 2px #0004; }
.ludo-ficha b { position:absolute; left:50%; bottom:0; width:78%; height:62%; transform:translateX(-50%); border-radius:48% 48% 30% 30%; background:linear-gradient(160deg,var(--fc),color-mix(in srgb, var(--fc) 48%, #15100c)); box-shadow:inset 0 2px 2px #fff6, inset 0 -3px 3px #0007, 0 1px 0 #0006; border:1px solid rgba(255,255,255,.2); }
.ludo-ficha.ficha-rojo { --fc:#ef4444; } .ludo-ficha.ficha-azul { --fc:#3b82f6; } .ludo-ficha.ficha-amarillo { --fc:#f5c542; } .ludo-ficha.ficha-verde { --fc:#22c55e; }
.ludo-ficha.mia { filter:drop-shadow(0 0 5px #ffd166aa) drop-shadow(0 2px 2px #0007); }
.ludo-ficha.jugable { cursor:pointer; animation:ludoFichaPuede 1.15s ease-in-out infinite; }
.ludo-ficha.jugable::after { content:''; position:absolute; inset:-34%; border-radius:50%; border:2px solid color-mix(in srgb, var(--fc) 65%, #fff); opacity:0; animation:ludoAro 1.5s ease-out infinite; pointer-events:none; }
.ludo-ficha.jugable:hover { transform:translateY(-2px) scale(1.06); }
.ludo-ficha.en-meta { filter:drop-shadow(0 0 5px #ffd166cc); }
.ludo-ficha.en-meta i { background:radial-gradient(circle at 32% 25%,#fff,#ffd166 60%,#9a6a02); }
.ludo-ficha.en-meta b { background:linear-gradient(160deg,#ffd166,#a87308); }
.ludo-ficha.llega-meta { animation:ludoLlegaMeta .8s cubic-bezier(.2,1.4,.3,1); }
.ludo-ficha.capturada { filter:drop-shadow(0 0 7px #ef4444) drop-shadow(0 2px 2px #0007); }
.ludo-ficha.recien-movida { filter:drop-shadow(0 0 7px #fff2aa) drop-shadow(0 2px 3px #0007); }
/* Onda de llegada / captura */
.ludo-onda { position:absolute; left:50%; top:50%; width:26%; height:26%; margin:-13% 0 0 -13%; border-radius:50%; border:2px solid var(--lc,#ffd166); pointer-events:none; z-index:4; animation:ludoOnda .66s ease-out forwards; }
.ludo-onda.captura { border-color:#ef4444; border-width:3px; }
.ludo-onda.meta { border-color:#ffd166; border-width:3px; }
/* Panel de control */
.ludo-panel { background:linear-gradient(160deg,rgba(24,19,14,.94),rgba(13,10,8,.88)); border:1px solid rgba(255,206,135,.17); border-radius:16px; padding:12px; box-shadow:0 16px 30px rgba(0,0,0,.32); display:flex; flex-direction:column; gap:10px; }
.ludo-turno { display:flex; gap:9px; align-items:flex-start; }
.ludo-turno-luz { width:9px; height:9px; border-radius:50%; margin-top:5px; flex:0 0 auto; background:#817463; }
.ludo-turno.mio .ludo-turno-luz { background:#7dffa9; box-shadow:0 0 10px #5cff94; animation:ludoPulso 1.2s infinite; }
.ludo-turno b { display:block; font-size:14px; }
.ludo-turno small { display:block; color:#b5a78f; font-size:11.5px; margin-top:2px; line-height:1.35; }
.ludo-dado-zona { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:10px; border-radius:12px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.07); }
.ludo-dado-zona.con-dado { background:rgba(255,209,102,.06); border-color:rgba(255,209,102,.2); }
.ludo-dado-info { font-size:11px; color:#c9bca7; text-align:center; line-height:1.25; }
.ludo-dado-info b { color:#ffd166; font-size:12.5px; }
/* Dado 3D */
.ludo-dado3d { --lado:58px; position:relative; flex:none; width:var(--lado); height:var(--lado); perspective:640px; }
.ludo-cubo { position:relative; width:100%; height:100%; transform-style:preserve-3d; transform:rotateX(-14deg) rotateY(18deg); will-change:transform; }
.ludo-cara { position:absolute; inset:0; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); gap:11%; padding:12%; border-radius:12px; background:linear-gradient(150deg,#fffdf7,#f3ead8 62%,#d9ccb4); box-shadow:inset 0 0 0 1px #ffffffb3, inset 0 -3px 5px #00000024, inset 0 2px 3px #fff; backface-visibility:hidden; }
.ludo-cara i { border-radius:50%; display:block; }
.ludo-cara i.pip { background:radial-gradient(circle at 34% 30%,#6b5c47,#241b12 68%); box-shadow:inset 0 1px 1px #0007; }
.ludo-cara.cara-1 { transform:translateZ(calc(var(--lado) / 2)); }
.ludo-cara.cara-6 { transform:rotateY(180deg) translateZ(calc(var(--lado) / 2)); }
.ludo-cara.cara-3 { transform:rotateY(90deg) translateZ(calc(var(--lado) / 2)); }
.ludo-cara.cara-4 { transform:rotateY(-90deg) translateZ(calc(var(--lado) / 2)); }
.ludo-cara.cara-2 { transform:rotateX(90deg) translateZ(calc(var(--lado) / 2)); }
.ludo-cara.cara-5 { transform:rotateX(-90deg) translateZ(calc(var(--lado) / 2)); }
.ludo-dado-sombra { position:absolute; left:6%; right:6%; bottom:-10px; height:11px; border-radius:50%; background:radial-gradient(ellipse at center, rgba(0,0,0,.5), transparent 72%); }
.ludo-dado3d.sin-valor .ludo-cubo { animation:ludoDadoFlota 3.4s ease-in-out infinite; }
.ludo-dado3d.tirando { animation:ludoDadoSalto .62s cubic-bezier(.2,.9,.3,1); }
.ludo-dado3d.tirando .ludo-dado-sombra { animation:ludoDadoSombra .62s ease; }
.ludo-acciones { display:flex; flex-direction:column; gap:7px; }
.ludo-tirar { font-size:15px; padding:11px; }
.ludo-ayuda { margin:0; color:#bfb19d; font-size:11.5px; line-height:1.5; }
.ludo-leyenda { display:flex; justify-content:space-between; align-items:center; gap:8px; border-top:1px solid rgba(255,255,255,.08); padding-top:9px; color:#a99c89; font-size:10.5px; }
.ludo-leyenda-turno { letter-spacing:.5px; }
.ludo-leyenda-turno b { color:#ffd166; font-size:12px; }
/* Lobby */
.ludo-lobby { max-width:760px; margin:10px auto 0; padding:20px; border-radius:18px; background:linear-gradient(160deg,rgba(31,24,17,.94),rgba(14,11,8,.9)); border:1px solid rgba(255,203,123,.22); box-shadow:0 22px 50px rgba(0,0,0,.38); }
.ludo-lobby-cab { display:flex; align-items:center; gap:13px; margin-bottom:15px; }
.ludo-logo { font-size:38px; filter:drop-shadow(0 5px 10px #0008); }
.ludo-lobby-cab h2 { margin:0; font-size:23px; }
.ludo-lobby-cab p { margin:3px 0 0; color:#b9ab96; font-size:12px; }
.ludo-mesa-chip { margin-left:auto; font-size:10px; letter-spacing:.8px; color:#ffd166; border:1px solid #ffd16640; background:#ffd1660d; padding:6px 9px; border-radius:999px; white-space:nowrap; }
.ludo-lobby-pozo { display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; padding:11px 13px; border-radius:11px; background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.08); margin-bottom:14px; }
.ludo-lobby-pozo > span { color:#b9ab96; font-size:11px; }
.ludo-lobby-pozo > b { font-size:20px; color:#ffd166; }
.ludo-lobby-pozo small { color:#9e9181; font-size:11px; flex-basis:100%; }
.ludo-asientos { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.ludo-asiento { display:flex; align-items:center; gap:9px; min-height:56px; padding:9px 11px; border-radius:12px; border:1px dashed rgba(255,255,255,.13); background:rgba(255,255,255,.025); }
.ludo-asiento.ocupado { border-style:solid; border-color:rgba(255,209,102,.28); background:rgba(255,209,102,.055); }
.ludo-avatar { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:linear-gradient(145deg,#ffd166,#9b6500); color:#20180d; font-weight:900; flex:0 0 auto; box-shadow:inset 0 2px 2px #fff6, 0 3px 8px #0006; }
.ludo-avatar.vacio { background:rgba(255,255,255,.06); color:#877a68; box-shadow:none; }
.ludo-asiento b { display:block; font-size:12px; }
.ludo-asiento small { display:block; color:#a99c89; font-size:10px; }
.ludo-invitar { display:flex; align-items:flex-end; gap:8px; margin-top:14px; }
.ludo-invitar label { flex:1; display:flex; flex-direction:column; gap:4px; color:#b8aa96; font-size:11px; }
.ludo-invitar input { width:100%; padding:9px; border-radius:8px; border:1px solid rgba(255,255,255,.14); background:#0f0c09; color:#e8dfd0; font-size:11px; }
.ludo-lobby .sala-acciones { margin-top:16px; }
.ludo-lobby .centro { text-align:center; }
.ludo-resultado .ludo-ranking { display:flex; flex-direction:column; gap:6px; max-width:420px; margin:16px auto; text-align:left; }
.ludo-ranking-fila { display:flex; align-items:center; gap:9px; padding:9px 12px; border-radius:10px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
.ludo-ranking-fila.mia { border-color:#ffd16666; background:#ffd1660e; }
.ludo-puesto { width:28px; font-weight:800; text-align:center; }
.ludo-color-dot { width:10px; height:10px; border-radius:50%; background:var(--lc); box-shadow:0 0 7px var(--lc); }
.ludo-ranking-fila b { flex:1; font-size:13px; }
.ludo-premio { color:#ffd166; font-weight:700; font-size:12px; }
.ludo-lobby.publico { max-width:820px; }
@keyframes ludoFichaPuede { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-3px); } }
@keyframes ludoAro { 0% { opacity:.55; transform:scale(.72); } 70% { opacity:0; transform:scale(1.25); } 100% { opacity:0; transform:scale(1.25); } }
@keyframes ludoChipLate { 0%,100% { transform:scale(1); } 50% { transform:scale(1.22); } }
@keyframes ludoDestino { 0%,100% { filter:brightness(1); } 50% { filter:brightness(1.08); } }
@keyframes ludoOnda { 0% { opacity:.9; transform:scale(.4); } 100% { opacity:0; transform:scale(2.4); } }
@keyframes ludoPulso { 0%,100% { opacity:1; } 50% { opacity:.45; } }
@keyframes ludoLlegaMeta { 0% { transform:scale(.85); } 45% { transform:scale(1.35) rotate(-6deg); } 70% { transform:scale(1.1) rotate(3deg); } 100% { transform:scale(1) rotate(0); } }
@keyframes ludoDadoSalto {
  0% { transform:translateY(0) rotate(0deg); }
  35% { transform:translateY(-7px) rotate(-4deg); }
  70% { transform:translateY(2px) rotate(2deg); }
  100% { transform:translateY(0) rotate(0deg); }
}
@keyframes ludoDadoSombra { 0%,100% { transform:scale(1); opacity:.75; } 45% { transform:scale(.7); opacity:.35; } }
@keyframes ludoDadoFlota { 0%,100% { transform:rotateX(-14deg) rotateY(18deg) translateY(0); } 50% { transform:rotateX(-18deg) rotateY(26deg) translateY(-3px); } }
@media (max-width: 900px) {
  .ludo-escena { grid-template-columns:1fr; }
  .ludo-panel { order:2; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:8px 10px; }
  .ludo-panel .ludo-turno { grid-column:1 / -1; }
  .ludo-panel .ludo-ayuda, .ludo-panel .ludo-leyenda { grid-column:1 / -1; }
  .ludo-acciones { justify-content:flex-start; }
}
@media (max-width: 620px) {
  .ludo-tv { padding-left:1px; padding-right:1px; }
  .ludo-chip { height:24px; padding:0 7px 0 5px; }
  .ludo-chip b { font-size:11px; }
  .ludo-chip small { display:none; }
  .ludo-asientos { grid-template-columns:1fr; }
  .ludo-lobby { padding:13px; }
  .ludo-invitar { flex-direction:column; align-items:stretch; }
  .ludo-dado3d { --lado:50px; }
}
@media (prefers-reduced-motion: reduce) {
  .ludo-ficha.jugable, .ludo-ficha.jugable::after, .ludo-celda.destino, .ludo-chip.turno .ludo-chip-color,
  .ludo-dado3d.sin-valor .ludo-cubo, .ludo-dado3d.tirando, .ludo-dado3d.tirando .ludo-dado-sombra,
  .ludo-ficha.llega-meta, .ludo-onda { animation:none !important; }
}

/* Audio de mesa Ludo */
.audio-ludo-lista { display:flex; flex-direction:column; gap:5px; }
.audio-ludo-fila { display:flex; align-items:center; gap:7px; font-size:11px; }
.audio-ludo-fila audio { display:none; }
.audio-ludo-fila b { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; color:#d8ccb9; }
.audio-ludo-fila input[type=range] { width:64px; accent-color:#ffd166; }
.audio-ludo-fila .ludo-color-dot { flex:0 0 auto; }
.ludo-celda.base { background:#f1e8d7; background:color-mix(in srgb, var(--zona) 17%, #f1e8d7); }

/* ===== Torre Bloxx 1v1 (optimizado para celular en vertical) ===== */
.torre-tv {
  width: 100%; max-width: 720px; height: 100%; min-height: 0;
  margin: 0 auto; padding: 0; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
/* Barra de la partida: nombre del juego + los dos jugadores en UNA fila
   simétrica (ficha · marca · ficha espejada). Alto justo: sólo los items. */
.torre-barra {
  flex: 0 0 auto; width: 100%; box-sizing: border-box;
  display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: stretch; gap: 6px;
  padding: 4px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(160deg, rgba(22,29,39,.96), rgba(11,16,23,.92));
  box-shadow: 0 8px 18px rgba(0,0,0,.26);
}
.torre-hud-lado { min-width: 0; display: flex; }
.torre-hud-lado > .torre-jugador { flex: 1 1 auto; }
.torre-marca {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; min-width: 0; padding: 0 8px; text-align: center;
}
.torre-marca > span { font-size: 15px; line-height: 1; }
.torre-marca b { font-size: 11px; line-height: 1.1; color: #f1f5f9; white-space: nowrap; }
.torre-marca small { font-size: 8px; font-weight: 900; letter-spacing: 1.4px; color: #ffd166; }
.torre-jugador {
  position: relative; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  padding: 4px 8px 4px 10px; border-radius: 9px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.045);
}
.torre-jugador::before { content:''; position:absolute; left:0; top:4px; bottom:4px; width:3px; border-radius:3px; background:#ffd166; }
.torre-jugador.rival { padding: 4px 10px 4px 8px; }
.torre-jugador.rival::before { left:auto; right:0; background:#ff7b6b; }
.torre-jugador.vacio { border-style: dashed; }
.torre-jugador.caido { opacity: .6; }
.tj-linea { display: flex; align-items: center; gap: 6px; min-width: 0; }
.torre-jugador.rival .tj-linea { flex-direction: row-reverse; }
.tj-linea > b {
  flex: 1 1 auto; min-width: 0; font-size: 12px; line-height: 1.15; color: #f1f5f9;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.torre-jugador.rival .tj-linea > b { text-align: right; }
.torre-piso-num { flex: 0 0 auto; font-size: 16px; line-height: 1; font-weight: 900; color: #ffd166; font-variant-numeric: tabular-nums; }
.torre-piso-num small { font-size: 8.5px; font-weight: 700; color: #94a3b8; margin-left: 2px; }
.tj-vidas { gap: 4px; }
.torre-vida { width: 9px; height: 9px; border-radius: 3px; background: linear-gradient(160deg,#ff8f7a,#e11d48); box-shadow: 0 1px 4px rgba(225,29,72,.45); }
.torre-vida.off { background: rgba(255,255,255,.16); box-shadow: none; }
.torre-combo { flex: 0 0 auto; font-size: 9.5px; font-weight: 800; color: #ffd166; letter-spacing: .2px; white-space: nowrap; }
.torre-combo.vacio { visibility: hidden; }
/* Marco del lienzo: mide exactamente lo que dibuja JS (ver dimensionarTorre). */
.torre-canvas-wrap {
  position: relative; flex: 1 1 auto; min-height: 0; min-width: 0;
  width: fit-content; max-width: 100%; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255,206,135,.2); background: #07101c;
  box-shadow: 0 18px 40px rgba(0,0,0,.46);
}
.torre-canvas { display:block; width:auto; height:auto; max-width:100%; max-height:100%; margin:0 auto; cursor:pointer; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; }
.torre-controles { position: relative; flex: 0 0 auto; width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; }
.torre-soltar { flex: 0 0 auto; min-width: 210px; font-size: 15px; padding: 11px 18px; letter-spacing: .4px; }
.torre-controles p { margin: 0; max-width: 380px; color: #b8a98f; font-size: 11.5px; line-height: 1.45; }
@media (max-width: 860px) {
  .torre-tv { gap: 6px; }
  .torre-barra { padding: 3px; gap: 4px; border-radius: 10px; }
  .torre-marca { padding: 0 3px; }
  .torre-marca > span { font-size: 13px; }
  .torre-marca b { font-size: 10px; }
  .torre-jugador { padding: 3px 6px 3px 8px; border-radius: 8px; }
  .torre-jugador.rival { padding: 3px 8px 3px 6px; }
  .torre-jugador::before { top: 3px; bottom: 3px; }
  .tj-linea > b { font-size: 11px; }
  .torre-piso-num { font-size: 14px; }
  .torre-piso-num small { display: none; }
  .torre-vida { width: 8px; height: 8px; }
  .torre-soltar { width: 100%; min-width: 0; min-height: 46px; font-size: 14.5px; padding: 8px 14px; }
  /* La ayuda queda sólo para lectores de pantalla: en el celular el alto es oro. */
  .torre-controles p {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
}
@media (max-width: 380px) {
  .torre-marca b { font-size: 9px; }
  .tj-linea > b { font-size: 10.5px; }
  .torre-piso-num { font-size: 13px; }
}
/* Con la torre en pantalla, la cabecera de la sala se reduce a lo justo:
   el nombre y los dos jugadores ya están en la barra de la partida. */
body.torre-tablero #salaCab { padding: 4px 9px; gap: 3px 8px; }
body.torre-tablero .sala-juego { font-size: 13px; gap: 5px; }
body.torre-tablero .sala-juego > span:first-child { width: 20px; height: 20px; font-size: 15px; }
body.torre-tablero .sala-apuesta { font-size: 10.5px; padding: 1px 8px; }
@media (max-width: 860px) {
  body.torre-tablero #salaCab .sala-jugadores,
  body.torre-tablero #salaCab .sala-turno { display: none; }
  /* En el celular la torre aprovecha todo el ancho útil de la pantalla. */
  body.juego-body.sala-body.torre-tablero > .sala-cont { padding-left: 4px; padding-right: 4px; }
  body.juego-body.sala-body.torre-tablero .sala-tablero { padding: 4px; }
}
.torre-resultado-resumen { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin:12px auto 0; color:#c9d4e2; font-size:12px; }
.torre-resultado-resumen b { color:#ffd166; font-size:15px; }
/* Refresco visible del contador de gemas */
.sala-saldo.saldo-sube { border-color: rgba(74,222,128,.55); box-shadow: 0 0 0 1px rgba(74,222,128,.18), 0 0 18px rgba(74,222,128,.22); }
.sala-saldo.saldo-sube b { color: #86efac; }
.sala-saldo.saldo-baja { border-color: rgba(248,113,113,.5); box-shadow: 0 0 0 1px rgba(248,113,113,.14), 0 0 16px rgba(248,113,113,.16); }
.sala-saldo.saldo-baja b { color: #fca5a5; }
.sala-saldo b { transition: color .18s ease; }
@keyframes saldoLatido { 0%,100% { transform: scale(1); } 55% { transform: scale(1.06); } }
.sala-saldo.saldo-sube, .sala-saldo.saldo-baja { animation: saldoLatido .42s ease; }
.saldo-final { margin: 10px auto 0 !important; font-size: 13px; }
.saldo-final b { color: #ffd166; font-size: 17px; font-variant-numeric: tabular-nums; }

/* ---------- Práctica contra la máquina ---------- */
.practica-cont { max-width: 1100px; margin: 0 auto; padding: 20px 16px 82px; display: grid; gap: 18px; }
.practica-hero {
  position: relative; overflow: hidden; border-radius: 18px; padding: 22px 20px;
  background: linear-gradient(135deg, rgba(239, 120, 120, .98), rgba(19,49,92,.94));
  color: #F1F5F9; box-shadow: 0 14px 34px rgba(239, 120, 120, .22);
}
.practica-hero::after {
  content: ""; position: absolute; inset: auto -60px -90px auto; width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(239, 120, 120, .35), transparent 65%); pointer-events: none;
}
.practica-kicker {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 12px;
  background: rgba(239, 120, 120, .18); border: 1px solid rgba(239, 120, 120, .45);
  color: #ffd166; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.practica-hero h1 { color: #fff; font-size: clamp(1.5rem, 4vw, 2.1rem); margin: 12px 0 6px; }
.practica-bajada { margin: 0; max-width: 66ch; color: rgba(241,245,249,.78); font-size: 14.5px; }
.practica-dificultad { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 18px; max-width: 740px; }
.practica-dif {
  display: flex; flex-direction: column; gap: 2px; text-align: left; cursor: pointer;
  border: 1px solid rgba(255,255,255,.16); border-radius: 14px; padding: 10px 14px;
  background: rgba(255,255,255,.06); color: #F1F5F9; font: inherit;
  transition: background .15s, border-color .15s, transform .12s;
}
.practica-dif:hover { background: rgba(255,255,255,.11); transform: translateY(-1px); }
.practica-dif b { font-size: 14px; }
.practica-dif small { color: rgba(241,245,249,.65); font-size: 11.5px; }
.practica-dif.activa { border-color: var(--oro); background: rgba(239, 120, 120, .18); box-shadow: 0 0 0 1px var(--oro) inset; }
.practica-dif.activa small { color: #ffe3b0; }
.practica-tiempos {
  margin: 12px 0 0; max-width: 74ch; color: rgba(241,245,249,.78); font-size: 13px;
  border-left: 3px solid var(--oro); padding-left: 10px;
}
.practica-tiempos b { color: #ffd166; }
.practica-bloque { display: grid; gap: 10px; }
/* El atributo hidden no alcanza cuando la clase fija display: grid. */
#practicaSalas[hidden] { display: none; }
.practica-bloque-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px; }
.practica-bloque-cab h2 { margin: 0; font-size: 1.15rem; }
.practica-bloque-cab p { margin: 0; font-size: 13px; }
.practica-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.practica-card {
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 16px; padding: 14px;
  box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 10px; cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.practica-card:hover { transform: translateY(-2px); border-color: var(--oro); box-shadow: 0 10px 24px rgba(239, 120, 120, .12); }
.practica-card-icon {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 24px;
  background: linear-gradient(135deg, rgba(239, 120, 120, .24), rgba(239, 120, 120, .06));
  border: 1px solid rgba(239, 120, 120, .28);
}
.practica-card-txt { display: grid; gap: 2px; flex: 1; }
.practica-card-txt h3 { margin: 0; color: var(--azul); font-size: 1rem; }
.practica-card-txt p { margin: 0 0 4px; color: var(--suave); font-size: 13px; }
.practica-tag { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--oro-osc); }
.practica-jugar { width: 100%; }
.practica-jugar:disabled { opacity: .6; cursor: wait; }
.practica-esqueleto {
  min-height: 156px; border-radius: 16px;
  background: linear-gradient(90deg, var(--fondo), var(--tarjeta), var(--fondo));
  background-size: 200% 100%; animation: pracEsqueleto 1.4s linear infinite;
}
@keyframes pracEsqueleto { from { background-position: 0 0; } to { background-position: -200% 0; } }
.practica-nota { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.practica-nota > div {
  border: 1px solid var(--borde); border-radius: 14px; background: var(--tarjeta);
  padding: 12px 14px; box-shadow: var(--sombra);
}
.practica-nota span { font-size: 22px; }
.practica-nota b { display: block; margin-top: 2px; color: var(--azul); }
.practica-nota p { margin: 2px 0 0; color: var(--suave); font-size: 13px; }
/* Sala de juego en modo práctica */
.sala-apuesta.practica { background: linear-gradient(135deg, #ffd166, var(--oro)); color: #241500; }
.practica-panel {
  border: 1px solid rgba(239, 120, 120, .4); border-radius: 14px; background: var(--aviso-claro);
  color: var(--texto); padding: 12px 14px; display: grid; gap: 6px; font-size: 13px;
}
.practica-panel b { color: var(--azul); font-size: 14px; }
.practica-panel .practica-panel-pill {
  justify-self: start; border-radius: 999px; padding: 2px 10px; background: var(--oro);
  color: #241500; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
}
.practica-panel p { margin: 0; color: var(--suave); }
.modo-practica .sala-chat { display: none; }
.sala-audio[hidden] { display: none; }
.modo-practica .sala-audio { border-color: rgba(239, 120, 120, .45); }
@media (max-width: 860px) {
  .practica-cont { padding: 14px 10px 96px; }
  .practica-hero { padding: 18px 16px; }
}
@media (max-width: 520px) {
  .practica-dificultad { grid-template-columns: 1fr; }
  .practica-grid { grid-template-columns: 1fr; }
  .practica-card { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .practica-card-txt { min-width: 0; }
  .practica-card .practica-jugar { width: auto; margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .practica-card, .practica-dif { transition: none; }
  .practica-esqueleto { animation: none; }
}

/* ---------- Ahorcado ---------- */
.ahorcado-tv { display: grid; gap: 12px; }
.ahorcado-top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.ahorcado-marca { display: flex; gap: 10px; align-items: center; }
.ahorcado-marca > span {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 26px;
  background: linear-gradient(135deg, rgba(239, 120, 120, .25), rgba(239, 120, 120, .06));
  border: 1px solid rgba(239, 120, 120, .35);
}
.ahorcado-marca b { display: block; font-size: 18px; color: var(--azul); }
.ahorcado-marca small { color: var(--suave); font-size: 12.5px; }
.ahorcado-marcador { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.ah-punto { padding: 4px 10px; border-radius: 999px; background: var(--fondo); border: 1px solid var(--borde); font-weight: 700; color: var(--suave); }
.ah-punto.on { background: linear-gradient(135deg, #ffd166, var(--oro)); border-color: var(--oro-osc); color: #241500; }
.ah-sep { opacity: .4; }
.ah-ronda { margin-left: 4px; color: var(--suave); font-size: 12.5px; }
.ahorcado-escena {
  position: relative; border-radius: 18px; padding: 8px 10px 12px;
  background: radial-gradient(120% 80% at 50% 10%, #1c2b40, #0a121c 75%);
  border: 1px solid rgba(239, 120, 120, .25); overflow: hidden;
  box-shadow: inset 0 0 60px rgba(0,0,0,.45);
}
.ahorcado-escena::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 85%, transparent 40%, rgba(0,0,0,.35));
}
.ah-svg { display: block; width: 100%; max-height: 420px; height: auto; position: relative; z-index: 1; }
.ah-cuerda { transform-origin: 252px 78px; animation: ahCuerda 4.8s ease-in-out infinite; }
.ah-figura { transform-origin: 252px 176px; }
.ah-figura-final { animation: ahColumpio 1.45s ease-in-out infinite; }
.ah-final { filter: drop-shadow(0 0 14px rgba(255,78,78,.12)); }
.ahorcado-reloj {
  position: relative; z-index: 2; height: 8px; border-radius: 999px;
  background: rgba(255,255,255,.09); margin: 2px 2px 10px;
}
.ahorcado-reloj > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #39ff14, #ffd166); transition: width .25s linear; }
.ahorcado-reloj > b { position: absolute; right: 0; top: -19px; font-size: 12px; font-variant-numeric: tabular-nums; color: rgba(241,245,249,.8); }
.ahorcado-reloj.urgente > span { background: linear-gradient(90deg, #ff4d4d, #ff9f1c); }
.ah-fallos { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; color: rgba(241,245,249,.85); font-size: 13px; }
.ah-fallos b { color: #ffd166; }
.ah-marcas { display: flex; gap: 5px; }
.ah-marcas i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.07); transition: background .2s, box-shadow .2s; }
.ah-marcas i.on { background: #ff4d4d; border-color: #ffb3b3; box-shadow: 0 0 9px rgba(255,77,77,.55); }
.ah-cat { position: relative; z-index: 2; display: inline-flex; margin-top: 8px; padding: 3px 10px; border-radius: 999px; background: rgba(239, 120, 120, .14); border: 1px solid rgba(239, 120, 120, .35); color: #ffd166; font-size: 12px; }
.ah-cat b { color: #fff; }
.ahorcado-panel { border: 1px solid var(--borde); border-radius: 16px; padding: 14px; background: var(--tarjeta); box-shadow: var(--sombra); }
.ah-palabra { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 2px 0 10px; }
.ah-slot {
  width: clamp(30px, 4.6vw, 44px); height: clamp(40px, 5.8vw, 56px);
  display: grid; place-items: center; border-radius: 8px; font-weight: 900;
  font-size: clamp(18px, 2.7vw, 26px); color: #fff;
  background: linear-gradient(180deg, #3d2a19, #1e130a); border: 2px solid #7a5833;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 4px 9px rgba(0,0,0,.26);
}
.ah-slot.revelada { color: #ffd166; border-color: #c9922e; text-shadow: 0 0 12px rgba(255,209,102,.45); }
.ah-slot.nueva { animation: ahFlip .5s cubic-bezier(.2,.8,.2,1); }
.ah-pista { text-align: center; color: var(--suave); font-size: 13px; margin: 0 0 10px; }
.ah-teclado { display: grid; gap: 6px; }
.ah-fila { display: flex; justify-content: center; gap: 6px; }
.ah-tecla {
  flex: 1 1 0; min-width: 0; max-width: 46px; height: clamp(34px, 4.8vw, 42px);
  padding: 0 4px; border-radius: 9px; border: 1px solid var(--borde);
  background: var(--fondo); color: var(--texto); font: inherit; font-weight: 800; cursor: pointer;
  transition: transform .08s, background .15s, border-color .15s, color .15s;
}
.ah-tecla:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--oro); }
.ah-tecla:disabled { cursor: default; opacity: .55; }
.ah-tecla.acierto { background: #0d3324; border-color: #39ff14; color: #c9ffe0; box-shadow: 0 0 10px rgba(57,255,20,.25); opacity: 1; }
.ah-tecla.fallo { background: #351419; border-color: #8f2b36; color: #d996a0; text-decoration: line-through; opacity: 1; }
.ah-form, .ah-intento { display: grid; gap: 6px; margin-top: 12px; }
.ah-form label, .ah-intento label { font-size: 13px; font-weight: 800; color: var(--azul); }
.ah-form-fila, .ah-intento-fila { display: flex; gap: 8px; }
.ah-form-fila input, .ah-intento-fila input {
  flex: 1; min-width: 0; border: 2px solid var(--borde); border-radius: 10px;
  padding: 9px 11px; font: inherit; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; background: var(--tarjeta); color: var(--texto);
}
.ah-form-fila input:focus, .ah-intento-fila input:focus { outline: none; border-color: var(--oro); box-shadow: 0 0 0 3px rgba(239, 120, 120, .18); }
.ah-espera { display: grid; place-items: center; gap: 6px; text-align: center; padding: 18px 10px; color: var(--suave); }
.ah-espera b { color: var(--azul); }
.ah-espera p { margin: 0; font-size: 13px; }
.ah-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(239, 120, 120, .22); border-top-color: var(--oro); animation: ahSpin 1s linear infinite; }
.ah-reveal { display: grid; gap: 6px; text-align: center; margin-top: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--borde); background: var(--fondo); }
.ah-reveal b { font-size: 16px; }
.ah-reveal.gano { border-color: var(--ok); background: var(--ok-claro); color: var(--ok); }
.ah-reveal.perdio { border-color: var(--mal); background: var(--mal-claro); color: var(--mal); }
.ah-reveal span { color: var(--texto); }
.ah-reveal strong { color: var(--azul); letter-spacing: .12em; }
.ah-reveal small { color: var(--suave); }
.ahorcado-resultado-resumen { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 10px 0 0; color: var(--suave); }
.ahorcado-resultado-resumen b { color: var(--azul); letter-spacing: .1em; }
.sala-jugadores.solo-ahorcado { grid-template-columns: minmax(0, 1fr); }
.sala-jugadores.solo-ahorcado .sala-jugador { justify-content: flex-start; text-align: left; }
@keyframes ahCuerda { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
@keyframes ahColumpio { 0%, 100% { transform: rotate(-4.5deg); } 50% { transform: rotate(4.5deg); } }
@keyframes ahFlip {
  0% { transform: rotateX(0); background: #7a5833; color: #7a5833; }
  45% { transform: rotateX(90deg); background: #a67a3f; }
  100% { transform: rotateX(0); background: linear-gradient(180deg, #3d2a19, #1e130a); color: #ffd166; }
}
@keyframes ahSpin { to { transform: rotate(360deg); } }
@media (max-width: 720px) {
  .ahorcado-top { align-items: flex-start; }
  .ahorcado-marcador { width: 100%; }
  .ahorcado-panel { padding: 10px; }
  .ah-tecla { min-width: 7.2vw; height: 36px; padding: 0 2px; font-size: 13px; }
  .ah-fila { gap: 4px; }
  .ah-slot { width: 9vw; height: 12vw; min-width: 28px; min-height: 38px; }
  .ah-form-fila, .ah-intento-fila { flex-wrap: wrap; }
  .ah-form-fila .btn, .ah-intento-fila .btn { width: 100%; }
}
@media (max-width: 420px) {
  .ah-tecla { min-width: 7vw; height: 32px; font-size: 12px; }
  .ah-slot { width: 8vw; min-width: 24px; height: 11vw; min-height: 34px; font-size: 16px; }
}
/* Celular en horizontal (poco alto): mismo reparto que en vertical, con la
   horca estirándose y el teclado compacto, en vez del zoom de emergencia. */
@media (max-height: 540px) and (max-width: 1024px) {
  .ahorcado-tv { display: flex; flex-direction: column; gap: 5px; flex: 1 1 auto; min-height: 0; }
  body.juego-body.sala-body #tablero > .tb-fit:has(> .ahorcado-tv) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .ahorcado-top { display: none; }
  .ahorcado-escena { flex: 1 1 auto; display: grid; grid-template-rows: minmax(44px, 1fr) auto auto auto; gap: 3px; padding: 5px 8px 6px; border-radius: 12px; }
  .ah-svg { width: 100%; height: 100%; min-height: 0; max-height: none; }
  .ahorcado-reloj { display: none; }
  .ah-fallos { font-size: 10.5px; gap: 5px; flex-wrap: nowrap; justify-content: space-between; }
  .ah-marcas i { width: 9px; height: 9px; }
  .ah-cat { margin: 0; padding: 1px 6px; font-size: 9.5px; align-self: start; justify-self: start; }
  .ahorcado-panel { flex: 0 0 auto; padding: 6px 8px 7px; border-radius: 11px; }
  .ah-palabra { flex-wrap: nowrap; gap: 4px; margin: 0 0 4px; }
  .ah-slot { flex: 1 1 0; width: auto; min-width: 0; max-width: 38px; height: 30px; font-size: 15px; border-radius: 6px; }
  .ah-pista { font-size: 10.5px; margin: 0 0 4px; }
  .ah-teclado { gap: 4px; }
  .ah-fila { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; width: 100%; }
  .ah-tecla { width: 100%; max-width: none; min-width: 0; height: 26px; font-size: 11px; padding: 0; border-radius: 6px; }
  .ah-intento, .ah-form { margin-top: 4px; gap: 4px; }
  .ah-intento label, .ah-intento small.suave { display: none; }
  .ah-intento-fila, .ah-form-fila { flex-wrap: nowrap; gap: 5px; }
  .ah-intento-fila input, .ah-form-fila input { flex: 1 1 0; width: auto; min-width: 0; min-height: 30px; padding: 4px 8px; }
  .ah-intento-fila .btn, .ah-form-fila .btn { flex: 0 0 auto; width: auto; min-height: 30px; padding: 0 10px; }
  .ah-intentos { font-size: 10px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ah-reveal { margin-top: 4px; padding: 6px 8px; gap: 2px; border-radius: 10px; }
  .ah-reveal b { font-size: 13px; }
  .ah-reveal small { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .ah-cuerda, .ah-figura-final, .ah-slot.nueva, .ah-spinner { animation: none; }
}
.ah-intentos { text-align: center; font-size: 12px; color: var(--suave); margin: 6px 0 0; letter-spacing: .04em; }
.ah-palabra { perspective: 720px; }

/* ---------- Japejú ---------- */
.japeju-cab-jugadores { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.japeju-cab-chip { border: 1px solid var(--borde); border-radius: 999px; padding: 3px 10px; font-size: 12px; color: var(--suave); background: var(--fondo); }
.japeju-cab-chip b { color: var(--azul); }
.japeju-cab-chip.yo { border-color: var(--oro); }
.japeju-cab-chip.fuera { opacity: .5; text-decoration: line-through; }
.japeju-cab-chip.atacante { border-color: rgba(239, 120, 120, .6); background: rgba(239, 120, 120, .12); }
.japeju-cab-chip.defensor { border-color: rgba(56,189,248,.6); background: rgba(56,189,248,.12); }
.japeju-tv { display: grid; gap: 12px; }
.japeju-top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.japeju-marca { display: flex; gap: 10px; align-items: center; }
.japeju-marca > span { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 26px; background: linear-gradient(135deg, rgba(239, 120, 120, .25), rgba(239, 120, 120, .06)); border: 1px solid rgba(239, 120, 120, .35); }
.japeju-marca b { display: block; font-size: 18px; color: var(--azul); }
.japeju-marca small { color: var(--suave); font-size: 12.5px; }
.japeju-marcador { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.japeju-marcador-texto { font-weight: 800; color: var(--azul); }
.japeju-ronda { color: var(--suave); font-size: 12.5px; }
.japeju-escena {
  position: relative; border-radius: 18px; padding: 12px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #21324a, #0a121c 76%);
  border: 1px solid rgba(239, 120, 120, .25); box-shadow: inset 0 0 70px rgba(0,0,0,.5);
}
.japeju-escena::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 100%, transparent 35%, rgba(0,0,0,.35)); }
.japeju-manos { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 10px; }
.japeju-jugador { position: relative; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 8px 8px 10px; background: rgba(255,255,255,.045); text-align: center; transition: border-color .2s, box-shadow .2s, background .2s; }
.japeju-jugador.yo { border-color: rgba(239, 120, 120, .65); background: rgba(239, 120, 120, .08); }
.japeju-jugador.fuera { opacity: .58; }
.japeju-jugador.minoria { border-color: #ffd166; background: rgba(255,209,102,.14); box-shadow: 0 0 26px rgba(255,209,102,.25); animation: japejuMinoria 1.2s ease-in-out infinite; }
.japeju-jugador.punto { border-color: #39ff14; box-shadow: 0 0 22px rgba(57,255,20,.2); }
.japeju-jugador-cab { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.japeju-jugador-cab b { color: #f1f5f9; font-size: 13px; }
.japeju-rol { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; border-radius: 999px; padding: 2px 7px; }
.japeju-rol.atacante { background: rgba(239, 120, 120, .25); color: #ffd166; }
.japeju-rol.defensor { background: rgba(56,189,248,.2); color: #7dd3fc; }
.japeju-mano { height: 116px; display: grid; place-items: center; position: relative; perspective: 600px; }
.japeju-mano-svg { width: 96px; height: 112px; display: block; filter: drop-shadow(0 6px 8px rgba(0,0,0,.32)); transition: transform .18s; }
.japeju-mano.abierta .japeju-mano-svg.palma { animation: japejuAbrePalma .46s cubic-bezier(.18,.8,.22,1); }
.japeju-mano.abierta .japeju-mano-svg.dorso { animation: japejuAbreDorso .46s cubic-bezier(.18,.8,.22,1); }
.japeju-escena.cantando .japeju-jugador:nth-child(1) .japeju-mano-svg { animation: japejuRitmo .42s ease-in-out infinite; }
.japeju-escena.cantando .japeju-jugador:nth-child(2) .japeju-mano-svg { animation: japejuRitmo .42s ease-in-out .08s infinite; }
.japeju-escena.cantando .japeju-jugador:nth-child(3) .japeju-mano-svg { animation: japejuRitmo .42s ease-in-out .16s infinite; }
.japeju-escena.cantando .japeju-jugador:nth-child(4) .japeju-mano-svg { animation: japejuRitmo .42s ease-in-out .24s infinite; }
.japeju-corona { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); font-size: 22px; z-index: 2; animation: japejuCorona 1.1s ease-in-out infinite; filter: drop-shadow(0 2px 6px rgba(255,209,102,.7)); }
.japeju-eleccion { font-size: 12px; color: rgba(241,245,249,.78); font-weight: 700; }
.japeju-jugador-pie { margin-top: 2px; font-size: 11px; color: rgba(241,245,249,.6); min-height: 14px; }
.japeju-salio { color: #ffd166; font-weight: 800; letter-spacing: .05em; }
.japeju-canto { position: relative; z-index: 1; text-align: center; margin-top: 8px; font-size: clamp(18px, 3vw, 25px); font-weight: 900; letter-spacing: .12em; color: #ffd166; text-shadow: 0 0 18px rgba(255,209,102,.35); }
.japeju-escena.cantando .japeju-canto { animation: japejuCanto .42s ease-in-out infinite; }
.japeju-reloj { position: relative; z-index: 1; height: 8px; border-radius: 999px; background: rgba(255,255,255,.09); margin: 8px 2px 10px; }
.japeju-reloj > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #39ff14, #ffd166); transition: width .25s linear; }
.japeju-reloj > b { position: absolute; right: 0; top: -19px; font-size: 12px; font-variant-numeric: tabular-nums; color: rgba(241,245,249,.8); }
.japeju-reloj.urgente > span { background: linear-gradient(90deg, #ff4d4d, #ff9f1c); }
.japeju-resultado { position: relative; z-index: 1; display: grid; gap: 2px; text-align: center; border-radius: 12px; padding: 8px 10px; margin-top: 2px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); }
.japeju-resultado b { color: #f1f5f9; }
.japeju-resultado span { color: rgba(241,245,249,.78); font-size: 13px; }
.japeju-resultado small { color: rgba(241,245,249,.55); }
.japeju-resultado.empate { border-color: rgba(255,209,102,.5); background: rgba(255,209,102,.08); }
.japeju-resultado.punto.gano { border-color: #39ff14; background: rgba(57,255,20,.09); }
.japeju-resultado.punto.perdio { border-color: rgba(255,77,77,.6); background: rgba(255,77,77,.08); }
.japeju-resultado.minoria { border-color: #ffd166; background: rgba(255,209,102,.12); }
.japeju-resultado.minoria.yo { box-shadow: 0 0 20px rgba(255,209,102,.2); }
.japeju-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.japeju-btn { display: grid; place-items: center; gap: 2px; padding: 8px 10px 10px; border-radius: 16px; border: 1px solid var(--borde); background: var(--tarjeta); color: var(--texto); font: inherit; cursor: pointer; transition: border-color .15s, transform .12s, background .15s; }
.japeju-btn:hover:not(:disabled) { border-color: var(--oro); transform: translateY(-2px); }
.japeju-btn.sel { border-color: var(--oro); background: rgba(239, 120, 120, .12); box-shadow: 0 0 0 2px rgba(239, 120, 120, .2) inset; }
.japeju-btn:disabled { cursor: default; opacity: .75; }
.japeju-btn-mano { height: 64px; display: grid; place-items: center; }
.japeju-btn-mano .japeju-mano-svg { width: 56px; height: 65px; }
.japeju-btn b { font-size: 15px; letter-spacing: .12em; }
.japeju-btn small { color: var(--suave); font-size: 11px; }
.japeju-espera { text-align: center; padding: 14px 10px; border-radius: 14px; border: 1px dashed var(--borde); color: var(--suave); background: var(--fondo); font-size: 13.5px; font-weight: 700; }
.japeju-espera.canto { color: #d45050; border-color: rgba(239, 120, 120, .5); }
.japeju-ayuda { margin: 0; text-align: center; color: var(--suave); font-size: 12.5px; }
.japeju-ranking { display: grid; gap: 5px; max-width: 460px; margin: 10px auto 0; text-align: left; }
.japeju-ranking-fila { display: flex; align-items: center; gap: 8px; border: 1px solid var(--borde); border-radius: 10px; padding: 5px 9px; font-size: 13px; }
.japeju-ranking-fila.mia { border-color: var(--oro); background: rgba(239, 120, 120, .08); }
.japeju-ranking-fila.fuera { opacity: .65; }
.japeju-ranking-fila b { flex: 1; }
.japeju-ranking-fila span:last-child { color: var(--suave); }
.japeju-ranking-puesto { width: 22px; text-align: center; }
/* Lobby */
.japeju-lobby { display: grid; gap: 12px; }
.japeju-lobby-cab { display: flex; gap: 12px; align-items: center; }
.japeju-lobby-icono { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 28px; background: rgba(239, 120, 120, .16); border: 1px solid rgba(239, 120, 120, .3); }
.japeju-lobby-cab h2 { margin: 0; }
.japeju-lobby-cab p { margin: 2px 0 0; color: var(--suave); font-size: 13px; }
.japeju-chip { margin-left: auto; border: 1px solid var(--borde); border-radius: 999px; padding: 3px 9px; font-size: 11px; font-weight: 800; color: var(--suave); white-space: nowrap; }
.japeju-lobby-pozo { border: 1px solid var(--borde); border-radius: 12px; padding: 10px 14px; background: var(--fondo); display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; }
.japeju-lobby-pozo span { color: var(--suave); font-size: 12px; }
.japeju-lobby-pozo b { color: var(--azul); font-size: 18px; }
.japeju-lobby-pozo small { color: var(--suave); }
.japeju-asientos-lobby { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.japeju-asiento { border: 1px dashed var(--borde); border-radius: 12px; padding: 10px; display: grid; gap: 2px; text-align: center; color: var(--suave); }
.japeju-asiento.ocupado { border-style: solid; background: var(--fondo); color: var(--texto); }
.japeju-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--azul); color: #fff; display: grid; place-items: center; font-weight: 800; margin: 0 auto 2px; }
.japeju-avatar.vacio { background: var(--fondo); color: var(--suave); border: 1px dashed var(--borde); }
.japeju-asiento b { font-size: 13px; }
.japeju-asiento small { color: var(--suave); font-size: 11px; }
.japeju-invitar { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; }
.japeju-invitar label { flex: 1; display: grid; gap: 4px; font-size: 12px; color: var(--suave); }
.japeju-invitar input { width: 100%; border: 1px solid var(--borde); border-radius: 9px; padding: 8px 10px; font: inherit; background: var(--tarjeta); color: var(--texto); }
@keyframes japejuRitmo { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(-3deg); } }
@keyframes japejuCanto { 0%,100% { transform: scale(1); opacity: .75; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes japejuAbrePalma { 0% { transform: rotateY(-78deg) scale(.88); } 58% { transform: rotateY(7deg) scale(1.05); } 100% { transform: rotateY(0) scale(1); } }
@keyframes japejuAbreDorso { 0% { transform: rotateY(78deg) scale(.88); } 58% { transform: rotateY(-7deg) scale(1.05); } 100% { transform: rotateY(0) scale(1); } }
@keyframes japejuMinoria { 0%,100% { box-shadow: 0 0 16px rgba(255,209,102,.18); } 50% { box-shadow: 0 0 30px rgba(255,209,102,.45); } }
@keyframes japejuCorona { 0%,100% { transform: translateX(-50%) translateY(0) rotate(-4deg); } 50% { transform: translateX(-50%) translateY(-3px) rotate(4deg); } }
@media (max-width: 700px) {
  .japeju-manos { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .japeju-jugador { padding: 6px 6px 8px; }
  .japeju-mano { height: 92px; }
  .japeju-mano-svg { width: 76px; height: 89px; }
  .japeju-top { align-items: flex-start; }
  .japeju-marcador { width: 100%; }
}
@media (max-width: 420px) {
  .japeju-manos { grid-template-columns: repeat(2, 1fr); gap: 5px; }
  .japeju-mano { height: 78px; }
  .japeju-mano-svg { width: 64px; height: 75px; }
  .japeju-jugador-cab b { font-size: 11.5px; }
  .japeju-btn-mano { height: 50px; }
  .japeju-btn-mano .japeju-mano-svg { width: 48px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .japeju-mano-svg, .japeju-corona, .japeju-escena.cantando .japeju-mano-svg, .japeju-jugador.minoria { animation: none; }
.japeju-mano.abierta .japeju-mano-svg.palma, .japeju-mano.abierta .japeju-mano-svg.dorso { animation: none; }
}
.practica-mesa { cursor: default; }
.practica-mesa:hover { transform: none; }

/* ---------- Trillizos ---------- */
/* Cabecera: una sola franja baja (nombre · jugadores · apuesta y turno).
   Los chips son una grilla de ancho fijo para que queden simétricos y
   alineados aunque cambie el largo de los nombres o la colección. */
#salaCab.cab-trillizos { padding: 5px 12px; gap: 4px; }
#salaCab.cab-trillizos > .sala-cab-top {
  display: grid;
  width: 100%;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px 10px;
}
#salaCab.cab-trillizos > .sala-cab-top > .sala-juego { min-width: 0; }
#salaCab.cab-trillizos > .sala-cab-top > .sala-cab-der { justify-self: end; margin: 0; gap: 6px; }
#salaCab.cab-trillizos .sala-apuesta { padding: 2px 9px; font-size: 11.5px; }
#salaCab.cab-trillizos .sala-turno { margin: 0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#salaCab.cab-trillizos > p { flex-basis: 100%; margin: 2px 0 0; text-align: center; font-size: 11.5px; }
.trillizos-cab-jugadores { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px; margin: 0; min-width: 0; }
.trillizos-cab-chip {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center;
  gap: 0 5px; flex: 1 1 118px; max-width: 210px; min-width: 0;
  border: 1px solid var(--borde); border-radius: 999px; padding: 0 9px; height: 24px;
  font-size: 11.5px; line-height: 1; color: var(--suave); background: var(--fondo); overflow: hidden;
  transition: border-color .2s, background .2s;
}
.trillizos-cab-chip .tc-icono { font-size: 12px; line-height: 1; }
.trillizos-cab-chip .tc-nombre { color: var(--azul); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.trillizos-cab-chip .tc-fichas { font-weight: 800; color: var(--azul); font-variant-numeric: tabular-nums; }
.trillizos-cab-chip .tc-busca { text-align: right; color: #ffd166; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.trillizos-cab-chip.yo { border-color: var(--oro); }
.trillizos-cab-chip.turno { border-color: #39ff14; background: rgba(57,255,20,.1); }
@media (max-width: 760px) {
  #salaCab.cab-trillizos > .sala-cab-top {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "marca der" "jugadores jugadores";
    row-gap: 5px;
  }
  #salaCab.cab-trillizos > .sala-cab-top > .sala-juego { grid-area: marca; }
  #salaCab.cab-trillizos > .sala-cab-top > .sala-cab-der { grid-area: der; max-width: 62vw; justify-content: flex-end; }
  #salaCab.cab-trillizos > .sala-cab-top > .trillizos-cab-jugadores { grid-area: jugadores; }
  #salaCab.cab-trillizos .sala-turno { white-space: normal; text-align: right; line-height: 1.2; overflow: visible; }
  .trillizos-cab-chip { flex: 1 1 88px; max-width: none; }
  .trillizos-cab-chip .tc-busca { display: none; }
}
@media (max-width: 430px) {
  #salaCab.cab-trillizos .sala-turno { font-size: 11.5px; }
  .trillizos-cab-chip .tc-icono { display: none; }
}
.trillizos-tv { display: grid; gap: 10px; }
.trillizos-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.trillizos-marca { display: flex; gap: 9px; align-items: center; }
.trillizos-marca > span { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: linear-gradient(135deg, rgba(155,89,182,.3), rgba(155,89,182,.06)); border: 1px solid rgba(155,89,182,.4); }
.trillizos-marca b { display: block; font-size: 16.5px; color: var(--azul); line-height: 1.15; }
.trillizos-marca small { color: var(--suave); font-size: 12px; }
.trillizos-medidor { display: grid; gap: 1px; justify-items: end; text-align: right; min-width: 0; }
.trillizos-turno-texto { font-weight: 800; color: var(--azul); font-size: 13px; }
.trillizos-restantes { color: var(--suave); font-size: 11.5px; font-variant-numeric: tabular-nums; }
/* Tarjetas de jugador: en escritorio entran todas en una fila (una columna
   por jugador) y en pantalla angosta van de a dos para ahorrar alto. */
.trillizos-jugadores {
  display: grid;
  grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr));
  gap: 8px;
  max-width: calc(var(--n, 2) * 280px);
  margin-inline: auto;
}
.trillizos-jugador { min-width: 0; border: 1px solid var(--borde); border-radius: 14px; padding: 8px 10px; background: var(--tarjeta); display: grid; gap: 5px; align-content: start; transition: border-color .2s, box-shadow .2s, background .2s; }
.trillizos-jugador.yo { border-color: rgba(239, 120, 120, .55); }
.trillizos-jugador.turno { border-color: #39ff14; box-shadow: 0 0 0 2px rgba(57,255,20,.12) inset; background: rgba(57,255,20,.05); }
.trillizos-jugador.perdio { animation: trillizosPerdio .55s ease-in-out; }
.trillizos-jugador-cab { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.trillizos-jugador-cab b { font-size: 13px; color: var(--azul); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trillizos-turno-chip { font-size: 9px; font-weight: 900; letter-spacing: .06em; color: #0b3d0b; background: #39ff14; border-radius: 999px; padding: 2px 7px; text-transform: uppercase; }
.trillizos-jugador small { color: var(--suave); font-size: 11px; }
.trillizos-fichas { display: flex; gap: 4px; }
.trillizos-slot { width: 27px; height: 27px; border-radius: 8px; border: 1px dashed var(--borde); display: grid; place-items: center; font-size: 16px; background: var(--fondo); color: var(--suave); }
.trillizos-slot.llena { border-style: solid; border-color: rgba(239, 120, 120, .55); background: rgba(239, 120, 120, .13); }
.trillizos-slot.rompe { animation: trillizosRompe .55s ease-in forwards; }
.trillizos-coleccion { display: flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--suave); }
.trillizos-coleccion.vacia { font-style: italic; opacity: .65; }
.trillizos-coleccion > span:first-child { text-transform: uppercase; letter-spacing: .05em; font-size: 9px; font-weight: 800; opacity: .8; }
.trillizos-mini { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-size: 12px; border: 1px dashed var(--borde); background: transparent; color: var(--suave); }
.trillizos-mini.llena { border-style: solid; border-color: rgba(239, 120, 120, .55); background: rgba(239, 120, 120, .16); }
.trillizos-mini.rompe { animation: trillizosRompe .55s ease-in forwards; }
.trillizos-cab-busca { color: #ffd166 !important; }
.trillizos-tablero-wrap { position: relative; border-radius: 16px; padding: 10px; background: radial-gradient(120% 90% at 50% 0%, #24324a, #0a121c 76%); border: 1px solid rgba(155,89,182,.32); overflow: hidden; }
.trillizos-grilla { display: grid; grid-template-columns: repeat(var(--cols, 7), minmax(0, 1fr)); gap: 7px; position: relative; z-index: 1; }
.trillizos-carta { aspect-ratio: 3 / 4; min-width: 0; padding: 0; border: 0; background: transparent; perspective: 600px; cursor: default; font: inherit; position: relative; }
.trillizos-carta:not(:disabled) { cursor: pointer; }
.trillizos-carta-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .42s cubic-bezier(.2,.8,.2,1); display: block; }
.trillizos-carta.tapada .trillizos-carta-inner { transform: rotateY(0deg); }
.trillizos-carta.revelada .trillizos-carta-inner { transform: rotateY(180deg); }
.trillizos-carta:not(:disabled):hover .trillizos-carta-inner { transform: translateY(-3px) rotateY(0); }
.trillizos-carta.revelada:not(:disabled):hover .trillizos-carta-inner { transform: translateY(-3px) rotateY(180deg); }
/* Volteo: se levanta, gira y sella la cara con un destello. La clase la pone
   animarVolteos() después del repintado para que la animación no se corte. */
.trillizos-carta.volteando { z-index: 3; }
.trillizos-carta.volteando .trillizos-carta-inner { animation: trillizosVoltea .5s cubic-bezier(.22,.72,.25,1) both; }
/* Feedback inmediato al tocar: la ficha se levanta mientras viaja la acción. */
.trillizos-carta.eligiendo { z-index: 2; }
.trillizos-carta.eligiendo .trillizos-carta-inner { animation: trillizosElige .5s ease-out both; }
.trillizos-carta.volviendo { z-index: 2; }
.trillizos-carta.volviendo .trillizos-carta-inner { animation: trillizosVuelve .36s ease-in both; }
.trillizos-carta.volteando .trillizos-cara.frente { animation: trillizosSella .5s .2s ease-out both; }
.trillizos-cara { position: absolute; inset: 0; border-radius: 10px; display: grid; place-items: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1px solid rgba(255,255,255,.13); box-shadow: 0 4px 10px rgba(0,0,0,.28); overflow: hidden; }
.trillizos-cara.atras { background: repeating-linear-gradient(45deg, #273b63 0 6px, #1d2d4d 6px 12px); color: rgba(255,255,255,.42); font-size: 23px; }
.trillizos-cara.atras::after { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(255,255,255,.14); border-radius: 7px; }
.trillizos-cara.frente { transform: rotateY(180deg); background: linear-gradient(150deg, #fff7e8, #f0d8b6); color: #5c3a1e; font-size: clamp(24px, 4.2vw, 39px); }
.trillizos-cara.frente.bomba { background: linear-gradient(150deg, #411, #1a0505); border-color: rgba(255,80,40,.7); font-size: clamp(26px, 4.8vw, 42px); text-shadow: 0 0 15px rgba(255,80,20,.8); }
.trillizos-carta.elegida .trillizos-cara { box-shadow: 0 0 0 2px #ffd166, 0 0 18px rgba(255,209,102,.35); }
/* Boca arriba fuera de la jugada: copia guardada en la colección o bomba ya
   explotada. Quedan visibles para todos y no se pueden tocar. */
.trillizos-carta.fija { cursor: default; }
.trillizos-carta.en-coleccion .trillizos-cara.frente { background: linear-gradient(150deg, #fffbe9, #ffe6b0); box-shadow: 0 0 0 2px rgba(239, 120, 120, .7), 0 4px 10px rgba(0,0,0,.3); }
.trillizos-carta.explotada .trillizos-cara { box-shadow: 0 0 0 2px rgba(255,80,40,.55), 0 4px 10px rgba(0,0,0,.35); }
.trillizos-carta.explotada .trillizos-cara.frente { opacity: .82; }
.trillizos-carta.retirada { opacity: .5; }
.trillizos-carta.vacia { border: 1px dashed rgba(255,255,255,.12); border-radius: 10px; background: rgba(255,255,255,.025); }
.trillizos-pie { display: grid; gap: 8px; }
.trillizos-reloj { position: relative; height: 8px; border-radius: 999px; background: rgba(255,255,255,.09); margin: 1px 2px 0; }
.trillizos-reloj > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #39ff14, #ffd166); transition: width .25s linear; }
.trillizos-reloj > b { position: absolute; right: 0; top: -19px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--suave); }
.trillizos-reloj.urgente > span { background: linear-gradient(90deg, #ff4d4d, #ff9f1c); }
.trillizos-resultado { display: flex; align-items: center; gap: 9px; border: 1px solid var(--borde); border-radius: 12px; padding: 7px 11px; background: rgba(255,255,255,.04); }
.trillizos-resultado.acierto { border-color: rgba(57,255,20,.5); background: rgba(57,255,20,.07); }
.trillizos-resultado.fallo { border-color: rgba(255,159,28,.45); background: rgba(255,159,28,.06); }
.trillizos-resultado-icono { font-size: 24px; }
.trillizos-resultado b { display: block; color: var(--azul); font-size: 13.5px; }
.trillizos-resultado small { color: var(--suave); font-size: 12px; }
.trillizos-ayuda { margin: 0; color: var(--suave); font-size: 12.5px; text-align: center; }
.trillizos-tv.trillizos-shake { animation: trillizosShake .55s cubic-bezier(.36,.07,.19,.97); }
.trillizos-bomba-overlay { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; align-content: center; gap: 8px; text-align: center; padding: 16px; background: radial-gradient(circle at 50% 45%, rgba(255,91,0,.28), rgba(7,10,18,.96) 62%); overflow: hidden; animation: trillizosBombaAparece .2s ease-out; }
.trillizos-bomba-flash { position: absolute; inset: 0; background: #ff7a1a; opacity: 0; animation: trillizosFlash 1.1s .05s ease-out; pointer-events: none; }
.trillizos-bomba-humo { position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,120,30,.28), transparent 62%); filter: blur(20px); animation: trillizosHumo 2.6s ease-out; pointer-events: none; }
.trillizos-bomba-emoji { position: relative; font-size: clamp(52px, 9vw, 84px); filter: drop-shadow(0 0 24px rgba(255,120,20,.75)); animation: trillizosBomba 1.05s ease-in-out infinite; }
.trillizos-bomba-copy { position: relative; display: grid; gap: 2px; color: #fff; z-index: 2; }
.trillizos-bomba-copy b { font-size: clamp(24px, 4vw, 38px); letter-spacing: .08em; color: #ffb347; text-shadow: 0 0 20px rgba(255,120,20,.8); }
.trillizos-bomba-copy span { font-weight: 700; font-size: 14px; }
.trillizos-bomba-copy small { color: rgba(255,255,255,.68); font-size: 12px; }
.trillizos-ficha-vuela { position: absolute; top: 20%; left: 16%; font-size: 31px; z-index: 3; animation: trillizosFichaVuela 1.5s ease-in forwards; filter: drop-shadow(0 3px 9px rgba(255,209,102,.7)); }
.trillizos-onda { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; pointer-events: none; }
.trillizos-onda span { position: absolute; width: 130px; height: 130px; border-radius: 50%; border: 2px solid rgba(255,150,40,.65); opacity: 0; animation: trillizosOnda 1.5s ease-out both; }
.trillizos-onda span:nth-child(2) { animation-delay: .18s; }
.trillizos-onda span:nth-child(3) { animation-delay: .36s; }
.trillizos-particulas { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.trillizos-particulas span { position: absolute; left: 50%; top: 48%; width: 5px; height: 5px; border-radius: 50%; background: #ff9f1c; opacity: 0; animation: trillizosParticula 1.25s calc(var(--i) * .045s) ease-out; box-shadow: 0 0 7px #ff6b00; }
.trillizos-ranking { display: grid; gap: 5px; max-width: 520px; margin: 10px auto 0; text-align: left; }
.trillizos-ranking-fila { display: flex; align-items: center; gap: 8px; border: 1px solid var(--borde); border-radius: 10px; padding: 6px 9px; font-size: 13px; }
.trillizos-ranking-fila.mia { border-color: var(--oro); background: rgba(239, 120, 120, .08); }
.trillizos-ranking-fila.ganador { border-color: #ffd166; background: rgba(255,209,102,.09); }
.trillizos-ranking-puesto { width: 23px; text-align: center; font-size: 17px; }
.trillizos-ranking-fila b { flex: 1; }
.trillizos-ranking-fichas { display: flex; gap: 2px; font-size: 16px; }
.trillizos-ranking-fila > span:last-child { color: var(--suave); }
/* Lobby Trillizos */
.trillizos-lobby { display: grid; gap: 12px; }
.trillizos-lobby-cab { display: flex; gap: 12px; align-items: center; }
.trillizos-lobby-icono { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 28px; background: rgba(155,89,182,.18); border: 1px solid rgba(155,89,182,.38); }
.trillizos-lobby-cab h2 { margin: 0; }
.trillizos-lobby-cab p { margin: 2px 0 0; color: var(--suave); font-size: 13px; }
.trillizos-chip { margin-left: auto; border: 1px solid var(--borde); border-radius: 999px; padding: 3px 9px; font-size: 11px; font-weight: 800; color: var(--suave); white-space: nowrap; }
.trillizos-lobby-pozo { border: 1px solid var(--borde); border-radius: 12px; padding: 10px 14px; background: var(--fondo); display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; }
.trillizos-lobby-pozo span { color: var(--suave); font-size: 12px; }
.trillizos-lobby-pozo b { color: var(--azul); font-size: 18px; }
.trillizos-lobby-pozo small { color: var(--suave); }
.trillizos-asientos-lobby { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.trillizos-asiento { border: 1px dashed var(--borde); border-radius: 12px; padding: 10px; display: grid; gap: 2px; text-align: center; color: var(--suave); }
.trillizos-asiento.ocupado { border-style: solid; background: var(--fondo); color: var(--texto); }
.trillizos-avatar { width: 34px; height: 34px; border-radius: 50%; background: #8e5bb5; color: #fff; display: grid; place-items: center; font-weight: 800; margin: 0 auto 2px; }
.trillizos-avatar.vacio { background: var(--fondo); color: var(--suave); border: 1px dashed var(--borde); }
.trillizos-asiento b { font-size: 13px; }
.trillizos-asiento small { color: var(--suave); font-size: 11px; }
.trillizos-invitar { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; }
.trillizos-invitar label { flex: 1; display: grid; gap: 4px; font-size: 12px; color: var(--suave); }
.trillizos-invitar input { width: 100%; border: 1px solid var(--borde); border-radius: 9px; padding: 8px 10px; font: inherit; background: var(--tarjeta); color: var(--texto); }
@keyframes trillizosShake { 10%,90% { transform: translateX(-1px); } 20%,80% { transform: translateX(2px); } 30%,50%,70% { transform: translateX(-4px); } 40%,60% { transform: translateX(4px); } }
@keyframes trillizosBomba { 0%,100% { transform: scale(1) rotate(-3deg); } 45% { transform: scale(1.15) rotate(4deg); } }
@keyframes trillizosFlash { 0% { opacity: .85; } 18% { opacity: .6; } 100% { opacity: 0; } }
@keyframes trillizosHumo { 0% { opacity: .2; transform: scale(.5); } 55% { opacity: .75; } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes trillizosBombaAparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes trillizosParticula { 0% { opacity: .9; transform: translate(0,0) scale(1); } 100% { opacity: 0; transform: translate(calc((var(--i) - 7) * 17px), calc(-70px - (var(--i) % 5) * 18px)) scale(.3); } }
/* Volteo de ficha: se levanta un instante, gira sobre su eje y la cara queda
   sellada con un destello. Vuelve a taparse con el giro inverso. */
@keyframes trillizosVoltea {
  0% { transform: rotateY(0deg) scale(1); }
  34% { transform: rotateY(0deg) scale(1.07); }
  100% { transform: rotateY(180deg) scale(1); }
}
@keyframes trillizosVuelve {
  0% { transform: rotateY(180deg) scale(1.05); }
  100% { transform: rotateY(0deg) scale(1); }
}
@keyframes trillizosElige {
  0% { transform: translateY(0) rotateY(0) scale(1); }
  35% { transform: translateY(-6px) rotateY(0) scale(1.07); }
  100% { transform: translateY(-3px) rotateY(0) scale(1.04); }
}
@keyframes trillizosSella {
  0% { filter: brightness(1.85) saturate(1.25); transform: rotateY(180deg) scale(1.06); }
  100% { filter: none; transform: rotateY(180deg) scale(1); }
}
@keyframes trillizosOnda { 0% { transform: scale(.2); opacity: .85; } 100% { transform: scale(2.7); opacity: 0; } }
@keyframes trillizosFichaVuela { 0% { transform: translate(0,0) rotate(0); opacity: 1; } 60% { transform: translate(90px,-90px) rotate(120deg); opacity: .9; } 100% { transform: translate(190px,120px) rotate(300deg); opacity: 0; } }
@keyframes trillizosPerdio { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px) rotate(-1deg); } 55% { transform: translateX(4px) rotate(1deg); } 80% { transform: translateX(-2px); } }
@keyframes trillizosRompe { 0% { transform: scale(1); } 35% { transform: scale(1.2) rotate(8deg); background: rgba(255,77,77,.25); border-color: #ff4d4d; } 100% { transform: scale(.7) rotate(-15deg); opacity: .25; } }
@media (max-width: 700px) {
  .trillizos-grilla { gap: 4px; }
  .trillizos-tablero-wrap { padding: 6px; }
  .trillizos-cara.frente { font-size: 24px; }
  .trillizos-jugador { padding: 6px 8px; gap: 4px; }
  .trillizos-slot { width: 23px; height: 23px; font-size: 14px; }
  .trillizos-turno-texto { text-align: left; }
  .trillizos-medidor { justify-items: start; text-align: left; }
}
@media (max-width: 520px) {
  /* De a dos por fila: con 3 jugadores la última tarjeta ocupa la fila
     completa para que el bloque quede centrado y prolijo. */
  .trillizos-jugadores { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .trillizos-jugadores > .trillizos-jugador:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .trillizos-coleccion.vacia { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 430px) {
  .trillizos-grilla { gap: 3px; }
  .trillizos-carta { border-radius: 7px; }
  .trillizos-cara { border-radius: 7px; }
  .trillizos-cara.atras { font-size: 17px; }
  .trillizos-cara.frente { font-size: 20px; }
  .trillizos-jugador-cab b { font-size: 12px; }
  .trillizos-mini { width: 18px; height: 18px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .trillizos-tv.trillizos-shake, .trillizos-bomba-emoji, .trillizos-onda span, .trillizos-particulas span, .trillizos-ficha-vuela, .trillizos-jugador.perdio, .trillizos-slot.rompe { animation: none; }
  .trillizos-carta.volteando .trillizos-carta-inner, .trillizos-carta.volviendo .trillizos-carta-inner, .trillizos-carta.volteando .trillizos-cara.frente, .trillizos-carta.eligiendo .trillizos-carta-inner { animation: none; }
}

/* ---------- Hakembó ---------- */
.hakembo-cab-jugadores { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.hakembo-cab-chip { border: 1px solid var(--borde); border-radius: 999px; padding: 3px 10px; font-size: 12px; color: var(--suave); background: var(--fondo); display: inline-flex; align-items: center; gap: 5px; }
.hakembo-cab-chip b { color: var(--azul); }
.hakembo-cab-chip.yo { border-color: var(--oro); }
.hakembo-tv { display: grid; gap: 12px; }
.hakembo-top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.hakembo-marca { display: flex; gap: 10px; align-items: center; }
.hakembo-marca > span { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 27px; background: radial-gradient(circle at 50% 35%, #29364d, #070b12); border: 1px solid rgba(148,163,184,.45); }
.hakembo-marca b { display: block; font-size: 18px; color: var(--azul); }
.hakembo-marca small { color: var(--suave); font-size: 12.5px; }
.hakembo-marcador { display: grid; justify-items: end; gap: 2px; font-weight: 800; color: var(--azul); }
.hakembo-marcador small { color: var(--suave); font-weight: 400; }
.hakembo-punto { display: inline-grid; place-items: center; min-width: 27px; height: 27px; border-radius: 8px; background: rgba(239, 120, 120, .14); border: 1px solid rgba(239, 120, 120, .35); color: var(--oro-osc); }
.hakembo-punto.meta { background: #ffd166; color: #4b2e00; }
.hakembo-jugadores { display: flex; flex-wrap: wrap; gap: 8px; }
.hakembo-jugador { flex: 1 1 170px; border: 1px solid var(--borde); border-radius: 12px; padding: 7px 10px; background: var(--tarjeta); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hakembo-jugador.yo { border-color: rgba(239, 120, 120, .55); }
.hakembo-jugador b { color: var(--azul); font-size: 13px; }
.hakembo-jugador small { color: var(--suave); }
/* Canto previo: los puños marcan el "¡Ha… Kem… BÓ!" */
.hakembo-canto { position: relative; text-align: center; border-radius: 18px; padding: 10px 12px 14px; background: radial-gradient(120% 90% at 50% 0%, #233451, #0a121c 78%); border: 1px solid rgba(239, 120, 120, .24); overflow: hidden; }
.hakembo-canto::after { content: ""; position: absolute; left: 50%; bottom: -70px; width: 280px; height: 140px; margin-left: -140px; background: radial-gradient(60% 100% at 50% 0%, rgba(239, 120, 120, .22), transparent 70%); pointer-events: none; }
.hakembo-manos { position: relative; display: flex; justify-content: center; gap: clamp(34px, 10vw, 88px); font-size: clamp(42px, 9vw, 70px); line-height: 1.12; filter: drop-shadow(0 8px 12px rgba(0,0,0,.45)); }
.hakembo-manos .mano { display: inline-block; transform-origin: 50% 100%; animation: hakemboGolpe .5s ease-in-out 3; }
.hakembo-manos .mano.der { animation-delay: .09s; }
.hakembo-canto > b { position: relative; display: block; font-size: clamp(20px, 3.2vw, 30px); letter-spacing: .18em; color: #ffd166; text-shadow: 0 0 20px rgba(255,209,102,.45); animation: hakemboCanto 1.5s ease-in-out infinite; }
.hakembo-canto > small { position: relative; color: rgba(241,245,249,.72); font-size: 12px; }
@keyframes hakemboGolpe { 0%,100% { transform: translateY(0) rotate(0) scale(1); } 35% { transform: translateY(-16px) rotate(-8deg) scale(1.07); } 65% { transform: translateY(3px) rotate(4deg) scale(.97); } }
@keyframes hakemboCanto { 0%,100% { transform: scale(1); opacity: .9; } 45% { transform: scale(1.06); opacity: 1; } }
.hakembo-botones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.hakembo-btn { display: grid; place-items: center; gap: 2px; padding: 7px 4px 8px; border: 1px solid var(--borde); border-radius: 14px; background: var(--tarjeta); color: var(--texto); font: inherit; cursor: pointer; transition: border-color .15s, transform .12s, background .15s; }
.hakembo-btn:hover:not(:disabled) { border-color: var(--oro); transform: translateY(-2px); }
.hakembo-btn.sel { border-color: var(--oro); background: rgba(239, 120, 120, .13); box-shadow: 0 0 0 2px rgba(239, 120, 120, .18) inset; }
.hakembo-btn:disabled { cursor: default; opacity: .6; }
.hakembo-btn-figura { height: 62px; display: grid; place-items: center; }
.hakembo-figura { width: 58px; height: 58px; display: block; filter: drop-shadow(0 4px 7px rgba(0,0,0,.3)); }
.hakembo-btn b { font-size: 11px; letter-spacing: .1em; }
.hakembo-btn small { font-size: 17px; line-height: 1; }
/* Duelo revelado: el ganador queda grande en el centro y el perdedor al costado */
.hakembo-escena { position: relative; display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center; gap: 6px; min-height: 262px; padding: 18px 10px 12px; border-radius: 18px; background: radial-gradient(130% 100% at 50% 0%, #22314a, #080f18 80%); border: 1px solid rgba(148,163,184,.26); overflow: hidden; isolation: isolate; }
.hakembo-foco { position: absolute; left: 50%; top: -70px; width: 420px; height: 260px; margin-left: -210px; background: radial-gradient(50% 60% at 50% 50%, rgba(239, 120, 120, .2), transparent 72%); pointer-events: none; z-index: 0; }
.hakembo-onda { position: absolute; left: 50%; top: 42%; width: 70px; height: 70px; margin: -35px 0 0 -35px; border-radius: 50%; border: 2px solid rgba(255,209,102,.6); opacity: 0; pointer-events: none; z-index: 1; }
.hakembo-escena.duelo .hakembo-onda { animation: hkOnda .8s .42s ease-out both; }
.hakembo-pieza { position: relative; display: grid; justify-items: center; gap: 2px; z-index: 2; }
.hakembo-pieza .hakembo-figura-wrap { width: 116px; height: 116px; display: grid; place-items: center; }
.hakembo-pieza .hakembo-figura { width: 108px; height: 108px; }
.hakembo-aura { position: absolute; top: 0; width: 168px; height: 168px; border-radius: 50%; background: radial-gradient(circle, rgba(255,209,102,.32), transparent 68%); opacity: 0; z-index: -1; }
/* Ganador: en el medio y grande */
.hakembo-pieza.gana { grid-row: 1; justify-self: center; animation: hkGanaCentro .8s .28s cubic-bezier(.2,1.3,.3,1) both; }
.hakembo-pieza.gana .hakembo-figura-wrap { width: 156px; height: 156px; }
.hakembo-pieza.gana .hakembo-figura { width: 148px; height: 148px; filter: drop-shadow(0 8px 16px rgba(0,0,0,.4)) drop-shadow(0 0 20px rgba(255,209,102,.5)); }
.hakembo-pieza.gana .hakembo-aura { animation: hkAura 1.5s .5s ease-out infinite alternate; }
.hakembo-pieza.gana .hakembo-placa b { color: #ffd166; font-size: 15px; }
.hakembo-pieza.gana .hakembo-score { animation: hkScore .6s .8s ease-out both; background: #ffd166; border-color: #ffd166; color: #3a2400; }
/* Perdedor: al costado, chico y apagado */
.hakembo-pieza.pierde { position: absolute; left: 2.5%; top: 18%; transform-origin: 50% 60%; z-index: 1; animation: hkPierdeLado .9s .32s ease-out both; pointer-events: none; }
.hakembo-pieza.pierde .hakembo-figura-wrap { width: 84px; height: 84px; }
.hakembo-pieza.pierde .hakembo-figura { width: 80px; height: 80px; filter: saturate(.25) brightness(.75); }
.hakembo-pieza.pierde .hakembo-placa b { color: #93a4b8; font-size: 11px; max-width: 92px; }
.hakembo-pieza.pierde .hakembo-placa small { font-size: 9px; }
.hakembo-pieza.pierde .hakembo-score { display: none; }
.hakembo-pareja { grid-row: 1; display: flex; align-items: center; justify-content: center; gap: clamp(14px, 7vw, 56px); width: 100%; }
.hakembo-pieza.empate { animation: hkEmpate .7s .4s ease-out both; }
.hakembo-placa { display: grid; justify-items: center; gap: 1px; text-align: center; }
.hakembo-placa b { color: #f1f5f9; font-size: 13px; max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hakembo-placa small { color: #93a4b8; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.hakembo-score { position: relative; min-width: 36px; height: 26px; padding: 0 9px; border-radius: 999px; display: grid; place-items: center; font-weight: 900; font-size: 14px; font-variant-numeric: tabular-nums; color: #ffd166; background: rgba(255,209,102,.12); border: 1px solid rgba(255,209,102,.38); }
.hakembo-mas { position: absolute; right: -8px; top: -15px; font-style: normal; font-size: 13px; font-weight: 900; color: #39ff14; text-shadow: 0 0 8px rgba(57,255,20,.55); animation: hkMas .95s .85s ease-out both; }
.hakembo-veredicto { grid-row: 2; display: grid; justify-items: center; gap: 1px; text-align: center; opacity: 0; animation: hkTexto .45s .8s ease-out both; z-index: 3; }
.hakembo-veredicto b { color: #f1f5f9; font-size: 14.5px; line-height: 1.25; text-wrap: balance; }
.hakembo-veredicto small { color: #93a4b8; font-size: 11.5px; }
.hakembo-veredicto small.gano { color: #39ff14; font-weight: 800; }
/* Efectos por figura ganadora */
.hakembo-escena.efecto-pozo .hakembo-pieza.pierde::before { content: ""; position: absolute; left: 50%; bottom: 6px; width: 96px; height: 20px; margin-left: -48px; border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, #000 35%, transparent 72%); opacity: 0; animation: hkPozo .7s .38s ease-out both; z-index: 1; }
.hakembo-escena.efecto-pozo .hakembo-pieza.pierde .hakembo-figura-wrap { animation: hkCae 1.15s .48s cubic-bezier(.4,0,.85,1) both; }
.hakembo-escena.efecto-tapa .hakembo-pieza.pierde::after, .hakembo-escena.efecto-envuelve .hakembo-pieza.pierde::after { content: ""; position: absolute; top: 6px; width: 84px; height: 100px; border-radius: 6px; background: repeating-linear-gradient(0deg, #f8fafc 0 8px, #dfe6ee 8px 10px); border: 1px solid #9aa7b8; box-shadow: 0 8px 18px rgba(0,0,0,.35); opacity: 0; transform: rotate(-10deg); animation: hkPapel .75s .45s cubic-bezier(.3,1.25,.4,1) both; z-index: 4; }
.hakembo-escena.efecto-corta::after { content: ""; position: absolute; left: 6%; right: 6%; top: 44%; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, #e2e8f0, #fff, transparent); box-shadow: 0 0 16px rgba(255,255,255,.85); opacity: 0; transform: rotate(-22deg) scaleX(0); animation: hkCorte .62s .48s ease-out both; z-index: 5; pointer-events: none; }
.hakembo-escena.efecto-rompe .hakembo-onda { border-color: #ffd166; box-shadow: 0 0 26px rgba(255,209,102,.55); animation: hkOnda .6s .44s ease-out both; }
.hakembo-escena.efecto-empate .hakembo-onda { border-color: rgba(148,163,184,.7); animation: hkOnda .9s .42s ease-out both; }
@keyframes hkGanaCentro { 0% { opacity: 0; transform: scale(.5) translateY(16px); } 60% { opacity: 1; transform: scale(1.08) translateY(-5px); } 100% { opacity: 1; transform: none; } }
@keyframes hkPierdeLado { 0% { opacity: 0; transform: translateY(4px) rotate(-2deg) scale(1); } 30% { opacity: .65; } 100% { opacity: .45; transform: translateY(16px) rotate(-9deg) scale(.86); } }
@keyframes hkGana { 0% { transform: scale(.85); } 55% { transform: scale(1.14) translateY(-7px); } 100% { transform: scale(1.03); } }
@keyframes hkEmpate { 0% { transform: none; } 40% { transform: translateY(-5px) scale(1.06); } 100% { transform: none; } }
@keyframes hkAura { from { opacity: .3; transform: scale(.85); } to { opacity: .85; transform: scale(1.16); } }
@keyframes hkScore { 0% { transform: scale(1); } 50% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes hkMas { 0% { opacity: 0; transform: translateY(8px) scale(.7); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-24px) scale(1.15); } }
@keyframes hkTexto { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes hkOnda { 0% { opacity: .85; transform: scale(.3); } 100% { opacity: 0; transform: scale(6); } }
@keyframes hkCae { 0% { transform: none; opacity: 1; } 60% { transform: translateY(48px) rotate(200deg) scale(.42); opacity: .75; } 100% { transform: translateY(84px) rotate(480deg) scale(.05); opacity: 0; } }
@keyframes hkPozo { 0% { opacity: 0; transform: scale(.4); } 60% { opacity: .9; transform: scale(1); } 100% { opacity: .55; transform: scale(1); } }
@keyframes hkPapel { 0% { opacity: 0; transform: translateY(-96px) rotate(-24deg) scale(.72); } 70% { opacity: 1; transform: translateY(8px) rotate(-8deg) scale(1.03); } 100% { opacity: 1; transform: translateY(12px) rotate(-10deg) scale(1); } }
@keyframes hkCorte { 0% { opacity: 0; transform: rotate(-22deg) scaleX(0); } 40% { opacity: 1; transform: rotate(-22deg) scaleX(1); } 100% { opacity: 0; transform: rotate(-22deg) scaleX(1); } }
.hakembo-reloj { position: relative; height: 8px; border-radius: 999px; background: rgba(255,255,255,.09); margin: 0 2px; }
.hakembo-reloj > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #39ff14, #ffd166); transition: width .25s linear; }
.hakembo-reloj > b { position: absolute; right: 0; top: -19px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--suave); }
.hakembo-reloj.urgente > span { background: linear-gradient(90deg, #ff4d4d, #ff9f1c); }
.hakembo-ranking { display: grid; gap: 5px; max-width: 470px; margin: 10px auto 0; text-align: left; }
.hakembo-ranking-fila { display: flex; align-items: center; gap: 8px; border: 1px solid var(--borde); border-radius: 10px; padding: 6px 9px; font-size: 13px; }
.hakembo-ranking-fila.mia { border-color: var(--oro); background: rgba(239, 120, 120, .08); }
.hakembo-ranking-fila.ganador { border-color: #ffd166; background: rgba(255,209,102,.09); }
.hakembo-ranking-fila span:first-child { width: 23px; text-align: center; }
.hakembo-ranking-fila b { flex: 1; }
.hakembo-ranking-fila > span:last-child { color: var(--suave); }
/* Pantalla final: el último duelo, con el ganador en dorado */
.hakembo-final-duelo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; max-width: 430px; margin: 14px auto 2px; }
.hakembo-final-lado { display: grid; justify-items: center; gap: 2px; opacity: .5; transition: opacity .2s; }
.hakembo-final-lado.gana { opacity: 1; }
.hakembo-final-lado.gana .hakembo-final-figura { filter: drop-shadow(0 0 16px rgba(255,209,102,.6)); animation: hkGana .7s cubic-bezier(.2,1.35,.3,1) both; }
.hakembo-final-lado.gana b { color: var(--oro-osc); }
.hakembo-final-figura { width: 74px; height: 74px; display: grid; place-items: center; }
.hakembo-final-figura .hakembo-figura { width: 68px; height: 68px; }
.hakembo-final-lado b { color: var(--azul); font-size: 12.5px; max-width: 122px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hakembo-final-lado small { color: var(--suave); font-size: 11px; }
.hakembo-final-vs { font-weight: 900; font-size: 15px; color: var(--oro-osc); letter-spacing: .1em; }
@media (max-width: 700px) {
  .hakembo-botones { grid-template-columns: repeat(2, 1fr); }
  .hakembo-escena { min-height: 230px; padding: 16px 8px 10px; }
  .hakembo-pieza .hakembo-figura-wrap { width: 92px; height: 92px; }
  .hakembo-pieza .hakembo-figura { width: 86px; height: 86px; }
  .hakembo-pieza.gana .hakembo-figura-wrap { width: 126px; height: 126px; }
  .hakembo-pieza.gana .hakembo-figura { width: 120px; height: 120px; }
  .hakembo-pieza.pierde { left: 1%; top: 20%; }
  .hakembo-pieza.pierde .hakembo-figura-wrap { width: 64px; height: 64px; }
  .hakembo-pieza.pierde .hakembo-figura { width: 60px; height: 60px; }
  .hakembo-aura { width: 134px; height: 134px; }
  .hakembo-veredicto b { font-size: 12px; }
  .hakembo-veredicto small { font-size: 10px; }
  .hakembo-placa b { font-size: 11.5px; max-width: 96px; }
  .hakembo-pieza.gana .hakembo-placa b { font-size: 13px; }
  .hakembo-score { min-width: 30px; height: 23px; font-size: 12.5px; padding: 0 7px; }
  .hakembo-escena.efecto-tapa .hakembo-pieza.pierde::after,
  .hakembo-escena.efecto-envuelve .hakembo-pieza.pierde::after { width: 58px; height: 74px; }
  .hakembo-btn-figura { height: 50px; }
  .hakembo-figura { width: 47px; height: 47px; }
  .hakembo-marcador { justify-items: start; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .hakembo-manos .mano, .hakembo-canto > b, .hakembo-pieza, .hakembo-pieza.gana, .hakembo-pieza.pierde,
  .hakembo-pieza.empate, .hakembo-pieza.gana .hakembo-aura, .hakembo-pieza.gana .hakembo-score,
  .hakembo-mas, .hakembo-veredicto, .hakembo-onda, .hakembo-escena::after,
  .hakembo-pieza.pierde::after, .hakembo-pieza.pierde::before,
  .hakembo-escena.efecto-pozo .hakembo-pieza.pierde .hakembo-figura-wrap { animation: none; }
  .hakembo-veredicto { opacity: 1; }
  .hakembo-pieza.pierde { opacity: .45; }
}

/* ---------- Dino Runner / Kart Arcade ---------- */
.arcade-cab-jugadores { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.arcade-cab-chip { border: 1px solid var(--borde); border-radius: 999px; padding: 2px 9px; font-size: 11.5px; color: var(--suave); background: var(--fondo); display: inline-flex; gap: 4px; align-items: center; }
.arcade-cab-chip b { color: var(--azul); }
.arcade-cab-chip.yo { border-color: var(--oro); }
.arcade-cab-chip.fuera { opacity: .55; }
.dino-tv, .kart-tv { display: grid; gap: 8px; position: relative; }
.arcade-hud { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; }
/* El botón «Ampliar» se suma a la barra: el texto del medio se recorta antes que
   apretar el título o el botón. */
.arcade-hud > .suave { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arcade-hud > span:first-child { flex: 0 0 auto; }

/* Grillas de tablero: la columna NO debe crecer con el max-content del HUD.
   Antes, un texto largo o el botón «Ampliar» ensanchaban la pista (en Super
   Runner el lienzo medía 404 px dentro de una caja de 352 y se recortaba). */
.dino-tv, .kart-tv, .snake-tv, .bounce-tv, .plataformas-tv, .galaxia-tv,
.match3-tv, .tetris-tv, .penal-tv, .bolos-tv, .billar-tv, .minigolf-tv, .pvz-tv {
  grid-template-columns: minmax(0, 1fr);
}
.arcade-hud b { color: var(--azul); }
.arcade-hud .suave { color: var(--suave); }
#dinoCanvas, #kartCanvas { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid rgba(148,163,184,.35); background: #0b1424; box-shadow: 0 12px 30px rgba(0,0,0,.35); touch-action: none; }
#dinoCanvas { aspect-ratio: 900 / 320; }
.kart-tv { display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; min-height: 0; }
.kart-tv > * { flex: 0 0 auto; }
/* El tamaño exacto lo calcula `dimensionarKart()` respetando 540×960; acá queda
   un respaldo proporcional para que nunca se deforme si el JS no corre. */
#kartCanvas { flex: 0 0 auto; width: auto; height: auto; max-width: 100%; aspect-ratio: 540 / 960; margin-inline: auto; }
/* El envoltorio de `ajustarTablero()` no debe colapsar el alto del panel. */
body.juego-body.sala-body #tablero > .tb-fit:has(> .kart-tv) { height: 100%; }
body.juego-body.sala-body #tablero > .tb-fit:has(> .kart-tv) > .kart-tv { height: 100%; min-height: 0; }
@media (max-width: 860px) {
  .kart-tv { height: auto; }
  #kartCanvas { width: auto; }
}
.arcade-controles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kart-controles { grid-template-columns: 1fr 1.5fr 1fr; width: 100%; max-width: 560px; }
.arcade-controles .btn { font-size: 17px; min-height: 48px; }
.kart-controles .kart-flecha { font-size: 22px; line-height: 1; }
.kart-item-btn { font-size: 15px; font-weight: 900; letter-spacing: .02em; }
.kart-item-btn.con-item { background: linear-gradient(135deg, #ffd166, var(--oro)); color: #241500; }
.kart-item-btn:disabled { opacity: .5; cursor: default; }
@keyframes kart-item-pulso { 50% { box-shadow: 0 0 0 3px rgba(239, 120, 120, .22); } }
.kart-item-btn.con-item { animation: kart-item-pulso 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .kart-item-btn.con-item { animation: none; } }
.arcade-ayuda { margin: 0; text-align: center; color: var(--suave); font-size: 12px; }
.dino-tv.shake, .kart-tv.shake { animation: arcade-shake .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes arcade-shake { 10%,90% { transform: translateX(-1px); } 20%,80% { transform: translateX(2px); } 30%,50%,70% { transform: translateX(-4px); } 40%,60% { transform: translateX(4px); } }
.arcade-ranking { display: grid; gap: 5px; max-width: 500px; margin: 10px auto 0; text-align: left; }
.arcade-ranking-fila { display: flex; align-items: center; gap: 8px; border: 1px solid var(--borde); border-radius: 10px; padding: 6px 9px; font-size: 13px; }
.arcade-ranking-fila.mia { border-color: var(--oro); background: rgba(239, 120, 120, .08); }
.arcade-ranking-fila.ganador { border-color: #ffd166; background: rgba(255,209,102,.09); }
.arcade-ranking-fila b { flex: 1; }
.arcade-ranking-fila > span:last-child { color: var(--suave); }
/* Kart lobby */
.kart-lobby { display: grid; gap: 12px; }
.kart-lobby-cab { display: flex; gap: 12px; align-items: center; }
.kart-lobby-icono { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 28px; background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.35); }
.kart-lobby-cab h2 { margin: 0; }
.kart-lobby-cab p { margin: 2px 0 0; color: var(--suave); font-size: 13px; }
.kart-chip { margin-left: auto; border: 1px solid var(--borde); border-radius: 999px; padding: 3px 9px; font-size: 11px; font-weight: 800; color: var(--suave); white-space: nowrap; }
.kart-lobby-pozo { border: 1px solid var(--borde); border-radius: 12px; padding: 10px 14px; background: var(--fondo); display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; }
.kart-lobby-pozo span { color: var(--suave); font-size: 12px; }
.kart-lobby-pozo b { color: var(--azul); font-size: 18px; }
.kart-lobby-pozo small { color: var(--suave); }
.kart-asientos-lobby { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 8px; }
.kart-asiento { border: 1px dashed var(--borde); border-radius: 12px; padding: 10px; display: grid; gap: 2px; text-align: center; color: var(--suave); }
.kart-asiento.ocupado { border-style: solid; background: var(--fondo); color: var(--texto); }
.kart-avatar { width: 35px; height: 35px; border-radius: 10px; background: #ef4444; color: #fff; display: grid; place-items: center; font-weight: 900; margin: 0 auto 2px; }
.kart-avatar.vacio { background: var(--fondo); color: var(--suave); border: 1px dashed var(--borde); }
.kart-asiento b { font-size: 13px; }
.kart-asiento small { color: var(--suave); font-size: 11px; }
.kart-invitar { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; }
.kart-invitar label { flex: 1; display: grid; gap: 4px; font-size: 12px; color: var(--suave); }
.kart-invitar input { width: 100%; border: 1px solid var(--borde); border-radius: 9px; padding: 8px 10px; font: inherit; background: var(--tarjeta); color: var(--texto); }
@media (max-width: 600px) { #dinoCanvas { border-radius: 10px; } .arcade-controles .btn { min-height: 44px; font-size: 15px; } .arcade-hud { font-size: 11.5px; } }
@media (prefers-reduced-motion: reduce) { .dino-tv.shake, .kart-tv.shake { animation: none; } }
.kart-elegir { display: flex; gap: 3px; justify-content: center; margin-top: 5px; }
.kart-elegir-btn { width: 26px; height: 24px; border: 1px solid var(--borde); border-radius: 6px; background: var(--tarjeta); color: var(--suave); font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; padding: 0; }
.kart-elegir-btn.activa { background: var(--oro); border-color: var(--oro); color: #1a1205; }
.kart-elegir-btn:hover { border-color: var(--oro); }

/* ---------- Kart: barra de sala baja, simétrica y alineada ---------- */
/* Nombre · karts (centrados, todos del mismo ancho) · entrada. Una sola fila
   de 36 px: lo justo para los chips, sin robarle alto a la pista. */
#salaCab.cab-kart { padding: 5px 10px; }
#salaCab.cab-kart .kart-cab {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  row-gap: 2px;
}
.kart-cab-marca { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; font-weight: 800; color: var(--azul); }
.kart-cab-marca > span { flex: none; font-size: 16px; line-height: 1; }
.kart-cab-marca b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kart-cab-chips { display: flex; justify-content: center; align-items: center; gap: 5px; min-width: 0; max-width: 620px; }
.kart-cab-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  flex: 0 1 150px; min-width: 0; height: 26px; padding: 0 9px;
  border: 1px solid var(--borde); border-radius: 999px; background: var(--fondo);
  font-size: 11.5px; line-height: 1; color: var(--suave); white-space: nowrap;
}
.kart-cab-chip i { flex: none; font-style: normal; font-weight: 900; color: #b45309; }
.kart-cab-chip b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; color: var(--azul); }
.kart-cab-chip small { flex: none; font-size: 10.5px; font-variant-numeric: tabular-nums; }
.kart-cab-chip.yo { border-color: var(--oro); background: rgba(239, 120, 120, .12); box-shadow: inset 0 0 0 1px rgba(239, 120, 120, .35); }
.kart-cab-chip.fuera { opacity: .5; }
.kart-cab-der { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }
.kart-cab-estado { font-size: 11px; color: var(--suave); white-space: nowrap; }
@media (max-width: 760px) {
  .kart-cab-marca b { font-size: 11.5px; }
  .kart-cab-estado { display: none; }
  .kart-cab-chips { max-width: 64vw; }
  .kart-cab-chip { flex: 0 1 124px; padding: 0 7px; }
}
@media (max-width: 470px) {
  #salaCab.cab-kart .kart-cab { column-gap: 6px; }
  .kart-cab-marca b { display: none; }
  .kart-cab-chips { max-width: calc(100vw - 168px); }
  .kart-cab-chip { flex: 1 1 0; padding: 0 6px; gap: 3px; }
  .kart-cab-chip small { display: none; }
  .sala-apuesta { padding: 1px 7px; font-size: 10.5px; }
}

/* ---------- Billar Pool 8 / Mini Golf Aventura ---------- */
.billar-tv, .minigolf-tv { display: grid; gap: 8px; position: relative; }
#billarCanvas, #minigolfCanvas { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid rgba(148,163,184,.35); background: #07130f; box-shadow: 0 12px 30px rgba(0,0,0,.35); touch-action: none; }
#billarCanvas { aspect-ratio: 1000 / 500; }
#minigolfCanvas { aspect-ratio: 1000 / 620; }
.billar-panel, .minigolf-panel { display: grid; gap: 8px; }
.billar-potencia { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--suave); }
.billar-potencia > div { flex: 1; height: 10px; border-radius: 999px; background: rgba(148,163,184,.18); overflow: hidden; }
.billar-potencia i { display: block; width: 0; height: 100%; background: linear-gradient(90deg,#22c55e,#facc15,#ef4444); transition: width .08s linear; }
.billar-potencia b { min-width: 42px; text-align: right; color: var(--azul); }
.billar-efectos { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.billar-efectos small { color: var(--suave); font-weight: 800; letter-spacing: .04em; }
.billar-efecto-btn { border: 1px solid var(--borde); border-radius: 8px; background: var(--fondo); color: var(--suave); padding: 5px 8px; font: inherit; font-size: 11px; cursor: pointer; }
.billar-efecto-btn.activa { border-color: var(--oro); background: rgba(239, 120, 120, .18); color: var(--texto); }
.billar-tv.flash { animation: billarFlash .35s ease; }
@keyframes billarFlash { 0%,100% { filter: none; } 40% { filter: brightness(1.35) saturate(1.25); } }
.minigolf-tv.festejo { animation: golfFestejo .9s ease; }
@keyframes golfFestejo { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-3px) rotate(-.4deg); } 40% { transform: translateX(3px) rotate(.4deg); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }
@media (max-width: 640px) { #billarCanvas, #minigolfCanvas { border-radius: 10px; } .billar-efectos { gap: 4px; } .billar-efecto-btn { padding: 4px 6px; font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { .billar-tv.flash, .minigolf-tv.festejo { animation: none; } }
/* ---------- Billar: controles compactos (fuerza + efecto) ---------- */
.billar-tv .billar-lado { display: flex; align-items: center; gap: 12px; padding: 2px 4px 0; }
.billar-efecto { position: relative; flex: 0 0 auto; width: 60px; height: 60px; border-radius: 50%; touch-action: none; cursor: pointer;
  background: radial-gradient(circle at 36% 30%, #ffffff 0%, #eef2f8 45%, #bcc7d6 100%); border: 2px solid rgba(15,23,42,.55);
  box-shadow: 0 3px 10px rgba(0,0,0,.4), inset 0 -4px 8px rgba(0,0,0,.15); opacity: .92; }
.billar-efecto::before, .billar-efecto::after { content: ''; position: absolute; background: rgba(15,23,42,.18); }
.billar-efecto::before { left: 50%; top: 14%; bottom: 14%; width: 1px; }
.billar-efecto::after { top: 50%; left: 14%; right: 14%; height: 1px; }
.billar-efecto i { position: absolute; left: 50%; top: 50%; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border-radius: 50%; z-index: 1;
  background: radial-gradient(circle at 35% 30%, #ff8a80, #d32f2f 70%); box-shadow: 0 1px 4px rgba(0,0,0,.5); pointer-events: none; }
.billar-efecto.con-efecto { border-color: var(--oro); box-shadow: 0 0 0 3px rgba(239, 120, 120, .35), 0 3px 10px rgba(0,0,0,.4); }
.billar-fuerza { position: relative; flex: 1 1 auto; min-width: 0; height: 48px; display: flex; align-items: center; gap: 8px; touch-action: none; cursor: pointer; }
.billar-fuerza-carril { position: relative; flex: 1 1 auto; height: 16px; border-radius: 999px; background: rgba(148,163,184,.22);
  border: 1px solid rgba(148,163,184,.4); box-shadow: inset 0 1px 3px rgba(0,0,0,.4); overflow: visible; }
.billar-fuerza-carril i { --f: 0; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--f) * 1%); border-radius: 999px;
  background: linear-gradient(90deg, #22c55e, #facc15 60%, #ef4444); transition: none; }
.billar-fuerza-carril i::after { content: ''; position: absolute; right: -11px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%;
  background: #f8fafc; border: 2px solid #0f172a; box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.billar-fuerza b { flex: 0 0 26px; text-align: right; font-size: 11px; color: var(--azul); font-variant-numeric: tabular-nums; }
.billar-fuerza.activa .billar-fuerza-carril { border-color: var(--oro); }
.billar-fuerza.cancelar .billar-fuerza-carril { opacity: .4; }
.billar-fuerza.cancelar::after { content: '✕'; position: absolute; right: 0; top: -2px; color: #f87171; font-weight: 900; }
@media (orientation: landscape) {
  .billar-tv { grid-template-columns: minmax(0, 1fr) 76px; grid-template-areas: "hud hud" "mesa lado" "ayuda ayuda"; column-gap: 10px; }
  .billar-tv > .arcade-hud { grid-area: hud; }
  .billar-tv > #billarCanvas { grid-area: mesa; }
  .billar-tv > .arcade-ayuda { grid-area: ayuda; }
  .billar-tv .billar-lado { grid-area: lado; flex-direction: column; align-self: stretch; contain: size; width: 76px; padding: 0; gap: 10px; justify-content: space-between; }
  .billar-efecto { width: 64px; height: 64px; }
  .billar-fuerza { flex: 1 1 0; width: 48px; height: auto; min-height: 0; flex-direction: column-reverse; gap: 4px; align-self: center; }
  .billar-fuerza-carril { flex: 1 1 auto; width: 16px; height: auto; }
  .billar-fuerza-carril i { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: calc(var(--f) * 1%);
    background: linear-gradient(0deg, #22c55e, #facc15 60%, #ef4444); }
  .billar-fuerza-carril i::after { right: auto; left: 50%; top: -11px; margin: 0 0 0 -11px; }
  .billar-fuerza b { flex: 0 0 auto; text-align: center; }
  .billar-fuerza.cancelar::after { right: auto; left: 50%; top: -14px; margin-left: -6px; }
}
@media (orientation: landscape) and (max-height: 560px) { .billar-tv > .arcade-ayuda { display: none; } }


/* ---------- Mini Golf: campo vertical y elementos compactos ---------- */
.minigolf-cancha { display: block; }
.minigolf-hud { gap: 6px; min-width: 0; }
.minigolf-hud > span { min-width: 0; }
.minigolf-hud-izq, .minigolf-hud-der {
  display: inline-flex; align-items: baseline; gap: 2px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.minigolf-hud-der { justify-content: flex-end; flex: 0 0 auto; }
.minigolf-hud-der b { color: #ffd166; }
/* Pantalla vertical (celular): el campo rota y ocupa todo el alto disponible. */
@media (max-aspect-ratio: 1/1) {
  body.juego-body.sala-body #tablero[data-juego="minigolf"] > .tb-fit { height: 100%; }
  .minigolf-tv { height: 100%; min-height: 0; display: flex; flex-direction: column; gap: 5px; }
  .minigolf-tv > .minigolf-hud,
  .minigolf-tv > .minigolf-panel,
  .minigolf-tv > .arcade-ayuda { flex: 0 0 auto; width: 100%; }
  .minigolf-cancha {
    flex: 1 1 auto; min-height: 0; width: 100%;
    display: flex; align-items: center; justify-content: center;
  }
  #minigolfCanvas {
    flex: 0 0 auto; width: auto; height: auto;
    max-width: 100%; max-height: 100%;
    aspect-ratio: 620 / 1000; border-radius: 12px;
  }
  .minigolf-hud { font-size: 11.5px; line-height: 1.25; }
  .minigolf-tv .billar-potencia { gap: 6px; font-size: 10.5px; }
  .minigolf-tv .billar-potencia > div { height: 8px; }
  .minigolf-tv .arcade-ayuda { font-size: 11px; line-height: 1.2; }
  .minigolf-tv .arcade-ayuda b { font-weight: 800; }
  .minigolf-tv .arcade-ayuda .golf-ayuda-extra { display: none; }
}
@media (max-aspect-ratio: 1/1) and (max-height: 680px) {
  .minigolf-hud { font-size: 10.5px; }
  .minigolf-tv { gap: 4px; }
  .minigolf-tv .arcade-ayuda { display: none; }
}


/* ---------- Tetra Blox / Joyas / Galaxia ---------- */
/* Tetra Blox ocupa el alto disponible: cabecera compacta, tablero propio
   centrado y rival al costado (46 % del alto, alineado al centro). */
.tetris-tv { display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; min-height: 0; width: 100%; max-width: 720px; margin: 0 auto; position: relative; }
.tetris-tv > .tetris-controles, .tetris-tv > .arcade-ayuda { flex: 0 0 auto; width: 100%; }
.tetris-boards { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; gap: 10px; justify-content: center; align-items: center; }
#tetrisCanvas { display: block; height: 100%; width: auto; max-width: 100%; aspect-ratio: 1 / 2; border-radius: 12px; border: 1px solid rgba(34,211,238,.35); background: #05060f; box-shadow: 0 10px 24px rgba(0,0,0,.35); touch-action: none; }
.tetris-rival { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 100%; min-height: 0; flex: 0 0 auto; color: var(--suave); font-size: 10px; letter-spacing: .04em; }
#tetrisRivalCanvas { display: block; height: 46%; width: auto; max-width: 100%; aspect-ratio: 1 / 2; border-radius: 8px; border: 1px solid rgba(148,163,184,.25); background: #05060f; }
.tetris-controles, .galaxia-controles { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.tetris-controles .btn { min-width: 48px; min-height: 42px; font-size: 18px; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.tetris-controles .btn.oro { min-width: 96px; font-weight: 900; }
.match3-boards { display: flex; gap: 8px; justify-content: center; align-items: flex-start; min-width: 0; }
/* Los dos tableros se reparten el ancho: antes el del rival tenía 240 px fijos y
   en el celular se salía del tablero (se veía cortado). */
#match3Canvas { flex: 1 1 auto; min-width: 0; width: 100%; max-width: 420px; height: auto; aspect-ratio: 420 / 440; border-radius: 12px; border: 1px solid rgba(244,114,182,.3); background: #070412; touch-action: none; }
.match3-rival { flex: 0 0 26%; max-width: 180px; min-width: 0; display: grid; gap: 4px; justify-items: center; color: var(--suave); font-size: 10px; }
#match3RivalCanvas { width: 100%; height: auto; }
#match3RivalCanvas { width: min(240px, 42vw); height: auto; aspect-ratio: 240 / 250; border-radius: 8px; border: 1px solid rgba(148,163,184,.25); background: #070412; }
.galaxia-tv { display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; min-height: 0; }
.galaxia-tv > .arcade-hud, .galaxia-tv > .galaxia-controles, .galaxia-tv > .arcade-ayuda { flex: 0 0 auto; }
#galaxiaCanvas { display: block; flex: 1 1 auto; min-height: 0; width: auto; height: auto; max-height: 100%; max-width: 100%; border-radius: 14px; border: 1px solid rgba(34,211,238,.35); background: #020617; box-shadow: 0 10px 26px rgba(0,0,0,.4); touch-action: none; }
@media (max-width: 860px) {
  .galaxia-tv { height: auto; }
  #galaxiaCanvas { width: 100%; max-height: 62dvh; flex: 0 0 auto; }
}
.galaxia-controles .btn { min-width: 70px; min-height: 42px; }
.galaxia-tv.shake { animation: arcade-shake .4s ease; }
.match3-tv { display: grid; gap: 8px; position: relative; max-width: 720px; margin: 0 auto; }
@media (max-width: 860px) {
  .tetris-tv { height: auto; }
  #tetrisCanvas { height: auto; width: min(280px, 58vw); }
  .tetris-rival { height: auto; }
  #tetrisRivalCanvas { width: min(126px, 27vw); }
}
/* Franja de próximas piezas: sin esto no se podía planificar la jugada. */
.tetris-siguientes { display: flex; align-items: center; justify-content: center; gap: 8px; }
.tetris-siguientes > span { font-size: 10px; font-weight: 800; letter-spacing: .08em; color: var(--suave); }
#tetrisNextCanvas { display: block; width: 180px; height: 48px; border-radius: 10px; border: 1px solid rgba(148,163,184,.28); }
@media (max-width: 640px) {
  #tetrisNextCanvas { width: 150px; height: 42px; }
}
@media (max-width: 640px) {
  #tetrisCanvas { width: min(230px, 58vw); }
  #tetrisRivalCanvas { width: min(110px, 28vw); }
  .match3-boards, .tetris-boards { gap: 6px; }
  /* El tablero del rival no entra al lado del propio en un celular: su avance ya
     está en la cabecera de la sala ("María 11/10 combos"). */
  .match3-rival { display: none; }
  #match3Canvas { max-width: 100%; }
}

/* ---------- Cyber Pong 1v1 ---------- */
.pingpong-tv { display: flex; flex-direction: column; align-items: center; gap: 9px; height: 100%; min-height: 0; max-width: 1080px; margin: 0 auto; position: relative; }
.pingpong-tv > .arcade-hud, .pingpong-tv > .pingpong-controles, .pingpong-tv > .arcade-ayuda { flex: 0 0 auto; width: 100%; }
.pingpong-tv > .arcade-hud { letter-spacing: .01em; }
#pingpongCanvas { display: block; flex: 1 1 auto; min-height: 0; width: auto; height: auto; max-height: 100%; max-width: 100%; border-radius: 16px; border: 1px solid rgba(34,211,238,.42); background: #040914; box-shadow: 0 18px 38px rgba(2,6,23,.62), 0 0 54px rgba(34,211,238,.14), inset 0 0 0 1px rgba(255,255,255,.05); touch-action: none; cursor: grab; image-rendering: auto; }
#pingpongCanvas:active { cursor: grabbing; }
#pingpongCanvas:focus-visible { outline: 2px solid rgba(103,232,249,.9); outline-offset: 3px; }
.pingpong-tv.vertical #pingpongCanvas { max-height: 100%; }
.pingpong-controles { display: flex; gap: 10px; justify-content: center; align-items: stretch; }
.pingpong-controles .btn { min-width: 104px; min-height: 46px; font-size: 20px; touch-action: none; user-select: none; -webkit-user-select: none; }
.pingpong-controles .btn.pp-centrar { min-width: 58px; font-size: 17px; opacity: .9; }
.pingpong-controles .btn.activo { background: linear-gradient(180deg, #67e8f9, #0891b2); border-color: #a5f3fc; color: #04121c; transform: translateY(1px); box-shadow: 0 0 18px rgba(34,211,238,.4); }
.pingpong-tv.shake { animation: arcade-shake .4s ease; }
.pingpong-chip { gap: 6px; transition: border-color .2s ease, box-shadow .2s ease; }
.pingpong-chip .pp-color { width: 9px; height: 9px; border-radius: 50%; background: var(--pp-color, #22d3ee); box-shadow: 0 0 9px var(--pp-color, #22d3ee); flex: 0 0 auto; }
.pingpong-chip .pp-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(148,163,184,.55); flex: 0 0 auto; }
.pingpong-chip .pp-dot.on { background: #34d399; box-shadow: 0 0 7px rgba(52,211,153,.85); }
.pingpong-chip.peligro { border-color: rgba(248,113,113,.85) !important; box-shadow: 0 0 16px rgba(248,113,113,.18); }
.pingpong-chip .pp-alerta { font-size: 8.5px; font-weight: 900; letter-spacing: .04em; color: #fecaca; background: rgba(127,29,29,.85); border: 1px solid rgba(248,113,113,.7); border-radius: 999px; padding: 1px 6px; }
.pingpong-energia { display: inline-flex; gap: 3px; align-items: center; margin: 0 2px; }
.pingpong-energia i { width: 8px; height: 8px; border-radius: 50%; background: rgba(100,116,139,.35); box-shadow: inset 0 0 0 1px rgba(148,163,184,.35); transition: background .18s ease, box-shadow .18s ease, transform .18s ease; }
.pingpong-energia i.on { background: var(--pp-color, #22d3ee); box-shadow: 0 0 8px var(--pp-color, #22d3ee); }
.pingpong-live { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-left: 8px; }
.pingpong-live b, .pingpong-live span { font-size: 10.5px; line-height: 1.4; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(103,232,249,.22); background: rgba(2,6,23,.42); color: #bae6fd; font-weight: 800; white-space: nowrap; }
.pingpong-live #ppRally { color: #67e8f9; min-width: 58px; text-align: center; }
.pingpong-live #ppVel { color: #f0abfc; min-width: 76px; text-align: center; }
.pingpong-live #ppMatch { border-color: transparent; background: transparent; padding-inline: 0; }
.pingpong-live #ppMatch.peligro { color: #fecaca; border-color: rgba(248,113,113,.6); background: rgba(127,29,29,.4); padding-inline: 8px; animation: ppLatido 1.15s ease-in-out infinite; }
@keyframes ppLatido { 50% { box-shadow: 0 0 16px rgba(248,113,113,.45); } }
.pingpong-resumen { display: grid; gap: 6px; max-width: 540px; margin: 12px auto 0; text-align: left; }
.pingpong-res { display: flex; align-items: center; gap: 9px; border: 1px solid var(--borde); border-radius: 12px; padding: 9px 11px; background: rgba(2,6,23,.35); }
.pingpong-res.ganador { border-color: #ffd166; background: rgba(255,209,102,.08); }
.pingpong-res-color { width: 11px; height: 11px; border-radius: 50%; background: var(--pp-color, #22d3ee); box-shadow: 0 0 9px var(--pp-color, #22d3ee); flex: 0 0 auto; }
.pingpong-res b { flex: 1; font-size: 13.5px; }
.pingpong-res-energia { display: inline-flex; gap: 3px; align-items: center; }
.pingpong-res-energia i { width: 8px; height: 8px; border-radius: 50%; background: rgba(100,116,139,.35); }
.pingpong-res-energia i.on { background: var(--pp-color, #22d3ee); box-shadow: 0 0 7px var(--pp-color, #22d3ee); }
.pingpong-res small { color: var(--suave); font-size: 11px; white-space: nowrap; }
@media (max-width: 860px) {
  .pingpong-tv { height: auto; }
  #pingpongCanvas { width: auto; max-width: 100%; max-height: 64dvh; flex: 0 0 auto; }
  .pingpong-tv.vertical #pingpongCanvas { width: auto; max-width: 100%; max-height: 68dvh; }
}
@media (max-width: 640px) {
  #pingpongCanvas { border-radius: 12px; }
  .pingpong-controles { gap: 8px; }
  .pingpong-controles .btn { flex: 1; min-width: 0; min-height: 52px; }
  .pingpong-controles .btn.pp-centrar { flex: 0 0 58px; }
  .pingpong-tv .arcade-ayuda { font-size: 11px; }
  .pingpong-chip small { display: none; }
  .pingpong-live { margin-left: 0; margin-top: 4px; }
}
@media (max-width: 420px) {
  .pingpong-live b, .pingpong-live span { font-size: 9.5px; padding: 1px 6px; }
  .pingpong-controles .btn { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .pingpong-tv.shake { animation: none; }
  .pingpong-live #ppMatch.peligro { animation: none; }
  .pingpong-energia i { transition: none; }
}

/* ---------- Modo sala: una pantalla, sin scroll de página ---------- */
body.juego-body.sala-body {
  --alto-cab: 56px;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
body.juego-body.sala-body > .footer-institucional { display: none; }
body.juego-body.sala-body > .sala-cont {
  width: 100%;
  max-width: none;
  height: calc(100vh - var(--alto-cab, 56px));
  height: calc(100dvh - var(--alto-cab, 56px));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  overflow: hidden;
}
body.juego-body.sala-body .sala-cab { flex: none; padding: 8px 12px; margin-bottom: 0; }
body.juego-body.sala-body .sala-cab-top { gap: 4px 10px; }
body.juego-body.sala-body .sala-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
body.juego-body.sala-body .sala-tablero {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 10px;
  overflow: hidden;
}
body.juego-body.sala-body #tablero {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}
body.juego-body.sala-body #tablero > .tb-fit { width: 100%; min-height: 0; }
body.juego-body.sala-body .sala-grid > .sala-lado { display: none; }
body.juego-body.sala-body .menu-sala { display: inline-flex !important; }
body.juego-body.sala-body .cajon-sala {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  right: 0;
  left: auto;
  width: min(390px, 94vw);
  height: 100vh;
  height: 100dvh;
  z-index: 840;
  padding: calc(12px + env(safe-area-inset-top)) 12px calc(16px + env(safe-area-inset-bottom));
  background: #081a2f;
  color: #e2e8f0;
  border-left: 1px solid rgba(255, 255, 255, .12);
  box-shadow: -20px 0 44px rgba(0, 0, 0, .5);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(103%);
  visibility: hidden;
  transition: transform .26s cubic-bezier(.2, .9, .3, 1), visibility .26s;
}
body.juego-body.sala-body.cajon-sala-abierto .cajon-sala { transform: none; visibility: visible; }
body.juego-body.sala-body.cajon-sala-abierto { overflow: hidden; }
body.juego-body.sala-body .cajon-velo:not(.oculto) {
  display: block; position: fixed; inset: 0; z-index: 815; background: rgba(2, 8, 18, .55);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
body.juego-body.sala-body .cajon-sala .cajon-cab { position: static; background: transparent; }
body.juego-body.sala-body .cajon-sala .cajon-cab b { color: #fff; }
body.juego-body.sala-body .cajon-sala .cajon-x { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); color: #fff; }
body.juego-body.sala-body .cajon-sala .cajon-lista { display: flex; flex-direction: column; gap: 8px; }
body.juego-body.sala-body .cajon-sala .sala-lado { display: grid; gap: 10px; margin-top: 12px; }
body.juego-body.sala-body .cajon-sala .sala-chat { height: min(46dvh, 320px); }
body.juego-body.sala-body .cajon-sala .sala-juegos-lista { max-height: none; }
@media (max-width: 640px) {
  body.juego-body.sala-body { --alto-cab: 56px; }
}
@media (min-width: 641px) {
  body.juego-body.sala-body .cajon-sala { width: min(390px, 94vw); }
}

/* ---------- Sala en una pantalla (escritorio): solo scrollea la lista de juegos ---------- */
@media (min-width: 861px) and (min-height: 720px) {
  .sala-body { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
  .sala-body > .sala-cont { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .sala-body .sala-cab { flex: 0 0 auto; }
  .sala-body .sala-grid { flex: 1 1 auto; min-height: 0; align-items: stretch; }
  .sala-body .sala-tablero { min-height: 0; overflow: auto; }
  .sala-body .sala-lado {
    display: flex; flex-direction: column; gap: 12px;
    min-height: 0; overflow: hidden;
  }
  .sala-body .sala-lado > * { flex: 0 0 auto; }
  .sala-body .sala-chat { flex: 0 1 420px; min-height: 180px; height: auto; }
  .sala-body .sala-juegos { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .sala-body .sala-juegos-cab { flex: 0 0 auto; }
  .sala-body .sala-juegos-lista {
    flex: 1 1 auto; min-height: 0; max-height: none;
    overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; scrollbar-width: thin;
  }
}

/* ---------- Dino Runner ---------- */
.dino-tv { gap: 10px; }
#dinoCanvas {
  background: #070c18;
  cursor: pointer;
  box-shadow: 0 16px 34px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.06);
}
.dino-controles { gap: 12px; }
.dino-controles .btn { min-height: 54px; font-size: 17px; letter-spacing: .03em; touch-action: none; user-select: none; -webkit-user-select: none; }
.dino-controles .btn:active { transform: translateY(1px) scale(.99); }
@media (max-width: 640px) {
  .dino-controles { gap: 8px; }
  .dino-controles .btn { flex: 1; min-width: 0; font-size: 16px; }
}
/* Pantalla vertical (celular): el mundo de Dino Runner crece hacia arriba cuando
   la caja es más alta que ancha; eso solo agrega cielo y deja al dino chico.
   Se fija una caja cuadrada (el motor elige el mundo de 600 de ancho, el más
   "grande" de sprites) y el alto sobrante queda para HUD y botones. */
@media (max-aspect-ratio: 1/1) {
  #dinoCanvas { width: 100%; max-width: 62dvh; height: auto; aspect-ratio: 1 / 1; margin-inline: auto; }
  /* Snake: arena cuadrada (grilla 32×32). En vertical el panel lateral no entra
     y el motor lo omite; el lienzo se queda con el ancho y el alto sobrante va
     a la cruz de controles. */
  #snakeCanvas { width: 100%; max-width: 62dvh; height: auto; aspect-ratio: 1 / 1; margin-inline: auto; }
  .dino-tv { gap: 8px; }
  .dino-controles .btn { min-height: 58px; font-size: 18px; }
  .arcade-ayuda { font-size: 11.5px; line-height: 1.35; }
}
/* En la sala (una pantalla fija) el lienzo NO se estira: se centra y deja que
   los botones respiren. */
@media (max-aspect-ratio: 1/1) {
  body.juego-body.sala-body #tablero > .tb-fit:has(> .dino-tv) { height: 100%; }
  body.juego-body.sala-body #tablero > .tb-fit:has(> .dino-tv) > .dino-tv {
    height: 100%; min-height: 0; display: flex; flex-direction: column; justify-content: center;
  }
  body.juego-body.sala-body .tb-fit:has(> .dino-tv) > .dino-tv > .arcade-hud,
  body.juego-body.sala-body .tb-fit:has(> .dino-tv) > .dino-tv > .dino-controles,
  body.juego-body.sala-body .tb-fit:has(> .dino-tv) > .dino-tv > .arcade-ayuda { flex: 0 0 auto; }
  body.juego-body.sala-body .tb-fit:has(> .dino-tv) > .dino-tv > #dinoCanvas {
    flex: 0 0 auto; min-height: 0; height: auto;
  }
}
/* Vertical muy bajito (celular chico o con el teclado abierto). */
@media (max-aspect-ratio: 1/1) and (max-height: 680px) {
  #dinoCanvas { max-width: 52dvh; }
  .dino-controles .btn { min-height: 50px; font-size: 16px; }
  .arcade-ayuda { display: none; }
}

/* ---------- Salas multijugador: mismas tarjetas en cuadrícula que arriba ---------- */
.practica-grid-mesas { grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); align-items: stretch; }
.practica-grid-mesas .practica-mesa {
  cursor: default; padding: 13px; gap: 8px;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.practica-grid-mesas .practica-mesa:hover { transform: translateY(-2px); border-color: var(--oro); box-shadow: 0 10px 24px rgba(239, 120, 120, .14); }
.practica-grid-mesas .practica-mesa h3 { font-size: .95rem; }
.practica-grid-mesas .practica-mesa .practica-card-txt p {
  font-size: 12.5px;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.practica-grid-mesas .practica-mesa .practica-jugar { margin-top: auto; }
.practica-grid-mesas .practica-mesa .practica-card-txt { display: flex; flex-direction: column; }
.practica-grid-mesas .practica-mesa .practica-tag { margin-top: auto; padding-top: 4px; }

/* ---------- Penalito: la cancha se ajusta al alto disponible (sin scroll) ---------- */
.penal-tv { display: flex; flex-direction: column; gap: 8px; align-items: center; min-height: 0; height: 100%; }
.penal-tv > .penal-tv-fila,
.penal-tv > .penal-tv-marcas,
.penal-tv > .penal-prompt,
.penal-tv > .penal-ultima,
.penal-tv > .penal-tv-pie,
.penal-tv > .penal-controles { flex: 0 0 auto; }
.penal-tv > .penal-tv-fila { width: 100%; }
#penalCanvas {
  flex: 1 1 auto; min-height: 0;
  height: auto; width: auto;
  max-height: 100%; max-width: 100%;
  border-radius: 16px;
}
@media (max-width: 860px) {
  .penal-tv { height: auto; }
  #penalCanvas { width: 100%; height: auto; max-height: 62dvh; }
}
/* La cancha mantiene su proporción (antes el flex la estiraba en pantallas altas). */
.penal-cancha {
  flex: 1 1 auto; min-height: 0; width: 100%;
  display: flex; align-items: center; justify-content: center;
}
.penal-tv > .penal-cancha #penalCanvas {
  flex: 0 0 auto; min-height: 0; width: auto; height: auto;
  max-width: 100%; max-height: 100%;
}
/* El tablero recorta en vez de mostrar barra interna cuando el lienzo ya se ajusta */
@media (min-width: 861px) and (min-height: 720px) {
  .sala-body .sala-tablero { overflow: hidden; }
}

/* Cabecera de juegos por turnos: jugadores en chips compactos de una sola
   línea. El bloque es un grid de tres columnas (1fr · VS · 1fr), así los dos
   chips miden exactamente lo mismo y quedan espejados. */
.sala-cab-top > .sala-jugadores {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  width: max-content; max-width: 100%;
  flex: 0 1 auto; gap: 8px; align-items: center; margin: 0; min-width: 0;
}
.sala-cab-top > .sala-jugadores.solo-ahorcado { grid-template-columns: minmax(0, 1fr); }
.sala-cab-top > .sala-jugadores .sala-jugador {
  padding: 3px 11px; border-radius: 999px; background: rgba(255,255,255,.045);
  border: 1px solid var(--borde); min-width: 0; min-height: 26px;
}
.sala-cab-top > .sala-jugadores .sala-jugador > div {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: nowrap; min-width: 0; flex: 1 1 auto;
}
.sala-cab-top > .sala-jugadores .sala-jugador.rival > div { justify-content: flex-end; }
.sala-cab-top > .sala-jugadores .sala-jugador b {
  font-size: 12.5px; display: block; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sala-cab-top > .sala-jugadores .sala-jugador small { font-size: 11.5px; display: inline-flex; align-items: baseline; gap: 3px; flex: none; }
.sala-cab-top > .sala-jugadores .sala-vs { font-size: 10px; margin: 0; flex: none; }
.sala-cab-top > .sala-jugadores .punto-estado { width: 7px; height: 7px; margin-right: 2px; }
.sala-cab-top > .sala-jugadores .sala-pts { font-size: 12.5px; }
.sala-cab-top > .sala-jugadores .sala-unidad { font-size: 11px; opacity: .8; }
@media (max-width: 700px) {
  .sala-cab-top > .sala-jugadores .sala-conexion { display: none; }
}


.galaxia-controles { display: flex; gap: 8px; width: 100%; justify-content: center; }
.galaxia-controles .btn { min-width: 64px; min-height: 50px; font-size: 18px; touch-action: none; user-select: none; }

/* ---------- Cabecera de partida: una sola fila baja, alineada y simétrica ---------- */
#salaCab { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 4px 11px; }
#salaCab > .sala-cab-top { display: contents; }
/* El título y el bloque de la derecha se reparten el mismo ancho sobrante, así
   el marcador de jugadores queda clavado en el centro exacto de la barra. El
   mínimo evita que un nombre larguísimo aplaste el título del juego. */
#salaCab .sala-cab-top:has(> .sala-cab-der) > .sala-juego,
#salaCab .sala-cab-top:has(> .sala-cab-der) > .sala-cab-der { flex: 1 1 0; min-width: 132px; }
/* Tope del marcador: con nombres eternos los chips se recortan con puntos
   suspensivos en vez de empujar el título a una segunda línea. */
#salaCab .sala-cab-top:has(> .sala-cab-der) > .sala-jugadores { max-width: 66%; }
#salaCab > .sala-cab-top > .sala-estado { display: none; }
#salaCab > .arcade-cab-jugadores { margin: 0; flex: 1 1 auto; justify-content: center; }
#salaCab > .sala-turno { margin: 0 0 0 auto; font-size: 12.5px; white-space: nowrap; }
#salaCab > .aviso { margin: 0; flex-basis: 100%; }
@media (max-width: 700px) {
  #salaCab > .sala-turno { margin-left: 0; flex-basis: 100%; white-space: normal; }
}

/* ---------- Cabecera compacta de mesas de 2 a 4 jugadores ---------- */
/* Billar, Mini Golf y Bolos: alto justo para los datos, con los cuatro
   jugadores en chips del mismo ancho y el turno siempre alineado a la derecha.
   En el celular la barra queda en dos filas parejas: juego · apuesta/turno y,
   debajo, el marcador completo a lo ancho. Usa .mesa4-der (y no .sala-cab-der)
   para que la cabecera genérica de dos filas no aplaste el marcador de cuatro. */
.arcade-cab-color {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  background: var(--color-bola, #94a3b8);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .32);
}
.arcade-cab-emoji { font-size: 11px; line-height: 1; }
.arcade-cab-chip.turno { border-color: #ffd166; background: rgba(255, 209, 102, .13); }
.arcade-cab-chip small .unidad { font-style: normal; }
#salaCab.cab-mesa4 { padding: 4px 10px; gap: 3px 8px; }
#salaCab.cab-mesa4 .sala-cab-top > .sala-juego {
  flex: 0 1 auto; min-width: 0; justify-self: start;
  font-size: 13px; line-height: 22px;
}
#salaCab.cab-mesa4 .sala-cab-top > .sala-juego > span:first-child { width: 19px; height: 19px; font-size: 15px; margin-right: 6px; }
#salaCab.cab-mesa4 .sala-cab-top > .sala-juego span { font-size: 15px; }
#salaCab.cab-mesa4 .sala-cab-top > .sala-juego b { font-size: 12.5px; }
#salaCab.cab-mesa4 .sala-cab-top > .arcade-cab-jugadores {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: 4px; flex: 1 1 0; min-width: 0; max-width: 560px; margin: 0 auto;
}
#salaCab.cab-mesa4 .arcade-cab-chip {
  justify-content: center; gap: 4px; padding: 2px 7px; min-width: 0;
  font-size: 10.5px; line-height: 1.2; overflow: hidden;
}
#salaCab.cab-mesa4 .arcade-cab-chip b {
  font-size: 11.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#salaCab.cab-mesa4 .arcade-cab-chip small { font-size: 10px; white-space: nowrap; opacity: .85; }
#salaCab.cab-mesa4 .sala-cab-top > .mesa4-der {
  display: inline-flex; align-items: center; gap: 5px;
  flex: 0 0 auto; min-width: 0; margin-left: auto;
}
#salaCab.cab-mesa4 .sala-apuesta { padding: 2px 8px; font-size: 11px; line-height: 1.3; }
#salaCab.cab-mesa4 .sala-turno {
  display: inline-flex; align-items: baseline; gap: 4px; margin: 0;
  font-size: 11px; line-height: 1.3; white-space: nowrap;
}
#salaCab.cab-mesa4 .sala-turno .mesa4-turno-txt {
  min-width: 0; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#salaCab.cab-mesa4 .sala-turno .sala-tiempo { margin-left: 0; flex: none; }
@media (max-width: 640px) {
  #salaCab.cab-mesa4 {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "marca der" "jugadores jugadores";
    align-items: center; column-gap: 8px; row-gap: 3px; padding: 4px 8px;
  }
  #salaCab.cab-mesa4 .sala-cab-top > .sala-juego { grid-area: marca; justify-self: stretch; }
  #salaCab.cab-mesa4 .sala-cab-top > .mesa4-der { grid-area: der; margin-left: 0; }
  #salaCab.cab-mesa4 .sala-cab-top > .arcade-cab-jugadores { grid-area: jugadores; max-width: none; margin: 0; }
  #salaCab.cab-mesa4 .arcade-cab-chip { padding: 2px 6px; }
}
@media (max-width: 420px) {
  #salaCab.cab-mesa4 .arcade-cab-chip small .unidad { display: none; }
  #salaCab.cab-mesa4 .arcade-cab-chip b { font-size: 11px; }
}

/* ---------- Duelo arcade (Dino Runner): una sola fila baja y simétrica ---------- */
/* Nombre · marcador · apuesta. Las dos columnas laterales miden lo mismo, así el
   marcador queda clavado en el centro exacto; el alto es el de un chip. */
#salaCab.cab-duelo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
  padding: 4px 10px;
}
#salaCab.cab-duelo > .sala-cab-top { display: contents; }
/* Hay que ganarle al mínimo de 132 px de la cabecera general. */
#salaCab.cab-duelo .sala-cab-top:has(> .sala-cab-der) > .sala-juego,
#salaCab.cab-duelo .sala-cab-top:has(> .sala-cab-der) > .sala-cab-der { min-width: 0; }
#salaCab.cab-duelo .sala-juego { min-width: 0; font-size: 13px; line-height: 20px; }
#salaCab.cab-duelo .sala-juego > span:first-child {
  width: 20px; height: 20px; font-size: 15px; margin-right: 5px;
}
#salaCab.cab-duelo .arcade-cab-jugadores {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  grid-column: 2;
  gap: 5px; margin: 0; min-width: 0; justify-self: center;
  max-width: min(300px, 52vw);
}
#salaCab.cab-duelo .arcade-cab-chip {
  justify-content: center; gap: 4px; padding: 2px 8px; min-width: 0;
  font-size: 11px; line-height: 1.3; overflow: hidden;
}
#salaCab.cab-duelo .arcade-cab-chip b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#salaCab.cab-duelo .arcade-cab-chip small { font-size: 10.5px; white-space: nowrap; opacity: .85; }
#salaCab.cab-duelo .sala-cab-der { min-width: 0; gap: 5px; flex-wrap: nowrap; justify-content: flex-end; }
#salaCab.cab-duelo .sala-apuesta {
  display: inline-block; padding: 2px 8px; font-size: 11px; line-height: 1.3;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#salaCab.cab-duelo .sala-turno {
  margin: 0; font-size: 11px; line-height: 1.3; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
@media (max-width: 620px) {
  /* En el celular no entran los tres textos largos: se cae el emoji del chip
     (ya está en el título), los metros (el HUD del lienzo los muestra en
     grande) y el estado del turno. El título pierde su icono para que el
     nombre completo entre en su columna. */
  #salaCab.cab-duelo { column-gap: 5px; padding: 3px 8px; }
  #salaCab.cab-duelo .arcade-cab-emoji,
  #salaCab.cab-duelo .arcade-cab-chip small,
  #salaCab.cab-duelo .sala-juego > span:first-child,
  #salaCab.cab-duelo .sala-turno { display: none; }
  #salaCab.cab-duelo .sala-juego { font-size: 12px; }
  #salaCab.cab-duelo .arcade-cab-jugadores { max-width: min(230px, 52vw); }
}

/* ---------- Tetra Blox: barra baja, simétrica y alineada ---------- */
/* Título · marcador · apuesta en un solo renglón del alto de un chip. Las dos
   columnas laterales miden lo mismo (1fr · auto · 1fr), así el marcador queda
   clavado en el centro exacto y los dos chips tienen el mismo ancho. El texto
   de turno es una ayuda: se cae en pantallas chicas (la ayuda bajo el tablero
   ya explica cómo jugar). */
#salaCab.cab-tetra {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
  padding: 3px 10px;
}
#salaCab.cab-tetra > .sala-cab-top { display: contents; }
#salaCab.cab-tetra .sala-cab-top:has(> .sala-cab-der) > .sala-juego,
#salaCab.cab-tetra .sala-cab-top:has(> .sala-cab-der) > .sala-cab-der { min-width: 0; }
#salaCab.cab-tetra .sala-juego { min-width: 0; font-size: 13px; line-height: 20px; }
#salaCab.cab-tetra .sala-juego > span:first-child { width: 20px; height: 20px; font-size: 15px; margin-right: 5px; }
#salaCab.cab-tetra .arcade-cab-jugadores {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  grid-column: 2; gap: 5px; margin: 0; min-width: 0; justify-self: center;
  max-width: min(320px, 58vw);
}
#salaCab.cab-tetra .arcade-cab-chip {
  justify-content: center; gap: 4px; padding: 2px 8px; min-width: 0;
  font-size: 11px; line-height: 1.3; overflow: hidden;
}
#salaCab.cab-tetra .arcade-cab-chip b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#salaCab.cab-tetra .arcade-cab-chip small { font-size: 10.5px; white-space: nowrap; opacity: .85; font-variant-numeric: tabular-nums; }
#salaCab.cab-tetra .sala-cab-der { min-width: 0; gap: 5px; flex-wrap: nowrap; justify-content: flex-end; }
#salaCab.cab-tetra .sala-apuesta {
  padding: 2px 8px; font-size: 11px; line-height: 1.3;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#salaCab.cab-tetra .sala-turno {
  margin: 0; font-size: 11px; line-height: 1.3; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
@media (max-width: 860px) {
  #salaCab.cab-tetra .sala-turno { display: none; }
}
@media (max-width: 620px) {
  /* Celular: dos renglones parejos — título · apuesta y, debajo, el marcador a
     todo el ancho con los dos chips iguales. */
  #salaCab.cab-tetra {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "marca der" "jugadores jugadores";
    column-gap: 8px; row-gap: 3px; padding: 3px 8px;
  }
  #salaCab.cab-tetra .sala-juego { grid-area: marca; }
  #salaCab.cab-tetra .sala-cab-der { grid-area: der; }
  #salaCab.cab-tetra .arcade-cab-jugadores { grid-area: jugadores; max-width: none; width: 100%; }
  #salaCab.cab-tetra .arcade-cab-chip { padding: 2px 6px; }
  #salaCab.cab-tetra .arcade-cab-chip b { font-size: 11px; }
}

/* =====================================================================
   CARTAS UNO ARCADE
   ===================================================================== */
.uno-tv {
  width: 100%;
  max-width: 1080px;
  height: 100%;
  min-height: 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.uno-mesa {
  position: relative;
  isolation: isolate;
  flex: 1 1 auto;
  min-height: 500px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  gap: 6px;
  padding: 10px 12px 8px;
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 72% 58% at 50% 46%, rgba(59,130,246,.15), transparent 68%),
    radial-gradient(ellipse 58% 48% at 50% 100%, rgba(239, 120, 120, .08), transparent 70%),
    linear-gradient(180deg, #0d2038 0%, #0a1728 54%, #060d17 100%);
  border: 1px solid rgba(148,163,184,.23);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 44px rgba(0,0,0,.38);
}
.uno-mesa::before {
  content: '';
  position: absolute;
  inset: 9% 7% 16%;
  border-radius: 50%;
  border: 1px solid rgba(148,163,184,.12);
  background: radial-gradient(ellipse, rgba(30,58,95,.42), rgba(6,13,23,.18) 67%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.uno-anillo {
  position: absolute;
  left: 50%;
  top: 47%;
  width: min(560px, 70%);
  height: min(210px, 30%);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 8px solid var(--uc, #3b82f6);
  opacity: .38;
  filter: blur(.4px);
  box-shadow:
    0 0 24px color-mix(in srgb, var(--uc, #3b82f6) 66%, transparent),
    inset 0 0 28px color-mix(in srgb, var(--uc, #3b82f6) 42%, transparent);
  animation: unoAnillo 3.4s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes unoAnillo {
  0%, 100% { opacity: .27; transform: translate(-50%, -50%) scale(.98); }
  50% { opacity: .5; transform: translate(-50%, -50%) scale(1.02); }
}
.uno-sentido {
  position: absolute;
  right: 14px;
  top: 12px;
  display: grid;
  place-items: center;
  gap: 1px;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(8,23,40,.78);
  border: 1px solid rgba(148,163,184,.24);
  box-shadow: 0 0 18px color-mix(in srgb, var(--uc, #3b82f6) 30%, transparent);
  color: #dbeafe;
  z-index: 5;
  pointer-events: none;
}
.uno-sentido span { font-size: 24px; line-height: 1; color: var(--uc, #3b82f6); }
.uno-sentido small { font-size: 7.5px; letter-spacing: .1em; opacity: .7; }
.uno-mesa.al-reves .uno-sentido span { transform: scaleX(-1); }
.uno-rivales {
  display: grid;
  gap: 7px;
  align-items: start;
  justify-items: stretch;
  width: 100%;
  max-width: 940px;
  min-width: 0;
  margin: 0 auto;
  z-index: 3;
}
.uno-centro, .uno-yo, .uno-aviso, .uno-mano, .uno-pie {
  min-width: 0;
  max-width: 100%;
}
.uno-mano { width: 100%; }
.uno-rivales.n-2 { grid-template-columns: minmax(0, 330px); justify-content: center; }
.uno-rivales.n-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.uno-rivales.n-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.uno-rival {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid rgba(148,163,184,.22);
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(19,42,68,.92), rgba(8,20,34,.9));
  box-shadow: 0 8px 18px rgba(0,0,0,.24);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.uno-rival.turno {
  border-color: var(--uc, #60a5fa);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--uc, #60a5fa) 40%, transparent), 0 0 22px color-mix(in srgb, var(--uc, #60a5fa) 28%, transparent);
}
.uno-rival-avatar {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex: none;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  background: radial-gradient(circle at 35% 25%, color-mix(in srgb, var(--uc, #3b82f6) 60%, #fff), var(--uc, #3b82f6) 62%, #0f172a 130%);
  border: 2px solid rgba(255,255,255,.3);
  box-shadow: 0 4px 10px rgba(0,0,0,.35);
}
.uno-rival-txt { min-width: 0; display: grid; gap: 1px; }
.uno-rival-txt b { color: #e2e8f0; font-size: 12.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uno-rival-txt small { color: #94a3b8; font-size: 10.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uno-rival-txt small b, .uno-canto { color: #fbbf24; }
.uno-rival-dorso { justify-self: end; }
.uno-dorsos { display: inline-flex; align-items: center; }
.uno-dorso {
  display: block;
  width: 20px;
  height: 28px;
  margin-left: -11px;
  border-radius: 4px;
  border: 1px solid rgba(226,232,240,.55);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.14) 0 3px, transparent 3px 7px),
    linear-gradient(145deg, #1e40af, #0f172a 72%);
  box-shadow: 0 2px 4px rgba(0,0,0,.4);
  transform: rotate(calc((var(--i) - 1) * 4deg));
}
.uno-dorso:first-child { margin-left: 0; }
.uno-dorsos.mini .uno-dorso { width: 15px; height: 21px; margin-left: -8px; }
.uno-dorsos.mini .uno-dorso:first-child { margin-left: 0; }
.uno-dorso-vacio { color: #64748b; font-size: 16px; }
.uno-turno-luz {
  position: absolute;
  inset: -1px;
  border-radius: 13px;
  pointer-events: none;
  border: 1px solid transparent;
  box-shadow: inset 0 0 16px color-mix(in srgb, var(--uc, #60a5fa) 26%, transparent);
  animation: unoTurnoLuz 1.8s ease-in-out infinite;
}
@keyframes unoTurnoLuz { 0%,100% { opacity: .25; } 50% { opacity: .8; } }
.uno-atrapar {
  grid-column: 1 / -1;
  justify-self: start;
  border: 1px solid #fca5a5;
  border-radius: 999px;
  background: linear-gradient(180deg, #ef4444, #b91c1c);
  color: #fff;
  font: inherit;
  font-size: 10.5px;
  font-weight: 900;
  padding: 3px 9px;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(239,68,68,.4);
}
.uno-atrapar:hover { transform: translateY(-1px); }
.uno-rival.castigo { animation: unoCastigo .48s ease-in-out 2; border-color: #f87171; }
.uno-rival.grito .uno-rival-avatar { animation: unoGritoAvatar .8s ease-out; }
@keyframes unoCastigo {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px) rotate(-1deg); }
  75% { transform: translateX(4px) rotate(1deg); }
}
@keyframes unoGritoAvatar {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(250,204,21,.7); }
  50% { transform: scale(1.2); box-shadow: 0 0 0 14px rgba(250,204,21,0); }
  100% { transform: scale(1); }
}
.uno-centro {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(66px, auto) minmax(90px, 1fr) minmax(92px, auto);
  align-items: center;
  justify-items: center;
  gap: 10px;
  min-height: 0;
  padding: 2px 8px;
}
.uno-mazo {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 5px;
  width: 78px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #cbd5e1;
  cursor: default;
  opacity: .58;
}
.uno-mazo.activo { cursor: pointer; opacity: 1; }
.uno-mazo.activo .uno-mazo-stack { animation: unoMazoListo 1.9s ease-in-out infinite; }
.uno-mazo-stack { position: relative; display: block; width: 62px; height: 88px; }
.uno-mazo-stack i {
  position: absolute;
  inset: 0;
  border-radius: 9px;
  border: 2px solid rgba(226,232,240,.58);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.14) 0 4px, transparent 4px 9px),
    linear-gradient(145deg, #1d4ed8, #0f172a 75%);
  box-shadow: 0 5px 12px rgba(0,0,0,.38);
  transform: translate(calc(var(--i) * 2px), calc(var(--i) * -2px)) rotate(calc(var(--i) * 2deg));
  display: grid;
  place-items: center;
}
.uno-mazo-stack i b { font-size: 25px; font-weight: 900; color: #f8fafc; text-shadow: 0 2px 4px rgba(0,0,0,.5); }
.uno-mazo small { font-size: 10px; white-space: nowrap; }
.uno-mazo.activo:hover .uno-mazo-stack { transform: translateY(-3px); }
@keyframes unoMazoListo {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(96,165,250,0)); }
  50% { filter: drop-shadow(0 0 10px rgba(96,165,250,.65)); }
}
.uno-descarte-pila { position: relative; width: 94px; height: 128px; flex: none; }
.uno-descarte-pila .uno-carta { width: 92px; height: 128px; border-radius: 10px; }
.uno-descarte-atras {
  position: absolute;
  inset: 0;
  display: block;
  transform: rotate(calc((var(--i) - 1) * 5deg));
  opacity: .72;
}
.uno-descarte-activa { position: absolute; inset: 0; transform: rotate(-3deg); filter: drop-shadow(0 12px 12px rgba(0,0,0,.42)); }
.uno-descarte-activa.cae { animation: unoCae .58s cubic-bezier(.18,.8,.28,1) both; }
@keyframes unoCae {
  0% { transform: translate(30px, -100px) rotate(32deg) scale(.86); opacity: .25; }
  70% { transform: translate(-4px, 5px) rotate(-7deg) scale(1.03); opacity: 1; }
  100% { transform: rotate(-3deg) scale(1); }
}
.uno-descarte-activa .uno-carta { cursor: default; }
.uno-color-indicador {
  display: grid;
  justify-items: center;
  gap: 1px;
  min-width: 88px;
  padding: 7px 8px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.2);
  background: rgba(8,23,40,.6);
  text-align: center;
}
.uno-color-bola {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fff9, transparent 38%), var(--uc, #3b82f6);
  box-shadow: 0 0 14px color-mix(in srgb, var(--uc, #3b82f6) 70%, transparent);
  border: 2px solid rgba(255,255,255,.55);
}
.uno-color-indicador b { font-size: 11.5px; color: #e2e8f0; }
.uno-color-indicador small { font-size: 8.5px; color: #94a3b8; text-transform: uppercase; letter-spacing: .08em; }
.uno-yo {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 8px;
  border-radius: 11px;
}
.uno-yo.turno { background: linear-gradient(90deg, transparent, rgba(96,165,250,.1), transparent); }
.uno-yo.castigo { animation: unoCastigo .48s ease-in-out 2; }
.uno-yo-datos { display: flex; align-items: center; gap: 7px; min-width: 0; }
.uno-yo-datos b { display: block; font-size: 12.5px; color: #e2e8f0; }
.uno-yo-datos small { display: block; font-size: 10.5px; color: #94a3b8; }
.uno-acciones { display: flex; align-items: center; gap: 7px; }
.uno-acciones .btn { padding: 6px 12px; font-size: 11.5px; }
.uno-btn-uno {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.44);
  background: radial-gradient(circle at 35% 25%, #fef08a, #f59e0b 48%, #b91c1c 105%);
  color: #3b0a03;
  font: inherit;
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: -.04em;
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(0,0,0,.35);
  transition: transform .15s, filter .15s, opacity .15s;
}
.uno-btn-uno:disabled { opacity: .42; cursor: default; filter: grayscale(.45); }
.uno-btn-uno.cerca { opacity: .8; filter: saturate(1.2); }
.uno-btn-uno.listo { animation: unoBotonGrito 1s ease-in-out infinite; }
.uno-btn-uno.listo:hover { transform: scale(1.06); }
@keyframes unoBotonGrito {
  0%, 100% { box-shadow: 0 0 0 0 rgba(250,204,21,.55), 0 5px 14px rgba(0,0,0,.35); }
  50% { box-shadow: 0 0 0 11px rgba(250,204,21,0), 0 5px 18px rgba(0,0,0,.45); }
}
.uno-aviso {
  min-height: 17px;
  padding: 0 10px;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.35;
  color: #94a3b8;
  z-index: 2;
}
.uno-aviso.alerta { color: #fde68a; font-weight: 800; animation: unoAviso .9s ease-in-out infinite; }
@keyframes unoAviso { 0%,100% { opacity: .7; } 50% { opacity: 1; } }
.uno-mano {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  min-height: 104px;
  padding: 3px 10px 0;
  overflow: visible;
  z-index: 3;
}
.uno-mano .uno-carta { margin-left: calc(-1 * clamp(16px, 3.2vw, 34px)); }
.uno-mano .uno-carta:first-child { margin-left: 0; }
.uno-mano .uno-carta:hover:not(:disabled) { z-index: 10; }
.uno-pie {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 0 10px;
  color: #64748b;
  font-size: 9px;
  z-index: 2;
}
.uno-carta {
  position: relative;
  display: block;
  flex: none;
  width: clamp(54px, 6.1vw, 78px);
  aspect-ratio: 5 / 7;
  padding: 0;
  border: 3px solid var(--uc, #64748b);
  border-radius: 9px;
  background: #f8fafc;
  color: var(--uc, #334155);
  font: inherit;
  cursor: default;
  box-shadow: 0 6px 12px rgba(0,0,0,.32);
  transform: translateY(calc(var(--i) * -.4px)) rotate(calc((var(--i) - (var(--n) - 1) / 2) * 3.2deg));
  transform-origin: 50% 90%;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.uno-carta.legal { cursor: pointer; }
.uno-carta.legal:hover, .uno-carta.legal:focus-visible {
  transform: translateY(-15px) rotate(0deg) scale(1.06);
  box-shadow: 0 14px 22px rgba(0,0,0,.42), 0 0 0 2px rgba(250,204,21,.85);
  outline: none;
  z-index: 9;
}
.uno-carta.ilegal { filter: saturate(.55) brightness(.76); opacity: .82; }
.uno-carta:disabled { cursor: default; }
.uno-c-negro { background: #f8fafc; border-color: #0f172a; color: #0f172a; }
.uno-carta-quad {
  position: absolute;
  inset: 5px;
  border-radius: 6px;
  background: conic-gradient(#ef4444 0 25%, #3b82f6 0 50%, #22c55e 0 75%, #facc15 0);
  opacity: .95;
}
.uno-carta-oval {
  position: absolute;
  left: 9%;
  right: 9%;
  top: 17%;
  bottom: 17%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0;
  border-radius: 50%;
  border: 2px solid currentColor;
  background: rgba(248,250,252,.94);
  transform: rotate(-19deg);
  overflow: hidden;
  box-shadow: inset 0 0 8px rgba(0,0,0,.08);
}
.uno-carta-oval b {
  font-family: 'Arial Black', 'Segoe UI', system-ui, sans-serif;
  font-size: clamp(19px, 2.8vw, 29px);
  line-height: .95;
  letter-spacing: -.07em;
  color: var(--uc, #334155);
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.uno-c-negro .uno-carta-oval { background: rgba(248,250,252,.92); color: #0f172a; border-color: #0f172a; }
.uno-c-negro .uno-carta-oval b { color: #0f172a; font-size: clamp(16px, 2.2vw, 23px); }
.uno-carta-oval small { font-size: 6px; font-weight: 900; letter-spacing: .12em; color: #0f172a; }
.uno-carta-esq {
  position: absolute;
  font-size: clamp(8px, .9vw, 11px);
  font-weight: 900;
  line-height: 1;
  color: currentColor;
}
.uno-carta-esq.tl { left: 5px; top: 5px; }
.uno-carta-esq.br { right: 5px; bottom: 5px; transform: rotate(180deg); }
.uno-c-negro .uno-carta-esq { color: #f8fafc; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.uno-carta-brillo {
  position: absolute;
  inset: 3px;
  border-radius: 5px;
  background: linear-gradient(128deg, rgba(255,255,255,.38), transparent 38%);
  pointer-events: none;
}
.uno-descarte-activa .uno-carta, .uno-descarte-atras .uno-carta { width: 100%; height: 100%; }
.uno-anim-robo .uno-mazo-stack { animation: unoRobo .42s ease-out; }
@keyframes unoRobo { 0% { transform: translate(0,0) scale(1); } 35% { transform: translate(18px,-26px) rotate(12deg) scale(1.06); } 100% { transform: none; } }
@keyframes unoCastigoCae { 0% { transform: translateY(-26px) scale(.6); opacity: 0; } 35% { opacity: 1; } 100% { transform: translateY(8px) scale(1.2); opacity: 0; } }
.uno-cab-jugadores { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.uno-cab-chip {
  display: inline-flex; align-items: baseline; gap: 5px; max-width: 210px;
  padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(148,163,184,.25);
  background: rgba(30,58,95,.24); color: #cbd5e1; font-size: 11px;
}
.uno-cab-chip b { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uno-cab-chip small { color: #94a3b8; font-size: 10px; white-space: nowrap; }
.uno-cab-chip.yo { border-color: var(--oro); background: rgba(239, 120, 120, .15); }
.uno-cab-chip.turno { box-shadow: 0 0 0 1px rgba(96,165,250,.5); }
.uno-ranking { display: grid; gap: 5px; margin: 8px 0; }
.uno-ranking-fila { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 9px; background: var(--fondo); }
.uno-ranking-fila.mia { outline: 1px solid var(--oro); }
.uno-ranking-fila.ganador { background: rgba(250,204,21,.12); }
.uno-ranking-fila b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uno-ranking-fila span:last-child { color: var(--suave); font-size: 12px; }
.uno-color-overlay {
  position: fixed; inset: 0; z-index: 9998; display: grid; place-items: center; padding: 18px;
  background: rgba(2,8,18,.72); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  animation: unoModalIn .18s ease-out;
}
@keyframes unoModalIn { from { opacity: 0; } to { opacity: 1; } }
.uno-color-caja {
  width: min(360px, 94vw); display: grid; gap: 9px; text-align: center;
  padding: 18px 16px 14px; border-radius: 20px; border: 1px solid rgba(148,163,184,.3);
  background: linear-gradient(160deg, #162b47, #091525 70%);
  box-shadow: 0 24px 70px rgba(0,0,0,.6);
}
.uno-color-caja > b { color: #f8fafc; font-size: 19px; }
.uno-color-caja p { margin: 0; font-size: 12.5px; }
.uno-color-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 5px 0 2px; }
.uno-color-btn {
  min-height: 56px; border-radius: 13px; border: 3px solid color-mix(in srgb, var(--uc) 70%, #fff);
  background: radial-gradient(circle at 35% 22%, color-mix(in srgb, var(--uc) 64%, #fff), var(--uc) 62%, #0f172a 145%);
  color: #fff; font: inherit; font-weight: 900; font-size: 13px; cursor: pointer;
  box-shadow: 0 8px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.3);
}
.uno-color-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
@media (max-width: 860px) {
  .uno-mesa { min-height: 460px; padding: 7px 7px 6px; border-radius: 16px; }
  .uno-rivales.n-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .uno-rival { padding: 4px 5px; gap: 4px; border-radius: 10px; }
  .uno-rival-avatar { width: 26px; height: 26px; font-size: 11px; }
  .uno-rival-txt b { font-size: 10.5px; }
  .uno-rival-txt small { font-size: 9px; }
  .uno-rival-dorso { display: none; }
  .uno-sentido { width: 48px; height: 48px; right: 7px; top: 6px; }
  .uno-sentido span { font-size: 20px; }
  .uno-sentido small { font-size: 6px; }
  .uno-centro { gap: 6px; padding: 0 2px; grid-template-columns: minmax(48px, auto) minmax(70px, 1fr) minmax(70px, auto); }
  .uno-mazo { width: 55px; }
  .uno-mazo-stack { width: 46px; height: 66px; }
  .uno-mazo-stack i b { font-size: 20px; }
  .uno-descarte-pila { width: 66px; height: 92px; }
  .uno-descarte-pila .uno-carta { width: 64px; height: 92px; }
  .uno-color-indicador { min-width: 64px; padding: 4px 5px; }
  .uno-color-indicador small { display: none; }
  .uno-color-bola { width: 21px; height: 21px; }
  .uno-color-indicador b { font-size: 10px; }
  .uno-mano { min-height: 82px; }
  .uno-pie { display: none; }
  .uno-aviso { font-size: 10px; }
  .uno-btn-uno { width: 48px; height: 48px; font-size: 11px; }
  .uno-acciones .btn { padding: 5px 8px; font-size: 10px; }
}
@media (max-width: 520px) {
  .uno-mesa { min-height: 430px; }
  .uno-rivales.n-3, .uno-rivales.n-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uno-rival-dorso { display: none; }
  .uno-centro { grid-template-columns: minmax(40px, auto) 1fr minmax(58px, auto); }
  .uno-color-indicador b { font-size: 9px; }
  .uno-aviso { min-height: 14px; }
  .uno-yo-datos b { font-size: 11px; }
  .uno-yo-datos small { font-size: 9.5px; }
  .uno-mano .uno-carta { margin-left: calc(-1 * clamp(13px, 4vw, 26px)); }
}
@media (prefers-reduced-motion: reduce) {
  .uno-anillo, .uno-btn-uno.listo, .uno-mazo.activo .uno-mazo-stack, .uno-aviso.alerta,
  .uno-turno-luz, .uno-descarte-activa.cae, .uno-rival.castigo, .uno-yo.castigo,
  .uno-rival.grito .uno-rival-avatar { animation: none !important; }
}

/* ---------- Plantas vs Zombis 1v1 ---------- */
.pvz-tv { display: grid; gap: 7px; width: 100%; max-width: 1040px; margin: 0 auto; }
.pvz-hud { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; }
.pvz-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 5px 10px;
  border-radius: 12px; border: 1px solid rgba(148, 163, 184, .26);
  background: linear-gradient(180deg, rgba(18, 40, 26, .82), rgba(5, 18, 10, .82));
  color: #ecfdf5; font-size: 12px; font-weight: 800; letter-spacing: .2px; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 4px 12px rgba(0, 0, 0, .18);
}
.pvz-chip .pvz-ico { font-size: 15px; line-height: 1; font-style: normal; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }
.pvz-chip b { font-size: 14px; line-height: 1; font-variant-numeric: tabular-nums; }
.pvz-chip small { font-size: 9px; line-height: 1; font-weight: 700; opacity: .78; letter-spacing: .15px; }
.pvz-chip.pvz-rol { gap: 5px; }
.pvz-chip.pvz-rol b { font-size: 12px; }
.pvz-chip.pvz-rol small { font-size: 8.5px; text-transform: uppercase; opacity: .65; }
.pvz-chip.pvz-rol.plantas { border-color: rgba(74, 222, 128, .45); background: linear-gradient(180deg, rgba(22, 101, 52, .8), rgba(5, 30, 14, .9)); }
.pvz-chip.pvz-rol.zombis { border-color: rgba(240, 171, 252, .45); background: linear-gradient(180deg, rgba(88, 28, 135, .8), rgba(25, 8, 38, .92)); }
.pvz-chip.recurso { background: linear-gradient(180deg, rgba(26, 90, 45, .72), rgba(6, 28, 15, .9)); border-color: rgba(134, 239, 172, .34); }
.pvz-chip.recurso.cerebro { background: linear-gradient(180deg, rgba(88, 28, 135, .72), rgba(25, 8, 38, .92)); border-color: rgba(216, 180, 254, .35); }
.pvz-chip.recurso small { color: #bbf7d0; }
.pvz-chip.cerebro small { color: #f5d0fe; }
.pvz-chip.reloj { background: linear-gradient(180deg, rgba(30, 41, 59, .82), rgba(8, 14, 24, .92)); border-color: rgba(148, 163, 184, .34); font-variant-numeric: tabular-nums; }
.pvz-chip.reloj b { font-size: 15px; letter-spacing: .4px; }
.pvz-chip.reloj small { color: #fde68a; }
.pvz-chip.cortadoras { gap: 6px; }
.pvz-cortes { display: inline-flex; gap: 3px; align-items: center; }
.pvz-corte { display: inline-block; width: 9px; height: 9px; border-radius: 3px; background: #334155; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.pvz-corte.on { background: #4ade80; box-shadow: 0 0 7px rgba(74, 222, 128, .65), inset 0 0 0 1px rgba(255, 255, 255, .25); }
.pvz-corte.off { background: #7f1d1d; }
.pvz-chip.cripta { margin-left: auto; gap: 7px; background: linear-gradient(180deg, rgba(76, 29, 149, .82), rgba(18, 6, 32, .94)); border-color: rgba(196, 181, 253, .35); }
.pvz-cripta-barra { display: inline-block; width: 80px; height: 8px; border-radius: 5px; background: rgba(2, 6, 23, .7); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.pvz-cripta-barra i { display: block; height: 100%; width: 100%; border-radius: 5px; background: linear-gradient(90deg, #a78bfa, #f0abfc); transition: width .2s linear; }
.pvz-progreso { position: relative; height: 9px; border-radius: 99px; overflow: hidden; background: rgba(2, 10, 6, .72); border: 1px solid rgba(148, 163, 184, .2); }
.pvz-progreso > i { display: block; height: 100%; width: var(--avance, 0%); background: linear-gradient(90deg, #22c55e, #a3e635, #fde047); transition: width .18s linear; }
.pvz-progreso.frenesi > i { background: linear-gradient(90deg, #f97316, #f0abfc, #a855f7); }
.pvz-progreso .pvz-frenesi-zona { position: absolute; right: 0; top: 0; bottom: 0; width: 25%; background: repeating-linear-gradient(135deg, rgba(240, 171, 252, .18) 0 5px, rgba(168, 85, 247, .05) 5px 10px); border-left: 1px dashed rgba(240, 171, 252, .45); pointer-events: none; }
.pvz-progreso > b { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); font-size: 8px; color: rgba(255, 255, 255, .82); letter-spacing: .3px; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
.pvz-lienzo { position: relative; width: 100%; display: flex; justify-content: center; }
.pvz-lienzo canvas {
  display: block; width: 100%; max-width: 960px; height: auto;
  border-radius: 16px; border: 1px solid rgba(134, 239, 172, .28);
  background: #081f12; box-shadow: 0 18px 42px rgba(0, 0, 0, .42), 0 0 0 1px rgba(6, 40, 18, .55), inset 0 0 40px rgba(0, 0, 0, .25);
  touch-action: none; cursor: crosshair;
}
.pvz-lienzo canvas:focus-visible { outline: 2px solid #fde047; outline-offset: 3px; }
.pvz-aviso {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  max-width: min(84%, 520px); padding: 7px 13px; border-radius: 10px;
  background: rgba(4, 18, 10, .9); border: 1px solid rgba(148, 163, 184, .35);
  color: #e2e8f0; font-size: 11.5px; font-weight: 800; text-align: center; pointer-events: none;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .4); animation: pvzAvisoIn .18s ease-out;
}
.pvz-aviso.mal { border-color: rgba(248, 113, 113, .6); color: #fecaca; background: rgba(60, 8, 12, .92); }
.pvz-aviso.ok { border-color: rgba(74, 222, 128, .6); color: #bbf7d0; background: rgba(6, 42, 20, .92); }
@keyframes pvzAvisoIn { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }
.pvz-tienda-cab { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; padding: 0 2px; min-height: 18px; }
.pvz-tienda-cab b { font-size: 13px; color: #f0fdf4; }
.pvz-tienda-cab small { font-size: 10.5px; color: #bbf7d0; font-weight: 700; }
.pvz-tienda-cab #pvzSelTag { font-size: 8px; font-weight: 900; letter-spacing: .5px; color: #fde68a; background: rgba(253, 224, 71, .12); border: 1px solid rgba(253, 224, 71, .28); border-radius: 5px; padding: 2px 5px; }
.pvz-tienda-ayuda { margin-left: auto; font-size: 9.5px; color: #94a3b8; font-weight: 700; }
.pvz-tienda { display: flex; gap: 6px; overflow-x: auto; padding: 2px 1px 7px; scrollbar-width: thin; scrollbar-color: rgba(134, 239, 172, .35) transparent; }
.pvz-tienda::-webkit-scrollbar { height: 6px; }
.pvz-tienda::-webkit-scrollbar-thumb { background: rgba(134, 239, 172, .3); border-radius: 4px; }
.pvz-carta {
  position: relative; flex: 0 0 108px; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 6px; align-items: center;
  padding: 7px 7px 6px; border-radius: 12px; border: 2px solid rgba(148, 163, 184, .26);
  background: linear-gradient(180deg, rgba(20, 72, 37, .85), rgba(5, 24, 13, .92));
  color: #ecfdf5; text-align: left; cursor: pointer; font: inherit; min-height: 58px;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.pvz-carta:hover { transform: translateY(-1px); border-color: rgba(253, 224, 71, .6); background: linear-gradient(180deg, rgba(28, 94, 48, .9), rgba(7, 32, 17, .95)); }
.pvz-carta:active { transform: translateY(1px); }
.pvz-carta:focus-visible { outline: 2px solid #fde047; outline-offset: 2px; }
.pvz-carta.sel { border-color: #fde047; box-shadow: 0 0 0 2px rgba(253, 224, 71, .2), 0 8px 18px rgba(0, 0, 0, .32); }
.pvz-carta.no { opacity: .46; filter: saturate(.65); }
.pvz-carta-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: rgba(255, 255, 255, .07); font-size: 19px; line-height: 1; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.pvz-carta-info { display: grid; gap: 2px; min-width: 0; }
.pvz-carta-info b { font-size: 10.5px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pvz-carta-info small { font-size: 9px; color: #bbf7d0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pvz-carta-tecla { position: absolute; top: 3px; right: 4px; font-style: normal; font-size: 8px; font-weight: 900; opacity: .5; }
.pvz-ayuda { margin: 0; text-align: center; }
.pvz-resultado-resumen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px;
  margin: 10px 0 4px; padding: 10px; border-radius: 12px;
  background: rgba(8, 30, 18, .55); border: 1px solid rgba(74, 222, 128, .18);
}
.pvz-resultado-resumen span { font-size: 12px; color: #d1fae5; }
.pvz-resultado-resumen b { color: #fef9c3; }
@media (max-width: 700px) {
  .pvz-tv { gap: 6px; }
  .pvz-chip { min-height: 31px; padding: 4px 8px; border-radius: 10px; }
  .pvz-chip b { font-size: 12px; }
  .pvz-chip small { font-size: 8px; }
  .pvz-chip .pvz-ico { font-size: 13px; }
  .pvz-chip.cripta { margin-left: 0; }
  .pvz-cripta-barra { width: 56px; height: 7px; }
  .pvz-carta { flex-basis: 92px; grid-template-columns: 27px minmax(0, 1fr); gap: 5px; padding: 6px; min-height: 52px; }
  .pvz-carta-ico { width: 27px; height: 27px; font-size: 16px; }
  .pvz-carta-info b { font-size: 9.5px; }
  .pvz-carta-info small { font-size: 8px; }
  .pvz-tienda-ayuda { display: none; }
  .pvz-ayuda { font-size: 10.5px; }
}
@media (max-width: 430px) {
  .pvz-hud { gap: 4px; }
  .pvz-chip { min-height: 28px; padding: 3px 7px; gap: 4px; }
  .pvz-chip b { font-size: 11px; }
  .pvz-chip small { font-size: 7.5px; }
  .pvz-chip.cripta { order: 9; }
  .pvz-carta { flex-basis: 82px; }
  .pvz-carta-info small { font-size: 7.5px; }
  .pvz-tienda-cab small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pvz-carta, .pvz-progreso > i { transition: none; }
  .pvz-aviso { animation: none; }
}

/* UNO ocupa todo el alto disponible de la mesa sin dejar un hueco inferior. */
body.juego-body.sala-body #tablero > .tb-fit:has(> .uno-tv) { height: 100%; }
body.juego-body.sala-body .uno-tv { height: 100%; }

/* Aviso flotante de castigo +2 / +4 sobre el jugador alcanzado. */
.uno-castigo-txt {
  position: absolute; right: 12px; top: -10px; z-index: 6; pointer-events: none;
  color: #f87171; font-size: 24px; font-weight: 1000; line-height: 1;
  text-shadow: 0 2px 9px rgba(0,0,0,.7), 0 0 12px rgba(248,113,113,.5);
  animation: unoCastigoCae .9s ease-out both;
}
.uno-yo > .uno-castigo-txt { right: 74px; top: -14px; }

@media (max-height: 700px) {
  .uno-mesa { min-height: 420px; }
  .uno-mano { min-height: 88px; }
}
@media (max-height: 620px) {
  .uno-mesa { min-height: 360px; }
  .uno-anillo { height: 24%; }
  .uno-color-indicador small { display: none; }
}

.uno-sentido svg { width: 27px; height: 27px; color: var(--uc, #3b82f6); }
.uno-mesa.al-reves .uno-sentido svg { transform: scaleX(-1); }
@media (max-width: 860px) { .uno-sentido svg { width: 21px; height: 21px; } }

/* =====================================================================
   UNO VERTICAL · celulares, pantallas angostas y orientación retrato
   ===================================================================== */
@media (orientation: portrait), (max-width: 600px) and (min-height: 620px) {
  .uno-tv { max-width: 560px; }
  .uno-mesa {
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr) auto auto auto;
    gap: 4px;
    padding: 6px 7px 5px;
    border-radius: 18px;
  }
  .uno-mesa::before { inset: 7% 4% 9%; }
  .uno-anillo {
    width: 84%;
    height: 30%;
    top: 50%;
    border-width: 6px;
  }
  .uno-sentido {
    top: 7px;
    right: 7px;
    width: 43px;
    height: 43px;
  }
  .uno-sentido svg { width: 21px; height: 21px; }
  .uno-sentido small { font-size: 6px; letter-spacing: .04em; }
  .uno-rivales {
    width: min(340px, 100%);
    max-width: 100%;
    min-width: 0;
    padding-right: 45px;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px;
    box-sizing: border-box;
    justify-self: center;
  }
  .uno-rival {
    min-height: 38px;
    padding: 4px 7px;
    border-radius: 10px;
  }
  .uno-rival-avatar { width: 26px; height: 26px; font-size: 11px; }
  .uno-rival-txt b { font-size: 11px; }
  .uno-rival-txt small { font-size: 9.5px; }
  .uno-rival-dorso { display: block; }
  .uno-dorsos.mini .uno-dorso { width: 13px; height: 18px; margin-left: -7px; }
  .uno-rival .uno-atrapar {
    position: absolute;
    right: 6px;
    top: -7px;
    z-index: 8;
    font-size: 9.5px;
    padding: 2px 7px;
  }
  .uno-centro {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "mazo descarte" "color color";
    grid-template-rows: auto auto;
    align-items: center;
    justify-items: center;
    column-gap: 8px;
    row-gap: 1px;
    padding: 0;
    min-height: 0;
  }
  .uno-mazo { grid-area: mazo; justify-self: end; width: 62px; }
  .uno-mazo-stack { width: 51px; height: 72px; }
  .uno-mazo-stack i b { font-size: 21px; }
  .uno-descarte-pila { grid-area: descarte; justify-self: start; width: 74px; height: 104px; }
  .uno-descarte-pila .uno-carta { width: 72px; height: 102px; }
  .uno-color-indicador {
    grid-area: color;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    min-width: 0;
    padding: 2px 9px;
    border-radius: 999px;
  }
  .uno-color-bola { width: 19px; height: 19px; }
  .uno-color-indicador b { font-size: 10px; }
  .uno-color-indicador small { display: inline; font-size: 7.5px; }
  .uno-yo { padding: 0 4px; }
  .uno-yo-datos b { font-size: 11.5px; }
  .uno-yo-datos small { font-size: 9.5px; }
  .uno-acciones { gap: 5px; }
  .uno-acciones .btn { padding: 5px 8px; font-size: 10px; }
  .uno-btn-uno { width: 46px; height: 46px; font-size: 10.5px; border-width: 2px; }
  .uno-aviso { min-height: 15px; padding: 0 3px; font-size: 10px; line-height: 1.3; }
  .uno-mano {
    min-height: 92px;
    padding: 0 2px;
    justify-content: center;
  }
  .uno-mano .uno-carta {
    width: clamp(52px, 14vw, 66px);
    margin-left: calc(-1 * clamp(15px, 5vw, 27px));
  }
  .uno-pie { display: none; }
  .uno-cab-jugadores { gap: 4px; }
  .uno-cab-chip { padding: 2px 7px; }
}

@media (orientation: portrait) and (max-height: 650px), (max-width: 600px) and (min-height: 620px) and (max-height: 650px) {
  .uno-mesa { padding: 4px 6px 3px; gap: 2px; }
  .uno-rivales { gap: 2px; }
  .uno-rival { min-height: 31px; padding: 2px 6px; }
  .uno-rival-avatar { width: 22px; height: 22px; font-size: 9.5px; }
  .uno-rival-txt b { font-size: 10px; }
  .uno-rival-txt small { font-size: 8.5px; }
  .uno-mazo { width: 52px; }
  .uno-mazo-stack { width: 43px; height: 61px; }
  .uno-descarte-pila { width: 62px; height: 88px; }
  .uno-descarte-pila .uno-carta { width: 60px; height: 86px; }
  .uno-color-indicador { padding: 1px 7px; }
  .uno-color-bola { width: 16px; height: 16px; }
  .uno-aviso { min-height: 13px; font-size: 9.5px; }
  .uno-mano { min-height: 78px; }
  .uno-mano .uno-carta { width: clamp(47px, 13vw, 58px); margin-left: calc(-1 * clamp(13px, 4.7vw, 23px)); }
  .uno-yo-datos b { font-size: 10.5px; }
  .uno-btn-uno { width: 41px; height: 41px; font-size: 9.5px; }
}

@media (max-width: 420px) {
  .uno-rivales { width: 100%; padding-right: 39px; }
  .uno-rival { min-height: 34px; }
  .uno-sentido { width: 36px; height: 36px; }
  .uno-sentido small { display: none; }
  .uno-sentido svg { width: 18px; height: 18px; }
  .uno-mesa { padding-left: 5px; padding-right: 5px; }
  .uno-color-indicador small { display: none; }
  .uno-yo-datos small { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Feedback de UNO: reloj de turno, carta robada y grito pendiente. */
.uno-reloj {
  position: absolute;
  left: 5px; right: 5px; bottom: 1px;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148,163,184,.18);
  pointer-events: none;
}
.uno-reloj > span {
  display: block;
  width: 100%; height: 100%;
  border-radius: inherit;
  background: var(--uc, #60a5fa);
  box-shadow: 0 0 7px color-mix(in srgb, var(--uc, #60a5fa) 60%, transparent);
  transition: width .18s linear, background .2s ease;
}
.uno-reloj.urgente > span { background: #ef4444; box-shadow: 0 0 9px rgba(239,68,68,.75); }
.uno-uno-tiempo { color: #fde68a; font-weight: 900; font-variant-numeric: tabular-nums; }
.uno-carta.robada {
  box-shadow: 0 0 0 2px rgba(250,204,21,.9), 0 0 22px rgba(250,204,21,.5), 0 8px 16px rgba(0,0,0,.4);
  animation: unoCartaRobada 1.1s ease-in-out infinite;
}
@keyframes unoCartaRobada {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.18); }
}
.uno-btn-uno.cerca {
  opacity: .9;
  filter: saturate(1.2) brightness(1.06);
  box-shadow: 0 0 13px rgba(250,204,21,.3), 0 5px 14px rgba(0,0,0,.35);
}
.uno-aviso[role=status] { transition: color .2s ease; }
@media (prefers-reduced-motion: reduce) {
  .uno-carta.robada { animation: none; }
}

/* =====================================================================
   TATETI . arena vertical: tablero grande, HUD espejado y efectos
   ---------------------------------------------------------------------
   La cabecera de la sala ya muestra el juego y los jugadores, asi que el
   tablero se queda con todo el alto libre. `dimensionarTateti()` mide el hueco
   real y fija el tamano en px; el CSS solo define la piel y las animaciones.
   ===================================================================== */
.tateti-tv {
  --tateti-hueco: clamp(5px, 1.7vw, 10px);
  --mi-tono: 57, 255, 20;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  box-sizing: border-box;
}
.tateti-tv.marca-o { --mi-tono: 255, 77, 109; }

/* ---- Marcador de los dos jugadores (espejado) ---- */
.tateti-hud {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}
.tateti-jug {
  --tono: 57, 255, 20;
  display: flex; align-items: center; gap: 7px; min-width: 0;
  padding: 3px 10px 3px 4px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .22);
  background: linear-gradient(160deg, rgba(20, 40, 34, .82), rgba(6, 14, 11, .82));
}
.tateti-jug.marca-o { --tono: 255, 77, 109; }
.tateti-jug.rival { flex-direction: row-reverse; padding: 3px 4px 3px 10px; text-align: right; }
.tateti-jug .tateti-ficha {
  flex: none; width: 26px; height: 26px; border-radius: 9px;
  display: grid; place-items: center;
  color: rgb(var(--tono));
  border: 1px solid rgba(var(--tono), .3);
  background: radial-gradient(circle at 50% 35%, rgba(var(--tono), .18), rgba(0, 0, 0, .35));
  box-shadow: inset 0 0 12px rgba(var(--tono), .12);
}
.tateti-ficha .tateti-trazo { width: 68%; height: 68%; }
.tateti-jug-txt { display: grid; min-width: 0; }
.tateti-jug-txt b {
  font-size: 12.5px; line-height: 1.15; color: #e6f2ea;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tateti-jug-txt small {
  font-size: 9px; line-height: 1.1; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(148, 163, 184, .9);
}
.tateti-jug.es-turno {
  border-color: rgba(var(--tono), .62);
  background: linear-gradient(160deg, rgba(var(--tono), .16), rgba(6, 14, 11, .9));
  animation: tateti-turno-latido 1.7s ease-in-out infinite;
}
.tateti-jug.gana {
  border-color: rgba(255, 209, 102, .75);
  box-shadow: 0 0 0 1px rgba(255, 209, 102, .34), 0 0 22px rgba(255, 209, 102, .26);
}
@keyframes tateti-turno-latido {
  0%, 100% { box-shadow: 0 0 0 1px rgba(var(--tono), .26), 0 0 10px rgba(var(--tono), .14); }
  50% { box-shadow: 0 0 0 2px rgba(var(--tono), .5), 0 0 22px rgba(var(--tono), .34); }
}

/* ---- Chip central del turno ---- */
.tateti-centro { display: grid; justify-items: center; gap: 2px; min-width: 0; }
.tateti-vs {
  font-size: 8.5px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(148, 163, 184, .7); line-height: 1;
}
.tateti-estado {
  font-size: 10.5px; font-weight: 800; line-height: 1.25; white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  padding: 2px 9px; border-radius: 999px;
  color: #cbd5e1; background: rgba(8, 18, 14, .8);
  border: 1px solid rgba(148, 163, 184, .26);
}
.tateti-centro.mio .tateti-estado {
  color: #06210c;
  background: linear-gradient(180deg, #9dff7a, #39c81a);
  border-color: rgba(57, 255, 20, .75);
  animation: tateti-chip-latido 1.5s ease-in-out infinite;
}
.tateti-centro.fin .tateti-estado { animation: none; }
@keyframes tateti-chip-latido {
  0%, 100% { box-shadow: 0 0 10px rgba(57, 255, 20, .25); }
  50% { box-shadow: 0 0 22px rgba(57, 255, 20, .55); }
}

/* ---- Arena y tablero ---- */
.tateti-arena {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.tateti-tv .tateti-wrap {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  aspect-ratio: 1 / 1.15;
  min-height: 0;
  box-sizing: border-box;
}
.tateti-tv .tateti {
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: var(--tateti-hueco);
  padding: var(--tateti-hueco);
  border-radius: clamp(12px, 3.4vw, 22px);
}
.tateti-tv .tateti-celda {
  aspect-ratio: auto;
  min-width: 0;
  min-height: 0;
  border-radius: clamp(10px, 2.8vw, 16px);
  transition: transform .1s ease, border-color .18s, box-shadow .18s;
}
.tateti-celda.jugable { cursor: pointer; }
.tateti-celda.jugable::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .2s;
  background: radial-gradient(circle at 50% 50%, rgba(var(--mi-tono), .16), transparent 68%);
}
.tateti-celda.jugable:hover::before { opacity: 1; }
.tateti-celda.jugable:active { transform: scale(.965); }
.tateti-celda.pendiente { border-color: rgba(var(--mi-tono), .55); }

/* Vista previa de mi marca en la casilla libre (solo con puntero fino) */
.tateti-fantasma {
  position: absolute; inset: 0; display: grid; place-items: center;
  opacity: 0; transition: opacity .16s; pointer-events: none;
}
.tateti-fantasma .tateti-trazo { width: 68%; height: 68%; }
@media (hover: hover) and (pointer: fine) {
  .tateti-celda.jugable:hover .tateti-fantasma { opacity: .3; }
}
@media (hover: none) { .tateti-fantasma { display: none; } }

/* Onda al tocar */
.tateti-onda {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(var(--mi-tono), .55), transparent 64%);
  animation: tateti-onda-vuela .5s ease-out forwards;
}
@keyframes tateti-onda-vuela {
  from { opacity: .85; transform: scale(.4); }
  to { opacity: 0; transform: scale(1.2); }
}

/* Marca nueva: el trazo se dibuja de una vez (y solo la nueva) */
.tateti-celda.pop { animation: tablero-casilla-pop .36s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes tablero-casilla-pop {
  from { transform: scale(.86); }
  60% { transform: scale(1.05); }
  to { transform: scale(1); }
}
.tateti-celda.pop::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  border: 2px solid rgba(var(--mi-tono), .75);
  animation: tateti-anillo .5s ease-out forwards;
}
@keyframes tateti-anillo {
  from { opacity: .9; transform: scale(.86); }
  to { opacity: 0; transform: scale(1.16); }
}
/* El trazo base queda dibujado; solo las marcas nuevas corren la animacion. */
.tateti-tv .tateti-trazo line,
.tateti-tv .tateti-trazo circle { stroke-dasharray: 100; stroke-dashoffset: 0; animation: none; }
.tateti-celda.pop .tateti-trazo line,
.tateti-celda.pop .tateti-trazo circle {
  stroke-dashoffset: 100;
  animation: trazo-neon .44s cubic-bezier(.2, .8, .2, 1) forwards;
}
.tateti-celda.pop .tateti-trazo .t2 { animation-delay: .12s; }

/* ---- Linea ganadora: neon, chispas y destello ---- */
.tateti-tv .tateti-neon { inset: var(--tateti-hueco); width: auto; height: auto; }
.tateti-tv .tateti-neon line {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: tateti-traza .55s cubic-bezier(.2, .8, .2, 1) .08s forwards;
}
@keyframes tateti-traza { to { stroke-dashoffset: 0; } }
.tateti-neon.gana line {
  stroke: #e6ffd4;
  filter: drop-shadow(0 0 2px #39ff14) drop-shadow(0 0 9px #39ff14) drop-shadow(0 0 22px rgba(57, 255, 20, .85));
}
.tateti-neon.pierde line {
  stroke: #ffe0e6;
  filter: drop-shadow(0 0 2px #ff4d6d) drop-shadow(0 0 9px #ff4d6d) drop-shadow(0 0 22px rgba(255, 77, 109, .85));
}
.tateti-destello {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .5), transparent 62%);
  animation: tateti-destello-brilla .6s ease-out forwards;
}
@keyframes tateti-destello-brilla {
  from { opacity: .85; transform: scale(.6); }
  to { opacity: 0; transform: scale(1.3); }
}
.tateti-celda.ganadora { animation: tateti-ganadora-luce 1.15s ease-in-out infinite; }
.tateti-celda.ganadora.o {
  border-color: #ff4d6d;
  background: radial-gradient(circle at 50% 40%, rgba(255, 77, 109, .24), rgba(24, 4, 8, .9) 72%);
  animation-name: tateti-ganadora-luce-o;
}
@keyframes tateti-ganadora-luce {
  0%, 100% { box-shadow: 0 0 18px rgba(57, 255, 20, .32), inset 0 0 22px rgba(57, 255, 20, .12); }
  50% { box-shadow: 0 0 34px rgba(57, 255, 20, .62), inset 0 0 26px rgba(57, 255, 20, .24); }
}
@keyframes tateti-ganadora-luce-o {
  0%, 100% { box-shadow: 0 0 18px rgba(255, 77, 109, .32), inset 0 0 22px rgba(255, 77, 109, .12); }
  50% { box-shadow: 0 0 34px rgba(255, 77, 109, .62), inset 0 0 26px rgba(255, 77, 109, .24); }
}
.tateti-tv.gano .tateti { animation: tateti-sacudida .55s ease-out; }
.tateti-tv.perdio .tateti { animation: tateti-sacudida .4s ease-out; }
@keyframes tateti-sacudida {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  18% { transform: translate(-4px, 3px) rotate(-.5deg); }
  36% { transform: translate(4px, -3px) rotate(.45deg); }
  54% { transform: translate(-3px, -2px) rotate(-.3deg); }
  72% { transform: translate(2px, 2px) rotate(.2deg); }
}

/* ---- Barra de tiempo del turno ---- */
.tateti-reloj { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; height: 15px; }
.tateti-reloj i {
  position: relative; flex: 1 1 auto; height: 5px; border-radius: 999px; overflow: hidden;
  background: rgba(148, 163, 184, .16); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45);
}
.tateti-reloj span {
  display: block; height: 100%; width: 100%; border-radius: inherit;
  background: linear-gradient(90deg, #39ff14, #b6ff6a);
  box-shadow: 0 0 10px rgba(57, 255, 20, .5);
  transition: width .28s linear, background .2s;
}
.tateti-reloj b {
  flex: none; min-width: 26px; text-align: right;
  font-size: 10.5px; line-height: 1; color: rgba(148, 163, 184, .9);
  font-variant-numeric: tabular-nums;
}
.tateti-reloj.urgente span {
  background: linear-gradient(90deg, #ffb020, #ff4d6d);
  box-shadow: 0 0 12px rgba(255, 77, 109, .6);
  animation: tateti-reloj-latido .8s ease-in-out infinite;
}
.tateti-reloj.urgente b { color: #ff8fa3; }
@keyframes tateti-reloj-latido { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* ---- Ajustes de pantalla ---- */
@media (max-width: 520px) {
  .tateti-tv { gap: 6px; }
  .tateti-jug { gap: 6px; padding: 2px 8px 2px 3px; }
  .tateti-jug.rival { padding: 2px 3px 2px 8px; }
  .tateti-jug .tateti-ficha { width: 23px; height: 23px; border-radius: 8px; }
  .tateti-jug-txt b { font-size: 11.5px; }
  .tateti-jug-txt small { font-size: 8px; }
  .tateti-estado { font-size: 10px; padding: 1px 8px; }
}
@media (max-height: 620px) {
  .tateti-tv { gap: 5px; }
  .tateti-jug-txt small { display: none; }
  .tateti-centro .tateti-vs { display: none; }
  .tateti-reloj { height: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .tateti-jug.es-turno, .tateti-centro.mio .tateti-estado, .tateti-celda.ganadora,
  .tateti-celda.pop, .tateti-celda.pop::after, .tateti-onda, .tateti-destello,
  .tateti-tv.gano .tateti, .tateti-tv.perdio .tateti, .tateti-reloj.urgente span,
  .tateti-tv .tateti-neon line, .tateti-celda.pop .tateti-trazo line,
  .tateti-celda.pop .tateti-trazo circle { animation: none !important; }
  .tateti-tv .tateti-neon line { stroke-dashoffset: 0; }
}

/* =====================================================================
   Pantalla completa para canchas apaisadas (Billar / Mini Golf)
   ---------------------------------------------------------------------
   El lienzo es 1000x500 / 1000x620: en un teléfono vertical queda en ~200 px
   de alto. El botón «Pantalla completa» esconde cabecera, chat y ayuda, pide
   fullscreen y bloquea la orientación en apaisado (Android). En iOS el
   bloqueo no existe: se gana todo el alto y se gira el teléfono a mano.
   La clase vive en <body> y se suelta al terminar la partida o cambiar de juego.
   ===================================================================== */
body.tablero-completo { overflow: hidden; }
body.tablero-completo #salaCab,
body.tablero-completo .sala-lado,
body.tablero-completo .superapp-header,
body.tablero-completo .navbar-global,
body.tablero-completo .arcade-ayuda,
body.tablero-completo .chat-flotante { display: none !important; }
body.tablero-completo .sala-cont { padding: 0; margin: 0; height: 100dvh; max-height: 100dvh; }
body.tablero-completo .sala-grid { display: block; height: 100dvh; }
body.tablero-completo #tablero {
  height: 100dvh;
  max-height: 100dvh;
  padding: 4px;
  box-sizing: border-box;
}
/* Aviso de "girá el teléfono" cuando el equipo queda vertical. */
.aviso-girar {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 22px;
  text-align: center;
  background: rgba(3, 6, 16, .88);
  color: #e2e8f0;
  font: 800 15px/1.4 system-ui, sans-serif;
}
.aviso-girar span { font-size: 44px; animation: avisoGirar 2.4s ease-in-out infinite; }
.aviso-girar small { display: block; margin-top: 6px; font-size: 12px; font-weight: 600; color: #94a3b8; }
@keyframes avisoGirar {
  0%, 40%, 100% { transform: rotate(0deg); }
  55%, 85% { transform: rotate(90deg); }
}

/* Botón en la barra del tablero. */
.tablero-girar {
  margin-left: auto;
  min-height: 36px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 800;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.45);
  background: rgba(2,6,23,.72);
  color: #e2e8f0;
}
.tablero-girar:hover { border-color: var(--oro); color: var(--oro); }
body.tablero-completo .tablero-girar { border-color: rgba(250,204,21,.6); color: var(--oro); }

/* =====================================================================
   Pantallas bajas (celular apaisado, ~390 px de alto)
   ---------------------------------------------------------------------
   La cabecera, el HUD, la cruz de controles y la ayuda se comen el alto y
   `ajustarTablero()` termina achicando el tablero. Acá se compacta todo: la
   cruz de Snake pasa a una fila, los botones a 38 px y la ayuda se va.
   ===================================================================== */
@media (max-height: 480px) {
  /* La cabecera de la sala repite lo que ya dice el HUD del juego: en apaisado
     se va para devolverle ~60 px al tablero. */
  body.juego-body.sala-body #salaCab { display: none; }
  body.juego-body.sala-body .sala-cont { padding-top: 2px; }
  .arcade-ayuda { display: none; }
  .arcade-hud { font-size: 11px; gap: 6px; }
  .arcade-hud b { font-size: 12px; }
  .dino-controles { gap: 6px; }
  .dino-controles .btn { min-height: 38px; font-size: 13px; }
  .snake-controles {
    grid-template-columns: repeat(5, minmax(38px, 1fr));
    grid-template-areas: "izquierda arriba centro abajo derecha";
    gap: 4px;
    max-width: none;
  }
  .snake-controles .btn { min-height: 38px; font-size: 15px; }
  .snake-pad-centro { min-height: 38px; font-size: 16px; }
  .arcade-controles .btn { min-height: 38px; font-size: 13px; }

  /* Snake y Dino: el lienzo se queda con todo el alto libre (el motor recoloca
     la arena y el mundo), sin depender del zoom de la sala. */
  body.juego-body.sala-body #tablero > .tb-fit:has(> .snake-tv),
  body.juego-body.sala-body #tablero > .tb-fit:has(> .dino-tv) { height: 100%; }
  body.juego-body.sala-body .snake-tv,
  body.juego-body.sala-body .dino-tv {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  #snakeCanvas, #dinoCanvas {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: auto;
    max-width: none;
    aspect-ratio: auto;
    margin: 0;
  }
}

/* =====================================================================
   Objetivos táctiles (44 px reales en pantalla)
   ---------------------------------------------------------------------
   Cuando el tablero no entra, la sala lo escala con `zoom`. Eso encoge también
   los controles: un botón de 44 px quedaba en 39 y los de efecto del billar en
   25. `--zoom-tablero` lo publica ajustarTablero() y acá se compensa.
   ===================================================================== */
#tablero { --zoom-tablero: 1; }
#tablero .btn,
#tablero .tablero-girar,
#tablero .billar-efecto-btn,
#tablero .japeju-btn,
#tablero .vasos-vaso,
#tablero .bomba-cable,
#tablero .trillizos-carta,
#tablero .ah-tecla {
  min-height: calc(44px / var(--zoom-tablero));
}
#tablero .billar-efecto-btn { min-width: calc(44px / var(--zoom-tablero)); }

/* ---------- Tribuna (espectadores) ----------
   El servidor no manda nada privado a la tribuna (manos, palabra del Ahorcado, trampa de la
   Bomba). Estas reglas sólo ocultan los controles de acción del jugador y pintan la cabecera
   del público; aunque se salteen, el backend rechaza cualquier acción de quien no juega. */
body.modo-espectador #saldoSala,
body.modo-espectador #audioSala,
body.modo-espectador .sala-juegos,
body.modo-espectador .sala-chat,
body.modo-espectador #chatForm,
body.modo-espectador .uno-mano,
body.modo-espectador .uno-yo,
body.modo-espectador .uno-acciones { display: none !important; }

body.modo-espectador #tablero button,
body.modo-espectador #tablero input,
body.modo-espectador #tablero [role="button"] { pointer-events: none !important; cursor: default; }
body.modo-espectador #tablero input { display: none !important; }
body.modo-espectador #tablero button { opacity: .55; }

.sala-cab.cab-tribuna { display: flex; flex-direction: column; gap: 8px; }
.cab-tribuna .sala-cab-top { flex-wrap: wrap; gap: 8px; }
.tribuna-fila { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tribuna-jugador {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
  background: rgba(255,255,255,.04); font-size: 13.5px;
}
.tribuna-jugador small { opacity: .7; font-size: 11.5px; }
.tribuna-jugador i { font-style: normal; font-weight: 800; color: #ffd166; }
.tribuna-jugador.turno { border-color: #ffd166; box-shadow: 0 0 0 2px rgba(255,209,102,.18); }
.tribuna-jugador.fuera { opacity: .5; }
.tribuna-aviso { margin: 0; font-size: 12.5px; opacity: .72; }

/* Invitación abierta en la lista de juegos */
.practica-acciones { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.practica-acciones .btn { width: 100%; }

/* Barra del anfitrión: invitación abierta, privacidad y tribuna */
.host-sala {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 8px 12px; margin: 0 0 8px; border-radius: 12px;
  border: 1px solid rgba(239, 120, 120, .35); background: rgba(239, 120, 120, .08); font-size: 13px;
}
.host-sala-titulo { font-weight: 800; }
.host-sala-estado { opacity: .8; }
.host-sala-acciones { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
@media (max-width: 640px) {
  .host-sala-acciones { margin-left: 0; width: 100%; }
  .host-sala-acciones .btn { flex: 1 1 45%; }
}

/* ---------- Tribuna en vivo (Fase 2) ---------- */
.sala-tribuna {
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px;
  background: rgba(15, 23, 42, .55); padding: 10px;
  max-height: 46vh; min-height: 200px;
}
.sala-tribuna-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sala-tribuna-cab b { font-size: 13.5px; }
.sala-tribuna-cab .suave { font-size: 11.5px; }
.tribuna-fijado {
  border-left: 3px solid #ffd166; background: rgba(255, 209, 102, .10);
  border-radius: 8px; padding: 6px 8px; font-size: 12.5px;
}
.tribuna-fijado p { margin: 2px 0 0; }
.tribuna-mensajes {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; min-height: 80px; scroll-behavior: smooth;
}
.tribuna-msg { position: relative; background: rgba(255, 255, 255, .04); border-radius: 10px; padding: 6px 8px; }
.tribuna-msg small { display: block; opacity: .75; font-size: 11px; }
.tribuna-msg p { margin: 2px 0 0; overflow-wrap: anywhere; }
.tribuna-msg .tribuna-mod { position: absolute; top: 4px; right: 4px; display: flex; gap: 2px; }
.tribuna-msg .tribuna-mod button {
  border: 0; background: transparent; cursor: pointer; font-size: 12px;
  padding: 2px 3px; border-radius: 6px; line-height: 1;
}
.tribuna-msg .tribuna-mod button:hover { background: rgba(255, 255, 255, .14); }
.tribuna-msg .tribuna-mod { opacity: 0; transition: opacity .15s ease; }
.tribuna-msg:hover .tribuna-mod, .tribuna-msg:focus-within .tribuna-mod { opacity: 1; }
@media (hover: none) { .tribuna-msg .tribuna-mod { opacity: 1; } }
.tribuna-form { display: flex; gap: 6px; }
.tribuna-form input { flex: 1; min-width: 0; }
.tribuna-aviso { margin: 0; font-size: 12px; }
.tribuna-reacciones { display: flex; gap: 4px; flex-wrap: wrap; }
.tribuna-emoji {
  border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04);
  border-radius: 999px; width: 40px; height: 40px; font-size: 19px; cursor: pointer;
}
.tribuna-emoji:hover, .tribuna-emoji:focus-visible { border-color: #ffd166; transform: translateY(-1px); }
.tribuna-modo .btn { width: 100%; }
.tribuna-seguir { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12.5px; }
.tribuna-seguir-item { display: inline-flex; align-items: center; gap: 4px; }
.tribuna-seguir-btn { min-height: 36px; }
.tribuna-emoji-flota {
  position: fixed; bottom: 12vh; z-index: 9999; pointer-events: none;
  animation: tribunaFlota 2.2s ease-out forwards;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .45));
}
@keyframes tribunaFlota {
  0% { transform: translateY(0) scale(.7); opacity: 0; }
  12% { transform: translateY(-10px) scale(1.15); opacity: 1; }
  100% { transform: translateY(-52vh) scale(.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tribuna-emoji-flota { animation-duration: .9s; }
}
@media (max-width: 860px) {
  .sala-tribuna { max-height: none; }
}

/* Tribuna del público: debajo del tablero, siempre visible */
.sala-cont > .sala-tribuna { margin-top: 10px; max-height: 60vh; }
@media (max-width: 860px) { .sala-cont > .sala-tribuna { max-height: 46vh; } }

/* ---------- Audio de la sala (Fase 3): música + voz al público ---------- */
.tribuna-audio, .tribuna-mic, .tribuna-musica {
  display: flex; flex-direction: column; gap: 6px;
  border-top: 1px dashed rgba(255, 255, 255, .12); padding-top: 8px;
}
.tribuna-audio-fila { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tribuna-audio-fila label { display: flex; align-items: center; gap: 4px; font-size: 12px; flex: 1 1 120px; }
.tribuna-audio-fila input[type="range"] { flex: 1; min-width: 60px; }
.tribuna-audio-mudo {
  border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05);
  border-radius: 999px; width: 38px; height: 38px; font-size: 17px; cursor: pointer;
}
.tribuna-audio-nota { margin: 0; font-size: 12px; }
.tribuna-mic-fila { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tribuna-mic-nivel {
  flex: 1; min-width: 60px; height: 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .12); overflow: hidden;
}
.tribuna-mic-nivel i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #22c55e, #facc15, #ef4444); transition: width .08s linear; }
.tribuna-mic-vivo { color: #ef4444; font-size: 11.5px; letter-spacing: .06em; }
.tribuna-mic-lista { display: flex; flex-wrap: wrap; gap: 6px; }
.tribuna-mic-item {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12px;
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; padding: 2px 6px;
}
.tribuna-mic-item.mudo { opacity: .6; }
.tribuna-mic-toggle { border: 0; background: transparent; cursor: pointer; font-size: 13px; padding: 2px; }
.tribuna-musica-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tribuna-musica-form { display: flex; flex-wrap: wrap; gap: 6px; }
.tribuna-musica-form input { flex: 1 1 140px; min-width: 0; }
.tribuna-musica-lista { display: flex; flex-direction: column; gap: 4px; max-height: 160px; overflow-y: auto; }
.tribuna-musica-item {
  display: flex; align-items: center; gap: 6px; font-size: 12.5px;
  border: 1px solid rgba(255, 255, 255, .10); border-radius: 8px; padding: 4px 6px;
}
.tribuna-musica-item.activa { border-color: #ffd166; background: rgba(255, 209, 102, .08); }
.tribuna-musica-item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tribuna-musica-item button { border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); border-radius: 6px; cursor: pointer; font-size: 12px; padding: 2px 6px; }
.tribuna-musica-pie { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; }
.tribuna-musica-pie label { display: inline-flex; align-items: center; gap: 4px; }
.tribuna-musica-pie input[type="range"] { width: 90px; }
.tribuna-musica-seguir { white-space: nowrap; }
@media (max-width: 640px) {
  .tribuna-audio-fila label { flex: 1 1 100%; }
  .tribuna-musica-pie { justify-content: space-between; }
}

/* Aviso de victoria dentro de la sala. */
.victoria-sala {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0 0 8px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid rgba(255, 209, 102, .45);
  background: linear-gradient(120deg, rgba(255, 209, 102, .16), rgba(15, 23, 42, .5));
}
.victoria-cab { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 180px; }
.victoria-cab b { font-size: 14px; }
.victoria-cab .suave { font-size: 12px; }
.victoria-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.victoria-check { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-top: 8px; }
.victoria-preview {
  display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 10px;
  border: 1px dashed rgba(255, 209, 102, .4); border-radius: 10px; font-size: 12.5px;
}
.victoria-preview-icono { font-size: 24px; }
.victoria-preview div { display: flex; flex-direction: column; }
.victoria-preview small { opacity: .8; }
@media (max-width: 640px) {
  .victoria-acciones { width: 100%; }
  .victoria-acciones .btn, .victoria-acciones a { flex: 1 1 100%; text-align: center; }
}

/* ===== Táctil: los lienzos con arrastre/deslizamiento no deben desplazar la página ===== */
#billarCanvas, #minigolfCanvas, #bolosCanvas, #snakeCanvas, #kartCanvas, #dinoCanvas, #galaxiaCanvas,
#pingpongCanvas, #bounceCanvas, #plataformasCanvas, #tetrisCanvas, #match3Canvas, .torre-canvas { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.juego-body { overscroll-behavior-y: contain; -webkit-touch-callout: none; }
.juego-body .btn, .juego-body button { -webkit-user-select: none; user-select: none; }

/* ---------- Chat flotante de la partida (botón 💬 arrastrable, contador y vista previa) ---------- */
.chat-flotante {
  position: fixed; right: 10px; bottom: calc(82px + env(safe-area-inset-bottom)); z-index: 700;
  width: 46px; height: 46px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .85);
  background: #c94a4a; color: #fff; font-size: 21px; line-height: 1; display: grid; place-items: center;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35); cursor: grab; touch-action: none; opacity: .9;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
}
.chat-flotante[hidden], .chat-burbuja[hidden] { display: none !important; }
.chat-flotante:active { cursor: grabbing; }
.chat-flotante.con-nuevos { opacity: 1; animation: chat-late 1.2s ease-in-out infinite; background: #d6513f; }
.chat-flotante-n { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #fff; color: #d6513f; font: 800 12px/20px system-ui, sans-serif; font-style: normal; text-align: center; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.chat-burbuja {
  position: fixed; right: 64px; bottom: calc(90px + env(safe-area-inset-bottom)); z-index: 700; max-width: min(260px, 66vw);
  padding: 9px 12px; border-radius: 16px 16px 4px 16px; border: 0; background: #fff; color: #142033; text-align: left;
  font: 600 13px/1.35 system-ui, sans-serif; box-shadow: 0 10px 26px rgba(0, 0, 0, .35); cursor: pointer;
}
.chat-burbuja b { color: #1a1a1a; }
body.cajon-sala-abierto .chat-flotante, body.cajon-sala-abierto .chat-burbuja { display: none; }
@keyframes chat-late { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .chat-flotante.con-nuevos { animation: none; } }
/* El cajón lateral es oscuro: las tarjetas claras de chat y audio necesitan texto oscuro (se leían blanco sobre blanco). */
body.juego-body.sala-body .cajon-sala .sala-chat,
body.juego-body.sala-body .cajon-sala .sala-audio { color: #142033; }
body.juego-body.sala-body .cajon-sala .sala-chat-cab b,
body.juego-body.sala-body .cajon-sala .sala-chat .sala-msg { color: #142033; }
body.juego-body.sala-body .cajon-sala .sala-chat .sala-msg small { color: #5b6b82; }
body.juego-body.sala-body .cajon-sala .sala-chat .sala-msg.mio { color: #fff; }
body.juego-body.sala-body .cajon-sala .sala-chat .sala-msg.mio small { color: rgba(255, 255, 255, .8); }

/* Botón flotante de pantalla completa (todos los juegos) */
.tablero-pc { position: fixed; left: 12px; bottom: 76px; z-index: 60; margin: 0; width: 44px; height: 44px; min-height: 44px; padding: 0; font-size: 20px; line-height: 1; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
body.tablero-completo .tablero-pc { top: 8px; right: 8px; left: auto; bottom: auto; opacity: .75; width: 38px; height: 38px; min-height: 38px; }
body.tablero-completo #tablero { overflow: auto; -webkit-overflow-scrolling: touch; }
@media (max-height: 480px) { .tablero-pc { bottom: 12px; left: 12px; } body.tablero-completo .tablero-pc { right: 8px; } }

/* Pantalla completa v2: solo el juego; el lienzo conserva su proporción (nunca se aplasta). */
body.tablero-completo #hostSala,
body.tablero-completo #victoriaSala { display: none !important; }
body.tablero-completo .sala-tablero { border: 0; border-radius: 0; box-shadow: none; }

/* Pantalla completa v3: el tablero ocupa el alto real y se ajusta con el mismo zoom que la vista normal. */
body.tablero-completo.juego-body.superapp-body { padding-top: 0; }
body.tablero-completo #tablero { display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 2px 4px; }
body.tablero-completo #tablero > .tb-fit { width: 100%; }
html body.tablero-completo.tablero-completo { padding-top: 0 !important; }
html body.tablero-completo.tablero-completo .sala-cont { height: 100dvh !important; max-height: 100dvh !important; min-height: 0 !important; }
html body.tablero-completo.tablero-completo .sala-grid,
html body.tablero-completo.tablero-completo #tablero { height: 100dvh !important; max-height: 100dvh !important; }
/* Ludo en pantalla completa apaisada: tablero cuadrado a la izquierda, panel (dado/turno) a la derecha. */
@media (orientation: landscape) and (max-height: 600px) {
  body.tablero-completo .ludo-tv { max-width: none; padding: 2px 6px; }
  body.tablero-completo .ludo-escena { grid-template-columns: calc(100dvh - 78px) minmax(180px, 1fr); justify-content: center; align-items: center; }
  body.tablero-completo .ludo-marco { padding: 5px; }
}
.tablero-pc { opacity: .85; }
body.tablero-completo .tablero-pc { width: 34px; height: 34px; min-height: 34px; font-size: 16px; opacity: .55; }
body.tablero-completo .bolos-tabla-wrap { max-width: 100%; overflow-x: auto; }
@media (orientation: landscape) { body.tablero-completo .billar-tv .billar-lado { padding-top: 50px; } }
@media (orientation: landscape) { .billar-tv { padding: 10px 22px 12px; } body.tablero-completo .billar-tv { padding: 14px 26px 16px; } }

/* ---------- Mini Golf: controles compactos (misma barra de fuerza que el billar) ---------- */
.minigolf-lado { display: flex; align-items: center; gap: 12px; padding: 2px 6px 0; }
@media (max-aspect-ratio: 1/1) { .minigolf-tv > .minigolf-lado { flex: 0 0 auto; width: 100%; } }
@media (orientation: landscape) {
  .minigolf-tv { display: grid; height: auto; grid-template-columns: minmax(0, 1fr) 76px; grid-template-areas: "hud hud" "cancha lado" "ayuda ayuda"; column-gap: 10px; padding: 10px 22px 12px; }
  .minigolf-tv > .minigolf-hud { grid-area: hud; }
  .minigolf-tv > .minigolf-cancha { grid-area: cancha; }
  .minigolf-tv > .arcade-ayuda { grid-area: ayuda; }
  .minigolf-tv .minigolf-lado { grid-area: lado; flex-direction: column; align-self: stretch; contain: size; width: 76px; padding: 0; gap: 10px; justify-content: center; }
  body.tablero-completo .minigolf-tv { padding: 14px 26px 16px; }
  body.tablero-completo .minigolf-tv .minigolf-lado { padding-top: 50px; }
}
@media (orientation: landscape) and (max-height: 560px) { .minigolf-tv > .arcade-ayuda { display: none; } }
/* El botón de pantalla completa (abajo a la izquierda) y el del chat (abajo a la derecha) flotan sobre esta fila. */
@media (max-aspect-ratio: 1/1) { .minigolf-tv > .minigolf-lado { padding: 2px 64px 0; } }
@media (orientation: landscape) {
  .minigolf-tv { grid-template-columns: auto 76px; justify-content: center; }
  body.tablero-completo .minigolf-tv > .minigolf-hud { padding-right: 56px; }
}

/* Billar apaisado: mesa + control de fuerza centrados en la pantalla (igual que Mini Golf). */
@media (orientation: landscape) {
  .billar-tv { grid-template-columns: auto 76px; justify-content: center; }
}

/* ---------- Duendes vs Orcos: bosque encantado (tema, retratos y pantalla completa) ---------- */
.pvz-retrato { display: block; width: 100%; height: 100%; }
.pvz-carta-ico { overflow: visible; background: radial-gradient(circle at 50% 40%, rgba(120, 230, 200, .22), rgba(255, 255, 255, .04)); }
.pvz-chip { border-color: rgba(125, 211, 252, .26); background: linear-gradient(180deg, rgba(10, 34, 46, .88), rgba(4, 14, 24, .9)); backdrop-filter: blur(4px); }
.pvz-chip.pvz-rol.plantas { border-color: rgba(110, 231, 183, .55); background: linear-gradient(180deg, rgba(16, 90, 70, .85), rgba(4, 28, 28, .92)); }
.pvz-chip.pvz-rol.zombis { border-color: rgba(251, 113, 133, .55); background: linear-gradient(180deg, rgba(122, 22, 46, .85), rgba(34, 6, 16, .92)); }
.pvz-chip.recurso { background: linear-gradient(180deg, rgba(113, 84, 14, .78), rgba(32, 22, 4, .92)); border-color: rgba(253, 224, 71, .42); }
.pvz-chip.recurso small { color: #fde68a; }
.pvz-chip.recurso.cerebro { background: linear-gradient(180deg, rgba(122, 22, 46, .75), rgba(34, 6, 16, .93)); border-color: rgba(251, 113, 133, .42); }
.pvz-chip.cerebro small { color: #fecdd3; }
.pvz-chip.cripta { background: linear-gradient(180deg, rgba(120, 53, 15, .85), rgba(30, 12, 4, .94)); border-color: rgba(253, 186, 116, .42); }
.pvz-cripta-barra i { background: linear-gradient(90deg, #f97316, #fde047); }
.pvz-corte.on { background: #86efac; box-shadow: 0 0 8px rgba(120, 255, 170, .75), inset 0 0 0 1px rgba(255, 255, 255, .3); }
.pvz-progreso > i { background: linear-gradient(90deg, #2dd4bf, #86efac, #fde047); }
.pvz-progreso.frenesi > i { background: linear-gradient(90deg, #fb7185, #f97316, #fde047); }
.pvz-progreso .pvz-frenesi-zona { background: repeating-linear-gradient(135deg, rgba(251, 113, 133, .2) 0 5px, rgba(127, 29, 29, .06) 5px 10px); border-left-color: rgba(251, 113, 133, .5); }
.pvz-lienzo canvas { border-color: rgba(125, 211, 252, .3); background: #06121c; box-shadow: 0 18px 42px rgba(0, 0, 0, .5), 0 0 0 1px rgba(10, 50, 60, .6), 0 0 38px rgba(80, 220, 200, .08); }
.pvz-carta { background: linear-gradient(180deg, rgba(14, 56, 62, .9), rgba(4, 18, 26, .94)); border-color: rgba(125, 211, 252, .26); }
.pvz-carta:hover { background: linear-gradient(180deg, rgba(20, 78, 84, .92), rgba(6, 26, 34, .96)); }
.pvz-carta-info small { color: #a7f3d0; }
.pvz-tienda-cab b { color: #ecfeff; }
.pvz-tienda-cab small { color: #a7f3d0; }
.pvz-resultado-resumen { background: rgba(6, 26, 34, .6); border-color: rgba(110, 231, 183, .22); }
.pvz-aviso { background: rgba(4, 18, 30, .92); }

/* Pantalla completa: el lienzo ocupa TODA la pantalla (sin franjas) y los controles flotan encima. */
body.tablero-completo #tablero:has(.pvz-tv) { padding: 0; background: #050e17; overflow: hidden; display: block; }
body.tablero-completo .pvz-tv.pvz-full { position: absolute; inset: 0; display: block; max-width: none; width: 100%; height: 100%; margin: 0; gap: 0; }
body.tablero-completo .pvz-tv.pvz-full .pvz-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
body.tablero-completo .pvz-tv.pvz-full .pvz-lienzo canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; border: 0; border-radius: 0; box-shadow: none; }
body.tablero-completo .pvz-tv.pvz-full .pvz-hud { position: absolute; top: 5px; left: 6px; right: 52px; z-index: 3; gap: 4px; pointer-events: none; flex-wrap: nowrap; }
body.tablero-completo .pvz-tv.pvz-full .pvz-chip { min-height: 26px; padding: 3px 8px; border-radius: 9px; pointer-events: auto; opacity: .94; }
body.tablero-completo .pvz-tv.pvz-full .pvz-chip b { font-size: 12px; }
body.tablero-completo .pvz-tv.pvz-full .pvz-chip small { font-size: 8px; }
body.tablero-completo .pvz-tv.pvz-full .pvz-chip.cripta { margin-left: auto; }
body.tablero-completo .pvz-tv.pvz-full .pvz-progreso { position: absolute; top: 0; left: 0; right: 0; height: 4px; border: 0; border-radius: 0; z-index: 4; background: rgba(2, 10, 16, .55); }
body.tablero-completo .pvz-tv.pvz-full .pvz-progreso > b { display: none; }
body.tablero-completo .pvz-tv.pvz-full .pvz-tienda-cab { display: none; }
body.tablero-completo .pvz-tv.pvz-full .pvz-ayuda { display: none; }
body.tablero-completo .pvz-tv.pvz-full .pvz-tienda { position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%); z-index: 3; max-width: calc(100% - 20px); padding: 4px 6px; gap: 5px; border-radius: 14px; background: rgba(3, 14, 22, .62); backdrop-filter: blur(5px); border: 1px solid rgba(125, 211, 252, .2); overflow-x: auto; }
body.tablero-completo .pvz-tv.pvz-full .pvz-carta { flex: 0 0 auto; min-height: 44px; padding: 4px 8px 4px 5px; grid-template-columns: 34px auto; }
body.tablero-completo .pvz-tv.pvz-full .pvz-carta-ico { width: 34px; height: 34px; }
body.tablero-completo .pvz-tv.pvz-full .pvz-carta-info b { font-size: 9.5px; max-width: 78px; }
body.tablero-completo .pvz-tv.pvz-full .pvz-carta-info small { font-size: 8.5px; }
body.tablero-completo .pvz-tv.pvz-full .pvz-aviso { bottom: 78px; }
@media (max-height: 460px) {
  body.tablero-completo .pvz-tv.pvz-full .pvz-carta-info b { display: none; }
  body.tablero-completo .pvz-tv.pvz-full .pvz-carta { grid-template-columns: 30px auto; min-height: 38px; padding: 3px 7px 3px 4px; }
  body.tablero-completo .pvz-tv.pvz-full .pvz-carta-ico { width: 30px; height: 30px; }
  body.tablero-completo .pvz-tv.pvz-full .pvz-chip small { display: none; }
  body.tablero-completo .pvz-tv.pvz-full .pvz-aviso { bottom: 56px; }
}