.creation-replay {
  display: grid;
  gap: .6rem;
  margin-inline: auto;
  width: min(100%, 42rem);
}
.replay-board {
  position: relative;
  width: min(100%, 60vh, 35rem);
  aspect-ratio: 1;
  overflow: hidden;
  margin-inline: auto;
  border: 1px solid #a78bfa4a;
  border-radius: 1rem;
}
.replay-board canvas { width: 100%; height: 100%; }
.replay-finish {
  display: grid;
  place-items: center;
  position: absolute;
  inset: auto .7rem .7rem auto;
  width: 3.1rem;
  height: 2rem;
  pointer-events: none;
  border-radius: .7rem;
  background: #111327dc;
}
.replay-finish[hidden] { display: none; }
.replay-finish svg { width: 2.5rem; }
.replay-finish path {
  fill: none;
  stroke: #b9fff1;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  filter: drop-shadow(0 0 3px #bb8bff);
  animation: replay-thread .9s ease-out both;
}
@keyframes replay-thread { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.replay-artists, .replay-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.replay-artists span {
  border-radius: 1rem;
  border: 1px solid #a78bfa52;
  padding: .25rem .6rem;
  font-size: .8rem;
}
.replay-artists span.is-active { border-color: #c5a7ff; color: #eee4ff; background: #5a3680; }
.replay-artists span.is-active[data-seat="1"] { border-color: #83f2db; color: #dafff7; background: #1c605c; }
.replay-activity { margin: 0; font-size: .88rem; min-height: 1.3rem; }
.replay-actions output { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
#replay-time { width: 100%; accent-color: #bd9eff; }
@media(prefers-reduced-motion: reduce) { .replay-finish path { animation: none; } }