.top_player_container_box {
    width: 100%;
    height: 450px; /* 可调节高度 */
    background-image: url('../images/top_player_bg.webp'), url('../images/top_player_bg.png');
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column; /* 让子容器垂直排列 */
    align-items: center; /* 水平居中 */
    justify-content: flex-start; /* 保证子容器从上往下排列 */
}

/* 子容器 1 单独样式 */
.top_player_sub_box1 {
    width: 100%; /* 宽度可调 */
    font-size: 50px; /* 字体大小可调 */
    color: white; /* 字体颜色可调 */
    font-weight: 700;
    display: flex;
    align-items: center; /* 让内容垂直居中 */
    justify-content: center; /* 让内容水平居中 */
    margin-top: 250px; /* 控制与父容器顶部的距离 */

}

/* 子容器 2 单独样式 */
.top_player_sub_box2 {
    width: 100%; /* 宽度可调 */
    font-size: 18px; /* 字体大小可调 */
    color: rgb(211, 211, 211); /* 字体颜色可调 */
    display: flex;
    align-items: center; /* 让内容垂直居中 */
    justify-content: center; /* 让内容水平居中 */
    margin-top: 30px; /* 控制与子容器 1 的距离 */
}

.top_player_container_custom {
    width: 100%; /* 宽度铺满浏览器 */
    height: 95px; /* 高度可调，根据需要修改 */
    background-image: url('../images/bar_c5bca8ec.webp'), url('../images/bar_c5bca8ec.png'); 
    background-size: cover; /* 背景图片铺满容器 */
    background-position: center; /* 图片居中对齐 */
    background-repeat: no-repeat; /* 防止图片重复 */
}

/* 子容器样式 */
.top_player_container_custom_sub {
    width: 160px; /* 宽度可调 */
    height: 200px; /* 高度可调 */
    background-image: url('../images/flag_2f4cdb37.webp'), url('../images/flag_2f4cdb37.png'); 
    background-size: contain; /* 保持图片完整显示，不裁剪 */
    background-position: center;
    background-repeat: no-repeat;
    position: absolute; /* 绝对定位，让它浮在父容器上 */
    top: -30px; /* 控制子容器相对父容器顶部的距离 */
    left: 25%; /* 水平位置 */
    transform: translateX(-50%); /* 让子容器真正居中 */
    z-index: 10; /* 确保子容器在父容器之上 */
    display: flex;
    align-items: flex-start; /* 让内容靠近顶部 */
    justify-content: flex-start; /* 让内容靠近左侧 */
    padding-top: 55px; /* 控制图片与容器顶部的距离 */
    padding-left: 25px; /* 控制图片与容器左侧的距离 */
}

/* 内部图片样式 */
.top_player_container_custom_sub img {
    width: 110px; /* 图片宽度可调 */
    height: auto; /* 保持图片比例 */
}

.top_player_container_gold {
    width: 100%; /* 宽度铺满浏览器 */
    height: auto; /* 高度可调 */
    background-color: #E9D8AC; /* 淡金色 (Wheat) */
    position: relative; /* 关键：让子容器以此为参照 */
}

/* 字体容器 1 样式 */
.top_player_text_1 {
    font-size: 30px; /* 字体大小可调 */
    color: #2e0b05; /* 字体颜色可调 */
    font-weight: 800;
    margin-top: 50px; /* 控制两个字体容器之间的间距 */
    text-align: center; /* 水平居中 */
}

/* 字体容器 2 样式 */
.top_player_text_2 {
    font-size: 18px; /* 字体大小可调 */
    color: #191a1b; /* 字体颜色可调 */
    margin-top: 25px; /* 控制两个字体容器之间的间距 */
    text-align: center; /* 水平居中 */
}

/* 子容器样式 */
.top_player_container_gold_split {
    width: 60%; /* 宽度可调 */
    height: 30px; /* 高度可调 */
    background-image: url('../images/split_103a52d6.webp'), url('../images/split_103a52d6.png');
    background-size: cover; /* 确保图片填满容器 */
    background-position: center;
    background-repeat: no-repeat;

    /* 让容器水平居中 */
    margin-left: auto;
    margin-right: auto;

    /* 控制距离父容器顶部的距离（可调） */
    margin-top: 50px; /* 这里可以自由调整 */
}

