/* ------------------------------------------------------------------ *
 * Responsive overrides
 *
 * Base rules use clamp()/auto-fit so they already adapt. These blocks only
 * handle the cases clamp() cannot: orientation, short viewports, and the
 * layout of the touch pads / HUD on real handsets.
 * ------------------------------------------------------------------ */

@media (max-width: 900px) {
  .instructions-grid {
    grid-template-columns: 1fr;
  }

  .level-grid {
    max-width: 460px;
  }
}

@media (max-width: 768px) {
  .menu-btn {
    padding: 14px 20px;
    min-width: min(260px, 82vw);
  }

  /* Keep BACK narrow and let the settings rows own their own width. */
  .back-btn {
    min-width: 150px;
  }

  .setting-row .menu-btn {
    min-width: 0;
    width: 100%;
    padding: 12px 16px;
  }

  #hud-header {
    flex-wrap: wrap;
    height: auto;
    padding: 6px 10px;
  }

  .hud-center {
    order: -1;
    width: 100%;
    margin-bottom: 4px;
  }

  .hud-objective {
    font-size: 10px;
  }

  .hud-right {
    gap: 10px;
  }

  .hud-left {
    gap: 8px;
    min-width: 0;
  }

  .hud-location {
    display: none;
  }

  .health-bar {
    width: 70px;
  }

  .control-hints {
    display: none;
  }

  #hud-footer {
    display: none;
  }

  .interaction-prompt {
    bottom: 210px;
    font-size: 12px;
    padding: 6px 12px;
  }

  .complete-title,
  .gameover-title {
    font-size: 1.1rem;
  }

  .victory-title {
    font-size: 1.4rem;
  }
}

@media (max-width: 480px) {
  .menu-buttons {
    gap: 9px;
  }

  .menu-btn {
    min-width: min(240px, 88vw);
    min-height: 50px;
  }

  .back-btn {
    min-width: 140px;
  }

  .level-grid {
    gap: 6px;
  }

  .health-bar {
    width: 50px;
  }

  .action-btn {
    width: 58px;
    height: 58px;
    font-size: 16px;
  }

  .joystick-base {
    width: 104px;
    height: 104px;
  }

  .joystick-thumb {
    width: 42px;
    height: 42px;
    top: 31px;
    left: 31px;
  }

  .inventory-panel {
    width: calc(100vw - 20px);
    right: 10px;
    max-height: calc(100% - 200px);
    padding: 10px;
  }

  .inventory-item {
    width: 34px;
    height: 34px;
    font-size: 15px;
  }

  .complete-rewards {
    flex-direction: column;
    gap: 8px;
  }

  .instructions-grid {
    gap: 8px;
  }

  .instruction-card {
    padding: 12px;
  }

  .toggle-btn {
    min-height: 46px;
    padding: 10px 22px;
    font-size: 13px;
  }

  .victory-decoration {
    font-size: 8px;
    letter-spacing: 1px;
  }
}

/* Tablets: touch pads appear (see TouchControls._detectMobile) so the HUD
   and inventory must leave room for them. */
@media (min-width: 600px) and (max-width: 1024px) {
  .inventory-panel {
    width: min(320px, 40vw);
    max-height: calc(100% - 230px);
  }

  .menu-btn {
    min-width: 300px;
    min-height: 52px;
    font-size: 14px;
  }

  .back-btn {
    min-width: 170px;
  }

  .menu-footer {
    font-size: 11px;
  }
}

/* Landscape phones: very little vertical room. */
@media (max-height: 500px) {
  .touch-controls {
    height: 148px;
  }

  .hud-center {
    display: none;
  }

  .menu-logo {
    margin-bottom: 14px;
  }

  .game-title {
    font-size: clamp(1.2rem, 5.4vh, 1.8rem);
  }

  .title-tagline {
    display: none;
  }

  .menu-buttons {
    gap: 7px;
  }

  .menu-btn {
    padding: 10px 22px;
    min-height: 44px;
    font-size: 12px;
  }

  .back-btn {
    min-width: 130px;
  }

  .menu-footer {
    margin-top: 10px;
    font-size: 9px;
  }

  .section-title {
    margin-bottom: 10px;
  }

  .back-btn {
    margin-top: 12px;
  }

  .instructions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .instruction-card {
    padding: 10px;
  }

  .instruction-icon {
    font-size: 18px;
    margin-bottom: 4px;
  }

  .interaction-prompt {
    bottom: 120px;
  }

  .inventory-panel {
    max-height: calc(100% - 165px);
  }
}

/* Very short + very wide (landscape phone): two columns of buttons keeps the
   whole menu on one screen so the last option is never pushed off. */
@media (max-height: 430px) and (orientation: landscape) {
  .menu-content {
    max-width: 720px;
  }

  .menu-logo {
    margin-bottom: 10px;
  }

  .menu-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }

  .menu-btn {
    min-width: 0;
    width: 100%;
    min-height: 42px;
    padding: 8px 10px;
    font-size: 11px;
    letter-spacing: 1px;
  }

  .menu-footer {
    display: none;
  }

  .level-grid {
    max-width: 640px;
  }
}

@media (min-width: 1400px) {
  .game-title {
    font-size: 3.5rem;
    letter-spacing: 8px;
  }

  .menu-content {
    max-width: 700px;
  }

  .level-grid {
    max-width: 620px;
  }
}

@supports (padding: env(safe-area-inset-bottom)) {
  #hud-header {
    padding-top: calc(8px + env(safe-area-inset-top));
    padding-left: calc(14px + env(safe-area-inset-left));
    padding-right: calc(14px + env(safe-area-inset-right));
  }

  #hud-footer {
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
    padding-left: calc(16px + env(safe-area-inset-left));
    padding-right: calc(16px + env(safe-area-inset-right));
  }

  .touch-controls .joystick-area {
    left: calc(16px + env(safe-area-inset-left));
    bottom: calc(16px + env(safe-area-inset-bottom));
  }

  .touch-controls .action-buttons {
    right: calc(16px + env(safe-area-inset-right));
    bottom: calc(24px + env(safe-area-inset-bottom));
  }
}