html, body {
	padding: 0;
	margin: 0;
	/* height: 100%; */
}
body {
	background: #555;
	overflow: hidden;
	font-size: calc(12px + 0.75vmin);
	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
	font-family: "Texturina", serif;
	font-optical-sizing: auto;
	touch-action: none;
}

/*

.grenze-gotisch-<uniquifier> {
  font-family: "Grenze Gotisch", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
.new-rocker-regular {
  font-family: "New Rocker", system-ui;
  font-weight: 400;
  font-style: normal;
}
.texturina-<uniquifier> {
  font-family: "Texturina", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
*/

dialog {
	padding: 5vmin;
	min-width: 40vw;
	background: #3e3b66;
	border: solid 2px #4a5786;
	box-shadow: 0.2em 1em 1em #0005;
	color: #6fb0b7;
	text-align: center;
}
dialog::backdrop {
	background: #2d1e2f77;
}

button {
	display: block;
	padding: 0.5em 1em;
	border-radius: 0.5em;
	background: #3f5b7477;
	border: solid 1px #488885;
	color: #64b082;
	font-weight: bold;
	font-size: inherit;
	cursor: pointer;
	transition: 0.05s ease-in-out;
	user-select: none;
	-webkit-user-select: none; /* safari doesn't support user-select? */
	touch-action: none;
	font-family: "New Rocker";
	font-weight: normal;
	/* font-family: "Grenze Gotisch", serif; */
	font-size: 105%;
}
button:hover {
	border-color: #fcecd1;
}
button:active {
	transform: scale(0.93);
}

input {
	font-size: inherit;
	padding: 0.2em;
	border: solid 1px #4a5786;
	background: #392945;
	color: #fcecd1;
}
input:read-only {
	background: transparent;
}

.key-hint {
	color: #a0ddd3;
}
.key-hint::before {
	content: "[";
}
.key-hint::after {
	content: "]";
}

#title {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	background: #2d1e2f;
	color: #6fb0b7;
	z-index: 10;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	transition: transform 2s ease-in-out, opacity 2s ease-in-out, background-color 0.5s ease-in-out;
	text-shadow: 0 0.5em 0.5em #0005;
	font-size: 110%;
}
#title h1 {
	font-size: 10vmin;
	letter-spacing: 0.1em;
	font-family: "New Rocker";
}
#title .of {
	font-family: "Texturina", serif;
	display: inline-block;
	font-size: 90%;
	transform: translate(0px, 0.3em);
}
#title.title--removed {
	transform: scale(0);
	opacity: 0;
	background-color: transparent;
	pointer-events: none;
}
.title--removed .loading {
	display: none;
}

#ui {
	position: absolute;
	top: 0;
	/*
	bottom: 0;
	height: 100vh;
	height: calc(var(--vh, 1vh) * 100);
	*/
	width: 100%;
	padding: 0;
	color: #c3a79c;
	text-align: center;
	/*
	border: solid 2px #00ffff;
    box-sizing: border-box;
	*/
}

.top-ui-row {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	/* border: solid 1px blue; */
	gap: 1em;
	padding: 1em;
	user-select: none;
}

.top-ui-row > div {
	/* border: solid 1px red; */
}


#conn-details {
	text-align: left;
}
#conn-details button {
	display: inline-block;
}
#current-connection {
	display: inline-block;
	margin: 0 0 0 1em;
}


#scores {

}
#throttle {
	/* position: absolute; */
	left: 1vmin;
	top: 4em;
	width: 10em;
	text-align: left;
}

#death {
	background: #2d1e2f;
	border-color: #3e3b66;
	color: #a94b54;
}
#death .notice {
	font-size: 2em;
}
#death button {
	margin: 3vmin auto 0 auto;
}


#controls {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 12vh;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
}
#controls button {
	height: 10vh;
	width: calc(5em + 10vmin);
	margin: 1em;
	background: #3f5b7433;
}

#p2p-dialog {
	text-align: left;
}
.host-title, .hosting-title, .hosting-tip, .host-action,
.connect-title, .connected-title, .connect-action {
	display: none;
}
.p2p-connected .host-title,
.p2p-hosting .hosting-title,
.p2p-hosting .hosting-tip,
.p2p-connected .host-action,
.p2p-hosting .connect-title,
.p2p-connected .connected-title,
.p2p-hosting .connect-action {
	display: block;
}

#p2p-dialog h1 {
	margin: 0;
}
#p2p-dialog header {
	display: flex;
	justify-content: space-between;
}

.or-divider {
	margin: 2.5em 0 1em 0;
	border-top: solid 1px #577f9d;
}
.or-divider > div {
	position: relative;
	top: -0.5em;
	width: 3em;
	left: calc(50% - 1.5em);
	background: #3e3b66;
	text-align: center;
}

.tabs {
	justify-content: space-around;
	border-bottom: solid 1px #48888566;
	padding-bottom: 0;
}
.tabs button {
	border-color: transparent;
	background-color: transparent;
	border-radius: 0.5em 0.5em 0 0;
	border-bottom-width: 0;
}
.tabs button:hover {
	background: #3f5b7477;
	border: solid 1px #488885;
	border-bottom-color: transparent;
}

.tab-section {
	height: 0;
	overflow: hidden;
	opacity: 0;
	padding: 0;
	transition: all 0.2s ease-in-out;
	justify-content: center;
	align-items: center;
	gap: calc(1em + 1vmin);
}
.tabs-open-ship .tab-section-ship,
.tabs-open-rep .tab-section-rep,
.tabs-open-p2p .tab-section-p2p {
	height: auto;
	max-height: 20vh;
	opacity: 1;
	padding: calc(1em + 1vmin);
}
.tabs-open-ship .tab-ship,
.tabs-open-rep .tab-rep,
.tabs-open-p2p .tab-p2p {
	background-color: #392945;
	border-color: #48888566;
	border-bottom: solid 2px #392945;
	margin-bottom: -1px;
}


#cargo {
	display: flex;
	flex-direction: row;
}
.cargo-slot,
.health-slot {
	display: block;
	margin: 0 1em 0 0;
	padding: 0;
}
.cargo-slot--empty {
	color: #7b6268;
	opacity: 0.3;
}
.cargo-slot-block,
.health-slot-block {
	position: relative;
	border: solid 1px #7b6268;
	/* color: #9c807e; */
	box-sizing: border-box;
	width: calc(5vmin + 2em);
	height: calc(5vmin + 2em);
}
.slot-value {
	position: absolute;
	width: 100%;
	font-size: 120%;
	text-align: center;
}
.slot-bar {
	height: 100%;
	background: #5d455066;
}
.slot-name {
	font-size: 80%;
	width: 100%;
	text-align: center;
}
.cargo-slot .slot-name {
	color:  #9c807e;;
}
.slot--bad .slot-block {
	border-color: #a94b54;
}
.slot--bad .slot-value {
	color: #d8725e;
}

.health-bar {
	width: 10vw;
	height: 0.8em;
	margin: 0 0 0 1em;
	display: inline-block;
	background: #2d1e2f44;
	border: solid 1px #5d4550;
}
.health-bar > div {
	height: 100%;
	background: #c57f79;
}