Redesign Mastermind guesser screen: cramped layout, small touch targets, poor visual hierarchy

[ap0ught]

Issue

The Mastermind codebreaker/guessing screen is cramped and has poor UX:

• The color palette (6 circles) at the bottom right is squeezed into a 3×2 grid with tight spacing
• The draft guess code (4 pegs) and the "GUESS" button overlap visually with the history area
• Peg selection wraps at 4 pegs but the selection indicator (white circle) isn't clearly associated with the active position
• History area on the left only shows the last 7 guesses with small feedback text ("E# C#")
• The "YOUR GUESS" label and "YOUR SECRET" area compete for the same right-side space
• No visual distinction between "your turn to guess" vs "opponent is guessing" beyond text
• On the 320×240 CYD display, touch targets for the color circles are near the minimum usable size

Proposed redesign

• Move the color palette to a full-width horizontal bar at the bottom (6 colors × ~48px = 288px, fits with margins)
• Give the draft guess its own dedicated row above the palette with larger pegs
• Make the "GUESS" button full-width below the palette
• Expand history to use the full left column with larger feedback badges
• Add a clear "YOUR TURN" / "OPPONENT'S TURN" banner with color coding
• Increase touch targets to ≥44px for color selection

Acceptance criteria

• All touch targets ≥44×44px
• Color palette as horizontal bar at bottom
• Draft guess row visually separated from history
• GUESS button full-width, unmistakable
• History shows all 10 guesses (scroll if needed)
• Active-turn indicator impossible to miss
• Still fits 320×240 landscape