bitmap 3D PFP: apply 4 patterns lifted from THREE-JS-NIPPLEJS-REFERENCES

Apply the tier-1 findings from the curated repo list:

1. Hubs-Foundation/hubs -- nipplejs hardcodes `z-index: 999` on its
   rendered UI elements as an inline style; this steals clicks from
   any modal/dialog/overlay layered above the canvas. Mirror Hubs'
   workaround: `el.style.removeProperty('z-index')` immediately after
   each create(). Helper `stripNippleZIndex(mgr)` factored so both
   sticks get it.

2. rune/rune -- nipplejs issue #64: a touchcancel (system gesture,
   incoming call, alert dialog) can swallow the touchend and leave
   the stick partially active. Cached vector freezes, camera keeps
   moving. Hook document.touchcancel to zero state AND
   destroy+recreate both sticks. More robust than relying on the
   visibilitychange path alone.

3. needle-tools/needle-engine-samples -- the asymmetric static-left /
   dynamic-right pattern. Movement stick stays at fixed position
   (muscle memory: walking is what the brain does on autopilot).
   Look stick now `mode: 'dynamic'` -- joystick appears under the
   thumb anywhere in the right zone. Mirrors console FPS ergonomics
   (left analogue is fixed by the controller body; right analogue is
   the active-aim input).

4. runeharlyk/SpotMicroESP32-Leika -- module-scope lifecycle pattern.
   Already in place structurally: our init / destroy live in the
   render-loop closure (a function-level scope, NOT in Angular's
   class-method lifecycle), so the framework's CD can't lose track
   of them. No code change needed; documenting the alignment here
   so a future refactor doesn't reintroduce the anti-pattern.

Source list: /Users/johanneshoppe/Work/ordpool/THREE-JS-NIPPLEJS-REFERENCES.md

Author: hans-crypto

frontend/src/app/components/_ordpool/digital-artifact-viewer/bitmap-viewer/bitmap-3d-renderer.component.ts

@@ -530,18 +530,30 @@ export class Bitmap3dRendererComponent implements AfterViewInit, OnDestroy {
     const LOOK_DEADZONE = 0.15;
     const INVERT_LOOK_Y = false;
 
+    // Helper to strip nipplejs's hardcoded `z-index: 999` inline style off
+    // the rendered UI so overlay buttons / dialogs stay clickable above
+    // the joystick visuals. Pattern lifted from Hubs-Foundation/hubs
+    // (src/components/virtual-gamepad-controls.js). Applied right after
+    // each stick is created.
+    const stripNippleZIndex = (mgr: any) => {
+      try {
+        const el = mgr?.[0]?.ui?.el;
+        if (el?.style) el.style.removeProperty('z-index');
+      } catch { /* noop */ }
+    };
+
     const initJoysticks = async () => {
       if (nippleL && nippleR) return;
       const { default: nipplejs } = await import('nipplejs');
-      // Left stick: movement. Centered in the left zone div (50% across
-      // the zone from each edge).
+      // Left stick: movement, STATIC -- fixed origin, muscle memory.
       const moveStick: any = (nipplejs as any).create({
         zone: this.joyZoneL.nativeElement,
         mode: 'static',
         position: { left: '50%', top: '50%' },
         color: '#FF9900',
         size: 120,
       });
+      stripNippleZIndex(moveStick);
       moveStick.on('move', (_e: unknown, d: any) => {
         // nipplejs vector y is positive UP (screen-inverted from CSS y).
         joy.right = d.vector.x;
@@ -550,14 +562,16 @@ export class Bitmap3dRendererComponent implements AfterViewInit, OnDestroy {
       moveStick.on('end', () => { joy.fwd = 0; joy.right = 0; });
       nippleL = moveStick;
 
-      // Right stick: look.
+      // Right stick: look, DYNAMIC -- appears under the thumb anywhere in
+      // the right zone. Console-FPS ergonomics: fixed move, free-aim look.
+      // Pattern from needle-tools/needle-engine-samples FirstPersonController.
       const lookStick: any = (nipplejs as any).create({
         zone: this.joyZoneR.nativeElement,
-        mode: 'static',
-        position: { left: '50%', top: '50%' },
+        mode: 'dynamic',
         color: '#FF9900',
         size: 120,
       });
+      stripNippleZIndex(lookStick);
       lookStick.on('move', (_e: unknown, d: any) => {
         look.x = d.vector.x;
         look.y = d.vector.y;
@@ -577,6 +591,24 @@ export class Bitmap3dRendererComponent implements AfterViewInit, OnDestroy {
       else if (state === 'pfp') void initJoysticks();
     };
     document.addEventListener('visibilitychange', onVisibility);
+    // Touch-cancel defence (nipplejs #64): a system gesture / call /
+    // alert can swallow the touchend, leaving the stick partially active
+    // and the cached vector frozen. rune/rune (the multiplayer SDK
+    // sample) does an explicit destroy+recreate on touchcancel; we
+    // mirror that. Listen on the document so it catches cancels that
+    // happen outside the zone divs.
+    const onTouchCancel = () => {
+      // Zero cached state immediately so the camera stops moving.
+      joy.fwd = 0; joy.right = 0;
+      look.x = 0; look.y = 0;
+      // Rebuild the sticks so any partially-active internal state in
+      // nipplejs is discarded. Only when we're still in PFP.
+      if (state === 'pfp') {
+        destroyJoysticks();
+        void initJoysticks();
+      }
+    };
+    document.addEventListener('touchcancel', onTouchCancel);
 
     // Per-frame look integration (rate-of-change). Runs each rAF tick
     // while in PFP. Yaw and pitch advance proportional to stick
@@ -606,6 +638,7 @@ export class Bitmap3dRendererComponent implements AfterViewInit, OnDestroy {
       document.removeEventListener('mousemove', onMouseMove);
       renderer.domElement.removeEventListener('pointerdown', onPointerDown);
       document.removeEventListener('visibilitychange', onVisibility);
+      document.removeEventListener('touchcancel', onTouchCancel);
       destroyJoysticks();
       jumpEl.removeEventListener('touchstart', triggerJump);
       jumpEl.removeEventListener('mousedown', triggerJump);