/* game-loader.css 终极定稿 - 文字加粗放大+进度条100%流畅+所有视觉效果保留 */

html,
body {

    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: #231F20;
}



#tuanjie-canvas {
    width: 100%;
    height: 100%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    display: none;

}



/* 加载页容器 - 仅做全屏兜底 */

#loader-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #231F20;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;

}



/* 核心：背景图容器作为定位根节点 1920x1080 精准适配 */

#bg-container {
    position: relative;
    width: 100vmin;
    /* 按屏幕短边适配，保证背景图完整显示 */
    height: calc(100vmin * (1080 / 1920));
    /* 1920:1080 固定比例 */

}



/* bg.jpg 1920x1080 原图比例显示，无拉伸变形 */

#loader-bg {
    width: 100%;
    height: 100%;
    background: url('./bg.jpg') no-repeat center center;
    background-size: 100% 100%;
    opacity: 0.85;

}



/* 关键：进度条在背景图内，距背景图底14% */

.progress-container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14%;
    /* 距离背景图底边框14%，精准生效 */
    display: flex;
    flex-direction: column;
    align-items: center;

}



/* ========== ✅ 核心修改：文字加粗放大 ========== */

.progress-text {

    color: #fff;

    font-size: 32px;
    /* 字体放大，默认16px→32px，可按需调整 */

    font-weight: 900;
    /* 字体加粗，900是最粗，比bold更明显 */

    text-shadow: 0 0 8px #000;
    /* 阴影放大，增强辨识度 */

    margin-bottom: 15px;

}



/* 进度条宽度占背景图80%，左右各10%边距，视觉正常 */

.progress-box {

    width: 80%;
    /* 基于背景图宽度，不再过窄 */

    height: 48px;
    /* progress_bg.png 真实高度48px */

    position: relative;

    background: url('./progress_bg.png') no-repeat center center;

    background-size: 100% 100%;

    border-radius: 24px;
    /* 圆角=高度一半，完美不变形 */

    overflow: visible;
    /* 滑块无裁切 */

}



/* 进度条本体参数不变，完美匹配 */

.progress-bar {

    position: absolute;

    top: 5px;
    /* 垂直居中5px (48-38)/2=5 */

    left: 4px;
    /* 右偏移4px 保留 */

    height: 38px;
    /* progress_bar.png 真实高度38px */

    width: 0%;

    background: url('./progress_bar.png') no-repeat left center;

    background-size: 100% 100%;

    transition: width 0.12s ease-out;

    border-radius: 19px;
    /* 进度条圆角=高度一半 */

}



/* 滑块参数不变，精准跟随 */

.bar-tag {
    position: absolute;
    top: calc(50% - 10px);
    /* 上偏移10px 保留 */
    left: 4px;
    /* 右偏移4px 同步 */

    transform: translate(-50%, -50%);

    width: 77px;
    /* 滑块宽度77px */

    height: 110px;
    /* 滑块高度110px */

    background: url('./bar_tag.png') no-repeat center center;

    background-size: 100% 100%;

    z-index: 10;

    pointer-events: none;

    transition: left 0.12s ease-out;

}