/* Mobile leaderboard layout. Desktop presentation stays in styles.css;
   header and drawer styles belong to navigation.css. */
body.leaderboard-page {
  --page-gutter: 0.5rem;
}
body.leaderboard-page .page-shell { padding-inline: var(--page-gutter); }
body.leaderboard-page .tier-card { min-width: 0; margin-top: 0; }
body.leaderboard-page .kit-info-layout { padding-top: 0; }
body.leaderboard-page.mobile-kit-ready :is(.kit-leaderboard-header, .overall-header-shell) {
  padding: 0.5rem 0.5rem 0;
  min-width: 0;
}
body.leaderboard-page.mobile-kit-ready .tier-tabs {
  margin: 0;
  padding: 0.2rem;
  min-width: 0;
}
body.leaderboard-page.mobile-kit-ready .overall-tabs-scroll { overflow: visible; }
body.leaderboard-page.mobile-kit-ready .tier-tabs .nav-grid {
  display: flex;
  width: 100%;
  min-width: 0;
  gap: 0.2rem;
  margin: 0;
  padding: 0 1px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-padding-inline: 0.2rem;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
body.leaderboard-page .tier-tabs .nav-grid::-webkit-scrollbar { display: none; }
body.leaderboard-page.mobile-kit-ready .tier-tabs .nav-button {
  flex: 0 0 auto;
  min-width: 5rem;
  min-height: 2.75rem;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.4rem 0.55rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  scroll-snap-align: center;
}
body.leaderboard-page .tier-tabs .nav-button img { width: 1.15rem; height: 1.15rem; }
body.leaderboard-page .internal-info-controls {
  margin: 0;
  padding: 0.375rem 0.5rem;
}
body.leaderboard-page :is(.kit-info-toolbar, .overall-info-toolbar) { margin-top: 0.4rem; }
body.overall-page .overall-column-toolbar {
  min-height: 3.25rem;
  margin-top: 0;
  padding: 0.25rem 0.5rem;
}
body.overall-page .overall-column-toolbar > .internal-info-controls { padding: 0; margin-left: 0.5rem; }
body.overall-page .overall-column-toolbar .overall-leaderboard-header-wrap { display: none; }
body.leaderboard-page :is(#overall-filter-btn, .leaderboard-tools .info-rules-group #info-button, .leaderboard-tools .info-rules-group #kit-info-button) {
  min-width: 4.75rem;
  min-height: 2.75rem;
  height: 2.75rem;
  font-size: 0.75rem;
}
body.overall-page.mobile-kit-ready .overall-leaderboard-shell { overflow: visible; }
body.overall-page.mobile-kit-ready #overall-leaderboard { padding: 0.25rem 0.5rem 0.5rem; }
body.overall-page .overall-player-card {
  flex-flow: row wrap;
  align-items: center;
  column-gap: 0.625rem;
  row-gap: 0.375rem;
  padding: 0.5rem;
  min-height: 0;
}
body.overall-page .overall-player-card:hover { transform: none; }
body.overall-page .overall-player-plate {
  flex: 0 0 7rem;
  width: 7rem;
  min-width: 7rem;
  min-height: 3.5rem;
  border-radius: 0.625rem;
}
body.overall-page .overall-player-rank { left: 0.625rem; font-size: 1.5rem; }
body.overall-page .overall-player-bust { right: 14%; width: 48px; height: 58px; }
body.overall-page :is(.overall-player-content, .overall-player-main) { display: contents; }
body.overall-page .overall-player-identity { flex: 1 1 7rem; min-width: 0; width: auto; }
body.overall-page .overall-player-name { font-size: 1rem; line-height: 1.2; overflow-wrap: anywhere; margin-bottom: 0.125rem; }
body.overall-page .overall-player-points { font-size: 0.8125rem; }
body.overall-page .overall-player-slots-panel { flex: 1 0 100%; width: 100%; gap: 0; align-items: stretch; }
body.overall-page .overall-player-slots-label { display: none; }
body.overall-page .overall-player-slots {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  width: 100%;
  gap: 0.125rem;
  overflow: visible;
  padding: 0;
}
body.overall-page .overall-kit-slot { width: 100%; min-width: 0; height: 3.25rem; }
body.overall-page .overall-kit-icon-frame { width: 1.75rem; height: 1.75rem; padding: 0.2rem; }
body.overall-page .overall-kit-rank {
  min-width: 0;
  width: 100%;
  max-width: 2.625rem;
  height: 1.125rem;
  bottom: 0.125rem;
  padding: 0 0.0625rem;
  font-size: 0.75rem;
  line-height: 1;
}

/* Select a tier without duplicating player nodes or changing desktop data order. */
body.kit-page.mobile-kit-ready .kit-board-shell { padding: 0 0.5rem 0.5rem; }
body.kit-page.mobile-kit-ready .kit-board-scroll { overflow: visible; cursor: auto; }
body.kit-page.mobile-kit-ready .kit-board-inner { width: 100%; min-width: 0; }
body.kit-page .mobile-tier-selector {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}
.mobile-tier-selector button {
  min-height: 2.75rem;
  padding: 0.35rem 0.125rem;
  border: 1px solid var(--flat-border-strong, #303641);
  border-radius: 0.5rem;
  background: var(--flat-surface-raised, #141821);
  color: var(--text-secondary, #c5cbd4);
  font: 650 0.75rem var(--font-base, sans-serif);
  cursor: pointer;
}
body.kit-page .mobile-tier-empty-state:not([hidden]) {
  display: block;
  padding: 1.5rem 0.75rem;
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.875rem;
}
.mobile-tier-selector button[aria-pressed="true"] {
  color: #fff;
  border-color: var(--accent-primary);
  background: var(--flat-accent-surface, #2b171c);
  box-shadow: inset 0 -2px var(--accent-primary);
}
.mobile-tier-selector button:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 1px; }
body.kit-page .kit-board-shell[data-mobile-tier] .kit-board-heading { display: none; }
body.kit-page.mobile-kit-ready #leaderboard-tiers.player-card-layout .tier-row {
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
  margin: 0 0 0.375rem;
  gap: 0;
}
body.kit-page .kit-board-shell[data-mobile-tier] .tier-row > * { display: none; }
body.kit-page .kit-board-shell[data-mobile-tier="1"] .tier-row > :nth-child(1),
body.kit-page .kit-board-shell[data-mobile-tier="2"] .tier-row > :nth-child(2),
body.kit-page .kit-board-shell[data-mobile-tier="3"] .tier-row > :nth-child(3),
body.kit-page .kit-board-shell[data-mobile-tier="4"] .tier-row > :nth-child(4),
body.kit-page .kit-board-shell[data-mobile-tier="5"] .tier-row > :nth-child(5) { display: block; }
body.kit-page .kit-board-shell[data-mobile-tier] #leaderboard-tiers .mobile-tier-empty { display: none; }
body.kit-page #leaderboard-tiers .player-card {
  grid-template-columns: 38px 1.75rem minmax(0, 1fr);
  min-height: 3.5rem;
  padding: 0.5rem 0.75rem;
  gap: 0.625rem;
}
body.kit-page #leaderboard-tiers .player-name {
  font-size: 0.9375rem;
  line-height: 1.3;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}
body.kit-page #leaderboard-tiers .rank-chip { font-size: 0.8125rem; }

@media (max-width: 359px) {
  body.overall-page .overall-player-slots { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.125rem; }
  body.overall-page .overall-kit-slot { height: 2rem; flex-direction: row; justify-content: center; gap: 0.125rem; }
  body.overall-page .overall-kit-icon-frame { width: 1.5rem; height: 1.5rem; }
  body.overall-page .overall-kit-rank { position: static; transform: none; width: auto; min-width: 2rem; max-width: none; }
}