/* Rounds — drinks round tracker */

@layer components {
  /* ── Next up card ── */

  .round-next-up {
    display: flex;
    align-items: center;
    gap: var(--inline-space);
    padding: var(--block-space) var(--inline-space-l);
    background: color-mix(in oklch, var(--color-accent) 8%, var(--color-surface));
    border: 1px solid color-mix(in oklch, var(--color-accent) 25%, var(--color-border));
    border-radius: var(--radius);
    margin-bottom: var(--block-space);
  }

  .round-next-up__details {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }

  .round-next-up__label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-accent);
  }

  .round-next-up__name {
    font-weight: 600;
    font-size: 1.125rem;
  }

  .round-next-up__count {
    font-size: 0.8125rem;
    color: var(--color-ink-muted);
  }

  /* ── Actions ── */

  .round-actions {
    margin-bottom: var(--block-space);
    text-align: center;
  }

  /* ── Scoreboard ── */

  .round-scoreboard {
    display: flex;
    flex-direction: column;
  }

  .round-scoreboard__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem var(--inline-space-l);
    border-top: 1px solid var(--color-border);
  }

  .round-scoreboard__member {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .round-scoreboard__count {
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--color-accent);
  }

  /* ── Round list ── */

  .round-list {
    display: flex;
    flex-direction: column;
  }

  .round-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--inline-space);
    padding: 0.625rem var(--inline-space-l);
    border-top: 1px solid var(--color-border);
  }

  .round-item__info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .round-item__details {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }

  .round-item__name {
    font-weight: 500;
  }

  .round-item__time {
    font-size: 0.75rem;
    color: var(--color-ink-muted);
  }
}