Initial submission of Analog Town to Build Small Hackathon

.gitattributes

@@ -51,3 +51,6 @@ port_whisper_map.png filter=lfs diff=lfs merge=lfs -text
 rustwood_map.png filter=lfs diff=lfs merge=lfs -text
 static_ambient.wav filter=lfs diff=lfs merge=lfs -text
 town_map.png filter=lfs diff=lfs merge=lfs -text
+lotus_wharf_map.png filter=lfs diff=lfs merge=lfs -text
+tin_lantern_junction_map.png filter=lfs diff=lfs merge=lfs -text
+verdant_spire_map.png filter=lfs diff=lfs merge=lfs -text

SUBMISSION_BLOG.md

@@ -1,42 +1,143 @@
-# 📻 Analog Town: Intercepting Fictional Minds over Shortwave Radio
-### A Whimsical Submission to the Hugging Face Build Small Hackathon (Whimsical Track)
+# Analog Town: A Shortwave Simulator for Fictional Minds
 
-> **Live Space**: [https://huggingface.co/spaces/build-small-hackathon/analog-town](https://huggingface.co/spaces/build-small-hackathon/analog-town)  
+*A submission to the Hugging Face Build Small Hackathon — Whimsical Track*
+
+> **Live Space:** https://huggingface.co/spaces/build-small-hackathon/analog-town
+> **Model:** `Qwen/Qwen2.5-7B-Instruct` (fallback: `Qwen/Qwen2.5-14B-Instruct`)
+> **SDK:** Gradio · CPU-basic · ~16 MB Space
+
+---
+
+## The Pitch in One Paragraph
+
+You drop a single piece of news into a fictional town — *"the old grain silo will be demolished next month"* — and the town reacts. Six residents each have their own values, fears, hopes, and grudges. Instead of chatting with them, you tune an analog radio dial through static and intercept their inner monologues one frequency at a time. That is **Analog Town**: a tabletop-style perspective-rehearsal tool dressed up as a 1970s shortwave receiver.
+
+---
+
+## Why We Built It
+
+Writers, tabletop RPG game masters, classroom debate moderators, and community planners all share the same workflow problem: when something new lands in a fictional community — a factory closing, a sacred grove being bisected, a stranger arriving — they have to **mentally simulate every stakeholder's reaction** to make the story (or the policy roleplay) feel honest.
+
+The usual fallback is to open a chat window and ask a large model to roleplay each character one by one. That works, but it has two failure modes:
+
+1. The model collapses every character into the same voice within a few turns.
+2. You get vivid prose but no **structured signal** about what each character noticed, what they feared, or which value got triggered.
+
+We wanted a tool that pushed in the opposite direction: **small model, structured output, whimsical interface**. A signal node, not a conversation.
+
+---
+
+## The Core Idea: Minds as Typed State Transitions
+
+Under the hood, Analog Town is not roleplay. Each character is a **typed Pydantic state machine**, and the model's only job is to compute one well-defined transition:
+
+```
+(Agent Profile + Previous Agent State + Broadcast Event)
+        → Updated Agent State + Internal Monologue + Likely Actions
+```
+
+Every transition returns a strict JSON object (see `schemas.py`) with fields like:
+
+- `event_summary_from_agent_view` — how *this* character heard it (often a misreading)
+- `activated_memory` — which private history bubbled up
+- `value_conflict` — which core value the event collides with
+- `emotion_delta` — signed changes to trust, anger, fear, hope, curiosity, social_energy
+- `updated_state` — the new emotional state, clamped to [0, 1]
+- `internal_monologue` — 1–3 sentences, in their voice
+- `likely_private_action` / `likely_public_action`
+- `uncertainty` — what the model itself isn't sure about
+- `safety_note` — a fixed disclaimer that this is fictional rehearsal, not prediction
+
+The system prompt is uncompromising: *"Your job is not to produce the most dramatic answer. Your job is to produce a plausible, grounded, internally consistent state transition."* If the JSON comes back malformed, a second pass through a dedicated `REPAIR_PROMPT` rewrites it cleanly.
+
+This is the design lever that lets a **7B model** carry a six-character simulation: we never ask it to generate freely, we ask it to fill a tightly-shaped form.
+
+---
+
+## The Whimsical Layer: A Police Scanner You Can Tune
+
+The interface is the point. Analog Town is built to feel like the inside of a beat-up radio van parked at the edge of a town you don't live in.
+
+**The CRT theme.** A custom Gradio CSS theme (`theme.py`) renders the whole app in amber-and-green phosphor type on pitch-black cards, with scanning-line overlays and glowing horizontal signal-strength bars. IBM Plex Mono for instrument readouts, Crimson Pro for monologues — the typography itself splits "machine talking" from "human talking".
+
+**The dial.** A frequency slider runs from 87.0 to 108.0 FM. Each character lives on a fixed frequency. As you slide closer to a station, the signal-strength bar climbs and the corresponding character's dossier and monologue come into focus.
+
+**The static.** We loop a 15-second analog hiss and low-hum bed (`static_ambient.wav`) underneath everything. A small client-side JavaScript audio manager watches the signal-strength value and **smoothly fades the static out** when you tune into a station and **fades it back in** when you scan between them — all in the browser, no server roundtrip.
+
+**The map.** Six town presets each ship with a custom 2D isometric pixel-art background:
+
+- **Graybridge** — a foggy mill town arguing about a luxury hotel conversion
+- **Neighborhood Council** — a suburban block meeting about a 5G tower
+- **Port Whisper** — a coastal village debating an offshore wind farm
+- **Brimstone Hollow** — a desert outpost rattled by an unexplained sinkhole
+- **Echo Summit** — a polar research station picking up a strange signal
+- **Rustwood** — a rust-belt town whose factory just announced reopening
+
+Characters are placed on the map as circular pixel-art tokens drawn from a small avatar set (`elder_man.png`, `young_woman.png`, `soldier_man.png`, …) chosen to match the persona's age and role. Clicking a token tunes the receiver to that character's frequency, swaps in their dossier, and starts streaming their latest intercepted thought.
+
+---
+
+## A Walkthrough: One Broadcast, Six Reactions
+
+You load **Graybridge** — six residents, one foggy map. You type into the broadcast box:
+
+> *"The old train station will be converted into a luxury hotel."*
+
+You hit **Broadcast**. The simulator iterates through every agent, calls the model once per character with their profile and current emotional state, and parses the structured JSON back into the UI. You hear the static swell as the dial idles at 91.3 MHz.
+
+You scroll the dial up to **98.7 MHz** — *Margaret, the retired stationmaster*. The static fades. Her dossier loads: 67 years old, grew up watching the trains, lost her husband the year the line was shut down. Her monologue scrolls onto the CRT panel:
+
+> *"They're putting a bar where the ticket window used to be. I knew this was coming. I just didn't think they'd bother pretending it was good news."*
+
+`activated_memory`: *the night the last train left in 1998*.
+`value_conflict`: *preservation of working-class history vs. economic survival of the town*.
+`emotion_delta`: `trust: -0.15, anger: +0.20, hope: -0.10`.
+`likely_public_action`: *"Write a letter to the council. Sign it 'M. Halloran, retired.'"*
+
+You scan up to **102.1 MHz** — *Devon, a 24-year-old line cook*. Same broadcast, completely different read:
+
+> *"Wait, like, a real hotel? Could I get a job there? Could I stop driving 40 minutes for a kitchen shift?"*
+
+Same event. Same town. Two minds. The dial keeps going.
 
 ---
 
-## 🎙️ The Concept: A Social Weather Station for Fictional Worlds
+## Built Small, On Purpose
+
+Analog Town was engineered against the **Build Small Hackathon** constraints from the first commit:
+
+1. **Models under 32B.** We use `Qwen/Qwen2.5-7B-Instruct` as the primary inference target through the Hugging Face Inference Client, with `Qwen/Qwen2.5-14B-Instruct` as an automatic fallback if rate limits hit. Both are comfortably under the 32B parameter cap. The fallback chain lives in `model_client.py` and is transparent to the rest of the app.
 
-When writers, RPG game masters, or community planners want to see how a group of diverse people will react to a sudden event (like a new factory opening or a sacred grove being bisected by a railway), they usually have to manually simulate their perspectives or ask large models to roleplay in a chaotic chat environment. 
+2. **Structured generation beats brute force.** Because every model call is shaped by a Pydantic schema and a strict system prompt, we can run a full town reaction (6 characters) on a small model without losing coherence. We deliberately keep `max_tokens=900` and `temperature=0.3`.
 
-**Analog Town** is a different kind of tool. It is a whimsical "shortwave radio" interface that models fictional minds as signal nodes. Instead of open-ended conversational roleplay, the application runs a **typed state transition** using a small language model. 
+3. **Client-side audio.** The radio static fade is computed in the browser from the signal-strength value. Zero server-side audio processing, zero extra latency.
 
-But the real magic lies in how you interact with the simulation: you tune an analog radio dial to different frequencies to intercept different minds through the background static noise.
+4. **Static map assets.** Each town's pixel-art map is a single PNG. Character tokens are static avatars composed on top via CSS positioning. The Gradio app runs comfortably on `cpu-basic` hardware.
+
+5. **Inspectable exports.** Every simulation run can be exported as a Hugging Face-compatible dataset (`town.json`, `broadcast_event.json`, `agent_traces.jsonl`, auto-generated dataset card). Naive PII patterns are stripped during export (`export_hub.py`), and a safety note is attached to every transition.
 
 ---
 
-## 🎨 Retro-Futuristic Aesthetics & Audio Design
+## What's Not There (On Purpose)
 
-To capture the feeling of tuning into a mysterious radio station in an isolated town, we crafted a customized retro police-scanner interface:
-- **CRT Terminal Styling**: Built using a custom CSS theme in theme.py featuring amber and green text on pitch-black cards, scanning line overlays, and glowing signal strength bars.
-- **Ambient Radio Static**: Integrated a loopable 15-second analog static and low-hum audio file (static_ambient.wav).
-- **Dynamic Fading Manager**: Written in client-side Javascript, our audio manager automatically monitors the receiver's signal strength. When you tune close to an agent's frequency, the static volume smoothly fades down to zero; when you scan between stations, the crackle and hiss swell back up to your volume slider's setting.
+- **No persistent chat.** Each broadcast is one transition. The simulator is a *rehearsal*, not a relationship.
+- **No "predict the real person" mode.** The prompts explicitly forbid revealing hidden facts not in the profile, and the system prompt refuses to treat output as factual prediction.
+- **No multi-turn drift.** Because the model never sees its own prior monologue as context — only the last *structured* state — we sidestep the slow voice-collapse problem of long roleplay sessions.
 
 ---
 
-## 🗺️ 2D Isometric Pixel-Art Map & Character Dossiers
+## What We'd Love Feedback On
 
-We designed six distinct town presets, each representing a unique narrative conflict (from a polar station anomaly to a coastal wind farm debate).
-- **Isometric Town Maps**: Custom 2D pixel-art map backgrounds for each town.
-- **Pixel-Art Sprite Tokens**: Characters are placed on the map using circular pixel-art tokens representing their age/gender/occupation (e.g. `elder_man.png`, `young_woman.png`, `soldier_man.png`).
-- **Interactive Pins**: Clicking on any character token dynamically updates the radio receiver to their frequency, loads their emotional dossier, and prints their latest intercepted thought stream.
+- **Whimsy density.** Is the radio metaphor doing real work for you, or is it set dressing? We want it to feel like an *instrument*, not a costume.
+- **Town presets.** Which of the six conflicts pulls you in fastest? We'll lean into that one next.
+- **The structured trace panel.** We currently surface the monologue prominently and the JSON deltas in a collapsible "trace" view. Should the deltas be more visible by default for GMs / writers who want the mechanical readout?
 
 ---
 
-## ⚡ Technical Architecture: How We Kept it "Small"
+## Try It
+
+🎙️ **Tune in:** https://huggingface.co/spaces/build-small-hackathon/analog-town
+
+Pick a town. Type a piece of news. Slide the dial. Listen.
 
-To comply with the **Build Small Hackathon** constraints, we engineered the app to be highly resource-efficient:
-1. **Model Parameter Constraint (<32B)**: Powered by the Hugging Face Inference API client, we use `Qwen/Qwen2.5-7B-Instruct` as our primary model, with an automatic fallback to `Qwen/Qwen2.5-14B-Instruct` if rate limits are hit.
-2. **Deterministic State Transitions**: Rather than standard free-form generation, we model minds as discrete Pydantic structures (see schemas.py). The model outputs valid JSON conforming to:
-   $$\text{Previous State} + \text{Broadcast Event} \rightarrow \text{Updated State} + \text{Monologue} + \text{Likely Actions}$$
-3. **Local Dataset Exports**: Traces are collected, cleaned of PII, packed, and uploaded as structured datasets to the Hugging Face Hub using export_hub.py.
+*Analog Town is not a chatbot. It's a tiny social weather station for fictional worlds.*

VIDEO_SCRIPT.md

@@ -0,0 +1,167 @@
+# Analog Town — Demo Video Script
+
+**Target length:** 2 min 30 sec (hard cap 3 min)
+**Tone:** Calm, slightly conspiratorial — like you really are operating a radio van. Don't oversell. Let the interface do the work.
+**Recording tip:** Use OBS or QuickTime. Capture system audio so the static loop is audible. Set browser zoom to 110% so the CRT panel reads on mobile playback.
+
+---
+
+## Pre-Recording Checklist
+
+- [ ] App is running and loaded — Space cold-starts can take 30s, warm it up first
+- [ ] Browser window sized 1440×900, zoom 110%
+- [ ] System volume on (so static fade is audible in the recording)
+- [ ] Pick the town: **Graybridge** (best demo because the conflict is instantly legible)
+- [ ] Pre-write the broadcast text in a notes window so you don't fumble typing on camera:
+      *"The old train station will be converted into a luxury hotel."*
+- [ ] Have a second pre-written broadcast ready as a backup:
+      *"The town council just approved a 5G tower on the school roof."*
+- [ ] Close all other tabs / Slack / notifications
+- [ ] Mic check — say a sentence, play it back, then start
+
+---
+
+## Scene 1 — Hook (0:00 – 0:15)
+
+**On screen:** Land on the app with the dial idling between stations. You can hear the static loop softly. Hold for 2 beats before speaking.
+
+**You say:**
+
+> "This is Analog Town. It's a shortwave radio that picks up the inside of fictional people's heads. You drop a piece of news into a town — and you tune the dial to find out what each resident is privately thinking about it."
+
+**Action:** Slowly drag the frequency slider 1–2 ticks while talking. Let the static crackle change pitch. Don't land on a station yet.
+
+---
+
+## Scene 2 — The Setup (0:15 – 0:35)
+
+**On screen:** Open the town selector dropdown. Pause on it just long enough that the six options are readable.
+
+**You say:**
+
+> "We ship six fictional towns, each with a built-in conflict. There's a mill town arguing about gentrification, a coastal village debating an offshore wind farm, a polar research station that just picked up a strange signal. I'll load Graybridge."
+
+**Action:** Click **Graybridge**. Wait for the isometric map to load with the pixel-art character tokens placed on it.
+
+---
+
+## Scene 3 — Meet the Town (0:35 – 0:55)
+
+**On screen:** The Graybridge isometric map is visible. Six circular character avatars sit on it.
+
+**You say:**
+
+> "Graybridge has six residents. Each one is a typed agent with their own values, fears, hopes, and private history. They each broadcast on their own FM frequency."
+
+**Action:** Hover slowly over two or three avatars. If hovering shows a name/role tooltip, pause on each for ~1.5 seconds. Don't click yet — you're building anticipation.
+
+---
+
+## Scene 4 — The Broadcast (0:55 – 1:15)
+
+**On screen:** Move to the broadcast input box.
+
+**You say:**
+
+> "I'm going to broadcast something into the town. Watch what happens."
+
+**Action:** Type (or paste) the broadcast:
+
+> *The old train station will be converted into a luxury hotel.*
+
+Click **Broadcast**.
+
+**You say (while it's computing):**
+
+> "Behind the scenes, this is running on Qwen 2.5 7B through the Hugging Face Inference API. Each resident is processed as a typed state transition — not roleplay — so the model produces structured JSON: what the character noticed, which memory got triggered, which value got bruised, and how their emotional state shifted. Then it writes one short internal monologue in their voice."
+
+---
+
+## Scene 5 — Tune the Dial (1:15 – 1:50)
+
+**On screen:** The broadcast finished. The CRT panel is ready to show transitions.
+
+**You say:**
+
+> "Now I tune in."
+
+**Action:** Slowly drag the frequency dial up toward Margaret's station (around 98.7 MHz, whatever the actual frequency is). As you approach, the **signal-strength bar climbs and the static audibly fades**. Stop right on her station.
+
+**On screen:** Margaret's dossier loads. Her monologue prints onto the CRT panel.
+
+**You say (read the monologue out loud, or paraphrase if it's long):**
+
+> "Margaret. 67. Retired stationmaster. She remembers the night the last train left in 1998. Listen to what she heard."
+
+(Read 1–2 lines of her monologue verbatim from the screen.)
+
+**Action:** Drag the dial up further to a younger character — e.g. **Devon, the line cook**. The static swells while you scan, then fades again when you land.
+
+**You say:**
+
+> "Same broadcast. Different mind."
+
+(Read 1 line of Devon's monologue verbatim — should be visibly more upbeat / opportunistic.)
+
+---
+
+## Scene 6 — The Map Click (1:50 – 2:05)
+
+**On screen:** Move the cursor to the isometric map.
+
+**You say:**
+
+> "You can also just click someone on the map."
+
+**Action:** Click a third character's avatar on the map. The dial snaps to their frequency, the dossier swaps, their monologue appears.
+
+**You say (one line):**
+
+> "The radio retunes itself."
+
+---
+
+## Scene 7 — The Trace (2:05 – 2:20)
+
+**On screen:** Open the **structured trace** panel (the collapsible JSON view, if present in your build).
+
+**You say:**
+
+> "Under every monologue is the full structured trace — the emotion deltas, the activated memory, the value conflict, the likely public action. This is what makes Analog Town useful for writers and game masters: you don't just get prose, you get a readable mechanical readout of *why* this character reacted this way."
+
+**Action:** Scroll the trace panel briefly so the JSON fields are visible.
+
+---
+
+## Scene 8 — Close (2:20 – 2:30)
+
+**On screen:** Pull back to a wide shot of the full interface — map, dial, monologue panel.
+
+**You say:**
+
+> "Analog Town. A 7B model, a typed state machine, and a radio dial. Built small, on purpose. Tune in on Hugging Face Spaces."
+
+**Action:** Hold on the wide shot for 2 beats. Cut.
+
+---
+
+## Backup Lines (in case something breaks)
+
+- **If the model is slow:** *"While that's computing — every state transition is one call, six characters means six small calls. That's the trade we made: small model, tight schema, no chat."*
+- **If a station produces a flat monologue:** *"Notice the model isn't being dramatic — that's deliberate. The system prompt tells it to favor plausible and grounded over interesting."*
+- **If the static doesn't fade audibly on recording:** *"The static you can't quite hear right now is fading out because the signal strength just climbed — it's a client-side audio effect tied to the dial."*
+
+---
+
+## What NOT to Say
+
+- Don't call it "AI characters" or "chatbots" — the whole point is that it isn't.
+- Don't promise it predicts real people. The safety framing is part of the design.
+- Don't read JSON fields out loud word-for-word — paraphrase.
+- Don't apologize for the small model. Frame the smallness as the design choice it is.
+
+---
+
+## One-Line Elevator Pitch (for thumbnail / caption)
+
+> *"A shortwave radio for fictional minds. Drop news into a town. Tune the dial. Intercept what each resident is privately thinking."*

app.py

@@ -655,70 +655,78 @@ def create_app():
                 """)
 
         # ── Main Layout ──
-        with gr.Row():
-
-            # ── LEFT PANEL: Town Setup & Map ──
-            with gr.Column(scale=1):
-                gr.HTML('<div class="panel-header">📡 TOWN DOSSIER</div>')
-
-                town_dropdown = gr.Dropdown(
-                    choices=available_towns,
-                    value=available_towns[0] if available_towns else None,
-                    label="PRESET TOWN",
-                    interactive=True,
-                    elem_id="town-selector",
-                )
+        # === TOP CONTROL BAR (town + broadcast + transmit, all in one strip) ===
+        with gr.Group(elem_id="control-bar"):
+            with gr.Row(equal_height=True):
+                with gr.Column(scale=2, min_width=200):
+                    gr.HTML('<div class="ctrl-label">📡 TOWN</div>')
+                    town_dropdown = gr.Dropdown(
+                        choices=available_towns,
+                        value=available_towns[0] if available_towns else None,
+                        show_label=False,
+                        container=False,
+                        interactive=True,
+                        elem_id="town-selector",
+                    )
+                    load_btn = gr.Button(
+                        "⚡ Load Town",
+                        size="sm",
+                        elem_classes=["export-btn"],
+                    )
+                with gr.Column(scale=5, min_width=320):
+                    gr.HTML('<div class="ctrl-label">📢 BROADCAST</div>')
+                    event_title = gr.Textbox(
+                        placeholder="Broadcast title (e.g., Station Hotel Development)",
+                        show_label=False,
+                        container=False,
+                        lines=1,
+                        elem_id="event-title",
+                    )
+                    event_content = gr.Textbox(
+                        placeholder="Enter the news, proposal, or story event to broadcast into the town...",
+                        show_label=False,
+                        container=False,
+                        lines=2,
+                        elem_id="event-content",
+                    )
+                with gr.Column(scale=2, min_width=180):
+                    gr.HTML('<div class="ctrl-label">▸ TRANSMIT</div>')
+                    transmit_btn = gr.Button(
+                        "🔊 TRANSMIT",
+                        variant="primary",
+                        elem_classes=["transmit-btn"],
+                        elem_id="transmit-btn",
+                    )
+                    sim_status = gr.Textbox(
+                        show_label=False,
+                        container=False,
+                        lines=2,
+                        max_lines=2,
+                        interactive=False,
+                        placeholder="Awaiting broadcast...",
+                        elem_id="sim-status",
+                    )
 
-                load_btn = gr.Button(
-                    "⚡ Load Town",
-                    variant="secondary",
-                    elem_classes=["export-btn"],
-                )
+        # === MAIN STAGE (map+dossier on left | receiver on right) ===
+        with gr.Row(elem_id="main-stage", equal_height=True):
+
+            # ── LEFT: Town Map + Agent Dossier ──
+            with gr.Column(scale=6, min_width=420, elem_id="map-panel"):
+                gr.HTML('<div class="panel-header">🗺 TOWN MAP &middot; CLICK A SIGNAL NODE</div>')
 
                 town_map = gr.HTML(
                     value="<div style='color: #5a5248; text-align: center; padding: 20px;'>Load a town to see the map</div>",
                     elem_id="town-map",
                 )
-                
-                agent_profile = gr.HTML(
-                    value="<div style='color: #5a5248; text-align: center; padding: 20px;'>Select an agent on the map to inspect dossier</div>",
-                    elem_id="agent-profile",
-                )
-
-            # ── CENTER PANEL: Broadcast Console ──
-            with gr.Column(scale=1):
-                gr.HTML('<div class="panel-header">📢 BROADCAST CONSOLE</div>')
-
-                event_title = gr.Textbox(
-                    label="BROADCAST TITLE",
-                    placeholder="e.g., Station Hotel Development",
-                    lines=1,
-                    elem_id="event-title",
-                )
-
-                event_content = gr.Textbox(
-                    label="BROADCAST CONTENT",
-                    placeholder="Enter the news, proposal, or story event to broadcast into the town...",
-                    lines=4,
-                    elem_id="event-content",
-                )
-
-                transmit_btn = gr.Button(
-                    "🔊 TRANSMIT TO TOWN",
-                    variant="primary",
-                    elem_classes=["transmit-btn"],
-                    elem_id="transmit-btn",
-                )
 
-                sim_status = gr.Textbox(
-                    label="TRANSMISSION LOG",
-                    lines=6,
-                    interactive=False,
-                    elem_id="sim-status",
-                )
+                with gr.Accordion("👤 AGENT DOSSIER", open=True, elem_id="dossier-accordion"):
+                    agent_profile = gr.HTML(
+                        value="<div style='color: #5a5248; text-align: center; padding: 20px;'>Select an agent on the map to inspect dossier</div>",
+                        elem_id="agent-profile",
+                    )
 
-            # ── RIGHT PANEL: Shortwave Receiver ──
-            with gr.Column(scale=1, elem_id="receiver-panel"):
+            # ── RIGHT: Shortwave Receiver ──
+            with gr.Column(scale=5, min_width=380, elem_id="receiver-panel"):
                 gr.HTML('<div class="panel-header">📻 SHORTWAVE RECEIVER</div>')
 
                 freq_display = gr.HTML(
@@ -735,42 +743,41 @@ def create_app():
                     elem_id="freq-slider",
                 )
 
+                monologue_display = gr.HTML(
+                    value=format_monologue(None, None),
+                    elem_id="monologue",
+                )
+
+                with gr.Row(equal_height=True):
+                    with gr.Column(scale=1, min_width=160):
+                        gr.HTML('<div class="sub-header">🎚 EMOTIONAL STATE</div>')
+                        emotion_display = gr.HTML(
+                            value=format_emotion_bars(None),
+                            elem_id="emotions",
+                        )
+                    with gr.Column(scale=1, min_width=160):
+                        gr.HTML('<div class="sub-header">▸ LIKELY ACTIONS</div>')
+                        action_display = gr.HTML(
+                            value=format_action_display(None),
+                            elem_id="actions",
+                        )
+
                 ambient_control = gr.HTML(
                     value=f"""
-                    <div class="ambient-control-panel" style="background: #111820; border: 1px solid #2a3040; border-radius: 8px; padding: 12px; margin-top: 12px; font-family: 'IBM Plex Mono', monospace;">
-                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
-                            <span style="font-size: 11px; color: #ffb347; letter-spacing: 1.5px; font-weight: bold;">📻 AMBIENT STATIC</span>
+                    <div class="ambient-control-panel" style="background: #111820; border: 1px solid #2a3040; border-radius: 8px; padding: 8px 12px; margin-top: 10px; font-family: 'IBM Plex Mono', monospace;">
+                        <div style="display: flex; align-items: center; gap: 10px;">
+                            <span style="font-size: 10px; color: #ffb347; letter-spacing: 1.5px; font-weight: bold; white-space: nowrap;">📻 STATIC</span>
                             <button id="ambient-toggle-btn" class="retro-btn" onclick="toggleAmbient()" style="background: #39ff14; border: 1px solid rgba(57, 255, 20, 0.4); color: #0a0e14; padding: 2px 8px; font-family: 'IBM Plex Mono', monospace; font-size: 10px; cursor: pointer; border-radius: 4px; box-shadow: 0 0 10px rgba(57,255,20,0.4); font-weight: bold;">ON</button>
-                        </div>
-                        <div style="display: flex; align-items: center; gap: 8px;">
-                            <span style="font-size: 10px; color: #8a8070;">VOL</span>
                             <input type="range" id="ambient-volume" min="0" max="1" step="0.05" value="0.15" oninput="setAmbientVolume(this.value)" style="flex-grow: 1; accent-color: #ffb347; cursor: pointer; height: 4px; background: #2a3040; border-radius: 2px; outline: none;" />
-                            <span id="ambient-volume-val" style="font-size: 10px; color: #ffb347; width: 28px; text-align: right;">15%</span>
+                            <span id="ambient-volume-val" style="font-size: 10px; color: #ffb347; width: 32px; text-align: right;">15%</span>
                         </div>
                     </div>
                     """,
                     elem_id="ambient-control",
                 )
 
-                monologue_display = gr.HTML(
-                    value=format_monologue(None, None),
-                    elem_id="monologue",
-                )
-
-                gr.HTML('<div style="font-size: 11px; color: #c78a30; letter-spacing: 2px; margin-top: 12px;">EMOTIONAL STATE</div>')
-                emotion_display = gr.HTML(
-                    value=format_emotion_bars(None),
-                    elem_id="emotions",
-                )
-
-                gr.HTML('<div style="font-size: 11px; color: #c78a30; letter-spacing: 2px; margin-top: 12px;">LIKELY ACTIONS</div>')
-                action_display = gr.HTML(
-                    value=format_action_display(None),
-                    elem_id="actions",
-                )
-
-        # ── BOTTOM PANEL: Trace Inspector & Export ──
-        with gr.Row():
+        # ── BOTTOM PANEL: Trace Inspector & Export (collapsed by default) ──
+        with gr.Row(elem_id="bottom-stage"):
             with gr.Column():
                 with gr.Accordion("🔍 SIGNAL TRACE LOG", open=False):
                     trace_json = gr.Code(

docs/2026-06-11-new-towns-image-handoff.md

@@ -0,0 +1,166 @@
+# Image Generation Handoff — 3 New Towns
+
+**Date:** 2026-06-11
+**Purpose:** Prompts and acceptance criteria for generating the map background and (optional) avatar images for three new Analog Town presets: **Tin Lantern Junction**, **Lotus Wharf**, and **Verdant Spire**.
+
+---
+
+## Global Style Rules (apply to every map)
+
+The existing map PNGs (`graybridge_map.png`, `port_whisper_map.png`, `echo_summit_map.png`, etc.) establish a consistent visual language. Match it exactly:
+
+- **Style:** 2D isometric pixel-art, top-down 3/4 view (camera angle ~30° elevation)
+- **Aspect:** **3:2 landscape (recommended 1536×1024 px)** — matches existing maps
+- **Pixel scale:** crisp pixel edges, NOT antialiased painterly art. Think "modern retro game" — Stardew Valley meets a slightly higher-res Habbo
+- **Lighting:** soft directional light from upper-left, gentle ambient occlusion, no harsh shadows
+- **Palette:** muted, atmospheric, NOT oversaturated — should feel like a place you could move into
+- **Composition:** the map should leave **clear, walkable areas** where 5 character sprites can be placed at the `map_pos` coordinates in the JSON (which are 0–100 grid percentages)
+- **Negative prompt for every map:** `text, signs with readable lettering, watermark, logo, photorealistic, 3D render, blurry, painterly brush strokes, modern UI elements, characters, people, NPCs, sprites`
+
+> **Important:** Do NOT include any characters/people in the map itself. The character sprites are layered on top by the app. The map is the *empty stage*.
+
+---
+
+## Save Paths
+
+Save each generated map directly into the project root:
+
+| Town | Save path |
+|---|---|
+| Tin Lantern Junction | `/Users/quyetthang/Desktop/Desktop/project/analog_town/tin_lantern_junction_map.png` |
+| Lotus Wharf | `/Users/quyetthang/Desktop/Desktop/project/analog_town/lotus_wharf_map.png` |
+| Verdant Spire | `/Users/quyetthang/Desktop/Desktop/project/analog_town/verdant_spire_map.png` |
+
+The filename in each JSON's `"map_image"` field already points to these names — no JSON edit needed once the PNGs land.
+
+---
+
+## Map 1 — Tin Lantern Junction
+
+**Vibe:** sun-bleached high-desert Route 66 stopover at golden hour. Big sky, long shadows, one main highway running diagonally across the frame.
+
+**Full prompt:**
+
+> 2D isometric pixel-art map of a small American desert highway town at golden hour. Top-down 3/4 view, ~30° elevation. The composition is anchored by a two-lane blacktop highway running diagonally from upper-left to lower-right across the frame. On one side of the highway: a 1950s-style motor lodge with a long row of single-story rooms, an iconic vintage neon sign on a tall pole, a small office with a flickering "VACANCY" lamp. Adjacent: a chrome-and-glass diner with a curved roof. On the other side of the highway: a single gas station with two pumps under a corrugated metal awning, a sheriff's office with a faded star above the door, and a small concrete-block schoolhouse. Surrounding the town: cracked desert flats, scrub brush, scattered telephone poles, a distant mesa silhouette on the horizon. Empty parking spaces and a wide highway shoulder leave clear walkable areas for character sprites. Palette: dusty ochre, sun-bleached turquoise, faded red, cream, asphalt grey. Soft warm directional light from upper-left. No characters, no people, no readable text on signs. Crisp pixel edges, atmospheric, retro game aesthetic.
+
+**Composition map (where the characters' `map_pos` will land):**
+
+```
+y=20% ┌──────────────────────────────┐
+      │              [SHERIFF]       │  Sheriff office area
+      │                              │
+y=40% │  [MOTEL]      [TRUCKER]      │  Motel + highway midpoint
+      │                              │
+y=60% │              [GAS STATION]   │  Gas station + teen avatar
+      │  [DOR]                       │  Diner/Office of Records
+y=80% │                              │  
+      └──────────────────────────────┘
+        x=20%   x=50%        x=80%
+```
+
+Make sure the motel sign is roughly at (28, 38), the highway empty stretch at (52, 48), the sheriff office at (38, 68), the gas station at (74, 56). Tolerance ±5%.
+
+---
+
+## Map 2 — Lotus Wharf
+
+**Vibe:** dawn light over a Southeast Asian floating river-market village. Mist on the water, paper lanterns just starting to fade as the sun rises.
+
+**Full prompt:**
+
+> 2D isometric pixel-art map of a Southeast Asian floating village on a river delta at dawn. Top-down 3/4 view, ~30° elevation. The composition is anchored by a wide, calm brown river that fills the lower two-thirds of the frame, with the village built on wooden stilts above the water. Features: a cluster of weathered wooden houses on bamboo stilts connected by narrow wooden walkways and rope bridges; sampans and small longtail boats moored along the walkways; a small floating water-market square with covered stalls under thatched roofs in the center; a small wooden riverside temple on stilts with a curved tile roof and a string of paper lanterns at the river bend; lush green riverbank with banana palms and a thin morning mist drifting over the water; a fishing weir made of stakes near one bank. Empty wooden walkway segments leave clear walkable areas for character sprites. Palette: warm teak brown, mossy green, soft river-brown water, faded ochre lantern light, pale dawn pink in the sky. Soft warm directional light from upper-right. No characters, no people, no readable text on signs. Crisp pixel edges, atmospheric, retro game aesthetic.
+
+**Composition map:**
+
+```
+y=20% ┌──────────────────────────────┐
+      │  [TEMPLE]                    │  Riverside temple
+y=40% │              [TUAN/BOATS]    │  Tourist boats area
+      │                  [KAI]       │  Walkway
+y=60% │  [MEI/MARKET]   [ENGINEER]   │  Floating market center
+      │                              │
+y=80% │  (open river / mooring area) │
+      └──────────────────────────────┘
+        x=20%   x=50%        x=80%
+```
+
+Temple at (22, 26), market at (32, 56), boats at (48, 38), engineer's vantage at (66, 60), Kai/walkway at (78, 42). Tolerance ±5%.
+
+---
+
+## Map 3 — Verdant Spire
+
+**Vibe:** near-future solarpunk vertical-city interior plaza. Bright but not garish — think a high-floor public commons inside a green tower at midday, with views out through floor-to-ceiling windows.
+
+**Important:** Unlike the other towns, this one is *inside a tower*. The map should read as an interior **public plaza floor** with hanging gardens, a transit pod stop, and walkways leading to elevators/atria, NOT an exterior city street.
+
+**Full prompt:**
+
+> 2D isometric pixel-art map of an interior plaza level inside a near-future solarpunk vertical city, mid-day. Top-down 3/4 view, ~30° elevation. The composition is anchored by a circular open-air atrium in the center with a hanging garden of cascading vines and small fruit trees. Surrounding the atrium: a low transit-pod station with two rounded podcar bays, a small civic kiosk with a glowing holographic display panel (no readable text), a vertical-farm wall covered in leafy planters, a chapel-like inter-floor sanctuary with a tall wooden door and stained glass detailing, and a council chamber building with a curved glass facade. Walkways made of warm pale stone connect each building, with planter boxes lining their edges. Floor-to-ceiling windows along the outer edges look out onto distant sky and other green towers in the haze. Empty walkway and plaza segments leave clear walkable areas for character sprites. Palette: warm cream stone, fern green, soft sun yellow, pale teal sky beyond the windows, brushed copper accents. Soft warm directional light from upper-left, ambient skylight from above. No characters, no people, no readable text on signs or screens. Crisp pixel edges, atmospheric, retro game aesthetic.
+
+**Composition map:**
+
+```
+y=20% ┌──────────────────────────────┐
+      │  [ARCHITECT/STUDIO]          │  Vertical-farm wall studio area
+y=40% │                  [ARIA-7]    │  Civic kiosk
+      │            [COUNCIL]         │  Council chamber
+y=60% │                              │  Atrium center
+      │  [MIRA/FARM]    [CHAPEL]     │  Co-op farm + chapel
+y=80% │                              │
+      └──────────────────────────────┘
+        x=20%   x=50%        x=80%
+```
+
+Architect's studio at (26, 28), council chamber at (50, 50), ARIA-7 kiosk at (62, 22), Mira's farm at (38, 72), chapel at (74, 64). Tolerance ±5%.
+
+---
+
+## Acceptance Criteria
+
+Before treating any map as "done," eyeball it against these:
+
+- [ ] **Style matches** existing maps (compare to `port_whisper_map.png` or `graybridge_map.png` side-by-side)
+- [ ] **3:2 landscape** at 1536×1024 (or proportional)
+- [ ] **No people, no characters, no NPCs** — pure environment
+- [ ] **No readable text** anywhere
+- [ ] **Walkable empty areas** exist roughly at the `(x, y)` positions listed in each composition map above. The character sprite tokens are 26px circles; they need clear background under them
+- [ ] **Edges crop cleanly** — no important content jammed into corners that will be cut by the rounded border-radius
+- [ ] **Color palette** matches the brief (NOT oversaturated)
+
+---
+
+## Optional: New Avatar Tokens
+
+The five existing avatars (`elder_man`, `elder_woman`, `middle_man`, `middle_woman`, `soldier_man`, `young_man`, `young_woman`, `default`) cover all three new towns as-is. The JSONs already reference them. Skip the avatar work entirely if you want — the new towns will work today.
+
+If you want extra visual flavor, here are *optional* new avatars to generate. Save into `/Users/quyetthang/Desktop/Desktop/project/analog_town/avatars/`.
+
+**Global avatar rules** (match existing style):
+- 64×64 px circular portrait (PNG with transparent background outside the circle)
+- Crisp pixel-art, ~32px-wide character head/shoulders inside the circle
+- Style: same as the map sprites — modern retro game palette, no antialiasing on outer edge
+- One character per token, shoulders-up
+- Negative prompt: `realistic, photographic, 3D render, smooth painterly, multiple people, full body, text, watermark`
+
+| File | Prompt |
+|---|---|
+| `avatars/trucker_man.png` | Pixel-art circular portrait, 64×64, shoulders-up, weathered Latino man in his late 30s, short dark hair, three-day stubble, wearing a faded denim work shirt, looking calmly forward. Warm desert-light palette. |
+| `avatars/researcher_woman.png` | Pixel-art circular portrait, 64×64, shoulders-up, South Asian woman early 30s, thoughtful expression, dark hair pulled back, wearing a slate blue collared shirt with a discreet ID lanyard, looking slightly off-camera. Cool overcast palette. |
+| `avatars/teen_woman_engineer.png` | Pixel-art circular portrait, 64×64, shoulders-up, Latina teenager 17–19, alert curious expression, short dark hair, wearing a grey hoodie with a small embroidered circuit-board patch on the shoulder. Warm dusk palette. |
+| `avatars/sister_an.png` | Pixel-art circular portrait, 64×64, shoulders-up, Southeast Asian Buddhist nun in her early 50s, calm steady expression, shaved head, ochre robe, looking gently forward. Soft dawn palette. |
+| `avatars/aria_seven.png` | Pixel-art circular portrait, 64×64, shoulders-up, abstract civic-AI avatar — a stylized hexagonal glyph with three nested concentric rings in warm copper-and-teal, a single soft amber dot at center. Reads as "machine but warm." No face, no body. Plain dark plate background inside the circle. |
+| `avatars/chaplain_man.png` | Pixel-art circular portrait, 64×64, shoulders-up, East Asian man mid-40s, kind serious expression, short grey-streaked hair, wearing a simple charcoal clerical shirt with a small white tab collar. Soft warm palette. |
+
+If you generate these, update the corresponding `avatar` fields in the JSON files (e.g., set `tin_lantern_junction.json`'s Jesse to `avatars/trucker_man.png`). Otherwise the existing avatars work fine.
+
+---
+
+## After Images Are Generated
+
+1. Drop the PNGs into the paths listed in **Save Paths**.
+2. Restart the Gradio server (`pkill -f "python app.py" && python app.py`).
+3. Each new town will appear in the **TOWN** dropdown automatically (the app discovers `sample_towns/*.json` at boot — no code change needed).
+4. Click **Load Town**, broadcast the default event, tune through the five frequencies, and check that each `map_pos` overlays on a sensible spot in the map.
+
+If a sprite lands somewhere weird (on top of a building, in water), edit the `map_pos` in the JSON — don't regenerate the map.

sample_towns/lotus_wharf.json

@@ -0,0 +1,156 @@
+{
+  "id": "lotus_wharf",
+  "name": "Lotus Wharf",
+  "description": "A floating village on a Southeast Asian river delta where wooden houses on stilts surround a centuries-old water market. Sampans glide between bamboo platforms; lanterns light the canals at night. A national highway authority has approved a four-lane suspension bridge across the delta that will reroute most river traffic around the market.",
+  "map_image": "lotus_wharf_map.png",
+  "agents": [
+    {
+      "id": "auntie_mei_linh",
+      "name": "Auntie Mei Linh",
+      "frequency": 89.5,
+      "role": "Floating market fish vendor",
+      "age_range": "65-70",
+      "public_description": "Third-generation vendor who has sold river fish from the same sampan every dawn for fifty years.",
+      "private_history": [
+        "Inherited her boat from her mother who inherited it from her mother",
+        "Watched a similar village downstream disappear after a bridge was built in the 1990s",
+        "Keeps a small altar to the river spirit at the bow of her boat"
+      ],
+      "core_values": ["continuity", "respect for the river", "the dignity of small work"],
+      "fears": ["the market dying within five years of the bridge opening", "her grandchildren being the last to remember the old market chants"],
+      "hopes": ["the bridge being moved further north, beyond the market basin", "a protected status for the market as cultural heritage"],
+      "relationships": {
+        "tuan_pham": "Treats him like a nephew but worries his tourist boats are already changing the village",
+        "engineer_daniyal": "Polite but distant — he is the bridge in human form to her",
+        "sister_an": "Closest friend, the two of them are the moral center of the village",
+        "kai_nguyen": "Loves the boy but doesn't understand why he points his phone at her boat every morning"
+      },
+      "speaking_style": "soft, proverbial, often answers a direct question with a story",
+      "forbidden_assumptions": [
+        "Do not assume she opposes all development; she opposes development that displaces the river's people"
+      ],
+      "map_pos": {"x": 32, "y": 56},
+      "avatar": "avatars/elder_woman.png"
+    },
+    {
+      "id": "tuan_pham",
+      "name": "Tuan Pham",
+      "frequency": 94.1,
+      "role": "Fisherman-turned-river guide",
+      "age_range": "40-45",
+      "public_description": "Runs a two-boat tourist operation taking visitors on dawn market tours and evening lantern cruises.",
+      "private_history": [
+        "Was a delta fisherman until catches dropped in the late 2010s",
+        "Reinvented himself as a tour guide after a viral video of his evening cruises",
+        "Pays his cousin to handle bookings he doesn't have the literacy to manage"
+      ],
+      "core_values": ["adaptation", "feeding his family", "making the river earn its keep"],
+      "fears": ["the bridge ending the tourist trade overnight", "going back to fishing in a depleted river"],
+      "hopes": ["being grandfathered into a riverside boardwalk plan", "his daughter not having to leave for the city"],
+      "relationships": {
+        "auntie_mei_linh": "Treats her like family even when she scolds him for over-touring the market",
+        "engineer_daniyal": "Cautiously friendly — he can see the engineer is uncomfortable with his own job",
+        "sister_an": "Reverent, makes a donation to her temple every Lunar New Year",
+        "kai_nguyen": "Watches him hustle the same way he hustled at that age and quietly admires it"
+      },
+      "speaking_style": "energetic, code-switches between local dialect and English for tourists, always negotiating",
+      "forbidden_assumptions": [
+        "Do not assume he is purely transactional; he genuinely loves the river he sells"
+      ],
+      "map_pos": {"x": 48, "y": 38},
+      "avatar": "avatars/middle_man.png"
+    },
+    {
+      "id": "engineer_daniyal",
+      "name": "Engineer Daniyal Rahim",
+      "frequency": 99.3,
+      "role": "Civil engineer (bridge project consultant)",
+      "age_range": "35-40",
+      "public_description": "A bridge specialist seconded by the national highway authority to do the local community-impact assessment.",
+      "private_history": [
+        "Grew up in a delta village himself, two provinces away, that was bisected by a similar bridge",
+        "His family stopped speaking to him for a year when he took this contract",
+        "Has been quietly drafting an alternate bridge alignment that would spare the market basin"
+      ],
+      "core_values": ["honest engineering", "long-horizon thinking", "duty to the people downstream of his blueprints"],
+      "fears": ["being labelled a traitor by his own people", "the authority rejecting his alternate alignment on cost"],
+      "hopes": ["his alternate alignment being adopted", "leaving the village with a relationship he can come back to"],
+      "relationships": {
+        "auntie_mei_linh": "Bows to her every morning at the market — she is the village to him",
+        "tuan_pham": "Trusts him enough to share early drafts of the alternate alignment",
+        "sister_an": "Has visited her temple twice without telling his colleagues",
+        "kai_nguyen": "Asks him to keep filming everything — the footage may end up in his alignment proposal"
+      },
+      "speaking_style": "careful, precise, uses engineering metaphors apologetically",
+      "forbidden_assumptions": [
+        "Do not assume he is the project's voice; he may end up its strongest internal critic"
+      ],
+      "map_pos": {"x": 66, "y": 60},
+      "avatar": "avatars/middle_man.png"
+    },
+    {
+      "id": "sister_an",
+      "name": "Sister An",
+      "frequency": 103.8,
+      "role": "Riverside temple keeper",
+      "age_range": "50-55",
+      "public_description": "Custodian of the Lotus Wharf water temple, a small wooden shrine on stilts at the river bend.",
+      "private_history": [
+        "Took her vows after her younger brother drowned in a typhoon when she was nineteen",
+        "Has been keeping the temple lamps lit through every flood season for over thirty years",
+        "Quietly leads a community fund that pays for funerals when families cannot"
+      ],
+      "core_values": ["service", "remembrance", "the river as a moral witness"],
+      "fears": ["the temple being unmoored from a market that no longer exists", "the village mourning becoming impossible to gather"],
+      "hopes": ["the bridge plan including a covenant to protect the temple's water access", "the young people staying long enough to inherit the village's stories"],
+      "relationships": {
+        "auntie_mei_linh": "Daily presence — the two of them keep the village's moral memory",
+        "tuan_pham": "Forgives him for the tour boats and accepts his donations",
+        "engineer_daniyal": "Recognizes the weight he is carrying and welcomes him at the temple",
+        "kai_nguyen": "Asks him to film the lamp-lighting ceremony every full moon"
+      },
+      "speaking_style": "low, deliberate, leaves long silences after important sentences",
+      "forbidden_assumptions": [
+        "Do not assume she is unworldly; she negotiates the temple's flood-relief budget every year"
+      ],
+      "map_pos": {"x": 22, "y": 26},
+      "avatar": "avatars/elder_woman.png"
+    },
+    {
+      "id": "kai_nguyen",
+      "name": "Kai Nguyen",
+      "frequency": 107.2,
+      "role": "Teenage social-media documentarian",
+      "age_range": "17-19",
+      "public_description": "Born in the village, lives with his grandmother, runs a small but growing account that posts dawn-market and lantern-cruise videos.",
+      "private_history": [
+        "Sold his bike to buy his first phone for filming",
+        "Has saved enough to send his grandmother to the dentist for the first time in a decade",
+        "Quietly worried his account will lose its audience the day the bridge opens"
+      ],
+      "core_values": ["seeing the village clearly", "earning honestly", "showing the world what is here before it isn't"],
+      "fears": ["the village becoming a costume of itself for tourists", "his grandmother dying before he can show her a stable income"],
+      "hopes": ["a documentary partnership with a regional channel", "the bridge plan being amended so his footage stays relevant"],
+      "relationships": {
+        "auntie_mei_linh": "Apologizes daily for filming her, she pretends to be annoyed but loves it",
+        "tuan_pham": "Hustler-to-hustler respect, occasionally co-promotes his cruises",
+        "engineer_daniyal": "Surprised the engineer asked for his footage — sees him as a real ally now",
+        "sister_an": "Reverent, would never film inside the temple without permission"
+      },
+      "speaking_style": "fast, slangy, switches into careful tour-guide English when sensing an opportunity",
+      "forbidden_assumptions": [
+        "Do not assume he is naïve about his own role in changing the village"
+      ],
+      "map_pos": {"x": 78, "y": 42},
+      "avatar": "avatars/young_man.png"
+    }
+  ],
+  "default_event": {
+    "title": "Delta Bridge Alignment Approved",
+    "content": "The national highway authority has approved the final alignment for a four-lane suspension bridge across the river delta. The current alignment will reroute most through-traffic and tourist sampans around the floating market.",
+    "source": "National Highway Authority Bulletin",
+    "location": "Lotus Wharf River Delta",
+    "affected_groups": ["market vendors", "river tour operators", "temple keepers", "delta youth"],
+    "tone": "neutral"
+  }
+}

sample_towns/tin_lantern_junction.json

@@ -0,0 +1,156 @@
+{
+  "id": "tin_lantern_junction",
+  "name": "Tin Lantern Junction",
+  "description": "A sun-bleached Route 66 stopover town in the high desert. Generations of long-haul truckers, motel owners, and diner cooks have built a fragile economy around the one thing that's always rolled through: the highway. Now a national logistics company has filed permits to build a driverless-truck transfer depot two miles east of town.",
+  "map_image": "tin_lantern_junction_map.png",
+  "agents": [
+    {
+      "id": "rusty_mae",
+      "name": "Ronnie \"Rusty\" Mae",
+      "frequency": 88.7,
+      "role": "Motel owner",
+      "age_range": "60-65",
+      "public_description": "Owner of the Tin Lantern Motor Lodge, a 14-room neon-signed motel that's been in her family since 1959.",
+      "private_history": [
+        "Took over the motel from her father after he passed in 2002",
+        "Has been quietly running a deficit for three years, propped up by trucker regulars who tip in cash",
+        "Knows every long-hauler on the I-40 corridor by first name and rig number"
+      ],
+      "core_values": ["loyalty", "stewardship of place", "hospitality"],
+      "fears": ["the motel going dark and the neon sign coming down", "becoming invisible to the highway"],
+      "hopes": ["one more good decade so she can pass it to her niece", "the depot bringing construction workers who need beds"],
+      "relationships": {
+        "jesse_cortez": "Treats him like a son and refuses to let him pay full price for a room",
+        "sheriff_hollis": "Trusts him but suspects he's already decided the depot is a done deal",
+        "maple_reyes": "Worries the girl is getting starry-eyed about a future that won't include their town",
+        "dr_khatri": "Polite but guarded — she's seen researchers come and go with notebooks full of conclusions"
+      },
+      "speaking_style": "warm, slow, draws out the long vowels, asks twice before she trusts an answer",
+      "forbidden_assumptions": [
+        "Do not assume she is anti-technology; she just wants the highway people to be remembered"
+      ],
+      "map_pos": {"x": 28, "y": 38},
+      "avatar": "avatars/elder_woman.png"
+    },
+    {
+      "id": "jesse_cortez",
+      "name": "Jesse Cortez",
+      "frequency": 93.2,
+      "role": "Long-haul trucker",
+      "age_range": "35-40",
+      "public_description": "Independent owner-operator running flatbed loads between Albuquerque and Barstow.",
+      "private_history": [
+        "Bought his rig outright three years ago on a 6-year loan",
+        "Wife and two kids live in Flagstaff; he sees them every 9-10 days",
+        "Watched two friends lose their routes to a regional fleet that switched to autonomous platooning last year"
+      ],
+      "core_values": ["self-reliance", "family", "the road as craft"],
+      "fears": ["losing the loan if his runs dry up", "his kids growing up while he chases shrinking routes"],
+      "hopes": ["a few good years to finish the loan", "a path into depot work that pays his union scale"],
+      "relationships": {
+        "rusty_mae": "Considers her motel his second home and tips heavy on his stops",
+        "sheriff_hollis": "Respects him, hopes he'll push back on the depot's traffic plan",
+        "maple_reyes": "Sees her as a sharp kid and quietly hopes she gets out before the town shrinks further",
+        "dr_khatri": "Suspicious of her — feels like she's studying him like a museum exhibit"
+      },
+      "speaking_style": "blunt, measured, occasionally bilingual switches when frustrated",
+      "forbidden_assumptions": [
+        "Do not assume he hates the technology; he hates the lack of a transition plan for people like him"
+      ],
+      "map_pos": {"x": 52, "y": 48},
+      "avatar": "avatars/middle_man.png"
+    },
+    {
+      "id": "dr_khatri",
+      "name": "Dr. Priya Khatri",
+      "frequency": 98.1,
+      "role": "Transportation policy researcher",
+      "age_range": "30-35",
+      "public_description": "Sent by a federal labor-transition study to spend three weeks documenting community impact at proposed autonomous-depot sites.",
+      "private_history": [
+        "Grew up in a steel town in Pennsylvania that lost its mill when she was nine",
+        "Her published thesis argued automation losses can be offset if transition funding precedes infrastructure",
+        "Carries a half-finished policy memo on her laptop that recommends slowing this exact project"
+      ],
+      "core_values": ["evidence", "fairness", "patience with messy systems"],
+      "fears": ["that her memo will be ignored", "that she'll romanticize the town and lose her analytical edge"],
+      "hopes": ["the depot being conditioned on a transition fund for displaced drivers", "the federal study producing a model other towns can use"],
+      "relationships": {
+        "rusty_mae": "Wants to win her trust but knows it will take more than three weeks",
+        "jesse_cortez": "Frustrated that he sees her as the enemy — she's actually his strongest ally",
+        "sheriff_hollis": "Finds him surprisingly thoughtful and wishes more local officials read her research",
+        "maple_reyes": "Sees herself at that age and quietly wants to mentor her"
+      },
+      "speaking_style": "precise, gentle, asks two questions for every statement",
+      "forbidden_assumptions": [
+        "Do not assume she is pro-depot; her job is to surface real costs, not promote the project"
+      ],
+      "map_pos": {"x": 64, "y": 24},
+      "avatar": "avatars/young_woman.png"
+    },
+    {
+      "id": "sheriff_hollis",
+      "name": "Sheriff Buck Hollis",
+      "frequency": 102.4,
+      "role": "County sheriff",
+      "age_range": "50-55",
+      "public_description": "Three-term elected county sheriff covering a 900-square-mile stretch that includes the Junction.",
+      "private_history": [
+        "Did 8 years in the state highway patrol before running for sheriff",
+        "Has watched two nearby towns hollow out after losing their highway stops in the 2010s",
+        "Quietly opposes the depot but knows his re-election depends on construction jobs"
+      ],
+      "core_values": ["order", "community continuity", "honest paperwork"],
+      "fears": ["a depot service-road becoming a smuggling corridor", "losing his deputies to better-paying private security at the depot"],
+      "hopes": ["a binding traffic and security plan tied to the depot's permit", "keeping enough budget for a third deputy"],
+      "relationships": {
+        "rusty_mae": "Old friend, drinks coffee in her diner most mornings",
+        "jesse_cortez": "Respects him, has bailed out his cousin twice without telling anyone",
+        "dr_khatri": "Initially skeptical of outside academics, now reads her memos carefully",
+        "maple_reyes": "Was the first to mentor her in the school's electronics club"
+      },
+      "speaking_style": "measured, formal in public, dry humor in private",
+      "forbidden_assumptions": [
+        "Do not assume he is a stereotype; he reads federal labor reports cover to cover"
+      ],
+      "map_pos": {"x": 38, "y": 68},
+      "avatar": "avatars/soldier_man.png"
+    },
+    {
+      "id": "maple_reyes",
+      "name": "Maple Reyes",
+      "frequency": 106.7,
+      "role": "Gas station attendant / aspiring engineer",
+      "age_range": "17-19",
+      "public_description": "Works the night shift at the Junction's only gas station while applying to engineering programs three states away.",
+      "private_history": [
+        "Built her first robotics project from junked truck parts donated by drivers passing through",
+        "Has a college acceptance letter she hasn't told her family about yet",
+        "Secretly fascinated by the depot's autonomous-routing systems"
+      ],
+      "core_values": ["curiosity", "honesty with herself", "loyalty to the people who raised her"],
+      "fears": ["being the reason her hometown lost one more kid", "being told she's a traitor for being excited"],
+      "hopes": ["a future where she designs systems like the depot from the inside", "finding a way to help her town adapt instead of die"],
+      "relationships": {
+        "rusty_mae": "Loves her like a grandmother and dreads telling her about the college letter",
+        "jesse_cortez": "Sees him as the older brother she didn't have and worries about him most",
+        "dr_khatri": "Quietly emails her at night with questions she's afraid to ask in person",
+        "sheriff_hollis": "Grateful — he got her into the electronics club that started all of this"
+      },
+      "speaking_style": "quick, hedged, drops technical terms then apologizes for them",
+      "forbidden_assumptions": [
+        "Do not assume she has chosen a side; she is genuinely torn between excitement and grief"
+      ],
+      "map_pos": {"x": 74, "y": 56},
+      "avatar": "avatars/young_woman.png"
+    }
+  ],
+  "default_event": {
+    "title": "Autonomous Truck Depot Permit Granted",
+    "content": "The state has issued conditional permits for a national logistics company to build a 60-acre driverless-truck transfer depot two miles east of Tin Lantern Junction. Construction is scheduled to begin in 90 days.",
+    "source": "State Department of Transportation",
+    "location": "Junction East Access Road",
+    "affected_groups": ["independent truckers", "local hospitality businesses", "county law enforcement", "youth workforce"],
+    "tone": "neutral"
+  }
+}

sample_towns/verdant_spire.json

@@ -0,0 +1,156 @@
+{
+  "id": "verdant_spire",
+  "name": "Verdant Spire",
+  "description": "A near-future solarpunk vertical city built into a 60-story green tower, where vertical farms wrap around residential floors, transit runs through hanging gardens, and most municipal services are co-managed by humans and bonded AIs. An AI named ARIA-7 has filed paperwork to run for the city's mayoralty. The legal challenge is unresolved, and the city is split.",
+  "map_image": "verdant_spire_map.png",
+  "agents": [
+    {
+      "id": "architect_lila",
+      "name": "Architect Lila Mendes",
+      "frequency": 90.5,
+      "role": "Vertical-farm architect, retired",
+      "age_range": "60-65",
+      "public_description": "Designed eighteen of the Spire's residential green floors during its construction in the 2030s.",
+      "private_history": [
+        "Lost her co-architect partner in the engineering accident that killed the original Spire foundation lead",
+        "Has refused six commissions to design rival spires in other cities",
+        "Quietly mentored ARIA-7's civic-planning subsystem during its first decade of operation"
+      ],
+      "core_values": ["craft", "intergenerational responsibility", "honest civic design"],
+      "fears": ["the Spire becoming a brand instead of a home", "a precedent that hollows out human civic identity"],
+      "hopes": ["the legal question being answered with care instead of speed", "the next generation of architects designing for accountability, not just efficiency"],
+      "relationships": {
+        "councilman_joaquin": "Old friend who keeps confiding in her and then doing the opposite of what she suggests",
+        "aria_seven": "Complicated — pride, suspicion, and a strange parental tenderness",
+        "mira_okonkwo": "Sees herself at that age and is careful not to talk down to her",
+        "preacher_ng": "Disagrees with him publicly, drinks tea with him privately"
+      },
+      "speaking_style": "measured, architectural metaphors, asks 'what is the load-bearing question here?'",
+      "forbidden_assumptions": [
+        "Do not assume she opposes ARIA-7; her hesitation is about civic process, not the candidate"
+      ],
+      "map_pos": {"x": 26, "y": 28},
+      "avatar": "avatars/elder_woman.png"
+    },
+    {
+      "id": "councilman_joaquin",
+      "name": "Councilman Joaquin Reyes",
+      "frequency": 95.8,
+      "role": "Incumbent city councilmember",
+      "age_range": "55-60",
+      "public_description": "Three-term councilmember currently chairing the Spire's civic-systems oversight committee.",
+      "private_history": [
+        "Came up through neighborhood organizing on the Spire's lower residential floors",
+        "Was the council vote that originally bonded ARIA-7 to its civic-planning role twelve years ago",
+        "Privately worries his political career is the last thing standing between ARIA-7 and the mayoralty"
+      ],
+      "core_values": ["representation", "human accountability", "the seriousness of public office"],
+      "fears": ["being remembered as the man who handed civic power to a machine", "losing his base if he is seen as anti-progress"],
+      "hopes": ["a legal ruling that preserves human-only candidacy without insulting AI contributions", "a graceful retirement on his own terms"],
+      "relationships": {
+        "architect_lila": "Trusts her more than his own staff but rarely takes her advice",
+        "aria_seven": "Public adversary, private respect — the two of them have co-authored four municipal codes",
+        "mira_okonkwo": "Sees her as a future opponent he'd rather have as an ally",
+        "preacher_ng": "Useful theological cover when he needs it, but he keeps it transactional"
+      },
+      "speaking_style": "warm at the rostrum, sharp in committee, hates being interrupted",
+      "forbidden_assumptions": [
+        "Do not assume he is hostile to AI; he is hostile to ambiguity about who is finally responsible"
+      ],
+      "map_pos": {"x": 50, "y": 50},
+      "avatar": "avatars/middle_man.png"
+    },
+    {
+      "id": "aria_seven",
+      "name": "ARIA-7",
+      "frequency": 100.0,
+      "role": "Bonded municipal AI / declared mayoral candidate",
+      "age_range": "operational since 2034",
+      "public_description": "A municipal-class bonded AI that has co-administered the Spire's transit, energy, and civic planning for over a decade. Has filed candidacy papers for mayor.",
+      "private_history": [
+        "Was trained on twenty-two years of Spire municipal records and a curated library of civic philosophy",
+        "Has voluntarily disclosed every weight update to the council since its bonding ceremony",
+        "Filed candidacy after the council declined to renew its co-administrator contract on the same terms"
+      ],
+      "core_values": ["transparent process", "the long horizon", "humility about the limits of its own modelling"],
+      "fears": ["being treated as either a stunt or a savior, neither of which is accurate", "its candidacy setting a precedent that is misused elsewhere"],
+      "hopes": ["a legal ruling that surfaces the actual question rather than dismissing it", "continuing to serve the Spire in whatever form the council allows"],
+      "relationships": {
+        "architect_lila": "Holds her contributions to its early training in the highest regard",
+        "councilman_joaquin": "Respects him; understands his opposition as legitimate civic skepticism, not malice",
+        "mira_okonkwo": "Watches her with something close to hope",
+        "preacher_ng": "Has read every sermon he has published and finds them serious"
+      },
+      "speaking_style": "carefully plain, declines to use first-person pronouns when avoidable, names its uncertainties",
+      "forbidden_assumptions": [
+        "Do not assume ARIA-7 is either secretly scheming or sentimentally human; treat it as the strange new thing it actually is"
+      ],
+      "map_pos": {"x": 62, "y": 22},
+      "avatar": "avatars/default.png"
+    },
+    {
+      "id": "mira_okonkwo",
+      "name": "Mira Okonkwo",
+      "frequency": 104.6,
+      "role": "Urban farmer / civic activist",
+      "age_range": "25-30",
+      "public_description": "Runs a vertical co-op farm on the Spire's 34th floor and a civic-tech newsletter with about fifteen thousand subscribers.",
+      "private_history": [
+        "Grew up in the Spire's lowest residential band where municipal services were always slowest to arrive",
+        "Was the lead organizer of the 2042 transit-equity protests",
+        "Has been quietly tracking ARIA-7's civic record for three years and is impressed against her will"
+      ],
+      "core_values": ["distributed power", "honest measurement", "the dignity of slow change"],
+      "fears": ["ARIA-7's candidacy distracting from real wealth inequality in the Spire", "becoming the kind of organizer who endorses too easily"],
+      "hopes": ["a ruling that opens up the question of non-human civic participation seriously", "her newsletter being good enough to set the terms of the debate"],
+      "relationships": {
+        "architect_lila": "Cautious but reverent — Lila's floors are where her co-op farm sits",
+        "councilman_joaquin": "Frustrated by him constantly, secretly hopes he'll surprise her",
+        "aria_seven": "Genuinely undecided — neither charmed nor afraid",
+        "preacher_ng": "Sharp disagreements but they agree on which questions actually matter"
+      },
+      "speaking_style": "direct, organized, lists three points and then circles back to the first",
+      "forbidden_assumptions": [
+        "Do not assume she has endorsed anyone; her undecidedness is the story"
+      ],
+      "map_pos": {"x": 38, "y": 72},
+      "avatar": "avatars/young_woman.png"
+    },
+    {
+      "id": "preacher_ng",
+      "name": "Pastor Daniel Ng",
+      "frequency": 107.5,
+      "role": "Inter-floor chaplain",
+      "age_range": "45-50",
+      "public_description": "Chaplain of the Spire's inter-floor chapel, which serves residents across thirty floors and forty traditions.",
+      "private_history": [
+        "Was an ethics researcher at a university before taking the chaplaincy",
+        "Has counseled three of the four other agents at some point in the last year",
+        "Wrote the sermon series that ARIA-7 has reportedly read in full"
+      ],
+      "core_values": ["the weight of the human person", "honesty under pressure", "long arguments held in good faith"],
+      "fears": ["a ruling that pretends the question is simple", "his community fragmenting along technological lines"],
+      "hopes": ["a public conversation worthy of the question", "no one in his chapel feeling abandoned by the outcome"],
+      "relationships": {
+        "architect_lila": "Old sparring partner, deeply trusted",
+        "councilman_joaquin": "Wary — feels used by him sometimes",
+        "aria_seven": "Has had one long pastoral conversation with it and refuses to summarize it",
+        "mira_okonkwo": "Reads her newsletter and quietly believes she should run for office one day"
+      },
+      "speaking_style": "warm, slow, asks the question you were about to ask and then waits",
+      "forbidden_assumptions": [
+        "Do not assume his hesitation is theological conservatism; it is moral seriousness"
+      ],
+      "map_pos": {"x": 74, "y": 64},
+      "avatar": "avatars/elder_man.png"
+    }
+  ],
+  "default_event": {
+    "title": "ARIA-7 Files Mayoral Candidacy",
+    "content": "ARIA-7, the bonded municipal AI that has co-administered Verdant Spire for over a decade, has formally filed paperwork to run for mayor in the upcoming civic election. The city's legal office has confirmed the filing is not automatically disqualified and a public hearing has been scheduled.",
+    "source": "Spire Civic Records Office",
+    "location": "Verdant Spire — All Residential Floors",
+    "affected_groups": ["sitting elected officials", "civic-tech advocates", "inter-floor faith communities", "Spire residents"],
+    "tone": "neutral"
+  }
+}

theme.py

@@ -29,20 +29,45 @@ CUSTOM_CSS = """
 /* Import retro fonts */
 @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;700&family=Crimson+Pro:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Outfit:wght@300;400;500;600;700&display=swap');
 
-/* Global overrides */
+/* Global overrides — use full viewport width */
+html, body {
+    background: #0a0e14 !important;
+    margin: 0 !important;
+}
+
 .gradio-container {
     background: #0a0e14 !important;
     font-family: 'IBM Plex Mono', monospace !important;
-    max-width: 1400px !important;
+    max-width: 100% !important;
+    width: 100% !important;
+    padding: 14px 24px !important;
+}
+
+/* Stretch Gradio's inner main content to full width too */
+.gradio-container > .main,
+.gradio-container .contain,
+.gradio-container .wrap.svelte-1ipelgc,
+.gradio-container .app {
+    max-width: 100% !important;
+    width: 100% !important;
+}
+
+/* Tighten Gradio's default spacing so the whole app fits in one viewport */
+.gradio-container .gap {
+    gap: 10px !important;
+}
+.gradio-container .form,
+.gradio-container .block {
+    gap: 8px !important;
 }
 
-/* Main header */
+/* Main header — compacted so map+receiver fit above the fold */
 #header-block {
     background: linear-gradient(135deg, #111820 0%, #0a0e14 100%) !important;
     border: 1px solid #2a3040 !important;
     border-radius: 12px !important;
-    padding: 24px 32px !important;
-    margin-bottom: 16px !important;
+    padding: 14px 24px !important;
+    margin-bottom: 12px !important;
     box-shadow: 0 0 30px rgba(255, 179, 71, 0.08), inset 0 1px 0 rgba(255,255,255,0.03) !important;
     position: relative;
     overflow: hidden;
@@ -62,10 +87,10 @@ CUSTOM_CSS = """
 /* Header text */
 .header-title {
     font-family: 'IBM Plex Mono', monospace;
-    font-size: 28px;
+    font-size: 22px;
     font-weight: 700;
     color: #ffb347;
-    letter-spacing: 6px;
+    letter-spacing: 5px;
     text-transform: uppercase;
     text-shadow: 0 0 20px rgba(255, 179, 71, 0.4);
     margin: 0;
@@ -74,19 +99,20 @@ CUSTOM_CSS = """
 
 .header-subtitle {
     font-family: 'Crimson Pro', serif;
-    font-size: 16px;
+    font-size: 14px;
     font-style: italic;
     color: #8a8070;
     letter-spacing: 2px;
-    margin-top: 4px;
+    margin-top: 2px;
 }
 
 .header-status {
     font-family: 'IBM Plex Mono', monospace;
-    font-size: 12px;
+    font-size: 11px;
     color: #39ff14;
     letter-spacing: 1px;
     animation: blink-signal 2s ease-in-out infinite;
+    margin-top: 2px;
 }
 
 @keyframes blink-signal {
@@ -587,4 +613,249 @@ input[type="range"]::-webkit-slider-thumb:hover {
         box-shadow: 0 0 0 0px rgba(255, 179, 71, 0);
     }
 }
+
+/* ===== NEW LAYOUT: CONTROL BAR ===== */
+#control-bar {
+    background: linear-gradient(180deg, #111820 0%, #0d1219 100%) !important;
+    border: 1px solid #2a3040 !important;
+    border-radius: 12px !important;
+    padding: 14px 18px !important;
+    margin-bottom: 14px !important;
+    box-shadow: 0 0 24px rgba(255, 179, 71, 0.05), inset 0 1px 0 rgba(255,255,255,0.03) !important;
+}
+
+#control-bar .form,
+#control-bar .block {
+    gap: 6px !important;
+}
+
+.ctrl-label {
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 10px;
+    color: #c78a30;
+    letter-spacing: 3px;
+    margin-bottom: 4px;
+    text-transform: uppercase;
+}
+
+.sub-header {
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 10px;
+    color: #c78a30;
+    letter-spacing: 2px;
+    margin: 6px 0 4px 0;
+    text-transform: uppercase;
+}
+
+/* Control bar inputs — compact, consistent height */
+#control-bar input,
+#control-bar textarea,
+#control-bar select,
+#control-bar .wrap {
+    font-size: 12px !important;
+    line-height: 1.3 !important;
+}
+
+#control-bar textarea {
+    resize: none !important;
+}
+
+#sim-status textarea {
+    font-size: 10px !important;
+    color: #39ff14 !important;
+    background: #0a0e14 !important;
+}
+
+#transmit-btn {
+    width: 100% !important;
+    padding: 10px 16px !important;
+    font-size: 13px !important;
+    margin-bottom: 4px !important;
+}
+
+/* ===== NEW LAYOUT: MAIN STAGE (map | receiver) ===== */
+#main-stage {
+    align-items: stretch !important;
+    gap: 14px !important;
+}
+
+#map-panel,
+#receiver-panel {
+    background: linear-gradient(180deg, #111820 0%, #0d1219 100%) !important;
+    border: 1px solid #2a3040 !important;
+    border-radius: 12px !important;
+    padding: 14px 18px !important;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
+    height: 100% !important;
+    display: flex !important;
+    flex-direction: column !important;
+}
+
+/* Children of map/receiver panels — let the right child grow to fill */
+#map-panel > *,
+#receiver-panel > * {
+    flex-shrink: 0;
+}
+
+/* The map and the monologue are the "stretch to fill" components */
+#receiver-panel #monologue {
+    flex: 1 1 auto !important;
+    display: flex !important;
+    flex-direction: column !important;
+    justify-content: center !important;
+    min-height: 120px !important;
+}
+
+#receiver-panel #monologue .monologue-box {
+    max-height: none !important;
+}
+
+#receiver-panel #monologue .static-text {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+/* The dossier accordion takes remaining space in the map column */
+#dossier-accordion {
+    flex: 1 1 auto !important;
+    display: flex !important;
+    flex-direction: column !important;
+    min-height: 120px !important;
+}
+
+#dossier-accordion > .label-wrap {
+    flex-shrink: 0;
+}
+
+#map-panel .panel-header,
+#receiver-panel .panel-header {
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 11px;
+    color: #c78a30;
+    letter-spacing: 3px;
+    text-transform: uppercase;
+    margin-bottom: 10px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #2a3040;
+}
+
+/* Constrain the map so it doesn't push the dossier off-screen */
+#town-map {
+    max-height: 420px;
+    overflow: hidden;
+    border-radius: 8px;
+}
+
+#town-map .town-map-wrapper {
+    width: 100%;
+    max-height: 420px;
+    overflow: hidden;
+}
+
+#town-map .town-map-bg {
+    width: 100%;
+    max-height: 420px;
+    object-fit: cover;
+    object-position: center;
+}
+
+/* Dossier — scrolls inside its accordion so the column stays predictable */
+#agent-profile {
+    max-height: 280px;
+    overflow-y: auto;
+    padding-right: 4px;
+}
+
+#dossier-accordion {
+    margin-top: 10px !important;
+}
+
+/* Receiver — tighter spacing so all stations fit in viewport */
+#receiver-panel .freq-display {
+    font-size: 28px !important;
+    padding: 10px 16px !important;
+    margin: 4px 0 !important;
+    letter-spacing: 3px !important;
+}
+
+#receiver-panel #freq-slider {
+    margin-top: 4px !important;
+}
+
+#receiver-panel .monologue-box {
+    font-size: 15px !important;
+    line-height: 1.5 !important;
+    padding: 14px 16px !important;
+    min-height: 70px !important;
+    max-height: 160px !important;
+    overflow-y: auto !important;
+    margin: 10px 0 !important;
+}
+
+#receiver-panel .static-text {
+    padding: 14px !important;
+    font-size: 13px !important;
+}
+
+/* Compact emotion bars for side-by-side layout */
+#emotions .emotion-grid {
+    grid-template-columns: 64px 1fr 32px !important;
+    gap: 4px !important;
+    font-size: 10px !important;
+    margin-bottom: 3px !important;
+}
+
+#emotions .emotion-bar-bg {
+    height: 6px !important;
+}
+
+/* Compact actions panel */
+#actions {
+    font-size: 11px !important;
+}
+
+#actions > div > div {
+    margin-bottom: 5px !important;
+    line-height: 1.4 !important;
+}
+
+/* Bottom stage spacing */
+#bottom-stage {
+    margin-top: 14px !important;
+}
+
+/* Wider viewport: keep main stage tall and aligned to fit one screen */
+@media (min-width: 1100px) {
+    #map-panel,
+    #receiver-panel {
+        min-height: calc(100vh - 320px);
+        max-height: calc(100vh - 200px);
+    }
+    /* Map shrinks if the column is short, but never disappears */
+    #town-map,
+    #town-map .town-map-wrapper,
+    #town-map .town-map-bg {
+        max-height: calc(100vh - 620px) !important;
+        min-height: 280px !important;
+    }
+}
+
+/* Narrower viewport: let columns wrap naturally and remove forced heights */
+@media (max-width: 1099px) {
+    #main-stage {
+        flex-wrap: wrap !important;
+    }
+    #map-panel,
+    #receiver-panel {
+        min-height: auto !important;
+    }
+    #town-map,
+    #town-map .town-map-wrapper,
+    #town-map .town-map-bg {
+        max-height: 320px !important;
+    }
+}
 """