diff --git a/src/App.svelte b/src/App.svelte
index db386f8ce..2190c072c 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -67,6 +67,8 @@
   import SculptToolbar from './components/menu/SculptToolbar.svelte'
   import SplineToolbar from './components/menu/SplineToolbar.svelte'
   import MeasureToolbar from './components/menu/MeasureToolbar.svelte' // 47 M1
+  import UnderlayWindow from './components/menu/UnderlayWindow.svelte' // 60 Q5
+  import { underlayDropMenu } from '$lib/underlays'
   import ModuleToolboxLayer from './components/ui/ModuleToolboxLayer.svelte'
   // 48 D1: the node graph debugger's panel (loaded the first time it opens)
   import { debugOpen } from '$lib/flowDebug.js'
@@ -388,6 +390,13 @@ import { startMusicToolbox } from './lib/musicToolbox'
     // an unsupported file — importFile pairs them up.
     const companionExt = /\.(mtl|png|jpe?g|webp|bmp|gif)$/i
     const companions = files.filter((file) => companionExt.test(file.name))
+    // 60 Q5: a drop of nothing but images is not a model's companions — they used to be
+    // dropped silently. Ask what they are for: a reference image to build over, or the Explorer.
+    const imageExt = /\.(png|jpe?g|webp|bmp|gif)$/i
+    if (files.every((file) => imageExt.test(file.name))) {
+      underlayDropMenu.set({ x: event.clientX, y: event.clientY, files })
+      return
+    }
     files.forEach((file) => {
       const name = file.name.toLowerCase()
       if (modelExt.test(name)) importFile(file, file.name.replace(modelExt, ''), undefined, undefined, companions)
@@ -451,6 +460,8 @@ import { startMusicToolbox } from './lib/musicToolbox'
 <SculptToolbar />
 <SplineToolbar />
 <MeasureToolbar />
+<!-- 60 Q5: Reference images (+ the image-drop "Use as reference" menu) -->
+<UnderlayWindow />
 <!-- A5: module toolboxes. OUTSIDE the {#if !$isLocked} block — a toolbox that opted
      into playMode has to survive Play mode, and the layer decides per box. -->
 <ModuleToolboxLayer />
diff --git a/src/components/Scene.svelte b/src/components/Scene.svelte
index 9065cea28..b507495ab 100644
--- a/src/components/Scene.svelte
+++ b/src/components/Scene.svelte
@@ -105,6 +105,7 @@
 	// 36 A2: the headset browser's own "Enter VR" offer — decided by us, not threlte's default
 	import { xrOfferMode } from '$lib/xrOffer';
 	import MeasureOverlay from './MeasureOverlay.svelte';
+	import UnderlayLayer from './UnderlayLayer.svelte'; // 60 Q5
 	import AnnotationPins from './AnnotationPins.svelte';
 	import PingMarkers from './PingMarkers.svelte';
 	import PingHighlights from './PingHighlights.svelte';
@@ -1811,6 +1812,10 @@
 <T.Group bind:ref={$worldRig} name="world-grab-rig">
 	<T.Group bind:ref={$objectsGroup} name="sceneObjects" />
 
+	<!-- 60 Q5: reference images — under the world rig (a VR world grab carries them), never in
+	     sceneObjects (never picked, synced, saved or exported) -->
+	<UnderlayLayer />
+
 	<CameraPreview />
 
 	<!-- CO4: no virtual ground in AR — the grid stands down over passthrough
diff --git a/src/components/UnderlayLayer.svelte b/src/components/UnderlayLayer.svelte
new file mode 100644
index 000000000..8812ef89d
--- /dev/null
+++ b/src/components/UnderlayLayer.svelte
@@ -0,0 +1,101 @@
+<script>
+	// 60 Q5: THE REFERENCE IMAGES IN THE VIEWPORT. Mounted inside the world rig (so a VR world grab
+	// carries them with the content) but OUTSIDE `sceneObjects` — nothing under here is picked,
+	// selected, synced, saved, exported or published (the underlays.js header). Each plane:
+	//  · sits on the editor HELPER layer (helperLayer.js), so only the editor camera ever draws it —
+	//    the play camera, camera previews, the PiP, gallery captures and clean recordings never do;
+	//  · is ALSO switched off in Play and Interact, whatever the "helpers in Play" debug toggle says;
+	//  · has a no-op raycast, so even a ray cast over the whole scene cannot land on it.
+	import { T } from '@threlte/core';
+	import * as THREE from 'three';
+	import { onDestroy } from 'svelte';
+	import { underlays, setUnderlayScene, loadUnderlays, underlayHeight } from '$lib/underlays';
+	import { markHelper } from '$lib/helperLayer';
+	import { currentLevel } from '$lib/levels';
+	import { isLocked, editorMode, pokeScene } from '../stores/sceneStore';
+
+	const root = new THREE.Group();
+	root.name = 'reference-underlays';
+	root.userData.underlay = true;
+
+	/** @type {Map<string, {mesh: any, src: string, texture: any}>} */
+	const live = new Map();
+	const loader = new THREE.TextureLoader();
+	const noRaycast = () => {};
+
+	$effect(() => {
+		setUnderlayScene($currentLevel?.name ?? '');
+	});
+	void loadUnderlays();
+
+	const playing = $derived($isLocked === true || $editorMode === 'interact');
+
+	function build(/** @type {any} */ u) {
+		const texture = loader.load(u.src, () => pokeScene());
+		texture.colorSpace = THREE.SRGBColorSpace;
+		const material = new THREE.MeshBasicMaterial({
+			map: texture,
+			transparent: true,
+			opacity: u.opacity,
+			side: THREE.DoubleSide,
+			toneMapped: false,
+			// a ground underlay must not fight the grid or a floor at the same height
+			polygonOffset: true,
+			polygonOffsetFactor: -1,
+			polygonOffsetUnits: -4
+		});
+		const mesh = new THREE.Mesh(new THREE.PlaneGeometry(1, 1), material);
+		mesh.name = 'underlay:' + u.id;
+		mesh.userData.underlay = u.id;
+		mesh.raycast = noRaycast;
+		mesh.renderOrder = -1;
+		markHelper(mesh);
+		return { mesh, src: u.src, texture };
+	}
+
+	function dispose(/** @type {{mesh: any, texture: any}} */ entry) {
+		root.remove(entry.mesh);
+		entry.mesh.geometry.dispose();
+		entry.mesh.material.dispose();
+		entry.texture.dispose();
+	}
+
+	$effect(() => {
+		const list = $underlays;
+		const hide = playing;
+		const seen = new Set();
+		for (const u of list) {
+			seen.add(u.id);
+			let entry = live.get(u.id);
+			if (entry && entry.src !== u.src) {
+				dispose(entry);
+				entry = undefined;
+			}
+			if (!entry) {
+				entry = build(u);
+				live.set(u.id, entry);
+				root.add(entry.mesh);
+			}
+			const m = entry.mesh;
+			m.position.fromArray(u.position);
+			m.quaternion.fromArray(u.quaternion);
+			m.scale.set(u.width, underlayHeight(u), 1);
+			m.material.opacity = u.opacity;
+			m.visible = u.visible && !hide;
+			m.userData.owner = u.owner ?? '';
+		}
+		for (const [id, entry] of live) {
+			if (seen.has(id)) continue;
+			dispose(entry);
+			live.delete(id);
+		}
+		pokeScene();
+	});
+
+	onDestroy(() => {
+		for (const entry of live.values()) dispose(entry);
+		live.clear();
+	});
+</script>
+
+<T is={root} />
diff --git a/src/components/menu/Controls.svelte b/src/components/menu/Controls.svelte
index b330b8cbf..ac75c7478 100644
--- a/src/components/menu/Controls.svelte
+++ b/src/components/menu/Controls.svelte
@@ -65,6 +65,8 @@
 	import { dockShownKeys, dockOccupants, bottomInset, FLOW_FAMILY, armDockMode, DOCK_TITLES } from '$lib/bottomDock';
 	import { togglePanel } from '$lib/panelToggles';
 	import { requestPlay, willEnterXR, willEnterAR, xrSessionFailed, playAsItems } from '$lib/playMode';
+	// 60 Q1: Play here — a roster button (Customize), a row in Play's own menu, Ctrl+Shift+Enter
+	import { playHere, playHereItems, playingHere } from '$lib/playHere';
 	// 30 P2: Test play — the play button's right-click row beside the game chip's button
 	import { testPlay } from '$lib/gamePresence';
 	import { hudIsGame } from '$lib/hudDocs';
@@ -1035,6 +1037,8 @@
 			// 41b H7: the "Play as" rows live in $lib/playMode (`playAsItems`) — the phone bar's Play
 			// opens the same ones, so the two buttons write the same choice the same way
 			...playAsItems(),
+			// 60 Q1: Play here (the phone's Play menu carries the same row)
+			...playHereItems(),
 			// 30 P2: TEST PLAY — back to the menu, into Play, the Start screen. Offered only
 			// where it means something: a scene with no game shell has no menu to start from.
 			...($hudIsGame
@@ -1344,6 +1348,18 @@
 			tint: () => ICON_OFF,
 			run: () => redo()
 		},
+		// 60 Q1: PLAY HERE — an OPTIONAL roster button (Customize toolbar / the "+" list place it):
+		// Play with the player where the editor camera is, and the view comes back on Stop. Not on
+		// the default bar, so a profile that never asks for it is byte-identical; the same act is
+		// Play's right-click row and Ctrl+Shift+Enter.
+		playhere: {
+			title: 'Play here — start from this view (Ctrl+Shift+Enter)',
+			label: 'Play here',
+			slot: 'play-here-button',
+			icon: 'map-pin',
+			tint: () => ($playingHere ? ICON_ON : ICON_OFF),
+			run: () => playHere()
+		},
 		multiselect: {
 			get title() {
 				return $multiSelectMode
@@ -1366,7 +1382,9 @@
 	/** 42 I9: the bell and the peers trigger open their panels from the top-right corner, so they
 	 *  may only live in the top-right group (moved, removed, re-added there — never elsewhere) */
 	const HOME_ONLY: Record<string, Region> = { notifications: 'top', peers: 'top' };
-	const ROSTER_IDS = [...DEFAULT_ORDER, ...OPTIONAL_VIEWS, ...CORNER_LEFT, ...CORNER_RIGHT, ...TOP_DEFAULT, ...TOUCH_DEFAULT];
+	/** 60 Q1: optional tool buttons (listed in Customize unchecked, like the optional views) */
+	const OPTIONAL_TOOLS = ['playhere'];
+	const ROSTER_IDS = [...DEFAULT_ORDER, ...OPTIONAL_VIEWS, ...OPTIONAL_TOOLS, ...CORNER_LEFT, ...CORNER_RIGHT, ...TOP_DEFAULT, ...TOUCH_DEFAULT];
 	/** 42 I7: the name a MENU prints for a button (its short label, else its title) */
 	function labelOf(id: string) {
 		return id === SPACER ? 'Play' : (BUTTONS[id]?.label ?? BUTTONS[id]?.title ?? id);
diff --git a/src/components/menu/UnderlayWindow.svelte b/src/components/menu/UnderlayWindow.svelte
new file mode 100644
index 000000000..23cdad562
--- /dev/null
+++ b/src/components/menu/UnderlayWindow.svelte
@@ -0,0 +1,217 @@
+<script>
+	// 60 Q5: Tools ▸ Reference images… — the one place a reference image is changed (the planes
+	// themselves cannot be clicked: they are locked and unpickable). On the shared ToolboxWindow
+	// shell: a floating palette on desktop, a bottom sheet on a phone. Also hosts the image-DROP
+	// menu ("Use as reference"), which App's drop handler opens through `underlayDropMenu`.
+	import Icon from '../ui/Icon.svelte';
+	import ToolboxWindow from '../ui/ToolboxWindow.svelte';
+	import Slider from '../ui/Slider.svelte';
+	import ContextMenu from '../ContextMenu.svelte';
+	import {
+		underlays,
+		underlayWindowOpen,
+		underlayDropMenu,
+		addUnderlay,
+		updateUnderlay,
+		removeUnderlay,
+		setUnderlayShared,
+		isMine
+	} from '$lib/underlays';
+	import { underlayPoseFromView, GROUND_LIFT } from '$lib/underlayPose';
+	import { nameOf } from '$lib/lockControl';
+	import { isLocked, isVRMode } from '../../stores/sceneStore';
+	import { peers } from '../../stores/appStore';
+
+	const open = $derived($underlayWindowOpen && $isLocked !== true && !$isVRMode);
+	/** @type {any} */
+	const peerConn = $derived($peers);
+	const connected = $derived((peerConn?.openedPeers?.size ?? 0) > 0);
+	/** the placement a new image takes ("Add image…" in this window) */
+	let addMode = $state(/** @type {'ground' | 'view'} */ ('ground'));
+	/** @type {HTMLInputElement | null} */
+	let picker = $state(null);
+
+	/** @param {File[]} files @param {'ground' | 'view'} mode */
+	async function useAsReference(files, mode) {
+		for (const file of files) {
+			const pose = underlayPoseFromView(mode);
+			if (!pose) return;
+			await addUnderlay(file, pose);
+		}
+		underlayWindowOpen.set(true);
+	}
+
+	const dropItems = $derived(
+		$underlayDropMenu
+			? [
+					{ section: $underlayDropMenu.files.length > 1 ? `${$underlayDropMenu.files.length} images` : $underlayDropMenu.files[0]?.name ?? 'Image' },
+					{
+						label: 'Use as reference — on the ground',
+						icon: 'image-up',
+						tooltip: 'A see-through, unclickable image lying on the ground to build over (hidden in Play, never exported)',
+						action: () => useAsReference($underlayDropMenu?.files ?? [], 'ground')
+					},
+					{
+						label: 'Use as reference — facing the view',
+						tooltip: 'A see-through, unclickable image standing in front of you, square to this view',
+						action: () => useAsReference($underlayDropMenu?.files ?? [], 'view')
+					},
+					{
+						label: 'Add to the Explorer',
+						icon: 'folder-open',
+						tooltip: 'Keep the image in your library (drag it onto an object to texture it)',
+						action: () => {
+							const files = $underlayDropMenu?.files ?? [];
+							void import('$lib/explorer').then((m) => m.importFiles(files));
+						}
+					}
+				]
+			: []
+	);
+
+	/** @param {any} u @param {'ground' | 'view'} mode */
+	function setMode(u, mode) {
+		if (u.mode === mode) return;
+		const pose = underlayPoseFromView(mode);
+		if (pose) updateUnderlay(u.id, pose);
+	}
+	/** @param {any} u */
+	function faceView(u) {
+		const pose = underlayPoseFromView(u.mode);
+		if (pose) updateUnderlay(u.id, { position: pose.position, quaternion: pose.quaternion });
+	}
+	/** a ground image's height over the ground plane (cm precision is plenty) @param {any} u */
+	const lift = (u) => Math.round((u.position[1] - GROUND_LIFT) * 100) / 100;
+</script>
+
+{#if $underlayDropMenu}
+	<ContextMenu x={$underlayDropMenu.x} y={$underlayDropMenu.y} items={dropItems} sizeKey="underlayDrop" on:close={() => underlayDropMenu.set(null)} />
+{/if}
+
+{#if open}
+	<ToolboxWindow id="underlay-window" key="underlayWindow" title="Reference images" width={264} onclose={() => underlayWindowOpen.set(false)}>
+		{#snippet actions()}
+			<button id="underlay-close" class="tbx-hbtn" aria-label="Close" title="Close" onclick={() => underlayWindowOpen.set(false)}
+				><Icon name="x" size={16} aria-hidden="true" /></button
+			>
+		{/snippet}
+
+		<div class="tbx-row text-xs">
+			<button id="underlay-add" class="tbx-cmd" title="Pick an image to lay in the scene as a reference" onclick={() => picker?.click()}>Add image…</button>
+			<select id="underlay-add-mode" class="tbx-cmd" aria-label="Where a new image goes" bind:value={addMode}>
+				<option value="ground">On the ground</option>
+				<option value="view">Facing the view</option>
+			</select>
+			<input
+				bind:this={picker}
+				type="file"
+				accept="image/*"
+				multiple
+				hidden
+				onchange={(e) => {
+					const files = [...(e.currentTarget.files ?? [])];
+					e.currentTarget.value = '';
+					if (files.length) void useAsReference(files, addMode);
+				}}
+			/>
+		</div>
+
+		{#if !$underlays.length}
+			<div class="tbx-row text-xs text-text-muted" id="underlay-empty">Drop an image on the viewport, or Add image…, to trace over a plan, a sketch or a photo.</div>
+		{/if}
+
+		{#each $underlays as u (u.id)}
+			{@const mine = isMine(u.id)}
+			<div class="ul-item" data-underlay={u.id}>
+				<div class="tbx-row text-xs ul-head">
+					<img class="ul-thumb" src={u.src} alt="" />
+					<span class="ul-name" title={u.name}>{u.name}</span>
+					{#if mine}
+						<button class="tbx-hbtn" data-ul="visible" aria-pressed={u.visible} title={u.visible ? 'Hide' : 'Show'} aria-label={u.visible ? 'Hide' : 'Show'} onclick={() => updateUnderlay(u.id, { visible: !u.visible })}
+							><Icon name={u.visible ? 'eye' : 'eye-off'} size={16} aria-hidden="true" /></button
+						>
+						<button class="tbx-hbtn" data-ul="remove" title="Remove this reference image" aria-label="Remove" onclick={() => removeUnderlay(u.id)}
+							><Icon name="trash-2" size={16} aria-hidden="true" /></button
+						>
+					{/if}
+				</div>
+				{#if mine}
+					<div class="tbx-row text-xs">
+						<span class="text-text-muted">Opacity</span>
+						<Slider value={u.opacity} min={0.05} max={1} step={0.05} label="Opacity" width="120px" format={(v) => Math.round(v * 100) + '%'} data-ul="opacity" onchange={(v) => updateUnderlay(u.id, { opacity: v })} />
+					</div>
+					<div class="tbx-row text-xs">
+						<span class="text-text-muted">Size</span>
+						<Slider value={u.width} min={0.5} max={Math.max(200, u.width)} step={0.5} label="Width in metres" width="120px" format={(v) => v.toFixed(1) + ' m'} data-ul="width" onchange={(v) => updateUnderlay(u.id, { width: v })} />
+					</div>
+					{#if u.mode === 'ground'}
+						<div class="tbx-row text-xs">
+							<span class="text-text-muted">Height</span>
+							<Slider
+								value={lift(u)}
+								min={-5}
+								max={20}
+								step={0.05}
+								label="Height over the ground"
+								width="120px"
+								format={(v) => v.toFixed(2) + ' m'}
+								data-ul="lift"
+								onchange={(v) => updateUnderlay(u.id, { position: [u.position[0], v + GROUND_LIFT, u.position[2]] })}
+							/>
+						</div>
+					{/if}
+					<div class="tbx-row text-xs">
+						<select class="tbx-cmd" data-ul="mode" aria-label="Placement" value={u.mode} onchange={(e) => setMode(u, /** @type {any} */ (e.currentTarget.value))}>
+							<option value="ground">On the ground</option>
+							<option value="view">Facing the view</option>
+						</select>
+						<button class="tbx-cmd" data-ul="here" title={u.mode === 'view' ? 'Stand it in front of the current view again' : 'Move it under the point you are looking at, turned to this view'} onclick={() => faceView(u)}
+							>{u.mode === 'view' ? 'Face the view' : 'Move here'}</button
+						>
+					</div>
+					<div class="tbx-row text-xs">
+						<label class="flex items-center gap-1" title={connected ? 'Everyone in your room sees it (read-only); off takes it back' : 'Shared with whoever is in your room once you connect'}>
+							<input class="tbx-check" type="checkbox" data-ul="share" checked={u.shared} onchange={(e) => setUnderlayShared(u.id, e.currentTarget.checked)} />
+							Share with session
+						</label>
+					</div>
+				{:else}
+					<div class="tbx-row text-xs text-text-muted" data-ul="from">Shared by {nameOf(u.owner ?? '') || 'a peer'} · read-only</div>
+				{/if}
+			</div>
+		{/each}
+
+		{#snippet status()}
+			<span id="underlay-status">Locked · hidden in Play · never exported{connected ? '' : ' · on this device'}</span>
+		{/snippet}
+	</ToolboxWindow>
+{/if}
+
+<style>
+	/* one image's block: a full-width cell of the toolbox body's button grid (the .tbx-row rule) —
+	   without it the block took one 36px cell and every slider in it measured 0px */
+	.ul-item {
+		grid-column: 1 / -1;
+		min-width: 0;
+		border-top: 1px solid var(--border);
+		padding-top: 4px;
+	}
+	.ul-head {
+		gap: 6px;
+		align-items: center;
+	}
+	.ul-thumb {
+		width: 28px;
+		height: 28px;
+		object-fit: cover;
+		border-radius: 3px;
+		flex: none;
+	}
+	.ul-name {
+		flex: 1;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+</style>
diff --git a/src/components/menu/ViewportMenu.svelte b/src/components/menu/ViewportMenu.svelte
index e01417209..f50d77512 100644
--- a/src/components/menu/ViewportMenu.svelte
+++ b/src/components/menu/ViewportMenu.svelte
@@ -24,6 +24,8 @@
 	import { bindingOf } from '$lib/shortcuts';
 	import { safeStorage } from '$lib/safeStorage';
 	import { openRecording } from '$lib/recording/recordingStores.js';
+	import { underlayWindowOpen, underlays } from '$lib/underlays'; // 60 Q5
+	import { playHere } from '$lib/playHere'; // 60 Q1
 
 	// Scene.svelte routes right-TAPS here (77): empty viewport → this menu with
 	// the clicked ground point; an object under the cursor → its own context
@@ -188,6 +190,21 @@
 					tooltip: 'Record a turntable or a flythrough of the viewport (webm)',
 					action: () => openRecording()
 				},
+				{
+					// 60 Q5: trace over a plan, a sketch or a photo (locked, hidden in Play, never exported)
+					label: 'Reference images…' + ($underlays.length ? ` (${$underlays.length})` : ''),
+					icon: 'image-up',
+					tooltip: 'Lay an image in the scene to build over — see-through, unclickable, hidden in Play, never exported',
+					action: () => underlayWindowOpen.set(true)
+				},
+				{
+					// 60 Q1: Play, standing where you are looking from (Ctrl+Shift+Enter)
+					label: 'Play here',
+					icon: 'map-pin',
+					hint: 'Ctrl+Shift+Enter',
+					tooltip: 'Start Play from this view — leaving Play brings the view back',
+					action: () => playHere()
+				},
 				{
 					label: $measureMode ? 'Stop measuring' : 'Measure distance',
 					checked: $measureMode,
diff --git a/src/components/phone/PhoneShell.svelte b/src/components/phone/PhoneShell.svelte
index 8d945ce5f..5fc5bbc08 100644
--- a/src/components/phone/PhoneShell.svelte
+++ b/src/components/phone/PhoneShell.svelte
@@ -86,6 +86,7 @@
 	import { phoneBarTap, openPhoneTab, closePhoneTab, phoneDockShown, phoneTabsOpen } from '$lib/phoneDock';
 	import { toggleViewportFocus } from '$lib/focusMode';
 	import { requestPlay, willEnterXR, willEnterAR, playAsItems } from '$lib/playMode';
+	import { playHere, playHereItems } from '$lib/playHere'; // 60 Q1
 	import { visibleDockKey, DOCK_TITLES, dockMinimized, dockHeight } from '$lib/bottomDock';
 	import { micActive, pttActive, toggleMic } from '$lib/voiceChat';
 	import { aiReady } from '$lib/ai/providers';
@@ -441,6 +442,7 @@
 		const at = list.indexOf('play');
 		return [
 			...playAsItems(),
+			...playHereItems(), // 60 Q1
 			...($hudIsGame
 				? [
 						{ section: 'Game' },
@@ -496,6 +498,8 @@
 	 * @type {Record<string, {label: string, short?: string, hint?: string, icon: string, run: () => void, pressed?: () => boolean, disabled?: () => boolean, badge?: () => number, dot?: () => string}>} */
 	const ACTIONS = {
 		play: { label: 'Play', icon: 'play', run: fromMore(() => requestPlay()) },
+		// 60 Q1: Play from where the camera is (More ▸ Tools & View; placeable on the bar)
+		playhere: { label: 'Play here', short: 'Here', hint: 'Play here — start from this view', icon: 'map-pin', run: fromMore(() => playHere()) },
 		add: { label: 'Add', icon: 'plus', run: () => add() },
 		// 41b H1/H5: Objects, Configure Scene and Notes are dock tabs — the bar shows / minimizes them
 		objects: { label: 'Objects', icon: 'list', run: fromMore(() => phoneBarTap('objects')), pressed: () => $visibleDockKey === 'objects' && !$dockMinimized },
diff --git a/src/components/ui/Icon.svelte b/src/components/ui/Icon.svelte
index 9f039dc0b..adafb5fcf 100644
--- a/src/components/ui/Icon.svelte
+++ b/src/components/ui/Icon.svelte
@@ -270,7 +270,10 @@
 		X,
 		Zap,
 		ZoomIn,
-		ZoomOut
+		ZoomOut,
+		// 60 Q1 + Q5: Play here, reference image
+		MapPin,
+		ImageUp
 	} from '@lucide/svelte';
 	import ToolIcon from './ToolIcon.svelte';
 	import { iconSize, ICON_STROKE } from '$lib/ui/icons.js';
@@ -393,6 +396,8 @@
 		'lock-open': LockOpen,
 		magnet: Magnet,
 		map: MapIcon,
+		'map-pin': MapPin,
+		'image-up': ImageUp,
 		'maximize-2': Maximize2,
 		'minimize-2': Minimize2,
 		menu: Menu,
diff --git a/src/lib/cloudHooks.js b/src/lib/cloudHooks.js
index 5b09cd835..c97900884 100644
--- a/src/lib/cloudHooks.js
+++ b/src/lib/cloudHooks.js
@@ -67,7 +67,9 @@ const ALWAYS_ALLOWED = new Set([
 	'getshadergraphs',
 	'getanim',
 	'getscenepost',
-	'getroomanchor'
+	'getroomanchor',
+	// 60 Q5: the shared reference images REQUEST (the `underlay` replies stay gateable)
+	'getunderlays'
 ]);
 
 /** @type {((peerId: string, msgType: string) => boolean) | null} */
diff --git a/src/lib/cloudPlugin.js b/src/lib/cloudPlugin.js
index 4b197f955..e995e99d3 100644
--- a/src/lib/cloudPlugin.js
+++ b/src/lib/cloudPlugin.js
@@ -1,4 +1,5 @@
 import { get } from 'svelte/store';
+import { HELPER_LAYER } from './helperLayer'; // 60 Q5
 import { showToast, appNotice, peers, cloudIdentity, userdata } from '../stores/appStore';
 import { globalScene, globalCamera, globalRenderer, orbitControls, cameraClaim, isLocked, isVRMode } from '../stores/sceneStore';
 import { requestConnect } from './peerApproval';
@@ -309,7 +310,10 @@ export function makeCloudApi() {
 			const scene = get(globalScene);
 			const cam = get(globalCamera);
 			if (!r || !scene || !cam || r.xr?.isPresenting) return null;
+			// 60 Q5: no editor scaffolding (light helpers, reference images) in a room/publish picture
+			const mask = /** @type {any} */ (cam).layers?.mask;
 			try {
+				/** @type {any} */ (cam).layers?.disable(HELPER_LAYER);
 				r.render(scene, cam);
 				const src = r.domElement;
 				const sw = src.width || maxW;
@@ -326,6 +330,8 @@ export function makeCloudApi() {
 			} catch (e) {
 				console.warn('thumbnail capture failed', e);
 				return null;
+			} finally {
+				if (/** @type {any} */ (cam).layers && mask != null) /** @type {any} */ (cam).layers.mask = mask;
 			}
 		},
 
diff --git a/src/lib/debugHooks.js b/src/lib/debugHooks.js
index 46aa9ba1b..32c7dfb4f 100644
--- a/src/lib/debugHooks.js
+++ b/src/lib/debugHooks.js
@@ -371,6 +371,11 @@ export const DEBUG_HOOKS = [
 	['touchActions', () => import('./touchActions')],
 	['touchSpec', () => import('./touchSpec')],
 	['playMode', () => import('./playMode')],
+	// 60 Q1: Play here
+	['playHere', () => import('./playHere')],
+	// 60 Q5: reference image underlays
+	['underlays', () => import('./underlays')],
+	['underlayPose', () => import('./underlayPose')],
 	// 36-export: the export builder, its stores, the export boot + runtime state
 	['exportBuilder', () => import('./export/exportBuilder.js')],
 	['exportStores', () => import('./export/exportStores.js')],
diff --git a/src/lib/peerHandler.svelte.js b/src/lib/peerHandler.svelte.js
index 4e194783f..0f00f12b9 100644
--- a/src/lib/peerHandler.svelte.js
+++ b/src/lib/peerHandler.svelte.js
@@ -93,6 +93,8 @@ import {
 	sendHudValues
 } from '$lib/hudSync';
 import { applyRemoteGameState, sendGameState, gameStatePayload } from '$lib/gameSync';
+// 60 Q5: shared reference images (a leaf: stores + idb)
+import { applyRemoteUnderlay, applyRemoteUnderlayDelete, sendUnderlays, dropPeerUnderlays } from '$lib/underlays';
 // 48 S2: sequences (Timeline) — scene data, latest-wins per sequence (sequenceSync.js)
 import { applyRemoteSequence, applyRemoteSequenceDelete, applyRemoteSequences, sendSequences } from '$lib/sequenceSync';
 // 34 R2 (T3): the game kit's document + requests (kit/runtime.js; a leaf-side module)
@@ -1049,6 +1051,13 @@ export class PeerConnection {
 					applyRemoteGameState(data);
 				} else if(data.type == 'getgame') {
 					if (sameRoomOrUnknown(conn.peer)) sendGameState(data.sender);
+				} else if(data.type == 'underlay') {
+					// 60 Q5: a peer's shared reference image (owner = this conn, never a field)
+					applyRemoteUnderlay(data, conn.peer);
+				} else if(data.type == 'underlaydelete') {
+					applyRemoteUnderlayDelete(data, conn.peer);
+				} else if(data.type == 'getunderlays') {
+					if (sameRoomOrUnknown(conn.peer)) sendUnderlays(conn.peer);
 				} else if(data.type == 'kit' || data.type == 'kitreq') {
 					// 34 R2: the kit document (authority-written, latest-wins) and a request
 					// to the authority; the shapes were checked by wireValidate
@@ -1485,6 +1494,7 @@ export class PeerConnection {
 		conn.send({type: 'gethuds', sender: this.peer.id})
 		conn.send({type: 'gethudvalues', sender: this.peer.id})
 		conn.send({type: 'getseqs', sender: this.peer.id}) // 48 S2
+		conn.send({type: 'getunderlays', sender: this.peer.id}) // 60 Q5
 	}
 
 	// Send the initial handshake (locks, known hosts, whitelist, object/node sync requests).
@@ -1872,6 +1882,7 @@ export class PeerConnection {
 		dropPeerEnvPresets(peerId);
 		dropPeerMaterialPresets(peerId);
 		dropPeerHandModel(peerId);
+		dropPeerUnderlays(peerId); // 60 Q5
 		if (relay) this.broadcast({ type: 'disconnected', peerId });
 		checkLocks();
 		peers.update((value) => value);
@@ -1889,6 +1900,7 @@ export class PeerConnection {
 		// reconnect redials our still-registered peer id and every attempt lands
 		// here as a fresh approval request
 		this.broadcast({ type: 'disconnected', peerId: this.peer.id });
+		dropPeerUnderlays(null); // 60 Q5: every peer's shared reference images go with the session
 		this.reconnecting.clear(); // pending retry timers see a cleared map and no-op
 		this.gracefulLeft.clear();
 		this.wantsStateFrom.clear();
diff --git a/src/lib/peerScenes.js b/src/lib/peerScenes.js
index 84c947f1b..fabe620c4 100644
--- a/src/lib/peerScenes.js
+++ b/src/lib/peerScenes.js
@@ -645,6 +645,9 @@ ROOM_SCOPED.add('bhv');
 // 37 R1: a multi-object edit's ONE envelope (wireBatch.js) — its items are all room content,
 // and each one is gated again on arrival
 ROOM_SCOPED.add('batch');
+// 60 Q5: a shared reference image belongs to the scene it was laid in (its request rides the floor)
+ROOM_SCOPED.add('underlay');
+ROOM_SCOPED.add('underlaydelete');
 
 /**
  * THE ONE PREDICATE, used on both sides of the wire: `broadcast` will not SEND a
diff --git a/src/lib/playHere.js b/src/lib/playHere.js
new file mode 100644
index 000000000..f39e65eba
--- /dev/null
+++ b/src/lib/playHere.js
@@ -0,0 +1,189 @@
+// 60 Q1: PLAY HERE — Play, with the player standing where the editor camera is looking from.
+// Roblox Studio's "Play Here" / Godot's PlayAtCamPos: test the corner you are building without
+// walking there from the spawn, and come back to exactly the view you left.
+//
+// The whole act is four things around the ordinary play press:
+//   1. remember the editor camera (pose + orbit target) and the selection;
+//   2. resolve a spawn from the camera (playSpawn.playHereSpawnFrom — pure, unit-tested): the
+//      feet on the first solid surface straight under the eye, facing the view's heading; nothing
+//      under it → the scene's spawn; no spawn either → the eye stays where the camera is;
+//   3. hand that spawn to playSpawn as a session-only OVERRIDE — `currentSpawn()` is the one read
+//      every spawn path shares (PointerLockControls, the VR walker, api.respawnPlayer, the game
+//      shell), so a character controller, a game's restart and a fall out of the world all
+//      respawn HERE for this round, with no second code path;
+//   4. `requestPlay()` — the same press as the FAB, so VR/AR vs desktop is still decided once.
+// Leaving Play (any exit: Esc, the touch ✕, Back, a HUD quit) clears the override and puts the
+// camera and the selection back.
+//
+// A near-LEAF on purpose (three, stores, playSpawn, playMode, bvhPicking, scenePhysics): it is
+// imported from shortcuts.js, which sits in history.js's import subtree. The selection restore
+// reaches objectActions by DYNAMIC import for that reason.
+import * as THREE from 'three';
+import { get, writable } from 'svelte/store';
+import { editorCam, orbitControls, isLocked, isVRMode, objectsGroup, selectedObjects, selectedObject } from '../stores/sceneStore';
+import { requestPlay } from './playMode';
+import { desktopSpawn, setPlayHereSpawn, playHereSpawn, SPAWN_EYE } from './playSpawn';
+import { playHereSpawnFrom, headingOf, surfaceBelowIn } from './playHereCore';
+import { ensureBoundsTrees } from './bvhPicking';
+import { scenePhysicsGround } from './scenePhysics';
+
+/** true from a Play here press until that Play ends (the toolbar cell's tint, the suites' view) */
+export const playingHere = writable(false);
+
+/** @type {{position: number[], quaternion: number[], target: number[] | null, selection: string[]} | null} */
+let saved = null;
+/** the last resolution, for the suites and the debug hook */
+/** @type {{position: number[], yaw: number, source: string} | null} */
+let lastSpawn = null;
+
+/**
+ * The y of the first SOLID surface straight under `eye` — the scene's meshes (on the shared pick's
+ * BVH bounds trees) and the physics ground plane when it is on. Hidden objects, sensors, water and
+ * reference images do not count (playHereCore.notGround). null = nothing below.
+ * @param {number[]} eye
+ * @returns {number | null}
+ */
+export function surfaceBelow(eye) {
+	/** @type {any} */
+	const group = get(objectsGroup);
+	if (group?.children?.length) ensureBoundsTrees(group);
+	return surfaceBelowIn(group, eye, get(scenePhysicsGround));
+}
+
+/** the editor camera as a Play here view: eye + heading @returns {{eye: number[], yaw: number} | null} */
+export function editorView() {
+	/** @type {any} */
+	const cam = get(editorCam);
+	if (!cam?.isObject3D) return null;
+	cam.updateMatrixWorld(true);
+	const eye = cam.getWorldPosition(new THREE.Vector3());
+	const q = cam.getWorldQuaternion(new THREE.Quaternion());
+	return { eye: eye.toArray(), yaw: headingOf(q) };
+}
+
+/** resolve (without playing) where Play here would put the player — the suites' and the button's view */
+export function resolvePlayHere() {
+	const view = editorView();
+	if (!view) return null;
+	return playHereSpawnFrom(view, surfaceBelow, desktopSpawn(), SPAWN_EYE);
+}
+
+function snapshotEditor() {
+	/** @type {any} */
+	const cam = get(editorCam);
+	/** @type {any} */
+	const controls = get(orbitControls);
+	const set = get(selectedObjects);
+	/** @type {any} */
+	const primary = get(selectedObject);
+	return {
+		position: cam.position.toArray(),
+		quaternion: cam.quaternion.toArray(),
+		target: controls?.target ? controls.target.toArray() : null,
+		selection: set.length ? set.map((/** @type {any} */ o) => o?.uuid ?? o).filter(Boolean) : primary?.uuid ? [primary.uuid] : []
+	};
+}
+
+/**
+ * THE PRESS. Synchronous all the way to `requestPlay` (an XR session is only granted inside the
+ * gesture that asked for it). @returns {boolean} whether Play was asked for
+ */
+export function playHere() {
+	if (get(isLocked) === true || get(isVRMode)) return false;
+	/** @type {any} */
+	const cam = get(editorCam);
+	if (!cam?.isObject3D) return false;
+	const spawn = resolvePlayHere();
+	if (!spawn) return false;
+	saved = snapshotEditor();
+	lastSpawn = spawn;
+	setPlayHereSpawn(spawn);
+	playingHere.set(true);
+	requestPlay();
+	// a press that could not start Play (already in a transient exit, a refused session) must not
+	// leave the override standing for the NEXT ordinary Play: the queued replay sets isLocked
+	// within a macrotask, the XR path within its watchdog — both clear through the exit below
+	return true;
+}
+
+/** put the editor camera and the selection back the way Play here found them */
+function restoreEditor() {
+	const was = saved;
+	saved = null;
+	if (!was) return;
+	/** @type {any} */
+	const cam = get(editorCam);
+	if (cam?.isObject3D) {
+		cam.position.fromArray(was.position);
+		cam.quaternion.fromArray(was.quaternion);
+		cam.updateMatrixWorld(true);
+	}
+	/** @type {any} */
+	const controls = get(orbitControls);
+	if (controls?.target && was.target) {
+		controls.target.fromArray(was.target);
+		// damping would otherwise ease the view from wherever it drifted
+		controls.update?.();
+		if (cam?.isObject3D) {
+			cam.position.fromArray(was.position);
+			cam.quaternion.fromArray(was.quaternion);
+		}
+	}
+	if (was.selection.length) {
+		void import('./objectActions')
+			.then((m) => {
+				/** @type {any} */
+				const group = get(objectsGroup);
+				const live = was.selection.filter((uuid) => !!group?.getObjectByProperty?.('uuid', uuid));
+				const now = get(selectedObjects).map((/** @type {any} */ o) => o?.uuid ?? o);
+				if (!live.length || (live.length === now.length && live.every((uuid) => now.includes(uuid)))) return;
+				m.applySelectionSet(live);
+			})
+			.catch(() => {
+				/* a selection that cannot come back is not worth an error */
+			});
+	}
+}
+
+/** the end of a Play here round: whatever ended it */
+export function endPlayHere() {
+	if (!get(playingHere) && !playHereSpawn()) return;
+	setPlayHereSpawn(null);
+	playingHere.set(false);
+	restoreEditor();
+}
+
+/** the row Play's own menus carry (the desktop FAB's right-click, the phone bar's long press) */
+export function playHereItems() {
+	return [
+		{ section: 'Start' },
+		{
+			label: 'Play here',
+			tooltip: 'Start Play where the camera is, facing the view — leaving Play brings this view back (Ctrl+Shift+Enter)',
+			action: () => void playHere()
+		}
+	];
+}
+
+/** test/debug view */
+export function playHereDebug() {
+	return { playing: get(playingHere), override: playHereSpawn(), last: lastSpawn, saved };
+}
+
+// The exit, on the state and not on any one button (the playMode W4 rule): `isLocked` leaving
+// `true` after a Play here press ends the round. A press that never reached Play (refused XR, no
+// lock) is cleared when the watchdog / transient settles back to the editor.
+if (typeof window !== 'undefined') {
+	let wasPlaying = get(isLocked) === true;
+	isLocked.subscribe((v) => {
+		const playing = v === true;
+		if (wasPlaying && !playing) endPlayHere();
+		wasPlaying = playing;
+	});
+	// a Play here that turned into an XR session ends with the session (isVRMode back to false)
+	let wasVR = get(isVRMode);
+	isVRMode.subscribe((v) => {
+		if (wasVR && !v && get(isLocked) !== true) endPlayHere();
+		wasVR = !!v;
+	});
+}
diff --git a/src/lib/playHereCore.js b/src/lib/playHereCore.js
new file mode 100644
index 000000000..8739ae542
--- /dev/null
+++ b/src/lib/playHereCore.js
@@ -0,0 +1,68 @@
+// 60 Q1: THE PLAY HERE RULE — three only, no stores, so the unit layer runs it (playHere.js is the
+// store-reading half; playSpawn re-exports the two pure functions).
+import * as THREE from 'three';
+
+/**
+ * Where Play here puts the player: the feet on the first solid surface straight under the eye,
+ * facing the view's heading; nothing under it → the scene's own spawn (with its own facing); no
+ * spawn either → the eye stays exactly where the camera is (feet = eye − eyeHeight), which is where
+ * a flying player would start anyway.
+ * @param {{eye: number[], yaw: number}} view the editor camera: eye + heading (rotation.y, 0 faces −Z)
+ * @param {(eye: number[]) => number | null} surfaceBelow y of the first solid surface under `eye`, or null
+ * @param {{position: number[], yaw: number} | null} fallback the scene's spawn
+ * @param {number} eyeHeight how far above the feet the eye stands (SPAWN_EYE on a screen, the head height in VR)
+ * @returns {{position: [number, number, number], yaw: number, source: 'surface' | 'spawn' | 'camera'}}
+ */
+export function playHereSpawnFrom(view, surfaceBelow, fallback, eyeHeight) {
+	const [x, y, z] = view.eye;
+	const yaw = Number.isFinite(view.yaw) ? view.yaw : 0;
+	const floor = surfaceBelow(view.eye);
+	if (floor != null && Number.isFinite(floor) && floor <= y) return { position: [x, floor, z], yaw, source: 'surface' };
+	if (fallback) {
+		const [fx, fy, fz] = fallback.position;
+		return { position: [fx, fy, fz], yaw: Number.isFinite(fallback.yaw) ? fallback.yaw : 0, source: 'spawn' };
+	}
+	return { position: [x, y - eyeHeight, z], yaw, source: 'camera' };
+}
+
+/** the heading of an orientation — rotation.y in YXZ order, which stays right when the view looks
+ * straight down (a forward vector has no horizontal part there) @param {any} quaternion */
+export function headingOf(quaternion) {
+	return new THREE.Euler().setFromQuaternion(quaternion, 'YXZ').y;
+}
+
+/** something a player cannot stand on: hidden (itself or an ancestor), a sensor, water, a reference image
+ * @param {any} object @param {any} [root] where the walk stops */
+export function notGround(object, root = null) {
+	for (let node = object; node && node !== root; node = node.parent) {
+		if (node.visible === false) return true;
+		const data = node.userData ?? {};
+		if (data.water || data.physics?.sensor || data.underlay) return true;
+	}
+	return false;
+}
+
+/**
+ * The y of the first SOLID surface straight under `eye`: the meshes under `root` and the physics
+ * ground plane when it is on and below the eye. null = nothing below.
+ * @param {any} root the scene objects group (or null)
+ * @param {number[]} eye
+ * @param {{enabled?: boolean, height?: number} | null} [ground]
+ * @returns {number | null}
+ */
+export function surfaceBelowIn(root, eye, ground = null) {
+	let best = /** @type {number | null} */ (null);
+	if (root?.children?.length) {
+		root.updateMatrixWorld(true);
+		const ray = new THREE.Raycaster(new THREE.Vector3(eye[0], eye[1], eye[2]), new THREE.Vector3(0, -1, 0));
+		for (const hit of ray.intersectObjects(root.children, true)) {
+			const object = /** @type {any} */ (hit.object);
+			if (!object?.isMesh || notGround(object, root)) continue;
+			best = hit.point.y;
+			break;
+		}
+	}
+	const h = Number(ground?.height);
+	if (ground?.enabled && Number.isFinite(h) && h <= eye[1] && (best == null || h > best)) best = h;
+	return best;
+}
diff --git a/src/lib/playSpawn.js b/src/lib/playSpawn.js
index f62636359..40a8f2f16 100644
--- a/src/lib/playSpawn.js
+++ b/src/lib/playSpawn.js
@@ -11,13 +11,33 @@ import { get } from 'svelte/store';
 import { playerCam } from '../stores/sceneStore';
 import { resolvePlaySettings } from './playSettings';
 import { globalScene } from '../stores/sceneStore';
+// 60 Q1: the Play here rule (pure, three only) lives in its own leaf so the unit layer can run it
+export { playHereSpawnFrom, headingOf } from './playHereCore';
 
 /** the play camera's eye above the feet: the walker's 1.7 m person */
 export const SPAWN_EYE = 1.7;
 
+// 60 Q1: PLAY HERE — a session-only spawn that beats every authored one while it is set. It is
+// written by playHere (desktop/phone) and the VR radial's Play here, and cleared when that Play
+// ends, so `currentSpawn()` stays the ONE read every spawn path shares (PointerLockControls, the
+// VR spawnPlayer, a module's api.respawnPlayer, the game shell's restart). LOCAL: it never
+// replicates, saves or undoes — "where I pressed Play here" is a fact about this peer.
+/** @type {{position: [number, number, number], yaw: number} | null} */
+let playHereOverride = null;
+
+/** @param {{position: [number, number, number], yaw: number} | null} spawn */
+export function setPlayHereSpawn(spawn) {
+	playHereOverride = spawn ? { position: [spawn.position[0], spawn.position[1], spawn.position[2]], yaw: spawn.yaw } : null;
+}
+
+/** the Play here spawn while one is in force (test/debug view too) */
+export function playHereSpawn() {
+	return playHereOverride;
+}
+
 /** the spawn in force right now, or null @returns {{position: [number, number, number], yaw: number} | null} */
 export function currentSpawn() {
-	return resolvePlaySettings(get(globalScene)).spawn;
+	return playHereOverride ?? resolvePlaySettings(get(globalScene)).spawn;
 }
 
 /** the spawn a DESKTOP view honours — the one in force unless it is VR-only (30b core-games)
diff --git a/src/lib/sessions.js b/src/lib/sessions.js
index 61c4a6dd3..9271ac4df 100644
--- a/src/lib/sessions.js
+++ b/src/lib/sessions.js
@@ -1,4 +1,5 @@
 import * as THREE from 'three';
+import { HELPER_LAYER } from './helperLayer'; // 60 Q5: thumbnails leave the helper layer out
 import './threeFixes.js'; // 36-fb-water F14: transmissive materials survive a JSON trip (the export runtime loads scenes here too)
 import { writable, get } from 'svelte/store';
 import { objectsGroup, globalCamera, globalScene, globalRenderer, orbitControls, TControls, pokeScene, beginSceneBatch, endSceneBatch } from '../stores/sceneStore';
@@ -137,7 +138,11 @@ export function viewportThumbnail(maxW = 256) {
 	const scene = get(globalScene);
 	const camera = get(globalCamera);
 	if (!renderer || !scene || !camera || renderer.xr?.isPresenting) return null;
+	// 60 Q5: the picture is the scene, not the editor's scaffolding — the helper layer (light
+	// helpers, reference images) is off for this one render (gallerySubmit's rule)
+	const mask = camera.layers?.mask;
 	try {
+		camera.layers?.disable(HELPER_LAYER);
 		renderer.render(scene, camera);
 		const source = renderer.domElement;
 		const sw = source.width || maxW;
@@ -154,6 +159,8 @@ export function viewportThumbnail(maxW = 256) {
 	} catch (error) {
 		console.log('viewport thumbnail failed', error);
 		return null;
+	} finally {
+		if (camera.layers && mask != null) camera.layers.mask = mask;
 	}
 }
 
diff --git a/src/lib/shortcuts.js b/src/lib/shortcuts.js
index b399cf7d6..d4df4e1d2 100644
--- a/src/lib/shortcuts.js
+++ b/src/lib/shortcuts.js
@@ -47,6 +47,7 @@ import { toggleSidebar } from './sidebars'; // 44 M7 (a leaf: app stores + safeS
 // shortcuts sits inside history's import family and a cycle there TDZ-crashes the
 // SSR prerender.
 import { requestPlay } from './playMode';
+import { playHere } from './playHere'; // 60 Q1
 import { selectedObject, selectedObjects } from '../stores/sceneStore';
 import { safeStorage } from './safeStorage';
 // 53 A3: does a key press belong to the 3D view (a zero-import leaf)
@@ -695,6 +696,18 @@ export const shortcuts = [
 		label: 'Play / Enter VR·AR (right-click the play button for modes)',
 		action: () => requestPlay()
 	},
+	{
+		// 60 Q1: PLAY HERE — the play key with Shift: the player starts where the editor camera
+		// is (feet on the surface under it, facing the view), and leaving Play brings the view
+		// and the selection back. playHere is a near-leaf (playSpawn/playMode/bvhPicking), so
+		// the static edge is cycle-safe from here.
+		id: 'scene.playHere',
+		keys: 'Ctrl+Shift+Enter',
+		group: 'Scene',
+		scope: 'global',
+		label: 'Play here — start from the editor camera',
+		action: () => playHere()
+	},
 	{
 		// 19-B P4: the element-snap master switch. Deliberately NOT the grid switch
 		// — the grid keeps `snapEnabled` (VR's applySnapMode owns that one).
diff --git a/src/lib/ui/phoneBar.js b/src/lib/ui/phoneBar.js
index 43ba1a7a1..b5b3e262d 100644
--- a/src/lib/ui/phoneBar.js
+++ b/src/lib/ui/phoneBar.js
@@ -26,7 +26,7 @@ export const WINDOW_ITEMS = ['play', 'add', 'more', 'objects', 'stats', 'chat',
 export const EDIT_ITEMS = ['inspect', 'move', 'rotate', 'scale', 'undo', 'redo', 'multiselect', 'interact'];
 /** More ▸ Tools & View (46 B1: + the scene budget — the toolbar chip's phone form; a folded bar has no
  * room for it by default, so it waits here and can be dragged onto the bar like any item) */
-export const VIEW_ITEMS = ['tools', 'focus', 'budget'];
+export const VIEW_ITEMS = ['tools', 'focus', 'budget', 'playhere']; // 60 Q1: + Play here
 
 /** every key the bar may hold */
 export const BAR_CATALOG = [...WINDOW_ITEMS, ...EDIT_ITEMS, ...VIEW_ITEMS];
diff --git a/src/lib/underlayPose.js b/src/lib/underlayPose.js
new file mode 100644
index 000000000..5199b0a5a
--- /dev/null
+++ b/src/lib/underlayPose.js
@@ -0,0 +1,45 @@
+// 60 Q5: where a new reference image goes, from the editor view — the one piece of underlay code
+// that needs THREE and the camera (underlays.js stays a store/wire leaf).
+//  · 'ground': lying flat on the physics ground plane under the point the view orbits around, its
+//    top edge pointing away from you, about as wide as that point is far (it fills the view);
+//  · 'view': standing at the orbit point, facing the camera square-on (the camera's own
+//    orientation), 80 % of the view's width there — Blender's "Reference" image.
+// Both are FIXED in the world once placed; "Face the view" re-poses a 'view' one.
+import * as THREE from 'three';
+import { get } from 'svelte/store';
+import { editorCam, orbitControls } from '../stores/sceneStore';
+import { scenePhysicsGround } from './scenePhysics';
+import { headingOf } from './playHereCore';
+
+/** a ground underlay floats this far over the ground plane (no z-fight with the grid or a floor) */
+export const GROUND_LIFT = 0.004;
+
+/**
+ * @param {'ground' | 'view'} mode
+ * @returns {{mode: 'ground' | 'view', position: number[], quaternion: number[], width: number} | null}
+ */
+export function underlayPoseFromView(mode) {
+	/** @type {any} */
+	const cam = get(editorCam);
+	if (!cam?.isObject3D) return null;
+	/** @type {any} */
+	const controls = get(orbitControls);
+	cam.updateMatrixWorld(true);
+	const eye = cam.getWorldPosition(new THREE.Vector3());
+	const q = cam.getWorldQuaternion(new THREE.Quaternion());
+	const forward = new THREE.Vector3(0, 0, -1).applyQuaternion(q);
+	const target = controls?.target ? controls.target.clone() : eye.clone().addScaledVector(forward, 10);
+	const distance = THREE.MathUtils.clamp(eye.distanceTo(target), 1, 500);
+	if (mode === 'view') {
+		const position = eye.clone().addScaledVector(forward, distance);
+		const fov = THREE.MathUtils.degToRad(Number(cam.fov) || 40);
+		const aspect = Number(cam.aspect) || 1.6;
+		const width = 2 * distance * Math.tan(fov / 2) * Math.min(aspect, 2) * 0.8;
+		return { mode, position: position.toArray(), quaternion: q.toArray(), width: THREE.MathUtils.clamp(width, 0.1, 1000) };
+	}
+	const ground = get(scenePhysicsGround);
+	const y = (ground?.enabled && Number.isFinite(ground.height) ? ground.height : 0) + GROUND_LIFT;
+	// flat (−90° about X), its "up" turned to the view's heading
+	const flat = new THREE.Quaternion().setFromEuler(new THREE.Euler(-Math.PI / 2, headingOf(q), 0, 'YXZ'));
+	return { mode: 'ground', position: [target.x, y, target.z], quaternion: flat.toArray(), width: THREE.MathUtils.clamp(distance, 1, 1000) };
+}
diff --git a/src/lib/underlays.js b/src/lib/underlays.js
new file mode 100644
index 000000000..9b8a5e50e
--- /dev/null
+++ b/src/lib/underlays.js
@@ -0,0 +1,318 @@
+// 60 Q5: REFERENCE IMAGE UNDERLAYS — a floor plan, a concept sketch or a photo laid in the scene to
+// build over: a locked, unpickable, see-through plane, lying on the ground or standing facing the
+// view, with its own opacity. It is a WORKING AID, not scene content, and every rule below follows
+// from that:
+//  · it is drawn under the world rig but OUTSIDE `sceneObjects` (UnderlayLayer.svelte), so the
+//    shared pick (sceneHits), the transform gizmo, the object list, the GLTF/.tpscene/publish
+//    exports, autosave and the object sync never see it — excluded BY CONSTRUCTION, not by a filter
+//    someone has to remember;
+//  · hidden in Play (desktop/phone Play, and Interact in a headset) — a game never shows it;
+//  · LOCAL by default (the roadmap's fork F2): yours, on this device, kept per scene in IndexedDB;
+//    "Share with session" sends it to the peers in your room, who see it read-only until you turn
+//    the switch off (or leave). ONE WRITER PER ROW — the owner — so there is nothing to merge.
+//
+// Wire (all ROOM_SCOPED; `getunderlays` is a full-state REQUEST on the cloudHooks floor):
+//   underlay        {id, rec, src?}  a shared row (src = the image data URL, only when the peer
+//                                     may not have it yet: the first share and a full-state reply)
+//   underlaydelete  {id}             unshared or removed — peers drop it
+//   getunderlays    {sender}         a joiner asks; the reply is every row we share
+// A LEAF: svelte/store, the app stores and idb. Scene identity is pushed in by the layer
+// (`setUnderlayScene`), so this module never reaches levels.js.
+import { get, writable, derived } from 'svelte/store';
+import { peers, showToast } from '../stores/appStore';
+import { idbGet, idbPut } from './idb';
+
+/**
+ * @typedef {{
+ *   id: string, name: string, src: string, px: [number, number],
+ *   mode: 'ground' | 'view', position: [number, number, number], quaternion: [number, number, number, number],
+ *   width: number, opacity: number, visible: boolean, shared: boolean, scene: string,
+ *   owner?: string, at: number
+ * }} Underlay
+ */
+
+/** the longest side an underlay image is kept at (it rides IndexedDB and, when shared, the wire) */
+export const UNDERLAY_MAX_SIDE = 2048;
+/** the IndexedDB key: every underlay of MINE, each tagged with the scene it belongs to */
+const IDB_KEY = 'underlays:v1';
+/** the default see-through-ness: enough to trace over, enough to see the model through */
+export const DEFAULT_OPACITY = 0.5;
+
+/** mine (persisted) — every scene's, tagged */
+const mine = writable(/** @type {Underlay[]} */ ([]));
+/** peers' shared rows, keyed by peer id (never persisted) */
+const theirs = writable(/** @type {Record<string, Underlay[]>} */ ({}));
+/** the scene the editor stands in ('' = an unnamed world) — pushed by UnderlayLayer */
+export const underlayScene = writable('');
+
+/** what the layer draws and the window lists: my rows for this scene, then every peer's shared rows */
+export const underlays = derived([mine, theirs, underlayScene], ([$mine, $theirs, $scene]) => [
+	...$mine.filter((u) => u.scene === $scene),
+	...Object.values($theirs).flat()
+]);
+/** the Reference images window */
+export const underlayWindowOpen = writable(false);
+/** the image-drop menu: where the files were dropped (the App drop handler sets it) */
+export const underlayDropMenu = writable(/** @type {{x: number, y: number, files: File[]} | null} */ (null));
+
+/** @param {string} scene */
+export function setUnderlayScene(scene) {
+	underlayScene.set(String(scene ?? ''));
+}
+
+const myId = () => /** @type {any} */ (get(peers))?.peer?.id ?? '';
+const clamp = (/** @type {number} */ v, /** @type {number} */ lo, /** @type {number} */ hi) => Math.min(hi, Math.max(lo, v));
+const finite = (/** @type {any} */ a, /** @type {number} */ n) => Array.isArray(a) && a.length === n && a.every((v) => Number.isFinite(v));
+
+/**
+ * ONE normalizer for every boundary (idb read, the wire, an edit): unknown fields dropped, every
+ * number clamped. null = not an underlay.
+ * @param {any} raw @returns {Omit<Underlay, 'src'> & {src?: string} | null}
+ */
+export function normalizeUnderlay(raw) {
+	if (!raw || typeof raw !== 'object' || typeof raw.id !== 'string' || !raw.id || raw.id.length > 64) return null;
+	const px = finite(raw.px, 2) ? /** @type {[number, number]} */ ([Math.max(1, raw.px[0]), Math.max(1, raw.px[1])]) : /** @type {[number, number]} */ ([1, 1]);
+	return {
+		id: raw.id,
+		name: String(raw.name ?? 'Reference').slice(0, 120),
+		...(typeof raw.src === 'string' && raw.src.startsWith('data:image/') ? { src: raw.src } : {}),
+		px,
+		mode: raw.mode === 'view' ? 'view' : 'ground',
+		position: finite(raw.position, 3) ? raw.position : [0, 0, 0],
+		quaternion: finite(raw.quaternion, 4) ? raw.quaternion : [0, 0, 0, 1],
+		width: clamp(Number(raw.width) || 10, 0.01, 10000),
+		opacity: clamp(Number.isFinite(Number(raw.opacity)) ? Number(raw.opacity) : DEFAULT_OPACITY, 0.02, 1),
+		visible: raw.visible !== false,
+		shared: raw.shared === true,
+		scene: String(raw.scene ?? ''),
+		at: Number(raw.at) || 0
+	};
+}
+
+/** the plane's height in metres (the image keeps its aspect) @param {{width: number, px: number[]}} u */
+export function underlayHeight(u) {
+	return (u.width * u.px[1]) / Math.max(1, u.px[0]);
+}
+
+// ---- persistence (mine only) ------------------------------------------------------------------
+
+let loaded = false;
+let saveTimer = /** @type {any} */ (null);
+function persist() {
+	if (!loaded) return;
+	clearTimeout(saveTimer);
+	saveTimer = setTimeout(() => {
+		void idbPut(IDB_KEY, get(mine)).catch(() => showToast('Could not save the reference images on this device'));
+	}, 250);
+}
+
+/** read my underlays back (once, at start) */
+export async function loadUnderlays() {
+	if (loaded) return;
+	try {
+		const rows = await idbGet(IDB_KEY);
+		/** @type {Underlay[]} */
+		const list = [];
+		for (const row of Array.isArray(rows) ? rows : []) {
+			const u = normalizeUnderlay(row);
+			if (u?.src) list.push(/** @type {Underlay} */ (u));
+		}
+		// what this session added before the read landed stays, after what was stored
+		mine.update((now) => [...list.filter((u) => !now.some((n) => n.id === u.id)), ...now]);
+	} catch {
+		/* nothing stored, or storage refused — the session simply starts empty */
+	}
+	loaded = true;
+	// rows that were shared when the page closed are shared again: a reload is not an unshare
+	for (const u of get(mine)) if (u.shared && u.scene === get(underlayScene)) send({ type: 'underlay', id: u.id, rec: wireRec(u), src: u.src });
+}
+
+// ---- the wire ----------------------------------------------------------------------------------
+
+/** a row as it travels: the record without `scene` (rooms are the scene gate) or the image */
+function wireRec(/** @type {Underlay} */ u) {
+	const { src: _s, scene: _c, owner: _o, ...rec } = u;
+	return rec;
+}
+
+function send(/** @type {any} */ message) {
+	/** @type {any} */
+	const peer = get(peers);
+	try {
+		peer?.send?.(message);
+	} catch {
+		/* no session */
+	}
+}
+
+/** a shared row changed (pose, opacity…): debounced per row, without the image */
+const pending = new Map();
+function sendUpdate(/** @type {Underlay} */ u) {
+	clearTimeout(pending.get(u.id));
+	pending.set(
+		u.id,
+		setTimeout(() => {
+			pending.delete(u.id);
+			const now = get(mine).find((m) => m.id === u.id);
+			if (now?.shared) send({ type: 'underlay', id: now.id, rec: wireRec(now) });
+		}, 120)
+	);
+}
+
+/** the full-state reply: every row I share in the scene I stand in @param {string} peerId @param {number} [attempt] */
+export function sendUnderlays(peerId, attempt = 0) {
+	/** @type {any} */
+	const peer = get(peers);
+	const conn = peer?.peer?.connections?.[peerId]?.[0] ?? peer?.connections?.[peerId];
+	if (!conn) return;
+	if (!conn.open) {
+		if (attempt < 40) setTimeout(() => sendUnderlays(peerId, attempt + 1), 250);
+		return;
+	}
+	for (const u of get(mine)) if (u.shared && u.scene === get(underlayScene)) conn.send({ type: 'underlay', id: u.id, rec: wireRec(u), src: u.src });
+}
+
+/** a peer's shared row arrived (the owner is the CONNECTION, never a field of the message)
+ * @param {any} data @param {string} from */
+export function applyRemoteUnderlay(data, from) {
+	if (!from) return;
+	const rec = normalizeUnderlay({ ...(data?.rec ?? {}), id: data?.id, src: data?.src });
+	if (!rec) return;
+	theirs.update((all) => {
+		const list = all[from] ?? [];
+		const old = list.find((u) => u.id === rec.id);
+		const src = rec.src ?? old?.src;
+		if (!src) {
+			// an update for a row we never got the image of (we joined between): ask for the lot
+			send({ type: 'getunderlays', sender: myId() });
+			return all;
+		}
+		const next = /** @type {Underlay} */ ({ ...rec, src, shared: true, scene: '', owner: from });
+		return { ...all, [from]: old ? list.map((u) => (u.id === rec.id ? next : u)) : [...list, next] };
+	});
+}
+
+/** @param {any} data @param {string} from */
+export function applyRemoteUnderlayDelete(data, from) {
+	const id = data?.id;
+	if (!from || typeof id !== 'string') return;
+	theirs.update((all) => (all[from]?.some((u) => u.id === id) ? { ...all, [from]: all[from].filter((u) => u.id !== id) } : all));
+}
+
+/** a peer left (or we left the session): their rows go with them @param {string | null} [peerId] null = everyone */
+export function dropPeerUnderlays(peerId = null) {
+	theirs.update((all) => {
+		if (peerId == null) return {};
+		if (!all[peerId]) return all;
+		const { [peerId]: _gone, ...rest } = all;
+		return rest;
+	});
+}
+
+// ---- the edits (mine only) --------------------------------------------------------------------
+
+/** @param {string} id */
+export function isMine(id) {
+	return get(mine).some((u) => u.id === id);
+}
+
+/**
+ * Add an underlay from an image file, posed by the caller (UnderlayLayer knows the camera).
+ * @param {File | Blob} file @param {{name?: string, mode: 'ground' | 'view', position: number[], quaternion: number[], width: number}} pose
+ * @returns {Promise<Underlay | null>}
+ */
+export async function addUnderlay(file, pose) {
+	let src = '';
+	/** @type {[number, number]} */
+	let px = [1, 1];
+	try {
+		const { downscaleImage } = await import('./materialsHandler');
+		src = await downscaleImage(file, UNDERLAY_MAX_SIDE);
+		px = await imageSize(src);
+	} catch {
+		showToast('Could not read that image');
+		return null;
+	}
+	const rec = normalizeUnderlay({
+		id: 'ul-' + Math.random().toString(36).slice(2, 10) + Date.now().toString(36),
+		name: (/** @type {any} */ (file).name ?? 'Reference').replace(/\.[a-z0-9]+$/i, ''),
+		src,
+		px,
+		mode: pose.mode,
+		position: pose.position,
+		quaternion: pose.quaternion,
+		width: pose.width,
+		opacity: DEFAULT_OPACITY,
+		visible: true,
+		shared: false,
+		scene: get(underlayScene),
+		at: Date.now()
+	});
+	if (!rec?.src) return null;
+	const u = /** @type {Underlay} */ (rec);
+	mine.update((list) => [...list, u]);
+	persist();
+	return u;
+}
+
+/** @param {string} src @returns {Promise<[number, number]>} */
+function imageSize(src) {
+	return new Promise((resolve, reject) => {
+		const img = new Image();
+		img.onload = () => resolve([img.naturalWidth || 1, img.naturalHeight || 1]);
+		img.onerror = () => reject(new Error('decode'));
+		img.src = src;
+	});
+}
+
+/**
+ * Change one of MY underlays (a peer's is read-only here). Shared rows follow to the room.
+ * @param {string} id @param {Record<string, any>} patch normalized like every boundary
+ */
+export function updateUnderlay(id, patch) {
+	let changed = /** @type {Underlay | null} */ (null);
+	mine.update((list) =>
+		list.map((u) => {
+			if (u.id !== id) return u;
+			const n = normalizeUnderlay({ ...u, ...patch, id: u.id, src: u.src, scene: u.scene, at: Date.now() });
+			changed = n ? /** @type {Underlay} */ ({ ...n, src: u.src }) : u;
+			return /** @type {Underlay} */ (changed);
+		})
+	);
+	if (!changed) return;
+	persist();
+	if (/** @type {Underlay} */ (changed).shared) sendUpdate(changed);
+}
+
+/** "Share with session": on sends the row (with its image) to the room, off takes it back
+ * @param {string} id @param {boolean} on */
+export function setUnderlayShared(id, on) {
+	const u = get(mine).find((m) => m.id === id);
+	if (!u || u.shared === on) return;
+	updateUnderlay(id, { shared: on });
+	const now = get(mine).find((m) => m.id === id);
+	if (!now) return;
+	clearTimeout(pending.get(id));
+	pending.delete(id);
+	if (on) send({ type: 'underlay', id, rec: wireRec(now), src: now.src });
+	else send({ type: 'underlaydelete', id });
+}
+
+/** @param {string} id */
+export function removeUnderlay(id) {
+	const u = get(mine).find((m) => m.id === id);
+	if (!u) return;
+	mine.update((list) => list.filter((m) => m.id !== id));
+	persist();
+	if (u.shared) send({ type: 'underlaydelete', id });
+}
+
+/** test/debug view */
+export function underlaysDebug() {
+	return {
+		mine: get(mine).map(({ src, ...u }) => ({ ...u, srcBytes: src.length })),
+		theirs: Object.fromEntries(Object.entries(get(theirs)).map(([k, list]) => [k, list.map(({ src, ...u }) => ({ ...u, srcBytes: src.length }))])),
+		scene: get(underlayScene),
+		loaded
+	};
+}
diff --git a/src/lib/vr/frame.js b/src/lib/vr/frame.js
index 599b9fa3d..206789af8 100644
--- a/src/lib/vr/frame.js
+++ b/src/lib/vr/frame.js
@@ -75,7 +75,7 @@ import {
 	vrJumpHeight,
 	updateHeightLift
 } from './locomotion.js';
-import { modeHand, toggleVRMode, payPendingSpawn, updateModeLabel } from './modes.js';
+import { modeHand, toggleVRMode, payPendingSpawn, payPendingPlayHere, updateModeLabel } from './modes.js';
 import {
 	vrHovered,
 	vrPanelCursor,
@@ -216,6 +216,7 @@ export function updateVRControls() {
 		return;
 	}
 	payPendingSpawn(); // 30b P4
+	payPendingPlayHere(); // 60 Q1
 	updateHeightLift(); // 36: Settings ▸ VR ▸ Body (seated / height), applied once per change
 	// open menu/panel are modal for the sticks: sector nav / scrolling own them;
 	// a RIGHT-hand grab owns the right stick too (reel/scale beats teleport, 100);
diff --git a/src/lib/vr/locomotion.js b/src/lib/vr/locomotion.js
index a56f7d6df..1fd4f9c35 100644
--- a/src/lib/vr/locomotion.js
+++ b/src/lib/vr/locomotion.js
@@ -15,6 +15,8 @@ import { moduleWorldChildren } from '../moduleWorld';
 import { teleportVerdictPure, shrinkBox, BOUNDS_INSET, PROBE_HEIGHT } from '../teleportRules';
 import { walkable as dungeonWalkable } from '../dungeonPlay';
 import { resolvePlaySettings, playPublishers } from '../playSettings';
+// 60 Q1: the spawn read every spawn path shares (a Play here override first, else the scene's)
+import { currentSpawn } from '../playSpawn';
 import { locomotionPolicy, vrSpawnOffsets, yawForward } from '../locomotionPolicy';
 import { resolveWalk, charControl } from '../charController';
 import { kitPlayRules } from '../kit/runtime.js';
@@ -790,7 +792,7 @@ export function vrJumpHeight() {
  * no move. @returns {boolean} whether the player was moved
  */
 export function spawnPlayer() {
-	const spawn = resolvePlaySettings(get(globalScene)).spawn;
+	const spawn = currentSpawn();
 	if (!spawn || !renderer?.xr?.getSession?.()) return false;
 	const viewer = viewerNow();
 	if (!viewer) return false;
diff --git a/src/lib/vr/modes.js b/src/lib/vr/modes.js
index 77ce9b95a..d2652b9b9 100644
--- a/src/lib/vr/modes.js
+++ b/src/lib/vr/modes.js
@@ -2,7 +2,7 @@
 // 34 R4 (A5): one concern of src/lib/vrControls.js, which re-exports the public names unchanged.
 import * as THREE from 'three';
 import { get } from 'svelte/store';
-import { globalScene, editorMode } from '../../stores/sceneStore';
+import { globalScene, editorMode, worldRig } from '../../stores/sceneStore';
 import { resolvePlaySettings, playPublishers } from '../playSettings';
 import { hudDocs, isGameHud } from '../hudDocs';
 import { setEditorMode, toggleEditorMode } from '../objectActions';
@@ -14,6 +14,9 @@ import { hapticPulse } from './haptics.js';
 import { controllerIndexFor } from './input.js';
 import { noteXRBaseSpace, viewerNow, spawnPlayer } from './locomotion.js';
 import { handOf, bindingOf, bindingLabel, controlName } from './bindings.js';
+// 60 Q1: Play here in a headset — the same spawn rule and override the desktop press uses
+import { currentSpawn, playHereSpawnFrom, headingOf, setPlayHereSpawn } from '../playSpawn';
+import { surfaceBelow, playingHere } from '../playHere';
 
 // ---- 30b P4: ENTER INTERACT, SWITCH IN VR, SPAWN ------------------------------------------
 // Contract C1: pressing Play in VR on a GAME enters Interact; the left Y button toggles
@@ -84,6 +87,81 @@ export function payPendingSpawn() {
 	spawnPlayer();
 }
 
+// ---- 60 Q1: PLAY HERE IN A HEADSET --------------------------------------------------------------
+// The radial's Tools ▸ Play here: Interact (the headset's Play) starting where you stand, not on the
+// game's spawn — the feet on the surface under your head, facing where you look — and the next
+// switch back to Edit puts you (and the world grab you had) back exactly where you were. A viewer
+// pose exists only inside the session's frame callback, so the press is PAID on the next frame
+// (frame.js, beside payPendingSpawn) — the recenter rule.
+let playHerePending = false;
+/** @type {{space: any, rig: {p: number[], q: number[], s: number[]} | null} | null} */
+let playHereSaved = null;
+
+/** the radial's press @returns {boolean} whether a Play here was queued */
+export function requestVRPlayHere() {
+	if (!renderer?.xr?.getSession?.() || get(editorMode) === 'interact') return false;
+	playHerePending = true;
+	return true;
+}
+
+/** a Play here owed since the press, paid on the first frame with a viewer pose */
+export function payPendingPlayHere() {
+	if (!playHerePending) return;
+	const viewer = viewerNow();
+	if (!viewer) return;
+	playHerePending = false;
+	if (get(editorMode) === 'interact') return;
+	/** @type {any} */
+	const rig = get(worldRig);
+	playHereSaved = {
+		space: renderer.xr.getReferenceSpace(),
+		rig: rig ? { p: rig.position.toArray(), q: rig.quaternion.toArray(), s: rig.scale.toArray() } : null
+	};
+	// where the head is in the CONTENT frame: Interact resets the world grab to 1:1, so the
+	// content point under you is where you will stand
+	const head = new THREE.Vector3(viewer.head.x, viewer.head.y, viewer.head.z);
+	let yaw = viewer.yaw;
+	if (rig) {
+		rig.updateMatrixWorld(true);
+		rig.worldToLocal(head);
+		yaw -= headingOf(rig.quaternion);
+	}
+	resetWorldRig();
+	setPlayHereSpawn(playHereSpawnFrom({ eye: head.toArray(), yaw }, surfaceBelow, currentSpawn(), viewer.headHeight));
+	playingHere.set(true);
+	// → the editorMode subscription → enterInteractVR → spawnPlayer, which reads the override
+	setEditorMode('interact');
+}
+
+/** back to Edit (or the session ended): the override goes, and the view you left comes back */
+function endVRPlayHere(/** @type {boolean} */ restore) {
+	playHerePending = false;
+	const was = playHereSaved;
+	playHereSaved = null;
+	if (!was) return;
+	setPlayHereSpawn(null);
+	playingHere.set(false);
+	if (!restore) return;
+	try {
+		if (was.space) renderer.xr.setReferenceSpace(was.space);
+	} catch {
+		/* a space from an ended session — nothing to go back to */
+	}
+	/** @type {any} */
+	const rig = get(worldRig);
+	if (rig && was.rig) {
+		rig.position.fromArray(was.rig.p);
+		rig.quaternion.fromArray(was.rig.q);
+		rig.scale.fromArray(was.rig.s);
+		rig.updateMatrixWorld(true);
+	}
+}
+
+/** test/debug view */
+export function vrPlayHereDebug() {
+	return { pending: playHerePending, saved: !!playHereSaved };
+}
+
 /** @type {any} */ let modeLabel = null;
 /** @type {any} */ let modeLabelCanvas = null;
 let modeLabelText = '';
@@ -165,7 +243,8 @@ let lastEditorMode = get(editorMode);
 editorMode.subscribe((mode) => {
 	if (mode === lastEditorMode) return;
 	lastEditorMode = mode;
-	if (!renderer?.xr?.getSession?.()) return;
+	if (!renderer?.xr?.getSession?.()) return endVRPlayHere(false);
 	if (mode === 'interact') enterInteractVR();
+	else endVRPlayHere(true); // 60 Q1
 	updateModeLabel();
 });
diff --git a/src/lib/vrControls.js b/src/lib/vrControls.js
index 58120f8ef..03becf97d 100644
--- a/src/lib/vrControls.js
+++ b/src/lib/vrControls.js
@@ -224,5 +224,7 @@ export {
 	modeHand,
 	onVRSessionStart,
 	toggleVRMode,
-	vrModeLabelDebug
+	vrModeLabelDebug,
+	requestVRPlayHere,
+	vrPlayHereDebug
 } from './vr/modes.js';
diff --git a/src/lib/vrRadialMenu.js b/src/lib/vrRadialMenu.js
index 95972ebaa..9e86e0de1 100644
--- a/src/lib/vrRadialMenu.js
+++ b/src/lib/vrRadialMenu.js
@@ -6,8 +6,10 @@ import {
 	vrWireframeSelection,
 	vrEditMenuOpen,
 	vrSnapMenuOpen,
-	vrToolMode
+	vrToolMode,
+	editorMode
 } from '../stores/sceneStore';
+import { playingHere } from './playHere'; // 60 Q1 (a near-leaf: playSpawn / playMode / stores)
 import { environment, setEnvironment, ENVIRONMENT_PRESETS } from './environment';
 import { simulating, remoteSimulating, toggleSimulation } from './physics';
 import { setMicMode, vrMicMode } from './voiceChat';
@@ -307,6 +309,27 @@ function registerBuiltins() {
 		action: () => toggleSimulation()
 	});
 
+	// 60 Q1: PLAY HERE — Interact (the headset's Play) from where you stand, facing where you look;
+	// the same entry (or the mode button) brings you back to Edit where you were. The press is paid
+	// on the next XR frame (vr/modes.js), so the dynamic import's microtask costs nothing.
+	registerVRMenuEntry({
+		id: 'playhere',
+		group: 'tools',
+		label: () => (get(playingHere) && get(editorMode) === 'interact' ? 'Back to edit' : 'Play here'),
+		icon: () => (get(playingHere) && get(editorMode) === 'interact' ? 'square' : 'play'),
+		order: 6,
+		closes: true,
+		active: () => get(playingHere),
+		visible: () => get(editorMode) !== 'interact' || get(playingHere),
+		action: () => {
+			if (get(playingHere) && get(editorMode) === 'interact') {
+				void import('./objectActions').then((m) => m.setEditorMode('edit'));
+				return;
+			}
+			void import('./vr/modes.js').then((m) => m.requestVRPlayHere());
+		}
+	});
+
 	// Add ▸ — the desktop Add menu's names; ids resolve in executeVRMenuAction's switch, which spawns
 	// the primitive 2 m ahead of the camera (spawnPrimitive)
 	[
diff --git a/src/lib/wireValidate.js b/src/lib/wireValidate.js
index 82b4ead4e..415cc0b75 100644
--- a/src/lib/wireValidate.js
+++ b/src/lib/wireValidate.js
@@ -160,6 +160,12 @@ export const VALIDATORS = {
 	seq: (d) => typeof d.id === 'string' && d.id.length <= 64 && !!d.doc && typeof d.doc === 'object' && !Array.isArray(d.doc),
 	seqdelete: (d) => typeof d.id === 'string' && d.id.length <= 64,
 	seqs: (d) => !!d.seqs && typeof d.seqs === 'object' && !Array.isArray(d.seqs),
+	// 60 Q5: a shared reference image (normalized again on apply); the image is a data URL, capped
+	// at what a 2048 px picture can be (the sender downscales to that)
+	underlay: (d) =>
+		typeof d.id === 'string' && d.id.length <= 64 && !!d.rec && typeof d.rec === 'object' && !Array.isArray(d.rec) &&
+		(d.src === undefined || (typeof d.src === 'string' && d.src.startsWith('data:image/') && d.src.length <= 12 * 1024 * 1024)),
+	underlaydelete: (d) => typeof d.id === 'string' && d.id.length <= 64,
 	userdata: (d) => isArray(d.userdata),
 	locked: (d) => isArray(d.lockeditems),
 	lock: (d) => isUuid(d.uuid) && (d.uuids === undefined || isArray(d.uuids)),
diff --git a/tests/e2e/play-here-iwer.test.cjs b/tests/e2e/play-here-iwer.test.cjs
new file mode 100644
index 000000000..de9c4a9e2
--- /dev/null
+++ b/tests/e2e/play-here-iwer.test.cjs
@@ -0,0 +1,147 @@
+// 60 Q1: PLAY HERE IN A HEADSET (IWER — the app's own WebXR path end to end). The radial's
+// Tools ▸ Play here switches to Interact (the headset's Play) with the FEET on the surface under the
+// head, facing where the head looks — not on the scene's spawn — and Tools ▸ Back to edit (or the mode
+// button) puts the viewer, and any world grab they had, back exactly where they were.
+//
+// IWER's offset reference spaces never reach the XR camera it reports (vr-comfort-iwer's note), so
+// the rows read WHAT THE APP APPLIED: every XRRigidTransform the rig moves by is recorded — the
+// horizontal move, the lift and the turn of a spawn — and the restore is read as the reference
+// space OBJECT itself (Back to edit hands back the very space Edit had).
+const h = require('./helpers.cjs');
+const iwer = require('./iwer.cjs');
+
+const near = (a, b, eps = 0.06) => Math.abs(a - b) < eps;
+const mode = (page) => page.evaluate(() => { let v; window.__stores.editorMode.subscribe((x) => (v = x))(); return v; });
+const SPY = () => {
+	if (window.__rigSpy) return;
+	const Orig = window.XRRigidTransform;
+	window.__rigSpy = [];
+	window.XRRigidTransform = class extends Orig {
+		constructor(p, o) {
+			super(p, o);
+			window.__rigSpy.push({ p: p ? [p.x || 0, p.y || 0, p.z || 0] : [0, 0, 0], yaw: o ? 2 * Math.atan2(o.y || 0, o.w ?? 1) : 0 });
+		}
+	};
+};
+/** the offsets applied since the last call: {move (m, horizontal), lift (m), turns: [yaw…]} */
+const applied = (page) =>
+	page.evaluate(() => {
+		const list = window.__rigSpy.splice(0);
+		let x = 0, y = 0, z = 0;
+		const turns = [];
+		for (const r of list) {
+			if (Math.abs(r.yaw) > 1e-4) turns.push(+r.yaw.toFixed(3));
+			else {
+				x += r.p[0];
+				y += r.p[1];
+				z += r.p[2];
+			}
+		}
+		return { move: +Math.hypot(x, z).toFixed(3), lift: +(-y).toFixed(3), turns, n: list.length };
+	});
+/** remember the live reference space as `name`, or ask whether it is still that one */
+const space = (page, name, op) =>
+	page.evaluate(({ name, op }) => {
+		let r;
+		window.__stores.globalRenderer.subscribe((v) => (r = v))();
+		const now = r.xr.getReferenceSpace();
+		if (op === 'keep') return !!(window['__space_' + name] = now);
+		return now === window['__space_' + name];
+	}, { name, op });
+const rigPose = (page) =>
+	page.evaluate(() => { let r; window.__stores.worldRig.subscribe((x) => (r = x))(); return { p: r.position.toArray(), s: r.scale.x }; });
+
+h.run(async () => {
+	const browser = await h.launch({ args: h.GPU_ARGS });
+	const A = await h.setupPage(browser, 'A', { init: iwer.initScript() });
+	const P = A.page;
+	h.check(await iwer.installed(P), 'premise: IWER owns navigator.xr');
+
+	// a box at (8, _, −6) whose top is 1 m up (below the 1.6 m head)
+	await P.evaluate(() => window.__stores.commandsHandler.sceneCommand('/create box'));
+	await P.waitForTimeout(500);
+	const top = await P.evaluate(() => {
+		const s = window.__stores;
+		let g;
+		s.objectsGroup.subscribe((x) => (g = x))();
+		const b = g.children.at(-1);
+		b.scale.set(4, 1, 4);
+		b.position.set(8, 0.5, -6);
+		b.updateMatrixWorld(true);
+		return new s.THREE.Box3().setFromObject(b).max.y;
+	});
+	// a plain scene: the session starts in Edit; the spawn (which makes it a game) comes after
+	await iwer.enter(P);
+	await iwer.frames(P, 4);
+	h.check((await mode(P)) === 'edit', 'premise: the headset is in Edit');
+	await P.evaluate(() => window.__stores.scenePhysics.setScenePhysics({ play: { spawn: { position: [-10, 0, 10], yaw: 0 } } }));
+	await P.evaluate(SPY);
+
+	// ---- 1. stand over the box looking half-left, Tools ▸ Play here ---------------------------------
+	await iwer.pose(P, 'head', [8, 1.6, -6], { yaw: 0.5 });
+	await iwer.frames(P, 4);
+	await space(P, 'edit', 'keep');
+	await applied(P);
+	const entry = await P.evaluate(() => window.__stores.vrRadialMenu.ringEntries('tools').map((e) => e.id));
+	h.check(entry.includes('playhere'), `the radial's Tools ring offers Play here (${JSON.stringify(entry)})`);
+	await P.evaluate(() => window.__stores.vrControls.executeVRMenuAction('playhere'));
+	await iwer.frames(P, 8);
+	h.check((await mode(P)) === 'interact', 'Play here switches to Interact');
+	const dbg = await P.evaluate(() => window.__stores.playHere.playHereDebug());
+	h.check(
+		dbg.playing === true && dbg.override && near(dbg.override.position[0], 8) && near(dbg.override.position[2], -6) && near(dbg.override.position[1], top) && near(dbg.override.yaw, 0.5, 0.02),
+		`the round's spawn: under the head, on the box top, facing the head (${JSON.stringify(dbg.override)})`
+	);
+	let a = await applied(P);
+	h.check(a.move < 0.05, `...so the player is NOT moved across the world to the spawn (moved ${a.move} m)`);
+	h.check(near(a.lift, top, 0.05), `...the feet are lifted onto the box top (lift ${a.lift} m vs ${top.toFixed(2)})`);
+	h.check(a.turns.every((t) => Math.abs(t) < 0.02), `...and the view keeps its facing (turns ${JSON.stringify(a.turns)})`);
+	h.check(!(await space(P, 'edit', 'same')), 'Interact plays in a moved reference space');
+
+	// ---- 2. Back to edit: the very reference space Edit had --------------------------------------
+	h.check(!!(await P.evaluate(() => window.__stores.vrRadialMenu.ringEntries('tools').find((e) => e.id === 'playhere'))), 'the entry stays while the round runs');
+	await P.evaluate(() => window.__stores.vrControls.executeVRMenuAction('playhere'));
+	await iwer.frames(P, 6);
+	h.check((await mode(P)) === 'edit', 'Back to edit: Edit');
+	h.check(await space(P, 'edit', 'same'), '...in the reference space Edit had (the view is where it was)');
+	const after = await P.evaluate(() => window.__stores.playHere.playHereDebug());
+	h.check(after.override === null && after.playing === false, 'the override is gone');
+
+	// ---- 3. a world grab (miniature) is put back too; Interact played it at 1:1 -------------------
+	await P.evaluate(() => {
+		let r;
+		window.__stores.worldRig.subscribe((x) => (r = x))();
+		r.scale.setScalar(0.5);
+		r.position.set(4, 0, -3);
+		r.updateMatrixWorld(true);
+	});
+	await iwer.frames(P, 3);
+	await applied(P);
+	await P.evaluate(() => window.__stores.vrControls.executeVRMenuAction('playhere'));
+	await iwer.frames(P, 8);
+	let rig = await rigPose(P);
+	h.check((await mode(P)) === 'interact' && rig.s === 1 && rig.p.every((x) => x === 0), `Play here plays at 1:1 (${JSON.stringify(rig)})`);
+	// the content point under the head: (8 − 4) / 0.5 = 8, (−6 + 3) / 0.5 = −6 → over the box again
+	const o3 = (await P.evaluate(() => window.__stores.playHere.playHereDebug())).override;
+	h.check(o3 && near(o3.position[0], 8, 0.1) && near(o3.position[2], -6, 0.1) && near(o3.position[1], top), `...from the content point under the head (${JSON.stringify(o3)})`);
+	// the mode button (left Y) is the other way back
+	await iwer.tap(P, 'left', 5);
+	await iwer.frames(P, 6);
+	rig = await rigPose(P);
+	h.check((await mode(P)) === 'edit', 'left Y: back to Edit');
+	h.check(rig.s === 0.5 && near(rig.p[0], 4) && near(rig.p[2], -3), `...and the world grab is back (${JSON.stringify(rig)})`);
+	h.check(await space(P, 'edit', 'same'), '...in the reference space Edit had');
+
+	// ---- 4. an ordinary Interact afterwards uses the scene's spawn (the override did not leak) -----
+	await applied(P);
+	await iwer.tap(P, 'left', 5);
+	await iwer.frames(P, 8);
+	h.check((await mode(P)) === 'interact', 'left Y: an ordinary Interact');
+	a = await applied(P);
+	const toSpawn = Math.hypot(-10 - 8, 10 + 6);
+	h.check(near(a.move, toSpawn, 0.15), `...moves the player to the scene's spawn (${a.move} m vs ${toSpawn.toFixed(2)})`);
+	h.check(a.turns.some((t) => Math.abs(Math.abs(t) - 0.5) < 0.03), `...and turns them to its facing (turns ${JSON.stringify(a.turns)})`);
+
+	await iwer.exit(P);
+	await h.finish(browser);
+});
diff --git a/tests/e2e/play-here.test.cjs b/tests/e2e/play-here.test.cjs
new file mode 100644
index 000000000..bccffe173
--- /dev/null
+++ b/tests/e2e/play-here.test.cjs
@@ -0,0 +1,235 @@
+// 60 Q1: PLAY HERE (desktop + phone). The player starts where the editor camera is — the feet on the
+// surface straight under it, facing the view's heading — and leaving Play puts the editor view and the
+// selection back. Nothing under the camera → the scene's spawn; no spawn either → the camera's own eye.
+// The override is a ONE-ROUND thing: the next ordinary Play lands on the scene's spawn again.
+// HEIGHT: desktop Play is GROUNDED by default (37 R24 — PointerLockControls pins the eye at the
+// scene's eye height), so the surface height counts where the scene lets the player fly (or a walk
+// controller owns Y); a grounded scene keeps X/Z + facing and its own eye height. Both are covered.
+// Entry points covered: Ctrl+Shift+Enter, the Play button's right-click row, the optional toolbar
+// button, and on a phone the Play long-press row + More ▸ Play here.
+// IWER (the headset) lives in play-here-iwer.test.cjs.
+const h = require('./helpers.cjs');
+
+const store = (name) => `(() => { let v; window.__stores.${name}.subscribe((x) => (v = x))(); return v; })()`;
+const near = (a, b, eps = 0.06) => Math.abs(a - b) < eps;
+const wrap = (a) => Math.atan2(Math.sin(a), Math.cos(a));
+const SPAWN = { position: [3, 0, -4], yaw: Math.PI / 2 };
+/** the toolbar with the optional Play here button placed at the end of the bar */
+const BAR = JSON.stringify({
+	order: ['move', 'rotate', 'scale', 'pivot', 'mode', 'objects', 'flow', 'explorer', 'animation', 'playhere'],
+	hidden: [],
+	spacerIndex: 5,
+	seen: ['move', 'rotate', 'scale', 'pivot', 'mode', 'objects', 'flow', 'explorer', 'animation', 'playhere', 'ai', 'add', 'chat', 'mic', 'notes', 'notifications', 'peers', 'undo', 'redo', 'multiselect']
+});
+
+/** the play camera's world eye + heading, the editor camera's pose + orbit target */
+const cams = (page) =>
+	page.evaluate(() => {
+		const s = window.__stores;
+		const THREE = s.THREE;
+		const get = (st) => { let v; st.subscribe((x) => (v = x))(); return v; };
+		const pc = get(s.playerCam);
+		const ec = get(s.editorCam);
+		const oc = get(s.orbitControls);
+		const f = new THREE.Vector3(0, 0, -1).applyQuaternion(pc.getWorldQuaternion(new THREE.Quaternion()));
+		return {
+			player: pc.getWorldPosition(new THREE.Vector3()).toArray(),
+			playerYaw: Math.atan2(-f.x, -f.z),
+			editor: ec.position.toArray(),
+			editorQ: ec.quaternion.toArray(),
+			target: oc?.target?.toArray() ?? null,
+			locked: get(s.isLocked)
+		};
+	});
+
+/** park the editor camera at `pos` looking at `target` (the OrbitControls own the view, so through them) */
+const aim = (page, pos, target) =>
+	page.evaluate(
+		({ pos, target }) => {
+			const s = window.__stores;
+			const get = (st) => { let v; st.subscribe((x) => (v = x))(); return v; };
+			const cam = get(s.editorCam);
+			const oc = get(s.orbitControls);
+			oc.target.set(...target);
+			cam.position.set(...pos);
+			cam.lookAt(...target);
+			oc.update();
+			cam.updateMatrixWorld(true);
+		},
+		{ pos, target }
+	);
+
+const waitLocked = async (page, want) => {
+	for (let i = 0; i < 40; i++) {
+		if ((await page.evaluate(store('isLocked'))) === want) return true;
+		await page.waitForTimeout(100);
+	}
+	return false;
+};
+
+h.run(async () => {
+	const browser = await h.launch();
+	const A = await h.setupPage(browser, 'A', { context: { viewport: { width: 1440, height: 900 } }, storage: { controlsLayout: BAR } });
+	const P = A.page;
+
+	// ---- the world: a wide box far from the origin (top at y = 5), the scene's spawn elsewhere ----
+	await P.evaluate(() => window.__stores.commandsHandler.sceneCommand('/create box'));
+	await P.waitForTimeout(500);
+	const box = await P.evaluate(() => {
+		const s = window.__stores;
+		let g;
+		s.objectsGroup.subscribe((x) => (g = x))();
+		const b = g.children.at(-1);
+		b.scale.set(10, 5, 10);
+		b.position.set(40, 0, -35);
+		b.updateMatrixWorld(true);
+		const bb = new s.THREE.Box3().setFromObject(b);
+		b.position.y -= bb.min.y; // sit it on the ground: its top is then its height
+		b.updateMatrixWorld(true);
+		const top = new s.THREE.Box3().setFromObject(b).max.y;
+		s.objectActions.applySelectionSet([b.uuid]);
+		return { uuid: b.uuid, top };
+	});
+	h.check(box.top > 4, `premise: a box with its top at ${box.top.toFixed(2)} m, far from the origin`);
+	// flying allowed: the spawn's height is honoured (the grounded case is row 1b)
+	await P.evaluate((spawn) => window.__stores.scenePhysics.setScenePhysics({ play: { spawn, locomotion: { fly: true } } }), SPAWN);
+
+	// ---- 1. Ctrl+Shift+Enter from a far corner: on the box roof, facing the view ------------------
+	const EYE_AT = [40, 14, -32];
+	await aim(P, EYE_AT, [30, 0, -42]);
+	const before = await cams(P);
+	const resolved = await P.evaluate(() => window.__stores.playHere.resolvePlayHere());
+	h.check(resolved?.source === 'surface' && near(resolved.position[1], box.top), `the resolver lands on the roof (${JSON.stringify(resolved)})`);
+	await P.mouse.move(700, 450);
+	await P.keyboard.press('Control+Shift+Enter');
+	h.check(await waitLocked(P, true), 'Ctrl+Shift+Enter enters Play');
+	await P.waitForTimeout(400);
+	let c = await cams(P);
+	h.check(near(c.player[0], 40) && near(c.player[2], -32), `the player stands under the camera, not on the spawn (${c.player.map((v) => v.toFixed(2))})`);
+	h.check(near(c.player[1], box.top + 1.7), `the eye is 1.7 m above the roof (${c.player[1].toFixed(2)} vs ${(box.top + 1.7).toFixed(2)})`);
+	h.check(near(wrap(c.playerYaw - Math.PI / 4), 0, 0.03), `facing the view's heading (${c.playerYaw.toFixed(3)} vs ${(Math.PI / 4).toFixed(3)})`);
+	h.check((await P.evaluate(store('playHere.playingHere'))) === true, 'playingHere is on while the round runs');
+
+	// Stop: the view and the selection come back
+	h.check(await h.leavePlay(A), 'Escape leaves Play');
+	await P.waitForTimeout(300);
+	c = await cams(P);
+	h.check(c.editor.every((v, i) => near(v, before.editor[i], 0.01)), `the editor camera is back where it was (${c.editor.map((v) => v.toFixed(2))})`);
+	h.check(c.target && c.target.every((v, i) => near(v, before.target[i], 0.01)), `...looking at the same orbit target (${JSON.stringify(c.target)})`);
+	h.check(c.editorQ.every((v, i) => near(v, before.editorQ[i], 0.01)), '...with the same orientation');
+	const sel = await P.evaluate(store('selectedObjects'));
+	h.check(sel.map((o) => o?.uuid ?? o).includes(box.uuid), `the selection is back (${JSON.stringify(sel.map((o) => o?.uuid ?? o))})`);
+	const dbg = await P.evaluate(() => window.__stores.playHere.playHereDebug());
+	h.check(dbg.override === null && dbg.playing === false, `the override is gone with the round (${JSON.stringify({ o: dbg.override, p: dbg.playing })})`);
+
+	// ---- 1b. a GROUNDED scene (the default): X/Z and facing from the camera, the scene's eye height --
+	await P.evaluate(() => window.__stores.scenePhysics.setScenePhysics({ play: { locomotion: { fly: false } } }));
+	await P.keyboard.press('Control+Shift+Enter');
+	h.check(await waitLocked(P, true), 'grounded: Play here');
+	await P.waitForTimeout(400);
+	c = await cams(P);
+	h.check(near(c.player[0], 40) && near(c.player[2], -32) && near(c.player[1], 1.7), `grounded: under the camera at the scene's eye height (${c.player.map((v) => v.toFixed(2))})`);
+	h.check(near(wrap(c.playerYaw - Math.PI / 4), 0, 0.03), `grounded: facing the view (${c.playerYaw.toFixed(3)})`);
+	await h.leavePlay(A);
+	await P.evaluate(() => window.__stores.scenePhysics.setScenePhysics({ play: { locomotion: { fly: true } } }));
+
+	// ---- 2. the next ORDINARY Play lands on the scene's spawn (the override does not leak) --------
+	await P.keyboard.press('Control+Enter');
+	h.check(await waitLocked(P, true), 'Ctrl+Enter: an ordinary Play');
+	await P.waitForTimeout(400);
+	c = await cams(P);
+	h.check(near(c.player[0], 3) && near(c.player[2], -4) && near(c.player[1], 1.7), `an ordinary Play spawns on the scene's spawn (${c.player.map((v) => v.toFixed(2))})`);
+	await h.leavePlay(A);
+
+	// ---- 3. the Play button's right-click row; nothing under the camera → the scene's spawn ---------
+	await aim(P, [0, -6, 20], [0, -6, 0]); // under the ground plane: nothing below
+	await P.click('#play-button', { button: 'right' });
+	await P.waitForTimeout(300);
+	const rows = await P.evaluate(() => [...document.querySelectorAll('[role="menuitem"]')].map((el) => el.textContent.trim()));
+	h.check(rows.includes('Play here'), `Play's own menu carries "Play here" (${JSON.stringify(rows)})`);
+	await P.getByRole('menuitem', { name: 'Play here' }).click();
+	h.check(await waitLocked(P, true), 'the menu row enters Play');
+	await P.waitForTimeout(400);
+	c = await cams(P);
+	const last = (await P.evaluate(() => window.__stores.playHere.playHereDebug())).last;
+	h.check(last?.source === 'spawn', `nothing under the camera: the scene's spawn (${JSON.stringify(last)})`);
+	h.check(near(c.player[0], 3) && near(c.player[2], -4), `...the player is on it (${c.player.map((v) => v.toFixed(2))})`);
+	h.check(near(wrap(c.playerYaw - SPAWN.yaw), 0, 0.03), `...facing the spawn's own yaw (${c.playerYaw.toFixed(3)})`);
+	await h.leavePlay(A);
+
+	// ---- 4. the toolbar button; no ground, no spawn → the camera's own eye ------------------------
+	await P.evaluate(() => window.__stores.scenePhysics.setScenePhysics({ ground: { enabled: false }, play: { spawn: null } }));
+	await aim(P, [70, 9, 70], [60, 9, 60]);
+	h.check(await P.locator('#play-here-button').isVisible(), 'the optional toolbar button is on the bar when placed');
+	await P.click('#play-here-button');
+	h.check(await waitLocked(P, true), 'the toolbar button enters Play');
+	await P.waitForTimeout(400);
+	c = await cams(P);
+	h.check(near(c.player[0], 70) && near(c.player[1], 9) && near(c.player[2], 70), `no surface, no spawn: the eye stays at the camera (${c.player.map((v) => v.toFixed(2))})`);
+	h.check(near(wrap(c.playerYaw - Math.PI / 4), 0, 0.03), `...facing the view (${c.playerYaw.toFixed(3)})`);
+	await h.leavePlay(A);
+	await P.evaluate(() => window.__stores.scenePhysics.setScenePhysics({ ground: { enabled: true } }));
+	await A.page.context().close();
+
+	// ---- 5. a phone (N6 folded): Play's long-press row and More ▸ Play here ------------------------
+	const FOLDED = { width: 390, height: 896 };
+	const B = await h.setupPage(browser, 'phone', {
+		context: { viewport: FOLDED, hasTouch: true, isMobile: true, deviceScaleFactor: 2.9 },
+		storage: { toursSeen: '{"editor-touch":true,"editor":true}' }
+	});
+	const Q = B.page;
+	await Q.evaluate(() => window.__stores.commandsHandler.sceneCommand('/create box'));
+	await Q.waitForTimeout(500);
+	await Q.evaluate(() => {
+		const s = window.__stores;
+		let g;
+		s.objectsGroup.subscribe((x) => (g = x))();
+		const b = g.children.at(-1);
+		b.scale.set(6, 2, 6);
+		b.position.set(-20, 1, 15);
+		b.updateMatrixWorld(true);
+	});
+	const top = await Q.evaluate(() => {
+		const s = window.__stores;
+		let g;
+		s.objectsGroup.subscribe((x) => (g = x))();
+		return new s.THREE.Box3().setFromObject(g.children.at(-1)).max.y;
+	});
+	await aim(Q, [-20, 10, 15], [-20, 0, 5]);
+	const phoneBefore = await cams(Q);
+	// long press on Play = its contextmenu
+	await Q.locator('#ps-bar [data-bar-item="play"]').dispatchEvent('contextmenu', { clientX: 195, clientY: 860 });
+	await Q.waitForTimeout(300);
+	const phoneRows = await Q.evaluate(() => [...document.querySelectorAll('[role="menuitem"]')].map((el) => el.textContent.trim()));
+	h.check(phoneRows.includes('Play here'), `the phone Play menu carries "Play here" (${JSON.stringify(phoneRows)})`);
+	await Q.getByRole('menuitem', { name: 'Play here' }).click();
+	h.check(await waitLocked(Q, true), 'phone: the row enters Play');
+	await Q.waitForTimeout(400);
+	c = await cams(Q);
+	// a phone scene is grounded by default: X/Z from the camera, the eye at the scene's height
+	h.check(near(c.player[0], -20) && near(c.player[2], 15) && near(c.player[1], 1.7), `phone: under the camera, grounded (${c.player.map((v) => v.toFixed(2))}, box top ${top.toFixed(2)})`);
+	h.check(near(wrap(c.playerYaw), 0, 0.03), `phone: facing the view (${c.playerYaw.toFixed(3)})`);
+	// the touch ✕ is the phone's way out
+	const exitBtn = Q.locator('#touch-play-exit, [data-touch-exit], button[aria-label="Exit play"]').first();
+	if (await exitBtn.isVisible().catch(() => false)) await exitBtn.click();
+	else await Q.evaluate(() => window.__stores.playMode.exitPlay());
+	h.check(await waitLocked(Q, null), 'phone: Play ends');
+	await Q.waitForTimeout(300);
+	c = await cams(Q);
+	h.check(c.editor.every((v, i) => near(v, phoneBefore.editor[i], 0.01)), `phone: the editor view is back (${c.editor.map((v) => v.toFixed(2))})`);
+
+	// More ▸ Tools & View ▸ Play here
+	await Q.locator('#ps-bar [data-bar-item="more"]').click();
+	await Q.waitForTimeout(400);
+	const tile = Q.locator('#ps-tile-playhere');
+	h.check(await tile.isVisible().catch(() => false), 'phone: More lists Play here');
+	await tile.click();
+	h.check(await waitLocked(Q, true), 'phone: the More tile enters Play');
+	await Q.waitForTimeout(300);
+	c = await cams(Q);
+	h.check(near(c.player[0], -20) && near(c.player[2], 15), `phone (More): under the camera again (${c.player.map((v) => v.toFixed(2))})`);
+	await Q.evaluate(() => window.__stores.playMode.exitPlay());
+	await waitLocked(Q, null);
+
+	await h.finish(browser);
+});
diff --git a/tests/e2e/underlay.test.cjs b/tests/e2e/underlay.test.cjs
new file mode 100644
index 000000000..8e4113001
--- /dev/null
+++ b/tests/e2e/underlay.test.cjs
@@ -0,0 +1,242 @@
+// 60 Q5: REFERENCE IMAGE UNDERLAYS. Drop an image on the viewport → "Use as reference" → a locked,
+// unpickable, see-through plane on the ground (or facing the view), with its own opacity. A working
+// aid, not scene content: hidden in Play, absent from the GLTF export, the .tpscene payload (which
+// Export and Publish build from) and the viewport/room thumbnail; LOCAL by default, and "Share with
+// session" shows it read-only to the peers in your room until the owner turns the switch off.
+// Persisted per scene on this device: a reload keeps it.
+const h = require('./helpers.cjs');
+
+const store = (name) => `(() => { let v; window.__stores.${name}.subscribe((x) => (v = x))(); return v; })()`;
+const RED = [230, 20, 20];
+
+/** park the editor camera at `pos` looking at `target` (through the OrbitControls, which own the view) */
+const aim = (page, pos, target) =>
+	page.evaluate(
+		({ pos, target }) => {
+			const s = window.__stores;
+			const get = (st) => { let v; st.subscribe((x) => (v = x))(); return v; };
+			const cam = get(s.editorCam);
+			const oc = get(s.orbitControls);
+			oc.target.set(...target);
+			cam.position.set(...pos);
+			cam.lookAt(...target);
+			oc.update();
+			cam.updateMatrixWorld(true);
+		},
+		{ pos, target }
+	);
+
+/** drop a solid-red PNG (made on a canvas) on the viewport centre, the way a file drag does */
+const dropImage = (page, name = 'floor-plan.png') =>
+	page.evaluate(
+		async ({ name, rgb }) => {
+			const c = document.createElement('canvas');
+			c.width = 64;
+			c.height = 32;
+			const ctx = c.getContext('2d');
+			ctx.fillStyle = `rgb(${rgb.join(',')})`;
+			ctx.fillRect(0, 0, 64, 32);
+			const blob = await new Promise((r) => c.toBlob(r, 'image/png'));
+			const dt = new DataTransfer();
+			dt.items.add(new File([blob], name, { type: 'image/png' }));
+			let canvas;
+			window.__stores.globalRenderer.subscribe((r) => (canvas = r.domElement))();
+			const box = canvas.getBoundingClientRect();
+			const at = { clientX: box.x + box.width / 2, clientY: box.y + box.height / 2 };
+			canvas.dispatchEvent(new DragEvent('dragover', { bubbles: true, cancelable: true, dataTransfer: dt, ...at }));
+			canvas.dispatchEvent(new DragEvent('drop', { bubbles: true, cancelable: true, dataTransfer: dt, ...at }));
+		},
+		{ name, rgb: RED }
+	);
+
+/** the layer's meshes, and whether any of them sits under sceneObjects */
+const layer = (page) =>
+	page.evaluate(() => {
+		const s = window.__stores;
+		const get = (st) => { let v; st.subscribe((x) => (v = x))(); return v; };
+		const root = get(s.globalScene)?.getObjectByName('reference-underlays');
+		let inObjects = false;
+		get(s.objectsGroup).traverse((o) => {
+			if (o.userData?.underlay) inObjects = true;
+		});
+		return {
+			found: !!root,
+			meshes: (root?.children ?? []).map((m) => ({ id: m.userData.underlay, visible: m.visible, opacity: m.material.opacity, owner: m.userData.owner, layer: m.layers.mask })),
+			inObjects
+		};
+	});
+
+/** the centre pixel of a fresh editor render (helper layer as the camera has it), and of the
+ * viewport thumbnail (sessions.viewportThumbnail, which rooms and the session list use) */
+const centrePixels = (page) =>
+	page.evaluate(async () => {
+		const s = window.__stores;
+		const get = (st) => { let v; st.subscribe((x) => (v = x))(); return v; };
+		const renderer = get(s.globalRenderer);
+		const scene = get(s.globalScene);
+		const camera = get(s.globalCamera);
+		const read = (source) => {
+			const c = document.createElement('canvas');
+			c.width = source.width;
+			c.height = source.height;
+			const ctx = c.getContext('2d');
+			ctx.drawImage(source, 0, 0);
+			return [...ctx.getImageData(Math.floor(c.width / 2), Math.floor(c.height / 2), 1, 1).data.slice(0, 3)];
+		};
+		renderer.render(scene, camera);
+		const live = read(renderer.domElement);
+		const url = s.sessions.viewportThumbnail(256);
+		const img = new Image();
+		await new Promise((r) => ((img.onload = r), (img.onerror = r), (img.src = url)));
+		return { live, thumb: read(img) };
+	});
+const reddish = (p) => p[0] > 150 && p[0] > p[1] + 80 && p[0] > p[2] + 80;
+
+h.run(async () => {
+	const browser = await h.launch();
+	const A = await h.setupPage(browser, 'A', { context: { viewport: { width: 1440, height: 900 } } });
+	const P = A.page;
+
+	// ---- 1. drop an image → "Use as reference — on the ground" -------------------------------------
+	await aim(P, [0, 12, 6], [0, 0, 0]);
+	await dropImage(P);
+	const row = P.getByRole('menuitem', { name: 'Use as reference — on the ground' });
+	h.check(await row.waitFor({ state: 'visible', timeout: 5000 }).then(() => true, () => false), 'an image-only drop asks what the image is for');
+	const items = await P.evaluate(() => [...document.querySelectorAll('[role="menuitem"]')].map((el) => el.textContent.trim()));
+	h.check(items.some((t) => t.includes('Add to the Explorer')), `...the Explorer stays an answer (${JSON.stringify(items)})`);
+	await row.click();
+	await h.eventually(() => P.evaluate(() => window.__stores.underlays.underlaysDebug().mine.length), (n) => n === 1, 'the image becomes one reference image of mine');
+	const mine = (await P.evaluate(() => window.__stores.underlays.underlaysDebug())).mine[0];
+	h.check(mine.mode === 'ground' && Math.abs(mine.position[1]) < 0.01 && mine.shared === false && mine.name === 'floor-plan', `on the ground, local, named after the file (${JSON.stringify({ m: mine.mode, p: mine.position, s: mine.shared, n: mine.name })})`);
+	h.check(Math.abs(mine.position[0]) < 0.01 && Math.abs(mine.position[2]) < 0.01, '...under the point the view orbits around');
+	h.check(mine.px[0] === 64 && mine.px[1] === 32, `...keeping the image's aspect (${mine.px})`);
+	h.check(await P.locator('#underlay-window').isVisible(), 'the Reference images window opens');
+	await P.waitForTimeout(400);
+	let L = await layer(P);
+	h.check(L.found && L.meshes.length === 1 && L.meshes[0].visible, `one plane in the reference layer (${JSON.stringify(L)})`);
+	h.check(!L.inObjects, 'nothing of it under sceneObjects (never synced, saved or exported)');
+	h.check(L.meshes[0].layer === 1 << 30, `...on the editor helper layer only (mask ${L.meshes[0].layer})`);
+
+	// ---- 2. locked and unpickable: a ray THROUGH it finds nothing, a click selects nothing ---------
+	const ray = await P.evaluate(() => {
+		const s = window.__stores;
+		const get = (st) => { let v; st.subscribe((x) => (v = x))(); return v; };
+		const mesh = get(s.globalScene).getObjectByName('reference-underlays').children[0];
+		const rc = new s.THREE.Raycaster(new s.THREE.Vector3(0, 5, 0), new s.THREE.Vector3(0, -1, 0));
+		const twin = new s.THREE.Mesh(mesh.geometry, mesh.material);
+		twin.position.copy(mesh.position);
+		twin.quaternion.copy(mesh.quaternion);
+		twin.scale.copy(mesh.scale);
+		twin.updateMatrixWorld(true);
+		return { real: rc.intersectObject(mesh).length, twin: rc.intersectObject(twin).length };
+	});
+	h.check(ray.twin === 1 && ray.real === 0, `a ray through it hits an ordinary plane of the same shape, not the underlay (${JSON.stringify(ray)})`);
+	await P.evaluate(() => window.__stores.objectActions.applySelectionSet([]));
+	const canvasBox = await P.evaluate(() => {
+		let el;
+		window.__stores.globalRenderer.subscribe((r) => (el = r.domElement))();
+		const b = el.getBoundingClientRect();
+		return { x: b.x, y: b.y, width: b.width, height: b.height };
+	});
+	await P.mouse.click(canvasBox.x + canvasBox.width / 2, canvasBox.y + canvasBox.height / 2);
+	await P.waitForTimeout(400);
+	h.check((await P.evaluate(store('selectedObjects'))).length === 0, 'a click on it selects nothing');
+
+	// ---- 3. the opacity slider drives the material --------------------------------------------------
+	await P.locator('#underlay-window [data-ul="opacity"] input[type="range"]').fill('1');
+	await P.waitForTimeout(300);
+	L = await layer(P);
+	h.check(Math.abs(L.meshes[0].opacity - 1) < 0.01, `opacity 100% reaches the plane (${L.meshes[0].opacity})`);
+	await P.locator('#underlay-window [data-ul="opacity"] input[type="range"]').fill('0.3');
+	await P.waitForTimeout(300);
+	L = await layer(P);
+	h.check(Math.abs(L.meshes[0].opacity - 0.3) < 0.01, `opacity 30% reaches the plane (${L.meshes[0].opacity})`);
+	await P.locator('#underlay-window [data-ul="opacity"] input[type="range"]').fill('1');
+	await P.waitForTimeout(300);
+
+	// ---- 4. the editor sees it; the thumbnail does not (counterfactual on one frame) ---------------
+	const px = await centrePixels(P);
+	h.check(reddish(px.live), `the live editor render shows the image at the centre (${px.live})`);
+	h.check(!reddish(px.thumb), `the viewport thumbnail leaves it out (${px.thumb})`);
+
+	// ---- 5. hidden in Play ---------------------------------------------------------------------------
+	await P.mouse.move(700, 450);
+	await P.keyboard.press('Control+Enter');
+	for (let i = 0; i < 40 && (await P.evaluate(store('isLocked'))) !== true; i++) await P.waitForTimeout(100);
+	h.check((await P.evaluate(store('isLocked'))) === true, 'Ctrl+Enter enters Play');
+	await P.waitForTimeout(300);
+	L = await layer(P);
+	h.check(L.meshes.length === 1 && !L.meshes[0].visible, 'in Play the plane is hidden');
+	h.check(!(await P.locator('#underlay-window').isVisible()), '...and so is its window');
+	await h.leavePlay(A);
+	await P.waitForTimeout(300);
+	L = await layer(P);
+	h.check(L.meshes[0].visible, 'back in the editor it shows again');
+
+	// ---- 6. never exported: the GLTF bytes and the .tpscene payload (Export/Publish) carry nothing --
+	const exp = await P.evaluate(async (id) => {
+		const s = window.__stores;
+		const get = (st) => { let v; st.subscribe((x) => (v = x))(); return v; };
+		const bytes = await s.fileHandler.gltfBytesFor([get(s.objectsGroup)], { binary: false });
+		const gltf = typeof bytes === 'string' ? bytes : bytes instanceof ArrayBuffer || ArrayBuffer.isView(bytes) ? new TextDecoder().decode(bytes) : JSON.stringify(bytes);
+		const payload = JSON.stringify(await s.sessions.buildSessionPayload('underlay-check'));
+		return { gltf: gltf.length, gltfHit: gltf.includes('underlay') || gltf.includes(id), payload: payload.length, payloadHit: payload.includes(id) || payload.includes('floor-plan') || payload.includes('reference-underlays') };
+	}, mine.id);
+	h.check(exp.payload > 0 && !exp.payloadHit, `the .tpscene payload holds no reference image (${exp.payload} chars)`);
+	h.check(!exp.gltfHit, `the GLTF export holds none (${exp.gltf} chars)`);
+
+	// ---- 7. a peer: nothing until Share; then read-only, following the owner; unshare takes it back --
+	const B = await h.setupPageQuiet(browser, 'B', [A], { context: { viewport: { width: 1280, height: 800 } } });
+	const Q = B.page;
+	await h.connect(B, A);
+	const theirs = () => Q.evaluate(() => Object.values(window.__stores.underlays.underlaysDebug().theirs).flat());
+	h.check((await theirs()).length === 0 && (await layer(Q)).meshes.length === 0, 'B sees nothing of A\'s local reference image');
+	await P.locator('#underlay-window [data-ul="share"]').check();
+	await h.eventually(theirs, (l) => l.length === 1 && l[0].id === mine.id, 'A ticks Share with session: B has the row', 15000);
+	await h.eventually(() => layer(Q), (l) => l.meshes.length === 1 && l.meshes[0].visible && l.meshes[0].owner === A.id, 'B draws the plane, owned by A');
+	h.check(!(await layer(Q)).inObjects, '...outside B\'s sceneObjects too');
+	await Q.evaluate(() => window.__stores.underlays.underlayWindowOpen.set(true));
+	await Q.waitForTimeout(400);
+	const bRow = Q.locator(`#underlay-window [data-underlay="${mine.id}"]`);
+	h.check((await bRow.locator('[data-ul="from"]').count()) === 1 && (await bRow.locator('[data-ul="opacity"]').count()) === 0, 'B\'s window lists it read-only (no controls)');
+	await P.locator('#underlay-window [data-ul="opacity"] input[type="range"]').fill('0.4');
+	await h.eventually(() => layer(Q), (l) => l.meshes.length === 1 && Math.abs(l.meshes[0].opacity - 0.4) < 0.01, 'A moves the opacity: B follows');
+	// one writer per row: B's own edit call on A's row is a no-op (it is not B's), nothing reaches A
+	await Q.evaluate((id) => window.__stores.underlays.updateUnderlay(id, { opacity: 0.9 }), mine.id);
+	await P.waitForTimeout(600);
+	h.check(Math.abs((await layer(P)).meshes[0].opacity - 0.4) < 0.01, 'B cannot edit A\'s row (owner-only writer)');
+	await P.locator('#underlay-window [data-ul="share"]').uncheck();
+	await h.eventually(theirs, (l) => l.length === 0, 'A unticks Share: B drops the row');
+	await h.eventually(() => layer(Q), (l) => l.meshes.length === 0, '...and the plane');
+	h.check((await layer(P)).meshes.length === 1, 'A keeps it');
+
+	// ---- 8. share again (A's reload below re-shares it: a reload is not an unshare), then B leaves ---
+	await P.locator('#underlay-window [data-ul="share"]').check();
+	await h.eventually(theirs, (l) => l.length === 1, 'shared again: B has it');
+	await h.closePeer(B);
+	await P.waitForTimeout(1500);
+
+	// ---- 9. A reloads: the image is kept on this device, per scene ---------------------------------
+	await P.waitForTimeout(500); // the idb write is debounced
+	await h.freshReload(A);
+	await h.answerRestore(A);
+	// a reload is a new peer: the id the joiner below dials is the new one
+	await P.waitForFunction(() => new Promise((r) => window.__stores.peers.subscribe((p) => r(!!p?.peer?.id))()), null, { timeout: 30000 });
+	A.id = await P.evaluate(() => new Promise((r) => window.__stores.peers.subscribe((p) => r(p?.peer?.id))()));
+	await h.eventually(() => P.evaluate(() => window.__stores.underlays.underlaysDebug()), (d) => d.loaded && d.mine.length === 1 && d.mine[0].id === mine.id && Math.abs(d.mine[0].opacity - 0.4) < 0.01, 'after a reload A still has the image (opacity kept)');
+	await h.eventually(() => layer(P), (l) => l.meshes.length === 1 && l.meshes[0].visible, '...drawn again');
+
+	// ---- 10. a joiner arriving after the share gets it from the full-state reply ------------------
+	const C = await h.setupPageQuiet(browser, 'C', [A], { context: { viewport: { width: 1280, height: 800 } } });
+	await h.connect(C, A);
+	await h.eventually(() => C.page.evaluate(() => Object.values(window.__stores.underlays.underlaysDebug().theirs).flat().length), (n) => n === 1, 'a joiner gets the shared image from the full-state reply', 15000);
+	await h.eventually(() => layer(C.page), (l) => l.meshes.length === 1, '...and draws it');
+	// removing it on A takes it away from the joiner
+	await P.evaluate(() => window.__stores.underlays.underlayWindowOpen.set(true));
+	await P.waitForTimeout(400);
+	await P.locator('#underlay-window [data-ul="remove"]').click();
+	await h.eventually(() => layer(C.page), (l) => l.meshes.length === 0, 'A removes it: gone for the joiner');
+	h.check((await layer(P)).meshes.length === 0, '...and for A');
+
+	await h.finish(browser);
+});
diff --git a/tests/unit/phoneBar.test.js b/tests/unit/phoneBar.test.js
index cf14a21b6..4f1a7050f 100644
--- a/tests/unit/phoneBar.test.js
+++ b/tests/unit/phoneBar.test.js
@@ -28,7 +28,7 @@ describe('phoneBar', () => {
 	it('the catalog: More ▸ Windows / Edit / Tools & View, every one placeable', () => {
 		expect(WINDOW_ITEMS.slice(0, 5)).toEqual(['play', 'add', 'more', 'objects', 'stats']);
 		expect(EDIT_ITEMS).toEqual(['inspect', 'move', 'rotate', 'scale', 'undo', 'redo', 'multiselect', 'interact']);
-		expect(VIEW_ITEMS).toEqual(['tools', 'focus', 'budget']);
+		expect(VIEW_ITEMS).toEqual(['tools', 'focus', 'budget', 'playhere']); // 60 Q1: + Play here
 		expect(new Set(BAR_CATALOG).size).toBe(BAR_CATALOG.length);
 	});
 
diff --git a/tests/unit/playHere.test.js b/tests/unit/playHere.test.js
new file mode 100644
index 000000000..f15cead1b
--- /dev/null
+++ b/tests/unit/playHere.test.js
@@ -0,0 +1,130 @@
+// @ts-nocheck — plain fixture scenes
+// 60 Q1: Play here — where the player lands. The ray straight down from the editor camera through
+// a real three scene (boxes, a hidden box, a sensor, water, a reference image, the physics ground
+// plane), the heading of the view, and the fallbacks: the scene's spawn, then the camera's own eye.
+import { describe, it, expect } from 'vitest';
+import * as THREE from 'three';
+import { playHereSpawnFrom, headingOf, surfaceBelowIn, notGround } from '../../src/lib/playHereCore.js';
+
+const EYE = 1.7;
+const GROUND_ON = { enabled: true, height: 0 };
+const GROUND_OFF = { enabled: false, height: 0 };
+
+/** a box whose top face sits at `top`, centred on (x, z), `size` wide */
+function box(x, z, top, size = 2, userData = {}) {
+	const mesh = new THREE.Mesh(new THREE.BoxGeometry(size, 1, size), new THREE.MeshBasicMaterial());
+	mesh.position.set(x, top - 0.5, z);
+	Object.assign(mesh.userData, userData);
+	return mesh;
+}
+function scene(...children) {
+	const group = new THREE.Group();
+	group.name = 'sceneObjects';
+	for (const c of children) group.add(c);
+	return group;
+}
+const below = (root, ground) => (eye) => surfaceBelowIn(root, eye, ground);
+
+describe('surfaceBelowIn (the spawn raycast)', () => {
+	it('lands on the first surface straight under the eye — the roof over the floor', () => {
+		const root = scene(box(0, 0, 1), box(0, 0, 4, 1));
+		expect(surfaceBelowIn(root, [0, 10, 0], GROUND_ON)).toBeCloseTo(4);
+		// beside the tall box, the low one
+		expect(surfaceBelowIn(root, [0.8, 10, 0.8], GROUND_ON)).toBeCloseTo(1);
+	});
+	it('falls through to the physics ground plane, and not when it is off', () => {
+		const root = scene(box(0, 0, 1));
+		expect(surfaceBelowIn(root, [20, 10, 20], GROUND_ON)).toBe(0);
+		expect(surfaceBelowIn(root, [20, 10, 20], GROUND_OFF)).toBeNull();
+		expect(surfaceBelowIn(null, [0, 3, 0], { enabled: true, height: 2 })).toBe(2);
+	});
+	it('a ground plane ABOVE the eye is not under it', () => {
+		expect(surfaceBelowIn(scene(), [0, 1, 0], { enabled: true, height: 2 })).toBeNull();
+	});
+	it('a surface above the eye is not under it (inside a building you stand on its floor)', () => {
+		const root = scene(box(0, 0, 0.5, 6), box(0, 0, 5, 6));
+		expect(surfaceBelowIn(root, [0, 3, 0], GROUND_ON)).toBeCloseTo(0.5);
+	});
+	it('skips what a player cannot stand on: hidden, sensors, water, reference images', () => {
+		const hidden = box(0, 0, 3);
+		hidden.visible = false;
+		const hiddenParent = new THREE.Group();
+		hiddenParent.visible = false;
+		hiddenParent.add(box(0, 0, 3.5));
+		const root = scene(
+			box(0, 0, 1),
+			hidden,
+			hiddenParent,
+			box(0, 0, 4, 2, { physics: { sensor: true } }),
+			box(0, 0, 5, 2, { water: { kind: 'surface' } }),
+			box(0, 0, 6, 2, { underlay: true })
+		);
+		expect(surfaceBelowIn(root, [0, 10, 0], GROUND_ON)).toBeCloseTo(1);
+		expect(notGround(hiddenParent.children[0], root)).toBe(true);
+		expect(notGround(root.children[0], root)).toBe(false);
+	});
+	it('only meshes count (a line or points under the camera is not a floor)', () => {
+		const line = new THREE.Line(new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(-1, 3, 0), new THREE.Vector3(1, 3, 0)]));
+		const root = scene(line);
+		expect(surfaceBelowIn(root, [0, 10, 0], GROUND_ON)).toBe(0);
+	});
+	it('reads world positions through parents (a group moved up carries its floor)', () => {
+		const parent = new THREE.Group();
+		parent.position.set(0, 3, 0);
+		parent.add(box(0, 0, 1));
+		expect(surfaceBelowIn(scene(parent), [0, 10, 0], GROUND_ON)).toBeCloseTo(4);
+	});
+});
+
+describe('playHereSpawnFrom', () => {
+	const spawn = { position: [5, 0, -5], yaw: 1.2 };
+	it('stands the feet on the surface under the eye, facing the view', () => {
+		const root = scene(box(30, -40, 2));
+		const s = playHereSpawnFrom({ eye: [30, 12, -40], yaw: 0.5 }, below(root, GROUND_ON), spawn, EYE);
+		expect(s.source).toBe('surface');
+		expect(s.position[0]).toBe(30);
+		expect(s.position[1]).toBeCloseTo(2);
+		expect(s.position[2]).toBe(-40);
+		expect(s.yaw).toBe(0.5);
+	});
+	it('nothing under the camera → the scene spawn, with its own facing', () => {
+		const s = playHereSpawnFrom({ eye: [30, 12, -40], yaw: 0.5 }, below(scene(), GROUND_OFF), spawn, EYE);
+		expect(s).toEqual({ position: [5, 0, -5], yaw: 1.2, source: 'spawn' });
+	});
+	it('below the ground plane → the scene spawn too', () => {
+		const s = playHereSpawnFrom({ eye: [0, -3, 0], yaw: 0 }, below(scene(), GROUND_ON), spawn, EYE);
+		expect(s.source).toBe('spawn');
+	});
+	it('no surface and no spawn → the eye stays where the camera is', () => {
+		const s = playHereSpawnFrom({ eye: [1, 4, 2], yaw: -0.3 }, below(scene(), GROUND_OFF), null, EYE);
+		expect(s.source).toBe('camera');
+		expect(s.position[1] + EYE).toBeCloseTo(4);
+		expect(s.yaw).toBe(-0.3);
+	});
+	it('a VR head height is the eye height there', () => {
+		const s = playHereSpawnFrom({ eye: [0, 5, 0], yaw: 0 }, () => null, null, 1.4);
+		expect(s.position[1]).toBeCloseTo(3.6);
+	});
+	it('a non-finite heading faces −Z rather than poisoning the camera', () => {
+		const s = playHereSpawnFrom({ eye: [0, 5, 0], yaw: NaN }, () => 0, null, EYE);
+		expect(s.yaw).toBe(0);
+	});
+});
+
+describe('headingOf', () => {
+	it('is rotation.y for a level view', () => {
+		const q = new THREE.Quaternion().setFromEuler(new THREE.Euler(0, 0.8, 0, 'YXZ'));
+		expect(headingOf(q)).toBeCloseTo(0.8);
+	});
+	it('keeps the heading of an editor camera tilted down (the usual three-quarter view)', () => {
+		const cam = new THREE.PerspectiveCamera();
+		cam.position.set(-10, 10, 10);
+		cam.lookAt(0, 0, 0);
+		// looking toward +X/−Z from (-10, _, 10): the heading is −45°
+		expect(headingOf(cam.quaternion)).toBeCloseTo(-Math.PI / 4);
+	});
+	it('stays defined looking straight down', () => {
+		const q = new THREE.Quaternion().setFromEuler(new THREE.Euler(-Math.PI / 2, 0.6, 0, 'YXZ'));
+		expect(headingOf(q)).toBeCloseTo(0.6, 5);
+	});
+});
diff --git a/tests/unit/underlays.test.js b/tests/unit/underlays.test.js
new file mode 100644
index 000000000..16fa0415d
--- /dev/null
+++ b/tests/unit/underlays.test.js
@@ -0,0 +1,57 @@
+// @ts-nocheck — plain records
+// 60 Q5: the reference-image record's ONE normalizer (idb read, the wire, every edit) and the plane's
+// height from the image's aspect.
+import { describe, it, expect } from 'vitest';
+import { normalizeUnderlay, underlayHeight, DEFAULT_OPACITY } from '../../src/lib/underlays.js';
+
+describe('normalizeUnderlay', () => {
+	it('refuses what is not an underlay', () => {
+		expect(normalizeUnderlay(null)).toBe(null);
+		expect(normalizeUnderlay({})).toBe(null);
+		expect(normalizeUnderlay({ id: '' })).toBe(null);
+		expect(normalizeUnderlay({ id: 'x'.repeat(65) })).toBe(null);
+	});
+	it('fills defaults and drops unknown fields', () => {
+		const u = normalizeUnderlay({ id: 'a', evil: 1, owner: 'someone' });
+		expect(u).toEqual({
+			id: 'a',
+			name: 'Reference',
+			px: [1, 1],
+			mode: 'ground',
+			position: [0, 0, 0],
+			quaternion: [0, 0, 0, 1],
+			width: 10,
+			opacity: DEFAULT_OPACITY,
+			visible: true,
+			shared: false,
+			scene: '',
+			at: 0
+		});
+	});
+	it('clamps every number and rejects malformed vectors', () => {
+		const u = normalizeUnderlay({ id: 'a', width: 1e9, opacity: 5, position: [1, 'x', 2], quaternion: [0, 0, 0], px: [0, -3] });
+		expect(u.width).toBe(10000);
+		expect(u.opacity).toBe(1);
+		expect(u.position).toEqual([0, 0, 0]);
+		expect(u.quaternion).toEqual([0, 0, 0, 1]);
+		expect(u.px).toEqual([1, 1]);
+		expect(normalizeUnderlay({ id: 'a', opacity: 0 }).opacity).toBe(0.02);
+		expect(normalizeUnderlay({ id: 'a', width: -4 }).width).toBe(0.01);
+	});
+	it('keeps only an image data URL as the source', () => {
+		expect(normalizeUnderlay({ id: 'a', src: 'data:image/png;base64,AAAA' }).src).toBe('data:image/png;base64,AAAA');
+		expect('src' in normalizeUnderlay({ id: 'a', src: 'javascript:alert(1)' })).toBe(false);
+		expect('src' in normalizeUnderlay({ id: 'a', src: 'https://example.org/x.png' })).toBe(false);
+	});
+	it('only "view" and "ground" placements exist', () => {
+		expect(normalizeUnderlay({ id: 'a', mode: 'view' }).mode).toBe('view');
+		expect(normalizeUnderlay({ id: 'a', mode: 'ceiling' }).mode).toBe('ground');
+	});
+});
+
+describe('underlayHeight', () => {
+	it('keeps the image aspect', () => {
+		expect(underlayHeight({ width: 10, px: [64, 32] })).toBe(5);
+		expect(underlayHeight({ width: 4, px: [100, 300] })).toBe(12);
+	});
+});