@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/fonts/KFOmCnqEu92Fr1Mu4mxK.woff2") format("woff2");
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/fonts/KFOmCnqEu92Fr1Mu7GxKOzY.woff2") format("woff2");
	unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF
}

@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/fonts/KFOmCnqEu92Fr1Mu7WxKOzY.woff2") format("woff2");
	unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB
}

@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/fonts/KFOmCnqEu92Fr1Mu4WxKOzY.woff2") format("woff2");
	unicode-range: U+0370-03FF
}

@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/fonts/KFOmCnqEu92Fr1Mu7mxKOzY.woff2") format("woff2");
	unicode-range: U+1F00-1FFF
}

@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/fonts/KFOmCnqEu92Fr1Mu5mxKOzY.woff2") format("woff2");
	unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116
}

@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/fonts/KFOmCnqEu92Fr1Mu72xKOzY.woff2") format("woff2");
	unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F
}

@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url("/fonts/KFOlCnqEu92Fr1MmYUtfBBc4.woff2") format("woff2");
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url("/fonts/KFOlCnqEu92Fr1MmYUtfChc4EsA.woff2") format("woff2");
	unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF
}

@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url("/fonts/KFOlCnqEu92Fr1MmYUtfCxc4EsA.woff2") format("woff2");
	unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB
}

@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url("/fonts/KFOlCnqEu92Fr1MmYUtfBxc4EsA.woff2") format("woff2");
	unicode-range: U+0370-03FF
}

@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url("/fonts/KFOlCnqEu92Fr1MmYUtfCBc4EsA.woff2") format("woff2");
	unicode-range: U+1F00-1FFF
}

@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url("/fonts/KFOlCnqEu92Fr1MmYUtfABc4EsA.woff2") format("woff2");
	unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116
}

@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url("/fonts/KFOlCnqEu92Fr1MmYUtfCRc4EsA.woff2") format("woff2");
	unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F
}

*, *:before, *:after {
	box-sizing: border-box;
	font-family: "Roboto",Arial,sans-serif
}

html {
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	font-family: "Roboto",Arial,sans-serif;
	line-height: 1.15
}

body {
	background-color: #fff;
	color: #212529;
	font-family: "Roboto",Arial,sans-serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
	text-align: left
}

p {
	margin-top: 0;
	margin-bottom: 1rem
}

a {
	background-color: transparent;
	color: #00b0e1;
	text-decoration: none
}

	a:hover {
		color: #0056b3;
		text-decoration: underline
	}

::-webkit-resizer {
	display: none
}

::placeholder {
	color: #b9b9b9;
	opacity: 1
}

:-ms-input-placeholder {
	color: #b9b9b9
}

::-ms-input-placeholder {
	color: #b9b9b9
}

::-webkit-scrollbar {
	width: 1vmin
}

::-webkit-scrollbar-track {
	background: #0000
}

::-webkit-scrollbar-thumb {
	background: #000;
	border-radius: .2vmin
}

	::-webkit-scrollbar-thumb:hover {
		background: #1a1a1a
	}

body, html {
	-webkit-font-smoothing: antialiased;
	font-family: "Roboto",Arial,sans-serif;
	font-size: 1vmin;
	margin: 0;
	overflow: hidden;
	overscroll-behavior: none;
	padding: 0;
	touch-action: none
}

.hide {
	opacity: 0
}

#game-canvas {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: -4
}

#title, #subtitle {
	-webkit-text-stroke-width: .3vmin;
	-webkit-text-stroke-color: #000;
	align-items: center;
	color: #fff;
	font-family: "Roboto",Arial,sans-serif;
	font-weight: 700;
	height: 5vmin;
	left: 50%;
	pointer-events: none;
	position: absolute;
	text-align: center;
	transform: translateY(-50%) translateX(-50%) scale(var(--ui-user-scale, 1));
	-ms-transform: translateY(-50%) translateX(-50%) scale(var(--ui-user-scale, 1));
	-webkit-transform: translateY(-50%) translateX(-50%) scale(var(--ui-user-scale, 1))
}

