/* SVG table scene */
.table-svg { width: 100%; height: 100%; max-height: 62vh; user-select: none; }

.rail {
  fill: #0a0c11;
  stroke: #2a3142;
  stroke-width: 3;
  filter: drop-shadow(0 18px 34px rgba(0,0,0,0.55));
}
.felt { fill: var(--felt); }

/* board card slots */
.card-slot { fill: rgba(255,255,255,0.04); stroke: rgba(255,255,255,0.08); stroke-width: 1.5; }

/* cards — v10: fill (gradient) + stroke set via per-suit attributes */
.card-face.dim { opacity: 0.4; }
/* Both strokes derive from the selected --card-back so they follow any color:
   the outer border is a darker shade; the inner frame line is LIGHTER than the back. */
.card-back { fill: var(--card-back); stroke: color-mix(in srgb, var(--card-back) 68%, #000); stroke-width: 1.5; }
.card-back-inner { fill: none; stroke: color-mix(in srgb, var(--card-back) 55%, #fff); stroke-width: 1.5; }
/* Deal-in animation. The positioning transform lives on the OUTER .pcard
   (attribute), while the slide/scale animates the INNER group (no positioning
   transform of its own), so the card's placement is never clobbered. */
.pcard-inner { transform-box: fill-box; transform-origin: center; }
.pcard.dealt .pcard-inner { animation: dealIn 0.34s cubic-bezier(0.2, 0.8, 0.25, 1) both; }
@keyframes dealIn {
  from { opacity: 0; transform: translateY(-26px) scale(0.78); }
  to   { opacity: 1; transform: none; }
}

/* winning hand: the 5 best cards (2 hole + 3 board) lift up a few px and brighten,
   so they stand out against the dimmed losing cards at showdown. */
.pcard.win .pcard-inner {
  transform: translateY(-7px);
  filter: brightness(1.2) saturate(1.08) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5));
  transition: transform 0.25s ease, filter 0.25s ease;
}
/* non-winning board cards at showdown: a light darken so the winners pop */
.pcard.faded .pcard-inner { filter: brightness(0.6); transition: filter 0.25s ease; }

/* seats / pods */
.pod-bg {
  fill: var(--panel);
  stroke: var(--line);
  stroke-width: 1.5;
}
.pod.active .pod-bg { stroke: var(--gold); fill: #1c2130; }
.pod.folded { opacity: 0.4; }
.pod.winner .pod-bg { stroke: var(--green); fill: #142a20; }
.avatar { fill: #2a3550; stroke: #3b496e; stroke-width: 1.5; }
/* the active player is shown by a pulsing/glowing gold avatar rim */
.pod.active .avatar {
  fill: #3a4668;
  stroke: var(--gold);
  stroke-width: 3;
  animation: avatarPulse 1.3s ease-in-out infinite;
}
@keyframes avatarPulse {
  0%, 100% { stroke: var(--gold-soft); filter: drop-shadow(0 0 2px rgba(216,180,106,0.45)); }
  50%      { stroke: #ffe29a;          filter: drop-shadow(0 0 9px rgba(216,180,106,0.95)); }
}
/* the winning player's avatar glows like the active rim, in winner green */
.pod.winner .avatar {
  fill: #1f3a2c;
  stroke: var(--green);
  stroke-width: 3;
  animation: winnerPulse 1.3s ease-in-out infinite;
}
@keyframes winnerPulse {
  0%, 100% { stroke: #3ddc84; filter: drop-shadow(0 0 2px rgba(61,220,132,0.45)); }
  50%      { stroke: #7df0ad; filter: drop-shadow(0 0 10px rgba(61,220,132,0.95)); }
}
.avatar-initial { fill: #cdd6f0; font-size: 18px; font-weight: 700; text-anchor: middle; }
.pod-name { fill: var(--text); font-size: 14px; font-weight: 600; }
.pod-stack { fill: var(--gold); font-size: 13px; font-weight: 600; }
.pod-pos { fill: var(--muted); font-size: 11px; font-weight: 700; text-anchor: end; letter-spacing: 0.5px; }
.pod-action { font-size: 12px; font-weight: 600; text-anchor: end; }
.pod-action.fold { fill: var(--muted); }
.pod-action.check { fill: var(--blue); }
.pod-action.call { fill: var(--blue); }
.pod-action.bet, .pod-action.raise { fill: var(--red); }
.pod-action.SB, .pod-action.BB { fill: var(--muted); }


/* dealer button */
.dealer-disc { fill: #f4f5f8; stroke: #b9974f; stroke-width: 1.5; }
.dealer-text { fill: #1a1406; font-size: 12px; font-weight: 800; text-anchor: middle; }

/* chips / bets */
.chip-shadow { fill: rgba(0,0,0,0.4); }
.chip { fill: var(--gold); stroke: var(--gold-soft); stroke-width: 2; }
.chip-inner { fill: none; stroke: rgba(255, 255, 255, 0.6); stroke-width: 1.5; stroke-dasharray: 3 3; }
.chip-stack.bet { animation: chipIn 0.2s ease both; }
.chip-amt-bg { fill: rgba(8,10,15,0.82); stroke: var(--line); stroke-width: 1; }
.chip-label { fill: var(--text); font-size: 12px; font-weight: 700; }
/* opacity-only so the SVG translate() positioning attribute is preserved */
@keyframes chipIn { from { opacity: 0; } to { opacity: 1; } }

/* pot */
.pot-pill { fill: rgba(8,10,15,0.7); stroke: var(--line); stroke-width: 1.5; }
.pot-text { fill: var(--gold); font-size: 15px; font-weight: 700; text-anchor: middle; letter-spacing: 0.5px; }