feat(ui): a button over a picture answers the pointer with an accent ring

The media variant's hover darkened its body from 60 to 75% black, which no
one could see on a poster; a rail's scroll arrow over a card could not be told
from the card's own Play under it. Its hover is now a 2px accent ring over an
80% body (owner pick B), on every card control, Plex and YouTube, and the rail
arrows. DESIGN.md B3 names it beside the edged pills, with its log row.

frontend/src/components/ui/buttonStyles.ts

@@ -46,7 +46,10 @@ const BUTTON_VARIANTS: Record<ButtonVariant, string> = {
   glass: "font-medium glass-card glass-hover act:hover:text-accent",
   // The player chrome is dark in the light theme too: a theme-fg state layer would be a dark wash.
   overlay: "font-medium text-white/80 act:hover:text-white act:hover:bg-white/15",
-  media: "font-medium bg-black/60 text-white act:hover:bg-black/75",
+  // On a picture a layer is lost in the picture's own light and dark: the hover is the accent edge
+  // (B3's edged-pill rule), a 2px ring over a darker body (owner pick B).
+  media:
+    "font-medium bg-black/60 text-white act:hover:bg-black/80 act:hover:ring-2 act:hover:ring-accent",
   "danger-soft":
     "font-medium border border-danger/60 text-danger state-layer act:hover:border-danger",
   link: "font-semibold text-accent act:hover:underline",
@@ -112,7 +115,7 @@ const ICON_VARIANTS: Record<IconButtonVariant, string> = {
   glass: "glass-card glass-hover act:hover:text-accent",
   // The player chrome and a thumbnail are dark in the light theme too, so these two paint with
   // white and black, not with the theme's fg (whose state layer would be a dark wash on a dark video).
-  media: "bg-black/60 text-white act:hover:bg-black/75",
+  media: "bg-black/60 text-white act:hover:bg-black/80 act:hover:ring-2 act:hover:ring-accent",
   overlay: "text-white/80 act:hover:text-white act:hover:bg-white/15",
 };