@font-face {
	font-family: 'Pixelar Regular';
	src: url('Pixelar Regular.otf');
}

:root {
	--transition-length: 0.2s;
}

html,
body {
	margin: 0;
	padding: 0;

	/* Font style */
	font-family: 'Pixelar Regular', 'Anonymous Pro', sans-serif;
	color: white;
	font-size: 25px;

	/* Prevent selection */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	/* Default Background */
	background: #110b2e;

	/* Remove Touch Highlight */
	-webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
}

a {
	color: white;
	/*text-decoration: underline;*/
	text-decoration: none;
}

a:hover {
	/*font-weight: bold;*/
}

.link {
	opacity: 0.8;
	cursor: pointer;
}

.link:hover {
	opacity: 1;
}

input[type='text'] {
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	appearance: none;
	outline: none;
	border: none;
}

input[type='text'] {
	box-sizing: border-box;
	display: block;
	margin: 8px 0;
	padding: 8px 16px;

	font-family: 'Pixelar Regular', sans-serif;
	font-size: 1em;

	color: white;
	background: rgba(0, 0, 0, 0.5);
}

input[type='text']::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

input[type='checkbox'] {
	margin-right: 10px;
}

select {
	display: block;
	width: 50%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
}

#ui {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;

	pointer-events: none;
}

/* Ads */
#moneyMakerSquare {
	position: absolute;
	left: calc((50% - 180px) / 2);
	top: 50%;
	padding: 10px;
	transform: translate(-50%, -50%);

	background: rgba(0, 0, 0, 0.1);
}

#moneyMakerSquare .adIndicator {
	margin-bottom: 3px;
	font-size: 15px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	text-align: center;
	opacity: 0.4;
}

#microgravity-io_300x250 {
	width: 300px;
	height: 250px;

	display: flex;
	justify-content: center;
	align-items: center;

	font-size: 25px;
	text-align: center;
}

/* Game canvas */
#gameCanvas {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;

	cursor: none;
}

#gameCanvas.showPointer {
	cursor: pointer;
}

/* Menu */
#mainMenu {
}

#menuContent {
	position: absolute;
	width: 500px;
	left: 50%;
	top: calc(50% - 60px);

	display: flex;
	flex-direction: column;
	align-items: center;

	transform: translate(-50%, -50%);
}

#consentPanel {
	position: absolute;
	left: 50%;
	bottom: 80px;
	width: 350px;
	transform: translateX(-50%);

	opacity: 0.5;
	text-align: center;
}

#kickWarning {
	position: absolute;
	left: 50%;
	bottom: 160px;
	width: 250px;
	padding: 10px;
	transform: translateX(-50%);

	color: yellow;
	font-weight: bolder;
	text-align: center;
}

#infoPanel {
	position: absolute;
	width: 320px;
	height: 350px;
	right: calc((50% - 190px) / 2);
	top: 50%;
	padding: 10px;
	transform: translate(50%, -50%);

	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;

	background: rgba(0, 0, 0, 0.1);
}

#infoPanel h3 {
	text-align: center;
}

#infoPanel h3:not(:first-child) {
	margin-top: 15px;
}

#info-titles {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	margin-bottom: 10px;
}

#infoPanel #info-titles h3 {
	margin: 0;
	opacity: 0.55;
	transition: opacity var(--transition-length);
	cursor: pointer;
}

#infoPanel #info-titles h3:not(:last-child) {
	margin-right: 22px;
}

#infoPanel #info-titles h3.selected {
	opacity: 1;
	border-bottom: 2px solid white;
}

#friends {
	display: flex;
	flex-direction: column;
}

#noFriendsOnline {
	text-align: center;
	color: white;
	opacity: 0.65;
}

