/* @import url('https://fonts.googleapis.com/css2?family=Istok+Web:ital,wght@0,400;0,700;1,400;1,700&family=Orbitron:wght@400..900&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap');

@font-face {
	font-family: 'anurati';
	src: url('../fonts/anurati-regular.otf') format('opentype');
	font-weight: bold;
}

@font-face {
	font-family: 'astro';
	src: url('../fonts/astro.ttf') format('truetype');
	/* font-weight: normal; */
}

:root {
	/* Colors */
	--font-off-white: hsl(50, 15%, 90%);
	--neutral-yellow: #ffdbc2;
	--positive-green: #c1cbb1;
	--negative-red: #f38989;
	--background-glas-primary: hsla(210, 55%, 65%, 0.1);
	--background-glas-secondary: hsla(180, 50%, 10%, 0.2);
	--background-glas-colorless: hsla(0, 0%, 0%, 0.4);
	--card-box-shadow: -3px 3px 3px -2px hsl(0, 0%, 0%, 0.6),
		2px -2px 2px -2px rgba(255, 255, 255, 0.3);

	/* Fonts */
	--font-futuristic: 'anurati', 'sans-serif';
	--font-futuristic-readable: 'astro', 'sans-serif';
}

body {
	font-family: 'Exo 2', 'system-ui', 'sans-serif';
	margin: 0;
	overflow: hidden;
	font-size: 16px;
}

h1 {
	font-family: var(--font-futuristic);
	font-size: 5rem;
	user-select: none;
	text-shadow: -3px 3px 11px black;
}

h2 {
	font-family: var(--font-futuristic);
	font-size: 4rem;
	user-select: none;
	text-shadow: -3px 3px 11px black;
}

button {
	font-family: var(--font-futuristic-readable);
}

/*****************************
*	Music Control Panel
******************************/
#musicControlPanel {
	z-index: 1000;
	position: absolute;
	top: 0;
	right: 0;

	display: flex;
	justify-content: right;

	opacity: 0;

	&.show {
		opacity: 1;
	}
}

/*****************************
*	Intro View
******************************/
#introScreen {
	height: 100dvh;
	background-color: black;

	/* TESTING initial views */
	/* display: none; */
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;

	& #videoContainer {
		max-height: 75%;
		width: 100%;
		overflow: hidden;

		& #videoPlayer {
			object-fit: cover;
			object-position: center;
		}
	}

	& p {
		color: var(--font-off-white);
		margin-top: 2rem;
		user-select: none;
	}

	& p#skipIntroInstruction {
		opacity: 0;
		transition: opacity 10s ease-in-out;
	}

	& p#skipIntroInstruction.show-skip-intro-instruction {
		opacity: 1;
	}

	& #introOverlay {
		position: absolute;
		background-color: black;
		height: 100%;
		width: 100%;

		/* TESTING initial view */
		/* display: none; */
		display: flex;
		justify-content: center;
		align-items: center;

		transition: opacity 2s ease-in-out;

		&.fade-out-overlay {
			opacity: 0;
		}
	}
}

/*****************************
*	Home View
******************************/
#homeScreen {
	margin: auto;
	height: 100dvh;
	color: var(--font-off-white);

	background-image: url('../images/sci-fi-city.jpg');
	background-size: cover;
	background-position: 80% 50%;
	background-repeat: no-repeat;
	filter: blur(0.4px) brightness(100%) contrast(100%) saturate(100%);

	display: none;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	gap: 5rem;

	& header {
		margin-top: 5rem;
	}

	& #menuButtonsContainer {
		display: flex;
		flex-direction: column;
		padding: 5rem 7vw;

		backdrop-filter: blur(6px);
		background-color: var(--background-glas-primary);
		box-shadow: var(--card-box-shadow);
		border-radius: 10px;

		& button {
			padding: 1rem 0;
			font-size: 2rem;
			text-transform: uppercase;
			background-color: hsl(0, 0%, 0%, 0%);
			border: none;

			transition: all 0.01s ease-in-out;

			&:not(:disabled) {
				color: hsl(0, 0%, 100%, 0.7);
			}

			&:hover:not(:disabled),
			&:focus {
				outline: none;
				color: var(--font-off-white);
				transform: scale(1.3);
				text-shadow: -1px 17px 15px rgba(0, 0, 0, 0.46);
			}
		}
	}
}

