/* =====================================================
   全局
===================================================== */


* {

    margin:0;

    padding:0;

    box-sizing:border-box;

}



html,
body {

    width:100%;

    height:100%;

    overflow:hidden;

    background:#ffffff;


    font-family:

        Arial,

        "Microsoft YaHei",

        sans-serif;

}



body {

    position:relative;

}





/* =====================================================
   Three.js Canvas
===================================================== */


canvas {


    display:block;


    width:100%;

    height:100%;


    opacity:0;


    transition:

        opacity 0.6s ease;


    pointer-events:none;

}



canvas.model-visible {


    opacity:1;


    pointer-events:auto;

}







/* =====================================================
   Loading
===================================================== */


#loading {


    position:fixed;


    left:50%;

    top:50%;


    transform:

        translate(

            -50%,

            -50%

        );



    width:

        min(

            300px,

            40vw

        );



    height:auto;



    color:transparent;


    font-size:0;



    z-index:1000;



    pointer-events:none;



    display:flex;



    flex-direction:column;



    justify-content:center;



    align-items:center;



    gap:
        clamp(
            24px,
            4vh,
            48px
        );



    opacity:1;



    visibility:visible;



    transition:

        opacity .5s ease,

        visibility 0s linear 0s;


}





/* =====================================================
   Loading隐藏
===================================================== */


#loading.loading-hidden {


    opacity:0;


    visibility:hidden;



    transition:


        opacity .5s ease,


        visibility 0s linear .5s;

}





/* =====================================================
   Loading Logo
===================================================== */


#loading::before {


    content:"";


    display:block;



    width:

        clamp(

            220px,

            27.5vw,

            400px

        );



    aspect-ratio:1 / 1;



    background-image:

        url("../image/LOGO.png");



    background-repeat:no-repeat;



    background-position:center;



    background-size:contain;



    opacity:.45;



    animation:

        loadingLogoBreath

        2.2s

        ease-in-out

        infinite;


}






@keyframes loadingLogoBreath {


    0% {


        opacity:.35;


        transform:

            scale(.94);

    }



    50% {


        opacity:1;


        transform:

            scale(1);

    }



    100% {


        opacity:.35;


        transform:

            scale(.94);

    }


}







/* =====================================================
   进入按钮
===================================================== */


#enter-btn {


    padding:
        clamp(10px, 1.2vh, 16px)
        clamp(32px, 5vw, 56px);


    background: #0ca852;


    color: #ffffff;


    border: none;


    border-radius: 30px;


    font-size:
        clamp(14px, 1.4vw, 18px);


    font-weight: 500;


    letter-spacing: 3px;


    cursor: pointer;


    pointer-events: auto;


    z-index: 1001;


    transition: all 0.3s ease;


    box-shadow:
        0 4px 16px
        rgba(12, 168, 82, 0.35);


    animation: enterBtnPulse 2s ease-in-out infinite;

}


#enter-btn:hover {


    background: #0aa44f;


    transform: scale(1.06);


    box-shadow:
        0 6px 24px
        rgba(12, 168, 82, 0.5);

}


#enter-btn:active {


    transform: scale(0.97);

}


@keyframes enterBtnPulse {


    0% {
        box-shadow: 0 4px 16px rgba(12, 168, 82, 0.35);
    }


    50% {
        box-shadow: 0 4px 28px rgba(12, 168, 82, 0.6);
    }


    100% {
        box-shadow: 0 4px 16px rgba(12, 168, 82, 0.35);
    }

}



/* =====================================================
   加载进度条
===================================================== */


#loading-progress {


    width:
        clamp(180px, 22vw, 300px);


    display: none;


    z-index: 1001;

}


#loading-progress-track {


    width: 100%;


    height: 6px;


    background: rgba(0, 0, 0, 0.08);


    border-radius: 3px;


    overflow: hidden;

}


#loading-progress-fill {


    width: 0%;


    height: 100%;


    background: linear-gradient(90deg, #18d86a, #0ca852);


    border-radius: 3px;


    transition: width 0.25s ease;

}


