/* CSS styles for chips with images */
.chips-container {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding: 10px;
}

.chip-container {
  display: flex;
  justify-content: center;
}

/* .total-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 18px;
  font-weight: bold;
} */

.chip {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: white;
  font-size: small;
  cursor: grab;
  background-repeat: no-repeat;
  background-size: contain;
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for size and shadow */
  margin: 5px;
}
.chip.selected {
  transform: scale(1.2); /* Enlarge the chip by 20% */
  box-shadow: 0 0 10px 3px rgba(255, 255, 0, 0.75); /* Yellow glow for visibility */
}
.chip:active {
  opacity: 0.7; /* Reduce opacity when pressed */
}
.chip.small-placed {
  width: 30px;
  height: 30px;
  font-size: 10px; /* Smaller text inside the smaller chip */
  margin: 0px;
  transform: scale(0.75);
}

/* Define background images for different chip values */
.chip[data-value="1"] {
  background-image: url("/games/roulette/images/Chips/1_Chip.png");
}

.chip[data-value="5"] {
  background-image: url("/games/roulette/images/Chips/5_Chip.png");
}

.chip[data-value="10"] {
  background-image: url("/games/roulette/images/Chips/10_Chip.png");
}

.chip[data-value="50"] {
  background-image: url("/games/roulette/images/Chips/50_Chip.png");
}

.chip[data-value="100"] {
  background-image: url("/games/roulette/images/Chips/100_Chip.png");
}

.chip[data-value="500"] {
  background-image: url("/games/roulette/images/Chips/500_Chip.png");
}