/* One result style for every challenge. Words and symbols accompany colour. */
.answer-result{--answer-ink:#214838;--answer-line:#84b69c;--answer-fill:#eff8f2;position:relative;border:1px solid var(--answer-line)!important;border-inline-start-width:5px!important;border-radius:8px;background:var(--answer-fill)!important;color:#24352c!important;padding:24px!important;margin-block:22px!important;isolation:isolate}
.answer-result.is-wrong{--answer-ink:#8e3435;--answer-line:#d6a2a1;--answer-fill:#fff3f1;color:#49302f!important}
.answer-heading-row{display:flex;align-items:center;gap:20px;margin-block-end:18px;min-width:0}
.answer-title{scroll-margin-block-start:48px}
.answer-result{scroll-margin-block-start:36px}
.answer-result .answer-title{font-family:'Space Grotesk','IBM Plex Sans',sans-serif!important;font-size:clamp(1.6rem,3vw,2.15rem)!important;font-weight:700;letter-spacing:-.025em;line-height:1.16!important;color:var(--answer-ink)!important;margin:0!important;overflow-wrap:anywhere}
.answer-result h3:not(.answer-title){font-size:1rem;margin-block:20px 6px;color:var(--answer-ink)}
.answer-result p{font-size:1rem;line-height:1.65;margin-block:8px}
.answer-result .stt-yours-label{font-size:.85rem;font-weight:500;opacity:.85}
.answer-result .stt-yours-rec{font-weight:600}
.answer-result .rule-box{border:0;background:none;padding:0}
.answer-title:focus-visible,#stt-expl-heading:focus-visible{outline:2px solid var(--answer-ink);outline-offset:6px;border-radius:2px}
[data-answer-reward]{position:relative;display:flex;align-items:center;justify-content:center;flex:none;width:60px;height:64px;pointer-events:none;user-select:none}
.answer-medal{position:relative;display:grid;place-items:center;width:52px;height:52px;border:2px solid #9f6b15;border-radius:50%;background:#ffdc80;color:#78500d;font-family:Arial,sans-serif;font-size:28px;line-height:1;box-shadow:inset 0 0 0 4px #fff0bb;z-index:1}
.answer-medal::before,.answer-medal::after{content:'';position:absolute;z-index:-1;top:42px;width:14px;height:19px;background:#8054bb;clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%)}
.answer-medal::before{left:7px;transform:rotate(12deg)}.answer-medal::after{right:7px;transform:rotate(-12deg)}
.answer-cross{display:grid;place-items:center;width:48px;height:48px;border:1px solid #d6a2a1;border-radius:50%;background:#ffe1dc;color:#8e3435;font-family:Arial,sans-serif;font-size:38px;line-height:1}
.answer-earned{animation:answer-medal-party 2800ms cubic-bezier(.25,.7,.3,1) both;transform-origin:50% 60%}
.answer-confetti{position:absolute;inset:0;pointer-events:none}
.answer-confetti::before{content:'';position:absolute;inset:7px;border:2px solid #d6a541;border-radius:50%;opacity:0;animation:answer-reward-ring 2400ms ease-out 300ms both}
.answer-confetti i{position:absolute;left:50%;top:45%;width:6px;height:8px;background:#8c58cf;opacity:0;animation:answer-confetti-burst 2600ms cubic-bezier(.15,.6,.3,1) 350ms both;--x:-48px;--y:-55px;--r:115deg}
.answer-confetti i:nth-child(3n){background:#d39a28;height:6px;animation-delay:500ms}.answer-confetti i:nth-child(3n+1){background:#16897a;animation-delay:200ms}
.answer-confetti i:nth-child(2){--x:0px;--y:-68px;--r:40deg}.answer-confetti i:nth-child(3){--x:42px;--y:-58px;--r:180deg}.answer-confetti i:nth-child(4){--x:66px;--y:-20px;--r:125deg}.answer-confetti i:nth-child(5){--x:60px;--y:24px;--r:220deg}.answer-confetti i:nth-child(6){--x:36px;--y:52px;--r:100deg}.answer-confetti i:nth-child(7){--x:-12px;--y:62px;--r:260deg}.answer-confetti i:nth-child(8){--x:-54px;--y:34px;--r:160deg}.answer-confetti i:nth-child(9){--x:-67px;--y:-8px;--r:80deg}.answer-confetti i:nth-child(10){--x:-26px;--y:-40px;--r:215deg}.answer-confetti i:nth-child(11){--x:32px;--y:-30px;--r:300deg}.answer-confetti i:nth-child(12){--x:20px;--y:40px;--r:140deg}
/* One unhurried reward: hop, coin flip, cheeky wobble, then a quiet medal. */
@keyframes answer-medal-party{0%{transform:translateY(10px) scale(.55) rotate(-15deg);opacity:0}14%{transform:translateY(-12px) scale(1.12) rotate(8deg);opacity:1}27%{transform:translateY(3px) scale(1.04,.92) rotate(-4deg)}40%{transform:translateY(-8px) scale(1.08) rotateY(0deg)}60%{transform:translateY(-5px) scale(1.08) rotateY(360deg)}72%{transform:translateY(0) scale(1) rotateY(360deg) rotate(-12deg)}82%{transform:translateY(-3px) scale(1.04) rotateY(360deg) rotate(9deg)}92%{transform:translateY(0) scale(1) rotateY(360deg) rotate(-4deg)}100%{transform:translateY(0) scale(1) rotateY(360deg) rotate(0);opacity:1}}
@keyframes answer-confetti-burst{0%{transform:translate(0,0) rotate(0);opacity:0}12%{opacity:1}50%{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:1}100%{transform:translate(calc(var(--x) * .8),calc(var(--y) + 34px)) rotate(calc(var(--r) + 90deg));opacity:0}}
@keyframes answer-reward-ring{0%{transform:scale(.65);opacity:0}25%{opacity:.55}100%{transform:scale(1.7);opacity:0}}
@media(max-width:640px){.answer-result{padding:18px!important}.answer-heading-row{gap:14px}.answer-result .answer-title{font-size:1.6rem!important}[data-answer-reward]{width:52px}}
@media(prefers-reduced-motion:reduce){.answer-earned,.answer-confetti i,.answer-confetti::before{animation:none!important}.answer-confetti{display:none!important}}
