fix(layout): fit names on phones without sideways scroll

Display and game names shrink to 0.875rem, then end with an ellipsis
(FitText + fit-text utility, CSS container units, full text in title).
Rows and buttons wrap at large fonts, header points chip can shrink.
Guard: scripts/check-overflow.js.

README.md

@@ -281,6 +281,18 @@ npm test
 npm run build
 ```
 
+### Overflow check (phones)
+
+`scripts/check-overflow.js` visits every page at 360, 390, 412 and 414 px and reports any page that scrolls sideways
+(`scrollWidth != clientWidth`) with its widest elements. It is not part of the gate and needs no dependency:
+
+1. Start the local stack (see "Run locally") and log in as an admin in the Playwright MCP browser.
+2. Set `GAME_ID` (an appid in the library) and `PROFILE_NAME` (the display name of that user, the profile must be public) at the top of the script.
+3. Run the file with the Playwright MCP tool `browser_run_code_unsafe` (`filename` = the script). An empty `hits` list is green.
+4. Other runs: edit `FONT_PERCENT = 130` (large system font), `DARK`, `SKIN`. For the logged-out pages set `LOGGED_OUT = true` and run in a browser without a session (a logged-in browser redirects them).
+
+Use long display names (up to 24 characters in Auth) and long game names in the local data to stress the layout.
+
 ## Roadmap
 
 See `ROADMAP.md` in the ToBePlayed-Deployment repo.