@media (max-width: 1024px) {
  body.has-top-nav {
    --top-nav-offset: 0px;
  }

  .top-nav {
    position: sticky;
    height: auto;
    padding: 0.5rem 0;
  }

  .top-nav__inner {
    flex-wrap: wrap;
    height: auto;
    gap: 0.75rem;
    padding: 0 1rem;
  }

  .top-nav__brand {
    order: 1;
    flex: 1 1 auto;
  }

  .top-nav__user {
    order: 2;
    flex: 0 0 auto;
  }

  .top-nav__links-wrapper {
    order: 3;
    flex: 1 1 100%;
    justify-content: flex-start;
    padding-bottom: 0.25rem;
  }

  .top-nav__links {
    gap: 0.8rem;
  }

  .top-nav__link {
    font-size: 0.72rem;
    letter-spacing: 0.18em;
  }

  .app-shell {
    padding-inline: 0.75rem;
  }

  .app-main {
    padding: 1rem 0.75rem;
  }

  .stats-page .grid {
    grid-template-columns: 1fr !important;
    gap: 1rem;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .stats-page .grid > aside,
  .stats-page .grid > main {
    grid-column: 1 / -1 !important;
  }

  .stats-page .grid > aside {
    order: 1;
  }

  .stats-page .grid > main {
    order: 2;
  }

  .stats-page .grid > .stats-col-right {
    order: 3;
  }

  .stats-page .grid > aside,
  .stats-page .grid > .stats-col-right {
    width: 100%;
  }

  .stats-page h1 {
    font-size: 1.25rem;
  }

  .stats-page .text-xs {
    font-size: 0.8rem;
  }

  .stats-page .text-sm {
    font-size: 0.9rem;
  }

  .app-main table,
  .ui-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #matches-table {
    min-width: 680px;
  }

  #matches-table th,
  #matches-table td {
    padding: 0.6rem 0.7rem;
    font-size: 0.85rem;
  }

  #matches-table td .text-xs {
    font-size: 0.75rem;
  }
}

@media (max-width: 720px) {
  .top-nav__brand-name {
    font-size: 0.72rem;
    letter-spacing: 0.2em;
  }

  .top-nav__section {
    font-size: 0.6rem;
    letter-spacing: 0.25em;
  }

  .top-nav__user-meta {
    display: none;
  }

  .top-nav__user-actions {
    letter-spacing: 0.15em;
  }

  .top-nav__links {
    gap: 0.6rem;
  }

  body {
    font-size: 15px;
  }

  .stats-page .grid {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  #matches-table {
    min-width: 620px;
  }
}