/* =========================================================
   排行榜页（rank）
   参考设计稿：顶部横排榜单 tab + 竖排大卡列表
   视觉与首页保持一致：暖黑底 + 橙色强调（--accent #ff9c48）
   ========================================================= */

/* ===== 排行榜页容器（作为独立全屏页，与 #hotArea 互斥显示）===== */
#rankArea {
    position: relative;
}
/* .page-rank 同时是滚动容器：高度由 JS 设为「视口 - 顶部偏移」，
   保证内部独立滚动、底部导航不遮挡（排行榜/豆瓣榜/TMDB榜共用） */
.page-rank {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding: calc(var(--app-header-h, 96px) + var(--rank-tabs-h, 46px)) 0 84px;
}

/* ===== 横向翻页容器（豆瓣榜/综合榜共用）===== */
.rank-pager {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.rank-pager::-webkit-scrollbar { display: none; }
.rank-pager > .page {
    flex: 0 0 100%;
    scroll-snap-align: start;
    height: 100%;
    min-height: 0;
}
.rank-pager > .page > .page-scroll {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    /* ★ 榜单页有「顶栏 + 榜单 tab」两层，内容让位要同时避开两者：
       容器从 y=0 铺满整屏，顶部内边距 = 顶栏高 + tab 高（--rank-tabs-h 由
       rank.js/douban.js 量出来后写入）。这样顶栏收起时底下铺的就是卡片，
       收起只剩纯 transform，不再重排、不再顶卡片。 */
    padding-top: calc(var(--app-header-h, 96px) + var(--rank-tabs-h, 46px));
    padding-bottom: 84px;
}

/* ===== 顶部榜单 tab（日播/周播/月播/总/短剧）===== */
.rank-tabs {
    display: flex;
    gap: 22px;
    padding: 14px 16px 10px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    position: sticky;
    top: 0;
    z-index: 12;
    background: rgba(18, 18, 18, 0.96);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}
.rank-tabs::-webkit-scrollbar { display: none; }

.rank-tab {
    position: relative;
    flex: 0 0 auto;
    padding: 2px 0 10px;
    font-size: 17px;
    font-weight: 600;
    color: #8a867f;
    background: none;
    border: 0;
    white-space: nowrap;
    transition: color 0.2s;
    cursor: pointer;
}
.rank-tab {
    transition: color 0.18s ease, font-weight 0.18s ease;
}
.rank-tab.on,
.rank-tab.near {
    color: var(--text-color);
    font-weight: 700;
}
.rank-tab:active { opacity: 0.7; }

/* ══════════ 跟手光标（复用首页 channel-tabs 机制）══════════
   单个绝对定位元素，位置由 rank.js 每帧写 --cursor-cx / --cursor-half，
   手指滑到一半光标就走到两 tab 之间；勾选态不再画自己的下划线。 */
.rank-tabs.follow-on::after {
    content: "";
    position: absolute;
    bottom: 6px;
    left: 0;
    width: calc(var(--cursor-half, 11px) * 2);
    height: 3px;
    border-radius: 2px;
    background: var(--accent);
    transform: translate3d(calc(var(--cursor-cx, 0px) - var(--cursor-half, 11px)), 0, 0);
    transition: transform 0.26s cubic-bezier(0.22, 0.9, 0.3, 1),
                width 0.26s cubic-bezier(0.22, 0.9, 0.3, 1);
    will-change: transform, width;
    pointer-events: none;
}
.rank-tabs.follow-on.dragging::after { transition: none; }

/* 分组分隔线：电影 | 剧集（数据口径不同，视觉上必须断开） */
.rank-tab-sep {
    flex: 0 0 auto;
    align-self: center;
    width: 1px;
    height: 14px;
    margin: 0 2px 8px;
    background: var(--line);
    border-radius: 1px;
}

/* 组标签（电影 / 剧集）：小徽章，不参与跟手光标 */
.rank-tab-group {
    flex: 0 0 auto;
    align-self: center;
    margin: 0 6px 8px 0;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--accent);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--line);
    border-radius: 5px;
    white-space: nowrap;
}

