Let the phone table use the width it has

Last round capped the felt so the ring would clear the action bar, and capped the
wrong dimension. The wide layout sizes the felt from its width, so capping the
width is how you shorten it there — on a phone the felt is already the full width
of the column, and capping that threw away 96px of a 360px screen: a 240x240
table inside a 336px space, with nine pucks crowding it.

A max-height instead leaves the width alone and lets the aspect ratio give way,
which turns a short screen into a wide oval — the shape a poker table is. At
360x640: 336x240 rather than 240x240, same clearance over the bar, and the
twelve-seat ring that was crowded at 240 comes out clean, which closes the one
combination left failing last round. Where the room isn't the binding constraint,
390x844 and up, nothing changes and the table stays round. The landscape branch
now says max-height: none, because it already spends the same measured room on
its own height and applying it twice took the felt to the floor value.

The measurement that decides whether pucks shrink was also wrong, in a way that
only showed up once it was asked a hard question. Rim length per seat measures
the walk between two seats, not the gap between them, and on a long oval the rim
doubles back at the ends: twelve seats at 640x360 had 193px of rim each and sat
60px apart. It now measures the closest two neighbours directly, off the ring
itself — and off the seat layer rather than the felt, because the layer is inset
by half a puck on a phone and the felt's box put the answer out by 30px.

That makes the rule geometric rather than about screen size, so it is no longer
scoped to a phone media query: a wide landscape felt crowds at its ends while its
rim claims there is room, and now it is told so.

Pucks still touch at nine and twelve seats on a small screen. Tried 46px against
58px: on a roomy phone 46 cleared every overlap where 58 left two, but in a hand
with a side pot, where the bar has grown and the felt has shrunk to suit, 46
overlapped four times and 58 twice. That is the felt being small, not the puck
being wide, and paying for it with an ellipsis on every long name buys nothing.
What has to hold is that each seat keeps its own centre, and that is measured at
every size.

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

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

@@ -586,12 +586,16 @@ button,
     box-shadow: 0 0 0 2px rgba(9, 255, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.5);
 }
 
+/* The chair number is 9px, and on an empty seat it is 9px behind a 0.7 fade: #8a8a8a
+   came out at 3.39:1 once the fade was composited, for the label a dealer reads to
+   answer "which seat is seat 6?". Lifted until it passes with a little to spare —
+   measured 4.5:1 at #a5a5a5 exactly, so it sits above that. */
 .seatChairNumber {
     position: absolute;
     top: 2px;
     left: 6px;
     font-size: 0.58rem;
-    color: #8a8a8a;
+    color: #aeaeae;
 }
 
 .seatPuckName {
@@ -816,6 +820,38 @@ button,
     outline-offset: 1px;
 }
 
