/* ============================================================
   Responsive layout
   Adapts the game to phones, tablets, laptops, desktops and
   large screens in both portrait and landscape orientations.
   ============================================================ */

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

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

/* ---------- Narrow screens (mobile portrait) ---------- */
@media (max-width: 760px) {
  .hud-block { padding: 4px 7px; }
  .hud-label { font-size: 8px; }
  .hud-value { font-size: 11px; }
  .health-bar-outer { height: 11px; }
  #pause-btn { font-size: 12px; padding: 9px 10px; }
  #boss-hud { width: 86vw; }

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

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

/* ---------- Very small phones ---------- */
@media (max-width: 380px) {
  .hud-label { font-size: 7px; }
  .hud-value { font-size: 10px; }
  .hud-block { padding: 3px 5px; }
  .menu-stats { font-size: 16px; gap: 12px; }
  .game-subtitle { font-size: 15px; letter-spacing: 3px; }
}

/* ---------- Touch / coarse pointer devices ---------- */
@media (pointer: coarse) {
  #touch-controls.active { display: block !important; }

  /* Tuck the lower HUD under the top row so it never collides with
     the on-screen joystick and fire buttons. */
  .hud-bottom {
    top: calc(50px + env(safe-area-inset-top));
    bottom: auto;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 0;
  }
  #boss-hud {
    top: calc(104px + env(safe-area-inset-top));
    width: min(88vw, 560px);
  }
}

@media (pointer: fine) {
  #touch-controls { display: none !important; }
}

/* ---------- Short / landscape screens ---------- */
@media (max-height: 560px) {
  .screen {
    justify-content: flex-start;
    padding-top: max(12px, env(safe-area-inset-top));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  .game-title { font-size: clamp(22px, 6vh, 36px); }
  .game-title span { margin-top: 2px; }
  .game-subtitle { font-size: 14px; letter-spacing: 3px; margin-top: 4px; }
  .menu-stats { font-size: 16px; gap: 14px; margin: 10px 0; }
  .menu-footer { margin-top: 10px; font-size: 12px; }
  .panel-title { margin-bottom: 10px; font-size: clamp(16px, 3.4vw, 26px); }
  .arcade-btn {
    padding: 10px 14px;
    margin: 5px 0;
    font-size: 11px;
    min-width: clamp(160px, 56vw, 220px);
  }
  .howto-grid { flex-direction: row; gap: 12px; margin-bottom: 12px; }
  .howto-col { min-width: 180px; padding: 8px 10px; }
  .howto-col p { font-size: 15px; margin: 4px 0; }
  .howto-col h3 { font-size: 11px; margin-bottom: 6px; }
  .gameover-stats { font-size: 16px; gap: 3px; margin-bottom: 12px; }
  .hud-top, .hud-bottom {
    padding-top: calc(8px + env(safe-area-inset-top));
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
  #boss-warning { top: 32%; }

  #joystick-zone { height: 54vh; width: clamp(120px, 30vw, 200px); padding: 8px; }
  #joystick-base { width: clamp(76px, 20vmin, 96px); height: clamp(76px, 20vmin, 96px); }
  #joystick-stick { width: clamp(34px, 9vmin, 44px); height: clamp(34px, 9vmin, 44px); }
  #action-buttons { padding: 8px; gap: 8px; }
  .action-btn { width: clamp(48px, 13vmin, 60px); height: clamp(48px, 13vmin, 60px); }
  .action-btn.fire { width: clamp(58px, 16vmin, 74px); height: clamp(58px, 16vmin, 74px); }
}

@media (pointer: coarse) and (max-height: 560px) {
  .hud-bottom { top: calc(44px + env(safe-area-inset-top)); }
  #boss-hud { top: calc(84px + env(safe-area-inset-top)); }
}

/* ---------- Large / high-res screens ---------- */
@media (min-width: 1600px) {
  .hud-value { font-size: 18px; }
  .hud-label { font-size: 11px; }
  .health-bar-outer { height: 16px; }
}