Upload 51 files

.gitattributes

@@ -33,3 +33,14 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+public/assets/music/level-1/track.mp3 filter=lfs diff=lfs merge=lfs -text
+public/assets/music/level-10/track.mp3 filter=lfs diff=lfs merge=lfs -text
+public/assets/music/level-2/track.mp3 filter=lfs diff=lfs merge=lfs -text
+public/assets/music/level-3/track.mp3 filter=lfs diff=lfs merge=lfs -text
+public/assets/music/level-4/track.mp3 filter=lfs diff=lfs merge=lfs -text
+public/assets/music/level-5/track.mp3 filter=lfs diff=lfs merge=lfs -text
+public/assets/music/level-6/track.mp3 filter=lfs diff=lfs merge=lfs -text
+public/assets/music/level-7/track.mp3 filter=lfs diff=lfs merge=lfs -text
+public/assets/music/level-8/track.mp3 filter=lfs diff=lfs merge=lfs -text
+public/assets/music/level-9/track.mp3 filter=lfs diff=lfs merge=lfs -text
+public/assets/tv.png filter=lfs diff=lfs merge=lfs -text

public/assets/fonts/thick_8x8.xml

@@ -0,0 +1,276 @@
+<?xml version="1.0"?>
+<font>
+    <info face="thick_8x8" size="10" bold="0" italic="0"/>
+    <common lineHeight="12" base="10" scaleW="104" scaleH="56" pages="1" packed="0"/>
+    <pages>
+        <page id="0" file="thick_8x8.png"/>
+    </pages>
+    <chars count="91">
+        
+        <char id="65" x="0" y="0" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- A -->
+    
+        <char id="66" x="8" y="0" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- B -->
+    
+        <char id="67" x="16" y="0" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- C -->
+    
+        <char id="68" x="24" y="0" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- D -->
+    
+        <char id="69" x="32" y="0" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- E -->
+    
+        <char id="70" x="40" y="0" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- F -->
+    
+        <char id="71" x="48" y="0" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- G -->
+    
+        <char id="72" x="56" y="0" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- H -->
+    
+        <char id="73" x="64" y="0" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- I -->
+    
+        <char id="74" x="72" y="0" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- J -->
+    
+        <char id="75" x="80" y="0" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- K -->
+    
+        <char id="76" x="88" y="0" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- L -->
+    
+        <char id="77" x="96" y="0" width="8" height="8" page="0" xadvance="9" xoffset="0" yoffset="0"/>
+        <!-- M -->
+    
+        <char id="78" x="0" y="8" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- N -->
+    
+        <char id="79" x="8" y="8" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- O -->
+    
+        <char id="80" x="16" y="8" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- P -->
+    
+        <char id="81" x="24" y="8" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- Q -->
+    
+        <char id="82" x="32" y="8" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- R -->
+    
+        <char id="83" x="40" y="8" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- S -->
+    
+        <char id="84" x="48" y="8" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- T -->
+    
+        <char id="85" x="56" y="8" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- U -->
+    
+        <char id="86" x="64" y="8" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- V -->
+    
+        <char id="87" x="72" y="8" width="8" height="8" page="0" xadvance="9" xoffset="0" yoffset="0"/>
+        <!-- W -->
+    
+        <char id="88" x="80" y="8" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- X -->
+    
+        <char id="89" x="88" y="8" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- Y -->
+    
+        <char id="90" x="96" y="8" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- Z -->
+    
+        <char id="97" x="0" y="16" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- a -->
+    
+        <char id="98" x="8" y="16" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- b -->
+    
+        <char id="99" x="16" y="16" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- c -->
+    
+        <char id="100" x="24" y="16" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- d -->
+    
+        <char id="101" x="32" y="16" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- e -->
+    
+        <char id="102" x="40" y="16" width="8" height="8" page="0" xadvance="7" xoffset="0" yoffset="0"/>
+        <!-- f -->
+    
+        <char id="103" x="48" y="16" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- g -->
+    
+        <char id="104" x="56" y="16" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- h -->
+    
+        <char id="105" x="64" y="16" width="8" height="8" page="0" xadvance="5" xoffset="0" yoffset="0"/>
+        <!-- i -->
+    
+        <char id="106" x="72" y="16" width="8" height="8" page="0" xadvance="7" xoffset="0" yoffset="0"/>
+        <!-- j -->
+    
+        <char id="107" x="80" y="16" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- k -->
+    
+        <char id="108" x="88" y="16" width="8" height="8" page="0" xadvance="5" xoffset="0" yoffset="0"/>
+        <!-- l -->
+    
+        <char id="109" x="96" y="16" width="8" height="8" page="0" xadvance="9" xoffset="0" yoffset="0"/>
+        <!-- m -->
+    
+        <char id="110" x="0" y="24" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- n -->
+    
+        <char id="111" x="8" y="24" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- o -->
+    
+        <char id="112" x="16" y="24" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- p -->
+    
+        <char id="113" x="24" y="24" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- q -->
+    
+        <char id="114" x="32" y="24" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- r -->
+    
+        <char id="115" x="40" y="24" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- s -->
+    
+        <char id="116" x="48" y="24" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- t -->
+    
+        <char id="117" x="56" y="24" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- u -->
+    
+        <char id="118" x="64" y="24" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- v -->
+    
+        <char id="119" x="72" y="24" width="8" height="8" page="0" xadvance="9" xoffset="0" yoffset="0"/>
+        <!-- w -->
+    
+        <char id="120" x="80" y="24" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- x -->
+    
+        <char id="121" x="88" y="24" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- y -->
+    
+        <char id="122" x="96" y="24" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- z -->
+    
+        <char id="48" x="0" y="32" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- 0 -->
+    
+        <char id="49" x="8" y="32" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- 1 -->
+    
+        <char id="50" x="16" y="32" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- 2 -->
+    
+        <char id="51" x="24" y="32" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- 3 -->
+    
+        <char id="52" x="32" y="32" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- 4 -->
+    
+        <char id="53" x="40" y="32" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- 5 -->
+    
+        <char id="54" x="48" y="32" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- 6 -->
+    
+        <char id="55" x="56" y="32" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- 7 -->
+    
+        <char id="56" x="64" y="32" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- 8 -->
+    
+        <char id="57" x="72" y="32" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- 9 -->
+    
+        <char id="43" x="80" y="32" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- + -->
+    
+        <char id="45" x="88" y="32" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- - -->
+    
+        <char id="61" x="96" y="32" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- = -->
+    
+        <char id="40" x="0" y="40" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- ( -->
+    
+        <char id="41" x="8" y="40" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- ) -->
+    
+        <char id="91" x="16" y="40" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- [ -->
+    
+        <char id="93" x="24" y="40" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- ] -->
+    
+        <char id="123" x="32" y="40" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- { -->
+    
+        <char id="125" x="40" y="40" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- } -->
+    
+        <char id="60" x="48" y="40" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- < -->
+    
+        <char id="62" x="56" y="40" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- > -->
+    
+        <char id="47" x="64" y="40" width="8" height="8" page="0" xadvance="6" xoffset="0" yoffset="0"/>
+        <!-- / -->
+    
+        <char id="42" x="72" y="40" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- * -->
+    
+        <char id="58" x="80" y="40" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- : -->
+    
+        <char id="35" x="88" y="40" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- # -->
+    
+        <char id="37" x="96" y="40" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- % -->
+    
+        <char id="33" x="0" y="48" width="8" height="8" page="0" xadvance="4" xoffset="0" yoffset="0"/>
+        <!-- ! -->
+    
+        <char id="63" x="8" y="48" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- ? -->
+    
+        <char id="46" x="16" y="48" width="8" height="8" page="0" xadvance="4" xoffset="0" yoffset="0"/>
+        <!-- . -->
+
+        <char id="44" x="24" y="48" width="8" height="8" page="0" xadvance="6" xoffset="0" yoffset="0"/>
+        <!-- , -->
+
+        <char id="39" x="32" y="48" width="8" height="8" page="0" xadvance="4" xoffset="0" yoffset="0"/>
+        <!-- ' -->
+    
+        <char id="34" x="40" y="48" width="8" height="8" page="0" xadvance="7" xoffset="0" yoffset="0"/>
+        <!-- " -->
+    
+        <char id="64" x="48" y="48" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- @ -->
+    
+        <char id="38" x="56" y="48" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- & -->
+    
+        <char id="36" x="64" y="48" width="8" height="8" page="0" xadvance="8" xoffset="0" yoffset="0"/>
+        <!-- $ -->
+    
+        <char id="32" x="72" y="48" width="8" height="8" page="0" xadvance="6" xoffset="0" yoffset="0"/>
+        <!--   -->
+    
+    </chars>
+</font>
+    

public/assets/music/level-1/track.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2d7c6678c69eb655135dead8900255f92addcd43829573c8a5b51250c8362a66
+size 3095196

public/assets/music/level-10/track.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:bfe26f1a1561409094c22f299d56c0bc669081397a62e6b33b5ee8f0942ed2cf
+size 3379882

public/assets/music/level-2/track.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0a963babd307c9dc6f4130cdf1a46a325a016e20c855f26b02147584fbd6db00
+size 3552437

public/assets/music/level-3/track.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:da2f3c48ba7204dbe4c8204e7ab975f0790096a02c44e8c9c251be2196043377
+size 2951867

public/assets/music/level-4/track.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c5fe5a6007c042b9173e1b1a4c8cc34b642ad18ba7f0332d1c7ec7ee48717bc3
+size 2826888

public/assets/music/level-5/track.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6d80b9049d1ec638813ae6332427ddda79843255b1fbc78fd8281791d8c1940f
+size 2922595

public/assets/music/level-6/track.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:dc4a2932dc8dcee1d2d69f122bf35bd3fe1a10fe3f271e30053f4ff0a36f4141
+size 2504409

public/assets/music/level-7/track.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2ec0c8c525cfd451c194eded97ca17ded86be87a457e016732739c50376ebccd
+size 2747379

public/assets/music/level-8/track.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4a7fdf42c917607f67c0ecc24869c59d7c19f3d87c33232b01b639b306593c11
+size 3645189

public/assets/music/level-9/track.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e35ae825ee92e94e986e8e1cb63f96b42b3a9e58a87fa2b02e9e430cae54d30a
+size 3038032

public/template-generator.html

@@ -0,0 +1,184 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Backdrop Template Generator</title>
+    <style>
+        body {
+            margin: 20px;
+            font-family: monospace;
+            background: #222;
+            color: #fff;
+        }
+        canvas {
+            border: 2px solid #fff;
+            image-rendering: pixelated;
+            image-rendering: crisp-edges;
+            display: block;
+            margin: 20px 0;
+        }
+        button {
+            background: #4CAF50;
+            color: white;
+            padding: 10px 20px;
+            border: none;
+            cursor: pointer;
+            font-family: monospace;
+            font-size: 14px;
+            margin: 5px;
+        }
+        button:hover {
+            background: #45a049;
+        }
+        .info {
+            background: #333;
+            padding: 15px;
+            margin: 10px 0;
+            border-left: 4px solid #4CAF50;
+        }
+    </style>
+</head>
+<body>
+    <h1>Tetris Backdrop Template Generator</h1>
+    
+    <div class="info">
+        <h3>Instructions:</h3>
+        <ol>
+            <li>Click "Download Template" to save the template image</li>
+            <li>Open the template in your image editor (Photoshop, GIMP, etc.)</li>
+            <li>The <strong style="color: #000;">BLACK area with MAGENTA border</strong> is the play area (80×160 pixels)</li>
+            <li>The play area will be BLACK in-game, so design around it</li>
+            <li>Create your artwork on layers below the template</li>
+            <li>Delete the template layer when done</li>
+            <li>Export as 256×224 PNG</li>
+            <li>Save to <code>public/assets/backdrops/level-X/backdrop.png</code></li>
+        </ol>
+    </div>
+
+    <canvas id="template" width="256" height="224"></canvas>
+    
+    <button onclick="downloadTemplate()">Download Template (BACKDROP-TEMPLATE.png)</button>
+    <button onclick="downloadBlankTemplate()">Download Blank Template (no labels)</button>
+    
+    <div class="info">
+        <h3>Specifications:</h3>
+        <ul>
+            <li><strong>Total Size:</strong> 256 × 224 pixels</li>
+            <li><strong>Play Area Position:</strong> X: 88, Y: 32</li>
+            <li><strong>Play Area Size:</strong> 80 × 160 pixels</li>
+            <li><strong>Grid:</strong> 10 blocks wide × 20 blocks tall</li>
+            <li><strong>Block Size:</strong> 8 × 8 pixels</li>
+        </ul>
+    </div>
+
+    <script>
+        const canvas = document.getElementById('template');
+        const ctx = canvas.getContext('2d');
+
+        function drawTemplate(includeLabels = true) {
+            // Background - light gray
+            ctx.fillStyle = '#CCCCCC';
+            ctx.fillRect(0, 0, 256, 224);
+
+            // Play area - BLACK (as it appears in game)
+            ctx.fillStyle = '#000000';
+            ctx.fillRect(88, 32, 80, 160);
+
+            // Magenta outline to show the boundary clearly
+            ctx.strokeStyle = '#FF00FF';
+            ctx.lineWidth = 2;
+            ctx.strokeRect(88, 32, 80, 160);
+            
+            // Add grid lines in play area (light gray on black)
+            ctx.strokeStyle = '#444444';
+            ctx.lineWidth = 1;
+            // Vertical lines every 8 pixels
+            for (let x = 88; x <= 168; x += 8) {
+                ctx.beginPath();
+                ctx.moveTo(x, 32);
+                ctx.lineTo(x, 192);
+                ctx.stroke();
+            }
+            // Horizontal lines every 8 pixels
+            for (let y = 32; y <= 192; y += 8) {
+                ctx.beginPath();
+                ctx.moveTo(88, y);
+                ctx.lineTo(168, y);
+                ctx.stroke();
+            }
+            
+            if (includeLabels) {
+                // Add labels
+                ctx.fillStyle = '#000000';
+                ctx.font = 'bold 12px monospace';
+                ctx.fillText('TETRIS BACKDROP TEMPLATE', 30, 15);
+                
+                ctx.font = '10px monospace';
+                ctx.fillText('256 x 224 pixels', 85, 215);
+                
+                // Play area label
+                ctx.fillStyle = '#00FF00';
+                ctx.font = 'bold 10px monospace';
+                ctx.fillText('PLAY AREA', 100, 110);
+                ctx.fillText('(BLACK)', 105, 122);
+                ctx.fillText('80 x 160', 105, 134);
+                
+                // Coordinates
+                ctx.fillStyle = '#000000';
+                ctx.font = '8px monospace';
+                ctx.fillText('(88,32)', 90, 28);
+                ctx.fillText('(168,192)', 130, 200);
+                
+                // UI area labels
+                ctx.fillStyle = '#666666';
+                ctx.font = '8px monospace';
+                ctx.fillText('SCORE/LEVEL', 10, 20);
+                ctx.fillText('AREA', 10, 30);
+                ctx.fillText('NEXT PIECE', 185, 20);
+                ctx.fillText('AREA', 185, 30);
+            }
+            
+            // Corner markers
+            ctx.fillStyle = '#FF0000';
+            const markerSize = 6;
+            ctx.fillRect(88 - markerSize/2, 32 - markerSize/2, markerSize, markerSize);
+            ctx.fillRect(168 - markerSize/2, 32 - markerSize/2, markerSize, markerSize);
+            ctx.fillRect(88 - markerSize/2, 192 - markerSize/2, markerSize, markerSize);
+            ctx.fillRect(168 - markerSize/2, 192 - markerSize/2, markerSize, markerSize);
+        }
+
+        function downloadTemplate() {
+            ctx.clearRect(0, 0, 256, 224);
+            drawTemplate(true);
+            
+            canvas.toBlob(function(blob) {
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = 'BACKDROP-TEMPLATE.png';
+                a.click();
+                URL.revokeObjectURL(url);
+            });
+        }
+
+        function downloadBlankTemplate() {
+            ctx.clearRect(0, 0, 256, 224);
+            drawTemplate(false);
+            
+            canvas.toBlob(function(blob) {
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = 'BACKDROP-TEMPLATE-BLANK.png';
+                a.click();
+                URL.revokeObjectURL(url);
+            });
+        }
+
+        // Draw initial template
+        drawTemplate(true);
+    </script>
+</body>
+</html>
+

