/* ==========================================================
   Ranking Page Styles
   ========================================================== */

/* --- Tabs (horizontal scroll) --- */

.rank-tabs {
  display: flex;
  gap: var(--space-xs);
  padding: 0 var(--space-lg);
  margin-bottom: var(--space-md);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.rank-tabs::-webkit-scrollbar {
  display: none;
}

.rank-tab {
  flex-shrink: 0;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  color: var(--tg-theme-hint-color);
  background: var(--tg-theme-secondary-bg-color);
  border: none;
  border-radius: var(--radius-md);
  white-space: nowrap;
  min-height: 36px;
  transition: background var(--transition-fast), color var(--transition-fast);
  cursor: pointer;
}

.rank-tab.active {
  background: var(--tg-theme-button-color);
  color: var(--tg-theme-button-text-color);
}

/* --- Loading / Empty --- */

.rank-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: var(--tg-theme-hint-color);
  font-size: var(--font-sm);
}

.rank-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: var(--tg-theme-hint-color);
  font-size: var(--font-sm);
  gap: var(--space-sm);
}

.rank-empty-icon {
  font-size: 48px;
}

/* --- List Container --- */

.rank-list-wrap {
  padding-bottom: 72px; /* space for fixed my-rank bar + nav */
}

/* --- Top 3 Items (medal rows) --- */

.rank-top-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  margin: 0 var(--space-lg) var(--space-xs);
  background: var(--tg-theme-secondary-bg-color);
  border-radius: var(--radius-md);
}

.rank-top-item.me {
  border-left: 3px solid var(--tg-theme-button-color);
}

.rank-top-medal {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}

.rank-top-info {
  flex: 1;
  min-width: 0;
}

.rank-top-name {
  font-size: var(--font-md);
  font-weight: var(--weight-semibold);
  color: var(--tg-theme-text-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rank-top-hp {
  font-size: var(--font-sm);
  font-weight: var(--weight-bold);
  color: var(--tg-theme-button-color);
  margin-top: 2px;
}

/* --- Regular Rows (4-25) --- */

.rank-list {
  padding: var(--space-sm) var(--space-lg);
}

.rank-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
}

.rank-row.me {
  border-left: 3px solid var(--tg-theme-button-color);
  background: var(--tg-theme-secondary-bg-color);
}

.rank-num {
  width: 36px;
  flex-shrink: 0;
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  color: var(--tg-theme-hint-color);
}

.rank-name {
  flex: 1;
  min-width: 0;
  font-size: var(--font-sm);
  color: var(--tg-theme-text-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rank-hp {
  flex-shrink: 0;
  font-size: var(--font-sm);
  font-weight: var(--weight-semibold);
  color: var(--tg-theme-button-color);
}

/* --- My Rank (fixed bottom bar) --- */

.rank-my-bar {
  position: fixed;
  bottom: calc(var(--nav-height) + var(--safe-area-bottom));
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--tg-theme-bg-color);
  border-top: 1px solid var(--tg-theme-section-separator-color);
  padding: var(--space-sm) var(--space-lg);
}

.rank-my-label {
  font-size: var(--font-xs);
  color: var(--tg-theme-hint-color);
  margin-bottom: var(--space-xs);
}

.rank-my-bar .rank-row {
  padding: var(--space-sm) var(--space-md);
}