/* ---------- Pestañas internas (no es la barra inferior del móvil) -------- */

.salas-tabs {
  display: flex;
  gap: 8px;
  padding: 0 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.salas-tabs::-webkit-scrollbar { display: none; }
.salas-tabs button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--oro-oscuro) 18%, transparent);
  background: color-mix(in srgb, var(--oro-oscuro) 6%, transparent);
  color: var(--texto-2);
  font-family: inherit;
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  transition: all .16s ease;
}
.salas-tabs button:hover { color: var(--texto); border-color: color-mix(in srgb, var(--verde-f) 40%, transparent); }
.salas-tabs button.activo {
  background: linear-gradient(180deg, var(--oro-claro), var(--oro) 50%, var(--oro-oscuro));
  border-color: var(--oro-claro);
  color: var(--oro-tinta);
  box-shadow: 0 0 20px color-mix(in srgb, var(--oro-oscuro) 38%, transparent);
}
.salas-tabs .globo {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  background: var(--rojo);
  color: var(--oro-tinta);
  font-size: 12px;
  font-weight: 800;
}
.salas-tabs button.activo .globo { background: var(--oro-tinta); color: var(--oro); }

/* ---------- Rejilla de juegos ------------------------------------------- */

.juegos-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }

.juego-carta {
  border-radius: var(--r-md);
  padding: 18px;
  background: linear-gradient(165deg, var(--superficie-2), var(--superficie));
  border: 1px solid var(--linea);
  display: flex;
  flex-direction: column;
  gap: 9px;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.juego-carta:hover { border-color: color-mix(in srgb, var(--oro-oscuro) 50%, transparent); transform: translateY(-2px); }
.juego-carta.abierta { border-color: var(--oro); box-shadow: 0 0 26px color-mix(in srgb, var(--oro-oscuro) 25%, transparent); }
.juego-carta.apagada { opacity: .62; }
.juego-carta .juego-ico { font-size: 42px; line-height: 1; filter: drop-shadow(0 8px 14px color-mix(in srgb, var(--texto) 25%, transparent)); }
.juego-carta .juego-nombre { font-weight: 800; font-size: 16px; }
.juego-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.juego-chips .pastilla { padding: 4px 9px; font-size: 12px; letter-spacing: .04em; }
.juego-carta .juego-desc { min-height: 16px; max-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.juego-carta .boton { margin-top: auto; }

/* ---------- Mesa ---------------------------------------------------------- */

.mesa { margin-top: 18px; }
.mesa-error {
  margin-bottom: 14px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--rojo) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--rojo) 50%, transparent);
  color: var(--rojo-claro);
  font-size: 13px;
  font-weight: 700;
}
.mesa-botones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.mesa-resultado {
  min-height: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.mesa-resultado.banner {
  padding: 12px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--oro-oscuro) 6%, transparent);
  border: 1px solid var(--linea);
}
.mesa-pie { margin-top: 16px; text-align: center; }
.mesa-historial { margin-top: 18px; border-top: 1px dashed var(--linea); padding-top: 14px; }
.mesa-historial .lista-simple b.gana { color: var(--verde); }
/* T3: el retorno publicado de la ruleta y los giros que salvó la protección de racha */
#rulRetorno b.gana, #rulHistorial b.gana { color: var(--verde); }
.mesa-historial .lista-simple b.pierde { color: var(--rojo-claro); }

.boton.grande { padding: 14px 30px; font-size: 16px; width: min(320px, 100%); }
.boton.confirmar {
  background: linear-gradient(180deg, var(--rojo), var(--lacre-f));
  border-color: color-mix(in srgb, var(--rojo) 80%, transparent);
  color: var(--oro-tinta);
  box-shadow: 0 0 24px color-mix(in srgb, var(--rojo) 45%, transparent);
  animation: latecfm 1.2s ease-in-out infinite;
}
/* El destello no mueve el botón: el dedo apunta al mismo sitio en los dos toques. */
@keyframes latecfm {
  0%, 100% { box-shadow: 0 0 16px color-mix(in srgb, var(--rojo) 35%, transparent); }
  50% { box-shadow: 0 0 34px color-mix(in srgb, var(--rojo) 80%, transparent); }
}
.boton.cargando { opacity: .7; }

