docs(mockups): add the UI/systems bible (11 screens + README)

High-fidelity HTML/CSS/JS design references for the tactical-CRPG direction —
title, character creation, character sheet, inventory, world map, quest log,
shop, pause/settings, dialogue, combat HUD, main exploration window. README is
the handoff spec (visual system, per-screen state models, Godot translation
notes). Not production code — the source of truth for the game's look + systems.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

mockups/README.md

@@ -0,0 +1,210 @@
+# Handoff: Code of Conquest — Game UI
+
+## Overview
+**Code of Conquest** is a single-player, **top-down / isometric, turn-based RPG** in a gritty high-fantasy world ("The Margreave"). The party is the player character plus **AI-controlled companions** (NPCs); the story is delivered turn-by-turn by a **"Dungeon Master" (DM)** narrator, in the spirit of a tabletop D&D session. Target platform: **Godot 4.7**. Target render resolution: **1920×1080** (16:9).
+
+This bundle contains **11 UI screens** designed as a single, consistent visual system. They are meant to be translated into **Godot 4.7 scenes** (Control-node UI).
+
+**Tone — read this first.** The whole game is written and styled to be **"gritty, not grim."** The reference is Batman/DC comics, *not* Warhammer and *not* Care Bears. People get hangovers, wounds get infected, people curse and bleed — but it is not nihilistic. All placeholder copy in these files reflects that tone and can be reused or rewritten in the same voice. Recurring tagline: *"The world has real problems, and it does not care about you."*
+
+---
+
+## About the Design Files
+The files here are **design references authored in HTML/CSS/JS** — high-fidelity prototypes showing the intended look, layout, and behavior. **They are not production code to ship.** The task is to **recreate each screen as a Godot 4.7 scene** using Godot's own UI system (Control nodes, Theme resources, `TextureRect`/`NinePatchRect`, `Label`/`RichTextLabel`, `Container` nodes) and to port the interaction logic to **GDScript**. Where these mocks use placeholder boxes (dashed rectangles labeled "PORTRAIT", "KEY ART", "ISOMETRIC WORLD VIEW", etc.), those are **art slots** to be filled with real game art.
+
+### How the files are built (and how to view them)
+Each screen is a **`.dc.html` component**: an HTML file with a template plus a small JavaScript logic class (a React-like `Component` with `state` + a `renderVals()` method). They depend on the runtime **`support.js`** included in this folder. To preview a screen, serve this folder over a local static server (e.g. `python3 -m http.server`) and open the `.dc.html` file — opening via `file://` may not load `support.js`.
+
+**You do not need to run them to implement them.** Each `.dc.html` is readable as plain source:
+- The **template** section = the markup + inline styles (all styling is inline; there are no external stylesheets). This gives you exact layout, sizes, and colors.
+- The **`class Component extends DCLogic` / `renderVals()`** section = the **state model and interaction logic** (initiative order, point-buy math, shop economy, dialogue tree, etc.). Port this logic to GDScript.
+
+### Fidelity
+**High-fidelity.** Colors, typography, spacing, and interactions are final-intent. Recreate the UI faithfully, then swap placeholder art boxes for real assets. One exception: **`Main Window + Wireframes.dc.html`** contains *both* the hi-fi main HUD (top, labeled option "2a") *and* four earlier low-fi wireframe explorations (below it) kept for context — build from **2a**.
+
+---
+
+## Global Design System
+
+### Canvas
+- Every screen is a fixed **1920×1080** stage. Design for a 16:9 reference resolution and anchor/scale from there.
+- Overlays (Pause Menu) dim + blur the scene behind them.
+
+### The core layout motif — "Dark Bay + Parchment"
+Almost every screen is a **two-panel split**:
+- **Dark "bay"** (left on most screens; right on Dialogue/Shop): a textured near-black panel for portraits, the world/battlefield, a merchant, or an NPC. Built from a **diagonal stripe** `repeating-linear-gradient(135deg, #26221c 0, #26221c 16px, #221e18 16px, #221e18 32px)` plus a **radial vignette** overlay `radial-gradient(120% 70% at 50% 38%, transparent 32–45%, rgba(0,0,0,.5–.62) 100%)`.
+- **Parchment "sheet/journal/page"** (the content side): vertical gradient `linear-gradient(180deg, #ece2ca, #e4d8bd)`, with content cards in `#f1e8d2` bordered `#bfa878`.
+- The two panels are divided by a **4px `#1a1512` border** (`border-left`).
+
+Keep this split and these two textures consistent — it's the game's UI identity.
+
+### Color tokens (exact hex)
+**Backgrounds / dark**
+- Near-black stage: `#0a0806`, `#0f0d0b`
+- Dark bay stripe: `#26221c` / `#221e18` (also seen `#201a14`/`#1a150f`, `#211d17`/`#1d1914`)
+- Dark translucent panels: `rgba(18,15,11,.7)`, `rgba(14,11,9,.85)`, `rgba(10,8,6,.9)`
+- Dark borders (light→dark): `#6b6152`, `#5a5348`, `#4a4238`, `#3a352e`, `#1a1512`
+
+**Parchment**
+- Sheet gradient: `#ece2ca` → `#e4d8bd`; log/page variants `#e7dcc4`→`#ddd0b2`, `#ece2ca`→`#e4d8bd`
+- Cards: `#f1e8d2`; darker insets `#e6d9b8`, `#e4d6b6`, `#d9c9a2`, `#d3c39a`
+- Parchment borders: `#bfa878`, `#cbb684`, `#a99464`, `#8f7a4a`
+- Ink text: headings `#3a2f1c` / `#4a3520`, body `#4a3f2c`, muted `#6a5a3a` / `#7a684a`, labels `#5a4326`
+- Parchment gold-ink accents: `#8f6a2a`, `#8a7748`, `#a9885a`
+
+**Text on dark**
+- Bone/cream (primary): `#e8d9b6`, `#e8ddc8`, `#f0e6d0`, `#f4e6cf`
+- Secondary: `#c9bda3`, `#d8ccb2`
+- Muted mono: `#9a8f78`, `#8a7f6c`, `#7a7060`, `#5a5040`
+
+**Accent hues (all deliberately muted / desaturated for grit)**
+- **Blood red** (primary CTA, danger, selection, enemies): `#8f3a34` (core), `#a5423a`, `#7a2f29`, `#b8524a`, `#a5442e`, `#6f2620`
+- **Gold / brass** (highlights, currency, primary-stat, "current turn"): `#a9843f`, `#c8963f`, `#8f6a2a`, `#a5772a`, `#c9a45a`, `#d9b46a`
+- **Steel blue-teal** (allies, mana): `#5f8a9a`, `#4f7ab8`, `#243f6f`, `#9caccb`
+- **Green** (stamina, success, "cleared"): `#5f8a4f`, `#8f9a4f`, `#7a9a5a`, `#2f7a4a`
+
+**Stat bars**
+- HP: `linear-gradient(90deg, #b8524a, #8f3a34)` on track `#2a251f` border `#4a4238`
+- MP: `linear-gradient(90deg, #4f7ab8, #243f6f)`
+- Stamina: `#8f9a4f`
+
+**Rarity (items)** — colored 3px bar at the bottom of each item tile + used for item-name text:
+- common `#8a8378` · uncommon `#5f8a4f` · rare `#4f7ab8` · epic `#8a5fb8` · legendary `#c8963f`
+
+### Typography
+Three families, used consistently:
+1. **Georgia** (serif) — headings, the logo (bold up to 116px), and all **narrative/DM/flavor body text** (often *italic*). This is the "prose" voice.
+2. **Architects Daughter** (Google Font, handwritten) — accent display type: nameplates, big stat numbers, section flourishes, DM-header labels, hand-inked feel. Load it, or substitute a comparable hand-drawn font in Godot.
+3. **Monospace** (`ui-monospace`/system mono) — all **UI chrome**: labels, keybinds, numeric readouts, tags/chips. Usually **UPPERCASE** with `letter-spacing` `0.06–0.24em`.
+- Plain **system-ui sans** is used for button labels and item names.
+
+### Reusable patterns (build these as shared Godot components/Theme styles)
+- **Item tile**: rounded square, 2px rarity-colored border on filled slots, a short mono glyph/abbreviation centered (placeholder for an icon), a 3px rarity bar near the bottom, optional `×N` stack count. Empty slots are dashed/recessed.
+- **Selection states**: red (`#8f3a34`) ring + a small mono tag (`CHOSEN` / `◎ TARGET`) for the player's pick; **gold** (`#8f6a2a`/`#c8963f`) ring + `PRIMARY` tag for system-highlighted things.
+- **Tag/chip**: mono uppercase, ~10–11px, colored text + matching 1px border + faint tinted background; semantic color (red = aggressive/danger, gold = pay/faith/primary, grey = neutral/locked).
+- **Tabs**: pill buttons; active = solid `#8f3a34` bg with cream text; inactive = `#efe6cf`/dark with muted text + `#cbb684` border.
+- **Primary button (CTA)**: `linear-gradient(180deg, #a5423a, #7a2f29)`, `#8f3a34` border, cream text, `box-shadow: 0 4px 16px rgba(143,58,52,.35)`; hover brightens to `#b8524a`/`#8f3a34`.
+- **Danger/"FAILED"/"COMBAT" stamps**: 4px colored border, heavy mono uppercase, rotated ~ -6° to -11°, ~72% opacity.
+- **Art-slot placeholder**: dashed `#5a5348` or `#4a4238` border, a stripe fill, and a centered mono caption naming what art goes there.
+
+---
+
+## Screens / Views
+
+> For each screen: read the `.dc.html` template for exact pixel values and the `Component` class for the state model. Summaries below cover purpose, layout, key components, interactions, and state.
+
+### 1. Title Screen — `Title Screen.dc.html`
+- **Purpose:** Main menu / first impression.
+- **Layout:** Full-bleed atmospheric background; left-aligned content column (`padding: 0 120px`) vertically centered.
+- **Components:** Background = warm-to-black radial `radial-gradient(120% 90% at 70% 20%, #2a2018, #160f0a 45%, #0a0806)` + a faint diagonal-stripe key-art placeholder + an off-screen fire glow (`radial-gradient` bottom, animated opacity) + heavy vignette + **drifting ember particles** (10 small colored dots, `@keyframes ember` rising 460px over 7–11s with fade). Logo: kicker "A DARK FANTASY RPG" (mono, `letter-spacing:.42em`, `#a9843f`), title **"CODE OF CONQUEST"** (Georgia 800, 116px, `#e8ddc8`, two lines), a gold rule, and the tagline (Architects Daughter, 20px, `#b0a488`). Menu list below.
+- **Interactions / state:** `state.sel` (index). Menu items: New Game, Continue (with save-info subline "CHAPTER II · VEXCCA · 14:22:07"), Load Game, Settings, Credits, Quit. A gold ◆ marker shows on the selected item (opacity toggle); selected item text brightens to `#f0e6d0`; hover brightens any item. Footer: version "v0.4.1 · BUILT IN GODOT 4.7 · © 2026" (left) and a `[↑ ↓] CHOOSE  [↵] ENTER` hint (right).
+
+### 2. Character Creation — `Character Creation.dc.html`
+- **Purpose:** Build a character before play.
+- **Layout:** Dark portrait bay (left, 660px) + parchment character sheet (right, 1260px).
+- **Left (bay):** "WHO WILL YOU BE?" label, a tall **model art slot** with ‹ › rotate arrows, a live **nameplate** (`displayName` in Architects Daughter + "`RACE · CLASS`"), and a **"THE DM SIZES YOU UP"** parchment inset showing a live gritty **origin blurb**.
+- **Right (sheet):** Header; **RACE** (4 selectable cards: Human / Elf / Dwarf / Beastfolk, each with a gritty one-liner + trait); **CALLING** (5 cards: Sellsword / Cutpurse / Hedge-Mage / Bonesetter / Trapper, each tagged with its primary stat); **ABILITY SCORES**; footer with a **NAME** text field + "ENTER THE WORLD" CTA.
+- **Stats (important, game-specific):** Six stats exist — **STR · DEX · CON · FTH (Faith) · MAG (Magic) · LCK (Luck)** — but only **five are visible**. **LCK is hidden from the player entirely**: it is rolled silently in the background (kept in state, never rendered — no number, no bar, no row); the player only ever "feels" it through opening-scene prose. Do not surface LCK anywhere in the UI.
+  - Each visible stat is **rolled to a base via 3d6** (die/formula is flagged `TUNABLE` in the logic — treat as configurable). The rolled value is a **hard floor**.
+  - There is a shared **+3 spend-up pool**, **additive only**: a `+`-only stepper per row, a "points left" counter, **no minus button**. A green `+N` badge shows points added to a row.
+  - The selected **class's primary stat** is highlighted (gold ring + `PRIMARY` tag): Sellsword→STR, Cutpurse→DEX, Hedge-Mage→MAG, Bonesetter→FTH, Trapper→DEX.
+  - A **⟳ re-roll** re-rolls all floors (including hidden LCK) and clears spent points.
+- **State:** `race`, `cls`, `rolled{STR..LCK}`, `spent{5 visible}`, `name`. Selecting race/class updates highlight + the origin blurb + nameplate. See `renderVals()` for the point-buy guards.
+
+### 3. Character Sheet — `Character Sheet.dc.html`
+- **Purpose:** Persistent character overview (opened in-game with **C**).
+- **Layout:** Dark portrait bay (left, 560px) + parchment sheet (right, 1360px, three columns).
+- **Left:** portrait slot, nameplate, **XP bar**, **HP/MP** vitals, and prominent **condition badges** (e.g. "⚠ Infected bite — left arm", "Hungover").
+- **Right, col A:** **ATTRIBUTES** (modifier-forward: big signed modifier + small score; 5 visible stats, LCK still hidden) and **SAVING THROWS** (proficiency ● / ○ dots + signed value).
+- **Right, col B:** **"IN A FIGHT"** derived-stat grid (Armor, Initiative, Speed, Carry, Melee, Ranged, Spell DC, Death Saves) and a two-column **SKILLS** list (proficiency dot + ability tag + value).
+- **Right, col C:** **TALENTS** (name + description cards), **AFFLICTIONS** (gritty, color-coded by severity red `#8f3a34` / amber `#a5772a`), and a **"THE DM'S NOTES"** bio (italic, dashed-border parchment).
+- **State:** mostly static display; `renderVals()` computes ability modifiers `floor((score-10)/2)` and skill/save values from a `+2` proficiency bonus. Example character: Vexcca, human Sellsword, lvl 4.
+
+### 4. Inventory — `Inventory.dc.html`
+- **Purpose:** Equipment + carried items (opened with **I**).
+- **Layout:** Dark paper-doll (left, 620px) + parchment "Satchel" (right, 1300px).
+- **Left:** a central model slot with **12 equipment slots** positioned around it (head, amulet, chest, cloak, gloves, belt, mainhand, offhand, ring×2, legs, boots); filled slots show a rarity bar; a derived stat strip (Armor / Damage / HP / MP).
+- **Right:** header with **gold** and an **encumbrance bar** (fills amber→red via `weightColor`), **category tabs** (All / Weapons / Armor / Consumables / Misc) that filter live, a **12×5 item grid**, and an **item detail card** at the bottom.
+- **Interactions / state:** `sel` (selected item id), `tab`. Clicking any grid item or equipped slot selects it → detail card updates (rarity-colored name, type, stat lines, flavor, weight/value, and context actions Equip / Use / Drop shown conditionally). Tabs filter the grid. Item data (name, cat, rarity, glyph, weight, value, stats, flavor) is in the `items()` map — reuse it as seed data.
+
+### 5. World Map — `World Map.dc.html`
+- **Purpose:** Region travel (opened with **M**).
+- **Layout:** Parchment map (left, flex) + dark location-detail panel (right, 560px).
+- **Map:** header ("The Margreave" + subtitle), a **legend**, the map surface (radial parchment; **terrain illustration is an art slot**), a **compass** and **scale bar**. On it: **location markers** — settlements = circles, dungeons/ruins = diamonds, hostile = red, uncharted = grey **fog "?" markers**; the current town **pulses**. **Roads** are dashed SVG `<line>`s between locations; a **red planned-route line** runs from the current location to the selected one.
+- **Detail panel:** selected location's type + status tag, a **danger rating (☠)**, gritty description, any **quests here**, and travel time + a "SET OUT ▸" CTA (or "You are here" at the current node).
+- **Interactions / state:** `sel` (location id). Clicking a *discovered* marker selects it (uncharted markers are non-interactive). Locations carry `x,y` (0–100 %), `status` (current/hostile/discovered/undiscovered), `danger` (0–4), `desc`, `quests[]`. Travel time is computed from map distance. Marker/road projection math is in `renderVals()`.
+
+### 6. Quest Log — `Quest Log.dc.html`
+- **Purpose:** Track quests (opened with **J**).
+- **Layout:** Dark journal (left, 620px) + parchment "open page" (right, 1300px).
+- **Left:** **tabs with counts** (Active / Completed / Failed) and a scrollable quest list — each entry shows type color (main = gold, side = green, bounty = red), location, progress (`2/4`), and a ★ on the tracked quest.
+- **Right:** selected quest's type/giver/location, a DM-voice brief, an **objectives checklist** (done items struck through; the active one flagged `CURRENT`), and an **"ON COMPLETION"** rewards row (gold / XP / item). **Track (★/☆)** + Abandon for active quests; completed/failed quests get a rotated **COMPLETED / FAILED stamp**.
+- **State:** `sel`, `tab`, `tracked`. Switching tab auto-selects the first quest in it. Quest data (type, status, giver, loc, desc, objectives[{text,done}], rewards) is in `questData()`.
+
+### 7. Shop — `Shop.dc.html`
+- **Purpose:** Buy/sell with a fence.
+- **Layout:** Parchment wares (left, 1180px) + dark merchant panel (right, 740px).
+- **Left:** header with **your purse** + **the merchant's coin**, **Buy/Sell tabs**, and item rows (rarity tile, name/type, stock-or-owned qty, price).
+- **Right:** merchant "Grud Ninefingers" (portrait slot + a **reaction line** that changes as you deal), the selected item's detail, the deal price, and a BUY/SELL CTA.
+- **Interactions / state (a real economy loop):** `mode` (buy/sell), `sel`, `gold`, `merchantGold`, `stock{}`, `owned{}`, `msg`. **Buy** deducts your gold, moves one unit from stock→owned, adds to merchant coin. **Sell** pays you ~40% of value, moves item owned→stock, deducts merchant coin. The CTA **disables with a gritty reason** when you're broke, the merchant is tapped out, an item is sold out, or worthless (value 0). Buy price = item value; sell price = `round(value*0.4)`.
+
+### 8. Pause Menu / Settings — `Pause Menu.dc.html`
+- **Purpose:** In-game pause + settings (overlay).
+- **Layout:** The scene is **dimmed + blurred** (`rgba(8,6,4,.72)` + `backdrop-filter: blur(2px)`); a centered **1560×920 ornate-framed panel** (8px `#1a1512` border + inner 1.5px `#a9843f` hairline). Left rail (dark, 400px) + right settings (parchment).
+- **Left rail:** "Paused", chapter, action buttons (Resume [primary] / Save Game / Load Game / Quit to Title), and footer status (playtime, last autosave, a permadeath warning).
+- **Right:** **SETTINGS** with four tabs — **Gameplay / Video / Audio / Controls** — each rendering a list of controls.
+- **Controls (fully interactive):** custom **toggle switches**, native **range sliders** (styled — thumb `#8f6a2a`, track `#cbb684`), native **selects**, and **keybind rows** (key-cap chips). Gameplay: difficulty select, permadeath/gore/tutorial toggles, narration-speed slider, autosave select. Video: window mode/resolution selects, brightness slider, VSync/motion-blur/damage-flash toggles. Audio: master/music/effects/ambience sliders + subtitles toggle. Controls: keybinds (WASD, E, LMB, ↵, I, C, J, M) + mouse-sensitivity slider + invert-Y toggle. Note the keybinds here are the canonical in-game key map.
+- **State:** `tab` + a `s{}` settings object. Controls are generated per tab in `renderVals()` (`slider`/`toggle`/`select`/`keybind` helpers) — a good template for a data-driven settings menu in Godot.
+
+### 9. Dialogue / Conversation — `Dialogue.dc.html`
+- **Purpose:** Branching NPC conversation.
+- **Layout:** Dimmed scene; NPC side (left, 640px) + parchment conversation (right, flex).
+- **Left:** NPC portrait slot, nameplate (Grud the fence), and a **live disposition meter** (Hostile → Wary → Neutral → Warming, color-shifting bar).
+- **Right:** speaker label, a DM-voice **narration beat** (italic), the NPC's **spoken line** (Georgia 34px, in “curly quotes”), and a numbered **response list**.
+- **Choices:** each response can carry a **skill/approach tag chip** (`INTIMIDATE · STR`, `HAGGLE · DEX`, `FAITH`, `PAY ◈40` — colored red/gold/grey) and can be **gated/disabled** (🔒 with a requirement note).
+- **Interactions / state:** `node` (current dialogue node), `disp` (0–100 disposition). Selecting a response navigates a real **dialogue tree** (`nodes()`), applies a disposition delta (`dd`), and can dead-end into a **COMBAT** stamp or a clean exit; terminal nodes offer to restart. Port `nodes()` as your dialogue-graph data.
+
+### 10. Combat HUD / Turn Tracker — `Combat HUD.dc.html`
+- **Purpose:** The turn-based fight screen. **The player controls only their own character; the DM resolves the AI companions' and enemies' turns.**
+- **Layout (flex column):** top **turn tracker** ribbon → middle row (left party+log, center battlefield, right enemies) → bottom command bar.
+- **Turn tracker:** every combatant in **initiative order** with mini HP; the active unit is lifted + pulsing (`@keyframes cturn`); downed units marked ✕; color-coded (gold = you, teal = AI party, red = enemies) + a **ROUND** counter.
+- **Center — isometric battle board:** a **7×6 diamond-tile grid** (CSS `clip-path` diamonds, iso projection `x=(c-r)*44, y=(c+r)*23`) with **unit tokens** on tiles (colored disc + initial + ground shadow + HP bar). Live with state: active unit's tile outlines **gold** and its token pulses; on your turn reachable tiles tint **teal (move range, Manhattan ≤2)**; the targeted enemy's tile outlines red and its token gets a **dashed red reticle**; dead units grey out; a VICTORY/DEFEAT stamp overlays on end. This is the placeholder for the real isometric battlefield — token positions come from `POS()`.
+- **Left:** "YOUR PARTY · AI" companion cards (HP) + a parchment **DM combat log** (newest first).
+- **Right:** **ENEMIES** list — click to **target** (selected gets a red border + `◎ TARGET`).
+- **Bottom:** active-hero panel (portrait, HP, **action-economy pips**: Action ● / Bonus ● / Move) + **ability bar** (Falchion Slash, Reckless Swing, Shield Bash, Second Wind, Bile Bomb — each tagged ACTION/BONUS with a keybind) + the **turn-action button** (End Turn on your turn; "RESOLVE {name} ▸" on an AI turn).
+- **Interactions / state:** `hp{}` per unit, `turnPos` (index into initiative order), `round`, `target`, `used{action,bonus}`, `over` (null/victory/defeat), `log[]`. On your turn: select an enemy, then use abilities (each spends its Action/Bonus, rolls damage from the ability's range, applies to target or heals self, logs a DM line); **End Turn** advances initiative (resetting your economy when it returns to you). On an AI turn: **Resolve** plays out that unit's action (enemies hit your side, allies hit enemies) with a narrated log line, then advances. Combat ends at all-enemies-down (victory) or player-down (defeat). Unit stats (init, max HP, AC, glyph) are in `base()`; abilities in `abilityDefs()`. **This state machine is the spec for your GDScript turn manager.**
+
+### 11. Main Window + Wireframes — `Main Window + Wireframes.dc.html`
+- **Purpose:** The core exploration HUD (the "tabletop split" main game screen). **Build from option "2a" at the top** — the four items below it are earlier low-fi wireframes kept only for context.
+- **2a layout:** isometric world view (left, ~1180px) + a permanent **narration "book"** (right, ~740px) where the DM tells the story turn-by-turn with inline response choices.
+- **World side:** a **turn-order rail** (initiative portraits, active ringed gold, downed ✕), a **minimap**, a **slide-in system dock** (Inventory / Character / Quest Log / Spellbook / World Map / Party — toggled by a gold tab, animates in/out), and a bottom command bar: **HP/MP bars + gold**, a **quick-select consumables** row (drawn from inventory), and an **End Turn** button.
+- **Book side (parchment):** "THE DUNGEON MASTER" header, narration paragraphs, an action-result callout, numbered response choices, and a free-text **"describe your own action"** line (reinforcing the tabletop feel).
+- **State:** `dockOpen` (the system dock slide toggle). The rest is layout.
+
+---
+
+## Godot 4.7 Translation Notes
+- **Resolution:** author scenes at 1920×1080; set the project's stretch mode to `canvas_items` with a 1920×1080 reference and `keep` aspect (or `expand`) so the fixed layouts scale cleanly.
+- **Palette + type → Theme:** put the color tokens and the three font families into a shared **`Theme`** resource with named `StyleBox`es for the recurring pieces (parchment card, dark panel, primary button, tab active/inactive, item tile, tag/chip). Every screen pulls from it — that's what keeps the look consistent.
+- **Panels/containers:** the two-panel splits map to `HBoxContainer`/`HSplitContainer`; stat/skill/ability grids to `GridContainer`; lists to `VBoxContainer` (+ `ScrollContainer`). Use `MarginContainer` for the paddings noted in the templates.
+- **Textures:** parchment gradient, dark stripe, and vignette are best baked as texture assets (or `NinePatchRect` + a shader) rather than reproduced as many gradient nodes. Art slots (portraits, key art, terrain, isometric world/battlefield) become `TextureRect`/`SubViewport`.
+- **Narrative text:** use `RichTextLabel` for DM narration / quest briefs / dialogue lines (supports the italic + inline colored callouts).
+- **Logic → GDScript:** the `Component` classes are the behavior spec. The highest-value ports: the **combat turn manager** (Combat HUD), the **dialogue graph** (Dialogue `nodes()`), the **shop economy** (Shop), and **point-buy character creation** (with the hidden-LCK rule). Reuse the seed data maps (items, quests, locations, units, abilities) as starting `Resource`s / dictionaries.
+- **Fonts:** "Architects Daughter" (Google Fonts, OFL) and Georgia — bundle equivalents; if Georgia is unavailable, substitute a comparable serif and keep weights/sizes.
+
+## Assets
+No real art is included — all imagery is **placeholder art slots** (dashed boxes with captions naming what belongs there): character portraits/models, world/battlefield isometric renders, the world-map terrain illustration, key art, item/ability icons (currently short mono glyphs like `FAL`, `SLV`, `RNG`), and NPC/merchant mugshots. Icons are represented by 2–4-letter abbreviations to be replaced with real icon assets. Fonts: Architects Daughter (Google Fonts) + Georgia (system serif).
+
+## Files
+- `Title Screen.dc.html`
+- `Character Creation.dc.html`
+- `Character Sheet.dc.html`
+- `Inventory.dc.html`
+- `World Map.dc.html`
+- `Quest Log.dc.html`
+- `Shop.dc.html`
+- `Pause Menu.dc.html`
+- `Dialogue.dc.html`
+- `Combat HUD.dc.html`
+- `Main Window + Wireframes.dc.html` (build from option **2a**)
+- `support.js` — runtime required only to *preview* the `.dc.html` files in a browser; not needed for the Godot implementation.