/* ════════════════════════════════════════════════
   NUQTA.GG — Responsive (mobile-first overrides)
   Desktop layout kicks in at >= 900px.
   ════════════════════════════════════════════════ */

/* Desktop / large screens */
@media (min-width: 900px) {
  .games-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
}

/* ── Tablet & mobile ( < 900px ) — distinct layout ── */
@media (max-width: 899px) {
  .nav-links { display: none; }
  .hamburger { display: grid; }

  /* Featured hero becomes vertical */
  .hero { flex-direction: column; min-height: 0; }
  .hero-overlay { background: linear-gradient(0deg, rgba(5,5,15,.99) 10%, rgba(5,5,15,.6) 55%, transparent 100%); }
  .hero-content { max-width: 100%; padding: 22px; }

  /* Game grid: 2 cols */
  .games-grid, .search-results { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  /* Game page: single column, score panel becomes a strip */
  .game-layout { grid-template-columns: 1fr; }
  .score-panel { position: static; }

  /* Stats: 2x2 */
  .stats-bar { grid-template-columns: repeat(2, 1fr); }

  /* Score breakdown rows narrower */
  .bd-row { grid-template-columns: 90px 1fr 40px; }

  /* Swipeable filter pills (no wrap) */
  .pills.scroll { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 6px; scrollbar-width: none; }
  .pills.scroll::-webkit-scrollbar { display: none; }
  .pills.scroll .pill { flex-shrink: 0; }

  /* Bottom navigation */
  .bottom-nav { display: flex; position: fixed; bottom: 0; inset-inline: 0; z-index: 150;
    background: rgba(5,5,15,.96); backdrop-filter: blur(20px); border-top: 1px solid var(--border);
    justify-content: space-around; padding: 6px 4px env(safe-area-inset-bottom); }
  .bottom-nav a { display: flex; flex-direction: column; align-items: center; gap: 2px;
    color: var(--txt2); font-size: .68rem; font-weight: 600; padding: 6px 10px; min-height: 44px; }
  .bottom-nav a span { font-size: 1.25rem; }
  .bottom-nav a.active { color: var(--brand-neon); }
  .page { padding-bottom: 80px; }

  /* No hover scaling on touch */
  .game-card:hover .gc-cover img { transform: none; }
  .game-card:active { border-color: var(--border2); }
}

/* ── Small phones ( < 600px ) ── */
@media (max-width: 600px) {
  .container { padding-inline: 14px; }
  .section-title { font-size: 1.2rem; }
  .stats-bar { gap: 10px; }
  .stat .stat-num { font-size: 1.5rem; }
  .footer-links { flex-wrap: wrap; justify-content: center; }
}

/* Very small */
@media (max-width: 360px) {
  .games-grid, .search-results { grid-template-columns: 1fr; }
}