@import url("fonts/Manifont-Grotesk/manifont-grotesk.css");
@import url("fonts/virgo01_regular_macroman/stylesheet.css");
@import url("fonts/Snap-It-Mono/snap-it-mono.css");

html {
	--background-space: rgb(24, 0, 78);
	--background-gray: #335;
	--foreground-gray: rgb(233, 233, 233);
	--foreground-color: rgb(162, 229, 162);
	
	color: var(--foreground-gray);
	background-color: var(--background-space);
	-webkit-text-size-adjust: 100%;
}

@supports(color: color(display-p3 0 1 0)) {
	html {
		--background-space: color(display-p3 0.084 0 0.293);
	}
}

text {
	fill: var(--foreground-gray);
}

body {
	margin: 0px;
	padding: 0px;
}

.ui {
	font-variant: tabular-nums;
}

.ui, .ui * {
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: default;
}

.clickable {
	cursor: pointer;
}

.targeting-mode .clickable {
	cursor: crosshair;
	opacity: 0.8;
}

.targeting-mode .clickable:hover {
	opacity: 1;
}

.popoverContainer {
	padding: 10px;
}

.popover {
	padding: 0.5rem;
	border-radius: 0.5rem;
	box-shadow: 0px 0px 4px 4px var(--background-space);
	background: linear-gradient(160deg, var(--background-gray), var(--background-space));
	/* background-color: rgba(0,0,0,0);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px); */
}

.popover-close {
	float: inline-end;
}

.ui table {
	width: 100%;
}

.ui th {
	text-align: left;
	font-weight: normal;
	white-space: nowrap;
	padding: 0px;
}

.ui td {
	text-align: right;
	font-weight: bold;
	padding: 0px;
}

.floating-button {
	color: var(--foreground-gray);
	background: none;
	border: none;
	cursor: pointer;
	font-weight: bold;
	border-radius: 0.2em;
	font-size: 1.2rem;
	padding: 0rem 0.4rem;
}

.floating-button:hover {
	background: var(--background-gray);
}

.floating-button:disabled {
	background: none;
	color: rgba(255,255,255,0.3);
	cursor: default;
}

.ui-button {
	background-color: #676;
	color: #FFF;
	border: 0px;
	cursor: pointer;
	border-radius: 1px;
	transition: background-color 0.15s ease-out;
	font-size: 0.8rem;
}

.ui-button:hover {
	background-color: #6b6;
}

.ui-button:active {
	background-color: #0e0;
	transition: none;
}

.ui-button:disabled {
	background-color: rgba(102, 119, 102, 0.661);
	color: #777;
	cursor: help;
}

.ui-heading {
	font-family: 'virgo_01', ui-sans-serif, system-ui;
	font-size: 1.6em;
	margin: 0px;
	padding-top: 0.1rem;
	padding-bottom: 0.1rem;
	color: #ccd;
	fill: #ccd;
	text-shadow: 1px 1px 0px black, 2px 2px 0px rgba(255,255,255, 0.3);
}

.ui-text {
	font-family: 'Snap-It Mono', ui-monospace, monospace;
	letter-spacing: 0.05em;
}

.centeredText {
	text-align: center;
}

.rightAlignedText {
	text-align: right;
}

.insufficientResource {
	color: #766;
	fill: #766;
}

.sufficientOxygen {
	color: #bbf;
	fill: #bbf;
}

.safeResource {
	color: #1f4;
	fill: #1f4;
}

.warnResource {
	color: #d90;
	fill: #d90;
	animation: 0.25s linear 0s infinite alternate running warning-flash;
}
@keyframes warning-flash {
	0% {
		color: #fb0;
		fill: #fb0;
	}
	100% {
		color: #a60;
		fill: #a60;
	}
}

.unsafeResource {
	color: #c00;
	animation: 0.25s linear 0s infinite alternate running flashing;
}
@keyframes flashing {
	0% {
		color: #c00;
		fill: #c00;
	}
	100% {
		color: #fff;
		fill: #fff;
	}
}

.sufficientWater {
	color: #6bf;
}

.text-content {
	font-family: 'Manifont Grotesk', ui-sans-serif, system-ui;
}

.text-content h1, .text-content h2, .text-content h3, .text-content h4, .text-content h5, .text-content h6 {
	letter-spacing: 0.05em;
}

#game {
	width: 100vmax;
	max-width: 100vw;
	max-height: 100vh;
	max-height: 100dvh;
}

.shipmentPath {
	stroke-width: 6px;
	stroke-linecap: round;
	transition: all 0.2s ease-out;
}

.filledPath {
	stroke: #0af;
}

.tracedPath {
	stroke: #636;
	stroke-dasharray: 10, 10;
}

.playing .tracedPath {
	animation: marching 1s infinite linear;
}

@keyframes marching {
	to {
		stroke-dashoffset: 20;
	}
}

#eventLog ul {
	list-style-type: none;
	padding: 0px;
	line-height: 1.5em;
}

dialog {
	max-width: 90vw;
}