Let the landscape table use the width it has

Last round I left a residual and said it wanted its own fix: on a phone held
sideways, seats overlapped so badly that a seat's centre belonged to the seat next
door. Here's the cause.

The landscape rule capped the felt's width by its height to hold the portrait
aspect ratio. At 640x360 that produced a table 135px wide inside a 601px column --
22% of the screen -- with 366px of rim for nine seats needing 662px. Adjacent seat
centres ended up 13px apart for seats rendering 74px wide.

Landscape has width and no height, so the table now takes the width it has and is
only as tall as the room left over. A wide ellipse, which is what a real poker
table is anyway.

  640x360   felt 135x97  ->  601x121   rim 366 -> 1263   centres 13px -> 33px
  844x390   felt 176x127 ->  765x151   rim 480 -> 1605   centres 37px -> 59px
  915x412   felt 207x149 ->  492x173   rim 563 -> 1106   centres 44px -> 55px

Seat ownership went from 8 seats wrong at 640x360 and 2 at 844x390 to zero at
844x390, zero at 915x412, and two at the very smallest. Nine of eleven sizes clean,
portrait and desktop untouched.

Two things I tried and threw away

Spacing seats by arc length instead of by angle. It sounds obviously right -- even
distance around the rim rather than even angle -- and it made things worse: 640x360
went from 2 wrong to 3, closest centres 33px to 21px, and even the desktop table
dropped from 180px to 155px. Even arc spacing packs seats through the tight turns
at the ends of an ellipse, where a fixed distance along the rim covers much less
straight-line distance. Equal angles happen to separate them better. Reverted.

Shrinking seats on the tightest landscape phones. Took the rendered seat from 74px
to 64px and moved closest centres not at all -- still 33px -- while the covered
count at 844x390 went from 3 to 4. A change that measures as nothing but costs CSS
and legibility isn't worth keeping. Reverted.

So this is one CSS rule, which is all the measurements supported.

What's left

640x360 and 667x375 still have two seats whose centre lands on a neighbour. Nine
seats on a ring 121px tall is a genuine physical constraint rather than a layout
mistake, and both remaining fixes I tried made it worse rather than better. It is
reported by the audit rather than hidden, and a dealer on a 360px-tall screen has
the seat menu and the action bar for everything that matters.

152 tests passing; contrast clean at every size; dealing still works in landscape.

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

JoshHeaps.Net/Pages/Casino/TexasHoldem.cshtml

@@ -340,6 +340,33 @@
             </p>
         </section>
 
+        <section class="ruling">
+            <h3>One big chip, nothing said</h3>
+            <p>
+                The most common argument at a home table. A player facing a bet who
+                pushes out a single oversized chip without saying anything has
+                <em>called</em> — not raised, however big the chip is. To raise with one
+                chip you have to say "raise" before it lands; say it without an amount
+                and the raise is the most that chip allows.
+            </p>
+            <p>
+                Facing no bet, the same silent chip is a bet of the whole chip. And a
+                clear verbal declaration in turn is binding either way — if words and
+                chips disagree, whichever came first is the action.
+            </p>
+        </section>
+
+        <section class="ruling">
+            <h3>A raise has to be a full raise</h3>
+            <p>
+                At least as much again as the last raise, or the big blind if there
+                hasn't been one. Anything between a call and that minimum isn't a raise
+                a player can make — it's a call, unless they're putting their last chips
+                in. The raise pad says so if you type one, and won't stop you: your
+                ruling beats the arithmetic.
+            </p>
+        </section>
+
         <section class="ruling">
             <h3>The odd chip in a split pot</h3>
             <p>

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

