Take the broken wordmark off the felt

The felt carried "TEXAS HOLD'EM" across its middle, and the pot badge sat on top of it. Measured at every seat count from two to ten, the middle 20% of the word was covered, so the table read TEXAS LD'EM That is not a watermark, it is a rendering fault, and it looked like one. I tried to move it before removing it. Four placements, measured across six viewports and two seat counts each, as the share of the word covered by a seat, a bet chip or the pot badge: desktop tablet phone phone landscape 1280x900 768x1024 390x844 360x640 844x390 centred (before) 20% 20% 20% 20% 20% 30% down, full size 0-7% 0-12% 43-60% 48-70% 20-23% 20% down, smaller 0% 0% 40-67% 53-70% 40% 78% down, smaller 0% 0% 77-97% 90-100%* 27-37% * and off the oval entirely at 360px Desktop and tablet can be made clean. A phone cannot: below 900px the felt is square, and a square felt with six to nine seats has no clear horizontal band wide enough for a word. The best phone result of any placement was 40% covered. So it is gone rather than special-cased per device for a decoration. The felt still has its gradient, its rim, the inner gold line and its shadow to be a table with, and the page header says "Texas Hold'em Dealer" a few inches above it. The reasoning and the numbers are left in the CSS where the element used to be, so whoever thinks of adding one back finds out what happened first. 269 tests still passing. Seven viewports: contrast clean, layout audit clean everywhere but the landscape phone already known from #63, no console errors. Co-Authored-By: Claude Opus 5 <[email protected]> Claude-Session: https://claude.ai/code/session_015bnp7xKUPFFSpwkYNFaPgb
2026-09-01 18:54:52 -06:00
2 changed files with 12 additions and 20 deletions
@@ -25,7 +25,6 @@
        <section id="tableSection">
            <div id="pokerTableWrap">
                <div id="pokerTable">
-                    <div id="tableWatermark" aria-hidden="true">Texas Hold'em</div>
                    <div id="potBadge">
                        <span id="potBadgeLabel">Pot</span>
                        <span id="potBadgeAmount">$0</span>
@@ -357,21 +357,18 @@ button,
    justify-content: center;
 }

-#tableWatermark {
-    position: absolute;
-    inset: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: rgba(255, 255, 255, 0.06);
-    font-size: 2.4rem;
-    font-weight: 700;
-    letter-spacing: 0.15em;
-    text-transform: uppercase;
-    text-align: center;
-    pointer-events: none;
-    user-select: none;
-}
+/* The felt used to carry a "TEXAS HOLD'EM" wordmark across its middle. It came out
+   from behind the pot badge in two pieces — measured at every seat count from two to
+   ten, the middle 20% of it was covered, so the felt read "TEXAS  LD'EM" — and no
+   placement fixed that everywhere. Thirty per cent down cleared the badge on a desktop
+   and landed on the seats of a phone's square felt (43-70% covered); a smaller mark at
+   20% or 78% was clean on desktop and tablet and no better on a phone; the bottom one
+   fell off the oval entirely at 360px. A square felt with six to nine seats has no
+   clear band wide enough for a word.
+   
+   So it's gone. A watermark that looks broken is worse than no watermark, and the felt
+   has a gradient, a rim, an inner gold line and a shadow to be a table with — plus a
+   header saying "Texas Hold'em Dealer" a few inches above it. */

 #potBadge {
    position: relative;
@@ -2845,10 +2842,6 @@ body.hasActionBar #toastHost {
        padding: 0.25rem 0.3rem;
    }

-    #tableWatermark {
-        font-size: 1.4rem;
-    }
-
    #potBadge {
        padding: 0.5rem 1.1rem;
    }