/* ═══════════════════════════════════════
   GILEY — ESTILO DEFINITIVO
   ═══════════════════════════════════════ */

/* ── Sensación de App nativa en móvil ── */
html, body {
  overscroll-behavior: none;                 /* sin rebote tipo web vieja */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
* { -webkit-tap-highlight-color: transparent; }   /* sin flash gris al tocar */
button, a, .btn-pct, .tabbar-btn, .cajero-tab, [onclick], [data-throw-idx], .carrusel-card, .perfil-avatar-item {
  touch-action: manipulation;                /* taps instantáneos (sin delay de 300ms) */
}
/* En táctil, feedback inmediato con :active (el :hover se queda "pegado" tras tocar). */
@media (hover: none) {
  button:active, .btn-pct:active, .tabbar-btn:active, .cajero-tab:active,
  .cosmetico-btn:active, .tienda-pack-btn:active, .perfil-avatar-item:active,
  .carrusel-card:active, .throw-item:active, .lobby-pase-banner:active,
  .lobby-piggy:active, .soundboard-chip:active { opacity: 0.85; transition: opacity .08s; }
}

:root {
  /* ── Stitch Design Tokens (Giley Noir) ── */
  --surface-dim: #131313;
  --surface: #131313;
  --surface-bright: #393939;
  --surface-container-lowest: #0e0e0e;
  --surface-container-low: #1c1b1b;
  --surface-container: #201f1f;
  --surface-container-high: #2a2a2a;
  --surface-container-highest: #353534;
  --on-surface: #e5e2e1;
  --on-surface-variant: #d0c5af;
  --outline: #99907c;
  --outline-variant: #4d4635;
  --surface-tint: #e9c349;

  /* ── Brand Colors ── */
  --primary: #f2ca50;
  --primary-container: #d4af37;
  --on-primary: #3c2f00;
  --on-primary-container: #554300;
  --primary-fixed: #ffe088;
  --primary-fixed-dim: #e9c349;

  --secondary: #88d982;
  --secondary-container: #005b14;
  --on-secondary: #003909;
  --on-secondary-container: #81d27c;

  --tertiary: #ffbfb7;
  --tertiary-container: #ff968b;
  --on-tertiary: #690005;
  --on-tertiary-container: #90000a;

  --error: #ffb4ab;
  --error-container: #93000a;
  --on-error: #690005;
  --on-error-container: #ffdad6;

  --background: #131313;
  --on-background: #e5e2e1;

  /* ── Legacy Aliases (compatibilidad) ── */
  --felt: #0a5c36;
  --felt-dark: #07422a;
  --felt-shadow: #05361f;
  --borde-mesa: #2c1810;
  --borde-mesa-light: #3d2317;

  --oros: #d4a017;
  --oros-bg: rgba(212,160,23,0.12);
  --copas: #c0392b;
  --copas-bg: rgba(192,57,43,0.12);
  --espadas: #2980b9;
  --espadas-bg: rgba(41,128,185,0.12);
  --bastos: #27ae60;
  --bastos-bg: rgba(39,174,96,0.12);

  --texto: #e5e2e1;
  --texto-dim: #d0c5af;
  --texto-oscuro: #3c2f00;
  --bg-oscuro: #131313;
  --bg-tarjeta: rgba(42,42,42,0.4);
  --bg-tarjeta-hover: rgba(255,255,255,0.08);
  --accento: var(--primary);
  --btn-primary: var(--primary-container);
  --btn-primary-hover: #e6b422;
  --btn-peligro: #c0392b;
  --btn-peligro-hover: #e74c3c;
  --verde: #27ae60;
  --rojo: #c0392b;

  --sombra-suave: 0 2px 8px rgba(0,0,0,0.3);
  --sombra-media: 0 4px 16px rgba(0,0,0,0.4);
  --sombra-fuerte: 0 8px 32px rgba(0,0,0,0.5);
  --brillo-oro: 0 0 16px rgba(212,160,23,0.25);
  --radio: 10px;
  --radio-sm: 6px;

  --sidebar-width: 264px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  height: 100%;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  background: var(--bg-oscuro);
  color: var(--texto);
}
body { overflow-x: hidden; }

h1, h2, h3 { font-weight: 600; }
.oculto { display: none !important; }
.vacio { color: var(--texto-dim); font-style: italic; }

/* ── TRANSICION DE PANTALLA ── */
.pantalla {
  animation: fadeIn .35s ease-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════
   TOAST
   ═══════════════════════════════════════ */
.toast {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  z-index: 9999;
  padding: 14px 28px; border-radius: var(--radio-sm);
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--texto);
  font-size: 0.95rem; font-weight: 500;
  box-shadow: var(--sombra-fuerte);
  transition: opacity .3s, transform .3s;
}
.toast.oculto { opacity: 0; transform: translateX(-50%) translateY(-20px); pointer-events: none; }
.toast.ok      { border-color: var(--verde); }
.toast.error   { border-color: var(--rojo); }

/* ═══════════════════════════════════════
   HEADER (Stitch Design — base styles for non-Tailwind context)
   ═══════════════════════════════════════ */
/* Stitch header uses Tailwind + inline styles in index.html */
/* Keep only responsive overrides here */

/* ═══════════════════════════════════════
   PANTALLAS
   ═══════════════════════════════════════ */
.pantalla { display: none; }
.pantalla.activa { display: block; }

/* ═══════════════════════════════════════
   REGISTRO
   ═══════════════════════════════════════ */
#pantalla-registro {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; min-height: 80vh;
}
.tarjeta-registro {
  background: linear-gradient(145deg, rgba(0,0,0,0.4), rgba(0,0,0,0.25));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radio);
  padding: 40px; max-width: 400px; width: 100%;
  text-align: center;
  box-shadow: var(--sombra-fuerte);
  backdrop-filter: blur(8px);
}
.tarjeta-registro h1 { margin-bottom: 8px; font-size: 2rem; color: var(--accento); text-shadow: 0 0 20px rgba(212,160,23,0.3); }
.tarjeta-registro p { color: var(--texto-dim); margin-bottom: 24px; }
.tarjeta-registro input {
  width: 100%; padding: 14px 18px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radio-sm);
  color: var(--texto); font-size: 1rem;
  margin-bottom: 16px;
  transition: border-color .2s, box-shadow .2s;
}
.tarjeta-registro input:focus {
  outline: none; border-color: var(--accento);
  box-shadow: 0 0 0 3px rgba(212,160,23,0.15), var(--brillo-oro);
}

/* ═══════════════════════════════════════
   AUTH
   ═══════════════════════════════════════ */
/* ── Pantalla auth: overlay a pantalla completa, centrado perfecto ── */
.auth-screen.activa {
  display: flex;
  flex-direction: column;                 /* tarjeta de login + sección SEO apiladas */
  position: fixed; inset: 0; z-index: 100;
  align-items: center; justify-content: safe center;
  padding: 24px 18px;
  padding-top: max(24px, env(safe-area-inset-top));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  overflow-y: auto;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(212,175,55,0.12) 0%, transparent 55%),
    radial-gradient(100% 60% at 50% 110%, rgba(212,175,55,0.06) 0%, transparent 60%),
    #09090b;
}
.auth-shell {
  width: 100%; max-width: 400px;
  display: flex; flex-direction: column;
  gap: 22px;
  animation: fadeIn .45s ease-out;
}

/* ── Logotipo ── */
.auth-brand { text-align: center; }
.auth-emblem {
  width: 68px; height: 68px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 20px;
  background: linear-gradient(160deg, var(--primary-fixed) 0%, var(--primary-container) 100%);
  box-shadow: 0 10px 30px rgba(212,175,55,0.35), inset 0 1px 0 rgba(255,255,255,0.4);
}
.auth-emblem .material-symbols-outlined { font-size: 38px; color: #1a1400; font-variation-settings: 'FILL' 1; }
.auth-wordmark {
  font-family: 'Sora', Inter, sans-serif;
  font-size: 2.6rem; font-weight: 800; letter-spacing: -0.02em;
  line-height: 1; margin: 0;
  background: linear-gradient(180deg, #fff 0%, var(--primary) 130%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.auth-tagline {
  margin: 8px 0 0; font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--texto-dim); opacity: 0.85;
}

/* ── Tarjeta de cristal ── */
.auth-card {
  position: relative;
  background: rgba(255,255,255,0.045);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 24px;
  padding: 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ── Tabs (CSS-only) ── */
.auth-tab-radio { position: absolute; opacity: 0; pointer-events: none; }
.auth-tabs {
  display: flex; gap: 4px; margin-bottom: 20px;
  padding: 4px; border-radius: 14px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.06);
}
.auth-tab {
  flex: 1; text-align: center; cursor: pointer;
  padding: 9px 8px; border-radius: 10px;
  font-size: 0.85rem; font-weight: 600;
  color: var(--texto-dim);
  transition: color .2s, background .2s, box-shadow .2s;
}
#tab-login:checked ~ .auth-tabs .auth-tab[data-for="tab-login"],
#tab-registro:checked ~ .auth-tabs .auth-tab[data-for="tab-registro"] {
  color: #1a1400;
  background: linear-gradient(160deg, var(--primary-fixed) 0%, var(--primary-container) 100%);
  box-shadow: 0 4px 12px rgba(212,175,55,0.3);
}
.auth-panel { display: none; }
#tab-login:checked    ~ #panel-login    { display: block; }
#tab-registro:checked ~ #panel-registro { display: block; }

/* ── Campos con icono ── */
.auth-field { position: relative; margin-bottom: 12px; }
.auth-field-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: 20px; color: var(--texto-dim); pointer-events: none;
  transition: color .2s;
}
.auth-field input {
  width: 100%; box-sizing: border-box;
  padding: 14px 16px 14px 46px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  color: var(--texto); font-size: 1rem;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.auth-field input::placeholder { color: rgba(208,197,175,0.5); }
.auth-select, .auth-field .auth-select {
  width: 100%; box-sizing: border-box; padding: 14px 16px 14px 46px;
  background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.12); border-radius: 14px;
  color: var(--texto); font-size: 1rem; -webkit-appearance: none; appearance: none; cursor: pointer;
}
.auth-select:focus { outline: none; border-color: rgba(245,208,32,0.5); }
.auth-select option { background: #1a1622; color: var(--texto); }
/* Botón "?" de ayuda (por qué pedimos la provincia). */
.auth-help {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(245,208,32,.45);
  background: rgba(245,208,32,.12); color: #f5d020; font-weight: 900; font-size: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.auth-help:hover { background: rgba(245,208,32,.22); }
/* En el perfil el select no lleva icono a la izquierda → padding normal. */
#perfil-provincia { padding-left: 14px; }
.auth-field input:focus {
  outline: none;
  border-color: var(--primary);
  background: rgba(0,0,0,0.5);
  box-shadow: 0 0 0 3px rgba(242,202,80,0.18), 0 0 18px rgba(212,175,55,0.2);
}
.auth-field input:focus ~ .auth-field-icon,
.auth-field:focus-within .auth-field-icon { color: var(--primary); }
/* Botón ojo para ver/ocultar contraseña */
.auth-field input.has-eye { padding-right: 46px; }
.auth-eye {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; padding: 6px;
  font-size: 20px; line-height: 1; color: var(--texto-dim); transition: color .2s;
  display: flex; align-items: center; justify-content: center; border-radius: 8px;
}
.auth-eye:hover { color: var(--primary); }
.auth-eye .material-symbols-outlined { font-size: 20px; }

/* ══════════════ MODO MARCA BLANCA / 100% SOCIAL (SOCIAL_ONLY) ══════════════ */
/* Presentación impecable de juego de fichas: oculta las superficies de dinero real sin licencia
   propia (cajero de ingreso/retiro €, ranking VIP de beneficios €, saldo € de perfil). El motor de
   euros sigue intacto: un operador con licencia lo reactiva por API. Ver CASINO_INTEGRATION.md. */
body.social-only #modal-cajero,
body.social-only #seccion-ranking-vip,
body.social-only #modal-piggy,
body.social-only #btn-piggy-header,
body.social-only .real-money-only { display: none !important; }

/* ── Botón principal "Entrar a la Mesa" ── */
.btn-mesa {
  width: 100%; margin-top: 6px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 20px; border: none; cursor: pointer;
  border-radius: 14px;
  font-family: 'Sora', Inter, sans-serif;
  font-size: 1.02rem; font-weight: 700; letter-spacing: 0.01em;
  color: #1a1400;
  background: linear-gradient(160deg, var(--primary-fixed) 0%, var(--primary) 45%, var(--primary-container) 100%);
  box-shadow: 0 10px 26px rgba(212,175,55,0.4), inset 0 1px 0 rgba(255,255,255,0.45);
  transition: transform .12s, box-shadow .2s, filter .2s;
}
.btn-mesa .material-symbols-outlined { font-size: 20px; }
.btn-mesa:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 14px 34px rgba(212,175,55,0.55), inset 0 1px 0 rgba(255,255,255,0.45); }
.btn-mesa:active { transform: translateY(0); }

/* ── Botones sociales ── */
.auth-social { display: flex; gap: 10px; }
.btn-oauth {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 14px; cursor: pointer;
  border-radius: 13px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--texto); font-size: 0.9rem; font-weight: 600;
  transition: background .2s, border-color .2s, transform .12s;
}
.btn-oauth:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.22); transform: translateY(-1px); }
.btn-oauth:active { transform: translateY(0); }

/* ── Pie invitado ── */
.auth-guest {
  background: none; border: none; cursor: pointer;
  text-align: center; width: 100%;
  font-size: 0.88rem; color: var(--texto-dim);
  transition: color .2s;
}
.auth-guest strong { color: var(--primary); font-weight: 700; }
.auth-guest:hover { color: var(--texto); }

.checkbox-tyc {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 10px auto 16px; max-width: 340px; text-align: center;
  color: var(--texto-dim); font-size: 0.82rem; line-height: 1.45;
}
.checkbox-tyc input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; margin: 0; flex-shrink: 0;
  width: 22px; height: 22px; border: 2px solid rgba(245,208,32,.55); border-radius: 6px;
  background: rgba(0,0,0,.35); cursor: pointer; position: relative; transition: all .15s;
}
.checkbox-tyc input[type="checkbox"]:hover { border-color: #f5d020; }
.checkbox-tyc input[type="checkbox"]:checked { background: linear-gradient(135deg,#f5d020,#caa015); border-color: #f5d020; box-shadow: 0 0 8px rgba(245,208,32,.5); }
.checkbox-tyc input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px;
  border: solid #1a1407; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.checkbox-tyc a {
  color: var(--accento); text-decoration: underline;
  cursor: pointer;
}
.checkbox-tyc a:hover { color: #e6b422; }
.auth-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0;
  color: var(--texto-dim);
  font-size: 0.8rem;
}
.auth-divider::before,
.auth-divider::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.1); }

/* ═══════════════════════════════════════
   STITCH DESIGN UTILITIES
   ═══════════════════════════════════════ */
.glass-panel {
  background: rgba(42, 42, 42, 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.gold-gradient {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-container) 100%);
}

.gold-gradient:hover {
  filter: brightness(1.1);
}

.table-shadow {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.05);
}

/* ── Hero Section ── */
.hero-section {
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  min-height: 200px;
  display: flex;
  align-items: center;
  padding: 0 32px;
  margin-bottom: 32px;
  box-shadow: var(--sombra-fuerte);
  background-image: linear-gradient(to right, rgba(14,14,14,0.9) 0%, rgba(14,14,14,0.4) 100%), url('https://lh3.googleusercontent.com/aida-public/AB6AXuCtxLCR966sIgTPBHThpekirsRPOFB4QUn6z3qblkunNt8yJbmj-O-CqnzcUh2tblYVltLbjPpaef9s2yu-6VfHiJ9n6Nv_nNyv8sL-y_QeJBfD8P0KaxRTJE7Pkb0FKqqxeCYNepUNoHYdxoYO5FkYfYxb7NKwxfHSgICV0hCwcWfLzFDsG6QLbrlEQThzw2xl2g8AW5LfElcyFzEMf1WWsvdd9aVUVsrSdi-Hs-CRENeAaNIvms0aIh6v8gXQNZ2hEnOZyeXrjhDr');
  background-size: cover;
  background-position: center;
}

@media (max-width: 767px) {
  .hero-section {
    min-height: 160px;
    padding: 0 20px;
  }
}

.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(14,14,14,0.9) 0%, rgba(14,14,14,0.4) 100%);
  z-index: 1;
}

.hero-section > * { position: relative; z-index: 2; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(242,202,80,0.3);
  backdrop-filter: blur(8px);
  margin-bottom: 16px;
  font-size: 0.75rem;
  color: var(--secondary);
}

.hero-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--secondary);
  box-shadow: 0 0 8px rgba(136,217,130,0.5);
  display: inline-block;
}

.hero-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--on-surface);
  margin-bottom: 8px;
  line-height: 1.2;
}

.hero-desc {
  font-size: 1.1rem;
  color: var(--on-surface-variant);
  max-width: 500px;
  line-height: 1.5;
}

/* ── Lobby Layout ── */
.lobby-layout {
  display: flex;
  gap: 0;
  min-height: calc(100vh - 56px);
}

.lobby-main {
  flex: 1;
  max-width: 1600px;
  margin-left: 0;
  padding: 32px 16px;
}

@media (min-width: 768px) {
  .lobby-main {
    margin-left: var(--sidebar-width);
    padding: 32px 40px;
  }
}

@media (max-width: 767px) {
  /* Anti-overflow horizontal: el layout ocupa todo el ancho y el main puede encoger
     (min-width:0 evita el overflow por min-content de los items flex). */
  .lobby-layout { width: 100%; max-width: 100%; }
  .lobby-main {
    min-width: 0; width: 100%; max-width: 100%;
    padding: 24px 16px;
    padding-bottom: 80px;
  }
  .hero-title { font-size: 1.8rem; }
  .hero-section { padding: 0 20px; min-height: 160px; }
  .hero-desc { font-size: 0.9rem; }
}

/* ── Guest mode banner ── */
.guest-banner {
  background: rgba(42, 42, 42, 0.4);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.1);
  border-left: 4px solid var(--primary);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9rem;
  color: var(--on-surface-variant);
}

.guest-banner strong {
  color: var(--primary);
}

/* ── Sidebar ── */
.app-sidebar {
  position: fixed;
  left: 0;
  top: 56px;
  width: var(--sidebar-width);
  height: calc(100vh - 56px);
  background: var(--surface-container);
  border-right: 1px solid rgba(77,70,53,0.3);
  z-index: 40;
  display: none;
  flex-direction: column;
  padding: 16px 20px;
  gap: 16px;
  box-shadow: 4px 0 16px rgba(0,0,0,0.1);
}

@media (min-width: 768px) {
  .app-sidebar { display: flex; }
}

.sidebar-profile {
  text-align: center;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(77,70,53,0.2);
  margin-bottom: 8px;
}

.sidebar-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--surface-container-highest);
  border: 2px solid var(--primary);
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.sidebar-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--on-surface);
}

.sidebar-status {
  font-size: 0.7rem;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 4px;
  font-weight: 600;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border-radius: 10px;
  color: var(--on-surface-variant);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: all .2s;
  cursor: pointer;
}

.sidebar-link:hover {
  background: var(--surface-container-highest);
  color: var(--on-surface);
}

.sidebar-link.active {
  background: var(--surface-container-highest);
  color: var(--primary);
  font-weight: 700;
}

.sidebar-link .link-icon {
  font-size: 1.2rem;
  width: 24px;
  text-align: center;
}

.sidebar-link .admin-badge {
  margin-left: auto;
  font-size: 0.6rem;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(242,202,80,0.15);
  color: var(--primary);
  border: 1px solid rgba(242,202,80,0.2);
  font-weight: 600;
  letter-spacing: 0.5px;
}

.sidebar-footer {
  padding-top: 16px;
  border-top: 1px solid rgba(77,70,53,0.2);
}

.sidebar-points-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--on-surface);
}

/* ── Footer ── */
.app-footer {
  background: var(--surface-dim);
  border-top: 1px solid rgba(77,70,53,0.3);
  padding: 10px 0;          /* comprimido (antes 24px) */
  margin-top: auto;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 18px;
  gap: 8px;                 /* comprimido (antes 16px) */
}

.footer-links {
  display: flex;
  gap: 20px;
}

.footer-links a {
  font-size: 0.75rem;
  color: var(--on-surface-variant);
  text-decoration: none;
  transition: color .2s;
}

.footer-links a:hover {
  color: var(--primary);
}

.footer-brand {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--on-surface);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.footer-copy {
  font-size: 0.7rem;
  color: var(--on-surface-variant);
}

@media (max-width: 767px) {
  .footer-content { flex-direction: column; text-align: center; }
  .footer-links { flex-wrap: wrap; justify-content: center; }
}

/* ── Header info (game screen) ── */
.header-info { font-size: 0.9rem; color: var(--texto-dim); }
.header-info strong { color: var(--texto); }

/* ── Mobile Bottom Nav ── */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: var(--surface-container-highest);
  border-top: 1px solid rgba(77,70,53,0.3);
  z-index: 50;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
}

@media (max-width: 767px) {
  .mobile-bottom-nav { display: flex; }
}

.mobile-nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--on-surface-variant);
  text-decoration: none;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 12px;
  transition: color .2s;
}

.mobile-nav-link.active {
  color: var(--primary);
}

.mobile-nav-link .nav-icon {
  font-size: 1.3rem;
}

/* ═══════════════════════════════════════
   BOTONES
   ═══════════════════════════════════════ */
.btn-primario {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 12px 28px;
  background: linear-gradient(135deg, #d4a017, #b8890e);
  color: var(--texto-oscuro);
  border: none; border-radius: var(--radio-sm);
  font-size: 0.95rem; font-weight: 600;
  cursor: pointer; transition: all .2s;
  box-shadow: 0 2px 6px rgba(212,160,23,0.3);
}
.btn-primario:hover { background: linear-gradient(135deg, #e6b422, #c99a14); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(212,160,23,0.4); }
.btn-primario:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-secundario {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 20px;
  background: rgba(255,255,255,0.05);
  color: var(--texto);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radio-sm);
  font-size: 0.9rem;
  cursor: pointer; transition: all .2s;
}
.btn-secundario:hover { background: rgba(255,255,255,0.1); border-color: var(--accento); transform: translateY(-1px); }

.btn-sm { padding: 6px 14px; font-size: 0.85rem; }

/* ═══════════════════════════════════════
   LOBBY — TARJETAS DE MESA ESTILO CASINO
   ═══════════════════════════════════════ */
#pantalla-lobby {
  max-width: 900px; margin: 0 auto; padding: 32px 24px;
}
.lobby-header {
  text-align: center;
  margin-bottom: 32px;
}
.lobby-header h2 {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accento);
  text-shadow: 0 0 20px rgba(212,160,23,0.25);
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.header-subtitle {
  font-size: 0.9rem;
  color: var(--texto-dim);
}

/* ── Grid de tarjetas ── */
.mesas-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .mesas-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .mesas-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Tarjeta individual ── */
.mesa-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(18, 18, 18, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 28px 20px 22px;
  transition: all 0.3s cubic-bezier(.34,1.56,.64,1);
  box-shadow:
    0 8px 32px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.04);
  overflow: hidden;
}

/* Barra de acento superior según nivel */
.mesa-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: 16px 16px 0 0;
}
.mesa-card.card-low::before    { background: #2e7d32; }
.mesa-card.card-medio::before  { background: #ffbf00; }
.mesa-card.card-vip::before    { background: #c62828; }

.mesa-card:hover {
  transform: translateY(-6px);
  border-color: #d4af37;
  box-shadow:
    0 0 15px rgba(212, 175, 55, 0.4),
    0 12px 40px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ── Icono/emoji de nivel ── */
.mesa-card .mesa-emoji {
  font-size: 2.2rem;
  margin-bottom: 8px;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}

/* ── Nombre de mesa ── */
.mesa-card .mesa-nombre {
  font-size: 1.15rem;
  font-weight: 700;
  color: #f0e6d3;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

/* ── Nivel / rareza ── */
.mesa-card .mesa-nivel {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 600;
  margin-bottom: 16px;
}
.mesa-card.card-low .mesa-nivel    { color: #2ecc71; }
.mesa-card.card-medio .mesa-nivel  { color: #f1c40f; }
.mesa-card.card-vip .mesa-nivel    { color: #e74c3c; }

/* ── Entrada (blinds) ── */
.mesa-card .mesa-entrada {
  text-align: center;
  margin-bottom: 16px;
}
.mesa-card .mesa-entrada-label {
  font-size: 0.7rem;
  color: var(--texto-dim);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 4px;
}
.mesa-card .mesa-entrada-valor {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--accento);
  text-shadow: 0 0 12px rgba(212,160,23,0.15);
  line-height: 1.1;
}
.mesa-card .mesa-entrada-sub {
  font-size: 0.8rem;
  color: var(--texto-dim);
  margin-top: 2px;
}
.mesa-card .mesa-entrada-sub strong {
  color: var(--texto);
}

/* ── Separador decorativo ── */
.mesa-card .mesa-divider {
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  margin: 0 auto 14px;
}

/* ── Jugadores ── */
.mesa-card .mesa-jugadores-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--texto-dim);
  margin-bottom: 16px;
}
.mesa-card .mesa-jugadores-info .ocupados {
  color: var(--texto);
  font-weight: 600;
}

/* Estado llena */
.mesa-card.llena .mesa-jugadores-info .ocupados { color: var(--rojo); }
.mesa-card.llena { opacity: 0.65; }

/* ── Botón Sentarse ── */
.btn-sentarse {
  width: 100%;
  padding: 12px 20px;
  background: linear-gradient(135deg, #d4af37, #f2ca50);
  color: #1a0f0a;
  border: none;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(212,160,23,0.2);
  letter-spacing: 1px;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}
.btn-sentarse::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.1) 50%, transparent 60%);
  background-size: 200% 100%;
  background-position: 100% 0;
  transition: background-position 0.4s;
}
.btn-sentarse:hover::after {
  background-position: -100% 0;
}
.btn-sentarse:hover {
  background: linear-gradient(135deg, #f2ca50, #d4af37);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212,160,23,0.3);
  background-size: 200% auto;
  animation: shimmer 2s linear infinite;
}
.btn-sentarse:active {
  transform: translateY(0);
}
.btn-sentarse:disabled {
  background: rgba(255,255,255,0.06);
  color: var(--texto-dim);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ── Animación shimmer en hover (desde Stitch) ── */
.shimmer-hover {
  background-size: 200% auto;
}
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ── Brillo dorado al hover de la tarjeta (desde Stitch) ── */
.card-hover-gold:hover {
  border-color: #d4af37 !important;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.4), 0 12px 40px rgba(0,0,0,0.5) !important;
}

/* ── Sobre brillante en hover ── */
.mesa-card::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.02) 0%, transparent 50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
}
.mesa-card:hover::after {
  opacity: 1;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .mesas-grid { grid-template-columns: 1fr; gap: 16px; }
  .lobby-header h2 { font-size: 1.4rem; }
  .mesa-card { padding: 22px 16px 18px; }
  .mesa-card .mesa-entrada-valor { font-size: 1.5rem; }
}

/* ═══════════════════════════════════════
   SALA DE ESPERA
   ═══════════════════════════════════════ */
#pantalla-sala {
  max-width: 700px; margin: 0 auto; padding: 24px;
}
.sala-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 24px;
}
.asientos-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
  margin-bottom: 24px;
}
.asiento {
  background: linear-gradient(145deg, rgba(0,0,0,0.35), rgba(0,0,0,0.2));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radio);
  padding: 20px;
  display: flex; flex-direction: column; gap: 4px;
  transition: all .25s;
  box-shadow: var(--sombra-suave);
}
.asiento:hover { border-color: rgba(255,255,255,0.15); transform: translateY(-2px); box-shadow: var(--sombra-media); }
.asiento.yo { border-color: var(--accento); background: rgba(212,160,23,0.08); box-shadow: 0 0 12px rgba(212,160,23,0.15); }
.asiento.listo { border-color: var(--verde); box-shadow: 0 0 12px rgba(39,174,96,0.15); }
.asiento.desconectado { opacity: .5; }
.asiento-vacio { color: var(--texto-dim); font-style: italic; }
.asiento-idx { font-size: 0.75rem; color: var(--texto-dim); text-transform: uppercase; letter-spacing: .5px; }
.asiento-nombre { font-size: 1.05rem; font-weight: 600; }
.asiento-puntos { font-size: 0.9rem; color: var(--texto-dim); }
.asiento-badge { display: inline-block; font-size: 0.75rem; padding: 2px 8px; border-radius: 4px; }
.badge-yo { background: rgba(212,160,23,0.2); color: var(--accento); }
.badge-desconectado { background: rgba(192,57,43,0.2); color: var(--rojo); }

.sala-actions { display: flex; gap: 12px; justify-content: center; margin-top: 20px; }

/* ═══════════════════════════════════════
   JUEGO — MESA
   ═══════════════════════════════════════ */
/* La mesa de juego SOLO se muestra cuando su pantalla está activa (antes el id forzaba
   display:flex siempre, ganándole a .pantalla{display:none} → la mesa aparecía debajo
   del lobby). Ahora se oculta salvo en la vista de partida. */
#pantalla-juego.activa {
  height: calc(100vh - 60px);
  display: flex; flex-direction: column;
}

/* ── Sidebar ── */
.mesa-sidebar {
  display: none;
  width: var(--sidebar-width);
  background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.35));
  border-right: 1px solid rgba(255,255,255,0.06);
  padding: 16px;
  overflow-y: auto;
}
.mesa-sidebar-titulo {
  font-size: 0.8rem; color: var(--texto-dim);
  text-transform: uppercase; letter-spacing: 1.5px;
  margin-bottom: 14px;
  padding: 0 4px;
}
.mesa-jugador {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  border-radius: var(--radio-sm);
  margin-bottom: 6px;
  background: var(--bg-tarjeta);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  transition: all .25s;
}
.mesa-jugador:hover {
  border-color: rgba(255,255,255,0.12);
  background: var(--bg-tarjeta-hover);
}
.mesa-jugador.turno-activo {
  background: rgba(212,160,23,0.1);
  border-color: var(--accento);
  border-left: 3px solid var(--accento);
  box-shadow: 0 0 10px rgba(212,160,23,0.15), 0 1px 4px rgba(0,0,0,0.2);
}
.mesa-jugador.retirado { opacity: .4; }
.mj-badge { font-size: 0.8rem; }
.mj-nombre  { flex: 1; font-size: 0.9rem; font-weight: 500; }
.mj-cartas  { font-size: 0.85rem; color: var(--texto-dim); background: rgba(0,0,0,0.2); padding: 2px 8px; border-radius: 4px; }
.mj-puntos  { font-size: 0.85rem; font-weight: 700; color: var(--accento); }

/* (Eliminada .mesa-zona — zona de juego de la mesa ANTIGUA. Clase muerta.) */

/* (Eliminados Rivales/HUD/Mano de la mesa ANTIGUA — #zona-rivales / .rival-card /
   .rival-dorsos/badges/nombre/puntos / .hud-central / .hud-item / .hud-label /
   .hud-value / .zona-mano / .mano-jugador-label / .mano-container. Clases muertas.) */

/* ═══════════════════════════════════════
   CARTAS — IMÁGENES REALES
   ═══════════════════════════════════════ */
.carta {
  position: relative;
  width: 90px; height: 126px;
  background: transparent;
  border: none;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sombra-suave);
  transition: all .25s cubic-bezier(.34,1.56,.64,1);
  cursor: default;
  user-select: none;
  overflow: visible;
  animation: dealCard .26s cubic-bezier(.34,1.56,.64,1) both;
}
.carta:hover { transform: translateY(-10px) scale(1.04); box-shadow: var(--sombra-fuerte); }

@keyframes dealCard {
  0%   { transform: translateY(-60px) scale(0.5) rotateZ(-10deg); opacity: 0; }
  100% { transform: translateY(0) scale(1) rotateZ(0deg); opacity: 1; }
}

.carta-img {
  width: 100%; height: 100%;
  object-fit: contain;
  border-radius: 8px;
  display: block;
  transition: filter .25s, transform .25s;
}
/* Cartas (caras y dorsos): bloquear menú contextual / selección / arrastre nativo en móvil → al
   mantener pulsado (squeeze/peek) el navegador NO abre "guardar imagen" ni la arrastra. NO se toca
   pointer-events aquí (los clicks de descarte siguen funcionando; el squeeze pone pointer-events en su CSS). */
.carta-img, .dorso-carta-img, .hist-carta-img, .vm-carta, .winner-carta {
  -webkit-touch-callout: none;
  -webkit-user-select: none; user-select: none;
  -webkit-user-drag: none;
}
.carta:hover .carta-img {
  filter: brightness(1.05);
}

.carta.especial .carta-img {
  animation: glowPulse 2s ease-in-out infinite;
  box-shadow: 0 0 10px rgba(212,160,23,0.5);
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(212,160,23,0.4); }
  50%      { box-shadow: 0 0 18px rgba(212,160,23,0.8); }
}

.carta-check {
  position: absolute; top: 4px; right: 4px;
  width: 20px; height: 20px;
  border: 2px solid rgba(0,0,0,0.2);
  border-radius: 50%;
  background: transparent;
  display: none;
  z-index: 2;
}

.carta.seleccionable { cursor: pointer; }
.carta.seleccionable:hover {
  transform: translateY(-10px) scale(1.04);
  filter: brightness(1.08);
}
.carta.descartada {
  opacity: .45; transform: translateY(10px) scale(0.9);
  filter: grayscale(.6);
  animation: none;
}
.carta.descartada .carta-check {
  display: flex; align-items: center; justify-content: center;
  background: var(--rojo);
  border-color: var(--rojo);
  color: #fff; font-size: .7rem;
}

.dorso-carta-img {
  width: 45px; height: 63px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  transition: transform .2s, box-shadow .2s;
}
/* ── SHOWDOWN ÉPICO: cartas del ganador (escala + elevación + resplandor dorado, z alto) ── */
.carta-ganadora {
  transform: scale(1.2) translateY(-8px) !important; z-index: 50 !important; position: relative;
  filter: drop-shadow(0 0 20px rgba(255,215,0,0.85)) !important;
  transition: transform .4s ease, filter .4s ease;
}
@media (max-width: 767px) { .carta-ganadora { transform: scale(1.3) translateY(-6px) !important; } }
/* Mensaje de victoria premium en el chat de la mesa. */
.chat-msg.chat-victoria {
  color: #facc15; font-weight: 700; text-align: center;
  background: rgba(120,53,15,0.22); border: 1px solid rgba(250,204,21,0.3);
  border-radius: 8px; padding: 8px 10px; margin: 4px 0;
}
.chat-msg.chat-victoria .chat-texto { color: #facc15; }

/* ── FLIP 3D PARA SHOWDOWN ── */
.carta-flip {
  perspective: 800px;
}
.carta-flip-inner {
  position: relative;
  width: 100%; height: 100%;
  transition: transform .35s ease-out;
  transform-style: preserve-3d;
}
.carta-flip .carta-flip-inner.revelada {
  transform: rotateY(180deg);
}
/* Resplandor dorado para cartas del ganador */
.carta-flip-inner.ganadora.revelada {
  filter: drop-shadow(0 0 8px rgba(212,160,23,0.7));
}
.carta-flip-inner.ganadora.revelada .carta-img {
  filter: brightness(1.1) saturate(1.2);
}
.carta-cara, .carta-dorso-cara {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.carta-dorso-cara img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 8px;
}
.carta-cara {
  transform: rotateY(180deg);
}

/* ═══════════════════════════════════════
   SHOWDOWN — MANOS REVELADAS
   ═══════════════════════════════════════ */
.manos-reveladas {
  max-width: 600px; margin: 0 auto;
  animation: fadeIn .5s ease-out;
}
.showdown-titulo {
  text-align: center; font-size: 1.3rem; font-weight: 700;
  color: var(--accento); margin-bottom: 20px;
  text-shadow: 0 0 12px rgba(212,160,23,0.3);
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}
.mano-revelada-item {
  background: linear-gradient(145deg, rgba(0,0,0,0.4), rgba(0,0,0,0.2));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radio);
  padding: 16px; margin-bottom: 10px;
  transition: all .3s;
  box-shadow: var(--sombra-suave);
}
.mano-revelada-item.ganador {
  border-color: var(--accento);
  background: rgba(212,160,23,0.1);
  box-shadow: 0 0 24px rgba(212,160,23,0.3), var(--sombra-suave);
  animation: ganadorGlow 1.5s ease-in-out infinite;
}
@keyframes ganadorGlow {
  0%, 100% { box-shadow: 0 0 15px rgba(212,160,23,0.25), var(--sombra-suave); }
  50%      { box-shadow: 0 0 35px rgba(212,160,23,0.5), var(--sombra-suave); }
}
.mano-revelada-item:not(.ganador) {
  opacity: .7;
}
.mano-revelada-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
}
.mano-revelada-nombre { font-weight: 600; flex: 1; }
.badge-ganador {
  font-size: 0.8rem;
  background: linear-gradient(135deg, rgba(212,160,23,0.3), rgba(212,160,23,0.15));
  color: var(--accento);
  padding: 3px 12px;
  border-radius: 4px;
  border: 1px solid rgba(212,160,23,0.2);
  animation: badgePop .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes badgePop {
  0%   { transform: scale(0); }
  100% { transform: scale(1); }
}
.mano-revelada-pts { font-size: 0.9rem; color: var(--texto-dim); }
.mano-revelada-cartas { display: flex; gap: 8px; justify-content: center; }

/* ── CONFETI PARA GILEY ── */
.giley-confeti {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}
.confeti-pieza {
  position: absolute;
  top: -10px;
  width: 10px; height: 10px;
  animation: confetiFall linear forwards;
}
@keyframes confetiFall {
  0%   { transform: translateY(0) rotateZ(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotateZ(720deg); opacity: 0; }
}

/* ═══════════════════════════════════════
   REMATCH
   ═══════════════════════════════════════ */
.btn-rematch {
  display: block;
  margin: 1.5em auto 0;
  padding: 0.8em 2em;
  font-size: 1.1rem;
  font-weight: 700;
  font-family: inherit;
  color: #fff;
  background: linear-gradient(135deg, #2e7d32, #388e3c);
  border: 2px solid #4caf50;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(76,175,80,0.3);
  transition: all 0.2s ease;
}
.btn-rematch:hover:not(:disabled) {
  background: linear-gradient(135deg, #388e3c, #43a047);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(76,175,80,0.4);
}
.btn-rematch:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}
.btn-rematch.oculto { display: none; }

/* ═══════════════════════════════════════
   ACCIONES
   ═══════════════════════════════════════ */
#acciones {
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 14px 20px;
  display: flex; gap: 12px; align-items: center; justify-content: center;
  flex-wrap: wrap;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
}
#acciones.oculto { display: none; }

.btn-accion {
  padding: 12px 24px; border: none; border-radius: var(--radio-sm);
  font-size: 0.9rem; font-weight: 700;
  cursor: pointer; transition: all .2s;
  letter-spacing: .3px;
}
.btn-accion:hover { transform: translateY(-2px); }
.btn-accion:active { transform: translateY(0); }

.btn-igualar {
  background: linear-gradient(135deg, #27ae60, #1e8449);
  color: #fff;
  box-shadow: 0 2px 8px rgba(39,174,96,0.3);
}
.btn-igualar:hover { background: linear-gradient(135deg, #2ecc71, #27ae60); box-shadow: 0 4px 14px rgba(39,174,96,0.4); }

.btn-subir {
  background: linear-gradient(135deg, #d4a017, #b8890e);
  color: var(--texto-oscuro);
  box-shadow: 0 2px 8px rgba(212,160,23,0.3);
}
.btn-subir:hover { background: linear-gradient(135deg, #e6b422, #c99a14); box-shadow: 0 4px 14px rgba(212,160,23,0.4); }

.btn-retirarse {
  background: linear-gradient(135deg, #c0392b, #a93226);
  color: #fff;
  box-shadow: 0 2px 8px rgba(192,57,43,0.3);
}
.btn-retirarse:hover { background: linear-gradient(135deg, #e74c3c, #c0392b); box-shadow: 0 4px 14px rgba(192,57,43,0.4); }

.label-apuesta {
  font-size: 0.8rem; color: var(--texto-dim); margin: 0 6px;
}

.input-apuesta {
  width: 80px; padding: 10px 12px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radio-sm);
  color: var(--texto); font-size: 0.95rem;
  text-align: center;
  transition: border-color .2s;
}
.input-apuesta:focus {
  outline: none;
  border-color: var(--accento);
  box-shadow: 0 0 0 3px rgba(212,160,23,0.15);
}

/* ═══════════════════════════════════════
   TURNO BANNER & COUNTDOWN
   ═══════════════════════════════════════ */
#turno-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 20px;
  background: linear-gradient(135deg, rgba(212,160,23,0.2), rgba(212,160,23,0.05));
  border-bottom: 1px solid rgba(212,160,23,0.15);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
#turno-banner.oculto { display: none; }
#turno-texto { font-weight: 700; font-size: 0.95rem; color: var(--accento); }

.countdown-circle {
  position: relative; width: 40px; height: 40px;
}
.countdown-bg { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 4; }
.countdown-arc {
  fill: none; stroke: var(--accento); stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 113; stroke-dashoffset: 0;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dashoffset .3s;
  filter: drop-shadow(0 0 3px rgba(212,160,23,0.4));
}
.countdown-arc.urgente { stroke: var(--rojo); }
.countdown-text {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 700;
  transition: color .3s;
}
.countdown-text.urgente {
  color: var(--rojo);
  animation: urgencia 0.5s ease-in-out infinite alternate;
}
@keyframes urgencia {
  from { transform: scale(1); }
  to   { transform: scale(1.2); }
}

#turno-banner.tu-turno {
  animation: turnoFlash 1s ease-in-out 3;
}
@keyframes turnoFlash {
  0%, 100% { background: linear-gradient(135deg, rgba(212,160,23,0.2), rgba(212,160,23,0.05)); }
  50%      { background: linear-gradient(135deg, rgba(212,160,23,0.45), rgba(212,160,23,0.2)); }
}

/* ═══════════════════════════════════════
   SUBIR SIN VER
   ═══════════════════════════════════════ */
.panel {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 22px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 -2px 10px rgba(0,0,0,0.15);
}
.panel.oculto { display: none; }
.panel h3 { font-size: 1.1rem; color: var(--accento); }
.panel p { color: var(--texto-dim); }
.panel-actions { display: flex; gap: 14px; }

/* ═══════════════════════════════════════
   DESCARTE PANEL
   ═══════════════════════════════════════ */
#panel-descarte {
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 18px 20px;
  text-align: center;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.15);
}
#panel-descarte.oculto { display: none; }
#panel-descarte p { margin-bottom: 8px; color: var(--texto-dim); }
#panel-descarte .btn-primario { margin-top: 8px; }

/* ═══════════════════════════════════════
   LOG PUBLICO
   ═══════════════════════════════════════ */
#log-publico {
  max-height: 150px; overflow-y: auto;
  padding: 8px 16px;
  background: rgba(0,0,0,0.35);
  border-top: 1px solid rgba(255,255,255,0.05);
  font-size: 0.85rem;
  line-height: 1.6;
}
#log-publico::-webkit-scrollbar { width: 4px; }
#log-publico::-webkit-scrollbar-track { background: transparent; }
#log-publico::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
.log-linea { padding: 2px 0; color: var(--texto-dim); }
.log-linea.yo { color: var(--texto); }
.log-linea.mano { color: var(--accento); font-weight: 600; }
.log-linea.sep { color: rgba(212,175,55,.45); text-align: center; font-size: .7rem; letter-spacing: .08em; margin: 4px 0; }

/* ═══════════════════════════════════════
   FICHA ANIMADA
   ═══════════════════════════════════════ */
.ficha-anim {
  position: fixed; z-index: 9998;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffe066, #d4a017);
  border: 2px solid #b8860b;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  pointer-events: none;
  animation: fichaFly .34s ease-in forwards;
}
/* Mesa VIP_EUR: la "ficha" que vuela es una MONEDA de € (no ficha de casino). */
.ficha-anim.ficha-vip {
  width: 28px; height: 28px; border: none;
  background: url('assets/1_euro.png') center/contain no-repeat;
  box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}
/* (8) La ficha vuela en ARCO (sube en el punto medio) en vez de recto → más vivo. */
.ficha-anim { animation: fichaFly .44s cubic-bezier(.4,0,.5,1) forwards; }
@keyframes fichaFly {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  50%  { transform: translate(calc(var(--fx) * .5), calc(var(--fy) * .5 - 28px)) scale(.9); opacity: 1; }
  100% { transform: translate(var(--fx), var(--fy)) scale(0.45); opacity: 0; }
}
/* Pulso del BOTE cuando sube (feedback rápido). */
@keyframes potBump { 0%,100% { transform: scale(1); } 42% { transform: scale(1.17); } }
.mesa6-pot.bump { animation: potBump .32s cubic-bezier(.34,1.56,.64,1); }
.mesa6-pot.bump .mesa6-pot-val { color: #ffe066; }

/* ════════════════ MEJORAS VISUALES (v193) ════════════════ */
/* (4) MONTÓN del BOTE: CENTRADO en el flujo de la mesa, justo debajo de "BOTE" (como una mesa real). */
.bote-pila { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center;
  gap: 0; max-width: 260px; min-height: 0; margin: 0 auto; pointer-events: none; position: relative; z-index: 6; }
.bote-pila:empty { display: none; }
/* Fichas (mesas de fichas): FICHAS DE PÓKER redondas APRETADAS en una sola pila (fajo). */
.bote-pila .bp-chip { width: 24px; height: 24px; margin: 0 -18px 0 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #f8dd7a, #d4a017 62%, #a9810f);
  border: 2px dashed rgba(255,255,255,.55); box-shadow: 0 2px 4px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.25);
  animation: bpIn .2s ease both; }
.bote-pila .bp-chip:last-child { margin-right: 0; }
.bote-pila .bp-chip:nth-child(3n)   { background: radial-gradient(circle at 50% 38%, #f0f0f4, #aeb4bd 62%, #878d96); }
.bote-pila .bp-chip:nth-child(3n+1) { background: radial-gradient(circle at 50% 38%, #f08a8a, #d23a3a 62%, #9e2020); }
@keyframes bpIn { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
/* MÓVIL: fichas/billetes del bote más compactos para que no se vean amontonados feos. */
@media (max-width: 640px) {
  .bote-pila { max-width: 168px; }
  .bote-pila .bp-chip { width: 19px; height: 19px; margin: 0 -14px 0 0; border-width: 1.5px; }   /* fichas bien apretadas */
}
/* MESAS REALES (€): MONTÓN de billetes/monedas reales, solapados, como dinero tirado al centro. */
.bote-pila.bote-pila-eur { gap: 0; filter: drop-shadow(0 4px 7px rgba(0,0,0,.55)); }
.bote-pila-eur .bp-pz { display: block; box-shadow: 0 2px 8px rgba(0,0,0,.6); animation: bpIn .22s ease both; }
/* Billetes muy solapados = FAJO; monedas muy solapadas = PILA. clamp() adapta a móvil sin desbordar. */
.bote-pila-eur .bp-billete { width: clamp(60px, 17vw, 82px); height: auto; border-radius: 4px; margin: 0 -54px; }
.bote-pila-eur .bp-moneda  { width: clamp(36px, 10vw, 48px); height: auto; aspect-ratio: 1; border-radius: 50%; margin: 0 -30px; }

/* ── BETA: badge en el logo de login + modal de bienvenida ── */
.auth-brand { position: relative; }
.beta-badge {
  position: absolute; top: -4px; right: 8px; z-index: 3;
  background: linear-gradient(110deg,#f5d020,#ff7a18); color: #1a1208;
  font: 900 11px/1 'Sora', sans-serif; letter-spacing: .14em; padding: 4px 9px; border-radius: 8px;
  box-shadow: 0 3px 10px rgba(255,122,24,.45); transform: rotate(7deg);
}
.modal-beta-ov {
  position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
  background: rgba(6,8,14,.78); backdrop-filter: blur(6px); padding: 20px; animation: betaFade .25s ease;
}
@keyframes betaFade { from { opacity: 0; } to { opacity: 1; } }
.modal-beta-card {
  position: relative; max-width: 380px; width: 100%; text-align: center;
  background: linear-gradient(160deg,#1a1410,#0e1118); border: 1px solid rgba(245,208,32,.4);
  border-radius: 18px; padding: 32px 24px 22px; box-shadow: 0 18px 50px rgba(0,0,0,.6);
  animation: betaPop .3s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes betaPop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-beta-tag {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(110deg,#f5d020,#ff7a18); color: #1a1208;
  font: 900 13px/1 'Sora', sans-serif; letter-spacing: .2em; padding: 6px 16px; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(255,122,24,.5);
}
.modal-beta-card h2 { margin: 8px 0 10px; color: #f5d77a; font-size: 1.3rem; }
.modal-beta-card p { margin: 0 0 12px; color: #cdd3dc; font-size: .92rem; line-height: 1.5; }
.modal-beta-card .modal-beta-nota { color: #9aa0ad; font-size: .84rem; }

/* (6) Aro de TURNO depletándose alrededor del avatar activo (countdown visual). */
@property --turn-deg { syntax: '<angle>'; inherits: false; initial-value: 360deg; }
.seat-turn-ring {
  position: absolute; inset: -5px; border-radius: 50%; z-index: 0; pointer-events: none;
  background: conic-gradient(#ffd86b var(--turn-deg, 360deg), rgba(255,255,255,.14) 0);
  -webkit-mask: radial-gradient(transparent 57%, #000 59%); mask: radial-gradient(transparent 57%, #000 59%);
  animation-name: turnDeplete; animation-timing-function: linear; animation-fill-mode: forwards;
}
@keyframes turnDeplete { from { --turn-deg: 360deg; } to { --turn-deg: 0deg; } }
.es-turno-wrap .seat-avatar { box-shadow: 0 0 0 2px #ffd86b, 0 0 14px rgba(255,216,107,.6); }

/* (1) LÍDER de equity: aro VERDE pulsante. */
.seat-avatar-wrap.eq-leader .seat-avatar { animation: eqLeaderPulse 1s ease-in-out infinite; }
#hud-puntuacion.eq-leader { animation: eqLeaderBox 1s ease-in-out infinite; border-radius: 12px; }
@keyframes eqLeaderPulse { 0%,100% { box-shadow: 0 0 0 2px #2bd66e, 0 0 10px rgba(43,214,110,.5); } 50% { box-shadow: 0 0 0 3px #4dff90, 0 0 22px rgba(43,214,110,.9); } }
@keyframes eqLeaderBox  { 0%,100% { box-shadow: 0 0 0 2px rgba(43,214,110,.6); } 50% { box-shadow: 0 0 0 3px rgba(77,255,144,.95), 0 0 18px rgba(43,214,110,.6); } }

/* (2) FOCO ALL-IN: oscurece el tapete + atenúa a los retirados (spotlight a los vivos). */
.mesa6-table.allin-foco .mesa6-felt { filter: brightness(.5) saturate(.85); transition: filter .5s ease; }
.mesa6-table.allin-foco .seat-player.retirado { opacity: .32; filter: grayscale(.65); }

/* (7) Profundidad + textura del tapete + sombra de los pods. */
.mesa6-felt::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.07), transparent 55%),
              radial-gradient(ellipse at 50% 125%, rgba(0,0,0,.6), transparent 60%);
  box-shadow: inset 0 0 70px rgba(0,0,0,.5);
}
.mesa6-seat { filter: drop-shadow(0 6px 10px rgba(0,0,0,.42)); }

/* (3) SHOWDOWN: el ganador hace zoom + brillo dorado; los perdedores se atenúan en gris. */
.manos-reveladas .mano-revelada-item { transition: transform .4s cubic-bezier(.34,1.56,.64,1), opacity .4s ease, filter .4s ease; }
.manos-reveladas .mano-revelada-item.ganador { transform: scale(1.06); }
.manos-reveladas .mano-revelada-item.ganador .mano-revelada-cartas { filter: drop-shadow(0 0 14px rgba(255,216,107,.9)); }
.manos-reveladas .mano-revelada-item:not(.ganador) { opacity: .55; filter: grayscale(.6); }

/* ═══════════════════════════════════════
   RESPONSIVE — SIDEBAR EN ANCHO
   ═══════════════════════════════════════ */
@media (min-width: 860px) {
  .mesa-sidebar { display: block; }
  #pantalla-juego {
    flex-direction: row;
  }
}

/* ═══════════════════════════════════════
   WALLET CONNECT & ETH DISPLAY
   ═══════════════════════════════════════ */
.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.wallet-section {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 14px;
  border-right: 1px solid rgba(255,255,255,0.08);
}

.eth-balance {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accento);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
  padding: 4px 10px;
  white-space: nowrap;
  font-family: 'SF Mono', 'Consolas', monospace;
  letter-spacing: 0.3px;
}
.eth-balance .eth-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #555;
  display: inline-block;
  flex-shrink: 0;
}
.eth-balance.connected {
  color: var(--accento);
  border-color: rgba(212, 175, 55, 0.25);
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.1);
}
.eth-balance.connected .eth-dot {
  background: #88d982;
  animation: pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(136, 217, 130, 0.6); }
  50% { box-shadow: 0 0 0 6px rgba(136, 217, 130, 0); }
}

.btn-wallet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 18px;
  background: linear-gradient(135deg, #627eea, #4c6ad4);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(98,126,234,0.2);
}
.btn-wallet:hover {
  background: linear-gradient(135deg, #7a92f0, #627eea);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(98,126,234,0.3);
  box-shadow: 0 0 15px rgba(98,126,234,0.5);
}
.btn-wallet:active {
  transform: translateY(0);
}
.btn-wallet.connected {
  background: linear-gradient(135deg, #27ae60, #1e8449);
  box-shadow: 0 2px 8px rgba(39,174,96,0.2);
}
.btn-wallet.connected:hover {
  background: linear-gradient(135deg, #2ecc71, #27ae60);
  box-shadow: 0 4px 14px rgba(39,174,96,0.3);
}

.wallet-icon {
  font-size: 1rem;
  line-height: 1;
}

/* ── Separador wallet / puntos ── */
.wallet-divider {
  width: 1px;
  height: 24px;
  background: rgba(255,255,255,0.08);
  flex-shrink: 0;
}

/* ── Botón Jugar como Invitado ── */
.btn-invitado {
  display: block;
  width: 100%;
  padding: 16px 20px;
  background: linear-gradient(135deg, #2a2a2a, #1c1c1e);
  color: var(--texto);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radio);
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .25s ease;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.btn-invitado:hover {
  background: linear-gradient(135deg, #353534, #2a2a2a);
  border-color: var(--accento);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.4), 0 0 12px rgba(212,160,23,0.1);
}
.btn-invitado:active {
  transform: translateY(0);
}

.points-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.puntos-display {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700 !important;
  color: var(--accento) !important;
  background: rgba(212,160,23,0.08);
  border: 1px solid rgba(212,160,23,0.12);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 0.85rem;
}
.puntos-display .chip-icon {
  color: #2e7d32;
  font-size: 1rem;
}

@media (max-width: 700px) {
  .header { padding: 10px 14px; flex-wrap: wrap; gap: 6px; }
  .header-info { font-size: 0.75rem; }
  .header-logo { font-size: 1rem; }
  .header-right { flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
  .wallet-section { padding-right: 0; border-right: none; flex-wrap: wrap; }
  .eth-balance { font-size: 0.75rem; padding: 3px 8px; }
  .btn-wallet { font-size: 0.75rem; padding: 5px 12px; }
  .wallet-text { display: none; }
  .asientos-grid { grid-template-columns: 1fr; }
  .carta { width: 60px; height: 84px; }
  .dorso-carta-img { width: 34px; height: 48px; }
  .btn-accion { padding: 8px 14px; font-size: 0.8rem; }
  .mano-jugador { gap: 6px; }
}

/* (Eliminada la MESA ANTIGUA — .juego-wrapper / .mesa-tapete / .mesa-centro /
   .rival-slot / .pos-* / .rival-card / .hud-central / .hud-*-c / .hud-divider /
   .zona-jugador-local. Clases muertas: ya no existen en HTML ni en JS. La mesa
   actual es .mesa6-* y su HUD/bote viven en .mesa6-centro / #bote-destino más abajo.) */

/* Mano del jugador (héroe — sigue en uso) */
.mano-jugador {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 4px 0;
}

/* Zona de acciones */
.zona-acciones {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Panel de acción flotante */
.panel-accion {
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radio);
  padding: 16px 20px;
  text-align: center;
}
.panel-accion.oculto { display: none; }
.panel-titulo {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accento);
  margin-bottom: 6px;
}
.panel-desc {
  font-size: .85rem;
  color: var(--texto-dim);
  margin-bottom: 10px;
}
.panel-botones {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.btn-oro {
  padding: 10px 24px;
  background: linear-gradient(135deg, #d4a017, #b8890e);
  color: var(--texto-oscuro);
  border: none;
  border-radius: var(--radio-sm);
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
}
.btn-oro:hover {
  background: linear-gradient(135deg, #e6b422, #c99a14);
  transform: translateY(-2px);
}

/* Acciones en fila */
.acciones {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 10px;
  background: rgba(0,0,0,0.4);
  border-radius: var(--radio);
}
.acciones.oculto { display: none; }
/* HUD de apuesta COMPACTO (rediseño mesa, estilo mockup): columna + fila [pill · % · stepper] + 3 botones. */
#acciones { flex-direction: column; flex-wrap: nowrap; width: 100%; max-width: 520px; margin: 0 auto; gap: 9px; padding: 8px 10px 10px; }
#acciones .bet-row { display: flex; align-items: center; gap: 8px; width: 100%; }
#acciones .bet-pill { background:#1b1c22; border:1px solid #2c2e38; border-radius:9px; color:#f2ca50; font-family:'Sora',sans-serif; font-weight:800; font-size:14px; padding:8px 10px; min-width:54px; text-align:center; }
/* Pill EDITABLE: el input parece texto del HUD (sin caja), con subrayado punteado + ✏️ para indicar que se puede escribir. */
#acciones .bet-pill-edit { display:inline-flex; align-items:center; gap:4px; cursor:text; }
#acciones .bet-input { background:transparent; border:none; outline:none; color:#f2ca50; font-family:'Sora',sans-serif; font-weight:800; font-size:14px; width:62px; text-align:center; padding:0; border-bottom:1px dashed rgba(242,202,80,.5); cursor:text; -moz-appearance:textfield; }
#acciones .bet-input:focus { border-bottom-color:#f2ca50; }
#acciones .bet-input::-webkit-outer-spin-button, #acciones .bet-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
#acciones .bet-edit-ico { font-size:11px; opacity:.6; pointer-events:none; }
#acciones .pcts { display:flex; gap:5px; flex:1; min-width:0; }
#acciones .pcts .btn-pct { flex:1; background:#1b1c22; border:1px solid #2c2e38; border-radius:8px; color:#cfd0d6; font-size:12px; font-weight:700; padding:8px 0; text-align:center; cursor:pointer; -webkit-tap-highlight-color:transparent; }
#acciones .pcts .btn-pct:active { transform:translateY(1px); }
#acciones .pcts .btn-pct[data-pct="allin"] { color:#f2ca50; border-color:#6b5212; }
/* Pila de fichas decorativa a la izquierda de los % (fichas) / billetes-monedas reales (mesas €) */
.bet-deco { position: relative; width: 30px; height: 34px; flex: 0 0 auto; }
.bet-deco .chipd { position: absolute; left: 2px; width: 26px; height: 26px; border-radius: 50%; border: 2px dashed rgba(255,255,255,.55); box-shadow: 0 1px 3px rgba(0,0,0,.6); }
.bet-deco .c1 { bottom: 0; background: radial-gradient(circle at 50% 35%, #b88bff, #6a2cc9); }
.bet-deco .c2 { bottom: 5px; background: radial-gradient(circle at 50% 35%, #ffe98a, #c79200); }
.bet-deco .c3 { bottom: 10px; background: radial-gradient(circle at 50% 35%, #8fd5ff, #2a7fd0); }
.bet-deco.eur { width: auto; display: flex; gap: 3px; align-items: center; }
.bet-deco.eur .chipd { display: none; }
.bet-deco .bd-pieza { position: relative; display: inline-flex; align-items: center; }
.bet-deco .bd-pieza img { height: 30px; width: auto; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.bet-deco .bd-pieza b { position: absolute; right: -4px; bottom: -3px; font-size: 9px; background: #1a1407; color: #ffe98a; border-radius: 6px; padding: 0 3px; font-weight: 800; }
/* Control vertical 888: ▲ · SLIDER ALTO · ▼ — FLOTA por encima del HUD a la derecha
   (finger-friendly; se sale del HUD a propósito sobre el tapete). */
#acciones { position: relative; }
#acciones .bet-row { padding-right: 48px; }            /* hueco para el slider flotante */
#acciones .bet-vstepper {
  position: absolute; right: 2px; bottom: 4px; z-index: 6;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: rgba(10,14,20,.92); border: 1px solid #2a3340; border-radius: 13px;
  padding: 7px 5px; box-shadow: 0 8px 22px rgba(0,0,0,.6);
}
#acciones .bet-vstepper .bet-step { width: 32px; height: 26px; font-size: 13px; border-radius: 8px; }
#acciones .bet-vrange {
  writing-mode: vertical-lr; direction: rtl;                          /* vertical estándar: arriba = máx (sustituye al obsoleto appearance:slider-vertical) */
  width: 30px; height: 150px; margin: 3px 0; padding: 0;
  accent-color: #3a9bff; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: none;
}

/* Countdown ring */
.countdown-ring {
  position: relative; width: 44px; height: 44px;
  flex-shrink: 0;
}
.countdown-bg { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 4; }
.countdown-fg {
  fill: none; stroke: var(--accento); stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 113; stroke-dashoffset: 0;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dashoffset .3s;
  filter: drop-shadow(0 0 3px rgba(212,160,23,0.4));
}
.countdown-fg.urgente { stroke: var(--rojo); }
.countdown-text {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; font-weight: 700;
}
.countdown-text.urgente {
  color: var(--rojo);
  animation: urgencia 0.5s ease-in-out infinite alternate;
}

/* Turno banner */
.turno-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 16px;
  background: linear-gradient(135deg, rgba(212,160,23,0.2), rgba(212,160,23,0.05));
  border: 1px solid rgba(212,160,23,0.15);
  border-radius: var(--radio-sm);
}
.turno-banner.oculto { display: none; }

/* ═══════════════════════════════════════════════
   DETALLES DE CARTA (símbolos, badges, valores)
   ═══════════════════════════════════════════════ */
.carta-valor {
  position: absolute; top: 4px; right: 6px;
  font-size: .65rem; font-weight: 700;
  background: rgba(0,0,0,0.5);
  color: #fff;
  border-radius: 99px;
  padding: 1px 6px;
  z-index: 3;
  line-height: 1.4;
}
.carta-nombre {
  display: none; /* oculto porque la imagen ya muestra el nombre */
}
.carta-palo {
  display: none; /* oculto porque la imagen ya muestra el palo */
}
.palo-simbolo {
  position: absolute; bottom: 4px; left: 50%;
  transform: translateX(-50%);
  font-size: 1rem;
  z-index: 3;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  line-height: 1;
  pointer-events: none;
}
.carta-especial-badge {
  position: absolute; top: 4px; left: 4px;
  font-size: .5rem;
  background: #7a4f00;
  color: #ffe080;
  border-radius: 4px;
  padding: 1px 4px;
  z-index: 3;
  line-height: 1.4;
}
/* Ajustes de carta colores por palo */
.carta.palo-oros    .carta-valor { background: #d4a017; color: #3a2000; }
.carta.palo-copas   .carta-valor { background: #c0392b; color: #fff; }
.carta.palo-espadas .carta-valor { background: #2980b9; color: #fff; }
.carta.palo-bastos  .carta-valor { background: #27ae60; color: #fff; }

/* ═══════════════════════════════════════════════
   HUD DE PUNTUACIÓN
   ═══════════════════════════════════════════════ */
.hud-puntuacion {
  display: flex;
  align-items: center;
  gap: .5rem;
  justify-content: center;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 99px;
  padding: .4rem 1.1rem;
  font-size: .85rem;
}
.hud-puntuacion.oculto { display: none; }
.hud-pun-label { color: var(--texto-dim); }
.hud-pun-valor {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--accento);
  min-width: 2ch;
  text-align: center;
  transition: color .3s;
}
.hud-pun-valor.pts-bajo   { color: #ff8888; }
.hud-pun-valor.pts-medio  { color: var(--accento); }
.hud-pun-valor.pts-alto   { color: #27ae60; }
.hud-pun-valor.pts-giley  {
  color: #fff;
  text-shadow: 0 0 12px var(--accento), 0 0 24px var(--accento);
  animation: gileyPulse .8s ease-in-out infinite alternate;
}
@keyframes gileyPulse {
  from { text-shadow: 0 0 8px var(--accento); }
  to   { text-shadow: 0 0 20px var(--accento), 0 0 40px #ffcc00; }
}

/* ═══════════════════════════════════════════════
   SIDEBAR INLINE
   ═══════════════════════════════════════════════ */
.zona-sidebar-inline {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sidebar-bloque {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radio-sm);
}
.sidebar-titulo {
  padding: 8px 12px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--texto-dim);
  cursor: pointer;
  user-select: none;
}
.sidebar-bloque[open] .sidebar-titulo {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mesa-jugadores {
  padding: 8px;
}
.log-publico {
  max-height: 120px;
  overflow-y: auto;
  padding: 8px;
  font-size: .8rem;
  line-height: 1.5;
}
.log-publico::-webkit-scrollbar { width: 4px; }
.log-publico::-webkit-scrollbar-track { background: transparent; }
.log-publico::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

/* (Eliminado el CSS responsive de la mesa ANTIGUA — .mesa-tapete / .pos-* /
   .juego-wrapper / .zona-jugador-local — que forzaba layout horizontal. Esas
   clases ya no existen en el HTML; la mesa actual es .mesa6-* y su layout
   vertical/horizontal se controla por orientación más abajo.) */

/* ═══════════════════════════════════════════════
   NETWORK STATUS MODAL (Base Mainnet)
   ═══════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(6px);
  animation: fadeIn .3s ease-out;
}
/* CAJERO DE RECARGA integrado: backdrop más transparente (la mesa se intuye borrosa detrás) + blur premium →
   el jugador SIENTE que NO ha abandonado la partida, solo recarga y sigue. */
#modal-rebuy {
  background: radial-gradient(ellipse 120% 90% at 50% 45%, rgba(14,10,24,0.52), rgba(0,0,0,0.80));
  backdrop-filter: blur(9px) saturate(1.12);
}

.modal-contenido {
  background: linear-gradient(145deg, #1a1a1a, #0d0d0d);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 32px;
  max-width: 440px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  animation: modalSlide .35s cubic-bezier(.34,1.56,.64,1);
}

@keyframes modalSlide {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.modal-icon {
  font-size: 1.8rem;
}

.modal-titulo {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--texto);
  margin: 0;
}

.modal-body {
  margin-bottom: 24px;
}

/* ── Indicador de red ── */
.network-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: rgba(0,0,0,0.3);
  border-radius: 10px;
  margin-bottom: 14px;
  border: 1px solid rgba(255,255,255,0.06);
}

.network-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background .3s;
}

.network-dot-green {
  background: #27ae60;
  box-shadow: 0 0 8px rgba(39,174,96,0.5);
}

.network-dot-red {
  background: #c0392b;
  box-shadow: 0 0 8px rgba(192,57,43,0.5);
}

.network-dot-yellow {
  background: #f1c40f;
  box-shadow: 0 0 8px rgba(241,196,15,0.5);
  animation: dotPulse 1s ease-in-out infinite;
}

@keyframes dotPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .4; }
}

#network-status-text {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--texto);
}

.network-desc {
  font-size: 0.85rem;
  color: var(--texto-dim);
  margin-bottom: 16px;
  line-height: 1.5;
}

/* ── Detalles de red ── */
.network-details {
  background: rgba(0,0,0,0.25);
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.network-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.network-label {
  font-size: 0.8rem;
  color: var(--texto-dim);
}

.network-value {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--texto);
  font-family: 'SF Mono', 'Consolas', monospace;
}

.network-expected {
  color: var(--accento);
}

/* ── Warning de saldo ── */
.network-warning {
  background: rgba(192,57,43,0.12);
  border: 1px solid rgba(192,57,43,0.2);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.82rem;
  color: #ff8888;
  line-height: 1.5;
}

.network-warning strong {
  color: #ff6b6b;
}

/* ── Modal footer ── */
.modal-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.modal-footer .btn-primario {
  flex: 1;
  justify-content: center;
}

.modal-footer .btn-secundario {
  flex-shrink: 0;
}

/* ═══════════════════════════════════════
   SOCIAL LOGIN & MOONPAY BUTTONS
   ═══════════════════════════════════════ */
.btn-social {
  transition: all 0.25s ease;
  cursor: pointer;
  font-size: 0.95rem;
}

.btn-social:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

.btn-social:active {
  transform: translateY(0);
}

.btn-google {
  position: relative;
  overflow: hidden;
}

.btn-google:hover {
  background: rgba(255,255,255,0.1) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}

/* ── Buy USDC button hover ── */
#btn-buy-usdc:hover {
  background: rgba(0,200,83,0.2) !important;
  box-shadow: 0 0 12px rgba(0,200,83,0.2);
  transform: translateY(-1px);
}

/* ── Mobile: show buy USDC on small screens ── */
@media (max-width: 767px) {
  #btn-buy-usdc {
    display: none !important;
  }
}

/* ── MoonPay widget iframe (when embedded) ── */
.moonpay-iframe {
  position: fixed;
  inset: 0;
  z-index: 99999;
  width: 100%;
  height: 100%;
  border: none;
  background: rgba(0,0,0,0.85);
}

/* ══════════════════════════════════════════════════════════════
   LOBBY v2 — Diseño Stitch (hero práctica + Premium 6-Max + Estándar)
   Estructura/glassmorphism de Stitch, ancladas a la paleta oro Giley.
   ══════════════════════════════════════════════════════════════ */
:root { --tier-vip: #ef9a9a; }

.glass-card {
  background: rgba(31, 31, 33, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* ── Hero: Mesa de Práctica ── */
.practica-hero {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  min-height: 240px;
  display: flex;
  align-items: center;
  margin-bottom: 36px;
  background:
    radial-gradient(circle at 80% 30%, rgba(212,175,55,0.18) 0%, transparent 55%),
    linear-gradient(120deg, #16140d 0%, #0e0e0e 60%);
  border: 1px solid rgba(212,175,55,0.18);
}
@media (min-width: 768px) { .practica-hero { min-height: 300px; } }
.practica-hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background-image: radial-gradient(circle at 50% -20%, rgba(40,40,70,0.5) 0%, transparent 70%);
  pointer-events: none;
}
.practica-hero-content {
  position: relative; z-index: 2;
  padding: 0 40px; max-width: 560px;
  display: flex; flex-direction: column; gap: 16px;
}
@media (max-width: 600px) { .practica-hero-content { padding: 0 22px; } }
.practica-hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start;
  padding: 4px 12px; border-radius: 9999px;
  background: rgba(212,175,55,0.15);
  border: 1px solid rgba(212,175,55,0.35);
  color: var(--primary);
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.practica-hero-title {
  font-family: 'Sora', Inter, sans-serif;
  font-size: 2.6rem; font-weight: 700; line-height: 1.05;
  color: var(--on-surface); margin: 0;
  text-shadow: 0 2px 20px rgba(0,0,0,0.4);
}
@media (max-width: 600px) { .practica-hero-title { font-size: 1.9rem; } }
.practica-hero-desc {
  color: var(--on-surface-variant); font-size: 1rem; margin: 0; max-width: 460px;
}
.practica-hero-btn {
  align-self: flex-start; margin-top: 6px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 26px; border: none; border-radius: 12px; cursor: pointer;
  background: linear-gradient(135deg, var(--primary-container) 0%, var(--primary) 100%);
  color: #1a1407; font-weight: 700; font-size: 15px;
  transition: all .2s ease;
}
.practica-hero-btn:hover {
  filter: brightness(1.06);
  box-shadow: 0 0 24px rgba(212,175,55,0.4);
  transform: translateY(-1px);
}
.practica-hero-btn:active { transform: scale(0.97); }
.practica-hero-count { font-size: 12px; opacity: .7; font-weight: 600; }

/* ── Cabeceras de sección ── */
.lobby-seccion { margin-bottom: 28px; }
/* SECCIÓN como TARJETA: fondo + borde sutil para separar bien cada bloque (el lobby ya no se ve "mezclado"). */
.lobby-seccion-card {
  background: linear-gradient(180deg, rgba(20,22,28,0.55), rgba(14,16,21,0.35));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 18px; padding: 18px 16px;
}
@media (min-width: 768px) { .lobby-seccion-card { padding: 22px 22px; } }
.lobby-seccion-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px; flex-wrap: wrap; gap: 8px;
}
.lobby-seccion-titulo { display: flex; align-items: center; gap: 10px; }
/* Chip contador de mesas en la cabecera de cada sección. */
.lobby-seccion-count {
  font-size: 11px; font-weight: 700; color: var(--primary, #f2ca50);
  background: rgba(242,202,80,0.12); border: 1px solid rgba(242,202,80,0.28);
  padding: 2px 9px; border-radius: 999px; white-space: nowrap; line-height: 1.5;
}
.lobby-seccion-count:empty { display: none; }
/* FICHA DE ORO: moneda de fichas con Material Symbols (renderiza en TODOS los dispositivos, al
   contrario que el emoji 🪙/💰). Clase AUTÓNOMA (define su propia fuente) para no chocar con el
   CSS de Google Material Symbols. La ligadura 'toll' = dos monedas; FILL 1 = sólida; color oro. */
.ficha-oro {
  font-family: 'Material Symbols Outlined';
  font-weight: normal; font-style: normal; font-size: 1.08em; line-height: 1;
  letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap;
  direction: ltr; vertical-align: -0.16em; -webkit-font-smoothing: antialiased;
  -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  color: #f5c542;
}
/* Widget de NIVEL de torneo: apuesta base + cuenta regresiva a la próxima subida (arriba a la derecha). */
.torneo-nivel-hud {
  position: fixed; top: 60px; right: 10px; z-index: 90; min-width: 122px; text-align: right; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,22,30,.95), rgba(12,14,20,.95));
  border: 1px solid rgba(245,197,66,.42); border-radius: 12px; padding: 7px 12px;
  box-shadow: 0 8px 22px rgba(0,0,0,.5);
}
.torneo-nivel-hud .tnh-lbl { font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; color: #9aa0ad; }
.torneo-nivel-hud .tnh-val { font-family: 'Sora', sans-serif; font-weight: 900; font-size: 1.15rem; color: #f5c542; line-height: 1.15; }
.torneo-nivel-hud .tnh-cd { font-size: 11px; font-weight: 700; color: #ff9d6e; margin-top: 1px; }
.torneo-nivel-hud.tnh-flash { animation: tnhFlash .8s ease; }
@keyframes tnhFlash {
  0%   { transform: scale(1);    box-shadow: 0 0 0 2px #f5c542, 0 8px 22px rgba(0,0,0,.5); }
  30%  { transform: scale(1.09); box-shadow: 0 0 26px 4px rgba(245,197,66,.7); }
  100% { transform: scale(1);    box-shadow: 0 8px 22px rgba(0,0,0,.5); }
}
/* Resumen del fin de Expresso (entrada · te levantas con · ganancias). */
.exfin-resumen { margin: 10px 0 14px; text-align: left; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 10px 14px; }
.exfin-fila { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: .95rem; color: #cbb88a; }
.exfin-fila b { color: #fff; font-weight: 800; }
.exfin-mult { font-size: .78em; color: #f2ca50; background: rgba(242,202,80,.14); padding: 1px 6px; border-radius: 6px; margin-left: 4px; vertical-align: 1px; }
.exfin-neto { border-top: 1px solid rgba(255,255,255,.1); margin-top: 3px; padding-top: 7px; }
.exfin-neto span, .exfin-neto b { color: #36d07a; }
.exfin-neto b { font-size: 1.12rem; }
/* ── LOBBY por ACORDEONES con COLOR de PALO de la baraja española (firma visual) ──
   Cada categoría tiene su acento (--acc sólido, --acc-bg translúcido para fondos, --acc-line para bordes)
   → vivo + intuitivo: el jugador reconoce la categoría por su color al instante. Sin color-mix (compat móvil). */
.lobby-live-bar { display: flex; justify-content: center; margin: 2px 0 14px; }
.lobby-live-bar .lobby-live {
  font-size: 12.5px; font-weight: 700; color: #d6ffe6;
  background: linear-gradient(180deg, rgba(34,197,94,.16), rgba(34,197,94,.06));
  border: 1px solid rgba(34,197,94,.34); border-radius: 999px; padding: 6px 14px;
  box-shadow: 0 0 18px rgba(34,197,94,.12);
}
.lobby-acc {
  --acc: #f2ca50; --acc-bg: rgba(242,202,80,.14); --acc-line: rgba(242,202,80,.40);
  position: relative;
  background: linear-gradient(180deg, rgba(22,24,31,0.72), rgba(13,15,20,0.5));
  border: 1px solid rgba(255,255,255,0.07); border-left: 3px solid var(--acc);
  border-radius: 15px; margin-bottom: 12px; overflow: hidden;
  transition: box-shadow .25s ease, border-color .25s ease, transform .15s ease;
}
.lobby-acc[open] {
  border-color: var(--acc-line);
  box-shadow: 0 0 0 1px var(--acc-bg), 0 10px 30px rgba(0,0,0,.5);
}
.lobby-acc-head {
  display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none;
  padding: 15px 16px; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background .15s ease;
}
.lobby-acc-head::-webkit-details-marker { display: none; }
.lobby-acc-head:hover, .lobby-acc-head:focus-visible { background: var(--acc-bg); outline: none; }
/* Disco de color con el icono/emoji del palo → ancla visual de la categoría.
   El selector va con .lobby-acc-head delante para GANAR al CSS de Material Symbols de Google
   (que carga después y forzaba display:inline-block / font-size, descentrando el glifo). */
.lobby-acc-head .lobby-acc-ico, .lobby-acc-head .lobby-acc-emoji {
  color: var(--acc); display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto; line-height: 1; padding: 0;
  background: var(--acc-bg); border: 1px solid var(--acc-line);
}
.lobby-acc-head .lobby-acc-ico { font-size: 21px; }
.lobby-acc-head .lobby-acc-emoji { font-size: 18px; }
.lobby-acc-tit { font-family: 'Sora', Inter, sans-serif; font-weight: 700; font-size: 1.06rem; color: #f4f1ea; letter-spacing: .2px; }
.lobby-acc .lobby-seccion-count {
  color: var(--acc); background: var(--acc-bg); border-color: var(--acc-line);
}
.lobby-acc-chev { margin-left: auto; color: var(--acc); opacity: .8; transition: transform .25s ease; }
.lobby-acc[open] .lobby-acc-chev { transform: rotate(180deg); }
.lobby-acc > .premium-grid, .lobby-acc > .torneos-lista { padding: 4px 14px 16px; }
/* Micro-animación AL ABRIR: las cards entran con fade + slide y un leve stagger.
   La clase .acc-animando la pone/quita JS solo en la apertura real (evento toggle) → no
   reaparece en cada re-render del lobby ni bloquea el hover (se retira a los 650ms). */
@keyframes accCardIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .lobby-acc.acc-animando .premium-card,
  .lobby-acc.acc-animando .torneo-card {
    animation: accCardIn .34s cubic-bezier(.22,.8,.3,1) both;
  }
  .lobby-acc.acc-animando .premium-card:nth-child(2),
  .lobby-acc.acc-animando .torneo-card:nth-child(2) { animation-delay: .05s; }
  .lobby-acc.acc-animando .premium-card:nth-child(3),
  .lobby-acc.acc-animando .torneo-card:nth-child(3) { animation-delay: .10s; }
  .lobby-acc.acc-animando .premium-card:nth-child(n+4),
  .lobby-acc.acc-animando .torneo-card:nth-child(n+4) { animation-delay: .14s; }
}
/* Acento por categoría (palos de la baraja española). */
/* --acc-ink = color de TEXTO legible sobre el botón de ese palo (oscuro si el palo es claro, y viceversa). */
#acc-6max    { --acc:#f5c542; --acc-bg:rgba(245,197,66,.15);  --acc-line:rgba(245,197,66,.42); --acc-ink:#2a1c00; }  /* Oros */
#acc-4max    { --acc:#ff5d6c; --acc-bg:rgba(255,93,108,.15);  --acc-line:rgba(255,93,108,.42); --acc-ink:#fff;    }  /* Copas */
#acc-duelo   { --acc:#4aa8ff; --acc-bg:rgba(74,168,255,.15);  --acc-line:rgba(74,168,255,.42); --acc-ink:#06243f; }  /* Espadas */
#acc-las44   { --acc:#3ddc84; --acc-bg:rgba(61,220,132,.15);  --acc-line:rgba(61,220,132,.42); --acc-ink:#06280f; }  /* Bastos */
#acc-torneos { --acc:#c08bff; --acc-bg:rgba(192,139,255,.16); --acc-line:rgba(192,139,255,.44); --acc-ink:#1c0a3a; } /* Trofeo */
#acc-practica{ --acc:#2dd4bf; --acc-bg:rgba(45,212,191,.14);  --acc-line:rgba(45,212,191,.40); --acc-ink:#04261f; }  /* NPC */
.lobby-seccion-titulo h2 {
  font-family: 'Sora', Inter, sans-serif;
  font-size: 1.4rem; font-weight: 700; color: var(--on-surface); margin: 0;
}
.lobby-live {
  display: flex; align-items: center; gap: 6px;
  color: var(--on-surface-variant); font-size: 12px; font-weight: 500;
}
.lobby-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 8px #22c55e;
  animation: pulse-dot 1.6s ease-in-out infinite;
}
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

/* ── Premium 6-Max grid + cards ── */
.premium-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 768px) { .premium-grid { grid-template-columns: repeat(3, 1fr); } }
.premium-card {
  border-radius: 18px; padding: 22px;
  display: flex; flex-direction: column; gap: 18px;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  cursor: pointer;
}
.premium-card:hover { transform: translateY(-4px) scale(1.012); box-shadow: 0 16px 36px rgba(0,0,0,.5); }
.premium-card:active { transform: translateY(-1px) scale(.998); }
.premium-card.llena { opacity: .72; }
/* URGENCIA · ÚLTIMA PLAZA: chip "caliente" + pulso sutil → FOMO sano (retención). */
.ultima-plaza {
  font-size: 11px; font-weight: 800; letter-spacing: .02em; white-space: nowrap;
  padding: 3px 10px; border-radius: 9999px;
  color: #ffd9a8; background: rgba(255,120,40,.16); border: 1px solid rgba(255,120,40,.5);
}
.premium-card.casi-llena { animation: casiLlenaPulso 2.2s ease-in-out infinite; }
.premium-card.casi-llena:hover { animation: none; }
@media (prefers-reduced-motion: reduce) { .premium-card.casi-llena { animation: none; } }
@keyframes casiLlenaPulso {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,120,40,.16); }
  50%      { box-shadow: 0 0 16px 1px rgba(255,120,40,.30); }
}
.premium-card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.premium-icon {
  display: inline-flex; padding: 8px; border-radius: 10px;
  background: var(--surface-container); border: 1px solid rgba(255,255,255,0.08);
}
.tier-badge {
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  padding: 3px 11px; border-radius: 9999px;
}
.premium-card h3 {
  font-family: 'Sora', Inter, sans-serif;
  font-size: 1.2rem; font-weight: 700; color: var(--on-surface); margin: 0 0 4px;
}
/* CLARIDAD PARA NOVATOS: línea descriptiva en lenguaje llano bajo el nombre de la mesa */
.premium-sub {
  font-size: 12px; color: var(--on-surface-variant); margin: 0 0 12px; font-weight: 500;
}
.premium-stats {
  display: flex; justify-content: space-between; align-items: flex-end;
  border-top: 1px solid rgba(255,255,255,0.06); padding-top: 14px;
}
.premium-stats .lbl {
  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--on-surface-variant); margin-bottom: 3px;
}
.premium-buyin { font-family: 'Sora', sans-serif; font-size: 1.25rem; font-weight: 700; }
.premium-blinds { font-size: 13px; color: var(--on-surface); font-variant-numeric: tabular-nums; }

/* Unidad "cent" tras las ciegas (mesas CASH): número protagonista, unidad atenuada y menor. */
.cent-unit { font-size: 0.8em; color: var(--on-surface-variant); margin-left: 3px; font-weight: 500; }
.premium-foot {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--surface-container-low); padding: 10px 12px; border-radius: 12px;
}
.avatar-stack { display: flex; }
.avatar-stack .avatar-dot {
  width: 30px; height: 30px; border-radius: 50%; margin-left: -8px;
  border: 2px solid var(--surface); background: var(--surface-container-highest);
  display: flex; align-items: center; justify-content: center;
}
.avatar-stack .avatar-dot:first-child { margin-left: 0; }
.avatar-stack .avatar-dot .material-symbols-outlined { font-size: 16px; color: var(--on-surface-variant); }
.premium-foot .cap { font-size: 13px; font-weight: 600; color: var(--on-surface-variant); }
.premium-foot .cap.llena { color: var(--tier-vip); }

/* ── CTA "Sentarse" (6-Max) ── */
.premium-sentarse {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 12px; padding: 12px 16px; cursor: pointer;
  border: none; border-radius: 12px;
  font-family: 'Sora', Inter, sans-serif; font-size: 0.95rem; font-weight: 700;
  letter-spacing: .01em; color: #1a1400;
  background: linear-gradient(160deg, #f2ca50 0%, #d4af37 50%, #c79200 100%);
  box-shadow: 0 6px 18px rgba(212,175,55,.32), inset 0 1px 0 rgba(255,255,255,.45);
  transition: transform .12s, filter .2s, box-shadow .2s;
}
.premium-sentarse .material-symbols-outlined { font-size: 19px; color: #1a1400; }
.premium-sentarse:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 10px 24px rgba(212,175,55,.45), inset 0 1px 0 rgba(255,255,255,.45); }
.premium-sentarse:active { transform: translateY(0); }
.premium-sentarse.espectar {
  color: #e5e2e1; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14); box-shadow: none;
}
.premium-sentarse.espectar .material-symbols-outlined { color: #e5e2e1; }
.premium-sentarse.espectar:hover { background: rgba(255,255,255,.1); filter: none; box-shadow: none; }

/* ── CTA "Sentarse" (Estándar, compacto) ── */
.estandar-row .er-sentarse {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: 0 0 auto; cursor: pointer;
  border: none; border-radius: 11px;
  background: linear-gradient(160deg, #f2ca50 0%, #d4af37 55%, #c79200 100%);
  box-shadow: 0 4px 12px rgba(212,175,55,.3), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .12s, filter .2s;
}
.estandar-row .er-sentarse .material-symbols-outlined { font-size: 20px; color: #1a1400; }
.estandar-row .er-sentarse:hover { transform: translateY(-1px); filter: brightness(1.06); }
.estandar-row .er-sentarse:active { transform: translateY(0); }
.estandar-row .er-sentarse.espectar {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); box-shadow: none;
}
.estandar-row .er-sentarse.espectar .material-symbols-outlined { color: #e5e2e1; }

/* Tier accents (coherentes con la app: low=verde, medio=ámbar, vip=rojo) */
.premium-card.tier-low    { background: rgba(31,31,33,0.6); border: 1px solid rgba(46,125,50,0.25); box-shadow: 0 0 15px rgba(46,125,50,0.08), inset 0 0 1px rgba(46,125,50,0.4); }
.premium-card.tier-low:hover { border-color: rgba(46,125,50,0.6); box-shadow: 0 6px 24px rgba(46,125,50,0.18); }
.premium-card.tier-low .tier-badge { background: rgba(46,125,50,0.12); color: #66bb6a; border: 1px solid rgba(46,125,50,0.25); }
.premium-card.tier-low .premium-icon .material-symbols-outlined { color: #66bb6a; }
.premium-card.tier-low .premium-buyin { color: #66bb6a; }

.premium-card.tier-medio  { background: rgba(31,31,33,0.6); border: 1px solid rgba(255,191,0,0.25); box-shadow: 0 0 15px rgba(255,191,0,0.08), inset 0 0 1px rgba(255,191,0,0.4); }
.premium-card.tier-medio:hover { border-color: rgba(255,191,0,0.6); box-shadow: 0 6px 24px rgba(255,191,0,0.18); }
.premium-card.tier-medio .tier-badge { background: rgba(255,191,0,0.12); color: #ffca28; border: 1px solid rgba(255,191,0,0.25); }
.premium-card.tier-medio .premium-icon .material-symbols-outlined { color: #ffca28; }
.premium-card.tier-medio .premium-buyin { color: #ffca28; }

.premium-card.tier-vip    { background: linear-gradient(to bottom, rgba(198,40,40,0.06), transparent), rgba(31,31,33,0.6); border: 1px solid rgba(229,115,115,0.3); box-shadow: 0 0 15px rgba(198,40,40,0.1), inset 0 0 1px rgba(229,115,115,0.4); }
.premium-card.tier-vip:hover { border-color: rgba(229,115,115,0.65); box-shadow: 0 6px 26px rgba(198,40,40,0.22); }
.premium-card.tier-vip .tier-badge { background: rgba(229,115,115,0.12); color: #ef9a9a; border: 1px solid rgba(229,115,115,0.3); }
.premium-card.tier-vip .premium-icon .material-symbols-outlined { color: #ef9a9a; }
.premium-card.tier-vip .premium-buyin { color: #ef9a9a; }

/* ── TINTE DE PALO en las cards: el MARCO y el BRILLO toman el color de la categoría
   (--acc heredado del acordeón); el badge/icono/importe siguen en color de TIER (apuestas).
   Va DESPUÉS de los tiers para ganar la cascada (misma especificidad). ── */
.lobby-acc .premium-card {
  border-color: var(--acc-line);
  background-image: linear-gradient(180deg, var(--acc-bg), transparent 58%);
}
.lobby-acc .premium-card::after {           /* filo superior de color del palo */
  content: ''; position: absolute; top: 0; left: 14px; right: 14px; height: 2px;
  background: var(--acc); opacity: .55; border-radius: 2px;
}
.lobby-acc .premium-card { position: relative; }
.lobby-acc .premium-card:hover {
  border-color: var(--acc);
  box-shadow: 0 16px 36px rgba(0,0,0,.5), 0 0 26px var(--acc-bg);
}
.lobby-acc .premium-card:hover::after { opacity: .95; }

/* ── CTA "Sentarse" con color de PALO: fondo del acento + texto legible (--acc-ink) + glow del palo.
   Mantiene el relieve premium (sheen arriba, sombra abajo). "Ver mesa" = outline tintado. ── */
.lobby-acc .premium-sentarse {
  color: var(--acc-ink, #1a1400);
  background: linear-gradient(160deg, rgba(255,255,255,.22), rgba(0,0,0,.18)), var(--acc);
  box-shadow: 0 6px 18px var(--acc-bg), inset 0 1px 0 rgba(255,255,255,.4);
}
.lobby-acc .premium-sentarse .material-symbols-outlined { color: var(--acc-ink, #1a1400); }
.lobby-acc .premium-sentarse:hover {
  filter: brightness(1.07);
  box-shadow: 0 10px 26px var(--acc-line), inset 0 1px 0 rgba(255,255,255,.4);
}
.lobby-acc .premium-sentarse.espectar {
  color: var(--acc); background: var(--acc-bg);
  border: 1px solid var(--acc-line); box-shadow: none;
}
.lobby-acc .premium-sentarse.espectar .material-symbols-outlined { color: var(--acc); }
.lobby-acc .premium-sentarse.espectar:hover { filter: none; background: var(--acc-bg); }

/* ── Tablas Estándar (filas compactas) ── */
.estandar-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .estandar-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .estandar-grid { grid-template-columns: repeat(4, 1fr); } }
.estandar-row {
  border-radius: 12px; padding: 12px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  transition: background .2s ease, border-color .2s ease; cursor: pointer;
}
.estandar-row:hover { background: var(--surface-container); }
.estandar-row.llena { opacity: .72; cursor: pointer; }
.estandar-row .er-nombre { display: flex; flex-direction: column; }
.estandar-row .er-tier { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.estandar-row.tier-low   .er-tier { color: #66bb6a; }
.estandar-row.tier-medio .er-tier { color: #ffca28; }
.estandar-row.tier-vip   .er-tier { color: #ef9a9a; }
.estandar-row .er-mesa { font-size: 14px; font-weight: 700; color: var(--on-surface); }
.estandar-row .er-buyin { text-align: center; }
.estandar-row .er-buyin .lbl { display: block; font-size: 10px; color: var(--on-surface-variant); }
.estandar-row .er-buyin .val { font-size: 13px; color: var(--on-surface); }
.estandar-row .er-cap { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--on-surface); font-variant-numeric: tabular-nums; }
.estandar-row .er-cap .material-symbols-outlined { font-size: 18px; color: var(--primary); }
.estandar-row.llena .er-cap { color: var(--tier-vip); }
.estandar-row.llena .er-cap .material-symbols-outlined { color: var(--tier-vip); }

/* ══════════════════════════════════════════════════════════════
   MESA 6-MAX v2 — Diseño Stitch (óvalo + sidebar + asientos)
   Misma pantalla #pantalla-juego para 4-max y 6-max (reparto adaptativo).
   ══════════════════════════════════════════════════════════════ */
.mesa6-wrapper {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  background:
    radial-gradient(circle at 50% -10%, #14141f 0%, #0A0A0B 65%);
  overflow: hidden;
}

/* ── Sidebar izquierda ── */
.mesa6-sidebar {
  width: 260px; flex-shrink: 0; align-self: stretch;
  display: flex; flex-direction: column;
  padding: 70px 16px 16px;
  background: rgba(27,27,29,0.82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-right: 1px solid rgba(255,255,255,0.06);
  z-index: 40;
}
.mesa6-sidebar-head { margin-bottom: 22px; }
.mesa6-sidebar-head h3 {
  font-family: 'Sora', Inter, sans-serif;
  font-size: 1.15rem; font-weight: 700; color: var(--primary); margin: 0 0 2px;
}
.mesa6-sidebar-head p { font-size: 12px; color: var(--on-surface-variant); margin: 0; }
.mesa6-sidebar-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.mesa6-sidebar-body .sidebar-bloque { background: rgba(255,255,255,0.02); border-radius: 10px; }

/* ── Canvas ── */
.mesa6-canvas {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 64px 16px 28px;
}

/* ── Óvalo de la mesa ── */
.mesa6-table {
  position: relative;
  width: 100%; max-width: 960px;
  aspect-ratio: 16 / 9;
  margin: 26px auto 8px;   /* separación del header (que el asiento de arriba respire) */
  flex-shrink: 0;
}
.mesa6-felt {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  margin: 0 auto;
  width: 100%; height: 80%;
  border-radius: 200px;
  border: 12px solid #0a2547;
  background: radial-gradient(ellipse 70% 60% at center, #2e74c4 0%, #1a5099 55%, #0f3a73 100%);
  box-shadow: inset 0 0 90px rgba(0,0,0,0.45), 0 0 40px rgba(46,116,196,0.18);
  overflow: hidden;
}
.mesa6-watermark {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Sora', Inter, sans-serif; font-weight: 700;
  font-size: clamp(1.6rem, 5vw, 3rem); letter-spacing: .2em;
  color: rgba(255,255,255,0.06); user-select: none; pointer-events: none;
  text-transform: uppercase;
}

/* ── Centro: bote + HUD ── */
.mesa6-centro {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 20;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: max-content;
}
.mesa6-pot {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 22px; border-radius: 9999px;
  background: rgba(19,19,21,0.85); backdrop-filter: blur(10px);
  border: 1px solid rgba(212,175,55,0.25); box-shadow: 0 4px 18px rgba(0,0,0,0.5);
}
.mesa6-pot-label { font-size: 11px; letter-spacing: .08em; color: var(--on-surface-variant); }
.mesa6-pot-val { font-family: 'Sora', sans-serif; font-weight: 700; color: var(--primary); font-size: 1.1rem; }
/* HUD minimalista: solo el BOTE central + los stacks de cada asiento. Los chips
   de Fase/Apuesta/Mano/Mazo se ocultan (texto superfluo). */
.mesa6-hud {
  display: none;
}
.mesa6-hud .hud-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 8px;
  background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.06);
  font-size: 11px; color: var(--on-surface-variant);
}
.mesa6-hud .hud-chip i { font-style: normal; opacity: .7; }
.mesa6-hud .hud-chip b { color: var(--on-surface); font-weight: 700; }
#bote-destino { position: absolute; left: 50%; top: 50%; pointer-events: none; }

/* ── Asientos (posiciones absolutas alrededor del óvalo) ── */
.mesa6-seat { position: absolute; z-index: 30; }
.seat-p1 { top: 1%;  left: 50%; transform: translateX(-50%); }
.seat-p2 { top: 15%; right: 3%; }
.seat-p3 { bottom: 13%; right: 3%; }
.seat-p5 { bottom: 13%; left: 3%; }
.seat-p6 { top: 15%; left: 3%; }

/* ── Variante 4-MAX: 3 rivales (izq-centro / arriba-centro / der-centro) ──
   Reutiliza el mismo óvalo y asientos; oculta los asientos sobrantes (p3/p5)
   y centra a los rivales en los lados. El HUD central (.mesa6-centro) no se
   toca: sigue centrado vía translate(-50%,-50%) independientemente del nº. */
.mesa6-table.mesa-4-max .seat-p3,
.mesa6-table.mesa-4-max .seat-p5 { display: none; }
.mesa6-table.mesa-4-max .seat-p1 { top: 1%;  left: 50%; transform: translateX(-50%); }
.mesa6-table.mesa-4-max .seat-p6 { top: 32%; left: 4%; }
.mesa6-table.mesa-4-max .seat-p2 { top: 32%; right: 4%; }
@media (max-width: 900px) {
  .mesa6-table.mesa-4-max .seat-p6 { top: 28%; left: 0; }
  .mesa6-table.mesa-4-max .seat-p2 { top: 28%; right: 0; }
}

.seat-player {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  width: 118px; text-align: center;
  transition: opacity .2s ease, filter .2s ease;
}
.seat-avatar-wrap { position: relative; }
/* La Vitrina: accesorio superpuesto en el avatar (visible para toda la mesa). */
.seat-accesorio { position: absolute; top: -5px; right: -7px; font-size: 15px; line-height: 1; z-index: 3; filter: drop-shadow(0 1px 2px rgba(0,0,0,.65)); }
.seat-avatar {
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Sora', sans-serif; font-weight: 700; font-size: 16px;
  color: var(--on-surface);
  background: linear-gradient(135deg, #2a2a2e, #1a1a1c);
  border: 3px solid var(--surface-container-highest);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.seat-dealer {
  position: absolute; bottom: -4px; right: -4px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--primary); color: #1a1407;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--surface);
}
/* Marca "M" del que va de MANO (derecha del dealer). Roja para distinguirla de la "D" dorada. */
.seat-mano {
  position: absolute; bottom: -4px; left: -4px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #e02424; color: #fff;
  font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--surface);
  box-shadow: 0 0 8px rgba(224, 36, 36, .7);
}
.hero-mano { position: static; flex: 0 0 auto; width: 20px; height: 20px; border: none; margin-left: -4px; }

/* Badge ALL-IN: cartelito dorado/fuego sobre el avatar → el resto entiende que ya no puede apostar. */
.seat-badge-allin {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  z-index: 5; white-space: nowrap;
  padding: 2px 8px; border-radius: 9px;
  font-size: 10px; font-weight: 800; letter-spacing: .4px; color: #2a1d00;
  background: linear-gradient(135deg, #ffd86b 0%, #f5a623 55%, #e8740c 100%);
  box-shadow: 0 2px 8px rgba(232, 116, 12, .6), inset 0 1px 0 rgba(255,255,255,.5);
  border: 1px solid rgba(255, 220, 140, .8);
}
.hero-allin { position: static; transform: none; flex: 0 0 auto; }

/* Aviso de juego A CIEGAS: banner fino y limpio JUSTO ENCIMA del panel de acciones normal
   (no es un HUD aparte; el jugador usa el HUD de siempre). Sin solaparse con avatar ni cartas. */
.ciegas-aviso {
  width: 100%; max-width: 520px; margin: 0 auto 6px; padding: 6px 12px;
  text-align: center; font-size: 13px; line-height: 1.3; color: #d7c7ee;
  background: rgba(123, 79, 168, .16); border: 1px solid rgba(123, 79, 168, .4);
  border-radius: 10px;
}
.ciegas-aviso strong { color: #c08bff; }

/* Mis cartas BOCABAJO (dorso grande, reutiliza el tamaño/abanico de .carta). */
.carta.carta-dorso { overflow: hidden; }
.carta.carta-dorso .carta-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Animación de volteo al pulsar "Ver mis cartas". */
@keyframes giley-flip-in { 0% { transform: rotateY(90deg); opacity: .2; } 100% { transform: rotateY(0); opacity: 1; } }
.mano-jugador.flip-in .carta { animation: giley-flip-in .42s ease-out both; }

/* Botón "¡Voy Cerrado!" — dorado con candado, alto riesgo/recompensa. Distinto de los demás. */
.btn-voy-cerrado {
  border: none; cursor: pointer;
  padding: 11px 14px; border-radius: 12px;
  font-weight: 800; font-size: 15px; letter-spacing: .3px;
  color: #2a1d00;
  background: linear-gradient(135deg, #ffe79a 0%, #f5c542 45%, #c9971f 100%);
  box-shadow: 0 4px 14px rgba(201, 151, 31, .5), inset 0 1px 0 rgba(255,255,255,.55);
  transition: transform .08s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-voy-cerrado:hover { filter: brightness(1.06); box-shadow: 0 6px 20px rgba(201, 151, 31, .7), inset 0 1px 0 rgba(255,255,255,.6); }
.btn-voy-cerrado:active { transform: translateY(1px) scale(.99); }

/* Modal de confirmación de Voy Cerrado: oscuro, elegante, rápido de responder. */
.modal-cerrado-box {
  background: linear-gradient(160deg, #1c1c22 0%, #131318 100%);
  border: 1px solid rgba(245, 197, 66, .35);
  border-radius: 18px; padding: 26px 24px; max-width: 360px; width: calc(100% - 48px);
  text-align: center; box-shadow: 0 18px 60px rgba(0,0,0,.6), 0 0 40px rgba(245,197,66,.12);
}
.modal-cerrado-icon { font-size: 40px; line-height: 1; margin-bottom: 6px; }
.modal-cerrado-titulo { margin: 4px 0 8px; font-size: 22px; font-weight: 800; color: #f5c542; }
.modal-cerrado-desc { margin: 0 0 20px; font-size: 14px; line-height: 1.45; color: #d6d6dc; }
.modal-cerrado-desc strong { color: #ff7a7a; }
.modal-cerrado-acciones { display: flex; gap: 10px; }
.modal-cerrado-acciones .btn-secundario,
.modal-cerrado-acciones .btn-voy-cerrado { flex: 1; }
.seat-cards { display: flex; gap: 2px; margin-top: 2px; }
.seat-cards .dorso-carta-img { width: 17px; height: auto; border-radius: 2px; }
.seat-info {
  padding: 3px 12px; border-radius: 9px;
  display: flex; flex-direction: column; line-height: 1.25;
  max-width: 118px;
}
.seat-name {
  font-size: 12px; font-weight: 700; color: var(--on-surface);
  max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.seat-stack { font-size: 12px; color: var(--primary); font-weight: 600; }
/* Título de liga bajo el nombre en la mesa (color por tier). */
.seat-titulo { display: block; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; line-height: 1.3; margin-top: 1px; }
.seat-titulo.t-Bronce { color: #e0996a; } .seat-titulo.t-Plata { color: #d8d8d8; }
.seat-titulo.t-Oro { color: #ffd700; } .seat-titulo.t-Diamante { color: #5ff0ff; }
/* Escudo/abreviatura de la peña junto al nombre. */
.seat-clan { color: var(--primary); font-weight: 800; font-size: 0.92em; }

/* ── Peñas (Clanes) ── */
.pena-card { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid rgba(212,175,55,.3); border-radius: 12px; background: linear-gradient(120deg, #1a1408, #0e0e10); margin-bottom: 10px; }
.pena-escudo { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 10px; background: linear-gradient(135deg, #d4af37, #a9760c); color: #1a1400; font-family: 'Sora', sans-serif; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; }
.pena-escudo.sm { width: 38px; height: 38px; font-size: 0.72rem; }
.pena-info { flex: 1; min-width: 0; }
.pena-nombre { font-weight: 700; color: var(--on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pena-stat { font-size: 11px; color: var(--on-surface-variant); }
.pena-miembros { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; max-height: 32vh; overflow-y: auto; }
.pena-miembro { display: flex; align-items: center; gap: 6px; font-size: 13px; padding: 6px 8px; background: var(--surface-container-low); border-radius: 8px; }
.pena-lista { display: flex; flex-direction: column; gap: 8px; max-height: 34vh; overflow-y: auto; }
.pena-row { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--outline-variant); border-radius: 10px; }
.pena-crear input { padding: 9px 10px; border-radius: 8px; }

/* ══════════════ CLANES v2 + GUERRAS ══════════════ */
.clan-input { padding: 9px 11px; border-radius: 9px; border: 1px solid var(--outline-variant); background: var(--surface-container-low); color: var(--on-surface); font-size: 13px; }
.clan-input:focus { outline: none; border-color: var(--primary); }
.clan-escudo { width: 56px; height: 56px; flex: 0 0 auto; border-radius: 12px; background: linear-gradient(135deg, #f5d020, #a9760c); color: #1a1400; font-family: 'Sora', sans-serif; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; background-size: cover; background-position: center; box-shadow: 0 2px 10px rgba(212,175,55,.25); }
.clan-escudo.sm { width: 40px; height: 40px; font-size: 0.72rem; border-radius: 9px; }
.clan-crear { padding: 12px; border: 1px solid rgba(212,175,55,.32); border-radius: 14px; background: linear-gradient(135deg, #1a1408, #0e0e10); margin-bottom: 12px; }
.clan-titulo { font-family: 'Sora', sans-serif; font-weight: 800; color: var(--on-surface); display: flex; align-items: center; justify-content: space-between; }
.clan-coste { font-size: 12px; font-weight: 700; color: var(--primary); }
.clan-buscar { margin: 4px 0 12px; }
.clan-ranking-tit, .clan-sub { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: .03em; color: var(--primary); margin: 14px 2px 8px; }
.clan-ranking { display: flex; flex-direction: column; gap: 7px; max-height: 42vh; overflow-y: auto; }
.clan-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--outline-variant); border-radius: 11px; cursor: pointer; transition: border-color .15s, background .15s; }
.clan-row:hover { border-color: rgba(212,175,55,.5); background: rgba(212,175,55,.05); }
.clan-medalla { width: 26px; text-align: center; font-size: 1.05rem; flex: 0 0 auto; }
.clan-pos { font-weight: 700; color: var(--on-surface-variant); font-size: 13px; }
.clan-info { flex: 1; min-width: 0; }
.clan-nombre { font-weight: 700; color: var(--on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clan-tag { color: var(--primary); font-weight: 800; }
.clan-stat { font-size: 11px; color: var(--on-surface-variant); }
.clan-hero { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid rgba(212,175,55,.34); border-radius: 16px; background: linear-gradient(120deg, #1d1609, #0e0e10); margin-bottom: 12px; }
.clan-hero.mio { border-color: rgba(245,208,32,.5); box-shadow: 0 0 22px rgba(212,175,55,.12) inset; }
.clan-hero-info { flex: 1; min-width: 0; }
.clan-hero-nombre { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.05rem; color: var(--on-surface); }
.clan-hero-stat { font-size: 12px; color: var(--on-surface-variant); margin-top: 2px; }
.clan-hero-rol { margin-top: 6px; }
.clan-volver { background: none; border: none; color: var(--primary); font-weight: 700; cursor: pointer; padding: 4px 0 10px; font-size: 13px; }
.clan-acciones { display: flex; gap: 8px; margin-bottom: 4px; }
.clan-flex { flex: 1; }
.btn-desafiar { flex: 1; background: linear-gradient(135deg, #b3261e, #7a0d0d); color: #fff; border: none; border-radius: 10px; padding: 11px; font-weight: 800; cursor: pointer; box-shadow: 0 2px 10px rgba(179,38,30,.35); }
.btn-desafiar:hover { filter: brightness(1.1); }
.clan-miembros { display: flex; flex-direction: column; gap: 5px; max-height: 34vh; overflow-y: auto; }
.clan-miembro { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 7px 9px; background: var(--surface-container-low); border-radius: 9px; }
.clan-m-nombre { flex: 1; min-width: 0; font-weight: 600; color: var(--on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clan-m-nombre i { color: var(--on-surface-variant); font-weight: 400; }
.clan-m-meta { font-size: 11px; color: var(--on-surface-variant); flex: 0 0 auto; }
.clan-m-acc { display: flex; gap: 4px; flex: 0 0 auto; }
.clan-m-acc button { border: 1px solid var(--outline-variant); background: var(--surface-container); color: var(--on-surface); border-radius: 7px; width: 28px; height: 28px; cursor: pointer; font-size: 13px; }
.clan-m-acc button:hover { border-color: var(--primary); }
.clan-rol { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 6px; background: var(--surface-container); color: var(--on-surface-variant); }
.clan-rol.lider { background: linear-gradient(135deg, #f5d020, #a9760c); color: #1a1400; }
.clan-rol.delegado { background: rgba(212,175,55,.18); color: var(--primary); }
.clan-solicitudes, .clan-guerras-buzon { margin: 10px 0; padding: 10px; border: 1px dashed rgba(212,175,55,.35); border-radius: 12px; }
.clan-sol { display: flex; align-items: center; gap: 8px; padding: 5px 6px; font-size: 13px; }
.clan-sol-btns { margin-left: auto; display: flex; gap: 5px; }
.clan-sol-btns button { width: 28px; height: 28px; border-radius: 7px; border: none; cursor: pointer; font-weight: 800; }
.btn-sol-ok { background: #1f7a3d; color: #fff; }
.btn-sol-no { background: #5a1f1f; color: #fff; }
.clan-desafio { display: flex; flex-direction: column; gap: 8px; padding: 9px; border-radius: 10px; background: rgba(179,38,30,.1); margin-bottom: 6px; }
.clan-desafio-txt { font-size: 13px; color: var(--on-surface); }
.clan-desafio-btns { display: flex; gap: 8px; }
.btn-aceptar-guerra { flex: 1; background: linear-gradient(135deg, #b3261e, #7a0d0d); color: #fff; border: none; border-radius: 9px; padding: 9px; font-weight: 800; cursor: pointer; }
.btn-rechazar-guerra { flex: 0 0 auto; background: var(--surface-container); color: var(--on-surface-variant); border: 1px solid var(--outline-variant); border-radius: 9px; padding: 9px 14px; cursor: pointer; }

/* ── Widget de Clan INCRUSTADO en el lobby ── */
.clan-widget { margin-top: 4px; }
.cw-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid rgba(212,175,55,.34); border-radius: 16px; background: linear-gradient(120deg, #1d1609, #0e0e10); }
.cw-info { flex: 1; min-width: 0; }
.cw-nombre { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.02rem; color: var(--on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-stat { font-size: 12px; color: var(--on-surface-variant); margin-top: 3px; }
.cw-btn { flex: 0 0 auto; background: linear-gradient(180deg, #f5d020, #caa24a); color: #1a1400; border: none; border-radius: 10px; padding: 10px 18px; font-weight: 800; cursor: pointer; box-shadow: 0 2px 10px rgba(212,175,55,.25); }
.cw-btn:hover { filter: brightness(1.06); }
.cw-empty { padding: 16px; border: 1px dashed rgba(212,175,55,.4); border-radius: 16px; background: linear-gradient(120deg, #17130a, #0e0e10); text-align: center; }
.cw-empty-txt { color: var(--on-surface-variant); font-size: 13px; margin-bottom: 12px; }
.cw-empty-txt b { color: var(--primary); }
.cw-top { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.cw-top-row { display: flex; align-items: center; gap: 9px; padding: 7px 10px; background: var(--surface-container-low); border-radius: 10px; font-size: 13px; }
.cw-top-nom { flex: 1; min-width: 0; text-align: left; font-weight: 600; color: var(--on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-top-row b { color: var(--primary); }
.cw-btn-cta { width: 100%; }

/* ══════════════ GILEYPEDIA (Ayuda y Reglas) ══════════════ */
.btn-ayuda-grande { margin-top: 12px; width: 100%; padding: 14px; border: 1px solid rgba(212,175,55,.4); border-radius: 14px;
  background: linear-gradient(135deg, #1a1408, #0e0e10); color: var(--primary); font-family: 'Sora', sans-serif; font-weight: 800;
  font-size: 1.05rem; cursor: pointer; transition: filter .15s, transform .1s; }
.btn-ayuda-grande:hover { filter: brightness(1.12); }
.btn-ayuda-grande:active { transform: scale(.99); }
.gpedia-box { max-width: 560px; }
.gpedia-cont { max-height: 72vh; overflow-y: auto; padding-right: 4px; }
.gpedia-sec { font-family: 'Sora', sans-serif; font-weight: 800; color: var(--primary); font-size: 1.05rem; margin: 18px 2px 10px; padding-bottom: 6px; border-bottom: 1px solid rgba(212,175,55,.2); }
.gpedia-sec:first-child { margin-top: 4px; }
.gpedia-glos { display: flex; flex-direction: column; gap: 9px; }
.gp-item { display: flex; align-items: flex-start; gap: 12px; }
.gp-chip { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, #f5d020, #a9760c); color: #1a1400; font-family: 'Sora', sans-serif; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.gp-chip-txt { background: var(--surface-container); color: var(--primary); border: 1px solid rgba(212,175,55,.3); font-size: 1.1rem; }
.gp-item b { color: var(--on-surface); }
.gp-item p { margin: 2px 0 0; font-size: 13px; color: var(--on-surface-variant); line-height: 1.4; }
.gpedia-manos { display: flex; flex-direction: column; gap: 6px; }
.gp-mano { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--surface-container-low); border-radius: 10px; }
.gp-mano.gp-destacado { border: 1px solid rgba(212,175,55,.55); background: rgba(212,175,55,.08); }
.gp-rank { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-container); color: var(--primary); font-weight: 800; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.gp-mano-info { flex: 1; min-width: 0; }
.gp-mano-info b { color: var(--on-surface); font-size: 14px; }
.gp-mano-info span { display: block; font-size: 11.5px; color: var(--on-surface-variant); }
.gp-ej { flex: 0 0 auto; font-size: 1.35rem; letter-spacing: -2px; color: #e8e2d4; }
.gpedia-nota { margin: 12px 2px 0; padding: 10px 12px; background: rgba(212,175,55,.1); border: 1px solid rgba(212,175,55,.3); border-radius: 10px; font-size: 13px; color: var(--on-surface); }
.gpedia-p { font-size: 13.5px; color: var(--on-surface-variant); line-height: 1.5; margin: 8px 2px; }
.gpedia-p b { color: var(--on-surface); }
.gpedia-faq { display: flex; flex-direction: column; gap: 8px; }
.gp-faq { background: var(--surface-container-low); border-radius: 10px; border: 1px solid var(--outline-variant); overflow: hidden; }
.gp-faq summary { cursor: pointer; padding: 11px 13px; font-weight: 700; color: var(--on-surface); font-size: 14px; list-style: none; }
.gp-faq summary::-webkit-details-marker { display: none; }
.gp-faq summary::after { content: '＋'; float: right; color: var(--primary); font-weight: 800; }
.gp-faq[open] summary::after { content: '−'; }
.gp-faq p { margin: 0; padding: 0 13px 13px; font-size: 13px; color: var(--on-surface-variant); line-height: 1.5; }
.gp-faq p b { color: var(--on-surface); }
/* Modo Simple → letras gigantes y alto contraste */
.gpedia-simple .gpedia-sec { font-size: 1.5rem; }
.gpedia-simple .gp-item p, .gpedia-simple .gpedia-p, .gpedia-simple .gp-faq summary, .gpedia-simple .gp-faq p, .gpedia-simple .gpedia-nota { font-size: 1.15rem; }
.gpedia-simple .gp-mano-info b { font-size: 1.2rem; }
.gpedia-simple .gp-mano-info span { font-size: 1rem; }

/* ══════════════ TOAST PERSISTENTE de salida/reconexión ══════════════ */
.salida-toast { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 9000;
  width: calc(100% - 28px); max-width: 480px; padding: 16px 18px; border-radius: 16px;
  background: linear-gradient(135deg, #1d1609, #14110a); border: 1px solid rgba(212,175,55,.55);
  box-shadow: 0 12px 40px rgba(0,0,0,.6), 0 0 22px rgba(212,175,55,.15); animation: stIn .3s ease; }
@keyframes stIn { from { opacity: 0; transform: translate(-50%, -16px); } to { opacity: 1; transform: translate(-50%, 0); } }
.salida-toast .st-texto { color: #f3ead2; font-size: 14px; line-height: 1.45; margin-bottom: 12px; }
.salida-toast .st-botones { display: flex; gap: 8px; flex-wrap: wrap; }
.salida-toast .st-btn { flex: 1; min-width: 120px; padding: 12px; border-radius: 11px; border: 1px solid var(--outline-variant);
  background: var(--surface-container); color: var(--on-surface); font-weight: 700; font-size: 14px; cursor: pointer; }
.salida-toast .st-btn.st-primary { background: linear-gradient(180deg, #f5d020, #caa24a); color: #1a1400; border: none; box-shadow: 0 2px 10px rgba(212,175,55,.3); }
.salida-toast .st-btn:hover { filter: brightness(1.08); }
.salida-toast.simple .st-texto { font-size: 1.25rem; }
.salida-toast.simple .st-btn { font-size: 1.15rem; padding: 16px; }

/* ══════════════ BAD BEAT JACKPOT (widget lobby + explosión) ══════════════ */
.jackpot-widget { margin: 12px 0; padding: 16px 18px; border-radius: 16px; text-align: center; position: relative; overflow: hidden; }
.jackpot-widget .jp-lbl { font-family: 'Sora', sans-serif; font-weight: 800; font-size: .82rem; letter-spacing: .12em; }
.jackpot-widget .jp-amt { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 2rem; line-height: 1.1; margin: 4px 0; }
.jackpot-widget .jp-sub { font-size: 11.5px; opacity: .8; }
.jackpot-widget .jp-sub b { font-weight: 800; }
/* EUR → dorado/verde premium */
.jackpot-widget.jp-eur { background: linear-gradient(135deg, #1a2417, #14110a); border: 1px solid rgba(245,208,32,.55); box-shadow: 0 0 26px rgba(212,175,55,.18) inset; }
.jackpot-widget.jp-eur .jp-lbl { color: #45dfa4; }
.jackpot-widget.jp-eur .jp-amt { background: linear-gradient(90deg, #f5d020, #45dfa4); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* CHIPS → plateado/azul neón */
.jackpot-widget.jp-chips { background: linear-gradient(135deg, #0e1626, #0c0e14); border: 1px solid rgba(110,168,255,.5); box-shadow: 0 0 24px rgba(80,150,255,.14) inset; }
.jackpot-widget.jp-chips .jp-lbl { color: #9fd0ff; }
.jackpot-widget.jp-chips .jp-amt { background: linear-gradient(90deg, #cfe0ff, #6ea8ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
body.simple-mode .jackpot-widget .jp-amt { font-size: 2.6rem; }
body.simple-mode .jackpot-widget .jp-lbl, body.simple-mode .jackpot-widget .jp-sub { font-size: 1.05rem; }
/* ── BAD BEAT JACKPOT: máquina tragaperras 🎰 animada en el CENTRO (estilo GIF) + marco vivo ── */
.jp-slot { font-size: 3.7rem; line-height: 1; display: inline-block; margin: 4px 0 2px;
  filter: drop-shadow(0 0 16px rgba(255,196,40,.55)); transform-origin: 50% 70%;
  animation: jpSlotJiggle 1.05s ease-in-out infinite; }
@keyframes jpSlotJiggle {
  0%, 100% { transform: rotate(-5deg) translateY(0) scale(1); }
  20%      { transform: rotate(5deg)  translateY(-3px) scale(1.08); }
  40%      { transform: rotate(-4deg) translateY(0) scale(1); }
  60%      { transform: rotate(4deg)  translateY(-2px) scale(1.05); }
  80%      { transform: rotate(-2deg) translateY(0) scale(1); }
}
.jackpot-widget .jp-amt { animation: jpAmtPulse 1.8s ease-in-out infinite; }
@keyframes jpAmtPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.22); } }
.jp-slot-on::after {   /* destello que recorre el marco (marquesina de casino) */
  content: ''; position: absolute; inset: 0; border-radius: 16px; pointer-events: none; z-index: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,220,120,.16) 50%, transparent 70%);
  background-size: 250% 100%; animation: jpShine 2.6s linear infinite;
}
.jp-slot-on > * { position: relative; z-index: 1; }
@keyframes jpShine { 0% { background-position: 150% 0; } 100% { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) { .jp-slot, .jackpot-widget .jp-amt, .jp-slot-on::after { animation: none; } }
/* Explosión */
.jackpot-boom { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center; justify-content: center; background: rgba(6,8,12,.7); animation: jbFade .3s ease; padding: 20px; }
@keyframes jbFade { from { opacity: 0; } to { opacity: 1; } }
.jackpot-boom .jb-card { max-width: 420px; width: 100%; text-align: center; padding: 28px 24px; border-radius: 20px;
  background: linear-gradient(135deg, #1d1609, #14110a); border: 2px solid #f5d020; box-shadow: 0 0 60px rgba(245,208,32,.4); animation: jbPop .4s cubic-bezier(.2,1.4,.4,1); }
@keyframes jbPop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.jb-titulo { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.6rem; color: #f5d020; }
.jb-sub { color: #45dfa4; font-weight: 700; margin: 4px 0 10px; letter-spacing: .1em; }
.jb-amt { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 2.6rem; color: #fff; margin: 6px 0; text-shadow: 0 0 24px rgba(245,208,32,.6); }
.jb-det { color: #e8e2d4; font-size: 14px; margin-bottom: 16px; }
.jb-cerrar { background: linear-gradient(180deg, #f5d020, #caa24a); color: #1a1400; border: none; border-radius: 11px; padding: 12px 28px; font-weight: 800; font-size: 1rem; cursor: pointer; }

/* ── Ronda Virtual (oferta efímera) ── */
.vr-offer { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%); z-index: 9200; width: calc(100% - 28px); max-width: 380px; }
.vr-card { background: linear-gradient(135deg, #1d1609, #14110a); border: 1px solid rgba(245,208,32,.5); border-radius: 16px; padding: 14px 16px; box-shadow: 0 12px 40px rgba(0,0,0,.55); animation: stIn .25s ease; }
.vr-txt { color: #f3ead2; font-size: 14px; text-align: center; margin-bottom: 10px; }
.vr-txt b { color: var(--primary); }
.vr-btns { display: flex; gap: 8px; }
.vr-si { flex: 1; background: linear-gradient(180deg, #f5d020, #caa24a); color: #1a1400; border: none; border-radius: 10px; padding: 11px; font-weight: 800; cursor: pointer; }
.vr-no { flex: 0 0 auto; background: var(--surface-container); color: var(--on-surface-variant); border: 1px solid var(--outline-variant); border-radius: 10px; padding: 11px 16px; cursor: pointer; }
.vr-bar { margin-top: 10px; height: 3px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; }
.vr-bar span { display: block; height: 100%; width: 100%; background: var(--primary); transform-origin: left; animation: vrCount 5s linear forwards; }
@keyframes vrCount { from { transform: scaleX(1); } to { transform: scaleX(0); } }
/* ══════════════ MODO SIMPLE (accesibilidad) ══════════════ */
.btn-simple-grande { margin-top: 10px; width: 100%; padding: 14px; border-radius: 14px; border: 1px solid rgba(110,168,255,.45);
  background: linear-gradient(135deg, #13203a, #0e0e10); color: #9fd0ff; font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.05rem; cursor: pointer; transition: filter .15s; }
.btn-simple-grande:hover { filter: brightness(1.14); }
body.simple-mode.simple-active .btn-simple-grande, body.simple-mode .btn-simple-grande { border-color: #36d07a; color: #8df0bc; }
/* Botones de acción XL y de alto contraste */
body.simple-mode #acciones .acciones-principales { gap: 10px; }
body.simple-mode #acciones .acciones-principales .btn-juego { font-size: 1.45rem !important; font-weight: 800; padding: 20px 10px; min-height: 76px; border-width: 2px; letter-spacing: .01em; }
body.simple-mode #acciones .btn-juego-fold { background: #b3261e !important; color: #fff !important; }
body.simple-mode #acciones .btn-juego-check { background: #1f9e57 !important; color: #fff !important; }
body.simple-mode #acciones .btn-juego-bet { background: linear-gradient(180deg, #f5d020, #caa24a) !important; color: #1a1400 !important; }
/* Ocultar el slider/stepper/deco fino; dejar los botones de tamaño grandes */
body.simple-mode #acciones .bet-vstepper, body.simple-mode #acciones #bet-slider, body.simple-mode #acciones .bet-deco { display: none !important; }
body.simple-mode #acciones .btn-pct { font-size: 1.1rem !important; font-weight: 800; padding: 14px 8px; min-height: 56px; }
body.simple-mode #acciones .bet-input { font-size: 1.35rem; width: 96px; }
/* Turno: zona de acciones con borde verde neón parpadeante + banner grande */
body.simple-mode #acciones:not(.oculto) { border: 3px solid #36d07a; border-radius: 16px; padding: 8px; animation: simpleTurno 1.1s ease-in-out infinite; }
body.simple-mode #turno-banner { background: rgba(31,158,87,.16); border: 2px solid #36d07a; border-radius: 14px; padding: 12px; }
body.simple-mode #turno-texto { font-size: 1.35rem; font-weight: 800; color: #36d07a; }
@keyframes simpleTurno { 0%,100% { box-shadow: 0 0 0 0 rgba(54,208,122,.5); } 50% { box-shadow: 0 0 0 9px rgba(54,208,122,0); } }
/* Cartas del héroe más grandes (+22%) */
body.simple-mode #mano-jugador { transform: scale(1.22); transform-origin: center bottom; }
/* HUD del héroe: nombre y stack gigantes */
body.simple-mode .hero-hud-nombre { font-size: 1.2rem !important; font-weight: 800; }
body.simple-mode .hero-hud-stack { font-size: 1.4rem !important; font-weight: 800; }
body.simple-mode .seat-name { font-size: 1.02rem !important; font-weight: 800; }
/* Limpieza anti-ruido: sin animaciones VIP/aura/corona/anillos giratorios (foto limpia) */
body.simple-mode .aro-admin, body.simple-mode .seat-admin-badge, body.simple-mode .avatar-admin,
body.simple-mode .hero-admin::before, body.simple-mode .hero-hud-avatar.hero-admin::before { animation: none !important; }
/* Ocultar metajuego que distrae en Modo Simple */
body.simple-mode #btn-quickchat, body.simple-mode .mesa-quickchat-btn, body.simple-mode #mesa-espec { display: none !important; }

/* ── Cofre Misterioso (lootbox) ── */
.cofre-widget { display: flex; align-items: center; gap: 12px; margin: 12px 0; padding: 14px 16px; border-radius: 16px;
  background: linear-gradient(135deg, #2a1d0a, #14110a); border: 1px solid rgba(245,208,32,.5); }
.cofre-ico { font-size: 2rem; flex: 0 0 auto; }
.cofre-info { flex: 1; min-width: 0; }
.cofre-tit { font-family: 'Sora', sans-serif; font-weight: 800; color: var(--on-surface); }
.cofre-sub { font-size: 11.5px; color: var(--on-surface-variant); }
.cofre-btn { flex: 0 0 auto; background: linear-gradient(180deg, #f5d020, #caa24a); color: #1a1400; border: none; border-radius: 11px; padding: 11px 16px; font-weight: 800; cursor: pointer; box-shadow: 0 2px 10px rgba(212,175,55,.3); }
.cofre-btn:hover { filter: brightness(1.08); }
.cofre-overlay { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center; justify-content: center; background: rgba(6,8,12,.82); padding: 20px; }
.cofre-anim-box { text-align: center; max-width: 380px; width: 100%; padding: 28px 22px; border-radius: 20px;
  background: linear-gradient(135deg, #1d1609, #14110a); border: 2px solid rgba(245,208,32,.5); }
.cofre-anim-box.cofre-gordo { border-color: #f5d020; box-shadow: 0 0 70px rgba(245,208,32,.55); animation: cofreGordoGlow 1.2s ease-in-out infinite; }
@keyframes cofreGordoGlow { 0%,100% { box-shadow: 0 0 40px rgba(245,208,32,.4); } 50% { box-shadow: 0 0 80px rgba(245,208,32,.7); } }
.cofre-chest { font-size: 4.5rem; line-height: 1; }
.cofre-chest.tiembla { animation: cofreTiembla .25s linear infinite; }
@keyframes cofreTiembla { 0%,100% { transform: translate(0,0) rotate(0); } 25% { transform: translate(-3px,1px) rotate(-5deg); } 75% { transform: translate(3px,-1px) rotate(5deg); } }
.cofre-chest.abierto { animation: cofreAbre .5s cubic-bezier(.2,1.5,.4,1); }
@keyframes cofreAbre { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.cofre-msg { margin-top: 14px; color: #f5d020; font-weight: 700; letter-spacing: .04em; }
.cofre-premio-tit { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.3rem; color: #f5d020; margin: 12px 0 6px; }
.cofre-gordo .cofre-premio-tit { font-size: 1.5rem; text-shadow: 0 0 22px rgba(245,208,32,.6); }
.cofre-premio-det { color: #e8e2d4; font-size: 14px; margin-bottom: 16px; }
.cofre-cerrar { background: linear-gradient(180deg, #f5d020, #caa24a); color: #1a1400; border: none; border-radius: 11px; padding: 12px 28px; font-weight: 800; font-size: 1rem; cursor: pointer; }
body.simple-mode .cofre-premio-tit { font-size: 1.6rem; }
body.simple-mode .cofre-premio-det { font-size: 1.15rem; }

/* ── Botes: disparador ℹ️ + modal de desglose (limpio, sin nombres tachados) ── */
.sp-info-btn { background: rgba(212,175,55,.12); border: 1px solid rgba(212,175,55,.4); color: var(--primary);
  border-radius: 999px; padding: 4px 12px; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.sp-info-btn:hover { background: rgba(212,175,55,.2); }
.sp-modal { position: fixed; inset: 0; z-index: 9300; display: flex; align-items: center; justify-content: center; background: rgba(6,8,12,.6); padding: 20px; }
.sp-modal-card { background: linear-gradient(135deg, #1a1408, #0e0e10); border: 1px solid rgba(212,175,55,.4); border-radius: 16px; padding: 18px; max-width: 320px; width: 100%; }
.sp-modal-tit { font-family: 'Sora', sans-serif; font-weight: 800; color: var(--primary); margin-bottom: 12px; text-align: center; }
.sp-modal-row { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.sp-modal-line { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--on-surface); }
.sp-modal-line b { color: var(--primary); font-family: 'Sora', sans-serif; }
.sp-quien { font-size: 12px; color: var(--on-surface-variant); margin-top: 3px; }
.sp-modal-cerrar { width: 100%; margin-top: 14px; background: linear-gradient(180deg, #f5d020, #caa24a); color: #1a1400; border: none; border-radius: 10px; padding: 11px; font-weight: 800; cursor: pointer; }

/* ══════════════ PERFIL responsive (anti-overflow móvil) ══════════════ */
.perfil-eco { display: flex; flex-direction: column; gap: 10px; padding: 0 6px; margin-top: 8px; }
.perfil-eco-box { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0;
  padding: 12px 14px; border-radius: 14px; background: var(--surface-container-low); border: 1px solid var(--outline-variant); }
.perfil-eco-val { display: flex; align-items: center; gap: 8px; font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.5rem; min-width: 0; }
.perfil-eco-val span#perfil-fichas, .perfil-eco-val span#perfil-euros { overflow: hidden; text-overflow: ellipsis; }
.perfil-eco-fichas { color: #f5d020; }
.perfil-eco-eur-val { color: #45dfa4; }
.perfil-eco-val small { font-size: .7rem; color: var(--on-surface-variant); font-weight: 600; }
.perfil-eco-val .material-symbols-outlined { font-size: 1.4rem; }
#perfil-eco-eur #btn-solicitar-retiro { flex: 0 0 auto; font-size: 12px; padding: 8px 12px; }
/* Stats 2x2 (en vez de 4x1 apretado) */
.perfil-stats { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 0 6px; }
.perfil-stat { padding: 14px 10px; }
.perfil-stat .ps-val { font-size: 1.9rem !important; font-weight: 800; color: var(--on-surface); }
.perfil-stat .ps-lbl { font-size: .9rem !important; color: var(--on-surface); opacity: .85; }
/* Barra de experiencia con aire + extremos alineados */
.perfil-nivel { margin: 18px 6px; }
.perfil-nivel-top { display: flex; align-items: center; justify-content: space-between; }
.perfil-nivel-lbl, .perfil-xp { color: #f5d020; font-weight: 700; }
/* Modo Simple → todo más grande */
body.simple-mode .perfil-eco-val { font-size: 2rem; }
body.simple-mode .perfil-stat .ps-val { font-size: 2.3rem !important; }
body.simple-mode .perfil-stat .ps-lbl { font-size: 1.05rem !important; }
body.simple-mode .perfil-nivel-lbl, body.simple-mode .perfil-xp { font-size: 1.1rem; }

/* ── Railbird (apuestas de la grada · panel espectador en mesas €) ── */
.railbird-fab { position: fixed; left: 12px; bottom: 90px; z-index: 860; width: 212px; max-width: 62vw;
  background: linear-gradient(135deg, #13203a, #0c0e14); border: 1px solid rgba(110,168,255,.5); border-radius: 14px; padding: 10px; box-shadow: 0 6px 22px rgba(0,0,0,.55); }
.railbird-fab .rb-head { font-family: 'Sora', sans-serif; font-size: 12px; font-weight: 800; color: #9fd0ff; text-align: center; margin-bottom: 8px; line-height: 1.4; }
.railbird-fab .rb-pool { color: #f5d020; font-size: 13px; }
.railbird-fab .rb-list { display: flex; flex-direction: column; gap: 6px; max-height: 38vh; overflow-y: auto; }
.railbird-fab .rb-bet { background: rgba(110,168,255,.14); border: 1px solid rgba(110,168,255,.4); color: #e8eefc; border-radius: 9px; padding: 9px; font-size: 12px; cursor: pointer; text-align: left; }
.railbird-fab .rb-bet:hover { background: rgba(110,168,255,.26); }
.railbird-fab .rb-bet b { color: #fff; }
.railbird-fab .rb-vacio { font-size: 11px; color: #8c9bb5; text-align: center; padding: 8px; }
body.simple-mode .railbird-fab { width: 270px; }
body.simple-mode .railbird-fab .rb-bet { font-size: 1rem; padding: 13px; }
body.simple-mode .railbird-fab .rb-head { font-size: 1rem; }

/* Reportar logo de clan (discreto) */
.clan-reportar { width: 100%; margin: 6px 0 4px; background: none; border: 1px solid var(--outline-variant); color: var(--on-surface-variant); border-radius: 9px; padding: 8px; font-size: 12px; cursor: pointer; }
.clan-reportar:hover { color: #e08a8a; border-color: #5a2a2a; }

/* Escudos prediseñados (grid de selección + render) */
.clan-presets-lbl { font-size: 12px; color: var(--on-surface-variant); margin: 6px 2px 4px; }
.clan-presets { display: flex; gap: 8px; flex-wrap: wrap; }
.clan-preset-btn { width: 46px; height: 46px; border-radius: 11px; border: 2px solid transparent; font-size: 1.5rem; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.3); transition: transform .1s; }
.clan-preset-btn:hover { transform: scale(1.06); }
.clan-preset-btn.sel { border-color: #fff; box-shadow: 0 0 0 2px var(--primary); }
.clan-escudo-preset { display: flex; align-items: center; justify-content: center; font-size: 1.7rem; }
.clan-escudo.sm.clan-escudo-preset { font-size: 1.15rem; }
.cw-card .clan-escudo-preset, .clan-hero .clan-escudo-preset { font-size: 2rem; }
.clan-editescudo { margin-bottom: 12px; border: 1px solid var(--outline-variant); border-radius: 12px; padding: 8px 12px; }
.clan-editescudo summary { cursor: pointer; font-weight: 700; color: var(--primary); font-size: 13px; list-style: none; }
.clan-editescudo summary::-webkit-details-marker { display: none; }
.clan-editescudo .clan-presets { margin-top: 10px; }
.clan-upload-btn { width: 100%; margin-top: 10px; background: rgba(110,168,255,.14); border: 1px solid rgba(110,168,255,.4); color: #9fd0ff; border-radius: 10px; padding: 10px; font-weight: 700; font-size: 13px; cursor: pointer; }
.clan-upload-btn:hover { background: rgba(110,168,255,.24); }
.clan-upload-btn:disabled { opacity: .6; cursor: default; }

/* ══════════════ MULTI-MESA: pestañas del footer (hasta 4 mesas) ══════════════ */
/* Clase PROPIA (.multimesa-tabs), NO '.mesa-tabs': esta última la usa el nav móvil de la mesa
   (<nav class="giley-tabs mesa-tabs">) y compartirla provocaba que este footer fijo+oscuro tapara
   TODA la mesa a ≤1200px (overlay negro que bloqueaba clics y descubrir cartas). */
.multimesa-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 870; display: flex; gap: 5px; padding: 6px 8px;
  background: rgba(8,10,14,.94); border-top: 1px solid rgba(212,175,55,.3); overflow-x: auto; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
.mtab { flex: 1 1 auto; min-width: 84px; max-width: 170px; padding: 10px 8px; border-radius: 10px; border: 1px solid var(--outline-variant);
  background: var(--surface-container); color: var(--on-surface-variant); font-weight: 700; font-size: 12px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mtab.activa { background: linear-gradient(180deg, #f5d020, #caa24a); color: #1a1400; border-color: transparent; }
.mtab.turno { border-color: #36d07a; color: #8df0bc; animation: mtabBlink 1s ease-in-out infinite; }
@keyframes mtabBlink { 0%,100% { box-shadow: 0 0 0 0 rgba(54,208,122,.5); } 50% { box-shadow: 0 0 0 5px rgba(54,208,122,0); } }
body.simple-mode .mtab { font-size: 1.05rem; padding: 14px 10px; }

/* Confeti (emojis cayendo) */
.confeti-capa { position: fixed; inset: 0; pointer-events: none; z-index: 9400; overflow: hidden; }
.confeti-pza { position: absolute; top: -30px; animation: confetiCae 3.6s linear forwards; }
@keyframes confetiCae { to { transform: translateY(105vh) rotate(540deg); opacity: .2; } }
.seat-turn-badge {
  position: absolute; transform: translateY(-26px);
  background: var(--primary); color: #1a1407;
  font-size: 10px; font-weight: 700; letter-spacing: .05em;
  padding: 2px 9px; border-radius: 9999px; box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  z-index: 2;
}
.seat-ret {
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  color: #ef9a9a; text-transform: uppercase;
}

/* Cartas reveladas por un perdedor que eligió "Mostrar". Van dentro del asiento,
   que al estar .retirado ya las muestra desaturadas/atenuadas (fuera de la mano). */
.seat-reveladas {
  display: flex; flex-direction: column; align-items: center; margin-top: 3px;
}
/* Abanico de cartas reveladas (compacto, no ocupa media mesa). */
.seat-rev-cards { display: flex; justify-content: center; align-items: flex-end; }
.seat-rev-cards .hist-carta-wrap {
  transform-origin: 50% 120%;
  transform: rotate(calc((var(--i,0) - (var(--n,1) - 1) / 2) * 12deg));
  margin: 0 -6px;
}
.seat-rev-cards .hist-carta-img { width: 22px; height: auto; display: block; border-radius: 2px; box-shadow: 0 2px 4px rgba(0,0,0,.5); }
.seat-reveladas .hist-carta { font-size: 11px; padding: 2px 6px; }
.seat-reveladas .seat-rev-pts {
  width: 100%; text-align: center; font-size: 10px; color: var(--on-surface-variant); margin-top: 1px;
}

/* Etiqueta NPC/bot junto al nombre del asiento (dorado, discreto). */
.npc-tag {
  display: inline-block; align-self: center; margin-top: 2px;
  font-size: 9px; font-weight: 700; letter-spacing: .02em;
  padding: 1px 6px; border-radius: 6px; white-space: nowrap;
  background: rgba(212,175,55,0.16); color: var(--primary);
  border: 1px solid rgba(212,175,55,0.3);
}

/* ══════════════════════════════════════════════════════════════
   CAMINO DE USUARIO: modal de elección + Cajero (Gold/Dark)
   ══════════════════════════════════════════════════════════════ */
.modal-choice-box {
  width: min(420px, 94vw);
  background: linear-gradient(180deg, #16161a, #0e0e10);
  border: 1px solid rgba(212,175,55,0.28); border-radius: 18px;
  padding: 26px 24px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 30px rgba(212,175,55,0.08);
}
.modal-choice-head { text-align: center; margin-bottom: 6px; }
.modal-choice-head h2 { font-family: 'Sora', Inter, sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--primary); margin: 0 0 4px; }
.modal-choice-head p { color: var(--on-surface-variant); margin: 0; }
.btn-choice-real {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 16px; border: none; border-radius: 14px; cursor: pointer;
  background: linear-gradient(135deg, #1f8f3a 0%, var(--primary-container) 120%);
  color: #fff; box-shadow: 0 6px 20px rgba(31,143,58,0.3);
  transition: transform .15s ease, filter .15s ease; position: relative;
}
.btn-choice-real:hover { filter: brightness(1.07); transform: translateY(-1px); }
.btn-choice-real .material-symbols-outlined { font-size: 26px; }
.btn-choice-real .bc-main { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.05rem; }
.btn-choice-real .bc-sub { font-size: 12px; opacity: .85; }
.btn-choice-ghost {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 13px; border-radius: 12px; cursor: pointer;
  background: transparent; color: var(--on-surface-variant);
  border: 1px solid var(--outline-variant); transition: all .15s ease;
}
.btn-choice-ghost:hover { border-color: var(--primary); color: var(--on-surface); }
.btn-choice-ghost .material-symbols-outlined { font-size: 20px; }
.btn-choice-ghost .bc-sub2 { font-size: 11px; opacity: .7; }

/* ── Cajero ── */
.cajero-box {
  width: min(420px, 94vw); max-height: 88vh; overflow-y: auto;
  background: linear-gradient(180deg, #16161a, #0e0e10);
  border: 1px solid rgba(212,175,55,0.28); border-radius: 18px;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 30px rgba(212,175,55,0.08);
}
.cajero-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cajero-head h3 { font-family: 'Sora', Inter, sans-serif; font-size: 16px; font-weight: 700; color: var(--on-surface); margin: 0; }
.cajero-saldo {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 16px; margin: 16px 20px 0; border-radius: 12px;
  background: rgba(212,175,55,0.08); border: 1px solid rgba(212,175,55,0.18);
}
.cajero-saldo-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--on-surface-variant); }
.cajero-saldo-val { font-family: 'Sora', sans-serif; font-size: 1.8rem; font-weight: 700; color: var(--primary); }
.cajero-tabs { display: flex; gap: 6px; padding: 16px 20px 0; }
.cajero-tab {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px; border: none; border-radius: 10px; cursor: pointer;
  background: var(--surface-container); color: var(--on-surface-variant); font-weight: 600; font-size: 14px;
}
.cajero-tab .material-symbols-outlined { font-size: 18px; }
.cajero-tab.active { background: rgba(212,175,55,0.16); color: var(--primary); }
/* "Ingresar" un poco más destacado que "Retirar" (incentiva el flujo hacia dentro) */
.cajero-tab[data-ctab="ingresar"].active { background: rgba(0,200,83,0.16); color: #2ecc71; }
.cajero-panel { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.cajero-label { font-size: 12px; color: var(--on-surface-variant); margin-top: 6px; }
.cajero-input {
  padding: 11px 14px; border-radius: 10px; font-size: 15px;
  background: var(--surface-container); color: var(--on-surface); border: 1px solid var(--outline-variant);
}
.cajero-input:focus { outline: none; border-color: var(--primary); }
.cajero-hint { font-size: 12px; color: var(--on-surface-variant); margin: 4px 0 0; }
.btn-cajero-primary {
  margin-top: 14px; padding: 14px; border: none; border-radius: 12px; cursor: pointer;
  background: linear-gradient(135deg, #1f8f3a, #15c85a); color: #fff;
  font-family: 'Sora', sans-serif; font-weight: 700; font-size: 15px;
  box-shadow: 0 6px 18px rgba(21,200,90,0.28); transition: filter .15s ease, transform .15s ease;
}
.btn-cajero-primary:hover { filter: brightness(1.07); transform: translateY(-1px); }
.btn-cajero-ghost {
  margin-top: 14px; padding: 12px; border-radius: 11px; cursor: pointer;
  background: transparent; color: var(--on-surface-variant);
  border: 1px solid var(--outline-variant); font-weight: 600; font-size: 14px; transition: all .15s ease;
}
.btn-cajero-ghost:hover { border-color: var(--primary); color: var(--on-surface); }
.btn-cajero-ghost:disabled, .btn-cajero-primary:disabled { opacity: .45; cursor: not-allowed; filter: none; transform: none; }

/* Mensaje de validación en rojo (elegante) */
.cajero-error {
  margin: 4px 0 0; font-size: 13px; font-weight: 600; color: #ff6b6b;
  display: flex; align-items: center; gap: 5px;
}
.cajero-error::before { content: '⚠'; }

/* Resumen de comisión + neto en el retiro */
.cajero-resumen { font-size: 13px; color: var(--on-surface-variant); margin: 6px 0 0; }
.cajero-resumen strong { color: var(--primary); }

/* Contador "jugadores en línea" en el banner del lobby */
.online-chip {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 10px 0 0; padding: 5px 12px; border-radius: 9999px;
  background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.35);
  color: #34d399; font-size: 13px; font-weight: 600; width: max-content;
}
.online-chip #lobby-online-count { color: #fff; font-weight: 700; }
.online-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #34d399;
  box-shadow: 0 0 0 0 rgba(52,211,153,0.7); animation: onlinePulse 1.8s infinite;
}
@keyframes onlinePulse {
  0%   { box-shadow: 0 0 0 0 rgba(52,211,153,0.6); }
  70%  { box-shadow: 0 0 0 7px rgba(52,211,153,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}

/* ════════════════ TIENDA DE FICHAS · Giley Dark Premium ════════════════ */
.tienda-box {
  width: 100%; max-width: 540px; max-height: 92vh;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #15140f 0%, #0e0e0e 38%);
  border: 1px solid #4d4635; border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,.7), 0 0 60px rgba(212,175,55,.08), inset 0 1px 0 rgba(255,255,255,.05);
  overflow: hidden; animation: fadeIn .35s ease-out;
}

/* ── Cabecera con saldo ── */
.tienda-head {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid #2a2620;
  background: linear-gradient(180deg, rgba(212,175,55,.10), transparent);
}
.tienda-head-title {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Sora', Inter, sans-serif; font-weight: 800; font-size: 1.05rem; color: #e5e2e1;
}
.tienda-head-title .material-symbols-outlined { color: #f2ca50; font-size: 24px; font-variation-settings: 'FILL' 1; }
.tienda-saldo {
  margin-left: auto;
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 9999px;
  background: rgba(0,0,0,.4); border: 1px solid #4d4635;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.tienda-saldo .material-symbols-outlined { color: #f2ca50; font-size: 19px; font-variation-settings: 'FILL' 1; }
.tienda-saldo-num { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1rem; color: #f2ca50; }
.tienda-saldo-lbl { font-size: 11px; color: #d0c5af; letter-spacing: .04em; }
.tienda-x {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: 0 0 auto; cursor: pointer;
  border: 1px solid #2a2620; border-radius: 10px;
  background: rgba(255,255,255,.04); color: #d0c5af; transition: background .2s, color .2s;
}
.tienda-x:hover { background: rgba(255,255,255,.1); color: #e5e2e1; }

.tienda-scroll { overflow-y: auto; padding: 16px 18px 20px; -webkit-overflow-scrolling: touch; }

/* ── Títulos de sección ── */
.tienda-cos-titulo { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 13px; color: #e5e2e1; margin: 0 0 10px; display: flex; align-items: center; gap: 7px; }
.tienda-cos-titulo .material-symbols-outlined { font-size: 18px; color: #f2ca50; }

/* ── Carrusel superior ── */
.tienda-carrusel { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.carrusel-card {
  flex: 0 0 auto; width: 96px; border-radius: 14px; padding: 9px; text-align: center; cursor: pointer;
  background: linear-gradient(170deg, #1a1813, #111); border: 1px solid #4d4635;
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.carrusel-card:hover { transform: translateY(-3px) scale(1.04); filter: brightness(1.08); box-shadow: 0 8px 22px rgba(212,175,55,.22); }
.carrusel-prev { height: 56px; border-radius: 10px; margin-bottom: 7px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; border: 1px solid rgba(255,255,255,.08); }
.carrusel-name { font-size: 10.5px; color: #d0c5af; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Packs con EFECTO SEÑUELO ── */
.tienda-packs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#tienda-packs { grid-template-columns: 1fr 1.18fr 1fr; gap: 10px; align-items: center; padding: 16px 2px 6px; }
.tienda-pack {
  position: relative; border: 1px solid #4d4635; border-radius: 18px;
  padding: 18px 8px 14px; text-align: center;
  background: linear-gradient(175deg, #1a1813, #101010);
  transition: transform .15s, box-shadow .15s, filter .12s;
}
.tienda-pack:not(.mega):hover { transform: translateY(-3px); filter: brightness(1.07); box-shadow: 0 10px 26px rgba(0,0,0,.5); }
.tienda-pack.mega {
  border: 2px solid #f2ca50;
  background: linear-gradient(165deg, #322710 0%, #16110a 100%);
  box-shadow: 0 0 30px rgba(212,175,55,.32), inset 0 1px 0 rgba(255,255,255,.08);
  transform: scale(1.08); z-index: 2; padding-top: 24px;
}
@media (min-width: 560px) { .tienda-pack.mega { transform: scale(1.12); } }
.tienda-pack-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 4px;
  background: linear-gradient(90deg, #f5d020, #c79200); color: #1a1400; font-size: 10px; font-weight: 800;
  padding: 4px 12px; border-radius: 9999px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
  box-shadow: 0 3px 10px rgba(212,175,55,.5);
}
.tienda-pack-badge .material-symbols-outlined { font-size: 13px; }
.tienda-pack-icon { margin-bottom: 6px; }
.tienda-pack-icon .material-symbols-outlined { font-size: 26px; color: #8a8170; }
.tienda-pack.mega .tienda-pack-icon .material-symbols-outlined { font-size: 32px; color: #f2ca50; }
.tienda-pack-chips { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.7rem; line-height: 1; color: #fff; }
.tienda-pack.mega .tienda-pack-chips { color: #f2ca50; font-size: 2.6rem; text-shadow: 0 0 22px rgba(242,202,80,.4); }
.tienda-pack-chips small { display: block; font-size: 0.55rem; color: #d0c5af; font-weight: 600; letter-spacing: .1em; margin-top: 4px; }
.tienda-pack-name { font-size: 11px; color: #d0c5af; text-transform: uppercase; letter-spacing: .06em; margin-top: 6px; font-weight: 600; }
.tienda-pack-bonus {
  display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 9999px;
  font-size: 11px; font-weight: 700; color: #f2ca50;
  background: rgba(242,202,80,.12); border: 1px solid rgba(242,202,80,.25);
}
.tienda-pack-bonus.base { color: #8a8170; background: rgba(255,255,255,.04); border-color: #2a2620; }
.tienda-pack-btn {
  margin-top: 14px; width: 100%; padding: 11px 8px; border: none; border-radius: 12px;
  display: flex; flex-direction: column; gap: 1px; align-items: center; justify-content: center;
  background: #242019; color: #e5e2e1; font-weight: 800; cursor: pointer; transition: filter .12s, transform .12s;
}
.tienda-pack-btn .tpb-eur { font-family: 'Sora', sans-serif; font-size: 1.05rem; line-height: 1.1; }
.tienda-pack-btn .tpb-cta { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.tienda-pack.mega .tienda-pack-btn {
  background: linear-gradient(160deg, #f5d020, #d4af37 55%, #c79200);
  color: #1a1400; box-shadow: 0 6px 18px rgba(212,175,55,.45), inset 0 1px 0 rgba(255,255,255,.4);
}
.tienda-pack-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.tienda-pack-btn:active { transform: translateY(0); }
.tienda-pack-btn:disabled { opacity: .5; cursor: wait; }
@media (max-width: 480px) {
  #tienda-packs { grid-template-columns: 1fr; }
  .tienda-pack.mega { transform: none; order: -1; }
}

/* ── Pie ── */
.tienda-secure { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 18px 0 0; font-size: 12px; color: #8a8170; }
.tienda-secure .material-symbols-outlined { font-size: 15px; color: #f2ca50; }
.tienda-ghost {
  margin-top: 12px; width: 100%; padding: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 12px; border: 1px solid #4d4635; background: rgba(255,255,255,.04);
  color: #e5e2e1; font-weight: 600; font-size: 0.9rem; transition: background .2s;
}
.tienda-ghost .material-symbols-outlined { font-size: 18px; color: #f2ca50; }
.tienda-ghost:hover { background: rgba(255,255,255,.08); }

/* ── Hucha / Piggy Bank ── */
.piggy-visual { position: relative; width: 120px; height: 120px; margin: 8px auto 12px; border-radius: 50%; background: #161616; border: 3px solid var(--primary); overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 26px rgba(212,175,55,.25); }
.piggy-fill { position: absolute; left: 0; bottom: 0; width: 100%; height: 0; background: linear-gradient(180deg, rgba(245,208,32,.55), rgba(199,146,0,.7)); transition: height .6s ease; }
.piggy-pig { position: relative; z-index: 2; font-size: 3.4rem !important; color: var(--primary); filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.piggy-amount { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.7rem; color: var(--primary); }
/* Hucha con imagen 3D real (asset Stitch). */
.piggy-img-wrap { border: none; background: none; box-shadow: none; overflow: visible; width: 150px; height: 150px; }
.piggy-pig-img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 22px rgba(212,175,55,.3)); }

/* ── Liga Semanal ── */
.liga-badge { display: inline-block; font-size: 10px; font-weight: 800; padding: 1px 8px; border-radius: 9999px; text-transform: uppercase; letter-spacing: .03em; border: 1px solid transparent; }
.liga-badge.t-Bronce   { background: rgba(205,127,50,.18);  color: #e0996a; border-color: rgba(205,127,50,.4); }
.liga-badge.t-Plata    { background: rgba(192,192,192,.18); color: #d8d8d8; border-color: rgba(192,192,192,.4); }
.liga-badge.t-Oro      { background: rgba(255,215,0,.16);   color: #ffd700; border-color: rgba(255,215,0,.45); }
.liga-badge.t-Diamante { background: rgba(0,229,255,.16);   color: #5ff0ff; border-color: rgba(0,229,255,.45); box-shadow: 0 0 8px rgba(0,229,255,.35); }
/* LIGA SEMANAL — rediseño premium (tarjeta de posición + podio Top 3 + filas) */
.liga-yo { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: linear-gradient(135deg, rgba(245,197,66,.16), rgba(245,197,66,.04));
  border: 1px solid rgba(245,197,66,.36); border-radius: 14px; padding: 12px 14px; margin-bottom: 12px;
  box-shadow: 0 0 20px rgba(245,197,66,.10); }
.liga-yo-rank { font-family: 'Sora', sans-serif; font-weight: 900; font-size: 1.5rem; color: #f5c542; line-height: 1; }
.liga-yo-sub { font-size: 11px; color: var(--on-surface-variant); }
.liga-tabla { max-height: 52vh; overflow-y: auto; }
/* ── PODIO Top 3 ── */
.liga-podio { display: grid; grid-template-columns: 1fr 1.18fr 1fr; gap: 8px; align-items: end; margin: 2px 0 14px; }
.liga-pod { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 6px 0; border-radius: 14px 14px 0 0; cursor: default;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.09); border-bottom: none; }
.liga-pod.p1 { padding-top: 20px; background: linear-gradient(180deg, rgba(255,215,0,.20), rgba(255,215,0,.04));
  border-color: rgba(255,215,0,.5); box-shadow: 0 -2px 26px rgba(255,215,0,.18); }
.liga-pod.p2 { background: linear-gradient(180deg, rgba(200,200,200,.16), rgba(200,200,200,.03)); border-color: rgba(200,200,200,.38); }
.liga-pod.p3 { background: linear-gradient(180deg, rgba(205,127,50,.16), rgba(205,127,50,.03)); border-color: rgba(205,127,50,.38); }
.liga-pod-medal { font-size: 1.5rem; line-height: 1; }
.liga-pod.p1 .liga-pod-medal { font-size: 1.95rem; }
.liga-pod-av { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.05rem; color: #1a1400;
  background: linear-gradient(135deg, #f5d878, #d4a017); box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.liga-pod.p2 .liga-pod-av { background: linear-gradient(135deg, #ededed, #aeaeae); }
.liga-pod.p3 .liga-pod-av { background: linear-gradient(135deg, #e6ad72, #bd7a33); }
.liga-pod-nom { font-weight: 700; font-size: 12px; color: #fff; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.liga-pod-pts { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 13px; color: #f5c542; }
.liga-pod-u { font-size: .72em; opacity: .65; font-weight: 600; }
.liga-pod-base { margin-top: 5px; width: 100%; text-align: center; font-family: 'Sora', sans-serif; font-weight: 900;
  font-size: 1.05rem; color: rgba(255,255,255,.55); background: rgba(0,0,0,.28); padding: 4px 0; }
.liga-pod.p1 .liga-pod-base { color: #ffd700; }
.liga-pod.yo { outline: 2px solid #f5c542; outline-offset: -1px; }
/* ── Filas 4+ ── */
.liga-row { display: grid; grid-template-columns: 30px 1fr auto auto; align-items: center; gap: 9px; padding: 7px 8px; border-bottom: 1px solid var(--outline-variant); border-radius: 8px; }
.liga-row.yo { background: linear-gradient(90deg, rgba(245,197,66,.16), rgba(245,197,66,.02)); border-bottom-color: transparent; }
.liga-pos { width: 25px; height: 25px; border-radius: 50%; background: rgba(255,255,255,.06);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; color: var(--on-surface-variant); }
.liga-row.yo .liga-pos { background: rgba(245,197,66,.22); color: #f5c542; }
.liga-nombre { font-weight: 600; font-size: 13px; color: var(--on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.liga-pts { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 13px; color: #f5c542; }

/* ── Objetos arrojadizos ── */
.throw-menu {
  position: fixed; z-index: 200; display: flex; gap: 8px; padding: 8px 10px;
  background: rgba(20,20,24,.96); border: 1px solid var(--outline-variant); border-radius: 9999px;
  box-shadow: 0 8px 24px rgba(0,0,0,.55); transform: translate(-50%, -130%);
  animation: throwMenuIn .15s ease;
}
@keyframes throwMenuIn { from { opacity: 0; transform: translate(-50%, -120%) scale(.85); } to { opacity: 1; transform: translate(-50%, -130%) scale(1); } }
/* Desktop: dirección inteligente — asiento en mitad superior → abre hacia ABAJO. */
.throw-menu.throw-menu-down { transform: translate(-50%, 20px); animation: throwMenuInDown .15s ease; }
@keyframes throwMenuInDown { from { opacity: 0; transform: translate(-50%, 6px) scale(.85); } to { opacity: 1; transform: translate(-50%, 20px) scale(1); } }

/* ── BOTTOM-SHEET móvil (anti-overflow del popover) ── */
.throw-backdrop {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: fadeInBd .15s ease;
}
@keyframes fadeInBd { from { opacity: 0; } to { opacity: 1; } }
.throw-menu.throw-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; top: auto; transform: none;
  width: 100%; max-width: 100%; z-index: 9999;
  flex-direction: column; gap: 12px; align-items: stretch;
  border-radius: 18px 18px 0 0;
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
  animation: throwSheetUp .24s cubic-bezier(.16,1,.3,1);
}
@keyframes throwSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.throw-sheet-grip { width: 40px; height: 4px; border-radius: 99px; background: #4a4a52; margin: 2px auto 2px; }
.throw-sheet-title { text-align: center; font-weight: 700; font-size: 13px; color: #cfd6e0; margin-bottom: 2px; }
.throw-sheet .pm-throws { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.throw-sheet .throw-item { width: 56px; height: 56px; font-size: 1.6rem; }   /* ≥44px área táctil */
.throw-sheet .throw-item-img { width: 32px; height: 32px; }
.throw-sheet .pm-report { width: 100%; min-height: 48px; border-radius: 12px; font-size: 15px; }

/* ── BOCADILLOS (speech bubbles) sobre el avatar — componente reutilizable ── */
.speech-bubble {
  position: fixed; z-index: 85; transform: translate(-50%, -100%);
  pointer-events: none; white-space: nowrap; max-width: 70vw; overflow: hidden; text-overflow: ellipsis;
  background: #fff; color: #14141a;
  font-family: 'Sora', sans-serif; font-weight: 800; font-size: 13px; line-height: 1;
  padding: 8px 13px; border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.5), 0 0 0 2px rgba(231,193,77,.55);
  animation: bubblePop .28s cubic-bezier(.18,1.4,.4,1);
}
.speech-bubble::after {   /* cola apuntando al avatar */
  content: ''; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
  border: 7px solid transparent; border-top-color: #fff; border-bottom: 0;
}
@keyframes bubblePop { from { opacity: 0; transform: translate(-50%, -80%) scale(.6); } to { opacity: 1; transform: translate(-50%, -100%) scale(1); } }
.speech-bubble.out { animation: bubbleOut .26s ease forwards; }
@keyframes bubbleOut { to { opacity: 0; transform: translate(-50%, -125%) scale(.92); } }

/* ── QUICK CHAT (frases manuales) ── */
.mesa-quickchat-btn {
  position: static; flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 11px;
  border: 1px solid #2e3a47; background: rgba(13,17,24,.92); color: #9ecaff;   /* 888 azul (antes oro) */
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.5);
}
.mesa-quickchat-btn:active { transform: translateY(1px); }
.mesa-quickchat-btn .material-symbols-outlined { font-size: 23px; }
/* Títulos de sección del menú de gestos + accesorios. */
.qc-sec-tit { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #9a9aa6; margin: 7px 2px 3px; }
.qc-sec-tit:first-child { margin-top: 0; }
.qc-acc { font-size: 1.5rem; }

/* ══ Optimización MÓVIL: efectos caros simplificados en pantallas pequeñas (FPS) ══ */
@media (max-width: 640px) {
  /* Figuras de avatar (×5 en pantalla): un solo drop-shadow en vez de dos. */
  .avatar-figura { filter: drop-shadow(0 5px 5px rgba(0,0,0,.55)); }
  .seat-player.turno-activo .avatar-figura { filter: drop-shadow(0 0 9px rgba(54,208,122,1)); }
  /* Backdrop de los menús: sólido (el blur a pantalla completa es caro al abrir). */
  .throw-backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(0,0,0,.62); }
}
/* Popover desktop: columna de secciones anclada sobre el botón (con scroll). */
.throw-menu.qc-pop {
  transform: none; flex-direction: column; gap: 4px; padding: 10px;
  border-radius: 14px; min-width: 212px; max-width: 262px; max-height: 70vh; overflow-y: auto;
  animation: throwMenuInDown .15s ease;
}
.qc-frases { display: flex; flex-direction: column; gap: 8px; }
.qc-sheet .qc-frases { gap: 10px; margin-top: 2px; }
.qc-frase {
  background: #1e1e26; color: #eaeaf0; border: 1px solid #34343f; border-radius: 11px;
  padding: 12px 14px; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer;
  min-height: 44px; transition: background .12s, border-color .12s;     /* ≥44px táctil */
}
.qc-frase:hover { border-color: var(--primary); background: #26262f; }
.qc-frase:active { transform: translateY(1px); }

/* Quick chat: rejilla de emojis 3D (sustituye al texto) */
.qc-emojis { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.qc-pop .qc-emojis { max-width: 232px; }
.qc-emoji {
  width: 52px; height: 52px; padding: 4px; border-radius: 12px;
  border: 1px solid #34343f; background: #1a1a22; cursor: pointer;
  display: grid; place-items: center; transition: transform .12s, border-color .12s;
}
.qc-emoji:hover { border-color: var(--primary); transform: scale(1.1); }
.qc-emoji img { width: 100%; height: 100%; object-fit: contain; }
/* Gesto bloqueado (exclusivo del Pase): atenuado + candado. */
.qc-emoji.qc-locked { position: relative; opacity: .5; filter: grayscale(.7); }
.qc-emoji.qc-locked:hover { transform: none; border-color: rgba(245,208,32,.4); }
.qc-emoji.qc-locked .qc-lock { position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; background: rgba(0,0,0,.4); border-radius: inherit; }

/* ── SEO · sección "Sobre Giley" (pie indexable de la home) ── */
.seo-footer { width: 100%; max-width: 640px; margin: 36px auto 8px; padding: 24px 20px; flex: 0 0 auto; }
.seo-h1 { font-family: 'Sora', sans-serif; font-size: 1.3rem; font-weight: 800; color: #f5d020; line-height: 1.3; margin: 0 0 12px; text-align: center; }
.seo-lead { font-size: 14px; line-height: 1.6; color: #d2cfca; margin: 0 0 18px; text-align: center; }
.seo-footer h2 { font-family: 'Sora', sans-serif; font-size: 1.02rem; font-weight: 700; color: #fff; margin: 18px 0 6px; }
.seo-footer p { font-size: 13.5px; line-height: 1.65; color: #aeaba6; margin: 0 0 10px; }
.seo-footer strong { color: #f5d020; }
.seo-footer em { color: #e7c14d; font-style: normal; }
.seo-links { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; margin: 20px 0 8px; }
.seo-links a { color: #8a8a93; font-size: 12.5px; text-decoration: none; }
.seo-links a:hover { color: #f5d020; text-decoration: underline; }
.seo-copy { text-align: center; font-size: 11.5px; color: #6a6a72; margin: 8px 0 0; }
.qc-sheet .qc-emoji { width: 56px; height: 56px; }     /* ≥44px táctil */

/* Bocadillo de EMOJI: solo el emoji flotando (sin globo blanco ni cola) */
.speech-bubble.bubble-emoji { background: transparent; box-shadow: none; padding: 0; border-radius: 0; }
.speech-bubble.bubble-emoji::after { display: none; }
.speech-bubble.bubble-emoji img { width: 54px; height: 54px; object-fit: contain; display: block; filter: drop-shadow(0 4px 8px rgba(0,0,0,.55)); }

/* Icono de RANGO junto al nombre del jugador en la mesa */
.seat-rank { width: 20px; height: 20px; object-fit: contain; vertical-align: -5px; margin-right: 4px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }

/* Avatares-IMAGEN premium (sprites chibi). Encuadre por la cabeza (arriba). */
.avatar-premium-img { object-fit: cover; object-position: top center; }
.perfil-avatar-img { width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: 10px; display: block; }

/* ── Avatar PREMIUM como FIGURA con RELIEVE (sale del cajón, "sentado a la mesa")
   en vez de recortado en el círculo. Drop-shadow = volumen 3D; elipse = suelo. ── */
.seat-avatar:has(.avatar-figura) {
  background: transparent !important; border: none !important; box-shadow: none !important; overflow: visible !important;
}
.avatar-figura {
  position: relative; z-index: 2;
  width: 88px; height: 88px; max-width: none;
  object-fit: contain; object-position: bottom center;
  transform: translateY(-20px);                    /* sobresale por encima del cajón */
  filter: drop-shadow(0 8px 6px rgba(0,0,0,.55)) drop-shadow(0 2px 1px rgba(0,0,0,.45));
  pointer-events: none;
}
.seat-avatar:has(.avatar-figura)::after {          /* sombra de apoyo (suelo) */
  content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 40px; height: 10px; border-radius: 50%; z-index: 1;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.55), transparent 72%);
}
/* Turno activo: halo VERDE sobre la figura (inconfundible; el oro es solo estatus). */
.seat-player.turno-activo .avatar-figura {
  filter: drop-shadow(0 8px 6px rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(54,208,122,1));
}
@media (orientation: portrait) and (max-width: 820px) {
  .avatar-figura { width: 58px; height: 58px; transform: translateY(-12px); }
  .seat-avatar:has(.avatar-figura)::after { width: 28px; height: 7px; }
}

/* ════════════════════════════════════════════════════════════════
   TRIPLE-A · Mesa inmersiva (solo visual, NO toca la lógica del juego)
   ════════════════════════════════════════════════════════════════ */
/* 1) FONDO: foco de luz apuntando al centro + viñeta hacia los bordes (spotlight). */
.mesa6-wrapper {
  background:
    radial-gradient(ellipse 95% 75% at 50% 40%, #23232f 0%, #14141c 40%, #0a0a0e 72%, #060608 100%) !important;
}

/* 2) VOLUMEN de la mesa: relieve acolchado (inset) + sombra gruesa exterior. */
.mesa6-felt {
  box-shadow:
    inset 0 2px 5px rgba(255,255,255,.10),     /* brillo del borde (cuero) */
    inset 0 0 75px rgba(0,0,0,.55),            /* hundido central */
    inset 0 -10px 26px rgba(0,0,0,.5),         /* sombra inferior interna */
    0 26px 64px rgba(0,0,0,.72),               /* separación del fondo */
    0 1px 0 rgba(255,255,255,.05) !important;
}

/* 3) PODS de jugador: cristal elegante (semi-transparente + blur). */
/* Cajón enemigo CASI transparente → no tapa la mesa (texto con sombra para leerse).
   Sin backdrop-filter: el blur es caro en móvil gama baja y aquí no aporta (es translúcido). */
.seat-box {
  border-radius: 12px !important;
  background: rgba(8,12,22,.34) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.35) !important;
}
.seat-name, .seat-stack { text-shadow: 0 1px 3px rgba(0,0,0,.92); }
.seat-accion, .seat-ret { border-radius: 0 0 11px 11px; }

/* 4) TURNO: fuera la etiqueta estática → borde animado que brilla (glowing edge). */
.seat-turn-badge { display: none !important; }
.seat-player.turno-activo .seat-box {
  border-color: #36d07a !important;
  animation: turnoGlow 1.3s ease-in-out infinite;
}
.seat-player.turno-activo .seat-avatar { animation: turnoGlow 1.5s ease-in-out infinite; }
/* TURNO = VERDE inconfundible (distinto del oro de estatus VIP/admin → no se confunde con "es tu turno"). */
@keyframes turnoGlow {
  0%, 100% { box-shadow: 0 0 0 2px #36d07a, 0 0 12px rgba(54,208,122,.55), 0 8px 22px rgba(0,0,0,.5); }
  50%      { box-shadow: 0 0 0 4px #36d07a, 0 0 28px rgba(54,208,122,.95), 0 8px 22px rgba(0,0,0,.5); }
}

/* ── ANILLO DE CUENTA ATRÁS del turno (verde→oro→rojo según se agota) ── */
.seat-avatar { position: relative; }
.turno-anillo { position: absolute; inset: -9px; pointer-events: none; z-index: 7; }
.turno-anillo svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; filter: drop-shadow(0 0 4px rgba(0,0,0,.6)); }
.turno-anillo .ta-bg { fill: none; stroke: rgba(0,0,0,.5); stroke-width: 6; }
.turno-anillo .ta-fg { fill: none; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 289; stroke-dashoffset: 0;
  animation-name: taDeplete; animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes taDeplete {
  0%   { stroke-dashoffset: 0;   stroke: #4ade80; }
  55%  { stroke: #e7c14d; }
  80%  { stroke: #e7c14d; }
  100% { stroke-dashoffset: 289; stroke: #ef4444; }
}
/* Barra de tiempo del HÉROE en el HUD (su propio turno). */
.turno-barra-hero { width: 100%; height: 4px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; margin-bottom: 4px; }
.turno-barra-hero .tbh-fill { display: block; height: 100%; width: 100%; transform-origin: left center;
  background: linear-gradient(90deg, #4ade80, #e7c14d 60%, #ef4444);
  animation-name: tbhDeplete; animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes tbhDeplete { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* 5) CARTAS físicas: drop-shadow sutil (naipes sobre la mesa, no imágenes planas). */
.carta { filter: drop-shadow(0 5px 7px rgba(0,0,0,.5)); }

/* ── REPARTO: carta que vuela del mazo al pod (GPU: transform + opacity) ── */
.carta-reparto {
  position: fixed; z-index: 60; width: 26px; height: 37px;
  border-radius: 3px; background-size: cover; background-position: center;
  box-shadow: 0 5px 9px rgba(0,0,0,.55);
  transform: translate(-50%, -50%) scale(.5); opacity: 0;
  pointer-events: none; will-change: transform, opacity;
  animation: cartaReparto .3s cubic-bezier(.4,.55,.3,1) forwards;
}
@keyframes cartaReparto {
  0%   { transform: translate(-50%,-50%) translate(0,0) scale(.45) rotate(-10deg); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translate(-50%,-50%) translate(var(--dx,0), var(--dy,0)) scale(1) rotate(5deg); opacity: 1; }
}

/* ── MUCK: dorso que se desliza del pod al centro y se desvanece (al retirarse) ── */
.carta-muck {
  position: fixed; z-index: 55; width: 24px; height: 34px;
  border-radius: 3px; background-size: cover; background-position: center;
  box-shadow: 0 4px 8px rgba(0,0,0,.5);
  transform: translate(-50%, -50%); opacity: 1;
  pointer-events: none; will-change: transform, opacity;
  animation: cartaMuck .45s ease-in forwards;
}
@keyframes cartaMuck {
  0%   { transform: translate(-50%,-50%) translate(0,0) scale(1) rotate(0deg); opacity: 1; }
  70%  { opacity: .9; }
  100% { transform: translate(-50%,-50%) translate(var(--dx,0), var(--dy,0)) scale(.55) rotate(-14deg); opacity: 0; }
}
.throw-item {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid #3a3a3a; background: #1a1a1a;
  font-size: 1.35rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0; line-height: 1; transition: transform .12s, border-color .12s;
}
.throw-item:hover { transform: scale(1.14); border-color: var(--primary); }
.throw-item small { font-size: 8px; color: var(--primary); font-weight: 800; margin-top: 1px; }
.throw-item-img { width: 26px; height: 26px; object-fit: contain; }
.throw-flying { position: fixed; left: 0; top: 0; z-index: 250; font-size: 2rem; pointer-events: none; will-change: transform; }
.throw-splat {
  position: fixed; z-index: 249; width: 64px; height: 64px; border-radius: 50%; pointer-events: none;
  transform: translate(-50%, -50%); animation: splatFade 2s ease forwards;
}
@keyframes splatFade {
  0%   { transform: translate(-50%,-50%) scale(.25); opacity: 0; }
  15%  { transform: translate(-50%,-50%) scale(1.4); opacity: .95; }
  100% { transform: translate(-50%,-50%) scale(1.15); opacity: 0; }
}

/* ── Instalar App (PWA / A2HS) ── */
.install-icon { border-radius: 22px; margin: 6px auto 12px; box-shadow: 0 6px 20px rgba(0,0,0,.5); }
.install-title { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.3rem; margin: 0 0 8px; }
.install-sub { color: var(--on-surface-variant); font-size: 13px; line-height: 1.5; margin: 0 0 18px; }
.install-ios { background: var(--surface-container-low); border: 1px solid var(--outline-variant); border-radius: 12px; padding: 14px; }
.install-ios p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--on-surface); }
.install-ios .ios-share { color: var(--primary); vertical-align: -4px; }

/* ── Cerrar sesión: botón fijo abajo-derecha (minimalista, no tapa el juego) ── */
.btn-logout-fijo {
  /* Móvil: por encima del tab-bar, esquina derecha (el FAB del Concierge está oculto). */
  position: fixed; bottom: calc(86px + env(safe-area-inset-bottom)); right: 16px; z-index: 60;
  width: 42px; height: 42px; border-radius: 9999px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.12); color: #e9e9ec;
  transition: background .15s, transform .1s;
}
.btn-logout-fijo:hover { background: rgba(0,0,0,0.72); }
.btn-logout-fijo:active { transform: scale(.92); }
.btn-logout-fijo .material-symbols-outlined { font-size: 20px; }
@media (min-width: 768px) { .btn-logout-fijo { width: 46px; height: 46px; bottom: 20px; right: 20px; } }

/* ── Soundboard (Pack de Voces) ── */
/* Invitar amigos: pill flotante llamativa (shimmer dorado) sobre la tab bar. */
.btn-invitar { position: fixed; bottom: calc(84px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 46; padding: 11px 20px; border: none; border-radius: 9999px; cursor: pointer; font-weight: 800; font-size: 14px; color: #1a1400; white-space: nowrap; overflow: hidden; background: linear-gradient(110deg, #c79200 0%, #f5d020 50%, #c79200 100%); background-size: 220% 100%; animation: gpShimmer 2.6s linear infinite; box-shadow: 0 6px 20px rgba(212,175,55,.45); }
.btn-invitar:active { transform: translateX(-50%) scale(.95); }

.btn-soundboard { position: fixed; bottom: calc(16px + env(safe-area-inset-bottom)); left: 16px; z-index: 50; width: 42px; height: 42px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(212,175,55,.35); color: var(--primary); cursor: pointer; transition: transform .1s; }
.btn-soundboard:active { transform: scale(.92); }
.btn-soundboard .material-symbols-outlined { font-size: 22px; }
.soundboard-panel { position: fixed; bottom: 66px; left: 16px; z-index: 51; display: flex; flex-wrap: wrap; gap: 6px; max-width: 240px; padding: 10px; background: rgba(20,20,24,.97); border: 1px solid var(--outline-variant); border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.55); }
.soundboard-chip { background: #1a1a1a; border: 1px solid #3a3a3a; color: var(--on-surface); border-radius: 9999px; padding: 7px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.soundboard-chip:hover { border-color: var(--primary); color: var(--primary); }
.expresion-burbuja { position: fixed; z-index: 250; background: var(--primary); color: #1a1400; font-weight: 800; font-size: 13px; padding: 6px 12px; border-radius: 9999px; pointer-events: none; white-space: nowrap; animation: expBurbuja 2s ease forwards; }
@keyframes expBurbuja { 0% { opacity: 0; transform: translate(-50%,-100%) scale(.8); } 15% { opacity: 1; transform: translate(-50%,-130%) scale(1); } 100% { opacity: 0; transform: translate(-50%,-175%) scale(1); } }

/* Banner/hero superior del lobby: oculto en MÓVIL para ir directo a la acción (las mesas).
   Visible en tablet/escritorio. */
@media (max-width: 767px) { .practica-hero { display: none !important; } }

/* ── Lobby: cabecera de bienvenida (foto + saludo) ── */
.lobby-bienvenida { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(120deg, #1d1407, #0e0e10); border: 1px solid rgba(212,175,55,.28); margin-bottom: 14px; box-shadow: 0 0 22px rgba(212,175,55,.08); }
.lb-avatar { width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(135deg, #d4af37, #a9760c); color: #1a1400; font-weight: 800; font-size: 1.25rem; display: flex; align-items: center; justify-content: center; overflow: hidden; flex: 0 0 auto; box-shadow: 0 0 0 2px rgba(212,175,55,.5); }
.lb-avatar img { width: 100%; height: 100%; object-fit: cover; }
.lb-texto { flex: 1; min-width: 0; }
.lb-saludo { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.18rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-saludo b { color: var(--primary); }
.lb-sub { font-size: 12px; color: var(--on-surface-variant); margin-top: 2px; }
.lb-editar { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--outline-variant); background: var(--surface-container-low); color: var(--on-surface-variant); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lb-editar:hover { color: var(--primary); border-color: var(--primary); }
.lb-editar .material-symbols-outlined { font-size: 18px; }

/* ── Lobby: cabecera con Pase anclado + Hucha ── */
/* ── Giley Pass premium (ancho completo, primer elemento bajo el saldo) ── */
.lobby-top { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.lobby-pase-banner { width: 100%; display: flex; flex-direction: column; gap: 9px; padding: 16px 18px; border-radius: 18px;
  border: 1px solid rgba(212,175,55,.45); cursor: pointer; text-align: left; transition: filter .15s, transform .1s; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #2a2008 0%, #1a1408 42%, #0e0e10 100%);
  box-shadow: 0 8px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(245,208,32,.15); }
.lobby-pase-banner::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 0% 0%, rgba(245,208,32,.14), transparent 55%); }
.lobby-pase-banner:hover { filter: brightness(1.06); }
.lobby-pase-banner > * { position: relative; z-index: 1; }
.lpb-top { display: flex; align-items: center; gap: 8px; }
.lpb-icon { color: var(--primary); font-size: 26px; filter: drop-shadow(0 0 6px rgba(245,208,32,.5)); }
.lpb-titulo { font-weight: 800; font-size: 16px; background: linear-gradient(90deg,#ffe98a,#f5d020,#d49a2a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lpb-nivel { background: rgba(245,208,32,.18); border: 1px solid rgba(245,208,32,.45); color: #f5d020; font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 9999px; }
.lpb-temporada { margin-left: auto; font-size: 11px; font-weight: 700; color: #ff9d5c; white-space: nowrap; }
.lpb-xpbar { height: 11px; background: rgba(255,255,255,.07); border-radius: 9999px; overflow: hidden; border: 1px solid rgba(0,0,0,.35); }
.lpb-xpfill { height: 100%; width: 0; border-radius: 9999px; transition: width .6s ease;
  background: linear-gradient(90deg,#caa015,#f5d020,#ffe98a,#f5d020,#caa015); background-size: 200% 100%;
  box-shadow: 0 0 12px rgba(245,208,32,.6); animation: lpbGlow 2.4s linear infinite; }
@keyframes lpbGlow { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }
.lpb-bottom { display: flex; align-items: center; gap: 10px; }
.lpb-premios { display: flex; align-items: center; gap: 6px; }
/* Iconos de recompensa del pase = mini-"ítems" de juego AAA (imagen que respira + candado). */
.lpb-premio {
  width: 36px; height: 36px; padding: 5px; position: relative; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
  border-radius: 10px; background: rgba(0,0,0,.45); border: 1px solid rgba(245,208,32,.35);
}
.lpb-premio img, .lpb-premio .gpr-img, .lpb-premio .gpr-avatar { width: 100%; height: 100%; object-fit: contain; }
.lpb-premio .gpr-avatar { border-radius: 6px; object-fit: cover; object-position: top center; }
.lpb-premio .gpr-swatch { width: 100%; height: 100%; border-radius: 6px; font-size: 15px; }
.lpb-premio .gpr-coin, .lpb-premio .gpr-emoji { font-size: 18px; }
.lpb-lock {   /* candado en círculo oscuro, esquina, con contraste */
  position: absolute; bottom: -5px; right: -5px; width: 16px; height: 16px; border-radius: 50%;
  background: #14141a; display: grid; place-items: center; font-size: 8px; font-style: normal;
  border: 1px solid rgba(245,208,32,.35); box-shadow: 0 1px 3px rgba(0,0,0,.7);
}
.lpb-premio-mas { font-size: 10px; color: var(--on-surface-variant); align-self: center; }
/* Tooltip elegante (recompensas del pase). */
.gp-tip {
  position: fixed; z-index: 9999; transform: translate(-50%, -100%); pointer-events: none; white-space: nowrap;
  background: rgba(8,8,10,.97); color: #f5d020; font-size: 12px; font-weight: 700;
  padding: 6px 11px; border-radius: 9px; border: 1px solid rgba(245,208,32,.4);
  box-shadow: 0 6px 18px rgba(0,0,0,.6); animation: gpTipIn .12s ease;
}
.gp-tip::after { content: ''; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: rgba(8,8,10,.97); border-bottom: 0; }
@keyframes gpTipIn { from { opacity: 0; transform: translate(-50%, -88%); } to { opacity: 1; transform: translate(-50%, -100%); } }

/* ── Modal FONDOS INSUFICIENTES (embudo de compra) ── */
.fondos-box {
  background: linear-gradient(160deg, #1c1c24, #121218); border: 1px solid rgba(245,208,32,.3);
  border-radius: 20px; padding: 28px 24px 20px; max-width: 340px; width: 90%; text-align: center;
  box-shadow: 0 24px 70px rgba(0,0,0,.7), 0 0 30px rgba(245,208,32,.12);
}
.fondos-emoji { font-size: 3rem; filter: drop-shadow(0 4px 10px rgba(245,208,32,.4)); animation: fondosPop .35s cubic-bezier(.18,1.4,.4,1); }
@keyframes fondosPop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.fondos-titulo { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.25rem; color: #fff; margin: 8px 0 6px; }
.fondos-msg { font-size: 13px; color: #c7c4c0; line-height: 1.5; margin-bottom: 18px; }
.fondos-msg b { color: #f5d020; }
.fondos-cta {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(135deg, #f5d020, #c79200); color: #1a1407; font-weight: 800; font-size: 16px;
  border: none; border-radius: 14px; padding: 14px; cursor: pointer;
  box-shadow: 0 6px 18px rgba(242,202,80,.45); animation: ctaGlow 1.8s ease-in-out infinite;
}
@keyframes ctaGlow { 0%,100% { box-shadow: 0 6px 18px rgba(242,202,80,.4); } 50% { box-shadow: 0 6px 26px rgba(242,202,80,.7); } }
.fondos-cta:active { transform: translateY(2px); }
.fondos-cancelar { width: 100%; background: none; border: none; color: #8a8a93; font-size: 13px; padding: 12px 0 2px; cursor: pointer; }
.fondos-cancelar:hover { color: #c7c4c0; }

/* ── Onboarding cuenta nueva: elegir apodo ── */
.apodo-box {
  background: linear-gradient(160deg, #1c1c24, #121218); border: 1px solid rgba(245,208,32,.3);
  border-radius: 20px; padding: 30px 24px 24px; max-width: 360px; width: 90%; text-align: center;
  box-shadow: 0 24px 70px rgba(0,0,0,.7);
}
.apodo-emoji { font-size: 2.6rem; }
.apodo-titulo { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.3rem; color: #fff; margin: 6px 0 4px; }
.apodo-sub { font-size: 12.5px; color: #b9b6b2; line-height: 1.45; margin-bottom: 16px; }
.apodo-input {
  width: 100%; background: rgba(0,0,0,.4) !important; border: 1.5px solid #3a3a44; border-radius: 12px;
  color: #fff !important; font-size: 18px; font-weight: 700; text-align: center; padding: 13px; outline: none; transition: border-color .15s;
}
.apodo-input::placeholder { color: #6a6a72; }
.apodo-input:focus { border-color: var(--primary) !important; }
.apodo-feedback { font-size: 12px; min-height: 16px; margin: 8px 0 12px; font-weight: 600; color: #b9b6b2; }
.apodo-feedback.ok { color: #4ade80; }
.apodo-feedback.err { color: #ff6b6b; }
.apodo-cta {
  width: 100%; background: linear-gradient(135deg, #f5d020, #c79200); color: #1a1407; font-weight: 800; font-size: 16px;
  border: none; border-radius: 14px; padding: 14px; cursor: pointer; box-shadow: 0 6px 18px rgba(242,202,80,.4);
}
.apodo-cta:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.apodo-cta:not(:disabled):active { transform: translateY(2px); }

/* ── AdminController (mesas VIP, solo el dueño): peticiones de asiento en vivo ── */
.admin-controller {
  position: absolute; top: 64px; left: 8px; z-index: 140; width: 234px; max-height: 52vh; overflow-y: auto;
  background: linear-gradient(160deg, rgba(28,28,36,.97), rgba(16,16,22,.97)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(245,208,32,.45); border-radius: 14px; padding: 10px; box-shadow: 0 12px 34px rgba(0,0,0,.6);
}
.ac-head { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 12.5px; color: #f5d020; margin-bottom: 6px; }
.ac-head .material-symbols-outlined { font-size: 18px; }
.ac-count { margin-left: auto; background: #f5d020; color: #1a1407; border-radius: 9999px; min-width: 18px; height: 18px; display: grid; place-items: center; font-size: 11px; padding: 0 5px; }
.ac-row { display: flex; align-items: center; gap: 5px; padding: 6px 0; border-top: 1px solid rgba(255,255,255,.08); }
.ac-nom { flex: 1 1 auto; font-size: 12px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-stack { width: 60px; background: rgba(0,0,0,.45) !important; border: 1px solid #3a3a44; border-radius: 7px; color: #fff !important; font-size: 12px; padding: 5px 3px; text-align: center; }
.ac-ok, .ac-no { width: 26px; height: 26px; border: none; border-radius: 7px; font-weight: 800; cursor: pointer; font-size: 13px; flex-shrink: 0; }
.ac-ok { background: #1f8f4e; color: #fff; } .ac-no { background: #b0354a; color: #fff; }
.ac-ok:active, .ac-no:active { transform: translateY(1px); }
.ac-empty { font-size: 11.5px; color: #9a9aa2; padding: 6px 2px; }
.ac-foot { font-size: 10.5px; color: #b9b6b2; margin-top: 7px; text-align: center; }
@media (max-width: 640px) { .admin-controller { width: 198px; top: 56px; -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ── Moneda dual VIP: pila de billetes/monedas bajo el bote (40€ = 2×20€) ── */
.bote-piezas { display: flex; justify-content: center; align-items: flex-end; gap: 3px; margin-top: 4px; min-height: 24px; }
.vip-pieza { position: relative; display: inline-flex; align-items: flex-end; }
.vip-pieza img { height: 26px; width: auto; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.vip-pieza.billete img { height: 18px; border-radius: 2px; }
.vip-pieza b { position: absolute; bottom: -3px; right: -7px; font-size: 9px; font-weight: 800; color: #fff; background: rgba(0,0,0,.82); border-radius: 6px; padding: 0 3px; }

.lpb-cta { margin-left: auto; background: linear-gradient(135deg,#f5d020,#caa015); color: #1a1407; font-weight: 800;
  font-size: 12px; padding: 9px 15px; border-radius: 9999px; white-space: nowrap; box-shadow: 0 3px 14px rgba(245,208,32,.4); }
.lobby-piggy { width: 124px; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 10px; border-radius: 16px; border: 1px solid rgba(212,175,55,.25); background: #0e0e10; cursor: pointer; transition: filter .15s; align-self: flex-start; }
.lobby-piggy:hover { filter: brightness(1.1); }
.lobby-piggy-img { width: 50px; height: 50px; object-fit: contain; }
.lobby-piggy-amt { font-family: 'Sora', sans-serif; font-weight: 800; color: var(--primary); font-size: 15px; }
.lobby-piggy-lbl { font-size: 9px; color: var(--on-surface-variant); text-transform: uppercase; letter-spacing: .05em; }
@media (max-width: 520px) { .lpb-cta { font-size: 11px; padding: 8px 12px; } .lpb-premio-mas { display: none; } .lpb-titulo { font-size: 15px; } }

/* ── Tab bar inferior (navegación) ── */
.tabbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 45; display: flex;
  background: rgba(14,14,16,.96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid var(--outline-variant); padding-bottom: env(safe-area-inset-bottom); }
.tabbar-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 4px 8px;
  background: none; border: none; cursor: pointer; color: var(--on-surface-variant); font-size: 10px; font-weight: 600; transition: color .12s; }
.tabbar-btn .material-symbols-outlined { font-size: 24px; }
.tabbar-btn.active { color: var(--primary); }
.tabbar-btn.active .material-symbols-outlined { filter: drop-shadow(0 0 8px rgba(212,175,55,.5)); }
body.con-tabbar #pantalla-lobby { padding-bottom: 76px; }

/* ── Perfil ── */
/* ════════ PERFIL · Pasaporte social Giley Dark Premium ════════ */
.perfil-box {
  width: 100%; max-width: 440px; max-height: 92vh;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #15140f 0%, #0e0e0e 42%);
  border: 1px solid #4d4635; border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,.7), 0 0 60px rgba(242,202,80,.08), inset 0 1px 0 rgba(255,255,255,.05);
  overflow: hidden; animation: fadeIn .35s ease-out;
}

/* Hero */
.perfil-hero {
  position: relative; text-align: center;
  padding: 26px 18px 18px;
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(242,202,80,.18) 0%, transparent 58%),
    linear-gradient(180deg, rgba(212,175,55,.08), transparent);
  border-bottom: 1px solid #2a2620;
}
.perfil-x { position: absolute; top: 14px; right: 14px; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; cursor: pointer; border: 1px solid #2a2620; border-radius: 10px; background: rgba(255,255,255,.04); color: #d0c5af; transition: background .2s, color .2s; }
.perfil-x:hover { background: rgba(255,255,255,.1); color: #e5e2e1; }

/* Avatar grande con marco de estatus */
.perfil-avatar-marco {
  width: 104px; height: 104px; margin: 0 auto 12px; padding: 4px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #c79200, #f2ca50, #fff3c4, #f2ca50, #c79200);
  box-shadow: 0 0 26px rgba(242,202,80,.4), inset 0 0 0 1px rgba(0,0,0,.3);
  animation: perfilHalo 6s linear infinite;
}
@keyframes perfilHalo { to { transform: rotate(360deg); } }
.perfil-avatar {
  width: 100%; height: 100%; border-radius: 50%;
  background: linear-gradient(135deg, #2a2110, #14110a);
  color: #f2ca50; font-family: 'Sora', sans-serif; font-weight: 800; font-size: 2rem;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.perfil-nombre { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.45rem; color: #e5e2e1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.perfil-tier { margin-top: 6px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.perfil-gold { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 800; color: #1a1400; background: linear-gradient(90deg, #f2ca50, #c79200); padding: 2px 9px; border-radius: 9999px; }
.perfil-gold .material-symbols-outlined { font-size: 13px; }

.perfil-hero-meta { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 14px 0 12px; }
.perfil-fichas { display: inline-flex; align-items: center; gap: 6px; font-family: 'Sora', sans-serif; font-weight: 800; color: #f2ca50; font-size: 1.05rem; background: rgba(0,0,0,.4); border: 1px solid #4d4635; padding: 6px 14px; border-radius: 9999px; }
.perfil-fichas .material-symbols-outlined { font-size: 18px; font-variation-settings: 'FILL' 1; }
.perfil-nivel-chip { font-size: 12px; font-weight: 700; color: #d0c5af; background: rgba(0,0,0,.4); border: 1px solid #2a2620; padding: 7px 14px; border-radius: 9999px; }
.perfil-nivel-chip b { color: #f2ca50; }

.perfil-nivel { max-width: 320px; margin: 0 auto; }
.perfil-nivel-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; }
.perfil-nivel-lbl { color: #d0c5af; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.perfil-xp { color: #f2ca50; font-size: 11px; font-weight: 600; }
.perfil-xpbar { height: 9px; background: #1a1813; border: 1px solid #2a2620; border-radius: 9999px; margin-top: 6px; overflow: hidden; }
.perfil-xpfill { height: 100%; width: 0; background: linear-gradient(90deg, #c79200, #f2ca50); border-radius: 9999px; transition: width .5s; box-shadow: 0 0 12px rgba(242,202,80,.6); }

.perfil-scroll { overflow-y: auto; padding: 16px 18px 20px; -webkit-overflow-scrolling: touch; }

/* Stats */
.perfil-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 14px; }  /* 2x2 (antes 4x1 apretado) */
.perfil-stat { background: linear-gradient(170deg, #1a1813, #111); border: 1px solid #2a2620; border-radius: 12px; padding: 12px 4px 9px; text-align: center; }
.ps-icon { font-size: 18px; color: #8a8170; }
.ps-val { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.1rem; color: #f2ca50; margin-top: 2px; }
.ps-lbl { font-size: 9px; color: #d0c5af; text-transform: uppercase; letter-spacing: .03em; margin-top: 2px; }

/* Referidos */
.perfil-referidos { background: rgba(242,202,80,.1); border: 1px solid rgba(242,202,80,.3); border-radius: 12px; padding: 11px 14px; font-size: 13px; color: #e5e2e1; text-align: center; margin-bottom: 4px; }
.perfil-referidos b { color: #f2ca50; }

/* Secciones */
.perfil-seccion-tit { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #e5e2e1; letter-spacing: .03em; margin: 16px 0 8px; }
.perfil-seccion-tit .material-symbols-outlined { font-size: 16px; color: #f2ca50; }
.perfil-seccion-hint { font-weight: 400; color: #8a8170; font-size: 11px; }

/* Cambiar nombre */
.perfil-nombre-edit { display: flex; gap: 8px; }
.perfil-nombre-edit input { flex: 1; padding: 11px 13px; border-radius: 11px; background: rgba(0,0,0,.4); border: 1px solid #4d4635; color: #e5e2e1; transition: border-color .2s, box-shadow .2s; }
.perfil-nombre-edit input:focus { outline: none; border-color: #f2ca50; box-shadow: 0 0 0 3px rgba(242,202,80,.15); }
.perfil-btn-oro { padding: 0 18px; border: none; border-radius: 11px; cursor: pointer; font-family: 'Sora', sans-serif; font-weight: 800; color: #1a1400; background: linear-gradient(160deg, #f2ca50, #c79200); box-shadow: 0 4px 12px rgba(242,202,80,.35); transition: filter .15s, transform .12s; }
.perfil-btn-oro:hover { filter: brightness(1.07); transform: translateY(-1px); }
.perfil-btn-oro:disabled { opacity: .5; cursor: wait; }
.perfil-nombre-aviso { font-size: 11px; color: #d0c5af; margin-top: 6px; min-height: 14px; }

/* Subir foto */
.perfil-subir-foto { width: 100%; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; cursor: pointer; border-radius: 12px; border: 1px dashed #4d4635; background: rgba(255,255,255,.03); color: #e5e2e1; font-weight: 600; font-size: 0.9rem; transition: background .2s, border-color .2s; }
.perfil-subir-foto .material-symbols-outlined { font-size: 18px; color: #f2ca50; }
.perfil-subir-foto:hover { background: rgba(255,255,255,.06); border-color: #f2ca50; }

/* Grid de avatares */
.perfil-avatares { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.perfil-avatar-item { position: relative; aspect-ratio: 1; border-radius: 14px; border: 1px solid #2a2620; background: linear-gradient(170deg, #1a1813, #111); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; cursor: pointer; transition: transform .12s, border-color .12s, box-shadow .12s; }
.perfil-avatar-item:hover { transform: scale(1.06); border-color: #4d4635; }
.perfil-avatar-item.equipado { border-color: #f2ca50; box-shadow: 0 0 0 2px rgba(242,202,80,.5), 0 0 14px rgba(242,202,80,.3); }
.perfil-avatar-item.exclusivo { border-color: #f2ca50; box-shadow: 0 0 16px rgba(242,202,80,.4); animation: avatarGlow 2.2s ease-in-out infinite; }
@keyframes avatarGlow { 0%,100% { box-shadow: 0 0 12px rgba(242,202,80,.3); } 50% { box-shadow: 0 0 20px rgba(242,202,80,.6); } }
.perfil-avatar-item.bloqueado { opacity: .5; filter: grayscale(.4); }
.perfil-avatar-precio { position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); font-size: 8.5px; font-weight: 800; color: #1a1400; background: linear-gradient(90deg, #f2ca50, #c79200); padding: 1px 6px; border-radius: 9999px; white-space: nowrap; }
.perfil-avatar-lock { position: absolute; top: 3px; right: 4px; font-size: 11px; opacity: .9; }

/* Toggle Modo Elegancia */
.perfil-toggle { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding: 13px 15px; border-radius: 14px; background: linear-gradient(170deg, #1a1813, #111); border: 1px solid #2a2620; }
.perfil-toggle > span { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #e5e2e1; }
.perfil-toggle .material-symbols-outlined { color: #f2ca50; font-size: 19px; }

/* Acciones */
.perfil-acciones { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 14px; }
.perfil-accion { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 10px; cursor: pointer; border-radius: 13px; border: 1px solid #4d4635; background: rgba(255,255,255,.04); color: #e5e2e1; font-weight: 600; font-size: 0.92rem; transition: background .2s, border-color .2s, transform .12s; }
.perfil-accion .material-symbols-outlined { font-size: 19px; color: #f2ca50; }
.perfil-accion:hover { background: rgba(255,255,255,.08); border-color: #f2ca50; transform: translateY(-1px); }
.seat-avatar-emoji { font-size: 1.4em; line-height: 1; }
/* Foto de avatar subida (rellena el círculo). */
.perfil-avatar, .seat-avatar { overflow: hidden; }
.perfil-avatar-foto, .seat-avatar-foto { width: 100%; height: 100%; object-fit: cover; display: block; }
.perfil-avatar:has(.perfil-avatar-foto) { background: none; }
/* Marcos de ESTATUS por rango (oro/diamante) en el avatar. */
.seat-avatar.marco-Plata, .perfil-avatar.marco-Plata { box-shadow: 0 0 0 2px #d8d8d8; }
.seat-avatar.marco-Oro, .perfil-avatar.marco-Oro { box-shadow: 0 0 0 2px #ffd700, 0 0 10px rgba(255,215,0,.55); }
.seat-avatar.marco-Diamante, .perfil-avatar.marco-Diamante { box-shadow: 0 0 0 2px #5ff0ff, 0 0 13px rgba(0,229,255,.6); }
/* Spinner premium (dark-mode). */
.spinner-mini { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(212,175,55,.3); border-top-color: var(--primary); border-radius: 50%; animation: spinGiley .7s linear infinite; vertical-align: -2px; }
@keyframes spinGiley { to { transform: rotate(360deg); } }

/* Selector de foto en el registro inicial. */
.reg-foto-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 12px; }
.reg-foto { width: 74px; height: 74px; border-radius: 50%; border: 2px dashed var(--outline-variant); background: var(--surface-container-low); color: var(--on-surface-variant); display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; padding: 0; transition: border-color .15s; }
.reg-foto:hover { border-color: var(--primary); color: var(--primary); }
.reg-foto.tiene { border-style: solid; border-color: var(--primary); }
.reg-foto img { width: 100%; height: 100%; object-fit: cover; }
.reg-foto .material-symbols-outlined { font-size: 28px; }
.reg-foto-lbl { font-size: 11px; color: var(--on-surface-variant); }

/* ── HUD de mi asiento (héroe): foto + nombre + fichas, encima de TU TURNO ── */
.hero-hud { display: flex; align-items: center; gap: 10px; align-self: center; background: rgba(20,20,24,.85); border: 1px solid var(--outline-variant); border-radius: 9999px; padding: 5px 14px 5px 5px; margin-bottom: 6px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero-hud-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #d4af37, #a9760c); color: #1a1400; font-weight: 800; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; overflow: hidden; flex: 0 0 auto; }
.hero-hud-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hero-hud-info { display: flex; flex-direction: column; line-height: 1.15; }
.hero-hud-nombre { font-weight: 700; font-size: 13px; color: #fff; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-hud-stack { font-weight: 800; font-size: 13px; color: var(--primary); }
.hero-hud-tu { font-size: 9px; font-weight: 800; color: #1a1400; background: var(--primary); border-radius: 9999px; padding: 1px 7px; margin-left: 2px; }
/* Mi HUD cuando estoy AUSENTE: apagado + aviso para volver (toca para reactivar). */
.hero-hud.ausente { opacity: .8; cursor: pointer; }
.hero-hud.ausente .hero-hud-avatar { filter: grayscale(1) brightness(.6); }
.hero-hud-volver { font-size: 9px; font-weight: 800; color: #1a1400; background: #f5d020; border-radius: 9999px; padding: 2px 8px; margin-left: 2px; font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .03em; animation: gpShimmer 2.6s linear infinite; background-size: 220% 100%; background-image: linear-gradient(110deg, #c79200, #f5d020, #c79200); }
/* Marco de estatus también en el avatar del HUD. */
.hero-hud-avatar.marco-Oro { box-shadow: 0 0 0 2px #ffd700, 0 0 8px rgba(255,215,0,.5); }
.hero-hud-avatar.marco-Diamante { box-shadow: 0 0 0 2px #5ff0ff, 0 0 9px rgba(0,229,255,.55); }
.hero-hud-avatar.marco-Plata { box-shadow: 0 0 0 2px #d8d8d8; }
.perfil-referidos { background: linear-gradient(120deg, #1a1408, #0e0e10); border: 1px solid rgba(212,175,55,.3); border-radius: 12px; padding: 10px 12px; font-size: 13px; color: var(--on-surface); margin: 4px 0 10px; text-align: center; }
.perfil-referidos b { color: var(--primary); }
/* Toggle Modo Elegancia */
.perfil-toggle { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; margin-bottom: 12px; border: 1px solid rgba(212,175,55,.3); border-radius: 12px; background: linear-gradient(120deg, #1a1408, #0e0e10); font-weight: 600; font-size: 14px; color: var(--on-surface); }
.switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider { position: absolute; inset: 0; background: #2a2a31; border-radius: 9999px; transition: background .2s; }
.switch-slider::before { content: ''; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: #ccc; border-radius: 50%; transition: transform .2s; }
.switch input:checked + .switch-slider { background: var(--primary); }
.switch input:checked + .switch-slider::before { transform: translateX(20px); background: #1a1400; }

/* ── Modo Elegancia: dorado más cálido + fondo de mesa tipo MANTÓN (filigrana) ── */
html.elegancia { --primary: #e6b54a; }
html.elegancia .mesa6-felt {
  background: var(--mesa-fondo,
    repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 7px, rgba(255,255,255,.02) 7px 14px),
    radial-gradient(ellipse 76% 62% at 50% 42%, #8a5a30 0%, #6e441f 55%, #4e3015 85%, #38230f 100%)) !important;
  background-size: auto !important;
  background-repeat: no-repeat !important;
  border-color: #2a1c0f !important;
}

/* ── Cosméticos ── */
#cosmeticos-grid { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 460px) { #cosmeticos-grid { grid-template-columns: 1fr 1fr; } }
.cosmetico-card { position: relative; border: 1px solid var(--outline-variant); border-radius: 12px; padding: 9px; text-align: center; background: var(--surface-container-low); }
.cosmetico-card.equipado-on { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.cosmetico-preview { height: 58px; border-radius: 8px; margin-bottom: 7px; border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; font-size: 1.7rem; overflow: hidden; }
.cosmetico-prev-img, .carrusel-prev img { height: 100%; width: auto; object-fit: contain; }
.cosmetico-name { font-size: 11.5px; font-weight: 600; color: var(--on-surface); }
.cosmetico-price { font-size: 11px; color: var(--primary); font-weight: 700; }
.cosmetico-btn { margin-top: 7px; width: 100%; padding: 6px; border: none; border-radius: 7px; font-weight: 700; cursor: pointer; font-size: 0.78rem; }
.cosmetico-btn.comprar { background: var(--primary); color: #111; }
.cosmetico-btn.equipar { background: rgba(255,255,255,0.08); color: var(--on-surface); border: 1px solid var(--outline-variant); }
.cosmetico-btn.equipado-lbl { background: rgba(46,160,67,0.18); color: #4ade80; cursor: default; }
.cosmetico-btn:disabled { opacity: .6; cursor: wait; }
.cosmetico-premium { position: absolute; top: 6px; right: 6px; font-size: 9px; background: var(--primary); color: #111; padding: 1px 6px; border-radius: 9999px; font-weight: 700; }

/* Aplicar cosméticos a la mesa: fondo (felt) y filtro del dorso de carta. */
.mesa6-felt { background: var(--mesa-fondo, radial-gradient(circle at center, #1a2a44 0%, #0a0a0b 100%)); }
.dorso-carta-img { filter: var(--dorso-filter, none); }

/* ── HUD de acciones: botones premium (game-feel, Dark-Mode Premium) ── */
.acciones-principales { display: flex; gap: 10px; }
.btn-juego {
  flex: 1; padding: 16px 8px; border: none; border-radius: 14px; cursor: pointer;
  font-weight: 800; font-size: 15px; letter-spacing: .02em; color: #fff; text-transform: uppercase;
  box-shadow: 0 4px 0 rgba(0,0,0,0.38), 0 7px 16px rgba(0,0,0,0.42);
  transition: transform .08s ease, box-shadow .08s ease, filter .12s ease;
}
.btn-juego:hover { filter: brightness(1.07); }
.btn-juego:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,0.38), 0 2px 8px rgba(0,0,0,0.42); }
.btn-juego:disabled { opacity: .45; box-shadow: none; cursor: not-allowed; transform: none; }
/* Borde + resplandor sutil → siguen siendo los elementos más destacados aunque el HUD
   sea translúcido (jerarquía visual). */
/* Código de color claro: Fold = GRIS neutro · Call/Check = AZUL · Raise/Bet = VERDE (abajo). */
.btn-juego-fold  { background: linear-gradient(160deg, #5b5b66, #303036); border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 4px 0 rgba(0,0,0,0.38), 0 7px 16px rgba(0,0,0,0.42); }
.btn-juego-check { background: linear-gradient(160deg, #3b82f6, #1d4ed8); border: 1px solid rgba(150,190,255,.55); color: #fff;
  box-shadow: 0 4px 0 rgba(0,0,0,0.38), 0 7px 16px rgba(0,0,0,0.42), 0 0 14px rgba(59,130,246,.45); }
.btn-juego-bet   { flex: 1.25; background: linear-gradient(160deg, #34d36a, #15803d); border: 1px solid rgba(130,255,170,.55);
  box-shadow: 0 4px 0 rgba(0,0,0,0.38), 0 7px 16px rgba(0,0,0,0.42), 0 0 18px rgba(52,211,106,.5); }

/* ── Ruleta de premios diaria ── */
/* PREMIO DIARIO (Ruleta): la sombra/glow grande del wheel desbordaba el modal y disparaba las scrollbars
   (parpadeo) al girar. Bloqueo de overflow en el contenedor + ocultar scrollbars (failsafe) + aire. */
#modal-ruleta .cajero-box { overflow: hidden; scrollbar-width: none; padding-bottom: 16px; }
#modal-ruleta .cajero-box::-webkit-scrollbar { display: none; }
.ruleta-wrap { position: relative; width: 290px; height: 290px; margin: 18px auto 8px; max-width: 82vw; }
.ruleta-wheel {
  width: 100%; height: 100%; border-radius: 50%; position: relative;
  border: 8px solid var(--primary);
  /* sombra 3D profunda (shadow-2xl) + brillo dorado + sombra interior */
  box-shadow: 0 24px 50px rgba(0,0,0,.65), 0 0 34px rgba(212,175,55,.3), inset 0 0 26px rgba(0,0,0,.6);
  transition: transform 4.4s cubic-bezier(.15,.62,.18,1);
}
.ruleta-pointer {
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent;
  border-top: 24px solid var(--primary); z-index: 6; filter: drop-shadow(0 2px 4px rgba(0,0,0,.7));
}
/* Centro = botón GIRAR (gold cuando activo, gris en cooldown). */
.ruleta-centro {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 78px; height: 78px; border-radius: 50%; border: none; cursor: pointer; z-index: 5;
  background: radial-gradient(circle at 38% 32%, #f7e08a, #e3b94a 55%, #b8860b);
  color: #1a1400; font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1rem; letter-spacing: .03em;
  box-shadow: 0 0 0 5px #0a0a0b, 0 6px 16px rgba(0,0,0,.6); transition: transform .1s, filter .12s;
}
.ruleta-centro:hover:not(:disabled) { filter: brightness(1.07); }
.ruleta-centro:active:not(:disabled) { transform: translate(-50%,-50%) scale(.93); }
.ruleta-centro:not(:disabled) { animation: ruletaPulse 1.6s infinite; }
.ruleta-centro:disabled { background: radial-gradient(circle at 38% 32%, #4a4a52, #2a2a31); color: #8a8a90; cursor: not-allowed; box-shadow: 0 0 0 5px #0a0a0b, 0 4px 10px rgba(0,0,0,.5); }
/* Barra 'tu suerte' (decorativa, estilo Stitch). */
.ruleta-suerte { display: flex; align-items: center; gap: 8px; margin: 10px auto 0; max-width: 300px; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--on-surface-variant); }
.ruleta-suerte b { color: var(--primary); }
.ruleta-suerte-bar { flex: 1; height: 7px; border-radius: 9999px; background: #1c1c22; overflow: hidden; }
.ruleta-suerte-fill { height: 100%; width: 80%; border-radius: 9999px; background: linear-gradient(90deg, #7c3aed, #06b6d4, #34d399); }
.ruleta-label {
  position: absolute; left: 50%; top: 50%; font-weight: 800; font-size: 13px; color: #fff;
  white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.7); pointer-events: none;
}
/* Botón de ruleta del header: pulso dorado cuando hay giro disponible. */
#btn-ruleta-header.ruleta-on { animation: ruletaPulse 1.4s infinite; }
@keyframes ruletaPulse {
  0%   { box-shadow: 0 0 0 0 rgba(212,175,55,.55); }
  70%  { box-shadow: 0 0 0 8px rgba(212,175,55,0); }
  100% { box-shadow: 0 0 0 0 rgba(212,175,55,0); }
}

/* ── Giley Pass (Battle Pass premium · dark-mode · 2 carriles) ── */
/* Contenedor del modal */
.pase-box {
  width: 100%; max-width: 640px; max-height: 92vh;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #15140f 0%, #0e0e0e 40%);
  border: 1px solid #4d4635; border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,.7), 0 0 60px rgba(212,175,55,.08), inset 0 1px 0 rgba(255,255,255,.05);
  overflow: hidden; animation: fadeIn .35s ease-out;
}
.pase-head {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 18px; border-bottom: 1px solid #2a2620;
  background: linear-gradient(180deg, rgba(212,175,55,.10), transparent);
}
.pase-head-title { display: flex; align-items: center; gap: 8px; font-family: 'Sora', Inter, sans-serif; font-weight: 800; font-size: 1.05rem; color: #e5e2e1; }
.pase-head-title .material-symbols-outlined { color: #f2ca50; font-size: 24px; font-variation-settings: 'FILL' 1; }
.pase-misiones {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 7px 13px; border-radius: 9999px; border: 1px solid #4d4635;
  background: rgba(0,0,0,.4); color: #e5e2e1; font-size: 12px; font-weight: 700; transition: background .2s, border-color .2s;
}
.pase-misiones .material-symbols-outlined { font-size: 17px; color: #f2ca50; }
.pase-misiones:hover { background: rgba(255,255,255,.08); border-color: #f2ca50; }
.pase-x { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 auto; cursor: pointer; border: 1px solid #2a2620; border-radius: 10px; background: rgba(255,255,255,.04); color: #d0c5af; transition: background .2s, color .2s; }
.pase-x:hover { background: rgba(255,255,255,.1); color: #e5e2e1; }

.pase-scroll { overflow-y: auto; padding: 16px 18px 8px; -webkit-overflow-scrolling: touch; }

/* Cabecera: tier + XP */
.pase-cabecera { margin-bottom: 14px; }
.pase-tier-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.pase-tier { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.25rem; color: #e5e2e1; }
.pase-tier b { color: #f2ca50; }
.pase-xptxt { font-size: 12px; font-weight: 600; color: #d0c5af; }
.pase-xpbar { height: 10px; background: #1a1813; border: 1px solid #2a2620; border-radius: 9999px; overflow: hidden; }
.pase-xpfill { height: 100%; width: 0; background: linear-gradient(90deg, #c79200, #f2ca50); border-radius: 9999px; transition: width .5s ease; box-shadow: 0 0 12px rgba(242,202,80,.6); }

/* Leyenda de carriles */
.pase-legend { display: flex; gap: 16px; margin-bottom: 10px; font-size: 11px; color: #d0c5af; }
.pase-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.pase-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.pase-legend .dot-free { background: #3a352a; border: 1px solid #4d4635; }
.pase-legend .dot-gold { background: linear-gradient(160deg, #f2ca50, #c79200); }

/* Track horizontal de 50 niveles: por columna → recompensa Free (arriba), nodo, Premium (abajo). */
.pase-track { display: flex; gap: 12px; overflow-x: auto; padding: 6px 2px 12px; -webkit-overflow-scrolling: touch; }
.gp-col { flex: 0 0 auto; width: 94px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.gp-node { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; background: #1a1813; color: #d0c5af; border: 2px solid #4d4635; flex: 0 0 auto; }
.gp-col.gp-actual .gp-node { background: #2a2110; color: #f2ca50; border-color: #f2ca50; animation: gpPulse 1.4s infinite; }
@keyframes gpPulse { 0% { box-shadow: 0 0 0 0 rgba(242,202,80,.6); } 70% { box-shadow: 0 0 0 9px rgba(242,202,80,0); } 100% { box-shadow: 0 0 0 0 rgba(242,202,80,0); } }

.gp-reward { width: 100%; min-height: 84px; border-radius: 14px; padding: 9px 6px; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; position: relative; }
.gp-icon { font-size: 1.6rem; line-height: 1; }
.gp-val { font-size: 11px; font-weight: 700; color: #e5e2e1; }
.gp-free { background: #161410; border: 1px solid #2a2620; }
.gp-gold { background: linear-gradient(160deg, #2a2010, #14110a); border: 1.5px solid #f2ca50; box-shadow: 0 0 14px rgba(212,175,55,.2); }
.gp-gold .gp-val { color: #f2ca50; }
/* Reclamable: brillo */
.gp-reward:has(.gp-claim.on) { box-shadow: 0 0 0 2px rgba(242,202,80,.55), 0 0 18px rgba(242,202,80,.35); animation: gpGlow 1.8s ease-in-out infinite; }
@keyframes gpGlow { 0%,100% { box-shadow: 0 0 0 2px rgba(242,202,80,.45), 0 0 14px rgba(242,202,80,.28); } 50% { box-shadow: 0 0 0 2px rgba(242,202,80,.75), 0 0 22px rgba(242,202,80,.5); } }
/* Reclamado: atenuado con check */
.gp-reward:has(.gp-claim.done) { opacity: .72; }
/* Bloqueado: candado */
.gp-locked { opacity: .45; }
.gp-locked::after { content: 'lock'; font-family: 'Material Symbols Outlined'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; color: #d0c5af; }
.gp-claim { border: none; border-radius: 8px; padding: 5px 8px; font-size: 9.5px; font-weight: 800; cursor: pointer; width: 100%; text-transform: uppercase; letter-spacing: .03em; }
.gp-claim.on { background: linear-gradient(160deg, #f2ca50, #c79200); color: #1a1400; box-shadow: 0 3px 10px rgba(212,175,55,.4); }
.gp-claim.done { background: rgba(46,160,67,0.18); color: #4ade80; cursor: default; }

/* ── Tarjetas de recompensa del Pase (premium: imagen real + nombre + rareza) ── */
.gp-reward { min-height: 116px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 5px; position: relative; overflow: hidden; }
.gp-icon { width: 50px; height: 50px; display: grid; place-items: center; font-size: 1.7rem; }
.gpr-img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 3px 5px rgba(0,0,0,.5)); }
.gpr-avatar { width: 50px; height: 50px; object-fit: cover; object-position: top center; border-radius: 9px; box-shadow: 0 3px 8px rgba(0,0,0,.5); }
.gpr-swatch { width: 44px; height: 44px; border-radius: 9px; display: grid; place-items: center; font-size: 1.3rem; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); overflow: hidden; }
.gpr-swatch img { width: 100%; height: 100%; object-fit: cover; }
.gpr-coin, .gpr-emoji { font-size: 1.8rem; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.gp-name { font-size: 10px; font-weight: 700; color: #e5e2e1; line-height: 1.15; }
.gp-gold .gp-name { color: #f3d98a; }
.gp-exclu { position: absolute; top: 0; left: 0; right: 0; font-size: 7.5px; font-weight: 800; letter-spacing: .07em;
  padding: 2px 0; text-align: center; background: linear-gradient(90deg,#c79200,#f2ca50); color: #1a1400; }
.gp-reward:has(.gp-exclu) { padding-top: 17px; }
.gp-claim.lock { background: rgba(255,255,255,.06); color: #b9b1a0; cursor: default; }
/* Rareza: borde + glow en el track GOLD → impacto visual que da ganas de comprar. */
.gp-gold.rar-legendary { border-color: #ffcf3a; box-shadow: 0 0 20px rgba(255,200,60,.5); }
.gp-gold.rar-legendary .gp-exclu { background: linear-gradient(90deg,#ff9d2e,#ffd84a); }
.gp-gold.rar-epic { border-color: #b06bff; box-shadow: 0 0 15px rgba(160,90,255,.42); }
.gp-gold.rar-epic .gp-exclu { background: linear-gradient(90deg,#7a3ff0,#b06bff); color: #fff; }
.gp-gold.rar-rare { border-color: #4aa3ff; box-shadow: 0 0 13px rgba(60,140,255,.38); }
.gp-gold.rar-rare .gp-exclu { background: linear-gradient(90deg,#2f78f0,#5fb0ff); color: #fff; }
.gp-gold.rar-objeto { border-color: #ff7a59; box-shadow: 0 0 13px rgba(255,120,80,.38); }
.gp-gold.rar-objeto .gp-exclu { background: linear-gradient(90deg,#e0524f,#ff8a5f); color: #fff; }

/* Botón flotante 'Desbloquear Premium' con efecto shimmer dorado. */
.btn-hazte-gold {
  position: sticky; bottom: 0; z-index: 2; width: 100%; margin: 8px 0 0; padding: 14px; border: none;
  border-radius: 14px; cursor: pointer; font-weight: 800; font-size: 14px; color: #1a1400;
  text-transform: uppercase; letter-spacing: .03em; overflow: hidden;
  background: linear-gradient(110deg, #c79200 0%, #f5d020 50%, #c79200 100%); background-size: 220% 100%;
  animation: gpShimmer 2.6s linear infinite; box-shadow: 0 6px 22px rgba(212,175,55,.4);
}
@keyframes gpShimmer { 0% { background-position: 220% 0; } 100% { background-position: -220% 0; } }

/* CTA Gold del Pase: layout enriquecido (icono + texto + precio), margen del modal */
#btn-hazte-gold {
  display: flex; align-items: center; gap: 12px; text-align: left;
  margin: 0 18px 18px; width: auto; padding: 14px 18px;
  text-transform: none; letter-spacing: 0;
}
#btn-hazte-gold.oculto { display: none; }
#btn-hazte-gold .hg-icon { font-size: 28px; font-variation-settings: 'FILL' 1; flex: 0 0 auto; }
#btn-hazte-gold .hg-txt { display: flex; flex-direction: column; line-height: 1.2; }
#btn-hazte-gold .hg-txt strong { font-family: 'Sora', sans-serif; font-size: 1rem; }
#btn-hazte-gold .hg-txt small { font-size: 11px; font-weight: 600; opacity: .8; }
#btn-hazte-gold .hg-precio { margin-left: auto; flex: 0 0 auto; font-family: 'Sora', sans-serif; font-size: 1.05rem; font-weight: 800; background: rgba(26,20,0,.18); padding: 6px 12px; border-radius: 9999px; white-space: nowrap; }

/* ── Desafíos / Misiones ── */
.mision-item { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--outline-variant); border-radius: 10px; margin-bottom: 8px; background: var(--surface-container-low); }
.mision-info { flex: 1; min-width: 0; }
.mision-desc { font-weight: 600; font-size: 13px; color: var(--on-surface); }
.mision-bar { height: 6px; background: rgba(255,255,255,0.08); border-radius: 9999px; margin-top: 5px; overflow: hidden; }
.mision-fill { height: 100%; background: linear-gradient(90deg, #d4af37, #f5d020); border-radius: 9999px; }
.mision-prog { font-size: 10px; color: var(--on-surface-variant); margin-top: 3px; }
.mision-premio { text-align: center; flex: 0 0 auto; }
.mision-premio .v { color: var(--primary); font-weight: 800; font-size: 13px; }
.mision-claim { border: none; border-radius: 7px; padding: 6px 12px; font-size: 11px; font-weight: 700; cursor: pointer; margin-top: 4px; width: 100%; }
.mision-claim.disponible { background: var(--primary); color: #111; }
.mision-claim.reclamada { background: rgba(46,160,67,0.18); color: #4ade80; cursor: default; }
.mision-claim.bloqueada { background: rgba(255,255,255,0.05); color: var(--on-surface-variant); cursor: not-allowed; }

/* Pantalla de éxito del retiro (check dorado) */
.retirar-exito {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; padding: 22px 8px 8px;
}
.retirar-check { font-size: 56px; color: var(--primary); filter: drop-shadow(0 0 12px rgba(212,175,55,0.45)); }
.retirar-exito-titulo { font-family: 'Sora', Inter, sans-serif; font-size: 1.2rem; font-weight: 700; color: var(--on-surface); margin: 0; }
.retirar-exito-sub { color: var(--on-surface-variant); margin: 0; font-size: 14px; }

/* ── Overlay de procesado ── */
.cajero-overlay {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.78); backdrop-filter: blur(4px);
}
.cajero-overlay-card {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 32px 40px; border-radius: 18px; text-align: center;
  background: linear-gradient(180deg, #16161a, #0e0e10);
  border: 1px solid rgba(212,175,55,0.28); max-width: 90vw;
}
.cajero-overlay-card p { color: var(--on-surface); margin: 0; font-size: 15px; }
.cajero-spin { font-size: 40px; color: var(--primary); animation: cajero-rot 1s linear infinite; }
@keyframes cajero-rot { to { transform: rotate(360deg); } }

/* Estados del asiento */
.seat-player.turno-activo .seat-avatar {
  border-color: #36d07a;
  box-shadow: 0 0 0 4px #36d07a, 0 0 20px rgba(54,208,122,.7);
  animation: seat-pulse 1.3s infinite ease-in-out;
}
@keyframes seat-pulse { 0%,100% { box-shadow: 0 0 0 3px #36d07a, 0 0 14px rgba(54,208,122,.55); } 50% { box-shadow: 0 0 0 5px #36d07a, 0 0 26px rgba(54,208,122,.95); } }
/* Retirados (fold) MUY atenuados → el del turno (verde) resalta por contraste. */
.seat-player.retirado { opacity: .4; filter: grayscale(0.85); }
.seat-player.desconectado .seat-avatar { border-style: dashed; border-color: var(--outline); }
.seat-player.es-mano .seat-info { border-color: rgba(212,175,55,0.4); }
/* ── Jugador AUSENTE (AFK/desconectado): avatar apagado + badge premium ── */
.seat-player.ausente .seat-avatar,
.seat-player.ausente .seat-avatar-foto { filter: grayscale(1) brightness(.6); }
/* Ausente (AFK) → todo el asiento translúcido para que no solape ni estorbe. */
.seat-player.ausente { opacity: .32; transition: opacity .25s ease; }
.seat-player.ausente .avatar-figura { filter: grayscale(1) brightness(.6) drop-shadow(0 4px 5px rgba(0,0,0,.4)); }
.seat-badge-ausente {
  position: absolute; z-index: 20; top: -10px; left: 50%; transform: translateX(-50%);
  background: rgba(0, 0, 0, .8); color: #9ca3af; border: 1px solid #4b5563;
  border-radius: 6px; padding: 2px 8px; font-size: 10px; font-weight: 800;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; letter-spacing: .06em;
  white-space: nowrap; pointer-events: none; box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}

/* ── Zona héroe (debajo del óvalo) ── */
.mesa6-hero {
  width: 100%; max-width: 760px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin: 4px auto 10px;
}
.mesa6-acciones {
  width: 100%; max-width: 560px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 10px; align-items: stretch;
}

/* ── Responsive: móvil/tablet → sin sidebar, óvalo full-width ── */
/* A ≤1200px se oculta la sidebar y (más abajo) el chat se apila: el óvalo
   conserva el ancho del canvas y los asientos no invaden el HUD central. */
@media (max-width: 1200px) {
  .mesa6-sidebar { display: none; }
  .mesa6-canvas { width: 100%; padding-top: 56px; }
}
@media (max-width: 760px) {
  .seat-player { width: 92px; }
  .seat-avatar { width: 44px; height: 44px; font-size: 14px; }
  .seat-name { font-size: 11px; max-width: 78px; }
  .seat-p2, .seat-p6 { top: 8%; }
  .seat-p2, .seat-p3 { right: 0; }
  .seat-p5, .seat-p6 { left: 0; }
}
@media (max-width: 560px) {
  .mesa6-table { aspect-ratio: 4 / 3; }
  .seat-cards .dorso-carta-img { width: 13px; }
}

/* ══════════════════════════════════════════════════════════════
   MESA MÓVIL VERTICAL (portrait) — óvalo vertical + acciones abajo
   Detección por orientación: en portrait estrecho se reorganiza la
   mesa en vertical (rivales por los lados, héroe abajo, botones de
   acción pegados al fondo en la zona del pulgar). En landscape se
   mantiene la estructura horizontal de siempre.
   ══════════════════════════════════════════════════════════════ */
@media (orientation: portrait) and (max-width: 820px) {
  /* ── ÓVALO AZUL VERTICAL (estilo referencia diseño-mesa) ──
     Óvalo alto que llena la pantalla · rivales pequeños en el borde · héroe abajo ·
     acciones FIJAS abajo. Avatares pequeños + óvalo alto = no se solapan. */
  .mesa6-wrapper { height: 100dvh; overflow: hidden; flex-direction: column; }
  /* Empujar la mesa hacia abajo (que el asiento de arriba no quede pegado al header).
     Se baja la altura del óvalo a la par → el asiento de abajo NO se corta en móvil. */
  /* ENFOQUE 1 (ACTIVO): el Héroe va PERMANENTEMENTE elevado. Reservamos abajo un hueco fijo = alto del Action
     HUD (--mesa-hud-h). El óvalo + héroe viven ARRIBA de ese hueco; el HUD (fixed) aparece dentro del hueco
     sin tapar nunca avatar, stack ni cartas. Ajustable: sube/baja --mesa-hud-h para afinar el hueco. */
  .mesa6-canvas { --mesa-hud-h: 190px; height: 100dvh; padding: 58px 6px calc(var(--mesa-hud-h) + env(safe-area-inset-bottom)); display: flex; flex-direction: column; position: relative; }

  /* ÓVALO: vertical, con MÁRGENES laterales (centrado). Altura reducida para dejar sitio al héroe ya elevado. */
  .mesa6-table { position: relative; flex: 0 0 auto; height: 56vh; max-width: min(96%, 420px); margin: 0 auto; aspect-ratio: auto; }
  .mesa6-felt { display: block; position: absolute; inset: 0; top: 0; transform: none; width: 100%; height: 100%;
    border-radius: 47% / 36%;
    box-shadow: inset 0 0 70px rgba(0,0,0,0.4), 0 8px 30px rgba(0,0,0,0.6); }
  .mesa6-watermark { display: flex; color: rgba(255,255,255,0.07); }

  /* Asientos COMPACTOS y bien separados en el borde del óvalo (sin solापe de cartas). */
  .mesa6-seat { position: absolute !important; inset: auto; z-index: 30; }
  .seat-p1 { top: 4%;  left: 50%; transform: translateX(-50%) !important; }   /* arriba centro, bajado para que sus cartas NO queden bajo el banner */
  .seat-p6 { top: 15%;  left: -2px;  transform: none !important; }             /* arriba izq (al borde) */
  .seat-p2 { top: 15%;  right: -2px; left: auto; transform: none !important; } /* arriba der (al borde) */
  .seat-p5 { top: 60%;  bottom: auto; left: -2px;  transform: none !important; }  /* abajo izq (comprimido) */
  .seat-p3 { top: 60%;  bottom: auto; right: -2px; left: auto; transform: none !important; } /* abajo der (comprimido) */
  .seat-player { width: 60px; gap: 1px; }
  .seat-avatar { width: 34px; height: 34px; font-size: 11px; border-width: 2px; }
  .seat-name { font-size: 9px; max-width: 58px; }
  .seat-stack { font-size: 9px; }
  .seat-cards .dorso-carta-img { width: 15px; }   /* cartas de rival un poco más grandes */
  .seat-cards-revel .carta { width: 38px; height: 53px; }   /* abanico revelado: grande para ver la jugada */
  .seat-cards-revel .seat-carta-wrap { margin: 0 -8px; }
  .seat-bet { font-size: 9px; padding: 1px 6px; }
  /* Centro: BOTE + mazo en la parte superior-media del óvalo. */
  .mesa6-centro { position: absolute !important; top: 28%; left: 50%; transform: translateX(-50%) !important; }

  /* HÉROE: cartas MÁS ARRIBA (solapan más el óvalo) y la PUNTUACIÓN justo debajo. */
  .mesa6-hero { flex: 1 1 auto; min-height: 0; z-index: 5; margin-top: -82px;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; overflow: visible; }
  .mano-jugador { margin: 0; gap: 6px; flex-wrap: nowrap; }
  .mano-jugador .carta, .mano-jugador .carta-img, .mano-jugador img { width: 68px; height: auto; }
  /* Puntuación: pill compacta JUSTO debajo de las cartas (azul 888). */
  #hud-puntuacion { order: 9; margin-top: 2px; padding: .3rem .9rem; font-size: .8rem;
    background: rgba(10,16,24,.9); border: 1px solid #3a6ea5; }
  #hud-puntuacion .hud-pun-valor { color: #bcdcff; }

  /* ACCIONES: barra FIJA abajo. Translúcida premium (deja ver el tapete) + escala 85%
     (menos invasiva, no tapa las cartas). */
  .mesa6-acciones {
    position: fixed; bottom: 0; left: 0; width: 100%; max-width: 100%; z-index: 60;
    background: rgba(0,0,0,0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255,255,255,.12); border-radius: 14px 14px 0 0;
    box-shadow: 0 -6px 22px rgba(0,0,0,.5);
    /* PEGADO al fondo. ENFOQUE 1: el HUD se acota al hueco reservado (--mesa-hud-h) → NUNCA invade la zona del
       héroe (cartas/avatar/stack). Si el contenido excediera, scrollea dentro de la barra (no se desborda hacia arriba). */
    padding: 7px 10px calc(8px + env(safe-area-inset-bottom));
    max-height: calc(var(--mesa-hud-h) + env(safe-area-inset-bottom)); overflow: visible;   /* visible → el slider vertical flotante no se recorta */
  }
  /* El slider vertical flotante de subir apuesta y el botón de gestos por encima de todo (no los pisa nada). */
  #acciones .bet-vstepper, #acciones .bet-vrange { z-index: 62; }
  #btn-quickchat, .mesa-quickchat-btn { z-index: 130; }

  /* ── ENFOQUE 2 (ALTERNATIVO, listo para alternar) — desplazamiento DINÁMICO del héroe solo cuando el HUD
     está activo. Para probarlo: (a) en ENFOQUE 1 baja --mesa-hud-h (p.ej. 70px) para NO reservar el hueco,
     (b) añade la clase .has-action-hud al .mesa6-wrapper desde JS cuando se muestre #acciones, y (c) descomenta:
  .mesa6-wrapper.has-action-hud .mesa6-hero { transform: translateY(-150px); transition: transform .18s ease; }
  .mesa6-hero.hero-dynamic-shift { transform: translateY(-150px); transition: transform .18s ease; }
  ── */
  #acciones { max-width: 100%; gap: 6px !important; }
  #barra-porcentajes { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    justify-content: flex-start; padding-bottom: 2px; gap: 5px !important; }
  #barra-porcentajes .btn-pct { flex: 0 0 auto; padding: 6px 11px !important; font-size: 12px !important; }
  .acciones-principales { gap: 7px; }
  /* Botones de acción MÁS PEQUEÑOS y compactos (más hueco para la mesa). */
  .btn-juego { padding: 10px 6px; font-size: 13px; border-radius: 12px;
    box-shadow: 0 2px 0 rgba(0,0,0,.35), 0 3px 8px rgba(0,0,0,.4); }
  .btn-juego:active { transform: translateY(2px); }
  /* Fila de apuesta compacta. */
  #acciones { gap: 7px !important; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)) !important; }
  #acciones .bet-pill { font-size: 13px; padding: 6px 9px; min-width: 48px; }
  #acciones .pcts .btn-pct { font-size: 11px; padding: 7px 0; }
  .bet-step { width: 32px; height: 18px; }
}

/* ── PC / pantallas anchas (≥821px): que el HUD de acción SIEMPRE se vea y no quede
   recortado abajo. La columna [mesa + héroe + HUD] se ajusta al alto del viewport
   (el wrapper recorta lo que sobra). NO afecta al móvil (portrait ≤820, que es perfecto). ── */
@media (min-width: 821px) {
  .mesa6-canvas { height: 100vh; justify-content: flex-start; padding: 46px 16px 10px; overflow: hidden; }
  .mesa6-table { width: 100%; max-width: 880px; max-height: 40vh; aspect-ratio: 16 / 9; margin: 4px auto 2px; }
  .mesa6-hero { flex: 0 1 auto; min-height: 0; margin: 2px auto 2px; }
  .mesa6-acciones { flex: 0 0 auto; margin: 0 auto 2px; }
}

/* ══════════════════════════════════════════════════════════════
   ESPECTADOR + CHAT (Gold/Dark Giley) — sobre la Mesa 6/4-max
   ══════════════════════════════════════════════════════════════ */

/* Asiento centro-abajo (solo espectador viendo mesa completa de 6) */
.seat-p4 { bottom: 1%; left: 50%; transform: translateX(-50%); }

/* ── Badge "Modo Espectador" (dorado, sobre el HUD) ── */
.spectator-badge {
  /* Abajo del todo (encima del footer): no tapa el banner ni interfiere con la mesa. */
  position: fixed; top: auto; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%);
  z-index: 60;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 16px; border-radius: 9999px;
  background: linear-gradient(135deg, rgba(212,175,55,0.22), rgba(212,175,55,0.10));
  border: 1px solid rgba(212,175,55,0.55);
  color: var(--primary);
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 0 18px rgba(212,175,55,0.30);
  white-space: nowrap;
}
.spectator-badge .material-symbols-outlined { font-size: 16px; }

/* ── Paneles de chat (mesa derecha + lobby) ── */
.mesa6-chat {
  width: 300px; flex-shrink: 0; align-self: stretch;
  display: flex; flex-direction: column;
  background: rgba(20,20,22,0.92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-left: 1px solid rgba(212,175,55,0.15);
  padding-top: 58px;
}
.lobby-chat {
  position: fixed; right: 0; top: 56px; bottom: 0;
  width: 300px; z-index: 45;
  display: flex; flex-direction: column;
  background: rgba(20,20,22,0.95);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-left: 1px solid rgba(212,175,55,0.15);
  transition: transform .26s cubic-bezier(.4,0,.2,1);
}
.chat-cerrar { display: none; }   /* solo en escritorio (ver media query) */
/* ── Chat del lobby DESPLEGABLE en ESCRITORIO: plegado por defecto (no tapa el lobby); FAB para abrir ── */
@media (min-width: 769px) {
  .lobby-chat.chat-cerrado { transform: translateX(calc(100% + 12px)); box-shadow: none; }
  .chat-cerrar {
    display: flex; align-items: center; justify-content: center; margin-left: auto;
    width: 30px; height: 30px; border: none; border-radius: 8px; cursor: pointer;
    background: rgba(255,255,255,.06); color: var(--on-surface-variant);
  }
  .chat-cerrar:hover { background: rgba(255,255,255,.12); color: var(--on-surface); }
  .fab-chat-lobby {
    position: fixed; right: 18px; bottom: 18px; z-index: 44;
    align-items: center; gap: 8px; padding: 11px 16px;
    border: 1px solid rgba(212,175,55,.3); border-radius: 9999px; cursor: pointer;
    background: rgba(20,20,22,0.95); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    color: var(--primary); font-weight: 700; font-size: 14px;
    box-shadow: 0 6px 20px rgba(0,0,0,.4); transition: filter .15s, transform .15s;
  }
  .fab-chat-lobby:not(.oculto) { display: flex; }
  .fab-chat-lobby:hover { filter: brightness(1.12); transform: translateY(-1px); }
}
.chat-head {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.chat-head h3 {
  font-family: 'Sora', Inter, sans-serif; font-size: 14px; font-weight: 700;
  color: var(--on-surface); margin: 0; text-transform: uppercase; letter-spacing: .05em;
}
.chat-msgs {
  flex: 1; overflow-y: auto; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.chat-msg { font-size: 13px; line-height: 1.35; word-break: break-word; }
.chat-msg .chat-autor { font-weight: 700; color: var(--primary); margin-right: 4px; }
/* Nombre clickable → abre el perfil del jugador. */
.chat-msg .chat-autor-link { cursor: pointer; text-decoration: underline dotted transparent; text-underline-offset: 2px; }
.chat-msg .chat-autor-link:hover, .chat-msg .chat-autor-link:focus-visible { text-decoration-color: currentColor; outline: none; }
.chat-msg .chat-rol {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 1px 6px; border-radius: 9999px; margin-right: 5px; vertical-align: middle;
}
.chat-msg .chat-rol.jugador    { background: rgba(212,175,55,0.15); color: var(--primary); border: 1px solid rgba(212,175,55,0.3); }
.chat-msg .chat-rol.espectador { background: rgba(255,255,255,0.06); color: var(--on-surface-variant); border: 1px solid rgba(255,255,255,0.12); }
.chat-msg .chat-texto { color: var(--on-surface); }
.chat-msg.chat-sistema { color: var(--on-surface-variant); font-style: italic; }
.chat-msg.chat-sistema .chat-autor { color: var(--on-surface-variant); }
/* STAFF (admin/moderador): mensaje destacado para toda la sala — fondo suave + nombre dorado + badge. */
.chat-msg.chat-msg-staff { background: rgba(242,202,80,.08); border-left: 2px solid #f2ca50; border-radius: 6px; padding: 3px 6px; margin: 2px 0; }
.chat-msg .chat-autor-staff { color: #ffd75a !important; text-shadow: 0 0 6px rgba(242,202,80,.45); }
.chat-staff { display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: .04em; padding: 1px 5px; border-radius: 5px; margin-right: 4px; vertical-align: 1px; }
.chat-staff-admin { background: linear-gradient(160deg, #f2ca50, #c79200); color: #1a1407; }
.chat-staff-moderator { background: linear-gradient(160deg, #3a9bff, #1565c0); color: #fff; }
.chat-input {
  display: flex; gap: 6px; padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(255,255,255,0.06); flex-shrink: 0;
}
.chat-input input {
  flex: 1; min-width: 0; padding: 9px 12px; border-radius: 9px;
  background: var(--surface-container); color: var(--on-surface);
  border: 1px solid var(--outline-variant); font-size: 13px;
}
.chat-input input:focus { outline: none; border-color: var(--primary); }
.chat-input input:disabled { opacity: .5; cursor: not-allowed; }
.chat-send {
  flex-shrink: 0; width: 40px; border: none; border-radius: 9px; cursor: pointer;
  background: linear-gradient(135deg, var(--primary-container), var(--primary));
  color: #1a1407; display: flex; align-items: center; justify-content: center;
}
.chat-send:hover { filter: brightness(1.08); }
.chat-send:disabled { opacity: .4; cursor: not-allowed; }
.chat-vacio { color: var(--on-surface-variant); font-size: 12px; text-align: center; padding: 20px 0; }

/* ── Responsive: chats no rompen el óvalo ni bloquean clics ── */
@media (max-width: 1100px) {
  .mesa6-chat { width: 260px; }
}
@media (max-width: 1200px) {
  /* Mesa: apila el chat debajo del óvalo (no fixed, no tapa botones de juego) */
  .mesa6-wrapper { flex-direction: column; }
  .mesa6-chat {
    width: 100%; align-self: stretch; padding-top: 0;
    max-height: 240px; border-left: none; border-top: 1px solid rgba(212,175,55,0.15);
  }
  /* Lobby: chat como cajón inferior, altura reducida */
  .lobby-chat {
    top: auto; left: 0; right: 0; width: 100%; height: 46vh;
    border-left: none; border-top: 1px solid rgba(212,175,55,0.2);
    border-radius: 16px 16px 0 0;
  }
  /* El plegado de ESCRITORIO no aplica en móvil (aquí el chat es pestaña/overlay, no FAB). */
  .lobby-chat.chat-cerrado { transform: none; }
  .fab-chat-lobby { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   MODAL HISTORIAL DE MANOS (Gold/Dark, responsive)
   ══════════════════════════════════════════════════════════════ */
.modal-historial-box {
  width: min(560px, 94vw); max-height: 86vh;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #16161a, #0e0e10);
  border: 1px solid rgba(212,175,55,0.28);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 30px rgba(212,175,55,0.08);
}
.modal-historial-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.modal-historial-head h3 {
  font-family: 'Sora', Inter, sans-serif; font-size: 16px; font-weight: 700;
  color: var(--on-surface); margin: 0;
}
.modal-historial-x {
  background: var(--surface-container-high); color: var(--on-surface-variant);
  border: 1px solid var(--outline-variant); border-radius: 8px;
  width: 32px; height: 32px; cursor: pointer; font-size: 14px;
}
.modal-historial-x:hover { color: var(--primary); border-color: var(--primary); }
.modal-historial-body { overflow-y: auto; padding: 12px 16px; }

.hist-mano {
  border: 1px solid rgba(255,255,255,0.06); border-radius: 12px;
  margin-bottom: 10px; overflow: hidden; background: rgba(255,255,255,0.02);
}
.hist-mano-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; cursor: pointer; transition: background .15s ease;
}
.hist-mano-head:hover { background: rgba(212,175,55,0.06); }
.hist-mano-titulo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hist-mano-num { font-size: 11px; color: var(--on-surface-variant); text-transform: uppercase; letter-spacing: .05em; }
.hist-mano-winner { font-size: 14px; font-weight: 700; color: var(--on-surface); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-mano-winner .ws-tag { color: var(--primary); }
.hist-mano-bote {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end;
}
.hist-mano-bote .lbl { font-size: 10px; color: var(--on-surface-variant); text-transform: uppercase; }
.hist-mano-bote .val { font-family: 'Sora', sans-serif; font-weight: 700; color: var(--primary); font-size: 15px; }
.hist-mano-chevron { color: var(--on-surface-variant); flex-shrink: 0; transition: transform .2s ease; }
.hist-mano.abierta .hist-mano-chevron { transform: rotate(180deg); }

.hist-mano-detalle { display: none; padding: 0 14px 14px; border-top: 1px solid rgba(255,255,255,0.05); }
.hist-mano.abierta .hist-mano-detalle { display: block; }
.hist-detalle-fila { margin-top: 12px; }
.hist-detalle-lbl { font-size: 11px; color: var(--on-surface-variant); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.hist-jugador { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.hist-jugador-nombre { font-size: 13px; font-weight: 600; color: var(--on-surface); min-width: 90px; }
.hist-jugador-nombre.ganador { color: var(--primary); }
.hist-cartas { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
/* Carta del historial = sprite real (valor+palo), compacta y legible. */
.hist-carta-wrap { display: inline-flex; }
.hist-carta-img { width: 38px; height: auto; border-radius: 5px; border: 1px solid rgba(0,0,0,0.25);
  box-shadow: 0 1px 4px rgba(0,0,0,0.4); background: #fff; display: block; }
.hist-carta-wrap.especial .hist-carta-img { box-shadow: 0 0 0 2px #f2ca50, 0 1px 4px rgba(0,0,0,0.4); }
.hist-carta-txt { align-items: center; gap: 2px; padding: 4px 9px; border-radius: 7px; font-size: 13px;
  font-weight: 700; background: #f5f3ee; color: #1a1a1a; border: 1px solid rgba(0,0,0,0.15); font-variant-numeric: tabular-nums; }
.hist-carta {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px 8px; border-radius: 7px; font-size: 13px; font-weight: 700;
  background: #f5f3ee; color: #1a1a1a; border: 1px solid rgba(0,0,0,0.15);
  font-variant-numeric: tabular-nums;
}
.hist-carta.especial { background: linear-gradient(135deg, #ffe9a8, #f2ca50); color: #4a3500; }
.hist-puntos { font-size: 12px; color: var(--on-surface-variant); margin-left: auto; }
.hist-foldwin { font-size: 12px; color: var(--on-surface-variant); font-style: italic; }

@media (max-width: 560px) {
  .modal-historial-box { width: 96vw; max-height: 90vh; }
  .hist-jugador-nombre { min-width: 70px; }
}

/* ══════════════════════════════════════════════════════════════
   PESTAÑAS HÍBRIDAS — tabs en móvil (≤1200px), laterales en desktop
   ══════════════════════════════════════════════════════════════ */
.giley-tabs { display: none; }   /* desktop: sin pestañas, todo lateral */

@media (max-width: 1200px) {
  /* Pestañas de mesa: botones REDONDOS icono-solo, banner COMPLETAMENTE TRANSPARENTE (no tapa nada). */
  .giley-tab {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; padding: 0; border: none; border-radius: 50%; cursor: pointer;
    background: transparent; color: #bcdcff; font-size: 0;   /* font-size:0 oculta el texto, deja el icono */
    transition: opacity .15s ease;
  }
  .giley-tab .material-symbols-outlined { font-size: 21px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.85)); }   /* legible sobre el tapete */
  .giley-tab.active .material-symbols-outlined { color: #fff; }

  /* Lobby: barra sticky bajo el header global */
  .lobby-tabs {
    display: flex; gap: 4px; padding: 6px 8px;
    position: sticky; top: 56px; z-index: 44;
    background: rgba(16,16,18,0.96); border-bottom: 1px solid rgba(212,175,55,0.2);
  }
  #pantalla-lobby:not(.tab-chat) .lobby-chat { display: none; }
  #pantalla-lobby.tab-chat .lobby-layout { display: none; }
  /* CHAT MÓVIL = OVERLAY LIMPIO a pantalla completa, POR ENCIMA de todo (navbar z-50, barra
     inferior z-50, botón "Invita" z-46). Fondo opaco → no se ve el navbar de fondo. Cabecera
     propia (con botón VOLVER) y barra de input propia. Cero solapamientos. */
  #pantalla-lobby.tab-chat .lobby-chat {
    display: flex; flex-direction: column;
    position: fixed; inset: 0; top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100dvh; z-index: 60;
    border: none; border-radius: 0;
    background: #0e0e10;
  }
  /* Cabecera propia del overlay: pegajosa arriba, respeta el notch, con botón VOLVER grande. */
  #pantalla-lobby.tab-chat .chat-head {
    position: sticky; top: 0; z-index: 2; background: #0e0e10;
    padding-top: calc(14px + env(safe-area-inset-top, 0px));
  }
  #pantalla-lobby.tab-chat .chat-cerrar {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; min-width: 44px; margin-left: auto;
    border: none; border-radius: 10px; cursor: pointer;
    background: rgba(255,255,255,.08); color: var(--on-surface);
  }
  #pantalla-lobby.tab-chat .chat-cerrar:active { background: rgba(255,255,255,.16); }
  #pantalla-lobby.tab-chat .chat-cerrar .material-symbols-outlined { font-size: 26px; }
  /* El input respeta la zona segura inferior (home indicator). */
  #pantalla-lobby.tab-chat .chat-input {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }

  /* Mesa: barra arriba-izquierda, dejando hueco a los botones flotantes (Salir/Sonido/Historial) */
  .mesa-tabs {
    display: flex; gap: 7px;
    position: absolute; top: 8px; left: 8px; z-index: 56;
    width: auto;   /* compacta a la izquierda (antes ocupaba hasta el centro y tapaba al jugador de arriba) */
  }
  .mesa6-wrapper.tab-chat .mesa6-canvas { display: none; }
  .mesa6-wrapper:not(.tab-chat) .mesa6-chat { display: none; }
  .mesa6-wrapper.tab-chat .mesa6-chat {
    display: flex; max-height: none; flex: 1; padding-top: 56px; border-top: none;
  }
}

/* ════════════════════════════════════════════════════════════════════
   GILEY DARK PREMIUM · Restyle del chrome ESTÁTICO de la mesa de juego.
   Solo cosmética (tapete, HUD, controles, banners). No toca el render
   dinámico de los 6 slots ni la lógica. Overrides al final por cascada.
   Paleta: #0e0e0e/#131313 · texto #e5e2e1/#d0c5af · oro #f2ca50/#d4af37/#c79200 · borde #4d4635
   ════════════════════════════════════════════════════════════════════ */

/* ── Tablero de MADERA (predeterminado; los diseños comprados lo sobreescriben vía
   --mesa-fondo; sin texto en el tapete) ── */
.mesa6-felt {
  border: 10px solid #2e3a47;            /* rail oscuro azulado (888 terminal) */
  background: var(--mesa-fondo,
    radial-gradient(ellipse 78% 64% at 50% 42%, #1f4f78 0%, #163a5a 45%, #0c1a26 82%, #080d12 100%));  /* fieltro AZUL navy */
  box-shadow:
    inset 0 0 90px rgba(0,0,0,.6),
    0 0 0 2px #3a6ea5,                    /* filo azul */
    0 0 30px rgba(33,150,243,.3),         /* glow azul */
    0 18px 44px rgba(0,0,0,.6);
}
.mesa6-felt::after {
  content: ""; position: absolute; inset: 14px; border-radius: 200px;
  border: 1.5px solid rgba(110,170,230,.22); pointer-events: none;
}
/* Texto del tapete OCULTO (la mesa no lleva nombre escrito). */
.mesa6-watermark { display: none !important; }
.mesa6-watermark {
  color: rgba(255,255,255,.08);
  text-shadow: 0 1px 0 rgba(0,0,0,.3);
  letter-spacing: .3em;
}

/* ── HUD central: bote + chips de fase/mazo/puntuación ── */
.mesa6-pot {
  background: rgba(14,14,14,.88);
  border: 1px solid #4d4635;
  box-shadow: 0 6px 22px rgba(0,0,0,.6), inset 0 1px 0 rgba(242,202,80,.12);
  padding: 8px 24px;
}
.mesa6-pot-label { color: #d0c5af; letter-spacing: .12em; font-weight: 600; }
.mesa6-pot-val { color: #f2ca50; font-size: 1.25rem; text-shadow: 0 0 16px rgba(242,202,80,.4); }
/* Minimalismo inmersivo: los chips Fase/Apuesta/Mano/Mazo NO se muestran (texto
   superfluo en móvil). El JS sigue actualizando estos nodos ocultos sin romperse. */
.mesa6-hud {
  display: none !important;
}
.mesa6-hud .hud-chip {
  background: rgba(14,14,14,.75);
  border: 1px solid #2a2620;
  color: #d0c5af; border-radius: 9px; padding: 4px 11px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.mesa6-hud .hud-chip i { color: #8a8170; }
.mesa6-hud .hud-chip b { color: #f2ca50; }

/* ── Mi asiento (hero-hud): cápsula de cristal con borde dorado ── */
.hero-hud {
  background: rgba(14,14,14,.85);
  border: 1px solid #4d4635;
  box-shadow: 0 8px 24px rgba(0,0,0,.55), inset 0 1px 0 rgba(242,202,80,.10);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.hero-hud-avatar { background: linear-gradient(135deg, #f2ca50, #c79200); box-shadow: 0 0 0 2px rgba(242,202,80,.35); }
.hero-hud-nombre { color: #e5e2e1; }
.hero-hud-stack { color: #f2ca50; }
.hero-hud-tu { background: linear-gradient(135deg, #f2ca50, #c79200); color: #1a1400; }

/* ── Banner de turno + cuenta atrás dorada ── */
.turno-banner {
  gap: 14px; padding: 10px 18px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(242,202,80,.22), rgba(199,146,0,.06));
  border: 1px solid rgba(242,202,80,.35);
  box-shadow: 0 6px 22px rgba(0,0,0,.45), 0 0 24px rgba(242,202,80,.18);
}
#turno-texto { font-family: 'Sora', Inter, sans-serif; font-weight: 700; color: #f2ca50; letter-spacing: .01em; }
.countdown-fg { stroke: #f2ca50; filter: drop-shadow(0 0 4px rgba(242,202,80,.6)); }
.countdown-text { color: #f2ca50; font-family: 'Sora', sans-serif; }

/* ── Mano del jugador: separación cómoda ── */
.mano-jugador { gap: 12px; }

/* ── Botones de acción (game-feel premium) ── */
.btn-juego {
  border-radius: 15px; font-family: 'Sora', Inter, sans-serif; letter-spacing: .04em;
  box-shadow: 0 5px 0 rgba(0,0,0,.4), 0 9px 20px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-juego-fold  { background: linear-gradient(160deg, #3a4048, #1f242b); color: #cdd3dc; }   /* ME TIRO → gris pizarra (888) */
.btn-juego-check { background: linear-gradient(160deg, #2e9e5b, #16713a); color: #eafff0; }   /* VEO/PASO → verde (888) */
.btn-juego-bet   { background: linear-gradient(160deg, #3a9bff, #1565c0); color: #fff; }       /* ENVÍO → azul (888) */
.btn-juego-bet.btn-allin { background: linear-gradient(160deg, #ff8a3c, #d4361a) !important; color: #fff !important; box-shadow: 0 0 14px rgba(255,90,20,.55); }
/* SUELO de subida no alcanzado (Call + incremento mínimo): botón ENVÍAS gris/inactivo (failsafe visual estricto) */
.btn-juego-bet.btn-apostar-invalido, #btn-apostar.btn-apostar-invalido {
  background: #3a3a3a !important; color: #8a8a8a !important; box-shadow: none !important;
  cursor: not-allowed !important; opacity: .65; filter: grayscale(1);
}

/* ── Bet slider premium (oro) ── */
#bet-slider-wrap {
  background: rgba(14,14,14,.6); border: 1px solid #2a2620; border-radius: 14px;
  padding: 12px 14px !important; gap: 7px !important;
}
#bet-slider-val { color: #f2ca50 !important; text-shadow: 0 0 14px rgba(242,202,80,.4); }
#bet-slider { -webkit-appearance: none; appearance: none; height: 8px !important; border-radius: 9999px;
  background: linear-gradient(90deg, #c79200, #f2ca50) #1a1813; cursor: pointer; }
#bet-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3c4, #f2ca50 45%, #c79200); border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.5), 0 0 10px rgba(242,202,80,.6); margin-top: -7px; }
#bet-slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3c4, #f2ca50 45%, #c79200); border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.5); }
#bet-slider::-moz-range-track { height: 8px; border-radius: 9999px; background: #1a1813; }

/* ── Pills de porcentaje (override de estilos inline) ── */
#barra-porcentajes .btn-pct {
  background: rgba(14,14,14,.7) !important; color: #e5e2e1 !important;
  border: 1px solid #4d4635 !important; border-radius: 10px !important;
  padding: 8px 13px !important; font-weight: 600; transition: all .15s ease;
}
#barra-porcentajes .btn-pct:hover { border-color: #f2ca50 !important; color: #f2ca50 !important; transform: translateY(-1px); }
#barra-porcentajes .btn-pct[data-pct="allin"] {
  background: linear-gradient(160deg, #f2ca50, #c79200) !important; color: #1a1400 !important;
  border-color: #f2ca50 !important; font-weight: 800;
  box-shadow: 0 4px 12px rgba(242,202,80,.35);
}

/* ── Paneles (subir sin ver, descarte) + showdown ── */
.panel-accion {
  background: rgba(14,14,14,.85); border: 1px solid #4d4635; border-radius: 16px;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 12px 30px rgba(0,0,0,.55), inset 0 1px 0 rgba(242,202,80,.08);
}
.panel-titulo { color: #f2ca50; font-family: 'Sora', Inter, sans-serif; }
.panel-desc { color: #d0c5af; }
.panel-desc strong { color: #f2ca50; }
.btn-oro { background: linear-gradient(160deg, #f2ca50, #c79200); color: #1a1400; border-radius: 11px; font-weight: 800; }
.btn-oro:hover { background: linear-gradient(160deg, #f7d56a, #d4af37); }
#showdown-muck { background: rgba(14,14,14,.92) !important; border: 1px solid #4d4635 !important;
  border-radius: 16px !important; box-shadow: 0 14px 36px rgba(0,0,0,.6) !important; }

/* ── HUD de puntuación ── */
.hud-puntuacion { background: rgba(14,14,14,.8); border: 1px solid #4d4635; }
.hud-pun-label { color: #d0c5af; }
.hud-pun-valor { color: #f2ca50; }

/* ═══════════════════════════════════════════════
   MESA · MINIMALISMO INMERSIVO (Lote 1) + WINNER OVERLAY
   ═══════════════════════════════════════════════ */

/* (De-clutter Fase/Apuesta/Mano/Mazo: ver .mesa6-hud arriba — display:none.) */

/* BOTE central → badge de lujo (cristal oscuro + oro + glow). */
.mesa6-pot {
  background: rgba(0,0,0,0.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(245,208,32,0.35);
  box-shadow: 0 0 18px rgba(212,175,55,0.22), 0 4px 18px rgba(0,0,0,0.5);
  padding: 6px 20px;
}
.mesa6-pot-label { color: rgba(245,208,32,0.75); font-weight: 700; }
.mesa6-pot-val { color: #f5d020; text-shadow: 0 0 12px rgba(245,208,32,0.3); }

/* 3) Mazo visual: pila de cartas boca abajo (CSS puro, sin texto) junto al bote. */
.mesa6-deck { position: relative; width: 34px; height: 48px; flex: 0 0 auto; }
/* Contador de cartas que QUEDAN en el mazo (badge sobre la pila) */
.mesa6-deck-count {
  position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); z-index: 3;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: rgba(8,12,18,.92); border: 1px solid #3a6ea5; color: #cfe3ff;
  font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 6px rgba(0,0,0,.5);
}
.mesa6-deck-count:empty { display: none; }
.mesa6-deck.remezcla-flash i { animation: remezcla-flash .35s ease 2 alternate; }
@keyframes remezcla-flash { from { box-shadow: inset 0 0 0 2px rgba(58,110,165,0.18); } to { box-shadow: inset 0 0 0 2px rgba(120,200,255,.9), 0 0 12px rgba(120,200,255,.7); } }
.mesa6-deck i {
  position: absolute; inset: 0; border-radius: 6px;
  background: linear-gradient(135deg, #15181e, #0a0c10);   /* dorso NEGRO premium (888) */
  border: 1px solid #3a4658;
  box-shadow: inset 0 0 0 2px rgba(58,110,165,0.18);
}
.mesa6-deck i:nth-child(1) { transform: translate(3px, 3px); opacity: .5; }
.mesa6-deck i:nth-child(2) { transform: translate(1.5px, 1.5px); opacity: .75; }
.mesa6-deck i:nth-child(3) { transform: none; }

/* (Eliminada la regla `#bet-slider-wrap { display:none !important }` — antes ocultaba el slider viejo,
   pero ahora #bet-slider-wrap ES la FILA DE APUESTA nueva [valor · MÍN/50/80/MÁX · +/−] que debe
   verse al apostar. Su visibilidad la controla mostrarControlesApuesta(). Ese !important era el bug
   que dejaba el HUD "sin porcentajes ni +/−".) */

/* ── Winner Overlay (clímax del showdown) ── */
.winner-overlay {
  position: fixed; inset: 0; z-index: 120;
  /* Anclado al CENTRO-SUPERIOR (zona del BOTE) — NUNCA sobre las cartas del jugador local (abajo). */
  display: flex; align-items: flex-start; justify-content: center; pointer-events: none;
  padding-top: clamp(110px, 26vh, 300px);
}
.winner-overlay.oculto { display: none; }
@media (max-width: 640px) { .winner-overlay { padding-top: clamp(96px, 22vh, 220px); } }
.winner-panel {
  pointer-events: auto; max-width: min(92vw, 420px);
  background: rgba(0,0,0,0.82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(245,208,32,0.5); border-radius: 20px; padding: 22px 26px; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 40px rgba(212,175,55,0.18);
  animation: winnerIn .45s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes winnerIn { from { opacity: 0; transform: scale(.82) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.winner-titulo { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.15rem; color: #fff; margin-bottom: 14px; }
.winner-gana { color: var(--primary); }
.winner-cartas { display: flex; gap: 8px; justify-content: center; margin-bottom: 12px; }
.winner-cartas .carta { width: 66px; height: 92px; animation: none; }
.winner-jugada { font-size: .95rem; color: var(--on-surface-variant); margin-bottom: 10px; font-weight: 600; }
.winner-bote-wrap { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 2rem; color: #f5d020; text-shadow: 0 0 18px rgba(245,208,32,0.35); }
.winner-chip { font-size: 1.4rem; }

/* Dealer button "D" del HÉROE: chip estático en la fila del hero-hud (no absoluto). */
.hero-dealer { position: static; flex: 0 0 auto; width: 20px; height: 20px; border: none; margin-left: -4px; }

/* 5) Cartas propias MÁS GRANDES en móvil (elemento dominante de la zona inferior),
   sin solaparse con los botones compactos. */
@media (max-width: 768px) {
  #mano-jugador .carta { width: 80px; height: 112px; }
  .mano-jugador { gap: 8px; padding: 2px 0; }
  .winner-cartas .carta { width: 58px; height: 81px; }
}

/* ═══════════════════════════════════════════════
   TORNEOS (MTT) — tarjetas (cristal v0 + oro)
   ═══════════════════════════════════════════════ */
.torneos-lista { display: flex; flex-direction: column; gap: 12px; max-height: 60vh; overflow-y: auto; }
.torneo-card {
  background: rgba(255,255,255,0.05); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.10); border-radius: 16px; padding: 14px 16px;
}
.torneo-card.ko { border-color: rgba(212,175,55,0.35); box-shadow: 0 0 16px rgba(212,175,55,0.12); }
.torneo-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.torneo-nombre { font-family: 'Sora', sans-serif; font-weight: 700; color: #fff; font-size: 1rem; }
.torneo-tipo { font-size: 11px; font-weight: 700; color: #1a1407; background: var(--primary); border-radius: 9999px; padding: 2px 10px; }
.torneo-cd { font-size: 13px; color: var(--primary); font-weight: 700; margin: 6px 0 8px; }
.torneo-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--on-surface-variant); }
.torneo-meta b { color: #f5d020; }
.torneo-ko-nota { margin-top: 8px; font-size: 12px; color: #f5d020; font-weight: 600; }
.torneo-join { width: 100%; margin-top: 12px; }
.torneo-join:disabled { opacity: .5; cursor: not-allowed; }

/* ═══════════════════════════════════════════════
   WELCOME MODAL (1ª vez tras registro) — cristal v0 + oro
   ═══════════════════════════════════════════════ */
.bienvenida-box {
  max-width: min(92vw, 400px); margin: auto; text-align: center;
  background: rgba(255,255,255,0.05); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(245,208,32,0.4); border-radius: 24px; padding: 30px 26px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.6), 0 0 50px rgba(212,175,55,0.18);
  animation: winnerIn .5s cubic-bezier(.2,.9,.3,1.2);
}
.bienvenida-cofre { font-size: 4rem; line-height: 1; filter: drop-shadow(0 6px 18px rgba(245,208,32,0.4)); animation: cofrePulse 2.4s ease-in-out infinite; }
@keyframes cofrePulse { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-6px) scale(1.04); } }
.bienvenida-titulo { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.3rem; color: #fff; margin: 14px 0 8px; line-height: 1.25; }
.bienvenida-titulo span { color: var(--primary); }
.bienvenida-sub { color: var(--on-surface-variant); font-size: .95rem; line-height: 1.5; margin: 0 0 20px; }
.bienvenida-box .btn-mesa { width: 100%; }

/* ═══════════════════════════════════════════════
   CARTAS — sin texto duplicado (los sprites ya traen número + símbolo)
   ═══════════════════════════════════════════════ */
/* El overlay de texto (valor/palo/símbolo) era SOLO un fallback. Como los sprites ya
   muestran el número y el palo, se oculta para no verlo doble. */
.carta .carta-valor,
.carta .carta-palo,
.carta .carta-nombre,
.carta .palo-simbolo { display: none; }
/* Fallback: si el sprite NO carga (onerror añade .sin-sprite), se re-muestra el texto. */
.carta.sin-sprite .carta-valor { display: block; }
.carta.sin-sprite .palo-simbolo { display: block; }

/* Botón para SALIR del modo invitado (dentro del guest-banner) → vuelve al login/registro */
.btn-guest-salir {
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
  background: var(--primary); color: #1a1407; border: none; border-radius: 9999px;
  padding: 8px 16px; font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap;
  box-shadow: 0 0 12px rgba(212,175,55,0.25); transition: transform .08s ease;
}
.btn-guest-salir:active { transform: scale(0.95); }
@media (max-width: 768px) {
  /* Banner de invitado: apilar en columna para que el botón NO desborde la sección Mesas. */
  .guest-banner { flex-direction: column; align-items: flex-start; padding: 12px 14px; margin-bottom: 16px; gap: 8px; }
  .guest-banner p { font-size: .82rem; line-height: 1.35; }
  .btn-guest-salir { width: 100%; margin: 4px 0 0; justify-content: center; }
}

/* Etiqueta de última acción del rival (PASA/IGUALA/SUBE/APUESTA), donde aparece "Retirado" */
.seat-accion {
  margin-top: 3px; display: inline-block;
  background: rgba(245,208,32,0.16); color: #f5d020;
  border: 1px solid rgba(245,208,32,0.4); border-radius: 9999px;
  font-size: 10px; font-weight: 800; letter-spacing: .04em; padding: 1px 9px;
  text-transform: uppercase; animation: winnerIn .25s ease;
}

/* Logo de marca (nuevo LOGO.png) en la pantalla de login */
.auth-logo { display: block; width: 160px; max-width: 62%; height: auto; aspect-ratio: 431 / 433; margin: 0 auto 6px; filter: drop-shadow(0 6px 20px rgba(212,175,55,0.25)); }

/* Countdown de arranque de torneo (overlay full-screen, cristal + oro) */
.torneo-countdown { position: fixed; inset: 0; z-index: 130; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.torneo-countdown.oculto { display: none; }
.tc-box { text-align: center; padding: 30px 34px; border-radius: 22px; background: rgba(255,255,255,0.05);
  border: 1px solid rgba(245,208,32,0.45); box-shadow: 0 0 50px rgba(212,175,55,0.2); animation: winnerIn .4s ease; }
.tc-emoji { font-size: 3rem; }
.tc-titulo { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.25rem; color: #fff; margin: 10px 0 4px; }
.tc-mesa { color: var(--on-surface-variant); margin-bottom: 14px; }
.tc-mesa b { color: var(--primary); }
.tc-num { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 3.4rem; color: #f5d020; text-shadow: 0 0 24px rgba(245,208,32,0.4); line-height: 1; }

/* "Retirarse en la próxima mano" → pastilla con toggle elegante (antes: checkbox soso) */
#lbl-sitout {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(245,208,32,0.25);
  border-radius: 9999px; padding: 7px 14px !important; width: fit-content;
  margin: 8px auto 0 !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: border-color .15s, color .15s, transform .1s;
}
#lbl-sitout:active { transform: scale(.97); }
#chk-sitout {
  appearance: none; -webkit-appearance: none; width: 34px; height: 20px; border-radius: 9999px;
  background: #3a3a3a; position: relative; cursor: pointer; transition: background .2s; flex: 0 0 auto; margin: 0;
}
#chk-sitout::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: transform .2s; }
#chk-sitout:checked { background: var(--primary); }
#chk-sitout:checked::after { transform: translateX(14px); }
#lbl-sitout:has(#chk-sitout:checked) { border-color: var(--primary); color: var(--primary) !important; }

/* ═══════════════════════════════════════════════
   POLISH (Frontend Cleanup) — Login + Mesa
   ═══════════════════════════════════════════════ */
/* Login: fuera los iconos de la izquierda de los campos (afeaban/amontonaban). */
.auth-field-icon { display: none !important; }
.auth-field input { padding-left: 16px; }
.auth-shell { padding: 0 24px; }

/* Mesa: botones de acción más redondeados + toque glass (mantienen color = legibles). */
.btn-juego { border-radius: 16px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.14); }
/* HUD inferior: más aire para no chocar con la barra de navegación del móvil. */
@media (max-width: 768px) {
  .mesa6-acciones { padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important; }
}

/* ═══════════════════════════════════════════════
   MESA — orden de la zona héroe + cronómetro + feedback de acción
   ═══════════════════════════════════════════════ */
/* Cartas ENCIMA de mi avatar (antes iban debajo). */
.mesa6-hero #mano-jugador  { order: 1; }
.mesa6-hero #accion-feedback { order: 2; }
.mesa6-hero #hero-hud      { order: 3; }
.mesa6-hero #turno-banner  { order: 4; }

/* "Tu turno" fuera: solo el cronómetro (anillo), compacto y sin caja que tape la mesa. */
#turno-texto { display: none !important; }
.turno-banner { padding: 0; background: transparent; border: none; gap: 0; }
.turno-banner .countdown-ring { width: 30px; height: 30px; }   /* barra de tiempo más pequeña */
.countdown-ring svg { width: 100%; height: 100%; display: block; }   /* el SVG escala con el contenedor */
.turno-banner .countdown-text { font-size: 11px; }

/* Feedback de la acción ("Has pasado / apostado X / te has retirado"). */
.accion-feedback {
  margin-top: 4px; padding: 8px 18px; border-radius: 9999px; align-self: center;
  background: rgba(245,208,32,0.14); border: 1px solid rgba(245,208,32,0.4);
  color: #f5d020; font-weight: 800; font-size: 14px; animation: winnerIn .25s ease;
}

/* Torneos: estado "ya inscrito" + desplegable de participantes */
.torneo-join.inscrito { background: rgba(0,200,83,0.16); color: #00e676; border: 1px solid rgba(0,200,83,0.45); box-shadow: none; }
.torneo-verpart { background: none; border: none; color: var(--on-surface-variant); font-size: 13px; cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 3px; }
.torneo-verpart .vp-chevron { transition: transform .15s; font-size: 11px; }
.torneo-participantes { margin: 8px 0 0; display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow-y: auto;
  background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; padding: 6px 10px; }
.torneo-participantes.oculto { display: none; }
.part-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; padding: 2px 0; }
.part-nombre { color: var(--on-surface); }
.part-ok { color: #00e676; font-size: 11px; font-weight: 700; }
.part-jugando { color: var(--primary); font-size: 11px; font-weight: 700; }
.part-out { color: #9a9a9a; font-size: 11px; font-weight: 700; }

/* ═══════════════════════════════════════════════
   MESA estilo referencia (diseño-mesa): pastilla + badge de acción de color
   ═══════════════════════════════════════════════ */
/* CAJÓN unificado (diseño-mesa): caja oscura redondeada + barra de acción de
   color a TODO el ancho pegada abajo · el avatar la solapa por arriba · los
   dorsos asoman detrás. seat-info ya no es la caja (transparente); la caja es
   .seat-box que envuelve info + barra de acción. */
.seat-player { position: relative; }
.seat-avatar-wrap { z-index: 3; }
.seat-box {
  position: relative; width: 100%; z-index: 2;
  margin-top: -14px;                                   /* el avatar solapa el cajón */
  background: rgba(13,14,18,0.82);                     /* glassmorphism premium (pod del mockup) */
  border: 1px solid rgba(242,202,80,0.18);
  border-radius: 11px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.55);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
}
.seat-info, .seat-info.glass-card {
  background: transparent !important; border: none !important; border-radius: 0 !important;
  padding: 13px 8px 5px !important; max-width: none;
}
.seat-name  { color: #fff; }
.seat-stack { color: #f5d020; }
/* Dorsos asomando por encima del cajón (detrás), como la referencia. */
.seat-cards {
  position: absolute; top: -10px; left: 8px;
  display: flex; gap: 0; margin: 0; z-index: 1;
}
/* Abanico de TODAS las cartas del rival (4) — rotación por --i/--n (como el héroe). */
.seat-cards .dorso-carta-img {
  width: 18px; height: auto; border-radius: 3px; box-shadow: 0 2px 5px rgba(0,0,0,.5);
  transform-origin: 50% 120%;
  transform: rotate(calc((var(--i, 0) - (var(--n, 1) - 1) / 2) * 11deg));
  margin: 0 -6px;
  filter: brightness(0.22) saturate(0.5) contrast(1.05);   /* dorso NEGRO para cartas VISTAS (el rojo no-visto lo sobreescribe a filter:none) */
}
/* Carta que el rival AÚN NO ha espiado (cardsLookedCount): el wrapper hereda el MISMO abanico;
   la carta se oscurece (menos brillo + B/N) y un ojo tachado rojo translúcido va centrado. */
.seat-cards .dorso-carta-slot {
  position: relative; display: inline-block; line-height: 0;
  transform-origin: 50% 120%;
  transform: rotate(calc((var(--i, 0) - (var(--n, 1) - 1) / 2) * 11deg));
  margin: 0 -6px;
}
.seat-cards .dorso-carta-slot .dorso-carta-img { transform: none; margin: 0; }
.card-unseen .dorso-carta-img { filter: brightness(0.32) grayscale(1); }
/* DORSO ROJO de carta oculta: NINGÚN filtro/cosmético genérico lo pisa (asset final). */
.dorso-oculto-rojo, .card-unseen .dorso-oculto-rojo, .seat-cards .dorso-oculto-rojo { filter: none !important; }
/* Botón de silencio (mute local) en el HUD del rival: esquina del avatar, sutil; rojo si muteado. */
.seat-mute {
  position: absolute; top: -4px; right: -4px; z-index: 7; padding: 0;
  width: 18px; height: 18px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 9px; line-height: 1;
  background: rgba(18,18,18,.7); color: #cfd6e0; opacity: .5;
  box-shadow: 0 1px 3px rgba(0,0,0,.55); transition: opacity .12s ease, background .12s ease;
}
.seat-avatar-wrap:hover .seat-mute { opacity: .95; }
.seat-mute.muteado { background: #dc2626; color: #fff; opacity: 1; }
/* FLEXING: marco dorado de FUEGO del nº1 del ranking (animado) + corona. Visible para toda la mesa. */
.seat-avatar-wrap.aro-top1 .seat-avatar {
  animation: top1fuego 1.4s ease-in-out infinite alternate;
}
@keyframes top1fuego {
  from { box-shadow: 0 0 0 3px #f9bd22, 0 0 12px 2px rgba(249,189,34,.8), 0 0 22px 5px rgba(255,110,0,.5); }
  to   { box-shadow: 0 0 0 3px #ffd75a, 0 0 20px 5px rgba(255,180,40,.95), 0 0 34px 9px rgba(255,90,0,.65); }
}
.seat-top1-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%); z-index: 8;
  font-size: 15px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); pointer-events: none;
}
.unseen-eye {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  line-height: 1; pointer-events: none;
  color: #0c0c0c; font-size: 14px;          /* ojo NEGRO tachado (visibility_off) sobre el dorso rojo */
  text-shadow: 0 0 2px rgba(255,255,255,.45);
}
/* Tamaño del icono del ojo proporcional a la carta del rival (font-size del material symbol). */
.seat-cards .unseen-eye { font-size: 13px; }
/* Barra de acción = PIE del cajón, full-width, color por tipo (CALL/RAISE/BET/FOLD). */
.seat-accion, .seat-ret {
  display: block; width: 100%; max-width: none; margin: 0;
  padding: 3px 0; border: none; border-top: 1px solid rgba(0,0,0,.28);
  border-radius: 0 0 9px 9px;
  font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; text-align: center;
  white-space: nowrap; background: #3a3f48; color: #cfd6e0; animation: accFade 2.5s ease forwards;
}
.seat-accion.acc-call  { background: #0f5a2a; color: #9af0b5; }   /* VEO/IGUALA → verde */
.seat-accion.acc-raise { background: #1d4e86; color: #bcdcff; }   /* ENVÍO/SUBE → AZUL (888) */
.seat-ret { background: #5a1f1f; color: #ffb0b0; }                /* SE TIRÓ → rojo */

/* ── ASIENTO LIBRE (placeholder en posición real; clic = sentarse si espectador) ── */
.seat-libre { cursor: pointer; opacity: .85; transition: opacity .15s, transform .15s; }
.seat-libre:hover { opacity: 1; transform: translateY(-2px); }
.seat-avatar-libre {
  background: rgba(255,255,255,0.04) !important;
  border: 2px dashed rgba(231,193,77,0.55) !important;
  color: rgba(231,193,77,0.85); font-size: 22px; font-weight: 400; box-shadow: none !important;
}
.seat-box-libre { background: rgba(8,14,26,0.55) !important; border-style: dashed !important; border-color: rgba(231,193,77,0.35) !important; }
.seat-name-libre { color: rgba(231,193,77,0.85) !important; font-size: 10px !important; font-weight: 700; letter-spacing: .03em; }

/* ── ABANICO de la mano del héroe (legible: rotación leve + solape moderado) ── */
.mano-jugador.abanico { gap: 0 !important; padding-top: 16px; align-items: flex-end; }
.mano-jugador.abanico .carta {
  animation: none;                 /* dealCard (fill both) forzaba rotateZ(0) y mataba el abanico */
  transform-origin: 50% 115%;
  transform: rotate(calc((var(--i, 0) - (var(--n, 1) - 1) / 2) * 8deg));
  margin: 0 -11px;
}
.mano-jugador.abanico .carta:hover {
  transform: rotate(calc((var(--i, 0) - (var(--n, 1) - 1) / 2) * 8deg)) translateY(-12px) scale(1.05);
  z-index: 20;
}

/* ── SLIDER VERTICAL de apuesta (a la derecha de APOSTAR; subida libre) ── */
.acciones-principales { align-items: flex-end; }   /* el slider sube por encima de los botones */
.bet-vert {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px;
  flex: 0 0 auto; padding: 0 2px;
}
.bet-vert-val { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 11px; color: #e7c14d; line-height: 1; white-space: nowrap; }
.bet-vert-range {
  writing-mode: vertical-lr; direction: rtl;                          /* vertical estándar: min abajo, max arriba (sustituye al obsoleto appearance:slider-vertical) */
  width: 24px; height: 92px;                                          /* altura FIJA: no estira los botones */
  accent-color: #e7c14d; cursor: pointer; margin: 0;
}
/* BOTE central estilo "Total pot". */
.mesa6-pot { background: rgba(8,14,26,0.85); border-color: rgba(255,255,255,0.12); }

/* Cabecera slim del lobby (sustituye a la promo de práctica). */
.lobby-welcome { display: flex; justify-content: center; padding: 10px 0 2px; }

/* Ráfaga de fichas del bote al ganador (un poco más grandes y lentas que la apuesta). */
.ficha-anim.ficha-gana { width: 28px; height: 28px; animation-duration: .5s; }

/* ── Menú de jugador (avatar) + modal de reporte ── */
.pm-menu { display: flex; flex-direction: column; gap: 6px; }
.pm-menu .pm-throws { display: flex; gap: 6px; flex-wrap: wrap; max-width: 220px; }
.pm-menu .pm-report { background: rgba(163,32,32,0.9); color: #fff; border: none; border-radius: 9px;
  padding: 8px 12px; font-weight: 800; font-size: 13px; cursor: pointer; }
.pm-menu .pm-report:active { transform: translateY(1px); }

.reportar-box { background: var(--surface-container, #16181d); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px; padding: 20px; max-width: 380px; width: calc(100% - 40px); margin: auto;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.reportar-box h3 { margin: 0 0 4px; color: #fff; }
.reportar-sub { margin: 0 0 14px; font-size: 13px; color: var(--on-surface-variant, #9aa0aa); }
.reportar-motivos { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.reportar-radio { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #e6e9ef; cursor: pointer;
  padding: 8px 10px; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; }
.reportar-radio:has(input:checked) { border-color: var(--primary, #f5d020); background: rgba(245,208,32,0.08); }
.reportar-nota { width: 100%; box-sizing: border-box; min-height: 64px; border-radius: 10px; padding: 10px;
  background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.12); color: #fff; resize: vertical; font-family: inherit; }
.reportar-acciones { display: flex; gap: 10px; margin-top: 14px; }
.reportar-acciones .btn-mesa, .reportar-acciones .btn-secundario { flex: 1; }
/* Punto rojo de aviso en el enlace admin del sidebar. */
.sidebar-link.tiene-aviso { position: relative; }
.sidebar-link.tiene-aviso::after { content: ''; position: absolute; top: 8px; right: 8px; width: 9px; height: 9px;
  border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 8px #ff3b3b; }

/* Tab "Tienda" en el footer de la mesa: acento dorado (CTA de compra). */
/* Tienda: icono-solo DORADO brillante, distintivo del resto. Ligeramente más a la derecha. */
.giley-tab-tienda,
.giley-tab-tienda.active {
  margin-left: 16px !important;                                                                /* separada/ a la derecha */
  background: radial-gradient(circle at 50% 40%, rgba(255,228,135,.55), rgba(199,146,0,.5)) !important;
  border: 1px solid rgba(255,233,168,.6) !important;
  box-shadow: 0 0 12px rgba(242,202,80,.5) !important;
  animation: tiendaBrillo 2.2s ease-in-out infinite;
}
.giley-tab-tienda .material-symbols-outlined { color: #fff5d6 !important; font-size: 21px !important; }
@keyframes tiendaBrillo {
  0%,100% { box-shadow: 0 0 10px rgba(242,202,80,.4); }
  50%     { box-shadow: 0 0 18px rgba(255,216,90,.8); }
}

/* ── Concierge IA (soporte flotante, glassmorphism dark/oro) ── */
.support-fab { position: fixed; right: 16px; bottom: calc(70px + env(safe-area-inset-bottom)); z-index: 999; width: 54px; height: 54px;
  border-radius: 50%; border: 1px solid rgba(245,208,32,.45); background: rgba(15,18,26,.85);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #f5d020;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0,0,0,.5); cursor: pointer; }
.support-fab.oculto { display: none; }
.support-panel { position: fixed; right: 16px; bottom: 84px; z-index: 95; width: min(360px, calc(100vw - 32px));
  height: min(520px, 70vh); display: flex; flex-direction: column; border-radius: 18px;
  border: 1px solid rgba(245,208,32,.3); background: rgba(12,15,22,.92);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 12px 40px rgba(0,0,0,.6); overflow: hidden; }
.support-panel.oculto { display: none; }
.support-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid rgba(245,208,32,.2); }
.support-title { color: #f5d020; font-weight: 800; }
.support-x { background: none; border: none; color: #cfd6e0; font-size: 18px; cursor: pointer; }
.support-msgs { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.sup-msg { max-width: 85%; padding: 8px 12px; border-radius: 14px; font-size: 14px; line-height: 1.35; white-space: pre-wrap; }
.sup-bot { align-self: flex-start; background: rgba(255,255,255,.07); color: #e6e9ef; border: 1px solid rgba(255,255,255,.08); }
.sup-user { align-self: flex-end; background: rgba(245,208,32,.15); color: #fff; border: 1px solid rgba(245,208,32,.35); }
.sup-typing { opacity: .6; letter-spacing: 2px; }
.sup-escalado { align-self: stretch; text-align: center; font-size: 12px; color: #f5d020; background: rgba(245,208,32,.08); border: 1px dashed rgba(245,208,32,.3); border-radius: 10px; padding: 6px; }
.support-input { display: flex; gap: 6px; padding: 10px; border-top: 1px solid rgba(255,255,255,.08); }
.support-input input { flex: 1; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.12); border-radius: 9999px; padding: 9px 14px; color: #fff; }
.support-send { width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--primary, #f5d020); color: #1a1408; display: flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; }
/* ── Soporte: contenedor scrollable + formulario estructurado + asistente colapsable ── */
.support-scroll { flex: 1; overflow-y: auto; }
.support-form { display: flex; flex-direction: column; gap: 7px; padding: 12px 14px; }
.sf-label { font-size: 12px; color: #b9c0cc; font-weight: 600; margin-top: 2px; }
.sf-select, .sf-textarea { background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.14); border-radius: 10px; color: #fff; padding: 10px 11px; font-size: 16px; width: 100%; }
.sf-select:focus, .sf-textarea:focus { outline: none; border-color: rgba(245,208,32,.6); }
.sf-textarea { min-height: 84px; resize: vertical; font-family: inherit; }
.sf-enviar { margin-top: 8px; background: linear-gradient(135deg, #f5d020, #c79200); color: #1a1408; border: none; border-radius: 10px; padding: 12px; font-weight: 800; font-size: 15px; cursor: pointer; }
.sf-enviar:disabled { opacity: .6; cursor: default; }
.sf-msg { font-size: 12.5px; margin: 4px 0 0; min-height: 16px; text-align: center; }
.support-ia { border-top: 1px solid rgba(255,255,255,.08); }
.support-ia > summary { cursor: pointer; padding: 11px 14px; color: #cfd6e0; font-size: 13px; font-weight: 600; list-style: none; user-select: none; }
.support-ia > summary::-webkit-details-marker { display: none; }
.support-ia > summary:hover { background: rgba(255,255,255,.04); }
.support-ia .support-msgs { height: 190px; flex: none; }

/* ── Ticket Dorado de Bienvenida (lobby) ── */
.welcome-ticket-slot { margin: 10px 0 4px; }
.welcome-ticket {
  width: 100%; display: flex; align-items: center; gap: 12px; cursor: pointer; text-align: left; color: #fff;
  padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(245,208,32,.5);
  background: linear-gradient(120deg, #1a1407 0%, #2a2008 45%, #3a2c08 100%);
  box-shadow: 0 6px 22px rgba(245,208,32,.22); position: relative; overflow: hidden;
  animation: wtPulse 2.6s ease-in-out infinite;
}
@keyframes wtPulse { 50% { box-shadow: 0 6px 30px rgba(245,208,32,.42); } }
.welcome-ticket .wt-ico { font-size: 30px; flex: 0 0 auto; filter: drop-shadow(0 0 6px rgba(245,208,32,.7)); }
.welcome-ticket .wt-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.welcome-ticket .wt-txt b { color: #ffe98a; font-size: 15px; }
.welcome-ticket .wt-txt small { color: #cdbf93; font-size: 12px; }
.welcome-ticket .wt-arrow { color: #f5d020; flex: 0 0 auto; }
.welcome-ticket:active { transform: scale(.985); }
/* ── Modal de registro al Torneo de Bienvenida ── */
.ticket-modal { max-width: 380px; text-align: center; position: relative; }
.ticket-modal-hero { font-size: 52px; filter: drop-shadow(0 0 12px rgba(245,208,32,.6)); margin-bottom: 4px; }
.ticket-modal-title { font-size: 1.15rem; line-height: 1.3; margin: 0 0 10px; color: #fff; }
.ticket-modal-title span { color: #ffe98a; letter-spacing: .04em; }
.ticket-modal-desc { font-size: 13.5px; color: #c9c2b8; line-height: 1.45; margin: 0 0 14px; }
.ticket-modal-stats { display: flex; gap: 12px; margin: 0 0 12px; }
.tms-item { flex: 1; background: rgba(245,208,32,.07); border: 1px solid rgba(245,208,32,.22); border-radius: 12px; padding: 10px; }
.tms-num { display: block; font-size: 1.2rem; font-weight: 800; color: #ffe98a; }
.tms-lbl { display: block; font-size: 11px; color: #9a9a9a; text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
.ticket-modal-msg { font-size: 12.5px; min-height: 16px; margin: 0 0 8px; }
.ticket-modal-acciones { display: flex; flex-direction: column; gap: 8px; }
.ticket-si { background: linear-gradient(135deg, #f5d020, #c79200); color: #1a1408; border: none; border-radius: 11px; padding: 13px; font-weight: 800; font-size: 15px; cursor: pointer; }
.ticket-si:disabled { opacity: .6; cursor: default; }
.ticket-no { background: transparent; color: #cfd6e0; border: 1px solid rgba(255,255,255,.18); border-radius: 11px; padding: 11px; font-weight: 700; cursor: pointer; }
/* ── Modal Info / Ranking del torneo ── */
.torneo-info-card { max-width: 420px; text-align: center; }
.ti-titulo { font-size: 1.1rem; color: #ffe98a; margin: 0 0 12px; }
.ti-stats { display: flex; gap: 8px; margin: 0 0 12px; }
.ti-stat { flex: 1; background: rgba(245,208,32,.07); border: 1px solid rgba(245,208,32,.2); border-radius: 10px; padding: 8px 4px; }
.ti-stat .ti-num { display: block; font-size: 1rem; font-weight: 800; color: #ffe98a; }
.ti-stat .ti-lbl { display: block; font-size: 10px; color: #9a9a9a; text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.ti-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.ti-tab { flex: 1; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: #cfd6e0; border-radius: 9px; padding: 8px; font-weight: 700; cursor: pointer; }
.ti-tab.active { background: rgba(245,208,32,.18); border-color: rgba(245,208,32,.5); color: #ffe98a; }
.ti-lista { max-height: 46vh; overflow-y: auto; text-align: left; }
.ti-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 14px; }
.ti-row.yo { background: rgba(245,208,32,.1); border-radius: 8px; }
.ti-row .ti-pos { width: 30px; color: #9a9a9a; font-weight: 700; text-align: center; flex: 0 0 auto; }
.ti-row .ti-nom { flex: 1; color: #e6e9ef; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ti-row .ti-stack { color: #ffe98a; font-weight: 700; white-space: nowrap; }
.ti-row .ti-bot { font-size: 9px; background: rgba(255,255,255,.1); color: #9a9a9a; padding: 1px 5px; border-radius: 6px; vertical-align: 1px; }
.ti-refresh { margin-top: 10px; width: 100%; background: rgba(255,255,255,.06); color: #cfd6e0; border: 1px solid rgba(255,255,255,.14); border-radius: 9px; padding: 9px; font-weight: 700; cursor: pointer; }
/* Filas del Top 10 / Liga clicables → perfil */
.fl-row.fl-click, .liga-row.fl-click { cursor: pointer; }
.fl-row.fl-click:hover, .liga-row.fl-click:hover { background: rgba(245,208,32,.12); border-radius: 8px; }
/* Mejores manos en el modal de perfil */
.pj-manos-titulo { font-size: .78rem; color: #ffe98a; font-weight: 700; margin: 8px 0 4px; text-align: left; }
.pj-mejores { display: flex; flex-direction: column; gap: 4px; }
.pj-mano-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #e6e9ef; background: rgba(255,255,255,.04); border-radius: 8px; padding: 5px 8px; }
.pj-mano-med { width: 16px; flex: 0 0 auto; }
.pj-mano-pot { color: #ffe98a; font-weight: 700; }
.pj-mano-pts { color: #9a9a9a; }
.pj-mano-rival { color: #9a9a9a; margin-left: auto; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45%; }
/* ── Lobby del Torneo (modal) ── */
.tlobby-card { max-width: 460px; }
.tlobby-titulo { font-size: 1.1rem; color: #ffe98a; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tlobby-estado { font-size: .68rem; font-weight: 800; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.1); color: #cfd6e0; }
.tlobby-estado.est-registering { background: rgba(54,208,122,.15); color: #7ee0a8; }
.tlobby-estado.est-running { background: rgba(245,93,93,.15); color: #ff9b9b; }
.tlobby-head { display: flex; gap: 8px; margin-bottom: 12px; }
.tlobby-stat { flex: 1; background: rgba(245,208,32,.07); border: 1px solid rgba(245,208,32,.2); border-radius: 10px; padding: 8px 4px; text-align: center; }
.tlobby-stat .tlobby-num { display: block; font-size: .9rem; font-weight: 800; color: #ffe98a; }
.tlobby-stat small { font-size: 10px; color: #9a9a9a; text-transform: uppercase; letter-spacing: .04em; }
.tlobby-lista-tit { font-size: .82rem; color: #cfd6e0; font-weight: 700; margin: 4px 0 6px; }
.tlobby-jugadores { max-height: 48vh; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.tl-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; font-size: 14px; border-bottom: 1px solid rgba(255,255,255,.05); }
.tl-row.tl-vip { background: linear-gradient(90deg, rgba(245,208,32,.12), transparent); }
.tl-row.yo { outline: 1px solid rgba(245,208,32,.4); }
.tl-row.tl-out { opacity: .5; }
.tl-pos { width: 26px; text-align: center; color: #9a9a9a; font-weight: 700; flex: 0 0 auto; }
.tl-nom { flex: 1; color: #e6e9ef; cursor: pointer; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-nom:hover { color: #ffe98a; text-decoration: underline; }
.tl-stack { color: #ffe98a; font-weight: 700; white-space: nowrap; }
.tl-reg { color: #9a9a9a; font-size: 12px; }
.tl-elim { color: #ff9b9b; font-size: 12px; }
.tl-ojo { background: rgba(255,255,255,.08); border: none; border-radius: 7px; cursor: pointer; font-size: 15px; padding: 3px 7px; flex: 0 0 auto; }
.tl-ojo:hover { background: rgba(245,208,32,.2); }
/* ── Botes secundarios (side pots) bajo el bote principal ── */
.side-pots { display: flex; flex-direction: column; gap: 3px; margin-top: 5px; align-items: center; }
.side-pots.oculto { display: none; }
.sp-row { display: flex; flex-direction: column; gap: 1px; background: rgba(0,0,0,.45); border: 1px solid rgba(245,208,32,.25); border-radius: 8px; padding: 3px 9px; backdrop-filter: blur(4px); }
.sp-row.sp-main { border-color: rgba(245,208,32,.45); }
.sp-line { display: flex; gap: 8px; align-items: baseline; font-size: 11px; }
.sp-lbl { color: #b9c0cc; text-transform: uppercase; letter-spacing: .03em; font-size: 9px; }
.sp-val { color: #f5d020; font-weight: 800; }
.sp-fuera { font-size: 9px; color: #ff7a7a; font-weight: 700; text-align: center; }   /* usernames que NO participan en este bote */

/* ── Recompensa de Emergencia (ad rewarded) ── */
.ad-box { background: var(--surface-container, #16181d); border: 1px solid rgba(245,208,32,.3);
  border-radius: 18px; padding: 22px; max-width: 360px; width: calc(100% - 40px); margin: auto; text-align: center;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.ad-box h3 { margin: 0 0 6px; color: #f5d020; }
.ad-sub { color: var(--on-surface-variant, #9aa0aa); font-size: 14px; margin: 0 0 14px; }
.ad-stage { height: 120px; border-radius: 12px; background: #0a0a0b; border: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.ad-stage.oculto { display: none; }
.ad-stage #ad-count { font-size: 2.4rem; font-weight: 800; color: #f5d020; }
.ad-msg { min-height: 18px; color: #e6e9ef; font-size: 14px; font-weight: 700; margin: 6px 0; }
.ad-acciones { display: flex; gap: 10px; }
.ad-acciones .btn-mesa, .ad-acciones .btn-secundario { flex: 1; }
.ad-restantes { color: var(--on-surface-variant, #9aa0aa); font-size: 12px; margin: 8px 0 0; }

/* El badge de acción (PASA/IGUALA/SUBE) se DEGRADA en ~2.5s (el server lo borra a la vez). */
@keyframes accFade { 0%, 55% { opacity: 1; } 100% { opacity: 0; } }
.seat-accion { animation: accFade 2.5s ease forwards; }

/* ── PlayerProfileModal (perfil al tocar avatar) ── */
.pj-box { background: rgba(12,15,22,.95); border: 1px solid rgba(245,208,32,.35); border-radius: 20px;
  padding: 22px; max-width: 360px; width: calc(100% - 40px); margin: auto; position: relative;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); animation: winnerIn .25s ease; box-shadow: 0 16px 50px rgba(0,0,0,.6); }
.pj-x { position: absolute; top: 10px; right: 12px; background: none; border: none; color: #cfd6e0; font-size: 18px; cursor: pointer; }
.pj-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.pj-avatar { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg,#2a2a2e,#1a1a1c);
  border: 2px solid var(--primary,#f5d020); display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; font-size: 18px; flex: 0 0 auto; }
.pj-nombre { color: #fff; font-weight: 800; font-size: 1.1rem; }
.pj-tier { color: var(--primary,#f5d020); font-size: .8rem; }
.pj-nivel { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: .8rem; color: #cfd6e0; }
.pj-xpbar { flex: 1; height: 7px; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; }
.pj-xp { height: 100%; background: var(--primary,#f5d020); width: 0; transition: width .4s; }
.pj-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 14px; }
.pj-stat { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 8px 4px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.pj-num { color: var(--primary,#f5d020); font-weight: 800; font-size: 1rem; }
.pj-stat small { color: #8a8f99; font-size: .62rem; text-transform: uppercase; }
.pj-logros { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; min-height: 26px; }
.pj-logro { background: rgba(245,208,32,.12); border: 1px solid rgba(245,208,32,.3); color: #f5d020; font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.pj-logro.pj-vacio { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); color: #8a8f99; }
.pj-skel { width: 70px; height: 22px; border-radius: 999px; background: linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.12),rgba(255,255,255,.05)); background-size: 200% 100%; animation: pjSkel 1.2s infinite; display: inline-block; }
@keyframes pjSkel { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.pj-acciones { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
.pj-acciones .btn-sm { background: rgba(255,255,255,.07); color: #e6e9ef; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 10px; font-size: .82rem; font-weight: 700; cursor: pointer; }
.pj-acciones .btn-sm:active { transform: translateY(1px); }
.pj-acciones .btn-sm:disabled { opacity: .4; cursor: default; }
.pj-acciones .pj-rep { background: rgba(163,32,32,.85); color: #fff; }
.pj-detalle { width: 100%; margin-top: 12px; background: none; border: 1px solid rgba(245,208,32,.3); color: #f5d020; border-radius: 10px; padding: 9px; font-size: .82rem; font-weight: 700; cursor: pointer; }

/* ── Menú de mesa consolidado (un botón → desplegable) + picker de diseños ── */
.mesa-menu-btn { position: static; flex: 0 0 auto; width: 40px; height: 40px;
  border-radius: 11px; background: rgba(13,17,24,.92); border: 1px solid #2e3a47; color: #9ecaff;   /* 888 azul */
  display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.mesa-menu { position: absolute; top: 56px; right: 10px; z-index: 131; display: flex; flex-direction: column; gap: 2px;
  background: rgba(11,15,22,.98); border: 1px solid #2e3a47; border-radius: 12px; padding: 6px; min-width: 200px;   /* 888 azul */
  box-shadow: 0 12px 36px rgba(0,0,0,.7); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); animation: winnerIn .18s ease; }
.mesa-menu.oculto { display: none; }
.mesa-menu-item { display: flex; align-items: center; gap: 10px; background: none; border: none; color: #e2e8f2;
  font-size: .9rem; padding: 10px 12px; border-radius: 9px; cursor: pointer; text-align: left; width: 100%; }
.mesa-menu-item:hover { background: rgba(58,110,165,.18); }
.mesa-menu-item .material-symbols-outlined { font-size: 19px; color: #9ecaff; }
.mesa-menu-item.mm-salir { color: #ff8a8a; }
.mesa-menu-item.mm-salir .material-symbols-outlined { color: #ff8a8a; }
.picker-diseno { position: absolute; top: 56px; right: 10px; z-index: 132; display: flex; flex-wrap: wrap; gap: 8px; max-width: 200px;
  background: rgba(12,15,22,.98); border: 1px solid rgba(245,208,32,.3); border-radius: 12px; padding: 10px; box-shadow: 0 12px 36px rgba(0,0,0,.7); }
.picker-diseno.oculto { display: none; }
.diseno-sw { width: 54px; height: 40px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; position: relative; overflow: hidden; padding: 0; }
.diseno-sw.activo { border-color: #f5d020; }
.diseno-sw small { position: absolute; bottom: 0; left: 0; right: 0; font-size: 8px; text-align: center; background: rgba(0,0,0,.55); color: #fff; padding: 1px 0; }

/* ── Banner "Volver a tu mesa" (sigues sentado mientras navegas el lobby) ── */
.volver-mesa { position: fixed; left: 50%; transform: translateX(-50%); bottom: 80px; z-index: 88;
  display: flex; align-items: center; gap: 8px; background: rgba(12,15,22,.95); border: 1px solid rgba(245,208,32,.45);
  border-radius: 9999px; padding: 6px 16px 6px 8px; color: #fff; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: winnerIn .25s ease; }
.volver-mesa.oculto { display: none; }
.vm-cartas { display: flex; }
.vm-carta { width: 22px; height: 31px; border-radius: 3px; margin-left: -8px; border: 1px solid rgba(255,255,255,.3); box-shadow: 0 1px 3px rgba(0,0,0,.5); background: #fff; object-fit: cover; }
.vm-carta:first-child { margin-left: 0; }
.vm-txt { font-size: .82rem; font-weight: 700; white-space: nowrap; }
.vm-txt b { color: #f5d020; }

/* ── Ficha de apuesta por jugador (cuánto ha puesto en la ronda) — estilo referencia ── */
.seat-bet { display: inline-flex; align-items: center; gap: 3px; margin: 3px auto 0; padding: 1px 9px; border-radius: 9999px;
  background: rgba(8,14,26,.92); border: 1px solid rgba(245,208,32,.45); color: #f5d020; font-size: 11px; font-weight: 800; width: fit-content; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.seat-bet.oculto { display: none; }
.hero-bet { margin: 4px auto 0; }

/* Banner "Volver" en estado de espera (pulso sutil = la mano sigue viva). */
.vm-dot { width: 9px; height: 9px; border-radius: 50%; background: #f5d020; display: inline-block; animation: pulse 1.1s ease-in-out infinite; }
.volver-mesa.vm-esperando { border-color: rgba(245,208,32,.3); }

/* Botón flotante "¡Unirse a la mesa!" (espectador → jugador / volver tras ausencia) */
.btn-unirse-mesa { position: absolute; left: 50%; bottom: 92px; transform: translateX(-50%); z-index: 80;
  display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg,#f5d020,#caa015); color: #1a1407;
  border: none; border-radius: 9999px; padding: 13px 26px; font-weight: 800; font-size: 15px; cursor: pointer;
  box-shadow: 0 6px 24px rgba(245,208,32,.45), 0 0 0 4px rgba(245,208,32,.15); animation: unirsePulse 1.6s ease-in-out infinite; }
.btn-unirse-mesa .material-symbols-outlined { font-size: 20px; }
.btn-unirse-mesa.oculto { display: none; }
@keyframes unirsePulse { 0%,100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.05); } }

/* Ojo espectador en tarjetas del lobby (secundario, neutro — no compite con el dorado). */
.premium-acciones { display: flex; gap: 8px; align-items: stretch; }
.premium-acciones .premium-sentarse { flex: 1; }
.premium-ojo, .er-ojo { background: rgba(255,255,255,.08); color: #cfd6e0; border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; }
.premium-ojo:hover, .er-ojo:hover { background: rgba(255,255,255,.14); color: #fff; }
.premium-ojo .material-symbols-outlined, .er-ojo .material-symbols-outlined { font-size: 19px; }
.er-ojo { width: 40px; }
.cap-esp { color: #9aa0aa; font-weight: 600; }

/* ══ Header de mesa en FLEXBOX (overlay a lo ancho; los hijos se reparten con flex, sin solaparse) ══ */
.mesa-topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 120;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 12px; box-sizing: border-box; pointer-events: none; }   /* la barra no bloquea el tapete… */
.mesa-topbar > * { pointer-events: auto; }                              /* …pero sus hijos sí son clicables */
.mtb-side { display: flex; align-items: center; gap: 12px; }
.mtb-left { flex: 1 1 0; pointer-events: none; }                        /* lados a flex:1 → el nombre queda en el CENTRO ABSOLUTO */
.mtb-icons { flex: 1 1 0; justify-content: flex-end; gap: 12px; flex-wrap: nowrap; }
/* El nombre de la mesa YA NO va en el header (banner digital) → ahora va GRABADO en el tapete (.mesa6-felt-nombre).
   El header conserva solo los iconos. Mantenemos el span por compatibilidad (title/tooltip) pero oculto. */
.mtb-name, .mtb-name.mtb-name-club { display: none !important; }
/* Nombre de la mesa GRABADO en la tela: tinta sobre el fieltro (emboss/deboss), visible pero sutil.
   (Sin mix-blend-mode: sobre fieltro oscuro lo dejaba casi invisible.) Centrado en la franja alta DESPEJADA
   del paño, por encima del bote y por debajo de los asientos de arriba. */
.mesa6-felt-nombre {
  position: absolute; left: 0; right: 0; top: 26%; z-index: 2; pointer-events: none; text-align: center;
  font-family: 'Sora', Georgia, serif; font-weight: 800; text-transform: uppercase;
  font-size: clamp(1rem, 3.2vw, 1.9rem); letter-spacing: .22em; white-space: nowrap;
  color: rgba(255,255,255,0.34);
  text-shadow: 0 1px 1px rgba(255,255,255,0.14), 0 -1px 1px rgba(0,0,0,0.5);
}
.mesa6-felt-nombre:empty { display: none; }
@media (max-width: 640px) { .mesa6-felt-nombre { top: 22%; letter-spacing: .16em; } }

/* Contador de espectadores: centrado en su propia fila, justo debajo del header (no se solapa con los iconos). */
.mesa-espec { position: absolute; top: 50px; left: 50%; transform: translateX(-50%); z-index: 60;
  display: inline-flex; align-items: center; gap: 3px;
  background: rgba(12,15,22,.82); border: 1px solid rgba(255,255,255,.12); color: #cfd6e0; border-radius: 9999px; padding: 3px 9px; font-size: 12px; font-weight: 700; }
.mesa-espec .material-symbols-outlined { font-size: 15px; }
.mesa-espec.oculto { display: none; }

/* Comparativa Free vs Elite en el modal del pase. */
.pase-compara { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 4px; }
.pase-compara-col { border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 12px; background: rgba(255,255,255,.03); }
.pase-compara-col.pcc-elite { border-color: rgba(245,208,32,.5); background: linear-gradient(135deg, rgba(245,208,32,.1), rgba(202,160,21,.05)); box-shadow: 0 0 0 1px rgba(245,208,32,.25), 0 6px 20px rgba(0,0,0,.4); }
.pcc-titulo { font-weight: 800; font-size: 13px; margin-bottom: 8px; color: #e6e9ef; }
.pcc-elite .pcc-titulo { color: #f5d020; }
.pcc-item { font-size: 11.5px; color: #cfd6e0; padding: 3px 0; }
.pcc-item.pcc-muted { color: #7a808a; }
.pcc-item.pcc-gold { color: #f5d020; font-weight: 700; }

/* Time Bank: cuenta atrás en azul cuando usas tu banco de tiempo (distinto del rojo de urgencia). */
#countdown-num.banco { color: #5ac8fa !important; }

/* Aro GOLD (perk del Pase Gold): anillo dorado giratorio + brillo alrededor del avatar (visible para todos). */
/* ESTATUS VIP (pase gold): NO un aro perimetral (se confundía con "es tu turno"). Ahora una estrella
   ⭐ discreta anclada en la esquina → borde del avatar limpio; el turno (verde) es lo único con aro. */
.seat-avatar-wrap.aro-gold { position: relative; }
.seat-avatar-wrap.aro-gold::before {
  content: "⭐"; position: absolute; top: -4px; right: -4px; inset: auto; z-index: 4;
  font-size: 13px; line-height: 1; background: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.75)); animation: none;
}
.seat-avatar-wrap.aro-gold > * { position: relative; z-index: 1; }
@keyframes aroGiro { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════════════════
   AVATAR EXCLUSIVO DEL ADMIN (mesa) — ÚNICO e inconfundible:
   anillo arcoíris exterior + anillo dorado interior girando AL REVÉS,
   aura pulsante (oro→rosa→violeta) y corona flotante. Además el HUD va
   BLINDADO: no clickable y con las fichas ocultas (privacidad del admin).
   ════════════════════════════════════════════════════════════════════ */
.seat-player.seat-admin { cursor: default; }
.seat-avatar-wrap.aro-admin { position: relative; }
.seat-avatar-wrap.aro-admin::before {            /* anillo exterior arcoíris */
  content: ""; position: absolute; inset: -6px; border-radius: 50%; z-index: 0;
  background: conic-gradient(from 0deg, #f5d020, #ff5dca, #8a5cff, #36e0ff, #4dff9e, #ffe98a, #f5d020);
  filter: drop-shadow(0 0 10px rgba(245,208,32,.9)); animation: aroGiro 2.4s linear infinite;
}
.seat-avatar-wrap.aro-admin::after {             /* anillo interior dorado, sentido inverso */
  content: ""; position: absolute; inset: -1px; border-radius: 50%; z-index: 0;
  background: conic-gradient(from 180deg, #1a1407, #caa015, #fff7d6, #caa015, #1a1407);
  animation: aroGiroRev 3.6s linear infinite;
}
.seat-avatar-wrap.aro-admin > * { position: relative; z-index: 1; }
@keyframes aroGiroRev { to { transform: rotate(-360deg); } }
.seat-avatar.avatar-admin {
  border: 2px solid #1a1407 !important;
  box-shadow: 0 0 14px rgba(245,208,32,.9), inset 0 0 8px rgba(255,247,214,.5);
  animation: adminPulse 1.8s ease-in-out infinite;
}
@keyframes adminPulse { 50% { box-shadow: 0 0 22px rgba(255,93,202,.9), 0 0 30px rgba(138,92,255,.7), inset 0 0 10px rgba(255,247,214,.7); } }
.seat-admin-badge {                              /* corona flotante */
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  z-index: 4; font-size: 20px; line-height: 1; pointer-events: none;
  color: #ffe98a; text-shadow: 0 0 8px rgba(245,208,32,1), 0 0 3px #000;
  animation: adminCrown 2.6s ease-in-out infinite;
}
@keyframes adminCrown { 0%,100% { transform: translateX(-50%) translateY(0) rotate(-6deg); } 50% { transform: translateX(-50%) translateY(-4px) rotate(6deg); } }
.seat-name-admin { color: #ffe98a !important; text-shadow: 0 0 7px rgba(245,208,32,.7), 0 1px 3px rgba(0,0,0,.92) !important; font-weight: 800 !important; }
.seat-titulo.seat-titulo-admin {
  background: linear-gradient(135deg, #f5d020, #ff5dca, #8a5cff); -webkit-background-clip: text; background-clip: text;
  color: transparent; font-weight: 900; letter-spacing: .06em; font-size: 9px; text-transform: uppercase;
}
.seat-stack-oculto { color: var(--on-surface-variant) !important; font-weight: 600; font-style: italic; opacity: .9; }

/* ── Avatar EXCLUSIVO del admin en SU PROPIO HUD (se ve fancy a sí mismo) ──
   La FOTO va SIEMPRE contenida (overflow:hidden) y centrada; el anillo arcoíris vive DENTRO del
   avatar (no se desborda de la píldora). La corona se ancla a la píldora #hero-hud (no al avatar)
   para flotar por encima sin romper la contención de la foto. */
.hero-hud-avatar.hero-admin {
  position: relative; overflow: hidden; border: none !important;
  box-shadow: 0 0 12px rgba(245,208,32,.85);
  animation: adminPulse 1.8s ease-in-out infinite;
}
.hero-hud-avatar.hero-admin::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: 0;
  background: conic-gradient(from 0deg, #f5d020, #ff5dca, #8a5cff, #36e0ff, #4dff9e, #ffe98a, #f5d020);
  animation: aroGiro 2.4s linear infinite;
}
.hero-hud-avatar.hero-admin > img, .hero-hud-avatar.hero-admin > span {
  position: relative; z-index: 1; width: calc(100% - 7px); height: calc(100% - 7px);
  margin: 3.5px; border-radius: 50%; object-fit: cover;   /* foto centrada con el aro asomando 3.5px */
}
.hero-hud-avatar.hero-admin > span { display: flex; align-items: center; justify-content: center; background: #1a1407; color: #ffe98a; }
/* Corona flotante anclada a la PÍLDORA (no al avatar) → no afecta a la contención de la foto. */
#hero-hud { position: relative; }
.hero-admin-crown {
  position: absolute; top: -10px; left: 25px; transform: translateX(-50%); z-index: 4;
  font-size: 16px; color: #ffe98a; text-shadow: 0 0 8px rgba(245,208,32,1), 0 0 3px #000;
  animation: adminCrown 2.6s ease-in-out infinite; pointer-events: none;
}
.hero-nombre-admin { color: #ffe98a !important; text-shadow: 0 0 7px rgba(245,208,32,.7); font-weight: 800; }

/* Aro Gold del HÉROE (tu propio avatar): glow dorado pulsante. */
.hero-hud-avatar.aro-gold-hero { box-shadow: 0 0 0 3px #f5d020, 0 0 12px rgba(245,208,32,.85); animation: aroPulseHero 1.8s ease-in-out infinite; }
@keyframes aroPulseHero { 50% { box-shadow: 0 0 0 3px #ffe98a, 0 0 20px rgba(245,208,32,1); } }

/* ── Hucha HERO: cerdo dorado gigante, flotante, brillante, que engorda con el saldo ── */
.hucha-hero { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 8px auto 24px; cursor: pointer; position: relative; padding: 18px 0 6px; width: fit-content; }
.hucha-glow { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); width: 230px; height: 230px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(245,208,32,.5), rgba(245,208,32,.16) 45%, transparent 68%); filter: blur(6px); animation: huchaGlow 3s ease-in-out infinite; }
.hucha-pig-wrap { position: relative; z-index: 1; animation: huchaFloat 3.4s ease-in-out infinite; }
.hucha-pig { display: block; width: 152px; height: auto; transform: scale(var(--pig-scale, 1)); transform-origin: bottom center; transition: transform .6s ease; filter: drop-shadow(0 10px 22px rgba(0,0,0,.5)); }
.hucha-amt { position: relative; z-index: 1; font-family: 'Sora', sans-serif; font-weight: 800; font-size: 2rem; color: #f5d020; text-shadow: 0 2px 10px rgba(245,208,32,.45); margin-top: 6px; }
.hucha-lbl { position: relative; z-index: 1; font-size: .72rem; color: var(--on-surface-variant); text-transform: uppercase; letter-spacing: .07em; }
.hucha-hero:active .hucha-pig-wrap { transform: scale(.96); }
@keyframes huchaFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes huchaGlow { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@media (max-width: 520px) { .hucha-pig { width: 132px; } .hucha-amt { font-size: 1.7rem; } .hucha-glow { width: 190px; height: 190px; } }

/* El Perfil es un modal "base": cualquier modal abierto DESDE el perfil (Hucha, Exclusivos,
   Desafíos…) debe salir POR ENCIMA. Bajamos el perfil justo por debajo del z-index de modales. */
#modal-perfil { z-index: 8990; }

/* Leaderboard incrustado en el footer (Top 5 de la liga). */
.footer-leaderboard:empty { display: none; }
.footer-leaderboard { max-width: 380px; margin: 0 auto 8px; padding: 12px 14px; border: 1px solid rgba(245,208,32,.28); border-radius: 14px;
  background: linear-gradient(180deg, rgba(245,208,32,.07), rgba(245,208,32,.02)); }
.footer-leaderboard .fl-title { font-family: 'Sora', sans-serif; font-weight: 800; color: #f5d020; font-size: .92rem; margin-bottom: 8px; text-align: center; letter-spacing: .02em; }
.footer-leaderboard .fl-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .82rem; color: var(--on-surface); padding: 5px 7px; border-radius: 8px; }
.footer-leaderboard .fl-row + .fl-row { border-top: 1px solid rgba(255,255,255,.04); }
.footer-leaderboard .fl-row.fl-yo { background: linear-gradient(90deg, rgba(245,197,66,.16), transparent); }
.footer-leaderboard .fl-row b { color: #f5d020; white-space: nowrap; font-weight: 800; }
.footer-leaderboard .fl-nom { display: flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.footer-leaderboard .fl-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.fl-rank { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.07); font-size: 11px; font-weight: 800; color: #9aa0ad; }
.fl-dot { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px #22c55e; flex: 0 0 auto; animation: pulse-dot 1.8s ease-in-out infinite; }
.fl-amigo { font-size: 12px; flex: 0 0 auto; }
.fl-retar { border: none; cursor: pointer; background: linear-gradient(135deg, #ff5d6c, #b8333f); color: #fff; font-size: 13px;
  width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 3px 9px rgba(255,93,108,.4); transition: transform .12s; }
.fl-retar:hover { transform: scale(1.12); } .fl-retar:active { transform: scale(.95); }
/* TICKER global (anuncios arriba) → la gente entra de espectador. */
.ticker-global {
  position: fixed; top: 0; left: 50%; transform: translate(-50%, -120%); z-index: 2000;
  display: flex; align-items: center; gap: 10px; max-width: 94vw;
  background: linear-gradient(110deg, #2a0f3a, #1a0e26); border: 1px solid rgba(255,93,108,.5);
  border-top: none; border-radius: 0 0 14px 14px; padding: 9px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.55);
  transition: transform .32s cubic-bezier(.2,.9,.3,1.3);
}
.ticker-global.tg-in { transform: translate(-50%, 0); }
.ticker-global .tg-ico { font-size: 1.1rem; }
.ticker-global .tg-txt { font-size: .85rem; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticker-global .tg-ver { border: none; cursor: pointer; background: linear-gradient(135deg, #ff5d6c, #b8333f); color: #fff; font-weight: 800; font-size: .78rem; padding: 5px 11px; border-radius: 999px; flex: 0 0 auto; white-space: nowrap; }
/* Banner de RIVALIDAD durante el duelo (Tú vs X: 7-4) + marcador del modal de fin. */
.duelo-rival-hud {
  position: fixed; top: 58px; left: 50%; transform: translateX(-50%); z-index: 88; pointer-events: none;
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(180deg, rgba(40,16,24,.95), rgba(26,12,18,.95));
  border: 1px solid rgba(255,93,108,.45); border-radius: 999px; padding: 5px 14px; box-shadow: 0 6px 18px rgba(0,0,0,.5);
}
.duelo-rival-hud { flex-direction: column; gap: 2px; padding: 5px 16px; }
.duelo-rival-hud .drh-lbl { font-size: 12px; font-weight: 700; color: #ffd9a8; }
.duelo-rival-hud .drh-revs { display: flex; gap: 14px; align-items: center; }
.duelo-rival-hud .drh-rev { display: flex; align-items: center; gap: 5px; }
.duelo-rival-hud .drh-rl { font-size: 10px; font-weight: 800; color: #cbb88a; max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duelo-rival-hud .drh-tambor { display: inline-flex; gap: 2px; }
.duelo-rival-hud .drh-recam { width: 7px; height: 7px; border-radius: 50%; background: #3a3340; border: 1px solid #5b5366; }
.duelo-rival-hud .drh-recam.on { background: radial-gradient(circle at 35% 30%, #ff9a52, #c0392b); border-color: #ff6b4a; box-shadow: 0 0 4px rgba(255,93,76,.8); }
.duelo-rival-hud .drh-sub { font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #ff8a96; }
/* 🔫 RULETA del duelo — overlay dramático a pantalla completa */
.ruleta-ov { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, rgba(40,16,24,.92), rgba(8,5,10,.96)); backdrop-filter: blur(3px); animation: ruletaIn .3s ease; }
.ruleta-ov.ruleta-fade { animation: ruletaOut .55s ease forwards; }
@keyframes ruletaIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ruletaOut { to { opacity: 0; } }
.ruleta-card { text-align: center; padding: 18px 22px; }
.ruleta-titulo { font-family: 'Sora', sans-serif; font-weight: 900; font-size: 15px; letter-spacing: .12em; color: #ff5d6c; text-shadow: 0 2px 12px rgba(255,93,108,.5); }
.ruleta-quien { margin-top: 4px; font-size: 19px; font-weight: 900; color: #fff; }
.ruleta-tambor { position: relative; width: 150px; height: 150px; margin: 18px auto; border-radius: 50%;
  background: conic-gradient(from 0deg, #3a3038, #1c171d, #3a3038, #1c171d, #3a3038, #1c171d, #3a3038);
  border: 6px solid #6b6070; box-shadow: 0 0 26px rgba(0,0,0,.7), inset 0 0 18px rgba(0,0,0,.8); }
.ruleta-tambor.girando { animation: tamborGira .5s linear infinite; }
@keyframes tamborGira { to { transform: rotate(360deg); } }
.ruleta-aguja { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); width: 0; height: 0;
  border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 16px solid #f5c542; z-index: 2; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.ruleta-recamara { position: absolute; top: 50%; left: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  background: #15110f; border: 2px solid #4a414f; }
.ruleta-recamara.cargada { background: radial-gradient(circle at 35% 30%, #ffb06a, #b8333f); border-color: #ff7a52; box-shadow: 0 0 7px rgba(255,93,76,.9); }
.ruleta-recamara:nth-child(2) { transform: rotate(0deg) translateY(-50px) rotate(0deg); }
.ruleta-recamara:nth-child(3) { transform: rotate(60deg) translateY(-50px) rotate(-60deg); }
.ruleta-recamara:nth-child(4) { transform: rotate(120deg) translateY(-50px) rotate(-120deg); }
.ruleta-recamara:nth-child(5) { transform: rotate(180deg) translateY(-50px) rotate(-180deg); }
.ruleta-recamara:nth-child(6) { transform: rotate(240deg) translateY(-50px) rotate(-240deg); }
.ruleta-recamara:nth-child(7) { transform: rotate(300deg) translateY(-50px) rotate(-300deg); }
.ruleta-balas { font-size: 12px; font-weight: 700; color: #ffd9a8; }
.ruleta-estado { margin-top: 12px; font-size: 26px; font-weight: 900; color: #fff; min-height: 32px; font-family: 'Sora', sans-serif; }
.ruleta-ov.ruleta-bang { animation: bangFlash .5s ease 2; }
@keyframes bangFlash { 0%,100% { background: radial-gradient(circle at 50% 40%, rgba(40,16,24,.92), rgba(8,5,10,.96)); } 50% { background: rgba(192,57,43,.85); } }
@media (prefers-reduced-motion: reduce) {
  .ruleta-tambor.girando { animation: none; }
  .ruleta-ov, .ruleta-ov.ruleta-bang { animation: none; }
}
.drh-marcador { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 12px 0 4px; font-family: 'Sora', sans-serif; }
.drh-marcador b { font-size: 1.9rem; font-weight: 900; color: #cbb88a; }
.drh-marcador b.drh-win { color: #f5c542; }
.drh-marcador .drh-side { font-size: .9rem; color: #cbb88a; font-weight: 700; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drh-marcador .drh-sep { color: #6b6478; }

/* ── Amigos: botón del footer + modal ── */
.footer-amigos-btn { display: block; margin: 0 auto 14px; padding: 9px 22px; border: none; border-radius: 9999px; cursor: pointer; font-weight: 800; font-size: 14px; color: #1a1400; background: linear-gradient(110deg,#c79200,#f5d020 50%,#c79200); box-shadow: 0 4px 14px rgba(212,175,55,.4); }
.footer-amigos-btn:active { transform: scale(.96); }
.amigos-card { max-width: 440px; width: 92%; max-height: 80vh; overflow-y: auto; text-align: left; }
.amigos-titulo { text-align: center; margin: 0 0 14px; }
.amigos-buscar input { width: 100%; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--outline-variant); background: rgba(0,0,0,.3); color: var(--on-surface); font-size: 14px; }
.amigos-resultados { margin: 8px 0; }
.am-res, .am-row { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid rgba(255,255,255,.06); }
.am-res .am-nom, .am-row .am-nom { font-weight: 700; color: var(--on-surface); }
.am-add { margin-left: auto; padding: 6px 12px; border: none; border-radius: 9999px; background: #2e7d32; color: #fff; font-weight: 700; font-size: 12px; cursor: pointer; }
.amigos-lista-titulo { margin: 14px 0 6px; font-weight: 800; color: #f5d020; font-size: .9rem; }
.am-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.am-dot.on { background: #4ade80; box-shadow: 0 0 7px rgba(74,222,128,.8); }
.am-dot.off { background: #ef4444; }
.am-info { display: flex; flex-direction: column; line-height: 1.25; }
.am-est { font-size: .72rem; color: #4ade80; }
.am-est.off { color: #ef8a8a; }
.am-est.jugando { color: #f5d020; }
.am-ojo { margin-left: auto; background: rgba(245,208,32,.15); border: 1px solid rgba(245,208,32,.4); color: #f5d020; border-radius: 9px; width: 34px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.am-ojo .material-symbols-outlined { font-size: 19px; }
.am-quitar { background: none; border: none; color: var(--on-surface-variant); cursor: pointer; font-size: 15px; padding: 4px 8px; }
.am-row .am-ojo + .am-quitar { margin-left: 4px; }
.am-row .am-quitar { margin-left: auto; }
.am-row .am-ojo ~ .am-quitar { margin-left: 4px; }

/* ── Buzón de mensajes + badge ── */
.msg-badge { display: inline-block; min-width: 18px; height: 18px; line-height: 18px; padding: 0 5px; border-radius: 9999px; background: #ef4444; color: #fff; font-size: 11px; font-weight: 800; text-align: center; margin-left: 4px; }
.mensajes-lista { max-height: 60vh; overflow-y: auto; }
.msg-row { display: flex; align-items: flex-start; gap: 10px; padding: 11px 6px; border-bottom: 1px solid rgba(255,255,255,.07); }
.msg-row.msg-noleido { background: rgba(245,208,32,.06); }
.msg-ic { font-size: 20px; flex-shrink: 0; }
.msg-cuerpo { flex: 1; min-width: 0; }
.msg-tit { font-weight: 800; color: var(--on-surface); font-size: 14px; }
.msg-txt { color: var(--on-surface-variant); font-size: 13px; margin-top: 2px; }
.msg-acc { display: flex; gap: 6px; flex-shrink: 0; }
.msg-aceptar { background: #2e7d32; color: #fff; border: none; border-radius: 8px; padding: 6px 11px; font-weight: 700; font-size: 12px; cursor: pointer; }
.msg-rechazar { background: rgba(255,255,255,.08); color: var(--on-surface-variant); border: none; border-radius: 8px; padding: 6px 10px; font-size: 12px; cursor: pointer; }
.msg-borrar { background: none; border: none; color: var(--on-surface-variant); font-size: 15px; cursor: pointer; flex-shrink: 0; }
/* Badge de AMIGO en la mesa (distintivo al cruzarte con un amigo) */
.seat-amigo-badge { position: absolute; top: -6px; left: -6px; font-size: 15px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); z-index: 3; }

/* ── Etiqueta(s) BOTE en DORADO degradado, como el banner Giley.io ── */
.mesa6-pot-label,
.side-pots .sp-lbl {
  background: linear-gradient(90deg, #caa015 0%, #f5d020 45%, #fff7d6 50%, #f5d020 55%, #caa015 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  font-weight: 800;
  animation: boteShimmer 3.5s linear infinite;
}
@keyframes boteShimmer { to { background-position: 200% center; } }

/* Pestaña multimesa "ya estaba abierta" → enfocada: anillo dorado + pulso breve (Focus if Exists). */
.mtab.mtab-pulse { box-shadow: 0 0 0 2px #f5d020, 0 0 14px rgba(245,208,32,.85); animation: mtabPulse .45s ease-in-out 0s 2; }
@keyframes mtabPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.09); } }

/* Botones de redes sociales del club en el lobby (Telegram / Discord / WhatsApp). */
.social-links { margin: 14px 0; padding: 12px 14px; border: 1px solid #243; border-radius: 14px; background: rgba(255,255,255,.02); }
.social-links-tit { font-weight: 700; font-size: .95rem; margin-bottom: 10px; opacity: .9; }
.social-links-row { display: flex; flex-wrap: wrap; gap: 10px; }
.social-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px; font-weight: 700; color: #fff; text-decoration: none; transition: transform .12s ease, filter .12s ease; flex: 1 1 auto; justify-content: center; min-width: 120px; }
.social-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
.social-btn-ico { font-size: 1.15rem; }
.social-btn-img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; display: block; }
.social-reward { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding: 10px 12px; border: 1px dashed #caa24a; border-radius: 12px; background: rgba(202,162,74,.08); }
.social-reward-txt { font-size: .9rem; color: #f0e6cf; }
.social-reward-btn { background: linear-gradient(180deg,#f5d77a,#caa24a); color: #2a1e00; border: none; border-radius: 10px; padding: 9px 16px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.social-reward-btn:disabled { opacity: .55; cursor: not-allowed; filter: grayscale(.3); }
.social-tg { background: linear-gradient(135deg, #2AABEE, #229ED9); }
.social-dc { background: linear-gradient(135deg, #5865F2, #4752C4); }
.social-wa { background: linear-gradient(135deg, #25D366, #1DA851); }

/* ── CAJERO DEL ANFITRIÓN: FAB + drawer lateral (solo el host de la mesa) ── */
.host-cajero-fab {
  /* POR ENCIMA del HUD de acción (que reserva ~190px abajo) → no queda tapado. */
  position: fixed; right: 14px; bottom: calc(var(--mesa-hud-h, 190px) + 16px); z-index: 1200;
  width: 56px; height: 56px; border-radius: 50%; border: 1px solid #caa24a; cursor: pointer;
  background: linear-gradient(160deg, #1c1407, #2a1e0a); color: #f5d77a; font-size: 24px;
  box-shadow: 0 6px 18px rgba(0,0,0,.5), 0 0 16px rgba(202,162,74,.45); display: flex; align-items: center; justify-content: center;
}
.host-cajero-fab:active { transform: scale(.94); }
.host-cajero-badge {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px;
  background: #dc2626; color: #fff; border-radius: 11px; font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.host-cajero-back { position: fixed; inset: 0; z-index: 1250; background: rgba(0,0,0,.35); }
.host-cajero-drawer {
  position: fixed; right: 0; top: 0; height: 100dvh; width: min(340px, 88vw); z-index: 1260;
  background: #0f0d0a; border-left: 1px solid #caa24a; box-shadow: -12px 0 40px rgba(0,0,0,.55);
  transform: translateX(100%); transition: transform .22s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom, 0px);
}
.host-cajero-drawer.open { transform: translateX(0); }
.host-cajero-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 16px 16px calc(16px + env(safe-area-inset-top, 0px)); border-bottom: 1px solid rgba(202,162,74,.25);
  color: #f5d77a; font-weight: 800; font-size: .98rem;
}
.host-cajero-head button { background: rgba(255,255,255,.08); color: #e8e2d4; border: none; border-radius: 9px; width: 34px; height: 34px; font-size: 16px; cursor: pointer; }
#host-cajero-lista { flex: 1; overflow-y: auto; padding: 10px 14px; }
.host-cajero-vacio { color: #9a9a9a; font-size: 13px; text-align: center; padding: 24px 0; }
.host-cajero-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 12px; margin-bottom: 8px; border-radius: 12px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
}
.host-cajero-info { display: flex; flex-direction: column; min-width: 0; }
.host-cajero-info b { color: #f0e6cf; font-size: 14px; }
.host-cajero-info span { color: #b9ad92; font-size: 12px; }
.host-cajero-acc { display: flex; gap: 6px; flex-shrink: 0; }
.host-cajero-acc button { width: 38px; height: 38px; border-radius: 10px; border: none; font-size: 17px; cursor: pointer; }
.host-cajero-acc .hc-ap { background: rgba(54,208,122,.18); border: 1px solid rgba(54,208,122,.5); }
.host-cajero-acc .hc-re { background: rgba(220,38,38,.16); border: 1px solid rgba(220,38,38,.5); }

/* ── ANFITRIÓN: botón "Crear Mesa Privada" + modal de creación ── */
.host-crear-mesa-btn {
  display: block; width: calc(100% - 24px); margin: 12px auto 4px; padding: 14px; box-sizing: border-box;
  background: linear-gradient(135deg, #5a3fa0, #7e5bd0); color: #fff; border: none; border-radius: 14px;
  font-weight: 800; font-size: 1rem; cursor: pointer; box-shadow: 0 6px 18px rgba(126,91,208,.35);
}
.host-crear-mesa-btn:active { transform: scale(.98); }
/* Botón "Crear Torneo" — dorado, MISMO ancho/caja que "Crear Mesa" (par alineado). */
.host-crear-torneo-btn {
  background: linear-gradient(135deg, #b8860b, #f2ca50); color: #2a1c00;
  box-shadow: 0 6px 18px rgba(242,202,80,.35);
  width: calc(100% - 24px); margin: 8px auto 4px; box-sizing: border-box;
}
.cmh-overlay {
  position: fixed; inset: 0; z-index: 2147483645; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.74); backdrop-filter: blur(3px); padding: 18px; overflow: auto;
}
.cmh-card {
  max-width: 420px; width: 100%; background: linear-gradient(160deg, #15121c, #1c1726);
  border: 1px solid #5a4a7a; border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.6); padding: 22px;
}
.cmh-card h2 { margin: 0 0 14px; color: #c9b3ff; font-size: 1.2rem; }
.cmh-card label { display: block; font-size: .78rem; color: #b9add6; margin: 10px 0 4px; font-weight: 700; }
.cmh-card input, .cmh-card select {
  width: 100%; padding: 10px 12px; border-radius: 9px; border: 1px solid #3a3350;
  background: #0e0c14; color: #fff; font-size: .95rem; box-sizing: border-box;
}
.cmh-row { display: flex; gap: 10px; }
.cmh-row > div { flex: 1; min-width: 0; }
.cmh-nota { font-size: .75rem; color: #8a82a5; margin: 10px 0 0; line-height: 1.4; }
.cmh-msg { color: #f87171; font-size: .82rem; min-height: 1em; margin: 8px 0 0; }
.cmh-acc { display: flex; gap: 8px; margin-top: 16px; }
.cmh-btn-sec { flex: 1; padding: 12px; border-radius: 11px; border: 1px solid #3a3350; background: #221d30; color: #d8d0ee; font-weight: 700; cursor: pointer; }
.cmh-btn-pri { flex: 1; padding: 12px; border-radius: 11px; border: none; background: linear-gradient(135deg,#5a3fa0,#7e5bd0); color: #fff; font-weight: 800; cursor: pointer; }
.cmh-btn-pri:disabled { opacity: .6; cursor: not-allowed; }

/* ── Badge "Club privado" en la esquina de la mesa (solo mesas de Anfitrión) ── */
.mesa-club-badge {
  position: absolute; top: 10px; left: 10px; z-index: 40;
  background: linear-gradient(135deg, rgba(90,63,160,.92), rgba(126,91,208,.92)); color: #fff;
  border: 1px solid rgba(201,179,255,.5); border-radius: 999px; padding: 6px 13px; line-height: 1;
  font-size: 12px; font-weight: 800; cursor: pointer; white-space: nowrap;
  /* NUNCA invade el cluster de iconos de la derecha (3 iconos + márgenes ≈ 170px) → ellipsis si el nombre es largo */
  max-width: calc(100vw - 178px);
  overflow: hidden; text-overflow: ellipsis; box-shadow: 0 3px 10px rgba(0,0,0,.45);
}
.mesa-club-badge:active { transform: scale(.96); }

/* ══ Anfitrión: botón crear (reposicionado), FAB footer, "Mis Mesas Privadas", "Volver a mi mesa" ══ */
/* Botón crear-mesa entre el perfil y el GileyPass (el .host-crear-mesa-btn base ya existe arriba). */
#host-crear-mesa { margin: 8px 0 10px; }

/* FAB flotante: esquina inferior derecha, apilado por encima del FAB de soporte/chat. Solo lo inyecta JS para roles host. */
.host-crear-fab {
  position: fixed; right: 20px; bottom: calc(136px + env(safe-area-inset-bottom)); z-index: 1000;   /* ARRIBA del FAB de soporte (70px), que va encima del tabbar (footer) */
  width: 60px; height: 60px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, #7e5bd0, #5a3fa0); color: #fff;
  box-shadow: 0 8px 22px rgba(90,63,160,.55), 0 2px 6px rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center; transition: transform .15s, filter .15s;
}
.host-crear-fab:hover { filter: brightness(1.1); transform: translateY(-2px); }
.host-crear-fab:active { transform: scale(.94); }
.host-crear-fab .hcf-ico { font-size: 26px; line-height: 1; }
/* Icono de MESA (neón sobre negro): mix-blend-mode screen → el negro se vuelve transparente sobre el morado. */
.host-crear-fab .hcf-mesa-img { width: 44px; height: auto; mix-blend-mode: screen; pointer-events: none; display: block; }
.host-crear-fab .hcf-plus {
  position: absolute; top: 6px; right: 8px; z-index: 2; font-size: 16px; font-weight: 900; color: #fff;
  background: #2ec27e; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
}

/* Sección "Mis Mesas Privadas" */
.host-mis-mesas {
  margin: 4px 0 14px; padding: 12px; border-radius: 14px;
  background: linear-gradient(160deg, rgba(90,63,160,.16), rgba(20,16,28,.4));
  border: 1px solid rgba(126,91,208,.35);
}
.host-mis-mesas .hmm-head { font-weight: 900; color: #d9c7ff; font-size: 14px; margin-bottom: 8px; }
.host-mis-mesas .hmm-row {
  width: 100%; display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
  background: rgba(126,91,208,.14); border: 1px solid rgba(126,91,208,.3); border-radius: 10px;
  padding: 10px 12px; color: #efe7ff; cursor: pointer; transition: background .12s;
}
.host-mis-mesas .hmm-row:hover { background: rgba(126,91,208,.28); }
.host-mis-mesas .hmm-nom { font-weight: 700; flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.host-mis-mesas .hmm-meta { font-size: 12px; color: #c3b0e8; }
.host-mis-mesas .hmm-go { font-size: 12px; font-weight: 800; color: #2ec27e; }

/* "Volver a mi mesa privada" — CINTA elegante entre Perfil y GileyPass. z-index moderado, padding cómodo. */
.volver-mesa-priv {
  position: relative; z-index: 5; width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 10px 0; padding: 14px 18px 14px 22px; cursor: pointer; overflow: hidden;
  border: none; border-radius: 12px; color: #eafff4; font-weight: 800; font-size: 13.5px; text-align: left;
  background: linear-gradient(100deg, #1c8f59 0%, #25b06f 45%, #15663f 100%);
  box-shadow: 0 6px 18px rgba(20,120,70,.4), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .15s, box-shadow .2s, filter .15s;
}
/* Pliegue de cinta a la izquierda (acento) */
.volver-mesa-priv::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: linear-gradient(180deg, #8affc4, #36d07a);
}
.volver-mesa-priv:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 9px 24px rgba(20,120,70,.5), inset 0 1px 0 rgba(255,255,255,.22); }
.volver-mesa-priv:active { transform: scale(.99); }
.volver-mesa-priv span:first-child { display: flex; flex-direction: column; align-items: flex-start; }
.volver-mesa-priv small { font-weight: 600; color: #cdfbe2; font-size: 11px; opacity: .9; }
.volver-mesa-priv .vmp-x { color: #d6ffe9; font-weight: 900; padding: 2px 8px; border-radius: 6px; background: rgba(0,0,0,.18); }
.volver-mesa-priv .vmp-x:hover { background: rgba(0,0,0,.32); color: #fff; }

/* ══ Botón "Compartir/Invitar" dentro de la mesa (solo host) + modal de enlace ══ */
.mesa-share-btn {
  /* Hijo flex del cluster de iconos (#mesa-topbar-icons). Sin absolutos → nunca pisa el nombre. */
  position: static; flex: 0 0 auto; cursor: pointer;
  width: 40px; height: 40px; border-radius: 11px;
  background: rgba(126,91,208,.9); color: #fff; border: 1px solid rgba(201,179,255,.5);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.5); transition: transform .12s, filter .12s;
}
.mesa-share-btn:hover { filter: brightness(1.12); }
.mesa-share-btn:active { transform: scale(.92); }
.mesa-share-btn .material-symbols-outlined { font-size: 19px; }

.share-mesa-overlay {
  position: fixed; inset: 0; z-index: 2147483646; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.72); backdrop-filter: blur(3px); padding: 18px;
}
.share-mesa-card {
  max-width: 380px; width: 100%; background: linear-gradient(160deg, #1a132a, #120e1f);
  border: 1px solid rgba(126,91,208,.5); border-radius: 16px; padding: 20px; box-shadow: 0 18px 50px rgba(0,0,0,.6);
}
.share-mesa-head { font-weight: 900; color: #d9c7ff; font-size: 1.05rem; text-align: center; margin-bottom: 12px; }
.share-mesa-card input {
  width: 100%; box-sizing: border-box; padding: 10px; border-radius: 9px; border: 1px solid #3a2f55;
  background: #0c0a14; color: #cdbdf0; font-size: .82rem; text-align: center; margin-bottom: 10px;
}
.share-mesa-copy {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px; border-radius: 10px; border: none; cursor: pointer; font-weight: 800; font-size: .95rem;
  background: linear-gradient(180deg, #25d366, #128c4b); color: #fff; transition: filter .12s;
}
.share-mesa-copy:hover { filter: brightness(1.08); }
.share-mesa-copy.ok { background: linear-gradient(180deg, #36d07a, #1f9e57); }
.share-mesa-copy .material-symbols-outlined { font-size: 20px; }
.share-mesa-nota { font-size: .76rem; color: #9d8fc4; line-height: 1.4; margin: 10px 0 0; text-align: center; }

/* ══ Solicitud de entrada a PANTALLA COMPLETA para el Anfitrión (aprobar/denegar, imposible de perder) ══ */
.host-solicitud-fs {
  position: fixed; inset: 0; z-index: 2147483647; display: flex; align-items: center; justify-content: center;
  background: rgba(8,6,14,.86); backdrop-filter: blur(6px); padding: 22px; animation: hsfsIn .18s ease;
}
@keyframes hsfsIn { from { opacity: 0; } to { opacity: 1; } }
.host-solicitud-fs .hsfs-card {
  position: relative;
  max-width: 420px; width: 100%; text-align: center;
  background: linear-gradient(165deg, #1c1330, #120d1f); border: 1px solid rgba(126,91,208,.55);
  border-radius: 22px; padding: 30px 24px; box-shadow: 0 24px 70px rgba(0,0,0,.7);
}
/* Flecha "← Más tarde": cierra el modal sin resolver (la solicitud queda en el Cajero) para no bloquear al host */
.host-solicitud-fs .hsfs-back {
  position: absolute; top: 12px; left: 12px; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #cdbff0;
  font-size: 20px; font-weight: 900; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.host-solicitud-fs .hsfs-back:hover { background: rgba(255,255,255,.16); }
.host-solicitud-fs .hsfs-ico { font-size: 3rem; line-height: 1; margin-bottom: 8px; }
.host-solicitud-fs .hsfs-tit { font-size: .9rem; color: #b8a4e6; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
.host-solicitud-fs .hsfs-nombre { font-size: 1.7rem; font-weight: 900; color: #fff; margin: 6px 0 2px; word-break: break-word; }
.host-solicitud-fs .hsfs-monto { font-size: 1.05rem; color: #d9c7ff; margin-bottom: 6px; }
.host-solicitud-fs .hsfs-monto b { color: #36d07a; }
.host-solicitud-fs .hsfs-cola { font-size: .8rem; color: #f5b740; margin-bottom: 4px; }
.host-solicitud-fs .hsfs-acc { display: flex; gap: 12px; margin: 20px 0 12px; }
.host-solicitud-fs .hsfs-btn {
  flex: 1; padding: 18px 10px; border-radius: 14px; border: none; cursor: pointer;
  font-size: 1.15rem; font-weight: 900; transition: transform .1s, filter .12s;
}
.host-solicitud-fs .hsfs-btn:active { transform: scale(.95); }
.host-solicitud-fs .hsfs-no { background: linear-gradient(180deg, #e0564e, #a8302a); color: #fff; }
.host-solicitud-fs .hsfs-si { background: linear-gradient(180deg, #36d07a, #1c9e57); color: #06240f; }
.host-solicitud-fs .hsfs-btn:hover { filter: brightness(1.08); }
.host-solicitud-fs .hsfs-nota { font-size: .78rem; color: #9d8fc4; line-height: 1.4; }

/* ══ Voto de consenso de cierre (no intrusivo) ══ */
.voto-cierre-overlay {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483640; display: flex; justify-content: center;
  padding: 0 14px 16px; pointer-events: none;
}
.voto-cierre-card {
  max-width: 400px; width: 100%; pointer-events: auto; text-align: center;
  background: linear-gradient(160deg, #1a1626, #14101c); border: 1px solid rgba(126,91,208,.5);
  border-radius: 16px; padding: 16px 18px; box-shadow: 0 -8px 40px rgba(0,0,0,.55); animation: vcUp .2s ease;
}
@keyframes vcUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.voto-cierre-card .vc-ico { font-size: 1.6rem; }
.voto-cierre-card .vc-tit { font-size: .98rem; color: #e7dcff; font-weight: 700; margin: 2px 0; }
.voto-cierre-card .vc-tit b { color: #f5d77a; }
.voto-cierre-card .vc-pregunta { font-size: .85rem; color: #b6a6dc; margin-bottom: 6px; }
.voto-cierre-card .vc-estado { font-size: .78rem; color: #8fd6b0; min-height: 1em; margin-bottom: 10px; }
.voto-cierre-card .vc-acc { display: flex; gap: 10px; }
.voto-cierre-card .vc-btn { flex: 1; padding: 12px; border-radius: 11px; border: none; cursor: pointer; font-weight: 800; font-size: .9rem; transition: filter .12s; }
.voto-cierre-card .vc-btn:disabled { opacity: .5; cursor: default; }
.voto-cierre-card .vc-no { background: #2a2336; color: #cbbce8; border: 1px solid #4a3f63; }
.voto-cierre-card .vc-si { background: linear-gradient(180deg, #36d07a, #1c9e57); color: #06240f; }
.voto-cierre-card .vc-nota { font-size: .7rem; color: #9286b6; line-height: 1.4; margin: 10px 0 0; }

/* Anfitrión BLOQUEADO por deudas (2+): candado en botón/FAB de crear mesa */
.host-crear-mesa-btn.host-bloqueado { filter: grayscale(.6) brightness(.8); opacity: .85; }
.host-crear-fab.host-bloqueado { background: linear-gradient(135deg, #8a8a8a, #5a5a5a) !important; box-shadow: 0 6px 16px rgba(0,0,0,.5); }
/* CAJERO DE LOBBY: FAB 💼 que aparece SOLO si hay solicitudes pendientes (red de seguridad). Encima del de crear mesa. */
.cajero-lobby-fab {
  position: fixed; right: 20px; bottom: 156px; z-index: 1001; width: 56px; height: 56px;
  border-radius: 50%; border: none; cursor: pointer; color: #2a1e00;
  background: linear-gradient(135deg, #f5d77a, #caa24a);
  box-shadow: 0 8px 22px rgba(202,162,74,.5), 0 2px 6px rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center; animation: clf-pulse 1.4s ease-in-out infinite;
}
.cajero-lobby-fab .clf-ico { font-size: 24px; line-height: 1; }
.cajero-lobby-fab .clf-badge {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px;
  background: #d33; color: #fff; border-radius: 999px; font-size: 12px; font-weight: 900;
  display: flex; align-items: center; justify-content: center; border: 2px solid #15110a;
}
@keyframes clf-pulse { 0%,100% { box-shadow: 0 8px 22px rgba(202,162,74,.5); } 50% { box-shadow: 0 8px 30px rgba(245,215,122,.95); } }
/* Badge "!" ROJO de aviso sobre el Cajero (botón del lobby + ítem del menú de mesa) cuando hay solicitudes */
.host-cajero-lobby-badge, .mm-cajero-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 8px; vertical-align: middle;
  background: #e23b3b; color: #fff; border-radius: 999px; font-size: 11px; font-weight: 900;
  box-shadow: 0 0 8px rgba(226,59,59,.85); animation: badge-pulse 1.1s ease-in-out infinite;
}
.host-cajero-lobby-badge.oculto, .mm-cajero-badge.oculto { display: none; }
@keyframes badge-pulse { 0%,100% { transform: scale(1); box-shadow: 0 0 8px rgba(226,59,59,.7); } 50% { transform: scale(1.18); box-shadow: 0 0 16px rgba(255,70,70,1); } }
/* RAKE DINÁMICO · banner de nivel del Anfitrión (transparencia del % + meta siguiente) */
.host-rake-nivel { background: linear-gradient(135deg, rgba(202,162,74,.16), rgba(54,208,122,.1)); border: 1px solid rgba(202,162,74,.45); border-radius: 12px; padding: 9px 12px; margin: 8px 0; }
.host-rake-nivel .hrn-row { display: flex; align-items: center; gap: 8px; }
.host-rake-nivel .hrn-medalla { font-size: 1.25rem; line-height: 1; }
.host-rake-nivel .hrn-txt { font-size: .82rem; color: #f0dca8; font-weight: 600; line-height: 1.35; }
.host-rake-nivel .hrn-bar { height: 6px; background: rgba(255,255,255,.1); border-radius: 99px; margin-top: 7px; overflow: hidden; }
.host-rake-nivel .hrn-bar-fill { height: 100%; background: linear-gradient(90deg, #caa24a, #36d07a); border-radius: 99px; transition: width .4s ease; }

/* Compartir mesa: subtítulos de las dos secciones (comunidad vs acceso) */
.share-mesa-sub { font-size: .78rem; color: #b6a6dc; font-weight: 700; margin: 2px 0 6px; text-align: left; }
.share-mesa-copy-acceso { background: linear-gradient(180deg, #caa24a, #8a6f2e) !important; }
#btn-unirse-mesa[data-modo-comunidad="1"] { background: linear-gradient(180deg,#5b5b66,#303036); opacity: .92; }

/* Badge "Anfitrión" junto al avatar (visible para todos · supervisa la partida) */
.seat-host-badge {
  position: absolute; top: -6px; left: -6px; z-index: 6; font-size: 14px; line-height: 1;
  background: linear-gradient(135deg, #7e5bd0, #5a3fa0); color: #fff; border-radius: 50%;
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid #d9c7ff; box-shadow: 0 2px 6px rgba(0,0,0,.5);
}
/* Menú: botón de peligro "Romper Mesa" */
.mesa-menu-item.mm-romper { color: #ff8a8a; }
.mesa-menu-item.mm-romper:hover { background: rgba(176,58,58,.18); }

/* Jugador DESCONECTADO: avatar atenuado + badge "Reconectando…" parpadeante (lo ve toda la mesa) */
.seat-player.desconectado .seat-avatar { opacity: .5; filter: grayscale(.6); }
.seat-badge-recon {
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%); z-index: 7; white-space: nowrap;
  background: rgba(58,110,170,.92); color: #cfe6ff; border: 1px solid #6ea8ff; border-radius: 999px;
  padding: 2px 9px; font-size: 10px; font-weight: 800; box-shadow: 0 2px 6px rgba(0,0,0,.5);
  animation: reconBlink 1.1s ease-in-out infinite;
}
@keyframes reconBlink { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
/* Asiento RESERVADO_PENDIENTE (Bizum): contador pasivo, no interfiere con el juego (mismo sitio que el badge de recon). */
.seat-badge-bizum {
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%); z-index: 7; white-space: nowrap;
  background: rgba(90,63,160,.92); color: #e9def9; border: 1px solid #c9b3ff; border-radius: 999px;
  padding: 2px 9px; font-size: 10px; font-weight: 800; box-shadow: 0 2px 6px rgba(0,0,0,.5);
}
/* BANCO DE TIEMPO · CRONÓMETRO FLOTANTE: aparece SOLO al entrar en la reserva, anclado sobre el avatar del
   jugador lento (sea quien sea). ⏱️ + cuenta atrás, glow naranja y latido para transmitir urgencia a la mesa. */
.crono-banco {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%); z-index: 12; white-space: nowrap;
  background: linear-gradient(135deg, #ff8a2c, #e0461a); color: #fff;
  border: 1px solid #ffd9a0; border-radius: 999px; padding: 3px 11px;
  font-size: 12px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: .3px;
  box-shadow: 0 0 12px rgba(255,120,30,.85), 0 2px 6px rgba(0,0,0,.5);
  animation: crono-pulse 1s ease-in-out infinite; pointer-events: none;
}
.crono-banco.urgente { background: linear-gradient(135deg, #ff5a2c, #c41a1a); animation-duration: .6s; }
@keyframes crono-pulse {
  0%,100% { transform: translateX(-50%) scale(1);    box-shadow: 0 0 10px rgba(255,120,30,.7), 0 2px 6px rgba(0,0,0,.5); }
  50%     { transform: translateX(-50%) scale(1.09); box-shadow: 0 0 22px rgba(255,150,50,1),  0 2px 8px rgba(0,0,0,.5); }
}
/* Fase banco: la barra de tiempo del héroe y el anillo del rival pasan a ROJO/NARANJA */
.turno-barra-hero.banco .tbh-fill { background: linear-gradient(90deg, #ff5a2c, #d4361a) !important; }
.turno-anillo.banco .ta-fg { stroke: #ff5a2c !important; }
/* INTERMEDIO entre manos: pastilla con cuenta atrás "Próxima mano en Xs" (la mesa respira, no parece colgada) */
.intermedio-banner {
  /* ARRIBA del todo (zona limpia) → no pisa el cartel de ganador, las cartas ni el HUD. */
  position: fixed; left: 50%; transform: translateX(-50%); top: 8px; bottom: auto;
  z-index: 1200; pointer-events: none; white-space: nowrap;
  background: linear-gradient(135deg, rgba(20,16,9,.96), rgba(28,20,8,.96)); color: #f0dca8;
  border: 1px solid rgba(202,162,74,.55); border-radius: 999px; padding: 6px 15px;
  font-size: 12.5px; font-weight: 700; box-shadow: 0 6px 20px rgba(0,0,0,.55);
  display: flex; align-items: center; gap: 8px;
}
.intermedio-banner b { color: #fff; font-variant-numeric: tabular-nums; }
.intermedio-banner .ib-dot { width: 8px; height: 8px; border-radius: 50%; background: #36d07a; box-shadow: 0 0 8px #36d07a; animation: ib-pulse 1s ease-in-out infinite; }
@keyframes ib-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } }
@media (max-width: 640px) { .intermedio-banner { top: 6px; font-size: 11.5px; padding: 5px 12px; } }

/* ══ Libreta de Caja (ticket del Anfitrión) + Historial "Mis Timbas" ══ */
.caja-overlay { position: fixed; inset: 0; z-index: 2147483646; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.78); backdrop-filter: blur(3px); padding: 16px; }
.caja-card { max-width: 420px; width: 100%; background: #fbf7ec; color: #2a2417; border-radius: 14px; padding: 18px; box-shadow: 0 18px 50px rgba(0,0,0,.6); font-family: 'Courier New', monospace; }
.caja-head { font-size: 1.1rem; font-weight: 800; text-align: center; margin-bottom: 12px; color: #1a1306; border-bottom: 2px dashed #c9b890; padding-bottom: 8px; }
.caja-tabla { width: 100%; border-collapse: collapse; font-size: .86rem; }
.caja-tabla th { text-align: right; color: #8a7a52; font-weight: 700; padding: 4px 6px; border-bottom: 1px solid #d9cba6; }
.caja-tabla th:first-child, .caja-tabla .caja-jug { text-align: left; }
.caja-tabla td { text-align: right; padding: 7px 6px; border-bottom: 1px dotted #ddd0ad; }
.caja-jug { font-weight: 700; color: #2a2417; }
.caja-lift { background: #efe3c8; border: 1px solid #c9b890; border-radius: 6px; cursor: pointer; font-size: 14px; padding: 1px 5px; }
.caja-lift:hover { background: #e2d2a8; }
.caja-foot { margin-top: 12px; text-align: center; font-size: .92rem; font-weight: 700; color: #1a1306; }
.caja-nota { font-size: .72rem; color: #8a7a52; text-align: center; margin: 8px 0 12px; }
.caja-btn { width: 100%; padding: 11px; border-radius: 9px; border: none; background: #2a2417; color: #fbf7ec; font-weight: 800; cursor: pointer; }
.timba-row { display: flex; align-items: center; gap: 8px; padding: 10px 8px; border-bottom: 1px dotted #ddd0ad; cursor: pointer; }
.timba-row:hover { background: #f3ecd8; }
.timba-nom { flex: 1; font-weight: 700; }
.timba-est { font-size: .72rem; font-weight: 800; padding: 2px 7px; border-radius: 999px; }
.timba-est.activa { color: #1f7a45; background: #cdeed7; }
.timba-est.cerrada { color: #8a6f2e; background: #ece0bf; }
.timba-fec { font-size: .68rem; color: #8a7a52; white-space: nowrap; }
.host-mis-timbas-btn { width: 100%; margin: 0 0 10px; padding: 11px; border-radius: 11px; border: 1px solid #5a4a7a; background: #1d1830; color: #d9c7ff; font-weight: 800; cursor: pointer; }
.host-mis-timbas-btn:hover { filter: brightness(1.12); }

/* Badge "Co-Anfitrión" (🤝) junto al avatar del delegado */
.seat-cohost-badge {
  position: absolute; top: -6px; right: -6px; z-index: 6; font-size: 13px; line-height: 1;
  background: linear-gradient(135deg, #2e9e5b, #1c7a45); color: #fff; border-radius: 50%;
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid #9fe0bd; box-shadow: 0 2px 6px rgba(0,0,0,.5);
}

/* ── Filtros del lobby (chips estilo Winamax) ── */
.lobby-filtros { display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 14px; }
.lf-chip {
  appearance:none; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04);
  color:#cfcfd6; font-weight:700; font-size:13px; padding:7px 14px; border-radius:999px; cursor:pointer;
  transition:background .15s, border-color .15s, color .15s, transform .1s; white-space:nowrap;
}
.lf-chip:hover { background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.26); }
.lf-chip:active { transform:scale(.96); }
.lf-chip.sel {
  background:linear-gradient(180deg, var(--primary,#7c5cff), #5a3fd6); border-color:transparent; color:#fff;
  box-shadow:0 4px 14px rgba(124,92,255,.35);
}

/* ── Run-out all-in: la carta recién caída "aterriza" (solo la última de cada mano revelada) ── */
@keyframes cardDrop {
  0%   { transform: translateY(-20px) rotate(-6deg) scale(.88); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: translateY(0) rotate(0) scale(1); opacity: 1; }
}
/* ── RUN-OUT ALL-IN: cartas del rival REVELADAS en ABANICO, pequeñas, JUSTO DEBAJO del HUD ──
   (ahorra hueco; igual que el héroe). Sobrescribe la posición "sobre el avatar" del estado a-ciegas. */
.seat-cards-revel {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 4px; display: flex; gap: 0; z-index: 12; pointer-events: none;
}
/* Asientos de los LADOS: el abanico centrado se salía de la pantalla (cartas cortadas).
   Se ancla hacia el CENTRO de la mesa → izquierda (p5/p6) abre a la derecha; derecha (p2/p3) a la izquierda. */
.seat-p5 .seat-cards-revel, .seat-p6 .seat-cards-revel {
  left: 6px; right: auto; transform: none;
}
.seat-p2 .seat-cards-revel, .seat-p3 .seat-cards-revel {
  left: auto; right: 6px; transform: none;
}
.seat-cards-revel .seat-carta-wrap {
  display: inline-block; line-height: 0; margin: 0 -9px;
  transform-origin: 50% 120%;
  transform: rotate(calc((var(--i, 0) - (var(--n, 1) - 1) / 2) * 11deg));
}
/* Carta del abanico del rival REVELADO: más GRANDE para ver la jugada y la tensión (la .carta normal=90px). */
.seat-cards-revel .carta {
  width: 46px; height: 64px; border-radius: 5px; animation: none;
  box-shadow: 0 3px 8px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.12);
}
.seat-cards-revel .carta:hover { transform: none; }
/* La animación de entrada SOLO en la carta recién añadida (clase puesta por el handler), NO en cada
   re-render completo de la mesa → evita el parpadeo al refrescar el óvalo durante el all-in.
   Entrada dramática (cae girando + destello dorado) para que se VEA llegar carta a carta = tensión. */
.seat-cards-revel .seat-carta-wrap.carta-drop { animation: revelCartaEnemiga .5s cubic-bezier(.2,.9,.3,1.4); }
.seat-cards-revel .seat-carta-wrap.carta-drop .carta {
  animation: revelGlow .7s ease-out;
}
@keyframes revelCartaEnemiga {
  0%   { transform: translateY(-34px) rotate(calc((var(--i,0) - (var(--n,1) - 1)/2) * 11deg - 18deg)) scale(.6); opacity: 0; }
  55%  { opacity: 1; }
  100% { transform: rotate(calc((var(--i,0) - (var(--n,1) - 1)/2) * 11deg)) scale(1); opacity: 1; }
}
@keyframes revelGlow {
  0%   { box-shadow: 0 0 0 2px #ffd86b, 0 0 18px 5px rgba(255,216,107,.85); }
  100% { box-shadow: 0 3px 8px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.12); }
}

/* ── EXPRESSO (Spin&Go) ── */
.expresso-cta {
  display:flex; align-items:center; gap:12px; width:100%; margin-top:10px; padding:12px 16px; cursor:pointer;
  border:none; border-radius:16px; color:#fff; text-align:left;
  background:linear-gradient(110deg,#7b2ff7 0%,#f107a3 55%,#ff7a18 100%); box-shadow:0 8px 24px rgba(241,7,163,.38);
}
.expresso-cta:active { transform:scale(.985); }
.expresso-cta .ex-bolt { font-size:1.8rem; filter:drop-shadow(0 0 6px rgba(255,255,255,.7)); animation:exPulse 1.6s ease-in-out infinite; }
.expresso-cta .ex-txt { flex:1; display:flex; flex-direction:column; line-height:1.15; }
.expresso-cta .ex-txt b { font-size:1.05rem; letter-spacing:.5px; }
.expresso-cta .ex-txt small { opacity:.92; font-size:.74rem; }
.expresso-cta .ex-go { font-weight:800; background:rgba(255,255,255,.22); padding:6px 12px; border-radius:999px; font-size:.85rem; }
@keyframes exPulse { 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.18);} }
/* ── EXPRESSO embebido en el lobby (panel grande, no banner) ── */
.expresso-lobby { display: flex; justify-content: center; margin: 14px 0 4px; }
.expresso-modal-card.expresso-inline { margin: 0 auto; box-shadow: 0 16px 50px rgba(0,0,0,.5), 0 0 50px rgba(241,7,163,.18); }
/* ── Modal de entrada del EXPRESSO (grande + llamativo) ── */
.expresso-modal-card {
  position: relative; width: min(94vw, 420px); text-align: center; padding: 26px 22px 20px;
  border-radius: 22px; color: #fff; overflow: hidden;
  background: radial-gradient(120% 90% at 50% -10%, rgba(241,7,163,.28), transparent 60%), linear-gradient(180deg, #1a0f2e, #120a20);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 24px 70px rgba(0,0,0,.6), 0 0 60px rgba(241,7,163,.22);
}
.expresso-modal-card::before {   /* borde de luz ESTÁTICO (sin rotación) */
  content: ''; position: absolute; inset: -1px; border-radius: 23px; z-index: 0; padding: 1.5px;
  background: linear-gradient(135deg, #7b2ff7, #f107a3 45%, #ff7a18 80%, #ffd86b);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .85;
}
.expresso-modal-card > * { position: relative; z-index: 1; }
.exm-bolt { font-size: 3.2rem; line-height: 1; filter: drop-shadow(0 0 16px rgba(255,216,107,.8)); animation: exPulse 1.5s ease-in-out infinite; }
.exm-title { font-family: 'Sora', sans-serif; font-weight: 900; font-size: 2.1rem; letter-spacing: 3px; margin: 2px 0 8px;
  background: linear-gradient(110deg, #ffd86b, #ff7a18, #f107a3); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.exm-mults { display: flex; justify-content: center; align-items: baseline; gap: 9px; margin: 2px 0 10px; font-family: 'Sora', sans-serif; font-weight: 900; color: rgba(255,255,255,.45); }
.exm-mults span { font-size: 1rem; }
.exm-mults .exm-big { font-size: 1.5rem; color: #ffd86b; }
.exm-mults .exm-top { font-size: 2rem; color: #ff7a18; text-shadow: 0 0 16px rgba(255,122,24,.6); }
.exm-sub { font-size: .9rem; color: #cdbfe6; margin: 0 0 14px; line-height: 1.45; }
.exm-sub b { color: #fff; }
.exm-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: #9d8bc4; margin-bottom: 8px; }
.expresso-niveles { display:flex; flex-direction: column; gap:10px; justify-content:center; margin:0 0 14px; }
.expresso-niv {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width:100%; padding:14px 16px; border:1px solid rgba(255,255,255,.12); border-radius:14px; cursor:pointer;
  color:#fff; background:linear-gradient(110deg,#7b2ff7,#f107a3); box-shadow:0 6px 18px rgba(123,47,247,.4);
  transition: transform .12s ease, box-shadow .2s ease;
}
.expresso-niv:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(241,7,163,.5); }
.expresso-niv:active { transform:scale(.97); }
.expresso-niv .eni-buy { font-family: 'Sora', sans-serif; font-weight:900; font-size:1.15rem; }
.expresso-niv .eni-max { font-size:.74rem; opacity:.88; font-weight:700; }
.exm-cancel { width:100%; padding:11px; border:1px solid rgba(255,255,255,.14); border-radius:12px; background:rgba(255,255,255,.05); color:#cdbfe6; font-weight:700; cursor:pointer; }
.exm-cancel:hover { background:rgba(255,255,255,.1); }
.expresso-spin-ov { position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; background:rgba(6,4,12,.78); backdrop-filter:blur(4px); animation:fadeIn .2s ease; }
.expresso-spin { text-align:center; color:#fff; animation:esPop .5s cubic-bezier(.2,.9,.3,1.4); }
.expresso-spin .es-label { font-size:1rem; letter-spacing:1px; opacity:.85; margin-bottom:6px; }
.expresso-spin .es-mult { font-size:5rem; font-weight:900; line-height:1; background:linear-gradient(110deg,#ffd86b,#ff7a18,#f107a3); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 4px 18px rgba(241,7,163,.6)); }
.expresso-spin .es-prize { font-size:1.4rem; font-weight:800; margin-top:8px; }
@keyframes esPop { 0%{ transform:scale(.3) rotate(-12deg); opacity:0; } 100%{ transform:scale(1) rotate(0); opacity:1; } }

/* ── Expresso: ruleta del multiplicador (gira y para) ── */
.expresso-spin .es-reel {
  display:inline-block; min-width:180px; margin:8px auto 4px; padding:12px 28px; border-radius:18px;
  background:rgba(255,255,255,.05); border:2px solid rgba(255,216,107,.55);
  box-shadow:0 0 30px rgba(241,7,163,.35), inset 0 0 22px rgba(255,216,107,.18); overflow:hidden;
}
.expresso-spin .es-mult.es-flash { animation:esFlash .09s ease; }
@keyframes esFlash { 0%{ transform:scale(1.16); filter:brightness(1.6);} 100%{ transform:scale(1); filter:brightness(1);} }
.expresso-spin .es-mult.es-win { animation:esWin .65s cubic-bezier(.2,.9,.3,1.5); }
@keyframes esWin { 0%{ transform:scale(1);} 45%{ transform:scale(1.55);} 100%{ transform:scale(1.28);} }
.expresso-spin .es-reel:has(.es-win) { border-color:#ffd86b; box-shadow:0 0 46px rgba(255,216,107,.7), inset 0 0 26px rgba(255,216,107,.3); }
.expresso-spin .es-prize.es-prize-in { animation:esPrizeIn .5s ease both; }
@keyframes esPrizeIn { 0%{ opacity:0; transform:translateY(12px) scale(.9);} 100%{ opacity:1; transform:translateY(0) scale(1);} }

/* ── Descarte una-a-una: la carta recién servida "aterriza" ── */
@keyframes cartaEntra {
  0%   { transform: translateY(-22px) rotate(-5deg) scale(.86); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: translateY(0) rotate(0) scale(1); opacity: 1; }
}
#mano-jugador .carta.carta-entra { animation: cartaEntra .42s cubic-bezier(.2,.9,.3,1.25); }

/* ── Equity en vivo (% de favorito) durante el all-in ── */
.seat-equity {
  position: absolute; top: -8px; right: -8px; z-index: 7;
  min-width: 36px; text-align: center; padding: 2px 7px; border-radius: 999px;
  font-size: 11px; font-weight: 900; color: #fff; letter-spacing: .3px;
  border: 1.5px solid rgba(0,0,0,.4); box-shadow: 0 2px 9px rgba(0,0,0,.55);
  transition: background .45s ease;
}
@keyframes eqPop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
/* Equity del HÉROE (no tiene pod): chip junto a su HUD de "Tu jugada". Mismo código de color rojo→verde. */
.hero-equity {
  display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 900; color: #fff; letter-spacing: .3px; vertical-align: middle;
  border: 1.5px solid rgba(0,0,0,.4); box-shadow: 0 2px 9px rgba(0,0,0,.5);
}
.hero-equity.oculto { display: none; }