scripts/generate-placeholders.js

@@ -0,0 +1,188 @@
+/**
+ * Generate placeholder assets for all 10 levels
+ * Run with: node scripts/generate-placeholders.js
+ */
+
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const projectRoot = path.join(__dirname, '..');
+
+// Create directories
+const assetsDir = path.join(projectRoot, 'public', 'assets');
+const backdropsDir = path.join(assetsDir, 'backdrops');
+const musicDir = path.join(assetsDir, 'music');
+
+// Ensure directories exist
+fs.mkdirSync(backdropsDir, { recursive: true });
+fs.mkdirSync(musicDir, { recursive: true });
+
+// Color palettes for each level
+const levelPalettes = [
+  ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8', '#F7DC6F', '#BB8FCE'], // Level 1 - Warm
+  ['#3498DB', '#E74C3C', '#2ECC71', '#F39C12', '#9B59B6', '#1ABC9C', '#E67E22'], // Level 2 - Primary
+  ['#FF1744', '#00E676', '#2979FF', '#FFEA00', '#D500F9', '#00E5FF', '#FF9100'], // Level 3 - Neon
+  ['#8E44AD', '#16A085', '#C0392B', '#F39C12', '#2980B9', '#27AE60', '#D35400'], // Level 4 - Deep
+  ['#FF6F61', '#6B5B95', '#88B04B', '#F7CAC9', '#92A8D1', '#955251', '#B565A7'], // Level 5 - Pastel
+  ['#34495E', '#E74C3C', '#ECF0F1', '#3498DB', '#2ECC71', '#F39C12', '#9B59B6'], // Level 6 - Modern
+  ['#FF4500', '#FFD700', '#00CED1', '#FF1493', '#00FF00', '#1E90FF', '#FF69B4'], // Level 7 - Vibrant
+  ['#8B4513', '#DAA520', '#CD853F', '#D2691E', '#B8860B', '#A0522D', '#DEB887'], // Level 8 - Earth
+  ['#000080', '#4B0082', '#8B008B', '#9400D3', '#9932CC', '#BA55D3', '#DA70D6'], // Level 9 - Purple
+  ['#FF0000', '#FF4500', '#FF6347', '#FF7F50', '#FFA500', '#FFD700', '#FFFF00']  // Level 10 - Fire
+];
+
+// Generate backdrop images using Canvas API (Node.js)
+async function generateBackdrop(level, palette) {
+  const { createCanvas } = await import('canvas');
+  const canvas = createCanvas(256, 224);
+  const ctx = canvas.getContext('2d');
+
+  // Create gradient background
+  const gradient = ctx.createLinearGradient(0, 0, 256, 224);
+  gradient.addColorStop(0, palette[0]);
+  gradient.addColorStop(0.5, palette[1]);
+  gradient.addColorStop(1, palette[2]);
+  ctx.fillStyle = gradient;
+  ctx.fillRect(0, 0, 256, 224);
+
+  // Add some retro patterns
+  ctx.fillStyle = palette[3];
+  ctx.globalAlpha = 0.1;
+  for (let i = 0; i < 50; i++) {
+    const x = Math.random() * 256;
+    const y = Math.random() * 224;
+    const size = Math.random() * 20 + 5;
+    ctx.fillRect(x, y, size, size);
+  }
+
+  // Add level indicator in corner
+  ctx.globalAlpha = 0.3;
+  ctx.fillStyle = palette[4];
+  ctx.font = 'bold 48px monospace';
+  ctx.fillText(`L${level}`, 10, 50);
+
+  // PLAY AREA INDICATOR - Make it very clear
+  // Play area is at x:88, y:32, width:80, height:160
+
+  // Dark background for play area
+  ctx.globalAlpha = 0.4;
+  ctx.fillStyle = '#000000';
+  ctx.fillRect(88, 32, 80, 160);
+
+  // Bright border around play area
+  ctx.globalAlpha = 1.0;
+  ctx.strokeStyle = '#FFFF00'; // Bright yellow
+  ctx.lineWidth = 3;
+  ctx.strokeRect(88, 32, 80, 160);
+
+  // Add corner markers for extra visibility
+  ctx.fillStyle = '#FFFF00';
+  const markerSize = 8;
+  // Top-left corner
+  ctx.fillRect(88 - markerSize, 32 - markerSize, markerSize, markerSize);
+  // Top-right corner
+  ctx.fillRect(88 + 80, 32 - markerSize, markerSize, markerSize);
+  // Bottom-left corner
+  ctx.fillRect(88 - markerSize, 32 + 160, markerSize, markerSize);
+  // Bottom-right corner
+  ctx.fillRect(88 + 80, 32 + 160, markerSize, markerSize);
+
+  // Add text labels
+  ctx.globalAlpha = 0.8;
+  ctx.fillStyle = '#FFFFFF';
+  ctx.font = 'bold 10px monospace';
+  ctx.fillText('PLAY AREA', 92, 28);
+  ctx.fillText('80x160px', 95, 200);
+  ctx.fillText(`(${88},${32})`, 92, 44);
+
+  // Add grid lines inside play area to show it clearly
+  ctx.globalAlpha = 0.15;
+  ctx.strokeStyle = '#FFFFFF';
+  ctx.lineWidth = 1;
+  // Vertical lines every 8 pixels (block size)
+  for (let x = 88; x <= 168; x += 8) {
+    ctx.beginPath();
+    ctx.moveTo(x, 32);
+    ctx.lineTo(x, 192);
+    ctx.stroke();
+  }
+  // Horizontal lines every 8 pixels
+  for (let y = 32; y <= 192; y += 8) {
+    ctx.beginPath();
+    ctx.moveTo(88, y);
+    ctx.lineTo(168, y);
+    ctx.stroke();
+  }
+
+  return canvas.toBuffer('image/png');
+}
+
+// Generate silent MP3 placeholder (we'll create a minimal valid MP3)
+function generateSilentMP3() {
+  // Minimal valid MP3 header for 1 second of silence
+  // This is a simplified approach - in production you'd use a proper audio library
+  const mp3Header = Buffer.from([
+    0xFF, 0xFB, 0x90, 0x00, // MP3 sync word and header
+  ]);
+  
+  // Create a small buffer with MP3 frame headers
+  const frames = 38; // Approximately 1 second at 44.1kHz
+  const frameSize = 417;
+  const buffer = Buffer.alloc(frames * frameSize);
+  
+  for (let i = 0; i < frames; i++) {
+    mp3Header.copy(buffer, i * frameSize);
+  }
+  
+  return buffer;
+}
+
+// Main generation function
+async function generateAllAssets() {
+  console.log('Generating placeholder assets...\n');
+  
+  // Check if canvas is available
+  let canvasAvailable = false;
+  try {
+    await import('canvas');
+    canvasAvailable = true;
+  } catch (e) {
+    console.log('⚠️  Canvas module not available. Install with: npm install canvas');
+    console.log('   Skipping backdrop generation. You can add your own PNG files.\n');
+  }
+  
+  for (let level = 1; level <= 10; level++) {
+    const levelBackdropDir = path.join(backdropsDir, `level-${level}`);
+    const levelMusicDir = path.join(musicDir, `level-${level}`);
+    
+    fs.mkdirSync(levelBackdropDir, { recursive: true });
+    fs.mkdirSync(levelMusicDir, { recursive: true });
+    
+    // Generate backdrop
+    if (canvasAvailable) {
+      const backdropPath = path.join(levelBackdropDir, 'backdrop.png');
+      const backdropBuffer = await generateBackdrop(level, levelPalettes[level - 1]);
+      fs.writeFileSync(backdropPath, backdropBuffer);
+      console.log(`✓ Generated backdrop for level ${level}`);
+    } else {
+      console.log(`⊘ Skipped backdrop for level ${level} (canvas not available)`);
+    }
+    
+    // Generate silent MP3
+    const musicPath = path.join(levelMusicDir, 'track.mp3');
+    const mp3Buffer = generateSilentMP3();
+    fs.writeFileSync(musicPath, mp3Buffer);
+    console.log(`✓ Generated music placeholder for level ${level}`);
+  }
+  
+  console.log('\n✅ All placeholder assets generated!');
+  console.log('\nYou can now replace these files with your own:');
+  console.log('  - Backdrops: public/assets/backdrops/level-X/backdrop.png (256x224 pixels)');
+  console.log('  - Music: public/assets/music/level-X/track.mp3');
+}
+
+generateAllAssets().catch(console.error);
+

scripts/generate-template.js

@@ -0,0 +1,170 @@
+/**
+ * Generate a simple template image showing the play area
+ * Run with: node scripts/generate-template.js
+ */
+
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const projectRoot = path.join(__dirname, '..');
+
+async function generateTemplate() {
+  try {
+    const { createCanvas } = await import('canvas');
+    const canvas = createCanvas(256, 224);
+    const ctx = canvas.getContext('2d');
+
+    console.log('Canvas created:', canvas.width, 'x', canvas.height);
+
+    // Set global alpha to fully opaque
+    ctx.globalAlpha = 1.0;
+
+    // Background - light gray (with explicit RGB)
+    ctx.fillStyle = 'rgb(204, 204, 204)';
+    ctx.fillRect(0, 0, 256, 224);
+
+    // Play area - bright magenta/pink (easy to see and select in image editors)
+    ctx.fillStyle = 'rgb(255, 0, 255)';
+    ctx.fillRect(88, 32, 80, 160);
+
+    // Add grid lines in play area
+    ctx.strokeStyle = '#CC00CC';
+    ctx.lineWidth = 1;
+    // Vertical lines every 8 pixels
+    for (let x = 88; x <= 168; x += 8) {
+      ctx.beginPath();
+      ctx.moveTo(x, 32);
+      ctx.lineTo(x, 192);
+      ctx.stroke();
+    }
+    // Horizontal lines every 8 pixels
+    for (let y = 32; y <= 192; y += 8) {
+      ctx.beginPath();
+      ctx.moveTo(88, y);
+      ctx.lineTo(168, y);
+      ctx.stroke();
+    }
+
+    // Border around play area - black
+    ctx.strokeStyle = '#000000';
+    ctx.lineWidth = 2;
+    ctx.strokeRect(88, 32, 80, 160);
+
+    // Add labels
+    ctx.fillStyle = '#000000';
+    ctx.font = 'bold 12px sans-serif';
+
+    // Title
+    ctx.fillText('TETRIS BACKDROP TEMPLATE', 40, 15);
+    ctx.font = '10px sans-serif';
+    ctx.fillText('256 x 224 pixels', 85, 215);
+
+    // Play area label
+    ctx.fillStyle = '#FFFFFF';
+    ctx.font = 'bold 10px sans-serif';
+    ctx.fillText('PLAY AREA', 100, 110);
+    ctx.fillText('80 x 160', 105, 122);
+
+    // Coordinates
+    ctx.fillStyle = '#000000';
+    ctx.font = '8px sans-serif';
+    ctx.fillText('(88,32)', 90, 28);
+    ctx.fillText('(168,192)', 130, 200);
+
+    // UI area labels
+    ctx.fillStyle = '#666666';
+    ctx.font = '8px sans-serif';
+    ctx.fillText('SCORE/LEVEL', 10, 20);
+    ctx.fillText('AREA', 10, 30);
+
+    ctx.fillText('NEXT PIECE', 185, 20);
+    ctx.fillText('AREA', 185, 30);
+
+    // Corner markers
+    ctx.fillStyle = '#FF0000';
+    const markerSize = 6;
+    // Top-left
+    ctx.fillRect(88 - markerSize/2, 32 - markerSize/2, markerSize, markerSize);
+    // Top-right
+    ctx.fillRect(168 - markerSize/2, 32 - markerSize/2, markerSize, markerSize);
+    // Bottom-left
+    ctx.fillRect(88 - markerSize/2, 192 - markerSize/2, markerSize, markerSize);
+    // Bottom-right
+    ctx.fillRect(168 - markerSize/2, 192 - markerSize/2, markerSize, markerSize);
+
+    // Add dimension arrows
+    ctx.strokeStyle = '#000000';
+    ctx.lineWidth = 1;
+    ctx.fillStyle = '#000000';
+
+    // Width arrow (top)
+    ctx.beginPath();
+    ctx.moveTo(88, 25);
+    ctx.lineTo(168, 25);
+    ctx.stroke();
+    // Arrow heads
+    ctx.beginPath();
+    ctx.moveTo(88, 25);
+    ctx.lineTo(92, 23);
+    ctx.lineTo(92, 27);
+    ctx.closePath();
+    ctx.fill();
+    ctx.beginPath();
+    ctx.moveTo(168, 25);
+    ctx.lineTo(164, 23);
+    ctx.lineTo(164, 27);
+    ctx.closePath();
+    ctx.fill();
+    ctx.fillText('80px', 120, 23);
+
+    // Height arrow (left)
+    ctx.beginPath();
+    ctx.moveTo(82, 32);
+    ctx.lineTo(82, 192);
+    ctx.stroke();
+    // Arrow heads
+    ctx.beginPath();
+    ctx.moveTo(82, 32);
+    ctx.lineTo(80, 36);
+    ctx.lineTo(84, 36);
+    ctx.closePath();
+    ctx.fill();
+    ctx.beginPath();
+    ctx.moveTo(82, 192);
+    ctx.lineTo(80, 188);
+    ctx.lineTo(84, 188);
+    ctx.closePath();
+    ctx.fill();
+
+    ctx.save();
+    ctx.translate(75, 112);
+    ctx.rotate(-Math.PI / 2);
+    ctx.fillText('160px', -15, 0);
+    ctx.restore();
+  
+    // Save the template
+    const templatePath = path.join(projectRoot, 'BACKDROP-TEMPLATE.png');
+    const buffer = canvas.toBuffer('image/png');
+    console.log('Buffer size:', buffer.length, 'bytes');
+    fs.writeFileSync(templatePath, buffer);
+
+    console.log('✅ Template created: BACKDROP-TEMPLATE.png');
+    console.log('');
+    console.log('The MAGENTA/PINK area (#FF00FF) is the play area.');
+    console.log('Use this template in your image editor:');
+    console.log('  1. Open BACKDROP-TEMPLATE.png');
+    console.log('  2. Create your artwork on layers below the template');
+    console.log('  3. Delete or hide the template layer');
+    console.log('  4. Export as 256x224 PNG');
+    console.log('  5. Save to public/assets/backdrops/level-X/backdrop.png');
+  } catch (error) {
+    console.error('Error generating template:', error);
+    throw error;
+  }
+}
+
+generateTemplate().catch(console.error);
+

