* {
	box-sizing: border-box;
}

@supports not selector(::-webkit-scrollbar) {
	* {
		scrollbar-color: #6f5d40 #0f0d0a;
		scrollbar-width: auto;
	}
}

*::-webkit-scrollbar {
	width: 16px;
	height: 16px;
	border-radius: 0;
}

*::-webkit-scrollbar-track {
	background: #0f0d0a;
	border: 3px solid #211914;
	border-radius: 0;
}

::-webkit-scrollbar-thumb {
	-webkit-border-radius: 0 !important;
	background: #5f4a32;
	border: 3px solid #0f0d0a;
	border-radius: 0 !important;
	background-clip: border-box;
	box-shadow:
		inset 2px 2px 0 #8b724d,
		inset -2px -2px 0 #211914;
}

::-webkit-scrollbar-thumb:hover {
	background: #806640;
	box-shadow:
		inset 2px 2px 0 #b79a5f,
		inset -2px -2px 0 #302116;
}

::-webkit-scrollbar-thumb:active {
	background: #e9bd59;
	box-shadow:
		inset 2px 2px 0 #ffe0a0,
		inset -2px -2px 0 #5f4a32;
}

*::-webkit-scrollbar-corner {
	background: #0f0d0a;
	border-radius: 0;
}

*::-webkit-scrollbar-button,
*::-webkit-scrollbar-track-piece {
	border-radius: 0;
}

:root {
	--ui-text-scale: 1;
	--ui-text-xs: calc(19px * var(--ui-text-scale));
	--ui-text-sm: calc(21px * var(--ui-text-scale));
	--ui-text-md: calc(25px * var(--ui-text-scale));
	--ui-text-lg: calc(28px * var(--ui-text-scale));
	--ui-text-xl: calc(35px * var(--ui-text-scale));
	--ui-icon-size: calc(35px * var(--ui-text-scale));
}

@font-face {
	font-family: "Red Alert INET";
	src: url("/fonts/red-alert-inet.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

html,
body {
	margin: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #171717;
	color: #f4efe6;
	font-family: "Red Alert INET", ui-sans-serif, system-ui, sans-serif;
	font-size: var(--ui-text-md);
	user-select: none;
	-webkit-user-select: none;
}

button,
input,
select,
textarea {
	font: inherit;
}

button {
	border: 1px solid #645b4f;
	background: #2e3f34;
	color: #f4efe6;
	min-height: 36px;
	padding: 18px;
	cursor: pointer;
}

button:hover {
	background: #3d5d46;
}

button:disabled {
	color: #8f897f;
	cursor: default;
	background: #282823;
}

.hidden {
	display: none !important;
}


.update-boxes {
	position: absolute;
	right: 16px;
	bottom: 16px;
	display: grid;
	gap: 8px;
	width: min(220px, calc(100vw - 32px));
}

.update-box {
	display: grid;
	gap: 3px;
	padding: 8px 10px;
	border: 1px solid rgb(244 239 230 / 0.22);
	background: rgb(24 27 23 / 0.84);
	color: #cfc7b7;
	font-size: var(--ui-text-sm);
}

.update-box strong {
	color: #f4efe6;
	font-size: var(--ui-text-md);
}

.game {
	position: relative;
	width: 100vw;
	height: 100vh;
}

#world {
	display: block;
	width: 100vw;
	height: 100vh;
	background: #315f3c;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	touch-action: none;
}

.icon-button {
	width: 28px;
	height: 28px;
	min-height: 0;
	padding: 0;
	display: grid;
	place-items: center;
	border: 3px solid #5f4a32;
	border-bottom-color: #211914;
	border-right-color: #211914;
	background: rgb(10 10 14 / 0.94);
	box-shadow:
		0 0 0 2px #080808,
		4px 4px 0 rgb(0 0 0 / 0.62);
}

.icon-button:hover,
.settings-option:hover {
	background: #242019;
}

.panel-close-button {
	min-width: 42px;
	padding: 7px 10px;
	border: 4px solid #6f5d40;
	border-right-color: #211914;
	border-bottom-color: #211914;
	background: #191713;
	box-shadow: 4px 4px 0 rgb(0 0 0 / 0.58);
	color: #e9bd59;
	font: inherit;
	line-height: 1;
	cursor: pointer;
}

.panel-close-button:hover,
.panel-close-button:focus-visible {
	background: #242019;
	color: #ffe0a0;
	outline: none;
	transform: translate(-2px, -2px);
}

.banner-image-icon {
	width: var(--ui-icon-size);
	height: var(--ui-icon-size);
	object-fit: contain;
	image-rendering: pixelated;
	pointer-events: none;
}

.top-right li {
	margin: 5px 0;
	display: flex;
	align-items: baseline;
	gap: 6px;
	font-size: 16px;
}

.top-right li em {
	color: #cfc7b7;
	font-style: normal;
}

.leader-time {
	position: relative;
	outline: none;
}

.leader-time-popup {
	position: absolute;
	right: 0;
	bottom: calc(100% + 8px);
	z-index: 5;
	pointer-events: none;
	white-space: nowrap;
	padding: 5px 7px;
	border: 1px solid rgb(233 189 89 / 0.45);
	background: rgb(17 24 19 / 0.96);
	color: #f4efe6;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 160ms ease, transform 160ms ease;
}

.leader-time-popup::after {
	content: "";
	position: absolute;
	right: 10px;
	top: 100%;
	border: 5px solid transparent;
	border-top-color: rgb(233 189 89 / 0.45);
}

.leader-rank {
	color: #e9bd59;
	font-weight: 800;
	letter-spacing: 0;
}

.leader-rank.rank-2 {
	color: #c8ced6;
}

.leader-rank.rank-3 {
	color: #c5864c;
}

.leader-rank.rank-other {
	color: #f4efe6;
}