.fichas { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ficha {
  min-width: 58px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 2px dashed color-mix(in srgb, var(--verde-f) 50%, transparent);
  background: var(--hueco);
  color: var(--agua);
  font-family: inherit;
  font-weight: 800;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: transform .12s ease, background .16s ease, color .16s ease;
}
.ficha:hover:not(:disabled) { transform: translateY(-2px); background: color-mix(in srgb, var(--verde-f) 12%, transparent); }
.ficha.activa {
  border-style: solid;
  border-color: var(--oro);
  background: linear-gradient(180deg, var(--oro-claro), var(--oro) 50%, var(--oro-oscuro));
  color: var(--oro-tinta);
  box-shadow: 0 0 18px color-mix(in srgb, var(--oro-oscuro) 40%, transparent);
}
.ficha:disabled { opacity: .35; cursor: not-allowed; }

/* ---------- Tragamonedas (diseño de máquina, T18 b) ------------------------
   Todo el movimiento es CSS o `translate3d` sobre la cinta: ni una animación
   toca ancho, alto ni posición, así el navegador no rehace el diseño de la
   página en ningún cuadro y la máquina va fluida en un portátil normal.
   Alturas en variables porque el JS mide la ficha para saber cuánto desplazar
   la cinta: si el CSS y el JS no coinciden, el símbolo queda a medio rodillo. */

.tragamonedas { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.tragamonedas.maquina { --tm-ficha: 116px; --tm-ancho: 96px; gap: 14px; width: 100%; }

/* Marquesina del jackpot */
.marquesina {
  position: relative;
  text-align: center;
  width: min(460px, 100%);
  padding: 16px 24px 14px;
  border-radius: var(--r) var(--r) 10px 10px;
  background: linear-gradient(180deg, var(--superficie-2), var(--tapete-fondo) 70%);
  border: 2px solid var(--oro-oscuro);
  box-shadow: 0 0 34px color-mix(in srgb, var(--oro-oscuro) 18%, transparent), inset 0 -18px 30px color-mix(in srgb, var(--texto) 25%, transparent);
}
.marquesina .k { position: relative; z-index: 1; }
.marquesina .mini { position: relative; z-index: 1; margin-top: 4px; }
.jackpot-cifra {
  position: relative;
  z-index: 1;
  font-family: var(--fuente-titulos);
  font-size: 40px;
  line-height: 1.05;
  background: linear-gradient(180deg, var(--oro-claro), var(--oro) 45%, var(--oro-oscuro));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 26px color-mix(in srgb, var(--oro-oscuro) 25%, transparent);
}

/* Luces perimetrales: un punto por `<i>`, encendiéndose en cadena con --luz. */
.luces { position: absolute; inset: 6px; pointer-events: none; }
.luces i {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--oro);
  opacity: .28;
  box-shadow: 0 0 8px color-mix(in srgb, var(--oro-oscuro) 80%, transparent);
  animation: parpadeo 1.6s ease-in-out infinite;
  animation-delay: calc(var(--luz) * .09s);
}
@keyframes parpadeo { 0%, 100% { opacity: .2; transform: scale(.85); } 45% { opacity: 1; transform: scale(1.15); } }

/* Reparto de los 18 puntos de la marquesina: 8 arriba, 8 abajo, 1 por lado. */
.marquesina .luces i:nth-child(-n+8) { top: 0; }
.marquesina .luces i:nth-child(1) { left: 0%; }
.marquesina .luces i:nth-child(2) { left: 14%; }
.marquesina .luces i:nth-child(3) { left: 28%; }
.marquesina .luces i:nth-child(4) { left: 42%; }
.marquesina .luces i:nth-child(5) { left: 56%; }
.marquesina .luces i:nth-child(6) { left: 70%; }
.marquesina .luces i:nth-child(7) { left: 84%; }
.marquesina .luces i:nth-child(8) { left: 98%; }
.marquesina .luces i:nth-child(n+9):nth-child(-n+16) { bottom: 0; }
.marquesina .luces i:nth-child(9)  { left: 0%; }
.marquesina .luces i:nth-child(10) { left: 14%; }
.marquesina .luces i:nth-child(11) { left: 28%; }
.marquesina .luces i:nth-child(12) { left: 42%; }
.marquesina .luces i:nth-child(13) { left: 56%; }
.marquesina .luces i:nth-child(14) { left: 70%; }
.marquesina .luces i:nth-child(15) { left: 84%; }
.marquesina .luces i:nth-child(16) { left: 98%; }
.marquesina .luces i:nth-child(17) { left: 0; top: 50%; }
.marquesina .luces i:nth-child(18) { right: 0; top: 50%; }

/* Cuerpo de la máquina: los rodillos entre dos tiras de luces. */
.tm-caja {
  position: relative;
  padding: 14px 26px;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--tapete-fieltro-1), var(--tapete-fondo));
  border: 2px solid var(--oro-oscuro);
  box-shadow: var(--sombra-corta), inset 0 0 40px color-mix(in srgb, var(--texto) 27.5%, transparent);
}
.luces.laterales i:nth-child(-n+12) { left: 0; }
.luces.laterales i:nth-child(n+13)  { right: 0; }
.luces.laterales i:nth-child(1),  .luces.laterales i:nth-child(13) { top: 4%; }
.luces.laterales i:nth-child(2),  .luces.laterales i:nth-child(14) { top: 12%; }
.luces.laterales i:nth-child(3),  .luces.laterales i:nth-child(15) { top: 20%; }
.luces.laterales i:nth-child(4),  .luces.laterales i:nth-child(16) { top: 28%; }
.luces.laterales i:nth-child(5),  .luces.laterales i:nth-child(17) { top: 36%; }
.luces.laterales i:nth-child(6),  .luces.laterales i:nth-child(18) { top: 44%; }
.luces.laterales i:nth-child(7),  .luces.laterales i:nth-child(19) { top: 52%; }
.luces.laterales i:nth-child(8),  .luces.laterales i:nth-child(20) { top: 60%; }
.luces.laterales i:nth-child(9),  .luces.laterales i:nth-child(21) { top: 68%; }
.luces.laterales i:nth-child(10), .luces.laterales i:nth-child(22) { top: 76%; }
.luces.laterales i:nth-child(11), .luces.laterales i:nth-child(23) { top: 84%; }
.luces.laterales i:nth-child(12), .luces.laterales i:nth-child(24) { top: 92%; }

