/* ==========================================================================
   Retro Arcade Hub — Responsive refinements
   The base stylesheet is mobile-first; this file tunes specific breakpoints.
   Targets: 320 / 375 / 390 / 414 / 768 / 1024 / 1280 / 1440 / 1920.
   ========================================================================== */

/* --- Very small phones (320–359px) ---------------------------------------- */
@media (max-width: 359px) {
  :root { --sp-7: 2.25rem; --sp-8: 3rem; }
  .wrap { padding-inline: var(--sp-3); }
  .brand__name { font-size: .95rem; }
  .brand__name span { display: none; }
  .grid { grid-template-columns: 1fr; }
  .hero__stats { gap: var(--sp-4); }
  .hero__cta .btn { width: 100%; }
  .btn { padding-inline: var(--sp-4); font-size: var(--fs-xs); }
}

/* --- Phones (360–599px) --------------------------------------------------- */
@media (max-width: 599px) {
  :root { --header-h: 58px; }
  .section { padding-block: var(--sp-6); }
  .grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 165px), 1fr)); gap: var(--sp-3); }
  .grid--wide { grid-template-columns: 1fr; }
  .game-card__body { padding: var(--sp-3); gap: var(--sp-2); }
  .game-card__title { font-size: var(--fs-base); }
  .game-card__desc {
    font-size: var(--fs-xs);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .section-head { margin-bottom: var(--sp-4); }
  .author-box { flex-direction: column; }
  .site-footer__grid { gap: var(--sp-5); }
  .filters { padding: var(--sp-3); }
  .filters__group { flex-basis: 100%; }
  .panel { padding: var(--sp-4); }
  .prose p, .prose li { font-size: var(--fs-base); }
  .toc { position: static !important; }
}

/* --- Large phones / small tablets (600–767px) ----------------------------- */
@media (min-width: 600px) and (max-width: 767px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- Tablets (768–1023px) ------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  .grid--wide { grid-template-columns: repeat(2, 1fr); }
  .hero { padding-block: var(--sp-7); }
}

/* --- Small laptops (1024–1279px) ------------------------------------------ */
@media (min-width: 1024px) and (max-width: 1279px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  .grid--wide { grid-template-columns: repeat(3, 1fr); }
}

/* --- Desktop (1280px+) ---------------------------------------------------- */
@media (min-width: 1280px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
  .grid--wide { grid-template-columns: repeat(3, 1fr); }
}

/* --- Large desktop (1440px+) ---------------------------------------------- */
@media (min-width: 1440px) {
  :root { --wrap: 1280px; }
}

/* --- Very large screens (1920px+) ----------------------------------------- */
@media (min-width: 1800px) {
  :root { --wrap: 1400px; --fs-base: 1.03rem; }
  .grid { grid-template-columns: repeat(5, 1fr); }
}

/* --- Landscape phones: reclaim vertical space during gameplay ------------- */
@media (max-height: 520px) and (orientation: landscape) {
  .site-header { position: static; }
  .game-stage { padding: var(--sp-2); }
  .game-hero { padding-block: var(--sp-3); }
  .game-hero h1 { font-size: var(--fs-xl); margin-bottom: var(--sp-2); }
  .game-hero__lede { display: none; }
  .breadcrumb { display: none; }
}

/* --- Pointer-coarse tweaks: bigger hit targets ---------------------------- */
@media (pointer: coarse) {
  .nav__link { padding-block: var(--sp-3); }
  .chip { min-height: 44px; }
  .tag { padding: 6px 12px; }
  .site-footer li { margin-bottom: var(--sp-3); }
}

/* --- Print ---------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .ad-slot, .game-stage, .touch-controls,
  .nav, .skip-link, .toast, .filters { display: none !important; }
  body { background: #fff; color: #000; }
  body::before { display: none; }
  a { color: #000; text-decoration: underline; }
  .prose, .prose p, .prose li { color: #000; }
}