[reasoning, returned separately by Bedrock]
I'll create a visually impressive falling-block puzzle game. Let me plan out all the features:

1. 10x20 grid with 7 standard tetrominoes
2. Gravity, increasing speed with lines cleared
3. Controls: arrows, space, P for pause
4. Prevent default scrolling on game keys
5. Collision detection
6. Line clearing with animation
7. Score, lines, next piece display
8. Start screen with controls
9. Game over screen
10. No external resources
11. Fit in 800x640 frame

Let me make this really polished with:
- Particle effects on line clears
- Smooth animations, ghost piece, hold piece, combos, level display, screen shake on hard drops
- A gradient color scheme with glow effects and subtle grid patterns

I'm structuring the full HTML document with embedded styles and a script containing all the game logic for rendering, input handling, and state management.

I want canvas-based rendering with particle effects, SRS wall kicks for rotation, a neon glow aesthetic, an animated background, and optional Web Audio sound effects. I'm laying out the board centered with next-piece and hold-piece panels on either side, sizing cells at 28px so the 10x20 board fits cleanly within an 800x640 frame.

I'm assigning standard colors to each tetromino piece and setting up a modern dark theme with glowing blocks for the overall visual style. Writing HTML structure...

Styling the overlay for pause/game-over screens with a blurred glassy panel, then setting up the HTML body with the game container and canvas.

For sound, I'm planning to use the Web Audio API to generate simple synth tones for move, rotate, drop, line clear, and game over events, all toggleable and off by default. Now I'm ready to write the complete game with polished visuals — gradient blocks with highlights, grid lines, a translucent ghost piece, particle bursts and screen flash on line clears, subtle animated background stars, and smooth drop/lock animations.

I'm working out the exact canvas layout: an 800x640 canvas with 28px cells, a centered 280x560 board, plus side panels for hold piece, next piece, and score.

Setting up the canvas and context...

Defining more pieces...

I should switch to standard SRS piece definitions and compute rotations by matrix rotation with wall kicks instead, then focus on making the visuals pop with glowing neon blocks distinct per piece type.

My plan for visual polish includes a ghost piece preview, particle explosions on line clears, screen shake on hard drops, flash animations, smooth movement transitions, an animated background, a clean UI with score/level/next/hold, combo feedback, and a lock delay indicator before building the full implementation with vibrant neon colors and glow effects per piece.

Finishing the color palette for pieces, then planning the full implementation: game states, 7-bag randomizer, SRS rotation with wall kicks, ghost piece, hold piece, scoring, and speed progression as level increases.

I'm also planning lock delay, DAS for smooth movement, particles, and an optional sound system, along with beautiful rendering using gradients and subtle glow effects for blocks and background. I'm outlining the full file structure—HTML, inline CSS, and JavaScript split into constants, piece definitions with SRS data, state management, and board logic.

For movement I'm thinking through DAS timing (initial delay ~170ms, repeat ~50ms) and a lock delay mechanic where touching the ground starts a ~500ms timer that resets on movement/rotation but locks the piece once expired, since this feels much better than instant locking.

Now I'm working out the SRS wall kick tables—separate offset data for JLSTZ pieces, the I piece, and no kicks needed for O. Writing wall kick offsets...

Converting the remaining rotation states, I negate the y-values for R->2, 2->L, and L->0 transitions to match my downward-y coordinate system.

I'm second-guessing my kick table derivation and want to re-derive it carefully from the SRS specification, clarifying that offsets represent (column, row) displacement with positive dx meaning rightward movement.

Since my coordinate system has y increasing downward while SRS typically uses y-up, I need to flip the sign of dy when translating each kick's offset, so I'm working through each rotation transition (0→R, R→2, 2→L, L→0) to convert the standard values into my own coordinate convention, and I'm about to check the counter-clockwise R→0 case next.

Rather than deriving separate CCW tables, I'll just define wall kick data for clockwise transitions and reuse it reversed for CCW. Writing wall kick config...

Still defining offset table...

This is getting complicated with the I-piece kick tables, so I decide to just hardcode the kick offsets for each transition directly instead of deriving them systematically.

I realize negating the clockwise kicks isn't quite right for the reverse rotation, so I'm switching to building the full offset table directly for each of the four orientations instead, using standard SRS offset values.

Now I'm deriving all eight transition kick sets by subtracting the offset table of the destination state from the source state for each pairing: 0→1, 1→0, 1→2, 2→1, 2→3, with 3→2 still in progress.

I'm trying to work out the I-piece offset table separately in y-down coordinates, but I'm second-guessing my values here — these don't look right to me, so I need to reconsider the standard SRS offsets for the I piece rather than trust this derivation.

I'm getting tangled trying to recall exact SRS wall kick offsets precisely, so I'll abandon chasing the official table and instead implement a simpler, reliable fallback: try the base rotation, then shift left, right, or up by one if it collides.

Still writing wall kick data...

Still writing kick table...

Still deriving wall kick offsets...

Defining remaining I-piece kicks...

With the rotation offsets done, I'm moving to define the base shapes for each tetromino piece at their default orientation, then deriving other rotations by rotating these matrices programmatically.

