MEDIUM: Enhance Modal Polish - Add Close Button, Keyboard Support, Softer Animation

[nathanbangwa243]

Issue

Bingo victory modal lacks polish and accessibility. No dismiss mechanism beyond the "Keep Playing" button, animation is jarring, and no keyboard support.

Current State

<div class="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
  <div class="animate-[bounce_0.5s_ease-out]">
    🎉 BINGO!
    <button>Keep Playing</button>
  </div>
</div>

Issues

• No close (X) button for quick dismiss
• Overlay blocks all interaction until button clicked
• Bounce animation jarring on slower devices
• No Escape key support
• No backdrop click to dismiss
• Confetti animation opportunity missed

Recommended Implementation

• Add X close button (top-right corner)
• Implement backdrop click to dismiss (overlay click handler)
• Replace bounce with softer entrance animation (fade-in + scale)
• Add keyboard support: Escape key dismisses modal
• Consider confetti.js or CSS animation for celebration
• Ensure focus trapping (a11y best practice)

Animation Options

1. Fade + Scale: opacity: 0; transform: scale(0.9) → opacity: 1; scale(1) (300ms)
2. Slide Up + Fade: Subtle entrance from bottom
3. Keep Bounce: But at 1000ms (slower, less jarring)

Files to Update

• app/templates/components/bingo_modal.html (add close button, update animation)
• app/static/css/app.css (add new animation keyframes)
• app/templates/base.html (optional: add keyboard handler script)
• app/static/js/modal.js (new file for backdrop/keyboard logic, or use HTMX events)