/* ===== AnimalSake quiz popover (reusable, JSON-driven) ===== */
.quizpop-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; overflow-y: auto;
  background: rgba(40, 26, 16, .55);
}
.quizpop {
  width: 100%; max-width: 520px; margin: auto;
  background: var(--cream-card, #fffdf8); border-radius: 20px;
  box-shadow: 0 24px 60px rgba(40, 26, 16, .35);
  padding: 22px 24px 24px;
  animation: quizpop-rise .22s cubic-bezier(.2, .8, .3, 1);
}
@keyframes quizpop-rise { from { transform: translateY(16px) scale(.985); } }
.quizpop:focus { outline: none; }
.quizpop__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.quizpop__count { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink, var(--orange-deep, #c75300)); }
.quizpop__x { border: 0; background: none; font-size: 26px; line-height: 1; color: var(--ink-soft, #6f5b4a); cursor: pointer; padding: 0 6px; border-radius: 8px; }
.quizpop__x:hover { color: var(--ink, #4b2f20); background: rgba(0, 0, 0, .05); }
.quizpop__prog { height: 6px; border-radius: 999px; background: var(--line, #efe2cf); overflow: hidden; margin-bottom: 16px; }
.quizpop__prog-fill { display: block; height: 100%; background: var(--accent, var(--orange, #f47b20)); border-radius: 999px; transition: width .25s ease; }
.quizpop__q { margin: 0 0 16px; font-size: 19px; line-height: 1.3; color: var(--ink, #4b2f20); }
.quizpop__opts { display: flex; flex-direction: column; gap: 10px; }
.quizpop__opt {
  text-align: left; font: inherit; font-size: 15px; color: var(--ink, #4b2f20);
  background: var(--cream, #fdf6e9); border: 2px solid var(--line, #efe2cf);
  border-radius: 12px; padding: 13px 16px; cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.quizpop__opt:hover:not(:disabled) { border-color: var(--accent, var(--orange, #f47b20)); }
.quizpop__opt:disabled { cursor: default; }
.quizpop__opt.is-correct { border-color: var(--green, #5aa545); background: #eef7e8; font-weight: 600; }
.quizpop__opt.is-wrong { border-color: #e26d5c; background: #fbeae6; }
.quizpop__fb { margin-top: 14px; }
.quizpop__verdict { margin: 0 0 4px; font-weight: 700; font-size: 16px; }
.quizpop__fb.is-right .quizpop__verdict { color: #3f7a30; }
.quizpop__fb.is-wrong .quizpop__verdict { color: #b5402f; }
.quizpop__explain { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--ink-soft, #6f5b4a); }
.quizpop__next { width: 100%; }
.quizpop__result { text-align: center; padding: 8px 0 16px; }
.quizpop__emoji { font-size: 46px; line-height: 1; }
.quizpop__score { font-size: 34px; font-weight: 800; color: var(--accent-ink, var(--orange-deep, #c75300)); margin: 4px 0; }
.quizpop__result p { margin: 0; color: var(--ink-soft, #6f5b4a); }
.quizpop__actions { display: flex; gap: 10px; }
.quizpop__actions .btn { flex: 1; }
@media (max-width: 480px) { .quizpop { padding: 18px 16px 20px; } .quizpop__q { font-size: 17px; } }
@media (prefers-reduced-motion: reduce) { .quizpop, .quizpop-backdrop, .quizpop__prog-fill { animation: none; transition: none; } }

.quizpop__result .quizpop__fox { display: block; height: 132px; width: auto; margin: 0 auto 4px; }
.quizpop__result .quizpop__emoji { display: none; }