For visual polish I want a dark gradient background, glowing board border, 3D-style blocks with highlight/shadow shading, ghost pieces, particle explosions on line clears, score pulse effects, styled next/hold previews, level-based color shifts, combo feedback, and ambient background particles. I'll organize rendering in layers: background, board grid, locked pieces, ghost piece, active piece, clear animations, particles, then UI on top.

I'm designing the particle system with position, velocity, color, size, and life-decay properties, spawning bursts from cleared row cells, and adding a glow effect on the active piece using layered translucent copies. For audio I'll use Web Audio API oscillators for simple tone-based sound effects, and I'm working out the scoring formula based on lines cleared times level multiplier.

I'm now figuring out level progression and drop speed, considering using the classic NES gravity curve that speeds up drop intervals as level increases, but settling on a simplified formula instead.

I also need to add DAS (Delayed Auto Shift) for smooth left/right movement when holding keys.

For locking pieces, I'll use a 500ms timer that resets on movement or rotation (capped at 15 resets) so players have time to slide pieces into place. I'll skip T-spins to keep scope manageable, though I'm considering whether to add a hold piece feature even though it's not explicitly required.

Now I'm sketching the canvas layout: an 800×640 canvas with a 10×20 board, panels on either side for hold/next previews and score info, and I'm fine-tuning cell size and board positioning so everything fits cleanly within the vertical space.

That works, leaving comfortable margins on all sides. With side panels at 220px wide each, I'm ready to start coding the HTML structure with a dark-themed body setting up a centered flex layout for the game frame.

Setting up board constants and piece definitions...

Defining remaining piece colors...

With the color palette set, I'm planning the full build: gradient backdrop, glowing board border, 3D-style blocks with highlights, ghost piece, particle effects on line clears, animated score, smooth lock flash, next/hold previews, and polished start/pause/game-over screens. Now I'll write the complete, thorough implementation.

For sound, I'm sketching out Web Audio generated effects for movement, rotation, landing, line clears, hard drops, and game over, all muted by default with a toggle. I'm deciding to skip the hold feature since it's not required, keeping controls simpler and matching the spec exactly.

Actually I reconsider—hold piece is standard enough that adding it with the C key would add real value, so I'll include it as a bonus. Now I'm focused on writing clean, polished final code, making sure to prevent arrow keys and space from scrolling the page, handle start/pause/restart via keyboard or click, keep all messaging on-page without alerts, and avoid any external resources or storage APIs.

With 28px cells, the board fits neatly at 280×560 starting at y=40, well within the 800×640 canvas. I'm working out how to render each block with a beveled look—dark fill with a lighter highlight along the top edge for a 3D effect.

This gives blocks a nice 3D beveled look, and I'll handle ghost pieces with low alpha outlines and a particle system tracking position, velocity, color, life, and size.

For line clears, I'm planning an animation that flashes the cleared rows white, spawns particles, then shifts rows down and awards score over about 300-400ms, using requestAnimationFrame with delta time tracking for the main loop and defining distinct game states starting with a 'start' screen.

I'm adding a 'playing', 'paused', 'clearing', and 'gameover' state, with input locked during the clearing animation. For visual polish, I'm giving the background a dark blue-to-purple gradient with subtle ambient particles drifting upward, plus a semi-transparent board overlay with a glowing border and faint gridlines.

Now I'm planning the blocks with a 3D beveled look and piece-specific colors, a low-opacity ghost piece outline, colorful particle bursts on line clears, clean glowing white UI text, and frosted-glass overlays. I also want a soft shadow beneath the active piece for depth, an animated counting score display, and a nicely framed next-piece panel with the level shown prominently.

I'm adding a lines-until-next-level indicator and a clickable speaker icon for sound toggling in the corner. For the DAS (delayed auto-shift) system, I'm tracking which keys are held, a delay timer before auto-repeat kicks in, and a repeat rate timer so held movement keys shift pieces smoothly after the initial press.

Writing keydown handler...

I'm reconsidering whether to rely on the browser's built-in key repeat versus implementing proper DAS myself, and decide the sluggishness of native repeat isn't ideal, so I'll build a clean DAS system tracking left/right timers.

Still writing input handling...

For soft drop, I'll just shorten the drop interval while down is held rather than using DAS repeats. I also want locked pieces to briefly flash white when they land, for a satisfying visual cue.

I'm also planning the line clear sequence: lines flash white, dissolve into particles, rows collapse, then a short pause -- roughly 550ms total, during which the game pauses but particles keep animating. I want to add combo tracking with bonus points and floating text like "SINGLE", "DOUBLE", "TRIPLE", "QUAD!" that rises and fades above the board.

Writing floating text logic...

Now I'm ready to write the full file, organizing it into sections: constants, piece data, game state, piece management, board management, input handling, sound, and particle systems -- likely 800+ lines total.