/* ===== 数据来源说明条（豆瓣口碑榜 / 源站评分 / TMDB，如实标注不装）===== */
#rankSource, .rank-source-note {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 16px 2px;
    font-size: 11.5px;
    color: var(--muted);
    letter-spacing: 0.01em;
}
#rankSource.off { color: #d8a55c; }
.rs-dot {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--muted);
}
.rs-dot.db   { background: #3ea36a; }   /* 豆瓣 */
.rs-dot.tmdb { background: #01B4E4; }   /* TMDB */
.rs-dot.src  { background: var(--accent); }  /* 源站 */
.rs-dot.off  { background: #d8a55c; }

/* ===== 榜单列表 ===== */
.rank-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 6px 12px 0;
}

/* ===== 排行大卡 ===== */
.rank-card {
    position: relative;
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    cursor: pointer;
    transition: border-color 0.2s, transform 0.12s;
}
.rank-card:hover { border-color: var(--card-hover-border); }
.rank-card:active { transform: scale(0.985); }

/* 右上角名次徽章：前三名金银铜，其余灰色 */
.rank-no {
    position: absolute;
    right: 10px;
    top: 10px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    font-style: italic;
    color: #8a867f;
    background: var(--soft);
    border-radius: 10px;
    z-index: 2;
}
.rank-no.gold {
    color: #3a2c00;
    background: linear-gradient(135deg, #ffe07a, #f5c518);
    box-shadow: 0 1px 4px rgba(245, 197, 24, 0.45);
}
.rank-no.silver {
    color: #2e2e2e;
    background: linear-gradient(135deg, #f5f5f5, #b8bcc4);
    box-shadow: 0 1px 4px rgba(180, 185, 195, 0.45);
}
.rank-no.bronze {
    color: #331d0c;
    background: linear-gradient(135deg, #f0b884, #cd7f32);
    box-shadow: 0 1px 4px rgba(205, 127, 50, 0.45);
}

/* 搜源中：整卡降饱和 + 右下角小提示 */
.rank-card-loading { opacity: 0.6; pointer-events: none; }
.rank-card-tip {
    position: absolute;
    right: 12px;
    bottom: 10px;
    padding: 3px 9px;
    font-size: 11px;
    color: #121212;
    background: var(--accent);
    border-radius: 20px;
    font-weight: 600;
    animation: rank-tip-in 0.18s ease-out;
}
.rank-card-tip.bad { background: #4a4640; color: #d8d4cd; }
@keyframes rank-tip-in { from { opacity: 0; transform: translateY(4px); } }

/* 封面（竖版 2:3） */
.rank-poster {
    position: relative;
    flex: 0 0 96px;
    width: 96px;
    height: 134px;
    border-radius: 10px;
    overflow: hidden;
    background: #242321;
}
.rank-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* 封面底部「更新至xx集」角标 */
.rank-badge {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 3px 6px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
    text-align: center;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.35));
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 右侧信息区 */
.rank-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.rank-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.3;
    padding-right: 24px;     /* 给右上角排名徽章让位，避免重叠 */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* ★ 爆剧角标：异常热度（环比飙升）红色「爆」，紧贴标题右侧，轻微呼吸提示 */
.rank-spike {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.6;
    color: #fff;
    background: linear-gradient(135deg, #ff2d2d, #ff6b1a);
    border-radius: 5px;
    vertical-align: 2px;
    animation: rankSpikePulse 1.6s ease-in-out infinite;
    box-shadow: 0 1px 6px rgba(255, 45, 45, 0.45);
}
@keyframes rankSpikePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}
.rank-spike-note { color: #ff5c5c; font-weight: 600; }
.rank-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
/* 评分角标：≥8 红（高分/涨），≥7 橙，其余灰。国内习惯「红=好」 */
.rank-score {
    flex: 0 0 auto;
    padding: 1px 7px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 5px;
    color: #d8d4cd;
    background: var(--soft);
    font-variant-numeric: tabular-nums;
}
.rank-score.mid { color: #ffc07a; background: rgba(255, 156, 72, 0.14); }
/* 源站备注（更新至第X集 / 已完结）：弱化，紧跟元信息 */
.rank-meta-rm { color: #8f8b84; }
.rank-score.hot { color: #ff5c5c; background: rgba(255, 92, 92, 0.14); }

.rank-meta {
    font-size: 12.5px;
    color: var(--muted);
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rank-desc {
    font-size: 12.5px;
    line-height: 1.5;
    color: #c7c3bc;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* 演员标签：紧凑排列，4 个标签一行能放下 */
.rank-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: auto;
}
.rank-tag {
    padding: 1px 7px;
    font-size: 11px;
    line-height: 1.5;
    color: #d8d4cd;
    background: var(--soft);
    border-radius: 4px;
    white-space: nowrap;
}

/* ===== 加载中 ===== */
.rank-loading {
    display: flex;
    justify-content: center;
    padding: 60px 0;
}
.rank-spinner {
    width: 30px;
    height: 30px;
    border: 3px solid rgba(255, 156, 72, 0.25);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: rank-spin 0.8s linear infinite;
}
@keyframes rank-spin { to { transform: rotate(360deg); } }

/* ===== 空态 ===== */
.rank-empty {
    padding: 80px 20px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
}

/* ===== 已到底 ===== */
.rank-end {
    padding: 22px 0 8px;
    text-align: center;
    font-size: 12px;
    color: var(--muted);
}

/* ===== 排行榜卡片懒渲染（Top250 全量渲染优化） ===== */
.rank-card {
    content-visibility: auto;
    contain-intrinsic-size: 300px 450px;
}

/* 🔥 大火：异常中的异常（环比≥150% 或 z≥3），红底更醒目 */
.rank-spike.rank-fire {
    background: #e5484d;
    color: #fff;
    font-weight: 700;
}