/*****************************
*	Result View
******************************/
#resultScreen {
	margin: auto;
	height: 100dvh;
	color: var(--font-off-white);

	background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.7)),
		url('../images/result-defeat.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	filter: blur(0.4px) brightness(100%) contrast(100%) saturate(100%);

	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	& h2 {
		margin-top: 5rem;
	}

	& #resultStatisticsContainer {
		color: var(--font-off-white);
		margin: auto;
		padding: 2rem;

		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;

		backdrop-filter: blur(7px);
		box-shadow: var(--card-box-shadow);
		border-radius: 10px;
		background-color: var(--background-glas-primary);

		& #statistics {
			& table {
				border-spacing: 0.2rem;
				margin: 3rem auto;

				caption {
					padding-bottom: 1rem;
				}

				--width-for-numbers: 5rem;
				--cells-padding-x: 1rem;
				--cell-background: var(--background-glas-colorless);
				--cell-background-darker: hsl(
					from var(--cell-background) h s l / calc(alpha + 0.15)
				);

				/* All Cells */
				& tr > th,
				& tr > td {
					text-align: center;
					border-radius: 4px;

					box-shadow: var(--card-box-shadow);
					background-color: var(--cell-background);
				}

				/* Header Cells */
				& thead {
					/* Entire Head Row */
					& tr > th,
					& tr > td {
						padding: 0.5rem;
						font-weight: bold;
						background-color: var(--cell-background-darker);
					}

					/* Cells with Numbers */
					& tr > td:nth-last-child(-n + 5) {
						max-width: var(--width-for-numbers);
					}
				}

				/* Body Cells */
				& tbody {
					/* First Column */
					& tr > th {
						background-color: var(--cell-background-darker);
					}

					/* Entire Row */
					& tr > th,
					& tr > td {
						padding: 0.2rem var(--cells-padding-x);
					}

					/* Cells with Numbers */
					& tr > td:nth-last-child(-n + 5) {
						max-width: var(--width-for-numbers);
					}
				}
			}
		}

		& #resultButtonContainer {
			display: flex;
			justify-content: center;
			gap: 5rem;

			& button {
				padding: 1rem 0;
				font-size: 1rem;
				text-transform: uppercase;
				background-color: hsl(0, 0%, 0%, 0%);
				border: none;

				transition: all 0.01s ease-in-out;

				&:not(:disabled) {
					color: hsl(0, 0%, 100%, 0.7);
				}

				&:hover:not(:disabled),
				&:focus {
					outline: none;
					color: var(--font-off-white);
					transform: scale(1.3);
					text-shadow: -1px 17px 15px rgba(0, 0, 0, 0.46);
				}
			}
		}
	}
}

/*****************************
*	Game View
******************************/
#gameScreen {
	display: none;
	position: relative;
	margin: auto;
	background-color: black;
	color: var(--font-off-white);
	height: 100dvh;
	z-index: 100;
}

#gameUI {
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 500;

	display: flex;
	justify-content: center;

	& > div {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		border-radius: 5px;
		padding: 1rem;

		& span {
			font-family: monospace;
		}
	}

	& #essential,
	& #ship {
		width: 15rem;
	}

	& #time #timeDisplay {
		font-size: 2rem;
	}

	& div#ship {
		display: flex;
		flex-direction: row;
		gap: 0.5rem;

		& .labels {
			& .label {
				display: flex;
				gap: 0.5rem;

				& img {
					width: 1.5rem;
					object-fit: cover;
				}
			}
		}

		& .power-bars {
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			& .container {
				width: 8rem;
				height: 1.125rem;
				border: 2px solid grey;
				border-radius: 5px;
				background-color: var(--background-glas-colorless);

				& .power {
					width: 100%;
					height: 100%;
					border-radius: 2px;
					background-color: darkcyan;
				}
			}
		}
	}
}

