/* ==========================================================================
   Basketball Arcade — Responsive rules
   Loaded last so its breakpoints win over the base stylesheets.

   Breakpoints
     1180px  large laptop  — drop sidebar padding
     1024px  tablet land.  — collapse desktop nav to the drawer
      860px  tablet port.  — single-column article layout
      620px  phone         — one-column grids, stacked toolbars
      420px  small phone   — tighter spacing
   ========================================================================== */

/* --------------------------------------------------------------------------
   Large laptop
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .layout-aside { gap: 36px; grid-template-columns: minmax(0, 1fr) 280px; }
  .nav a { padding-inline: .5rem; font-size: .88rem; }
}

/* --------------------------------------------------------------------------
   Tablet landscape — switch to the mobile drawer
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }

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

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-brand { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   Tablet portrait
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  body { font-size: 16px; }

  .layout-aside { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .sidebar { position: static; }
  .sidebar .ad-slot--sidebar { max-width: 100%; min-height: 250px; }

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

  .gotd { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }

  .controls-grid { grid-template-columns: minmax(0, 1fr); }
  .feature-list { grid-template-columns: minmax(0, 1fr); }

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

  .hero::before { right: -300px; }
  .hero::after { display: none; }

  /* The toolbar is no longer under a fixed-height desktop header row */
  .game-toolbar { top: 64px; }
}

/* --------------------------------------------------------------------------
   Phone
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
  :root { --gap: 18px; }

  .shell { padding-inline: 16px; }

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

  .header-bar { min-height: 60px; }
  .brand { font-size: 1.02rem; }
  .brand-mark { width: 30px; height: 30px; }

  .hero { padding-block: 2.25rem 2.5rem; }
  .hero .btn-row .btn { width: 100%; }
  .hero-stats { gap: 1.1rem 1.75rem; }
  .hero-stat strong { font-size: 1.5rem; }

  .section { padding-block: 2.25rem; }

  /* Game stage goes edge-to-edge for maximum play area */
  .game-stage .shell { padding-inline: 0; }
  .game-shell { border-radius: 0; border-left: 0; border-right: 0; }
  .canvas-wrap { aspect-ratio: 4 / 3; }
  .stage-caption { padding-inline: 16px; }

  .hud-stat { min-width: 52px; }
  .hud-stat strong { font-size: 1.1rem; }
  .hud-actions { width: 100%; margin-left: 0; }
  .hud-btn { flex: 1; justify-content: center; }

  .overlay-score { gap: 1.25rem; }
  .overlay-score div strong { font-size: 1.5rem; }

  .toolbar-row { flex-direction: column; align-items: stretch; }
  .sort-field { justify-content: space-between; }
  .sort-field select { flex: 1; }

  /* Horizontal scrolling chip row keeps filters reachable with one thumb */
  .filter-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: .4rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .filter-chips::-webkit-scrollbar { display: none; }

  .author-card, .author-box { flex-direction: column; gap: 1rem; }

  .prose > h2 { display: block; }

  .footer-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .site-footer { padding-block: 2.5rem 1.5rem; margin-top: 2.5rem; }

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

  table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* --------------------------------------------------------------------------
   Small phone
   -------------------------------------------------------------------------- */
@media (max-width: 420px) {
  .shell { padding-inline: 14px; }
  .card__body { padding: 1rem 1rem 1.15rem; }
  .btn { font-size: .94rem; padding: .78em 1.25em; }
  .brand-text small { font-size: .55rem; }
}

/* --------------------------------------------------------------------------
   Landscape phones — keep the playfield tall enough to be usable
   -------------------------------------------------------------------------- */
@media (max-height: 520px) and (orientation: landscape) {
  .site-header { position: static; }
  .canvas-wrap { aspect-ratio: 20 / 9; }
  .game-stage { padding-block: 0; }
  .game-overlay__inner { max-width: 520px; }
  .game-overlay h2 { font-size: 1.2rem; margin-bottom: .2rem; }
  .game-overlay p { font-size: .88rem; margin-bottom: .7rem; }
  .overlay-score { margin: .5rem 0 .8rem; padding: .5rem 0; }
}

/* --------------------------------------------------------------------------
   Wide screens — give the directory a fourth column back
   -------------------------------------------------------------------------- */
@media (min-width: 1400px) {
  :root { --shell: 1280px; }
  .grid--auto { grid-template-columns: repeat(auto-fill, minmax(275px, 1fr)); }
}

/* --------------------------------------------------------------------------
   Print — strip chrome, keep the words
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .breadcrumbs, .ad-slot, .game-stage,
  .toc, .fav-btn, .game-toolbar, .btn-row { display: none !important; }
  body { font-size: 11pt; color: #000; background: #fff; }
  .shell { max-width: none; padding: 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
}