Redesign top bar with dedicated round badge and centered combatant name

Replace the combined "Round N — Name" string with a three-zone flex layout:
left (prev button + R{n} pill badge), center (prominent combatant name with
truncation), right (action buttons + next button). Adds 13 unit tests
covering all user stories including layout robustness and empty state.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

specs/034-topbar-redesign/quickstart.md

@@ -0,0 +1,39 @@
+# Quickstart: Redesign Top Bar with Dedicated Round and Turn Fields
+
+**Feature**: 034-topbar-redesign | **Date**: 2026-03-11
+
+## What This Feature Does
+
+Replaces the combined "Round 1 — Conjurer" status display in the encounter top bar with two separate visual elements: a compact round badge/pill on the left and a prominent centered combatant name. The layout shifts from a simple centered text to a structured left-center-right arrangement.
+
+## Files to Modify
+
+| File | Change |
+|------|--------|
+| `apps/web/src/components/turn-navigation.tsx` | Refactor layout to three-zone flex structure with round badge and centered name |
+
+## Files to Create
+
+| File | Purpose |
+|------|---------|
+| `apps/web/src/components/__tests__/turn-navigation.test.tsx` | Unit tests for the refactored component |
+
+## How to Verify
+
+```bash
+# Run the dev server and view an active encounter
+pnpm --filter web dev
+
+# Run tests
+pnpm vitest run apps/web/src/components/__tests__/turn-navigation.test.tsx
+
+# Run full quality gate
+pnpm check
+```
+
+## Key Design Decisions
+
+1. **"R1" format** for the round badge (compact, saves space)
+2. **CSS truncation** for long combatant names (no JS needed)
+3. **Three-zone flexbox** layout: left (prev + badge), center (name), right (actions + next)
+4. **No prop changes** — all data already available in `Encounter` type