/* do-hyeon-regular - latin */
@font-face {
	font-family: "Do Hyeon";
	font-style: normal;
	font-weight: 400;
	src: local("Do Hyeon Regular"),
		local("DoHyeon-Regular"),
		url("../fonts/do-hyeon/do-hyeon-v8-latin-regular.woff2") format("woff2");
}

/* share-tech-mono-regular - latin */
@font-face {
	font-family: "Share Tech Mono";
	font-style: normal;
	font-weight: 400;
	src: local("Share Tech Mono"),
		local("ShareTechMono-Regular"),
		url("../fonts/share-tech-mono/share-tech-mono-v8-latin-regular.woff2") format("woff2");
}

/* Quicksand - latin */
@font-face {
	font-family: "Quicksand";
	font-style: normal;
	font-weight: 400;
	src: local("Quicksand"),
		local("Quicksand-Regular"),
		url("../fonts/quicksand/quicksand-latin-regular.woff2") format("woff2");
}

* {
	margin: 0;
	box-sizing: border-box;
}

html {
	background: #111;
	padding: 1px;
	--border-radius: 8px;
}

a {
	color: #09f;
}

a:hover {
	color: #3df;
}

body {
	font-family: "Do Hyeon", sans-serif;
	background: #160909;
	height: 100vh;
	overflow: hidden;
	display: grid;
	grid-template-columns: 360px 1fr;
	grid-template-rows: 50px 1fr;
	grid-template-areas: "title header" "sidebar viewport";
	grid-gap: 2px;
	padding: 2px;
	box-sizing: border-box;
	color: #eee;
	border-top: 2px solid var(--theme-color);
}

#title,
#viewport {
	background-color: #2b2929;
	border-radius: var(--border-radius);
}

#title {
	grid-area: title;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--theme-color);
	text-align: center;
	font-size: 1.2em;
	text-decoration: none;
}

	#title:hover {
		text-decoration: underline;
	}

	#title img {
		height: 75%;
		margin-right: .5em;
	}

#header {
	--header-height: 50px;
	grid-area: header;
	width: 100%;
	max-height: var(--header-height);
	display: flex;
	justify-content: space-between;
}

	#releaseMeta {
		background-color: #2b2929;
		border-radius: var(--border-radius);
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0 8px;
		font-family: "Share Tech Mono";
		color: #bbb;
		font-weight: 300;
		flex: 1;
	}

		#releaseHash {
		color: #666;
		}

	#externalLinks {
		display: flex;
	}

		#externalLinks a {
			display: flex;
			justify-content: center;
			align-items: center;
			max-height: 100%;
			height: 100%;
			min-width: var(--header-height);
			border-radius: var(--border-radius);
			padding: 8px;
			text-decoration: none;
			margin-left: 2px;
			color: #fff;
			text-shadow: #0009 0px 1px 2px
		}

			#externalLinks a:hover {
				text-decoration: underline;
			}

			#externalLinks img {
				height: 1.8em;
				width: 1.8em;
				margin-right:0px;
				transition: margin-right .4s;
			}

			#externalLinks span {
				display: inline-block;
				text-align: center;
				max-height: 110%;
				width: 4.2em;
				margin-left: -4.2em;
				opacity: 0;
				overflow: hidden;
				clip-path: polygon(100% 0px, 100% 0px, 100% 100%, 100% 100%);
				transition: margin-left .4s, clip-path .4s, opacity .3s;
			}

			#externalLinks a:hover span {
				clip-path: polygon(0px 0px, 100% 0px, 100% 100%, 0px 100%);
				opacity: 1;
				margin-left: 0;
				transform: scaleX(1);
			}

			#externalLinks a:hover img {
				margin-right:8px;
			}

		#discord {
			background-color: #7289DA;
		}

		#patreon {
			background-color: #f86754;
		}

		#github {
			background-color: #24292e;
		}

