html,
body {
	background-color: #000;
	overflow: hidden;
	cursor: url(../img/cursors/default.png), auto;
	position: relative; /* Fixes scrolling on Android */
	overflow: hidden; /* Same */
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

:root {
	--text-outline-color: #525252;
	--text-outline-width: .125rem;
	--text-shadow: calc(var(--text-outline-width) * 1) calc(var(--text-outline-width) * 0) 0 var(--text-outline-color), calc(var(--text-outline-width) * .8662109375) calc(var(--text-outline-width) * .5) 0 var(--text-outline-color), calc(var(--text-outline-width) * .5) calc(var(--text-outline-width) * .8662109375) 0 var(--text-outline-color), calc(var(--text-outline-width) * 0) calc(var(--text-outline-width) * 1) 0 var(--text-outline-color), calc(var(--text-outline-width) * -.5) calc(var(--text-outline-width) * .8662109375) 0 var(--text-outline-color), calc(var(--text-outline-width) * -.8662109375) calc(var(--text-outline-width) * .5) 0 var(--text-outline-color), calc(var(--text-outline-width) * -1) calc(var(--text-outline-width) * 0) 0 var(--text-outline-color), calc(var(--text-outline-width) * -.8662109375) calc(var(--text-outline-width) * -.5) 0 var(--text-outline-color), calc(var(--text-outline-width) * -.5) calc(var(--text-outline-width) * -.8662109375) 0 var(--text-outline-color), calc(var(--text-outline-width) * 0) calc(var(--text-outline-width) * -1) 0 var(--text-outline-color), calc(var(--text-outline-width) * .5) calc(var(--text-outline-width) * -.8662109375) 0 var(--text-outline-color), calc(var(--text-outline-width) * .8662109375) calc(var(--text-outline-width) * -.5) 0 var(--text-outline-color), calc(var(--text-outline-width) * 1) calc(var(--text-outline-width) * 0) 0 var(--text-outline-color), calc(var(--text-outline-width) * .8662109375) calc(var(--text-outline-width) * .5) 0 var(--text-outline-color), calc(var(--text-outline-width) * .5) calc(var(--text-outline-width) * .8662109375) 0 var(--text-outline-color), calc(var(--text-outline-width) * 0) calc(var(--text-outline-width) * 1) 0 var(--text-outline-color);
	--glass-frames-blur: 0px;
	--text-stroke: .18em;
    --text-stroke-color: #525252;
    --ts-a: calc(var(--text-stroke) / 4);
    --ts-b: calc(var(--text-stroke) / 2);
    --ts-na: calc(var(--text-stroke) / -4);
    --ts-nb: calc(var(--text-stroke) / -2);
    --ts-c: var(--text-stroke-color);
    --ts-b9: calc(var(--ts-b) * .9239);
    --ts-b7: calc(var(--ts-b) * .7071);
    --ts-b4: calc(var(--ts-b) * .3827);
    --ts-nb9: calc(var(--ts-b) * -.9239);
    --ts-nb7: calc(var(--ts-b) * -.7071);
    --ts-nb4: calc(var(--ts-b) * -.3827);
    --ts-a7: calc(var(--ts-a) * .7071);
    --ts-na7: calc(var(--ts-a) * -.7071);

	--text-outline: var(--ts-b) 0 0 var(--ts-c), var(--ts-b9) var(--ts-b4) 0 var(--ts-c), var(--ts-b7) var(--ts-b7) 0 var(--ts-c), var(--ts-b4) var(--ts-b9) 0 var(--ts-c), 0 var(--ts-b) 0 var(--ts-c), var(--ts-nb4) var(--ts-b9) 0 var(--ts-c), var(--ts-nb7) var(--ts-b7) 0 var(--ts-c), var(--ts-nb9) var(--ts-b4) 0 var(--ts-c), var(--ts-nb) 0 0 var(--ts-c), var(--ts-nb9) var(--ts-nb4) 0 var(--ts-c), var(--ts-nb7) var(--ts-nb7) 0 var(--ts-c), var(--ts-nb4) var(--ts-nb9) 0 var(--ts-c), 0 var(--ts-nb) 0 var(--ts-c), var(--ts-b4) var(--ts-nb9) 0 var(--ts-c), var(--ts-b7) var(--ts-nb7) 0 var(--ts-c), var(--ts-b9) var(--ts-nb4) 0 var(--ts-c), var(--ts-a) 0 0 var(--ts-c), var(--ts-a7) var(--ts-a7) 0 var(--ts-c), 0 var(--ts-a) 0 var(--ts-c), var(--ts-na7) var(--ts-a7) 0 var(--ts-c), var(--ts-na) 0 0 var(--ts-c), var(--ts-na7) var(--ts-na7) 0 var(--ts-c), 0 var(--ts-na) 0 var(--ts-c), var(--ts-a7) var(--ts-na7) 0 var(--ts-c);
}

.nodisplay {
	display: none;
	visibility: hidden;
}

::-webkit-input-placeholder {
	color: #cecece;
}

:-moz-placeholder {
	color: #cecece;
	opacity: 1;
}

::-moz-placeholder {
	color: #cecece;
	opacity: 1;
}

:-ms-input-placeholder {
	color: #cecece;
}

input[type=text] {
	-webkit-touch-callout: text;
	-webkit-user-select: text;
	-khtml-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
}

::placeholder {
	color: #cecece;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
  cursor: url(../img/cursors/default.png), auto;
}

/* Track */
::-webkit-scrollbar-track {
  background: none;
  cursor: url(../img/cursors/default.png), auto;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background-color: #939393;
  border-radius: 5px;
  cursor: url(../img/cursors/default.png), auto;
}

/* ANIMATIONS */

@keyframes pulser {
	0% {
	    transform: none;
	}

	33% {
    	transform: none;
	}

	66% {
    	transform: none;
	}

	100% {
	    transform: scale(1.04);
	}
}

@keyframes red-overlay {
	0% {
	    background-color: #939393;
	}

	40% {
	    background-color: #939393;
	}

	100% {
	    background-color: #d75c5c;
	}
}

@keyframes join-discord-text-animation {
    0% {
        transform: rotate(8deg) scale(1) translateX(-97%) translateY(48%);
    }

    to {
        transform: rotate(10deg) scale(1.1) translateX(-88%) translateY(52%);
    }
}

@keyframes squishy-animation {
    0% {
        transform: scaleX(1.05) scaleY(0.95) translateY(2.5%);
    }

    100% {
    }
}

@keyframes disconnected-animation {
	0% {
		transform: scaleX(1.05) scaleY(1.05);
		background-color: #d75c5c;
	}

	50% {
		transform: scaleX(1.1) scaleY(1.1);
		background-color: #d75c5c;
	}

	to {
	/* transform: scaleX(1.1) scaleY(1.1); */
	/* background-color: #d75c5c; */
	}
}

@keyframes itemimg {
	0% {
		transform:scale(0.99,1.01)
	}
	50% {
		transform:scale(1.1,0.9)
	}
	100% {
		transform:scale(0.99,1.01)
	}
}

@keyframes leaderplayericonidle {
	0% {
		transform:scale(1.01,1.01) translateY(-50%)
	}
	50% {
		transform:scale(1.05,0.95) translateY(-50%)
	}
	100% {
		transform:scale(1.01,1.01) translateY(-50%)
	}
}

@keyframes open-back {
	0% {
		transform:scale(0);
	}
	30% {
		transform:scale(0.8, 1.1);
	}
	50% {
		transform:scale(1, 1.2);
	}
	100% {
		transform:scale(1);
	}
}

@keyframes open-back-middle {
	0% {
		transform:scale(0)translateY(-50%);
	}
	30% {
		transform:scale(0.8, 1.1)translateY(-50%);
	}
	50% {
		transform:scale(1, 1.2)translateY(-50%);
	}
	100% {
		transform:scale(1)translateY(-50%);
	}
}

@keyframes open-admin-panel {
	0% {
		transform: translate(-50%, -50%) scale(0);
	}
	30% {
		transform: translate(-50%, -50%) scale(0.8, 1.1);
	}
	50% {
		transform: translate(-50%, -50%) scale(1, 1.1);
	}
	100% {
		transform: translate(-50%, -50%) scale(1);
	}
}

@keyframes open-back-side {
	0% {
		transform:scale(0)translateX(-50%);
	}
	30% {
		transform:scale(0.8, 1.1)translateX(-50%);
	}
	50% {
		transform:scale(1, 1.2)translateX(-50%);
	}
	100% {
		transform:scale(1)translateX(-50%);
	}
}

@keyframes open-back-mobile {
	0% {
		transform:scale(0);
	}
	30% {
		transform:scale(0.4, 0.55);
	}
	50% {
		transform:scale(0.5, 0.6);
	}
	100% {
		transform:scale(0.5);
	}
}

@keyframes open-back-middle-mobile {
	0% {
		transform:scale(0)translateY(-100%);
	}
	30% {
		transform:scale(0.4, 0.55)translateY(-100%);
	}
	50% {
		transform:scale(0.5, 0.6)translateY(-100%);
	}
	100% {
		transform:scale(0.5)translateY(-100%);
	}
}

@keyframes open-back-side-mobile {
	0% {
		transform:scale(0)translateX(-100%);
	}
	30% {
		transform:scale(0.4, 0.55)translateX(-100%);
	}
	50% {
		transform:scale(0.5, 0.6)translateX(-100%);
	}
	100% {
		transform:scale(0.5)translateX(-100%);
	}
}

@keyframes keybindPulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.6; }
}

@keyframes growText {
	0% {
		font-size: 0px;
    	background-size: 0%;
    	background-position-y: 50%;
    	background-color: rgba(0, 0, 0, 0.25);
	}
	100% {
		font-size: 170px;
		background-size: 40%;
		background-position-y: 50%;
		background-color: rgba(0, 0, 0, 0.25);
		backdrop-filter: blur(2.5px);
		-webkit-backdrop-filter: blur(10px);
	}
}

/* Weapon Variant Picker */
@keyframes variantGlow {
    0% {
		box-shadow: 0 0 6px 2px rgba(255, 200, 50, 0.5);
		transform: rotate(5deg);}
	
	25% {
		transform: rotate(-5deg);
	}
	
    50% {
		box-shadow: 0 0 14px 5px rgba(255, 200, 50, 0.85);
		transform: rotate(5deg);
	}
	
	75% {
		transform: rotate(-5deg);
	}
	
    100% {
		box-shadow: 0 0 6px 2px rgba(255, 200, 50, 0.5);
		transform: rotate(5deg);
	}
}

input[type=text] {
	-webkit-touch-callout: text;
	-webkit-user-select: text;
	-khtml-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
}

.menuLink {
	font-size: 20px;
}

a {
	color: #a56dc8;
	text-decoration: none;
	cursor: url(../img/cursors/pointer.png), auto;
}

a:active {
	color: #795094;
}

a:visited {
	color: #a56dc8;
}

a:link {
	color: #167ac6;
}

a:hover {
	color: #795094;
}

* {
    font-size: 12px;
    font-family: 'Ubuntu';
    /* filter: blur(0); */
    -webkit-font-smoothing: subpixel-antialiased;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

span {
	font-size: inherit;
}

#errorNotification {
	position: absolute;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	max-width: 500px;
	z-index: 99999;
}

#errorNotification .errorClose {
	position: absolute;
	top: 5px;
	left: 5px;
}

#youtuberOf {
	position: absolute;
	top: 10px;
	left: 10px;
	color: #fff;
	font-size: 24px;
}

.ytLink {
	color: #6eb3ef;
	font-size: 24px;
	text-decoration: none;
}

.ytLink:hover {
	color: #5c96c9;
}

#featuredYoutube {
	margin-top: 5px;
}

#featuredYoutube a {
	color: #6eb3ef !important;
}

#featuredYoutube a:hover {
	color: #5c96c9 !important;
}

#mainMenu {
	background-image: none;
	background-color: rgba(0,0,0,0.28);
    background-position: center;
    background-size: cover;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 10;
    /*backdrop-filter: blur(var(--glass-frames-blur));
    -webkit-backdrop-filter: blur(var(--glass-frames-blur));*/
}

#menuContainer {
	width: 100%;
	white-space: nowrap;
	text-align: center;
	position: absolute;
	top: 45%;
	transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
}

#soundSetting {
	position: absolute;
	top: 10px;
	right: 10px;
}

#partyButton {
	position: absolute;
	color: white;
	top: 20px;
	right: 20px;
	font-size: 24px;
	text-decoration: none;
}

#joinPartyButton {
	position: absolute;
	top: 54px;
	right: 20px;
	cursor: url(../img/cursors/pointer.png), auto;
}

#pingDisplay {
	position: absolute;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	color: white;
}

#shutdownDisplay {
	position: absolute;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	color: white;
	font-size: 25px;
	z-index: 100;
	pointer-events: none;
}

#settingsButton {
	position: absolute;
	cursor: url(../img/cursors/pointer.png), auto;
	display: none;
}

#followText {
	position: absolute;
	bottom: 40px;
	left: 10px;
	color: #fff;
	font-size: 22px;
}

#twitterFollow {
	position: absolute;
	bottom: 10px;
	left: 10px;
}

#youtubeFollow {
	position: absolute;
	bottom: 10px;
	left: 10px;
}

#linksContainer1 {
	border-radius: 15px;
	position: absolute;
	bottom: 40px;
	left: 50%;
	transform: translateX(-50%);
	background-color: rgb(0 0 0 / 25%);
	text-align: right;
	font-size: 16px;
	padding: 6px;
    color: #fff;
}

