/* =============================================
   PROFILE HOVERCARD — mini card on hover
   Triggers: any element with data-pm-user="<username>"
   ============================================= */

#pmHovercard.pm-hovercard {
    position: fixed; z-index: 9500;
    width: max-content; min-width: 200px; max-width: 300px; padding: 0.7rem 0.8rem;
    background: var(--f-surface, #111820);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 20px rgba(0,0,0,0.3);
    pointer-events: none;
    opacity: 0;
    font-family: 'Segoe UI', system-ui, sans-serif;
    left: -9999px; top: 0;
    --hc-text: #e8e8e8; --hc-dim: rgba(255,255,255,0.35); --hc-sec: #a0aab4;
    --hc-accent: #e9c46a; --hc-green: #4ade80; --hc-red: #f87171;
}
#pmHovercard.pm-hovercard.visible {
    opacity: 1;
    pointer-events: auto;
}
.pm-hovercard .pm-hc-content { transition: opacity 0.2s ease; }
.pm-hovercard.loading .pm-hc-content { opacity: 0.6; }

/* ---- Top row: avatar + identity + equipped ---- */
.pm-hc-top { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; }
.pm-hc-avatar {
    width: 36px; height: 36px; border-radius: 10px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; overflow: hidden; flex-shrink: 0;
    aspect-ratio: 1;
}
.pm-hc-avatar img { width: 36px; height: 36px; object-fit: cover; border-radius: 9px; }
.pm-hc-avatar .avatar-flag { width: 100% !important; height: 100% !important; object-fit: cover !important; transform: scale(1.25) rotate(8deg); border-radius: 0 !important; }

/* Identity */
.pm-hc-identity { flex: 1; min-width: 0; }
.pm-hc-name-row { display: flex; align-items: center; gap: 0.3rem; }
.pm-hc-name {
    font-size: 0.78rem; font-weight: 700; color: var(--hc-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    position: relative;
}
/* Name sub-tooltip — appended to the CARD (not the name) to escape overflow:hidden */
.pm-hc-name-tip {
    position: absolute;
    background: #0a0e14; color: var(--hc-text);
    font-size: 0.62rem; font-weight: 600;
    padding: 3px 9px; border-radius: 5px;
    white-space: nowrap; pointer-events: none;
    opacity: 0; transition: opacity 0.15s ease;
    box-shadow: 0 4px 14px rgba(0,0,0,0.7);
    border: 1px solid rgba(255,255,255,0.06);
    z-index: 2;
}
.pm-hovercard.pm-hc-name-hover .pm-hc-name-tip { opacity: 1; }
.pm-hc-flag { width: 16px; height: 11px; object-fit: cover; border-radius: 2px; flex-shrink: 0; }
.pm-hc-meta {
    display: flex; align-items: center; gap: 0.35rem;
    font-size: 0.58rem; color: var(--hc-sec); margin-top: 0.1rem;
    white-space: nowrap;
}
.pm-hc-elo { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Stage badge — era palettes */
.pm-hc-stage {
    display: inline-flex; align-items: center; gap: 0.2rem;
    font-size: 0.5rem; font-weight: 700; padding: 0.1rem 0.4rem;
    border-radius: 4px; white-space: nowrap;
    border: 1px solid transparent;
}
.pm-hc-stage .mr-icon { font-size: 0.55rem; }
.pm-hc-stage[data-era="pioneers"] {
    color: #CD7F32; background: rgba(205,127,50,0.1);
    border-color: rgba(205,127,50,0.2);
    text-shadow: 0 0 6px rgba(205,127,50,0.3);
}
.pm-hc-stage[data-era="golden"] {
    color: #c4956a; background: rgba(196,149,106,0.1);
    border-color: rgba(196,149,106,0.2);
    text-shadow: 0 0 6px rgba(196,149,106,0.3);
}
.pm-hc-stage[data-era="modern"] {
    color: #FFD700; background: rgba(255,215,0,0.08);
    border-color: rgba(255,215,0,0.18);
    text-shadow: 0 0 8px rgba(255,215,0,0.3);
}
.pm-hc-stage[data-era="millennium"] {
    color: #E5E4E2; background: rgba(229,228,226,0.06);
    border-color: rgba(229,228,226,0.15);
    text-shadow: 0 0 6px rgba(229,228,226,0.2);
}
.pm-hc-stage[data-era="new_era"] {
    color: #2a9d8f; background: rgba(42,157,143,0.1);
    border-color: rgba(42,157,143,0.2);
    text-shadow: 0 0 8px rgba(42,157,143,0.35);
}

/* Equipped items row */
.pm-hc-equipped { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
.pm-hc-eq-wrap {
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pm-hc-eq-wrap img {
    width: 22px; height: 22px; object-fit: contain;
    border-radius: 0;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4));
}
.pm-hc-eq-pair {
    position: relative; width: 34px; height: 22px;
}
.pm-hc-eq-pair img {
    position: absolute; width: 20px; height: 20px;
    object-fit: contain; border-radius: 0;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
.pm-hc-pair-stad { z-index: 2; left: 0; top: 1px; }
.pm-hc-pair-board { z-index: 1; right: 0; top: 1px; opacity: 0.7; }
.pm-hc-eq-title {
    position: relative; display: flex; align-items: center; justify-content: center;
    transform-style: preserve-3d; overflow: visible;
}
.pm-hc-eq-title img {
    width: 22px; height: 22px; object-fit: contain;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4));
    pointer-events: none;
}

/* ---- Middle: form + bio ---- */
.pm-hc-mid { display: flex; gap: 0.6rem; align-items: flex-start; margin-top: 0.15rem; }
.pm-hc-form-col { flex-shrink: 0; }
.pm-hc-form-label {
    font-size: 0.45rem; color: var(--hc-dim); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 0.15rem;
}
.pm-hc-form { display: flex; gap: 3px; }
.pm-hc-form-pill {
    width: 18px; height: 14px; border-radius: 3px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.42rem; font-weight: 800; color: #fff;
}
.pm-hc-form-pill.W { background: var(--hc-green); }
.pm-hc-form-pill.L { background: var(--hc-red); }
.pm-hc-form-pill.D { background: var(--hc-dim); }
.pm-hc-bio {
    flex: 1; min-width: 0; text-align: center;
    font-size: 0.55rem; color: var(--hc-sec); line-height: 1.35;
    overflow: hidden; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    transition: max-height 0.3s ease;
}
.pm-hc-bio.expanded { -webkit-line-clamp: unset; display: block; }

/* ---- Trigger styling — name glow on hover ---- */
[data-pm-user] {
    cursor: var(--cur-pointer, pointer); position: relative;
    transition: color 0.15s ease, text-shadow 0.4s ease;
}
/* Shrink block-level triggers to text width — :where() keeps specificity
   at 0 so explicit sizing (e.g. .nt-avatar { width:32px }) always wins. */
:where([data-pm-user]) { width: fit-content; }
[data-pm-user]:hover { color: var(--f-accent, #e9c46a) !important; }
[data-pm-user].pm-hc-charging { animation: pmHcGlow 0.5s ease-out forwards; }
[data-pm-user].pm-hc-active {
    color: var(--f-accent, #e9c46a) !important;
    text-shadow: 0 0 8px rgba(233,196,106,0.5), 0 0 16px rgba(233,196,106,0.2);
}
@keyframes pmHcGlow {
    0%   { text-shadow: 0 0 0 rgba(233,196,106,0); }
    100% { text-shadow: 0 0 8px rgba(233,196,106,0.5), 0 0 16px rgba(233,196,106,0.2); }
}