*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}html,body{margin:0;height:100%;overflow:hidden;background:#ffe9b8;touch-action:none;overscroll-behavior:none}body{font-family:ui-rounded,SF Pro Rounded,Nunito,system-ui,sans-serif;font-weight:700;color:#6b3416}#game{display:block;position:fixed;inset:0;width:100vw;height:100vh;height:100dvh}#ui{position:fixed;inset:0;pointer-events:none;z-index:2}#ui>*{pointer-events:auto}#ui>.hud,#ui>.toasts{pointer-events:none}#ui .hud>*{pointer-events:auto}button{font-family:inherit;font-weight:800;cursor:pointer;border:none}.btn{color:#fff;font-size:24px;border-radius:22px;padding:12px 34px 16px;background:linear-gradient(#ffcf5a,#f59a1c);box-shadow:0 6px #b0600c,0 10px 16px #783c0a40,inset 0 3px #ffffff73;text-shadow:0 2px 0 rgba(150,70,0,.5)}.btn:active,.icon:active,.node:active{transform:translateY(3px)}.btn.green{background:linear-gradient(#7ee08a,#3bb273);box-shadow:0 6px #22794a,0 10px 16px #14502840,inset 0 3px #ffffff73;text-shadow:0 2px 0 rgba(20,90,50,.5)}.btn.ghost{background:#fff4d6;color:#8a4a1e;text-shadow:none;box-shadow:0 5px #e0b980;font-size:18px;padding:10px 22px 12px}.icon{width:46px;height:46px;border-radius:15px;background:#fff4d6;color:#8a4a1e;font-size:22px;box-shadow:0 4px #e0b980;display:inline-flex;align-items:center;justify-content:center}.icon.on{background:#ffcf5a;box-shadow:0 4px #b0600c;color:#fff}.pill{background:#fff4d6;border-radius:20px;padding:6px 14px 6px 8px;display:inline-flex;gap:6px;align-items:center;font-size:18px;box-shadow:0 4px #e0b980}.coin{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff6b0,#ffc21a 55%,#d18a00);box-shadow:inset 0 -2px #8c500066;display:inline-block}:root{--stage-x: 0px;--stage-y: 0px;--stage-w: 100vw;--ui: 1;--ui-card: 1}.home{position:fixed;inset:0;display:flex;flex-direction:column;background:linear-gradient(#bfe8ff,#ffe9b8 38%)}.home>*{zoom:var(--ui-card)}.home .top{width:calc(var(--stage-w) / var(--ui-card));max-width:100%;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:calc(env(safe-area-inset-top) + 14px) 16px 8px}.home h1{margin:4px 0 0;text-align:center;font-size:46px;line-height:1;color:#f2545b;letter-spacing:1px;text-shadow:0 4px 0 #b02a32,0 8px 14px rgba(150,40,40,.2);transform:rotate(-3deg)}.home h1 span{color:#3d8bfd;text-shadow:0 4px 0 #1f56b0,0 8px 14px rgba(30,80,160,.2)}.path{flex:1;overflow-y:auto;overflow-x:hidden;touch-action:pan-y;padding:20px 0 40px;display:flex;flex-direction:column-reverse;align-items:center;gap:14px;scrollbar-width:none}.path{-webkit-mask-image:linear-gradient(transparent,#000 36px);mask-image:linear-gradient(transparent,#000 36px)}.path::-webkit-scrollbar{display:none}.node{position:relative;width:62px;height:62px;border-radius:50%;font-size:22px;color:#8a4a1e;background:radial-gradient(circle at 35% 30%,#fffaf0,#f5dfb8);box-shadow:0 5px #d9ad6c,0 8px 12px #783c0a2e;flex:none}.node.done{background:radial-gradient(circle at 35% 30%,#c8f5cf,#7ed492);color:#1d6b3a;box-shadow:0 5px #3e9a5a}.node.hard{background:radial-gradient(circle at 35% 30%,#ffd0e4,#ff7eb6);color:#fff;box-shadow:0 5px #c4407e;text-shadow:0 2px 0 #c4407e}.node.vhard{background:radial-gradient(circle at 35% 30%,#e3c9ff,#9b5de5);color:#fff;box-shadow:0 5px #6a34b0;text-shadow:0 2px 0 #6a34b0}.node.cur{width:84px;height:84px;font-size:30px;background:radial-gradient(circle at 35% 30%,#fff6b0,#ffb627);color:#fff;box-shadow:0 6px #c47800,0 0 0 8px #fff9;text-shadow:0 2px 0 #c47800;animation:pulse 1.4s ease-in-out infinite}.node.locked{opacity:.55}.node em{position:absolute;left:50%;bottom:-14px;translate:-50% 0;font-style:normal;font-size:11px;white-space:nowrap;padding:2px 8px;border-radius:10px;background:#6b3416;color:#fff;text-shadow:none}.node:nth-child(4n+1){margin-left:90px}.node:nth-child(4n+3){margin-right:90px}.home .play{margin:0 auto calc(env(safe-area-inset-bottom) + 26px)}.home .play small{display:block;font-size:15px;opacity:.9}@keyframes pulse{50%{transform:scale(1.06)}}.hud{position:fixed;left:var(--stage-x);width:var(--stage-w);top:var(--stage-y);display:flex;align-items:center;gap:calc(8px * var(--ui));padding:calc(env(safe-area-inset-top) + 10px * var(--ui)) calc(12px * var(--ui)) 0}.hud>*{zoom:var(--ui)}.land .hud{display:grid;grid-template-columns:auto auto 1fr auto auto;row-gap:calc(10px * var(--ui))}.land .hud .go-home{grid-area:1 / 1}.land .hud .go-retry{grid-area:1 / 2}.land .hud .speed{grid-area:1 / 4}.land .hud .go-gear{grid-area:1 / 5}.land .hud .title{grid-area:2 / 1 / 3 / 3}.hud .title{flex:1;text-align:center;font-size:20px;line-height:1.1}.hud .title small{display:block;font-size:12px;color:#c4407e}.hud .title small.vhard{color:#9b5de5}.hud .icon{width:44px;height:44px;font-size:18px;border-radius:13px}.veil{position:fixed;inset:0;background:#6e3c1447;display:flex;align-items:center;justify-content:center;animation:fade .2s}.card{zoom:var(--ui-card);width:min(calc(86vw / var(--ui-card)),340px);background:#fffaf0;border-radius:28px;padding:22px 20px 24px;text-align:center;box-shadow:0 10px #e8c58e,0 20px 40px #6e3c144d;animation:pop .45s cubic-bezier(.3,1.6,.5,1);display:flex;flex-direction:column;gap:14px;align-items:center}.card h2{margin:0;font-size:32px;color:#f2545b}.card h2.good{color:#3bb273}.card p{margin:0;font-size:17px;color:#8a4a1e;font-weight:600}.card .row{display:flex;gap:10px;justify-content:center}.card .toggle{width:100%;display:flex;justify-content:space-between;align-items:center;font-size:19px}.switch{width:58px;height:32px;border-radius:16px;background:#e8d4b0;position:relative;transition:background .15s}.switch:after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px #0000001f;transition:left .15s}.switch.on{background:#3bb273}.switch.on:after{left:29px}.burst{font-size:54px;line-height:1;animation:spin 1s cubic-bezier(.3,1.6,.5,1)}@keyframes pop{0%{transform:scale(.6);opacity:0}}@keyframes fade{0%{opacity:0}}@keyframes spin{0%{transform:scale(0) rotate(-180deg)}}.toasts{position:fixed;left:var(--stage-x);width:var(--stage-w);bottom:calc(var(--stage-y) + env(safe-area-inset-bottom) + 34px * var(--ui));flex-direction:column-reverse;display:flex;align-items:center;gap:6px}.toast{zoom:var(--ui);max-width:calc(var(--stage-w) * .9 / var(--ui));background:#6b3416;color:#fff;font-size:16px;font-weight:700;padding:9px 16px;border-radius:16px;box-shadow:0 6px 14px #50280a40;text-align:center;animation:pop .3s cubic-bezier(.3,1.6,.5,1);transition:opacity .3s,transform .3s}.toast.tip{background:#3d8bfd}.toast.out{opacity:0;transform:translateY(8px)}@media(orientation:landscape)and (max-height:500px)and (pointer:coarse){body:after{content:"Turn your phone upright to play";position:fixed;inset:0;z-index:9;display:flex;align-items:center;justify-content:center;background:#ffe9b8;color:#6b3416;font-size:22px;text-align:center;padding:24px}}.land .toasts{width:calc(140px * var(--ui));bottom:calc(var(--stage-y) + 24px * var(--ui))}.land .toast{max-width:128px;font-size:14px}.land .hud .title{text-align:left;padding-left:4px;white-space:nowrap;text-shadow:0 2px 0 rgba(255,255,255,.75)}.hud .stats{display:none}.land .hud>.stats{display:block;zoom:1;pointer-events:none;position:fixed;left:var(--stage-x);top:calc(var(--stage-y) + 200px * var(--s));width:calc(140px * var(--s));padding:0 clamp(6px,calc(8px * var(--s)),20px);font-size:clamp(13px,calc(10.5px * var(--s)),26px);line-height:1.25}.stats-card{background:#fffaf0;color:#6b3416;border-radius:clamp(12px,calc(14px * var(--s)),24px);padding:clamp(9px,calc(10px * var(--s)),18px) clamp(10px,calc(11px * var(--s)),20px);box-shadow:0 4px #e0b980,0 8px 14px #783c0a1f;display:flex;flex-direction:column;gap:.45em}.stats-card .st-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;column-gap:.5em}.stats-card .st-row span{font-size:.85em;color:#a0663a}.stats-card .st-row b{font-weight:800}.stats-card .st-bar{height:.55em;border-radius:1em;background:#f1dcb4;overflow:hidden;margin-bottom:.2em}.stats-card .st-bar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(#7ee08a,#3bb273);transition:width .3s}.stats-card .keys{display:none;list-style:none;margin:.3em 0 0;padding:.55em 0 0;border-top:2px dashed #f1dcb4;font-size:.82em}.stats-card .keys li{display:flex;justify-content:space-between;align-items:center;gap:.4em;padding:.12em 0;color:#8a4a1e}.stats-card kbd{font-family:inherit;font-weight:800;font-size:.92em;background:#fff4d6;border-radius:.45em;padding:.05em .45em .12em;box-shadow:0 2px #e0b980;white-space:nowrap}@media(hover:hover)and (pointer:fine)and (min-height:640px){.land .stats-card .keys{display:block}}.land .toasts{z-index:1}.land .toast{font-size:clamp(13px,calc(10.5px * var(--s) / var(--ui)),18px)}@media(hover:hover)and (pointer:fine){.btn,.icon,.node{transition:filter .12s,transform .12s}.btn:hover,.icon:hover{filter:brightness(1.06) saturate(1.05);transform:translateY(-2px)}.btn:active,.icon:active{transform:translateY(3px)}.node:not(.locked):not(.cur):hover{filter:brightness(1.05);transform:scale(1.07)}.node.locked{cursor:default}.card .toggle{cursor:pointer;border-radius:12px}.card .toggle:hover{color:#b0600c}}@media(min-width:900px)and (min-aspect-ratio:11/10){.home{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"title path" "play path";column-gap:clamp(24px,4vw,96px);padding:clamp(80px,11vh,140px) clamp(32px,5vw,140px) clamp(32px,6vh,90px);background:linear-gradient(#bfe8ff,#ffe9b8 55%)}.home>*{zoom:1}.home .top{position:absolute;top:0;left:0;width:100%;max-width:none;padding:clamp(16px,2.2vh,32px) clamp(20px,2vw,40px)}.home .top .pill{font-size:clamp(18px,1.3vw,26px);padding:.35em .8em .35em .45em;gap:.4em;border-radius:1.2em}.home .top .pill .coin{width:1.25em;height:1.25em}.home .top .icon{width:clamp(46px,3.3vw,64px);height:clamp(46px,3.3vw,64px);font-size:clamp(22px,1.6vw,30px);border-radius:30%}.home h1{grid-area:title;align-self:end;margin:0 0 clamp(16px,3vh,40px);font-size:clamp(56px,6vw,128px)}.home h1 span{display:block;margin-top:.05em}.home .play{grid-area:play;align-self:start;justify-self:center;margin:0;font-size:clamp(28px,2.2vw,42px);padding:.45em 1.6em .6em;border-radius:.9em}.home .play small{font-size:.6em}.path{grid-area:path;align-self:center;justify-self:center;max-height:100%;max-width:100%;display:grid;grid-template-columns:repeat(6,auto);--n: clamp(56px, min(5vw, 9vh), 96px);grid-auto-rows:calc(var(--n) * 1.3);gap:clamp(10px,1.4vh,22px) clamp(14px,1.6vw,34px);align-items:center;justify-items:center;padding:clamp(20px,3vh,36px) clamp(20px,2vw,40px) clamp(28px,4vh,44px);border-radius:36px;background:#fffaf08c;box-shadow:inset 0 0 0 3px #e0b98059;-webkit-mask-image:none;mask-image:none}.path .node{margin:0;width:var(--n);height:var(--n);font-size:calc(var(--n) * .36)}.path .node.cur{width:calc(var(--n) * 1.25);height:calc(var(--n) * 1.25);font-size:calc(var(--n) * .46)}.path .node em{font-size:clamp(11px,calc(var(--n) * .17),15px);bottom:calc(var(--n) * -.2)}.card{zoom:1;width:clamp(360px,30vw,470px);padding:32px 34px 34px;gap:18px;border-radius:32px}.card h2{font-size:clamp(32px,2.3vw,42px)}.card p{font-size:clamp(17px,1.2vw,21px);line-height:1.35}.card .pill{font-size:clamp(18px,1.3vw,24px)}.card .toggle{font-size:clamp(19px,1.3vw,23px);padding:4px 6px}.card .btn{font-size:clamp(24px,1.7vw,30px);min-width:60%}.card .btn.ghost{font-size:clamp(18px,1.25vw,22px)}.card .row .btn{min-width:0}.card .burst{font-size:clamp(54px,4vw,72px)}}
