:root{--bg: #f2ede4;--ink: #2f3440;--ink-soft: #8a8578;--card: #fffdf8;--line: #e6dfd2;--ok: #3fbf7f;--bad: #e0624f;--accent: #ff7a59;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--banner: 64px;--font: "Nunito", ui-rounded, system-ui, -apple-system, sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;background:var(--bg);overflow:hidden;overscroll-behavior:none}body{font-family:var(--font);color:var(--ink);user-select:none;-webkit-user-select:none;touch-action:none}#app{position:relative;height:100%;max-width:50vh;margin:0 auto;overflow:hidden;background:var(--bg)}#stage,#stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}#overlay{position:absolute;inset:0;pointer-events:none}#overlay>*{pointer-events:auto}.hidden{opacity:0;pointer-events:none!important;transform:translateY(-8px)}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.icon-btn{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--card);box-shadow:0 2px 0 var(--line),0 6px 16px #3c321e0f;transition:transform .12s ease,opacity .2s}.icon-btn:active{transform:scale(.9)}.icon-btn:disabled{opacity:.35}.hud{position:absolute;left:0;right:0;top:0;padding:calc(var(--safe-top) + 12px) 14px 0;display:flex;align-items:center;gap:10px;transition:opacity .3s,transform .3s}.hud-mid{flex:1;min-width:0;text-align:center}.hud-title{font-weight:900;font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hud-sub{font-weight:700;font-size:12px;color:var(--ink-soft);margin-top:1px}.hud-right{display:flex;gap:6px}.hud-right .icon-btn{width:40px;height:40px;border-radius:12px}.hint{position:absolute;left:50%;top:calc(var(--safe-top) + 84px);transform:translate(-50%,-6px);max-width:86%;padding:8px 14px;border-radius:14px;background:var(--ink);color:#fff;font-weight:800;font-size:14px;text-align:center;opacity:0;transition:opacity .35s,transform .35s;pointer-events:none!important}.hint.in{opacity:1;transform:translate(-50%)}.tray{position:absolute;left:12px;right:12px;bottom:calc(var(--safe-bottom) + var(--banner) + 12px);height:84px;border-radius:24px;background:var(--card);box-shadow:0 3px 0 var(--line),0 10px 30px #3c321e14;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .25s,opacity .3s}.tray.empty{opacity:0;pointer-events:none}.tray-items{display:flex;gap:4px;transition:opacity .15s}.tray-trash{position:absolute;inset:0;display:grid;place-items:center;color:#fff;opacity:0;transition:opacity .15s;pointer-events:none}.tray-trash svg{width:30px;height:30px}.tray.trash{background:var(--bad);transform:scale(1.04)}.tray.trash .tray-items{opacity:0}.tray.trash .tray-trash{opacity:1}.machine-btn{width:64px;height:64px;display:grid;place-items:center;touch-action:none}.machine-btn img{width:100%;height:100%;pointer-events:none}.machine-btn.pop{animation:pop .25s ease}@keyframes pop{40%{transform:scale(.86)}to{transform:scale(1)}}.zoom{position:absolute;right:14px;bottom:calc(var(--safe-bottom) + var(--banner) + 12px + 84px + 34px);display:flex;flex-direction:column;gap:6px;transition:opacity .3s,transform .3s}.zoom.low{bottom:calc(var(--safe-bottom) + var(--banner) + 34px)}.zoom .icon-btn{width:34px;height:34px;border-radius:11px}.zoom svg{width:18px;height:18px;stroke-width:2.8}.menu{position:absolute;inset:0;background:var(--bg);display:flex;flex-direction:column;align-items:center;padding:calc(var(--safe-top) + 56px) 22px calc(var(--safe-bottom) + 24px);transition:opacity .35s,transform .35s}.menu-head{text-align:center;margin-bottom:30px}.logo{font-size:44px;font-weight:900;letter-spacing:-1px}.logo:after{content:"";display:block;width:46px;height:6px;border-radius:3px;margin:6px auto 0;background:linear-gradient(90deg,#2bb3a3,#ff7a59,#4f8cff,#a66cff)}.tagline{color:var(--ink-soft);font-weight:700;margin-top:10px}.menu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;width:100%;max-width:360px}.lvl{aspect-ratio:1;border-radius:20px;background:var(--card);box-shadow:0 3px 0 var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;animation:rise .4s cubic-bezier(.2,1.4,.4,1) both;transition:transform .12s}.lvl:active{transform:scale(.92)}.lvl .n{font-size:22px;font-weight:900}.lvl .stars{font-size:11px;color:#f5b83d;letter-spacing:1px;height:14px}.lvl.done{background:#fff}.lvl.current{background:var(--ink);color:#fff;box-shadow:0 3px #1d2129}@keyframes rise{0%{opacity:0;transform:translateY(14px) scale(.9)}}.menu .sound{position:absolute;right:16px;top:calc(var(--safe-top) + 14px)}.win{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 24px;pointer-events:none!important}.win-card{width:100%;max-width:340px;background:var(--card);border-radius:28px;padding:20px 20px 18px;text-align:center;box-shadow:0 3px 0 var(--line),0 18px 50px #3c321e2e;opacity:0;transform:scale(.82);transition:opacity .2s,transform .45s cubic-bezier(.2,1.4,.4,1)}.win.in .win-card{opacity:1;transform:none;pointer-events:auto}.win-title{font-size:28px;font-weight:900}.win-stars{font-size:38px;letter-spacing:6px;color:#e3dccd;margin:2px 0}.win-stars span{display:inline-block}.win-stars span.on{color:#f5b83d;animation:star .5s cubic-bezier(.2,1.8,.4,1) both}@keyframes star{0%{transform:scale(0) rotate(-40deg)}}.win-text{color:var(--ink-soft);font-weight:700;margin-bottom:16px}.win-row{display:flex;gap:10px}.btn{flex:1;height:54px;border-radius:18px;background:#efe8db;font-weight:900;font-size:17px;box-shadow:0 3px 0 var(--line);transition:transform .12s}.btn:active{transform:scale(.95)}.btn.primary{background:var(--ink);color:#fff;box-shadow:0 3px #1d2129}.coach,.coach-hand,.coach-ring,.coach-trail{pointer-events:none!important}.coach{position:absolute;left:14px;right:14px;top:calc(var(--safe-top) + 84px);min-height:68px;padding:12px 18px 11px;border-radius:20px;background:var(--card);box-shadow:0 3px 0 var(--line),0 10px 26px #3c321e1a;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;opacity:0;transform:translateY(-10px);transition:opacity .35s,transform .35s,background .2s}.coach.in{opacity:1;transform:none}.coach-text{font-weight:800;font-size:17px;line-height:1.3}.coach-text b{color:var(--accent);font-weight:900}.coach.warn{background:#fff1ec}.coach.warn .coach-text{color:var(--bad)}.coach.final .coach-text{color:var(--ink)}.coach-dots{display:flex;gap:5px}.coach-dots:empty{display:none}.coach-dots i{width:8px;height:8px;border-radius:50%;background:var(--line);transition:background .25s,transform .25s}.coach-dots i.on{background:var(--ok)}.coach-dots i.cur{background:var(--accent);transform:scale(1.3)}.coach.in.pop{animation:coach-pop .42s cubic-bezier(.3,1.6,.5,1)}.coach.in.good{box-shadow:0 3px 0 var(--line),0 0 0 3px #3fbf7f59,0 10px 26px #3c321e1a}@keyframes coach-pop{0%{transform:scale(.94)}60%{transform:scale(1.03)}to{transform:none}}.coach-hand{position:absolute;left:0;top:0;width:52px;height:60px;transform-origin:17px 4px;opacity:0;z-index:5;will-change:transform,opacity}.coach-hand-svg{width:52px;height:60px;filter:drop-shadow(0 4px 6px rgba(47,52,64,.3))}.coach-hand-svg path{fill:#fff;stroke:var(--ink);stroke-width:2.6}.coach-hand-svg .crease{fill:none;stroke-width:2;opacity:.5}.coach-ghost{position:absolute;left:0;top:0;width:64px;height:64px;opacity:0;z-index:4;pointer-events:none!important;filter:drop-shadow(0 8px 10px rgba(47,52,64,.25));will-change:transform,opacity}.coach-hand.mirror .coach-hand-svg{transform:scaleX(-1)}.coach-ring{position:absolute;left:0;top:0;width:46px;height:46px;border-radius:50%;border:3px solid var(--accent);opacity:0;z-index:4}.coach-trail{position:fixed;left:0;top:0;width:100vw;height:100vh;opacity:0;z-index:3;overflow:visible;transition:opacity .15s}.coach-trail line{stroke:var(--accent);stroke-width:5;stroke-linecap:round;stroke-dasharray:2 11;fill:none}