/* ============================================================
   MESA DE DOMINO — v4 LIMPIO
   ============================================================ */

.mesa-contenedor {
  display: grid !important;
  grid-template-columns: 110px 1fr 110px !important;
  grid-template-rows: 90px 1fr 90px !important;
  grid-template-areas:
    ".        norte  ."
    "oeste    centro este"
    ".        sur    ." !important;
  gap: 14px !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  padding: 4px !important;
  overflow: hidden !important;
}

.mesa-slot {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  min-height: 0 !important;
  z-index: 5 !important;
}
.mesa-slot-norte { grid-area: norte !important; }
.mesa-slot-sur   { grid-area: sur !important; }
.mesa-slot-este  { grid-area: este !important; }
.mesa-slot-oeste { grid-area: oeste !important; }

.mesa-central {
  grid-area: centro !important;
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-radius: 12px !important;
  background: radial-gradient(ellipse at center, #2c5530 0%, #143018 100%) !important;
  border: 2px solid rgba(74, 46, 26, .8) !important;
  box-shadow: inset 0 0 60px rgba(0,0,0,.5), 0 6px 24px rgba(0,0,0,.5) !important;
  overflow: hidden !important;
}

.game-board {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  padding: 8px !important;
  overflow: visible !important;
  --tile-short: 24px;
  --tile-long: 48px;
  --pip-size: 5px;
  --tile-radius: 4px;
  --divider-color: rgba(0,0,0,.25);
}

.board-fila {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  height: var(--tile-short) !important;
  min-height: var(--tile-short) !important;
  max-height: var(--tile-short) !important;
  width: 100% !important;
  overflow: visible !important;
  flex-shrink: 0 !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}
.board-fila.reverse {
  flex-direction: row-reverse !important;
}

.tile-tablero.or-horizontal {
  width: var(--tile-long) !important;
  height: var(--tile-short) !important;
  display: flex !important;
  flex-direction: row !important;
  align-self: center !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  position: relative !important;
  border-radius: var(--tile-radius) !important;
  background: linear-gradient(145deg, #faf5ea 0%, #e8dfc9 100%) !important;
  border: 1px solid #c8ba9a !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.6) !important;
}

.tile-tablero.or-vertical {
  width: var(--tile-short) !important;
  height: var(--tile-long) !important;
  display: flex !important;
  flex-direction: column !important;
  align-self: center !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 3 !important;
  border-radius: var(--tile-radius) !important;
  background: linear-gradient(145deg, #faf5ea 0%, #e8dfc9 100%) !important;
  border: 1px solid #c8ba9a !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.6) !important;
}

.tile-tablero.ficha-centro {
  z-index: 5 !important;
  box-shadow: 0 0 0 2px rgba(255, 209, 102, 0.7), 0 2px 8px rgba(0, 0, 0, 0.6) !important;
}
.tile-tablero.ficha-giro { z-index: 4 !important; }

.tile-tablero .tile-half {
  flex: 1 !important;
  position: relative !important;
  overflow: hidden !important;
}
.tile-tablero.or-horizontal .tile-half:first-child {
  border-right: 1px solid rgba(0,0,0,.2) !important;
}
.tile-tablero.or-vertical .tile-half:first-child {
  border-bottom: 1px solid rgba(0,0,0,.2) !important;
}
.tile-tablero .pip {
  position: absolute !important;
  width: var(--pip-size) !important;
  height: var(--pip-size) !important;
  border-radius: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: #1a1a1a !important;
  box-shadow: inset -1px -1px 1px rgba(0,0,0,.5) !important;
}

.board-end-marker {
  position: absolute !important;
  font-size: 9px !important;
  padding: 2px 6px !important;
  background: rgba(0,0,0,.5) !important;
  border-radius: 6px !important;
  opacity: .6 !important;
  z-index: 4 !important;
  color: #fff !important;
}
.board-end-marker.left  { left: 6px !important; top: 6px !important; }
.board-end-marker.right { right: 6px !important; top: 6px !important; }
.board-end-marker {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}

.mesa-centro-marcador {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 10px !important;
  background: rgba(10,14,20,.85) !important;
  border: 2px solid rgba(255,209,102,.35) !important;
  border-radius: 10px !important;
  z-index: 20 !important;
  pointer-events: none !important;
}
.mesa-centro-marcador.hidden { display: none !important; }

.asiento-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  padding: 6px 8px !important;
  background: linear-gradient(135deg, rgba(20,26,36,.96), rgba(13,18,26,.96)) !important;
  border: 2px solid var(--border) !important;
  border-radius: 10px !important;
  min-width: 100px !important;
  max-width: 130px !important;
  position: relative !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.5) !important;
}
.asiento-card.activo {
  border-color: #ffd166 !important;
  background: linear-gradient(135deg, rgba(255,209,102,.28), rgba(255,180,60,.12)) !important;
  box-shadow: 0 0 0 2px rgba(255,209,102,.5), 0 0 20px rgba(255,209,102,.55) !important;
  transform: scale(1.04) !important;
  z-index: 10 !important;
}
.asiento-card.soy-yo {
  border-color: var(--accent-2) !important;
  border-style: dashed !important;
}
.asiento-header {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.asiento-avatar {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  border: 1.5px solid rgba(255,255,255,.1) !important;
  position: relative !important;
}
.asiento-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}
.asiento-info { min-width: 0 !important; flex: 1 !important; }
.asiento-nombre {
  font-size: 10px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 80px !important;
}
.asiento-meta { font-size: 8px !important; opacity: .8 !important; }

.game-opponents:not(.mesa-contenedor) { display: none !important; }
.game-opponents.game-opponents-mesa { display: none !important; }

@media (max-width: 900px) {
  .mesa-contenedor {
    grid-template-columns: 90px 1fr 90px !important;
    grid-template-rows: 76px 1fr 76px !important;
  }
}
@media (max-width: 700px) {
  .mesa-contenedor {
    grid-template-columns: 60px 1fr 60px !important;
    grid-template-rows: 50px 1fr 50px !important;
    gap: 2px !important;
  }
  .asiento-card {
    min-width: 54px !important;
    max-width: 60px !important;
    padding: 3px 4px !important;
  }
  .asiento-avatar { width: 18px !important; height: 18px !important; }
  .asiento-nombre { font-size: 8px !important; }
}

/* ============================================================
   FIX v4 — Filas de alto completo para que los dobles
   NO se solapen con las filas vecinas
   ============================================================ */
.board-fila {
  height: var(--tile-long) !important;
  min-height: var(--tile-long) !important;
  max-height: var(--tile-long) !important;
  align-items: center !important;
}

/* ============================================================
   SNAKE CONTAINER — posicionamiento absoluto
   ============================================================ */
.board-snake-container {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
}
.board-snake-container .tile-tablero {
  position: absolute !important;
  margin: 0 !important;
  pointer-events: auto !important;
}
.board-snake-container .tile-tablero.ficha-centro {
  z-index: 10 !important;
}
.board-snake-container .tile-tablero.or-vertical {
  z-index: 5 !important;
}
/* ============================================================
   FIX marcador parejas — fuera del centro del tablero
   Antes: top:50% / left:50% / translate(-50%,-50%)  (tapaba fichas)
   Ahora: badge pequeño pegado arriba
   ============================================================ */
.mesa-centro-marcador {
  top: 6px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  padding: 4px 10px !important;
  gap: 6px !important;
  background: rgba(10, 14, 20, .75) !important;
  border-width: 1px !important;
  border-radius: 8px !important;
  opacity: .92 !important;
}
.mesa-centro-marcador .mcm-eq {
  padding: 2px 8px !important;
  border-radius: 6px !important;
  background: rgba(0, 0, 0, .35) !important;
}
.mesa-centro-marcador .mcm-lbl {
  font-size: 7px !important;
  letter-spacing: .4px !important;
}
.mesa-centro-marcador .mcm-pts {
  font-size: 14px !important;
  line-height: 1 !important;
}
.mesa-centro-marcador .mcm-vs {
  font-size: 9px !important;
}

/* En móvil, todavía más compacto */
@media (max-width: 700px) {
  .mesa-centro-marcador {
    top: 4px !important;
    padding: 3px 8px !important;
    gap: 4px !important;
  }
  .mesa-centro-marcador .mcm-eq { padding: 1px 6px !important; }
  .mesa-centro-marcador .mcm-lbl { font-size: 6px !important; }
  .mesa-centro-marcador .mcm-pts { font-size: 12px !important; }
}
/* ============================================================
   FIX MÓVIL — Mesa cuadrada, oponentes flotantes
   Los slots salen del grid y pasan a position:absolute.
   La mesa central ocupa el 100% del contenedor.
   ============================================================ */
@media (max-width: 700px) {

  /* ---- 1) Contenedor: sin grid, mesa absoluta ---- */
  .mesa-contenedor {
    display: block !important;
    position: relative !important;
    padding: 3px !important;
    gap: 0 !important;
    grid-template-columns: unset !important;
    grid-template-rows: unset !important;
    grid-template-areas: unset !important;
    overflow: hidden !important;
  }

  .mesa-central {
    position: absolute !important;
    inset: 3px !important;
    width: auto !important;
    height: auto !important;
    border-radius: 10px !important;
  }

  /* ---- 2) Slots flotantes ---- */
  .mesa-slot {
    position: absolute !important;
    z-index: 8 !important;
    pointer-events: none !important;
  }

  .mesa-slot-norte {
    top: 6px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    align-items: flex-start !important;
  }
  .mesa-slot-sur {
    bottom: 6px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    align-items: flex-end !important;
  }
  .mesa-slot-este {
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    justify-content: flex-end !important;
  }
  .mesa-slot-oeste {
    left: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    justify-content: flex-start !important;
  }

  /* ---- 3) Asientos compactos (chips horizontales) ---- */
  .asiento-card {
    flex-direction: row !important;
    align-items: center !important;
    padding: 3px 8px !important;
    gap: 6px !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    background: rgba(10, 14, 20, .88) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 10px !important;
    border-width: 1.5px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.6) !important;
  }

  .asiento-etiqueta {
    display: none !important;
  }

  .asiento-header {
    gap: 5px !important;
    align-items: center !important;
  }

  .asiento-avatar {
    width: 24px !important;
    height: 24px !important;
    font-size: 13px !important;
    border-width: 1px !important;
  }
  .asiento-dot {
    width: 8px !important;
    height: 8px !important;
    border-width: 1.5px !important;
    bottom: -1px !important;
    right: -1px !important;
  }

  .asiento-info {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1.1 !important;
  }
  .asiento-nombre {
    font-size: 9px !important;
    font-weight: 800 !important;
    max-width: 66px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .asiento-meta {
    font-size: 8px !important;
    opacity: .75 !important;
    margin-top: 1px !important;
  }

  /* Ocultar la fila de fichas-mini: no caben y ensucian */
  .asiento-fichas { display: flex !important; min-height: 10px; }

  /* "Tú" (sur): ligeramente más grande */
  .mesa-slot-sur .asiento-card {
    padding: 4px 10px !important;
  }
  .mesa-slot-sur .asiento-avatar {
    width: 28px !important;
    height: 28px !important;
    font-size: 15px !important;
  }
  .mesa-slot-sur .asiento-nombre {
    font-size: 10px !important;
    max-width: 80px !important;
  }

  /* Cuando el turno está activo: un pulso sutil */
  .asiento-card.activo {
    transform: none !important;
    animation: seatPulsoMobile 1.6s ease-in-out infinite !important;
  }
  .asiento-card.activo::before {
    font-size: 7px !important;
    padding: 0 5px !important;
    top: -7px !important;
  }
  @keyframes seatPulsoMobile {
    0%, 100% { box-shadow: 0 0 0 2px rgba(255,209,102,.6), 0 2px 10px rgba(0,0,0,.6); }
    50%      { box-shadow: 0 0 0 3px rgba(255,209,102,.95), 0 0 16px rgba(255,209,102,.6), 0 2px 10px rgba(0,0,0,.6); }
  }

  /* ---- 4) Marcador parejas: arriba, pegado ---- */
  .mesa-centro-marcador {
    top: 4px !important;
    padding: 3px 8px !important;
    gap: 4px !important;
    border-radius: 8px !important;
  }
  .mesa-centro-marcador .mcm-eq { padding: 1px 6px !important; }
  .mesa-centro-marcador .mcm-lbl { font-size: 6px !important; }
  .mesa-centro-marcador .mcm-pts { font-size: 12px !important; }
  .mesa-centro-marcador .mcm-vs  { font-size: 8px !important; }

  /* ---- 5) Tablero: menos padding, más fichas visibles ---- */
  .game-board {
    padding: 4px !important;
  }
}

/* ============================================================
   MÓVIL MUY PEQUEÑO (≤ 420px) — aún más compacto
   ============================================================ */
@media (max-width: 420px) {
  .asiento-card {
    padding: 2px 6px !important;
    gap: 4px !important;
  }
  .asiento-avatar {
    width: 20px !important;
    height: 20px !important;
    font-size: 11px !important;
  }
  .asiento-nombre { font-size: 8px !important; max-width: 56px !important; }
  .asiento-meta   { font-size: 7px !important; }

  .mesa-slot-sur .asiento-card { padding: 3px 8px !important; }
  .mesa-slot-sur .asiento-avatar {
    width: 24px !important;
    height: 24px !important;
    font-size: 13px !important;
  }
  .mesa-slot-sur .asiento-nombre { font-size: 9px !important; max-width: 70px !important; }

  .mesa-slot-norte { top: 4px !important; }
  .mesa-slot-sur   { bottom: 4px !important; }
  .mesa-slot-este  { right: 4px !important; }
  .mesa-slot-oeste { left: 4px !important; }
}

/* ============================================================
   LANDSCAPE MÓVIL — muy poca altura, reducir aún más
   ============================================================ */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .asiento-card {
    flex-direction: row !important;
    padding: 2px 6px !important;
  }
  .asiento-avatar {
    width: 18px !important;
    height: 18px !important;
    font-size: 10px !important;
  }
  .asiento-nombre { font-size: 8px !important; max-width: 52px !important; }
  .asiento-meta   { display: none !important; }
  .asiento-fichas { display: flex !important; min-height: 10px; }
}
/* ============================================================
   ASIENTOS-VERTICALES-V2
   Layout vertical real (writing-mode) para este/oeste
   Sin transform: rotate → sin conflictos
   ============================================================ */

