UI: Defeat iOS play HUD with Hybrid Poster and nuclear CSS suppression

src/components/UserHeader.tsx

@@ -249,16 +249,29 @@ export function UserHeader({ user, preferences, onModalStateChange }: UserHeader
         <div className="absolute inset-0 z-[-1] pointer-events-none overflow-hidden">
           <style dangerouslySetInnerHTML={{
             __html: `
-            /* Hide all native iOS media controls */
+            /* Absolute nuclear suppression of all native iOS media HUDs */
             video::-webkit-media-controls {
               display: none !important;
-              -webkit-appearance: none;
+              opacity: 0 !important;
+              -webkit-appearance: none !important;
             }
             video::-webkit-media-controls-start-playback-button {
               display: none !important;
-              -webkit-appearance: none;
+              opacity: 0 !important;
+              -webkit-appearance: none !important;
             }
             video::-webkit-media-controls-panel {
+              display: none !important;
+              opacity: 0 !important;
+              -webkit-appearance: none !important;
+            }
+            video::-webkit-media-controls-play-button {
+               display: none !important;
+               opacity: 0 !important;
+               -webkit-appearance: none !important;
+            }
+            /* Extra safety for PWA/Safari specifics */
+            *::-webkit-media-controls-start-playback-button {
               display: none !important;
               -webkit-appearance: none;
             }
@@ -274,29 +287,40 @@ export function UserHeader({ user, preferences, onModalStateChange }: UserHeader
             }}
           />
 
-          {/* Smoke Video background */}
+          {/* Static Poster Image Layer (Safe Fallback) */}
+          <img
+            src="/videos/smoke-poster.jpg"
+            alt=""
+            className={cn(
+              "absolute inset-0 w-full h-full object-cover scale-110 transition-opacity duration-1000",
+              isVideoPlaying ? "opacity-30" : "opacity-70 dark:opacity-50"
+            )}
+            aria-hidden="true"
+          />
+
+          {/* Smoke Video background - Only visible when MOVING */}
           <video
             ref={videoRef}
             autoPlay
             loop
             muted
             playsInline
-            {...({ "webkit-playsinline": "true" } as any)}
+            {...({
+              "webkit-playsinline": "true",
+              "x-webkit-airplay": "deny",
+              "disableRemotePlayback": true
+            } as any)}
             preload="auto"
             controls={false}
             disablePictureInPicture
-            {...({ "disableRemotePlayback": true } as any)}
             onContextMenu={(e) => e.preventDefault()}
-            poster="/videos/smoke-poster.jpg"
             onLoadedData={() => setIsVideoLoaded(true)}
             onPlay={() => setIsVideoPlaying(true)}
             className={cn(
               "absolute inset-0 w-full h-full object-cover scale-110 transition-opacity duration-[1500ms] ease-in-out",
               isVideoPlaying
                 ? "opacity-70 dark:opacity-50"
-                : isVideoLoaded
-                  ? "opacity-30"
-                  : "opacity-10"
+                : "opacity-0"
             )}
           >
             <source src="/videos/smoke.mp4" type="video/mp4" />