require item revealing when user wants it

public/s/css/f0ckm.css

@@ -14733,4 +14733,86 @@ body.scroller-active #gchat-reopen-bubble {
   padding: 0 !important;
   font-size: 11px !important;
   line-height: 1 !important;
+}
+
+/* Post detail page media-object blur overlay support (NSFW, NSFL, SFW, Untagged) */
+.blur-detail-active.blur-nsfw-active .media-object[data-mode="nsfw"]:not(.revealed),
+.blur-detail-active.blur-nsfl-active .media-object[data-mode="nsfl"]:not(.revealed),
+.blur-detail-active.blur-sfw-active .media-object[data-mode="sfw"]:not(.revealed),
+.blur-detail-active.blur-untagged-active .media-object[data-mode="untagged"]:not(.revealed) {
+  position: relative !important;
+  cursor: pointer !important;
+}
+
+.blur-detail-active.blur-nsfw-active .media-object[data-mode="nsfw"]:not(.revealed) > *,
+.blur-detail-active.blur-nsfl-active .media-object[data-mode="nsfl"]:not(.revealed) > *,
+.blur-detail-active.blur-sfw-active .media-object[data-mode="sfw"]:not(.revealed) > *,
+.blur-detail-active.blur-untagged-active .media-object[data-mode="untagged"]:not(.revealed) > * {
+  filter: blur(40px) brightness(0.6) !important;
+  -webkit-filter: blur(40px) brightness(0.6) !important;
+  pointer-events: none !important;
+  user-select: none !important;
+  transition: filter 0.35s ease, -webkit-filter 0.35s ease !important;
+}
+
+.media-object.revealed > * {
+  filter: none !important;
+  -webkit-filter: none !important;
+  pointer-events: auto !important;
+}
+
+.blur-detail-active.blur-nsfw-active .media-object[data-mode="nsfw"]:not(.revealed)::after,
+.blur-detail-active.blur-nsfl-active .media-object[data-mode="nsfl"]:not(.revealed)::after,
+.blur-detail-active.blur-sfw-active .media-object[data-mode="sfw"]:not(.revealed)::after,
+.blur-detail-active.blur-untagged-active .media-object[data-mode="untagged"]:not(.revealed)::after {
+  position: absolute !important;
+  inset: 0 !important;
+  display: flex !important;
+  flex-direction: column !important;
+  align-items: center !important;
+  justify-content: center !important;
+  z-index: 1000 !important;
+  color: #fff !important;
+  font-family: inherit !important;
+  font-weight: 800 !important;
+  letter-spacing: 2px !important;
+  text-transform: uppercase !important;
+  text-align: center !important;
+  white-space: pre-wrap !important;
+  cursor: pointer !important;
+  transition: opacity 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
+  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9) !important;
+  pointer-events: none !important;
+  opacity: 1 !important;
+}
+
+.blur-detail-active.blur-nsfw-active .media-object[data-mode="nsfw"]:not(.revealed)::after {
+  content: "NSFW\A \A Click to reveal" !important;
+  font-size: 18px !important;
+  color: #ffffff !important;
+  background: rgba(10, 10, 12, 0.45) !important;
+}
+.blur-detail-active.blur-nsfl-active .media-object[data-mode="nsfl"]:not(.revealed)::after {
+  content: "NSFL\A \A Click to reveal" !important;
+  font-size: 18px !important;
+  color: #ff3b30 !important;
+  background: rgba(10, 10, 12, 0.55) !important;
+}
+.blur-detail-active.blur-sfw-active .media-object[data-mode="sfw"]:not(.revealed)::after {
+  content: "SFW\A \A Click to reveal" !important;
+  font-size: 18px !important;
+  color: #30d158 !important;
+  background: rgba(10, 10, 12, 0.4) !important;
+}
+.blur-detail-active.blur-untagged-active .media-object[data-mode="untagged"]:not(.revealed)::after {
+  content: "UNTAGGED\A \A Click to reveal" !important;
+  font-size: 18px !important;
+  color: #ff9f0a !important;
+  background: rgba(10, 10, 12, 0.45) !important;
+}
+
+/* Hide overlay when revealed */
+.media-object.revealed::after {
+  opacity: 0 !important;
+  pointer-events: none !important;
 }

public/s/js/f0ckm.js

