.game-root{box-sizing:border-box;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);background:#ddf2e8;place-items:center;display:grid;position:fixed;inset:0;container-type:size}.game-frame{--item-size:max(25cqmin, 120px);position:relative;overflow:hidden;container-type:size}.game-frame[data-orientation=landscape]{aspect-ratio:16/10;width:min(100cqw,160cqh)}.game-frame[data-orientation=portrait]{aspect-ratio:10/16;width:min(100cqw,62.5cqh)}.game-frame>.frame-bg{object-fit:cover;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.slot-item{width:var(--item-size);height:var(--item-size);position:absolute;transform:translate(-50%,-50%)}.dog{--fur:#e3a867;--fur-dark:#c98b4e;--ear:#a8693a;--cream:#fff3da;--line:#7a5534;--ink:#3b2a1e;--peach:#f6a88c;--puff:0;width:100%;height:100%;display:block;overflow:visible}.dog g{transform-box:view-box}.dog .d-act{transform-origin:200px 385px}.dog .d-puff{transform-origin:200px 385px;transform:scale(calc(1 + .28 * var(--puff)), calc(1 + .2 * var(--puff)));transition:transform 80ms linear}.dog .d-breathe{transform-origin:200px 385px;animation:3.2s ease-in-out infinite dog-breathe}.dog .d-tail{transform-origin:300px 310px;animation:1.8s ease-in-out infinite dog-wag}.dog .d-ear-l{transform-origin:110px 140px;animation:4s ease-in-out infinite dog-ear-l}.dog .d-ear-r{transform-origin:290px 140px;animation:4.6s ease-in-out infinite dog-ear-r}.dog .d-eye{transform-origin:50%;animation:5s infinite dog-blink;transform-box:fill-box!important}@keyframes dog-breathe{0%,to{transform:scale(1)}50%{transform:scale(1.01,1.025)}}@keyframes dog-wag{0%,to{transform:rotate(-7deg)}50%{transform:rotate(9deg)}}@keyframes dog-ear-l{0%,to{transform:rotate(0)}50%{transform:rotate(3deg)}}@keyframes dog-ear-r{0%,to{transform:rotate(0)}50%{transform:rotate(-3deg)}}@keyframes dog-blink{0%,93%,to{transform:scaleY(1)}96%{transform:scaleY(.1)}}.dog .d-act.act-tap{animation:.5s cubic-bezier(.3,.7,.4,1) dog-squash}.dog .d-act.act-tap .d-tail{animation:.13s ease-in-out 8 alternate dog-wag-fast}@keyframes dog-wag-fast{0%{transform:rotate(-22deg)}to{transform:rotate(26deg)}}@keyframes dog-squash{0%{transform:scale(1)}20%{transform:scale(1.1,.86)}50%{transform:scale(.94,1.1)translateY(-14px)}75%{transform:scale(1.03,.97)}to{transform:scale(1)}}.dog .d-act.act-nudge{animation:.22s ease-out dog-nudge}@keyframes dog-nudge{0%,to{transform:translateY(0)}40%{transform:translateY(-8px)scale(1.02)}}.dog .d-act.act-bounce{animation:.5s ease-in-out dog-bounce}@keyframes dog-bounce{0%,to{transform:translateY(0)scale(1)}25%{transform:translateY(0)scale(1.06,.92)}55%{transform:translateY(-26px)scale(.96,1.06)}80%{transform:translateY(0)scale(1.03,.97)}}.dog.shadow{color:currentColor}.dog.shadow .d-detail{display:none}.dog.shadow .d-shape{fill:currentColor;stroke:none}.dog.shadow .d-shape-stroke{stroke:currentColor}.dog.shadow .d-breathe,.dog.shadow .d-tail,.dog.shadow .d-ear-l,.dog.shadow .d-ear-r{animation:none}@media (prefers-reduced-motion:reduce){.dog .d-breathe,.dog .d-tail,.dog .d-ear-l,.dog .d-ear-r,.dog .d-eye{animation:none}}.star-slot{aspect-ratio:1;color:#cbb98f;width:100%;position:relative}.star-slot svg.star-shape{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.star-slot .star-dog{opacity:.45;width:52%;height:52%;position:absolute;top:26%;left:24%}.star-slot .star-body{fill:#fff8e1;stroke:#7a5534;stroke-width:4px;stroke-linejoin:round;transform-box:fill-box;transform-origin:50%}.star-slot[data-state=lit] .star-body{fill:#ffc93c;animation:.5s cubic-bezier(.3,1.6,.5,1) star-pop}.star-slot[data-state=lit] .star-dog{display:none}@keyframes star-pop{0%{transform:scale(.6)}60%{transform:scale(1.25)}to{transform:scale(1)}}.arrow-button{appearance:none;aspect-ratio:1;touch-action:none;-webkit-tap-highlight-color:transparent;background:0 0;border:0;width:100%;padding:0}.arrow-button svg{width:100%;height:100%;display:block;overflow:visible}.arrow-button .arrow-pop{transform-box:fill-box;transform-origin:50%;animation:.45s cubic-bezier(.3,1.6,.5,1) arrow-pop}@keyframes arrow-pop{0%{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}.mic-icon{width:100%;height:100%;display:block;overflow:visible}.mic-icon .mic-ring{transform-box:fill-box;transform-origin:50%;animation:1s ease-in-out infinite mic-pulse}.mic-icon[data-active=false] .mic-ring{display:none}@keyframes mic-pulse{0%,to{opacity:.55;transform:scale(1)}50%{opacity:.2;transform:scale(1.18)}}@media (prefers-reduced-motion:reduce){.mic-icon .mic-ring{animation:none}}.lopi{--oat:#f0d19c;--oat-dark:#ddb477;--cream:#fff3da;--mint:#9ed8c3;--sprout:#5cbf73;--sprout-dark:#3e9a55;--peach:#f6a88c;--line:#7a5534;--ink:#3b2a1e;--sun:#ffc93c;--cheek:#f6a88c;width:100%;height:100%;display:block;overflow:visible}.lopi g{transform-box:view-box}.lopi .l-jump,.lopi .l-squash{transform-origin:200px 510px}.lopi .l-breathe{transform-origin:200px 510px;animation:3.2s ease-in-out infinite lopi-breathe}.lopi .l-head{transform-origin:200px 335px;transition:transform .5s}.lopi .l-ear-l{transform-origin:160px 205px;animation:3.6s ease-in-out infinite lopi-ear-l}.lopi .l-ear-r{transform-origin:268px 200px;animation:4.2s ease-in-out infinite lopi-ear-r}.lopi .l-sprout{transform-origin:200px 172px;animation:2.8s ease-in-out infinite lopi-sway}.lopi .l-sprout-grow{transform-origin:200px 172px;transition:transform .7s cubic-bezier(.3,1.7,.5,1)}.lopi .l-arm-l{transform-origin:128px 352px;transition:transform .35s;transform:rotate(0)}.lopi .l-arm-r{transform-origin:272px 352px;transition:transform .35s;transform:rotate(0)}.lopi .l-eyes-look{transition:transform .4s}.lopi .l-eye{transform-origin:50%;transition:transform 90ms;transform-box:fill-box!important}.lopi.blink .l-eye{transform:scaleY(.1)}@keyframes lopi-breathe{0%,to{transform:scale(1)}50%{transform:scale(1.012,1.025)}}@keyframes lopi-ear-l{0%,to{transform:rotate(-7deg)}50%{transform:rotate(-2deg)}}@keyframes lopi-ear-r{0%,to{transform:rotate(0)}50%{transform:rotate(5deg)}}@keyframes lopi-sway{0%,to{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}.lopi .v{display:none}.lopi.state-happy .v-happy,.lopi.state-cheer .v-cheer,.lopi.state-think .v-think,.lopi.state-listen .v-listen,.lopi.state-sleep .v-sleep{display:inline}.lopi.state-cheer .l-jump{animation:.6s ease-in-out infinite lopi-jump}.lopi.state-cheer .l-arm-l{animation:.3s ease-in-out infinite alternate lopi-wave-l}.lopi.state-cheer .l-arm-r{animation:.3s ease-in-out infinite alternate lopi-wave-r}.lopi.state-cheer .l-ear-l,.lopi.state-cheer .l-ear-r{animation-duration:.6s}@keyframes lopi-jump{0%,to{transform:translateY(0)}40%{transform:translateY(-34px)}}@keyframes lopi-wave-l{0%{transform:rotate(70deg)}to{transform:rotate(110deg)}}@keyframes lopi-wave-r{0%{transform:rotate(-70deg)}to{transform:rotate(-110deg)}}.lopi.state-think .l-head{transform:rotate(-9deg)}.lopi.state-think .l-eyes-look{transform:translate(6px,-5px)}.lopi.state-think .l-arm-l{transform:rotate(30deg)}.lopi.state-think .l-arm-r{transform:rotate(-30deg)}.lopi.state-listen .l-arm-r{transform:rotate(-80deg)}.lopi.state-listen .l-head{transform:rotate(4deg)}.lopi.state-listen .l-ear-l{animation-duration:1s}.lopi.state-listen .l-ear-r{animation-duration:1.2s}.lopi.state-sleep .l-breathe{animation-duration:5s}.lopi.state-sleep .l-head{transform:rotate(7deg)translateY(6px)}.lopi.state-sleep .l-ear-l,.lopi.state-sleep .l-ear-r,.lopi.state-sleep .l-sprout{animation-duration:6s}.lopi .l-bubble{transform-origin:50%;opacity:0;animation:3s ease-in-out infinite lopi-bubble;transform-box:fill-box!important}.lopi .l-bubble.b2{animation-delay:1s}.lopi .l-bubble.b3{animation-delay:2s}@keyframes lopi-bubble{0%{opacity:0;transform:translate(0)scale(.4)}30%{opacity:.9}to{opacity:0;transform:translate(26px,-60px)scale(1.2)}}.lopi[data-stage="0"] .l-sprout-grow{transform:scale(.75)}.lopi[data-stage="1"] .l-sprout-grow{transform:scale(1)}.lopi[data-stage="2"] .l-sprout-grow{transform:scale(1.2)}.lopi[data-stage="3"] .l-sprout-grow,.lopi[data-stage="4"] .l-sprout-grow{transform:scale(1.38)}.lopi .leaf2,.lopi .flower{opacity:0;transition:opacity .5s}.lopi[data-stage="2"] .leaf2,.lopi[data-stage="3"] .leaf2,.lopi[data-stage="4"] .leaf2,.lopi[data-stage="3"] .bud,.lopi[data-stage="4"] .bloom{opacity:1}.lopi .l-squash.act-squash{animation:.55s cubic-bezier(.3,.7,.4,1) lopi-squash}@keyframes lopi-squash{0%{transform:scale(1)}20%{transform:scale(1.12,.84)}45%{transform:scale(.93,1.1)}70%{transform:scale(1.03,.97)}to{transform:scale(1)}}.lopi .l-squash.act-point .l-arm-r{transform:rotate(-95deg)}.lopi .l-squash.act-point .l-head{transform:rotate(5deg)}.lopi .l-squash.act-point.point-left .l-arm-r{transform:rotate(0)}.lopi .l-squash.act-point.point-left .l-arm-l{transform:rotate(95deg)}.lopi .l-squash.act-point.point-left .l-head{transform:rotate(-5deg)}.lopi .l-squash.act-clap .l-arm-l{animation:.22s ease-in-out 4 alternate lopi-clap-l}.lopi .l-squash.act-clap .l-arm-r{animation:.22s ease-in-out 4 alternate lopi-clap-r}@keyframes lopi-clap-l{0%{transform:rotate(40deg)}to{transform:rotate(-25deg)}}@keyframes lopi-clap-r{0%{transform:rotate(-40deg)}to{transform:rotate(25deg)}}.lopi .l-squash.act-earUp .l-ear-l{animation:.9s ease-out lopi-ear-up}.lopi .l-squash.act-earUp .l-ear-r{animation:.9s ease-out lopi-ear-up-r}@keyframes lopi-ear-up{0%,to{transform:rotate(-7deg)scaleY(1)}25%,70%{transform:rotate(0)scaleY(1.1)}}@keyframes lopi-ear-up-r{0%,to{transform:rotate(0)}25%,70%{transform:rotate(-14deg)}}@media (prefers-reduced-motion:reduce){.lopi .l-breathe,.lopi .l-ear-l,.lopi .l-ear-r,.lopi .l-sprout,.lopi .l-bubble,.lopi.state-cheer .l-jump,.lopi.state-cheer .l-arm-l,.lopi.state-cheer .l-arm-r{animation:none!important}}.child-screen{position:absolute;inset:0}.lopi-box{aspect-ratio:400/530;pointer-events:none;width:16cqmin;position:absolute;bottom:2cqmin;left:2cqmin}.lopi-box.big{pointer-events:auto;cursor:pointer;width:50cqmin;top:50%;bottom:auto;left:50%;transform:translate(-50%,-50%)}.lopi-box.cheer-big{width:48cqmin;top:50%;bottom:auto;left:50%;transform:translate(-50%,-50%)}.center-dog{width:62cqmin;height:62cqmin;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.center-dog.low{top:56%}.stars-bar{pointer-events:none;align-items:center;gap:2cqh;height:12%;display:flex;position:absolute;top:3%;left:50%;transform:translate(-50%)}.stars-bar .star-slot{width:12cqh;height:12cqh}.stars-bar.single .star-slot{width:22cqmin;height:22cqmin}.stars-bar.single{height:auto;top:4%}.arrow-wrap{width:20cqmin;height:20cqmin;position:absolute;bottom:4cqmin;right:4cqmin}.mic-wrap{pointer-events:none;width:16cqmin;height:16cqmin;position:absolute;bottom:4cqmin;right:4cqmin}.corner-mic{pointer-events:none;opacity:.75;width:5cqmin;height:5cqmin;position:absolute;top:2cqmin;left:2cqmin}.corner-gear{opacity:.55;touch-action:none;background:0 0;border:0;width:9cqmin;height:9cqmin;padding:2cqmin;position:absolute;top:1cqmin;right:1cqmin}.corner-gear svg{width:100%;height:100%;display:block}.slot-item>.slot-hit{touch-action:none;width:100%;height:100%}.slot-item.flown{pointer-events:none}.done-burst{pointer-events:none;width:0;height:0;position:absolute;top:46%;left:50%}.done-burst .burst-star{clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);background:#ffc93c;width:8cqmin;height:8cqmin;margin:-4cqmin 0 0 -4cqmin;position:absolute}.frame-fill{position:absolute;inset:0}@keyframes burst-fly{0%{opacity:1;transform:translate(0)scale(.3)rotate(0)}to{transform:translate(var(--dx), var(--dy)) scale(1) rotate(200deg);opacity:0}}.done-burst .burst-star{animation:.9s cubic-bezier(.2,.8,.3,1) both burst-fly}@media (prefers-reduced-motion:reduce){.done-burst .burst-star{animation-duration:10ms}}