*,:before,:after{box-sizing:border-box}body{padding:0;margin:0;font-family:sans-serif;background-color:transparent;--brown: #0a1628;--blue: #22d3ee;--dark-blue: #0f2847;--machine-color: #0c3a5e;--punk-pink: #06b6d4;--punk-yellow: #67e8f9;--punk-cyan: #22d3ee;--machine-width: 160px;--m: 2.3}.wrapper{display:flex;justify-content:center;align-items:center;height:100vh;min-height:600px;flex-direction:column;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation}.pix,.pix:before,.pix:after{width:calc(var(--w) * var(--m));height:calc(var(--h) * var(--m));image-rendering:pixelated;background-size:calc(var(--w) * var(--m)) calc(var(--h) * var(--m))}.pix:before,.pix:after{position:absolute;content:""}.claw-machine{display:flex;flex-direction:column;border:4px solid var(--brown);overflow:hidden;box-shadow:0 0 20px #22d3ee66,0 0 40px #10b98140;position:relative;background:linear-gradient(135deg,#0a1628,#0c3a5e,#064e3b,#0f2847);background-size:300% 300%;animation:machine-glow 6s ease infinite}.claw-machine:before{content:"★ GRAB ★";position:absolute;top:10px;left:50%;transform:translate(-50%);font-weight:700;font-size:28.8px;color:#ff1493;text-shadow:0 0 10px #ff1493,0 0 20px #ff69b4,0 0 40px #ff1493,2px 2px 0 #ff69b4;z-index:10}.claw-machine:after{content:""}.collection-box{--h: 32px;width:calc(var(--m) * var(--machine-width));margin:calc(var(--m) * var(--h) * -1 - 10px) 0 1px;display:flex;align-items:bottom;justify-content:start}.collection-box .toy-wrapper{position:relative;width:calc(100% / 6);display:flex;align-items:end;justify-content:center}.collection-box .toy-wrapper .toy:after{top:auto;bottom:0}.toy-wrapper.squeeze-in{width:0;animation:squeeze-in forwards .4s;animation-delay:1.4s}@keyframes squeeze-in{0%{width:0}to{width:calc(100% / 6)}}@keyframes show-toy-2{0%{opacity:0;transform:translateY(-100vh)}to{opacity:1;transform:translateY(0)}}.toy-wrapper .toy{opacity:0;transform:translateY(-100vh);animation:forwards show-toy-2 .8s;animation-delay:1s}.box{position:relative;background:linear-gradient(135deg,#1a3a4a,#1e4d5e,#1a5c6a);background-size:200% 200%;animation:gradient-shift 4s ease infinite;--w: var(--machine-width);--h: 180px}@keyframes gradient-shift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes machine-glow{0%{background-position:0% 0%}25%{background-position:100% 0%}50%{background-position:100% 100%}75%{background-position:0% 100%}to{background-position:0% 0%}}.box:before{background-color:#c4e8d8;top:calc(70px * var(--m));width:100%;height:calc(var(--m) * 8px);z-index:5}.box:after{background-color:var(--machine-color);top:calc(70px * var(--m));right:0;width:calc(var(--m) * 8px);height:calc(var(--m) * 170px);z-index:2}.machine-top,.machine-bottom{position:absolute;width:100%;--h: 70px;height:calc(var(--h) * var(--m))}.machine-top{top:0;display:flex;align-items:center;z-index:1}.machine-top:after{content:"";top:0;left:0;width:100%!important;height:100%!important;background:repeating-linear-gradient(45deg,#22d3ee4d,#22d3ee4d 8px,#10b98126 8px 16px);background-size:16px 16px;animation:stripe-move 1s linear infinite}@keyframes stripe-move{0%{background-position:0 0}to{background-position:16px 16px}}.machine-bottom{bottom:0;background-color:#d1fae5}.drop-zone{position:absolute;bottom:0;left:0;width:calc(var(--m) * 44px);height:calc(var(--m) * 24px);background-color:#0f2847;border-top:3px solid #22d3ee;border-right:3px solid #22d3ee;border-radius:0 8px 0 0;box-shadow:inset 0 0 12px #10b98166}.collection-point{position:absolute;bottom:0;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAMCAYAAABm+U3GAAAAAXNSR0IArs4c6QAAADBJREFUOE9jtJqy/T8DFcGxHE9GkHGM1DYYZCjIcJoYTDMXjxqMkrZGIw8eHEMvKADnSiE1EAXSagAAAABJRU5ErkJggg==);--w: 44px;--h: 24px;z-index:0}.rail{top:0;left:0;transition:.3s;border:solid var(--blue)}.rail.hori{--h: 5px;width:100%;background-color:#c4e8d8;border-width:2px 0}.rail.vert{position:absolute;--h: 70px;--w: 5px;background-color:#c4e8d8;border-width:0 2px}.arm-joint{position:absolute;top:0;left:0;--w: 5px;--h: 5px;transition:.3s;z-index:-1}.arm-joint:after{position:absolute;border:solid var(--blue) 2px;background-color:#c4e8d8;--w: 10px;--h: 10px;top:calc(var(--m) * var(--h) * -.25);left:calc(var(--m) * var(--w) * -.25)}.arm:after{position:absolute;--w: 13px;--h: 7px;bottom:calc(var(--m) * -1px);left:calc(var(--m) * -3px);background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAHCAYAAADTcMcaAAAAAXNSR0IArs4c6QAAAElJREFUKFNjZGBgYDBeeus/iCYGnI1WY2QEaTgTpUqMerAak2W3GVA0RWgKMKy4/gHDAGRx6miCWQEyGQbQbcawiRiPgTWRE3oA5mIzfZr3jVYAAAAASUVORK5CYII=)}.arm.missed:after{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAHCAYAAADTcMcaAAAAAXNSR0IArs4c6QAAAENJREFUKFNjZGBgYDBeeus/iCYGnI1WY2QEaTgTpUqMerAak2W3GSjTFKEpADZpxfUPGLYiy+G0CaYImyHkO4+c0AMAWBctfQPWfVQAAAAASUVORK5CYII=)}.control{position:relative;--h: 60px;width:100%;text-align:right;background-color:var(--dark-blue)}.cover{position:absolute;background-color:var(--machine-color);--top-size: calc(var(--m) * 20px);--bottom-size: calc(var(--m) * 10px);z-index:4}.top{top:0;width:100%;height:calc(var(--m) * 16px)}.collection-arrow{position:absolute;left:calc(var(--m) * 21px);top:calc(var(--m) * 9px);--w: 8px;--h: 4px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAYAAACzzX7wAAAAAXNSR0IArs4c6QAAAClJREFUGFdjDDn86T8DHsAIksOlaI0tHyNYATZFIEmQOFwBsiKYJEgMAPTvDw1xBcM+AAAAAElFTkSuQmCC);filter:sepia(1) brightness(.5)}.bottom{bottom:0;width:100%;height:calc(var(--m) * 8px);background-color:var(--brown)}.left{bottom:0;left:0;height:calc(var(--m) * 170px);width:calc(var(--m) * 8px)}.right{top:0;right:0;height:100%;width:calc(var(--m) * 116px)}.instruction{position:absolute;--w: 51px;--h: 12px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAMCAYAAADPjYVSAAAAAXNSR0IArs4c6QAAAPRJREFUSEvdVkESwkAIs0d9hv9/k8/Qow4d6aSZBKjjRfdSdltYIBC63B735+m9rufLkvuQ4/joHnVCRjsp531hG89w7+S0r3xdnc8X1RONOGfynL/lO1A/A8akOZ/4Xk7GhoQy6pBx2fwkmKOJZMQQ/Q0ZFzVHP0VIlUlVVlw+GKR6p/wYBTNFzSGjLu6SMk3iDhl04NfllbH+ZZUEUDWbqn9XjkgkWBaqlJh0eHQopkwwLDU7eu0a1fWHs9eRQqeHNF4OSYfMNFvVkHSzZ0oMqP9VZBytcy9O6JptTZGJ72SZqdrvJjT3Au6VgxVds+70t+cFkvdjifIP/BkAAAAASUVORK5CYII=);top:calc(var(--m) * 34px);right:calc(var(--m) * 6px)}.arm{position:absolute;--w: 7px;--h: 28px;background-color:#d1fae5;box-shadow:0 0 0 2px var(--blue);transition:.3s;margin-top:calc(var(--m) * -1px);margin-left:calc(var(--m) * -1px)}.claws{position:absolute;--w: 3px;--h: 10px;bottom:calc(var(--m) * -5px);left:calc(var(--m) * 2.5px)}.claws:before,.claws:after{top:0;--w: 10px;--h: 16px;transition:.2s}.claws:before{left:calc(var(--m) * -10px);background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAQCAYAAAAvf+5AAAAAAXNSR0IArs4c6QAAAGRJREFUKFNjZMADwjX4/6+88ZERpARMYAMgRSuuf2CI0BRgACnGqhCmCGYASDGGQmyKMEzEpQjFjfgUwRUSUgRWSIwi0hSCVBNjKjx4CClGCUeiggcWC0QFOD7FlCUKZJNhyQwAi8VlK14hrsQAAAAASUVORK5CYII=);--close-angle: 45deg;transform-origin:top right}.claws:after{left:calc(var(--m) * 2.5px);background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAQCAYAAAAvf+5AAAAAAXNSR0IArs4c6QAAAFxJREFUKFNjZICCcA3+/ytvfGSE8dFpsARI0YrrHxgiNAUYcClmhCmCmYBLMYqJ+BTD3UTIZBTH41OM4UtcirEGBzbF5CskymqiPENU8BBSBIoI8qIQb6IgNpkBAEPjZSuK8jVuAAAAAElFTkSuQmCC);--close-angle: -45deg;transform-origin:top left}.arm.open .claws:before,.arm.open .claws:after{rotate:var(--close-angle)}.arm-joint:before{--w: 20px;--h: 16px;transform:scale(var(--scale));margin-left:-15px;margin-top:var(--shadow-pos);background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAAAXNSR0IArs4c6QAAAF5JREFUOE9jZMABrKZs/49LDiR+LMeTEZs8iiAhQ3BZgGw43EByDYNZAjMUbCClhiEbSn0DqeU6mCsZRw3El5aJkqN+GA7+dAgLGEqTD0rWo9RQrIUDehQScjGu4gsAxKQ3Ke4v44gAAAAASUVORK5CYII=);z-index:-1;opacity:.5}button{position:relative;z-index:5;--w: 24px;--h: 24px;margin:12px 12px 0 0;border:0;background-color:transparent;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAFRJREFUKFNjZICC/////4exsdGMjIyMIHEwQUgxzACQJkZsikOPfAarWW3Di2EZhgaYYphKdE0oGtAVY9ME14BLMbomypwEMo0kP9BGA8kRR2rSAACHREftd0fKPgAAAABJRU5ErkJggg==);filter:sepia(1) brightness(.4);pointer-events:none;cursor:pointer}.hori-btn{transform:rotate(90deg)}.active{animation:pulse infinite 1s;pointer-events:all}@keyframes pulse{0%,to{filter:sepia(0)}50%{filter:sepia(1)}}.toy.display{transform:scale(3);animation:forwards show-toy-1 .8s;animation-delay:1s}.toy{position:absolute;transition:transform 1s,left .3s,top .3s;--m: 2;--w: 20px;--h: 27px;transform:rotate(var(--rotate-angle));pointer-events:none}.toy:after{content:"";position:absolute;width:var(--sw);height:var(--sh);top:var(--st);left:var(--sl);background-image:var(--s-normal);background-size:contain;background-repeat:no-repeat}.toy.grabbed:after{background-image:var(--s-grabbed)}.toy-wrapper .toy:after{background-image:var(--s-collected)}.toy.selected{pointer-events:all}@keyframes show-toy-1{0%{opacity:1;transform:scale(3) translateY(0)}30%{opacity:0}to{opacity:0;transform:scale(1) translateY(-100vh)}}.control .collection-point{filter:brightness(.8);bottom:calc(var(--m) * 8px)}.sign{position:absolute;color:var(--brown);bottom:10px;right:10px;font-size:10px}a{color:var(--brown);text-decoration:none}a:hover{text-decoration:underline}.bandaid{position:absolute;z-index:6;right:calc(var(--m) * 38px);top:calc(var(--m) * 46px);width:70px;height:26px;background:#f5d6b8;border:2px solid #d4a574;border-radius:14px;transform:rotate(-25deg);box-shadow:1px 1px 3px #0000004d}.bandaid:before{content:"";position:absolute;top:3px;left:50%;transform:translate(-50%);width:22px;height:18px;background:#e8c4a0;border-radius:3px}.bandaid:after{content:"";position:absolute;top:8px;left:50%;transform:translate(-50%);width:12px;height:8px;background:repeating-linear-gradient(90deg,#d4a574,#d4a574 2px,transparent 2px,transparent 4px);opacity:.6}.smiley{position:absolute;right:calc(var(--m) * 14px);top:calc(var(--m) * 48px);font-size:26px;z-index:6;transform:rotate(-15deg);filter:drop-shadow(0 0 4px rgba(255,255,255,.5))}.loot-tag{position:absolute;z-index:6;left:40%;bottom:calc(var(--m) * 28px);transform:translate(-50%) rotate(-12deg);font-family:Courier New,monospace;font-size:19px;font-weight:700;color:#39ff14;text-shadow:0 0 8px rgba(57,255,20,.5);letter-spacing:3px}@keyframes loot-gradient{0%{background-position:0% 50%}to{background-position:300% 50%}}.bandaid.bandaid-x{transform:rotate(55deg)}.loot-arrow{position:absolute;z-index:6;left:38%;bottom:calc(var(--m) * 14px);transform:translate(-50%) rotate(55deg);font-size:27.5px;background:linear-gradient(90deg,#39ff14,#22d3ee,#ff1493,#39ff14);background-size:300% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:loot-gradient 3s linear infinite}.loading-bubble{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:8;display:flex;align-items:center;gap:8px;padding:8px 16px;background:#0a1628d9;border:2px solid #22d3ee;border-radius:8px;font-family:Courier New,monospace;font-size:12px;color:#67e8f9;text-shadow:0 0 6px rgba(34,211,238,.6);box-shadow:0 0 12px #22d3ee4d;white-space:nowrap;image-rendering:pixelated}.loading-dots:before{content:"■ ■ ■";font-size:10px;animation:dot-blink 1.2s steps(3) infinite}@keyframes dot-blink{0%{opacity:.2}50%{opacity:1}to{opacity:.2}}