/* Builder 3 editor boot splash: chronos PNG logo + status dialog, or soviet mode when theme is soviet */

#splashScreenOverlay {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: clamp(24px, 5vh, 56px) 1.25rem;
	box-sizing: border-box;
}

/* ===== Chronos mode ===== */

/* Same interactive dark grid + mouse spotlight as start page / example browser */
#splashScreenOverlay.splash-mode-chronos {
	--b3-mx: 50;
	--b3-my: 38;
	background-color: #121212;
	background-image:
		radial-gradient(circle 315px at calc(var(--b3-mx) * 1%) calc(var(--b3-my) * 1%), rgba(161, 205, 221, 0.255) 0%, rgba(161, 205, 221, 0.105) 45%, transparent 70%),
		linear-gradient(90deg, rgba(161, 205, 221, 0.15) 0%, transparent 28%),
		linear-gradient(270deg, rgba(161, 205, 221, 0.15) 0%, transparent 28%),
		linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
		linear-gradient(180deg, #161616 0%, #1c1c1c 40%, #121212 100%);
	background-size:
		auto,
		100% 100%,
		100% 100%,
		56px 56px,
		56px 56px,
		auto;
	background-position:
		center,
		left top,
		right top,
		calc((var(--b3-mx) - 50) * 0.2px) calc((var(--b3-my) - 50) * 0.2px),
		calc((var(--b3-mx) - 50) * 0.2px) calc((var(--b3-my) - 50) * 0.2px),
		center;
	background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat;
}

.splash-mode-chronos #ccp-pride-flag,
#splashWelcomeBadge {
	display: none !important;
}

#splashScreenOverlay.splash-mode-chronos #loadingLogoWrap {
	margin: 0 0 clamp(28px, 5vh, 48px);
	flex: 0 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	width: auto;
	/* Reserve logo box before PNG decode (CLS) */
	min-height: clamp(120px, 22vmin, 200px);
}

#splashScreenOverlay.splash-mode-chronos #loadingLogo {
	display: block !important;
	overflow: visible;
	aspect-ratio: 1 / 1;
	height: clamp(120px, 22vmin, 200px);
	width: auto;
	max-width: min(72vw, 220px);
	object-fit: contain;
	margin: 0;
	/* Heartbeat: 100% -> 125% peak -> 100% */
	animation: chronos-logo-heartbeat 1.6s ease-in-out infinite, loaderFadeIn 1s;
}

/* Status stack: wordmark + dots + Starting + news (no dialog chrome) */
.splash-status-dialog {
	width: min(100%, 420px);
	margin: 0;
	flex: 0 0 auto;
	animation: loaderFadeIn 1s;
}

.splash-status-panel {
	display: flex;
	flex-direction: column;
	background: rgb(41, 41, 41);
	border: 1px solid rgb(64, 64, 64);
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
	color: rgb(207, 207, 207);
}

.splash-status-bar {
	display: flex;
	gap: 6px;
	padding: 8px 10px;
	background: rgb(64, 64, 64);
	border-bottom: 1px solid rgb(71, 71, 71);
	flex-shrink: 0;
}

.splash-status-bar span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgb(94, 94, 94);
}

.splash-status-bar span:first-child { background: #d60000; }
.splash-status-bar span:nth-child(2) { background: #ffd800; }

.splash-status-body {
	padding: clamp(20px, 3.2vh, 28px) clamp(18px, 2.5vw, 24px) clamp(18px, 2.8vh, 26px);
	background: repeating-linear-gradient(
		45deg,
		rgb(31, 31, 31),
		rgb(31, 31, 31) 10px,
		rgb(41, 41, 41) 10px,
		rgb(41, 41, 41) 20px
	);
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Modern: strip dialog chrome; keep content + news separator */
#splashScreenOverlay.splash-mode-chronos .splash-status-dialog {
	width: min(100%, 700px);
}

#splashScreenOverlay.splash-mode-chronos .splash-status-bar {
	display: none !important;
}

#splashScreenOverlay.splash-mode-chronos .splash-status-panel {
	background: transparent;
	border: none;
	box-shadow: none;
	border-radius: 0;
	overflow: visible;
}

#splashScreenOverlay.splash-mode-chronos .splash-status-body {
	padding: 0;
	background: transparent;
}

#splashScreenOverlay.splash-mode-chronos #loadingIllustrationWrap {
	margin: 0;
	flex: 0 0 auto;
	display: flex;
	justify-content: center;
	width: 100%;
	/* Reserve wordmark box before PNG decode (CLS) */
	min-height: clamp(96px, 17vmin, 144px);
}

