body{font-family:Mali,cursive;font-style:normal;font-weight:400}#app{color:#000;text-align:center;background-blend-mode:lighten;box-sizing:border-box;z-index:1;background-color:#ffffff80;background-image:url(../assets/hatchbg8-elevated.webp);background-position:50%;background-repeat:no-repeat;background-size:cover;flex-direction:column;justify-content:space-between;align-items:center;width:100dvw;height:100dvh;transition:background-color .3s;display:flex;position:absolute;top:0;left:0;overflow:hidden}#app.night{background-color:#fff0}#game{border:none;position:fixed;inset:0}.name-title{white-space:pre;z-index:1;align-items:center;gap:.25em;font-size:2.5em;font-weight:700;transition:transform .3s;display:flex;position:fixed;top:2vh;left:50%;transform:translate(-50%)}.name-title.collapsed{transform:translate(-50%,-10rem)}#fox_name_container{color:#fff}#dragon_name_container img{filter:brightness(0)}.name-title .edit-button{height:1.2em;display:none}#stars{pointer-events:none;margin-top:2vh;position:fixed;top:calc(2vh + 3em);left:50%;transform:translate(-50%)}.star-container{background:#00000080;border-radius:15px;gap:1rem;padding:1rem;transition:transform .3s cubic-bezier(.34,1.56,.64,1) .5s;display:flex;position:relative;overflow:hidden;transform:scale(1)}@starting-style{.star-container{transform:scale(0)}}.star{width:50px;height:50px;transition:transform .3s,margin .5s;position:relative}.star svg{width:100%;height:100%;transition:stroke .5s}.star.disabled{margin-right:-4.2rem}.star.disabled path{stroke:gray}.star path{stroke:gold;stroke-width:2px;fill:#0000;transition:fill .5s}.star.filled path{fill:gold}.star.fill-anim{animation:.5s cubic-bezier(.36,0,.66,-.56) bounce,.5s linear .5s rotate}.sparkle{pointer-events:none;background-color:gold;width:4px;height:4px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.sparkle:before{content:"";background:inherit;width:100%;height:100%;position:absolute;transform:rotate(45deg)}@keyframes bounce{0%,to{transform:scale(1)}50%{transform:scale(1.5)}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes sparkleAnim{0%{opacity:1;transform:translate(-50%,-50%)rotate(0)scale(0)}to{transform:translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) rotate(180deg) scale(1);opacity:0}}.thought-bubble-container{pointer-events:none;justify-content:space-between;align-items:center;width:100%;height:20vh;display:flex;position:fixed;top:50%;left:0;transform:translateY(-50%)}.thought-bubble-wrapper{position:fixed;top:30%;left:25%;transform:translate(-50%,-50%)}.thought-bubble{background:#ffffff80;border-radius:50%;justify-content:center;align-items:center;width:100px;height:100px;animation:.7s cubic-bezier(.645,.045,.355,1) forwards zoom-in;display:flex;position:relative;transform:scale(0);box-shadow:0 13px 36px -10px #0000004d}.thought-bubble:before,.thought-bubble:after{content:"";background:#ffffffe6;border-radius:50%;animation:.8s cubic-bezier(.645,.045,.355,1) .2s forwards zoom-in;position:absolute;transform:scale(0)}.thought-bubble:before{width:25px;height:25px;bottom:-20px;right:10px}.thought-bubble:after{width:15px;height:15px;animation-delay:.4s;bottom:-30px;right:0}.candy-gif{opacity:0;border-radius:5px;width:80px;height:80px;animation:.3s .7s forwards fade-in}@keyframes zoom-in{to{transform:scale(1)}}@keyframes fade-in{to{opacity:1}}.zzz-container{justify-content:flex-end;align-items:center;width:100px;height:100px;display:flex;position:fixed;top:70%;right:50%;transform:translate(50%,-50%)}.z{opacity:0;font-family:Arial,sans-serif;font-weight:700;animation:3s ease-in-out infinite moveZ;position:absolute}.z1{font-size:20px;animation-delay:0s}.z2{font-size:30px;animation-delay:1s}.z3{font-size:40px;animation-delay:2s}@keyframes moveZ{0%{opacity:0;transform:translate(0)scale(.5)}50%{opacity:1;transform:translate(100px,-100px)scale(1)}to{opacity:0;transform:translate(200px,-200px)scale(1.5)}}#player-container{pointer-events:none;justify-content:center;align-items:center;width:45vh;height:45vh;display:flex;position:fixed;bottom:5rem;left:50%;transform:translate(-50%)}#player-container:after{content:"";background-color:#0003;border-radius:50%;width:9rem;height:2rem;position:absolute;top:75%;left:55%;transform:translate(-50%,-50%);box-shadow:0 0 1rem .5rem #0003}#player-container>div{z-index:1}.game-button{white-space:pre;z-index:999;justify-content:center;align-items:center;width:200px;height:60px;font-size:22px;transition:width .3s,height .3s,background-color .3s;display:flex;position:fixed;bottom:5rem;left:50%;transform:translate(-50%)}.game-button.big{width:230px;height:80px}.button:not(:disabled):hover{background-color:#45a049}.button:disabled{filter:grayscale();cursor:default}.purchase-button{transform-origin:50%;width:calc(100% - 40px);height:60px;font-size:22px;transition:transform .3s cubic-bezier(.34,1.56,.64,1) .3s,background-color .3s;position:absolute;top:calc(2rem + 50px);left:50%;transform:translate(-50%)scale(1)}@starting-style{.purchase-button{transform:translate(-50%)scale(0)}}.purchase-button:hover{background-color:#45a049}.game-container{text-align:center;margin-top:50px}#gameFrame{border:none;width:800px;height:600px;margin-top:20px;display:none}.hidden{visibility:hidden}.modal-overlay{z-index:1000;opacity:0;visibility:hidden;background-color:#00000080;justify-content:center;align-items:center;transition:opacity .3s,visibility .3s;display:flex;position:fixed;inset:0}.modal-overlay.visible{opacity:1;visibility:visible}.modal-content{text-align:center;box-sizing:border-box;background-color:#ffffffd9;border-radius:30px;outline:.5rem solid #7a6faf;flex-direction:column;align-items:center;gap:20px;width:400px;max-width:80%;padding:20px;transition:transform 0s .3s;display:flex;position:relative;transform:scale(0)translateY(-75%);box-shadow:inset 0 .2rem #fff3,inset 0 -.2rem 0 .1rem #0003,inset 0 -.1rem 3rem 1rem #0003}.modal-overlay.visible .modal-content{transition:transform .3s cubic-bezier(.34,1.56,.64,1) .2s;transform:scale(1)translateY(0%)}.modal-content:before{content:"";background-color:#ffffff80;border-radius:50% 30% 60% 20%/70% 50% 50% 30%;width:4rem;height:2rem;position:absolute;top:.3rem;left:.4rem}.modal-content .close{box-sizing:border-box;width:2rem;height:2.1rem;text-shadow:none;background-color:#ff6464;border-color:#5d2120;align-self:flex-end;margin-top:-.5rem;margin-bottom:-1rem;margin-right:-.25rem;transition:background-color .3s;position:relative}.modal-content .close:hover{background-color:#ff8b64}.modal-image{object-fit:contain;width:150px;height:150px}.modal-text{margin:10px 0;font-size:18px}.modal-text.up{margin-top:-1rem}.modal-button{width:160px;height:60px;font-size:18px;transition:background-color .3s;position:relative}.modal-button:hover{background-color:#45a049}@media only screen and (height<=700px){.zzz-container{width:80px;height:80px;right:45%}}.button{color:#fff;text-shadow:.1rem .1rem .1rem #355e12;cursor:pointer;background-color:#a1d101;border:.2rem solid #355e12;border-radius:.75rem;padding-bottom:.5rem;box-shadow:inset 0 -.4rem 0 .1rem #0003,inset 0 -.3rem #0006,inset 0 .2rem #ffffff4d}.button:after{content:"";background-color:#fff6;border-radius:50%;width:.6rem;height:.2rem;position:absolute;top:.1rem;right:.2rem;transform:rotate(15deg)}.button:before{content:"";background-color:#fff6;border-radius:50%;width:.4rem;height:.2rem;position:absolute;top:.1rem;left:.2rem;transform:rotate(-20deg)}.input{color:#000;background-color:#fff;border:.2rem solid #355e12;border-radius:.75rem;outline:none;width:95%;padding:.5rem;font-size:1.5rem;transition:border-color .3s;box-shadow:inset 0 -.1rem 0 .1rem #0003}.input:focus{border-color:#a1d103}.input.error{border-color:#cd5050}.name-error-message{color:#fff;opacity:0;background-color:#cd5050;border-radius:.5rem;justify-content:center;align-items:center;height:0;margin-top:-1rem;padding:0 .5rem;transition:height .15s,opacity .15s;display:flex}.name-error-message.visible{opacity:1;height:3.75rem;transition:height .2s,opacity .2s .2s}.name-input{margin-top:1rem}.game-overlay{visibility:visible;opacity:1;z-index:1000;background-color:#000;width:100%;height:0%;position:absolute;bottom:0}.game-overlay.visible{visibility:hidden;opacity:0;height:100%;transition:height .3s,opacity .3s .3s,visibility 0s .6s}.skip-button,.tutorial-button{box-sizing:border-box;text-align:center;cursor:pointer;color:#fff;visibility:visible;z-index:999;background-color:#36aae2;border-color:#1c536e;border-radius:1.25rem;height:2.5rem;display:none;position:absolute;bottom:1rem;box-shadow:inset 0 -.2rem #0006}.tutorial-button{width:2.5rem;font-size:1.75rem;right:1rem}.skip-button{width:5rem;font-size:1.5rem;line-height:2.2rem;left:1rem}.skip-button:after,.tutorial-button:after{content:"";background-color:#fff6;border-radius:50%;width:.25rem;height:.25rem;position:absolute;top:.25rem;left:.6rem}.skip-button:before,.tutorial-button:before{content:"";background-color:#fff6;border-radius:50%;width:.15rem;height:.15rem;position:absolute;top:.5rem;left:.4rem}.promo-button{box-sizing:border-box;text-align:center;cursor:pointer;visibility:visible;z-index:999;background-image:url(../assets/jest.svg);background-position:50%;background-repeat:no-repeat;background-size:contain;width:3rem;height:3rem;transition:transform .3s;position:absolute;bottom:1rem;right:1rem;transform:scale(0)}.promo-button.visible{transform:scale(1)}.promo-button:after{content:"1";color:#fff;background-color:red;border-radius:50%;width:1.25rem;height:1.25rem;line-height:1.2rem;transition:transform .3s .2s;position:absolute;top:-.5rem;right:-.5rem;transform:scale(0)}.promo-button.visible:after{transform:scale(1)}#promoModal .title{margin-bottom:.5rem;font-size:1.5rem}#promoModal .hero{aspect-ratio:1;cursor:pointer;border-radius:1rem;width:60%}#promoModal .game-title{margin-top:-1rem;margin-bottom:-.5rem;font-size:1.5rem}.modal-text.title{margin-bottom:-1rem;font-size:2rem}.tutorial-1 img{width:70%;transform:translate(3rem,-1rem)rotate(-10deg)}.tutorial-1 p{width:70%}.tutorial-2{justify-content:center;align-items:center;display:flex}.tutorial-2 .jar{aspect-ratio:.8;background-color:#7a6fafb3;border-radius:.4rem;width:40%;position:relative}.tutorial-2 .jar img{width:70%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tutorial-2 .jar .candy img{width:30%}.tutorial-2 .jar .candy img:first-child{top:77%;left:30%}.tutorial-2 .jar .candy img:nth-child(2){filter:hue-rotate(140deg);top:79%;left:49%}.tutorial-2 .jar .candy img:nth-child(3){top:75%;left:69%}.tutorial-2 .jar .candy img:nth-child(4){filter:hue-rotate(286deg);top:67%;left:42%}.tutorial-2 .jar .candy img:nth-child(5){filter:sepia()saturate(2);top:63%;left:59%}.tutorial-3{justify-content:center;align-items:center;display:flex}.tutorial-3 .candy{aspect-ratio:1;background-color:#7a6fafb3;border-radius:50%;flex-shrink:0;width:30%;margin-left:1rem;position:relative}.tutorial-3 .candy:before{content:"!";color:#ffd649;background-color:#fcf697;border:.2rem solid #ffd649;border-radius:50%;width:1.75rem;height:1.75rem;font-size:1.75rem;font-weight:bolder;line-height:1.75rem;position:absolute;top:-.5rem;left:-.5rem}.tutorial-3 .candy img{width:50%;position:absolute;top:4%;right:4%}.tutorial-3 .candy .white{width:28%;position:absolute}.tutorial-3 .candy img:nth-child(2){top:65%;left:24%}.tutorial-3 .candy img:nth-child(3){top:43%;left:4%}.tutorial-3 .candy img:nth-child(4){top:61%;left:54%}.tutorial-3 .candy img:nth-child(5){top:37%;left:34%}.godrays{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.godray{background-image:linear-gradient(#fff,#0000);height:100%;position:absolute;top:-10rem;transform:rotate(-15deg)}.godray:first-child{width:8rem;animation:30s linear infinite fade;left:10%}.godray:nth-child(2){width:3rem;animation:30s linear -10s infinite fade;left:30%}.godray:nth-child(3){width:5rem;animation:30s linear -20s infinite fade;left:50%}.godray:nth-child(4){width:1.5rem;animation:30s linear -12s infinite fade;left:25%}.godray:nth-child(5){width:3rem;animation:30s linear -1s infinite fade;left:80%}.godray:nth-child(6){width:2.5rem;animation:30s linear -7s infinite fade;left:70%}@keyframes move{0%{left:-50%}to{left:120%}}@keyframes fade{0%{opacity:0}20%{opacity:.2}40%{opacity:0}to{opacity:0}}.console{box-sizing:border-box;z-index:20000;pointer-events:none;flex-direction:column;align-items:center;width:100%;padding:1rem;font-family:monospace;display:flex;position:fixed;top:0}.console .message{box-sizing:border-box;color:#fff;opacity:0;background-color:#000000b3;border-radius:.5rem;width:100%;max-height:0;margin-top:0;padding:0;transition:opacity .3s 3s,max-height .3s 3.3s,margin-top .3s 3.3s,padding .3s 3.3s;overflow:hidden}@starting-style{.console .message{opacity:1;max-height:10rem;margin-top:.5rem;padding:1rem}}.footer{box-sizing:border-box;z-index:999;background-color:#1595e5;border:.2rem solid #093d5d;border-bottom:0;border-top-left-radius:1rem;border-top-right-radius:1rem;justify-content:center;align-items:flex-end;width:calc(100% + 1rem);height:3.75rem;transition:transform .3s;display:flex;position:fixed;bottom:0;left:-.5rem;box-shadow:inset 0 .2rem #fff3,inset 0 -.1rem 3rem 1rem #0003}.footer.hidden{pointer-events:none;visibility:visible;transform:translateY(5rem)}.footer .tab{box-sizing:border-box;cursor:pointer;color:#fff;text-shadow:.05rem .05rem .05rem #000;background-color:#1595e5;border:.2rem solid #093d5d;border-bottom:0;border-top-left-radius:.5rem;border-top-right-radius:.5rem;flex-direction:column;justify-content:center;align-items:center;width:4.5rem;height:4.2rem;margin-left:-.1rem;margin-right:-.1rem;padding:.3rem;font-size:.875rem;line-height:.875rem;transition:all .3s;display:flex;position:relative;box-shadow:inset 0 .2rem #fff3,inset 0 -.1rem 3rem 1rem #0003}.footer .tab.active{background-color:#33b1ff;height:4.5rem;box-shadow:inset 0 .2rem #fff3,inset 0 -.1rem 3rem 1rem #0000}.footer .tab img{max-width:80%}.footer .tab.empty{cursor:default;pointer-events:none;opacity:0}.footer .tab.locked{pointer-events:none;transform:translateY(100%)}.footer .tab>:not(div){transition:opacity .3s}.footer .tab>*{pointer-events:none}.full-screen-popup{transform-origin:0 0;z-index:10000;background-color:#000000fa;width:200%;height:200%;transition:background-color .3s,opacity .3s;display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@starting-style{.full-screen-popup{background-color:#0000}}.full-screen-popup.visible{display:flex}.full-screen-popup.disabled{opacity:0}@scope(#inviteTutorial){:scope{flex-direction:column;justify-content:center;align-items:center}.header{width:21rem;height:6rem;position:relative}.star{position:absolute;left:-10rem}.left-side{opacity:1;width:5rem;height:100%;transition:scale .3s .3s,left .3s .4s,top .3s .4s,opacity .2s .4s;position:absolute;top:-1rem;left:0;scale:.8}@starting-style{.left-side{opacity:0;top:0;left:1rem;scale:0}}.right-side{opacity:1;width:5rem;height:100%;transition:scale .3s .3s,right .3s .4s,top .3s .4s,opacity .2s .4s;position:absolute;top:-1rem;right:0;scale:.8}@starting-style{.right-side{opacity:0;top:0;right:1rem;scale:0}}.left-side .star:first-child{opacity:1;width:.75rem;height:.75rem;top:4rem;left:1rem;rotate:-5deg}.left-side .star:nth-child(2){width:1.2rem;height:1.2rem;top:2.6rem;left:1.4rem;transform:rotate(-30deg)}.left-side .star:nth-child(3){width:1.5rem;height:1.5rem;top:1.2rem;left:.2rem;transform:rotate(-40deg)}.left-side .star:nth-child(4){width:1.8rem;height:1.8rem;top:.8rem;left:2.7rem;transform:rotate(50deg)}.left-side .star:nth-child(5){width:2rem;height:2rem;top:-1rem;left:.5rem;transform:rotate(0)}.left-side .star:nth-child(6){width:1.5rem;height:1.5rem;top:-1rem;left:3rem;transform:rotate(-30deg)}.right-side .star:first-child{width:.75rem;height:.75rem;top:4rem;left:3rem;transform:rotate(-85deg)}.right-side .star:nth-child(2){width:1.25rem;height:1.25rem;top:2.8rem;left:1.5rem;transform:rotate(-110deg)}.right-side .star:nth-child(3){width:1.25rem;height:1.25rem;top:1.5rem;left:0;transform:rotate(0)}.right-side .star:nth-child(4){width:1.7rem;height:1.7rem;top:1rem;left:2rem;transform:rotate(0)}.right-side .star:nth-child(5){width:1rem;height:1rem;top:.5rem;left:4.6rem;transform:rotate(-140deg)}.right-side .star:nth-child(6){width:1.3rem;height:1.3rem;top:-1rem;left:3.5rem;transform:rotate(-160deg)}.right-side .star:nth-child(7){width:2rem;height:2rem;top:-1rem;left:.5rem;transform:rotate(0)}.texts{flex-direction:column;justify-content:center;align-items:center;gap:2rem;width:100%;height:100%;display:flex;position:absolute;top:-1rem;scale:.5}.texts>.howto{opacity:1;transition:scale .3s,opacity .15s .1s;scale:1}@starting-style{.texts>.howto{opacity:0;scale:0}}.texts>.pets{opacity:1;transition:scale .3s .1s,opacity .15s .2s;scale:1}@starting-style{.texts>.pets{opacity:0;scale:0}}.header>.pets{justify-content:space-between;align-items:center;width:26rem;display:flex;position:absolute;top:-1.75rem;left:-3rem;scale:.55}.header>.pets>img:first-child{opacity:1;transition:scale .3s .2s,opacity .15s .3s,translate .5s .2s;translate:0;scale:1}@starting-style{.header>.pets>img:first-child{opacity:0;translate:3rem;scale:0}}.header>.pets>img:nth-child(2){opacity:1;transition:scale .3s .15s,opacity .15s .25s,translate .5s .15s;translate:0;scale:1}@starting-style{.header>.pets>img:nth-child(2){opacity:0;translate:-3rem;scale:0}}.one{gap:1.5rem;width:21rem;transition:opacity .3s .6s;display:flex}@starting-style{.one{opacity:0}}.one>.expl{flex-direction:column;gap:.5rem;width:50%;display:flex}.one>.expl>.button{text-align:center;height:2.6rem;box-shadow:none;background-color:#fdea15;background-image:linear-gradient(120deg,#fab602,#fdea15,#fab602);border:0;border-bottom:.3rem solid #e78507;border-radius:1rem/1rem 1rem 1.3rem 1.3rem;font-size:1.2rem;line-height:3rem;box-shadow:inset 0 0 .2rem #fff}.one>img{align-self:flex-end;height:50%;margin-top:1rem;transition:opacity .3s .7s,transform .3s .7s}@starting-style{.one>img{opacity:0;transform:translate(-1rem,-.5rem)rotate(-10deg)}}.two{justify-content:flex-end;gap:1.5rem;width:21rem;margin-top:1rem;transition:opacity .3s .8s;display:flex}@starting-style{.two{opacity:0}}.two>img{align-self:flex-end;height:40%;margin-top:2rem;transition:opacity .3s .9s,transform .3s .9s;transform:scaleX(-1)}@starting-style{.two>img{opacity:0;transform:scaleX(-1)translate(-1rem,-.5rem)rotate(-10deg)}}.two>.expl{flex-direction:column;gap:.5rem;width:70%;display:flex}.two>.expl>.share{background-color:#fff;border-radius:1rem;padding:.4rem 1rem;font-size:.8rem;line-height:.9rem}.three{gap:1.5rem;width:21rem;margin-top:1rem;transition:opacity .3s 1s;display:flex}@starting-style{.three{opacity:0}}.three>img:first-child{height:3rem}.three>img:nth-child(2){align-self:center;height:60%;transition:opacity .3s 1s,transform .3s 1s;transform:rotate(30deg)}@starting-style{.three>img:nth-child(2){opacity:0;transform:translate(-1rem,-.5rem)rotate(20deg)}}.four{flex-direction:column;justify-content:center;align-items:center;width:21rem;transition:opacity .3s 1.2s;display:flex}@starting-style{.four{opacity:0}}.four>img:first-child{height:8rem}.four>img:nth-child(2){height:3rem}:scope>.button{margin-top:1.5rem;padding:.5rem 2rem 1rem;font-size:1.5rem;transition:opacity .3s 2s,scale .2s 2s}@starting-style{:scope>.button{opacity:0;scale:0}}}@media (height<=730px){#inviteTutorial{scale:.9}}@media (height<=670px){#inviteTutorial{scale:.8}}@media (height<=600px){#inviteTutorial{scale:.7}}@scope(#foxUnlocked){:scope{flex-direction:column;justify-content:center;align-items:center}.button{padding:.5rem 2rem 1rem;font-size:1.5rem;transition:opacity .3s 2s,scale .2s 2s;position:fixed;bottom:calc(50% - 40vh)}@starting-style{.button{opacity:0;scale:0}}#fox-container{width:12rem;height:12rem;margin-top:1rem;transform:scale(-1.5,1.5)}.header{color:#fff;text-align:center;font-size:1.25rem;position:fixed;top:calc(50% - 40vh)}.title{font-size:2rem}}