body{background:linear-gradient(#e6fcf5,#c3fae8)}.maze{position:absolute;inset:0;overflow:hidden}.picker{flex-wrap:wrap;place-content:center;align-items:center;gap:4vw;display:flex;position:absolute;inset:84px 16px 16px}.pick{aspect-ratio:3/4;background:var(--c);width:min(26vw,30vh,200px);box-shadow:0 6px 0 color-mix(in srgb, var(--c) 70%, #000), 0 6px 14px #3b33552e;cursor:pointer;border:0;border-radius:22px;padding:0;position:relative}.pick svg{width:72%;height:72%;position:absolute;inset:14%}.pick:active{box-shadow:0 2px 0 color-mix(in srgb, var(--c) 70%, #000);transform:translateY(4px)}.maze.is-playing .picker,.maze.is-picking .stage,.maze.is-picking .resize{display:none}.stage{place-items:center;display:grid;position:absolute;inset:84px 16px 16px}@media (orientation:portrait){.stage{bottom:80px}}.board{--cell:40px;border-radius:calc(var(--cell) * .15);touch-action:none;background:#fffdf5;position:relative;box-shadow:0 6px 16px #3b335526}.walls{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.wall,.wall-flash{fill:none;stroke-width:.14px;stroke-linecap:round;stroke-linejoin:round}.wall{stroke:#0ca678}.wall-flash{stroke:#ff6b6b;stroke-width:.24px;animation:.5s ease-out forwards wall-flash}@keyframes wall-flash{0%{opacity:1}to{opacity:0}}.food,.runner,.paw,.blocker{width:var(--cell);height:var(--cell);pointer-events:none;place-items:center;display:grid;position:absolute;top:0;left:0}.food svg{width:72%;height:72%;animation:1.6s ease-in-out infinite food-bob}@keyframes food-bob{50%{transform:translateY(-6%)scale(1.06)}}.food.is-eaten svg{animation:.5s ease-in forwards eaten}@keyframes eaten{to{opacity:0;transform:scale(0)}}.paw:before{content:"";background:#96f2d7;border-radius:50%;width:26%;height:26%}.runner{z-index:2;transition:transform linear}.face{width:92%;height:92%;transition:scale .15s}.face svg{filter:drop-shadow(0 2px 2px #3b335540);width:100%;height:100%}.runner.is-held .face{scale:1.15}.face.is-popping{animation:.45s ease-out pop}.face.is-wiggling{animation:.45s ease-in-out wiggle}.face.is-bumping{animation:.35s ease-in-out bump}.face.is-hopping{animation:.5s ease-out 3 hop}@keyframes pop{0%{transform:scale(.4)}60%{transform:scale(1.15)}to{transform:scale(1)}}@keyframes wiggle{20%{transform:rotate(-12deg)}45%{transform:rotate(10deg)}70%{transform:rotate(-6deg)}}@keyframes bump{20%{transform:translate(-12%)}40%{transform:translate(10%)}60%{transform:translate(-7%)}80%{transform:translate(4%)}}@keyframes hop{40%{transform:translateY(-40%)scale(1.1)}70%{transform:translateY(0)scale(1.1,.9)}}.star{z-index:3;width:calc(var(--cell) * .4);height:calc(var(--cell) * .4);margin:calc(var(--cell) * -.2) 0 0 calc(var(--cell) * -.2);background:hsl(var(--hue) 90% 65%);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);pointer-events:none;animation:.9s ease-out forwards burst;position:absolute}@keyframes burst{0%{opacity:1;transform:translate(0)scale(.3)rotate(0)}80%{opacity:1}to{transform:translate(var(--tx), var(--ty)) scale(1) rotate(180deg);opacity:0}}.hint{--hx:0px;--hy:0px;z-index:4;pointer-events:none;opacity:0;width:0;height:0;transition:opacity .3s;position:absolute}.hint.is-visible{opacity:1}.hint-hand{filter:drop-shadow(0 3px 4px #3b335559);width:72px;height:90px;position:absolute;top:-5px;left:-34px;overflow:visible}.hint-hand path{fill:#fff;stroke:#3b3355;stroke-width:3.5px;stroke-linecap:round;stroke-linejoin:round}.hint.is-visible .hint-hand{animation:1.8s ease-in-out infinite hint-drag}@keyframes hint-drag{0%{opacity:0;transform:translateY(12px)}20%{opacity:1;transform:translate(0)}65%{transform:translate(var(--hx), var(--hy));opacity:1}85%,to{transform:translate(var(--hx), var(--hy));opacity:0}}.resize{right:max(16px, env(safe-area-inset-right));bottom:max(16px, env(safe-area-inset-bottom));z-index:5;color:#20c997;cursor:pointer;background:#fff;border:0;border-radius:50%;place-items:center;width:56px;height:56px;padding:0;display:grid;position:fixed;box-shadow:0 3px #c3fae8,0 2px 6px #3b33552e}.resize svg{width:30px;height:30px}.resize:active{transform:scale(.92)}
