Color Ring Drop

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 portrait-oriented 3D arcade game titled "Color Ring Drop" called Color Ring Drop. Use a Three.js-style perspective scene rendered behind a transparent 2D canvas HUD. The camera is fixed front-facing, slightly perspective, with the playfield centered on a dark navy/black background and subtle fog. Add a sparse field of small blue-white glowing star particles behind the gameplay area, with very slow rotation. The overall visual style is polished neon arcade: glossy colored materials, soft emissive lighting, dark translucent rounded UI panels, white typography, and cyan highlights.

Core gameplay: a large circular ring is centered in the lower half of the screen, made from four separate glossy quarter-arc segments arranged as a circle with narrow gaps. The four segment colors are Pink/magenta (#ff4f8b), Cyan (#42d9ff), Gold/yellow (#ffcf40), and Lime/green (#78f05a). The ring rotates in 90-degree steps, with smooth easing toward the target rotation and a subtle scale/bounce whenever rotated. The player does not control the falling object; instead, they rotate the ring so that the segment at the very top aligns with the color of the falling ball when it reaches the ring. A dark circular center plate sits inside the ring, with a faint changing emissive tint based on the currently top-facing segment. Add a soft dark ring shadow behind/below the ring.

A colored sphere starts above the ring at approximately y=7.2 and continuously falls straight down along the center line toward the top of the ring. The sphere has the current random color from the four-color palette, matching emissive glossy shading, rotates as it falls, and has a translucent tapered white/color trail below/behind it. Add a thin expanding pulse torus around the falling ball that repeatedly expands and fades, tinted to the ball color. The ball reaches the ring threshold around y=-2.55. If its color equals the color of the ring segment currently at the top, count a successful match: increment score, update the best score in persistent local storage, briefly flash/bounce the scene and center plate, and emit a burst of roughly 22 small tinted sparkles from the ring center. Pause briefly (about 0.34 seconds) then respawn a new randomly colored ball at the top. Increase falling speed after each point, starting around 4.1 units/second and adding 0.2 per point, capped around 10.5; maintain a level value of 1 + floor(score/6), even though it need not be prominently shown.

If the ball reaches the ring and the top segment color does not match, immediately end the run. Stop normal falling/gameplay, preserve the score and best score, and show a centered dark translucent game-over overlay with the title "Miss!", "Final score: [number]", "Best score: [number]", and a bright cyan rounded rectangular "Restart" button. Tapping the restart button or pressing Space/Enter resets score, level, speed, rotation, and starts a new random ball. Store the best score under a persistent local-storage key equivalent to colorRingBest.

Controls: on touch/pointer input, a tap on the left half of the viewport rotates the ring one step in the positive/left direction; a tap on the right half rotates it one step in the opposite/right direction. Ignore rotation input during game over or the short respawn pause. Also support keyboard ArrowLeft or A for the left/positive step and ArrowRight or D for the right/negative step. The ring should visually rotate smoothly even though input is discrete. Do not add swipe controls or other gameplay systems.

HUD: render a portrait 1024x1792-style overlay scaled to the viewport. At the top, show large bold centered white text "Color Ring Drop" and below it the subtitle "Match the falling color to the top of the ring". Beneath are two dark translucent rounded cards, Score on the left and Best on the right, each with a small pale label and a large white number. Center below these show a bold label "Target: [ball color name]"; this indicates the color of the current falling ball, such as Target: Cyan. During the opening roughly 2.5 seconds, show a translucent cyan instructional panel reading "Left side = rotate left   •   Right side = rotate right". Near the bottom, show a dark rounded hint panel reading "Tap left/right to rotate" during play, or "Tap restart or press space" when game over. The HUD uses white/light-blue sans-serif text, subtle borders, rounded corners, and a slight dark gradient near the top for legibility. Keep the HUD fixed to the screen while the 3D world remains behind it.

Composition details visible in the play view: the pointer is a floating white/light-blue downward arrow above the ring, consisting of a narrow rectangular stem and a four-sided cone/diamond-like arrowhead. It gently bobs vertically and tilts slightly over time, pointing toward the ring. Put it around y=1.95, in front of the falling path. The ring is positioned around y=-2.6 and is large enough in portrait view that its upper colored arc dominates the lower-middle screen and its lower arcs extend toward the bottom edge. Use a perspective camera roughly at (0,1.5,16), looking toward the origin, with a 42-degree field of view. Use hemisphere and directional lighting, glossy standard materials with modest metalness/roughness, emissive color accents, ACES-like tone mapping, and a dark navy scene background (#08111f). Add a subtle overall vertical bob to the world, tiny sparkle particles on successful matches, and a brief ball squash/stretch flash on success. The game should be immediately playable, with a random ball color and the ring initially in its default orientation, and should faithfully preserve the simple one-miss arcade loop.