Give the felt back the screen the chrome was using

Measured on a 390x844 phone, six-handed, same table before and after:

                        before   after
  header                  193px    120px
  felt starts at          225px    152px
  controls on screen         27       18
  bordered elements          37       22
  text elements              61       49

A quarter of the screen went on chrome before the dealer saw the table.

**The header.** Six equally weighted buttons in two rows, of which two are
per-hand controls. The other four have gone where they belong rather than into
a "more" menu — that relocates crowding instead of removing it. Reset Table is
in the Session panel now, beside Clear history and the save/load pair: it is
the control that throws the night away and it was sitting in the same weight as
Resolve Pot, the most-pressed button in a session. Quick Split is down with
Common rulings, where the other "open something else" link already lived. The
way back to the site is a quiet link at the top, where a back link goes.

The subtitle is gone. It was one sentence of orientation on a tool used
nightly, and the landscape and short-phone rules already hid it — the layout
had decided it was expendable on every screen this is actually used on.

**Teaching copy, once.** Table Setup shipped open, so the first screen was the
most crowded one; it now opens only on a table nobody has set up yet, decided
once at load so it cannot reopen itself under a dealer who just shut it. The
gesture hint under the felt goes after the first deal of the session — keyed to
the hand number, not to bettingOpen, which was the obvious test and the wrong
one: it would have appeared and disappeared twice a hand, shunting the panel
stack up and down all night.

**Borders.** Panels had a border, a lighter background and a shadow — three
ways of drawing one edge. The standings had a rule under every row, which is
what makes a list read as ruled paper. Both drop the line and keep the
grouping; the standings header keeps its rule, because that one marks a change
of kind. Fields and buttons keep theirs: those say "interactive", which is not
decoration.

**The felt itself.** Names wrap to two lines instead of ellipsising, so
"Christopher" and "Mike from work" are readable rather than "Chri..." and "Mike
fro..." — the truncation was eating exactly the half a dealer typed to tell two
Mikes apart. And a stack of $1,234,567 rendered at 7px; it now drops the
thousands separators before it drops the type size, so the same number is eight
characters at 10px with every digit intact. The comment above fitAmount was
right that abbreviating loses precision — but precision the dealer cannot read
is not precision.

Two things tried and reverted, both measured:
  * Reserving the second name line made every puck the height of the tallest
    (69-73px became a uniform 88). Fifteen pixels on all nine seats is felt
    spent on chrome, which is what this round is trying to give back.
  * Dropping the name a type step to fit more on one line still did not fit
    "Christopher" on the button seat, where the dealer chip takes 22px of the
    row — so it cost legibility and bought nothing.

Known limit: a single word too long for a puck breaks across the two lines, and
gets a hyphen only where the browser has hyphenation dictionaries. Real phones
do; headless Chromium does not, so audit screenshots show "Christo / pher". The
whole name is visible either way, which it was not before.

599 tests, 0 failures. 52 layout audits across 13 viewports x 4 table sizes
(2, 6, 9, 12 seats) and 20 across the five overlays: 0 failures, and the action
bar still does not change height mid-hand at any of them. The back link was
caught by the audit at 56x13 when it stopped being a button; its hit area is
44px now, paid for with negative margins so the header keeps the 73px.

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

JoshHeaps.Net/Pages/Casino/TexasHoldem.cshtml

@@ -7,18 +7,23 @@
 
 <div id="holdemApp">
     <header id="holdemHeader">
+        @* Six equally-weighted buttons used to sit here in two rows, and on a 390px
+           phone the felt did not start until 225px down — a quarter of the screen spent
+           before the dealer saw the table. Only two of the six are per-hand controls.
+           The rest have gone where they belong rather than into a "more" menu, which
+           would have relocated the crowding rather than removed it: Reset Table to the
+           Session panel beside Clear history and the save/load pair, Quick Split down
+           with Common rulings where the other "open something else" link already lives,
+           and the way back to the site up top where a back link goes. *@
         <div id="holdemHeaderLeft">
+            <a href="/casino" class="holdemBackLink">← Casino</a>
             <h1>Texas Hold'em Dealer</h1>
-            <p class="holdemSubtitle">Seat your players, track the action, split the pot.</p>
             <span id="handCounterBadge" class="handCounterBadge">Hand #1</span>
         </div>
         <div id="holdemHeaderActions">
-            <a href="/casino/texasholdem/quicksplit" class="holdemBtn" title="Chop a pot without setting up a table">Quick Split</a>
             <button id="misdealBtn" class="holdemBtn" title="Take this hand back — every chip returns to the player who put it in, and the same button deals again" hidden>Misdeal</button>
             <button id="nextHandBtn" class="holdemBtn" title="Move the button, small blind and big blind to the next occupied seat">Next Hand ⟳</button>
             <button id="resolvePotBtn" class="holdemBtn holdemBtnAccent">Resolve Pot</button>
