Yoosful Game 'link' Direct

.message-area { background: #2f2e2a; color: #ffdfaa; font-weight: 500; min-width: 160px; text-align: center; }

<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

/* winner modal effect */ .win-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 1000; } .message-area { background: #2f2e2a

/* 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); } name: "Loosen rusty bolt"

.win-card h2 { font-size: 2.5rem; margin: 0; }

.yoosful-tag { background: #f7c56e; padding: 6px 16px; border-radius: 60px; font-weight: bold; color: #2d2b1f; font-size: 0.9rem; box-shadow: inset 0 -1px 0 #b1620e, 0 2px 6px rgba(0,0,0,0.1); }

.btn-primary { background: #e67e22; color: white; box-shadow: 0 6px 0 #b45f1b; }