canvas {
  touch-action: none;
  cursor: grab;
}
canvas.dragging {
  cursor: grabbing !important;
}
#toolbar img {
  mix-blend-mode: normal;
  filter: drop-shadow(0 3px 2px #13290888);
}
#toolbar button:hover img {
  transform: translateY(-2px);
}
#cameraControls {
  position: absolute;
  right: 2%;
  bottom: 10%;
  display: flex;
  align-items: center;
  background: #224f11e8;
  border: 2px solid #8baa4a99;
  border-radius: 20px;
  padding: 4px;
  box-shadow: 0 2px 4px #17420b66;
}
#cameraControls button {
  border: 0;
  background: transparent;
  color: #fff8d6;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font: 700 25px Georgia;
}
#cameraControls button:hover {
  background: #97c74655;
}
#cameraControls button:disabled {
  opacity: 0.3;
  cursor: default;
}
#cameraControls #zoomValue {
  border-radius: 8px;
  width: 60px;
  font: 14px Arial;
}
#panHint {
  position: absolute;
  right: 2%;
  bottom: 17%;
  color: #fffacb;
  font-size: 11px;
  text-shadow: 1px 1px 2px #2b541a;
  pointer-events: none;
}
#toolbar button.active {
  box-shadow:
    inset 0 0 16px #dcff6b,
    0 0 5px #d7fd48aa;
}
.seed img {
  image-rendering: auto;
  filter: drop-shadow(0 2px 1px #0001);
}
@media (max-width: 900px) {
  #cameraControls {
    transform: scale(0.8);
    transform-origin: bottom right;
  }
  #panHint {
    display: none;
  }
}