Scope first-person overlay and unify elevator colors

packages/editor/src/components/editor/first-person-controls.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import '../../three-types'
 import {
   type AnyNode,
   type AnyNodeId,
@@ -45,6 +44,7 @@ import {
   Vector3,
 } from 'three'
 import { acceleratedRaycast, computeBoundsTree, disposeBoundsTree } from 'three-mesh-bvh'
+import '../../three-types'
 import {
   closeDoorOpenState,
   DOOR_SWING_OPEN_ANGLE,
@@ -1324,7 +1324,7 @@ export const FirstPersonOverlay = ({ onExit }: { onExit: () => void }) => {
   return (
     <>
       {isLocked && (
-        <div className="pointer-events-none fixed inset-0 z-40 flex items-center justify-center">
+        <div className="pointer-events-none absolute inset-0 z-40 flex items-center justify-center">
           <div className="relative h-7 w-7">
             <div className="absolute top-1/2 left-1/2 h-px w-7 -translate-x-1/2 -translate-y-1/2 bg-white/60" />
             <div className="absolute top-1/2 left-1/2 h-7 w-px -translate-x-1/2 -translate-y-1/2 bg-white/60" />
@@ -1332,7 +1332,7 @@ export const FirstPersonOverlay = ({ onExit }: { onExit: () => void }) => {
         </div>
       )}
 
-      <div className="fixed top-4 right-4 z-50">
+      <div className="absolute top-4 right-4 z-50">
         <button
           className="pointer-events-auto flex items-center gap-2 rounded-xl border border-border/40 bg-background/90 px-4 py-2 font-medium text-foreground text-sm shadow-lg backdrop-blur-xl transition-colors hover:bg-background"
           onClick={handleExit}
@@ -1346,7 +1346,7 @@ export const FirstPersonOverlay = ({ onExit }: { onExit: () => void }) => {
       </div>
 
       {!hasPlacedSpawn && (
-        <div className="fixed top-4 left-1/2 z-50 -translate-x-1/2">
+        <div className="absolute top-4 left-1/2 z-50 -translate-x-1/2">
           <div className="rounded-2xl border border-sky-300/35 bg-slate-950/88 px-4 py-2 text-center text-slate-100 text-sm shadow-lg backdrop-blur-xl">
             Place a Spawn Point from the Build tab to control where walkthrough starts.
           </div>
@@ -1354,7 +1354,7 @@ export const FirstPersonOverlay = ({ onExit }: { onExit: () => void }) => {
       )}
 
       {isLocked && (
-        <div className="pointer-events-none fixed top-1/2 right-6 z-40 -translate-y-1/2">
+        <div className="pointer-events-none absolute top-1/2 right-6 z-40 -translate-y-1/2">
           <div className="flex min-w-[148px] flex-col gap-3 rounded-2xl border border-border/35 bg-background/80 px-4 py-4 shadow-lg backdrop-blur-xl">
             <ControlHint keys={['W', 'A', 'S', 'D']} label="Move" />
             <div className="h-px w-full bg-border/30" />

packages/editor/src/components/editor/index.tsx

@@ -1158,6 +1158,11 @@ export default function Editor({
                       <HelperManager />
                     </div>
                   )}
+                  {isFirstPersonMode && (
+                    <FirstPersonOverlay
+                      onExit={() => useEditor.getState().setFirstPersonMode(false)}
+                    />
+                  )}
                   {viewerBanner}
                   {projectId ? <SnapshotCaptureOverlay projectId={projectId} /> : null}
                 </>
@@ -1171,12 +1176,6 @@ export default function Editor({
             />
             <EditorCommands />
             <CommandPalette emptyAction={commandPaletteEmptyAction} />
-            {/* First-person overlay — rendered on top of normal layout */}
-            {isFirstPersonMode && (
-              <div className="pointer-events-none fixed inset-0 z-50">
-                <FirstPersonOverlay onExit={() => useEditor.getState().setFirstPersonMode(false)} />
-              </div>
-            )}
           </>
         )}
       </PresetsProvider>
@@ -1231,13 +1230,10 @@ export default function Editor({
               <div className="pointer-events-auto">
                 <HelperManager />
               </div>
-            </ViewerOverlays>
-            {/* First-person overlay — rendered on top of normal layout */}
-            {isFirstPersonMode && (
-              <div className="pointer-events-none fixed inset-0 z-50">
+              {isFirstPersonMode && (
                 <FirstPersonOverlay onExit={() => useEditor.getState().setFirstPersonMode(false)} />
-              </div>
-            )}
+              )}
+            </ViewerOverlays>
           </>
         )}
       </div>