diff --git a/script.js b/script.js
index 94ca021..4f12933 100644
--- a/script.js
+++ b/script.js
@@ -56,10 +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-close" data-luxtools-action="close" aria-label="Close">×</button>' +
+        '<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 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>';
@@ -106,7 +107,7 @@
       var it = items[index];
       img.src = it.full;
       img.setAttribute('data-luxtools-index', String(index));
-      cap.textContent = (it.name || '').trim();
+      if (cap) cap.textContent = (it.name || '').trim();
     }
 
     function close() {
diff --git a/style.css b/style.css
index 43eb983..88592cd 100644
--- a/style.css
+++ b/style.css
@@ -295,17 +295,22 @@ html.luxtools-noscroll body {
 
 .luxtools-lightbox .luxtools-lightbox-caption {
     position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    padding: 0.6em 1em;
-    color: #fff;
-    opacity: 0.9;
-    background: rgba(0, 0, 0, 0.35);
+    left: 50%;
+    bottom: 1.2em;
+    transform: translateX(-50%);
+    display: block;
+    max-width: 60rem;
+    padding: 0.4em 0.8em;
+    color: rgba(255, 255, 255, 0.95);
+    background: rgba(0, 0, 0, 0.45);
+    border-radius: 0.4em;
+    font-size: 0.9em;
+    line-height: 1.35;
+    text-align: center;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    text-align: center;
+    pointer-events: none;
 }
 
 /* Image-anchored prev/next zones.
@@ -314,6 +319,7 @@ html.luxtools-noscroll body {
  */
 .luxtools-lightbox button.luxtools-lightbox-zone {
     position: absolute;
+    z-index: 2;
     top: 0;
     bottom: 0;
     width: 25%;
@@ -337,15 +343,7 @@ html.luxtools-noscroll body {
     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;
@@ -367,6 +365,26 @@ html.luxtools-noscroll body {
     opacity: 1;
 }
 
+/* Top-right close button. */
+.luxtools-lightbox button.luxtools-lightbox-close {
+    position: absolute;
+    top: 0.8em;
+    right: 0.8em;
+    z-index: 3;
+    color: rgba(255, 255, 255, 0.95);
+    text-shadow: 0 0 0.4em rgba(0, 0, 0, 0.9);
+    background: transparent;
+    border: none;
+    font-size: 2.5em;
+    cursor: pointer;
+}
+
+.luxtools-lightbox button.luxtools-lightbox-close:hover,
+.luxtools-lightbox button.luxtools-lightbox-close:focus-visible {
+    background: rgba(0, 0, 0, 0.60);
+    border-radius: 999px;
+}
+
 @media (max-width: 600px) {
     .luxtools-lightbox button.luxtools-lightbox-zone::after {
         font-size: 2.4em;