Add playable Powergrid tutorials and city income reference

[coyotte508]

Powergrid now has seven playable tutorials using the ordinary viewer and real engine: auctions, resources, connecting cities, income, replacing plants, Steps 2/3, and final scoring. Learners use the normal board controls, with scripted opponents, short questions, saved progress, rewind/replay and next-chapter navigation.

The city track also shows total income for each number of powered cities, with a compact portrait layout. House tooltips identify their owner. The unread-chat shortcut moves above overlapping game buttons when the layout changes.

Implementation

• Expose powergrid.launchTutorial alongside powergrid.launch in the same JS/CSS bundle, using @boardgamers/protocol 0.3.3.
• Keep tutorial actions deterministic and engine-validated; render only the learner's filtered state. Highlight the city requested by a lesson.
• Add local preview and chapter-manifest commands, documentation, and tutorial tests to CI.
• Viewer-only change: no engine changes or release. Chapter metadata still needs to be configured on the BGS game version when this is published.

Screenshots

Desktop: connecting cities

Income reference

Houses mark cities built; the lower row gives total income for the number actually powered.

Mobile: collecting income

Validation

• Eight tutorial tests: legal walkthroughs, saved-state replay, rewind/restart, rejected actions, resource conservation and hidden information.
• All seven chapters completed through the browser at 1280px and 390px, including refresh and navigation.
• 27 existing viewer unit tests and normal viewer/chat browser checks at 390px and 1400px.
• Viewer production build, TypeScript check, repository-wide Prettier check and git diff --check pass.
• No new ESLint errors; the 14 existing template-indentation/quote errors in Game.vue and Map.vue are unchanged.

[goldjohn6]

Pushed three small changes on top — happy to drop any of them.

Houses on the city track. The income row shortens the cells, and at the old 6px column / 3px row offsets two players on the same number overlapped by half; five or six at the start of a game read as one blob. They're now bottom-aligned in the cell, growing upward from the income strip so the number above stays legible, a house-width apart — and five or six sharing go three wide rather than three tall, since a third row starts at the top of the cell and hides the number completely.

Two pre-existing ones that the new track made visible:

• .modal was z-index: 1 under the sticky .statusBar at 10. Modals open at 10vh and the bar is a fixed 40px, so below roughly 400px of viewport height — a phone held sideways — the bar landed across the dialog's own header and covered the close button, leaving no way out of the dialog. Modals now sit above it and the bar dims behind the overlay.
• The payment table counted to citiesToEndGame, which stops one column short of the number that ends the game — and a player can finish holding more than that, having built in the same phase as whoever triggered it. It now renders the whole table, so it agrees with the new track.

Checked against master with #154 merged: it auto-merges cleanly, sendMove keeps both sides, and the engine, tutorial and viewer unit suites all pass on the merged tree.

For what it's worth on the UI question — I like it. The income row is genuinely useful, and the two-row portrait track is a big improvement on what that track became at phone width.