/* 字靈跟隨目前畫面的底部控件；不增加新的磨砂層。 */
.nav-pet {
    position: fixed;
    z-index: 1100;
    left: 50%;
    bottom: var(--nav-pet-bottom, 55px);
    width: 66px;
    height: 68px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    transform: translate3d(-50%, 0, 0);
    transition: bottom .32s cubic-bezier(.22,.7,.2,1), left .32s cubic-bezier(.22,.7,.2,1);
}
.nav-pet.hidden { display: none; }
.nav-pet-floor { bottom: calc(var(--nav-pet-bottom, 8px) + env(safe-area-inset-bottom, 0px)); }
.nav-pet-ground-shadow {
    position: fixed;
    z-index: 1099;
    left: 50%;
    bottom: var(--nav-pet-bottom, 55px);
    width: 34px;
    height: 6px;
    border-radius: 50%;
    background: rgba(27, 18, 47, .48);
    filter: blur(2px);
    transform: translateX(-50%) scale(var(--nav-pet-shadow-scale, 1));
    opacity: .55;
    pointer-events: none;
    transition: bottom .32s cubic-bezier(.22,.7,.2,1), left .32s cubic-bezier(.22,.7,.2,1), transform .2s ease, opacity .2s ease;
}
.nav-pet-ground-shadow.hidden { display: none; }
.nav-pet-ground-shadow.nav-pet-floor { bottom: calc(var(--nav-pet-bottom, 8px) + env(safe-area-inset-bottom, 0px)); }
.nav-pet-shadow-lifted { opacity: .27; }
.nav-pet:focus-visible { outline: 2px solid #f5d191; outline-offset: 3px; border-radius: 45%; }
.nav-pet.nav-pet-dragging { cursor: grabbing; }
.nav-pet.nav-pet-dragging { transition: none; }
.nav-pet-art {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    transform-origin: 50% 83%;
    animation: nav-pet-breathe 3.4s ease-in-out infinite;
    opacity: .82;
    transition: opacity 1.6s ease;
}
/* Theme colors live in CSS so changing the current background needs no image regeneration. */
.nav-pet { --nav-pet-theme: var(--bg-color, #0a0a0a); }
html[data-personal-background] .nav-pet { --nav-pet-theme: rgb(var(--personal-background-rgb, 18, 24, 38)); }
.nav-pet #nav-pet-glass stop:nth-child(1) { stop-color: color-mix(in srgb, var(--nav-pet-theme) 67%, #fffaf1); }
.nav-pet #nav-pet-glass stop:nth-child(2) { stop-color: color-mix(in srgb, var(--nav-pet-theme) 67%, #e8dafa); }
.nav-pet #nav-pet-glass stop:nth-child(3) { stop-color: color-mix(in srgb, var(--nav-pet-theme) 67%, #a89cdb); }
.nav-pet #nav-pet-edge stop { stop-color: color-mix(in srgb, var(--nav-pet-theme) 58%, #c2c8ff); }
.nav-pet #nav-pet-core stop:first-child { stop-color: color-mix(in srgb, var(--nav-pet-theme) 65%, #fff9d9); }
.nav-pet .nav-pet-arm-left, .nav-pet .nav-pet-arm-right,
.nav-pet .nav-pet-foot-left, .nav-pet .nav-pet-foot-right {
    fill: color-mix(in srgb, var(--nav-pet-theme) 64%, #c8b7e7);
    stroke: color-mix(in srgb, var(--nav-pet-theme) 52%, #fff1e2);
}
.nav-pet #nav-pet-glass stop, .nav-pet #nav-pet-edge stop, .nav-pet #nav-pet-core stop,
.nav-pet .nav-pet-arm-left, .nav-pet .nav-pet-arm-right,
.nav-pet .nav-pet-foot-left, .nav-pet .nav-pet-foot-right {
    transition: stop-color 1.6s ease, fill 1.6s ease, stroke 1.6s ease;
}
.nav-pet-revealed .nav-pet-art { opacity: 1; transition-duration: 1.1s; }
.nav-pet-revealed #nav-pet-glass stop:nth-child(1) { stop-color: #fffaf1; }
.nav-pet-revealed #nav-pet-glass stop:nth-child(2) { stop-color: #e8dafa; }
.nav-pet-revealed #nav-pet-glass stop:nth-child(3) { stop-color: #a89cdb; }
.nav-pet-revealed #nav-pet-edge stop:nth-child(1) { stop-color: #fff8e9; }
.nav-pet-revealed #nav-pet-edge stop:nth-child(2) { stop-color: #c2c8ff; }
.nav-pet-revealed #nav-pet-edge stop:nth-child(3) { stop-color: #f4bd78; }
.nav-pet-revealed #nav-pet-core stop:first-child { stop-color: #fff9d9; }
.nav-pet-revealed .nav-pet-arm-left, .nav-pet-revealed .nav-pet-arm-right,
.nav-pet-revealed .nav-pet-foot-left, .nav-pet-revealed .nav-pet-foot-right {
    fill: #c8b7e7; stroke: #fff1e2; transition-duration: 1.1s;
}
.nav-pet-body { transform-origin: 50% 80%; transition: transform .32s ease; }
.nav-pet-open-eyes { transform-origin: 50% 49%; transition: transform .09s ease; }
/* 眼睛跟著你點的地方看（--nav-pet-gaze-x/y 由 nav-pet.js 設定） */
.nav-pet-gaze { transform: translate(var(--nav-pet-gaze-x, 0px), var(--nav-pet-gaze-y, 0px)); transition: transform .28s cubic-bezier(.3,.7,.3,1); }

/* 各種表情的零件，平常都收起來 */
.nav-pet-sleep-eyes, .nav-pet-squint-eyes, .nav-pet-happy-eyes, .nav-pet-dizzy-eyes, .nav-pet-tear,
.nav-pet-yawn-mouth, .nav-pet-held-mouth, .nav-pet-giggle-mouth, .nav-pet-pout-mouth, .nav-pet-puff-cheeks,
.nav-pet-sneeze-puff, .nav-pet-zzz, .nav-pet-startle-mark, .nav-pet-sneeze-word, .nav-pet-dizzy-stars { display: none; }
.nav-pet-tear, .nav-pet-yawn-mouth, .nav-pet-puff-cheeks, .nav-pet-sneeze-puff, .nav-pet-startle-mark, .nav-pet-sneeze-word,
.nav-pet-spiral, .nav-pet-star, .nav-pet-z { transform-box: fill-box; transform-origin: center; }

/* 手從肩膀轉、腳從上緣轉 */
.nav-pet-arm-left { transform-box: fill-box; transform-origin: 100% 35%; transition: transform .16s ease; }
.nav-pet-arm-right { transform-box: fill-box; transform-origin: 0% 35%; transition: transform .16s ease; }
.nav-pet-foot-left, .nav-pet-foot-right { transform-box: fill-box; transform-origin: center top; }

/* 眼睛的切換：一次只會有一種眼睛 */
.nav-pet-blink .nav-pet-open-eyes { transform: scaleY(.08); }
.nav-pet-look-left .nav-pet-open-eyes { transform: translateX(-2px); }
.nav-pet-look-right .nav-pet-open-eyes { transform: translateX(2px); }
.nav-pet-look-around .nav-pet-open-eyes { animation: nav-pet-look-around 1.7s ease-in-out both; }
.nav-pet-sleep .nav-pet-open-eyes, .nav-pet-rub .nav-pet-open-eyes { display: none; }
.nav-pet-sleep .nav-pet-sleep-eyes, .nav-pet-rub .nav-pet-sleep-eyes { display: block; }
.nav-pet-yawn .nav-pet-open-eyes, .nav-pet-stretch .nav-pet-open-eyes, .nav-pet-sneeze .nav-pet-open-eyes, .nav-pet-puff .nav-pet-open-eyes { display: none; }
.nav-pet-yawn .nav-pet-squint-eyes, .nav-pet-stretch .nav-pet-squint-eyes, .nav-pet-sneeze .nav-pet-squint-eyes, .nav-pet-puff .nav-pet-squint-eyes { display: block; }
.nav-pet-giggle .nav-pet-open-eyes, .nav-pet-bounce .nav-pet-open-eyes, .nav-pet-wave .nav-pet-open-eyes, .nav-pet-cheer .nav-pet-open-eyes { display: none; }
.nav-pet-giggle .nav-pet-happy-eyes, .nav-pet-bounce .nav-pet-happy-eyes, .nav-pet-wave .nav-pet-happy-eyes, .nav-pet-cheer .nav-pet-happy-eyes { display: block; }
.nav-pet-startle .nav-pet-open-eyes { transform: scale(1.22); }

/* 嘴巴 */
.nav-pet-yawn .nav-pet-smile, .nav-pet-giggle .nav-pet-smile, .nav-pet-puff .nav-pet-smile,
.nav-pet-startle .nav-pet-smile, .nav-pet-sneeze .nav-pet-smile, .nav-pet-sleep .nav-pet-smile { display: none; }
.nav-pet-yawn .nav-pet-yawn-mouth { display: block; animation: nav-pet-yawn-mouth 1.8s ease-in-out both; }
.nav-pet-giggle .nav-pet-giggle-mouth, .nav-pet-cheer .nav-pet-giggle-mouth { display: block; }
.nav-pet-cheer .nav-pet-smile { display: none; }
.nav-pet-puff .nav-pet-pout-mouth { display: block; }
.nav-pet-startle .nav-pet-held-mouth, .nav-pet-sneeze .nav-pet-held-mouth, .nav-pet-sleep .nav-pet-held-mouth { display: block; }
.nav-pet-sleep .nav-pet-held-mouth { transform-box: fill-box; transform-origin: center; transform: scale(.7); }

/* 打哈欠：身體往上伸長、手舉起、眼角一滴淚 */
.nav-pet-yawn .nav-pet-art { animation: nav-pet-yawn-body 1.8s ease-in-out both; }
.nav-pet-yawn .nav-pet-arm-left { animation: nav-pet-arm-up-left 1.8s ease-in-out both; }
.nav-pet-yawn .nav-pet-arm-right { animation: nav-pet-arm-up-right 1.8s ease-in-out both; }
.nav-pet-yawn .nav-pet-tear { display: block; animation: nav-pet-tear 1.8s ease-in both; }

/* 伸懶腰 */
.nav-pet-stretch .nav-pet-art { animation: nav-pet-stretch-body 1.5s ease-in-out both; }
.nav-pet-stretch .nav-pet-arm-left { animation: nav-pet-arm-high-left 1.5s ease-in-out both; }
.nav-pet-stretch .nav-pet-arm-right { animation: nav-pet-arm-high-right 1.5s ease-in-out both; }

/* 睡覺：z 一個個飄上去，頭慢慢點 */
.nav-pet-sleep .nav-pet-art { animation: nav-pet-sleep-breathe 4.6s ease-in-out infinite; }
.nav-pet-sleep .nav-pet-zzz { display: block; }
.nav-pet-sleep .nav-pet-z { opacity: 0; animation: nav-pet-z 3.6s ease-out infinite; }
.nav-pet-sleep .nav-pet-z:nth-child(2) { animation-delay: 1.2s; }
.nav-pet-sleep .nav-pet-z:nth-child(3) { animation-delay: 2.4s; }

/* 被叫醒：嚇一跳冒出「！」，接著揉眼睛 */
.nav-pet-startle .nav-pet-art { animation: nav-pet-startle .65s cubic-bezier(.2,.8,.3,1) both; }
.nav-pet-startle .nav-pet-startle-mark { display: block; animation: nav-pet-pop .65s ease-out both; }
.nav-pet-startle .nav-pet-arm-left { transform: translate(0,-8px) rotate(45deg); }
.nav-pet-startle .nav-pet-arm-right { transform: translate(0,-8px) rotate(-45deg); }
.nav-pet-rub .nav-pet-arm-left { animation: nav-pet-rub-left .3s ease-in-out 3 alternate both; }
.nav-pet-rub .nav-pet-arm-right { animation: nav-pet-rub-right .3s ease-in-out 3 alternate both; }
.nav-pet-rub .nav-pet-art { animation: nav-pet-sway-small .9s ease-in-out both; }

/* 揮手（點一下打招呼也會揮） */
.nav-pet-wave .nav-pet-arm-right, .nav-pet-wake .nav-pet-arm-right { animation: nav-pet-wave-arm .26s ease-in-out 4 alternate both; }
.nav-pet-wave .nav-pet-art { animation: nav-pet-tilt-right 1.2s ease-in-out both; }

/* 開心小跳兩下 */
.nav-pet-bounce .nav-pet-art { animation: nav-pet-bounce .95s ease-out both; }

/* 晃來晃去、腳輪流抬 */
.nav-pet-sway .nav-pet-art { animation: nav-pet-sway 1.5s ease-in-out both; }
.nav-pet-sway .nav-pet-foot-left { animation: nav-pet-foot-lift 0.375s ease-in-out 4 alternate both; }
.nav-pet-sway .nav-pet-foot-right { animation: nav-pet-foot-lift 0.375s ease-in-out .375s 3 alternate both; }

/* 轉一圈 */
.nav-pet-spin .nav-pet-art { animation: nav-pet-spin .95s cubic-bezier(.4,.1,.3,1) both; }

/* 打噴嚏：往後縮、吸氣，再「哈啾」往前一彈 */
.nav-pet-sneeze .nav-pet-art { animation: nav-pet-sneeze 1.4s ease-in-out both; }
.nav-pet-sneeze .nav-pet-sneeze-puff { display: block; animation: nav-pet-sneeze-puff 1.4s ease-out both; }
.nav-pet-sneeze .nav-pet-sneeze-word { display: block; animation: nav-pet-sneeze-word 1.4s ease-out both; }

/* 被連點：鼓起臉頰生氣，或咯咯笑 */
.nav-pet-puff .nav-pet-art { animation: nav-pet-puff 1.3s ease-in-out both; }
.nav-pet-puff .nav-pet-puff-cheeks { display: block; animation: nav-pet-cheeks 1.3s ease-in-out both; }
.nav-pet-giggle .nav-pet-art { animation: nav-pet-giggle 1.3s ease-in-out both; }

/* 學習中：拿書、寫字 */
.nav-pet-learning .nav-pet-body { transform: translateY(2px) scale(1,.96); }
.nav-pet-study { opacity: 0; transform: translateY(5px) scale(.85); transform-origin: 50% 60%; transition: opacity .35s ease, transform .35s ease; pointer-events: none; }
.nav-pet-learning .nav-pet-study { opacity: 1; transform: translateY(0) scale(1); }
.nav-pet-learning .nav-pet-open-eyes { transform: translateY(2px) scaleY(.85); }
.nav-pet-learning.nav-pet-blink .nav-pet-open-eyes { transform: translateY(2px) scaleY(.08); }
.nav-pet-learning.nav-pet-dragging .nav-pet-study { opacity: 0; transform: translateY(5px) scale(.85); }
.nav-pet-learning.nav-pet-dragging .nav-pet-open-eyes { transform: scale(1.08, 1.13); }
.nav-pet-pencil { transform-box: fill-box; transform-origin: center bottom; }
.nav-pet-note .nav-pet-pencil { animation: nav-pet-write .46s ease-in-out 3 alternate; }
.nav-pet-page .nav-pet-study { animation: nav-pet-turn-page .85s ease-in-out; }
.nav-pet-tilt .nav-pet-art { animation: nav-pet-tilt .85s ease-in-out both; }

/* 拖曳 */
.nav-pet-dragging .nav-pet-art {
    transform-origin: 50% 13%;
    animation: none;
    transform: rotate(var(--nav-pet-lean, 0deg)) scale(1.04);
}
.nav-pet-dragging .nav-pet-body { transform: none; transition: none; }
.nav-pet-dragging .nav-pet-open-eyes { transform: scale(1.08, 1.13); }
.nav-pet-dragging .nav-pet-smile { display: none; }
.nav-pet-dragging .nav-pet-held-mouth { display: block; }
.nav-pet-dragging .nav-pet-foot-left { animation: nav-pet-dangle-left .38s ease-in-out infinite alternate; }
.nav-pet-dragging .nav-pet-foot-right { animation: nav-pet-dangle-right .42s ease-in-out infinite alternate; }
.nav-pet-dragging .nav-pet-arm-left { transform: rotate(-23deg); }
.nav-pet-dragging .nav-pet-arm-right { transform: rotate(23deg); }

/* 轉暈：螺旋眼一直轉、頭上星星繞圈、身體搖一搖，最後甩甩頭 */
.nav-pet-spinning .nav-pet-art { transform: rotate(var(--nav-pet-lean, 0deg)) scale(1.04); }
.nav-pet-dizzy .nav-pet-art { animation: nav-pet-dizzy-wobble 2.2s ease-out both; }
.nav-pet-spinning .nav-pet-open-eyes, .nav-pet-dizzy .nav-pet-open-eyes { display: none; }
.nav-pet-spinning .nav-pet-dizzy-eyes, .nav-pet-dizzy .nav-pet-dizzy-eyes { display: block; }
.nav-pet-spinning .nav-pet-spiral, .nav-pet-dizzy .nav-pet-spiral { animation: nav-pet-spiral .8s linear infinite; }
.nav-pet-spinning .nav-pet-smile, .nav-pet-dizzy .nav-pet-smile { display: none; }
.nav-pet-spinning .nav-pet-pout-mouth, .nav-pet-dizzy .nav-pet-pout-mouth { display: block; }
.nav-pet-spinning .nav-pet-dizzy-stars, .nav-pet-dizzy .nav-pet-dizzy-stars { display: block; }
.nav-pet-spinning .nav-pet-star, .nav-pet-dizzy .nav-pet-star { animation: nav-pet-orbit 1.1s linear infinite; }
.nav-pet-spinning .nav-pet-star:nth-child(2), .nav-pet-dizzy .nav-pet-star:nth-child(2) { animation-delay: -.367s; }
.nav-pet-spinning .nav-pet-star:nth-child(3), .nav-pet-dizzy .nav-pet-star:nth-child(3) { animation-delay: -.733s; }
.nav-pet-spinning .nav-pet-spark, .nav-pet-dizzy .nav-pet-spark { animation: nav-pet-sparkle .75s ease-out infinite; }

.nav-pet-cheer .nav-pet-art, .nav-pet-wake .nav-pet-art { animation: nav-pet-hop .78s cubic-bezier(.25,.7,.25,1) both; }
.nav-pet-spark { position: absolute; z-index: 2; top: 10px; color: #fff1b0; font-size: 17px; opacity: 0; pointer-events: none; }
.nav-pet-spark-a { left: -3px; }
.nav-pet-spark-b { right: -3px; top: 18px; }
.nav-pet-cheer .nav-pet-spark, .nav-pet-wake .nav-pet-spark { animation: nav-pet-sparkle .75s ease-out both; }
.nav-pet-cheer .nav-pet-spark-b, .nav-pet-wake .nav-pet-spark-b { animation-delay: .11s; }

@keyframes nav-pet-breathe { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-2px) scale(1.025,1.035); } }
@keyframes nav-pet-sleep-breathe { 0%,100% { transform: scale(1,.91) rotate(0); } 50% { transform: scale(1.02,.95) rotate(3deg); } }
@keyframes nav-pet-tilt { 0%,100% { transform: rotate(0); } 40% { transform: rotate(-10deg); } 70% { transform: rotate(5deg); } }
@keyframes nav-pet-tilt-right { 0%,100% { transform: rotate(0); } 30%,75% { transform: rotate(6deg); } }
@keyframes nav-pet-hop { 0%,100% { transform: translateY(0) scale(1); } 28% { transform: translateY(-16px) scale(.94,1.09); } 58% { transform: translateY(0) scale(1.11,.85); } 77% { transform: translateY(-5px) scale(.97,1.03); } }
@keyframes nav-pet-look-around { 0%,100% { transform: translateX(0); } 20%,40% { transform: translateX(-2.4px); } 60%,80% { transform: translateX(2.4px); } }
@keyframes nav-pet-yawn-body { 0%,100% { transform: scale(1); } 30%,62% { transform: translateY(-3px) scale(.95,1.09); } 82% { transform: scale(1.05,.94); } }
@keyframes nav-pet-yawn-mouth { 0%,100% { transform: scale(.25); } 30%,62% { transform: scale(1.35, 1.3); } 82% { transform: scale(.4); } }
@keyframes nav-pet-arm-up-left { 0%,100% { transform: translate(0,0) rotate(0); } 30%,62% { transform: translate(1px,-9px) rotate(40deg); } }
@keyframes nav-pet-arm-up-right { 0%,100% { transform: translate(0,0) rotate(0); } 30%,62% { transform: translate(-1px,-9px) rotate(-40deg); } }
@keyframes nav-pet-tear { 0%,45% { opacity: 0; transform: scale(.3); } 60% { opacity: 1; transform: scale(1); } 90% { opacity: 1; transform: translateY(3px); } 100% { opacity: 0; transform: translateY(5px); } }
@keyframes nav-pet-stretch-body { 0%,100% { transform: scale(1); } 35%,65% { transform: translateY(-4px) scale(.94,1.12); } 85% { transform: scale(1.04,.95); } }
@keyframes nav-pet-arm-high-left { 0%,100% { transform: translate(0,0) rotate(0); } 35%,65% { transform: translate(-1px,-17px) rotate(60deg); } }
@keyframes nav-pet-arm-high-right { 0%,100% { transform: translate(0,0) rotate(0); } 35%,65% { transform: translate(1px,-17px) rotate(-60deg); } }
@keyframes nav-pet-z { 0% { opacity: 0; transform: translate(0, 4px) scale(.6); } 20% { opacity: .95; } 100% { opacity: 0; transform: translate(9px, -16px) scale(1.15); } }
@keyframes nav-pet-startle { 0% { transform: translateY(0) scale(1,.9); } 35% { transform: translateY(-11px) scale(.94,1.08); } 70% { transform: translateY(0) scale(1.06,.93); } 100% { transform: translateY(0) scale(1); } }
@keyframes nav-pet-pop { 0% { opacity: 0; transform: scale(.2) translateY(6px); } 35% { opacity: 1; transform: scale(1.25) translateY(0); } 80% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
@keyframes nav-pet-rub-left { from { transform: translate(9px,-7px) rotate(150deg); } to { transform: translate(11px,-9px) rotate(165deg); } }
@keyframes nav-pet-rub-right { from { transform: translate(-11px,-9px) rotate(-165deg); } to { transform: translate(-9px,-7px) rotate(-150deg); } }
@keyframes nav-pet-sway-small { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-4deg); } 65% { transform: rotate(4deg); } }
@keyframes nav-pet-wave-arm { from { transform: translate(1px,-13px) rotate(-25deg); } to { transform: translate(-1px,-14px) rotate(-75deg); } }
@keyframes nav-pet-bounce { 0%,50%,100% { transform: translateY(0) scale(1); } 15% { transform: translateY(-8px) scale(.96,1.05); } 30% { transform: translateY(0) scale(1.07,.92); } 65% { transform: translateY(-6px) scale(.97,1.04); } 80% { transform: translateY(0) scale(1.05,.94); } }
@keyframes nav-pet-sway { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 50% { transform: rotate(6deg); } 75% { transform: rotate(-4deg); } }
@keyframes nav-pet-foot-lift { from { transform: translateY(0) rotate(0); } to { transform: translateY(-3px) rotate(-12deg); } }
@keyframes nav-pet-spin { 0% { transform: translateY(0) rotate(0); } 20% { transform: translateY(-8px) rotate(40deg); } 75% { transform: translateY(-6px) rotate(330deg); } 90% { transform: translateY(0) rotate(360deg) scale(1.06,.92); } 100% { transform: rotate(360deg); } }
@keyframes nav-pet-sneeze { 0%,100% { transform: rotate(0) scale(1); } 20%,42% { transform: rotate(-7deg) scale(1.04,.93); } 52% { transform: rotate(9deg) translateY(1px) scale(.94,1.07); } 70% { transform: rotate(-2deg) scale(1.02,.98); } }
@keyframes nav-pet-sneeze-puff { 0%,48% { opacity: 0; transform: scale(.3); } 56% { opacity: 1; transform: scale(1) translate(2px,0); } 100% { opacity: 0; transform: scale(1.6) translate(8px,-2px); } }
@keyframes nav-pet-sneeze-word { 0%,48% { opacity: 0; transform: scale(.4); } 58% { opacity: 1; transform: scale(1.2); } 85% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: translateY(-4px); } }
@keyframes nav-pet-puff { 0%,100% { transform: scale(1); } 20% { transform: scale(1.07,1.03); } 30%,50%,70% { transform: scale(1.07,1.03) translateX(-1.2px); } 40%,60%,80% { transform: scale(1.07,1.03) translateX(1.2px); } }
@keyframes nav-pet-cheeks { 0%,100% { opacity: 0; transform: scale(.5); } 20%,85% { opacity: .9; transform: scale(1.12); } }
@keyframes nav-pet-giggle { 0%,100% { transform: rotate(0); } 10%,30%,50%,70% { transform: rotate(-4deg) translateY(-1px); } 20%,40%,60%,80% { transform: rotate(4deg); } }
@keyframes nav-pet-dizzy-wobble {
    0% { transform: rotate(22deg) scale(1.06); }
    18% { transform: rotate(-16deg) translateY(2px); }
    36% { transform: rotate(12deg); }
    54% { transform: rotate(-8deg); }
    70% { transform: rotate(4deg); }
    80% { transform: rotate(-9deg); }
    86% { transform: rotate(9deg); }
    92% { transform: rotate(-5deg); }
    100% { transform: rotate(0); }
}
@keyframes nav-pet-spiral { to { transform: rotate(360deg); } }
@keyframes nav-pet-orbit {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    25% { transform: translate(15px, 3px) scale(.8); opacity: .85; }
    50% { transform: translate(0, 6px) scale(.6); opacity: .55; }
    75% { transform: translate(-15px, 3px) scale(.8); opacity: .85; }
    100% { transform: translate(0, 0) scale(1); opacity: 1; }
}
@keyframes nav-pet-dangle-left { to { transform: rotate(-16deg) translateY(3px); } }
@keyframes nav-pet-dangle-right { to { transform: rotate(16deg) translateY(3px); } }
@keyframes nav-pet-sparkle { 0% { transform: translateY(4px) scale(.25) rotate(-30deg); opacity: 0; } 35% { opacity: 1; } 100% { transform: translateY(-19px) scale(1.15) rotate(25deg); opacity: 0; } }
@keyframes nav-pet-write { to { transform: rotate(15deg) translateX(1px); } }
@keyframes nav-pet-turn-page { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-2px) scale(.94,1.05); } }

