fix: fixed UI bugs, keyless testing initiated

Dockerfile

@@ -0,0 +1,20 @@
+FROM python:3.11-slim
+
+WORKDIR /app
+
+# Install deps first (layer-cached)
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+# Initialise the database at build time
+RUN python -m scripts.init_db
+
+# startup script
+RUN chmod +x scripts/start.sh
+
+# HF Spaces exposes port 7860
+EXPOSE 7860
+
+CMD ["bash", "scripts/start.sh"]

Makefile

@@ -45,6 +45,12 @@ train-grpo:
 evaluate:
 	venv-train\Scripts\python -m training.evaluate --base Qwen/Qwen2.5-7B-Instruct --sft models/parlay-sft --grpo models/parlay-grpo --data data/episodes.jsonl --output results/eval_results.json
 
+test-keyless:
+	venv\Scripts\pytest tests\test_keyless.py -v
+
+docker-test:
+	docker build -t parlay-test . && docker run -p 7860:7860 --env-file .env parlay-test
+
 clean:
 	if exist venv rd /s /q venv
 	if exist venv-train rd /s /q venv-train

README.md

@@ -1,3 +1,12 @@
+---
+title: Parlay
+emoji: ◈
+colorFrom: indigo
+colorTo: green
+sdk: docker
+pinned: false
+---
+
 # Parlay — The RL Negotiation Arena
 
 > **The arena where AIs learn to close.**
@@ -736,6 +745,38 @@ GRPO (Group Relative Policy Optimization) eliminates the need for a separate cri
 
 ---
 
+## Testing Without API Keys
+
+Everything in Parlay runs in **mock mode** when `GOOGLE_API_KEY` is not set.
+Mock mode returns canned persona-consistent responses so you can play and test
+the full game loop without any external account.
+
+```bash
+# 1. Set up the game environment
+make setup
+
+# 2. Run the keyless test suite (zero API calls)
+make test-keyless
+
+# 3. Start the server in mock mode
+make run
+
+# 4. Open the game in your browser
+#    → http://localhost:8000
+#    A "Demo mode" banner confirms mock mode is active.
+```
+
+To switch to real AI: add `GOOGLE_API_KEY=your_key` to `.env` and restart.
+
+To test the exact HF Spaces container locally before pushing:
+
+```bash
+make docker-test
+# → http://localhost:7860
+```
+
+---
+
 ## Contributing
 
 1. Fork the repo and create a feature branch

agent/gemini_client.py

@@ -1,6 +1,9 @@
 """
 Google Gemini 2.0 Flash client for Parlay.
-Uses the google-genai SDK. All calls are async (via run_in_executor). All errors return SYNTHETIC_RESPONSE.
+Uses the google-genai SDK. All calls are async (via run_in_executor).
+All errors return SYNTHETIC_RESPONSE.
+When GOOGLE_API_KEY is absent, MOCK_RESPONSES are returned so the full game
+loop works without any API key.
 """
 import asyncio
 import json
@@ -8,33 +11,112 @@ import logging
 import os
 from typing import Optional
 
-from google import genai
-from google.genai import types
-
 logger = logging.getLogger(__name__)
 
 MODEL_ID = "gemini-2.0-flash"
 
-_client: Optional[genai.Client] = None
+_client = None
+_mock_warned: bool = False
+
+# ── Mock responses (keyless dev / CI) ────────────────────────────────────────
+
+MOCK_RESPONSES: dict[str, list[dict]] = {
+    "shark": [
+        {"utterance": "Let's not waste each other's time. Here's where I stand — this number isn't moving much.", "offer_amount": None, "tactical_move": "anchor_high"},
+        {"utterance": "I have three other parties at the table. You'd better sharpen your pencil.", "offer_amount": None, "tactical_move": "batna_reveal"},
+        {"utterance": "That's a creative offer. Not good enough, but creative.", "offer_amount": None, "tactical_move": None},
+        {"utterance": "I've been in rooms like this before. Come back with something real.", "offer_amount": None, "tactical_move": None},
+        {"utterance": "Fine. One last move from me. This is the ceiling.", "offer_amount": None, "tactical_move": "anchor_high"},
+    ],
+    "diplomat": [
+        {"utterance": "I believe we can find something that works for both of us. Let's explore the range.", "offer_amount": None, "tactical_move": None},
+        {"utterance": "I appreciate you sharing that. Could we consider packaging some non-price elements?", "offer_amount": None, "tactical_move": "sweetener"},
+        {"utterance": "We're actually closer than it seems. I'm willing to move if you can meet me halfway.", "offer_amount": None, "tactical_move": None},
+        {"utterance": "Here's a revised proposal that I think reflects your concerns.", "offer_amount": None, "tactical_move": "reframe"},
+        {"utterance": "I think we've built enough trust here. Let me share something that might help us close.", "offer_amount": None, "tactical_move": None},
+    ],
+    "analyst": [
+        {"utterance": "I've modeled this extensively. The numbers you're presenting don't align with market benchmarks.", "offer_amount": None, "tactical_move": None},
+        {"utterance": "Can you provide the data backing that position? I need to validate before proceeding.", "offer_amount": None, "tactical_move": None},
+        {"utterance": "Based on comparable transactions, the fair value range is well-established.", "offer_amount": None, "tactical_move": "reframe"},
+        {"utterance": "The variance in your offer exceeds two standard deviations from the median.", "offer_amount": None, "tactical_move": None},
+        {"utterance": "I've run the numbers three ways. Here is the only figure that makes sense.", "offer_amount": None, "tactical_move": "anchor_high"},
+    ],
+    "wildcard": [
+        {"utterance": "You know what? Let's just see where this goes. I feel good about today.", "offer_amount": None, "tactical_move": None},
+        {"utterance": "Honestly I wasn't expecting that. Actually, you know what — here's a thought.", "offer_amount": None, "tactical_move": None},
+        {"utterance": "Something you said changed my thinking entirely. I'm going a different direction.", "offer_amount": None, "tactical_move": "reframe"},
+        {"utterance": "This is either a great deal or a terrible one. I genuinely can't tell. Let's find out.", "offer_amount": None, "tactical_move": None},
+        {"utterance": "Sure, why not. But I want something extra thrown in — something creative.", "offer_amount": None, "tactical_move": "sweetener"},
+    ],
+    "veteran": [
+        {"utterance": "I've been in this room many times. I know what fair looks like and that isn't it.", "offer_amount": None, "tactical_move": None},
+        {"utterance": "…I'll give you a moment to reconsider that position.", "offer_amount": None, "tactical_move": "silence"},
+        {"utterance": "I've seen every tactic in the book. Let's cut to what we're both actually thinking.", "offer_amount": None, "tactical_move": None},
+        {"utterance": "Experience tells me we're about three moves from a deal.", "offer_amount": None, "tactical_move": "reframe"},
+        {"utterance": "You're good. But I've been doing this longer. Here's my considered response.", "offer_amount": None, "tactical_move": None},
+    ],
+}
+
+SYNTHETIC_RESPONSE: dict = {
+    "utterance": "I need a moment to consider your proposal.",
+    "offer_amount": None,
+    "tactical_move": None,
+}
+
+
+# ── Helper: mock mode detection ───────────────────────────────────────────────
+
+def _is_mock_mode() -> bool:
+    """Return True when GOOGLE_API_KEY is absent or empty."""
+    return not os.environ.get("GOOGLE_API_KEY", "").strip()
+
+
+def _get_mock_response(persona: str, turn: int) -> dict:
+    """
+    Return a canned response for keyless dev.
+
+    Args:
+        persona: Persona key (shark / diplomat / analyst / wildcard / veteran).
+        turn:    Current turn count — used to cycle through the 5 canned lines.
+
+    Returns:
+        Copy of the canned response dict.
+    """
+    global _mock_warned
+    if not _mock_warned:
+        logger.warning(
+            "GOOGLE_API_KEY not set — using mock responses. "
+            "Set key in .env for real AI."
+        )
+        _mock_warned = True
+
+    responses = MOCK_RESPONSES.get(persona, MOCK_RESPONSES["shark"])
+    return dict(responses[turn % len(responses)])
 
 
-def _get_client() -> genai.Client:
-    """Lazily construct API client (empty key is allowed; calls then fail and return synthetic output)."""
+# ── Lazy client ──────────────────────────────────────────────────────────────
+
+def _get_client():
+    """Lazily construct the Gemini client (import deferred so tests don't need SDK)."""
     global _client
     if _client is None:
+        from google import genai  # noqa: PLC0415
         _client = genai.Client(api_key=os.environ.get("GOOGLE_API_KEY") or "")
     return _client
 
 
-def _legacy_messages_to_history(messages: list[dict]) -> list[types.Content]:
+def _legacy_messages_to_history(messages: list[dict]) -> list:
     """Convert legacy {'role','parts'} messages to google-genai Content list."""
-    contents: list[types.Content] = []
+    from google.genai import types  # noqa: PLC0415
+
+    contents: list = []
     for m in messages:
         role = m.get("role", "user")
         if role not in ("user", "model"):
             role = "user"
         raw_parts = m.get("parts") or []
-        parts: list[types.Part] = []
+        parts: list = []
         for p in raw_parts:
             text = p if isinstance(p, str) else str(p)
             parts.append(types.Part(text=text))
@@ -44,31 +126,35 @@ def _legacy_messages_to_history(messages: list[dict]) -> list[types.Content]:
     return contents
 
 
-SYNTHETIC_RESPONSE: dict = {
-    "utterance": "I need a moment to consider your proposal.",
-    "offer_amount": None,
-    "tactical_move": None,
-}
-
+# ── Public API ───────────────────────────────────────────────────────────────
 
 async def call_gemini(
     system_prompt: str,
     messages: list[dict],
     max_tokens: int = 500,
+    persona: str = "shark",
 ) -> dict:
     """
     Call Gemini 2.0 Flash with a system prompt and message history.
+    Returns mock responses when GOOGLE_API_KEY is not set.
 
     Args:
         system_prompt: Persona + scenario context string.
         messages:      List of {"role": "user"|"model", "parts": ["..."]} dicts.
         max_tokens:    Maximum output tokens for the response.
+        persona:       Persona name used for mock-mode selection.
 
     Returns:
         Parsed dict with keys: utterance (str), offer_amount (float|None),
         tactical_move (str|None). Returns SYNTHETIC_RESPONSE on any error.
     """
+    if _is_mock_mode():
+        return _get_mock_response(persona, len(messages))
+
+    text = ""
     try:
+        from google.genai import types  # noqa: PLC0415
+
         history = messages[:-1] if len(messages) > 1 else []
         last_msg = messages[-1]["parts"][0] if messages else "Begin the negotiation."
 
@@ -80,7 +166,7 @@ async def call_gemini(
         )
         user_message = f"{full_prompt}\n\nUser: {last_msg}"
 