/* 1. Resetear CUALQUIER transform anterior en estos slots */
.mesa-slot-este .asiento-card,
.mesa-slot-este .asiento-card.activo,
.mesa-slot-oeste .asiento-card,
.mesa-slot-oeste .asiento-card.activo {
  transform: none !important;
  transform-origin: center center !important;
  flex-direction: column !important;
  min-width: 72px !important;
  max-width: 72px !important;
  width: 72px !important;
  padding: 8px 4px !important;
  gap: 4px !important;
}

/* 2. Header en columna (avatar arriba, info abajo) */
.mesa-slot-este .asiento-header,
.mesa-slot-oeste .asiento-header {
  flex-direction: column !important;
  gap: 4px !important;
  align-items: center !important;
}

/* 3. Info centrada */
.mesa-slot-este .asiento-info,
.mesa-slot-oeste .asiento-info {
  text-align: center !important;
  width: 100% !important;
}

/* 4. Nombre en VERTICAL (de arriba a abajo) */
.mesa-slot-este .asiento-nombre,
.mesa-slot-oeste .asiento-nombre {
  writing-mode: vertical-rl !important;
  text-orientation: mixed !important;
  max-width: none !important;
  max-height: 66px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  letter-spacing: 0.5px !important;
  display: block !important;
  margin: 0 auto !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

/* 5. Meta (fichas/pts) tambien en vertical suave */
.mesa-slot-este .asiento-meta,
.mesa-slot-oeste .asiento-meta {
  writing-mode: vertical-rl !important;
  text-orientation: mixed !important;
  font-size: 8px !important;
  line-height: 1 !important;
  max-height: 50px !important;
  overflow: hidden !important;
  margin: 0 auto !important;
}

/* 6. Etiqueta tambien vertical */
.mesa-slot-este .asiento-etiqueta,
.mesa-slot-oeste .asiento-etiqueta {
  writing-mode: vertical-rl !important;
  text-orientation: mixed !important;
  font-size: 8px !important;
  margin: 0 auto !important;
  max-height: 50px !important;
}

/* 7. Pila de fichas: reducir */
.mesa-slot-este .ficha-stack,
.mesa-slot-oeste .ficha-stack {
  width: 3px !important;
  height: 8px !important;
  margin-left: -1px !important;
}

/* 8. Badge TURNO mas pequeno y sin rotar */
.mesa-slot-este .asiento-card.activo::before,
.mesa-slot-oeste .asiento-card.activo::before {
  font-size: 7px !important;
  padding: 1px 5px !important;
  top: -7px !important;
}

/* 9. Móvil: aún mas compacto */
@media (max-width: 700px) {
  .mesa-slot-este .asiento-card,
  .mesa-slot-este .asiento-card.activo,
  .mesa-slot-oeste .asiento-card,
  .mesa-slot-oeste .asiento-card.activo {
    min-width: 42px !important;
    max-width: 42px !important;
    width: 42px !important;
    padding: 4px 2px !important;
  }
  .mesa-slot-este .asiento-nombre,
  .mesa-slot-oeste .asiento-nombre {
    font-size: 8px !important;
    max-height: 44px !important;
  }
  .mesa-slot-este .asiento-meta,
  .mesa-slot-oeste .asiento-meta {
    font-size: 7px !important;
    max-height: 34px !important;
  }
  .mesa-slot-este .asiento-etiqueta,
  .mesa-slot-oeste .asiento-etiqueta {
    font-size: 6px !important;
    max-height: 30px !important;
  }
}

/* 10. Reducir columnas del grid para que el tablero tenga mas ancho */
.mesa-contenedor {
  grid-template-columns: 140px 1fr 140px !important;
}
@media (max-width: 900px) {
  .mesa-contenedor {
    grid-template-columns: 120px 1fr 120px !important;
  }
}
@media (max-width: 700px) {
  .mesa-contenedor {
    grid-template-columns: 100px 1fr 100px !important;
  }
}
@media (max-width: 420px) {
  .mesa-contenedor {
    grid-template-columns: 88px 1fr 88px !important;
  }
}

/* ============================================================
   MODO-LATERALES
   Ajustes visuales cuando el usuario elige ocultar nombres laterales
   ============================================================ */
.mesa-slot-este .asiento-card,
.mesa-slot-oeste .asiento-card {
  transition: width .2s, padding .2s;
}

/* ============================================================
   SAFE-LATERAL-ZONE
   Reserva real para asientos este/oeste: los cards NO invaden
   el tablero central
   ============================================================ */

/* 1. Los slots laterales son "cajas cerradas" que no dejan salir el card */
.mesa-slot-este,
.mesa-slot-oeste {
  overflow: hidden !important;
  padding: 6px 4px !important;
  border-radius: 12px !important;
}

/* 2. Los slots norte/sur tambien reservan su espacio sin desbordar */
.mesa-slot-norte,
.mesa-slot-sur {
  overflow: hidden !important;
  padding: 4px 8px !important;
}

/* 3. El card lateral se ajusta al ancho del slot */
.mesa-slot-este .asiento-card,
.mesa-slot-este .asiento-card.activo,
.mesa-slot-oeste .asiento-card,
.mesa-slot-oeste .asiento-card.activo {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* 4. Los cards norte/sur tambien limitan su ancho */
.mesa-slot-norte .asiento-card,
.mesa-slot-sur .asiento-card {
  box-sizing: border-box !important;
}

/* 5. El badge TURNO no debe salir del slot (queda dentro del slot) */
.asiento-card.activo::before {
  top: 2px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 10 !important;
}

/* 6. Los shadows y glows se limitan para no invadir el tablero */
.asiento-card.activo {
  box-shadow:
    0 0 0 2px rgba(255,209,102,.55),
    0 0 10px rgba(255,209,102,.35) !important;
}

/* 7. El glitch del pulse tampoco debe desbordar */
@keyframes seatPulsoMobile {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255,209,102,.55), 0 2px 8px rgba(0,0,0,.5); }
  50%      { box-shadow: 0 0 0 3px rgba(255,209,102,.85), 0 0 12px rgba(255,209,102,.5); }
}

