*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#f7f3eb}body{min-height:100svh;display:grid;place-items:center;font-family:"Yu Gothic","Microsoft YaHei",sans-serif;color:#756859}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid #77977d;outline-offset:5px}[hidden]{display:none!important}
.shop{position:relative;width:min(100vw,1200px);aspect-ratio:3/2;overflow:hidden;isolation:isolate;perspective:1200px;outline:none;background:#fffaf0;border-radius:28px;box-shadow:0 18px 65px #7a614a0b}.environment,.flag{position:absolute;inset:0;background:url('assets/sprites/street.png') center/100% 100% no-repeat;pointer-events:none}.environment{z-index:0}.flag{z-index:1;background-image:url('assets/sprites/flag-scene.png');clip-path:polygon(91.4% 11%,99.3% 14%,99.3% 44%,91.4% 40%);transform-origin:91.5% 12%;animation:breeze 4.8s ease-in-out infinite}
@keyframes breeze{0%,100%{transform:skewY(-.5deg) scaleX(.99)}50%{transform:skewY(.6deg) scaleX(1.005)}}
.vendor{position:absolute;left:2%;bottom:11%;width:65%;aspect-ratio:3/2;background:url("assets/sprites/cart-base.png") center/100% 100% no-repeat;z-index:4;pointer-events:none}
.buyer{position:absolute;width:27%;aspect-ratio:9/8;left:61%;bottom:11%;z-index:6;transform-origin:50% 65%;will-change:transform;pointer-events:none}.girl{height:100%;width:100%;background:url('assets/sprites/customer.png?v=2') var(--frame-x,0%) var(--frame-y,50%)/400% 300% no-repeat}.incoming{visibility:hidden}
.speech{position:absolute;left:64%;top:47%;z-index:8;font-size:clamp(14px,2vw,21px);letter-spacing:1px;transform:rotate(-5deg);white-space:nowrap;pointer-events:none}.judgment{position:absolute;left:46%;top:39%;z-index:8;color:#8a9e7c;font-size:clamp(14px,2vw,20px);transform:rotate(-8deg);pointer-events:none}.judgment[data-kind="miss"]{color:#bc9474}
.target{position:absolute;width:84px;height:84px;border:2px solid #829984;border-radius:50%;background:#fffaf0e6;z-index:10;touch-action:manipulation;padding:0;box-shadow:0 0 0 4px #fffaf060}.target-core{position:absolute;inset:17px;background:#aec8ac44;border:1px solid #a7bba0;border-radius:50%}.approach{position:absolute;inset:-2px;border:2px solid #d5a875;border-radius:50%;pointer-events:none;transform:scale(2.2)}.target[data-onbeat="true"] .target-core{background:#8ba98299}.target:active .target-core{transform:scale(.9)}
.pause{position:absolute;right:24px;top:22px;z-index:15;width:40px;height:40px;border:1px solid #c6c8b7;background:#fffaf0e6;border-radius:50%;color:#84917c;letter-spacing:2px}
.cover{position:absolute;inset:0;z-index:20;display:grid;place-items:start center;pointer-events:none}.invitation{margin-top:4.5%;text-align:center;pointer-events:auto}.name{font-size:clamp(24px,4vw,43px);font-weight:600;color:#8b977c;letter-spacing:.16em;margin:0 0 18px;transform:rotate(-3deg)}.cover button{border:1px solid #9ba98e;background:#fffaf0f2;border-radius:30px;color:#77886b;padding:12px 32px;font-size:16px;letter-spacing:3px;box-shadow:0 4px 14px #8063450a}.cover button:disabled{opacity:.55}.hint{font-size:12px;letter-spacing:1px;color:#a29987;margin-top:14px}#error{font-size:12px;color:#a76d55;max-width:270px}.shop[data-state="paused"] .cover{background:#fffaf075;place-items:center}.shop[data-state="paused"] .invitation{margin-top:0}.shop[data-state="paused"] .name,.shop[data-state="paused"] .hint{display:none}
@media(max-width:600px){body{background:#fffaf0}.shop{width:100%;aspect-ratio:4/5;border-radius:0;box-shadow:none}.vendor{width:80%;left:-7%;bottom:14%}.buyer{width:38%;left:45%;bottom:14%}.speech{left:57%;top:53%}.judgment{left:39%;top:43%}.target{width:76px;height:76px}.invitation{margin-top:25%}.name{font-size:30px}.pause{right:14px;top:14px}}
@media(prefers-reduced-motion:reduce){.flag{animation:none}.buyer{will-change:auto}}


.shaft{position:absolute;z-index:7;pointer-events:none;aspect-ratio:940/60;background:url("assets/sprites/serving-props.png") 10.07% 49.79%/163.4% 1706.7% no-repeat;transform:translateY(-50%)}
.rotor{position:absolute;inset:0;z-index:6;pointer-events:none;transform-style:preserve-3d;will-change:transform}
.dessert{position:absolute;width:5%;aspect-ratio:320/585;background:url("assets/sprites/serving-props.png") 91.3% 50.1%/480% 175% no-repeat}
.attached{z-index:6}
@media(max-width:600px){.dessert{width:7%}}