/* Mobile resilience overrides: dynamic browser chrome, safe-area-aware controls,
   and a narrow-phone HUD that cannot overlap the direction pad or camera. */
html, body, #app { height: 100dvh; min-height: 100%; }
.brand-bubble, .brand b, .zone-chip b, .mission-hud b, .welcome h1,
.modal h2, .discovery-card h2, .paused::after { font-family: 'Trebuchet MS', system-ui, sans-serif; }
.topbar {
  height: calc(70px + env(safe-area-inset-top));
  padding-top: calc(8px + env(safe-area-inset-top));
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}
.game-wrap, .welcome { inset: calc(70px + env(safe-area-inset-top)) 0 env(safe-area-inset-bottom); }
.controls {
  left: max(22px, env(safe-area-inset-left));
  right: max(22px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
}
@media (max-width: 760px) {
  .topbar {
    height: calc(62px + env(safe-area-inset-top));
    padding-top: calc(7px + env(safe-area-inset-top));
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }
  .game-wrap, .welcome { inset: calc(62px + env(safe-area-inset-top)) 0 env(safe-area-inset-bottom); }
  .controls {
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
  }
  .dpad button { min-width: 44px; min-height: 44px; }
  .camera { min-width: 72px; min-height: 72px; }
}
@media (max-width: 480px) {
  .mission-hud { top: 88px; bottom: auto; width: calc(100% - 24px); padding: 8px 12px; }
  .mission-hud p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .welcome { align-items: start; overflow: auto; padding: 18px 0 max(24px, env(safe-area-inset-bottom)); }
  .welcome-card { margin: auto; }
  .welcome h1 { font-size: 44px; }
  .welcome-features { flex-wrap: wrap; }
}