Redesign start screen with interactive demo board preview

[Copilot]

Replaces the static "How to Play" rules card on the landing page with a three-section interactive experience that lets users feel the game before committing.

Layout changes

• Hero + Why grid: Title/tagline retained; adds 3-feature grid (Find People / Live Drama / Win the Show) with colour-coded ornate cards and staggered entrance animations
• Interactive demo board (new): Full 5×5 bingo grid inside the same gold ornate frame used in-game — 4 squares pre-marked, free space at centre, 20 clickable squares. No HTMX; pure CSS/JS
• CTA section (new): "Ready for the Full Show?" squad-messaging card above the existing BEGIN THE SHOW button (hx-post="/start" unchanged)

Demo board click handler

function toggleDemo(btn) {
    const isMarked = btn.classList.toggle('demo-sq--marked');
    if (isMarked) {
        btn.style.animation = 'none';
        void btn.offsetHeight; // force reflow to restart CSS animation
        btn.style.animation = 'staggered-scale-up 0.35s cubic-bezier(0.34,1.56,0.64,1), sparkle-pulse 1.5s ease-in-out 0.35s infinite';
    } else {
        btn.style.animation = '';
    }
}

Marked squares use the same magenta→teal gradient + sparkle-pulse animation as the real game board. Free space and unmarked squares mirror the actual bingo_board.html styling.

Test updates

test_home_contains_start_screen and test_reset_returns_start_screen updated: "How to Play" assertions replaced with "Experience the Magic" and "LIVE PREVIEW".

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• releases.astral.sh
  • Triggering command: /home/REDACTED/.local/bin/uv uv run ruff check . (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

Redesign the start_screen.html component with an Interactive Demo Preview variation. This allows visitors to experience actual gameplay before committing.

Key Characteristics:

• Interactive Preview: Include a live mini bingo board (5x5 grid) that visitors can interact with before starting a real game
• Guided Demo: Show demo board with same aesthetic (marked squares, free space styling) but with a special intro mode
• Quick Gameplay Feel: Let users click a few squares, see animations, experience the feel of the game
• Two-Step Flow: Landing page content → Demo board → "Play Full Game" button
• Content Structure: Hero + Why Section + Feature Highlights → Demo Board Preview → CTA

Implementation Details:

• Mini Board State: Create a read-only demo board (no backend API calls needed)
• Demo Questions: Show 5 simple sample questions on the board to demonstrate question variety
• Click Behavior: Demo squares respond with correct animations (sparkle, glow) but don't require matching with people
• Guidance Text: "Try clicking a few squares to see how it works" or similar prompt
• Conversion Play: After demo, strong CTA: "Ready for the full game? Gather your squad and tap BEGIN THE SHOW"

Design Approach:

• Keep theatrical 70s-80s Bollywood vibe but integrate demo board naturally into landing flow
• Board appears mid-page before final CTA, showing visual style expectations
• Demo board is responsive, same styling as actual game board

Technical Requirements:

• Demo board is static HTML/CSS (no game logic needed)
• Use existing square styling (gradients, borders, animations)
• Clicking adds/removes "marked" class to demonstrate mark animation
• No HTMX calls for demo board (pure CSS/HTML, optionally small JS for click handlers)
• Final CTA button still uses hx-post="/start" for real game

Content Requirements:

• Landing content: Hero + Why section (3 features) + Optional testimonial snippet
• Demo board: 5x5 grid with sample questions (generic or Bollywood-flavored)
• Demo prompt: "Experience the magic" or call-to-action encouraging interaction
• Final section: Strong CTA with gathered squad messaging

Trade-offs for This Variation:

• ✅ HIGHEST CONVERSION: Interactive demo makes hesitant users more confident
• ✅ EXPERIENTIAL: Visitors feel the game vibe before starting
• ✅ ENGAGEMENT: Active participation (clicking) vs passive viewing
• ✅ LOW FRICTION: Try before committing reduces uncertainty
• ❌ COMPLEXITY: Requires click handler logic (even if simple), more code
• ❌ MOBILE: Board needs careful responsive handling on small screens
• ❌ COGNITIVE LOAD: Demo adds another step before real game (slightly longer flow)

File to Update:

• app/templates/components/start_screen.html
• optionally: add minimal JavaScript for demo board click handlers