.friendItem {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

.friendItem .friendUsername {
	font-size: 22px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.friendItem .friendUsername:hover {
	text-decoration: underline;
}

.friendItem .friendActions {
	display: flex;
	flex-direction: row;
	align-items: center;

	font-size: 24px;
}

.friendItem .friendActions .action {
	color: white;
	padding: 4px;
	background: none;
}

.friendItem .friendActions .action:not(:last-child) {
	margin-right: 11px;
}

#account {
}

#viewAccountButton,
#linkAccountButton {
	display: inline-block;
	font-size: 20px;
	margin: 0 0 10px 0;
	padding: 11px 18px;

	font-weight: bold;
	font-size: 14px;
	font-family: 'Arial';

	background: #3fc7d3;
	color: white;
	border-radius: 23px;
	border: none;
	outline: none;
}

#linkAccountButton {
	margin: 10px 0 0 0;
}

#gameLogo {
	margin-bottom: -200px;
	pointer-events: none;
}

#joinInfo {
	position: relative;
	/* width: 250px; */
	height: 46px;
	margin-bottom: 15px;
}

#usernameField {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: 100%; /* This is to make the textbox size correctly */

	margin: 0;
	padding-right: calc(60px + 16px);

	color: #fff9ec;
	background: #0e161a;
	border-radius: 23px;

	box-shadow: #283b52 0 0 50px 5px;
}

#joinButton {
	/* position: absolute; */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 65px;
	bottom: 0;
	top: 0;
	right: 0;

	font-size: 20px;
	line-height: 31px;

	background: #3fc7d3;
	color: white;
	border-radius: 23px;
}

#respawnTip {
	width: 250px;
	margin-top: 30px;
	font-weight: bold;
	font-size: 27px;
	text-align: center;
}

.separator {
	display: inline-block;
	width: 1px;
	height: 0.5em;
	vertical-align: middle;

	background: white;
}

#extraLinks {
	position: absolute;
	bottom: 28px;
	right: 30px;

	font-size: 30px;
}

#extraLinks .separator {
	margin: 0 5px;
}

#youTubers {
	position: absolute;
	top: 20px;
	left: 20px;

	font-size: 25px;
}

/*#youTubers a:hover {*/
/**/
/*}*/

#youTubers .socialIcon {
	margin-left: 0;
}

/* Loading Screen */
#loadingScreen {
}

/* Disconnect Screen */
#disconnectScreen {
}

#disconnectScreen .button {
	margin-top: 20px;
}

/* Game Overlay */
#gameOverlay {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;

	cursor: none;
	pointer-events: none;
}

.controlTip {
	width: 425px;
	height: 175px;

	background-image: url(/img/controls.svg);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;

	flex-grow: 0;
	flex-shrink: 0;
}

#gameControlTip {
	position: absolute;
	bottom: 80px;
	left: 50%;
	transform: translateX(-50%);

	background-color: rgba(0, 0, 0, 0.5);
}

#buttonHolder {
	margin-top: 10px;
	font-size: 20px;
	pointer-events: all;
}

#buttonHolder > *:not(:first-child) {
	margin-top: 5px;
}

.horizontalButtons {
	display: flex;
	flex-direction: row;
}

.horizontalButtons > * {
	flex-basis: 50%;
}

.horizontalButtons > *:not(:first-child) {
	margin-left: 5px;
}

#joinRequestHolder {
	padding-top: 10px;
	text-align: center;
}

/* Weapon List */
#weaponDisplay {
	--item-width: 80px;
	--item-width-shrunk: 40px;

	position: absolute;
	left: 50%;
	top: 20px;
	transform: translateX(calc(var(--item-width) / 2 * -1))
		translateX(calc(var(--weapon-index) * var(--item-width-shrunk) * -1));

	display: flex;
	flex-direction: row;

	transition: transform var(--transition-length);
}

.weaponItem {
	width: var(--item-width);
	height: 60px;

	transition: width var(--transition-length);
}

.weaponIcon {
	width: 100%;
	height: 50px;

	background-repeat: no-repeat;
	background-size: 35px;
	background-position: center;

	transition: background-size var(--transition-length);
}

