/* ==========================================================================
   Luna —— 桌面宠物（任务栏上方的小企鹅）
   造型是 lib/pet.php 里手绘的 SVG，这里只管摆位、状态与动效
   状态：idle / walk / happy / eat / sleep / sad
   ========================================================================== */

.xp-pet {
  position: fixed;
  left: 240px;
  bottom: 37px;
  width: var(--pet-size, 68px);
  height: var(--pet-size, 68px);
  z-index: 129;                 /* 任务栏是 130：站在任务栏上沿 */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  font-family: var(--xp-font, Tahoma, "Microsoft YaHei", sans-serif);
  transition: left 2.2s linear;
  will-change: left;
  outline: none;
}
.xp-pet.is-dragging { cursor: grabbing; transition: none; }

/* —— 本体 —— */
.xp-pet__body {
  position: absolute;
  inset: 0;
  transform-origin: 50% 92%;
  animation: xp-pet-breathe 3.6s ease-in-out infinite;
}
.xp-pet__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 2px 2px rgba(10, 40, 80, 0.24));
  transition: filter 0.15s ease;
}
.xp-pet:focus-visible .xp-pet__art {
  filter: drop-shadow(0 0 4px rgba(49, 106, 197, 0.9)) drop-shadow(0 2px 2px rgba(10, 40, 80, 0.24));
}
/* 正面造型不做镜像翻转：翻了会让头顶高光换边，看着像倒着走。
   行进方向改用身体前后倾来表达（见下面的 waddle 动画）。 */

/* SVG 部件的变换基准，百分比才按自身包围盒算 */
.pet-eye, .pet-eye-happy, .pet-eye-shut,
.pet-beak, .pet-wing, .pet-foot { transform-box: fill-box; }
.pet-eye, .pet-eye-happy, .pet-eye-shut { transform-origin: center; }
.pet-beak { transform-origin: 50% 6%; }
.pet-wing { transform-origin: 50% 4%; }
.pet-foot { transform-origin: 50% 50%; }

.pet-eye { animation: xp-pet-blink 5.2s infinite; }
.pet-eye-happy, .pet-eye-shut { opacity: 0; }

/* —— 状态：走动 —— */
.xp-pet[data-state="walk"] .xp-pet__body { animation: xp-pet-waddle 0.62s ease-in-out infinite; }
/* 往左走时整体往左倾，方向一目了然 */
.xp-pet[data-state="walk"].is-face-left .xp-pet__body { animation-name: xp-pet-waddle-l; }
.xp-pet[data-state="walk"] .pet-foot--l { animation: xp-pet-step 0.31s ease-in-out infinite alternate; }
.xp-pet[data-state="walk"] .pet-foot--r { animation: xp-pet-step 0.31s ease-in-out infinite alternate-reverse; }
.xp-pet[data-state="walk"] .pet-wing--l { animation: xp-pet-flap 0.31s ease-in-out infinite alternate; }
.xp-pet[data-state="walk"] .pet-wing--r { animation: xp-pet-flap-r 0.31s ease-in-out infinite alternate; }

/* —— 状态：开心（被逗） —— */
.xp-pet[data-state="happy"] .xp-pet__body { animation: xp-pet-jump 0.44s ease-in-out 2; }
.xp-pet[data-state="happy"] .pet-eye { opacity: 0; animation: none; }
.xp-pet[data-state="happy"] .pet-eye-happy { opacity: 1; }
.xp-pet[data-state="happy"] .pet-wing--l { animation: xp-pet-happy-wing 0.22s ease-in-out 4 alternate; }
.xp-pet[data-state="happy"] .pet-wing--r { animation: xp-pet-happy-wing-r 0.22s ease-in-out 4 alternate; }

/* —— 状态：吃东西 —— */
.xp-pet[data-state="eat"] .xp-pet__body { animation: xp-pet-eat 0.36s ease-in-out infinite; }
.xp-pet[data-state="eat"] .pet-beak { transform: scaleY(0.55) translateY(1px); }
.xp-pet[data-state="eat"] .pet-beak-open { opacity: 1; animation: xp-pet-chew 0.36s ease-in-out infinite; }
.xp-pet[data-state="eat"] .pet-eye { animation: none; }

