/* ═══════════════════════════════════════════════════════════
   PROFILE CARD — Steam-style mini popup (hover on any avatar)
   Generic, reusable across forum header / admin / game / shop.
   Trigger: any element with data-profile-card="<user_id>".
   The popup is injected by assets/js/profile-card.js.
   ═══════════════════════════════════════════════════════════ */

[data-profile-card] { cursor: pointer; }

/* Forum thread-list avatars sit under a full-row overlay link whose
   pointer-events:none bleeds down (pointer-events is inherited) — re-enable
   the avatar itself so the hover popup actually receives the pointer. */
.thread-row .thread-avatar[data-profile-card] {
    pointer-events: auto;
    text-decoration: none;
    color: inherit;
}

.pc-pop {
    position: fixed;
    z-index: 9999;
    width: 300px;
    background: var(--bg-card, #1c2128);
    border: 1px solid var(--border-secondary, #21262d);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .35);
    color: var(--text-primary, #e6edf3);
    font-size: 0.8rem;
    overflow: hidden;
    animation: pc-in .14s ease-out;
}
.pc-pop::after { /* subtle top sheen so it doesn't look flat */
    content: '';
    position: absolute; inset: 0 0 auto 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent, #7dd3fc), transparent);
    opacity: .35; pointer-events: none;
}
@keyframes pc-in {
    from { opacity: 0; transform: translateY(-4px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

/* ── top row: avatar + identity ─────────────────────────── */
.pc-top {
    display: flex; gap: 10px; align-items: center;
    padding: 12px 12px 10px;
    background: linear-gradient(180deg, var(--bg-hover, #272d36), transparent);
}
.pc-avatar-link { flex-shrink: 0; text-decoration: none; line-height: 0; }
.pc-cosmetics { display: inline-flex; position: relative; line-height: 0; }
.pc-avatar {
    position: relative;
    width: 46px; height: 46px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--bg-hover, #272d36);
    color: var(--text-primary, #e6edf3);
    font-weight: 800; font-size: 1.15rem;
    overflow: visible; /* frames/effects draw rings & glyphs outside the circle */
    border: 1px solid var(--border-secondary, #21262d);
}
.pc-avatar-img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    border-radius: 50%;
}
.pc-avatar-letter { line-height: 1; }
.pc-id { min-width: 0; }
.pc-name {
    display: block; font-weight: 700; font-size: 0.92rem;
    color: var(--text-primary, #e6edf3); text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pc-name:hover { color: var(--accent-hover, #38bdf8); text-decoration: underline; }
.pc-status {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.72rem; color: var(--text-secondary, #8b949e); margin-top: 2px;
}
.pc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted, #6e7681); flex-shrink: 0; }
.pc-status.pc-online .pc-dot { background: #3ddc84; box-shadow: 0 0 0 3px rgba(61, 220, 132, .18); }
.pc-status.pc-online { color: #3ddc84; }
/* Chosen presence — busy/away read as a statement, not as a connection state. */
.pc-status.pc-busy .pc-dot { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .18); }
.pc-status.pc-busy { color: #ef4444; }
.pc-status.pc-away .pc-dot { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .18); }
.pc-status.pc-away { color: #f59e0b; }
.pc-status.pc-invisible .pc-dot { background: #6e7681; box-shadow: 0 0 0 3px rgba(110, 118, 129, .18); }
.pc-status.pc-invisible { color: var(--text-muted, #6e7681); }

/* ── body: level + xp + stats ───────────────────────────── */
.pc-body { padding: 8px 12px 10px; border-top: 1px solid var(--border-dim, var(--border-secondary, #21262d)); }
.pc-level-row {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-bottom: 6px;
}
.pc-level-title { font-weight: 700; font-size: 0.8rem; }
.pc-level {
    font-size: 0.7rem; font-weight: 700; color: var(--text-secondary, #8b949e);
    border: 1px solid var(--border-secondary, #21262d); border-radius: 999px;
    padding: 1px 8px; white-space: nowrap;
}
.pc-xp {
    height: 4px; border-radius: 999px; overflow: hidden;
    background: var(--bg-hover, #272d36); margin-bottom: 8px;
}
.pc-xp-fill {
    height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--accent-hover, #38bdf8), var(--accent, #7dd3fc));
    transition: width .25s ease;
}
.pc-stats {
    display: flex; flex-wrap: wrap; gap: 4px 14px;
    font-size: 0.74rem; color: var(--text-secondary, #8b949e);
}
.pc-stats b { color: var(--text-primary, #e6edf3); font-weight: 700; }

/* ── footer: member since + action ──────────────────────── */
.pc-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 12px;
    border-top: 1px solid var(--border-dim, var(--border-secondary, #21262d));
    background: var(--bg-hover, #272d36);
    font-size: 0.7rem; color: var(--text-muted, #6e7681);
}
.pc-view {
    color: var(--accent-hover, #38bdf8); text-decoration: none; font-weight: 600; white-space: nowrap;
}
.pc-view:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
    .pc-pop { animation: none; }
    .pc-xp-fill { transition: none; }
}