/* The love meter — the ONE meter, worn by every planet game (js/tasks/meter.js).
   A heart over a thin bar, fixed at the screen's right edge. It rises with
   every right answer and is full the moment the planet loves you. Full: the
   heart wakes and beats gold. Low: the bar chills blue. A drop: a flinch.
   Self-contained: its keyframes live here, not in base.css. */

.love {
  position: fixed;
  right: 4vw;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6em;
}
.love-heart {
  font-size: 0.9rem;
  color: rgba(232, 193, 106, 0.3);
  transition: color 0.7s ease, text-shadow 0.7s ease, transform 0.7s ease;
}
.love-bar {
  width: 6px;
  height: 32vh;
  border: 1px solid rgba(232, 193, 106, 0.35);
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.love-fill {
  width: 100%;
  height: 0;
  background: linear-gradient(to top, #E8C16A, #F3EAD8);
  box-shadow: 0 0 10px 2px rgba(232, 193, 106, 0.45);
  transition: height 0.7s ease, background 0.7s ease, box-shadow 0.7s ease;
}

/* Full: the heart wakes up. */
.love.full .love-heart {
  color: var(--gold);
  text-shadow: 0 0 14px rgba(232, 193, 106, 0.8);
  animation: love-beat 2.4s ease-in-out infinite;
}
.love.full .love-fill { box-shadow: 0 0 18px 4px rgba(232, 193, 106, 0.6); }
@keyframes love-beat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.28); }
}

/* Low: the love turns to a bluish chill. */
.love.cold .love-heart { color: #7fa8c8; text-shadow: 0 0 10px rgba(90, 130, 170, 0.5); }
.love.cold .love-fill {
  background: linear-gradient(to top, #3a5a7a, #7fa8c8);
  box-shadow: 0 0 10px 2px rgba(90, 130, 170, 0.4);
}

/* A wrong answer: the meter flinches as its love drops. */
.love.hurt { animation: love-flinch 0.4s ease; }
.love.hurt .love-heart { color: #d98a8a; text-shadow: 0 0 12px rgba(217, 138, 138, 0.7); }
@keyframes love-flinch {
  0%, 100% { transform: translateY(-50%); }
  25% { transform: translateY(-50%) translateX(4px); }
  75% { transform: translateY(-50%) translateX(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .love.full .love-heart { animation: none; }
  .love.hurt { animation: none; }
}