:root {
  --primary: #FF6B3D;
  --primary-dark: #E85D2C;
  --primary-light: #FFF3ED;
  --primary-gradient: linear-gradient(135deg, #FF6B3D, #FF9060);
  --primary-gradient-hover: linear-gradient(135deg, #FF8259, #FFA47A);
  --bg: #FAF8F5;
  --bg-warm: #FFF9F5;
  --bg-cool: #F5F9FA;
  --text: #1A1A1A;
  --text-secondary: #5C5C5C;
  --text-muted: #9CA3AF;
  --border: #F0EEE9;
}
.fp-container {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 999;
  pointer-events: none;
}

.fp-container .fp-mask,
.fp-container .fp-pet-wrap,
.fp-container .fp-menu,
.fp-container .fp-picker {
  pointer-events: auto;
}

.fp-mask {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 998;
  pointer-events: auto;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fp-picker {
  width: 80%;
  max-width: 300px;
  background: #fff;
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  animation: scaleIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

.fp-picker-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  margin-bottom: 4px;
}
.fp-picker-sub {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 16px;
}
.fp-pet-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.fp-pet-item {
  width: calc(33.33% - 7px);
  padding: 14px 8px;
  background: var(--bg);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  position: relative;
}
.fp-pet-item:active { transform: scale(0.95); }
.fp-pet-item.active {
  border-color: var(--primary);
  background: var(--primary-light);
}
.fp-pet-item.locked { opacity: 0.5; }
.fppi-emoji { font-size: 28px; }
.fppi-name { font-size: 12px; font-weight: 600; color: var(--text); }
.fppi-check {
  position: absolute;
  top: 5px; right: 6px;
  width: 18px; height: 18px;
  background: var(--primary-gradient);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
}
.fp-picker-close {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 10px;
  background: var(--bg);
  border-radius: 16px;
}

.fp-menu {
  width: 80%;
  max-width: 300px;
  background: #fff;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  animation: scaleIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto;
}

.fp-menu-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 0.5px solid var(--border);
  margin-bottom: 12px;
}
.fpmh-emoji {
  width: 50px; height: 50px;
  background: linear-gradient(135deg, #FFF3ED, #FFE8DD);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
}
.fpmh-info { flex: 1; }
.fpmh-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}
.fpmh-mood {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 3px;
}

.fp-stats { margin-bottom: 14px; }
.fps-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
}
.fps-label {
  width: 60px;
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}
.fps-bar {
  flex: 1;
  height: 8px;
  background: var(--bg);
  border-radius: 4px;
  overflow: hidden;
}
.fps-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.fps-val {
  width: 30px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: right;
  font-weight: 600;
}

.fp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fp-action {
  width: calc(33.33% - 6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 0;
  background: var(--bg);
  border-radius: 10px;
  transition: all 0.2s ease;
  pointer-events: auto;
}
.fp-action:active {
  transform: scale(0.92);
  background: var(--primary-light);
}
.fpa-icon {
  width: 32px; height: 32px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.fpa-label { font-size: 12px; font-weight: 600; color: var(--text); }

/* ============ Pet Container ============ */
.fp-pet-wrap {
  position: absolute;
  pointer-events: auto;
  transition: left 0.08s ease-out, top 0.08s ease-out;
  z-index: 999;
  width: 80px;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  height: 90px;
}
.fp-pet-wrap.dragging {
  transition: none;
  z-index: 1000;
}
.fp-pet-wrap.dragging .fp-pet {
  transform: scale(1.12);
}
.fp-pet-wrap.dragging .fp-pet-shadow {
  transform: scale(0.5);
  opacity: 0.3;
}

.fp-pet-wrap.longpress .fp-pet {
  animation: petWiggle 0.3s ease-in-out 3;
}
@keyframes petWiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-10deg); }
  75% { transform: rotate(10deg); }
}

/* ============ Speech Bubble ============ */
.fp-bubble {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 6px;
  background: #fff;
  padding: 8px 14px;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  white-space: nowrap;
  animation: petBubbleIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 10;
}
@keyframes petBubbleIn {
  from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.8); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
.fpb-text {
  font-size: 12px;
  font-weight: 600;
  color: #333;
}
.fpb-arrow {
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  background: #fff;
  transform: translateX(-50%) rotate(45deg);
}

