/* 创意工坊电子宠物：皮卡丘，吃零食 / 放电玩耍 / 打瞌睡 / 发呆四种状态，
   会打招呼、被点击会按当前状态给反应。纯 SVG + CSS 动画，无外部资源。 */

#pet {
  position: fixed;
  right: 18px;
  bottom: 14px;
  width: 150px;
  z-index: 900;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#pet .pet-inner { transition: transform .18s ease; }
#pet:hover .pet-inner { transform: translateY(-3px); }

.pet-bubble {
  position: absolute;
  right: 60%;
  bottom: 88%;
  min-width: 90px;
  max-width: 190px;
  padding: 9px 13px;
  background: #FFFDF7;
  border: 2px solid var(--ink, #2B2440);
  border-radius: 16px 16px 4px 16px;
  box-shadow: 0 6px 18px rgba(43,36,64,.18);
  font-size: 13px;
  line-height: 1.5;
  color: #2B2440;
  font-weight: 500;
  opacity: 0;
  transform: translateY(8px) scale(.9);
  transform-origin: bottom right;
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: none;
  white-space: pre-wrap;
}
.pet-bubble.show { opacity: 1; transform: translateY(0) scale(1); }
.pet-bubble::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: -9px;
  width: 14px; height: 14px;
  background: #FFFDF7;
  border-right: 2px solid var(--ink, #2B2440);
  border-bottom: 2px solid var(--ink, #2B2440);
  transform: rotate(45deg) skew(12deg, 12deg);
}

.pet-badge {
  position: absolute;
  top: -4px; left: 6px;
  font-size: 20px;
  opacity: 0;
  transform: scale(.4);
  transition: all .25s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
}
.pet-badge.show { opacity: 1; transform: scale(1); }

/* ---------- 基础呼吸 ---------- */
#pet svg { width: 100%; height: auto; display: block; overflow: visible; }
.pet-breathe { animation: petBreathe 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center bottom; }
@keyframes petBreathe { 0%,100% { transform: scale(1,1); } 50% { transform: scale(1.018,.982); } }
/* 打瞌睡时呼吸放慢、身体沉一点 */
#pet.st-sleep .pet-breathe { animation-duration: 5.2s; transform-origin: center bottom; }

/* 耳朵轻摆 + 发呆时偶尔抖一下 */
.pika-ear-l { animation: earSwayL 4.6s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom right; }
.pika-ear-r { animation: earSwayR 4.6s ease-in-out infinite .5s; transform-box: fill-box; transform-origin: bottom left; }
@keyframes earSwayL { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(-3deg); } }
@keyframes earSwayR { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(3deg); } }
#pet.st-idle .pika-ear-l { animation: earTwitch 6.5s ease-in-out infinite; }
@keyframes earTwitch {
  0%, 70%, 100% { transform: rotate(0deg); }
  76% { transform: rotate(-9deg); }
  82% { transform: rotate(3deg); }
  88% { transform: rotate(-4deg); }
}

/* 尾巴摇摆（玩耍时摇得飞快） */
.pika-tail { animation: tailWag 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 0% 100%; }
@keyframes tailWag { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(-7deg); } }
#pet.st-play .pika-tail { animation-duration: .7s; }