#title {
	font-size: 8vmin;
	top: 1vmin
}

#subtitle {
	font-size: 4vmin;
	top: 10vmin;
	transition: opacity .5s,top .5s;
	letter-spacing: 0.1vh
}

	#subtitle.hide {
		opacity: 0
	}

#changelog {
	height: 50vmin;
	left: 1vmin;
	position: fixed;
	top: 1vmin;
	transition: opacity .5s,top .5s;
	width: 35vw;
	opacity: 1;
	color: #fff;
	font-family: "Roboto",Arial,sans-serif;
	font-size: 2vmin;
	font-weight: 700;
	text-align: left;
	-webkit-text-stroke: 0;
	text-shadow: -.2vmin -.2vmin 0 #000,0 -.2vmin 0 #000,.2vmin -.2vmin 0 #000,.2vmin 0 0 #000,.2vmin .2vmin 0 #000,0 .2vmin 0 #000,-.2vmin .2vmin 0 #000,-.2vmin 0 0 #000;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	transform-origin: top left;
	transform: scale(var(--ui-user-scale, 1))
}

	#changelog.hide {
		opacity: 0
	}

	#changelog > p {
		margin: 1vmin;
		color: #fff;
		font-family: "Roboto",Arial,sans-serif;
		font-size: 2vmin;
		font-weight: 700;
		text-align: left;
		-webkit-text-stroke: 0;
		text-shadow: inherit
	}

	#changelog a {
		color: #00b0e1;
		text-decoration: none
	}

		#changelog a:hover {
			color: #0056b3;
			text-decoration: underline
		}

#play-menu-wrapper {
	position: fixed;
	left: 50%;
	top: 55vh;
	transform: translateY(-50%) translateX(-50%) scale(var(--ui-user-scale, 1));
	-ms-transform: translateY(-50%) translateX(-50%) scale(var(--ui-user-scale, 1));
	-webkit-transform: translateY(-50%) translateX(-50%) scale(var(--ui-user-scale, 1));
	opacity: 1;
	transition: opacity 2s,top 1s;
	z-index: 1;
}

	#play-menu-wrapper.hide {
		opacity: 0;
		top: -10vmin;
		transition: opacity 1s,top .5s;
	}

#play-menu {
	align-items: center;
	background-color: #fff;
	border-radius: .5vmin;
	box-shadow: 0 0 0 .4vmin #000;
	display: flex;
	flex-direction: row;
	opacity: 1;
	padding: .3vmin;
	text-align: center;
	transition: opacity .5s,top .5s;
}

	#play-menu.hide {
		opacity: 0;
		pointer-events: none;
	}

	#play-menu p {
		margin-bottom: 0
	}

	#play-menu button,
	#play-menu input,
	#play-menu select {
		border: none;
		font-family: Roboto;
		font-size: 3vmin;
		font-weight: 700;
		height: 5vmin;
		max-height: 5vmin;
		outline: none;
		padding: 0;
		text-align: left;
	}

	#play-menu input {
		background-color: rgba(255,0,0,0);
		padding-left: 1vmin;
		width: 30vmin;
	}

	#play-menu select {
		border-radius: .5vmin;
		height: 5vmin;
	}

	#play-menu button,
	#play-menu select {
		background-color: #38b764;
		color: #fff;
		padding-left: .5vmin;
		padding-right: .5vmin;
	}

	#play-menu button {
		margin-left: .5vmin;
		cursor: pointer;
		border-radius: .6vmin;
	}

		#play-menu button:hover {
			background-color: #48f083
		}

