/* ══════════════════════════════════════════════════════════════
   NEW 2048 — 宠物「球球」的动作库
   所有颜色来自主题变量，动作靠容器上的 .pet--<state> 类切换。
   ══════════════════════════════════════════════════════════════ */

.pet {
  position: absolute;
  right: -8%;
  bottom: -10%;
  width: clamp(50px, 15vw, 86px);
  height: auto;
  z-index: 6;
  pointer-events: none;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.42));
  transform-origin: bottom center;
  transition: opacity 0.4s ease;
}
.pet-svg { display: block; width: 100%; height: auto; overflow: visible; }

/* 让各个部件都能绕自身中心做变换 */
.pet__all,
.pet__body,
.pet__ears,
.pet__ear,
.pet__face,
.pet__eye,
.pet__eyes,
.pet__arm,
.pet__arms,
.pet__tail,
.pet__mouth,
.pet__aura,
.pet__spark,
.pet__sweat,
.pet__zzz,
.pet__antenna-tip {
  transform-box: fill-box;
  transform-origin: center;
}
.pet__aura { transform-origin: center; opacity: 0; }
.pet__spark, .pet__sweat, .pet__zzz { opacity: 0; }

/* ── 呼吸 / 眨眼 / 摇尾：所有状态共用的底噪 ───────────────── */
@keyframes pet-breathe {
  0%, 100% { transform: scale(1, 1) translateY(0); }
  50% { transform: scale(1.025, 0.975) translateY(1.5px); }
}
.pet__body { animation: pet-breathe 3.1s ease-in-out infinite; }

@keyframes pet-tail {
  0%, 100% { transform: rotate(-9deg); }
  50% { transform: rotate(11deg); }
}
.pet__tail { animation: pet-tail 1.9s ease-in-out infinite; }

@keyframes pet-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95%, 97% { transform: scaleY(0.08); }
}
.pet__eyes { animation: pet-blink 4.6s ease-in-out infinite; }

@keyframes pet-ears {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}
.pet__ears { animation: pet-ears 3.4s ease-in-out infinite; }

@keyframes pet-tip {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.35); opacity: 1; }
}
.pet__antenna-tip { animation: pet-tip 2.4s ease-in-out infinite; }

.pet__glint { opacity: 0.9; }

/* ── happy：小幅上跳 + 手臂张开 ──────────────────────────── */
@keyframes pet-hop {
  0%, 100% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-9px) scale(1.04, 0.96); }
  55% { transform: translateY(0) scale(0.97, 1.03); }
  75% { transform: translateY(-3px) scale(1); }
}
@keyframes pet-arm-wave-l { 0%, 100% { transform: rotate(0deg) translateY(0); } 50% { transform: rotate(-38deg) translateY(-3px); } }
@keyframes pet-arm-wave-r { 0%, 100% { transform: rotate(0deg) translateY(0); } 50% { transform: rotate(38deg) translateY(-3px); } }
@keyframes pet-mouth-open { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(2.1); } }

.pet--happy .pet__all { animation: pet-hop 900ms cubic-bezier(0.3, 1.4, 0.4, 1); }
.pet--happy .pet__arm--l { animation: pet-arm-wave-l 450ms ease-in-out 2; }
.pet--happy .pet__arm--r { animation: pet-arm-wave-r 450ms ease-in-out 2; }
.pet--happy .pet__mouth { animation: pet-mouth-open 450ms ease-in-out 2; }

/* ── excited：跳得更高 + 光环 + 星芒 ─────────────────────── */
@keyframes pet-jump {
  0% { transform: translateY(0) scale(1); }
  18% { transform: translateY(4px) scale(1.08, 0.9); }
  42% { transform: translateY(-22px) scale(0.96, 1.06); }
  62% { transform: translateY(0) scale(1.05, 0.95); }
  78% { transform: translateY(-8px) scale(1); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes pet-aura-pop {
  0% { opacity: 0; transform: scale(0.6); }
  35% { opacity: 0.85; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.25); }
}
@keyframes pet-spark-pop {
  0% { opacity: 0; transform: scale(0.2) rotate(0deg); }
  40% { opacity: 1; transform: scale(1.15) rotate(60deg); }
  100% { opacity: 0; transform: scale(0.5) rotate(140deg); }
}
@keyframes pet-spark-float {
  0% { opacity: 0; transform: translateY(0) scale(0.4); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-16px) scale(0.9); }
}

