:root {
  --color-fondo: #0F172A;
  --color-tarjeta: #1E293B;
  --color-dorado: #FBBF24;
  --color-turquesa: #06B6D4;
  --color-texto: #F1F5F9;
  --color-texto-tenue: #94A3B8;
  --color-error: #EF4444;
  --color-exito: #22C55E;

  --tema-madera-clara: #B08968;
  --tema-madera-oscura: #7F5539;
  --tema-marmol: #E5E7EB;
  --tema-neon-fondo: #120022;

  --radio-xl: 24px;
  --radio-lg: 16px;

  /* Inclinación 3D de las fichas sobre la mesa (ver .lienzo-tablero). Si en
     un dispositivo real se ve exagerada o los pips de las filas más
     alejadas cuestan de leer, bajar este valor (ej: 6deg) es el único
     cambio necesario -- no hay que tocar la lógica de posiciones en sala.js. */
  --tablero-inclinacion: 9deg;

  /* Grosor (profundidad Z) de las fichas 3D del tablero -- ~0.4-0.5 del
     lado corto de una ficha real (21px), así que 9px es proporcional.
     Si en un dispositivo real se ve pesado (muchas fichas x 6 caras cada
     una) o el 3D se ve exagerado, bajar esto a 5-6px o directamente a 0
     (aplana las fichas sin tocar el resto del CSS) es el único ajuste
     necesario -- no toca sala.js. */
  --tile-grosor: 15px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[x-cloak] { display: none !important; }

/* Fuera del "marco" del teléfono (visible en pantallas anchas de escritorio) */
html {
  background: #05070f;
  overflow: hidden;          /* nunca scroll global (técnica de ajuste a pantalla) */
  height: 100%;
}

body {
  margin: 0;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: 'Nunito', -apple-system, system-ui, sans-serif;
  overscroll-behavior: none; /* evita el "rebote" del navegador dentro del WebView */
  user-select: none;        /* evita selección de texto accidental al arrastrar fichas */
  overflow: hidden;         /* el contenido se ajusta al alto exacto de la pantalla, sin scroll */

  /* Mobile-first SIEMPRE: en pantallas anchas (desktop/tablet), el juego
     queda centrado como si fuera un teléfono, en vez de estirarse a lo
     ancho. En pantallas angostas (celular real) esto no se nota, porque
     el viewport ya es más chico que el máximo permitido. */
  max-width: 480px;
  margin: 0 auto;
  /* 100dvh = "dynamic viewport height": respeta las barras del navegador
     móvil (que aparecen/desaparecen), a diferencia de 100vh que puede quedar
     más alto que la pantalla visible y causar scroll. */
  height: 100vh;
  height: 100dvh;
  box-shadow: 0 0 60px rgba(0,0,0,.6);
}

.pantalla {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 24px;
}

/* Fondo del login: tu imagen de referencia (mesa sci-fi con jugadores),
   oscurecida para que la tarjeta de login se lea bien encima. */
body.fondo-dominos {
  background:
    linear-gradient(180deg, rgba(5,7,15,.55) 0%, rgba(5,7,15,.75) 100%),
    url('../images/fondo_login.jpg');
  background-size: cover;
  background-position: center;
}

.pantalla-centrada {
  justify-content: center;
  align-items: center;
  text-align: center;
}

.titulo-app {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 2px;
  margin: 16px 0 4px;
}

.subtitulo {
  color: var(--color-texto-tenue);
  margin-bottom: 48px;
}

/* Botones grandes, pensados para pulgar (spec: "1 mano") */
.boton-grande {
  display: block;
  width: 100%;
  padding: 20px 24px;
  border-radius: var(--radio-xl);
  border: none;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  margin-bottom: 16px;
}

.boton-dorado { background: var(--color-dorado); color: var(--color-fondo); }
.boton-turquesa-outline {
  background: transparent;
  border: 2px solid var(--color-turquesa);
  color: var(--color-turquesa);
}

.boton-icono-flotante {
  background: var(--color-tarjeta);
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  color: var(--color-error);
  font-size: 18px;
}

/* ---------- Sala de juego ---------- */

/* Barra superior de la sala: antes era una fila "al aire" sobre el fondo;
   ahora es un panel propio con el mismo lenguaje glass del resto de la
   app -- organiza visualmente perfil, opciones, turno y marcador. */
.barra-sala {
  background: linear-gradient(165deg, rgba(255,255,255,.05), transparent 45%), rgba(10,16,28,.55);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 5px 10px;
  margin: 3px 3px 5px;
  box-shadow: 0 4px 12px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.05) inset;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.barra-superior {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 4px;
}

.marcador-tarjeta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--color-tarjeta);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 4px 8px;
  flex-shrink: 0;
}
.marcador-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
}
.marcador-letra { width: 14px; text-align: center; }
.marcador-letra.marcador-a { color: var(--color-dorado); }
.marcador-letra.marcador-b { color: var(--color-turquesa); }
.marcador-valor { color: var(--color-texto); }

.fila-avatares {
  display: flex;
  justify-content: space-evenly;
  padding: 8px 0;
}
.avatar-jugador { text-align: center; font-size: 11px; }

/* ---------- Mesa completa: el tablero ocupa TODO el ancho; los avatares
   flotan ENCIMA de su borde (arriba/izquierda/derecha), como una mesa real ---------- */
.puesto-tablero {
  position: relative;
  flex: 1;
  min-height: 0;
  margin: 54px 58px 2px;
  perspective: 900px;
}

.avatar-flotante {
  position: absolute;
  z-index: 10;
  text-align: center;
  width: 74px;
}
.avatar-arriba { top: -54px; left: 50%; transform: translateX(-50%); width: auto; }
.avatar-izquierda { left: -56px; top: 35%; transform: translateY(-50%); }
.avatar-derecha { right: -56px; top: 35%; transform: translateY(-50%); }

/* Tarjeta del jugador de ENFRENTE (compañero): antes era solo un avatar
   flotando suelto, sin fondo, pegado casi arriba del borde de la mesa --
   se veía "entrando" en el tablero. Ahora es un panel propio (mismo
   lenguaje que el resto de tarjetas de la app), con su propio espacio
   reservado arriba de la mesa (.puesto-tablero ya deja 54px libres). */
