/**
 * sponsor.css — 前台「名人堂」/sponsors
 * ------------------------------------------------------------
 * 颜色一律走主题变量（--color-*），深浅主题自动跟随；
 * 仅冠亚季的金银铜（含皇冠色）为「语义固定色」，不随主题变化（荣誉色不能变）。
 * 版式（模仿 ankergames.net/donations，用户 2026-10-16 指定）：
 *   第 1 名 → 单独一栏、内容居中、头像带皇冠（.spon-champ）；
 *   第 2、3 名 → 第二栏并排，**每行 2 个**、内容居中（.spon-top2）；
 *   第 4 名起 → **每行 5 个**、**左对齐横排卡片**（头像在左，昵称/称号在右，统计行在下；.spon-rest）。
 *   其余名次：宽屏固定**每行 5 个**；≤1399px 起改为按可用宽度**自适应列数**（每列至少 190px）。
 *   **全程不展示金额**，每人只显示：名次 / 头像 / 昵称 / 称号徽章 / 统计（赞助次数·最近赞助·加入时长）。
 */

.spon-page {
    width: 100%;
    max-width: 1400px;          /* 与全站内容页 .res-page / .help-page-wrap 一致 */
    margin: 0 auto;
    padding: 28px 16px 56px;
}

/* ============ Hero ============ */
.spon-hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 34px 20px 28px;
    margin-bottom: 24px;
    background: var(--color-bg-card);
    border: var(--color-border-width) solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--main-shadow);
}
/* 顶部一层极淡强调色渐变，给 hero 一点「高光」而不喧宾夺主 */
.spon-hero::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 140px;
    background: linear-gradient(180deg, var(--color-accent-soft), transparent);
    pointer-events: none;
}
.spon-hero-title {
    position: relative;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--color-text-title);
    margin: 0 0 6px;
}
.spon-hero-sub {
    position: relative;
    margin: 0 auto;
    max-width: 560px;
    color: var(--color-text-secondary);
    font-size: 14px;
    line-height: 1.7;
}

/* ============ 冠军（第 1 名）：单独一栏 · 居中 · 皇冠 ============ */
.spon-champ {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    padding: 36px 20px 26px;
    margin-bottom: 16px;
    background: var(--color-bg-card);
    border: var(--color-border-width) solid rgba(226,178,60,.55);
    border-radius: var(--radius-card);
    box-shadow: var(--main-shadow);
}
.spon-champ-avatar {
    position: relative;
    width: 88px; height: 88px;
}
/* 皇冠：语义固定金色，悬于头像正上方 */
.spon-champ-crown {
    position: absolute;
    top: -22px; left: 50%;
    transform: translateX(-50%);
    color: #e2b23c;
    line-height: 0;
    filter: drop-shadow(0 2px 4px rgba(226,178,60,.35));
}
.spon-champ-crown svg { width: 36px; height: 36px; display: block; }
.spon-champ-img {
    width: 88px; height: 88px;
    border-radius: 22px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent-soft);
    color: var(--color-accent-dark);
    font-size: 32px;
    font-weight: 800;
    border: 3px solid rgba(226,178,60,.7);
}
.spon-champ-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spon-champ-name {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 19px;
    font-weight: 800;
    color: var(--color-text-title);
}
.spon-champ-meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 34px;
    margin-top: 2px;
}

/* ============ 第二栏（第 2、3 名）与其余名次网格（第 4 名起）============ */
.spon-top2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}
.spon-rest {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

/* 普通名次卡片（partial: view/sponsor/_card.html）—— **默认竖向居中**，供第二栏（2、3 名）使用；
 * 第 4 名起在下方 `.spon-rest .spon-card` 覆盖为左对齐横排。 */
.spon-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 20px 16px 16px;
    background: var(--color-bg-card);
    border: var(--color-border-width) solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,.04));
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.spon-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--main-shadow-hover, 0 8px 24px rgba(0,0,0,.12));
    border-color: var(--color-border-strong);
}
/* 亚、季军：银 / 铜（语义固定色，不随主题） */
.spon-card[data-rank="2"] { border-color: rgba(150,168,182,.5); }
.spon-card[data-rank="3"] { border-color: rgba(196,127,74,.5); }

