/* Compact leaderboard viewer profile owner styles.
   Keep #viewer-details compact profile layout, status pills, credit cards,
   DVP-style standing chart sizing, hover states, and responsive behavior here. */

.viewer-details h2 {
    overflow-wrap: normal;
}

@media (min-width: 1001px) {
    #leaderboards.support-view-active .layout {
        align-items: stretch;
    }

    #leaderboards.support-view-active .leaderboard-panel,
    #leaderboards.support-view-active .details-panel {
        height: min(760px, calc(100vh - 222px));
        min-height: 620px;
        overflow: hidden;
    }

    #leaderboards.support-view-active .leaderboard-panel,
    #leaderboards.support-view-active .details-panel {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
    }

    #leaderboards.support-view-active #leaderboard-list,
    #leaderboards.support-view-active #viewer-details {
        min-height: 0;
        overflow-y: auto;
        padding-right: 2px;
    }
}

#viewer-details .compact-profile-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    margin-bottom: 9px;
}

#viewer-details .compact-profile-title-row h2 {
    margin: 0;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}

#viewer-details .compact-title-platforms {
    margin-left: 0;
    justify-content: flex-start;
    max-width: 100%;
}

#viewer-details .compact-profile-badges {
    display: grid;
    gap: 8px;
    margin-bottom: 10px;
}

#viewer-details .compact-status-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

#viewer-details .compact-status-grid .badge-pill,
#viewer-details .compact-subscription-line {
    width: 100%;
    min-width: 0;
    min-height: 36px;
    padding: 6px 11px;
    font-size: 13px;
    line-height: 1;
    text-align: center;
    text-decoration: none;
}

#viewer-details .compact-rank-pill,
#viewer-details .compact-standing-pill,
#viewer-details .compact-subscription-line {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 7px;
    overflow: hidden;
}

#viewer-details .compact-rank-badge,
#viewer-details .compact-standing-medal,
#viewer-details .compact-sub-badge {
    display: inline-grid;
    place-items: center;
    width: 23px;
    height: 23px;
    min-width: 23px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
    overflow: visible;
}

#viewer-details .compact-rank-badge img,
#viewer-details .compact-standing-medal img,
#viewer-details .compact-sub-badge img {
    width: 23px;
    height: 23px;
    max-width: 23px;
    max-height: 23px;
    object-fit: contain;
    display: block;
}

#viewer-details .compact-rank-badge.fallback {
    width: 18px;
    height: 18px;
    min-width: 18px;
    border-radius: 999px;
    border: 1px solid rgba(126, 223, 255, 0.42);
    box-shadow: 0 0 8px rgba(126, 223, 255, 0.18);
}

#viewer-details .compact-rank-pill span:last-child,
#viewer-details .compact-standing-pill span:last-child,
#viewer-details .compact-sub-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#viewer-details .compact-rank-pill {
    color: #e6dcff;
    border-color: rgba(182, 126, 255, 0.46);
    background: linear-gradient(135deg, rgba(137, 82, 255, 0.16), rgba(8, 24, 45, 0.74));
    box-shadow: inset 0 0 14px rgba(182, 126, 255, 0.045);
}

#viewer-details .compact-rank-pill:hover,
#viewer-details .compact-rank-pill:focus-visible,
#viewer-details .compact-rank-pill.compact-profile-hover {
    color: #f0e9ff;
    border-color: rgba(190, 146, 255, 0.78);
    background: linear-gradient(135deg, rgba(137, 82, 255, 0.24), rgba(18, 51, 84, 0.82));
    box-shadow: 0 0 22px rgba(137, 82, 255, 0.22), inset 0 0 16px rgba(190, 146, 255, 0.06);
    transform: translateY(-1px);
    outline: none;
}

#viewer-details .compact-platform-icons {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

#viewer-details .compact-platform-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
}

#viewer-details .compact-platform-icon img {
    width: 14px;
    height: 14px;
    max-width: 14px;
    max-height: 14px;
    object-fit: contain;
    display: block;
}

