/* Shared by the free homepage demo and paid stage reactions. */
.reaction-button,
.viewer-page .btn.reaction-button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: var(--reaction-gap, 15px);
  width: var(--reaction-size, 180px);
  height: var(--reaction-size, 180px);
  min-height: var(--reaction-size, 180px);
  padding: 10px !important;
  border: 2px solid #171715;
  border-radius: 50% !important;
  background: var(--reaction-fill, #fffdf8);
  color: var(--reaction-ink, #171715);
  box-shadow: 0 var(--reaction-shadow, 8px) 0 #171715;
  font-size: var(--reaction-font, 26px) !important;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.04em;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s, box-shadow .12s, background .16s, color .16s;
}
.reaction-face {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: var(--reaction-face-width, 46px);
  height: var(--reaction-face-height, 38px);
  border-bottom: var(--reaction-mouth-width, 3px) solid currentColor;
  border-radius: 0 0 50% 50%;
}
.reaction-face::before, .reaction-face::after {
  content: "";
  position: absolute;
  top: 0;
  width: var(--reaction-eye-width, 5px);
  height: var(--reaction-eye-height, 13px);
  border-radius: 50%;
  background: currentColor;
}
.reaction-face::before { left: var(--reaction-eye-inset, 8px); }
.reaction-face::after { right: var(--reaction-eye-inset, 8px); }
.viewer-page .btn.reaction-button:is(:hover, :active) {
  background: var(--reaction-fill, #fffdf8);
  color: var(--reaction-ink, #171715);
}
.actor-reaction {
  --reaction-size: 44px;
  --reaction-face-width: 22px;
  --reaction-face-height: 19px;
  --reaction-eye-width: 3px;
  --reaction-eye-height: 8px;
  --reaction-eye-inset: 5px;
  --reaction-mouth-width: 2px;
  --reaction-shadow: 3px;
  --reaction-press: 1px;
  margin: 0 2px 3px;
}
.viewer-page .btn.actor-reaction { padding: 6px !important; border-width: 1.5px; }
@media (hover: hover) {
  .reaction-button:hover:not(:disabled),
  .viewer-page .btn.reaction-button:hover:not(:disabled) {
    transform: rotate(-5deg);
  }
}
.reaction-button:active:not(:disabled),
.viewer-page .btn.reaction-button:active:not(:disabled),
.viewer-page .btn.reaction-button.is-sending {
  transform: translateY(var(--reaction-press, 6px)) rotate(-4deg) scale(.94);
  box-shadow: 0 1px 0 #171715;
}
/* Keep the chosen control legible while all paid actions are disabled. */
.viewer-page .btn.reaction-button.is-sending {
  background: #fff0b2;
  color: #171715;
  opacity: 1;
}
.is-reacting .reaction-button,
.viewer-page .btn.reaction-button.is-reacting {
  background: #fbd744;
  color: #171715;
  box-shadow: 0 var(--reaction-shadow, 8px) 0 #171715, 0 0 0 5px #fbd74440;
  opacity: 1;
  animation: reaction-button-pop .85s both;
  /* A balance refresh replaces the node: resume the same pop instead of replaying it. */
  animation-delay: var(--reaction-feedback-delay, 0ms);
}
.is-reacting .reaction-face,
.reaction-button.is-reacting .reaction-face {
  animation: reaction-face-laugh .85s both;
  animation-delay: var(--reaction-feedback-delay, 0ms);
}
@keyframes reaction-button-pop {
  0% { transform: translateY(4px) scale(.94); }
  22% { transform: translateY(-4px) rotate(-5deg) scale(1.08); }
  42% { transform: translateY(1px) rotate(2deg) scale(.99); }
  62%, 100% { transform: none; }
}
@keyframes reaction-face-laugh {
  0% { transform: scale(1, .85); }
  22%, 42% { transform: scale(1.14, 1.08); }
  62%, 100% { transform: none; }
}
.reaction-button:focus-visible,
.viewer-page .btn.reaction-button:focus-visible {
  outline: 3px solid #6746b5;
  outline-offset: 5px;
}
.reaction-button:disabled { cursor: default; }
.reaction-button-turbo { --reaction-fill: #171715; --reaction-ink: #fbd744; }
.reaction-multiplier {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1.5px solid #171715;
  border-radius: 50%;
  background: #fbd744;
  color: #171715;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
}
.reaction-effects { position: fixed; inset: 0; z-index: 80; overflow: hidden; pointer-events: none; user-select: none; }
.reaction-ring {
  position: absolute;
  box-sizing: border-box;
  border: 3px solid #fbd744;
  border-radius: 50%;
  animation: reaction-ring-expand .55s ease-out both;
}
@keyframes reaction-ring-expand {
  0% { opacity: .95; transform: scale(.96); }
  100% { opacity: 0; transform: scale(1.3); }
}
.reaction-ha {
  position: absolute;
  color: #171715;
  font: italic 800 26px/1 Arial, Helvetica, sans-serif;
  opacity: 0;
  animation: reaction-ha-fly .8s ease-out both;
}
@keyframes reaction-ha-fly {
  0% { opacity: 0; transform: translate(-50%, 8px) rotate(-8deg) scale(.8); }
  18% { opacity: 1; }
  65% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--ha-dx)), calc(-1 * var(--ha-rise))) rotate(var(--ha-turn)) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .reaction-ha { animation: none; opacity: 1; transform: translate(-50%, -14px); }
  .reaction-ring { animation: none; opacity: .8; }
  .is-reacting .reaction-button, .viewer-page .btn.reaction-button.is-reacting,
  .is-reacting .reaction-face, .reaction-button.is-reacting .reaction-face { animation: none; }
  .reaction-button, .viewer-page .btn.reaction-button { transition: none; }
  .reaction-button:hover:not(:disabled), .reaction-button:active:not(:disabled),
  .is-reacting .reaction-button, .viewer-page .btn.reaction-button:hover:not(:disabled),
  .viewer-page .btn.reaction-button:active:not(:disabled),
  .viewer-page .btn.reaction-button.is-reacting, .viewer-page .btn.reaction-button.is-sending {
    transform: none;
  }
}