.loading-container {
	position: fixed;
	z-index: var(--z-loading);
    left: 0%;
    top: 0%;
    width: 100%;
    height: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% 100%;
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	transform: translate(0,0) rotate(0deg);
	pointer-events: none;
}

/**
 * 竖屏：让「横屏画面」在竖屏视口的正中旋转 90° 铺满。
 * 关键点：
 * 1. 把容器尺寸换成横屏尺寸——宽 = 视口高(100vh)、高 = 视口宽(100vw)；
 * 2. 定位到视口正中(left/top 50% + translate(-50%,-50%))；
 * 3. 以中心为原点(transform-origin: center)再 rotate(90deg)，
 *    旋转后宽高正好对调，恰好铺满竖屏视口，且视觉上是横屏画面绕正中旋转。
 */
.loading-container.portrait {
	width: 100vh;
	height: 100vw;
	left: 50%;
	top: 50%;
	transform-origin: center center;
	transform: translate(-50%, -50%) rotate(90deg);
	pointer-events: auto;
}


.loading-logo {
    visibility: hidden;
    height: 49rem;
	position: absolute;
    top: 2rem;
}

.loading-bar-bg {
	position: absolute;
	bottom: 7rem;
	width: 70rem;
	height: 4rem;
	background: radial-gradient(ellipse farthest-corner at left top,#ffe080 0%,#b97700 16%,#ffe080 34%,#b97700 50%,#ffe080 67%,#b97700 81%,#ffe080 100%);
	box-shadow: 0.2rem 0 0.2rem 0 #600000;
	border-radius: 1.6rem;
}

.loading-bar-bg-purple {
    position: absolute;
    width: 69.5rem;
    height: 3.4rem;
    background: #3B097B;
    border-radius: 1.6rem;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#loading-bar {
	width: 69.4rem;          /* 满进度宽度，进度变化时用 js 修改这个宽度 */
	height: 3.73rem;
	background: url(../images/progress.png) no-repeat left center;
	/* 背景图尺寸固定为满宽，不随容器宽度压缩；容器变窄时右侧被裁掉，形成遮罩效果 */
	background-size: 69.4rem 100%;
	overflow: hidden;        /* 裁掉超出可见宽度的图片部分 */
	position: absolute;
	left: 0.25rem;
	top: 50%;
	transform: translateY(-50%);   /* 只垂直居中，水平从左往右增长 */
}