.table-3d{overflow:hidden;background:#d9b182}
#three-view{width:100%;height:100%;touch-action:none;-webkit-tap-highlight-color:transparent;user-select:none;outline:none}
#three-view:focus-visible{outline:2px dashed #9c612c;outline-offset:-8px}
#three-view canvas{display:block;width:100%;height:100%;touch-action:none}
#loading{font-size:13px;text-align:center;padding:40px 20px;line-height:1.8}

.food-modes{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:14px}.food-modes button{background:#fff8e8;border:1px solid #aa9071;border-radius:18px;padding:9px 12px;font-size:13px}.food-modes button[aria-pressed="true"]{background:#795335;color:#fff8e8;border-color:#795335}

/* Keep the contact point and the dirt attached when making the photo hands larger. */
#hand{--hand-width:clamp(260px,72vw,360px);width:var(--hand-width);height:calc(var(--hand-width) * .910526);--hx:calc(var(--hand-width) * .231579);--hy:calc(var(--hand-width) * .178947)}
#hand[data-pose="grab"]{--hx:calc(var(--hand-width) * .147368);--hy:calc(var(--hand-width) * .236842)}
#hand[data-pose="grab"] #hand-dirt{transform:translate(calc(var(--hand-width) * -.089474),calc(var(--hand-width) * .057895))}

#hand[data-mode="push"]{--hand-width:clamp(351px,97.2vw,486px);transform:translate(calc(-1 * var(--hx)),calc(-1 * var(--hy))) scaleX(-1)}
#hand[data-mode="pinch"]{transform:translate(calc(-1 * var(--hx)),calc(-1 * var(--hy))) scaleX(-1)}
#hand[data-mode="pinch"].grabbing{transform:translate(calc(-1 * var(--hx)),calc(-1 * var(--hy))) rotate(8deg) scaleX(-1)}

/* Three aligned photographic pinch frames, kept in one transparent sprite sheet. */
#pinch-photo{display:none;position:absolute;inset:0;background-image:url('../assets/pinching-hand-stages.png');background-size:300% 100%;background-repeat:no-repeat;clip-path:polygon(0 0,100% 0,100% 100%,10% 100%,10% 50%,0 50%)}
#hand[data-mode="pinch"]{height:var(--hand-width);--pinch-x:.13;--pinch-y:.25;--hx:calc(var(--hand-width) * var(--pinch-x));--hy:calc(var(--hand-width) * var(--pinch-y))}
#hand[data-mode="pinch"] img{display:none}
#hand[data-mode="pinch"] #pinch-photo{display:block;background-position:0% 0}
#hand[data-mode="pinch"][data-pinch-stage="1"]{--pinch-x:.18;--pinch-y:.275}
#hand[data-mode="pinch"][data-pinch-stage="1"] #pinch-photo{background-position:50% 0}
#hand[data-mode="pinch"][data-pinch-stage="2"]{--pinch-x:.13;--pinch-y:.30}
#hand[data-mode="pinch"][data-pinch-stage="2"] #pinch-photo{background-position:100% 0}
#hand[data-mode="pinch"] #hand-dirt{height:calc(var(--hand-width) * .910526);transform:translate(calc(var(--hx) - var(--hand-width) * .231579),calc(var(--hy) - var(--hand-width) * .178947))}

/* The broad palm follows a projected 3D contact and can extend beyond the canvas. */
#palm-hand{position:fixed;z-index:20;pointer-events:none;display:none;--palm-width:clamp(230px,64vw,320px);width:var(--palm-width);height:var(--palm-width);transform:translate(-57%,-58%);filter:drop-shadow(2px 5px 3px #49301940)}
#palm-hand.visible{display:block}
#palm-hand img{display:block;width:100%;height:100%}
#palm-dirt{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}