/* ==========================================================================
   Responsive rules layered on style.css
   ========================================================================== */
@media (max-width: 980px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  /* player page: stack sidebar under main content */
  .stats-page .stats-layout { grid-template-columns: 1fr; }
  .stats-page .stats-sidebar { flex-direction: row; flex-wrap: wrap; }
  .stats-page .stats-sidebar > .card { flex: 1 1 260px; }
  .stats-page .stats-grid.three { grid-template-columns: repeat(2, 1fr); }
}

/* navbar: collapse desktop menu into the slide-in mobile menu */
@media (max-width: 900px) {
  .modern-nav-menu { display: none; }
  .modern-mobile-toggle { display: inline-flex; }
}
@media (max-width: 560px) {
  .modern-nav-cta .cta-label { display: none; }
  .modern-nav-cta { padding: 0; width: 38px; justify-content: center; }
}

@media (max-width: 760px) {
  .modern-navbar-container { padding: 0 16px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .hero { padding: 44px 0 28px; }
  .search-form { flex-direction: column; }
  .search-form .btn { width: 100%; }
  .profile-hero { gap: 16px; }
  .avatar { width: 64px; height: 64px; font-size: 1.7rem; border-radius: 15px; }
  .stat-card .value { font-size: 1.55rem; }
  .footer-grid { flex-direction: column; }
  /* player page mobile */
  .stats-page .player-hero-top { padding: 20px; gap: 16px; }
  .stats-page .player-avatar { width: 66px; height: 66px; font-size: 1.7rem; border-radius: 15px; }
  .stats-page .player-identity-bottom { gap: 16px; }
  .stats-page .player-rank { padding-left: 16px; }
  .stats-page .player-headline-stats { gap: 18px; }
  .stats-page .hstat-value { font-size: 1.1rem; }
  .stats-page .stats-grid, .stats-page .stats-grid.two, .stats-page .stats-grid.three, .stats-page .stats-grid.charts { grid-template-columns: 1fr; }
  .stats-page .stats-sidebar { flex-direction: column; }
  .stats-page .main-tab { padding: 9px 13px; font-size: .85rem; }
  .stats-page .player-hero-right { flex-direction: row; align-items: center; }
}

@media (max-width: 440px) {
  .container { padding: 0 13px; }
  .panel, .card { padding: 17px; }
  .nav .brand { font-size: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}