*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh;display:flex;justify-content:center;align-items:center;padding:20px}
.challenge-container{background:white;border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,0.3);width:100%;max-width:500px;overflow:hidden;animation:slideIn 0.5s ease-out}
@keyframes slideIn{from{opacity:0;transform:translateY(-30px)}
to{opacity:1;transform:translateY(0)}
}.header{background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 100%);color:white;padding:30px;text-align:center}
.header h1{font-size:24px;font-weight:600;margin-bottom:10px}
.header p{opacity:0.9;font-size:14px}
.content{padding:30px}
.instructions{text-align:center;color:#333;margin-bottom:20px;font-size:16px;line-height:1.5}
.puzzle-container{position:relative;width:400px;height:300px;margin:0 auto 30px;border:2px solid #e2e8f0;border-radius:10px;overflow:hidden;background-color:#f8fafc;background-size:cover;background-position:center}
.puzzle-piece{position:absolute;width:80px;height:80px;background-color:rgba(79,70,229,0.8);border:2px dashed white;border-radius:8px;cursor:move;user-select:none;box-shadow:0 4px 12px rgba(0,0,0,0.15);transition:background-color 0.3s}
.puzzle-piece:hover{background-color:rgba(79,70,229,0.9)}
.puzzle-piece:active{cursor:grabbing}
.target-area{position:absolute;width:80px;height:80px;border:2px dashed #10b981;border-radius:8px;background-color:rgba(16,185,129,0.1);pointer-events:none}
.submit-btn{width:100%;padding:18px;background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 100%);color:white;border:none;border-radius:10px;font-size:18px;font-weight:600;cursor:pointer;transition:all 0.3s}
.submit-btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(79,70,229,0.3)}
.submit-btn:active{transform:translateY(0)}
.submit-btn:disabled{opacity:0.6;cursor:not-allowed;transform:none}
.hint-text{text-align:center;color:#64748b;font-size:14px;margin-top:10px;font-style:italic}
.error-message{color:#ef4444;font-size:14px;margin-top:10px;text-align:center;display:none}
.success-message{color:#10b981;font-size:14px;margin-top:10px;text-align:center;display:none}
.attempts-info{text-align:center;color:#64748b;font-size:14px;margin-top:20px}
.timer{text-align:center;color:#f59e0b;font-size:14px;margin-top:10px;font-weight:600}
@media (max-width:480px){.content{padding:20px}
.header{padding:20px}
.puzzle-container{width:100%;height:250px}
}