/* Relations: circle budget badge on the board. */

/* Circle budget: a small badge in the board's top-right corner, where the player draws. */
.budget {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  pointer-events: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--muted);
  font-size: var(--text-small);
}

.budget b {
  color: var(--ink);
  font-size: var(--text-body);
}

.budget-slots {
  display: inline-flex;
  gap: var(--space-1);
}

.budget-slots i {
  width: 16px;
  height: 16px;
  border: 1.5px dashed var(--line-strong);
  border-radius: 50%;
}

.budget-slots i.filled {
  border: 1.5px solid currentColor;
}

.budget.pulse {
  animation: shake 0.34s ease;
}

.budget.pulse b {
  color: var(--danger-text);
}

/* On the board the slots speak for themselves; the label stays for screen readers. */
.budget-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}