Require a nickname before joining and add a quick-start help modal

New visitors (no nickname in localStorage) get a blocking welcome
modal instead of a silently-generated guest-N name, so everyone in a
room has a name they actually chose. It doubles as quick-start help
(join a channel, mic/deafen/share shortcuts, drag-to-reposition on the
spatial map) reachable any time via the new ? button. The sidebar nick
field no longer falls back to a random name when cleared — it now
just rejects the blank edit.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

public/index.html

@@ -52,6 +52,7 @@
         <button id="btn-deafen" class="ctl" title="Toggle deafen (D)">&#128064;</button>
         <button id="btn-share" class="ctl" title="Share your screen (S)">&#128421;&#65039;</button>
         <button id="btn-settings" class="ctl" title="Voice &amp; ICE settings">&#9881;&#65039;</button>
+        <button id="btn-help" class="ctl" title="How to use gibbz voice">&#10067;</button>
       </div>
     </footer>
   </aside>
@@ -98,6 +99,30 @@
   </div>
 </div>
 
+<!-- welcome / nickname / how-to-use modal -->
+<div id="welcome-backdrop" class="hidden">
+  <div id="welcome-modal" role="dialog" aria-modal="true">
+    <h2>Welcome to gibbz voice</h2>
+    <p class="hint">Pick a name so others can recognize you.</p>
+    <label class="field-label" for="welcome-nick">Nickname</label>
+    <input id="welcome-nick" maxlength="24" spellcheck="false" autocomplete="off" placeholder="e.g. alex" />
+    <div id="welcome-nick-error" class="field-error hidden">Enter a nickname to continue.</div>
+
+    <h3>Quick start</h3>
+    <ul class="howto-list">
+      <li>Click a <b>voice channel</b> in the sidebar to join it — click another to switch.</li>
+      <li><b>Mic</b>, <b>Deafen</b> and <b>Share screen</b> are the buttons bottom-left, or press <b>M</b> / <b>D</b> / <b>S</b>.</li>
+      <li>On the <b>spatial audio</b> map, drag your dot around — you hear people relative to where they stand.</li>
+      <li>Screen shares show up at the top of the main area; pop one into its own window with <b>&#10726;</b>.</li>
+    </ul>
+
+    <div class="modal-actions">
+      <span class="spacer"></span>
+      <button id="welcome-continue">Continue</button>
+    </div>
+  </div>
+</div>
+
 <div id="mx-panel" class="hidden">
   <div class="mx-header">
     <span>#general <span class="poc-tag">matrix · experimental</span></span>