Improve Lolmix recommendation UI

[i4TsU]

Summary

• Reorganize the Lolmix analysis into a clearer, more scannable game plan with stronger recommendation hierarchy and progressive disclosure.
• Rank rune pages by Lolmix draft score while preserving win rate, pick rate, and sample size as supporting evidence.
• Replace the duplicate rune-tab treatment with a readable recommended-page and alternatives comparison, including encoded optimal rune pages.
• Improve phase navigation, mobile build rows, responsive behavior, and accessible interaction states.

Why

The existing UI could present statistically different rune pages as equally authoritative and selected legacy pages by raw win rate. In the real fixture, a 51.0% page on roughly 2K games visually outranked the stronger +2.3 draft-score page on roughly 167K games. Lolmix's score is the confidence-shrunk, lane-weighted recommendation signal, so the interface should treat it as the primary ranking while keeping the raw metrics visible for context.

Validation

• bun test — 34 passed
• TypeScript typecheck
• ESLint on the changed files
• Production Vite build
• Rendered QA with real legacy and encoded optimal-rune responses at desktop, tablet, and 390px mobile widths
• Keyboard phase navigation and expansion interactions
• Console-error and horizontal-overflow checks