/* ============================================================
 * 榜单通用样式（.rank-*）
 * 2026-10-10 从 views/rank.php 的内联 <style> 抽出，供下列页面共用：
 *   - rank.php      公路均速总榜单（TAB 页）
 *   - rank_road.php 高速路榜单 / 市区路榜单
 * 说明：本文件同时含「TAB 容器」样式（.rank-tabs/.rank-panel 等），仅 rank.php 用到；
 * rank_road.php 无对应 DOM，规则自然不生效，无需拆分。
 * ============================================================ */
    /* ===== 榜单 TAB（仿 App Store 风格） ===== */
    .rank-tabs {
        display: flex;
        gap: 12px;
        justify-content: center;
        margin: 20px 0 24px;
    }
    .rank-tab {
        border: none;
        cursor: pointer;
        font-size: 15px;
        font-weight: 600;
        padding: 10px 26px;
        border-radius: 980px;
        background: #f2f2f7;
        color: #1c1c1e;
        transition: all .2s;
    }
    .rank-tab:hover { background: #e6e6eb; }
    .rank-tab.active {
        background: #0a84ff;
        color: #fff;
        box-shadow: 0 4px 14px rgba(10,132,255,.35);
    }
    .rank-panels { width: 100%; }
    .rank-panel { display: none; }
    .rank-panel.active { display: block; animation: rankFade .25s ease; }
    @keyframes rankFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

    .rank-charts {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
        align-items: start;
    }
    @media (max-width: 1180px) { .rank-charts { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 820px)  { .rank-charts { grid-template-columns: 1fr; } }

    /* ===== 单个榜单卡片（App Store 图表风） ===== */
    .rank-chart {
        background: #fff;
        border-radius: 18px;
        box-shadow: 0 2px 14px rgba(0,0,0,.07);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    .rank-chart-head { padding: 18px 18px 10px; }
    .rank-chart-title {
        font-size: 18px;
        font-weight: 700;
        color: #1c1c1e;
        letter-spacing: .3px;
    }
    .rank-chart-desc {
        margin-top: 6px;
        font-size: 12.5px;
        line-height: 1.6;
        color: #8e8e93;
    }
    .rank-chart-img { padding: 0 18px 10px; }
    .rank-chart-img img { max-width: 100%; border-radius: 10px; }
    /* 定位上下文：使“高速云摄像头载入中”遮罩仅覆盖视频窗，不再全屏 */
    .rank-chart-video { position: relative; padding: 6px 0 12px; }
    /* 统一视频窗口：固定 16:9，载入遮罩与播放窗同尺寸，避免首次载入全屏/尺寸跳动 */
    .rank-chart-video > video,
    .rank-chart-video > iframe,
    .rank-chart-video .rank-v-slot {
        display: block;
        width: 100%;
        aspect-ratio: 16 / 9;
        height: auto;
        background: #000;
        border-radius: 10px;
        overflow: hidden;
    }
    .rank-chart-video > video { object-fit: cover; }
    /* 故障切换（榜单2/3）内层视频/iframe 填满固定窗口，与榜单1视频窗同尺寸 */
    .rank-chart-video .rank-v-slot > video:not(.rank-v-crop),
    .rank-chart-video .rank-v-slot > iframe,
    .rank-chart-video .rank-v-slot > .rank-vplayer,
    .rank-chart-video .rank-v-slot > .rank-vplayer video:not(.rank-v-crop) {
        position: absolute;
        inset: 0;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        border-radius: 0;
    }
    /* 第4路（摄像头源，实测 352×288 = 11:9，比 16:9 窗口窄）：
       窗口回到统一的 16:9（与其他三路一致）。视频用 cover 等比放大填满窗口，
       并 object-position: center top 顶部对齐 —— 裁切**只发生在底部**：
         保留：右上角时间戳（在顶部）
         裁掉：底部 speedtest 那一行
       无黑边。裁掉量 = 显示高度 338 − 窗口高度 232 = 底部 106px（≈原帧底部 90px / 31%）。 */
    #rank-v-slot-4 { aspect-ratio: 16 / 9; }
    #rank-v-slot-4 > video,
    #rank-v-slot-4 > iframe,
    #rank-v-slot-4 > .rank-vplayer video {
        object-fit: cover;
        object-position: center top;
    }

    .rank-rows { padding: 6px 8px 16px; }
    .rank-empty {
        text-align: center;
        padding: 28px 0;
        color: #bbb;
        font-size: 13px;
    }
    .rank-row {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 11px 8px;
        border-bottom: 1px solid #f0f0f2;
    }
    .rank-row:last-child { border-bottom: none; }
    .rank-pos {
        width: 28px;
        text-align: center;
        font-weight: 700;
        font-size: 17px;
        color: #b0b0b5;
        flex-shrink: 0;
    }
    .rank-pos.top1 { color: #ff3b30; }
    .rank-pos.top2 { color: #ff9500; }
    .rank-pos.top3 { color: #ffcc00; }
    .rank-icon {
        width: 56px;
        height: 56px;
        border-radius: 13px;
        object-fit: cover;
        flex-shrink: 0;
        background: #f0f0f2;
        box-shadow: 0 1px 4px rgba(0,0,0,.10);
    }
    .rank-meta {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }
    .rank-name {
        font-size: 15px;
        font-weight: 600;
        color: #1c1c1e;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .rank-sub {
        font-size: 12px;
        color: #8e8e93;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-top: 2px;
    }
    .rank-metric {
        font-size: 12.5px;
        font-weight: 600;
        color: #0a84ff;
        flex-shrink: 0;
        margin-right: 4px;
    }
    /* 成绩单位（km/h 等）：比数字小一号、颜色更浅，避免抢数字视觉 */
    .rank-metric-unit {
        margin-left: 3px;
        font-size: 10.5px;
        font-weight: 500;
        color: #6aa9dd;
    }
    .rank-badge-ba {
        align-self: flex-start;
        margin-top: 5px;
        padding: 2px 10px;
        font-size: 11.5px;
        font-weight: 700;
        line-height: 1.5;
        color: #fff;
        background: linear-gradient(135deg, #ff9f0a, #ff6a00);
        border-radius: 980px;
        box-shadow: 0 2px 6px rgba(255,106,0,.32);
        white-space: nowrap;
    }

    .rank-get {
        flex-shrink: 0;
        text-decoration: none;
        background: #0a84ff;
        color: #fff;
        font-size: 13px;
        font-weight: 600;
        padding: 7px 16px;
        border-radius: 980px;
        transition: background .15s;
    }
    .rank-get:hover { background: #007aff; }

    /* ===== 视频播放器相关 class（与 RankVideoPlayer JS 对应，原样保留） ===== */
    .rank-vplayer { position: relative; line-height: 0; }
    .rank-vplayer video { width: 100%; display: block; background: #000; }
    .rank-v-crop-active { aspect-ratio: 16 / 9; background: #000; }
    .rank-v-crop-win {
        position: absolute; left: 0; bottom: 0; z-index: 1;
        width: 100%; height: 100%;
        overflow: hidden; background: #000;
        border: 1px solid rgba(255,255,255,.12);
    }
    .rank-v-crop { width: 100%; height: 100%; object-fit: cover; display: block; }
    .rank-column-video video::-webkit-media-controls-enclosure,
    .rank-chart-video video::-webkit-media-controls,
    .rank-chart-video video::-webkit-media-controls-enclosure,
    .rank-chart-video video::-webkit-media-controls-panel,
    .rank-chart-video video::-webkit-media-controls-overlay-enclosure { display: none !important; }
    .rank-ppbtn {
        position: absolute; left: 50%; top: 50%; z-index: 3;
        transform: translate(-50%, -50%);
        width: auto; height: auto; padding: 0; cursor: pointer; border: none;
        background: transparent; color: rgba(255,255,255,0.75);
        font-size: 26px; line-height: 1; text-align: center;
        text-shadow: 0 0 8px rgba(0,0,0,0.65);
    }
    .rank-ppbtn:hover { transform: translate(-50%, -50%) scale(1.1); color: #fff; }
    /* 暂停时覆盖视频当前帧，避免 hls.stopLoad() 后部分浏览器黑屏 */
    .rank-pause-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; display: none; border-radius: 0; }
    .rank-v-slot { position: relative; line-height: 0; }
    /* 榜单2/3 采用 loop 模式（15秒暂停+播放键循环），需要显示播放键，故不再隐藏 */
    /* .rank-v-slot[data-hideui="1"] .rank-ppbtn { display: none !important; } */
    .rank-v-slot[data-hideui="1"] .rank-v-loading { display: none !important; }