#loading-progress-text {


    text-align: center;


    font-size:
        clamp(11px, 0.9vw, 13px);


    color: #0aaa50;


    margin-top: 10px;


    font-weight: 500;


    letter-spacing: 1px;

}



/* =====================================================
   Logo
===================================================== */


#logo {


    position:fixed;



    left:

        clamp(

            18px,

            2.2vw,

            40px

        );



    top:

        clamp(

            18px,

            2vw,

            35px

        );




    width:

        clamp(

            100px,

            11vw,

            190px

        );



    max-width:18vw;




    z-index:200;



    pointer-events:none;




    opacity:0;



    visibility:hidden;




    transform:

        translateY(-10px);




    transition:


        opacity .8s ease,


        transform .8s ease,


        visibility 0s linear .8s;


}





/* Logo显示 */


#logo.show {


    opacity:1;


    visibility:visible;



    transform:

        translateY(0);



    transition:


        opacity .8s ease,


        transform .8s ease,


        visibility 0s;


}





#logo img {


    display:block;


    width:100%;


    height:auto;


    object-fit:contain;


}







/* =====================================================
   Loading状态隐藏全部正式UI
===================================================== */


body.loading-active #logo,

body.loading-active #logo img,

body.loading-active #control-panel,

body.loading-active #battery-info,

body.loading-active #battery-overlay,

body.loading-active #hint,

body.loading-active #mobile-control-panel {


    opacity:0 !important;


    visibility:hidden !important;


    pointer-events:none !important;


}




body.loading-active canvas,

body.loading-active canvas.model-visible {


    opacity:0 !important;


    pointer-events:none !important;


}


/* =====================================================
   加载完成后显示 UI（防止初始闪烁）
===================================================== */


body.loading-done #control-panel,

body.loading-done #hint {


    opacity: 1;


    visibility: visible;


    transition:
        opacity 0.5s ease;


}


/* =====================================================
   左侧控制面板
===================================================== */

#control-panel {

    position: fixed;

    left:
        clamp(
            15px,
            2.2vw,
            40px
        );

    top: 50%;

    transform:
        translateY(-50%);

    width:
        clamp(
            320px,
            16.667vw,
            640px
        );

    padding:
        clamp(
            18px,
            0.9375vw,
            36px
        );

    background:
        rgba(
            255,
            255,
            255,
            0.92
        );

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            0.07
        );

    border-radius:
        clamp(
            18px,
            0.9375vw,
            36px
        );

    box-shadow:
        0 10px 35px
        rgba(
            0,
            0,
            0,
            0.08
        );

    z-index: 30;

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.5s ease,
        visibility 0s linear 0.5s;
}


/* =====================================================
   控制按钮
===================================================== */

.control-button {

    position: relative;

    width: 100%;

    height:
        clamp(
            46px,
            2.396vw,
            92px
        );

    margin-bottom:
        clamp(
            10px,
            0.521vw,
            20px
        );

    border: none;

    border-radius:
        clamp(
            11px,
            0.573vw,
            22px
        );

    background:
        #f3f5f4;

    color: #333;

    font-size:
        clamp(
            13px,
            0.677vw,
            26px
        );

    font-weight: 400;

    text-align: left;

    padding-left:
        clamp(
            15px,
            0.781vw,
            30px
        );

    padding-right:
        clamp(
            58px,
            3.021vw,
            116px
        );

    cursor: pointer;

    transition:
        all 0.2s ease;

    overflow: hidden;

    white-space: nowrap;
}


/* =====================================================
   最后一个按钮
===================================================== */

.control-button:last-child {

    margin-bottom: 0;
}


/* =====================================================
   Hover
===================================================== */

.control-button:hover {

    background:
        #e8f8ee;

    color:
        #0ca852;

    transform:
        translateX(3px);
}


/* =====================================================
   Active
===================================================== */

.control-button.active {

    background:
        #dff8e9;

    color:
        #0aa44f;
}


/* =====================================================
   Disabled
===================================================== */

