/* Actual-size image lightbox — the shared full-screen "blow it up with a big X" viewer opened by
   image_lightbox.js (window.openImageLightbox). This is the single source of truth for its look,
   loaded by every page that uses the viewer (index.html clip thumbnails, screenshot viewer, and the
   clips.html "Your clips" table). A scrollable full-viewport overlay showing the image at 1:1, with a
   big frosted X pinned to the top-right; sits above any modal card. */
.ss-zoom { position:fixed; inset:0; z-index:720; overflow:auto; background:rgba(6,8,12,0.94); }
.ss-zoom[hidden] { display:none; }
.ss-zoom-scroll { min-height:100%; display:flex; align-items:flex-start; justify-content:center; padding:24px; box-sizing:border-box; }
.ss-zoom-img { display:block; image-rendering:auto; }
.ss-zoom-x { position:fixed; top:24px; right:24px; z-index:721; display:inline-flex; align-items:center; justify-content:center; width:80px; height:80px; border:0; border-radius:50%; background:rgba(255,255,255,0.1); color:#fff; font-size:30px; line-height:1; cursor:pointer; box-shadow:0 3px 14px rgba(0,0,0,0.5); transition:background 0.15s, transform 0.08s; }
/* Frosted blur lives on a pseudo-element that overshoots the circle by 16px so the
   blur samples pixels from *around* the button, then a radial mask trims it back to
   the rim. A plain backdrop-filter only sees the pixels directly behind the element,
   so its blur goes weak at the edges. https://www.joshwcomeau.com/css/backdrop-filter/ */
.ss-zoom-x::before { content:''; position:absolute; inset:-16px; z-index:-1; border-radius:50%; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); -webkit-mask:radial-gradient(circle, #000 39px, transparent 40px); mask:radial-gradient(circle, #000 39px, transparent 40px); pointer-events:none; }
.ss-zoom-x:hover { background:rgba(231,76,60,0.85); }
.ss-zoom-x:active { transform:scale(0.94); }