#otoshi[data-v-7a280027]{position:fixed;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:2}#otoshi.user-can-interact-hammer[data-v-7a280027]{cursor:grab;cursor:-webkit-grab}#otoshi.user-can-interact-hammer.is-down[data-v-7a280027]{cursor:grabbing;cursor:-webkit-grabbing}#container[data-v-7a280027]{position:absolute;top:0;left:0}.log[data-v-7a280027]{position:absolute;bottom:0;left:0;width:100px;height:50px;z-index:99}.text[data-v-7a280027]{position:absolute;top:0;left:0;right:0;bottom:0;padding:.5em .5em .25em;font-size:30px;text-align:left;line-height:1;font-family:Nimbus Sans;text-transform:uppercase;color:#000}.bar[data-v-7a280027]{position:absolute;top:0;left:0;bottom:0;background:#fe0;mix-blend-mode:multiply}.home,.home .backdrop,.home .backdrop .pattern{position:absolute;z-index:1;top:0;left:0;right:0;bottom:0}.home .backdrop .pattern{-webkit-animation-name:tick;animation-name:tick;-webkit-animation-duration:60s;animation-duration:60s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear}@media(max-width:768px){.home .backdrop .pattern{-webkit-animation-duration:10s;animation-duration:10s}}.home .backdrop.backdrop-hatosan{background-color:#111}.home .backdrop.backdrop-hatosan .pattern{background-image:url(/images/face-white-repeat-2.png);background-size:200px auto;opacity:.05}.home .backdrop.backdrop-tutorial{background-color:#f5c3d1}.home .backdrop.backdrop-tutorial .pattern{background-image:url(/images/tutorial-pattern-pink.png);background-size:200px auto;opacity:.5}.home .backdrop.backdrop-checkerboard{background-color:#000}.home .backdrop.backdrop-checkerboard .pattern{-webkit-animation-name:tickDown;animation-name:tickDown;-webkit-animation-duration:1s;animation-duration:1s;background:repeating-conic-gradient(rgba(255,0,0,.8) 0 25%,rgba(0,0,255,.8) 0 50%) 50%/200px 200px;opacity:.1}@-webkit-keyframes tick{0%{background-position:0 0}to{background-position:200px 0}}@-webkit-keyframes tickDown{0%{background-position:0 0}to{background-position:0 200px}}@keyframes tickDown{0%{background-position:0 0}to{background-position:0 200px}}.logo{position:absolute;z-index:999;left:0;bottom:0;margin:1.5rem;width:15vw;margin-bottom:1.15rem}.logo img{opacity:.5}@media(max-width:768px){.logo{left:0;bottom:0;margin:1.25rem 1.2rem;width:50vw}}.logo-hatospecial{position:absolute;z-index:9999;top:0;left:0;right:0}.logo-hatospecial img.logo-hatodrop{position:absolute;left:0;margin:1rem;width:25vw}@media(max-width:768px){.logo-hatospecial img.logo-hatodrop{width:35vw}}.logo-hatospecial img.logo-special{position:absolute;right:0;margin:1rem;width:30vw}@media(max-width:768px){.logo-hatospecial img.logo-special{width:50vw}}.ticker{opacity:0;position:absolute;z-index:99;bottom:0;left:0;right:0;height:4rem;background-image:url(/images/christmasspecial.png);background-repeat:repeat-x;background-size:auto 90%;background-position:0;-webkit-animation-name:tick;animation-name:tick;-webkit-animation-duration:30s;animation-duration:30s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear}@keyframes tick{0%{background-position:0}to{background-position:100%}}img{display:block;pointer-events:none;max-width:100%}a{line-height:1.5;padding-top:.2em;text-decoration:none}.loading{z-index:99999999;background:#000}.loading,.loading .loading-background{position:absolute;top:0;left:0;right:0;bottom:0}.loading .loading-background{opacity:.7;background-image:url(/images/hato-store-logo-white.svg);background-repeat:no-repeat;background-position:50%;background-size:200px}.subtitle{position:absolute;z-index:99999;bottom:0;left:50%;transform:translateX(-50%);margin:2rem auto;padding:.75em 1em .5em;font-size:1.5vw;display:inline-block;background:#2dff3b;text-transform:uppercase;color:#000}@media(max-width:768px){.subtitle{font-size:4vw}}.toggle-about{cursor:pointer;position:absolute;z-index:99999;margin:1.2rem 1.5rem;bottom:0;right:0;margin-left:18vw}.toggle-about.about-active{z-index:999999999}.toggle-about div{opacity:.5;color:#000;height:2rem;width:2rem;font-size:1.4rem;text-align:center;line-height:2.3rem;border:1px solid #fff;background:#fff;border-radius:50%}.about{margin:auto;position:absolute;top:0;left:0;color:#fff;padding:0;background:rgba(0,0,0,.8);width:100%;height:100%;z-index:99999999}.about .main{position:absolute;z-index:9999;top:50%;left:50%;transform:translate(-50%,-50%);width:70vw;text-align:center;padding:3rem;background:#000;border-radius:2rem;border:2px solid #fff;max-width:100%}.about .main h3{margin-top:.75em;margin-bottom:.15em}.about .main h3,.about .main p{font-size:2.25vw;line-height:1.5}.about .main p{color:hsla(0,0%,100%,.7);margin-bottom:1em;margin-top:0}.about .main .watch-tutorial{display:block;text-decoration:none;background:green;border-radius:99px;width:9em;font-size:2.25vw;margin:auto;margin-top:1em;pointer-events:auto;cursor:pointer;background:#2dff3b;color:#000}.about a{color:inherit;text-decoration:underline}@media(max-width:768px){.about .main{padding:2em 1em 1em;width:95%;line-height:1.7}.about .main iframe{width:100%}.about .main h3{margin-top:2em;font-size:6vw;margin-bottom:.5em}.about .main h3:first-child{margin-top:.5em}.about .main p{margin-top:0;font-size:5vw;color:hsla(0,0%,100%,.7)}.about .main .watch-tutorial{margin-top:1em;font-size:5vw}}.graphics{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}.graphics .item{margin:auto;position:absolute;z-index:599}.graphics .welcome{width:50vw}@media(max-width:768px){.graphics .welcome{width:90vw}}.graphics .hatospecial{width:65vw}@media(max-width:768px){.graphics .hatospecial{width:90vw}}.graphics .super-go{width:65vw}@media(max-width:768px){.graphics .super-go{width:90vw}}.graphics .super-tutorial{width:65vw}@media(max-width:768px){.graphics .super-tutorial{width:90vw}}.graphics .intro{color:#fff;font-size:2.25vw;line-height:1.5;width:24em;text-align:center;padding:3rem;background:#000;border-radius:2rem;border:2px solid #fff}.graphics .intro .main{margin-bottom:5%}.graphics .intro .sub{margin-top:5%;font-size:50%}.graphics .intro .play{display:block;background:green;border-radius:99px;margin-top:2em;width:6em;font-size:150%;margin:auto;pointer-events:auto;cursor:pointer;background:#2dff3b;color:#000}@media(max-width:768px){.graphics .intro{padding:2em 1em;font-size:5.5vw;width:95%;border-radius:2rem;border:2px solid #fff;line-height:1.7}.graphics .intro .sub{margin-top:2em;font-size:80%}.graphics .intro .play{width:100%}}.graphics .tutorial{z-index:9999;color:#fff;font-size:1.75vw;line-height:1.5;width:33em;text-align:center;padding:1rem 2rem;background:#000;margin:2rem auto;padding:.75em 1em .5em;font-size:1.5vw;margin-bottom:1rem;background:#2dff3b;color:#000;text-transform:uppercase}@media(max-width:768px){.graphics .tutorial{padding:1em 1em;font-size:4vw;width:90%;line-height:1.7}.graphics .tutorial .sub{margin-top:3em;font-size:80%}}.graphics .start{position:fixed;z-index:9999;right:2rem;top:50%;transform:translateY(-50%);display:block;background:green;border-radius:99px;margin-top:2em;width:6em;height:6em;line-height:5.75em;text-transform:uppercase;font-size:150%;margin:auto;pointer-events:auto;cursor:pointer;background:#2dff3b;color:#000;color:#fff;border:2px solid #fff;background:transparent;color:#2dff3b;border:2px solid #2dff3b}.graphics .start:hover{background:transparent;color:#fff;border:2px solid #fff}@media(max-width:768px){.graphics .start{font-size:120%;width:5em;height:5em;line-height:4.75em;text-transform:uppercase;right:1rem;background:transparent;color:#2dff3b;border:2px solid #2dff3b}.graphics .start:hover{background:transparent;color:#fff;border:2px solid #fff}}.graphics .retry{position:fixed;z-index:9999;top:50%;transform:translateY(-50%);display:block;background:green;border-radius:99px;margin-top:2em;width:6em;height:6em;line-height:5.75em;text-transform:uppercase;font-size:150%;margin:auto;pointer-events:auto;cursor:pointer;top:unset;right:2rem;top:6rem;transform:none;margin:0;background:#2dff3b;color:#000;background:transparent;color:#fff;border:2px solid #fff}.graphics .retry:hover{background:transparent;color:#fff;border:2px solid #fff}@media(max-width:768px){.graphics .retry{font-size:120%;width:5em;height:5em;line-height:4.75em;text-transform:uppercase;background:transparent;color:#2dff3b;border:2px solid #2dff3b}.graphics .retry:hover{background:transparent;color:#fff;border:2px solid #fff}}.graphics .retry:hover{color:#2dff3b;border:2px solid #2dff3b}@media(max-width:768px){.graphics .retry{bottom:4rem;font-size:90%;right:unset;bottom:unset;top:3.5rem;right:1rem}}.graphics .progress{position:fixed;z-index:9;height:4rem;bottom:0;left:0;right:0;overflow:hidden}@media(max-width:768px){.graphics .progress{height:4rem}}.graphics .progress .bar{width:100%;height:100%}.graphics .results{color:#fff;font-size:2.25vw;line-height:1.5;text-align:center;padding:3rem}.graphics .results .lost,.graphics .results .win,.graphics .results img{max-width:50vw}.graphics .results .info{display:inline-block;margin:2rem auto;background:#000;border-radius:3rem;padding:2rem 2rem;border:2px solid #fff}.graphics .results .main{margin-bottom:5%;line-height:1.5;text-align:center;display:inline-block}.graphics .results .buy{display:inline-block;background:green;border-radius:99px;margin-top:2em;padding:1rem 2rem;font-size:100%;margin:auto;pointer-events:auto;cursor:pointer;background:#2dff3b;color:#000}@media(max-width:768px){.graphics .results{padding:2em 0;font-size:5.5vw;width:95%;border-radius:1rem;line-height:1.7}.graphics .results .lost,.graphics .results .win,.graphics .results img{max-width:100%}.graphics .results .info{display:inline-block;margin:2rem auto;background:#000;border-radius:2rem;padding:2rem 2rem;border:2px solid #fff}.graphics .results .play{width:100%}}