/* =====================================================================
   Ajustes de pantalla chica (celular parado bajito, celular acostado)
   Va último a propósito: reemplaza reglas de las otras hojas.
   ===================================================================== */

/* ---------- celular y tablet: fichas de modo en una sola fila ---------- */
@media (max-width: 979px) {
  .mode-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .mode-tile { padding: 6px 4px; border-radius: 12px; }
  .mode-icon { font-size: 1.3rem; }
  .mode-title { font-size: 0.74rem; line-height: 1.15; }
  .mode-tag { display: none; }
}

/* ---------- celular parado de pantalla bajita: el panel de abajo más compacto ---------- */
@media (max-width: 979px) and (orientation: portrait) and (max-height: 760px) {
  .action-dock { max-height: 46dvh; gap: 6px; padding-top: 6px; }
  .my-cards .card3d { width: 40px; height: 60px; }
  .my-hand { gap: 8px; }
  .choice-tile { min-height: 64px; padding: 8px 6px; border-radius: 16px; }
  .choice-icon { font-size: 1.4rem; }
  .choice-title { font-size: 1rem; }
  .choice-sub { font-size: 0.7rem; }
  .mode-panel { padding: 8px; gap: 6px; }
  .mode-text { font-size: 0.76rem; }
  .amount-field input { min-height: 40px; }
  .mode-cta { min-height: 40px; }
}
@media (max-width: 979px) and (orientation: portrait) and (max-height: 680px) {
  .mode-text, .choice-sub { display: none; }
}

/* ---------- celular acostado: el panel de la derecha arranca arriba (sin estirar botones) ---------- */
@media (max-width: 979px) and (orientation: landscape) and (max-height: 520px) {
  .action-dock { align-content: start; gap: 6px; padding-top: 8px; }
  /* Código, fase y botones en un solo renglón: más alto para la mesa. */
  .table-head { flex-wrap: nowrap; align-items: center; }
  .phase { order: 0; flex: 1 1 auto; flex-basis: auto; min-width: 0; font-size: 0.78rem; text-align: center; }
  .table-head .code { font-size: 0.85rem; }
  .my-cards .card3d { width: 40px; height: 60px; }
  .choice-tile { min-height: 60px; padding: 6px; border-radius: 14px; }
  .choice-icon { font-size: 1.3rem; }
  .choice-title { font-size: 0.95rem; }
  .choice-sub, .mode-text { display: none; }
  .mode-panel { padding: 8px; gap: 6px; }
  .amount-field input { min-height: 38px; }
  .mode-cta { min-height: 38px; }
}

/* ---------- elegir asiento ---------- */
/* Teléfono angosto: la mesa más alta para que los 10 asientos no se encimen. */
@media (max-width: 520px) {
  .seat-picker-card { padding: 16px; }
  .seat-picker-card h2 { font-size: 1.1rem; }
  .seat-picker { aspect-ratio: 1 / 1.05; }
  .sp-seat { width: 46px; min-height: 46px; font-size: 0.6rem; border-radius: 12px; }
  .sp-seat b { font-size: 1rem; }
  .sp-seat span { max-width: 42px; }
  .sp-av { width: 28px; height: 32px; }
}
/* Pantalla bajita (celular acostado): la mesa entra a lo alto y se cierra con la ✕. */
@media (max-height: 560px) {
  .seat-picker-card { padding: 12px 16px; gap: 6px; }
  .seat-picker-card h2 { font-size: 1.05rem; }
  .seat-picker-card .neo-actions { display: none; }
  .seat-picker { width: auto; max-width: 100%; height: calc(100dvh - 130px); aspect-ratio: 16 / 10; margin: 4px auto 0; }
  .sp-seat { width: 46px; min-height: 46px; font-size: 0.6rem; }
  .sp-seat b { font-size: 1rem; }
  .sp-seat span { max-width: 42px; }
}