:root {
	--orange: #eda031;
	--blue: #272946;
	--sb-track-color: color-mix(in srgb, white, transparent 90%);
	--sb-thumb-color: var(--orange);
	--sb-size: 14px;
}

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

}

body,
html {
	color: var(--orange);
	background-color: black;

	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

*::-webkit-scrollbar {
	width: var(--sb-size)
}

*::-webkit-scrollbar-track {
	background: var(--sb-track-color);
	border-radius: 3px;
}

*::-webkit-scrollbar-thumb {
	background: var(--sb-thumb-color);
	border-radius: 3px;

}

@supports not selector(::-webkit-scrollbar) {
	* {
		scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
	}
}

#App {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	display: flex;
	flex-direction: column;
}

.targetable {
	cursor: pointer;
	user-select: none;
	padding: 8px 16px;
}

.targetable.active {
	color: var(--blue);
	background-color: var(--orange);
}

.targetable:hover:not(.active) {
	opacity: 0.8;
	background-color: var(--blue);
	color: var(--orange);
}

.panel {
	background-color: black;
	border: 1px solid var(--orange);
}

.b-top {
	border-top: 1px solid var(--orange);
}

.b-right {
	border-right: 1px solid var(--orange);
}

.b-left {
	border-left: 1px solid var(--orange);
}

.b-bottom {
	border-bottom: 1px solid var(--orange);
}

.padded {
	padding: 16px;
}

#top {
	display: flex;
	flex-flow: row nowrap;
	width: 100%;
	height: 100%;
	align-items: start;
	justify-content: center;
}

#canvas-container {
	position: relative;
	display: flex;
	flex-grow: 1;
	flex-shrink: 0;
	flex-basis: auto;

	width: calc(100% - 200px);
	height: 100%;
	overflow: hidden;
}

#side {
	grid-area: side;
	display: flex;
	flex-flow: column;
	height: 100%;
	width: 200px;
	background-color: var(--sb-track-color);
}

#bottom {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-area: bottom;
	width: 100%;
	height: 200px;

	border: 1px solid var(--orange);
	background-color: var(--sb-track-color);
}

#scanner {
	overflow: auto;
}

#inventory {
	display: flex;
	flex-flow: column;
	height: 100%;
	flex-grow: 1;
}

#controls>div {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
	gap: 8px;
}

.flex {
	display: flex;
}

.flow-row {
	flex-flow: row nowrap;
}

.align-center {
	align-items: center;
}

.justify-space-between {
	justify-content: space-between;
}

button {
	font: 16px 800 'Trebuchet MS', Helvetica, sans-serif;

	border-radius: 5px;
	border: 1px solid var(--orange);
	color: var(--orange);
	background: none;
	outline: none;
	padding: 15px 30px;

	cursor: pointer;
	transition: all 0.3s ease-out;
	transform: translateY(0px) translatex(0px);
}

button:disabled {
	border-color: var(--blue);
	color: var(--blue);
}

button.active {
	background-color: var(--orange);
	color: black;
}

.modal {
	z-index: 99;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 400px;
	height: 300px;
	overflow: auto;
	transform: translate3d(-50%, -50%, 0);

	background-color: color-mix(in srgb, var(--blue), transparent 50%);
	border: 1px solid var(--orange);

	backdrop-filter: blur(25px);

	padding: 16px;

	display: none;
	flex-flow: column;
	gap: 8px;
}

.modal[data-open="true"] {
	display: flex;
}