scripts/test-canvas.js

@@ -0,0 +1,24 @@
+import { createCanvas } from 'canvas';
+import fs from 'fs';
+
+const canvas = createCanvas(256, 224);
+const ctx = canvas.getContext('2d');
+
+// Fill with white
+ctx.fillStyle = '#FFFFFF';
+ctx.fillRect(0, 0, 256, 224);
+
+// Draw a big red rectangle
+ctx.fillStyle = '#FF0000';
+ctx.fillRect(50, 50, 100, 100);
+
+// Draw a blue circle
+ctx.fillStyle = '#0000FF';
+ctx.beginPath();
+ctx.arc(200, 100, 30, 0, Math.PI * 2);
+ctx.fill();
+
+const buffer = canvas.toBuffer('image/png');
+fs.writeFileSync('test-canvas.png', buffer);
+console.log('Test image created:', buffer.length, 'bytes');
+

src/config.js

@@ -0,0 +1,13 @@
+/**
+ * Game configuration
+ * Set different values for development vs production
+ */
+
+// Check if we're in production (deployed) or development (local)
+const isProduction = import.meta.env.PROD;
+
+export const CONFIG = {
+  // Number of lines needed to advance to the next level
+  LINES_PER_LEVEL: isProduction ? 15 : 2,
+};
+

src/constants.js

@@ -0,0 +1,188 @@
+// Game dimensions
+export const GAME_WIDTH = 256;
+export const GAME_HEIGHT = 224;
+export const BORDER_OFFSET = 21; // Offset for 21px borders on each side
+
+// Bitmap font character set
+export const BITMAP_FONT_CHARS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
+
+// Grid configuration
+export const BLOCK_SIZE = 8; // 8x8 pixel blocks for retro feel
+export const GRID_WIDTH = 10;
+export const GRID_HEIGHT = 20;
+export const PLAY_AREA_WIDTH = GRID_WIDTH * BLOCK_SIZE; // 80 pixels
+export const PLAY_AREA_HEIGHT = GRID_HEIGHT * BLOCK_SIZE; // 160 pixels
+export const PLAY_AREA_X = 80 + BORDER_OFFSET; // Centered with room for UI + border offset
+export const PLAY_AREA_Y = 28; // Room for header (moved up 20 pixels from original 48)
+
+// Level progression
+export const LINES_PER_LEVEL = 2; // Temporary for testing
+export const MAX_LEVEL = 10;
+
+// Tetromino shapes (NES Tetris style)
+export const TETROMINOES = {
+  I: {
+    shape: [[1, 1, 1, 1]],
+    color: 0, // Will be replaced with palette color
+    name: 'I'
+  },
+  O: {
+    shape: [
+      [1, 1],
+      [1, 1]
+    ],
+    color: 1,
+    name: 'O'
+  },
+  T: {
+    shape: [
+      [0, 1, 0],
+      [1, 1, 1]
+    ],
+    color: 2,
+    name: 'T'
+  },
+  S: {
+    shape: [
+      [0, 1, 1],
+      [1, 1, 0]
+    ],
+    color: 3,
+    name: 'S'
+  },
+  Z: {
+    shape: [
+      [1, 1, 0],
+      [0, 1, 1]
+    ],
+    color: 4,
+    name: 'Z'
+  },
+  J: {
+    shape: [
+      [1, 0, 0],
+      [1, 1, 1]
+    ],
+    color: 5,
+    name: 'J'
+  },
+  L: {
+    shape: [
+      [0, 0, 1],
+      [1, 1, 1]
+    ],
+    color: 6,
+    name: 'L'
+  }
+};
+
+// Advanced mode tetrominoes (includes all classic + new shapes)
+export const ADVANCED_TETROMINOES = {
+  ...TETROMINOES,
+  // Small L (3 blocks) - top row
+  SMALL_L: {
+    shape: [
+      [1, 1],
+      [1, 0]
+    ],
+    color: 0,
+    name: 'SMALL_L'
+  },
+  // Small L mirrored (3 blocks) - top row
+  SMALL_L_MIRROR: {
+    shape: [
+      [1, 1],
+      [0, 1]
+    ],
+    color: 1,
+    name: 'SMALL_L_MIRROR'
+  },
+  // U shape (5 blocks) - middle left
+  U: {
+    shape: [
+      [1, 0, 1],
+      [1, 1, 1]
+    ],
+    color: 2,
+    name: 'U'
+  },
+  // S shape (4 blocks) - middle right
+  S_ADVANCED: {
+    shape: [
+      [0, 1, 1],
+      [1, 1, 0]
+    ],
+    color: 3,
+    name: 'S_ADVANCED'
+  },
+  // 2x2 with extra piece (5 blocks) - bottom left
+  BLOCK_PLUS: {
+    shape: [
+      [1, 1, 1],
+      [1, 1, 0]
+    ],
+    color: 4,
+    name: 'BLOCK_PLUS'
+  },
+  // T with top extended (5 blocks) - bottom right
+  T_EXTENDED: {
+    shape: [
+      [0, 1, 0],
+      [0, 1, 1],
+      [0, 1, 0]
+    ],
+    color: 5,
+    name: 'T_EXTENDED'
+  }
+};
+
+// NES Tetris scoring
+export const SCORES = {
+  SINGLE: 40,
+  DOUBLE: 100,
+  TRIPLE: 300,
+  TETRIS: 1200,
+  SOFT_DROP: 1,
+  PERFECT_CLEAR: 10000 // Bonus for clearing entire field
+};
+
+// Game speeds (frames per drop) - Higher = slower
+// Smooth progression, gets hard at level 6+
+export const LEVEL_SPEEDS = [
+  90,  // Level 1 - relaxed start
+  80,  // Level 2
+  70,  // Level 3
+  60,  // Level 4
+  50,  // Level 5
+  35,  // Level 6 - starts getting hard
+  25,  // Level 7
+  18,  // Level 8
+  12,  // Level 9
+  6    // Level 10 - very challenging
+];
+
+// Level titles for intro screens
+export const LEVEL_TITLES = {
+  1: 'Low Earth Orbit',
+  2: 'Moon Surface',
+  3: 'Mars Horizon',
+  4: 'Asteroid Belt',
+  5: 'Jupiter Storms',
+  6: 'Deep Space Station',
+  7: 'Nebula Expanse',
+  8: 'Binary Star System',
+  9: 'Alien Megastructure',
+  10: 'Edge of the Universe'
+};
+
+// UI Layout - single panel to the right of play area
+export const UI = {
+  // Panel positioned right of play area with 8px gap between frames
+  PANEL_X: PLAY_AREA_X + PLAY_AREA_WIDTH + 16,
+  PANEL_Y: PLAY_AREA_Y,
+  PANEL_WIDTH: 64,
+  PANEL_HEIGHT: PLAY_AREA_HEIGHT,
+  PADDING: 6,
+  LINE_HEIGHT: 20
+};
+

src/main.js

@@ -0,0 +1,40 @@
+import Phaser from 'phaser';
+import GameScene from './scenes/GameScene.js';
+import PreloadScene from './scenes/PreloadScene.js';
+import ModeSelectScene from './scenes/ModeSelectScene.js';
+import { createShaderOverlay } from './shaderOverlay.js';
+
+const config = {
+  type: Phaser.WEBGL,
+  width: 298, // 256 + 21px borders on each side (42px total)
+  height: 224,
+  parent: 'game-container',
+  backgroundColor: '#0a0a0a', // Dark grey for the borders
+  pixelArt: true,
+  roundPixels: true,
+  antialias: false,
+  fps: {
+    target: 60,
+    forceSetTimeOut: false
+  },
+  render: {
+    antialias: false,
+    pixelArt: true,
+    roundPixels: true,
+    antialiasGL: false
+  },
+  scale: {
+    mode: Phaser.Scale.NONE,
+    width: 298,
+    height: 224
+  },
+  scene: [PreloadScene, ModeSelectScene, GameScene]
+};
+
+const game = new Phaser.Game(config);
+
+// Apply shader overlay to the scaled canvas
+setTimeout(() => {
+  createShaderOverlay(game.canvas);
+}, 100);
+

src/pipelines/TrinitronPipeline.js

@@ -0,0 +1,190 @@
+import Phaser from 'phaser';
+
+const fragShader = `
+precision mediump float;
+
+uniform sampler2D uMainSampler;
+uniform vec2 resolution;
+uniform float time;
+
+varying vec2 outTexCoord;
+
+#define PI 3.14159265359
+
+vec4 permute(vec4 t) {
+  return mod(((t * 34.0) + 1.0) * t, 289.0);
+}
+
+float noise3d(vec3 p) {
+  vec3 a = floor(p);
+  vec3 d = p - a;
+  d = d * d * (3.0 - 2.0 * d);
+
+  vec4 b = a.xxyy + vec4(0.0, 1.0, 0.0, 1.0);
+  vec4 k1 = permute(b.xyxy);
+  vec4 k2 = permute(k1.xyxy + b.zzww);
+
+  vec4 c = k2 + a.zzzz;
+  vec4 k3 = permute(c);
+  vec4 k4 = permute(c + 1.0);
+
+  vec4 o1 = fract(k3 * (1.0 / 41.0));
+  vec4 o2 = fract(k4 * (1.0 / 41.0));
+
+  vec4 o3_interp_z = o2 * d.z + o1 * (1.0 - d.z);
+  vec2 o4_interp_xy = o3_interp_z.yw * d.x + o3_interp_z.xz * (1.0 - d.x);
+
+  return o4_interp_xy.y * d.y + o4_interp_xy.x * (1.0 - d.y);
+}
+
+void main() {
+  float brightness = 2.5;
+  float red_balance = 1.0;
+  float green_balance = 0.85;
+  float blue_balance = 1.0;
+
+  float phosphorWidth = 2.50;
+  float phosphorHeight = 4.50;
+  float internalHorizontalGap = 1.0;
+  float columnGap = 0.2;
+  float verticalCellGap = 0.2;
+  float phosphorPower = 0.9;
+
+  float cell_noise_variation_amount = 0.025;
+  float cell_noise_scale_xy = 240.0;
+  float cell_noise_speed = 24.0;
+  float curvature_amount = 0.0;
+
+  vec2 fragCoord = gl_FragCoord.xy;
+  vec2 uv = outTexCoord;
+  vec2 centered_uv_output = uv - 0.5;
+  float r = length(centered_uv_output);
+  float distort_factor = 1.0 + curvature_amount * r * r;
+  vec2 centered_uv_source = centered_uv_output * distort_factor;
+  vec2 source_uv = centered_uv_source + 0.5;
+  vec2 fragCoord_warped = source_uv * resolution;
+
+  bool is_on_original_flat_screen = source_uv.x >= 0.0 && source_uv.x <= 1.0 &&
+                                   source_uv.y >= 0.0 && source_uv.y <= 1.0;
+
+  if (!is_on_original_flat_screen) {
+    gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
+    return;
+  }
+
+  float fullCellWidth = 3.0 * phosphorWidth + 3.0 * internalHorizontalGap + columnGap;
+  float fullRowHeight = phosphorHeight + verticalCellGap;
+
+  float logical_cell_index_x = floor(fragCoord_warped.x / fullCellWidth);
+  float shift_y_offset = 0.0;
+  
+  if (mod(logical_cell_index_x, 2.0) != 0.0) {
+    shift_y_offset = fullRowHeight / 2.0;
+  }
+  
+  float effective_y_warped = fragCoord_warped.y + shift_y_offset;
+  float logical_row_index = floor(effective_y_warped / fullRowHeight);
+
+  float uv_cell_x = mod(fragCoord_warped.x, fullCellWidth);
+  if (uv_cell_x < 0.0) {
+    uv_cell_x += fullCellWidth;
+  }
+  
+  float uv_row_y = mod(effective_y_warped, fullRowHeight);
+  if (uv_row_y < 0.0) {
+    uv_row_y += fullRowHeight;
+  }
+
+  vec3 video_color = texture2D(uMainSampler, source_uv).rgb;
+  video_color.r *= red_balance;
+  video_color.g *= green_balance;
+  video_color.b *= blue_balance;
+
+  vec3 final_color = vec3(0.0);
+  bool in_column_gap = uv_cell_x >= (3.0 * phosphorWidth + 3.0 * internalHorizontalGap);
+  bool in_vertical_gap = uv_row_y >= phosphorHeight;
+
+  if (!in_column_gap && !in_vertical_gap) {
+    float uv_cell_x_within_block = uv_cell_x;
+    vec3 phosphor_base_color = vec3(0.0);
+    float video_component_intensity = 0.0;
+    float current_phosphor_startX_in_block = -1.0;
+    float current_x_tracker = 0.0;
+
+    if (uv_cell_x_within_block >= current_x_tracker && uv_cell_x_within_block < current_x_tracker + phosphorWidth) {
+      phosphor_base_color = vec3(1.0, 0.0, 0.0);
+      video_component_intensity = video_color.r;
+      current_phosphor_startX_in_block = current_x_tracker;
+    }
+    current_x_tracker += phosphorWidth + internalHorizontalGap;
+
+    if (uv_cell_x_within_block >= current_x_tracker && uv_cell_x_within_block < current_x_tracker + phosphorWidth) {
+      phosphor_base_color = vec3(0.0, 1.0, 0.0);
+      video_component_intensity = video_color.g;
+      current_phosphor_startX_in_block = current_x_tracker;
+    }
+    current_x_tracker += phosphorWidth + internalHorizontalGap;
+
+    if (uv_cell_x_within_block >= current_x_tracker && uv_cell_x_within_block < current_x_tracker + phosphorWidth) {
+      phosphor_base_color = vec3(0.0, 0.0, 1.0);
+      video_component_intensity = video_color.b;
+      current_phosphor_startX_in_block = current_x_tracker;
+    }
+
+    if (current_phosphor_startX_in_block >= 0.0) {
+      float x_in_phosphor = (uv_cell_x_within_block - current_phosphor_startX_in_block) / phosphorWidth;
+      float horizontal_intensity_factor = pow(sin(x_in_phosphor * PI), phosphorPower);
+      float y_in_phosphor_band = uv_row_y / phosphorHeight;
+      float vertical_intensity_factor = (phosphorHeight > 0.0) ? pow(sin(y_in_phosphor_band * PI), phosphorPower) : 1.0;
+      float total_intensity_factor = horizontal_intensity_factor * vertical_intensity_factor;
+      final_color = phosphor_base_color * video_component_intensity * total_intensity_factor;
+    }
+  }
+
+  vec3 noise_pos = vec3(logical_cell_index_x * cell_noise_scale_xy,
+                        logical_row_index * cell_noise_scale_xy,
+                        time * cell_noise_speed);
+
+  vec3 cell_noise_rgb;
+  cell_noise_rgb.r = noise3d(noise_pos);
+  cell_noise_rgb.g = noise3d(noise_pos + vec3(19.0, 0.0, 0.0));
+  cell_noise_rgb.b = noise3d(noise_pos + vec3(0.0, 13.0, 0.0));
+  cell_noise_rgb = cell_noise_rgb * 2.0 - 1.0;
+  final_color += cell_noise_rgb * cell_noise_variation_amount;
+
+  final_color *= brightness;
+  float edge_darken_strength = 0.1;
+  float vignette_factor = 1.0 - dot(centered_uv_output, centered_uv_output) * edge_darken_strength * 2.0;
+  vignette_factor = clamp(vignette_factor, 0.0, 1.0);
+  final_color *= vignette_factor;
+
+  final_color = clamp(final_color, 0.0, 1.0);
+  gl_FragColor = vec4(final_color, 1.0);
+}
+`;
+
+export default class TrinitronPipeline extends Phaser.Renderer.WebGL.Pipelines.PostFXPipeline {
+  constructor(game) {
+    super({
+      name: 'TrinitronPipeline',
+      game: game,
+      renderTarget: true,
+      fragShader: fragShader,
+      uniforms: [
+        'uMainSampler',
+        'resolution',
+        'time'
+      ]
+    });
+  }
+
+  onPreRender() {
+    // Use the actual canvas display size (after scaling), not the game resolution
+    const canvas = this.game.canvas;
+    const displayWidth = canvas.width;
+    const displayHeight = canvas.height;
+    this.set2f('resolution', displayWidth, displayHeight);
+    this.set1f('time', this.game.loop.time / 1000);
+  }
+}
+

