Fusion Sandbox

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 playable browser game titled "Fusion Sandbox" with a dark, polished responsive UI and a physics-based object-fusion sandbox.

Layout and presentation:
- Use a full-viewport app with a fixed dark navy background and a top header about 72px high on desktop (64px on narrow mobile screens). The header has a rounded square gradient logo showing a melon emoji, the title "Fusion Sandbox", and subtitle "Drop anything. Fuse everything." on the left. On the right place a dark "Clear" button and an orange/yellow primary "Make chaos" button.
- Below the header, split the main area into a large interactive canvas world on the left and a dark palette sidebar about 214px wide on the right. On screens narrower than about 680px, stack them vertically: the world takes the upper area and the palette becomes a short horizontally scrollable strip at the bottom.
- Put a small translucent rounded instruction card in the upper-left of the world saying: "Tap an item to spawn it. Drag items into each other to fuse them." Use subtle borders, blur, and muted light text.
- The world is a 2D canvas with a vertical gradient from deep blue-purple (#171c36) at the top to darker navy (#0e1225) at the bottom, faint 32px grid lines, and a thin translucent orange strip along the bottom edge. The canvas must resize with its container and support mouse, touch, and pointer input.
- The sidebar is a two-column grid headed "Spawn items". Each item is a rounded dark tile with a large emoji and a small name. Include exactly these spawn options: Melon 🍈 (green), Apple 🍎 (red), Bomb 💣 (slate blue-gray), Star ⭐ (yellow), Cloud ☁️ (pale blue), Duck 🦆 (gold), Robot 🤖 (gray-blue), and Rock 🪨 (brown-gray). Below the grid show muted status text in the form "Objects: N · Fusions: M". Hide this status and the sidebar heading on mobile while keeping the item tiles in a horizontal row.

Core gameplay:
- Clicking/tapping any palette item immediately spawns one circular object near the center of the world, around the upper-middle region, with a little random horizontal offset and random initial upward velocity. Spawned objects are circular colored discs with a translucent white outline, soft shadow, their corresponding emoji centered inside, and a small randomized rotation/spin.
- Simulate simple real-time 2D physics. Gravity accelerates objects downward; objects move, rotate, and bounce off all four canvas boundaries with damped velocity. Horizontal velocity slowly drag-damps, and floor bounces slightly reduce horizontal speed. Objects should remain inside the world based on their radius.
- Object radii are based on mass: approximately 25 + mass*3 pixels. Use masses Melon 1.2, Apple 1, Bomb 1.5, Star .8, Cloud .7, Duck .9, Robot 1.3, Rock 2, so the visible object sizes vary subtly. Initial random rotation and spin should make the sandbox feel lively.
- Users can press/touch an existing object and drag it around. The selected object follows the pointer while dragging, preserving the grab offset, and its velocity is temporarily stopped. Release launches it with a small random horizontal velocity and slight upward velocity.
- Detect collisions between circular objects. When objects collide normally, separate their overlapping circles and exchange/dampen velocity along the collision normal so they bounce against one another.
- The key goal is fusion: if a dragged object overlaps any other object, immediately remove both objects and replace them at their midpoint with one larger fusion object. Every pairing is valid; there is no recipe table. The new object has a sparkle emoji ✨, a color made by averaging the two source colors, a radius roughly seven pixels larger than the larger input radius capped around 50px, an upward fusion impulse, a brief bright flash/glow, and increased spin. Give it a label such as "Apple + Star" using the two source names; labels appear below objects after they have existed for about 1.2 seconds. Fusion objects can themselves be dragged into other objects and fused again.
- Increment the fusion counter each time this happens. Keep the object counter and fusion counter current in the sidebar.
- If there are no objects, show centered muted instructional text in the world: "Spawn two things and smash them together" and beneath it "Every pairing creates a new fusion".

Buttons and interactions:
- "Clear" removes all objects and resets the fusion count to zero.
- "Make chaos" clears the current objects and spawns 12 objects in a roughly 4-column by 3-row arrangement using the eight item types cyclically, with varied upward/horizontal velocities, so they immediately bounce and collide. It does not need to auto-fuse unless the physics and user interaction cause it.
- Include polished hover/active states, touch-friendly controls, no page scrolling, and preserve the dark navy/orange accent visual style. Use emoji rendered with a system emoji-capable font and canvas text; do not require external assets.