* {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	color: rgba(255, 255, 255, 0.87);
	background-color: #000000;
}

#app {
	width: 100%;
	height: 100vh;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}

#pixi-container {
	display: contents;
}

@font-face {
	font-family: Exo;
	src: url("/assets/fonts/exo.ttf");
}

@font-face {
	font-family: ExoBold;
	src: url("/assets/fonts/Exo-SemiBold.ttf");
}

* {
	box-sizing: border-box;
}

:root {
	--primary: #2aa8f8;

	button {
		font-family: Exo, sans-serif;
		width: 100%;
		height: 80px;
		border: 0;
		border-radius: 16px;
		box-shadow: none;
		background: var(--primary);
		color: #fff;
		font-size: 32px;
		cursor: pointer;

		&:hover {
			background: #158cd6;
		}

		&.alt {
			border: 3px solid var(--primary);
			background: transparent;
			color: var(--primary);

			&:hover {
				border-color: #158cd6;
				background: #158cd6;
				color: #fff;
			}
		}

		&.toggle-btn {
			--icon-colour: #fff;

			height: 68px;
			border-radius: 8px;
			display: grid;
			grid-template-columns: max-content 1fr;
			padding: 20px;
			gap: 12px;
			white-space: nowrap;
			align-items: center;
			font-size: 18px;
			background: #0003;
			z-index: 100;

			> span:has(> svg) {
				display: grid;
				place-items: center;
			}

			&.active {
				--icon-colour: var(--primary);

				background: #fff;
				color: var(--primary);
			}

			&.disabled {
				opacity: 0.5;
				pointer-events: none;
			}

			&:has(> span:empty) {
				grid-template-columns: 1fr;
			}
		}
	}
}

game-modal {
	transition: opacity 0.5s ease-out;

	img {
		width: 100%;
	}

	&:not(:defined) {
		opacity: 0;
	}
}

.modal-wrapper {
	box-sizing: border-box;
	padding: 68px 42px;
	display: grid;
	align-items: center;
	width: 100%;
	height: 100%;
	/* background: #00000012; */
	/* backdrop-filter: blur(2px); */

	.modal {
		position: relative;
		background: #fff;
		font-family: Exo, sans-serif;
		color: #000;
		display: grid;
		grid-auto-flow: row;
		grid-template-rows: minmax(100px, max-content) min-content 1fr max-content;
		gap: 20px;
		padding: 48px 32px;
		justify-items: center;
		border-radius: 16px;
		font-size: 26px;

		/*.img {
			img {
				width: 100%;
			}
		}*/

		.title {
			font-family: ExoBold, sans-serif;
			font-size: 38px;
		}

		.message {
			text-align: center;
			font-family: Exo, sans-serif;
			::slotted(*) {
				white-space: pre-wrap;
			}
		}

		.close-btn {
			position: absolute;
			right: 20px;
			top: 20px;
			width: 48px;
			height: 48px;
			border-radius: 8px;
			opacity: 0;
			pointer-events: none;
			box-shadow: 0px 0px 16px 0px rgba(0, 19, 31, 0.08);
			display: grid;
			place-items: center;
			cursor: pointer;

			/* &:hover {
				background: ;
			} */

			&.active {
				opacity: 1;
				pointer-events: all;
			}
		}

		button {
			font-family: Exo, sans-serif;
			width: 100%;
			height: 80px;
			border: 0;
			border-radius: 16px;
			box-shadow: none;
			background: var(--primary);
			color: #fff;
			font-size: 32px;
			cursor: pointer;

			&:hover {
				background: #158cd6;
			}

			&.alt {
				border: 3px solid var(--primary);
				background: transparent;
				color: var(--primary);

				&:hover {
					border-color: #158cd6;
					background: #158cd6;
					color: #fff;
				}
			}
		}
	}
}