Cookie Clicker

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 single-page playable incremental clicker game titled “Cookie Clicker.” Use a dark, warm bakery-themed visual style: the full page has a deep brown/near-black radial-gradient background, with a centered translucent dark chocolate-brown panel, rounded corners, subtle light border, inset highlight, and large soft shadow. On narrow screens use one vertically scrolling column; on wider screens use a two-column layout with the main cookie hero on the left and stats/upgrades on the right. Keep the interface responsive and usable on touch devices.

The hero area is centered and contains, in order: a small uppercase spaced label “FRESH FROM THE OVEN,” the large heading “Cookie Clicker,” the subtitle “Tap the cookie. Make cookies. Become unstoppable.”, a prominently displayed current cookie count starting at 0, an uppercase label “COOKIES BAKED,” and a large circular cookie button. The cookie should look like a stylized baked chocolate cookie made entirely with CSS gradients: orange/caramel center, darker baked outer rings and bottom edge, scattered lighter and darker chip-like spots, inner highlights and shadows, and a dashed circular inset border. Put bold rotated dark-brown “CLICK!” text over the cookie. Give the cookie hover brightening and a slight lift, and an active/pressed state that moves downward and shrinks slightly. Under it show “Click the big cookie to bake one.”

Core mechanics: maintain current cookies, lifetime total baked, number of clicks, cookies per click, and cookies per second. Initially set cookies/current count = 0, total baked = 0, clicks = 0, per click = 1, and per second = 0. Every pointer/touch press on the big cookie increments clicks by one and adds the current per-click amount to both current cookies and total baked. Display a floating “+N 🍪” popup at the pointer location for manual clicks; it should fade and float upward over about 700ms. Cookies may be fractional due to automation, but displayed values should be floored and formatted as plain integers below 1000, one decimal with k below one million, m below one billion, and b at or above one billion.

On the right on wide layouts, or below the hero on mobile, show a “Bakery stats” card with four values in a two-column grid: “per click” (initially 1), “per second” (initially 0), “total baked” (initially 0), and “clicks” (initially 0). Below it show an “Upgrades” card with two full-width dark rounded upgrade buttons. The first is “Golden fingers,” with the description “+1 cookie per click,” and a cookie icon/price initially 25. Clicking it, when affordable, subtracts the price, increases per-click by 1, and raises its next price to ceil(previous price × 1.65). The second is “Auto oven,” with the description “+1 cookie per second,” and a cookie icon/price initially 100. Clicking it, when affordable, subtracts the price, increases per-second by 1, and raises its next price to ceil(previous price × 1.8). Disable and visibly fade each upgrade button when the current cookie balance is below its price; enable it once affordable. Run an animation-frame-based passive income loop that adds per-second × elapsed seconds to both current cookies and total baked, capped to at most 0.25 seconds of elapsed time per frame.

Below the upgrades include a centered “Reset bakery” button. Clicking it must restore every game value and both upgrade prices to the initial values. No persistence, enemies, timers, levels, sound, or additional gameplay systems are needed. Render all counters and button prices immediately and after every state change. Use warm cream text, muted tan secondary text, gold/caramel highlights, rounded cards, and subtle translucent borders. The interface should preserve the exact visible labels and upgrade names above, with accessible button labels, especially “Bake one cookie” for the main cookie.