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/css/styles.css

@@ -455,7 +455,11 @@ body::before {
 /* youtube */
 .card--youtube { padding: 0; overflow: hidden; }
 .yt { position: relative; aspect-ratio: 16 / 9; background: #000 center / cover no-repeat; cursor: pointer; display: block; }
-.yt::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,0.65) 100%); }
+.yt::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,0.65) 100%); pointer-events: none; }
+.yt.yt--playing { cursor: default; background: #000; }
+.yt.yt--playing::after,
+.yt.yt--playing .yt__play,
+.yt.yt--playing .yt__title { display: none; }
 .yt__play {
   position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
   width: 72px; height: 72px; border-radius: 50%;