On phones the primary buttons now read START / WATCH / SHOP (short labels via
spans toggled by media query) with tighter padding so they fit a single row.
The on-screen D-pad is smaller (44px) and more transparent so it covers less
of the chat/game underneath.
On phones the dungeon canvas was letterboxed: the game grid row was 1fr and
got squeezed by the status bar + chat, so the 800x608 canvas scaled to that
short height and rendered narrow with black side bars.
Drive the game area by width instead — full-width box with the canvas's own
aspect ratio (auto height) — and hand the leftover vertical space to chat
(now 1fr, max-height cap removed) so it's roomier too.
The layout was already partly responsive (max-width:100vw, min(480px,90vw)
modals, canvas max-width:100%, and the renderer centres a fixed viewport on the
player) but had no viewport meta, so none of it engaged on phones.
- Add the viewport (+charset) meta — unlocks the existing responsive rules.
- Mobile media query (<=820px): stack the 3-column grid into one column
(header/status/game/chat/input/footer), shrink fonts, and cap the fixed-width
play/history/leaderboard modals to 94vw so they fit instead of overflowing.
- On-screen D-pad + swipe-to-move (new touchControls.js), both emitting the
same player_move {direction} event the keyboard uses — no game-logic change.
Shown on small screens or any touch device (body.touch).
- Remove the leftover "GAME AREA" debug overlay.
jwinterm