/* Solo mirar y mesa central (js/espectador.js, docs/Modo espectador.md,
   docs/Mesa central.md). Va la última: gana a movil.css.

   .modo-mirar: espectador o sin sesión. Sin barra de acción ni nada que sirva
   para jugar; el Registro y el chat (solo leer) siguen. */
.modo-mirar .acciones, .modo-mirar #b-ausencia,
.modo-mirar #b-voz, .modo-mirar #b-micro, .modo-mirar #form-chat,
.modo-mirar .programa .botonera, .modo-mirar .editar-hora, .modo-mirar .entradas { display: none !important; }
.modo-mirar .escenario { grid-template-rows: minmax(0, 1fr); }

/* .modo-pantalla: la tablet en medio de la mesa. Además, todo en grande, sin
   panel y cartas que se leen desde los dos lados (índice también girado 180°). */
.modo-pantalla { --ancho-panel: 0px; }
.modo-pantalla .zona { grid-template-columns: minmax(0, 1fr); }
.modo-pantalla .panel, .modo-pantalla #b-lobby, .modo-pantalla #b-compartir,
.modo-pantalla #b-panel, .modo-pantalla #b-perfil, .modo-pantalla #b-salir,
.modo-pantalla #b-jugar, .modo-pantalla #b-entrar-google { display: none !important; }
.modo-pantalla .barra { min-height: 44px; }
.modo-pantalla .marca span:not(.logo), .modo-pantalla #b-colores { display: none; }
.modo-pantalla .info-torneo { font-size: clamp(14px, 1.8vw, 22px); }
.modo-pantalla .info-torneo .opcional { display: inline; }

.modo-pantalla .mesa {
  --carta-ancho: clamp(56px, 13.5cqmin, 190px);
  --ancho-asiento: clamp(150px, min(33cqmin, 27cqw), 340px);
  --tf-mesa: clamp(18px, 4.4cqmin, 40px);
}
.modo-pantalla .baranda { inset: 11% 8% 13% 8%; }
.modo-pantalla .comunitarias { gap: clamp(6px, 1.2cqmin, 14px); }
.modo-pantalla .avatar { width: clamp(40px, 7cqmin, 72px); height: clamp(40px, 7cqmin, 72px); font-size: clamp(16px, 3cqmin, 30px); }
.modo-pantalla .placa { gap: clamp(8px, 1.4cqmin, 14px); padding: 6px 12px 6px 6px; }
.modo-pantalla .nombre { font-size: clamp(15px, 2.7cqmin, 28px); }
.modo-pantalla .fichas-asiento, .modo-pantalla .banco-turno { font-size: clamp(15px, 2.9cqmin, 30px); }
.modo-pantalla .etiqueta { font-size: clamp(10px, 1.7cqmin, 16px); top: -12px; }
.modo-pantalla .ultima-accion { font-size: clamp(12px, 2.2cqmin, 22px); bottom: calc(-1 * clamp(22px, 4cqmin, 38px)); }
.modo-pantalla .apuesta .cantidad, .modo-pantalla .bote .cantidad { font-size: clamp(14px, 2.8cqmin, 30px); padding: 2px 12px; }
.modo-pantalla .dealer { width: clamp(26px, 4.6cqmin, 46px); height: clamp(26px, 4.6cqmin, 46px); font-size: clamp(13px, 2.2cqmin, 22px); }
.modo-pantalla .mensaje-mesa { font-size: clamp(18px, 3.2cqmin, 34px); }
.modo-pantalla .asiento.libre .texto-libre { font-size: clamp(13px, 2.2cqmin, 20px); }

/* Cartas de dos lados, como las de verdad: índice arriba a la izquierda,
   el mismo girado abajo a la derecha y el palo en el centro. */
.modo-pantalla .carta .indice { font-size: calc(var(--carta-ancho) * .3); }
.modo-pantalla .carta .indice.girado { display: grid; left: auto; top: auto; right: 8%; bottom: 4%; transform: rotate(180deg); }
.modo-pantalla .carta .palo-grande {
  right: auto; bottom: auto; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: calc(var(--carta-ancho) * .5);
}

/* Mesa central: los bocadillos del chat, legibles desde lejos. */
.modo-pantalla .burbuja { font-size: clamp(16px, 2.2cqmin, 24px); padding: 6px 12px; }