/* 覆盖并补充首页样式，确保头像与头像框重叠、头像框在底部，金币/钻石垂直排列 */

.gi-btn {
    background: linear-gradient(90deg, rgb(90 181 165 / 93%), rgb(7 189 157));
    color: #bf0b66;
    font-weight: 600;
}

/* 容器 */
.index-root {
    background-color: transparent;
    width: 100%;
    height: 100%;
    max-width: 600px;
    margin: 0;
    position: absolute;
    z-index: 90;
    box-sizing: border-box;
    pointer-events: none;
}

/* 顶部条 */
.index-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    background: var(--btn_bg_s);
    color: #fff;
    pointer-events: auto; /* 允许顶部条交互 */
    padding: 6px;
    /*background-image: url('/resource/image/test1/shop_money_title_bg.png');*/
}

/* 左侧：头像容器，头像与头像框叠加 */
.top-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 25%;
}

.avatar-wrap {
    position: relative;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 头像框：置于底部，宽度比头像更大，位于 z-index 1 */
.avatar-frame-img {
    position: absolute;
    left: -5px;
    top: -5px;
    object-fit: cover;
    z-index: 1;
    max-width: 60px;
}
.avatar-img {
    max-width: 50px;
    position: absolute;
    top: 0px;
    left: 0px;
}
/* 中间：角色名称与战力（战力用单独小块） */
.top-center {
    width: 50%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.player-nick {
    font-size: 15px;
    font-weight: 600;
    color: var(--btn_color_q);
    margin-bottom: 6px;
}

.player-power {
    font-size: 14px;
    color: #fff;
}

/* 右侧：资源垂直排列（钻石/金币/战力上下排列） */
.top-right {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-right: 12px;
    box-sizing: border-box;
}

/* 资源行：按列显示（垂直）; 修改为左对齐 */
.res-row {
    display: flex;
    flex-direction: column; /* 垂直排列 */
    gap: 6px;
    align-items: flex-start; /* 左对齐 -> 修改点 */
}

/* 单个资源项：左对齐内部内容 */
.res-inline {
    display: flex;
    align-items: center;
    gap: 4px;
    border-radius: 6px;
    background: transparent;
    color: #fff;
    justify-content: flex-start; /* 确保图标与数值靠左排列 -> 修改点 */
}

    .res-inline img {
        max-height: 15px;
        object-fit: cover;
        display: block;
        margin-left:10px;
    }

.res-value {
    font-weight: 700;
    color: var(--btn_color_q);
    font-size: 12px;
    min-width: 76px;
}

/* 中间与侧边按钮 */
.index-middle {
    display: flex;
    padding: 0;
    box-sizing: border-box;
}

.side-left, .side-right {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 16%;
}

.side-buttons {
    display: flex;
    flex-direction: column;
    padding: 30px 5px;
    box-sizing: border-box;
}

    .side-buttons.right {
        align-items: flex-end;
    }

.side-btn {
    border-radius: 2px;
    border: 1px solid rgba(0,0,0,0.08);
    background: #fff;
    color: #333;
    cursor: pointer;
    pointer-events: auto; /* 允许侧边按钮交互 */
}

/* 中间空白 */
.middle-empty {
    flex: 1;
}

/* 底部按钮：默认与选中样式 */
.index-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px;
    box-sizing: border-box;
    background: transparent;
    pointer-events: auto; /* 允许底部条交互 */
}

.bottom-btn {
    width: 100%;
    height: 100%;
    border: none;
    background: var(--btn_bg_q);
    color: var(--btn_color_s);
    cursor: pointer;
    transition: all .12s ease;
    height: 80%;
}

    .bottom-btn.selected {
        background: var(--btn_bg_s);
        color:var(--btn_color_q);
        font-weight: 700;
        box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }

/* 选中态：恢复亮度并略微放大与增饱和 */
.index-bottom .bottom-btn.selected img {
    filter: brightness(1.1) saturate(1.12) grayscale(0);
    transform: scale(1.2);
}