/* ==========================================================================
   Guard the Tower 2D — responsive.css
   --------------------------------------------------------------------------
   The interface is scaled as a whole by GT.Viewport (--hud-scale /
   --menu-scale), so a landscape phone receives the SAME layout as desktop —
   every control present, in the same order and symmetry, just smaller.

   Nothing in this file hides HUD content on small screens. The rules below
   only:
     • adapt layout where the effective (post-scale) space genuinely demands
       it, keyed on the body.eff-* classes set by GT.Viewport;
     • enlarge touch targets on coarse pointers, measured so they stay above
       the ~44px real-pixel minimum after the HUD scale is applied;
     • tune the desktop extremes.
   ========================================================================== */

/* ==========================================================================
   Large desktop
   ========================================================================== */
@media (min-width: 1600px) {
  :root { --hud-pad: 20px; }
  .hud-corner { width: 230px; }
  #hud-right { width: 300px; }
  #minimap-wrap { width: 300px; }
  #minimap { height: 98px; }
  #tower-status { width: 480px; }
}

/* ==========================================================================
   Effective-space adaptations (post-scale), not raw viewport pixels
   ========================================================================== */

/* --- Narrow working area: tighten the corner columns --- */
body.eff-narrow .hud-corner { width: 178px; }
body.eff-narrow #hud-right { width: 226px; }
body.eff-narrow #minimap-wrap { width: 226px; }
body.eff-narrow #minimap { height: 74px; }
body.eff-narrow #tower-status { width: min(360px, 38vw); }

body.eff-xnarrow .hud-corner { width: 150px; }
body.eff-xnarrow #hud-right { width: 190px; }
body.eff-xnarrow #minimap-wrap { width: 190px; }
body.eff-xnarrow #minimap { height: 62px; }
body.eff-xnarrow #weapon-bar { flex-wrap: wrap; max-width: 62vw; justify-content: center; }

/* --- Short working area: reclaim vertical room, keep every element --- */
body.eff-short #hud-top { gap: 8px; }
body.eff-short #mission-tracker { padding: 4px 8px; gap: 6px; }
body.eff-short #notification-area { top: 17%; }
body.eff-short .wave-banner { font-size: var(--fs-xl); }
body.eff-short #caption-area { bottom: calc(96px + var(--safe-b) / var(--hud-scale, 1)); }

/* Quick actions are a row at every size now — see #quick-actions in ui.css. */

body.eff-xshort #hud-top { top: calc(6px + var(--safe-t) / var(--hud-scale, 1)); }
body.eff-xshort #hud-bottom { bottom: calc(6px + var(--safe-b) / var(--hud-scale, 1)); }
body.eff-xshort #notification-area { top: 14%; }
body.eff-xshort #armory-panel {
  top: calc(48px + var(--safe-t) / var(--hud-scale, 1));
  bottom: calc(74px + var(--safe-b) / var(--hud-scale, 1));
}

/* ==========================================================================
   Touch devices — targets sized in HUD space so that, once multiplied by
   --hud-scale, they land at or above ~44 real pixels.
   ========================================================================== */
@media (pointer: coarse) {
  .qa-btn { width: 60px; height: 60px; font-size: 24px; }
  .weapon-slot { width: 62px; height: 62px; }
  .weapon-icon { font-size: 25px; }
  .power-slot { min-height: 54px; }
  .power-icon { width: 38px; height: 38px; font-size: 21px; }

  .setting-row { padding: 10px; }
  .setting-row input[type="range"] { width: 132px; height: 26px; }
  .toggle { width: 52px; height: 30px; }
  .toggle::after { width: 24px; height: 24px; }
  .toggle.on::after { left: 25px; }

  .offer-btn { padding: 16px 10px; }
  .menu-tab { padding: 11px 18px; }
  .mission-chip { padding: 10px 15px; }
  .armory-tab { padding: 10px 4px; }
  .shop-buy { padding: 10px 13px; }
  .reward-close { width: 40px; height: 40px; }
  .start-btn { padding: 17px 26px; }
  .account-chip { padding: 7px 13px 7px 7px; }
  .account-login { padding: 8px 14px; }

  /* No hover states on touch — they stick after a tap. */
  .mode-card:hover,
  .diff-card:hover,
  .location-card:hover,
  .weapon-slot:hover,
  .power-slot:hover,
  .qa-btn:hover { transform: none; }
}

/* ==========================================================================
   Menu — the shell scales, so only the extremes need tuning
   ========================================================================== */
@media (max-width: 1100px) {
  .menu-shell { padding: 16px 18px 12px; }
}

/* Very small menus: keep every tab label, just tighten the chrome. */
@media (max-width: 620px) {
  .menu-shell { padding: 12px 12px 8px; }
  .menu-tabs { gap: 3px; padding: 4px; }
  .menu-tab { padding: 8px 12px; }
  .menu-footer { gap: 10px; }
  /* The avatar alone still identifies the account; the name would collide
     with the title at this width. */
  .account-name { display: none; }
  .account-chip { max-width: none; padding: 5px; }
}

/* Short screens: trim the header so the panel body keeps its room. */
@media (max-height: 480px) {
  .menu-crest { font-size: 26px; }
  .menu-subtitle { margin-bottom: 6px; letter-spacing: 0.24em; }
  .menu-tabs { margin-bottom: 8px; }
  .panel-heading { margin: 9px 0 6px; }
  .start-btn { margin: 14px auto 4px; }
  .fx-ember-glow { opacity: 0.34; }
}

/* ==========================================================================
   Portrait — only reachable on desktop windows, since touch portrait is
   intercepted by the landscape lock screen.
   ========================================================================== */
@media (orientation: portrait) and (pointer: fine) {
  .mode-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .location-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .diff-row { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .help-columns { grid-template-columns: 1fr; }
  .achievement-grid { grid-template-columns: 1fr; }
  #weapon-bar { flex-wrap: wrap; max-width: 80vw; justify-content: center; }
}

/* Ordnance strip follows the same effective-space rules as the rest of the HUD. */
body.eff-xnarrow .ord-slot { height: 34px; }
body.eff-xnarrow .ord-icon { font-size: 15px; }

@media (pointer: coarse) {
  .ord-slot { height: 46px; }
  .ord-icon { font-size: 21px; }
  .chip-card { padding: 13px 8px; }
}