#linksContainer2 {
	border-radius: 15px;
	position: absolute;
	bottom: 5px;
	left: 50%;
	transform: translateX(-50%);
	background-color: rgb(0 0 0 / 25%);
	text-align: right;
	font-size: 16px;
	padding: 6px;
    color: #fff;
}

#linksContainer1 a {
	font-size: 16px !important;
}

#linksContainer2 a {
	font-size: 16px !important;
}

#loadingText {
	display: flex;
    color: #fff;
    text-align: center;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#loadingText a {
    display: block;
    width: fit-content;
    text-shadow: var(--text-shadow);
}

#loadingTextLabel {
	font-size: 35px;
    color: #fff;
    text-align: center;
    background-color: #939393;
    width: fit-content;
    padding: 10px;
    margin-bottom: 5px;
    border-radius: 15px;
    border: #525252 solid 4px;
    text-shadow: var(--text-shadow);
	transition: filter 0.2s ease-in-out, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: 0.5s ease-in-out 0s infinite alternate none running pulser, 0.5s ease-in-out 0s infinite alternate none running red-overlay;
}

/* Menu Layout */
.menuCard, .adMenuCard {
	vertical-align: top;
	/* text-align: left; */
	white-space: normal;
	word-wrap: break-word;
	margin: 3px;
	display: inline-block;
	width: 300px;
	padding: 14px;
	background-color: rgb(0 0 0 / 25%);
	-moz-border-radius: 15px;
	border-radius: 15px;
	overflow: hidden;
}

.adMenuCard {
	min-width: 0;
	min-height: 0;
	height: initial;
	width: initial;
	padding: 0;
	box-shadow: none;
}

.menuHeader {
	font-size: 24px;
	color: #ffffff;
	margin-bottom: 5px;
}

.menuText {
	font-size: 18px;
	color: rgb(255 255 255 / 50%);
	margin-bottom: 10px;
}

#serverBrowser select {
	width: 100%;
	height: 24px;
}

#altServer {
	width: 100%;
	text-align: center;
	margin-top: 10px;
}

#skinColorHolder {
	width: 100%;
}

.activeSkin {
	border: 3px solid #7ee559 !important;
}

.skinColorItem {
	cursor: url(../img/cursors/pointer.png), auto;
	display: inline-block;
	margin-right: 12px;
	width: 30px;
	height: 30px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: 3px solid #525252;
}

.skinColorItem:hover {
	border: 3px solid #6eb3ef;
}

.keybindRow {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: center;
	align-items: center;
	font-size: 14px;
	color: #a8a8a8;
	margin-bottom: 6px;
}

.keybindKey {
	display: inline-block;
	min-width: 32px;
	padding: 2px 8px;
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	color: #555;
	background: #f0f0f0;
	border: 2px solid #ccc;
	border-radius: 4px;
	cursor: url(../img/cursors/pointer.png), auto;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-transition: all 0.15s;
	transition: all 0.15s;
}

.keybindKey:hover {
	border-color: #999;
	background: #e4e4e4;
}

.keybindKey.listening {
	border-color: #4a90d9;
	background: #e8f0fe;
	color: #4a90d9;
	animation: keybindPulse 1s infinite;
}

.keybindKey.conflict {
	border-color: #e53935;
	color: #e53935;
	background: #fdecea;
}

.keybindText {
	font-size: 14px;
	color: #a8a8a8;
	margin-bottom: 6px;
}

.keybindText.conflict {
	color: #e53935;
}

.settingRadio {
	font-size: 18px;
	color: #a8a8a8;
	margin-bottom: 10px;
}

.settingRadio > input {
	cursor: url(../img/cursors/pointer.png), auto;
}

#gameName {
	font-size: 170px;
    /* height: 175px; */
    text-shadow: 0 1px 0 #c4c4c4, 0 2px 0 #c4c4c4, 0 3px 0 #c4c4c4, 0 4px 0 #c4c4c4, 0 5px 0 #c4c4c4, 0 6px 0 #c4c4c4, 0 7px 0 #c4c4c4, 0 8px 0 #c4c4c4, 0 9px 0 #c4c4c4;
    color: #fff;
    /*animation: squishy-animation 1.5s infinite alternate;*/
    animation-timing-function: ease-in-out;
}

#guideCard {
	max-height: 200px;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}

#guideCard #desktopInstructions {
	display: block;
}

#guideCard #mobileInstructions {
	display: none;
}

#guideCard.touch #desktopInstructions {
	display: none;
}

#guideCard.touch #mobileInstructions {
	display: block;
}

#guideCard #smallLinks {
	display: none;
}

#promoImgHolder {
	text-align: center;
}

#promoImg:hover {
	opacity: 0.9;
}

#rightCardHolder {
	display: inline-block;
	vertical-align: top;
}

#downloadButtonContainer {
	display: block;
	text-align: center;
	padding-bottom: 12px;
	margin-top: 14px;
}

#downloadButtonContainer.cordova {
	display: none;
}

#mobileDownloadButtonContainer {
	display: none;
}

#mobileDownloadButtonContainer.cordova {
	display: none;
}

.downloadBadge {
	margin: 0 6px 0 6px;
}

.downloadBadge img {
	height: 40px;
}

#adCard {
	text-align: center;
	width: 300px;
	height: auto;
}

#nameInput {
	position: absolute;
	left: 0;
	width: 70%;
	top: 0;
	height: 100%;
	bottom: 0;
	margin: 0;
	border: none;
	outline: none;
	text-align: center;
	padding: 6px;
	font-size: 24px;
	margin-bottom: 16px;
	box-sizing: border-box;
	color: #4A4A4A;
	background-color: rgb(255 255 255 / 75%);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	cursor: url(../img/cursors/text.png), auto;
}

.menuButton {
    width: 100%;
    filter: brightness(95%) contrast(90%);
    box-sizing: border-box;
    position: relative;
    border: 2.25px solid rgba(0, 0, 0, 0.2);
    outline: none;
    border-radius: calc(2.5 * .28rem);
    transition: filter 0.2s ease-in-out, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
    padding: 8px 0px;
    background-color: #7ee559;
    cursor: url(../img/cursors/pointer.png), auto;
    color: rgb(255, 255, 255);
    font-weight: 700;
    text-shadow: var(--text-outline);
    font-size: 1.5em;
    text-align: center;
}

.menuButton::after {
    border-bottom-right-radius: calc(2.5 * .28rem);
    border-bottom-left-radius: calc(2.5 * .28rem);
    content: "";
    height: 35%;
    width: 100%;
    left: 0px;
    bottom: 0px;
    display: block;
    background-color: rgba(0, 0, 0, 0.1);
    position: absolute;
}

#menuButton,
#menuButton span,
#menuButton .material-icons {
  text-shadow: var(--textoutline);
}

#twobuttons {
    display: flex;
}

.menuButton:hover {
	background-color: #6fc94e;
}

.menuButton.disabled {
	color: #CCC;
	background-color: #666;
}

#gameUI {
	--upgrade-hidden-offset: calc(-100vh - 180px);
	--upgrade-slide-ms: 340ms;
	pointer-events: none;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 2;
}

#chatHolder {
    position: absolute;
    bottom: 270px;
    width: 300px;
    left: 20px;
    text-align: center;
}

#chatFrame {
    width: 100%;
    height: 150px;
    margin-bottom: 10px;
    overflow-y: scroll;
    overflow-x: hidden;
    pointer-events: auto;
    background-color: rgba(0, 0, 0, 0.25);
    padding: 6px;
    font-size: 14px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    backdrop-filter: blur(var(--glass-frames-blur));
    -webkit-backdrop-filter: blur(var(--glass-frames-blur));
}

#chatBox {
    width: 100%;
	padding: 6px;
	font-size: 20px;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.25);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	pointer-events: all;
	border: 0;
    cursor: url(../img/cursors/text.png), auto;
    backdrop-filter: blur(var(--glass-frames-blur));
    -webkit-backdrop-filter: blur(var(--glass-frames-blur));
}

#chatBox:focus {
	outline: none;
}

.chat-entry {
    text-align: left;
    margin-left: 10px;
    height: auto;
}

.chat-msg {
    text-align: left;
    display: inline-block;
    color: white;
    margin-left: 5px;
    font-size: 14px;
}

.chat-name {
    text-align: left;
    display: inline-block;
    margin-top: -24px;
    color: red;
    font-size: 14px;
}

#topInfoHolder {
	position: absolute;
	right: 20px;
	top: 20px;
}

#leaderboard {
	color: #fff;
	font-size: 31px;
	text-align: left;
	padding: 10px;
	padding-top: 7px;
	padding-bottom: 5px;
	width: 220px;
	background-color: rgba(0, 0, 0, 0.25);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
    backdrop-filter: blur(var(--glass-frames-blur));
    -webkit-backdrop-filter: blur(var(--glass-frames-blur));
}

.leaderEntry {
    width: 78%;
    position: relative;
    margin-bottom: 5px;
    cursor: url(../img/cursors/default.png), auto;
    pointer-events: all;
    animation-fill-mode: forwards;
}

.leaderPlayerIcon {
	position: absolute;
    left: 88%;
	top: 50%;
	transform: translateY(-50%);
	margin-right: 2px;
	pointer-events: none;
    /*animation: leaderplayericonidle 1.5s ease-in-out infinite;*/
}

#leaderPreview {
	position: absolute;
	right: 100%;
	top: 0;
	margin-right: 10px;
	background-color: rgba(0, 0, 0, 0.4);
	border-radius: 8px;
	padding: 5px;
	pointer-events: none;
}

#leaderPreviewCanvas {
	display: block;
}

.leaderHolder {
    background-color: #525252;
    border: 4px solid #525252;
    height: 25px;
    border-radius: 5px;
	white-space: nowrap;
	position: relative;
	overflow: hidden;
}

.leaderHolderold {
	overflow: hidden;
	white-space: nowrap;
}

.leaderHolder .leaderProgressBar {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	border-radius: 2.5px;
	-webkit-transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
	transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.leaderHolder .leaderboardItem {
	position: relative;
	z-index: 1;
}

.leaderboardItemold {
	float: left;
    display: inline-block;
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    font-size: 22px;
}

.leaderScoreold {
	text-align: right;
    float: right;
    margin-left: 10px;
    display: inline-block;
    font-size: 22px;
}

#killCounter {
    background-image: url(../img/icons/skull.png);
    right: 0px;
    margin-top: 10px;
    color: #fff;
    font-size: 28px;
    padding-right: 40px;
    background-size: 28px;
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-color: rgba(0, 0, 0, 0.25);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.leaderScores {
	text-align: right;
	float: right;
	margin-left: 10px;
	display: inline-block;
	font-size: 18px;
	color: #7ee559;
}

.leaderScore {
	text-align: right;
	float: right;
	margin-left: 10px;
	display: inline-block;
	font-size: 22px;
	transition: all 0.2s ease;
}

.leaderboardItem {
    color: rgb(255, 255, 255);
    width: 100%;
    height: 100%;
	float: left;
	display: inline-block;
	max-width: none;
	white-space: nowrap;
	overflow: visible;
    text-align: left;
	font-size: 22px;
}

.uiElement,
.resourceDisplay {
	background-color: rgba(0, 0, 0, 0.25);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    color: #fff;
    padding: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 28px;
}

.resourceDisplay {
    position: absolute;
    right: 20px;
    height: 35px;
    text-align: right;
    line-height: 39px;
    padding-left: 10px;
    padding-right: 10px;
}

#resDisplay {
}

#foodDisplay {
	background-image: url(../img/resources/food_ico.png);
    padding-right: 40px;
    bottom: 130px;
    background-size: 28px;
    background-repeat: no-repeat;
    background-position: right 6px center;
}

#woodDisplay {
	background-image: url(../img/resources/wood_ico.png);
    padding-right: 40px;
    bottom: 75px;
    background-size: 28px;
    background-repeat: no-repeat;
    background-position: right 6px center;
}

#stoneDisplay {
	background-image: url(../img/resources/stone_ico.png);
    padding-right: 40px;
    bottom: 20px;
    background-size: 28px;
    background-repeat: no-repeat;
    background-position: right 6px center;
}

#scoreDisplay {
	background-image: url(../img/resources/gold_ico.png);
    padding-left: 40px;
    bottom: 160px;
    left: 20px;
    right: auto;
    background-size: 28px;
    background-repeat: no-repeat;
    background-position: left 6px center;
}

#gemDisplay {
	background-image: url(../img/resources/gem_ico.png);
    padding-left: 40px;
    bottom: 215px;
    left: 20px;
    right: auto;
    background-size: 28px;
    background-repeat: no-repeat;
    background-position: left 6px center;
}

#actionBar {
    position: absolute;
	bottom: 17px;
	width: 100%;
	text-align: center;
}

.actionBarItem {
	width: 66px;
	height: 66px;
	margin-left: 5px;
	margin-right: 5px;
	background-color: rgba(0, 0, 0, 0.25);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	display: inline-block;
    cursor: url(../img/cursors/default.png), auto;
	pointer-events: all;
	background-size: cover;
    backdrop-filter: blur(var(--glass-frames-blur));
    -webkit-backdrop-filter: blur(var(--glass-frames-blur));
}

.actionBarItem:hover {
	background-color: rgba(50, 50, 50, 0.25);
}

.itemIcon {
	width: 66px;
	height: 66px;
}

