# 070 — Modern dialog and consistent design

## Design authority

The existing modern Millionaire card is the visual reference, not an opportunity to redesign the addon. Reuse its dark translucent surfaces, backdrop fade, cream focus, gold accents, semantic green/red, rounded textures, fonts, spacing, animation vocabulary, and D-pad behavior.

Verified generator baseline: card `(100, 60, 1720, 960)` in 1920x1080 skin coordinates; padding 56; main column width 1000; right panel `(1304, 112, 304, 744)` relative to the card; answer tiles 494x108, row Y values 624 and 748, horizontal gap 12, vertical gap 16. Answers and the right panel share bottom Y=856. Preserve these shared edges.

Tokens/textures currently live in `scripts/game_dialog/gen_modern_game.py`, including card/panel/button radii and colors. Extract shared primitives once into a small components module only when needed. The existing generator remains the single source for `DialogMilionarGameModern.xml`. **Never copy the generator into a Story generator or edit generated XML by hand.**

## Shared title card

- Add a two-option Milionář / Příběh selector inside the existing card, above the mode-specific facts/Start controls.
- Title, year/genre, artwork, main Start button, Rules, Settings, Change title, Back confirmation, and hint bar retain their current visual language.
- Story chips show chosen question count, three lives, and five chapters instead of nine questions, three lifelines, and one million.
- Millionaire retains its current chips and settings. Add no extra selection popup.
- Use localized mode labels and descriptions; the addon brand stays Milionář. During Story the game-specific heading identifies Příběh so it cannot look like a money quiz accidentally.
- Reuse space by adjusting the title-card arrangement minimally. Do not overlap selector, long title, chips or buttons; verify long-title cases.

## Story question screen

```text
same card / backdrop / header
+-------------------------------------------------------------+
| question N / total        [life] [life] [life] | chapter panel |
| [Narration: brief current situation]          | 1 Beginning   |
|                                              | 2 Development |
| Concrete plot question                       | 3 Turning pt. |
|                                              | 4 Climax      |
| [A: event/action] [B: event/action]            | 5 Ending      |
| [C: event/action] [D: event/action]            | scene progress|
+-------------------------------------------------------------+
```

Question geometry implemented using the existing grid:

- Metadata/lives on the main-column top line at Y=112.
- Narration card at Y=164, height 204, width 1000; reuse the existing textbox/autoscroll card treatment.
- Question at Y=392, height up to 172, width 1000.
- Existing answer rows at Y=624 and 748 unchanged.
- Existing right-panel bounds unchanged; five chapter rows replace the nine money rows.

The question/answer/right-panel layout has been captured in Kodi at 2560x1440 (evidence in `110`). Preserve shared margins/edges and readable fonts. The existing answer font stays unchanged; options are bounded to 30 characters. Narrow wrong/correct result cards use the existing `font27`; the narrator result card starts at Y=430 with height 250 and combines the reveal with the ending only on a win.

There are no lifeline controls or empty lifeline placeholders. Lives are status indicators, not buttons. Show filled/empty lives with shapes/icons plus a numeric/accessibility label; distinguish them without color alone. Reuse an appropriate existing icon; no new generated art is needed merely for this feature.

## Chapter panel

Five generic spoiler-free chapter names are visible from the start. No AI-generated future scene titles. Mark completed/current/future clearly with existing surfaces and focus-independent accents. Show current chapter scene progress (e.g. 2/3) and total scene progress.

Completion means canonical scenes traversed, not perfect answers. A chapter containing a mistake can still be completed. Checkpoints grant nothing; do not draw them as save/retry/reward controls. Keep the current/reached chapter visible through feedback and terminal screens.

## Feedback, completion, defeat, and errors

- Immediate local result: retain the selected answer identity, mark the correct answer green, and the selected wrong answer red when relevant. Use labels/icons as well as color.
- The feedback screen uses the same answer/result cards and displays the canonical reveal as narrator text. Continue is available immediately; no countdown, five-second delay, AI wait, or speech gate.
- Optional small highlight/transition animation must not delay reading or interaction. All relevant answer meanings remain visible; do not duplicate a screen-size grid just to show a flash.
- Story completion shows concise `ending`, correct/answered count, reached chapter and lives, with Play again / Change title / Home consistent with existing result buttons.
- Defeat shows current reveal and the same counters, but never the unreached ending/scenes.
- Loading/error/Back confirmation reuse current treatments. An error is not a loss. No fake percentage is shown during one opaque provider inference.
- Rules explain three lives, A–D, full-story progression, counts, and visual checkpoints; no leftover money/lifeline/moderator text.

## Property ownership

Use shared shell properties for mode, screen, title/art, settings/exit overlays and button readiness (`WCS.Game.*`). Story-specific content/counters live under `WCS.Story.*`, for example:

`Narration`, `Question`, `OptA`..`OptD`, `StateA`..`StateD`, `Reveal`, `Ending`, `Lives`, `AnsweredCount`, `CorrectCount`, `QuestionCount`, `SceneLabel`, `Chapter`, `Chapter.N.State`, `Chapter.N.Progress`, `YourLetter`, `YourText`, `RightLetter`, `RightText`, `Outcome`, `Error`.

The view returns every owned key each time, with empty values outside its valid screen. `Ending` is nonempty only after a win; reveal/right-answer fields are empty before evaluation. Mode switch/cleanup clears all owned Story and obsolete Millionaire keys. Do not reuse `LivesUsed` (Millionaire lifelines) for remaining lives.

Visibility conditions combine shared screen and mode so both layouts cannot be visible at once. Shared component helpers may accept an explicit property prefix/resolver and explicit navigation IDs; their default Millionaire output remains identical. Do not encode Story-specific lives or fields inside generic XML primitives.

## Focus and text fit

- Allocate selector/Story control IDs after inventorying the existing XML, `designs.py`, settings IDs and probe. Keep one authoritative mapping; do not guess collisions.
- A–D retains a 2x2 D-pad grid. Story answer navigation must not point to hidden Millionaire lifelines.
- Initial focus is a visible enabled action. Loading uses a valid existing focus trap/Back action; feedback focuses Continue; terminal/error focuses the primary recovery action.
- Back from setup returns normally. Back during a started/loading attempt uses the current confirmation style and retires workers on confirmation.
- Narration/reveal/ending use autoscroll and a reachable scrollbar when needed. Answer labels must remain readable and distinguishable without trimming their decisive words.
- Reuse `wcs/ui/text_fit.py` only for fonts it actually supports. Add a needed metric narrowly or use a measured fixture check; do not pretend its current `font32` metric covers `font32_title` automatically.

## Visual completion gate

After explicit GUI authorization, capture title selector in both modes, all Story screens, A–D focused/unfocused, lost lives, all five progress states, long text/title, missing art and error/exit states. Compare side-by-side with the current Millionaire baseline, and with unchanged Millionaire gameplay screens after extraction. Record paths/geometry/differences in the handoff. A headless property test is not pixel verification.