/* =============================================
   🖼️ Profile Frame System - CSS
   포인트 순위 기반 프로필 사진 액자 효과
   ============================================= */

/* ── 공통 프레임 컨테이너 ── */
.pf-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 1;
}

.pf-wrap img.pf-avatar {
    display: block;
    border-radius: 50%;
    object-fit: cover;
}

/* ── 사이즈 변형 ── */
.pf-wrap.pf-sm  { width: 28px; height: 28px; }
.pf-wrap.pf-md  { width: 36px; height: 36px; }
.pf-wrap.pf-lg  { width: 48px; height: 48px; }
.pf-wrap.pf-xl  { width: 80px; height: 80px; }

.pf-sm  img.pf-avatar { width: 24px; height: 24px; }
.pf-md  img.pf-avatar { width: 32px; height: 32px; }
.pf-lg  img.pf-avatar { width: 42px; height: 42px; }
.pf-xl  img.pf-avatar { width: 72px; height: 72px; }

/* ── 이미지 테두리 (프레임) ── */

/* 1위, 2위, 3위: 백그라운드 회전 글로우 (공통 ::before) */
.pf-champion::before,
.pf-runner-up::before,
.pf-third::before {
    content: '';
    position: absolute;
    top: -4px; left: -4px; right: -4px; bottom: -4px;
    border-radius: 50%;
    z-index: -1;
    animation: pf-spin-glow 2.5s linear infinite;
    opacity: 0.85;
}