.rodillos-juego {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 16px;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--superficie), var(--tapete-fondo));
  border: 3px solid var(--oro-oscuro);
  box-shadow: inset 0 0 34px color-mix(in srgb, var(--texto) 35%, transparent), 0 0 26px color-mix(in srgb, var(--oro-oscuro) 18%, transparent);
  transition: box-shadow .3s ease;
}
.rodillos-juego.gana { box-shadow: inset 0 0 34px color-mix(in srgb, var(--texto) 25%, transparent), 0 0 46px color-mix(in srgb, var(--verde-f) 45%, transparent); }
.rodillos-juego.jackpot-gordo { animation: jackpotazo 1.2s ease-in-out 2; }
@keyframes jackpotazo {
  0%, 100% { box-shadow: inset 0 0 34px color-mix(in srgb, var(--texto) 25%, transparent), 0 0 40px color-mix(in srgb, var(--oro-oscuro) 35%, transparent); }
  50%      { box-shadow: inset 0 0 20px color-mix(in srgb, var(--texto) 15%, transparent), 0 0 90px color-mix(in srgb, var(--oro-oscuro) 90%, transparent); }
}
/* Suspenso del "casi": lo decide el servidor, la caja solo lo cuenta. */
.rodillos-juego.casi { animation: tembleque .28s linear infinite; }
@keyframes tembleque { 0%, 100% { transform: translate3d(0, 0, 0); } 25% { transform: translate3d(-2px, 0, 0); } 75% { transform: translate3d(2px, 0, 0); } }

/* Línea de pago: la raya que cruza los tres rodillos por el centro. */
.linea-pago {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 50%;
  height: 2px;
  transform: translateY(-1px);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--oro-oscuro) 75%, transparent), transparent);
  z-index: 2;
  pointer-events: none;
}

