.firefly-panel .meadow {
  min-height: 360px;
}

.firefly,
.firefly-decoy {
  width: var(--firefly-size, 66px);
  height: var(--firefly-size, 66px);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
}

.firefly {
  background: #fff5b3;
  box-shadow: 0 0 0 11px #ffe87669, 0 0 26px #ffc52e;
}

.firefly:hover {
  transform: translate(-50%, -50%) scale(1.1);
}

.firefly-decoy {
  z-index: 1;
  border-radius: 50%;
  background: #d9edff;
  color: #6f9ed1;
  box-shadow: 0 0 0 8px #cae6ff88, 0 0 18px #85bbe688;
  font-size: clamp(18px, 3vw, 27px);
  opacity: .9;
}

.firefly-decoy:hover {
  transform: translate(-50%, -50%) scale(1.06);
}

.firefly.firefly-caught {
  animation: firefly-caught .22s ease-out both;
  pointer-events: none;
}

@keyframes firefly-caught {
  to { transform: translate(-50%, -50%) scale(1.55); opacity: 0; }
}

@media (max-width: 760px) {
  .firefly-panel .meadow { min-height: 310px; }
}