.mole { display: block; width: 100%; height: auto; overflow: visible; }
.mole .up { transform-origin: 512px 700px; }
.mole .fx path { fill: none; stroke: #191919; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.mole .fx circle { fill: #191919; }

.s-icon .ink path { stroke: #191919; stroke-width: var(--w, 0); stroke-linejoin: round; }
.s-icon .nose path { stroke: #E03E3E; stroke-width: var(--w, 0); }

.mole.enter { animation: m-enter .32s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes m-enter { from { opacity: 0; transform: scale(.94) translateY(6px); } }

/* 平时：呼吸 + 眨眼 */
.s-idle .up { animation: m-breathe 3.6s ease-in-out infinite; }
.s-idle .eyes, .s-listen .eyes, .s-dig .eyes, .s-wait .eyes { animation: m-blink 4.2s infinite; }
@keyframes m-breathe { 50% { transform: scale(1.006, 1.018); } }
@keyframes m-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }

/* 听你说：头随声音轻轻摆 */
.s-listen .up { animation: m-listen 1.8s ease-in-out infinite; }
@keyframes m-listen { 0%, 100% { transform: skewX(0); } 30% { transform: skewX(-2.4deg) scaleY(1.012); } 70% { transform: skewX(1.6deg); } }

/* 正在挖：一下一下往下刨，洞口飞土 */
.s-dig .up { animation: m-dig .9s cubic-bezier(.5, 0, .5, 1) infinite; }
@keyframes m-dig { 0%, 100% { transform: scale(1, 1); } 35% { transform: scale(1.012, .972) skewX(-1deg); } 60% { transform: scale(.996, 1.01); } }
.fx-speck { animation: m-speck .9s ease-out infinite; opacity: 0; }
@keyframes m-speck {
  0% { opacity: 0; transform: translate(0, 0); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), -70px); }
}

/* 等你决定：隔一会儿探一下身 */
.s-wait .up { animation: m-wait 2.6s cubic-bezier(.3, 0, .2, 1) infinite; }
@keyframes m-wait { 0%, 55%, 100% { transform: scale(1, 1); } 66% { transform: scale(.99, 1.045); } 76% { transform: scale(1.006, .99); } 84% { transform: scale(1, 1.008); } }

/* 挖到了：弹一下 + 闪光 */
.s-found .up { animation: m-found 1.6s cubic-bezier(.3, 0, .2, 1) infinite; }
@keyframes m-found { 0%, 100% { transform: scale(1, 1); } 18% { transform: scale(1.02, .96); } 38% { transform: scale(.985, 1.06); } 56% { transform: scale(1.01, .985); } 70% { transform: scale(1, 1); } }
.fx-star { animation: m-star 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; opacity: 0; }
@keyframes m-star { 0%, 100% { opacity: 0; scale: .4; } 40% { opacity: 1; scale: 1; } 70% { opacity: 0; scale: .7; } }

/* 碰壁了：晃两下，停一停 */
.s-error .up { animation: m-error 2.4s ease-in-out infinite; }
@keyframes m-error { 0%, 40%, 100% { transform: skewX(0); } 46% { transform: skewX(-3deg); } 54% { transform: skewX(2.6deg); } 62% { transform: skewX(-1.6deg); } 70% { transform: skewX(.6deg); } }

/* 睡着了：慢呼吸，z 往上飘 */
.s-sleep .up { animation: m-sleep 4.4s ease-in-out infinite; }
@keyframes m-sleep { 50% { transform: scale(1.01, 1.03); } }
.fx-z { animation: m-z 3.3s ease-out infinite; opacity: 0; }
@keyframes m-z {
  0% { opacity: 0; translate: 0 0; scale: .6; }
  20% { opacity: 1; }
  100% { opacity: 0; translate: 50px -120px; scale: 1.1; }
}

/* 在想：抬头慢慢歪，眨眼 */
.s-think .up { animation: m-think 3.2s ease-in-out infinite; }
.s-think .eyes, .s-read .eyes { animation: m-blink 3.6s infinite; }
@keyframes m-think { 0%, 100% { transform: skewX(0); } 40% { transform: skewX(-2deg) scale(1, 1.012); } 70% { transform: skewX(1deg); } }

/* 在读：凑近纸卷，左右嗅 */
.s-read .up { animation: m-read 1.6s ease-in-out infinite; }
@keyframes m-read { 0%, 100% { transform: skewX(0) scaleY(1); } 25% { transform: skewX(2deg) scaleY(.985); } 50% { transform: skewX(0) scaleY(1); } 75% { transform: skewX(-2deg) scaleY(.985); } }

/* 上线了：高高跳起，闪星 */
.s-launch .up { animation: m-launch 1.4s cubic-bezier(.3, 0, .2, 1) infinite; }
@keyframes m-launch { 0%, 100% { transform: scale(1, 1); } 20% { transform: scale(1.03, .94); } 42% { transform: scale(.97, 1.08); } 62% { transform: scale(1.015, .98); } 78% { transform: scale(1, 1); } }

/* ---------- Mo 状态徽章 ---------- */
.mob { position: relative; display: inline-block; width: var(--s, 40px); height: var(--s, 40px); flex: none; }
.mob svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mob-ring { transform: rotate(-90deg); }
.mob-ring circle { fill: #fff; stroke-width: 5; }
.mob-ring .r0 { stroke: #EDEDEB; }
.mob-ring .r1 { fill: none; stroke-linecap: round; stroke: var(--rc, #A5A29C); transition: stroke-dashoffset .6s cubic-bezier(.2,.8,.2,1); }
.mob-head { inset: 14% !important; width: 72% !important; height: 72% !important; }
.mob-head .ink path { stroke: #191919; stroke-width: 22; stroke-linejoin: round; }
.mob-head .nose path { stroke: #E03E3E; stroke-width: 22; }
.mob .head { transform-origin: 530px 900px; }
.mob .bx path, .mob .bx circle { fill: none; stroke: var(--rc, #191919); stroke-width: 26; stroke-linecap: round; stroke-linejoin: round; }
.mob .bx-dirt circle, .mob .bx-dots circle { fill: var(--rc); stroke: none; }
.mob .bx-q circle:first-child { fill: #fff; }
.mob .bx-q circle:last-child { fill: var(--rc); stroke: none; }

.ring-run { --rc: #2F80ED; } .ring-think { --rc: #9065B0; } .ring-wait { --rc: #E8853A; }
.ring-done { --rc: #3FA46A; } .ring-err { --rc: #D44C47; } .ring-off { --rc: #C8C6C1; } .ring-idle { --rc: #A5A29C; }
.ring-run .r1 { animation: mb-ringspin 1.6s linear infinite; transform-origin: 50px 50px; }
@keyframes mb-ringspin { to { transform: rotate(360deg); } }

.mb-dig .head { animation: mb-dig .7s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes mb-dig { 50% { transform: translateY(28px) rotate(-4deg); } }
.mb-dig .bx-dirt circle { animation: mb-dirt .7s ease-out infinite; opacity: 0; }
.mb-dig .bx-dirt circle:nth-child(2) { animation-delay: .23s; }
.mb-dig .bx-dirt circle:nth-child(3) { animation-delay: .46s; }
@keyframes mb-dirt { 0% { opacity: 0; transform: translate(0,0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(0,-160px); } }

.mb-think .head { animation: mb-tilt 2.4s ease-in-out infinite; }
@keyframes mb-tilt { 50% { transform: rotate(-6deg); } }
.mb-think .bx-dots circle { animation: mb-dot 1.2s ease-in-out infinite; }
.mb-think .bx-dots circle:nth-child(2) { animation-delay: .2s; }
.mb-think .bx-dots circle:nth-child(3) { animation-delay: .4s; }
@keyframes mb-dot { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }

.mb-read .head { animation: mb-sniff 1.1s ease-in-out infinite; }
@keyframes mb-sniff { 25% { transform: translateX(10px) rotate(2deg); } 50% { transform: none; } 75% { transform: translateX(10px) rotate(2deg); } }
.mb-read .bx-arcs path { animation: mb-dot 1.4s ease-in-out infinite; }
.mb-read .bx-arcs path:nth-child(2) { animation-delay: .3s; }

.mb-wait .head { animation: mb-peek 2.6s cubic-bezier(.3,0,.2,1) infinite; }
@keyframes mb-peek { 0%, 55%, 100% { transform: none; } 68% { transform: translateY(-46px); } 80% { transform: translateY(6px); } }
.mb-wait .bx-q { animation: mb-pop 2.6s cubic-bezier(.3,1.6,.4,1) infinite; transform-origin: 820px 210px; }
@keyframes mb-pop { 0%, 55% { transform: scale(.6); opacity: .5; } 70%, 100% { transform: scale(1); opacity: 1; } }

.mb-done .head { animation: mb-hop 1.6s cubic-bezier(.3,0,.2,1) infinite; }
@keyframes mb-hop { 0%, 60%, 100% { transform: none; } 20% { transform: translateY(-40px); } 35% { transform: translateY(6px) scaleY(.96); } }
.mb-done .bx-spark path { animation: mb-twinkle 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.mb-done .bx-spark path:nth-child(n+3) { animation-delay: .3s; }
@keyframes mb-twinkle { 0%, 100% { opacity: 0; scale: .4; } 40% { opacity: 1; scale: 1; } }

.mb-error .head { animation: mb-shake 2.2s ease-in-out infinite; }
@keyframes mb-shake { 0%, 50%, 100% { transform: none; } 56% { transform: rotate(-7deg); } 64% { transform: rotate(6deg); } 72% { transform: rotate(-4deg); } }
.mb-error .bx-swirl { animation: mb-swirl 2.2s linear infinite; transform-origin: 510px 170px; }
@keyframes mb-swirl { to { transform: rotate(360deg); } }

.mb-sleep .head { transform: translateY(40px) rotate(8deg); opacity: .55; }
.mb-sleep .bx-z path { animation: mb-z 3s ease-out infinite; opacity: 0; }
.mb-sleep .bx-z path:nth-child(2) { animation-delay: 1.5s; }
@keyframes mb-z { 0% { opacity: 0; transform: translate(0,30px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(40px,-80px); } }

/* 缩小版场景徽章 */
.mbs .mob-scene { position: absolute; inset: 9%; border-radius: 50%; overflow: hidden; background: #fff; }
.mbs .mob-scene .mole { width: 100%; height: 100%; }
.mbs .mob-scene .ink path { stroke: #191919; stroke-width: var(--bw, 10); stroke-linejoin: round; }
.mbs .mob-scene .nose path { stroke: #E03E3E; stroke-width: var(--bw, 10); }
.mbs .mob-scene .fx path { stroke-width: 14; }
.mbs .mob-ring circle { fill: none; }
.mbs.ring-run:not(.has-p) .r1, .mbs.ring-think:not(.has-p) .r1 { stroke-dasharray: 72 217 !important; stroke-dashoffset: 0 !important; }

@media (prefers-reduced-motion: reduce) {
  .mob *, .mob { animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .mole *, .mole { animation: none !important; }
}