/* Galago — 'fill' input mode (pour-to-fill water dish). Lives in the play screen's
   input host. Scoped under .fill-dish / .fd-*. */

.fill-dish {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  /* Dragging a berry must never select text (esp. the "Drag to fill" label). The body
     sets user-select:none but without the -webkit- prefix iPad Safari ignores it. */
  -webkit-user-select: none;
  user-select: none;
}

.fd-dish {
  display: flex;
  gap: 12px;
  padding: 14px;
  border-radius: 22px;
  background: linear-gradient(180deg, #6b4a36 0%, #4f3526 100%);
  box-shadow: 0 8px 22px rgba(60, 30, 10, 0.25), inset 0 3px 0 rgba(255, 255, 255, 0.1);
  transition: box-shadow 0.2s;
}
.fd-dish.fd-ten { box-shadow: 0 0 0 6px rgba(255, 225, 150, 0.6); }

.fd-frame {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.fd-cell {
  width: clamp(26px, 5.4vw, 38px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.26);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
  display: grid;
  place-items: center;
}
.fd-cell.fd-hint { animation: fd-hint 1.3s ease-in-out infinite; }
@keyframes fd-hint {
  0%, 100% { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4); }
  50% { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(255, 225, 150, 0.7); }
}

.fd-drop {
  width: 78%;
  height: 78%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #bff0ff, #49b6e6 55%, #2b86bb);
  box-shadow: inset 0 -3px 5px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.3);
}
.fd-drop.fd-pop { animation: fd-pop 0.3s cubic-bezier(0.2, 1.3, 0.5, 1); }
@keyframes fd-pop { 0% { transform: scale(0); } 100% { transform: scale(1); } }

.fd-bowl {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, #caa06f, #a9783f);
  box-shadow: 0 6px 16px rgba(60, 30, 10, 0.25);
  transition: opacity 0.3s;
}
.fd-bowl.fd-empty { opacity: 0.35; }
/* Decorative only — never a pointer/selection target while berries are dragged. */
.fd-label { font-weight: 800; color: #3b2415; font-size: 14px; pointer-events: none; }

.fd-berry {
  width: clamp(26px, 5vw, 34px);
  aspect-ratio: 1;
  border-radius: 50%;
  touch-action: none;
  cursor: grab;
  background: radial-gradient(circle at 35% 30%, #bff0ff, #49b6e6 55%, #2b86bb);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3), inset 0 -3px 5px rgba(0, 0, 0, 0.22);
}
.fd-berry.fd-dragging { position: fixed; z-index: 50; cursor: grabbing; pointer-events: none; }

.fd-commit { min-height: 8px; }

@media (prefers-reduced-motion: reduce) {
  .fd-cell.fd-hint { animation: none; }
  .fd-drop.fd-pop { animation: none; }
}