🎹 Neon Tiles — Mary Had a Little Lamb

A neon-styled 4-lane rhythm game built around the first song most children ever learn — "Mary Had a Little Lamb" — the chart was transcribed directly from sheet music and runs through both verses of the 8-bar tune. Cyberpunk visuals with a cyan→magenta gradient palette, ambient drifting tiles on the start and game-over screens, and the Orbitron typeface remix the schoolyard standard for the synthwave era.

🎮 How to Play

• Tap / Click — Tap tiles on mobile, or click them with the mouse on desktop.
• Keyboard — Use A S D F for the four lanes (left → right).
• Hold notes — For taller tiles, keep the key/finger pressed until the tile clears.
• Burst tiles — Some tiles fire a quick two-note flourish from a single tap, capturing the song's 점4분 + 8분 swing.
• Pause — Space or P
• Mute / Unmute — M
• Quick start / restart — Press D while any overlay is showing.

✨ Features

🎵 Real Score, Real Pitch

• 8 measures played twice (16 measures total per cycle), transcribed directly from sheet music — both verses of "Mary had a little lamb / Its fleece was white as snow..." through to the final cadence.
• Every note plays at its actual pitch in G major across a tight 4-note pentatonic-feeling range (G4 / A4 / B4 / D5 — that's it, the entire song lives inside a 5-note window).
• Tempo is ♩=120 in 4/4 time, with each game beat = one 4분음표 (500 ms) — comfortable nursery-rhyme pulse with a clear quarter-note grid.

🎶 Sub-Slot Bursts on the Iconic Swing

• The song's rhythmic signature — "Ma-ry had a" (점4분 + 8분 + 4분) — is preserved as a sub-slot burst tile that fires both pitches at their correct rhythmic positions from a single tap.
• This pattern appears 4 times per cycle: m2 and m6 ("Mary had a" / "fleece was white as"), each played twice via the repeat.
• The original score's pickup anacrusis (a D5 8th leading into the first downbeat) has been converted to a rest so each pass starts cleanly on m2's B4 — no awkward partial-measure pickup.

🚀 Progressive Difficulty + Cycle Flash

• BPM increases by +12.5% per cycle (120 → 135 → 150 → 169...). The tight 4-note range means the chart stays readable even as the tempo climbs.
• Each cycle is also transposed up by a whole step (2 semitones), lifting Mary's pentatonic walk into ever-brighter territory.
• Cycle transition flash: every new cycle pops up a centered banner — CYCLE 2 / ♪ +2 · ⚡ +12% — with a scale-and-glow animation, so the moment you survive into harder territory feels earned.

💢 Visible Miss Feedback

• Tap on empty space, hit the wrong tile, release a hold too early, or let any tile fall off-screen — all trigger a red flash at the relevant tile (and a circle pulse at the tap point), held for 450 ms.
• Plays a dissonant low buzz with downward portamento so misses are clearly audible.
• The game ends after the miss display, giving you a clear "what just happened" beat.

🎨 Polished Neon Visuals

• Hand-tuned per-lane colors along a cyan → blue → purple → magenta gradient that matches the logo.
• Glowing tube borders, soft outer halos, and scanline textures only inside the active press zone so the tappable area is instantly readable on hold tiles.
• Ambient floating tiles drift continuously down behind both the start screen and the game-over screen.
• Animated "neon tile" START button that physically slides down the board into the game on press — no jarring screen transitions. Same treatment on the PLAY AGAIN button.
• Score-burst flash animation on every successful hit.

🧠 Smart Lane Distribution

• Lanes are picked dynamically rather than randomly: the algorithm avoids consecutive same-lane spawns and balances left vs. right side usage.

🎯 Forgiving Hold Timing

• Hold tiles only require 75% of the full duration — releasing slightly early still counts.
• The hold-progress fill uses a soft gradient fade at its top edge instead of a hard line, so there's no visible pass/fail boundary to fixate on.

🎼 Scoring

• 10 points per beat cleared, with bursts counted as a single tile.
• High score saved locally and shown on the start and game-over screens.

📱 Mobile-First Input

• Multi-touch support — different fingers on different lanes are tracked independently.
• Coordinate-based hit testing rather than lane-only, so taps register exactly where your finger lands.
• touch-action: none and user-scalable=no to prevent scrolling/zooming during play.
• Viewport sized in vw units (9:16 portrait) so it scales perfectly across phone screens.
• Mouse-up listener attached to window so releases register even if the cursor leaves the canvas.

🛠️ Tech Stack

• Pure HTML / CSS / JavaScript — zero dependencies, zero build step.
• HTML5 Canvas for the 360×640 game board with hand-rolled rounded-rectangle drawing and gradient fills.
• Web Audio API with `OscillatorNode