*{box-sizing:border-box}body{margin:0;background:#edf5f9;color:#173b50;font-family:Arial,'Malgun Gothic',sans-serif}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:3px solid #247ceb;outline-offset:3px}button:disabled{cursor:default;opacity:.5}[hidden]{display:none!important}.claw-app{position:relative;max-width:1100px;margin:18px auto;border-radius:24px;overflow:hidden;background:white;box-shadow:0 12px 35px #23435420}.game-header{height:80px;padding:16px 24px;background:#fff;display:flex;align-items:center;gap:12px}.game-header h1{font-size:23px;margin:0 0 5px}.game-header p{font-size:14px;margin:0;color:#557185}.word-game-exit{position:absolute;right:20px;top:20px;z-index:100;border:0;border-radius:24px;background:#183f50;color:white;padding:12px 17px;font-size:14px;box-shadow:0 4px 0 #0c2734}.word-game-exit span{margin-right:6px}.plush-stage{position:relative;aspect-ratio:1.78;min-height:450px;max-height:650px;overflow:hidden;background:#d9def5 url('./assets/plush-claw-20260927/machine.png') center/100% 100% no-repeat;isolation:isolate}.word-prompt{position:absolute;z-index:40;top:14px;left:50%;transform:translateX(-50%);max-width:70%;min-width:230px;padding:9px 24px;background:#143c50;color:white;box-shadow:0 3px 0 #72c5cf;border-radius:15px;text-align:center;pointer-events:none}.word-prompt small{display:block;font-size:10px;letter-spacing:2px;color:#a5e8eb;margin-bottom:2px}.word-prompt strong{font-size:25px}.rail{position:absolute;left:8%;right:8%;top:17%;height:7px;border-radius:10px;background:linear-gradient(#f8ffff,#558c9a,#c5fbff);box-shadow:0 3px 4px #44677844;z-index:31}.carriage{position:absolute;width:48px;height:22px;top:calc(17% - 8px);left:50%;transform:translateX(-50%);border-radius:7px;background:linear-gradient(#f3ffff,#68bbce,#247288);border:2px solid white;z-index:33}.rope{position:absolute;left:50%;top:18%;width:4px;height:40px;transform:translateX(-50%);background:repeating-linear-gradient(#243941 0 3px,#b5d2d9 3px 6px);z-index:30}.claw-hand{position:absolute;left:50%;top:26%;width:clamp(65px,8vw,100px);aspect-ratio:1;transform:translate(-50%,-50%);z-index:35;pointer-events:none}.claw-hand img{width:100%;height:100%;object-fit:contain}.aim{position:absolute;width:70px;height:23px;border:2px dashed #11738c;border-radius:50%;left:50%;top:66%;transform:translate(-50%,-50%);z-index:2;pointer-events:none}.plush-toy{position:absolute;display:block;left:50%;top:65%;width:17%;aspect-ratio:1;padding:0;border:0;background:transparent;transform:translate(-50%,-50%) rotate(var(--tilt,0deg));filter:drop-shadow(0 7px 4px #4352783d);transition:filter .18s;isolation:isolate}.plush-toy img.toy-art{width:100%;height:100%;display:block;pointer-events:none}.plush-picture{position:absolute;left:29%;top:49%;width:42%;height:36%;border-radius:50%;background:#fff;overflow:hidden;display:flex;align-items:center;justify-content:center;pointer-events:none}.plush-picture img{width:94%;height:94%;object-fit:contain}.plush-toy[data-type=robot] .plush-picture{top:48%;border-radius:22%}.plush-toy.chosen{filter:drop-shadow(0 0 5px #faffff) drop-shadow(0 0 6px #00b4d1)}.plush-toy.chosen:after{content:'';position:absolute;left:36%;bottom:-5%;width:28%;height:5px;background:#00b7b8;border-radius:5px}.plush-toy.answer{filter:drop-shadow(0 0 10px #19ecdf)}.plush-toy.carried{pointer-events:none;z-index:34!important}.plush-toy.decor{pointer-events:none;opacity:.7}.chute-label{position:absolute;right:4%;bottom:1.5%;color:#fff;background:#154455;padding:4px 13px;border-radius:10px;font-size:12px;z-index:40}.plush-stage.delivering .chute-label{box-shadow:0 0 18px #4cffe6}.machine-status{position:absolute;left:12px;bottom:12px;background:#193f50df;color:white;border-radius:12px;padding:8px 12px;font-size:14px;max-width:64%;z-index:38;pointer-events:none}.overlay{position:absolute;inset:0;background:#102d4594;backdrop-filter:blur(5px);z-index:70;display:flex;align-items:center;justify-content:center;text-align:center;padding:18px}.overlay-card{background:#f6fcff;border-radius:24px;box-shadow:0 14px 0 #16475940;max-width:470px;padding:30px;color:#1d4356}.overlay-card h2{margin:0 0 12px;font-size:25px}.overlay-card p{line-height:1.7;margin:0 0 20px}.button3d{border:2px solid #c6f4ff;background:linear-gradient(#54a5ed,#195cb3 85%);color:#fff;border-radius:17px;padding:12px 22px;box-shadow:inset 0 2px 2px #ffffff88,0 5px 0 #164765,0 8px 8px #122c4b33;font-weight:bold;min-height:49px}.button3d:active:not(:disabled){transform:translateY(3px);box-shadow:inset 0 2px 4px #17365088,0 2px 0 #164765}.button3d.primary{background:linear-gradient(#ff99ad,#c52961);min-width:180px;border-color:#ffd8e3;box-shadow:inset 0 2px 2px #fff9,0 5px 0 #742643,0 8px 8px #122c4b33}.controls{padding:15px 16px 19px;background:linear-gradient(#f3fcff,#cbdfe9);border-top:5px solid #9cbcc9;border-bottom:8px solid #688c9d}.actions,.tools,.control-meta{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}.actions{margin-bottom:16px}.control-meta{margin-bottom:13px;font-size:13px}.rows,.speeds{display:flex;background:#b5cbd7;border-radius:11px;padding:3px;gap:3px}.rows button,.speeds button{border:0;border-radius:8px;padding:8px 11px;background:#ecf6fc;color:#244459}.rows button[aria-pressed=true],.speeds button[aria-pressed=true]{background:#226bc5;color:white}.tools button{border:1px solid #abc7d5;border-radius:12px;padding:9px 15px;background:#f6fcff;color:#244659;box-shadow:0 3px 0 #a6bcc9}.collection{display:flex;align-items:center;gap:10px;padding:10px 16px;min-height:80px;background:#fff}.collection-title{font-size:13px;white-space:nowrap;font-weight:bold}.shelf{display:flex;align-items:center;gap:7px;overflow-x:auto;flex:1;min-height:60px}.shelf p{font-size:13px;color:#67818e}.collected{width:62px;min-width:62px;aspect-ratio:1;border:0;background:#f1f7fc;border-radius:12px;padding:2px;position:relative}.collected img{width:100%;height:100%;object-fit:contain}.collected .plush-picture{width:42%;height:36%;left:29%;top:49%}.learning-summary strong{display:block;font-size:18px;margin:12px}.learning-summary p{font-size:13px}.review-words{max-height:140px;overflow:auto;display:flex;gap:5px;justify-content:center;flex-wrap:wrap;margin-bottom:15px}.review-words button{background:#edf4fc;border:1px solid #b7d2df;border-radius:8px;padding:7px;font-size:12px}.paused-layer{z-index:90;color:white;font-size:28px;font-weight:bold}.help{font-size:12px;text-align:center;padding:8px;margin:0;background:#f6fafc;color:#627e8d}#fw-annotation-panel-toggle{display:none!important}.receiving-toy{z-index:39!important}
@media(max-width:650px){.claw-app{margin:0;border-radius:0}.game-header{height:75px;padding:12px}.game-header h1{font-size:20px}.game-header p{font-size:11px;max-width:65%}.word-game-exit{right:10px;top:16px;padding:10px;font-size:12px}.plush-stage{aspect-ratio:auto;height:480px;min-height:480px;background-size:100% 100%}.word-prompt{min-width:180px;padding:8px;top:12px}.word-prompt strong{font-size:21px}.plush-toy{width:24%!important}.plush-picture{left:24%;width:52%;top:48%;height:39%}.claw-hand{width:70px}.button3d{font-size:15px;padding:11px 14px}.button3d.primary{min-width:135px}.actions{gap:6px}.controls{padding:12px 8px 16px}.control-meta{gap:7px}.machine-status{font-size:11px;max-width:70%;left:6px;bottom:8px;padding:6px}.chute-label{font-size:10px;right:2%;bottom:2px}.rows button,.speeds button{padding:7px;font-size:12px}.collection{padding:8px}.collection-title{font-size:12px}.overlay-card{padding:22px 16px}.overlay-card h2{font-size:22px}.overlay-card p{font-size:14px}.tools{gap:6px}.tools button{font-size:13px;padding:8px 11px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.plush-toy{transition:none}}
.rows button.selected,.speeds button.selected{background:linear-gradient(#4a9eee,#205cb6);color:white;box-shadow:inset 0 1px 3px #16496a55}.plush-stage[data-phase="ready"] .plush-toy:hover{filter:drop-shadow(0 0 7px #5ef3ff)}
.plush-toy{transform:translate(-50%,-50%) rotate(var(--tilt,0deg)) scale(var(--scale,1))}.receiving-toy{pointer-events:none}.chute-label{pointer-events:none}
.word-prompt strong{word-break:keep-all}@media(max-width:650px){.word-prompt{width:76%;max-width:76%;min-width:0}.word-prompt strong{font-size:19px}.machine-status{max-width:73%}}

/* Depth controls: the same row drives the rail, claw, shadow and hit test. */
.direction-pad{display:grid;grid-template-columns:150px 190px 150px;grid-template-rows:40px 54px 40px;gap:8px 12px;justify-content:center;align-items:stretch}
.direction-pad .left{grid-area:2/1}.direction-pad .drop{grid-area:2/2}.direction-pad .right{grid-area:2/3}
.direction-pad .depth-back{grid-area:1/2}.direction-pad .depth-front{grid-area:3/2}
.direction-pad .button3d{margin:0;padding:8px 12px;font-size:18px;min-width:0}
.direction-pad [data-row]{font-size:16px;background:linear-gradient(#e4f8ff,#a7d8e9);color:#174d65;border-color:#fff}
.direction-pad [data-row].selected{background:linear-gradient(#4a9eee,#205cb6);color:white;box-shadow:inset 0 1px 3px #16496a55,0 4px 0 #17476b}
.depth-guide{position:absolute;z-index:3;width:2px;transform:translateX(-50%);background:repeating-linear-gradient(to bottom,#178dadb0 0 5px,transparent 5px 11px);pointer-events:none}
.aim{border:2px solid #179bbb;background:#63e5f52b;box-shadow:0 0 10px #46e6ff70;z-index:15}
.aim span{position:absolute;top:100%;left:50%;transform:translateX(-50%);white-space:nowrap;background:#17475bea;color:white;border-radius:8px;padding:2px 6px;font-size:11px;margin-top:2px}
@media(max-width:650px){.direction-pad{grid-template-columns:94px 132px 94px;grid-template-rows:38px 50px 38px;gap:7px 6px}.direction-pad .button3d{font-size:15px;padding:7px 4px}.direction-pad [data-row]{font-size:14px}.aim span{font-size:10px}.controls{padding-top:10px}}
@media(max-width:360px){.direction-pad{grid-template-columns:82px 120px 82px}}

/* Reuse the exact machine art as an occluding foreground, aligned at every viewport size. */
.machine-foreground{position:absolute;inset:0;z-index:37;pointer-events:none;background:url('./assets/plush-claw-20260927/machine.png') center/100% 100% no-repeat;clip-path:polygon(0 89.4%,76.5% 89.4%,78.8% 90.6%,96.8% 90.6%,100% 89.4%,100% 100%,0 100%)}
.machine-foreground::after{content:none}
.plush-stage::after{content:'';position:absolute;inset:0;z-index:38;pointer-events:none;background:url('./assets/plush-claw-20260927/machine.png') center/100% 100% no-repeat;clip-path:polygon(0 0,5% 0,5% 89.4%,0 89.4%)}