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

:root {
  /* ── Stitch Design Tokens (Giley Poker 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
   ═══════════════════════════════════════ */
.tarjeta-auth {
  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: 420px; width: 100%;
  text-align: center;
  box-shadow: var(--sombra-fuerte);
  backdrop-filter: blur(8px);
}
.tarjeta-auth h1 { margin-bottom: 4px; font-size: 2rem; color: var(--accento); text-shadow: 0 0 20px rgba(212,160,23,0.3); }
.tarjeta-auth > p { color: var(--texto-dim); margin-bottom: 24px; font-size: 0.85rem; }
.tarjeta-auth input {
  width: 100%; padding: 12px 16px;
  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: 12px;
  transition: border-color .2s, box-shadow .2s;
  box-sizing: border-box;
}
.tarjeta-auth input:focus {
  outline: none; border-color: var(--accento);
  box-shadow: 0 0 0 3px rgba(212,160,23,0.15), var(--brillo-oro);
}
.tarjeta-auth .btn-primario { width: 100%; justify-content: center; margin-top: 4px; }
.checkbox-tyc {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 8px 0 14px; text-align: left;
  color: var(--texto-dim); font-size: 0.8rem; line-height: 1.4;
}
.checkbox-tyc input[type="checkbox"] {
  margin-top: 2px; width: auto; flex-shrink: 0;
  accent-color: var(--accento);
}
.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) {
  .lobby-main {
    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: 24px 0;
  margin-top: auto;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 24px;
  gap: 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
   ═══════════════════════════════════════ */
#pantalla-juego {
  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); }

/* ── Zona de juego ── */
.mesa-zona {
  flex: 1;
  background: radial-gradient(ellipse at center, var(--felt), var(--felt-dark));
  position: relative;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.mesa-zona::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}
.mesa-zona > * { position: relative; z-index: 1; }

/* ── Rivales ── */
#zona-rivales {
  display: flex; justify-content: center; gap: 20px;
  padding: 20px 20px 12px;
  min-height: 100px;
}
.rival-card {
  background: linear-gradient(145deg, rgba(0,0,0,0.45), rgba(0,0,0,0.25));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radio);
  padding: 12px 16px;
  min-width: 110px; text-align: center;
  transition: all .25s;
  box-shadow: var(--sombra-suave);
}
.rival-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-media);
}
.rival-card.turno-activo {
  border-color: var(--accento);
  box-shadow: 0 0 16px rgba(212,160,23,0.3), var(--sombra-suave);
}
.rival-card.retirado { opacity: .35; }
.rival-card.desconectado { opacity: .5; border-color: var(--rojo); }
.rival-dorsos { display: flex; gap: 4px; justify-content: center; margin-bottom: 6px; }
.rival-badges { display: flex; gap: 4px; justify-content: center; margin-bottom: 4px; min-height: 18px; }
.rival-nombre { font-size: 0.85rem; font-weight: 600; }
.rival-puntos  { font-size: 0.75rem; color: var(--texto-dim); }

/* ── HUD Central ── */
.hud-central {
  display: flex; justify-content: center; gap: 16px;
  padding: 10px 16px;
}
.hud-item {
  text-align: center;
  background: rgba(18,18,18,0.85);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radio-sm);
  padding: 8px 16px;
  min-width: 80px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  backdrop-filter: blur(20px);
}
.hud-label { font-size: 0.65rem; color: var(--texto-dim); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 2px; }
.hud-value { font-size: 1.1rem; font-weight: 700; }
.hud-value.pot { color: var(--accento); text-shadow: 0 0 8px rgba(212,160,23,0.3); }

/* ── Mano del jugador ── */
.zona-mano {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 16px;
}
.mano-jugador-label {
  font-size: 0.85rem; color: var(--texto-dim); margin-bottom: 12px;
}
.mano-container {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}

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

.mano-container .carta:nth-child(1) { animation-delay: 0.00s; }
.mano-container .carta:nth-child(2) { animation-delay: 0.08s; }
.mano-container .carta:nth-child(3) { animation-delay: 0.16s; }
.mano-container .carta:nth-child(4) { animation-delay: 0.24s; }

