/* ── Global Premium Chip System — shared visuals ─────────────────────── */
.cs-chip {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.6));
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.cs-chip-label {
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 2px rgba(0,0,0,0.9);
  pointer-events: none;
  letter-spacing: -0.02em;
  position: relative;
  z-index: 1;
}
/* Masks the baked-in denomination printed on a substitute/reused chip asset
   (e.g. the $10 chip currently reuses the $50 art) so only ONE value is ever
   visible — matches the same dark center-disc color as every chip face so
   the mask itself is invisible, keeping every denomination visually
   identical apart from the label text. */
.cs-chip-value-mask {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 58%;
  height: 24%;
  background: radial-gradient(ellipse at center, #0b0b0d 60%, rgba(11,11,13,0) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Tray selector chip (click-to-select + drag source) */
.cs-chip-tray {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  cursor: grab;
  transition: transform 0.15s cubic-bezier(.34,1.56,.64,1), filter 0.15s;
}
.cs-chip-tray:hover { transform: translateY(-3px) scale(1.08); filter: drop-shadow(0 6px 14px rgba(255,215,110,0.35)) drop-shadow(0 3px 6px rgba(0,0,0,0.6)); }
.cs-chip-tray:active { cursor: grabbing; transform: scale(1.12); }
.cs-chip-tray.selected {
  transform: translateY(-4px) scale(1.14);
  filter: drop-shadow(0 0 0 3px rgba(255,255,255,0.55)) drop-shadow(0 6px 16px rgba(0,0,0,0.6));
}
.cs-chip-tray .cs-chip-label { font-size: 11px; }

/* Chip resting on a table / betting zone — one-shot landing feedback only.
   Plays exactly once at creation time; the chip's final position/scale is
   always translate(-50%,-50%) scale(1) so nothing drifts once settled. */
.cs-chip-onboard {
  animation: csChipLand 0.28s cubic-bezier(.34,1.56,.64,1);
}
@keyframes csChipLand {
  0%   { transform: translate(-50%, -50%) translateY(-10px) scale(0.9); opacity: 0; }
  55%  { transform: translate(-50%, -50%) translateY(-3px) scale(1.08); opacity: 1; }
  80%  { transform: translate(-50%, -50%) translateY(1px)  scale(0.99); }
  100% { transform: translate(-50%, -50%) translateY(0)    scale(1); }
}

/* Magnet / snap-zone highlight while a chip is actively dragged over a
   valid drop target — cleared the instant the pointer leaves the zone. */
.cs-drop-hover {
  outline: 2px dashed rgba(255, 215, 110, 0.85);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(255, 215, 110, 0.18), 0 0 18px rgba(255, 215, 110, 0.45);
  transition: box-shadow 0.12s ease, outline-color 0.12s ease;
}

/* Winning chip — gentle pulsing gold glow */
.cs-chip-win {
  animation: csChipWinPulse 1.1s ease-in-out infinite;
}
@keyframes csChipWinPulse {
  0%, 100% { filter: drop-shadow(0 3px 6px rgba(0,0,0,0.6)) drop-shadow(0 0 4px rgba(255,215,110,0.3)); transform: translate(-50%, -50%) scale(1); }
  50%      { filter: drop-shadow(0 3px 8px rgba(0,0,0,0.6)) drop-shadow(0 0 16px rgba(255,215,110,0.85)); transform: translate(-50%, -50%) scale(1.1); }
}

/* Floating drag ghost that follows the cursor */
.cs-chip-ghost {
  position: fixed;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%) scale(1.1);
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.7)) drop-shadow(0 0 10px rgba(255,215,110,0.35));
}
body.cs-dragging { cursor: grabbing; }
body.cs-dragging .cs-chip-tray { cursor: grabbing; }