Fix YouTube card: pause/seek no longer restart the video

The .yt::after gradient overlay was sitting on top of the inserted
iframe and stealing every click — clicks on the YouTube player controls
bubbled to the .yt facade, which still matched [data-yt] and re-ran
open(), replacing the iframe and restarting playback from 0.

- Add pointer-events:none on .yt::after so it never blocks player clicks
- On play, swap .yt to a .yt--playing state that hides the overlay,
  play button, and title overlay
- Remove the data-yt/role/tabindex attrs after init so any leftover
  clicks on the facade no longer match the open() delegate
- Add controls=1 explicitly and broaden the allow list (clipboard-write,
  web-share) for the embedded player

assets/js/app.js

@@ -188,12 +188,18 @@
 
   function attachYouTube(root) {
     const open = (fac) => {
+      const id = fac.dataset.yt;
+      if (!id) return;
       const iframe = document.createElement("iframe");
-      iframe.src = `https://www.youtube-nocookie.com/embed/${encodeURIComponent(fac.dataset.yt)}?autoplay=1&rel=0`;
-      iframe.allow = "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture";
+      iframe.src = `https://www.youtube-nocookie.com/embed/${encodeURIComponent(id)}?autoplay=1&rel=0&controls=1`;
+      iframe.allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share";
       iframe.allowFullscreen = true;
       iframe.title = fac.getAttribute("aria-label") || "YouTube video";
       fac.replaceChildren(iframe);
+      fac.classList.add("yt--playing");
+      fac.removeAttribute("data-yt");
+      fac.removeAttribute("role");
+      fac.removeAttribute("tabindex");
       fac.style.cursor = "default";
     };
     root.addEventListener("click", (e) => {