.container {
  align-items: center;
  gap: 8px;
}

.cardContainer {
  position: relative;
  display: flex;
  border-radius: 999px;
  min-width: 60px;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  background: linear-gradient(135deg, rgba(var(--bg-rgb), 0.26) 0%, rgba(var(--bg-rgb), 0.18) 100%);
  border: 1px solid rgba(var(--bg-rgb), 0.35);
  box-shadow: 0 4px 12px rgba(var(--bg-rgb), 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Color variants */
.red {
  --bg-rgb: 239, 68, 68;
}

.orange {
  --bg-rgb: 249, 115, 22;
}

.yellow {
  --bg-rgb: 234, 179, 8;
}

.green {
  --bg-rgb: 34, 197, 94;
}

.teal {
  --bg-rgb: 20, 184, 166;
}

.cyan {
  --bg-rgb: 6, 182, 212;
}

.blue {
  --bg-rgb: 59, 130, 246;
}

.purple {
  --bg-rgb: 147, 51, 234;
}

.numberCircle {
  background: rgb(255, 255, 255);
  width: 26px;
  height: 26px;
  display: flex;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

.exhaustedNumberCircle {
  opacity: 0.5;
}

.numberText {
  font-size: 15px;
  font-weight: 700;
}

.exhaustedX {
  position: absolute;
  right: -12px;
  bottom: -14px;
}

.cardText {
  color: var(--mantine-color-white);
  font-size: 14px;
  font-weight: 600;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Inner wrapper to keep Chip padding and glow from colliding with content */
.inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}