.weaponItem .ammoCount {
	width: 100%;
	text-align: center;
	font-size: 18px;

	transition: opacity var(--transition-length);
}

.weaponItem:not(.selected) {
	width: var(--item-width-shrunk);
	opacity: 0.5;
}

.weaponItem:not(.selected) .weaponIcon {
	background-size: 25px;
}

.weaponItem:not(.selected) .ammoCount {
	opacity: 0;
}

/* Sidebar */
#rightSidebar {
	position: absolute;
	right: 20px;
	top: 20px;
	width: 220px;
}

/* Weapon Switcher */
#weaponSwitcher {
	position: absolute;
	right: 20px;
	bottom: 175px;

	display: flex;
	flex-direction: row;
}

#weaponSwitcher > .button {
	width: 40px;
	height: 40px;
	padding-top: 7px;
}

#weaponSwitcher > .button:first-child {
	margin-right: 10px;
}

/* Speech Recording */
#speechRecordingIndicator {
	position: absolute;
	left: calc(140px - 12px);
	top: calc(140px - 12px);
	width: 12px;
	height: 12px;
	border-radius: 50%;

	background: red;
	animation: flash 2s infinite;
}

.matIcon {
	font-family: 'Material Icons';
	font-display: block;
	vertical-align: middle;
}

/* Leaderboard */
#leaderboard {
	box-sizing: border-box;
	width: 100%;
	padding: 5px 10px;
	cursor: default;
	pointer-events: all;

	background: rgba(0, 0, 0, 0.5);
}

.leaderboardItem {
	height: 25px;

	display: flex;
	flex-direction: row;
	align-items: center;

	opacity: 0.6;
	font-size: 16px;
}

#leaderboard:hover .leaderboardItem .leaderboardFriendAction {
	display: flex;
}

#leaderboard:hover .leaderboardItem:not(.isMine) .leaderboardScore {
	display: none;
}

#leaderboard .leaderboardUsername:hover {
	text-decoration: underline;
}

.leaderboardItem.isMine {
	opacity: 1;
}

.leaderboardItem.isFriend {
	opacity: 0.8;
	color: #bbff99;
}
.leaderboardItem.isFriend a.leaderboardUsername {
	color: #bbff99;
}

.leaderboardItem .leaderboardRank {
	width: 20px;
}

.leaderboardItem .leaderboardUsername {
	flex-grow: 1;
	text-decoration: none;
}

.leaderboardItem .leaderboardAlliance {
	margin-right: 5px;
	font-weight: bold;
}

.leaderboardItem .leaderboardScore {
	flex-grow: 1;
	text-align: right;
}

.leaderboardItem .leaderboardFriendAction {
	display: none;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	flex-grow: 1;
	text-align: right;
	font-size: 14px;
	padding: 2px 0 2px 2px;
	color: white;
	background: none;
}

.leaderboardItem .leaderboardFriendAction .matIcon {
	margin-left: 4px;
	font-size: 18px;
}

/* Command Pallet */
#commandPanel {
	box-sizing: border-box;
	position: absolute;
	left: 20px;
	bottom: 20px;
	width: 200px;
	padding: 10px;

	text-align: center;
	background: rgba(0, 0, 0, 0.5);

	cursor: default;
}

.panelDetails {
	margin-bottom: 10px;

	display: flex;
	flex-direction: column;
	justify-content: center;

	font-size: 20px;
}

.panelDetails > *:not(:first-child) {
	margin-top: 5px;
}

.warning {
	color: #ff5354;
}

.flash {
	animation: flash linear 2s infinite;
}

@keyframes flash {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0.2;
	}

	100% {
		opacity: 1;
	}
}

/* Build Pallet */
#buildPallet {
	box-sizing: border-box;
	position: absolute;
	left: 240px;
	right: 240px;
	bottom: 20px;
}