.rodillo {
  position: relative;
  width: var(--tm-ancho, 96px);
  height: var(--tm-ficha, 116px);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--cg-superficie-alta), var(--cg-papel-3));
  border: 2px solid var(--cg-bronce-osc);
  overflow: hidden;
  box-shadow: inset 0 -14px 22px color-mix(in srgb, var(--texto) 14%, transparent), inset 0 14px 18px color-mix(in srgb, var(--cg-superficie-alta) 50%, transparent);
}
/* Sombra de tambor: da la sensación de cilindro sin una sola imagen. */
.rodillo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tapete-fondo) 38%, transparent), transparent 32%, transparent 68%, color-mix(in srgb, var(--tapete-fondo) 38%, transparent));
}
.rodillo.gana { border-color: var(--verde); box-shadow: 0 0 26px color-mix(in srgb, var(--verde-f) 70%, transparent), inset 0 0 18px color-mix(in srgb, var(--verde-f) 30%, transparent); }
.rodillo.gana .tm-ficha { animation: destello .5s ease-in-out 3; }
@keyframes destello { 0%, 100% { filter: none; } 50% { filter: brightness(1.6) saturate(1.3); } }
.rodillo.para { animation: frenazo .44s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes frenazo { 0% { transform: translateY(-10px); } 60% { transform: translateY(4px); } 100% { transform: none; } }

.cinta { will-change: transform; }
.cinta.veloz { filter: blur(1.1px); }

.tm-ficha {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--tm-ficha, 116px);
  padding: 0 6px;
  font-family: var(--fuente-titulos);
  font-size: 38px;
  line-height: 1;
  letter-spacing: .02em;
  text-align: center;
  color: var(--cg-texto);
}
.tm-ficha.largo { font-size: 28px; }
.tm-ficha.muylargo { font-size: 20px; }
/* T94 (QA del 8-sep): a 390 px "Python", "PowerBI" y "BEKY" se partían en dos líneas dentro del
   rodillo —`overflow-wrap: anywhere` partía la palabra en cuanto no cabía—. El nombre del curso es
   el símbolo: partido no se lee. No se parte nunca; lo que cede es el ancho del rodillo, que en el
   móvil tenía 66 px cuando la fila entera dispone de ~110 px por rodillo. */
.tm-ficha .tm-txt {
  display: block;
  max-width: 100%;
  white-space: nowrap;
}
/* Colores de los cursos GTA. El nombre del curso se lee, no se adivina por un icono. */
.tm-ficha[data-tono="sap"]     { color: var(--cg-ok); text-shadow: 0 1px 0 color-mix(in srgb, var(--cg-superficie-alta) 60%, transparent); }
.tm-ficha[data-tono="powerbi"] { color: var(--cg-aviso); text-shadow: 0 1px 0 color-mix(in srgb, var(--cg-superficie-alta) 60%, transparent); }
.tm-ficha[data-tono="excel"]   { color: var(--cg-ok); text-shadow: 0 1px 0 color-mix(in srgb, var(--cg-superficie-alta) 60%, transparent); }
.tm-ficha[data-tono="python"]  { color: var(--cg-texto); text-shadow: 0 1px 0 color-mix(in srgb, var(--cg-superficie-alta) 60%, transparent); }
.tm-ficha[data-tono="notion"]  { color: var(--cg-texto); text-shadow: 0 1px 0 color-mix(in srgb, var(--cg-superficie-alta) 60%, transparent); }
.tm-ficha[data-tono="ia"]      { color: var(--cg-mal); text-shadow: 0 1px 0 color-mix(in srgb, var(--cg-superficie-alta) 60%, transparent); }
.tm-ficha[data-tono="beky"]    { color: var(--cg-bronce-osc); text-shadow: 0 1px 0 color-mix(in srgb, var(--cg-superficie-alta) 75%, transparent); }
.tm-ficha[data-tono="t1"] { color: var(--cg-mal); }
.tm-ficha[data-tono="t2"] { color: var(--cg-ok); }
.tm-ficha[data-tono="t3"] { color: var(--cg-verde); }
.tm-ficha[data-tono="t4"] { color: var(--cg-aviso); }
.tm-ficha[data-tono="t5"] { color: var(--cg-bronce-osc); }
.tm-ficha[data-tono="t6"] { color: var(--cg-texto); }

