/* Keep the entry screen separate from the in-game HUD in narrow/short views. */
@media (max-width: 600px), (max-height: 560px) {
  .city-app { min-height: 0; }
  .topbar { height: 56px; margin: 0 16px; }
  .weather-icon { display: none; }
  .world-tools { top: 68px; left: 16px; right: 16px; gap: 6px; }
  .world-tools button { justify-content: center; min-width: 0; min-height: 44px; padding: 8px; flex: 1; font-size: 9px; letter-spacing: 0; }
  .world-tools .settings-trigger { font-size: 9px; }
  .world-tools .settings-trigger span { display: none; }
  .world-tools kbd { display: none; }
  .city-app:not(.has-entered) .district-readout,
  .city-app:not(.has-entered) .local-map,
  .city-app:not(.has-entered) .controlbar { display: none; }
  .welcome { inset: 124px 16px 12px; padding: 12px 8px 20px; overflow-y: auto; overscroll-behavior: contain; }
  .welcome:before { display: none; }
  .welcome .eyebrow { margin-bottom: 16px; font-size: 8px; }
  .welcome h1 { font-size: clamp(32px, 10vw, 46px); line-height: 1.05; }
  .welcome-copy { margin: 16px 0; font-size: 11px; }
  .welcome .enter-button { width: 100%; min-height: 48px; padding: 12px 16px; gap: 12px; }
  .welcome .tour-link { min-height: 44px; padding: 12px 0; }
  .welcome-note { display: none; }
  .has-entered .district-readout { top: 128px; bottom: auto; left: 16px; gap: 6px; }
  .has-entered .district-readout .eyebrow { font-size: 7px; }
  .has-entered .district-readout strong { font-size: 14px; }
  .controlbar { inset: auto 16px 0; height: 52px; gap: 12px; }
  .desktop-controls { gap: 8px; }
  .pause-card { width: calc(100% - 32px); min-width: 0; max-height: calc(100dvh - 140px); padding: 20px; overflow-y: auto; top: 56%; }
  .world-dialog { inset: 0; margin: auto; max-height: calc(100dvh - 24px); }
  .city-toast { top: 180px; font-size: 8px; }
}

@media (max-height: 420px) {
  .has-entered .district-readout { display: none; }
  .welcome h1 { font-size: 32px; }
  .touch-pad { width: 90px; height: 90px; bottom: 70px; }
  .pad-thumb { top: 27px; left: 27px; }
  .touch-actions { bottom: 82px; }
}