diff --git a/script.js b/script.js
index 4ad39e1..94ca021 100644
--- a/script.js
+++ b/script.js
@@ -56,11 +56,11 @@
     root.innerHTML =
       '<div class="luxtools-lightbox-backdrop" data-luxtools-action="close"></div>' +
       '<div class="luxtools-lightbox-stage">' +
-        '<button type="button" class="luxtools-lightbox-btn luxtools-lightbox-close" data-luxtools-action="close" aria-label="Close">×</button>' +
-        '<button type="button" class="luxtools-lightbox-btn luxtools-lightbox-prev" data-luxtools-action="prev" aria-label="Previous">‹</button>' +
-        '<img class="luxtools-lightbox-img" alt="" />' +
-        '<button type="button" class="luxtools-lightbox-btn luxtools-lightbox-next" data-luxtools-action="next" aria-label="Next">›</button>' +
-        '<button type="button" class="luxtools-lightbox-btn luxtools-lightbox-opennew" data-luxtools-action="newtab" aria-label="Open in new tab">↗</button>' +
+        '<div class="luxtools-lightbox-media">' +
+          '<img class="luxtools-lightbox-img" alt="" />' +
+          '<button type="button" class="luxtools-lightbox-zone luxtools-lightbox-zone-prev" data-luxtools-action="prev" aria-label="Previous"></button>' +
+          '<button type="button" class="luxtools-lightbox-zone luxtools-lightbox-zone-next" data-luxtools-action="next" aria-label="Next"></button>' +
+        '</div>' +
         '<div class="luxtools-lightbox-caption"></div>' +
       '</div>';
 
@@ -109,16 +109,6 @@
       cap.textContent = (it.name || '').trim();
     }
 
-    function openInNewTab() {
-      var it = items[index];
-      if (!it || !it.full) return;
-      try {
-        window.open(it.full, '_blank', 'noopener');
-      } catch (e) {
-        // ignore
-      }
-    }
-
     function close() {
       lb.classList.remove('is-open');
       lb.setAttribute('aria-hidden', 'true');
@@ -176,13 +166,12 @@
       var t = e.target;
       if (!t || !t.getAttribute) return;
       var action = t.getAttribute('data-luxtools-action') || '';
-      if (action === 'close') { e.preventDefault(); close(); }
-      if (action === 'next') { e.preventDefault(); next(); }
-      if (action === 'prev') { e.preventDefault(); prev(); }
-      if (action === 'newtab') { e.preventDefault(); openInNewTab(); }
+      if (action === 'close') { e.preventDefault(); close(); return; }
+      if (action === 'next') { e.preventDefault(); next(); return; }
+      if (action === 'prev') { e.preventDefault(); prev(); return; }
 
       // Click outside the image closes (but don't interfere with controls).
-      if (t.closest && t.closest('button.luxtools-lightbox-btn')) return;
+      if (t.closest && t.closest('button.luxtools-lightbox-zone')) return;
       if (t.closest && t.closest('img.luxtools-lightbox-img')) return;
       e.preventDefault();
       close();
diff --git a/style.css b/style.css
index 3036892..11f3fed 100644
--- a/style.css
+++ b/style.css
@@ -210,11 +210,22 @@ html.luxtools-noscroll body {
     padding: 0.8em;
 }
 
-.luxtools-lightbox img.luxtools-lightbox-img {
+.luxtools-lightbox .luxtools-lightbox-media {
+    position: relative;
+    display: inline-block;
     max-width: 100%;
     max-height: 100%;
 }
 
+.luxtools-lightbox img.luxtools-lightbox-img {
+    display: block;
+    /* Use viewport constraints so tall images always fit.
+     * Percent max-height is unreliable here because the wrapper doesn't have a fixed height.
+     */
+    max-width: calc(100vw - 1.6em);
+    max-height: calc(100vh - 1.6em);
+}
+
 .luxtools-lightbox .luxtools-lightbox-caption {
     position: absolute;
     left: 0;
@@ -230,64 +241,67 @@ html.luxtools-noscroll body {
     text-align: center;
 }
 
-/* Top-left "open in new tab" button. */
-.luxtools-lightbox button.luxtools-lightbox-opennew {
-    left: 0.6em;
-    top: 0.6em;
-    bottom: auto;
-    width: 2.4em;
-    height: 2.4em;
-    background: transparent;
-    border: none;
-    border-radius: 0.2em;
-    z-index: 2;
-}
-
-
-.luxtools-lightbox button.luxtools-lightbox-btn {
+/* Image-anchored prev/next zones.
+ * These are sized relative to the displayed image (not the viewport) and show
+ * a subtle indicator only on hover/focus.
+ */
+.luxtools-lightbox button.luxtools-lightbox-zone {
     position: absolute;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #fff;
-}
-
-/* Navigation: transparent left/right tap zones (default everywhere). */
-.luxtools-lightbox button.luxtools-lightbox-prev,
-.luxtools-lightbox button.luxtools-lightbox-next {
     top: 0;
     bottom: 0;
-    width: 30%;
+    width: 25%;
     background: transparent;
     border: none;
     padding: 0;
-    font-size: 2em;
-    color: rgba(255, 255, 255, 0.7);
+    cursor: pointer;
 }
 
-.luxtools-lightbox button.luxtools-lightbox-prev {
+.luxtools-lightbox button.luxtools-lightbox-zone-prev {
     left: 0;
 }
 
-.luxtools-lightbox button.luxtools-lightbox-next {
+.luxtools-lightbox button.luxtools-lightbox-zone-next {
     right: 0;
 }
 
-/* Close button overlays content. */
-.luxtools-lightbox button.luxtools-lightbox-close {
-    top: 0.6em;
-    right: 0.6em;
-    width: 2.2em;
-    height: 2.2em;
-    background: transparent;
-    border: none;
-    z-index: 2;
+.luxtools-lightbox button.luxtools-lightbox-zone::after {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 3em;
+    line-height: 1;
+    display: inline-flex;
+    justify-content: center;
+    box-sizing: border-box;
+    min-height: 1.1em;
+    color: rgba(255, 255, 255, 0.95);
+    background: rgba(0, 0, 0, 0.35);
+    border: 1px solid rgba(255, 255, 255, 0.25);
+    border-radius: 999px;
+    padding: 0 0.28em;
+    text-shadow: 0 0 0.4em rgba(0, 0, 0, 0.9);
+    opacity: 0;
+    transition: opacity 120ms ease-in-out;
+    pointer-events: none;
+}
+
+.luxtools-lightbox button.luxtools-lightbox-zone-prev::after {
+    content: '‹';
+    left: 0.35em;
+}
+
+.luxtools-lightbox button.luxtools-lightbox-zone-next::after {
+    content: '›';
+    right: 0.35em;
+}
+
+.luxtools-lightbox button.luxtools-lightbox-zone:hover::after,
+.luxtools-lightbox button.luxtools-lightbox-zone:focus-visible::after {
+    opacity: 1;
 }
 
 @media (max-width: 600px) {
-    .luxtools-lightbox button.luxtools-lightbox-prev,
-    .luxtools-lightbox button.luxtools-lightbox-next {
-        font-size: 1.6em;
+    .luxtools-lightbox button.luxtools-lightbox-zone::after {
+        font-size: 2.4em;
     }
 }