# UX / UI

The game has no world to explore, so the UI *is* the world. Backdrops, scene navigation, and the rhythm of card reveals carry the experience.

**Visual style:** pixel art world (palette-locked, dithered) + HD vector chrome (frames, buttons, system text). See [09-art-style.md](09-art-style.md) for the rules of mixing the two.

## Inventory: three tiers of presentation

See [09-art-style.md](09-art-style.md) for size-consistency rules across cards.

Different items deserve different treatments. Cards are precious; raw materials are not.

| Tier | What | Treatment | Example |
|---|---|---|---|
| **Stackable raw** | Gathered materials, ingredients | Simple list row: icon + name + quantity | "Moonpetal × 47", "Iron Ore × 112" |
| **Stackable refined** | Components, intermediate crafts where two of same quality are interchangeable | Simple list row, separated by quality band | "Refined Moonsilver Ingot (Fine) × 4" |
| **Unique instances** | Final assemblies — weapons, potions, jewelry, gear | Full card with composed art, maker mark, history | Your specific Lapis-Infused Moonsilver Falchion #a7f3 |

**Rule:** if two items are interchangeable, they stack. If they have identity, they get a card.

Stackable inventories use Stardew/Terraria-style lists — fast to scan, low visual noise. Card inventories use the full composed-card treatment from [07-item-cards.md](07-item-cards.md).

## The Vault — three tabs

Vault is tabbed, uniform grid (no Diablo multi-cell). Equipment is meant to flow *through* the vault — craft → equip or sell — not pile up. Stockpile is the working materials store.

### Tab 1 — Equipment
- Card thumbnails in uniform grid (~12-20 visible at once)
- Quality border color per thumbnail; foil shimmer for Masterwork+; overlay icon for Legendary
- "EQUIPPED ON {minion}" tag on cards currently worn
- Tap thumbnail → full card showcase view + actions (Equip / Unequip / List for Sale / Move to Wall of Masterworks)
- Filter chips: All · Weapons · Armor · Jewelry · Tools · Consumables · Equipped · Available
- Sort: Recent / Quality / Value / Type
- Bulk action: "Sell all Common+ unequipped" sweep for veteran cleanup

### Tab 2 — Stockpile
- Stackable list rows: icon · name · quantity · quality band stripe
- Filter chips: All · Raw · Refined · Components · Consumables · Trophies (categories per [14-materials.md](14-materials.md))
- Sort: Quantity / Recent / A-Z
- Search bar (vital once the catalog grows)
- Tap row → "what recipes use this" + "where does this drop" jump-to-zone affordance
- Compact, functional — no card flourishes here

