Add back button on character creation page

src/routes/(app)/game/new/+page.svelte

@@ -113,7 +113,7 @@
         {#if step === 1}
             <Game bind:title bind:gameContext onNext={nextStep} />
         {:else}
-            <Character bind:name={characterName} bind:description={characterDescription} onSubmit={submit} />
+            <Character bind:name={characterName} bind:description={characterDescription} onSubmit={submit} onBack={() => step = 1} />
         {/if}
     </main>
 </div>

src/routes/(app)/game/new/Character.svelte

@@ -1,5 +1,5 @@
 <script>
-    let { name = $bindable(""), description = $bindable(""), onSubmit } = $props();
+    let { name = $bindable(""), description = $bindable(""), onSubmit, onBack } = $props();
 
     const autofocus = (node) => { node.focus(); };
 </script>
@@ -23,7 +23,15 @@
         ></textarea>
     </label>
 
-    <button type="submit">Begin Adventure</button>
+    <div class="form-actions">
+        <button type="button" onclick={onBack}>
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M19 12H5M12 5l-7 7 7 7"/>
+            </svg>
+            Back
+        </button>
+        <button type="submit">Begin Adventure</button>
+    </div>
 </form>
 </div>
 
@@ -58,8 +66,29 @@
         font-size: 1rem;
     }
 
+    .form-actions {
+        display: flex;
+        gap: 0.75rem;
+    }
+
+    .form-actions button {
+        width: auto;
+    }
+
+    .form-actions button:first-child {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        flex-shrink: 0;
+    }
+
+    .form-actions button[type="submit"] {
+        flex: 1;
+    }
+
     @media (max-width: 700px) {
         .standardForm { padding: 1.75rem; }
         textarea { min-height: 160px; }
+        .form-actions { flex-direction: column-reverse; }
     }
 </style>