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

.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; }

@media (max-width: 700px) { .game-container { padding: 16px; } h1 { font-size: 1.8rem; } .task-name { font-size: 1rem; } .tools-grid { grid-template-columns: repeat(2, 1fr); } } </style> </head> <body>

.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 16px; margin-top: 10px; }

// event binding and init function initGame() { resetGame(); // additional event listeners resetBtn.addEventListener('click', () => { removeWinModal(); resetGame(); }); skipHintBtn.addEventListener('click', () => { randomHint(); }); // close win modal if clicked outside? handled by new game button inside } // final start initGame(); </script> </body> </html>

/* GAME ZONE: two columns (task list & tool deck) */ .game-play-area { display: flex; flex-wrap: wrap; gap: 28px; margin: 20px 0 30px; }

.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #1d140c; }

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