.mobile-hud-container {
	margin: 8px 0;
  display: flex;
  justify-content: space-between;
  border-radius: 20px;
  border: solid 2px #fff;
  position: relative;
	height: auto;
	align-itens: center;
	background: #000000;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, 0.09) 100%);
	color: #fff;
	font-size: 48px;
}

.mobile-hud-container:after {
	position: absolute;
	content: '';
	width: calc(100% - 32px);
	left: 16px;
	height: 33%;
	background: #ffffff;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.33) 100%);
	top: 6px;
	border-radius: 8px;
	z-index: -1;
	opacity: .4;
}

.mobile-hud-container > .mobile-button {
  margin: -8px;
}

.mobile-hud-container > .mobile-button > span {
	font-size: 40px;
	top: -3px;
}

.mobile-hud-container .hud-value {
	color: #fff;
	font-size: 32px;
	font-weight: bold;
	text-align: center;
	flex: 1;
}

.mobile-button {
	position:relative;
	display: flex;
	border: 0px solid;
	border-radius: 16px;
	font-weight:bold;
	font-size: 24px;
	display:grid;
	place-items:center;
	line-height:1;
	cursor:pointer;
	user-select:none;
	padding: 16px;
	width: 100%;
	transition: all 0.2s cubic-bezier(.25,.8,.25,1);
	color:#fff;
	height: 48px;
	box-shadow:
		0 0 0 3px #000,
		0 8px 0 0 #000;
  font-family: "Cherry Bomb One", system-ui;
	font-optical-sizing: auto;
	text-shadow: rgb(119, 0, 85) 2px 0px 0px, rgb(119, 0, 85) 1.75517px 0.958851px 0px, rgb(119, 0, 85) 1.0806px 1.68294px 0px, rgb(119, 0, 85) 0.141474px 1.99499px 0px, rgb(119, 0, 85) -0.832294px 1.81859px 0px, rgb(119, 0, 85) -1.60229px 1.19694px 0px, rgb(119, 0, 85) -1.97998px 0.28224px 0px, rgb(119, 0, 85) -1.87291px -0.701566px 0px, rgb(119, 0, 85) -1.30729px -1.5136px 0px, rgb(119, 0, 85) -0.421592px -1.95506px 0px, rgb(119, 0, 85) 0.567324px -1.91785px 0px, rgb(119, 0, 85) 1.41734px -1.41108px 0px, rgb(119, 0, 85) 1.92034px -0.558831px 0px;
}

.mobile-button::before{
	content:"";
	position:absolute;
	width:calc(100% - 8px);
	height:42%;
	left:0; top:0;
	margin:4px;
	border-radius:12px;
	z-index:0;
}

.close-modal > .mobile-button {
  width: 24px;
  height: 24px;
  border-radius: 16px;
  margin: 8px 16px;
}

.mobile-button > span {
	margin: 0;
	z-index: 2;
	left: 0;
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 0;
}

.mobile-button:hover{
	filter:brightness(1.05);
}

.mobile-button:active{
	transform: translateY(6px);
	box-shadow:
		0 0 0 3px #000,
		inset 0 6px 10px rgba(0,0,0,.35);
}

.mobile-button:focus-visible{
	outline: 3px solid #000;
	outline-offset: 3px;
}

.mobile-button-green {
	background:#58980C;
	border-color:#76c91e;

	box-shadow:
		0 0 0 3px #2f5206,
		0 8px 0 0 #2f5206;

	text-shadow: #2f5206 2px 0px 0px, #2f5206 1.75517px 0.958851px 0px, #2f5206 1.0806px 1.68294px 0px, #2f5206 0.141474px 1.99499px 0px, #2f5206 -0.832294px 1.81859px 0px, #2f5206 -1.60229px 1.19694px 0px, #2f5206 -1.97998px 0.28224px 0px, #2f5206 -1.87291px -0.701566px 0px, #2f5206 -1.30729px -1.5136px 0px, #2f5206 -0.421592px -1.95506px 0px, #2f5206 0.567324px -1.91785px 0px, #2f5206 1.41734px -1.41108px 0px, #2f5206 1.92034px -0.558831px 0px;
}