@@ -44,6 +44,7 @@ window.cancelAnimFrame = (function () {
   if (localStorage.getItem('blurNsfl') === 'true') htmlEl.classList.add('blur-nsfl-active');
   if (localStorage.getItem('blurSfw') === 'true') htmlEl.classList.add('blur-sfw-active');
   if (localStorage.getItem('blurUntagged') === 'true') htmlEl.classList.add('blur-untagged-active');
+  if (localStorage.getItem('blurDetail') !== 'false') htmlEl.classList.add('blur-detail-active');
 
   window.updateVisitIndicators = () => {
       try {
@@ -8827,6 +8828,30 @@ if (navigator.vibrate) {
     const blurUntagged = localStorage.getItem('blurUntagged') === 'true';
     if (!blurNsfw && !blurNsfl && !blurSfw && !blurUntagged) return;
     
+    // Check if they clicked a blurred media-object container on the detail page
+    const mediaObj = e.target.closest('.media-object');
+    if (mediaObj && localStorage.getItem('blurDetail') !== 'false') {
+      const mode = mediaObj.getAttribute('data-mode');
+      let shouldBlurThis = false;
+      if (mode === 'nsfw') shouldBlurThis = blurNsfw;
+      else if (mode === 'nsfl') shouldBlurThis = blurNsfl;
+      else if (mode === 'sfw') shouldBlurThis = blurSfw;
+      else if (mode === 'untagged') shouldBlurThis = blurUntagged;
+      
+      if (shouldBlurThis && !mediaObj.classList.contains('revealed')) {
+        e.preventDefault();
+        e.stopPropagation();
+        mediaObj.classList.add('revealed');
+        
+        // Start audio/video playback cleanly on reveal
+        const videoElem = mediaObj.querySelector('video') || mediaObj.querySelector('audio');
+        if (videoElem) {
+          videoElem.play().catch(() => {});
+        }
+        return;
+      }
+    }
+
     // Check if they clicked the elegant hide-again button in the corner
     const hideBtn = e.target.closest('.hide-thumb-btn');
     if (hideBtn) {

public/s/js/settings.js

@@ -779,6 +779,20 @@
             showStatus(enabled ? 'Untagged blurring enabled!' : 'Untagged blurring disabled!', 'success');
         });
     }
+    const blurDetailToggle = document.getElementById('blur_detail_toggle');
+    if (blurDetailToggle) {
+        blurDetailToggle.checked = localStorage.getItem('blurDetail') !== 'false';
+        blurDetailToggle.addEventListener('change', () => {
+            const enabled = blurDetailToggle.checked;
+            localStorage.setItem('blurDetail', enabled ? 'true' : 'false');
+            if (enabled) {
+                document.documentElement.classList.add('blur-detail-active');
+            } else {
+                document.documentElement.classList.remove('blur-detail-active');
+            }
+            showStatus(enabled ? 'Detail page blurring enabled!' : 'Detail page blurring disabled!', 'success');
+        });
+    }
 
     // Background Blur Toggle
     const backgroundToggle = document.getElementById('show_background_toggle');

public/s/js/v0ck.js

@@ -421,8 +421,28 @@ class v0ck {
     video.volume = _volume = volumeSlider.value = +(localStorage.getItem('volume') ?? defaultVolume);
     handleVolumeButton(video.volume);
 
+    const mediaObj = player.closest('.media-object');
+    let isBlurredDetail = false;
+    if (mediaObj && localStorage.getItem('blurDetail') !== 'false') {
+      const mode = mediaObj.getAttribute('data-mode');
+      const blurNsfw = localStorage.getItem('blurNsfw') === 'true';
+      const blurNsfl = localStorage.getItem('blurNsfl') === 'true';
+      const blurSfw = localStorage.getItem('blurSfw') === 'true';
+      const blurUntagged = localStorage.getItem('blurUntagged') === 'true';
+      
+      let shouldBlurThis = false;
+      if (mode === 'nsfw') shouldBlurThis = blurNsfw;
+      else if (mode === 'nsfl') shouldBlurThis = blurNsfl;
+      else if (mode === 'sfw') shouldBlurThis = blurSfw;
+      else if (mode === 'untagged') shouldBlurThis = blurUntagged;
+      
+      if (shouldBlurThis && !mediaObj.classList.contains('revealed')) {
+        isBlurredDetail = true;
+      }
+    }
+
     // Attempt autoplay and show overlay if blocked
-    const shouldAutoplay = window.f0ckSession?.disable_autoplay !== true;
+    const shouldAutoplay = !isBlurredDetail && window.f0ckSession?.disable_autoplay !== true;
     if (shouldAutoplay) {
       const playPromise = togglePlay();
       if (playPromise !== undefined) {