.control-button.disabled {

    opacity: 0.35;

    cursor: not-allowed;

    transform: none;
}


/* =====================================================
   按钮左侧圆点
===================================================== */

.button-dot {

    display: inline-block;

    width:
        clamp(
            7px,
            0.365vw,
            14px
        );

    height:
        clamp(
            7px,
            0.365vw,
            14px
        );

    border-radius: 50%;

    background:
        #c8c8c8;

    margin-right:
        clamp(
            7px,
            0.365vw,
            14px
        );

    vertical-align: 1px;

    flex-shrink: 0;
}


/* =====================================================
   Active 圆点
===================================================== */

.control-button.active
.button-dot {

    background:
        #18d86a;

    box-shadow:
        0 0 8px
        rgba(
            25,
            214,
            107,
            0.7
        );
}


/* =====================================================
   状态文字
===================================================== */

.button-state {

    position: absolute;

    right:
        clamp(
            12px,
            0.625vw,
            24px
        );

    top: 50%;

    transform:
        translateY(-50%);

    width:
        clamp(
            45px,
            2.344vw,
            90px
        );

    font-size:
        clamp(
            10px,
            0.521vw,
            20px
        );

    color: #999;

    text-align: right;

    white-space: nowrap;
}


/* =====================================================
   Active 状态文字
===================================================== */

.control-button.active
.button-state {

    color:
        #0aaa50;
}


/* =====================================================
   电池资料
===================================================== */

#battery-info {

    position: fixed;

    right:
        clamp(
            12px,
            2.2vw,
            40px
        );

    top: 50%;

    transform:
        translateY(-50%)
        translateX(
            clamp(
                25px,
                1.302vw,
                50px
            )
        );

    width:
        clamp(
            330px,
            17.188vw,
            660px
        );

    max-height: 68vh;

    padding:
        clamp(
            12px,
            0.625vw,
            24px
        );

    background:
        rgba(
            255,
            255,
            255,
            0.96
        );

    border-radius:
        clamp(
            18px,
            0.9375vw,
            36px
        );

    box-shadow:
        0 15px 45px
        rgba(
            0,
            0,
            0,
            0.12
        );

    z-index: 30;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


/* =====================================================
   电池资料显示
===================================================== */

#battery-info.show {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(-50%)
        translateX(0);

    pointer-events: auto;
}


/* =====================================================
   电池资料图片
===================================================== */

#battery-info img {

    display: block;

    width: 100%;

    max-height: 65vh;

    object-fit: contain;

    border-radius:
        clamp(
            10px,
            0.521vw,
            20px
        );
}


/* =====================================================
   底部区域
===================================================== */

#hint {

    position: fixed;

    left: 50%;

    bottom:
        clamp(
            12px,
            2vh,
            25px
        );

    transform:
        translateX(-50%);

    color: #999;

    font-size:
        clamp(
            12px,
            0.625vw,
            18px
        );

    z-index: 250;

    pointer-events: none;

    width: 100%;

    text-align: center;

    line-height: 1.4;

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.5s ease,
        visibility 0s linear 0.5s;
}


/* =====================================================
   产品介绍文字
===================================================== */

#hint::before {

    content:
        "We transform energy storage products into presentable, interactive, and training-ready 3D digital assets, helping customers complete product promotion and technical training more efficiently.";

    display: block;

    width:
        min(
            80vw,
            1100px
        );

    margin-left: auto;

    margin-right: auto;

    margin-bottom:
        clamp(
            18px,
            0.9375vw,
            27px
        );

    color:
        #0aaa50;

    font-size:
        clamp(
            14px,
            0.729vw,
            21px
        );

    font-weight: 400;

    line-height: 1.6;

    white-space: normal;

    text-align: center;

    text-shadow:
        0 1px 3px
        rgba(
            0,
            0,
            0,
            0.08
        );
}


/* =====================================================
   电池资料放大按钮
===================================================== */

