/* =========================================================
   PARK FEVER — responsive layers
   Desktop 1024+, Tablet 768-1023, Mobile < 768
   ========================================================= */

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
  .panel {
    width: 96vw;
  }
  .level-grid {
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  }
  .garage-grid {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .hud-top {
    gap: 5px;
  }
  .hud-chip {
    padding: 5px 9px;
    font-size: 11px;
  }
  .hud-value {
    font-size: 12px;
  }
  .hud-brand {
    display: none;
  }
  .hud-btn {
    width: 38px;
    height: 38px;
  }
  .hud-objective {
    font-size: 11px;
    padding: 5px 11px;
  }
  .panel {
    width: 100vw;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    border: none;
  }
  .screen-panel {
    padding: 0;
  }
  .panel-body {
    padding: 12px 12px calc(22px + env(safe-area-inset-bottom));
  }
  .level-grid {
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
    gap: 8px;
  }
  .level-tile .lv-name {
    display: none;
  }
  .garage-grid {
    grid-template-columns: 1fr;
  }
  .howto-grid {
    grid-template-columns: 1fr;
  }
  .menu-inner {
    width: 100%;
    max-height: 100%;
    height: 100%;
    border-radius: 0;
    justify-content: center;
    border: none;
    padding: 26px 22px calc(26px + env(safe-area-inset-bottom));
  }
  .btn {
    padding: 15px 18px;
  }
  .modal-buttons-row {
    grid-auto-flow: row;
  }
  .modal {
    width: 94vw;
  }
  .hud-park-meter {
    bottom: auto;
    top: 22%;
  }
  .hud-toast-wrap {
    top: 30%;
  }
}

/* ---------- Very small phones ---------- */
@media (max-width: 360px) {
  .level-grid {
    grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
  }
  .tc-btn {
    width: 58px;
    height: 58px;
    font-size: 18px;
  }
  .tc-brake {
    width: 54px;
    height: 54px;
  }
  .menu-stats .stat-label {
    font-size: 9px;
  }
}

/* ---------- Short landscape (phones held sideways) ---------- */
@media (max-height: 500px) and (orientation: landscape) {
  .menu-inner {
    gap: 10px;
    padding: 12px 18px;
    max-height: 100%;
  }
  .game-title {
    font-size: 34px;
  }
  .title-badge {
    display: none;
  }
  .btn-xl {
    padding: 12px 20px;
    font-size: 16px;
  }
  .menu-buttons {
    grid-template-columns: 1fr 1fr;
  }
  .menu-buttons .btn-xl {
    grid-column: span 2;
  }
  .hud-objective {
    display: none;
  }
  .modal {
    padding: 14px 18px;
  }
  .stars-row .star {
    font-size: 30px;
  }
  .tc-btn {
    width: 60px;
    height: 60px;
  }
  .hud-park-meter {
    top: 16%;
  }
  .hud-toast-wrap {
    top: 22%;
  }
}

/* ---------- Touch-capable device fallback (coarse pointer) ---------- */
@media (pointer: coarse) {
  .btn {
    min-height: 48px;
  }
  .level-tile {
    min-height: 68px;
  }
}