/* shop_money 样式，class 前缀使用 shop_mongey（按请求） */
.shop_mongey-panel {
    display: none;
    color: #fff;
    font-family: "Helvetica Neue", Arial, sans-serif;
    z-index: 100;
    box-sizing: border-box;
    height: 80%;
    margin-top: 20%;
}

.shop_mongey-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    color: var(--btn_color_q);
    font-weight: 700;
    background: rgba(0, 0, 0, 0.25);
}

.shop_mongey-currency {
    position: absolute;
    right: 10px;
}

.shop_mongey-currency-icon {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 6px;
}

.shop-money-close {
    background: rgba(255,255,255,0);
    color: #fff;
    border: none;
    padding: 0px;
    border-radius: 6px;
    cursor: pointer;
    position: absolute;
    right: 2px;
    bottom: 0px;
}

.shop_mongey-currency-amount {
    color: #ffea8a;
    font-weight: 700;
}

/* 列表容器（实际滚动区域） */
#shop-money-list {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
    padding: 8px;
    box-sizing: border-box;
}

/* 单行布局：左 80%、右 20% */
.shop_mongey-row {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 0px 8px;
    background: var(--bg_bg_q);
    border-radius: 8px;
    box-sizing: border-box;
    border: 1px solid var(--btn_border_q);
}


.shop_mongey-left-placeholder {
    color: #ccc;
    padding: 8px;
}

.shop_mongey-right {
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    box-sizing: border-box;
}

.shop_mongey-remain {
    color: var(--btn_color_q);
    font-size: 12px;
}

.shop_mongey-buy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 1px 5px;
    border-radius: 4px;
    background: linear-gradient(180deg,#ffb84d,#ff8a00);
    border: 0px solid rgba(0,0,0,0.2);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    min-width: 72px;
}

    .shop_mongey-buy-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

.shop_mongey-currency-btn-icon {
    width: 18px;
    height: 18px;
}

/* 确认弹框 */
.shop_mongey-confirm-overlay {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4000;
}

.shop_mongey-confirm-box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: rgb(51, 51, 51);
    color: rgb(255, 255, 255);
    padding: 30px 0px;
    border-radius: 8px;
    z-index: 4000;
    min-width: 260px;
    box-sizing: border-box;
    text-align: center;
    border: 1px solid var(--btn_border_q);
}

.shop_mongey-confirm-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 30px;
    color: var(--btn_color_q);
}

.shop_mongey-currency-icon-inline {
    width: 18px;
    height: 18px;
    vertical-align: middle;
}

.shop_mongey-confirm-chk {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
}

.shop_mongey-confirm-actions {
    display: flex;
    justify-content: center;
    gap: 30px;
}

.shop_mongey_confirm_skip {
    font-size: 13px;
    color: rgb(223, 141, 35);
}

.shop_mongey-confirm-yes {
    padding: 6px 30px;
    background: var(--btn_bg_q);
    color: var(--btn_color_s);
    border: 1px solid var(--btn_border_q);
    border-radius: 6px;
    font-weight: 700;
}

.shop_mongey-confirm-no {
    padding: 6px 30px;
    background: rgb(181, 181, 181);
    color: var(--btn_color_s);
    border: 1px solid var(--btn_border_q);
    border-radius: 6px;
}

.shop_mongey-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    margin-right: 12px;
    font-size: 14px;
    height: 30px;
    padding: 6px 12px;
    background: var(--btn_bg_s);
    color: var(--btn_color_q);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    white-space: nowrap;
    flex: 0 0 auto;
}

#shop-money-menu .shop_mongey-menu-btn.active {
    background: var(--btn_bg_q);
    color: var(--btn_color_s);
}

/* 底部横向菜单：防止水平滚动时影响外层布局（阻止 scroll chaining / 允许仅横向滑动）*/
.shop_mongey-bottom-menu {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    border-radius: 8px;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x; /* 只允许横向手势，阻止纵向被捕获 */
    overscroll-behavior: contain; /* 阻止滚动链（scroll chaining）到父元素/页面 */
    overscroll-behavior-x: contain;
    padding: 6px 12px;
    box-sizing: border-box;
    background: transparent;
}

/* 兼容：如果不想依赖上面的类，也保留 id 的最小定位属性 */
#shop-money-menu {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    border-radius: 8px;
}

/* 保持左侧物品组统一宽度（以最多 4 个物品为基准） */
.shop_mongey-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    box-sizing: border-box;
    overflow: hidden; /* 防止多余内容撑开宽度 */
    flex: 1 1 auto;
    /* 4 个图标（50px） + 3 个间隙（12px）作为最小保留宽度，保证 2/3/4 个物品时宽度一致 */
    min-width: calc(4 * 50px + 3 * 12px);
    max-width: 100%;
}

    /* 物品显示元素固定尺寸，禁止伸缩，保持占位一致 */
    .shop_mongey-left img,
    .shop_mongey-left .bag-item,
    .shop_mongey-left .item-cell {
        width: 50px;
        height: 50px;
        flex: 0 0 50px;
        box-sizing: border-box;
        object-fit: contain;
    }

    /* 可选：当 JS 未渲染到足够数量时，可插入占位元素保持布局一致（隐藏样式仅用于占位） */
    .shop_mongey-left .item-placeholder {
        width: 50px;
        height: 50px;
        flex: 0 0 50px;
        visibility: hidden;
    }