/* —— 状态：睡觉 —— */
.xp-pet[data-state="sleep"] .xp-pet__body { animation: xp-pet-sleep 4.6s ease-in-out infinite; }
.xp-pet[data-state="sleep"] .pet-eye { opacity: 0; animation: none; }
.xp-pet[data-state="sleep"] .pet-eye-shut { opacity: 1; }
.xp-pet[data-state="sleep"] .pet-wing--l { transform: rotate(-4deg); }
.xp-pet[data-state="sleep"] .pet-wing--r { transform: rotate(4deg); }
.xp-pet[data-state="sleep"] .xp-pet__zzz { opacity: 1; animation: xp-pet-zzz 2.6s ease-out infinite; }

/* —— 状态：饿了 / 难过 —— */
.xp-pet[data-state="sad"] .xp-pet__body { animation: xp-pet-sad 3.2s ease-in-out infinite; }
.xp-pet[data-state="sad"] .pet-eye { animation: none; transform: translateY(0.8px) scaleY(0.72); }
.xp-pet[data-state="sad"] .pet-wing--l { transform: rotate(-8deg); }
.xp-pet[data-state="sad"] .pet-wing--r { transform: rotate(8deg); }
.xp-pet[data-state="sad"] .pet-belly { animation: xp-pet-hungry 3.2s ease-in-out infinite; }

/* —— 影子 / 睡觉的 z —— */
.xp-pet__shadow {
  position: absolute;
  left: 12%; right: 12%; bottom: -8%;
  height: 8%;
  background: radial-gradient(closest-side, rgba(10, 40, 80, 0.3), rgba(10, 40, 80, 0));
  border-radius: 50%;
  pointer-events: none;
}
.xp-pet__zzz {
  position: absolute;
  right: 0; top: 2%;
  font: 700 11px/1 Georgia, "Times New Roman", serif;
  color: #2b5f96;
  opacity: 0;
  pointer-events: none;
}
.xp-pet.is-face-left .xp-pet__zzz { right: auto; left: 0; }

/* —— 气泡 —— */
.xp-pet__tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 220px;
  padding: 6px 10px;
  background: var(--xp-yellow, #fffbd5);
  color: #3a3a28;
  border: 1px solid #8f8f6f;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.55;
  text-align: center;
  box-shadow: 2px 3px 8px rgba(0, 20, 60, 0.25);
  z-index: 4;
  animation: xp-pet-tip-in 0.18s ease-out;
}
.xp-pet__tip::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -6px;
  width: 10px; height: 10px;
  margin-left: -5px;
  background: var(--xp-yellow, #fffbd5);
  border-right: 1px solid #8f8f6f;
  border-bottom: 1px solid #8f8f6f;
  transform: rotate(45deg);
}
.xp-pet:hover .xp-pet__tip,
.xp-pet:focus-within .xp-pet__tip,
.xp-pet.is-tools .xp-pet__tip { bottom: calc(100% + 42px); }

