Improve UX with merged run view, method badges, grouped encounters, and mobile nav

Merges the run dashboard into the encounters page as a unified view at /runs/:runId,
adds encounter method grouping in the modal and badges on route rows, improves the
home page with recent runs, adds mobile hamburger nav, and polishes empty states.

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

frontend/src/components/EncounterMethodBadge.tsx

@@ -0,0 +1,99 @@
+const METHOD_CONFIG: Record<string, { label: string; color: string }> = {
+  starter: {
+    label: 'Starter',
+    color:
+      'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/40 dark:text-yellow-300',
+  },
+  gift: {
+    label: 'Gift',
+    color: 'bg-pink-100 text-pink-800 dark:bg-pink-900/40 dark:text-pink-300',
+  },
+  fossil: {
+    label: 'Fossil',
+    color:
+      'bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300',
+  },
+  trade: {
+    label: 'Trade',
+    color:
+      'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-300',
+  },
+  walk: {
+    label: 'Grass',
+    color:
+      'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300',
+  },
+  headbutt: {
+    label: 'Headbutt',
+    color: 'bg-lime-100 text-lime-800 dark:bg-lime-900/40 dark:text-lime-300',
+  },
+  surf: {
+    label: 'Surfing',
+    color: 'bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300',
+  },
+  'rock-smash': {
+    label: 'Rock Smash',
+    color:
+      'bg-orange-100 text-orange-800 dark:bg-orange-900/40 dark:text-orange-300',
+  },
+  'old-rod': {
+    label: 'Old Rod',
+    color: 'bg-cyan-100 text-cyan-800 dark:bg-cyan-900/40 dark:text-cyan-300',
+  },
+  'good-rod': {
+    label: 'Good Rod',
+    color: 'bg-sky-100 text-sky-800 dark:bg-sky-900/40 dark:text-sky-300',
+  },
+  'super-rod': {
+    label: 'Super Rod',
+    color:
+      'bg-indigo-100 text-indigo-800 dark:bg-indigo-900/40 dark:text-indigo-300',
+  },
+}
+
+/** Display order for encounter method groups */
+export const METHOD_ORDER = [
+  'starter',
+  'gift',
+  'fossil',
+  'trade',
+  'walk',
+  'headbutt',
+  'surf',
+  'rock-smash',
+  'old-rod',
+  'good-rod',
+  'super-rod',
+]
+
+export function getMethodLabel(method: string): string {
+  return (
+    METHOD_CONFIG[method]?.label ??
+    method
+      .replace(/-/g, ' ')
+      .replace(/\b\w/g, (c) => c.toUpperCase())
+  )
+}
+
+export function getMethodColor(method: string): string {
+  return METHOD_CONFIG[method]?.color ?? 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300'
+}
+
+export function EncounterMethodBadge({
+  method,
+  size = 'sm',
+}: {
+  method: string
+  size?: 'sm' | 'xs'
+}) {
+  const config = METHOD_CONFIG[method]
+  if (!config) return null
+  const sizeClass = size === 'xs' ? 'text-[8px] px-1 py-0' : 'text-[9px] px-1.5 py-0.5'
+  return (
+    <span
+      className={`${sizeClass} font-medium rounded-full whitespace-nowrap ${config.color}`}
+    >
+      {config.label}
+    </span>
+  )
+}