feat: add auth system, boss pokemon details, moves/abilities API, and run ownership

Add user authentication with login/signup/protected routes, boss pokemon
detail fields and result team tracking, moves and abilities selector
components and API, run ownership and visibility controls, and various
UI improvements across encounters, run list, and journal pages.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/pages/NewRun.tsx

@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom'
 import { GameGrid, RulesConfiguration, StepIndicator } from '../components'
 import { useGames, useGameRoutes } from '../hooks/useGames'
 import { useCreateRun, useRuns, useNamingCategories } from '../hooks/useRuns'
-import type { Game, NuzlockeRules } from '../types'
+import type { Game, NuzlockeRules, RunVisibility } from '../types'
 import { DEFAULT_RULES } from '../types'
 import { RULE_DEFINITIONS } from '../types/rules'
 
@@ -21,6 +21,7 @@ export function NewRun() {
   const [rules, setRules] = useState<NuzlockeRules>(DEFAULT_RULES)
   const [runName, setRunName] = useState('')
   const [namingScheme, setNamingScheme] = useState<string | null>(null)
+  const [visibility, setVisibility] = useState<RunVisibility>('public')
   const { data: routes } = useGameRoutes(selectedGame?.id ?? null)
 
   const hiddenRules = useMemo(() => {
@@ -46,7 +47,7 @@ export function NewRun() {
   const handleCreate = () => {
     if (!selectedGame) return
     createRun.mutate(
-      { gameId: selectedGame.id, name: runName, rules, namingScheme },
+      { gameId: selectedGame.id, name: runName, rules, namingScheme, visibility },
       { onSuccess: (data) => navigate(`/runs/${data.id}`) }
     )
   }
@@ -195,6 +196,29 @@ export function NewRun() {
               </div>
             )}
 
+            <div>
+              <label
+                htmlFor="visibility"
+                className="block text-sm font-medium text-text-secondary mb-1"
+              >
+                Visibility
+              </label>
+              <select
+                id="visibility"
+                value={visibility}
+                onChange={(e) => setVisibility(e.target.value as RunVisibility)}
+                className="w-full px-3 py-2 rounded-lg border border-border-default bg-surface-2 text-text-primary focus:outline-none focus:ring-2 focus:ring-accent-400 focus:border-transparent"
+              >
+                <option value="public">Public</option>
+                <option value="private">Private</option>
+              </select>
+              <p className="mt-1 text-xs text-text-tertiary">
+                {visibility === 'private'
+                  ? 'Only you will be able to see this run'
+                  : 'Anyone can view this run'}
+              </p>
+            </div>
+
             <div className="border-t border-border-default pt-4">
               <h3 className="text-sm font-medium text-text-tertiary mb-2">Summary</h3>
               <dl className="space-y-1 text-sm">
@@ -223,6 +247,10 @@ export function NewRun() {
                       : 'None'}
                   </dd>
                 </div>
+                <div className="flex justify-between">
+                  <dt className="text-text-tertiary">Visibility</dt>
+                  <dd className="text-text-primary font-medium capitalize">{visibility}</dd>
+                </div>
               </dl>
             </div>
           </div>