/* 表格容器样式 */
.top_player_container_gold_table_top {
    width: 60%; /* 总宽度可调 */
    margin: 20px auto; /* 水平居中，垂直上下间距可调 */
    border-collapse: collapse; /* 表格边框合并 */
}

/* 表格行样式 */
.top_player_container_gold_table_top tr {
    height: 60px; /* 每行高度可调 */
}

/* 表格单元格样式 */
.top_player_container_gold_table_top td {
    border: 1px solid #ccc; /* 边框颜色可调 */
    text-align: center; /* 水平居中 */
    vertical-align: middle; /* 垂直居中 */
    padding: 10px; /* 内边距，可调 */
}

/* 单元格中的字体样式 */
.top_player_container_gold_table_top td span {
    font-size: 16px; /* 字体大小可调 */
    color: #000; /* 字体颜色可调 */
    padding-left: 10px; /* 缩进距离可调 */
}





/* 表格容器样式 */
.top_player_container_gold_table {
    width: 60%; /* 总宽度 60% */
    height: auto; /* 高度可调 */
    margin: 20px auto; /* 垂直居中，并在上下添加间距 */
    border-collapse: collapse; /* 合并表格边框 */
}

/* 表格的每一行 */
.top_player_container_gold_table tr {
    height: 60px; /* 每行的高度可调 */
}

/* 表格的每一列 */
.top_player_container_gold_table td {
    border: 1px solid #ccc; /* 为每列添加边框 */
    text-align: center; /* 水平居中 */
    vertical-align: middle; /* 垂直居中 */
    padding: 10px; /* 内边距，增加可读性 */
}

/* 第一列背景图片 */
.top_player_container_gold_table td.first-column {
    background-image: url('../images/standard_2aab3f01.png');
    background-size: 100% 100%; /* 背景图片铺满单元格 */
    background-position: center; /* 背景图片居中显示 */
    background-repeat: no-repeat; /* 不重复背景图片 */
    
    font-size: 20px; /* 字体大小可调 */
    color: #fff; /* 文字颜色可调，白色 */
    font-weight: 950; /* 字体加粗 */
    
    /* 黑色边框（描边） */
    text-shadow: 
        -1px -1px 0 #000,  
         1.5px -1px 0 #000,  
        -1px  1.5px 0 #000,  
         1.5px  1.5px 0 #000; /* 四个方向添加黑色阴影，形成描边 */
}

/* 单独设置每一列的宽度 */

/* 第一列宽度 */
.top_player_container_gold_table td:nth-child(1) {
    width: 7%; /* 可调 */
}

/* 第二列宽度 */
.top_player_container_gold_table td:nth-child(2) {
    width: 30%; /* 可调 */
}

/* 第三列宽度 */
.top_player_container_gold_table td:nth-child(3) {
    width: 10%; /* 可调 */
}

/* 第四列宽度 */
.top_player_container_gold_table td:nth-child(4) {
    width: 20%; /* 可调 */
}

/* 第五列宽度 */
.top_player_container_gold_table td:nth-child(5) {
    width: 33%; /* 可调 */
}

/* 数据生成时间格式 */
.top_player_update-time {
    text-align: center;
    font-size: 14px;
    color: #666;
    padding: 10px 0;
}


/* 可调节的底部容器 */
.top_player_container_gold_bot {
    width: 80%; /* 宽度可调 */
    height: 30px; /* 高度可调 */
    background-color: transparent; /* 默认透明，可自行调整 */

    font-size: 16px; /* 字体大小可调 */
    color: #333; /* 字体颜色可调 */
    font-weight: bold; /* 字体加粗（可选） */

    margin: 20px auto; /* 上下间距可调，水平居中 */
    
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    text-align: center; /* 文字多行时仍然居中 */
}



/* 底部子容器 */
.top_player_container_gold_bottom {
    width: 80%;
    height: 300px;
    background-image: url('../images/bg-zs_fc66d973.png'); /* 背景图片 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.3; /* 透明度只影响背景图片 */
    
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0px;
}