#battery-zoom {

    position: absolute;

    right:
        clamp(
            8px,
            0.417vw,
            16px
        );

    top:
        clamp(
            8px,
            0.417vw,
            16px
        );

    width:
        clamp(
            28px,
            1.458vw,
            56px
        );

    height:
        clamp(
            28px,
            1.458vw,
            56px
        );

    border: none;

    border-radius: 50%;

    background:
        rgba(
            255,
            255,
            255,
            0.95
        );

    color: #333;

    font-size:
        clamp(
            20px,
            1.042vw,
            40px
        );

    line-height:
        clamp(
            28px,
            1.458vw,
            56px
        );

    text-align: center;

    padding: 0;

    cursor: pointer;

    z-index: 5;

    box-shadow:
        0 3px 10px
        rgba(
            0,
            0,
            0,
            0.12
        );

    transition:
        all 0.2s ease;
}


#battery-zoom:hover {

    background:
        #e8f8ee;

    color:
        #0ca852;

    transform:
        scale(1.08);
}


/* =====================================================
   电池资料放大遮罩
===================================================== */

#battery-overlay {

    position: fixed;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    background:
        rgba(
            0,
            0,
            0,
            0.35
        );

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    z-index: 90;

    transition:
        opacity 0.5s ease,
        visibility 0s linear 0.5s;
}


#battery-overlay.show {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transition:
        opacity 0.5s ease,
        visibility 0s linear 0s;
}


/* =====================================================
   电池资料放大状态
===================================================== */

#battery-info.zoomed {

    position: fixed;

    left: 50%;

    top: 50%;

    right: auto;

    width:
        min(
            80vw,
            1000px
        );

    max-height: 85vh;

    padding: 15px;

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

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    z-index: 100;

    background:
        rgba(
            255,
            255,
            255,
            0.98
        );

    border-radius: 16px;

    box-shadow:
        0 20px 80px
        rgba(
            0,
            0,
            0,
            0.3
        );
}


/* =====================================================
   放大状态下的图片
===================================================== */

#battery-info.zoomed img {

    width: 100%;

    max-width: 100%;

    max-height: 80vh;

    object-fit: contain;
}


/* =====================================================
   放大状态下的关闭按钮
===================================================== */

#battery-info.zoomed
#battery-zoom {

    font-size: 0;
}


#battery-info.zoomed
#battery-zoom::after {

    content: "×";

    font-size: 22px;
}


/* =====================================================
   小屏幕
===================================================== */

@media (
    max-width: 700px
) {

    #control-panel {

        left: 10px;

        width: 220px;

        padding: 10px;
    }


    .control-button {

        height: 38px;

        font-size: 10px;

        padding-left: 10px;

        padding-right: 52px;
    }


    .button-state {

        width: 42px;

        right: 8px;

        font-size: 8px;
    }


    #battery-info {

        right: 10px;

        width: 145px;
    }


    #logo {

        width: 90px;

        left: 15px;

        top: 15px;
    }


    #loading::before {

        width: 200px;
    }


    #hint::before {

        width: 90vw;

        font-size: 9px;

        line-height: 1.5;

        margin-bottom: 8px;
    }

}


/* =====================================================
   中等屏幕
===================================================== */

@media (
    min-width: 701px
)
and (
    max-width: 1200px
) {

    #control-panel {

        width: 240px;
    }


    .control-button {

        font-size: 11px;
    }


    #loading::before {

        width: 270px;
    }


    #hint::before {

        width: 80vw;

        font-size: 11px;
    }

}


/* =====================================================
   大屏幕
===================================================== */

@media (
    min-width: 1600px
) {

    #loading::before {

        width: 400px;
    }


    #hint::before {

        width:
            min(
                70vw,
                1200px
            );

    }

}


/* =====================================================
   超宽屏（线性缩放已覆盖，无需固定覆盖）
===================================================== */


/* =====================================================
   手机横屏适配
===================================================== */

