Interactive Liquid Sorting Puzzle game

Prompt

I need a web page built with HTML, CSS, and JavaScript that features a visually stunning and interactive liquid sorting puzzle. Here are the details: Overall Page Design: * Background: The page should have a dark, elegant, and stylish background. Use gradients or subtle textures to make it visually appealing, but not distracting from the puzzle. * Aesthetic: The overall design should be sleek, modern, and engaging. Aim for a high-quality feel. Puzzle Elements: * Erlenmeyer Flasks: There should be four Erlenmeyer flasks (also known as conical flasks) positioned in the center of the page. * Liquid Layers: Three of the flasks should be filled with three different randomly generated colors layered on top of each other. Colors should be vibrant and visually distinct. Ensure that color layers are visible and clearly distinguishable. The remaining flask should start empty. * Capacity: Each flask can hold a maximum of three color layers. No further liquid can be added beyond the third layer. Interactions: * Selection: When the user clicks on a flask, it should be highlighted visually to indicate it's selected (e.g., subtle glow, border, or slightly larger size). * Transfer: Once a source flask is selected, the user can click on a target flask. Then: * Animation: The source flask should smoothly tilt (like pouring) and its top color layer should animate smoothly (e.g., move in an arc) into the target flask on top of the existing colors inside. * Transfer Rule: The top color layer of the source flask should move to the top of the stack in the target flask. * Max Capacity: If a flask is already full (3 layers), a transfer to that flask should not occur. It could display a small error animation or message. Goal of the Puzzle: * The objective is to have each flask contain a single color. The colors can be any order but every single liquid in a single flask must have the same color. Game Logic: * Winning Condition: The puzzle is solved when each flask contains layers of only one color. * Winning Display: When solved, the page should display a celebratory message (e.g., "You Solved It!") with a festive and joyful animation (e.g., confetti, sparkles, or background color changes). Control Buttons: * Reset Button: Below the puzzle, add a reset button. When clicked, it should reload the puzzle with the initial (randomly generated) color combinations. * Shuffle Button: Add a shuffle button next to the reset button. When clicked, it should randomly generate a new set of colors and color combinations for the puzzle. Code Specifics: * HTML: The structure should be clean and semantic. * CSS: Use CSS to style all elements with a visually appealing design as described. Ensure responsiveness for different screen sizes. * JavaScript: Handle all interactive elements and game logic: * Flask selection and highlighting. * Animation of liquid transfer. * Transfer rules, maximum flask capacity, checking if the puzzle is solved. * The winning condition check, win animations, reset function, and shuffle function. * Keep code well-structured and commented for easy understanding. Important Notes: * Keep the design elegant and modern. * Animations should be smooth and fluid to enhance the user experience. * Prioritize code clarity and maintainability. * Ensure the puzzle is engaging and easy to understand. Provide me with the full HTML, CSS, and JavaScript code for this web page.

A system prompt was added to support web rendering