@media (max-width: 980px) {
  .hero-grid,
  .detail-layout {
    grid-template-columns: 1fr;
  }

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

  .guide-grid,
  .stats-grid,
  .counter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .container { width: min(100% - 22px, 1160px); }
  .nav-wrap { align-items: flex-start; padding: 12px 0; flex-direction: column; }
  .main-nav { justify-content: flex-start; }
  .main-nav a { padding: 8px 9px; font-size: 0.84rem; }
  .hero { min-height: auto; padding-top: 34px; }
  .search-box { flex-direction: column; }
  .section-head { align-items: start; flex-direction: column; }
  .anime-grid,
  .skeleton-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .ranking-row {
    grid-template-columns: 38px 48px minmax(0, 1fr);
  }
  .ranking-row .btn { grid-column: 1 / -1; }
  .ranking-thumb { width: 48px; height: 68px; }
  .form-grid,
  .guide-grid,
  .stats-grid,
  .counter-grid,
  .list-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .anime-grid,
  .skeleton-grid {
    grid-template-columns: 1fr;
  }
}