.carta-img {
  width: 100%; height: 100%;
  object-fit: contain;
  border-radius: 8px;
  display: block;
  transition: filter .25s, transform .25s;
}
.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;
}
.rival-card:hover .dorso-carta-img {
  transform: scale(1.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* ── FLIP 3D PARA SHOWDOWN ── */
.carta-flip {
  perspective: 800px;
}
.carta-flip-inner {
  position: relative;
  width: 100%; height: 100%;
  transition: transform .6s 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 .5s ease-in forwards;
}
@keyframes fichaFly {
  from { transform: translate(0, 0) scale(1); opacity: 1; }
  to   { transform: translate(var(--fx), var(--fy)) scale(0.5); opacity: 0; }
}

/* ═══════════════════════════════════════
   RESPONSIVE — SIDEBAR EN ANCHO
   ═══════════════════════════════════════ */
@media (min-width: 860px) {
  .mesa-sidebar { display: block; }
  #pantalla-juego {
    flex-direction: row;
  }
  .zona-mano { padding: 24px; }
  #zona-rivales { padding: 24px 32px; gap: 28px; }
  .hud-central { gap: 20px; }
  .hud-item { min-width: 90px; padding: 10px 18px; }
}

/* ═══════════════════════════════════════
   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; }
  .rival-card { min-width: 80px; padding: 8px; }
  .carta { width: 60px; height: 84px; }
  .dorso-carta-img { width: 34px; height: 48px; }
  .btn-accion { padding: 8px 14px; font-size: 0.8rem; }
  .mesa-tapete { max-width: 100%; border-radius: 40% / 25%; }
  .hud-central { flex-wrap: wrap; gap: 6px; }
  .hud-item-c { padding: 4px 8px; }
  .hud-label-c { font-size: 0.55rem; }
  .hud-valor-c { font-size: 0.75rem; }
  .zona-jugador-local { padding: 8px; }
  .mano-jugador { gap: 6px; }
}

/* ═══════════════════════════════════════════════
   NUEVA MESA DE CASINO — TAPETE OVALADO + RIVALES
   ═══════════════════════════════════════════════ */

/* Wrapper general de la pantalla de juego */
.juego-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px;
  overflow-y: auto;
}

/* ── Tapete oval ── */
.mesa-tapete {
  position: relative;
  width: 100%;
  max-width: 680px;
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(ellipse at 50% 40%,
      #0d7a44 0%, #0a5c36 55%, #073d24 100%);
  border-radius: 50% / 35%;
  border: 6px solid #3d1a08;
  box-shadow:
    0 0 0 3px #5a2a0a,
    0 8px 40px rgba(0,0,0,.7),
    inset 0 2px 8px rgba(255,255,255,.06);
  overflow: visible;
  flex-shrink: 0;
}

/* ── Centro del tapete ── */
.mesa-centro {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  z-index: 2;
  pointer-events: none;
}
.mesa-centro .hud-central { pointer-events: auto; }

#bote-destino {
  width: 8px; height: 8px;
  border-radius: 50%;
  pointer-events: none;
}

/* ── Slots de rivales ── */
.rival-slot {
  position: absolute;
  z-index: 3;
}

.pos-arriba {
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
}

.pos-derecha {
  top: 50%;
  right: -20px;
  transform: translateY(-50%);
}

.pos-izquierda {
  top: 50%;
  left: -20px;
  transform: translateY(-50%);
}

/* ── Tarjeta de rival (en el tapete) ── */
.mesa-tapete .rival-card {
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radio);
  padding: .5rem .75rem;
  min-width: 100px;
  max-width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  transition: border-color .3s, box-shadow .3s;
}
.mesa-tapete .rival-card.turno-activo {
  border-color: var(--accento);
  box-shadow: 0 0 0 2px rgba(212,160,23,.3),
              0 0 16px rgba(212,160,23,.2);
}
.mesa-tapete .rival-card.retirado      { opacity: .3; filter: grayscale(1); }
.mesa-tapete .rival-card.desconectado  { border-color: var(--rojo); opacity: .5; }
.mesa-tapete .rival-card.es-mano       { border-color: var(--accento); }

/* ── HUD en el centro del tapete ── */
.mesa-centro .hud-central {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 99px;
  padding: .35rem .6rem;
  backdrop-filter: blur(8px);
}
.hud-item-c {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2px 10px;
}
.hud-label-c {
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--texto-dim);
  line-height: 1.3;
}
.hud-valor-c {
  font-size: .85rem;
  font-weight: 700;
  color: var(--texto);
  line-height: 1.3;
}
.hud-valor-c.oro { color: var(--accento); }
.hud-divider {
  width: 1px;
  height: 24px;
  background: rgba(255,255,255,0.08);
}

/* ═══════════════════════════════════════════════
   ZONA JUGADOR LOCAL (fuera del tapete)
   ═══════════════════════════════════════════════ */
.zona-jugador-local {
  width: 100%;
  max-width: 680px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Mano del jugador */
.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; }

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

/* ── Responsive ── */
@media (min-width: 700px) {
  .mesa-tapete { aspect-ratio: 16 / 9; }
  .pos-arriba  { top: -36px; }
  .pos-derecha { right: -28px; }
  .pos-izquierda { left: -28px; }
}

@media (min-width: 1000px) {
  .juego-wrapper  { flex-direction: row; align-items: flex-start; flex-wrap: wrap; justify-content: center; }
  .mesa-tapete    { max-width: 720px; }
  .zona-jugador-local { max-width: 720px; }
}

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