#mapDisplay {
	position: absolute;
    bottom: 20px;
    left: 20px;
    display: inline-block;
    height: 130px;
    pointer-events: all;
    background-color: rgba(0, 0, 0, 0.25);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    cursor: url(../img/cursors/ping.png), auto;
}

#mapDisplayHolder {
}

#timeDisplay {
}

#timeDisplay .time-icon {
}

#timeDisplay.is-night .time-countdown {
    background-image: url(../img/icons/moon.png);
}

#timeDisplay .time-countdown {
    background-image: url(../img/icons/sun.png);
	background-color: rgba(0, 0, 0, 0.25);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    color: #fff;
    padding: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 28px;
    position: absolute;
    left: 20px;
    top: 20px;
    height: 35px;
    text-align: right;
    line-height: 39px;
    padding-left: 40px;
    padding-right: 10px;
    background-size: 28px;
    background-repeat: no-repeat;
    background-position: left 6px center;
}

#mapDisplayHolder::after {
    /*content: "";
    position: absolute;
    inset: -11px;
    background: url(../img/ui/mapBorder.png) no-repeat center;
    background-size: 100% 100%;
    pointer-events: none;*/
}

#performanceDisplay {
    top: 20px;
    align-content: stretch;
    position: absolute;
    width: 100%;
    height: 42px;
    pointer-events: none;
    color: #fff;
    font-size: 14px;
    text-shadow: var(--text-shadow);
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: baseline;
}

.performanceItem {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: baseline;
    padding: 10px;
}

.performanceLabel {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.8);
    padding-right: 5px;
}

.performanceValue {
    font-size: 15px;
    color: #FFFFFF;
}

.gameButton {
	position: absolute;
    top: 20px;
    padding: 5px;
    pointer-events: all;
    cursor: url(../img/cursors/pointer.png), auto;
    backdrop-filter: blur(var(--glass-frames-blur));
    -webkit-backdrop-filter: blur(var(--glass-frames-blur));
}

.gameButton:hover {
}



#adminCommandPanel {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	right: auto;
	width: min(350px, calc(100vw - 24px));
	max-height: calc(100vh - 24px);
	overflow-y: auto;
	padding: 10px;
	z-index: 30;
	pointer-events: all;
	box-sizing: border-box;
	margin: 0;
	background-color: rgba(0, 0, 0, 0.5);
	border: 0;
	border-radius: 4px;
	color: #fff;
	box-shadow: none;
	text-shadow: var(--text-shadow);
	backdrop-filter: blur(var(--glass-frames-blur));
	-webkit-backdrop-filter: blur(var(--glass-frames-blur));
	transform: translate(-50%, -50%);
	animation: open-admin-panel 200ms 1 ease;
	animation-fill-mode: forwards;
}

#editorToolsPanel {
	display: none;
	position: fixed;
	top: 12px;
	bottom: 12px;
	left: 12px;
	width: min(390px, calc(100vw - 24px));
	overflow-y: auto;
	padding: 12px;
	z-index: 35;
	pointer-events: all;
	box-sizing: border-box;
	border: 0;
	border-radius: 6px;
	background: rgba(24, 24, 24, .68);
	color: #fff;
	box-shadow: 0 0 0 4px #050505, 0 4px 20px rgba(0, 0, 0, .35);
}