/* Mandos: el botón grande rebota al pulsarlo, como una palanca de verdad. */
.tm-mandos { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; }
.boton.palanca { box-shadow: 0 6px 0 color-mix(in srgb, var(--texto) 17.5%, transparent), 0 0 28px color-mix(in srgb, var(--oro-oscuro) 40%, transparent); }
.boton.palanca:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 color-mix(in srgb, var(--texto) 17.5%, transparent), 0 0 20px color-mix(in srgb, var(--oro-oscuro) 35%, transparent); }
.boton.verde {
  background: color-mix(in srgb, var(--verde-f) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--verde-f) 55%, transparent);
  color: var(--verde);
}
.boton.verde:hover:not(:disabled) { background: color-mix(in srgb, var(--verde-f) 24%, transparent); }
.pastilla.grande { font-size: 15px; padding: 8px 16px; }
/* ---------- Rasca y gana (T19 b) ------------------------------------------
   El billete va sobre el mismo paño de casino que el blackjack: BEKI lo
   presenta, el arco publica el retorno y las nueve casillas se rascan de
   verdad sobre un `canvas`. Todo el movimiento es `transform`/`opacity`, así
   la mesa no rehace el diseño de la página mientras el dedo raspa. */

.rasca { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.rasca-cab { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; text-align: center; }

/* El billete: papel crema con filo dorado y un troquelado a los lados. */
.rasca-billete {
  position: relative;
  margin: 0 auto;
  padding: 14px 16px 10px;
  width: max-content;
  max-width: 100%;
  border-radius: var(--r);
  border: 2px solid var(--oro-oscuro);
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--tapete-fondo) 5%, transparent) 0 2px, transparent 2px 6px),
    linear-gradient(160deg, var(--superficie-2), var(--superficie));
  box-shadow: 0 14px 26px color-mix(in srgb, var(--texto) 22.5%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--oro-oscuro) 18%, transparent);
}
.rasca-billete.entra { animation: rascaEntra .5s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes rascaEntra {
  0%   { transform: translate3d(120px, -70px, 0) rotate(11deg) scale(.9); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
.rasca-titulo {
  font-family: var(--fuente-titulos);
  letter-spacing: .12em;
  font-size: 14px;
  color: var(--oro-claro);
  text-align: center;
  margin-bottom: 8px;
}
.rasca-marca {
  margin-top: 8px;
  text-align: center;
  font-family: var(--fuente-titulos);
  letter-spacing: .22em;
  font-size: 12px;
  color: color-mix(in srgb, var(--oro-oscuro) 45%, transparent);
}
.rasca-rejilla {
  display: grid;
  grid-template-columns: repeat(3, 88px);
  gap: 8px;
  /* El dedo rasca en diagonal: sin esto el navegador se lleva el gesto como scroll. */
  touch-action: none;
}
.rasca-celda {
  position: relative;
  height: 88px;
  padding: 0;
  border-radius: 10px;
  border: 2px solid var(--cg-bronce-osc);
  background: linear-gradient(160deg, var(--cg-superficie-alta), var(--cg-papel-3));
  color: var(--cg-texto);
  font-family: var(--fuente-titulos);
  font-size: 26px;
  cursor: crosshair;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.rasca-celda:disabled, .rasca-celda.vista { cursor: default; }
/* El papel dorado que se raspa. Encima de la casilla y sin eventos propios:
   los gestos los escucha la rejilla entera, para poder arrastrar de una
   casilla a la siguiente sin soltar. */
.rasca-foil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-radius: 8px;
}
.rasca-celda.vista { animation: destapa .3s ease; }
.rasca-celda.premiada {
  background: linear-gradient(160deg, var(--oro-claro), var(--oro-oscuro));
  border-color: var(--oro);
  box-shadow: 0 0 20px color-mix(in srgb, var(--oro-oscuro) 55%, transparent);
  animation: latido 1s ease-in-out 2;
}
@keyframes destapa { 0% { transform: rotateY(70deg); opacity: .3; } 100% { transform: none; opacity: 1; } }
.rasca-valor { padding: 0 4px; text-align: center; font-size: 26px; word-break: break-word; }

/* ---------- Cartas y mesa de blackjack (T19 a) ----------------------------
   La carta va en dos caras dentro de `.carta-giro`: el envoltorio hace el
   reparto (la carta viene del zapato) y el interior el giro 3D al voltear.
   Van separados a propósito: las dos cosas son `transform` y, si compartieran
   elemento, la última en aplicarse borraría a la otra.
   Todo el movimiento es `transform` y `opacity` —nada de ancho, alto ni
   posición—, así el navegador no rehace el diseño de la página en ningún
   cuadro y la mesa va a 60 fps en el portátil de cualquiera. */

.bj, .hilo { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.bj-mesa { width: 100%; }

/* El paño: teal profundo, filo dorado, foco de luz arriba y textura de fieltro
   hecha con un degradado repetido (ni una imagen que descargar). */
.bj-pano {
  position: relative;
  width: 100%;
  padding: 20px 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: var(--r);
  border: 3px solid var(--oro-oscuro);
  background:
    radial-gradient(680px 300px at 50% -12%, color-mix(in srgb, var(--verde-f) 16%, transparent), transparent 70%),
    radial-gradient(520px 260px at 50% 118%, color-mix(in srgb, var(--tapete-fondo) 38%, transparent), transparent 72%),
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--oro-oscuro) 2.1%, transparent) 0 3px, transparent 3px 7px),
    linear-gradient(180deg, var(--tapete-fieltro-1), var(--tapete-fieltro-2) 62%, var(--tapete-fieltro-3));
  box-shadow: inset 0 0 60px color-mix(in srgb, var(--texto) 27.5%, transparent), 0 18px 34px color-mix(in srgb, var(--texto) 20%, transparent);
}
.bj-pano.vacio { min-height: 210px; justify-content: center; }
.bj-fila { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.bj-lado { flex: 1 1 240px; min-width: 0; text-align: center; }
.bj-reglas { text-align: center; max-width: 56ch; margin: 0 auto; }

/* El zapato, arriba a la derecha: de ahí sale cada carta que se reparte. */
.bj-zapato {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 56px;
  height: 44px;
  border-radius: 7px var(--r) var(--r) 7px;
  background: linear-gradient(160deg, var(--tapete-fieltro-1), var(--tapete-fondo));
  border: 2px solid var(--oro-oscuro);
  transform: rotate(-8deg);
  box-shadow: var(--sombra-corta);
}
.bj-zapato i { position: absolute; left: 6px; width: 40px; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--texto) 70%, transparent); }
.bj-zapato i:nth-child(1) { top: 7px; }
.bj-zapato i:nth-child(2) { top: 13px; }
.bj-zapato i:nth-child(3) { top: 19px; }
.bj-zapato-boca { position: absolute; left: 5px; bottom: 5px; width: 44px; height: 9px; border-radius: 5px; background: color-mix(in srgb, var(--tapete-fondo) 60%, transparent); }