-            <button id="resetTableBtn" class="holdemBtn holdemBtnDanger">Reset Table</button>
-            <a href="/casino" class="holdemBtn holdemBtnGhost">← Casino</a>
         </div>
     </header>
 
@@ -37,6 +42,7 @@
             <p id="tableHint" class="tableHint"></p>
             <p class="tableHintActions">
                 <button type="button" id="openRulingsBtn" class="linkBtn">Common rulings</button>
+                <a href="/casino/texasholdem/quicksplit" class="linkBtn" title="Chop a pot without setting up a table">Quick Split</a>
             </p>
         </section>
 
@@ -52,7 +58,11 @@
                 </div>
             </section>
 
-            <details class="sidebarPanel" open>
+            @* Not `open` in the markup any more. Whether this panel starts open is a
+               question about the table, so main.js answers it after the state has
+               loaded: open on a table nobody has set up yet, shut on one already
+               half-way through a night. *@
+            <details class="sidebarPanel" id="tableSetupPanel">
                 <summary>Table Setup</summary>
                 <div class="panelBody">
                     <label class="fieldRow">
@@ -209,6 +219,11 @@
                         <button id="saveTableBtn" class="holdemBtn holdemBtnSmall">Save table file</button>
                         <button id="loadTableBtn" class="holdemBtn holdemBtnSmall">Load table file</button>
                         <input id="loadTableInput" type="file" accept="application/json,.json" hidden />
+                        @* Down from the header, where it sat in the same weight as Resolve Pot
+                           — the most-pressed control in a session next to the one that throws
+                           the night away. Here it is beside Clear history, which is the other
+                           thing that destroys records, and behind a panel you have to open. *@
+                        <button id="resetTableBtn" class="holdemBtn holdemBtnSmall holdemBtnDanger">Reset table</button>
                     </div>
                 </div>
             </details>

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

