Skip to content

fix(ui): volume-select CSS targets wrong selectors (narrat emits p.dialog-choice) #54

Description

@wildcard

Context

PR #53 shipped splash + main-menu design. Volume-select boot picker styling was also drafted in v1-modern/src/game.css by the game-ui-artist subagent, but the selectors don't match narrat's actual DOM.

Problem

CSS targets .nrt-choice-button. Narrat actually renders:

<div class="dialog-choices">
  <p class="dialog-choice">
    <span class="choice-index">1.</span>
    <span class="choice-text">...</span>
  </p>
</div>

Result: volume-select falls back to narrat's default dialog-text rendering. Functional but unstyled — no cards, no borders, no thumbnails.

Fix

Retarget selectors to:

  • .dialog-choices (container)
  • p.dialog-choice (card)
  • .choice-index / .choice-text (children)

Optional enhancement: Vol. I = rose border (#E87966), Vol. II = teal (#4CC2BA), thumbnails from existing volume art.

Verify

Open preview, click New Game → volume_select appears. Cards should render with rose/teal borders, not plain dialog text.

Priority

P2 — cosmetic. Boot picker works; players can still choose a volume. Polish follow-up to PR #53.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions