/* Discord / TikTok / Instagram links, shared by every page.
 *
 *   .nav-social           right end of the top nav bar (every site page + game)
 *   .mobile-menu-social   bottom row of the ☰ menu on phones
 *   .social-links--title  big row on the start screen (index.html)
 *   .social-links--card   row inside the game's envelope panel (game.php)
 *
 * Each link is a round brand-colored button holding a white logo
 * (images/ui/social/*.svg, from Simple Icons, CC0).
 */

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    box-sizing: border-box;
    border-radius: 50%;
    text-decoration: none;
    transition: transform 0.15s, filter 0.15s;
}

.social-link img {
    width: 56%;
    height: 56%;
    display: block;
    pointer-events: none;
}

.social-link:hover,
.social-link:focus-visible {
    transform: scale(1.1);
    filter: brightness(1.1);
}

.social-link--discord   { background: #5865f2; }
.social-link--tiktok    { background: #111111; }
.social-link--instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }

/* ---- Top nav bar ------------------------------------------------------- */
.navBar .nav-social {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    flex: none;
}

/* Beats each page's ".navBar a { flex: 1; padding... }" */
.navBar .nav-social a.social-link {
    display: inline-flex;
    flex: none;
    width: 28px;
    height: 28px;
    padding: 0;
}

.navBar .nav-social a.social-link:hover {
    background-color: inherit;
}
.navBar .nav-social a.social-link--discord:hover   { background: #5865f2; }
.navBar .nav-social a.social-link--tiktok:hover    { background: #111111; }
.navBar .nav-social a.social-link--instagram:hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }

/* ---- ☰ menu on phones -------------------------------------------------- */
.mobile-menu .mobile-menu-social {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 10px 14px;
}

.mobile-menu .mobile-menu-social a.social-link {
    display: inline-flex;
    width: 34px;
    height: 34px;
    padding: 0;
    border-bottom: none;
}

/* ---- Start screen ------------------------------------------------------ */
.social-links--title {
    position: absolute;
    left: 50%;
    bottom: 7%;
    transform: translateX(-50%);
    display: flex;
    gap: 16px;
    height: 60px;            /* same height as Start / Play as Guest */
    align-items: center;
}

.social-links--title .social-link {
    width: 52px;
    height: 52px;
    border: 3px solid #ffffff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

/* ---- Envelope panel in the game ---------------------------------------- */
.social-links--card {
    display: flex;
    gap: 10px;
    margin-top: 6px;
}

.social-links--card .social-link {
    width: 36px;
    height: 36px;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}