.chip {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
  user-select: none;
  flex-shrink: 0;
  background-clip: padding-box;
  box-shadow:
    inset 0 0 0 3px rgba(255, 255, 255, 0.85),
    inset 0 0 0 4px currentColor,
    0 2px 4px rgba(0, 0, 0, 0.5);
}

.chip[data-denom="1"]   { background: #ffffff; color: #1a1a1a; }
.chip[data-denom="5"]   { background: #d4463a; color: #d4463a; color: #fff; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px #d4463a, 0 2px 4px rgba(0,0,0,0.5); }
.chip[data-denom="10"]  { background: #2b6fb8; color: #fff; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px #2b6fb8, 0 2px 4px rgba(0,0,0,0.5); }
.chip[data-denom="25"]  { background: #2e7d4f; color: #fff; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px #2e7d4f, 0 2px 4px rgba(0,0,0,0.5); }
.chip[data-denom="100"] { background: #1a1a1a; color: #d4a84a; box-shadow: inset 0 0 0 3px #d4a84a, inset 0 0 0 4px #1a1a1a, 0 2px 4px rgba(0,0,0,0.5); }
.chip[data-denom="1"]   { box-shadow: inset 0 0 0 3px #1a1a1a, inset 0 0 0 4px #fff, 0 2px 4px rgba(0,0,0,0.5); }

.chip-rack .chip {
  cursor: pointer;
  transition: transform 140ms ease;
}
.chip-rack .chip:hover {
  transform: translateY(-2px);
}
.chip-rack .chip.selected {
  transform: translateY(-8px);
}

/* Chips stack vertically inside the bet spot — casino-style, the base chip
   sits centred in the circle and each additional chip shows a 3px sliver
   of its edge above the previous one. */
.bet-spot .chip-stack {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
  width: 0;
  height: 0;
}
.bet-spot .chip-stack .chip {
  width: 28px;
  height: 28px;
  font-size: 9px;
  position: absolute;
  left: -14px;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.85),
    inset 0 0 0 3px currentColor,
    0 2px 3px rgba(0, 0, 0, 0.5);
}
.bet-spot .chip-stack .chip:nth-child(1) { bottom: -14px; }
.bet-spot .chip-stack .chip:nth-child(2) { bottom: -11px; }
.bet-spot .chip-stack .chip:nth-child(3) { bottom: -8px; }
.bet-spot .chip-stack .chip:nth-child(4) { bottom: -5px; }
.bet-spot .chip-stack .chip:nth-child(5) { bottom: -2px; }
.bet-spot .chip-stack .chip:nth-child(n+6) { bottom: 1px; }

/* Diamond TRIPS: un-rotate chip-stack so chips stay upright in the spot */
.bet-spot-diamond .chip-stack {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.chip-fly {
  position: absolute;
  z-index: 30;
  transition: transform 320ms ease-in-out, opacity 320ms ease-in-out;
  pointer-events: none;
}