diff --git a/public/s/css/f0ckm.css b/public/s/css/f0ckm.css
index 778681b..e6a347c 100644
--- a/public/s/css/f0ckm.css
+++ b/public/s/css/f0ckm.css
@@ -4855,6 +4855,41 @@ body.layout-legacy.sidebar-right-hidden .embed-responsive-16by9::before {
     }
 }
 
+/* ─── JS-driven DPR fallbacks (Firefox ignores zoom in CSS dppx queries) ─── */
+/* These mirror the @media resolution rules above using [data-dpr] set by JS  */
+
+/* ~105–115% zoom */
+html[data-dpr="dpr-110"] body.layout-modern .embed-responsive-16by9::before {
+  padding-top: 46.25%;
+}
+
+/* ~120–125% zoom */
+html[data-dpr="dpr-120"] body.layout-modern .embed-responsive-16by9::before {
+  padding-top: 41.25%;
+}
+
+/* ~126–138% zoom */
+html[data-dpr="dpr-130"] body.layout-legacy .embed-responsive-16by9::before {
+  padding-top: 41.25%;
+}
+html[data-dpr="dpr-130"] body.layout-modern .embed-responsive-16by9::before {
+  padding-top: 41.25%;
+}
+html[data-dpr="dpr-130"] body.layout-modern.sidebar-right-hidden .embed-responsive-16by9::before {
+  padding-top: 41.25%;
+}
+html[data-dpr="dpr-130"] body.layout-legacy.sidebar-right-hidden .embed-responsive-16by9::before {
+  padding-top: 41.25%;
+}
+
+/* ~139–154% zoom (the 150% tier) */
+html[data-dpr="dpr-150"] body.layout-legacy .embed-responsive-16by9::before {
+  padding-top: 36.25%;
+}
+html[data-dpr="dpr-150"] body.layout-legacy.sidebar-right-hidden .embed-responsive-16by9::before {
+  padding-top: 36.25%;
+}
+
 .embed-responsive-4by3::before {
   padding-top: 75%;
 }
diff --git a/public/s/js/f0ckm.js b/public/s/js/f0ckm.js
index 4ca0eba..1486889 100644
--- a/public/s/js/f0ckm.js
+++ b/public/s/js/f0ckm.js
@@ -54,6 +54,32 @@ window.cancelAnimFrame = (function () {
   if (ua.includes('Chrome')) htmlEl.classList.add('is-chrome');
   if (ua.includes('Safari') && !ua.includes('Chrome')) htmlEl.classList.add('is-safari');
 
+  // DPR / zoom-level detection — works in Firefox (which ignores zoom in CSS dppx queries)
+  const _updateDprTier = () => {
+    const dpr = window.devicePixelRatio || 1;
+    // Tiers mirror the CSS resolution media-query breakpoints
+    let tier = 'dpr-1x';                         // 1.0 – 1.04
+    if      (dpr >= 1.55) tier = 'dpr-high';      // ≥ 155% zoom
+    else if (dpr >= 1.39) tier = 'dpr-150';       // ~140–154% zoom
+    else if (dpr >= 1.26) tier = 'dpr-130';       // ~126–138%
+    else if (dpr >= 1.20) tier = 'dpr-120';       // ~120–125%
+    else if (dpr >= 1.05) tier = 'dpr-110';       // ~105–115%
+    htmlEl.setAttribute('data-dpr', tier);
+  };
+  _updateDprTier();
+  // Re-evaluate when the user changes zoom (fires on every DPR change)
+  if (window.matchMedia) {
+    let _dprMql = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
+    const _onDprChange = () => {
+      _updateDprTier();
+      // Re-bind to the NEW dpr value so we catch the next change too
+      _dprMql.removeEventListener('change', _onDprChange);
+      _dprMql = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
+      _dprMql.addEventListener('change', _onDprChange);
+    };
+    _dprMql.addEventListener('change', _onDprChange);
+  }
+
   if (localStorage.getItem('blurNsfw') === 'true') htmlEl.classList.add('blur-nsfw-active');
   if (localStorage.getItem('blurNsfl') === 'true') htmlEl.classList.add('blur-nsfl-active');
   if (localStorage.getItem('blurSfw') === 'true') htmlEl.classList.add('blur-sfw-active');