feat: mobile UX polish with haptics and reduced motion

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

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>