.app-screenshot[role="button"] { cursor: pointer; }
.app-screenshot[role="button"]:focus-visible {
    outline: 3px solid #236cc8;
    outline-offset: 4px;
}

#screenshot-lightbox {
    --popupable-background: rgb(16 35 57 / 42%);
    --popupable-blur: 2px;
    --popupable-screen-padding: var(--screenshot-padding, 40px);
    --popupable-open-duration: .24s;
    --popupable-switch-duration: .25s;
    --popupable-open-easing: cubic-bezier(.2, .7, .2, 1);
    --popupable-switch-easing: cubic-bezier(.2, .7, .2, 1);
    --popupable-ui-background: rgb(25 47 70 / 72%);
    outline: none;
}

/* The screenshot keeps its complete 9:20 box. The bezel is outside that box. */
#screenshot-lightbox .popupable-clone-container {
    border: 0 !important;
    border-radius: clamp(8px, 1.5vh, 18px) !important;
    box-shadow: 0 0 0 8px #101820, 0 0 0 10px #78868e,
                0 18px 48px 12px rgb(8 23 39 / 35%) !important;
    background: #101820;
    cursor: pointer;
}
#screenshot-lightbox .popupable-clone,
#screenshot-lightbox .popupable-clone-layer { object-fit: contain; }

#screenshot-lightbox .popupable-button-container {
    width: 48px;
    height: 48px;
    padding: 0;
    top: 50%;
    transform: translateY(-50%);
    opacity: 1;
    pointer-events: auto;
    border-radius: 50%;
}
#screenshot-lightbox .popupable-prev-container {
    left: max(12px, calc(50% - var(--screenshot-width) / 2 - 78px));
    right: auto;
}
#screenshot-lightbox .popupable-next-container {
    right: max(12px, calc(50% - var(--screenshot-width) / 2 - 78px));
    left: auto;
}
#screenshot-lightbox .popupable-button-disabled { display: none; }
#screenshot-lightbox .popupable-close-container { display: none; }
#screenshot-lightbox .popupable-button {
    opacity: 1 !important;
    transform: none;
    width: 48px;
    height: 48px;
    padding: 12px;
    border: 1px solid rgb(255 255 255 / 30%);
    border-radius: 50%;
    box-shadow: 0 4px 14px rgb(8 23 39 / 25%);
    transition: background-color .15s ease;
}
#screenshot-lightbox .popupable-button svg { width: 24px; height: 24px; }
#screenshot-lightbox .popupable-button-container:hover .popupable-button {
    background: rgb(35 68 100 / 90%);
}
#screenshot-lightbox .popupable-button-container:focus-visible {
    outline: 3px solid white;
    outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
    #screenshot-lightbox {
        --popupable-open-duration: 0s;
        --popupable-switch-duration: 0s;
    }
    #screenshot-lightbox .popupable-button { transition: none; }
}