[arrzdev]

What and why

• Landscape (667x375): the panel beside the board is taller than the screen. Tabbing to a control at its foot scrolled the whole panel and cut the score card off the top. The seat card is now pinned at the top of the panel; the guide, move list and actions scroll under it, and a focused control is scrolled clear of the card.
• Phone sign-in sheet: the sheet now has a visible Close (44x44, same icon and label as the desktop dialog, last Tab stop), opt-in on Sheet so other sheets are unchanged. Close and Escape both leave the visitor on home with focus on the home heading instead of <body>. Modal no longer treats <body> as an opener to hand focus back to.

Visual changes, so this stays a draft until the before/after screenshots are approved.

How to verify

pnpm test:e2e e2e/landscape-score.spec.ts e2e/signin-sheet-close.spec.ts --project=chromium --project=webkit-iphone. Both specs fail on main. Typecheck, Biome and the game build pass.

UI quality gate

• No layout shift: click, open, hover, focus, loading → loaded, font swap
• Space reserved for text that appears later (status, error, feedback)
• No hard-clipped text: ellipsis or wrap, never cut mid-character
• No text hidden by its container, the viewport, or a sticky bar
• Modals and dialogs fit without scrolling at 375x667
• Focus ring fully visible on every control (not cut by overflow)
• Touch targets ≥ 44x44 on phone
• Empty, loading and error states exist and look designed
• Every network action shows a pending state: spinner, busy, disabled, one submit (not touched)
• Button labels stay on one line at 320 in the longest locale (no labels added; Close is an icon)
• Checked at 375x667, 402x710 and desktop, Chromium + WebKit
• New UI spec uses the shift and clipped-text helpers (clipped-text helper; no shift on open)