/* BEKI de crupier: la mascota reparte, piensa, celebra o se encoge de hombros.
   El gesto lo pone el JS con `data-gesto` cuando ya pasó lo que cuenta. */
.bj-crupier { width: 132px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bj-beki { width: 66px; height: 66px; filter: drop-shadow(0 8px 14px color-mix(in srgb, var(--texto) 25%, transparent)); }
.bj-beki[data-gesto="espera"]  { animation: bekiRespira 3.6s ease-in-out infinite; }
.bj-beki[data-gesto="reparte"] { animation: bekiReparte .5s ease-in-out 2; }
.bj-beki[data-gesto="piensa"]  { animation: bekiPiensa 1.1s ease-in-out infinite; }
.bj-beki[data-gesto="celebra"] { animation: bekiCelebra .5s cubic-bezier(.2, 1.6, .4, 1) 3; }
.bj-beki[data-gesto="encoge"]  { animation: bekiEncoge .8s ease-in-out 2; }
@keyframes bekiRespira { 0%, 100% { transform: none; } 50% { transform: translate3d(0, -3px, 0); } }
@keyframes bekiReparte { 0%, 100% { transform: none; } 40% { transform: translate3d(12px, -5px, 0) rotate(9deg); } }
@keyframes bekiPiensa  { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes bekiCelebra { 0%, 100% { transform: none; } 45% { transform: translate3d(0, -10px, 0) scale(1.06); } }
@keyframes bekiEncoge  { 0%, 100% { transform: none; } 50% { transform: translate3d(0, 4px, 0) scale(.94) rotate(-3deg); } }
.bj-globo {
  position: relative;
  max-width: 132px;
  padding: 6px 10px;
  border-radius: var(--r);
  background: color-mix(in srgb, var(--tapete-fondo) 85%, transparent);
  border: 1px solid color-mix(in srgb, var(--oro-oscuro) 35%, transparent);
  color: var(--texto-2);
  font-size: 12px;
  line-height: 1.25;
  text-align: center;
}
.bj-globo::after {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-bottom-color: color-mix(in srgb, var(--oro-oscuro) 35%, transparent);
}

/* El arco de la mesa: la raya curva con las reglas de la casa, como en el paño. */
.bj-arco {
  border-top: 2px solid color-mix(in srgb, var(--oro-oscuro) 45%, transparent);
  border-radius: 50% 50% 0 0 / 34px 34px 0 0;
  padding-top: 8px;
  text-align: center;
}
.bj-arco span {
  font-family: var(--fuente-titulos);
  letter-spacing: .09em;
  font-size: 14px;
  color: var(--oro-claro);
  opacity: .85;
}

.bj-total { font-family: var(--fuente-titulos); font-size: 22px; color: var(--oro-claro); }
.bj-total.pasado { color: var(--rojo-claro); }
.pastilla.chica { font-size: 12px; padding: 3px 9px; }

/* Fichas de casino: en esta mesa son redondas, con el filo a rayas. Solo aquí,
   para no tocar las mesas que ya estaban cerradas. */
.bj-mesa .ficha {
  width: 62px;
  height: 62px;
  min-width: 62px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 3px dashed color-mix(in srgb, var(--verde-f) 55%, transparent);
  box-shadow: 0 6px 12px color-mix(in srgb, var(--texto) 22.5%, transparent), inset 0 0 0 4px color-mix(in srgb, var(--oro-oscuro) 7.5%, transparent);
}
.bj-mesa .ficha.activa { border-style: dashed; box-shadow: 0 0 20px color-mix(in srgb, var(--oro-oscuro) 45%, transparent), inset 0 0 0 4px color-mix(in srgb, var(--cg-superficie-alta) 22%, transparent); }
.bj-mesa .ficha:hover:not(:disabled) { transform: translateY(-3px) rotate(-4deg); }

/* Atajo de teclado impreso en el botón: la mesa se juega sin soltar el teclado. */
.boton kbd {
  margin-left: 8px;
  padding: 1px 6px;
  border: 1px solid currentColor;
  border-radius: 5px;
  font-family: inherit;
  font-size: 12px;
  opacity: .55;
}

.cartas { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; min-height: 96px; }
.carta { position: relative; width: 64px; height: 92px; perspective: 800px; }
.carta.reparte { animation: reparte .42s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--n, 0) * .16s); }
@keyframes reparte {
  0%   { transform: translate3d(130px, -92px, 0) rotate(16deg) scale(.86); opacity: 0; }
  55%  { opacity: 1; }
  100% { transform: none; opacity: 1; }
}
.carta-giro {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.2, .8, .3, 1);
}
.carta-giro.tapada { transform: rotateY(180deg); }
.cara {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 8px 16px color-mix(in srgb, var(--texto) 22.5%, transparent);
}
.cara.frente {
  background: linear-gradient(160deg, var(--cg-superficie-alta), var(--cg-papel-3));
  border: 1px solid var(--cg-bronce);
  color: var(--cg-texto);
}
.carta.roja .cara.frente { color: var(--cg-caida); }
/* El dorso lleva la moneda de BEKI: el naipe es de Global Party, no de una baraja cualquiera. */
.cara.dorso {
  transform: rotateY(180deg);
  background: repeating-linear-gradient(45deg, var(--sup-3) 0 6px, var(--tapete-fondo) 6px 12px);
  border: 1px solid var(--oro-oscuro);
}
.cara.dorso img { width: 34px; height: 34px; opacity: .92; filter: drop-shadow(0 2px 5px color-mix(in srgb, var(--texto) 27.5%, transparent)); }
.carta .rango {
  position: absolute; top: 5px; left: 7px;
  font-family: var(--fuente-titulos);
  font-size: 19px;
  line-height: 1;
}
.carta .rango.pie { top: auto; left: auto; bottom: 5px; right: 7px; transform: rotate(180deg); }
.carta .palo { font-size: 30px; line-height: 1; }
.carta.vacia {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--linea);
  border-radius: 9px;
  color: var(--apagado);
  perspective: none;
}

