/* 荣誉殿堂 / 荣誉体系通用样式（2026-11-05）
   卡片参数统一取自全站主流规范：css/articlelist.css 的 .moe-card
   边框 1px #f9ccd7（与互动留言页同色，温和不刺眼）/ 圆角 15px / 粉色光晕阴影 / hover 上浮 -5px
   嵌套小条目（等级行、榜单项、勋章卡）用 --honor-soft-* 一套浅粉，避免边框套边框过重 */

.honor-main {
    width: 98%;
    max-width: 1500px;
    margin: 27px auto 50px;
    padding: 0 20px;
    box-sizing: border-box;

    --honor-card-border: #f9ccd7;
    --honor-card-radius: 15px;
    --honor-card-shadow: inset 0 2px 4px rgba(255, 255, 255, .9), 0 5px 15px rgba(255, 122, 147, .75);
    --honor-card-shadow-hover: inset 0 2px 4px rgba(255, 255, 255, .9), 0 8px 25px rgba(255, 123, 156, .2);
    --honor-soft-border: #f9ccd7;
    --honor-soft-shadow: 0 4px 14px rgba(255, 122, 147, .12);
    --honor-soft-shadow-hover: 0 8px 22px rgba(255, 122, 147, .22);
}

/* ===== 顶部标题 ===== */
.honor-hero {
    text-align: center;
    padding: 34px 20px 28px;
    margin-bottom: 24px;
    border-radius: var(--honor-card-radius);
    background: linear-gradient(135deg, #fff2f5 0%, #fff8f0 55%, #f6f9ff 100%);
    border: 1px solid var(--honor-card-border);
    box-shadow: var(--honor-card-shadow);
    transition: transform .3s ease, box-shadow .3s ease;
}

.honor-hero:hover {
    transform: translateY(-3px);
    box-shadow: var(--honor-card-shadow-hover);
}

.honor-hero h1 {
    margin: 0 0 12px;
    font-size: 1.9rem;
    background: linear-gradient(45deg, #ff6b6b, #ff8e53);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.honor-hero p {
    margin: 6px 0;
    color: #666;
    font-size: 15px;
}

.honor-hero-sub {
    color: #999 !important;
    font-size: 13.5px !important;
}

/* ===== 通用区块 ===== */
.honor-section {
    background: #fff;
    border-radius: var(--honor-card-radius);
    padding: 24px 22px;
    margin-bottom: 22px;
    border: 1px solid var(--honor-card-border);
    box-shadow: var(--honor-card-shadow);
    transition: transform .3s ease, box-shadow .3s ease;
}

.honor-section:hover {
    transform: translateY(-3px);
    box-shadow: var(--honor-card-shadow-hover);
}

.honor-h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 1.22rem;
    color: #333;
}

.honor-h2 i {
    color: #ff7a8a;
}

.honor-h2-sub,
.honor-foot-note {
    margin: 0 0 18px;
    color: #888;
    font-size: 13px;
    line-height: 1.7;
}

.honor-empty {
    color: #999;
    font-size: 14px;
    padding: 12px 0;
}

.honor-login-tip {
    text-align: center;
    color: #777;
    font-size: 14px;
}

.honor-login-tip a {
    color: #ff6b8a;
    font-weight: 600;
}

/* ===== 头衔徽章 =====
   2026-11-05：.honor-title / .honor-title-lv / .honor-title-sm 已移到 css/style.css，
   因为评论区、文章作者、导航等页面没有引入 honor.css，徽章要全站可用。
   这里不要再重复定义，改样式请去 style.css 搜「头衔徽章」。 */

/* color-mix 兼容性兜底（老浏览器直接给个浅灰底） */
@supports not (background: color-mix(in srgb, red 10%, white)) {
    .honor-title {
        background: #f7f7fa;
        border-color: #e6e6ec;
    }
}

/* ===== 我的荣誉 ===== */
.honor-me-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
}

.honor-me-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #ffccd5;
    box-shadow: 0 5px 12px rgba(255, 122, 147, .25);
    transition: transform .3s ease, box-shadow .3s ease;
    flex: 0 0 auto;
    cursor: pointer;
}

/* 与全站信息卡头像一致：悬停放大 1.2 倍 + 粉色光晕 */
.honor-me-avatar:hover {
    transform: scale(1.2);
    box-shadow: 0 0 8px rgba(255, 105, 180, .4);
}

.honor-me-info {
    flex: 1 1 320px;
    min-width: 240px;
}

.honor-me-name {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin-bottom: 4px;
}

.honor-me-desc {
    margin: 0 0 12px;
    color: #999;
    font-size: 13px;
}

.honor-progress-bar {
    position: relative;
    height: 9px;
    border-radius: 999px;
    background: #f1f1f5;
    overflow: hidden;
}

