/* Owner 10/27: short celebration on a right answer (celebrate.js). */
.wh-celebrate { position: fixed; z-index: 10000; width: 0; height: 0; pointer-events: none; }
.wh-celebrate i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 2px; animation: wh-confetti .8s ease-out forwards; }
.wh-celebrate b { position: absolute; left: 50%; top: -46px; transform: translateX(-50%); white-space: nowrap; padding: 4px 10px; border-radius: 999px; background: #e6af37; color: #111; font-weight: 900; font-size: .95rem; box-shadow: 0 4px 14px rgba(0,0,0,.35); animation: wh-praise .9s ease-out forwards; }
@keyframes wh-confetti { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--x), var(--y)) rotate(200deg) scale(.6); opacity: 0; } }
@keyframes wh-praise { 0% { transform: translate(-50%, 8px) scale(.7); opacity: 0; } 25% { transform: translate(-50%, 0) scale(1.08); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(-50%, -10px) scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wh-celebrate b { animation: none; } }

/* Owner 10/27: Ruti the mascot — looks around on the loading screen, cheers on right answers. */
.wh-ruti-cheer { position: fixed; right: max(12px, env(safe-area-inset-right, 0px)); bottom: calc(84px + env(safe-area-inset-bottom, 0px)); width: 96px; height: 96px; z-index: 10001; pointer-events: none; animation: ruti-pop 1.2s ease-out forwards; }
@keyframes ruti-pop { 0% { transform: translateY(60px) scale(.6); opacity: 0; } 20% { transform: translateY(-8px) scale(1.05); opacity: 1; } 40% { transform: translateY(0) scale(1); } 80% { opacity: 1; } 100% { transform: translateY(40px) scale(.8); opacity: 0; } }
.check-word-ruti { width: 40px; height: 40px; vertical-align: middle; margin-right: 6px; }
@media (prefers-reduced-motion: reduce) { .ruti-loading, .wh-ruti-cheer { animation: none; } }
.wh-ruti-wave { animation-duration: 1.8s; }