/* —— 悬停工具条 —— */
.xp-pet__tools {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 3px;
  padding: 3px;
  background: linear-gradient(#ffffff, #e8eff8);
  border: 1px solid #94a9c4;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 20, 50, 0.25);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.16s ease, visibility 0.16s;
  z-index: 5;
}
.xp-pet.is-right .xp-pet__tools { left: auto; right: 0; transform: none; }
.xp-pet.is-left .xp-pet__tools { left: 0; transform: none; }
.xp-pet:hover .xp-pet__tools,
.xp-pet:focus-within .xp-pet__tools,
.xp-pet.is-tools .xp-pet__tools { opacity: 1; visibility: visible; }

.xp-pet__tools button {
  width: 24px; height: 22px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 3px;
  background: none;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.xp-pet__tools button:hover { background: var(--xp-select, #316ac5); border-color: #1c4a94; }
.xp-pet__tools button:hover { color: #fff; }
.xp-pet__tools button:focus-visible { outline: 1px dotted #1c4a94; outline-offset: 1px; }

/* —— 食物与爱心 —— */
.xp-pet__food {
  position: absolute;
  left: 50%; bottom: -2%;
  font-size: calc(var(--pet-size, 68px) * 0.34);
  transform: translateX(-50%);
  pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.22));
  animation: xp-pet-food 0.5s ease-out;
}
.xp-pet__heart {
  position: absolute;
  bottom: 62%;
  font-size: calc(var(--pet-size, 68px) * 0.2);
  color: #e2557a;
  pointer-events: none;
  animation: xp-pet-heart 1.15s ease-out forwards;
}

/* —— 动画 —— */
@keyframes xp-pet-breathe {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  50% { transform: translateY(-2%) scale(1.015, 1.03); }
}
@keyframes xp-pet-blink {
  0%, 91%, 100% { transform: scaleY(1); }
  93% { transform: scaleY(0.08); }
  96% { transform: scaleY(1); }
}
@keyframes xp-pet-waddle {
  0% { transform: translateX(-2%) rotate(-4deg); }
  50% { transform: translateX(2%) translateY(-4%) rotate(4deg); }
  100% { transform: translateX(-2%) rotate(-4deg); }
}
/* 往左走：身体持续左倾，只做小幅摆动 */
@keyframes xp-pet-waddle-l {
  0% { transform: translateX(2%) rotate(-3deg); }
  50% { transform: translateX(-2%) translateY(-4%) rotate(-7deg); }
  100% { transform: translateX(2%) rotate(-3deg); }
}
@keyframes xp-pet-step {
  from { transform: translateY(0) rotate(0); }
  to { transform: translateY(-6px) rotate(7deg); }
}
@keyframes xp-pet-flap {
  from { transform: rotate(0); }
  to { transform: rotate(-7deg); }
}
@keyframes xp-pet-flap-r {
  from { transform: rotate(0); }
  to { transform: rotate(7deg); }
}
@keyframes xp-pet-happy-wing {
  from { transform: rotate(0); }
  to { transform: rotate(-16deg); }
}
@keyframes xp-pet-happy-wing-r {
  from { transform: rotate(0); }
  to { transform: rotate(16deg); }
}
@keyframes xp-pet-jump {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  35% { transform: translateY(-34%) rotate(-4deg); }
  62% { transform: translateY(0) scale(1.03, 0.94); }
}
@keyframes xp-pet-eat {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  50% { transform: translateY(-5%) scale(1.02, 0.98); }
}
@keyframes xp-pet-chew {
  0%, 100% { transform: scaleY(0.9); }
  50% { transform: scaleY(1.15); }
}
@keyframes xp-pet-sleep {
  0%, 100% { transform: scale(1, 1) translateY(2%); }
  50% { transform: scale(1.02, 0.96) translateY(3%); }
}
@keyframes xp-pet-sad {
  0%, 100% { transform: translateY(3%) scale(0.98, 0.97); }
  50% { transform: translateY(2%) scale(0.98, 0.96); }
}
@keyframes xp-pet-hungry {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.82; }
}
@keyframes xp-pet-zzz {
  0% { opacity: 0; transform: translate(0, 0) scale(0.7); }
  30% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(10px, -26px) scale(1.15); }
}
@keyframes xp-pet-tip-in {
  from { opacity: 0; transform: translateX(-50%) translateY(5px) scale(0.97); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes xp-pet-food {
  from { opacity: 0; transform: translate(-50%, -34px) rotate(-20deg); }
  60% { opacity: 1; }
  to { opacity: 1; transform: translate(-50%, 0) rotate(0); }
}
@keyframes xp-pet-heart {
  0% { opacity: 0; transform: translate(0, 0) scale(0.6); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 0), -46px) scale(1.05); }
}

/* —— 移动端 —— */
@media (max-width: 780px) {
  .xp-pet { bottom: 33px; }
  .xp-pet__tip { max-width: 176px; font-size: 11.5px; }
}

/* —— 阅读模式 / 打印 / 减少动效 —— */
body.xp-zen .xp-pet { display: none !important; }
@media print {
  .xp-pet { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .xp-pet { transition: none; }
  .xp-pet__body,
  .pet-eye,
  .pet-beak,
  .pet-beak-open,
  .pet-belly,
  .pet-wing,
  .pet-foot,
  .xp-pet__zzz,
  .xp-pet__tip,
  .xp-pet__food,
  .xp-pet__heart { animation: none !important; }
}