.itemList {
	width: 100%;

	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap-reverse; /* Wrap by filling the bottom first */
}

.buildPalletItem {
	width: 40px;
	height: 40px;
	padding: 10px;
	margin: 5px;

	display: flex;
	justify-content: center;
	align-items: center;

	background: rgba(0, 0, 0, 0.5);

	pointer-events: all;
	cursor: pointer;
}

.buildPalletItem.planetItem {
	width: 80px;
}

.buildPalletItem .buildPalletItemIcon {
	width: 100%;
	height: 100%;
	opacity: 0.5;

	background-repeat: no-repeat;
	background-size: contain;
}

.buildPalletItem:hover .buildPalletItemIcon {
	opacity: 1;
}

.buildPalletItem.planetItem .buildPalletItemIcon {
	/* Show only the top half since the bottom half is in the ground */
	background-size: auto 200%;
	background-position: top;
}

/* Tooltip */
.tooltip {
	max-width: 300px;
	margin: 10px auto;
	padding: 10px;

	font-size: 20px;
	text-align: center;
	background: rgba(0, 0, 0, 0.5);
}

.tooltipTitle {
	font-weight: bold;
}

.tooltipSubtitle {
}

.tooltipDetails {
	font-style: italic;
}

/* Upgrade Items */
#upgradeItems {
	text-align: center;
}

#upgradeItemsTitle {
	font-weight: bold;
}

/* Rank */
#rankInfo {
	width: 300px;
	margin: 10px auto;

	display: flex;
	flex-direction: row;
	align-items: center;
}

#rankBar {
	height: 10px;
	padding: 5px;
	margin: 0 10px;

	flex-grow: 1;
	background: rgba(0, 0, 0, 0.5);
}

#rankBarInner {
	width: 0;
	min-width: 5px;
	height: 100%;
	background: white;

	transition: width var(--transition-length);
}

.rankNumber {
	flex-grow: 0;
	width: 30px;
}

/* Alliances */
.modal {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	background: rgba(0, 0, 0, 0.5);

	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	pointer-events: all;
}

#alliances {
}

#allianceList {
	width: 500px;

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}

.allianceItem {
	width: 180px;
	margin: 5px;

	display: flex;
	flex-direction: row;

	font-size: 20px;
}

.allianceItem .allianceName {
	flex-grow: 1;

	display: flex;
	align-items: center;
}

.allianceItem .allianceJoin {
	width: 80px;
}

#createAllianceContainer {
	display: flex;
	flex-direction: row;
}

#allianceNameInput {
	width: 100px;
	margin: 0;
	margin-right: 10px;

	text-transform: uppercase;
}

#leaveAllianceButton {
	margin-top: 20px;
}

.dismissButton {
	font-size: 20px;
	margin-top: 20px;
}

/* Help */
#helpOverlay {
	display: block; /* Override, since we want content to scroll */
}

#helpOverlayBox {
	/* Box that allows the flex box to scroll */
	min-height: min-content;
	margin: 50px 0;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#helpOverlayBox > div:not(.dismissButton) {
	width: 400px;
}

