Merge pull request 'Let the landscape table use the width it has' (#61 ) from fix/casino-holdem-landscape-table into feature/casino-holdem-seat-editor

Reviewed-on: #61
Let the landscape table use the width it has
2026-09-01 10:57:01 -06:00 · 2026-09-01 10:39:45 -06:00 · 2026-09-01 10:24:14 -06:00 · 2026-09-01 10:06:58 -06:00 · 2026-09-01 09:51:43 -06:00 · 2026-09-01 09:31:52 -06:00
26 changed files with 3778 additions and 142 deletions
@@ -25,7 +25,7 @@
        <section id="tableSection">
            <div id="pokerTableWrap">
                <div id="pokerTable">
-                    <div id="tableWatermark">Texas Hold'em</div>
+                    <div id="tableWatermark" aria-hidden="true">Texas Hold'em</div>
                    <div id="potBadge">
                        <span id="potBadgeLabel">Pot</span>
                        <span id="potBadgeAmount">$0</span>
@@ -104,16 +104,31 @@
                <summary>Session</summary>
                <div class="panelBody">
                    <h3 class="panelSubhead">Standings</h3>
-                    <div id="standingsTable">
-                        <div class="standingsRow standingsHeader">
-                            <span>Player</span>
-                            <span>In</span>
-                            <span>Won</span>
-                            <span>Net</span>
+                    <div class="standingsTableWrap">
+                        <div id="standingsTable">
+                            <div class="standingsRow standingsHeader">
+                                <span>Player</span>
+                                <span class="standingsInHead">In</span>
+                                <span class="standingsWonHead">Won</span>
+                                <span>Net</span>
+                                <span title="Chips in front of them, less the cash they handed over">Cash out</span>
+                            </div>
+                            <div id="standingsList"></div>
                        </div>
-                        <div id="standingsList"></div>
                    </div>
-                    <p id="standingsEmptyHint" class="fieldHint">Once you resolve a pot, everyone's running total for the night shows up here.</p>
+                    <p id="standingsEmptyHint" class="fieldHint">Everyone who has bought in shows up here, with what they'd be owed if the night ended now.</p>
+
+                    <div id="bankReconcile" class="bankReconcile" hidden>
+                        <div class="bankReconcileRow">
+                            <span>Cash taken</span>
+                            <span id="bankCashIn"></span>
+                        </div>
+                        <div class="bankReconcileRow">
+                            <span>Chips in play</span>
+                            <span id="bankChipsInPlay"></span>
+                        </div>
+                        <p id="bankReconcileVerdict" class="bankReconcileVerdict"></p>
+                    </div>

                    <h3 class="panelSubhead">Hands</h3>
                    <div id="handHistoryList"></div>
@@ -138,7 +153,7 @@
            <details class="sidebarPanel">
                <summary>Table Notes</summary>
                <div class="panelBody">
-                    <textarea id="tableNotes" rows="4" placeholder="Anything else worth tracking — side bets, IOUs, running totals..."></textarea>
+                    <textarea id="tableNotes" rows="4" aria-label="Table notes" placeholder="Anything else worth tracking — side bets, IOUs, running totals..."></textarea>
                </div>
            </details>
        </aside>
@@ -198,8 +213,8 @@

 <template id="chipLegendRowTemplate">
    <div class="chipLegendRow">
-        <input type="color" class="chipColorInput" />
-        <input type="number" class="chipValueInput" min="0" step="0.01" placeholder="value" />
+        <input type="color" class="chipColorInput" aria-label="Chip colour" />
+        <input type="number" class="chipValueInput" min="0" step="0.01" placeholder="value" aria-label="Chip value" />
        <button class="holdemBtn holdemBtnSmall holdemBtnDanger removeChipColorBtn">×</button>
    </div>
 </template>
@@ -225,6 +240,7 @@
        <span class="standingsIn"></span>
        <span class="standingsWon"></span>
        <span class="standingsNet"></span>
+        <span class="standingsCashOut"></span>
    </div>
 </template>

@@ -253,7 +269,7 @@
        </div>
        <div class="addChipsActions">
            <button id="addChipsConfirmBtn" class="holdemBtn holdemBtnAccent" type="button">Add to stack</button>
-            <button id="addChipsCancelBtn" class="holdemBtn holdemBtnGhost" type="button">Cancel</button>
+            <button id="addChipsCancelBtn" data-modal-close class="holdemBtn holdemBtnGhost" type="button">Cancel</button>
        </div>
    </div>
 </div>
@@ -263,7 +279,7 @@
        <div class="seatSheetGrip" aria-hidden="true"></div>
        <div class="rulingsHeader">
            <h2 id="rulingsTitle">Common rulings</h2>
-            <button id="closeRulingsBtn" class="holdemBtn holdemBtnSmall holdemBtnGhost" type="button">Done</button>
+            <button id="closeRulingsBtn" data-modal-close class="holdemBtn holdemBtnSmall holdemBtnGhost" type="button">Done</button>
        </div>

        <p class="rulingsIntro">
@@ -299,6 +315,68 @@
            </p>
        </section>

+        <section class="ruling">
+            <h3>A short all-in doesn't reopen the betting</h3>
+            <p>
+                Somebody shoving in less than a full raise — say $3 more when the last
+                raise was $8 — does not give the players behind them another go. Anyone
+                who has already acted owes the difference or folds; they don't get to
+                raise again because a short stack happened to land between them.
+            </p>
+            <p>
+                A player who hadn't acted yet keeps full rights and may still raise, and
+                the minimum raise stays measured off the last <em>full</em> raise, not
+                off the short one. The action bar follows this for you.
+            </p>
+        </section>
+
+        <section class="ruling">
+            <h3>Chips nobody called come back</h3>
+            <p>
+                Bet more than anyone was able to call and the excess is returned to you
+                before the showdown — it was never contested, so it isn't part of the
+                pot. The pot breakdown shows it as "uncalled" rather than pretending it's
+                a side pot you could win.
+            </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>
+                When a chopped pot won't divide evenly, the odd chip goes to the first
+                player left of the button, not to whoever the dealer happened to tick
+                first. Pot payouts here order the winners that way, so the leftover lands
+                on the right seat every time.
+            </p>
+        </section>
+
        <p class="rulingsSource">
            Follows the Tournament Directors Association rules, which most rooms and
            home games take their lead from.
@@ -314,7 +392,7 @@
            <span id="seatMenuSubtitle"></span>
        </div>
        <div id="seatMenuActions"></div>
-        <button id="seatMenuCancelBtn" class="holdemBtn holdemBtnGhost" type="button">Cancel</button>
+        <button id="seatMenuCancelBtn" data-modal-close class="holdemBtn holdemBtnGhost" type="button">Cancel</button>
    </div>
 </div>

@@ -324,7 +402,7 @@
        <div class="cardPickerHeader">
            <h2 id="cardPickerTitle"></h2>
            <button id="cardPickerClearBtn" class="holdemBtn holdemBtnSmall" type="button">Clear</button>
-            <button id="cardPickerCloseBtn" class="holdemBtn holdemBtnSmall holdemBtnGhost" type="button">Done</button>
+            <button id="cardPickerCloseBtn" data-modal-close class="holdemBtn holdemBtnSmall holdemBtnGhost" type="button">Done</button>
        </div>
        <div id="cardPickerSlots"></div>
        <div id="cardPickerGrid"></div>
@@ -340,17 +418,17 @@
        <h2 id="confirmTitle"></h2>
        <p id="confirmMessage"></p>
        <div class="confirmActions">
-            <button id="confirmCancelBtn" class="holdemBtn holdemBtnGhost" type="button">Cancel</button>
+            <button id="confirmCancelBtn" data-modal-close class="holdemBtn holdemBtnGhost" type="button">Cancel</button>
            <button id="confirmAcceptBtn" class="holdemBtn holdemBtnDanger" type="button">Confirm</button>
        </div>
    </div>
 </div>

 <div id="potWizardOverlay" hidden>
-    <div id="potWizardModal">
+    <div id="potWizardModal" role="dialog" aria-labelledby="potWizardTitle">
        <div class="potWizardHeader">
-            <h2>Resolve the Pot</h2>
-            <button id="closePotWizardBtn" class="holdemBtn holdemBtnGhost">✕</button>
+            <h2 id="potWizardTitle">Resolve the Pot</h2>
+            <button id="closePotWizardBtn" data-modal-close class="holdemBtn holdemBtnGhost">✕</button>
        </div>
        <div id="potWizardBody"></div>
    </div>
@@ -374,5 +452,6 @@
    <script src="~/js/casino/holdem/shortcuts.js?v=@ViewData["cssVersion"]"></script>
    <script src="~/js/casino/holdem/potWizard.js?v=@ViewData["cssVersion"]"></script>
    <script src="~/js/casino/holdem/handHistoryExport.js?v=@ViewData["cssVersion"]"></script>
+    <script src="~/js/casino/holdem/modal.js?v=@ViewData["cssVersion"]"></script>
    <script src="~/js/casino/holdem/main.js?v=@ViewData["cssVersion"]"></script>
 }
@@ -6,6 +6,148 @@ body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 }

+/* ---------- Touch ----------
+   A dealer runs this one-handed on a phone with players waiting, so a tap has to
+   register the instant their thumb lands.
+
+   `touch-action: manipulation` is the whole game here. Without it a mobile browser
+   holds every tap for ~300ms to see whether a second one is coming that would mean
+   "zoom in" — on top of which double-tapping a seat, which this tool uses for fold,
+   *is* the browser's zoom gesture, so the dealer's shortcut fights the page zooming
+   under their thumb. `manipulation` keeps panning and pinch-zoom and drops only the
+   double-tap-to-zoom, which is exactly the one we don't want.
+
+   The tap highlight goes with it: every control below gets a real pressed state, and
+   the browser's translucent grey rectangle on top of a designed one just looks like
+   a rendering artefact. Text selection goes too — a fast tap-and-hold on a seat
+   should open the seat menu, not raise a text-selection magnifier over the felt. */
+.holdemBtn,
+.seat,
+.dealerChip,
+.cardSlot,
+.linkBtn,
+.seatMenuBtn,
+.seatSheetClose,
+.pickerCard,
+.actionBtn,
+.raiseQuickBtn,
+.actionUndo,
+.toastAction,
+.toastClose,
+.potWizardChoice,
+.subPanel summary,
+button,
+[role="button"],
+input,
+select,
+textarea,
+a {
+    touch-action: manipulation;
+}
+
+/* The grey rectangle goes from every control, fields included — a tapped input
+   already shows a caret and a focus ring, which say the same thing more quietly. */
+.holdemBtn,
+.seat,
+.dealerChip,
+.cardSlot,
+.linkBtn,
+.seatMenuBtn,
+.seatSheetClose,
+.pickerCard,
+.actionBtn,
+.raiseQuickBtn,
+.actionUndo,
+.toastAction,
+.toastClose,
+.potWizardChoice,
+.subPanel summary,
+button,
+[role="button"],
+input,
+select,
+textarea,
+a {
+    -webkit-tap-highlight-color: transparent;
+}
+
+/* Text selection is switched off only on the things you press, never on the fields
+   you type into — a dealer editing a player's name still needs to select the text. */
+.holdemBtn,
+.seat,
+.dealerChip,
+.cardSlot,
+.linkBtn,
+.seatMenuBtn,
+.seatSheetClose,
+.pickerCard,
+.actionBtn,
+.raiseQuickBtn,
+.actionUndo,
+.toastAction,
+.toastClose,
+.potWizardChoice,
+.subPanel summary,
+button,
+[role="button"] {
+    -webkit-user-select: none;
+    user-select: none;
+}
+
+/* ---------- Pressed states ----------
+   Touch has no hover, so the press is the only feedback a dealer gets that the tap
+   landed — and with the grey highlight suppressed above, these have to carry it.
+   Everything presses the same way it would on a real table: down and slightly
+   darker, no travel time. */
+.holdemBtn:active:not(:disabled),
+.linkBtn:active:not(:disabled),
+.seatMenuBtn:active:not(:disabled),
+.seatSheetClose:active:not(:disabled),
+.toastAction:active,
+.toastClose:active,
+.potWizardChoice:active,
+.raiseQuickBtn:active:not(:disabled),
+.actionUndo:active:not(:disabled) {
+    transform: translateY(1px);
+    filter: brightness(1.25);
+    transition-duration: 0.04s;
+}
+
+.cardSlot:active,
+.pickerCard:active:not(:disabled),
+.dealerChip:active {
+    transform: translateY(1px) scale(0.97);
+    transition-duration: 0.04s;
+}
+
+/* The action bar already presses down; the brightness is what it was missing, and
+   it's the one place a dealer taps without looking. */
+.actionBtn:active:not(:disabled) {
+    filter: brightness(1.3);
+    transition-duration: 0.04s;
+}
+
+/* Seats deliberately have no `:active` rule. They already dip via `.seatPressing`,
+   which `pointerdown` adds in render.js — that fires earlier than `:active` resolves,
+   and, more importantly, a seat's `transform` is what positions it around the felt
+   (`translate(-50%, -50%)` plus its own left/top). A press state setting `transform`
+   would drop that translate and throw every pressed seat about 38px off its spot. */
+
+/* Nobody should get a stuck press state from a tap that turned into a scroll. */
+@media (prefers-reduced-motion: reduce) {
+    .holdemBtn:active:not(:disabled),
+    .linkBtn:active:not(:disabled),
+    .seatMenuBtn:active:not(:disabled),
+    .seatSheetClose:active:not(:disabled),
+    .cardSlot:active,
+    .pickerCard:active:not(:disabled),
+    .dealerChip:active,
+    .raiseQuickBtn:active:not(:disabled),
+    .actionUndo:active:not(:disabled) {
+        transform: none;
+    }
+}
+
 #holdemApp {
    max-width: 1400px;
    margin: 0 auto;
