// build map for fast tool lookup const toolMap = new Map(); TOOLS.forEach(t => toolMap.set(t.name, t));
.win-card { background: #fff5e6; border-radius: 64px; padding: 32px 48px; text-align: center; max-width: 400px; animation: bounce 0.4s ease; } yoosful game
/* right: tool deck */ .tools-column { flex: 1; min-width: 280px; background: #e7dcc8; border-radius: 48px; padding: 18px 16px; box-shadow: inset 0 0 0 2px #fff3e0, 0 10px 20px rgba(0,0,0,0.1); } // build map for fast tool lookup const
footer { text-align: center; font-size: 0.7rem; color: #8b765a; margin-top: 16px; } .win-card { background: #fff5e6
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #1d140c; }
<div class="stats-row"> <div class="streak-box">🔥 Streak: <span id="streakCount">0</span></div> <div class="best-box">🏆 Best streak: <span id="bestStreak">0</span></div> <div class="message-area" id="gameMessage">✨ Select a task, then a tool!</div> </div>
<!-- tools column --> <div class="tools-column"> <div class="section-title">🧰 <span>Yoosful tools</span></div> <div class="tools-grid" id="toolsGridContainer"></div> </div> </div>