diff --git a/packages/web/src/LiveFirstPerson.svelte b/packages/web/src/LiveFirstPerson.svelte
index 66a6b3f..6e917bb 100644
--- a/packages/web/src/LiveFirstPerson.svelte
+++ b/packages/web/src/LiveFirstPerson.svelte
@@ -235,7 +235,12 @@
x={cam.x} y={cam.y} facing={cam.facing} width={960} height={400}
fx={fpFx} posOverride={actorPos} />
+
+
+
{#if canStride}
+
+
← → turn · ↑ ↓ walk
{/if}
@@ -268,4 +273,31 @@
font-size: 0.7rem;
pointer-events: none;
}
+ /* The helm: faint chevron strips along the pane's edges — always
+ * there for a thumb, louder under a pointer. */
+ .drive {
+ position: absolute;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: none;
+ border: none;
+ cursor: pointer;
+ color: rgba(233, 225, 203, 0.35);
+ font-size: 2.2rem;
+ line-height: 1;
+ padding: 0;
+ text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
+ }
+ .drive:hover {
+ color: rgba(233, 225, 203, 0.95);
+ background: linear-gradient(to right, rgba(0, 0, 0, 0.22), transparent);
+ }
+ .drive-left { left: 0; top: 15%; bottom: 15%; width: 13%; }
+ .drive-right { right: 0; top: 15%; bottom: 15%; width: 13%; }
+ .drive-right:hover { background: linear-gradient(to left, rgba(0, 0, 0, 0.22), transparent); }
+ .drive-fwd { top: 0; left: 20%; right: 20%; height: 16%; }
+ .drive-fwd:hover { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.22), transparent); }
+ .drive-back { bottom: 0; left: 20%; right: 20%; height: 15%; }
+ .drive-back:hover { background: linear-gradient(to top, rgba(0, 0, 0, 0.22), transparent); }