<div id="app">
<section id="start" class="screen">
<div class="hero">
<div class="heart">💗</div>
<div class="small-title">FRIENDSHIP TEST</div>
<h1>HOW WELL DO YOU<br>ACTUALLY KNOW ME?</h1>
<p class="subtitle">
30 questions.<br>
No cheating.<br>
Let's see if you actually know me...
</p>
<button id="startBtn" class="primary-btn">
START THE QUIZ →
</button>
</div>
</section>
<section id="quiz" class="screen hidden">
<div class="quiz-card">
<div class="quiz-top">
<span id="counter">Question 1 / 30</span>
<span id="score">Score: 0</span>
</div>
<div class="progress-track">
<div id="progress" class="progress-bar"></div>
</div>
<h2 id="question"></h2>
<div id="options"></div>
<div id="feedback" class="hidden"></div>
<button id="nextBtn" class="primary-btn hidden">
NEXT →
</button>
</div>
</section>
<section id="result" class="screen hidden">
<div class="result-card">
<div id="resultEmoji" class="result-emoji">🏆</div>
<div class="complete-badge">
QUIZ COMPLETE
</div>
<h2 id="resultTitle"></h2>
<div id="finalScore" class="final-score"></div>
<div id="percentage" class="percentage"></div>
<p id="resultMessage"></p>
<button id="againBtn" class="primary-btn">
PLAY AGAIN ↻
</button>
<div class="footer">
Made for my friends 💗
</div>
</div>
</section>
</div>