/* ==== ON-THE-CLOCK CARD ==== */
.on-the-clock {
  /* Uses .card--accent from components */
}

.on-the-clock__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-4);
}

.on-the-clock__participant {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.on-the-clock__turn-info {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-axes);
  font-size: var(--t-turn);
  font-weight: 700;
  color: var(--c-ink);
}

.on-the-clock__round-info {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--c-ink-muted);
  margin-top: var(--s-1);
}

/* ==== FAMILY BOARD ==== */
.family-board {
  /* Uses .card from components */
}

.family-board__header {
  margin-bottom: var(--s-5);
}

.family-board__title {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-axes);
  font-size: var(--t-card);
  font-weight: 700;
  color: var(--c-ink);
  margin-bottom: var(--s-3);
}

.family-board__roster {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

/* ==== YOUR CONTROLS ==== */
.your-controls {
  /* Uses .card--compact from components */
}

.your-controls__header {
  margin-bottom: var(--s-4);
}

.your-controls__actions {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.your-controls__help-text {
  font-size: var(--t-xs);
  color: var(--c-ink-muted);
  margin-top: var(--s-1);
}

/* ==== BOARD SECTIONS ==== */
.board {
  /* Main board area */
}

.board__section {
  margin-bottom: var(--s-7);
}

.board__section:last-child {
  margin-bottom: 0;
}

/* ==== UTILITIES ==== */
.text-muted {
  color: var(--c-ink-muted);
}

.text-faint {
  color: var(--c-ink-faint);
}

.text-accent {
  color: var(--c-accent);
}

.mt-auto {
  margin-top: auto;
}