.claw-page{isolation:isolate;height:100vh;height:100dvh;padding:max(.5rem,env(safe-area-inset-top)) .75rem max(.5rem,env(safe-area-inset-bottom));background:color-mix(in oklab,var(--color-pink) 35%,var(--background));flex-direction:column;gap:.5rem;display:flex;position:relative;overflow:hidden}.claw-page:before{content:"";z-index:-1;background:var(--claw-bg) center / cover no-repeat;position:absolute;inset:-2%}.claw-head,.claw-controls,.claw-bar{z-index:1;position:relative}.claw-head{grid-template-columns:auto 1fr auto;align-items:center;gap:.5rem;display:grid}.claw-title{text-align:center;font-size:clamp(1.4rem,5vw,2.4rem);font-weight:900}.claw-balance{background:var(--card);box-shadow:0 3px 0 var(--color-orange);border-radius:9999px;align-items:center;gap:.25rem;padding:.15rem .6rem;font-size:1.5rem;font-weight:900;display:inline-flex}.claw-stage{flex:1 1 0;justify-content:center;align-items:center;min-height:12rem;display:flex}.claw-machine{aspect-ratio:2/3;flex:none;height:100%;position:relative;container-type:size}.claw-layer{-webkit-user-select:none;user-select:none;width:100%;height:100%;position:absolute;inset:0}.claw-glass{clip-path:inset(17.4% 8.2% 37.8% 8.6%);pointer-events:none;position:absolute;inset:0;overflow:hidden}.claw-arm{will-change:transform;width:27.8%;height:22.8%;transition:translate var(--dur) ease-in-out;position:absolute;left:0}.claw-arm[data-phase=carry],.claw-arm[data-phase=idle],.claw-arm[data-phase=win]{transition:translate var(--dur) ease-in-out,transform var(--dur) ease-in-out}.claw-head-img{transform-origin:38.6% 60%;width:100%;height:100%;transition:transform .35s;position:absolute;inset:0}.claw-closed{transform:scaleX(.82)}.claw-carried{filter:drop-shadow(0 4px 6px #00000059);width:62%;position:absolute;top:86%;left:38.6%;transform:translate(-50%)}.claw-toys-front{pointer-events:none;-webkit-user-select:none;user-select:none;width:100%;height:18.16%;position:absolute;top:44.01%;left:0}.claw-arm[data-phase=down],.claw-arm[data-phase=grab]{z-index:0}.claw-toys-front{z-index:1}.claw-arm[data-phase=up],.claw-arm[data-phase=carry],.claw-arm[data-phase=release]{z-index:2}.claw-falling{z-index:2;will-change:transform;width:17%;margin-left:-8.5%;animation:.7s cubic-bezier(.5,0,.9,.6) forwards claw-fall;position:absolute;top:36%}@keyframes claw-fall{0%{transform:translateY(0)rotate(0)}to{transform:translateY(260%)rotate(14deg)}}.claw-in-chute{z-index:1;pointer-events:none;filter:drop-shadow(0 3px 4px #0006);width:12%;animation:.45s cubic-bezier(.2,.8,.3,1.4) claw-land;position:absolute;top:85.5%;left:28.3%;translate:-50% -50%}@keyframes claw-land{0%{opacity:.4;transform:translateY(-40%)scale(.7)}to{opacity:1;transform:none}}.claw-credits{color:#ff2a2a;text-shadow:0 0 6px #ff2a2a;background:#151515;border-radius:.3rem;place-items:center;width:11.8%;height:2.85%;font-family:ui-monospace,monospace;font-size:clamp(.6rem,3.8cqw,1.9rem);font-weight:900;line-height:1;display:grid;position:absolute;top:67.15%;left:75.4%}.claw-win{background:color-mix(in oklab,var(--card) 92%,transparent);border:4px solid var(--color-yellow);width:62%;box-shadow:0 0 30px var(--color-yellow);text-align:center;border-radius:1.5rem;flex-direction:column;align-items:center;gap:.3rem;padding:4%;font-size:clamp(1rem,5cqw,2rem);font-weight:900;animation:.6s cubic-bezier(.2,.7,.3,1.3) claw-pop;display:flex;position:absolute;top:38%;left:50%;transform:translate(-50%,-50%)}.claw-win img{width:55%}@keyframes claw-pop{0%{transform:translate(-50%,-50%)scale(.4)}to{transform:translate(-50%,-50%)scale(1)}}.claw-controls{flex-direction:column;align-items:center;gap:.25rem;display:flex}.claw-notice,.claw-done{text-align:center;background:var(--card);border-radius:9999px;padding:.2rem .8rem;font-size:1.1rem;font-weight:800}.claw-done{box-shadow:0 0 18px var(--color-yellow);font-size:1.6rem}.claw-bar{background:var(--card);box-shadow:0 3px 0 var(--color-blue);border-radius:1.2rem;align-items:center;gap:.5rem;padding:.4rem .6rem;display:flex;padding-left:3.6rem!important}.claw-count{white-space:nowrap;font-size:1.1rem;font-weight:900}.claw-bar-scroll{scroll-snap-type:x mandatory;flex:1;gap:.4rem;min-width:0;padding-bottom:2px;display:flex;overflow-x:auto}.claw-thumb{background:color-mix(in oklab,var(--color-yellow) 25%,var(--card));scroll-snap-align:start;border-radius:.9rem;flex:none;width:3.4rem;height:3.4rem;position:relative}@media(min-width:640px){.claw-thumb{width:4.2rem;height:4.2rem}}.claw-thumb img{object-fit:contain;width:100%;height:100%;padding:.2rem}.claw-thumb-name{white-space:nowrap;background:var(--card);border-radius:9999px;padding:0 .3rem;font-size:.75rem;font-weight:800;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.claw-empty{opacity:.6;padding:.9rem 0;font-weight:700}@media(prefers-reduced-motion:reduce){.claw-arm,.claw-head-img{transition-duration:50ms}.claw-falling,.claw-win,.claw-in-chute{animation:none}}@media(orientation:landscape)and (max-height:520px){.claw-page{grid-template:"stage head""stage."1fr"stage controls""stage bar"/auto minmax(0,1fr);column-gap:.75rem;display:grid}.claw-stage{grid-area:stage;width:calc(66.6667dvh - .666667rem);height:100%;min-height:0}.claw-head{grid-area:head}.claw-controls{grid-area:controls}.claw-bar{grid-area:bar;padding-left:.6rem!important}}.claw-hit{z-index:2;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;cursor:pointer;background:0 0;border:0;border-radius:9999px;padding:0;position:absolute}.claw-hit:focus-visible{outline:4px solid var(--color-yellow);outline-offset:2px}.claw-hit:disabled,.claw-hit[aria-disabled=true]{cursor:default}[data-phase=aim] .claw-hit:not(:disabled):not([aria-disabled=true]){box-shadow:0 0 0 3px color-mix(in oklab,var(--color-yellow) 85%,transparent),0 0 18px var(--color-yellow);animation:1.4s ease-in-out infinite claw-ready}.claw-drop-btn:not(:disabled):active{box-shadow:0 0 0 4px var(--color-yellow),0 0 26px var(--color-yellow);transform:translateY(2px)}.claw-joy{cursor:grab}.claw-joy:after{content:"";border:3px solid color-mix(in oklab,var(--color-yellow) 90%,transparent);opacity:0;width:30%;height:30%;transform:translate(calc(-50% + var(--tilt,0) * 60%));border-radius:9999px;transition:opacity .15s;position:absolute;top:8%;left:50%}.claw-joy.is-dragging{cursor:grabbing}.claw-joy.is-dragging:after{opacity:1}@keyframes claw-ready{50%{box-shadow:0 0 0 3px color-mix(in oklab,var(--color-yellow) 40%,transparent),0 0 6px var(--color-yellow)}}.claw-aim{align-items:center;gap:.5rem;display:flex}.claw-nudge{min-width:3rem;min-height:3rem;font-size:1.4rem}@media(prefers-reduced-motion:reduce){[data-phase=aim] .claw-hit{animation:none!important}}.claw-page{-webkit-user-select:none;user-select:none;padding-left:max(.75rem,env(safe-area-inset-left));padding-right:max(.75rem,env(safe-area-inset-right))}.claw-page:after{content:"";z-index:-1;pointer-events:none;background:radial-gradient(ellipse 60% 55% at 50% 48%,transparent 40%,color-mix(in oklab,var(--foreground) 28%,transparent) 100%);position:absolute;inset:0}.claw-title{letter-spacing:.01em;color:var(--color-yellow);-webkit-text-stroke:.12em var(--foreground);paint-order:stroke fill;text-shadow:0 .08em 0 var(--color-orange),0 .16em 0 var(--foreground),0 .3em .5em color-mix(in oklab,var(--foreground) 45%,transparent);font-size:clamp(1.7rem,6vw,3.2rem);line-height:1}.claw-balance{box-shadow:0 3px 0 var(--color-orange),0 6px 16px color-mix(in oklab,var(--foreground) 30%,transparent)}.claw-stage{position:relative}.claw-stage:before{content:"";background:radial-gradient(ellipse at center,color-mix(in oklab,var(--color-yellow) 45%,transparent),transparent 70%);pointer-events:none;width:min(90%,40rem);height:10%;position:absolute;bottom:0;left:50%;translate:-50%}.claw-notice{box-shadow:0 3px 10px color-mix(in oklab,var(--foreground) 25%,transparent)}.claw-win{background:linear-gradient(180deg,var(--card),color-mix(in oklab,var(--color-yellow) 22%,var(--card)));border:.35rem solid var(--color-yellow);box-shadow:0 0 0 .25rem var(--color-orange),0 14px 30px color-mix(in oklab,var(--foreground) 40%,transparent)}.claw-win p{color:var(--foreground)}.claw-win img{filter:drop-shadow(0 6px 8px color-mix(in oklab,var(--foreground) 35%,transparent))}.claw-win:before{content:"★ ★ ★";white-space:nowrap;color:var(--color-yellow);-webkit-text-stroke:.06em var(--color-orange);paint-order:stroke fill;font-size:1.4em;position:absolute;top:-.9em;left:50%;translate:-50%}.claw-machine:after{content:"";aspect-ratio:1;pointer-events:none;opacity:0;border:.3rem solid var(--color-yellow);border-radius:9999px;width:20%;position:absolute;top:85.5%;left:28.3%;transform:scale(.4)}[data-phase=chute] .claw-machine:after{animation:.7s ease-out forwards claw-ring}@keyframes claw-ring{30%{opacity:.9}to{opacity:0;transform:scale(1.3)}}.claw-carried{animation:.45s ease-out claw-pick}@keyframes claw-pick{0%{opacity:.6;transform:translate(-50%,12%)scale(.8)}to{opacity:1;transform:translate(-50%)scale(1)}}.claw-bar{box-shadow:0 3px 0 var(--color-blue),0 8px 20px color-mix(in oklab,var(--foreground) 25%,transparent);min-height:4.2rem}.claw-count{background:var(--color-yellow);color:var(--foreground);box-shadow:0 2px 0 var(--color-orange);border-radius:9999px;padding:.15rem .6rem}.claw-thumb{box-shadow:inset 0 0 0 2px color-mix(in oklab,var(--color-yellow) 70%,transparent),0 2px color-mix(in oklab,var(--color-orange) 70%,transparent)}.claw-thumb:last-child{animation:.45s cubic-bezier(.2,.8,.3,1.4) claw-land}.claw-done{background:var(--color-yellow);color:var(--foreground);box-shadow:0 3px 0 var(--color-orange),0 0 18px var(--color-yellow)}@media(prefers-reduced-motion:reduce){.claw-carried,.claw-thumb:last-child,[data-phase=chute] .claw-machine:after{animation:none}}@media(orientation:landscape)and (max-height:520px){body:has([data-game=ldk-claw]) [data-audio-fab]{inset-inline-start:auto;inset-inline-end:max(1.1rem,env(safe-area-inset-right));bottom:calc(max(.5rem,env(safe-area-inset-bottom)) + .55rem)}.claw-bar{padding-right:3.8rem}}.claw-controls{flex:none;justify-content:center;height:6.75rem}@media(orientation:landscape)and (max-height:520px){.claw-controls{height:6.25rem}}.claw-bar{box-sizing:border-box;flex:none;height:4.4rem;min-height:0}@media(min-width:640px){.claw-bar{height:5.2rem}}.claw-chain{pointer-events:none;background:linear-gradient(90deg,#0000008c,#0000 35%,#ffffff59,#0000 65%,#0000008c) 0 0/100% 100%,repeating-linear-gradient(#3a3f47 0 28%,#c9d0d8 28% 36%,#555b64 36% 64%,#1d2026 64% 72%,#8a929c 72% 100%) 0 100%/100% .55em;border-radius:2px;width:4.6%;height:160%;position:absolute;bottom:calc(100% - 1px);left:37.4%;translate:-50%;box-shadow:0 0 0 1px #00000059}.claw-trolley{pointer-events:none;z-index:1;will-change:transform;width:27.8%;height:2.2%;position:absolute;left:0;translate:0 -40%}.claw-trolley-body{background:linear-gradient(#d9dee4,#7d858f 55%,#3a3f47);border-radius:.25em .25em .4em .4em;width:34%;height:100%;position:absolute;top:0;left:37.4%;translate:-50%;box-shadow:0 2px 3px #00000073,inset 0 1px #fff9}.claw-trolley[data-phase=carry],.claw-trolley[data-phase=idle],.claw-trolley[data-phase=win]{transition:transform var(--dur) ease-in-out}.claw-reveal{z-index:70;pointer-events:none;padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));background:0 0;flex-direction:column;justify-content:center;align-items:center;gap:.5rem;display:flex;position:fixed;inset:0}.claw-reveal-img{object-fit:contain;width:auto;min-width:0;max-width:min(88vw,44rem);height:auto;min-height:0;max-height:calc(100dvh - 9rem);width:min(88vw,44rem,100dvh - 9rem);filter:drop-shadow(0 0 1.5rem color-mix(in oklab,var(--color-yellow) 80%,transparent)) drop-shadow(0 1rem 1.25rem color-mix(in oklab,var(--foreground) 45%,transparent));animation:.7s cubic-bezier(.2,.8,.3,1.25) both claw-reveal-pop;display:block}.claw-reveal-name{text-align:center;color:var(--color-yellow);-webkit-text-stroke:.1em var(--foreground);paint-order:stroke fill;text-shadow:0 .08em 0 var(--color-orange),0 .2em .4em color-mix(in oklab,var(--foreground) 50%,transparent);margin:0;font-size:clamp(1.4rem,5vmin,2.6rem);font-weight:900;line-height:1.1;animation:.7s cubic-bezier(.2,.8,.3,1.25) .1s both claw-reveal-pop}@keyframes claw-reveal-pop{0%{opacity:0;transform:scale(.35)}70%{opacity:1}to{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.claw-reveal-img,.claw-reveal-name{animation:none}}