#viewport {
	position: relative;
	grid-area: viewport;
	overflow: hidden;
	background: repeating-linear-gradient(
		45deg,
		#161616,
		#161616 10px,
		transparent 10px,
		transparent 20px
	);
}
	#viewport.warning {
		background: repeating-linear-gradient(
			45deg,
			#161616,
			#161616 10px,
			#815f0e 10px,
			#815f0e 20px
		);
		display: flex;
	}

	#warning {
		font-family: monospace;
		background:#ffd900;
		border:10px solid #161616;
		padding: 20px;
		font-size: 1.5em;
		max-width: 70ch;
		margin: 30px auto auto auto;
		color: #000;
	}

	#viewport > canvas {
		position: absolute;
	}

	#viewport .overlay {
		position: absolute;
		left: 0px;
		top: 0px;
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: row-reverse;
		justify-content: flex-end;
		pointer-events: none;
		z-index: 10;
	}

	@media screen and (max-width: 1330px) {
		#viewport .overlay {
			flex-direction: column;
			justify-content: space-between;
		}
	}

	#chat,
	#raceLeaderboard,
	#cameraControls {
		pointer-events: all;
	}

	#viewport .overlay button {
		height: 2em;
	}

	#cameraControls {
		position: absolute;
		left: 4px;
		top: 4px;
		display: flex;
		flex-direction: column;
		font-family: "Share Tech Mono", monospace;
		font-size: .8rem;
		text-transform: uppercase;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
		#cameraControls .header {
			font-weight: 600;
			text-shadow: #11111166 1px 1px 2px;
			margin-bottom: 2px;
			display: flex;
		}

		#cameraControls .header i {
			margin-right: 4px;
		}

		#cameraControls .options {
			display: flex;
		}

		#cameraControls .options > * {
			background: #00000066;
			border-radius: var(--border-radius);
			margin-right: 4px;
			opacity: .3;
			transition: opacity .4s;
			text-align: center;
			padding:2px;
			cursor: pointer;
		}

		#cameraControls .options > *.selected {
			opacity: .8;
		}

		#cameraControls .options > *:hover {
			opacity: 1;
		}

		#cameraControls .options i {
			font-size: 1.8rem;
		}

	#notifications {
		align-self: flex-start;
		margin-bottom: 20px;
		text-align: center;
		width: 100%;
		position: absolute;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 4px;
		box-sizing: border-box;
		font-family: "Quicksand", sans-serif;
	}

		@keyframes notification-appear {
			0% {
				display: inline-block;
				max-height: 0em;
			}
			100% {
				max-height: 5em;
			}
		}

		#notifications #notification-template {
			display: none;
		}

		#notifications .notification {
			pointer-events: all;
			font-size: 1.5em;
			animation-name: notification-appear;
			animation-duration: .7s;
			animation-fill-mode: forwards;
			animation-iteration-count: 1;
			transition: opacity 1s, margin-top 1s;
			overflow: hidden;
			background-color: #0009;
			text-align: center;
			color: #eee;
			border-radius: var(--border-radius);
			box-shadow: 0px 3px 3px #1119;
			width: 64ch;
			display: flex;
			margin-bottom: 4px;
		}

			#notifications .notification div {
				align-items: center;
				justify-content: center;
			}

			#notifications .notification-status {
				font-family: "Share Tech Mono", monospace;
				font-size: 1.5em;
				color: #222;
				height: 100%;
				width: 2.5ch;
				font-weight: 600;
				display: none;
				margin: 2px 0px;
			}

				#notifications .notification.exclamation .notification-status.exclamation,
				#notifications .notification.wait .notification-status.wait,
				#notifications .notification.check .notification-status.check,
				#notifications .notification.cross .notification-status.cross {
					display: flex;
					justify-content: center;
					align-items: center;
				}

			#notifications .notification-content {
				display: flex;
				flex: 1;
				text-shadow: 1px 1px 0px #1119;
			}

			#notifications div.notification-progress {
				display: flex;
				align-items: center;
				justify-content: space-around;
				background: #2b292999;
				margin: 0;
				padding: 4px 16px;
			}

				#notifications .notification-progress-step {
					width: 1em;
					height: 1em;
					border-radius: 2px;
					margin: 0 .2em;
					color: transparent;
					font-size: .5em;
					background-color: #0009;
					transition: height .3s;
				}

				#notifications .notification-progress-step.pending {
					background-color: #0009;
				}

				@keyframes notification-progress-step-loading {
					0% { background-color: #f90f; }
					100% { background-color: #f903; }
				}

				#notifications .notification-progress-step.loading {
					animation-name: notification-progress-step-loading;
					animation-duration: 1s;
					animation-direction: alternate;
					animation-iteration-count: infinite;
					animation-timing-function: ease-in-out;
					height: 2em;
				}

				#notifications .notification-progress-step.completed {
					background-color: #9f99;
				}

				#notifications .notification-progress-step.failed {
					background-color: #f999;
				}

			/* Notification class variants */
			#notifications .notification.red {
				background-color: #ce291499;
			}
			#notifications .notification.red .notification-status {
				color: #8d1606;
			}

			#notifications .notification.green {
				background-color: #00aa0099;
			}
			#notifications .notification.green .notification-status {
				color: #064b06;
			}

			#notifications .notification.blue {
				background-color: #4286f499;
			}
			#notifications .notification.blue .notification-status {
				color: #0e4db3;
			}