.mobile-button-green:active {
	transform: translateY(6px);
	box-shadow:
		0 0 0 3px #2f5206,
		inset 0 6px 10px #2f5206;
}

.mobile-button-green::before {
	background: linear-gradient(180deg, rgba(180,220,120,1) 0%, rgba(88,152,12,1) 74%);
}

.mobile-button-gold {
	background:#d99a00;
	border-color:#ffd24d;

	box-shadow:
		0 0 0 3px #7a4d00,
		0 8px 0 0 #7a4d00;

	text-shadow: #7a4d00 2px 0px 0px, #7a4d00 1.75517px 0.958851px 0px, #7a4d00 1.0806px 1.68294px 0px, #7a4d00 0.141474px 1.99499px 0px, #7a4d00 -0.832294px 1.81859px 0px, #7a4d00 -1.60229px 1.19694px 0px, #7a4d00 -1.97998px 0.28224px 0px, #7a4d00 -1.87291px -0.701566px 0px, #7a4d00 -1.30729px -1.5136px 0px, #7a4d00 -0.421592px -1.95506px 0px, #7a4d00 0.567324px -1.91785px 0px, #7a4d00 1.41734px -1.41108px 0px, #7a4d00 1.92034px -0.558831px 0px;
}

.mobile-button-gold:active {
	transform: translateY(6px);
	box-shadow:
		0 0 0 3px #7a4d00,
		inset 0 6px 10px #7a4d00;
}

.mobile-button-gold::before {
	background: linear-gradient(180deg, rgba(255,240,130,1) 0%, rgba(217,154,0,1) 74%);
}

.mobile-button-blue {
	background:#1E90FF;
	border-color:#5AB8FF;

	box-shadow:
		0 0 0 3px #0A3D73,
		0 8px 0 0 #0A3D73;

	text-shadow: #0A3D73 2px 0px 0px, #0A3D73 1.75517px 0.958851px 0px, #0A3D73 1.0806px 1.68294px 0px, #0A3D73 0.141474px 1.99499px 0px, #0A3D73 -0.832294px 1.81859px 0px, #0A3D73 -1.60229px 1.19694px 0px, #0A3D73 -1.97998px 0.28224px 0px, #0A3D73 -1.87291px -0.701566px 0px, #0A3D73 -1.30729px -1.5136px 0px, #0A3D73 -0.421592px -1.95506px 0px, #0A3D73 0.567324px -1.91785px 0px, #0A3D73 1.41734px -1.41108px 0px, #0A3D73 1.92034px -0.558831px 0px;
}

.mobile-button-blue:active {
	transform: translateY(0px);
	box-shadow:
		0 0 0 3px #0A3D73,
		0 8px 0 0 #0A3D73;
}

.mobile-button-blue::before {
	background: linear-gradient(180deg, rgba(150,210,255,1) 0%, rgba(30,144,255,1) 74%);
}

.mobile-discord-button {
	margin: 0;
	background:#5865f2;
	border-color:#4752c4;

	box-shadow:
		0 0 0 3px #2b2f77,
		0 8px 0 0 #2b2f77;

	text-shadow: #2b2f77 2px 0px 0px, #2b2f77 1.75517px 0.958851px 0px, #2b2f77 1.0806px 1.68294px 0px, #2b2f77 0.141474px 1.99499px 0px, #2b2f77 -0.832294px 1.81859px 0px, #2b2f77 -1.60229px 1.19694px 0px, #2b2f77 -1.97998px 0.28224px 0px, #2b2f77 -1.87291px -0.701566px 0px, #2b2f77 -1.30729px -1.5136px 0px, #2b2f77 -0.421592px -1.95506px 0px, #2b2f77 0.567324px -1.91785px 0px, #2b2f77 1.41734px -1.41108px 0px, #2b2f77 1.92034px -0.558831px 0px;
}