/* 修复：点击底部切换时 #shop-money-panel 整体左移露白边
   原因：底板在显示/隐藏横向滚动条或子元素 scrollIntoView 时会发生水平溢出或滚动链，
   导致布局宽度变化或父容器滚动。以下样式通过固定面板定位、禁止水平溢出、
   保留滚动槽并阻止滚动链来消除这类位移。*/

.shop_mongey-panel {
    /* 固定定位，确保面板宽度始终与视窗对齐，避免因父布局重排导致偏移 */
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    /* 保证高度语义不变（原有 height、margin-top 会继续生效） */
    overflow-x: hidden; /* 禁止水平溢出，防止露出右侧白边 */
    overscroll-behavior: contain; /* 阻止滚动链（scroll chaining）到页面/父元素 */
    touch-action: pan-y; /* 面板内只允许纵向手势，避免横向滑动导致位移 */
    scrollbar-gutter: stable; /* 为滚动条保留空间，避免出现/隐藏滚动条时引起宽度抖动 */
    box-sizing: border-box; /* 保持与现有样式一致的 box-sizing 行为 */
}

/* 列表容器保留滚动槽，进一步避免垂直滚动条出现时引起布局抖动 */
#shop-money-list {
    scrollbar-gutter: stable;
}

/* 底部横向菜单：重复强调阻止横向滚动链，确保滚动仅限菜单自身 */
.shop_mongey-bottom-menu {
    overscroll-behavior-x: contain;
    touch-action: pan-x;
}

/* shop_mongey-left 新布局：标题（上） + 物品格位（下，固定4列） */
.shop_mongey-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-sizing: border-box;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 6px 0;
    overflow: hidden;
    width: 100%;
}

/* 标题样式（来自 excel 的 title 字段） */
.shop_mongey-left-title {
    font-size: 13px;
    color: var(--btn_color_q);
    font-weight: 600;
    line-height: 1;
    padding-left: 4px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    padding: 4px;
    background-image: url(/resource/image/test1/shop_money_title_bg.png);
    background-size: cover;

}

/* 物品容器：固定 4 列网格，保证 1/2/3/4 个物品占位一致 */
.shop_mongey-left-items {
    display: grid;
    grid-template-columns: repeat(4, 50px); /* 4 列基准 */
    column-gap: 8px;
    row-gap: 8px;
    align-items: center;
    justify-content: start;
    box-sizing: border-box;
    overflow: hidden;
    width: calc(4 * 50px + 3 * 8px); /* 为父布局保留稳定宽度 */
}

    /* 单个物品占位样式（bag_js 渲染节点若不是固定大小可用此样式约束） */
    .shop_mongey-left-items > * {
        width: 50px;
        height: 50px;
        box-sizing: border-box;
        display: block;
        object-fit: contain;
    }

/* 占位与错误展示 */
.shop_mongey-left-placeholder,
.shop_mongey-left-error {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    font-size: 12px;
}

.shop_mongey-first-overlay {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
}

.shop_mongey-first-card {
    position: relative;
    width: 92%;
    max-width: 420px;
    height: 300px;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(180deg, #4a2815 0%, #26150d 100%);
    border: 1px solid var(--btn_border_q);
}

.shop_mongey-first-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 14px 24px;
    box-sizing: border-box;
}

.shop_mongey-first-title {
    color: rgb(255 255 38);
    font-size: 30px;
    text-align: center;
    font-family: 'GameXingkai', "STXingkai", "华文行楷", "LiSu", serif;
}

.shop_mongey-first-items {
    width: 100%;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.shop_mongey-first-empty {
    color: #ccc;
    font-size: 13px;
}

.shop_mongey-first-buy-row {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: auto;
}

.shop_mongey-first-buy-btn {
    min-width: 132px;
    height: 42px;
    border: none;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

    .shop_mongey-first-buy-btn:disabled {
        opacity: .5;
    }

.shop_mongey-first-buy-cost {
    color: #fff4b3;
    font-size: 30px;
    font-family: 'GameXingkai', "STXingkai", "华文行楷", "LiSu", serif;
}

.shop_mongey-first-buy-icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.shop_mongey-first-soldout {
    width: 70px;
    object-fit: contain;
}

.shop_mongey-first-gril-bg {
    position: absolute;
    left: 50%;
    top: 2%;
    transform: translateX(-50%);
    width: 80%;
    z-index: -1;
    opacity: 1;
    pointer-events: none;
}