/* Rewards for right answers and nudges for near misses (see js/juice.js).
   Loaded after themes.css so each theme's colours carry through. */

/* ---------- the answer box pops, the card glows */
.answer-row input.juice-pop, .opt.juice-pop, .match button.juice-pop { animation: juice-pop .42s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes juice-pop { 0% { scale: 1; } 35% { scale: 1.07; } 100% { scale: 1; } }
.study-card.juice-glow { animation: juice-glow .9s ease-out; }
@keyframes juice-glow {
  0% { filter: drop-shadow(0 0 0 transparent); }
  25% { filter: drop-shadow(0 0 16px color-mix(in srgb, var(--good) 55%, transparent)); }
  100% { filter: drop-shadow(0 0 0 transparent); }
}

/* ---------- the feedback slides in with a check that pops */
.feedback.ok::before {
  content: "✓"; display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; margin-right: 8px;
  border-radius: 50%; background: var(--good); color: var(--surface); font-weight: 900; font-style: normal; font-size: .95em;
  vertical-align: -.2em; line-height: 1;
}
.feedback.juice-in { animation: juice-in .35s cubic-bezier(.2, 1.3, .4, 1); }
.feedback.juice-in::before { animation: juice-check .5s .08s cubic-bezier(.3, 1.8, .5, 1) backwards; }
@keyframes juice-in { 0% { opacity: 0; translate: 0 8px; scale: .97; } 100% { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes juice-check { 0% { scale: 0; rotate: -40deg; } 100% { scale: 1; rotate: 0deg; } }

/* ---------- combo counter */
.combo {
  float: right; margin: -2px 0 4px 10px; padding: 2px 10px; border-radius: 999px;
  background: var(--good); color: var(--surface); font-size: 13px; font-weight: 800; letter-spacing: .02em; white-space: nowrap;
}
.feedback.juice-in .combo { animation: juice-check .45s .12s cubic-bezier(.3, 1.8, .5, 1) backwards; }

/* ---------- shards and the floating word (fixed, outside the layout) */
.juice-burst { position: fixed; width: 0; height: 0; pointer-events: none; z-index: 40; }
.juice-burst i {
  position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 2px; opacity: 0;
  background: var(--good); animation: juice-fly .85s cubic-bezier(.15, .75, .35, 1) var(--delay, 0ms) forwards;
}
.juice-burst i.s1 { background: var(--accent); width: 6px; height: 10px; }
.juice-burst i.s2 { background: var(--sel); border-radius: 50%; }
.juice-burst i.s3 { background: var(--warn); width: 10px; height: 5px; }
@keyframes juice-fly {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(.4); }
  65% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 26px)) rotate(var(--rot)) scale(1); }
}
.juice-word {
  position: fixed; z-index: 41; pointer-events: none; translate: -50% -100%; white-space: nowrap;
  font-size: 22px; font-weight: 800; color: var(--good); text-shadow: 0 1px 0 var(--surface), 0 0 10px var(--surface);
  animation: juice-rise .95s cubic-bezier(.2, .8, .3, 1) forwards;
}
@keyframes juice-rise {
  0% { opacity: 0; transform: translateY(8px) scale(.6); }
  20% { opacity: 1; transform: translateY(-6px) scale(1.12); }
  70% { opacity: 1; transform: translateY(-22px) scale(1); }
  100% { opacity: 0; transform: translateY(-34px) scale(1); }
}

/* ---------- near-miss nudge under the answer box */
#shake-note.nudge:not(:empty) {
  margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 14px; line-height: 1.45;
  background: var(--warn-soft); color: var(--text); border-left: 4px solid var(--warn);
  animation: juice-in .3s cubic-bezier(.2, 1.3, .4, 1);
}
#shake-note.nudge b { color: var(--warn); }

/* ---------- Persona 3 Reload: shards are slanted cuts, words are italic caps */
:root[data-theme="p3r"] .juice-burst i { border-radius: 0; clip-path: polygon(0 0, 100% 30%, 60% 100%); width: 12px; height: 12px; }
:root[data-theme="p3r"] .juice-burst i.s2 { background: #fff; }
:root[data-theme="p3r"] .juice-word { font-family: var(--font-head, inherit); font-style: italic; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; font-size: 26px; text-shadow: 3px 3px 0 var(--ink, #000); }
:root[data-theme="p3r"] .combo { border-radius: 0; color: var(--ink, #000); font-style: italic; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); padding: 2px 14px; }
:root[data-theme="p3r"] .feedback.ok::before { color: var(--ink, #000); }
:root[data-theme="p3r"] #shake-note.nudge:not(:empty) { border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); }

/* ---------- Persona 5: black, white and red, everything skewed */
:root[data-theme="p5"] .juice-burst i { border-radius: 0; background: #0b0b0b; clip-path: polygon(50% 0, 100% 100%, 0 70%); width: 12px; height: 12px; }
:root[data-theme="p5"] .juice-burst i.s1 { background: #d7141a; }
:root[data-theme="p5"] .juice-burst i.s2 { background: #fff; outline: 2px solid #0b0b0b; }
:root[data-theme="p5"] .juice-word { color: #fff; font-style: italic; font-weight: 900; text-transform: uppercase; font-size: 26px; background: #d7141a; padding: 0 12px; rotate: -6deg; text-shadow: 2px 2px 0 #0b0b0b; box-shadow: 4px 4px 0 #0b0b0b; }
:root[data-theme="p5"] .combo { border-radius: 0; background: #0b0b0b; color: #fff; transform: skewX(-10deg); }
:root[data-theme="p5"] .feedback.ok::before { background: #0b0b0b; color: #fff; border-radius: 0; transform: rotate(-6deg); }
:root[data-theme="p5"] #shake-note.nudge:not(:empty) { border-radius: 0; background: #0b0b0b; color: #fff; border-left-color: #d7141a; }
:root[data-theme="p5"] #shake-note.nudge b { color: #ff4a50; }

@media (prefers-reduced-motion: reduce) { .juice-burst, .juice-word { display: none; } }