/* App layout of leaderboards.html (phones and touch tablets: html.gt-app, see mobile-shell.css),
   layered on discovery.css + leaderboards.css. Same markup and leaderboards.js as on PC. */

/* clip, not hidden: the board tabs can then stay under the app bar while scrolling. */
.gt-app .gt-leaderboards-page { min-height: 0; overflow: clip; }
.gt-app .gt-leaderboards-page .gt-leaderboards-section { padding: 1rem 0 1.5rem; }
.gt-app .gt-leaderboards-page .gt-leaderboards-section > .container { max-width: 1180px; padding-inline: var(--gtm-gutter); }

/* Header */
.gt-app .gt-leaderboards-page .gt-lb-head { flex-direction: column; align-items: flex-start; gap: .5rem; margin-bottom: .9rem; }
.gt-app .gt-leaderboards-page .gt-lb-head h1 { margin: 0; font-size: clamp(1.75rem, 7vw, 2.4rem); letter-spacing: -.035em; }
.gt-app .gt-leaderboards-page .gt-lb-head p { margin: .3rem 0 0; font-size: .86rem; }
.gt-app .gt-leaderboards-page .gt-lb-updated { justify-content: flex-start; font-size: .74rem; }

/* Board tabs: one scrolling row that stays under the app bar. */
.gt-app .gt-leaderboards-page .gt-tabs { position: sticky; top: calc(58px + env(safe-area-inset-top)); z-index: 25; display: flex; gap: .35rem; margin: 0 calc(-1 * var(--gtm-gutter)) .9rem; padding: .5rem var(--gtm-gutter); overflow-x: auto; border: 0; border-radius: 0; border-bottom: 1px solid var(--gt-border); background: color-mix(in srgb, var(--gt-bg) 90%, transparent); box-shadow: none; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); scrollbar-width: none; }
.gt-app .gt-leaderboards-page .gt-tabs::-webkit-scrollbar { display: none; }
.gt-app .gt-leaderboards-page .gt-tab { flex: none; min-height: 36px; padding: 0 .85rem; border: 1px solid var(--gt-border); border-radius: 999px; font-size: .82rem; white-space: nowrap; }
.gt-app .gt-leaderboards-page .gt-tab.active { border-color: transparent; }

/* Columns that may shrink: long names and the podium must never widen the page. */
.gt-app .gt-leaderboards-page .gt-lb-content { grid-template-columns: minmax(0, 1fr); gap: .8rem; }

/* Your rank + podium */
.gt-app .gt-leaderboards-page .gt-lb-top { grid-template-columns: minmax(0, 1fr); gap: .7rem; }
.gt-app .gt-leaderboards-page .gt-lb-me { padding: 1rem; gap: .9rem; border-radius: 20px; }
.gt-app .gt-leaderboards-page .gt-lb-me-emblem { --gt-rank-emblem-size: 58px; }
.gt-app .gt-leaderboards-page .gt-lb-podium-card { padding: .7rem; border-radius: 20px; }

