currentGame = null; gameScore = 0;
.progress-ring circle transition: stroke-dashoffset 0.5s ease;
<!-- Games Grid --> <section id="games-section" class="relative z-10 px-6 pb-20"> <div class="max-w-7xl mx-auto"> <div class="flex items-center justify-between mb-8"> <div> <h2 class="text-2xl sm:text-3xl font-bold">Choose Your Challenge</h2> <p class="text-[var(--muted)] mt-1">Pick a subject and start learning</p> </div> <div class="flex gap-2"> <button class="filter-btn active px-4 py-2 rounded-lg text-sm font-medium bg-[var(--accent)] text-[var(--bg)]" data-filter="all">All</button> <button class="filter-btn px-4 py-2 rounded-lg text-sm font-medium bg-[var(--bg-secondary)] border border-[var(--border)] text-[var(--muted)]" data-filter="math">Math</button> <button class="filter-btn px-4 py-2 rounded-lg text-sm font-medium bg-[var(--bg-secondary)] border border-[var(--border)] text-[var(--muted)]" data-filter="word">Word</button> </div> </div> boredom v2 - the best educational games for school students!
to opacity: 1; transform: translateY(0);
::-webkit-scrollbar-thumb:hover background: var(--muted); currentGame = null; gameScore = 0;
<!-- Header --> <header class="relative z-10 px-6 py-4"> <nav class="max-w-7xl mx-auto flex items-center justify-between"> <div class="flex items-center gap-3 animate-in"> <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--accent)] to-[var(--tertiary)] flex items-center justify-center"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="text-[var(--bg)]"> <polygon points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2"></polygon> <line x1="12" y1="22" x2="12" y2="15.5"></line> <polyline points="22 8.5 12 15.5 2 8.5"></polyline> </svg> </div> <span class="font-bold text-xl tracking-tight" style="font-family: 'Space Grotesk'">boredom<span class="text-[var(--muted)]">.v2</span></span> </div> <div class="flex items-center gap-4 animate-in delay-1"> <div class="hidden sm:flex items-center gap-2 px-4 py-2 rounded-full bg-[var(--bg-secondary)] border border-[var(--border)]"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--secondary)" stroke-width="2"> <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon> </svg> <span class="font-semibold text-sm" id="totalPoints">0</span> </div> <button class="btn-secondary text-sm" onclick="showStats()">My Progress</button> </div> </nav> </header>
// Open game function openGame(gameId) currentGame = games.find(g => g.id === gameId); const modal = document.getElementById('gameModal'); modal.classList.add('active'); document.body.style.overflow = 'hidden'; currentGame = null
.quiz-option.wrong border-color: #ef4444; background: rgba(239, 68, 68, 0.1);