Snake Garden

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 polished responsive browser game titled “Snake Garden,” a classic grid-based Snake game in a dark teal garden-like visual theme. Use a centered single-page layout with a header reading “Snake Garden” and the subtitle “Eat fruit, grow longer, beat your best.” Show two compact stat cards on the right labeled SCORE and BEST, with bright green numeric values. Below, place a square game board centered in a rounded dark frame with a thin blue-teal border and subtle shadow. The playable area is an 18-by-18 grid on a deep blue-green background (#0b1e27), with very faint teal grid lines. Keep the board square and responsive to the viewport; it should have rounded outer and inner corners.

Gameplay: on starting, initialize a three-segment snake horizontally near the center of the grid, with the head at approximately grid coordinate (9,9), followed by body segments at (8,9) and (7,9), moving right automatically. Render each segment as a slightly inset rounded square: body segments are vivid green, while the head is pale mint green and has a small dark eye positioned toward its current travel direction. Place one glowing coral-orange circular fruit at a random unoccupied grid cell. The snake advances one cell at a time, initially every 125 ms. Eating the fruit increases the score by one, grows the snake by retaining the new head instead of removing the tail, places another fruit randomly in an empty cell, and accelerates slightly by reducing the step interval by 2 ms, down to a minimum of 70 ms. The score starts at zero. Collision with the board boundary or any snake segment ends the run; do not wrap around. Prevent immediate reversal into the opposite direction.

Controls must work with keyboard arrows and WASD, on-screen directional buttons, and swipe gestures on the board. Arrange four touch buttons as a directional pad below the board: up centered above left/down/right, with left, down, and right on the second row. Buttons are dark teal with a thin border and bright text/icons. A short hint below says “Arrow keys / WASD • Swipe on the board • Space to pause.” Press Space to pause or resume. While paused, show a translucent dark overlay over the board with a centered card saying “Paused,” the text “Take a breath, then continue.” and a “Resume” button. The overlay should blur/dim the board behind it.

At initial load, show the same overlay with “Ready?” and the instruction “Use the arrow keys, WASD, swipe, or the buttons below.” plus a bright green “Start game” button. Starting resets the snake, food, score, speed, and direction. When the snake collides, stop movement and show a game-over overlay titled “Game over,” with text formatted like “Score 3. Your best is 8.” and a “Play again” button. Persist the best score locally between sessions and update it only when a run beats the previous best. Use a dark atmospheric page background with a subtle radial teal glow near the top, near-white mint text, muted desaturated teal secondary text, green accent UI, coral fruit, rounded corners, clean system sans-serif typography, and generous compact responsive spacing. Ensure the board remains usable on both desktop and mobile, with touch interaction enabled and no page scrolling.