<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Starlit Stacker</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@600&family=Nunito:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css" />
<script src="game.js" defer></script>
</head>
<body>
<div class="starfield" aria-hidden="true">✨ 🌙 ⭐ 💜 💖</div>
<main class="layout">
<header class="hero">
<div>
<h1>Starlit Stacker</h1>
<p class="tagline">Drop glowing constellations into neat rows to keep the night sky tidy.</p>
</div>
<div class="panel">
<div>Score: <span id="score">0</span> ⭐</div>
<div>Lines: <span id="lines">0</span> ✨</div>
<div>Best: <span id="best">0</span> 🌙</div>
<button class="btn" id="new-game">New Game</button>
</div>
</header>
<section class="play">
<div class="board" id="board" aria-label="Tetris board" role="grid"></div>
<aside class="info">
<div class="next-box">
<h2>Next Shape</h2>
<div class="preview" id="preview"></div>
</div>
<div class="controls">
<h2>Controls</h2>
<ul>
<li>Left / Right: Move</li>
<li>Up: Rotate</li>
<li>Down: Soft drop</li>
<li>Space: Hard drop</li>
</ul>
</div>
<div class="instructions">
<h2>How to play</h2>
<p>Stack dreamy blocks to fill entire rows. Completed rows vanish in sparkles. Keep the night sky clear as long as you can!</p>
</div>
</aside>
</section>
</main>
<div class="overlay" id="overlay">
<div class="card">
<h2>Starlit Stacker</h2>
<p>Use the arrow keys or on-screen buttons to guide the glowing pieces. Fill rows to earn stars!</p>
<button class="btn btn-lg" id="start">Play</button>
</div>
</div>
<div class="touch-controls" id="touch-controls">
<button data-action="left">⟵</button>
<button data-action="rotate">⟳</button>
<button data-action="right">⟶</button>
<button data-action="drop">⬇</button>
</div>
</body>
</html>