/* Sitewide share modal — dark overlay + centered dialog, same flat
   monochrome/sharp-corner language as the rest of the site (hairline
   borders, muted-until-hover text, no color). Built once, reused by
   any page that includes this file + js/share-modal.js. */
.share-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
.share-modal.active {
    opacity: 1;
    visibility: visible;
}

.share-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 560px;
    background: #000;
    border: 1px solid rgba(255,255,255,0.14);
    padding: 40px;
    box-sizing: border-box;
    transform: translateY(8px) scale(0.98);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.share-modal-dialog:focus { outline: none; }
.share-modal.active .share-modal-dialog {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.share-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color 0.15s;
}
.share-modal-close svg { width: 18px; height: 18px; fill: currentColor; }
.share-modal-close:hover { color: var(--color-text-primary); }

/* Rich preview — the same title/description/image a social platform
   would unfurl for this link, so whoever's sharing sees what the
   recipient will land on before they send it. */
.share-modal-preview {
    display: flex;
    gap: 20px;
    align-items: center;
    margin: 0 36px 24px 0;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}
.share-modal-preview-image {
    flex-shrink: 0;
    width: 76px;
    height: 76px;
    border-radius: 2px;
    background-color: rgba(255,255,255,0.04);
    background-size: cover;
    background-position: center;
}
.share-modal-preview-text {
    min-width: 0;
    flex: 1;
}
.share-modal-preview-title {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.share-modal-preview-desc {
    margin-top: 6px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--color-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Plain readonly text — click/focus selects it all, so Cmd/Ctrl+C
   works as a manual alternative alongside the one-click Copy Link
   option below, same dual affordance GitHub/Figma's share dialogs
   give you. */
.share-modal-url-row {
    margin-bottom: 24px;
}
.share-modal-url-input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.14);
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.01em;
    cursor: text;
}
.share-modal-url-input:focus {
    outline: none;
    border-color: rgba(255,255,255,0.4);
}
/* Fires on both copy paths — the Copy Link button and a manual
   Cmd/Ctrl+C out of the field itself — so whichever one someone uses,
   the field visibly acknowledges it rather than only the button label. */
.share-modal-url-input.is-copied {
    border-color: rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.08);
    transition: border-color 0.15s, background 0.15s;
}

/* One unified line of options — same plain-text, middot-separated
   language as the player's own footer meta strip, rather than a
   stacked list of individually-boxed rows. Icons dropped here so every
   item reads the same way regardless of whether it happens to have
   one (Copy Link, Share…) or not (X, LinkedIn, Email). */
.share-modal-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.share-modal-opt {
    display: inline;
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    transition: color 0.15s;
}
.share-modal-opt:hover { color: var(--color-text-primary); }
/* Author-stylesheet display above otherwise beats the browser's own
   [hidden] { display:none } UA rule (author origin always wins over
   user-agent origin, regardless of specificity) — without this,
   toggling .hidden via JS silently did nothing and Share… stayed
   visible even on browsers with no navigator.share to back it. */
.share-modal-opt[hidden] { display: none; }
/* :not([hidden]) on both sides — a middot before every visible option
   except the first one actually visible, rather than before every
   option unconditionally (which would strand a leading separator when
   Share… is hidden, since it's the first child regardless). */
.share-modal-opt:not([hidden]) ~ .share-modal-opt:not([hidden])::before {
    content: '·';
    margin: 0 10px;
    color: rgba(255,255,255,0.25);
}

/* Native Share is the platform's own, usually-best option wherever it's
   available (mobile, mostly) — same active-tab underline language as
   .browse-tab.active on the search page, rather than looking like just
   another item in the row when it's actually worth reaching for first. */
.share-modal-opt[data-action="native"] {
    color: var(--color-text-primary);
    border-bottom: 2px solid rgba(255,255,255,0.45);
    padding-bottom: 6px;
}
.share-modal-opt[data-action="native"]:hover {
    border-bottom-color: rgba(255,255,255,0.75);
}

@media (max-width: 480px) {
    .share-modal-dialog { padding: 24px; }
    .share-modal-preview { margin-right: 24px; }
    .share-modal-preview-image { width: 60px; height: 60px; }
    .share-modal-options { row-gap: 8px; }
    .share-modal-opt:not([hidden]) ~ .share-modal-opt:not([hidden])::before { margin: 0 8px; }
}