/* Play Parking — responsive.css : mobile-first adjustments (320px+ / 768px / 1024px / 1440px) */

@media (max-width: 1023px) {
  .layout-article { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
  .hero-inner { grid-template-columns: 1fr; padding: 40px 16px 52px; }
  .hero-art { max-width: 520px; }
}

@media (max-width: 899px) {
  .nav-toggle { display: inline-grid; }
  .site-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow);
    display: none; margin: 0;
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; padding: 8px 16px 14px; }
  .site-nav a { padding: 12px; font-size: 1.05rem; }
  .header-actions { margin-left: auto; }
}

@media (max-width: 767px) {
  body { font-size: 1rem; }
  .section { padding: 34px 0; }
  .game-hud { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }
  .hud-item { padding: 5px 8px; }
  .hud-value { font-size: .95rem; }
  .game-stage { aspect-ratio: 4 / 3; }
  .tc-btn { min-width: 64px; min-height: 70px; }
  .tc-gas, .tc-brake { min-width: 84px; }
  .search-item { grid-template-columns: 48px 1fr; }
  .search-item .btn { grid-column: 1 / -1; }
  .search-thumb img, .search-thumb-ph { width: 48px; height: 32px; }
  .ad-container { min-height: 100px; }
  .ov-box { padding: 14px; }
  .ov-title { font-size: 1.25rem; }
  .ov-keys { display: none; }
}

@media (max-width: 420px) {
  .logo-text { font-size: 1.08rem; }
  .logo svg { width: 32px; height: 32px; }
  .tc-group { gap: 6px; }
  .touch-controls { gap: 6px; padding: 8px; }
  .tc-btn { min-width: 58px; padding: 4px 8px; font-size: .85rem; }
  .tc-gas, .tc-brake { min-width: 72px; }
  .footer-grid { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: 1fr; }
}

/* short landscape phones: keep the stage and controls on screen together */
@media (max-height: 500px) and (orientation: landscape) {
  .game-stage { max-height: 62vh; aspect-ratio: auto; height: 62vh; }
  .tc-btn { min-height: 52px; }
}

@media (pointer: fine) and (min-width: 1024px) {
  .tc-btn { min-height: 52px; }
}

@media (min-width: 1440px) {
  :root { --maxw: 1320px; }
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
}