/* =========================================================
   PixelArcade — Responsive rules
   Breakpoints: 1200 / 992 / 768 / 480
   ========================================================= */

/* Large desktops / ultra-wide already covered by max-width container */

@media (max-width:1200px){
  .game-grid{ grid-template-columns:repeat(4,1fr); }
  .category-grid{ grid-template-columns:repeat(4,1fr); }
  .feature-grid{ grid-template-columns:repeat(2,1fr); }
  .collection-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:992px){
  .main-nav{ display:none; }
  .search-box{ display:none; }
  .menu-toggle{ display:flex; }
  .mobile-search{ display:block; margin:0 0 18px; }

  .hero .container{ grid-template-columns:1fr; text-align:center; }
  .hero-cta-row{ justify-content:center; }
  .hero-stats{ justify-content:center; }
  .hero-form{ margin-left:auto; margin-right:auto; }
  .hero-art{ display:none; }

  .game-grid{ grid-template-columns:repeat(3,1fr); }
  .steps-grid{ grid-template-columns:1fr 1fr; }
  .stats-band{ grid-template-columns:repeat(2,1fr); }

  .game-detail-layout{ grid-template-columns:1fr; }
  .daily-banner{ grid-template-columns:1fr; }
  .daily-banner .thumb{ order:-1; }
  .contact-grid{ grid-template-columns:1fr; }
  .sitemap-cols{ columns:2; }
  .footer-grid{ grid-template-columns:1fr 1fr; }

  /* Tablet: single-column layout narrows the stage, so a slightly taller ratio reads better */
  .game-stage{ aspect-ratio:16/10; max-height:70vh; }
}

@media (max-width:768px){
  :root{ --header-h:66px; }
  .section{ padding:44px 0; }
  .game-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .category-grid{ grid-template-columns:repeat(3,1fr); }
  .feature-grid{ grid-template-columns:1fr; }
  .collection-grid{ grid-template-columns:1fr; }
  .steps-grid{ grid-template-columns:1fr; }
  .stats-band{ grid-template-columns:1fr 1fr; padding:32px 20px; gap:24px; }
  .footer-grid{ grid-template-columns:1fr; gap:26px; }
  .sitemap-cols{ columns:1; }
  .section-head{ flex-direction:column; align-items:flex-start; }
  .controls-list{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; text-align:center; }

  /* Recently Added auto-carousel: smaller cards so 1.5 are visible at once */
  #recently-added [data-slider-track] > div{ min-width:180px !important; max-width:180px !important; }

  /* Game player stage — mobile: closer to portrait so most casual games fit without heavy letterboxing */
  .game-stage{ aspect-ratio:4/3; max-height:60vh; border-radius:var(--radius-md); }
  .game-page-head{ padding:4px 0 18px; }
  .stage-controls{ gap:10px; }
  .stage-controls .left{ width:100%; }
  .stage-controls .left .btn{ flex:1; }
  .share-row{ width:100%; justify-content:flex-start; }
}

@media (max-width:480px){
  #recently-added [data-slider-track] > div{ min-width:150px !important; max-width:150px !important; }
  .game-stage{ aspect-ratio:3/4; max-height:58vh; }
}

@media (max-width:480px){
  .container{ padding:0 16px; }
  .hero{ padding:40px 0 40px; }
  .hero-form{ flex-direction:column; border-radius:var(--radius-md); }
  .hero-form .btn{ width:100%; }
  .category-grid{ grid-template-columns:repeat(2,1fr); }
  .game-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .game-card .body{ padding:10px 10px 12px; }
  .game-card h3{ font-size:13.5px; }
  .game-card .desc{ display:none; }
  .logo{ font-size:17px; }
  .logo-mark{ width:32px; height:32px; }
  .stage-controls{ flex-direction:column; align-items:stretch; }
  .game-tabs{ gap:0; }
}