[TITLE]
Tetris Game Prompt

[HIGH LEVEL GOAL]
Create a pixel style Tetris game interface and a fully playable Tetris game. Keep a retro arcade look and include full game mechanics. Also include a built in debugging checklist and fixes for common failure points, including spawn, collision, locking, hard drop, ghost piece, rendering bounds, and React hook ordering issues. Exclude any leaderboard, high score storage, API, database, Google Sheets, Airtable, Telegram, webhook integrations, or Make automation modules.

[UI AND SIZING REQUIREMENTS]

[BOARD SIZE AND LAYOUT]
Board is 10 columns by 20 rows
The visible grid area must be exactly 300 pixels wide by 600 pixels tall
Use crisp, pixel style borders and a minimal retro arcade layout

[PIECES AND UI PANELS]
Include all seven pieces: I, O, T, L, J, S, Z
Use clear classic color coding per piece
Include a score panel with retro digital styling
Include a next piece preview box
Include a status display and basic controls (pause and reset are fine)

[PART 1, UI DESIGN IN FIGMA]
Design the interface in Figma with a pixel style, retro arcade aesthetic.
Minimal UI elements, no clutter
Pixel perfect borders, vintage limited color tones
Readable labels and clean alignment
Layout includes: main grid, score panel, next preview, controls, status

[PART 2, PLAYABLE GAME IMPLEMENTATION]
Build a fully playable Tetris game using React and TypeScript. The final result must build and run cleanly.

[CONTROLS AND INPUT MAPPING]
Left arrow moves left
Right arrow moves right
Down arrow soft drops
Up arrow rotates the piece
Space bar performs an instant drop when the piece is falling, it must not rotate the piece
Add a pause toggle and reset button in the UI

[CORE GAME LOGIC REQUIREMENTS]

[PIECE SYSTEM]
Use the standard 7 piece set (I, O, T, L, J, S, Z)
Define piece rotation states correctly and consistently
Enforce collision detection against walls, floor, and locked blocks

[SPAWN BEHAVIOR]
Spawn pieces slightly above the visible board for smooth entry
Use a spawn position like y: -1 instead of y: 0
After spawning, immediately check whether the piece overlaps existing filled cells, and trigger game over if it does

[FALLING AND LOCKING]
Automatic drop on an interval
Speed increases with level
When a piece can no longer move down, lock it immediately into the board
Do not allow pieces to overlap due to delayed locking

[LINE CLEARING AND SCORING]
Detect completed rows and clear them after locking
Apply classic scoring multiplied by level:
1 line: 40 points
2 lines: 100 points
3 lines: 300 points
4 lines: 1200 points
Award points based on the number of lines cleared in a single lock event

[UI FEATURES INSIDE THE GAME]
Next piece preview
Current score and level display
Ghost piece preview
Game status display (playing, paused, game over)
Game over view and restart

[DEBUGGING AND COMMON ISSUE HANDLING]
Add a Debug Mode flag that can be toggled on and off. When on, show lightweight diagnostics and console logs that help you pinpoint problems quickly.

[A. COLLISION DETECTION AND DROPPING ISSUES TO PROACTIVELY PREVENT]
isValidMove must correctly handle:
Left boundary and right boundary checks
Bottom boundary checks so pieces stop at the bottom
Collision with placed pieces only when the piece cells are within the visible board
Cells above the visible board (negative y) should not trigger collision with the board array
Piece locking must be immediate
If a piece cannot move down on a tick or after a soft drop step, lock it immediately
Avoid any “extra step” that allows overlap with existing blocks
Hard drop must lock correctly
Calculate the final valid y position by stepping downward until the next step would collide
Place the piece at that final y and lock it instantly
Ensure hard drop cannot skip collision checks
Ghost piece must be safe and accurate
Ghost uses the same collision rules as hard drop
Add boundary checks
Only render the ghost if its position differs from the active piece position
Rendering bounds must be safe
Add proper bounds checking anywhere you read or write board rows and columns
Prevent array access errors by guarding indices
Ensure rendering handles negative y for the active piece correctly, meaning you do not try to draw cells above row 0 into the board array