#viewer-details .compact-platform-icon.twitch { border-color: color-mix(in srgb, var(--twitch), white 20%); background: color-mix(in srgb, var(--twitch), transparent 84%); color: #d7c2ff; }
#viewer-details .compact-platform-icon.youtube { border-color: color-mix(in srgb, var(--youtube), white 20%); background: color-mix(in srgb, var(--youtube), transparent 86%); color: #ffb8c4; }
#viewer-details .compact-platform-icon.kick { border-color: color-mix(in srgb, var(--kick), white 20%); background: color-mix(in srgb, var(--kick), transparent 86%); color: #b9ffa8; }
#viewer-details .compact-platform-icon.rumble { border-color: color-mix(in srgb, var(--rumble), white 20%); background: color-mix(in srgb, var(--rumble), transparent 84%); color: #dbffad; }
#viewer-details .compact-platform-icon.facebook { border-color: color-mix(in srgb, var(--facebook), white 20%); background: color-mix(in srgb, var(--facebook), transparent 84%); color: #bdd8ff; }
#viewer-details .compact-platform-icon.instagram { border-color: color-mix(in srgb, var(--instagram), white 20%); background: color-mix(in srgb, var(--instagram), transparent 84%); color: #ffc9d6; }
#viewer-details .compact-platform-icon.patreon { border-color: color-mix(in srgb, var(--patreon), white 20%); background: color-mix(in srgb, var(--patreon), transparent 84%); color: #ffc5ca; }
#viewer-details .compact-platform-icon.x { border-color: rgba(255, 255, 255, 0.58); background: rgba(255, 255, 255, 0.11); color: #fff; }
#viewer-details .compact-platform-icon.tiktok { border-color: rgba(37, 244, 238, 0.72); background: rgba(37, 244, 238, 0.12); color: #cffffd; }
#viewer-details .compact-platform-icon.discord { border-color: color-mix(in srgb, var(--discord), white 20%); background: color-mix(in srgb, var(--discord), transparent 84%); color: #c7ccf7; }

/* Live "present now" (Feature 3): compact profile pills are icon-only, so the pill
   itself pulses in its platform colour when present. Tooltip gains " · Present". */
#viewer-details .compact-platform-icon { --present-accent: #34d058; }
#viewer-details .compact-platform-icon.twitch { --present-accent: var(--twitch); }
#viewer-details .compact-platform-icon.youtube { --present-accent: var(--youtube); }
#viewer-details .compact-platform-icon.kick { --present-accent: var(--kick); }
#viewer-details .compact-platform-icon.rumble { --present-accent: var(--rumble); }
#viewer-details .compact-platform-icon.facebook { --present-accent: var(--facebook); }
#viewer-details .compact-platform-icon.instagram { --present-accent: var(--instagram); }
#viewer-details .compact-platform-icon.tiktok { --present-accent: #25f4ee; }

#viewer-details .compact-platform-icon.present { animation: compact-present-pulse 1.8s ease-in-out infinite; }

@keyframes compact-present-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--present-accent, #34d058), transparent 35%); }
    50% { box-shadow: 0 0 7px 1px color-mix(in srgb, var(--present-accent, #34d058), transparent 25%); }
}

@media (prefers-reduced-motion: reduce) {
    #viewer-details .compact-platform-icon.present { animation: none; box-shadow: 0 0 6px color-mix(in srgb, var(--present-accent, #34d058), transparent 35%); }
}

#viewer-details .compact-platform-empty {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

#viewer-details .compact-subscription-line {
    border: 1px solid rgba(126, 223, 255, 0.22);
    border-radius: 999px;
    background: rgba(126, 223, 255, 0.07);
    color: var(--text);
    font-weight: 950;
}

#viewer-details .compact-subscription-line.inactive {
    color: rgba(199, 218, 236, 0.62);
    border-color: rgba(199, 218, 236, 0.16);
    background: rgba(199, 218, 236, 0.045);
    box-shadow: none;
}