/* Tile Hoder */
.tileHolder {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

/* Tile */
.tile {
	display: block;
	width: 120px;
	margin: 8px;
	opacity: 0.75;
	cursor: pointer;

	text-align: center;
}

.tile:hover {
	opacity: 1;
}

.tile .tileIcon {
	width: 100%;
	height: 32px;

	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

.tile .tileTitle {
	margin-top: 8px;
	font-size: 20px;
	font-weight: bold;
}

.tile .tileSubtitle {
	font-size: 15px;
}

/* Chat Box */
#chatBox {
	position: absolute;
	left: 50%;
	bottom: 25%;
	width: 200px;
	transform: translate(-50%, -50%);
	margin: 0;

	font-size: 20px;
	pointer-events: all;
}

/* Resource Icon */
.resources > .resourceIcon:first-child {
	/* Don't pad the left side of the first icon */
	margin-left: 0;
}

.resourceIcon {
	display: inline-block;
	width: 0.6em;
	height: 0.6em;
	margin: 0 0.4em;
	vertical-align: middle;

	background-size: contain;
	background-repeat: no-repeat;
}

.resourceIcon.oil {
	background-image: url(/img/icons/oil.svg);
}

.resourceIcon.aluminium {
	background-image: url(/img/icons/aluminium.svg);
}

.resourceIcon.uranium {
	background-image: url(/img/icons/uranium.svg);
}

/* Ship Preview */
.shipPreview {
	box-sizing: border-box;

	position: relative;
	width: 48px;
	height: 48px;
	margin: 0 5px;

	cursor: pointer;

	border: transparent 3px solid;
	border-radius: 50%;

	transition: background-color 0.2s ease-in-out;
}

.shipPreview.locked {
	cursor: default;
}

.shipPreview.locked .shipPreviewMask,
.shipPreview.locked .shipPreviewOverlay {
	opacity: 0.25;
}

.shipPreview:hover:not(.locked) {
	background-color: rgba(38, 58, 79, 0.25);
}

.shipPreview.selected:not(.locked) {
	background-color: rgba(38, 58, 79, 0.4);
	border-color: #263a4f;
}

.shipPreview .lockedIcon {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
}

.shipPreviewMask,
.shipPreviewOverlay {
	position: absolute;
	left: 5px;
	right: 5px;
	top: 5px;
	bottom: 5px;

	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;

	-webkit-mask-image: var(--ship-img);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	-webkit-mask-position: center;
	mask-image: var(--ship-img);
	mask-repeat: no-repeat;
	mask-size: contain;
	mask-position: center;
}

.shipColor {
	position: relative;
	height: 20px;
	margin: 0 1px;
	flex-grow: 1;

	border-radius: 2px;
	cursor: pointer;

	transition: width 0.2s ease-in-out, flex-grow 0.2s ease-in-out, margin 0.2s ease-in-out,
		box-shadow 0.2s ease-in-out;
}

.shipColor.selected {
	flex-grow: 2;
	box-shadow: #263a4f 0 0 0 2px;
	margin: 0 3px;
}

.shipColor::after {
	content: '';

	position: absolute;
	height: 8px;
	left: 2px;
	right: 2px;
	bottom: 2px;

	border-radius: 1px;
	background: rgba(0, 0, 0, 0.2);
}

/* Social Icon */
.socialIcon {
	display: inline-block;
	width: 0.6em;
	height: 0.6em;
	margin: 0 0.4em;
	vertical-align: middle;

	background-size: contain;
	background-repeat: no-repeat;
}

.socialIcon.large {
	width: 0.8em;
	height: 0.8em;
}

.socialIcon.full {
	width: 1em;
	height: 1em;
}

.socialIcon.discord {
	background-image: url(/img/social/discord.svg);
}
.socialIcon.instagram {
	background-image: url(/img/social/instagram.svg);
}
.socialIcon.reddit {
	background-image: url(/img/social/reddit.svg);
}
.socialIcon.twitch {
	background-image: url(/img/social/twitch.svg);
}
.socialIcon.twitter {
	background-image: url(/img/social/twitter.svg);
}
.socialIcon.youtube {
	background-image: url(/img/social/youtube.svg);
}
.socialIcon.adblock {
	background-image: url(/img/social/adblock.svg);
}

/* Social Content */
#socialContent {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.socialContentItem {
	position: relative;
	width: 60px;
	text-align: center;
	cursor: pointer;
}

.socialContentItem .socialRewardTip {
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translateX(-50%);

	white-space: nowrap;
	display: none;

	background: rgba(0, 0, 0, 0.5);
	padding: 5px 10px;
}

.socialContentItem:hover .socialRewardTip {
	display: block;
}

