/* ============ Tablet ============ */
@media (max-width: 1024px) {
  .hud-value { font-size: 13px; }
  .health-bar-outer { width: 100px; }
}

/* ============ Mobile / narrow screens ============ */
@media (max-width: 760px) {
  .hud-block { min-width: 70px; padding: 5px 7px; }
  .hud-label { font-size: 8px; }
  .hud-value { font-size: 11px; }
  .health-bar-outer { width: 74px; height: 11px; }
  .hud-powerup { min-width: 90px; }
  #pause-btn { top: 8px; right: 8px; padding: 6px 10px; font-size: 12px; }
  #boss-hud { top: 46px; width: 80vw; }

  .howto-grid { flex-direction: column; align-items: stretch; }
  .howto-col { min-width: unset; }

  .arcade-btn { min-width: 200px; font-size: 11px; padding: 12px 14px; }
}

/* Show touch controls only on touch-capable coarse-pointer devices */
@media (pointer: coarse) {
  #touch-controls.active { display: block; }
}
@media (pointer: fine) {
  #touch-controls { display: none !important; }
}

/* Short / landscape mobile: compact HUD further, keep controls out of gameplay center */
@media (max-height: 480px) {
  .hud-top, .hud-bottom { padding: 6px 10px; }
  #joystick-zone { height: 60vh; padding: 10px; }
  #action-buttons { padding: 10px; }
  .action-btn { width: 56px; height: 56px; }
  .action-btn.fire { width: 72px; height: 72px; }
}

/* Prevent any horizontal overflow anywhere */
html, body, #app, #game-container { max-width: 100vw; }