@media screen
and (max-width: 900px)
and (orientation: landscape) {

    /* ---------------------------------------------
       Logo
    --------------------------------------------- */

    #logo {

        width: 90px;

        left: 15px;

        top: 12px;

        max-width: none;
    }


    /* ---------------------------------------------
       左侧控制面板
    --------------------------------------------- */

    #control-panel {

        display: block;

        left: 10px;

        width: 176px;

        padding: 8px;

        border-radius: 10px;
    }


    /* ---------------------------------------------
       控制按钮
    --------------------------------------------- */

    .control-button {

        height: 31px;

        margin-bottom: 5px;

        border-radius: 7px;

        font-size: 8px;

        padding-left: 8px;

        padding-right: 43px;
    }


    /* ---------------------------------------------
       按钮圆点
    --------------------------------------------- */

    .button-dot {

        width: 5px;

        height: 5px;

        margin-right: 5px;
    }


    /* ---------------------------------------------
       状态文字
    --------------------------------------------- */

    .button-state {

        right: 6px;

        width: 34px;

        font-size: 7px;
    }


    /* ---------------------------------------------
       电池资料
    --------------------------------------------- */

    #battery-info {

        right: 10px;

        width: 116px;

        max-height: 70vh;

        padding: 5px;

        border-radius: 9px;
    }


    #battery-info img {

        max-height: 67vh;
    }


    /* ---------------------------------------------
       放大按钮
    --------------------------------------------- */

    #battery-zoom {

        right: 5px;

        top: 5px;

        width: 23px;

        height: 23px;

        font-size: 17px;

        line-height: 23px;
    }


    /* ---------------------------------------------
       底部产品介绍
    --------------------------------------------- */

    #hint {

        display: block;

        left: 50%;

        bottom: 8px;

        width: 100%;

        transform:
            translateX(-50%);

        z-index: 250;

        font-size: 0;

        color: transparent;
    }


    #hint::before {

        display: block;

        width: 75vw;

        margin-left: auto;

        margin-right: auto;

        margin-bottom: 0;

        font-size: 8px;

        line-height: 1.35;

        color: #0aaa50;

        white-space: normal;

        text-align: center;
    }


    /* ---------------------------------------------
       Loading
    --------------------------------------------- */

    #loading::before {

        width: 180px;
    }


    /* ---------------------------------------------
       手机圆形 UI 隐藏
    --------------------------------------------- */

    #mobile-control-panel {

        display: none;
    }


    /* ---------------------------------------------
       放大状态
    --------------------------------------------- */

    #battery-info.zoomed {

        width: 80vw;

        max-width: 800px;

        max-height: 82vh;

        padding: 10px;

        border-radius: 12px;
    }


    #battery-info.zoomed img {

        max-height: 76vh;
    }


    #battery-info.zoomed
    #battery-zoom {

        width: 25px;

        height: 25px;

        line-height: 25px;
    }

}


/* =====================================================
   手机竖屏
===================================================== */

@media screen
and (max-width: 900px)
and (orientation: portrait) {

    /* ---------------------------------------------
       隐藏原来的文字控制面板
    --------------------------------------------- */

    #control-panel {

        display: none;
    }


    /* ---------------------------------------------
       Logo
       
       注意：

       正常竖屏时 Logo 可以显示。
       但 body.loading-active 的规则
       使用 !important，所以 Loading 时
       这里不会抢先显示。
    --------------------------------------------- */

    #logo {

        opacity: 1;

        visibility: visible;

        transform:
            translateY(0);
    }


    /* ---------------------------------------------
       手机竖屏产品介绍
    --------------------------------------------- */

    #hint {

        display: block;

        position: fixed;

        left: 50%;

        bottom:
            clamp(
                12px,
                2.5vh,
                28px
            );

        width: 100%;

        transform:
            translateX(-50%);

        z-index: 250;

        pointer-events: none;

        text-align: center;

        font-size: 0;

        line-height: 1;

        color: transparent;
    }


    /* ---------------------------------------------
       手机竖屏产品介绍文字
    --------------------------------------------- */

    #hint::before {

        content:
            "We transform energy storage products into presentable, interactive, and training-ready 3D digital assets, helping customers complete product promotion and technical training more efficiently.";

        display: block;

        width: 88vw;

        max-width: 700px;

        margin-left: auto;

        margin-right: auto;

        margin-bottom: 0;

        color: #0aaa50;

        font-size:
            clamp(
                8px,
                2.4vw,
                12px
            );

        font-weight: 400;

        line-height: 1.45;

        text-align: center;

        white-space: normal;

        text-shadow:
            0 1px 3px
            rgba(
                0,
                0,
                0,
                0.08
            );
    }


    /* ---------------------------------------------
       Canvas 正常显示
    --------------------------------------------- */

    canvas.model-visible {

        opacity: 1;

        pointer-events: auto;
    }

}


