<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Blossom Blocks</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="background-charms" aria-hidden="true">🌸 🌷 💖 🌺 💐 💜</div>
<main class="layout">
<header class="top-panel">
<div>
<h1>Blossom Blocks</h1>
<p class="tagline">Arrange the garden blocks and make rows of flowers! 🌸</p>
</div>
<div class="score-panel">
<div class="score">Score: <span id="score">0</span> 🌸</div>
<div class="best">Best score: <span id="best-score">0</span> 💖</div>
<button class="btn" id="new-game">New Game</button>
</div>
</header>
<section class="play-area">
<div class="board" id="board" aria-label="Blossom Blocks board" role="grid"></div>
<div class="pieces" id="pieces" aria-label="Available pieces"></div>
</section>
<aside class="instructions">
<h2>How to play</h2>
<p>Drag pretty blocks onto the garden. Fill a row or column to clear it. When you can’t place any more blocks, the game is over. Try to beat your best score!</p>
</aside>
</main>
<div class="overlay" id="start-overlay">
<div class="overlay-card">
<h2>Blossom Blocks</h2>
<p>Help Viviana tidy the flower beds. Fill rows and columns with bright blocks!</p>
<button class="btn btn-lg" id="start-game">Play</button>
</div>
</div>
<div class="floating-score" id="floating-score" aria-hidden="true"></div>
</body>
</html>