.socialContentItem:not(.hasReward) > .socialIcon {
	animation: pulse 1s ease-in-out 0s infinite alternate both running;
}

@keyframes pulse {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(1.25);
	}
}

/* Button */
.button {
	box-sizing: border-box;
	padding: 8px;

	color: black;
	background: white;
	text-align: center;

	cursor: pointer;
	pointer-events: all;
}

.button > * {
	/* Recolor the images to black */
	/*filter: brightness(0);*/
}

.button.disabled {
	opacity: 0.5;
	pointer-events: none;
}

.button.compact {
	padding: 4px;
}

.button:hover {
	transform: scale(1.05);
}

.button:active {
	transform: scale(0.95);
	opacity: 0.8;
}

/* Notificaitions */
#notificationOverlay {
	position: absolute;
	display: flex;
	flex-direction: column;
	width: 300px;
	left: 15px;
	top: 15px;

	cursor: none;
	pointer-events: none;
}

.inGame #notificationOverlay {
	left: 15px;
	top: 155px;
}

#partyOverlay {
	box-sizing: border-box;
	position: absolute;
	left: 10px;
	top: 10px;
	width: 220px;
	padding: 10px;

	display: flex;
	flex-direction: column;

	background: rgba(0, 0, 0, 0.5);
}

.inGame #partyOverlay {
	left: 160px;
}

#partyMembers {
	margin-bottom: 10px;

	display: flex;
	flex-direction: column;
}

.partyMember {
	display: flex;
	flex-direction: row;
	align-items: center;

	height: 25px;
}

.partyMemberName {
	flex: 1;
	pointer-events: all;
	font-size: 16px;
}

.partyMember .button {
	font-size: 12px;
}

.partyMember .button:not(:first-child) {
	margin-left: 5px;
}

.partyMemberName:hover {
	text-decoration: underline;
}

#partyActions {
	display: flex;
	flex-direction: row;
	justify-content: center;

	font-size: 20px;
}

#partyActions .button {
	flex: 1;
}

#partyActions .button:not(:first-child) {
	margin-left: 5px;
}

.notificationItem {
	display: flex;
	flex-direction: column;
	font-family: 'Arial';
	opacity: 0.6;
	box-sizing: border-box;
	padding: 8px 12px;
	max-height: 200px;
	cursor: pointer;
	border-radius: 8px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);

	animation: expandNotification 300ms forwards;
	pointer-events: all;

	transition: opacity var(--transition-length), background-color var(--transition-length);
	background-color: rgba(15, 15, 15, 0.6);
}

.notificationItem.isFading {
	opacity: 0;
}

.notificationItem:hover {
	opacity: 1;
	background-color: rgba(15, 15, 15, 0.8);
}

.notificationItem .notificationHeader {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 5px;
}

.notificationItem .notificationTitle {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.notificationItem .notificationTitle img {
	width: 22px;
	height: 22px;
	border-radius: 4px;
	margin: 1px 5px 0 0;
}

.notificationItem .notificationTitle h2 {
	font-size: 14px;
	overflow-wrap: break-word;
	margin: 0;
}

.notificationItem .notificationClose {
	padding: 0;
	font-size: 22px;
	color: white;
	background: none;
}

.notificationItem .notificationSubtitle {
	margin: 0 0 2px 0;
	color: #ffffffc0;

	overflow-wrap: break-word;
	overflow: hidden;
	text-overflow: ellipsis;

	user-select: none;
	font-size: 14px;
}

@keyframes expandNotification {
	0% {
		max-height: 0;
	}
	100% {
		max-height: 210px;
	}
}

#hCaptcha {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	display: none;
	align-items: center;
	justify-content: center;

	background-color: rgba(0, 0, 0, 0.25);
}

.buttonList {
	display: flex;
	flex-direction: row;
	justify-content: center;

	font-size: 16px;
}

.buttonList .button:not(:last-child) {
	margin-right: 10px;
}

