.task-list { display: flex; flex-direction: column; gap: 14px; }
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #1d140c; } yoosful game
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>Yoosful Game — Match Tools to Tasks</title> <style> * { box-sizing: border-box; user-select: none; -webkit-tap-highlight-color: transparent; } .task-list { display: flex
.task-name { font-size: 1.25rem; font-weight: 600; display: flex; align-items: center; gap: 12px; } } .btn:active { transform: translateY(2px)
const TOOLS = [ { name: "wrench", emoji: "🔧", display: "Wrench" }, { name: "hammer", emoji: "🔨", display: "Hammer" }, { name: "tape measure", emoji: "📏", display: "Tape Measure" }, { name: "scissors", emoji: "✂️", display: "Scissors" }, { name: "screwdriver", emoji: "🪛", display: "Screwdriver" }, { name: "level", emoji: "📐", display: "Spirit Level" }, { name: "paintbrush", emoji: "🖌️", display: "Paintbrush" }, { name: "pliers", emoji: "🔌", display: "Pliers" } ];