/* The standings can run to every player in the league, so the table scrolls
   inside the card rather than stretching the page. The header row stays put
   while the body moves. */
.table-scroll {
  max-height: 30rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.ranking-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.ranking-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-surface-alt);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  border-bottom: 1px solid var(--color-border-strong);
}

.ranking-table th,
.ranking-table td {
  text-align: left;
  padding: 0.6875rem var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.ranking-table tbody tr:last-child th,
.ranking-table tbody tr:last-child td {
  border-bottom: none;
}

/* Player names link to their profile, but read as table text until hovered. */
.ranking-table td a {
  color: var(--color-text);
  text-decoration: none;
}

.ranking-table td a:hover {
  text-decoration: underline;
}

.ranking-table tbody tr {
  transition: background var(--transition);
}

.ranking-table tbody tr:hover {
  background: var(--color-surface-alt);
}

/* Rank: a quiet number, except on the podium. */
.ranking-table tbody th[data-label='#'] {
  width: 3.5rem;
  color: var(--color-muted);
  font-weight: 600;
}

.ranking-table tbody tr:nth-child(-n + 3) th[data-label='#'] {
  color: var(--color-text);
}

.ranking-table td[data-label='Player'] {
  width: 99%;
  font-weight: 550;
  white-space: normal;
}

.ranking-table td[data-label='Points'] {
  font-weight: 650;
}

.ranking-table td[data-label='W'],
.ranking-table td[data-label='L'],
.ranking-table td[data-label='Played'] {
  color: var(--color-text-soft);
}

.ranking-table caption {
  caption-side: bottom;
  text-align: left;
  padding-top: var(--spacing-sm);
  color: var(--color-muted);
  font-size: var(--font-size-xs);
  line-height: 1.5;
}

/* Below the breakpoint a six-column table is unreadable, so each row becomes a
   card. The markup stays a real <table> — only the presentation changes — and
   each cell grows a label read back from the data-label the component sets. */
@media (max-width: 768px) {
  .table-scroll {
    max-height: 26rem;
  }

  .ranking-table thead {
    /* Visually gone, but the column headers are still announced via scope. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .ranking-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--spacing-xs) var(--spacing-md);
    padding: 0.875rem var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
  }

  .ranking-table th,
  .ranking-table td {
    border: none;
    padding: 0;
    width: auto;
  }

  .ranking-table tbody th[data-label='#'] {
    width: 1.5rem;
  }

  .ranking-table td[data-label='Player'] {
    flex: 1;
    width: auto;
  }

  .ranking-table td[data-label='Points'] {
    flex-basis: 100%;
    font-size: var(--font-size-lg);
  }

  .ranking-table td[data-label='W'],
  .ranking-table td[data-label='L'],
  .ranking-table td[data-label='Played'] {
    font-size: var(--font-size-sm);
  }

  .ranking-table td[data-label='Points']::before,
  .ranking-table td[data-label='W']::before,
  .ranking-table td[data-label='L']::before,
  .ranking-table td[data-label='Played']::before {
    content: attr(data-label) ' ';
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-muted);
  }
}