/* Poker Chip Styling - 3D realistic chips with edge spots */

/* Base chip styling - modern 3D appearance */
.chip {
  position: relative;
  width: var(--chip-size, 40px);
  height: var(--chip-size, 40px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  /* 3D effect with multiple shadows */
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.4),             /* Bottom shadow */
    inset 0 2px 6px rgba(255, 255, 255, 0.4), /* Top highlight */
    inset 0 -2px 6px rgba(0, 0, 0, 0.3),      /* Bottom internal shadow */
    0 0 0 3px var(--chip-border-color);       /* Border ring */

  /* Smooth transitions for animations */
  transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);

  /* Performance optimization */
  will-change: transform;
}

/* Size variants */
.chip--small {
  --chip-size: var(--poker-chip-size, 25px);
}

.chip--medium {
  --chip-size: 40px;
}

.chip--large {
  --chip-size: 60px;
}

/* Denomination-specific colors with edge spots */
.chip--white {
  --chip-color: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 50%, #d4d4d4 100%);
  --chip-border-color: #9ca3af;
  --edge-spot-color: #3b82f6; /* Blue edge spots */
  background: var(--chip-color);
}

.chip--red {
  --chip-color: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%);
  --chip-border-color: #7f1d1d;
  --edge-spot-color: #ffffff;
  background: var(--chip-color);
}

.chip--green {
  --chip-color: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
  --chip-border-color: #064e3b;
  --edge-spot-color: #ffffff;
  background: var(--chip-color);
}

.chip--black {
  --chip-color: linear-gradient(135deg, #374151 0%, #1f2937 50%, #111827 100%);
  --chip-border-color: #030712;
  --edge-spot-color: #ffffff;
  background: var(--chip-color);
}

.chip--purple {
  --chip-color: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 50%, #6d28d9 100%);
  --chip-border-color: #4c1d95;
  --edge-spot-color: #ffffff;
  background: var(--chip-color);
}

.chip--yellow {
  --chip-color: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
  --chip-border-color: #92400e;
  --edge-spot-color: #000000;
  background: var(--chip-color);
}

.chip--orange {
  --chip-color: linear-gradient(135deg, #fb923c 0%, #f97316 50%, #ea580c 100%);
  --chip-border-color: #7c2d12;
  --edge-spot-color: #000000;
  background: var(--chip-color);
}

/* Edge spots - positioned around the rim */
.chip__edge-spots {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.chip__edge-spot {
  position: absolute;
  width: 8%;
  height: 20%;
  background: var(--edge-spot-color);
  border-radius: 2px;
  top: 50%;
  left: 50%;
  transform-origin: center;
  opacity: 0.9;
}

/* Distribute 8 edge spots around the rim */
.chip__edge-spot:nth-child(1) {
  transform: translate(-50%, -50%) rotate(0deg) translateY(calc(var(--chip-size, 40px) * -0.45));
}

.chip__edge-spot:nth-child(2) {
  transform: translate(-50%, -50%) rotate(45deg) translateY(calc(var(--chip-size, 40px) * -0.45));
}

.chip__edge-spot:nth-child(3) {
  transform: translate(-50%, -50%) rotate(90deg) translateY(calc(var(--chip-size, 40px) * -0.45));
}

.chip__edge-spot:nth-child(4) {
  transform: translate(-50%, -50%) rotate(135deg) translateY(calc(var(--chip-size, 40px) * -0.45));
}

.chip__edge-spot:nth-child(5) {
  transform: translate(-50%, -50%) rotate(180deg) translateY(calc(var(--chip-size, 40px) * -0.45));
}

.chip__edge-spot:nth-child(6) {
  transform: translate(-50%, -50%) rotate(225deg) translateY(calc(var(--chip-size, 40px) * -0.45));
}

.chip__edge-spot:nth-child(7) {
  transform: translate(-50%, -50%) rotate(270deg) translateY(calc(var(--chip-size, 40px) * -0.45));
}

.chip__edge-spot:nth-child(8) {
  transform: translate(-50%, -50%) rotate(315deg) translateY(calc(var(--chip-size, 40px) * -0.45));
}

/* Inner ring for texture */
.chip__inner-ring {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  pointer-events: none;
}

/* Center circle for denomination value */
.chip__center {
  position: absolute;
  inset: 25%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* Denomination text - hidden for cleaner appearance */
.chip__value {
  display: none; /* Value removed - see chip legend for color-to-value mapping */
}

/* Highlight for 3D depth */
.chip__highlight {
  position: absolute;
  top: 15%;
  left: 20%;
  width: 40%;
  height: 40%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.4), transparent);
  border-radius: 50%;
  pointer-events: none;
}

/* Stack layouts */
.chip-stack {
  display: flex;
  align-items: center;
}

.chip-stack--vertical {
  flex-direction: column-reverse;
  gap: 0;
}

.chip-stack--vertical .chip {
  margin-top: calc(var(--chip-size, 40px) * -0.2);
}

.chip-stack--vertical .chip:first-child {
  margin-top: 0;
}

.chip-stack--horizontal {
  flex-direction: row;
  gap: 0;
}

.chip-stack--horizontal .chip {
  margin-left: calc(var(--chip-size, 40px) * -0.3);
}

.chip-stack--horizontal .chip:first-child {
  margin-left: 0;
}

/* Hover effects */
.chip:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.5),
    inset 0 2px 6px rgba(255, 255, 255, 0.5),
    inset 0 -2px 6px rgba(0, 0, 0, 0.3),
    0 0 0 3px var(--chip-border-color);
}

/* Zone-specific styling */
.player-chip-stack,
.player-bet-area {
  position: absolute;
  display: flex;
  z-index: 100;
}

.player-bet-area {
  z-index: 200;
}

.table-pot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.pot-value {
  position: relative;
  color: white;
  font-size: 0.875rem;
  font-weight: bold;
  z-index: 10;
}

/* Chip Legend Styling */
.chip-legend {
  background: rgba(0, 0, 0, 0.7);
  border-radius: 8px;
  padding: 12px;
  color: white;
  max-width: 200px;
}

.chip-legend__title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
  text-align: center;
  color: #fbbf24;
}

.chip-legend__items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chip-legend__item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chip-legend__value {
  font-size: 12px;
  font-weight: 500;
  color: #e5e7eb;
}

/* Chip Legend Container - Responsive positioning */
.chip-legend-container {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 50;
}

@media (max-height: 600px) and (orientation: landscape) {
  .chip-legend-container {
    display: none;
  }
}