.spon-card-avatar {
    position: relative;
    width: 56px; height: 56px;
}
.spon-card-img {
    width: 100%; height: 100%;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent-soft);
    color: var(--color-accent-dark);
    font-size: 22px;
    font-weight: 800;
    border: 2px solid var(--color-border);
}
.spon-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 名次角标：压在头像左上角 */
.spon-card-rank {
    position: absolute;
    top: -7px; left: -7px;
    min-width: 22px; height: 22px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-dim);
    background: var(--color-bg-tag);
    border: 2px solid var(--color-bg-card);
}
.spon-card[data-rank="2"] .spon-card-rank { color: #2f3a44; background: linear-gradient(135deg, #e2e8ee, #aebccb); }
.spon-card[data-rank="3"] .spon-card-rank { color: #402414; background: linear-gradient(135deg, #e7b183, #c07a44); }

.spon-card-name {
    max-width: 100%;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-title);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.spon-card-tier { display: flex; }

/* 统计行：三列等宽居中（value + 小标签），冠军栏与普通卡共用 */
.spon-card-meta {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border-soft);
}
.spon-card-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1px;
    min-width: 0;
}
.spon-card-stat .v {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.spon-card-stat .l { font-size: 11.5px; color: var(--color-text-dim); }

/* 第 4 名起：左对齐横排（头像在左 · 昵称/称号在右 · 统计行在下），**不居中** */
.spon-rest .spon-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 14px;
    row-gap: 6px;
    text-align: left;
    padding: 18px 16px 16px;
}
.spon-rest .spon-card-avatar { grid-column: 1; grid-row: 1 / span 2; }
.spon-rest .spon-card-name { grid-column: 2; grid-row: 1; align-self: end; }
.spon-rest .spon-card-tier { grid-column: 2; grid-row: 2; align-self: start; }
.spon-rest .spon-card-meta {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 0;
}
.spon-rest .spon-card-stat { align-items: flex-start; text-align: left; }

/* ============ 空态 ============ */
.spon-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 56px 20px;
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 14px;
    background: var(--color-bg-card);
    border: var(--color-border-width) dashed var(--color-border);
    border-radius: var(--radius-card);
}
.spon-empty-ic {
    font-size: 34px;
    color: var(--color-text-dim);
    opacity: .7;
}

/* ============ 响应式 ============ */
/* ≤1399px：其余名次由「固定列数」改为**按可用宽度自适应**（每列最少 190px，能放几列放几列）。
   原因：≥992px 会显示左侧栏、内容区被压窄（992px 视口下内容仅 ~645px），
   此时固定 4/5 列会把卡片挤到 150px 以内、卡内三列统计（赞助次数/最近赞助/加入时长）被迫换行。
   自适应可保证每列始终 ≥190px，且无需按断点列举列数。 */
@media (max-width: 1399px) {
    .spon-rest { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}

/* 手机模式（≤640px）：hero 与冠军区收紧、第二栏降为单列、间距压紧。
   底部让位由 .app-main-inner 的 calc(60px + 安全区) 承担，此处只留少量呼吸间距。 */
@media (max-width: 640px) {
    .spon-page { padding: 16px 12px 24px; }
    .spon-hero { padding: 22px 14px 18px; margin-bottom: 18px; }
    .spon-hero-title { font-size: 22px; }
    .spon-hero-sub { font-size: 13px; }

    .spon-champ { padding: 28px 14px 20px; gap: 12px; margin-bottom: 14px; }
    .spon-champ-avatar, .spon-champ-img { width: 72px; height: 72px; }
    .spon-champ-crown svg { width: 32px; height: 32px; }
    .spon-champ-img { font-size: 26px; border-radius: 18px; }
    .spon-champ-name { font-size: 17px; gap: 8px; }
    .spon-champ-meta { gap: 8px 22px; }

    .spon-top2 { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 14px; }
    .spon-rest { gap: 12px; }
    .spon-card { padding: 14px 12px 12px; }
}