/* Responsive overrides for the in-game HUD scaling unit (--u, defined in game.css).
   game.css already caps the base at min(1vw, 5px) for every width, so the chrome
   scales with screen width on a portrait phone and holds at 5px from ~500px up.
   The only override left is for phones held in landscape, where the constraint is
   height rather than width. The game canvas always fills the whole window — only
   the UI scale is adjusted. */

/* Landscape phones: the screen is short, so scale the chrome off the SHORT side
   (1vmin = the height here) and keep it compact. mobile.css loads after game.css,
   so this wins over the base cap for wide-but-short landscape phones. */
@media (orientation: landscape) and (max-height: 480px) {
  :root { --u-base: min(1vmin, 4.6px); }
  #status-bar { padding-top: calc(env(safe-area-inset-top, 0px) + 4px); }
  .status-line { margin-bottom: 2px; font-size: 12px; }
  .nav-btn { padding: 5px 0 4px; }
  .nav-btn span { display: none; }
  #btn-mode small { display: none; }
  #map-controls { bottom: calc(72px + var(--safe-pad)); }

  /* Short landscape viewport: tighten modals so tall ones (esp. the movement-mode
     picker, which stacks two mode lists) fit without hunting for the Done button.
     The .modal-card scroll cap in interface.css is the safety net; this just makes
     the common case fit outright by using the extra WIDTH a landscape screen has. */
  .modal { padding: 10px; }
  .modal-card h2 { margin-bottom: 6px; }
  .modal-card h3 { margin: 10px 0 6px; }
  #mode-modal .modal-card { max-width: 620px; }
  #mode-modal .mode-list { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  #mode-modal .mode-opt { padding: 8px 9px; }
  #mode-modal .mode-opt small { font-size: 12px; margin-top: 2px; }
  #mode-modal #mode-done { margin-top: 10px; }
}