.pet--excited .pet__all { animation: pet-jump 620ms cubic-bezier(0.3, 1.3, 0.4, 1) 2; }
.pet--excited .pet__aura { animation: pet-aura-pop 700ms ease-out 2; }
.pet--excited .pet__spark--a { animation: pet-spark-pop 700ms ease-out 2; }
.pet--excited .pet__spark--b { animation: pet-spark-float 700ms ease-out 0.15s 2; }
.pet--excited .pet__mouth { animation: pet-mouth-open 310ms ease-in-out 4; }

/* ── frenzy：连击 7+ —— 旋转 + 高频弹跳 + 持续光环 ───────── */
@keyframes pet-spin-hop {
  0% { transform: translateY(0) rotate(0deg) scale(1); }
  20% { transform: translateY(-24px) rotate(120deg) scale(1.05); }
  45% { transform: translateY(0) rotate(240deg) scale(1.1, 0.9); }
  70% { transform: translateY(-14px) rotate(360deg) scale(1); }
  100% { transform: translateY(0) rotate(360deg) scale(1); }
}
.pet--frenzy .pet__all { animation: pet-spin-hop 950ms cubic-bezier(0.3, 1.2, 0.5, 1) 2; }
.pet--frenzy .pet__aura { animation: pet-aura-pop 480ms ease-out 4; }
.pet--frenzy .pet__spark--a { animation: pet-spark-pop 420ms ease-out 4; }
.pet--frenzy .pet__spark--b { animation: pet-spark-float 420ms ease-out 0.1s 4; }
.pet--frenzy .pet__body { animation: pet-breathe 0.6s ease-in-out infinite; }

/* ── amazed：睁大眼 + 后仰 ───────────────────────────────── */
@keyframes pet-amazed {
  0% { transform: scale(1) translateY(0); }
  25% { transform: scale(1.1, 1.06) translateY(-8px) rotate(-5deg); }
  55% { transform: scale(1.06, 1.1) translateY(-4px) rotate(4deg); }
  100% { transform: scale(1) translateY(0) rotate(0); }
}
@keyframes pet-eye-wide { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.45); } }
.pet--amazed .pet__all { animation: pet-amazed 750ms cubic-bezier(0.3, 1.2, 0.4, 1) 2; }
.pet--amazed .pet__eye { animation: pet-eye-wide 750ms ease-out 2; }
.pet--amazed .pet__mouth { transform: scaleY(2.4); }
.pet--amazed .pet__spark--a { animation: pet-spark-pop 700ms ease-out 2; }

/* ── shocked：抖一下 + 汗滴 ──────────────────────────────── */
@keyframes pet-shake-x {
  0%, 100% { transform: translateX(0) scale(1); }
  20% { transform: translateX(-6px) scale(1.04, 0.96); }
  40% { transform: translateX(6px) scale(0.98, 1.02); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}
@keyframes pet-sweat-drop {
  0% { opacity: 0; transform: translateY(-6px) scale(0.6); }
  30% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(12px) scale(0.85); }
}
.pet--shocked .pet__all { animation: pet-shake-x 560ms ease-in-out 2; }
.pet--shocked .pet__sweat { animation: pet-sweat-drop 900ms ease-out 2; }
.pet--shocked .pet__eye { transform: scale(1.3); }

/* ── sad：垂头 + 眼睛半闭 ────────────────────────────────── */
@keyframes pet-droop {
  0%, 100% { transform: translateY(0) rotate(0) scale(1, 1); }
  40% { transform: translateY(5px) rotate(-3deg) scale(1.03, 0.94); }
}
.pet--sad .pet__all { animation: pet-droop 1.2s ease-in-out 1; }
.pet--sad .pet__eyes { animation: none; transform: scaleY(0.45); }
.pet--sad .pet__ear--l { transform: rotate(-26deg); }
.pet--sad .pet__ear--r { transform: rotate(26deg); }
.pet--sad .pet__mouth { transform: rotate(180deg) translateY(-3px); }
.pet--sad .pet__tail { animation-duration: 4.5s; }