[B. PIECE DEFINITION SYNTAX AND STRUCTURE ISSUES]
Validate that piece definitions are closed correctly
Common issue example: a missing closing brace in the piece definitions object, where a closing bracket is accidentally used instead of a closing brace for a piece entry, such as the Z piece
Add a dev time validation function that asserts each piece has valid rotation arrays and consistent dimensions
If validation fails, throw a clear error naming the piece and the exact issue

[C. ROTATION BUGS]
If rotation pushes a piece outside the board, apply a simple wall kick, such as shifting left or right by 1 or 2 cells to find a valid position
If no valid position exists after the small shifts, cancel the rotation
In debug mode log attempted rotation, offsets tried, and whether rotation succeeded

[D. LINE CLEAR AND SCORING BUGS]
Run line clear only after locking
If multiple lines clear at once, score must use the correct multi line value from the same lock event
In debug mode log number of lines cleared, rows cleared, points awarded, new score

[E. GAME OVER DETECTION EDGE CASES]
After spawn, immediately test overlap with existing blocks in visible rows
If overlap occurs, set game state to game over and stop the drop interval
In debug mode log spawn position and overlap result

[F. REACT HOOKS ORDERING AND STALE CLOSURE ISSUES]
Prevent React hook ordering errors and state bugs inside the useGameLogic hook.
Do not conditionally call hooks, ever
Do not add or remove hooks in a way that changes their order across renders
Keep useState, useRef, useCallback, and useEffect calls in a consistent order every render
Do not introduce extra refs or hooks mid refactor that change hook ordering, this can cause the inconsistent hook ordering error

[LOCKING LOGIC GUIDANCE TO AVOID HOOK ISSUES]
Prefer keeping locking logic inside stable callbacks used by drop and hardDrop
Avoid unnecessary extra refs and callbacks that increase complexity
Ensure dependency arrays are correct so callbacks do not capture stale state

[WHEN DEBUGGING HOOK ORDERING ISSUES]
Check for a recently added useRef or hook that only runs in certain conditions
Remove the extra hook and consolidate logic so the hook call list stays identical on every render
In debug mode log state transitions and tick events so you can confirm no duplicate intervals or double locking occurs

[G. INTERVAL AND PAUSE HANDLING]
Stop the drop interval when paused or game over
Restart the drop interval cleanly when resuming
In debug mode log interval start, stop, and tick timing

[VISUAL ALIGNMENT DEBUGGING]
Enforce grid container size at 300 by 600
Ensure each cell is 30 by 30
Ensure preview box uses the same cell sizing logic for consistent visuals

[REQUIRED OUTCOME]
A retro pixel style Tetris UI that matches the Figma layout
A working React and TypeScript Tetris game with correct controls, rotation, collision, dropping, immediate locking, line clearing, scoring, level speed increases, next piece preview, ghost piece, pause, reset, game over
A built in debugging checklist and debug mode diagnostics that address the common issues above.

[GAMEPLAY FLOW]

Start Screen
Welcome screen with game introduction
Click "Start Game" to begin

Question Phase
Game starts with your first question appearing immediately
4 multiple-choice answers presented
30-second timer counts down with pressure mechanics:
At 10 seconds: Tick sound every second
At 5 seconds: Urgent beeping + visual effects (pulsing timer, bouncing clock icon, red border)
Select your answer quickly to maximize points

Tetris Phase
After answering, Tetris gameplay begins
Classic mechanics: 10x20 grid with 7 standard piece types
Pieces automatically drop at regular intervals
Stack pieces to create complete horizontal lines
Line clearing triggers the next question (up to 5 total questions)

Game End
After answering all 5 questions, a celebration screen appears with confetti
Displays your final score

[SCORING SYSTEM]
Correct Answers: 100-300 points (speed-based)
Faster responses = higher points
Maximum 300 points for instant answers
Minimum 100 points if answered near time limit
Wrong Answers: -50 points penalty
Tetris Lines: Standard Tetris scoring for cleared lines

[GAME OVER CONDITIONS]
Pieces stack to the top of the grid (traditional Tetris game over)
Time runs out on a question (automatically proceeds)

[KEY FEATURES]
Full 8-bit retro sound effects for all actions
Visual and audio feedback throughout
Progressive difficulty through question progression
Balanced challenge requiring both Tetris skill and quick thinking