.bb-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}

.bb-canvas {
  max-width: 100%;
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 3px var(--color-border);
  background: #cde8f7;
  cursor: crosshair;
  touch-action: none;
}

.bb-garden-wrap {
  width: 100%;
  max-width: 480px;
}
.bb-garden-label {
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--color-text-soft);
  margin-bottom: 6px;
  text-align: center;
}
.bb-garden {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  background: #7cb342;
  border-radius: var(--radius-md);
  padding: 8px;
}
.bb-plot {
  aspect-ratio: 1;
  background: #8d6e40;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}
.bb-plot--filled {
  background: #a9d18e;
  animation: bb-bloom 0.4s ease;
}
@keyframes bb-bloom {
  0% { transform: scale(0.3); opacity: 0.4; }
  60% { transform: scale(1.25); }
  100% { transform: scale(1); opacity: 1; }
}

@media (max-width: 480px) {
  .bb-plot { font-size: 0.85rem; }
}