/* ==========================================================================
   Coin Collector Arcade — responsive rules
   Mobile-first adjustments layered on top of style.css.
   Tested breakpoints: 320, 375, 414, 768, 1024, 1440+.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Large desktop
   -------------------------------------------------------------------------- */

@media (min-width: 1440px) {
  :root { --container: 1260px; }
  body { font-size: 17px; }
}

/* --------------------------------------------------------------------------
   Tablet landscape and below
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: var(--s6);
  }

  .hero { padding-block: var(--s7) var(--s6); }

  .hero__art { order: -1; }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--s5);
  }

  .footer__brand { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   Tablet portrait and below — the navigation collapses here
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Hidden by default on small screens; main.js toggles the attribute. */
  .nav[data-collapsed="true"] { display: none; }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s3) var(--s5) var(--s5);
  }

  .nav__link {
    padding: 13px var(--s3);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    border-bottom: 1px solid var(--border);
  }

  .nav__list li:last-child .nav__link { border-bottom: 0; }

  .site-header__inner { position: relative; }

  .section { padding-block: var(--s7); }
}

/* --------------------------------------------------------------------------
   Phones
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  :root {
    --s7: 36px;
    --s8: 44px;
    --s9: 56px;
  }

  body { font-size: 15.5px; }

  .container { padding-inline: var(--s4); }

  h1 { font-size: clamp(1.6rem, 7vw, 2.1rem); }
  h2 { font-size: clamp(1.28rem, 5.4vw, 1.6rem); }

  .hero__text { font-size: 1rem; }

  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }

  .hero__meta { gap: var(--s4); }

  .game-grid {
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: var(--s4);
  }

  .category-grid { grid-template-columns: 1fr; }

  .filters { padding: var(--s4); }
  .filters__row { grid-template-columns: 1fr 1fr; gap: var(--s3); }

  .filters__actions { flex-direction: column; align-items: stretch; }
  .filters__actions .btn { width: 100%; }

  .search-form { flex-direction: column; }
  .search-form .btn { width: 100%; }

  .author-box { flex-direction: column; gap: var(--s4); }

  .footer__grid { grid-template-columns: 1fr; gap: var(--s5); }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--s2); }

  .section__head { flex-direction: column; align-items: flex-start; }

  .ad-slot { margin-block: var(--s5); }
}

/* --------------------------------------------------------------------------
   Small phones — 320px to 380px
   -------------------------------------------------------------------------- */

@media (max-width: 400px) {
  .container { padding-inline: var(--s3); }

  .game-grid { grid-template-columns: 1fr; }

  .filters__row { grid-template-columns: 1fr; }

  .brand__tag { display: none; }

  .btn { padding: 11px 17px; font-size: 0.92rem; }

  .stat-grid { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   Landscape phones — keep the game area visible
   -------------------------------------------------------------------------- */

@media (max-height: 520px) and (orientation: landscape) {
  .site-header { position: static; }
  .page-head { padding-block: var(--s4); }
  .game-section { padding-block: var(--s4); }
}

/* --------------------------------------------------------------------------
   Reduced motion — strip non-essential animation everywhere
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   Forced colours / high contrast
   -------------------------------------------------------------------------- */

@media (forced-colors: active) {
  .btn,
  .game-card,
  .category-card,
  .panel,
  .ad-slot {
    border: 1px solid ButtonBorder;
  }

  .fav-btn[aria-pressed="true"] { forced-color-adjust: none; }
}

/* --------------------------------------------------------------------------
   Print — nobody prints an arcade, but a guide might be printed
   -------------------------------------------------------------------------- */

@media print {
  .site-header,
  .site-footer,
  .ad-slot,
  .nav,
  .game-shell,
  .touch-controls,
  .breadcrumbs {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}