#editorWorkspacePanel {
	display: none;
	position: fixed;
	top: 12px;
	right: 12px;
	width: min(390px, calc(100vw - 24px));
	padding: 14px;
	z-index: 35;
	box-sizing: border-box;
	border: 0;
	border-radius: 6px;
	background: rgba(24, 24, 24, .68);
	color: #fff;
	box-shadow: 0 0 0 4px #050505, 0 4px 20px rgba(0, 0, 0, .35);
	pointer-events: all;
	max-height: calc(100vh - 24px);
	overflow-y: auto;
}
#actionBar .actionBarItem.editorWeaponSelected { outline:3px solid #63d8ff!important; outline-offset:2px; z-index:8; filter:drop-shadow(0 0 5px rgba(99,216,255,.9)); }
.editorWeaponInspectorFields { display:grid; grid-template-columns:minmax(0,1fr); gap:7px; max-height:calc(100vh - 100px); overflow-y:auto; padding:3px; }
.editorWeaponPreSection { display:grid; grid-template-columns:minmax(0,1fr) 42px; gap:8px; align-items:center; margin:2px 3px 10px; }
.editorWeaponPreSection > strong { grid-column:1/-1; color:#f7cf45; font-size:12px; letter-spacing:.06em; }
.editorWeaponPreCurrent { min-width:0; }
.editorWeaponPreCard { display:flex; align-items:center; gap:8px; min-height:48px; padding:6px; border-radius:5px; background:rgba(75,75,75,.9); color:#fff; }
.editorWeaponPreIcon { flex:0 0 38px; width:38px; height:38px; border-radius:4px; background:#d5d5d5 center/contain no-repeat; }
.editorWeaponPreInfo { min-width:0; display:grid; gap:2px; }
.editorWeaponPreName { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:800; }
.editorWeaponPreAge { color:rgba(255,255,255,.7); font-size:11px; font-weight:700; }
.editorWeaponPreRemove { width:24px!important; min-height:24px!important; height:24px; margin-left:auto; padding:0!important; background:transparent!important; box-shadow:none!important; color:#ddd!important; font-size:17px!important; }
.editorWeaponPreAdd { width:38px!important; min-height:48px!important; border:1px dashed rgba(255,255,255,.55)!important; background:rgba(255,255,255,.08)!important; font-size:20px!important; }
.editorWeaponPrePicker { grid-column:1/-1; display:grid; gap:5px; max-height:230px; overflow:auto; padding:7px; border-radius:5px; background:rgba(20,20,20,.8); }
.editorWeaponPrePicker[hidden] { display:none; }
.editorWeaponPrePicker button { display:flex; align-items:center; gap:8px; text-align:left; }
.editorWeaponPreSearch { width:100%; min-height:32px; padding:5px 8px; border:0; border-radius:4px; background:#444; color:#fff; }
.editorWeaponPermission { display:flex; align-items:center; gap:8px; margin:0 3px 10px; padding:8px; border-radius:5px; background:rgba(0,0,0,.25); color:#fff; font-size:12px; font-weight:700; }
.editorWeaponPermission input { width:16px; height:16px; accent-color:#63d8ff; }
.editorWeaponSharedNotice { margin:0 3px 10px; padding:9px; border-radius:5px; background:rgba(0,0,0,.3); color:rgba(255,255,255,.8); font-size:12px; }
.editorWeaponTransfer { grid-column:1/-1; display:grid; grid-template-columns:1fr; gap:8px; margin:0 3px 10px; }
.editorWeaponTransfer[hidden] { display:none!important; }
.editorWeaponTransfer button, .editorWeaponImportButton { display:flex; align-items:center; justify-content:center; min-height:34px; padding:6px 8px; border:0; border-radius:4px; background:#383838; box-shadow:0 0 0 2px #050505; color:#fff; font:inherit; font-size:12px; font-weight:700; cursor:pointer; }
.editorWeaponImportButton input { display:none; }
.editorWeaponLibrary { display:grid; gap:8px; margin:10px 0; padding:10px; border-radius:6px; background:rgba(0,0,0,.2); }
.editorToolSection[hidden], .editorWeaponLibrary[hidden], #editorWeaponInspector[hidden], .editorWorkspaceCard[hidden] { display:none!important; }
.editorWeaponLibrary > strong { padding:5px 8px; border-radius:4px; background:#202020; box-shadow:0 0 0 3px #050505; font-size:17px; }
.editorWeaponLibraryActions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.editorWeaponLibraryActions button, .editorWeaponLibraryActions select, .editorWeaponLibraryActions .editorWeaponImportButton, #editorWeaponSearch, #editorWeaponFolderFilter { min-width:0; width:100%; min-height:32px; box-sizing:border-box; padding:6px 8px; border:0; border-radius:4px; background:rgba(18,18,18,.88); box-shadow:0 0 0 2px #050505; color:#fff; font:inherit; font-size:12px; }
.editorWeaponLibraryGrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; max-height:390px; overflow:auto; }
.editorWeaponLibraryCard { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:112px auto auto auto; align-items:center; gap:5px; min-width:0; padding:7px; border:1px solid rgba(255,255,255,.16); border-radius:5px; background:rgba(50,50,50,.9); color:#fff; cursor:pointer; }
.editorWeaponLibraryCard[aria-current="true"] { border-color:#63d8ff; box-shadow:0 0 0 2px rgba(99,216,255,.45); }
.editorWeaponLibraryCard img { width:100%; height:112px; border-radius:4px; background:rgba(0,0,0,.2); object-fit:contain; }
.editorWeaponLibraryCardName, .editorWeaponLibraryCardMeta { grid-column:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center; }
.editorWeaponLibraryCardName { font-size:12px; font-weight:800; }
.editorWeaponLibraryCardMeta { color:rgba(255,255,255,.7); font-size:10px; }
.editorWeaponLibraryCardControls { grid-column:1/-1; display:flex; gap:5px; }
.editorWeaponLibraryCardControls button, .editorWeaponLibraryCardControls select { min-width:0; flex:1; min-height:28px; padding:4px 6px; border:0; border-radius:4px; background:#242424; color:#fff; font:inherit; font-size:11px; }
.editorWeaponLibraryTest { grid-column:1; width:100%; min-height:30px; border:0; border-radius:4px; background:#257e9c; color:#fff; font:inherit; font-size:11px; font-weight:800; cursor:pointer; }
.editorWeaponLibraryEmpty { grid-column:1/-1; margin:3px; color:rgba(255,255,255,.7); font-size:12px; }
.editorWeaponLibraryDetails { display:grid; gap:8px; padding:10px; border-radius:6px; background:rgba(0,0,0,.2); }
.editorWeaponLibraryDetails[hidden] { display:none!important; }
.editorWeaponLibraryDetails > strong { overflow-wrap:anywhere; font-size:17px; }
.editorWeaponLibraryDetailActions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.editorWeaponLibraryDetailActions button, .editorWeaponDeleteSaved { min-width:0; min-height:38px; padding:6px 8px; border:0; border-radius:4px; background:#bdbdbd; box-shadow:0 0 0 3px #505050; color:#111; font:inherit; font-size:13px; font-weight:800; cursor:pointer; }
.editorWeaponLibraryDetailActions button[aria-pressed="true"] { background:#7ce0a4; }
.editorWeaponDeleteSaved { margin-top:5px; background:#ff6666; box-shadow:0 0 0 3px #8e3131; }
.editorSharedGallery { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:18px; box-sizing:border-box; background:rgba(0,0,0,.65); pointer-events:all; }
.editorSharedGallery[hidden] { display:none!important; }
.editorSharedGalleryWindow { display:grid; gap:9px; width:min(720px,100%); max-height:calc(100vh - 36px); overflow:auto; box-sizing:border-box; padding:18px; border:4px solid #444; border-radius:8px; background:#999; color:#fff; text-shadow:1px 1px #111; box-shadow:0 4px 18px rgba(0,0,0,.45); }
.editorSharedGalleryHeader { display:flex; align-items:center; gap:9px; min-height:38px; }
.editorSharedGalleryHeader button, .editorGalleryPager button { min-width:36px; min-height:34px; border:0; border-radius:4px; background:#bdbdbd; color:#111; font:inherit; font-size:22px; font-weight:800; cursor:pointer; }
.editorSharedGalleryHeader strong { font-size:18px; }
.editorGalleryFilters { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.editorGalleryFilters input { grid-column:1/-1; }
.editorGalleryFilters select, .editorGalleryFilters input { min-width:0; width:100%; min-height:36px; box-sizing:border-box; padding:6px 8px; border:0; border-radius:4px; background:#eee; color:#222; font:inherit; font-size:13px; }
.editorGalleryTagChips { display:flex; flex-wrap:wrap; gap:5px; }
.editorGalleryTagChip { padding:4px 7px; border-radius:4px; background:#383838; color:#fff; font-size:11px; font-weight:700; }
.editorGalleryGrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:7px; max-height:52vh; overflow:auto; }
.editorGalleryCard { display:grid; gap:4px; min-width:0; padding:7px; border:1px solid rgba(255,255,255,.15); border-radius:5px; background:rgba(50,50,50,.9); color:#fff; text-align:center; }
.editorGalleryCardOpen { display:grid; grid-template-rows:112px auto auto auto; gap:4px; min-width:0; padding:0; border:0; background:transparent; color:inherit; font:inherit; text-align:center; cursor:pointer; }
.editorGalleryAuthor { justify-self:center; padding:2px 4px; border:0; background:transparent; color:#b6dbff; font:inherit; font-size:11px; text-decoration:underline; cursor:pointer; }
.editorGalleryCardImage { display:grid; place-items:center; overflow:hidden; border-radius:4px; background:rgba(0,0,0,.18); }
.editorGalleryCardImage img { width:100%; height:108px; object-fit:contain; }
.editorGalleryCard strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.editorGalleryCard span { color:rgba(255,255,255,.75); font-size:10px; }
.editorGalleryCardVersion { overflow-wrap:anywhere; }
.editorGalleryPager { display:grid; grid-template-columns:42px 1fr 42px; align-items:center; gap:8px; padding:5px; border-radius:5px; background:rgba(0,0,0,.2); text-align:center; }
.editorGalleryDetail { display:grid; gap:8px; text-align:center; }
.editorGalleryDetail[hidden] { display:none!important; }
.editorGalleryDetailPreview { display:grid; place-items:center; min-height:210px; border-radius:5px; background:rgba(0,0,0,.18); }
.editorGalleryDetailPreview img { width:180px; height:180px; object-fit:contain; }
.editorGalleryDetail h3, .editorGalleryDetail p { margin:0; overflow-wrap:anywhere; }
.editorGalleryDetail h3 { font-size:22px; }
.editorGalleryDetailMeta { color:rgba(255,255,255,.75); font-size:12px; }
.editorGalleryDetailMeta button { padding:0; border:0; background:transparent; color:#b6dbff; font:inherit; text-decoration:underline; cursor:pointer; }
.playerProfileOverlay { position:fixed; inset:0; z-index:2147483647; display:grid; place-items:center; padding:18px; box-sizing:border-box; background:rgba(0,0,0,.68); }
.playerProfileOverlay[hidden] { display:none!important; }
.playerProfileWindow { display:grid; gap:14px; width:min(440px,100%); max-height:calc(100vh - 36px); overflow:auto; box-sizing:border-box; padding:18px; border:4px solid #444; border-radius:8px; background:#777; color:#fff; text-shadow:1px 1px #111; box-shadow:0 4px 18px rgba(0,0,0,.45); }
.playerProfileHeader { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.playerProfileHeader h2 { margin:0; font-size:20px; }
.playerProfileHeader button { width:36px; height:36px; border:0; border-radius:4px; background:#bdbdbd; color:#111; font-size:25px; cursor:pointer; }
.playerProfileContent[hidden] { display:none!important; }
.playerProfileIdentity { display:flex; align-items:center; gap:12px; min-width:0; }
.playerProfileIdentity > img { width:72px; height:72px; flex:none; border-radius:8px; object-fit:cover; background:rgba(0,0,0,.2); }
.playerProfileIdentity > div { display:grid; gap:4px; min-width:0; }
.playerProfileIdentity strong { overflow-wrap:anywhere; font-size:20px; }
.playerProfileIdentity span { color:rgba(255,255,255,.7); font-size:12px; overflow-wrap:anywhere; }
#playerProfileBadges { display:flex; align-items:center; gap:5px; }
#playerProfileVerifiedBadge { width:18px; height:18px; object-fit:contain; }
.playerProfileStats { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.playerProfileStats > div { display:flex; justify-content:space-between; gap:6px; padding:9px; border-radius:4px; background:rgba(0,0,0,.2); }
.playerProfileStats span { color:rgba(255,255,255,.7); }
.playerProfileStats strong { text-align:right; }
.accountProfileName { padding:0; border:0; background:transparent; text-align:left; font:inherit; cursor:pointer; }
.accountProfileName:hover { text-decoration:underline; }
.accountFriendsOpen { width:100%; min-height:38px; margin:0 0 10px; }
.accountFriendsWindow #accountFriendsList { display:grid; gap:14px; }
.accountFriendsGroup { display:grid; gap:6px; }
.accountFriendsGroup h3 { margin:0; font-size:16px; }
.accountFriendsRow { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px; border-radius:5px; background:rgba(0,0,0,.2); }
.accountFriendsPlayer { min-width:0; overflow:hidden; padding:0; border:0; background:transparent; color:inherit; font:inherit; text-align:left; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.accountFriendsActions { display:flex; flex:none; gap:5px; }
.accountFriendsActions button, .playerProfileFriendActions button { min-height:32px; padding:5px 9px; border:0; border-radius:4px; background:#4d8cce; color:#fff; font:inherit; cursor:pointer; }
.accountFriendsActions button[data-friend-action="decline"], .accountFriendsActions button[data-friend-action="cancel"], .accountFriendsActions button[data-friend-action="remove"], .playerProfileFriendActions button[data-friend-action="decline"], .playerProfileFriendActions button[data-friend-action="cancel"], .playerProfileFriendActions button[data-friend-action="remove"] { background:#7b4848; }
.accountFriendsActions button:disabled, .playerProfileFriendActions button:disabled { opacity:.55; cursor:wait; }
.playerProfileFriendActions { display:grid; gap:7px; }
.playerProfileFriendActions[hidden] { display:none!important; }
.playerProfileFriendActions p { margin:0; }
.playerProfileFriendActions > div { display:flex; flex-wrap:wrap; gap:7px; }
.editorGalleryUpdate { display:grid; gap:6px; padding:10px; border-radius:5px; background:rgba(0,0,0,.2); text-align:left; }
.editorGalleryModeration { display:grid; gap:6px; padding:10px; border-radius:5px; background:rgba(80,20,20,.65); text-align:left; }
.editorGalleryModeration[hidden] { display:none!important; }
.editorGalleryModeration textarea, .editorGalleryModeration input { min-width:0; width:100%; box-sizing:border-box; padding:7px 8px; border:0; border-radius:4px; background:#eee; color:#222; font:inherit; }
.editorGalleryModerationActions { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.editorGalleryModerationActions button { min-height:36px; border:0; border-radius:4px; background:#b74343; color:#fff; font:inherit; font-weight:800; cursor:pointer; }
.editorGalleryModerationActions button:disabled { opacity:.55; cursor:not-allowed; }
.editorGalleryUpdate[hidden] { display:none!important; }
.editorGalleryUpdate label { font-size:12px; font-weight:800; }
.editorGalleryUpdate select, .editorGalleryUpdate input { min-width:0; width:100%; min-height:36px; box-sizing:border-box; padding:6px 8px; border:0; border-radius:4px; background:#eee; color:#222; font:inherit; }
.editorGalleryUpdate button { min-height:40px; border:0; border-radius:4px; background:#91f76e; color:#111; font:inherit; font-weight:800; cursor:pointer; }
.editorGalleryDetailActions { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.editorGalleryDetailActions button, .editorGalleryResume { min-height:42px; border:0; border-radius:4px; background:#bdbdbd; box-shadow:0 0 0 2px #505050; color:#111; font:inherit; font-size:13px; font-weight:800; cursor:pointer; }
.editorGalleryResume { background:#5de9e9; box-shadow:0 0 0 3px #348888; }
.editorGalleryDetailActions button:disabled { opacity:.55; cursor:not-allowed; }
.editorWeaponShareDialog { position:fixed; inset:0; z-index:101; display:grid; place-items:center; padding:18px; background:rgba(0,0,0,.65); pointer-events:all; }
.editorWeaponShareDialog[hidden] { display:none!important; }
.editorWeaponShareForm { position:relative; display:grid; gap:10px; width:min(600px,100%); max-height:calc(100vh - 36px); overflow:auto; padding:18px; border:4px solid #444; border-radius:8px; background:#999; color:#fff; text-shadow:1px 1px #111; box-shadow:0 4px 18px rgba(0,0,0,.45); }
.editorWeaponShareForm > h2 { margin:0 38px 4px; text-align:center; font-size:28px; }
.editorWeaponShareForm > .editorCloseButton { position:absolute; top:8px; right:8px; }
.editorWeaponShareForm > label { display:grid; gap:5px; font-size:15px; font-weight:800; }
.editorWeaponShareForm input, .editorWeaponShareForm textarea { width:100%; box-sizing:border-box; padding:8px; border:3px solid #555; border-radius:5px; background:#eee; color:#222; font:inherit; text-shadow:none; }
.editorWeaponShareForm fieldset { margin:0; padding:8px; border:0; border-radius:5px; background:rgba(0,0,0,.2); }
.editorWeaponShareForm legend { padding:0 4px; font-weight:800; }
.editorWeaponShareTags { display:flex; flex-wrap:wrap; gap:6px; }
.editorWeaponShareTags label { display:flex; align-items:center; gap:4px; padding:4px 6px; border-radius:4px; background:#555; font-size:12px; font-weight:700; }
.editorWeaponShareTags input { width:15px; height:15px; accent-color:#79eb68; }
.editorWeaponShareSubmit { min-height:44px; border:0; border-radius:5px; background:#91f76e; box-shadow:0 0 0 3px #4f8437; color:#111; font:inherit; font-size:16px; font-weight:900; cursor:pointer; }
.editorWeaponPreviewSection { display:grid; gap:6px; margin:0 3px 10px; }
.editorWeaponPreviewSection strong { color:#f7cf45; font-size:12px; letter-spacing:.06em; }
#editorWeaponPreview { display:block; width:min(100%,190px); aspect-ratio:1; height:auto; border-radius:5px; background:linear-gradient(145deg,rgba(15,30,38,.85),rgba(4,8,12,.9)); }
.editorInspectorProperty { display:grid; grid-template-columns:minmax(0,1fr) minmax(88px,42%); align-items:center; gap:8px; min-width:0; color:rgba(255,255,255,.92); font-size:13px; }
.editorInspectorProperty span { overflow-wrap:anywhere; }
.editorInspectorProperty input { min-width:0; width:100%; height:34px; box-sizing:border-box; padding:6px 8px; border:0; border-radius:4px; background:rgba(18,18,18,.88); box-shadow:0 0 0 3px #050505; color:#fff; font:inherit; }
.editorPanelHeader { display:flex; align-items:center; justify-content:space-between; margin:0 0 12px; }
.editorPanelActions { display:flex; align-items:center; gap:6px; }
.editorPanelControl { width:34px!important; min-width:34px!important; height:34px; min-height:34px!important; padding:0!important; border:2px solid #111!important; border-radius:7px!important; background:#333!important; color:#fff!important; font-size:21px!important; line-height:1; cursor:pointer; }
.editorPanelControl:hover { background:#505050!important; }
.editorPanelMinimized { bottom:auto!important; height:auto!important; max-height:none!important; overflow:hidden!important; }
#editorToolsPanel.editorPanelMinimized > :not(.editorPanelHeader), #editorWorkspacePanel.editorPanelMinimized > :not(.editorPanelHeader) { display:none!important; }
#editorToolsPanel.editorPanelMaximized, #editorWorkspacePanel.editorPanelMaximized { top:12px; right:12px; bottom:12px; left:12px; width:auto; max-height:none; z-index:42; }
.editorPanelHeader h2 { margin:0; font-size:26px; line-height:1.1; text-shadow:2px 2px #111; }
.editorEyebrow { display:block; margin-bottom:3px; color:#9deaff; font-size:10px; font-weight:800; letter-spacing:.14em; }
.editorCloseButton { width:34px!important; height:34px; padding:0!important; border:2px solid #111!important; border-radius:7px!important; background:#333!important; color:#fff; font-size:24px!important; line-height:1; cursor:pointer; }
.editorToolSection { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:7px; margin:10px 0; padding:10px; border:0; border-radius:6px; background:rgba(0,0,0,.18); }
.editorToolSection strong { grid-column:1/-1; padding:5px 8px; border-radius:4px; background:#202020; box-shadow:0 0 0 3px #050505; font-size:17px; text-shadow:1px 1px #111; }
.editorToolSection select, .editorToolSection input, .editorToolSection button { min-width:0; width:100%; min-height:34px; box-sizing:border-box; padding:7px 8px; border:0; border-radius:4px; background:rgba(18,18,18,.88); box-shadow:0 0 0 3px #050505; color:#fff; font:inherit; }
.editorToolSection select:first-of-type { grid-column:1/-1; }
.editorPropertyList { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; max-height:124px; overflow:auto; padding:1px; }
.editorPropertyList button { min-height:29px!important; padding:4px!important; border-width:1px!important; font-size:11px!important; line-height:1.15; }
.editorPropertyList button[aria-pressed="true"] { background:#4b4b4b!important; box-shadow:0 0 0 2px #fff!important; }
.editorValueLabel { display:grid; align-content:start; gap:4px; min-width:0; color:rgba(255,255,255,.8); font-size:11px; font-weight:700; }
.editorValueLabel input { font-size:13px!important; }
.editorTextureUpload { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 8px; border:0; border-radius:4px; background:rgba(0,0,0,.35); box-shadow:0 0 0 2px #050505; color:rgba(255,255,255,.85); font-size:12px; font-weight:700; cursor:pointer; }
.editorTextureUpload input { width:min(58%,220px); min-width:0; color:#fff; font-size:11px; }
.editorTextureUpload input::file-selector-button { margin-right:6px; padding:5px 7px; border:1px solid #111; border-radius:4px; background:#333; color:#fff; cursor:pointer; }
.editorToolSection select option { background:#222; color:#fff; }
.editorToolSection button { background:#383838; font-weight:700; cursor:pointer; }
.editorToolSection button:hover, .editorCloseButton:hover { background:#505050!important; }
.editorToolSection .editorPrimaryAction { background:#008db5; }
#editorToolsStatus { min-height:22px; padding:7px 8px; border-radius:5px; background:rgba(0,0,0,.28); font-size:12px; color:rgba(255,255,255,.9); }
.editorLiveBadge { display:flex; align-items:center; gap:6px; padding:5px 8px; border-radius:12px; background:rgba(0,0,0,.25); font-size:11px; font-weight:800; }
.editorLiveBadge i { width:8px; height:8px; border-radius:50%; background:#7ee28a; box-shadow:0 0 8px #7ee28a; }
.editorWorkspaceCard { margin:9px 0; padding:11px; border:0; border-radius:5px; background:rgba(0,0,0,.25); box-shadow:0 0 0 2px #050505; }
.editorWorkspaceCard strong { display:block; margin-bottom:5px; }
.editorWorkspaceCard p { margin:0; color:rgba(255,255,255,.82); font-size:13px; line-height:1.4; }
.editorWorkspaceCard code { display:block; margin-top:6px; padding:5px 7px; border-radius:4px; background:rgba(0,0,0,.3); color:#c7efff; font-size:12px; }
.editorWorkspaceHint ol { margin:4px 0 0; padding-left:20px; color:rgba(255,255,255,.82); font-size:13px; line-height:1.7; }

/* Server Editor panels use the game's grass, wood, and stone colors. */
#editorToolsPanel, #editorWorkspacePanel {
	--editor-panel-bg: rgba(31, 43, 35, .97);
	--editor-card-bg: rgba(46, 60, 48, .96);
	--editor-control-bg: #334538;
	--editor-border: #8a653d;
	--editor-accent: #9be564;
	border: 2px solid var(--editor-border);
	border-radius: 12px;
	background: var(--editor-panel-bg);
	box-shadow: 0 8px 26px rgba(0, 0, 0, .48), inset 0 0 0 1px rgba(255, 230, 174, .08);
	color: #fff8e6;
	text-shadow: 1px 2px rgba(0, 0, 0, .5);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
#editorToolsPanel { padding: 14px; }
#editorWorkspacePanel { padding: 16px; }
.editorPanelHeader {
	gap: 10px;
	padding: 2px 0 12px;
	border-bottom: 1px solid rgba(255, 232, 183, .2);
}
.editorPanelHeader h2 { font-size: 24px; text-shadow: 1px 2px rgba(0, 0, 0, .45); }
.editorEyebrow { color: #b7ee78; font-size: 10px; }
.editorPanelControl, .editorCloseButton {
	border: 1px solid rgba(255, 255, 255, .18)!important;
	border-radius: 8px!important;
	background: #3b4e3e!important;
	box-shadow: 0 2px 0 rgba(0, 0, 0, .28);
}
.editorPanelControl:hover, .editorCloseButton:hover { background: #526a4e!important; }
.editorToolSection, .editorWeaponLibrary, .editorWorkspaceCard, .editorWeaponLibraryDetails {
	border: 1px solid rgba(218, 183, 125, .32);
	border-radius: 10px;
	background: var(--editor-card-bg);
	box-shadow: 0 3px 9px rgba(0, 0, 0, .18);
}
.editorToolSection { gap: 8px; margin: 12px 0; padding: 12px; }
.editorToolSection strong, .editorWeaponLibrary > strong {
	padding: 7px 9px;
	border: 1px solid rgba(255, 232, 183, .16);
	border-radius: 7px;
	background: rgba(91, 67, 39, .76);
	box-shadow: none;
	font-size: 15px;
	text-shadow: none;
}
.editorSectionHint {
	grid-column: 1 / -1;
	margin: -2px 1px 2px;
	color: rgba(255, 248, 230, .78);
	font-size: 12px;
	line-height: 1.45;
}
.editorToolSection select, .editorToolSection input, .editorToolSection button,
.editorWeaponLibraryActions button, .editorWeaponLibraryActions select,
.editorWeaponLibraryActions .editorWeaponImportButton, #editorWeaponSearch, #editorWeaponFolderFilter,
.editorInspectorProperty input, .editorInspectorProperty select {
	border: 1px solid rgba(255, 255, 255, .13);
	border-radius: 7px;
	background: var(--editor-control-bg);
	box-shadow: none;
	color: #fff8e6;
}
.editorToolSection button, .editorWeaponLibraryActions button, .editorWeaponLibraryActions .editorWeaponImportButton {
	min-height: 38px;
	font-size: 12px;
	font-weight: 800;
	transition: background-color .15s ease, transform .15s ease, border-color .15s ease;
}
.editorToolSection button:hover, .editorWeaponLibraryActions button:hover,
.editorWeaponLibraryActions .editorWeaponImportButton:hover {
	border-color: rgba(255, 255, 255, .34);
	background: #4a6149;
	transform: translateY(-1px);
}
.editorToolSection button:focus-visible, .editorWeaponLibrary button:focus-visible,
.editorPanelHeader button:focus-visible, #editorWeaponSearch:focus-visible,
#editorWeaponFolderFilter:focus-visible, .editorInspectorProperty input:focus-visible {
	outline: 2px solid var(--editor-accent);
	outline-offset: 2px;
}
.editorToolSection .editorPrimaryAction { background: #548b38; }
.editorToolSection .editorValueLabel { color: rgba(255, 248, 230, .82); }
.editorWeaponLibrary { gap: 10px; margin: 12px 0; padding: 12px; }
.editorWeaponLibraryCard {
	border-color: rgba(218, 183, 125, .34);
	border-radius: 9px;
	background: #3b4c3b;
}
.editorWeaponLibraryCard[aria-current="true"] { border-color: var(--editor-accent); box-shadow: 0 0 0 2px rgba(155, 229, 100, .3); }
.editorWeaponLibraryCardControls button, .editorWeaponLibraryCardControls select { border: 1px solid rgba(255,255,255,.12); border-radius: 6px; background: #293a2d; }
.editorWeaponLibraryTest { border-radius: 7px; background: #588f39; font-weight: 800; }
.editorWorkspaceCard { padding: 12px; }
.editorWorkspaceCard strong { color: #c9ef9c; }
#editorToolsStatus { margin-top: 10px; border: 1px solid rgba(255, 232, 183, .18); background: rgba(12, 21, 14, .62); }

@media (max-width: 800px) {
	#editorToolsPanel { display:none!important; }
	#editorWorkspacePanel { top:12px; right:12px; bottom:12px; left:12px; width:auto; max-height:none; }
}

#adminCommandPanel .menuHeader {
	margin-bottom: 4px;
	color: #fff;
}

.adminCommandHint {
	margin-bottom: 8px;
	font-size: 11px;
	color: rgba(255, 255, 255, 0.6);
}

.adminAvatarListTitle {
	margin: 8px 0 4px;
	font-size: 11px;
	font-weight: bold;
}

.accountRank img {
	width: 26px;
	height: 26px;
	object-fit: contain;
}

.adminAvatarList {
	max-height: 112px;
	overflow-y: auto;
	padding: 5px 7px;
	border-radius: 4px;
	background-color: rgba(0, 0, 0, 0.25);
	font-size: 11px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.8);
}

#adminCommandPanel select,
#adminCommandPanel input,
#adminCommandPanel button {
	max-width: 100%;
	box-sizing: border-box;
	border: 0;
	border-radius: 4px;
	background-color: rgba(0, 0, 0, 0.25);
	color: #fff;
	font: inherit;
	text-shadow: var(--text-shadow);
}

#adminCommandPanel select option {
	background-color: #222;
	color: #fff;
}

#adminCommandPanel button:hover {
	background-color: rgba(50, 50, 50, 0.25);
}

.accountAvatarShop {
	display: none;
	margin: 8px 0;
	padding: 8px;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	text-align: left;
}

.accountGemBalance {
	justify-content: center;
	color: #AD51BF;
	font-size: 25px;
}

#accountAvatarIcon {
    width: 55px !important;
    height: 55px !important;
    border-radius: 25%;
}

.accountAvatarShopList {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	top: 50vh;
	left: 50vw;
	/* overflow-y: auto; */
}

.accountAvatarShopItem {
	display: flex;
	min-width: 0;
	padding: 4px;
	border: none;
	border-radius: 10px;
	margin-bottom: 5px;
}

.accountAvatarShopItem img {
	width: 48px;
	height: 48px;
	flex: 0 0 48px;
	object-fit: contain;
}

.accountAvatarShopDetails {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	font-size: 12px;
	color: rgb(255 255 255 / 50%);
}

.accountAvatarShopDetails strong {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #ffffff;
	font-size: 16px;
}

.accountAvatarShopAction {
	flex: 0 0 auto;
	padding: 0px 8px;
	border: 0;
	font-size: 15px;
	border-radius: 4px;
	background: #72cf56;
	color: #fff;
	cursor: url(../img/cursors/pointer.png), auto;
}

.accountAvatarShopAction:disabled {
	background: #999;
	cursor: default;
}

.accountAvatarShopStatus {
	min-height: 14px;
	margin-top: 5px;
	font-size: 18px;
	color: #6eb3ef;
}

.customizeAvatarInventory {
}

.customizeAvatarList {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 5px;
}

.customizeAvatarItem {
	display: flex;
	min-width: 0;
	min-height: 54px;
	align-items: center;
	justify-content: center;
	/* flex-direction: column; */
	gap: 2px;
	padding: 4px;
	border: none;
	border-radius: 10px;
	background: rgb(0 0 0 / 25%);
	color: #fff;
	font: inherit;
	cursor: url(../img/cursors/pointer.png), auto;
}

.customizeAvatarItem span {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 10px;
}

.customizeAvatarItem img {
	width: 48px;
	height: 48px;
	flex: 0 0 48px;
	object-fit: contain;
}

.customizeAvatarItem.selected {
	border-color: #72cf56;
	box-shadow: inset 0 0 0 2px #72cf56;
}

#allianceButton {
	right: 270px;
}

#allianceButton.editorModeButton {
	border: 2px solid #111;
	border-radius: 7px;
	background: #05a9d6;
	box-shadow: 0 3px 0 rgba(0, 0, 0, .4);
}

#leaderboardButton {
	display: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
}

#leaderboardButton:focus {
	outline: none !important;
}

#storeButton {
    right: 330px;
}

#chatButton {
    right: 390px;
}

#adminPanelToggle {
	right: 450px;
	z-index: 21;
}

#storeMenu {
	display: none;
	width: 100%;
	position: absolute;
	text-align: center;
	top: 50%;
	-ms-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	pointer-events: none;
	animation: open-back-middle 200ms 1 ease;
    animation-fill-mode: forwards;
}

#storeHolder {
	pointer-events: all;
	width: 600px;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
	background-color: rgba(0, 0, 0, 0.25);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	color: #fff;
	padding: 10px;
    height: 400px;
	max-height: calc(100vh - 200px);
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    backdrop-filter: blur(var(--glass-frames-blur));
    -webkit-backdrop-filter: blur(var(--glass-frames-blur));
	text-shadow: var(--text-shadow);
}

.storeTab {
	width: 50px;
    height: 50px;
	font-size: 26px;
	display: inline-block;
	background-color: rgba(0, 0, 0, 0.25);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	color: #fff;
    padding: 0px;
	pointer-events: all;
    cursor: url(../img/cursors/pointer.png), auto;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.storeTab:hover {
	background-color: rgba(50, 50, 50, 0.25);
}

#avatars {
    background-image: url(../img/icons/avatars.png);
}

#hats {
    background-image: url(../img/icons/hats.png);
}

#accessories {
    background-image: url(../img/icons/accessories.png);
}

#gloves {
    background-image: url(../img/icons/gloves.png);
}

.storeItem {
    display: inline-flex;
    width: 45%;
    height: 50px;
	color: #fff;
    padding: 10px;
    font-size: 14px;
	text-align: left;
    cursor: url(../img/cursors/pointer.png), auto;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.itemPrice {
	margin-top: 5px;
	float: right;
	display: inline-block;
	color: rgba(255, 255, 255, 0.5);
	font-size: 24px;
	padding-right: 5px;
}

.hatPreview {
	margin-top: -5px;
	width: 45px;
	height: 45px;
	display: inline-block;
	vertical-align: middle;
	padding-right: 10px;
}

#allianceMenu {
    display: none;
    width: 100%;
    position: absolute;
    text-align: center;
    top: 50%;
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    pointer-events: none;
    animation: open-back-middle 200ms 1 ease;
    animation-fill-mode: forwards;
}

#allianceHolder {
    pointer-events: all;
    max-height: 200px;
    overflow-y: scroll;
    width: 350px;
    display: inline-block;
    text-align: left;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.25);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    backdrop-filter: blur(var(--glass-frames-blur));
    -webkit-backdrop-filter: blur(var(--glass-frames-blur));
	text-shadow: var(--text-shadow);
}

.allianceItem {
	font-size: 24px;
	color: #fff;
	padding: 5px;
}

.joinAlBtn {
	float: right;
	font-size: 24px;
	text-align: right;
	cursor: url(../img/cursors/pointer.png), auto;
	color: #80eefc;
}

.joinAlBtn:hover {
	color: #72d3e0;
}

.notificationText {
	vertical-align: top;
	font-size: 25px;
	color: #fff;
	display: inline-block;
	text-shadow: var(--text-shadow);
}

.notifButton {
	padding: 5px;
	margin-left: 10px;
	display: inline-block;
	cursor: url(../img/cursors/pointer.png), auto;
	pointer-events: all;
	background-color: rgba(0, 0, 0, 0.25);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

.notifButton:hover {
	background-color: rgba(50, 50, 50, 0.25);
}

#notificationDisplay {
	vertical-align: top;
	position: absolute;
	right: 270px;
	top: 80px;
	text-align: right;
}

#commandNotificationDisplay {
	display: none;
	position: fixed;
	top: 18px;
	left: 50%;
	transform: translateX(-50%);
	max-width: min(520px, calc(100vw - 24px));
	padding: 10px 16px;
	z-index: 100;
	box-sizing: border-box;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 6px;
	color: #fff;
	font-size: 15px;
	line-height: 1.3;
	text-align: center;
	pointer-events: none;
	background: rgba(30, 35, 42, 0.94);
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
}

#commandNotificationDisplay.success {
	border-color: rgba(126, 229, 89, 0.8);
}

#commandNotificationDisplay.error {
	border-color: rgba(241, 72, 77, 0.85);
}

.allianceButtonM {
	pointer-events: all;
    cursor: url(../img/cursors/pointer.png), auto;
	margin-top: 10px;
	font-size: 24px;
	color: #fff;
	padding: 5px;
	background-color: rgba(0, 0, 0, 0.25);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	padding: 5px;
	text-align: center;
	display: inline-block;
	text-shadow: var(--text-shadow);
}

.allianceButtonM:hover {
	background-color: rgba(50, 50, 50, 0.25);
}

#allianceInput {
	pointer-events: all;
	font-size: 24px;
	color: #fff;
	padding: 5px;
	background-color: rgba(0, 0, 0, 0.25);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	padding: 5px;
	display: inline-block;
	outline: none;
	border-color: none;
	border: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
	width: 200px;
	margin-right: 10px;
    cursor: url(../img/cursors/text.png), auto;
}

#itemInfoHolder {
    max-width: 250px;
    display: none;
    position: absolute;
    top: 75px;
    left: 20px;
}

#itemInfoHolder.visible {
	display: block;
}

#itemInfoName {
	font-size: 30px;
}

#itemInfoDesc {
	font-size: 22px;
	color: rgba(255, 255, 255, 0.6);
}

.itemInfoReq {
    font-size: 22px;
}

.itemInfoReqVal {
	font-size: 22px;
	color: rgba(255, 255, 255, 0.6);
}

.itemInfoLmt {
	font-size: 22px;
	position: absolute;
	right: 10px;
	bottom: 6px;
}

#weaponUpgradeSlider {
	-webkit-appearance: none;
	appearance: none;
	height: 6px;
	background: linear-gradient(135deg, #e8e8e8 0%, #d8d8d8 100%);
	border-radius: 3px;
	outline: none;
	cursor: url(../img/cursors/pointer.png), auto;
	border: 1px solid #d0d0d0;
}

#weaponUpgradeSlider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	background: linear-gradient(to bottom, #7ee559, #6fc94e);
	border-radius: 50%;
	cursor: url(../img/cursors/pointer.png), auto;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	transition: all 0.2s ease;
	border: 2px solid #5fb03d;
}

#weaponUpgradeSlider::-webkit-slider-thumb:hover {
	background: linear-gradient(to bottom, #6fc94e, #5fb03d);
	transform: scale(1.1);
}

#weaponUpgradeSlider::-moz-range-thumb {
	width: 16px;
	height: 16px;
	background: linear-gradient(to bottom, #7ee559, #6fc94e);
	border-radius: 50%;
	cursor: url(../img/cursors/pointer.png), auto;
	border: 2px solid #5fb03d;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	transition: all 0.2s ease;
}

#weaponUpgradeSlider::-moz-range-thumb:hover {
	background: linear-gradient(to bottom, #6fc94e, #5fb03d);
	transform: scale(1.1);
}

.leaderboardEntry {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	background: #fff;
	border-radius: 6px;
	border: 1px solid #e0e0e0;
	-webkit-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

.leaderboardEntry:hover {
	background: #f9fff7;
	border-color: rgba(126, 229, 89, 0.4);
	transform: translateX(2px);
}

.leaderRank {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	background: linear-gradient(to bottom, #7ee559, #6fc94e);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	border-radius: 50%;
	-webkit-flex-shrink: 0;
	flex-shrink: 0;
}

.leaderName {
	flex: 1;
	font-size: 14px;
	color: #333;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#menuLeaderboard::-webkit-scrollbar {
	width: 6px;
}

#menuLeaderboard::-webkit-scrollbar-track {
	background: #e8e8e8;
	border-radius: 3px;
}

#menuLeaderboard::-webkit-scrollbar-thumb {
	background: #7ee559;
	border-radius: 3px;
}

#menuLeaderboard::-webkit-scrollbar-thumb:hover {
	background: #6fc94e;
}

#spectateButton i {
	color: inherit;
}

#ageBarContainer {
	position: absolute;
	width: 100%;
	bottom: 93px;
	text-align: center;
}

#ageText {
	position: absolute;
    width: 100%;
    bottom: 118px;
    text-align: center;
    color: #fff;
    font-size: 24px;
}

#ageBar {
	background-color: rgba(0, 0, 0, 0.25);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	padding: 5px;
	width: 314px;
	max-width: calc(100vw - 300px);
	height: 10px;
	display: inline-block;
    backdrop-filter: blur(var(--glass-frames-blur));
    -webkit-backdrop-filter: blur(var(--glass-frames-blur));
}

#ageBarBody {
	background-color: rgba(255, 255, 255, 1);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 2px;
    width: 0px;
    height: 100%;
    -webkit-transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

div#upgradeHolder.hasUpgrades {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

div#upgradeCounter.hasUpgrades {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

div#upgradeHolder.upgradesExiting {
	opacity: 1;
	transform: translateY(var(--upgrade-hidden-offset));
	pointer-events: none;
	transition: transform var(--upgrade-slide-ms) ease-in, opacity 0s linear;
}

div#upgradeCounter.upgradesExiting {
	opacity: 1;
	transform: translateY(var(--upgrade-hidden-offset));
	pointer-events: none;
	transition: transform var(--upgrade-slide-ms) ease-in, opacity 0s linear;
}

#upgradeHolder {
	width: 100%;
    position: absolute;
    text-align: center;
    top: 10px;
}

#upgradeCounter {
    width: 100%;
    position: absolute;
    top: 95px;
    text-align: center;
    font-size: 24px;
    color: #fff;
}

#gameCanvas {
	width: 100%;
    height: 100%;
    background-image: none;
    background-size: cover;
    background-position: center;
    background-color: #b6db66;
    z-index: 1;
}

#diedText {
	/*background-image: url(../img/ui/defeat.png);*/
    background-repeat: no-repeat;
    background-position: center;
    background-position-y: 50%;
    background-size: 0%;
	display: none;
    font-size: 0px;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.25);
    width: 100%;
	position: absolute;
	text-align: center;
	top: 50%;
	transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	pointer-events: none;
    animation: growText 3s ease forwards;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
}

#pre-content-container {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: 100%;
	background: rgba(0, 0, 0, 0.8);
	z-index: 1000;
}

#pre-content-player {
	position: absolute;
	width: 640px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

#post-ad-join {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);

	width: 100px;
	height: 100px;
	background: red;
}

#force-skip-ad {
	position: absolute;
	top: 8px;
	left: 8px;
}

#vignette {
    top: 0px;
    left: 0px;
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
}

#hoverDisplay {
    display: none;
    position: absolute;
    width: 350px;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.25);
    padding: 10px;
    border-radius: 4px;
    pointer-events: none;
    animation: open-back 200ms 1 ease;
    animation-fill-mode: forwards;
    backdrop-filter: blur(var(--glass-frames-blur));
    -webkit-backdrop-filter: blur(var(--glass-frames-blur));
	text-shadow: var(--text-shadow);
}

.hoverImg {
    vertical-align: top;
    position: relative;
    height: 150px;
    width: 100%;
    object-fit: contain;
    animation: itemimg 1s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

.hoverInfo {
    vertical-align: top;
    display: inline-block;
    margin-left: 10px;
}

.hoverTitle {
    width: 340px;
    margin-top: 0px;
    vertical-align: top;
    color: #fff;
    font-size: 25px;
}

.hoverDescLight {
    width: 340px;
    margin-top: 0px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 20px;
}

/* MOBILE */
@media only screen and (max-width: 896px) {

  #leaderboard {
		top: 8px;
		right: 8px;
		max-height: calc(100vh - 210px);
		width: 180px;

		font-size: 24px;
		pointer-events: all;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
	}


	#leaderboard.is-showing {
		display: block;
	}

	#leaderboardData, .leaderHolder, .leaderboardItem, .leaderScore {
		font-size: 18px;
	}

	.leaderScore {
		margin-left: 0;
	}
}

/* PORTRAIT */

@media only screen and (max-width: 480px) {
	#storeButton {
		top: 8px;
		left: 78px;
	}
	#allianceButton {
		top: 8px;
		left: 126px;
	}

	#leaderboardButton {
		top: 8px;
		left: 174px;
	}

	#gameName {
		font-size: 60px;
	}

	.storeTab {
		width: 153px;
		font-size: 24px;
	}

	#storeHolder {
		width: 340px;
	}

	#upgradeHolder {
		width: 80%;
		top: 50%;
		left: 10%;
		margin-top: -40px;
	}

	#upgradeCounter {
		top: 50%;
		margin-top: -70px;
		background-color: rgba(50, 50, 50, 0.5);
	}

	#upgradeHolder .actionBarItem {
		width: 66px;
		height: 66px;
	}
}

.grecaptcha-badge {
	visibility: collapse !important;
	opacity: 0 !important;
}

#touch-controls-left,
#touch-controls-right,
#touch-controls-fullscreen {
	position: absolute;
	width: 50%;
	height: 100%;
	top: 0;
	bottom: 0;
	display: none;
}

#touch-controls-fullscreen {
	width: 100%;
}

#touch-controls-right {
	left: 50%;
}

#bottomContainer {
	/* position: absolute;
	bottom: 0;
	left: 0;
	right: 0; */
}

#serverSelect {
    width: 100%;
    height: 24px;
}

.actionBarItem.variantReady {
    animation: variantGlow 1.5s ease-in-out infinite;
    border-color: #FFD700;
    background-color: rgb(255 235 59 / 75%);
}

.actionBarItem.variantReady:hover {
    background-color: rgb(255 235 59 / 100%);
}

#variantPickerHolder {
    position: absolute;
    bottom: 165px;
    left: 50%;
    z-index: 100;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    padding: 8px 10px 6px;
    pointer-events: all;
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateX(-50%);
}

.variantPickerTitle {
    font-size: 30px;
    color: white;
    margin-bottom: 6px;
}

.variantPickerRow {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    gap: 8px;
}

.variantOptionContainer {
    display: inline-block;
    text-align: center;
    cursor: url(../img/cursors/pointer.png), auto;
    justify-items: center;
}

.variantOption {
    width: 100px;
    height: 100px;
    background-color: rgb(255 255 255 / 25%);
    border-radius: 4px;
    cursor: url(../img/cursors/pointer.png), auto;
    pointer-events: all;
    background-position: center;
    background-size: cover;
}

.variantOption:hover {
    background-color: rgb(255 255 255 / 50%);
}

.variantLabel {
    font-size: 20px;
    color: white;
    margin-top: 3px;
}

.variantEffect {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.5);
}

#logoGame {
	width: 350px;
}

.join-discord-text>.text {
    position: absolute;
    bottom: 7.25rem;
    left: 50%;
    pointer-events: none;
    z-index: 51;
    font-size: 1.75rem;
    animation: join-discord-text-animation .5s infinite alternate;
    transition: bottom calc(1s * 0.5) cubic-bezier(.16,1,.3,1);
    color: #fff;
    text-shadow: var(
    --text-shadow);
}

.join-discord-text[data-is-active=false]>.text {
    bottom: -6rem
}

.join-discord-text>.arrow {
    position: absolute;
    pointer-events: none;
    bottom: 6.25rem;
    left: 50%;
    transform: translateX(-450%);
    z-index: 51;
    font-size: 1.75rem;
    width: 4.5rem;
}

.join-discord-text[data-is-active=false]>.arrow {
    bottom: -6rem
}

/* TABLET / MEDIUM SCREENS (897px - 1024px) */
@media only screen and (min-width: 600px) and (max-width: 1200px) {
	#performanceDisplay {
        top: -5px;
        transform: scale(0.75);
	}

	#hoverDisplay {
		opacity: 0;
	}
	
	#mapDisplayHolder {
	}
	
	#mapDisplayHolder::after {
	}

	#itemInfoHolder {
    	transform: translate(-50%, -50%);
    	left: 50%;
    	top: 50%;
	}

	#leaderboard {
        width: 150px;
        font-size: 10px;
        padding: 5px;
    	padding-top: 7px;
    	padding-bottom: 5px;
	}

	#mapDisplay {
    	height: 75px;
	}

	.leaderHolder {
        height: 14px;
	}

	.leaderboardItem {
    	height: 75%;
	}

	.leaderPlayerIcon {
        transform: translateY(-50%) scale(0.5);
        left: 72%;
	}

	.leaderEntry {
    	margin-bottom: 2px;
        width: 83%;
	}

	#ageText {
    	transform: scale(0.65);
    	bottom: 80px;
	}
	
	#actionBar {
        transform: scale(0.9);
        bottom: 0px;
    }

	#ageBarContainer {
        transform: scale(0.5);
        bottom: 65px;
	}

	#resDisplay {
    	transform: scale(0.5) translate(-50%, 50%);
	}

	#allianceMenu {
    	transform: scale(0.5) translateY(-100%);
    	animation: open-back-middle-mobile 200ms 1 ease;
	}

	#storeMenu {
    	transform: scale(0.5) translateY(-100%);
    	animation: open-back-middle-mobile 200ms 1 ease;
	}

	#menuContainer {
    	transform: scale(0.5) translateY(-100%);
	}

	#linksContainer2 {
    	font-size: 15px;
	}

	.menuLink {
    	font-size: 15px;
	}

	#logoGame {
    	width: 400px;
	}

	#upgradeHolder {
	}
	
	#upgradeCounter {
	}

	#chatHolder {
		width: 200px;
	}

	#chatFrame {
    	height: 80px;
	}

	#allianceButton {
    	right: 10px;
    	top: auto;
    	bottom: 10px;
	}

	#storeButton  {
        right: 10px;
        top: auto;
        bottom: 65px;
	}

	#chatButton {
        right: 10px;
        top: auto;
        bottom: 120px;
	}

	#adminPanelToggle {
		right: 10px;
		top: auto;
		bottom: 175px;
	}

	#adminCommandPanel {
		max-height: calc(100vh - 24px);
	}

	#timeDisplay {
	}
}

