/* VitalPet - Pet Engine CSS */

/* === Container === */
.pet-container {
  position: relative;
  width: 220px;
  margin: 0 auto;
  padding: 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #e2e8f0;
}

/* === Color classes === */
.pet-gray    { border-color: #6b7280; }
.pet-yellow  { border-color: #fbbf24; }
.pet-blue    { border-color: #3b82f6; }
.pet-teal    { border-color: #00b4a0; }
.pet-gold    { border-color: #fbbf24; box-shadow: 0 0 12px rgba(251,191,36,0.3); }
.pet-rainbow { border-image: linear-gradient(135deg,#ef4444,#f59e0b,#10b981,#3b82f6,#8b5cf6) 1; box-shadow: 0 0 20px rgba(139,92,246,0.3); }

/* === Pet display === */
.pet-display {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pet-emoji { font-size: 64px; display: block; line-height: 1; }

/* === ECG trace === */
.pet-ecg-trace {
  position: absolute;
  bottom: 20px;
  left: 10%;
  width: 80%;
  height: 16px;
  overflow: hidden;
  opacity: 0.7;
}
.pet-ecg-trace svg { width: 100%; height: 100%; }
.ecg-path {
  fill: none;
  stroke: #00b4a0;
  stroke-width: 1.5;
}

/* ECG animations via stroke-dashoffset */
.ecg-flat .ecg-path { d: path("M0,10 L100,10"); }

.ecg-slow .ecg-path {
  d: path("M0,10 Q12,4 25,10 Q37,16 50,10 Q62,4 75,10 Q87,16 100,10");
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: ecg-scroll 4s linear infinite;
}

.ecg-normal .ecg-path {
  d: path("M0,10 L15,10 L20,6 L25,14 L28,2 L32,18 L35,10 L50,10 L65,10 L70,6 L75,14 L78,2 L82,18 L85,10 L100,10");
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
  animation: ecg-scroll 1.2s linear infinite;
}

.ecg-strong .ecg-path {
  d: path("M0,10 L15,10 L20,6 L25,14 L28,2 L32,18 L35,10 L50,10 L65,10 L70,6 L75,14 L78,2 L82,18 L85,10 L100,10");
  stroke: #00d4c0;
  stroke-width: 2;
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
  animation: ecg-scroll 0.9s linear infinite;
}

.ecg-perfect .ecg-path {
  d: path("M0,10 L15,10 L20,6 L25,14 L28,2 L32,18 L35,10 L50,10 L65,10 L70,6 L75,14 L78,2 L82,18 L85,10 L100,10");
  stroke: #00b4a0;
  stroke-width: 2.5;
  filter: drop-shadow(0 0 4px #00b4a0);
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
  animation: ecg-scroll 0.8s linear infinite;
}

.ecg-mastery .ecg-path {
  d: path("M0,10 L15,10 L20,6 L25,14 L28,2 L32,18 L35,10 L50,10 L65,10 L70,6 L75,14 L78,2 L82,18 L85,10 L100,10");
  stroke: #fbbf24;
  stroke-width: 2.5;
  filter: drop-shadow(0 0 6px #fbbf24);
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
  animation: ecg-scroll 0.7s linear infinite;
}

.ecg-critical .ecg-path {
  d: path("M0,10 L10,10 L15,3 L20,17 L30,10 L40,8 L45,12 L55,6 L60,15 L70,10 L80,10 L85,4 L90,16 L100,10");
  stroke: #ef4444;
  stroke-width: 2;
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
  animation: ecg-scroll 0.6s linear infinite, ecg-jitter 0.3s ease-in-out infinite;
}

@keyframes ecg-scroll {
  to { stroke-dashoffset: 0; }
}
@keyframes ecg-jitter {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(1px); }
}

/* === Pet behavior animations === */
.bounce {
  animation: pet-bounce 0.8s ease-in-out infinite;
}
@keyframes pet-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.slow-pulse {
  animation: pet-slow-pulse 3s ease-in-out infinite;
}
@keyframes pet-slow-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.droop {
  transform: translateY(4px) rotate(2deg);
  opacity: 0.8;
}

.glow-pulse {
  animation: pet-glow-pulse 1.2s ease-in-out infinite;
}
@keyframes pet-glow-pulse {
  0%, 100% { filter: drop-shadow(0 0 4px transparent); }
  50% { filter: drop-shadow(0 0 12px #00b4a0); }
}

.shake {
  animation: pet-shake 0.3s ease-in-out infinite;
}
@keyframes pet-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.evolution-burst {
  animation: pet-evolution 1.2s ease-out forwards;
}
@keyframes pet-evolution {
  0% { transform: scale(1) rotate(0); filter: brightness(1); }
  30% { transform: scale(1.5) rotate(10deg); filter: brightness(2); }
  60% { transform: scale(0.8) rotate(-5deg); filter: brightness(1.5); }
  100% { transform: scale(1) rotate(0); filter: brightness(1); }
}

.xp-float {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  color: #fbbf24;
  font-weight: 700;
  font-size: 14px;
  pointer-events: none;
  animation: xp-float-up 1.5s ease-out forwards;
}
@keyframes xp-float-up {
  0% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-40px); }
}

/* === Mood bubble === */
.pet-mood-bubble {
  font-size: 13px;
  margin-bottom: 4px;
  opacity: 0.9;
}

.pet-stage-label {
  font-size: 11px;
  color: #94a3b8;
  margin-bottom: 8px;
}

/* === Hunger bar === */
.pet-hunger-bar, .pet-xp-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 10px;
}
.hunger-label, .xp-label { width: 36px; text-align: right; color: #94a3b8; }
.hunger-track, .xp-track {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
  overflow: hidden;
}
.hunger-fill { height: 100%; border-radius: 3px; transition: width 0.5s, background 0.5s; }
.xp-fill { height: 100%; border-radius: 3px; background: #00b4a0; transition: width 0.5s; }
.hunger-pct, .xp-pct { width: 40px; font-size: 9px; color: #94a3b8; }

/* === Category bars === */
.pet-category-bars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-top: 8px;
}
.category-bar-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
}
.category-bar-label { width: 18px; text-align: center; font-size: 12px; }
.category-bar-track {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
}
.category-bar-fill { height: 100%; border-radius: 2px; transition: width 0.5s; }
.weakest-pulse { animation: weakest-glow 2s ease-in-out infinite; }
@keyframes weakest-glow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* === Streak badge === */
.pet-streak-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #fbbf24;
}
.xp-mult { font-size: 10px; color: #00b4a0; }

/* === Achievement toast === */
.achievement-toast {
  position: fixed;
  bottom: 20px;
  right: -300px;
  width: 240px;
  background: #1e293b;
  border: 1px solid #00b4a0;
  border-radius: 10px;
  padding: 12px 14px;
  color: #e2e8f0;
  font-size: 13px;
  z-index: 9999;
  transition: right 0.4s ease;
  box-shadow: 0 4px 20px rgba(0,180,160,0.3);
}
.achievement-toast.show { right: 20px; }
.achievement-icon { font-size: 20px; vertical-align: middle; }