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/pages/Home.tsx

@@ -1,10 +1,125 @@
+import { Link } from 'react-router-dom'
+import { useRuns } from '../hooks/useRuns'
+import type { RunStatus } from '../types'
+
+const statusStyles: Record<RunStatus, string> = {
+  active:
+    'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300',
+  completed:
+    'bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300',
+  failed: 'bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300',
+}
+
 export function Home() {
+  const { data: runs, isLoading } = useRuns()
+
+  const activeRun = runs?.find((r) => r.status === 'active')
+  const recentRuns = runs?.slice(0, 5)
+
   return (
-    <div className="flex flex-col items-center justify-center min-h-screen p-8">
-      <h1 className="text-4xl font-bold mb-4">Nuzlocke Tracker</h1>
-      <p className="text-lg text-gray-600 dark:text-gray-400">
-        Track your Nuzlocke runs with ease
-      </p>
+    <div className="max-w-4xl mx-auto p-8">
+      <div className="text-center py-12">
+        <h1 className="text-4xl font-bold text-gray-900 dark:text-gray-100 mb-2">
+          Nuzlocke Tracker
+        </h1>
+        <p className="text-lg text-gray-600 dark:text-gray-400 mb-8">
+          Track your Nuzlocke runs with ease
+        </p>
+        <Link
+          to="/runs/new"
+          className="inline-block px-6 py-3 bg-blue-600 text-white rounded-lg font-medium text-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
+        >
+          Start New Run
+        </Link>
+      </div>
+
+      {isLoading && (
+        <div className="flex items-center justify-center py-8">
+          <div className="w-6 h-6 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" />
+        </div>
+      )}
+
+      {activeRun && (
+        <div className="mb-8">
+          <h2 className="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">
+            Continue Playing
+          </h2>
+          <Link
+            to={`/runs/${activeRun.id}`}
+            className="block bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-md transition-shadow p-5 border-l-4 border-green-500"
+          >
+            <div className="flex items-center justify-between">
+              <div>
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+                  {activeRun.name}
+                </h3>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Started{' '}
+                  {new Date(activeRun.startedAt).toLocaleDateString(undefined, {
+                    year: 'numeric',
+                    month: 'short',
+                    day: 'numeric',
+                  })}
+                </p>
+              </div>
+              <span className="text-blue-600 dark:text-blue-400 font-medium text-sm">
+                Resume &rarr;
+              </span>
+            </div>
+          </Link>
+        </div>
+      )}
+
+      {recentRuns && recentRuns.length > 0 && (
+        <div>
+          <div className="flex items-center justify-between mb-3">
+            <h2 className="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">
+              Recent Runs
+            </h2>
+            <Link
+              to="/runs"
+              className="text-sm text-blue-600 dark:text-blue-400 hover:underline"
+            >
+              View all
+            </Link>
+          </div>
+          <div className="space-y-2">
+            {recentRuns.map((run) => (
+              <Link
+                key={run.id}
+                to={`/runs/${run.id}`}
+                className="block bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-md transition-shadow p-4"
+              >
+                <div className="flex items-center justify-between">
+                  <div>
+                    <h3 className="font-medium text-gray-900 dark:text-gray-100">
+                      {run.name}
+                    </h3>
+                    <p className="text-xs text-gray-500 dark:text-gray-400">
+                      {new Date(run.startedAt).toLocaleDateString(undefined, {
+                        year: 'numeric',
+                        month: 'short',
+                        day: 'numeric',
+                      })}
+                    </p>
+                  </div>
+                  <span
+                    className={`px-2.5 py-0.5 rounded-full text-xs font-medium capitalize ${statusStyles[run.status]}`}
+                  >
+                    {run.status}
+                  </span>
+                </div>
+              </Link>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {runs && runs.length === 0 && (
+        <p className="text-center text-gray-500 dark:text-gray-400">
+          No runs yet. Start your first Nuzlocke challenge above!
+        </p>
+      )}
     </div>
   )
 }