[UI/UX Feature Proposal] Enhanced Video Player Controls (.z-controls)

[vaaticano]

Is your feature request related to a problem? Please describe.
The current video player control bar (.z-controls) can feel cluttered, and key interactive elements like the Clip button lack strong visual feedback on hover/focus, making them less intuitive to locate during fast-paced streams.

Describe the solution you'd like
A visual and functional UI/UX refactor for the video player controls featuring:

• Intuitive Capsule Layout: Groups volume, timestamps, and controls into clean, organized modules.
• Enhanced Clip Button: Adds a clear micro-interaction with Kick’s brand green highlight (#53FC18) and smooth spring scaling on hover.
• Stable UI & Tabular Numbers: Applied font-variant-numeric: tabular-nums to prevent layout shifts as time updates.
• Performance & Mobile Ready: Fully GPU-optimized (zero layout reflows) with fixed touch-screen interaction states.

Describe alternatives you've considered
I have developed and published two implementations in a proof-of-concept repository:

1. Production-ready CSS (kick-capsules-native-en.css) with zero :has() dependencies or !important flags.
2. Injected JS script (kick-capsules-v5-en.js) for instant browser console testing.

Additional context

• Live Video Demo: https://youtu.be/TjQvTNvev9g
• GitHub Repository: https://github.com/vaaticano/kick-player-capsules
  (Side-by-side comparison screenshots and production CSS code are available in the repository linked above).