@@ -77,7 +219,11 @@ body {
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
    cursor: pointer;
-    transition: all 0.15s ease;
+    /* Named rather than `all`, so the focus ring isn't animated. With `all` the
+       outline faded in over 150ms, which on keyboard navigation reads as the ring
+       lagging a step behind the Tab key. Nothing else here changes. */
+    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease,
+                box-shadow 0.15s ease, color 0.15s ease, opacity 0.15s ease, filter 0.15s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
@@ -85,10 +231,12 @@ body {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
 }

-.holdemBtn:hover {
-    background: linear-gradient(180deg, #383838, #2a2a2a);
-    border-color: #4a4a4a;
-    transform: translateY(-1px);
+@media (hover: hover) {
+    .holdemBtn:hover {
+        background: linear-gradient(180deg, #383838, #2a2a2a);
+        border-color: #4a4a4a;
+        transform: translateY(-1px);
+    }
 }

 .holdemBtnAccent {
@@ -97,8 +245,10 @@ body {
    color: #ecffef;
 }

-.holdemBtnAccent:hover {
-    background: linear-gradient(180deg, #1a8a44, #0f602c);
+@media (hover: hover) {
+    .holdemBtnAccent:hover {
+        background: linear-gradient(180deg, #1a8a44, #0f602c);
+    }
 }

 .holdemBtnDanger {
@@ -107,8 +257,10 @@ body {
    color: #ffd6d6;
 }

-.holdemBtnDanger:hover {
-    background: linear-gradient(180deg, #572525, #401818);
+@media (hover: hover) {
+    .holdemBtnDanger:hover {
+        background: linear-gradient(180deg, #572525, #401818);
+    }
 }

 .holdemBtnGhost {
@@ -158,8 +310,10 @@ body {
    position: relative;
    width: 100%;
    padding-bottom: 72%;
+    margin: 0 auto;
 }

+
 #pokerTable {
    position: absolute;
    inset: 6%;
@@ -414,8 +568,19 @@ body {

 .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%;
@@ -428,13 +593,45 @@ body {
    z-index: 2;
    opacity: 0.32;
    transition: opacity 0.15s ease;
+    /* A dealer puck should look like a puck — small, sitting on the rim of its seat.
+       But tapping it hands the button to that seat and re-posts the blinds, and 22px
+       is half the 44px a fingertip needs. The hit area grows without the chip doing
+       so: the visual stays 22px and an invisible pad around it catches the tap.
+       Deliberately not centred on the chip — it's pushed down and left, away from the
+       neighbouring seat the chip juts towards, so the bigger target can't start
+       stealing taps meant for the seat next door. */
+    isolation: isolate;
+}
+
+.dealerChip::after {
+    content: "";
+    position: absolute;
+    /* 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;
 }

-.seat:hover .dealerChip,
 .dealerChip:focus-visible {
    opacity: 1;
 }

+@media (hover: hover) {
+    .seat:hover .dealerChip {
+        opacity: 1;
+    }
+}
+
 .dealerChip.active {
    background: radial-gradient(circle at 35% 30%, #ffe9a8, #f5d547 55%, #cba428 100%);
    border-color: #a9782f;
@@ -462,16 +659,32 @@ body {
    display: inline-block;
 }

+/* Both badges failed WCAG AA against their own gradients — measured at the worst
+   stop, the small blind was 3.52:1 and the big blind 2.15:1, in 9px bold text a
+   dealer is meant to read at a glance across a table.
+
+   The small blind keeps its blue and just darkens (4.77:1 at its worst stop). The
+   big blind flips to dark text on brighter gold (5.84:1), which is how a gold chip
+   is marked anyway and has the side benefit of making the two badges far easier to
+   tell apart at speed — light-on-blue against dark-on-gold, rather than two pale
+   labels differing only in hue. */
 .sbBadge {
    left: -6px;
-    background: linear-gradient(180deg, #3f82d1, #2b5fa0);
+    background: linear-gradient(180deg, #2f6cb5, #22508c);
    color: #eaf3ff;
 }

 .bbBadge {
    left: 22px;
-    background: linear-gradient(180deg, #dba13f, #b7791f);
-    color: #fff7e6;
+    background: linear-gradient(180deg, #e6ad4d, #c98a2a);
+    color: #241a05;
+}
+
+/* A blind the dealer named by hand rather than one the button handed out. Without
+   the ring the table just looks like it's put the blinds in the wrong place. */
+.blindBadge.blindManual {
+    outline: 1.5px solid #f2f2f2;
+    outline-offset: 1px;
 }

 /* ---------- Seat editor panel (sidebar form for the selected seat) ---------- */
@@ -567,9 +780,11 @@ body {
    transition: transform 0.12s ease, box-shadow 0.12s ease;
 }

-.cardSlot:hover {
-    transform: translateY(-1px);
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
+@media (hover: hover) {
+    .cardSlot:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
+    }
 }

 .cardSlot.cardRed {
@@ -743,8 +958,10 @@ body {
    cursor: pointer;
 }

-.linkBtn:hover {
-    color: #d8b46a;
+@media (hover: hover) {
+    .linkBtn:hover {
+        color: #d8b46a;
+    }
 }

 #rulingsOverlay {
@@ -870,6 +1087,13 @@ body {
    border-radius: 16px 16px 0 0;
    padding: 0.35rem 0.9rem calc(1rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.65);
+    /* This sheet had no height limit and didn't scroll, so on a phone held sideways
+       its first two actions — Fold and All-in, the two that matter — sat below the
+       bottom of the screen with no way to reach them. A dealer in landscape could
+       long-press a seat and then not fold it. */
+    max-height: 85vh;
+    overflow-y: auto;
+    overscroll-behavior: contain;
 }

 .seatMenuHeader {
@@ -909,9 +1133,11 @@ body {
    transition: all 0.12s ease;
 }

-.seatMenuBtn:hover {
-    border-color: #4a4a4a;
-    background: linear-gradient(180deg, #383838, #2a2a2a);
+@media (hover: hover) {
+    .seatMenuBtn:hover {
+        border-color: #4a4a4a;
+        background: linear-gradient(180deg, #383838, #2a2a2a);
+    }
 }

 .seatMenuBtn.menuDanger {
@@ -1037,8 +1263,10 @@ body {
    transition: transform 0.1s ease;
 }

-.pickerCard:hover:not(:disabled) {
-    transform: translateY(-1px);
+@media (hover: hover) {
+    .pickerCard:hover:not(:disabled) {
+        transform: translateY(-1px);
+    }
 }

 .pickerCard.cardRed {
@@ -1217,8 +1445,10 @@ body {
    font-size: 0.78rem;
 }

-.subPanel summary:hover {
-    color: #c5c5c5;
+@media (hover: hover) {
+    .subPanel summary:hover {
+        color: #c5c5c5;
+    }
 }

 .subPanelBody {
@@ -1289,9 +1519,22 @@ body {
    overflow-y: auto;
 }

+/* The sidebar is about 290px wide, and four numeric columns at a 4.5rem minimum
+   plus gaps come to 320px — so the name column, being the only flexible one, was
+   collapsing to *zero* and player names disappeared entirely. Names were already
+   down to 50px with four columns; adding the cash-out column finished them off.
+   Measured at 360, 390 and 1280 alike, since the sidebar is narrow at all of them.
+
+   So the table earns its columns instead of assuming them. Narrow: the player and
+   the two numbers a banker settles up from. Wide enough: the per-hand detail as
+   well. Everything is in the CSV export either way. */
+.standingsTableWrap {
+    container-type: inline-size;
+}
+
 .standingsRow {
    display: grid;
-    grid-template-columns: minmax(0, 1fr) auto auto auto;
+    grid-template-columns: minmax(4rem, 1fr) auto auto;
    gap: 0.5rem;
    align-items: baseline;
    padding: 0.3rem 0.1rem;
@@ -1302,7 +1545,78 @@ body {
 .standingsRow > span:not(:first-child) {
    text-align: right;
    font-variant-numeric: tabular-nums;
-    min-width: 4.5rem;
+    min-width: 3.6rem;
+}
+
+.standingsRow > .standingsName {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* The per-hand columns are detail: how the night's swings happened. They're the
+   first thing to go when there isn't room, because Net and Cash out are what the
+   banker is actually reading. */
+.standingsIn,
+.standingsWon,
+.standingsInHead,
+.standingsWonHead {
+    display: none;
+}
+
+@container (min-width: 30rem) {
+    .standingsRow {
+        grid-template-columns: minmax(5rem, 1fr) auto auto auto auto;
+    }
+
+    .standingsIn,
+    .standingsWon,
+    .standingsInHead,
+    .standingsWonHead {
+        display: block;
+    }
+}
+
+/* The settle-up column is the one a banker reads while counting out cash, so it
+   carries the weight the per-hand columns don't. */
+.standingsCashOut {
+    font-weight: 600;
+}
+
+/* ---------- Bank reconciliation ----------
+   Cash taken versus chips on the table. Every chip is a promise to pay cash for it
+   later, and if the chips outrun the box that promise can't be kept — which a dealer
+   otherwise discovers when the last two players cash out and there's nothing left. */
+.bankReconcile {
+    margin-top: 0.6rem;
+    padding: 0.55rem 0.6rem;
+    border: 1px solid #2f2f2f;
+    border-radius: 8px;
+    background: #151515;
+}
+
+.bankReconcileRow {
+    display: flex;
+    justify-content: space-between;
+    gap: 0.75rem;
+    font-size: 0.78rem;
+    color: #b8b8b8;
+    font-variant-numeric: tabular-nums;
+    padding: 0.12rem 0;
+}
+
+.bankReconcileVerdict {
+    margin: 0.4rem 0 0;
+    font-size: 0.74rem;
+    line-height: 1.35;
+}
+
+.bankReconcileVerdict.bankBalanced {
+    color: #7fc99a;
+}
+
+.bankReconcileVerdict.bankOff {
+    color: #f0b46a;
 }

 .standingsHeader {
@@ -1395,6 +1709,10 @@ body {
    padding: 0.5rem;
    resize: vertical;
    font-family: inherit;
+    /* iOS zooms the whole page in when you focus a field under 16px, and the dealer
+       is then pinching back out to see the table. Every other input here is already
+       at 16px; this one was the straggler. */
+    font-size: 16px;
 }

 /* ---------- Pot wizard ---------- */
@@ -1456,10 +1774,12 @@ body.hasActionBar #holdemSidebar {
    white-space: nowrap;
 }

-.actionUndo:hover {
-    background: #333;
-    border-color: #4f4f4f;
-    color: #eee;
+@media (hover: hover) {
+    .actionUndo:hover {
+        background: #333;
+        border-color: #4f4f4f;
+        color: #eee;
+    }
 }

 .actionStreet {
@@ -1600,9 +1920,11 @@ body.hasActionBar #holdemSidebar {
    transition: all 0.12s ease;
 }

-.actionBtn:hover {
-    border-color: #4a4a4a;
-    background: linear-gradient(180deg, #383838, #2a2a2a);
+@media (hover: hover) {
+    .actionBtn:hover {
+        border-color: #4a4a4a;
+        background: linear-gradient(180deg, #383838, #2a2a2a);
+    }
 }

 .actionBtn:active {
@@ -1728,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 {
@@ -1743,6 +2103,24 @@ body.hasActionBar #holdemSidebar {
    margin-top: 0.1rem;
 }

+/* Tournament-sized amounts. A number has no spaces to break on, so an amount too
+   wide for the 64px puck neither wraps nor ellipsises — it draws straight out over
+   the seat next to it. These step the size down so every digit stays on its own
+   puck. Shrinking rather than abbreviating is deliberate: "$1.25M" would fit more
+   comfortably, but a dealer reading a rounded stack off the felt is a worse failure
+   than a small one, and the exact figure is what the tool is for. */
+.seatPuckStack.puckAmountLong,
+.seatPuckTotal.puckAmountLong {
+    font-size: 0.5rem;
+    letter-spacing: -0.01em;
+}
+
+.seatPuckStack.puckAmountHuge,
+.seatPuckTotal.puckAmountHuge {
+    font-size: 0.44rem;
+    letter-spacing: -0.02em;
+}
+
 .blindsRow {
    display: flex;
    flex-wrap: wrap;
@@ -1784,8 +2162,13 @@ body.hasActionBar #holdemSidebar {

 /* Sit above the action bar rather than on top of it, so an Undo never covers the
   Fold button the dealer is reaching for. */
+/* Sit the toast directly on top of the action bar, whatever height it happens to be.
+   This was a hardcoded 9rem, which is roughly right for the bar at rest and wrong the
+   moment the raise pad opens — and on a short phone it put the toast, Undo button and
+   all, straight over the bottom seats of the table, so a tap meant for a player hit
+   "Undo" instead. */
 body.hasActionBar #toastHost {
-    bottom: calc(9rem + env(safe-area-inset-bottom, 0px));
+    bottom: calc(var(--actionBarHeight, 9rem) + 0.75rem + env(safe-area-inset-bottom, 0px));
 }

 .toast {
@@ -1831,8 +2214,10 @@ body.hasActionBar #toastHost {
    cursor: pointer;
 }

-.toastAction:hover {
-    background: rgba(216, 180, 106, 0.22);
+@media (hover: hover) {
+    .toastAction:hover {
+        background: rgba(216, 180, 106, 0.22);
+    }
 }

 .toastClose {
@@ -1846,11 +2231,17 @@ body.hasActionBar #toastHost {
    font-size: 0.8rem;
    font-family: inherit;
    cursor: pointer;
+    /* Same treatment as the dealer puck: a 30px dismiss button in a toast a dealer is
+       swatting away mid-hand, given a fingertip's worth of hit area without becoming
+       a bigger piece of furniture. */
+    position: relative;
 }

-.toastClose:hover {
-    background: #333;
-    color: #ddd;
+@media (hover: hover) {
+    .toastClose:hover {
+        background: #333;
+        color: #ddd;
+    }
 }

 /* ---------- Confirmation dialog ---------- */
@@ -1912,7 +2303,12 @@ body.hasActionBar #toastHost {
    display: flex;
    align-items: center;
    justify-content: center;
-    z-index: 50;
+    /* Every other sheet in here sits at 90-98; this one was at 50, underneath both
+       the action bar (55) and the toast (80). So the bar drew on top of the dialog
+       that pays people — in landscape one of its inputs was completely covered by
+       the Fold button — and a toast could sit over "Confirm Winner(s)". It's the odd
+       one out rather than a deliberate choice, and it joins the others. */
+    z-index: 95;
    padding: 1.5rem;
 }

@@ -1926,8 +2322,13 @@ body.hasActionBar #toastHost {
    border-radius: 10px;
    width: 100%;
    max-width: 480px;
-    max-height: 85vh;
+    /* 85vh is most of a 390px-tall landscape window, and the action bar is fixed over
+       the bottom of it — so the last of the wizard sat underneath the bar and its
+       controls couldn't be tapped. Leaving the bar's own height out of the budget
+       keeps the whole dialog above it. */
+    max-height: calc(85vh - var(--actionBarHeight, 0px));
    overflow-y: auto;
+    overscroll-behavior: contain;
    padding: 1.2rem 1.4rem 1.6rem;
 }

@@ -1985,9 +2386,11 @@ body.hasActionBar #toastHost {
    transition: border-color 0.12s ease, background 0.12s ease;
 }

-.potWizardChoice:hover {
-    border-color: #555;
-    background: #191919;
+@media (hover: hover) {
+    .potWizardChoice:hover {
+        border-color: #555;
+        background: #191919;
+    }
 }

 .potWizardChoice input {
@@ -2110,8 +2513,13 @@ body.hasActionBar #toastHost {
   seat looks like it did nothing. Inset the ring by half a puck, and float the
   editor up as a bottom sheet over the table. */
@media (max-width: 700px) {
+    /* The bottom padding has to clear the fixed action bar, plus room for a toast to
+       sit above it. Without it the table just carries on underneath the bar and the
+       lower seats of the oval are behind the Fold button — measured at 360x640, where
+       62px of felt was covered. `--actionBarHeight` is published by actionBar.js and
+       is 0 when no hand is running, so the page doesn't hold a gap it doesn't need. */
    #holdemApp {
-        padding: 1rem 0.75rem 2rem;
+        padding: 1rem 0.75rem calc(var(--actionBarHeight, 0px) + 5rem + env(safe-area-inset-bottom, 0px));
    }

    #holdemHeader {
@@ -2383,3 +2791,258 @@ body.hasActionBar #toastHost {
        justify-content: center;
    }
 }
+
+/* ---------- A phone on its side ----------
+   Deliberately last in the file. The felt is an aspect-ratio box whose height comes
+   from `padding-bottom`, and the `max-width: 900px` block above re-sets that to 100%
+   — so a landscape rule placed any earlier is overridden at equal specificity and
+   does nothing, which is exactly what happened on the first attempt.
+
+   Landscape is where this layout falls apart worst: sized from width, the table came
+   out 765px tall in a 390px-tall window, putting six of the nine seats below the fold
+   and the rest behind the action bar. Sizing it from the height that's actually left
+   makes every seat reachable without scrolling. The table ends up small, but a seat
+   you have to go hunting for is worse than a seat that's small. */
+@media (orientation: landscape) and (max-height: 560px) {
+    /* Set outright rather than via padding-bottom: a percentage padding resolves
+       against the containing block's width, not the element's own, so narrowing the
+       wrap on its own left it full height regardless. */
+    #pokerTableWrap {
+        /* 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;
+    }
+
+    /* The header ate 148px of a 390px-tall window, which was most of the reason the
+       table started below the fold. Here it only needs to be a title bar. */
+    #holdemHeader {
+        margin-bottom: 0.4rem;
+        gap: 0.35rem;
+    }
+
+    #holdemHeader h1 {
+        font-size: 1.05rem;
+        padding-bottom: 0.15rem;
+    }
+
+    .holdemSubtitle {
+        display: none;
+    }
+
+    /* There's no vertical room left, but plenty either side of a table this narrow,
+       so the toast moves out of the middle and sits beside the felt instead of on
+       top of it. Centred, it was covering up to six seats at once — and it carries
+       an Undo button, so a tap meant for a player was landing on "Undo". */
+    body.hasActionBar #toastHost,
+    #toastHost {
+        left: auto;
+        right: 0.5rem;
+        max-width: 17rem;
+        bottom: calc(var(--actionBarHeight, 0px) + 0.5rem + env(safe-area-inset-bottom, 0px));
+    }
+
+    /* Nine seats around a table this small overlap each other, so they shrink to suit. */
+    .seat {
+        width: 62px;
+        min-height: 40px;
+    }
+
+}
+
+/* ---------- Short phones, upright ----------
+   A 640px-tall screen spends ~150px on the header before the felt even starts, which
+   left the bottom of the table sitting behind the action bar until you scrolled. The
+   header carries no information a dealer needs mid-hand, so it gives the space up. */
+@media (max-height: 700px) {
+    /* Nowhere on a screen this short is the toast clear of both the table and the
+       action bar, so it overlaps the one that costs least: it sits over the bar's
+       status line, which is information a dealer can re-read a second later, rather
+       than over the seats and buttons, which are things they need to hit. Overlapping
+       a readout beats covering a control. */
+    body.hasActionBar #toastHost {
+        bottom: calc(var(--actionBarHeight, 0px) - 3.1rem);
+    }
+
+    .toast {
+        padding: 0.5rem 0.7rem;
+        font-size: 0.78rem;
+    }
+}
+
+@media (max-width: 700px) and (max-height: 700px) {
+    #holdemHeader {
+        margin-bottom: 0.5rem;
+        gap: 0.4rem;
+    }
+
+    #holdemHeader h1 {
+        font-size: 1.15rem;
+        padding-bottom: 0.2rem;
+    }
+
+    .holdemSubtitle {
+        display: none;
+    }
+}
+
+/* ---------- Keyboard focus ----------
+   Three focus rules existed for the whole tool, so tabbing through it relied on
+   whatever ring the browser draws by default — which on these dark, custom-painted
+   controls is close to invisible. `:focus-visible` rather than `:focus` keeps it to
+   keyboard use: a dealer tapping Fold shouldn't be left with a ring on it. */
+.holdemBtn:focus-visible,
+.linkBtn:focus-visible,
+.seatMenuBtn:focus-visible,
+.seatSheetClose:focus-visible,
+.pickerCard:focus-visible,
+.actionBtn:focus-visible,
+.raiseQuickBtn:focus-visible,
+.actionUndo:focus-visible,
+.toastAction:focus-visible,
+.toastClose:focus-visible,
+.potWizardChoice:focus-visible,
+.cardSlot:focus-visible,
+.subPanel summary:focus-visible,
+.seat:focus-visible,
+button:focus-visible,
+[role="button"]:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible {
+    outline: 2px solid #7fc4ff;
+    outline-offset: 2px;
+    /* The ring has to sit above the neighbouring seat that overlaps this one. */
+    position: relative;
+    z-index: 3;
+}
+
+/* A sheet with nothing focusable in it takes focus itself so its title is read out.
+   That shouldn't paint a ring around the whole panel. */
+[role="dialog"]:focus,
+[role="alertdialog"]:focus {
+    outline: none;
+}
+
+/* ---------- Fields on a tablet ----------
+   The 16px minimum and the 44px touch targets were both written into the phone
+   media query, so every iPad size missed them — measured at 768, 834 and 1024 wide,
+   where all ten setup fields sat at 13.3px. iOS zooms the page whenever a field
+   under 16px takes focus, so a dealer on an iPad was getting the table zoomed every
+   time they touched the blind amount, then pinching back out. The reason for the
+   rule was never "narrow screen", it was "iOS", and an iPad is iOS.
+
+   Font size applies everywhere now — 13.3px was small for a settings field on a
+   desktop anyway. The touch sizing keys off `hover: none`, which is what actually
+   distinguishes a finger from a mouse; a tablet gets thumb-sized controls and a
+   desktop keeps its compact sidebar. */
+.seatEditorForm input:not([type="checkbox"]):not([type="color"]),
+.panelBody input:not([type="checkbox"]):not([type="color"]),
+.subPanelBody input:not([type="checkbox"]):not([type="color"]),
+.panelBody select,
+.panelBody textarea {
+    font-size: 16px;
+}
+
+@media (hover: none) {
+    .seatEditorForm input:not([type="checkbox"]):not([type="color"]),
+    .panelBody input:not([type="checkbox"]):not([type="color"]),
+    .subPanelBody input:not([type="checkbox"]):not([type="color"]),
+    .panelBody select {
+        min-height: 44px;
+        padding: 0.4rem 0.6rem;
+    }
+}
+
+.toastClose::after {
+    content: "";
+    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;
+}
@@ -9,6 +9,58 @@ body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 }

+/* Same touch handling as the dealer table — see the note there. This page is the one
+   a dealer opens mid-hand to chop a pot, so the ~300ms the browser spends deciding
+   whether a tap was a double-tap-to-zoom is the last thing it needs. */
+button,
+[role="button"],
+input,
+select,
+textarea,
+a {
+    touch-action: manipulation;
+}
+
+button,
+[role="button"],
+input,
+select,
+textarea,
+a {
+    -webkit-tap-highlight-color: transparent;
+}
+
+/* Not on the fields — a dealer typing a pot amount still needs to select it. */
+button,
+[role="button"] {
+    -webkit-user-select: none;
+    user-select: none;
+}
+
+.clearPotBtn:active:not(:disabled),
+.choiceChip:active:not(:disabled),
+.stepBtn:active:not(:disabled),
+.splitBtn:active:not(:disabled),
+.splitBtnGhost:active:not(:disabled),
+.unevenFoldBtn:active:not(:disabled),
+.unevenRemoveBtn:active:not(:disabled) {
+    transform: translateY(1px);
+    filter: brightness(1.25);
+    transition-duration: 0.04s;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .clearPotBtn:active:not(:disabled),
+    .choiceChip:active:not(:disabled),
+    .stepBtn:active:not(:disabled),
+    .splitBtn:active:not(:disabled),
+    .splitBtnGhost:active:not(:disabled),
+    .unevenFoldBtn:active:not(:disabled),
+    .unevenRemoveBtn:active:not(:disabled) {
+        transform: none;
+    }
+}
+
 #splitApp {
    max-width: 480px;
    margin: 0 auto;
@@ -336,9 +388,11 @@ body {
    cursor: pointer;
 }

-.clearPotBtn:hover {
-    background: #333;
-    color: #ddd;
+@media (hover: hover) {
+    .clearPotBtn:hover {
+        background: #333;
+        color: #ddd;
+    }
 }

 /* ---------- Tap targets ---------- */
@@ -364,9 +418,11 @@ body {
    transition: all 0.15s ease;
 }

-.choiceChip:hover {
-    border-color: #4a4a4a;
-    background: linear-gradient(180deg, #383838, #2a2a2a);
+@media (hover: hover) {
+    .choiceChip:hover {
+        border-color: #4a4a4a;
+        background: linear-gradient(180deg, #383838, #2a2a2a);
+    }
 }

 .choiceChip.selected {
@@ -401,8 +457,10 @@ body {
    cursor: pointer;
 }

-.stepBtn:hover {
-    background: #333;
+@media (hover: hover) {
+    .stepBtn:hover {
+        background: #333;
+    }
 }

 .waysReadout {
@@ -439,9 +497,11 @@ body {
    transition: all 0.15s ease;
 }

-.splitBtn:hover {
-    border-color: #4a4a4a;
-    background: linear-gradient(180deg, #383838, #2a2a2a);
+@media (hover: hover) {
+    .splitBtn:hover {
+        border-color: #4a4a4a;
+        background: linear-gradient(180deg, #383838, #2a2a2a);
+    }
 }

 .splitBtnGhost {
@@ -456,6 +516,15 @@ body {
    text-align: center;
 }

+/* This footnote names a control the dealer is being told to reach for, so the name
+   itself has to be readable — it was 3.39:1 at its worst, inheriting the muted grey
+   the surrounding sentence is deliberately set in. Emphasised text carrying the
+   instruction gets its own colour rather than the aside's. */
+.splitFootnote strong {
+    color: #a8a8a8;
+    font-weight: 600;
+}
+
 .splitFootnote a {
    color: #a9782f;
 }
@@ -11,10 +11,38 @@ const ActionBar = {
    mount(state, hooks) {
        this.state = state;
        this.hooks = hooks;
+        this.watchHeight();
        this.render();
    },

-    // Anything to act on? A hand with nobody dealt in doesn't get a bar.
+    // The bar is fixed to the bottom of the screen, so everything else has to know how
+    // tall it is or the table simply runs underneath it — on a 640px-tall phone the
+    // bottom seats of the oval were sitting behind the Fold button. Its height isn't a
+    // constant either: opening the raise pad grows it. Publishing the measured height
+    // as a custom property lets the layout and the toast both stay clear of it without
+    // anyone guessing a number.
+    watchHeight() {
+        const host = document.getElementById("actionBar");
+        if (!host || this.heightWatcher) return;
+
+        const publish = () => {
+            const visible = !host.hidden;
+            const height = visible ? host.getBoundingClientRect().height : 0;
+            document.documentElement.style.setProperty("--actionBarHeight", `${Math.round(height)}px`);
+        };
+
+        if (typeof ResizeObserver === "function") {
+            this.heightWatcher = new ResizeObserver(publish);
+            this.heightWatcher.observe(host);
+        }
+        window.addEventListener("resize", publish);
+        window.addEventListener("orientationchange", publish);
+        publish();
+    },
+
+    // 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;
    },
@@ -27,6 +55,7 @@ const ActionBar = {
        if (!this.isRunning()) {
            host.hidden = true;
            document.body.classList.remove("hasActionBar");
+            document.documentElement.style.setProperty("--actionBarHeight", "0px");
            this.stopTankTimer();
            this.tankSeatIndex = null;
            return;
@@ -39,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());
@@ -292,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";
@@ -333,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);

@@ -349,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;
    },

@@ -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);
    },
@@ -39,11 +64,16 @@ const Betting = {
        return this.round((Number(player.amountOverride) || 0) + this.committed(player));
    },

+    // Never below zero. A seat can't have negative chips in front of it, and a typo in
+    // the stack field used to come back as-is — which then flowed into putIn(), where
+    // `Math.min(amount, -50)` moves a negative amount and *adds* chips to the table.
    stackOf(state, player) {
        const own = player.stack;
-        if (own !== null && own !== undefined && String(own).trim() !== "") return this.round(own);
+        if (own !== null && own !== undefined && String(own).trim() !== "") {
+            return Math.max(0, this.round(own));
+        }
        const fallback = Number(state.defaultStack);
-        return Number.isNaN(fallback) ? 0 : this.round(fallback);
+        return Number.isNaN(fallback) ? 0 : Math.max(0, this.round(fallback));
    },

    toCall(state, player) {
@@ -148,14 +178,33 @@ const Betting = {
        const delta = this.round(target - this.committed(player));
        const moved = this.putIn(state, index, delta);
        const newBet = this.committed(player);
+        const previousBet = state.currentBet || 0;
+
+        if (newBet > previousBet) {
+            const increase = this.round(newBet - previousBet);
+            // What a full raise would have had to be: at least as much again as the
+            // last one, or the big blind if there hasn't been a raise yet.
+            const fullRaise = this.round(state.lastRaiseSize || state.bigBlind || 0);
+            const isFullRaise = increase >= fullRaise - this.EPSILON_CHIPS;

-        if (newBet > (state.currentBet || 0)) {
-            state.lastRaiseSize = this.round(newBet - (state.currentBet || 0));
            state.currentBet = newBet;
-            // A raise reopens the action: everyone else owes a response again.
-            state.seats.forEach((p, i) => {
-                if (i !== index && p.inHand && !p.folded) p.hasActed = false;
-            });
+
+            if (isFullRaise) {
+                state.lastRaiseSize = increase;
+                // A real raise reopens the action: everyone else owes a response again.
+                state.seats.forEach((p, i) => {
+                    if (i !== index && p.inHand && !p.folded) p.hasActed = false;
+                });
+            }
+            // Otherwise this is a short all-in — somebody with less than a full raise
+            // left shoving it in. The most misread rule in poker: it does *not* reopen
+            // the betting to anyone who has already acted. They owe the difference or
+            // they fold; they don't get to raise again because a short stack happened
+            // to be between them. Players yet to act keep their full rights, which
+            // they do here because their hasActed is already false.
+            //
+            // lastRaiseSize deliberately isn't lowered either, or the next legal raise
+            // would be computed off the short amount and come out too small.
        }

        player.hasActed = true;
@@ -243,13 +292,45 @@ const Betting = {
        return this.liveSeats(state).length > 1 && !this.canStillBet(state);
    },

+    // True while nothing has happened in this hand except the blinds going in. Up to
+    // that point the dealer can still move the button or rename the blinds and have
+    // it cost nothing — which is the state a home game spends a lot of time in,
+    // arguing about whose turn it is before the cards come out.
+    onlyBlindsIn(state) {
+        return (state.street || "preflop") === "preflop" && state.seats.every(p => !p.hasActed);
+    },
+
+    // Pulls the blinds back off the table and posts them again from wherever the
+    // button and the blind assignment now say they belong. Refunding first is what
+    // keeps the chip count straight when the button gets passed round three or four
+    // times before anybody is happy with it.
+    repostBlinds(state) {
+        state.seats.forEach(player => {
+            const back = this.committed(player);
+            if (back > 0) player.stack = this.round(this.stackOf(state, player) + back);
+            player.committed = 0;
+            player.hasActed = false;
+        });
+        this.beginHand(state);
+    },
+
    // 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;

+        // Position is read off the button all through the hand, so it has to be on
+        // somebody before the blinds are worked out — not on the empty seat 1 a
+        // brand-new table starts on.
+        HoldemState.ensureButtonOnPlayer(state);
+
        state.seats.forEach(player => {
            player.committed = 0;
            player.hasActed = false;
@@ -15,6 +15,10 @@ const HandHistoryExport = {
        }
    },

+    // Money columns go in as bare numbers. Written as "$1,250,000.00" they import as
+    // text, so the one thing anybody opens this file to do — total a column and see
+    // who owes what — doesn't work without cleaning every cell first. The commas were
+    // quoted correctly, so the file parsed; it just wouldn't add up.
    toCsv(handHistory, standings = []) {
        const rows = [["Hand #", "Time", "Pot", "Payouts"]];
        // handHistory is stored newest-first; the export reads better oldest-first.
@@ -25,7 +29,7 @@ const HandHistoryExport = {
            rows.push([
                entry.handNumber,
                this.formatTimestamp(entry.timestamp),
-                Money.format(entry.pot),
+                Money.forSheet(entry.pot),
                payouts,
            ]);
        });
@@ -41,12 +45,12 @@ const HandHistoryExport = {
            standings.forEach(row => {
                rows.push([
                    row.name,
-                    Money.format(row.in),
-                    Money.format(row.won),
-                    Money.formatSigned(row.net),
-                    Money.format(row.boughtIn || 0),
-                    Money.format(row.chipsNow || 0),
-                    Money.formatSigned(row.cashPosition || 0),
+                    Money.forSheet(row.in),
+                    Money.forSheet(row.won),
+                    Money.forSheet(row.net),
+                    Money.forSheet(row.boughtIn || 0),
+                    Money.forSheet(row.chipsNow || 0),
+                    Money.forSheet(row.cashPosition || 0),
                ]);
            });
        }
@@ -1,6 +1,10 @@
 document.addEventListener("DOMContentLoaded", () => {
    const state = HoldemState.load();

+    // Focus, Tab-trapping and Escape for every overlay, wired once by watching the
+    // `hidden` attribute they all already toggle.
+    Modal.mount();
+
    // Undo works by swapping the whole table back to a snapshot. `state` is handed out
    // by reference to every module at mount time, so it has to be refilled in place —
    // reassigning the variable would leave the renderer and the betting bar pointing at
@@ -52,6 +56,7 @@ document.addEventListener("DOMContentLoaded", () => {
        },

        onSeatLongPress: index => SeatMenu.open(state, seatMenuHooks, index),
+        onGiveButton: index => seatMenuHooks.makeDealer(index),
    };

    const seatMenuHooks = {
@@ -59,13 +64,79 @@ document.addEventListener("DOMContentLoaded", () => {
        unfold: index => seatAction(index, `${nameOf(index)} is back in the hand.`, p => { p.folded = false; }),
        allIn: index => seatAction(index, `${nameOf(index)} is all-in.`, () => Betting.allIn(state, index)),
        toggleDealtIn: index => {
-            const dealtIn = state.seats[index].inHand;
-            seatAction(index, dealtIn ? `${nameOf(index)} sits out.` : `${nameOf(index)} is dealt in.`, p => {
+            const player = state.seats[index];
+            const dealtIn = player.inHand;
+            const handRunning = !Betting.onlyBlindsIn(state) || Betting.potSoFar(state) > 0;
+            const alreadyIn = Betting.handTotal(player);
+
+            // Somebody walking away mid-hand doesn't get their chips back — they're
+            // dead money the winner collects. Say so, because the pot total pointedly
+            // does not go down and a dealer needs to know that's deliberate.
+            const message = dealtIn
+                ? (alreadyIn > 0
+                    ? `${nameOf(index)} is out — their ${Money.format(alreadyIn)} stays in the pot.`
+                    : `${nameOf(index)} sits out.`)
+                : (handRunning
+                    ? `${nameOf(index)} is in from the next hand.`
+                    : `${nameOf(index)} is dealt in.`);
+
+            seatAction(index, message, p => {
                p.inHand = !dealtIn;
-                if (!p.inHand) p.folded = false;
+                if (!p.inHand) {
+                    // Their chips stay put; only the fold flag is cleared, since being
+                    // out of the hand already covers not winning it.
+                    p.folded = false;
+                    if (state.actingSeatIndex === index) Betting.passAction(state, index);
+                } else if (handRunning) {
+                    // Joining a hand already in progress means sitting this one out —
+                    // you can't buy into a pot you haven't been paying for. `folded`
+                    // is exactly that state, and the next hand clears it.
+                    p.folded = true;
+                }
            });
        },
-        makeDealer: index => seatAction(index, `Button on ${nameOf(index)}.`, () => { state.dealerSeatIndex = index; }),
+
+        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);
+            const other = which === "sb" ? blinds.bbIndex : blinds.sbIndex;
+            // Naming one blind pins the other where it already is, so the dealer only
+            // has to state the part they're changing. If that would land both on one
+            // player, the other blind moves to the next seat along.
+            let partner = other !== null && other !== undefined && other !== index
+                ? other
+                : Betting.nextLiveIndex(state, index);
+            if (partner === index || partner === null) partner = Betting.nextLiveIndex(state, index);
+
+            const label = which === "sb" ? "small blind" : "big blind";
+            seatAction(index, `${nameOf(index)} posts the ${label}.`, () => {
+                state.blindOverride = which === "sb"
+                    ? { sbIndex: index, bbIndex: partner }
+                    : { sbIndex: partner, bbIndex: index };
+                if (Betting.onlyBlindsIn(state)) Betting.repostBlinds(state);
+            });
+        },
+
+        clearBlindOverride: () => seatAction(state.dealerSeatIndex, "Blinds follow the button again.", () => {
+            state.blindOverride = null;
+            if (Betting.onlyBlindsIn(state)) Betting.repostBlinds(state);
+        }),
+
        editSeat: index => Render.toggleSeatEditor(index),

        addChips: index => AddChips.open(state, index, (seatIndex, amount) => {
@@ -96,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);
            });
        });
    };
@@ -159,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"),
    });
@@ -255,17 +330,35 @@ document.addEventListener("DOMContentLoaded", () => {
        Render.renderAll();
    });

-    document.getElementById("nextHandBtn").addEventListener("click", () => {
+    document.getElementById("nextHandBtn").addEventListener("click", async () => {
+        // Moving on wipes every seat's contribution, so an unresolved pot is simply
+        // destroyed — measured at a four-handed table, pressing this with $8 in the
+        // middle took the table from 800 chips to 792, and the toast said nothing
+        // about it. Chips only ever leave this tool because a dealer meant them to.
+        const unresolved = HoldemState.unresolvedContributions(state);
+
+        if (unresolved > Betting.EPSILON_CHIPS) {
+            const ok = await Dialog.confirm({
+                title: `Throw away ${Money.format(unresolved)}?`,
+                message: "There's still money in the middle from this hand. Starting the next one takes it off the table without paying anybody — use Resolve Pot if somebody won it.",
+                confirmLabel: "Throw it away",
+                danger: true,
+            });
+            if (!ok) return;
+        }
+
        // startNextHand moves the button on by one; say where it landed so the
        // dealer can confirm the rotation without hunting for the badge.
        const nextDealer = HoldemState.nextSeatIndex(state, state.dealerSeatIndex, 1);
        const where = state.dedicatedDealer
            ? `small blind on seat ${HoldemState.nextSeatIndex(state, nextDealer, 1) + 1}`
            : `button on seat ${nextDealer + 1}`;
+        const discarded = unresolved > Betting.EPSILON_CHIPS
+            ? ` ${Money.format(unresolved)} taken off the table.`
+            : "";

-        runUndoable(`Next hand — ${where}. Blinds posted.`, () => {
+        runUndoable(`Next hand — ${where}. Seat the table, then deal.${discarded}`, () => {
            HoldemState.startNextHand(state);
-            Betting.beginHand(state);
        });
    });

@@ -310,6 +403,7 @@ document.addEventListener("DOMContentLoaded", () => {
        if (e.key === "Enter") AddChips.confirm();
    });

+    // Escape is Modal's job now, for this sheet and the five others that never had it.
    const rulingsOverlay = document.getElementById("rulingsOverlay");
    const closeRulings = () => { rulingsOverlay.hidden = true; };
    document.getElementById("openRulingsBtn").addEventListener("click", () => { rulingsOverlay.hidden = false; });
@@ -317,9 +411,6 @@ document.addEventListener("DOMContentLoaded", () => {
    rulingsOverlay.addEventListener("click", e => {
        if (e.target === rulingsOverlay) closeRulings();
    });
-    document.addEventListener("keydown", e => {
-        if (e.key === "Escape" && !rulingsOverlay.hidden) closeRulings();
-    });

    document.getElementById("seatMenuCancelBtn").addEventListener("click", () => SeatMenu.close());
    document.getElementById("seatMenuOverlay").addEventListener("click", e => {
@@ -0,0 +1,147 @@
+// Keyboard and screen-reader behaviour for every overlay in the tool, in one place.
+//
+// There are six of them — seat menu, card picker, add chips, rulings, pot wizard,
+// confirm — opened and closed by five different modules, and each one was missing
+// the same three things: focus never moved into the dialog, Tab walked straight out
+// of it into the page behind the scrim, and Escape did nothing (only the rulings
+// sheet handled it). Measured before this: 0 of 5 moved focus in, 5 of 5 leaked Tab,
+// 1 of 5 closed on Escape.
+//
+// Rather than patch that into five modules, this watches the `hidden` attribute every
+// overlay already toggles. Nothing else had to change, and an overlay added later
+// gets the same behaviour without anyone remembering to wire it up — which is the
+// failure this is fixing in the first place.
+const Modal = {
+    // `:not([hidden])` matters — a sheet that is itself hidden inside an open overlay
+    // must not be a Tab stop.
+    FOCUSABLE: [
+        "a[href]",
+        "button:not([disabled])",
+        'input:not([disabled]):not([type="hidden"])',
+        "select:not([disabled])",
+        "textarea:not([disabled])",
+        '[tabindex]:not([tabindex="-1"])',
+    ].join(","),
+
+    open: [],
+
+    mount() {
+        document.querySelectorAll('[id$="Overlay"]').forEach(overlay => this.watch(overlay));
+        // Capture phase: the dialog gets first refusal on Escape and Tab, before any
+        // table-level shortcut sees them.
+        document.addEventListener("keydown", e => this.onKeyDown(e), true);
+    },
+
+    watch(overlay) {
+        const sync = () => {
+            const isOpen = !overlay.hidden;
+            const known = this.open.some(entry => entry.overlay === overlay);
+            if (isOpen && !known) this.onOpened(overlay);
+            else if (!isOpen && known) this.onClosed(overlay);
+        };
+        new MutationObserver(sync).observe(overlay, { attributes: true, attributeFilter: ["hidden"] });
+        sync();
+    },
+
+    sheetOf(overlay) {
+        return overlay.querySelector('[role="dialog"], [role="alertdialog"]') || overlay.firstElementChild || overlay;
+    },
+
+    focusableIn(overlay) {
+        return [...overlay.querySelectorAll(this.FOCUSABLE)].filter(el => {
+            if (el.closest("[hidden]")) return false;
+            const rect = el.getBoundingClientRect();
+            return rect.width > 0 && rect.height > 0;
+        });
+    },
+
+    onOpened(overlay) {
+        const sheet = this.sheetOf(overlay);
+        // aria-modal is only true while the thing is actually open, so it's set here
+        // rather than baked into the markup.
+        if (sheet) sheet.setAttribute("aria-modal", "true");
+
+        this.open.push({ overlay, returnFocus: document.activeElement });
+
+        // Focus the first real control. A dialog that leaves focus on the button
+        // behind it reads, to a screen reader, as though nothing happened at all.
+        // Content-only sheets get focus on the sheet so the title is announced.
+        const focusable = this.focusableIn(overlay);
+        const target = focusable[0];
+        if (target) {
+            target.focus({ preventScroll: true });
+        } else if (sheet) {
+            if (!sheet.hasAttribute("tabindex")) sheet.setAttribute("tabindex", "-1");
+            sheet.focus({ preventScroll: true });
+        }
+    },
+
+    onClosed(overlay) {
+        const index = this.open.findIndex(entry => entry.overlay === overlay);
+        if (index === -1) return;
+        const [entry] = this.open.splice(index, 1);
+
+        const sheet = this.sheetOf(overlay);
+        if (sheet) sheet.removeAttribute("aria-modal");
+
+        // Put the dealer back where they were. Without this, closing the pot wizard
+        // drops focus to the top of the document and the next Tab starts from the
+        // page header.
+        const back = entry.returnFocus;
+        if (back && back.isConnected && typeof back.focus === "function") {
+            back.focus({ preventScroll: true });
+        }
+    },
+
+    topmost() {
+        return this.open.length ? this.open[this.open.length - 1] : null;
+    },
+
+    // Escape presses the dialog's own cancel/close button rather than just hiding the
+    // overlay, so whatever that button does — resolving the confirm promise, clearing
+    // the add-chips draft — still happens. Only if there isn't one does it hide the
+    // overlay directly.
+    dismiss(overlay) {
+        const closer = overlay.querySelector("[data-modal-close]");
+        if (closer) closer.click();
+        else overlay.hidden = true;
+    },
+
+    onKeyDown(event) {
+        const top = this.topmost();
+        if (!top) return;
+
+        if (event.key === "Escape") {
+            event.preventDefault();
+            event.stopPropagation();
+            this.dismiss(top.overlay);
+            return;
+        }
+
+        if (event.key !== "Tab") return;
+
+        // Keep Tab inside the dialog. Everything behind the scrim is unreachable by
+        // mouse, so letting the keyboard wander back there is a trap with no way out.
+        const focusable = this.focusableIn(top.overlay);
+        if (focusable.length === 0) {
+            event.preventDefault();
+            return;
+        }
+
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        const active = document.activeElement;
+
+        if (event.shiftKey && (active === first || !top.overlay.contains(active))) {
+            event.preventDefault();
+            last.focus({ preventScroll: true });
+        } else if (!event.shiftKey && (active === last || !top.overlay.contains(active))) {
+            event.preventDefault();
+            first.focus({ preventScroll: true });
+        }
+    },
+};
+
+if (typeof module !== "undefined" && module.exports) {
+    module.exports = Modal;
+}
@@ -25,9 +25,27 @@ const Money = {
        return this.toCents(amount) / 100;
    },

+    // Cents only when there are cents.
+    //
+    // A chip game deals in whole numbers nearly all the time, and a trailing ".00"
+    // is two characters that say nothing — measured at ~22px, against the 64px a
+    // seat puck has to show a stack in. "$1,250,000.00" doesn't fit and wraps;
+    // "$1,250,000" does. Amounts that genuinely carry cents still show them, so a
+    // 25c-blind game reads exactly as it did.
    format(amount) {
        const value = Number(amount) || 0;
-        return `$${value.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+        const hasCents = this.toCents(value) % 100 !== 0;
+        return `$${value.toLocaleString(undefined, {
+            minimumFractionDigits: hasCents ? 2 : 0,
+            maximumFractionDigits: 2,
+        })}`;
+    },
+
+    // The same amount for a spreadsheet rather than for a person: no currency symbol
+    // and no thousands separators, because those are what make a column of money
+    // import as text and refuse to add up.
+    forSheet(amount) {
+        return (this.toCents(amount) / 100).toFixed(2);
    },

    // "+$40.00" / "-$40.00" rather than "$-40.00" — a standings column is read at a
@@ -30,7 +30,10 @@ const PotWizard = {
        const contributions = players.map(p => ({
            id: p.id,
            contribution: HoldemState.computeContribution(p, state.chipLegend, state.basePotAmount),
-            folded: p.folded,
+            // A seat switched off mid-hand still has its chips in the pot, but it
+            // can no more win them than a folded one can — same dead money, and the
+            // wizard must not offer it as a winner.
+            folded: p.folded || HoldemState.isDeadMoney(p),
        }));
        this.entries = PotCalculator.buildEntries(contributions);
        // Kept so the wizard can show the whole breakdown up front, not just the layer
@@ -269,11 +272,25 @@ const PotWizard = {
        });
        actions.appendChild(applyBtn);

-        const closeBtn = document.createElement("button");
-        closeBtn.className = "holdemBtn holdemBtnGhost";
-        closeBtn.textContent = "Close";
-        closeBtn.addEventListener("click", () => this.close());
-        actions.appendChild(closeBtn);
+        // This button cancels — it does not pay anybody. Under a heading reading
+        // "Final Payouts" with an amount beside a name, "Close" reads like dismissing
+        // something already done, and a dealer who taps it walks away believing the
+        // pot has been pushed. It hasn't: the chips are still in the middle and the
+        // hand isn't logged. So it says what it does.
+        const cancelBtn = document.createElement("button");
+        cancelBtn.className = "holdemBtn holdemBtnGhost";
+        cancelBtn.textContent = "Cancel — don't pay yet";
+        cancelBtn.addEventListener("click", () => this.close());
+        actions.appendChild(cancelBtn);
+
+        if (this.totals.size > 0) {
+            const note = document.createElement("p");
+            note.className = "fieldHint potWizardPendingNote";
+            note.textContent = "Nothing has been paid out yet. Start Next Hand pushes the pot and logs the hand.";
+            wrap.appendChild(actions);
+            wrap.appendChild(note);
+            return wrap;
+        }

        wrap.appendChild(actions);
        return wrap;
@@ -16,6 +16,10 @@ const Render = {
        this.state = state;
        this.hooks = hooks;
        this.selectedSeatIndex = null;
+        // A reset hands over a different table entirely, so nothing cached about the
+        // last one still applies.
+        this.lastHistorySignature = null;
+        this.handTimeCache.clear();
        this.renderAll();
    },

@@ -158,7 +162,7 @@ const Render = {
        const layer = document.getElementById("seatsLayer");
        layer.innerHTML = "";
        const template = document.getElementById("seatTemplate");
-        const { dealerIndex, sbIndex, bbIndex } = HoldemState.getBlindSeats(this.state);
+        const { dealerIndex, sbIndex, bbIndex, manual: manualBlinds } = HoldemState.getBlindSeats(this.state);

        this.state.seats.forEach((player, index) => {
            const node = template.content.firstElementChild.cloneNode(true);
@@ -172,15 +176,26 @@ const Render = {
            const dealerChip = node.querySelector(".dealerChip");
            dealerChip.classList.toggle("active", index === dealerIndex);
            dealerChip.classList.toggle("hidden", !!this.state.dedicatedDealer);
+            // Tapping the puck is the same act as "Give the button" in the seat menu,
+            // so it goes through the same hook — otherwise this one path would move
+            // the button without moving the blinds that follow it.
            dealerChip.addEventListener("click", e => {
                e.stopPropagation();
-                this.state.dealerSeatIndex = index;
-                this.hooks.save(this.state);
-                this.renderSeats();
+                this.hooks.onGiveButton(index);
            });

-            node.querySelector(".sbBadge").classList.toggle("visible", index === sbIndex);
-            node.querySelector(".bbBadge").classList.toggle("visible", index === bbIndex);
+            const sbBadge = node.querySelector(".sbBadge");
+            const bbBadge = node.querySelector(".bbBadge");
+            sbBadge.classList.toggle("visible", index === sbIndex);
+            bbBadge.classList.toggle("visible", index === bbIndex);
+            // A blind the dealer named by hand isn't where the button would have put
+            // it, so it's marked — otherwise the table looks like it's just wrong.
+            // The `!!` matters: getBlindSeats leaves `manual` undefined when the
+            // blinds are positional, and classList.toggle with an undefined second
+            // argument *flips* the class instead of clearing it, so the marker
+            // appeared and disappeared on alternate renders.
+            sbBadge.classList.toggle("blindManual", !!manualBlinds && index === sbIndex);
+            bbBadge.classList.toggle("blindManual", !!manualBlinds && index === bbIndex);

            this.updatePuckContent(node, player, index);
            node.classList.toggle("seatSelected", index === this.selectedSeatIndex);
@@ -250,11 +265,14 @@ const Render = {
        const total = handTotal > 0
            ? handTotal
            : HoldemState.computeContribution(player, this.state.chipLegend, this.state.basePotAmount);
-        node.querySelector(".seatPuckTotal").textContent = total > 0 ? Money.format(total) : "";
+        const totalEl = node.querySelector(".seatPuckTotal");
+        totalEl.textContent = total > 0 ? Money.format(total) : "";
+        this.fitAmount(totalEl);

        const stackEl = node.querySelector(".seatPuckStack");
        const stack = Betting.stackOf(this.state, player);
        stackEl.textContent = !empty && stack > 0 ? Money.format(stack) : "";
+        this.fitAmount(stackEl);

        node.classList.toggle("seatActing", index === this.state.actingSeatIndex);
        node.classList.toggle("seatEmpty", empty);
@@ -263,6 +281,17 @@ const Render = {
        node.classList.toggle("seatLive", player.inHand && !player.folded);
    },

+    // A seat puck is 64px of usable width. A tournament stack doesn't fit in that and,
+    // because the number has no spaces to break on, it doesn't wrap or ellipsise
+    // either — it just draws straight out over the neighbouring seat. Stepping the
+    // font down keeps every digit, which matters: a dealer misreading a stack is a
+    // worse outcome than a small one, so this shrinks rather than abbreviating.
+    fitAmount(el) {
+        const length = (el.textContent || "").length;
+        el.classList.toggle("puckAmountLong", length >= 8 && length < 10);
+        el.classList.toggle("puckAmountHuge", length >= 10);
+    },
+
    // Cheaper than a full renderSeats() — used after edits so the seat editor's inputs
    // (which live in a separate panel) never lose focus.
    refreshPuck(index) {
@@ -672,30 +701,101 @@ const Render = {
            netEl.classList.toggle("netUp", row.net > 0);
            netEl.classList.toggle("netDown", row.net < 0);

+            // What they'd actually be handed if the night ended now: chips in front of
+            // them less the cash they gave the banker. This was computed and written to
+            // the CSV all along, but never shown to the person doing the paying out.
+            const cashEl = node.querySelector(".standingsCashOut");
+            cashEl.textContent = Money.formatSigned(row.cashPosition);
+            cashEl.classList.toggle("netUp", row.cashPosition > 0);
+            cashEl.classList.toggle("netDown", row.cashPosition < 0);
+
            list.appendChild(node);
        });
+
+        this.renderBankReconciliation();
+    },
+
+    // Does the cash box cover the chips on the table? Nothing asked this before, and
+    // it's the question that decides whether the last two players can be paid.
+    renderBankReconciliation() {
+        const host = document.getElementById("bankReconcile");
+        if (!host) return;
+
+        const bank = HoldemState.bankReconciliation(this.state);
+        // Nothing to reconcile before anybody has handed over money or taken a chip.
+        host.hidden = bank.cashIn === 0 && bank.chipsInPlay === 0;
+        if (host.hidden) return;
+
+        document.getElementById("bankCashIn").textContent = Money.format(bank.cashIn);
+        document.getElementById("bankChipsInPlay").textContent = Money.format(bank.chipsInPlay);
+
+        const verdict = document.getElementById("bankReconcileVerdict");
+        if (bank.balanced) {
+            verdict.textContent = "Balanced — the cash covers every chip on the table.";
+        } else if (bank.difference > 0) {
+            verdict.textContent =
+                `${Money.format(bank.difference)} more in chips than cash taken. Someone's rebuy probably wasn't recorded — the box will be short at cash-out.`;
+        } else {
+            verdict.textContent =
+                `${Money.format(Math.abs(bank.difference))} more cash than chips in play. Someone has paid for chips they haven't been given.`;
+        }
+        verdict.classList.toggle("bankBalanced", bank.balanced);
+        verdict.classList.toggle("bankOff", !bank.balanced);
    },

    // ---- Hand counter + history ----

+    // toLocaleTimeString is the single most expensive call in the history panel, and a
+    // logged hand's timestamp never changes, so the answer is worth keeping.
+    handTimeCache: new Map(),
+
    formatHandTime(timestamp) {
+        if (this.handTimeCache.has(timestamp)) return this.handTimeCache.get(timestamp);
+        let formatted = "";
        try {
-            return new Date(timestamp).toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" });
+            formatted = new Date(timestamp).toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" });
        } catch {
-            return "";
+            formatted = "";
        }
+        this.handTimeCache.set(timestamp, formatted);
+        return formatted;
    },

-    renderHandHistory() {
+    // Cheap stand-in for "has the log changed". Entries are immutable once written and
+    // only ever added at the front, so the length, the counter and the newest row
+    // between them catch a recorded hand, a cleared history and an undo.
+    historySignature() {
+        const history = this.state.handHistory || [];
+        const newest = history[0];
+        return [
+            history.length,
+            this.state.handNumber || 1,
+            newest ? newest.handNumber : "",
+            newest ? newest.timestamp : "",
+            newest ? newest.pot : "",
+        ].join("|");
+    },
+
+    // Rebuilding this panel measured 25.7ms of the 30ms a full re-render costs — and a
+    // full re-render runs after every fold, call and raise. The log only changes when a
+    // hand is settled or the history is cleared, perhaps once every thirty taps, so it
+    // is skipped unless it actually did change. Everything else on the table reflects
+    // the current hand and still redraws every time.
+    renderHandHistory(force = false) {
+        const signature = this.historySignature();
+        if (!force && signature === this.lastHistorySignature) return;
+        this.lastHistorySignature = signature;
+
        document.getElementById("handCounterBadge").textContent = `Hand #${this.state.handNumber || 1}`;

        const list = document.getElementById("handHistoryList");
        const emptyHint = document.getElementById("handHistoryEmptyHint");
        const history = this.state.handHistory || [];
-        list.innerHTML = "";
        emptyHint.hidden = history.length > 0;
        document.getElementById("exportHistoryBtn").disabled = history.length === 0;

+        // Built off-document so the panel is laid out once instead of once per row.
+        const fragment = document.createDocumentFragment();
        const template = document.getElementById("handHistoryRowTemplate");
        history.forEach(entry => {
            const row = template.content.firstElementChild.cloneNode(true);
@@ -706,8 +806,10 @@ const Render = {
            const payoutsEl = row.querySelector(".handHistoryPayouts");
            payoutsEl.textContent = entry.payouts.map(p => `${p.label} ${Money.format(p.amount)}`).join(", ");

-            list.appendChild(row);
+            fragment.appendChild(row);
        });
+        list.innerHTML = "";
+        list.appendChild(fragment);
    },
 };

@@ -45,6 +45,24 @@ const SeatMenu = {
            actions.push({ label: "Give the button", run: () => this.hooks.makeDealer(index) });
        }

+        // Naming a blind by hand. Only offered while nothing but the blinds are in —
+        // once somebody has called, moving a blind would mean unpicking a bet that
+        // has already been answered, and that's a decision for the dealer's mouth,
+        // not a menu item. Which blind a seat already has is shown rather than
+        // offered again.
+        if (dealtIn && Betting.onlyBlindsIn(this.state)) {
+            const blinds = HoldemState.getBlindSeats(this.state);
+            if (blinds.sbIndex !== index) {
+                actions.push({ label: "Make small blind", run: () => this.hooks.assignBlind(index, "sb") });
+            }
+            if (blinds.bbIndex !== index) {
+                actions.push({ label: "Make big blind", run: () => this.hooks.assignBlind(index, "bb") });
+            }
+            if (this.state.blindOverride) {
+                actions.push({ label: "Blinds follow the button again", run: () => this.hooks.clearBlindOverride() });
+            }
+        }
+
        actions.push({ label: "Edit seat…", run: () => this.hooks.editSeat(index) });
        return actions;
    },
@@ -32,14 +32,12 @@ const Shortcuts = {
        return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || el.isContentEditable;
    },

-    // An overlay owns the keyboard while it's up: the confirm dialog already binds
-    // Enter and Escape, and the card picker and seat menu are modal.
+    // An overlay owns the keyboard while it's up. Asking the document which overlays
+    // are open, rather than listing them, means a sheet added later can't quietly
+    // start letting "f" fold the table behind it — the same reason Modal watches for
+    // them instead of being told about each one.
    overlayOpen() {
-        return ["confirmOverlay", "potWizardOverlay", "cardPickerOverlay", "seatMenuOverlay", "rulingsOverlay", "addChipsOverlay"]
-            .some(id => {
-                const el = document.getElementById(id);
-                return el && !el.hidden;
-            });
+        return [...document.querySelectorAll('[id$="Overlay"]')].some(el => !el.hidden);
    },

    onKey(e) {
@@ -58,6 +58,26 @@ 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
+            // button order is the wrong answer often enough that it has to be
+            // overridable. Cleared at the start of every hand.
+            blindOverride: null,
        };
    },

@@ -73,10 +93,22 @@ const HoldemState = {
            // Tables saved before live betting existed are missing its fields; fill
            // them in rather than making the dealer reset a table mid-session.
            const defaults = this.createDefault();
-            ["smallBlind", "bigBlind", "defaultStack", "street", "currentBet", "lastRaiseSize", "actingSeatIndex"]
+            ["smallBlind", "bigBlind", "defaultStack", "street", "currentBet", "lastRaiseSize",
+                "actingSeatIndex", "blindOverride"]
                .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;
@@ -124,9 +156,14 @@ const HoldemState = {
    },

    // Contribution the table calculator will treat this player as having put in.
+    //
+    // Chips already pushed into the middle count whether or not the player is still
+    // in the hand. Someone who storms off, gets taken out by the dealer, or is
+    // dealt out mid-hand leaves their money on the felt — it's dead money owed to
+    // whoever wins, and it is not theirs to take back. Reading `inHand` first is
+    // how those chips used to disappear out of the pot the instant a seat was
+    // switched off, quietly shrinking the payout by whatever they had posted.
    computeContribution(player, chipLegend, basePotAmount) {
-        if (!player.inHand) return 0;
-
        const override = player.amountOverride;
        if (override !== null && override !== undefined && String(override).trim() !== "") {
            const parsed = Number(override);
@@ -139,10 +176,54 @@ const HoldemState = {
        }, 0);
        if (chipTotal > 0) return chipTotal;

+        // The table-wide default is the one thing that stays tied to being dealt in:
+        // it's a stand-in for "everyone put the same amount in", so applying it to
+        // empty chairs would invent a contribution from every seat nobody is using.
+        if (!player.inHand) return 0;
+
        const base = Number(basePotAmount);
        return Number.isNaN(base) ? 0 : Math.max(0, base);
    },

+    // Anyone whose chips are in the pot, whether or not they're still in the hand.
+    // A seat that's been switched off mid-hand is dead money: it counts towards the
+    // pot but can never be picked as a winner, exactly like a fold.
+    isDeadMoney(player) {
+        return !player.inHand;
+    },
+
+    // What starting the next hand would take off the table for good: exactly the
+    // fields startNextHand clears.
+    //
+    // Deliberately not totalPot(). The table-wide base pot is a standing ante — a
+    // stand-in for "everyone puts the same in every hand", used by a dealer who
+    // isn't tracking stacks — so it re-applies to the next hand rather than being
+    // lost with this one. Counting it would mean warning about money that isn't
+    // going anywhere, on every single hand, for exactly the dealers who chose the
+    // simplest way to run the table.
+    unresolvedContributions(state) {
+        const total = state.seats.reduce((sum, player) => {
+            const override = player.amountOverride;
+            let banked = 0;
+
+            if (override !== null && override !== undefined && String(override).trim() !== "") {
+                const parsed = Number(override);
+                if (!Number.isNaN(parsed)) banked = Math.max(0, parsed);
+            }
+
+            if (banked === 0) {
+                banked = (state.chipLegend || []).reduce((chips, chip) => {
+                    const count = Number(player.chipCounts[chip.id]) || 0;
+                    return chips + count * Number(chip.value || 0);
+                }, 0);
+            }
+
+            return sum + banked + Math.max(0, Number(player.committed) || 0);
+        }, 0);
+
+        return Money.round(total);
+    },
+
    totalPot(state) {
        return state.seats.reduce(
            (sum, p) => sum + this.computeContribution(p, state.chipLegend, state.basePotAmount),
@@ -188,12 +269,62 @@ const HoldemState = {
        return order;
    },

+    // A button sitting on an empty chair is only cosmetic until you try to read
+    // 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.
+    // 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) 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
+    // dealer who names a blind and then deals that player out shouldn't have the
+    // table quietly post to nobody.
+    validBlindOverride(state) {
+        const o = state.blindOverride;
+        if (!o) return null;
+        const ok = i => Number.isInteger(i) && i >= 0 && i < state.seatCount && state.seats[i] && state.seats[i].inHand;
+        if (!ok(o.sbIndex) || !ok(o.bbIndex) || o.sbIndex === o.bbIndex) return null;
+        return o;
+    },
+
    // Who posts what. Heads-up is its own rule: with two players the button posts the
    // small blind, which is the opposite of the usual order.
    getBlindSeats(state) {
        const live = this.liveOrderFromButton(state);
        const dealerIndex = state.dealerSeatIndex;

+        // A blind the dealer named by hand wins over anything positional. Heads-up is
+        // still reported honestly so the betting order stays right — who posts what
+        // is the dealer's call, but two-handed play acting in reverse is a rule.
+        const override = this.validBlindOverride(state);
+        if (override) {
+            return {
+                dealerIndex,
+                sbIndex: override.sbIndex,
+                bbIndex: override.bbIndex,
+                headsUp: live.length === 2,
+                manual: true,
+            };
+        }
+
        if (live.length < 2) {
            return { dealerIndex, sbIndex: null, bbIndex: null, headsUp: false };
        }
@@ -210,6 +341,16 @@ 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.
+        state.blindOverride = null;
        state.seats.forEach(p => {
            p.folded = false;
            p.cards = ["", ""];
@@ -218,6 +359,8 @@ const HoldemState = {
            p.committed = 0;
            p.hasActed = false;
        });
+        // Anyone who joined mid-hand is a full player again from here.
+        this.ensureButtonOnPlayer(state);
    },

    // Appends a resolved-pot record to the running session log a dealer can point to
@@ -282,6 +425,23 @@ const HoldemState = {
        // all, so they're read off the seat rather than summed — a rebuy isn't a hand.
        const seatById = new Map(state.seats.map(p => [p.id, p]));

+        // Anyone who has money in the game belongs in the settle-up, whether or not
+        // they've been in a logged hand yet. Building the list from the hand log alone
+        // left a player who bought in and then sat through a few hands folding —
+        // or who just sat down — missing entirely, so the banker's own record didn't
+        // mention the cash they'd taken. They turn up at cash-out holding chips the
+        // list never accounted for.
+        state.seats.forEach((player, index) => {
+            if (totals.has(player.id)) return;
+            const hasMoneyInPlay =
+                (Number(player.buyIns) || 0) > 0 ||
+                (Number(player.stack) || 0) > 0 ||
+                (Number(player.amountOverride) || 0) > 0 ||
+                (Number(player.committed) || 0) > 0;
+            if (!hasMoneyInPlay) return;
+            totals.set(player.id, { id: player.id, name: this.displayName(player, index), in: 0, won: 0 });
+        });
+
        return Array.from(totals.values())
            .map(t => {
                const seat = seatById.get(t.id);
@@ -306,6 +466,37 @@ const HoldemState = {
            })
            .sort((a, b) => b.net - a.net);
    },
+
+    // The one check a banker actually needs, and the one nothing here did.
+    //
+    // Every chip on the table is a promise to pay cash for it later. If the chips in
+    // play add up to more than the cash that came in, that promise can't be kept —
+    // and the way you find out is the last two players cashing out and the box being
+    // empty. It's always someone taking chips without paying, a rebuy that never got
+    // recorded, or a miscount, and it's silent until it's too late to work out which.
+    //
+    // Chips in play counts everything a player could hand back: what's in front of
+    // them and what's in the middle waiting to be won.
+    bankReconciliation(state) {
+        const cashIn = state.seats.reduce((sum, p) => sum + Math.max(0, Number(p.buyIns) || 0), 0);
+        const chipsInPlay = state.seats.reduce(
+            (sum, p) =>
+                sum +
+                Math.max(0, Number(p.stack) || 0) +
+                Math.max(0, Number(p.committed) || 0) +
+                Math.max(0, Number(p.amountOverride) || 0),
+            0
+        );
+
+        const difference = Money.round(chipsInPlay - cashIn);
+        return {
+            cashIn: Money.round(cashIn),
+            chipsInPlay: Money.round(chipsInPlay),
+            difference,
+            // Half a cent of float dust isn't a discrepancy worth alarming anyone over.
+            balanced: Math.abs(difference) <= Money.EPSILON,
+        };
+    },
 };

 if (typeof module !== "undefined" && module.exports) {
@@ -22,6 +22,46 @@ other in the page, in the load order from `TexasHoldem.cshtml`.
 | `splitCalculator.test.js` | Chopped pots, odd chips, unmakeable denominations |
 | `invariants.test.js` | 1000 randomised hands per property (see below) |

+## The layout audit
+
+The unit tests above cover the money. `uiAudit.js` covers the thing you can only see
+in a browser: whether a dealer can actually reach every control.
+
+```bash
+node tests/holdem/runUiAudit.js          # needs Playwright and the site running
+```
+
+It checks WCAG AA contrast, touch target sizes, touch-action and tap highlights, that fields stay selectable and are large
+enough not to trigger iOS zoom, that nothing important is covered or off-screen with
+no way to scroll to it, that no grid column has collapsed to nothing, and that no
+text is painted outside its box. It runs over the table, all five overlays and Quick
+Split, at thirteen viewports from a 360px phone to a 1600px desktop and the same
+phones on their side.
+
+Deliberately not in CI: the unit suite is dependency-free and runs in a second, while
+this one needs a browser and a running site. Run it after any change that adds or
+resizes a control. With no Playwright to hand, paste `uiAudit.js` into devtools and
+call `LayoutAudit.runAll()`.
+
+The contrast check is built so it cannot report a false positive: backgrounds
+composite through alpha, and where a gradient is involved every colour stop is tried
+and the most flattering one used. A finding means the text fails even under the
+reading most generous to it. Two earlier attempts at this got it wrong in both
+directions — one read only `background-color` and scored text on a gradient against
+nothing, the other treated low-alpha stops as opaque — so `uiAudit.js` is checked
+against known-answer cases before it is believed.
+
+Touch targets are measured by probing outward with `elementFromPoint` rather than by
+reading the element box, because the box lies in both directions: a small control can
+be padded out with a transparent `::after` and respond well beyond its painted size,
+and a checkbox inside a label is hit by tapping the label. The 44px rule is only
+enforced where `hover: none` says there's no mouse.
+
+It exists because these checks were being re-typed into a console every time
+something changed, and each time they only covered whatever had just been touched.
+That is how the standings table shipped with a player-name column zero pixels wide
+and kept it for two rounds.
+
 ## Why the randomised suite exists

 Every correctness bug found in this tool so far has been shape-dependent: blinds posted
@@ -0,0 +1,169 @@
+// The banker's job, which is a different job from the dealer's: every chip on the
+// table is a promise to pay cash for it later, and somebody has to be able to check
+// that the promise can be kept before the last two players try to cash out.
+const { test, describe } = require("node:test");
+const assert = require("node:assert/strict");
+const { Betting, HoldemState, Money, makeTable } = require("./load");
+
+const seat = (state, index, name, cash, chips) => {
+    const p = state.seats[index];
+    p.name = name; p.inHand = true; p.buyIns = cash; p.stack = chips;
+    return p;
+};
+
+describe("everyone with money in the game is accounted for", () => {
+    test("a player who has bought in but played no logged hand still appears", () => {
+        const state = makeTable({ seatCount: 6, seated: [0, 1, 2], stack: 0 });
+        seat(state, 0, "Ann", 100, 100);
+        seat(state, 1, "Ben", 100, 100);
+        seat(state, 2, "Cal", 200, 200); // just sat down
+
+        state.seats[0].amountOverride = 10;
+        state.seats[1].amountOverride = 10;
+        HoldemState.recordHand(state, [{ id: state.seats[0].id, label: "Ann", amount: 20 }]);
+        state.seats[0].amountOverride = null;
+        state.seats[1].amountOverride = null;
+
+        const names = HoldemState.sessionStandings(state).map(r => r.name);
+        assert.ok(names.includes("Cal"), `Cal handed over $200 and is missing: ${names.join(", ")}`);
+    });
+
+    test("their row reads as no hands played, not as a loss", () => {
+        const state = makeTable({ seatCount: 4, seated: [0, 1], stack: 0 });
+        seat(state, 0, "Ann", 100, 100);
+        seat(state, 1, "Ben", 200, 200);
+
+        const cal = HoldemState.sessionStandings(state).find(r => r.name === "Ben");
+        assert.equal(cal.in, 0);
+        assert.equal(cal.won, 0);
+        assert.equal(cal.net, 0);
+        assert.equal(cal.boughtIn, 200);
+        assert.equal(cal.cashPosition, 0, "level: they've bought chips and still hold them");
+    });
+
+    test("an empty chair is not dragged into the settle-up", () => {
+        const state = makeTable({ seatCount: 9, seated: [0], stack: 0 });
+        seat(state, 0, "Ann", 100, 100);
+        const rows = HoldemState.sessionStandings(state);
+        assert.equal(rows.length, 1);
+    });
+
+    test("somebody who has cashed out completely still shows what they took", () => {
+        const state = makeTable({ seatCount: 4, seated: [0, 1], stack: 0 });
+        seat(state, 0, "Ann", 100, 0);   // handed every chip back
+        seat(state, 1, "Ben", 100, 200);
+        const ann = HoldemState.sessionStandings(state).find(r => r.name === "Ann");
+        assert.equal(ann.cashPosition, -100, "down the whole buy-in");
+    });
+});
+
+describe("does the cash box cover the chips on the table", () => {
+    test("a straight game balances", () => {
+        const state = makeTable({ seatCount: 4, seated: [0, 1, 2], stack: 0 });
+        seat(state, 0, "Ann", 100, 60);
+        seat(state, 1, "Ben", 100, 140);
+        seat(state, 2, "Cal", 100, 100);
+
+        const bank = HoldemState.bankReconciliation(state);
+        assert.equal(bank.cashIn, 300);
+        assert.equal(bank.chipsInPlay, 300);
+        assert.equal(bank.difference, 0);
+        assert.equal(bank.balanced, true);
+    });
+
+    test("chips outrunning the cash box is caught before cash-out", () => {
+        // The 2am failure: the last players out can't be paid.
+        const state = makeTable({ seatCount: 4, seated: [0, 1, 2], stack: 0 });
+        seat(state, 0, "Ann", 100, 100);
+        seat(state, 1, "Ben", 100, 100);
+        seat(state, 2, "Cal", 100, 260); // took chips for a rebuy nobody wrote down
+
+        const bank = HoldemState.bankReconciliation(state);
+        assert.equal(bank.cashIn, 300);
+        assert.equal(bank.chipsInPlay, 460);
+        assert.equal(bank.difference, 160);
+        assert.equal(bank.balanced, false);
+    });
+
+    test("cash taken for chips never handed over is caught too", () => {
+        const state = makeTable({ seatCount: 4, seated: [0, 1], stack: 0 });
+        seat(state, 0, "Ann", 200, 100); // paid 200, only got 100 in chips
+        seat(state, 1, "Ben", 100, 100);
+
+        const bank = HoldemState.bankReconciliation(state);
+        assert.equal(bank.difference, -100);
+        assert.equal(bank.balanced, false);
+    });
+
+    test("chips in the middle still count as chips in play", () => {
+        // Money in the pot is somebody's; it just hasn't been won yet. Leaving it out
+        // would report a shortfall every time a hand was open — which is nearly always.
+        const state = makeTable({ seatCount: 4, seated: [0, 1, 2], dealerSeatIndex: 0 });
+        state.seats.forEach(p => { if (p.inHand) p.buyIns = 100; });
+
+        const before = HoldemState.bankReconciliation(state);
+        assert.equal(before.balanced, true);
+
+        Betting.beginHand(state);              // blinds go in
+        Betting.raiseTo(state, 0, 25);         // and a raise
+        Betting.sweepToHandTotals(state);      // banked into the pot
+
+        const during = HoldemState.bankReconciliation(state);
+        assert.equal(during.balanced, true, "an open pot is not a discrepancy");
+        assert.equal(during.chipsInPlay, before.chipsInPlay);
+    });
+
+    test("a whole session of play never knocks the books out", () => {
+        const state = makeTable({ seatCount: 6, seated: [0, 1, 2, 3], dealerSeatIndex: 0 });
+        state.seats.forEach(p => { if (p.inHand) p.buyIns = 100; });
+
+        for (let hand = 0; hand < 6; hand++) {
+            Betting.beginHand(state);
+            Betting.liveSeats(state).forEach(s => {
+                if (Betting.toCall(state, s.player) > 0) Betting.call(state, s.index);
+            });
+            Betting.sweepToHandTotals(state);
+
+            const pot = HoldemState.totalPot(state);
+            const winner = Betting.liveSeats(state)[0];
+            const payouts = [{ id: winner.player.id, label: "w", amount: pot }];
+            HoldemState.recordHand(state, payouts);
+            Betting.creditWinnings(state, payouts);
+            HoldemState.startNextHand(state);
+
+            assert.equal(HoldemState.bankReconciliation(state).balanced, true, `books off after hand ${hand + 1}`);
+        }
+    });
+
+    test("a rebuy keeps the books straight, a chip grab doesn't", () => {
+        const state = makeTable({ seatCount: 4, seated: [0, 1], stack: 0 });
+        seat(state, 0, "Ann", 100, 100);
+        seat(state, 1, "Ben", 100, 100);
+
+        // A proper rebuy: cash to the banker, chips to the player.
+        state.seats[0].buyIns += 100;
+        state.seats[0].stack += 100;
+        assert.equal(HoldemState.bankReconciliation(state).balanced, true);
+
+        // Chips taken without paying.
+        state.seats[1].stack += 50;
+        const bank = HoldemState.bankReconciliation(state);
+        assert.equal(bank.balanced, false);
+        assert.equal(bank.difference, 50);
+    });
+
+    test("nothing to reconcile before anybody has bought in", () => {
+        const state = makeTable({ seatCount: 6, seated: [], stack: 0 });
+        const bank = HoldemState.bankReconciliation(state);
+        assert.equal(bank.cashIn, 0);
+        assert.equal(bank.chipsInPlay, 0);
+        assert.equal(bank.balanced, true);
+    });
+
+    test("float dust is not a discrepancy", () => {
+        const state = makeTable({ seatCount: 4, seated: [0, 1], stack: 0 });
+        seat(state, 0, "Ann", 0.1 + 0.2, 0.3);
+        seat(state, 1, "Ben", 10, 10);
+        assert.equal(HoldemState.bankReconciliation(state).balanced, true);
+    });
+});
@@ -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);
+    });
+});
@@ -0,0 +1,118 @@
+// The hand-history panel is only rebuilt when its signature changes, which takes a
+// full re-render from ~30ms to ~3ms. The whole saving depends on that signature
+// noticing every way the log can actually change — a stale panel would have the
+// dealer reading last hand's payouts while settling this one.
+const { test, describe } = require("node:test");
+const assert = require("node:assert/strict");
+const { Render, HoldemState, makeTable } = require("./load");
+
+// historySignature() reads Render.state, so point it at a table for each case.
+const signatureOf = state => {
+    Render.state = state;
+    return Render.historySignature();
+};
+
+const tableWithHands = (count) => {
+    const state = makeTable({ seatCount: 4, seated: [0, 1, 2] });
+    for (let i = 0; i < count; i++) {
+        state.seats[0].amountOverride = 2;
+        state.seats[1].amountOverride = 2;
+        HoldemState.recordHand(state, [{ id: state.seats[0].id, label: "Ann", amount: 4 }]);
+    }
+    return state;
+};
+
+describe("the history panel knows when to redraw", () => {
+    test("nothing changes while a hand is being played", () => {
+        const state = tableWithHands(3);
+        const before = signatureOf(state);
+
+        // A whole street of betting touches no part of the log.
+        state.seats[0].committed = 5;
+        state.seats[1].folded = true;
+        state.actingSeatIndex = 2;
+        state.street = "flop";
+
+        assert.equal(signatureOf(state), before, "betting must not force a rebuild");
+    });
+
+    test("settling a hand changes it", () => {
+        const state = tableWithHands(3);
+        const before = signatureOf(state);
+        HoldemState.recordHand(state, [{ id: state.seats[1].id, label: "Ben", amount: 12 }]);
+        assert.notEqual(signatureOf(state), before);
+    });
+
+    test("clearing the history changes it", () => {
+        const state = tableWithHands(5);
+        const before = signatureOf(state);
+        HoldemState.clearHistory(state);
+        assert.notEqual(signatureOf(state), before);
+    });
+
+    test("undoing back to a shorter log changes it", () => {
+        const state = tableWithHands(2);
+        const snapshot = JSON.parse(JSON.stringify(state));
+        HoldemState.recordHand(state, [{ id: state.seats[0].id, label: "Ann", amount: 30 }]);
+        const afterRecord = signatureOf(state);
+
+        // The undo path swaps the state's contents in place.
+        Object.keys(state).forEach(k => delete state[k]);
+        Object.assign(state, snapshot);
+
+        assert.notEqual(signatureOf(state), afterRecord, "an undone hand must disappear from the panel");
+    });
+
+    test("two hands that differ only in payout are told apart", () => {
+        const a = tableWithHands(1);
+        const b = tableWithHands(1);
+        // Same count and hand number; different pot.
+        b.handHistory[0].pot = a.handHistory[0].pot + 25;
+        assert.notEqual(signatureOf(a), signatureOf(b));
+    });
+
+    test("the hand counter moving on changes it", () => {
+        // The counter badge is drawn by the same function, so a new hand number has
+        // to invalidate even when the log itself is untouched.
+        const state = tableWithHands(2);
+        const before = signatureOf(state);
+        state.handNumber += 1;
+        assert.notEqual(signatureOf(state), before);
+    });
+
+    test("an empty log has a stable signature of its own", () => {
+        const state = makeTable({ seatCount: 4, seated: [0, 1] });
+        const first = signatureOf(state);
+        assert.equal(signatureOf(state), first);
+
+        HoldemState.recordHand(state, [{ id: state.seats[0].id, label: "Ann", amount: 4 }]);
+        assert.notEqual(signatureOf(state), first, "the first hand ever must draw the panel");
+    });
+});
+
+describe("the hand-time cache", () => {
+    test("the same timestamp is only formatted once, and formats the same", () => {
+        Render.handTimeCache.clear();
+        const stamp = Date.UTC(2026, 8, 1, 15, 4);
+        const first = Render.formatHandTime(stamp);
+        assert.equal(Render.handTimeCache.size, 1);
+
+        const second = Render.formatHandTime(stamp);
+        assert.equal(second, first);
+        assert.equal(Render.handTimeCache.size, 1, "not re-formatted");
+    });
+
+    test("different timestamps still format differently", () => {
+        Render.handTimeCache.clear();
+        const a = Render.formatHandTime(Date.UTC(2026, 8, 1, 15, 4));
+        const b = Render.formatHandTime(Date.UTC(2026, 8, 1, 18, 47));
+        assert.notEqual(a, b);
+        assert.equal(Render.handTimeCache.size, 2);
+    });
+
+    test("a nonsense timestamp doesn't throw", () => {
+        Render.handTimeCache.clear();
+        assert.doesNotThrow(() => Render.formatHandTime(undefined));
+        assert.doesNotThrow(() => Render.formatHandTime("not a date"));
+    });
+});
@@ -18,6 +18,11 @@ const Money = load("money");
 const PotCalculator = load("potCalculator");
 const SplitCalculator = load("splitCalculator");
 const Betting = load("betting");
+const HandHistoryExport = load("handHistoryExport");
+
+// render.js exports { Render } rather than the namespace directly.
+const Render = require(path.join(SRC, "render.js")).Render;
+globalThis.Render = Render;

 // state.js exports `HoldemState`, which doesn't match its filename.
 const HoldemState = require(path.join(SRC, "state.js"));
@@ -68,6 +73,8 @@ function contributions(state) {

 module.exports = {
    Money,
+    Render,
+    HandHistoryExport,
    PotCalculator,
    SplitCalculator,
    Betting,
@@ -0,0 +1,260 @@
+// Home games are messy. People walk up mid-hand, storm off mid-hand, argue about
+// whose blind it is, and pass the button round three times before anyone deals.
+// These are the cases the positional rules quietly get wrong.
+const { test, describe } = require("node:test");
+const assert = require("node:assert/strict");
+const { Betting, HoldemState, PotCalculator, Money, makeTable, chipsOnTable, contributions } = require("./load");
+
+const potOf = state => HoldemState.totalPot(state);
+
+describe("a player leaves in the middle of a hand", () => {
+    test("their chips stay in the pot", () => {
+        const state = makeTable({ seatCount: 6, seated: [0, 1, 2, 3], dealerSeatIndex: 0 });
+        Betting.beginHand(state);
+        Betting.call(state, 3); Betting.call(state, 0); Betting.call(state, 1); Betting.check(state, 2);
+        Betting.sweepToHandTotals(state);
+
+        const before = potOf(state);
+        assert.equal(before, 8);
+
+        state.seats[1].inHand = false; // dealer takes them out
+
+        assert.equal(potOf(state), before, "the pot must not shrink when a player is taken out");
+    });
+
+    test("they cannot be paid out of a pot they walked away from", () => {
+        const state = makeTable({ seatCount: 4, seated: [0, 1, 2], dealerSeatIndex: 0 });
+        Betting.beginHand(state);
+        Betting.call(state, 0); Betting.call(state, 1); Betting.check(state, 2);
+        Betting.sweepToHandTotals(state);
+
+        state.seats[1].inHand = false;
+
+        const players = state.seats
+            .filter(p => HoldemState.computeContribution(p, state.chipLegend, state.basePotAmount) > 0)
+            .map(p => ({
+                id: p.id,
+                contribution: HoldemState.computeContribution(p, state.chipLegend, state.basePotAmount),
+                folded: p.folded || HoldemState.isDeadMoney(p),
+            }));
+
+        const layers = PotCalculator.layers(players);
+        assert.ok(!layers[0].eligible.includes(state.seats[1].id), "a departed player can't win");
+        assert.equal(layers.reduce((s, l) => s + l.amount, 0), 6, "but their money is still being played for");
+    });
+
+    test("taking out the player who is to act moves the action on", () => {
+        const state = makeTable({ seatCount: 4, seated: [0, 1, 2, 3], dealerSeatIndex: 0 });
+        Betting.beginHand(state);
+        const acting = state.actingSeatIndex;
+
+        state.seats[acting].inHand = false;
+        Betting.passAction(state, acting);
+
+        assert.notEqual(state.actingSeatIndex, acting, "the table can't wait on somebody who left");
+        assert.ok(state.actingSeatIndex === null || state.seats[state.actingSeatIndex].inHand);
+    });
+
+    test("an empty chair still contributes nothing, base pot or not", () => {
+        // The table-wide default must not be read as an ante from seats nobody is in.
+        const state = makeTable({ seatCount: 6, seated: [0, 1], dealerSeatIndex: 0 });
+        state.basePotAmount = 25;
+        assert.equal(HoldemState.computeContribution(state.seats[4], state.chipLegend, 25), 0);
+    });
+});
+
+describe("a player joins in the middle of a hand", () => {
+    test("they sit the hand out rather than joining a pot they never paid into", () => {
+        const state = makeTable({ seatCount: 6, seated: [0, 1, 2], dealerSeatIndex: 0 });
+        Betting.beginHand(state);
+        Betting.call(state, 0); Betting.call(state, 1); Betting.check(state, 2);
+        Betting.sweepToHandTotals(state);
+
+        // Walks up and is dealt in — the app marks them folded for this hand.
+        state.seats[4].inHand = true;
+        state.seats[4].stack = 100;
+        state.seats[4].folded = true;
+
+        assert.ok(!Betting.liveSeats(state).some(s => s.index === 4), "not live this hand");
+        assert.equal(HoldemState.computeContribution(state.seats[4], state.chipLegend, state.basePotAmount), 0);
+    });
+
+    test("they are a full player again on the next hand", () => {
+        const state = makeTable({ seatCount: 6, seated: [0, 1, 2], dealerSeatIndex: 0 });
+        Betting.beginHand(state);
+        state.seats[4].inHand = true;
+        state.seats[4].stack = 100;
+        state.seats[4].folded = true;
+
+        HoldemState.startNextHand(state);
+        Betting.beginHand(state);
+
+        assert.equal(state.seats[4].folded, false);
+        assert.ok(Betting.liveSeats(state).some(s => s.index === 4), "dealt in like anyone else");
+    });
+});
+
+describe("passing the button around before the cards come out", () => {
+    test("moving the button re-posts the blinds and keeps the chip count straight", () => {
+        const state = makeTable({ seatCount: 6, seated: [0, 1, 2, 3], dealerSeatIndex: 0 });
+        const startingChips = chipsOnTable(state);
+        Betting.beginHand(state);
+
+        assert.equal(state.seats[1].committed, 1);
+        assert.equal(state.seats[2].committed, 2);
+
+        state.dealerSeatIndex = 2;
+        Betting.repostBlinds(state);
+
+        assert.equal(state.seats[1].committed, 0, "the old small blind got their chip back");
+        assert.equal(state.seats[3].committed, 1, "and the new one has posted");
+        assert.equal(state.seats[0].committed, 2);
+        assert.equal(chipsOnTable(state), startingChips, "no chips created or lost in the shuffle");
+    });
+
+    test("passing it round many times still balances", () => {
+        const state = makeTable({ seatCount: 8, seated: [0, 2, 3, 5, 7], dealerSeatIndex: 0 });
+        const startingChips = chipsOnTable(state);
+        Betting.beginHand(state);
+
+        [2, 5, 7, 3, 0, 5].forEach(seat => {
+            state.dealerSeatIndex = seat;
+            Betting.repostBlinds(state);
+            assert.equal(chipsOnTable(state), startingChips, `chips drifted after passing to seat ${seat}`);
+        });
+
+        const { sbIndex, bbIndex } = HoldemState.getBlindSeats(state);
+        assert.equal(Betting.committed(state.seats[sbIndex]), 1);
+        assert.equal(Betting.committed(state.seats[bbIndex]), 2);
+    });
+
+    test("once somebody has acted, the blinds are settled", () => {
+        const state = makeTable({ seatCount: 4, seated: [0, 1, 2, 3], dealerSeatIndex: 0 });
+        Betting.beginHand(state);
+        assert.equal(Betting.onlyBlindsIn(state), true, "nothing but blinds so far");
+
+        Betting.call(state, 3);
+        assert.equal(Betting.onlyBlindsIn(state), false, "a call means the blinds are set where they are");
+    });
+});
+
+describe("naming the blinds by hand", () => {
+    test("a named blind wins over the button order", () => {
+        const state = makeTable({ seatCount: 6, seated: [0, 1, 2, 3], dealerSeatIndex: 0 });
+        state.blindOverride = { sbIndex: 3, bbIndex: 0 };
+
+        const { sbIndex, bbIndex, manual } = HoldemState.getBlindSeats(state);
+        assert.equal(sbIndex, 3);
+        assert.equal(bbIndex, 0);
+        assert.equal(manual, true);
+
+        Betting.beginHand(state);
+        assert.equal(state.seats[3].committed, 1);
+        assert.equal(state.seats[0].committed, 2);
+        assert.equal(state.seats[1].committed, 0, "the positional small blind posts nothing");
+    });
+
+    test("a named blind on a player who isn't dealt in is ignored", () => {
+        const state = makeTable({ seatCount: 6, seated: [0, 1, 2], dealerSeatIndex: 0 });
+        state.blindOverride = { sbIndex: 4, bbIndex: 0 }; // seat 4 is an empty chair
+
+        const { sbIndex, manual } = HoldemState.getBlindSeats(state);
+        assert.ok(!manual, "falls back to the button order rather than posting to nobody");
+        assert.ok(state.seats[sbIndex].inHand);
+    });
+
+    test("both blinds on one player is refused", () => {
+        const state = makeTable({ seatCount: 6, seated: [0, 1, 2], dealerSeatIndex: 0 });
+        state.blindOverride = { sbIndex: 1, bbIndex: 1 };
+        const { sbIndex, bbIndex } = HoldemState.getBlindSeats(state);
+        assert.notEqual(sbIndex, bbIndex);
+    });
+
+    test("naming blinds heads-up still acts in the right order", () => {
+        const state = makeTable({ seatCount: 6, seated: [2, 5], dealerSeatIndex: 2 });
+        state.blindOverride = { sbIndex: 5, bbIndex: 2 }; // deliberately the reverse
+
+        Betting.beginHand(state);
+        assert.equal(state.seats[5].committed, 1);
+        assert.equal(state.seats[2].committed, 2);
+        assert.equal(state.actingSeatIndex, 5, "the small blind acts first pre-flop heads-up");
+
+        Betting.call(state, 5);
+        Betting.check(state, 2);
+        Betting.closeStreet(state);
+        assert.equal(state.actingSeatIndex, 2, "and the big blind leads after the flop");
+    });
+
+    test("the naming only lasts the hand it was made for", () => {
+        const state = makeTable({ seatCount: 6, seated: [0, 1, 2, 3], dealerSeatIndex: 0 });
+        state.blindOverride = { sbIndex: 3, bbIndex: 0 };
+        Betting.beginHand(state);
+
+        HoldemState.startNextHand(state);
+        assert.equal(state.blindOverride, null, "blinds go back to following the button");
+    });
+});
+
+describe("the first hand on a fresh table", () => {
+    test("the button never starts on an empty chair", () => {
+        const state = HoldemState.createDefault();
+        HoldemState.resizeSeats(state, 9);
+        [4, 6, 7].forEach(i => { state.seats[i].inHand = true; state.seats[i].stack = 100; });
+        assert.equal(state.dealerSeatIndex, 0, "a fresh table starts the button on seat 1");
+        assert.equal(state.seats[0].inHand, false, "which nobody is sitting in");
+
+        Betting.beginHand(state);
+
+        assert.ok(state.seats[state.dealerSeatIndex].inHand, "the button moved to a real player");
+        const { sbIndex, bbIndex } = HoldemState.getBlindSeats(state);
+        assert.ok(state.seats[sbIndex].inHand);
+        assert.ok(state.seats[bbIndex].inHand);
+        assert.notEqual(sbIndex, bbIndex);
+    });
+
+    test("a table that empties out around the button recovers", () => {
+        const state = makeTable({ seatCount: 6, seated: [0, 1, 2, 3], dealerSeatIndex: 3 });
+        state.seats[3].inHand = false; // the player holding the button leaves
+        HoldemState.ensureButtonOnPlayer(state);
+        assert.ok(state.seats[state.dealerSeatIndex].inHand);
+    });
+
+    test("two players left after everyone else walks is heads-up, blinds reversed", () => {
+        const state = makeTable({ seatCount: 6, seated: [0, 1, 2, 3], dealerSeatIndex: 0 });
+        [2, 3].forEach(i => { state.seats[i].inHand = false; });
+
+        HoldemState.startNextHand(state);
+        Betting.beginHand(state);
+
+        const { sbIndex, headsUp } = HoldemState.getBlindSeats(state);
+        assert.equal(headsUp, true);
+        assert.equal(sbIndex, state.dealerSeatIndex, "heads-up the button posts the small blind");
+    });
+});
+
+describe("chips survive a messy table", () => {
+    test("joining, leaving and passing the button never changes the chip count", () => {
+        const state = makeTable({ seatCount: 8, seated: [0, 1, 2, 3], stack: 100, dealerSeatIndex: 0 });
+        state.seats[6].stack = 100; // sitting down but not dealt in yet
+        const startingChips = chipsOnTable(state);
+
+        Betting.beginHand(state);
+        state.dealerSeatIndex = 2;
+        Betting.repostBlinds(state);
+
+        state.seats[6].inHand = true;   // walks up mid-hand
+        state.seats[6].folded = true;
+        assert.equal(chipsOnTable(state), startingChips);
+
+        Betting.call(state, state.actingSeatIndex);
+        state.seats[1].inHand = false;  // and someone storms off
+        Betting.sweepToHandTotals(state);
+
+        assert.equal(chipsOnTable(state), startingChips, "every chip is still accounted for");
+        assert.equal(
+            Money.toCents(potOf(state) + state.seats.reduce((s, p) => s + (Number(p.stack) || 0), 0)),
+            Money.toCents(startingChips),
+            "and the pot plus the stacks is the whole table"
+        );
+    });
+});
@@ -0,0 +1,126 @@
+const { test, describe } = require("node:test");
+const assert = require("node:assert/strict");
+const { Money, HandHistoryExport } = require("./load");
+
+describe("Money.format", () => {
+    test("whole amounts drop the pointless cents", () => {
+        assert.equal(Money.format(12), "$12");
+        assert.equal(Money.format(450), "$450");
+        assert.equal(Money.format(1250000), "$1,250,000");
+        assert.equal(Money.format(0), "$0");
+    });
+
+    test("amounts that carry cents still show them", () => {
+        assert.equal(Money.format(12.5), "$12.50");
+        assert.equal(Money.format(0.25), "$0.25");
+        assert.equal(Money.format(3.01), "$3.01");
+    });
+
+    test("a quarter-blind game reads exactly as it did", () => {
+        // The case that would be ruined by dropping cents unconditionally.
+        [0.25, 0.5, 1.75, 12.05].forEach(v => {
+            assert.match(Money.format(v), /\.\d\d$/, `${v} lost its cents`);
+        });
+    });
+
+    test("floating-point dust doesn't invent cents", () => {
+        assert.equal(Money.format(0.1 + 0.2), "$0.30");
+        assert.equal(Money.format(1.0000000001), "$1");
+    });
+
+    test("signed amounts put the sign out front, both scales", () => {
+        assert.equal(Money.formatSigned(87500), "+$87,500");
+        assert.equal(Money.formatSigned(-87500), "-$87,500");
+        assert.equal(Money.formatSigned(-12.5), "-$12.50");
+        assert.equal(Money.formatSigned(0), "$0");
+    });
+
+    test("rubbish in doesn't produce rubbish out", () => {
+        assert.equal(Money.format(null), "$0");
+        assert.equal(Money.format(undefined), "$0");
+        assert.equal(Money.format("nonsense"), "$0");
+    });
+});
+
+describe("Money.forSheet", () => {
+    test("a bare number a spreadsheet will add up", () => {
+        assert.equal(Money.forSheet(1250000), "1250000.00");
+        assert.equal(Money.forSheet(12.5), "12.50");
+        assert.equal(Money.forSheet(-87500), "-87500.00");
+    });
+
+    test("no currency symbol and no thousands separators", () => {
+        const written = Money.forSheet(1234567.89);
+        assert.ok(!written.includes("$"), "a $ makes the cell text");
+        assert.ok(!written.includes(","), "a comma makes the cell text");
+        assert.equal(Number(written), 1234567.89, "and it parses straight back to a number");
+    });
+});
+
+describe("the exported CSV", () => {
+    const history = [
+        { handNumber: 2, timestamp: 0, pot: 1250000, payouts: [{ id: "a", label: "Alexandra", amount: 1250000 }] },
+        { handNumber: 1, timestamp: 0, pot: 24.5, payouts: [{ id: "b", label: "Bob", amount: 24.5 }] },
+    ];
+    const standings = [
+        { id: "a", name: "Alexandra", in: 1250000, won: 1250000, net: 0, boughtIn: 3200000, chipsNow: 3200000, cashPosition: 0 },
+        { id: "b", name: "Bob", in: 24.5, won: 0, net: -24.5, boughtIn: 100, chipsNow: 75.5, cashPosition: -24.5 },
+    ];
+
+    // Splitting on commas isn't good enough: the timestamp column legitimately holds
+    // one ("1/1/1970, 5:00:00 PM") and is quoted for exactly that reason.
+    const splitRow = line => {
+        const fields = [];
+        let field = "";
+        let quoted = false;
+        for (let i = 0; i < line.length; i++) {
+            const c = line[i];
+            if (quoted) {
+                if (c === '"' && line[i + 1] === '"') { field += '"'; i++; }
+                else if (c === '"') quoted = false;
+                else field += c;
+            } else if (c === '"') quoted = true;
+            else if (c === ",") { fields.push(field); field = ""; }
+            else field += c;
+        }
+        fields.push(field);
+        return fields;
+    };
+
+    test("every money cell parses as a number", () => {
+        const csv = HandHistoryExport.toCsv(history, standings);
+        const lines = csv.split("\r\n");
+
+        lines.slice(1, 3).forEach(line => {
+            const cell = splitRow(line)[2]; // Pot
+            assert.ok(cell !== "" && !Number.isNaN(Number(cell)), `pot cell "${cell}" isn't a number`);
+        });
+
+        // Standings rows: every column after the name has to be numeric.
+        const standingsStart = lines.findIndex(l => l.startsWith("Player,"));
+        lines.slice(standingsStart + 1).filter(Boolean).forEach(line => {
+            splitRow(line).slice(1).forEach(cell => {
+                assert.ok(cell !== "" && !Number.isNaN(Number(cell)), `standings cell "${cell}" isn't a number`);
+            });
+        });
+    });
+
+    test("a million-dollar pot doesn't need quoting any more", () => {
+        const csv = HandHistoryExport.toCsv(history, []);
+        assert.ok(csv.includes("1250000.00"), "written plainly");
+        assert.ok(!csv.includes('"$1,250,000'), "not as a quoted, unsummable string");
+    });
+
+    test("names and payout descriptions stay human", () => {
+        const csv = HandHistoryExport.toCsv(history, standings);
+        assert.ok(csv.includes("Alexandra"), "the name column is still a name");
+        assert.ok(csv.includes("Alexandra: $1,250,000"), "the payout column still reads like a sentence");
+    });
+
+    test("a name with a comma is still quoted properly", () => {
+        const csv = HandHistoryExport.toCsv([], [
+            { id: "x", name: "Smith, John", in: 0, won: 0, net: 0, boughtIn: 0, chipsNow: 0, cashPosition: 0 },
+        ]);
+        assert.ok(csv.includes('"Smith, John"'), "the CSV escaping still applies where it's needed");
+    });
+});
@@ -0,0 +1,103 @@
+// Chips only ever leave this tool because a dealer meant them to. Starting the next
+// hand clears every seat's contribution, so an unresolved pot is simply destroyed —
+// the UI now asks first, and the number it quotes has to be exactly what goes.
+const { test, describe } = require("node:test");
+const assert = require("node:assert/strict");
+const { Betting, HoldemState, Money, makeTable, chipsOnTable } = require("./load");
+
+// The same measure the confirmation uses.
+const unresolvedPot = state => HoldemState.unresolvedContributions(state);
+
+describe("what starting the next hand destroys", () => {
+    test("the quoted amount is exactly what leaves the table", () => {
+        const state = makeTable({ seatCount: 6, seated: [0, 1, 2, 3], dealerSeatIndex: 0 });
+        Betting.beginHand(state);
+        Betting.call(state, 3); Betting.call(state, 0); Betting.call(state, 1); Betting.check(state, 2);
+        Betting.sweepToHandTotals(state);
+
+        const before = chipsOnTable(state);
+        const quoted = unresolvedPot(state);
+        assert.ok(quoted > 0, "there is a pot to warn about");
+
+        HoldemState.startNextHand(state);
+
+        assert.equal(
+            Money.toCents(chipsOnTable(state)),
+            Money.toCents(before - quoted),
+            "the dealer must be told the real number, not an approximation"
+        );
+    });
+
+    test("chips still in front of players on the current street are counted too", () => {
+        const state = makeTable({ seatCount: 4, seated: [0, 1, 2], dealerSeatIndex: 0 });
+        Betting.beginHand(state);          // blinds are `committed`, not yet banked
+        Betting.raiseTo(state, 0, 25);     // and so is a raise mid-street
+
+        const before = chipsOnTable(state);
+        const quoted = unresolvedPot(state);
+        HoldemState.startNextHand(state);
+
+        assert.equal(Money.toCents(chipsOnTable(state)), Money.toCents(before - quoted));
+        assert.ok(quoted >= 25, `a live raise has to be included; quoted ${quoted}`);
+    });
+
+    test("a hand that was paid out properly leaves nothing to warn about", () => {
+        const state = makeTable({ seatCount: 4, seated: [0, 1, 2], dealerSeatIndex: 0 });
+        Betting.beginHand(state);
+        Betting.call(state, 0); Betting.call(state, 1); Betting.check(state, 2);
+        Betting.sweepToHandTotals(state);
+
+        const pot = HoldemState.totalPot(state);
+        const payouts = [{ id: state.seats[0].id, label: "Ann", amount: pot }];
+        HoldemState.recordHand(state, payouts);
+        Betting.creditWinnings(state, payouts);
+        HoldemState.startNextHand(state);
+
+        assert.equal(unresolvedPot(state), 0, "nothing left over after a settled hand");
+    });
+
+    test("settling then dealing on conserves every chip", () => {
+        const state = makeTable({ seatCount: 6, seated: [0, 1, 2, 3], dealerSeatIndex: 0 });
+        const start = chipsOnTable(state);
+
+        for (let hand = 0; hand < 5; hand++) {
+            Betting.beginHand(state);
+            const live = Betting.liveSeats(state);
+            live.forEach(s => { if (Betting.toCall(state, s.player) > 0) Betting.call(state, s.index); });
+            Betting.sweepToHandTotals(state);
+
+            const pot = HoldemState.totalPot(state);
+            const winner = Betting.liveSeats(state)[0];
+            const payouts = [{ id: winner.player.id, label: "w", amount: pot }];
+            HoldemState.recordHand(state, payouts);
+            Betting.creditWinnings(state, payouts);
+            HoldemState.startNextHand(state);
+
+            assert.equal(chipsOnTable(state), start, `chips drifted on hand ${hand + 1}`);
+        }
+    });
+
+    test("an empty table has no phantom pot to warn about", () => {
+        const state = makeTable({ seatCount: 6, seated: [] });
+        assert.equal(unresolvedPot(state), 0);
+    });
+
+    test("a standing ante is never warned about, because it isn't lost", () => {
+        // The table default is a stand-in for "everyone puts the same in every hand",
+        // used by a dealer not tracking stacks at all. It re-applies to the next hand
+        // rather than going anywhere, so counting it would nag this dealer before
+        // every single hand — which is why the warning measures the fields
+        // startNextHand actually clears rather than the pot badge.
+        const state = makeTable({ seatCount: 9, seated: [0, 1] });
+        state.basePotAmount = 25;
+        state.seats.forEach(p => { p.amountOverride = null; });
+
+        // The base pot carries into the next hand, so nothing is being thrown away
+        // and the dealer must not be asked to confirm anything.
+        assert.equal(HoldemState.totalPot(state), 50, "the badge still shows a pot");
+        assert.equal(unresolvedPot(state), 0, "but none of it is at risk, so no warning");
+
+        HoldemState.startNextHand(state);
+        assert.equal(HoldemState.totalPot(state), 50, "the standing ante applies to the new hand too");
+    });
+});
@@ -0,0 +1,143 @@
+// When does a bet reopen the action? The most misread rule in poker, and the one a
+// home game argues about longest: a player shoving in less than a full raise does not
+// give everybody behind them another go.
+//
+// TDA Rule 44 — an all-in wager of less than a full raise does not reopen the betting
+// to a player who has already acted and is not facing a full raise.
+const { test, describe } = require("node:test");
+const assert = require("node:assert/strict");
+const { Betting, makeTable, chipsOnTable } = require("./load");
+
+const actedFlags = state => state.seats
+    .map((p, i) => ({ seat: i, acted: p.hasActed, live: p.inHand && !p.folded }))
+    .filter(s => s.live);
+
+describe("a short all-in does not reopen the betting", () => {
+    // Blinds 1/2. Seat 4 raises to 10 (a full raise of 8). Seat 1 calls.
+    // Seat 2 is all-in for 13 — three more, where a full raise needs eight.
+    const shortAllInTable = () => {
+        const state = makeTable({ seatCount: 4, seated: [0, 1, 2, 3], stack: 100, dealerSeatIndex: 0 });
+        state.seats[1].stack = 13;
+        Betting.beginHand(state);
+        Betting.raiseTo(state, 3, 10);
+        Betting.call(state, 0);
+        return state;
+    };
+
+    test("players who already acted are not asked to act again", () => {
+        const state = shortAllInTable();
+        assert.equal(state.seats[0].hasActed, true, "seat 1 has called");
+        assert.equal(state.seats[3].hasActed, true, "seat 4 has raised");
+
+        Betting.allIn(state, 1);
+
+        assert.equal(state.seats[0].hasActed, true, "seat 1 must not be reopened");
+        assert.equal(state.seats[3].hasActed, true, "seat 4 must not be reopened");
+    });
+
+    test("but they do still owe the difference", () => {
+        const state = shortAllInTable();
+        Betting.allIn(state, 1);
+
+        assert.equal(Betting.toCall(state, state.seats[0]), 3, "seat 1 owes the extra 3");
+        assert.equal(Betting.isStreetComplete(state), false, "so the street isn't over");
+    });
+
+    test("a player who had not acted yet keeps full rights", () => {
+        const state = shortAllInTable();
+        assert.equal(state.seats[2].hasActed, false, "seat 3 hasn't acted");
+        Betting.allIn(state, 1);
+        assert.equal(state.seats[2].hasActed, false, "and still hasn't — they may still raise");
+    });
+
+    test("the minimum raise is not shrunk by the short all-in", () => {
+        const state = shortAllInTable();
+        assert.equal(state.lastRaiseSize, 8);
+
+        Betting.allIn(state, 1);
+
+        assert.equal(state.lastRaiseSize, 8, "still the last *full* raise");
+        assert.equal(Betting.minRaiseTo(state), 21, "13 to call plus a full raise of 8");
+    });
+
+    test("calling the short all-in ends the street", () => {
+        const state = shortAllInTable();
+        Betting.allIn(state, 1);
+        Betting.call(state, 2);   // seat 3, who had full rights, just calls
+        Betting.call(state, 3);
+        Betting.call(state, 0);
+        assert.equal(Betting.isStreetComplete(state), true);
+    });
+
+    test("no chips are created or lost by any of it", () => {
+        const state = makeTable({ seatCount: 4, seated: [0, 1, 2, 3], stack: 100, dealerSeatIndex: 0 });
+        state.seats[1].stack = 13;
+        const start = chipsOnTable(state);
+        Betting.beginHand(state);
+        Betting.raiseTo(state, 3, 10);
+        Betting.call(state, 0);
+        Betting.allIn(state, 1);
+        Betting.call(state, 2);
+        Betting.call(state, 3);
+        Betting.call(state, 0);
+        assert.equal(chipsOnTable(state), start);
+    });
+});
+
+describe("a full raise still reopens the betting", () => {
+    test("an all-in that is a full raise or more reopens everyone", () => {
+        const state = makeTable({ seatCount: 4, seated: [0, 1, 2, 3], stack: 100, dealerSeatIndex: 0 });
+        state.seats[1].stack = 40;
+        Betting.beginHand(state);
+        Betting.raiseTo(state, 3, 10);
+        Betting.call(state, 0);
+
+        Betting.allIn(state, 1);   // to 40: an increase of 30, well over the 8 needed
+
+        assert.equal(state.seats[0].hasActed, false, "seat 1 gets another go");
+        assert.equal(state.seats[3].hasActed, false, "and so does seat 4");
+        assert.equal(state.lastRaiseSize, 30);
+        assert.equal(Betting.minRaiseTo(state), 70);
+    });
+
+    test("an ordinary raise reopens everyone", () => {
+        const state = makeTable({ seatCount: 4, seated: [0, 1, 2, 3], dealerSeatIndex: 0 });
+        Betting.beginHand(state);
+        Betting.call(state, 3);
+        Betting.call(state, 0);
+        assert.equal(state.seats[3].hasActed, true);
+
+        Betting.raiseTo(state, 1, 10);
+
+        assert.equal(state.seats[3].hasActed, false);
+        assert.equal(state.seats[0].hasActed, false);
+    });
+
+    test("a raise exactly the size of the last one counts as full", () => {
+        const state = makeTable({ seatCount: 4, seated: [0, 1, 2, 3], stack: 100, dealerSeatIndex: 0 });
+        Betting.beginHand(state);
+        Betting.raiseTo(state, 3, 10);      // raise of 8
+        Betting.call(state, 0);
+
+        Betting.raiseTo(state, 1, 18);      // exactly 8 more — a legal minimum raise
+
+        assert.equal(state.seats[0].hasActed, false, "a minimum raise still reopens");
+        assert.equal(state.lastRaiseSize, 8);
+    });
+
+    test("the first raise of a street is measured against the big blind", () => {
+        const state = makeTable({ seatCount: 4, seated: [0, 1, 2, 3], stack: 100, dealerSeatIndex: 0 });
+        Betting.beginHand(state);
+        Betting.call(state, 3);
+        Betting.call(state, 0);
+        Betting.call(state, 1);
+        Betting.check(state, 2);
+        Betting.closeStreet(state);         // to the flop, no bet yet
+
+        const first = Betting.nextToAct(state, state.dealerSeatIndex);
+        Betting.raiseTo(state, first, 2);   // a bet of exactly one big blind
+
+        const others = state.seats.filter((p, i) => p.inHand && !p.folded && i !== first);
+        assert.ok(others.every(p => p.hasActed === false), "a full-sized opening bet reopens everyone");
+    });
+});
@@ -0,0 +1,144 @@
+// Values a dealer can actually produce with a typo, and the ones a corrupted save
+// can produce on its own. None of these should be able to move chips.
+const { test, describe } = require("node:test");
+const assert = require("node:assert/strict");
+const { Betting, HoldemState, makeTable, chipsOnTable } = require("./load");
+
+describe("a stack can never go negative", () => {
+    test("a mistyped negative stack reads as empty, not as owing chips", () => {
+        const state = makeTable({ seatCount: 4, seated: [0, 1, 2] });
+        state.seats[0].stack = -50;
+        assert.equal(Betting.stackOf(state, state.seats[0]), 0);
+    });
+
+    test("a negative stack can't be bet with", () => {
+        const state = makeTable({ seatCount: 4, seated: [0, 1, 2] });
+        state.seats[0].stack = -50;
+        const before = state.seats.reduce((s, p) => s + Math.max(0, Number(p.stack) || 0), 0);
+
+        const moved = Betting.putIn(state, 0, 25);
+
+        assert.equal(moved, 0, "nothing moves out of an empty stack");
+        assert.ok(Betting.stackOf(state, state.seats[0]) >= 0);
+        assert.equal(state.seats[0].committed, 0, "and nothing appears in front of them");
+        assert.ok(state.seats.reduce((s, p) => s + Math.max(0, Number(p.stack) || 0), 0) <= before);
+    });
+
+    test("a negative table default doesn't hand everyone a negative stack", () => {
+        const state = makeTable({ seatCount: 4, seated: [0, 1, 2] });
+        state.seats.forEach(p => { p.stack = null; });
+        state.defaultStack = -100;
+        state.seats.forEach(p => assert.equal(Betting.stackOf(state, p), 0));
+    });
+
+    test("a negative stack doesn't make a player look like they can still bet", () => {
+        const state = makeTable({ seatCount: 4, seated: [0, 1, 2] });
+        state.seats[0].stack = -50;
+        assert.ok(!Betting.seatsWithChips(state).some(s => s.index === 0));
+    });
+});
+
+describe("blinds that can't be posted", () => {
+    test("negative blinds post nothing rather than paying players to sit down", () => {
+        const state = makeTable({ seatCount: 4, seated: [0, 1, 2] });
+        state.smallBlind = -5;
+        state.bigBlind = -10;
+        const before = chipsOnTable(state);
+
+        Betting.beginHand(state);
+
+        state.seats.forEach(p => assert.equal(p.committed, 0));
+        assert.equal(chipsOnTable(state), before);
+    });
+
+    test("an unreadable blind doesn't wedge the hand", () => {
+        const state = makeTable({ seatCount: 4, seated: [0, 1, 2] });
+        state.bigBlind = NaN;
+        state.smallBlind = 1;
+
+        Betting.beginHand(state);
+
+        assert.ok(Number.isFinite(state.currentBet), "the bet to match is still a number");
+        assert.ok(!Number.isNaN(Betting.potSoFar(state)));
+    });
+
+    test("blinds nobody can cover put those players all-in and move on", () => {
+        const state = makeTable({ seatCount: 4, seated: [0, 1, 2], stack: 10 });
+        state.smallBlind = 500;
+        state.bigBlind = 1000;
+        const before = chipsOnTable(state);
+
+        Betting.beginHand(state);
+
+        assert.equal(chipsOnTable(state), before, "no chips invented covering a blind");
+        state.seats.forEach(p => assert.ok((Number(p.stack) || 0) >= 0));
+        assert.ok(state.actingSeatIndex === null || state.seats[state.actingSeatIndex].inHand);
+    });
+});
+
+describe("a saved table that comes back damaged", () => {
+    test("unreadable storage falls back to a fresh table", () => {
+        // load() has to survive whatever is in localStorage, because the alternative
+        // is a dealer opening the tool mid-session to a blank screen.
+        const original = globalThis.localStorage;
+        globalThis.localStorage = {
+            getItem: () => "{not json at all",
+            setItem: () => {},
+            removeItem: () => {},
+        };
+        const state = HoldemState.load();
+        globalThis.localStorage = original;
+
+        assert.equal(state.seats.length, HoldemState.DEFAULT_SEAT_COUNT);
+        assert.equal(state.handNumber, 1);
+    });
+
+    test("a save missing its seats is treated as no save at all", () => {
+        const original = globalThis.localStorage;
+        globalThis.localStorage = {
+            getItem: () => JSON.stringify({ handNumber: 7, smallBlind: 3 }),
+            setItem: () => {},
+            removeItem: () => {},
+        };
+        const state = HoldemState.load();
+        globalThis.localStorage = original;
+
+        assert.ok(Array.isArray(state.seats) && state.seats.length > 0);
+    });
+
+    test("a save from before a field existed gets the field, not undefined", () => {
+        const original = globalThis.localStorage;
+        globalThis.localStorage = {
+            getItem: () => JSON.stringify({
+                seats: [{ id: "a", name: "Ann", inHand: true }, { id: "b", name: "Ben", inHand: true }],
+                handNumber: 4,
+            }),
+            setItem: () => {},
+            removeItem: () => {},
+        };
+        const state = HoldemState.load();
+        globalThis.localStorage = original;
+
+        assert.equal(state.blindOverride, null);
+        assert.equal(state.street, "preflop");
+        state.seats.forEach(p => {
+            assert.equal(p.committed, 0);
+            assert.equal(p.hasActed, false);
+            assert.equal(p.buyIns, 0);
+        });
+        // And it has to be playable, not just parseable.
+        assert.doesNotThrow(() => Betting.beginHand(state));
+    });
+
+    test("storage that refuses to be written doesn't take the table down", () => {
+        const original = globalThis.localStorage;
+        globalThis.localStorage = {
+            getItem: () => null,
+            setItem: () => { throw new Error("QuotaExceededError"); },
+            removeItem: () => {},
+        };
+        const state = HoldemState.createDefault();
+        assert.doesNotThrow(() => HoldemState.save(state), "a full disk must not break the hand in progress");
+        globalThis.localStorage = original;
+    });
+});
@@ -0,0 +1,134 @@
+// Drives uiAudit.js over the dealer's surfaces at every viewport worth caring about.
+//
+//   node tests/holdem/runUiAudit.js [baseUrl]
+//
+// Needs Playwright available (`npx playwright install chromium` once). It is
+// deliberately NOT wired into the unit-test suite or CI, because that suite is
+// dependency-free and runs in a second — this one needs a browser and a running
+// site. Run it after any change that adds or resizes a control.
+//
+// No Playwright to hand? Open the page, paste tests/holdem/uiAudit.js into devtools,
+// and call LayoutAudit.runAll(). Same checks, one viewport.
+const path = require("path");
+
+const BASE = process.argv[2] || "http://localhost:5299";
+const AUDIT = path.join(__dirname, "uiAudit.js");
+
+// Portrait phones, tablets, desktops, then the same phones on their side — landscape
+// is where this layout has broken most often, because the table is sized from width
+// and the action bar is fixed to a very short viewport.
+const VIEWPORTS = [
+    [360, 640, "Galaxy S8"], [375, 667, "iPhone SE"], [390, 844, "iPhone 14"],
+    [412, 915, "Pixel 7"], [430, 932, "iPhone Pro Max"],
+    [768, 1024, "iPad"], [834, 1112, "iPad Air"], [1024, 1366, "iPad Pro"],
+    [1280, 900, "desktop"], [1600, 1000, "wide desktop"],
+    [640, 360, "S8 landscape"], [667, 375, "SE landscape"], [844, 390, "iPhone landscape"],
+];
+
+const OVERLAYS = [
+    ["rulings", () => document.getElementById("openRulingsBtn").click()],
+    ["seat menu", () => SeatMenu.open(HoldemState.load(), {}, 0)],
+    ["card picker", () => { document.getElementById("cardPickerOverlay").hidden = false; }],
+    ["add chips", () => AddChips.open(HoldemState.load(), 0, () => {})],
+    ["pot wizard", () => document.getElementById("resolvePotBtn").click()],
+];
+
+// A table part-way through a real night: long names, uneven stacks, a hand log.
+function seedTable() {
+    const state = HoldemState.createDefault();
+    HoldemState.resizeSeats(state, 9);
+    [["Christopher", 1200], ["Mike from work", 800], ["Alexandra", 1500], ["Bob", 250], ["Dee", 600]]
+        .forEach(([name, cash], i) => {
+            state.seats[i].name = name;
+            state.seats[i].inHand = true;
+            state.seats[i].buyIns = cash;
+            state.seats[i].stack = cash;
+        });
+    state.smallBlind = 5;
+    state.bigBlind = 10;
+    for (let hand = 1; hand <= 4; hand++) {
+        state.handHistory.push({
+            handNumber: hand, timestamp: Date.now(), pot: 120,
+            payouts: [{ id: state.seats[hand % 5].id, label: "P", amount: 120 }],
+            ledger: state.seats.slice(0, 5).map(p => ({ id: p.id, name: p.name, in: 30, won: 0 })),
+        });
+    }
+    state.handNumber = 5;
+    HoldemState.save(state);
+}
+
+async function main() {
+    let chromium;
+    try {
+        ({ chromium } = require("playwright"));
+    } catch {
+        console.error("This script needs Playwright: npm i -D playwright && npx playwright install chromium");
+        console.error("Or paste tests/holdem/uiAudit.js into devtools and call LayoutAudit.runAll().");
+        process.exit(2);
+    }
+
+    const browser = await chromium.launch();
+    const page = await browser.newPage();
+    const failures = [];
+    const warnings = [];
+    let checks = 0;
+
+    for (const [width, height, label] of VIEWPORTS) {
+        await page.setViewportSize({ width, height });
+
+        await page.goto(`${BASE}/Casino/TexasHoldem`);
+        await page.evaluate(seedTable);
+        await page.goto(`${BASE}/Casino/TexasHoldem`);
+        await page.click("#nextHandBtn");
+        await page.waitForTimeout(300);
+        await page.evaluate(() => document.querySelectorAll("details.sidebarPanel").forEach(d => { d.open = true; }));
+        await page.addScriptTag({ path: AUDIT });
+
+        const table = await page.evaluate(() => LayoutAudit.runAll());
+        checks++;
+        if (!table.clean) failures.push({ where: `table · ${label} ${width}x${height}`, offenders: table.failed.flatMap(f => f.offenders) });
+        table.warnings.forEach(w => warnings.push(`${label}: ${w}`));
+
+        for (const [name, open] of OVERLAYS) {
+            await page.evaluate(open);
+            await page.waitForTimeout(180);
+            checks++;
+            const result = await page.evaluate(() => {
+                const overlay = [...document.querySelectorAll("[id$='Overlay']")].find(o => !o.hidden);
+                if (!overlay) return { offenders: [] };
+                return LayoutAudit.occlusion(`#${overlay.id} button, #${overlay.id} a, #${overlay.id} input`);
+            });
+            await page.evaluate(() => document.querySelectorAll("[id$='Overlay']").forEach(o => { o.hidden = true; }));
+            if (result.offenders.length) failures.push({ where: `${name} · ${label} ${width}x${height}`, offenders: result.offenders });
+        }
+    }
+
+    for (const [width, height, label] of VIEWPORTS.filter((_, i) => i % 4 === 0)) {
+        await page.setViewportSize({ width, height });
+        await page.goto(`${BASE}/Casino/TexasHoldem/QuickSplit`);
+        await page.evaluate(() => {
+            const button = [...document.querySelectorAll("button")].find(b => /all.?in/i.test(b.textContent));
+            if (button) button.click();
+        });
+        await page.addScriptTag({ path: AUDIT });
+        checks++;
+        const result = await page.evaluate(() => LayoutAudit.runAll({ occlusionSelector: "main button, main a, main input" }));
+        if (!result.clean) failures.push({ where: `quick split · ${label} ${width}x${height}`, offenders: result.failed.flatMap(f => f.offenders) });
+    }
+
+    await browser.close();
+
+    console.log(`${checks} audits across ${VIEWPORTS.length} viewports`);
+    warnings.forEach(w => console.log(`  note: ${w}`));
+    if (failures.length === 0) {
+        console.log("clean");
+        return;
+    }
+    failures.forEach(f => {
+        console.log(`\nFAIL ${f.where}`);
+        f.offenders.forEach(o => console.log(`  ${o}`));
+    });
+    process.exit(1);
+}
+
+main();
@@ -0,0 +1,546 @@
+// Layout and touch audits for the dealer, written once so they stop being written
+// again every round.
+//
+// These checks have been re-typed into a browser console at least six times over
+// the course of building this thing, and each time they only covered whatever had
+// just been changed. That is exactly how the standings table shipped with a
+// zero-pixel player-name column and survived two rounds: the audit that would have
+// caught it existed only in a previous session's scrollback.
+//
+// This file is deliberately dependency-free and browser-side. It is injected into
+// the page (see runUiAudit.js) rather than imported, so it needs no build step, no
+// package.json, and no browser automation of its own — anyone can also paste it
+// into devtools and call LayoutAudit.runAll().
+const LayoutAudit = {
+    // Everything a dealer has to be able to hit.
+    CONTROL_SELECTOR: "button, a, input, select, textarea, [role='button'], .seat",
+
+    describe(el) {
+        if (!el) return "(nothing)";
+        const id = el.id ? `#${el.id}` : "";
+        const cls = (el.className || "").toString().trim().split(/\s+/).filter(Boolean).slice(0, 2).join(".");
+        const text = (el.textContent || "").replace(/\s+/g, " ").trim().slice(0, 24);
+        return `${el.tagName.toLowerCase()}${id}${cls ? "." + cls : ""}${text ? ` "${text}"` : ""}`;
+    },
+
+    visibleControls() {
+        return [...document.querySelectorAll(this.CONTROL_SELECTOR)].filter(el => {
+            const rect = el.getBoundingClientRect();
+            if (rect.width === 0 || rect.height === 0) return false;
+            const style = getComputedStyle(el);
+            return style.visibility !== "hidden" && style.display !== "none";
+        });
+    },
+
+    // ---- Touch (see the mobile round) ----
+
+    // Without touch-action: manipulation a mobile browser holds every tap for ~300ms
+    // deciding whether it was a double-tap-to-zoom. This tool uses double-tap on a
+    // seat as its fold shortcut, so that wait is on the critical path.
+    touchAction() {
+        const offenders = this.visibleControls()
+            .filter(el => getComputedStyle(el).touchAction === "auto")
+            .map(el => this.describe(el));
+        return { name: "touch-action", offenders, checked: this.visibleControls().length };
+    },
+
+    tapHighlight() {
+        const offenders = this.visibleControls()
+            .filter(el => {
+                const colour = getComputedStyle(el).webkitTapHighlightColor;
+                return colour && !/rgba\(0,\s*0,\s*0,\s*0\)|transparent/.test(colour);
+            })
+            .map(el => this.describe(el));
+        return { name: "tap-highlight", offenders, checked: this.visibleControls().length };
+    },
+
+    // Text selection must stay ON for anything a dealer types into.
+    textSelectable() {
+        const offenders = [...document.querySelectorAll("input[type='text'], input[type='number'], textarea")]
+            .filter(el => el.offsetParent !== null)
+            .filter(el => {
+                const style = getComputedStyle(el);
+                return (style.webkitUserSelect || style.userSelect) === "none";
+            })
+            .map(el => this.describe(el));
+        return { name: "fields stay selectable", offenders };
+    },
+
+    // ---- Reachability (see the occlusion round) ----
+
+    // A control covered by something else is unreachable however good it looks.
+    // Sampling several points matters: a button you can only hit in one corner is
+    // covered for practical purposes.
+    // Can this element be brought into view by scrolling? Something below the fold on
+    // a page that scrolls is perfectly reachable; something below the fold in a panel
+    // that *doesn't* scroll is lost. The first version of this check didn't make the
+    // distinction and reported every link under the fold as a fault.
+    reachableByScrolling(el) {
+        const rect = el.getBoundingClientRect();
+        if (getComputedStyle(el).position === "fixed") return false;
+
+        for (let node = el.parentElement; node; node = node.parentElement) {
+            const style = getComputedStyle(node);
+            const scrolls = /auto|scroll|overlay/.test(style.overflowY) || node === document.body;
+            if (!scrolls) continue;
+            const box = node === document.body ? { top: 0, bottom: innerHeight } : node.getBoundingClientRect();
+            const room = node === document.body
+                ? document.documentElement.scrollHeight - innerHeight - scrollY
+                : node.scrollHeight - node.clientHeight - node.scrollTop;
+            if (rect.top >= box.bottom && room > 0) return true;
+            if (rect.bottom <= box.top && (node === document.body ? scrollY > 0 : node.scrollTop > 0)) return true;
+        }
+        return false;
+    },
+
+    occlusion(selector = "#actionBar button, #holdemHeader button, .seat") {
+        const offenders = [];
+        const warnings = [];
+        [...document.querySelectorAll(selector)].forEach(el => {
+            const rect = el.getBoundingClientRect();
+            if (rect.width === 0 || rect.height === 0) return;
+
+            const outsideViewport = rect.bottom <= 0 || rect.top >= innerHeight ||
+                                    rect.right <= 0 || rect.left >= innerWidth;
+            if (outsideViewport) {
+                if (!this.reachableByScrolling(el)) {
+                    offenders.push(`${this.describe(el)} :: off-screen and cannot be scrolled to`);
+                }
+                return;
+            }
+
+            const points = [
+                [rect.left + rect.width / 2, rect.top + rect.height / 2],
+                [rect.left + rect.width * 0.25, rect.top + rect.height * 0.3],
+                [rect.left + rect.width * 0.75, rect.top + rect.height * 0.3],
+                [rect.left + rect.width * 0.25, rect.top + rect.height * 0.7],
+                [rect.left + rect.width * 0.75, rect.top + rect.height * 0.7],
+            ].filter(([x, y]) => x >= 0 && y >= 0 && x < innerWidth && y < innerHeight);
+            if (points.length === 0) return;
+
+            let blocked = 0;
+            let testable = 0;
+            let blockedBy = null;
+            points.forEach(([x, y]) => {
+                const top = document.elementFromPoint(x, y);
+                // A null result means the point isn't hit-testable — typically it sits
+                // inside the element but outside a scrollable ancestor's clip, i.e. the
+                // control is scrolled out of view rather than covered by anything.
+                // Counting that as "covered by null" was reporting a perfectly
+                // reachable button in a sheet that scrolls.
+                if (!top) return;
+                testable++;
+                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.
+                //
+                // 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);
+            });
+
+            if (testable === 0) {
+                if (!this.reachableByScrolling(el)) {
+                    offenders.push(`${this.describe(el)} :: not hit-testable anywhere and cannot be scrolled to`);
+                }
+                return;
+            }
+            if (blocked === 0) return;
+
+            const note = `${this.describe(el)} :: ${blocked === testable ? "fully" : `${blocked}/${testable}`} covered by ${blockedBy}`;
+
+            // A toast is transient by design: it dismisses itself and carries a close
+            // button, and on a desktop it necessarily lands over a table that fills the
+            // content column. Partial overlap from one is a fact of the layout, not a
+            // fault. Being *fully* covered by a toast is still a failure though — that
+            // was a real bug once, where a seat sat exactly under the Undo button and a
+            // tap meant for a player took back the last action instead.
+            const transient = blockedBy && /toast/i.test(blockedBy);
+            if (transient && blocked < testable) warnings.push(note);
+            else offenders.push(note);
+        });
+        return { name: "nothing important is covered", offenders, warnings };
+    },
+
+    // ---- Layout (the check that would have caught the standings regression) ----
+
+    // A grid column squeezed to nothing doesn't truncate its text, it erases it.
+    // This is the one that was missing: the player-name column sat at 0px through
+    // two rounds because nothing ever asked whether a column had survived.
+    collapsedColumns() {
+        const offenders = [];
+        [...document.querySelectorAll("[class*='Row'], [class*='row']")].forEach(row => {
+            if (getComputedStyle(row).display !== "grid") return;
+            [...row.children].forEach(cell => {
+                if (getComputedStyle(cell).display === "none") return;
+                const hasText = (cell.textContent || "").trim().length > 0;
+                if (hasText && cell.getBoundingClientRect().width < 4) {
+                    offenders.push(`${this.describe(row)} > ${this.describe(cell)} :: ${Math.round(cell.getBoundingClientRect().width)}px wide`);
+                }
+            });
+        });
+        return { name: "no column collapsed to nothing", offenders };
+    },
+
+    // Text actually painted outside the box meant to contain it — which on a table of
+    // overlapping seats means painted on top of a neighbour.
+    //
+    // The clipping check is the whole subtlety, and the first version of this got it
+    // wrong. A Range's bounding rect measures the *laid out* text, which happily runs
+    // past the element when `overflow: hidden` is quietly clipping it — so an
+    // ellipsised name was reported as spilling when nothing was drawn outside at all.
+    // Only overflow that is actually visible can paint over a neighbour.
+    textSpill(selector = ".seatPuckStack, .seatPuckTotal, .seatPuckName") {
+        const offenders = [];
+        [...document.querySelectorAll(selector)].forEach(el => {
+            const text = (el.textContent || "").trim();
+            if (!text) return;
+
+            const style = getComputedStyle(el);
+            const clipsItself = style.overflow !== "visible" || style.overflowX !== "visible";
+            if (clipsItself) return;
+
+            const container = el.closest(".seat") || el.parentElement;
+            if (!container) return;
+
+            const range = document.createRange();
+            range.selectNodeContents(el);
+            const drawn = range.getBoundingClientRect();
+            const bounds = container.getBoundingClientRect();
+            if (drawn.left < bounds.left - 1 || drawn.right > bounds.right + 1) {
+                offenders.push(`${this.describe(el)} "${text}" paints outside ${this.describe(container)}`);
+            }
+        });
+        return { name: "no text painted outside its box", offenders };
+    },
+
+    horizontalOverflow() {
+        const offenders = document.documentElement.scrollWidth > innerWidth + 1
+            ? [`page scrolls sideways: ${document.documentElement.scrollWidth}px in a ${innerWidth}px viewport`]
+            : [];
+        return { name: "page never scrolls sideways", offenders };
+    },
+
+    // iOS zooms the whole page when a field under 16px takes focus, and the dealer
+    // is then pinching back out mid-hand.
+    fieldFontSize() {
+        const offenders = [...document.querySelectorAll("input, textarea, select")]
+            .filter(el => el.offsetParent !== null)
+            .filter(el => ["text", "number", "search", "tel", "url", "email", "password", ""].includes(el.type || ""))
+            .filter(el => parseFloat(getComputedStyle(el).fontSize) < 16)
+            .map(el => `${this.describe(el)} at ${getComputedStyle(el).fontSize}`);
+        return { name: "no field small enough to trigger iOS zoom", offenders };
+    },
+
+    // ---- Contrast ----
+    //
+    // This check has been got wrong twice before, both times by being too clever about
+    // backgrounds. The first version read only `background-color`, so every sheet
+    // painted with a gradient was measured against transparency and the dealer puck's
+    // dark "D" was reported at 1.2:1 against nothing. The second over-corrected and
+    // treated low-alpha gradient stops as opaque, scoring white-on-dark at 1.0:1.
+    //
+    // So it is built to be incapable of false positives instead of trying to be exact.
+    // Backgrounds composite properly through alpha, and where a gradient is involved
+    // every one of its colour stops is tried and the *most flattering* one is used. A
+    // finding therefore means the text fails even under the reading most generous to
+    // it, which is a claim worth making. Text that can't be resolved to any opaque
+    // background is reported separately as unmeasured rather than guessed at.
+
+    parseColour(value) {
+        const match = String(value).match(/rgba?\(([^)]+)\)/);
+        if (!match) return null;
+        const parts = match[1].split(/[,\s/]+/).filter(Boolean).map(Number);
+        if (parts.length < 3 || parts.some(Number.isNaN)) return null;
+        return { r: parts[0], g: parts[1], b: parts[2], a: parts.length > 3 ? parts[3] : 1 };
+    },
+
+    // Colour stops out of any gradient in a background-image.
+    gradientStops(backgroundImage) {
+        if (!backgroundImage || backgroundImage === "none") return [];
+        return (backgroundImage.match(/rgba?\([^)]+\)/g) || [])
+            .map(c => this.parseColour(c))
+            .filter(Boolean);
+    },
+
+    over(top, bottom) {
+        const a = top.a;
+        return {
+            r: top.r * a + bottom.r * (1 - a),
+            g: top.g * a + bottom.g * (1 - a),
+            b: top.b * a + bottom.b * (1 - a),
+            a: 1,
+        };
+    },
+
+    relativeLuminance({ r, g, b }) {
+        const channel = v => {
+            const s = v / 255;
+            return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+        };
+        return 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b);
+    },
+
+    contrastRatio(fg, bg) {
+        const a = this.relativeLuminance(fg);
+        const b = this.relativeLuminance(bg);
+        return (Math.max(a, b) + 0.05) / (Math.min(a, b) + 0.05);
+    },
+
+    // Every background this text could actually be sitting on.
+    //
+    // Layers are collected from the element outwards and stop at the first fully
+    // opaque one, because nothing behind that is visible. Getting this wrong in the
+    // lenient direction is just as bad as the old false positives: an earlier version
+    // kept walking past an opaque gradient and offered the page background as a
+    // candidate, which scored white-on-a-mid-grey-panel as though it were
+    // white-on-near-black and would have waved real problems through.
+    //
+    // A gradient contributes one candidate per colour stop; translucent layers above
+    // the opaque one are composited onto each candidate in order.
+    backgroundCandidates(el) {
+        const translucent = [];   // top-down, above the opaque layer
+        let base = null;          // candidate colours for the first opaque layer
+
+        for (let node = el; node && !base; node = node.parentElement) {
+            const style = getComputedStyle(node);
+            const stops = this.gradientStops(style.backgroundImage);
+            const colour = this.parseColour(style.backgroundColor);
+
+            // A gradient whose stops are all opaque hides everything behind it.
+            if (stops.length > 0 && stops.every(s => s.a === 1)) {
+                base = stops;
+                break;
+            }
+            stops.forEach(s => { if (s.a > 0) translucent.push(s); });
+
+            if (colour && colour.a === 1) { base = [colour]; break; }
+            if (colour && colour.a > 0) translucent.push(colour);
+        }
+
+        if (!base) {
+            // Nothing opaque anywhere up the tree — fall back to the page's own colour
+            // so a finding is still measured against something real.
+            const page = this.parseColour(getComputedStyle(document.documentElement).backgroundColor);
+            base = [page && page.a === 1 ? page : { r: 10, g: 10, b: 10, a: 1 }];
+        }
+
+        // Fold the translucent layers back on, innermost last so it lands on top.
+        return base.map(candidate => {
+            let composed = candidate;
+            for (let i = translucent.length - 1; i >= 0; i--) composed = this.over(translucent[i], composed);
+            return composed;
+        });
+    },
+
+    contrast({ minimum = 4.5, largeMinimum = 3, selector = null } = {}) {
+        const offenders = [];
+        const unmeasured = [];
+
+        const nodes = selector
+            ? [...document.querySelectorAll(selector)]
+            : [...document.querySelectorAll("*")];
+
+        nodes.forEach(el => {
+            if (el.children.length > 0) return;               // leaf text only
+            const text = (el.textContent || "").trim();
+            if (!text) return;
+            const rect = el.getBoundingClientRect();
+            if (rect.width === 0 || rect.height === 0) return;
+            const style = getComputedStyle(el);
+            if (style.visibility === "hidden" || style.display === "none") return;
+            if (parseFloat(style.opacity) < 0.99) return;     // faded on purpose
+            // Decoration is exempt by definition: the watermark on the felt is meant
+            // to be barely there, and holding it to a reading threshold would mean
+            // making it not a watermark. Marked aria-hidden so screen readers skip it
+            // too, which is the same claim expressed where it also does some good.
+            if (el.closest("[aria-hidden='true']")) return;
+
+            const fgRaw = this.parseColour(style.color);
+            if (!fgRaw) return;
+
+            const candidates = this.backgroundCandidates(el);
+            if (candidates.length === 0) {
+                unmeasured.push(`${this.describe(el)} :: no opaque background found`);
+                return;
+            }
+
+            // The kindest reading available: best contrast across every candidate.
+            let best = 0;
+            candidates.forEach(bg => {
+                const fg = fgRaw.a === 1 ? fgRaw : this.over(fgRaw, bg);
+                best = Math.max(best, this.contrastRatio(fg, bg));
+            });
+
+            const sizePx = parseFloat(style.fontSize);
+            const weight = parseInt(style.fontWeight, 10) || 400;
+            const isLarge = sizePx >= 24 || (sizePx >= 18.66 && weight >= 700);
+            const required = isLarge ? largeMinimum : minimum;
+
+            if (best + 0.05 < required) {
+                offenders.push(`${this.describe(el)} :: ${best.toFixed(2)}:1 (needs ${required}:1) at ${Math.round(sizePx)}px`);
+            }
+        });
+
+        return { name: "text meets WCAG AA contrast", offenders, unmeasured };
+    },
+
+    // ---- Reach (touch target sizes) ----
+
+    // What a fingertip can actually hit, which is not the same as the element's box.
+    //
+    // Two things make the box misleading, and the first version of this check was
+    // fooled by both. A control can be padded out with a transparent ::after, so it
+    // responds well beyond its painted size — that's how a 22px dealer puck should
+    // stay 22px and still take a thumb. And a checkbox wrapped in a label is hit by
+    // tapping anywhere on the label, so a 24px box inside a 320x44 label is a
+    // perfectly good target. Measuring the box reported both as faults.
+    //
+    // So it probes outwards with elementFromPoint until the point stops landing on the
+    // control, which is the thing a finger actually experiences.
+    effectiveTarget(el, limit = 48) {
+        const rect = el.getBoundingClientRect();
+        const cx = rect.left + rect.width / 2;
+        const cy = rect.top + rect.height / 2;
+        // The probe walks outward a fixed distance, so it can only ever report
+        // 2 x limit. Anything already drawn larger than that reads as exactly the cap
+        // — which had every header button reporting a suspiciously round 80px. Give
+        // the reach room for the element itself plus the padding being looked for.
+        limit = Math.max(limit, rect.width / 2 + 24, rect.height / 2 + 24);
+
+        // A wrapping or associated label forwards the tap, so it counts as the target.
+        const label = el.closest("label") || (el.labels && el.labels[0]);
+        const lands = (x, y) => {
+            if (x < 0 || y < 0 || x >= innerWidth || y >= innerHeight) return false;
+            const hit = document.elementFromPoint(x, y);
+            if (!hit) return false;
+            if (hit === el || el.contains(hit)) return true;
+            return !!(label && (hit === label || label.contains(hit)));
+        };
+
+        if (!lands(cx, cy)) return null;   // centre isn't even hittable; occlusion's problem
+
+        const reach = (dx, dy) => {
+            let far = 0;
+            for (let d = 1; d <= limit; d++) {
+                if (!lands(cx + dx * d, cy + dy * d)) break;
+                far = d;
+            }
+            return far;
+        };
+        return { width: reach(-1, 0) + reach(1, 0), height: reach(0, -1) + reach(0, 1) };
+    },
+
+    // The 44px guideline is about fingertips, so it only bites where there's no mouse.
+    // Enforcing it everywhere flagged the header buttons at 42px tall on a desktop,
+    // which is not a defect — the same buttons are 64px tall on a phone, where it
+    // matters. Same reasoning as the field sizing: `hover: none` is what actually
+    // distinguishes a finger from a pointer, not viewport width.
+    //
+    // `exempt` is for controls that are deliberately small *and* have a full-size path
+    // to the same action. The dealer puck is the only one: it's a 22px chip sitting on
+    // the rim of a seat, and growing it to 44px would take that area from the seat
+    // itself — which a dealer taps far more often. "Give the button" is in the seat
+    // menu at full size, so the puck is a shortcut, not the only way through.
+    touchTargets(minimum = 44, { exempt = ".dealerChip", enforceOnPointerDevices = false } = {}) {
+        const offenders = [];
+        if (!enforceOnPointerDevices && matchMedia("(hover: hover)").matches) {
+            return { name: `touch targets at least ${minimum}px`, offenders, skipped: "pointer device" };
+        }
+        this.visibleControls()
+            .filter(el => el.type !== "color")
+            .filter(el => !(exempt && el.matches(exempt)))
+            .forEach(el => {
+                const rect = el.getBoundingClientRect();
+                // Drawn big enough is big enough — no need to probe, and probing wide
+                // elements is where the cap above used to produce nonsense. Seats sit
+                // here: they're 76x72 and overlap each other at the rim by design, so
+                // measuring their reach would report the crowding as a fault.
+                if (rect.width >= minimum - 1 && rect.height >= minimum - 1) return;
+
+                const size = this.effectiveTarget(el);
+                if (!size) return;
+                if (size.width >= minimum - 1 && size.height >= minimum - 1) return;
+                offenders.push(
+                    `${this.describe(el)} :: hittable ${size.width}x${size.height}` +
+                    ` (drawn ${Math.round(rect.width)}x${Math.round(rect.height)})`
+                );
+            });
+        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 = {}) {
+        const checks = [
+            this.touchAction(),
+            this.tapHighlight(),
+            this.textSelectable(),
+            this.occlusion(options.occlusionSelector),
+            this.collapsedColumns(),
+            this.textSpill(),
+            this.horizontalOverflow(),
+            this.fieldFontSize(),
+            this.seatOwnership(),
+        ];
+        if (options.includeTouchTargets) checks.push(this.touchTargets(options.minimumTarget));
+
+        return {
+            viewport: `${innerWidth}x${innerHeight}`,
+            failed: checks.filter(c => c.offenders.length > 0),
+            // Things worth knowing that aren't faults — see occlusion() on toasts.
+            warnings: checks.flatMap(c => c.warnings || []),
+            passed: checks.filter(c => c.offenders.length === 0).map(c => c.name),
+            clean: checks.every(c => c.offenders.length === 0),
+        };
+    },
+};
+
+if (typeof module !== "undefined" && module.exports) {
+    module.exports = LayoutAudit;
+}