-        def _call() -> types.GenerateContentResponse:
+        def _call():
             chat = _get_client().chats.create(
                 model=MODEL_ID,
                 history=_legacy_messages_to_history(history),
@@ -127,6 +213,7 @@ async def call_gemini_tom(
 ) -> dict:
     """
     Call Gemini to infer Theory of Mind beliefs about the opponent.
+    Returns current_state unchanged in mock mode.
 
     Args:
         system_prompt:        Base persona context.
@@ -137,6 +224,9 @@ async def call_gemini_tom(
         Updated belief dict: {est_budget, est_walk_away, est_urgency,
                                est_has_alternative, confidence}.
     """
+    if _is_mock_mode():
+        return current_state
+
     tom_prompt = (
         f"{system_prompt}\n\n"
         f"THEORY OF MIND TASK:\n"
@@ -149,7 +239,9 @@ async def call_gemini_tom(
     )
 
     try:
-        def _call() -> types.GenerateContentResponse:
+        from google.genai import types  # noqa: PLC0415
+
+        def _call():
             chat = _get_client().chats.create(
                 model=MODEL_ID,
                 history=_legacy_messages_to_history(conversation_history),

dashboard/api.py

@@ -509,3 +509,145 @@ async def get_leaderboard(scenario_id: Optional[str] = None, limit: int = 10) ->
 async def health() -> dict:
     """Health check endpoint."""
     return {"status": "ok", "service": "parlay-dashboard"}
+
+
+# ── Unified game step (used by frontend JS) ──────────────────────────────────
+
+class GameStepRequest(BaseModel):
+    session_id: str
+    move: str = "counter"
+    offer_amount: Optional[float] = None
+    card_id: Optional[str] = None
+
+
+@router.post("/game/step")
+async def game_step(req: GameStepRequest) -> dict:
+    """
+    Unified step endpoint — dispatches to move / accept / walkaway.
+
+    Args:
+        session_id:   Active session UUID.
+        move:         "counter" | "anchor" | "concede" | "package" | "accept" | "walk_away".
+        offer_amount: Required for counter / anchor / concede / package moves.
+        card_id:      Optional tactical card identifier.
+
+    Returns:
+        Opponent response, updated observation, and done flag.
+    """
+    match req.move:
+        case "accept":
+            return await accept_deal(AcceptRequest(session_id=req.session_id))
+        case "walk_away":
+            return await walk_away(WalkAwayRequest(session_id=req.session_id))
+        case _:
+            if req.offer_amount is None:
+                raise HTTPException(status_code=400, detail="offer_amount required for counter moves")
+            tactic: Optional[str] = None
+            if req.move == "anchor":
+                tactic = "anchor_high"
+            return await make_move(MoveRequest(
+                session_id=req.session_id,
+                amount=req.offer_amount,
+                message=req.move,
+                tactical_move=tactic,
+            ))
+
+
+# ── Session API (simplified, used by tests and external integrations) ─────────
+
+class SessionStartRequest(BaseModel):
+    scenario_id: str = "saas_enterprise"
+    persona: str = "shark"
+    player_name: str = "Player"
+
+
+class SessionStepRequest(BaseModel):
+    amount: float = 145_000.0
+    message: str = "I propose this amount."
+    tactical_move: Optional[str] = None
+
+
+@router.post("/session/start")
+async def session_start(req: SessionStartRequest) -> dict:
+    """
+    Start a new session (simplified API).
+    Works in both mock and live Gemini mode.
+
+    Args:
+        scenario_id: One of the five scenario IDs.
+        persona:     One of the five persona IDs.
+        player_name: Display name for the player.
+
+    Returns:
+        session_id and status.
+    """
+    try:
+        session_id, sess = _build_session(req.scenario_id, req.persona, req.player_name)
+    except (InvalidScenarioError, InvalidPersonaError) as exc:
+        raise HTTPException(status_code=400, detail=str(exc))
+    except Exception as exc:
+        logger.error(f"Unexpected error in session/start: {exc}")
+        raise HTTPException(status_code=500, detail="Internal server error")
+
+    _sessions[session_id] = sess
+    logger.info(f"Session started (simplified): {session_id}, {req.scenario_id}/{req.persona}")
+    return {"session_id": session_id, "status": "ok"}
+
+
+@router.post("/session/{session_id}/step")
+async def session_step(session_id: str, req: SessionStepRequest) -> dict:
+    """
+    Execute one negotiation step in a session.
+    Returns a mock AI response when GOOGLE_API_KEY is absent.
+
+    Args:
+        session_id: Active session UUID from /session/start.
+        amount:     Player's offer amount.
+        message:    Player's utterance.
+        tactical_move: Optional tactical move string.
+
+    Returns:
+        observation dict and opponent response.
+    """
+    if session_id not in _sessions:
+        raise HTTPException(status_code=404, detail="Session not found")
+
+    sess = _sessions[session_id]
+    if sess["done"]:
+        raise HTTPException(status_code=400, detail="Episode already concluded")
+
+    turn = sess["step_count"]
+    gemini_messages = [
+        {"role": "user", "parts": [f"Offer: {req.amount:,.0f}. {req.message}"]}
+    ]
+    opponent_resp = await call_gemini(
+        sess["system_prompt"],
+        gemini_messages,
+        persona=sess["persona"],
+    )
+
+    sess["offer_history"].append(req.amount)
+    sess["step_count"] += 1
+    sess["done"] = sess["step_count"] >= MAX_TURNS
+    _sessions[session_id] = sess
+
+    hidden = sess["hidden"]
+    zopa = compute_zopa(hidden.budget_ceiling, hidden.walk_away_price)
+    nash = compute_nash_bargaining_solution(hidden.budget_ceiling, hidden.walk_away_price)
+    tension = min(100.0, 20.0 + (sess["step_count"] / MAX_TURNS) * 80.0)
+
+    return {
+        "observation": {
+            "step_count": sess["step_count"],
+            "zopa_lower": zopa[0] if zopa else 0.0,
+            "zopa_upper": zopa[1] if zopa else 0.0,
+            "nash_point": nash,
+            "tension_score": tension,
+            "belief_state": sess["tom"].current_belief.model_dump(),
+            "credibility_points": sess["credibility_points"],
+            "act": sess["act"],
+        },
+        "opponent": opponent_resp,
+        "done": sess["done"],
+        "turns_remaining": MAX_TURNS - sess["step_count"],
+    }

dashboard/index.html

@@ -1,82 +1,110 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="light">
+<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <meta name="description" content="Parlay — RL Negotiation Game. Bloomberg terminal meets poker app." />
-  <title>Parlay — Negotiation Arena</title>
+  <meta name="description" content="Parlay — The Deal Room. An RL-powered negotiation arena." />
+  <title>Parlay — The Deal Room</title>
 
-  <!-- External: Three.js r128 (loaded first — character.js depends on it) -->
+  <!-- Three.js r128 — must load before character.js -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"
           crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
-  <!-- External: Chart.js 4.4.1 -->
+  <!-- Chart.js 4.4.1 -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"
           crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
-  <!-- Parlay styles -->
-  <link rel="stylesheet" href="/static/style.css" />
+  <link rel="stylesheet" href="/static/style.css?v=4" />
 </head>
 <body>
 
+<!-- ═══════════════════════════════════════════════════════════
+     DEMO BANNER
+════════════════════════════════════════════════════════════ -->
+<div id="demo-banner" class="demo-banner hidden" role="status">
+  Demo mode — AI responses are simulated · Add GOOGLE_API_KEY to .env for real gameplay
+  <button class="demo-banner-dismiss" type="button" id="btn-dismiss-demo" aria-label="Dismiss demo banner">✕</button>
+</div>
+
 <!-- ═══════════════════════════════════════════════════════════
      LOADING OVERLAY
 ════════════════════════════════════════════════════════════ -->
 <div id="loading-overlay" class="loading-overlay hidden" role="status" aria-live="polite">
   <div class="loading-card">
     <div class="spinner" aria-hidden="true"></div>
-    <p class="loading-text">Gemini is thinking…</p>
+    <p class="loading-text">The room is thinking…</p>
   </div>
 </div>
 
 <!-- ═══════════════════════════════════════════════════════════
-     SETUP MODAL
+     ONBOARDING — STEP 1: NAME
 ════════════════════════════════════════════════════════════ -->
-<div id="setup-modal" class="modal-backdrop" role="dialog" aria-modal="true" aria-labelledby="modal-title">
-  <div class="modal">
-    <div class="modal-header">
-      <h1 class="modal-title" id="modal-title">Welcome to Parlay</h1>
-      <p class="modal-subtitle">An RL-powered negotiation arena. Choose your deal, choose your style.</p>
+<div id="onboarding-step-1" class="onboarding-overlay start-active" role="dialog" aria-modal="true" aria-label="Enter your name">
+  <div class="onboarding-card">
+    <div class="onboarding-step-num">Step 1 of 3</div>
+    <h1 class="onboarding-headline">Who's at<br>the table?</h1>
+    <p class="onboarding-sub">Every deal starts with a name on the door.</p>
+
+    <input
+      type="text"
+      id="step1-name"
+      class="onboarding-name-input"
+      placeholder="Your name…"
+      maxlength="40"
+      autocomplete="off"
+      autofocus
+    />
+
+    <div id="step1-error" class="onboarding-error"></div>
+
+    <div class="onboarding-footer">
+      <button id="step1-continue" class="btn btn-primary" type="button">
+        Continue &rarr;
+      </button>
     </div>
+  </div>
+</div>
 
-    <div class="modal-body">
-      <!-- Player name -->
-      <div class="form-group">
-        <label class="form-label" for="player-name-input">Your Name</label>
-        <input
-          type="text"
-          id="player-name-input"
-          class="form-input"
-          placeholder="e.g. Jordan Weiss"
-          maxlength="40"
-          autocomplete="off"
-        />
-      </div>
+<!-- ═══════════════════════════════════════════════════════════
+     ONBOARDING — STEP 2: SCENARIO
+════════════════════════════════════════════════════════════ -->
+<div id="onboarding-step-2" class="onboarding-overlay" role="dialog" aria-modal="true" aria-label="Choose a scenario" inert>
+  <div class="onboarding-card wide">
+    <div class="onboarding-step-num">Step 2 of 3</div>
+    <h1 class="onboarding-headline">Choose your deal</h1>
+    <p class="onboarding-sub">Select a case from the dossier.</p>
+
+    <div id="scenario-dossier-grid" class="scenario-dossier-grid" role="radiogroup" aria-label="Negotiation scenarios">
+      <!-- Populated by loadScenarios() -->
+    </div>
 
-      <!-- Scenario selection -->
-      <div class="form-group">
-        <div class="form-label">Select a Scenario</div>
-        <div id="scenario-grid" class="selector-grid">
-          <!-- Populated by loadScenarios() — fallbacks also included -->
-        </div>
-      </div>
+    <div id="step2-error" class="onboarding-error"></div>
 
-      <!-- Persona selection -->
-      <div class="form-group">
-        <div class="form-label">Choose Your Negotiation Style</div>
-        <div id="persona-grid" class="persona-grid">
-          <!-- Populated by loadPersonas() -->
-        </div>
-      </div>
+    <div class="onboarding-footer">
+      <button id="step2-back" class="btn btn-ghost" type="button">&larr; Back</button>
+      <button id="step2-continue" class="btn btn-primary" type="button">Continue &rarr;</button>
+    </div>
+  </div>
+</div>
 
-      <!-- Error placeholder -->
-      <p id="modal-error" class="hidden text-red text-sm" role="alert"></p>
+<!-- ═══════════════════════════════════════════════════════════
+     ONBOARDING — STEP 3: PERSONA
+════════════════════════════════════════════════════════════ -->
+<div id="onboarding-step-3" class="onboarding-overlay" role="dialog" aria-modal="true" aria-label="Choose your opponent" inert>
+  <div class="onboarding-card wide">
+    <div class="onboarding-step-num">Step 3 of 3</div>
+    <h1 class="onboarding-headline">Choose your opponent</h1>
+    <p class="onboarding-sub">Study the faces across the table.</p>
+
+    <div id="persona-cards-grid" class="persona-cards-grid" role="radiogroup" aria-label="Negotiator personas">
+      <!-- Populated by loadPersonas() -->
     </div>
 
-    <div class="modal-footer">
-      <button id="btn-start-game" class="btn btn-primary" type="button">
-        Enter the Room &rarr;
-      </button>
+    <div id="step3-error" class="onboarding-error"></div>
+
+    <div class="onboarding-footer">
+      <button id="step3-back" class="btn btn-ghost" type="button">&larr; Back</button>
+      <button id="step3-start" class="btn btn-primary" type="button">Enter the Room &rarr;</button>
     </div>
   </div>
 </div>
@@ -97,13 +125,8 @@
 
   <div class="header-actions">
     <p id="global-error" class="hidden text-red text-sm" role="alert"></p>
-    <button
-      id="dark-toggle"
-      class="dark-toggle"
-      type="button"
-      aria-label="Toggle dark mode"
-      title="Toggle dark mode"
-    ></button>
+    <button id="dark-toggle" class="dark-toggle" type="button"
+            aria-label="Toggle display mode" title="Toggle display mode"></button>
   </div>
 </header>
 
@@ -125,13 +148,12 @@
         </div>
       </div>
 
-      <!-- CP Bar -->
       <div class="cp-section">
         <div class="cp-label-row">
-          <span class="cp-label">Cognitive Points</span>
+          <span class="cp-label">Credibility Points</span>
           <span id="cp-value" class="cp-value mono">100 / 100</span>
         </div>
-        <div class="cp-track" role="progressbar" aria-label="Cognitive Points" aria-valuemin="0" aria-valuemax="100">
+        <div class="cp-track" role="progressbar" aria-label="Credibility Points" aria-valuemin="0" aria-valuemax="100">
           <div id="cp-fill" class="cp-fill" style="width: 100%;"></div>
         </div>
       </div>
@@ -158,28 +180,22 @@
       </div>
       <div class="achievements-strip">
         <div class="badge" data-achievement="first_deal" title="Close your first deal">
-          <span class="badge-icon" aria-hidden="true">🤝</span>
-          First Deal
+          <span class="badge-icon" aria-hidden="true">🤝</span>First Deal
         </div>
         <div class="badge" data-achievement="anchor_master" title="Win with an aggressive anchor">
-          <span class="badge-icon" aria-hidden="true">⚓</span>
-          Anchor
+          <span class="badge-icon" aria-hidden="true">⚓</span>Anchor
         </div>
         <div class="badge" data-achievement="drift_adapter" title="Adapt to a drift event">
-          <span class="badge-icon" aria-hidden="true">🌪️</span>
-          Drift
+          <span class="badge-icon" aria-hidden="true">🌪️</span>Drift
         </div>
         <div class="badge" data-achievement="zopa_optimal" title="Close within 5% of Nash point">
-          <span class="badge-icon" aria-hidden="true">💎</span>
-          Optimal
+          <span class="badge-icon" aria-hidden="true">💎</span>Optimal
         </div>
         <div class="badge" data-achievement="clean_sweep" title="Complete all 3 acts">
-          <span class="badge-icon" aria-hidden="true">🏆</span>
-          Sweep
+          <span class="badge-icon" aria-hidden="true">🏆</span>Sweep
         </div>
         <div class="badge" data-achievement="bluffer" title="Successfully bluff the opponent">
-          <span class="badge-icon" aria-hidden="true">🃏</span>
-          Bluff
+          <span class="badge-icon" aria-hidden="true">🃏</span>Bluff
         </div>
       </div>
     </section>
@@ -212,7 +228,7 @@
     <!-- Chat Thread -->
     <div id="chat-thread" class="chat-thread" role="log" aria-live="polite" aria-label="Negotiation conversation">
       <div class="message-system">
-        Set up your game above to start negotiating.
+        Step through the door to begin negotiating.
       </div>
     </div>
 
@@ -268,28 +284,23 @@
       </div>
 
       <div id="zopa-track" class="zopa-track-outer" role="img" aria-label="ZOPA visual range">
-        <!-- Green zone -->
         <div id="zopa-zone" class="zopa-zone"></div>
 
-        <!-- Player BATNA marker -->
         <div id="marker-player" class="zopa-marker marker-player" style="left: 20%;">
           <div class="zopa-marker-line"></div>
           <span class="zopa-label">Your BATNA</span>
         </div>
 
-        <!-- Opponent BATNA marker -->
         <div id="marker-opponent" class="zopa-marker marker-opponent" style="left: 80%;">
           <div class="zopa-marker-line"></div>
           <span class="zopa-label">Their BATNA</span>
         </div>
 
-        <!-- Current offer marker -->
         <div id="marker-current" class="zopa-marker marker-current" style="left: 50%; display: none;">
           <div class="zopa-marker-line"></div>
           <span class="zopa-label">Offer</span>
         </div>
 
-        <!-- Nash diamond -->
         <div id="nash-diamond" class="nash-diamond" style="left: 50%; display: none;" title="Nash Equilibrium Point"></div>
       </div>
 
@@ -328,7 +339,7 @@
 
     <!-- Persona Info -->
     <div id="persona-info" class="persona-info">
-      <div id="persona-avatar" class="persona-avatar shark" aria-hidden="true">🦈</div>
+      <div id="persona-avatar" class="persona-avatar" aria-hidden="true">◈</div>
       <div>
         <div id="persona-name" class="persona-name">—</div>
         <div id="persona-desc" class="persona-desc text-muted text-xs">Choose a persona to begin</div>
@@ -342,7 +353,6 @@
       </div>
 
       <div class="tom-beliefs">
-        <!-- Cooperative -->
         <div class="belief-row">
           <span class="belief-label text-xs">Cooperative</span>
           <div class="belief-track" role="progressbar" aria-label="Cooperative belief">
@@ -352,7 +362,6 @@
           <div id="belief-cooperative-conf" class="belief-confidence confidence-medium"></div>
         </div>
 
-        <!-- Competitive -->
         <div class="belief-row">
           <span class="belief-label text-xs">Competitive</span>
           <div class="belief-track" role="progressbar" aria-label="Competitive belief">
@@ -362,17 +371,15 @@
           <div id="belief-competitive-conf" class="belief-confidence confidence-low"></div>
         </div>
 
-        <!-- Reservation -->
         <div class="belief-row">
           <span class="belief-label text-xs">Reservation</span>
-          <div class="belief-track" role="progressbar" aria-label="Reservation sensitivity belief">
+          <div class="belief-track" role="progressbar" aria-label="Reservation sensitivity">
             <div id="belief-reservation-fill" class="belief-fill reservation" style="width:40%;"></div>
           </div>
           <span id="belief-reservation-pct" class="belief-pct">40%</span>
           <div id="belief-reservation-conf" class="belief-confidence confidence-low"></div>
         </div>
 
-        <!-- Flexibility -->
         <div class="belief-row">
           <span class="belief-label text-xs">Flexibility</span>
           <div class="belief-track" role="progressbar" aria-label="Flexibility belief">
@@ -383,7 +390,6 @@
         </div>
       </div>
 
-      <!-- Belief confidence over time chart -->
       <div class="mt-4 sparkline-wrap" style="height: 80px;">
         <canvas id="belief-chart" class="sparkline-canvas" aria-label="Belief confidence over time"></canvas>
       </div>
@@ -405,13 +411,8 @@
     <section class="panel" aria-label="Leaderboard">
       <div class="panel-header">
         <span class="panel-title">Top 5</span>
-        <button
-          class="btn btn-ghost btn-sm"
-          type="button"
-          onclick="loadLeaderboard()"
-          aria-label="Refresh leaderboard"
-          title="Refresh"
-        >↻</button>
+        <button class="btn btn-ghost btn-sm" type="button"
+                onclick="loadLeaderboard()" aria-label="Refresh leaderboard" title="Refresh">↻</button>
       </div>
 
       <table class="leaderboard-table" role="table" aria-label="Top players leaderboard">
@@ -436,9 +437,9 @@
 </main>
 
 <!-- Scripts (order matters) -->
-<script src="/static/character.js"></script>
-<script src="/static/chart.js"></script>
-<script src="/static/app.js"></script>
+<script src="/static/character.js?v=4"></script>
+<script src="/static/chart.js?v=4"></script>
+<script src="/static/app.js?v=4"></script>
 
 </body>
 </html>

dashboard/static/app.js

@@ -1,10 +1,10 @@
 // ============================================================
 // Parlay Game Logic — app.js
-// Connects frontend to FastAPI at /api/*
-// Zero dependencies beyond native fetch / DOM APIs
+// "The Deal Room" — 3-step onboarding, mock mode, Mad Men theme.
+// Zero dependencies beyond native fetch / DOM APIs.
 // ============================================================
 
-const DEBUG = false;
+const APP_DEBUG = false; // not "DEBUG" — chart.js is also a global script
 const API_BASE = "";  // same-origin
 
 // ── State ─────────────────────────────────────────────────────
@@ -21,26 +21,35 @@ let gameState = {
   maxCp:       100,
 };
 
-let character   = null;   // NegotiatorCharacter instance
-let charts      = null;   // ParlayCharts instance
-let _driftTimer = null;
+let character      = null;   // NegotiatorCharacter instance
+let charts         = null;   // ParlayCharts instance
+let _driftTimer    = null;
+let _previewChars  = {};     // PersonaPreviewCharacter instances keyed by persona id
+
+// ── Onboarding step tracking ──────────────────────────────────
+let _currentStep = 1;
 
 // ── Init ──────────────────────────────────────────────────────
 document.addEventListener("DOMContentLoaded", () => {
-  charts = new ParlayCharts();
+  // Wire onboarding first so a Chart / fetch failure cannot block the wizard.
+  _initOnboarding();
+  _syncOnboardingInert();
+
+  try {
+    if (typeof ParlayCharts !== "undefined") {
+      charts = new ParlayCharts();
+    }
+  } catch (e) {
+    if (typeof console !== "undefined" && console.error) {
+      console.error("[Parlay] ParlayCharts init failed:", e);
+    }
+  }
 
-  _initDarkMode();
-  _initDarkModeToggle();
   loadScenarios();
   loadPersonas();
+  _checkDemoMode();
 
-  // Landing modal
-  const startBtn = document.getElementById("btn-start-game");
-  if (startBtn) {
-    startBtn.addEventListener("click", _handleModalStart);
-  }
-
-  // Input area
+  // Game action buttons
   const submitBtn = document.getElementById("btn-submit");
   if (submitBtn) submitBtn.addEventListener("click", submitMove);
 
@@ -50,76 +59,183 @@ document.addEventListener("DOMContentLoaded", () => {
   const walkBtn = document.getElementById("btn-walk");
   if (walkBtn) walkBtn.addEventListener("click", walkAway);
 
-  const dismissBtn = document.getElementById("btn-dismiss-drift");
-  if (dismissBtn) dismissBtn.addEventListener("click", dismissDriftAlert);
+  const dismissDrift = document.getElementById("btn-dismiss-drift");
+  if (dismissDrift) dismissDrift.addEventListener("click", dismissDriftAlert);
+
+  const dismissDemo = document.getElementById("btn-dismiss-demo");
+  if (dismissDemo) {
+    dismissDemo.addEventListener("click", () => {
+      const banner = document.getElementById("demo-banner");
+      if (banner) banner.classList.add("hidden");
+      document.body.classList.remove("demo-mode");
+    });
+  }
 
-  // Offer input — Enter key submits
   const offerInput = document.getElementById("offer-input");
   if (offerInput) {
     offerInput.addEventListener("keydown", (e) => {
-      if (e.key === "Enter") submitMove();
+      if (e.key === "Enter" && !e.shiftKey) submitMove();
     });
   }
 
-  // Leaderboard refresh
+  const darkToggle = document.getElementById("dark-toggle");
+  if (darkToggle) darkToggle.addEventListener("click", _toggleDisplayMode);
+
   loadLeaderboard();
 });
 
-// ── Dark Mode ──────────────────────────────────────────────────
-function _initDarkMode() {
-  const saved = localStorage.getItem("parlay-theme");
-  const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-  const theme = saved || (prefersDark ? "dark" : "light");
-  document.documentElement.setAttribute("data-theme", theme);
+// ── Demo mode detection ────────────────────────────────────────
+async function _checkDemoMode() {
+  try {
+    const res  = await fetch(`${API_BASE}/health`);
+    if (!res.ok) throw new Error("health check failed");
+    const data = await res.json();
+    if (data.gemini === "mock") _showDemoBanner();
+  } catch {
+    // No backend reachable — still show demo banner
+    _showDemoBanner();
+  }
 }
 
-function _initDarkModeToggle() {
-  const toggle = document.getElementById("dark-toggle");
-  if (!toggle) return;
-  toggle.addEventListener("click", () => {
-    const current = document.documentElement.getAttribute("data-theme");
-    const next    = current === "dark" ? "light" : "dark";
-    document.documentElement.setAttribute("data-theme", next);
-    localStorage.setItem("parlay-theme", next);
-    if (DEBUG) console.log("[app] theme set to", next);
-  });
+function _showDemoBanner() {
+  const banner = document.getElementById("demo-banner");
+  if (banner) banner.classList.remove("hidden");
+  document.body.classList.add("demo-mode");
+  if (APP_DEBUG) console.log("[app] demo mode active");
 }
 
-// ── Modal ──────────────────────────────────────────────────────
-function _handleModalStart() {
-  const nameInput = document.getElementById("player-name-input");
-  const name = nameInput ? nameInput.value.trim() : "Player";
+// ── Display mode toggle (replacing dark-mode concept) ─────────
+function _toggleDisplayMode() {
+  const html = document.documentElement;
+  const cur  = html.getAttribute("data-theme") || "felt";
+  const next = cur === "felt" ? "light" : "felt";
+  html.setAttribute("data-theme", next);
+  localStorage.setItem("parlay-theme", next);
+}
 
-  // Gather selection
-  const selectedScenario = document.querySelector(".selector-card.selected");
-  const selectedPersona  = document.querySelector(".persona-option.selected");
+// ── Onboarding (3-step wizard) ────────────────────────────────
+function _initOnboarding() {
+  // Step 1 — name
+  const step1Input    = document.getElementById("step1-name");
+  const step1Continue = document.getElementById("step1-continue");
 
-  if (!selectedScenario) {
-    _showInlineError("modal-error", "Please select a scenario.");
-    return;
+  if (step1Input) {
+    step1Input.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") _goToStep(2);
+    });
   }
-  if (!selectedPersona) {
-    _showInlineError("modal-error", "Please choose a negotiation style.");
-    return;
+  if (step1Continue) step1Continue.addEventListener("click", () => _goToStep(2));
+
+  // Step 2 — scenario
+  const step2Back     = document.getElementById("step2-back");
+  const step2Continue = document.getElementById("step2-continue");
+  if (step2Back)     step2Back.addEventListener("click",     () => _goToStep(1));
+  if (step2Continue) step2Continue.addEventListener("click", () => _goToStep(3));
+
+  // Step 3 — persona
+  const step3Back  = document.getElementById("step3-back");
+  const step3Start = document.getElementById("step3-start");
+  if (step3Back)  step3Back.addEventListener("click",  () => _goToStep(2));
+  if (step3Start) step3Start.addEventListener("click", _handleStep3Start);
+}
+
+/**
+ * Inert hides non-active steps from the accessibility tree and blocks interaction
+ * in modern browsers, complementing z-index and pointer-events.
+ */
+function _syncOnboardingInert() {
+  for (let n = 1; n <= 3; n += 1) {
+    const el = document.getElementById(`onboarding-step-${n}`);
+    if (!el) continue;
+    if (n === _currentStep) {
+      el.removeAttribute("inert");
+    } else {
+      el.setAttribute("inert", "");
+    }
+  }
+}
+
+function _goToStep(step) {
+  if (APP_DEBUG) console.log("[app] going to step", step);
+
+  // Validate before advancing
+  if (step === 2) {
+    const name = (document.getElementById("step1-name")?.value ?? "").trim();
+    if (!name) {
+      _showStepError(1, "Please enter your name.");
+      return;
+    }
+    _showStepError(1, "");
   }
 
-  const scenarioId = selectedScenario.dataset.scenarioId;
-  const persona    = selectedPersona.dataset.persona;
+  if (step === 3) {
+    const sel = document.querySelector(".scenario-dossier.selected");
+    if (!sel) {
+      _showStepError(2, "Please select a scenario.");
+      return;
+    }
+    _showStepError(2, "");
+  }
 
-  startGame(scenarioId, persona, name || "Player");
+  // Exit current step
+  const currentEl = document.getElementById(`onboarding-step-${_currentStep}`);
+  if (currentEl) {
+    currentEl.classList.remove("active", "start-active");
+    currentEl.classList.add("exiting");
+    setTimeout(() => {
+      currentEl.classList.remove("exiting");
+    }, 300);
+  }
+
+  _currentStep = step;
+  _syncOnboardingInert();
+
+  const nextEl = document.getElementById(`onboarding-step-${step}`);
+  if (nextEl) {
+    nextEl.classList.remove("exiting");
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        nextEl.classList.add("active");
+      });
+    });
+  }
 }
 
-function _showInlineError(containerId, msg) {
-  const el = document.getElementById(containerId);
+function _showStepError(step, msg) {
+  const el = document.getElementById(`step${step}-error`);
   if (!el) return;
   el.textContent = msg;
-  el.classList.remove("hidden");
-  setTimeout(() => el.classList.add("hidden"), 3000);
+  if (msg) {
+    setTimeout(() => { el.textContent = ""; }, 3000);
+  }
 }
 
-function _closeModal() {
-  const backdrop = document.getElementById("setup-modal");
-  if (backdrop) backdrop.classList.add("hidden");
+function _closeOnboarding() {
+  [1, 2, 3].forEach(n => {
+    const el = document.getElementById(`onboarding-step-${n}`);
+    if (el) {
+      el.classList.remove("active", "start-active", "exiting");
+      el.removeAttribute("inert");
+      el.style.display = "none";
+    }
+  });
+}
+
+function _handleStep3Start() {
+  const nameInput = document.getElementById("step1-name");
+  const selScenario = document.querySelector(".scenario-dossier.selected");
+  const selPersona  = document.querySelector(".persona-card-option.selected");
+
+  if (!selPersona) {
+    _showStepError(3, "Please choose an opponent.");
+    return;
+  }
+
+  const name       = nameInput?.value.trim() || "Player";
+  const scenarioId = selScenario?.dataset.scenarioId || "saas_enterprise";
+  const persona    = selPersona.dataset.persona;
+
+  startGame(scenarioId, persona, name);
 }
 
 // ── API Calls ─────────────────────────────────────────────────
@@ -138,132 +254,193 @@ async function startGame(scenarioId, persona, playerName) {
       body: JSON.stringify({ scenario_id: scenarioId, persona, player_name: playerName }),
     });
 
+    let data;
     if (!res.ok) {
-      const err = await res.json().catch(() => ({}));
-      throw new Error(err.detail || `HTTP ${res.status}`);
+      // If backend is down, load with mock data
+      if (APP_DEBUG) console.log("[app] backend down — using mock data");
+      data = _mockStartData(scenarioId, persona, playerName);
+      _showDemoBanner();
+    } else {
+      data = await res.json();
     }
 
-    const data = await res.json();
-    gameState.sessionId  = data.session_id;
+    gameState.sessionId   = data.session_id;
     gameState.observation = data.observation;
     gameState.hand        = data.hand || [];
-    gameState.cp          = data.cp   ?? 100;
+    gameState.cp          = data.cp   ?? data.observation?.credibility_points ?? 100;
     gameState.maxCp       = data.max_cp ?? 100;
 
-    _closeModal();
+    _closeOnboarding();
+    _destroyPreviewChars();
     updateUI(data);
     _initCharacter(persona);
     _initSparkline(data.observation);
+    _updateScenarioHeader(data);
+    _updatePersonaPanel(data);
 
-    // First system message
     addMessage("system", `Game started. You are negotiating as the ${_personaLabel(persona)}.`);
-    if (data.opening_message) {
-      addMessage("opponent", data.opening_message, data.observation?.opponent_offer, null);
+    const opener = data.opening_message || data.persona?.opening_line;
+    if (opener) {
+      addMessage("opponent", opener, data.observation?.opponent_offer ?? null, null);
     }
 
-    if (DEBUG) console.log("[app] game started", data);
+    if (APP_DEBUG) console.log("[app] game started", data);
   } catch (e) {
-    _showError("Failed to start game: " + e.message);
-    if (DEBUG) console.log("[app] startGame error", e);
+    // Backend completely unreachable — use mock data
+    if (APP_DEBUG) console.log("[app] startGame error, falling back to mock:", e);
+    const data = _mockStartData(scenarioId, persona, playerName);
+    gameState.sessionId   = data.session_id;
+    gameState.observation = data.observation;
+    gameState.hand        = data.hand;
+    gameState.cp          = 100;
+
+    _closeOnboarding();
+    _destroyPreviewChars();
+    updateUI(data);
+    _initCharacter(persona);
+    _showDemoBanner();
+    addMessage("system", `Demo mode: running mock game for ${_personaLabel(persona)}.`);
   } finally {
     setLoading(false);
   }
 }
 
+function _mockStartData(scenarioId, persona, playerName) {
+  const mockScenarios = {
+    saas_enterprise:        { title: "Enterprise SaaS Contract",   lower: 125000, upper: 165000 },
+    consulting_retainer:    { title: "Consulting Retainer",        lower: 25000,  upper: 40000  },
+    hiring_package:         { title: "Senior Engineer Offer",      lower: 195000, upper: 230000 },
+    vendor_hardware:        { title: "Hardware Vendor Contract",   lower: 1750000,upper: 2200000},
+    acquisition_term_sheet: { title: "Startup Acquisition",        lower: 10500000,upper:16000000},
+  };
+  const s = mockScenarios[scenarioId] || mockScenarios.saas_enterprise;
+  const nash = (s.lower + s.upper) / 2;
+  const sid  = "mock-" + Math.random().toString(36).slice(2);
+
+  return {
+    session_id: sid,
+    scenario: { id: scenarioId, title: s.title },
+    observation: {
+      step_count: 0, zopa_lower: s.lower, zopa_upper: s.upper,
+      nash_point: nash, tension_score: 10, credibility_points: 100, act: 1,
+      belief_state: { cooperative: 0.5, competitive: 0.3, reservation: 0.4, flexibility: 0.6 },
+    },
+    persona: { id: persona, name: _personaLabel(persona), symbol: "◈", emoji: "🎯",
+               opening_line: "Let's see what you've got." },
+    hand: [],
+    opening_message: "Welcome to the room. Let's negotiate.",
+    cp: 100,
+    max_cp: 100,
+  };
+}
+
 async function submitMove() {
   if (gameState.done) return;
   if (!gameState.sessionId) return;
 
-  const offerInput  = document.getElementById("offer-input");
-  const moveSelect  = document.getElementById("move-select");
-  const cardInput   = document.querySelector(".tactical-card.selected");
+  const offerInput = document.getElementById("offer-input");
+  const moveSelect = document.getElementById("move-select");
+  const cardEl     = document.querySelector(".tactical-card.selected");
 
-  const offerRaw  = offerInput ? offerInput.value.trim() : "";
-  const move      = moveSelect ? moveSelect.value : "counter";
-  const cardId    = cardInput ? cardInput.dataset.cardId : null;
-  const offer     = offerRaw ? parseFloat(offerRaw.replace(/[$,]/g, "")) : null;
+  const offerRaw = offerInput?.value.trim() ?? "";
+  const move     = moveSelect?.value ?? "counter";
+  const cardId   = cardEl?.dataset.cardId ?? null;
+  const offer    = offerRaw ? parseFloat(offerRaw.replace(/[$,]/g, "")) : null;
 
   if (offer === null && move === "counter") {
     offerInput && offerInput.focus();
     return;
   }
-  if (isNaN(offer) && offer !== null) return;
+  if (offer !== null && isNaN(offer)) return;
 
-  // Render player message immediately
   addMessage("player", _moveSummary(move, offer), offer, move);
-
-  // Show thinking indicator
   const thinkId = _showThinkingBubble();
-
   setLoading(true);
+
   try {
-    const body = { session_id: gameState.sessionId, move, offer_amount: offer, card_id: cardId };
-    const res  = await fetch(`${API_BASE}/api/game/step`, {
+    const res = await fetch(`${API_BASE}/api/game/step`, {
       method:  "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(body),
+      body: JSON.stringify({
+        session_id: gameState.sessionId,
+        move,
+        offer_amount: offer,
+        card_id: cardId,
+      }),
     });
 
-    if (!res.ok) {
-      const err = await res.json().catch(() => ({}));
-      throw new Error(err.detail || `HTTP ${res.status}`);
-    }
+    const data = res.ok ? await res.json() : _mockStepData(offer, move);
 
-    const data = await res.json();
     gameState.observation = data.observation;
     gameState.done        = data.done ?? false;
     gameState.hand        = data.hand || gameState.hand;
-    gameState.cp          = data.cp   ?? gameState.cp;
+    gameState.cp          = data.cp   ?? data.observation?.credibility_points ?? gameState.cp;
     gameState.turnCount  += 1;
 
     _removeThinkingBubble(thinkId);
     updateUI(data);
 
-    if (data.opponent_message) {
-      addMessage("opponent", data.opponent_message, data.observation?.opponent_offer, data.opponent_move);
+    // Opponent message from /api/game/step unified endpoint response format
+    const oppMsg  = data.opponent_message ?? data.opponent?.utterance;
+    const oppOffer = data.observation?.opponent_offer ?? data.opponent?.offer;
+    const oppMove  = data.opponent_move ?? data.opponent?.tactical_move;
+    if (oppMsg) {
+      const bubble = addMessage("opponent", oppMsg, oppOffer, oppMove);
+      if (bubble && gameState.persona) {
+        bubble.setAttribute("data-persona", gameState.persona);
+      }
     }
 
-    if (gameState.done) {
-      _handleGameOver(data);
-    }
+    if (gameState.done) _handleGameOver(data);
 
-    // Clear input
     if (offerInput) offerInput.value = "";
-    if (cardInput)  cardInput.classList.remove("selected");
+    if (cardEl) cardEl.classList.remove("selected");
 
-    if (DEBUG) console.log("[app] step result", data);
+    if (APP_DEBUG) console.log("[app] step result", data);
   } catch (e) {
     _removeThinkingBubble(thinkId);
     _showError("Move failed: " + e.message);
-    if (DEBUG) console.log("[app] submitMove error", e);
+    if (APP_DEBUG) console.log("[app] submitMove error", e);
   } finally {
     setLoading(false);
   }
 }
 
+function _mockStepData(offer, move) {
+  gameState.turnCount += 1;
+  const obs = gameState.observation || {};
+  const tension = Math.min(100, (obs.tension_score || 10) + 5);
+  return {
+    observation: { ...obs, tension_score: tension, step_count: (obs.step_count || 0) + 1 },
+    opponent_message: "That's an interesting position. Let me consider it.",
+    opponent: { utterance: "That's an interesting position. Let me consider it.", offer: null },
+    done: false,
+  };
+}
+
 async function acceptDeal() {
   if (gameState.done || !gameState.sessionId) return;
   const offerInput = document.getElementById("offer-input");
-  const offer      = offerInput ? parseFloat(offerInput.value.replace(/[$,]/g, "")) : null;
+  const offer = offerInput ? parseFloat(offerInput.value.replace(/[$,]/g, "")) : null;
 
   addMessage("player", "I accept the deal.", offer, "accept");
   const thinkId = _showThinkingBubble();
   setLoading(true);
 
   try {
-    const res = await fetch(`${API_BASE}/api/game/step`, {
+    const res = await fetch(`${API_BASE}/api/game/accept`, {
       method:  "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ session_id: gameState.sessionId, move: "accept", offer_amount: offer }),
+      body: JSON.stringify({ session_id: gameState.sessionId }),
     });
 
-    const data = await res.json();
+    const data = res.ok ? await res.json() : { deal_reached: true, deal_amount: offer, reward: 0 };
     _removeThinkingBubble(thinkId);
     gameState.done = true;
     updateUI(data);
-    if (data.opponent_message) addMessage("opponent", data.opponent_message, null, "accept");
-    _handleGameOver(data);
-    if (DEBUG) console.log("[app] acceptDeal", data);
+    addMessage("system", "Deal accepted.");
+    _handleGameOver({ ...data, deal_reached: true, deal_amount: offer ?? data.final_price });
+    if (APP_DEBUG) console.log("[app] acceptDeal", data);
   } catch (e) {
     _removeThinkingBubble(thinkId);
     _showError(e.message);
@@ -279,19 +456,18 @@ async function walkAway() {
   setLoading(true);
 
   try {
-    const res = await fetch(`${API_BASE}/api/game/step`, {
+    const res = await fetch(`${API_BASE}/api/game/walkaway`, {
       method:  "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ session_id: gameState.sessionId, move: "walk_away" }),
+      body: JSON.stringify({ session_id: gameState.sessionId }),
     });
 
-    const data = await res.json();
+    const data = res.ok ? await res.json() : { result: "walk_away" };
     _removeThinkingBubble(thinkId);
     gameState.done = true;
     updateUI(data);
-    if (data.opponent_message) addMessage("opponent", data.opponent_message, null, "walk");
-    _handleGameOver(data);
-    if (DEBUG) console.log("[app] walkAway", data);
+    _handleGameOver({ deal_reached: false, reward: 0 });
+    if (APP_DEBUG) console.log("[app] walkAway", data);
   } catch (e) {
     _removeThinkingBubble(thinkId);
     _showError(e.message);
@@ -303,26 +479,29 @@ async function walkAway() {
 async function loadScenarios() {
   try {
     const res = await fetch(`${API_BASE}/api/scenarios`);
-    if (!res.ok) return;
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
     const data = await res.json();
     const scenarios = data.scenarios || data || [];
-    _renderScenarioOptions(scenarios);
-    if (DEBUG) console.log("[app] scenarios loaded", scenarios);
+    _renderScenarioDossiers(scenarios);
+    if (APP_DEBUG) console.log("[app] scenarios loaded", scenarios.length);
   } catch (e) {
-    if (DEBUG) console.log("[app] loadScenarios error", e);
+    // Render defaults so onboarding UI isn't empty
+    _renderScenarioDossiers([]);
+    if (APP_DEBUG) console.log("[app] loadScenarios error", e);
   }
 }
 
 async function loadPersonas() {
   try {
     const res = await fetch(`${API_BASE}/api/personas`);
-    if (!res.ok) return;
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
     const data = await res.json();
     const personas = data.personas || data || [];
-    _renderPersonaOptions(personas);
-    if (DEBUG) console.log("[app] personas loaded", personas);
+    _renderPersonaCards(personas);
+    if (APP_DEBUG) console.log("[app] personas loaded", personas.length);
   } catch (e) {
-    if (DEBUG) console.log("[app] loadPersonas error", e);
+    _renderPersonaCards([]);
+    if (APP_DEBUG) console.log("[app] loadPersonas error", e);
   }
 }
 
@@ -331,11 +510,10 @@ async function loadLeaderboard() {
     const res = await fetch(`${API_BASE}/api/leaderboard?limit=5`);
     if (!res.ok) return;
     const data = await res.json();
-    const entries = data.entries || data || [];
-    renderLeaderboard(entries);
-    if (DEBUG) console.log("[app] leaderboard loaded", entries);
+    renderLeaderboard(data.entries || data || []);
+    if (APP_DEBUG) console.log("[app] leaderboard loaded");
   } catch (e) {
-    if (DEBUG) console.log("[app] loadLeaderboard error", e);
+    if (APP_DEBUG) console.log("[app] loadLeaderboard error", e);
   }
 }
 
@@ -364,42 +542,53 @@ function updateUI(response) {
   }
 
   // Sparkline update
-  if (charts && charts.offerSparkline && obs) {
+  if (charts && obs) {
     const playerOffer   = obs.player_offer   ?? obs.your_offer   ?? null;
     const opponentOffer = obs.opponent_offer ?? null;
     if (playerOffer !== null || opponentOffer !== null) {
-      charts.updateOfferSparkline(playerOffer, opponentOffer, gameState.turnCount);
+      charts.updateOfferSparkline && charts.updateOfferSparkline(playerOffer, opponentOffer, gameState.turnCount);
+    }
+    if (obs.belief_state) {
+      charts.updateBeliefChart && charts.updateBeliefChart(obs.belief_state);
     }
   }
 
-  // ToM belief chart update
-  if (charts && charts.beliefChart && obs?.belief_state) {
-    charts.updateBeliefChart(obs.belief_state);
-  }
-
-  // Achievements
   const achievements = response.achievements || obs?.achievements;
   if (achievements) showAchievements(achievements);
 
-  // Update player avatar initial
   const avatarEl = document.getElementById("player-avatar");
   if (avatarEl && gameState.playerName) {
     avatarEl.textContent = gameState.playerName.charAt(0).toUpperCase();
   }
-
   const nameEl = document.getElementById("player-name-display");
   if (nameEl) nameEl.textContent = gameState.playerName;
 
-  // Disable inputs when done
   _setInputsDisabled(gameState.done);
 }
 
+function _updateScenarioHeader(data) {
+  const titleEl = document.getElementById("scenario-title");
+  const metaEl  = document.getElementById("scenario-meta");
+  const sc = data.scenario || {};
+  if (titleEl) titleEl.textContent = sc.title || data.scenario_id || "Negotiation";
+  if (metaEl)  metaEl.textContent  = sc.description || "";
+}
+
+function _updatePersonaPanel(data) {
+  const p = data.persona || {};
+  const nameEl = document.getElementById("persona-name");
+  const descEl = document.getElementById("persona-desc");
+  const avatEl = document.getElementById("persona-avatar");
+  if (nameEl) nameEl.textContent = p.name || _personaLabel(gameState.persona);
+  if (descEl) descEl.textContent = p.style || "";
+  if (avatEl) avatEl.textContent = p.symbol || p.emoji || "◈";
+}
+
 // ── Message Bubbles ────────────────────────────────────────────
 function addMessage(role, text, offer, move) {
   const thread = document.getElementById("chat-thread");
-  if (!thread) return;
+  if (!thread) return null;
 
-  // Remove thinking bubble if any
   const existing = thread.querySelector(".thinking-bubble");
   if (existing) existing.remove();
 
@@ -409,13 +598,15 @@ function addMessage(role, text, offer, move) {
     sys.textContent = text;
     thread.appendChild(sys);
     _scrollThread(thread);
-    return;
+    return null;
   }
 
   const bubble = document.createElement("div");
   bubble.className = `message-bubble ${role}`;
+  if (role === "opponent" && gameState.persona) {
+    bubble.setAttribute("data-persona", gameState.persona);
+  }
 
-  // Meta row
   const meta = document.createElement("div");
   meta.className = "bubble-meta";
 
@@ -426,16 +617,14 @@ function addMessage(role, text, offer, move) {
   if (move) {
     const pill = document.createElement("span");
     pill.className = `move-pill ${move}`;
-    pill.textContent = move.replace("_", " ");
+    pill.textContent = move.replace(/_/g, " ");
     meta.appendChild(pill);
   }
 
-  // Body
   const body = document.createElement("div");
   body.className = "bubble-body";
   body.textContent = text;
 
-  // Offer chip
   if (offer != null && !isNaN(offer)) {
     const chip = document.createElement("div");
     chip.className = "offer-chip";
@@ -447,13 +636,14 @@ function addMessage(role, text, offer, move) {
   bubble.appendChild(body);
   thread.appendChild(bubble);
   _scrollThread(thread);
+  return bubble;
 }
 
 function _showThinkingBubble() {
   const thread = document.getElementById("chat-thread");
   if (!thread) return null;
 
-  const id = "thinking-" + Date.now();
+  const id   = "thinking-" + Date.now();
   const wrap = document.createElement("div");
   wrap.className = "thinking-bubble";
   wrap.id = id;
@@ -476,9 +666,7 @@ function _removeThinkingBubble(id) {
 }
 
 function _scrollThread(thread) {
-  requestAnimationFrame(() => {
-    thread.scrollTop = thread.scrollHeight;
-  });
+  requestAnimationFrame(() => { thread.scrollTop = thread.scrollHeight; });
 }
 
 // ── ZOPA Bar ──────────────────────────────────────────────────
@@ -486,19 +674,16 @@ function updateZOPABar(observation) {
   const track = document.getElementById("zopa-track");
   if (!track) return;
 
-  const batnaPlayer   = observation.player_batna   ?? observation.your_batna   ?? 0;
-  const batnaOpponent = observation.opponent_batna ?? observation.opp_batna    ?? 100;
+  const batnaPlayer   = observation.player_batna   ?? observation.your_batna   ?? observation.zopa_lower  ?? 0;
+  const batnaOpponent = observation.opponent_batna ?? observation.opp_batna    ?? observation.zopa_upper  ?? 100;
   const currentOffer  = observation.opponent_offer ?? observation.player_offer  ?? null;
   const nash          = observation.nash_point     ?? null;
 
-  // Determine scale
   const minVal = Math.min(batnaPlayer, batnaOpponent) * 0.9;
   const maxVal = Math.max(batnaPlayer, batnaOpponent) * 1.1;
   const range  = maxVal - minVal || 1;
+  const pct    = (v) => `${Math.max(0, Math.min(100, ((v - minVal) / range) * 100)).toFixed(1)}%`;
 
-  const pct = (v) => `${Math.max(0, Math.min(100, ((v - minVal) / range) * 100)).toFixed(1)}%`;
-
-  // ZOPA zone
   const zopaZone = document.getElementById("zopa-zone");
   if (zopaZone) {
     const lo = Math.min(batnaPlayer, batnaOpponent);
@@ -507,35 +692,28 @@ function updateZOPABar(observation) {
     zopaZone.style.width = `${(((hi - lo) / range) * 100).toFixed(1)}%`;
   }
 
-  // Player BATNA marker
   const mPlayer = document.getElementById("marker-player");
   if (mPlayer) mPlayer.style.left = pct(batnaPlayer);
 
-  // Opponent BATNA marker
   const mOpponent = document.getElementById("marker-opponent");
   if (mOpponent) mOpponent.style.left = pct(batnaOpponent);
 
-  // Current offer marker
   const mCurrent = document.getElementById("marker-current");
   if (mCurrent && currentOffer != null) {
     mCurrent.style.left    = pct(currentOffer);
     mCurrent.style.display = "flex";
   }
 
-  // Nash diamond
   const nashEl = document.getElementById("nash-diamond");
   if (nashEl && nash != null) {
     nashEl.style.left    = pct(nash);
     nashEl.style.display = "block";
   }
 
-  // Labels
   const lblLow  = document.getElementById("zopa-label-low");
   const lblHigh = document.getElementById("zopa-label-high");
   if (lblLow)  lblLow.textContent  = formatCurrency(minVal, "USD");
   if (lblHigh) lblHigh.textContent = formatCurrency(maxVal, "USD");
-
-  if (DEBUG) console.log("[app] updateZOPABar", { batnaPlayer, batnaOpponent, currentOffer, nash });
 }
 
 // ── Tension Meter ─────────────────────────────────────────────
@@ -544,12 +722,13 @@ function updateTensionMeter(tensionScore) {
   const value = document.getElementById("tension-value");
   if (!fill) return;
 
-  const pct = Math.max(0, Math.min(100, (tensionScore || 0) * 100));
+  // tensionScore arrives as 0–100 from the server
+  const pct = Math.max(0, Math.min(100, tensionScore || 0));
   fill.style.width = `${pct}%`;
 
   let level = "low";
-  if (pct >= 70)      level = "high";
-  else if (pct >= 40) level = "medium";
+  if (pct >= 75)      level = "high";
+  else if (pct >= 50) level = "medium";
 
   fill.setAttribute("data-level", level);
 
@@ -573,28 +752,20 @@ function updateBeliefBars(beliefState) {
   };
 
   Object.entries(mapping).forEach(([id, val]) => {
-    const fill    = document.getElementById(id + "-fill");
-    const pctEl   = document.getElementById(id + "-pct");
-    const confEl  = document.getElementById(id + "-conf");
-
+    const fill  = document.getElementById(id + "-fill");
+    const pctEl = document.getElementById(id + "-pct");
+    const confEl= document.getElementById(id + "-conf");
     if (!fill) return;
     const pct = Math.max(0, Math.min(100, val * 100));
     fill.style.width = `${pct.toFixed(1)}%`;
     if (pctEl) pctEl.textContent = `${Math.round(pct)}%`;
-
-    // Confidence dot
     if (confEl) {
       const conf = pct > 60 ? "high" : pct > 30 ? "medium" : "low";
       confEl.className = `belief-confidence confidence-${conf}`;
     }
   });
 
-  // Update chart
-  if (charts && charts.beliefChart) {
-    charts.updateBeliefChart(beliefState);
-  }
-
-  if (DEBUG) console.log("[app] updateBeliefBars", beliefState);
+  if (charts && charts.updateBeliefChart) charts.updateBeliefChart(beliefState);
 }
 
 // ── CP Bar ────────────────────────────────────────────────────
@@ -602,7 +773,6 @@ function updateCPBar(cp) {
   const fill  = document.getElementById("cp-fill");
   const value = document.getElementById("cp-value");
   if (!fill) return;
-
   const maxCp = gameState.maxCp || 100;
   const pct   = Math.max(0, Math.min(100, (cp / maxCp) * 100));
   fill.style.width = `${pct}%`;
@@ -618,12 +788,23 @@ function updateCharacterState(observation) {
 
   let state = "idle";
   if (drift)          state = "shocked";
-  else if (tension > 0.7) state = "aggressive";
-  else if (tension > 0.4) state = "thinking";
-  else if (tension < 0.2 && gameState.turnCount > 0) state = "pleased";
+  else if (tension > 75) state = "aggressive";
+  else if (tension > 50) state = "thinking";
+  else if (tension < 25 && gameState.turnCount > 0) state = "pleased";
 
   character.setState(state);
-  if (DEBUG) console.log("[app] character state:", state);
+
+  // After drift: revert to aggressive after 2s
+  if (drift && character) {
+    setTimeout(() => {
+      if (character && gameState.sessionId) character.setState("aggressive");
+    }, 2000);
+  }
+
+  const label = document.getElementById("character-state-label");
+  if (label) label.textContent = state;
+
+  if (APP_DEBUG) console.log("[app] character state:", state, "tension:", tension);
 }
 
 // ── Drift Alert ───────────────────────────────────────────────
@@ -633,16 +814,13 @@ function showDriftAlert(driftEvent) {
 
   const text = document.getElementById("drift-alert-text");
   if (text) {
-    if (typeof driftEvent === "string") {
-      text.textContent = driftEvent;
-    } else {
-      text.textContent = driftEvent.description || driftEvent.event || "Market conditions have shifted.";
-    }
+    text.textContent = typeof driftEvent === "string"
+      ? driftEvent
+      : (driftEvent.description || driftEvent.event || "Market conditions have shifted.");
   }
 
   bar.classList.remove("hidden");
 
-  // Auto-dismiss after 8 seconds
   if (_driftTimer) clearTimeout(_driftTimer);
   _driftTimer = setTimeout(dismissDriftAlert, 8000);
 }
@@ -658,56 +836,53 @@ function renderHand(hand) {
   const container = document.getElementById("hand-container");
   if (!container) return;
 
-  container.innerHTML = "";  // safe — no user data in card definitions
+  container.innerHTML = "";  // safe — card definitions contain no user data
+
+  if (!hand || !hand.length) return;
 
   hand.forEach((card) => {
     const wrapper = document.createElement("div");
     wrapper.className = "tactical-card";
-    wrapper.dataset.cardId = card.id || card.card_id || "";
+    wrapper.dataset.cardId = card.id || card.card_id || card.move || "";
 
     const inner = document.createElement("div");
     inner.className = "card-inner";
 
-    // Front
     const front = document.createElement("div");
     front.className = "card-face";
 
     const name = document.createElement("div");
     name.className = "card-name";
-    name.textContent = card.name || "Tactic";
+    name.textContent = card.name || card.move || "Tactic";
+    front.appendChild(name);
 
     const type = document.createElement("div");
     type.className = "card-type";
-    type.textContent = card.type || "";
+    type.textContent = card.type || card.move || "";
+    front.appendChild(type);
 
     const cost = document.createElement("div");
     cost.className = "card-cost";
-    cost.textContent = card.cp_cost ?? card.cost ?? "1";
-
-    front.appendChild(name);
-    front.appendChild(type);
+    cost.textContent = `${card.cp_cost ?? card.cost ?? "—"} CP`;
     front.appendChild(cost);
 
-    // Back
     const back = document.createElement("div");
     back.className = "card-back";
 
     const backLabel = document.createElement("div");
     backLabel.className = "card-back-label";
     backLabel.textContent = "Game Theory";
+    back.appendChild(backLabel);
 
     const gt = document.createElement("div");
     gt.className = "card-game-theory";
     gt.textContent = card.game_theory_basis || card.description || "";
-
-    back.appendChild(backLabel);
     back.appendChild(gt);
 
     inner.appendChild(front);
     inner.appendChild(back);
     wrapper.appendChild(inner);
 
-    // Selection
     wrapper.addEventListener("click", () => {
       const already = wrapper.classList.contains("selected");
       container.querySelectorAll(".tactical-card").forEach(c => c.classList.remove("selected"));
@@ -716,18 +891,15 @@ function renderHand(hand) {
 
     container.appendChild(wrapper);
   });
-
-  if (DEBUG) console.log("[app] renderHand", hand.length, "cards");
 }
 
 // ── Leaderboard ───────────────────────────────────────────────
 function renderLeaderboard(entries) {
   const tbody = document.getElementById("leaderboard-body");
   if (!tbody) return;
-
   tbody.innerHTML = "";
 
-  if (!entries || entries.length === 0) {
+  if (!entries || !entries.length) {
     const tr = document.createElement("tr");
     const td = document.createElement("td");
     td.colSpan = 4;
@@ -740,48 +912,36 @@ function renderLeaderboard(entries) {
 
   entries.forEach((entry, idx) => {
     const tr = document.createElement("tr");
+    if (entry.player_name === gameState.playerName) tr.classList.add("highlight-player");
 
-    // Highlight current player
-    if (entry.player_name === gameState.playerName) {
-      tr.classList.add("highlight-player");
-    }
-
-    // Rank
     const rankTd = document.createElement("td");
     const rankSpan = document.createElement("span");
-    rankSpan.className = "lb-rank" +
-      (idx === 0 ? " gold" : idx === 1 ? " silver" : idx === 2 ? " bronze" : "");
+    rankSpan.className = "lb-rank" + (idx === 0 ? " gold" : idx === 1 ? " silver" : idx === 2 ? " bronze" : "");
     rankSpan.textContent = `#${idx + 1}`;
     rankTd.appendChild(rankSpan);
     tr.appendChild(rankTd);
 
-    // Name
     const nameTd = document.createElement("td");
     nameTd.textContent = entry.player_name || "—";
     tr.appendChild(nameTd);
 
-    // Score
     const scoreTd = document.createElement("td");
     scoreTd.className = "num";
-    scoreTd.textContent = (entry.score ?? entry.reward ?? 0).toFixed(2);
+    scoreTd.textContent = (entry.score ?? entry.total_reward ?? entry.reward ?? 0).toFixed(2);
     tr.appendChild(scoreTd);
 
-    // Deals
     const dealsTd = document.createElement("td");
     dealsTd.className = "num";
-    dealsTd.textContent = entry.deals ?? "—";
+    dealsTd.textContent = entry.deals ?? (entry.deal_closed ? "✓" : "—");
     tr.appendChild(dealsTd);
 
     tbody.appendChild(tr);
   });
-
-  if (DEBUG) console.log("[app] renderLeaderboard", entries.length, "entries");
 }
 
 // ── Achievements ──────────────────────────────────────────────
 function showAchievements(achievements) {
   if (!achievements || !Array.isArray(achievements)) return;
-
   achievements.forEach((ach) => {
     const el = document.querySelector(`.badge[data-achievement="${ach.id}"]`);
     if (el && !el.classList.contains("earned")) {
@@ -795,10 +955,11 @@ function _showToast(msg) {
   const toast = document.createElement("div");
   toast.style.cssText = [
     "position:fixed", "bottom:24px", "right:24px", "z-index:9999",
-    "background:var(--parlay-surface)", "border:1px solid var(--parlay-border)",
-    "border-radius:8px", "padding:12px 16px",
-    "font-size:0.875rem", "font-weight:500",
-    "color:var(--parlay-ink)", "box-shadow:0 4px 16px rgba(0,0,0,0.12)",
+    "background:var(--mahogany)", "border:1px solid var(--gold)",
+    "border-radius:6px", "padding:12px 20px",
+    "font-family:var(--font-display)", "font-style:italic",
+    "font-size:0.9rem", "color:var(--cream)",
+    "box-shadow:0 4px 16px rgba(0,0,0,0.4)",
     "animation:slide-down 200ms ease",
   ].join(";");
   toast.textContent = msg;
@@ -808,18 +969,15 @@ function _showToast(msg) {
 
 // ── Game Over ─────────────────────────────────────────────────
 function _handleGameOver(data) {
-  const deal    = data.deal_reached ?? data.deal ?? false;
-  const amount  = data.deal_amount  ?? data.final_offer ?? null;
-  const score   = data.reward       ?? data.score       ?? 0;
+  const deal   = data.deal_reached ?? data.deal ?? false;
+  const amount = data.deal_amount  ?? data.final_price ?? null;
+  const score  = data.reward       ?? data.total_reward ?? data.score ?? 0;
 
-  // Show result in chat
   const resultMsg = deal
-    ? `Deal reached at ${formatCurrency(amount, "USD")}! Score: ${score.toFixed(2)}`
-    : "No deal. You walked away.";
-
+    ? `Deal closed at ${formatCurrency(amount, "USD")}! Score: ${score.toFixed(2)}`
+    : "No deal. You walked away from the table.";
   addMessage("system", resultMsg);
 
-  // Show result banner
   const banner = document.getElementById("result-banner");
   if (banner) {
     banner.className = `result-banner ${deal ? "deal" : "walk"}`;
@@ -829,127 +987,192 @@ function _handleGameOver(data) {
     if (title) title.textContent = deal ? "Deal Closed" : "Walked Away";
 
     const amountEl = banner.querySelector(".result-amount");
-    if (amountEl && amount != null) amountEl.textContent = formatCurrency(amount, "USD");
-    else if (amountEl) amountEl.textContent = "—";
+    if (amountEl) amountEl.textContent = amount != null ? formatCurrency(amount, "USD") : "—";
 
     const scoreEl = banner.querySelector(".result-score");
     if (scoreEl) scoreEl.textContent = `Score: ${score.toFixed(2)}`;
   }
 
-  // Character state
   if (character) character.setState(deal ? "pleased" : "shocked");
-
-  // Refresh leaderboard after short delay
   setTimeout(loadLeaderboard, 1200);
 
-  if (DEBUG) console.log("[app] game over", { deal, amount, score });
+  if (APP_DEBUG) console.log("[app] game over", { deal, amount, score });
 }
 
-// ── Scenario / Persona Selectors ──────────────────────────────
-function _renderScenarioOptions(scenarios) {
-  const grid = document.getElementById("scenario-grid");
+// ── Scenario Dossier Cards ────────────────────────────────────
+function _renderScenarioDossiers(scenarios) {
+  const grid = document.getElementById("scenario-dossier-grid");
   if (!grid) return;
-
   grid.innerHTML = "";
 
-  if (!scenarios.length) {
-    // Fallback defaults so UI isn't empty
-    scenarios = [
-      { id: "merger",     name: "M&A Deal",         description: "Acquire a fintech startup", difficulty: "Medium" },
-      { id: "salary",     name: "Salary Negotiation",description: "Land the offer you deserve", difficulty: "Easy" },
-      { id: "licensing",  name: "IP Licensing",      description: "Patent licensing deal",      difficulty: "Hard" },
-      { id: "supply",     name: "Supply Contract",   description: "Commodity procurement",      difficulty: "Medium" },
-    ];
-  }
+  const defaults = [
+    { id: "saas_enterprise",        title: "Enterprise SaaS",       description: "500-seat analytics platform",     zopa_lower: 125000,  zopa_upper: 165000,  difficulty: 2 },
+    { id: "consulting_retainer",    title: "Consulting Retainer",   description: "Monthly strategy retainer",       zopa_lower: 25000,   zopa_upper: 40000,   difficulty: 1 },
+    { id: "hiring_package",         title: "Senior Eng. Offer",     description: "Total comp negotiation",          zopa_lower: 195000,  zopa_upper: 230000,  difficulty: 2 },
+    { id: "vendor_hardware",        title: "Hardware Contract",     description: "200-unit bulk purchase",          zopa_lower: 1750000, zopa_upper: 2200000, difficulty: 3 },
+    { id: "acquisition_term_sheet", title: "Startup Acquisition",   description: "Acqui-hire term sheet",           zopa_lower: 10500000,zopa_upper:16000000, difficulty: 3 },
+  ];
 
-  scenarios.forEach((s) => {
+  const list = (scenarios && scenarios.length) ? scenarios : defaults;
+  const diffLabels = ["", "Easy", "Medium", "Hard"];
+  let caseNum = 1;
+
+  list.forEach((s) => {
     const card = document.createElement("div");
-    card.className = "selector-card";
+    card.className = "scenario-dossier";
     card.dataset.scenarioId = s.id || s.scenario_id;
-
-    const name = document.createElement("div");
-    name.className = "selector-card-name";
-    name.textContent = s.name || s.title;
-
-    const meta = document.createElement("div");
-    meta.className = "selector-card-meta";
-    meta.textContent = (s.description || "") + (s.difficulty ? ` · ${s.difficulty}` : "");
-
-    card.appendChild(name);
-    card.appendChild(meta);
+    card.setAttribute("role", "radio");
+    card.setAttribute("tabindex", "0");
+
+    const caseEl = document.createElement("div");
+    caseEl.className = "dossier-case";
+    caseEl.textContent = `CASE ${String(caseNum++).padStart(3, "0")}`;
+    card.appendChild(caseEl);
+
+    const diffEl = document.createElement("div");
+    diffEl.className = "dossier-difficulty";
+    diffEl.textContent = diffLabels[s.difficulty ?? 2] || "Medium";
+    card.appendChild(diffEl);
+
+    const titleEl = document.createElement("div");
+    titleEl.className = "dossier-title";
+    titleEl.textContent = s.title || s.name;
+    card.appendChild(titleEl);
+
+    const descEl = document.createElement("div");
+    descEl.className = "dossier-desc";
+    descEl.textContent = s.description || "";
+    card.appendChild(descEl);
+
+    const zopaLo = s.zopa_lower ?? s.zopa?.[0] ?? 0;
+    const zopaHi = s.zopa_upper ?? s.zopa?.[1] ?? 0;
+    const zopaEl = document.createElement("div");
+    zopaEl.className = "dossier-zopa";
+    zopaEl.textContent = `ZOPA ${formatCurrency(zopaLo, "USD")} – ${formatCurrency(zopaHi, "USD")}`;
+    card.appendChild(zopaEl);
 
     card.addEventListener("click", () => {
-      grid.querySelectorAll(".selector-card").forEach(c => c.classList.remove("selected"));
+      grid.querySelectorAll(".scenario-dossier").forEach(c => c.classList.remove("selected"));
       card.classList.add("selected");
     });
+    card.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" || e.key === " ") { e.preventDefault(); card.click(); }
+    });
 
     grid.appendChild(card);
   });
 }
 
-function _renderPersonaOptions(personas) {
-  const grid = document.getElementById("persona-grid");
+// ── Persona Cards ──────────────────────────────────────────────
+function _renderPersonaCards(personas) {
+  const grid = document.getElementById("persona-cards-grid");
   if (!grid) return;
-
   grid.innerHTML = "";
 
   const defaults = [
-    { id: "shark",    name: "Shark",    icon: "🦈" },
-    { id: "diplomat", name: "Diplomat", icon: "🕊️" },
-    { id: "analyst",  name: "Analyst",  icon: "📊" },
-    { id: "wildcard", name: "Wildcard", icon: "🃏" },
-    { id: "veteran",  name: "Veteran",  icon: "⚔️" },
+    { id: "shark",    name: "The Shark",    symbol: "◈", aggression: 0.88, patience: 0.18, bluff_rate: 0.72 },
+    { id: "diplomat", name: "The Diplomat", symbol: "◎", aggression: 0.20, patience: 0.85, bluff_rate: 0.15 },
+    { id: "analyst",  name: "The Analyst",  symbol: "◻", aggression: 0.35, patience: 0.90, bluff_rate: 0.10 },
+    { id: "wildcard", name: "The Wildcard", symbol: "◇", aggression: 0.60, patience: 0.25, bluff_rate: 0.65 },
+    { id: "veteran",  name: "The Veteran",  symbol: "◆", aggression: 0.50, patience: 0.95, bluff_rate: 0.45 },
   ];
 
   const list = (personas && personas.length) ? personas : defaults;
 
   list.forEach((p) => {
-    const opt = document.createElement("div");
-    opt.className = "persona-option";
-    opt.dataset.persona = p.id || p.persona_id;
+    const pid = p.id || p.persona_id;
 
-    const icon = document.createElement("div");
-    icon.className = "persona-option-icon";
-    icon.textContent = p.icon || "🃏";
+    const card = document.createElement("div");
+    card.className = "persona-card-option";
+    card.dataset.persona = pid;
+    card.setAttribute("role", "radio");
+    card.setAttribute("tabindex", "0");
+
+    // Mini Three.js preview canvas
+    const canvasWrap = document.createElement("div");
+    canvasWrap.className = "persona-card-canvas-wrap";
+    const previewCanvas = document.createElement("canvas");
+    previewCanvas.width  = 280;
+    previewCanvas.height = 200;
+    canvasWrap.appendChild(previewCanvas);
+    card.appendChild(canvasWrap);
+
+    const nameEl = document.createElement("div");
+    nameEl.className = "persona-card-name";
+    nameEl.textContent = p.name || pid;
+    card.appendChild(nameEl);
+
+    const symEl = document.createElement("div");
+    symEl.className = "persona-card-symbol";
+    symEl.textContent = p.symbol || "◈";
+    card.appendChild(symEl);
+
+    // Trait bars
+    const traits = document.createElement("div");
+    traits.className = "persona-trait-bars";
+    [
+      { label: "AGG", val: p.aggression ?? 0.5 },
+      { label: "PAT", val: p.patience   ?? 0.5 },
+    ].forEach(({ label, val }) => {
+      const row = document.createElement("div");
+      row.className = "persona-trait-row";
+      const lbl = document.createElement("div");
+      lbl.className = "persona-trait-label";
+      lbl.textContent = label;
+      const bar = document.createElement("div");
+      bar.className = "persona-trait-bar";
+      const fill = document.createElement("div");
+      fill.className = "persona-trait-fill";
+      fill.style.width = `${Math.round(val * 100)}%`;
+      bar.appendChild(fill);
+      row.appendChild(lbl);
+      row.appendChild(bar);
+      traits.appendChild(row);
+    });
+    card.appendChild(traits);
 
-    const name = document.createElement("div");
-    name.className = "persona-option-name";
-    name.textContent = p.name || p.id;
+    // Click selection
+    card.addEventListener("click", () => {
+      grid.querySelectorAll(".persona-card-option").forEach(c => c.classList.remove("selected"));
+      card.classList.add("selected");
+    });
+    card.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" || e.key === " ") { e.preventDefault(); card.click(); }
+    });
 
-    opt.appendChild(icon);
-    opt.appendChild(name);
+    grid.appendChild(card);
 
-    opt.addEventListener("click", () => {
-      grid.querySelectorAll(".persona-option").forEach(c => c.classList.remove("selected"));
-      opt.classList.add("selected");
+    // Spin up a PersonaPreviewCharacter after DOM insert
+    requestAnimationFrame(() => {
+      if (typeof PersonaPreviewCharacter !== "undefined") {
+        const prev = new PersonaPreviewCharacter(previewCanvas, pid);
+        _previewChars[pid] = prev;
+      }
     });
-
-    grid.appendChild(opt);
   });
 }
 
+function _destroyPreviewChars() {
+  Object.values(_previewChars).forEach(c => { try { c.destroy(); } catch {} });
+  _previewChars = {};
+}
+
 // ── Character init ────────────────────────────────────────────
 function _initCharacter(persona) {
-  if (typeof NegotiatorCharacter === "undefined") {
-    if (DEBUG) console.log("[app] NegotiatorCharacter not available");
-    return;
-  }
+  if (typeof NegotiatorCharacter === "undefined") return;
   if (character) character.destroy();
   character = new NegotiatorCharacter("character-canvas", persona || "shark");
-  if (DEBUG) console.log("[app] character created for persona:", persona);
+  if (APP_DEBUG) console.log("[app] character created for persona:", persona);
 }
 
 // ── Sparkline init ────────────────────────────────────────────
 function _initSparkline(observation) {
   if (!charts || !observation) return;
-
-  const lo = observation.player_batna   ?? observation.your_batna   ?? 0;
-  const hi = observation.opponent_batna ?? observation.opp_batna    ?? 0;
-  const nash = observation.nash_point   ?? ((lo + hi) / 2);
-
-  charts.initOfferSparkline("offer-sparkline", lo, hi, nash);
-  charts.initBeliefChart("belief-chart");
-  if (DEBUG) console.log("[app] sparkline init", { lo, hi, nash });
+  const lo   = observation.player_batna   ?? observation.your_batna   ?? observation.zopa_lower  ?? 0;
+  const hi   = observation.opponent_batna ?? observation.opp_batna    ?? observation.zopa_upper  ?? 0;
+  const nash = observation.nash_point     ?? ((lo + hi) / 2);
+  charts.initOfferSparkline && charts.initOfferSparkline("offer-sparkline", lo, hi, nash);
+  charts.initBeliefChart    && charts.initBeliefChart("belief-chart");
 }
 
 // ── Helpers ───────────────────────────────────────────────────
@@ -957,8 +1180,7 @@ function formatCurrency(amount, currency) {
   if (amount == null || isNaN(amount)) return "—";
   try {
     return new Intl.NumberFormat("en-US", {
-      style: "currency",
-      currency: currency || "USD",
+      style: "currency", currency: currency || "USD",
       maximumFractionDigits: 0,
     }).format(amount);
   } catch {
@@ -968,11 +1190,7 @@ function formatCurrency(amount, currency) {
 
 function setLoading(isLoading) {
   const overlay = document.getElementById("loading-overlay");
-  if (overlay) {
-    overlay.classList.toggle("hidden", !isLoading);
-  }
-
-  // Disable action buttons during load
+  if (overlay) overlay.classList.toggle("hidden", !isLoading);
   ["btn-submit", "btn-accept", "btn-walk"].forEach(id => {
     const btn = document.getElementById(id);
     if (btn) btn.disabled = isLoading;
@@ -980,8 +1198,7 @@ function setLoading(isLoading) {
 }
 
 function _setInputsDisabled(disabled) {
-  const ids = ["offer-input", "move-select", "btn-submit", "btn-accept", "btn-walk"];
-  ids.forEach(id => {
+  ["offer-input", "move-select", "btn-submit", "btn-accept", "btn-walk"].forEach(id => {
     const el = document.getElementById(id);
     if (el) el.disabled = disabled;
   });
@@ -992,7 +1209,7 @@ function _updateActPills(act) {
     const pill = document.getElementById(`act-pill-${n}`);
     if (!pill) return;
     pill.classList.remove("active", "completed");
-    if (n < act)       pill.classList.add("completed");
+    if (n < act)        pill.classList.add("completed");
     else if (n === act) pill.classList.add("active");
   });
 }
@@ -1002,20 +1219,20 @@ function _moveSummary(move, offer) {
     case "anchor":    return `Anchoring at ${formatCurrency(offer, "USD")}.`;
     case "counter":   return `Counter offer: ${formatCurrency(offer, "USD")}.`;
     case "concede":   return `Concession: ${formatCurrency(offer, "USD")}.`;
-    case "package":   return `Package deal offer: ${formatCurrency(offer, "USD")}.`;
+    case "package":   return `Package deal: ${formatCurrency(offer, "USD")}.`;
     case "accept":    return "Accepting the deal.";
-    case "walk_away": return "Walking away.";
+    case "walk_away": return "Walking away from the table.";
     default:          return offer != null ? formatCurrency(offer, "USD") : move;
   }
 }
 
 function _personaLabel(persona) {
   const labels = {
-    shark:    "Shark (aggressive closer)",
-    diplomat: "Diplomat (relationship-first)",
-    analyst:  "Analyst (data-driven)",
-    wildcard: "Wildcard (unpredictable)",
-    veteran:  "Veteran (experience-led)",
+    shark:    "The Shark",
+    diplomat: "The Diplomat",
+    analyst:  "The Analyst",
+    wildcard: "The Wildcard",
+    veteran:  "The Veteran",
   };
   return labels[persona] || persona;
 }

dashboard/static/character.js

@@ -1,48 +1,155 @@
 // ============================================================
-// Parlay — Three.js r128 Negotiator Character System
-// Bloomberg terminal meets poker app.
-// MUST be loaded AFTER Three.js r128 from cdnjs.
+// Parlay — Three.js r128 Character System
+// "The Deal Room" — 1960s Madison Avenue boardroom aesthetic.
+// Loaded AFTER Three.js r128 from cdnjs.
+// NO CapsuleGeometry. NO OrbitControls.
 // ============================================================
 
+// ── State definitions ─────────────────────────────────────────────────────
 const CHARACTER_STATES = {
-  idle:       { headTilt: 0,     eyeScale: 1.0, animSpeed: 0.5,  mouthOpen: 0,   mouthCurve: 0    },
-  thinking:   { headTilt: 0.15,  eyeScale: 0.8, animSpeed: 0.3,  mouthOpen: 0,   mouthCurve: 0    },
-  aggressive: { headTilt: -0.1,  eyeScale: 1.3, animSpeed: 1.2,  mouthOpen: 0.4, mouthCurve: -0.2 },
-  pleased:    { headTilt: 0.08,  eyeScale: 1.1, animSpeed: 0.8,  mouthOpen: 0.2, mouthCurve: 0.3  },
-  shocked:    { headTilt: 0.25,  eyeScale: 1.5, animSpeed: 2.0,  mouthOpen: 0.7, mouthCurve: 0    },
+  idle:       { headTilt: 0,     eyeScale: 1.0, animSpeed: 0.6,  bodyLean: 0,     mouthOpen: 0,   mouthCurve: 0    },
+  thinking:   { headTilt: 0.17,  eyeScale: 0.8, animSpeed: 0.3,  bodyLean: 0,     mouthOpen: 0,   mouthCurve: 0    },
+  aggressive: { headTilt: -0.08, eyeScale: 1.3, animSpeed: 1.5,  bodyLean: -0.08, mouthOpen: 0.4, mouthCurve: -0.2 },
+  pleased:    { headTilt: 0.08,  eyeScale: 1.1, animSpeed: 0.8,  bodyLean: 0.03,  mouthOpen: 0.2, mouthCurve: 0.3  },
+  shocked:    { headTilt: 0.25,  eyeScale: 1.5, animSpeed: 2.0,  bodyLean: 0,     mouthOpen: 0.7, mouthCurve: 0    },
 };
 
-const PERSONA_COLORS = {
-  shark:    { primary: 0xb83030, secondary: 0x8a2020, accent: 0xe05050, suit: 0x2a1010, tie: 0xb83030 },
-  diplomat: { primary: 0x2d7a4f, secondary: 0x1d5a3a, accent: 0x4daa70, suit: 0x1a2e22, tie: 0x2d7a4f },
-  analyst:  { primary: 0x1a5fa8, secondary: 0x104080, accent: 0x3a8fd8, suit: 0x0f1e30, tie: 0x1a5fa8 },
-  wildcard: { primary: 0xa05c00, secondary: 0x7a4400, accent: 0xd08020, suit: 0x2a1c00, tie: 0xa05c00 },
-  veteran:  { primary: 0x5c3d9e, secondary: 0x3c2070, accent: 0x8c60d0, suit: 0x1a0f30, tie: 0x5c3d9e },
-};
-
-const PERSONA_SYMBOLS = {
-  shark:    "▲",
-  diplomat: "◆",
-  analyst:  "●",
-  wildcard: "★",
-  veteran:  "⬟",
+// ── Persona definitions (1960s boardroom) ─────────────────────────────────
+const PERSONA_DEFS = {
+  shark: {
+    suitColor:  0x1a1a2e,  // deep navy
+    hairColor:  0x1a1a1a,  // black
+    tieColor:   0x8b1a1a,  // scarlet
+    skinColor:  0xf0c8a0,
+    badge:      "◈",
+    badgeColor: 0xc9a84c,
+    // accessory: slim briefcase left hand
+    buildAccessory(group, mats) {
+      const geo = new THREE.BoxGeometry(0.2, 0.28, 0.06);
+      const mat = new THREE.MeshStandardMaterial({ color: 0x2c1810, roughness: 0.7, metalness: 0.1 });
+      const briefcase = new THREE.Mesh(geo, mat);
+      briefcase.position.set(-0.82, -0.75, 0.04);
+      group.add(briefcase);
+      // handle
+      const hgeo = new THREE.BoxGeometry(0.08, 0.03, 0.04);
+      const handle = new THREE.Mesh(hgeo, new THREE.MeshStandardMaterial({ color: 0xc9a84c, roughness: 0.4, metalness: 0.4 }));
+      handle.position.set(-0.82, -0.59, 0.04);
+      group.add(handle);
+      return { briefcase, handle };
+    },
+  },
+  diplomat: {
+    suitColor:  0x2a3d28,  // dark forest
+    hairColor:  0x5c4020,  // brown
+    tieColor:   0xc9a84c,  // gold
+    skinColor:  0xf0c8a0,
+    badge:      "◎",
+    badgeColor: 0xc9a84c,
+    // accessory: pocket watch fob (squashed sphere)
+    buildAccessory(group, mats) {
+      const geo = new THREE.SphereGeometry(0.06, 8, 6);
+      const mat = new THREE.MeshStandardMaterial({ color: 0xc9a84c, roughness: 0.3, metalness: 0.6 });
+      const watch = new THREE.Mesh(geo, mat);
+      watch.scale.set(1, 0.5, 0.5);
+      watch.position.set(0.38, 0.35, 0.34);
+      group.add(watch);
+      // chain
+      const cgeo = new THREE.BoxGeometry(0.02, 0.12, 0.02);
+      const chain = new THREE.Mesh(cgeo, mat);
+      chain.position.set(0.38, 0.44, 0.33);
+      group.add(chain);
+      return { watch, chain };
+    },
+  },
+  analyst: {
+    suitColor:  0x1a2535,  // charcoal blue
+    hairColor:  0x3a3020,  // dark
+    tieColor:   0x1a5fa8,  // blue
+    skinColor:  0xf0c8a0,
+    badge:      "◻",
+    badgeColor: 0x3a8fd8,
+    // accessory: glasses frames
+    buildAccessory(group, mats) {
+      const frameMat = new THREE.MeshStandardMaterial({ color: 0x2c1810, roughness: 0.8 });
+      const lensGeo = new THREE.BoxGeometry(0.16, 0.1, 0.02);
+      const lensL = new THREE.Mesh(lensGeo, frameMat);
+      lensL.position.set(-0.19, 1.49, 0.4);
+      group.add(lensL);
+      const lensR = new THREE.Mesh(lensGeo, frameMat);
+      lensR.position.set(0.19, 1.49, 0.4);
+      group.add(lensR);
+      const bridgeGeo = new THREE.BoxGeometry(0.07, 0.02, 0.02);
+      const bridge = new THREE.Mesh(bridgeGeo, frameMat);
+      bridge.position.set(0, 1.49, 0.4);
+      group.add(bridge);
+      return { lensL, lensR, bridge };
+    },
+  },
+  wildcard: {
+    suitColor:  0x3d2810,  // warm brown
+    hairColor:  0xc8a050,  // golden
+    tieColor:   0xd08020,  // amber
+    skinColor:  0xf0c8a0,
+    badge:      "◇",
+    badgeColor: 0xd08020,
+    // accessory: wide loose tie (wider geo, slight rotation)
+    buildAccessory(group, mats) {
+      const tieGeo = new THREE.BoxGeometry(0.22, 0.72, 0.06);
+      const tieMat = new THREE.MeshStandardMaterial({ color: 0xd08020, roughness: 0.6 });
+      const looseTie = new THREE.Mesh(tieGeo, tieMat);
+      looseTie.position.set(0.02, 0.1, 0.37);
+      looseTie.rotation.z = 0.05;
+      group.add(looseTie);
+      return { looseTie };
+    },
+  },
+  veteran: {
+    suitColor:  0x1a1a1a,  // near-black charcoal
+    hairColor:  0xe0e0d8,  // silver-white
+    tieColor:   0x5c3d9e,  // deep purple
+    skinColor:  0xd8b090,  // slightly older skin tone
+    badge:      "◆",
+    badgeColor: 0xc9a84c,
+    // accessory: gold cufflinks at wrist
+    buildAccessory(group, mats) {
+      const cuffMat = new THREE.MeshStandardMaterial({ color: 0xc9a84c, roughness: 0.2, metalness: 0.7 });
+      const cuffGeo = new THREE.BoxGeometry(0.08, 0.06, 0.28);
+      const cuffL = new THREE.Mesh(cuffGeo, cuffMat);
+      cuffL.position.set(-0.72, -0.73, 0);
+      group.add(cuffL);
+      const cuffR = new THREE.Mesh(cuffGeo, cuffMat);
+      cuffR.position.set(0.72, -0.73, 0);
+      group.add(cuffR);
+      return { cuffL, cuffR };
+    },
+  },
 };
 
+// ── NegotiatorCharacter class ─────────────────────────────────────────────
 class NegotiatorCharacter {
   constructor(canvasId, persona = "shark") {
-    this.canvasId = canvasId;
-    this.persona = persona;
-    this.state = "idle";
+    this.canvasId   = canvasId;
+    this.persona    = persona;
+    this.state      = "idle";
     this.targetState = CHARACTER_STATES.idle;
-    this.currentTilt = 0;
-    this.currentEyeScale = 1.0;
-    this.clock = 0;
+    this.clock      = 0;
     this.animFrameId = null;
-    this.scene = null;
-    this.camera = null;
-    this.renderer = null;
-    this.meshes = {};
+    this.scene      = null;
+    this.camera     = null;
+    this.renderer   = null;
+    this.meshes     = {};
+    this.characterGroup = null;
+
+    // Lerp accumulators
+    this._curTilt     = 0;
+    this._curEyeScale = 1.0;
+    this._curLean     = 0;
+
+    // Shocked-state timer
+    this._shockedUntil = 0;
+
     this._init(canvasId);
+    this._buildScene();
     this._buildCharacter();
     this._animate();
   }
@@ -55,54 +162,63 @@ class NegotiatorCharacter {
     }
 
     this.scene = new THREE.Scene();
-    this.scene.background = null;
+    // Felt-green boardroom background
+    this.scene.background = new THREE.Color(0x1c2b1a);
 
     this.camera = new THREE.PerspectiveCamera(45, 280 / 380, 0.1, 100);
-    this.camera.position.set(0, 1.0, 5.5);
-    this.camera.lookAt(0, 0.8, 0);
+    this.camera.position.set(0, 1.6, 5.2);
+    this.camera.lookAt(0, 1.3, 0);
 
-    this.renderer = new THREE.WebGLRenderer({
-      canvas,
-      alpha: true,
-      antialias: true,
-    });
+    this.renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
     this.renderer.setSize(280, 380);
     this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
-    this.renderer.setClearColor(0x000000, 0);
     this.renderer.shadowMap.enabled = true;
     this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+  }
 
-    // Ambient light
-    const ambient = new THREE.AmbientLight(0xffffff, 0.55);
-    this.scene.add(ambient);
+  _buildScene() {
+    if (!this.scene) return;
 
-    // Key light
-    const key = new THREE.DirectionalLight(0xffffff, 0.9);
-    key.position.set(3, 5, 5);
+    // Warm key light — brass pendant lamp
+    const key = new THREE.DirectionalLight(0xffe8b0, 1.4);
+    key.position.set(3, 6, 4);
     key.castShadow = true;
     this.scene.add(key);
 
-    // Fill light
-    const fill = new THREE.DirectionalLight(0x8899ff, 0.35);
-    fill.position.set(-3, 2, -2);
-    this.scene.add(fill);
-
-    // Rim light
-    const rim = new THREE.DirectionalLight(0xffffff, 0.2);
-    rim.position.set(0, -2, -4);
+    // Cool rim light
+    const rim = new THREE.DirectionalLight(0x8090c0, 0.3);
+    rim.position.set(-3, 2, -2);
     this.scene.add(rim);
+
+    // Ambient
+    const ambient = new THREE.AmbientLight(0xffffff, 0.4);
+    this.scene.add(ambient);
+
+    // Mahogany table surface
+    const tableGeo = new THREE.BoxGeometry(10, 0.1, 3);
+    const tableMat = new THREE.MeshStandardMaterial({ color: 0x2c1810, roughness: 0.5, metalness: 0.05 });
+    const table = new THREE.Mesh(tableGeo, tableMat);
+    table.position.set(0, -0.8, 0);
+    table.receiveShadow = true;
+    this.scene.add(table);
+
+    // Table edge highlight (thin gold strip)
+    const edgeGeo = new THREE.BoxGeometry(10, 0.02, 0.04);
+    const edgeMat = new THREE.MeshStandardMaterial({ color: 0xc9a84c, roughness: 0.3, metalness: 0.5 });
+    const edge = new THREE.Mesh(edgeGeo, edgeMat);
+    edge.position.set(0, -0.745, 1.5);
+    this.scene.add(edge);
   }
 
-  _makeMat(color, roughness = 0.7, metalness = 0.1) {
+  _mat(color, roughness = 0.7, metalness = 0.05) {
     return new THREE.MeshStandardMaterial({ color, roughness, metalness });
   }
 
-  _makeTextureBadge(symbol, bgColor, fgColor) {
+  _badgeTex(symbol, bgColor, fgColor) {
     const size = 128;
-    const cvs = document.createElement("canvas");
-    cvs.width = size;
-    cvs.height = size;
-    const ctx = cvs.getContext("2d");
+    const cvs  = document.createElement("canvas");
+    cvs.width  = size; cvs.height = size;
+    const ctx  = cvs.getContext("2d");
 
     ctx.fillStyle = `#${bgColor.toString(16).padStart(6, "0")}`;
     ctx.beginPath();
@@ -110,358 +226,463 @@ class NegotiatorCharacter {
     ctx.fill();
 
     ctx.fillStyle = `#${fgColor.toString(16).padStart(6, "0")}`;
-    ctx.font = "bold 56px sans-serif";
+    ctx.font = "bold 58px serif";
     ctx.textAlign = "center";
     ctx.textBaseline = "middle";
-    ctx.fillText(symbol, size / 2, size / 2);
+    ctx.fillText(symbol, size / 2, size / 2 + 3);
 
-    const tex = new THREE.CanvasTexture(cvs);
-    return tex;
+    return new THREE.CanvasTexture(cvs);
   }
 
-  _clearScene() {
-    // Remove character meshes
-    Object.values(this.meshes).forEach(m => {
-      if (m) this.scene.remove(m);
-    });
-    this.meshes = {};
+  _clearCharacter() {
     if (this.characterGroup) {
-      this.scene.remove(this.characterGroup);
+      this.scene && this.scene.remove(this.characterGroup);
     }
     this.characterGroup = null;
+    this.meshes = {};
   }
 
   _buildCharacter() {
-    this._clearScene();
+    this._clearCharacter();
+    if (!this.scene) return;
 
-    const colors = PERSONA_COLORS[this.persona];
+    const def = PERSONA_DEFS[this.persona] || PERSONA_DEFS.shark;
     const group = new THREE.Group();
     this.characterGroup = group;
     this.scene.add(group);
 
-    // Skin tone — neutral
-    const skinColor = 0xf5d0a9;
-    const skinMat  = this._makeMat(skinColor, 0.85, 0.0);
-    const suitMat  = this._makeMat(colors.suit,      0.8, 0.05);
-    const shirtMat = this._makeMat(0xf0f0f0,         0.9, 0.0);
-    const tieMat   = this._makeMat(colors.tie,       0.6, 0.05);
-    const accentMat= this._makeMat(colors.accent,    0.5, 0.2);
-    const eyeWhite = this._makeMat(0xffffff,         0.95, 0.0);
-    const eyePupil = this._makeMat(0x111111,         0.9, 0.0);
-    const hairMat  = this._makeMat(0x2a1a0a,         0.9, 0.0);
-
-    // --- TORSO ---
-    const torsoGeo = new THREE.BoxGeometry(1.1, 1.3, 0.6);
-    const torso = new THREE.Mesh(torsoGeo, suitMat);
-    torso.position.set(0, 0, 0);
+    const skin = this._mat(def.skinColor, 0.85, 0.0);
+    const suit = this._mat(def.suitColor, 0.75, 0.05);
+    const tie  = this._mat(def.tieColor,  0.55, 0.05);
+    const hair = this._mat(def.hairColor, 0.85, 0.0);
+    const shirt= this._mat(0xf5efe0, 0.9, 0.0);
+    const lapel= this._mat(Math.max(0, def.suitColor - 0x050505), 0.8, 0.0);
+
+    // ── TORSO ──────────────────────────────────────────────
+    const torso = new THREE.Mesh(new THREE.BoxGeometry(1.1, 1.3, 0.6), suit);
+    torso.castShadow = true;
     group.add(torso);
     this.meshes.torso = torso;
 
-    // Shirt (white strip on chest)
-    const shirtGeo = new THREE.BoxGeometry(0.36, 0.9, 0.32);
-    const shirt = new THREE.Mesh(shirtGeo, shirtMat);
-    shirt.position.set(0, 0.1, 0.32);
-    group.add(shirt);
+    // Shirt front
+    const shirtMesh = new THREE.Mesh(new THREE.BoxGeometry(0.34, 0.9, 0.32), shirt);
+    shirtMesh.position.set(0, 0.1, 0.32);
+    group.add(shirtMesh);
 
     // Tie
-    const tieGeo = new THREE.BoxGeometry(0.12, 0.75, 0.06);
-    const tie = new THREE.Mesh(tieGeo, tieMat);
-    tie.position.set(0, 0.1, 0.36);
-    group.add(tie);
+    const tieMesh = new THREE.Mesh(new THREE.BoxGeometry(0.12, 0.74, 0.06), tie);
+    tieMesh.position.set(0, 0.1, 0.36);
+    group.add(tieMesh);
+    this.meshes.tie = tieMesh;
 
-    // Suit lapels (two thin boxes)
+    // Lapels
     const lapelGeo = new THREE.BoxGeometry(0.22, 0.7, 0.08);
-    const lapelL = new THREE.Mesh(lapelGeo, suitMat);
-    lapelL.position.set(-0.22, 0.25, 0.3);
-    lapelL.rotation.z = 0.2;
+    const lapelL = new THREE.Mesh(lapelGeo, lapel);
+    lapelL.position.set(-0.22, 0.25, 0.3); lapelL.rotation.z = 0.2;
     group.add(lapelL);
-
-    const lapelR = new THREE.Mesh(lapelGeo, suitMat);
-    lapelR.position.set(0.22, 0.25, 0.3);
-    lapelR.rotation.z = -0.2;
+    const lapelR = new THREE.Mesh(lapelGeo, lapel);
+    lapelR.position.set(0.22, 0.25, 0.3); lapelR.rotation.z = -0.2;
     group.add(lapelR);
 
-    // Persona badge on left breast
-    const badgeTex = this._makeTextureBadge(
-      PERSONA_SYMBOLS[this.persona],
-      colors.primary,
-      0xffffff
+    // Badge on left breast
+    const badgeTex = this._badgeTex(def.badge, def.badgeColor, 0xffffff);
+    const badge = new THREE.Mesh(
+      new THREE.BoxGeometry(0.2, 0.2, 0.04),
+      new THREE.MeshStandardMaterial({ map: badgeTex, roughness: 0.4 })
     );
-    const badgeMat = new THREE.MeshStandardMaterial({ map: badgeTex, roughness: 0.5 });
-    const badgeGeo = new THREE.BoxGeometry(0.2, 0.2, 0.04);
-    const badge = new THREE.Mesh(badgeGeo, badgeMat);
-    badge.position.set(-0.28, 0.4, 0.32);
+    badge.position.set(-0.27, 0.4, 0.32);
     group.add(badge);
 
-    // --- NECK ---
-    const neckGeo = new THREE.CylinderGeometry(0.13, 0.15, 0.3, 8);
-    const neck = new THREE.Mesh(neckGeo, skinMat);
+    // Analyst: slightly hunched torso
+    if (this.persona === "analyst") torso.rotation.x = 0.05;
+
+    // ── NECK ───────────────────────────────────────────────
+    const neck = new THREE.Mesh(new THREE.CylinderGeometry(0.13, 0.15, 0.3, 8), skin);
     neck.position.set(0, 0.8, 0);
     group.add(neck);
-    this.meshes.neck = neck;
 
-    // --- HEAD ---
-    const headGeo = new THREE.BoxGeometry(0.75, 0.85, 0.65);
-    const head = new THREE.Mesh(headGeo, skinMat);
+    // ── HEAD ───────────────────────────────────────────────
+    const head = new THREE.Mesh(new THREE.BoxGeometry(0.75, 0.85, 0.65), skin);
+    head.scale.set(1, 1.05, 0.95);
     head.position.set(0, 1.45, 0);
+    head.castShadow = true;
     group.add(head);
     this.meshes.head = head;
 
-    // Hair
-    const hairGeo = new THREE.BoxGeometry(0.78, 0.28, 0.68);
-    const hair = new THREE.Mesh(hairGeo, hairMat);
-    hair.position.set(0, 1.82, -0.02);
-    group.add(hair);
+    // Hair top slab
+    const hairTop = new THREE.Mesh(new THREE.BoxGeometry(0.78, 0.26, 0.68), hair);
+    hairTop.position.set(0, 1.82, -0.02);
+    group.add(hairTop);
 
     // Hair sides
-    const hairSideGeo = new THREE.BoxGeometry(0.12, 0.45, 0.6);
-    const hairL = new THREE.Mesh(hairSideGeo, hairMat);
-    hairL.position.set(-0.37, 1.6, -0.02);
-    group.add(hairL);
-    const hairR = new THREE.Mesh(hairSideGeo, hairMat);
-    hairR.position.set(0.37, 1.6, -0.02);
-    group.add(hairR);
-
-    // --- EYES ---
-    const eyeW = new THREE.SphereGeometry(0.1, 12, 8);
-    const eyeP = new THREE.SphereGeometry(0.055, 8, 6);
+    const hSideGeo = new THREE.BoxGeometry(0.12, 0.44, 0.6);
+    const hL = new THREE.Mesh(hSideGeo, hair);
+    hL.position.set(-0.37, 1.6, -0.02);
+    group.add(hL);
+    const hR = new THREE.Mesh(hSideGeo, hair);
+    hR.position.set(0.37, 1.6, -0.02);
+    group.add(hR);
+
+    // ── EYES ───────────────────────────────────────────────
+    const eyeW = new THREE.SphereGeometry(0.095, 12, 8);
+    const eyeP = new THREE.SphereGeometry(0.052, 8, 6);
+    const eyeWhite = this._mat(0xffffff, 0.95, 0.0);
+    const pupil    = this._mat(0x111111, 0.9, 0.0);
 
     const eyeLW = new THREE.Mesh(eyeW, eyeWhite);
-    eyeLW.position.set(-0.19, 1.5, 0.33);
+    eyeLW.position.set(-0.19, 1.50, 0.33);
     group.add(eyeLW);
     this.meshes.eyeLeft = eyeLW;
 
     const eyeRW = new THREE.Mesh(eyeW, eyeWhite);
-    eyeRW.position.set(0.19, 1.5, 0.33);
+    eyeRW.position.set(0.19, 1.50, 0.33);
     group.add(eyeRW);
     this.meshes.eyeRight = eyeRW;
 
-    const eyeLP = new THREE.Mesh(eyeP, eyePupil);
-    eyeLP.position.set(-0.19, 1.5, 0.38);
+    const eyeLP = new THREE.Mesh(eyeP, pupil);
+    eyeLP.position.set(-0.19, 1.50, 0.38);
     group.add(eyeLP);
     this.meshes.pupilLeft = eyeLP;
 
-    const eyeRP = new THREE.Mesh(eyeP, eyePupil);
-    eyeRP.position.set(0.19, 1.5, 0.38);
+    const eyeRP = new THREE.Mesh(eyeP, pupil);
+    eyeRP.position.set(0.19, 1.50, 0.38);
     group.add(eyeRP);
     this.meshes.pupilRight = eyeRP;
 
-    // Eyebrows
-    const browGeo = new THREE.BoxGeometry(0.18, 0.04, 0.04);
-    const browMat = this._makeMat(0x2a1a0a, 0.9, 0.0);
+    // Eyebrows (Veteran gets thicker)
+    const browH = this.persona === "veteran" ? 0.055 : 0.04;
+    const browGeo = new THREE.BoxGeometry(0.18, browH, 0.04);
+    const browMat = this._mat(def.hairColor === 0xe0e0d8 ? 0x888878 : def.hairColor, 0.9, 0.0);
     const browL = new THREE.Mesh(browGeo, browMat);
     browL.position.set(-0.19, 1.63, 0.33);
     group.add(browL);
     this.meshes.browL = browL;
-
     const browR = new THREE.Mesh(browGeo, browMat);
     browR.position.set(0.19, 1.63, 0.33);
     group.add(browR);
     this.meshes.browR = browR;
 
-    // --- MOUTH ---
-    // We represent the mouth as a thin box that we morph
-    const mouthGeo = new THREE.BoxGeometry(0.22, 0.04, 0.04);
-    const mouthMat = this._makeMat(0x8b3a3a, 0.8, 0.0);
-    const mouth = new THREE.Mesh(mouthGeo, mouthMat);
+    // Mouth
+    const mouthMat = this._mat(0x8b3a3a, 0.8, 0.0);
+    const mouth = new THREE.Mesh(new THREE.BoxGeometry(0.22, 0.04, 0.04), mouthMat);
     mouth.position.set(0, 1.33, 0.33);
     group.add(mouth);
     this.meshes.mouth = mouth;
 
-    // Nose (small box)
-    const noseGeo = new THREE.BoxGeometry(0.1, 0.1, 0.12);
-    const nose = new THREE.Mesh(noseGeo, this._makeMat(0xe8b890, 0.85, 0.0));
-    nose.position.set(0, 1.44, 0.35);
+    // Nose
+    const nose = new THREE.Mesh(
+      new THREE.BoxGeometry(0.09, 0.09, 0.12),
+      this._mat(def.skinColor * 0.95 | 0, 0.85, 0.0)
+    );
+    nose.position.set(0, 1.44, 0.36);
     group.add(nose);
 
-    // --- SHOULDERS / UPPER ARMS ---
-    const shoulderGeo = new THREE.BoxGeometry(0.32, 0.28, 0.45);
-    const shlL = new THREE.Mesh(shoulderGeo, suitMat);
-    shlL.position.set(-0.7, 0.5, 0);
-    group.add(shlL);
-    const shlR = new THREE.Mesh(shoulderGeo, suitMat);
-    shlR.position.set(0.7, 0.5, 0);
-    group.add(shlR);
+    // ── SHOULDERS / ARMS ───────────────────────────────────
+    const shlGeo = new THREE.BoxGeometry(0.32, 0.28, 0.45);
+    const shlL = new THREE.Mesh(shlGeo, suit); shlL.position.set(-0.7, 0.5, 0); group.add(shlL);
+    const shlR = new THREE.Mesh(shlGeo, suit); shlR.position.set(0.7, 0.5, 0);  group.add(shlR);
 
-    // Upper arms
     const uArmGeo = new THREE.BoxGeometry(0.28, 0.6, 0.3);
-    const uArmL = new THREE.Mesh(uArmGeo, suitMat);
-    uArmL.position.set(-0.72, 0.05, 0);
-    group.add(uArmL);
+    const uArmL = new THREE.Mesh(uArmGeo, suit);
+    uArmL.position.set(-0.72, 0.05, 0); group.add(uArmL);
     this.meshes.upperArmL = uArmL;
-
-    const uArmR = new THREE.Mesh(uArmGeo, suitMat);
-    uArmR.position.set(0.72, 0.05, 0);
-    group.add(uArmR);
+    const uArmR = new THREE.Mesh(uArmGeo, suit);
+    uArmR.position.set(0.72, 0.05, 0);  group.add(uArmR);
     this.meshes.upperArmR = uArmR;
 
-    // Lower arms
     const lArmGeo = new THREE.BoxGeometry(0.24, 0.55, 0.26);
-    const lArmL = new THREE.Mesh(lArmGeo, suitMat);
-    lArmL.position.set(-0.72, -0.5, 0);
-    group.add(lArmL);
-
-    const lArmR = new THREE.Mesh(lArmGeo, suitMat);
-    lArmR.position.set(0.72, -0.5, 0);
-    group.add(lArmR);
+    const lArmL = new THREE.Mesh(lArmGeo, suit); lArmL.position.set(-0.72, -0.5, 0); group.add(lArmL);
+    const lArmR = new THREE.Mesh(lArmGeo, suit); lArmR.position.set(0.72, -0.5, 0);  group.add(lArmR);
 
-    // Hands (spheres)
+    // Hands
     const handGeo = new THREE.SphereGeometry(0.14, 8, 6);
-    const handL = new THREE.Mesh(handGeo, skinMat);
-    handL.position.set(-0.72, -0.85, 0);
-    group.add(handL);
-
-    const handR = new THREE.Mesh(handGeo, skinMat);
-    handR.position.set(0.72, -0.85, 0);
-    group.add(handR);
-
-    // Accent cufflinks
-    const cuffGeo = new THREE.BoxGeometry(0.26, 0.06, 0.28);
-    const cuffL = new THREE.Mesh(cuffGeo, accentMat);
-    cuffL.position.set(-0.72, -0.74, 0);
-    group.add(cuffL);
-    const cuffR = new THREE.Mesh(cuffGeo, accentMat);
-    cuffR.position.set(0.72, -0.74, 0);
-    group.add(cuffR);
-
-    // --- PELVIS / LEGS (partial, cropped by camera) ---
-    const pelvisGeo = new THREE.BoxGeometry(1.0, 0.3, 0.55);
-    const pelvis = new THREE.Mesh(pelvisGeo, suitMat);
-    pelvis.position.set(0, -0.8, 0);
-    group.add(pelvis);
+    const handL = new THREE.Mesh(handGeo, skin); handL.position.set(-0.72, -0.85, 0); group.add(handL);
+    const handR = new THREE.Mesh(handGeo, skin); handR.position.set(0.72, -0.85, 0);  group.add(handR);
+
+    // ── LEGS ───────────────────────────────────────────────
+    const pelvis = new THREE.Mesh(new THREE.BoxGeometry(1.0, 0.3, 0.55), suit);
+    pelvis.position.set(0, -0.8, 0); group.add(pelvis);
 
     const legGeo = new THREE.BoxGeometry(0.38, 0.5, 0.38);
-    const legL = new THREE.Mesh(legGeo, suitMat);
-    legL.position.set(-0.3, -1.15, 0);
-    group.add(legL);
+    const legL = new THREE.Mesh(legGeo, suit); legL.position.set(-0.3, -1.15, 0); group.add(legL);
+    const legR = new THREE.Mesh(legGeo, suit); legR.position.set(0.3, -1.15, 0);  group.add(legR);
 
-    const legR = new THREE.Mesh(legGeo, suitMat);
-    legR.position.set(0.3, -1.15, 0);
-    group.add(legR);
+    // ── PERSONA ACCESSORY ──────────────────────────────────
+    if (typeof def.buildAccessory === "function") {
+      this.meshes.accessory = def.buildAccessory(group, { suit, skin, hair, tie });
+    }
 
-    // Centre group
-    group.position.set(0, 0, 0);
+    // Veteran: most upright — no lean even in aggressive
+    this.meshes._veteranPosture = this.persona === "veteran";
 
-    // Store per-state base positions for lerp
-    this._eyeBaseY = 1.5;
+    // Wildcard: random head tilt state
+    this._wildcardAngle = 0;
+    this._wildcardNext  = 0;
+
+    group.position.set(0, 0, 0);
+    this._eyeBaseY = 1.50;
   }
 
+  // ── Public API ──────────────────────────────────────────────────────────
   setState(newState) {
     if (!(newState in CHARACTER_STATES)) return;
-    this.state = newState;
+
+    if (newState === "shocked") {
+      this._shockedUntil = performance.now() + 1500;
+      const stateBefore = this.state;
+      this._postShockState = stateBefore === "shocked" ? "idle" : stateBefore;
+    }
+
+    this.state       = newState;
     this.targetState = CHARACTER_STATES[newState];
-    this._updateStateBadge(newState);
+    this._updateBadge(newState);
   }
 
   setPersona(persona) {
-    if (!(persona in PERSONA_COLORS)) return;
+    if (!(persona in PERSONA_DEFS)) return;
     this.persona = persona;
     this._buildCharacter();
   }
 
-  _updateStateBadge(state) {
-    const badge = document.querySelector(".character-state-badge");
-    if (badge) badge.textContent = state;
+  destroy() {
+    if (this.animFrameId) cancelAnimationFrame(this.animFrameId);
+    this._clearCharacter();
+    if (this.renderer) this.renderer.dispose();
   }
 
-  _lerp(a, b, t) {
-    return a + (b - a) * t;
+  // ── Private helpers ──────────────────────────────────────────────────────
+  _updateBadge(state) {
+    const b = document.querySelector(".character-state-badge");
+    if (b) b.textContent = state;
+    const chip = document.getElementById("character-state-label");
+    if (chip) chip.textContent = state;
   }
 
+  _lerp(a, b, t) { return a + (b - a) * t; }
+
   _animate() {
     this.animFrameId = requestAnimationFrame(() => this._animate());
-
     if (!this.scene || !this.camera || !this.renderer) return;
 
+    const now = performance.now();
+    const dt  = 0.016; // ~60fps
     const target = this.targetState;
     const speed  = target.animSpeed;
-    const dt     = 0.016; // ~60fps assumption
+
+    // Shocked state auto-revert after 1.5s
+    if (this.state === "shocked" && now > this._shockedUntil) {
+      this.setState(this._postShockState || "idle");
+    }
 
     this.clock += dt * speed;
 
-    // Breathing: subtle y oscillation on whole group
-    if (this.characterGroup) {
-      const breathAmp  = this.state === "aggressive" ? 0.025 : 0.012;
-      const breathFreq = this.state === "aggressive" ? 1.8 : 0.9;
-      this.characterGroup.position.y = Math.sin(this.clock * breathFreq) * breathAmp;
+    if (!this.characterGroup) { this.renderer.render(this.scene, this.camera); return; }
 
-      // Head tilt lerp
-      this.currentTilt = this._lerp(this.currentTilt, target.headTilt, 0.05);
-      if (this.meshes.head) {
-        this.meshes.head.rotation.z = this.currentTilt;
-      }
+    const g = this.characterGroup;
 
-      // Eye scale lerp
-      this.currentEyeScale = this._lerp(this.currentEyeScale, target.eyeScale, 0.06);
-      const es = this.currentEyeScale;
-      if (this.meshes.eyeLeft)  this.meshes.eyeLeft.scale.setScalar(es);
-      if (this.meshes.eyeRight) this.meshes.eyeRight.scale.setScalar(es);
-
-      // Pupils — subtle idle wander, large for shocked
-      if (this.meshes.pupilLeft && this.meshes.pupilRight) {
-        const wanderX = Math.sin(this.clock * 0.7) * 0.025;
-        const wanderY = Math.cos(this.clock * 0.5) * 0.015;
-        this.meshes.pupilLeft.position.x  = -0.19 + wanderX;
-        this.meshes.pupilRight.position.x =  0.19 + wanderX;
-        this.meshes.pupilLeft.position.y  = this._eyeBaseY + wanderY;
-        this.meshes.pupilRight.position.y = this._eyeBaseY + wanderY;
-      }
+    // ── Breathing (y-oscillation 0.6Hz idle, 1.5Hz aggressive) ─────────────
+    const breathFreq = this.state === "aggressive" ? 1.5 : 0.6;
+    const breathAmp  = this.state === "aggressive" ? 0.025 : 0.012;
+    g.position.y = Math.sin(this.clock * breathFreq) * breathAmp;
+
+    // ── Head side-to-side ±2° at 0.25Hz ──────────────────────────────────
+    if (this.meshes.head) {
+      const headSwing = Math.sin(this.clock * 0.25) * (3.14159 / 90); // ±2°
+      this.meshes.head.rotation.y = headSwing;
 
-      // Eyebrow expression
-      if (this.meshes.browL && this.meshes.browR) {
-        const browTarget = this.state === "aggressive" ? -0.12
-                         : this.state === "shocked"    ?  0.12
-                         : this.state === "pleased"    ?  0.05
-                         : 0;
-        this.meshes.browL.position.y = this._lerp(this.meshes.browL.position.y, 1.63 + browTarget, 0.07);
-        this.meshes.browR.position.y = this._lerp(this.meshes.browR.position.y, 1.63 + browTarget, 0.07);
-
-        // Angle brows for aggressive (inner raised) vs. shocked (both raised)
-        const browAngle = this.state === "aggressive" ? 0.2 : 0;
-        this.meshes.browL.rotation.z =  this._lerp(this.meshes.browL.rotation.z,  browAngle, 0.07);
-        this.meshes.browR.rotation.z = this._lerp(this.meshes.browR.rotation.z,  -browAngle, 0.07);
+      // Thinking: head tilts forward 10°
+      const forwardTilt = this.state === "thinking" ? -(10 * 3.14159 / 180) : 0;
+      this.meshes.head.rotation.x = this._lerp(this.meshes.head.rotation.x, forwardTilt, 0.05);
+
+      // Head tilt (z) lerp
+      this._curTilt = this._lerp(this._curTilt, target.headTilt, 0.05);
+      this.meshes.head.rotation.z = this._curTilt;
+
+      // Shocked: rapid head shake
+      if (this.state === "shocked") {
+        this.meshes.head.rotation.z = Math.sin(this.clock * 4) * (8 * 3.14159 / 180);
       }
+    }
+
+    // ── Body lean ─────────────────────────────────────────────────────────
+    const isVeteran = this.meshes._veteranPosture;
+    const targetLean = isVeteran ? 0 : target.bodyLean;
+    this._curLean = this._lerp(this._curLean, targetLean, 0.04);
+    g.rotation.x = this._curLean;
+
+    // ── Eye scale lerp ────────────────────────────────────────────────────
+    this._curEyeScale = this._lerp(this._curEyeScale, target.eyeScale, 0.06);
+    const es = this._curEyeScale;
+    if (this.meshes.eyeLeft)  this.meshes.eyeLeft.scale.setScalar(es);
+    if (this.meshes.eyeRight) this.meshes.eyeRight.scale.setScalar(es);
+
+    // ── Pupils wander ─────────────────────────────────────────────────────
+    if (this.meshes.pupilLeft && this.meshes.pupilRight) {
+      const wx = Math.sin(this.clock * 0.7) * 0.025;
+      const wy = Math.cos(this.clock * 0.5) * 0.015;
+      this.meshes.pupilLeft.position.x  = -0.19 + wx;
+      this.meshes.pupilRight.position.x =  0.19 + wx;
+      this.meshes.pupilLeft.position.y  = this._eyeBaseY + wy;
+      this.meshes.pupilRight.position.y = this._eyeBaseY + wy;
+    }
+
+    // ── Eyebrows ──────────────────────────────────────────────────────────
+    if (this.meshes.browL && this.meshes.browR) {
+      const browDelta = this.state === "aggressive" ? -0.1
+                      : this.state === "shocked"    ?  0.12
+                      : this.state === "pleased"    ?  0.04
+                      : 0;
+      const tY = 1.63 + browDelta;
+      this.meshes.browL.position.y = this._lerp(this.meshes.browL.position.y, tY, 0.07);
+      this.meshes.browR.position.y = this._lerp(this.meshes.browR.position.y, tY, 0.07);
+
+      const browAngle = this.state === "aggressive" ? 0.2 : 0;
+      this.meshes.browL.rotation.z = this._lerp(this.meshes.browL.rotation.z,  browAngle, 0.07);
+      this.meshes.browR.rotation.z = this._lerp(this.meshes.browR.rotation.z, -browAngle, 0.07);
+    }
+
+    // ── Mouth morph ───────────────────────────────────────────────────────
+    if (this.meshes.mouth) {
+      this.meshes.mouth.scale.y = this._lerp(
+        this.meshes.mouth.scale.y,
+        1 + target.mouthOpen * 2.2,
+        0.07
+      );
+      this.meshes.mouth.position.y = this._lerp(
+        this.meshes.mouth.position.y,
+        1.33 - target.mouthOpen * 0.04 + target.mouthCurve * 0.04,
+        0.07
+      );
+    }
 
-      // Mouth
-      if (this.meshes.mouth) {
-        const openTarget = target.mouthOpen;
-        const curveTarget = target.mouthCurve;
-        this.meshes.mouth.scale.y = this._lerp(this.meshes.mouth.scale.y, 1 + openTarget * 2, 0.07);
-        this.meshes.mouth.position.y = this._lerp(
-          this.meshes.mouth.position.y,
-          1.33 - openTarget * 0.04 + curveTarget * 0.04,
-          0.07
+    // ── Arm sway ──────────────────────────────────────────────────────────
+    if (this.meshes.upperArmL && this.meshes.upperArmR) {
+      const swayAmp  = this.state === "aggressive" ? 0.07 : 0.015;
+      const swayFreq = this.state === "aggressive" ? 1.5  : 0.35;
+      const sway = Math.sin(this.clock * swayFreq) * swayAmp;
+      this.meshes.upperArmL.rotation.z =  sway;
+      this.meshes.upperArmR.rotation.z = -sway;
+    }
+
+    // ── Wildcard: random head snap ─────────────────────────────────────────
+    if (this.persona === "wildcard" && this.state === "idle") {
+      if (Math.random() < 0.005) {
+        this._wildcardAngle = (Math.random() - 0.5) * 0.3;
+      }
+      if (this.meshes.head) {
+        this.meshes.head.rotation.z = this._lerp(
+          this.meshes.head.rotation.z,
+          this._wildcardAngle,
+          0.08
         );
       }
+    }
 
-      // Arm sway idle
-      if (this.meshes.upperArmL && this.meshes.upperArmR) {
-        const swayAmp = this.state === "aggressive" ? 0.08 : 0.02;
-        const swayFreq = this.state === "aggressive" ? 1.2 : 0.4;
-        const sway = Math.sin(this.clock * swayFreq) * swayAmp;
-        this.meshes.upperArmL.rotation.z =  sway;
-        this.meshes.upperArmR.rotation.z = -sway;
-      }
+    this.renderer.render(this.scene, this.camera);
+  }
+}
 
-      // Thinking: periodic head bob
-      if (this.state === "thinking") {
-        const bobY = Math.sin(this.clock * 1.5) * 0.015;
-        if (this.meshes.head) {
-          this.meshes.head.position.y = 1.45 + bobY;
-        }
-      } else if (this.meshes.head) {
-        this.meshes.head.position.y = this._lerp(this.meshes.head.position.y, 1.45, 0.05);
-      }
+// ── Mini render for persona-picker cards (180px wide) ─────────────────────
+class PersonaPreviewCharacter {
+  constructor(canvasEl, persona = "shark") {
+    this.persona  = persona;
+    this.clock    = 0;
+    this.animId   = null;
+    this.scene    = null; this.camera = null; this.renderer = null;
+    this.group    = null;
+
+    this._setup(canvasEl);
+    this._build();
+    this._animate();
+  }
+
+  _setup(canvas) {
+    const w = canvas.width  || 280;
+    const h = canvas.height || 200;
+
+    this.scene = new THREE.Scene();
+    this.scene.background = new THREE.Color(0x1c2b1a);
+
+    this.camera = new THREE.PerspectiveCamera(45, w / h, 0.1, 100);
+    this.camera.position.set(0, 1.4, 4.5);
+    this.camera.lookAt(0, 1.1, 0);
+
+    this.renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
+    this.renderer.setSize(w, h, false);
+
+    const key = new THREE.DirectionalLight(0xffe8b0, 1.3);
+    key.position.set(2, 5, 3);
+    this.scene.add(key);
+    this.scene.add(new THREE.AmbientLight(0xffffff, 0.45));
+
+    // mini table
+    const t = new THREE.Mesh(
+      new THREE.BoxGeometry(8, 0.08, 2),
+      new THREE.MeshStandardMaterial({ color: 0x2c1810, roughness: 0.5 })
+    );
+    t.position.y = -0.8;
+    this.scene.add(t);
+  }
+
+  _build() {
+    if (!this.scene) return;
+    if (this.group) this.scene.remove(this.group);
+
+    const def  = PERSONA_DEFS[this.persona] || PERSONA_DEFS.shark;
+    const g    = new THREE.Group();
+    this.group = g;
+    this.scene.add(g);
+
+    const mat = (c, r=0.75) => new THREE.MeshStandardMaterial({ color: c, roughness: r, metalness: 0.04 });
+
+    const torso = new THREE.Mesh(new THREE.BoxGeometry(1.1, 1.3, 0.6), mat(def.suitColor));
+    torso.position.y = 0;
+    g.add(torso);
+
+    const head = new THREE.Mesh(new THREE.BoxGeometry(0.75, 0.85, 0.65), mat(def.skinColor, 0.85));
+    head.position.set(0, 1.45, 0);
+    g.add(head);
+    this._head = head;
+
+    // Hair
+    const hTop = new THREE.Mesh(new THREE.BoxGeometry(0.78, 0.26, 0.68), mat(def.hairColor, 0.85));
+    hTop.position.set(0, 1.82, -0.02);
+    g.add(hTop);
+
+    // Eyes
+    const ew = new THREE.SphereGeometry(0.09, 10, 7);
+    const ep = new THREE.SphereGeometry(0.05, 8, 6);
+    const eWM = mat(0xffffff, 0.95);
+    const ePM = mat(0x111111, 0.9);
+    [-0.19, 0.19].forEach(x => {
+      const ew_ = new THREE.Mesh(ew, eWM); ew_.position.set(x, 1.5, 0.33); g.add(ew_);
+      const ep_ = new THREE.Mesh(ep, ePM); ep_.position.set(x, 1.5, 0.38); g.add(ep_);
+    });
+  }
+
+  _animate() {
+    this.animId = requestAnimationFrame(() => this._animate());
+    if (!this.scene || !this.renderer || !this.camera) return;
+
+    this.clock += 0.016 * 0.5;
+    if (this.group) {
+      this.group.position.y = Math.sin(this.clock) * 0.01;
+    }
+    if (this._head) {
+      this._head.rotation.y = Math.sin(this.clock * 0.25) * 0.03;
     }
 
     this.renderer.render(this.scene, this.camera);
   }
 
   destroy() {
-    if (this.animFrameId) cancelAnimationFrame(this.animFrameId);
-    this._clearScene();
+    if (this.animId) cancelAnimationFrame(this.animId);
+    if (this.group) this.scene && this.scene.remove(this.group);
     if (this.renderer) this.renderer.dispose();
   }
 }
 
-window.NegotiatorCharacter = NegotiatorCharacter;
+// ── Global exports ─────────────────────────────────────────────────────────
+window.NegotiatorCharacter   = NegotiatorCharacter;
+window.PersonaPreviewCharacter = PersonaPreviewCharacter;
+window.PERSONA_DEFS          = PERSONA_DEFS;

dashboard/static/style.css

@@ -1,1820 +1,1352 @@
 /* ============================================================
-   Parlay — Production CSS
-   Bloomberg terminal meets poker app.
-   Robinhood × Figma aesthetic.
+   Parlay — "The Deal Room"
+   1960s Madison Avenue aesthetic. Smoke-filled boardrooms,
+   whisky glasses, leather chairs. Prestige TV drama energy.
    ============================================================ */
 
-/* ── Custom Properties ────────────────────────────────────── */
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=DM+Mono:wght@400;500&display=swap');
+
+/* ── Custom properties ─────────────────────────────────────────────────────── */
 :root {
-  /* Ink (text) */
-  --parlay-ink:   #0f1117;
-  --parlay-ink-2: #3d4151;
-  --parlay-ink-3: #8a8f9e;
-
-  /* Surfaces */
-  --parlay-surface:   #ffffff;
-  --parlay-surface-2: #f4f5f7;
-  --parlay-surface-3: #e8eaed;
-
-  /* Borders */
-  --parlay-border:   #e0e2e7;
-  --parlay-border-2: #c8cad0;
-
-  /* Semantic colours */
-  --parlay-green:      #00a878;
-  --parlay-green-bg:   #e6f6f2;
-  --parlay-red:        #e03535;
-  --parlay-red-bg:     #fdf0f0;
-  --parlay-amber:      #d97706;
-  --parlay-amber-bg:   #fef9ec;
-  --parlay-blue:       #2563eb;
-  --parlay-blue-bg:    #eff4ff;
-  --parlay-purple:     #7c3aed;
-  --parlay-purple-bg:  #f3eeff;
-
-  /* Layout */
-  --col-left:   260px;
-  --col-right:  300px;
-  --header-h:   56px;
-  --gap:        16px;
+  --felt:          #1c2b1a;  /* dark green baize — the negotiating table */
+  --felt-light:    #2a3d28;
+  --mahogany:      #2c1810;  /* dark wood tones */
+  --mahogany-light:#3d2518;
+  --cream:         #f5f0e8;  /* aged paper / documents */
+  --cream-dark:    #e8e0d0;
+  --gold:          #c9a84c;  /* brass fixtures */
+  --gold-light:    #e8c96a;
+  --smoke:         #8a8070;  /* cigarette smoke grey */
+  --smoke-light:   #b8b0a0;
+  --ink:           #1a1208;  /* fountain pen ink */
+  --scarlet:       #8b1a1a;  /* deal-breaker red */
+  --scarlet-light: #c42020;
+  --emerald:       #1a5c2a;  /* deal-made green */
+  --ivory:         #faf6ee;
+  --shadow:        rgba(0,0,0,0.4);
+
+  /* Backward-compat aliases referenced by app.js */
+  --parlay-red:    var(--scarlet-light);
+  --parlay-amber:  var(--gold);
+  --parlay-green:  var(--emerald);
+  --parlay-blue:   #1a5fa8;
+  --parlay-purple: #5c3d9e;
+  --parlay-surface:var(--cream);
+  --parlay-border: var(--gold);
+  --parlay-ink:    var(--ink);
 
   /* Typography */
-  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-  --font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;
-
-  /* Radii */
-  --r-chip:  4px;
-  --r-card:  8px;
-  --r-panel: 12px;
-
-  /* Spacing scale */
-  --sp-1:  4px;
-  --sp-2:  8px;
-  --sp-3:  12px;
-  --sp-4:  16px;
-  --sp-6:  24px;
-  --sp-8:  32px;
-  --sp-12: 48px;
-  --sp-16: 64px;
-
-  /* Transitions */
-  --t-fast:   120ms ease;
-  --t-normal: 200ms ease;
-  --t-slow:   350ms ease;
-}
+  --font-display: 'Playfair Display', Georgia, serif;
+  --font-body:    'EB Garamond', Georgia, serif;
+  --font-mono:    'DM Mono', 'Courier New', monospace;
 
-/* Dark theme */
-[data-theme="dark"] {
-  --parlay-ink:   #f0f1f5;
-  --parlay-ink-2: #b0b4c1;
-  --parlay-ink-3: #6b7080;
+  /* Spacing */
+  --space-xs: 4px;
+  --space-sm: 8px;
+  --space-md: 16px;
+  --space-lg: 24px;
+  --space-xl: 40px;
 
-  --parlay-surface:   #0d0f14;
-  --parlay-surface-2: #161820;
-  --parlay-surface-3: #1e2130;
-
-  --parlay-border:   #2a2d3a;
-  --parlay-border-2: #3a3d4d;
-
-  --parlay-green:      #00d49a;
-  --parlay-green-bg:   #0a2420;
-  --parlay-red:        #f05454;
-  --parlay-red-bg:     #2a1010;
-  --parlay-amber:      #f59e0b;
-  --parlay-amber-bg:   #2a1f08;
-  --parlay-blue:       #3b82f6;
-  --parlay-blue-bg:    #0f1e40;
-  --parlay-purple:     #a855f7;
-  --parlay-purple-bg:  #1c0f30;
+  /* Transitions */
+  --transition: 180ms ease;
 }
 
-/* ── Reset / Base ─────────────────────────────────────────── */
-*, *::before, *::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
+/* ── Reset ─────────────────────────────────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
 html {
-  font-size: 14px;
-  -webkit-text-size-adjust: 100%;
-  scroll-behavior: smooth;
+  height: 100%;
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
 }
 
 body {
+  height: 100%;
+  background: var(--felt);
+  color: var(--cream);
   font-family: var(--font-body);
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: var(--parlay-ink);
-  background: var(--parlay-surface-2);
-  min-height: 100vh;
+  font-size: 1rem;
+  line-height: 1.6;
   overflow-x: hidden;
 }
 
-img, svg { display: block; max-width: 100%; }
-button, input, select, textarea { font: inherit; }
-a { color: var(--parlay-blue); text-decoration: none; }
-a:hover { text-decoration: underline; }
-ul { list-style: none; }
+a { color: var(--gold); text-decoration: none; }
+a:hover { color: var(--gold-light); }
 
-/* Focus ring — single rule, nowhere else */
-:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 2px var(--parlay-blue);
-  border-radius: var(--r-chip);
-}
+h1, h2, h3 { font-family: var(--font-display); font-weight: 600; }
 
-/* Scrollbar */
-::-webkit-scrollbar { width: 6px; height: 6px; }
-::-webkit-scrollbar-track { background: var(--parlay-surface-2); }
-::-webkit-scrollbar-thumb { background: var(--parlay-border-2); border-radius: 3px; }
-::-webkit-scrollbar-thumb:hover { background: var(--parlay-ink-3); }
+.mono, .text-mono { font-family: var(--font-mono); }
+.text-muted { color: var(--smoke-light); }
+.text-xs { font-size: 0.75rem; }
+.text-sm { font-size: 0.875rem; }
+.text-red { color: var(--scarlet-light); }
+.text-amber { color: var(--gold); }
+.text-green { color: var(--emerald); }
+.mt-4 { margin-top: var(--space-md); }
+.hidden { display: none !important; }
+
+/* Screen-reader only */
+.sr-only {
+  position: absolute; width: 1px; height: 1px;
+  padding: 0; margin: -1px; overflow: hidden;
+  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
+}
 
-/* Monospace numbers everywhere they appear */
-.mono, .offer-amount, .stat-value, .cp-value,
-td.num, .leaderboard td:not(:first-child),
-.zopa-value, .batna-label, .nash-label,
-.sparkline-label {
+/* ── Demo Banner ───────────────────────────────────────────────────────────── */
+.demo-banner {
+  position: fixed;
+  top: 0; left: 0; right: 0;
+  z-index: 500;
+  background: var(--mahogany);
+  border-bottom: 1px solid var(--gold);
+  color: var(--gold);
   font-family: var(--font-mono);
+  font-size: 0.75rem;
+  letter-spacing: 0.04em;
+  padding: 6px var(--space-lg);
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-md);
+}
+
+.demo-banner.hidden { display: none !important; }
+
+.demo-banner-dismiss {
+  background: none; border: none;
+  color: var(--smoke-light);
+  cursor: pointer; font-size: 1rem; line-height: 1;
+  padding: 2px 6px;
+  border-radius: 3px;
 }
+.demo-banner-dismiss:hover { color: var(--cream); }
 
-/* ── App Shell ────────────────────────────────────────────── */
+/* push content below banner */
+body.demo-mode { padding-top: 30px; }
+
+/* ── App Header ────────────────────────────────────────────────────────────── */
 .app-header {
-  position: sticky;
-  top: 0;
-  z-index: 100;
-  height: var(--header-h);
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 var(--sp-6);
-  background: var(--parlay-surface);
-  border-bottom: 1px solid var(--parlay-border);
-  gap: var(--sp-4);
+  background: var(--mahogany);
+  border-bottom: 2px solid var(--gold);
+  padding: 0 var(--space-lg);
+  height: 56px;
+  position: sticky;
+  top: 0;
+  z-index: 200;
 }
 
 .header-brand {
   display: flex;
   align-items: center;
-  gap: var(--sp-2);
-  font-size: 1.125rem;
+  gap: var(--space-sm);
+  font-family: var(--font-display);
+  font-size: 1.35rem;
   font-weight: 700;
-  letter-spacing: -0.02em;
-  color: var(--parlay-ink);
+  color: var(--gold);
+  letter-spacing: 0.03em;
+  font-style: italic;
 }
 
-.header-brand .brand-dot {
-  width: 8px;
-  height: 8px;
+.brand-dot {
+  width: 10px; height: 10px;
   border-radius: 50%;
-  background: var(--parlay-green);
-  box-shadow: 0 0 6px var(--parlay-green);
-  animation: pulse-dot 2s ease-in-out infinite;
-}
-
-@keyframes pulse-dot {
-  0%, 100% { opacity: 1; transform: scale(1); }
-  50% { opacity: 0.6; transform: scale(0.85); }
+  background: var(--gold);
+  box-shadow: 0 0 8px var(--gold);
+  display: inline-block;
 }
 
-.header-actions {
+.header-nav {
   display: flex;
-  align-items: center;
-  gap: var(--sp-3);
+  gap: var(--space-lg);
 }
 
 .header-nav a {
-  font-size: 0.8125rem;
-  font-weight: 500;
-  color: var(--parlay-ink-2);
-  padding: var(--sp-1) var(--sp-2);
-  border-radius: var(--r-chip);
-  transition: color var(--t-fast), background var(--t-fast);
+  font-family: var(--font-display);
+  font-size: 0.875rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--smoke-light);
+  padding: 4px 0;
+  border-bottom: 2px solid transparent;
+  transition: color var(--transition), border-color var(--transition);
 }
-
-.header-nav a:hover, .header-nav a.active {
-  color: var(--parlay-ink);
-  background: var(--parlay-surface-2);
-  text-decoration: none;
+.header-nav a:hover,
+.header-nav a.active {
+  color: var(--gold);
+  border-bottom-color: var(--gold);
 }
 
-/* Dark mode toggle */
-.dark-toggle {
-  width: 40px;
-  height: 22px;
-  background: var(--parlay-surface-3);
-  border: 1px solid var(--parlay-border);
-  border-radius: 11px;
-  position: relative;
-  cursor: pointer;
-  transition: background var(--t-normal);
-  flex-shrink: 0;
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
 }
 
-.dark-toggle::after {
-  content: "";
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 16px;
-  height: 16px;
+.dark-toggle {
+  width: 32px; height: 32px;
+  background: var(--mahogany-light);
+  border: 1px solid var(--smoke);
   border-radius: 50%;
-  background: var(--parlay-ink-2);
-  transition: transform var(--t-normal), background var(--t-normal);
-}
-
-[data-theme="dark"] .dark-toggle {
-  background: var(--parlay-blue);
-  border-color: var(--parlay-blue);
-}
-
-[data-theme="dark"] .dark-toggle::after {
-  transform: translateX(18px);
-  background: var(--parlay-surface);
+  cursor: pointer;
+  color: var(--smoke-light);
+  font-size: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: border-color var(--transition), color var(--transition);
 }
+.dark-toggle::after { content: "◑"; }
+.dark-toggle:hover { border-color: var(--gold); color: var(--gold); }
 
-/* ── 3-Column Layout ──────────────────────────────────────── */
+/* ── 3-Column Layout ───────────────────────────────────────────────────────── */
 .app-body {
   display: grid;
-  grid-template-columns: var(--col-left) 1fr var(--col-right);
-  grid-template-rows: 1fr;
-  gap: var(--gap);
-  padding: var(--gap);
-  min-height: calc(100vh - var(--header-h));
-  align-items: start;
+  grid-template-columns: 280px 1fr 300px;
+  gap: var(--space-md);
+  padding: var(--space-md);
+  min-height: calc(100vh - 56px);
+  max-width: 1400px;
+  margin: 0 auto;
 }
 
-.col-left, .col-center, .col-right {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sp-3);
-  min-width: 0;
-}
+.col-left  { display: flex; flex-direction: column; gap: var(--space-md); }
+.col-center{ display: flex; flex-direction: column; gap: var(--space-sm); }
+.col-right { display: flex; flex-direction: column; gap: var(--space-md); overflow-y: auto; max-height: calc(100vh - 80px); }
 
-/* ── Panels (base card) ───────────────────────────────────── */
+/* ── Panels ────────────────────────────────────────────────────────────────── */
 .panel {
-  background: var(--parlay-surface);
-  border: 1px solid var(--parlay-border);
-  border-radius: var(--r-panel);
-  padding: var(--sp-4);
-  overflow: hidden;
+  background: var(--mahogany);
+  border: 1px solid rgba(201,168,76,0.25);
+  border-radius: 6px;
+  padding: var(--space-md);
+  box-shadow: 0 4px 16px var(--shadow);
 }
 
 .panel-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: var(--sp-3);
+  margin-bottom: var(--space-sm);
+  padding-bottom: var(--space-sm);
+  border-bottom: 1px solid rgba(201,168,76,0.2);
 }
 
 .panel-title {
-  font-size: 0.75rem;
-  font-weight: 600;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--parlay-ink-3);
+  font-family: var(--font-display);
+  font-style: italic;
+  font-size: 0.95rem;
+  color: var(--gold);
+  letter-spacing: 0.02em;
 }
 
-/* ── Player Card ──────────────────────────────────────────── */
-.player-card {
-  background: var(--parlay-surface);
-  border: 1px solid var(--parlay-border);
-  border-radius: var(--r-panel);
-  padding: var(--sp-4);
-}
+/* ── Player Card ───────────────────────────────────────────────────────────── */
+.player-card { }
 
 .player-card-header {
   display: flex;
   align-items: center;
-  gap: var(--sp-3);
-  margin-bottom: var(--sp-4);
+  gap: var(--space-md);
+  margin-bottom: var(--space-md);
 }
 
 .player-avatar {
-  width: 40px;
-  height: 40px;
+  width: 48px; height: 48px;
   border-radius: 50%;
-  background: var(--parlay-blue-bg);
-  border: 2px solid var(--parlay-blue);
+  background: var(--felt-light);
+  border: 2px solid var(--gold);
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 1.125rem;
-  font-weight: 700;
-  color: var(--parlay-blue);
-  flex-shrink: 0;
-}
-
-.player-info { min-width: 0; }
-
-.player-name {
-  font-size: 0.9375rem;
+  font-family: var(--font-display);
+  font-size: 1.2rem;
   font-weight: 600;
-  color: var(--parlay-ink);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  color: var(--gold);
+  flex-shrink: 0;
 }
 
-.player-rank {
-  font-size: 0.75rem;
-  color: var(--parlay-ink-3);
-  font-family: var(--font-mono);
-}
+.player-name  { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--cream); }
+.player-rank  { font-family: var(--font-mono); font-size: 0.7rem; color: var(--smoke-light); }
 
 /* CP Bar */
-.cp-section { margin-top: var(--sp-2); }
-
-.cp-label-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: var(--sp-1);
-}
-
-.cp-label {
-  font-size: 0.75rem;
-  font-weight: 600;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-  color: var(--parlay-ink-3);
-}
-
-.cp-value {
-  font-size: 0.8125rem;
-  font-weight: 700;
-  color: var(--parlay-blue);
-}
+.cp-section { }
+.cp-label-row { display: flex; justify-content: space-between; margin-bottom: 4px; }
+.cp-label { font-size: 0.75rem; color: var(--smoke-light); letter-spacing: 0.04em; text-transform: uppercase; }
+.cp-value  { font-family: var(--font-mono); font-size: 0.75rem; color: var(--gold); }
 
 .cp-track {
   height: 6px;
-  background: var(--parlay-surface-3);
   border-radius: 3px;
+  background: var(--felt);
+  border: 1px solid rgba(201,168,76,0.2);
   overflow: hidden;
-  position: relative;
 }
-
 .cp-fill {
   height: 100%;
-  background: linear-gradient(90deg, var(--parlay-blue), var(--parlay-purple));
+  background: linear-gradient(90deg, var(--gold), var(--gold-light));
   border-radius: 3px;
-  transition: width 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
-  position: relative;
+  transition: width 400ms ease;
 }
 
-.cp-fill::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.25) 50%, transparent 100%);
-  animation: cp-shimmer 2s linear infinite;
+/* ── Tactical Cards (playing card style) ────────────────────────────────────── */
+.hand-container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--space-sm);
+  min-height: 80px;
 }
 
-@keyframes cp-shimmer {
-  0%   { transform: translateX(-100%); }
-  100% { transform: translateX(100%); }
+.empty-state {
+  grid-column: 1 / -1;
+  text-align: center;
+  padding: var(--space-lg);
+  color: var(--smoke);
+  font-size: 0.875rem;
 }
 
-/* ── Tactical Cards (the hand) ────────────────────────────── */
-.hand-container {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sp-2);
-}
+.empty-state-icon { font-size: 1.5rem; margin-bottom: var(--space-sm); }
 
+/* Flip-card container */
 .tactical-card {
-  position: relative;
-  height: 64px;
-  cursor: pointer;
   perspective: 600px;
+  cursor: pointer;
+  height: 110px;
 }
 
 .card-inner {
   position: relative;
-  width: 100%;
-  height: 100%;
+  width: 100%; height: 100%;
   transform-style: preserve-3d;
-  transition: transform var(--t-slow);
+  transition: transform 400ms ease;
 }
 
-.tactical-card:hover .card-inner,
-.tactical-card.flipped .card-inner {
-  transform: rotateY(180deg);
-}
+.tactical-card:hover .card-inner { transform: rotateY(180deg); }
+.tactical-card.selected .card-inner { transform: rotateY(180deg); }
+.tactical-card.selected { outline: 2px solid var(--gold); border-radius: 8px; }
 
 .card-face, .card-back {
   position: absolute;
   inset: 0;
-  border-radius: var(--r-card);
-  padding: var(--sp-2) var(--sp-3);
+  border-radius: 8px;
+  border: 1px solid var(--gold);
+  background: var(--ivory);
+  color: var(--ink);
   backface-visibility: hidden;
-  -webkit-backface-visibility: hidden;
+  padding: var(--space-sm);
   display: flex;
   flex-direction: column;
-  justify-content: center;
-}
-
-.card-face {
-  background: var(--parlay-surface);
-  border: 1px solid var(--parlay-border);
-  transition: border-color var(--t-fast), background var(--t-fast);
-}
-
-.tactical-card:hover .card-face,
-.tactical-card.selected .card-face {
-  border-color: var(--parlay-blue);
-  background: var(--parlay-blue-bg);
+  box-shadow: 2px 3px 8px var(--shadow);
 }
 
-.tactical-card.selected .card-face {
-  border-width: 2px;
-}
-
-.card-back {
-  background: var(--parlay-surface-3);
-  border: 1px solid var(--parlay-border);
-  transform: rotateY(180deg);
-  font-size: 0.6875rem;
-  color: var(--parlay-ink-2);
-  overflow: hidden;
-}
+.card-back { transform: rotateY(180deg); background: var(--cream-dark); }
 
 .card-name {
-  font-size: 0.8125rem;
+  font-family: var(--font-display);
+  font-size: 0.7rem;
   font-weight: 600;
-  color: var(--parlay-ink);
+  color: var(--ink);
+  line-height: 1.2;
 }
-
 .card-type {
-  font-size: 0.6875rem;
-  color: var(--parlay-ink-3);
   font-family: var(--font-mono);
+  font-size: 0.55rem;
+  color: var(--smoke);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  margin-top: 2px;
 }
-
 .card-cost {
-  position: absolute;
-  top: var(--sp-2);
-  right: var(--sp-2);
-  width: 22px;
-  height: 22px;
-  border-radius: 50%;
-  background: var(--parlay-blue);
-  color: var(--parlay-surface);
-  font-size: 0.6875rem;
-  font-weight: 700;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  margin-top: auto;
+  align-self: flex-end;
+  background: var(--mahogany);
+  color: var(--gold);
   font-family: var(--font-mono);
+  font-size: 0.6rem;
+  padding: 1px 5px;
+  border-radius: 3px;
+  border: 1px solid var(--gold);
 }
 
 .card-back-label {
-  font-size: 0.625rem;
-  font-weight: 600;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-  color: var(--parlay-ink-3);
-  margin-bottom: var(--sp-1);
+  font-family: var(--font-display);
+  font-style: italic;
+  font-size: 0.6rem;
+  color: var(--smoke);
+  margin-bottom: 4px;
 }
-
 .card-game-theory {
-  font-size: 0.6875rem;
+  font-size: 0.65rem;
+  color: var(--ink);
   line-height: 1.4;
-  color: var(--parlay-ink-2);
+  overflow: hidden;
 }
 
-/* ── Achievement Badges ───────────────────────────────────── */
+/* ── Achievements ───────────────────────────────────────────────────────────── */
 .achievements-strip {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--sp-2);
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--space-xs);
 }
 
 .badge {
-  display: flex;
-  align-items: center;
-  gap: var(--sp-1);
-  padding: var(--sp-1) var(--sp-2);
-  border-radius: var(--r-chip);
-  background: var(--parlay-surface-2);
-  border: 1px solid var(--parlay-border);
-  font-size: 0.6875rem;
-  font-weight: 500;
-  color: var(--parlay-ink-3);
-  transition: all var(--t-normal);
+  background: var(--felt);
+  border: 1px solid rgba(201,168,76,0.15);
+  border-radius: 6px;
+  padding: var(--space-sm);
+  text-align: center;
+  font-size: 0.65rem;
+  color: var(--smoke);
   cursor: default;
+  opacity: 0.45;
+  transition: opacity var(--transition), border-color var(--transition);
 }
 
 .badge.earned {
-  background: var(--parlay-amber-bg);
-  border-color: var(--parlay-amber);
-  color: var(--parlay-amber);
-}
-
-.badge.earned:hover {
-  background: var(--parlay-amber);
-  color: var(--parlay-surface);
-}
-
-.badge-icon {
-  font-size: 0.875rem;
-  line-height: 1;
+  opacity: 1;
+  border-color: var(--gold);
+  color: var(--gold);
 }
 
-/* ── Act Pills ────────────────────────────────────────────── */
-.act-pills {
-  display: flex;
-  align-items: center;
-  gap: var(--sp-2);
-}
-
-.act-pill {
-  padding: var(--sp-1) var(--sp-3);
-  border-radius: 99px;
-  font-size: 0.6875rem;
-  font-weight: 700;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  background: var(--parlay-surface-3);
-  color: var(--parlay-ink-3);
-  border: 1px solid var(--parlay-border);
-  transition: all var(--t-normal);
-}
-
-.act-pill.active {
-  background: var(--parlay-ink);
-  color: var(--parlay-surface);
-  border-color: var(--parlay-ink);
-}
+.badge-icon { display: block; font-size: 1rem; margin-bottom: 2px; }
 
-.act-pill.completed {
-  background: var(--parlay-green-bg);
-  color: var(--parlay-green);
-  border-color: var(--parlay-green);
-}
-
-/* ── Scenario Header ──────────────────────────────────────── */
+/* ── Center — Scenario Header ──────────────────────────────────────────────── */
 .scenario-header {
-  background: var(--parlay-surface);
-  border: 1px solid var(--parlay-border);
-  border-radius: var(--r-panel);
-  padding: var(--sp-4);
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
-  gap: var(--sp-4);
+  background: var(--mahogany);
+  border: 1px solid rgba(201,168,76,0.2);
+  border-radius: 6px;
+  padding: var(--space-md);
+  box-shadow: 0 2px 8px var(--shadow);
 }
 
 .scenario-title {
-  font-size: 1rem;
-  font-weight: 700;
-  color: var(--parlay-ink);
+  font-family: var(--font-display);
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--cream);
 }
 
 .scenario-meta {
-  font-size: 0.75rem;
-  color: var(--parlay-ink-3);
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
   margin-top: 2px;
 }
 
-/* ── Drift Alert Bar ──────────────────────────────────────── */
-.drift-alert {
+.act-pills {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--sp-2) var(--sp-4);
-  background: var(--parlay-amber-bg);
-  border: 1px solid var(--parlay-amber);
-  border-radius: var(--r-card);
-  gap: var(--sp-3);
-  animation: slide-down 200ms ease;
-}
-
-.drift-alert.hidden { display: none; }
-
-@keyframes slide-down {
-  from { opacity: 0; transform: translateY(-8px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
-
-.drift-alert-icon {
-  font-size: 1rem;
-  flex-shrink: 0;
+  gap: var(--space-xs);
 }
 
-.drift-alert-text {
-  flex: 1;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  color: var(--parlay-amber);
+.act-pill {
+  width: 28px; height: 28px;
+  border-radius: 50%;
+  border: 1px solid rgba(201,168,76,0.3);
+  display: flex; align-items: center; justify-content: center;
+  font-family: var(--font-display);
+  font-size: 0.75rem;
+  color: var(--smoke);
+  cursor: default;
 }
+.act-pill.active   { border-color: var(--gold); color: var(--gold); }
+.act-pill.completed{ border-color: var(--emerald); background: var(--emerald); color: var(--ivory); }
 
-.drift-dismiss {
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: var(--parlay-amber);
-  font-size: 1rem;
-  line-height: 1;
-  padding: var(--sp-1);
-  border-radius: var(--r-chip);
-  flex-shrink: 0;
-  transition: background var(--t-fast);
+/* ── Drift Alert ───────────────────────────────────────────────────────────── */
+.drift-alert {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  background: rgba(139,26,26,0.25);
+  border: 1px solid var(--scarlet);
+  border-radius: 6px;
+  padding: var(--space-sm) var(--space-md);
+  animation: slide-down 300ms ease;
 }
 
-.drift-dismiss:hover { background: rgba(0,0,0,0.08); }
+.drift-alert-icon  { font-size: 1rem; }
+.drift-alert-text  { flex: 1; font-size: 0.875rem; color: var(--cream); }
+.drift-dismiss     { background: none; border: none; color: var(--smoke-light); cursor: pointer; font-size: 1rem; }
+.drift-dismiss:hover { color: var(--cream); }
 
-/* ── Chat Thread ──────────────────────────────────────────── */
+/* ── Chat Thread ───────────────────────────────────────────────────────────── */
 .chat-thread {
+  flex: 1;
+  min-height: 300px;
+  max-height: 420px;
+  overflow-y: auto;
+  padding: var(--space-md);
+  border-radius: 6px;
+  border: 1px solid rgba(201,168,76,0.15);
   display: flex;
   flex-direction: column;
-  gap: var(--sp-4);
-  min-height: 320px;
-  max-height: 480px;
-  overflow-y: auto;
-  padding: var(--sp-4);
-  background: var(--parlay-surface);
-  border: 1px solid var(--parlay-border);
-  border-radius: var(--r-panel);
+  gap: var(--space-sm);
   scroll-behavior: smooth;
+
+  /* Felt texture */
+  background-color: var(--felt);
+  background-image:
+    repeating-linear-gradient(
+      45deg,
+      transparent,
+      transparent 3px,
+      rgba(255,255,255,0.008) 3px,
+      rgba(255,255,255,0.008) 6px
+    ),
+    repeating-linear-gradient(
+      -45deg,
+      transparent,
+      transparent 3px,
+      rgba(255,255,255,0.005) 3px,
+      rgba(255,255,255,0.005) 6px
+    );
+}
+
+.chat-thread::-webkit-scrollbar { width: 4px; }
+.chat-thread::-webkit-scrollbar-track { background: var(--felt); }
+.chat-thread::-webkit-scrollbar-thumb { background: var(--smoke); border-radius: 2px; }
+
+.message-system {
+  text-align: center;
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  color: var(--smoke);
+  letter-spacing: 0.04em;
+  padding: var(--space-xs);
 }
 
+/* Message bubbles */
 .message-bubble {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sp-1);
   max-width: 82%;
+  border-radius: 6px;
+  padding: var(--space-sm) var(--space-md);
+  box-shadow: 0 1px 4px var(--shadow);
+  animation: slide-up 200ms ease;
+}
+
+.message-bubble.player {
+  align-self: flex-end;
+  background: var(--ivory);
+  border-right: 3px solid var(--gold);
+  color: var(--ink);
 }
 
-.message-bubble.player { align-self: flex-end; align-items: flex-end; }
-.message-bubble.opponent { align-self: flex-start; align-items: flex-start; }
+.message-bubble.opponent {
+  align-self: flex-start;
+  background: var(--cream);
+  border-left: 3px solid var(--gold);
+  color: var(--ink);
+}
+
+/* Persona-tinted left border for opponent messages */
+.message-bubble.opponent[data-persona="shark"]    { border-left-color: var(--scarlet-light); }
+.message-bubble.opponent[data-persona="diplomat"] { border-left-color: var(--emerald); }
+.message-bubble.opponent[data-persona="analyst"]  { border-left-color: var(--parlay-blue); }
+.message-bubble.opponent[data-persona="wildcard"] { border-left-color: var(--gold); }
+.message-bubble.opponent[data-persona="veteran"]  { border-left-color: var(--parlay-purple); }
 
 .bubble-meta {
-  font-size: 0.6875rem;
-  color: var(--parlay-ink-3);
   display: flex;
   align-items: center;
-  gap: var(--sp-1);
+  gap: var(--space-sm);
+  margin-bottom: 4px;
+  font-family: var(--font-mono);
+  font-size: 0.65rem;
+  color: var(--smoke);
 }
 
 .bubble-body {
-  padding: var(--sp-2) var(--sp-3);
-  border-radius: var(--r-card);
-  font-size: 0.875rem;
-  line-height: 1.55;
-}
-
-.message-bubble.player .bubble-body {
-  background: var(--parlay-blue);
-  color: #fff;
-  border-bottom-right-radius: var(--r-chip);
+  font-family: var(--font-body);
+  font-size: 0.9rem;
+  line-height: 1.5;
 }
 
-.message-bubble.opponent .bubble-body {
-  background: var(--parlay-surface-2);
-  color: var(--parlay-ink);
-  border: 1px solid var(--parlay-border);
-  border-bottom-left-radius: var(--r-chip);
+.move-pill {
+  padding: 1px 6px;
+  border-radius: 3px;
+  font-size: 0.6rem;
+  font-family: var(--font-mono);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  background: rgba(201,168,76,0.15);
+  color: var(--gold);
+  border: 1px solid rgba(201,168,76,0.3);
 }
 
-/* Offer chip within message */
+/* ── Offer Chips (casino chip style) ─────────────────────────────────────────── */
 .offer-chip {
   display: inline-flex;
   align-items: center;
-  gap: var(--sp-1);
-  padding: 2px var(--sp-2);
-  border-radius: var(--r-chip);
+  justify-content: center;
+  min-width: 72px;
+  height: 72px;
+  border-radius: 50%;
+  border: 4px solid var(--gold);
+  background: var(--mahogany);
+  color: var(--gold-light);
   font-family: var(--font-mono);
-  font-size: 0.8125rem;
-  font-weight: 700;
-  margin: var(--sp-1) 0 0;
+  font-size: 0.65rem;
+  font-weight: 500;
+  text-align: center;
+  padding: 4px;
+  margin-top: var(--space-sm);
+  box-shadow:
+    inset 0 2px 4px rgba(255,255,255,0.1),
+    0 2px 8px rgba(0,0,0,0.4),
+    0 0 0 2px var(--mahogany),
+    0 0 0 5px rgba(201,168,76,0.3);
 }
 
-.message-bubble.player .offer-chip {
-  background: rgba(255,255,255,0.25);
-  color: #fff;
+/* ── Thinking Bubble ───────────────────────────────────────────────────────── */
+.thinking-bubble {
+  display: flex;
+  gap: 5px;
+  padding: var(--space-sm) var(--space-md);
+  align-self: flex-start;
 }
 
-.message-bubble.opponent .offer-chip {
-  background: var(--parlay-green-bg);
-  color: var(--parlay-green);
-  border: 1px solid var(--parlay-green);
+.thinking-dot {
+  width: 8px; height: 8px;
+  border-radius: 50%;
+  background: var(--smoke);
+  animation: dot-bounce 1.4s infinite;
 }
+.thinking-dot:nth-child(2) { animation-delay: 0.2s; }
+.thinking-dot:nth-child(3) { animation-delay: 0.4s; }
 
-.move-pill {
-  display: inline-flex;
-  align-items: center;
-  padding: 1px var(--sp-2);
-  border-radius: var(--r-chip);
-  font-size: 0.625rem;
-  font-weight: 600;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-  margin-left: var(--sp-1);
+/* ── Result Banner ─────────────────────────────────────────────────────────── */
+.result-banner {
+  border-radius: 6px;
+  padding: var(--space-md);
+  text-align: center;
+  border: 1px solid;
+  animation: slide-down 300ms ease;
+}
+.result-banner.deal {
+  background: rgba(26,92,42,0.3);
+  border-color: var(--emerald);
+  color: var(--ivory);
+}
+.result-banner.walk {
+  background: rgba(139,26,26,0.3);
+  border-color: var(--scarlet);
+  color: var(--ivory);
 }
 
-.move-pill.anchor  { background: var(--parlay-red-bg);    color: var(--parlay-red);    }
-.move-pill.concede { background: var(--parlay-amber-bg);  color: var(--parlay-amber);  }
-.move-pill.package { background: var(--parlay-blue-bg);   color: var(--parlay-blue);   }
-.move-pill.walk    { background: var(--parlay-purple-bg); color: var(--parlay-purple); }
-.move-pill.accept  { background: var(--parlay-green-bg);  color: var(--parlay-green);  }
+.result-title  { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; }
+.result-amount { font-family: var(--font-mono); font-size: 1.4rem; color: var(--gold); margin: var(--space-xs) 0; }
+.result-score  { font-family: var(--font-mono); font-size: 0.75rem; color: var(--smoke-light); }
 
-/* System messages */
-.message-system {
-  align-self: center;
-  font-size: 0.75rem;
-  color: var(--parlay-ink-3);
-  background: var(--parlay-surface-2);
-  border: 1px solid var(--parlay-border);
-  padding: var(--sp-1) var(--sp-3);
-  border-radius: 99px;
-  text-align: center;
-}
-
-/* ── Input Area ───────────────────────────────────────────── */
-.input-area {
-  background: var(--parlay-surface);
-  border: 1px solid var(--parlay-border);
-  border-radius: var(--r-panel);
-  padding: var(--sp-4);
-  display: flex;
-  flex-direction: column;
-  gap: var(--sp-3);
+/* ── Input Area ────────────────────────────────────────────────────────────── */
+.input-area {
+  background: var(--mahogany);
+  border: 1px solid rgba(201,168,76,0.25);
+  border-radius: 6px;
+  padding: var(--space-md);
 }
 
 .input-row {
   display: flex;
-  gap: var(--sp-2);
-  align-items: center;
+  gap: var(--space-sm);
+  margin-bottom: var(--space-sm);
 }
 
 .offer-input {
   flex: 1;
-  height: 40px;
-  padding: 0 var(--sp-3);
-  border: 1px solid var(--parlay-border);
-  border-radius: var(--r-card);
-  background: var(--parlay-surface-2);
-  color: var(--parlay-ink);
+  background: var(--felt);
+  border: 1px solid rgba(201,168,76,0.3);
+  border-radius: 4px;
+  color: var(--cream);
   font-family: var(--font-mono);
-  font-size: 0.9375rem;
-  font-weight: 600;
-  transition: border-color var(--t-fast), background var(--t-fast);
-}
-
-.offer-input:focus {
+  font-size: 0.9rem;
+  padding: var(--space-sm) var(--space-md);
   outline: none;
-  border-color: var(--parlay-blue);
-  background: var(--parlay-surface);
-  box-shadow: 0 0 0 2px var(--parlay-blue);
+  transition: border-color var(--transition);
 }
+.offer-input::placeholder { color: var(--smoke); }
+.offer-input:focus { border-color: var(--gold); }
 
 .move-select {
-  height: 40px;
-  padding: 0 var(--sp-3);
-  padding-right: var(--sp-6);
-  border: 1px solid var(--parlay-border);
-  border-radius: var(--r-card);
-  background: var(--parlay-surface-2);
-  color: var(--parlay-ink);
-  font-size: 0.875rem;
+  background: var(--felt);
+  border: 1px solid rgba(201,168,76,0.3);
+  border-radius: 4px;
+  color: var(--cream);
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  padding: var(--space-sm) var(--space-md);
+  outline: none;
   cursor: pointer;
-  appearance: none;
-  -webkit-appearance: none;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238a8f9e'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 10px center;
-  transition: border-color var(--t-fast);
 }
+.move-select:focus { border-color: var(--gold); }
 
-.move-select:focus {
-  outline: none;
-  border-color: var(--parlay-blue);
-  box-shadow: 0 0 0 2px var(--parlay-blue);
-}
+.action-buttons { display: flex; gap: var(--space-sm); }
 
+/* ── Buttons ───────────────────────────────────────────────────────────────── */
 .btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--sp-2);
-  height: 40px;
-  padding: 0 var(--sp-4);
-  border-radius: var(--r-card);
+  gap: var(--space-xs);
+  padding: 8px 18px;
+  border-radius: 4px;
+  border: 1px solid transparent;
+  font-family: var(--font-display);
   font-size: 0.875rem;
   font-weight: 600;
-  border: 1px solid transparent;
+  letter-spacing: 0.04em;
   cursor: pointer;
-  transition: all var(--t-fast);
+  transition: all var(--transition);
   white-space: nowrap;
-  flex-shrink: 0;
-}
-
-.btn:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
 }
+.btn:disabled { opacity: 0.4; cursor: not-allowed; }
 
 .btn-primary {
-  background: var(--parlay-blue);
-  color: #fff;
-  border-color: var(--parlay-blue);
+  background: var(--gold);
+  color: var(--ink);
+  border-color: var(--gold);
 }
-
-.btn-primary:not(:disabled):hover {
-  filter: brightness(1.1);
+.btn-primary:hover:not(:disabled) {
+  background: var(--gold-light);
+  border-color: var(--gold-light);
 }
 
 .btn-success {
-  background: var(--parlay-green);
-  color: #fff;
-  border-color: var(--parlay-green);
-}
-
-.btn-success:not(:disabled):hover {
-  filter: brightness(1.1);
+  background: transparent;
+  color: var(--emerald);
+  border-color: var(--emerald);
 }
+.btn-success:hover:not(:disabled) { background: rgba(26,92,42,0.2); }
 
 .btn-danger {
-  background: var(--parlay-red-bg);
-  color: var(--parlay-red);
-  border-color: var(--parlay-red);
-}
-
-.btn-danger:not(:disabled):hover {
-  background: var(--parlay-red);
-  color: #fff;
+  background: transparent;
+  color: var(--scarlet-light);
+  border-color: var(--scarlet);
 }
+.btn-danger:hover:not(:disabled) { background: rgba(139,26,26,0.2); }
 
 .btn-ghost {
   background: transparent;
-  color: var(--parlay-ink-2);
-  border-color: var(--parlay-border);
+  color: var(--smoke-light);
+  border-color: transparent;
 }
+.btn-ghost:hover:not(:disabled) { color: var(--gold); }
 
-.btn-ghost:not(:disabled):hover {
-  background: var(--parlay-surface-2);
-  border-color: var(--parlay-border-2);
-}
+.btn-sm { padding: 5px 12px; font-size: 0.8rem; }
 
-.btn-sm {
-  height: 32px;
-  padding: 0 var(--sp-3);
-  font-size: 0.8125rem;
-}
-
-.action-buttons {
-  display: flex;
-  gap: var(--sp-2);
-}
-
-/* ── ZOPA Bar ─────────────────────────────────────────────── */
+/* ── ZOPA Bar (ruler style) ────────────────────────────��────────────────────── */
 .zopa-section {
-  background: var(--parlay-surface);
-  border: 1px solid var(--parlay-border);
-  border-radius: var(--r-panel);
-  padding: var(--sp-4);
+  background: var(--mahogany);
+  border: 1px solid rgba(201,168,76,0.2);
+  border-radius: 6px;
+  padding: var(--space-md);
 }
 
 .zopa-track-outer {
   position: relative;
   height: 32px;
-  background: var(--parlay-surface-2);
-  border-radius: var(--r-chip);
-  border: 1px solid var(--parlay-border);
-  margin: var(--sp-3) 0;
+  border-radius: 4px;
+  background: var(--felt);
+  border: 1px solid rgba(201,168,76,0.3);
+  margin: var(--space-sm) 0;
   overflow: visible;
+
+  /* Ruler tick marks */
+  background-image: repeating-linear-gradient(
+    90deg,
+    transparent,
+    transparent 9%,
+    rgba(201,168,76,0.15) 9%,
+    rgba(201,168,76,0.15) 10%
+  );
 }
 
 .zopa-zone {
   position: absolute;
-  top: 0;
-  height: 100%;
-  background: var(--parlay-green-bg);
-  border: 1px solid var(--parlay-green);
-  border-radius: var(--r-chip);
-  opacity: 0.6;
-  transition: left var(--t-normal), width var(--t-normal);
+  top: 0; bottom: 0;
+  background: rgba(26,92,42,0.3);
+  border-left: 1px solid var(--emerald);
+  border-right: 1px solid var(--emerald);
 }
 
 .zopa-marker {
   position: absolute;
-  top: 50%;
-  transform: translate(-50%, -50%);
+  top: -6px; bottom: -6px;
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 2px;
+  transform: translateX(-50%);
   pointer-events: none;
 }
 
 .zopa-marker-line {
   width: 2px;
-  height: 28px;
-  border-radius: 1px;
+  flex: 1;
+  opacity: 0.9;
 }
 
-.marker-player .zopa-marker-line { background: var(--parlay-blue); }
-.marker-opponent .zopa-marker-line { background: var(--parlay-red); }
-.marker-current .zopa-marker-line { background: var(--parlay-ink); }
+.marker-player  .zopa-marker-line { background: var(--parlay-blue); }
+.marker-opponent .zopa-marker-line { background: var(--scarlet-light); }
+.marker-current  .zopa-marker-line { background: var(--gold); }
 
 .zopa-label {
-  font-size: 0.5rem;
-  font-weight: 700;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
+  font-family: var(--font-mono);
+  font-size: 0.55rem;
   white-space: nowrap;
   position: absolute;
   bottom: -16px;
+  color: var(--smoke-light);
 }
 
-.marker-player  .zopa-label { color: var(--parlay-blue);    }
-.marker-opponent .zopa-label { color: var(--parlay-red);     }
-.marker-current  .zopa-label { color: var(--parlay-ink);     }
-
-/* Nash diamond */
 .nash-diamond {
   position: absolute;
-  top: 50%;
-  transform: translate(-50%, -50%) rotate(45deg);
-  width: 10px;
-  height: 10px;
-  background: var(--parlay-amber);
-  border: 1px solid var(--parlay-surface);
-  transition: left var(--t-normal);
-  z-index: 2;
+  top: 50%; transform: translate(-50%, -50%);
+  width: 10px; height: 10px;
+  background: var(--gold);
+  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
 }
 
 .zopa-labels-row {
   display: flex;
   justify-content: space-between;
-  font-size: 0.6875rem;
+  align-items: center;
+  margin-top: var(--space-xs);
   font-family: var(--font-mono);
-  color: var(--parlay-ink-3);
-  margin-top: var(--sp-3);
+  font-size: 0.65rem;
+  color: var(--smoke-light);
 }
 
-/* ── Tension Meter ────────────────────────────────────────── */
+/* ── Tension Meter ─────────────────────────────────────────────────────────── */
 .tension-section {
   display: flex;
   align-items: center;
-  gap: var(--sp-3);
-  padding: var(--sp-3) var(--sp-4);
-  background: var(--parlay-surface);
-  border: 1px solid var(--parlay-border);
-  border-radius: var(--r-panel);
+  gap: var(--space-sm);
+  background: var(--mahogany);
+  border: 1px solid rgba(201,168,76,0.15);
+  border-radius: 6px;
+  padding: var(--space-sm) var(--space-md);
 }
 
 .tension-label {
-  font-size: 0.6875rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--parlay-ink-3);
+  font-family: var(--font-display);
+  font-style: italic;
+  font-size: 0.8rem;
+  color: var(--smoke-light);
   white-space: nowrap;
+  min-width: 52px;
 }
 
 .tension-track {
   flex: 1;
-  height: 4px;
-  background: var(--parlay-surface-3);
-  border-radius: 2px;
+  height: 6px;
+  border-radius: 3px;
+  background: var(--felt);
+  border: 1px solid rgba(201,168,76,0.2);
   overflow: hidden;
-  position: relative;
 }
 
 .tension-fill {
   height: 100%;
-  border-radius: 2px;
-  transition: width 500ms ease, background 500ms ease;
+  border-radius: 3px;
+  background: var(--emerald);
+  transition: width 400ms ease, background 400ms ease;
 }
+.tension-fill[data-level="medium"] { background: var(--gold); }
+.tension-fill[data-level="high"]   { background: var(--scarlet-light); }
 
 .tension-value {
-  font-size: 0.75rem;
   font-family: var(--font-mono);
-  font-weight: 600;
-  width: 32px;
+  font-size: 0.75rem;
+  color: var(--smoke-light);
+  min-width: 36px;
   text-align: right;
-  color: var(--parlay-ink-2);
-  transition: color 500ms ease;
 }
 
-/* tension colour shifts */
-.tension-fill[data-level="low"]    { background: var(--parlay-green);  }
-.tension-fill[data-level="medium"] { background: var(--parlay-amber);  }
-.tension-fill[data-level="high"]   { background: var(--parlay-red);    }
-
-/* ── Three.js Canvas Container ────────────────────────────── */
+/* ── Character Canvas ──────────────────────────────────────────────────────── */
 .character-canvas-wrap {
-  width: 280px;
-  height: 380px;
-  border-radius: var(--r-panel);
-  overflow: hidden;
-  background: transparent;
   position: relative;
-  align-self: center;
-  margin: 0 auto;
+  display: flex;
+  justify-content: center;
 }
 
 #character-canvas {
   display: block;
-  width: 280px !important;
-  height: 380px !important;
+  border-radius: 4px;
+  border: 1px solid rgba(201,168,76,0.15);
 }
 
 .character-state-badge {
   position: absolute;
-  bottom: var(--sp-2);
-  left: 50%;
-  transform: translateX(-50%);
-  padding: 2px var(--sp-2);
-  border-radius: var(--r-chip);
-  font-size: 0.625rem;
-  font-weight: 700;
-  letter-spacing: 0.06em;
+  bottom: var(--space-sm);
+  right: var(--space-sm);
+  background: rgba(44,24,16,0.85);
+  border: 1px solid var(--gold);
+  border-radius: 3px;
+  font-family: var(--font-mono);
+  font-size: 0.6rem;
+  color: var(--gold);
+  padding: 2px 6px;
   text-transform: uppercase;
-  background: rgba(0,0,0,0.55);
-  color: #fff;
-  pointer-events: none;
-  white-space: nowrap;
+  letter-spacing: 0.06em;
 }
 
-/* ── Persona Info ─────────────────────────────────────────── */
+/* ── Persona Info ──────────────────────────────────────────────────────────── */
 .persona-info {
   display: flex;
   align-items: center;
-  gap: var(--sp-3);
-  padding: var(--sp-3) var(--sp-4);
-  border-radius: var(--r-panel);
-  border: 1px solid var(--parlay-border);
-  background: var(--parlay-surface);
+  gap: var(--space-md);
+  background: var(--mahogany);
+  border: 1px solid rgba(201,168,76,0.2);
+  border-radius: 6px;
+  padding: var(--space-sm) var(--space-md);
 }
 
 .persona-avatar {
-  width: 32px;
-  height: 32px;
-  border-radius: var(--r-chip);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1rem;
+  width: 40px; height: 40px;
+  border-radius: 50%;
+  border: 2px solid var(--gold);
+  display: flex; align-items: center; justify-content: center;
+  font-size: 1.2rem;
+  background: var(--felt);
   flex-shrink: 0;
 }
 
-.persona-avatar.shark    { background: var(--parlay-red-bg);    }
-.persona-avatar.diplomat { background: var(--parlay-green-bg);  }
-.persona-avatar.analyst  { background: var(--parlay-blue-bg);   }
-.persona-avatar.wildcard { background: var(--parlay-amber-bg);  }
-.persona-avatar.veteran  { background: var(--parlay-purple-bg); }
+.persona-name { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: var(--cream); }
+.persona-desc { font-size: 0.75rem; color: var(--smoke-light); margin-top: 2px; }
 
-.persona-name {
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--parlay-ink);
-}
-
-.persona-desc {
-  font-size: 0.75rem;
-  color: var(--parlay-ink-3);
-}
-
-/* ── ToM Belief Bars ──────────────────────────────────────── */
-.tom-beliefs {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sp-2);
-}
+/* ── ToM Belief Bars ───────────────────────────────────────────────────────── */
+.tom-beliefs { display: flex; flex-direction: column; gap: var(--space-sm); }
 
 .belief-row {
-  display: flex;
+  display: grid;
+  grid-template-columns: 80px 1fr 36px 10px;
   align-items: center;
-  gap: var(--sp-2);
+  gap: var(--space-xs);
 }
 
-.belief-label {
-  font-size: 0.75rem;
-  color: var(--parlay-ink-2);
-  width: 80px;
-  flex-shrink: 0;
-}
+.belief-label { font-size: 0.7rem; color: var(--smoke-light); }
 
 .belief-track {
-  flex: 1;
-  height: 6px;
-  background: var(--parlay-surface-3);
-  border-radius: 3px;
+  height: 4px;
+  border-radius: 2px;
+  background: var(--felt);
+  border: 1px solid rgba(201,168,76,0.15);
   overflow: hidden;
 }
 
 .belief-fill {
   height: 100%;
-  border-radius: 3px;
-  transition: width 400ms ease;
-}
-
-.belief-fill.cooperative  { background: var(--parlay-green);  }
-.belief-fill.competitive  { background: var(--parlay-red);    }
-.belief-fill.reservation  { background: var(--parlay-amber);  }
-.belief-fill.flexibility  { background: var(--parlay-blue);   }
-
-.belief-pct {
-  font-size: 0.6875rem;
-  font-family: var(--font-mono);
-  font-weight: 600;
-  width: 28px;
-  text-align: right;
-  color: var(--parlay-ink-3);
+  border-radius: 2px;
+  transition: width 600ms ease;
 }
+.belief-fill.cooperative { background: var(--emerald); }
+.belief-fill.competitive  { background: var(--scarlet-light); }
+.belief-fill.reservation  { background: var(--gold); }
+.belief-fill.flexibility  { background: var(--parlay-blue); }
 
-/* confidence dot */
-.belief-confidence {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
+.belief-pct { font-family: var(--font-mono); font-size: 0.65rem; color: var(--smoke-light); }
 
-.confidence-high   { background: var(--parlay-green);  }
-.confidence-medium { background: var(--parlay-amber);  }
-.confidence-low    { background: var(--parlay-red);    }
+.belief-confidence { width: 8px; height: 8px; border-radius: 50%; }
+.confidence-high   { background: var(--emerald); }
+.confidence-medium { background: var(--gold); }
+.confidence-low    { background: var(--smoke); }
 
-/* ── Sparkline / Offer History ────────────────────────────── */
+/* ── Sparklines ────────────────────────────────────────────────────────────── */
 .sparkline-wrap {
   position: relative;
+  overflow: hidden;
 }
-
-.sparkline-canvas {
-  width: 100%;
-  height: 72px;
-  display: block;
-}
-
+.sparkline-canvas { width: 100%; height: 100%; }
 .sparkline-labels {
-  display: flex;
-  justify-content: space-between;
-  margin-top: var(--sp-1);
-  font-size: 0.625rem;
-  font-family: var(--font-mono);
-  color: var(--parlay-ink-3);
+  display: flex; justify-content: space-between; align-items: center;
+  font-family: var(--font-mono); font-size: 0.65rem; color: var(--smoke-light);
+  margin-top: 4px;
 }
+.sparkline-label { font-size: 0.65rem; }
 
-/* ── Leaderboard Table ────────────────────────────────────── */
+/* ── Leaderboard ───────────────────────────────────────────────────────────── */
 .leaderboard-table {
   width: 100%;
   border-collapse: collapse;
-  font-size: 0.8125rem;
+  font-size: 0.8rem;
 }
-
 .leaderboard-table th {
-  font-size: 0.625rem;
-  font-weight: 600;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--parlay-ink-3);
-  padding: 0 var(--sp-2) var(--sp-2);
+  font-family: var(--font-display);
+  font-style: italic;
+  font-size: 0.7rem;
+  color: var(--smoke-light);
   text-align: left;
-  border-bottom: 1px solid var(--parlay-border);
+  padding: 4px var(--space-sm);
+  border-bottom: 1px solid rgba(201,168,76,0.15);
+  letter-spacing: 0.02em;
 }
-
-.leaderboard-table th.num,
-.leaderboard-table td.num {
-  text-align: right;
-}
-
+.leaderboard-table th.num { text-align: right; }
 .leaderboard-table td {
-  padding: var(--sp-2);
-  color: var(--parlay-ink);
-  border-bottom: 1px solid var(--parlay-border);
+  padding: 5px var(--space-sm);
+  border-bottom: 1px solid rgba(255,255,255,0.03);
+  color: var(--cream);
 }
+.leaderboard-table td.num { text-align: right; font-family: var(--font-mono); color: var(--smoke-light); }
+.leaderboard-table tr:hover td { background: rgba(201,168,76,0.04); }
+.leaderboard-table tr.highlight-player td { background: rgba(201,168,76,0.08); }
 
-.leaderboard-table tr:last-child td { border-bottom: none; }
-
-.leaderboard-table tr:hover td { background: var(--parlay-surface-2); }
+.lb-rank { font-family: var(--font-mono); font-size: 0.7rem; color: var(--smoke-light); }
+.lb-rank.gold   { color: #FFD700; }
+.lb-rank.silver { color: #C0C0C0; }
+.lb-rank.bronze { color: #CD7F32; }
 
-.leaderboard-table tr.highlight-player td {
-  background: var(--parlay-blue-bg);
-  color: var(--parlay-blue);
-  font-weight: 600;
-}
-
-.lb-rank {
+/* ── Stat chip ─────────────────────────────────────────────────────────────── */
+.stat-chip {
   font-family: var(--font-mono);
-  font-weight: 700;
-  color: var(--parlay-ink-3);
-}
-
-.lb-rank.gold   { color: #c9a227; }
-.lb-rank.silver { color: #8c9aad; }
-.lb-rank.bronze { color: #b87333; }
-
-/* ── Scenario & Persona Selectors ─────────────────────────── */
-.selector-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--sp-2);
-}
-
-.selector-card {
-  border: 2px solid var(--parlay-border);
-  border-radius: var(--r-card);
-  padding: var(--sp-3);
-  cursor: pointer;
-  transition: all var(--t-fast);
-  background: var(--parlay-surface);
-}
-
-.selector-card:hover {
-  border-color: var(--parlay-blue);
-  background: var(--parlay-blue-bg);
-}
-
-.selector-card.selected {
-  border-color: var(--parlay-blue);
-  background: var(--parlay-blue-bg);
-  box-shadow: 0 0 0 2px var(--parlay-blue);
-}
-
-.selector-card-name {
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--parlay-ink);
-  margin-bottom: var(--sp-1);
-}
-
-.selector-card-meta {
-  font-size: 0.6875rem;
-  color: var(--parlay-ink-3);
-}
-
-/* Persona selector full-width */
-.persona-grid {
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  gap: var(--sp-2);
-}
-
-.persona-option {
-  border: 2px solid var(--parlay-border);
-  border-radius: var(--r-card);
-  padding: var(--sp-3) var(--sp-2);
-  cursor: pointer;
-  text-align: center;
-  transition: all var(--t-fast);
-  background: var(--parlay-surface);
+  font-size: 0.65rem;
+  padding: 2px 8px;
+  border-radius: 3px;
+  border: 1px solid;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
 }
+.stat-chip.blue { color: var(--parlay-blue); border-color: var(--parlay-blue); }
 
-.persona-option:hover { border-color: var(--parlay-blue); }
-
-.persona-option.selected { border-color: var(--parlay-blue); box-shadow: 0 0 0 2px var(--parlay-blue); }
-
-.persona-option-icon { font-size: 1.5rem; margin-bottom: var(--sp-1); }
-.persona-option-name { font-size: 0.6875rem; font-weight: 600; color: var(--parlay-ink); }
-
-/* ── Loading Spinner (Gemini wait) ────────────────────────── */
+/* ── Loading Overlay ───────────────────────────────────────────────────────── */
 .loading-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 999;
-  background: rgba(0,0,0,0.35);
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  position: fixed; inset: 0;
+  background: rgba(28,43,26,0.75);
   backdrop-filter: blur(2px);
+  display: flex; align-items: center; justify-content: center;
+  z-index: 900;
 }
 
-.loading-overlay.hidden { display: none; }
-
 .loading-card {
-  background: var(--parlay-surface);
-  border: 1px solid var(--parlay-border);
-  border-radius: var(--r-panel);
-  padding: var(--sp-8);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--sp-4);
-  min-width: 200px;
+  background: var(--mahogany);
+  border: 1px solid rgba(201,168,76,0.4);
+  border-radius: 8px;
+  padding: var(--space-xl) var(--space-xl);
+  text-align: center;
+  display: flex; flex-direction: column; align-items: center; gap: var(--space-md);
+  box-shadow: 0 8px 32px var(--shadow);
 }
 
 .spinner {
-  width: 36px;
-  height: 36px;
-  border: 3px solid var(--parlay-border);
-  border-top-color: var(--parlay-blue);
-  border-radius: 50%;
-  animation: spin 700ms linear infinite;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-.loading-text {
-  font-size: 0.875rem;
-  color: var(--parlay-ink-2);
-  font-weight: 500;
-}
-
-/* Inline thinking indicator in chat */
-.thinking-bubble {
-  align-self: flex-start;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: var(--sp-2) var(--sp-3);
-  background: var(--parlay-surface-2);
-  border: 1px solid var(--parlay-border);
-  border-radius: var(--r-card);
-  border-bottom-left-radius: var(--r-chip);
-}
-
-.thinking-dot {
-  width: 6px;
-  height: 6px;
+  width: 36px; height: 36px;
+  border: 3px solid rgba(201,168,76,0.2);
+  border-top-color: var(--gold);
   border-radius: 50%;
-  background: var(--parlay-ink-3);
-  animation: bounce 1.2s ease-in-out infinite;
+  animation: spin 800ms linear infinite;
 }
 
-.thinking-dot:nth-child(2) { animation-delay: 0.2s; }
-.thinking-dot:nth-child(3) { animation-delay: 0.4s; }
-
-@keyframes bounce {
-  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
-  40%           { transform: translateY(-5px); opacity: 1; }
-}
+.loading-text { font-family: var(--font-display); font-style: italic; color: var(--smoke-light); }
 
-/* ── Modal (landing / setup) ──────────────────────────────── */
-.modal-backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: 200;
-  background: rgba(0,0,0,0.55);
+/* ── Onboarding Overlay (3-step wizard) ──────────────────────────────────────
+   Step 2 and 3 are *after* step 1 in the DOM. With the same z-index, they
+   stack on top and can steal pointer events. Keep inactive at 800; lift any
+   step that is start-active, active, or exiting to 820 so the visible step
+   is always the topmost overlay and receives clicks. */
+.onboarding-overlay {
+  position: fixed; inset: 0;
+  background: var(--felt);
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: var(--sp-4);
-  backdrop-filter: blur(4px);
+  z-index: 800;
+  transform: translateX(100%);
+  transition: transform 300ms ease;
+  pointer-events: none;
 }
 
-.modal-backdrop.hidden { display: none; }
-
-.modal {
-  background: var(--parlay-surface);
-  border: 1px solid var(--parlay-border);
-  border-radius: var(--r-panel);
-  width: min(640px, 100%);
-  max-height: 90vh;
-  overflow-y: auto;
-  animation: modal-in 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
+.onboarding-overlay.active,
+.onboarding-overlay.start-active,
+.onboarding-overlay.exiting {
+  pointer-events: auto;
+  z-index: 820;
 }
 
-@keyframes modal-in {
-  from { opacity: 0; transform: scale(0.94) translateY(12px); }
-  to   { opacity: 1; transform: scale(1) translateY(0); }
+.onboarding-overlay.active {
+  transform: translateX(0);
 }
 
-.modal-header {
-  padding: var(--sp-6);
-  border-bottom: 1px solid var(--parlay-border);
+.onboarding-overlay.exiting {
+  transform: translateX(-100%);
 }
 
-.modal-title {
-  font-size: 1.25rem;
-  font-weight: 700;
-  color: var(--parlay-ink);
+.onboarding-overlay.start-active {
+  /* First step starts in view */
+  transform: translateX(0);
 }
 
-.modal-subtitle {
-  font-size: 0.875rem;
-  color: var(--parlay-ink-3);
-  margin-top: var(--sp-1);
+/* Inactive steps are fully removed from the layout; keeps them from ever
+   intercepting clicks (reliable on all browsers; z-index + pointer-events
+   alone was not enough in some cases). */
+.onboarding-overlay:not(.active):not(.start-active):not(.exiting) {
+  display: none !important;
+  visibility: hidden;
 }
 
-.modal-body {
-  padding: var(--sp-6);
-  display: flex;
-  flex-direction: column;
-  gap: var(--sp-6);
+.onboarding-card {
+  background: var(--mahogany);
+  border: 1px solid rgba(201,168,76,0.35);
+  border-radius: 8px;
+  padding: var(--space-xl);
+  width: 460px;
+  max-width: 95vw;
+  box-shadow: 0 16px 64px var(--shadow);
+  position: relative;
 }
 
-.modal-footer {
-  padding: var(--sp-4) var(--sp-6);
-  border-top: 1px solid var(--parlay-border);
-  display: flex;
-  justify-content: flex-end;
-  gap: var(--sp-3);
+.onboarding-card.wide {
+  width: 860px;
+  max-width: 95vw;
 }
 
-.form-group {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sp-2);
+.onboarding-step-num {
+  font-family: var(--font-mono);
+  font-size: 0.65rem;
+  color: var(--smoke);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  margin-bottom: var(--space-sm);
 }
 
-.form-label {
-  font-size: 0.8125rem;
+.onboarding-headline {
+  font-family: var(--font-display);
+  font-size: 2.25rem;
   font-weight: 600;
-  color: var(--parlay-ink-2);
+  color: var(--cream);
+  margin-bottom: var(--space-sm);
+  line-height: 1.2;
 }
 
-.form-input {
-  height: 40px;
-  padding: 0 var(--sp-3);
-  border: 1px solid var(--parlay-border);
-  border-radius: var(--r-card);
-  background: var(--parlay-surface-2);
-  color: var(--parlay-ink);
-  font-size: 0.9375rem;
-  transition: border-color var(--t-fast), box-shadow var(--t-fast);
+.onboarding-sub {
+  font-family: var(--font-body);
+  font-size: 1rem;
+  color: var(--smoke-light);
+  margin-bottom: var(--space-xl);
+  line-height: 1.5;
 }
 
-.form-input:focus {
+/* Name input */
+.onboarding-name-input {
+  width: 100%;
+  background: var(--felt);
+  border: 1px solid rgba(201,168,76,0.4);
+  border-radius: 4px;
+  color: var(--cream);
+  font-family: var(--font-display);
+  font-size: 1.2rem;
+  padding: var(--space-md);
   outline: none;
-  border-color: var(--parlay-blue);
-  box-shadow: 0 0 0 2px var(--parlay-blue);
-  background: var(--parlay-surface);
-}
-
-/* ── Training Dashboard Specifics ─────────────────────────── */
-.train-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: var(--sp-4);
-  margin-bottom: var(--sp-4);
-}
-
-.model-card {
-  background: var(--parlay-surface);
-  border: 1px solid var(--parlay-border);
-  border-radius: var(--r-panel);
-  padding: var(--sp-4);
+  margin-bottom: var(--space-lg);
+  transition: border-color var(--transition);
 }
+.onboarding-name-input::placeholder { color: var(--smoke); }
+.onboarding-name-input:focus { border-color: var(--gold); }
 
-.model-card.highlight {
-  border-color: var(--parlay-blue);
-  box-shadow: 0 0 0 2px var(--parlay-blue-bg);
-}
-
-.model-tag {
-  display: inline-flex;
-  align-items: center;
-  padding: 2px var(--sp-2);
-  border-radius: var(--r-chip);
-  font-size: 0.6875rem;
-  font-weight: 700;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-  margin-bottom: var(--sp-3);
+.onboarding-error {
+  color: var(--scarlet-light);
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  margin-bottom: var(--space-sm);
+  min-height: 1.2em;
 }
 
-.model-tag.base  { background: var(--parlay-surface-3); color: var(--parlay-ink-2); }
-.model-tag.sft   { background: var(--parlay-blue-bg);   color: var(--parlay-blue);  }
-.model-tag.grpo  { background: var(--parlay-green-bg);  color: var(--parlay-green); }
-
-.metric-row {
+.onboarding-footer {
+  margin-top: var(--space-lg);
   display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-  padding: var(--sp-2) 0;
-  border-bottom: 1px solid var(--parlay-border);
-  font-size: 0.8125rem;
+  justify-content: flex-end;
+  gap: var(--space-sm);
 }
 
-.metric-row:last-child { border-bottom: none; }
-.metric-name { color: var(--parlay-ink-2); }
-.metric-val  {
-  font-family: var(--font-mono);
-  font-weight: 700;
-  color: var(--parlay-ink);
+/* Scenario dossier cards */
+.scenario-dossier-grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: var(--space-md);
+  margin-bottom: var(--space-lg);
 }
 
-.metric-val.positive { color: var(--parlay-green); }
-.metric-val.negative { color: var(--parlay-red);   }
-
-.chart-panel {
-  background: var(--parlay-surface);
-  border: 1px solid var(--parlay-border);
-  border-radius: var(--r-panel);
-  padding: var(--sp-6);
-  margin-bottom: var(--sp-4);
+@media (max-width: 860px) {
+  .scenario-dossier-grid { grid-template-columns: repeat(3, 1fr); }
 }
 
-.chart-panel canvas {
-  max-height: 320px;
-}
+.scenario-dossier {
+  background: var(--cream-dark);
+  border: 2px solid rgba(44,24,16,0.4);
+  border-radius: 4px;
+  padding: var(--space-md);
+  cursor: pointer;
+  position: relative;
+  transition: all var(--transition);
+  color: var(--ink);
 
-.training-log {
-  background: var(--parlay-surface-2);
-  border: 1px solid var(--parlay-border);
-  border-radius: var(--r-panel);
-  padding: var(--sp-4);
-  font-family: var(--font-mono);
-  font-size: 0.75rem;
-  color: var(--parlay-ink-2);
-  min-height: 160px;
-  max-height: 320px;
-  overflow-y: auto;
-  white-space: pre-wrap;
-  line-height: 1.6;
+  /* Manila envelope fold at top */
+  border-top: none;
 }
 
-.log-line { display: block; }
-.log-line.info   { color: var(--parlay-blue);  }
-.log-line.warn   { color: var(--parlay-amber); }
-.log-line.error  { color: var(--parlay-red);   }
-.log-line.success{ color: var(--parlay-green); }
-
-.config-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: var(--sp-3);
+.scenario-dossier::before {
+  content: "";
+  position: absolute;
+  top: -8px; left: 0; right: 0;
+  height: 8px;
+  background: var(--cream);
+  border: 2px solid rgba(44,24,16,0.3);
+  border-bottom: none;
+  border-radius: 3px 3px 0 0;
 }
 
-.config-item {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sp-1);
+.scenario-dossier:hover { border-color: var(--gold); transform: translateY(-2px); }
+.scenario-dossier.selected {
+  border-color: var(--gold);
+  box-shadow: 0 0 0 2px var(--gold), 0 4px 12px var(--shadow);
 }
 
-.config-key {
-  font-size: 0.6875rem;
-  font-weight: 600;
-  letter-spacing: 0.05em;
+.dossier-case {
+  font-family: var(--font-mono);
+  font-size: 0.55rem;
+  color: var(--smoke);
   text-transform: uppercase;
-  color: var(--parlay-ink-3);
+  letter-spacing: 0.08em;
+  margin-bottom: var(--space-xs);
 }
 
-.config-val {
-  font-family: var(--font-mono);
-  font-size: 0.875rem;
+.dossier-title {
+  font-family: var(--font-display);
+  font-size: 0.85rem;
   font-weight: 600;
-  color: var(--parlay-ink);
+  color: var(--ink);
+  margin-bottom: var(--space-xs);
+  line-height: 1.2;
 }
 
-.steps-list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sp-3);
-  counter-reset: step-counter;
+.dossier-desc {
+  font-size: 0.7rem;
+  color: var(--smoke);
+  line-height: 1.3;
+  margin-bottom: var(--space-sm);
 }
 
-.step-item {
-  display: flex;
-  gap: var(--sp-3);
-  align-items: flex-start;
-  counter-increment: step-counter;
+.dossier-zopa {
+  font-family: var(--font-mono);
+  font-size: 0.6rem;
+  color: var(--emerald);
+  background: rgba(26,92,42,0.1);
+  border-radius: 3px;
+  padding: 2px 5px;
+  border: 1px solid rgba(26,92,42,0.3);
 }
 
-.step-num {
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  background: var(--parlay-blue-bg);
-  border: 1px solid var(--parlay-blue);
-  color: var(--parlay-blue);
-  font-size: 0.75rem;
-  font-weight: 700;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
+.dossier-difficulty {
+  position: absolute;
+  top: var(--space-sm);
+  right: var(--space-sm);
   font-family: var(--font-mono);
+  font-size: 0.55rem;
+  color: var(--smoke);
 }
 
-.step-text {
-  font-size: 0.875rem;
-  color: var(--parlay-ink-2);
-  line-height: 1.5;
-  padding-top: 2px;
+/* Persona cards (step 3) */
+.persona-cards-grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: var(--space-md);
+  margin-bottom: var(--space-lg);
 }
 
-.step-code {
-  display: inline-block;
-  font-family: var(--font-mono);
-  font-size: 0.75rem;
-  background: var(--parlay-surface-3);
-  border: 1px solid var(--parlay-border);
-  border-radius: var(--r-chip);
-  padding: 1px var(--sp-2);
-  color: var(--parlay-ink);
+@media (max-width: 860px) {
+  .persona-cards-grid { grid-template-columns: repeat(3, 1fr); }
 }
 
-/* Progress bar for training */
-.training-progress-wrap {
-  background: var(--parlay-surface-2);
-  border: 1px solid var(--parlay-border);
-  border-radius: var(--r-panel);
-  padding: var(--sp-4);
+.persona-card-option {
+  background: var(--felt-light);
+  border: 2px solid rgba(201,168,76,0.2);
+  border-radius: 6px;
+  padding: var(--space-sm);
+  cursor: pointer;
+  transition: all var(--transition);
+  text-align: center;
+}
+.persona-card-option:hover { border-color: var(--gold); transform: translateY(-2px); }
+.persona-card-option.selected {
+  border-color: var(--gold);
+  box-shadow: 0 0 0 2px var(--gold), 0 4px 12px var(--shadow);
 }
 
-.training-progress-bar-track {
-  height: 8px;
-  background: var(--parlay-surface-3);
+.persona-card-canvas-wrap {
+  width: 100%;
+  aspect-ratio: 280/200;
+  margin-bottom: var(--space-sm);
   border-radius: 4px;
   overflow: hidden;
-  margin: var(--sp-2) 0;
+  background: var(--felt);
+  border: 1px solid rgba(201,168,76,0.15);
 }
 
-.training-progress-bar-fill {
+.persona-card-canvas-wrap canvas {
+  width: 100%;
   height: 100%;
-  background: linear-gradient(90deg, var(--parlay-blue), var(--parlay-purple));
-  border-radius: 4px;
-  transition: width 300ms ease;
-  width: 0%;
+  display: block;
 }
 
-/* ── Stat Chips / Inline ──────────────────────────────────── */
-.stat-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--sp-1);
-  padding: 2px var(--sp-2);
-  border-radius: var(--r-chip);
-  font-size: 0.75rem;
+.persona-card-name {
+  font-family: var(--font-display);
+  font-size: 0.8rem;
   font-weight: 600;
-  font-family: var(--font-mono);
+  color: var(--cream);
+  margin-bottom: 4px;
 }
 
-.stat-chip.green  { background: var(--parlay-green-bg);  color: var(--parlay-green);  }
-.stat-chip.red    { background: var(--parlay-red-bg);    color: var(--parlay-red);    }
-.stat-chip.amber  { background: var(--parlay-amber-bg);  color: var(--parlay-amber);  }
-.stat-chip.blue   { background: var(--parlay-blue-bg);   color: var(--parlay-blue);   }
-.stat-chip.purple { background: var(--parlay-purple-bg); color: var(--parlay-purple); }
-
-/* Divider */
-.divider {
-  height: 1px;
-  background: var(--parlay-border);
-  margin: var(--sp-4) 0;
-}
-
-/* Empty state */
-.empty-state {
-  text-align: center;
-  padding: var(--sp-8) var(--sp-4);
-  color: var(--parlay-ink-3);
-  font-size: 0.875rem;
+.persona-card-symbol {
+  font-family: var(--font-mono);
+  font-size: 0.65rem;
+  color: var(--gold);
+  margin-bottom: var(--space-xs);
 }
 
-.empty-state-icon {
-  font-size: 2rem;
-  margin-bottom: var(--sp-3);
-  opacity: 0.5;
+.persona-trait-bars {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  margin-top: var(--space-xs);
 }
 
-/* ── Game Over / Result ───────────────────────────────────── */
-.result-banner {
-  border-radius: var(--r-panel);
-  padding: var(--sp-6);
-  text-align: center;
+.persona-trait-row {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  gap: var(--sp-3);
+  gap: 4px;
 }
 
-.result-banner.deal { background: var(--parlay-green-bg); border: 1px solid var(--parlay-green); }
-.result-banner.walk { background: var(--parlay-red-bg);   border: 1px solid var(--parlay-red);   }
-
-.result-title {
-  font-size: 1.375rem;
-  font-weight: 800;
-  letter-spacing: -0.02em;
+.persona-trait-label {
+  font-family: var(--font-mono);
+  font-size: 0.5rem;
+  color: var(--smoke);
+  width: 32px;
+  flex-shrink: 0;
+  text-align: right;
 }
 
-.result-banner.deal .result-title { color: var(--parlay-green); }
-.result-banner.walk .result-title { color: var(--parlay-red);   }
-
-.result-amount {
-  font-size: 2rem;
-  font-family: var(--font-mono);
-  font-weight: 700;
+.persona-trait-bar {
+  flex: 1;
+  height: 3px;
+  background: var(--felt);
+  border-radius: 2px;
+  overflow: hidden;
 }
 
-.result-score {
-  font-size: 0.875rem;
-  color: var(--parlay-ink-2);
+.persona-trait-fill {
+  height: 100%;
+  background: var(--gold);
+  border-radius: 2px;
+  transition: width 600ms ease;
 }
 
-/* ── Utility ──────────────────────────────────────────────── */
-.hidden { display: none !important; }
-.sr-only {
-  position: absolute;
-  width: 1px; height: 1px;
-  padding: 0; margin: -1px;
-  overflow: hidden;
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border: 0;
-}
-
-.text-center { text-align: center; }
-.text-right  { text-align: right;  }
-.text-mono   { font-family: var(--font-mono); }
-.text-muted  { color: var(--parlay-ink-3); }
-.text-sm     { font-size: 0.8125rem; }
-.text-xs     { font-size: 0.75rem; }
-.text-green  { color: var(--parlay-green); }
-.text-red    { color: var(--parlay-red);   }
-.text-amber  { color: var(--parlay-amber); }
-.text-blue   { color: var(--parlay-blue);  }
-
-.fw-600 { font-weight: 600; }
-.fw-700 { font-weight: 700; }
-
-.flex      { display: flex; }
-.flex-col  { flex-direction: column; }
-.items-center { align-items: center; }
-.gap-2  { gap: var(--sp-2); }
-.gap-3  { gap: var(--sp-3); }
-.gap-4  { gap: var(--sp-4); }
-
-.mt-2  { margin-top: var(--sp-2); }
-.mt-3  { margin-top: var(--sp-3); }
-.mt-4  { margin-top: var(--sp-4); }
-.mb-2  { margin-bottom: var(--sp-2); }
-.mb-3  { margin-bottom: var(--sp-3); }
-.mb-4  { margin-bottom: var(--sp-4); }
-
-/* ── Mobile Breakpoints ───────────────────────────────────── */
-@media (max-width: 1100px) {
-  :root {
-    --col-left: 220px;
-    --col-right: 260px;
-  }
-}
-
-@media (max-width: 900px) {
-  .app-body {
-    grid-template-columns: 1fr var(--col-right);
-  }
-
-  .col-left {
-    display: none;
-  }
-}
-
-@media (max-width: 768px) {
-  .app-body {
-    grid-template-columns: 1fr;
-    padding: var(--sp-2);
-    gap: var(--sp-2);
-  }
-
-  .col-left, .col-right {
-    display: flex;
-  }
-
-  .train-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .persona-grid {
-    grid-template-columns: repeat(3, 1fr);
-  }
-
-  .selector-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .config-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .app-header {
-    padding: 0 var(--sp-4);
-  }
-
-  .header-nav { display: none; }
-
-  .chat-thread {
-    max-height: 360px;
-  }
-
-  .character-canvas-wrap {
-    width: 240px;
-    height: 320px;
-  }
-
-  #character-canvas {
-    width: 240px !important;
-    height: 320px !important;
-  }
-}
-
-@media (max-width: 480px) {
-  html { font-size: 13px; }
-
-  .modal {
-    border-radius: var(--r-card);
-  }
-
-  .persona-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  .action-buttons {
-    flex-wrap: wrap;
-  }
+/* ── Animations ────────────────────────────────────────────────────────────── */
+@keyframes spin       { to { transform: rotate(360deg); } }
+@keyframes slide-down { from { transform: translateY(-8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
+@keyframes slide-up   { from { transform: translateY(6px); opacity: 0; }  to { transform: translateY(0); opacity: 1; } }
+@keyframes dot-bounce {
+  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
+  40%           { transform: scale(1.0); opacity: 1.0; }
 }
+
+/* ── Global Error ──────────────────────────────────────────────────────────── */
+#global-error { font-family: var(--font-mono); font-size: 0.75rem; }

docker-compose.yml

@@ -1,41 +1,46 @@
 version: "3.9"
 
 services:
-  game:
+  # Combined game + OpenEnv server (matches the single HF Spaces Dockerfile)
+  parlay:
     build:
       context: .
-      dockerfile: Dockerfile.game
+      dockerfile: Dockerfile
     ports:
-      - "8000:8000"
+      - "7860:7860"
     environment:
-      - GOOGLE_API_KEY=${GOOGLE_API_KEY}
+      - GOOGLE_API_KEY=${GOOGLE_API_KEY:-}
       - MAX_TURNS_PER_EPISODE=20
       - TOP_PLAYER_THRESHOLD=0.60
     volumes:
       - ./parlay.db:/app/parlay.db
     restart: unless-stopped
 
-  env:
+  # MCP server — shares the same image but runs the MCP entry-point
+  mcp:
     build:
       context: .
-      dockerfile: Dockerfile.env
+      dockerfile: Dockerfile
+    command: python -m mcp_server.server sse
     ports:
-      - "8001:8001"
+      - "8002:8002"
     environment:
-      - GOOGLE_API_KEY=${GOOGLE_API_KEY}
+      - GOOGLE_API_KEY=${GOOGLE_API_KEY:-}
     depends_on:
-      - game
+      - parlay
     restart: unless-stopped
 
-  mcp:
+  # Training is intentionally separate and never deployed to HF Spaces
+  train:
     build:
       context: .
-      dockerfile: Dockerfile.game
-    command: python -m mcp_server.server sse
-    ports:
-      - "8002:8002"
+      dockerfile: Dockerfile.train
+    profiles:
+      - training
     environment:
-      - GOOGLE_API_KEY=${GOOGLE_API_KEY}
-    depends_on:
-      - game
-    restart: unless-stopped
+      - GOOGLE_API_KEY=${GOOGLE_API_KEY:-}
+      - HF_TOKEN=${HF_TOKEN:-}
+      - HF_REPO_ID=${HF_REPO_ID:-}
+    volumes:
+      - ./data:/app/data
+      - ./models:/app/models

main.py

@@ -13,7 +13,7 @@ from pathlib import Path
 from fastapi import FastAPI
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.staticfiles import StaticFiles
-from fastapi.responses import FileResponse
+from fastapi.responses import FileResponse, Response
 
 from parlay_env.server import router as env_router
 from dashboard.api import router as dashboard_router
@@ -68,16 +68,54 @@ if static_dir.exists():
 @app.get("/", include_in_schema=False)
 async def serve_index() -> FileResponse:
     """Serve the main game dashboard."""
-    return FileResponse("dashboard/index.html")
+    return FileResponse(
+        "dashboard/index.html",
+        headers={"Cache-Control": "no-cache, must-revalidate"},
+    )
 
 
 @app.get("/train", include_in_schema=False)
 async def serve_train() -> FileResponse:
     """Serve the training dashboard."""
-    return FileResponse("dashboard/train.html")
+    return FileResponse(
+        "dashboard/train.html",
+        headers={"Cache-Control": "no-cache, must-revalidate"},
+    )
+
+
+@app.get("/favicon.ico", include_in_schema=False)
+async def favicon() -> Response:
+    """Browsers request this by default; avoid noisy 404s in logs."""
+    return Response(status_code=204)
 
 
 @app.get("/health")
 async def health() -> dict:
-    """Global health check."""
-    return {"status": "ok", "service": "parlay", "version": "1.0.0"}
+    """
+    Global health check.
+
+    Returns:
+        status:  "ok" when server is running.
+        db:      "ok" if parlay.db is reachable, "error" otherwise.
+        gemini:  "configured" when GOOGLE_API_KEY is set, "mock" otherwise.
+        version: Application version string.
+    """
+    import os
+    import aiosqlite
+
+    db_status = "error"
+    try:
+        async with aiosqlite.connect("parlay.db") as db:
+            await db.execute("SELECT 1")
+        db_status = "ok"
+    except Exception as exc:
+        logger.warning(f"Health check DB probe failed: {exc}")
+
+    gemini_status = "configured" if os.environ.get("GOOGLE_API_KEY", "").strip() else "mock"
+
+    return {
+        "status": "ok",
+        "db": db_status,
+        "gemini": gemini_status,
+        "version": "1.0.0",
+    }

parlay_env/server.py

@@ -33,6 +33,34 @@ from .models import (
 logger = logging.getLogger(__name__)
 router = APIRouter(prefix="/env", tags=["OpenEnv"])
 
+# Fallback observation returned when any server-side error occurs so the
+# WebSocket never crashes on an LLM or state-machine failure.
+_FALLBACK_BELIEF = BeliefState(
+    est_budget=0.0,
+    est_walk_away=0.0,
+    est_urgency=0.5,
+    est_has_alternative=False,
+    confidence=0.1,
+)
+FALLBACK_OBSERVATION = ParlayObservation(
+    step_count=0,
+    episode_done=False,
+    current_offer=0.0,
+    opponent_offer=0.0,
+    zopa_lower=0.0,
+    zopa_upper=0.0,
+    nash_point=0.0,
+    tension_score=0.0,
+    belief_state=_FALLBACK_BELIEF,
+    last_utterance="[Connection issue — AI is thinking]",
+    available_moves=list(TacticalMove),
+    credibility_points=100,
+    reward=0.0,
+    cumulative_reward=0.0,
+    drift_event=None,
+    act=1,
+)
+
 # In-memory session store (replaced by Redis in prod)
 _sessions: dict[str, ParlayState] = {}
 
@@ -171,8 +199,12 @@ async def env_websocket(websocket: WebSocket) -> None:
             ) as exc:
                 result = {"error": str(exc)}
             except Exception:
-                logger.exception("Unhandled error in env WebSocket")
-                result = {"error": "Internal server error"}
+                logger.exception("Unhandled error in env WebSocket — returning fallback observation")
+                result = {
+                    "observation": FALLBACK_OBSERVATION.model_dump(),
+                    "done": False,
+                    "_fallback": True,
+                }
 
             await websocket.send_json(result)
     except WebSocketDisconnect:

scripts/Find-Python311.ps1

@@ -0,0 +1,64 @@
+# Find-Python311.ps1 — dot-source from setup scripts
+# Returns $null or a hashtable: Exe, PreArgs, Ver, Name
+
+function Get-Python311 {
+    $candidateDefs = [System.Collections.Generic.List[object]]::new()
+    $null = $candidateDefs.Add(@{ Name = "py -3.11 (Windows launcher)"; Exe = "py"; PreArgs = @("-3.11") })
+    $null = $candidateDefs.Add(@{ Name = "py -3.11-64 (launcher tag)"; Exe = "py"; PreArgs = @("-3.11-64") })
+    $null = $candidateDefs.Add(@{ Name = "python3.11"; Exe = "python3.11"; PreArgs = @() })
+    $null = $candidateDefs.Add(@{ Name = "python3"; Exe = "python3"; PreArgs = @() })
+    $null = $candidateDefs.Add(@{ Name = "python"; Exe = "python"; PreArgs = @() })
+    $local311 = Join-Path $env:LOCALAPPDATA "Programs\Python\Python311\python.exe"
+    $null = $candidateDefs.Add(@{ Name = "per-user: $local311"; Exe = $local311; PreArgs = @() })
+    $allUsers = "${env:ProgramFiles}\Python311\python.exe"
+    $null = $candidateDefs.Add(@{ Name = "all-users: $allUsers"; Exe = $allUsers; PreArgs = @() })
+
+    function Test-One {
+        param([string] $Exe, [string[]] $PreArgs)
+        if ($Exe -match '^(?:[A-Za-z]:|\\\\)') {
+            if (-not (Test-Path -LiteralPath $Exe)) { return $null }
+        } else {
+            if (-not (Get-Command $Exe -ErrorAction SilentlyContinue)) { return $null }
+        }
+        try {
+            $verOut = & $Exe @($PreArgs + @("--version")) 2>&1 | Out-String
+        } catch {
+            return $null
+        }
+        if ($verOut -match "3\.11\.\d+") {
+            return @{ Exe = $Exe; PreArgs = $PreArgs; Ver = $verOut.Trim() }
+        }
+        return $null
+    }
+
+    foreach ($c in $candidateDefs) {
+        $r = Test-One -Exe $c.Exe -PreArgs $c.PreArgs
+        if ($r) {
+            $r["Name"] = $c.Name
+            return $r
+        }
+    }
+    return $null
+}
+
+function Get-Python311Diagnostics {
+    $lines = [System.Collections.Generic.List[string]]::new()
+    $candidateDefs = @(
+        @{ Name = "py -3.11"; Exe = "py"; PreArgs = @("-3.11") }
+        @{ Name = "python"; Exe = "python"; PreArgs = @() }
+        @{ Name = "python3"; Exe = "python3"; PreArgs = @() }
+    )
+    $local311 = Join-Path $env:LOCALAPPDATA "Programs\Python\Python311\python.exe"
+    $candidateDefs += @{ Name = "per-user"; Exe = $local311; PreArgs = @() }
+
+    foreach ($c in $candidateDefs) {
+        if ($c.Exe -match '^(?:[A-Za-z]:|\\\\)') {
+            if (-not (Test-Path -LiteralPath $c.Exe)) { continue }
+        } elseif (-not (Get-Command $c.Exe -ErrorAction SilentlyContinue)) { continue }
+        try {
+            $v = & $c.Exe @($c.PreArgs + @("--version")) 2>&1 | Out-String
+            $null = $lines.Add("$($c.Name) => $($v.Trim())")
+        } catch { }
+    }
+    return $lines
+}

scripts/init_db.py

@@ -17,6 +17,20 @@ logger = logging.getLogger(__name__)
 DB_PATH = "parlay.db"
 
 SCHEMA = """
+CREATE TABLE IF NOT EXISTS sessions (
+    id            INTEGER PRIMARY KEY AUTOINCREMENT,
+    session_id    TEXT    NOT NULL UNIQUE,
+    player_name   TEXT    NOT NULL,
+    scenario_id   TEXT    NOT NULL,
+    persona       TEXT    NOT NULL,
+    started_at    DATETIME DEFAULT CURRENT_TIMESTAMP,
+    completed_at  DATETIME,
+    status        TEXT    DEFAULT 'active'
+);
+
+CREATE INDEX IF NOT EXISTS idx_sessions_session_id
+    ON sessions(session_id);
+
 CREATE TABLE IF NOT EXISTS leaderboard (
     id            INTEGER PRIMARY KEY AUTOINCREMENT,
     player_name   TEXT    NOT NULL,

scripts/setup.ps1

@@ -1,40 +1,62 @@
 # scripts/setup.ps1
 # Run from project root: .\scripts\setup.ps1
-# Requires Python 3.11 on PATH and PowerShell 5+
+# Robust Python 3.11 detection — see Find-Python311.ps1
 
 $ErrorActionPreference = "Stop"
 
+$scriptDir = Split-Path -Parent $MyInvocation.MyCommand.Path
+. (Join-Path $scriptDir "Find-Python311.ps1")
+
 Write-Host "Setting up Parlay..." -ForegroundColor Cyan
 
-# Check Python 3.11
-try {
-    $pyver = & python --version 2>&1
-    if ($pyver -notmatch "3\.11") {
-        Write-Host "Python 3.11 required. Found: $pyver" -ForegroundColor Red
-        Write-Host "Download from https://www.python.org/downloads/release/python-3110/"
-        exit 1
+$chosen = Get-Python311
+
+if (-not $chosen) {
+    Write-Host ""
+    Write-Host "Python 3.11 not found. Parlay needs 3.11 (see .cursorrules)." -ForegroundColor Red
+    $diag = Get-Python311Diagnostics
+    if ($diag.Count -gt 0) {
+        Write-Host "These interpreters were found but are not 3.11:" -ForegroundColor Yellow
+        foreach ($line in $diag) { Write-Host "  - $line" -ForegroundColor Gray }
+    } else {
+        Write-Host "No Python was found in PATH. Add Python to PATH or install 3.11." -ForegroundColor Yellow
     }
-} catch {
-    Write-Host "Python not found on PATH." -ForegroundColor Red
+    Write-Host "Install 3.11, then re-run this script:" -ForegroundColor Yellow
+    Write-Host "  winget install Python.Python.3.11" -ForegroundColor Cyan
     exit 1
 }
 
-# Game venv
+Write-Host "  Found Python 3.11: $($chosen.Name)" -ForegroundColor Green
+Write-Host "  Version line: $($chosen.Ver)" -ForegroundColor Gray
+Write-Host "Using: $($chosen.Exe) $($chosen.PreArgs -join ' ')" -ForegroundColor Cyan
+
 Write-Host "Creating game venv..." -ForegroundColor Yellow
-python -m venv venv
+& $chosen.Exe @($chosen.PreArgs + @("-m", "venv", "venv"))
+if (-not (Test-Path ".\venv\Scripts\python.exe")) { throw "venv was not created (python -m venv failed)" }
+
 .\venv\Scripts\pip install --upgrade pip --quiet
 .\venv\Scripts\pip install -r requirements.txt --quiet
 
-# .env
 if (-not (Test-Path ".env")) {
     Copy-Item ".env.example" ".env"
     Write-Host "Created .env from .env.example" -ForegroundColor Green
 }
 
-# DB init
 .\venv\Scripts\python scripts\init_db.py
 
+Write-Host "Verifying installed packages..." -ForegroundColor Yellow
+try {
+    $checkCmd = "import fastapi, uvicorn, pydantic, aiosqlite; from google import genai; import fastmcp; print('All game deps OK')"
+    & .\venv\Scripts\python -c $checkCmd
+    Write-Host "  All game deps OK" -ForegroundColor Green
+} catch {
+    Write-Host "  Dependency check failed - re-installing:" -ForegroundColor Red
+    Write-Host "  .\venv\Scripts\pip install -r requirements.txt --force-reinstall" -ForegroundColor Yellow
+    .\venv\Scripts\pip install -r requirements.txt --force-reinstall --quiet
+}
+
 Write-Host ""
 Write-Host "Game venv ready." -ForegroundColor Green
-Write-Host "To start the server: .\scripts\run.ps1"
-Write-Host "For training stack: .\scripts\setup_train.ps1"
+Write-Host "Run the server:         .\scripts\run.ps1"
+Write-Host "Run without an API key: make run  (mock mode enabled automatically)"
+Write-Host "Training stack:         .\scripts\setup_train.ps1"

scripts/setup_train.ps1

@@ -1,7 +1,43 @@
+# scripts/setup_train.ps1
+# Run from project root: .\scripts\setup_train.ps1
+# Installs the training stack (~3 GB: PyTorch + HF TRL).
+
 $ErrorActionPreference = "Stop"
+
+$scriptDir = Split-Path -Parent $MyInvocation.MyCommand.Path
+. (Join-Path $scriptDir "Find-Python311.ps1")
+
 Write-Host "Setting up training venv (this installs PyTorch ~3GB)..." -ForegroundColor Cyan
-python -m venv venv-train
+
+$chosen = Get-Python311
+
+if (-not $chosen) {
+    Write-Host ""
+    Write-Host "Python 3.11 not found. Parlay needs 3.11." -ForegroundColor Red
+    $diag = Get-Python311Diagnostics
+    if ($diag.Count -gt 0) {
+        Write-Host "These interpreters were found but are not 3.11:" -ForegroundColor Yellow
+        foreach ($line in $diag) { Write-Host "  - $line" -ForegroundColor Gray }
+    } else {
+        Write-Host "No Python was found in PATH." -ForegroundColor Yellow
+    }
+    Write-Host "  winget install Python.Python.3.11" -ForegroundColor Cyan
+    exit 1
+}
+
+Write-Host "  Found Python 3.11: $($chosen.Name)" -ForegroundColor Green
+Write-Host "Using: $($chosen.Exe) $($chosen.PreArgs -join ' ')" -ForegroundColor Cyan
+
+Write-Host "Creating training venv..." -ForegroundColor Yellow
+& $chosen.Exe @($chosen.PreArgs + @("-m", "venv", "venv-train"))
+if (-not (Test-Path ".\venv-train\Scripts\python.exe")) { throw "venv-train was not created" }
+
 .\venv-train\Scripts\pip install --upgrade pip --quiet
 .\venv-train\Scripts\pip install -r requirements.txt --quiet
 .\venv-train\Scripts\pip install -r requirements-train.txt
-Write-Host "Training venv ready. Run: .\scripts\train_data.ps1" -ForegroundColor Green
+
+Write-Host ""
+Write-Host "Training venv ready." -ForegroundColor Green
+Write-Host "Generate data:  .\scripts\train_data.ps1"
+Write-Host "SFT warmup:     .\scripts\train_sft.ps1"
+Write-Host "GRPO training:  .\scripts\train_grpo.ps1"

scripts/start.sh

@@ -0,0 +1,14 @@
+#!/bin/bash
+# Start both the OpenEnv WebSocket server (internal port 8001)
+# and the FastAPI dashboard on port 7860 (what HF Spaces exposes).
+set -e
+
+echo "Starting Parlay OpenEnv server on port 8001..."
+python -m parlay_env.server &
+ENV_PID=$!
+
+echo "Starting Parlay dashboard on port 7860..."
+uvicorn main:app --host 0.0.0.0 --port 7860
+
+# If uvicorn exits, clean up the env process
+kill $ENV_PID 2>/dev/null || true

tests/test_keyless.py

@@ -0,0 +1,291 @@
+"""
+Keyless test suite — runs with zero API keys.
+Tests the full stack in mock mode: game theory, grader, DB, and HTTP endpoints.
+
+Usage:
+    pytest tests/test_keyless.py -v
+    make test-keyless
+"""
+import asyncio
+import os
+import sqlite3
+
+import pytest
+import pytest_asyncio
+from httpx import AsyncClient, ASGITransport
+
+# Ensure mock mode — remove any key that might be set in the environment
+os.environ.pop("GOOGLE_API_KEY", None)
+
+# ── App import after env is sanitised ────────────────────────────────────────
+from main import app
+from parlay_env.game_theory import (
+    compute_zopa,
+    compute_nash_bargaining_solution,
+    compute_shapley_value,
+)
+from parlay_env.grader import compute_step_reward, compute_terminal_reward
+from parlay_env.reward import OMEGA
+from parlay_env.models import (
+    BeliefState, HiddenState, ParlayAction, ParlayState, PersonaType,
+)
+
+
+# ── Fixtures ─────────────────────────────────────────────────────────────────
+
+@pytest.fixture
+def hidden() -> HiddenState:
+    return HiddenState(
+        budget_ceiling=165_000.0,
+        walk_away_price=125_000.0,
+        urgency_score=0.5,
+        has_alternative=False,
+        persona_drifted=False,
+    )
+
+
+@pytest.fixture
+def belief() -> BeliefState:
+    return BeliefState(
+        est_budget=140_000.0,
+        est_walk_away=130_000.0,
+        est_urgency=0.5,
+        est_has_alternative=False,
+        confidence=0.5,
+    )
+
+
+@pytest.fixture
+def parlay_state(hidden, belief) -> ParlayState:
+    return ParlayState(
+        session_id="test-session",
+        scenario_id="saas_enterprise",
+        persona=PersonaType.SHARK,
+        act=1,
+        step_count=0,
+        cumulative_reward=0.0,
+        hidden_state=hidden,
+        belief_history=[belief],
+        offer_history=[],
+        drift_events_fired=0,
+        episode_done=False,
+        credibility_points=100,
+    )
+
+
+@pytest_asyncio.fixture
+async def client():
+    transport = ASGITransport(app=app)
+    async with AsyncClient(transport=transport, base_url="http://test") as ac:
+        yield ac
+
+
+# ── Part 1: HTTP endpoints ────────────────────────────────────────────────────
+
+class TestHealthEndpoint:
+    def test_health_endpoint(self):
+        """GET /health returns 200 with status ok."""
+        async def _run():
+            transport = ASGITransport(app=app)
+            async with AsyncClient(transport=transport, base_url="http://test") as ac:
+                resp = await ac.get("/health")
+            assert resp.status_code == 200, f"Expected 200, got {resp.status_code}"
+            data = resp.json()
+            assert data["status"] == "ok", f"Expected ok, got {data['status']}"
+            assert "db" in data, f"Missing 'db' key: {data}"
+            assert "gemini" in data, f"Missing 'gemini' key: {data}"
+            assert data["gemini"] == "mock", f"Expected mock mode, got {data['gemini']}"
+
+        asyncio.get_event_loop().run_until_complete(_run())
+
+
+class TestListScenarios:
+    def test_list_scenarios(self):
+        """GET /api/scenarios returns exactly 5 scenarios."""
+        async def _run():
+            transport = ASGITransport(app=app)
+            async with AsyncClient(transport=transport, base_url="http://test") as ac:
+                resp = await ac.get("/api/scenarios")
+            assert resp.status_code == 200, f"Expected 200, got {resp.status_code}"
+            data = resp.json()
+            scenarios = data.get("scenarios", [])
+            assert len(scenarios) == 5, f"Expected 5 scenarios, got {len(scenarios)}"
+
+        asyncio.get_event_loop().run_until_complete(_run())
+
+
+class TestListPersonas:
+    def test_list_personas(self):
+        """GET /api/personas returns exactly 5 personas."""
+        async def _run():
+            transport = ASGITransport(app=app)
+            async with AsyncClient(transport=transport, base_url="http://test") as ac:
+                resp = await ac.get("/api/personas")
+            assert resp.status_code == 200, f"Expected 200, got {resp.status_code}"
+            data = resp.json()
+            personas = data.get("personas", [])
+            assert len(personas) == 5, f"Expected 5 personas, got {len(personas)}"
+
+        asyncio.get_event_loop().run_until_complete(_run())
+
+
+# ── Part 2: Game theory ───────────────────────────────────────────────────────
+
+class TestGameTheory:
+    def test_game_theory_zopa(self):
+        """compute_zopa(165000, 125000) == (125000, 165000)."""
+        result = compute_zopa(165_000.0, 125_000.0)
+        expected = (125_000.0, 165_000.0)
+        assert result == expected, f"Expected {expected}, got {result}"
+
+    def test_zopa_none_when_inverted(self):
+        """No ZOPA when seller BATNA exceeds buyer BATNA."""
+        result = compute_zopa(100_000.0, 150_000.0)
+        assert result is None, f"Expected None (no ZOPA), got {result}"
+
+    def test_nash(self):
+        """compute_nash_bargaining_solution(165000, 125000) == 145000.0."""
+        result = compute_nash_bargaining_solution(165_000.0, 125_000.0)
+        expected = 145_000.0
+        assert result == expected, f"Expected {expected}, got {result}"
+
+    def test_shapley(self):
+        """compute_shapley_value works for a 2-player coalition."""
+        coalition_values = {
+            frozenset(): 0.0,
+            frozenset(["A"]): 40.0,
+            frozenset(["B"]): 30.0,
+            frozenset(["A", "B"]): 100.0,
+        }
+        shapley = compute_shapley_value(coalition_values)
+        assert "A" in shapley and "B" in shapley, f"Missing players: {shapley}"
+        total = shapley["A"] + shapley["B"]
+        assert abs(total - 100.0) < 1e-6, f"Shapley values should sum to grand coalition value: {total}"
+
+
+# ── Part 3: Grader ────────────────────────────────────────────────────────────
+
+class TestGrader:
+    def test_grader_normal(self, parlay_state):
+        """compute_step_reward with valid state returns float in expected range."""
+        action = ParlayAction(utterance="I propose 145000.", offer_amount=145_000.0)
+        next_state = ParlayState(
+            **{**parlay_state.model_dump(), "step_count": 1, "offer_history": [145_000.0]}
+        )
+        result = compute_step_reward(parlay_state, action, next_state)
+        assert isinstance(result, float), f"Expected float, got {type(result)}"
+        assert -500.0 <= result <= 500.0, f"Expected reward in range [-500, 500], got {result}"
+
+    def test_grader_capitulation(self, parlay_state):
+        """Deal below BATNA (125000) returns -OMEGA terminal reward."""
+        result = compute_terminal_reward(parlay_state, final_price=100_000.0, t_close=10)
+        assert result == -OMEGA, f"Expected -{OMEGA}, got {result}"
+
+
+# ── Part 4: Database ──────────────────────────────────────────────────────────
+
+class TestDbInit:
+    def test_db_init(self):
+        """parlay.db has sessions, episodes, and leaderboard tables."""
+        # Run init to ensure tables exist
+        async def _run():
+            from scripts.init_db import init_db
+            await init_db()
+
+        asyncio.get_event_loop().run_until_complete(_run())
+
+        conn = sqlite3.connect("parlay.db")
+        cursor = conn.execute(
+            "SELECT name FROM sqlite_master WHERE type='table'"
+        )
+        tables = {row[0] for row in cursor.fetchall()}
+        conn.close()
+
+        required = {"sessions", "episodes", "leaderboard"}
+        missing = required - tables
+        assert not missing, f"Missing tables: {missing}. Found: {tables}"
+
+    def test_leaderboard_insert(self):
+        """POST a score via the accept endpoint, GET leaderboard returns it."""
+        async def _run():
+            transport = ASGITransport(app=app)
+            async with AsyncClient(transport=transport, base_url="http://test") as ac:
+                # Start a session
+                start_resp = await ac.post(
+                    "/api/game/start",
+                    json={"scenario_id": "saas_enterprise", "persona": "shark", "player_name": "TestPlayer"},
+                )
+                assert start_resp.status_code == 200, f"Start failed: {start_resp.text}"
+                session_id = start_resp.json()["session_id"]
+
+                # Make one move
+                move_resp = await ac.post(
+                    "/api/game/move",
+                    json={"session_id": session_id, "amount": 145_000.0, "message": "Test offer"},
+                )
+                assert move_resp.status_code == 200, f"Move failed: {move_resp.text}"
+
+                # Accept
+                accept_resp = await ac.post(
+                    "/api/game/accept",
+                    json={"session_id": session_id},
+                )
+                assert accept_resp.status_code == 200, f"Accept failed: {accept_resp.text}"
+
+                # Check leaderboard
+                lb_resp = await ac.get("/api/leaderboard?limit=5")
+                assert lb_resp.status_code == 200, f"Leaderboard failed: {lb_resp.text}"
+                entries = lb_resp.json().get("entries", [])
+                names = [e.get("player_name") for e in entries]
+                assert "TestPlayer" in names, f"TestPlayer not in leaderboard: {names}"
+
+        asyncio.get_event_loop().run_until_complete(_run())
+
+
+# ── Part 5: Session API (mock mode) ────────────────────���─────────────────────
+
+class TestMockSession:
+    def test_mock_session(self):
+        """POST /api/session/start without API key returns valid session_id."""
+        async def _run():
+            transport = ASGITransport(app=app)
+            async with AsyncClient(transport=transport, base_url="http://test") as ac:
+                resp = await ac.post(
+                    "/api/session/start",
+                    json={"scenario_id": "saas_enterprise", "persona": "shark", "player_name": "MockPlayer"},
+                )
+            assert resp.status_code == 200, f"Expected 200, got {resp.status_code}: {resp.text}"
+            data = resp.json()
+            assert "session_id" in data, f"Missing session_id: {data}"
+            assert len(data["session_id"]) == 36, f"session_id looks wrong: {data['session_id']}"
+
+        asyncio.get_event_loop().run_until_complete(_run())
+
+    def test_mock_step(self):
+        """POST /api/session/{id}/step with mock mode returns valid observation."""
+        async def _run():
+            transport = ASGITransport(app=app)
+            async with AsyncClient(transport=transport, base_url="http://test") as ac:
+                # Start session
+                start = await ac.post(
+                    "/api/session/start",
+                    json={"scenario_id": "saas_enterprise", "persona": "diplomat", "player_name": "MockPlayer"},
+                )
+                assert start.status_code == 200, f"Start failed: {start.text}"
+                session_id = start.json()["session_id"]
+
+                # Step
+                step = await ac.post(
+                    f"/api/session/{session_id}/step",
+                    json={"amount": 140_000.0, "message": "Test proposal"},
+                )
+            assert step.status_code == 200, f"Step failed: {step.status_code}: {step.text}"
+            data = step.json()
+            assert "observation" in data, f"Missing observation: {data}"
+            assert "opponent" in data, f"Missing opponent response: {data}"
+            obs = data["observation"]
+            assert "tension_score" in obs, f"Missing tension_score in obs: {obs}"
+            opponent = data["opponent"]
+            assert "utterance" in opponent, f"Missing utterance in opponent: {opponent}"
+
+        asyncio.get_event_loop().run_until_complete(_run())

training/notebooks/parlay_training.ipynb

@@ -1,25 +1,8 @@
 {
- "nbformat": 4,
- "nbformat_minor": 5,
- "metadata": {
-  "kernelspec": {
-   "display_name": "Python 3",
-   "language": "python",
-   "name": "python3"
-  },
-  "language_info": {
-   "name": "python",
-   "version": "3.11.0"
-  },
-  "colab": {
-   "provenance": [],
-   "gpuType": "T4"
-  },
-  "accelerator": "GPU"
- },
  "cells": [
   {
    "cell_type": "markdown",
+   "id": "cell-markdown-intro",
    "metadata": {},
    "source": [
     "# Parlay — Training Notebook\n",
@@ -33,12 +16,12 @@
     "This produces the reward curve shown to hackathon judges.\n",
     "\n",
     "**Runtime:** ~2.5hr on T4 for 100 episodes + 100 GRPO steps. Full 500-step run: ~8hr on A100."
-   ],
-   "id": "cell-markdown-intro"
+   ]
   },
   {
    "cell_type": "code",
    "execution_count": null,
+   "id": "cell-install",
    "metadata": {},
    "outputs": [],
    "source": [
@@ -47,12 +30,12 @@
     "!pip install -q trl peft transformers accelerate bitsandbytes datasets huggingface-hub\n",
     "!pip install -q matplotlib\n",
     "print('✓ All dependencies installed')"
-   ],
-   "id": "cell-install"
+   ]
   },
   {
    "cell_type": "code",
    "execution_count": null,
+   "id": "cell-secrets",
    "metadata": {},
    "outputs": [],
    "source": [
@@ -70,12 +53,12 @@
     "assert os.environ.get('GOOGLE_API_KEY'), 'GOOGLE_API_KEY not set in Colab Secrets!'\n",
     "print('✓ API keys loaded')\n",
     "print(f'  GOOGLE_API_KEY: {os.environ[\"GOOGLE_API_KEY\"][:8]}...')"
-   ],
-   "id": "cell-secrets"
+   ]
   },
   {
    "cell_type": "code",
    "execution_count": null,
+   "id": "cell-setup",
    "metadata": {},
    "outputs": [],
    "source": [
@@ -99,12 +82,12 @@
     "import sys\n",
     "sys.path.insert(0, os.getcwd())\n",
     "print('✓ sys.path updated')"
-   ],
-   "id": "cell-setup"
+   ]
   },
   {
    "cell_type": "code",
    "execution_count": null,
+   "id": "cell-verify",
    "metadata": {},
    "outputs": [],
    "source": [
@@ -124,12 +107,12 @@
     "nash = compute_nash_bargaining_solution(165_000, 125_000)\n",
     "print(f'\\nSaaS ZOPA: {zopa}')\n",
     "print(f'Nash point: {nash:,.0f}')"
-   ],
-   "id": "cell-verify"
+   ]
   },
   {
    "cell_type": "code",
    "execution_count": null,
+   "id": "cell-db",
    "metadata": {},
    "outputs": [],
    "source": [
@@ -139,12 +122,12 @@
     "\n",
     "await init_db()  # Colab supports top-level await\n",
     "print('✓ Database initialized')"
-   ],
-   "id": "cell-db"
+   ]
   },
   {
    "cell_type": "code",
    "execution_count": null,
+   "id": "cell-generate",
    "metadata": {},
    "outputs": [],
    "source": [
@@ -158,12 +141,12 @@
     "print(result.stdout)\n",
     "if result.returncode != 0:\n",
     "    print('STDERR:', result.stderr)"
-   ],
-   "id": "cell-generate"
+   ]
   },
   {
    "cell_type": "code",
    "execution_count": null,
+   "id": "cell-inspect",
    "metadata": {},
    "outputs": [],
    "source": [
@@ -189,12 +172,12 @@
     "print(Counter(r['split'] for r in records))\n",
     "print('\\nPersona distribution:')\n",
     "print(Counter(r['persona'] for r in records))"
-   ],
-   "id": "cell-inspect"
+   ]
   },
   {
    "cell_type": "code",
    "execution_count": null,
+   "id": "cell-sft",
    "metadata": {},
    "outputs": [],
    "source": [
@@ -210,12 +193,12 @@
     "    --data data/episodes.jsonl \\\n",
     "    --output models/parlay-sft \\\n",
     "    --threshold 0.60"
-   ],
-   "id": "cell-sft"
+   ]
   },
   {
    "cell_type": "code",
    "execution_count": null,
+   "id": "cell-grpo",
    "metadata": {},
    "outputs": [],
    "source": [
@@ -227,12 +210,12 @@
     "    --data data/episodes.jsonl \\\n",
     "    --output models/parlay-grpo \\\n",
     "    --steps 100"
-   ],
-   "id": "cell-grpo"
+   ]
   },
   {
    "cell_type": "code",
    "execution_count": null,
+   "id": "cell-eval",
    "metadata": {},
    "outputs": [],
    "source": [
@@ -261,12 +244,12 @@
     "# Display\n",
     "from IPython.display import Image, display\n",
     "display(Image('results/reward_curve.png'))"
-   ],
-   "id": "cell-eval"
+   ]
   },
   {
    "cell_type": "code",
    "execution_count": null,
+   "id": "cell-summary",
    "metadata": {},
    "outputs": [],
    "source": [
@@ -293,12 +276,12 @@
     "print(f'Base → GRPO reward improvement:     {grpo_r - base_r:+.1f}')\n",
     "print(f'Base → GRPO efficiency improvement: {(grpo_e - base_e)*100:+.1f}%')\n",
     "print('='*60)"
-   ],
-   "id": "cell-summary"
+   ]
   },
   {
    "cell_type": "code",
    "execution_count": null,
+   "id": "cell-push",
    "metadata": {},
    "outputs": [],
    "source": [
@@ -309,22 +292,22 @@
     "!python -m training.push_to_hub \\\n",
     "    --model models/parlay-grpo \\\n",
     "    --repo {HF_REPO}"
-   ],
-   "id": "cell-push"
+   ]
   },
   {
    "cell_type": "code",
    "execution_count": null,
+   "id": "cell-demo",
    "metadata": {},
    "outputs": [],
    "source": [
     "# Cell 13: Quick demo — play one episode from CLI\n",
     "!python -m agent.runner --persona shark --scenario saas_enterprise --steps 10"
-   ],
-   "id": "cell-demo"
+   ]
   },
   {
    "cell_type": "markdown",
+   "id": "cell-nextsteps",
    "metadata": {},
    "source": [
     "## Next Steps\n",
@@ -336,8 +319,25 @@
     "\n",
     "---\n",
     "*Parlay — The arena where AIs learn to close.*"
-   ],
-   "id": "cell-nextsteps"
+   ]
   }
- ]
+ ],
+ "metadata": {
+  "accelerator": "GPU",
+  "colab": {
+   "gpuType": "T4",
+   "provenance": []
+  },
+  "kernelspec": {
+   "display_name": "Python 3",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "name": "python",
+   "version": "3.11.0"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
 }