/* =====================================================
   手机竖屏较小设备
===================================================== */

@media screen
and (max-width: 500px)
and (orientation: portrait) {

    #hint {

        bottom: 10px;
    }


    #hint::before {

        width: 90vw;

        font-size: 8px;

        line-height: 1.4;
    }

}


/* =====================================================
   手机竖屏非常小设备
===================================================== */

@media screen
and (max-width: 380px)
and (orientation: portrait) {

    #hint {

        bottom: 8px;
    }


    #hint::before {

        width: 92vw;

        font-size: 7px;

        line-height: 1.35;
    }

}


/* =====================================================
   正方形 / 接近正方形
===================================================== */

@media screen
and (min-width: 500px)
and (max-width: 900px)
and (min-aspect-ratio: 0.90/1)
and (max-aspect-ratio: 1.10/1) {

    /* ---------------------------------------------
       隐藏文字控制面板
    --------------------------------------------- */

    #control-panel {

        display: none;
    }


    /* ---------------------------------------------
       保留产品介绍文字
    --------------------------------------------- */

    #hint {

        display: block;

        position: fixed;

        left: 50%;

        bottom: 15px;

        width: 100%;

        transform:
            translateX(-50%);

        z-index: 250;

        font-size: 0;

        color: transparent;

        pointer-events: none;
    }


    #hint::before {

        display: block;

        width: 82vw;

        max-width: 900px;

        margin-left: auto;

        margin-right: auto;

        margin-bottom: 0;

        color: #0aaa50;

        font-size: 11px;

        line-height: 1.45;

        text-align: center;

        white-space: normal;
    }


    /* ---------------------------------------------
       Canvas 正常显示
    --------------------------------------------- */

    canvas.model-visible {

        opacity: 1;

        pointer-events: auto;
    }

}


/* =====================================================
   手机圆形控制面板
===================================================== */

#mobile-control-panel {

    position: fixed;

    left: 50%;

    top: 50%;

    width: 70vw;

    height: 65vh;

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

    display: none;

    z-index: 200;

    pointer-events: none;
}


/* =====================================================
   手机圆形按钮
===================================================== */

.mobile-control-button {

    position: absolute;

    width: 48px;

    height: 48px;

    border: none;

    border-radius: 50%;

    background:
        rgba(
            10,
            170,
            80,
            0.92
        );

    color: #ffffff;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 19px;

    padding: 0;

    cursor: pointer;

    pointer-events: auto;

    box-shadow:
        0 4px 15px
        rgba(
            0,
            0,
            0,
            0.25
        );

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;

    touch-action: manipulation;

    -webkit-tap-highlight-color:
        transparent;
}


/* =====================================================
   图标
===================================================== */

.mobile-control-button span {

    display: flex;

    justify-content: center;

    align-items: center;

    width: 100%;

    height: 100%;

    line-height: 1;
}


/* =====================================================
   Door
===================================================== */

#mobile-btn-door {

    left: 8%;

    top: 25%;
}


/* =====================================================
   Power Conversion System
===================================================== */

#mobile-btn-converter {

    left: 8%;

    top: 48%;
}


/* =====================================================
   Liquid Cooling Unit
===================================================== */

#mobile-btn-cooling {

    right: 8%;

    top: 28%;
}


/* =====================================================
   Battery Pack
===================================================== */

#mobile-btn-battery {

    right: 8%;

    top: 52%;
}