+/* Seats close enough together that full-size pucks would overlap. The class is set
+   from a measurement render.js takes off the ring itself — the closest two neighbours,
+   straight line — because no media query can see it: the same 390px phone is roomy at
+   six seats and crowded at nine, and a wide landscape felt crowds at its ends while
+   its rim says there is space. Not scoped to a screen size for the same reason. */
+.seatsTight .seat {
+    /* 58 was chosen by measurement and 46 was tried against it. On a roomy phone 46
+       cleared every overlap at nine seats where 58 left two — but in the state that
+       actually matters, a hand with a side pot where the bar has grown and the felt has
+       shrunk to suit, 46 overlapped four times and 58 twice. Pucks touching at that
+       density is the felt being small, not the puck being wide, and paying for it with
+       an ellipsis on every long name buys nothing. What has to hold is that each seat
+       keeps its own centre, so a tap lands on the player it was aimed at, and that is
+       measured at every size. */
+    width: 58px;
+    min-height: 38px;
+    padding: 3px 4px;
+}
+
+.seatsTight .seatPuckName {
+    margin-top: 0.35rem;
+    font-size: 0.62rem;
+}
+
+.seatsTight .seatPuckStack {
+    font-size: 0.55rem;
+}
+
+.seatsTight .seatPuckCards {
+    font-size: 0.58rem;
+}
+
 /* ---------- Seat editor panel (sidebar form for the selected seat) ---------- */
 
 .seatEditorPanel {
@@ -2906,14 +2942,31 @@ body.hasActionBar #toastHost {
 }
 
 @media (max-width: 700px) {
-    /* The narrow layout already had an answer for the bar: it reserves the bar's height
-       as scroll room below the table, and a phone is a thing you scroll. Capping the
-       felt here as well was measured and rejected — at 360x640 it took the table from
-       321px to 226px, which fixed the six-seat ring but broke the nine-seat one, two
-       covered seats traded for two seats whose centre landed on a neighbour. The cap is
-       for the wide layout, which never consulted the bar's height at all. */
+    /* The cap lives here now, and the reason it didn't is worth keeping.
+
+       It was measured and rejected once: at 360x640 it took the table from 321px to
+       226px, which fixed the six-seat ring but broke the nine-seat one — two covered
+       seats traded for two seats whose centre landed on a neighbour. The narrow layout
+       fell back on reserving the bar's height as scroll room, on the grounds that a
+       phone is a thing you scroll.
+
+       That trade was real then and isn't now: seats are spaced by distance around the
+       rim rather than by angle, so a shorter felt no longer piles them up. Re-measured
+       at 360x640 with the bar grown by a side pot, where the bottom seat sat 38px
+       inside it: the ring now clears the bar by 50. Scroll room is not an answer for a
+       seat that is covered rather than merely below the fold.
+
+       The room is spent on height, not on both. Capping the *width* by it — the wide
+       layout's way, because there the felt is sized from its width — kept the table
+       square and threw away 96px of a 360px screen: 240x240 inside a 336px column. A
+       max-height leaves the width alone and lets the aspect ratio give way, so a short
+       screen gets a wide oval, which is the shape a poker table is anyway. Measured at
+       360x640: 336x240 rather than 240x240, same clearance, and the twelve-seat ring
+       that was crowded at 240 comes out clean. Where the room isn't the binding
+       constraint — 390x844 and up — nothing changes and the table stays round. */
     #pokerTableWrap {
         max-width: none;
+        max-height: var(--feltRoomPx, 100vh);
     }
 
     /* Stacked, with the action that ends the hand furthest from a stray thumb. */
@@ -3277,6 +3330,11 @@ body.hasActionBar #toastHost {
            a table that is already as short as the screen allows. */
         aspect-ratio: auto;
         max-width: none;
+        /* This branch already spends the measured room on its own height. The phone
+           block's max-height is the same number arriving twice, and applying it here
+           took the felt down to the floor value and crowded the ring — measured at
+           640x360, two seats lost their centres to their neighbours. */
+        max-height: none;
     }
 
     /* The page's own top padding is 32px of nothing, on the screen that has the least

JoshHeaps.Net/wwwroot/css/casino/quicksplit.css

@@ -148,9 +148,13 @@ button,
     color: #8f8f8f;
 }
 
+/* 37px tall, on the field a dealer types every amount into. The touch rule has been
+   44px everywhere else since the round that set it; this page never got measured for
+   it, because the audit only ran the target check when asked and nothing asked. */
 .unevenAmount {
     flex: 1;
     min-width: 0;
+    min-height: 46px;
     background: none;
     border: none;
     outline: none;
@@ -180,10 +184,12 @@ button,
     color: #ffd6d6;
 }
 