/* Resultado: entra cuando la última carta ya aterrizó (--espera lo calcula el JS). */
.bj-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--linea);
  background: color-mix(in srgb, var(--tapete-fondo) 60%, transparent);
  text-align: center;
  animation: bannerEntra .45s cubic-bezier(.2, 1.4, .4, 1) both;
  animation-delay: var(--espera, 0ms);
}
@keyframes bannerEntra { 0% { transform: translate3d(0, 10px, 0) scale(.94); opacity: 0; } 100% { transform: none; opacity: 1; } }
.bj-banner-txt { font-family: var(--fuente-titulos); font-size: 30px; line-height: 1; }
.bj-banner.gana { border-color: color-mix(in srgb, var(--verde-f) 50%, transparent); background: color-mix(in srgb, var(--verde-f) 10%, transparent); }
.bj-banner.gana .bj-banner-txt { color: var(--verde); }
.bj-banner.blackjack {
  border-color: var(--oro);
  background: radial-gradient(420px 180px at 50% 120%, color-mix(in srgb, var(--oro-oscuro) 28%, transparent), color-mix(in srgb, var(--tapete-fondo) 60%, transparent) 70%);
  box-shadow: 0 0 40px color-mix(in srgb, var(--oro-oscuro) 30%, transparent);
}
.bj-banner.blackjack .bj-banner-txt {
  font-size: 42px;
  color: var(--oro-claro);
  text-shadow: 0 0 26px color-mix(in srgb, var(--oro-oscuro) 50%, transparent);
  animation: latido 1s ease-in-out 3;
}
.bj-banner.empata .bj-banner-txt { color: var(--oro-claro); }
.bj-banner.pierde { border-color: color-mix(in srgb, var(--rojo) 28%, transparent); }
.bj-banner.pierde .bj-banner-txt { color: var(--rojo-claro); }