/* Keyboard opening never removes the pet; the script moves it above the keyboard/composer. */
html[data-fx="low"] .nav-pet-art, html[data-fx="low"] .nav-pet-spark,
html[data-fx="low"] .nav-pet-foot-left, html[data-fx="low"] .nav-pet-foot-right,
html[data-fx="low"] .nav-pet-pencil, html[data-fx="low"] .nav-pet-study,
html[data-fx="low"] .nav-pet-z, html[data-fx="low"] .nav-pet-spiral, html[data-fx="low"] .nav-pet-star,
html[data-fx="low"] .nav-pet-arm-left, html[data-fx="low"] .nav-pet-arm-right { animation: none !important; }
html[data-fx="low"] .nav-pet-z:not(:first-child) { display: none; }
html[data-fx="low"] .nav-pet, html[data-fx="low"] .nav-pet-ground-shadow { transition: none; }
@media (prefers-reduced-motion: reduce) {
    .nav-pet-art, .nav-pet-spark, .nav-pet-foot-left, .nav-pet-foot-right, .nav-pet-pencil, .nav-pet-study,
    .nav-pet-z, .nav-pet-spiral, .nav-pet-star, .nav-pet-arm-left, .nav-pet-arm-right { animation: none !important; }
    .nav-pet-z:not(:first-child) { display: none; }
    .nav-pet-sleep .nav-pet-z { opacity: .9; }
    .nav-pet-gaze { transition: none; }
    .nav-pet, .nav-pet-art, .nav-pet-body, .nav-pet-open-eyes, .nav-pet-ground-shadow, .nav-pet-study { transition: none; }
}
@media (max-width: 350px) { .nav-pet { width: 58px; height: 60px; } }

