Match videos: composed VS-card OG preview + richer share metadata

Sports match share links now show the full VS composition (fighters,
flags, event, weight class, referee/court/match chips) in WhatsApp /
Telegram / Facebook / Twitter previews instead of the raw video frame.

- Browsershot + puppeteer-bundled Chromium screenshots a dedicated
  1200x675 (true 16:9) render of the vs-mini composition. Chrome runs
  through a small wrapper (bin/browsershot-node.sh) that raises the fd
  limit and reads its full env, since PHP-FPM's stripped env otherwise
  makes Chromium fail to launch.
- Render is JPEG @ q85 (~100 KB) instead of PNG (~700 KB) — WhatsApp
  silently drops OG images above roughly 300 KB, which is why music
  thumbnails always showed and match cards didn't.
- SportsMatchController@store/update renders synchronously so the
  picture is guaranteed to exist before the user copies the share URL;
  edits regenerate and old stamped variants are cleaned. The og:image
  URL carries a ?v={updated_at} stamp so scrapers recache on edit.
- accessShare() (/s/{token}) now detects scraper user agents and serves
  the video page HTML inline instead of a 302 — some crawlers don't
  follow redirects when building link previews.
- og:description / twitter:description built from headerData(): flag
  emoji + fighter names (blue vs red), event, weight, match#, court,
  referee, view count, upload date.
- Fixed 3-dot menu on video cards being hidden behind the next card
  (:has(.dropdown-menu.show) promotes the active card above siblings
  and lifts the overflow:hidden clip on .yt-video-info).
- vs-mini: skip the entrance animation on touch devices and expose a
  .vs-mini-static class so the OG render always captures the final
  frame instead of a random mid-animation moment.

Also adds an admin gallery at /admin/og-previews for spot-checking the
generated preview JPEGs.

Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>

resources/views/components/partials/card-styles.blade.php

@@ -15,6 +15,28 @@
     flex-direction: column;
 }
 
+/* When the 3-dot menu is open, promote this card above its siblings so
+   the dropdown-menu (Bootstrap default z-index 1000) isn't visually
+   covered by later cards in the grid. Cards are position:static by
+   default, so siblings later in the DOM naturally paint on top even
+   though the dropdown itself has a high z-index — the stacking is
+   compared at the card level, not the dropdown level. `:has()` triggers
+   only while a menu is `.show`ing, so this doesn't affect the normal
+   grid layout. */
+.yt-video-card:has(.dropdown-menu.show) {
+    position: relative;
+    z-index: 50;
+}
+
+/* Same fix for the ⋮ menu container — .yt-video-info has overflow:hidden
+   (to hard-cap card height for grid parity), which was clipping the
+   dropdown's bottom edge. Allow the dropdown to escape by giving its
+   wrapper a stacking context and letting overflow leak upward from that
+   ancestor only when a menu is open. */
+.yt-video-card .yt-video-info:has(.dropdown-menu.show) {
+    overflow: visible;
+}
+
 .yt-video-card .yt-video-thumb {
     position: relative;
     aspect-ratio: 16/9;