:root {
  /* Slate */
  /* Standard card background */
  --slate-card: rgba(30, 41, 59, 0.7);
  /* Nav bar, topbar */
  --slate-chrome: rgba(15, 23, 42, 1);
  /* Secondary labels, metadata */
  --slate-label: rgba(148, 163, 184, 1);
  /* Modal surface */
  --slate-modal: rgba(15, 23, 42, 0.92);
  /* Eliminated / inactive */
  --slate-muted: rgba(107, 114, 128, 1);
  /* Modal overlay scrim */
  --slate-scrim: rgba(0, 0, 0, 0.6);
  /* Modal overlay scrim — RGB triplet for gradients/shadows needing variable alpha (see --slate-scrim for the fixed-opacity version) */
  --slate-scrim-rgb: 0, 0, 0;

  /* Pink */
  /* Buttons, active nav, brand, final scores */
  --pink-accent: rgba(244, 114, 182, 1);
  /* Glow effects */
  --pink-glow: rgba(244, 114, 182, 0.4);

  /* Yellow */
  /* Active/in-progress scores */
  --yellow-score: rgba(251, 191, 36, 1);
  /* Cap one-remaining subtle badge background */
  --yellow-score-subtle: rgba(251, 191, 36, 0.2);
  /* Limited / warning / cap limited */
  --yellow-warning: rgba(234, 179, 8, 1);

  /* Green */
  /* Cap available badge */
  --green-cap: rgba(34, 197, 94, 1);
  /* Cap available subtle badge background */
  --green-cap-subtle: rgba(34, 197, 94, 0.2);
  /* Present / available status text */
  --green-present: rgba(74, 222, 128, 1);

  /* Red */
  /* Absent / danger */
  --red-absent: rgba(248, 113, 113, 1);
  --color-red-warning: rgba(248, 113, 113, 1);
  /* Cap full badge */
  --red-cap: rgba(239, 68, 68, 1);
  /* Cap full subtle badge background */
  --red-cap-subtle: rgba(239, 68, 68, 0.2);

  /* White */
  /* All borders */
  --white-border: rgba(255, 255, 255, 0.1);
  /* Primary text */
  --white-text: rgba(248, 250, 252, 1);

  /* Purple */
  /* Page background gradient */
  --indigo-background: rgba(30, 27, 75, 1);

  /* Wheel */
  /* Wheel palette slot 5 — blue */
  --wheel-blue: rgba(56, 189, 248, 1);
  --wheel-blue-subtle: rgba(56, 189, 248, 0.2);
  /* Wheel palette slot 4 — green */
  --wheel-green: rgba(74, 222, 128, 1);
  /* Wheel palette slot 2 — orange */
  --wheel-orange: rgba(251, 146, 60, 1);
  /* Wheel palette slot 6 — purple */
  --wheel-purple: rgba(167, 139, 250, 1);
  --wheel-purple-subtle: rgba(167, 139, 250, 0.2);
  /* Wheel palette slot 1 — red */
  --wheel-red: rgba(248, 113, 113, 1);
  /* Wheel palette slot 3 — yellow */
  --wheel-yellow: rgba(250, 204, 21, 1);
}

/* Cap pill states */
.pill-available {
  background-color: var(--green-cap-subtle);
  color: var(--green-cap);
}

.pill-one-remaining {
  background-color: var(--yellow-score-subtle);
  color: var(--yellow-score);
}

.pill-full {
  background-color: var(--red-cap-subtle);
  color: var(--red-cap);
}

.pill-base {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
}

.pill-bonus {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  background-color: var(--slate-card);
  color: var(--white-text);
}

.cue-fill {
  position: absolute;
  inset: 0;
  transform-origin: center;
  transform: scaleX(0);
  transition: none;
  background-color: var(--pink-accent);
  z-index: 0;
}