.honor-progress-bar.small {
    height: 6px;
    margin-top: 8px;
}

.honor-progress-bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #ff9aa8, #ff6b8a);
    transition: width .5s ease;
}

.honor-progress-text {
    margin-top: 8px;
    font-size: 13px;
    color: #777;
}

.honor-progress-text strong {
    color: #ff5d7d;
}

.honor-me-stats {
    display: flex;
    gap: 22px;
    flex: 0 0 auto;
}

.honor-me-stats div {
    text-align: center;
}

.honor-me-stats span {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #333;
}

/* 数字后面的单位：小一号、浅一点，避免和标签混读 */
.honor-me-stats span i {
    font-style: normal;
    font-size: 12px;
    font-weight: 500;
    color: #999;
    margin-left: 2px;
}

.honor-me-stats em {
    font-style: normal;
    font-size: 12px;
    color: #999;
    white-space: nowrap;
}

/* 注意：必须带 .honor-me-stats 前缀，否则会被 .honor-me-stats span 的 display:block 覆盖
   （特异性 0,1,1 > 0,1,0），移动端隐藏不掉 */
.honor-me-stats .honor-stat-note {
    display: inline;
    font-size: 11px;
}

.honor-new-tip {
    margin-top: 16px;
    padding: 10px 14px;
    border-radius: 12px;
    background: #fff7e8;
    border: 1px dashed #ffd08a;
    color: #b9761b;
    font-size: 13.5px;
}

.honor-new-tip b {
    margin-left: 4px;
}

.honor-me-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px dashed #f0f0f4;
}

.honor-badge-mini {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    border: 1px solid var(--honor-soft-border);
    background: #fffafc;
    color: #aaa;
    box-shadow: 0 2px 8px rgba(255, 122, 147, .08);
    transition: transform .22s ease, box-shadow .22s ease;
}

.honor-badge-mini:hover {
    transform: translateY(-3px);
    box-shadow: var(--honor-soft-shadow-hover);
}