+/* 30px across, and it deletes a player's entry — the one control on the row where a
+   near miss costs something. The amount field beside it gives up the 16px. */
 .unevenRemoveBtn {
     flex: none;
-    width: 30px;
-    height: 44px;
+    width: 46px;
+    height: 46px;
     border: none;
     background: none;
     /* Was #6a6a6a — 3.66:1, the worst on the page, on a control that deletes a

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

@@ -89,6 +89,10 @@ const ActionBar = {
         document.documentElement.style.setProperty(
             "--feltRoomPx",
             `${this.feltRoomFor(window.innerHeight, barHeight, topInDocument)}px`);
+        // The felt has just changed size, so how much rim each seat gets has changed
+        // with it. Told rather than left to be noticed on the next render, which on a
+        // bar that grew mid-hand could be several actions away.
+        if (typeof Render !== "undefined" && Render.updateSeatDensity) Render.updateSeatDensity();
     },
 
     // Anything to act on? A hand with nobody dealt in doesn't get a bar — and that

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

@@ -91,12 +91,21 @@ const Render = {
     // circle when there's nothing to measure — the same answer the ring gave before it
     // asked.
     feltAspect() {
-        if (typeof document === "undefined") return 1;
-        const wrap = document.getElementById("pokerTableWrap");
-        if (!wrap) return 1;
-        const box = wrap.getBoundingClientRect();
-        if (!box.width || !box.height) return 1;
-        return box.width / box.height;
+        const box = this.ringBox();
+        return box ? box.width / box.height : 1;
+    },
+
+    // The box a seat's left/top percentages actually resolve against. Not the felt: on
+    // a phone the seat layer is inset by half a puck so the outermost seats don't hang
+    // off the screen, and measuring the felt instead put the ring's shape out by that
+    // inset — twelve seats at 640x360 were computed 90px apart and drawn 60px apart,
+    // which is the difference between "fine" and "overlapping".
+    ringBox() {
+        if (typeof document === "undefined") return null;
+        const layer = document.getElementById("seatsLayer") || document.getElementById("pokerTableWrap");
+        if (!layer) return null;
+        const box = layer.getBoundingClientRect();
+        return box.width && box.height ? box : null;
     },
 
     // Bets sit on the felt between their player and the pot, the way chips actually
@@ -137,6 +146,41 @@ const Render = {
     RING_STEPS: 720,
     ringCache: {},
 
+    // The closest two neighbouring seats come to each other, straight line, in pixels.
+    //
+    // Rim length divided by seat count was the first answer and it is the wrong one:
+    // it measures the walk between two seats rather than the gap between them, and on
+    // a flat ellipse those are nothing alike. At 640x360 six seats had 193px of rim
+    // each and sat 56px apart, because at the ends of a long oval the rim doubles back
+    // and two seats a long walk apart are stacked one above the other.
+    closestSeatGapPx(count, box = this.ringBox()) {
+        if (count < 2 || !box || !box.width || !box.height) return Infinity;
+
+        const points = this.ringAngles(count, 44, 42, box.width / box.height).map(angle => ({
+            x: ((50 + 44 * Math.cos(angle)) / 100) * box.width,
+            y: ((50 + 42 * Math.sin(angle)) / 100) * box.height,
+        }));
+        return points.reduce((closest, point, i) => {
+            const next = points[(i + 1) % points.length];
+            return Math.min(closest, Math.hypot(point.x - next.x, point.y - next.y));
+        }, Infinity);
+    },
+
+    // A puck is 76px across, so neighbours whose centres are closer than that overlap
+    // by definition; a few pixels more keeps them from touching. Under it the pucks
+    // come down a size rather than the table pretending it has room it hasn't.
+    SEAT_ROOM_PX: 84,
+
+    // Called on every render and again whenever the felt is resized — the action bar
+    // growing mid-hand shortens the table, and the seats have to answer that without
+    // waiting for the next render to come along.
+    updateSeatDensity() {
+        const layer = document.getElementById("seatsLayer");
+        if (!layer || !this.state) return;
+        layer.classList.toggle("seatsTight",
+            this.closestSeatGapPx(this.state.seatCount) < this.SEAT_ROOM_PX);
+    },
+
     // The angles that cut the rim into `count` equal lengths, starting at the top.
     // Every seat on a ring wants the same answer, so it is worked out once per shape
     // and kept — the ring only changes when the table is resized or the window is.
@@ -245,6 +289,7 @@ const Render = {
     renderSeats() {
         const layer = document.getElementById("seatsLayer");
         layer.innerHTML = "";
+        this.updateSeatDensity();
         const template = document.getElementById("seatTemplate");
         const { dealerIndex, sbIndex, bbIndex, manual: manualBlinds } = HoldemState.getBlindSeats(this.state);
         // A button on an empty chair normally means the table has drifted and wants

tests/holdem/README.md

@@ -36,7 +36,22 @@ enough not to trigger iOS zoom, that nothing important is covered or off-screen
 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.
+phones on their side — each viewport twice, once with a mouse and once with a thumb.
+
+That last part, and two of those checks, are newer than this paragraph claiming them.
+`runAll()` did not include the contrast check at all, and touch targets sat behind an
+opt-in flag nothing passed, so "the audit is clean" meant nine checks rather than
+eleven for a long run of rounds. Both were written and tested and simply never called.
+The mouse/thumb pair matters for the same reason: the 44px rule stands itself down
+where `hover: hover` says there is a pointer, and a headless desktop browser is a
+pointer, so a single pass had never measured a touch target at any viewport. Between
+them they found a 9px seat label at 3.39:1, a 37px-tall amount field and a 30px delete
+button on Quick Split.
+
+A check that decides it doesn't apply says so in the output rather than reporting no
+offenders, which reads identically to a pass. The same goes for the two exemptions
+that exist: a disabled control, which WCAG itself excuses, and a link inside a
+sentence, whose size is set by the line it sits in.
 
 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

tests/holdem/auditContrast.test.js

@@ -0,0 +1,108 @@
+// The sums the contrast check runs on, tested away from a browser.
+//
+// The check itself needs a page to look at, but the arithmetic underneath it doesn't —
+// and the arithmetic is the part that decides whether a real fault is reported or
+// waved through. Faded text used to be filed as "not checked" rather than measured;
+// this is the compositing that replaced that.
+const test = require("node:test");
+const { describe } = require("node:test");
+const assert = require("node:assert");
+const LayoutAudit = require("./uiAudit");
+
+const WHITE = { r: 255, g: 255, b: 255, a: 1 };
+const BLACK = { r: 0, g: 0, b: 0, a: 1 };
+const PAGE = { r: 28, g: 28, b: 28, a: 1 };      // the felt page behind everything
+const PUCK = { r: 44, g: 44, b: 44, a: 1 };      // a seat's own background
+
+describe("the ratio itself", () => {
+    test("black on white is the full 21:1, either way round", () => {
+        assert.ok(Math.abs(LayoutAudit.contrastRatio(BLACK, WHITE) - 21) < 0.01);
+        assert.ok(Math.abs(LayoutAudit.contrastRatio(WHITE, BLACK) - 21) < 0.01);
+    });
+
+    test("a colour against itself is 1:1", () => {
+        assert.ok(Math.abs(LayoutAudit.contrastRatio(PUCK, PUCK) - 1) < 0.001);
+    });
+});
+
+describe("text on a box that is being faded", () => {
+    // opacity on a box fades the box and its text together onto whatever is behind
+    // it — so a dimmed seat is not grey text on a dark puck, it is a faded puck and
+    // faded text both landing on the page.
+    const fade = alpha => ({ alpha, behind: PAGE });
+
+    test("at full strength nothing is composited", () => {
+        const painted = LayoutAudit.asPainted(WHITE, PUCK, { alpha: 1, behind: PAGE });
+        assert.deepEqual(painted.fg, WHITE);
+        assert.deepEqual(painted.bg, PUCK);
+    });
+
+    test("fading moves both the text and its background, not just the text", () => {
+        const painted = LayoutAudit.asPainted(WHITE, PUCK, fade(0.7));
+        assert.ok(painted.fg.r < WHITE.r, "the text dims");
+        assert.ok(painted.bg.r < PUCK.r, "and so does what it sits on");
+        assert.ok(painted.bg.r > PAGE.r, "but not all the way to the page");
+    });
+
+    test("which is what stops a fade being reported as a fault it isn't", () => {
+        // Dimming light text on a dark puck over a dark page costs contrast, but far
+        // less than measuring the faded text against the *unfaded* puck would claim.
+        const honest = LayoutAudit.asPainted(WHITE, PUCK, fade(0.7));
+        const wrong = { fg: LayoutAudit.over({ ...WHITE, a: 0.7 }, PUCK), bg: PUCK };
+        assert.ok(LayoutAudit.contrastRatio(honest.fg, honest.bg) >
+            LayoutAudit.contrastRatio(wrong.fg, wrong.bg));
+    });
+
+    test("a fade all the way out lands everything on the page behind", () => {
+        const painted = LayoutAudit.asPainted(WHITE, PUCK, fade(0));
+        assert.deepEqual(painted.fg, PAGE);
+        assert.deepEqual(painted.bg, PAGE);
+    });
+
+    test("with nothing known to be behind it, the fade is left alone", () => {
+        // Better to measure the unfaded pair than to invent a backdrop.
+        const painted = LayoutAudit.asPainted(WHITE, PUCK, { alpha: 0.5, behind: null });
+        assert.deepEqual(painted.fg, WHITE);
+        assert.deepEqual(painted.bg, PUCK);
+    });
+});
+
+describe("a fade makes small grey text worse, which is the fault it went looking for", () => {
+    // Deliberately not asserting a particular CSS colour here: the page's own greys are
+    // measured in the browser, against the real gradients, where they live. What this
+    // pins is the direction — that dimming a box costs its text contrast, which is why
+    // filing faded text as "not checked" hid faults rather than avoiding false ones.
+    test("the same grey scores lower once its box is dimmed", () => {
+        const grey = LayoutAudit.parseColour("rgb(138, 138, 138)");
+        const solid = LayoutAudit.asPainted(grey, PUCK, { alpha: 1, behind: PAGE });
+        const dimmed = LayoutAudit.asPainted(grey, PUCK, { alpha: 0.7, behind: PAGE });
+        assert.ok(LayoutAudit.contrastRatio(dimmed.fg, dimmed.bg) <
+            LayoutAudit.contrastRatio(solid.fg, solid.bg));
+    });
+
+    test("and a lighter grey scores higher at the same fade", () => {
+        const at = colour => {
+            const painted = LayoutAudit.asPainted(LayoutAudit.parseColour(colour), PUCK, { alpha: 0.7, behind: PAGE });
+            return LayoutAudit.contrastRatio(painted.fg, painted.bg);
+        };
+        assert.ok(at("rgb(174, 174, 174)") > at("rgb(138, 138, 138)"));
+    });
+});
+
+describe("reading a colour off the page", () => {
+    test("rgb and rgba both come back as numbers", () => {
+        assert.deepEqual(LayoutAudit.parseColour("rgb(1, 2, 3)"), { r: 1, g: 2, b: 3, a: 1 });
+        assert.deepEqual(LayoutAudit.parseColour("rgba(1, 2, 3, 0.5)"), { r: 1, g: 2, b: 3, a: 0.5 });
+    });
+
+    test("a gradient gives up every stop, because text could be over any of them", () => {
+        const stops = LayoutAudit.gradientStops("linear-gradient(rgb(203, 170, 240), rgb(169, 127, 214))");
+        assert.equal(stops.length, 2);
+        assert.deepEqual(stops[0], { r: 203, g: 170, b: 240, a: 1 });
+        assert.deepEqual(stops[1], { r: 169, g: 127, b: 214, a: 1 });
+    });
+
+    test("no background image, no stops", () => {
+        assert.deepEqual(LayoutAudit.gradientStops("none"), []);
+    });
+});

tests/holdem/runUiAudit.js

@@ -68,57 +68,74 @@ async function main() {
     }
 
     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 });
+    // Twice over: once with a mouse, once with a thumb. The 44px rule stands itself
+    // down where `hover: hover` says there's a pointer, and a headless desktop browser
+    // is a pointer — so a single pass here has never once measured a touch target,
+    // however many viewports it visited. The phone-sized ones are exactly the pass that
+    // needs it.
+    for (const touch of [false, true]) {
+        const context = await browser.newContext(touch
+            ? { hasTouch: true, isMobile: true, deviceScaleFactor: 3 }
+            : {});
+        const page = await context.newPage();
+        const hand = touch ? "touch" : "mouse";
 
-        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 });
+        for (const [width, height, rawLabel] of VIEWPORTS) {
+            const label = `${rawLabel} · ${hand}`;
+            await page.setViewportSize({ width, height });
 
-        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}`));
+            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 });
 
-        for (const [name, open] of OVERLAYS) {
-            await page.evaluate(open);
-            await page.waitForTimeout(180);
+            const table = await page.evaluate(() => LayoutAudit.runAll());
             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 });
-        }
-    }
+            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 [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) });
+            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, rawLabel] of VIEWPORTS.filter((_, i) => i % 4 === 0)) {
+            const label = `${rawLabel} · ${hand}`;
+            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) });
+            result.warnings.forEach(w => warnings.push(`quick split · ${label}: ${w}`));
+        }
+
+        await context.close();
     }
 
     await browser.close();
 
-    console.log(`${checks} audits across ${VIEWPORTS.length} viewports`);
+    console.log(`${checks} audits across ${VIEWPORTS.length} viewports, with a mouse and with a thumb`);
     warnings.forEach(w => console.log(`  note: ${w}`));
     if (failures.length === 0) {
         console.log("clean");

tests/holdem/seatRing.test.js

@@ -92,6 +92,36 @@ describe("a felt wider than it is tall", () => {
     });
 });
 
+describe("how close the closest two seats come", () => {
+    // What decides whether the pucks shrink. Rim length per seat was the first answer
+    // and it is the wrong question: it measures the walk between two seats, not the
+    // gap. On a long oval the rim doubles back at the ends, so two seats a long walk
+    // apart end up stacked one above the other.
+    const gap = (count, width, height) => Render.closestSeatGapPx(count, { width, height });
+
+    test("a flat table's ends are far closer than its rim suggests", () => {
+        // 616x96: the landscape felt on a 640x360 phone once the bar has grown.
+        const rim = Math.PI * (3 * (271 + 40) - Math.sqrt((3 * 271 + 40) * (271 + 3 * 40))) / 6;
+        assert.ok(gap(6, 616, 96) < rim / 3, `${gap(6, 616, 96).toFixed(0)}px apart, ${rim.toFixed(0)}px of rim each`);
+    });
+
+    test("a round table's neighbours are about as far apart as the rim says", () => {
+        const rim = (Math.PI * 2 * 0.43 * 400) / 9;
+        assert.ok(Math.abs(gap(9, 400, 400) - rim) < rim * 0.15);
+    });
+
+    test("more seats, less room, in that order", () => {
+        assert.ok(gap(12, 400, 400) < gap(9, 400, 400));
+        assert.ok(gap(9, 400, 400) < gap(6, 400, 400));
+        assert.ok(gap(6, 400, 400) < gap(6, 800, 800), "and a bigger table gives more");
+    });
+
+    test("nothing to measure between fewer than two seats", () => {
+        assert.equal(gap(1, 400, 400), Infinity);
+        assert.equal(gap(9, 0, 0), Infinity);
+    });
+});
+
 describe("the shape of the ring", () => {
     test("is a mirror image left to right", () => {
         const seats = ringPixels(10, 601, 126);

tests/holdem/uiAudit.js

@@ -393,6 +393,37 @@ const LayoutAudit = {
         }
     },
 
+    // How much of this element actually reaches the screen, and what is behind the
+    // thing doing the fading.
+    //
+    // `opacity` on a box fades the whole box — its text and its own background together
+    // — onto whatever sits behind that box. So a dimmed seat is not "grey text on a
+    // dark puck"; it is a faded puck and faded text both landing on the felt. Both
+    // halves have to be composited the same way or the number means nothing.
+    fading(el) {
+        let alpha = 1;
+        let outermost = null;
+        for (let node = el; node; node = node.parentElement) {
+            const own = parseFloat(getComputedStyle(node).opacity);
+            if (own < 0.99) {
+                alpha *= own;
+                outermost = node;
+            }
+        }
+        if (!outermost) return { alpha: 1, behind: null };
+        return { alpha, behind: this.backgroundCandidates(outermost.parentElement || document.body)[0] || null };
+    },
+
+    // The two colours as the screen actually shows them, once the fading is applied.
+    asPainted(fgRaw, bg, fade) {
+        const solid = fgRaw.a === 1 ? fgRaw : this.over(fgRaw, bg);
+        if (fade.alpha >= 0.99 || !fade.behind) return { fg: solid, bg };
+        return {
+            fg: this.over({ ...solid, a: solid.a * fade.alpha }, fade.behind),
+            bg: this.over({ ...bg, a: bg.a * fade.alpha }, fade.behind),
+        };
+    },
+
     contrast({ minimum = 4.5, largeMinimum = 3, selector = null } = {}) {
         const offenders = [];
         const unmeasured = [];
@@ -426,12 +457,17 @@ const LayoutAudit = {
             // exempt — there's nothing to read at zero — but anything in between is
             // reported as unmeasured rather than passed over in silence, because a
             // number nobody checked is not the same as a number that's fine.
-            const opacity = parseFloat(style.opacity);
-            if (opacity <= 0.02) return;
-            const faded = opacity < 0.99 ||
-                [...this.ancestors(el)].some(a => parseFloat(getComputedStyle(a).opacity) < 0.99);
-            if (faded) {
-                unmeasured.push(`${this.describe(el)} :: faded (opacity ${opacity}), contrast not checked`);
+            const fade = this.fading(el);
+            if (fade.alpha <= 0.02) return;
+
+            // A control that is switched off is the one exemption WCAG itself grants —
+            // an inactive component has no contrast requirement, which is why every
+            // toolkit dims them. Said out loud rather than skipped in silence: this is
+            // the only exemption in here, and the moment a dimmed thing turns out to be
+            // live it stops applying.
+            const off = el.closest("[disabled], [aria-disabled='true']");
+            if (off) {
+                unmeasured.push(`${this.describe(el)} :: disabled control, exempt from AA`);
                 return;
             }
             // aria-hidden used to exempt text here, on the grounds that decoration
@@ -459,8 +495,8 @@ const LayoutAudit = {
             // 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 painted = this.asPainted(fgRaw, bg, fade);
+                best = Math.max(best, this.contrastRatio(painted.fg, painted.bg));
             });
 
             const sizePx = parseFloat(style.fontSize);
@@ -543,6 +579,17 @@ const LayoutAudit = {
             .filter(el => el.type !== "color")
             .filter(el => !(exempt && el.matches(exempt)))
             .forEach(el => {
+                // A link inside a sentence is the one target WCAG itself carves out:
+                // its size is set by the line it sits in, and padding a word out to
+                // 44px would break the paragraph around it. The rule is about controls
+                // a thumb goes hunting for, not words in prose. Said out loud, and
+                // narrow — display:inline, and real text either side of it.
+                if (el.tagName === "A" && getComputedStyle(el).display === "inline" &&
+                    el.parentElement &&
+                    [...el.parentElement.childNodes].some(n => n.nodeType === 3 && n.textContent.trim())) {
+                    unmeasured.push(`${this.describe(el)} :: link inside a sentence, sized by the line`);
+                    return;
+                }
                 // A control inside a scrolling sheet can sit below its container's
                 // visible area while still having a viewport rect. elementFromPoint at
                 // its centre then returns the sheet, effectiveTarget gives up, and the
@@ -674,6 +721,20 @@ const LayoutAudit = {
 
     // ---- Runner ----
 
+    // Every check this file knows how to make, every time.
+    //
+    // Two of them used not to be here. Contrast was simply missing from the list, and
+    // touch targets sat behind an opt-in flag nobody passed — so "the audit is clean"
+    // has meant nine checks rather than eleven, and the two left out are the two whose
+    // faults a dealer meets in a dim room with their thumb. Both were written, tested
+    // and then never run: the contrast checker was built across two rounds and every
+    // sweep since has been silent about colour.
+    //
+    // A check that decides it can't apply here says so out loud rather than reporting
+    // an empty offenders list, which reads as a pass. touchTargets stands itself down
+    // on a mouse-driven browser — that is right, a 24px control is fine with a cursor
+    // on it — but "not measured" and "measured and fine" are different answers and the
+    // runner now prints which one it got.
     runAll(options = {}) {
         const checks = [
             this.touchAction(),
@@ -686,8 +747,9 @@ const LayoutAudit = {
             this.fieldFontSize(),
             this.seatOwnership(),
             this.oneDealerButton(),
+            this.contrast(options.contrast),
+            this.touchTargets(options.minimumTarget, options.touchTargets),
         ];
-        if (options.includeTouchTargets) checks.push(this.touchTargets(options.minimumTarget));
 
         return {
             viewport: `${innerWidth}x${innerHeight}`,
@@ -695,8 +757,13 @@ const LayoutAudit = {
             // Things worth knowing that aren't faults — see occlusion() on toasts.
             // Controls a check couldn't probe go here too: not a fault, but not a pass
             // either, and a silent skip is how faults hide.
-            warnings: checks.flatMap(c => [...(c.warnings || []), ...(c.unmeasured || [])]),
-            passed: checks.filter(c => c.offenders.length === 0).map(c => c.name),
+            warnings: checks.flatMap(c => [
+                ...(c.warnings || []),
+                ...(c.unmeasured || []),
+                ...(c.skipped ? [`${c.name}: not run here — ${c.skipped}`] : []),
+            ]),
+            passed: checks.filter(c => !c.skipped && c.offenders.length === 0).map(c => c.name),
+            skipped: checks.filter(c => c.skipped).map(c => c.name),
             clean: checks.every(c => c.offenders.length === 0),
         };
     },