*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.6;color:#333;background-color:#f5f5f5}#root{width:100%;min-height:100vh}button{font-family:inherit;border:none;outline:none}button:focus{outline:none}button{background:none;border:none;cursor:pointer}*{transition:all .3s ease}.app{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;padding:2rem}.container{text-align:center;max-width:800px;padding:2rem;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh}h1{color:#fff;font-size:3rem;margin-bottom:1rem;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.instructions{color:#ffffffe6;font-size:1.2rem;margin-bottom:3rem;line-height:1.6}.eight-ball-container{margin:2rem 0}.eight-ball{width:300px;height:300px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#333,#000 70%);border:12px solid #222;box-shadow:0 15px 45px #00000080,inset 0 8px 20px #ffffff1a;cursor:pointer;transition:all .3s ease;position:relative;display:flex;align-items:center;justify-content:center}.eight-ball:hover{transform:scale(1.05);box-shadow:0 15px 40px #0009,inset 0 5px 15px #ffffff1a}.eight-ball:active{transform:scale(.95)}.eight-ball:disabled{cursor:not-allowed;opacity:.7}.eight-ball-number{color:#fff;font-size:6rem;font-weight:700;text-shadow:3px 3px 6px rgba(0,0,0,.8);-webkit-user-select:none;user-select:none}.shaking{animation:shake .5s ease-in-out infinite}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-5px)}20%,40%,60%,80%{transform:translate(5px)}}.answer-container{margin-top:2rem;padding:1.5rem;background:#fffffff2;border-radius:15px;box-shadow:0 10px 30px #0003;animation:fadeIn .5s ease-in}.answer{font-size:1.5rem;color:#333;font-weight:500;line-height:1.4}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.container{padding:1rem}h1{font-size:2.5rem}.eight-ball{width:200px;height:200px;border:8px solid #222}.eight-ball-number{font-size:4rem}.answer{font-size:1.3rem}}