/* Keep the same complete navigation visible across desktop and narrow screens. */
:is(.topbar, .stats-topbar, .pitch-topbar, .leader-topbar) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
  padding-top: 8px;
  padding-bottom: 7px;
}
:is(.topbar > .brand, .stats-topbar > .stats-brand, .pitch-topbar > .pitch-brand, .leader-topbar > .leader-brand) {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}
:is(.topbar > .topbar-actions, .stats-topbar > .stats-topbar-actions, .pitch-topbar > .pitch-topbar-actions, .leader-topbar > .leader-actions) {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  min-width: 0;
  margin-left: 0;
}
:is(.topbar > .nav, .stats-topbar > .stats-nav, .pitch-topbar > .pitch-nav, .leader-topbar > .leader-nav) {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  gap: 4px;
  margin: 0;
  padding: 3px 0 4px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
:is(.topbar > .nav, .stats-topbar > .stats-nav, .pitch-topbar > .pitch-nav, .leader-topbar > .leader-nav) > a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 11px;
  border: 0;
  border-radius: 8px;
  color: var(--ui-text-secondary, #45566b);
  background: transparent;
  box-shadow: none;
  font: 700 12px/1.2 Inter, "Noto Sans TC", sans-serif;
  text-decoration: none;
  white-space: nowrap;
}
:is(.topbar > .nav, .stats-topbar > .stats-nav, .pitch-topbar > .pitch-nav, .leader-topbar > .leader-nav) > a:hover,
:is(.topbar > .nav, .stats-topbar > .stats-nav, .pitch-topbar > .pitch-nav, .leader-topbar > .leader-nav) > a:focus-visible {
  color: var(--ui-text, #14263a);
  background: var(--ui-primary-soft, #eaf3ff);
}
:is(.topbar > .nav, .stats-topbar > .stats-nav, .pitch-topbar > .pitch-nav, .leader-topbar > .leader-nav) > a:is(.active, .is-active, [aria-current="page"]) {
  color: #fff;
  background: var(--ui-primary, #006ac6);
  box-shadow: none;
}
:is(.topbar > .nav, .stats-topbar > .stats-nav, .pitch-topbar > .pitch-nav, .leader-topbar > .leader-nav, .admin-header__nav, .site-header__nav) > a[hidden] {
  display: none !important;
}
.admin-header__inner {
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  row-gap: 2px;
  padding-top: 8px;
  padding-bottom: 7px;
}
.admin-header__brand { grid-column: 1; grid-row: 1; }
.admin-header__tools { grid-column: 2; grid-row: 1; justify-self: end; }
.admin-header__nav {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-content: flex-start;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
}
.site-header .site-header__inner {
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  row-gap: 2px;
  padding-top: 8px;
  padding-bottom: 7px;
}
.site-header .site-header__brand { grid-column: 1; grid-row: 1; }
.site-header .site-header__tools { grid-column: 2; grid-row: 1; }
.site-header .site-header__nav {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  gap: 4px;
  padding: 3px 0 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.site-header .site-header__tools > [data-site-menu-toggle] { display: none; }
@media (max-width: 900px) {
  body .topbar > .nav { display: flex !important; }
  .stats-topbar > .stats-nav, .pitch-topbar > .pitch-nav,
  .leader-topbar > .leader-nav, .site-header .site-header__nav { display: flex; }
}
@media (max-width: 700px) {
  .site-header .site-header__nav,
  .site-header[data-menu-open="true"] .site-header__nav {
    display: flex;
    flex-wrap: nowrap;
  }
  .site-header .site-header__tools > [data-site-menu-toggle] { display: none; }
}
@media (max-width: 380px) {
  :is(.topbar > .nav, .stats-topbar > .stats-nav, .pitch-topbar > .pitch-nav, .leader-topbar > .leader-nav) > a,
  .admin-header__nav > a, .site-header .site-header__nav > a { min-height: 36px; padding-inline: 9px; font-size: 11px; }
}