feat(cardshed): a11y + responsive + juice (M12+M13+M14)

[w7-mgfcode]

Sub-issue of #146. PRP 3 milestones M12 (Accessibility) + M13 (Responsive layouts) + M14 (Juice — animations). Reference: `PRPs/cardshed-03-experience-prp.md` lines 953–1013.

Scope

M12 — A11y

• Colorblind-safe suit display (symbol overlay in addition to color)
• Keyboard nav (tab + space submits)
• Screen-reader labels: `aria-label="King of Spades"` etc.
• Touch tap targets ≥44×44px
• Focus-trap during phase transitions; no tabindex on opponent cards

M13 — Responsive

• CSS grid for Table
• Mobile portrait stacks opponents top / hand bottom
• Use `dvh` (not `vh`) for viewport on mobile
• No horizontal scrollbar in any viewport except the hand

M14 — Juice (framer-motion)

• Deal animation (cards fly clockwise, <1500ms total — capped)
• Discard animation (beaten cards fade + slide)
• Trump reveal (bottom card flips at `TrumpSelected` event)
• Full-defence flourish, deck-exhaustion warning, victory flourish
• Every animation has skip-on-click

Acceptance

• `Skill: webapp-testing` → axe-core runs → 0 critical violations
• Keyboard-only: tab + space sends an attack
• Pinch-zoom not blocked
• `agent-browser` viewport matrix: 1440×900 / 768×1024 / 375×667 / 667×375 — all usable
• No horizontal scroll in any viewport except hand
• Deal animation total < 1500ms
• No `anime.js` or `gsap` — framer-motion only
• Animations don't block input — every animation skip-on-click
• `agent-browser` captures `dogfood-output//{m12-a11y,m13-responsive,m14-juice}/`

Common bugs (from PRP 3)

• Color-only suit indication — fail for colorblind users
• Tabindex on opponent Cards leaking hand into tab order
• Using `vh` instead of `dvh` on mobile (URL bar changes layout)
• Mixing UI frameworks (anime.js / GSAP forbidden — framer-motion only)
• Animations blocking input

Complexity

M + M + M = ~13–14 hours.