/* 眨眼 */
.pet-eyes-open { animation: petBlink 4.4s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes petBlink {
  0%, 91%, 100% { transform: scaleY(1); }
  94% { transform: scaleY(.08); }
  97% { transform: scaleY(1); }
}
.pet-eyes-closed { display: none; }
#pet.eyes-closed .pet-eyes-open,
#pet.st-sleep .pet-eyes-open { display: none; }
#pet.eyes-closed .pet-eyes-closed,
#pet.st-sleep .pet-eyes-closed { display: block; }
/* 打瞌睡时眨眼动画停掉，保持闭眼 */
#pet.st-sleep .pet-eyes-open { animation: none; }

/* 视线 */
.pet-look { transition: transform .5s ease; transform-box: fill-box; }
#pet.st-idle .pet-look { animation: lookAround 7s ease-in-out infinite; }
@keyframes lookAround {
  0%, 18%, 100% { transform: translate(0,0); }
  8% { transform: translate(-4px,1px); }
  30%, 48% { transform: translate(4px,0); }
  39% { transform: translate(3px,2px); }
  62% { transform: translate(0,0); }
}

/* ---------- 道具显隐 ---------- */
#pet .prop { display: none; }
#pet.st-snack .prop-snack { display: block; }
#pet.st-play .prop-play { display: block; }
#pet.st-sleep .prop-sleep { display: block; }

/* 吃苹果：一嚼一嚼（munching 时加倍速） */
.pika-apple { animation: munch 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center bottom; }
@keyframes munch {
  0%,100% { transform: scale(1,1); }
  50% { transform: scale(1.06,.92) translateY(2px); }
}
#pet.munching .pika-apple { animation-duration: .45s; }

/* 放电：电花闪烁，spark-burst 时来一波大的 */
.pika-spark { animation: sparkFlick 1.4s ease-in-out infinite; opacity: 0; transform-box: fill-box; transform-origin: center; }
.pika-spark.s2 { animation-delay: .45s; }
.pika-spark.s3 { animation-delay: .9s; }
@keyframes sparkFlick {
  0%, 100% { opacity: 0; transform: scale(.7); }
  50% { opacity: 1; transform: scale(1.08); }
}
#pet.spark-burst .pika-spark { animation: sparkBurst 1.5s ease-out; opacity: 1; }
@keyframes sparkBurst {
  0% { transform: scale(.6) rotate(0deg); opacity: 1; }
  50% { transform: scale(1.7) rotate(12deg); opacity: 1; }
  100% { transform: scale(2.2) rotate(24deg); opacity: 0; }
}

/* Zzz 上飘 */
.pika-z { opacity: 0; transform-box: fill-box; animation: zFloat 3.4s ease-out infinite; }
.pika-z:nth-child(2) { animation-delay: 1.1s; }
.pika-z:nth-child(3) { animation-delay: 2.2s; }
@keyframes zFloat {
  0% { transform: translateY(8px) scale(.7); opacity: 0; }
  25% { opacity: .9; }
  100% { transform: translateY(-22px) scale(1.1); opacity: 0; }
}

/* ---------- 点击反应 / 打招呼 ---------- */
#pet.react-hop .pet-inner { animation: petHop .55s cubic-bezier(.34,1.56,.64,1); }
@keyframes petHop { 0% { transform: translateY(0); } 40% { transform: translateY(-16px); } 100% { transform: translateY(0); } }

#pet.react-shake .pet-inner { animation: petShake .5s ease-in-out; }
@keyframes petShake {
  0%,100% { transform: translateX(0) rotate(0deg); }
  25% { transform: translateX(-4px) rotate(-3deg); }
  50% { transform: translateX(4px) rotate(3deg); }
  75% { transform: translateX(-2px) rotate(-1deg); }
}

#pet.react-giggle .pet-inner { animation: petGiggle .7s ease-in-out; }
@keyframes petGiggle {
  0%,100% { transform: rotate(0deg); }
  25% { transform: rotate(-4deg) translateY(-2px); }
  55% { transform: rotate(4deg); }
  80% { transform: rotate(-2deg); }
}

#pet.react-wave .pet-arm { display: block; animation: armWave 1s ease-in-out 2; transform-box: fill-box; transform-origin: 0% 100%; }
@keyframes armWave { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(-30deg); } }
#pet .pet-arm { display: none; }

/* 表情切换 */
#pet .mouth-o, #pet .mouth-happy { display: none; }
#pet.face-surprise .mouth-o { display: block; }
#pet.face-surprise .mouth-default { display: none; }
#pet.face-happy .mouth-happy { display: block; }
#pet.face-happy .mouth-default { display: none; }
/* 吃零食时默认保持开心的咀嚼嘴 */
#pet.st-snack:not(.face-surprise) .mouth-happy { display: block; }
#pet.st-snack:not(.face-surprise) .mouth-default { display: none; }

/* 脸红（被逗时红脸蛋放大） */
#pet.react-blush .pet-blush { transform: scale(1.22); }
.pet-blush { transition: transform .3s ease; transform-box: fill-box; transform-origin: center; }

/* 爱心/闪电粒子 */
.pet-fx {
  position: absolute;
  left: 0; top: 0;
  font-size: 16px;
  pointer-events: none;
  animation: fxFloat 1.15s ease-out forwards;
}
@keyframes fxFloat {
  0% { transform: translateY(0) scale(.5) rotate(0deg); opacity: 1; }
  100% { transform: translateY(-64px) scale(1.15) rotate(20deg); opacity: 0; }
}

/* 移动端缩小 */
@media (max-width: 640px) {
  #pet { width: 112px; right: 10px; bottom: 8px; }
  .pet-bubble { font-size: 12px; min-width: 76px; max-width: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  #pet * { animation: none !important; transition: none !important; }
}