/* ============================================================
   WHISTAO - Social : profil, suivi, notifications, cloche
   ============================================================ */

/* Pseudos cliquables */
.clickable-name {
    cursor: pointer;
    text-decoration: underline dotted rgba(212, 168, 71, 0.6);
    text-underline-offset: 2px;
    transition: color 0.15s;
}
.clickable-name:hover { color: var(--gold-light, #e8c96a); }

/* ─── Popin profil ─────────────────────────────────────── */
.profile-overlay { z-index: 4000; }
.profile-popin {
    background: linear-gradient(160deg, var(--felt-green, #1a5c2e), var(--felt-green-dark, #0f3d1d));
    border: 1px solid rgba(212, 168, 71, 0.5);
    border-radius: 14px;
    padding: 20px;
    width: min(92vw, 420px);
    color: var(--cream, #f5edd6);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
    position: relative;
}
.profile-close {
    position: absolute; top: 8px; right: 10px;
    background: none; border: none; color: var(--cream, #f5edd6);
    font-size: 1.6rem; line-height: 1; cursor: pointer; opacity: 0.7;
}
.profile-close:hover { opacity: 1; }
.profile-loading, .profile-error { text-align: center; padding: 20px; color: var(--text-muted, #b9b09a); }

.profile-header { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.profile-avatar {
    width: 54px; height: 54px; border-radius: 50%;
    background: linear-gradient(145deg, var(--gold, #d4a847), var(--gold-dark, #b08a2f));
    color: #0f3d1d; font-weight: 800; font-size: 1.5rem;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.profile-name { font-size: 1.25rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.profile-sub { font-size: 0.8rem; color: var(--text-muted, #b9b09a); }
.online-dot { width: 10px; height: 10px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 6px #2ecc71; display: inline-block; }

.profile-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 14px; }
.profile-stats > div {
    background: rgba(0, 0, 0, 0.25); border-radius: 8px; padding: 8px 4px; text-align: center;
}
.profile-stats b { display: block; font-size: 1.05rem; color: var(--gold-light, #e8c96a); }
.profile-stats span { font-size: 0.66rem; color: var(--text-muted, #b9b09a); }

.profile-follows { display: flex; justify-content: center; gap: 22px; font-size: 0.85rem; margin-bottom: 16px; color: var(--cream-dark, #e0d4b8); }
.profile-follows b { color: var(--gold-light, #e8c96a); }

.profile-actions { text-align: center; }
.follow-btn { min-width: 150px; }
.watch-btn { min-width: 150px; margin-bottom: 8px; background: linear-gradient(145deg, #2a7a3e, #1a5c2e); color: var(--cream, #f5edd6); border-color: var(--gold, #d4a847); }
.profile-actions { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sp-watch-btn {
    background: var(--gold, #d4a847); color: #0f3d1d; border: none;
    padding: 4px 10px; border-radius: 6px; font-weight: 700; font-size: 0.72rem;
    cursor: pointer; white-space: nowrap;
}
.follow-btn.following { background: rgba(0, 0, 0, 0.3); color: var(--cream, #f5edd6); border: 1px solid rgba(212, 168, 71, 0.5); }
.profile-selfnote { color: var(--text-muted, #b9b09a); font-style: italic; }

/* ─── Toasts ───────────────────────────────────────────── */
.toast-host {
    position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
    z-index: 5000; display: flex; flex-direction: column; gap: 8px; align-items: center;
    max-width: 94vw; pointer-events: none;
}
.app-toast {
    pointer-events: auto;
    background: rgba(15, 61, 29, 0.97);
    border: 1px solid rgba(212, 168, 71, 0.5);
    color: var(--cream, #f5edd6);
    border-radius: 10px; padding: 11px 14px;
    display: flex; align-items: center; gap: 10px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
    font-size: 0.9rem; opacity: 0; transform: translateY(12px);
    transition: opacity 0.25s, transform 0.25s;
}
.app-toast.show { opacity: 1; transform: translateY(0); }
.app-toast-success { border-color: #2ecc71; }
.app-toast-error { border-color: var(--inactive-red, #e74c3c); }
.toast-action {
    background: var(--gold, #d4a847); color: #0f3d1d; border: none;
    padding: 5px 12px; border-radius: 6px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.toast-close { background: none; border: none; color: var(--cream, #f5edd6); font-size: 1.2rem; cursor: pointer; opacity: 0.6; }
.toast-close:hover { opacity: 1; }

/* ─── Cloche + panneau ─────────────────────────────────── */
.social-bell {
    position: fixed; left: 14px; bottom: 14px; z-index: 3500;
    width: 48px; height: 48px; border-radius: 50%;
    background: linear-gradient(145deg, var(--felt-green-light, #2a7a3e), var(--felt-green-dark, #0f3d1d));
    border: 1px solid rgba(212, 168, 71, 0.6);
    font-size: 1.35rem; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    padding: 0; line-height: 1;
}
.bell-badge {
    position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px;
    background: var(--inactive-red, #e74c3c); color: #fff; border-radius: 9px;
    font-size: 0.7rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.social-panel {
    position: fixed; left: 14px; bottom: 70px; z-index: 3600;
    width: min(92vw, 340px); max-height: 70vh; overflow-y: auto;
    background: linear-gradient(160deg, var(--felt-green, #1a5c2e), var(--felt-green-dark, #0f3d1d));
    border: 1px solid rgba(212, 168, 71, 0.5); border-radius: 12px;
    color: var(--cream, #f5edd6); box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5); padding: 12px;
}
.sp-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; margin-bottom: 10px; }
.sp-close { background: none; border: none; color: var(--cream, #f5edd6); font-size: 1.5rem; cursor: pointer; opacity: 0.7; }
.sp-section-title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--gold-light, #e8c96a); margin: 12px 0 6px; }
.sp-push { margin-bottom: 8px; }
.sp-push-note { font-size: 0.8rem; color: var(--text-muted, #b9b09a); }
.sp-push-btn { width: 100%; }
.sp-search-input {
    width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.25); color: var(--cream, #f5edd6); font-size: 0.9rem;
}
.sp-search-results { margin-top: 4px; }
.sp-user {
    display: flex; align-items: center; gap: 8px; padding: 7px 6px; border-radius: 7px; cursor: pointer;
}
.sp-user:hover { background: rgba(0, 0, 0, 0.25); }
.sp-user-name { flex: 1; font-weight: 600; }
.sp-user-status { font-size: 0.72rem; color: var(--text-muted, #b9b09a); }
.sp-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); flex-shrink: 0; }
.sp-dot.on { background: #2ecc71; box-shadow: 0 0 6px #2ecc71; }
.sp-empty { font-size: 0.82rem; color: var(--text-muted, #b9b09a); padding: 6px 2px; font-style: italic; }
.sp-feed-item { font-size: 0.82rem; padding: 6px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); display: flex; justify-content: space-between; gap: 8px; }
.sp-time { color: var(--text-muted, #b9b09a); font-size: 0.7rem; white-space: nowrap; }

/* ─── Popin "Mon compte" ───────────────────────────────── */
.account-overlay { z-index: 4000; }
.account-popin {
    background: linear-gradient(160deg, var(--felt-green, #1a5c2e), var(--felt-green-dark, #0f3d1d));
    border: 1px solid rgba(212, 168, 71, 0.5);
    border-radius: 14px; padding: 20px;
    width: min(94vw, 460px); max-height: 88vh; overflow-y: auto;
    color: var(--cream, #f5edd6); position: relative;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}
.acc-title { font-size: 1.25rem; font-weight: 800; color: var(--gold-light, #e8c96a); margin-bottom: 14px; }
.acc-user { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.acc-section { border-top: 1px solid rgba(212, 168, 71, 0.2); padding-top: 12px; margin-top: 12px; }
.acc-section-title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--gold-light, #e8c96a); margin-bottom: 8px; }
.acc-add, .acc-invite-link, .acc-invite-email { display: flex; gap: 6px; }
.acc-add-input, .acc-link-input, .acc-email-input {
    flex: 1; min-width: 0; padding: 8px 10px; border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(0, 0, 0, 0.25);
    color: var(--cream, #f5edd6); font-size: 0.9rem;
}
.acc-add-msg, .acc-email-msg { font-size: 0.8rem; color: var(--text-muted, #b9b09a); margin-top: 5px; min-height: 1em; }
.acc-invite-actions { display: flex; gap: 6px; margin-top: 8px; }
.acc-wa-btn { background: #25d366 !important; color: #fff !important; border-color: #1da851 !important; text-decoration: none; }
.acc-invite-email { margin-top: 8px; }
.acc-row { display: flex; align-items: center; gap: 8px; padding: 7px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.acc-row-name { flex: 1; font-weight: 600; }
.acc-unfollow { background: none; border: none; color: var(--inactive-red, #e74c3c); cursor: pointer; font-size: 1rem; opacity: 0.75; }
.acc-unfollow:hover { opacity: 1; }
.acc-back-tag { font-size: 0.72rem; color: var(--text-muted, #b9b09a); }
.acc-following, .acc-followers { max-height: 150px; overflow-y: auto; }
.acc-logout-section { text-align: center; }

/* ─── Popup d'invitation à une partie ──────────────────── */
.invite-overlay { z-index: 4500; }
.invite-popin {
    background: linear-gradient(160deg, var(--felt-green, #1a5c2e), var(--felt-green-dark, #0f3d1d));
    border: 2px solid var(--gold, #d4a847);
    border-radius: 14px;
    padding: 22px 26px;
    width: min(92vw, 380px);
    color: var(--cream, #f5edd6);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
    text-align: center;
}
.invite-icon { font-size: 2.2rem; margin-bottom: 8px; }
.invite-text { font-size: 1.05rem; font-weight: 600; margin-bottom: 16px; }
.invite-actions { display: flex; gap: 10px; justify-content: center; align-items: center; }
.invite-decline { background: rgba(0, 0, 0, 0.3); color: var(--cream, #f5edd6); border-color: var(--inactive-red, #e74c3c); }

/* ─── Salle d'attente : inviter mes suivis ─────────────── */
.wr-invite {
    width: min(92vw, 340px);
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(212, 168, 71, 0.3);
    border-radius: 10px;
    padding: 10px 12px;
}
.wr-invite-title {
    font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--gold-light, #e8c96a); margin-bottom: 6px; text-align: center;
}
.wr-invite-list { max-height: 130px; overflow-y: auto; }
.wr-invite-row {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.wr-invite-row:last-child { border-bottom: none; }
.wr-invite-name { flex: 1; font-weight: 600; font-size: 0.9rem; color: var(--cream, #f5edd6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-invite-btn { padding: 4px 10px; font-size: 12px; }
.wr-invite-btn:disabled { opacity: 0.7; cursor: default; }
.wr-invite-nomutual { opacity: 0.55; }
.wr-invite-note { font-size: 0.7rem; font-style: italic; color: var(--text-muted, #b9b09a); white-space: nowrap; }
.acc-logout-btn { background: rgba(0, 0, 0, 0.3); color: var(--cream, #f5edd6); border-color: var(--inactive-red, #e74c3c); }

/* ─── Avatars ──────────────────────────────────────────── */
.wa-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; flex-shrink: 0; line-height: 1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    user-select: none;
}
.wa-avatar-initial {
    background: linear-gradient(145deg, var(--gold, #d4a847), var(--gold-dark, #b08a2f));
    color: #0f3d1d; font-weight: 800;
}

/* Grille de choix (popin Mon compte) */
.acc-avatar-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.acc-avatar-choice {
    background: none; border: 2px solid transparent; border-radius: 50%;
    padding: 2px; cursor: pointer; line-height: 0;
    transition: transform 0.12s, border-color 0.12s;
}
.acc-avatar-choice:hover { transform: scale(1.12); }
.acc-avatar-choice.selected { border-color: var(--gold, #d4a847); }

/* Classement : avatar + pseudo */
.lb-player-cell { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }

/* En jeu : avatars réduits sur petits écrans */
@media (max-width: 480px), (max-height: 500px) and (orientation: landscape) {
    .player-info .wa-avatar { width: 20px !important; height: 20px !important; font-size: 11px !important; }
}