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

/* ═══════════════════════════════════════
   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);
}
@keyframes fichaFly {
  from { transform: translate(0, 0) scale(1); opacity: 1; }
  to   { transform: translate(var(--fx), var(--fy)) scale(0.5); 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; }

/* ═══════════════════════════════════════
   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; }
#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; }
/* 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 {
  -webkit-appearance: slider-vertical; appearance: slider-vertical;   /* Chrome/Safari */
  writing-mode: vertical-lr; direction: rtl;                          /* moderno: arriba = máx */
  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;
}

.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: 36px; }
.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; }
.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(-3px); }
.premium-card.llena { opacity: .72; }
.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 14px;
}
.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; }

/* ── 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; }
.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-yo { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--surface-container-low); border: 1px solid var(--outline-variant); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.liga-yo-rank { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.1rem; color: var(--primary); }
.liga-yo-sub { font-size: 11px; color: var(--on-surface-variant); }
.liga-tabla { max-height: 46vh; overflow-y: auto; }
.liga-row { display: grid; grid-template-columns: 34px 1fr auto auto; align-items: center; gap: 8px; padding: 8px 6px; border-bottom: 1px solid var(--outline-variant); }
.liga-row.yo { background: rgba(212,175,55,.08); border-radius: 8px; }
.liga-pos { font-weight: 800; color: var(--on-surface-variant); text-align: center; }
.liga-pos.top { color: var(--primary); }
.liga-nombre { font-weight: 600; font-size: 13px; color: var(--on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.liga-pts { font-weight: 700; font-size: 13px; color: var(--primary); }

/* ── 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: absolute; top: 10px; right: 56px; z-index: 130;   /* junto al menú desplegable, a su izquierda */
  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 8px rgba(231,193,77,.9)); }
  /* 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 dorado sobre la figura (sustituye al aro del círculo). */
.seat-player.turno-activo .avatar-figura {
  filter: drop-shadow(0 8px 6px rgba(0,0,0,.55)) drop-shadow(0 0 9px rgba(231,193,77,.95));
}
@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: rgba(231,193,77,.95) !important;
  animation: turnoGlow 1.5s ease-in-out infinite;
}
.seat-player.turno-activo .seat-avatar { animation: turnoGlow 1.5s ease-in-out infinite; }
@keyframes turnoGlow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(231,193,77,.55), 0 0 10px rgba(231,193,77,.45), 0 8px 22px rgba(0,0,0,.5); }
  50%      { box-shadow: 0 0 0 2px rgba(231,193,77,.95), 0 0 24px rgba(231,193,77,.85), 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(4, 1fr); gap: 8px; margin-bottom: 14px; }
.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). */
.btn-juego-fold  { background: linear-gradient(160deg, #e0524f, #9a1f1c); border: 1px solid rgba(255,140,136,.55);
  box-shadow: 0 4px 0 rgba(0,0,0,0.38), 0 7px 16px rgba(0,0,0,0.42), 0 0 14px rgba(224,82,79,.42); }
.btn-juego-check { background: linear-gradient(160deg, #4a4a52, #26262b); border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 4px 0 rgba(0,0,0,0.38), 0 7px 16px rgba(0,0,0,0.42); }
.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 ── */
.ruleta-wrap { position: relative; width: 290px; height: 290px; margin: 12px auto 4px; 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: var(--primary);
  box-shadow: 0 0 0 3px rgba(212,175,55,0.25), 0 0 18px rgba(212,175,55,0.5);
  animation: seat-pulse 2s infinite ease-in-out;
}
@keyframes seat-pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(212,175,55,0.25), 0 0 14px rgba(212,175,55,0.4); } 50% { box-shadow: 0 0 0 4px rgba(212,175,55,0.35), 0 0 24px rgba(212,175,55,0.7); } }
.seat-player.retirado { opacity: .42; filter: grayscale(0.7); }
.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. */
  .mesa6-canvas { height: 100dvh; padding: 58px 6px 126px; display: flex; flex-direction: column; position: relative; }

  /* ÓVALO: vertical, MÁS GRANDE y con MÁRGENES laterales (centrado), como el mockup aprobado. */
  .mesa6-table { position: relative; flex: 0 0 auto; height: 63vh; 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-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, full-width, sin escala → más sitio para agrandar el óvalo. */
    padding: 7px 10px calc(8px + env(safe-area-inset-bottom)); max-height: 40vh; overflow: visible;   /* visible → el slider vertical flotante no se recorta */
  }
  #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;
  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); }

/* ── 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; }
.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;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.winner-overlay.oculto { display: none; }
.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 {
  -webkit-appearance: slider-vertical; appearance: slider-vertical;   /* WebKit antiguo */
  writing-mode: vertical-lr; direction: rtl;                          /* Chrome/Edge moderno: min abajo, max arriba */
  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: 84px; z-index: 90; 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; }

/* ── 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: absolute; top: 10px; right: 10px; z-index: 130; 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; }

/* Contador de espectadores dentro de la mesa (lo ven los jugadores). */
.mesa-espec { position: absolute; top: 54px; left: 12px; 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). */
.seat-avatar-wrap.aro-gold { position: relative; }
.seat-avatar-wrap.aro-gold::before {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; z-index: 0;
  background: conic-gradient(from 0deg, #caa015, #ffe98a, #fff7d6, #f5d020, #caa015);
  filter: drop-shadow(0 0 7px rgba(245,208,32,.85)); animation: aroGiro 3s linear infinite;
}
.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; }

/* 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: 360px; margin: 0 auto 8px; padding: 10px 16px; border: 1px solid rgba(245,208,32,.25); border-radius: 12px; background: rgba(245,208,32,.05); }
.footer-leaderboard .fl-title { font-weight: 800; color: #f5d020; font-size: .85rem; margin-bottom: 8px; text-align: center; }
.footer-leaderboard .fl-row { display: flex; justify-content: space-between; gap: 12px; font-size: .8rem; color: var(--on-surface); padding: 3px 0; }
.footer-leaderboard .fl-row b { color: #f5d020; white-space: nowrap; }

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