.score-reaction-overlay {
  position: fixed;
  inset: 0;
  z-index: 10010;
  display: grid;
  place-items: center;
  background: transparent;
  pointer-events: none;
  isolation: isolate;
}
.score-reaction-stage {
  width: min(520px, calc(100vw - 24px), calc(100dvh * 1.05));
  aspect-ratio: 4 / 3;
  background: transparent;
  user-select: none;
}
.score-reaction-announcement {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.score-reaction-art {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-color: transparent;
}
.score-reaction-dismiss {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  pointer-events: auto;
  border-radius: 50%;
  background: var(--ps-bg-surface);
  color: var(--ps-text-primary);
  border: 1px solid var(--ps-border);
  transition: transform .15s ease, background-color .15s ease;
}
.score-reaction-dismiss:hover { transform: scale(1.06); background: var(--ps-bg-hover); }
.score-reaction-dismiss:focus-visible { outline: 2px solid var(--ps-primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .score-reaction-dismiss:hover { transform: none; } }
.score-reaction-stage.is-playing{animation:score-reaction-stage var(--reaction-duration,3s) ease-in-out both}@keyframes score-reaction-stage{0%{opacity:0;transform:scale(.9)}7%,93%{opacity:1;transform:scale(1)}50%{opacity:1;transform:scale(1.02)}100%{opacity:0;transform:scale(.96)}}@media(prefers-reduced-motion:reduce){.score-reaction-stage.is-playing{animation:none}}