Mario Bros

Create a complete HTML file (including CSS and JavaScript inside <style> and <script> tags) for a simple 2D platform game.

**Game Concept:** The player controls a character that must navigate through a level, using platforms to jump, collect items, and avoid enemies. The goal is to collect all required items (e.g. 5 coins) to win the game.

**Requirements:**

1. **HTML Structure:**
- A <canvas> element for the game.
- A <div> for an initial instruction to the player (e.g. "Collect 5 items to win.").
- A <div> (hidden by default) that serves as a full-screen popup for the end screen/win screen.
- A <div> with buttons for touch controls (left, right, jump) for mobile devices.
2. **CSS Styling:**
- Basic body styles (no margin/padding, background color sky blue).

- Styles for the canvas.
- Styles for the instruction box (e.g. top right, semi-transparent background).
- Styles for the touch control buttons (e.g. centered at the bottom, round).
- Styles for the popup:
- Must cover the entire screen (position: fixed, width: 100%, height: 100%).
- An animated background (e.g. a slowly shifting gradient with festive colors).
- A centered content box (#popupContent) with rounded corners and a shadow.
- Use **placeholder text** within #popupContent (e.g. "Congratulations!", "Level Completed!", "You collected all items!"). **Do NOT use specific dates, times, locations or names.**
- CSS animations for festive effects within the popup when it is visible:
- **Floating balloons:** Create multiple <div> elements with the .balloon class via JavaScript when the popup appears. Style these with CSS as balloons (round/oval) with different bright colors and let them float up and down slowly and rotate slightly with @keyframes. Give them a random starting position and animation duration/delay.
- **Falling confetti:** Create multiple <div> elements with the class .confetti via JavaScript when the popup appears. Style these with CSS as small squares or rectangles with different bright colors. Let them fall from top to bottom and rotate with @keyframes. Give them a random horizontal starting position and animation duration/delay.
3. **JavaScript Logic:**
- **Canvas Rendering:** Use the 2D context of the canvas to draw the game.
- **Game Objects:** Define objects for player, platforms, coins (or items), and enemies.
- player: Must be able to move (left/right), jump (including double jump - maxJumps: 2), and is affected by gravity. Draw the player as a simple shape (e.g. rectangle or stick figure). **Do NOT use an external image for the player.**
- Platforms: Rectangular objects that the player can stand on. Must include both ground platforms (at the bottom) and floating platforms. Draw them as simple rectangles with a solid color or a simple texture/pattern drawn with canvas tools. **Do NOT use an external image.**
- Coins/Items: Small objects that the player can collect. Draw them as simple shapes (e.g. yellow circles). **Do NOT use an external image.** Keep track of which ones have been collected. There must be 5 items.
- Enemies: Objects that move back and forth on specific platforms. When touched by the player, the game will reset. Draw them as simple shapes (e.g. red squares). **Do NOT use an external image.**
- **Controls:**
- Respond to keyboard input (left/right arrow keys to move, space bar or up arrow to jump). - Respond to touch events on the on-screen buttons (map them to the movement/jump actions).
- **Physics & Collisions:**
- Implement gravity that pulls the player down.
- Detect collisions between player and platforms (to get up).
- Detect collisions between player and items (to collect and increase score).
- Detect collisions between player and enemies (to reset the game).
- Reset the game if the player falls off the screen.
- **Camera:** Implement a simple horizontal camera that follows the player, so the level can be wider than the screen.
- **Game Status:**
- Keep track of the score (number of items collected).
- gameOver or win state: When the score reaches 5, stop the game updates and show the win popup.
- Reset function: Reset the player position, score, and item status to the default values ​​in case of a game over (due to enemies or falling).
- **Background:** Draw a simple background on the canvas (e.g. sky blue color, a yellow circle for the sun, and some simple white shapes for clouds).
- **Game Loop:** Use requestAnimationFrame for a smooth animation loop that updates and draws the game.
- **Responsiveness:** Make sure the canvas adapts to the size of the browser window. If necessary, adjust platform positions etc. when resizing.

**Important:**

- All code (HTML, CSS, JavaScript) must be in a single .html file.
- **Do NOT use external image files (<img> tags or new Image().src = '...')**. Draw all game elements (player, platforms, items, enemies) directly on the canvas using canvas API functions (e.g. fillRect, arc, beginPath, lineTo, etc.).
- The win popup must contain the **placeholder text** as described above, and **NOT** the specific birthday invitation text from the example.
- Implement the balloon and confetti effects for the win popup using CSS and JavaScript.