/* leaderboard.css — AI 对战胜率排行榜样式,与 app.css 协调 */

.leaderboard-nav {
  margin-bottom: var(--space-3, 12px);
}

.leaderboard-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  margin-bottom: var(--space-3, 12px);
  flex-wrap: wrap;
}

.leaderboard-label {
  font-weight: 600;
  color: var(--text-1, inherit);
}

.leaderboard-select {
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border-1, #ccc);
  background: var(--bg-2, #fff);
  color: var(--text-1, inherit);
}

.leaderboard-status {
  min-height: 28px;
  color: var(--text-2, #666);
  margin-bottom: var(--space-2, 8px);
  font-size: 14px;
}

.leaderboard-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.leaderboard-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.leaderboard-table thead th {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 2px solid var(--border-1, #ccc);
  color: var(--text-2, #666);
  font-weight: 600;
  white-space: nowrap;
}

.leaderboard-table tbody td {
  padding: 10px;
  border-bottom: 1px solid var(--border-1-soft, #eee);
}

.leaderboard-table tbody tr:hover {
  background: var(--bg-soft, rgba(0, 0, 0, 0.03));
}

.leaderboard-table .col-rank {
  font-variant-numeric: tabular-nums;
  width: 48px;
  color: var(--text-2, #666);
}

.leaderboard-table .col-games,
.leaderboard-table .col-wins {
  font-variant-numeric: tabular-nums;
  width: 64px;
  text-align: right;
}

.leaderboard-table .col-win-rate {
  font-variant-numeric: tabular-nums;
  width: 96px;
  text-align: right;
  font-weight: 600;
}

.leaderboard-player-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.leaderboard-player-cell img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

.leaderboard-player-cell .leaderboard-emoji-fallback {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.leaderboard-name {
  word-break: break-word;
  line-height: 1.3;
}

.leaderboard-empty {
  margin-top: var(--space-3, 12px);
  color: var(--text-2, #666);
  font-style: italic;
}

.leaderboard-error {
  color: var(--danger, #c00);
}

.is-loading .leaderboard-table {
  opacity: 0.5;
  pointer-events: none;
}

@media (max-width: 480px) {
  .leaderboard-table {
    font-size: 13px;
  }
  .leaderboard-table thead th,
  .leaderboard-table tbody td {
    padding: 6px 8px;
  }
  .leaderboard-table .col-win-rate {
    width: 80px;
  }
}

/* === ADR-0012 Task 7:scope tabs === */
.leaderboard-scope-tabs {
  display: flex;
  gap: var(--space-2, 8px);
  margin-bottom: var(--space-3, 12px);
  border-bottom: 1px solid var(--border-1, #e0e0e0);
  padding-bottom: 4px;
}

.scope-tab {
  padding: 6px 14px;
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  border-radius: 6px 6px 0 0;
  background: transparent;
  color: var(--text-2, #666);
  cursor: pointer;
  font: inherit;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.scope-tab:hover:not(.is-active) {
  background: var(--bg-2, #f5f5f5);
  color: var(--text-1, inherit);
}

.scope-tab.is-active {
  color: var(--text-1, inherit);
  border-bottom-color: var(--accent, #3b82f6);
  font-weight: 600;
}

.leaderboard-row {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
}