#clawMachine,html.mobileMode #clawMachine{position:fixed;inset:0;z-index:9500;display:grid;place-items:center;overflow:auto;background:#020b09b8;color:#f8e5b3;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));font-family:system-ui,sans-serif;isolation:isolate}
body.clawActive #loginGate.open,body.clawActive #bootError.open{z-index:10000}
body.clawActive{overflow:hidden}body.clawActive #devPanel{visibility:hidden}
.clawFrame{position:relative;width:min(100%,1180px);height:min(820px,calc(100dvh - 64px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));min-height:0;padding:18px;border:1px solid #d8b361;border-radius:22px;background:radial-gradient(ellipse at 30% 35%,#174335,#061c15 75%);box-shadow:0 24px 100px #000b,inset 0 0 0 3px #b2944526;overflow:hidden}
#clawMachine *{box-sizing:border-box}#clawMachine [hidden]{display:none!important}
.clawLayout{width:100%;height:100%;overflow:auto;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(328px,.8fr);align-items:center;gap:24px}
.clawCabinet{position:relative;width:100%;height:100%;min-height:0;background:none}
.clawCabinet header{position:absolute;top:10px;left:14px;z-index:1;pointer-events:none}
.clawCabinet h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.clawCabinet small,.clawEyebrow{font-size:10px;letter-spacing:2px;color:#b9d9c8}
.clawWorld{cursor:grab;display:block;width:100%;height:100%;touch-action:none;border:0;border-radius:14px;background:#061c15}
.clawPanel{position:relative;min-width:0;text-align:center;padding:22px;border:1px solid #c69f4b55;border-radius:18px;background:linear-gradient(150deg,#133a2e,#041712);box-shadow:0 20px 60px #0006}
.clawStatus{font-size:12px;line-height:1.5;min-height:36px;color:#d9e8dd;margin:0 0 8px}
.clawControls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:16px;margin:16px 0 20px}
#clawMachine button{font-family:inherit;cursor:pointer;min-height:44px}
.clawJoystickStation,.clawDropStation{display:grid;justify-items:center;gap:14px;min-width:0}
.clawControlCaption{color:#e4cea0;font-size:11px;letter-spacing:.6px;font-weight:700;line-height:1.3}
.clawAccessible{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.clawJoystick{--stick-x:0%;--stick-y:0%;position:relative;width:min(100%,144px);aspect-ratio:1;border-radius:50%;border:1px solid #d4b05b;background:conic-gradient(from 45deg,#65471d,#ebd391,#927139,#f6e7b4,#6a4a21);box-shadow:0 7px 0 #031c16,0 10px 14px #0008,inset 0 0 0 3px #352914;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:grab;outline-offset:5px}
.clawStickSocket{position:absolute;inset:7px;border-radius:50%;background:radial-gradient(circle,#030f0c 27%,#29372e 28%,#091e16 34%,#344637 35%,#10251c 42%,#1d3125 43%,#0c2118 60%,#183c2b 61%);box-shadow:inset 0 5px 12px #000c,inset 0 0 0 1px #ffe4a633}
.clawJoystick::after{content:"";position:absolute;inset:15%;border-radius:50%;border:1px dashed #d9c18c44;pointer-events:none}
.clawStickHandle{position:absolute;left:50%;top:46%;width:50%;height:50%;transform:translate(calc(-50% + var(--stick-x)),calc(-50% + var(--stick-y)));transition:transform .12s ease-out;z-index:1;pointer-events:none}
.clawStickHandle::before{content:"";position:absolute;left:38%;top:64%;width:24%;height:48%;border-radius:4px;background:linear-gradient(90deg,#5d492e,#eddbb7 35%,#9b7946 74%,#3c2e1b);box-shadow:3px 6px 4px #0009}
.clawStickBall{position:absolute;inset:0;border-radius:50%;border:1px solid #9ad3ae66;background:radial-gradient(circle at 32% 24%,#e1ffbf 0%,#8aca95 7%,#258561 23%,#085b40 46%,#032f26 72%,#011a15);box-shadow:inset -5px -7px 9px #00150bcc,inset 2px 2px 4px #f3ffd757,5px 12px 10px #000a}
.clawStickBall::after{content:"";position:absolute;left:20%;top:12%;width:38%;height:19%;border-radius:50%;background:#ebffdc80;filter:blur(1px);transform:rotate(-28deg)}
.clawJoystick.isHeld{cursor:grabbing}.clawJoystick.isHeld .clawStickHandle{transition:none}
.clawJoystick[aria-disabled=true]{cursor:default;filter:saturate(.35);opacity:.6}
.clawDropBezel{width:min(100%,116px);aspect-ratio:1;border-radius:50%;padding:8px;background:conic-gradient(from 30deg,#8d6930,#f6d990,#a67b36,#ffedb6,#98713c);box-shadow:0 8px 0 #3d2916,0 12px 14px #0009,inset 0 0 0 2px #fff0b044}
#clawMachine .clawDrop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%;height:100%;min-height:44px;border-radius:50%;border:1px solid #ffb995;padding:8px;color:#fff7df;font-size:13px;font-weight:900;line-height:1;letter-spacing:1px;white-space:nowrap;text-shadow:0 1px 2px #6d160c;background:radial-gradient(ellipse at 38% 20%,#ffb179,#f36842 24%,#d83b22 62%,#8b1b13);box-shadow:inset 0 3px 3px #ffdbc388,inset 0 -5px 5px #75130980,0 5px 0 #67190f;touch-action:manipulation;transition:transform .08s,box-shadow .08s}
#clawMachine .clawDrop:active:not(:disabled){transform:translateY(4px);box-shadow:inset 0 2px 5px #75130980,0 1px 0 #67190f}
.clawDrop svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.clawOpen,.clawEquip{border:1px solid #ffefbc;border-radius:10px;background:linear-gradient(#fff0ba,#d2a34d);box-shadow:0 3px #705122;color:#35270f;font-size:12px;font-weight:800;letter-spacing:1px;padding:12px 18px}
#clawMachine button:disabled{cursor:default;opacity:.55}
.clawUtility{display:flex;align-items:center;justify-content:flex-end;gap:4px;border-top:1px solid #d4b67522;padding-top:4px}
.clawClose,.clawBack{border:0;background:none;color:#c1d4c5;padding:8px 6px;font-size:11px}
.clawRetry{border:1px solid #bd9d56;background:#143d2e;color:#ffe7b0;padding:8px 18px;border-radius:10px}
.clawReveal{position:absolute;inset:0;display:grid;place-items:center;padding:16px;background:radial-gradient(ellipse,#123c30f5,#020d0df2);z-index:3;overflow:auto}
.clawRevealCard{width:min(100%,440px);max-height:100%;overflow:auto;text-align:center;padding:24px 22px 16px;border:1px solid #c9ab62;border-radius:24px;background:radial-gradient(ellipse at 50% 38%,#2b5943,#091f18 75%);box-shadow:0 24px 100px #0009}
.clawRevealLabel{font-size:10px;letter-spacing:3px;color:#cabe92}.clawRevealTitle{font:28px Georgia,serif;color:#ffe9b9;margin:12px 0 4px}
.clawCapsuleHero{--open:0;position:relative;width:240px;height:240px;margin:8px auto 0}
.clawRevealWorld{display:block;width:100%;height:100%;background:none}
.clawItemPreview{position:absolute;inset:auto 0 2px;pointer-events:none;opacity:var(--open)}
.clawItemPreview>span{display:block;font-size:9px;letter-spacing:2px;color:#c9d8bf}
.clawPortrait{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.clawPortrait img{width:100%;height:100%;object-fit:cover}
.clawPrizeIcon{display:grid;place-items:center;width:100%;height:100%;font-size:64px;background:#123a2c}
.clawRevealFallback .clawItemPreview{inset:0;display:grid;place-content:center;gap:12px;opacity:1}
.clawRevealFallback .clawPortrait{position:static;width:128px;height:128px;clip-path:none;border-radius:50%;border:3px solid var(--preview-glow,#e8c477);box-shadow:0 0 18px var(--preview-glow,#e8c477);margin:auto}
.clawRevealFallback .clawPortrait img{border-radius:50%}
.clawReward strong{font:26px Georgia,serif;color:#ffe8b1}.clawReward p{font-size:12px;line-height:1.5;color:#bacebc;margin:8px 0 14px}
.clawRevealCard>.clawOpen,.clawRevealCard>.clawEquip{display:block;width:100%;margin:8px 0}
.clawBack{display:block;margin:4px auto 0}.clawResultStatus{font-size:12px;color:#ffe0a4;min-height:18px;line-height:1.5;margin:6px 0}
#clawMachine :focus-visible{outline:2px solid #b7ffe2;outline-offset:3px}
@media(max-width:650px){
 #clawMachine,html.mobileMode #clawMachine{padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}.clawFrame{height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:7px;border-radius:18px}.clawLayout{display:flex;flex-direction:column;gap:0}
 .clawCabinet{flex:1;min-height:220px}.clawCabinet header{top:6px;left:8px}.clawCabinet small{font-size:8px}
 .clawPanel{width:100%;padding:6px 6px 0;border-radius:14px;flex:none}
 .clawStatus{margin:2px 0;min-height:32px;font-size:11px}
 .clawControls{gap:18px;margin:6px 0 12px}.clawJoystick{width:116px}.clawDropBezel{width:100px}.clawJoystickStation,.clawDropStation{gap:12px}.clawUtility{padding:0}
 .clawReveal{padding:12px}.clawRevealCard{padding:18px 16px 10px;max-height:100%}.clawRevealTitle{font-size:25px}
}
@media(max-height:520px) and (min-width:480px){
 .clawFrame{height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:8px}.clawLayout{display:grid;gap:12px;grid-template-columns:minmax(0,1fr) minmax(288px,1fr)}.clawCabinet{min-height:0}.clawPanel{padding:6px}.clawStatus{margin:4px 0}.clawControls{gap:14px;margin:4px 0 12px}.clawJoystick{width:108px}.clawDropBezel{width:94px}.clawJoystickStation,.clawDropStation{gap:10px}
 .clawRevealCard{width:min(660px,100%);display:grid;grid-template-columns:minmax(150px,230px) minmax(0,1fr);column-gap:16px;padding:12px 18px}.clawRevealCard>:not(.clawCapsuleHero){grid-column:2}.clawCapsuleHero{grid-column:1;grid-row:1/8;margin:0;width:100%;max-width:240px}.clawRevealTitle{font-size:23px;margin:4px 0}.clawReward strong{font-size:23px}
}
@media(max-width:650px) and (max-height:650px){
 .clawRevealCard{padding:14px 12px 8px}.clawRevealTitle{font-size:23px;margin:8px 0 0}.clawCapsuleHero{height:175px;width:220px;margin-top:0}
 .clawReward strong{font-size:23px}.clawReward p{font-size:11px;margin:6px 0 8px}.clawResultStatus{margin:3px 0}.clawRevealCard>.clawEquip,.clawRevealCard>.clawOpen{margin:4px 0}
}
@media(prefers-reduced-motion:reduce){#clawMachine *{animation:none!important;transition:none!important}}

.clawWorld:active{cursor:grabbing}