#viewer-details .compact-subscription-line.active.twitch { border-color: color-mix(in srgb, var(--twitch), white 22%); background: linear-gradient(135deg, color-mix(in srgb, var(--twitch), transparent 78%), rgba(8, 24, 45, 0.72)); color: #e1d2ff; }
#viewer-details .compact-subscription-line.active.youtube { border-color: color-mix(in srgb, var(--youtube), white 22%); background: linear-gradient(135deg, color-mix(in srgb, var(--youtube), transparent 82%), rgba(8, 24, 45, 0.72)); color: #ffc2cc; }
#viewer-details .compact-subscription-line.active.kick { border-color: color-mix(in srgb, var(--kick), white 22%); background: linear-gradient(135deg, color-mix(in srgb, var(--kick), transparent 84%), rgba(8, 24, 45, 0.72)); color: #c8ffba; }
#viewer-details .compact-subscription-line.active.rumble { border-color: color-mix(in srgb, var(--rumble), white 22%); background: linear-gradient(135deg, color-mix(in srgb, var(--rumble), transparent 82%), rgba(8, 24, 45, 0.72)); color: #e0ffb7; }
#viewer-details .compact-subscription-line.active.facebook { border-color: color-mix(in srgb, var(--facebook), white 22%); background: linear-gradient(135deg, color-mix(in srgb, var(--facebook), transparent 82%), rgba(8, 24, 45, 0.72)); color: #c8ddff; }
#viewer-details .compact-subscription-line.active.patreon { border-color: color-mix(in srgb, var(--patreon), white 22%); background: linear-gradient(135deg, color-mix(in srgb, var(--patreon), transparent 82%), rgba(8, 24, 45, 0.72)); color: #ffd0d5; }

#viewer-details .compact-subscription-line.active:hover,
#viewer-details .compact-subscription-line.active:focus-visible,
#viewer-details .compact-subscription-line.active.compact-profile-hover {
    box-shadow: 0 0 22px rgba(126, 223, 255, 0.16), inset 0 0 16px rgba(255, 255, 255, 0.045);
}

#viewer-details .compact-subscription-line.inactive:hover,
#viewer-details .compact-subscription-line.inactive:focus-visible,
#viewer-details .compact-subscription-line.inactive.compact-profile-hover {
    color: rgba(199, 218, 236, 0.76);
    border-color: rgba(199, 218, 236, 0.26);
    background: rgba(199, 218, 236, 0.07);
    box-shadow: inset 0 0 12px rgba(199, 218, 236, 0.035);
}

#viewer-details .compact-sub-extra-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    min-height: 18px;
    padding: 2px 6px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    color: var(--text);
    font-size: 9px;
    font-weight: 950;
    line-height: 1;
}

#viewer-details .compact-standing-pill.standing-gold { color: var(--warning); border-color: rgba(255, 211, 126, 0.72); background: rgba(255, 211, 126, 0.11); box-shadow: 0 0 14px rgba(255, 211, 126, 0.12); }
#viewer-details .compact-standing-pill.standing-silver { color: #d8efff; border-color: rgba(190, 225, 255, 0.58); background: rgba(190, 225, 255, 0.09); }
#viewer-details .compact-standing-pill.standing-bronze { color: #ffbd86; border-color: rgba(255, 170, 105, 0.48); background: rgba(255, 170, 105, 0.08); }

#viewer-details .compact-standing-pill:hover,
#viewer-details .compact-standing-pill:focus-visible,
#viewer-details .compact-standing-pill.compact-profile-hover {
    border-color: rgba(126, 223, 255, 0.62);
    background: linear-gradient(135deg, rgba(126, 223, 255, 0.12), rgba(8, 24, 45, 0.72));
    box-shadow: 0 0 16px rgba(35, 180, 255, 0.14), inset 0 0 14px rgba(126, 223, 255, 0.045);
}

#viewer-details .compact-standing-pill.standing-gold:hover,
#viewer-details .compact-standing-pill.standing-gold:focus-visible,
#viewer-details .compact-standing-pill.standing-gold.compact-profile-hover {
    color: #ffe2a1;
    border-color: rgba(255, 224, 148, 0.96);
    background: linear-gradient(135deg, rgba(255, 211, 126, 0.22), rgba(18, 51, 84, 0.84));
    box-shadow: 0 0 24px rgba(255, 211, 126, 0.26), inset 0 0 16px rgba(255, 211, 126, 0.07);
}

#viewer-details .compact-standing-pill.standing-silver:hover,
#viewer-details .compact-standing-pill.standing-silver:focus-visible,
#viewer-details .compact-standing-pill.standing-silver.compact-profile-hover {
    color: #e8f7ff;
    border-color: rgba(205, 235, 255, 0.92);
    background: linear-gradient(135deg, rgba(190, 225, 255, 0.16), rgba(18, 51, 84, 0.84));
    box-shadow: 0 0 22px rgba(190, 225, 255, 0.20), inset 0 0 16px rgba(190, 225, 255, 0.06);
}

