/* A machine with a shared coordinate space: sweets, hand and buckets line up. */
.board[data-kind=pumpkin]{display:block;padding:0;overflow:hidden;background:#39214c;border-radius:24px;min-height:0}
.claw-factory{height:100%;width:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:6px;padding:10px 16px;background:linear-gradient(#27133b44,#27133b44),url('art/claw-factory-v1.webp') center/cover;color:#fff1d6;isolation:isolate}
.claw-clue{margin:0 auto;padding:9px 22px;background:#fff5df;border:3px solid #edb65c;border-radius:22px;color:#39274e;font-weight:900;font-size:clamp(17px,2vw,28px);box-shadow:0 4px 0 #7d4529;text-align:center}
.claw-clue[data-colour=purple]{color:#8741bf}.claw-clue[data-colour=green]{color:#417f27}.claw-clue[data-colour=orange]{color:#aa5413}
.claw-world{position:relative;min-height:0;overflow:hidden;container-type:size;background:linear-gradient(#27133b00 25%,#27133b55);border-radius:18px}
.claw-rail{position:absolute;left:5%;right:5%;top:3%;height:13px;background:linear-gradient(#f3c981,#8f5f3c);border:3px solid #4e334a;border-radius:15px;box-shadow:0 4px 4px #10081d88;z-index:8}
.claw-slider{position:absolute;width:100%;left:0;top:-10px;height:38px;margin:0;cursor:ew-resize;opacity:.01;touch-action:none}
.claw-rail:focus-within{outline:4px solid #89deff;outline-offset:5px}
.claw-rig{position:absolute;top:0;width:0;height:100%;z-index:7;pointer-events:none;filter:drop-shadow(0 4px 3px #130b24aa)}
.claw-trolley{position:absolute;top:0;width:clamp(45px,7cqh,75px);height:clamp(30px,7cqh,55px);transform:translateX(-50%);border:4px solid #ffce72;border-radius:14px;background:linear-gradient(#a67ce0,#543770);text-align:center;font-size:clamp(20px,4cqh,34px);color:#fff4d6}
.claw-rope{position:absolute;top:5%;left:-4px;width:8px;background:repeating-linear-gradient(0deg,#a3b4ca 0px,#e1e4e1 6px,#697286 8px);border:1px solid #4c3d60}
.claw-hand{position:absolute;left:0;width:clamp(58px,11cqh,110px);height:clamp(58px,11cqh,110px);transform:translate(-50%,-25%);z-index:2}.claw-hand svg{width:100%;height:100%;overflow:visible}.claw-hand .finger{transform-box:fill-box;transform-origin:50% 0;transition:transform .2s}.gripping .finger.left{transform:rotate(-22deg)}.gripping .finger.right{transform:rotate(22deg)}
.claw-held{position:absolute;left:0;width:clamp(45px,8cqh,75px);aspect-ratio:1.6;transform:translateX(-50%)}
.claw-belt{position:absolute;top:58%;left:0;right:0;height:12%;min-height:26px;border:6px solid #ab73ce;border-radius:24px;background:repeating-linear-gradient(90deg,#302d44 0px,#302d44 22px,#555069 24px,#302d44 28px);box-shadow:0 6px 0 #372447,0 10px 10px #180f30;animation:beltRoll 3.1s linear infinite}.claw-factory:has(.claw-action:disabled) .claw-belt{animation-play-state:paused}@keyframes beltRoll{to{background-position:280px 0}}
.factory-sweet{--sweet:#b769ff;display:block;position:relative;width:100%;height:100%;filter:drop-shadow(0 3px 2px #160b4088)}.factory-sweet i{position:absolute;left:23%;top:10%;width:54%;height:80%;border:2px solid #fff7;border-radius:38%;background:repeating-linear-gradient(60deg,transparent 0 13px,#fff3 14px 23px),radial-gradient(ellipse at 30% 15%,#ffffffaa,transparent 60%),var(--sweet);box-shadow:inset -4px -5px 4px #3b126955}.factory-sweet:before,.factory-sweet:after{content:'';position:absolute;top:23%;width:29%;height:55%;background:linear-gradient(30deg,#fff5,transparent),var(--sweet);clip-path:polygon(0 0,100% 30%,100% 70%,0 100%,12% 50%);border-radius:6px}.factory-sweet:after{right:0;transform:scaleX(-1)}
.belt-sweet{position:absolute;top:49%;width:clamp(45px,8cqh,75px);height:clamp(30px,5cqh,48px);transform:translateX(-50%);z-index:4}
.claw-bin{position:absolute;top:76%;width:19%;height:23%;transform:translateX(-50%);text-align:center;filter:drop-shadow(0 5px 3px #150b22);transition:filter .2s}.claw-bin-art{position:absolute;inset:-8% 0 10%}.claw-bin-art svg{height:100%;width:100%}.claw-bin b{position:absolute;top:50%;left:0;right:0;color:#fff;background:#321942b8;border-radius:12px;font-size:clamp(12px,2.8cqh,19px)}.claw-bin-count{position:absolute;top:84%;left:15%;right:15%;font-size:clamp(12px,2.7cqh,20px);color:#fff5d9;font-weight:900;background:#392149;border-radius:12px}.target-bin{filter:drop-shadow(0 0 8px #ffcc4e)}.under-claw{filter:drop-shadow(0 0 16px #fefeb5);outline:3px dashed #fff3a0;border-radius:30%}.full-bin:after{content:'✓';position:absolute;right:0;top:0;color:#fff6b0;font-size:32px}
.claw-controls{display:flex;justify-content:center;align-items:center;gap:clamp(12px,3vw,38px);z-index:10}.claw-controls button{min-height:54px;padding:10px 28px;box-shadow:0 5px #5f3b7c;border:3px solid #e1b8ff;background:linear-gradient(#a67fe4,#764ca8);color:white;font-size:26px;border-radius:20px;touch-action:none}.claw-controls .claw-action{background:linear-gradient(#ffe286,#ffbe3a);border-color:#fff3ba;box-shadow:0 5px #a16720;color:#452850;font:clamp(23px,3vw,36px) Froople,sans-serif;min-width:155px}.claw-controls button:disabled{opacity:.55}.claw-hint{margin:0;text-align:center;font-size:clamp(11px,1.2vw,16px);font-weight:800;min-height:20px;color:#fff4d4;text-shadow:0 1px #372149}
.factory-complete{box-shadow:inset 0 0 60px #ffd254aa}.factory-complete .claw-bin{animation:starPop .7s ease-out 2}
.claw-bin{top:71%;height:28%;width:21%}.claw-bin-art{inset:-10% 0 0}.claw-bin b{top:59%;left:15%;right:15%;font-size:clamp(13px,3cqh,21px)}.claw-bin-count{top:87%;font-size:clamp(12px,2.7cqh,19px)}.claw-hand{width:clamp(78px,12cqh,115px);height:clamp(78px,12cqh,115px)}.belt-sweet{width:clamp(58px,10cqh,90px);height:clamp(38px,6cqh,57px)}.claw-held{width:clamp(58px,10cqh,90px)}
.claw-factory:has(.claw-action:disabled) .claw-belt{animation-play-state:running}.claw-factory.machine-paused .claw-belt{animation-play-state:paused!important}
.claw-hand{width:clamp(40px,12cqh,100px);height:clamp(40px,12cqh,100px);transform:translate(-50%,-100%)}.claw-held{transform:translate(-50%,-20%)}.belt-sweet{top:54%}
.claw-confetti{position:absolute;top:-15%;width:55px;height:36px;z-index:10;animation:clawRain 1.8s ease-in both;pointer-events:none}@keyframes clawRain{to{top:110%;transform:rotate(190deg)}}@media(prefers-reduced-motion:reduce){.claw-confetti{display:none}.factory-complete .claw-bin{animation:none}.claw-belt{animation:none}}
.claw-clue{display:flex;flex-direction:column;align-items:center;gap:4px;padding:7px 18px}.claw-order-label{font-size:clamp(10px,1vw,14px);letter-spacing:.12em;color:#725085}.claw-mixed-order{display:flex;align-items:center;justify-content:center;gap:10px}.claw-order-chip{display:flex;align-items:center;gap:8px;padding:4px 10px;border:2px solid #d3a8e0;border-radius:16px;background:#f2e4ff;color:#7c36af}.claw-order-chip[data-colour=orange]{background:#ffecd2;color:#a34e08;border-color:#f3be76}.claw-order-chip[data-colour=green]{background:#e7f2d8;color:#487b24;border-color:#a5ca7c}.claw-order-chip .factory-sweet{flex:0 0 43px;width:43px;height:28px}.claw-order-chip b{font-size:clamp(14px,1.7vw,23px);white-space:nowrap}.claw-order-chip.done{opacity:.65}.claw-order-chip.done b:after{content:' ✓'}.claw-order-plus{font-size:24px;color:#76508d}.claw-bin.not-needed{opacity:.55}
@media(max-height:760px){.claw-clue{padding:4px 12px;gap:2px}.claw-order-chip{padding:2px 7px;gap:4px}.claw-order-chip b{font-size:15px}.claw-order-chip .factory-sweet{width:32px;flex-basis:32px;height:22px}.claw-order-label{font-size:10px}}
@media(max-width:700px){.claw-clue{padding:5px 7px}.claw-mixed-order{gap:5px}.claw-order-chip{gap:4px;padding:3px 5px;border-radius:12px}.claw-order-chip b{font-size:12px}.claw-order-chip .factory-sweet{width:26px;flex-basis:26px;height:18px}.claw-order-plus{font-size:18px}}
@media(max-height:760px){.claw-factory{padding:6px 10px;gap:3px}.claw-clue{font-size:17px;padding:5px 16px}.claw-controls button{min-height:44px;font-size:22px;padding:5px 22px}.claw-controls .claw-action{font-size:26px}.claw-hint{font-size:11px;min-height:14px}}
@media(max-width:700px){.claw-factory{padding:6px;gap:5px}.claw-clue{font-size:16px;padding:7px 10px}.claw-bin{width:25%}.claw-controls{gap:15px}.claw-controls button{padding:6px 15px}.claw-controls .claw-action{min-width:120px}.claw-hint{font-size:11px}.claw-hand{width:62px;height:62px}}
/* A complete skeletal hand with independently curling finger bones. */
.claw-hand.skeleton-hand{width:clamp(30px,14.25cqh,112.5px);height:clamp(40px,19cqh,150px);filter:drop-shadow(0 0 5px #c0f1ba88)}
.skeleton-hand .bone-finger{transform-box:fill-box;transform-origin:50% 0;transition:transform .25s ease-out}
.gripping .skeleton-hand .thumb{transform:translate(9px,1px) rotate(-18deg) scaleY(.77)}
.gripping .skeleton-hand .index{transform:translate(7px,3px) rotate(-12deg) scaleY(.74)}
.gripping .skeleton-hand .middle{transform:translate(0,4px) scaleY(.73)}
.gripping .skeleton-hand .ring{transform:translate(-5px,3px) rotate(10deg) scaleY(.77)}
.gripping .skeleton-hand .little{transform:translate(-9px,2px) rotate(18deg) scaleY(.8)}
@media(prefers-reduced-motion:reduce){.skeleton-hand .bone-finger{transition:none}}
.skeleton-hand+.claw-held{transform:translate(-50%,-65%)}

.claw-plus-one{position:absolute;top:69%;transform:translate(-50%,-50%);z-index:12;color:#fff0a0;font:clamp(32px,8cqh,68px)/1 Froople,sans-serif;text-shadow:0 3px #764018,-2px 0 #764018,2px 0 #764018;pointer-events:none;animation:clawPlusOne .95s ease-out both}
@keyframes clawPlusOne{0%{opacity:0;translate:0 12px;scale:.7}18%,55%{opacity:1;scale:1.12}100%{opacity:0;translate:0 -55px;scale:1}}
@media(prefers-reduced-motion:reduce){.claw-plus-one{animation:clawPlusOneStill .8s linear both}@keyframes clawPlusOneStill{0%,80%{opacity:1}100%{opacity:0}}}