/* A zero-height sticky layer keeps reactions inside the modal's top layer. */
.answer-reaction{position:sticky;top:12px;height:0;overflow:visible;z-index:12;pointer-events:none;user-select:none;isolation:isolate}
.answer-reaction *{pointer-events:none}
.answer-reaction-card{position:absolute;left:50%;top:0;width:min(360px,calc(100% - 24px));display:flex;gap:10px;align-items:center;padding:8px 18px 8px 9px;border-radius:20px;background:#14243ef5;color:#fff5df;border:1px solid #f9cb7080;box-shadow:0 12px 34px #0006;transform:translateX(-50%);animation:reaction-card 2.4s ease both}
.answer-reaction-copy{display:flex;flex-direction:column;gap:5px;min-width:0}
.answer-reaction-copy strong{font-family:var(--serif,Georgia,serif);font-size:28px;font-weight:500;line-height:1.08;color:#f9cb70}
.answer-reaction-copy span{font-family:var(--font,system-ui,sans-serif);font-size:11px;line-height:1.35;color:#d0dfed}
.answer-reaction-scene{position:relative;flex:none;width:88px;height:88px;display:grid;place-items:center}
.answer-reaction-art{width:88px;height:88px;overflow:visible}
.reaction-correct .answer-reaction-art{animation:reaction-bounce .7s ease both 2}
.reaction-duck .answer-reaction-art{transform-origin:50% 85%;animation:reaction-duck .6s ease both 3}
.reaction-puff .answer-reaction-art{animation:reaction-puff .8s ease both 2}
.reaction-spring .answer-reaction-art{transform-origin:50% 85%;animation:reaction-spring .55s ease both 3}
.reaction-passed .answer-reaction-art{animation:reaction-plane 1.8s ease both}
.answer-reaction-avatar{position:absolute;right:-2px;bottom:3px;width:34px;height:34px;border-radius:50%;background:#fff0bd;box-shadow:0 2px 10px #0005;border:2px solid #fff0bd;display:grid;place-items:center;font-size:24px;overflow:hidden;animation:reaction-bounce .7s .15s ease both 2}
.answer-reaction-avatar img{width:100%;height:100%;object-fit:contain}
.answer-reaction-confetti{position:absolute;left:calc(50% - 3px);top:50%;width:6px;height:10px;border-radius:2px;opacity:0;animation:reaction-confetti 1.7s ease-out var(--reaction-delay) both;z-index:-1}
@keyframes reaction-card{0%{opacity:0;transform:translate(-50%,-12px) scale(.9)}12%,82%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-6px) scale(.98)}}
@keyframes reaction-bounce{0%,100%{transform:translateY(0) scale(1)}35%{transform:translateY(-9px) scale(1.06,.96)}65%{transform:translateY(2px) scale(.97,1.04)}}
@keyframes reaction-duck{0%,100%{transform:rotate(0)}25%{transform:rotate(-10deg) translateY(-3px)}60%{transform:rotate(10deg) translateY(-3px)}}
@keyframes reaction-puff{0%,100%{transform:scale(1)}35%{transform:scale(1.14,.91)}65%{transform:scale(.94,1.08)}}
@keyframes reaction-spring{0%,100%{transform:scale(1)}25%{transform:scale(1.12,.78)}60%{transform:translateY(-12px) scale(.93,1.14)}}
@keyframes reaction-plane{0%{transform:translate(-8px,6px) rotate(-8deg)}55%{transform:translate(6px,-5px) rotate(4deg)}100%{transform:translate(0) rotate(0)}}
@keyframes reaction-confetti{0%{opacity:0;transform:translate(0,0)}10%{opacity:1}60%{opacity:1;transform:translate(var(--reaction-x),var(--reaction-y)) rotate(var(--reaction-spin))}100%{opacity:0;transform:translate(var(--reaction-x),55px) rotate(var(--reaction-spin))}}
@media(max-width:560px){.answer-reaction-card{gap:8px;padding-right:12px}.answer-reaction-copy strong{font-size:25px}.answer-reaction-scene,.answer-reaction-art{width:74px;height:74px}.answer-reaction-copy span{font-size:10px}}
@media(prefers-reduced-motion:reduce){.answer-reaction-card,.answer-reaction-art,.answer-reaction-avatar{animation:none!important}.answer-reaction-card{opacity:1;transform:translateX(-50%)}.answer-reaction-scene,.answer-reaction-art{width:50px;height:50px}.answer-reaction-avatar{width:25px;height:25px;font-size:18px}.answer-reaction-confetti{display:none}.answer-reaction-card{padding:9px 14px}.answer-reaction-copy strong{font-size:24px}}