.users-wrapper,
.user-profile-wrapper {
    box-sizing: border-box;
    max-width: 760px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: Arial, sans-serif;
    width: 100%;
}

.users-title {
    color: #243c5a;
    font-family: "Comic Sans MS", sans-serif;
    margin: 0 0 12px;
}

.profile-name-line .users-title {
    margin: 0;
}

.users-intro,
.users-status {
    color: #444;
    font-size: 16px;
    line-height: 1.5;
}

.users-list {
    list-style: none;
    margin: 24px 0;
    padding: 0;
}

.users-list li {
    background: linear-gradient(110deg, #fff, #f8fbff);
    border: 1px solid #d5e1ef;
    border-radius: 10px;
    box-shadow: 0 3px 0 #dce6f1;
    margin-bottom: 14px;
    padding: 16px 18px;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.users-list li:hover {
    box-shadow: 0 5px 0 #d1deed;
    transform: translateY(-2px);
}

.users-list a {
    color: #315f91;
    font-family: "Comic Sans MS", sans-serif;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
}

.users-list a:hover {
    text-decoration: underline;
}

.user-profile-card {
    background: linear-gradient(145deg, #fff 0%, #f8fbff 100%);
    border: 1px solid #d5e1ef;
    border-radius: 14px;
    box-shadow: 0 6px 0 #dce6f1, 0 16px 30px rgba(48, 76, 109, 0.09);
    padding: 32px;
}

.user-id,
.user-bio {
    color: #333;
    font-size: 15px;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.connection-counts {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 18px 0;
}

.connection-count {
    align-items: baseline;
    background: #f2f7fd;
    border: 1px solid #d5e1ef;
    border-radius: 8px;
    color: #345d8c;
    display: inline-flex;
    gap: 5px;
    padding: 7px 11px;
    text-decoration: none;
}

.connection-count:hover {
    background: #e8f1fb;
}

.connection-count strong {
    color: #243c5a;
}

.relationship-actions {
    align-items: center;
    border-bottom: 1px solid #e2eaf3;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 16px 0;
    padding-bottom: 17px;
}

.relationship-actions[hidden] {
    display: none;
}

.social-action-button {
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: #345d8c;
    cursor: pointer;
    font: bold 15px "Comic Sans MS", sans-serif;
    padding: 5px 0;
}

.social-action-button:hover {
    background: transparent;
    color: #1f4775;
    text-decoration: underline;
}

.social-action-button.secondary {
    background: transparent;
    box-shadow: none;
    border: 0;
    color: #345d8c;
}

.relationship-actions > * + *::before {
    border-left: 1px solid #c7d5e5;
    content: "";
    height: 16px;
    margin: 0 12px;
}

.social-state,
.relationship-status {
    color: #566a80;
    font: 13px Arial, sans-serif;
}

.connections-back {
    color: #507cad;
    display: inline-block;
    font: bold 13px Arial, sans-serif;
    margin-bottom: 16px;
    text-decoration: none;
}

.connections-back:hover {
    text-decoration: underline;
}

.role-badge-icon {
    height: 17px;
    margin-left: 8px;
    object-fit: contain;
    vertical-align: middle;
    width: 17px;
}

.role-badge-icon.admin {
    filter: invert(38%) sepia(51%) saturate(650%) hue-rotate(174deg) brightness(88%) contrast(90%);
}

.role-badge-icon.moderator {
    filter: invert(43%) sepia(56%) saturate(650%) hue-rotate(83deg) brightness(88%) contrast(90%);
}

.bio-heading {
    border-bottom: 2px solid #507cad;
    color: #333;
    font-family: "Comic Sans MS", sans-serif;
    margin-top: 28px;
    padding-bottom: 8px;
}

.user-bio {
    min-height: 48px;
    white-space: pre-wrap;
}

.bio-editor {
    border-top: 2px solid #ddd;
    margin-top: 28px;
    padding-top: 20px;
}

.bio-editor label {
    color: #333;
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
}

.bio-editor textarea {
    border: 1px solid #b9cce1;
    border-radius: 8px;
    box-sizing: border-box;
    font: 15px Arial, sans-serif;
    min-height: 130px;
    padding: 10px;
    resize: vertical;
    width: 100%;
}

.bio-editor textarea:focus {
    border-color: #6498d2;
    box-shadow: 0 0 0 3px rgba(100, 152, 210, 0.17);
    outline: none;
}

.bio-editor button {
    margin-top: 12px;
}

.bio-save-status {
    min-height: 1.4em;
    color: #333;
    font-size: 14px;
}

.signed-out-message {
    margin: 50px auto;
    max-width: 500px;
}

@media (max-width: 600px) {
    .user-profile-card {
        padding: 22px;
    }
}/* Online status indicator */
.status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
}
.status-dot.online {
    background-color: #4CAF50;
    box-shadow: 0 0 4px #4CAF50;
}
.status-dot.offline {
    background-color: #ccc;
}
.status-text {
    font-size: 13px;
    font-weight: normal;
    color: #555;
}

/* ── Profile page ───────────────────────────────────────── */
.profile-hero {
    display: grid;
    gap: 28px;
    grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
    padding: 22px;
}

.profile-stage {
    align-items: center;
    background:
        radial-gradient(ellipse at 50% 88%, rgba(94, 145, 204, 0.2), transparent 62%),
        linear-gradient(180deg, #f7fbff 0%, #e6f0fb 100%);
    border: 1px solid var(--line);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 10px 16px;
}

.profile-canvas { aspect-ratio: 3 / 4; cursor: grab; display: block; width: 100%; }
.profile-canvas:active { cursor: grabbing; }

.profile-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding-top: 6px; }
.profile-main .profile-heading-line { align-items: center; display: flex; flex-wrap: wrap; gap: 10px 14px; }
.profile-main .page-title { overflow-wrap: anywhere; }
.profile-main .user-id { color: var(--muted); font-size: 14px; margin: -4px 0 0; }

.presence { align-items: center; color: var(--muted); display: inline-flex; font-size: 14px; font-weight: bold; gap: 6px; }

.role-pill {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font: bold 13px/1 Arial, sans-serif;
    gap: 6px;
    padding: 6px 10px;
}

.role-pill img { height: 15px; width: 15px; }
.role-pill.admin { background: #e5eefa; color: #315f91; }
.role-pill.admin img { filter: invert(38%) sepia(51%) saturate(650%) hue-rotate(174deg) brightness(88%) contrast(90%); }
.role-pill.moderator { background: #e3f5e6; color: #23702f; }
.role-pill.moderator img { filter: invert(43%) sepia(56%) saturate(650%) hue-rotate(83deg) brightness(88%) contrast(90%); }

.profile-counts { display: flex; flex-wrap: wrap; gap: 10px; }

.profile-count {
    background: var(--wash);
    border-radius: 12px;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 96px;
    padding: 10px 14px;
    text-decoration: none;
}

.profile-count strong { color: var(--ink); font-size: 22px; }
.profile-count span { font-size: 13px; text-transform: capitalize; }
.profile-count:hover { background: #dce9f8; }

.profile-main .relationship-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; }
.profile-about { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 16px; }
.profile-about .user-bio { color: var(--text); font-size: 16px; line-height: 1.6; margin: 8px 0 0; white-space: pre-line; }
.profile-about .user-bio.empty { color: var(--muted); font-style: italic; }

@media (max-width: 760px) {
    .profile-hero { grid-template-columns: minmax(0, 1fr); }
    .profile-stage { margin: 0 auto; max-width: 320px; width: 100%; }
}
.profile-main .relationship-actions { border-bottom: 0; margin: 0; padding-bottom: 0; }
.profile-main .relationship-actions > * + *::before { content: none; }
.profile-main .relationship-status:empty { display: none; }
.profile-main .social-state { color: var(--green-dark); font: bold 14px Arial, sans-serif; }
.user-grid { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); margin-top: 6px; }
.page .back-link { color: var(--brand); display: inline-block; font-weight: bold; margin-bottom: 12px; text-decoration: none; }

/* ── 0.7.6: badges, Games / Creations tabs ─────────────────── */
.badge-list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); list-style: none; margin: 0; padding: 0; }
.badge-card {
    align-items: center;
    background: #fff;
    border: 1px solid #c9d3df;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 8px;
    text-align: center;
}
.badge-card img { height: 64px; image-rendering: auto; width: 64px; }
.badge-card strong { color: var(--ink); font-size: 14px; }
.badge-card span { color: var(--muted); font-size: 12px; line-height: 1.35; }
.badge-card small { color: #8a96a3; font-size: 11px; }
.user-joined { color: var(--muted); }
.profile-tabs { margin-bottom: 14px; width: fit-content; }
.creation-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.creation-filters button {
    background: linear-gradient(180deg, #fff, #ececec);
    border: 1px solid #b5b5b5;
    border-radius: 3px;
    color: #333;
    cursor: pointer;
    font: bold 11px/1 Verdana, sans-serif;
    padding: 5px 9px;
}
.creation-filters button[aria-pressed="true"] { background: #316ac5; border-color: #1f4f9a; color: #fff; }

/* 0.8.0: game badges on game pages */
.badge-card.owned { border-color: #6c98cf; background: #f1f7ff; }
.badge-card.off img { filter: grayscale(1); opacity: 0.6; }