Add post-game completion rule option

Add postGameCompletion toggle to nuzlocke rules so players can indicate
whether a run ends after the Champion or continues into post-game. Adds
a new "Completion" category section in rules configuration with a green
badge color.

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

frontend/src/components/RuleBadges.tsx

@@ -25,7 +25,9 @@ export function RuleBadges({ rules }: RuleBadgesProps) {
           className={`px-2 py-0.5 rounded-full text-xs font-medium ${
             def.category === 'core'
               ? 'bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300'
-              : 'bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300'
+              : def.category === 'completion'
+                ? 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300'
+                : 'bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300'
           }`}
         >
           {def.name}

frontend/src/components/RulesConfiguration.tsx

@@ -22,6 +22,9 @@ export function RulesConfiguration({
   const difficultyRules = visibleRules.filter(
     (r) => r.category === 'difficulty'
   )
+  const completionRules = visibleRules.filter(
+    (r) => r.category === 'completion'
+  )
 
   const handleRuleChange = (key: keyof NuzlockeRules, value: boolean) => {
     onChange({ ...rules, [key]: value })
@@ -98,6 +101,30 @@ export function RulesConfiguration({
           ))}
         </div>
       </div>
+
+      {completionRules.length > 0 && (
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow">
+          <div className="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
+            <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">
+              Completion
+            </h3>
+            <p className="text-sm text-gray-500 dark:text-gray-400">
+              When is the run considered complete
+            </p>
+          </div>
+          <div className="px-4">
+            {completionRules.map((rule) => (
+              <RuleToggle
+                key={rule.key}
+                name={rule.name}
+                description={rule.description}
+                enabled={rules[rule.key]}
+                onChange={(value) => handleRuleChange(rule.key, value)}
+              />
+            ))}
+          </div>
+        </div>
+      )}
     </div>
   )
 }

frontend/src/types/rules.ts

@@ -11,6 +11,9 @@ export interface NuzlockeRules {
   hardcoreMode: boolean
   levelCaps: boolean
   setModeOnly: boolean
+
+  // Completion
+  postGameCompletion: boolean
 }
 
 export const DEFAULT_RULES: NuzlockeRules = {
@@ -26,13 +29,16 @@ export const DEFAULT_RULES: NuzlockeRules = {
   hardcoreMode: false,
   levelCaps: false,
   setModeOnly: false,
+
+  // Completion
+  postGameCompletion: false,
 }
 
 export interface RuleDefinition {
   key: keyof NuzlockeRules
   name: string
   description: string
-  category: 'core' | 'difficulty'
+  category: 'core' | 'difficulty' | 'completion'
 }
 
 export const RULE_DEFINITIONS: RuleDefinition[] = [
@@ -102,4 +108,13 @@ export const RULE_DEFINITIONS: RuleDefinition[] = [
       'The game must be played in "Set" battle style, meaning you cannot switch Pokémon after knocking out an opponent.',
     category: 'difficulty',
   },
+
+  // Completion
+  {
+    key: 'postGameCompletion',
+    name: 'Post-Game Completion',
+    description:
+      'The run continues into post-game content instead of ending after the Champion is defeated.',
+    category: 'completion',
+  },
 ]