feat(poker): real chip piles on every seat's bet, the pot, and the console readout

Co-authored-by: Sisyphus <sisyphus@ohmyopencode.dev>

src/app/(frontend)/styles.css

@@ -1748,37 +1748,12 @@
   white-space: nowrap;
 }
 
-.poker-seat-commit-chip {
+.poker-seat-commit-label {
-  position: relative;
+  color: rgb(255 255 255 / 55%);
-  display: inline-block;
+  font-size: 0.65rem;
-  width: 1.1rem;
+  font-weight: 500;
-  height: 0.72rem;
+  letter-spacing: 0.16em;
-  border: 1px solid #d6b36a;
+  text-transform: uppercase;
-  border-radius: 50%;
-  background: var(--poker-chip-clay);
-  box-shadow: 0 0.12rem 0 rgb(0 0 0 / 35%);
-  transform: rotate(-8deg);
-}
-
-.poker-seat-commit-chip::before,
-.poker-seat-commit-chip::after {
-  position: absolute;
-  left: -0.05rem;
-  width: 1.1rem;
-  height: 0.72rem;
-  border: 1px solid color-mix(in srgb, #d6b36a 85%, white);
-  border-radius: 50%;
-  content: "";
-}
-
-.poker-seat-commit-chip::before {
-  top: -0.2rem;
-  background: color-mix(in srgb, var(--poker-chip-clay) 82%, white);
-}
-
-.poker-seat-commit-chip::after {
-  top: -0.4rem;
-  background: color-mix(in srgb, var(--poker-chip-clay) 72%, var(--poker-trim));
 }
 
 .poker-seat-arc-left .poker-seat-commit {
@@ -1884,6 +1859,14 @@
     0 0.25rem 0.5rem rgb(0 0 0 / 24%);
 }
 
+/* Big pots break down into up to seven denomination piles; let the pile row
+   wrap so the plaque can never outgrow the center block on narrow felts. */
+.poker-pot-plaque .bj-chip-stack {
+  max-width: 100%;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
 .poker-pot-plaque .poker-console-kicker {
   color: #f3d28b;
 }

src/components/frontend/minigames/poker/PokerActionConsole.tsx

@@ -6,6 +6,7 @@ import type { PublicPlayerView } from "@/lib/minigames/poker";
 import type { PokerSnapshot } from "@/app/(frontend)/minigames/poker/actions";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { BlackjackChipStack as ChipStack } from "../blackjack/BlackjackChipStack";
 import { PokerClock } from "./PokerClock";
 
 type SeatedSnapshot = PokerSnapshot & {
@@ -181,7 +182,11 @@ export function PokerActionConsole({
       <div className="poker-console-economy">
         {!spectator && (
           <div className="poker-chip-readout">
+            {chipsInPlay > 0 ? (
+              <ChipStack amount={chipsInPlay} size="sm" />
+            ) : (
               <span className="poker-chip-stack" aria-hidden="true" />
+            )}
             <span className="poker-console-readout-copy">
               <span className="poker-console-kicker">Chips in play</span>
               <strong className="font-mono text-sm tabular-nums">

src/components/frontend/minigames/poker/PokerFeltCanvas.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useRef, useState } from "react";
 import { cn } from "@/lib/utils";
-import { chipFlightChips, type FlightChip } from "../blackjack/BlackjackChipStack";
+import { BlackjackChipStack as ChipStack, chipFlightChips, type FlightChip } from "../blackjack/BlackjackChipStack";
 import type { Card, PublicPlayerView } from "@/lib/minigames/poker";
 import type { PokerSnapshot } from "@/app/(frontend)/minigames/poker/actions";
 import { Badge } from "@/components/ui/badge";
@@ -208,6 +208,7 @@ export function PokerFeltCanvas({
           <PokerDeckOrigin />
           <div className="poker-pot-plaque">
             <span className="poker-console-kicker">Pot</span>
+            <ChipStack amount={view.potTotal} />
             <strong className="font-mono text-lg tabular-nums">
               {view.potTotal.toLocaleString()}
             </strong>

src/components/frontend/minigames/poker/PokerSeat.tsx

@@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from "react";
 import { Shield } from "lucide-react";
 import { cn } from "@/lib/utils";
 import type { PublicPlayerView } from "@/lib/minigames/poker";
+import { BlackjackChipStack as ChipStack } from "../blackjack/BlackjackChipStack";
 import { CardView } from "./CardView";
 
 interface PokerSeatProps {
@@ -121,7 +122,8 @@ export function PokerSeat({
           className="poker-seat-commit"
           aria-label={`Current bet ${player.committed.toLocaleString()}`}
         >
-          <span className="poker-seat-commit-chip" aria-hidden="true" />
+          <span className="poker-seat-commit-label">Bet</span>
+          <ChipStack amount={player.committed} size="sm" />
           <span className="font-mono text-[0.75rem] tabular-nums">
             {player.committed.toLocaleString()}
           </span>