:root{color-scheme:light;--ink:#40302b;--paper:#faf5e8}*{box-sizing:border-box}body{margin:0;background:#e9e4d8;color:var(--ink);font-family:ui-rounded,"Hiragino Maru Gothic ProN","Yu Gothic",sans-serif}main{max-width:490px;margin:24px auto;background:var(--paper);border:2px solid var(--ink);border-radius:20px;overflow:hidden;box-shadow:7px 9px 0 #d6cfbd}header{position:relative;padding:23px 22px 8px}.small{font-size:11px;letter-spacing:.18em;color:#7c7366}h1{font-size:32px;letter-spacing:.04em;margin:8px 0 0}h1 span{display:block;color:#dc8865;line-height:14px;padding-left:120px}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:focus-visible{outline:3px solid #427669;outline-offset:5px}#sound{position:absolute;right:17px;top:22px;border:1px solid #a69b89;background:transparent;border-radius:20px;padding:7px 10px;font-size:11px}.scene{position:relative;height:530px;overflow:hidden}.wall{position:absolute;inset:0 0 40%;background:#f1e8d5}.clock{position:absolute;left:26px;top:34px;font-size:57px;color:#89715e;transform:rotate(-12deg)}.flower{position:absolute;right:26px;top:134px;color:#9ba982;font-size:45px}.mother{position:absolute;width:265px;left:calc(50% - 132px);top:79px;transition:transform .16s}.mother.reacting{animation:mother-bounce .4s}.speech{position:absolute;right:20px;top:12px;z-index:2;background:#fffaf0;border:2px solid var(--ink);border-radius:47% 42% 46% 10%;padding:16px 21px;max-width:240px;min-height:58px;font-size:15px;transform:rotate(2deg)}.table{position:absolute;left:-6%;right:-6%;top:290px;bottom:-20px;background:#d9b182;border:4px solid var(--ink);border-radius:45% 45% 0 0 / 12% 12% 0 0}.grain{position:absolute;width:160px;height:3px;background:#c49970;border-radius:50%;transform:rotate(-5deg);left:30px;top:100px}.grain-two{left:auto;right:40px;top:180px;width:120px}.food{position:absolute;border:0;background:none;padding:0;z-index:2;border-radius:30px;transition:transform .15s}.food:hover{transform:translateY(-3px)}.food svg{display:block;width:100%;height:100%;overflow:visible}.food span{font-size:11px;letter-spacing:.16em;color:#6a4f38}.tea{width:115px;height:115px;left:9%;top:7px}.sushi{width:210px;height:140px;right:8%;top:26px}.pudding{width:155px;height:138px;left:18%;top:111px}.topping{transition:opacity .16s,transform .2s}.sushi.eaten .topping{opacity:0;transform:translateY(-25px)}.cup{transform-origin:65px 84px;transition:transform .3s}.tea.spilled .cup{transform:rotate(-78deg)}.custard{transform-origin:90px 130px;transition:transform .24s}.pudding.squashed .custard{transform:scale(1.32,.29)}#puddle{position:absolute;left:13%;top:56px;width:0;height:0;background:#8d9b66;border:2px solid #758555;border-radius:45% 60% 35% 52%;transform:rotate(16deg);transition:width .4s,height .4s;opacity:0}#puddle.visible{width:175px;height:72px;opacity:.78}.effect{position:absolute;z-index:4;pointer-events:none;font-size:24px;font-weight:bold;color:#694d37;opacity:0}.effect.pop{animation:pop .65s ease-out}.food.wiggle{animation:wiggle .3s}footer{position:relative;padding:24px;text-align:center;border-top:1px solid #decfb8}footer p{font-size:14px;margin:0 0 17px}#reset{padding:11px 24px;background:#fcf8ee;border:2px solid var(--ink);border-radius:48% 44% 40% 46% / 20%;box-shadow:2px 3px 0 #cabc9f;font-size:14px}footer small{display:block;font-size:10px;margin-top:18px;color:#857767}@keyframes pop{0%{opacity:0;transform:translateY(0) rotate(-8deg)}20%{opacity:1}100%{opacity:0;transform:translateY(-35px) rotate(4deg)}}@keyframes wiggle{25%{transform:rotate(-7deg)}75%{transform:rotate(7deg)}}@keyframes mother-bounce{50%{transform:translateY(-6px) rotate(-2deg)}}@media(max-width:520px){body{background:var(--paper)}main{margin:0 auto;border:0;border-radius:0;box-shadow:none}header{padding-top:18px}.scene{height:min(530px,68svh);min-height:430px}.table{top:245px}.mother{top:55px;width:235px;left:calc(50% - 117px)}.sushi{width:180px;right:7%;top:21px}.tea{width:100px;left:8%;top:4px}.pudding{width:140px;top:104px}footer{padding:18px}h1{font-size:29px}.speech{font-size:14px;right:14px;top:2px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.effect.pop{opacity:1}}

/* Direct manipulation: no hover lift or transform animation under the finger. */
.pudding{touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
.pudding:hover{transform:none}
.pudding.pressing{cursor:grabbing}
.pudding .custard{transition:none}
.pudding svg{pointer-events:none}
#soft-pudding{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pudding:hover{transform:none}.pudding.holding{cursor:none}.pudding{cursor:none}
#hand{position:fixed;z-index:20;pointer-events:none;width:190px;height:173px;transform:translate(-28px,-45px);display:none;filter:drop-shadow(2px 5px 3px #49301940)}
#hand.visible{display:block}#hand img{width:100%;height:100%;object-fit:contain}#hand.grabbing{transform:translate(-28px,-45px) rotate(-8deg)}
@media(pointer:coarse){#hand{width:150px;height:137px;transform:translate(-22px,-36px)}#hand.grabbing{transform:translate(-22px,-36px) rotate(-8deg)}}

#hand{transform-origin:28px 45px}@media(pointer:coarse){#hand{transform-origin:22px 36px}}
#table-mess{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
#hand{--hx:44px;--hy:34px;transform:translate(calc(-1 * var(--hx)),calc(-1 * var(--hy)));transform-origin:var(--hx) var(--hy)}
#hand[data-pose="grab"]{--hx:28px;--hy:45px}
#hand.grabbing{transform:translate(calc(-1 * var(--hx)),calc(-1 * var(--hy))) rotate(-8deg)}
#hand-dirt{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
#hand[data-pose="grab"] #hand-dirt{transform:translate(-17px,11px)}
#hand.impact{animation:hand-tap .2s ease-out}#hand.hard-hit.impact{animation:hand-hit .25s ease-out}
@keyframes hand-tap{50%{transform:translate(calc(-1 * var(--hx)),calc(-1 * var(--hy))) rotate(9deg) scale(.96)}}
@keyframes hand-hit{35%{transform:translate(calc(-1 * var(--hx)),calc(-1 * var(--hy))) rotate(18deg) scale(.87)}}
@media(pointer:coarse){#hand{--hx:35px;--hy:27px}#hand[data-pose="grab"]{--hx:22px;--hy:36px}}
#hand-food{position:absolute;inset:0;width:100%;height:100%;display:none;pointer-events:none}
#hand-food.loaded{display:block}
#hand[data-pose="grab"] #hand-food{transform:translate(-17px,11px)}
.mother.drop-ready{filter:drop-shadow(0 0 5px #e8b361)}
.mother.stunned{transform:rotate(-2deg)}.mother.stunned ellipse{transform:translate(2px,-1px)}
#mother-mess{pointer-events:none}
#hand.touch-lifted::before{content:"";position:absolute;left:var(--hx);top:var(--hy);width:1px;height:58px;background:linear-gradient(#ab825a90,#ab825a30);z-index:-1}
.touch-hint{display:none;margin-top:7px;font-size:11px;color:#857767}
@media(pointer:coarse){.touch-hint{display:block}}
.mother.chewing #mouth{transform-origin:150px 150px;animation:chew .22s ease-in-out infinite alternate}
@keyframes chew{to{transform:scaleY(.45) translateY(1px)}}