/* ============ Chips ============ */
.chip-rack {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
  /* Reserve the chip circle's height even when empty (it's only populated
     during the pre_bet phase) — otherwise it collapses to 0 the instant
     betting ends, shrinking .bet-area and shifting everything above it
     (the seats grid, dealer area) up the screen. */
  min-height: 52px;
}

.chip {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: #fff;
  border: 3px dashed rgba(255,255,255,0.7);
  box-shadow: 0 3px 8px rgba(0,0,0,0.4), inset 0 0 0 4px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: transform 0.1s;
  user-select: none;
}
.chip:active { transform: scale(0.92); }
.chip[data-denom="1"]   { background: #e0e0e0; color: #333; }
.chip[data-denom="5"]   { background: #d32f2f; }
.chip[data-denom="10"]  { background: #1565c0; }
.chip[data-denom="25"]  { background: #2e7d32; }
.chip[data-denom="50"]  { background: #ef6c00; }
.chip[data-denom="100"] { background: #212121; }
.chip[data-denom="500"] { background: #6a1b9a; }

.current-bet {
  text-align: center;
  margin-top: 0.5rem;
  font-size: 1rem;
  color: var(--text);
  /* Can render as an empty string outside the betting phase with no bet —
     reserve its line height so it doesn't collapse and shift .bet-area. */
  min-height: 1.2em;
}
.current-bet strong { color: var(--gold); font-size: 1.2rem; }

.bet-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--accent);
  margin: 0 auto;
}

@media (max-width: 480px) {
  .chip { width: 44px; height: 44px; font-size: 0.75rem; }
  .chip-rack { min-height: 44px; }
}