.mobile-discord-button:active {
	transform: translateY(6px);
	box-shadow:
		0 0 0 3px #2b2f77,
		inset 0 6px 10px #2b2f77;
}

.mobile-discord-button::before {
	background: linear-gradient(180deg, rgba(120,140,255,1) 0%, rgba(88,101,242,1) 74%);
}

#discord-button {
	display: none;
}

.mobile-button-green::before{
	background:linear-gradient(180deg, rgba(185,230,13,1) 0%, rgba(133,190,19,1) 74%);
}

.mobile-button-pink {
	background:#ff00b7;
	border-color:#ff4fff;

	box-shadow:
		0 0 0 3px #770055,
		0 8px 0 0 #770055;

	text-shadow: #770055 2px 0px 0px, #770055 1.75517px 0.958851px 0px, #770055 1.0806px 1.68294px 0px, #770055 0.141474px 1.99499px 0px, #770055 -0.832294px 1.81859px 0px, #770055 -1.60229px 1.19694px 0px, #770055 -1.97998px 0.28224px 0px, #770055 -1.87291px -0.701566px 0px, #770055 -1.30729px -1.5136px 0px, #770055 -0.421592px -1.95506px 0px, #770055 0.567324px -1.91785px 0px, #770055 1.41734px -1.41108px 0px, #770055 1.92034px -0.558831px 0px;
}

.mobile-button-pink:active{
	transform: translateY(6px);
	box-shadow:
		0 0 0 3px #770055,
		inset 0 6px 10px #770055;
}

.mobile-button-red {
	background:#ff0033;
	border-color:#ff4f4f;

	box-shadow:
		0 0 0 3px #770000,
		0 8px 0 0 #770000;

	text-shadow: #770000 2px 0px 0px, #770000 1.75517px 0.958851px 0px, #770000 1.0806px 1.68294px 0px, #770000 0.141474px 1.99499px 0px, #770000 -0.832294px 1.81859px 0px, #770000 -1.60229px 1.19694px 0px, #770000 -1.97998px 0.28224px 0px, #770000 -1.87291px -0.701566px 0px, #770000 -1.30729px -1.5136px 0px, #770000 -0.421592px -1.95506px 0px, #770000 0.567324px -1.91785px 0px, #770000 1.41734px -1.41108px 0px, #770000 1.92034px -0.558831px 0px;
}

.mobile-button-red:active{
	transform: translateY(6px);
	box-shadow:
		0 0 0 3px #770000,
		inset 0 6px 10px #770000;
}

.mobile-button-red::before{
  background: linear-gradient(180deg, rgba(255,140,160,1) 0%, rgba(255,55,85,1) 74%);
}

.mobile-close-button > span {
	position: absolute;
	font-size: 34px;
	margin-top: -4px;
}

.mobile-secondary-button {
	background:#6e6e6e;
	border-color:#4f4f4f;

	box-shadow:
		0 0 0 3px #333333,
		0 8px 0 0 #333333;
}

.mobile-secondary-button:active {
	transform: translateY(6px);
	box-shadow:
		0 0 0 3px #333333,
		inset 0 6px 10px #333333;
}

.mobile-secondary-button::before {
	background: linear-gradient(180deg, rgba(200,200,200,1) 0%, rgba(120,120,120,1) 74%);
}

.mobile-button-pink:focus-visible{
	outline: 3px solid #000;
	outline-offset: 3px;
}

.mobile-button-pink::before{
	background: linear-gradient(180deg, rgba(255, 170, 255, 1) 0%, rgb(223 212 220 / 32%) 80%);
}

.mobile-button-yellow{
  background:#e0b400;
  border-color:#ffdd33;
}

.mobile-button-yellow::before{
  background:linear-gradient(180deg, rgba(255,245,180,1) 0%, rgba(224,180,0,1) 80%);
}

.mobile-button:disabled {
	opacity: .6;
	background:#6e6e6e;
	border-color:#4f4f4f;
	filter: grayscale(1);

	box-shadow:
		0 0 0 3px #333333,
		0 8px 0 0 #333333;
}

