/* Badges, chips, and the "score readout" element.
   These are the small status pieces that decorate the felt panels. */

.cf-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--cf-space-1);
  padding: 2px 10px;
  border-radius: var(--cf-radius-pill);
  font: var(--cf-fw-bold) var(--cf-fs-12) / 1.5 var(--cf-font-sans);
  letter-spacing: var(--cf-tracking-wide);
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--cf-fg-on-felt);
  background: rgba(255, 255, 255, 0.06);
}

.cf-badge--gold {
  background: linear-gradient(180deg, var(--cf-gold-300), var(--cf-gold-500));
  color: var(--cf-felt-900);
  border-color: var(--cf-gold-700);
  box-shadow: var(--cf-shadow-gold);
}

.cf-badge--crimson {
  background: var(--cf-crimson-500);
  color: var(--cf-primary-fg);
  border-color: var(--cf-crimson-700);
}

.cf-badge--info {
  background: rgba(44, 107, 214, 0.18);
  border-color: var(--cf-chip-blue);
  color: var(--cf-chip-blue-fg);
}

/* Score readout — the big number on the felt */
.cf-readout {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--cf-space-1);
}
.cf-readout__label {
  font: var(--cf-caption);
  text-transform: uppercase;
  letter-spacing: var(--cf-tracking-cap);
  color: var(--cf-fg-on-felt-muted);
}
.cf-readout__value {
  font: var(--cf-numeric-readout);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--cf-tracking-tight);
  color: var(--cf-fg-on-felt);
}
.cf-readout--gold .cf-readout__value {
  color: var(--cf-gold-300);
  text-shadow: 0 0 18px rgba(241, 207, 107, 0.3);
}

/* Roll counter pill — "Roll 2/3" pattern */
.cf-rollcount {
  display: inline-flex;
  align-items: center;
  gap: var(--cf-space-2);
  padding: 4px 12px;
  border-radius: var(--cf-radius-pill);
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font: var(--cf-fw-bold) var(--cf-fs-13) / 1 var(--cf-font-numeric);
  font-variant-numeric: tabular-nums;
  color: var(--cf-fg-on-felt);
}
.cf-rollcount__pip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}
.cf-rollcount__pip.is-on { background: var(--cf-gold-500); }