/* =====================================================
   Electrical Panel
===================================================== */

#mobile-btn-junction {

    left: 50%;

    bottom: 3%;

    transform:
        translateX(-50%);
}


/* =====================================================
   Hover
===================================================== */

.mobile-control-button:hover {

    background:
        #0ca852;

    box-shadow:
        0 5px 18px
        rgba(
            0,
            0,
            0,
            0.28
        );
}


/* =====================================================
   Active
===================================================== */

.mobile-control-button.active {

    background:
        #18d86a;

    box-shadow:
        0 0 0 3px
        rgba(
            24,
            216,
            106,
            0.18
        ),
        0 0 20px
        rgba(
            24,
            216,
            106,
            0.6
        );
}


/* =====================================================
   点击
===================================================== */

.mobile-control-button:active {

    transform:
        scale(0.88);
}


/* =====================================================
   Junction 点击
===================================================== */

#mobile-btn-junction:active {

    transform:
        translateX(-50%)
        scale(0.88);
}


/* =====================================================
   Disabled
===================================================== */

.mobile-control-button.disabled {

    opacity: 0.35;

    cursor: not-allowed;

    transform: none;
}


/* =====================================================
   手机竖屏显示圆形 UI
===================================================== */

@media screen
and (max-width: 900px)
and (orientation: portrait) {

    #mobile-control-panel {

        display: block;
    }


    .mobile-control-button {

        width: 48px;

        height: 48px;

        font-size: 19px;
    }

}


/* =====================================================
   小型手机
===================================================== */

@media screen
and (max-width: 500px)
and (orientation: portrait) {

    #mobile-control-panel {

        width: 78vw;

        height: 64vh;
    }


    .mobile-control-button {

        width: 44px;

        height: 44px;

        font-size: 17px;
    }

}


/* =====================================================
   非常小的手机
===================================================== */

@media screen
and (max-width: 380px)
and (orientation: portrait) {

    #mobile-control-panel {

        width: 80vw;

        height: 62vh;
    }


    .mobile-control-button {

        width: 40px;

        height: 40px;

        font-size: 15px;
    }

}


/* =====================================================
   正方形 / 接近正方形
===================================================== */

@media screen
and (min-width: 500px)
and (max-width: 900px)
and (min-aspect-ratio: 0.90/1)
and (max-aspect-ratio: 1.10/1) {

    #mobile-control-panel {

        display: block;

        width: 65vw;

        height: 65vh;
    }


    .mobile-control-button {

        width: 52px;

        height: 52px;

        font-size: 21px;
    }

}


/* =====================================================
   ★★★★★ Loading 状态最终保险层 ★★★★★

   必须放在 CSS 最后。

   因为你的竖屏 / 横屏媒体查询中，
   #logo、#hint、#mobile-control-panel
   会重新设置 display / opacity / visibility。

   这里再统一压一次，确保：

   <body class="loading-active">

   时，无论横屏、竖屏、手机、平板，
   正式 UI 都不会在第一次加载时闪出来。
===================================================== */

body.loading-active #logo,
body.loading-active #control-panel,
body.loading-active #battery-info,
body.loading-active #battery-overlay,
body.loading-active #hint,
body.loading-active #mobile-control-panel {

    opacity: 0 !important;

    visibility: hidden !important;

    pointer-events: none !important;
}


/* =====================================================
   Loading 状态下电池资料强制关闭
===================================================== */

body.loading-active #battery-info.show,
body.loading-active #battery-info.zoomed {

    opacity: 0 !important;

    visibility: hidden !important;

    pointer-events: none !important;
}


/* =====================================================
   Loading 状态下遮罩强制关闭
===================================================== */

body.loading-active #battery-overlay.show {

    opacity: 0 !important;

    visibility: hidden !important;

    pointer-events: none !important;
}


/* =====================================================
   Loading 状态下禁止 Canvas 抢先显示
===================================================== */

body.loading-active canvas,
body.loading-active canvas.model-visible {

    opacity: 0 !important;

    pointer-events: none !important;
}