/* ---------- Mayor o menor (T19 b) -----------------------------------------
   La misma mesa: paño, zapato y BEKI. La carta grande llega tapada y se
   voltea; el marcador de racha son fichas que se encienden, porque un número
   solo no se siente como una racha. */

.hilo-cartas { display: flex; gap: 18px; align-items: flex-end; justify-content: center; flex-wrap: wrap; }
.hilo-anterior { text-align: center; opacity: .55; }
.hilo-anterior .carta { width: 52px; height: 76px; }
.hilo-anterior .carta .palo { font-size: 22px; }
.hilo-actual { text-align: center; }
.hilo-actual .carta { width: 96px; height: 138px; }
.hilo-actual .carta .rango { font-size: 24px; }
.hilo-actual .carta .palo { font-size: 46px; }
.hilo-actual .cara.dorso img { width: 46px; height: 46px; }
.hilo-anterior .k, .hilo-actual .k { margin-bottom: 6px; }

.hilo-marcador {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: center;
  justify-content: center;
  padding-top: 4px;
}
.hilo-dato { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hilo-dato .num { font-family: var(--fuente-titulos); font-size: 26px; line-height: 1; }
.hilo-dato .num.oro { color: var(--oro-claro); }
.hilo-pips { display: flex; gap: 3px; margin-top: 3px; }
.hilo-pips i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--texto) 16%, transparent);
  transition: background .25s ease, box-shadow .25s ease;
}
.hilo-pips i.on { background: var(--oro); box-shadow: 0 0 8px color-mix(in srgb, var(--oro-oscuro) 70%, transparent); }
.hilo-retiro { text-align: center; max-width: 52ch; }
.hilo-retiro b { color: var(--oro); }