.chispa { position: relative; flex: 0 0 auto; width: 100px; }
.chispa-button { display: block; width: 100%; padding: 0; border: 0; background: transparent; border-radius: 16px; cursor: pointer; touch-action: manipulation; }
.chispa-button img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 3px 2px #234c7815); }
.chispa-button:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.chispa-message { position: absolute; z-index: 5; bottom: calc(100% + 8px); right: 0; width: min(240px, 75vw); padding: 12px 15px; border: 1px solid var(--primary-border); border-radius: 14px; background: var(--paper); color: var(--ink); box-shadow: 0 5px 20px #0002; font-size: 14px; font-weight: 500; line-height: 1.5; letter-spacing: normal; text-align: left; }
.chispa-message[hidden] { display: none; }
.chispa-card { display: flex; align-items: center; gap: 12px; overflow: visible; }
.chispa-card[hidden] { display: none; }
.chispa-card > div:first-child { flex: 1; min-width: 0; }
.chispa-card .chispa { width: 150px; }
.chispa-card h3 { font-size: 22px; }
.practice-intro .start-actions { display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: center; gap: 0 16px; }
.start-actions > .chispa { width: 100px; }
.start-actions > .chispa .chispa-message { left: 0; right: auto; }
.start-actions > .practice-last-result { grid-column: 1 / -1; }
.answer-feedback { display: flow-root; }
.answer-feedback > .chispa { float: right; width: 100px; margin: -4px -4px 0 12px; }
.chispa-results { float: right; margin: 0 0 12px 18px; }
.chispa-results .chispa { width: 120px; }
.results-page .result-summary { clear: both; }
@media (prefers-reduced-motion: no-preference) {
  .chispa.is-greeting img { animation: chispa-greeting 650ms ease-in-out; }
  .game-correct .chispa img, .game-passed .chispa img { animation: chispa-greeting 650ms ease-in-out; }
}
@keyframes chispa-greeting {
  0%, 100% { transform: translateY(0) rotate(0); }
  35% { transform: translateY(-7px) rotate(-6deg); }
  70% { transform: translateY(-3px) rotate(5deg); }
}
@media (max-width: 600px) {
  .chispa-card .chispa { width: 130px; }
  .chispa-card h3 { font-size: 20px; }
  .practice-intro .start-actions { grid-template-columns: 100px minmax(0, 1fr); gap: 0 10px; }
  .start-actions > .chispa { width: 100px; }
  .start-actions .button { gap: 10px; padding-inline: 12px; }
  .answer-feedback > .chispa { width: 100px; }
  .chispa-results .chispa { width: 100px; }
}