Goal:
Create an interactive mini game around this animation and, at the same time, improve the animation in small details.
1. Damage on logo click
When the user clicks the logo, it takes damage. The damage value (for example, -10, -20) appears around the logo, in red/orange, in bold. The style should evoke 90s fighting games. The text should appear gradually, with color variations during the appearance, and disappear with a truly elegant effect.
2. Damage based on click location
The damage varies according to the region of the logo that was clicked. A click at the top deals the highest damage (-50), a click at the bottom deals the lowest damage (-10), and the intermediate regions deal intermediate damage values, proportional to the position. The click must be detected as precisely as possible: it only counts if it hits exactly the logo's area (the pixels/characters that compose it), and never the line or the empty space around it.
3. Health and recovery
The logo has 200 health, and this value can never be exceeded. If it goes 10 seconds without taking damage, it recovers 10 health. When it recovers, +10 appears around the logo, in light blue or green, varying according to the theme.
4. Sleeping state
When it reaches 0 health, the logo falls asleep: it stays still in the position it was in and changes to the color `theme.text_muted` (`/home/inky/co-sh/src/tui/theme.rs`). When it falls asleep, a "zzz" spinner must appear next to the logo, working as follows: it starts with "z", then "z" again, and finally "Z". Upon reaching "Z", the spinner does not restart from scratch: the uppercase "Z" shifts position, that is, the "Z" at the first index starts being displayed and the "Z" at the last index goes back to "z", and this movement repeats continuously. The letters must be bold and use the `text_muted` color.
