.players-panel {
  grid-template-areas:
    "review"
    "actions"
    "seats";
}

.players-panel__toggle {
  grid-area: toggle;
}

.players-panel__review {
  grid-area: review;
}

.players-panel__actions {
  grid-area: actions;
}

.players-panel__seats {
  grid-area: seats;
}

.players-panel__metadata {
  grid-area: meta;
}

.players-toggle {
  text-align: left;
}

.players-toggle::after {
  content: " ▾";
}

.players-toggle[aria-expanded="true"]::after {
  content: " ▴";
}

.players-panel h3,
.users-panel h3,
.user-list h4,
.variant-settings h3 {
  margin-bottom: 0;
}

.user-list h4 {
  color: var(--meta-text);
  font-size: 0.85rem;
}

.actions,
.history-actions {
  margin-block: 0;
}

.actions {
  grid-template-columns: repeat(4, 1fr);
  overflow: visible;
}

.actions button {
  font-size: 0.82rem;
}

.history-actions {
  align-items: center;
  grid-template-columns: repeat(2, 2.5rem) auto repeat(2, 2.5rem);
  justify-content: center;
  text-align: center;
}

.history-actions button {
  font-size: 0.95rem;
  inline-size: 2.5rem;
  padding-inline: 0;
}

.history-actions .history-edge {
  font-size: 0.68rem;
}

.actions[hidden],
.history-actions[hidden] {
  display: none;
}

.game-meta {
  color: var(--meta-text);
  grid-template-columns: 1fr;
  margin-bottom: 1rem;
  text-align: left;
}

.game-meta span {
  display: grid;
  gap: 0.15rem;
}

.game-meta strong {
  color: var(--surface-text);
  font-size: 0.85rem;
}

.variant-meta-list {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.variant-meta-button {
  flex: 0 0 auto;
  min-height: 0;
  padding-block: 0.2rem;
  width: fit-content;
}