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;