/* ==========================================================================
   ETERNAL VOID - SOCIAL LINKS
   Quiet glass icons that pick up each network's colour on hover. Used in the
   HUD card, on the welcome screen and in Cosmic Console > Audio & Share.
   ========================================================================== */

.social-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.social-link, .social-card { --net: 167, 139, 250; }
[data-network="youtube"] { --net: 255, 78, 96; }
[data-network="instagram"] { --net: 236, 92, 170; }
[data-network="x"] { --net: 220, 220, 235; }

.social-row { pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.social-links { display: flex; align-items: center; gap: 8px; }
.social-label { font: 600 9.5px var(--font-display); letter-spacing: 1.6px; color: var(--text-muted); white-space: nowrap; }

.social-link {
    pointer-events: auto;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015) 70%);
    color: var(--text-secondary);
    transition: color 0.2s ease, border-color 0.2s ease, background 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}
.social-link svg { width: 18px; height: 18px; }
.social-link:hover, .social-link:focus-visible {
    color: #fff;
    transform: translateY(-1px);
    border-color: rgba(var(--net), 0.75);
    background: radial-gradient(circle at 50% 30%, rgba(var(--net), 0.38), rgba(var(--net), 0.08) 72%);
    box-shadow: 0 0 16px rgba(var(--net), 0.45), inset 0 0 8px rgba(var(--net), 0.25);
}
.social-link:focus-visible { outline: 2px solid var(--text-accent); outline-offset: 2px; }

/* HUD card: a thin divider, label left, icons right. */
.hud-social { margin-top: 2px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.06); }

/* Welcome screen: centred, with a soft fade-in. */
.splash-social { justify-content: center; margin-top: 6px; }
.splash-social .social-link { width: 40px; height: 40px; opacity: 0.85; }
.splash-social .social-link:hover { opacity: 1; }

/* Console cards */
.social-cards { display: flex; flex-direction: column; gap: 6px; }
.social-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px 9px 9px;
    border-radius: 12px;
    border: 1px solid var(--border-glass);
    background: rgba(255, 255, 255, 0.025);
    color: var(--text-primary);
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.social-card-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: rgb(var(--net));
    background: rgba(var(--net), 0.12);
    border: 1px solid rgba(var(--net), 0.3);
}
.social-card-icon svg { width: 18px; height: 18px; }
.social-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.social-card-text strong { font: 600 12.5px var(--font-display); letter-spacing: 0.3px; }
.social-card-text small { font-size: 10.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.social-card-arrow { color: var(--text-muted); font-size: 13px; transition: transform 0.2s ease, color 0.2s ease; }
.social-card:hover, .social-card:focus-visible {
    border-color: rgba(var(--net), 0.55);
    background: linear-gradient(100deg, rgba(var(--net), 0.13), rgba(255, 255, 255, 0.02) 70%);
    box-shadow: 0 0 18px rgba(var(--net), 0.16);
}
.social-card:hover .social-card-arrow { color: rgb(var(--net)); transform: translate(2px, -2px); }
.social-card:focus-visible { outline: 2px solid var(--text-accent); outline-offset: 2px; }

@media (pointer: coarse) {
    .social-link { width: 44px; height: 44px; }
}
/* Short landscape screens: keep the HUD row compact. */
@media (orientation: landscape) and (max-height: 540px) {
    .hud-social { padding-top: 8px; }
    .hud-social .social-link { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
    .social-link, .social-card, .social-card-arrow { transition: none; }
}

/* Email signup in Cosmic Console > Audio & Share */
.ev-list-form { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.ev-list-label { font: 600 11px var(--font-display); letter-spacing: 0.4px; color: var(--text-secondary); }
.ev-list-row { display: flex; gap: 6px; }
.ev-list-row input[type="email"] { flex: 1; min-width: 0; height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); color: var(--text-primary, #eee); font: 12px var(--font-body, inherit); }
.ev-list-row input[type="email"]:focus-visible { outline: 2px solid rgba(167, 139, 250, 0.7); outline-offset: 1px; }
.ev-list-row .btn { flex: 0 0 auto; padding: 0 14px; height: 32px; font-size: 11px; }
.ev-list-status { margin: 0; font-size: 10.5px; color: var(--text-muted); line-height: 1.5; }
.ev-list-status a { color: inherit; text-decoration: underline; }