:root{color:#493728;background:#dff7ff;font-family:Hiragino Maru Gothic ProN,Yu Gothic,system-ui,sans-serif}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0}body{overflow:hidden}.drink-game{width:min(100%,760px);height:100svh;padding:max(6px,env(safe-area-inset-top)) max(7px,env(safe-area-inset-right)) max(7px,env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left));background:linear-gradient(#e9fbff,#ccefff);grid-template-rows:50px minmax(0,1fr);margin:auto;display:grid}.toolbar{z-index:30;align-items:center;gap:8px;display:flex}.toolbar__spacer{flex:1}.round-button{color:#fff;background:linear-gradient(#76cef4,#398fc8);border:3px solid #fff;border-radius:50%;place-items:center;width:44px;height:44px;padding:0;font:900 25px/1 system-ui;text-decoration:none;display:grid;box-shadow:0 4px #31739c}.drink-stage{touch-action:none;background:linear-gradient(#bdeaff 0 72%,#ffe6ad 72%);border:4px solid #ffffffd9;border-radius:28px;min-height:0;position:relative;overflow:hidden;box-shadow:0 7px #9bc8d5}.faucets{z-index:20;grid-template-columns:repeat(3,1fr);gap:9px;height:135px;display:grid;position:absolute;top:0;left:3%;right:3%}.faucet{--juice:#f34d70;position:relative}.faucet__pipe{border:13px solid #b6c7d0;border-top:0;border-radius:0 0 28px 28px;width:72px;height:66px;position:absolute;top:-8px;left:50%;transform:translate(-50%);box-shadow:inset 5px 0 #eaf5f8,4px 4px #7897a6}.faucet__pipe:after{content:"";background:linear-gradient(90deg,#8aa6b3,#e7f3f6,#829ba7);border-radius:7px;width:30px;height:20px;position:absolute;bottom:-12px;right:-14px}.faucet__lever{background:var(--juice);touch-action:none;border:5px solid #fff;border-radius:16px;width:42px;height:70px;padding:0;transition:transform .12s;position:absolute;top:20px;left:calc(50% - 54px);box-shadow:0 5px #4c443d40}.faucet__lever span{border:4px solid #fff;border-radius:50%;width:17px;height:17px;margin:auto;display:block}.faucet__lever.is-pulled{transform:translateY(24px)}.faucet__stream{background:linear-gradient(90deg,#fff9,var(--juice));opacity:0;border-radius:0 0 12px 12px;width:16px;height:0;transition:height .12s;position:absolute;top:62px;left:calc(50% + 24px)}.faucet.is-pouring .faucet__stream{opacity:.86;height:230px}.drink-scene{position:absolute;inset:118px 0 132px}.cup-wrap{--cup-tilt:0deg;width:220px;height:350px;transform:translateX(-50%) rotate(var(--cup-tilt));transform-origin:50% 78%;touch-action:none;transition:transform 80ms linear;position:absolute;top:12px;left:50%}.cup{clip-path:polygon(5% 0,95% 0,84% 100%,16% 100%);background:#e6f9ff3d;border:8px solid #ffffffd1;border-top-width:10px;border-radius:29px 29px 54px 54px;transition:filter .15s;position:absolute;inset:20px 8px 31px;overflow:hidden;box-shadow:inset 0 0 0 4px #57accd40,0 9px 8px #435a5d38}.cup.is-ready{filter:drop-shadow(0 0 15px #fff35c)}.cup__rim{border:7px solid #ffffffe6;border-radius:50%;width:96%;height:29px;position:absolute;top:8px;left:2%;box-shadow:0 4px #509cbc40}.cup__shine{background:linear-gradient(#ffffffc2,#ffffff14);border-radius:999px;width:18px;height:165px;position:absolute;top:55px;left:40px;transform:rotate(4deg)}.liquid{--liquid-color:#d2f2ff;--tilt:0deg;background:linear-gradient(90deg,color-mix(in srgb,var(--liquid-color) 78%,#fff),var(--liquid-color) 45%,color-mix(in srgb,var(--liquid-color) 78%,#734a38));opacity:.84;height:0;transform:rotate(var(--tilt));transform-origin:bottom;transition:height 80ms linear;position:absolute;bottom:-2%;left:-12%;right:-12%;overflow:visible}.liquid:before{background:color-mix(in srgb,var(--liquid-color) 80%,#fff);content:"";border-radius:50%;width:100%;height:25px;position:absolute;top:-12px;left:0;box-shadow:inset 0 -6px #ffffff2e}.liquid__shine{background:#ffffff2e;border-radius:999px;width:18px;height:60%;position:absolute;inset:15px auto auto 25%}.piece{z-index:3;display:block;position:absolute}.piece--boba{background:radial-gradient(circle at 33% 28%,#9b756a,#38222c 70%);border-radius:50%;width:18px;height:18px;box-shadow:0 3px 2px #23121940}.piece--jelly{background:linear-gradient(135deg,#fff9,#6fe58b 35%,#2fb668);border-radius:6px;width:25px;height:21px;box-shadow:inset -4px -3px #1674442e}.piece--ice{background:linear-gradient(135deg,#fffc,#6ad8f480);border:3px solid #ffffffbf;border-radius:7px;width:29px;height:29px;box-shadow:inset -5px -4px #329ecb24}.ingredient-tray{z-index:20;background:linear-gradient(#fff0bc,#f3ba63);border:5px solid #c78038;border-radius:25px;grid-template-columns:repeat(3,1fr);gap:10px;height:124px;padding:10px;display:grid;position:absolute;bottom:2%;left:3%;right:3%;box-shadow:inset 0 7px #ffffff73,0 6px #9c6030}.ingredient{aspect-ratio:1;touch-action:none;background:#fff9e9;border:5px solid #fff;border-radius:50%;place-items:center;width:min(100%,92px);margin:auto;padding:0;display:grid;box-shadow:0 5px #59372233}.ingredient span{display:block}.ingredient--boba span{background:radial-gradient(circle at 30% 28%,#a98276,#38222c 68%);border-radius:50%;width:52px;height:52px}.ingredient--jelly span{background:linear-gradient(135deg,#eaffed,#6fe58b 35%,#2fb668);border-radius:12px;width:55px;height:46px;box-shadow:inset -8px -7px #1674442e}.ingredient--ice span{background:linear-gradient(135deg,#fff,#9be6f7 55%,#55c0e5);border:5px solid #fff;border-radius:11px;width:53px;height:53px;box-shadow:inset -7px -6px #329ecb26}.ingredient.is-dragging{z-index:60;pointer-events:none;filter:drop-shadow(0 9px 5px #362a233d);width:86px;position:absolute;transform:scale(1.08)}.tilt-button{z-index:25;color:#fff;background:linear-gradient(#ffd95c,#efa52b);border:5px solid #fff;border-radius:50%;width:76px;height:76px;padding:0;display:none;position:absolute;bottom:7%;right:6%;box-shadow:0 6px #bd7520}.tilt-button.is-visible{animation:1.1s ease-in-out infinite invite;display:block}.tilt-button__phone{font:900 48px/1 system-ui;display:inline-block;rotate:-18deg}.tilt-button__arrow{font:900 29px/1 system-ui;position:absolute;bottom:1px;right:2px}.splashes{pointer-events:none;position:absolute;inset:0}.splashes i{--drop-color:#f45b76;--drop-x:1;background:var(--drop-color);border-radius:50% 50% 55% 55%;width:13px;height:22px;animation:.62s ease-out forwards spill;position:absolute;top:45px;left:50%}.drink-stage.is-drinking .faucets,.drink-stage.is-drinking .ingredient-tray{opacity:.25;pointer-events:none}.drink-stage.is-drinking .drink-scene{inset:55px 0 20px}.drink-stage.is-drinking .cup-wrap{top:20px;scale:1.08}.drink-stage.is-empty .cup{animation:.5s ease-out empty-cheer}.cup.is-bouncing{animation:.35s ease-out bounce}.round-button:focus-visible,.faucet__lever:focus-visible,.ingredient:focus-visible,.tilt-button:focus-visible{outline-offset:3px;outline:5px solid #245b9e}@keyframes invite{50%{filter:drop-shadow(0 0 10px #fff36b);transform:scale(1.08)rotate(-7deg)}}@keyframes spill{to{opacity:0;transform:translate(calc(var(--drop-x) * 105px),130px) rotate(140deg)}}@keyframes bounce{50%{transform:translateY(-7px)}}@keyframes empty-cheer{50%{filter:drop-shadow(0 0 18px #fff36b);transform:scale(1.03)}}@media (height<=660px){.faucets{transform-origin:top;height:108px;scale:.86}.drink-scene{inset:92px 0 116px}.cup-wrap{transform-origin:50% 60%;top:-4px;scale:.82}.ingredient-tray{height:108px}.ingredient{max-width:76px}.tilt-button{width:66px;height:66px}.drink-stage.is-drinking .cup-wrap{top:-20px;scale:.9}}@media (width<=370px){.faucets{left:0;right:0}.cup-wrap{scale:.9}.ingredient-tray{gap:5px;padding:7px}}:root .tilt-button.is-visible{animation-name:invite-stable}@keyframes invite-stable{50%{filter:drop-shadow(0 0 13px #fff36b);box-shadow:0 6px #bd7520,0 0 0 8px #fff36b5c}}html .tilt-button.is-visible{filter:drop-shadow(0 0 9px #fff36b);animation:none}html body .drink-game .drink-stage .tilt-button.is-visible{filter:drop-shadow(0 0 9px #fff36b);animation:none!important}.drink-stage .faucets{gap:2px;width:min(68%,220px);left:50%;right:auto;transform:translate(calc(-50% - 5px))}.drink-stage .liquid{background:linear-gradient(90deg,color-mix(in srgb,var(--liquid-color) 84%,#fff),var(--liquid-color) 48%,color-mix(in srgb,var(--liquid-color) 88%,#ffef9f));opacity:.9}.piece.is-dropping{animation:.58s cubic-bezier(.22,.75,.38,1.15) both ingredient-drop}@keyframes ingredient-drop{0%{opacity:.25;translate:0 -230px;scale:1.35}68%{opacity:1;translate:0 10px;scale:.94}to{translate:0;scale:1}}.drink-stage .cup-wrap{width:min(92%,330px);transition:none;transform:translate(-50%)}.cup-overflow{z-index:5;pointer-events:none;position:absolute;inset:0}.cup-overflow i{background:linear-gradient(90deg,color-mix(in srgb,var(--liquid-color) 72%,#fff),var(--liquid-color));opacity:0;filter:drop-shadow(0 3px 2px #5050502e);border-radius:0 0 12px 12px;width:15px;height:0;position:absolute;top:39px}.cup-overflow i:first-child{left:21px}.cup-overflow i:last-child{right:21px}.drink-stage.is-overflowing .cup-overflow i{opacity:.92;height:142px;animation:.72s ease-in-out infinite alternate overflow-run}.drink-stage.is-overflowing .cup-overflow i:last-child{animation-delay:-.28s}.splashes i{left:var(--drop-left,50%)}@keyframes overflow-run{0%{border-radius:0 0 50% 50%;height:34px}55%{height:108px}to{width:11px;height:156px}}.drink-pour{z-index:8;pointer-events:none;opacity:0;position:absolute;inset:0}.drink-pour i{background:linear-gradient(90deg,color-mix(in srgb,var(--liquid-color) 70%,#fff),var(--liquid-color) 62%,color-mix(in srgb,var(--liquid-color) 82%,#ffe98f));filter:drop-shadow(0 5px 3px #50505033);transform-origin:top;border-radius:45% 45% 55% 55%;width:25px;height:190px;animation:.24s ease-in-out infinite alternate drink-stream;position:absolute;top:36px}.drink-pour b{background:var(--liquid-color);border-radius:50%;width:16px;height:28px;animation:.5s linear infinite drink-drop;position:absolute;top:31px}.drink-pour b:last-child{animation-delay:-.24s}.drink-stage.is-sensor-pouring .drink-pour{opacity:.94}.drink-stage.is-sensor-pouring-left .drink-pour{--drink-x:-150px;--drink-y:-86px}.drink-stage.is-sensor-pouring-left .drink-pour i{left:14px;transform:rotate(120deg)}.drink-stage.is-sensor-pouring-left .drink-pour b{left:9px}.drink-stage.is-sensor-pouring-left .drink-pour b:last-child{left:29px}.drink-stage.is-sensor-pouring-right .drink-pour{--drink-x:150px;--drink-y:-86px}.drink-stage.is-sensor-pouring-right .drink-pour i{right:14px;transform:rotate(-120deg)}.drink-stage.is-sensor-pouring-right .drink-pour b{right:9px}.drink-stage.is-sensor-pouring-right .drink-pour b:last-child{right:29px}@keyframes drink-stream{to{width:29px;height:208px}}@keyframes drink-drop{to{opacity:0;translate:var(--drink-x) var(--drink-y);scale:.55}}