src/scenes/GameScene.js

@@ -0,0 +1,983 @@
+import Phaser from 'phaser';
+import {
+  GAME_WIDTH, GAME_HEIGHT, BLOCK_SIZE, GRID_WIDTH, GRID_HEIGHT,
+  PLAY_AREA_X, PLAY_AREA_Y, PLAY_AREA_WIDTH, PLAY_AREA_HEIGHT,
+  TETROMINOES, ADVANCED_TETROMINOES, SCORES, LEVEL_SPEEDS, MAX_LEVEL, UI, BORDER_OFFSET, LEVEL_TITLES
+} from '../constants.js';
+import ColorExtractor from '../utils/ColorExtractor.js';
+import SpriteBlockRenderer from '../utils/SpriteBlockRenderer.js';
+import SoundGenerator from '../utils/SoundGenerator.js';
+import { CONFIG } from '../config.js';
+
+export default class GameScene extends Phaser.Scene {
+  constructor() { super({ key: 'GameScene' }); }
+
+  create() {
+    // Get game mode from registry (set by ModeSelectScene)
+    this.gameMode = this.registry.get('gameMode') || 'classic';
+    this.tetrominoes = this.gameMode === 'advanced' ? ADVANCED_TETROMINOES : TETROMINOES;
+
+    // CRITICAL: Ensure canvas has focus and can receive keyboard events
+    this.game.canvas.setAttribute('tabindex', '1');
+    this.game.canvas.focus();
+    this.game.canvas.style.outline = 'none';
+
+    // Visual indicator for focus loss
+    this.focusWarning = null;
+
+    // Re-focus on any click
+    this.game.canvas.addEventListener('click', () => {
+      this.game.canvas.focus();
+      if (this.focusWarning) {
+        this.focusWarning.destroy();
+        this.focusWarning = null;
+      }
+    });
+
+    // Monitor focus state
+    this.game.canvas.addEventListener('blur', () => {
+      console.log('Canvas lost focus!');
+      if (!this.focusWarning) {
+        this.focusWarning = this.add.text(GAME_WIDTH / 2 + BORDER_OFFSET, 10, 'CLICK TO FOCUS', {
+          fontSize: '8px',
+          color: '#ff0000',
+          backgroundColor: '#000000'
+        }).setOrigin(0.5).setDepth(300);
+      }
+    });
+
+    this.game.canvas.addEventListener('focus', () => {
+      console.log('Canvas gained focus');
+      if (this.focusWarning) {
+        this.focusWarning.destroy();
+        this.focusWarning = null;
+      }
+    });
+
+    // Re-focus if window regains focus
+    window.addEventListener('focus', () => {
+      this.game.canvas.focus();
+    });
+
+    this.grid = this.createEmptyGrid();
+    this.score = 0; this.level = 1; this.lines = 0; this.gameOver = false;
+    this.clearing = false;
+    this.dropCounter = 0; this.dropInterval = LEVEL_SPEEDS[0];
+    this.softDropping = false; this.softDropCounter = 0;
+    this.inputEnabled = true;
+    this.currentPiece = null; this.nextPiece = null;
+    this.currentX = 0; this.currentY = 0;
+    this.blockSprites = []; this.ghostSprites = [];
+    this.setupInput();
+    this.loadLevel(this.level, false); // Load level first without intro
+    this.createUI(); // Create UI after level is loaded
+    this.spawnPiece(); this.nextPiece = this.getRandomPiece();
+    this.updateNextPieceDisplay();
+
+    // Show intro animation after everything is set up
+    this.showLevelIntro();
+  }
+
+  createEmptyGrid() {
+    const grid = [];
+    for (let y = 0; y < GRID_HEIGHT; y++) { grid[y] = []; for (let x = 0; x < GRID_WIDTH; x++) grid[y][x] = 0; }
+    return grid;
+  }
+
+  loadLevel(level, showIntro = false) {
+    if (this.currentMusic) this.currentMusic.stop();
+    const backdropKey = `backdrop-${level}`;
+    if (this.backdrop) this.backdrop.destroy();
+    this.backdrop = this.add.image(BORDER_OFFSET, 0, backdropKey).setOrigin(0, 0);
+    this.backdrop.setDisplaySize(GAME_WIDTH, GAME_HEIGHT);
+    this.backdrop.setDepth(-1);
+    this.colorPalette = ColorExtractor.extractPalette(this, backdropKey);
+    this.createBlockTextures();
+    const musicKey = `music-${level}`;
+    this.currentMusic = this.sound.add(musicKey, { loop: true, volume: 0.5 });
+    this.currentMusic.play();
+    this.redrawGrid();
+
+    if (showIntro) {
+      this.showLevelIntro();
+    }
+  }
+
+  showLevelIntro() {
+    // Immediately move containers off-screen (before any delay)
+    if (this.playAreaContainer) {
+      this.playAreaContainer.y = -GAME_HEIGHT;
+    }
+    if (this.uiPanelContainer) {
+      this.uiPanelContainer.y = -GAME_HEIGHT;
+    }
+
+    // Hide all block sprites (current piece and grid)
+    this.blockSprites.forEach(sprite => sprite.setVisible(false));
+    this.ghostSprites.forEach(sprite => sprite.setVisible(false));
+
+    // Disable input temporarily
+    this.inputEnabled = false;
+
+    // Show level title text
+    const levelTitle = LEVEL_TITLES[this.level] || 'Unknown';
+    const levelText = this.createBitmapText(GAME_WIDTH / 2 + BORDER_OFFSET, GAME_HEIGHT / 2 - 10, `LEVEL ${this.level}`, 16);
+    levelText.setOrigin(0.5);
+    levelText.setDepth(201);
+
+    const titleText = this.createBitmapText(GAME_WIDTH / 2 + BORDER_OFFSET, GAME_HEIGHT / 2 + 10, levelTitle, 10);
+    titleText.setOrigin(0.5);
+    titleText.setDepth(201);
+
+    // Wait 1 second showing backdrop and title
+    this.time.delayedCall(1500, () => {
+      // Fade out title texts
+      this.tweens.add({
+        targets: [levelText, titleText],
+        alpha: 0,
+        duration: 300,
+        onComplete: () => {
+          levelText.destroy();
+          titleText.destroy();
+        }
+      });
+
+      // Play woosh sound
+      SoundGenerator.playWoosh();
+
+      // Animate play area falling in
+      if (this.playAreaContainer) {
+        this.tweens.add({
+          targets: this.playAreaContainer,
+          y: 0,
+          duration: 600,
+          ease: 'Bounce.easeOut'
+        });
+      }
+
+      // Animate UI panel falling in (slightly delayed)
+      if (this.uiPanelContainer) {
+        this.tweens.add({
+          targets: this.uiPanelContainer,
+          y: 0,
+          duration: 600,
+          delay: 100,
+          ease: 'Bounce.easeOut',
+          onComplete: () => {
+            // Show blocks and re-enable input after animations complete
+            this.blockSprites.forEach(sprite => sprite.setVisible(true));
+            this.ghostSprites.forEach(sprite => sprite.setVisible(true));
+            this.inputEnabled = true;
+          }
+        });
+      }
+    });
+  }
+
+  createBlockTextures() {
+    const enhanced = SpriteBlockRenderer.enhancePalette(this.colorPalette);
+    this.colorPalette = enhanced;
+    Object.keys(this.tetrominoes).forEach((key, i) => {
+      // Remove old textures if they exist
+      if (this.textures.exists(`block-${key}`)) {
+        this.textures.remove(`block-${key}`);
+      }
+      if (this.textures.exists(`ghost-${key}`)) {
+        this.textures.remove(`ghost-${key}`);
+      }
+      SpriteBlockRenderer.createBlockTexture(this, this.colorPalette, this.level, `block-${key}`, i);
+      SpriteBlockRenderer.createBlockTexture(this, this.colorPalette, this.level, `ghost-${key}`, i);
+    });
+  }
+
+  setupInput() {
+    // Simple polling - use Phaser's built-in JustDown
+    this.cursors = this.input.keyboard.createCursorKeys();
+    this.spaceKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE);
+    this.pKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.P);
+
+    // DAS settings for left/right auto-repeat when HOLDING
+    this.dasDelay = 16;  // Frames before repeat starts (longer delay)
+    this.dasSpeed = 4;   // Frames between repeats (slower repeat)
+    this.leftHoldCounter = 0;
+    this.rightHoldCounter = 0;
+
+    // Grace period to prevent double-taps
+    this.moveGracePeriod = 2; // Minimum frames between moves
+    this.leftGraceCounter = 0;
+    this.rightGraceCounter = 0;
+
+    this.paused = false;
+  }
+
+  createBitmapText(x, y, text, size = 10) {
+    const t = this.add.bitmapText(x, y, 'pixel-font', text.toUpperCase(), size);
+    t.texture.setFilter(Phaser.Textures.FilterMode.NEAREST);
+    return t;
+  }
+
+  createUI() {
+    // Create container for play area (so it can be animated as a unit)
+    this.playAreaContainer = this.add.container(0, 0);
+    const playAreaGraphics = this.add.graphics();
+    this.drawNESFrame(playAreaGraphics, PLAY_AREA_X - 2, PLAY_AREA_Y - 2, PLAY_AREA_WIDTH + 5, PLAY_AREA_HEIGHT + 4);
+    this.playAreaContainer.add(playAreaGraphics);
+
+    // Create container for right-side UI panels
+    this.uiPanelContainer = this.add.container(0, 0);
+    const panelGraphics = this.add.graphics();
+
+    // UI text positions - align first frame with play area top
+    const frameWidth = UI.PANEL_WIDTH - 3;
+    const x = UI.PANEL_X + UI.PADDING;
+    let y = PLAY_AREA_Y; // Align with play area top
+
+    // SCORE frame
+    this.drawNESFrame(panelGraphics, UI.PANEL_X, y - 2, frameWidth, 26);
+    const scoreLabel = this.createBitmapText(x, y + 2, 'SCORE');
+    y += 12;
+    this.scoreText = this.createBitmapText(x, y + 2, '000000');
+    y += 12 + 12; // 12px vertical space
+
+    // LEVEL frame
+    this.drawNESFrame(panelGraphics, UI.PANEL_X, y - 2, frameWidth, 26);
+    const levelLabel = this.createBitmapText(x, y + 2, 'LEVEL');
+    y += 12;
+    this.levelText = this.createBitmapText(x, y + 2, '1');
+    y += 12 + 12; // 12px vertical space
+
+    // LINES frame
+    this.drawNESFrame(panelGraphics, UI.PANEL_X, y - 2, frameWidth, 26);
+    const linesLabel = this.createBitmapText(x, y + 2, 'LINES');
+    y += 12;
+    this.linesText = this.createBitmapText(x, y + 2, '0');
+    y += 12 + 12; // 12px vertical space
+
+    // NEXT frame
+    const nextFrameHeight = 42; // Enough for piece preview + 2px top padding
+    this.drawNESFrame(panelGraphics, UI.PANEL_X, y - 2, frameWidth, nextFrameHeight);
+    this.nextPieceText = this.createBitmapText(x, y + 2, 'NEXT');
+    this.nextPieceY = y + 16;
+    this.nextPieceX = x;
+
+    // Add all UI elements to the container
+    this.uiPanelContainer.add([
+      panelGraphics,
+      scoreLabel,
+      this.scoreText,
+      levelLabel,
+      this.levelText,
+      linesLabel,
+      this.linesText,
+      this.nextPieceText
+    ]);
+  }
+
+  drawNESFrame(g, x, y, w, h) {
+    g.fillStyle(0x000000, 1); g.fillRect(x, y, w, h);
+    g.lineStyle(2, 0xAAAAAA, 1); g.strokeRect(x, y, w, h);
+    g.lineStyle(1, 0x555555, 1); g.strokeRect(x + 2, y + 2, w - 4, h - 4);
+    g.lineStyle(1, 0xFFFFFF, 1); g.beginPath(); g.moveTo(x + 1, y + h - 1); g.lineTo(x + 1, y + 1); g.lineTo(x + w - 1, y + 1); g.strokePath();
+    g.lineStyle(1, 0x333333, 1); g.beginPath(); g.moveTo(x + w - 1, y + 1); g.lineTo(x + w - 1, y + h - 1); g.lineTo(x + 1, y + h - 1); g.strokePath();
+  }
+
+  getRandomPiece() {
+    const keys = Object.keys(this.tetrominoes);
+    return JSON.parse(JSON.stringify(this.tetrominoes[keys[Math.floor(Math.random() * keys.length)]]));
+  }
+
+  spawnPiece() {
+    this.currentPiece = this.nextPiece ? this.nextPiece : this.getRandomPiece();
+    this.nextPiece = this.getRandomPiece();
+    this.currentX = Math.floor(GRID_WIDTH / 2) - Math.floor(this.currentPiece.shape[0].length / 2);
+    this.currentY = 0;
+    if (this.checkCollision(this.currentPiece, this.currentX, this.currentY)) { this.gameOver = true; this.handleGameOver(); }
+    this.updateNextPieceDisplay();
+  }
+
+  update(time, delta) {
+    if (this.gameOver || !this.inputEnabled) return;
+
+    // Pause check - always available
+    if (Phaser.Input.Keyboard.JustDown(this.pKey)) {
+      this.togglePause();
+    }
+
+    if (this.clearing || this.paused) return;
+
+    this.handleInput();
+    this.dropCounter++;
+    if (this.dropCounter >= this.dropInterval) { this.dropCounter = 0; this.moveDown(); }
+    this.renderPiece();
+  }
+
+  togglePause() {
+    this.paused = !this.paused;
+    if (this.paused) {
+      this.pauseOverlay = this.add.rectangle(GAME_WIDTH / 2 + BORDER_OFFSET, GAME_HEIGHT / 2, GAME_WIDTH, GAME_HEIGHT, 0x000000, 0.8);
+      this.pauseOverlay.setDepth(100);
+      this.pauseText = this.createBitmapText(GAME_WIDTH / 2 + BORDER_OFFSET, GAME_HEIGHT / 2, 'PAUSED');
+      this.pauseText.setOrigin(0.5).setDepth(101);
+      this.pauseHintText = this.createBitmapText(GAME_WIDTH / 2 + BORDER_OFFSET, GAME_HEIGHT / 2 + 12, 'PRESS P');
+      this.pauseHintText.setOrigin(0.5).setDepth(101);
+      if (this.currentMusic) this.currentMusic.pause();
+    } else {
+      if (this.pauseOverlay) { this.pauseOverlay.destroy(); this.pauseOverlay = null; }
+      if (this.pauseText) { this.pauseText.destroy(); this.pauseText = null; }
+      if (this.pauseHintText) { this.pauseHintText.destroy(); this.pauseHintText = null; }
+      if (this.currentMusic) this.currentMusic.resume();
+    }
+  }
+
+  handleInput() {
+    // Rotation - JustDown ensures one action per press
+    if (Phaser.Input.Keyboard.JustDown(this.cursors.up)) {
+      this.rotatePiece();
+    }
+
+    // Hard drop - JustDown ensures one action per press
+    if (Phaser.Input.Keyboard.JustDown(this.spaceKey)) {
+      this.hardDrop();
+    }
+
+    // Soft drop (down key held) - continuous action
+    if (this.cursors.down.isDown) {
+      if (!this.softDropping) { this.softDropping = true; this.softDropCounter = 0; }
+      this.softDropCounter++;
+      if (this.softDropCounter >= 2) {
+        this.softDropCounter = 0;
+        if (this.moveDown()) {
+          this.score += SCORES.SOFT_DROP;
+          this.updateUI();
+          SoundGenerator.playSoftDrop();
+        }
+      }
+    } else {
+      this.softDropping = false;
+      this.softDropCounter = 0;
+    }
+
+    // Decrement grace counters
+    if (this.leftGraceCounter > 0) this.leftGraceCounter--;
+    if (this.rightGraceCounter > 0) this.rightGraceCounter--;
+
+    // LEFT - JustDown for first press, then auto-repeat when held
+    if (Phaser.Input.Keyboard.JustDown(this.cursors.left) && this.leftGraceCounter === 0) {
+      this.moveLeft();
+      this.leftHoldCounter = 0;
+      this.leftGraceCounter = this.moveGracePeriod;
+    } else if (this.cursors.left.isDown && this.leftGraceCounter === 0) {
+      this.leftHoldCounter++;
+      if (this.leftHoldCounter >= this.dasDelay && (this.leftHoldCounter - this.dasDelay) % this.dasSpeed === 0) {
+        this.moveLeft();
+        this.leftGraceCounter = this.moveGracePeriod;
+      }
+    } else if (!this.cursors.left.isDown) {
+      this.leftHoldCounter = 0;
+    }
+
+    // RIGHT - JustDown for first press, then auto-repeat when held
+    if (Phaser.Input.Keyboard.JustDown(this.cursors.right) && this.rightGraceCounter === 0) {
+      this.moveRight();
+      this.rightHoldCounter = 0;
+      this.rightGraceCounter = this.moveGracePeriod;
+    } else if (this.cursors.right.isDown && this.rightGraceCounter === 0) {
+      this.rightHoldCounter++;
+      if (this.rightHoldCounter >= this.dasDelay && (this.rightHoldCounter - this.dasDelay) % this.dasSpeed === 0) {
+        this.moveRight();
+        this.rightGraceCounter = this.moveGracePeriod;
+      }
+    } else if (!this.cursors.right.isDown) {
+      this.rightHoldCounter = 0;
+    }
+  }
+
+  moveLeft() { if (!this.checkCollision(this.currentPiece, this.currentX - 1, this.currentY)) { this.currentX--; SoundGenerator.playMove(); } }
+  moveRight() { if (!this.checkCollision(this.currentPiece, this.currentX + 1, this.currentY)) { this.currentX++; SoundGenerator.playMove(); } }
+  moveDown() { if (!this.checkCollision(this.currentPiece, this.currentX, this.currentY + 1)) { this.currentY++; return true; } else { this.lockPiece(); return false; } }
+  hardDrop() { while (!this.checkCollision(this.currentPiece, this.currentX, this.currentY + 1)) this.currentY++; SoundGenerator.playDrop(); this.lockPiece(); }
+
+  rotatePiece() {
+    const rotated = this.getRotatedPiece(this.currentPiece);
+
+    // Try rotation at current position
+    if (!this.checkCollision(rotated, this.currentX, this.currentY)) {
+      this.currentPiece = rotated;
+      SoundGenerator.playRotate();
+      return;
+    }
+
+    // Wall kick: try shifting right
+    if (!this.checkCollision(rotated, this.currentX + 1, this.currentY)) {
+      this.currentPiece = rotated;
+      this.currentX++;
+      SoundGenerator.playRotate();
+      return;
+    }
+
+    // Wall kick: try shifting left
+    if (!this.checkCollision(rotated, this.currentX - 1, this.currentY)) {
+      this.currentPiece = rotated;
+      this.currentX--;
+      SoundGenerator.playRotate();
+      return;
+    }
+
+    // Wall kick: try shifting right 2 spaces (for I-piece)
+    if (!this.checkCollision(rotated, this.currentX + 2, this.currentY)) {
+      this.currentPiece = rotated;
+      this.currentX += 2;
+      SoundGenerator.playRotate();
+      return;
+    }
+
+    // Wall kick: try shifting left 2 spaces (for I-piece)
+    if (!this.checkCollision(rotated, this.currentX - 2, this.currentY)) {
+      this.currentPiece = rotated;
+      this.currentX -= 2;
+      SoundGenerator.playRotate();
+      return;
+    }
+
+    // Rotation failed - no valid position found
+  }
+
+  getRotatedPiece(piece) {
+    const rotated = JSON.parse(JSON.stringify(piece));
+    const shape = piece.shape;
+    const rows = shape.length;
+    const cols = shape[0].length;
+    const newShape = [];
+    for (let x = 0; x < cols; x++) { newShape[x] = []; for (let y = rows - 1; y >= 0; y--) newShape[x][rows - 1 - y] = shape[y][x]; }
+    rotated.shape = newShape;
+    return rotated;
+  }
+
+  checkCollision(piece, x, y) {
+    const shape = piece.shape;
+    for (let row = 0; row < shape.length; row++) {
+      for (let col = 0; col < shape[row].length; col++) {
+        if (shape[row][col]) {
+          const gridX = x + col;
+          const gridY = y + row;
+          if (gridX < 0 || gridX >= GRID_WIDTH || gridY >= GRID_HEIGHT) return true;
+          if (gridY >= 0 && this.grid[gridY][gridX]) return true;
+        }
+      }
+    }
+    return false;
+  }
+
+  lockPiece() {
+    const shape = this.currentPiece.shape;
+    for (let row = 0; row < shape.length; row++) {
+      for (let col = 0; col < shape[row].length; col++) {
+        if (shape[row][col]) {
+          const gridX = this.currentX + col;
+          const gridY = this.currentY + row;
+          if (gridY >= 0) this.grid[gridY][gridX] = this.currentPiece.name;
+        }
+      }
+    }
+    this.checkAndClearLines();
+  }
+
+  checkAndClearLines() {
+    // Find complete lines - a line is complete ONLY if every cell is filled
+    const completeLines = [];
+    for (let y = 0; y < GRID_HEIGHT; y++) {
+      let isComplete = true;
+      for (let x = 0; x < GRID_WIDTH; x++) {
+        if (!this.grid[y][x]) {
+          isComplete = false;
+          break;
+        }
+      }
+      if (isComplete) {
+        console.log(`Line ${y} is complete:`, JSON.stringify(this.grid[y]));
+        completeLines.push(y);
+      }
+    }
+
+    if (completeLines.length > 0) {
+      console.log('Complete lines found:', completeLines);
+      console.log('Grid state:', JSON.stringify(this.grid));
+    }
+
+    if (completeLines.length === 0) {
+      this.spawnPiece();
+      this.redrawGrid();
+      return;
+    }
+
+    // Block game updates during line clear
+    this.clearing = true;
+
+    // Play sound based on number of lines cleared
+    SoundGenerator.playLineClear(completeLines.length);
+
+    // Show the locked piece first
+    this.redrawGrid();
+
+    // Run the line clear animation, then apply changes
+    this.animateLineClear(completeLines);
+  }
+
+  animateLineClear(completeLines) {
+    // Create crush animation for each block
+    const crushSprites = [];
+    const texturesToCleanup = [];
+
+    completeLines.forEach(y => {
+      for (let x = 0; x < GRID_WIDTH; x++) {
+        const blockType = this.grid[y][x];
+        if (!blockType) continue;
+
+        const px = PLAY_AREA_X + x * BLOCK_SIZE;
+        const py = PLAY_AREA_Y + y * BLOCK_SIZE;
+
+        // Get the block's color from the palette
+        const colorIndex = blockType - 1;
+        const color = this.colorPalette[colorIndex % this.colorPalette.length];
+
+        // Create unique crush animation frames for this specific block instance
+        const uniqueId = `${Date.now()}-${x}-${y}-${Math.random().toString(36).substr(2, 9)}`;
+        const frames = [];
+        for (let f = 0; f < 5; f++) {
+          const frameKey = `crush-${uniqueId}-${f}`;
+          SpriteBlockRenderer.createCrushTexture(this, color, f, frameKey);
+          frames.push(frameKey);
+          texturesToCleanup.push(frameKey);
+        }
+
+        // Create sprite starting with frame 4 (most intact)
+        const sprite = this.add.sprite(px, py, frames[4]).setOrigin(0, 0);
+        sprite.setDepth(50);
+        crushSprites.push({ sprite, frames });
+      }
+    });
+
+    // Cycle through the 5 crush frames in REVERSE: 4 -> 3 -> 2 -> 1 -> 0
+    let frameCounter = 4;
+
+    this.time.addEvent({
+      delay: 75, // 75ms per frame (twice as fast)
+      repeat: 4, // repeat 4 times = 5 total callbacks (frames 4,3,2,1,0)
+      callback: () => {
+        if (frameCounter > 0) {
+          frameCounter--;
+          crushSprites.forEach(crushData => {
+            crushData.sprite.setTexture(crushData.frames[frameCounter]);
+          });
+        }
+      }
+    });
+
+    // After all 5 frames (4 shows immediately, then 3,2,1,0 at 75ms each = 300ms total), clean up
+    this.time.delayedCall(350, () => {
+      crushSprites.forEach(crushData => {
+        crushData.sprite.destroy();
+      });
+
+      // Clean up all textures
+      texturesToCleanup.forEach(frameKey => {
+        if (this.textures.exists(frameKey)) {
+          this.textures.remove(frameKey);
+        }
+      });
+
+      this.finishLineClear(completeLines);
+    });
+  }
+
+  finishLineClear(completeLines) {
+    // Apply the grid changes first
+    const validLines = completeLines.filter(y => {
+      if (y < 0 || y >= GRID_HEIGHT) return false;
+      for (let x = 0; x < GRID_WIDTH; x++) {
+        if (!this.grid[y][x]) return false;
+      }
+      return true;
+    });
+
+    if (validLines.length === 0) {
+      console.warn('No valid lines to clear after validation');
+      this.clearing = false;
+      this.spawnPiece();
+      this.redrawGrid();
+      return;
+    }
+
+    // Build new grid
+    const newGrid = [];
+    const linesToRemove = new Set(validLines);
+
+    for (let i = 0; i < validLines.length; i++) {
+      newGrid.push(new Array(GRID_WIDTH).fill(0));
+    }
+
+    for (let y = 0; y < GRID_HEIGHT; y++) {
+      if (!linesToRemove.has(y)) {
+        newGrid.push([...this.grid[y]]);
+      }
+    }
+
+    this.grid = newGrid;
+
+    // Now animate the falling blocks
+    // Rebuild sprites from new grid state
+    this.redrawGrid();
+
+    // Animate all sprites falling into place
+    const sortedLines = [...validLines].sort((a, b) => a - b);
+
+    this.blockSprites.forEach(sprite => {
+      const spriteGridY = Math.floor((sprite.y - PLAY_AREA_Y) / BLOCK_SIZE);
+
+      // Count how many cleared lines were below this sprite's ORIGINAL position
+      let linesBelowCount = 0;
+      sortedLines.forEach(clearedY => {
+        if (clearedY > spriteGridY - validLines.length) {
+          linesBelowCount++;
+        }
+      });
+
+      if (linesBelowCount > 0) {
+        // Start sprite higher, then animate down to current position
+        const startY = sprite.y - (linesBelowCount * BLOCK_SIZE);
+        sprite.y = startY;
+
+        this.tweens.add({
+          targets: sprite,
+          y: sprite.y + (linesBelowCount * BLOCK_SIZE),
+          duration: 150,
+          ease: 'Bounce.easeOut'
+        });
+      }
+    });
+
+    // Wait for fall animation, then finish
+    this.time.delayedCall(160, () => {
+      this.finishScoring(validLines);
+    });
+  }
+
+  finishScoring(validLines) {
+    // Update score
+    this.lines += validLines.length;
+    const levelMultiplier = this.level;
+    switch (validLines.length) {
+      case 1: this.score += SCORES.SINGLE * levelMultiplier; break;
+      case 2: this.score += SCORES.DOUBLE * levelMultiplier; break;
+      case 3: this.score += SCORES.TRIPLE * levelMultiplier; break;
+      case 4: this.score += SCORES.TETRIS * levelMultiplier; break;
+    }
+
+    // Check for perfect clear (entire grid is empty)
+    const isPerfectClear = this.grid.every(row => row.every(cell => cell === 0));
+    if (isPerfectClear) {
+      this.score += SCORES.PERFECT_CLEAR * levelMultiplier;
+      // Show perfect clear message
+      const perfectText = this.createBitmapText(GAME_WIDTH / 2 + BORDER_OFFSET, GAME_HEIGHT / 2, 'PERFECT CLEAR!', 12);
+      perfectText.setOrigin(0.5);
+      perfectText.setDepth(150);
+      perfectText.setTint(0xFFD700); // Gold color
+
+      // Animate the text
+      this.tweens.add({
+        targets: perfectText,
+        scale: 1.5,
+        alpha: 0,
+        duration: 2000,
+        ease: 'Power2',
+        onComplete: () => perfectText.destroy()
+      });
+
+      // Play special sound
+      SoundGenerator.playLevelUp();
+    }
+
+    // Check for level up
+    const newLevel = Math.min(MAX_LEVEL, Math.floor(this.lines / CONFIG.LINES_PER_LEVEL) + 1);
+    if (newLevel > this.level) {
+      this.level = newLevel;
+      this.dropInterval = LEVEL_SPEEDS[this.level - 1];
+      SoundGenerator.playLevelUp();
+
+      // Exciting level transition!
+      this.showLevelTransition(newLevel);
+    } else {
+      this.updateUI();
+      this.clearing = false;
+      this.spawnPiece();
+    }
+  }
+
+
+
+  showLevelTransition(newLevel) {
+    // Keep game paused during transition
+    this.clearing = true;
+
+    // Black screen overlay
+    const blackScreen = this.add.rectangle(GAME_WIDTH / 2 + BORDER_OFFSET, GAME_HEIGHT / 2, GAME_WIDTH, GAME_HEIGHT, 0x000000);
+    blackScreen.setDepth(200);
+    blackScreen.setAlpha(0);
+
+    // Fade to black
+    this.tweens.add({
+      targets: blackScreen,
+      alpha: 1,
+      duration: 300,
+      ease: 'Power2',
+      onComplete: () => {
+        // Pre-load the new level's palette and create preview blocks
+        const backdropKey = `backdrop-${newLevel}`;
+        const rawPalette = ColorExtractor.extractPalette(this, backdropKey);
+        const newPalette = SpriteBlockRenderer.enhancePalette(rawPalette);
+
+        // Level up text
+        const levelText = this.createBitmapText(GAME_WIDTH / 2 + BORDER_OFFSET, 60, `LEVEL ${newLevel}`, 20);
+        levelText.setOrigin(0.5);
+        levelText.setDepth(201);
+        levelText.setAlpha(0);
+
+        // Subtitle - show level title
+        const levelTitle = LEVEL_TITLES[newLevel] || 'Unknown';
+        const subtitle = this.createBitmapText(GAME_WIDTH / 2 + BORDER_OFFSET, 85, levelTitle, 10);
+        subtitle.setOrigin(0.5);
+        subtitle.setDepth(201);
+        subtitle.setAlpha(0);
+
+        // Create preview blocks showing new level's style
+        const previewBlocks = [];
+        const startX = GAME_WIDTH / 2 + BORDER_OFFSET - 32; // Center 8 blocks (8*8 = 64px wide)
+        const startY = 120;
+
+        for (let i = 0; i < 7; i++) {
+          const x = startX + i * 10;
+          const y = startY;
+          const blockKey = `preview-block-${i}`;
+
+          // Create block texture with new level's palette
+          SpriteBlockRenderer.createBlockTexture(this, newPalette, newLevel, blockKey, i);
+
+          const block = this.add.sprite(x, y, blockKey).setOrigin(0, 0);
+          block.setDepth(201);
+          block.setAlpha(0);
+          block.setScale(0.5);
+          previewBlocks.push({ sprite: block, key: blockKey });
+        }
+
+        // Animate text and blocks in
+        this.tweens.add({
+          targets: [levelText, subtitle],
+          alpha: 1,
+          duration: 400,
+          ease: 'Power2'
+        });
+
+        this.tweens.add({
+          targets: previewBlocks.map(b => b.sprite),
+          alpha: 1,
+          scale: 1,
+          duration: 500,
+          delay: 200,
+          ease: 'Back.easeOut',
+          onComplete: () => {
+            // Hold for a moment
+            this.time.delayedCall(1200, () => {
+              // Fade out text and preview blocks only (keep black screen)
+              this.tweens.add({
+                targets: [levelText, subtitle, ...previewBlocks.map(b => b.sprite)],
+                alpha: 0,
+                duration: 300,
+                onComplete: () => {
+                  // Clean up text and preview blocks
+                  levelText.destroy();
+                  subtitle.destroy();
+                  previewBlocks.forEach(b => {
+                    b.sprite.destroy();
+                    if (this.textures.exists(b.key)) {
+                      this.textures.remove(b.key);
+                    }
+                  });
+
+                  // Black screen stays for a moment
+                  this.time.delayedCall(300, () => {
+                    // Destroy old level elements while screen is black
+                    this.blockSprites.forEach(sprite => sprite.destroy());
+                    this.blockSprites = [];
+                    this.ghostSprites.forEach(sprite => sprite.destroy());
+                    this.ghostSprites = [];
+
+                    // Load new level (no intro yet)
+                    this.loadLevel(newLevel, false);
+                    this.updateUI();
+                    this.clearing = false;
+                    this.spawnPiece();
+
+                    // IMMEDIATELY hide UI containers before fading out black screen
+                    if (this.playAreaContainer) {
+                      this.playAreaContainer.y = -GAME_HEIGHT;
+                    }
+                    if (this.uiPanelContainer) {
+                      this.uiPanelContainer.y = -GAME_HEIGHT;
+                    }
+                    this.blockSprites.forEach(sprite => sprite.setVisible(false));
+                    this.ghostSprites.forEach(sprite => sprite.setVisible(false));
+                    this.inputEnabled = false;
+
+                    // Fade out black screen to reveal ONLY the backdrop
+                    this.tweens.add({
+                      targets: blackScreen,
+                      alpha: 0,
+                      duration: 500,
+                      ease: 'Power2',
+                      onComplete: () => {
+                        blackScreen.destroy();
+                        // Now show the intro animation (UI falls in)
+                        // Wait 1 second showing just the backdrop
+                        this.time.delayedCall(1000, () => {
+                          // Play woosh sound
+                          SoundGenerator.playWoosh();
+
+                          // Animate play area falling in
+                          if (this.playAreaContainer) {
+                            this.tweens.add({
+                              targets: this.playAreaContainer,
+                              y: 0,
+                              duration: 600,
+                              ease: 'Bounce.easeOut'
+                            });
+                          }
+
+                          // Animate UI panel falling in (slightly delayed)
+                          if (this.uiPanelContainer) {
+                            this.tweens.add({
+                              targets: this.uiPanelContainer,
+                              y: 0,
+                              duration: 600,
+                              delay: 100,
+                              ease: 'Bounce.easeOut',
+                              onComplete: () => {
+                                // Show blocks and re-enable input after animations complete
+                                this.blockSprites.forEach(sprite => sprite.setVisible(true));
+                                this.ghostSprites.forEach(sprite => sprite.setVisible(true));
+                                this.inputEnabled = true;
+                              }
+                            });
+                          }
+                        });
+                      }
+                    });
+                  });
+                }
+              });
+            });
+          }
+        });
+      }
+    });
+  }
+
+  redrawGrid() {
+    this.blockSprites.forEach(sprite => sprite.destroy());
+    this.blockSprites = [];
+    for (let y = 0; y < GRID_HEIGHT; y++) {
+      for (let x = 0; x < GRID_WIDTH; x++) {
+        if (this.grid[y][x]) {
+          const blockType = this.grid[y][x];
+          const sprite = this.add.sprite(PLAY_AREA_X + x * BLOCK_SIZE, PLAY_AREA_Y + y * BLOCK_SIZE, `block-${blockType}`).setOrigin(0, 0);
+          sprite.setDepth(2);
+          this.blockSprites.push(sprite);
+        }
+      }
+    }
+  }
+
+  renderPiece() {
+    this.blockSprites.forEach(sprite => { if (sprite.getData('current')) sprite.destroy(); });
+    this.blockSprites = this.blockSprites.filter(s => !s.getData('current'));
+    this.ghostSprites.forEach(sprite => sprite.destroy());
+    this.ghostSprites = [];
+    if (!this.currentPiece) return;
+    if (this.level === 1) {
+      let ghostY = this.currentY;
+      while (!this.checkCollision(this.currentPiece, this.currentX, ghostY + 1)) ghostY++;
+      const shape = this.currentPiece.shape;
+      for (let row = 0; row < shape.length; row++) {
+        for (let col = 0; col < shape[row].length; col++) {
+          if (shape[row][col]) {
+            const x = PLAY_AREA_X + (this.currentX + col) * BLOCK_SIZE;
+            const y = PLAY_AREA_Y + (ghostY + row) * BLOCK_SIZE;
+            const sprite = this.add.sprite(x, y, `block-${this.currentPiece.name}`).setOrigin(0, 0);
+            sprite.setAlpha(0.3);
+            sprite.setDepth(1);
+            this.ghostSprites.push(sprite);
+          }
+        }
+      }
+    }
+    const shape = this.currentPiece.shape;
+    for (let row = 0; row < shape.length; row++) {
+      for (let col = 0; col < shape[row].length; col++) {
+        if (shape[row][col]) {
+          const x = PLAY_AREA_X + (this.currentX + col) * BLOCK_SIZE;
+          const y = PLAY_AREA_Y + (this.currentY + row) * BLOCK_SIZE;
+          const sprite = this.add.sprite(x, y, `block-${this.currentPiece.name}`).setOrigin(0, 0);
+          sprite.setData('current', true);
+          sprite.setDepth(2);
+          this.blockSprites.push(sprite);
+        }
+      }
+    }
+  }
+
+  updateNextPieceDisplay() {
+    if (this.nextPieceSprites) this.nextPieceSprites.forEach(sprite => sprite.destroy());
+    this.nextPieceSprites = [];
+    if (!this.nextPiece) return;
+    const shape = this.nextPiece.shape;
+    const startX = this.nextPieceX;
+    const startY = this.nextPieceY;
+    for (let row = 0; row < shape.length; row++) {
+      for (let col = 0; col < shape[row].length; col++) {
+        if (shape[row][col]) {
+          const x = startX + col * BLOCK_SIZE;
+          const y = startY + row * BLOCK_SIZE;
+          const sprite = this.add.sprite(x, y, `block-${this.nextPiece.name}`).setOrigin(0, 0);
+          sprite.setDepth(20);
+          this.nextPieceSprites.push(sprite);
+          // Add to UI container so it animates with the panel
+          if (this.uiPanelContainer) {
+            this.uiPanelContainer.add(sprite);
+          }
+        }
+      }
+    }
+  }
+
+  updateUI() {
+    const scoreStr = this.score.toString().padStart(6, '0');
+    this.scoreText.setText(scoreStr);
+    this.levelText.setText(this.level.toString());
+    this.linesText.setText(this.lines.toString());
+  }
+
+  handleGameOver() {
+    if (this.currentMusic) this.currentMusic.stop();
+    SoundGenerator.playGameOver();
+
+    // Display game over image (256x224, fills the game area)
+    const gameOverImage = this.add.image(BORDER_OFFSET, 0, 'game-over');
+    gameOverImage.setOrigin(0, 0);
+    gameOverImage.setDisplaySize(GAME_WIDTH, GAME_HEIGHT);
+    gameOverImage.setDepth(100);
+    gameOverImage.texture.setFilter(Phaser.Textures.FilterMode.NEAREST);
+
+    this.input.keyboard.once('keydown-SPACE', () => {
+      this.scene.start('PreloadScene');
+    });
+  }
+}

