@media (max-width: 720px) {
  tbody tr {
    grid-template-columns: 48px minmax(120px, 1fr) 90px 40px 40px;
  }

  .rank-position {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  tbody th {
    grid-column: 2;
    grid-row: 1;
  }

  .points {
    grid-column: 3;
    grid-row: 1;
  }

  .symbol:nth-of-type(4) {
    grid-column: 4;
    grid-row: 1;
  }

  .symbol:nth-of-type(5) {
    grid-column: 5;
    grid-row: 1;
  }

  tbody tr > td:nth-of-type(3) {
    grid-column: 2 / 6;
    grid-row: 2;
  }
}

@media (max-width: 470px) {
  tbody tr {
    grid-template-columns: 42px minmax(100px, 1fr) 72px 32px 32px;
  }
}

.leaderboard .table-wrap,
.leaderboard .ranking-note {
  transition: opacity 160ms ease, transform 160ms ease;
}

.leaderboard.loading .table-wrap,
.leaderboard.loading .ranking-note {
  opacity: .38;
  transform: translateY(3px);
  pointer-events: none;
}

.leaderboard.loading .live-indicator {
  animation: ranking-pulse 700ms ease-in-out infinite alternate;
}

@keyframes ranking-pulse {
  to { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
  .leaderboard .table-wrap,
  .leaderboard .ranking-note,
  .leaderboard.loading .live-indicator {
    transition: none;
    animation: none;
  }
}

.guild-name {
  font-family: "Segoe UI Symbol", "Noto Sans Symbols", "Arial Unicode MS", "Segoe UI", sans-serif;
}

.guild-name .no-guild {
  color: #6f685f;
  font-family: "Segoe UI", sans-serif;
  font-size: 8px;
  font-style: italic;
  letter-spacing: .04em;
}