@import "https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@600;700;800;900&display=swap";:root{color:#27354a;font-synthesis:none;background:#fff8f3;font-family:Nunito,system-ui,sans-serif}*{box-sizing:border-box}body{background:#fff8f3;margin:0;overflow:hidden}button{font:inherit;cursor:pointer;color:inherit;border:0}button:focus-visible{outline-offset:3px;outline:3px solid #8f82d9}.app{justify-content:center;height:100dvh;min-height:560px;display:flex}.screen{width:min(100%,520px);height:100%;padding:calc(22px + env(safe-area-inset-top)) 24px calc(22px + env(safe-area-inset-bottom));touch-action:none;position:relative;overflow:hidden}.home{text-align:center;flex-direction:column;align-items:center;display:flex}.decor{pointer-events:none;position:absolute;inset:0;overflow:hidden}.bubble,.outline,.drop{opacity:.38;position:absolute}.bubble{border:2px solid #cdeeff;border-radius:50%;width:13px;height:13px;animation:7s ease-in-out infinite float}.b1{top:21%;left:12%}.b2{width:9px;height:9px;animation-delay:-3s;top:31%;right:12%}.drop{font:900 28px Baloo 2;color:#69bfea;animation:8s ease-in-out infinite float}.d1{top:14%;right:22%}.d2{font-size:18px;animation-delay:-2s;bottom:20%;left:13%}.outline{border:2px solid #cdeeff;border-radius:8px 8px 15px 15px;width:36px;height:50px;bottom:17%;right:10%;transform:rotate(16deg)}.o2{width:22px;height:30px;top:38%;left:6%;transform:rotate(-20deg)}@keyframes float{50%{transform:translateY(-10px)rotate(7deg)}}.brand{z-index:1;margin-top:35px;line-height:.73}.brand div,.brand strong{letter-spacing:1px;font:800 54px/.9 "Baloo 2"}.brand div{color:#27354a}.brand strong{color:#69bfea;font-size:76px}.brand span{color:#8f82d9;letter-spacing:3px;margin-top:18px;font-size:11px;font-weight:900;display:block}.corner{right:21px;top:calc(22px + env(safe-area-inset-top));z-index:3;position:absolute}.sound{background:#fff;border-radius:50%;place-items:center;width:38px;height:38px;display:grid;box-shadow:0 4px 14px #27354a12}.sound svg{width:17px}.hero-glass{margin-top:62px;position:relative}.hero-glass .glass-shell{width:142px;height:182px}.hero-drop{color:#69bfea;font-size:24px;animation:2.5s ease-in-out infinite drip;position:absolute;top:-45px;left:61px}@keyframes drip{0%,35%{opacity:0;transform:translateY(-9px)}50%{opacity:1}75%,to{opacity:0;transform:translateY(23px)}}.idle{animation:3.2s ease-in-out infinite bob}@keyframes bob{50%{transform:translateY(-5px)rotate(1deg)}}.home-actions{z-index:1;width:min(100%,300px);margin-top:auto}.best-label{letter-spacing:2px;color:#8f82d9;margin-bottom:15px;font-size:11px;font-weight:900}.best-label b{color:#27354a;letter-spacing:0;margin-top:5px;font-size:18px;display:block}.primary,.secondary{letter-spacing:1px;border-radius:18px;justify-content:center;align-items:center;gap:9px;width:100%;height:58px;font-weight:900;display:flex}.primary{color:#fff;background:#69bfea;transition:all .15s;box-shadow:0 9px #4ca7d5,0 15px 25px #69bfea38}.primary:active{transform:translateY(5px);box-shadow:0 4px #4ca7d5}.primary svg,.secondary svg{width:18px}.text-button{color:#8f82d9;letter-spacing:1.5px;background:0 0;justify-content:center;align-items:center;gap:7px;margin:19px auto 0;font-size:12px;font-weight:900;display:flex}.text-button svg{width:17px}.game{background:#fff8f3;flex-direction:column;align-items:center;display:flex}.game-top{justify-content:space-between;align-items:center;width:100%;display:flex;position:relative}.icon-btn{background:#fff;border-radius:50%;place-items:center;width:40px;height:40px;display:grid;box-shadow:0 4px 12px #27354a10}.icon-btn svg{width:18px}.top-stat{text-align:center;min-width:80px;margin-left:34px}.top-stat.right{margin-left:0;margin-right:5px}.top-stat small{letter-spacing:2px;color:#8f82d9;font-size:9px;font-weight:900;display:block}.top-stat b{font:800 25px Baloo 2;line-height:1.1;display:block}.game-meta{letter-spacing:1.5px;color:#8f82d9;justify-content:space-between;align-items:center;width:90%;margin-top:13px;font-size:11px;font-weight:900;display:flex}.game-meta b{color:#27354a;font-size:16px}.game-meta .hot{color:#f26b6b;animation:.7s ease-in-out infinite alternate hot}@keyframes hot{to{transform:scale(1.05)}}.hearts{gap:5px;display:flex}.hearts svg{color:#f26b6b;width:17px;height:17px}.hearts .empty{color:#d9d1cf}.round-tag{color:#8f82d9;letter-spacing:2px;text-align:center;height:42px;margin-top:20px;font-size:10px;font-weight:900}.round-tag em{color:#f26b6b;margin-top:4px;font-size:10px;font-style:normal;animation:.3s fadein;display:block}@keyframes fadein{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.playfield{touch-action:none;flex:1;justify-content:center;align-items:center;width:100%;display:flex;position:relative}.glass-shell{background:#ffffff4f;border:5px solid #fff;border-top-width:8px;border-radius:17px 17px 28px 28px;width:188px;height:266px;transition:transform .25s;position:relative;overflow:hidden;box-shadow:0 15px 28px #69bfea1e,inset 0 0 0 2px #cdeeffb8}.glass-shell.tall{width:166px;height:315px}.glass-shell.wide{width:235px;height:220px}.glass-shell.tapered{clip-path:polygon(9% 0,91% 0,78% 100%,22% 100%);box-shadow:none;background:#fff;border:0;border-radius:0;padding:6px}.glass-shell.tapered .glass-inner{border-radius:11px 11px 25px 25px}.glass-shell.pouring{transform:rotate(-1deg)scale(1.01)}.glass-inner{background:#ffffff40;border-radius:11px 11px 21px 21px;width:100%;height:100%;position:relative;overflow:hidden}.glass-shine{opacity:.65;background:#fff;border-radius:5px;width:5px;height:42%;position:absolute;top:18px;left:18px}.target{z-index:3;background:#f26b6b;border-radius:5px;height:5px;transition:bottom .1s linear;position:absolute;left:10px;right:10px;box-shadow:0 0 0 4px #f26b6b24,0 2px 5px #f26b6b45}.target:before{content:"TARGET";color:#f26b6b;letter-spacing:1px;font-size:9px;font-weight:900;position:absolute;top:-22px;right:-2px}.target.faded{opacity:0;transition:opacity .8s}.liquid{background:#69bfea;transition:height 80ms linear;position:absolute;bottom:0;left:0;right:0;box-shadow:inset 0 8px 13px #fff3}.wave{background:#9cdbf5;border-radius:50%;height:14px;animation:1.1s ease-in-out infinite wave;position:absolute;top:-6px;left:-10%;right:-10%}.pouring .wave{animation-duration:.55s}@keyframes wave{50%{height:18px;transform:translate(7px)rotate(2deg)}}.stream{background:#69bfea;border-radius:10px;width:13px;height:115px;animation:.45s ease-in-out infinite alternate stream;position:absolute;top:calc(50% - 185px);left:calc(50% - 6px);box-shadow:0 0 0 4px #cdeeff6b}.stream i{background:#69bfea;border-radius:50%;width:7px;height:7px;position:absolute;top:31%;left:-10px}.stream i:nth-child(2){top:54%;left:18px}.stream i:nth-child(3){top:74%;left:-8px}@keyframes stream{to{opacity:.85;transform:scaleX(.8)}}.tap-hint{color:#8f82d9;letter-spacing:2px;font-size:11px;font-weight:900;animation:1.6s ease-in-out infinite pulse;position:absolute;bottom:12%}@keyframes pulse{50%{opacity:.45}}.game-sound{bottom:calc(18px + env(safe-area-inset-bottom));position:absolute;right:20px}.result{z-index:5;text-align:center;flex-direction:column;align-items:center;animation:.5s cubic-bezier(.2,.8,.3,1) resultpop;display:flex;position:absolute;top:42%}@keyframes resultpop{0%{opacity:0;transform:translateY(17px)scale(.7)}to{opacity:1;transform:none}}.result-word{font:800 43px/1 Baloo 2;color:#f26b6b;text-shadow:0 4px #fff}.result.great .result-word{color:#8f82d9}.result.good .result-word,.result.ok .result-word{color:#67c69a}.result.miss .result-word{color:#27354a}.result b{font:800 20px Baloo 2;color:#27354a}.result span{color:#67c69a;margin-top:2px;font-size:15px;font-weight:900}.result small{color:#f26b6b;letter-spacing:2px;font-size:11px;font-weight:900}.celebrate .glass-shell{animation:.6s ease-in-out celebrate}@keyframes celebrate{30%{transform:scale(1.06)rotate(-2deg)}60%{transform:scale(.98)rotate(2deg)}}.modal-shade{z-index:10;background:#27354a2b;place-items:center;padding:24px;display:grid;position:absolute;inset:0}.modal{text-align:center;background:#fff8f3;border-radius:30px;width:min(100%,350px);padding:30px 26px 25px;position:relative;box-shadow:0 22px 60px #27354a2b}.close{background:#fff;border-radius:50%;place-items:center;width:31px;height:31px;display:grid;position:absolute;top:18px;right:18px}.close svg{width:16px}.modal-sprinkle{color:#69bfea;margin:0 auto 3px;font-size:30px}.modal small,.over-card>small{letter-spacing:2px;color:#8f82d9;font-size:10px;font-weight:900}.modal h2{font:800 35px/1 Baloo 2;margin:5px 0 20px}.modal .primary,.modal .secondary{height:50px}.secondary{color:#27354a;background:#cdeeff;margin-top:12px}.steps{text-align:left;gap:12px;margin-bottom:16px;display:grid}.steps>div{grid-template-columns:34px 1fr;align-items:center;column-gap:10px;display:grid}.steps b{color:#fff;background:#69bfea;border-radius:50%;grid-row:span 2;place-items:center;width:30px;height:30px;display:grid}.steps span{letter-spacing:1px;font-size:12px;font-weight:900}.steps small{color:#7e8795;letter-spacing:0;font-size:11px;font-weight:700}.mini-demo{place-items:center;height:130px;margin:0 0 12px;display:grid}.mini-demo .glass-shell{width:82px;height:112px}.mini-demo .target:before{display:none}.over{place-items:center;display:grid}.over-card{text-align:center;width:min(100%,360px)}.over-icon{color:#f26b6b;font-size:44px;animation:2.5s infinite float}.over-card h1{font:800 42px/1 Baloo 2;color:#27354a;margin:5px 0 21px}.final-score{margin:0 auto 25px}.final-score span{color:#8f82d9;letter-spacing:2px;font-size:10px;font-weight:900;display:block}.final-score b{font:800 49px/1 Baloo 2;display:block}.final-grid{grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:28px;display:grid}.final-grid div{border-top:1px solid #eadfd9;padding:12px 2px}.final-grid small{color:#8f82d9;letter-spacing:1px;font-size:8px;font-weight:900;display:block}.final-grid b{font:800 20px Baloo 2}.over-card .text-button{margin-top:20px}@media (height>=780px){.hero-glass{margin-top:80px}.glass-shell{height:300px}}@media (width>=600px){.screen{box-shadow:0 0 0 1px #eadfd955,0 0 70px #27354a0b}.app{background:#f5ece6}.brand{margin-top:50px}}.liquid{box-shadow:inset 0 10px 15px #fff5;background:linear-gradient(90deg,#58b4e2,#69bfea 48%,#58b4e2)!important}.wave{background:#b7e8fb;border:2px solid #fff;height:15px;top:-7px}.liquid-bubble{opacity:.7;background:#d9f4ff;border:1px solid #fff;border-radius:50%;width:6px;height:6px;animation:1.8s ease-in infinite bubble-up;display:block;position:absolute}.bubble-a{bottom:14%;left:22%}.bubble-b{width:4px;height:4px;animation-delay:1s;bottom:35%;left:70%}@keyframes bubble-up{0%{opacity:0;transform:translateY(12px)}35%{opacity:.75}to{opacity:0;transform:translateY(-42px)}}.pour-status{color:#69bfea;letter-spacing:1.5px;opacity:0;align-items:center;gap:7px;font-size:10px;font-weight:900;transition:all .2s;display:flex;position:absolute;top:7%;transform:translateY(5px)}.pour-status.visible{opacity:1;transform:none}.pour-status i{background:#69bfea;border-radius:50%;width:7px;height:7px;animation:.8s infinite alternate status-pulse;display:block;box-shadow:0 0 0 5px #cdeeff}@keyframes status-pulse{to{opacity:.55;transform:scale(.7)}}.stream{background:repeating-linear-gradient(#b7e8fb 0 12px,#69bfea 12px 23px);border-radius:8px;width:8px;animation:.42s linear infinite stream-fall;left:calc(50% - 4px);box-shadow:0 0 0 2px #cdeeffaa}.stream:after{content:"";background:#b7e8fb;border:2px solid #fff;border-radius:50%;width:32px;height:12px;animation:.35s ease-in-out infinite alternate splash;position:absolute;bottom:-7px;left:-12px}.stream i{background:#69bfea;width:8px;height:8px;animation:.7s linear infinite drop-fall;box-shadow:0 0 0 2px #cdeeff}@keyframes stream-fall{to{background-position-y:19px}}@keyframes drop-fall{0%{opacity:.2;transform:translateY(-9px)}30%{opacity:1}to{opacity:.15;transform:translateY(11px)}}@keyframes splash{to{opacity:.65;transform:scaleX(.7)}}.pour-status{background:#fff;border-radius:99px;padding:7px 11px;box-shadow:0 4px 12px #27354a12}.pour-source{z-index:2;background:#69bfea;border-radius:4px 4px 12px 12px;width:30px;height:16px;position:absolute;top:calc(50% - 205px);left:calc(50% - 15px);transform:rotate(-6deg);box-shadow:0 4px #4ca7d5}.pour-source:after{content:"";background:#69bfea;border-radius:0 0 10px 10px;width:18px;height:8px;position:absolute;bottom:0;right:-10px;transform:rotate(8deg)}.stream{clip-path:polygon(20% 0,80% 0,100% 95%,72% 100%,46% 92%,22% 100%,0 95%);background:repeating-linear-gradient(#d9f4ff 0 9px,#69bfea 9px 19px);border:0;border-radius:50% 50% 45% 45%;width:9px;height:115px;animation:.42s linear infinite stream-fall;left:calc(50% - 4px);box-shadow:0 0 0 2px #cdeeff66}.stream:before{content:"";background:#9cdef8;border-radius:50% 50% 48% 48%;width:19px;height:21px;animation:.5s ease-in-out infinite alternate drop-pulse;position:absolute;top:-18px;left:-5px}.stream:after{content:"";background:0 0;border:3px solid #b7e8fb;border-top-color:#fff;border-radius:50%;width:41px;height:13px;animation:.35s ease-in-out infinite alternate splash;position:absolute;bottom:-8px;left:-16px}.stream i{width:7px;height:10px;box-shadow:none;background:#69bfea;border-radius:50% 50% 55% 55%;animation:.7s linear infinite drop-fall}.stream i:first-child{top:25%;left:-16px}.stream i:nth-child(2){animation-delay:.2s;top:51%;left:15px}.stream i:nth-child(3){animation-delay:.4s;top:74%;left:-14px}@keyframes drop-pulse{to{transform:translateY(4px)scale(.75)}}