img {
    height: auto;
    margin: 10px auto;
    max-width: 100%;
}
/* Overlay */
.stories-lightbox[hidden] { display: none !important; }
.stories-lightbox {
    position: fixed; inset: 0; z-index: 9999;
}
.stories-backdrop {
    position: absolute; inset: 0; background: rgba(0,0,0,.85);
}

/* Dialog */
.stories-dialog {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    pointer-events: none; /* allow stage to receive pointer */
}
.stories-stage {
    position: relative; width: min(92vw, 900px); height: min(92vh, 88vh);
    display: flex; align-items: center; justify-content: center;
    background: #000; border-radius: 12px; overflow: hidden;
    pointer-events: auto;
}

/* Media */
#storyImage, #storyVideo {
    max-width: 100%; max-height: 100%;
    width: auto; height: auto; display: none;
    object-fit: contain; background: #000;
}

/* Badges / caption */
.story-since {
    position: absolute; top: 12px; right: 12px;
    background: rgba(81,81,81,.9); color:#fff; padding: 4px 10px;
    border-radius: 10px; font-size: 12px; box-shadow: -2px 2px 5px #000;
}
.story-caption {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: linear-gradient(transparent, rgba(0,0,0,.65));
    color: #fff; padding: 14px; font-size: 14px;
}

/* Controls */
.stories-close {
    position: absolute; top: 10px; right: 14px;
    width: 36px; height: 36px; border: 0; border-radius: 50%;
    background: rgba(255,255,255,.15); color: #fff; font-size: 22px;
    cursor: pointer; pointer-events: auto;
}
.stories-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border: 0; border-radius: 50%;
    background: rgba(255,255,255,.15); color: #fff; font-size: 26px;
    cursor: pointer; pointer-events: auto;
}
.stories-nav.prev { left: 18px; }
.stories-nav.next { right: 18px; }
.stories-nav:hover, .stories-close:hover { background: rgba(255,255,255,.28); }