/* 8. Asegurar que el tablero (mesa-central) tiene padding suficiente */
.mesa-central {
  padding: 12px !important;
}
.game-board {
  padding: 24px 16px !important;
}

/* 9. En movil, más reserva vertical porque los slots flotan */
@media (max-width: 700px) {
  .mesa-slot-norte { top: 0 !important; }
  .mesa-slot-sur   { bottom: 0 !important; }
  .mesa-slot-este  { right: 0 !important; }
  .mesa-slot-oeste { left: 0 !important; }
  .mesa-central {
    inset: 52px 48px !important;
  }
  .game-board {
    padding: 6px 4px !important;
  }
}
@media (max-width: 420px) {
  .mesa-central {
    inset: 46px 42px !important;
  }
}

/* 10. Si el jugador oculta los nombres laterales, los slots se estrechan */
.mesa-slot-este.compacto,
.mesa-slot-oeste.compacto {
  padding: 2px !important;
}

/* 11. Efecto hover/turno: sin translate ni scale que desborde */
.mesa-slot-este .asiento-card.activo,
.mesa-slot-oeste .asiento-card.activo {
  transform: none !important;
}

/* 12. line-height apretado dentro de los asientos para que quepan mejor */
.asiento-card * {
  line-height: 1.15 !important;
}

/* ============================================================
   SALDO CUP bajo el nombre del jugador
   ============================================================ */
.asiento-saldo {
  font-size: 9px;
  font-weight: 800;
  color: var(--gold);
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: .3px;
  margin-top: 2px;
  padding: 1px 4px;
  background: rgba(0,0,0,.25);
  border-radius: 4px;
  display: inline-block;
  line-height: 1.2;
}

.asiento-card.soy-yo .asiento-saldo {
  color: var(--accent-2);
  background: rgba(128,224,255,.1);
}

@media (max-width: 700px) {
  .asiento-saldo {
    font-size: 8px;
    padding: 1px 3px;
  }
  .mesa-slot-este .asiento-saldo,
  .mesa-slot-oeste .asiento-saldo {
    font-size: 7px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    padding: 2px 1px;
  }
}

/* ============================================================
   D2-FIX-OVERFLOW — contenido dentro del recuadro
   ============================================================ */