src/scenes/ModeSelectScene.js

@@ -0,0 +1,125 @@
+import Phaser from 'phaser';
+import { GAME_WIDTH, GAME_HEIGHT, BORDER_OFFSET } from '../constants.js';
+import SoundGenerator from '../utils/SoundGenerator.js';
+
+export default class ModeSelectScene extends Phaser.Scene {
+  constructor() {
+    super({ key: 'ModeSelectScene' });
+  }
+
+  create() {
+    // Use the title backdrop
+    const titleImage = this.add.image(BORDER_OFFSET, 0, 'title');
+    titleImage.setOrigin(0, 0);
+    titleImage.texture.setFilter(Phaser.Textures.FilterMode.NEAREST);
+
+    // Dim the background by 50%
+    const dimOverlay = this.add.rectangle(GAME_WIDTH / 2 + BORDER_OFFSET, GAME_HEIGHT / 2, GAME_WIDTH, GAME_HEIGHT, 0x000000, 0.5);
+    dimOverlay.setDepth(5);
+
+    // Title
+    const titleText = this.add.bitmapText(GAME_WIDTH / 2 + BORDER_OFFSET, 60, 'pixel-font', 'MODE SELECT', 10).setOrigin(0.5);
+    titleText.texture.setFilter(Phaser.Textures.FilterMode.NEAREST);
+    titleText.setDepth(10);
+
+    // Classic mode option
+    this.classicText = this.add.bitmapText(GAME_WIDTH / 2 + BORDER_OFFSET, 100, 'pixel-font', '> CLASSIC', 10).setOrigin(0.5);
+    this.classicText.texture.setFilter(Phaser.Textures.FilterMode.NEAREST);
+    this.classicText.setDepth(10);
+    this.classicText.setInteractive({ useHandCursor: true });
+
+    const classicDesc = this.add.bitmapText(GAME_WIDTH / 2 + BORDER_OFFSET, 115, 'pixel-font', '7 STANDARD PIECES', 10).setOrigin(0.5);
+    classicDesc.texture.setFilter(Phaser.Textures.FilterMode.NEAREST);
+    classicDesc.setDepth(10);
+
+    // Advanced mode option
+    this.advancedText = this.add.bitmapText(GAME_WIDTH / 2 + BORDER_OFFSET, 145, 'pixel-font', '  ADVANCED', 10).setOrigin(0.5);
+    this.advancedText.texture.setFilter(Phaser.Textures.FilterMode.NEAREST);
+    this.advancedText.setDepth(10);
+    this.advancedText.setInteractive({ useHandCursor: true });
+
+    const advancedDesc = this.add.bitmapText(GAME_WIDTH / 2 + BORDER_OFFSET, 160, 'pixel-font', 'EXTRA UNIQUE PIECES', 10).setOrigin(0.5);
+    advancedDesc.texture.setFilter(Phaser.Textures.FilterMode.NEAREST);
+    advancedDesc.setDepth(10);
+
+    // Track selected mode
+    this.selectedMode = 'classic';
+
+    // Hover effects
+    this.classicText.on('pointerover', () => {
+      if (this.selectedMode !== 'classic') {
+        SoundGenerator.playMove();
+        this.selectedMode = 'classic';
+        this.updateSelection();
+      }
+    });
+
+    this.advancedText.on('pointerover', () => {
+      if (this.selectedMode !== 'advanced') {
+        SoundGenerator.playMove();
+        this.selectedMode = 'advanced';
+        this.updateSelection();
+      }
+    });
+
+    // Click handlers
+    this.classicText.on('pointerdown', () => {
+      SoundGenerator.playRotate();
+      this.startGame('classic');
+    });
+
+    this.advancedText.on('pointerdown', () => {
+      SoundGenerator.playRotate();
+      this.startGame('advanced');
+    });
+
+    // Keyboard controls
+    const upKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.UP);
+    const downKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.DOWN);
+    const spaceKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE);
+    const enterKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.ENTER);
+
+    upKey.on('down', () => {
+      if (this.selectedMode !== 'classic') {
+        SoundGenerator.playMove();
+        this.selectedMode = 'classic';
+        this.updateSelection();
+      }
+    });
+
+    downKey.on('down', () => {
+      if (this.selectedMode !== 'advanced') {
+        SoundGenerator.playMove();
+        this.selectedMode = 'advanced';
+        this.updateSelection();
+      }
+    });
+
+    spaceKey.on('down', () => {
+      SoundGenerator.playRotate();
+      this.startGame(this.selectedMode);
+    });
+
+    enterKey.on('down', () => {
+      SoundGenerator.playRotate();
+      this.startGame(this.selectedMode);
+    });
+  }
+
+  updateSelection() {
+    if (this.selectedMode === 'classic') {
+      this.classicText.setText('> CLASSIC');
+      this.advancedText.setText('  ADVANCED');
+    } else {
+      this.classicText.setText('  CLASSIC');
+      this.advancedText.setText('> ADVANCED');
+    }
+  }
+
+  startGame(mode) {
+    // Store the selected mode in the registry so GameScene can access it
+    this.registry.set('gameMode', mode);
+    this.scene.start('GameScene');
+  }
+}
+

