/* pet.css — 首页桌宠：宠物本体、气泡、电击特效（只在 index.html 引入） */

.pet {
    --pet-h: 120px;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 990;                 /* 在页面内容与 ⚙️/头像(950) 之上、壁纸设置弹窗(1000) 与提示条(1100) 之下 */
    height: var(--pet-h);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    will-change: transform;
}
.pet.is-drag { cursor: grabbing; }
.pet-img {
    height: 100%;
    width: auto;
    display: block;
    pointer-events: none;
    transform-origin: 50% 100%;
    animation: petBreath 2.6s ease-in-out infinite;
}
/* 镜像：动画里的 transform 会盖掉普通声明，所以连 animation 一起换成带 scaleX(-1) 的版本 */
.pet.is-flip .pet-img { animation-name: petBreathFlip; }

@keyframes petBreath {
    0%, 100% { transform: translateY(0) scaleY(1); }
    50% { transform: translateY(-2.5px) scaleY(1.012); }
}
@keyframes petBreathFlip {
    0%, 100% { transform: scaleX(-1) translateY(0) scaleY(1); }
    50% { transform: scaleX(-1) translateY(-2.5px) scaleY(1.012); }
}

/* 走路 / 拎包：踏步弹跳（只动图片，位置由 .pet 的 transform 负责） */
.pet.is-walk .pet-img,
.pet.is-bag .pet-img { animation: petStep 0.36s ease-in-out infinite; }
.pet.is-walk.is-flip .pet-img,
.pet.is-bag.is-flip .pet-img { animation-name: petStepFlip; }
@keyframes petStep {
    0%, 100% { transform: translateY(0) rotate(-1.5deg); }
    50% { transform: translateY(-5px) rotate(1.5deg); }
}
@keyframes petStepFlip {
    0%, 100% { transform: scaleX(-1) translateY(0) rotate(1.5deg); }
    50% { transform: scaleX(-1) translateY(-5px) rotate(-1.5deg); }
}

/* 坐着 / 背面 / 侧面：轻轻晃 */
.pet.is-sit .pet-img,
.pet.is-back .pet-img,
.pet.is-side .pet-img { animation: petSway 3.4s ease-in-out infinite; }
.pet.is-sit.is-flip .pet-img,
.pet.is-back.is-flip .pet-img,
.pet.is-side.is-flip .pet-img { animation-name: petSwayFlip; }
@keyframes petSway {
    0%, 100% { transform: rotate(-1.6deg); }
    50% { transform: rotate(1.6deg); }
}
@keyframes petSwayFlip {
    0%, 100% { transform: scaleX(-1) rotate(1.6deg); }
    50% { transform: scaleX(-1) rotate(-1.6deg); }
}

/* 睡觉：缓慢呼吸 */
.pet.is-sleep .pet-img { animation: petSleep 4.2s ease-in-out infinite; }
.pet.is-sleep.is-flip .pet-img { animation-name: petSleepFlip; }
@keyframes petSleep {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(1.035); }
}
@keyframes petSleepFlip {
    0%, 100% { transform: scaleX(-1) scaleY(1); }
    50% { transform: scaleX(-1) scaleY(1.035); }
}

/* 放电：抖一下（闪电由 .pet-bolt 叠上来） */
.pet.is-zap .pet-img { animation: petShake 0.16s steps(2, end) 4; }
.pet.is-zap.is-flip .pet-img { animation-name: petShakeFlip; }
@keyframes petShake {
    0% { transform: translateX(-2px) rotate(-2deg); }
    100% { transform: translateX(2px) rotate(2deg); }
}
@keyframes petShakeFlip {
    0% { transform: scaleX(-1) translateX(-2px) rotate(2deg); }
    100% { transform: scaleX(-1) translateX(2px) rotate(-2deg); }
}

/* 拖动：换成「被拎起来」的素材（原画就是腿垂着、旁边带晃动线），
   再把支点挪到头顶附近（也就是被拎住的地方），整只就像挂在那儿左右轻摆 */
.pet.is-drag .pet-img {
    transform-origin: 50% 6%;
    animation: petDangle 1.6s ease-in-out infinite;
}
.pet.is-drag.is-flip .pet-img { animation-name: petDangleFlip; }
@keyframes petDangle {
    0%, 100% { transform: rotate(-2.8deg); }
    50% { transform: rotate(2.8deg); }
}
@keyframes petDangleFlip {
    0%, 100% { transform: scaleX(-1) rotate(2.8deg); }
    50% { transform: scaleX(-1) rotate(-2.8deg); }
}

/* 电击特效：放电时叠在角色身侧 */
.pet-bolt {
    position: absolute;
    left: 2%;
    bottom: 26%;
    height: 40%;
    pointer-events: none;
    filter: drop-shadow(0 0 6px rgba(96, 165, 250, 0.85));
    animation: petBolt 0.32s steps(2, end) 2;
}
@keyframes petBolt {
    0% { opacity: 0.2; transform: scale(0.92) rotate(-3deg); }
    50% { opacity: 1; transform: scale(1.06) rotate(3deg); }
    100% { opacity: 0.85; transform: scale(1) rotate(0deg); }
}

/* 气泡：小头像 + 一句话 */
.pet-bubble {
    position: absolute;
    left: 50%;
    bottom: calc(100% - 4px);
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 240px;
    padding: 6px 12px 6px 6px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: var(--shadow-md);
    color: var(--ink);
    font-size: 13px;
    line-height: 1.35;
    pointer-events: none;
    white-space: nowrap;
}
.pet-face {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 22%;
    background: rgba(26, 26, 46, 0.06);
    flex: 0 0 auto;
}
.pet-text { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }

/* 手机：小一点、别挡太多 */
@media (max-width: 620px) {
    .pet { --pet-h: 92px; }
    .pet-bubble { font-size: 12px; max-width: 190px; }
    .pet-face { width: 32px; height: 32px; }
}

/* 尊重「减少动态效果」：所有装饰动画停掉（位置仍然不会越界） */
@media (prefers-reduced-motion: reduce) {
    .pet-img, .pet-bolt { animation: none !important; }
}