/* ============ Pet Main ============ */
.fp-pet {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: petIdle 2.5s ease-in-out infinite;
  transform-origin: bottom center;
  z-index: 2;
}

.fp-pet.vip {
  filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.75));
}
.fp-pet.vip::after {
  content: '👑';
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  animation: vipCrown 2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes vipCrown {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-3px); }
}

.fp-pet.sleeping { animation: petSleep 3s ease-in-out infinite; }
.fp-pet.happy { animation: petHappy 1.2s ease-in-out infinite; }
.fp-pet.hungry { animation: petHungry 1.5s ease-in-out infinite; }

@keyframes petIdle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes petSleep {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-2px) rotate(1deg); }
}
@keyframes petHappy {
  0%, 100% { transform: translateY(0) scale(1); }
  25% { transform: translateY(-6px) scale(1.05, 0.95); }
  50% { transform: translateY(-2px) scale(0.95, 1.05); }
  75% { transform: translateY(-4px) scale(1.02, 0.98); }
}
@keyframes petHungry {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(-2px) rotate(-3deg); }
  66% { transform: translateY(-2px) rotate(3deg); }
}

/* ============ Pet Body Base ============ */
.fp-pet-body {
  position: relative;
  width: 60px;
  height: 65px;
  z-index: 2;
}

/* Body shape - rounded blob */
.fp-pet-body::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 52px;
  background: linear-gradient(145deg, #FFB380, #FF8C42);
  border-radius: 50% 50% 48% 48% / 55% 55% 45% 45%;
  box-shadow: inset -4px -4px 10px rgba(0,0,0,0.12), inset 4px 4px 8px rgba(255,255,255,0.25);
}

/* Belly lighter area */
.fp-pet-body::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 28px;
  background: linear-gradient(180deg, #FFE4CC, #FFD4B0);
  border-radius: 50%;
  opacity: 0.9;
  z-index: 1;
}

/* ============ Ears ============ */
.fp-pet-ear {
  position: absolute;
  top: 0;
  width: 18px;
  height: 20px;
  z-index: 0;
}
.fp-ear-left {
  left: 4px;
  transform: rotate(-20deg);
}
.fp-ear-right {
  right: 4px;
  transform: rotate(20deg);
}

