/* ==========================================================
   吞食鱼段位认证 - 头像框（QQ 头像框风格）
   R1-R10：圆形颜色框，段位越高颜色越明显（环宽同步递增）
   F1-F5 ：闪光动态纯色框；F6 = 彩虹闪光动态框
   结构：<span class="rank-frame rank-R5"><img 头像><span class="rank-label">R5</span></span>
   ========================================================== */

.rank-frame {
    position: relative;
    display: inline-flex;
    border-radius: 50%;
    padding: 3px;
    background: #a9bcc9;
    vertical-align: middle;
    line-height: 0;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .35), 0 3px 10px rgba(0, 0, 0, .25);
}
.rank-frame > img,
.rank-frame .user-avatar {
    border-radius: 50%;
    display: block;
    object-fit: cover;
    margin: 0 !important; /* 清除头像自带 margin（如 profile-avatar 的 margin-bottom），保证框为正方形正圆 */
}
/* 段位标签：框体下方（金色加粗，醒目） */
.rank-label {
    position: absolute;
    left: 50%;
    bottom: -18px;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.45;
    letter-spacing: 1px;
    color: #ffd700;
    background: #0a1424;
    border: 1px solid rgba(255, 215, 0, .55);
    border-radius: 8px;
    padding: 1px 8px;
    white-space: nowrap;
    text-shadow: 0 0 4px rgba(255, 215, 0, .45);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}

/* ---------------- R1 - R10：越来越明显（蓝系递进到深蓝紫 + 环宽递增） ---------------- */
.rank-R1  { background: #9fc0d4; padding: 3px; }
.rank-R2  { background: #82aac4; padding: 3px; }
.rank-R3  { background: #6593b5; padding: 3px; }
.rank-R4  { background: #477ca6; padding: 4px; }
.rank-R5  { background: #2f6697; padding: 4px; }
.rank-R6  { background: #1e5288; padding: 4px; }
.rank-R7  { background: #124079; padding: 5px; }
.rank-R8  { background: #0a3269; padding: 5px; }
.rank-R9  { background: #05275c; padding: 5px; }
.rank-R10 { background: linear-gradient(145deg, #b8860b 0%, #001f49 45%, #ffd700 100%); padding: 6px; }

/* ---------------- F1 - F5：闪光动态纯色框 ---------------- */
.rank-F1 { background: #e53935; animation: rankGlow 1.6s ease-in-out infinite; }
.rank-F2 { background: #fb8c00; animation: rankGlow 1.6s ease-in-out infinite; }
.rank-F3 { background: #00a854; animation: rankGlow 1.6s ease-in-out infinite; }
.rank-F4 { background: #1e88e5; animation: rankGlow 1.6s ease-in-out infinite; }
.rank-F5 { background: #8e24aa; animation: rankGlow 1.6s ease-in-out infinite; }

.rank-F1::before, .rank-F2::before, .rank-F3::before,
.rank-F4::before, .rank-F5::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(115deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .45) 22%, rgba(255, 255, 255, 0) 46%);
    animation: rankSweep 1.8s linear infinite;
    pointer-events: none;
    mix-blend-mode: screen;
}

/* ---------------- F6：彩虹闪光动态框 ---------------- */
@property --rank-rainbow-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
.rank-F6 {
    background: conic-gradient(
        from var(--rank-rainbow-angle),
        #ff4d4d, #ff8a00, #ffe600, #33cc33, #1e88e5, #8e24aa, #ff4d4d
    );
    padding: 5px;
    animation: rankRainbow 2.4s linear infinite;
}
.rank-F6::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(115deg, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .35) 24%, rgba(255, 255, 255, 0) 48%);
    animation: rankSweep 1.4s linear infinite;
    pointer-events: none;
    mix-blend-mode: screen;
}

/* ---------------- admin 专属框：金色闪光，标签显示 admin ---------------- */
.rank-admin {
    background: linear-gradient(135deg, #f9e08b 0%, #c9a13b 50%, #f7d774 100%);
    padding: 5px;
    animation: rankGlow 1.8s ease-in-out infinite;
}
.rank-admin::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(115deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .4) 24%, rgba(255, 255, 255, 0) 48%);
    animation: rankSweep 1.6s linear infinite;
    pointer-events: none;
    mix-blend-mode: screen;
}

/* ---------------- 动画 ---------------- */
@keyframes rankGlow {
    0%   { box-shadow: 0 0 0 1px rgba(255, 255, 255, .35), 0 0 6px 0 rgba(255, 255, 255, .35); }
    50%  { box-shadow: 0 0 0 1px rgba(255, 255, 255, .6), 0 0 16px 4px rgba(255, 255, 255, .75); }
    100% { box-shadow: 0 0 0 1px rgba(255, 255, 255, .35), 0 0 6px 0 rgba(255, 255, 255, .35); }
}
@keyframes rankSweep {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes rankRainbow {
    to { --rank-rainbow-angle: 360deg; }
}

/* 段位框上的标题提示 */
.rank-frame[title] { cursor: help; }

/* ---------------- 个人中心段位认证面板 ---------------- */
.rank-panel {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 14px;
    padding: 16px 18px;
    margin: 18px 0;
}
.rank-panel-title { font-size: 17px; margin: 0 0 4px; }
.rank-panel-desc { margin: 0 0 12px; font-size: 12.5px; color: #bcd8e8; }
.rank-cur {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 4px 0 12px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, .16);
    border-radius: 12px;
}
.rank-cur .frame-host { display: inline-flex; }
.rank-cur-avatar { width: 64px; height: 64px; }
.rank-cur-info { line-height: 1.5; }
.rank-cur-name { font-weight: 800; }
.rank-form { margin-top: 6px; }
.rank-select {
    width: 100%;
    background: #fff;
    color: #0b2a44;
    border: 1px solid #b9d4e4;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
}
.rank-select option { color: #0b2a44; background: #fff; }

/* 顶部栏小头像的段位标签微调（空间小，字号收缩） */
.user-chip .rank-label { font-size: 8px; padding: 0 5px; bottom: -15px; letter-spacing: .3px; }
.user-chip .rank-frame { margin-right: 0; }
@media (max-width: 900px) {
    .user-chip .rank-label { display: none; }
}