@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;1,300;1,400&display=swap");

body {
	font-family: "Roboto", Arial, Helvetica, sans-serif;
	margin: 0;
	background: #111;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

body.launching {
	overflow: hidden;
}

#launch-screen {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		linear-gradient(180deg, rgba(8, 12, 24, 0.96), rgba(3, 8, 15, 0.98)),
		repeating-linear-gradient(
			0deg,
			rgba(94, 112, 140, 0.15) 0,
			rgba(94, 112, 140, 0.15) 1px,
			transparent 1px,
			transparent 26px
		),
		repeating-linear-gradient(
			90deg,
			rgba(94, 112, 140, 0.15) 0,
			rgba(94, 112, 140, 0.15) 1px,
			transparent 1px,
			transparent 26px
		);
	opacity: 1;
	transition: opacity 0.5s ease;
}

#launch-screen.done {
	opacity: 0;
	pointer-events: none;
}

.launch-card {
	width: min(92vw, 520px);
	padding: 28px;
	border-radius: 14px;
	border: 2px solid rgba(147, 223, 255, 0.35);
	background: linear-gradient(180deg, rgba(13, 27, 45, 0.92), rgba(9, 18, 32, 0.95));
	box-shadow:
		0 0 0 3px rgba(26, 46, 73, 0.8),
		0 24px 60px rgba(0, 0, 0, 0.55);
	text-align: center;
	animation: launchCardIn 0.8s ease;
}

.tetris-stage {
	position: relative;
	margin: 0 auto 14px;
	width: 188px;
	height: 250px;
	border: 2px solid rgba(156, 224, 255, 0.4);
	border-radius: 8px;
	overflow: hidden;
	background: #0a1220;
}

.tetris-grid {
	position: absolute;
	inset: 0;
	background:
		repeating-linear-gradient(
			0deg,
			rgba(173, 210, 245, 0.14) 0,
			rgba(173, 210, 245, 0.14) 1px,
			transparent 1px,
			transparent 24px
		),
		repeating-linear-gradient(
			90deg,
			rgba(173, 210, 245, 0.14) 0,
			rgba(173, 210, 245, 0.14) 1px,
			transparent 1px,
			transparent 24px
		);
}

.tetromino {
	position: absolute;
	width: 48px;
	height: 48px;
	image-rendering: pixelated;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.14);
}

.tetromino-i {
	left: 70px;
	top: -52px;
	width: 24px;
	height: 96px;
	background: linear-gradient(180deg, #2ceeff, #0cb2df);
	animation: dropI 2.5s linear infinite;
}

.tetromino-l {
	left: 24px;
	top: -72px;
	background:
		linear-gradient(180deg, #ffc35a, #f39200),
		linear-gradient(180deg, #ffc35a, #f39200);
	clip-path: polygon(0 0, 33% 0, 33% 66%, 100% 66%, 100% 100%, 0 100%);
	animation: dropL 3.1s linear infinite;
}

.tetromino-t {
	right: 30px;
	top: -72px;
	background: linear-gradient(180deg, #d589ff, #8f39cc);
	clip-path: polygon(0 0, 100% 0, 100% 33%, 66% 33%, 66% 100%, 33% 100%, 33% 33%, 0 33%);
	animation: dropT 2.8s linear infinite;
}

.launch-hud {
	margin: 0 auto 12px;
	display: flex;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
	font-family: "Courier New", Courier, monospace;
	font-size: 12px;
	letter-spacing: 0.06em;
	color: #9fddff;
}

.launch-card h2 {
	margin: 2px 0 8px;
	color: #dbf3ff;
	font-weight: 700;
	font-size: 22px;
	letter-spacing: 0.08em;
}

#launch-status {
	margin: 0 0 16px;
	color: rgba(235, 252, 255, 0.82);
	min-height: 1.4em;
}

.launch-bar {
	height: 8px;
	width: 100%;
	border-radius: 999px;
	overflow: hidden;
	background: rgba(183, 226, 255, 0.14);
	border: 1px solid rgba(164, 220, 255, 0.22);
}

#launch-progress {
	height: 100%;
	width: 0%;
	border-radius: inherit;
	background: linear-gradient(90deg, #42ecff 0%, #a967ff 55%, #ff9e33 100%);
	animation: fillProgress 5s linear forwards;
	box-shadow: 0 0 14px rgba(120, 191, 255, 0.65);
}

@keyframes fillProgress {
	from {
		width: 0%;
	}
	to {
		width: 100%;
	}
}

@keyframes dropI {
	0% {
		transform: translateY(0);
	}
	65% {
		transform: translateY(182px);
	}
	80% {
		transform: translateY(182px);
	}
	100% {
		transform: translateY(300px);
	}
}

@keyframes dropL {
	0% {
		transform: translateY(0) rotate(0deg);
	}
	50% {
		transform: translateY(135px) rotate(0deg);
	}
	65% {
		transform: translateY(150px) rotate(90deg);
	}
	100% {
		transform: translateY(300px) rotate(90deg);
	}
}

@keyframes dropT {
	0% {
		transform: translateY(0) rotate(0deg);
	}
	45% {
		transform: translateY(110px) rotate(0deg);
	}
	60% {
		transform: translateY(125px) rotate(-90deg);
	}
	100% {
		transform: translateY(300px) rotate(-90deg);
	}
}

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

.flex-center {
	display: flex;
	justify-content: center;
}

.header-center {
	align-items: center;
	flex-direction: column;
	margin-top: 10%;
}

.left-margin {
	margin: 0px 16px;
}

#sj-frame {
	border: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: #111;
}

#sj-error {
	color: #ff6666 !important;
	white-space: pre-wrap;
}

#sj-error-code {
	font-size: 12px;
	color: #fff;
	font-family: "Courier New", Courier, monospace;
}

.logo {
	height: 25vh;
}

.logo-wrapper .text {
	font-size: 75px;
	color: #fff;
}

.logo-wrapper h1 {
	color: white;
}

footer {
	margin: 0 16px;
	margin-top: auto;
	display: flex;
	flex-direction: column;
	line-height: 30px;
	margin-bottom: 20px;
}

footer > div {
	display: flex;
	justify-content: left;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 15px;
}

footer a,
footer span {
	margin: 0 15px;
	text-decoration: none;
	color: #fff;
	font-size: 15px;
}

footer a {
	cursor: pointer;
}

footer a:hover {
	text-decoration: underline;
}

.desc p {
	width: 560px;
	color: rgba(253, 253, 253, 0.514);
}

.credit {
	border-radius: 10px;
	padding: 10px;
	display: block;
	border: #fff 1px solid;
	color: #fff;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 15px;
}

.credit label {
	margin-left: auto;
	margin-right: 15px;
}

.credit a,
.credit label {
	color: white;
	text-decoration: underline;
	text-align: right;
}

.credit pre {
	display: none;
	width: 100%;
}

.credit label::after {
	content: "show license";
	cursor: pointer;
}

.credit input:checked + label::after {
	content: "hide license";
}

.credit input:checked ~ pre {
	display: block;
}