Fix FP/VR visibility in iframe, speed control, pointer lock

- Add FP and JOIN buttons to index.html controls bar
- Forward toggle-fp and show-join messages to 3d iframe
- Add pointer-lock, xr-spatial-tracking, fullscreen to iframe allow
- Click overlay for pointer lock (user gesture required)
- Fix speed control: set simSpeed immediately before async API call
- Prevent speed flickering at 10x/50x

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

web/3d.html

@@ -192,6 +192,13 @@
 <div id="fp-hint" style="display:none;position:fixed;bottom:60px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.7);color:#fff;padding:8px 16px;border-radius:8px;font-size:13px;z-index:50;text-align:center">
   WASD — move &middot; Mouse — look &middot; ESC — exit &middot; E — interact
 </div>
+<div id="fp-click-overlay" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:250;cursor:pointer;display:none;align-items:center;justify-content:center">
+  <div style="text-align:center;color:#fff">
+    <div style="font-size:48px;margin-bottom:16px">&#128065;</div>
+    <div style="font-size:20px;font-weight:300;letter-spacing:2px">CLICK TO ENTER FIRST-PERSON</div>
+    <div style="font-size:13px;color:#aaa;margin-top:8px">WASD — move &middot; Mouse — look &middot; ESC — exit</div>
+  </div>
+</div>
 
 <div id="player-login">
   <h2>JOIN SOCI CITY</h2>
@@ -2902,7 +2909,7 @@ fpControls.addEventListener('lock', () => {
 fpControls.addEventListener('unlock', () => {
   document.getElementById('fp-crosshair').style.display = 'none';
   if (fpMode) {
-    setTimeout(() => { if (fpMode) fpControls.lock(); }, 200);
+    document.getElementById('fp-click-overlay').style.display = 'flex';
   }
 });
 
@@ -2912,10 +2919,15 @@ function enterFPMode() {
   fpCamera.aspect = window.innerWidth / window.innerHeight;
   fpCamera.updateProjectionMatrix();
   controls.enabled = false;
-  fpControls.lock();
   fpClock.start();
   document.getElementById('btn-fp').classList.add('active');
   document.getElementById('btn-fp').title = 'Exit first-person';
+  const overlay = document.getElementById('fp-click-overlay');
+  overlay.style.display = 'flex';
+  overlay.onclick = () => {
+    overlay.style.display = 'none';
+    fpControls.lock();
+  };
 }
 
 function exitFPMode() {
@@ -2925,6 +2937,7 @@ function exitFPMode() {
   fpClock.stop();
   document.getElementById('fp-crosshair').style.display = 'none';
   document.getElementById('fp-hint').style.display = 'none';
+  document.getElementById('fp-click-overlay').style.display = 'none';
   document.getElementById('btn-fp').classList.remove('active');
   document.getElementById('btn-fp').title = 'First-person view';
 }
@@ -3131,6 +3144,8 @@ if (isEmbedded) {
     if (e.data?.type === 'zoom-out')      zoomOut();
     if (e.data?.type === 'reset-camera')  resetCamera();
     if (e.data?.type === 'set-speed')     setDemoSpeed(e.data.multiplier);
+    if (e.data?.type === 'toggle-fp')     window._toggleFP();
+    if (e.data?.type === 'show-join')     window._showJoin();
   });
 }
 connectWebSocket();

web/index.html

@@ -293,6 +293,9 @@
       <button class="ctrl-btn" onclick="send3d('zoom-in')" title="Zoom In (scroll in 3D view)">＋</button>
       <button class="ctrl-btn" onclick="send3d('zoom-out')" title="Zoom Out (scroll in 3D view)">－</button>
       <button class="ctrl-btn" onclick="send3d('reset-camera')" title="Reset 3D camera">Fit</button>
+      <span style="color:#1a3a6e;margin:0 4px">│</span>
+      <button class="ctrl-btn" id="btn-fp-main" onclick="send3d('toggle-fp')" title="First-person view">&#128065; FP</button>
+      <button class="ctrl-btn" id="btn-join-main" onclick="send3d('show-join')" title="Join as player">JOIN</button>
     </span>
     <span id="api-calls">API: 0</span>
     <span id="cost">$0.00</span>
@@ -301,7 +304,7 @@
 </div>
 <div id="main">
   <div id="viewport-3d">
-    <iframe id="city3d" allow="autoplay"></iframe>
+    <iframe id="city3d" allow="autoplay; pointer-lock; xr-spatial-tracking; fullscreen"></iframe>
     <script>document.getElementById('city3d').src = location.protocol === 'file:' ? '3d.html' : '/3d';</script>
     <div id="tooltip" style="z-index:200"></div>
     <div id="toast-container"></div>
@@ -3249,19 +3252,12 @@ async function togglePause() {
 }
 
 async function setSpeed(mult) {
-  try {
-    const res = await fetch(`${API_BASE}/controls/speed?multiplier=${mult}`, { method: 'POST' });
-    if (res.ok) {
-      const data = await res.json();
-      simSpeed = data.speed;
-      updateControlsUI();
-      send3dSpeed(simSpeed);
-      return;
-    }
-  } catch(e) {}
   simSpeed = mult;
   updateControlsUI();
   send3dSpeed(mult);
+  try {
+    await fetch(`${API_BASE}/controls/speed?multiplier=${mult}`, { method: 'POST' });
+  } catch(e) {}
 }
 
 function updateControlsUI() {