/* ==========================================================================
   Jumping Arcade — responsive rules (mobile first overrides)
   Breakpoints: 1440+ large, 1024–1439 desktop, 768–1023 tablet, 320–767 mobile
   ========================================================================== */

.nav-mobile-only { display: none; }

@media (min-width: 1440px) {
    :root { --container: 1320px; }
    .card-grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
}

@media (max-width: 1180px) {
    .header-search input { width: 150px; }
    .nav-list a { padding: 8px 9px; }
}

@media (max-width: 1023px) {
    .hero-grid { grid-template-columns: 1fr; }
    .hero-art { max-width: 300px; margin: 0 auto; order: -1; }
    .article-layout, .game-info { grid-template-columns: minmax(0, 1fr); }
    .toc, .side-facts { position: static; }
    .article-aside { order: -1; }
    .article-aside .sidebar-box { display: none; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* collapsible navigation */
    .nav-toggle { display: inline-flex; }
    .nav-mobile-only { display: block; }
    .main-nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg); display: none; }
    .main-nav.is-open { display: block; }
    .nav-list { flex-direction: column; align-items: stretch; padding: 8px var(--gutter) 16px; gap: 2px; }
    .nav-list a { padding: 12px; }
    .header-actions { margin-left: auto; }
}

@media (max-width: 767px) {
    body { font-size: 1rem; }
    .section { padding: 36px 0; }
    .hero { padding: 28px 0 24px; }
    .hero p { font-size: 1.05rem; }
    .header-search { display: none; }
    .logo { font-size: 1rem; }
    .footer-grid { grid-template-columns: 1fr; gap: 24px; }
    .card-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 14px; }
    .search-row { flex-direction: column; }
    .search-row .btn { width: 100%; }
    .game-shell { border-radius: 12px; padding: 6px; margin: 0 calc(var(--gutter) * -1 + 4px); }
    .game-hud { padding-bottom: 6px; }
    .hud-scores { gap: 10px; font-size: .88rem; }
    .hud-btn { width: 40px; height: 40px; }
    .game-stage[data-orientation] { min-width: 0; }
    .game-stage[data-orientation="portrait"] { width: min(100%, calc((100svh - 200px) * 9 / 16)); min-width: min(100%, 260px); }
    .touch-btn { height: 60px; }
    .result-item img, .result-thumb-icon { width: 72px; height: 46px; }
    .filters { grid-template-columns: 1fr 1fr; }
    .data-table { font-size: .88rem; }
}

@media (max-width: 400px) {
    :root { --gutter: 14px; }
    .logo-text { font-size: .92rem; }
    .logo-mark { width: 30px; height: 30px; }
    .header-inner { gap: 8px; }
    .icon-btn { width: 40px; height: 40px; }
    .filters { grid-template-columns: 1fr; }
    .touch-btn { min-width: 56px; padding: 0 10px; }
    .touch-btn-jump { min-width: 96px; }
    .hud-actions { gap: 4px; }
}

@media print {
    .site-header, .site-footer, .ad-container, .game-wrap, .toc, .fav-btn { display: none !important; }
    body { background: #fff; color: #000; }
}