/* Gedeelde entrypoint voor alle uit de Vynli-HTML overgenomen stijlen. */
@import url("style.css?v=2");
@import url("footer.css");
@import url("post.css");
@import url("games-app.css");
@import url("account.css?v=2");

.game-app-page,
.game-flow-page,
.game-play-page,
.post-page {
    padding-top: var(--topbar-height);
}

.footer-language-menu {
    position: relative;
}

.footer-language-menu summary {
    list-style: none;
}

.footer-language-menu summary::-webkit-details-marker {
    display: none;
}

.footer-language-menu__options {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    min-width: 150px;
    max-height: min(70dvh, 440px);
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 14px 35px rgba(23, 42, 70, .14);
}

.footer-language-menu__options a {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 12px;
    color: #46536d;
    font-size: 12px;
}

.footer-language-menu__options a:hover,
.footer-language-menu__options a[aria-current="true"] {
    background: #eef4ff;
    color: var(--blue);
}

.global-feedback {
    position: fixed;
    top: calc(var(--topbar-height, 80px) + 1rem);
    left: 50%;
    z-index: 140;
    width: min(36rem, calc(100% - 2rem));
    transform: translateX(-50%);
    padding: .85rem 1rem;
    border: 1px solid #cfd3e1;
    border-radius: .75rem;
    background: #fff;
    box-shadow: 0 8px 30px rgba(24, 32, 56, .16);
    color: #303548;
    font: 500 .9rem/1.45 system-ui, sans-serif;
}

.global-feedback p { margin: 0; }
.global-feedback ul { margin: .35rem 0 0; padding-left: 1.25rem; }

.feed-avatar--you { display: grid; place-items: center; background-image: none; background-color: #edf4ff; color: #285ac0; font-weight: 600; }
.feed-post__body p, .post-comment__body p, .topic-article-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.profile-layout > *, .community-columns > * { min-width: 0; }
.feed-composer__options select { border: 1px solid #dce5f0; border-radius: 8px; background: #fff; color: #52647e; font: inherit; padding: 8px 12px; }

.user-avatar-image { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.user-avatar-image[hidden], [data-avatar-initials][hidden], .avatar.avatar--user > [data-avatar-initials][hidden] { display: none; }