/* container fixed safely inside viewport */
#puffer-container {
  position: fixed;
  bottom: 20px;
  right: 20px;

  width: 120px;
  height: 180px;

  pointer-events: none;
  z-index: 9999;

  overflow: visible;
}

.puffer {
  position: absolute;
  top: 50%;
  left: 50%;

  width: 120px;
  height: 180px;

  background-image: url("currentthefish.png");
  background-repeat: no-repeat;
  background-size: contain;

  transform: translate(-50%, -50%) scale(1);
  transform-origin: center;

  animation: float 10s ease-in-out infinite;

  pointer-events: auto;
  cursor: pointer;

  /* SAFE mobile fixes (non-breaking) */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  outline: none;
}

/* zoom pause state */
.puffer.zooming {
  animation-play-state: paused;
}

/* gentle float ONLY (keeps centered positioning) */
@keyframes float {
  0% {
    transform: translate(-50%, -50%) translate(0px, 0px);
  }
  50% {
    transform: translate(-50%, -50%) translate(6px, -6px);
  }
  100% {
    transform: translate(-50%, -50%) translate(0px, 0px);
  }
}