.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 .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:16px;
	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;
}

.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;
}

.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;
}

.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-blue {
	background:#1E90FF;
	border-color:#5AB8FF;

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

.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;
}

.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;
}

.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;
}

.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: 28px;
}

.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;

	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;
}

.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;
}

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

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