/* Reference-matched artwork is displayed in responsive bands. Image bytes are
   unmodified; this is CSS layout so controls never shrink below touch size. */
.claw-dialog,.claw-prize-popup{box-sizing:border-box;color:#44210e;background:#e8c495;font:16px/1.4 Georgia,serif;border:1px solid #76533a;border-radius:22px;padding:0;box-shadow:0 12px 70px #1b100c88}
.claw-dialog{width:min(560px,calc(100vw - 12px));height:min(960px,calc(100dvh - 12px));max-width:none;max-height:none;overflow:hidden}
.claw-dialog[open]{display:flex;flex-direction:column}
.claw-dialog::backdrop,.claw-prize-popup::backdrop{background:#271a15b0}
.claw-dialog *{box-sizing:border-box}.claw-dialog button,.claw-prize-popup button{min-height:44px;min-width:44px;border:1px solid #ba946d;border-radius:22px;background:linear-gradient(#fff5e2,#eed2ac);color:#44210e;font:700 16px/1.25 Georgia,serif;padding:9px 14px;cursor:pointer;box-shadow:inset 0 1px 1px #fff9,0 2px 4px #57371b38}
.claw-dialog button:disabled,.claw-prize-popup button:disabled{cursor:default;filter:saturate(.5);opacity:.66}
.claw-dialog button:focus-visible,.claw-prize-popup button:focus-visible{outline:3px solid #fff8d8;outline-offset:2px;box-shadow:0 0 0 5px #176b70}
.claw-top{position:relative;z-index:2;display:flex;justify-content:space-between;flex:none;gap:8px;padding:6px 10px;background:linear-gradient(100deg,#bc885ba6,#f2d2a6ee,#bf905faa)}
.claw-top button{max-width:calc(50% - 4px);white-space:normal}
.claw-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 0 6px;scrollbar-width:thin}
.claw-scene{container-type:inline-size;position:relative;width:100%;isolation:isolate;--cabinet:url('./claw-scene/cabinet-reference.png');--shelf:url('./claw-scene/shelf-reference.png')}
.claw-title,.claw-window-panel,.claw-control-deck,.claw-hatch-panel{background-image:var(--cabinet);background-repeat:no-repeat}
.claw-title{position:relative;aspect-ratio:1024/265;background-size:100% 579.623%;background-position:center top;text-align:center}
.claw-title h1{position:absolute;inset:0;margin:0}.claw-title svg{display:block;width:100%;height:100%;fill:#4b1e0a;filter:drop-shadow(0 1px 0 #fff5)}.claw-title .claw-plaque-engraving text{font:700 68px Georgia,serif}.claw-title h1{overflow:hidden}.claw-title .claw-plaque-svg{filter:drop-shadow(0 2px 1px #65451e40)}

.claw-cabinet{position:relative}.claw-window-panel{position:relative;height:clamp(150px,calc(100dvh - 232px - 54cqw),355px);background-size:100% 216.338%;background-position:center 32.082%}
.claw-glass{container-type:size;position:absolute;inset:0 7.7% 5.2%;overflow:hidden;isolation:isolate}
.claw-glass::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:23;background:linear-gradient(107deg,transparent 10%,#fff9df13 11%,transparent 13%,transparent 78%,#fff8e71a 79%,transparent 81%);box-shadow:inset 2px 0 3px #fff9e740,inset -2px 0 3px #f9e0bd40}
.claw-pile-toy{position:absolute;width:35%;height:41%;transform:translate(-50%,-50%) rotate(var(--tilt));pointer-events:none}
.claw-toy-art{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(1px 5px 3px #44332140)}
.claw-placeholder{display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;width:100%;height:100%;padding:4px;border-radius:42%;background:radial-gradient(ellipse at 30% 20%,#ffffffd9,transparent 60%),var(--toy-color);box-shadow:inset -5px -6px 6px #382a1028,2px 7px 5px #42271240;border:1px solid #7d664d;font:700 clamp(9px,2.6vw,13px)/1.1 system-ui}.claw-placeholder small{display:block;font-size:8px;margin-top:4px}
.claw-shadow{position:absolute;z-index:12;width:19%;height:7%;transform:translate(-50%,-50%);border:0;border-radius:50%;background:radial-gradient(ellipse,#45331c50 0%,#49391e25 40%,transparent 72%);filter:blur(3px);transition:none;pointer-events:none}
.claw-mechanism{position:absolute;z-index:20;width:min(17.5%,28cqh);height:auto;aspect-ratio:100/116;transform:translate(-50%,-100%);transform-origin:50% 100%;transition:none;pointer-events:none;filter:drop-shadow(2px 4px 2px #3b291f44)}
.claw-chain{position:absolute;width:8px;height:520px;background:url('./claw-scene/steel-chain.svg') center bottom/8px 15px repeat-y;bottom:97%;left:calc(50% - 4px);filter:drop-shadow(1px 1px 1px #3d392b77);pointer-events:none}
.claw-mechanism svg{position:relative;width:100%;height:100%;overflow:visible}.claw-finger{fill:none;stroke:url(#clawMetal);stroke-width:7;stroke-linecap:round;filter:drop-shadow(1px 1px 1px #231d16);transition:transform .3s}.claw-finger-assembly{transform-box:view-box;transition:transform .3s}.claw-finger-assembly.left{transform-origin:36px 66px}.claw-finger-assembly.right{transform-origin:64px 66px}.claw-mechanism.is-closed .left{transform:rotate(-18deg)}.claw-mechanism.is-closed .right{transform:rotate(18deg)}.claw-finger-highlight{fill:none;stroke:#fff6d5;stroke-width:1.5;stroke-opacity:.65;stroke-linecap:round}
.claw-carried{position:absolute;top:70%;left:-18%;width:135%;height:100%;z-index:-1}.claw-release-toy{position:absolute;left:88%;top:23%;width:28%;height:34%;z-index:22;pointer-events:none;transform:translate(-50%,-50%)}
.claw-chute-mouth{position:absolute;bottom:0;right:0;width:20%;height:14%;z-index:13;pointer-events:none;filter:drop-shadow(2px 4px 2px #392b2155)}.claw-chute-mouth svg{display:block;width:100%;height:100%}
.claw-control-deck{height:156px;position:relative;display:grid;grid-template-columns:142px minmax(72px,1fr);align-items:center;gap:clamp(8px,3vw,18px);padding:4px 13%;background-size:100% 558.545%;background-position:center 77.319%}
.claw-dpad{display:grid;grid-template-columns:repeat(3,46px);grid-template-rows:repeat(3,46px);gap:1px;width:140px;height:140px}
.claw-dialog .claw-dpad button{position:relative;width:46px;height:46px;min-width:44px;min-height:44px;padding:0;border-radius:50%;border:3px solid #6c887f;background:radial-gradient(ellipse at 35% 22%,#fff6df 0%,#f8dfb9 60%,#dbb58b 75%);box-shadow:inset 0 2px 1px #fff9,0 2px 0 1px #1e5553,0 4px 0 2px #a9b1a0,0 6px 3px #40271466;font:700 19px Georgia,serif;touch-action:manipulation}
.claw-dpad button small{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.claw-dpad [data-claw=forward]{grid-column:2;grid-row:1}.claw-dpad [data-claw=left]{grid-column:1;grid-row:2}.claw-dpad [data-claw=right]{grid-column:3;grid-row:2}.claw-dpad [data-claw=backward]{grid-column:2;grid-row:3}
.claw-dialog .claw-drop{justify-self:center;width:clamp(72px,19vw,104px);height:clamp(72px,19vw,104px);border-radius:50%;padding:0;border:5px solid #abc1ab;font-size:clamp(21px,6vw,31px);color:#fff1cb;background:radial-gradient(ellipse at 35% 20%,#47b6b0,#0c7e7f 58%,#126564 80%);box-shadow:inset 1px 3px 2px #adf4ddaa,inset -2px -5px 3px #064d4b88,0 3px 0 2px #264f46,0 5px 0 4px #eee2bb,0 7px 0 5px #776044,0 10px 5px #3d2b2559;text-shadow:0 1px 1px #184f45;touch-action:manipulation}
.claw-dpad button:active:not(:disabled),.claw-dialog .claw-drop:active:not(:disabled){transform:translateY(3px)}
.claw-hatch-panel{position:relative;aspect-ratio:1024/286;background-size:100% 537.063%;background-position:center bottom}
.claw-prize-chute{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 2px 1px #392b2144)}
.claw-hatch{position:absolute;inset:11% 29% 23%;display:flex;align-items:center;justify-content:center;overflow:hidden}.claw-hatch img,.claw-hatch .claw-placeholder{height:90%;width:80%;filter:drop-shadow(1px 5px 4px #20140c70)}
.claw-status{font:14px/1.4 system-ui;text-align:center;margin:8px 12px;padding:7px 10px;border-radius:10px;background:#fff2d8e8}.claw-scroll>button{display:block;margin:8px auto;max-width:calc(100% - 20px)}
.claw-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
.claw-service-sign{position:absolute;z-index:25;left:50%;top:50%;width:min(84%,126cqh);aspect-ratio:3/2;background:url('./claw-scene/restock-note.png') center/contain no-repeat;transform:translate(-50%,-50%) rotate(-3deg);pointer-events:none}
.claw-dialog[data-view=shelf] .claw-scroll{display:flex;flex-direction:column;padding-bottom:0}
.claw-dialog[data-view=shelf] .claw-scene{flex:1 0 auto;aspect-ratio:2/3;background-image:var(--shelf);background-size:100% 100%;background-repeat:no-repeat}
.claw-dialog[data-view=shelf] .claw-title{position:absolute;inset:0 0 auto;height:17.252604%;background:none;aspect-ratio:auto}
.claw-dialog[data-view=shelf] .claw-title .claw-plaque-engraving text{font-size:74px}
.claw-shelf-grid{position:absolute;inset:17% 9% 25%;display:grid;grid-template-rows:repeat(3,minmax(0,1fr))}
.claw-shelf-row{display:flex;align-items:stretch;gap:2%;min-height:0;padding:0 0 4.5%}
.claw-dialog .claw-shelf-toy,.claw-shelf-space{flex:1;min-width:0}.claw-dialog .claw-shelf-toy{position:relative;min-height:44px;min-width:44px;border:0;border-radius:0;background:transparent;box-shadow:none;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:0}
.claw-shelf-toy>.claw-toy-art,.claw-shelf-toy>.claw-placeholder{height:calc(100% - 23px);min-height:0;flex:1}.claw-shelf-toy>span:last-child{position:relative;flex:none;width:100%;min-height:23px;display:flex;align-items:center;justify-content:center;padding:2px 3px;background:linear-gradient(#fff4d9,#dfb686);border:1px solid #a77547;border-radius:5px;box-shadow:inset 0 1px 1px #fff9,0 2px 2px #50301155;font:700 clamp(10px,2.6vw,13px)/1.05 Georgia,serif;overflow-wrap:anywhere}
.claw-shelf-toy>span:last-child::before,.claw-shelf-toy>span:last-child::after{content:'';position:absolute;top:calc(50% - 1px);width:2px;height:2px;border-radius:50%;background:#a06d38;box-shadow:0 1px 0 #ffe9b6}.claw-shelf-toy>span:last-child::before{left:2px}.claw-shelf-toy>span:last-child::after{right:2px}
.claw-shelf-empty{position:absolute;top:12%;left:10%;right:10%;padding:16px 12px;text-align:center;background:#fff0d7e8;box-shadow:0 3px 5px #54341540;transform:rotate(-2deg);font:italic 16px/1.3 Georgia,serif}
.claw-shelf-more{position:absolute;inset:79% 15% auto;margin:0;text-align:center;color:#7d4014;font:italic clamp(13px,3.4vw,20px)/1.2 Georgia,serif}.claw-shelf-foot{display:none}
.claw-prize-popup{width:min(400px,calc(100vw - 26px));max-height:calc(100dvh - 26px);padding:20px;text-align:center;overflow:auto}.claw-prize-popup>.claw-toy-art,.claw-prize-popup>.claw-placeholder{height:180px;width:180px;max-width:100%;margin:auto}.claw-prize-popup h2{margin:12px 0 5px}.claw-prize-popup p{font-size:16px}.claw-prize-popup button{min-width:150px}.claw-prize-popup p:last-of-type{font-size:14px}
.claw-prototype-note{font:12px/1.3 system-ui;text-align:center;background:#fff5c9;padding:5px;margin:0}
@media(max-width:360px){.claw-control-deck{height:148px;padding:4px 10%;gap:8px;grid-template-columns:140px minmax(72px,1fr)}.claw-top{padding-inline:7px}.claw-top button{font-size:15px}}
@media(max-height:600px) and (min-width:600px){.claw-dialog{width:min(440px,calc(100vw - 12px))}.claw-window-panel{height:240px}}
@media(prefers-reduced-motion:reduce){.claw-mechanism,.claw-finger,.claw-shadow{transition:none}}

.claw-finger-tip{fill:none;stroke:#2b251e;stroke-width:9;stroke-linecap:round;transition:transform .3s}

@media(prefers-reduced-motion:reduce){.claw-finger-tip{transition:none}}

@media(prefers-reduced-motion:reduce){.claw-finger-assembly{transition:none}}

/* The controls remain solid enamel and metal, including disabled/reveal states. */
.claw-dialog .claw-dpad button,.claw-dialog .claw-drop{opacity:1;background-color:#ead0a4}
.claw-dialog .claw-dpad button:disabled,.claw-dialog .claw-drop:disabled{opacity:1;filter:saturate(.72)}
.claw-dialog .claw-dpad button{border-color:#a9b8a2;background:radial-gradient(ellipse at 32% 18%,#fff9e6 0%,#f4ddb7 52%,#d2aa7d 80%,#b58c63 100%);box-shadow:inset 0 2px 1px #fff7df,inset 0 -3px 2px #a67b51,0 2px 0 1px #254c46,0 4px 0 2px #c0c8ae,0 6px 3px #40271466;text-shadow:0 1px #fff4d8}
.claw-counter{position:absolute;left:33.75%;top:71%;width:32.5%;height:22%;min-height:22px;max-height:32px;padding:1px 4px;border:2px solid #9c7b4a;border-radius:6px;background:#20150e;box-shadow:inset 0 2px 3px #080403,0 1px 0 #ffe5ab}
.claw-counter svg{display:block;width:100%;height:100%;filter:none;overflow:hidden}
.claw-counter .is-lit{fill:#ff432c}.claw-counter .is-unlit{fill:#4a1c12}
.claw-counter text{fill:#ff593d;font:700 27px 'Courier New',monospace;letter-spacing:0}
.claw-dialog .claw-dpad button,.claw-dialog .claw-drop{background-color:#ead0a4}