/* 字靈小屋：藏起浮動角色後，入口仍留在「我的」頁面。 */
.pet-home-entry {
    width: 100%; display: flex; align-items: center; gap: 13px;
    border-color: rgba(202, 177, 235, .38);
    background: linear-gradient(105deg, rgba(202,177,235,.14), rgba(255,255,255,.03));
}
.pet-home-entry-orb {
    flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center;
    border-radius: 15px; color: #fff1ca; font-size: 24px;
    background: radial-gradient(circle at 30% 25%, #fdf2ed, #bba6db 65%, #8274a9);
    box-shadow: inset 0 1px 4px rgba(255,255,255,.7), 0 5px 16px rgba(168,139,208,.28);
}
.pet-home-entry .hub-item-name { flex: 1; min-width: 0; text-align: left; }
.pet-home-entry-state { font-size: .72rem; color: var(--text-sub); white-space: nowrap; }
.pet-home-page { max-width: 540px; margin: 0 auto; padding: 18px 20px calc(56px + env(safe-area-inset-bottom)); }
.pet-home-kicker { color: #d9b9eb; font-size: .72rem; font-weight: 700; letter-spacing: .17em; }
.pet-home-page h1 { color: var(--text-main); font-size: clamp(1.7rem, 6vw, 2.2rem); margin: 9px 0 5px; }
.pet-home-intro { color: var(--text-sub); font-size: .88rem; line-height: 1.6; margin: 0; }
.pet-home-preview {
    position: relative; display: grid; place-items: center; width: 100%; height: 228px;
    margin: 26px 0 0; padding: 0; overflow: hidden; cursor: pointer;
    border: 1px solid rgba(213,194,232,.28); border-radius: 24px;
    background: radial-gradient(circle at 50% 70%, rgba(213,194,232,.19), transparent 44%),
                linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.025));
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.pet-home-preview::before, .pet-home-preview::after {
    content: '✦'; position: absolute; color: rgba(250,227,184,.55); font-size: 17px;
}
.pet-home-preview::before { left: 18%; top: 26%; }
.pet-home-preview::after { right: 19%; bottom: 25%; font-size: 13px; }
.pet-home-preview .nav-pet-art { width: 150px; height: 150px; filter: drop-shadow(0 12px 18px rgba(175,144,211,.28)); }
.pet-home-preview:focus-visible, .pet-home-switch:focus-visible, .pet-home-reset:focus-visible, .pet-home-entry:focus-visible { outline: 2px solid #f5d191; outline-offset: 3px; }
.pet-home-wave .nav-pet-art { animation: nav-pet-hop .78s cubic-bezier(.25,.7,.25,1) both; }
.pet-home-caption { text-align: center; font-size: .73rem; color: var(--text-sub); margin: 10px 0 22px; }
.pet-home-control {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    border: 1px solid var(--border); border-radius: 16px; padding: 17px;
    background: var(--card-bg);
}
.pet-home-control strong, .pet-home-control span { display: block; }
.pet-home-control strong { color: var(--text-main); font-size: .91rem; }
.pet-home-control span { color: var(--text-sub); font-size: .72rem; margin-top: 5px; line-height: 1.45; }
.pet-home-switch {
    position: relative; flex: 0 0 52px; width: 52px; height: 31px;
    border: 1px solid rgba(187,172,207,.45); border-radius: 99px;
    background: rgba(130,125,145,.32); padding: 3px; cursor: pointer;
    transition: background .22s, border-color .22s;
}
.pet-home-switch span { display: block; width: 23px; height: 23px; margin: 0; border-radius: 50%; background: #e7e3eb; box-shadow: 0 2px 5px rgba(0,0,0,.2); transition: transform .22s; }
.pet-home-switch[aria-checked="true"] { background: linear-gradient(110deg, #a783cb, #d4b8e8); border-color: #e1c8f0; }
.pet-home-switch[aria-checked="true"] span { transform: translateX(20px); background: #fffaf6; }
.pet-home-reset {
    display: flex; width: 100%; justify-content: space-between; align-items: center;
    margin-top: 12px; padding: 16px 17px; border: 1px solid var(--border); border-radius: 16px;
    background: var(--card-bg); color: var(--text-main); font: inherit; font-size: .87rem; cursor: pointer;
}
.pet-home-reset span { color: var(--text-sub); }
.pet-home-footnote { color: var(--text-sub); font-size: .72rem; line-height: 1.6; margin: 16px 2px 0; }
@media (prefers-reduced-motion: reduce) {
    .pet-home-wave .nav-pet-art { animation: none; }
    .pet-home-switch, .pet-home-switch span { transition: none; }
}
html[data-fx="low"] .pet-home-wave .nav-pet-art { animation: none; }
/* 轉一圈繞身體中心，不是繞腳底 */
.nav-pet-spin .nav-pet-art { transform-origin: 50% 55%; }