/* Mouth diagram + controls */
.mouth-figure {
  background: linear-gradient(180deg, #FDFCFA 0%, #F6F1E7 100%);
  border: 1px solid var(--border);
  border-radius: 12px; padding: 12px; text-align: center;
  position: relative;
}
.mouth-figure svg { width: 100%; height: auto; display: block; }

.figure-caption {
  font-size: .78rem; margin-top: 8px; font-weight: 600;
  min-height: 1.3em; transition: color .3s;
}
.figure-caption.wrong-cap { color: var(--wrong); }
.figure-caption.right-cap { color: var(--right); }
.figure-caption.mid-cap   { color: var(--brand-amber); }

.scrub-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.scrub-lbl { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.scrub-lbl.w { color: var(--wrong); }
.scrub-lbl.r { color: var(--right); }
input[type=range].scrub {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--wrong), var(--brand-amber), var(--right));
  outline: none; cursor: pointer;
}
input[type=range].scrub::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 3px solid var(--brand-navy);
  cursor: grab; box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
input[type=range].scrub::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 3px solid var(--brand-navy); cursor: grab;
}

.pos-toggle { display: flex; gap: 0; margin-top: 10px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.pos-toggle button {
  flex: 1; padding: 9px 4px; border: none; cursor: pointer;
  font-family: var(--sans); font-size: .74rem; font-weight: 600;
  background: #fff; color: var(--muted);
  transition: background .15s, color .15s;
}
.pos-toggle button.active.wrong-btn { background: var(--wrong); color: #fff; }
.pos-toggle button.active.right-btn { background: var(--right); color: #fff; }
.pos-toggle button:not(.active):hover { background: #F5F2EC; }

.anim-btn {
  width: 100%; margin-top: 8px; padding: 10px;
  background: linear-gradient(135deg, var(--brand-navy), var(--brand-navy-2));
  color: #fff; border: none; border-radius: 8px;
  font-family: var(--sans); font-size: .8rem; font-weight: 700;
  letter-spacing: .03em; cursor: pointer;
  transition: transform .12s, box-shadow .2s;
  box-shadow: 0 2px 8px rgba(15,31,61,.25);
}
.anim-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(15,31,61,.35); }
.anim-btn:disabled { opacity: .55; cursor: default; transform: none; }

/* SVG animation classes */
.ripple { opacity: 0; }
.ripple.on circle {
  animation: rippleAnim 1.6s ease-out infinite;
  transform-box: fill-box; transform-origin: center;
}
.ripple.on { opacity: 1; }
.ripple.on circle:nth-child(2) { animation-delay: .55s; }
.ripple.on circle:nth-child(3) { animation-delay: 1.1s; }
@keyframes rippleAnim {
  0%   { transform: scale(.4); opacity: .9; }
  100% { transform: scale(1.9); opacity: 0; }
}

.blink { opacity: 0; animation: blinkAnim 4.8s infinite; }
@keyframes blinkAnim {
  0%, 93% { opacity: 0; }
  95%, 97% { opacity: 1; }
  100% { opacity: 0; }
}