body{font-family:Arial,sans-serif;background:linear-gradient(135deg,#6a11cb,#2575fc);padding:0;display:flex;justify-content:center;align-items:center;height:100vh;margin:auto;color:#fff}.App{text-align:center;background:#ffffff1a;border-radius:15px;box-shadow:0 4px 15px #0000004d;padding:20px;width:90%;max-width:400px}button{background-color:#fff;color:#2575fc;border:none;padding:10px 20px;border-radius:5px;font-size:16px;cursor:pointer;transition:background-color .3s ease,color .3s ease}button:hover{background-color:#2575fc;color:#fff}input{padding:10px;font-size:16px;border:2px solid #ffffff;background:#fff3;border-radius:5px;color:#fff;margin-right:10px}input::placeholder{color:#ccc}.loss{color:#ff4d4f;font-weight:700}.win{color:#4caf50;font-weight:700}.pendu-drawing{position:relative;width:200px;height:300px;margin:20px auto}.base,.pole,.beam,.rope,.head,.body,.left-arm,.right-arm,.left-leg,.right-leg{background-color:#fff}.visible{animation:fadeIn .5s ease-in-out forwards}@keyframes fadeIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.pendu-container{text-align:center;max-width:500px;margin:0 auto}.pendu-drawing{position:relative;width:200px;height:300px;margin:0 auto}.base{position:absolute;bottom:0;left:50%;width:150px;height:10px;background-color:#333;transform:translate(-50%);visibility:hidden}.base.visible{visibility:visible}.pole{position:absolute;bottom:10px;left:50%;width:10px;height:200px;background-color:#333;transform:translate(-50%);visibility:hidden}.pole.visible{visibility:visible}.beam{position:absolute;top:0;left:50%;width:100px;height:10px;background-color:#333;transform:translate(-50%);visibility:hidden}.beam.visible{visibility:visible}.rope{position:absolute;top:10px;left:50%;width:2px;height:40px;background-color:#333;transform:translate(-50%);visibility:hidden}.rope.visible{visibility:visible}.head{position:absolute;top:50px;left:50%;width:40px;height:40px;background-color:#f0a500;border-radius:50%;transform:translate(-50%);visibility:hidden}.head.visible{visibility:visible}.body{position:absolute;top:90px;left:50%;width:10px;height:70px;background-color:#f0a500;transform:translate(-50%);visibility:hidden}.body.visible{visibility:visible}.left-arm{position:absolute;top:100px;left:50%;width:50px;height:10px;background-color:#f0a500;transform:translate(-50%,-50%) rotate(-45deg);transform-origin:right;visibility:hidden}.left-arm.visible{visibility:visible}.right-arm{position:absolute;top:100px;left:50%;width:50px;height:10px;background-color:#f0a500;transform:translate(-50%,-50%) rotate(45deg);transform-origin:left;visibility:hidden}.right-arm.visible{visibility:visible}.left-leg{position:absolute;top:160px;left:50%;width:50px;height:10px;background-color:#f0a500;transform:translate(-50%,-50%) rotate(-45deg);transform-origin:right;visibility:hidden}.left-leg.visible{visibility:visible}.right-leg{position:absolute;top:160px;left:50%;width:50px;height:10px;background-color:#f0a500;transform:translate(-50%,-50%) rotate(45deg);transform-origin:left;visibility:hidden}.right-leg.visible{visibility:visible}@tailwind base;@tailwind components;@tailwind utilities;