Put bets on the felt as chips instead of numbers in a box

The seat puck showed a green figure that meant "what this player just bet"
during a street and "what they've put in this hand" between streets — two
different numbers wearing the same badge, sitting directly above their stack
size. Easy to misread, and nothing on the table looked like money.

Bets now sit on the felt between their player and the pot, as a chip coloured
by the largest denomination in the chip legend that fits the amount: a $30 bet
shows green against a $25 chip, a $2 bet shows white. When a street closes the
chips come off the felt and the pot badge keeps the money, the way they'd be
swept in. The puck's figure now always means the same thing — this player's
total for the hand.

On a phone the bet clings to its own puck instead of sitting on its own ring.
That isn't a preference: sweeping every radius between the seat ring and the
pot badge at 390px showed each one collides with either the pucks or the pot,
because the felt has no room for a third ring at that size.

Co-Authored-By: Claude Sonnet 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_015bnp7xKUPFFSpwkYNFaPgb

JoshHeaps.Net/wwwroot/css/casino/holdem.css

@@ -223,6 +223,68 @@ body {
     inset: 0;
 }
 
+/* ---------- Bets on the felt ---------- */
+
+/* Shares the seat ring's box exactly, so a bet always lands on the spoke between its
+   player and the pot. When the seat ring gets inset on a phone, this moves with it —
+   measured the alternative, and a bets ring on its own geometry ends up either behind
+   the pucks or on top of the pot badge. */
+#betsLayer {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+}
+
+.betChip {
+    position: absolute;
+    transform: translate(-50%, -50%);
+    display: flex;
+    align-items: center;
+    gap: 0.28rem;
+    padding: 0.1rem 0.42rem 0.1rem 0.2rem;
+    background: rgba(0, 0, 0, 0.55);
+    border: 1px solid rgba(255, 255, 255, 0.14);
+    border-radius: 999px;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
+    white-space: nowrap;
+}
+
+/* Reads as a chip seen from above: a lighter top-left, a rim, and the notches a
+   casino chip has around its edge. */
+.betChipDisc {
+    width: 13px;
+    height: 13px;
+    border-radius: 50%;
+    border: 1px solid rgba(255, 255, 255, 0.45);
+    box-shadow:
+        inset 0 1px 1px rgba(255, 255, 255, 0.45),
+        inset 0 -1px 2px rgba(0, 0, 0, 0.45);
+}
+
+.betChipAmount {
+    font-size: 0.62rem;
+    font-weight: 700;
+    color: #f0f0f0;
+    font-variant-numeric: tabular-nums;
+}
+
+/* Clinging to a puck rather than sitting on its own ring — the phone layout. */
+.betChipAnchored {
+    left: 50%;
+    z-index: 3;
+}
+
+.betChipAbove {
+    top: -11px;
+    transform: translate(-50%, -50%);
+}
+
+.betChipBelow {
+    top: auto;
+    bottom: -11px;
+    transform: translate(-50%, 50%);
+}
+
 /* ---------- Seats (compact pucks on the table) ---------- */
 
 .seat {
@@ -1734,7 +1796,8 @@ body.hasActionBar #toastHost {
 
     /* Keeps every puck inside the viewport: the ring is drawn within this box,
        so half a puck of padding is exactly enough to stop the overhang. */
-    #seatsLayer {
+    #seatsLayer,
+    #betsLayer {
         inset: 26px 44px;
     }