/* ==========================================================================
   Ping Pong Arcade — Responsive layer
   Mobile-first adjustments, verified at 320 / 375 / 414 / 768 / 1024 / 1280 /
   1440 / 1920 px. No horizontal scrolling at any width.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Large desktop
   -------------------------------------------------------------------------- */
@media (min-width: 1440px) {
  :root { --container: 1280px; }
  .hero { padding-block: 5rem 4rem; }
}

/* --------------------------------------------------------------------------
   Tablet landscape and below (<= 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
  .hero__art { order: -1; max-width: 560px; }
  .site-footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .site-footer__about { grid-column: 1 / -1; }
  .grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   Tablet portrait / mobile nav breakpoint (<= 900px)
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .main-nav { display: none; }
  .nav-toggle { display: inline-grid; }

  :root { --fs-3xl: 2rem; --fs-2xl: 1.6rem; --fs-4xl: 2.4rem; }

  .section { padding-block: var(--sp-6); }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--auto-wide { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

  /* minmax(0, 1fr) rather than 1fr: a bare 1fr track is floored at the item's
     min-content width, which lets a long word push the whole page wider. */
  .game-layout { grid-template-columns: minmax(0, 1fr); }
  .game-aside { position: static; }
}

/* --------------------------------------------------------------------------
   Small tablets / large phones (<= 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  body { font-size: 0.97rem; }

  .hero { padding-block: var(--sp-6) var(--sp-6); }
  .hero__actions .btn { flex: 1 1 100%; }
  .hero__stats { gap: var(--sp-4); }
  .hero__stats li { flex: 1 1 40%; }

  .section-head { align-items: flex-start; }

  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

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

  .article-layout { grid-template-columns: minmax(0, 1fr); }
  .article-toc { position: static; max-height: none; margin-bottom: var(--sp-5); }

  .game-stage__hud { font-size: var(--fs-xs); }
  .touch-controls { display: grid; }
}

/* --------------------------------------------------------------------------
   Phones (<= 600px)
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  :root { --fs-3xl: 1.75rem; --fs-2xl: 1.45rem; --fs-xl: 1.2rem; }

  .grid--auto { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .grid--auto-wide { grid-template-columns: 1fr; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .card__body { padding: var(--sp-3); }
  .card__title { font-size: var(--fs-sm); }
  .card__desc { -webkit-line-clamp: 2; line-clamp: 2; font-size: var(--fs-xs); }

  .panel { padding: var(--sp-4); }
  .feature { padding: var(--sp-4); }

  .btn--lg { padding: 0.85rem 1.3rem; font-size: var(--fs-sm); }

  .hero__stats li { flex: 1 1 100%; }

  .game-controls-bar { gap: var(--sp-2); }
  .game-controls-bar .btn { flex: 1 1 calc(50% - var(--sp-2)); }

  .article-body h2 { font-size: 1.35rem; }
  .article-body h3 { font-size: 1.12rem; }

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

/* --------------------------------------------------------------------------
   Very small phones (<= 380px) — 320px must still work
   -------------------------------------------------------------------------- */
@media (max-width: 380px) {
  .container { padding-inline: var(--sp-3); }
  :root { --fs-3xl: 1.55rem; --fs-2xl: 1.3rem; }

  /* At 320px the brand plus three icon buttons no longer fits at full size.
     Everything shrinks a little rather than anything being removed, so the
     search, theme and menu controls all stay reachable. */
  .site-header__inner { gap: var(--sp-2); }
  .header-actions { gap: 4px; }
  .icon-btn { width: 38px; height: 38px; }
  .icon-btn svg { width: 17px; height: 17px; }
  .brand { gap: var(--sp-2); font-size: 0.95rem; }
  .brand__mark { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; }
  .brand__mark::after { width: 10px; height: 10px; }

  .grid--auto, .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }

  .brand__text small { display: none; }
  .brand { font-size: 1rem; }

  .site-footer__grid { grid-template-columns: 1fr; }

  .game-controls-bar .btn { flex: 1 1 100%; }
  .hero__actions { flex-direction: column; }
}

/* --------------------------------------------------------------------------
   Landscape phones — keep the game canvas usable
   -------------------------------------------------------------------------- */
@media (max-height: 560px) and (orientation: landscape) {
  .site-header { position: static; }
  .game-hero-copy { display: none; }
  /* In landscape the vertical budget is the constraint, so the playfield is
     sized from the viewport height rather than from the column width. */
  .game-stage__canvas-wrap { max-width: min(100%, calc(62vh * 5 / 7)); }
  .game-overlay h2 { font-size: 1.15rem; }
  .game-overlay p { font-size: 0.85rem; margin-bottom: 0.75rem; }
}

/* --------------------------------------------------------------------------
   Pointer capability — hide touch pads on precise pointers
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .touch-controls { display: none; }
  .touch-hint { display: none; }
}

@media (hover: none) {
  .keyboard-hint { display: none; }
  .card:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .ad-slot, .touch-controls,
  .game-controls-bar, .mobile-nav, .skip-link, .article-toc { display: none !important; }
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: underline; }
  .article-body { max-width: none; }
}