feat(skin): port tooltip styling from tech preview (#800)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

packages/skins/src/shared/tooltip-state.css

@@ -0,0 +1,43 @@
+/* ==========================================================================
+   Tooltip Label State Visibility
+
+   Data-attribute-driven visibility rules for multi-state tooltip labels.
+   Uses adjacent sibling selectors to match button state → tooltip content.
+   ========================================================================== */
+
+/* --- All multi-state labels hidden by default --- */
+
+.media-tooltip-label {
+  display: none;
+}
+
+/* --- Active label per state --- */
+
+/* Play: ended → replay */
+.media-button--play[data-ended] + media-tooltip .media-tooltip-label--replay,
+/* Play: paused (not ended) → play */
+  .media-button--play:not([data-ended])[data-paused] + media-tooltip
+  .media-tooltip-label--play,
+/* Play: playing (not paused, not ended) → pause */
+  .media-button--play:not([data-paused]):not([data-ended]) + media-tooltip
+  .media-tooltip-label--pause,
+/* Fullscreen: not fullscreen → enter */
+  .media-button--fullscreen:not([data-fullscreen]) + media-tooltip
+  .media-tooltip-label--enter-fullscreen,
+/* Fullscreen: fullscreen → exit */
+  .media-button--fullscreen[data-fullscreen] + media-tooltip
+  .media-tooltip-label--exit-fullscreen,
+/* Captions: not active → enable */
+  .media-button--captions:not([data-active]) + media-tooltip
+  .media-tooltip-label--enable-captions,
+/* Captions: active → disable */
+  .media-button--captions[data-active] + media-tooltip
+  .media-tooltip-label--disable-captions,
+/* PiP: not in pip → enter */
+  media-pip-button:not([data-pip]) + media-tooltip
+  .media-tooltip-label--enter-pip,
+/* PiP: in pip → exit */
+  media-pip-button[data-pip] + media-tooltip
+  .media-tooltip-label--exit-pip {
+  display: block;
+}