src/scenes/PreloadScene.js

@@ -0,0 +1,106 @@
+import Phaser from 'phaser';
+import { MAX_LEVEL, GAME_WIDTH, GAME_HEIGHT, BORDER_OFFSET } from '../constants.js';
+
+export default class PreloadScene extends Phaser.Scene {
+  constructor() {
+    super({ key: 'PreloadScene' });
+  }
+
+  preload() {
+    // Create loading screen
+    const loadingText = this.add.text(GAME_WIDTH / 2 + BORDER_OFFSET, GAME_HEIGHT / 2 - 20, 'LOADING...', {
+      fontSize: '16px',
+      color: '#ffffff',
+      fontFamily: 'monospace'
+    }).setOrigin(0.5);
+
+    const progressText = this.add.text(GAME_WIDTH / 2 + BORDER_OFFSET, GAME_HEIGHT / 2 + 10, '0%', {
+      fontSize: '14px',
+      color: '#ffffff',
+      fontFamily: 'monospace'
+    }).setOrigin(0.5);
+
+    // Progress bar
+    const progressBar = this.add.graphics();
+    const progressBox = this.add.graphics();
+    progressBox.fillStyle(0x222222, 0.8);
+    progressBox.fillRect(GAME_WIDTH / 2 + BORDER_OFFSET - 80, GAME_HEIGHT / 2 + 30, 160, 20);
+
+    // Update progress
+    this.load.on('progress', (value) => {
+      progressText.setText(Math.floor(value * 100) + '%');
+      progressBar.clear();
+      progressBar.fillStyle(0xffffff, 1);
+      progressBar.fillRect(GAME_WIDTH / 2 + BORDER_OFFSET - 78, GAME_HEIGHT / 2 + 32, 156 * value, 16);
+    });
+
+    this.load.on('complete', () => {
+      progressBar.destroy();
+      progressBox.destroy();
+      loadingText.destroy();
+      progressText.destroy();
+    });
+
+    // Load title screen
+    this.load.image('title', 'assets/title.png');
+
+    // Load game over screen
+    this.load.image('game-over', 'assets/game-over.png');
+
+    // Load block sprite sheet (grayscale with depth)
+    this.load.image('blocks-spritesheet', 'assets/blocks-sprite.png');
+
+    // Load crush animation sprite (40x8px = 5 frames of 8x8px)
+    this.load.image('crush-spritesheet', 'assets/crush.png');
+
+    // Load bitmap font (Thick 8x8 from frostyfreeze)
+    this.load.bitmapFont('pixel-font', 'assets/fonts/thick_8x8.png', 'assets/fonts/thick_8x8.xml');
+
+    // Load backdrops for all levels
+    for (let i = 1; i <= MAX_LEVEL; i++) {
+      this.load.image(`backdrop-${i}`, `assets/backdrops/level-${i}/backdrop.png`);
+    }
+
+    // Load music for all levels
+    for (let i = 1; i <= MAX_LEVEL; i++) {
+      this.load.audio(`music-${i}`, `assets/music/level-${i}/track.mp3`);
+    }
+  }
+
+  create() {
+    // Title image fills entire screen (256x224), offset by border
+    const titleImage = this.add.image(BORDER_OFFSET, 0, 'title');
+    titleImage.setOrigin(0, 0);
+    titleImage.texture.setFilter(Phaser.Textures.FilterMode.NEAREST);
+
+    // "Press space to start" text - positioned in bottom third
+    const startText = this.add.bitmapText(GAME_WIDTH / 2 + BORDER_OFFSET, GAME_HEIGHT * 0.7 + 20, 'pixel-font', 'PRESS SPACE TO START', 10).setOrigin(0.5);
+    startText.texture.setFilter(Phaser.Textures.FilterMode.NEAREST);
+    startText.setDepth(10);
+
+    // Demo mode timer - start demo after 10 seconds of inactivity
+    this.demoTimer = this.time.delayedCall(10000, () => {
+      this.startDemoMode();
+    });
+
+    // Blinking effect for start text
+    this.tweens.add({
+      targets: startText,
+      alpha: 0.3,
+      duration: 600,
+      yoyo: true,
+      repeat: -1
+    });
+
+    // Credits text - positioned below start text in bottom third
+    const creditsText = this.add.bitmapText(GAME_WIDTH / 2 + BORDER_OFFSET, GAME_HEIGHT * 0.8 + 20, 'pixel-font', 'BY MARCO VAN HYLCKAMA VLIEG', 10).setOrigin(0.5);
+    creditsText.texture.setFilter(Phaser.Textures.FilterMode.NEAREST);
+    creditsText.setDepth(10);
+
+    // Wait for space key to start
+    this.input.keyboard.once('keydown-SPACE', () => {
+      this.scene.start('ModeSelectScene');
+    });
+  }
+}
+

