/* =================================================================
 * Fake BSOD (Blue Screen of Death) — fullscreen overlay
 * Replicates the Windows 10/11 BSOD layout
 *
 * Reference sizes verified against real BSOD screenshots:
 *   :( = ~180px, message = ~28px, QR = ~130px
 * ================================================================= */

.fbsod-overlay {
	background: #0078d7;
	color: #fff;
	font-family: "Segoe UI", "Segoe UI Variable", -apple-system, BlinkMacSystemFont, sans-serif;
	display: none;
	overflow: auto;
}
.fbsod-overlay.is-active {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
}
.fbsod-screen {
	max-width: 55vw;
	padding: 12vh 12vw 50px;
	animation: fbsodFadeIn 0.4s ease-out;
}
@keyframes fbsodFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* ---------- Giant sad face ---------- */
.fbsod-sad {
	font-size: 180px;
	font-weight: 100;
	line-height: 0.85;
	margin-bottom: 30px;
	font-family: "Segoe UI Light", "Segoe UI", sans-serif;
}

/* ---------- Main message ---------- */
.fbsod-message {
	font-size: 28px;
	font-weight: 400;
	line-height: 1.35;
	margin-bottom: 20px;
}
.fbsod-progress {
	font-size: 28px;
	font-weight: 400;
	margin-bottom: 50px;
	font-variant-numeric: tabular-nums;
}

/* ---------- QR code + URL row ---------- */
.fbsod-qr-row {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	margin-bottom: 24px;
}
.fbsod-qr {
	flex: 0 0 130px;
	width: 130px;
	height: 130px;
	background: #fff;
	padding: 6px;
	box-sizing: border-box;
}
.fbsod-qr svg {
	width: 100%;
	height: 100%;
}
.fbsod-qr-text {
	flex: 1;
	font-size: 15px;
	line-height: 1.5;
	padding-top: 4px;
}

/* ---------- Stop code ---------- */
.fbsod-stopcode {
	font-size: 15px;
	line-height: 1.5;
}

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
	.fbsod-screen { padding: 6vh 7vw 30px; max-width: 85vw; }
	.fbsod-sad { font-size: 100px; margin-bottom: 20px; }
	.fbsod-message { font-size: 18px; }
	.fbsod-progress { font-size: 18px; margin-bottom: 30px; }
	.fbsod-qr { flex: 0 0 80px; width: 80px; height: 80px; }
	.fbsod-qr-text, .fbsod-stopcode { font-size: 12px; }
}
@media (min-width: 1920px) {
	.fbsod-screen { max-width: 55vw; padding: 12vh 14vw 60px; }
	.fbsod-sad { font-size: 220px; margin-bottom: 40px; }
	.fbsod-message { font-size: 32px; }
	.fbsod-progress { font-size: 32px; margin-bottom: 60px; }
	.fbsod-qr { flex: 0 0 150px; width: 150px; height: 150px; }
	.fbsod-qr-text, .fbsod-stopcode { font-size: 17px; }
}