html, body {
    margin: 0;
    padding: 0;
    background: black;
    overflow: hidden;
    position: relative;
    height: 100vh;
    width: 100vw;
    scrollbar-width: none;  /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;  /* Chrome/Safari/Webkit */
}
video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    background: black;
    user-select: none;
    -webkit-user-drag: none;
    user-drag: none;
}
#enterVideo {
    z-index: 2;
    visibility: hidden;
    transition: visibility 0.0s;
}
#loopVideo {
    z-index: 1;
    visibility: hidden;
    transition: visibility 0.0s;
}
#loadingContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
    transition: opacity 1.0s ease-out; /* 添加淡出过渡效果 */
}
#loadingBackground {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://cg-x.oss-cn-hangzhou.aliyuncs.com/GalaekRift/imgs/bg.png');
    background-size: cover; /* 高度适配，宽度自适应 */
    background-position: center;
}
#loadingWrapper {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 600px; /* 设置最大宽度为600px */
    width: 80%; /* 默认宽度为浏览器宽度的80% */
    height: auto; /* 高度自适应 */
    aspect-ratio: 600 / 260; /* 保持宽高比为600:260 */
    z-index: 100;
}
#loadingCanvas {
    width: 100%;
    height: 100%;
    background: transparent; /* 设为透明，让背景图显示 */
    display: block;
}