/* ── danger：急促抖动 + 光环变红 ─────────────────────────── */
@keyframes pet-alert {
  0%, 100% { transform: translateY(0) scale(1); }
  25% { transform: translateY(-5px) scale(1.03, 0.97); }
  50% { transform: translateY(0) scale(0.98, 1.02); }
  75% { transform: translateY(-3px); }
}
.pet--danger .pet__all { animation: pet-alert 500ms ease-in-out 3; }
.pet--danger .pet__aura { animation: pet-aura-pop 500ms ease-out 3; }
.pet--danger .pet__sweat { animation: pet-sweat-drop 800ms ease-out 2; }
.pet--danger .pet__ear--l { transform: rotate(-16deg); }
.pet--danger .pet__ear--r { transform: rotate(16deg); }

/* ── dance：通关庆祝，左右摇摆 + 持续星芒 ────────────────── */
@keyframes pet-dance {
  0%, 100% { transform: rotate(-9deg) translateY(0) scale(1); }
  25% { transform: rotate(0deg) translateY(-14px) scale(1.05); }
  50% { transform: rotate(9deg) translateY(0) scale(1); }
  75% { transform: rotate(0deg) translateY(-14px) scale(1.05); }
}
.pet--dance .pet__all { animation: pet-dance 700ms ease-in-out 4; }
.pet--dance .pet__aura { animation: pet-aura-pop 700ms ease-out 4; }
.pet--dance .pet__spark--a { animation: pet-spark-pop 600ms ease-out 5; }
.pet--dance .pet__spark--b { animation: pet-spark-float 600ms ease-out 0.2s 5; }
.pet--dance .pet__arm--l { animation: pet-arm-wave-l 350ms ease-in-out 8; }
.pet--dance .pet__arm--r { animation: pet-arm-wave-r 350ms ease-in-out 8; }

/* ── cheer：能量爆发 ─────────────────────────────────────── */
@keyframes pet-charge {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  40% { transform: scale(1.12); filter: brightness(1.5); }
}
.pet--cheer .pet__all { animation: pet-charge 500ms ease-out 3; }
.pet--cheer .pet__aura { animation: pet-aura-pop 500ms ease-out 3; }
.pet--cheer .pet__antenna-tip { animation: pet-tip 160ms linear 8; }

/* ── sleepy：闭眼 + Zzz 飘出 ─────────────────────────────── */
@keyframes pet-zzz {
  0% { opacity: 0; transform: translate(0, 0) scale(0.6); }
  25% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(10px, -18px) scale(1.1); }
}
@keyframes pet-doze {
  0%, 100% { transform: scale(1.02, 0.98) translateY(2px); }
  50% { transform: scale(0.99, 1.01) translateY(0); }
}
.pet--sleepy .pet__all { animation: pet-doze 3.2s ease-in-out infinite; }
.pet--sleepy .pet__eyes { animation: none; transform: scaleY(0.12); }
.pet--sleepy .pet__zzz { animation: pet-zzz 2.6s ease-out infinite; }
.pet--sleepy .pet__zzz--2 { animation-delay: 0.9s; }
.pet--sleepy .pet__ear--l { transform: rotate(-18deg); }
.pet--sleepy .pet__ear--r { transform: rotate(18deg); }

/* ── 台词气泡 ────────────────────────────────────────────── */
.pet-bubble {
  /* 贴着宠物（棋盘右下角）出现，而不是飘在棋盘顶部 */
  position: absolute;
  right: -6%;
  bottom: 12%;
  max-width: 150px;
  padding: 6px 10px;
  border-radius: 12px 12px 3px 12px;
  background: var(--c-panel);
  border: 1px solid var(--c-line-strong);
  color: var(--c-text);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
  box-shadow: var(--shadow-panel);
  opacity: 0;
  transform: translateY(6px) scale(0.9);
  transition: opacity 0.2s ease, transform 0.24s cubic-bezier(0.2, 1.3, 0.4, 1);
  pointer-events: none;
  z-index: 7;
}
.pet-bubble.is-on { opacity: 1; transform: translateY(0) scale(1); }

/* 宠物挂在棋盘容器上 */
.board-wrap .pet { right: -7%; bottom: -7%; }
@media (max-width: 400px) {
  .board-wrap .pet { right: -5%; bottom: -11%; width: 52px; }
  .pet-bubble { font-size: 10.5px; max-width: 120px; }
}

/* ── 减少动效 ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pet *, .pet { animation: none !important; }
}
#app[data-motion="reduced"] .pet * {
  animation: none !important;
}