/* VERY LARGE SCREENS (1600px+) — scale up UI slightly */
@media only screen and (min-width: 1600px) {
	
}

/* Texture pack builder */
#textureBuilderTabs { display:flex; gap:5px; overflow-x:auto; padding:5px 0 9px; }
#textureBuilderTabs button { flex:0 0 auto; border:0; border-radius:4px; padding:5px 8px; background:#262b23; color:#fff; font:700 13px inherit; cursor:pointer; }
#textureBuilderTabs button.active { color:#f4d52c; background:#171b16; }
.textureBuilderPanel { background:#242922; border:1px solid #161a15; border-radius:9px; padding:8px; }
.textureRuleList { display:grid; gap:6px; max-height:180px; overflow:auto; margin-bottom:8px; }
.textureImportRow { display:flex; gap:5px; flex-wrap:wrap; margin:6px 0; }
.textureImportRow input[type="url"] { flex:1 1 180px; min-width:0; }
.textureImportRow input, .textureImportRow button, .textureBuilderFooter input, #textureBuilderTabs button { font-family:inherit; }
.textureHudGrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.textureHudField { min-width:0; display:grid; grid-template-columns:38px minmax(0,1fr); grid-template-rows:auto auto; align-items:center; gap:3px 7px; padding:6px; border:1px solid #171a16; border-radius:8px; background:#20251f; font-size:12px; font-weight:bold; }
.textureHudField > span { grid-column:2; grid-row:1; }
.textureHudField > input { grid-column:2; grid-row:2; width:100%; min-width:0; height:25px; box-sizing:border-box; }
.textureHudField > select { grid-column:2; grid-row:2; width:100%; min-width:0; height:38px; box-sizing:border-box; padding:6px 9px; border:2px solid #11170f; border-radius:6px; background:#eee8d5!important; color:#22271f!important; font:600 14px "Hammersmith One",Ubuntu,sans-serif; }
.textureHudField > select option { background:#eee8d5; color:#22271f; }
.textureHudField > input[type="color"] { grid-column:1; grid-row:1 / span 2; height:38px; padding:2px; cursor:pointer; }
.textureHudField > input[type="file"] { font-size:10px; }
.textureBuilderFooter { display:flex; gap:6px; margin-top:8px; }
.textureBuilderFooter input { width:30%; min-width:0; }
#texturePackMessage { min-height:16px; margin-top:5px; font-size:12px; }
@media (max-width:560px) { .textureHudGrid { grid-template-columns:1fr; } }
#hudFontName { grid-column:2; grid-row:2; }
#hudFontFile { grid-column:1 / span 2; grid-row:3; width:100%; }
#textureBuilderTabs button { font-family:"Hammersmith One", sans-serif; font-size:13px; font-weight:700; }

/* Standalone, high-contrast texture pack window */
#texturePackOpenButton { width:100%; padding:9px 12px; border:1px solid #a9c763; border-radius:6px; background:#34452d; color:#fff; font-weight:700; cursor:pointer; }
#texturePackModal { display:none; position:fixed; inset:0; z-index:100000; align-items:center; justify-content:center; padding:2vh 2vw; box-sizing:border-box; background:rgba(8,12,8,.84); }
#texturePackModal.open { display:flex; }
.texturePackWindow { width:min(1500px,96vw); height:min(940px,96vh); display:flex; flex-direction:column; overflow:hidden; box-sizing:border-box; border:2px solid #141912; border-radius:14px; background:#20271f; color:#f5f3e9; box-shadow:0 18px 70px rgba(0,0,0,.65); font-family:"Hammersmith One",Ubuntu,sans-serif; }
.texturePackWindowHeader { display:flex; flex:0 0 auto; align-items:center; gap:16px; min-height:54px; padding:8px 16px; box-sizing:border-box; background:#293126; border-bottom:2px solid #11170f; }
.texturePackWindowHeader h2 { flex:1; margin:0; color:#fff!important; font-size:clamp(20px,3vw,32px); font-weight:900; letter-spacing:.04em; text-shadow:2px 2px #111; }
.texturePackWindowHeader select { width:min(280px,38vw); padding:9px 12px; border:2px solid #11170f; border-radius:7px; background:#eee8d5; color:#20251f!important; font:700 15px inherit; }
.texturePackClose { width:44px; height:44px; flex:0 0 44px; padding:0; border:2px solid #111; border-radius:9px; background:#d5dfc3; color:#171b15!important; font:900 36px/36px Arial,sans-serif; cursor:pointer; }
.texturePackClose:hover { background:#fff; transform:scale(1.04); }
#customTexturePack { display:block!important; flex:1; min-height:0; overflow:auto; box-sizing:border-box; padding:0 16px 14px!important; color:#f5f3e9!important; }
#textureBuilderTabs { position:sticky; top:0; z-index:2; gap:7px; padding:10px 0 12px; background:#20271f; }
#textureBuilderTabs button { padding:8px 12px; border:1px solid #11170f; border-radius:6px; background:#394334; color:#fff!important; font:700 15px "Hammersmith One",Ubuntu,sans-serif; text-shadow:1px 1px #111; }
#textureBuilderTabs button.active { background:#e5c92b; color:#202016!important; text-shadow:none; }
.textureBuilderPanel { padding:12px; border:2px solid #11170f; border-radius:11px; background:#293126; color:#f5f3e9!important; }
.textureBuilderPanel, .textureBuilderPanel * { color:inherit; }
.textureBuilderPanel input, .textureBuilderPanel select { min-height:38px; padding:7px 10px; box-sizing:border-box; border:2px solid #11170f; border-radius:6px; background:#eee8d5; color:#22271f!important; font:600 14px "Hammersmith One",Ubuntu,sans-serif; }
.textureBuilderPanel input::placeholder, .textureBuilderFooter input::placeholder { color:#66685e!important; opacity:1; }
.textureBuilderPanel button, .textureBuilderFooter button { min-height:38px; padding:7px 12px; border:2px solid #11170f; border-radius:6px; background:#a8cb53; color:#171b12!important; font:700 14px "Hammersmith One",Ubuntu,sans-serif; cursor:pointer; }
.textureBuilderPanel button:hover, .textureBuilderFooter button:hover { background:#c5e875; }
.textureRuleList { max-height:min(34vh,360px); color:#fff!important; }
.textureRuleList > div { min-height:48px; padding:4px; border:1px solid #454d40; border-radius:6px; color:#fff!important; }
.textureRuleList span { color:#fff!important; }
.textureRuleList img { flex:0 0 38px; }
.textureHudGrid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.textureHudField { min-height:65px; padding:9px; border:2px solid #11170f; border-radius:10px; background:#293126; color:#fff!important; font-size:14px; }
.textureHudField > span { color:#fff!important; text-shadow:1px 1px #111; }
.textureHudField > input[type="color"] { width:48px; height:48px; background:#161b15; }
.textureHudField > input[type="number"] { color:#222!important; }
.textureHudField:has(#hudCollisionOpacity) { grid-template-columns:38px minmax(0,1fr) auto; }
.textureHudField:has([data-hud-range]) { grid-template-columns:38px minmax(0,1fr) auto; }
.textureHudField > input[type="range"] { accent-color:#a8cb53; cursor:pointer; }
.textureHudField > output { grid-column:3; grid-row:2; color:#d6d1b9!important; font-size:12px; }
.textureHudSubheading { grid-column:1 / -1; padding:7px 2px 0; border-top:1px solid #59634f; color:#e7d644!important; font-size:15px; font-weight:900; }
.textureHudField:has(#hudCameraSmoothing) { grid-template-columns:minmax(0,1fr) auto; }
.textureHudField:has(#hudCameraSmoothing) > span { grid-column:1 / -1; }
.textureHudField:has(#hudCameraSmoothing) > input { grid-column:1; }
.textureHudField:has(#hudCameraSmoothing) > output { grid-column:2; }
.textureHudToggleField { display:grid; grid-template-columns:38px minmax(0,1fr); grid-template-rows:auto auto; align-items:center; gap:3px 7px; }
.textureHudToggleField > button { grid-column:2; grid-row:2; min-height:30px; border:2px solid #bd3434; border-radius:6px; background:#4b2424; color:#fff!important; font-weight:700; cursor:pointer; }
.textureHudToggleField > button[aria-pressed="true"] { border-color:#92bd3d; background:#49652c; }
#hudFontName { width:100%; }
#hudFontFile { color:#222!important; }
.textureBuilderFooter { position:sticky; bottom:-14px; z-index:2; display:flex; gap:8px; padding:10px 0 0; background:#20271f; }
.textureBuilderFooter input { width:min(260px,30%); min-height:40px; padding:8px 10px; box-sizing:border-box; border:2px solid #11170f; border-radius:6px; background:#eee8d5; color:#22271f!important; font:600 14px "Hammersmith One",Ubuntu,sans-serif; }
#texturePackMessage { color:#f4dc73!important; font-size:14px; font-weight:700; }
@media (max-width:700px) { #texturePackModal { padding:0; } .texturePackWindow { width:100vw; height:100vh; max-height:100vh; border-radius:0; } .texturePackWindowHeader { gap:8px; padding:7px 10px; } .texturePackWindowHeader h2 { font-size:20px; } .texturePackWindowHeader select { width:38vw; font-size:12px; } #customTexturePack { padding:0 10px 12px!important; } .textureHudGrid { grid-template-columns:1fr; } .textureBuilderFooter input { width:30%; } #textureBuilderTabs button { padding:7px 9px; font-size:13px; } }
.texturePackWindowHeader select { font-family:"Hammersmith One",Ubuntu,sans-serif; font-size:15px; font-weight:700; }
.texturePackModal, #texturePackModal { background:transparent!important; }
.texturePackWindow { border:0; border-radius:0; background:transparent; box-shadow:none; }
.texturePackWindowHeader { background:transparent; border:0; }
#customTexturePack { background:transparent; }
#textureBuilderTabs { background:transparent; }
.textureBuilderFooter { background:transparent; }
.textureBuilderPanel { background:transparent; border-color:rgba(10,14,10,.78); }
.textureIconGrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(116px,1fr)); gap:10px; max-height:min(65vh,650px); overflow:auto; padding:6px; }
.textureIconTile { display:flex; min-height:126px; flex-direction:column; align-items:center; justify-content:center; gap:7px; padding:8px; border:2px solid rgba(15,20,15,.86)!important; border-radius:10px!important; background:rgba(35,43,34,.88)!important; color:#fff!important; text-align:center; cursor:pointer; }
.textureIconTile:hover { background:rgba(74,91,59,.95)!important; transform:translateY(-2px); }
.textureIconPreview { display:flex; width:88px; height:88px; align-items:center; justify-content:center; border-radius:7px; background:rgba(12,16,12,.65); }
.textureIconPreview canvas,.textureIconPreview img { max-width:82px; max-height:82px; object-fit:contain; }
.textureShapeEditor { padding:12px; border:2px solid rgba(15,20,15,.85); border-radius:12px; background:rgba(30,37,29,.93); color:#fff; }
.textureShapeHeader,.textureShapeTools,.textureShapeActions,.textureEditorModes { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.textureShapeHeader { justify-content:space-between; margin-bottom:10px; }
.textureShapeHeader h3 { margin:0; color:#fff; }
.textureShapeTools { margin-bottom:10px; }
.textureShapeWorkarea { display:grid; grid-template-columns:minmax(160px,220px) minmax(0,1fr); gap:12px; }
.textureShapeLayers { display:flex; flex-direction:column; gap:8px; padding:10px; border:1px solid #11170f; border-radius:8px; background:rgba(16,21,16,.8); }
.textureShapeLayers label { display:flex; flex-direction:column; gap:4px; color:#fff!important; }
#textureShapeLayerList { display:flex; max-height:190px; flex-direction:column; gap:4px; overflow:auto; }
#textureShapeLayerList button { min-height:32px; text-align:left; }
#textureShapeLayerList button.active,.textureEditorModes button.active { background:#e5c92b!important; }
#textureShapeCanvas { width:100%; height:auto; max-height:62vh; border:1px solid #62695c; border-radius:8px; background-color:#e9e7d8; background-image:linear-gradient(45deg,#d6d4c7 25%,transparent 25%),linear-gradient(-45deg,#d6d4c7 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d6d4c7 75%),linear-gradient(-45deg,transparent 75%,#d6d4c7 75%); background-size:24px 24px; background-position:0 0,0 12px,12px -12px,-12px 0; touch-action:none; }
.textureShapeActions { justify-content:flex-end; margin-top:12px; }
.textureCodeEditor { margin-top:8px; }
.textureSvgActions { display:flex; align-items:center; gap:8px; margin:8px 0; }
.textureSvgActions button { padding:8px 12px; border:2px solid #11170f; border-radius:7px; background:#a8cb53; color:#fff; font-weight:800; cursor:pointer; }
.textureSvgPreview { display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin:10px 0; color:#fff; font-weight:700; }
#textureSvgPreviewCanvas { display:block; width:min(100%,460px); height:auto; max-height:35vh; aspect-ratio:5/4; object-fit:contain; border:1px solid #62695c; border-radius:7px; background-color:#aaa; background-image:linear-gradient(45deg,#999 25%,transparent 25%),linear-gradient(-45deg,#999 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#999 75%),linear-gradient(-45deg,transparent 75%,#999 75%); background-size:20px 20px; background-position:0 0,0 10px,10px -10px,-10px 0; pointer-events:none; }
.textureCodeEditor label { display:block; margin-bottom:7px; color:#fff!important; }
#textureShapeCode { width:100%; min-height:360px; box-sizing:border-box; padding:12px; border:2px solid #11170f; border-radius:7px; background:#151a15; color:#ddf1ce!important; font:13px/1.45 Consolas,monospace; }
@media (max-width:700px) { .textureShapeWorkarea { grid-template-columns:1fr; } #textureShapeCanvas { max-height:48vh; } .textureIconGrid { grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); } }

/* Figma-like vector artboard and floating tool dock */
.textureCanvasStage { position:relative; min-width:0; min-height:460px; display:flex; align-items:center; justify-content:center; padding:10px 10px 58px; overflow:hidden; border:1px solid rgba(0,0,0,.5); border-radius:10px; background:#777; }
#textureShapeCanvas { display:block; width:min(100%,900px); height:auto; max-height:70vh; aspect-ratio:5/4; object-fit:contain; border:0; border-radius:4px; background-color:#aaa; background-image:linear-gradient(45deg,#999 25%,transparent 25%),linear-gradient(-45deg,#999 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#999 75%),linear-gradient(-45deg,transparent 75%,#999 75%); background-size:20px 20px; background-position:0 0,0 10px,10px -10px,-10px 0; box-shadow:0 2px 12px rgba(0,0,0,.2); touch-action:none; }
.vectorToolDock { position:absolute; z-index:4; left:50%; bottom:10px; transform:translateX(-50%); display:flex; align-items:center; gap:3px; max-width:calc(100% - 20px); padding:5px; overflow:visible; border:1px solid #34383d; border-radius:15px; background:rgba(34,37,40,.96); box-shadow:0 4px 18px rgba(0,0,0,.4); }
.vectorToolDock button { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:32px; padding:5px 9px; border:0; border-radius:6px; background:transparent; color:#f4f5f6; font-size:12px; line-height:1; white-space:nowrap; box-shadow:none; text-shadow:none; }
.vectorToolDock button:hover { background:#444a50; color:#fff; }
.vectorToolDock button.active { background:#168bea; color:white; }
.vectorMoreWrap { position:relative; }
#vectorMoreMenu { position:absolute; right:0; bottom:calc(100% + 9px); display:grid; min-width:140px; padding:5px; border:1px solid #555b60; border-radius:9px; background:#25292d; box-shadow:0 5px 18px rgba(0,0,0,.45); }
#vectorMoreMenu[hidden] { display:none; }
#vectorMoreMenu button { justify-content:flex-start; }
@media (max-width:760px) { .textureCanvasStage { min-height:320px; padding:6px 6px 54px; } #textureShapeCanvas { max-height:52vh; } .vectorToolDock { gap:1px; padding:4px; } .vectorToolDock button { min-height:30px; padding:5px 6px; font-size:11px; } }
.texturePackWindow { width:min(1120px,94vw); height:min(800px,90vh); border:2px solid #141912; border-radius:12px; background:#20271f; box-shadow:0 18px 70px rgba(0,0,0,.65); }
.texturePackWindowHeader { background:#293126; border-bottom:2px solid #11170f; }
#texturePackModal { background:transparent!important; padding:5vh 3vw; }
@media (max-width:700px) { .texturePackWindow { width:94vw; height:90vh; max-height:90vh; border-radius:12px; } #texturePackModal { padding:5vh 3vw; } }
.textureHudToggle { display:flex; align-items:center; gap:10px; margin:0 0 10px; padding:12px 14px; border:2px solid #11170f; border-radius:10px; background:#293126; color:#fff!important; font-size:15px; font-weight:700; }
.textureHudToggle input { width:20px; height:20px; margin:0; accent-color:#a8cb53; }
#texturePackGameButton { right:510px; z-index:21; border:0; color:#fff; background:rgba(0,0,0,.35); border-radius:6px; }
#texturePackGameButton:hover { background:rgba(80,90,70,.8); }
@media only screen and (max-width:1100px) { #texturePackGameButton { right:10px; top:auto; bottom:230px; } }
#texturePackModal .texturePackWindow, #texturePackModal .texturePackWindow * { color:#fff!important; }
#texturePackModal .texturePackWindow input:not([type="color"]), #texturePackModal .texturePackWindow select, #texturePackModal .texturePackWindow textarea { background-color:#30382e!important; color:#fff!important; }
#texturePackModal .texturePackWindow input::placeholder, #texturePackModal .texturePackWindow textarea::placeholder { color:#d2d6ca!important; opacity:1; }
#texturePackModal .texturePackWindow button { color:#fff!important; text-shadow:1px 1px #111; }
#texturePackModal .texturePackWindow button.active { color:#fff!important; }
.textureSavedPackToolbar { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.textureSavedPackImport { display:inline-flex; min-height:38px; align-items:center; padding:7px 14px; box-sizing:border-box; border:2px solid #11170f; border-radius:7px; background:#158d98; color:#fff!important; font-weight:800; text-shadow:1px 1px #111; cursor:pointer; }
.textureSavedPackImport input { display:none; }
.savedTexturePackList { display:flex; max-height:min(42vh,430px); flex-direction:column; gap:8px; overflow:auto; margin-bottom:14px; }
.savedTexturePackRow { display:flex; min-height:64px; align-items:center; gap:12px; padding:8px 12px; border:2px solid #11170f; border-radius:9px; background:rgba(28,34,27,.94); }
.savedTexturePackRow.active { border-color:#a8cb53; box-shadow:0 0 0 1px #a8cb53; }
.savedTexturePackInfo { display:flex; min-width:0; flex:1; flex-direction:column; gap:3px; }
.savedTexturePackName { overflow:hidden; color:#fff!important; font-size:16px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.savedTexturePackMeta { color:#d6d1b9!important; font-size:13px; }
.savedTexturePackActions { display:flex; flex-wrap:wrap; gap:7px; }
.savedTexturePackActions button { min-width:74px; }
.savedTexturePackActions .load { background:#92bd3d!important; }
.savedTexturePackActions .export { background:#158d98!important; }
.savedTexturePackActions .delete,.savedTexturePackActions .unload { background:#bd3434!important; }
.textureRulesHeading { margin:12px 0 8px; color:#fff!important; font-size:16px; }
.textureBuilderFooter input#texturePackVersion { width:100px; }
.textureSavedPackEmpty { padding:14px; border:1px dashed #737b68; border-radius:8px; color:#e7e5d9!important; }
/* Death stats screen */
.deathStatsScreen { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 20px; box-sizing: border-box; background: rgba(0,0,0,.58); color: #fff; font-family: "Hammersmith One", sans-serif; }
.deathStatsCard { width: min(700px,100%); max-height: calc(100vh - 40px); overflow-y: auto; box-sizing: border-box; padding: 26px 30px; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #fff; text-shadow: var(--text-shadow); }
.deathStatsEyebrow { color: #9fe7e3; font-size: 13px; font-weight: 800; letter-spacing: 2px; }
.deathStatsCard h1 { margin: 7px 0 20px; text-align: center; font-size: clamp(25px,5vw,38px); line-height: 1.12; overflow-wrap: anywhere; }
.deathStatsCard h1, .deathStatsCard h2, .deathStatsCard strong, .deathStatsCard button { font-weight: 400; }
.deathKillerPrefix, #deathKillerName { display: block; }
.deathKillerPrefix { font-size: .65em; }
#deathKillerName { font-size: 1em; }
.deathStatsHero { display: flex; align-items: center; justify-content: center; gap: 28px; margin: 8px 0 22px; }
.deathPortraitFrame { position: relative; flex: 0 0 200px; width: 200px; height: 200px; border: 4px solid #50b9b6; border-radius: 9px; background: #5bd0cb; }
#deathCharacterPortrait { position: absolute; left: 50%; top: 50%; display: block; width: 200%; height: 200%; max-width: none; object-fit: contain; animation: deathPortraitSpin 24s linear infinite; }
@keyframes deathPortraitSpin { from { transform: translate(-50%,-50%) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(360deg); } }
.deathStatsHeroDetails { display: flex; min-width: 0; flex-direction: column; gap: 3px; font-size: clamp(19px,3.2vw,27px); }
#deathPlayerName { margin-bottom: 4px; font-size: clamp(22px,4vw,30px); overflow-wrap: anywhere; }
.deathStatsHeroDetails div { display: flex; justify-content: space-between; gap: 22px; }
.deathStatsCard h2 { margin: 20px 0 10px; font-size: 19px; }
.deathStatsGrid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 20px; padding: 15px; border-radius: 10px; background: rgba(0,0,0,.38); }
.deathResourceGrid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.deathStatRow { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 1.08em; }
#deathContinue { display: block; width: auto; min-width: 150px; margin: 20px auto 0; border: 0; }
.deathStatsActions { display: flex; justify-content: center; gap: 12px; margin-top: 20px; }
.deathStatsActions .menuButton { width: auto; min-width: 140px; margin: 0; border: 0; }
.deathSpectateHud { position: fixed; z-index: 10001; top: 14px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; max-width: calc(100vw - 24px); padding: 10px 14px; border-radius: 10px; background: rgba(22,27,22,.88); color: #fff; font: 16px "Hammersmith One", sans-serif; }
.deathSpectateHud .menuButton { width: auto; min-width: 100px; margin: 0; border: 0; }
@media (max-width: 520px) { .deathStatsCard { padding: 20px 16px; } .deathStatsHero { gap: 14px; } .deathPortraitFrame { flex-basis: 150px; width: 150px; height: 150px; } .deathStatsHeroDetails { font-size: 18px; } #deathPlayerName { font-size: 20px; } .deathStatsGrid { gap: 5px 12px; padding: 12px; } .deathResourceGrid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
.texturePackMobileNotice { display:none; }
@media (max-width:700px) {
    .texturePackMobileNotice { display:block; margin:0 12px 8px; padding:10px 12px; border:1px solid #7f9c46; border-radius:8px; background:rgba(32,39,31,.92); color:#fff!important; font-size:14px; line-height:1.4; }
    #textureBuilderTabs [data-builder-tab]:not([data-builder-tab="saves"]) { display:none!important; }
    #textureCategoryPanel, #textureHudPanel { display:none!important; }
    #textureSavesPanel .textureSavedPackToolbar > #saveTexturePack,
    #textureSavesPanel .textureSavedPackToolbar > #resetTexturePack,
    #textureSavesPanel .textureRulesHeading, #textureRuleList,
    #textureSavesPanel .textureImportRow,
    .texturePackClassicToggle, .textureBuilderFooter { display:none!important; }
    #textureSavesPanel { overflow:auto; }
    .savedTexturePackRow { align-items:flex-start; flex-wrap:wrap; gap:10px; }
    .savedTexturePackActions { width:100%; }
    .savedTexturePackActions button { flex:1 1 70px; min-height:38px; }
}
.textureIconGrid { grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); align-items:start; padding-bottom:80px; }
.textureIconTile { display:grid; min-height:88px; grid-template-columns:56px minmax(0,1fr); grid-template-rows:auto auto auto; justify-content:stretch; align-items:center; gap:4px 10px; padding:8px 10px; text-align:left; }
.textureIconPreview { grid-column:1; grid-row:1 / span 3; width:56px; height:56px; }
.textureIconPreview canvas,.textureIconPreview img { max-width:52px; max-height:52px; }
.textureIconTitle { grid-column:2; grid-row:1; align-self:end; font-size:14px; font-weight:800; cursor:pointer; }
.textureIconEditRow { display:flex; min-width:0; grid-column:2; grid-row:2; align-self:start; gap:5px; }
.textureIconUrl { width:100%; min-width:0; height:28px; box-sizing:border-box; padding:4px 8px; border:2px solid #11170f; border-radius:5px; background:#eee8d5!important; color:#222!important; font:700 12px "Hammersmith One",Ubuntu,sans-serif; }
#texturePackModal .texturePackWindow .textureIconUrl { background:#eee8d5!important; color:#222!important; }
.textureIconUrl::placeholder { color:#898574!important; }
#texturePackModal .texturePackWindow .textureIconUrl::placeholder { color:#898574!important; }
.textureIconUpload { position:relative; display:flex; min-width:62px; align-items:center; justify-content:center; padding:4px 8px; overflow:hidden; border:2px solid #11170f; border-radius:5px; background:#49652c; color:#fff!important; font-size:12px; font-weight:800; cursor:pointer; }
.textureIconUpload input { position:absolute; inset:0; width:100%; height:100%; min-height:0!important; padding:0!important; box-sizing:border-box; opacity:0; cursor:pointer; }
.textureIconReset { min-width:48px; min-height:28px!important; padding:3px 6px!important; border:2px solid #11170f!important; border-radius:5px!important; background:#8c3e37!important; color:#fff!important; font-size:11px!important; }
.textureIconEditorButton { grid-column:2; grid-row:3; justify-self:start; min-height:24px!important; padding:2px 8px!important; font-size:11px!important; }
@media (max-width:700px) { .textureIconGrid { grid-template-columns:1fr; } }