/* rank.css - 主排行榜样式 */

/* 根容器 */
#rank-plane.rank-panel {
    background: var(--btn_bg_s);
    color: var(--btn_color_q);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
    overflow: hidden;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    pointer-events: auto;
    width: 100%;
    height: 100%;
}

    /* 内部布局 */
    #rank-plane.rank-panel .rank-inner {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    /* 顶部（标题） */
    #rank-plane.rank-panel .rank-top {
        height: 10%;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(255,255,255,0.04);
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        background: rgba(0,0,0,0.20);
        padding: 0px 20px;
        gap:12px;
    }

    #rank-plane.rank-panel .rank-title {
        font-size: 18px;
        font-weight: 700;
        color: #ffd;
    }

    /* 中部列表（默认高度 84%） */
    #rank-plane.rank-panel .rank-mid {
        height: 84%;
        padding: 8px 12px;
        box-sizing: border-box;
        overflow: hidden;
        -webkit-overflow-scrolling: touch;
    }

    #rank-plane.rank-panel .rank-list {
        height: 100%;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding-right: 6px;
    }

    /* 列项 */
    #rank-plane.rank-panel .rank-row {
        padding: 8px;
        background: rgba(255,255,255,0.02);
        border-radius: 6px;
        display: flex;
        align-items: center;
    }

    /* 栏位辅助 */
    #rank-plane.rank-panel .col {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #rank-plane.rank-panel .col_left {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    /* 头像与meta */
    #rank-plane.rank-panel .player-avatar {
        width: 48px;
        height: 48px;
        position: relative;
        flex-shrink: 0;
    }

    #rank-plane.rank-panel .avatar-img {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        object-fit: cover;
        display: block;
        border: 2px solid rgba(255,255,255,0.06);
    }

    #rank-plane.rank-panel .player-meta {
        display: flex;
        flex-direction: column;
        font-size: 13px;
    }

    #rank-plane.rank-panel .player-name {
        font-weight: 600;
        color: #fff;
    }

    #rank-plane.rank-panel .player-level {
        font-size: 12px;
        color: rgba(255,255,255,0.6);
    }

    /* 底部：默认一行 my-rank + close */
    #rank-plane.rank-panel .rank-bottom {
        height: 6%;
        min-height: 48px;
        padding: 8px 12px;
        box-sizing: border-box;
        border-top: 1px solid rgba(255,255,255,0.03);
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: rgba(0,0,0,0.12);
    }

    /* my-rank / close */
    #rank-plane.rank-panel .my-rank {
        font-size: 13px;
        color: #fff;
    }

    #rank-plane.rank-panel .close-btn {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        position: absolute;
        top: 6px;
        right: 6px;
    }
    }

    #rank-plane.rank-panel .close-img {
        width: 40px;
        height: 40px;
    }

/* ---------- 主模式：rank-mid 减少 10%，在 my-rank 下方显示控制条 ---------- */
/* rank-mid 减少 10%（示例从 84% -> 74%） */
#rank-plane.rank-main-mode .rank-mid {
    height: 77%;
    overflow: hidden;
}

/* 当进入主模式时，rank-bottom 垂直布局：my-rank 在上，控制条在下，close-btn 保留在顶部行右侧 */
#rank-plane.rank-main-mode .rank-bottom {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 8px;
}

/* 主底部控制条（单独行，一行显示） */
.rank-main-bar {
    display: none; /* 默认隐藏，只有 rank-main-mode 下显示（由 JS 也可控制） */
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 8px;
    border-top: 1px solid rgba(255,255,255,0.03);
    background: rgba(0,0,0,0.18);
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
}

/* 在主模式下显示控制条 */
#rank-plane.rank-main-mode .rank-main-bar {
    display: flex;
}

/* 将 close-btn 保持在第一行右侧：通过在 rank-bottom 内第一行使用 flex */
#rank-plane.rank-main-mode .rank-bottom > .my-rank {
    order: 0;
}

#rank-plane.rank-main-mode .rank-bottom > .close-btn {
    order: 0;
    align-self: flex-end;
}

/* 下拉（自定义） */
.rank-main-dropdown {
    position: relative;
    display: inline-block;
}

.rank-main-dropdown-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(255,255,255,0.03);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.04);
    cursor: pointer;
    font-size: 14px;
}

.rank-main-dropdown-caret {
    opacity: 0.8;
    font-size: 12px;
}

/* 将下拉菜单显示在按钮上方（替换原有 .rank-main-dropdown-menu 规则） */
.rank-main-dropdown-menu {
    position: absolute;
    left: 0;
    top: auto; /* 取消向下定位 */
    bottom: calc(100% + 6px); /* 在按钮上方显示，间距6px */
    min-width: 120px;
    background: rgba(0,0,0,0.95);
    border: 1px solid rgba(255,255,255,0.04);
    box-shadow: 0 6px 12px rgba(0,0,0,0.6);
    border-radius: 6px;
    display: none;
    z-index: 9999;
    overflow: hidden;
}

    .rank-main-dropdown-menu .rank-main-dropdown-item {
        padding: 8px 10px;
        cursor: pointer;
        font-size: 14px;
        color: #fff;
        white-space: nowrap;
    }

        .rank-main-dropdown-menu .rank-main-dropdown-item:hover {
            background: rgba(255,255,255,0.03);
        }

    .rank-main-dropdown-menu.rank-open {
        display: block;
    }

/* metric 区域 */
.rank-main-buttons {
    display: flex;
    gap: 0px;
    align-items: center;
    flex-wrap: wrap;
}

.rank-metric-btn {
    padding: 8px 12px;
    border-radius: 6px;
    background: transparent;
    color: #fff;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 14px;
}

    .rank-metric-btn:hover {
        background: rgba(255,255,255,0.03);
    }

    .rank-metric-btn.rank-metric-active {
        background: linear-gradient(90deg, rgba(255,193,7,0.12), rgba(255,193,7,0.06));
        border-color: rgba(255,193,7,0.25);
        color: #ffd54f;
    }

/* 响应式：小屏时底部换行 */
@media (max-width:520px) {
    #rank-plane.rank-main-mode .rank-bottom {
        gap: 8px;
    }

    .rank-main-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .rank-main-buttons {
        justify-content: space-between;
    }
}
.top-icon-img{
    max-width:40px;
}
/* 隐藏 rank-list 的滚动条（仍保留滚动功能） */
#rank-plane .rank-list {
    -ms-overflow-style: none; /* IE 10+ */
    scrollbar-width: none; /* Firefox */
}
/* rank-list 作为定位容器，保证占位层能绝对居中 */
#rank-plane .rank-list {
    position: relative; /* 若已有，请保持，不要覆盖其它必需样式 */
}

    /* 空数据提示样式（上下左右居中） */
    #rank-plane .rank-list .rank-empty {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255,255,255,0.6);
        font-size: 14px;
        pointer-events: none;
        user-select: none;
        padding: 12px;
        box-sizing: border-box;
        text-align: center;
    }

/* 使 my-rank 内部内容在垂直方向居中 */
#rank-plane.rank-panel .rank-bottom .my-rank {
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: flex-start; /* 如需水平居中改为 center */
    height: 100%;
    padding: 0 16px; /* 轻微左右内边距，防止贴边 */
    box-sizing: border-box;
    gap:110px;
}

/* 在主模式下（rank-bottom 可能为 column）也确保 my-rank 内容居中 */
#rank-plane.rank-main-mode .rank-bottom > .my-rank {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}