/* =====================================================================
   ranking.css — Trang bảng xếp hạng (ranking.html)
   ===================================================================== */

.ranking-header {
  margin-bottom: var(--space-lg);
}

.ranking-header h1 {
  font-size: clamp(1.5rem, 4vw, 1.875rem);
  margin: 0.25rem 0 var(--space-sm) 0;
}

.ranking-back-link {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-decoration: none;
}

.ranking-back-link:hover {
  color: var(--color-primary);
}

/* Tiêu đề cột — ẩn trên mobile để không rối, thay bằng layout dọc */
.ranking-list-headings {
  display: grid;
  grid-template-columns: 3rem 1fr 5rem 4rem 4.5rem;
  gap: 0.5rem;
  padding: 0 var(--space-md);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}

.ranking-row {
  display: grid;
  grid-template-columns: 3rem 1fr 5rem 4rem 4.5rem;
  gap: 0.5rem;
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.875rem var(--space-md);
  margin-bottom: 0.5rem;
  font-size: 0.9375rem;
}

.ranking-row.rank-1 {
  border-color: #E8C468;
  background: #FFFBF0;
}
.ranking-row.rank-2 {
  border-color: #C7CDD6;
  background: #FAFBFC;
}
.ranking-row.rank-3 {
  border-color: #E0B396;
  background: #FDF7F3;
}

.ranking-position {
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text-muted);
}

.rank-1 .ranking-position,
.rank-2 .ranking-position,
.rank-3 .ranking-position {
  font-size: 1.25rem;
}

.ranking-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-score {
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.875rem;
}

.ranking-percentage {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.ranking-time {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

/* ---- Responsive: gộp cột trên màn hình nhỏ ---- */
@media (max-width: 560px) {
  .ranking-list-headings {
    display: none;
  }

  .ranking-row {
    grid-template-columns: 2.25rem 1fr auto;
    grid-template-areas:
      "pos name score"
      "pos meta  meta";
    row-gap: 0.25rem;
  }

  .ranking-position { grid-area: pos; }
  .ranking-name { grid-area: name; }
  .ranking-score { grid-area: score; text-align: right; }

  .ranking-percentage,
  .ranking-time {
    grid-area: meta;
    display: inline;
    font-size: 0.8125rem;
  }
  .ranking-percentage::after {
    content: " · ";
    color: var(--color-border);
  }
}