/* ==========================================================================
   Gem Arcade Games — Responsive layer
   Mobile-first adjustments layered on top of style.css / games.css
   Breakpoints: 380 / 560 / 768 / 1024 / 1280 / 1600
   ========================================================================== */

/* --------------------------------------------------------------------------
   Large desktop
   -------------------------------------------------------------------------- */
@media (min-width: 1600px) {
  :root { --wrap: 1320px; }
}

/* --------------------------------------------------------------------------
   Below 1280 — tighten the wide grids
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .grid-4 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .site-footer__grid { grid-template-columns: minmax(0,1.3fr) repeat(3, minmax(0,1fr)); }
  .site-footer__about { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   Below 1024 — collapse nav to drawer, stack game layout
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .nav { display: none; }
  .nav-toggle { display: inline-flex; margin-left: auto; }

  .hero__grid {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }
  .hero__art { order: -1; }

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

  .layout-sidebar { grid-template-columns: 1fr; }
  .layout-sidebar__aside { position: static; }
  .ad-slot--sidebar { min-height: 250px; position: static; }

  .game-layout { grid-template-columns: 1fr; }
  .game-side { order: 2; }

  .article-layout { grid-template-columns: 1fr; }
  .article-toc--sticky { position: static; max-height: none; }
}

/* --------------------------------------------------------------------------
   Below 768 — tablet / large phone
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  :root {
    --s-8: 44px;
    --s-9: 56px;
    --header-h: 58px;
  }

  body { font-size: .98rem; }

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

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

  .grid-auto { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
  .grid-auto-lg { grid-template-columns: 1fr; }

  .brand__name span { display: none; }

  .hero { padding-block: var(--s-6) var(--s-6); }
  .hero__cta .btn { flex: 1 1 auto; }

  .panel { padding: var(--s-4); }
  .cta-band { padding: var(--s-5); flex-direction: column; align-items: flex-start; }

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

  .toolbar { padding: var(--s-3); }
  .toolbar .field { flex: 1 1 100%; }

  .game-card__body { padding: var(--s-3); gap: 6px; }
  .game-card__desc { -webkit-line-clamp: 2; font-size: var(--t-xs); }
  .game-card__title { font-size: .95rem; }

  .stat__num { font-size: 1.35rem; }

  .article-body { font-size: 1.02rem; }
  .article-body h2 { margin-top: var(--s-6); }

  .game-stage__hud { gap: 6px; }
  .hud-item { min-width: 62px; padding: 5px 8px; }
  .hud-item__label { font-size: .58rem; }
  .hud-item__value { font-size: .95rem; }
}

/* --------------------------------------------------------------------------
   Below 560 — phones
   -------------------------------------------------------------------------- */
@media (max-width: 559px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-auto { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

  .btn-row { gap: var(--s-2); }
  .btn-lg { min-height: 48px; font-size: var(--t-base); }

  .hero__facts { gap: var(--s-2) var(--s-4); font-size: var(--t-xs); }

  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }

  .breadcrumb { font-size: var(--t-xs); }

  .faq summary { padding: var(--s-3) var(--s-4); font-size: var(--t-sm); }
  .faq__answer { padding-inline: var(--s-4); }

  .game-toolbar { justify-content: center; }
  .game-toolbar .btn { flex: 1 1 calc(50% - var(--s-2)); }
}

/* --------------------------------------------------------------------------
   Below 380 — very small phones
   -------------------------------------------------------------------------- */
@media (max-width: 379px) {
  .wrap { padding-inline: var(--s-3); }
  .grid-auto { grid-template-columns: 1fr; }
  .brand__name b { font-size: .95rem; }
  .hud-item { min-width: 54px; }
}

/* --------------------------------------------------------------------------
   Landscape phones — maximise the play area
   -------------------------------------------------------------------------- */
@media (max-height: 520px) and (orientation: landscape) {
  .site-header { position: static; }
  .game-stage { --stage-max-h: 78vh; }
  .game-hero { padding-block: var(--s-3); }
  .game-stage__hud { padding-block: 4px; }
}

/* --------------------------------------------------------------------------
   Pointer capability — hide touch controls on true mouse devices
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .touch-controls { display: none; }
}
@media (hover: none), (pointer: coarse) {
  .touch-controls[data-enabled="true"] { display: flex; }
  .keyboard-only-note { display: none; }
}

/* --------------------------------------------------------------------------
   Print — readable articles
   -------------------------------------------------------------------------- */
@media print {
  :root { --text: #111; --text-muted: #333; }
  body { background: #fff; color: #111; }
  body::before { display: none; }
  .site-header, .site-footer, .mobile-nav, .nav-scrim, .ad-slot,
  .game-stage, .touch-controls, .game-toolbar, .share-row, .toast { display: none !important; }
  .article-body { max-width: none; font-size: 11.5pt; }
  a { color: #111; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .panel, .card, .callout { border: 1px solid #ccc; background: #fff; }
}