[answer]
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Block Cascade</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{width:800px;height:640px;overflow:hidden;background:#06060f;display:flex;justify-content:center;align-items:center;user-select:none}
canvas{display:block;cursor:default}
</style>
</head>
<body>
<canvas id="c" width="800" height="640"></canvas>
<script>
'use strict';
const C=document.getElementById('c'),X=C.getContext('2d');
const COLS=10,ROWS=20,CELL=28,BX=260,BY=38,BW=COLS*CELL,BH=ROWS*CELL;
const TYPES=['I','J','L','O','S','T','Z'];
const SHAPES={
I:[[0,0,0,0],[1,1,1,1],[0,0,0,0],[0,0,0,0]],
J:[[1,0,0],[1,1,1],[0,0,0]],
L:[[0,0,1],[1,1,1],[0,0,0]],
O:[[1,1],[1,1]],
S:[[0,1,1],[1,1,0],[0,0,0]],
T:[[0,1,0],[1,1,1],[0,0,0]],
Z:[[1,1,0],[0,1,1],[0,0,0]]
};
const CLR={
I:{m:'#00e5ff',l:'#b0f8ff',d:'#006878',g:'rgba(0,229,255,'},
J:{m:'#2979ff',l:'#a0c4ff',d:'#0d3ea0',g:'rgba(41,121,255,'},
L:{m:'#ff9100',l:'#ffcc80',d:'#a05a00',g:'rgba(255,145,0,'},
O:{m:'#ffe100',l:'#fff9a0',d:'#a09200',g:'rgba(255,225,0,'},
S:{m:'#00e676',l:'#80ffb8',d:'#008844',g:'rgba(0,230,118,'},
T:{m:'#d500f9',l:'#ea80fc',d:'#8200a0',g:'rgba(213,0,249,'},
Z:{m:'#ff1744',l:'#ff8a98',d:'#a0102e',g:'rgba(255,23,68,'}
};
const KICKS_JLSTZ={
'01':[[0,0],[-1,0],[-1,-1],[0,2],[-1,2]],
'10':[[0,0],[1,0],[1,1],[0,-2],[1,-2]],
'12':[[0,0],[1,0],[1,1],[0,-2],[1,-2]],
'21':[[0,0],[-1,0],[-1,-1],[0,2],[-1,2]],
'23':[[0,0],[1,0],[1,-1],[0,2],[1,2]],
'32':[[0,0],[-1,0],[-1,1],[0,-2],[-1,-2]],
'30':[[0,0],[-1,0],[-1,1],[0,-2],[-1,-2]],
'03':[[0,0],[1,0],[1,-1],[0,2],[1,2]]
};
const KICKS_I={
'01':[[0,0],[-2,0],[1,0],[-2,1],[1,-2]],
'10':[[0,0],[2,0],[-1,0],[2,-1],[-1,2]],
'12':[[0,0],[-1,0],[2,0],[-1,-2],[2,1]],
'21':[[0,0],[1,0],[-2,0],[1,2],[-2,-1]],
'23':[[0,0],[2,0],[-1,0],[2,-1],[-1,2]],
'32':[[0,0],[-2,0],[1,0],[-2,1],[1,-2]],
'30':[[0,0],[1,0],[-2,0],[1,2],[-2,-1]],
'03':[[0,0],[-1,0],[2,0],[-1,-2],[2,1]]
};

function rotateMatrix(m){
const n=m.length,r=[];
for(let i=0;i<n;i++){r[i]=[];for(let j=0;j<n;j++)r[i][j]=m[n-1-j][i];}
return r;
}
const ALL_ROTATIONS={};
TYPES.forEach(t=>{
ALL_ROTATIONS[t]=[SHAPES[t]];
let s=SHAPES[t];
for(let i=1;i<4;i++){s=rotateMatrix(s);ALL_ROTATIONS[t].push(s);}
});

// Game state
let board,piece,nextPieces,holdType,holdUsed,score,lines,level,combo;
let gameState,dropTimer,dropInterval,lockTimer,lockDelay,lockResets,maxLockResets;
let clearingRows,clearTimer,clearPhase;
let particles,floatingTexts,bgParticles;
let shakeX,shakeY,shakeTimer;
let displayScore,lastTime;
let soundOn=false,audioCtx=null;

// DAS
const DAS_DELAY=150,ARR=30,SOFT_DROP_INT=40;
let inputState={left:false,right:false,down:false};
let dasL=0,dasR=0,dasD=0,dasLM=false,dasRM=false;

function initBgParticles(){
bgParticles=[];
for(let i=0;i<60;i++){
bgParticles.push({
x:Math.random()*800,y:Math.random()*640,
s:Math.random()*2+0.5,
sp:Math.random()*15+5,
a:Math.random()*0.3+0.05,
h:Math.random()*360
});
}
}

function initGame(){
board=Array.from({length:ROWS},()=>Array(COLS).fill(null));
piece=null;nextPieces=[];holdType=null;holdUsed=false;
score=0;lines=0;level=1;combo=-1;
dropTimer=0;lockTimer=0;lockResets=0;maxLockResets=15;lockDelay=500;
clearingRows=[];clearTimer=0;clearPhase=0;
particles=[];floatingTexts=[];
shakeX=0;shakeY=0;shakeTimer=0;
displayScore=0;
fillBag();fillBag();
spawnPiece();
dropInterval=getDropInterval();
}

let bag=[];
function fillBag(){
let b=[...TYPES];
for(let i=b.length-1;i>0;i--){let j=Math.random()*i+1|0;[b[i],b[j]]=[b[j],b[i]];}
nextPieces.push(...b);
}

function getDropInterval(){return Math.max(50,800-((level-1)*60));}

function spawnPiece(){
if(nextPieces.length<7)fillBag();
const type=nextPieces.shift();
const rot=0;
const shape=ALL_ROTATIONS[type][rot];
const n=shape.length;
const px=Math.floor((COLS-n)/2);
const py=type==='I'?-1:0;
piece={type,rot,x:px,y:py,shape};
if(!isValid(piece.shape,piece.x,piece.y)){
piece.y--;
if(!isValid(piece.shape,piece.x,piece.y)){
gameState='gameover';
playSound('gameover');
return;
}
}
lockTimer=0;lockResets=0;holdUsed=false;
dropTimer=0;
}

function isValid(shape,px,py){
const n=shape.length;
for(let r=0;r<n;r++)for(let c=0;c<n;c++){
if(!shape[r][c])continue;
const bx=px+c,by=py+r;
if(bx<0||bx>=COLS||by>=ROWS)return false;
if(by>=0&&board[by][bx])return false;
}
return true;
}

function tryMove(dx,dy){
if(!piece||gameState!=='playing')return false;
if(isValid(piece.shape,piece.x+dx,piece.y+dy)){
piece.x+=dx;piece.y+=dy;
if(dy===0){
if(!isOnGround())lockTimer=0;
else if(lockResets<maxLockResets){lockTimer=0;lockResets++;}
playSound('move');
}
return true;
}
return false;
}

function tryRotate(dir){
if(!piece||gameState!=='playing'||piece.type==='O')return;
const oldRot=piece.rot;
const newRot=(piece.rot+dir+4)%4;
const newShape=ALL_ROTATIONS[piece.type][newRot];
const key=''+oldRot+newRot;
const kicks=piece.type==='I'?KICKS_I[key]:KICKS_JLSTZ[key];
if(!kicks)return;
for(const[dx,dy]of kicks){
if(isValid(newShape,piece.x+dx,piece.y+dy)){
piece.x+=dx;piece.y+=dy;piece.rot=newRot;piece.shape=newShape;
if(!isOnGround())lockTimer=0;
else if(lockResets<maxLockResets){lockTimer=0;lockResets++;}
playSound('rotate');
return;
}
}
}

function isOnGround(){
return!isValid(piece.shape,piece.x,piece.y+1);
}

function getGhostY(){
if(!piece)return 0;
let gy=piece.y;
while(isValid(piece.shape,piece.x,gy+1))gy++;
return gy;
}

function hardDrop(){
if(!piece||gameState!=='playing')return;
const gy=getGhostY();
const dist=gy-piece.y;
score+=dist*2;
piece.y=gy;
addShake(3+Math.min(dist*0.3,5));
playSound('harddrop');
lockPiece();
}

function holdPiece(){
if(!piece||holdUsed||gameState!=='playing')return;
holdUsed=true;
const t=piece.type;
if(holdType){
nextPieces.unshift(holdType);
}
holdType=t;
spawnPiece();
playSound('hold');
}

function lockPiece(){
if(!piece)return;
const n=piece.shape.length;
let minY=ROWS;
for(let r=0;r<n;r++)for(let c=0;c<n;c++){
if(!piece.shape[r][c])continue;
const bx=piece.x+c,by=piece.y+r;
if(by<0){gameState='gameover';playSound('gameover');return;}
board[by][bx]={type:piece.type,flash:8};
if(by<minY)minY=by;
}
playSound('lock');
// Check lines
const fullRows=[];
for(let r=0;r<ROWS;r++){
if(board[r].every(c=>c!==null))fullRows.push(r);
}
if(fullRows.length>0){
clearingRows=fullRows;
clearTimer=0;clearPhase=0;
gameState='clearing';
combo++;
const pts=[0,100,300,500,800][fullRows.length]*level;
const comboBonus=combo>0?50*combo*level:0;
score+=pts+comboBonus;
lines+=fullRows.length;
const newLevel=Math.floor(lines/10)+1;
if(newLevel>level){level=newLevel;dropInterval=getDropInterval();addFloatingText('LEVEL '+level,BX+BW/2,BY+BH/2,'#fff',28);}
const names=['','SINGLE','DOUBLE','TRIPLE','QUAD!'];
const colors=['','#fff','#0f0','#ff0','#f0f'];
addFloatingText(names[fullRows.length],BX+BW/2,BY+fullRows[0]*CELL,colors[fullRows.length],fullRows.length===4?32:22);
if(combo>0)addFloatingText(combo+'x COMBO',BX+BW/2,BY+fullRows[0]*CELL+30,'#0ff',18);
if(fullRows.length===4)addShake(8);
else addShake(3);
playSound('clear'+Math.min(fullRows.length,4));
}else{
combo=-1;
spawnPiece();
}
}

function doClearAnimation(dt){
clearTimer+=dt;
if(clearPhase===0){
// Flash phase
if(clearTimer>250){clearPhase=1;clearTimer=0;
// Spawn particles
for(const r of clearingRows){
for(let c=0;c<COLS;c++){
const cell=board[r][c];if(!cell)continue;
const cx=BX+c*CELL+CELL/2,cy=BY+r*CELL+CELL/2;
const col=CLR[cell.type];
for(let i=0;i<8;i++){
const a=Math.random()*Math.PI*2;
const sp=Math.random()*4+2;
particles.push({x:cx,y:cy,vx:Math.cos(a)*sp,vy:Math.sin(a)*sp-2,
color:col.m,size:Math.random()*4+2,life:1,decay:Math.random()*0.8+0.8});
}
}
}
}
}else if(clearPhase===1){
if(clearTimer>200){
// Remove rows
const sorted=[...clearingRows].sort((a,b)=>b-a);
for(const r of sorted){board.splice(r,1);board.unshift(Array(COLS).fill(null));}
clearingRows=[];clearPhase=0;
gameState='playing';
spawnPiece();
}
}
}

function addShake(amount){shakeTimer=200;shakeX=(Math.random()-0.5)*amount;shakeY=(Math.random()-0.5)*amount;}
function addFloatingText(text,x,y,color,size){
floatingTexts.push({text,x,y,vy:-1.2,alpha:1,color,size,life:0,maxLife:1500});
}

// Particles update
function updateParticles(dt){
for(let i=particles.length-1;i>=0;i--){
const p=particles[i];
p.x+=p.vx;p.y+=p.vy;p.vy+=0.12;p.life-=p.decay*dt/1000;
if(p.life<=0)particles.splice(i,1);
}
for(let i=floatingTexts.length-1;i>=0;i--){
const f=floatingTexts[i];
f.life+=dt;f.y+=f.vy;f.alpha=Math.max(0,1-f.life/f.maxLife);
if(f.life>=f.maxLife)floatingTexts.splice(i,1);
}
}

function updateBgParticles(dt){
for(const p of bgParticles){
p.y-=p.sp*dt/1000;
if(p.y<-10){p.y=650;p.x=Math.random()*800;}
}
}

// Sound
function initAudio(){if(!audioCtx)audioCtx=new(window.AudioContext||window.webkitAudioContext)();}
function playSound(type){
if(!soundOn||!audioCtx)return;
try{
const now=audioCtx.currentTime;
const g=audioCtx.createGain();g.connect(audioCtx.destination);
const o=audioCtx.createOscillator();o.connect(g);
switch(type){
case'move':o.frequency.value=300;o.type='sine';g.gain.setValueAtTime(0.08,now);g.gain.exponentialRampToValueAtTime(0.001,now+0.05);o.start(now);o.stop(now+0.05);break;
case'rotate':o.frequency.value=500;o.type='sine';g.gain.setValueAtTime(0.1,now);g.gain.exponentialRampToValueAtTime(0.001,now+0.08);o.start(now);o.stop(now+0.08);break;
case'lock':o.frequency.value=150;o.type='triangle';g.gain.setValueAtTime(0.15,now);g.gain.exponentialRampToValueAtTime(0.001,now+0.12);o.start(now);o.stop(now+0.12);break;
case'harddrop':o.frequency.value=80;o.type='sawtooth';g.gain.setValueAtTime(0.2,now);g.gain.exponentialRampToValueAtTime(0.001,now+0.15);o.start(now);o.stop(now+0.15);break;
case'hold':o.frequency.value=400;o.type='sine';g.gain.setValueAtTime(0.06,now);o.frequency.linearRampToValueAtTime(600,now+0.06);g.gain.exponentialRampToValueAtTime(0.001,now+0.08);o.start(now);o.stop(now+0.08);break;
case'clear1':case'clear2':case'clear3':case'clear4':{
const n=parseInt(type[5]);
o.type='square';g.gain.setValueAtTime(0.12,now);
o.frequency.setValueAtTime(300,now);
o.frequency.linearRampToValueAtTime(300+n*200,now+0.15+n*0.05);
g.gain.exponentialRampToValueAtTime(0.001,now+0.2+n*0.08);
o.start(now);o.stop(now+0.3+n*0.08);break;}
case'gameover':{o.type='sawtooth';o.frequency.setValueAtTime(400,now);o.frequency.linearRampToValueAtTime(80,now+0.8);g.gain.setValueAtTime(0.15,now);g.gain.exponentialRampToValueAtTime(0.001,now+1);o.start(now);o.stop(now+1);break;}
}
}catch(e){}
}

// Input
function handleKey(e,down){
if(gameState==='start'){if(down){gameState='playing';initAudio();}return;}
if(gameState==='gameover'&&down){
if(e.key==='Enter'||e.key===' '){initGame();gameState='playing';}return;
}
if(down&&e.key==='p'||down&&e.key==='P'){
if(gameState==='playing')gameState='paused';
else if(gameState==='paused')gameState='playing';
return;
}
if(gameState!=='playing')return;
if(e.key==='ArrowLeft'){
if(down&&!inputState.left){inputState.left=true;dasL=0;dasLM=false;tryMove(-1,0);}
if(!down)inputState.left=false;
}
if(e.key==='ArrowRight'){
if(down&&!inputState.right){inputState.right=true;dasR=0;dasRM=false;tryMove(1,0);}
if(!down)inputState.right=false;
}
if(e.key==='ArrowDown'){
if(down&&!inputState.down){inputState.down=true;dasD=0;}
if(!down)inputState.down=false;
}
if(down&&e.key==='ArrowUp')tryRotate(1);
if(down&&(e.key==='z'||e.key==='Z'))tryRotate(-1);
if(down&&e.key===' ')hardDrop();
if(down&&(e.key==='c'||e.key==='C'||e.key==='Shift'))holdPiece();
}

document.addEventListener('keydown',e=>{
if(['ArrowUp','ArrowDown','ArrowLeft','ArrowRight',' '].includes(e.key))e.preventDefault();
if(!e.repeat)handleKey(e,true);
});
document.addEventListener('keyup',e=>handleKey(e,false));
C.addEventListener('click',()=>{
if(gameState==='start'){gameState='playing';initAudio();}
else if(gameState==='gameover'){initGame();gameState='playing';}
});
C.addEventListener('mousedown',e=>{
// Sound toggle
const sx=745,sy=10,sw=45,sh=25;
const rect=C.getBoundingClientRect();
const mx=e.clientX-rect.left,my=e.clientY-rect.top;
if(mx>=sx&&mx<=sx+sw&&my>=sy&&my<=sy+sh){
initAudio();soundOn=!soundOn;
if(soundOn)playSound('rotate');
}
});

function updateDAS(dt){
if(gameState!=='playing')return;
if(inputState.left){
dasL+=dt;
if(dasL>=DAS_DELAY){
if(!dasLM){dasLM=true;dasL=DAS_DELAY;}
while(dasL>=DAS_DELAY+ARR){tryMove(-1,0);dasL-=ARR;}
}
}
if(inputState.right){
dasR+=dt;
if(dasR>=DAS_DELAY){
if(!dasRM){dasRM=true;dasR=DAS_DELAY;}
while(dasR>=DAS_DELAY+ARR){tryMove(1,0);dasR-=ARR;}
}
}
if(inputState.down){
dasD+=dt;
while(dasD>=SOFT_DROP_INT){
if(tryMove(0,1))score++;
dasD-=SOFT_DROP_INT;
}
}
}

// Rendering
function drawBlock(px,py,type,alpha,size){
const s=size||CELL;
const c=CLR[type];
X.globalAlpha=alpha;
// Shadow
X.fillStyle=c.d;
X.fillRect(px,py,s,s);
// Main face
const m=3;
X.fillStyle=c.m;
X.fillRect(px+1,py+1,s-2,s-2);
// Top-left highlight
X.fillStyle=c.l;
X.beginPath();X.moveTo(px+1,py+1);X.lineTo(px+s-1,py+1);X.lineTo(px+s-m,py+m);X.lineTo(px+m,py+m);X.lineTo(px+m,py+s-m);X.lineTo(px+1,py+s-1);X.fill();
// Bottom-right shadow
X.fillStyle=c.d;
X.beginPath();X.moveTo(px+s-1,py+1);X.lineTo(px+s-1,py+s-1);X.lineTo(px+1,py+s-1);X.lineTo(px+m,py+s-m);X.lineTo(px+s-m,py+s-m);X.lineTo(px+s-m,py+m);X.fill();
// Center
X.fillStyle=c.m;
X.fillRect(px+m,py+m,s-m*2,s-m*2);
// Gloss
const grad=X.createLinearGradient(px,py,px,py+s);
grad.addColorStop(0,'rgba(255,255,255,0.22)');
grad.addColorStop(0.5,'rgba(255,255,255,0.05)');
grad.addColorStop(1,'rgba(0,0,0,0.1)');
X.fillStyle=grad;
X.fillRect(px+1,py+1,s-2,s-2);
X.globalAlpha=1;
}

function drawGhostBlock(px,py,type){
const s=CELL;
X.globalAlpha=0.2;
X.strokeStyle=CLR[type].m;
X.lineWidth=2;
X.strokeRect(px+1,py+1,s-2,s-2);
X.fillStyle=CLR[type].m;
X.fillRect(px+2,py+2,s-4,s-4);
X.globalAlpha=1;
}

function drawBg(){
const grad=X.createLinearGradient(0,0,0,640);
grad.addColorStop(0,'#08081a');
grad.addColorStop(0.5,'#0c0c28');
grad.addColorStop(1,'#060618');
X.fillStyle=grad;
X.fillRect(0,0,800,640);
for(const p of bgParticles){
X.globalAlpha=p.a;
X.fillStyle=`hsl(${p.h},60%,70%)`;
X.beginPath();X.arc(p.x,p.y,p.s,0,Math.PI*2);X.fill();
}
X.globalAlpha=1;
}

function drawBoard(){
// Board background
X.fillStyle='rgba(0,0,0,0.6)';
X.fillRect(BX-2,BY-2,BW+4,BH+4);
// Glow border
X.shadowColor='rgba(60,120,255,0.5)';X.shadowBlur=15;
X.strokeStyle='rgba(80,140,255,0.6)';X.lineWidth=2;
X.strokeRect(BX-2,BY-2,BW+4,BH+4);
X.shadowBlur=0;
// Grid lines
X.strokeStyle='rgba(40,50,80,0.3)';X.lineWidth=0.5;
for(let r=0;r<=ROWS;r++){
X.beginPath();X.moveTo(BX,BY+r*CELL);X.lineTo(BX+BW,BY+r*CELL);X.stroke();
}
for(let c=0;c<=COLS;c++){
X.beginPath();X.moveTo(BX+c*CELL,BY);X.lineTo(BX+c*CELL,BY+BH);X.stroke();
}
// Locked blocks
for(let r=0;r<ROWS;r++)for(let c=0;c<COLS;c++){
const cell=board[r][c];if(!cell)continue;
let alpha=1;
if(clearingRows.includes(r)){
if(clearPhase===0){
alpha=0.3+Math.sin(clearTimer*0.03)*0.7;
}else{alpha=Math.max(0,1-clearTimer/200);}
}
if(cell.flash>0){alpha=Math.min(1,alpha+cell.flash*0.05);}
drawBlock(BX+c*CELL,BY+r*CELL,cell.type,alpha);
}
}

function drawPiece(){
if(!piece||gameState==='clearing')return;
const gy=getGhostY();
const n=piece.shape.length;
// Ghost
if(gy!==piece.y){
for(let r=0;r<n;r++)for(let c=0;c<n;c++){
if(!piece.shape[r][c])continue;
const by=gy+r;if(by<0)continue;
drawGhostBlock(BX+(piece.x+c)*CELL,BY+by*CELL,piece.type);
}
}
// Active piece
for(let r=0;r<n;r++)for(let c=0;c<n;c++){
if(!piece.shape[r][c])continue;
const by=piece.y+r;if(by<0)continue;
drawBlock(BX+(piece.x+c)*CELL,BY+by*CELL,piece.type,1);
}
// Glow under active piece
X.globalAlpha=0.15;
for(let r=0;r<n;r++)for(let c=0;c<n;c++){
if(!piece.shape[r][c])continue;
const px=BX+(piece.x+c)*CELL,py=BY+(piece.y+r)*CELL;
if(py<BY)continue;
X.shadowColor=CLR[piece.type].m;X.shadowBlur=12;
X.fillStyle=CLR[piece.type].m;
X.fillRect(px,py,CELL,CELL);
X.shadowBlur=0;
}
X.globalAlpha=1;
}

function drawPreview(type,cx,cy,label,cellSz){
const sz=cellSz||20;
X.fillStyle='rgba(255,255,255,0.7)';
X.font='bold 12px "Segoe UI",Arial,sans-serif';
X.textAlign='center';
X.fillText(label,cx,cy-35);
// Box
X.fillStyle='rgba(0,0,0,0.3)';
X.strokeStyle='rgba(80,140,255,0.3)';X.lineWidth=1;
const bw=100,bh=72;
X.fillRect(cx-bw/2,cy-bh/2,bw,bh);
X.strokeRect(cx-bw/2,cy-bh/2,bw,bh);
if(!type)return;
const shape=ALL_ROTATIONS[type][0];
const n=shape.length;
const ox=cx-(n*sz)/2,oy=cy-(n*sz)/2;
for(let r=0;r<n;r++)for(let c=0;c<n;c++){
if(!shape[r][c])continue;
drawBlock(ox+c*sz,oy+r*sz,type,1,sz);
}
}

function drawUI(){
const rx=620,lx=140;
// Next piece
drawPreview(nextPieces[0],rx,BY+55,'NEXT');
// Next 2 & 3 (smaller)
if(nextPieces.length>1)drawPreview(nextPieces[1],rx,BY+160,''  ,14);
if(nextPieces.length>2)drawPreview(nextPieces[2],rx,BY+240,'',14);
// Hold
drawPreview(holdType,lx,BY+55,'HOLD');
// Score
X.textAlign='center';
X.fillStyle='rgba(100,180,255,0.8)';
X.font='bold 11px "Segoe UI",Arial,sans-serif';
X.fillText('SCORE',rx,BY+310);
X.fillStyle='#fff';X.font='bold 22px "Segoe UI",Arial,sans-serif';
X.fillText(Math.floor(displayScore).toLocaleString(),rx,BY+338);
// Lines
X.fillStyle='rgba(100,180,255,0.8)';X.font='bold 11px "Segoe UI",Arial,sans-serif';
X.fillText('LINES',rx,BY+378);
X.fillStyle='#fff';X.font='bold 20px "Segoe UI",Arial,sans-serif';
X.fillText(lines,rx,BY+403);
// Level
X.fillStyle='rgba(100,180,255,0.8)';X.font='bold 11px "Segoe UI",Arial,sans-serif';
X.fillText('LEVEL',rx,BY+443);
X.fillStyle='#fff';X.font='bold 20px "Segoe UI",Arial,sans-serif';
X.fillText(level,rx,BY+468);
// Lines to next level
const linesNext=(Math.floor(lines/10)+1)*10-lines;
X.fillStyle='rgba(160,160,200,0.5)';X.font='10px "Segoe UI",Arial,sans-serif';
X.fillText('next: '+linesNext+' lines',rx,BY+490);
// Sound toggle
const sx=745,sy=10;
X.fillStyle=soundOn?'rgba(0,230,118,0.8)':'rgba(255,255,255,0.3)';
X.font='11px "Segoe UI",Arial,sans-serif';
X.textAlign='center';
X.fillText(soundOn?'🔊 ON':'🔇 OFF',sx+22,sy+17);
// Left panel stats
X.textAlign='center';
X.fillStyle='rgba(160,160,200,0.5)';X.font='10px "Segoe UI",Arial,sans-serif';
X.fillText('Speed: '+dropInterval+'ms',lx,BY+155);
if(combo>0){
X.fillStyle='#0ff';X.font='bold 14px "Segoe UI",Arial,sans-serif';
X.fillText('COMBO x'+combo,lx,BY+185);
}
}

function drawParticles(){
for(const p of particles){
X.globalAlpha=Math.max(0,p.life);
X.fillStyle=p.color;
X.shadowColor=p.color;X.shadowBlur=4;
X.fillRect(p.x-p.size/2,p.y-p.size/2,p.size*p.life,p.size*p.life);
X.shadowBlur=0;
}
X.globalAlpha=1;
for(const f of floatingTexts){
X.globalAlpha=f.alpha;
X.fillStyle=f.color;
X.font=`bold ${f.size}px "Segoe UI",Arial,sans-serif`;
X.textAlign='center';
X.shadowColor=f.color;X.shadowBlur=8;
X.fillText(f.text,f.x,f.y);
X.shadowBlur=0;
}
X.globalAlpha=1;
}

function drawOverlay(title,subtitle,sub2){
X.fillStyle='rgba(5,5,20,0.85)';
X.fillRect(0,0,800,640);
// Border glow box
const bx=250,by2=130,bw2=300,bh2=380;
X.strokeStyle='rgba(80,140,255,0.5)';X.lineWidth=2;
X.shadowColor='rgba(60,120,255,0.6)';X.shadowBlur=20;
X.strokeRect(bx,by2,bw2,bh2);
X.shadowBlur=0;
X.fillStyle='rgba(10,10,30,0.9)';
X.fillRect(bx,by2,bw2,bh2);
X.textAlign='center';
let ty=by2+55;
X.fillStyle='#fff';
X.shadowColor='rgba(100,200,255,0.8)';X.shadowBlur=10;
X.font='bold 30px "Segoe UI",Arial,sans-serif';
X.fillText(title,400,ty);
X.shadowBlur=0;
ty+=35;
if(subtitle){
X.fillStyle='rgba(180,200,255,0.8)';X.font='15px "Segoe UI",Arial,sans-serif';
const lines2=subtitle.split('\n');
for(const l of lines2){X.fillText(l,400,ty);ty+=22;}
}
ty+=10;
if(sub2){
X.fillStyle='rgba(100,200,255,0.9)';X.font='bold 14px "Segoe UI",Arial,sans-serif';
X.fillText(sub2,400,ty);
}
}

function drawStartScreen(){
drawOverlay('BLOCK CASCADE',
'← →  Move piece\n↑  Rotate clockwise\nZ  Rotate counter-clockwise\n↓  Soft drop\nSPACE  Hard drop\nC / SHIFT  Hold piece\nP  Pause',
'Click or press any key to start');
// Decorative falling blocks
const t=Date.now()*0.001;
for(let i=0;i<7;i++){
const type=TYPES[i];
const bx=120+i*85;
const by=540+Math.sin(t+i*1.2)*20;
drawBlock(bx,by,type,0.6,22);
}
}

function drawPauseScreen(){
drawOverlay('PAUSED','','Press P to resume');
}

function drawGameOverScreen(){
drawOverlay('GAME OVER',
'Score: '+score.toLocaleString()+'\nLines: '+lines+'\nLevel: '+level,
'Press Enter or click to play again');
}

function update(dt){
if(gameState==='playing'){
updateDAS(dt);
if(piece){
dropTimer+=dt;
if(dropTimer>=dropInterval){
dropTimer-=dropInterval;
if(!tryMove(0,1)){
// On ground
}
}
if(isOnGround()){
lockTimer+=dt;
if(lockTimer>=lockDelay)lockPiece();
}else{lockTimer=0;}
}
// Flash decay
for(let r=0;r<ROWS;r++)for(let c=0;c<COLS;c++){
if(board[r][c]&&board[r][c].flash>0)board[r][c].flash-=dt*0.02;
}
}
if(gameState==='clearing')doClearAnimation(dt);
updateParticles(dt);
updateBgParticles(dt);
if(shakeTimer>0){
shakeTimer-=dt;
shakeX*=0.9;shakeY*=0.9;
if(shakeTimer<=0){shakeX=0;shakeY=0;}
}
// Smooth score
displayScore+=(score-displayScore)*Math.min(1,dt*0.008);
if(Math.abs(displayScore-score)<1)displayScore=score;
}

function draw(){
X.save();
X.translate(shakeX,shakeY);
drawBg();
drawBoard();
drawPiece();
drawParticles();
drawUI();
X.restore();
if(gameState==='start')drawStartScreen();
else if(gameState==='paused')drawPauseScreen();
else if(gameState==='gameover')drawGameOverScreen();
}

function loop(time){
const dt=lastTime?Math.min(time-lastTime,50):16;
lastTime=time;
update(dt);
draw();
requestAnimationFrame(loop);
}

// Init
initBgParticles();
initGame();
gameState='start';
lastTime=0;
requestAnimationFrame(loop);
</script>
</body>
</html>
```