Move name input inline with status bar; remove player ID

wwwroot/app.js

@@ -52,9 +52,6 @@ async function loadState() {
   if (nameInput && !nameInput.dataset.userEditing) {
     nameInput.value = me.displayName || "";
   }
-  if ($("player-id")) {
-    $("player-id").textContent = `Player ID: ${me.id}`;
-  }
   applyNameRequirementUI();
 }
 

wwwroot/index.html

@@ -11,20 +11,17 @@
     <span class="status-dot"></span>
     <span id="phase-pill">Loading…</span>
     <span class="counts" id="counts">—</span>
+    <div class="inline-name">
+      <label for="name-input" class="label">Name</label>
+      <input id="name-input" maxlength="64" placeholder="Pick a name" />
+      <button id="save-name" class="ghost">Save</button>
+      <span class="hint warning hidden" id="name-warning">Name required</span>
+    </div>
   </div>
 
   <main class="grid">
     <section class="card" id="actions-card">
       <div id="suggest-view" class="phase-view hidden">
-        <div class="card subcard">
-          <h3>Your Name</h3>
-          <label class="stack">
-            <span class="label">Display name</span>
-            <input id="name-input" maxlength="64" placeholder="Pick a name" />
-          </label>
-          <button id="save-name" class="ghost">Save</button>
-          <p class="hint" id="player-id"></p>
-        </div>
         <div class="card subcard">
           <h2>Suggest (up to 3)</h2>
           <p class="hint">Only you can see your suggestions until Reveal.</p>

wwwroot/styles.css

@@ -34,6 +34,19 @@ body {
   font-size: 13px;
 }
 
+.inline-name {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+}
+.inline-name input {
+  width: 160px;
+}
+.inline-name .hint {
+  margin: 0;
+}
+
 .grid {
   display: grid;
   grid-template-columns: 1fr;