feat: mobile UX polish with haptics and reduced motion

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

frontend/src/game/FightScene.ts

@@ -8,7 +8,7 @@ import { ARENA_THEMES, spriteAnims, CHALLENGE_THEMED, TIER_ULTIMATES, CREATOR_MO
 import {
   CREATOR_ULTIMATE_CHANCE, CREATOR_THEMED_MOVE_RATIO,
   CRIT_THEMED_RATIO, CHOREOGRAPHY_THEMED_RATIO, CHOREOGRAPHY_GENERIC_CUTOFF,
-  TIER_ULTIMATE_CHANCES, isPerfMode, perfParticles,
+  TIER_ULTIMATE_CHANCES, isPerfMode, perfParticles, isReducedMotion, haptic,
 } from './fight/config'
 import { spawnSparks as _spawnSparks, spawnBulletHoles as _spawnBulletHoles, spawnExhaust as _spawnExhaust } from './fight/particles'
 import { glitchRGB as _glitchRGB, scanlineGlitch as _scanlineGlitch, vhsTracking as _vhsTracking, dimensionalShift as _dimensionalShift } from './fight/effects'
@@ -168,6 +168,13 @@ export async function createFightScene(config: FightSceneConfig) {
     texFilter: 'nearest',
   })
 
+  // Wrap k.shake to support reduced motion + haptic feedback
+  const _origShake = k.shake.bind(k)
+  k.shake = ((intensity: number) => {
+    if (intensity >= 3) haptic(Math.min(100, intensity * 8))
+    if (!isReducedMotion()) _origShake(intensity)
+  }) as typeof k.shake
+
   const colorsA = getBotColors(botA.seed)
   const colorsB = getBotColors(botB.seed)
 

frontend/src/game/fight/config.ts

@@ -29,11 +29,24 @@ export function setPerfMode(on: boolean): void {
   try { localStorage.setItem(PERF_KEY, on ? '1' : '0') } catch {}
 }
 
-/** Scale a particle count down in performance mode (40%) */
+/** Scale a particle count down in performance mode (40%) or reduced motion (20%) */
 export function perfParticles(count: number): number {
+  if (_reducedMotion) return Math.max(1, Math.round(count * 0.2))
   return _perfMode ? Math.max(1, Math.round(count * 0.4)) : count
 }
 
+// --- Reduced motion ---
+const _reducedMotion = typeof window !== 'undefined'
+  ? window.matchMedia('(prefers-reduced-motion: reduce)').matches
+  : false
+
+export function isReducedMotion(): boolean { return _reducedMotion }
+
+// --- Haptic feedback ---
+export function haptic(ms: number = 50): void {
+  try { navigator?.vibrate?.(ms) } catch { /* no vibration support */ }
+}
+
 // --- Choreography selection probabilities ---
 export const CREATOR_ULTIMATE_CHANCE = 0.5          // Creator ultimate chance (non-crit); 1.0 on crits
 export const CREATOR_THEMED_MOVE_RATIO = 0.6        // Creator uses creator-themed moves 60% of the time