/* A real three-step podium on phones too (leaderboards.css turns it into a list below 520 px). */
.gt-app .gt-leaderboards-page .gt-lb-podium,
.gt-app .gt-leaderboards-page .gt-lb-podium[data-count="2"] { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: .45rem; }
.gt-app .gt-leaderboards-page .gt-lb-podium[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.gt-app .gt-leaderboards-page .gt-lb-podium-player,
.gt-app .gt-leaderboards-page .gt-lb-podium-player[data-rank="1"] { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-height: 0; padding: 1.6rem .4rem .75rem; gap: .1rem; text-align: center; }
.gt-app .gt-leaderboards-page .gt-lb-podium-player[data-rank="1"] { order: 2 !important; padding-top: 2.2rem; padding-bottom: 1.1rem; }
.gt-app .gt-leaderboards-page .gt-lb-podium-player[data-rank="2"] { order: 1 !important; }
.gt-app .gt-leaderboards-page .gt-lb-podium-player[data-rank="3"] { order: 3 !important; }
.gt-app .gt-leaderboards-page .gt-lb-podium-medal { top: .5rem; left: 50%; transform: translateX(-50%); }
.gt-app .gt-leaderboards-page .gt-lb-podium-emblem,
.gt-app .gt-leaderboards-page [data-rank="1"] > .gt-lb-podium-emblem { --gt-rank-emblem-size: 44px; margin: 0 0 .35rem; }
.gt-app .gt-leaderboards-page [data-rank="1"] > .gt-lb-podium-emblem { --gt-rank-emblem-size: 54px; }
.gt-app .gt-leaderboards-page .gt-lb-podium-name { justify-content: center; max-width: 100%; }
.gt-app .gt-leaderboards-page .gt-lb-podium-name strong { overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }
.gt-app .gt-leaderboards-page .gt-lb-podium-name .gt-friend-quick-add { display: none; }
.gt-app .gt-leaderboards-page .gt-lb-podium-country { overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }
.gt-app .gt-leaderboards-page .gt-lb-podium-rank,
.gt-app .gt-leaderboards-page .gt-lb-podium-score { margin: 0; text-align: center; }
.gt-app .gt-leaderboards-page .gt-lb-podium-skeleton { min-height: 120px; }

/* Ranking */
.gt-app .gt-leaderboards-page .gt-lb-ranking-card { border-radius: 20px; }
.gt-app .gt-leaderboards-page .gt-lb-ranking-head { padding: 1rem; }
.gt-app .gt-leaderboards-page .gt-lb-toolbar { width: 100%; }
.gt-app .gt-leaderboards-page .gt-lb-toolbar .gt-lb-search { width: 100%; }
.gt-app .gt-leaderboards-page .gt-lb-difficulties { max-width: 100%; overflow-x: auto; scrollbar-width: none; }

/* Phones: each player on one card-like line — position, name over rank, value on the right. */
@media (max-width: 759.98px) {
  .gt-app .gt-leaderboards-page .gt-lb-table thead { display: none; }
  .gt-app .gt-leaderboards-page .gt-lb-table, .gt-app .gt-leaderboards-page .gt-lb-table tbody { display: block; }
  .gt-app .gt-leaderboards-page .gt-lb-table tbody tr { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; grid-template-areas: "pos player value" "pos rank value"; align-items: center; column-gap: .6rem; padding: .65rem 1rem; border-bottom: 1px solid var(--gt-border); }
  .gt-app .gt-leaderboards-page .gt-lb-table tbody td { display: block; height: auto; padding: 0 !important; border: 0; background: transparent; }
  .gt-app .gt-leaderboards-page .gt-lb-table td.gt-lb-rank-cell { grid-area: pos; font-size: .95rem; }
  .gt-app .gt-leaderboards-page .gt-lb-table td.gt-lb-player-cell { grid-area: player; min-width: 0; }
  .gt-app .gt-leaderboards-page .gt-lb-player-line { min-width: 0; }
  .gt-app .gt-leaderboards-page .gt-lb-player-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gt-app .gt-leaderboards-page .gt-lb-table td.gt-lb-rank-badge-cell { grid-area: rank; overflow: visible; }
  .gt-app .gt-leaderboards-page .gt-lb-table td.gt-lb-col-value { grid-area: value; width: auto; font-size: .95rem; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
  .gt-app .gt-leaderboards-page .gt-lb-table td.gt-lb-col-elo { display: none; }
  .gt-app .gt-leaderboards-page .gt-lb-table td.gt-lb-empty { grid-column: 1 / -1; }
  .gt-app .gt-leaderboards-page .gt-lb-table tbody tr:has(td.gt-lb-empty) { display: block; }
  .gt-app .gt-leaderboards-page .gt-lb-rank { gap: .35rem; }
  .gt-app .gt-leaderboards-page .gt-lb-rank .gt-lb-rank-label { font-size: .74rem; }
  /* The ladder scrolls sideways instead of wrapping. */
  .gt-app .gt-leaderboards-page .gt-lb-ladder { display: flex; gap: .45rem; margin-inline: -1rem; padding: 0 1rem .2rem; overflow-x: auto; scrollbar-width: none; }
  .gt-app .gt-leaderboards-page .gt-lb-ladder::-webkit-scrollbar { display: none; }
  .gt-app .gt-leaderboards-page .gt-lb-ladder-tier { flex: 0 0 76px; }
}

.gt-app .gt-leaderboards-page .gt-lb-pagination { gap: .4rem; padding: .8rem 1rem; }
.gt-app .gt-leaderboards-page .gt-lb-ladder-card { padding: 1rem; border-radius: 20px; }

/* ------------------------------------------------------------ tablets */
@media (min-width: 600px) {
  .gt-app .gt-leaderboards-page .gt-lb-head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}
@media (min-width: 760px) {
  .gt-app .gt-leaderboards-page .gt-leaderboards-section { padding-top: 1.6rem; }
  .gt-app .gt-leaderboards-page .gt-lb-top { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: stretch; }
  .gt-app .gt-leaderboards-page .gt-lb-podium-card { display: flex; align-items: flex-end; }
  .gt-app .gt-leaderboards-page .gt-lb-podium { width: 100%; }
  .gt-app .gt-leaderboards-page .gt-lb-ladder { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .gt-app .gt-leaderboards-page .gt-lb-ladder { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}