/* ==========================================================================
   Ninja Arcade — Responsive layer
   Breakpoints: 1080 / 900 / 700 / 540 / 380
   The site is usable from 320px upward; games keep a playable canvas at
   every width by scaling the stage rather than the internal resolution.
   ========================================================================== */

@media (max-width: 1080px) {
  .footer-grid { grid-template-columns: 1.4fr repeat(2, 1fr); row-gap: var(--sp-6); }
  .article-layout { grid-template-columns: minmax(0, 1fr) 260px; gap: var(--sp-5); }
  .grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  :root { --header-h: 58px; }

  /* Collapse the desktop nav into a disclosure panel */
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: var(--c-bg);
    border-top: 1px solid var(--c-border);
    padding: var(--sp-4);
    overflow-y: auto;
    margin-left: 0;
    display: none;
    z-index: 99;
  }
  .nav[data-open="true"] { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list > li { border-bottom: 1px solid var(--c-border); }
  .nav__list a { padding: var(--sp-4) var(--sp-2); font-size: 1rem; }
  .nav__submenu {
    position: static;
    display: block;
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0 0 var(--sp-3) var(--sp-4);
    min-width: 0;
  }
  .nav__submenu a { padding: var(--sp-2); font-size: 0.92rem; color: var(--c-muted); }

  .hero__inner { grid-template-columns: 1fr; gap: var(--sp-5); }
  .hero__art { order: -1; max-width: 460px; margin-inline: auto; }
  .hero { padding-block: var(--sp-6); }

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

  .game-stage-wrap { grid-template-columns: minmax(0, 1fr); }
  .game-side { position: static; }
}

@media (max-width: 700px) {
  .section { padding-block: var(--sp-6); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .author-box { flex-direction: column; }
  .hud { font-size: 0.82rem; }
  .prose { font-size: 1rem; }
  .game-controls-bar { flex-wrap: wrap; }
  .game-controls-bar .btn { flex: 1 1 calc(50% - var(--sp-2)); }
  /* Without this the spacer pushes the favourite button onto a row of its own */
  .game-controls-bar .spacer { display: none; }
}

@media (max-width: 540px) {
  :root { --sp-7: 2.25rem; --sp-8: 3rem; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .hero__stats { gap: var(--sp-5); }
  .hero__actions .btn { width: 100%; }
  .brand__name span { display: none; }
  .section-head { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .consent { left: var(--sp-2); right: var(--sp-2); bottom: var(--sp-2); padding: var(--sp-4); }
  .consent__actions { width: 100%; }
  .consent__actions .btn { flex: 1; }
}

@media (max-width: 380px) {
  .wrap { padding-inline: var(--sp-3); }
  .brand { font-size: 1rem; }
  .brand__mark { width: 30px; height: 30px; }
  .hud__item strong { font-size: 1rem; }
  .touch-btn { width: 64px; height: 64px; }
}

/* Very wide screens: keep line lengths sane, let grids breathe */
@media (min-width: 1500px) {
  :root { --wrap: 1280px; }
}

/* Touch-first devices get bigger hit targets on the game overlay */
@media (hover: none) {
  .card:hover { transform: none; box-shadow: none; }
  .touch-controls { display: flex; }
}

/* Print: strip chrome, keep the words */
@media print {
  .site-header, .site-footer, .ad-slot, .sidebar, .consent,
  .touch-controls, .game-controls-bar, .breadcrumbs { display: none !important; }
  body { background: #fff; color: #000; }
  .article-layout { grid-template-columns: 1fr; }
  a { color: #000; text-decoration: underline; }
}