/* ============================================
   TABLE WRAP
   ============================================ */
.table-wrap {
  position: relative;
  width: 100%;
  max-width: 1100px;
}

/* ============================================
   TABLE
   ============================================ */
.table {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 30%, var(--felt) 0%, var(--felt-dark) 100%);
  border: 8px solid #5d4037;
  border-radius: 40px 40px 16px 16px;
  padding: 20px 24px 14px;
  overflow: hidden;
  box-shadow:
    inset 0 2px 20px rgba(0,0,0,0.5),
    inset 0 -2px 10px rgba(0,0,0,0.3),
    0 0 40px rgba(0,255,136,0.06),
    0 4px 24px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Noise texture overlay on table */
.table::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0.12;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ============================================
   TABLE ROWS & ZONES
   ============================================ */

/* Common row styles */
.row-place,
.row-mid,
.row-field,
.row-props,
.row-pass,
.row-odds {
  display: flex;
  gap: 4px;
  position: relative;
  z-index: 2;
}

/* Zone base */
.zone {
  flex: 1;
  position: relative;
  border: 2px solid rgba(255,255,255,0.7);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, opacity 0.15s, transform 0.1s;
  overflow: hidden;
  contain: layout style;
}

.zone:hover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.1);
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
}

.zone:active {
  transform: scale(0.97);
}

/* Zone states */
.zone.has-bet {
  border-color: var(--gold);
  box-shadow: 0 0 10px rgba(255,193,7,0.25), inset 0 0 8px rgba(255,193,7,0.1);
}

.zone.drag-over {
  border-color: #fff;
  box-shadow: 0 0 12px rgba(255,255,255,0.3), inset 0 0 10px rgba(255,255,255,0.15);
}

.zone.drag-source {
  opacity: 0.4;
}

.zone.disabled {
  opacity: 0.25;
  filter: grayscale(1);
  pointer-events: none;
}

/* Zone labels */
.z-lbl {
  font-family: var(--mono);
  font-size: 1.1rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  line-height: 1.1;
  text-align: center;
  position: relative;
  z-index: 2;
}

.z-sub {
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--gold);
  line-height: 1;
  position: relative;
  z-index: 2;
}

/* Field nums */
.field-nums {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: rgba(255,255,255,0.7);
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.field-nums span {
  color: var(--gold);
  font-weight: 700;
}

/* ============================================
   ROW-SPECIFIC SIZING
   ============================================ */

/* Place row - biggest, most prominent */
.row-place .zone {
  height: 96px;
}

.row-place .z-lbl {
  font-size: 2.5rem;
  font-weight: 900;
}

/* SIX and EIGHT get slightly smaller label */
.row-place .zone[data-bet="place6"] .z-lbl,
.row-place .zone[data-bet="place8"] .z-lbl {
  font-size: 1.3rem;
}

/* Mid row */
.row-mid .zone {
  height: 72px;
}

/* Field row */
.row-field .zone {
  height: 76px;
}

/* Props row */
.row-props .zone {
  height: 60px;
}

.row-props .z-lbl {
  font-size: 0.9rem;
}

/* Pass row */
.row-pass .zone {
  height: 72px;
}

.row-pass .z-lbl {
  font-size: 1.3rem;
}

/* Odds row */
.row-odds .zone {
  height: 52px;
}

/* ============================================
   CHIP STACK ON ZONES
   ============================================ */
.chip-stack {
  position: absolute;
  bottom: 3px;
  background: var(--gold);
  color: #000;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 10px;
  padding: 1px 6px;
  line-height: 1.2;
  z-index: 5;
  white-space: nowrap;
  display: none;
}

.chip-stack:not(:empty) {
  display: block;
}

/* ============================================
   PUCK
   ============================================ */
.puck {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  color: #000;
  font-family: var(--mono);
  font-size: 0.55rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
  opacity: 0;
  transform: scale(0) rotate(0deg);
  transition: opacity 0.3s ease, transform 0.4s ease;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.puck.on {
  opacity: 1;
  transform: scale(1) rotate(360deg);
}

/* ============================================
   POINT ZONE GLOW
   ============================================ */
.zone.point-glow {
  animation: pointBreathe 2s ease infinite;
  border-color: var(--gold) !important;
}

@keyframes pointBreathe {
  0%, 100% {
    box-shadow: 0 0 8px rgba(255,193,7,0.2), inset 0 0 6px rgba(255,193,7,0.1);
  }
  50% {
    box-shadow: 0 0 20px rgba(255,193,7,0.4), inset 0 0 15px rgba(255,193,7,0.2), 0 0 40px rgba(255,193,7,0.1);
  }
}

/* ============================================
   ZONES WITH BETS - subtle breathing
   ============================================ */
.zone.has-bet {
  animation: betBreathe 3s ease infinite;
}

@keyframes betBreathe {
  0%, 100% {
    box-shadow: 0 0 10px rgba(255,193,7,0.25), inset 0 0 8px rgba(255,193,7,0.1);
  }
  50% {
    box-shadow: 0 0 16px rgba(255,193,7,0.35), inset 0 0 12px rgba(255,193,7,0.15);
  }
}