#viewer-details .compact-standing-pill.standing-bronze:hover,
#viewer-details .compact-standing-pill.standing-bronze:focus-visible,
#viewer-details .compact-standing-pill.standing-bronze.compact-profile-hover {
    color: #ffc69a;
    border-color: rgba(255, 180, 118, 0.86);
    background: linear-gradient(135deg, rgba(255, 170, 105, 0.14), rgba(18, 51, 84, 0.82));
    box-shadow: 0 0 20px rgba(255, 170, 105, 0.18), inset 0 0 14px rgba(255, 170, 105, 0.055);
}

#viewer-details a[data-compact-action].compact-profile-clickable,
#viewer-details .compact-standing-monitor {
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease, color 160ms ease;
}

#viewer-details a[data-compact-action].compact-profile-clickable:not(.compact-rank-pill):not(.compact-subscription-line):not(.compact-standing-pill):hover,
#viewer-details a[data-compact-action].compact-profile-clickable:not(.compact-rank-pill):not(.compact-subscription-line):not(.compact-standing-pill):focus-visible,
#viewer-details a[data-compact-action].compact-profile-clickable:not(.compact-rank-pill):not(.compact-subscription-line):not(.compact-standing-pill).compact-profile-hover {
    border-color: rgba(126, 223, 255, 0.82);
    background: rgba(18, 51, 84, 0.84);
    box-shadow: 0 0 26px rgba(35, 180, 255, 0.28), inset 0 0 16px rgba(126, 223, 255, 0.07);
    transform: translateY(-1px);
    outline: none;
}

#viewer-details .compact-standing-monitor {
    margin: 2px 0 9px;
}

#viewer-details .compact-standing-monitor .activity-monitor-card {
    min-height: 168px;
    padding: 11px;
}

#viewer-details .compact-standing-monitor .activity-sparkline-wrap {
    padding-top: 24px;
}

#viewer-details .compact-standing-monitor .activity-sparkline {
    display: block;
    width: calc(100% - 16px);
    height: 96px;
    margin-inline: 8px;
    overflow: visible;
}

#viewer-details .compact-credit-header-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 26px;
    margin: 0 0 8px;
    border: 1px solid rgba(126, 223, 255, 0.22);
    border-radius: 999px;
    background: rgba(126, 223, 255, 0.075);
    color: rgba(126, 223, 255, 0.82);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

#viewer-details .compact-credit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

#viewer-details .compact-credit-card {
    display: block;
    min-width: 0;
    padding: 9px;
    border: 1px solid rgba(93, 210, 255, 0.18);
    border-radius: 12px;
    background: rgba(5, 15, 31, 0.42);
    text-align: center;
    text-decoration: none;
    color: inherit;
}

#viewer-details .compact-credit-label {
    color: rgba(126, 223, 255, 0.82);
    font-size: 9px;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

#viewer-details .compact-credit-value {
    margin-top: 5px;
    color: var(--text);
    font-size: 16px;
    font-weight: 950;
    line-height: 1.04;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

#viewer-details .compact-credit-card.available .compact-credit-value,
#viewer-details .compact-credit-card.multiplier .compact-credit-value {
    color: var(--success);
    text-shadow: 0 0 10px rgba(129, 255, 195, 0.14);
}

#viewer-details .compact-credit-card.achievements .compact-credit-value {
    color: var(--warning);
}

#viewer-details .breakdown-grid,
#viewer-details .compact-next-rank-card,
#viewer-details .referral-profile-section {
    display: none !important;
}

.compact-profile-target-pulse {
    animation: compactProfileTargetPulse 1600ms ease-out;
}

@keyframes compactProfileTargetPulse {
    0% { border-color: var(--border-hot); box-shadow: 0 0 0 rgba(126, 223, 255, 0); background-color: rgba(55, 187, 255, 0.16); }
    45% { box-shadow: 0 0 34px rgba(126, 223, 255, 0.34); }
    100% { box-shadow: none; }
}

@media (max-width: 760px) {
    .viewer-details h2 {
        font-size: 24px;
        overflow-wrap: anywhere;
    }

    #viewer-details .compact-profile-title-row h2 {
        overflow-wrap: normal;
        white-space: nowrap;
    }

    #viewer-details .compact-title-platforms {
        margin-left: 0;
        justify-content: flex-start;
    }

    #viewer-details .compact-status-grid {
        grid-template-columns: 1fr;
    }
}