/* Cat ears - pointy triangles */
.pet-cat .fp-pet-ear {
  background: linear-gradient(145deg, #FFB380, #FF8C42);
  border-radius: 30% 30% 10% 10%;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
.pet-cat .fp-pet-ear::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 10px;
  background: #FFD4B0;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

/* Dog ears - floppy */
.pet-dog .fp-pet-ear {
  background: linear-gradient(145deg, #6BA3E8, #4A90D9);
  border-radius: 50% 50% 30% 30%;
  width: 14px;
  height: 24px;
}
.pet-dog .fp-ear-left {
  transform: rotate(-35deg);
  top: 8px;
}
.pet-dog .fp-ear-right {
  transform: rotate(35deg);
  top: 8px;
}

/* Rabbit ears - very long upright */
.pet-rabbit .fp-pet-ear {
  background: linear-gradient(180deg, #FFFFFF 0%, #F0E8EC 100%);
  border-radius: 50% 50% 20% 20%;
  width: 14px;
  height: 44px;
  top: -18px;
  box-shadow: inset 0 -4px 8px rgba(200,180,190,0.15);
}
.pet-rabbit .fp-ear-left {
  transform: rotate(-12deg);
  left: 10px;
}
.pet-rabbit .fp-ear-right {
  transform: rotate(12deg);
  right: 10px;
}
.pet-rabbit .fp-pet-ear::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 32px;
  background: linear-gradient(180deg, #FFD1E3, #F5A6C7);
  border-radius: 50% 50% 30% 30%;
  opacity: 0.9;
}

/* Rabbit body - pure white/cream */
.pet-rabbit .fp-pet-body::before {
  background: linear-gradient(145deg, #FFFFFF, #F5EEF2);
  border-radius: 50% 50% 48% 48% / 55% 55% 45% 45%;
  box-shadow: inset -4px -4px 10px rgba(180,160,170,0.08), inset 4px 4px 8px rgba(255,255,255,0.8);
}
.pet-rabbit .fp-pet-body::after {
  background: linear-gradient(180deg, #FFFFFF, #F8F2F5);
  width: 34px;
  height: 30px;
}

/* Panda ears - round */
.pet-panda .fp-pet-ear {
  background: #2D3436;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  top: 2px;
}
.pet-panda .fp-pet-body::before {
  background: #FAFAFA;
}
.pet-panda .fp-pet-body::after {
  background: #FFFFFF;
}

/* Penguin - black back, white front, no visible ears */
.pet-penguin .fp-pet-ear {
  display: none;
}
.pet-penguin .fp-pet-body {
  width: 50px;
  height: 68px;
}
.pet-penguin .fp-pet-body::before {
  background: linear-gradient(145deg, #3D3D4E, #1A1A2E);
  border-radius: 48% 48% 50% 50% / 55% 55% 45% 45%;
  box-shadow: inset -6px -4px 12px rgba(0,0,0,0.3), inset 4px 4px 10px rgba(80,80,100,0.2);
}
.pet-penguin .fp-pet-body::after {
  background: linear-gradient(180deg, #FFFFFF, #F0F0F5);
  width: 32px;
  height: 44px;
  bottom: 2px;
  border-radius: 50%;
  box-shadow: inset 0 -2px 6px rgba(0,0,0,0.05);
}

/* Penguin wings */
.fp-pet-wing {
  position: absolute;
  top: 22px;
  width: 8px;
  height: 24px;
  background: linear-gradient(90deg, #2D3436, #4A4A5E);
  border-radius: 50% 30% 30% 50%;
  z-index: 3;
}
.fp-wing-left {
  left: -4px;
  transform: rotate(-10deg);
  border-radius: 50% 0% 0% 50%;
  transform-origin: right center;
}
.fp-wing-right {
  right: -4px;
  transform: rotate(10deg);
  border-radius: 0% 50% 50% 0%;
  transform-origin: left center;
}
.fp-pet-wrap.action-happyJump .fp-pet-wing {
  animation: wingFlap 0.4s ease-out 2;
}
@keyframes wingFlap {
  0% { transform: rotate(-10deg); }
  50% { transform: rotate(30deg); }
  100% { transform: rotate(-10deg); }
}

/* ============ Face ============ */
.fp-pet-face {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 38px;
  z-index: 3;
}

/* Eyes */
.fp-pet-eye {
  position: absolute;
  top: 0;
  width: 10px;
  height: 12px;
  background: #2D3436;
  border-radius: 50%;
  transition: all 0.3s ease;
}
.fp-eye-left { left: 6px; }
.fp-eye-right { right: 6px; }

.fp-eye-shine {
  position: absolute;
  top: 2px;
  right: 1px;
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 50%;
}

/* Sleeping eyes - closed */
.fp-pet.sleeping .fp-pet-eye {
  height: 2px;
  border-radius: 2px;
  top: 5px;
}
.fp-pet.sleeping .fp-eye-shine {
  display: none;
}

/* Happy eyes - curved */
.fp-pet.happy .fp-pet-eye {
  height: 4px;
  border-radius: 10px 10px 0 0;
  top: 4px;
}
.fp-pet.happy .fp-eye-shine {
  display: none;
}

/* Panda eye patches */
.pet-panda .fp-pet-eye {
  background: #2D3436;
  width: 12px;
  height: 14px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #2D3436;
}
.pet-panda .fp-eye-shine {
  background: #fff;
  width: 3px;
  height: 3px;
}

/* Penguin eyes - on white face disc, smaller */
.pet-penguin .fp-pet-eye {
  background: #1A1A2E;
  width: 7px;
  height: 8px;
  top: 4px;
  z-index: 5;
}
.pet-penguin .fp-eye-shine {
  background: #fff;
  width: 3px;
  height: 3px;
  top: 1px;
  right: 0px;
}

/* Penguin beak - prominent triangular */
.fp-pet-beak {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 10px solid #FF8C00;
  z-index: 5;
}
.pet-penguin .fp-pet-beak {
  border-top-color: #FF8C00;
}
.pet-penguin .fp-pet-nose {
  display: none;
}
.pet-penguin .fp-pet-face {
  top: 16px;
  width: 36px;
  height: 28px;
}
.pet-penguin .fp-pet-eye {
  top: 0;
}
.pet-penguin .fp-eye-left { left: 4px; }
.pet-penguin .fp-eye-right { right: 4px; }
.pet-rabbit .fp-pet-nose {
  background: #F5A6C7;
  width: 5px;
  height: 4px;
  top: 16px;
}

/* ============ Blush ============ */
.fp-pet-blush {
  position: absolute;
  top: 18px;
  width: 8px;
  height: 5px;
  background: #FF9999;
  border-radius: 50%;
  opacity: 0.7;
  z-index: 3;
}
.fp-blush-left { left: 2px; }
.fp-blush-right { right: 2px; }

/* ============ Nose ============ */
.fp-pet-nose {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 4px;
  background: #FF6B6B;
  border-radius: 50%;
  z-index: 4;
}
.pet-panda .fp-pet-nose {
  background: #2D3436;
}
.pet-penguin .fp-pet-nose {
  background: #FF8C00;
  width: 5px;
  height: 5px;
  border-radius: 30%;
  top: 13px;
}

/* ============ Mouth ============ */
.fp-pet-mouth {
  position: absolute;
  top: 19px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 6px;
  border-bottom: 1.5px solid #2D3436;
  border-radius: 0 0 50% 50%;
  z-index: 4;
}
.fp-pet-mouth.happy-mouth {
  width: 12px;
  height: 5px;
  border-bottom: 2px solid #2D3436;
  border-radius: 0 0 50% 50%;
}
.fp-pet-mouth.eating {
  width: 8px;
  height: 8px;
  background: #FF6B6B;
  border-radius: 50%;
  border: none;
}
.pet-panda .fp-pet-mouth {
  border-color: #2D3436;
}
.pet-penguin .fp-pet-mouth {
  display: none;
}

/* Rabbit face - adjusted for long ears */
.pet-rabbit .fp-pet-face {
  top: 18px;
}
.pet-rabbit .fp-pet-eye {
  width: 9px;
  height: 10px;
  top: 0;
}
.pet-rabbit .fp-pet-mouth {
  width: 10px;
  height: 4px;
  border-bottom-color: #D49AAB;
  top: 22px;
}

/* ============ Whiskers (cat only) ============ */
.fp-pet-whisker {
  position: absolute;
  top: 17px;
  width: 10px;
  height: 1px;
  background: rgba(45,52,54,0.5);
  z-index: 4;
}
.fp-whisker-left {
  left: -2px;
  transform: rotate(-5deg);
}
.fp-whisker-right {
  right: -2px;
  transform: rotate(5deg);
}
.fp-pet-whisker::before,
.fp-pet-whisker::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 1px;
  background: rgba(45,52,54,0.4);
}
.fp-whisker-left::before { top: -2px; transform: rotate(-8deg); }
.fp-whisker-left::after { top: 2px; transform: rotate(8deg); }
.fp-whisker-right::before { top: -2px; transform: rotate(8deg); }
.fp-whisker-right::after { top: 2px; transform: rotate(-8deg); }

/* ============ Paws ============ */
.fp-pet-paw {
  position: absolute;
  bottom: 2px;
  width: 14px;
  height: 10px;
  background: linear-gradient(145deg, #FFB380, #FF8C42);
  border-radius: 50% 50% 40% 40%;
  z-index: 4;
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.15);
}
.fp-paw-left { left: 8px; }
.fp-paw-right { right: 8px; }

.pet-cat .fp-pet-paw {
  background: linear-gradient(145deg, #FFB380, #FF8C42);
}
.pet-dog .fp-pet-paw {
  background: linear-gradient(145deg, #6BA3E8, #4A90D9);
}
.pet-rabbit .fp-pet-paw {
  background: linear-gradient(145deg, #FFFFFF, #F0E8EC);
  height: 12px;
  width: 12px;
}
.pet-panda .fp-pet-paw {
  background: #2D3436;
}
.pet-penguin .fp-pet-paw {
  background: linear-gradient(180deg, #FFB347, #FF8C00);
  width: 12px;
  height: 8px;
  bottom: -2px;
  border-radius: 40% 40% 50% 50%;
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.15);
}

/* ============ Tail ============ */
.fp-pet-tail {
  position: absolute;
  bottom: 22px;
  right: -6px;
  width: 16px;
  height: 8px;
  background: linear-gradient(145deg, #FFB380, #FF8C42);
  border-radius: 50%;
  transform-origin: left center;
  z-index: 1;
}

.pet-cat .fp-pet-tail {
  width: 20px;
  height: 6px;
  border-radius: 50% 40% 40% 50%;
  right: -10px;
  bottom: 28px;
  transform: rotate(-10deg);
}
.pet-dog .fp-pet-tail {
  width: 10px;
  height: 18px;
  border-radius: 50%;
  right: 4px;
  bottom: 34px;
  background: linear-gradient(145deg, #6BA3E8, #4A90D9);
}
.pet-rabbit .fp-pet-tail {
  width: 10px;
  height: 10px;
  background: #FFFFFF;
  border-radius: 50%;
  right: 12px;
  bottom: 28px;
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.05);
}
.pet-panda .fp-pet-tail {
  width: 8px;
  height: 6px;
  background: #2D3436;
  right: 4px;
  bottom: 22px;
}
.pet-penguin .fp-pet-tail {
  display: none;
}

.fp-pet-tail.wagging {
  animation: tailWag 0.4s ease-in-out infinite;
}
@keyframes tailWag {
  0%, 100% { transform: rotate(-15deg); }
  50% { transform: rotate(15deg); }
}

/* ============ Glow Effect ============ */
.fp-pet-glow {
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  opacity: 0.15;
  filter: blur(18px);
  z-index: 0;
  animation: glowPulse 3s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { opacity: 0.1; transform: scale(1); }
  50% { opacity: 0.22; transform: scale(1.08); }
}

/* ============ Shadow ============ */
.fp-pet-shadow {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 8px;
  background: rgba(0,0,0,0.22);
  border-radius: 50%;
  filter: blur(3px);
  z-index: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* ============ Sleep Z ============ */
.fp-sleep-z {
  position: absolute;
  top: -8px;
  right: 6px;
  font-size: 14px;
  font-weight: 700;
  color: #6C5CE7;
  opacity: 0;
  animation: floatZ 2s ease-in-out infinite;
  z-index: 5;
}
.fp-sleep-z2 {
  position: absolute;
  top: -14px;
  right: 14px;
  font-size: 18px;
  font-weight: 700;
  color: #6C5CE7;
  opacity: 0;
  animation: floatZ 2s ease-in-out infinite 0.6s;
  z-index: 5;
}
@keyframes floatZ {
  0% { opacity: 0; transform: translateY(0) scale(0.8); }
  50% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-12px) scale(1.2); }
}

/* ============ Name Tag ============ */
.fp-name-tag {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  background: rgba(0,0,0,0.4);
  padding: 1px 8px;
  border-radius: 10px;
  white-space: nowrap;
  line-height: 1.4;
  backdrop-filter: blur(4px);
}

/* ============ Sparkle & Heart ============ */
.fp-sparkle {
  position: absolute;
  font-size: 18px;
  z-index: 5;
  pointer-events: none;
  animation: sparklePop 0.9s ease-out forwards;
}
.fp-sparkle-1 { top: -12px; left: -8px; animation-delay: 0s; }
.fp-sparkle-2 { top: -16px; right: -8px; animation-delay: 0.15s; }
.fp-sparkle-3 { top: -4px; right: 12px; animation-delay: 0.3s; }

@keyframes sparklePop {
  0% { opacity: 0; transform: scale(0) rotate(0deg); }
  30% { opacity: 1; transform: scale(1.3) rotate(90deg); }
  100% { opacity: 0; transform: scale(0.5) rotate(180deg) translateY(-12px); }
}

.fp-heart {
  position: absolute;
  font-size: 14px;
  z-index: 5;
  pointer-events: none;
  animation: heartFloat 0.7s ease-out forwards;
}
.fp-heart-1 { top: -4px; left: -6px; }
.fp-heart-2 { top: -8px; right: -4px; animation-delay: 0.1s; }

@keyframes heartFloat {
  0% { opacity: 0; transform: translateY(0) scale(0.5); }
  30% { opacity: 1; transform: translateY(-6px) scale(1.2); }
  100% { opacity: 0; transform: translateY(-20px) scale(0.8); }
}

.fp-food-fly {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 18px;
  z-index: 5;
  animation: foodFly 0.6s ease-out forwards;
}
@keyframes foodFly {
  0% { opacity: 0; transform: translateX(-50%) translateY(-20px) scale(0.5); }
  50% { opacity: 1; transform: translateX(-50%) translateY(-8px) scale(1.2); }
  100% { opacity: 0; transform: translateX(-50%) translateY(0) scale(1); }
}

/* ============ Action Animations ============ */
.fp-pet-wrap.action-blink .fp-pet {
  animation: petBlink 0.3s ease-out;
}
@keyframes petBlink {
  0% { transform: scaleY(1); }
  20% { transform: scaleY(0.1); }
  40% { transform: scaleY(1); }
  60% { transform: scaleY(0.15); }
  80% { transform: scaleY(1); }
  100% { transform: scaleY(1); }
}

.fp-pet-wrap.action-sway .fp-pet {
  animation: petSway 1.5s ease-in-out;
}
@keyframes petSway {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-5deg); }
  40% { transform: rotate(5deg); }
  60% { transform: rotate(-3deg); }
  80% { transform: rotate(3deg); }
}

.fp-pet-wrap.action-hop .fp-pet {
  animation: petHop 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.fp-pet-wrap.action-hop .fp-pet-shadow {
  animation: shadowHop 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes petHop {
  0% { transform: translateY(0) scale(1, 1); }
  20% { transform: translateY(0) scale(1.1, 0.9); }
  50% { transform: translateY(-25px) scale(0.95, 1.1); }
  80% { transform: translateY(0) scale(1.05, 0.95); }
  100% { transform: translateY(0) scale(1, 1); }
}
@keyframes shadowHop {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.22; }
  50% { transform: translateX(-50%) scale(0.4); opacity: 0.08; }
}

.fp-pet-wrap.action-walk .fp-pet {
  animation: petWalk 1.2s ease-in-out;
}
@keyframes petWalk {
  0% { transform: translateY(0) rotate(-2deg); }
  15% { transform: translateY(-5px) rotate(2deg); }
  30% { transform: translateY(0) rotate(-2deg); }
  45% { transform: translateY(-5px) rotate(2deg); }
  60% { transform: translateY(0) rotate(-2deg); }
  75% { transform: translateY(-5px) rotate(2deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

.fp-pet-wrap.action-happyJump .fp-pet {
  animation: petHappyJump 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fp-pet-wrap.action-happyJump .fp-pet-shadow {
  animation: shadowHop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes petHappyJump {
  0% { transform: translateY(0) scale(1) rotate(0deg); }
  30% { transform: translateY(-32px) scale(1.1) rotate(-8deg); }
  60% { transform: translateY(-16px) scale(0.95) rotate(8deg); }
  80% { transform: translateY(0) scale(1.05) rotate(0deg); }
  100% { transform: translateY(0) scale(1) rotate(0deg); }
}

.fp-pet-wrap.action-spin .fp-pet {
  animation: petSpin 0.8s ease-in-out;
}
@keyframes petSpin {
  0% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-15deg) scale(1.05); }
  50% { transform: rotate(15deg) scale(1.1); }
  75% { transform: rotate(-5deg) scale(1.02); }
  100% { transform: rotate(0deg) scale(1); }
}

.fp-pet-wrap.action-stretch .fp-pet {
  animation: petStretch 1s ease-in-out;
}
@keyframes petStretch {
  0% { transform: scale(1, 1); }
  30% { transform: scale(0.9, 1.15); }
  60% { transform: scale(1.05, 0.95); }
  100% { transform: scale(1, 1); }
}

.fp-pet-wrap.action-eat .fp-pet {
  animation: petEat 0.8s ease-in-out;
}
@keyframes petEat {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  20% { transform: translateY(-2px) scale(1.05, 0.95); }
  40% { transform: translateY(0) scale(0.95, 1.05); }
  60% { transform: translateY(-2px) scale(1.05, 0.95); }
  80% { transform: translateY(0) scale(0.95, 1.05); }
}
/* === 互动面板增强 === */
.fp-menu { animation: fpMenuIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes fpMenuIn {
  from { opacity: 0; transform: scale(0.85) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.fp-action { transition: background 0.2s, transform 0.15s; }
.fp-action:hover { background: #FFF3ED !important; transform: translateY(-2px); }
.fp-action:active { transform: scale(0.95); }
.fps-fill { box-shadow: 0 0 6px rgba(0,0,0,0.08); }

/* === New pets: fox / hamster / bear / duck / owl === */
.pet-fox .fp-pet-ear {
  background: linear-gradient(145deg, #FF9E70, #FF7043);
  border-radius: 30% 30% 10% 10%;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
.pet-fox .fp-pet-ear::after {
  content: '';
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 10px;
  background: #3E2723;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
.pet-fox .fp-pet-body::before {
  background: linear-gradient(145deg, #FFB380, #FF7043);
}
.pet-fox .fp-pet-body::after {
  background: linear-gradient(180deg, #FFF3E0, #FFE0B2);
}
.pet-fox .fp-pet-nose {
  background: #3E2723;
}
.pet-fox .fp-pet-tail {
  background: linear-gradient(180deg, #FF9E70, #FF7043);
  width: 20px;
  height: 8px;
  right: -10px;
}

.pet-hamster .fp-pet-ear {
  background: linear-gradient(145deg, #F5C06E, #E8A03C);
  border-radius: 50%;
  width: 16px;
  height: 14px;
  top: 2px;
}
.pet-hamster .fp-pet-ear::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 7px;
  height: 7px;
  background: #FFD9A8;
  border-radius: 50%;
}
.pet-hamster .fp-pet-body::before {
  background: linear-gradient(145deg, #F8C471, #E9A13C);
  border-radius: 55% 55% 45% 45% / 62% 62% 38% 38%;
}
.pet-hamster .fp-pet-body::after {
  background: linear-gradient(180deg, #FFF7E6, #FFE9BF);
  width: 34px;
}
.pet-hamster .fp-pet-nose {
  background: #FF7B7B;
}

.pet-bear .fp-pet-ear {
  background: #8D6E63;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  top: 0;
}
.pet-bear .fp-pet-ear::after {
  content: '';
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  background: #C8A98F;
  border-radius: 50%;
}
.pet-bear .fp-pet-body::before {
  background: linear-gradient(145deg, #A1887F, #795548);
}
.pet-bear .fp-pet-body::after {
  background: linear-gradient(180deg, #EFE2D6, #D7C4B0);
}
.pet-bear .fp-pet-nose {
  background: #3E2723;
}
.pet-bear .fp-pet-tail {
  background: linear-gradient(180deg, #A1887F, #795548);
  width: 10px;
  height: 9px;
}

.pet-duck .fp-pet-ear {
  display: none;
}
.pet-duck .fp-pet-body::before {
  background: linear-gradient(145deg, #FFE082, #FFC107);
}
.pet-duck .fp-pet-body::after {
  background: linear-gradient(180deg, #FFF9E0, #FFECB3);
  width: 34px;
}
.pet-duck .fp-pet-beak {
  border-top-color: #FF9800;
  border-left-width: 7px;
  border-right-width: 7px;
  border-top-width: 12px;
}
.pet-duck .fp-pet-nose {
  display: none;
}
.pet-duck .fp-pet-mouth {
  display: none;
}
.pet-duck .fp-pet-tail {
  background: linear-gradient(180deg, #FFE082, #FFC107);
  width: 12px;
  height: 8px;
  right: -6px;
}

.pet-owl .fp-pet-ear {
  display: none;
}
.pet-owl .fp-pet-body::before {
  background: linear-gradient(145deg, #A9976A, #7D6B47);
}
.pet-owl .fp-pet-body::after {
  background: linear-gradient(180deg, #F5EEDB, #E8DDC0);
}
.pet-owl .fp-pet-eye {
  background: #FFF;
  width: 13px;
  height: 13px;
  box-shadow: 0 0 0 2px #7D6B47;
}
.pet-owl .fp-eye-shine {
  background: #2D3436;
  width: 5px;
  height: 5px;
  top: 1px;
  right: 1px;
}
.pet-owl .fp-pet-beak {
  border-top-color: #E8A03C;
}
.pet-owl .fp-pet-nose {
  display: none;
}