Ball Brawl Lab

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 responsive 2D browser arena simulator titled “Ball Brawl Lab.” Use a full-screen HTML canvas with a dark navy/black background and a fixed glassy HUD layered above it. The camera is a static top-down view: center a large circular combat arena at about the vertical middle of the screen (the arena center is horizontally centered and slightly above mid-screen), with a dark blue radial-gradient interior, a thick translucent blue outer rim, a thin bright indigo inner outline, and three or four very subtle concentric circular guide rings. Keep all combatants constrained inside the circle.

At the top, show two rounded translucent dark panels. The left panel says “Ball Brawl Lab” in large light text and “Place any mix. Watch the arena decide.” beneath it in muted blue-gray. The right panel is right-aligned and displays live counts as “Alive: N”, then “Blue B vs Gold G,” with Blue in pale blue and Gold in yellow. At the bottom center, show a wide rounded dark translucent controls panel. It contains six buttons in a responsive wrapping grid: Tank, Swift, Splitter, Healer, a light-background “Start fight”/“Pause fight” toggle, and “Clear.” Each unit button includes a glowing colored dot matching its unit. The selected unit button has a white outline. Beneath the buttons show the hint: “Pick a type, then tap the arena to place it. Balls attack the nearest opponent.” Make the UI touch-friendly and usable with pointer/touch input.

On initial load, create three blue Tank balls and three gold Swift balls in opposing staggered formations near the center of the arena. The player chooses a unit type and taps/clicks inside the arena to place another ball. New placed balls alternate teams based on the current total ball count, so they are automatically assigned Blue team 0 or Gold team 1; there is no manual team selector. Reject placements outside the arena boundary, accounting for the unit radius. The Clear button removes every ball and stops the fight. Start fight begins the simulation; Pause fight stops movement and combat while leaving the current positions and health visible.

Implement these four unit types with clearly different stats and appearances:
- Tank: blue (#3c82ff) with pale blue glow, radius 26, 150 HP, 12 damage, movement speed 70, attack cooldown 0.7 seconds. Label the ball with “T.”
- Swift: gold/yellow (#ffbf3c) with warm pale glow, radius 18, 70 HP, 8 damage, speed 190, cooldown 0.34 seconds. Label it “S.”
- Splitter: magenta/pink (#ef5fff) with pale pink glow, radius 22, 95 HP, 10 damage, speed 105, cooldown 0.55 seconds. Label it “S.”
- Healer: green (#54e38e) with pale green glow, radius 21, 85 HP, 5 damage, speed 95, cooldown 0.8 seconds. Label it “H.”

Each ball should be rendered as a softly glowing filled circle with a small translucent white highlight at its upper-left, a 3px team-colored outline (pale blue for Blue, pale yellow for Gold), and a tiny dark bold unit initial centered inside. Add a short horizontal health bar below each ball: dark translucent background, filled according to current HP, colored blue for Blue team or yellow for Gold team. Add a subtle sinusoidal wobble to the visual position for a lively but restrained motion effect.

While fighting, every ball continuously finds the nearest ball on the opposing team. It moves directly toward that enemy until the two circles are within their combined radii plus a small attack margin, then attacks at its cooldown interval. Subtract the attacker’s damage from the target HP and briefly flash the target. Remove a ball when HP reaches zero. Keep all balls inside the arena edge by clamping their positions. A healer still attacks nearest enemies, and additionally restores nearby same-team allies within 110 pixels at a rate of 4 HP per second while its cooldown is in the final 0.25 seconds of its cycle, never exceeding allies’ maximum HP. When a Splitter is killed, spawn two Swift balls at small opposite offsets around its death position, on the Splitter’s team, as long as the total is below 34 balls. Stop the fight automatically when all remaining balls belong to one team, and update the Alive/Blue/Gold counters continuously. If no opponent exists for a ball, it remains in place.

Use a clean modern neon-lab visual style: near-black #080b14 page, dark blue arena, indigo outlines, soft colored glows, rounded panels, subtle borders and shadows, system/Inter-like sans-serif typography. Preserve the uncluttered static top-down presentation and make the layout adapt to narrow mobile screens by wrapping the controls and allowing the arena to extend behind the HUD as in the reference.