/* Short feedback accents shared by the response dial and the board. */
.app .extra-actions.active .reaction-grid .skill-card:not(:disabled):active {
  transform: scale(.94);
  filter: brightness(1.5);
}
.app .extra-actions.active .reaction-grid .reaction-guard:not(:disabled):active .guard-timing-ring {
  transform: scale(.9);
  filter: brightness(1.6);
}
.reaction-feedback-toast {
  --reaction-accent: #9acbb9;
  position: fixed;
  z-index: 160;
  left: 50%;
  bottom: min(36vh, 300px);
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  width: max-content;
  max-width: min(280px, calc(100vw - 24px));
  padding: 12px 18px 12px 12px;
  border: 1px solid var(--reaction-accent);
  border-radius: 6px;
  color: var(--reaction-accent);
  background: linear-gradient(125deg, rgba(22, 29, 26, .97), rgba(12, 14, 13, .95));
  box-shadow: 0 4px 24px #0008, 0 0 14px color-mix(in srgb, var(--reaction-accent) 30%, transparent);
  transform: translate(-50%, -100%);
  pointer-events: none;
  animation: reactionFeedbackReveal 1100ms ease-out both;
}
.reaction-feedback-toast strong { display: block; font-size: 20px; line-height: 1.2; letter-spacing: .06em; }
.reaction-feedback-toast small { display: block; margin-top: 5px; font-size: 11px; color: #e4ddce; line-height: 1.4; }
.reaction-feedback-seal { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border: 2px solid currentColor; border-radius: 50%; font-size: 24px; }
.reaction-feedback-win, .reaction-feedback-precise { --reaction-accent: #efce7e; }
.reaction-feedback-perfect { --reaction-accent: #fff0b2; border-width: 2px; }
.reaction-feedback-perfect .reaction-feedback-seal { outline: 1px solid currentColor; outline-offset: 4px; }
.reaction-feedback-even { --reaction-accent: #b1c3db; }
.reaction-feedback-interrupt { --reaction-accent: #ffd28a; }
.interrupt-feedback-toast { animation-duration: 1600ms; max-width: min(360px, calc(100vw - 24px)); }
.interrupt-feedback-toast small { overflow-wrap: anywhere; }
.reaction-feedback-break { --reaction-accent: #ed9386; }
.reaction-feedback-break .reaction-feedback-seal { border-radius: 3px; transform: rotate(-8deg); }
@keyframes reactionFeedbackReveal {
  0% { opacity: 0; transform: translate(-50%, -85%) scale(.86); }
  14% { opacity: 1; transform: translate(-50%, -100%) scale(1.04); }
  25%, 72% { opacity: 1; transform: translate(-50%, -100%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -115%) scale(.98); }
}

/* Outcome-specific accents at the defender, driven by the same reaction event. */
.reaction-burst { --reaction-accent: #9acbb9; }
.reaction-burst.reaction-clashWin, .reaction-burst.reaction-guardPrecise { --reaction-accent: #efce7e; }
.reaction-burst.reaction-guardPerfect { --reaction-accent: #fff0b2; }
.reaction-burst.reaction-clashEven { --reaction-accent: #b1c3db; }
.reaction-burst.reaction-clashLose, .reaction-burst.reaction-guardBroken { --reaction-accent: #ed9386; }
.reaction-burst.reaction-interrupted { --reaction-accent: #ffbd81; }
.board-reaction-overlay .reaction-interrupted .reaction-ring.target { border-width: 3px; border-style: dashed; width: 72px; height: 72px; }
.board-reaction-overlay .reaction-interrupted .reaction-outcome-badge { font-size: 14px; border-width: 2px; max-width: 230px; text-align: center; }
.board-reaction-overlay .reaction-burst .reaction-ring {
  border-color: var(--reaction-accent);
  background: radial-gradient(circle, color-mix(in srgb, var(--reaction-accent) 32%, transparent), transparent 65%);
  box-shadow: 0 0 15px color-mix(in srgb, var(--reaction-accent) 35%, transparent);
}
.board-reaction-overlay .reaction-burst .reaction-line {
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--reaction-accent), #fff3d8, var(--reaction-accent), transparent);
}
.board-reaction-overlay .reaction-burst .reaction-outcome-badge {
  color: var(--reaction-accent);
  border-color: var(--reaction-accent);
  font-size: 12px;
  padding: 5px 8px;
}
.board-reaction-overlay .reaction-guardPerfect .reaction-ring.target {
  width: 72px;
  height: 72px;
  border-width: 3px;
  outline: 1px solid var(--reaction-accent);
  outline-offset: 5px;
}
.board-reaction-overlay .reaction-clashWin .reaction-ring.target { border-width: 3px; }
.board-reaction-overlay .reaction-clashEven .reaction-line { height: 2px; opacity: .7; }
.board-reaction-overlay .reaction-clashLose .reaction-ring.target,
.board-reaction-overlay .reaction-guardBroken .reaction-ring.target { border-style: dashed; }
@media (max-width: 900px) {
  .reaction-feedback-toast { padding: 8px 12px; gap: 10px; }
  .reaction-feedback-toast strong { font-size: 18px; }
  .reaction-feedback-seal { width: 34px; height: 34px; flex-basis: 34px; font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .reaction-feedback-toast { animation: none; }
  .app .extra-actions.active .reaction-grid .skill-card:not(:disabled):active { transform: none; }
  .board-reaction-overlay .reaction-burst .reaction-ring,
  .board-reaction-overlay .reaction-burst .reaction-line { animation: none; display: none; }
  .board-reaction-overlay .reaction-burst .reaction-outcome-badge { animation: none; opacity: 1; transform: translate(-50%, -50%); }
}