@@ -231,7 +231,17 @@ const ActionBar = {
             undo.type = "button";
             undo.className = "actionUndo";
             undo.title = `Undo ${undoLabel}`;
-            undo.textContent = `↶ ${undoLabel}`;
+            // The label goes in its own element rather than straight onto the button.
+            // The pill is a fixed width — it names the last action, so its text changes
+            // on every tap, and a control that resizes under the dealer's thumb reads
+            // as the interface twitching. Fixed width means long labels have to
+            // ellipsize, and only a real element can: as a bare text node the label
+            // truncated *through* the keycap below it, which then sat squashed against
+            // the cut-off text looking like a rendering fault.
+            const label = document.createElement("span");
+            label.className = "actionUndoLabel";
+            label.textContent = `↶ ${undoLabel}`;
+            undo.appendChild(label);
             // U undoes, and nothing said so — this control was the only place a dealer
             // could have learned it, and it was the one action bar control without its
             // key printed on it.

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

@@ -257,6 +257,22 @@ document.addEventListener("DOMContentLoaded", () => {
 
     Render.mount(state, hooks);
 
+    // Table Setup used to ship open, so the tool's first screen was its most crowded
+    // one: seat count, blind direction, dedicated dealer, both blinds, starting stack
+    // and two sub-panels, all under a felt the dealer had come here to look at. It is
+    // the right panel to have open on a table nobody has touched, and the wrong one to
+    // have open on the fourth hand of a night.
+    //
+    // Decided once, here, rather than on every render — a panel that reopened itself
+    // whenever the table emptied would fight the dealer who had just shut it.
+    (() => {
+        const panel = document.getElementById("tableSetupPanel");
+        if (!panel) return;
+        const fresh = (Number(state.handNumber) || 1) === 1 &&
+            !state.seats.some(seat => HoldemState.seatInPlay(seat));
+        panel.open = fresh;
+    })();
+
     const openPotWizard = () => {
         // Chips still in front of players belong in the pot being priced, so bank them
         // before the wizard reads anyone's contribution.

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

@@ -88,6 +88,19 @@ const Render = {
         hint.textContent = this.canDragSeats()
             ? "Tap a seat to edit · double-tap to fold · press and hold for quick actions · drag to swap seats."
             : "Tap a seat to edit · double-tap to fold · press and hold for quick actions, including moving a seat.";
+
+        // But only on the first hand. Two lines of instructions under the felt are worth
+        // having on a table nobody has dealt at yet, and worth nothing on the fifth hand
+        // of the night — by then the dealer either knows the gestures or is not going to
+        // learn them from a caption they have scrolled past forty times.
+        //
+        // Keyed to the hand number rather than to whether a hand is currently out, on
+        // purpose. `bettingOpen` was the obvious test and it is the wrong one: the hint
+        // would vanish at every deal and come back at every payout, so a two-line block
+        // under the felt would appear and disappear twice a hand, shunting the rulings
+        // link and the whole panel stack up and down all night. This way it goes once,
+        // at the first deal of the session, and stays gone.
+        hint.hidden = (Number(this.state.handNumber) || 1) > 1 || !!this.state.bettingOpen;
     },
 
     renderNotes() {
@@ -553,8 +566,21 @@ const Render = {
     // 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;
+        const formatted = el.textContent || "";
+        // The separators go before the type size does. "$1,234,567" is ten characters,
+        // which used to drop the puck to 7px — and 7px is not a size anybody reads a
+        // stack off a felt at, so the shrink-rather-than-abbreviate rule above was
+        // buying precision the dealer then couldn't see. Without its commas the same
+        // number is eight characters, and eight fits at 10px with every digit intact.
+        // Grouping is a reading aid for a column of figures; this is one number on a
+        // 64px puck, and the aid costs more than it gives.
+        const text = formatted.length >= 10 ? formatted.replace(/,/g, "") : formatted;
+        if (text !== formatted) el.textContent = text;
+
+        const length = text.length;
         el.classList.toggle("puckAmountLong", length >= 8 && length < 10);
+        // Only a stack of $100,000,000 or more still lands here. It is an overflow
+        // guard rather than a size anybody is expected to read.
         el.classList.toggle("puckAmountHuge", length >= 10);
     },
 

tests/holdem/designTokens.test.js

@@ -0,0 +1,149 @@
+// The stylesheet has to keep picking from the scales.
+//
+// Before the token block went in, holdem.css used 42 different spacing values, 31 font
+// sizes, 14 border-radii and 139 colours, and defined three custom properties. None of
+// that was anybody's decision — each number was chosen at the moment it was needed, and
+// the result read as crowded even where nothing overlapped, because a 0.42rem gap next
+// to a 0.45rem gap next to a 0.5rem gap gives the eye no rhythm to lock onto.
+//
+// A one-off cleanup would last until the next `padding: 0.35rem`. So the scales are
+// checked here instead: a new value has to be a step on one of them, or an exception
+// with a reason written next to it.
+//
+// This reads the stylesheet as text rather than through a CSS parser, on purpose — the
+// rest of this suite has no dependencies and runs in a second, and a regex over
+// declarations is enough to catch the thing that actually happens, which is somebody
+// (me) typing a number instead of reaching for a token.
+const test = require("node:test");
+const { describe } = require("node:test");
+const assert = require("node:assert");
+const fs = require("fs");
+const path = require("path");
+
+const CSS_PATH = path.join(__dirname, "..", "..", "JoshHeaps.Net", "wwwroot", "css", "casino", "holdem.css");
+const css = fs.readFileSync(CSS_PATH, "utf8");
+
+// Comments carry measurements and rationale — "measured at 342px tall on a phone" —
+// and none of that is a declaration. Strip them before looking for values.
+const declarations = css.replace(/\/\*[\s\S]*?\*\//g, "");
+
+// Everything after the token block. The :root block is where the raw values are
+// supposed to be.
+const body = declarations.slice(declarations.indexOf("#potBadgeAmount,"));
+
+const valuesIn = (properties, source = body) => {
+    const found = [];
+    const re = new RegExp(`\\b(${properties.join("|")})\\s*:([^;}]*)`, "g");
+    let m;
+    while ((m = re.exec(source)) !== null) {
+        const [, prop, value] = m;
+        // calc() and env() do their own arithmetic on tokens; the tokens inside them
+        // are still checked, because the regex below looks at bare numbers only.
+        (value.match(/(?<![\w-])[0-9.]+(rem|px|em)\b/g) || []).forEach(v => found.push({ prop, value: v }));
+    }
+    return found;
+};
+
+describe("the spacing scale", () => {
+    // Hairlines and structural clearances, each one deliberate:
+    //   0px/1px/3px/4px/22px — borders, hairline offsets, and the 22px of room a seat
+    //                          puck's name gives the dealer button beside it.
+    //   5rem/9rem            — how far the page has to scroll past the fixed action
+    //                          bar. Not rhythm; clearance for a thing of a known size.
+    const ALLOWED = new Set(["0px", "1px", "2px", "3px", "4px", "22px", "5rem", "9rem"]);
+
+    test("every gap, margin and padding comes off the scale", () => {
+        const offenders = valuesIn(
+            ["padding", "padding-top", "padding-right", "padding-bottom", "padding-left",
+             "margin", "margin-top", "margin-right", "margin-bottom", "margin-left",
+             "gap", "row-gap", "column-gap"])
+            .filter(v => !ALLOWED.has(v.value));
+
+        assert.deepEqual(offenders, [],
+            "use var(--sp-0 … --sp-6), or add the value to ALLOWED with a reason");
+    });
+
+    test("and the scale is the one the tokens define", () => {
+        ["--sp-0", "--sp-1", "--sp-2", "--sp-3", "--sp-4", "--sp-5", "--sp-6"]
+            .forEach(token => assert.match(css, new RegExp(`\\${token}:`), `${token} is not defined`));
+    });
+});
+
+describe("the type scale", () => {
+    //   16px  — the size below which iOS zooms the page when a field is focused, so
+    //           every text input states it. Not a typographic choice.
+    //   1.05em, 0.44rem — relative bumps inside a component, and the shrink-to-fit for
+    //           a six-figure stack on a 58px seat puck.
+    const ALLOWED = new Set(["16px", "1.05em", "0.44rem"]);
+
+    test("every font-size comes off the scale", () => {
+        const offenders = valuesIn(["font-size"]).filter(v => !ALLOWED.has(v.value));
+        assert.deepEqual(offenders, [],
+            "use var(--fs-2xs … --fs-2xl), or add the value to ALLOWED with a reason");
+    });
+
+    test("and the scale is the one the tokens define", () => {
+        ["--fs-2xs", "--fs-xs", "--fs-sm", "--fs-base", "--fs-md", "--fs-lg", "--fs-xl", "--fs-2xl"]
+            .forEach(token => assert.match(css, new RegExp(`\\${token}:`), `${token} is not defined`));
+    });
+});
+
+describe("the corner scale", () => {
+    test("every border-radius comes off it", () => {
+        const offenders = valuesIn(["border-radius"]).filter(v => v.value !== "2px");
+        assert.deepEqual(offenders, [], "use var(--r-sm | --r-md | --r-lg | --r-pill)");
+    });
+});
+
+describe("the tokens themselves", () => {
+    test("every var() the stylesheet reaches for exists", () => {
+        const used = new Set((css.match(/var\((--[a-zA-Z0-9-]+)/g) || []).map(s => s.slice(4)));
+        // Published from JS at runtime rather than declared here — see actionBar.js.
+        const fromScript = new Set(["--actionBarHeight", "--feltRoomPx"]);
+        // Defined by the site's own stylesheet, not this one.
+        const fromSite = new Set(["--font-mono"]);
+        const missing = [...used].filter(t =>
+            !fromScript.has(t) && !fromSite.has(t) && !new RegExp(`\\${t}\\s*:`).test(css));
+        assert.deepEqual(missing, []);
+    });
+
+    test("and the dark surfaces stay off pure black", () => {
+        // Shadows are invisible on #000, so depth has to come from a lighter surface —
+        // and white text on true black is the pairing that smears on an OLED phone,
+        // which is what this tool is used on.
+        const surfaces = [...css.matchAll(/--surface-\d+:\s*(#[0-9a-fA-F]{3,8})/g)].map(m => m[1].toLowerCase());
+        assert.ok(surfaces.length >= 4, "the surface ramp should have four steps");
+        surfaces.forEach(hex => {
+            assert.notEqual(hex, "#000");
+            assert.notEqual(hex, "#000000");
+        });
+    });
+});
+
+describe("numbers that change while the dealer watches", () => {
+    test("are set in tabular figures", () => {
+        // A "1" is narrower than an "8" in a proportional face, so a pot ticking from
+        // $18 to $21 shuffles its digits sideways and the eye reads movement where
+        // there is only arithmetic.
+        assert.match(css, /font-variant-numeric:\s*tabular-nums/);
+        ["#potBadgeAmount", ".seatPuckStack", ".actionPot", ".standingsRow"]
+            .forEach(sel => assert.ok(css.includes(sel),
+                `${sel} should be in the tabular-figures list`));
+    });
+});
+
+describe("controls that must not resize under a thumb", () => {
+    test("the undo pill has a fixed width, not a content width", () => {
+        // It names the last action, so its label changes on every tap. Measured across
+        // one hand before this: 148, 110, 109, 108, 109, 110, 120.
+        const rule = css.match(/\.actionUndo\s*\{[^}]*\}/);
+        assert.ok(rule, ".actionUndo rule not found");
+        assert.match(rule[0], /width:\s*[0-9.]+rem/);
+    });
+
+    test("and its label is the part that ellipsizes", () => {
+        const rule = css.match(/\.actionUndoLabel\s*\{[^}]*\}/);
+        assert.ok(rule, ".actionUndoLabel rule not found");
+        assert.match(rule[0], /text-overflow:\s*ellipsis/);
+    });
+});