.honor-badge-mini.is-got {
    color: var(--badge-color, #333);
    border-color: color-mix(in srgb, var(--badge-color, #999) 30%, #fff);
    background: color-mix(in srgb, var(--badge-color, #999) 9%, #fff);
    font-weight: 600;
}

.honor-badge-mini.is-locked .honor-badge-icon {
    filter: grayscale(1);
    opacity: .45;
}

.honor-badge-icon {
    font-size: 15px;
}

.honor-next-goal {
    margin-top: 16px;
    font-size: 13px;
    color: #777;
}

.honor-next-goal strong {
    color: #ff5d7d;
    margin: 0 2px;
}

/* ===== 头衔阶梯 ===== */
.honor-ladder {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 大屏两列：1500px 容器下单列拉得过长，改成 4 行 × 2 列 */
@media (min-width: 992px) {
    .honor-ladder {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px 18px;
    }
}

.honor-level {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--honor-soft-border);
    border-left: 4px solid var(--honor-color, #ccc);
    box-shadow: var(--honor-soft-shadow);
    transition: transform .25s ease, box-shadow .25s ease;
}

.honor-level:hover {
    transform: translateY(-3px);
    box-shadow: var(--honor-soft-shadow-hover);
}

.honor-level.is-mine {
    background: #fff8fa;
    border-color: #ffd9e2;
    border-left-color: var(--honor-color, #ff6b8a);
}

.honor-level-lv {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    color: var(--honor-color, #999);
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 3px 8px;
}

.honor-level-body {
    flex: 1 1 auto;
    min-width: 0;
}

.honor-level-body h3 {
    margin: 0 0 2px;
    font-size: 15px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

.honor-level-mine {
    font-style: normal;
    font-size: 11px;
    color: #ff5d7d;
    background: #ffeef2;
    border-radius: 999px;
    padding: 1px 8px;
}

.honor-level-body p {
    margin: 0;
    font-size: 12.5px;
    color: #999;
}

.honor-level-meta {
    flex: 0 0 auto;
    text-align: right;
    font-size: 12px;
    color: #999;
}

.honor-level-need {
    display: block;
    color: #666;
    font-weight: 600;
}

.honor-level-count {
    color: #b3b3bd;
}

/* ===== 勋章图鉴 ===== */
.honor-badge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
}

/* 2026-11-05：大屏固定 5 列。auto-fill 在 1500px 容器下会排到 7 列，
   15 枚勋章变成「7+7+1」，最后一行孤零零一个不好看；5 列正好 3 行排满。 */
@media (min-width: 1200px) {
    .honor-badge-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 16px;
    }
}

.honor-badge-card {
    position: relative;
    padding: 18px 16px 14px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--honor-soft-border);
    box-shadow: var(--honor-soft-shadow);
    text-align: center;
    transition: transform .25s ease, box-shadow .25s ease;
}

.honor-badge-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--honor-soft-shadow-hover);
}

.honor-badge-card.is-got {
    background: linear-gradient(180deg, color-mix(in srgb, var(--badge-color, #999) 10%, #fff) 0%, #fff 70%);
    border-color: color-mix(in srgb, var(--badge-color, #999) 30%, #fff);
}

.honor-badge-card.is-locked .honor-badge-card-icon {
    filter: grayscale(1);
    opacity: .4;
}

.honor-badge-card-icon {
    font-size: 38px;
    line-height: 1;
    margin-bottom: 10px;
}

.honor-badge-card h3 {
    margin: 0 0 6px;
    font-size: 15px;
    color: #333;
}

.honor-badge-card p {
    margin: 0 0 12px;
    font-size: 12.5px;
    color: #999;
    line-height: 1.6;
    min-height: 34px;
}

.honor-badge-card-foot {
    display: flex;
    justify-content: space-between;
    font-size: 11.5px;
    color: #b3b3bd;
    border-top: 1px dashed #f0f0f4;
    padding-top: 9px;
}

.is-got-text {
    color: #3aa675;
    font-weight: 600;
}

.is-locked-text {
    color: #c4c4cc;
}

/* ===== 贡献榜 ===== */
.honor-rank {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

/* 大屏两列 5+5：按列优先填充，左列 1-5 名、右列 6-10 名，阅读顺序才顺 */
@media (min-width: 992px) {
    .honor-rank.is-two-col {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(5, auto);
        grid-auto-flow: column;
        column-gap: 18px;
    }
}

.honor-rank-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--honor-soft-border);
    box-shadow: var(--honor-soft-shadow);
    font-size: 13.5px;
    transition: transform .25s ease, box-shadow .25s ease;
}

.honor-rank-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--honor-soft-shadow-hover);
}

.honor-rank-item.is-me {
    background: #fff8fa;
    border-color: #ffd9e2;
}

.honor-rank-no {
    flex: 0 0 26px;
    text-align: center;
    font-weight: 700;
    color: #b9b9c4;
}

.honor-rank-item.is-top1 .honor-rank-no { color: #e6a23c; }
.honor-rank-item.is-top2 .honor-rank-no { color: #9aa5b1; }
.honor-rank-item.is-top3 .honor-rank-no { color: #c98a5b; }

.honor-rank-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    border: 1px solid #ffccd5;
    transition: transform .22s ease, box-shadow .22s ease;
}

/* 小头像悬停放大：比大卡头的 1.2 倍更明显，才看得出效果 */
.honor-rank-avatar:hover {
    transform: scale(1.6);
    box-shadow: 0 4px 12px rgba(255, 105, 180, .35);
    position: relative;
    z-index: 10;
}

.honor-rank-name {
    flex: 1 1 auto;
    min-width: 0;
    color: #333;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.honor-rank-num {
    flex: 0 0 auto;
    color: #888;
    font-size: 12.5px;
}

.honor-rank-num b {
    color: #ff5d7d;
    font-size: 14px;
}

.honor-rank-num.sub {
    color: #b3b3bd;
}

/* ===== 页脚说明 ===== */
.honor-footer-tip {
    text-align: center;
    color: #999;
    font-size: 13px;
    line-height: 1.9;
    padding: 6px 10px 0;
}

.honor-footer-tip a {
    color: #ff6b8a;
}

/* ===== 移动端 ===== */
@media (max-width: 640px) {
    .honor-main {
        margin-top: 16px;
    }

    .honor-hero {
        padding: 26px 16px 22px;
    }

    .honor-hero h1 {
        font-size: 1.5rem;
    }

    .honor-section {
        padding: 18px 14px;
        border-radius: 16px;
    }

    /* 小屏三格等宽，标签收短（隐藏括号说明），否则第三格会把页面撑出横向滚动 */
    .honor-me-stats {
        width: 100%;
        justify-content: space-between;
        gap: 8px;
    }

    .honor-me-stats > div {
        flex: 1 1 0;
        min-width: 0;
    }

    .honor-me-stats span {
        font-size: 17px;
    }

    .honor-me-stats span i {
        font-size: 11px;
    }

    .honor-me-stats em {
        font-size: 11px;
    }

    .honor-me-stats .honor-stat-note {
        display: none;
    }

    .honor-level {
        flex-wrap: wrap;
        gap: 8px 12px;
    }

    .honor-level-meta {
        text-align: left;
        width: 100%;
        display: flex;
        gap: 12px;
    }

    .honor-badge-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 10px;
    }

    .honor-rank-num.sub {
        display: none;
    }
}