@@ -568,8 +568,19 @@ button,
 
 .dealerChip {
     position: absolute;
-    top: -10px;
-    right: -10px;
+    /* Inside its own seat, not on the rim.
+       
+       It used to sit at -10px/-10px, hanging over the seat's corner — which on an oval
+       of overlapping seats means hanging over the seat *next to it*. Measured on a
+       nine-seat table: tapping the centre of seat 1 gave the button to seat 9. That
+       was always slightly true and the enlarged hit area made it much worse; three of
+       nine seats were losing taps, one of them losing its own middle.
+       
+       Tucked inside, the overlap is zero at every size. It reads as a puck in the
+       corner of the seat rather than on its edge, which is a small price for tapping
+       a player and getting that player. */
+    top: 3px;
+    right: 3px;
     width: 22px;
     height: 22px;
     border-radius: 50%;
@@ -595,10 +606,20 @@ button,
 .dealerChip::after {
     content: "";
     position: absolute;
-    top: -9px;
-    right: -7px;
-    bottom: -15px;
-    left: -14px;
+    /* Grows inward, over its own seat, not outward onto the neighbours.
+       
+       The chip already sits outside its seat by design — top:-10px, right:-10px — so
+       a pad that also reaches up and right lands on whatever seat is next around the
+       oval. It did: three of nine seats had taps taken by a neighbour's chip, seat 1
+       losing 10 of 49 sampled points including its own centre, which meant tapping
+       the middle of seat 1 gave the button to seat 9.
+       
+       Down and left is its own seat, which is a large target that can spare the
+       corner. The two pixels of outward reach are just to cover the chip's border. */
+    top: -3px;
+    right: -3px;
+    bottom: -18px;
+    left: -18px;
 }
 
 .dealerChip:focus-visible {
@@ -2029,12 +2050,50 @@ body.hasActionBar #holdemSidebar {
     color: #f0d9a8;
 }
 
-/* Whose turn it is, shown on the table itself as well as in the bar. */
+/* Whose turn it is, shown on the table itself as well as in the bar.
+   
+   Dealers say the biggest single time sink at a home table isn't how fast the cards
+   come out — it's players not noticing the action is on them. So this is the one
+   state that has to be unmistakable from across a table at a glance, and it was
+   distinguished only by a rim colour: a gold border and a 2px ring where a live seat
+   has a green border and a 1px one. Same fill, same size, nothing moving.
+
+   It now reads as lit rather than merely outlined: a solid ring at full strength, a
+   warm glow that separates it from the felt, and a lift of its own. The seat's
+   `transform` positions it around the table, so the lift is box-shadow rather than
+   translate — setting transform here would throw the seat off its spot. */
 .seat.seatActing {
-    border-color: #d8b46a;
+    border-color: #f0cd85;
+    background: linear-gradient(160deg, #3a3222, #241f16);
     box-shadow:
-        0 0 0 2px rgba(216, 180, 106, 0.45),
-        0 4px 16px rgba(0, 0, 0, 0.55);
+        0 0 0 3px rgba(216, 180, 106, 0.9),
+        0 0 18px 2px rgba(216, 180, 106, 0.35),
+        0 6px 20px rgba(0, 0, 0, 0.6);
+    z-index: 4;
+}
+
+/* A slow breath, so a dealer glancing up finds it without hunting. Deliberately
+   gentle and deliberately optional — the ring above carries the whole job on its own
+   for anyone who'd rather nothing moved. */
+@media (prefers-reduced-motion: no-preference) {
+    .seat.seatActing {
+        animation: seatActingPulse 2.4s ease-in-out infinite;
+    }
+
+    @keyframes seatActingPulse {
+        0%, 100% {
+            box-shadow:
+                0 0 0 3px rgba(216, 180, 106, 0.9),
+                0 0 18px 2px rgba(216, 180, 106, 0.35),
+                0 6px 20px rgba(0, 0, 0, 0.6);
+        }
+        50% {
+            box-shadow:
+                0 0 0 3px rgba(216, 180, 106, 0.65),
+                0 0 26px 5px rgba(216, 180, 106, 0.5),
+                0 6px 20px rgba(0, 0, 0, 0.6);
+        }
+    }
 }
 
 .seatPuckStack {
@@ -2749,9 +2808,20 @@ body.hasActionBar #toastHost {
        against the containing block's width, not the element's own, so narrowing the
        wrap on its own left it full height regardless. */
     #pokerTableWrap {
-        --feltRoom: calc(100vh - var(--actionBarHeight, 0px) - 8.5rem);
-        width: min(100%, calc(var(--feltRoom) / 0.72));
+        /* A wide ellipse, which is what a real poker table is.
+        
+           Capping the width by the height to hold the portrait aspect ratio was
+           throwing away most of the screen: at 640x360 the felt came out 135px wide
+           inside a 601px column — 22% of the width — leaving 366px of rim for nine
+           seats that need 662px. Adjacent seat centres ended up 13px apart, which is
+           why a seat's centre belonged to its neighbour.
+        
+           Landscape has width and no height, so the table takes the width it has and
+           is only as tall as the room left over. */
+        --feltRoom: calc(100vh - var(--actionBarHeight, 0px) - 7rem);
+        width: 100%;
         height: var(--feltRoom);
+        min-height: 7rem;
         padding-bottom: 0;
     }
 
@@ -2788,6 +2858,7 @@ body.hasActionBar #toastHost {
         width: 62px;
         min-height: 40px;
     }
+
 }
 
 /* ---------- Short phones, upright ----------
@@ -2899,3 +2970,79 @@ textarea:focus-visible {
     position: absolute;
     inset: -7px;
 }
+
+/* A note under the raise entry when the amount typed isn't a legal raise. It informs
+   and never blocks: this tool records what the humans at the table actually did, and
+   a dealer overruling the arithmetic is right more often than the arithmetic is.
+   Under-minimum raises are the single most common thing that stops a home game, and
+   the bar used to accept one without a word. */
+.raiseNote {
+    margin: 0.45rem 0 0;
+    font-size: 0.74rem;
+    line-height: 1.35;
+    text-align: center;
+}
+
+.raiseNote.raiseNoteWarn {
+    color: #f0b46a;
+}
+
+.raiseNote.raiseNoteInfo {
+    color: #9fc7e8;
+}
+
+/* On a short phone the raise pad already makes the bar tall enough to cover the
+   lowest seats, and the note must not make that materially worse. Measured at
+   360x640: bar 122px closed, 178px with the pad open, 217px with a note. Tightened
+   here so the note costs a line rather than a paragraph — the bar is a transient
+   input mode with Cancel and Escape, but it shouldn't grow for the sake of it. */
+@media (max-height: 700px) {
+    .raiseNote {
+        margin-top: 0.3rem;
+        font-size: 0.68rem;
+        line-height: 1.25;
+    }
+
+    /* The pot breakdown is reference material — which side pots exist and who can win
+       them. While an amount is being typed it isn't what the dealer is reading, and
+       it's the tallest thing competing for the strip. */
+    body.hasActionBar #actionBar:has(.raisePad) .potBreakdown {
+        display: none;
+    }
+}
+
+/* ---------- The deal step ----------
+   Between hands the bar shows who will post and waits. Dealing used to happen the
+   instant the previous hand ended, which committed blinds while people were still
+   sitting down — and left the blind badges disagreeing with the money already in. */
+.dealPrompt {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.dealPromptLine {
+    margin: 0;
+    text-align: center;
+    font-size: 0.8rem;
+    color: #c8c8c8;
+    line-height: 1.35;
+}
+
+.dealPromptLine.dealPromptBlocked {
+    color: #9a9a9a;
+}
+
+.actionBtn.actionDeal {
+    background: linear-gradient(180deg, #16783a, #0d5225);
+    border-color: #1e8449;
+    color: #ecffef;
+    font-weight: 600;
+}
+
+/* The quieter half of the deal prompt: things the deal is about to do that a dealer
+   would otherwise only discover afterwards. */
+.dealPromptLine.dealPromptAside {
+    font-size: 0.72rem;
+    color: #9a9a9a;
+}

JoshHeaps.Net/wwwroot/js/casino/holdem/actionBar.js

@@ -40,7 +40,9 @@ const ActionBar = {
         publish();
     },
 
-    // Anything to act on? A hand with nobody dealt in doesn't get a bar.
+    // Anything to act on? A hand with nobody dealt in doesn't get a bar — and that
+    // still holds during setup, because a seated player is a live seat whether or not
+    // the betting has been opened. An empty table stays uncluttered.
     isRunning() {
         return Betting.liveSeats(this.state).length > 0;
     },
@@ -66,7 +68,9 @@ const ActionBar = {
         const breakdown = this.renderPotBreakdown();
         if (breakdown) host.appendChild(breakdown);
 
-        if (Betting.isHandOver(this.state)) {
+        if (!this.state.bettingOpen) {
+            host.appendChild(this.renderDealPrompt());
+        } else if (Betting.isHandOver(this.state)) {
             host.appendChild(this.renderHandOver());
         } else if (this.state.actingSeatIndex === null || this.state.actingSeatIndex === undefined) {
             host.appendChild(this.renderStreetDone());
@@ -319,12 +323,26 @@ const ActionBar = {
     // Quick amounts first, keypad second — a dealer calling "raise to sixty" wants a
     // button, and only reaches for digits when the table does something odd.
     renderRaisePad() {
+        // A toast is transient news about the action just taken; the raise pad is the
+        // dealer deciding the next one. On a short screen they compete for the same
+        // strip: the pad makes the bar 217px tall on a 640px phone, and the toast —
+        // which floats just above the bar — gets pushed up over the table, covering
+        // seats outright. Rather than squeeze both in, the older one gets out of the
+        // way. Nothing is lost: the toast's Undo is also the bar's own undo control.
+        if (typeof Toast !== "undefined" && Toast.dismiss) Toast.dismiss();
+
         const index = this.state.actingSeatIndex;
         const player = this.state.seats[index];
         const stack = Betting.stackOf(this.state, player);
         const maxTo = Betting.round(Betting.committed(player) + stack);
         const pot = Betting.potSoFar(this.state);
-        const minTo = Math.min(Betting.minRaiseTo(this.state), maxTo);
+        // Two different minimums, and conflating them was a bug. `minTo` is clamped to
+        // what this player can actually put in, which is what the Min button should
+        // offer. `legalMin` is what the rules require — for a short stack the two are
+        // different, and it's the rules one the warnings have to be measured against,
+        // or a player whose whole stack is under a full raise never gets told that.
+        const legalMin = Betting.minRaiseTo(this.state);
+        const minTo = Math.min(legalMin, maxTo);
 
         const wrap = document.createElement("div");
         wrap.className = "raisePad";
@@ -360,6 +378,7 @@ const ActionBar = {
         input.setAttribute("aria-label", "Raise to amount");
         input.addEventListener("input", () => {
             this.raiseDraft = input.value.replace(/[^0-9.]/g, "");
+            this.updateRaiseNote(wrap, legalMin, maxTo);
         });
         entry.appendChild(input);
 
@@ -376,6 +395,123 @@ const ActionBar = {
         }));
 
         wrap.appendChild(entry);
+
+        const note = document.createElement("p");
+        note.className = "raiseNote";
+        note.hidden = true;
+        wrap.appendChild(note);
+        this.updateRaiseNote(wrap, legalMin, maxTo);
+
+        return wrap;
+    },
+
+    // Says something when the amount typed isn't a legal raise. It never blocks —
+    // a dealer overruling the arithmetic is right more often than the arithmetic is,
+    // and the whole tool is built on tapping what the humans actually did.
+    //
+    // But an under-minimum raise from a player with chips behind them is the single
+    // most common thing that stops a home game dead, and until now the bar took it
+    // without a word: type 13 when the minimum is 18 and it was simply accepted. The
+    // engine then treats it as a short raise and correctly doesn't reopen the betting,
+    // which is right for an all-in and wrong for somebody who just misheard the bet.
+    updateRaiseNote(wrap, minTo, maxTo) {
+        const note = wrap.querySelector(".raiseNote");
+        if (!note) return;
+
+        const typed = Number(this.raiseDraft);
+        const current = this.state.currentBet || 0;
+
+        if (!Number.isFinite(typed) || typed <= 0) { note.hidden = true; return; }
+
+        // Going all-in for less than a full raise is perfectly legal, and worth saying
+        // out loud because of what follows from it.
+        const isAllIn = Math.abs(typed - maxTo) < Betting.EPSILON_CHIPS;
+
+        if (typed > current && typed < minTo - Betting.EPSILON_CHIPS && !isAllIn) {
+            note.textContent =
+                `${Money.format(typed)} is under the ${Money.format(minTo)} minimum. A legal raise is ${Money.format(minTo)} or more — otherwise it's a call, or all-in.`;
+            note.className = "raiseNote raiseNoteWarn";
+            note.hidden = false;
+            return;
+        }
+
+        if (isAllIn && typed > current && typed < minTo - Betting.EPSILON_CHIPS) {
+            note.textContent =
+                `All-in for less than a full raise. Legal, but it doesn't reopen the betting — anyone who has already acted owes the difference or folds.`;
+            note.className = "raiseNote raiseNoteInfo";
+            note.hidden = false;
+            return;
+        }
+
+        if (typed > current && typed < current + Betting.EPSILON_CHIPS) { note.hidden = true; return; }
+
+        if (typed > maxTo + Betting.EPSILON_CHIPS) {
+            note.textContent = `More than they have. This goes in as all-in for ${Money.format(maxTo)}.`;
+            note.className = "raiseNote raiseNoteInfo";
+            note.hidden = false;
+            return;
+        }
+
+        if (typed <= current) {
+            note.textContent = `${Money.format(typed)} is not above the ${Money.format(current)} already bet — that's a call, not a raise.`;
+            note.className = "raiseNote raiseNoteWarn";
+            note.hidden = false;
+            return;
+        }
+
+        note.hidden = true;
+    },
+
+    // The table is set but the cards aren't out. This is the step that used to happen
+    // by itself the instant the previous hand ended, which meant blinds were committed
+    // while people were still sitting down — and the blind badges would drift away from
+    // the money already posted as seats changed. Now the dealer says when.
+    renderDealPrompt() {
+        const wrap = document.createElement("div");
+        wrap.className = "dealPrompt";
+
+        const preview = Betting.blindPreview(this.state);
+        const seated = Betting.liveSeats(this.state).length;
+
+        const line = document.createElement("p");
+        line.className = "dealPromptLine";
+
+        if (!preview) {
+            // Two players is the least you can deal. Say what's missing rather than
+            // offering a button that would quietly do nothing.
+            line.textContent = seated === 0
+                ? "Nobody is dealt in yet. Tap a seat to add a player."
+                : "Only one player is dealt in — a hand needs two.";
+            line.classList.add("dealPromptBlocked");
+            wrap.appendChild(line);
+            return wrap;
+        }
+
+        const name = i => HoldemState.displayName(this.state.seats[i], i);
+        line.textContent =
+            `${name(preview.sbIndex)} posts ${Money.format(preview.smallBlind)}, ` +
+            `${name(preview.bbIndex)} posts ${Money.format(preview.bigBlind)}` +
+            `${preview.headsUp ? " · heads-up" : ""}${preview.manual ? " · blinds set by hand" : ""}`;
+        wrap.appendChild(line);
+
+        // Dealing relocates a button sitting on an empty chair. That has to be said
+        // before it happens rather than discovered afterwards — a fresh table starts
+        // the button on seat 1 whether or not anyone is sitting there.
+        if (preview.buttonMoves) {
+            const moved = document.createElement("p");
+            moved.className = "dealPromptLine dealPromptAside";
+            moved.textContent =
+                `Button moves to ${name(preview.buttonIndex)} — seat ${this.state.dealerSeatIndex + 1} is empty.`;
+            wrap.appendChild(moved);
+        }
+
+        const row = document.createElement("div");
+        row.className = "actionButtons";
+        row.appendChild(this.button("Post blinds & deal", "actionDeal", () => {
+            this.commit("dealing the hand", () => Betting.beginHand(this.state));
+        }));
+        wrap.appendChild(row);
+
         return wrap;
     },
 

JoshHeaps.Net/wwwroot/js/casino/holdem/betting.js

@@ -29,6 +29,31 @@ const Betting = {
             .filter(s => s.player.inHand && !s.player.folded);
     },
 
+    // Who would post if the hand were dealt right now. Used to preview the blinds
+    // while the table is still being set, so a dealer can see where they'll land
+    // before any money moves.
+    blindPreview(state) {
+        // Dealing relocates a button parked on an empty chair before it works out who
+        // posts, so the preview has to answer for the button where it *will* be. Asking
+        // from where it currently sits gave a different pair of blinds than the deal
+        // produced — the preview promising one thing and doing another is exactly the
+        // guessing this whole step exists to remove.
+        const buttonIndex = HoldemState.buttonSeatForDeal(state);
+        const asDealt = buttonIndex === state.dealerSeatIndex
+            ? state
+            : { ...state, dealerSeatIndex: buttonIndex };
+
+        const { sbIndex, bbIndex, headsUp, manual } = HoldemState.getBlindSeats(asDealt);
+        if (sbIndex === null || bbIndex === null) return null;
+        return {
+            sbIndex, bbIndex, headsUp, manual: !!manual,
+            buttonIndex,
+            buttonMoves: buttonIndex !== state.dealerSeatIndex,
+            smallBlind: this.round(state.smallBlind || 0),
+            bigBlind: this.round(state.bigBlind || 0),
+        };
+    },
+
     committed(player) {
         return this.round(player.committed || 0);
     },
@@ -291,7 +316,12 @@ const Betting = {
 
     // Deals a fresh betting round: blinds posted, action to the seat after the big
     // blind, which is where a dealer expects to be looking when the cards go out.
+    //
+    // Called when the dealer says the table is ready, not automatically when the
+    // previous hand ends — everything before this point is setup, where seats and the
+    // button can move freely because no money has been committed.
     beginHand(state) {
+        state.bettingOpen = true;
         state.street = "preflop";
         state.currentBet = 0;
         state.lastRaiseSize = 0;

JoshHeaps.Net/wwwroot/js/casino/holdem/main.js

@@ -96,13 +96,21 @@ document.addEventListener("DOMContentLoaded", () => {
             });
         },
 
-        makeDealer: index => seatAction(index, `Button on ${nameOf(index)}.`, () => {
-            state.dealerSeatIndex = index;
-            // Before anyone has acted the blinds are still just sitting there, so
-            // moving the button moves them too — a home game passes it round several
-            // times before the cards come out, and the posted chips have to follow.
-            if (Betting.onlyBlindsIn(state)) Betting.repostBlinds(state);
-        }),
+        makeDealer: index => {
+            // Before the deal there's nothing posted, so this is just moving a marker.
+            // After it, the blinds have to follow the button or the badges and the
+            // money disagree — but that's a real thing happening to real chips, and
+            // the dealer gets told rather than finding out later.
+            const willRepost = state.bettingOpen && Betting.onlyBlindsIn(state) &&
+                HoldemState.unresolvedContributions(state) > Betting.EPSILON_CHIPS;
+
+            seatAction(index, willRepost
+                ? `Button on ${nameOf(index)} — blinds taken back and re-posted.`
+                : `Button on ${nameOf(index)}.`, () => {
+                state.dealerSeatIndex = index;
+                if (willRepost) Betting.repostBlinds(state);
+            });
+        },
 
         assignBlind: (index, which) => {
             const blinds = HoldemState.getBlindSeats(state);
@@ -159,8 +167,10 @@ document.addEventListener("DOMContentLoaded", () => {
                     // hand's stacks are already right.
                     Betting.creditWinnings(state, payouts);
                 }
+                // Settling a pot ends the hand; it doesn't start the next one. The
+                // table goes back to setup so people can sit down or cash out before
+                // any blinds are committed.
                 HoldemState.startNextHand(state);
-                Betting.beginHand(state);
             });
         });
     };
@@ -222,7 +232,9 @@ document.addEventListener("DOMContentLoaded", () => {
             return true;
         },
         // Enter confirms a raise if one is being entered, otherwise moves the hand on.
-        advance: () => pressInBar(".raiseConfirm") || pressInBar(".actionAdvance"),
+        // Dealing is an advance too — Enter should carry a dealer through setup, deal,
+        // streets and showdown without reaching for the trackpad.
+        advance: () => pressInBar(".raiseConfirm") || pressInBar(".actionAdvance") || pressInBar(".actionDeal"),
         undo: () => pressInBar(".actionUndo"),
         cancel: () => pressInBar(".raiseCancel"),
     });
@@ -345,9 +357,8 @@ document.addEventListener("DOMContentLoaded", () => {
             ? ` ${Money.format(unresolved)} taken off the table.`
             : "";
 
-        runUndoable(`Next hand — ${where}. Blinds posted.${discarded}`, () => {
+        runUndoable(`Next hand — ${where}. Seat the table, then deal.${discarded}`, () => {
             HoldemState.startNextHand(state);
-            Betting.beginHand(state);
         });
     });
 

JoshHeaps.Net/wwwroot/js/casino/holdem/state.js

@@ -58,6 +58,20 @@ const HoldemState = {
             currentBet: 0,
             lastRaiseSize: 0,
             actingSeatIndex: null,
+            // Whether the betting has actually been opened for this hand.
+            //
+            // Dealing and betting used to be one button: "Next Hand" moved the button
+            // and posted the blinds in the same breath. That meant the moment between
+            // hands — the one where people are still sitting down, standing up and
+            // arguing about whose turn it is — was spent with money already committed,
+            // and the blind badges recomputing off `inHand` while the posted chips
+            // stayed frozen from when the hand began. Seat somebody after pressing it
+            // and the table would show a big blind who had posted nothing.
+            //
+            // So the dealer says when. False means the table is being set up: nothing
+            // is committed, the badges are a preview, and seating or moving the button
+            // costs nothing.
+            bettingOpen: false,
             // Set when the dealer names the blinds by hand instead of letting them
             // follow the button — { sbIndex, bbIndex }. Home games do this constantly
             // ("you had it last time", someone arriving late owing a blind), and the
@@ -84,6 +98,17 @@ const HoldemState = {
                 .forEach(key => {
                     if (parsed[key] === undefined) parsed[key] = defaults[key];
                 });
+
+            // A table saved before dealing and betting were separate has no flag, and
+            // guessing false would show "deal the hand" over a hand already in
+            // progress. Anything already committed, or anyone already on the clock,
+            // means the betting was open when they closed the tab.
+            if (parsed.bettingOpen === undefined) {
+                parsed.bettingOpen =
+                    parsed.actingSeatIndex !== null && parsed.actingSeatIndex !== undefined ||
+                    parsed.seats.some(p =>
+                        (Number(p.committed) || 0) > 0 || (Number(p.amountOverride) || 0) > 0);
+            }
             parsed.seats.forEach(player => {
                 if (player.stack === undefined) player.stack = null;
                 if (player.committed === undefined) player.committed = 0;
@@ -248,15 +273,25 @@ const HoldemState = {
     // position off it. On the very first hand of a fresh table it starts on seat 1
     // whether or not anybody is sitting there, and a table that empties out around it
     // leaves it stranded. Move it to a real player before a hand is dealt.
-    ensureButtonOnPlayer(state) {
-        if (state.seats[state.dealerSeatIndex] && state.seats[state.dealerSeatIndex].inHand) return;
+    // Where the button will be when the hand is dealt — without moving it.
+    //
+    // Kept separate from ensureButtonOnPlayer because the deal preview has to be able
+    // to ask the question without answering it. It couldn't, and so the preview lied:
+    // with the button parked on an empty chair it promised one pair of blinds and
+    // dealing produced another, because beginHand relocates the button first and then
+    // works out who posts.
+    buttonSeatForDeal(state) {
+        const seated = state.seats[state.dealerSeatIndex];
+        if (seated && seated.inHand) return state.dealerSeatIndex;
         for (let step = 0; step < state.seatCount; step++) {
             const index = this.nextSeatIndex(state, state.dealerSeatIndex, step);
-            if (state.seats[index].inHand) {
-                state.dealerSeatIndex = index;
-                return;
-            }
+            if (state.seats[index].inHand) return index;
         }
+        return state.dealerSeatIndex;
+    },
+
+    ensureButtonOnPlayer(state) {
+        state.dealerSeatIndex = this.buttonSeatForDeal(state);
     },
 
     // A hand-picked blind is only usable if that seat is actually in the hand — a
@@ -306,6 +341,12 @@ const HoldemState = {
 
     startNextHand(state) {
         this.advanceButton(state);
+        // Cards aren't out and nothing is posted until the dealer says so.
+        state.bettingOpen = false;
+        state.actingSeatIndex = null;
+        state.street = "preflop";
+        state.currentBet = 0;
+        state.lastRaiseSize = 0;
         // A hand-picked blind applies to the hand it was picked for. Carrying it into
         // the next one would freeze the blinds on two players for the rest of the
         // night, which is the opposite of what naming them once is for.

tests/holdem/dealStep.test.js

@@ -0,0 +1,205 @@
+// Dealing and betting are two decisions, and fusing them meant the table guessed.
+//
+// The moment between hands is when people sit down, stand up and argue about whose
+// turn it is. With blinds posted the instant the previous hand ended, the blind
+// badges recomputed off `inHand` while the committed chips stayed frozen — so seating
+// somebody produced a big blind who had posted nothing.
+const { test, describe } = require("node:test");
+const assert = require("node:assert/strict");
+const { Betting, HoldemState, makeTable, chipsOnTable } = require("./load");
+
+const postedBy = state => state.seats
+    .map((p, i) => (Betting.committed(p) > 0 ? i : null))
+    .filter(i => i !== null);
+
+describe("the table waits to be dealt", () => {
+    test("finishing a hand leaves the next one un-dealt", () => {
+        const state = makeTable({ seatCount: 6, seated: [0, 1, 2], dealerSeatIndex: 0 });
+        Betting.beginHand(state);
+        assert.equal(state.bettingOpen, true);
+
+        HoldemState.startNextHand(state);
+
+        assert.equal(state.bettingOpen, false, "the next hand hasn't been dealt");
+        assert.equal(state.actingSeatIndex, null, "nobody is on the clock");
+        assert.deepEqual(postedBy(state), [], "and no blind has been committed");
+    });
+
+    test("no money moves until the dealer deals", () => {
+        const state = makeTable({ seatCount: 6, seated: [0, 1, 2], dealerSeatIndex: 0 });
+        const start = chipsOnTable(state);
+        HoldemState.startNextHand(state);
+
+        assert.equal(chipsOnTable(state), start);
+        assert.equal(HoldemState.totalPot(state), 0);
+
+        Betting.beginHand(state);
+        assert.equal(state.bettingOpen, true);
+        assert.equal(postedBy(state).length, 2, "now the blinds are in");
+        assert.equal(chipsOnTable(state), start, "and nothing was created doing it");
+    });
+});
+
+describe("setting the table costs nothing", () => {
+    test("seating a player before the deal changes who posts", () => {
+        const state = makeTable({ seatCount: 6, seated: [0, 1, 2], dealerSeatIndex: 0 });
+        HoldemState.startNextHand(state);
+
+        const before = Betting.blindPreview(state);
+        state.seats[3].inHand = true;
+        state.seats[3].stack = 100;
+        const after = Betting.blindPreview(state);
+
+        assert.notDeepEqual(
+            [before.sbIndex, before.bbIndex],
+            [after.sbIndex, after.bbIndex],
+            "the preview follows the new table"
+        );
+        assert.deepEqual(postedBy(state), [], "and still nothing is committed");
+
+        Betting.beginHand(state);
+        assert.deepEqual(postedBy(state).sort(), [after.sbIndex, after.bbIndex].sort(),
+            "the money lands where the preview said it would");
+    });
+
+    test("removing a player before the deal can't strand their blind", () => {
+        // The old failure: take out the big blind after the hand had begun and their
+        // chips stayed in the pot while the badge moved to somebody who'd posted
+        // nothing. Before the deal there is nothing to strand.
+        const state = makeTable({ seatCount: 6, seated: [0, 1, 2, 3], dealerSeatIndex: 0 });
+        HoldemState.startNextHand(state);
+
+        const doomed = Betting.blindPreview(state).bbIndex;
+        state.seats[doomed].inHand = false;
+
+        assert.deepEqual(postedBy(state), [], "nobody has posted, so nothing is stranded");
+
+        Betting.beginHand(state);
+        const posted = postedBy(state);
+        assert.ok(!posted.includes(doomed), "the player who left posts nothing");
+        posted.forEach(i => assert.ok(state.seats[i].inHand, "only players in the hand post"));
+    });
+
+    test("moving the button before the deal just moves it", () => {
+        const state = makeTable({ seatCount: 8, seated: [0, 2, 4, 6], dealerSeatIndex: 0 });
+        const start = chipsOnTable(state);
+        HoldemState.startNextHand(state);
+
+        [2, 4, 6, 0].forEach(seat => {
+            state.dealerSeatIndex = seat;
+            assert.deepEqual(postedBy(state), [], `passing the button to seat ${seat + 1} posted something`);
+            assert.equal(chipsOnTable(state), start);
+        });
+
+        Betting.beginHand(state);
+        assert.equal(chipsOnTable(state), start, "dealing moves chips between stacks, not into thin air");
+    });
+
+    test("what the preview promises is what gets posted", () => {
+        const state = makeTable({ seatCount: 9, seated: [1, 3, 6, 8], dealerSeatIndex: 1 });
+        HoldemState.startNextHand(state);
+
+        const preview = Betting.blindPreview(state);
+        Betting.beginHand(state);
+
+        assert.equal(Betting.committed(state.seats[preview.sbIndex]), preview.smallBlind);
+        assert.equal(Betting.committed(state.seats[preview.bbIndex]), preview.bigBlind);
+    });
+
+    test("there's nothing to preview without two players", () => {
+        const alone = makeTable({ seatCount: 6, seated: [2] });
+        HoldemState.startNextHand(alone);
+        assert.equal(Betting.blindPreview(alone), null);
+
+        const empty = makeTable({ seatCount: 6, seated: [] });
+        HoldemState.startNextHand(empty);
+        assert.equal(Betting.blindPreview(empty), null);
+    });
+
+    test("a hand-picked blind shows up in the preview", () => {
+        const state = makeTable({ seatCount: 6, seated: [0, 1, 2, 3], dealerSeatIndex: 0 });
+        HoldemState.startNextHand(state);
+        state.blindOverride = { sbIndex: 3, bbIndex: 0 };
+
+        const preview = Betting.blindPreview(state);
+        assert.equal(preview.manual, true);
+        assert.equal(preview.sbIndex, 3);
+        assert.equal(preview.bbIndex, 0);
+    });
+});
+
+describe("a table saved mid-hand comes back mid-hand", () => {
+    const loadWith = saved => {
+        const original = globalThis.localStorage;
+        globalThis.localStorage = { getItem: () => JSON.stringify(saved), setItem: () => {}, removeItem: () => {} };
+        const state = HoldemState.load();
+        globalThis.localStorage = original;
+        return state;
+    };
+
+    test("chips already committed mean the betting was open", () => {
+        const state = loadWith({
+            seats: [{ id: "a", name: "Ann", inHand: true, committed: 2 }, { id: "b", name: "Ben", inHand: true, committed: 0 }],
+            handNumber: 3,
+        });
+        assert.equal(state.bettingOpen, true, "otherwise it would offer to deal over a live hand");
+    });
+
+    test("somebody on the clock means the betting was open", () => {
+        const state = loadWith({
+            seats: [{ id: "a", inHand: true }, { id: "b", inHand: true }],
+            actingSeatIndex: 1, handNumber: 2,
+        });
+        assert.equal(state.bettingOpen, true);
+    });
+
+    test("a quiet table comes back waiting to be dealt", () => {
+        const state = loadWith({
+            seats: [{ id: "a", inHand: true }, { id: "b", inHand: true }],
+            actingSeatIndex: null, handNumber: 5,
+        });
+        assert.equal(state.bettingOpen, false);
+    });
+});
+
+describe("the preview tells the truth about the button", () => {
+    test("a button parked on an empty chair is answered for where it will be", () => {
+        // The preview used to read the button where it sat, while dealing relocated it
+        // first — so it promised one pair of blinds and produced another.
+        const state = makeTable({ seatCount: 6, seated: [1, 2, 3], dealerSeatIndex: 0 });
+        state.bettingOpen = false;
+        assert.equal(state.seats[0].inHand, false, "the button is on an empty chair");
+
+        const preview = Betting.blindPreview(state);
+        assert.equal(preview.buttonMoves, true, "and the preview knows it will move");
+
+        Betting.beginHand(state);
+
+        assert.equal(Betting.committed(state.seats[preview.sbIndex]), preview.smallBlind);
+        assert.equal(Betting.committed(state.seats[preview.bbIndex]), preview.bigBlind);
+        assert.equal(state.dealerSeatIndex, preview.buttonIndex, "and it moved where it said");
+    });
+
+    test("asking where the button will be doesn't move it", () => {
+        const state = makeTable({ seatCount: 6, seated: [1, 2, 3], dealerSeatIndex: 0 });
+        state.bettingOpen = false;
+
+        Betting.blindPreview(state);
+        Betting.blindPreview(state);
+
+        assert.equal(state.dealerSeatIndex, 0, "the preview is a question, not an action");
+    });
+
+    test("a button already on a player is left alone", () => {
+        const state = makeTable({ seatCount: 6, seated: [0, 1, 2], dealerSeatIndex: 0 });
+        state.bettingOpen = false;
+        const preview = Betting.blindPreview(state);
+        assert.equal(preview.buttonMoves, false);
+        assert.equal(preview.buttonIndex, 0);
+    });
+
+    test("buttonSeatForDeal copes with a table nobody is sitting at", () => {
+        const state = makeTable({ seatCount: 6, seated: [] });
+        assert.equal(HoldemState.buttonSeatForDeal(state), state.dealerSeatIndex);
+    });
+});

tests/holdem/uiAudit.js

@@ -133,7 +133,18 @@ const LayoutAudit = {
                 if (el.contains(top) || top === el || top.contains(el)) return;
                 // Seats ring a round table and overlap each other at the rim by
                 // design; that is crowding, not an overlay hiding a control.
-                if (top.closest && top.closest(".seat")) return;
+                //
+                // But only the seat's *body* is harmless. A neighbouring seat's own
+                // controls sitting on top of this one is a control being stolen, and
+                // exempting the whole seat subtree hid exactly that: an enlarged
+                // dealer-chip hit area was taking the centre of the seat three
+                // places round the table, and this check called it crowding and
+                // moved on.
+                const neighbourSeat = top.closest && top.closest(".seat");
+                if (neighbourSeat) {
+                    const isControl = top.matches && top.matches("button, a, input, select, textarea, [role='button']");
+                    if (!isControl) return;
+                }
                 blocked++;
                 if (!blockedBy) blockedBy = this.describe(top);
             });
@@ -468,6 +479,41 @@ const LayoutAudit = {
         return { name: `touch targets at least ${minimum}px`, offenders };
     },
 
+    // Tapping the middle of a seat must give you that seat.
+    //
+    // Added after a dealer-chip hit area, meant to make a 22px puck thumb-sized, grew
+    // outward from a chip that already hung over its seat's corner — and therefore
+    // over the seat next to it. On a nine-seat table, tapping the centre of seat 1
+    // handed the button to seat 9. The occlusion check missed it because it treated
+    // anything inside a `.seat` as harmless crowding.
+    //
+    // Reported separately from occlusion because the cause is different: not an
+    // overlay on top of the table, but two pieces of the table fighting over a tap.
+    seatOwnership() {
+        const seats = [...document.querySelectorAll(".seat")];
+        const offenders = [];
+
+        seats.forEach((seat, index) => {
+            const rect = seat.getBoundingClientRect();
+            if (rect.width === 0 || rect.height === 0) return;
+            const x = rect.left + rect.width / 2;
+            const y = rect.top + rect.height / 2;
+            if (x < 0 || y < 0 || x >= innerWidth || y >= innerHeight) return;
+
+            const hit = document.elementFromPoint(x, y);
+            if (!hit || seat.contains(hit) || hit === seat) return;
+
+            const other = hit.closest(".seat");
+            const who = other ? `seat ${seats.indexOf(other) + 1}` : this.describe(hit);
+            const control = hit.matches && hit.matches("button, a, input, select, [role='button']");
+            offenders.push(
+                `seat ${index + 1}'s centre goes to ${who}${control ? "'s " + this.describe(hit) : ""}`
+            );
+        });
+
+        return { name: "a seat's centre belongs to that seat", offenders };
+    },
+
     // ---- Runner ----
 
     runAll(options = {}) {
@@ -480,6 +526,7 @@ const LayoutAudit = {
             this.textSpill(),
             this.horizontalOverflow(),
             this.fieldFontSize(),
+            this.seatOwnership(),
         ];
         if (options.includeTouchTargets) checks.push(this.touchTargets(options.minimumTarget));