/* Media Queries */
@media (max-width: 950px) {
	:root {
		--info-width: 250px;
		--main-content-center: calc((100% - var(--info-width)) / 2 + var(--info-width));
		--main-content-center: calc(
			(100% - var(--info-width) - env(safe-area-inset-right)) / 2 + var(--info-width)
		); /* Notch */
		--main-content-width: calc(100% - var(--info-width));
		--main-content-width: calc(100% - var(--info-width) - env(safe-area-inset-right)); /* Notch */
	}

	/* TODO: Replace all 50% things */

	/* Menu */
	#moneyMakerSquare {
		opacity: 0.0001;
		pointer-events: none;
	}

	#youTubers {
		display: none;
	}

	#logoTwitterSeparator {
		display: none;
	}

	#extraLinks {
		right: initial;
		bottom: 10px;
		bottom: calc(10px + env(safe-area-inset-bottom)); /* Notch */
		left: var(--main-content-center);
		width: var(--main-content-width);

		transform: translateX(-50%);
		text-align: center;
	}

	#menuContent {
		position: absolute;
		left: var(--main-content-center);
	}

	#respawnTip {
		margin-top: 10px;
		font-size: 20px;
	}

	#moreGamesButton,
	#redditButton {
		display: none;
	}

	#extraLinks > #moreGamesButton + .separator {
		display: none;
	}

	#infoPanel {
		top: 0;
		left: 0;
		bottom: 0;
		width: var(--info-width);
		height: initial;
		transform: initial;
		margin-left: env(safe-area-inset-left); /* Notch */
		margin-bottom: env(safe-area-inset-bottom); /* Notch */
		margin-top: env(safe-area-inset-top); /* Notch */
	}

	#infoPanel #info-titles h3:not(:last-child) {
		margin-right: 12px;
	}

	/* Game */
	#commandPanel {
		left: 0;
		bottom: 0;
		left: env(safe-area-inset-left); /* Notch */
		bottom: env(safe-area-inset-bottom); /* Notch */
		width: 135px;

		/* Make the panel scrollable on overflow */
		max-height: calc(100% - 90px);
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		pointer-events: all;
	}

	#commandPanel h3 {
		font-size: 20px;
	}

	.panelDetails {
		font-size: 15px;
		margin-bottom: 5px;
	}

	#buildPallet {
		left: 140px;
		right: 140px;
		bottom: 10px;
		bottom: calc(10px + env(safe-area-inset-bottom)); /* Notch */
		margin-bottom: -2px; /* Fix for odd extra padding at bottom of build pallet */
	}

	.buildPalletItem {
		width: 30px;
		height: 30px;
		padding: 5px;
		margin: 2px;
	}

	.buildPalletItem.planetItem {
		width: 60px;
	}

	.itemList {
		flex-wrap: nowrap; /* Shrink items and don't wrap them */
	}

	#rankInfo {
		width: 175px;
		margin: 5px auto;
	}

	#rankBar {
		height: 5px;
		padding: 3px;
		margin: 0 5px;
	}

	.rankNumber {
		flex-grow: 0;
		width: 30px;
		font-size: 15px;
	}

	#rightSidebar {
		position: absolute;
		right: 10px;
		top: 10px;
		right: calc(10px + env(safe-area-inset-right)); /* Notch */
		top: calc(10px + env(safe-area-inset-top)); /* Notch */
		width: 180px;
	}

	.leaderboardItem {
		height: 20px;
		font-size: 13px;
	}

	.leaderboardItem .leaderboardRank {
		width: 15px;
	}

	#weaponSwitcher {
		right: calc(135px / 2);
		right: calc(135px / 2 + env(safe-area-inset-right));
		bottom: 105px;
		bottom: calc(105px + env(safe-area-inset-bottom));
		transform: translateX(50%);
	}

	#notificationOverlay {
		left: unset;
		right: 15px;
		top: 15px;
	}
}