.garden-eel-replay {
  appearance: none;
  display: inline;
  margin: 0;
  border: 0;
  padding: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  vertical-align: baseline;
  cursor: pointer;
  transition: color 180ms ease, text-shadow 180ms ease;
}

.garden-eel-replay:hover {
  color: #d68b9e;
  text-shadow: 0 0 5px #f8c7d280;
}

.garden-eel-replay:focus-visible {
  outline: 1px solid #d68b9e;
  outline-offset: 4px;
  border-radius: 2px;
}

.garden-eel-scene {
  position: fixed;
  right: max(10px, env(safe-area-inset-right));
  bottom: 0;
  width: min(320px, 64vw, 78vh);
  aspect-ratio: 320 / 370;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  contain: strict;
  z-index: 20;
}

.garden-eel-scene > svg,
.garden-eel-scene > canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .garden-eel-scene { display: none; }
  .garden-eel-replay { transition: none; }
}
