character.html

<div class="rhotic-character-wrap">
  <div class="rhotic-blob-row">
    <img id="rhotic-blob"
         class="rhotic-blob"
         src="{{BLOB_URL}}"
         data-rhotic-idle="{{BLOB_URL}}"
         data-rhotic-thinking="{{BLOB_THINKING_URL}}"
         alt="Rho, the Rhotic coach character">
    <div id="rhotic-bubble" class="rhotic-bubble hidden" aria-live="polite"></div>
  </div>

  <div id="rhotic-ready-badge" class="rhotic-ready-badge hidden" aria-live="polite">
    Nice — ready for the next one? Tap <strong>Next →</strong>
  </div>
</div>

<style>
.rhotic-character-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0 1.5rem 0;
  position: relative;
  gap: 0.75rem;
}
.rhotic-blob-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  width: 100%;
}
.rhotic-blob {
  width: 160px;
  height: 160px;
  object-fit: contain;
  display: block;
  transition: transform 0.25s ease;
  flex: 0 0 auto;
}
.rhotic-blob.celebrating { animation: rhotic-blob-bounce 0.7s ease-in-out; }
@keyframes rhotic-blob-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  30%      { transform: translateY(-18px) scale(1.05); }
  60%      { transform: translateY(0) scale(0.98); }
}
@media (max-width: 540px) {
  .rhotic-blob { width: 130px; height: 130px; }
}
@media (prefers-reduced-motion: reduce) {
  .rhotic-blob.celebrating { animation: none !important; }
}
</style>