#splashScreenOverlay.splash-mode-chronos #loadingIllustration {
	/* Reserved aspect from intrinsic 2172x724; no height jump on decode */
	aspect-ratio: 2172 / 724 !important;
	height: clamp(96px, 17vmin, 144px) !important;
	width: auto !important;
	max-width: min(92vw, 700px) !important;
	object-fit: contain !important;
	margin: 0 !important;
	filter: none !important;
}

#splashScreenOverlay.splash-mode-chronos #loadingDotsWrap2 {
	/* Equal gap above/below so dots sit midway between title and status */
	margin: clamp(22px, 3.4vh, 32px) 0;
	flex: 0 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	overflow: visible;
}

#splashScreenOverlay.splash-mode-chronos #loadingDotsWrap {
	margin-top: 0 !important;
	width: clamp(120px, 18vmin, 168px);
	height: clamp(48px, 7vh, 64px);
	overflow: visible;
}

#splashScreenOverlay.splash-mode-chronos #loadingMessage {
	/* Keep bottom margin even before news arrives (stable stack) */
	margin: 0 0 clamp(20px, 3.2vh, 28px) !important;
	flex: 0 0 auto;
	font-size: clamp(11px, 1.35vh, 13px);
	letter-spacing: 0.03em;
	min-height: 1.4em;
}

/* Reserve news slot always so centered flex column does not jump when news fills */
#splashScreenOverlay.splash-mode-chronos #splashNewsContent {
	min-height: 4.5em;
	box-sizing: border-box;
}
#splashScreenOverlay.splash-mode-chronos #splashNewsContent[hidden] {
	/* Keep layout space; hide visually until content arrives */
	display: flex !important;
	visibility: hidden;
	pointer-events: none;
	border-top-color: transparent;
}

.splash-news-content {
	width: 100%;
	margin: 0;
	padding: 14px 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: center;
}

.splash-news-title {
	margin: 0;
	font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif;
	font-size: clamp(13px, 1.8vmin, 16px);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	line-height: 1.25;
}

.splash-news-text {
	margin: 0;
	font-family: 'PT Sans', 'Segoe UI', system-ui, sans-serif;
	font-size: clamp(11px, 1.4vmin, 13px);
	line-height: 1.5;
	color: rgb(176, 176, 176);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

#loadingMessage .splash-dot {
	display: inline-block;
	width: 0.35em;
	height: 0.35em;
	margin-left: 0.12em;
	border-radius: 50%;
	vertical-align: baseline;
	animation: splash-msg-dot 1.2s ease-in-out infinite;
}

#loadingMessage .splash-dot:nth-child(2) { animation-delay: 0.2s; }
#loadingMessage .splash-dot:nth-child(3) { animation-delay: 0.4s; }

/* Soviet accents stay classic yellow */
.splash-theme-yellow .splash-news-title { color: #ffd800; }
.splash-theme-yellow #loadingDotsWrap .dot { background: #ffd800 !important; }
.splash-theme-yellow #loadingMessage { color: #ffe566 !important; }
.splash-theme-yellow #loadingMessage .splash-dot { background: #ffd800; }
.splash-theme-yellow .splash-status-bar span:nth-child(2) { background: #ffd800; }

/* Chronos accents: steel / ice cyan to match chronos-logo + chronos-text */
#splashScreenOverlay.splash-mode-chronos {
	--splash-accent: #9aa3ab;
	--splash-accent-soft: #c4c8d0;
	--splash-accent-dim: #6a7078;
}
#splashScreenOverlay.splash-mode-chronos.splash-theme-chronos .splash-news-title {
	color: #9ec4d0; /* chronos ice azure */
}
#splashScreenOverlay.splash-mode-chronos.splash-theme-chronos #loadingDotsWrap .dot {
	background: var(--splash-accent) !important;
	border-radius: 0 !important; /* squares from first paint (stock loader.css is 50%) */
	animation: chronos-dot-pulse 1.4s ease-in-out infinite;
}
#splashScreenOverlay.splash-mode-chronos.splash-theme-chronos #loadingDotsWrap .dot:nth-child(2) { animation-delay: 0.12s; }
#splashScreenOverlay.splash-mode-chronos.splash-theme-chronos #loadingDotsWrap .dot:nth-child(3) { animation-delay: 0.24s; }
#splashScreenOverlay.splash-mode-chronos.splash-theme-chronos #loadingDotsWrap .dot:nth-child(4) { animation-delay: 0.36s; }
#splashScreenOverlay.splash-mode-chronos.splash-theme-chronos #loadingDotsWrap .dot:nth-child(5) { animation-delay: 0.48s; }
#splashScreenOverlay.splash-mode-chronos.splash-theme-chronos #loadingDotsWrap .dot:nth-child(6) { animation-delay: 0.60s; }
#splashScreenOverlay.splash-mode-chronos.splash-theme-chronos #loadingDotsWrap .dot:nth-child(7) { animation-delay: 0.72s; }
#splashScreenOverlay.splash-mode-chronos.splash-theme-chronos #loadingDotsWrap .dot:nth-child(8) { animation-delay: 0.84s; }
#splashScreenOverlay.splash-mode-chronos.splash-theme-chronos #loadingDotsWrap .dot:nth-child(9) { animation-delay: 0.96s; }
#splashScreenOverlay.splash-mode-chronos.splash-theme-chronos #loadingMessage {
	color: var(--splash-accent-soft) !important;
}
#splashScreenOverlay.splash-mode-chronos.splash-theme-chronos #loadingMessage .splash-dot {
	background: var(--splash-accent);
}
#splashScreenOverlay.splash-mode-chronos.splash-theme-chronos .splash-news-text {
	color: rgb(168, 184, 196);
}
#splashScreenOverlay.splash-mode-chronos.splash-theme-chronos .splash-news-content {
	border-top-color: rgba(160, 168, 176, 0.18);
}
@keyframes chronos-dot-pulse {
	0%, 100% { background: var(--splash-accent-dim); opacity: 0.55; transform: translateY(6px) scale(0.92); }
	40% { background: var(--splash-accent-soft); opacity: 1; transform: translateY(-20px) scale(1.05); }
}

