:root{--blue:#1e88e5;--blue-deep:#1565c0;--blue-light:#4fc3f7;--green:#43a047;--yellow:#ffc928;--orange:#fb8c00;--red:#e53935;--cream:#fff8ec;--ink:#23303b;--gold:#ffc53d;--hud-size:clamp(76px, 11vmin, 104px);--hud-gap:clamp(10px, 2vmin, 18px);--radius-pill:999px;--shadow-soft:0 6px 0 #0000001f, 0 10px 24px #1428502e;--ease-back:cubic-bezier(.34, 1.56, .64, 1);--font-ui:"Andika", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}@font-face{font-family:Andika;src:url(/fonts/Andika-Bold.woff2)format("woff2");font-weight:700;font-display:swap}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%;color:var(--ink);font-family:var(--font-ui);-webkit-user-select:none;user-select:none;overscroll-behavior:none;background:#cfeefc;margin:0;overflow:hidden}#app{position:fixed;top:0;bottom:0;left:0;right:0}#stage{position:absolute;top:0;bottom:0;left:0;right:0}#stage canvas{width:100%;height:100%;display:block}#loading{z-index:50;background:radial-gradient(circle at 50% 40%,#fff 0%,#e3f5ff 60%,#bfe6fb 100%);align-content:center;place-items:center;gap:24px;transition:opacity .6s;display:grid;position:absolute;top:0;bottom:0;left:0;right:0}#loading img{width:min(62vmin,420px);height:auto;animation:2.4s ease-in-out infinite breathe}#loading.hidden{opacity:0;pointer-events:none}.loading-bar{border-radius:var(--radius-pill);background:#1e88e526;width:min(50vmin,320px);height:16px;overflow:hidden}.loading-bar span{border-radius:inherit;background:linear-gradient(90deg, var(--green), var(--yellow), var(--orange));width:0;height:100%;transition:width .3s;display:block}@keyframes breathe{50%{transform:scale(1.03)}}#hud{pointer-events:none;padding:max(var(--hud-gap), env(safe-area-inset-top)) max(var(--hud-gap), env(safe-area-inset-right)) max(var(--hud-gap), env(safe-area-inset-bottom)) max(var(--hud-gap), env(safe-area-inset-left));position:absolute;top:0;bottom:0;left:0;right:0}.hud-btn{pointer-events:auto;width:var(--hud-size);height:var(--hud-size);cursor:pointer;background:var(--blue);box-shadow:var(--shadow-soft), inset 0 -6px 0 #00000024, inset 0 4px 0 #ffffff59;transition:transform .16s var(--ease-back), filter .16s ease, opacity .25s ease;touch-action:manipulation;border:none;border-radius:50%;place-items:center;display:grid;position:absolute}.hud-btn svg{pointer-events:none;width:62%;height:62%}.hud-btn:hover{filter:brightness(1.06);transform:translateY(-2px)scale(1.04)}.hud-btn:active{transform:translateY(3px)scale(.94);box-shadow:0 2px #0000001f,0 4px 10px #1428502e,inset 0 -3px #00000024}.hud-btn:focus-visible{outline:5px solid var(--yellow);outline-offset:4px}.hud-btn.hidden{opacity:0;pointer-events:none;transform:scale(.6)}.hud-btn.pulse{animation:1.2s ease-in-out infinite pulse}@keyframes pulse{0%,to{box-shadow:var(--shadow-soft), 0 0 0 0 #4fc3f7b3}50%{box-shadow:var(--shadow-soft), 0 0 0 18px #4fc3f700}}.btn-listen{width:calc(var(--hud-size) * 1.12);height:calc(var(--hud-size) * 1.12);margin:var(--hud-gap);border-radius:50% 50% 50% 18%;top:0;left:0}.btn-listen.bottom{top:auto;bottom:0}.btn-home{top:0;left:calc(var(--hud-size) * 1.12 + var(--hud-gap) * 2);margin:var(--hud-gap);background:#fff}.btn-village{margin:var(--hud-gap);background:var(--green);bottom:0;right:0}.btn-chest{top:calc(var(--hud-size) * .72 + var(--hud-gap) * 2);margin:var(--hud-gap);background:#fff3d6;right:0}.btn-chest.ready{animation:1.6s ease-in-out infinite wiggle}@keyframes wiggle{0%,70%,to{transform:rotate(0)}75%{transform:rotate(-9deg)scale(1.06)}85%{transform:rotate(9deg)scale(1.06)}}.btn-settings{margin:var(--hud-gap);width:calc(var(--hud-size) * .62);height:calc(var(--hud-size) * .62);box-shadow:none;opacity:.7;background:#ffffff8c;bottom:0;left:0}.btn-settings .ring{border:5px solid var(--blue);clip-path:inset(0);opacity:0;border-radius:50%;position:absolute;top:-6px;bottom:-6px;left:-6px;right:-6px}.btn-settings.holding .ring{opacity:1;animation:1.6s linear forwards fillring}@keyframes fillring{0%{clip-path:polygon(50% 50%,50% 0,50% 0)}to{clip-path:polygon(50% 50%,50% 0,100% 0,100% 100%,0 100%,0 0,50% 0)}}.stars-pill{margin:var(--hud-gap);height:calc(var(--hud-size) * .72);border-radius:var(--radius-pill);box-shadow:var(--shadow-soft);font-size:calc(var(--hud-size) * .36);color:#7a4d00;pointer-events:none;transition:transform .2s var(--ease-back);background:#ffffffeb;align-items:center;gap:8px;padding:0 22px 0 10px;font-weight:700;display:flex;position:absolute;top:0;right:0}.stars-pill svg{width:calc(var(--hud-size) * .58);height:calc(var(--hud-size) * .58)}.stars-pill.bump{transform:scale(1.18)}.water{top:0;right:calc(var(--hud-size) * 2.1 + var(--hud-gap) * 2);margin:var(--hud-gap);height:calc(var(--hud-size) * .72);border-radius:var(--radius-pill);box-shadow:var(--shadow-soft);background:#ffffffd9;align-items:center;gap:6px;padding:0 14px;display:flex;position:absolute}.water svg{width:calc(var(--hud-size) * .5);height:calc(var(--hud-size) * .5)}.water .drop{background:#cfe8f7;border-radius:50%/60% 60% 40% 40%;width:14px;height:18px}.water .drop.on{background:var(--blue-light);box-shadow:0 0 8px #4fc3f7b3}.progress{margin-top:calc(var(--hud-gap) + 8px);border-radius:var(--radius-pill);box-shadow:var(--shadow-soft);background:#fff8ece6;gap:10px;padding:10px 16px;display:flex;position:absolute;top:0;left:50%;transform:translate(-50%)}.progress i{width:clamp(22px,4vmin,36px);height:clamp(18px,3.2vmin,28px);transition:background .3s ease, transform .3s var(--ease-back);background:#d9ccb4;border-radius:45%;box-shadow:inset 0 -3px #0000001f}.progress i.done{background:var(--gold);transform:scale(1.12)}.progress i.now{outline:3px solid var(--blue-light);background:#fff}.ghost-hand{pointer-events:none;opacity:0;filter:drop-shadow(0 6px 8px #00000040);z-index:5;transform-origin:37.5% 7.5%;width:clamp(70px,12vmin,120px);height:auto;transition:opacity .25s;position:absolute;top:0;left:0}.ghost-hand.show{opacity:.92}.ghost-hand.flip svg{transform-origin:37.5% 7.5%}.ghost-hand.tap svg{animation:1.1s ease-in-out infinite tap}@keyframes tap{0%,to{transform:translate(0)scale(1)}45%{transform:translate(-4px,-14px)scale(1.05)}60%{transform:translate(0)scale(.92)}}.choice-row{left:50%;bottom:calc(var(--hud-gap) * 2);gap:calc(var(--hud-gap) * 2);pointer-events:auto;display:flex;position:absolute;transform:translate(-50%)}.panel-backdrop{pointer-events:auto;z-index:30;background:#0f1e3273;place-items:center;padding:16px;display:grid;position:absolute;top:0;bottom:0;left:0;right:0}.panel{background:var(--cream);border-radius:28px;width:min(560px,100%);max-height:100%;padding:28px;font-size:20px;line-height:1.4;overflow:auto;box-shadow:0 24px 60px #0000004d}.panel h2{color:var(--blue-deep);margin:0 0 6px;font-size:30px}.panel p{color:#4b5a66;margin:0 0 18px}.panel fieldset{border:none;margin:0 0 18px;padding:0}.panel legend{margin-bottom:8px;font-weight:700}.seg{flex-wrap:wrap;gap:10px;display:flex}.seg button,.panel .action{min-height:60px;font:inherit;color:var(--ink);cursor:pointer;transition:transform .15s var(--ease-back), border-color .15s ease;background:#fff;border:3px solid #d7e6f3;border-radius:18px;padding:0 22px;font-weight:700}.seg button[aria-pressed=true]{border-color:var(--blue);color:var(--blue-deep);background:#e3f2fd}.seg button:active,.panel .action:active{transform:scale(.96)}.panel .action.primary{background:var(--blue);border-color:var(--blue);color:#fff}.panel .action.danger{color:var(--red);border-color:#f5c6c6}.panel .row{flex-wrap:wrap;gap:12px;margin-top:8px;display:flex}.panel .stats{grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px;display:grid}.panel .stats div{text-align:center;background:#fff;border-radius:16px;padding:12px}.panel .stats b{color:var(--blue-deep);font-size:30px;display:block}.companion-tip{left:50%;bottom:calc(var(--hud-gap) + 6px);max-width:min(640px,80vw);box-shadow:var(--shadow-soft);pointer-events:none;background:#ffffffeb;border-radius:16px;padding:10px 18px;font-size:17px;position:absolute;transform:translate(-50%)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.title-overlay{padding:max(2vmin, env(safe-area-inset-top)) 16px max(5vmin, env(safe-area-inset-bottom));pointer-events:none;flex-direction:column;justify-content:space-between;align-items:center;transition:opacity .5s,transform .5s;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}.title-overlay.leaving{opacity:0;transform:translateY(-12px)}.title-logo{filter:drop-shadow(0 10px 18px #143c5a40);width:min(46vmin,360px);height:auto;animation:3s ease-in-out infinite breathe}.play-btn{pointer-events:auto;cursor:pointer;width:clamp(120px,20vmin,170px);height:clamp(120px,20vmin,170px);transition:transform .16s var(--ease-back);background:radial-gradient(circle at 35% 30%,#66d17a,#2e9e44 70%);border:8px solid #fff;border-radius:50%;place-items:center;animation:1.6s ease-in-out infinite pulse-play;display:grid;box-shadow:0 10px #1f7a33,0 18px 40px #14502859}.play-btn svg{width:55%;height:55%;margin-left:8%}.play-btn:active{transform:translateY(8px)scale(.95);box-shadow:0 2px #1f7a33,0 6px 16px #14502859}.play-btn:focus-visible{outline:6px solid var(--yellow);outline-offset:6px}@keyframes pulse-play{50%{transform:scale(1.06)}}@media (max-aspect-ratio:1),(max-width:560px){:root{--hud-size:clamp(64px, 17vw, 84px)}.progress{margin-top:calc(var(--hud-size) * 1.12 + var(--hud-gap) * 2);gap:7px;padding:8px 12px}.water{left:0;right:auto;top:calc(var(--hud-size) * 1.12 + var(--hud-gap) * 1.2);height:calc(var(--hud-size) * .6);padding:0 10px}.water .drop{width:11px;height:14px}.stars-pill{height:calc(var(--hud-size) * .7);font-size:calc(var(--hud-size) * .34)}}