/* ==========================================================================
   Underwater Arcade Games — Responsive layer
   Mobile-first base lives in style.css / games.css; this file holds the
   breakpoint overrides. Loaded last so its rules win.
   ========================================================================== */

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

/* --------------------------------------------------------------------------
   Below 1080px — sidebars narrow
   -------------------------------------------------------------------------- */
@media (max-width: 1240px) {
  .site-nav a          { padding-inline: .45rem; font-size: .88rem; }
  .header-search input { width: 118px; }
}

@media (max-width: 1080px) {
  .article-layout { grid-template-columns: minmax(0, 1fr) 260px; gap: var(--space-4); }
  .game-layout    { grid-template-columns: minmax(0, 1fr) 260px; }
  /* Shrink the header field rather than dropping it — the drawer only takes
     over at 960px, so removing it here would leave a gap with no search. */
  .site-nav a          { padding-inline: .38rem; font-size: .85rem; }
  .header-search input { width: 96px; }
  .header-search .btn  { padding-inline: .7rem; }
}

/* --------------------------------------------------------------------------
   Below 960px — collapse to a single column, switch to the mobile menu
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  :root {
    --step-5: 2.2rem;
    --step-4: 1.85rem;
    --step-3: 1.5rem;
  }

  .nav-toggle { display: inline-flex; }

  .site-nav {
    position: fixed;
    inset: 64px 0 auto 0;
    margin: 0;
    max-height: calc(100vh - 64px);
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    background: var(--deep);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-2);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .site-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-2) var(--space-3) var(--space-3);
    max-width: var(--wrap);
    margin-inline: auto;
  }
  .site-nav li { margin: 0; }
  .site-nav a {
    padding: .85rem .6rem;
    font-size: 1rem;
    border-bottom: 1px solid var(--line-soft);
    border-radius: 0;
  }

  /* Search moves inside the drawer on mobile */
  .header-search { display: none; }
  .site-nav .nav-search { display: block; padding: var(--space-2) .6rem 0; }
  .site-nav .nav-search form { display: flex; gap: .4rem; }
  .site-nav .nav-search input {
    flex: 1;
    background: var(--abyss);
    border: 1px solid var(--line);
    color: var(--ink);
    border-radius: var(--radius-sm);
    padding: .65rem .8rem;
    font: inherit;
    min-height: 46px;
  }
  .site-nav .nav-search input:focus { border-color: var(--glow); outline: none; box-shadow: var(--ring); }

  .hero-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .hero-art  { order: -1; }
  .hero      { padding-block: var(--space-4); }

  .article-layout, .game-layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; }
  /* A 600px tall sidebar unit makes no sense stacked under the article */
  .sidebar .ad-sidebar { min-height: 250px; }

  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }

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

/* --------------------------------------------------------------------------
   Below 700px — phones
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  :root {
    --step-5: 1.95rem;
    --step-4: 1.65rem;
    --step-3: 1.38rem;
    --step-2: 1.2rem;
    --space-6: 2.8rem;
    --space-5: 2rem;
  }

  body { line-height: 1.65; }

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

  .game-card .card-body { padding: var(--space-2); gap: .5rem; }
  .game-card h3 { font-size: 1rem; }
  .game-card p {
    font-size: .82rem;
    /* Keep card heights even on narrow screens */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .prose { font-size: 1rem; }

  .game-stage {
    aspect-ratio: 4 / 3;
    max-height: 62vh;
    border-radius: var(--radius-sm);
  }

  .game-hud { font-size: .78rem; padding: .45rem .6rem; gap: .3rem .7rem; }
  .hud-meter .meter-track { width: 58px; }

  .game-toolbar { padding: var(--space-2) .6rem; }
  .game-toolbar .btn { flex: 1; }

  .touch-btn { width: 52px; height: 52px; }

  .footer-grid { grid-template-columns: 1fr; gap: var(--space-3); }

  .btn-row .btn { flex: 1 1 100%; }

  .article-meta { font-size: .8rem; }

  .author-box { flex-direction: column; }
  .author-box img { width: 60px; height: 60px; }

  .ad-sidebar, .ad-content, .ad-game-bottom { min-height: 250px; }
  .ad-top { min-height: 90px; }
}

/* --------------------------------------------------------------------------
   Very small phones
   -------------------------------------------------------------------------- */
@media (max-width: 400px) {
  .grid, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .brand-name span { display: none; }
  .touch-btn { width: 48px; height: 48px; }
}

/* --------------------------------------------------------------------------
   Short landscape (phones held sideways to play) — maximise the stage
   -------------------------------------------------------------------------- */
@media (max-height: 520px) and (orientation: landscape) {
  .site-header { position: static; }
  .game-stage { aspect-ratio: auto; height: 82vh; max-height: none; }
  .game-hud { padding: .35rem .6rem; font-size: .75rem; }
}

/* --------------------------------------------------------------------------
   Pointer-coarse devices — bigger hit areas everywhere
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .btn-sm { min-height: 44px; }
  .chip { min-height: 40px; padding-block: .55rem; }
  .site-nav a { padding-block: .8rem; }
  .fav-btn { width: 44px; height: 44px; }
}

/* --------------------------------------------------------------------------
   Print — strip the chrome, keep the words
   -------------------------------------------------------------------------- */
@media print {
  body { background: #fff; color: #000; }
  .site-header, .site-footer, .ad-slot, .sidebar, .game-stage,
  .game-toolbar, .touch-controls, .skip-link, .btn-row { display: none !important; }
  .article-layout { grid-template-columns: 1fr; }
  a { color: #000; }
  a::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}