/* ════════════════════════════════════════════
   Rank (排行榜, v3.27)
   ════════════════════════════════════════════ */
.rank-shop { padding: 4px 0; }

.rank-mode-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
  background: var(--c-surface3);
  padding: 3px;
  border-radius: var(--r-md);
}
.rank-mode-tab {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--c-text-dim);
  font-size: 0.8em;
  font-family: var(--font);
  padding: 7px 4px;
  cursor: pointer;
  border-radius: var(--r-sm);
}
.rank-mode-tab.active {
  background: var(--c-surface2);
  color: var(--c-gold);
  font-weight: bold;
  box-shadow: 0 0 0 1px var(--c-gold-dim);
}

.rank-boards {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 7px 8px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  margin-bottom: 8px;
}
.rank-board-chip {
  background: var(--c-surface2);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 4px 10px;
  color: var(--c-text-dim);
  font-size: 0.72em;
  font-family: var(--font);
  cursor: pointer;
}
.rank-board-chip.active {
  background: rgba(200,160,60,0.15);
  border-color: var(--c-gold-dim);
  color: var(--c-gold);
  font-weight: bold;
}

.rank-body {
  max-height: 420px;
  overflow-y: auto;
}
.rank-loading, .rank-empty {
  text-align: center;
  padding: 30px 0;
  color: var(--c-text-faint);
  font-size: 0.85em;
}

.rank-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.rank-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  margin-bottom: 4px;
  font-size: 0.84em;
}
.rank-row:nth-child(1) { border-color: rgba(255,215,0,0.5); background: rgba(255,215,0,0.05); }
.rank-row:nth-child(2) { border-color: rgba(192,192,192,0.5); background: rgba(192,192,192,0.05); }
.rank-row:nth-child(3) { border-color: rgba(205,127,50,0.5); background: rgba(205,127,50,0.05); }

.rank-medal {
  font-size: 1.4em;
  flex-shrink: 0;
  width: 30px;
  text-align: center;
}
.rank-num {
  flex-shrink: 0;
  width: 30px;
  text-align: center;
  color: var(--c-text-faint);
  font-size: 0.88em;
  font-weight: bold;
}
.rank-name {
  flex: 1;
  min-width: 0;
  font-weight: bold;
  color: var(--c-gold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rank-value {
  font-size: 0.85em;
  color: var(--c-text-dim);
  text-align: right;
  line-height: 1.4;
}
.rank-value br { line-height: 1.2; }