Color Sort

Cinevva's analyzer read this game's design doc and its source, then wrote the brief below. "Make your own" hands it to the game creator as your opening message, so you start from a real spec rather than a one-line idea.

Create a mobile-first 2D portrait puzzle game titled “Color Sort.” The game should use a full-screen HTML canvas for the playfield, with a dark navy gradient background (#1a2242 at the top fading to #0d1020), rounded high-contrast UI, soft shadows, and bright candy-like liquid/color blocks. Support pointer/touch input and responsive resizing.

Flow and screens:
- Show a brief dark loading screen with a circular spinner and the COLOR SORT logo, then show the main menu.
- Main menu: centered large bold “COLOR SORT” logo with “SORT” (or its latter word) accented mint/teal, four colored brand dots (coral, mint, gold, violet), tagline “Sort the colors. Clear the tubes. Master every level.”, and full-width rounded buttons: Play, Level Select, and Sound: On/Off.
- Level Select: show “Choose a level,” a Back button, and a 4-column grid of 12 rounded level buttons. Levels beyond the persisted unlocked level are dimmed, disabled, and show a lock plus “Locked.” Unlocked levels show level number and labels: levels 1–4 “Warm up,” 5–8 “Tricky,” and 9–12 “Expert.” Persist unlocked progress and sound preference locally.
- Game screen: fixed top HUD with the COLOR SORT title at left, pills for “Level N” and “Moves N,” menu/home and reset buttons at right, and centered instruction text initially reading “Tap a tube, then tap another tube to pour.” Include a small toast notification system near the bottom for invalid actions.

Core puzzle:
- Generate levels 1–12. The number of colors is min(4 + floor((level-1)/2), 8), so early levels have 4 colors and later levels progressively use up to 8. Each color occurs exactly four times. Shuffle the 4-per-color collection deterministically from the level number, distribute it into one tube per color (four blocks per starting tube), then add exactly two empty tubes.
- Each tube has capacity 4. Display the stack vertically, with the bottom item visually at the bottom and the top item available to pour at the top.
- To make a move, tap a non-empty tube to select it; visibly outline it in white and update the message to “{color name} selected — choose a destination.” Tap another tube to pour. Tapping the selected tube again clears selection and says “Selection cleared.”
- A pour is legal only if source and destination differ, source is non-empty, destination has fewer than four blocks, and destination is empty or its top color matches the source top color. If illegal, do not change the puzzle; show “Match the top color or use an empty tube” in a toast. Ignore input during an active pour animation or after solving.
- On a legal move, pour the entire contiguous run of matching top-color blocks from the source, limited by destination capacity. Count it as one move, increment the Moves counter after the animation, and show “Poured N matching colors.” when multiple blocks moved, otherwise “Nice move.”
- Animate the source tube tilting slightly toward the destination and draw a curved stream plus falling droplets in the moved color for about 420 ms. Use a subtle dark shadow under tubes. Add light-colored shine strips to each block.
- The puzzle is solved when every tube is empty or contains exactly four blocks all of one color. Show a centered dark translucent overlay and rounded card stating “Level N cleared!”, “You solved it in N moves.”, and buttons for Next level (for levels before 12; on level 12 say “Play again,” returning to level 1) and Level select. Unlock the next level in local storage. Play a short celebratory ascending tone sequence on win.
- Reset restarts the current level with the same deterministic generated arrangement and zero moves. The home button returns to the menu.

Tube and art rendering:
- Center a horizontal row of tubes in the available play area, responsive to portrait and narrower widths. Use dark nearly-black tube bodies with rounded corners, thin translucent light borders, strong soft black shadows, and two empty tubes at the end. Scale tube width/height and spacing down if needed to fit the screen. Base tube size is approximately 68 by 238 pixels with an 18-pixel gap.
- Each tube’s inner area has four slots. Render rounded rectangular color blocks with rounded corners and a small translucent white highlight near each block’s upper-left. Use this palette and names: coral #ff5c7a, mint #48d7c0, gold #ffc857, violet #8c7bff, blue #55a7ff, orange #ff8e5e, purple #d86cff, lime #72df6d. The HUD and typography should be clean, bold, modern sans-serif, with white/light lavender text and mint accenting.
- The interaction should work equally with mouse/touch pointer coordinates over the canvas. Include short synthesized UI sounds: selection, pour, invalid move, reset/start, and victory; allow toggling sound off/on and persist that setting.

Keep the experience focused strictly on sorting colored blocks in tubes; do not add lives, timers, currency, power-ups, enemies, or other mechanics not described above.