/* 1위: 챔피언 회전 글로우 (황금색) */
.pf-champion::before {
    background: conic-gradient(from 0deg, transparent 0%, rgba(255, 215, 0, 0.3) 30%, rgba(255, 215, 0, 1) 50%, rgba(255, 215, 0, 0.3) 70%, transparent 100%);
    filter: blur(4px);
}
/* 1위: 챔피언 테두리 그라디언트 */
.pf-wrap.pf-champion img.pf-avatar {
    border: 3px solid transparent;
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-image:
        linear-gradient(var(--card-bg, #fff), var(--card-bg, #fff)),
        linear-gradient(135deg, #FFD700, #FFA500, #FFD700);
}

/* 2위: 준우승 회전 글로우 (은색) */
.pf-runner-up::before {
    background: conic-gradient(from 0deg, transparent 0%, rgba(192, 192, 192, 0.3) 30%, rgba(220, 220, 220, 1) 50%, rgba(192, 192, 192, 0.3) 70%, transparent 100%);
    filter: blur(4px);
    animation-duration: 3s;
}
/* 2위: 준우승 테두리 그라디언트 */
.pf-wrap.pf-runner-up img.pf-avatar {
    border: 3px solid transparent;
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-image:
        linear-gradient(var(--card-bg, #fff), var(--card-bg, #fff)),
        linear-gradient(135deg, #C0C0C0, #E8E8E8, #A8A8A8);
}

/* 3위: 3위 회전 글로우 (동색) */
.pf-third::before {
    background: conic-gradient(from 0deg, transparent 0%, rgba(205, 127, 50, 0.3) 30%, rgba(205, 127, 50, 1) 50%, rgba(205, 127, 50, 0.3) 70%, transparent 100%);
    filter: blur(3px);
    animation-duration: 3.5s;
}
/* 3위: 3위 테두리 그라디언트 */
.pf-wrap.pf-third img.pf-avatar {
    border: 3px solid transparent;
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-image:
        linear-gradient(var(--card-bg, #fff), var(--card-bg, #fff)),
        linear-gradient(135deg, #CD7F32, #DAA520, #B8860B);
}

/* 4~10위: 명예의 전당 — 보라~네이비 */
.pf-wrap.pf-hall-of-fame img.pf-avatar {
    border: 2.5px solid transparent;
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-image:
        linear-gradient(var(--card-bg, #fff), var(--card-bg, #fff)),
        linear-gradient(135deg, #7C3AED, #4338CA);
    box-shadow: 0 0 6px rgba(124, 58, 237, 0.3);
}

/* 11~30위: 엘리트 — 파란색 */
.pf-wrap.pf-elite img.pf-avatar {
    border: 2px solid #3B82F6;
    box-shadow: 0 0 4px rgba(59, 130, 246, 0.2);
}

/* 다이아: 시안/민트 */
.pf-wrap.pf-diamond img.pf-avatar {
    border: 2px solid transparent;
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-image:
        linear-gradient(var(--card-bg, #fff), var(--card-bg, #fff)),
        linear-gradient(135deg, #06B6D4, #22D3EE);
    box-shadow: 0 0 4px rgba(6, 182, 212, 0.25);
}

/* 플래티넘: 밝은 그레이 */
.pf-wrap.pf-platinum img.pf-avatar {
    border: 2px solid transparent;
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-image:
        linear-gradient(var(--card-bg, #fff), var(--card-bg, #fff)),
        linear-gradient(135deg, #94A3B8, #CBD5E1);
}

/* 골드: 연한 골드 */
.pf-wrap.pf-gold img.pf-avatar {
    border: 2px solid #D4A017;
}

/* 실버: 연한 회색 */
.pf-wrap.pf-silver img.pf-avatar {
    border: 1.5px solid #B0B0B0;
}

/* 브론즈: 기본 */
.pf-wrap.pf-bronze img.pf-avatar {
    border: 1px solid var(--border, #e2e8f0);
}

/* ── 순위 리본 뱃지 (가운데 하단) ── */
.pf-ribbon {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: -0.3px;
    padding: 1px 5px;
    border-radius: 6px;
    color: #fff;
    white-space: nowrap;
    z-index: 5;
    line-height: 1.4;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    pointer-events: none;
}

/* 리본 색상 */
.pf-ribbon.pf-ribbon-1 {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #78350F;
    font-size: 9px;
    padding: 1px 6px;
}
.pf-ribbon.pf-ribbon-2 {
    background: linear-gradient(135deg, #C0C0C0, #E0E0E0);
    color: #374151;
}
.pf-ribbon.pf-ribbon-3 {
    background: linear-gradient(135deg, #CD7F32, #DAA520);
    color: #fff;
}
.pf-ribbon.pf-ribbon-hof {
    background: linear-gradient(135deg, #7C3AED, #4338CA);
    color: #fff;
}

/* ── 사이즈별 리본 조정 ── */
.pf-sm .pf-ribbon { font-size: 7px; padding: 0 3px; bottom: -3px; }
.pf-md .pf-ribbon { font-size: 8px; padding: 1px 5px; bottom: -4px; }
.pf-lg .pf-ribbon { font-size: 9px; padding: 1.5px 6px; bottom: -5px; }
.pf-xl .pf-ribbon { font-size: 11px; padding: 2px 8px; bottom: -6px; }

/* ── 1~3위 회전 애니메이션 ── */
@keyframes pf-spin-glow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ── Top 1~10 글로벌 호버 카드 ── */
.pf-global-hover-card {
    position: fixed;
    transform: translate(-50%, -100%) translateY(10px); /* 커서 위쪽으로 */
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
    padding: 14px 18px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 9999;
    white-space: nowrap;
    min-width: 160px;
    text-align: center;
}

.pf-global-hover-card.show {
    opacity: 1;
    transform: translate(-50%, -100%) translateY(0);
    pointer-events: auto;
}

.pf-global-hover-card .pf-card-header {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-sub, #94a3b8);
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.pf-global-hover-card .pf-card-rank {
    font-size: 1rem;
    font-weight: 900;
    margin-bottom: 4px;
}
.pf-global-hover-card .pf-card-rank.rank-1 { color: #F59E0B; }
.pf-global-hover-card .pf-card-rank.rank-2 { color: #94A3B8; }
.pf-global-hover-card .pf-card-rank.rank-3 { color: #B45309; }
.pf-global-hover-card .pf-card-rank.rank-hof { color: #7C3AED; }
.pf-global-hover-card .pf-card-rank.rank-rest { color: var(--text-main, #374151); }

.pf-global-hover-card .pf-card-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    margin: 6px auto;
    display: block;
}

.pf-global-hover-card .pf-card-name {
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--text-main, #1e293b);
    margin-bottom: 2px;
}

.pf-global-hover-card .pf-card-points {
    font-weight: 900;
    font-size: 1.1rem;
    color: var(--primary, #2563eb);
    margin-bottom: 6px;
}

.pf-card-profile-btn {
    display: inline-block;
    margin-top: 4px;
    padding: 4px 14px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    background: var(--primary, #2563eb);
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s;
}
.pf-card-profile-btn:hover {
    background: #1d4ed8;
}

/* 화살표 (하단 삼각형) */
.pf-global-hover-card::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--card-bg, #fff);
}


/* ── 다크모드 대응 ── */
[data-theme="dark"] .pf-global-hover-card {
    background: var(--card-bg);
    border-color: var(--border);
    box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
[data-theme="dark"] .pf-global-hover-card::after {
    border-top-color: var(--card-bg);
}