/* ── Loading overlay (campaign start tome animation) ─────────── */

.pd-loading-overlay {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	min-height: 280px;
	padding: 1rem 1.5rem;
	animation: pdLoadingFadeIn 0.6s ease-out;
	gap: 12px;
}

.pd-loading-overlay.pd-loading-done {
	animation: pdLoadingFadeOut 0.5s ease-in forwards;
}

@keyframes pdLoadingFadeIn {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes pdLoadingFadeOut {
	from { opacity: 1; }
	to   { opacity: 0; }
}

/* ── Scene container ── */

.pd-loading-scene {
	position: relative;
	width: min(96vw, 800px);
	aspect-ratio: 16 / 9;
	background: #0a0608;
	border: 4px solid #2d2438;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: inset 0 0 0 2px #0a0614, 0 8px 32px rgba(120, 70, 30, 0.4);
}

.pd-loading-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.pd-loading-vignette {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.35) 95%, rgba(0, 0, 0, 0.6) 100%);
	z-index: 2;
}

/* ── Bottom loading bar ── */

.pd-loading-bar-wrap {
	position: absolute;
	bottom: 14px;
	left: 50%;
	transform: translateX(-50%);
	width: 55%;
	height: 16px;
	background: rgba(10, 6, 4, 0.85);
	border: 2px solid #6a4828;
	border-radius: 2px;
	overflow: hidden;
	box-shadow: 0 0 12px rgba(0, 0, 0, 0.7);
	z-index: 5;
}

.pd-loading-bar-wrap::before {
	content: '';
	position: absolute;
	inset: 1px;
	background: linear-gradient(90deg,
		#8c1820 0%, #c8302c 25%, #e8703c 50%, #c8302c 75%, #8c1820 100%);
	background-size: 200% 100%;
	animation: pdBarShimmer 1.8s linear infinite, pdBarFill 4s ease-in-out infinite;
	transform-origin: left center;
}

@keyframes pdBarShimmer {
	0%   { background-position: 0% 0%; }
	100% { background-position: -200% 0%; }
}

@keyframes pdBarFill {
	0%   { transform: scaleX(0.05); }
	50%  { transform: scaleX(1); }
	100% { transform: scaleX(0.05); }
}

/* ── PREPARING... overlay ── */

.pd-loading-status {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	color: #e8c878;
	font-size: 14px;
	letter-spacing: 2px;
	z-index: 10;
	text-align: center;
}

.pd-progress-pre {
	width: 200px;
	height: 4px;
	background: rgba(10, 6, 4, 0.85);
	border: 1px solid #6a4828;
	margin-top: 10px;
	overflow: hidden;
}

.pd-progress-pre-fill {
	height: 100%;
	background: #c8302c;
	width: 0%;
	transition: width 0.1s;
}

/* ── Text ── */

.pd-loading-text {
	font-size: 20px;
	font-weight: 700;
	color: #e8c878;
	letter-spacing: 4px;
	text-shadow: 2px 2px 0 #2d1810;
}

.pd-loading-dots {
	display: inline;
}