#connecting-text {
	color: #fff;
	font-family: Roboto;
	font-size: 6vmin;
	font-weight: 700;
	height: 13vmin;
	left: 50%;
	opacity: 1;
	position: absolute;
	text-align: center;
	top: 4.5vmin;
	transform: translateY(-50%) translateX(-50%) scale(var(--ui-user-scale, 1));
	-ms-transform: translateY(-50%) translateX(-50%) scale(var(--ui-user-scale, 1));
	-webkit-transform: translateY(-50%) translateX(-50%) scale(var(--ui-user-scale, 1));
	transition: opacity 1s,top 1s;
	width: 40vmin;
	z-index: -1;
	text-shadow: -.3vmin -.3vmin 0 #000, 0 -.3vmin 0 #000, .3vmin -.3vmin 0 #000, .3vmin 0 0 #000, .3vmin .3vmin 0 #000, 0 .3vmin 0 #000, -.3vmin .3vmin 0 #000, -.3vmin 0 0 #000;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

	#connecting-text.hide {
		opacity: 0;
		transition: opacity .5s,top .5s;
	}


.modal {
	height: 0;
	padding: 1vmin;
	position: fixed;
	width: 0;
	z-index: 6;
	opacity: 0;
	transition: opacity .5s;
	pointer-events: none
}

	.modal.ui-modal-open {
		opacity: 1;
		pointer-events: auto
	}

	.modal, .modal:before {
		bottom: 0;
		left: 0;
		right: 0;
		top: 0
	}

		.modal:before {
			background-color: rgba(0,0,0,.5);
			content: "";
			display: inline-block;
			height: 120vh;
			position: absolute;
			transition: opacity .5s;
			width: 120vw;
			opacity: 0;
			pointer-events: none
		}

		.modal.ui-modal-open:before {
			opacity: 1;
			pointer-events: inherit
		}

		.modal > div {
			background-color: rgba(0,0,0,.5);
			border-radius: .5vmin;
			box-shadow: 0 0 0 .4vmin #000;
			color: #fff;
			font-family: "Roboto",Arial,sans-serif;
			font-weight: 700;
			left: 50%;
			padding: 2vmin 3vmin;
			position: fixed;
			text-align: center;
			transform: translateY(-50%) translateX(-50%) scale(var(--ui-user-scale, 1));
			-ms-transform: translateY(-50%) translateX(-50%) scale(var(--ui-user-scale, 1));
			-webkit-transform: translateY(-50%) translateX(-50%) scale(var(--ui-user-scale, 1));
			transition: top .5s,opacity .5s;
			top: -100%;
			opacity: 0;
			pointer-events: none
		}

		.modal.ui-modal-open > div {
			top: 50%;
			opacity: 1;
			pointer-events: auto
		}

		.modal > div * {
			margin-bottom: .5vmin;
			margin-top: .5vmin
		}

		.modal > div hr {
			border: 0;
			border-top: .2vmin solid #fff
		}

		.modal > div button {
			appearance: none;
			-webkit-appearance: none;
			border: 0;
			outline: none;
			background-color: rgba(0,0,0,.5);
			border-radius: .5vmin;
			box-shadow: 0 0 0 .4vmin #000;
			color: #fff;
			font-family: "Roboto",Arial,sans-serif;
			font-size: 1.8vmin;
			font-weight: 700;
			height: auto;
			margin-left: 1vmin;
			margin-right: 1vmin;
			padding-left: 1vmin;
			padding-right: 1vmin;
			padding-top: .25vmin;
			padding-bottom: .25vmin;
			line-height: 1.2;
			text-align: center;
			white-space: nowrap;
			width: auto;
			cursor: pointer
		}

			.modal > div button:hover {
				background-color: rgba(32,32,32,.5)
			}

#exit-changelog {
	padding-top: 0.6vmin;
	padding-bottom: 0.6vmin
}

#full-changelog-text {
	overflow: auto;
	overflow-x: hidden;
	height: 70vh;
	width: 70vw;
	text-align: left;
	font-size: 2vmin;
	font-weight: 400;
	margin: 1vmin;
	white-space: pre-wrap;
	word-break: break-word
}

.full-changelog-text-bold {
	font-weight: 900
}

#full-changelog-title {
	font-size: 3.6vmin;
	font-weight: 900
}

.full-changelog-entry {
	padding: .2vmin 0
}

