/* ========== ЛИДЕРБОРД ==========
   Оверлей/окно — тот же паттерн, что и у referral_styles.css/achievements_styles.css
   (position:fixed + центрирование, общие .admin-header/.close-shop-btn). */

#leaderboardOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1200;
}

#leaderboardWindow {
  background: white;
  width: 94%;
  max-width: 640px; /* шире стандартных 480px — нужно место для 3 персонажей подиума рядом */
  max-height: 85vh;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
}

#leaderboardContent {
  padding: 20px;
  overflow-y: auto;
}

.leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.leaderboard-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
}

.leaderboard-row-me {
  background: #f0f2ff;
  font-weight: 600;
}

.leaderboard-rank {
  width: 36px;
  flex-shrink: 0;
  color: #888;
  font-size: 13px;
}

.leaderboard-username {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-rating {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  color: #667eea;
  font-weight: 600;
}

.leaderboard-me-hint {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #eee;
}

/* ===== ПОДИУМ (топ-3) =====
   Настоящий персонаж (тело+одежда, см. mountPodiumAvatars/applyPlayerEquipped в
   js/leaderboard.js) на платформе — 1 место в центре и выше, 2/3 по бокам ниже,
   низы платформ на одной линии (align-items: flex-end). */
.leaderboard-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}

.leaderboard-podium-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 0; /* делит доступную ширину поровну между тремя слотами */
  min-width: 0; /* без этого flex-shrink не работает — слот не давал бы сжаться ниже контента и ронял ряд в горизонтальный скролл */
  max-width: 190px;
}

/* Авка-бокс — тот же трюк масштабирования, что и у примерочной магазина
   (.preview-character .playerModel, см. css/shop_styles.css) — родная модель
   332×729, но вместо ФИКСИРОВАННОГО scale тут переменная (--podium-scale,
   ставится в JS через mountPodiumAvatars/scalePodiumAvatarBox в js/leaderboard.js)
   — измеряется РЕАЛЬНАЯ ширина бокса после того, как он уже влез в раскладку
   (flex/max-width выше), и scale подбирается ровно под неё. Фиксированное число
   тут не подходит: одно и то же значение не влезает одновременно и в узкое
   окно на телефоне, и в широкое на десктопе — вместо подбора "среднего,
   которое где-то всё равно обрезается" считаем его на лету, всегда впритык. */
.leaderboard-podium-avatar-box {
  position: relative;
  width: 100%;
  aspect-ratio: 332 / 729;
  overflow: visible;
  pointer-events: none;
}

.leaderboard-podium-avatar-box .playerModel {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scale(var(--podium-scale, 0.4));
  transform-origin: bottom center;
  width: 332px;
  height: 729px;
}

/* Дрон (аксессуар категории accs) родным 480px гораздо крупнее собственного
   бокса (.drone-orbit-mount, 400px) и летает по орбите с отлётом вправо от
   головы (left:112% в style.css) — на узком подиуме это вылетает за рамку
   окна. Сжимаем ТОЛЬКО тут (не трогая style.css — в комнате/примерочной с их
   шириной он и так помещается) вместе с --podium-scale выше. */
.leaderboard-podium-avatar-box .drone-img {
  width: 200px;
}

.leaderboard-podium-step {
  width: 100%;
  border-radius: 10px 10px 0 0;
  padding: 8px 6px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.leaderboard-podium-medal {
  font-size: 22px;
  line-height: 1;
}

.leaderboard-podium-username {
  font-size: 12px;
  font-weight: 600;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-podium-rating {
  font-size: 11px;
  opacity: 0.9;
  font-variant-numeric: tabular-nums;
}

.rank-1 .leaderboard-podium-step {
  height: 92px;
  background: linear-gradient(180deg, #ffd76a, #d69a1f);
}
.rank-2 .leaderboard-podium-step {
  height: 68px;
  background: linear-gradient(180deg, #d9d9e3, #9a9aa8);
}
.rank-3 .leaderboard-podium-step {
  height: 52px;
  background: linear-gradient(180deg, #e3a97a, #a9683a);
}