: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;
}

* { 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 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 4px;
}

.marcador { font-weight: 800; font-size: 14px; }
.marcador-a { color: var(--color-dorado); }
.marcador-b { color: var(--color-turquesa); }

.timer-barra-fondo {
  width: 150px;
  height: 10px;
  background: rgba(0,0,0,.3);
  border-radius: 8px;
  overflow: hidden;
}
.timer-barra-relleno {
  height: 100%;
  transition: width .1s linear, background-color .3s;
}

.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: 20px 18px 2px; /* margen ajustado para que quepa sin scroll */
  perspective: 900px;
}

.avatar-flotante {
  position: absolute;
  z-index: 10;
  text-align: center;
  width: 44px;
}
.avatar-arriba { top: -26px; right: 8%; left: auto; transform: none; }
.avatar-izquierda { left: -26px; top: 15%; transform: translateY(-50%); }
.avatar-derecha { right: -26px; top: 15%; transform: translateY(-50%); }

.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);
}

.fichas-dorso-fila {
  display: flex;
  justify-content: center;
  margin-top: 3px;
}
.avatar-izquierda .fichas-dorso-fila,
.avatar-derecha .fichas-dorso-fila {
  flex-direction: column;
  align-items: center;
}

.ficha-dorso {
  width: 12px;
  height: 18px;
  border-radius: 3px;
  background:
    linear-gradient(135deg, #1e293b 0%, #0f172a 60%),
    repeating-linear-gradient(45deg, rgba(251,191,36,.15) 0px, rgba(251,191,36,.15) 2px, transparent 2px, transparent 5px);
  border: 1px solid rgba(251,191,36,.4);
  box-shadow: 0 2px 3px rgba(0,0,0,.4);
  margin-left: -5px;
}
.avatar-izquierda .ficha-dorso,
.avatar-derecha .ficha-dorso {
  margin-left: 0;
  margin-top: -9px;
}
.ficha-dorso:first-child { margin-left: 0; margin-top: 0; }

.avatar-circulo {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  color: var(--color-fondo);
  margin: 0 auto 2px;
  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);
}
.avatar-circulo.equipo-a { background: linear-gradient(160deg, #FDE68A, var(--color-dorado)); }
.avatar-circulo.equipo-b { background: linear-gradient(160deg, #67E8F9, var(--color-turquesa)); }
.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;
}
.avatar-circulo.turno-activo {
  transform: scale(1.18);
  animation: pulso-turno 1s ease-in-out infinite;
}
@keyframes pulso-turno {
  0%, 100% {
    box-shadow: 0 2px 0 rgba(255,255,255,.35) inset, 0 0 0 3px rgba(251,191,36,.9), 0 0 20px rgba(251,191,36,.7);
  }
  50% {
    box-shadow: 0 2px 0 rgba(255,255,255,.35) inset, 0 0 0 4px rgba(251,191,36,1), 0 0 30px rgba(251,191,36,1);
  }
}

/* ---------- 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 {
  position: absolute;
  top: 54%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 680px;
  height: 190px;
}

.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: rgba(251,191,36,.10);
  box-shadow: 0 0 0 2px rgba(251,191,36,.55);
  animation: pulso-zona 1.1s ease-in-out infinite;
}
.zona-drop.activa {
  background: rgba(6,182,212,.35);
  box-shadow: 0 0 16px rgba(6,182,212,.6), 0 0 0 2px var(--color-turquesa);
  transform: scale(1.06);
}
@keyframes pulso-zona {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}
@keyframes aparecer-ganadora {
  from { transform: scale(.3); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

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

.ficha {
  background: linear-gradient(165deg, #fdfcf7 0%, #f7f4ea 55%, #ebe6d6 100%);
  border: 1px solid rgba(184,150,60,.55);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  /* Sombra simple hacia abajo, para dar sensación de profundidad sin
     capas complicadas -- antes tenía 6 capas escalonadas simulando el
     canto de la ficha, que se veía recargado. */
  box-shadow: 0 4px 8px rgba(0,0,0,.4);
  touch-action: none; /* clave: le decimos al navegador que NO haga scroll al tocar una ficha, para poder arrastrarla nosotros con Pointer Events */
  transition: box-shadow .15s, transform .15s;
}
.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;
}
.ficha.horizontal { flex-direction: row; }
.ficha.jugable {
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 -3px 6px rgba(0,0,0,.08) inset,
    0 2px 0 rgba(0,0,0,.25),
    0 0 16px rgba(251,191,36,.65),
    0 5px 12px 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-dorado),
    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. */
.ficha-recien-colocada {
  z-index: 4;
  outline: 2px solid var(--color-dorado);
  outline-offset: 1px;
  animation: pulso-ultima 1.1s ease-in-out infinite;
}
@keyframes pulso-ultima {
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(251,191,36,.7),
      0 0 12px rgba(251,191,36,.7),
      0 2px 6px rgba(0,0,0,.4);
  }
  50% {
    box-shadow:
      0 0 0 3px rgba(251,191,36,1),
      0 0 22px rgba(251,191,36,1),
      0 2px 6px rgba(0,0,0,.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(rgba(184,150,60,.9), rgba(150,120,45,.7));
  box-shadow: 0 1px 0 rgba(255,255,255,.5);
  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%, #4b5563, #111827 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 (56x28, más chicas que las de la mano): se ajustan
   los pips y el padding interno para que la numeración se lea nítida y
   proporcional, sin apretarse. Cada mitad es ~26x28 con grid 3x3. */
.ficha-mesa .ficha-mitad { padding: 3px; }
.ficha-mesa .pip { width: 6px; height: 6px; }

/* 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: var(--color-tarjeta);
  border-radius: 18px 18px 0 0;
  padding: 6px 8px;
  display: flex;
  gap: 5px;
  overflow-x: auto;
  justify-content: center;
  flex-shrink: 0;
}

.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;
  max-width: 480px;
  margin: 0 auto;
  background: rgba(0,0,0,.5);
  display: flex; align-items: flex-end;
  z-index: 100;
}
.hoja-contenido {
  background: var(--color-tarjeta);
  width: 100%;
  border-radius: 24px 24px 0 0;
  padding: 24px;
}

/* Modal de "Crear mesa con amigos" -- mismo lenguaje visual que el panel
   del ranking (vidrio esmerilado + borde neón), con botón de cerrar. */
.panel-mesa-amigos {
  position: relative; width: 100%; 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: 24px 24px 0 0;
  border: 1.5px solid rgba(0,243,255,.35); border-bottom: none;
  box-shadow: 0 -10px 40px rgba(0,0,0,.4), 0 0 40px rgba(0,243,255,.15);
  padding: 22px 20px 28px;
}
.btn-cerrar-mesa-amigos {
  position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(0,0,0,.35); border: none; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.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. */
body.fondo-mesa-juego {
  background: #05070f url('../images/fondo_mesa_v2.jpg') center center / cover no-repeat fixed;
}

/* ---------- 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; }