Add student delight features: celebrations, sounds, animations, and background patterns

- Confetti + pop sound on lesson/assignment completion
- Done stamp animation (awaitable, shows below toast)
- Welcome toast on first login only (not back-navigation)
- Web Audio ding/buzz during spelling practice and flashcards
- Fanfare on all-day completion
- Score counter animate-up on practice/test results
- 3D flashcard flip animation (rotateY via CSS keyframes)
- Tab slide transition (Today/Courses/Spelling, directional)
- Staggered card entrance + time-of-day greeting on home screen
- Emoji wobble on kid card hover
- Word card green/red flash on correct/wrong spelling answer
- Combo streak celebration at milestones (3, 5, 7, 10 in a row)
- Random cheer messages for generic celebrations
- Button bounce on :active (scale + translateY)
- Progress bar smooth transition (0.5s ease-out)
- Background pattern picker: dots, stripes, grid, stars, bubbles
- bg_pattern persisted per-student via PATCH /api/students/:id/bg-pattern
- Theme switching preserves bg pattern class

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

public/index.html

@@ -24,6 +24,7 @@
       <div class="kid-topbar-actions">
         <button id="icon-picker-btn" class="theme-picker-btn" aria-label="Change my animal">🐾</button>
         <button id="theme-picker-btn" class="theme-picker-btn" aria-label="Pick my color">🎨</button>
+        <button id="bg-picker-btn" class="theme-picker-btn" aria-label="Pick my background">🖼️</button>
       </div>
     </div>
     <h1 id="kid-greeting"></h1>
@@ -39,6 +40,14 @@
       <button class="theme-dot theme-indigo" data-theme="indigo" title="Indigo"></button>
     </div>
     <div id="icon-grid" class="icon-grid" hidden></div>
+    <div id="bg-pattern-panel" class="bg-pattern-panel" hidden>
+      <button class="bg-pattern-btn active" data-pattern="none" title="Plain"></button>
+      <button class="bg-pattern-btn" data-pattern="dots" title="Dots"></button>
+      <button class="bg-pattern-btn" data-pattern="stripes" title="Stripes"></button>
+      <button class="bg-pattern-btn" data-pattern="grid" title="Grid"></button>
+      <button class="bg-pattern-btn" data-pattern="stars" title="Stars"></button>
+      <button class="bg-pattern-btn" data-pattern="bubbles" title="Bubbles"></button>
+    </div>
 
     <div class="kid-nav">
       <button class="nav-pill active" data-tab="today">📋 Today</button>