.squish-div {
    position: absolute;
    bottom: 60%;
    left: 75.2%;
    width: 6%;
    transform: translate(-50%, 50%); /* anchor center of div */
    z-index: 5;
  }

  /* Inner image handles the squish animation */
  .squish-target {
    width: 100%;
    display: block;
    transform-origin: bottom center; /* squish around bottom center */
  }

  /* Squish animation */
  .squish-target.squish {
    animation: squishAnim 0.3s forwards;
  }

  @keyframes squishAnim {
    0%   { transform: scaleX(1) scaleY(1); }
    30%  { transform: scaleX(1.15) scaleY(0.85); }
    60%  { transform: scaleX(0.95) scaleY(1.05); }
    100% { transform: scaleX(1) scaleY(1); }
  }

  /* Counter message */
  #counterMessage {
    position: absolute;
    bottom: 60%; 
    left: 75.2%;
    transform: translateX(-50%);
    font-size: 12px;
    color: #fff;
    transition: opacity 0.6s ease;
    z-index: 10;
    pointer-events: none;
    text-align: center;
    opacity: 0;
  }

  #counterMessage.visible {
    opacity: 0.7;
  }

  .squish-div img {
    width: 100%;
    display: block;
  }


.squish-div:hover {
    cursor: grab;
}

.squish-div:active {
    cursor: grabbing;
}

.squish-div:hover {
  filter: brightness(1.9);
}