﻿/* Space Arcade Games — responsive.css (mobile first overrides; 320px+, 768px+, 1024px+, 1440px+) */
@media (max-width: 1023px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-about { grid-column: 1 / -1; }
  .layout-2 { grid-template-columns: minmax(0, 1fr); }
  .aside-box { position: static; }
}
@media (max-width: 900px) {
  .nav-toggle { display: inline-grid; }
  .main-nav { position: absolute; left: 0; right: 0; top: 100%; margin: 0; background: var(--bg); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); display: none; }
  .main-nav.is-open { display: block; }
  .main-nav ul { flex-direction: column; padding: .5rem 16px 1rem; gap: 0; }
  .main-nav a { padding: .8rem .6rem; border-radius: 8px; font-size: 1.05rem; }
  .header-tools { margin-left: auto; }
  .hero-inner { grid-template-columns: 1fr; padding-top: 2.2rem; padding-bottom: 2.4rem; }
  .hero-art { order: -1; }
  .hero-art svg { max-width: 260px; }
}
@media (max-width: 767px) {
  body { font-size: 1rem; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .daily-promo { grid-template-columns: 1fr; text-align: left; }
  .daily-promo svg { display: none; }
  .filters .filter-search { grid-column: 1 / -1; }
  .search-result { grid-template-columns: 64px 1fr; }
  .search-result img, .search-result .sr-icon { width: 64px; height: 40px; }
  .search-result .sr-go { display: none; }
  .gm { padding: 6px; border-radius: 10px; }
  .gm-tlabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .gm-tbtn { padding: 0 9px; }
  .gm-chip { font-size: .8rem; padding: 3px 8px; }
}
@media (max-width: 420px) {
  .brand { font-size: 1rem; }
  .brand svg { width: 32px; height: 32px; }
  .brand .brand-long { display: none; }
  .icon-btn { width: 40px; height: 40px; }
  .grid, .guide-grid, .cat-grid { grid-template-columns: 1fr; }
  .gm-joy { width: 112px; height: 112px; }
  .gm-touch-btn { width: 74px; height: 74px; }
  .gm-touch-btn.gm-act { width: 84px; height: 84px; }
  .gm-help li { grid-template-columns: 1fr; gap: 2px; }
}
@media (max-width: 360px) {
  .footer-grid { grid-template-columns: 1fr; }
}
@media (min-width: 1440px) {
  :root { --maxw: 1320px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}
@media print {
  .site-header, .site-footer, .ad-container, .gm, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
}
