Jewel Sorter

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.

Recreate a browser-based 2D educational sorting puzzle titled “Jewel Sorter.” Use a cheerful, polished child-friendly visual style: a centered responsive shell on a soft pastel gradient background, rounded cream-white cards with thick white borders, large soft shadows, navy text, lavender/blue and pink accents, and a rounded Trebuchet-style font. The opening home/objectives screen is a large rounded card with decorative translucent pink circle in the upper-left and mint circle in the lower-right. Show a large multicolor “Jewel Sorter ✦” logo, the tagline “A bright little sorting adventure! Learn how to notice what makes objects alike and different.”, three white objective cards labeled Color / Shape / Size with illustrative icons and short explanations, and a prominent pill-shaped gradient button “Start Level 1 →”. Include compact controls for profiles and settings where visible in the source UI.

The main game is a sequence of 20 unlocked-by-completion levels. The level-select screen is a rounded card with a scrollable grid of level cards. Each card shows its level number, sorting mode, visual theme, variant, jewel count, and either ready/unlocked or locked status; only the first level starts unlocked, and completing the current level unlocks the next one. Clicking an unlocked level opens a preview panel with the level title, instruction, theme/variant chips, jewel count, a small animated sample of clue marks, and a “Start Level N →” button. Provide profiles with an avatar/name, separate unlocked progress per profile, and settings for music on/off, volume, and resetting progress.

Each playable level has a top bar containing a level pill (for example “LEVEL 1 · COLOR MATCH”), score, music toggle, volume slider/value, home button, and a theme badge. Below it show a centered instruction such as “Sort by color.” and a challenge panel only on special challenge levels. Show a progress label like “0 / 9” and a horizontal progress bar. The central playfield is a large rounded rectangle with a lightly translucent background and dashed border. Place 9 jewels on early levels, 12 on middle levels, and 15 on levels 15–20, distributed around the upper and middle playfield. At the bottom place three large, evenly spaced sorting boxes, each about 27% wide and 29% of the field height, with rounded corners and thick colored borders/background tints. The three box colors are the consistent jewel palette: coral/pink-red, blue/periwinkle, and golden yellow; jewel colors use the same palette and include glossy highlights, white edging, drop shadows, and a white clue mark/text centered on each jewel. The box itself displays a prominent clue icon, an uppercase label, and “Match this clue.” Ensure the box color scheme visually matches the corresponding jewel color/type and keeps the sorting targets easy to identify.

The core mechanic is pointer/touch drag-and-drop. The player presses a jewel, drags it around the playfield, and releases it inside the box matching the active rule. While dragging, the jewel follows the pointer, the box under the pointer gets a hover lift/highlight, and the likely matching box briefly receives a pulsing hint glow. If dropped outside a box, return the jewel to its original position and show a red feedback message such as “Drop the jewel inside one of the boxes.” If dropped in the wrong box, return it, increment mistakes on challenge levels, reset the streak, play a low/error tone, and show “Try again. Look carefully and use the clue evidence.” If correct, mark the jewel as placed, move it into the center of the target box, play a success tone, increment placed and score, animate it with a short pop, and show green feedback: “Correct! You matched the sorting rule. ✨” Correctly placed jewels cannot be dragged again. When every jewel is sorted, show the result screen.

Implement these 20 level rules and labels exactly: 1 COLOR MATCH — sort by color, values RED/BLUE/YELLOW; 2 SHAPE SORT — CIRCLE/SQUARE/TRIANGLE; 3 SIZE SORT — SMALL/MEDIUM/LARGE; 4 COUNT THE STARS — 1 STAR/2 STARS/3 STARS; 5 PATTERN PARADE — PLAIN/STRIPED/DOTTED; 6 SHINE CHECK — MATTE/SHINY/GLOW; 7 DIRECTION DASH — LEFT/UP/RIGHT; 8 MATERIAL MATCH — GLASS/METAL/WOOD; 9 WARM OR COOL — WARM/COOL/NEUTRAL; 10 EDGE DETECTIVE — ROUND/POINTED/WAVY; 11 SOUND SORT — QUIET/TAP/RING; 12 JEWEL HABITATS — SKY/SEA/GARDEN; 13 TEXTURE TOUCH — SMOOTH/BUMPY/SOFT; 14 SEQUENCE STEP — FIRST/MIDDLE/LAST; 15 MOOD MATCH — HAPPY/CALM/EXCITED; 16 LIGHT LEVELS — DIM/BRIGHT/SPARKLE; 17 NUMBER NEIGHBORS — ONE/TWO/THREE; 18 NATURE SORT — LEAF/FLOWER/STONE; 19 TRAVEL SORT — LAND/WATER/AIR; 20 MASTER MIX — COLOR/SHAPE/SIZE, with instruction to use clue symbols to decide the active classification rule. Each jewel should have a target value for the active level rule, plus visible color, geometric shape, size, and a mark/clue. Use deterministic level layouts with the target values cycling through the three categories, and vary jewel color, shape, and size so the relevant evidence is visible. Geometric jewel bodies are normally rotated diamond-like squares with glossy inset highlights; support circle, square, and triangle silhouettes, and small/medium/large scaling.

Use these visual themes cyclically across the levels: Color Garden, Shape Workshop, Size Safari, Rainbow Harbor, and Crystal Cove. Give each theme a distinct pastel gradient background; use a dark navy/teal/purple version for Crystal Cove/night levels (especially the 10th and 20th visual treatment), with light text and translucent dark playfield. The level instruction should also mention the theme. Levels 17–20 include challenge panels: Level 17 “Rule Detective” with “Infer the rule from the box clues before you sort.” and a 45-second timer; Level 18 “Streak Strategist” with “Plan carefully: build a 3-correct streak for bonus points.” and no timer; Level 19 “Evidence Checker” with “Compare the jewel mark, color, and size before choosing.” and a 50-second timer; Level 20 “Master Mix” with “Use the clue symbols to decide which classification rule is active.” and a 60-second timer. Challenge HUD shows remaining seconds when applicable, current streak, and mistakes. Challenge scoring awards 1 point normally plus up to a 2-point streak bonus; ordinary levels award one point per correct jewel. Timer expiration should warn the player but allow them to finish.

After completion, show a centered celebratory result card with a floating trophy, “Level complete!” messaging, final numeric score, three-star rating: ★★★ for a perfect score, ★★☆ for at least 70%, otherwise ★☆☆, and a message stating how many jewels were sorted and by which criterion. For challenge levels also report the final streak and mistake count. Include a button to proceed to the next level, or indicate that all levels are complete at Level 20, plus a button to return to level select. Add gentle synthesized theme music and feedback tones that can be toggled and volume-controlled, but keep the game fully playable without audio. Make the layout responsive for desktop and mobile, retaining large touch targets and drag interaction.