<!DOCTYPE HTML>
<Html lang=en>
<head>
<title> readers guide|reading game
<link rel="stylesheet"href="style.css">
<head>
<body>
<main class="app">
<header class="topbar">
<div class="brand">
<span class="brand icon"></span>
<span>READERS GUIDE</span>
<span class="level-badge">LEVEL 1</span>
</header>
<section class="hero">
<p class="eyebrow">✦ LEARNING ARCADE ✦</p>
<h1>Read. Think.<br><span>Shine!</span></h1>
<p class="intro">Train your reading skills and collect stars.</p>
</section>
<section class="game-card" id="game">
<div class="game-info">
<span>WORD CHALLENGE</span>
<span id="progress">1 / 10</span>
</div>
<div class="progress-track">
<div id="progress-bar"></div>
</div>
<div class="picture" id="picture">🐱</div>
<h2 id="question">Which word says CAT?</h2>
<p class="instruction">Choose the correct answer below.</p>
<div class="answers" id="answers"></div>
<p id="feedback" aria-live="polite"></p>
<button class="primary-btn" id="next-btn" hidden>
NEXT QUESTION →
</button>
</section>
<section class="result-card" id="results" hidden>
<div class="trophy">🏆</div>
<p class="eyebrow">MISSION COMPLETE</p>
<h2>You did it!</h2>
<p id="result-message"></p>
<p id="result-score" class="result-score"></p>
<button class="primary-btn" id="restart-btn">
PLAY AGAIN ↻
</button>
</section>
<footer>
<span>✦ KEEP LEARNING</span>
<span>KEEP GLOWING ✦</span>
</footer>
</main>
<script src="script.js"></script>
</body>
</html>