? wtf starting block is not centered and no blocks to drop to see

components/tower-game.js

@@ -5,8 +5,9 @@ class TowerGame extends HTMLElement {
       <style>
         .game-container {
           width: 100%;
-          height: 500px;
-          background: #f0f0f0;
+          height: 60vh;
+          min-height: 400px;
+background: #f0f0f0;
           position: relative;
           overflow: hidden;
           border-radius: 8px;
@@ -40,20 +41,25 @@ class TowerGame extends HTMLElement {
   }
 
   initGame() {
-    this.gameWidth = 300;
-    this.gameHeight = 500;
-    this.blockWidth = 60;
+    const container = this.shadowRoot.querySelector('.game-container');
+    this.gameWidth = container.clientWidth;
+    this.gameHeight = container.clientHeight;
+    this.blockWidth = Math.min(60, this.gameWidth * 0.2);
     this.blockHeight = 20;
     this.speed = 2;
     this.direction = 1;
     this.tower = [];
     this.score = 0;
     this.gameOver = false;
+    this.activeBlock = null;
 
-    // Create base block
-    this.createBlock(this.gameWidth/2 - this.blockWidth/2, this.gameHeight - this.blockHeight, true);
-    
-    // Start game loop
+    // Create base block centered
+    const baseX = (this.gameWidth - this.blockWidth) / 2;
+    this.createBlock(baseX, this.gameHeight - this.blockHeight, true);
+
+    // Create first moving block
+    this.createBlock(0, this.gameHeight - this.blockHeight * 2);
+// Start game loop
     this.gameLoop();
     
     // Set up controls
@@ -91,23 +97,47 @@ class TowerGame extends HTMLElement {
 
     requestAnimationFrame(() => this.gameLoop());
   }
-
   placeBlock() {
     if (!this.activeBlock || this.gameOver) return;
 
+    // Calculate overlap with previous block
+    const prevBlock = this.tower[this.tower.length - 1];
+    const overlapLeft = Math.max(0, prevBlock.x - this.activeBlock.x);
+    const overlapRight = Math.max(0, (this.activeBlock.x + this.blockWidth) - (prevBlock.x + this.blockWidth));
+    const overlapTotal = overlapLeft + overlapRight;
+
+    // Check if block is completely off
+    if (overlapTotal >= this.blockWidth) {
+      this.gameOver = true;
+      this.shadowRoot.querySelector('.score-display').textContent += ` - Game Over!`;
+      return;
+    }
+
+    // Trim the block to fit
+    if (overlapTotal > 0) {
+      this.blockWidth -= overlapTotal;
+      this.activeBlock.element.style.width = `${this.blockWidth}px`;
+      if (overlapLeft > 0) {
+        this.activeBlock.x += overlapLeft;
+        this.activeBlock.element.style.left = `${this.activeBlock.x}px`;
+      }
+    }
+
     // Add active block to tower
     this.activeBlock.element.classList.remove('active-block');
     this.tower.push(this.activeBlock);
     this.score++;
     this.updateScore();
 
-    // Create new active block
+    // Create new active block (slightly narrower)
+    const newWidth = Math.max(20, this.blockWidth * 0.98);
     const newY = this.tower[this.tower.length-1].y - this.blockHeight;
+    this.blockWidth = newWidth;
     this.createBlock(0, newY);
 
     // Increase speed slightly
     this.speed = Math.min(5, this.speed + 0.1);
-  }
+}
 
   updateScore() {
     this.shadowRoot.querySelector('.score-display').textContent = `Height: ${this.score}`;