Connect 4 Game

Build an engaging Connect 4 game using HTML5, CSS3, and JavaScript. Create a realistic game board with a 7x6 grid (7 columns, 6 rows) featuring smooth disc-dropping animations with physics-based movement. Implement two-player local mode with alternating turns between red and yellow players. Add single-player mode with AI opponent offering multiple difficulty levels: Easy (random valid moves), Medium (basic pattern recognition and blocking), Hard (minimax algorithm with alpha-beta pruning looking several moves ahead), and Expert (advanced minimax with optimized heuristics). Implement comprehensive win detection checking all possible four-in-a-row combinations horizontally, vertically, and diagonally, with animated highlighting of the winning combination. Add draw detection when the board is completely filled. Include column preview showing where the disc will land when hovering over a column. Implement an interactive column selection with visual feedback on hover. Add smooth CSS animations for disc dropping with realistic gravity effect and slight bounce on landing. Create a score tracking system that persists across multiple games. Include visual turn indicators clearly showing which player's turn it is. Add game controls including reset/new game button, undo move option, and game mode selector. Implement sound effects for disc dropping, landing, winning, and game events. Add celebratory animations with confetti or particle effects when a player wins. Create a responsive design that adapts beautifully to all screen sizes. Include keyboard controls for column selection (arrow keys + enter/space to drop). Add game statistics showing wins for each player, total games, and longest winning streaks. Implement theme customization allowing different board colors and disc designs. Add animation speed controls for faster or slower-paced games. Include a replay system to review the last game move by move. Make the interface polished and professional with smooth transitions throughout.