/* responsive.css
   Breakpoints. Last, so it overrides everything above.

   Part of the Teleport stylesheet, split by concern. index.html links these
   in source order; keep that order, the cascade depends on it. */

@media (max-width: 1000px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  /* The player detail stacks rather than squeezing two columns into a tablet
     width — the evaluation thread needs the full measure to stay readable. */
  .pgrid { grid-template-columns: 1fr; }
  .conf-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

@media (max-width: 820px) {
  /* The nav tabs move under the title rather than competing with the account
     menu for a shrinking row. */
  .nav { height: auto; padding: 10px 16px; flex-wrap: wrap; }
  .nav-tabs { order: 10; width: 100%; margin-left: 0; }
  .nav-tab { flex: 1; justify-content: center; }
  .an-prob { grid-template-columns: 1fr; gap: 14px; }
}

@media (max-width: 680px) {
  .shell { padding: 18px 14px 56px; }
  .greeting h1 { font-size: 22px; }

  .stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat { padding: 12px 13px; gap: 10px; }
  .stat-ic { width: 34px; height: 34px; }
  .stat-val { font-size: 19px; }

  .team-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
  .conf-grid { grid-template-columns: 1fr; }

  .team-hero { padding: 16px; gap: 13px; flex-wrap: wrap; }
  .team-hero-main h1 { font-size: 20px; }

  .phero { padding: 18px 16px; gap: 14px; flex-wrap: wrap; }
  .phero-top h1 { font-size: 22px; }
  /* The badges drop below the name instead of crowding it off the screen. */
  .phero-tail { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; }
  .phero-badges { justify-content: flex-start; }

  .filters { padding: 10px; }
  .filters-right { width: 100%; }
  .filter-select { flex: 1; min-width: 0; }

  /* The row tail wraps under the name rather than squeezing three chips and the
     name into 320px. */
  .prow { flex-wrap: wrap; row-gap: 8px; }
  .prow-tail { width: 100%; padding-left: 48px; justify-content: flex-start; }

  .nav-user-name, .nav-user-role { display: none; }
  .field-grid { grid-template-columns: 1fr; }
  .an-stats { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
  .meter-val { font-size: 28px; }
}