fix(ui): a card's hover chrome answers keyboard focus, not any focus

Back from a channel page hands the card its focus again after a mouse trip;
revealed on focus-within, its hover row stayed up under no pointer until a
reload (owner). The row, the Play layer, the Continue + Restart pair and the
global .reveal rule now show on hover or on :focus-visible on the card or
inside it, so Tab and the arrow keys still reveal it.

frontend/src/components/ui/mediaCardStyles.ts

@@ -32,7 +32,7 @@ export const MEDIA_PICTURE_CONTAINER = "@container/pic has-[.media-bar]:[--bar-r
  *  (measured). The cut is in rem, so it moves with the text size too: a picture under 14rem wide.
  *  Only where a row is there to clear (`--bar-room`, MEDIA_PICTURE_CONTAINER). */
 export const MEDIA_HOVER_LAYER =
-  "reveal-hover absolute inset-0 flex items-center justify-center gap-2 bg-black/45 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100 @max-[14rem]/pic:pb-(--bar-room)";
+  "reveal-hover absolute inset-0 flex items-center justify-center gap-2 bg-black/45 opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100 group-has-focus-visible:opacity-100 @max-[14rem]/pic:pb-(--bar-room)";
 
 /** The layer that holds a started title's Continue + Restart pair over the picture: a sibling of the
  *  picture's button, never inside it (C5). Narrow, it leaves the hover row its band as the Play does. */

frontend/src/components/ui/reveal.ts

@@ -1,8 +1,12 @@
-// A card's hover chrome: shown when the card is hovered or holds keyboard focus on a mouse,
+// A card's hover chrome: shown when the card is hovered or holds KEYBOARD focus on a mouse,
 // removed on touch (`.reveal-hover`, index.css), where the card offers the same actions through its
 // "…" beside the title. One string, so the video card and the Plex cards reveal the same way.
+// Keyboard focus is `:focus-visible` on the card or inside it, not any focus: Back from a channel
+// page hands the card its focus back, and with `:focus-within` the row stayed up under no pointer
+// until a reload (owner).
 export const HOVER_REVEAL =
-  "reveal-hover opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity";
+  "reveal-hover opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100 group-has-focus-visible:opacity-100 transition-opacity";
 
 /** What sits under that chrome at rest (a duration, a watched pill) steps aside while it shows. */
-export const HOVER_YIELD = "transition-opacity group-hover:opacity-0 group-focus-within:opacity-0";
+export const HOVER_YIELD =
+  "transition-opacity group-hover:opacity-0 group-focus-visible:opacity-0 group-has-focus-visible:opacity-0";