Fix the room code field and give the multiplayer screen a close control

- The room code field was a 94px box with a clipped placeholder: twice the
  height of the name field above it, and the largest control on the screen
  for the smallest input on it. align-items: stretch was inflating it from a
  natural 46px, and the field was sized to whatever width was going rather
  than to the five characters a code actually is. It is now 9ch wide and
  matches the height of the Join button beside it, which is sized to match it
  in turn rather than being a full-size action.
- The multiplayer screen was the only one reachable from the rails without a
  close control. Both of its views have one now.

1 files changed, 4 insertions, 1 deletions

diff --git a/web/src/screens/multiplayerScreen.js b/web/src/screens/multiplayerScreen.js
index 073d3cc..7292bcc 100644
--- a/web/src/screens/multiplayerScreen.js
+++ b/web/src/screens/multiplayerScreen.js
@@ -1,4 +1,5 @@
 import { escapeHtml } from '../util.js';
+import { CLOSE_ICON } from './icons.js';
 import { renderCornerRail } from '../cornerRail.js';
 import { attachTooltips } from '../tooltip.js';
 import { renderTopRail } from '../topRail.js';
@@ -70,6 +71,7 @@ export function renderMultiplayerScreen(root, { onBack, onFinish, onShowStats, o
         let deviceFilter = 'everyone';
         root.innerHTML = `
             <div class="stats-screen">
+                <button class="screen-close" data-action="menu" aria-label="Close" data-tooltip="Close (Esc)">${CLOSE_ICON}</button>
                 <div class="logo" data-action="menu">TyperPunk</div>
                 <h2>Multiplayer</h2>
                 <div class="account-panel">
@@ -80,7 +82,7 @@ export function renderMultiplayerScreen(root, { onBack, onFinish, onShowStats, o
                     <div class="mp-divider"><span>or race friends</span></div>
 
                     <div class="mp-code-row">
-                        <input class="account-input" type="text" id="mp-room-code" placeholder="Enter a room code" maxlength="5" autocomplete="off" spellcheck="false">
+                        <input class="account-input" type="text" id="mp-room-code" placeholder="CODE" maxlength="5" autocomplete="off" spellcheck="false">
                         <button class="menu-button" data-action="join">Join</button>
                     </div>
                     <button class="menu-button ghost" data-action="create" data-tooltip="Opens an empty room and gives you a code to share.">Create a Room</button>
@@ -157,6 +159,7 @@ export function renderMultiplayerScreen(root, { onBack, onFinish, onShowStats, o
     function renderLobby(roomCode, auto = false) {
         root.innerHTML = `
             <div class="stats-screen">
+                <button class="screen-close" data-action="menu" aria-label="Close" data-tooltip="Close (Esc)">${CLOSE_ICON}</button>
                 <div class="logo" data-action="menu">TyperPunk</div>
                 <h2>${auto ? 'Finding a race' : `Room ${escapeHtml(roomCode)}`}</h2>
                 <div class="settings-hint">${auto