Daily Challenge #9 : The "Steady Hand" Maze 🖱️

It is February 21st. Today, we are testing your users' patience and your CSS precision. Your mission is to build a maze that punishes the slightest mistake—without a single line of script.

The Mission

Create a winding path from a "Start" zone to a "Finish" zone. If the user's mouse touches the "walls" (the background), they lose and have to start over.

The Rules 🚫

1. NO JavaScript Allowed : You cannot use mouseover events or coordinate checking via script.
2. Pure CSS/HTML only : Use the power of the :hover pseudo-class.
3. The Penalty : If the mouse leaves the path, use a large "Game Over" overlay that covers the maze and only disappears when they hover back over the "Start" button.

The Goal 🏆

The maze should be challenging but fair. When they successfully reach the "Finish" area, reveal a hidden prize or a victory message.

Pro Tip : Use a large z-index on your "Game Over" div. When the user hovers over the background (the walls), change the display or opacity of that div to block the whole screen!

---

How to enter

Drop your CodePen or GitHub Repo in the comments!

• Bonus Points : If the maze moves or "shakes" while the user is trying to navigate it.
• Extra Credit : If you add "Checkpoints" using the checkbox hack so they don't have to restart from the very beginning.

Have fun!