@keyframes chronos-logo-heartbeat {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.25); }
}

/* ===== Soviet / classic mode (B3_SHOW_SOVIET_LOADER=1) ===== */
#splashScreenOverlay.splash-mode-soviet {
	background: #d60000 !important;
}

.splash-mode-soviet #splashWelcomeBadge,
.splash-mode-soviet .splash-status-bar,
.splash-mode-soviet #splashNewsContent {
	display: none !important;
}

#splashScreenOverlay.splash-mode-soviet .splash-status-dialog {
	position: relative;
	z-index: 2;
	width: auto;
	max-width: 90vw;
}

.splash-mode-soviet .splash-status-panel {
	background: transparent;
	border: none;
	box-shadow: none;
	border-radius: 0;
	overflow: visible;
}

.splash-mode-soviet .splash-status-body {
	padding: 0;
	background: transparent;
	gap: 0;
}

#splashScreenOverlay.splash-mode-soviet #loadingLogoWrap {
	position: relative;
	z-index: 2;
	margin: 0 0 2vh;
	display: flex;
	justify-content: center;
}

#splashScreenOverlay.splash-mode-soviet #loadingLogo {
	display: block !important;
	overflow: visible;
	aspect-ratio: 1 / 1;
	width: auto;
	height: 18vh;
	max-width: 72vw;
	object-fit: contain;
	margin: 0;
	/* Opposite of stock reverse spin */
	animation: loadingLogoSpin 1.8s linear infinite, loaderFadeIn 1s;
}

#splashScreenOverlay.splash-mode-soviet #loadingIllustrationWrap {
	margin: 0 0 4vh;
	display: flex;
	justify-content: center;
}

#splashScreenOverlay.splash-mode-soviet #loadingIllustration {
	display: block !important;
	aspect-ratio: 1183 / 194;
	height: 10vmin;
	max-height: 64px;
	width: auto;
	max-width: 90vw;
	object-fit: contain;
	margin: 0;
	filter: none !important;
}

#splashScreenOverlay.splash-mode-soviet #loadingDotsWrap2 {
	margin: 0 0 1.5vh;
	display: flex;
	justify-content: center;
}

#splashScreenOverlay.splash-mode-soviet #loadingDotsWrap {
	margin-top: 0 !important;
	width: 18vh;
	height: 5vh;
}

#splashScreenOverlay.splash-mode-soviet #loadingDotsWrap .dot {
	background: #ffd800 !important;
}

#splashScreenOverlay.splash-mode-soviet #loadingMessage {
	margin: 2vh 2em !important;
	color: #ffd800 !important;
}

.splash-mode-soviet #loadingMessage .splash-dot {
	display: none;
}

#splashScreenOverlay.splash-mode-soviet #ccp-pride-flag {
	display: block !important;
	position: absolute;
	top: 0;
	left: 0;
	width: 100vmin;
	height: 100vmin;
	max-width: 512px;
	max-height: 512px;
	pointer-events: none;
	z-index: 0;
	opacity: 1;
	animation: loaderFadeIn 1s;
}

@keyframes splash-msg-dot { 0%, 80%, 100% { opacity: 0.35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }