/* web/css/ladder.css - European Competitive Ladder Rankings styling */
/* Strictly <= 200 lines, <= 100 chars per line. */

.ladder-hero-card {
  padding: 1.25rem 1rem; margin-bottom: 0.85rem;
}

.ladder-header-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 0.75rem;
}

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

.ladder-countdown-tag {
  font-size: 0.73rem; font-weight: 700; color: var(--hanko-red);
  background: var(--hanko-dim); padding: 0.2rem 0.55rem; border-radius: 4px;
}

.ladder-stats-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem;
  padding-top: 0.65rem; border-top: 1px dashed var(--brush-border);
}

.ladder-stat-item {
  display: flex; flex-direction: column; align-items: center; text-align: center;
}

.stat-num {
  font-size: 1.1rem; font-weight: 900; color: var(--sumi-ink);
}

.stat-lbl {
  font-size: 0.68rem; font-weight: 600; color: var(--sumi-faded);
  text-transform: uppercase;
}

.ladder-controls-card {
  padding: 0.75rem; margin-bottom: 0.85rem;
}

.ladder-tier-filters {
  display: flex; gap: 5px; overflow-x: auto; padding-bottom: 4px;
  margin-bottom: 0.55rem;
}

.tier-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;
}

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

.ladder-search-box {
  width: 100%; font-size: 0.82rem; padding: 0.45rem 0.75rem;
}

.ladder-board-card {
  padding: 0.5rem 0.75rem;
}

.ladder-table-header {
  display: flex; align-items: center; font-size: 0.68rem; font-weight: 800;
  color: var(--sumi-faded); padding: 0.4rem 0.2rem;
  border-bottom: 1px solid var(--brush-border); text-transform: uppercase;
}

.col-hdr-rank { width: 34px; }
.col-hdr-user { flex: 1; }
.col-hdr-tier { width: 90px; text-align: right; }
.col-hdr-rec  { width: 70px; text-align: right; }

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

.ladder-row {
  display: flex; align-items: center; padding: 0.55rem 0.2rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05); font-size: 0.8rem;
}

.ladder-row.top-rank {
  background: rgba(201, 168, 92, 0.06);
}

.ladder-rank-col {
  width: 34px; font-weight: 900; font-size: 0.95rem;
}

.ladder-user-col {
  flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0;
}

.ladder-fighter-thumb {
  width: 30px; height: 30px; border-radius: 4px; object-fit: contain;
  background: rgba(0, 0, 0, 0.03); border: 1px solid var(--brush-border);
}

.ladder-user-info {
  display: flex; flex-direction: column; min-width: 0;
}

.ladder-player-name {
  font-weight: 800; color: var(--sumi-ink); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

.ladder-char-name {
  font-size: 0.67rem; color: var(--sumi-faded);
}

.ladder-tier-col {
  width: 90px; text-align: right; display: flex; flex-direction: column;
  align-items: flex-end;
}

.tier-badge {
  font-size: 0.65rem; font-weight: 800; padding: 1px 5px; border-radius: 3px;
  background: rgba(0, 0, 0, 0.06);
}

.tier-badge.hills { background: #ffebee; color: #c62828; }
.tier-badge.plains { background: #e8f5e9; color: #2e7d32; }
.tier-badge.valley { background: #e3f2fd; color: #1565c0; }
.tier-badge.unranked { background: #f5f5f5; color: #757575; }

.rating-pts {
  font-size: 0.72rem; font-weight: 700; color: var(--sumi-ink); margin-top: 1px;
}

.ladder-record-col {
  width: 70px; text-align: right; display: flex; flex-direction: column;
  align-items: flex-end;
}

.record-wl { font-weight: 700; font-size: 0.78rem; }
.record-rate { font-size: 0.65rem; color: var(--sumi-faded); }