.mobile-button:disabled:before {
	background: linear-gradient(180deg, rgba(200,200,200,1) 0%, rgba(120,120,120,1) 74%);
}

.mobile-button:disabled:active {
	transform: translateY(0px);
	box-shadow:
		0 0 0 3px #333333,
		0 8px 0 0 #333333;
}

.mobile-button-small {
  width: 52px;
  height: 52px;
  font-size:16px;
  border-width:4px;
}

.mobile-button-medium {
  width:80px;
  height:80px;
  font-size:20px;
  border-width:6px;
}

.mobile-button-large {
  width:120px;
  height:120px;
  font-size:28px;
  border-width:8px;
}

.full-width-button {
	width: 100%;
	text-transform: uppercase;
}

.uppercase {
	text-transform: uppercase;
}

.mobile-input {
	position: relative;
}

.mobile-input > input, select, textarea {
	margin: 8px 0;
	display: flex;
	justify-content: space-between;
	border-radius: 8px;
	border: solid 2px #593c5d;
	position: relative;
	height: calc(100% - 20px);
	align-itens: center;
	background: #000000;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, 0.09) 100%);
	color: #fff;
}

.mobile-input > input:focus, .mobile-input > select:focus, .mobile-input > textarea:focus {
	border: solid 2px #de7feb;
}

.mobile-input:after {
	position: absolute;
	content: '';
	width: calc(100% - 16px);
	left: 8px;
	height: 33%;
	background: #ffffff;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.33) 100%);
	top: 6px;
	border-radius: 4px;
	z-index: -1;
	opacity: .3;
}

.mobile-input > select option {
  background: #111;
  color: #fff;
}

.coin {
  position: relative;
  width: 72px;
  height: 72px;
	margin: -14px;
}

.coin img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
	width: 72px;
	height: 72px;
}

.coin::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 40%,
    rgba(255,255,255,.8) 50%,
    rgba(255,255,255,0) 60%
  );
  background-size: 200% 100%;
  background-position: -150% 0;
  mix-blend-mode: screen;
  animation: shine 2.2s linear infinite;
	animation-delay: 1s;
  pointer-events: none;
  -webkit-mask: url("https://nutaku.roleplaypassion.com/images/coin.png") center/contain no-repeat;
  mask: url("https://nutaku.roleplaypassion.com/images/coin.png") center/contain no-repeat;
  mask-mode: alpha;

  z-index: 2;
}

@keyframes shine {
  to { background-position: 150% 0; }
}

.hud-icon {
	width: 56px;
	height: 56px;
	font-size: 26px;
	opacity: 0;
	transform: translateX(-100px);
}

.hud-icon > span > img {
	height: 32px;
}

.chat-buttons-controlls {
	position: absolute;
	top: 0;
	display: none;
  flex-direction: column;
	gap: 16px;
	z-index: 999;
}

.mission-chat-button-controllers {
	position: fixed;
	top: 24px;
	left: 24px;
	flex-direction: column;
	gap: 16px;
	z-index: 9999;
}

@keyframes slideInFromLeft {
	0% {
		opacity: 0;
		transform: translateX(-100px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes slideOutToLeft {
	0% {
		opacity: 1;
		transform: translateX(0);
	}
	100% {
		opacity: 0;
		transform: translateX(-100px);
	}
}

@keyframes slideInFromTop {
	0% {
		opacity: 0;
		transform: translateY(-100px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.slide-in {
	animation: slideInFromLeft 0.5s ease-out forwards;
}

.slide-out {
	animation: slideOutToLeft 0.5s ease-in forwards;
}

.slide-in-top {
	animation: slideInFromTop 0.5s ease-out forwards;
}

@media only screen and (max-width: 768px) {
	.mobile-button-green {
		margin: 10px;
		margin-top: -8px;
	}
}

@media only screen and (max-width: 599px) {
	.mobile-button-blue {
		width: 42px;
    height: 42px;
    font-size: 26px;
    border-radius: 12px;
	}
}