*{box-sizing:border-box}
:root{--pink:#f7a9bd;--cream:#fff8f1;--brown:#6d4b46;--dark:#30242a;--yellow:#ffd66b}
body{margin:0;background:#f7e7e4;color:var(--dark);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh}
.game{min-height:100vh;max-width:620px;margin:auto;background:linear-gradient(#fffaf6,#f8e6e5);padding-bottom:24px}
header{height:66px;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #f0d7d4}
.brand{font-weight:800;letter-spacing:.5px;font-size:20px}.score{background:#fff;border:2px solid #f0d1d3;border-radius:999px;padding:7px 13px;font-weight:800}
main{padding:22px 18px}.intro{text-align:center}.eyebrow{font-size:11px;letter-spacing:3px;color:#b56f7f;font-weight:800}.intro h1{font-size:42px;line-height:.92;margin:10px 0 8px;letter-spacing:-2px}.intro h1 span{color:#d77f98}.intro p{margin:0 0 18px;color:#8b7074}
.machine{background:#fff;border:3px solid #4b3539;border-radius:24px;padding:12px;box-shadow:0 12px 0 #e4c4c3,0 20px 35px #d9b6b650}
.machine-top{height:35px;background:#4b3539;border-radius:15px 15px 9px 9px;color:#ffe7b7;display:flex;align-items:center;justify-content:center;gap:6px}.machine-title{font-size:10px;letter-spacing:2px;font-weight:900;margin:0 8px}.light{width:7px;height:7px;background:#ffd66b;border-radius:50%;box-shadow:0 0 7px #ffd66b}
.playfield{height:390px;margin-top:8px;border-radius:14px;background:linear-gradient(#f5c9d4,#f8dfe0);position:relative;overflow:hidden;border:2px solid #b8838d}
.glass-shine{position:absolute;inset:0;background:linear-gradient(105deg,#fff8 0 5%,transparent 5% 60%,#fff4 60% 63%,transparent 63%);pointer-events:none;z-index:5}
.floor{position:absolute;bottom:-18px;left:-5%;width:110%;height:90px;background:#d99eae;border-radius:50% 50% 0 0;box-shadow:inset 0 12px #c9899b}
.candy{position:absolute;font-size:52px;filter:drop-shadow(0 6px 4px #85545a45);z-index:2;cursor:default;transition:transform .15s}
.c1{left:10%;bottom:44px}.c2{left:28%;bottom:52px}.c3{left:47%;bottom:37px}.c4{left:67%;bottom:55px}.c5{left:82%;bottom:38px}.c6{left:20%;bottom:5px}.c7{left:57%;bottom:5px}
.claw{position:absolute;top:0;left:50%;width:100px;height:190px;transform:translateX(-50%);z-index:8;transition:left .18s ease}
.claw-rope{width:7px;height:115px;background:#6b5053;margin:auto;border-radius:0 0 8px 8px}
.claw-head{width:38px;height:28px;background:#f3d7d7;border:3px solid #4b3539;border-radius:10px;margin:-2px auto 0;box-shadow:inset 0 -5px #d6adb5}
.finger{position:absolute;top:133px;width:12px;height:48px;border:3px solid #4b3539;border-top:0;border-radius:0 0 14px 14px;background:#f3d7d7;transform-origin:top}
.f1{left:27px;transform:rotate(28deg)}.f2{left:44px;height:54px}.f3{left:61px;transform:rotate(-28deg)}
.claw.grabbing .f1{transform:rotate(10deg)}.claw.grabbing .f3{transform:rotate(-10deg)}
.machine-controls{display:grid;grid-template-columns:64px 1fr 64px;gap:10px;padding:12px 4px 2px}.machine-controls button{border:0;border-radius:16px;background:#f3e2df;color:#68454c;font-weight:900;font-size:22px;height:55px;box-shadow:inset 0 -4px #ddc2bf;touch-action:manipulation}.machine-controls #grab{background:#e88fa6;color:white;font-size:15px;letter-spacing:1px;box-shadow:inset 0 -4px #c8758c}
.instructions{text-align:center;padding:24px 8px 0}.tip{font-size:13px;color:#755a60}.progress{height:8px;background:#ecd5d4;border-radius:99px;overflow:hidden;margin:12px 15px 7px}.progress span{display:block;width:0;height:100%;background:#e58da5;border-radius:99px;transition:width .5s}.instructions small{color:#a18086}
.modal{display:none;position:fixed;inset:0;background:#4a333988;align-items:center;justify-content:center;padding:22px;z-index:30}.modal.show{display:flex}.modal-card{width:min(390px,100%);background:#fff9f6;border-radius:28px;padding:28px 22px;text-align:center;box-shadow:0 20px 70px #3b242450;animation:pop .25s ease}.sparkles{color:#d8879d;font-size:25px}.won-candy{font-size:72px;margin:5px}.modal-label{font-size:12px;letter-spacing:3px;font-weight:900;color:#b86f80}.modal-card p{font-size:18px;line-height:1.45;color:#634b50}.modal-card button{width:100%;height:50px;border:0;border-radius:15px;background:#e58da5;color:#fff;font-weight:900}.modal-card .close{background:transparent;color:#9a7b80;font-size:13px;height:40px}
footer{text-align:center;font-size:11px;color:#ad8a90;letter-spacing:.5px;padding:18px}
@keyframes pop{from{transform:scale(.88);opacity:0}to{transform:scale(1);opacity:1}}
@media(max-width:430px){.intro h1{font-size:38px}.playfield{height:350px}.candy{font-size:45px}}