/* Result feedback reserves the same space before and after Godkend. */
.task-panel .task-feedback {
  position: relative; isolation: isolate; height: 104px; margin: 20px 0 14px;
  padding: 12px 16px; border: 2px solid transparent; border-radius: 20px;
  gap: 14px; background: var(--theme-wash);
}
.task-feedback h2 { min-width: 0; margin: 0; font-size: clamp(18px, 2.3vw, 25px); }
.task-panel[data-feedback-state-value="correct"] .task-feedback {
  background: var(--mint); border-color: var(--green); color: #105637;
}
.task-panel[data-feedback-state-value="wrong"] .task-feedback {
  background: #fff1d9; border-color: #c58024; color: #70460e;
}
.feedback-result-mark {
  display: grid; place-items: center; flex: 0 0 60px; width: 60px; height: 60px;
  border-radius: 50%; background: var(--green); color: white;
}
.feedback-result-mark .luxi-icon { width: 42px; height: 42px; stroke-width: 3; }
[data-feedback-state-value="wrong"] .feedback-result-mark { background: #8b5918; }
[data-feedback-state-value="correct"] .choice.correct { border-width: 2px; box-shadow: 0 0 0 4px #16734d32; }
.task-panel .task-next {
  background: var(--theme-action); color: var(--theme-ink); border: 2px solid var(--theme-strong);
  box-shadow: 0 4px 0 var(--theme-strong); gap: 10px;
}
.task-panel .task-next:hover:not(:disabled) { background: var(--theme-action); filter: brightness(1.04); }
.task-next .luxi-icon { width: 30px; height: 30px; flex-shrink: 0; }
.next-label { display: grid; justify-items: center; gap: 2px; line-height: 1.25; }
.next-countdown { font-size: 14px; font-weight: 500; }
.next-countdown strong { display: inline-block; font-size: 21px; min-width: 1ch; font-variant-numeric: tabular-nums; }
.countdown-pause { border-color: var(--line); background: var(--panel); }
.pause-symbol { font-size: 28px; font-weight: 900; line-height: 1; }
.feedback-confetti { position: absolute; inset: -10px 0; pointer-events: none; overflow: hidden; border-radius: inherit; z-index: -1; }
.confetti-piece { display: none; position: absolute; left: 50%; top: 15%; width: 9px; height: 14px; border-radius: 3px; background: var(--theme-accent); }
.confetti-piece:nth-child(3n) { background: var(--theme-primary); border-radius: 50%; }
.confetti-piece:nth-child(3n + 1) { background: var(--theme-action); }
.confetti-piece-0 { --x: -190px; --y: 65px; --r: -90deg; }
.confetti-piece-1 { --x: -155px; --y: 15px; --r: 130deg; }
.confetti-piece-2 { --x: -120px; --y: 80px; --r: 240deg; }
.confetti-piece-3 { --x: -85px; --y: 5px; --r: -200deg; }
.confetti-piece-4 { --x: -50px; --y: 70px; --r: 180deg; }
.confetti-piece-5 { --x: -20px; --y: -5px; --r: -140deg; }
.confetti-piece-6 { --x: 20px; --y: 90px; --r: 100deg; }
.confetti-piece-7 { --x: 50px; --y: 5px; --r: -230deg; }
.confetti-piece-8 { --x: 85px; --y: 75px; --r: 310deg; }
.confetti-piece-9 { --x: 120px; --y: 10px; --r: -190deg; }
.confetti-piece-10 { --x: 155px; --y: 80px; --r: 190deg; }
.confetti-piece-11 { --x: 190px; --y: 20px; --r: -280deg; }
@media (prefers-reduced-motion: no-preference) {
  .feedback-celebrate .confetti-piece { display: block; animation: feedback-confetti 1.2s ease-out both; }
  .feedback-celebrate .feedback-result-mark { animation: feedback-pop .45s ease-out; }
  .feedback-celebrate .task-next { animation: feedback-next .65s ease-in-out 2; }
}
@keyframes feedback-confetti {
  0% { opacity: 0; transform: translate(0, 30px) rotate(0); }
  15% { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)); }
}
@keyframes feedback-pop { 0% { transform: scale(.8); } 65% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes feedback-next { 50% { box-shadow: 0 4px 0 var(--theme-strong), 0 0 0 5px var(--theme-soft); } }
/* Explicit hidden override: button display rules must not expose stopped timers. */
.task-panel [data-feedback-target][hidden] { display: none; }
@media (max-width: 600px) {
  .task-panel .task-feedback { padding: 10px; gap: 10px; }
  .task-feedback h2 { font-size: 18px; }
  .feedback-result-mark { flex-basis: 52px; width: 52px; height: 52px; }
  .feedback-result-mark .luxi-icon { width: 36px; height: 36px; }
  .task-panel .task-next { gap: 2px; }
}