@font-face{font-family:Fredoka;font-style:normal;font-display:swap;font-weight:400;src:url(./fredoka-latin-400-normal-17JuUzdy.woff2)format("woff2"),url(./fredoka-latin-400-normal-DbXSrOeS.woff)format("woff")}@font-face{font-family:Fredoka;font-style:normal;font-display:swap;font-weight:600;src:url(./fredoka-latin-600-normal-C4zohCW5.woff2)format("woff2"),url(./fredoka-latin-600-normal-CcrEjrB4.woff)format("woff")}@font-face{font-family:Fredoka;font-style:normal;font-display:swap;font-weight:700;src:url(./fredoka-latin-700-normal-BOIZVyIN.woff2)format("woff2"),url(./fredoka-latin-700-normal-C8FeHd3X.woff)format("woff")}:root{--ink:#4a3570;--ink-soft:#7a66a3;--lav:#efe4ff;--lav-2:#dccbff;--pink:#ffd3ea;--mint:#c9f5e6;--sky:#d3ebff;--card:#fffaf3;--violet:#8a5cf0;--violet-deep:#6a3fd1;--radius:22px;--tap:56px;color:var(--ink);font-family:Fredoka,Nunito,Trebuchet MS,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--lav);overscroll-behavior:none;-webkit-text-size-adjust:100%}button{font:inherit;color:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:pointer}button:disabled{cursor:default}:focus-visible{outline-offset:3px;border-radius:16px;outline:4px solid #3b82f6}.app{height:100%;min-height:100dvh;padding:max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));-webkit-user-select:none;user-select:none;background-color:#0000;background-image:radial-gradient(circle at 12% 18%,#ffd3eae6 0 16%,#0000 34%),radial-gradient(circle at 88% 14%,#d3ebfff2 0 14%,#0000 32%),radial-gradient(circle at 80% 92%,#c9f5e6f2 0 16%,#0000 36%),radial-gradient(circle at 18% 95%,#fff0c8cc 0 10%,#0000 28%),linear-gradient(160deg,#f3eaff,#e9defc);background-position:50%;background-repeat:repeat,repeat,repeat,repeat,repeat;background-size:cover;background-attachment:scroll,scroll,scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box,border-box;grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(6px,1.4vh,14px);display:grid;overflow:hidden}.top{min-height:var(--tap);align-items:center;gap:12px;display:flex}.title{letter-spacing:.5px;color:var(--violet-deep);text-shadow:0 3px #fff,0 6px 14px #8a5cf040;margin:0;font-size:clamp(26px,4.2vh,40px);font-weight:700}.proto-badge{color:var(--ink-soft);background:#ffffffb3;border:2px dashed #b39ae6;border-radius:999px;padding:4px 10px;font-size:13px;font-weight:600}.sound{width:var(--tap);height:var(--tap);box-shadow:0 3px 0 var(--lav-2);background:#ffffffbf;border:0;border-radius:50%;place-items:center;margin-left:auto;display:grid}.sound .icon{width:28px;height:28px;color:var(--violet-deep)}.stage{grid-template-columns:minmax(210px,25%) minmax(0,1fr) minmax(150px,16%);align-items:stretch;gap:clamp(10px,2vw,24px);min-height:0;display:grid}.card{background:var(--card);text-align:center;border:3px solid #fff;border-radius:28px;align-self:center;margin-top:28px;padding:clamp(36px,6vh,52px) clamp(14px,2vw,22px) clamp(16px,3vh,26px);position:relative;box-shadow:0 6px #ead9c4,0 16px 30px #6a3fd126}.card-peek{position:absolute;top:-34px;left:50%;transform:translate(-50%)}.card-dots{justify-content:center;gap:8px;margin-bottom:6px;display:flex}.dot{background:#e7dcf7;border-radius:50%;width:12px;height:12px}.dot.done{background:#b79cf0}.dot.now{background:var(--violet);box-shadow:0 0 0 4px #8a5cf033}.card-title{margin:6px 0 10px;font-size:clamp(20px,3vh,28px);font-weight:700}.card-list{gap:10px;margin:0;padding:0;list-style:none;display:grid}.card-row{background:var(--ct);border:3px solid var(--ce);border-radius:18px;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:6px 12px 6px 6px;display:grid}.bottle-art.mini{width:clamp(36px,6vh,50px);height:auto}.card-cname{text-align:left;font-size:clamp(18px,2.6vh,24px);font-weight:600}.card-ml{white-space:nowrap;font-size:clamp(18px,2.6vh,24px)}.card-ml b{color:var(--cd);font-size:1.5em;font-weight:700}.card-target{font-size:clamp(26px,4vh,36px);font-weight:600}.card-target b{color:var(--violet-deep);font-size:2em;font-weight:700}.card-sub{color:var(--ink-soft);margin:4px 0 0;font-size:18px}.creature.placeholder{text-align:center;background:radial-gradient(circle at 35% 30%, #fff 0 12%, var(--cct) 60%, var(--cc));color:var(--ink);border:3px dashed #6a3fd173;border-radius:50%;place-items:center;display:grid}.creature-peek{width:68px;height:68px}.creature-peek.placeholder{animation:2.6s ease-in-out infinite peek}.peek-q{color:#fff;text-shadow:0 2px #6a3fd166;font-size:34px;font-weight:700}.creature-full{width:min(200px,26vh);height:min(200px,26vh)}.creature-full.placeholder{align-content:center;gap:4px;padding:10px}.creature-small{width:120px;height:120px}.creature-small.placeholder{align-content:center;padding:8px;font-size:15px}.ph-name{font-size:22px;font-weight:700}.ph-tag{color:var(--ink-soft);background:#ffffffbf;border-radius:999px;padding:2px 8px;font-size:12px;font-weight:600}img.creature{object-fit:contain}.center{grid-template-rows:auto minmax(0,1fr);justify-items:center;gap:6px;min-height:0;display:grid;position:relative}.pot{width:100%;height:100%;min-height:0;position:relative}.cauldron{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.scale-num{fill:var(--ink-soft);font-family:inherit;font-size:15px;font-weight:600}.layer.grow{transform-box:fill-box;transform-origin:50% 100%;animation:.55s cubic-bezier(.3,.8,.4,1) both grow}.surface,.level-arrow{transition:transform .55s cubic-bezier(.3,.8,.4,1)}.blend{transition:opacity .6s}.liquid.swirl{transform-origin:160px 260px;animation:.55s ease-in-out infinite swirl}.bubbles circle{opacity:0;animation:2.6s ease-in infinite rise}.bubbles.fast circle{animation-duration:.9s!important}.stream rect{transform-box:fill-box;transform-origin:50% 0;animation:.65s ease-out both stream}.stream .splash{animation:.5s ease-out .2s both splash}.stream .splash.s2{animation-delay:.28s}.pot.wobble{animation:.6s ease-in-out wobble}.pot.shake{animation:.4s ease-in-out shake}.bubble{min-height:52px;box-shadow:0 4px 0 var(--lav-2);text-align:center;background:#fff;border-radius:999px;flex-direction:column;justify-content:center;align-items:center;gap:2px;padding:8px 22px;font-size:clamp(18px,2.7vh,24px);font-weight:600;display:flex}.bubble.is-feedback{background:#fff4d9;animation:.35s ease-out pop;box-shadow:0 4px #f5d98e}.bubble-sub{color:var(--ink-soft);font-size:.78em;font-weight:400}.reveal{background:radial-gradient(circle,#ffffffeb 0 45%,#fff0 72%);flex-direction:column;justify-content:center;align-items:center;gap:clamp(8px,1.6vh,16px);animation:.4s ease-out both fadein;display:flex;position:absolute;inset:0}.reveal .creature{animation:.6s cubic-bezier(.2,1.6,.4,1) both popin}.reveal-title{text-align:center;margin:0;font-size:clamp(22px,3.4vh,32px);font-weight:600}.reveal-title b{color:var(--violet-deep)}.sparkles{pointer-events:none;width:0;height:0;position:absolute;top:42%;left:50%}.spark{width:26px;height:26px;margin:-13px;animation:.9s ease-out both burst;position:absolute}.side{flex-direction:column;align-self:center;gap:clamp(8px,1.6vh,14px);display:flex}.volume{border-radius:var(--radius);box-shadow:0 4px 0 var(--lav-2);background:#fff;justify-content:center;align-items:baseline;gap:6px;padding:8px 10px;display:flex}.volume-num{color:var(--violet-deep);font-variant-numeric:tabular-nums;font-size:clamp(40px,7vh,64px);font-weight:700;line-height:1}.volume-unit{color:var(--ink-soft);font-size:clamp(20px,3vh,28px);font-weight:600}.btn{min-height:clamp(var(--tap), 9vh, 76px);border-radius:var(--radius);border:0;justify-content:center;align-items:center;gap:10px;padding:0 18px;font-size:clamp(20px,3vh,26px);font-weight:600;transition:transform .12s,box-shadow .12s,opacity .2s;display:flex}.btn .icon{flex:none;width:1.2em;height:1.2em}.btn:active:not(:disabled){transform:translateY(3px)}.btn:disabled{opacity:.45}.btn-soft{color:var(--ink);box-shadow:0 5px 0 var(--lav-2);background:#fff}.btn-soft:active:not(:disabled){box-shadow:0 2px 0 var(--lav-2)}.btn-mix{background:linear-gradient(180deg, #a77cff, var(--violet));color:#fff;box-shadow:0 6px 0 var(--violet-deep);font-size:clamp(24px,3.6vh,32px);font-weight:700}.btn-mix:active:not(:disabled){box-shadow:0 2px 0 var(--violet-deep)}.btn-mix.ready{animation:1.6s ease-in-out infinite glow}.btn.big{min-height:72px;padding:0 32px}.shelf{background:linear-gradient(#ffffff8c,#fffc);border-radius:28px;justify-content:center;align-items:flex-end;gap:clamp(10px,2.4vw,28px);padding:10px clamp(10px,2vw,24px) 14px;display:flex;box-shadow:inset 0 -10px #dccbffcc}.bottle{border:3px solid var(--ce);background:var(--ct);width:clamp(110px,15vw,170px);min-height:120px;box-shadow:0 6px 0 var(--cs);border-radius:26px;flex-direction:column;align-items:center;gap:2px;padding:8px 6px;transition:transform .12s,box-shadow .12s;display:flex;position:relative}.bottle .bottle-art{width:clamp(56px,10vh,86px);height:auto;transition:transform .25s}.bottle:active:not(:disabled){box-shadow:0 2px 0 var(--cs);transform:translateY(4px)scale(.97)}.bottle.tipping .bottle-art{transform:rotate(-24deg)translateY(-6px)}.bottle.tipping{animation:.35s ease-out boing}.bottle:disabled{opacity:.55}.bottle-label{flex-direction:column;align-items:center;line-height:1.05;display:flex}.bottle-name{color:var(--ink-soft);font-size:clamp(15px,2.1vh,19px);font-weight:600}.bottle-ml{white-space:nowrap;font-size:clamp(20px,3vh,26px)}.bottle-ml b{color:var(--cd);font-size:1.3em;font-weight:700}.done{flex-direction:column;grid-row:2/4;justify-content:center;align-items:center;gap:28px;display:flex}.done h2{color:var(--violet-deep);margin:0;font-size:44px}.done-row{flex-wrap:wrap;justify-content:center;gap:24px;display:flex}@media (orientation:portrait){.stage{grid-template:"card side""pot pot"minmax(0,1fr)/1fr minmax(150px,34%)}.card{grid-area:card}.side{grid-area:side}.center{grid-area:pot}}@media (height<=600px) and (orientation:landscape){.card-peek{display:none}.card{margin-top:0;padding-top:14px}.bottle{min-height:0;padding:4px 6px}.bottle .bottle-art{width:44px}.btn{min-height:52px}.volume-num{font-size:36px}.card-list{gap:6px}}@keyframes grow{0%{transform:scaleY(0)}to{transform:scaleY(1)}}@keyframes stream{0%{opacity:1;transform:scaleY(0)}45%{opacity:1;transform:scaleY(1)}to{opacity:0;transform:scaleY(1)}}@keyframes splash{0%{opacity:0;transform:translateY(0)}30%{opacity:1}to{opacity:0;transform:translateY(-18px)}}@keyframes rise{0%{opacity:0;transform:translateY(0)}15%{opacity:.9}85%{opacity:.8}to{transform:translateY(var(--rise));opacity:0}}@keyframes swirl{0%,to{transform:skew(0)translate(0)}25%{transform:skew(5deg)translate(-6px)}75%{transform:skew(-5deg)translate(6px)}}@keyframes wobble{0%,to{transform:rotate(0)}20%{transform:rotate(-4deg)}45%{transform:rotate(3deg)}70%{transform:rotate(-2deg)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-8px)}75%{transform:translate(8px)}}@keyframes boing{0%{transform:scale(1)}40%{transform:scale(.93,1.05)}to{transform:scale(1)}}@keyframes glow{0%,to{filter:brightness()}50%{filter:brightness(1.12)drop-shadow(0 0 12px #a77cffb3)}}@keyframes peek{0%,to{transform:translateY(6px)}50%{transform:translateY(-4px)}}@keyframes pop{0%{transform:scale(.85)}70%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes popin{0%{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}@keyframes fadein{0%{opacity:0}to{opacity:1}}@keyframes burst{0%{opacity:1;transform:translate(0)scale(.3)}to{transform:translate(var(--dx), var(--dy)) scale(1) rotate(90deg);opacity:0}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}