/* ============================================================
   NIGHTBOUND — Mejoras responsive para el tablero
   Reemplaza el escalado JavaScript-only con CSS clamp() para
   pantallas medianas y añade breakpoints para < 1200px.
   ============================================================ */

/* Asegura que el menú principal escale sin desborde en pantallas < 1920px */
@media (max-width: 1919px) {
  #forjaOnlineMenu {
    /* El JS ya aplica --forja-menu-scale pero esto es el fallback */
    transform: translate(-50%, -50%) scale(var(--forja-menu-scale, 0.85));
  }
}

/* Tablero: en pantallas menores de 1400px el page-frame escala correctamente */
@media (max-width: 1399px) {
  .page-frame {
    transform: translate(-50%, -50%) scale(var(--forja-board-scale, 0.72));
  }
}

@media (max-width: 1100px) {
  .page-frame {
    transform: translate(-50%, -50%) scale(var(--forja-board-scale, 0.56));
  }
}

/* En pantallas muy pequeñas (tablet/móvil) mostramos aviso */
@media (max-width: 767px) {
  body.forja-tablero-mode::after {
    content: "El tablero está optimizado para pantallas de escritorio (1280px+). Girá el dispositivo o usá zoom del navegador.";
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    background: rgba(0,0,0,.92);
    color: #d8c9aa;
    font-size: 1rem;
    line-height: 1.5;
    font-family: Georgia, serif;
    pointer-events: none;
  }
  /* El menú sí puede funcionar en tablet/móvil con escalado fuerte */
  #forjaOnlineMenu {
    transform: translate(-50%, -50%) scale(var(--forja-menu-scale, 0.38));
  }
}

/* Soporte landscape en tablet */
@media (max-width: 1024px) and (orientation: landscape) {
  .page-frame {
    transform: translate(-50%, -50%) scale(var(--forja-board-scale, 0.50));
  }
  #forjaOnlineMenu {
    transform: translate(-50%, -50%) scale(var(--forja-menu-scale, 0.52));
  }
}