Your problem is this line:
RewriteCond %{HTTP_REFERER} !^https?://([^.]+\.)?playablogs\. [NC]
This means to exclude all all variations of the owner’s URL allowing these images to be hotlinked to your own domain (and sub-domains). Without this exclusion you would block images from being viewed normally on your site anywhere. So it must be stay there. It only disables hotlinking if those files are not referred by your domain. (Example: If another top level domain (other website) wants to hotlink your images.)
In order to stop hotlinking within your own site to other sub-domains, you would have to but something like this in a .htaccess file in your 'files' directory if you do not want hotlinking for the file 'reading.gif' in your example above.
But this may prevent normal usage of any files in the 'files' directory. I'm not sure, you could try it.
Create a separate .htaccess file for you 'files' directory and place the following rules in it. I've also removed the 'L' in the last line as it is not needed when using 'F', as using 'F' assumes that it is the last rule. Also, I would leave out the IfModules, they are only there to keep your site from crashing if the rules don't work. If your site doesn't produce any errors, how do you know if it's causing problems or not even working? Remember, this is for an .htaccess file that goes in your 'files' directory only.
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{REQUEST_FILENAME} -f
RewriteCond %{REQUEST_FILENAME} \.(gif|jpe?g?|png)$ [NC]
RewriteCond %{HTTP_REFERER} !^https?://blogs\.playablogs\.com/files/ [NC]
RewriteRule \.(gif|jpe?g?|png)$ - [F,NC]