src/scenes/PreloadScene_new.js

@@ -0,0 +1,52 @@
+import Phaser from 'phaser';
+import { MAX_LEVEL } from '../constants.js';
+
+export default class PreloadScene extends Phaser.Scene {
+  constructor() {
+    super({ key: 'PreloadScene' });
+  }
+
+  preload() {
+    // Load pixel font first
+    this.load.font('retro', 'assets/fonts/font.otf', 'opentype');
+
+    // Create loading text
+    const loadingText = this.add.text(128, 112, 'LOADING...', {
+      fontFamily: 'monospace',
+      fontSize: '8px',
+      color: '#ffffff'
+    }).setOrigin(0.5);
+
+    // Load block sprite sheet (64x8px, 10 sprites of 8x8 each)
+    this.load.image('blocks-spritesheet', 'assets/blocks.png');
+
+    // Load backdrops for all levels
+    for (let i = 1; i <= MAX_LEVEL; i++) {
+      this.load.image(`backdrop-${i}`, `assets/backdrops/level-${i}/backdrop.png`);
+    }
+
+    // Load music for all levels
+    for (let i = 1; i <= MAX_LEVEL; i++) {
+      this.load.audio(`music-${i}`, `assets/music/level-${i}/track.mp3`);
+    }
+
+    // Update loading progress
+    this.load.on('progress', (value) => {
+      loadingText.setText(`LOADING... ${Math.floor(value * 100)}%`);
+    });
+
+    this.load.on('complete', () => {
+      // Update to use pixel font once loaded
+      loadingText.setFontFamily('retro');
+      loadingText.setText('PRESS SPACE TO START');
+    });
+  }
+
+  create() {
+    // Wait for space key to start
+    this.input.keyboard.once('keydown-SPACE', () => {
+      this.scene.start('GameScene');
+    });
+  }
+}
+

src/shaderOverlay.js

@@ -0,0 +1,212 @@
+// This creates a WebGL canvas overlay that applies the Trinitron shader to the final scaled output
+
+const vertexShaderSource = `
+attribute vec2 a_position;
+attribute vec2 a_texCoord;
+varying vec2 v_texCoord;
+
+void main() {
+  gl_Position = vec4(a_position, 0.0, 1.0);
+  v_texCoord = a_texCoord;
+}
+`;
+
+const fragmentShaderSource = `
+precision mediump float;
+
+uniform sampler2D u_texture;
+uniform vec2 u_resolution;
+uniform float u_time;
+
+varying vec2 v_texCoord;
+
+#define PI 3.14159265359
+
+// Random noise function for static
+float random(vec2 co) {
+  return fract(sin(dot(co.xy, vec2(12.9898, 78.233))) * 43758.5453);
+}
+
+void main() {
+  vec2 uv = v_texCoord;
+
+  // CRT curvature - subtle but noticeable
+  vec2 centered = uv - 0.5;
+  float curvature = 0.06; // Curvature amount (reduced by half from 0.12)
+
+  // Apply barrel distortion
+  float r2 = centered.x * centered.x + centered.y * centered.y;
+  float distortion = 1.0 + curvature * r2;
+  vec2 curvedUV = centered * distortion + 0.5;
+
+  // Check if we're outside the original screen bounds (black borders)
+  if (curvedUV.x < 0.0 || curvedUV.x > 1.0 || curvedUV.y < 0.0 || curvedUV.y > 1.0) {
+    gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
+    return;
+  }
+
+  vec3 color = texture2D(u_texture, curvedUV).rgb;
+
+  // Add static noise - using larger blocks for grainier effect
+  // Divide by 4.0 to make static "pixels" 4x4 screen pixels
+  vec2 staticCoord = floor(gl_FragCoord.xy / 4.0);
+  float staticNoise = random(staticCoord + vec2(u_time * 100.0)) * 0.06; // Slightly lower intensity
+  color += vec3(staticNoise);
+
+  // Add flicker (brightness variation over time) - multiple frequencies for realism
+  float flicker = sin(u_time * 12.0) * 0.015 + sin(u_time * 5.7) * 0.0125 + sin(u_time * 23.3) * 0.0075;
+  color *= (1.0 + flicker);
+
+  // 480i scanline effect - simulating classic CRT TV
+  float scanline = gl_FragCoord.y;
+
+  // Calculate scanline width to achieve ~480 scanlines for current resolution
+  // For 556px height, we want 480 scanlines: 556/480 ≈ 1.16 pixels per scanline
+  float scanlineWidth = 2.0;
+  float scanlineIntensity = 0.7; // How dark the scanlines are
+  float scanlineMod = mod(scanline, scanlineWidth);
+
+  // Make scanline darker for half the pixels
+  float scanlineFactor = 1.0;
+  if (scanlineMod < 1.0) {
+    scanlineFactor = 1.0 - scanlineIntensity;
+  }
+
+  // Apply scanlines
+  color *= scanlineFactor;
+
+  // Slight bloom/glow on bright areas (CRT phosphor persistence)
+  float brightness = (color.r + color.g + color.b) / 3.0;
+  color *= 1.0 + (brightness * 0.15);
+
+  // Vignette (darker edges like a CRT tube)
+  float vignette = 1.0 - dot(centered, centered) * 0.4;
+  color *= vignette;
+
+  // Slight color shift for CRT feel
+  color.r *= 1.02;
+  color.b *= 0.98;
+
+  gl_FragColor = vec4(color, 1.0);
+}
+`;
+
+export function createShaderOverlay(gameCanvas) {
+  console.log('Creating shader overlay for canvas:', gameCanvas);
+
+  // Create overlay canvas
+  const overlay = document.createElement('canvas');
+  overlay.style.position = 'absolute';
+  overlay.style.pointerEvents = 'none';
+  overlay.style.zIndex = '1000';
+
+  // Position it over the game canvas
+  const updateOverlayPosition = () => {
+    const rect = gameCanvas.getBoundingClientRect();
+    overlay.style.left = rect.left + 'px';
+    overlay.style.top = rect.top + 'px';
+    overlay.width = rect.width;
+    overlay.height = rect.height;
+    overlay.style.width = rect.width + 'px';
+    overlay.style.height = rect.height + 'px';
+  };
+
+  document.body.appendChild(overlay);
+  updateOverlayPosition();
+
+  // Update on resize
+  window.addEventListener('resize', updateOverlayPosition);
+
+  const gl = overlay.getContext('webgl') || overlay.getContext('experimental-webgl');
+  if (!gl) {
+    console.error('WebGL not supported');
+    return null;
+  }
+
+  console.log('WebGL context created, overlay size:', overlay.width, 'x', overlay.height);
+
+  // Compile shaders
+  function compileShader(source, type) {
+    const shader = gl.createShader(type);
+    gl.shaderSource(shader, source);
+    gl.compileShader(shader);
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+      console.error('Shader compile error:', gl.getShaderInfoLog(shader));
+      gl.deleteShader(shader);
+      return null;
+    }
+    return shader;
+  }
+
+  const vertexShader = compileShader(vertexShaderSource, gl.VERTEX_SHADER);
+  const fragmentShader = compileShader(fragmentShaderSource, gl.FRAGMENT_SHADER);
+
+  const program = gl.createProgram();
+  gl.attachShader(program, vertexShader);
+  gl.attachShader(program, fragmentShader);
+  gl.linkProgram(program);
+
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    console.error('Program link error:', gl.getProgramInfoLog(program));
+    return null;
+  }
+
+  gl.useProgram(program);
+
+  // Set up geometry (flip Y coordinate for texture)
+  const positions = new Float32Array([
+    -1, -1,  0, 1,
+     1, -1,  1, 1,
+    -1,  1,  0, 0,
+     1,  1,  1, 0
+  ]);
+
+  const buffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
+
+  const positionLoc = gl.getAttribLocation(program, 'a_position');
+  const texCoordLoc = gl.getAttribLocation(program, 'a_texCoord');
+
+  gl.enableVertexAttribArray(positionLoc);
+  gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 16, 0);
+
+  gl.enableVertexAttribArray(texCoordLoc);
+  gl.vertexAttribPointer(texCoordLoc, 2, gl.FLOAT, false, 16, 8);
+
+  // Create texture from game canvas
+  const texture = gl.createTexture();
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+
+  const resolutionLoc = gl.getUniformLocation(program, 'u_resolution');
+  const timeLoc = gl.getUniformLocation(program, 'u_time');
+  const borderWidthLoc = gl.getUniformLocation(program, 'u_borderWidth');
+
+  // Render loop
+  function render() {
+    updateOverlayPosition();
+
+    // Copy game canvas to texture
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, gameCanvas);
+
+    // Set uniforms
+    gl.uniform2f(resolutionLoc, overlay.width, overlay.height);
+    gl.uniform1f(timeLoc, performance.now() / 1000);
+
+    // Draw
+    gl.viewport(0, 0, overlay.width, overlay.height);
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+
+    requestAnimationFrame(render);
+  }
+
+  render();
+
+  return overlay;
+}
+

src/shaders/trinitron-fragment.glsl

