/* Solo queue and flex on a member's page. A different claim from everything
   else there, so it reads as its own block rather than another ELO table. */
.riot-standings {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.riot-standing {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  align-items: flex-start;
  padding: var(--space-smd) var(--space-md);
  min-width: 11rem;
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  box-shadow: var(--shadow-xs);
}

.riot-standing__queue {
  color: var(--text-tertiary);
}

.riot-standing__lp,
.riot-standing__record {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.riot-games {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.riot-game {
  display: grid;
  grid-template-columns: 4rem 3.5rem minmax(0, 1fr) 6rem 5.5rem 5rem 4rem;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
}

/* A hairline on the leading edge rather than a tinted row: twenty tinted rows
   is a wall of colour, and the badge already says which it was. */
.riot-game--win { border-left: 3px solid var(--mint-300); }
.riot-game--loss { border-left: 3px solid var(--coral-100); }

.riot-game__date,
.riot-game__kda,
.riot-game__duration {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.riot-game__queue {
  color: var(--text-tertiary);
}

.riot-game__champion {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.riot-game__position {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

@media (max-width: 760px) {
  .riot-game {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: var(--space-2xs);
  }

  .riot-game__date,
  .riot-game__queue,
  .riot-game__position,
  .riot-game__duration {
    grid-column: 1;
  }

  .riot-game__kda,
  .riot-game__result {
    grid-column: 2;
    justify-self: end;
  }
}

/* A champion pool as frequency. Bar length is games played; the split inside
   it is the record, so a long bar and a short one are never the same claim. */
.champ-freq {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.champ-freq__item {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr) 3rem;
  align-items: center;
  gap: var(--space-sm);
}

.champ-freq__champ {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}

.champ-freq__name {
  font-size: var(--text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.champ-freq__bar {
  display: flex;
  height: 8px;
  border-radius: var(--radius-xs);
  overflow: hidden;
  background: var(--surface-sunken);
}

.champ-freq__wins { background: var(--mint-500); }
.champ-freq__losses { background: var(--coral-500); }

.champ-freq__record {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.champ-freq__empty {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.riot-pool {
  margin-bottom: var(--space-md);
}

.league-member__subsection-title {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.player__section-meta,
.league-member__section-meta {
  margin: -4px 0 var(--space-smd);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.riot-recent__more {
  display: inline-block;
  margin-top: var(--space-smd);
  font-size: var(--text-sm);
}

.riot-pager {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.riot-pager__where {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}