.sentence-builder-correct-feedback[data-v-sentence-correct] { position: absolute; inset: 0; z-index: 4; pointer-events: none;
}
.sentence-builder-correct-feedback__pill[data-v-sentence-correct] { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); padding: 10px 28px; border-radius: 999px; background: rgba(102, 187, 106, .96); color: white; font-size: clamp(22px, 3vw, 34px); font-weight: 800; line-height: 1.2; text-align: center; box-shadow: 0 8px 20px rgba(67, 160, 71, .35); animation: sentence-builder-correct-pop-sentence-correct 450ms ease-out both;
}
.sentence-builder-correct-feedback__confetti[data-v-sentence-correct] { position: absolute; inset: 0; overflow: hidden;
}
.sentence-builder-correct-feedback__confetti span[data-v-sentence-correct] { position: absolute; top: 18%; left: 50%; width: 8px; height: 14px; border-radius: 2px; opacity: 0; animation: sentence-builder-correct-confetti-sentence-correct 1900ms ease-out both;
}
@keyframes sentence-builder-correct-confetti-sentence-correct {
0% { opacity: 0; transform: translate(-50%, 0) rotate(0) scale(.8);
}
18% { opacity: 1;
}
100% { opacity: 0; transform: translate(calc(-50% + var(--x)), var(--y)) rotate(var(--r)) scale(1);
}
}
@keyframes sentence-builder-correct-pop-sentence-correct {
0% { transform: translateX(-50%) scale(.8); opacity: 0;
}
100% { transform: translateX(-50%) scale(1); opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.sentence-builder-correct-feedback__confetti[data-v-sentence-correct] { display: none;
}
.sentence-builder-correct-feedback__pill[data-v-sentence-correct] { animation: none;
}
}