### Tab 3 — Special
- Recipe scrolls, lore relics, patron tokens, bestiary trophies, one-off curiosities
- Card-ish presentation but smaller; some are stackable (3 unread Foreman's Tally scrolls = stack of 3)
- Tap to use / read / apply

## Navigation

Two top-level surfaces:

### Guild Hall (home screen)
First-person view of the great room from your fixed vantage at the head of the hall — you're the guildmaster, this is your space. Scene-as-navigation: tap zones in the scene to enter subviews.

- Forge corner → Forge workshop
- Alchemy nook → Alchemy Table
- Roster wall (portraits hanging) → Roster screen
- Patron board (bulletin in the foyer) → Patron Court
- Library doorway → Library
- Strongroom → Vault / inventory
- Front door → World Map (expeditions)

### World Map
Parchment-style fantasy map. Regions are illustrated nodes; tap a region to see its zones; tap a zone to plan an expedition. Used exclusively for expedition planning.

### Persistent bottom tab bar
Always-available shortcuts (Hall · Roster · Workshops · Map · Patrons · Library) so repeat actions don't require navigating the scene every time. Scene navigation = atmosphere; tab bar = speed. Animal Crossing Pocket Camp / Hay Day pattern.

## Backdrops

In a no-exploration game, backdrops are the world. Each one is high-impact and sells location-feeling. Production-time AI generation on the workstation is the right tool.

All backdrops are **first-person POV** (the player is the camera) except the World Map, which is top-down parchment because a map is a literal artifact. See [09-art-style.md](09-art-style.md) for the perspective discipline.

| Surface | Backdrop |
|---|---|
| Guild Hall home | First-person great room view, possibly time-of-day variants (morning, evening, night) |
| Each workshop (~9) | First-person at the station — you see the anvil / cauldron / loom from your POV |
| Each region (~10) | First-person vista per region, what an expedition member sees standing there |
| Each zone (~50) | Either own backdrop or shared region backdrop with different lighting/mood |
| Patron Court | First-person at the bulletin board / hall |
| Library | First-person at your desk / bookshelves |
| World Map | Top-down parchment map with illustrated region nodes — the one perspective exception |

Atmospheric foreground animation (drifting smoke, bubbling liquid, embers, rain, fog) sells scenes without 3D. Looping particle layers + shader effects on top of the backdrop.

## Card view modes

Even card-tier inventory needs two modes:
- **Compact grid** — small card thumbnails, fast scrolling. For practical use ("pick a sword to equip Theodric").
- **Showcase view** — full card, one or two at a time, gallery feel. For lingering / admiration.

## Wall of Masterworks

A Library room displaying the player's best-ever crafts as a permanent wall of cards. Pure cosmetic, deeply motivating. Possibly with social-share integration later (export wall as image).

## The "alive hall" idea

First-person POV solves this elegantly. Minions are *across* from you at their stations — you see them working in your shared space, not as figures shuffling around an isometric diorama. Theodric tending the forge across from you, Mira reading at the library table, Theora distilling something at the alchemy bench.

Implementation: layered minion sprite overlays at named backdrop anchor points (per [09-art-style.md](09-art-style.md) anchor + depth-scale system). The minion's current portrait + class costume + equipped legendary gear all compose into the in-scene sprite. Each anchor has an animation track (subtle work loop — hammer swing, page turn, stir) that loops independently.

When a minion isn't currently assigned to a station, the anchor is empty.

## Notification surface

The "always something shiny" rule manifests in the Guild Hall as small glowing badges on scene elements:
- Workshop with completed craft → glow + badge on that workshop
- Returned expedition → glow + badge on the front door
- New applicant → glow + badge on the recruiting desk
- Patron deadline approaching → glow + badge on the patron board
- Guild Rank-up available → glow + badge on the central altar/hearth

The home screen at any moment communicates: "here are the ripe things to tap." Players check in for 5 minutes and can immediately see what needs attention.

## Crafting screen specifically

When you tap into a workshop, the workshop backdrop fills the screen. Foreground UI is:
- Station-specific composition area with ingredient slots (3–6)
- Ingredient palette / picker (filtered to applicable materials in your stockpile)
- Assigned engineer slot (drag a minion in to assist)
- Recipe book toggle (see known recipes for this station, hint glyphs for partially known)
- Craft button (with quality forecast: "expected Fine ± 1 band")
- Active craft queue (parallel slots — count grows with Guild Rank)

The craft completion moment plays on this screen: the assembled card lifts out of the station, the shader sweep plays, the quality reveals. Then it lands in the player's vault.

## Open questions

- Time-of-day cycling for the Guild Hall backdrop: real time vs. game time vs. fixed sequence?
- Inventory grid model — uniform 1-cell cards (mobile-friendly) vs. Diablo-style multi-cell items (era-true, more tactile).
- ~~Onboarding flow~~ — designed in [12-onboarding.md](12-onboarding.md).
- Notifications outside the app (push) — too easy to nag, but vital for AFK expeditions. Opt-in by category?
- Settings, accessibility, color-blind palettes for quality bands and effect auras (red curse vs. green poison must be distinguishable).