/* ==========================================================================
   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: avatar top-aligned with name; stats + rank stacked full-width */
  .stats-page .player-hero-top { padding: 18px; gap: 14px; }
  .stats-page .player-profile { align-items: flex-start; gap: 14px; }
  .stats-page .player-avatar { width: 60px; height: 60px; font-size: 1.55rem; border-radius: 14px; }
  .stats-page .player-level-badge { font-size: .66rem; padding: 3px 8px; }
  .stats-page .player-name-row { gap: 8px; }
  .stats-page .player-identity-bottom { flex-direction: column; align-items: stretch; gap: 14px; margin-top: 12px; }
  .stats-page .player-headline-stats { gap: 14px 20px; }
  .stats-page .hstat-value { font-size: 1.15rem; }
  .stats-page .player-rank { padding-left: 0; border-left: none; }
  .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-tabs { gap: 2px; }
  .stats-page .main-tab { padding: 9px 12px; font-size: .84rem; }
  .stats-page .player-hero-right { flex-direction: row; align-items: center; gap: 10px; margin-top: 2px; }
  .stats-page .player-tabs-inline { padding: 8px 12px; }
  .stats-page .card-content { padding: 16px; }
  .stats-page .chart-card .chart-container { height: 260px; padding: 10px; }
}

@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; }
}

/* Player page refresh responsive overrides */
@media (max-width: 1120px) {
  .stats-page .stats-layout { grid-template-columns: 1fr; }
  .stats-page .stats-sidebar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats-page .stats-sidebar > .card { min-width: 0; }
}
@media (max-width: 900px) {
  .stats-page .stats-sidebar { grid-template-columns: 1fr; }
  .stats-page .player-headline-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-page .player-rank { min-width: 0; padding-left: 0; border-left: none; }
}
@media (max-width: 620px) {
  .stats-page.container { padding-left: 12px; padding-right: 12px; }
  .stats-page .player-hero-top { min-height: 0; }
  .stats-page .player-profile { width: 100%; }
  .stats-page .player-headline-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stats-page .hstat { min-height: 64px; padding: 8px 10px; }
  .stats-page .stat-row,
  .stats-page .rank-info-grid,
  .stats-page .medal-breakdown,
  .stats-page .mini-grid { grid-template-columns: 1fr; }
  .stats-page .main-tab { flex: 1 1 calc(50% - 4px); justify-content: center; }
}
@media (max-width: 390px) {
  .stats-page .player-headline-stats { grid-template-columns: 1fr; }
}

/* Player page mobile polish */
@media (max-width: 760px) {
  .stats-page.container { padding-top: 16px; }
  .stats-page .player-hero-card { border-radius: 10px; margin-bottom: 14px; }
  .stats-page .player-hero-top { padding: 16px; }
  .stats-page .player-profile { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: start; width: 100%; }
  .stats-page .player-avatar { width: 58px; height: 58px; font-size: 1.48rem; border-radius: 12px; }
  .stats-page .player-level-badge { bottom: -7px; }
  .stats-page .player-name-row { min-height: 0; }
  .stats-page .player-username { font-size: 1.34rem; line-height: 1.05; }
  .stats-page .player-region-chip { height: 24px; padding: 0 9px; font-size: .74rem; }
  .stats-page .player-identity-bottom { grid-column: 1 / -1; margin-top: 14px; }
  .stats-page .player-headline-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .stats-page .player-rank { width: 100%; padding: 10px; border: 1px solid rgba(255,255,255,.075); border-radius: 8px; background: rgba(0,0,0,.18); }
  .stats-page .player-hero-right { width: 100%; justify-content: space-between; }
  .stats-page .main-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-page .main-tab { min-width: 0; padding: 9px 8px; }
  .stats-page .main-tab span:not(.material-icons) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .stats-page .stats-grid,
  .stats-page .stats-grid.two,
  .stats-page .stats-grid.three,
  .stats-page .stats-grid.charts { grid-template-columns: 1fr; gap: 12px; }
  .stats-page .stat-row,
  .stats-page .rank-info-grid,
  .stats-page .mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-page .medal-breakdown { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats-page .stats-card { min-height: 0; }
  .stats-page .card-content { padding: 14px; }
  .stats-page .chart-card .chart-container { height: 250px; padding: 10px 6px 6px; }
  .stats-page .chart-container.sm { height: 230px; }
}
@media (max-width: 430px) {
  .stats-page .player-profile { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; }
  .stats-page .player-avatar { width: 52px; height: 52px; font-size: 1.3rem; }
  .stats-page .player-username { font-size: 1.18rem; }
  .stats-page .hstat { min-height: 58px; }
  .stats-page .hstat-value { font-size: 1rem; }
  .stats-page .stat-row,
  .stats-page .rank-info-grid,
  .stats-page .mini-grid { grid-template-columns: 1fr; }
  .stats-page .medal-breakdown { gap: 7px; }
  .stats-page .mb-item { min-height: 68px; padding: 9px 5px; }
  .stats-page .mb-item .mb-l { font-size: .61rem; }
  .stats-page .main-tab { font-size: .8rem; }
}
@media (max-width: 350px) {
  .stats-page .player-headline-stats,
  .stats-page .main-tabs,
  .stats-page .medal-breakdown { grid-template-columns: 1fr; }
}

/* Widgets page responsive polish */
@media (max-width: 980px) {
  .widget-builder-shell,
  .widget-output,
  .widget-share-layout { grid-template-columns: 1fr; }
  .widget-builder-panel { order: 0; }
  .widget-output { gap: 14px; }
  .widget-share-head { flex-direction: column; }
  .widget-share-head .widget-type-toggle { justify-content: flex-start; }
}
@media (max-width: 760px) {
  .widgets-page { padding-top: 18px; }
  .widgets-hero { align-items: stretch; flex-direction: column; padding-top: 12px; }
  .widgets-hero .btn { width: 100%; justify-content: center; }
  .widget-builder-panel,
  .widget-preview-card,
  .widget-code-card { padding: 14px; }
  .widget-live-frame,
  .widget-preview { min-height: 220px; padding: 14px; }
  .widget-actions .btn { flex: 1 1 150px; justify-content: center; }
  .widget-type-toggle { display: grid; grid-template-columns: 1fr; width: 100%; }
  .widget-type-toggle .wt-btn { justify-content: center; }
}
@media (max-width: 420px) {
  .widgets-hero h1 { font-size: 1.62rem; }
  .widget-live-frame iframe { height: 190px; }
  .widget-empty-state { min-height: 280px; padding: 22px; }
  .widget-embed-tips div { grid-template-columns: 24px minmax(0,1fr); }
}

/* Widget spacing refinements responsive */
@media (max-width: 980px) {
  .widget-output,
  .widget-share-layout { max-width: none; }
}
@media (max-width: 760px) {
  .widget-share-code .widget-actions,
  .widget-code-card .widget-actions { gap: 8px; }
  .widget-share-code .widget-actions .btn,
  .widget-code-card .widget-actions .btn { flex: 1 1 100%; }
  .widget-type-list div { min-height: 68px; padding: 11px; }
  .widget-share-head { gap: 10px; }
}