feat: Initial project structure for WebTriviasMulti

- Backend: FastAPI + Python-SocketIO + SQLAlchemy
  - Models for categories, questions, game sessions, events
  - AI services for answer validation and question generation (Claude)
  - Room management with Redis
  - Game logic with stealing mechanics
  - Admin API for question management

- Frontend: React + Vite + TypeScript + Tailwind
  - 5 visual themes (DRRR, Retro, Minimal, RGB, Anime 90s)
  - Real-time game with Socket.IO
  - Achievement system
  - Replay functionality
  - Sound effects per theme

- Docker Compose for deployment
- Design documentation

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/src/themes/ThemeProvider.tsx

@@ -0,0 +1,65 @@
+import { useEffect, type ReactNode } from 'react'
+import { useThemeStore, themes } from '../stores/themeStore'
+
+interface ThemeProviderProps {
+  children: ReactNode
+}
+
+export function ThemeProvider({ children }: ThemeProviderProps) {
+  const { currentTheme } = useThemeStore()
+  const theme = themes[currentTheme]
+
+  useEffect(() => {
+    // Apply CSS variables
+    const root = document.documentElement
+    root.style.setProperty('--color-bg', theme.colors.bg)
+    root.style.setProperty('--color-primary', theme.colors.primary)
+    root.style.setProperty('--color-secondary', theme.colors.secondary)
+    root.style.setProperty('--color-accent', theme.colors.accent)
+    root.style.setProperty('--color-text', theme.colors.text)
+    root.style.setProperty('--color-text-muted', theme.colors.textMuted)
+    root.style.setProperty('--font-heading', theme.fonts.heading)
+    root.style.setProperty('--font-body', theme.fonts.body)
+
+    // Apply body background
+    document.body.style.backgroundColor = theme.colors.bg
+    document.body.style.color = theme.colors.text
+
+    // Add theme class to body
+    document.body.className = `theme-${currentTheme}`
+  }, [currentTheme, theme])
+
+  return <>{children}</>
+}
+
+// Theme-aware component wrapper
+export function useThemeStyles() {
+  const { currentTheme, getThemeConfig } = useThemeStore()
+  const config = getThemeConfig()
+
+  return {
+    theme: currentTheme,
+    config,
+    styles: {
+      // Background styles
+      bgPrimary: { backgroundColor: config.colors.bg },
+      bgSecondary: { backgroundColor: config.colors.primary + '20' },
+
+      // Text styles
+      textPrimary: { color: config.colors.text },
+      textSecondary: { color: config.colors.textMuted },
+      textAccent: { color: config.colors.primary },
+
+      // Border styles
+      borderPrimary: { borderColor: config.colors.primary },
+      borderSecondary: { borderColor: config.colors.secondary },
+
+      // Effect classes
+      glowEffect: config.effects.glow ? 'text-shadow-neon' : '',
+      scanlineEffect: config.effects.scanlines ? 'crt-scanlines' : '',
+      glitchEffect: config.effects.glitch ? 'glitch-text' : '',
+      sparkleEffect: config.effects.sparkles ? 'sparkle' : '',
+      rgbEffect: config.effects.rgbShift ? 'animate-rgb-shift' : '',
+    },
+  }
+}