.full-changelog-entry-sep {
	border: 0;
	border-top: .2vmin solid #fff;
	opacity: .55;
	margin: 0
}

#settings-title {
	font-size: 3.6vmin;
	font-weight: 900
}

#settings-panel {
	text-align: center
}

#settings-scroll {
	text-align: left
}

#settings.ui-modal-open > div,
#settings > div {
	width: min(80vw,56vmin);
	max-height: 92vh;
	overflow: hidden
}

#settings-scroll {
	width: 100%;
	height: min(70vmin,60vh) !important
}

.setting-text {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 2vmin;
	font-weight: 700;
	white-space: nowrap
}

.slider {
	display: flex;
	flex-direction: column;
	margin: 2vmin
}

.setting-toggle-row {
	display: flex;
	align-items: center;
	gap: 1vmin;
	font-size: 2vmin;
	font-weight: 700;
	white-space: nowrap;
	user-select: none;
}

#settings-3dmode-toggle,
#settings-uncapped-toggle,
.settings-toggle {
	width: 2.1vmin;
	height: 2.1vmin;
	cursor: pointer;
}

.slide {
	width: 100% !important
}

.slide {
	-webkit-appearance: none;
	appearance: none;
	background: rgba(0,0,0,.75);
	border-radius: 4vmin !important;
	box-shadow: none !important;
	height: 3vmin !important;
	outline: none
}

	.slide::-webkit-slider-thumb {
		-webkit-appearance: none;
		appearance: none;
		background: #fff;
		border-radius: 50%;
		cursor: pointer;
		height: 2vmin;
		width: 2vmin
	}

	.slide::-moz-range-thumb {
		background: #fff;
		border-radius: 50%;
		cursor: pointer;
		height: 2vmin;
		width: 2vmin
	}

	.slide::-moz-range-track {
		height: 3vmin;
		border-radius: 4vmin;
		background: rgba(0,0,0,.75)
	}

#settings-hr-bottom {
	margin-bottom: 1.2vmin
}

#apply-settings, #cancel-settings {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: auto;
	padding-top: .7vmin;
	padding-bottom: .7vmin;
	padding-left: 1vmin;
	padding-right: 1vmin
}

#buttons {
	position: fixed;
	inset: 0;
	z-index: 3;
	pointer-events: none
}

#top-buttons {
	position: fixed;
	top: 0.5vmin;
	right: -4.5vmin;
	transform: translateX(-100%) scale(var(--ui-user-scale, 1));
	transform-origin: top right;
	display: flex;
	flex-direction: column;
	gap: .5vmin;
	pointer-events: none
}

#buttons button {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	outline: none;
	border-radius: .5vmin;
	box-shadow: 0 0 0 .4vmin #000;
	color: #fff;
	font-family: "Roboto",Arial,sans-serif;
	font-size: 2vmin;
	font-weight: 900;
	height: 5vmin;
	line-height: 1;
	cursor: pointer;
	pointer-events: auto
}

	#buttons button:hover {
		box-shadow: inset 0 0 0 10em hsla(0,0%,100%,.3),0 0 0 .4vmin #000
	}

#button-settings {
	background-color: #888;
	width: 5vmin;
	max-width: 5vmin;
	padding: 0 !important;
	text-align: center
}

#button-settings-img {
	width: 5vmin;
	max-width: 5vmin;
	height: 5vmin;
	display: block
}

.tooltip-trigger {
	position: relative
}

.tooltip {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: #000;
	color: #fff;
	border-radius: .5vmin;
	padding: .6vmin 1vmin;
	font-size: 2vmin;
	font-weight: 900;
	white-space: nowrap;
	opacity: 0;
	transition: opacity .1s,right .1s,left .1s;
	pointer-events: none
}

	.tooltip.left {
		right: 0
	}

.tooltip-trigger:hover .tooltip.left {
	opacity: 1;
	right: 7vmin
}