@@ -0,0 +1,179 @@
+precision mediump float;
+
+// Texture and coordinates
+uniform sampler2D uMainSampler;
+varying vec2 outTexCoord;
+
+// Uniforms for shader parameters
+uniform vec2 resolution;
+uniform float time;
+
+#define PI 3.14159265359
+
+// --- Noise Helper Function (Permutation) ---
+vec4 permute(vec4 t) {
+  return mod(((t * 34.0) + 1.0) * t, 289.0);
+}
+
+// --- 3D Noise Function ---
+float noise3d(vec3 p) {
+  vec3 a = floor(p);
+  vec3 d = p - a;
+  d = d * d * (3.0 - 2.0 * d);
+
+  vec4 b = a.xxyy + vec4(0.0, 1.0, 0.0, 1.0);
+  vec4 k1 = permute(b.xyxy);
+  vec4 k2 = permute(k1.xyxy + b.zzww);
+
+  vec4 c = k2 + a.zzzz;
+  vec4 k3 = permute(c);
+  vec4 k4 = permute(c + 1.0);
+
+  vec4 o1 = fract(k3 * (1.0 / 41.0));
+  vec4 o2 = fract(k4 * (1.0 / 41.0));
+
+  vec4 o3_interp_z = o2 * d.z + o1 * (1.0 - d.z);
+  vec2 o4_interp_xy = o3_interp_z.yw * d.x + o3_interp_z.xz * (1.0 - d.x);
+
+  return o4_interp_xy.y * d.y + o4_interp_xy.x * (1.0 - d.y);
+}
+
+void main() {
+  // --- Configuration Parameters ---
+  float brightness = 2.5;
+  float red_balance = 1.0;
+  float green_balance = 0.85;
+  float blue_balance = 1.0;
+
+  // Custom settings as requested
+  float phosphorWidth = 2.50;
+  float phosphorHeight = 4.50;
+  float internalHorizontalGap = 1.0;
+  float columnGap = 0.2;
+  float verticalCellGap = 0.2;
+  float phosphorPower = 0.9;
+
+  float cell_noise_variation_amount = 0.025;
+  float cell_noise_scale_xy = 240.0;
+  float cell_noise_speed = 24.0;
+  float curvature_amount = 0.0; // Set to 0 as requested
+
+  // --- Apply Curvature Distortion ---
+  vec2 fragCoord = gl_FragCoord.xy;
+  vec2 uv = outTexCoord;
+  vec2 centered_uv_output = uv - 0.5;
+  float r = length(centered_uv_output);
+  float distort_factor = 1.0 + curvature_amount * r * r;
+  vec2 centered_uv_source = centered_uv_output * distort_factor;
+  vec2 source_uv = centered_uv_source + 0.5;
+  vec2 fragCoord_warped = source_uv * resolution;
+
+  // --- Check if Warped Coordinate is on the "Flat Screen" ---
+  bool is_on_original_flat_screen = source_uv.x >= 0.0 && source_uv.x <= 1.0 &&
+                                   source_uv.y >= 0.0 && source_uv.y <= 1.0;
+
+  if (!is_on_original_flat_screen) {
+    gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
+    return;
+  }
+
+  // --- Calculated Grid Dimensions ---
+  float fullCellWidth = 3.0 * phosphorWidth + 3.0 * internalHorizontalGap + columnGap;
+  float fullRowHeight = phosphorHeight + verticalCellGap;
+
+  // --- Calculate Logical Grid Positions ---
+  float logical_cell_index_x = floor(fragCoord_warped.x / fullCellWidth);
+  float shift_y_offset = 0.0;
+  
+  if (mod(logical_cell_index_x, 2.0) != 0.0) {
+    shift_y_offset = fullRowHeight / 2.0;
+  }
+  
+  float effective_y_warped = fragCoord_warped.y + shift_y_offset;
+  float logical_row_index = floor(effective_y_warped / fullRowHeight);
+
+  float uv_cell_x = mod(fragCoord_warped.x, fullCellWidth);
+  if (uv_cell_x < 0.0) {
+    uv_cell_x += fullCellWidth;
+  }
+  
+  float uv_row_y = mod(effective_y_warped, fullRowHeight);
+  if (uv_row_y < 0.0) {
+    uv_row_y += fullRowHeight;
+  }
+
+  // --- Video Sampling and Color Balancing ---
+  vec3 video_color = texture2D(uMainSampler, source_uv).rgb;
+  video_color.r *= red_balance;
+  video_color.g *= green_balance;
+  video_color.b *= blue_balance;
+
+  // --- Determine if inside a Phosphor Area ---
+  vec3 final_color = vec3(0.0);
+  bool in_column_gap = uv_cell_x >= (3.0 * phosphorWidth + 3.0 * internalHorizontalGap);
+  bool in_vertical_gap = uv_row_y >= phosphorHeight;
+
+  if (!in_column_gap && !in_vertical_gap) {
+    float uv_cell_x_within_block = uv_cell_x;
+    vec3 phosphor_base_color = vec3(0.0);
+    float video_component_intensity = 0.0;
+    float current_phosphor_startX_in_block = -1.0;
+    float current_x_tracker = 0.0;
+
+    // Red phosphor area
+    if (uv_cell_x_within_block >= current_x_tracker && uv_cell_x_within_block < current_x_tracker + phosphorWidth) {
+      phosphor_base_color = vec3(1.0, 0.0, 0.0);
+      video_component_intensity = video_color.r;
+      current_phosphor_startX_in_block = current_x_tracker;
+    }
+    current_x_tracker += phosphorWidth + internalHorizontalGap;
+
+    // Green phosphor area
+    if (uv_cell_x_within_block >= current_x_tracker && uv_cell_x_within_block < current_x_tracker + phosphorWidth) {
+      phosphor_base_color = vec3(0.0, 1.0, 0.0);
+      video_component_intensity = video_color.g;
+      current_phosphor_startX_in_block = current_x_tracker;
+    }
+    current_x_tracker += phosphorWidth + internalHorizontalGap;
+
+    // Blue phosphor area
+    if (uv_cell_x_within_block >= current_x_tracker && uv_cell_x_within_block < current_x_tracker + phosphorWidth) {
+      phosphor_base_color = vec3(0.0, 0.0, 1.0);
+      video_component_intensity = video_color.b;
+      current_phosphor_startX_in_block = current_x_tracker;
+    }
+
+    if (current_phosphor_startX_in_block >= 0.0) {
+      float x_in_phosphor = (uv_cell_x_within_block - current_phosphor_startX_in_block) / phosphorWidth;
+      float horizontal_intensity_factor = pow(sin(x_in_phosphor * PI), phosphorPower);
+      float y_in_phosphor_band = uv_row_y / phosphorHeight;
+      float vertical_intensity_factor = (phosphorHeight > 0.0) ? pow(sin(y_in_phosphor_band * PI), phosphorPower) : 1.0;
+      float total_intensity_factor = horizontal_intensity_factor * vertical_intensity_factor;
+      final_color = phosphor_base_color * video_component_intensity * total_intensity_factor;
+    }
+  }
+
+  // --- Apply Cell-Based RGB Analog Noise ---
+  vec3 noise_pos = vec3(logical_cell_index_x * cell_noise_scale_xy,
+                        logical_row_index * cell_noise_scale_xy,
+                        time * cell_noise_speed);
+
+  vec3 cell_noise_rgb;
+  cell_noise_rgb.r = noise3d(noise_pos);
+  cell_noise_rgb.g = noise3d(noise_pos + vec3(19.0, 0.0, 0.0));
+  cell_noise_rgb.b = noise3d(noise_pos + vec3(0.0, 13.0, 0.0));
+  cell_noise_rgb = cell_noise_rgb * 2.0 - 1.0;
+  final_color += cell_noise_rgb * cell_noise_variation_amount;
+
+  // --- Apply Overall Brightness and Effects ---
+  final_color *= brightness;
+  float edge_darken_strength = 0.1;
+  float vignette_factor = 1.0 - dot(centered_uv_output, centered_uv_output) * edge_darken_strength * 2.0;
+  vignette_factor = clamp(vignette_factor, 0.0, 1.0);
+  final_color *= vignette_factor;
+
+  // --- Output ---
+  final_color = clamp(final_color, 0.0, 1.0);
+  gl_FragColor = vec4(final_color, 1.0);
+}
+

src/utils/BlockRenderer.js

@@ -0,0 +1,128 @@
+import { BLOCK_SIZE } from '../constants.js';
+
+/**
+ * Renders Tetris blocks with different pixel art styles per level
+ */
+export default class BlockRenderer {
+  /**
+   * Create a block texture with a specific style
+   * @param {Phaser.Scene} scene - The Phaser scene
+   * @param {number} color - The color in hex format
+   * @param {number} level - Current level (1-10) determines style
+   * @param {string} key - Texture key to create
+   */
+  static createBlockTexture(scene, color, level, key) {
+    const graphics = scene.make.graphics({ x: 0, y: 0, add: false });
+    
+    // Extract RGB components
+    const r = (color >> 16) & 0xFF;
+    const g = (color >> 8) & 0xFF;
+    const b = color & 0xFF;
+    
+    // Create lighter and darker shades
+    const lightColor = Phaser.Display.Color.GetColor(
+      Math.min(255, r + 60),
+      Math.min(255, g + 60),
+      Math.min(255, b + 60)
+    );
+    const darkColor = Phaser.Display.Color.GetColor(
+      Math.max(0, r - 60),
+      Math.max(0, g - 60),
+      Math.max(0, b - 60)
+    );
+    
+    // Different styles based on level
+    const style = (level - 1) % 5; // 5 different styles cycling
+    
+    switch (style) {
+      case 0: // Classic with border
+        this.drawClassicBlock(graphics, color, lightColor, darkColor);
+        break;
+      case 1: // Gradient style
+        this.drawGradientBlock(graphics, color, lightColor, darkColor);
+        break;
+      case 2: // Dotted pattern
+        this.drawDottedBlock(graphics, color, lightColor);
+        break;
+      case 3: // Checkered
+        this.drawCheckeredBlock(graphics, color, darkColor);
+        break;
+      case 4: // Outlined
+        this.drawOutlinedBlock(graphics, color, lightColor, darkColor);
+        break;
+    }
+    
+    graphics.generateTexture(key, BLOCK_SIZE, BLOCK_SIZE);
+    graphics.destroy();
+  }
+  
+  static drawClassicBlock(graphics, color, lightColor, darkColor) {
+    // Fill
+    graphics.fillStyle(color);
+    graphics.fillRect(0, 0, BLOCK_SIZE, BLOCK_SIZE);
+    
+    // Light edge (top-left)
+    graphics.fillStyle(lightColor);
+    graphics.fillRect(0, 0, BLOCK_SIZE, 1);
+    graphics.fillRect(0, 0, 1, BLOCK_SIZE);
+    
+    // Dark edge (bottom-right)
+    graphics.fillStyle(darkColor);
+    graphics.fillRect(0, BLOCK_SIZE - 1, BLOCK_SIZE, 1);
+    graphics.fillRect(BLOCK_SIZE - 1, 0, 1, BLOCK_SIZE);
+  }
+  
+  static drawGradientBlock(graphics, color, lightColor, darkColor) {
+    // Create gradient effect with horizontal bands
+    for (let y = 0; y < BLOCK_SIZE; y++) {
+      const ratio = y / BLOCK_SIZE;
+      const r = Phaser.Math.Linear((lightColor >> 16) & 0xFF, (darkColor >> 16) & 0xFF, ratio);
+      const g = Phaser.Math.Linear((lightColor >> 8) & 0xFF, (darkColor >> 8) & 0xFF, ratio);
+      const b = Phaser.Math.Linear(lightColor & 0xFF, darkColor & 0xFF, ratio);
+      graphics.fillStyle(Phaser.Display.Color.GetColor(r, g, b));
+      graphics.fillRect(0, y, BLOCK_SIZE, 1);
+    }
+  }
+  
+  static drawDottedBlock(graphics, color, lightColor) {
+    graphics.fillStyle(color);
+    graphics.fillRect(0, 0, BLOCK_SIZE, BLOCK_SIZE);
+    
+    // Add dots
+    graphics.fillStyle(lightColor);
+    for (let y = 1; y < BLOCK_SIZE; y += 3) {
+      for (let x = 1; x < BLOCK_SIZE; x += 3) {
+        graphics.fillRect(x, y, 1, 1);
+      }
+    }
+  }
+  
+  static drawCheckeredBlock(graphics, color, darkColor) {
+    for (let y = 0; y < BLOCK_SIZE; y += 2) {
+      for (let x = 0; x < BLOCK_SIZE; x += 2) {
+        const useMain = (x + y) % 4 === 0;
+        graphics.fillStyle(useMain ? color : darkColor);
+        graphics.fillRect(x, y, 2, 2);
+      }
+    }
+  }
+  
+  static drawOutlinedBlock(graphics, color, lightColor, darkColor) {
+    // Fill
+    graphics.fillStyle(color);
+    graphics.fillRect(1, 1, BLOCK_SIZE - 2, BLOCK_SIZE - 2);
+    
+    // Thick outline
+    graphics.fillStyle(darkColor);
+    graphics.fillRect(0, 0, BLOCK_SIZE, 1);
+    graphics.fillRect(0, 0, 1, BLOCK_SIZE);
+    graphics.fillRect(0, BLOCK_SIZE - 1, BLOCK_SIZE, 1);
+    graphics.fillRect(BLOCK_SIZE - 1, 0, 1, BLOCK_SIZE);
+    
+    // Inner highlight
+    graphics.fillStyle(lightColor);
+    graphics.fillRect(2, 2, BLOCK_SIZE - 4, 1);
+    graphics.fillRect(2, 2, 1, BLOCK_SIZE - 4);
+  }
+}
+

src/utils/ColorExtractor.js

@@ -0,0 +1,84 @@
+/**
+ * Extracts dominant colors from an image to create a palette for Tetris blocks
+ */
+export default class ColorExtractor {
+  /**
+   * Extract 7 dominant colors from a texture
+   * @param {Phaser.Scene} scene - The Phaser scene
+   * @param {string} textureKey - The key of the loaded texture
+   * @returns {number[]} Array of 7 color values in hex format
+   */
+  static extractPalette(scene, textureKey) {
+    const texture = scene.textures.get(textureKey);
+    const source = texture.getSourceImage();
+    
+    // Create a temporary canvas to analyze the image
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    canvas.width = source.width;
+    canvas.height = source.height;
+    ctx.drawImage(source, 0, 0);
+    
+    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    const pixels = imageData.data;
+    
+    // Sample pixels (every 4th pixel for performance)
+    const colorMap = new Map();
+    for (let i = 0; i < pixels.length; i += 16) { // RGBA, skip every 4 pixels
+      const r = pixels[i];
+      const g = pixels[i + 1];
+      const b = pixels[i + 2];
+      const a = pixels[i + 3];
+      
+      // Skip transparent pixels
+      if (a < 128) continue;
+      
+      // Quantize colors to reduce similar shades
+      const qr = Math.round(r / 32) * 32;
+      const qg = Math.round(g / 32) * 32;
+      const qb = Math.round(b / 32) * 32;
+      
+      const colorKey = (qr << 16) | (qg << 8) | qb;
+      colorMap.set(colorKey, (colorMap.get(colorKey) || 0) + 1);
+    }
+    
+    // Sort colors by frequency
+    const sortedColors = Array.from(colorMap.entries())
+      .sort((a, b) => b[1] - a[1])
+      .map(entry => entry[0]);
+    
+    // Get top 7 colors, ensuring variety
+    const palette = [];
+    for (let i = 0; i < sortedColors.length && palette.length < 7; i++) {
+      const color = sortedColors[i];
+
+      // Ensure color is not too dark (visible on dark backgrounds)
+      const r = (color >> 16) & 0xFF;
+      const g = (color >> 8) & 0xFF;
+      const b = color & 0xFF;
+      const brightness = (r + g + b) / 3;
+
+      if (brightness > 70) { // Skip dark colors - minimum brightness threshold
+        palette.push(color);
+      }
+    }
+    
+    // Fill remaining slots with vibrant defaults if needed
+    const defaultColors = [
+      0x00F0F0, // Cyan
+      0xF0F000, // Yellow
+      0xA000F0, // Purple
+      0x00F000, // Green
+      0xF00000, // Red
+      0x0000F0, // Blue
+      0xF0A000  // Orange
+    ];
+    
+    while (palette.length < 7) {
+      palette.push(defaultColors[palette.length]);
+    }
+    
+    return palette;
+  }
+}
+