/* xnx_avatar_frame 头像框样式 */

/* 头像框基础定位（叠加在头像上方）
 * 注意：renderFrameHtml() 不再输出内联 style，基础布局完全依赖此处的 class
 * 因此 frame.css 必须全局加载（见 hook/footer_js_after.htm） */
.avatar-frame-img,
.avatar-frame-css {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;
    object-fit: contain;
}

/* 每个头像框唯一 class（.avatar-frame-{id}），方便主题/管理员针对具体框做 css 微调
 * 示例：
 *   .avatar-frame-3 { transform: scale(1.2); }            // 放大第 3 个框
 *   .avatar-frame-5 .avatar-frame-img { opacity: 0.9; }   // 调整第 5 个框透明度
 * 也可在后台"CSS 框"类型的 frame_css 字段中填写微调样式（输出为内联 style，仅对该框生效） */

/* 确保用户组角标在头像框之上 */
.avatar-wrap .avatar-group-icon {
    z-index: 3;
}

/* 图片框适配不同尺寸（头像框通常比头像大一圈做装饰边框） */
/* .avatar-wrap-xs .avatar-frame-img,
.avatar-wrap-xs .avatar-frame-css {
    transform: scale(1.15);
}
.avatar-wrap-sm .avatar-frame-img,
.avatar-wrap-sm .avatar-frame-css {
    transform: scale(1.12);
}
.avatar-wrap-md .avatar-frame-img,
.avatar-wrap-md .avatar-frame-css {
    transform: scale(1.1);
}
.avatar-wrap-lg .avatar-frame-img,
.avatar-wrap-lg .avatar-frame-css {
    transform: scale(1.08);
}
.avatar-wrap-xl .avatar-frame-img,
.avatar-wrap-xl .avatar-frame-css {
    transform: scale(1.06);
}
.avatar-wrap-xxl .avatar-frame-img,
.avatar-wrap-xxl .avatar-frame-css {
    transform: scale(1.05);
} */

/* 商店/我的头像框页面卡片样式 */
.xnx-frame-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.xnx-frame-card:hover {
    transform: translateY(-2px);
}

.xnx-frame-card-owned {
    opacity: 0.7;
}

.xnx-frame-card-expired {
    opacity: 0.5;
    filter: grayscale(0.5);
}

.xnx-frame-preview {
    background: linear-gradient(135deg, #060606 0%, #171818 100%);
    border-radius: 0.5rem;
    padding: 1.5rem;
    text-align: center;
}

.xnx-frame-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 10;
}