.asiento-card {
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.asiento-card * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.asiento-info {
  min-width: 0 !important;
  overflow: hidden !important;
}

.asiento-nombre {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.asiento-saldo {
  font-size: 9px !important;
  padding: 1px 4px !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Movil: reducir aun mas */
@media (max-width: 700px) {
  .asiento-saldo {
    font-size: 8px !important;
    padding: 0 3px !important;
    line-height: 1.1 !important;
  }
  .mesa-slot-este .asiento-saldo,
  .mesa-slot-oeste .asiento-saldo {
    font-size: 7px !important;
    padding: 1px 2px !important;
    writing-mode: vertical-rl !important;
    text-orientation: mixed !important;
    max-height: 42px !important;
  }
  .asiento-card {
    padding: 3px 5px !important;
    gap: 1px !important;
  }
}

/* ============================================================
   PANEL ECONOMIA v2 — secciones y destacados
   ============================================================ */
.eco-subtitulo {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 6px 0 2px;
  border-top: 1px dashed rgba(255,255,255,.08);
  margin-top: 4px;
}
.eco-subtitulo:first-child { border-top: none; padding-top: 0; }

.eco-saldo {
  background: rgba(128,224,255,.06);
  border-radius: 6px;
  padding: 6px 8px !important;
  margin-bottom: 4px;
}

.eco-neto {
  background: rgba(0,0,0,.25);
  border-radius: 6px;
  padding: 6px 8px !important;
  margin-top: 4px;
}

.eco-pozo {
  background: rgba(255,204,68,.08);
  border-radius: 6px;
  padding: 6px 8px !important;
  margin-top: 2px;
  border: 1px solid rgba(255,204,68,.25);
}
.eco-pozo .eco-lbl { color: var(--gold) !important; font-weight: 900; }

.eco-premio {
  background: rgba(64,208,144,.06);
  border-radius: 6px;
  padding: 6px 8px !important;
}
.eco-premio .eco-lbl { color: var(--green) !important; font-weight: 800; }

.eco-gan {
  background: linear-gradient(90deg, rgba(255,209,102,.12), rgba(255,180,60,.04));
  border-radius: 6px;
  padding: 8px 10px !important;
  margin-top: 4px;
  border-left: 3px solid var(--gold);
}
.eco-gan .eco-lbl { color: var(--gold) !important; font-weight: 900; font-size: 11px; }
.eco-gan .eco-val { font-size: 14px !important; font-weight: 900; }

.eco-info {
  opacity: .7;
  padding-top: 4px !important;
}

.eco-total {
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: 6px !important;
  margin-top: 4px;
  font-weight: 800;
}

/* ============================================================ */
/*  OVERFLOW-MESA-V2 - Datos del jugador siempre dentro del card */
/* ============================================================ */
.asiento-card {
  overflow: hidden !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.asiento-card * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.asiento-header {
  min-width: 0 !important;
  overflow: hidden !important;
}
.asiento-info {
  min-width: 0 !important;
  overflow: hidden !important;
  flex: 1 1 0 !important;
}
.asiento-nombre,
.asiento-meta,
.asiento-saldo,
.fichas-num,
.fichas-extra {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  display: block !important;
}
.asiento-meta {
  font-size: 9px !important;
  line-height: 1.2 !important;
}
.asiento-saldo {
  font-size: 9px !important;
  line-height: 1.2 !important;
  padding: 1px 4px !important;
  margin-top: 2px !important;
}
/* La pila de fichitas no debe reventar el ancho */
.asiento-fichas {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
  justify-content: center !important;
  align-items: flex-end !important;
  max-width: 100% !important;
  padding: 2px 0 !important;
}
.asiento-fichas .ficha-stack {
  flex-shrink: 0 !important;
}
.fichas-num {
  font-size: 9px !important;
  margin-top: 1px !important;
}
/* En movil aun mas apretado */
@media (max-width: 700px) {
  .asiento-nombre { font-size: 8px !important; }
  .asiento-meta { font-size: 7px !important; }
  .asiento-saldo { font-size: 7px !important; padding: 0 3px !important; }
  .asiento-fichas .ficha-stack { width: 4px !important; height: 9px !important; margin-left: -1.5px !important; }
  .fichas-num { font-size: 8px !important; }
}
@media (max-width: 420px) {
  .asiento-nombre { font-size: 7px !important; }
  .asiento-meta { font-size: 6px !important; }
  .asiento-saldo { font-size: 6px !important; }
  .asiento-fichas .ficha-stack { width: 3px !important; height: 7px !important; margin-left: -1px !important; }
}

/* ============================================================
   ASIENTOS-V6 — Layout por zonas, todo visible
   Norte/Sur: horizontal
   Este/Oeste: vertical (texto rotado)
   ============================================================ */

/* ---------- Reset de estilos previos ---------- */
.asiento-card {
  overflow: hidden !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.asiento-card * {
  box-sizing: border-box !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

/* ============ BASE (todos) ============ */
.asiento-card {
  display: flex !important;
  background: linear-gradient(135deg, rgba(20, 26, 36, .96), rgba(13, 18, 26, .96)) !important;
  border: 2px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .5) !important;
  position: relative !important;
}

.asiento-card .asiento-header {
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
  min-width: 0 !important;
  width: 100% !important;
}

.asiento-card .asiento-avatar {
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  position: relative !important;
  border: 1.5px solid rgba(255, 255, 255, .12) !important;
}

.asiento-card .asiento-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}

.asiento-card .asiento-info {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}

.asiento-card .asiento-nombre,
.asiento-card .asiento-meta,
.asiento-card .asiento-saldo {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
  width: 100% !important;
}

.asiento-card .asiento-nombre {
  font-weight: 800 !important;
  line-height: 1.15 !important;
}

.asiento-card .asiento-meta {
  color: var(--text-dim) !important;
  line-height: 1.15 !important;
  opacity: .85 !important;
}

.asiento-card .asiento-saldo {
  color: var(--gold) !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1.2 !important;
  padding: 1px 5px !important;
  background: rgba(0, 0, 0, .35) !important;
  border-radius: 5px !important;
  display: inline-block !important;
  width: auto !important;
  max-width: 100% !important;
  align-self: flex-start !important;
}

.asiento-card .asiento-saldo.sin-saldo {
  color: var(--red) !important;
}

/* ============================================================
   NORTE y SUR — formato horizontal ancho
   ============================================================ */
.mesa-slot-norte .asiento-card,
.mesa-slot-sur .asiento-card {
  flex-direction: row !important;
  padding: 6px 10px !important;
  gap: 8px !important;
  min-width: 140px !important;
  max-width: 220px !important;
  width: auto !important;
}

.mesa-slot-norte .asiento-card .asiento-avatar,
.mesa-slot-sur .asiento-card .asiento-avatar {
  width: 32px !important;
  height: 32px !important;
  font-size: 16px !important;
}

.mesa-slot-norte .asiento-card .asiento-nombre,
.mesa-slot-sur .asiento-card .asiento-nombre {
  font-size: 11px !important;
}

.mesa-slot-norte .asiento-card .asiento-meta,
.mesa-slot-sur .asiento-card .asiento-meta {
  font-size: 9px !important;
}

.mesa-slot-norte .asiento-card .asiento-saldo,
.mesa-slot-sur .asiento-card .asiento-saldo {
  font-size: 9.5px !important;
}

/* ============================================================
   ESTE y OESTE — formato VERTICAL
   El texto se lee de arriba a abajo con writing-mode
   ============================================================ */
.mesa-slot-este .asiento-card,
.mesa-slot-oeste .asiento-card {
  flex-direction: column !important;
  padding: 8px 4px !important;
  gap: 4px !important;
  min-width: 62px !important;
  max-width: 72px !important;
  width: 62px !important;
  align-items: center !important;
}

.mesa-slot-este .asiento-card .asiento-header,
.mesa-slot-oeste .asiento-card .asiento-header {
  flex-direction: column !important;
  gap: 4px !important;
  align-items: center !important;
  width: 100% !important;
}

.mesa-slot-este .asiento-card .asiento-avatar,
.mesa-slot-oeste .asiento-card .asiento-avatar {
  width: 30px !important;
  height: 30px !important;
  font-size: 15px !important;
}

.mesa-slot-este .asiento-card .asiento-info,
.mesa-slot-oeste .asiento-card .asiento-info {
  width: 100% !important;
  align-items: center !important;
  text-align: center !important;
  gap: 4px !important;
}

/* Nombre en VERTICAL */
.mesa-slot-este .asiento-card .asiento-nombre,
.mesa-slot-oeste .asiento-card .asiento-nombre {
  writing-mode: vertical-rl !important;
  text-orientation: mixed !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  width: auto !important;
  max-width: none !important;
  max-height: 80px !important;
  font-size: 10.5px !important;
  line-height: 1 !important;
  letter-spacing: 0.3px !important;
  margin: 0 auto !important;
  display: block !important;
}

/* Meta en VERTICAL */
.mesa-slot-este .asiento-card .asiento-meta,
.mesa-slot-oeste .asiento-card .asiento-meta {
  writing-mode: vertical-rl !important;
  text-orientation: mixed !important;
  font-size: 9px !important;
  line-height: 1 !important;
  max-height: 60px !important;
  width: auto !important;
  margin: 0 auto !important;
  display: block !important;
}

/* Saldo en VERTICAL, caja compacta */
.mesa-slot-este .asiento-card .asiento-saldo,
.mesa-slot-oeste .asiento-card .asiento-saldo {
  writing-mode: vertical-rl !important;
  text-orientation: mixed !important;
  font-size: 9px !important;
  padding: 3px 2px !important;
  max-height: 70px !important;
  max-width: none !important;
  width: auto !important;
  align-self: center !important;
  display: inline-block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 2px auto 0 !important;
}

/* ============================================================
   MOVIL — ajustes mas compactos
   ============================================================ */
@media (max-width: 700px) {
  /* Norte/Sur compactos */
  .mesa-slot-norte .asiento-card,
  .mesa-slot-sur .asiento-card {
    min-width: 110px !important;
    max-width: 160px !important;
    padding: 5px 8px !important;
    gap: 6px !important;
  }
  .mesa-slot-norte .asiento-card .asiento-avatar,
  .mesa-slot-sur .asiento-card .asiento-avatar {
    width: 26px !important; height: 26px !important; font-size: 13px !important;
  }
  .mesa-slot-norte .asiento-card .asiento-nombre,
  .mesa-slot-sur .asiento-card .asiento-nombre { font-size: 10px !important; }
  .mesa-slot-norte .asiento-card .asiento-meta,
  .mesa-slot-sur .asiento-card .asiento-meta { font-size: 8.5px !important; }
  .mesa-slot-norte .asiento-card .asiento-saldo,
  .mesa-slot-sur .asiento-card .asiento-saldo { font-size: 9px !important; }

  /* Este/Oeste mas angostos */
  .mesa-slot-este .asiento-card,
  .mesa-slot-oeste .asiento-card {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    padding: 6px 3px !important;
  }
  .mesa-slot-este .asiento-card .asiento-avatar,
  .mesa-slot-oeste .asiento-card .asiento-avatar {
    width: 24px !important; height: 24px !important; font-size: 12px !important;
  }
  .mesa-slot-este .asiento-card .asiento-nombre,
  .mesa-slot-oeste .asiento-card .asiento-nombre {
    font-size: 9.5px !important;
    max-height: 60px !important;
  }
  .mesa-slot-este .asiento-card .asiento-meta,
  .mesa-slot-oeste .asiento-card .asiento-meta {
    font-size: 8px !important;
    max-height: 45px !important;
  }
  .mesa-slot-este .asiento-card .asiento-saldo,
  .mesa-slot-oeste .asiento-card .asiento-saldo {
    font-size: 8px !important;
    max-height: 55px !important;
    padding: 2px 1px !important;
  }
}

@media (max-width: 420px) {
  .mesa-slot-norte .asiento-card,
  .mesa-slot-sur .asiento-card {
    min-width: 100px !important;
    max-width: 140px !important;
    padding: 4px 6px !important;
  }
  .mesa-slot-norte .asiento-card .asiento-avatar,
  .mesa-slot-sur .asiento-card .asiento-avatar {
    width: 22px !important; height: 22px !important; font-size: 11px !important;
  }
  .mesa-slot-norte .asiento-card .asiento-nombre,
  .mesa-slot-sur .asiento-card .asiento-nombre { font-size: 9px !important; }
  .mesa-slot-norte .asiento-card .asiento-meta,
  .mesa-slot-sur .asiento-card .asiento-meta { font-size: 8px !important; }
  .mesa-slot-norte .asiento-card .asiento-saldo,
  .mesa-slot-sur .asiento-card .asiento-saldo { font-size: 8.5px !important; padding: 1px 4px !important; }

  .mesa-slot-este .asiento-card,
  .mesa-slot-oeste .asiento-card {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    padding: 5px 2px !important;
  }
  .mesa-slot-este .asiento-card .asiento-avatar,
  .mesa-slot-oeste .asiento-card .asiento-avatar {
    width: 20px !important; height: 20px !important; font-size: 10px !important;
  }
  .mesa-slot-este .asiento-card .asiento-nombre,
  .mesa-slot-oeste .asiento-card .asiento-nombre {
    font-size: 8.5px !important;
    max-height: 50px !important;
  }
  .mesa-slot-este .asiento-card .asiento-meta,
  .mesa-slot-oeste .asiento-card .asiento-meta {
    font-size: 7.5px !important;
    max-height: 40px !important;
  }
  .mesa-slot-este .asiento-card .asiento-saldo,
  .mesa-slot-oeste .asiento-card .asiento-saldo {
    font-size: 7.5px !important;
    max-height: 45px !important;
  }
}

/* ============================================================
   ASIENTOS-V6
   ============================================================ */

/* ============================================================
   ASIENTOS-V7-NUCLEAR — especificidad maxima, nada se sale
   ============================================================ */

/* ---------- RESET GENERAL ---------- */
html body .mesa-contenedor .mesa-slot .asiento-card,
html body .mesa-contenedor .mesa-slot .asiento-card * {
  box-sizing: border-box !important;
  max-width: none !important;
  overflow: visible !important;
  margin: 0 !important;
}

html body .mesa-contenedor .mesa-slot .asiento-card {
  overflow: hidden !important;
  display: flex !important;
  background: linear-gradient(135deg, rgba(20, 26, 36, .96), rgba(13, 18, 26, .96)) !important;
  border: 2px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .5) !important;
  position: relative !important;
  padding: 0 !important;
}

/* ============================================================
   NORTE / SUR — HORIZONTAL, mucho mas anchos
   ============================================================ */
html body .mesa-contenedor .mesa-slot-norte .asiento-card,
html body .mesa-contenedor .mesa-slot-sur .asiento-card {
  flex-direction: row !important;
  align-items: center !important;
  padding: 10px 14px !important;
  gap: 12px !important;
  width: auto !important;
  min-width: 180px !important;
  max-width: 260px !important;
}

html body .mesa-contenedor .mesa-slot-norte .asiento-header,
html body .mesa-contenedor .mesa-slot-sur .asiento-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
}

html body .mesa-contenedor .mesa-slot-norte .asiento-avatar,
html body .mesa-contenedor .mesa-slot-sur .asiento-avatar {
  width: 38px !important;
  height: 38px !important;
  font-size: 20px !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 255, 255, .15) !important;
}

html body .mesa-contenedor .mesa-slot-norte .asiento-info,
html body .mesa-contenedor .mesa-slot-sur .asiento-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

html body .mesa-contenedor .mesa-slot-norte .asiento-nombre,
html body .mesa-contenedor .mesa-slot-sur .asiento-nombre {
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body .mesa-contenedor .mesa-slot-norte .asiento-meta,
html body .mesa-contenedor .mesa-slot-sur .asiento-meta {
  font-size: 11px !important;
  line-height: 1.2 !important;
  color: var(--text-dim) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body .mesa-contenedor .mesa-slot-norte .asiento-saldo,
html body .mesa-contenedor .mesa-slot-sur .asiento-saldo {
  font-size: 12px !important;
  font-weight: 900 !important;
  color: var(--gold) !important;
  font-variant-numeric: tabular-nums !important;
  padding: 3px 8px !important;
  background: rgba(0, 0, 0, .4) !important;
  border-radius: 6px !important;
  display: inline-block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  align-self: flex-start !important;
}

/* ============================================================
   ESTE / OESTE — VERTICAL, agrandados
   ============================================================ */
html body .mesa-contenedor .mesa-slot-este .asiento-card,
html body .mesa-contenedor .mesa-slot-oeste .asiento-card {
  flex-direction: column !important;
  align-items: center !important;
  padding: 12px 8px !important;
  gap: 8px !important;
  width: 90px !important;
  min-width: 90px !important;
  max-width: 90px !important;
}

html body .mesa-contenedor .mesa-slot-este .asiento-header,
html body .mesa-contenedor .mesa-slot-oeste .asiento-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
}

html body .mesa-contenedor .mesa-slot-este .asiento-avatar,
html body .mesa-contenedor .mesa-slot-oeste .asiento-avatar {
  width: 40px !important;
  height: 40px !important;
  font-size: 20px !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 255, 255, .15) !important;
}

html body .mesa-contenedor .mesa-slot-este .asiento-info,
html body .mesa-contenedor .mesa-slot-oeste .asiento-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* Nombre rotado 90 grados, horizontal-rl para que se lea al reves */
html body .mesa-contenedor .mesa-slot-este .asiento-nombre,
html body .mesa-contenedor .mesa-slot-oeste .asiento-nombre {
  writing-mode: vertical-lr !important;
  text-orientation: mixed !important;
  transform: rotate(180deg) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.5px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-height: 90px !important;
  max-width: none !important;
  display: block !important;
  margin: 0 auto !important;
  color: var(--text) !important;
}

html body .mesa-contenedor .mesa-slot-este .asiento-meta,
html body .mesa-contenedor .mesa-slot-oeste .asiento-meta {
  writing-mode: vertical-lr !important;
  text-orientation: mixed !important;
  transform: rotate(180deg) !important;
  font-size: 10px !important;
  line-height: 1 !important;
  max-height: 70px !important;
  max-width: none !important;
  display: block !important;
  margin: 0 auto !important;
  color: var(--text-dim) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body .mesa-contenedor .mesa-slot-este .asiento-saldo,
html body .mesa-contenedor .mesa-slot-oeste .asiento-saldo {
  writing-mode: vertical-lr !important;
  text-orientation: mixed !important;
  transform: rotate(180deg) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  color: var(--gold) !important;
  font-variant-numeric: tabular-nums !important;
  padding: 6px 3px !important;
  background: rgba(0, 0, 0, .4) !important;
  border-radius: 6px !important;
  max-height: 80px !important;
  max-width: none !important;
  width: auto !important;
  display: inline-block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 0 auto !important;
  align-self: center !important;
}

/* ============================================================
   MOVIL — reducir proporcionalmente
   ============================================================ */
@media (max-width: 700px) {
  html body .mesa-contenedor .mesa-slot-norte .asiento-card,
  html body .mesa-contenedor .mesa-slot-sur .asiento-card {
    padding: 7px 10px !important;
    gap: 8px !important;
    min-width: 130px !important;
    max-width: 190px !important;
  }
  html body .mesa-contenedor .mesa-slot-norte .asiento-avatar,
  html body .mesa-contenedor .mesa-slot-sur .asiento-avatar {
    width: 30px !important; height: 30px !important; font-size: 16px !important;
  }
  html body .mesa-contenedor .mesa-slot-norte .asiento-nombre,
  html body .mesa-contenedor .mesa-slot-sur .asiento-nombre { font-size: 11px !important; }
  html body .mesa-contenedor .mesa-slot-norte .asiento-meta,
  html body .mesa-contenedor .mesa-slot-sur .asiento-meta { font-size: 9px !important; }
  html body .mesa-contenedor .mesa-slot-norte .asiento-saldo,
  html body .mesa-contenedor .mesa-slot-sur .asiento-saldo { font-size: 10px !important; padding: 2px 6px !important; }

  html body .mesa-contenedor .mesa-slot-este .asiento-card,
  html body .mesa-contenedor .mesa-slot-oeste .asiento-card {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    padding: 10px 6px !important;
    gap: 6px !important;
  }
  html body .mesa-contenedor .mesa-slot-este .asiento-avatar,
  html body .mesa-contenedor .mesa-slot-oeste .asiento-avatar {
    width: 32px !important; height: 32px !important; font-size: 16px !important;
  }
  html body .mesa-contenedor .mesa-slot-este .asiento-nombre,
  html body .mesa-contenedor .mesa-slot-oeste .asiento-nombre {
    font-size: 10px !important; max-height: 70px !important;
  }
  html body .mesa-contenedor .mesa-slot-este .asiento-meta,
  html body .mesa-contenedor .mesa-slot-oeste .asiento-meta {
    font-size: 8.5px !important; max-height: 55px !important;
  }
  html body .mesa-contenedor .mesa-slot-este .asiento-saldo,
  html body .mesa-contenedor .mesa-slot-oeste .asiento-saldo {
    font-size: 9px !important; max-height: 60px !important; padding: 5px 2px !important;
  }

  /* Grid de la mesa: dar mas ancho a los laterales */
  html body .mesa-contenedor {
    grid-template-columns: 100px 1fr 100px !important;
  }
}

@media (max-width: 420px) {
  html body .mesa-contenedor .mesa-slot-norte .asiento-card,
  html body .mesa-contenedor .mesa-slot-sur .asiento-card {
    padding: 6px 8px !important;
    gap: 6px !important;
    min-width: 116px !important;
    max-width: 160px !important;
  }
  html body .mesa-contenedor .mesa-slot-norte .asiento-avatar,
  html body .mesa-contenedor .mesa-slot-sur .asiento-avatar {
    width: 26px !important; height: 26px !important; font-size: 14px !important;
  }
  html body .mesa-contenedor .mesa-slot-norte .asiento-nombre,
  html body .mesa-contenedor .mesa-slot-sur .asiento-nombre { font-size: 10px !important; }
  html body .mesa-contenedor .mesa-slot-norte .asiento-meta,
  html body .mesa-contenedor .mesa-slot-sur .asiento-meta { font-size: 8.5px !important; }
  html body .mesa-contenedor .mesa-slot-norte .asiento-saldo,
  html body .mesa-contenedor .mesa-slot-sur .asiento-saldo { font-size: 9px !important; }

  html body .mesa-contenedor .mesa-slot-este .asiento-card,
  html body .mesa-contenedor .mesa-slot-oeste .asiento-card {
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    padding: 8px 5px !important;
  }
  html body .mesa-contenedor .mesa-slot-este .asiento-avatar,
  html body .mesa-contenedor .mesa-slot-oeste .asiento-avatar {
    width: 28px !important; height: 28px !important; font-size: 14px !important;
  }
  html body .mesa-contenedor .mesa-slot-este .asiento-nombre,
  html body .mesa-contenedor .mesa-slot-oeste .asiento-nombre {
    font-size: 9px !important; max-height: 58px !important;
  }
  html body .mesa-contenedor .mesa-slot-este .asiento-meta,
  html body .mesa-contenedor .mesa-slot-oeste .asiento-meta {
    font-size: 8px !important; max-height: 45px !important;
  }
  html body .mesa-contenedor .mesa-slot-este .asiento-saldo,
  html body .mesa-contenedor .mesa-slot-oeste .asiento-saldo {
    font-size: 8px !important; max-height: 50px !important;
  }

  html body .mesa-contenedor {
    grid-template-columns: 84px 1fr 84px !important;
  }
}

/* ============================================================
   ASIENTOS-V7-NUCLEAR
   ============================================================ */

/* ============================================================
   FIX-NOMBRE-FICHAS — que se vea todo el nombre y las fichas
   ============================================================ */

/* ---------- NORTE / SUR ---------- */
html body .mesa-contenedor .mesa-slot-norte .asiento-card,
html body .mesa-contenedor .mesa-slot-sur .asiento-card {
  min-width: 200px !important;
  max-width: 300px !important;
  padding: 10px 16px !important;
}

/* Nombre: fuente mas chica + sin ellipsis agresivo */
html body .mesa-contenedor .mesa-slot-norte .asiento-nombre,
html body .mesa-contenedor .mesa-slot-sur .asiento-nombre {
  font-size: 12px !important;
  text-overflow: clip !important;
  overflow: visible !important;
}

html body .mesa-contenedor .mesa-slot-norte .asiento-meta,
html body .mesa-contenedor .mesa-slot-sur .asiento-meta {
  font-size: 10.5px !important;
  text-overflow: clip !important;
  overflow: visible !important;
  letter-spacing: 0 !important;
}

html body .mesa-contenedor .mesa-slot-norte .asiento-saldo,
html body .mesa-contenedor .mesa-slot-sur .asiento-saldo {
  font-size: 11px !important;
  padding: 2px 7px !important;
}

/* ---------- ESTE / OESTE ---------- */
html body .mesa-contenedor .mesa-slot-este .asiento-card,
html body .mesa-contenedor .mesa-slot-oeste .asiento-card {
  width: 100px !important;
  min-width: 100px !important;
  max-width: 100px !important;
  padding: 10px 6px !important;
  gap: 6px !important;
}

/* El nombre se ve completo: sin ellipsis, sin cortar, hasta 130px de alto */
html body .mesa-contenedor .mesa-slot-este .asiento-nombre,
html body .mesa-contenedor .mesa-slot-oeste .asiento-nombre {
  writing-mode: vertical-lr !important;
  text-orientation: mixed !important;
  transform: rotate(180deg) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  max-height: 140px !important;
  width: auto !important;
  display: block !important;
  margin: 0 auto !important;
}

/* Meta: fichas + pts, hasta 110px de alto */
html body .mesa-contenedor .mesa-slot-este .asiento-meta,
html body .mesa-contenedor .mesa-slot-oeste .asiento-meta {
  writing-mode: vertical-lr !important;
  text-orientation: mixed !important;
  transform: rotate(180deg) !important;
  font-size: 9.5px !important;
  letter-spacing: 0.2px !important;
  line-height: 1 !important;
  max-height: 110px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  display: block !important;
  margin: 0 auto !important;
}

/* Saldo: hasta 100px de alto */
html body .mesa-contenedor .mesa-slot-este .asiento-saldo,
html body .mesa-contenedor .mesa-slot-oeste .asiento-saldo {
  writing-mode: vertical-lr !important;
  text-orientation: mixed !important;
  transform: rotate(180deg) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  padding: 8px 3px !important;
  max-height: 100px !important;
  width: auto !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  display: inline-block !important;
  margin: 0 auto !important;
}

/* Avatar tambien mas grande */
html body .mesa-contenedor .mesa-slot-este .asiento-avatar,
html body .mesa-contenedor .mesa-slot-oeste .asiento-avatar {
  width: 44px !important;
  height: 44px !important;
  font-size: 22px !important;
}

/* ---------- MOVIL ---------- */
@media (max-width: 700px) {
  html body .mesa-contenedor .mesa-slot-norte .asiento-card,
  html body .mesa-contenedor .mesa-slot-sur .asiento-card {
    min-width: 150px !important;
    max-width: 220px !important;
    padding: 8px 12px !important;
  }
  html body .mesa-contenedor .mesa-slot-norte .asiento-nombre,
  html body .mesa-contenedor .mesa-slot-sur .asiento-nombre { font-size: 11px !important; }
  html body .mesa-contenedor .mesa-slot-norte .asiento-meta,
  html body .mesa-contenedor .mesa-slot-sur .asiento-meta { font-size: 9.5px !important; }

  html body .mesa-contenedor .mesa-slot-este .asiento-card,
  html body .mesa-contenedor .mesa-slot-oeste .asiento-card {
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    padding: 8px 5px !important;
  }
  html body .mesa-contenedor .mesa-slot-este .asiento-nombre,
  html body .mesa-contenedor .mesa-slot-oeste .asiento-nombre {
    font-size: 10px !important;
    max-height: 120px !important;
  }
  html body .mesa-contenedor .mesa-slot-este .asiento-meta,
  html body .mesa-contenedor .mesa-slot-oeste .asiento-meta {
    font-size: 9px !important;
    max-height: 95px !important;
  }
  html body .mesa-contenedor .mesa-slot-este .asiento-saldo,
  html body .mesa-contenedor .mesa-slot-oeste .asiento-saldo {
    font-size: 9px !important;
    max-height: 85px !important;
    padding: 6px 2px !important;
  }
  html body .mesa-contenedor .mesa-slot-este .asiento-avatar,
  html body .mesa-contenedor .mesa-slot-oeste .asiento-avatar {
    width: 36px !important; height: 36px !important; font-size: 18px !important;
  }
  html body .mesa-contenedor {
    grid-template-columns: 108px 1fr 108px !important;
  }
}

@media (max-width: 420px) {
  html body .mesa-contenedor .mesa-slot-norte .asiento-card,
  html body .mesa-contenedor .mesa-slot-sur .asiento-card {
    min-width: 130px !important;
    max-width: 190px !important;
    padding: 6px 10px !important;
  }
  html body .mesa-contenedor .mesa-slot-norte .asiento-nombre,
  html body .mesa-contenedor .mesa-slot-sur .asiento-nombre { font-size: 10px !important; }
  html body .mesa-contenedor .mesa-slot-norte .asiento-meta,
  html body .mesa-contenedor .mesa-slot-sur .asiento-meta { font-size: 9px !important; }

  html body .mesa-contenedor .mesa-slot-este .asiento-card,
  html body .mesa-contenedor .mesa-slot-oeste .asiento-card {
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
    padding: 7px 4px !important;
  }
  html body .mesa-contenedor .mesa-slot-este .asiento-nombre,
  html body .mesa-contenedor .mesa-slot-oeste .asiento-nombre {
    font-size: 9px !important;
    max-height: 105px !important;
  }
  html body .mesa-contenedor .mesa-slot-este .asiento-meta,
  html body .mesa-contenedor .mesa-slot-oeste .asiento-meta {
    font-size: 8.5px !important;
    max-height: 80px !important;
  }
  html body .mesa-contenedor .mesa-slot-este .asiento-saldo,
  html body .mesa-contenedor .mesa-slot-oeste .asiento-saldo {
    font-size: 8.5px !important;
    max-height: 72px !important;
  }
  html body .mesa-contenedor .mesa-slot-este .asiento-avatar,
  html body .mesa-contenedor .mesa-slot-oeste .asiento-avatar {
    width: 32px !important; height: 32px !important; font-size: 16px !important;
  }
  html body .mesa-contenedor {
    grid-template-columns: 92px 1fr 92px !important;
  }
}

/* ============================================================
   FIX-NOMBRE-FICHAS
   ============================================================ */

/* ============================================================
   ASIENTOS-TRANSPARENTES — mas angostos (este/oeste) + translucidos
   ============================================================ */

/* ============ BASE: efecto cristal en todos ============ */
html body .mesa-contenedor .mesa-slot .asiento-card {
  background: linear-gradient(135deg, rgba(20, 26, 36, .72), rgba(13, 18, 26, .72)) !important;
  backdrop-filter: blur(6px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(6px) saturate(130%) !important;
  border-color: rgba(255, 255, 255, .12) !important;
}

/* El activo (turno) mantiene un poco mas de opacidad para que destaque */
html body .mesa-contenedor .mesa-slot .asiento-card.activo {
  background: linear-gradient(135deg, rgba(255, 209, 102, .22), rgba(255, 180, 60, .12)) !important;
  backdrop-filter: blur(8px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(150%) !important;
}

/* ============================================================
   ESTE / OESTE — mas angostos
   ============================================================ */
html body .mesa-contenedor .mesa-slot-este .asiento-card,
html body .mesa-contenedor .mesa-slot-oeste .asiento-card {
  width: 78px !important;
  min-width: 78px !important;
  max-width: 78px !important;
  padding: 10px 5px !important;
  gap: 6px !important;
}

html body .mesa-contenedor .mesa-slot-este .asiento-avatar,
html body .mesa-contenedor .mesa-slot-oeste .asiento-avatar {
  width: 40px !important;
  height: 40px !important;
  font-size: 20px !important;
}

/* Ajustamos las lineas verticales al nuevo ancho */
html body .mesa-contenedor .mesa-slot-este .asiento-nombre,
html body .mesa-contenedor .mesa-slot-oeste .asiento-nombre {
  font-size: 11px !important;
  max-height: 130px !important;
}

html body .mesa-contenedor .mesa-slot-este .asiento-meta,
html body .mesa-contenedor .mesa-slot-oeste .asiento-meta {
  font-size: 9.5px !important;
  max-height: 100px !important;
}

html body .mesa-contenedor .mesa-slot-este .asiento-saldo,
html body .mesa-contenedor .mesa-slot-oeste .asiento-saldo {
  font-size: 10px !important;
  max-height: 95px !important;
  padding: 7px 3px !important;
}

/* ============================================================
   MOVIL — proporcion mas chico todavia
   ============================================================ */
@media (max-width: 700px) {
  html body .mesa-contenedor .mesa-slot-este .asiento-card,
  html body .mesa-contenedor .mesa-slot-oeste .asiento-card {
    width: 66px !important;
    min-width: 66px !important;
    max-width: 66px !important;
    padding: 8px 4px !important;
  }
  html body .mesa-contenedor .mesa-slot-este .asiento-avatar,
  html body .mesa-contenedor .mesa-slot-oeste .asiento-avatar {
    width: 32px !important; height: 32px !important; font-size: 16px !important;
  }
  html body .mesa-contenedor .mesa-slot-este .asiento-nombre,
  html body .mesa-contenedor .mesa-slot-oeste .asiento-nombre {
    font-size: 10px !important;
    max-height: 110px !important;
  }
  html body .mesa-contenedor .mesa-slot-este .asiento-meta,
  html body .mesa-contenedor .mesa-slot-oeste .asiento-meta {
    font-size: 9px !important;
    max-height: 85px !important;
  }
  html body .mesa-contenedor .mesa-slot-este .asiento-saldo,
  html body .mesa-contenedor .mesa-slot-oeste .asiento-saldo {
    font-size: 9px !important;
    max-height: 80px !important;
    padding: 6px 2px !important;
  }
  html body .mesa-contenedor {
    grid-template-columns: 88px 1fr 88px !important;
  }
}

@media (max-width: 420px) {
  html body .mesa-contenedor .mesa-slot-este .asiento-card,
  html body .mesa-contenedor .mesa-slot-oeste .asiento-card {
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    padding: 7px 3px !important;
  }
  html body .mesa-contenedor .mesa-slot-este .asiento-avatar,
  html body .mesa-contenedor .mesa-slot-oeste .asiento-avatar {
    width: 28px !important; height: 28px !important; font-size: 14px !important;
  }
  html body .mesa-contenedor .mesa-slot-este .asiento-nombre,
  html body .mesa-contenedor .mesa-slot-oeste .asiento-nombre {
    font-size: 9px !important;
    max-height: 95px !important;
  }
  html body .mesa-contenedor .mesa-slot-este .asiento-meta,
  html body .mesa-contenedor .mesa-slot-oeste .asiento-meta {
    font-size: 8.5px !important;
    max-height: 75px !important;
  }
  html body .mesa-contenedor .mesa-slot-este .asiento-saldo,
  html body .mesa-contenedor .mesa-slot-oeste .asiento-saldo {
    font-size: 8.5px !important;
    max-height: 70px !important;
  }
  html body .mesa-contenedor {
    grid-template-columns: 74px 1fr 74px !important;
  }
}

/* ============================================================
   ASIENTOS-TRANSPARENTES
   ============================================================ */

/* ============================================================
   TURNO-INDICADOR — marco dorado + indicador de turno
   Visible para TODOS los jugadores, sutil pero claro
   ============================================================ */

/* ---------- Base: marco dorado animado ---------- */
html body .mesa-contenedor .mesa-slot .asiento-card.turno-activo {
  position: relative !important;
  border-color: #ffd166 !important;
  border-width: 2.5px !important;
  background:
    linear-gradient(135deg,
      rgba(255, 209, 102, .18) 0%,
      rgba(20, 26, 36, .72) 55%,
      rgba(13, 18, 26, .72) 100%) !important;
  backdrop-filter: blur(8px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(150%) !important;
  animation: turnoPulsoSuave 2.2s ease-in-out infinite !important;
  z-index: 5 !important;
}

@keyframes turnoPulsoSuave {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(255, 209, 102, 0),
      0 4px 12px rgba(0, 0, 0, .5),
      inset 0 0 8px rgba(255, 209, 102, .1);
  }
  50% {
    box-shadow:
      0 0 0 4px rgba(255, 209, 102, .15),
      0 4px 16px rgba(0, 0, 0, .5),
      inset 0 0 14px rgba(255, 209, 102, .22);
  }
}

/* ---------- Nombre del jugador en turno: dorado ---------- */
html body .mesa-contenedor .mesa-slot .asiento-card.turno-activo .asiento-nombre {
  color: #ffd166 !important;
  text-shadow: 0 0 8px rgba(255, 209, 102, .5) !important;
}

/* ---------- Avatar con anillo dorado ---------- */
html body .mesa-contenedor .mesa-slot .asiento-card.turno-activo .asiento-avatar {
  border-color: #ffd166 !important;
  border-width: 2.5px !important;
  box-shadow:
    0 0 0 2px rgba(255, 209, 102, .3),
    0 0 12px rgba(255, 209, 102, .6) !important;
  animation: avatarPulsoTurno 2.2s ease-in-out infinite !important;
}

@keyframes avatarPulsoTurno {
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(255, 209, 102, .3),
      0 0 12px rgba(255, 209, 102, .6);
  }
  50% {
    box-shadow:
      0 0 0 3px rgba(255, 209, 102, .5),
      0 0 18px rgba(255, 209, 102, .9);
  }
}

/* ---------- Punto "TURNO" pulsante ---------- */
html body .mesa-contenedor .mesa-slot .asiento-card.turno-activo::before {
  content: '● TURNO' !important;
  position: absolute !important;
  top: -8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(135deg, #ffd166 0%, #ffaa00 100%) !important;
  color: #1a1a1a !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: 0.8px !important;
  padding: 2px 8px !important;
  border-radius: 10px !important;
  white-space: nowrap !important;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, .5),
    0 0 10px rgba(255, 209, 102, .6) !important;
  z-index: 10 !important;
  animation: badgeTurnoAnim 2.2s ease-in-out infinite !important;
  pointer-events: none !important;
}

@keyframes badgeTurnoAnim {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50%      { transform: translateX(-50%) scale(1.08); }
}

/* ---------- Barra superior dorada como refuerzo ---------- */
html body .mesa-contenedor .mesa-slot .asiento-card.turno-activo::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg,
    transparent 0%,
    #ffd166 20%,
    #ffaa00 50%,
    #ffd166 80%,
    transparent 100%) !important;
  border-radius: 10px 10px 0 0 !important;
  animation: barraTurnoBrillo 2.2s ease-in-out infinite !important;
  pointer-events: none !important;
}

@keyframes barraTurnoBrillo {
  0%, 100% { opacity: .5; }
  50%      { opacity: 1; }
}

/* ============================================================
   Ajuste por asiento
   ============================================================ */

/* Norte / Sur: el badge de TURNO va bien arriba */
html body .mesa-contenedor .mesa-slot-norte .asiento-card.turno-activo::before,
html body .mesa-contenedor .mesa-slot-sur .asiento-card.turno-activo::before {
  top: -9px !important;
  font-size: 9.5px !important;
  padding: 2px 10px !important;
}

/* Este / Oeste: el badge se pone arriba tambien, no en el lateral */
html body .mesa-contenedor .mesa-slot-este .asiento-card.turno-activo::before,
html body .mesa-contenedor .mesa-slot-oeste .asiento-card.turno-activo::before {
  top: -8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-size: 8.5px !important;
  padding: 2px 7px !important;
  letter-spacing: 0.5px !important;
}

/* ============================================================
   MOVIL — mas discreto
   ============================================================ */
@media (max-width: 700px) {
  html body .mesa-contenedor .mesa-slot .asiento-card.turno-activo {
    border-width: 2px !important;
  }
  html body .mesa-contenedor .mesa-slot .asiento-card.turno-activo::before {
    font-size: 8px !important;
    padding: 1px 6px !important;
    top: -7px !important;
  }
  html body .mesa-contenedor .mesa-slot .asiento-card.turno-activo::after {
    height: 2.5px !important;
  }
}

@media (max-width: 420px) {
  html body .mesa-contenedor .mesa-slot .asiento-card.turno-activo::before {
    content: '●' !important;
    font-size: 10px !important;
    padding: 1px 5px !important;
  }
}

/* ============================================================
   TURNO-INDICADOR
   ============================================================ */

/* ============================================================
   AVATAR-REDONDO — todos los avatares de asiento son circulos
   ============================================================ */

/* Fuerza circular en todos los avatares */
html body .mesa-contenedor .asiento-card .asiento-avatar,
html body .mesa-contenedor .asiento-card .asiento-avatar img,
html body .mesa-contenedor .asiento-card .asiento-avatar > * {
  border-radius: 50% !important;
  overflow: hidden !important;
  aspect-ratio: 1 / 1 !important;
}

/* Aseguramos el overflow oculto (para que la imagen no se salga del circulo) */
html body .mesa-contenedor .asiento-card .asiento-avatar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  position: relative !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

/* El texto emoji centrado verticalmente */
html body .mesa-contenedor .asiento-card .asiento-avatar > span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  line-height: 1 !important;
}

