/* web/css/records.css - Match Records & Verified Sets styling */
/* Strictly <= 200 lines, <= 100 chars per line. */

.records-header-card {
  padding: 1.25rem 1rem; margin-bottom: 0.85rem;
}

.records-title {
  font-size: 1.15rem; font-weight: 900; margin-top: 0.2rem;
  letter-spacing: -0.3px;
}

.records-filter-bar {
  display: flex; gap: 5px; overflow-x: auto; padding-bottom: 4px;
  margin-top: 0.65rem;
}

.filter-pill {
  padding: 0.25rem 0.65rem; font-size: 0.72rem; font-weight: 800;
  border: 1px solid var(--brush-border); background: #fdfbf7;
  border-radius: 6px; cursor: pointer; white-space: nowrap;
}

.filter-pill.active {
  background: var(--sumi-ink); color: #fff; border-color: var(--sumi-ink);
}

.records-list {
  display: flex; flex-direction: column;
}

.record-set-card {
  padding: 0.85rem 1rem; margin-bottom: 0.75rem;
}

.record-card-top {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.7rem; font-weight: 700; color: var(--sumi-faded);
  margin-bottom: 0.55rem; padding-bottom: 0.35rem;
  border-bottom: 1px dashed var(--brush-border);
}

.record-fmt-badge {
  background: rgba(0, 0, 0, 0.06); padding: 1px 6px; border-radius: 3px;
  font-weight: 800; color: var(--sumi-ink);
}

.record-matchup-row {
  display: flex; align-items: center; justify-content: space-between;
}

.record-player {
  flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0;
}

.record-player.opp { justify-content: flex-end; }

.record-player-avatar {
  width: 32px; height: 32px; border-radius: 4px; object-fit: contain;
  background: rgba(0, 0, 0, 0.03); border: 1px solid var(--brush-border);
}

.record-player-meta {
  display: flex; flex-direction: column; min-width: 0;
}

.record-name {
  font-size: 0.85rem; font-weight: 800; color: var(--sumi-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.record-tier { font-size: 0.67rem; color: var(--sumi-faded); }

.record-outcome-pill {
  font-size: 0.62rem; font-weight: 800; padding: 1px 5px; border-radius: 3px;
  display: inline-block; width: fit-content; margin-top: 2px;
}

.record-outcome-pill.win { background: #e8f5e9; color: #2e7d32; }
.record-outcome-pill.lose { background: #ffebee; color: #c62828; }

.record-score-box {
  display: flex; align-items: center; gap: 4px; margin: 0 0.6rem;
  font-size: 1.15rem; font-weight: 900;
}

.score-digit.win-score { color: var(--hanko-red); }
.score-dash { color: var(--sumi-faded); }

.record-winner-callout {
  margin-top: 0.55rem; padding: 0.35rem 0.5rem; background: #faf8f2;
  border: 1px solid var(--brush-border); border-radius: 6px;
  font-size: 0.74rem; font-weight: 700; color: var(--sumi-ink); text-align: center;
}

.record-games-breakdown {
  display: flex; flex-direction: column; gap: 4px; margin-top: 0.5rem;
}

.record-game-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.3rem 0.5rem; background: #fff; border-radius: 4px;
  font-size: 0.72rem; border: 1px solid rgba(0, 0, 0, 0.04);
}

.record-game-badge {
  font-weight: 800; color: var(--sumi-faded); font-size: 0.68rem;
}

.record-game-stage {
  font-weight: 600; color: var(--sumi-ink);
}

.record-game-chars {
  display: flex; align-items: center; gap: 4px;
}

.record-mini-char {
  width: 18px; height: 18px; object-fit: contain;
}

.vs-label { font-size: 0.62rem; color: var(--sumi-faded); }