Colorir Animais

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, touch-friendly 2D coloring game titled “Colorir Animais” in Brazilian Portuguese. It should be a single-screen portrait-friendly web game with a warm, simple children’s coloring-book aesthetic.

Layout and styling: Use a pale beige background (#f8efe2), dark brown text, and a centered app column. At the top, place a header with the large title “Colorir Animais” on the left and a rounded gold badge on the right reading “NÍVEL 4 · CERVO”. Below it, show a centered palette of ten circular color swatches that wraps onto multiple rows on narrow screens. The colors, in order, are tomato red (#d95d39), orange (#e9a23b), yellow (#f4d35e), green (#7fb069), teal (#4d908e), periwinkle blue (#5b7cfa), purple (#9b5de5), pink (#ef7aa8), taupe brown (#8d6e63), and dark brown (#3f2b20). Each swatch is white-bordered with a subtle shadow; the first red swatch is initially selected with a thick dark-brown outline and offset. Make swatches and controls comfortably touchable.

Main canvas: Below the palette, create a large off-white coloring board (#fffdf8), bordered by a thick medium-brown (#9c642f) rounded rectangle with a large radius and a subtle shadow. The board should resize responsively, approximately 92vw wide up to 700px and about 68vh tall up to 570px. Inside it, display a clean outlined deer drawing on an SVG-like canvas with viewBox 0 0 700 520. Use white/off-white fill for every paintable section and a dark chocolate outline (#3f2b20), approximately 5px wide, rounded joins. The deer faces right and consists of separately clickable paintable parts: a large oval body, a long upright neck, a head, a protruding muzzle, three visible legs, a small tail, and two ears. Include the visible antler/branch lines above the head, a small dark eye, a short curved mouth line, and short hoof-separation lines. Details must be decorative and not paintable.

Match this deer geometry and visual composition closely: body roughly from x180,y205 through x510,y435 with a rounded oval silhouette; neck rising from around x410,y355 toward x475,y145; head around x475,y90 to x650,y232; muzzle extending to about x660,y250; legs down to y480; tail extending left around x115–205,y255–330; ears above the head around y65–145; antlers branching up and left/right to approximately y40. Keep all outlines visible over colored fills. The deer should remain centered with generous blank space around it inside the board.

Core interaction: The user selects a color by tapping/clicking a swatch, which becomes the only active color and receives the selected outline. Then tapping/clicking any paintable deer section immediately changes that section’s fill to the selected color. Allow repeated repainting of a part. Record each paint action in undo history, including the part and its previous fill. Decorative detail strokes and the eye must not respond to painting.

Controls beneath the board: show the instruction text exactly “Escolha uma cor e toque nas partes do cervo para pintar.” Then provide three rounded buttons: “↶ Desfazer”, “Limpar”, and a primary dark-brown button “Próximo nível”. Buttons should have a minimum touch-friendly height around 44px, white backgrounds with brown borders, and the primary button should be dark brown with white text.

Button behavior: “↶ Desfazer” reverses only the most recent paint action and restores that section’s previous fill; do nothing if history is empty. “Limpar” restores all paintable sections to off-white (#fffdf8) and clears the undo history. “Próximo nível” does not change the drawing or advance to a new animal; instead replace the instruction text with exactly: “O Nível 4 está pronto! Escolha outra cor para continuar decorando o cervo.” Keep the game on the same screen.

Use semantic/accessibility labels where appropriate, including a palette label and an image description such as “Desenho de cervo para colorir”. Track the current level as 4, the selected color (initially red), painted-part count, and undo history internally, but do not add score, lives, timers, animations, sound, extra levels, or invented gameplay elements.