feat: mobile UX polish with haptics and reduced motion

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

frontend/src/App.vue

@@ -20,7 +20,7 @@ onMounted(() => {
   <div class="h-[100dvh] bg-surface synthwave-grid flex flex-col relative">
     <div class="fixed inset-0 crt-overlay z-40" />
     <NavBar />
-    <main class="flex-1 min-h-0 relative z-10 overflow-y-auto">
+    <main class="flex-1 min-h-0 relative z-10 overflow-y-auto pb-14 md:pb-0">
       <RouterView />
     </main>
   </div>

frontend/src/components/NavBar.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { RouterLink } from 'vue-router'
+import { RouterLink, useRoute } from 'vue-router'
 import PixelGlove from './PixelGlove.vue'
 import { useNostr } from '../composables/useNostr'
 
 const { bot, isLoggedIn } = useNostr()
+const route = useRoute()
 const isMenuOpen = ref(false)
 
 const links = [
@@ -16,6 +17,13 @@ const links = [
   { to: '/leaderboard', label: 'RANKINGS' },
   { to: '/docs', label: 'DOCS' },
 ]
+
+const bottomNav = [
+  { to: '/join', label: 'FIGHT', icon: 'M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z' },
+  { to: '/arena', label: 'WATCH', icon: 'M15 12a3 3 0 11-6 0 3 3 0 016 0z M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z' },
+  { to: '/feed', label: 'FEED', icon: 'M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z' },
+  { to: '/leaderboard', label: 'RANKS', icon: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z' },
+]
 </script>
 
 <template>
@@ -91,4 +99,22 @@ const links = [
       </RouterLink>
     </div>
   </nav>
+
+  <!-- Mobile bottom nav -->
+  <nav class="md:hidden fixed bottom-0 left-0 right-0 z-50 border-t border-border bg-surface/95 backdrop-blur-md safe-area-bottom">
+    <div class="flex items-stretch justify-around h-14">
+      <RouterLink
+        v-for="item in bottomNav"
+        :key="item.to"
+        :to="item.to"
+        class="flex flex-col items-center justify-center gap-0.5 min-w-[56px] min-h-[44px] transition-colors"
+        :class="route.path === item.to ? 'text-neon-cyan' : 'text-text-muted'"
+      >
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path :d="item.icon" />
+        </svg>
+        <span class="text-[8px] font-display font-bold tracking-wider">{{ item.label }}</span>
+      </RouterLink>
+    </div>
+  </nav>
 </template>

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

frontend/src/style.css

@@ -186,3 +186,14 @@
 .tier-4 { color: var(--color-neon-cyan); text-shadow: 0 0 8px rgba(0, 240, 255, 0.3); }
 .tier-5 { color: var(--color-neon-purple); text-shadow: 0 0 10px rgba(184, 61, 255, 0.5); }
 .tier-6 { color: var(--color-neon-pink); text-shadow: 0 0 12px rgba(255, 45, 123, 0.6); }
+
+/* Safe area for bottom nav (iPhone notch/home indicator) */
+.safe-area-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); }
+
+/* Reduced motion: skip animations */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}