.jugador-card {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(165deg, rgba(255,255,255,.06), transparent 40%), var(--color-tarjeta);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 4px 10px 4px 4px;
  box-shadow: 0 6px 14px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.06) inset;
  position: relative;
  overflow: hidden;
}
/* Franja de acento con el color del equipo -- identifica de un vistazo a
   qué equipo pertenece cada jugador, como una tarjeta deportiva. */
.jugador-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--color-dorado);
}
.jugador-card.equipo-b::before { background: var(--color-turquesa); }
.jugador-card-info { text-align: left; }
.jugador-card .etiqueta-flotante {
  text-shadow: none;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.jugador-card .contador-fichas-pill { margin-top: 1px; }

/* Variante vertical: para los rivales de los costados, donde el margen
   lateral es angosto -- avatar arriba, nombre+contador abajo, en vez de
   la fila horizontal que usa la tarjeta de arriba. */
.jugador-card-vertical {
  flex-direction: column;
  gap: 3px;
  padding: 7px 7px 6px;
  width: 76px;
}
.jugador-card-info-vertical {
  text-align: center;
  width: 100%;
}
.jugador-card-info-vertical .etiqueta-flotante {
  max-width: 100%;
  margin: 0 auto;
}
.jugador-card-info-vertical .contador-fichas-pill {
  display: inline-flex;
  margin: 3px auto 0;
}

.etiqueta-flotante {
  font-size: 9px;
  font-weight: 800;
  margin-top: 1px;
  max-width: 58px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
}

/* Las fichas-dorso (el abanico de piezas boca-abajo) se quitaron: en vez
   de simular fichas físicas alrededor de cada avatar, ahora se muestra
   solo un contador limpio -- más legible de un vistazo y más parecido a
   la referencia (imagen 2), que usa un indicador numérico simple en vez
   de iconos de fichas alrededor del jugador. */
.contador-fichas-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 800;
  color: var(--color-texto);
  background: rgba(8,14,24,.55);
  border: 1px solid rgba(6,182,212,.35);
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.contador-fichas-pill svg { color: var(--color-turquesa); flex-shrink: 0; }

/* Tensión visual cuando el jugador EN TURNO se está quedando sin tiempo:
   el anillo pasa de dorado a rojo con un parpadeo más agresivo, directo
   sobre su avatar -- antes solo se veía en la barra de arriba, lejos del
   avatar que realmente importa mirar en ese momento. */
/* El anillo alrededor del avatar ES el temporizador ahora -- ya no hay una
   barra lineal genérica en la parte de arriba, lejos de a quién hay que
   mirar. sala.js pone la variable --progreso-anillo (0 a 1, calculada
   igual que antes en _actualizarProgresoTimer) inline en cada avatar; acá
   solo se dibuja: un anillo (con máscara radial-gradient para que sea un
   aro, no un pie relleno) que se va vaciando en tiempo real. Azul normal,
   rojo cuando queda poco tiempo -- directo sobre el jugador que hay que
   mirar, sea cual sea. */
.avatar-circulo.turno-activo {
  transform: scale(1.08);
}
.avatar-circulo.turno-activo::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  z-index: -1;
  /* Degradado eléctrico cian->magenta en vez de un turquesa plano -- se
     pidió un color "futurista que resalte", este barrido de tono da esa
     sensación de energía/escáner sin ser tan saturado como para volver a
     saturar toda la escena (sigue siendo solo ESTE anillo). */
  background: conic-gradient(from 0deg, #22d3ee calc(var(--progreso-anillo, 1) * 360deg), rgba(255,255,255,.10) 0deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  filter: drop-shadow(0 0 4px rgba(34,211,238,.75)) drop-shadow(0 0 8px rgba(168,85,247,.35));
  transition: background .1s linear;
}
.avatar-circulo.turno-critico::before {
  background: conic-gradient(var(--color-error) calc(var(--progreso-anillo, 1) * 360deg), rgba(255,255,255,.10) 0deg);
  filter: drop-shadow(0 0 4px rgba(239,68,68,.65));
  animation: parpadeo-anillo-critico .6s ease-in-out infinite;
}
@keyframes parpadeo-anillo-critico {
  0%, 100% { opacity: 1; }
  50% { opacity: .7; }
}

.avatar-circulo {
  width: 58px; height: 58px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  color: var(--color-fondo);
  margin: 0 auto 2px;
  position: relative;
  transition: transform .2s;
  box-shadow:
    0 2px 0 rgba(255,255,255,.35) inset,
    0 -3px 6px rgba(0,0,0,.25) inset,
    0 4px 10px rgba(0,0,0,.4);
  border: 2px solid rgba(255,255,255,.15);
}
/* El recorte circular de la FOTO vive en este wrapper interno, NO en
   .avatar-circulo -- antes .avatar-circulo tenía overflow:hidden puesto
   inline en el HTML, y como el anillo de turno (::before) se dibuja MÁS
   GRANDE que el círculo (inset negativo, a propósito, para que sobresalga
   y se note), ese overflow:hidden se lo comía por completo. Por eso "no se
   veía": no era un bug de color ni de z-index, el propio contenedor lo
   estaba recortando. */
.avatar-circulo-img {
  width: 100%; height: 100%;
  border-radius: 50%;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.avatar-circulo.equipo-a { background: linear-gradient(160deg, #FDE68A, var(--color-dorado)); }
.avatar-circulo.equipo-b { background: linear-gradient(160deg, #67E8F9, var(--color-turquesa)); }
.icono-robot {
  display: block;
  margin: auto;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.4));
}
.avatar-circulo.es-bot {
  background: linear-gradient(160deg, #818cf8, #4f46e5) !important;
  box-shadow:
    0 2px 0 rgba(255,255,255,.35) inset,
    0 -3px 6px rgba(0,0,0,.25) inset,
    0 0 12px rgba(129,140,248,.55),
    0 4px 10px rgba(0,0,0,.4);
}
.etiqueta-bot {
  display: inline-block;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .5px;
  color: #4f46e5;
  background: #e0e7ff;
  border-radius: 6px;
  padding: 1px 5px;
  margin-top: 1px;
}

/* ============================================================
   ARO DE IDENTIDAD (pedido: aros más pronunciados y de distinto color
   por jugador). Cada avatar recibe --color-aro inline desde sala.js
   (colorAnilloJugador, estable por asiento norte/este/sur/oeste). Es un
   aro GRUESO y con glow, dibujado con box-shadow para que quede POR
   FUERA del círculo sin que el overflow interno de la foto lo recorte
   (el ::before del turno se sigue dibujando encima como temporizador).
   ============================================================ */
.avatar-circulo.aro-identidad {
  /* Aro sólido grueso + halo del mismo color (más pronunciado que el
     borde blanco anterior de 2px). El color viene de la variable. */
  box-shadow:
    0 0 0 3px var(--color-aro, #22d3ee),                 /* aro grueso de color */
    0 0 10px 1px color-mix(in srgb, var(--color-aro, #22d3ee) 65%, transparent), /* glow externo */
    0 2px 0 rgba(255,255,255,.30) inset,
    0 -3px 6px rgba(0,0,0,.25) inset,
    0 4px 10px rgba(0,0,0,.45);
  border-color: transparent; /* el aro de color reemplaza al borde blanco */
}
/* Navegadores viejos del WebView sin color-mix: el aro sólido igual se
   ve; el glow simplemente cae al color plano. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .avatar-circulo.aro-identidad {
    box-shadow:
      0 0 0 3px var(--color-aro, #22d3ee),
      0 0 10px 1px var(--color-aro, #22d3ee),
      0 4px 10px rgba(0,0,0,.45);
  }
}

/* ============================================================
   PASE: cuando un jugador pasa (no tenía jugada), su avatar TIEMBLA
   ~1.5s. sala.js pone .avatar-paso durante esa ventana (acabaDePasar()).
   Un shake corto y marcado + un pulso rojo tenue lo hacen inconfundible.
   ============================================================ */
.avatar-circulo.avatar-paso {
  animation: temblor-pase 0.5s ease-in-out 3;
}
@keyframes temblor-pase {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  15% { transform: translateX(-3px) rotate(-4deg); }
  30% { transform: translateX(3px) rotate(4deg); }
  45% { transform: translateX(-3px) rotate(-3deg); }
  60% { transform: translateX(3px) rotate(3deg); }
  75% { transform: translateX(-2px) rotate(-2deg); }
}
/* Aviso "PASÓ" que aparece sobre el avatar mientras tiembla. Es un
   pseudo-elemento para no tocar el HTML de cada avatar. */
.avatar-circulo.avatar-paso::after {
  content: 'PASÓ';
  position: absolute;
  top: -18px; left: 50%;
  transform: translateX(-50%);
  font-size: 9px; font-weight: 900; letter-spacing: .5px;
  color: #fff; background: var(--color-error, #ef4444);
  padding: 1px 6px; border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,.5);
  white-space: nowrap;
  z-index: 5;
  animation: aparece-paso .2s ease-out;
}
@keyframes aparece-paso {
  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ---------- Tablero: ahora el fondo de la pantalla (fondo_mesa.jpg) ya
   dibuja la mesa holográfica, así que el .tablero es solo un contenedor
   TRANSPARENTE donde se posicionan las fichas encima de la mesa de la
   imagen. Sin marco propio ni superficie inclinada -- las fichas se ven
   planas y legibles, como se pidió ("no tan ladeado"). ---------- */
.tablero {
  height: 100%;
  min-height: 0;
  border-radius: 18px;
  padding: 6px;
  display: flex;
  align-items: center;
  overflow: visible;
  position: relative;
  background: transparent;
}
.tablero-superficie {
  /* Superficie decorativa desactivada: la mesa ya viene en el fondo real.
     Se deja el elemento vacío para no romper el HTML que lo referencia. */
  display: none;
}
.tablero-superficie-DESACTIVADA {
  position: absolute;
  inset: 9px;
  border-radius: 12px;
  transform-origin: center 30%;
  box-shadow: 0 0 0 1px rgba(56,189,248,.5), 0 0 30px rgba(217,119,6,.4) inset;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(254,240,138,.20), transparent 55%),
    radial-gradient(ellipse at 50% 35%, rgba(56,189,248,.12), transparent 70%),
    repeating-linear-gradient(0deg, rgba(251,191,36,.10) 0px, rgba(251,191,36,.10) 1px, transparent 1px, transparent 28px),
    repeating-linear-gradient(90deg, rgba(251,191,36,.10) 0px, rgba(251,191,36,.10) 1px, transparent 1px, transparent 28px),
    linear-gradient(160deg, #1f1406 0%, #140d04 60%, #080502 100%);
  pointer-events: none;
  z-index: 0;
}
.tablero-superficie::after {
  /* Marca de agua: logo, tenue */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  /* OJO: las rutas dentro de un .css son relativas a LA CARPETA DEL CSS
     (public/assets/css/), no a la página HTML. El logo real vive en
     public/assets/images/, por eso hay que subir un nivel con ../ */
  background-image: url('../images/logo.png');
  background-repeat: no-repeat;
  background-position: center 40%;
  background-size: 110px 110px;
  opacity: .16;
  pointer-events: none;
  z-index: 0;
}

.fichas-en-mesa {
  flex: 1;
  overflow: hidden;
  position: relative;
  z-index: 1;
  height: 100%;
}
/* El lienzo se fija SIEMPRE en el centro con position:absolute + translate.
   Antes se centraba con flex (justify-content:center), y eso hacía que al
   agregar una ficha nueva el ancho del contenido cambiara y TODO el tablero
   se recorriera de golpe. Con posición absoluta centrada, el punto (0,0) del
   layout queda clavado en el centro de la mesa y las fichas ya puestas nunca
   se mueven -- solo aparece la nueva en su lugar. */
.lienzo-tablero {
  /* Ya NO lleva rotateX/perspective/preserve-3d: la inclinación de la mesa
     ahora la hace una cámara REAL de Three.js (tablero3d.js), no un
     transform CSS hecho a mano -- eso fue justamente la fuente de los
     bugs de alineación que veníamos arrastrando (perspectiva por-ficha en
     vez de compartida, preserve-3d faltante). Este contenedor es un
     simple rectángulo sin transformar donde vive el <canvas> del render
     3D y, encima, las zonas de drop de HTML normales -- ambos comparten
     la MISMA cámara (canvas.render() y proyectarPunto() en tablero3d.js
     usan la misma matriz), así que arrastre y visual nunca se desincronizan. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.zona-drop {
  width: 46px;
  height: 88px;
  border-radius: 8px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  flex-shrink: 0;
  transition: all .15s;
  position: relative;
  z-index: 2;
}
.zona-drop svg { display: none; } /* sin flechas visibles en la mesa */
.zona-drop.posible {
  background: transparent;
  box-shadow: 0 0 0 1.5px rgba(6,182,212,.55);
  border-radius: 10px;
  animation: pulso-zona 1.4s ease-in-out infinite;
}
.zona-drop.activa {
  background: rgba(6,182,212,.14);
  box-shadow: 0 0 6px rgba(6,182,212,.35), 0 0 0 1.5px var(--color-turquesa);
  border-radius: 10px;
}
@keyframes pulso-zona {
  0%, 100% { opacity: 1; }
  50% { opacity: .65; }
}
@keyframes aparecer-ganadora {
  from { transform: scale(.3); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
/* Halo detrás de la ficha ganadora: un resplandor radial azul/neón que
   "aterriza" sobre el fieltro, como el aro eléctrico de la referencia
   (imagen 1) -- no un box-shadow dorado creciendo tipo bombilla. */
.halo-ganadora {
  position: absolute;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34,211,238,.35) 0%, rgba(6,182,212,.15) 50%, transparent 75%);
  animation: pulso-halo-ganadora 1.6s ease-in-out infinite;
  pointer-events: none;
}
/* "Rayos" de energía radiando desde la ficha (como en la referencia) --
   franjas finas alternadas en un conic-gradient que gira despacio, detrás
   del halo circular de arriba. Puramente decorativo (::before propio, no
   toca la ficha en sí). */
.halo-ganadora::before {
  content: '';
  position: absolute;
  inset: -55px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(34,211,238,.5) 0deg 4deg, transparent 4deg 40deg,
    rgba(34,211,238,.5) 40deg 44deg, transparent 44deg 80deg,
    rgba(34,211,238,.5) 80deg 84deg, transparent 84deg 120deg,
    rgba(34,211,238,.5) 120deg 124deg, transparent 124deg 160deg,
    rgba(34,211,238,.5) 160deg 164deg, transparent 164deg 200deg,
    rgba(34,211,238,.5) 200deg 204deg, transparent 204deg 240deg,
    rgba(34,211,238,.5) 240deg 244deg, transparent 244deg 280deg,
    rgba(34,211,238,.5) 280deg 284deg, transparent 284deg 320deg,
    rgba(34,211,238,.5) 320deg 324deg, transparent 324deg 360deg
  );
  -webkit-mask: radial-gradient(circle, transparent 38%, #000 42%, #000 62%, transparent 78%);
          mask: radial-gradient(circle, transparent 38%, #000 42%, #000 62%, transparent 78%);
  animation: girar-rayos-ganadora 3s linear infinite;
  z-index: -1;
}
@keyframes girar-rayos-ganadora {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes pulso-halo-ganadora {
  0%, 100% { transform: scale(.92); opacity: .8; }
  50% { transform: scale(1.08); opacity: 1; }
}

/* Ocultar contenedor de ficha ganadora al iniciar (Alpine x-show lo controla) */
div[x-show]:has(+ div[x-cloak]) {
  display: none !important;
}

/* La ficha ganadora conserva su color natural (blanca/marfil, pips y
   división negros, punto dorado) -- igual que cualquier ficha de la
   referencia -- el efecto especial vive en el halo eléctrico azul detrás
   y en el aro de energía alrededor, no en teñir la resina de la ficha. */
.ficha-ganadora-grande {
  box-shadow:
    0 0 0 2px rgba(34,211,238,.9),
    0 0 12px rgba(34,211,238,.7),
    0 0 24px rgba(6,182,212,.5),
    0 8px 20px rgba(0,0,0,.6);
  filter: brightness(1.08) drop-shadow(0 0 8px rgba(34,211,238,.5));
  animation: aparecer-ganadora .4s ease-out, pulso-jugable 1.6s ease-in-out infinite .4s;
}


/* ---------- Fichas: blancas, esquinas cuadradas (estilo profesional) ---------- */

.ficha {
  background: linear-gradient(165deg, #ffffff 0%, #faf8f3 50%, #f2ede0 100%);
  border: 1px solid rgba(90,85,75,.45);
  /* Esquinas sutiles pero profesionales: menos curvatura que antes */
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: visible; /* el canto (::before) vive FUERA del recuadro de la ficha */
  /* Sombra de contacto en 2 capas: una pegada al borde inferior (simula el
     canto grueso de resina/hueso apoyado en la mesa) + una difusa larga
     (la sombra que proyecta sobre el fieltro). Antes solo había la difusa,
     por eso la ficha se veía "flotando" en vez de asentada físicamente. */
  /* Sombra en 3 capas más suave y realista: contacto corto muy oscuro,
     media difusa, y ambiental larga y tenue -- la ficha se ve asentada
     sin el borde negro duro de antes. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 1.5px 0 rgba(40,38,34,.7),
    0 3px 5px rgba(0,0,0,.3),
    0 7px 12px rgba(0,0,0,.3),
    0 14px 24px rgba(0,0,0,.28);
  touch-action: none;
  transition: box-shadow .15s, transform .15s;
  /* Suprimir el ghost nativo del navegador al arrastrar -- nosotros
     manejamos un fantasma propio (cloneNode) con Pointer Events, el
     ghost del browser solo molesta encima del nuestro. */
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.ficha::after {
  /* brillo superior tipo resina pulida */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(to bottom, rgba(255,255,255,.6), transparent);
  pointer-events: none;
  border-radius: 4px 4px 0 0;
  z-index: 1;
}
.ficha::before {
  /* "Canto" de la ficha: una franja angosta debajo del cuerpo que simula
     el grosor real de la pieza (como el lado visible de un cubo). Sin
     esto la ficha es un plano puro -- con esto lee como un objeto sólido
     de unos milímetros de alto apoyado sobre el fieltro. */
  content: '';
  position: absolute;
  left: 1px; right: 1px; bottom: -3px;
  height: 4px;
  background: linear-gradient(180deg, rgba(60,58,54,.85), rgba(25,24,22,.85));
  border-radius: 0 0 4px 4px;
  z-index: -1;
}
.ficha.horizontal { flex-direction: row; }
.ficha.jugable {
  box-shadow:
    0 0 0 1.5px rgba(34,211,238,.55),
    0 0 10px rgba(6,182,212,.5),
    0 4px 8px rgba(0,0,0,.4);
  animation: pulso-jugable 1.8s ease-in-out infinite;
}
@keyframes pulso-jugable {
  0%, 100% { box-shadow: 0 0 0 1.5px rgba(34,211,238,.4), 0 0 8px rgba(6,182,212,.4), 0 4px 8px rgba(0,0,0,.4); }
  50% { box-shadow: 0 0 0 2px rgba(34,211,238,.7), 0 0 14px rgba(6,182,212,.65), 0 4px 8px rgba(0,0,0,.4); }
}
.ficha.no-jugable { opacity: .5; }
.ficha.arrastrando { opacity: .3; }
.ficha.seleccionada {
  transform: translateY(-8px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 0 0 3px var(--color-turquesa),
    0 0 16px rgba(6,182,212,.6),
    0 10px 20px rgba(0,0,0,.5);
}

/* La última ficha colocada en el tablero lleva un aro dorado brillante que
   PULSA de forma permanente mientras siga siendo la última jugada -- así
   siempre es obvio cuál ficha se acaba de poner (propia o de rival/bot).
   El aro se "apaga" solo en cuanto entra otra ficha, porque esta deja de
   ser la última del arreglo. Antes esto era un destello de 1.4s que se
   perdía porque el tablero se redibuja en cada consulta (~cada 1.4s);
   ahora es un estado permanente, no una animación de una sola vez. */
/* La ficha recién colocada ya NO lleva brillo -- se pidió que el
   iluminado quede reservado solo para las fichas jugables de la mano
   (ver .ficha.jugable). Se deja la clase por si el z-index de "encima de
   las demás" sigue haciendo falta visualmente, pero sin efecto de glow. */
.ficha-recien-colocada {
  z-index: 4;
}

/* ---------- Skins de fichas comprables en la tienda ---------- */
.ficha.skin-ebano {
  background: linear-gradient(165deg, #2b2b2e 0%, #1c1c1e 60%, #0d0d0e 100%);
  border-color: rgba(255,255,255,.18);
}
.ficha.skin-ebano .pip.activo {
  background: radial-gradient(circle at 35% 30%, #ffffff, #cfcfcf 80%);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.2);
}
.ficha.skin-oro {
  background: linear-gradient(165deg, #fff7d6 0%, #fde68a 55%, #f4c410 100%);
  border-color: rgba(122,31,43,.4);
}
.ficha.skin-oro .pip.activo {
  background: radial-gradient(circle at 35% 30%, #8a2432, #5a1420 80%);
}
.ficha.skin-neon {
  background: linear-gradient(165deg, #16324a 0%, #0c1f30 60%, #061119 100%);
  border-color: rgba(6,182,212,.55);
  box-shadow:
    0 1px 0 rgba(255,255,255,.15) inset,
    0 0 10px rgba(6,182,212,.35),
    0 5px 10px rgba(0,0,0,.4);
}
.ficha.skin-neon .pip.activo {
  background: radial-gradient(circle at 35% 30%, #a5f3fc, #06b6d4 80%);
  box-shadow: 0 0 4px rgba(103,232,249,.9);
}
.ficha.skin-neon .ficha-divisor { background: rgba(6,182,212,.4); }

/* ---------- Marcos (aro decorativo) comprables alrededor del avatar ---------- */
.avatar-circulo.marco-anillo_oro { box-shadow: 0 0 0 3px var(--color-dorado), 0 4px 10px rgba(0,0,0,.4); }
.avatar-circulo.marco-aura_turquesa { box-shadow: 0 0 0 2px var(--color-turquesa), 0 0 14px 3px rgba(6,182,212,.7); }
.avatar-circulo.marco-llamas { box-shadow: 0 0 0 3px #f97316, 0 0 14px rgba(249,115,22,.7); }
.avatar-con-corona { position: relative; }
.avatar-con-corona::before {
  content: '';
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  width: 20px; height: 14px;
  z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FBBF24' stroke='%23FBBF24'%3E%3Cpath d='M2 18h20l-2-9-5 4-3-7-3 7-5-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
}

/* ---------- Avatares comprables en la tienda ---------- */
.avatar-estilo-guerrero { background: linear-gradient(160deg, #fbbf24, #b45309) !important; }
.avatar-estilo-ninja { background: linear-gradient(160deg, #22d3ee, #0e7490) !important; }
.avatar-estilo-robot { background: linear-gradient(160deg, #cbd5e1, #64748b) !important; }
.avatar-estilo-fantasma { background: linear-gradient(160deg, #e9d5ff, #7e22ce) !important; }

.ficha-mitad {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 4px;
  position: relative;
  z-index: 1;
}
.ficha-divisor {
  background: linear-gradient(#1a1a1a, #0a0a0a);
  box-shadow: 0 1px 0 rgba(255,255,255,.35);
  position: relative;
  z-index: 1;
}
.ficha .ficha-divisor { width: 100%; height: 2px; }
.ficha.horizontal .ficha-divisor { width: 2px; height: 100%; }
/* Punto dorado en el centro del divisor (detalle premium de la referencia) */
.ficha-divisor::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fde68a, #b8860b 80%);
  box-shadow: 0 0 3px rgba(184,150,60,.9), inset 0 1px 1px rgba(255,255,255,.5);
  z-index: 2;
}

.pip {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2b2b2b, #000000 80%);
  box-shadow: inset 0 1.5px 2px rgba(0,0,0,.7), inset 0 -1px 1px rgba(255,255,255,.15), 0 1px 0 rgba(255,255,255,.4);
  justify-self: center; align-self: center;
  opacity: 0;
}
.pip.activo { opacity: 1; }

/* Fichas del TABLERO: 30% más chicas que las de la mano para que la
   cadena no se salga de la mesa. Sombra de profundidad hacia abajo. */
.ficha-mesa .ficha-mitad { padding: 2px; }
.ficha-mesa .pip { width: 6px; height: 6px; }
.ficha-mesa::after {
  height: 38%;
  background: linear-gradient(to bottom, rgba(255,255,255,.75), transparent);
}
.ficha-mesa {
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 1px 0 rgba(40,38,34,.8),
    0 2px 3px rgba(0,0,0,.45),
    0 4px 8px rgba(0,0,0,.42),
    0 8px 16px rgba(0,0,0,.35);
}
.ficha-mesa::after {
  height: 38%;
  background: linear-gradient(to bottom, rgba(255,255,255,.75), transparent);
  border-radius: 6px 6px 0 0;
}
.ficha-mesa::before { border-radius: 0 0 6px 6px; height: 3px; bottom: -2px; }
/* Canto acorde al skin equipado, en vez del dorado clásico fijo -- así una
   ficha ébano/oro/neón se ve como UNA pieza sólida coherente, no una
   calcomanía blanca con un borde de otro color pegado abajo. */
.ficha.skin-ebano::before { background: linear-gradient(180deg, #3a3a3d, #0d0d0e); }
.ficha.skin-oro::before   { background: linear-gradient(180deg, #d9a441, #8a5a10); }
.ficha.skin-neon::before  { background: linear-gradient(180deg, #0891b2, #04303d); }

/* Ficha "fantasma" que sigue al dedo mientras se arrastra */
.ficha-fantasma {
  position: fixed;
  pointer-events: none;
  z-index: 999;
  transform: scale(1.15) rotate(-2deg);
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.55));
}

.mano-jugador {
  background: transparent;
  padding: 5px 8px 4px;
  display: flex;
  gap: 2px;
  overflow-x: auto;
  justify-content: center;
  flex-shrink: 0;
}
/* Cuando es tu turno, un brillo sutil detrás de tus fichas para que
   sepas que te toca sin necesitar un mensaje que empuje la mesa */
.mano-jugador.mi-turno-glow {
  background: linear-gradient(to top, rgba(6,182,212,.07) 0%, transparent 100%);
}

.chat-rapido {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 12px 8px;
}
.chip-sticker {
  background: var(--color-tarjeta);
  border: none;
  color: var(--color-texto);
  padding: 8px 14px;
  border-radius: 16px;
  font-size: 13px;
}
.burbuja-chat {
  background: var(--color-tarjeta);
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 13px;
  margin: 0 12px 6px;
  display: inline-block;
}

.spinner {
  width: 22px; height: 22px;
  border: 3px solid rgba(255,255,255,.2);
  border-top-color: var(--color-dorado);
  border-radius: 50%;
  animation: girar 0.8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.hoja-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  padding: 10px;
}
.hoja-contenido {
  background: var(--color-tarjeta);
  width: 100%;
  border-radius: 24px 24px 0 0;
  padding: 24px;
}

/* Modal de "Crear mesa con amigos" -- centrado en pantalla */
.panel-mesa-amigos {
  position: relative; width: 100%; max-width: 380px; max-height: 90vh; max-height: 90dvh;
  overflow-y: auto; box-sizing: border-box;
  background: linear-gradient(135deg, rgba(46, 70, 99, 0.06) 0%, rgba(15, 23, 36, 0.14) 100%);
  backdrop-filter: blur(10px) saturate(160%); -webkit-backdrop-filter: blur(10px) saturate(160%);
  border-radius: 22px;
  border: 1.5px solid rgba(0,243,255,.35);
  box-shadow: 0 20px 45px rgba(0,0,0,.5), 0 0 40px rgba(0,243,255,.15);
  padding: 22px 20px 28px;
}
.btn-cerrar-mesa-amigos {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; z-index: 5;
}
.titulo-mesa-amigos {
  color: #7df9ff; font-weight: 800; font-size: 20px; text-transform: uppercase; letter-spacing: 1.5px;
  text-shadow: 0 0 12px rgba(0,243,255,.6); text-align: center; margin-top: 4px;
}
.chip-config-mesa {
  flex: 1; padding: 10px; border-radius: 12px; border: 1.5px solid rgba(140,180,212,.3);
  background: rgba(0,0,0,.3); color: #8cb4d4; font-weight: 800; font-family: inherit; cursor: pointer;
}
.chip-config-mesa.activo { background: linear-gradient(135deg, #FBBF24, #d9a441); color: #05070f; border-color: transparent; }
.campo-config-mesa {
  width: 100%; padding: 12px 14px; border-radius: 12px; box-sizing: border-box;
  border: 1px solid rgba(140,180,212,.3); background: rgba(0,0,0,.3); color: #fff; font-family: inherit;
}
.costo-diamantes-mesa {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(34,211,238,.1); border: 1px solid rgba(34,211,238,.3); border-radius: 12px;
  padding: 10px 14px; color: #7df9ff; font-size: 13px; font-weight: 700;
}
.costo-diamantes-mesa strong { color: #fff; font-size: 15px; }

/* Mesa con puestos para elegir dónde sentarse -- ver home.html, modal de
   crear/unirse a sala con amigos. */
.mesa-puestos-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 280px; margin: 0 auto;
}
.puesto-mesa-amigos {
  aspect-ratio: 1; border-radius: 16px; border: 1.5px dashed rgba(140,180,212,.4);
  background: rgba(0,0,0,.25); color: #8cb4d4; font-family: inherit; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.puesto-mesa-amigos.ocupado { border-style: solid; border-color: rgba(34,211,238,.4); background: rgba(34,211,238,.08); cursor: default; }
.puesto-mesa-amigos.es-mio { border-color: #FBBF24; background: rgba(251,191,36,.12); }
.puesto-vacio-icono { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; }
.avatar-puesto-mesa { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 4px; border: 2px solid rgba(255,255,255,.2); }
.nombre-puesto-mesa { font-size: 11px; font-weight: 700; color: #fff; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* SweetAlert2 con la identidad de Full Dominoes (ver assets/js/alertas.js)
   -- estilo tipo hoja de acción / alerta de iOS: esquinas muy redondeadas,
   blur de fondo, tipografía del sistema, botones full-width apilados. */
.fd-swal-popup {
  width: min(340px, 90vw) !important;
  border-radius: 20px !important;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', 'Nunito', system-ui, sans-serif !important;
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55) !important;
  padding: 16px 16px 12px !important;
  max-height: 82vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.fd-swal-popup .swal2-html-container {
  overflow-y: auto !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  -webkit-overflow-scrolling: touch;
  padding-right: 4px !important; /* que la barrita de scroll no tape el texto */
}
.fd-swal-popup .swal2-actions { flex-shrink: 0 !important; }
.swal2-container.fd-swal-backdrop {
  background: rgba(10, 14, 24, .55) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.fd-swal-titulo {
  font-weight: 800 !important;
  font-size: 18px !important;
  letter-spacing: -0.2px;
}
.fd-swal-texto {
  font-size: 14px !important;
  opacity: .85;
}
.swal2-actions {
  flex-direction: column-reverse !important;
  width: 100% !important;
  gap: 8px !important;
  margin-top: 18px !important;
}
.fd-swal-boton {
  border-radius: 14px !important;
  font-weight: 700 !important;
  padding: 13px 24px !important;
  width: 100% !important;
  margin: 0 !important;
  font-size: 15px !important;
  box-shadow: none !important;
}
.fd-swal-boton-cancelar {
  border-radius: 14px !important;
  font-weight: 600 !important;
  padding: 13px 24px !important;
  width: 100% !important;
  margin: 0 !important;
  font-size: 15px !important;
  background: rgba(255, 255, 255, .08) !important;
  box-shadow: none !important;
}

/* Tabs (segmented control) tipo iOS dentro del swal de Ayuda */
.fd-ayuda-tabs {
  display: flex; gap: 4px;
  background: rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 4px;
  margin-bottom: 16px;
}
.fd-ayuda-tab {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  border: none; background: transparent; color: rgba(241,245,249,.55);
  font-family: inherit; font-size: 11.5px; font-weight: 700;
  padding: 9px 4px 8px; border-radius: 11px; cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .15s ease;
}
.fd-ayuda-tab svg { width: 18px; height: 18px; opacity: .7; transition: opacity .2s ease; }
.fd-ayuda-tab.activa {
  background: linear-gradient(160deg, #334155, #1E293B);
  color: #F1F5F9;
  box-shadow: 0 2px 8px rgba(0,0,0,.4), inset 0 0 0 1px rgba(0,243,255,.25);
}
.fd-ayuda-tab.activa svg { opacity: 1; }
.fd-ayuda-tab:active { transform: scale(0.96); }

.fd-ayuda-panel { display: none; text-align: left; font-size: 13.5px; line-height: 1.5; }
.fd-ayuda-panel.activa { display: block; animation: fdAyudaFade .2s ease; }
@keyframes fdAyudaFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.fd-ayuda-card {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.fd-ayuda-card:last-of-type { margin-bottom: 0; }
.fd-ayuda-card h4 {
  margin: 0 0 8px; font-size: 12.5px; font-weight: 800; letter-spacing: .3px;
  text-transform: uppercase; color: #FBBF24;
  display: flex; align-items: center; gap: 6px;
}
.fd-ayuda-card ul { margin: 0; padding-left: 0; list-style: none; }
.fd-ayuda-card li {
  position: relative; padding-left: 16px; margin-bottom: 7px; color: rgba(241,245,249,.85);
}
.fd-ayuda-card li:last-child { margin-bottom: 0; }
.fd-ayuda-card li::before {
  content: ''; position: absolute; left: 0; top: 7px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--color-turquesa);
}
.fd-ayuda-card p { margin: 0; color: rgba(241,245,249,.85); }

.fd-ayuda-boton-accion {
  display: block; width: 100%; margin-top: 12px;
  padding: 12px; border-radius: 13px; border: none;
  background: linear-gradient(160deg, #22d3ee, #0e7490); color: #05070f;
  font-weight: 800; font-size: 13px; cursor: pointer;
  box-shadow: 0 3px 10px rgba(6,182,212,.35);
}
.fd-swal-popup .fd-ayuda-whatsapp,
a.fd-ayuda-whatsapp {
  display: flex !important; align-items: center; justify-content: center; gap: 8px;
  margin-top: 14px; padding: 10px; border-radius: 12px;
  background: rgba(37,211,102,.12) !important; border: 1px solid rgba(37,211,102,.35) !important;
  color: #4ade80 !important; font-size: 12px; font-weight: 700;
  text-decoration: none !important;
}
.fd-swal-popup .fd-ayuda-whatsapp svg { width: 16px; height: 16px; flex-shrink: 0; fill: currentColor; }

/* =====================================================================
   NOTA sobre orientación horizontal
   =====================================================================
   Se intentó forzar horizontal rotando todo el contenido con CSS
   (transform: rotate(90deg) + position:fixed), pero eso rompía la vista
   en celulares reales: el área táctil quedaba descuadrada, se veía solo
   media pantalla y no se podía interactuar. Por eso se ELIMINÓ ese
   enfoque. La orientación horizontal, si se quiere forzar de verdad, debe
   hacerse a nivel de la app nativa (Capacitor: screenOrientation en
   capacitor.config), no con trucos de CSS en el navegador. La clase
   .forzar-horizontal se deja como no-op para no romper el HTML que ya la
   referencia.
   ===================================================================== */
body.forzar-horizontal {
  /* intencionalmente vacío: ver nota arriba */
}

/* Fondo consistente para pantallas internas (tienda, recarga de monedas):
   el mismo degradado morado/azul del lobby, para que no se vean "vacías". */
body.fondo-interior {
  background:
    linear-gradient(160deg, rgba(30,10,66,.92) 0%, rgba(21,9,52,.94) 40%, rgba(15,23,42,.97) 100%),
    url('../images/fondo_lobby.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* Fondo de la Tienda: puente de mando sci-fi (background_tienda.jpg),
   con un velo morado/azul encima para que las tarjetas de artículos se
   lean bien por encima. */
body.fondo-tienda-pro {
  background:
    linear-gradient(160deg, rgba(21,9,52,.55) 0%, rgba(15,23,42,.65) 100%),
    url('../images/background_tienda.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* Fondo de la sala de juego: la mesa holográfica sci-fi (imagen de
   referencia), fija detrás de todo. El tablero real con las fichas se
   dibuja ENCIMA, en la zona central donde está la mesa de la imagen.
   IMPORTANTE: antes esta pantalla heredaba el `body` base de arriba
   (max-width:480px, pensado como "marco de teléfono" para pantallas
   portrait), y por eso el juego se veía encogido a una franja angosta en
   vez de usar todo el ancho horizontal como el lobby/tienda/ranking, que
   sí tienen su propia clase "-pro" sin esa limitación. */
body.fondo-mesa-juego {
  margin: 0; max-width: none; width: 100%; min-height: 100vh; min-height: 100dvh;
  background: #05070f url('../images/fondo_mesa_v2.jpg') center center / cover no-repeat fixed;
  box-shadow: none;
}

/* ---------- Hoja de confirmación/mensaje compacta ----------
   Reemplaza los swal.fire "gigantes" para los casos simples (error,
   éxito, info, confirmar sí/no) -- ver assets/js/alertas.js. Basada en
   el patrón de "Cuentas de Cobro" que compartió el cliente, pero con los
   colores/tipografía de Full Dominoes en vez de los suyos. */
.fd-confirm-ov {
  position: fixed; inset: 0; z-index: 4000;
  background: rgba(4, 6, 14, .6);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: fdConfirmOvIn .15s ease;
}
.fd-confirm-ov.cerrando { animation: fdConfirmOvOut .12s ease forwards; }
@keyframes fdConfirmOvIn { from { opacity: 0; } }
@keyframes fdConfirmOvOut { to { opacity: 0; } }

.fd-confirm-sheet {
  background: var(--color-tarjeta, #1E293B);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  width: 100%; max-width: 300px;
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
  overflow: hidden; text-align: center;
  animation: fdConfirmBoxIn .18s cubic-bezier(.4,0,.2,1);
  font-family: 'Barlow Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
@keyframes fdConfirmBoxIn { from { opacity: 0; transform: scale(.95) translateY(8px); } }

.fd-confirm-icon-wrap {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 22px auto 10px;
}
.fd-confirm-title {
  font-size: 16px; font-weight: 800; letter-spacing: -.2px; color: var(--color-texto, #F1F5F9);
  padding: 0 18px; margin-bottom: 5px;
}
.fd-confirm-text {
  font-size: 12.5px; color: var(--color-texto-tenue, #94A3B8); line-height: 1.5;
  padding: 0 18px; margin-bottom: 18px;
}
.fd-confirm-acts { display: flex; flex-direction: column; border-top: 1px solid rgba(255,255,255,.08); }
.fd-confirm-btn {
  padding: 13px; font-size: 15px; font-weight: 700; border: none; background: transparent;
  cursor: pointer; font-family: inherit; transition: background .08s;
  border-bottom: 1px solid rgba(255,255,255,.06); color: var(--color-texto, #F1F5F9);
}
.fd-confirm-btn:last-child { border-bottom: none; }
.fd-confirm-btn:active { background: rgba(255,255,255,.06); }
.fd-confirm-btn.cancel { color: var(--color-texto-tenue, #94A3B8); font-weight: 600; }

/* Menú de opciones de la partida (Reportar/Abandonar) -- mismas texturas
   que la hoja de confirmación de arriba, sin iconos ni color extra: una
   lista simple de acciones, la peligrosa en rojo apagado nada más. */
.fd-menu-sheet { padding: 6px 0; }
.fd-menu-opcion {
  display: block;
  width: 100%;
  padding: 14px;
  font-size: 15px;
  font-weight: 700;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  color: var(--color-texto, #F1F5F9);
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background .08s;
}
.fd-menu-opcion:active { background: rgba(255,255,255,.06); }
.fd-menu-opcion:last-child { border-bottom: none; }
.fd-menu-opcion.peligro { color: var(--color-error, #EF4444); }
.fd-menu-opcion.cancelar { color: var(--color-texto-tenue, #94A3B8); font-weight: 600; }

/* Canto de las fichas del tablero acorde a su radio más chico */
.ficha-mesa::before { border-radius: 0 0 8px 8px; }

/* =====================================================================
   DESKTOP IGUAL QUE MÓVIL
   En pantallas anchas (PC) el área de juego se estiraba a todo el ancho y
   la mesa quedaba con otra proporción que en el celular acostado.

   OJO con el fondo: body.fondo-mesa-juego usa fondo_mesa_v2.jpg, que YA
   trae la mesa dibujada. Si solo se topa el ancho de .pantalla, el fondo
   sigue pintando SU mesa a todo el ancho y se ve una segunda mesa detrás
   de la real (mesa duplicada / fichas flotando sobre un collage).
   Por eso aquí el fondo se mueve del body al propio contenedor topado:
   así hay UNA sola mesa, del mismo ancho que el área de juego, y a los
   lados queda un color liso oscuro en vez de una copia estirada.

   Solo aplica desde 900px: en celular no cambia nada.
   Ajusta --ancho-max-mesa si quieres la mesa más grande o más chica en PC.
   ===================================================================== */
@media (min-width: 900px) {
  :root { --ancho-max-mesa: 1180px; }

  /* El body deja de pintar la imagen: solo queda el color de fondo liso
     que rellena los costados del monitor. */
  body.fondo-mesa-juego {
    background-image: none;
    background-color: #05070f;
  }

  /* El contenedor de juego se centra, se topa, y ahora ES el que lleva la
     imagen de la mesa -- una sola, alineada con el área jugable. */
  body.fondo-mesa-juego .pantalla {
    max-width: var(--ancho-max-mesa);
    margin-left: auto;
    margin-right: auto;
    background: #05070f url('../images/fondo_mesa_v2.jpg') center center / cover no-repeat;
    position: relative;
  }
}