/* ShareableGraphic — Fullscreen dark overlay for shareable graphics */

.sg-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9999;
    background: #0d0d0d;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.sg-capture-area {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 16px 40px;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* iOS browser fallback — Fullscreen API not supported */
.sg-overlay.sg-ios-fallback {
    height: 100dvh;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.sg-overlay.sg-ios-fallback .sg-capture-area {
    padding-top: max(28px, env(safe-area-inset-top, 28px));
    padding-bottom: max(40px, env(safe-area-inset-bottom, 40px));
}