/* left: active tasks */ .tasks-column { flex: 1.2; min-width: 260px; background: #fef3e2; border-radius: 48px; padding: 18px 16px; box-shadow: inset 0 0 0 2px #fff6e8, 0 10px 20px rgba(0,0,0,0.1); }
<script> // ---------- YOOSFUL GAME DATA ---------- // Each task has a unique id, name, emoji, and required tool name (key) const TASKS = [ { id: 0, name: "Loosen rusty bolt", emoji: "🔩", requiredTool: "wrench", description: "needs grip & torque" }, { id: 1, name: "Hang a picture frame", emoji: "🖼️", requiredTool: "hammer", description: "nail it gently" }, { id: 2, name: "Measure window width", emoji: "📏", requiredTool: "tape measure", description: "accurate length" }, { id: 3, name: "Cut a cardboard box", emoji: "📦", requiredTool: "scissors", description: "clean cut" }, { id: 4, name: "Tighten loose screw", emoji: "🧰", requiredTool: "screwdriver", description: "cross or flat" }, { id: 5, name: "Level a shelf", emoji: "📐", requiredTool: "level", description: "bubble leveling" }, { id: 6, name: "Paint a wall patch", emoji: "🎨", requiredTool: "paintbrush", description: "smooth stroke" }, { id: 7, name: "Cut a wire", emoji: "⚡", requiredTool: "pliers", description: "strip & snip" } ]; yoosful game
// Helper: update UI stats function updateUIStats() { scoreDisplay.innerText = score; streakSpan.innerText = currentStreak; if (currentStreak > bestStreak) { bestStreak = currentStreak; bestStreakSpan.innerText = bestStreak; } else { bestStreakSpan.innerText = bestStreak; } gameMessageDiv.innerText = gameMessage; } /* left: active tasks */
.task-card { background: white; border-radius: 40px; padding: 12px 18px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: all 0.2s ease; border: 2px solid #ffcf8a; box-shadow: 0 5px 0 #c2893c; } padding: 18px 16px