/* 小月：宠物 + 呼吸边框。只依赖外层容器（需设 container-type:size），背景透明，以后 App 直接加载。 */
.ym-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:50;border-radius:var(--ym-radius,0);--c:70,175,255;font-family:system-ui,-apple-system,"PingFang SC","Noto Sans SC",sans-serif}
.ym-layer[data-border=alert]{--c:255,140,40}
.ym-layer[data-border=done]{--c:60,215,130}
.ym-layer[data-border=error]{--c:255,80,80}

/* —— 边框：只动 opacity / transform，交给显卡合成 —— */
.ym-glow{position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .5s;will-change:opacity;box-shadow:inset 0 0 0 1.5px rgba(var(--c),.95),inset 0 0 14px 3px rgba(var(--c),.9),inset 0 0 44px 10px rgba(var(--c),.42)}
[data-border=breathe] .ym-glow{animation:ym-breathe 3.6s ease-in-out infinite}
[data-border=level] .ym-glow{transition:opacity .08s linear}
[data-border=work] .ym-glow{opacity:.45}
[data-border=alert] .ym-glow{animation:ym-pulse .8s ease-in-out infinite}
[data-border=done] .ym-glow{opacity:.75}
[data-border=error] .ym-glow{animation:ym-pulse .45s ease-in-out 3}
@keyframes ym-breathe{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes ym-pulse{0%,100%{opacity:.2}50%{opacity:1}}

.ym-flow{position:absolute;inset:0;overflow:hidden;border-radius:inherit;padding:calc(3px + .5cqw);opacity:0;transition:opacity .4s;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.ym-flow i{position:absolute;left:50%;top:50%;width:max(230cqw,230cqh);height:max(230cqw,230cqh);margin:calc(max(230cqw,230cqh)/-2) 0 0 calc(max(230cqw,230cqh)/-2);will-change:transform;background:conic-gradient(rgba(var(--c),0) 0 14%,rgba(var(--c),1) 44%,#fff 49%,rgba(var(--c),0) 50% 64%,rgba(var(--c),1) 94%,#fff 99%,rgba(var(--c),0) 100%)}
[data-border=work] .ym-flow,[data-border=done] .ym-flow{opacity:1}
[data-border=work] .ym-flow i{animation:ym-spin 3.4s linear infinite}
[data-border=done] .ym-flow i{animation:ym-spin 1.3s linear 1}
@keyframes ym-spin{to{transform:rotate(360deg)}}

.ym-draw{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .6s}
.ym-draw.on{opacity:1;transition:none}
.ym-draw rect{fill:none;stroke:rgb(70,175,255);stroke-width:4;stroke-linecap:round}
.ym-flash{position:absolute;inset:0;background:#fff;opacity:0}
.ym-flash.on{animation:ym-flash .28s ease-out}
@keyframes ym-flash{0%{opacity:.75}100%{opacity:0}}
.ym-shot .ym-glow,.ym-shot .ym-flow,.ym-shot .ym-pos{visibility:hidden}

/* —— 待机光点：沿屏幕边缘慢慢走 —— */
.ym-dot{position:absolute;left:0;top:0;width:14px;height:14px;pointer-events:auto;cursor:pointer;animation:ym-orbit 70s linear -24s infinite;will-change:transform}
.ym-dot::before{content:"";position:absolute;inset:-20px}
.ym-dot::after{content:"";position:absolute;inset:-7px;border-radius:50%;background:radial-gradient(circle,#fff 0 22%,rgba(70,175,255,.95) 34%,rgba(70,175,255,.3) 58%,rgba(70,175,255,0) 72%);animation:ym-twinkle 2.8s ease-in-out infinite}
.ym-dot[hidden]{display:none}
@keyframes ym-twinkle{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes ym-orbit{0%{transform:translate(6px,6px)}16%{transform:translate(calc(100cqw - 20px),6px)}50%{transform:translate(calc(100cqw - 20px),calc(100cqh - 20px))}66%{transform:translate(6px,calc(100cqh - 20px))}100%{transform:translate(6px,6px)}}

/* —— 宠物 —— */
.ym-pos{position:absolute;right:3cqw;bottom:14cqh;width:min(38cqw,190px);aspect-ratio:1;pointer-events:auto;touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transform:translate3d(var(--dx,0),var(--dy,0),0)}
.ym-pos[hidden]{display:none}
.ym-pet{width:100%;height:100%;transform-origin:50% 80%;transition:opacity .3s}
.ym-pet.in{animation:ym-in .75s cubic-bezier(.3,1.5,.5,1)}
.ym-pet.out{animation:ym-out .5s ease-in forwards}
.ym-pet.gone{opacity:0}
.ym-pet svg{display:block;width:100%;height:100%;overflow:visible}
.ym-pet text{font-family:inherit;font-weight:700;text-anchor:middle}
@keyframes ym-in{0%{transform:scale(.1) translateY(60%);opacity:0}100%{transform:none;opacity:1}}
@keyframes ym-out{100%{transform:scale(.08) translateY(70%);opacity:0}}

.ym-label{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);max-width:130%;padding:3px 10px;border-radius:99px;background:rgba(12,22,40,.74);color:#fff;font-size:12px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .2s}
.ym-label.on{opacity:1}
.ym-cap{position:absolute;left:4cqw;right:4cqw;bottom:2.5cqh;padding:8px 13px;border-radius:14px;background:rgba(12,22,40,.8);color:#fff;font-size:14px;line-height:1.5;opacity:0;transition:opacity .25s}
.ym-cap.on{opacity:1}
.ym-cap.me{background:rgba(32,96,170,.88)}

/* 身体默认动作 */
.ym-tilt{transform-origin:120px 170px;transition:transform .35s ease}
.ym-body{animation:ym-float 3.2s ease-in-out infinite}
.ym-ear{transform-box:fill-box;transform-origin:50% 100%;transition:transform .3s;animation:ym-sway 3.8s ease-in-out infinite}
.ym-ear.r{animation-delay:-1.9s}
.ym-eyes{transform-box:fill-box;transform-origin:center;animation:ym-blink 4.6s infinite}
.ym-look{transition:transform .3s}
.ym-hand{transition:transform .38s cubic-bezier(.3,1.4,.5,1)}
.ym-hand>g{animation:ym-float 2.7s ease-in-out infinite}
.ym-hand.r>g{animation-delay:-1.2s}
.ym-prop,.e-happy,.e-closed,.e-x,.m-open,.m-big,.b-det,.b-worry,.ym-arcs,.ym-sweat{display:none}
@keyframes ym-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes ym-sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes ym-blink{0%,93%,100%{transform:scaleY(1)}96.5%{transform:scaleY(.08)}}
@keyframes ym-pop{0%{transform:scale(0)}70%{transform:scale(1.12)}100%{transform:scale(1)}}

/* 语音：在听 / 在说（可以和任何动作叠加） */
[data-v=listen] .ym-tilt{transform:rotate(-8deg)}
[data-v=listen] .ym-ear{transform:scale(1.2);animation:none}
[data-v=listen] .ym-arcs{display:inline}
[data-v=speak] .m-smile{display:none}
[data-v=speak] .m-open{display:inline}
.m-open,.m-big{transform-box:fill-box;transform-origin:center}

/* 接任务：握拳 */
[data-s=accept] .ym-hand.l{transform:translate(16px,8px)}
[data-s=accept] .ym-hand.r{transform:translate(-8px,-58px)}
[data-s=accept] .ym-hand.r>g{animation:ym-punch .6s ease-in-out infinite}
[data-s=accept] .b-det{display:inline}
[data-s=accept] .ym-p-spark{display:inline}
.ym-p-spark text{transform-box:fill-box;transform-origin:center;animation:ym-twinkle-s .9s ease-in-out infinite}
@keyframes ym-punch{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes ym-twinkle-s{0%,100%{transform:scale(.5);opacity:.3}50%{transform:scale(1.2);opacity:1}}

/* 打开 App：推门 */
[data-s=open] .ym-p-door{display:inline}
[data-s=open] .ym-tilt{transform:rotate(-7deg)}
[data-s=open] .ym-hand.l{transform:translate(-8px,-16px)}
[data-s=open] .ym-hand.l>g{animation:ym-push .55s ease-out 2}
[data-s=open] .ym-hand.r{transform:translate(-8px,6px)}
[data-s=open] .ym-look{transform:translate(-5px,0)}
.ym-p-door{transform-box:fill-box;transform-origin:50% 100%;animation:ym-pop .3s ease-out}
.ym-door-leaf{transform-box:fill-box;transform-origin:0 50%;animation:ym-door .8s .25s ease-in-out forwards}
.ym-door-light{opacity:0;animation:ym-glowin .6s .35s ease-out forwards}
@keyframes ym-door{to{transform:scaleX(.16)}}
@keyframes ym-glowin{to{opacity:1}}
@keyframes ym-push{0%,100%{transform:translateX(0)}50%{transform:translateX(-10px)}}

/* 读界面 / 翻页：捧书 */
[data-s=read] .ym-p-book,[data-s=scroll] .ym-p-book{display:inline}
[data-s=read] .ym-hand.l,[data-s=scroll] .ym-hand.l{transform:translate(20px,36px)}
[data-s=read] .ym-hand.r,[data-s=scroll] .ym-hand.r{transform:translate(-20px,36px)}
[data-s=read] .ym-look{animation:ym-scan 1.7s ease-in-out infinite}
[data-s=scroll] .ym-look{transform:translate(0,5px)}
.ym-page{transform-origin:120px 180px;opacity:0}
[data-s=read] .ym-page{animation:ym-flip 3s ease-in-out infinite}
[data-s=scroll] .ym-page{animation:ym-flip .75s ease-in-out infinite}
[data-s=scroll] .ym-hand.r>g{animation:ym-swipe .75s ease-in-out infinite}
@keyframes ym-scan{0%,100%{transform:translate(-4px,5px)}50%{transform:translate(4px,5px)}}
@keyframes ym-flip{0%,55%{transform:scaleX(1);opacity:0}58%{opacity:1}90%{transform:scaleX(-1);opacity:1}93%,100%{transform:scaleX(-1);opacity:0}}
@keyframes ym-swipe{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,-8px)}}

/* 打字 */
[data-s=type] .ym-p-keys{display:inline}
[data-s=type] .ym-hand.l{transform:translate(48px,28px)}
[data-s=type] .ym-hand.r{transform:translate(-48px,28px)}
[data-s=type] .ym-look{transform:translate(0,6px)}
[data-s=type] .ym-hand.l>g{animation:ym-key .26s ease-in-out infinite}
[data-s=type] .ym-hand.r>g{animation:ym-key .26s ease-in-out -.13s infinite}
.ym-fly{animation:ym-rise 1.2s ease-out infinite;opacity:0}
.ym-fly.b{animation-delay:.4s}.ym-fly.c{animation-delay:.8s}
@keyframes ym-key{0%,100%{transform:translateY(-3px)}50%{transform:translateY(5px)}}
@keyframes ym-rise{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(-54px);opacity:0}}

/* 戳一下 */
[data-s=tap] .ym-p-ripple{display:inline}
[data-s=tap] .ym-hand.r{transform:translate(-52px,48px)}
[data-s=tap] .ym-hand.l{transform:translate(8px,4px)}
[data-s=tap] .ym-hand.r>g{animation:ym-poke .8s ease-in-out infinite}
[data-s=tap] .ym-look{transform:translate(3px,6px)}
.ym-p-ripple circle{transform-box:fill-box;transform-origin:center;animation:ym-ripple .8s ease-out infinite}
@keyframes ym-poke{0%,100%{transform:translate(4px,-6px)}45%{transform:translate(-2px,5px)}}
@keyframes ym-ripple{0%,35%{transform:scale(.15);opacity:0}45%{opacity:1}100%{transform:scale(1);opacity:0}}

/* 思考：托腮 + 齿轮 */
[data-s=think] .ym-p-gear{display:inline}
[data-s=think] .ym-tilt{transform:rotate(5deg)}
[data-s=think] .ym-hand.r{transform:translate(-38px,14px)}
[data-s=think] .ym-hand.l{transform:translate(6px,8px)}
[data-s=think] .ym-look{animation:ym-ponder 3s ease-in-out infinite}
.ym-gear{transform-box:fill-box;transform-origin:center;animation:ym-spin 2.6s linear infinite}
.ym-q{transform-box:fill-box;transform-origin:center;animation:ym-twinkle-s 1.5s ease-in-out infinite}
@keyframes ym-ponder{0%,100%{transform:translate(4px,-5px)}50%{transform:translate(-2px,-6px)}}

/* 两个选择：举卡片 */
[data-s=ask] .ym-p-cards{display:inline}
[data-s=ask] .ym-hand.l{transform:translate(-22px,-30px)}
[data-s=ask] .ym-hand.r{transform:translate(22px,-30px)}
[data-s=ask] .ym-look{animation:ym-lr 2s steps(1) infinite}
.ym-card{transform-box:fill-box;transform-origin:50% 100%;animation:ym-bob 2s ease-in-out infinite}
.ym-card.b{animation-delay:-1s}
[data-s=ask] .ym-hand.l>g{animation:ym-bob 2s ease-in-out infinite}
[data-s=ask] .ym-hand.r>g{animation:ym-bob 2s ease-in-out -1s infinite}
@keyframes ym-lr{0%,100%{transform:translate(-5px,-2px)}50%{transform:translate(5px,-2px)}}
@keyframes ym-bob{0%,100%{transform:translateY(4px)}50%{transform:translateY(-8px)}}

/* 求助：举牌 */
[data-s=help] .ym-p-sign,[data-s=help] .b-worry,[data-s=help] .ym-sweat{display:inline}
[data-s=help] .ym-hand.l{transform:translate(46px,-78px)}
[data-s=help] .ym-hand.r{transform:translate(-46px,-78px)}
[data-s=help] .ym-body{animation:ym-shake .5s ease-in-out infinite}
.ym-p-sign{transform-origin:120px 76px;animation:ym-wave .8s ease-in-out infinite}
.ym-sweat path{animation:ym-drop 1.1s ease-in infinite}
@keyframes ym-shake{0%,100%{transform:translateX(-2px)}50%{transform:translateX(2px)}}
@keyframes ym-wave{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes ym-drop{0%{transform:translateY(-4px);opacity:0}25%{opacity:1}100%{transform:translateY(16px);opacity:0}}

/* 截图：举相机 */
[data-s=camera] .ym-p-camera{display:inline}
[data-s=camera] .ym-hand.l{transform:translate(30px,34px)}
[data-s=camera] .ym-hand.r{transform:translate(-30px,34px)}
[data-s=camera] .e-open{display:none}
[data-s=camera] .e-wink{display:inline}
.e-wink{display:none}

/* 完成：撒花 */
[data-s=done] .ym-p-confetti,[data-s=done] .e-happy{display:inline}
[data-s=done] .e-open{display:none}
[data-s=done] .ym-hand.l{transform:translate(-4px,-72px)}
[data-s=done] .ym-hand.r{transform:translate(4px,-72px)}
[data-s=done] .ym-hand>g{animation:ym-punch .5s ease-in-out infinite}
[data-s=done] .ym-body{animation:ym-jump .7s cubic-bezier(.3,.1,.4,1) infinite}
.ym-p-confetti rect{animation:ym-burst 1.5s ease-out infinite}
@keyframes ym-jump{0%,100%{transform:translateY(0)}45%{transform:translateY(-20px)}}
@keyframes ym-burst{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}

/* 出错：挠头 */
[data-s=error] .e-x,[data-s=error] .ym-sweat{display:inline}
[data-s=error] .e-open{display:none}
[data-s=error] .ym-tilt{transform:rotate(6deg)}
[data-s=error] .ym-hand.r{transform:translate(-42px,-72px)}
[data-s=error] .ym-hand.r>g{animation:ym-scratch .3s ease-in-out infinite}
@keyframes ym-scratch{0%,100%{transform:translate(-5px,0)}50%{transform:translate(5px,-3px)}}

/* 接通：伸懒腰 / 挂断：打哈欠 */
[data-s=wake] .ym-hand.l{transform:translate(4px,-66px)}
[data-s=wake] .ym-hand.r{transform:translate(-4px,-66px)}
[data-s=wake] .ym-body{transform-box:fill-box;transform-origin:50% 100%;animation:ym-stretch 1.1s ease-in-out 1}
[data-s=wake] .e-happy{display:inline}
[data-s=wake] .e-open{display:none}
@keyframes ym-stretch{0%,100%{transform:scale(1)}45%{transform:scale(.9,1.14)}}
[data-s=yawn] .e-closed,[data-s=yawn] .m-big{display:inline}
[data-s=yawn] .e-open,[data-s=yawn] .m-smile,[data-s=yawn] .m-open{display:none}
[data-s=yawn] .ym-hand.r{transform:translate(-56px,-4px)}
[data-s=yawn] .ym-tilt{transform:rotate(-4deg)}