.choice-feedback {
  margin: 16px 0 20px;
  padding: 14px 16px;
  min-width: 0;
  color: var(--text);
  background: var(--panel-raised);
  border: 4px solid var(--edge);
  border-image: url("assets/pixel-frame-amber.svg") 4 / 4px / 0 stretch;
  font-family: "Segoe UI", system-ui, sans-serif;
  line-height: 1.45;
  animation: feedback-settle 220ms ease-out both;
}
.choice-feedback .feedback-title {
  display: block;
  color: var(--yellow);
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}
.choice-feedback .feedback-label { margin: 7px 0 9px; font-size: 16px; overflow-wrap: anywhere; }
.feedback-deltas { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.feedback-delta, .feedback-zero { display: inline-block; font-size: 13px; line-height: 1.4; }
.feedback-delta { max-width: 100%; overflow-wrap: anywhere; }
.feedback-up { color: var(--green); }
.feedback-down { color: var(--sig-danger); }
.feedback-zero { color: var(--muted); }
.feedback-auto-note { margin-top: 9px; color: var(--muted); font-size: 13px; }
#feedback-live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
@keyframes feedback-settle {
  from { opacity: .7; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 480px) {
  .choice-feedback { padding: 12px; margin: 14px 0 18px; }
  .choice-feedback .feedback-label { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .choice-feedback { animation: none; }
}