#chat {
	position: relative;
	left: 4px;
	bottom: 4px;
	border-radius: var(--border-radius);
	overflow: hidden;
	width: 100%;
	font-size: 13px;
	max-width: 60ch;
	min-width: 50ch;
	min-height: 150px;
	max-height: 500px;
	height: 100%;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-self: flex-end;
}

	#chat > iframe {
		flex: 1;
	}

@media screen and (max-width: 1330px) {
	#chat {
		align-self: flex-start;
	}
}

#raceLeaderboard {
	min-height: 0px;
	width: 100%;
	max-width: 85ch;
	min-width: 60ch;
	background: #2b2929cc;
	border-radius: var(--border-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	margin: 16px auto;
	max-height: 0%;
	opacity: 0;
	transform: translate(0, -100px);
	transition:
		min-height 2s ease 0s,
		max-height 2s ease 0s,
		opacity 1s linear .5s,
		transform 1.5s ease 0s;
}

	#raceLeaderboard.visible {
		max-height: 100%;
		min-height: 200px;
		opacity: 1;
		transform: translate(0, 0px);
	}

	#raceLeaderboard > .header {
		padding-left: 8px;
		background-color: #BA0069cc;
		font-size: 1.5em;
		color: #eee;
	}

	#raceLeaderboard > .header .author {
		font-size: .8em;
		color: #cc91b3;
	}

	#results {
		flex:1;
		font-family: "Share Tech Mono";
		display: flex;
		flex-direction: column;
		overflow: hidden;
		letter-spacing: -1px;
		pointer-events: all;
	}
		#resultsList {
			overflow-y: auto;
		}

		#results .header,
		.resultsEntry {
			display: flex;
			padding: 2px;
			border-bottom: 1px solid #1113;
		}

		#resultsListTemplate {
			display: none;
		}

		#results .rank {
			width: 4ch;
			padding-right: 4px;
			text-align: right;
		}
		#results .name {
			flex: 1;
			padding-left: 4px;
		}
		#results .time {
			width: 6ch;
			text-align: right;
			padding-right: 4px;
		}
		#results .record {
			width: 2ch;
			text-align: right;
			padding-right: 4px;
		}
		#results .timediff {
			width: 7ch;
			text-align: right;
			padding-right: 4px;
		}
		#results .points {
			width: 7ch;
			text-align: right;
			padding-right: 4px;
		}
		#results .pointstotal {
			width: 9ch;
			text-align: right;
			padding-right: 4px;
		}

		#results .header {
			background-color: #4B002Acc;
			color: #eee;
			font-size: 1em;
		}

		.resultsEntry.currentPlayer {
			background: #4B002A66;
			border-bottom: 1px solid #BA006969;
		}
		.resultsEntry .rank {
			color: var(--theme-color);
			font-weight: 600;
		}
		.resultsEntry .name {
			overflow: hidden;
			overflow-wrap: anywhere;
			max-height: 1.1em;
		}
		.resultsEntry .record.wr {
			color: #ffd900;
			text-shadow: #ffd90033 0px 0px 3px;
		}
		.resultsEntry .record.pb {
			color: #008000;
			text-shadow: #00800033 0px 0px 3px;
		}
		.resultsEntry .time.dnf {
			color: #999;
		}
		.resultsEntry .timediff {
			color: #999;
		}
		.resultsEntry .points.none {
			color: #999;
		}
		.resultsEntry .pointstotal {
			color: #999;
		}

