Pixel Clues

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 clean, responsive 2D Picross/nonogram puzzle game titled “Pixel Clues.” The game is a flat, polished UI rather than an animated world: use a warm off-white background with a subtle radial gradient, centered inside a maximum-width layout. At the top, show a rounded translucent white header with the title “Pixel Clues,” a status message (“Fill cells to match the row and column clues.” initially), and right-aligned puzzle name plus a dark pill showing completion percentage. Beneath it, show a rounded toolbar containing a puzzle selector, three paint tools (Fill, X, Erase), a dark “Check mistakes (3)” button, and a Reset button. On small screens, wrap the controls and hide the instructional footer.

The central game board is a dynamically sized canvas, centered in the available space and scaled responsively. It consists of a clue area above and to the left of a square cell grid. Put a rounded pale panel labeled “CLUES” in the upper-left corner. Display row clues to the left of each row and column clues above each column, using large bold dark numbers. Clues should turn green when the player’s current filled cells produce exactly the same run sequence as that line’s solution clue. The board cells are nearly white with thin gray grid lines and a dark outer border; every fifth horizontal/vertical division uses a heavier dark guide line. When the pointer is over a cell, highlight its whole row and column in pale yellow and the matching clue strips in a stronger yellow. The visual style should use Inter or a similar clean sans-serif, dark navy ink, orange accent buttons, green success color, red error color, rounded cards, and soft shadows.

Implement the actual nonogram rules. Each cell has three states: empty, filled, or X-marked. A filled cell is a solid dark navy square inset inside its grid cell. An X-marked cell is a red hand-drawn-style diagonal cross. Empty cells remain pale. The player solves by interpreting contiguous runs of filled squares: numbers in a row or column indicate the lengths of consecutive filled runs in order, separated by at least one empty cell. Tapping/clicking a cell applies the selected tool; dragging across cells paints multiple cells. On desktop, right-clicking a cell marks it X regardless of the selected tool, and suppress the browser context menu. Fill, X, and Erase tools should remain selectable, with Fill active initially. Clearing or changing a cell removes any mistake highlight on that cell.

Include exactly these selectable puzzles and derive their row and column clues from the listed binary art patterns, where 1 means a solution-filled square and 0 means empty:
- “5×5 Heart”: 01010 / 11111 / 11111 / 01110 / 00100
- “7×7 Key”: 0011100 / 0100010 / 0100010 / 0011100 / 0001000 / 0001110 / 0001010
- “8×8 Cat”: 10000001 / 11000011 / 11111111 / 10111101 / 11111111 / 01111110 / 00100100 / 01000010
- “10×10 Rocket”: 0001100000 / 0011110000 / 0011110000 / 0111111000 / 0110011000 / 0111111000 / 0011110000 / 0111111000 / 1101101100 / 1000000100
- “12×12 Castle”: 100100100100 / 111111111111 / 111111111111 / 011111111110 / 011001100110 / 011111111110 / 011111111110 / 011110011110 / 011110011110 / 011110011110 / 111111111111 / 111111111111
Start on the 5×5 Heart puzzle, with its visible clues (columns 2, 4, 4, 4, 2 and rows 1 1, 5, 5, 3, 1), an empty grid, and 0% progress. Progress is the percentage of solution-filled cells correctly filled, not the percentage of all cells.

The Check mistakes button has three available checks. Each check scans the board: a filled cell where the hidden solution is empty and an X placed where the solution is filled are mistakes. Highlight each mismatched cell with a translucent red overlay and red border, and report the number of mismatches in the status text; if none exist, say there are no mistakes in the current marks. Decrease the remaining check count each time and change the button to “Validate final” after the three checks. On final validation, report whether everything matches or the puzzle is not solved yet. There is no timer and no lose state. Reset clears the grid, restores three checks, removes highlights, closes any completion dialog, and reports that the puzzle was reset.

A puzzle is solved when every solution 1 is filled and no solution 0 is filled; X marks and empty cells are both acceptable on solution-empty cells, though the player may use X marks as deductions. Immediately upon solving, stop editing, update the status to “Solved — every filled square matches the hidden image!”, and show a centered modal over a dark translucent backdrop. The modal should have a cream card with a dark border, the heading “Puzzle solved!”, text identifying the solved puzzle and how many mistake checks remain, plus “Next puzzle” and “Keep looking” buttons. Next puzzle advances cyclically through the five puzzles; Keep looking closes the modal. Add a subtle celebratory sparkle animation over a solved board. Include a small help line below the board: “How to play: clues show runs of filled squares. Tap a cell to paint with the selected tool, or drag across cells. Right-click on desktop marks an X.”