/* ＭＯＤＡＬ */
#gameModal {
	padding: 2rem;
	min-width: 35vw;
	margin: 0 auto;
	margin-top: 25vh;
	user-select: none;

	border: none;
	border-radius: 8px;
	background-color: var(--background-glas-primary);
	backdrop-filter: blur(8px);
	box-shadow: var(--card-box-shadow);

	& #modalMessage {
		margin-bottom: 2rem;
		background-color: var(--background-glas-secondary);
		border-radius: 6px;
		text-align: center;
		padding: 2rem;
		font-size: 1.3rem;

		box-shadow: inset -4px 3px 19px -7px #000000,
			inset 3px -4px 7px -5px rgba(255, 255, 255, 0.5);

		/* Modal Title Presets */
		& > p {
			color: var(--font-off-white);
			text-shadow: -4px 4px 8px #000000;
		}

		& > *.win,
		& > *.lose,
		& > *.pause {
			font-weight: bold;
			font-family: var(--font-futuristic-readable);
			font-size: 3rem;
			padding-bottom: 2rem;
		}

		& > *.pause {
			color: var(--neutral-yellow);
		}

		& > *.win {
			color: var(--positive-green);
		}

		& > *.lose {
			color: var(--negative-red);
		}
	}

	& #buttonContainer {
		display: flex;
		justify-content: center;

		& button {
			outline: none;
			padding: 1rem;
			background-color: hsl(0, 0%, 0%, 0%);
			border: none;

			transition: all 0.01s ease-in-out;

			&:hover,
			&:focus {
				font-weight: bold;
				transform: scale(1.1);
				text-shadow: -1px 17px 15px rgba(0, 0, 0, 0.46);
			}

			&#positive {
				color: var(--positive-green);
			}

			&#negative {
				color: var(--negative-red);
			}
		}
	}
}

#gameModal::backdrop {
	background-color: hsla(0, 0%, 0%, 0.2);
	backdrop-filter: blur(1px);
}

/* ＧＡＭＥ　ＯＢＪＥＣＴＳ*/
#spaceship {
	position: absolute;
	width: 4rem;

	& .thrust-image-container.thrusting {
		position: absolute;
		top: 0;
		left: 0;

		background-image: url('../images/thrust-blue-fire.png');
		background-size: auto;
		background-repeat: no-repeat;
		background-position: 0px 0px;

		/* Sprite Animation */
		width: 42px;
		height: 80px;
		transform: rotate(180deg) translate(-11px, -52px);
		animation: thrustAnimation 0.15s steps(7) infinite;
	}
}

/* Keyframes to cycle through each frame and back */
/* prettier-ignore */
@keyframes thrustAnimation {
	0% { background-position: 0px 0px; }
	50% { background-position: -414px 0px; }
	100% { background-position: 0px 0px; }
}

.projectile {
	position: absolute;
	border-radius: 15px;
	aspect-ratio: 1;
	background-color: white;
}

.asteroid {
	position: absolute;
	aspect-ratio: 1;
}

.health-bar-container {
	position: absolute;
	height: 10px;
	border-radius: 3px;
	outline: 2px solid lightgray;
	background-color: var(--background-glas-colorless);

	& .health-bar {
		height: 90%;
		width: 75%;
		border-radius: 2px;
		background-color: green;
		z-index: 10 00;
	}
}

/* ＥＦＦＥＣＴＳ */
/* prettier-ignore */
@keyframes shake {
	0% { transform: translateX(0); }
	12.5% { transform: translateX(-10px); }
	25% { transform: translateX(10px); }
	37.5% { transform: translateX(-10px); }
	50% { transform: translateX(10px); }
	62.5% { transform: translateX(-10px); }
	75% { transform: translateX(10px); }
	87.5% { transform: translateX(-10px); }
	100% { transform: translateX(0); }
}

.shake {
	animation: 0.4s ease-out 3 shake;
	/* animation-duration: 0.4s; */
	/* animation-timing-function: ease-out; */
	/* animation-iteration-count: 3; */
}

/* ＢＡＣＫＧＲＯＵＮＤ */
#backgroundImageSolid {
	background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.7)),
		url('../images/game-background-1.jpg');
	background-size: auto 135%;
	background-position: center;
	background-repeat: no-repeat;
	filter: blur(1px) brightness(170%) contrast(120%) saturate(80%);

	position: absolute;
	z-index: -1000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#backgroundImageTransparent {
	background-image: url('../images/game-background-2.png');
	background-size: auto 160%;
	background-position: center;
	background-repeat: repeat-y;
	filter: blur(0px) brightness(170%) contrast(120%) saturate(80%);

	position: absolute;
	z-index: -900;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
