---
layout: game-canvas
title: Tetris - Shivering Games
bg_color_start: '#0f2027'
bg_color_end: '#2c5364'
---

<div class="container">
  <a href="/games/" class="back-link">← Back to Games</a>

  <h1 style="color: white; text-align: center; margin-bottom: 10px;">Tetris</h1>

  <div class="game-info" style="text-align: center; color: rgba(255,255,255,0.9); margin-bottom: 20px;">
    <p><strong>Score:</strong> <span id="score">0</span> | <strong>Lines:</strong> <span id="lines">0</span> | <strong>Level:</strong> <span id="level">1</span></p>
    <p style="font-size: 0.9em; margin-top: 10px;">
      Arrow Keys: Move/Rotate | Space: Drop | P: Pause
    </p>
  </div>

  <canvas id="gameCanvas" width="300" height="600"></canvas>

  <div id="gameOver" style="display: none; text-align: center; margin-top: 20px; color: white;">
    <h2>Game Over!</h2>
    <p>Final Score: <span id="finalScore">0</span></p>
    <button onclick="location.reload()" style="padding: 10px 30px; font-size: 16px; cursor: pointer; background: #667eea; color: white; border: none; border-radius: 4px; margin-top: 10px;">Play Again</button>
  </div>
</div>