/* Scoped to the new feedback component; the existing workbook stays unchanged. */
.answer-feedback-modal {
  --af-accent: var(--green, #187a64);
  --af-soft: #eaf4e4;
  --af-ink: #215d49;
  box-sizing: border-box;
  width: min(470px, calc(100vw - 28px));
  max-width: 470px;
  max-height: calc(100dvh - 28px);
  max-height: calc(100svh - 28px);
  margin: auto;
  padding: 0;
  border: 1px solid #f5f4e9;
  border-radius: 28px;
  background: var(--cream, #fbfaf6);
  color: var(--ink, #263e38);
  box-shadow: 0 24px 100px #183d3845, 0 3px 0 #ffffffcc inset;
  overflow: auto;
  overscroll-behavior: contain;
}
.answer-feedback-modal::backdrop { background: #233d3869; backdrop-filter: blur(5px); animation: af-fade .18s ease-out; }
.answer-feedback-modal[open] { animation: af-enter .32s cubic-bezier(.2, .85, .3, 1.15); }
.af-card { position: relative; isolation: isolate; padding: 30px 28px 24px; text-align: center; overflow: hidden; }
.af-card::before { content: ''; position: absolute; z-index: -1; inset: 0 0 auto; height: 190px; background: radial-gradient(ellipse at top, var(--af-soft), transparent 75%); }
.af-incorrect { --af-accent: #a7632e; --af-soft: #fff0da; --af-ink: #895020; }
.af-sound, .feedback-sound-toggle { display: grid; place-items: center; width: 44px; height: 44px; min-width: 44px; padding: 0; border-radius: 50%; border: 1px solid #dce6d5; background: #fffefbd9; font-size: 20px; line-height: 1; }
.af-sound { position: absolute; top: 12px; right: 12px; z-index: 3; }
.af-sound:hover, .feedback-sound-toggle:hover { background: #edf3e6; }
.af-art { position: relative; width: 188px; height: 163px; margin: 0 auto 15px; }
.af-mascot { position: absolute; left: 31px; top: 3px; width: 126px; height: 139px; transform: rotate(-5deg); animation: af-owl .65s ease-out; }
.af-badge { position: absolute; bottom: 0; right: 20px; width: 70px; height: 70px; display: grid; place-items: center; border: 5px solid #fffefa; border-radius: 50%; background: var(--af-accent); box-shadow: 0 5px 12px #187a6423; color: white; font-size: 46px; font-weight: bold; animation: af-badge .5s .08s both; }
.af-badge svg { width: 60px; height: 60px; }
.af-badge path { fill: none; stroke: white; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: af-check .45s .22s forwards; }
.af-incorrect .af-badge { background: #edbd7e; color: #83532a; box-shadow: 0 5px 12px #a7632e16; }
.af-incorrect .af-mascot { animation: af-think .75s ease-in-out; }
.af-orbit { position: absolute; top: 26px; left: 0; font-size: 29px; animation: af-star .8s .1s both; }
.af-orbit-two { left: auto; right: 0; top: 4px; font-size: 22px; animation-delay: .22s; }
.af-eyebrow { color: var(--af-ink); font-size: 9px; letter-spacing: 1.7px; font-weight: bold; }
.answer-feedback-modal h2 { font-family: Arial, sans-serif; font-size: clamp(25px, 6.4vw, 32px); letter-spacing: 0; line-height: 1.65; margin: 12px 0 4px; color: var(--af-ink); text-wrap: balance; }
.answer-feedback-modal .af-english { margin: 0; color: #61735d; font-size: 17px; line-height: 1.6; }
.af-points { display: inline-flex; gap: 6px; align-items: center; margin: 18px auto 4px; border: 1px solid #e8dba5; border-radius: 24px; padding: 8px 18px; background: #fff4cd; color: #866725; font-size: 21px; font-weight: bold; }
.af-points span { font-size: 14px; }
.answer-feedback-modal .af-detail { margin: 17px 0 5px; padding: 12px 15px; border-radius: 12px; background: var(--af-soft); color: var(--af-ink); font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; white-space: pre-line; }
.af-action { width: 100%; margin-top: 24px; min-height: 66px; flex-direction: column; gap: 2px; background: var(--af-accent); box-shadow: 0 3px 0 #104c3926; padding: 12px 16px; border-radius: 15px; }
.af-action > span:first-child { font-family: Arial, sans-serif; font-size: 22px; line-height: 1.5; }
.af-action > span:last-child { font-size: 12px; font-weight: normal; opacity: .95; }
.af-action:hover { background: var(--af-ink); }
.af-hint-button { display: flex; justify-content: center; align-items: center; gap: 9px; min-height: 46px; padding: 9px 17px; margin: 15px auto -8px; background: #fff4df; color: #8c582c; border: 1px solid #ecd2ab; border-radius: 12px; font-size: 15px; }
.af-hint-button > span:last-child { font-size: 12px; }
.answer-feedback-modal .af-hint { background: #fff1d6; color: #815626; padding: 12px; border-radius: 12px; margin: 17px 0 0; font-size: 15px; line-height: 1.8; }
.answer-feedback-modal [hidden] { display: none; }
.answer-feedback-modal .af-footnote { margin: 18px 0 0; color: #67775e; font-size: 13px; line-height: 1.8; }
.af-confetti { position: absolute; pointer-events: none; inset: 0; overflow: hidden; z-index: -1; }
.af-confetti i { position: absolute; left: var(--x); top: -15px; width: 7px; height: 12px; background: #e9b749; border-radius: 2px; animation: af-confetti 1.35s calc(var(--i) * 35ms) both ease-out; }
.af-confetti i:nth-child(3n) { background: #81b7a0; }
.af-confetti i:nth-child(3n + 1) { background: #b39bcf; }
.af-confetti i:nth-child(4n + 1) { background: none; font-size: 17px; width: auto; height: auto; }
@keyframes af-enter { from { opacity: 0; transform: translateY(12px) scale(.89); } to { opacity: 1; transform: none; } }
@keyframes af-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes af-owl { 0% { transform: translateY(14px) rotate(-12deg); } 65% { transform: translateY(-5px) rotate(3deg); } 100% { transform: rotate(-5deg); } }
@keyframes af-badge { from { opacity: 0; transform: scale(.5); } 65% { opacity: 1; transform: scale(1.12); } to { opacity: 1; transform: scale(1); } }
@keyframes af-check { to { stroke-dashoffset: 0; } }
@keyframes af-star { from { opacity: 0; transform: scale(.3) rotate(-35deg); } 60% { opacity: 1; transform: scale(1.2) rotate(12deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes af-think { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(6deg); } }
@keyframes af-confetti { 0% { opacity: 0; transform: translateY(-15px) rotate(0); } 15% { opacity: 1; } 85% { opacity: .75; } 100% { opacity: 0; transform: translateY(370px) rotate(var(--turn)); } }
@media(max-width:650px) { .feedback-sound-toggle { width: 35px; min-width: 35px; height: 44px; font-size: 17px; border-radius: 12px; } .topbar-right { gap: 9px; } }
@media(max-width:360px), (max-height:650px) { .af-card { padding: 19px 20px 16px; } .af-art { height: 126px; width: 157px; margin-bottom: 10px; } .af-mascot { left: 28px; width: 99px; height: 110px; } .af-badge { width: 59px; height: 59px; right: 14px; border-width: 4px; } .af-badge svg { width: 49px; height: 49px; } .af-orbit { font-size: 23px; } .af-orbit-two { font-size: 19px; } .answer-feedback-modal h2 { margin-top: 9px; font-size: 25px; } .af-points { margin-top: 12px; padding: 6px 15px; } .af-action { margin-top: 17px; } .answer-feedback-modal .af-footnote { margin-top: 13px; font-size: 12px; } }
@media(prefers-reduced-motion:reduce) { .answer-feedback-modal, .answer-feedback-modal *, .answer-feedback-modal::backdrop { animation: none !important; transition: none !important; } .af-badge path { stroke-dashoffset: 0; } .af-confetti { display: none; } }