Tug of War Math Battle

Create a single HTML file called "Tug of War Math". Use Tailwind CSS for the styling and Vanilla JavaScript for the logic.

The Layout:

- Split the screen in two: Blue team on the left, Red team on the right.
- Each team has a large input field, a numeric keypad (0-9, delete, enter), and sees a math problem (addition or subtraction).
- In the middle is a vertical Canvas bar.

The Game Mechanics:

- Draw a rope in the middle of the Canvas with animated stick figures pulling on either side.
- If Team Blue gets a problem right, the rope pulls to the left.
- If Team Red gets a problem right, the rope pulls to the right.
- If the team gets it wrong, the team receives a penalty (the red screen shakes) and the rope moves in the opposite direction.
- The team that pulls the opponent over the center line wins the round. Display a large "Winner" overlay.

Requirements:

- It should look modern and child-friendly (use attractive fonts and colors).
- Everything must be contained in a single HTML file (CSS, JS, HTML) so it works directly in the browser without installation.