/* La imagen ocupa todo el circulo sin deformarse */
html body .mesa-contenedor .asiento-card .asiento-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* El puntito de estado sigue siendo redondo y se queda en la esquina */
html body .mesa-contenedor .asiento-card .asiento-avatar .asiento-dot,
html body .mesa-contenedor .asiento-card .asiento-avatar > span.asiento-dot {
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
  position: absolute !important;
  bottom: -2px !important;
  right: -2px !important;
  width: 12px !important;
  height: 12px !important;
  border: 2px solid var(--bg-0) !important;
  z-index: 2 !important;
}

/* Cuando el jugador tiene el turno, el anillo se mantiene redondo */
html body .mesa-contenedor .asiento-card.turno-activo .asiento-avatar,
html body .mesa-contenedor .asiento-card.activo .asiento-avatar {
  border-radius: 50% !important;
  overflow: hidden !important;
}

/* ============================================================
   AVATAR-REDONDO
   ============================================================ */

/* ============================================================
   AVATAR-REDONDO — todos los avatares de asiento son circulos
   ============================================================ */

/* Fuerza circular en todos los avatares */
html body .mesa-contenedor .asiento-card .asiento-avatar,
html body .mesa-contenedor .asiento-card .asiento-avatar img,
html body .mesa-contenedor .asiento-card .asiento-avatar > * {
  border-radius: 50% !important;
  overflow: hidden !important;
  aspect-ratio: 1 / 1 !important;
}

/* Aseguramos el overflow oculto (para que la imagen no se salga del circulo) */
html body .mesa-contenedor .asiento-card .asiento-avatar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  position: relative !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

/* El texto emoji centrado verticalmente */
html body .mesa-contenedor .asiento-card .asiento-avatar > span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  line-height: 1 !important;
}

/* La imagen ocupa todo el circulo sin deformarse */
html body .mesa-contenedor .asiento-card .asiento-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* El puntito de estado sigue siendo redondo y se queda en la esquina */
html body .mesa-contenedor .asiento-card .asiento-avatar .asiento-dot,
html body .mesa-contenedor .asiento-card .asiento-avatar > span.asiento-dot {
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
  position: absolute !important;
  bottom: -2px !important;
  right: -2px !important;
  width: 12px !important;
  height: 12px !important;
  border: 2px solid var(--bg-0) !important;
  z-index: 2 !important;
}

/* Cuando el jugador tiene el turno, el anillo se mantiene redondo */
html body .mesa-contenedor .asiento-card.turno-activo .asiento-avatar,
html body .mesa-contenedor .asiento-card.activo .asiento-avatar {
  border-radius: 50% !important;
  overflow: hidden !important;
}

/* ============================================================
   AVATAR-REDONDO
   ============================================================ */