Challenges

Create a complete Match-3 puzzle game (like Bejeweled) as a single self-contained HTML file.

REQUIRED FEATURES:
1. Canvas-based rendering with 8×8 grid board
2. 6 gem types, each with distinct color AND shape (circle, diamond, square, triangle, star, hexagon)
3. Gems are rendered as polished 3D-looking shapes with gradient and highlight
4. Controls: click/tap two adjacent gems to swap. If swap creates a match of 3+, gems are cleared. If no match, gems swap back with animation.
5. Match detection: 3+ consecutive same-type gems in a row OR column (can be horizontal or vertical)
6. Cascade/chain reactions: after gems are cleared and new ones fall in, check for new matches automatically
7. Gravity: gems above cleared spaces fall down to fill gaps with smooth animation
8. New gems spawn from top to fill empty spaces (also with drop animation)
9. Board starts with no initial matches (regenerate until match-free)
10. Score system:
    - 3-match: 50 points
    - 4-match: 150 points
    - 5-match: 300 points
    - Cascade multiplier: 2x for chain-2, 3x for chain-3, etc.
11. Timer mode OR moves mode: player has 60 seconds or 30 moves (show both, use whichever runs out first)
12. Special gems created by matching 4+:
    - 4-match: creates a striped gem (clears entire row or column when matched)
    - 5-match (L/T shape): creates a wrapped gem (explodes in 3×3 area)
    - 5-match (straight line): creates a hypercube (clears all gems of same color)
13. Hint system: highlight a valid swap with subtle pulse every 10 seconds of inactivity
14. HUD: score, time remaining / moves remaining, level number
15. Level progression: each 1000 points = new level, timer gets stricter (lose 5 seconds per level)
16. Start screen: "MATCH-3" title, "Click to play"
17. Game over: final score, "Time's up!" or "No moves left!", high score, "Click to play again"
18. Animations: swap (smooth interpolation), match (flash + particles + fade), cascade (sequential column drops), special gem activation (screen shake for hypercube)

AUDIO:
19. Web Audio API: gem swap (soft slide sound), match (ascending chime), cascade (higher-pitched chime each chain), special gem (powerful chord), game over

STYLING:
20. Jewel/gemstone aesthetic with rich colors
21. Dark background with subtle radial gradient
22. Board has a rounded-rect frame with bevel effect
23. Gems have specular highlights (white gradient overlay)

CODE:
24. Single HTML file, vanilla JS, Canvas 2D
25. requestAnimationFrame for animations, setInterval/Timeout for game timers
26. Grid represented as 2D array, Board class manages match-find, cascade, refill