From c353c036bac80fe4f7726a9b7c3575bba2f13e92 Mon Sep 17 00:00:00 2001
From: Ilia Denisov <evilcart@gmail.com>
Date: Sat, 4 Jul 2026 18:43:52 +0200
Subject: [PATCH] fix(ui): draw board tile glyphs on Chrome < 105
 (container-query-unit fallback)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The board sizes its tile letter/value glyphs (and the blank/bonus marks) in container-
query units (cqw), which are Chrome 105+. On an older engine — e.g. the Chrome 74
Android 10 System WebView — the cqw declaration is invalid and dropped, so the glyph
inherits the .cell `font-size: 0` reset and renders at 0px: the board tiles show empty
while the rack and stats tiles (not under that reset) render fine.

Add a viewport-relative fallback before each cqw font-size — calc(<n>vmin * var(--z, 1))
— which approximates the board-relative size and tracks the zoom (--z), so old WebViews
draw the glyphs; Chrome 105+ still takes the exact cqw line after it. Additive only, no
change on modern engines (verified: mock e2e incl. the board/zoom specs still green).

The landscape board-container sizing (.scaler.land min(100cqw,100cqh)) still relies on
container-query units and is not covered here — portrait (the mobile default under test)
is unaffected by that.
---
 ui/src/game/Board.svelte | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/ui/src/game/Board.svelte b/ui/src/game/Board.svelte
index 7288220..3e94fa3 100644
--- a/ui/src/game/Board.svelte
+++ b/ui/src/game/Board.svelte
@@ -479,6 +479,11 @@
     position: absolute;
     top: 5%;
     left: 8%;
+    /* Chrome < 105 has no container-query units: a dropped `cqw` would inherit the .cell
+       `font-size: 0` and the glyph would vanish. Fall back to a viewport-relative size that tracks
+       the board (≈ the viewport-fitted query container) and the zoom (--z), so old Android System
+       WebViews still draw the tile glyphs. Chrome 105+ takes the exact `cqw` line below. */
+    font-size: calc(4.2vmin * var(--z, 1));
     font-size: 4.2cqw;
     font-weight: 700;
     line-height: 1;
@@ -487,12 +492,14 @@
     position: absolute;
     right: 5%;
     bottom: 3%;
+    font-size: calc(2.4vmin * var(--z, 1)); /* cqw fallback for Chrome < 105 — see .letter */
     font-size: 2.4cqw;
     font-weight: 600;
   }
   /* A placed Erudit blank ("звёздочка") shows its star where the (absent) point value sits,
      its ink centred on the same line as a neighbouring tile's value digit. */
   .blankmark {
+    font-size: calc(2.8vmin * var(--z, 1)); /* cqw fallback for Chrome < 105 — see .letter */
     font-size: 2.8cqw;
     bottom: 0;
   }
@@ -501,6 +508,7 @@
     inset: 0;
     display: grid;
     place-items: center;
+    font-size: calc(3.6vmin * var(--z, 1)); /* cqw fallback for Chrome < 105 — see .letter */
     font-size: 3.6cqw;
     opacity: 0.7;
   }
@@ -509,6 +517,7 @@
     inset: 0;
     display: grid;
     place-items: center;
+    font-size: calc(2.7vmin * var(--z, 1)); /* cqw fallback for Chrome < 105 — see .letter */
     font-size: 2.7cqw;
     font-weight: 600;
     opacity: 0.9;
@@ -526,10 +535,12 @@
     padding: 0 1px;
   }
   .bt {
+    font-size: calc(1.7vmin * var(--z, 1)); /* cqw fallback for Chrome < 105 — see .letter */
     font-size: 1.7cqw;
     font-weight: 600;
   }
   .bb {
+    font-size: calc(1.9vmin * var(--z, 1)); /* cqw fallback for Chrome < 105 — see .letter */
     font-size: 1.9cqw;
     font-weight: 700;
     white-space: nowrap;