Tetris

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 browser-based falling-block puzzle game titled "Tetris". Use a fixed 10-column by 20-row playfield, rendered as a crisp pixelated canvas with 28px square cells (approximately 280x560). Center the game on a very dark navy-black page. Arrange the board and a right-hand sidebar horizontally on desktop with about 24px spacing and padding around the whole layout.

The board should have a solid #1a1a2e dark navy background and very subtle, thin translucent grid lines separating every cell. Falling and locked tetromino blocks are nearly square colored tiles with a 1px gap implied by drawing each tile at BLOCK-1 size. Give each tile a simple arcade bevel: a faint white highlight along its top and left edges and a dark shadow along its bottom and right edges. Use the classic seven tetrominoes and these colors: I cyan (#00f0f0), O yellow (#f0f000), T purple (#a000f0), S green (#00f000), Z red (#f00000), J blue (#0000f0), and L orange (#f0a000). Spawn pieces centered near the top, initially at y=-1 so they can enter from above. The active piece falls automatically, starting at a 1000ms interval; increase speed by 80ms per level, down to a minimum 100ms interval, with level = floor(total cleared lines / 10)+1.

Implement standard collision rules against the side walls, floor, and locked blocks. Permit horizontal movement left/right, soft drop one row, clockwise rotation, and hard drop to the lowest valid position. A hard drop awards 2 points for each row descended. Show a translucent ghost outline at the active piece's landing position, using a faint white filled tile and a subtle white border. When a piece can no longer descend, lock it into the board, clear every full row, shift rows above downward, and score line clears using 100/300/500/800 points for 1/2/3/4 lines, multiplied by the current level. Track and display score, level, and total lines. Keep a preview of the next randomly selected tetromino in an 80x80 canvas.

Use the exact visual sidebar style shown: stacked dark #111 panels with approximately 2px #333 borders, rounded corners, and light gray uppercase headings with letter spacing. The first panel is labeled NEXT and contains the centered next-piece preview. Below it show SCORE with a large bold white numeric value, then LEVEL with the level number and a line count such as "0 lines". On desktop, place a small muted controls hint below the panels: "← → ↓ rotate: ↑ drop: Space" on one line and "Hold: R | P = pause" on the next, matching the implementation's keyboard instructions. Keyboard controls are ArrowLeft/ArrowRight to move, ArrowDown to soft drop, ArrowUp to rotate, Space to hard drop, R to restart, and P to toggle pause. Ignore repeated keydown events except for ArrowDown. Prevent the browser's default Space behavior.

Include pause behavior: pressing P freezes falling and overlays the board with a translucent black layer and centered white "PAUSED" text. Include game-over behavior when a newly locked or spawned piece cannot fit (including blocks above the top): overlay the board with a darker translucent layer, centered red "GAME OVER" text, and smaller gray "Tap R to restart" text. Do not draw the active piece or ghost while game over is active. The sidebar may also show a red GAME OVER message when applicable.

Add simple synthesized arcade sound effects using the Web Audio API, initialized on the first keyboard or touch interaction: quiet square-wave tones for movement and rotation, a short drop sound, ascending tones for line clears (with a distinct four-line/Tetris sequence), and descending tones for game over. Sound is supplementary and must not alter gameplay.

Support touch devices with responsive layout and visible on-screen controls: left, right, down, rotate, hard drop, and pause buttons using the symbols ◀ ▶ ▼ ↻ ⤓ ⏸. On coarse-pointer screens, hide the keyboard hint and show these dark rounded buttons with gray borders; arrange the layout vertically with the sidebar panels wrapping/stacking around the board. On narrow screens reduce padding, panel heading/font sizes, score size, and button dimensions. Disable page scrolling, selection, and touch gestures so the game can be played directly on mobile. Keep the restrained minimalist neon arcade aesthetic: dark background, subtle grid, saturated tetromino colors, white/gray HUD typography, and no additional scenery or decorative elements.