body.in-game #title,
body.in-game #subtitle,
body.in-game #changelog,
body.in-game #buttons,
body.in-game #full-changelog,
body.in-game #play-menu-wrapper,
body.in-game #connecting-text {
	display: none !important;
}

#disconnect-modal > div {
	width: min(60vw, 50vmin)
}

#disconnect-title {
	font-size: 3.6vmin;
	font-weight: 900
}

#disconnect-text {
	font-size: 2vmin;
	font-weight: 700;
	line-height: 1.2;
	margin: 1vmin
}

:root {
	--ui-scale: 1;
	--ui-user-scale: 1;
	--chat-right: 3vmin;
	--chat-top: 37vmin;
	--chat-gap: 1vmin;
	--chat-input-w: 45/1.8vmin;
	--chat-input-h: 6vmin;
	--chat-btn-sz: 7vmin;
	--chat-font: 2.8vmin;
	--chat-radius: 1.25vmin;
	--chat-outline: 0.6vmin;
}

#chat {
	position: fixed;
	right: var(--chat-right);
	top: var(--chat-top);
	display: none;
	gap: var(--chat-gap);
	align-items: center;
	opacity: 1;
	z-index: 4;
	transform-origin: top right;
	transform: scale(var(--ui-user-scale, 1));
}

body.in-game #chat {
	display: flex;
}

#chat input,
#chat button {
	background-color: #0f0f0fc0;
	border: none;
	border-radius: var(--chat-radius);
	box-shadow: 0 0 0 var(--chat-outline) #000;
	color: #fff;
	font-family: Roboto,Arial,sans-serif;
	font-size: var(--chat-font);
	padding: calc(7px * var(--ui-scale));
	text-align: left;
	user-select: none;
	-webkit-user-select: none;
	appearance: none;
	-webkit-appearance: none;
}

#chat input {
	width: var(--chat-input-w);
	height: var(--chat-input-h);
	pointer-events: auto;
}

#chat button {
	width: var(--chat-btn-sz);
	height: var(--chat-btn-sz);
	font-size: 0;
	padding: 0;
	cursor: pointer;
	pointer-events: auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

#quick-chat-img {
	width: 70%;
	height: 70%;
	display: block;
}

#chat input:focus,
#chat input:active,
#chat button:focus,
#chat button:active {
	outline: none;
	box-shadow: 0 0 0 var(--chat-outline) #000;
}
#respawn-level-text {
	display: none;
	position: absolute;
	left: 50%;
	top: calc(100% + 1.2vmin);
	transform: translateX(-50%);
	text-align: center;
	font-family: "Roboto",Arial,sans-serif;
	font-weight: 900;
	font-size: 2.2vmin;
	line-height: 1.1;
	letter-spacing: 0.05vmin;
	color: rgba(255, 255, 255, 0.9);
	-webkit-text-stroke: 0.22vmin rgba(0,0,0,0.95);
	paint-order: stroke fill;
	text-shadow:
		-.22vmin -.22vmin 0 rgba(0,0,0,0.95),
		0 -.22vmin 0 rgba(0,0,0,0.95),
		.22vmin -.22vmin 0 rgba(0,0,0,0.95),
		.22vmin 0 0 rgba(0,0,0,0.95),
		.22vmin .22vmin 0 rgba(0,0,0,0.95),
		0 .22vmin 0 rgba(0,0,0,0.95),
		-.22vmin .22vmin 0 rgba(0,0,0,0.95),
		-.22vmin 0 0 rgba(0,0,0,0.95);
	pointer-events: none;
	white-space: nowrap;
}

#play-menu-wrapper {
	position: fixed;
	left: 50%;
	top: 55vh;
	transform: translateY(-50%) translateX(-50%) scale(var(--ui-user-scale, 1));
	-ms-transform: translateY(-50%) translateX(-50%) scale(var(--ui-user-scale, 1));
	-webkit-transform: translateY(-50%) translateX(-50%) scale(var(--ui-user-scale, 1));
	opacity: 1;
	transition: opacity 2s,top 1s;
	z-index: 1;
	overflow: visible;
}