/* =========================================================
   GAME WORLD — Responsive
   ========================================================= */

@media (min-width: 480px) {
  .brand-count {
    display: block;
  }
}

@media (min-width: 640px) {
  .game-grid,
  .skeleton-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }
}

@media (min-width: 768px) {
  .search-wrap {
    display: block;
  }

  .mobile-search-btn {
    display: none;
  }

  .hero-content {
    justify-content: center;
    padding-bottom: clamp(1.5rem, 4vw, 3rem);
  }

  .discover-toolbar {
    padding: var(--space-5);
  }

  .filter-row {
    flex-wrap: nowrap;
  }

  .play-meta-panel {
    grid-template-columns: 1.4fr 1fr;
    align-items: start;
  }
}

@media (min-width: 900px) {
  .nav-desktop {
    display: flex;
  }

  .menu-toggle {
    display: none;
  }

  .game-grid,
  .skeleton-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .category-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .featured-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .game-grid,
  .skeleton-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .featured-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .hero-stage {
    min-height: 500px;
  }
}

@media (min-width: 1440px) {
  .game-grid,
  .skeleton-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* Compact hero on very small screens */
@media (max-width: 479px) {
  .hero-stage {
    min-height: 360px;
    border-radius: var(--radius-xl);
  }

  .hero-actions .btn {
    width: 100%;
  }

  .hero-controls {
    position: static;
    margin-top: var(--space-4);
    justify-content: flex-start;
  }

  .hero-content {
    padding-bottom: var(--space-4);
  }

  .game-card-desc {
    display: none;
  }

  .rail {
    grid-auto-columns: minmax(160px, 72vw);
  }
}

/* Touch-friendly: prefer hover reveal only when hover is available */
@media (hover: none) {
  .card-play {
    opacity: 1;
    background: linear-gradient(to top, rgba(5, 10, 20, 0.45), transparent 55%);
    align-items: end;
    justify-content: end;
    padding: var(--space-3);
  }

  .card-play-btn {
    width: 42px;
    height: 42px;
    transform: none;
  }
}

/* Print: keep it simple */
@media print {
  .site-header,
  .mobile-nav,
  .toast-stack,
  .hero-controls,
  .btn {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }
}