Baseline Rally

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 responsive fullscreen 2D arcade paddle game titled "Baseline Rally". Use a fixed full-viewport HTML canvas on a very dark navy background (#061b2b), with a centered rectangular teal court occupying about 88% of the screen width, from roughly 15% to 90% of the screen height. Render the court with a vertical gradient from brighter teal at the top (#168a8d) to dark teal-blue at the bottom (#0b596b), a thin bright translucent outer border, two faint horizontal guide lines at 25% and 75% court height, and a dashed vertical center line. Add a subtle dark center divider shadow.

The game is Pong-like tennis/table-tennis: the human controls a yellow/gold vertical paddle on the left side, and an off-white CPU paddle on the right. Paddles are narrow rectangles about 12px wide and 76px tall, with a slight dark offset shadow. The ball is a glowing creamy-white circle with a soft pale-yellow halo. Coordinates should be normalized to the court: left paddle around x=.08, right paddle around x=.91, ball starts at the center, and paddles can move vertically between about 8% and 92% of court height.

At the beginning, show a ball traveling from the center in a randomly chosen left or right direction, with a small random vertical velocity. The player moves with W/S or the up/down arrow keys; movement speed is approximately 0.95 normalized court-heights per second. Also support mobile/touch input: dragging vertically anywhere on the canvas moves the player paddle by the drag distance. The CPU paddle follows the ball only when the ball is on its half of the court, otherwise it returns toward the vertical center; its maximum movement speed is approximately 0.58 normalized court-heights per second.

Move the ball continuously, bounce it off the top and bottom boundaries, and make paddles return the ball when it reaches their side and is vertically within roughly 0.085 normalized units of the paddle center. On a paddle hit, reverse the horizontal direction, increase horizontal speed by about 5.5%, alter vertical velocity according to the ball's offset from the paddle center, and increment the current rally-hit count. If the ball passes beyond the left edge, award one point to the CPU and restart the ball in the center moving right; if it passes beyond the right edge, award one point to the player and restart moving left. Reset the rally count whenever a point is scored. First side to 7 points wins. Stop gameplay on match end and show either "Match point — you win!" or "The CPU takes the match", plus a visible "Play again" button that resets scores, positions, and ball. The spacebar should also restart after game over.

Build a HUD over the canvas. At the top center, show a translucent dark rounded scoreboard panel with a subtle border/shadow. Its compact table should be labeled BASELINE RALLY, POINTS, and RALLY, with rows YOU and CPU, numeric scores starting at 0, and the current rally number shown only for the side whose direction the ball is traveling toward (otherwise an em dash). Highlight the active row with a translucent gold background and gold text, and show a small glowing gold dot in that row. Place an instructional status line below the panel reading "Move with W/S or ↑/↓" initially. During rallies longer than two hits, show a small centered label above the court such as "3 hit rally". At the bottom center display: "Desktop: W/S or arrow keys · Mobile: drag anywhere". Keep the UI responsive and use safe-area-aware top/bottom spacing on mobile. Use a clean system sans-serif font, dark navy/teal/gold/white palette, and no external images or assets.