prologue: wire Prologue tab into App, add prologue CSS

src/App.jsx

@@ -1,8 +1,10 @@
 import { useState, useEffect } from 'react'
 import { generateToken, loadState, saveState } from './api.js'
 import { createState } from './gameState.js'
+import { BACKGROUNDS } from './constants.js'
 import Ledger from './screens/Ledger.jsx'
 import Map from './screens/Map.jsx'
+import Prologue from './screens/Prologue.jsx'
 import './App.css'
 
 const TOKEN_KEY = 'otivm_token'
@@ -11,7 +13,7 @@ export default function App() {
   const [state, setState] = useState(null)
   const [token, setToken] = useState(null)
   const [loading, setLoading] = useState(true)
-  const [screen, setScreen] = useState('ledger')
+  const [screen, setScreen] = useState('prologue')
 
   useEffect(() => {
     async function bootstrap() {
@@ -24,10 +26,13 @@ export default function App() {
       const saved = await loadState(tok)
       if (saved) {
         setState(saved)
+        // If background already chosen, open on ledger
+        setScreen(saved.background_id ? 'ledger' : 'prologue')
       } else {
         const fresh = createState(tok)
         setState(fresh)
         await saveState(tok, fresh)
+        setScreen('prologue')
       }
       setLoading(false)
     }
@@ -39,6 +44,21 @@ export default function App() {
     await saveState(token, newState)
   }
 
+  // Called from Prologue when player confirms a background.
+  // Seeds background_id into state, saves, switches to Ledger.
+  async function onSelectBackground(backgroundId) {
+    const bg = BACKGROUNDS.find(b => b.id === backgroundId)
+    if (!bg) return
+    const updated = {
+      ...state,
+      background_id: backgroundId,
+      den: bg.starting_den,
+    }
+    setState(updated)
+    await saveState(token, updated)
+    setScreen('ledger')
+  }
+
   // Session abandonment — forward-looking lifecycle handler.
   // Does not delete the old save. Appends a terminal event so the record
   // is complete. The old save becomes a historical artefact on disk.
@@ -62,7 +82,7 @@ export default function App() {
     const fresh = createState(newTok)
     setState(fresh)
     await saveState(newTok, fresh)
-    setScreen('ledger')
+    setScreen('prologue')
   }
 
   if (loading) {
@@ -78,6 +98,12 @@ export default function App() {
       <nav className="main-nav">
         <span className="nav-title">OTIVM</span>
         <div className="nav-links">
+          <button
+            className={`nav-btn${screen === 'prologue' ? ' active' : ''}`}
+            onClick={() => setScreen('prologue')}
+          >
+            Prologue
+          </button>
           <button
             className={`nav-btn${screen === 'ledger' ? ' active' : ''}`}
             onClick={() => setScreen('ledger')}
@@ -93,6 +119,9 @@ export default function App() {
         </div>
       </nav>
       <div className="screen-wrap">
+        <div style={{ display: screen === 'prologue' ? 'block' : 'none' }}>
+          <Prologue state={state} onSelectBackground={onSelectBackground} />
+        </div>
         <div style={{ display: screen === 'ledger' ? 'block' : 'none' }}>
           <Ledger state={state} onStateChange={onStateChange} onNewGame={onNewGame} />
         </div>