/* Little Words — games/shared/mouth-cue.css
   Buddy's mouth-position panel. Sits beside/under Buddy while he models the
   word. Never interactive: it is a model to copy, not a control. */

.lwm {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: center;
  padding: 5px 10px 5px 5px;
  border-radius: 14px;
  background: #FFFDF6;
  border: 2px solid #E3D6B8;
  box-shadow: 0 2px 0 rgba(30, 42, 74, 0.06);
  pointer-events: none;
  max-width: 100%;
}
.lwm[hidden] { display: none; }

.lwm-face {
  width: 62px;
  height: 50px;
  flex: 0 0 auto;
  border-radius: 10px;
  overflow: hidden;
  background: #FEF6E0;
}
.lwm-face img { width: 100%; height: 100%; object-fit: contain; display: block; }

.lwm-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #4A5568;
  line-height: 1.15;
  letter-spacing: 0.01em;
}

/* a sound we actually model gets the warm accent; the neutral model stays
   quiet so it never reads as a correction */
.lwm[data-modelled='true'] { border-color: #6BAF8D; }
.lwm[data-modelled='true'] .lwm-label { color: #2F6B50; }

.lwm.in { animation: lwm-pop 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.5); }
@keyframes lwm-pop {
  0%   { transform: scale(0.72); opacity: 0; }
  60%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}
/* a slow breathing pulse while Buddy is actually saying the sound, so the eye
   goes to the mouth at the moment the sound happens */
.lwm.saying .lwm-face { animation: lwm-breathe 0.62s ease-in-out infinite; }
@keyframes lwm-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.1); }
}

@media (max-width: 380px) {
  .lwm { gap: 6px; padding: 4px 8px 4px 4px; }
  .lwm-face { width: 52px; height: 42px; }
  .lwm-label { font-size: 0.74rem; }
}
@media (max-height: 680px) {
  .lwm-face { width: 52px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .lwm.in, .lwm.saying .lwm-face { animation: none !important; }
}