#sidebar {
	grid-area: sidebar;
	display: grid;
	grid-template-columns: 1fr 80px;
	grid-template-rows: 50px 1fr;
	grid-template-areas: "gamestate timer" "menu menu";
	grid-gap: 2px;
	box-sizing: border-box;
	color: #eee;
	overflow: hidden;
}

	#sidebar > * {
		box-sizing: border-box;
	}

	#gameState {
		grid-area: gamestate;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #2b2929;
		border-radius: var(--border-radius);
	}
		#state {
			margin: 0px 8px;
			font-size: 1.7em;
			font-weight: 300;
			text-align: center;
		}

	#timer {
		display: flex;
		align-items: center;
		justify-content: center;
		grid-area: timer;
		text-align: center;
		font-size: 2em;
		letter-spacing: -3px;
		padding-right:3px;
		background-color: #2b2929;
		border-radius: var(--border-radius);
	}

	#menu {
		grid-area: menu;
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: hidden;
	}

		#menuOptions {
			display: flex;
		}

			#menuOptions > div {
				font-size: 1.8em;
				padding: .2em .1em 0 .1em;
				background-color: #1c1a1a;
				border-radius: var(--border-radius) var(--border-radius) 0 0;
				margin-right:2px;
			}

			#menuOptions > div:not(.selected) {
				cursor: pointer;
				color: #999;
			}

			#menuOptions > div:not(.selected):hover {
				color: #fff;
			}

			#menuOptions > div.selected {
				background-color: #2b2929;
			}

		#menuContent {
			background-color: #2b2929;
			border-radius: 0 var(--border-radius) var(--border-radius) var(--border-radius);
			flex:1;
			overflow: hidden;
			display: flex;
			flex-direction: column;
		}

	#gameInfo {
		display: flex;
		flex: 1;
		flex-direction: column;
		min-height: 350px;
		padding: 9px;
		visibility: visible;
		overflow: hidden;
	}

		#gameInfo h2 {
			font-weight: 300;
		}

		#gameInfo.hidden {
			visibility: hidden;
		}

		#gameInfo.enter #timer,
		#gameInfo.started #timer {
			display: block;
		}

		#gameInfo.starting #timer {
			display: none;
		}

		#gameInfo.enter #state {
			width: 260px;
		}

		#gameInfo.starting #state,
		#gameInfo.started #state {
			width: auto;
			flex: 2;
		}

	#welcomeMessage {
		display: none;
	}

	#welcomeMessage ~ hr {
		margin-top: 12px;
	}

	#welcomeMessage {
		text-align: center;
	}

.themeNumber {
	font-family: "Share Tech Mono", monospace;
	font-weight: 600;
	color: var(--theme-color);
	text-shadow: 2px 2px var(--theme-color-dark);
}

p {
	margin: 0px 8px 4px 8px;
}

#marbleList {
	flex: 1;
	overflow: auto;
	display: flex;
	flex-direction: column;
}

#marbleListTemplate {
	display: none;
}

.marbleListEntry {
	display: flex;
	order: 9999;
}
	.marbleListEntry.player {
		background-color: var(--theme-color-dark);
	}
	.marbleListEntry .camera {
		margin-right: 8px;
		text-align: right;
		visibility: hidden;
		cursor: pointer;
	}
	.marbleListEntry:hover .camera {
		visibility: visible;
		color: #666;
	}
	.marbleListEntry .camera.selected {
		visibility: visible;
		color: inherit;
	}

	.marbleListEntry .color {
		width: 1em;
		height: 1em;
		margin-top: 2px;
		margin-right: 4px;
		border-radius: 100%;
		display: inline-block;
		background-blend-mode: darken;
		background-size: 200% 100%;
	}

	.marbleListEntry .id {
		min-width: 2.5em;
		margin-left: 8px;
		text-align: right;
	}

	.marbleListEntry .name {
		flex: 1;
	}

	.marbleListEntry .status {
		margin: 0px 4px;
	}
		.marbleListEntry .status .icon-cancel {
			color: #b44;
			display: none;
		}
		.marbleListEntry .status .icon-flag-checkered {
			color: #7b7;
			display: none;
		}
		.marbleListEntry.finished .status .icon-flag-checkered { display: block; }

	.marbleListEntry .rank {
		font-family: "Share Tech Mono", monospace;
		min-width: 2.5em;
		margin-right: 8px;
		text-align: right;
	}

	.marbleListEntry .time {
		font-family: "Share Tech Mono", monospace;
		min-width: 4em;
		text-align: right;
		color:#999;
	}