* {
	margin: 0;
	padding: 0;
	font-family: 'Rowdies', cursive;
}

html {
	overflow: hidden;
}

body {
	-webkit-touch-callout: none;
	/* iOS Safari */
	-webkit-user-select: none;
	/* Safari */
	-khtml-user-select: none;
	/* Konqueror HTML */
	-moz-user-select: none;
	/* Firefox */
	-ms-user-select: none;
	/* Internet Explorer/Edge */
	user-select: none;
	/* Non-prefixed version, currently supported by Chrome and Opera */
	overflow: hidden;
	/* Normal theme */
	background-color: #5f7739;
	/* Autumn theme */
	/* background-color: #59712b; */
	cursor:url(../img/interface/cursor-default.png) 4 0, default;

	height: 100%;
}

:root {

	--brown0 : #9e5c33;
	--brown1 : #985228;
	--brown2 : #7d4320;
	--brown3 : #613011;
	--brown4 : #49210b;
	--brown5 : #663619;
	--black  : #3a322b;
	--grey0  : #888888;
	--grey1  : #606060;
	--black0 : #2f2721;
	--black1 : #58534a;
	--white  : #ffe5c1;
	--beige  : #ddac53;
	--beige1 : #eecc9b;
	--yellow0 : #efd561;
	--yellow1 : #dec035;
	--yellow2 : #e3911c;
	--yellow3 : #dd8c21;
	--orange0 : #e28235;
	--orange1 : #ce5a28;
	--orange2 : #af3a0d;
	--green0 : #c8e653;
	--green1 : #a8c636;
	--green2 : #6e860e;
	--green3 : #86a838;
	--red0   : #d45241;
	--red1   : #b33e2e;
	--red2   : #882316;
	--gold0  : #ddab52;
}

/* vietnamese */
@font-face {
  font-family: 'Rowdies';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../font/_ptRMTieMYPNBAK219hth1Ob4KDNu.woff2) format('woff2'), url(../font/ptRMTieMYPNBAK219hth1Ob4LiFtpe4OZA.woff) format('woff');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: 'Rowdies';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../font/_ptRMTieMYPNBAK219hth1Of4KDNu.woff2) format('woff2'), url(../font/ptRMTieMYPNBAK219hth1Of4LiFtpe4OZA.woff) format('woff');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Rowdies';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../font/_ptRMTieMYPNBAK219hth1On4KA.woff2) format('woff2'), url(../font/ptRMTieMYPNBAK219hth1On4LiFtpe4.woff) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Rowdies';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../font/_ptRJTieMYPNBAK21_r9DwdbZ.woff2) format('woff2'), url(../font/ptRJTieMYPNBAK21_r9Dx8TaJQtXrA.woff) format('woff');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: 'Rowdies';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../font/_ptRJTieMYPNBAK21_r5DwdbZ.woff2) format('woff2'), url(../font/ptRJTieMYPNBAK21_r5Dx8TaJQtXrA.woff) format('woff');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Rowdies';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../font/_ptRJTieMYPNBAK21_rBDwQ.woff2) format('woff2'), url(../font/ptRJTieMYPNBAK21_rBDx8TaJQs.woff) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

option {
	font-size:12px;
}

select::-ms-expand {
	display: none;
}

select:focus {
	background:none;
	outline: none;
}

input {
	outline: none;
}

::-webkit-input-placeholder, ::-moz-placeholder, :-ms-input-placeholder, :-moz-placeholder {
	/* Chrome/Opera/Safari */
	color: var(--black);
}


#discord, #reddit, #youtube, #leaderboard-button  { display: none; }

a.social {
	width: 40px;
	height: 40px;
	margin-left:5px;
	background-size: 69%;
	background-repeat: no-repeat;
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-drag: none;
	cursor:url(../img/interface/cursor-pointer.png) 16 0, pointer;
	background-position: center 8px;
	border:6px solid var(--black);
	border-radius:13px;
}

#discord {
	background-image: url(../img/discord.png);
	background-color:#7289da;
	box-shadow: inset 0 -5px 0 #425ec1;
}

#discord:hover {
	box-shadow: inset 0 -5px 0 #5f7ee6;
	background-color:#94a8ef;
}

#discord:active {
	box-shadow: inset 0 5px 0 #2e49a2;
	background-color:#5066b5;
	background-position: center 13px;
}

#reddit {
	background-image: url(../img/reddit.png);
	background-color:#ff4500;
	box-shadow: inset 0 -5px 0 #bd3402;
}

#reddit:hover {
	box-shadow: inset 0 -5px 0 #e24d17;
	background-color:#f97241;
}

#reddit:active {
	box-shadow: inset 0 5px 0 #922801;
	background-color:#cc3903;
	background-position: center 10px;
}

#youtube {
	background-image: url(../img/youtube.png);
	background-color: #ea240a;
	box-shadow: inset 0 -5px 0 #7f282b;
}

#youtube:hover {
	box-shadow: inset 0 -5px 0 #d0311c;
	background-color: #ff3a20;
}

#youtube:active {
	box-shadow: inset 0 5px 0 #922801;
	background-color:var(--red2);
	background-position: center 10px;
}

.discord-link { color: #c1cbfd; }

.reddit-link { color: #fdac66; }

input.chat-input {
	width: 250px;
	position: absolute;
	left: 50%;
	text-align:center;
	transform: translate(-50%);
	top:60%;
	display: none;
	z-index: 2;
	padding: 5px 15px;
	height: 52px;
	border: 8px solid var(--black);
	background-color: rgb(58 50 44 / 0.5);
	border-radius: 18px;
	color: #ffe6c2;
	font-weight: 900;
	letter-spacing: 1px;
	font-size: 18px;
	cursor: url(../img/interface/cursor-text.png) 16 0, text;
}

#player-banned {
	display: none;
	position: absolute;
	z-index: 1;
	left: 280px;
	top: 110px;
}

#chat-button {
	position: absolute;
	left: calc(50% + 110px);
	top: 60%;
	z-index: 2;
	transform: translate(-50%, -50%);
	display:none;
}

#chat-send {
	position: absolute;
	left: 50%;
	top: calc(60% + 95px);
	width: 214px;
	z-index: 2;
	color: var(--white);
	transform: translate(-50%, -50%);
	border: 8px solid var(--black);
	border-radius: 15px;
	display: none;
}

.chat-button {
	align-items:center;
	height: 36px;
	width: 90px;
	display:flex;
	border: 8px solid var(--black);
	border-radius:0 13px 13px 0;
	cursor:url(../img/interface/cursor-pointer.png) 16 0, pointer;
	transition: 50ms;
	color: #f0e4d0;
}

#chat-all-button {
	background: #e3911c;
	position: absolute;
	left: 0px;
	top: 0px;
	width:100px;
}

#chat-all-button:hover {
	background: #f7b04a;
}

#chat-all-button:active {
	background: #c7790a;
}

#chat-team-button {
	background: #a8c636;
	padding-left:10px;
	position: absolute;
	left: 0px;
	top: 0px;
}

#chat-team-button:hover {
	background: #cfec5d;
}

#chat-team-button:active {
	background: #7c941d;
}

#type-icon {
	position: absolute;
	right: 30px;
	top: 5px;
}

#pets-box {
	z-index:24;
	left: calc(50% - 421px);
	top: calc(50% - 292px);
	transform: scale(0);
	padding: 20px 20px 10px 20px;
}

#policy-box {
	z-index:24;
	left: calc(50% - 386px);
	top: calc(50% - 230px);
	transform: scale(0);
}

.select-pet { height: 115px; }

.selected-pet {
	height: 100px;
	filter: drop-shadow(4px 6px 0 #3A322C);
	image-rendering: -webkit-optimize-contrast;
}

.pet-image-position {
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 83%;
}

.pet-text-position {
	font-size: 21px;
	top: 86px;
	left: 36px;
}

.show-list {
	display: flex;
	margin-top: 61px;
	justify-content: space-around;
	width: 630px;
	align-items: center;
	overflow-y: scroll;
	max-height: 300px;
	flex-wrap: wrap;
}

.show-list::-webkit-scrollbar {
	background: #7b401a;
	border-radius: 10px;
}

.show-list::-webkit-scrollbar-thumb {
	background: #4e3221;
	border-radius: 10px;
}

.grayscale { filter: grayscale(1); }

#changelog { display: none; }

#partners-box {
	z-index:22;
	width:420px;
	display: none;
	left: calc(50% - 266px);
	top: calc(50% - 253px);
	transform: scale(0);
}

#featured-video, #cross-promo {
	display: inline-block;
	background-color: var(--black);
	border: 4px solid var(--black);
	border-radius: 10px;
	margin-top: 10px;
	padding: 0 5px 5px 5px;
	color: #ffe6c2;
	width: 150px;
	position: relative;
}

#cross-promo { margin-bottom: 20px; height: 121px; }
#cross-promo h3 { margin: -3px 0 11px 0; }

#featured-video {
	margin-bottom: 10px;
	height: 111px;
}

#featured-video h4 { margin: 2px 0 11px 0; }
#featured-video img, #cross-promo img { width: 100%; height: auto; border-radius:7px; margin-top:-7px; }

.input {
	margin-top:-7px;
	width: 100%;
	text-align: center;
	height: 47px;
	font-size: 25px;
	background-color: #ffe6c2;
	border: 6px solid var(--black);
	box-shadow: inset 0 8px 0 #e0c6a0;
	color: var(--black);
	border-radius:10px;
	cursor:url(../img/interface/cursor-text.png) 16 16, text;
}

.changelog {
	width: 100%;
	margin-top:10px;
	height:40px;
	border-radius: 13px;
	border: 6px solid var(--black);
	cursor:url(../img/interface/cursor-pointer.png) 16 0, pointer;
	overflow: hidden;
	background: var(--yellow1);
	box-shadow: inset 0px 1px 0px 0px var(--black);
}

.changelog:hover { background-color: #e3911c; }
.changelog:active { background-color: #a25a01; }

#top-right-wrap h4 { font-weight: 500; color: var(--white) }

#invite-button { display: none; background: #a8c636;}
#invite-button:hover { background: #ecca2b; }
#invite-button:active { background: #bd9f13; }
#invite-button img { margin:-28px 0 0 -43px; }
#invite-button h4 { margin: -57px 0 0 17px; }

#leaderboard-button img { margin:-26px 0 0 -18px; }
#leaderboard-button h4 { margin:-51px 0 0 13px; }

#howto img { margin:-5px 0 0 -5px; }
#howto h4 { margin:-46px 0 0 18px; }

#referral-button img { margin: -8px 0 0 -9px; }
#referral-button h4 { margin:-46px 0 0 34px; }

#referral-button.alert::after { top: 347px; }

#logo {
	display:flex;
	justify-content: center;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

#logo-img {
	width:auto;
	height:100px;
	image-rendering: -webkit-optimize-contrast;
}

#ccc-left {
	position: absolute;
	top: 0;
	left: 0;
	width: 300px;
	height: 250px;
	max-width: 300px;
	max-height: 250px;
	contain: strict;
	z-index: 20;
	text-align: center;
	background:rgba(38, 47, 23, 0.42);
}

#middle-wrap, #main-wrap, #right-wrap {
	justify-content: space-between;
	flex-wrap: wrap;
}

#middle-wrap {
	display: none;
	z-index: 2;
	position: absolute;
	top: 0;
	left: 360px;
	width:700px;
	height:280px;
	transition: opacity 200ms;
}

#main-wrap {
	display:flex;
	width:60%;
	height:245px;
	flex-direction:column;

}

#right-wrap {
	font-size: 18px;
	color: #fff;
	z-index: 2;
	display: flex;
	border-radius:13px;
	width:35%;
	height:259px;
	align-items:flex-end;
}

#challenges {
	border: 6px solid var(--black);
	overflow:hidden;
	padding:0 15px 15px 15px;
	border-radius:13px;
	height:16%;
	width:100%;
	position: relative;
	cursor:url(../img/interface/cursor-pointer.png) 16 0, pointer;
	background: var(--black);
	color: #ffe6c2;
}

#chest18.alert::after {

	top: 164px;
	right: -1px;
}

#shop-cosmetics-button.alert::after {

	top: -5px;
	right: 208px;
}

#challenges.alert::after {

	top: -3px;
	right: 208px;
}

#show-events-button-member.alert::after {

	top: -20px;
	right: -15px;
}

#challenges:hover { background: #eac440; }
#challenges:active { background: #3a5c2f; }

#challenges:active #challenges-bottom { top:0px; bottom: unset; }
#challenges:active #challenges-img { margin-top:-6px; }

#challenges-img { margin: -11px 0 0 -21px; }

#challenges-text {
	margin-top: -54px;
	text-align: center;
	font-size: 18px;
}

#challenges-bottom { left:0; }
#challenges-done { margin:-31px 0 0 167px; }

#challenges-time-left {
	margin-top: 3px;
	margin-left: 53px;
	height: 20px;
	font-size: 13px;
}

/* Hide scrollbar for Chrome, Safari and Opera */

#challenges::-webkit-scrollbar {
	display: none;
}

#cosmetics-text {
	position: absolute;
	top: 53px;
	left: 61px;
	font-size: 25px;
}

#skins {
	background: #62823a;
	border: 6px solid var(--black);
	border-radius:13px;
	width:100%;
	height: 68px;
	cursor:url(../img/interface/cursor-pointer.png) 16 0, pointer;
	position:relative;
}

#skins:hover {
	background-color: #789a4d;
	box-shadow: inset 0 -6px 0 #23221f;

}

#skins:active {
	background-color: #53712c;
	box-shadow: inset 0 6px 0 #23221f;

}

#top-wrap {
	z-index: 2;
	position: absolute;
	width: 100%;
	height: 105px;
	overflow: hidden;
	display: none;
	transform-origin: top;
	transition: opacity 200ms;
}

#bg {
	background: rgba(0,0,0,0.2);
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	position: absolute;
	z-index: 1;
	transition: opacity 200ms;
}

#preroll {

	display: none;
	position: absolute;
	/*
	width: 100%;
	height: 100%;
	*/
	width: calc(100% - 2px);
	height: calc(100% - 2px);
	position: absolute;
	padding: 1px;
}

#ccc-bottom {
	position: absolute;
	right: calc(50% - 433px / 2);
	width: 970px;
	height: 250px;
	max-width: 970px;
	max-height: 250px;
	contain: strict;
	bottom:0px;
	background:rgba(38, 47, 23, 0.42);
	z-index: 20;
	text-align: center;
}

#shine0-apple-homepage {
	height:25px;
	top:22px;
	left:16px;
	position:absolute;
	animation: shine 6s infinite;
}

#shine1-apple-homepage {
	height:17px;
	top:57px;
	left:34px;
	position:absolute;
	animation: shine 6s 1s infinite;
	opacity: 0;
}

@keyframes shine {

	0% {
		transform: scale(0) rotate(-180deg);
		opacity:0;
	}
	20% {
		transform: scale(1) rotate(0deg);
		opacity:1;
	}
	40%, 100% {
		transform: scale(0) rotate(180deg);
		opacity:0;
	}
}

#apple-homepage {
	height:61px;
	margin-top:11px;
	margin-left:-8px;
	animation: apple 3s infinite;
	transform:scale(0.9);
}

.animation-scale { animation: apple 1s linear infinite; }

@keyframes apple {
	0%, 100% { transform:scale(0.9); }
	50% { transform:scale(1); }
}

#PEidKiTY { margin: -24px 0 0 -6px; height:113px; }

.fade-out { opacity: 0; }

.waiting {

	display: flex;
	margin-top: 10px;
	justify-content: center;
}

.fade-in { opacity: 1; }

#gMFFI {
	height:62px;
	border-radius:10px;
	border: 6px solid var(--black);
	background: #a8c636;
	width: 100%;
	box-shadow: inset 0 -6px 0 #a8c636, inset 0px 1px 0px 0px var(--black);
	cursor:url(../img/interface/cursor-pointer.png) 16 0, pointer;
	position: absolute;
	display:none;
	justify-content: flex-end;
	transition: opacity 200ms;
}

#gMFFI:hover {
	background: #88b519;
	box-shadow: inset 0 -6px 0 #819e11;
}

#gMFFI:active{
	background: #7a970e;
	box-shadow: inset 0 6px 0 #596f06;
}

#cosmetics-list, #items-list {

	scroll-behavior: smooth;
	width: 490px;
	height: 370px;
}

#items-list {

	width: 480px;
	max-width:500px;
}

#items-game-list {

	scroll-behavior: smooth;
	width: 500px;
	height: 370px;
	max-width:500px;

	background: #7C4320;
	border-radius: 13px;
	min-width: 500px;
	min-height: 360px;
	max-height: 360px;
	display: inline-block;
	overflow-x: hidden;
	overflow-y: hidden;
	position: relative;
	padding:5px;
}

#skins-box {

	width: 750px;
	height: 323px;
	left: calc(50% - 422px);
	top: calc(50% - 250px);
	transform: scale(0);
	z-index:30;
	align-items:center;
	display:none;

}

#need-account-box {
	width: 420px;
	left: calc(50% - 269px);
	top: calc(50% - 118px);
	transform: scale(0);
	z-index:30;
	align-items:center;
	display:none;
}

#player, #player-items {
	background: #7c4320;
	width: 200px;
	height: 200px;
	border-radius: 13px;
	margin-right: 20px;
	margin-top: -100px;
	border: 7px solid var(--black);
	box-shadow: inset 0 12px 0 rgba(58, 50, 44, 0.5), 0 55px 0 var(--black);
}

#player-items {
	margin-top: -45px;
	box-shadow: inset 0 12px 0 rgba(58, 50, 44, 0.5), 0 84px 0 var(--black);
}

#player-info-skin {
	background: #7c4320;
	width: 200px;
	height: 200px;
	border-radius: 13px;
	margin: 9px 0 64px 9px;
	border: 7px solid var(--black);
	box-shadow: inset 0 12px 0 rgba(58, 50, 44, 0.5), 0 55px 0 var(--black);
}

#player-info-container {
	margin-top:65px;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	width: 860px;
}

#player-info-house { padding: 0 5px; height: 47px; }
#player-info-house img { margin-top: -5px; }

#info-container {
	width: 670px;
	display: flex;
	flex-wrap: wrap;
	overflow-y: auto;
	overflow-x: hidden;
	justify-content: flex-start;
	height: 293px;
	align-content: flex-start;
}

#info-container div.achievement-img {
	width: 75px;
	height: 75px;
	position: relative;
}

#info-container div.achievement-img img {
	width: 75px;
	height: 75px;
}

#info-container div.achievement-img p {
	position: absolute;
	font-size: 27px;
	top: 43px;
	right: 2px;
}

#player-info-stats { width:40%; }

#player-info-stats2 {
	margin-bottom: 8px;
	width:100%;
}

#player-info-stats2 div.flex-column { width: 20%; }
#player-info-pets img, #player-info-inventory img {
	width: 24px;
	margin: 0 0 -1px 10px;
}

#player-info-stats2 span {
	font-size: 14px;
	margin-left: 7px;
	margin-right: 7px;
	font-weight: 100;
	color: var(--beige);
}

.player-info-achievement {
	border-radius: 6px;
	background-color: #9e5c33;
	padding: 4px;
	margin: 5px;
	position: relative;
	width: 75px; height: 75px;
}

.player-info-achievement p.achievement-img {
	width: 75px; height: 75px;
	margin: 4px;
	left: 0;
}

.player-info-achievement img {
	width: 75px;
	height: auto;
}

.player-info-achievement p.achievmement-img img:nth-of-type(1) {
	position: absolute;
	top: 0; left: 0;
}

#player-username-title, #player-level-title, #player-badge-title {
	margin: 5px;
	margin-top:20px;
	width:100%;
	margin-bottom:-20px;
	margin-left:60px;
}

#player-level-title {
	margin-left:4px;
}

#player-badge-title {
	margin-left:290px;
}

#player-info-username{
	text-align: center;
	height: 33px;
	font-size: 18px;
	padding-top: 4px;
	background-color: var(--brown5);
	color: #ffe6c2;
	border-radius: 6px;
	width: 69%;
}

#player-info-badge {
	width: 40px;
	height: 36px;
	background: var(--brown1);
	padding: 4px 2px;
	border-radius: 50px;
	margin-left: 3px;
	margin-top: -3px;
}

#buy-items {
	display:flex;
	flex-wrap:wrap;
	justify-content: space-between;
	width: 100%;
	padding: 5px;
	margin: 10px 10px;
	display:none;
}

#buy-premium {
	display:none;
}

#buy-premium-button {
	width: 200px;
	color: #ffe6c2;
	padding: 13px 15px 0 15px;
	height: 40px;
	margin-left: 10px;
	margin-top: 30px;
}

.buy-items-button {
	width:160px;
	height:160px;
	margin:0;
	transition: 100ms;
}

.buy-items-button:hover {
	transform:scale(1.1);
	filter:brightness(1.2);
}

.buy-items-button:active {
	transform:scale(1);
	filter:brightness(0.8);
}

.premium-animation {
	position: relative;
	width: 270px;
	background: #693718;
	height: 280px;
	border-radius: 7px;
	overflow:hidden;
}

#potions-category { margin-left: 45px; }

.section-button-img img,
.section-button-img-selected img { height: 70px; margin-top: -25px; }

.section-button-img, .section-button {
	margin: 8px 11px -9px 0px;
	height: 35px;
	padding: 12px 23px 0 23px;
	text-align:center;
	background: var(--brown3);
	border-radius:10px;
	cursor:url(../img/interface/cursor-pointer.png) 16 0, pointer;
	transition: 100ms;
	transform:scale(0.8);
	z-index: 1;
}

.section-button-img:hover, .section-button:hover {
	transform:scale(1.01);
	background: var(--brown2);
}

.section-button-img:active, .section-button:active {
	transform:scale(1);
	background: var(--brown2);
}

.section-button-img-selected, .section-button-selected {
	margin: 12px 11px -2px 0px;
	height: 35px;
	padding: 12px 23px 8px 23px;
	text-align:center;
	border-radius:13px 13px 0 0;
	cursor:url(../img/interface/cursor-pointer.png) 16 0, pointer;
	background: var(--brown2);
}

.section-button-top {

	margin: 5px 3px -20px 0px;
}

.section-button-selected-top:hover,
.section-button-selected-top {

	margin: -8px 3px -20px 0px;
	height: 35px;
	padding: 27px 23px 1px 23px;
	text-align:center;
	border-radius:0px 0px 13px 13px;
	cursor:url(../img/interface/cursor-pointer.png) 16 0, pointer;
	background: var(--brown2);
	transform: scale(0.8);
}

.section-button-img, .section-button-img-selected {
	margin: 20px 5px 0px 0px;
	padding: 8px 10px 0px 10px;
}

.section-button-img-selected {
	padding-bottom: 18px;
}

.section-button-small {
	margin: 0px 3px -4px 0px;
	height: 28px;
	padding: 8px 8px 0 8px;
	text-align:center;
	background: #693718;
	border-radius:7px 7px 0 0;
	cursor:url(../img/interface/cursor-pointer.png) 16 0, pointer;
	transition: 100ms;
	transform:scale(0.8);
}

.section-button-small:hover {
	transform:scale(1.1);
	background: var(--brown2);
}

.section-button-small:active {
	transform:scale(1);
	background: var(--brown2);
}

.section-button-small-selected {
	margin: 0px 3px -4px 0px;
	height: 28px;
	padding: 8px 8px 0 8px;
	text-align:center;
	border-radius:7px 7px 0 0;
	cursor:url(../img/interface/cursor-pointer.png) 16 0, pointer;
	background: var(--brown2);
}

.categoryBox::-webkit-scrollbar {
	display: none;
}

.itemHover {
	position: relative;
	width:110px;
	height:110px;
	margin: 5px;
	border-radius:13px;
	cursor:url(../img/interface/cursor-pointer.png) 16 0, pointer;
	transition: transform 100ms;
	image-rendering: -webkit-optimize-contrast;
}

.itemHover:hover {
	filter:brightness(115%);
	transform: scale(1.05);
	image-rendering: -webkit-optimize-contrast;
}

.itemHover:active {

	position:relative;
	filter:hue-rotate(364deg) saturate(1.5);
	border-radius: 13px;
	transform:scale(1);
	margin: 16px;
	width: 88px;
	height:88px;
	image-rendering: -webkit-optimize-contrast;
}

.itemHover:active > .itemBackground {
	width:100%;
}

.itemSelected {
	position:relative;
	filter:hue-rotate(364deg) saturate(1.5);
	border-radius: 13px;
	margin: 16px;
	width: 88px;
	height:88px;
	image-rendering: -webkit-optimize-contrast;
}

.itemGameActive:active {
	margin-bottom: 6px;
	margin-top: 27px;
}

.itemGameSelected {
	position:relative;
	filter:hue-rotate(364deg) saturate(1.5);
	border-radius: 13px;
	margin: 16px;
	margin-top:27px;
	width: 88px;
	height:88px;
	image-rendering: -webkit-optimize-contrast;
}

.petSoon {
	margin: 5px;
	transition: transform 100ms;
	image-rendering: -webkit-optimize-contrast;
	filter: drop-shadow(4px 6px 0 #3A322C);
}

.petHover {
	transform: scale(1.1);
	margin: 8px;
	cursor:url(../img/interface/cursor-pointer.png) 16 0, pointer;
	transition: transform 100ms;
	image-rendering: -webkit-optimize-contrast;
	filter: drop-shadow(4px 6px 0 #3A322C);
}

.petHover:hover {
	transform: scale(1.2);
	image-rendering: -webkit-optimize-contrast;
}

.petHover:active {
	transform: scale(1.1);
	opacity: 0.5;
	image-rendering: -webkit-optimize-contrast;
	padding: 0 9px 10px 9px;
	border-radius: 13px;
	margin: 11px -1px -11px -1px;
	filter: none;
}

.petSelected {
	transform: scale(1.1);
	margin: 11px -1px -11px -1px;
	cursor:url(../img/interface/cursor-pointer.png) 16 0, pointer;
	transition: transform 100ms;
	opacity: 0.5;
	image-rendering: -webkit-optimize-contrast;
	border-radius: 13px;
	padding: 0 9px 10px 9px;
}

#pet-name {
	margin-top: -1px;
}

#pet-name-input {
	margin-top:0px;
	width:100%;
}

.categoryBox {
	background: var(--brown2);
	border-radius: 13px;
	min-width: 480px;
	min-height: 360px;
	max-width: 480px;
	max-height: 360px;
	display: inline-block;
	overflow-x: hidden;
	overflow-y: hidden;
	position: relative;
	padding:5px;
}


.itemList {
	display:inline-flex;
}

#chest-price-button {
	position:absolute;
	margin-left:22px;
	margin-top:300px;
	cursor:url(../img/interface/cursor-pointer.png) 16 0, pointer;
	transition: 100ms;
	transform:scale(0.9);
}

#chest-price-button:hover {
	transform:scale(1);
	filter:brightness(1.1);
	image-rendering: -webkit-optimize-contrast;
}

#chest-price-button:active {
	transform:scale(0.8);
	filter:brightness(0.8);
}

#continue-button {
	color: #ffe6c2;
	font-size: 25px;
	width: 250px;
}

/* Furniture crafting systeme animation - START */

.item-won.furniture {
	margin-top: -48px;
	width: auto;
	height: auto;
}
.item-won.furniture .chest-cosmetic-background {
	width: 300px;
}

.item-won.furniture .chest-cosmetic { width: auto; }

.item-won.furniture .chest-item-caracterics {
	position: absolute;
	bottom: -67px;
	width: 360px;
	translate: -50%;
	left: 50%;
}

.item-won.furniture .chest-item-caracterics div {
	position: absolute;
	top: 14px;
	left: 50%;
	translate: -50%;
	font-size: 25px;
}

.item-won.furniture .chest-item-caracterics img { width: 100% }

/* Furniture crafting systeme animation - END */

.chest-item-caracterics {
	width: 200px;
	position: absolute;
	left: calc(50% - 100px);
	color: var(--white);
	text-align: center;
	font-size: 22px;
}

.chest-cosmetic {
	width:160px;
	position:absolute;
	left:0;
	top:0;
}

.chest-cosmetic-background {
	width:160px;
}

.chest-pet-background {
	width:140px;
	margin-top:-70px;
}

.windowTitle {
	left:-34px;
	position:absolute;
	top:13px;
}

.itemCosmetic {

	filter: hue-rotate(0) saturate(1);
	position: absolute;
	top: 0px;
	left: 0px;
	width:100%;
	height:auto;
	cursor:url(../img/interface/cursor-pointer.png) 16 0, pointer;
}

.itemImageSelected {
	filter:hue-rotate(0) saturate(0.8);
	cursor:url(../img/interface/cursor-pointer.png) 16 0, pointer;
}

.itemBackground {
	width: 100%;
	height:auto;
	cursor:url(../img/interface/cursor-pointer.png) 16 0, pointer;
}

.itemBackgroundSelected {
	width:100%;
}

.itemFocus {
	border-radius: 21px;
	border: #3cc7bb 5px solid;
	margin: 0px;
}

.locked {
	filter: grayscale(1) brightness(0.5);
}

.rare {
	filter: hue-rotate(130deg);
}

.epic {
	filter: hue-rotate(200deg);
}

.legendary {
	filter: hue-rotate(610deg);
}

.mythic {
	filter: hue-rotate(-42deg) saturate(2);
}

.categoryListCosmetic {

	height: 360px;
	max-width: 120px;
	display: flex;
	flex-direction: column;
	/* GPU acceleration */
	transform: translateZ(0);
}

.cosmeticCard {

	position: relative;
	height: 120px;
}

.lock-image {

	position: relative;
	left: 84px;
	bottom: 49px;
}

.lock-theme {

	position: absolute;
	bottom: 80px;
	height: 42px;
}

#cosmetic-name {
	position:absolute;
	bottom:-26px;
	left:calc(50% - 214px / 2);
	font-size:24px;
	width:100%;
	text-align:center;
}

#rarity-name {
	position:absolute;
	bottom:-48px;
	left:calc(50% - 214px / 2);
	font-size:18px;
	width:100%;
	text-align:center;
}

#item-name {
	font-size:24px;
	text-align:center;
	margin-top:-5px;
}

#price-name {
	font-size:18px;
}

#left-button-cosmetics {
	left: 190px;
	cursor:url(../img/interface/cursor-pointer.png) 16 0, pointer;
}

#right-button-cosmetics {
	right:14px;
	cursor:url(../img/interface/cursor-pointer.png) 16 0, pointer;
}

#chest-won-title {

	position: absolute;
	top: 230px;
	font-size: 40px;
	color: #ffe6c2;
	transition: opacity 400ms;
}

#chest-won-rarity {

	position: absolute;
	top: 275px;
	font-size: 40px;
	transition: opacity 400ms;
}

#unlock-skin {
	position: absolute;
	bottom: 30px;
	width: 130px;
	padding: 5px 0 15px 0;
	display: none;
	padding-bottom: 15px;
	font-size: 17px;
}

#chest-loot-amount {

	color: #fff700;
}

#chest-loot {

	position: absolute;
	top: 41px;
}

#left-button-chest {
	left:278px;
	bottom:15px;
	cursor:url(../img/interface/cursor-pointer.png) 16 0, pointer;
}

#right-button-chest {
	right:100px;
	bottom:15px;
	cursor:url(../img/interface/cursor-pointer.png) 16 0, pointer;
}

.buttonItem img { cursor:url(../img/interface/cursor-pointer.png) 16 0, pointer; width: 100% }
.buttonItem {
	position:absolute;
	bottom:40px;
}

.buttonItem, .buttonPetSkin {
	width:60px;
	height:60px;
	cursor:url(../img/interface/cursor-pointer.png) 16 0, pointer;
	transition:100ms;
}

.buttonItem:hover, .buttonPetSkin:hover {
	filter:brightness(115%);
	transform: scale(1.1);
}

.buttonItem:active, .buttonPetSkin:active {
	filter:sepia(0.4);
	transform: scale(0.9);
	transition: 100ms;
}

.category-button img, .category-button-selected img { width:100%;cursor:url(../img/interface/cursor-pointer.png) 16 0, pointer; }
.category-button {
	position:absolute;
	top: 25px;
	width:55px;
	height:55px;
	padding:5px;
	background: #693718;
	border-radius:13px 13px 0 0;
	cursor:url(../img/interface/cursor-pointer.png) 16 0, pointer;
	transition: 100ms;
}

.category-button:hover {
	transform:scale(1.1);
	image-rendering: -webkit-optimize-contrast;
}

.category-button:active {
	transform:scale(1.1);
	image-rendering: -webkit-optimize-contrast;
	background: #7C4320;
}

.category-button-selected {
	position:absolute;
	top: 25px;
	width:55px;
	height:55px;
	padding:5px;
	background: #7C4320;
	border-radius:13px 13px 0 0;
	cursor:url(../img/interface/cursor-pointer.png) 16 0, pointer;
	transform:scale(1.1);
	image-rendering: -webkit-optimize-contrast;
	background: #7C4320;
}

#skins-button {
	left:270px;
}

#accessories-button {
	left:350px;
}

#particles-button {
	left:430px;
}

#hats-button {
	left:270px;
}

#wings-button {
	left:350px;
}

#item-hint { position: absolute; left: 510px; top: 50px; display: flex;}
#item-hint p { margin-left: 15px; }

.press-animation {
	animation: press-animation infinite 1s ease-out;
	transform: translateY(-10px) scaleY(-1);
}

@keyframes press-animation {
	0% { transform: translateY(-20px) scaleY(-1); }
	40% { transform: translateY(-10px) scaleY(-1); }
	80% { transform: translateY(-10px) scaleY(-1); opacity: 1; }
	100% { opacity: 0; }
}

#rebind-key {
	left: calc(50% - 405px);
	top: calc(50% - 290px);
	width: 750px;
	height:510px;
	padding: 30px;
	z-index: 22;
	transform: scale(0);
	opacity: 0;
	justify-content: space-between;
	flex-wrap: wrap;
	display:none;
}

#link {
	-webkit-user-select: text;
	-khtml-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
	height: 30px;
	width:86%;
	font-size:18px;
	padding-top:6px;
}

#copied {
	font-size: 13px;
	color: #dd922d;
	position: absolute;
	left: 480px;
	opacity: 0;
	margin-top: -33px;
	color: #bf914d;
	margin-left: -47px;
}

.copyFade {
	animation: opacityCopy ease 600ms;
	opacity: 0;
}

@keyframes opacityCopy {
	0%, 100% { opacity: 0; }
	40%, 60% { opacity: 1; }
}

.popup-box {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
}

.popup-box, .popup-background {
	background-color: var(--brown0);
	border-radius: 13px;
	border: 6px solid var(--black);
	padding: 30px 50px;
	color: var(--white);
}

.control-description {
	width: 190px;
	height: 36px;
	padding: 10px 0;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	font-size: 16px;
}

.control-graphics {

	padding: 6px 0;
}

.controls-input {
	width: 100px;
	margin-top: -10px;
}
.popup-input {
	background: #ffe6c2;
	margin-left: 106px;
	width: 60px;
	height: 27px;
	color: var(--black);
	font-weight: 700;
	text-align: center;
	box-shadow: inset 0px 6px 0px #e0c6a0;
	border-radius: 13px;
	padding: 9px 0 0px 0;
	border: 6px solid var(--black);
	margin-bottom: 11px;
	cursor:url(../img/interface/cursor-pointer.png) 16 0, pointer;
}

h1.button-quit {
	position: absolute;
	z-index: 3;
	top: -6px;
	right: -6px;
	width: 45px;
	height: 45px;
	background-color: var(--gold0);
	border: 6px solid var(--black);
	border-radius: 0 10px 0 10px;
	background-size: 100%;
	text-align: center;
	cursor: url(../img/interface/cursor-pointer.png) 16 0, pointer;
}

h1.button-quit:hover {
	background-color: #f7c263;
}

h1.button-quit:active {
	background-color: #d8a03b;
}

#main-box {
	display: none;
	width: 1260px;
	height: 540px;
	left: calc(50% - 1260px / 2);
	position:relative;
	z-index:20 !important;
	transform-origin: center top;
	color: #ffe6c2;
}

#top-right-wrap {
	top: 12%;
	right: 10px;
	width: 165px;
	display: none;
	z-index:21;
	transform-origin: top right;
	transition: opacity 200ms;
}

#top-left-wrap {
	display:none;
	top:10%;
	left:10px;
	gap: 5px;
	z-index:2;
	transform-origin: top left;
	transition: opacity 200ms;
}

.button-box {
	width:45%;
	background: #4e3221;
	border-radius: 6px;
	padding: 5px 5px;
	box-shadow: 0 5px 0 #191411;
	color: #fde9cb;
	cursor:url(../img/interface/cursor-pointer.png) 16 0, pointer;
	text-align:center;
}

.button-box:hover {
	background: #603c27;
}

.button-box:active {
	box-shadow: none;
	margin-top: 5px;
	background: #2d1b10;
	margin-bottom: -5px;
}

.rarity-percent {
	width: 20px;
	height: 20px;
	border-radius: 3px;
	margin-right: 6px;
	margin-left: 6px;
	border: 4px solid var(--black);
}

#chest-container {

	z-index: 24;
	left: calc(50% - 440px);
	top: calc(50% - 290px);
	transform: scale(0);
	display:none;
	font-size:16px;
}

#potion-bag-container {

	z-index: 24;
	left: calc(50% - 356px);
	top: calc(50% - 263px);
	transform: scale(0);
	font-size: 16px;
	display: none;
}

.table-totem-tool {
	width: 40%;
	background: #7d4320;
	border-radius: 5px;
	margin: 3px;
}

.potion-bag-div p {
	margin-top: 70px;
	width: 600px;
	text-align: center;
}

.potion-bag-div h3 {
	background: var(--black);
	padding: 5px 20px;
	border-radius: 4px;
	margin-top: 10px;
	text-align: center;
}

#join-game {
	z-index: 24;
	flex-wrap:wrap;
	width:450px;
	left: calc(50% - 283px);
	top: calc(50% - 128px);
	transform: scale(0);
	display:none;
}

#copy-button {
	margin-top: -10px;
	margin-left: 10px;
}

#copy-img-button {
	width: 90%;
	margin: auto;
	margin-top: 3px;
	margin-left: 1px;
	cursor: url(../img/interface/cursor-pointer.png) 16 0, pointer;
}

#copy-button:active > img#copy-img-button {
	margin-top:6px;
}

.create-login-info {
	width:100%;
}

.create-login-info::placeholder {
	color: rgba(253, 233, 203, 0.5);
}

#player-info-level {
	text-align: center;
	height: 29px;
	font-size: 18px;
	padding-top: 6px;
	background-color: var(--brown1);
	color: #ffe6c2;
	border-radius: 6px;
	width: 50px;
	margin-right: 5px;
}

#big-vip {
	position: absolute;
	z-index: -1;
	top: -48px;
	left: 80px;
}

#vip0 {
	height: 284px;
}

#vip1 {
	height: 363px;
}

#vip2 {
	height: 425px;
}

.chest-button {
	position: relative;
	cursor: url(../img/interface/cursor-pointer.png) 16 0, pointer;
	transition: 0.2s top;
	background: transparent;
	border: none;
	color: #ffe5c1;
	margin: 10px 25px;
	top: 0;
}

.chest-button:hover {
	top:-10px;
	filter:brightness(1.2);
	transition: 0.2s filter, 0.2s top;
}

.chest-button:hover::after {
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 20px;
}

#buy-premium .chest-button { margin: 0; }
#premium-title-box {
	transform: rotate(-7deg);
	line-height: 22px;
	text-align: center;
	width: 287px;
	margin: 24px 0 30px 27px;
}

.premium-bg-content {
	background: var(--black);
	border-radius: 0 5px 5px 0;
	padding: 8px;
	margin: 5px 0;
	width: 343px;
}

#background-moving {
	animation: moving 8s infinite linear;
	width: 137%;
	margin-left:-30px;
	margin-top:-273px;
	opacity:0.4;
}

@keyframes moving {
	0% { transform: translateY(0px); }
	100% { transform: translateY(300px); }
}

#premium-moving {
	animation: premium 5s infinite ease;
}

@keyframes premium {
	0%, 100% {
		height:100%;
		transform: translateY(0px);
	}
	50% {
		height:95%;
		transform: translateY(10px);
	}
}

#chest-moving {
	animation: chest-moving 2s infinite ease;
	position: absolute;
	width: 100%;
	top: 30px;
	left: 10px;
}

img#chest-moving[src*="./img/interface/chest15.png"] {
	left: 42px !important;
	width: 70% !important;
}

img#chest-moving[src*="./img/interface/chest19.png"] {
	left: 0px !important;
	top: 20px !important;
}

img#chest-moving[src*="./img/interface/chest25.png"] {
	left: 0px !important;
	top: 80px !important;
}

img#chest-moving[src*="./img/interface/chest6.png"],
img#chest-moving[src*="./img/interface/chest17.png"],
img#chest-moving[src*="./img/interface/chest18.png"],
img#chest-moving[src*="./img/interface/chest16.png"],
img#chest-moving[src*="./img/interface/chest28.png"],
img#chest-moving[src*="./img/interface/chest26.png"] {
	left: 0px !important;
	top: 60px !important;
}

img#chest-moving[src*="./img/interface/chest27.png"] {
	left: -8px !important;
	top: 60px !important;
}

img#chest-moving[src*="./img/interface/chest24.png"] {
	left: 21px !important;
	top: 12px !important;
	width: 80%;
}

img#chest-moving[src*="./img/interface/chest29.png"] {
	width: 90%;
	top: 30px !important;
}

/* To remove after Halloween*/
/* #chest-title { width: 250px; } */

@keyframes chest-moving {
	0%, 100% {
		transform: scale(1.1);
		/*
		height:63%;
		transform: translateY(0px);
		*/

	}
	50% {
		transform: scale(1);
		/*
		height:60%;
		transform: translateY(10px);
		*/
	}
}

#light-moving {
	animation: light 15s infinite ease;
	position: absolute;
	width: 118%;
	top:20px;
	left: 0px;
	width:100%;
}

@keyframes light {
	0% { transform: translateY(0px) rotate(0deg) scale(1); }
	50% { transform: scale(1.2); }
	100% { transform: translateY(0px) rotate(90deg) scale(1); }
}

@keyframes light-premium0 {

	0% {
		transform: scale(0.1) rotate(0deg);
		opacity:1;
	}
	50% {
		transform: scale(0) rotate(180deg);
		opacity:0;
	}
	100% {
		transform: scale(0.1) rotate(360deg);
		opacity:1;
	}
}


@keyframes light-premium-small {

	0% {
		transform: scale(1) rotate(0deg);
		opacity:1;
	}
	50% {
		transform: scale(0) rotate(180deg);
		opacity:0;
	}
	100% {
		transform: scale(1) rotate(360deg);
		opacity:1;
	}
}

.lights {
	position:absolute;
	left:0;
}

.light-premium-small {
	animation: light-premium-small 2s infinite;
	top:-10px;
	left:-17px;
	opacity:0;
}

.light-premium0 {
	animation: light-premium0 2s infinite;
	top:-190px;
	left:-197px;
}

.light-premium1 {
	animation: light-premium0 2s 1s infinite;
	top: -150px;
	left: 8px;
	opacity:0;
}

/* ------- Advent Calendar ------- */

#advent-calendar-box {
	z-index: 25;
	width: 770px;
	height: 520px;
	transform-origin: center;
	left: calc(50% - 770px / 2);
	transform: scale(0);
}

#calendar-container {
	margin-top: 65px;
}

#advent-calendar-img {
	position: absolute;
	width: 760px;
	height: 428px;
	border-radius: 5px;
}

#advent-calendar-box .subtitle {
	margin-left: 210px;
	background: var(--black);
	padding: 10px;
	border-radius: 5px;
	position: absolute;
}

.calendar-box-container {
	display: grid;
	grid-template-columns: repeat(15, 1fr);
	grid-gap: 7px;
	height: 428px;
	position: relative;
}

button.calendar-box {
	border-radius: 5px;
	position: relative;
	background: transparent;
	border: 2px dashed var(--black);
}

button.calendar-box:hover {
	background: rgb(255 229 193 / 10%);
}

.calendar-box p {
	position: absolute;
	bottom: 10px;
	left: 10px;
}

div.calendar-box p {
	z-index: 20;
}

.calendar-box p.number-s {
	font-size: 19px;
	left: 8px;
}

.calendar-box p.number-m {
	font-size: 27px;
}

.calendar-box p.number-l {
	font-size: 35px;
}

.calendar-box-17 p,
.calendar-box-8 p.number-s,
.calendar-box-15 p,
.calendar-box-10 p,
.calendar-box-13 p,
.calendar-box-2 p,
.calendar-box-21 p.number-m,
.calendar-box-23 p.number-s {
	left: unset;
	right: 10px;
}

.calendar-box-6 p,
.calendar-box-13 p,
.calendar-box-21 p {
	bottom: unset;
	top: 10px;
}

div.calendar-box-opening {
	display: none;
	transition: transform .2s linear, filter .2s linear;
	transform: translateZ(0) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg) scaleX(0.8) scaleY(1);
	filter: brightness(0.8);
}

.calendar-box-opening div {
	transition: transform .2s linear;
	transform: translateZ(0) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(10deg) scaleX(0.92) scaleY(1);
}

.calendar-box-opening.calendar-box-19 div {
	transition: transform .2s linear;
	transform: translateZ(0) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(2deg) scaleX(0.92) scaleY(1);
}

div.calendar-box-opening p{
	transition: left .2s linear, top .2s linear, bottom .2s linear, right .2s linear;
	transform: translateZ(0) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg) scaleX(0.8) scaleY(1);
}

div.calendar-box {
	z-index: 10;
	transform-origin: bottom left;
	position: relative;
	left: 0;
	top: -1px;
}

div.calendar-box img {
	position: absolute;
	height: 428px;
	z-index: 18;
}

div.calendar-box-1 img {
	top: 0px;
	left: 0px;
	clip-path: inset(0px calc(100% - 95px) calc(100% - 120px) 0px);
}

div.calendar-box-2 img {
	top: -310px;
	left: -411px;
	clip-path: inset(311px calc(100% - 409px - 146px) calc(100% - 313px - 108px) 409px);
}

div.calendar-box-3 img {
	top: -127px;
	left: -665px;
	clip-path: inset(127px calc(100% - 665px - 95px) calc(100% - 131px - 52px) 665px);
}

div.calendar-box-4 img {
	top: -188px;
	left: -665px;
	clip-path: inset(188px calc(100% - 665px - 95px) calc(100% - 188px - 118px) 665px);
}

div.calendar-box-5 img {
	top: -62px;
	left: -460px;
	clip-path: inset(62px calc(100% - 460px - 44px) calc(100% - 63px - 123px) 460px);
}

div.calendar-box-6 img {
	top: 1px;
	left: -102px;
	clip-path: inset(0px calc(100% - 102px - 95px) calc(100% - 246px) 102px);
}

div.calendar-box-7 img {
	top: -314px;
	left: -205px;
	clip-path: inset(314px calc(100% - 205px - 198px) calc(100% - 313px - 113px) 205px);
}

div.calendar-box-8 img {
	top: 0px;
	left: -461px;
	clip-path: inset(0px calc(100% - 457px - 95px) calc(100% - 53px) 460px);
}

div.calendar-box-9 img {
	top: -187px;
	left: -358px;
	clip-path: inset(188px calc(100% - 358px - 150px) calc(100% - 188px - 57px) 358px);
}

div.calendar-box-10 img {
	top: -67px;
	left: -514px;
	clip-path: inset(68px calc(100% - 661px) calc(100% - 66px - 58px) 514px);
}

div.calendar-box-11 img {
	top: -63px;
	left: -307px;
	clip-path: inset(63px calc(100% - 307px - 44px) calc(100% - 72px - 113px) 307px);
}

div.calendar-box-12 img {
	top: -185px;
	left: -205px;
	clip-path: inset(185px calc(100% - 205px - 146px) calc(100% - 188px - 117px) 205px);
}

div.calendar-box-13 img {
	top: -316px;
	left: -665px;
	clip-path: inset(317px calc(100% - 665px - 95px) calc(100% - 313px - 114px) 665px);
}

div.calendar-box-14 img {
	top: -253px;
	left: -562px;
	clip-path: inset(254px calc(100% - 562px - 95px) calc(100% - 250px - 178px) 562px);
}

div.calendar-box-15 img {
	top: -124px;
	left: -511px;
	clip-path: inset(125px calc(100% - 511px - 146px) calc(100% - 125px - 120px) 511px);
}

div.calendar-box-16 img {
	top: -255px;
	left: -359px;
	clip-path: inset(256px calc(100% - 358px - 198px) calc(100% - 246px - 65px) 358px);
}

div.calendar-box-17 img {
	top: -128px;
	left: 0px;
	clip-path: inset(128px calc(100% - 0px - 95px) calc(100% - 125px - 123px) 0px);
}

div.calendar-box-18 img {
	top: 1px;
	left: -358px;
	clip-path: inset(0px calc(100% - 358px - 95px) calc(100% - 0px - 186px) 358px);
}

div.calendar-box-19 img {
	top: -61px;
	left: -206px;
	clip-path: inset(61px calc(100% - 205px - 97px) calc(100% - 63px - 118px) 205px);
}

div.calendar-box-20 img {
	top: 1px;
	left: -565px;
	clip-path: inset(0px calc(100% - 562px - 198px) calc(100% - 0px - 54px) 565px);
}

div.calendar-box-21 img {
	top: 1px;
	left: -205px;
	clip-path: inset(0px calc(100% - 205px - 146px) calc(100% - 0px - 55px) 205px);
}

div.calendar-box-22 img {
	top: -257px;
	left: 0px;
	clip-path: inset(257px calc(100% - 0px - 95px) calc(100% - 250px - 180px) 0px);
}

div.calendar-box-23 img {
	top: -255px;
	left: 0px;
	clip-path: inset(255px calc(100% - 0px - 98px) calc(100% - 250px - 63px) 0px);
}

div.calendar-box-24 img {
	top: -255px;
	left: -103px;
	clip-path: inset(258px calc(100% - 0px - 198px) calc(100% - 250px - 180px) 103px);
}

div.calendar-box div {
	position: absolute;
	background: #3a322ba8;
	width: 100%;
	height: 100%;
	transform-origin: bottom left;
}

.calendar-box-container button.open {
	background: rgb(58 50 43 / 90%);
	pointer-events: none;
	box-shadow: inset 15px 15px 0 0 rgb(46 41 37 / 50%);
	border-style: inset;
	border: 2px inset #7c3f1a;
}

.calendar-box-container button.open p {
	color: transparent;
	user-select: none;
}

.calendar-box-1 {
	grid-row: 1 / 3;
	grid-column: 1 / 3;
}

.calendar-box-2 {
	grid-column: 9 / 12;
	grid-row: 6 / 8;
}

.calendar-box-3 {
	grid-column: 14 / 16;
	grid-row: 3;
}

.calendar-box-4 {
	grid-column: 14 / 16;
	grid-row: 4 / 6;
}

.calendar-box-5 {
	grid-column: 10 / 11;
	grid-row: 2 / 4;
}

.calendar-box-6 {
	grid-column: 3 / 5;
	grid-row: 1 / 5;
}

.calendar-box-7 {
	grid-column: 5 / 9;
	grid-row: 6 / 8;
}

.calendar-box-8 {
	grid-column: 10 / 12;
	grid-row: 1;
}

.calendar-box-9 {
	grid-column: 8 / 11;
	grid-row: 4 / 5;
}

.calendar-box-10 {
	grid-column: 11 / 14;
	grid-row: 2;
}

.calendar-box-11 {
	grid-column: 7;
	grid-row: 2 / 4;
}

.calendar-box-12 {
	grid-column: 5 / 8;
	grid-row: 4 / 6;
}

.calendar-box-13 {
	grid-column: 14 / 16;
	grid-row: 6 / 8;
}

.calendar-box-14 {
	grid-column: 12 / 14;
	grid-row: 5 / 8;
}

.calendar-box-15 {
	grid-column: 11 / 14;
	grid-row: 3 / 5;
}

.calendar-box-16 {
	grid-column: 8 / 12;
	grid-row: 5;
}

.calendar-box-17 {
	grid-column: 1 / 3;
	grid-row: 3 / 5;
}

.calendar-box-18 {
	grid-column: 8 / 10;
	grid-row: 1 / 4;
}

.calendar-box-19 {
	grid-column: 5 / 7;
	grid-row: 2 / 4;
}

.calendar-box-20 {
	grid-column: 12 / 16;
	grid-row: 1;
}

.calendar-box-21 {
	grid-column: 5 / 8;
	grid-row: 1;
}

.calendar-box-22  {
	grid-column: 1 / 3;
	grid-row: 5 / 8;
}

.calendar-box-23  {
	grid-column: 14 / 16;
	grid-row: 2;
}

.calendar-box-24  {
	grid-column: 3 / 5;
	grid-row: 5 / 8;
}

#calendar-box-21-open,
#calendar-box-20-open,
#calendar-box-18-open { z-index: 0; }

#calendar-box-19-open,
#calendar-box-9-open,
#calendar-box-18-open { z-index: 1; }

#calendar-box-15-open { z-index: 10; }

#calendar-box-3-open,
#calendar-box-9-open,
#calendar-box-16-open,
#calendar-box-7-open,
#calendar-box-14-open { z-index: 11; }

#calendar-box-13-open,
#calendar-box-2-open,
#calendar-box-4-open { z-index: 12; }

/* ------- Quiz box -------- */

#quiz-box {
	z-index: 24;
	width: 770px;
	height: 520px;
	left: calc(50% - 882px / 2);
	top: calc(50% - 520px / 2);
	transform-origin: center;
	transform: scale(0);
}

#quiz-container { margin-top: 60px; }
#quiz-container > img { width: 760px; }
#quiz-container div { align-items: center; border-radius: 5px; margin-top: 6px; }
#quiz-container h3 { text-align: center; margin: 5px 0 12px; }
#quiz-container button img { width: 40px; height: 40px; position: absolute; display: none; top: 3px; left: 20px; }
#quiz-container button { width: 110px; height: 62px; position: relative; }

/* ------- Puzzle box -------- */

#puzzle-box {
	z-index: 24;
	width: 520px;
	height: 460px;
	left: calc(50% - 520px / 2);
	top: calc(50% - 460px / 2);
	transform-origin: center;
	transform: scale(0);
}

#puzzle-container {

	margin: auto;
	padding: 5px;
	border-radius: 10px;
	width: 299px;
	height: 416px;
	background: url(https://taming.io/img/interface/puzzle-background.png?3) no-repeat;
	background-position: center;
	background-color: var(--brown2);
}

#puzzle-claim-container {

	margin: auto;
	margin-top: -10px;
	width: 140px;
}

#puzzle-button {

	width: 140px;
}

#puzzle-text {

	margin-top: 0px;
}

#puzzle-loading {

	display: none;
	width: 32px;
	height: 32px;
}

#puzzle div {

	cursor: url(../img/interface/cursor-pointer.png) 16 0, pointer;
	transition: 150ms;
}

#puzzle div:hover, #puzzle div.selected {

	z-index: 2;
	scale: 1.1;
	border-radius: 5px;
	filter: drop-shadow(0px 0px 5px black);
}

#shop-box {
	z-index:24;
	width:830px;
	height:545px;
	flex-wrap:wrap;
	justify-content: flex-end;
	display: none;
	padding:30px 35px;
	left: calc(50% - 454px);
	top: calc(50% - 281px);
	transform: scale(0);
	padding-top:10px;
}

#challenges-hint {

	background: var(--black);
	display: flex;
	align-items: center;
	justify-content: center;
}

#challenges-box {
	z-index:24;
	width:720px;
	height:526px;
	left: calc(50% - 360px);
	top: calc(50% - 266px);
	transform: scale(0);
	display: none;
	padding: 10px;
}

.challenge-ga {
	font-size:28px;
	padding-top:23px;
}

#chest-extra-description {
	position:absolute;
	top:-100px;
	width: 300px;
	left:40px;
	color:#ffdb33;
}

#logged {
	margin-left:50px;
	transition: opacity 200ms;
}

#wallet-logged {
	margin-left:auto;
	display:none;
	transition: opacity 200ms;
}
#wallet-account-box {
	margin: 10px 2px 0 140px;
}

#wallet-homepage {
	background:none;
	box-shadow: none;
}

#money-amount {
	overflow: hidden;
	font-size: 17px;
	color: #fde5c1;
	margin: 5px 10px 0 -9px;
	background: var(--black);
	padding: 10px 25px 10px 20px;
	border-radius: 0 33px 33px 0;
}

.wallet {
	color: #ffe6c2;
	padding: 0 5px;
	background-color: var(--black);
	text-align: center;
	border-radius: 12px;
	box-shadow: inset 0 -5px 0 #23221f;
	height:55px;
	display:flex;
	align-items:center;
}

#login-box {
	z-index:24;
	width:370px;
	display:none;
	left: calc(50% - 240px);
	top: calc(50% - 185px);
	transform: scale(0);
}

.login-info { color: #fbe4c0; }

#login-text {
	margin-left: 55px;
	margin-top: 6px;
}

#login-button:active > #login-text { margin-top:11px; }

#login-button {
	cursor: url(../img/interface/cursor-pointer.png) 16 0, pointer;
	margin-top: 8px;
	margin-left: 10px;
	color: #ffe6c2;
	background: #dec035;
	border-radius: 12px;
	border: 6px solid var(--black);
	width: 170px;
	height: 37px;
	box-shadow: inset 0 -5px 0 0px #e2961f;
}

#login-button:hover {
	background: #f9dc55;
	box-shadow: inset 0 -5px 0 0px #fbb03b;
}

#login-button:active {
	background: #e6671d;
	box-shadow: inset 0 5px 0 0px #e2961f;
}

#register {
	display: inline-block;
	width: 40%;
	color: #ffe6c2;
	padding-top: 5px;
	height: 34px;
}

#register:active {
	padding-top: 10px;
	height: 29px;
}

#login {
	display: inline-block;
	width: 40%;
	color: #ffe6c2;
	padding-top: 5px;
	height: 34px;
}

#login:active {
	padding-top: 10px;
	height: 29px;
}

#register-bottom {
	background:rgba(40, 35, 32, 0.33);
}

#register-text {
	margin-left:21px;
	margin-top:-388px;
}

#free-apple-text {
	margin-left:40px;
	margin-top:-4px;
	font-size:14px;
}

#register-button:active > #register-bottom { top:0; }

#register-button:active > #register-text { margin-top:-385px; }

#register-button:active > #free-apple-text { margin-top:-2px; }

#register-button {
	cursor: url(../img/interface/cursor-pointer.png) 16 0, pointer;
	margin-top: 7px;
	margin-left:10px;
	color: #ffe6c2;
	background: #7c4320;
	padding: 2px 0;
	border-radius: 12px;
	border: 6px solid var(--black);
	width:170px;
	height:33px;
	transition: opacity 200ms;
}

#register-button:hover {
	background: #a8c636;
}

#register-button:active {
	background: #c5742c;
}

.login-animation {
	position: relative;
	overflow: hidden;
}

#login-buttons {
	display: flex;
	transition: opacity 200ms;
}

#howto { height:44px; }

#mute-button { display:none; }
#housing-mute{ display:none; }

#ping-selected {
	height: 37px;
	width: unset;
}

#pet-face-button {
	position: absolute;
	left: -8px;
	top: -32px;
	height: 120px;
	transform: rotate(-14deg);
	image-rendering: -webkit-optimize-contrast;
}

#pet-face-button[src="./img/creature/baby-stingray-head.png"] {
	left: -22px;
	top: -180px;
	height: 250px;
	filter: drop-shadow(8px 5px 0px #3a322c) drop-shadow(-7px 6px 0px #3a322c);
}

#pet-face-button[src="./img/creature/baby-goldfish-head.png"] {
	transform: scaleX(-1);
	filter: drop-shadow(-10px 1px 0px #3a322c) drop-shadow(0px 3px 0px #3a322c);
}

#pet-face-button[src="./img/creature/baby-shark-head.png"] {
	left: 8px;
	top: -54px;
	filter: drop-shadow(7px 4px 0px #3a322c) drop-shadow(-8px 2px 0px #3a322c);
}

#second-element-button, #element-button {
	position:absolute;
	top:-20px;
}

#element-button { right:-30px; }

#second-element-button {
	display: none;
	left: 75px;
}

#pets:active > #element-button { top:-11px; }

#pet-bottom { background: rgba(85, 59, 12, 0.48); }

#skins-bottom, #challenges-bottom  { background:rgb(42 65 21 / 0.76); }

.fix-border-scale:active > #skins-bottom,
.fix-border-scale:active > #pet-bottom,
.fix-border-scale:active > #play-bottom {
	bottom:initial;
	top:0;
}

.fix-border-scale:active > #pet-bottom { background: rgba(35, 35, 35, 0.32); }

.fix-border-scale:active > #pet-face-button { top:-31px; }
.fix-border-scale:active > #element-button { top:-17px; }
.fix-border-scale:active > .animal-name-subtitle { top:7px; }
.fix-border-scale:active > .change-animal-subtitle { top:44px; }

.fix-border-scale:active > #PEidKiTY { margin-top:-21px; }

#shop-cosmetics-button {
	height: 83px;
	width: 100%;
	overflow: hidden;
	background-color: #dec035;
	box-shadow: inset 0 -5px 0 #e2961f;
	padding: 0;
}

#shop-cosmetics-button:hover {
	background-color: #ecd259;
	box-shadow: inset 0 -5px 0 #eca431;
}

#shop-cosmetics-button:active {
	background-color: #e4671a;
	box-shadow: inset 0 5px 0 #e48c1a;
}

#shop-cosmetics-button div.p-absolute {
	right: 0px;
	top: 16px;
	width: 50px;
}
#shop-cosmetics-button div.p-absolute img:nth-child(1){
	position: absolute;
	left: 0;
	animation: spin infinite 2s;
}

#shop-cosmetics-button div.p-absolute img:nth-child(2){
	position: absolute;
	width: 30px;
	top: 8px;
	left: 51%;
	translate: -50%;
}

#shop-bottom { background:rgb(117 68 21/ 0.76); left:0; }
#shop-cosmetics-button:active #shop-bottom { top:0px; bottom: unset; }

.fix-border-scale:active #skins-picture, .fix-border-scale:active #cosmetics-text {
	margin-top:5px;
}

#skins-picture {
	position: absolute;
	top: -6px;
	left: -30px;
	width: 233px;
	border-radius: 12px;
}

#play-bottom { background: rgb(59 84 42 / 0.48); }

#play:active #PEidKiTY { margin-top:-18px; }
#play:active .play-subtitle { margin-top:12px; }

.shadowedText, #shop-cosmetics-button, #pets { position: relative; }

.bottom-volume-button {
	height: 6px;
	width: 100%;
	bottom:0;
	position: absolute;
}

#pets:hover #pet-bottom { background: rgba(85, 59, 12, 0.48); }

.fix-border-scale {
	position: absolute;
	height: 102%;
	width: 102%;
	top: -1px;
	left:-1px;
	overflow: hidden;
	border-radius: 5px;
}

#pets {
	overflow: hidden;
	margin-top:-12px;
	width: 68%;
	height: 65px;
	background: #efbc62;
	border-radius: 10px;
	box-shadow: inset 0 -6px 0 #dda254;
	border: 6px solid var(--black);
	cursor: url(../img/interface/cursor-pointer.png) 16 0, pointer;
}

#pets:hover {
	background: #fbd085;
	box-shadow: inset 0 -6px 0 #ecb56b;
}

#pets:active {
	background: #e7972d;
	box-shadow: inset 0 6px 0 #985e11;
}

.subbox {
	font-size: 14px;
	color: #ffe6c2;
	padding: 28px 18px 23px 18px;
	margin-top: 47px;
	background:#6d3817;
	margin-left:37px;
	margin-right:37px;
	position:relative;
}

.subbox-background { background:#6d3817; }

.subsubtitle { top:-57px; font-size:16px; }

.subtitle { color: #ffe6c2; }

.shadow {
	-webkit-text-stroke-width: 9px;
	-webkit-text-stroke-color: var(--black);
}

.above {
	position: absolute;
	top: 0px;
	left: 0px;
}

.f22 { font-size:22px; }
.f24 { font-size:24px; }

#pets:active .animal-name-subtitle { top:6px; }
#pets:active .change-animal-subtitle { top:42px; }

.play-subtitle { margin: -84px 0 0 275px; font-size: 35px; }

.animal-name-subtitle, .change-animal-subtitle { z-index: 1; position: absolute; left: 98px; }
.animal-name-subtitle {
	top: 2px;
	font-size: 35px;
	width: 322px;
	text-indent: 4px;
}

.change-animal-subtitle { top: 40px; font-size: 13px; }

.plus-homepage, .red-button {
	color: var(--white);
	cursor:url(../img/interface/cursor-pointer.png) 16 0, pointer;
	text-align: center;
	border: 6px solid var(--black);
	border-radius: 12px;
}

.red-button {
	background-color: #fd4242;
	box-shadow: inset 0 -5px 0 #973a36;
	width: 130px;
	padding: 3px 0 0 0;
	height: 30px;
	margin: auto;
	margin-top: 10px;
}

.red-button:hover {
	background-color: #f3b632;
	box-shadow: inset 0 -5px 0 #c38a0e;
}

.red-button:active {
	background-color: #d05e11;
	box-shadow: inset 0 5px 0 #a24104;
	padding-top: 6px;
	height: 27px;
}

.plus-homepage {
	padding: 0 5px;
	background-color: #e3911C;
	box-shadow: inset 0 -5px 0 #cf7730;
	width: 29px;
	height: 40px;
	margin: 5px 10px 0 -30px;
}

.plus-homepage:hover {
	background-color: #f3b632;
	box-shadow: inset 0 -5px 0 #c38a0e;
}

.plus-homepage:active {
	background-color: #d05e11;
	box-shadow: inset 0 5px 0 #a24104;
	padding-top: 6px;
	height: 34px;
}

#team-box {
	z-index:22;
	width:600px;
	padding:107px 50px 30px 50px;
	display:none;
	transform: scale(0);
	left: calc(50% - 350px);
	top: calc(50% - 179px);
	flex-wrap:wrap;
	justify-content: space-between;
}

#team-list {
	width:100%;
	height:100%;
	max-height:260px;
	overflow-y: auto;
	overflow-x: hidden;
}

#team-list::-webkit-scrollbar {
	background: #7b401a;
	border-radius: 10px;
}

#team-list::-webkit-scrollbar-thumb {
	background: #4e3221;
	border-radius: 10px;
}

.team-line {
	width:92%;
	display:flex;
	justify-content: space-between;
	background: #7b401a;
	border-radius: 6px;
	margin: 3px 0;
	padding: 5px 5px 7px 11px;
	align-items: center;
	color: #fde9cb;
}

.team-line span { height: 20px; }

#create-name {
	width:75%;
	font-size: 19px;
	cursor: url(../img/interface/cursor-text.png) 16 0, text;
}

#create-name::placeholder {
	color: rgba(253, 233, 203, 0.5);
}

#create-team-button {
	color: #ffe6c2;
	padding: 5px;
	margin-top: -7px;
	height: 26px;
	width:68px;
	border-radius: 10px;
}

#create-team-button:active {
	padding: 7px 5px 3px 5px;
}

.button-team {
	background: var(--black);
	border-radius: 6px;
	padding: 3px 5px;
	box-shadow: inset 0 -5px 0 #23221f;
	color: #fde9cb;
	cursor:url(../img/interface/cursor-pointer.png) 16 0, pointer;
	text-align:center;
}

.button-team:hover {
	background: #58534a;
}

.button-team:active {
	box-shadow: none;
	margin-top: 5px;
	background: #23221f;
	margin-bottom: -5px;
}

#team-box-footer {
	align-items:center;
	display:flex;
	justify-content:space-between;
	width:100%;
	margin-top:20px;
	height:34px;
}

#invitation-box {
	z-index:22;
	display:flex;
	padding:20px;
	transform: translate(0, 0);
	left: 10px;
	top: 10px;
}

#member-name {
	border-radius:6px;
	font-size:19px;
	color:#fde9cb;
	padding:8px 15px;
	cursor: url(../img/interface/cursor-pointer.png) 16 0, pointer;
	max-width: 200px;
}

#member-name.no-button-member { background-color:#7b401a; max-width: 200px; }
#member-name.incognito-member:hover { background-color:#7b401a; }

#player-info-leaderboard {
	height: 200px;
	width: 100%;
	overflow-y: auto;
}

.invitation-button {
	margin-left: 5px;
}

.container-box {
	display: inline-block;
	height: 400px;
	width:100%;
	overflow-y: scroll;
	-ms-overflow-style: none;
	user-select: text;
}

.container-box::-webkit-scrollbar, .subbox::-webkit-scrollbar, .subbox::-webkit-scrollbar-thumb,
.container-box::-webkit-scrollbar-thumb,
#mini-leaderboard-ranking::-webkit-scrollbar-thumb, #mini-leaderboard-ranking::-webkit-scrollbar,
#mini-leaderboard-ranking-after::-webkit-scrollbar-thumb, #mini-leaderboard-ranking-after::-webkit-scrollbar {

	background: #663619;
	border-radius: 10px;
}

.container-box::-webkit-scrollbar,
#mini-leaderboard-ranking::-webkit-scrollbar, #mini-leaderboard-ranking-after::-webkit-scrollbar{

	background: #7d4320;
}

#mini-leaderboard-ranking::-webkit-scrollbar, #mini-leaderboard-ranking-after::-webkit-scrollbar {

	width: 10px;
}

#leaderboard-ranking img { width: 34px; }

.subbox::-webkit-scrollbar-thumb {
	background: #613011;
}

.subbox::-webkit-scrollbar {
	background: #6d3817;
}

.chest-won-text-animation {
	animation: chest-won 400ms 1 ease;
}

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

#chest-animation {
	width: 200px;
	height: 260px;
}

.background-animation {
	position: relative;
	overflow: hidden;
	display: block;
	margin-top: 0;
	background: #7c4320;
	border-radius: 13px;
	margin-right: 20px;
	border: 7px solid var(--black);
	box-shadow: inset 0 12px 0 rgba(58, 50, 44, 0.5), 0 32px 0 var(--black);
}

#continue-button, #chest-canvas {
	transition: opacity 200ms;
}

.chest-item-animation {
	animation: chest-item 400ms 1 ease;
	animation-fill-mode: forwards;
	opacity:0;
}

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


.continue-button-animation {
	animation: continue 400ms 1 ease;
	animation-fill-mode: forwards;
	opacity:0;
}

@keyframes continue {
	0% {
		opacity:1;
		transform:scale(0.5);
	}
	30% {
		opacity:1;
		transform:scale(0.8, 1.1);
	}
	50% {
		opacity:1;
		transform:scale(1, 1.2);
	}
	100% {
		opacity:1;
		transform:scale(1);
	}
}

#chest-opening {
	width:100%;
	height:250px;
	z-index:30;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	background:var(--black);
	display: none;
	align-items: center;
	justify-content: center;
	animation: chest-opening 500ms 1 ease;
	transition: opacity 200ms;
}

@keyframes chest-opening {
	0% { height:0px; }
	50% { height:280px; }
	100% { height:250px; }
}

.ranking-box {
	display: flex;
	text-align: center;
	border-radius: 5px;
	padding: 5px 0px;
	margin: 5px;
}

.ranking-box:hover {
	background: #7c4320;
}

.ranking-box:active {
	background:var(--brown5);
}

.grey-rank {
	background: var(--brown1);
	cursor:url(../img/interface/cursor-pointer.png) 16 0, pointer;
}

.rank-selected {
	background: var(--brown1);
	margin-top: -6px;
	margin-bottom: -7px;
	line-height: 32px;
	border-radius: 3px;
}

.personal-rank-box {
	padding: 0px 6px;
	height:26px;
}

.pad-0-13 { padding: 0 13px; }

#mini-leaderboard-ranking .ranking-box {
	padding: 4.5px 0;
	font-size: 17px;
	margin: 0px;
	border-radius: 0;
}

.profile-leaderboard-rank { width: 37px; }

.profile-leaderboard-score { width: 92px; margin-left:auto; }
.profile-leaderboard-time { width:60px; margin-left:auto; }

.profile-personal-rank-box {
	padding: 0px 6px;
	white-space: nowrap;
	font-weight: 100;
}

.leaderboard-rank { width: 61px; }

.leaderboard-badge { width:50px; padding-left: 0; }

.leaderboard-name {
	width: 210px;
	text-align: left;
	padding-left:10px;
}

#badges-reward-box { width: 210px; }

#badges-box-container::-webkit-scrollbar { display: none; }

#badges-box-container {

	position: relative;
	height: 459px;
	margin-right: 5px;
	padding-top: 10px;
	padding-bottom: 10px;
	overflow-y: scroll;
	scroll-behavior: smooth;
	/*Firefox*/
	scrollbar-width: none;
}

#badges-box {
	position: absolute;
	width: 284px;
	padding-bottom: 10px;
}

#badges-description {
	height: 437px;
	font-size:14px;
	padding:7px 7px 14px 6px;
	display:none;
}

#sort-best { margin-left: -100px; margin-right: auto; }

.leaderboard-score { width: 150px; }

.leaderboard-best-score, .big-leaderboard-score { width: 120px; }

.leaderboard-kill { width: 60px; }
.leaderboard-level { width: 70px; }
.leaderboard-time { width: 88px; }

#total-score { font-size: 13px; }

.total-title {
	color: #eecc9b;
	user-select:none;
	background-color:var(--brown5);
	text-align:center;
	margin:4px;
	border-radius:6px;
	padding:5px;
}

.rating-title {
	display: flex;
	background: var(--brown1);
	box-shadow: none;
	color: #ffe6c2;
	padding: 0px 10px;
	margin: 6px 10px;
	height:26px;
	margin-right:15px;
	align-items:center;
	border-radius: 7px;
}

.rating-rank {
	width:40px;
	font-size:15px;
	padding: 0 6px;
}

.rating, .rating-selected {
	width:120px;
	font-size:16px;
	text-align:left;
}

.rating-box-selected {
	background: #eecc9b;
	color: #ffe6c2;
	box-shadow: inset 0 7px 0 0 rgb(229 191 133 / 0.65);
	height:22px;
}

.loader {
	width: 75px;
	height: 82px;
	-webkit-animation: spin 1s linear infinite;
	animation: spin 1s linear infinite;
}

@-webkit-keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.pet-rotate-wing {
	position: absolute;
	animation: wing infinite 4s ease;
}

.pet-rotate-wing2 {
	position: absolute;
	animation: wing2 infinite 4s ease;
}

.pet-appear-hmp {
	position: absolute;
	animation: appear-hmp infinite 3s ease-in-out;
}

@keyframes appear-hmp {
	0% { transform: translateY(-80px); }
	70% { transform: translateY(0px); }
	90% { transform: translateY(0px); }
	100% { transform: translateY(-80px); }
}

@keyframes wing {
	0% { transform: rotate(30deg); }
	70% { transform: rotate(0deg); }
	100% { transform: rotate(30deg); }
}

@keyframes wing2 {
	0% { transform: rotate(-30deg); }
	70% { transform: rotate(0deg); }
	100% { transform: rotate(-30deg); }
}

#name { width: 102.5%; margin-top: -12px; }

#play-box {
	position:relative;
	width: 100%;
	height: 62px;
}

#loading-middle-wrap {
	transition: opacity 200ms;
}

#loading-box {
	position: absolute;
	left: 44%;
	top: -6%;
}

#bottom-right-wrap {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 21;
	font-size: 10px;
	display: none;
	transition: opacity 200ms;
	transform-origin: bottom right;
	height: 24px;
	justify-content: space-between;
}

#bottom-right-wrap  a { color: #ffe6c2; }

.bottom-link {
	padding: 5px;
	text-align: center;
	background: var(--black);
	text-decoration: none;
	border-radius: 5px;
	margin-right: 5px;
	cursor:url(../img/interface/cursor-pointer.png) 16 0, pointer;
	color: #fae2be;
}

.rank-hover:hover {
	background-color: #7c4320;
	line-height: 24px;
	border-radius: 3px;
	cursor:url(../img/interface/cursor-pointer.png) 16 0, pointer;
}

.meter {
	height: 20px;
	/* Can be anything */
	width: 100px;
	position: relative;
	background-color: var(--red2);
	-moz-border-radius: 13px;
	-webkit-border-radius: 13px;
	border-radius: 13px;
	border: 6px solid var(--black);
}

.meter>span {
	display: block;
	height: 100%;
	border-radius:6px;
	background-color: var(--white);
	position: relative;
	overflow: hidden;
	box-shadow: inset 0px -8px 0px var(--beige);
}

.mobileCompatibility {
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.mobileCompatibility:focus {
	outline: none !important;
}

#profile-box {
	z-index:24;
	left: calc(50% - 400px);
	top: calc(50% - 235px);
	transform: scale(0);
}

#profile-box .tabs-section { display:flex; margin-top:-15px; position: relative; z-index: 2 }

#profile-box .section-button, #profile-box .section-button-selected,
#profile-box .section-button-selected:hover, #profile-box .section-button-selected:active {

	width: 22px;
	position: relative;
	margin-top: 0px;
	height: 46px;
	border-radius: 10px;
}

#profile-box .section-button-selected, #profile-box .section-button-selected:hover,
#profile-box .section-button-selected:active {

	height: 44px;
	margin-bottom: -1px;
	border-radius: 10px 10px 0 0;
}

#profile-box .section-button:last-child, #profile-box .section-button-selected:last-child { margin-right: 27px; }

#profile-box .section-button:hover .tooltip, #profile-box .section-button-selected:hover .tooltip,
#challenges-box .section-button:hover .tooltip, #challenges-box .section-button-selected:hover .tooltip {
	background: var(--brown3);
	top: 40px;
}

#stats, #inventory, #friends { z-index: 1 }

#stats .tooltip { left: -8px; }
#adventure .tooltip { left: -23px }
#ranking .tooltip { left: -5px; }
#clans .tooltip { left: -2px; }
#friends .tooltip { left: -10px; }
#offer-gift .tooltip { left: 4px; }
#inventory .tooltip, #cooking .tooltip { left: -13px; }

#profile-box .tabs-section img,
#friends-selected .section-button img { position: absolute; width: 53px; left: 8px; top: 2px; }
#friends-selected .section-button-selected img { position: absolute; width: 53px; left: 8px; top: 2px; }

#inventory-selected { display: none; }
#inventory-potions-selected {
	background: url(../img/interface/potion-inventory-in-game.png) no-repeat;
	width: 35%;
	background-size: 100%;
	margin-right: 5px;
	position: relative;
}

#inventory-potions-selected p { font-size: 18px; text-align: center; margin-top: 38px; }
#inventory-potions-selected div {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 10px;
	height: 378px;
	justify-content: space-between;
}
#inventory-shelf {
	position: absolute;
	top: 111px;
	left: -8px;
	pointer-events: none;
}

#inventory-potions-selected button::before {
    content: "CLICK\AHERE\ATO ADD";
    white-space: pre;
    display: block;
    color: rgb(221 172 83 / 70%);
    left: 0;
    right: 0;
    position: absolute;
    font-size: 12px;
}

#inventory-potions-selected button:hover::before,
#inventory-potions-selected button:active::before {
	color: var(--white);
}

#inventory-potions-selected button:active::before,
#inventory-potions-selected button.selected::before {
	content: "SELECT\A A POTION\A FROM \ATHE LIST";
}

#inventory-potions-selected button:has(img[style*="display: inline-block"])::before { display: none; }

#inventory-potions-selected button img {
	position: absolute;
	width: 100px;
	top: 0px;
	left: -8px;
	z-index: 1;
}

#inventory-container div:not(.clickable), .inventory div:not(.clickable) {
	background: url("../img/interface/inventory-item-unuse.png?1") no-repeat 100%;
}

#inventory-container div.empty, #inventory-container div.empty:hover,
.inventory div.empty, #inventory-potions-selected button.empty,
.inventory div.empty:hover, #inventory-potions-selected button.empty:hover {
	background-image: url("../img/interface/inventory-item-empty.png");
}

#inventory-potions-selected button { border: none; }
#inventory-potions-selected button:hover { filter: drop-shadow(0px 0px 7px #d57d47); }

#inventory-potions-selected button:active, .inventory .selected,
#inventory-potions-selected .selected, #inventory-potions-selected .selected:hover, #inventory-potions-selected .active,
#cooking-inventory-container .selected, #potion-protection-container .selected {
	background: url("../img/interface/inventory-item-hover.png") no-repeat 100%;
	filter: drop-shadow(0px 0px 7px #ebbe58);
}

#inventory-container, #cooking-inventory-container {
	width: 74%;
	height: 486px;
	box-sizing: border-box;
	overflow-y: auto;
	flex-wrap: wrap;
	justify-content: center;
}

#cooking-inventory-container {
	display: flex;
	width: 403px;
	height: 477px;
	justify-content: flex-start;
}

#inventory-potions-selected button.empty:active,
#inventory-potions-selected .empty.selected,  #inventory-potions-selected .empty.selected:hover, #inventory-potions-selected .empty.active {
	background-image: url("../img/interface/inventory-item-empty-active.png");
}

#inventory-potions-selected button,
.inventory div {
	cursor:url(../img/interface/cursor-pointer.png) 16 0, pointer;
}

#inventory-container div, #inventory-potions-selected button,
.inventory div, #cooking-inventory-container div {

	background: url("../img/interface/inventory-item.png") no-repeat 100%;
	width: 84px;
	height: 103px;
	margin: 5px;
	display: flex;
	align-items: center;
	position: relative;
}

#inventory-container div.clickable:hover, .inventory div:hover,
.inventory div:active, .inventory div.active { background-image: url("../img/interface/inventory-item-hover.png"); }

#inventory-container div.clickable:active,
.inventory div.clickable:active { filter: drop-shadow(0px 0px 7px #d57d47); }

#inventory-container img { z-index: 1; }
#inventory-container img, .inventory img { width: 100%; }
#inventory-container p, .inventory p {

	position: absolute;
	right: -5px;
	font-size: 25px;
	bottom: 0;
	transform: rotate(-15deg);
	font-weight: 900;
	z-index: 1;
}

#cooking-selected { display: flex; justify-content: space-between; }
#cooking-button-container {
	background: var(--black);
	border: 5px solid #7d4320;
	width: 305px;
	border-radius: 8px;
	height: 100%;
	padding: 10px;
}

#cooking-button-container .main { display: flex; height: 140px; margin-bottom: 40px; }
#cooking-button-container h2, #cooking-button-container h4 {
	background: var(--brown1);
	border-radius: 4px;
	padding: 7px;
	margin: 0 7px 0 0;
}
#cooking-button-container h2 { margin: 0 -9px 0 0; padding-right: 29px; width: 167px; }

#cooking-button-container h4,
#cooking-button-container h5 { margin: 10px 0; text-align: center; }
#cooking-button-container h2+h5 { width: 174px; }

#cooking-button-container .ingredients { display: flex; }
#cooking-button-container .ingredients div {
	background: var(--black0);
	border-radius: 5px;
	height: 70px; width: 70px;
	margin: 3px;
	position: relative;
}

#cooking-button-container .ingredients div.grayscale {
	border: 2px solid var(--red1);
	margin: 1px;
}

#cooking-button-container .ingredients img { width: 100%; }
#cooking-button-container .ingredients p {
	font-size: 25px;
	right: 0px;
	bottom: -10px;
	position: absolute;
}

#cooking-button {
	height: 100px;
	width: 150px;
	margin-top: 12px;
	font-size: 25px;
	color: var(--white);
}

#cooking-button-container section { text-align: center; height: 105px; position: relative;}
#cooking-button-container section h4 { width: 135px; font-size: 18px; }
#cooking-button-container section div { display: flex; justify-content: space-evenly; height: 28px; width: 149px; }
#cooking-button-container section img { width: 29px; }
#cooking-potion-image { z-index: 1; transform: rotate(-15deg); position: relative; left: 8px; width: 110px; height: 119px; top: 10px; }

#cooking-tooltip { margin-right: 3px; }
.potion-card {
	position: absolute;
	right: 15px;
	top: 74px;
}
#cooking-button-container div section .tooltip { background: var(--brown1); }

#cooking-button-container div section:hover .tooltip {
	display: inline-block;
	position: absolute;
	top: -70px;
	left: -96px;
	width: 260px;
	font-size: 16px;
}

#ingredient-box {
	position: absolute;
	display: flex;
}

#ingredient-box div { position: relative; }

#ingredient-box div:nth-child(2) img { animation-delay: 400ms; }
#ingredient-box div:nth-child(2) img { animation-delay: 700ms; }
#ingredient-box div:nth-child(3) img { animation-delay: 1000ms; }
#ingredient-box div:nth-child(4) img { animation-delay: 1200ms; }

#ingredient-box div:nth-child(2) div { animation-delay: 400ms; }
#ingredient-box div:nth-child(2) div { animation-delay: 700ms; }
#ingredient-box div:nth-child(3) div { animation-delay: 1000ms; }
#ingredient-box div:nth-child(4) div { animation-delay: 1200ms; }

#ingredient-box img { opacity: 0; width: 95px; }
#ingredient-box div img:nth-child(2) {
	position: absolute;
	left: 50px;
	top: 50px;
	width: 50px;
}

#ingredient-box .ingredient-amount {

	position: absolute;
	color: var(--white);
	opacity: 0;
	font-size: 25px;
	top: 0px;
	right: 0px;
	rotate: 20deg;
}

.ingredient-animation {
	animation: ingredient-appears 300ms cubic-bezier(1, 0, 1, 1) 1 forwards;
}

@keyframes ingredient-appears {

	0% { opacity: 0;
		transform: scale(2) translate(50px, 20px);
	}
	100% { opacity: 1;
		transform: scale(1) translate(0, 0);
	}
}

.tooltip-inventory {

	display: inline-block;
	white-space: nowrap;
	background: var(--black);
	border: 3px solid #9e5c33;
	border-radius: 10px;
	position: absolute;
	top: -20px;
	animation: chest-item 200ms 1 ease;
	animation-fill-mode: forwards;
	opacity: 0;
	left: -20px;
	z-index: 10;
	padding: 0;
	display: none;
}

.tooltip-inventory h3 {

	color: #f4c47a;
	font-weight: 100;
	line-height: 11px;
	margin-top: 2px;
}

.tooltip-inventory h4 {

	color: #b77044;
	font-weight: 100;
	margin-top: 10px;
	background: var(--black);
	padding: 5px;
	margin-left: -23px;
	padding-left: 24px;
	padding-right: 20px;
	width: 100%;
}

.tooltip-inventory .tooltip-title {
	display: flex;
	align-items: center;
	padding: 5px 15px;
}

.tooltip-inventory .tooltip-description {
	display: flex;
	align-items: center;
	background: #7d4320;
	margin-top: 10px;
}

.tooltip-inventory div:nth-of-type(3) { margin-top: 0px !important; border-radius: 0 0 6px 6px;}

.tooltip-inventory .tooltip-description img { z-index: 2 }

.community-settings {
	position: absolute;
	top: 10px;
	display: flex;
	width: 710px;
	left: 184px;
}

#hide-inventory, #hide-logon, #incognito {

	width: 170px;
	padding: 10px 15px 10px 10px;
	align-items: center;
	display: none;
}

#hide-logon { width: 205px; }
#incognito { width: 240px; }

#player-info-friend-request, #player-info-clan-request { color: var(--white); }

.request-button {

	padding: 15px !important;
	display: flex;
	margin-right: 5px;
}

.rotate-animation { animation: rotate 3s linear infinite; width: 30%; }

.scale-animation { animation: scale 3s linear infinite; }

.loading-box {
	position:absolute;
	z-index:5;
	top:0;
	left:40%;
	height:280px;
	width:405px;
}

@keyframes rotate {
	100% { transform: rotate(360deg); }
}

.crazy-animation {
	animation: crazy 500ms linear infinite;
	width:30%;
}

@keyframes crazy {
	0%, 100% { transform: rotate(-10deg); }
	50% { transform: rotate(10deg);
	}
}

@keyframes scale {
	50%, 70% { transform: scale(1.1); }
}

.sprite-animation {
	animation: sprite 500ms linear infinite;
	opacity: 1;
}

@keyframes sprite {
	0%, 50% {	opacity: 1; }
	51%, 100% { opacity: 0; }
}

.badge-bg {
	width:36px;
	background:var(--brown1);
	border-radius: 25px;
	padding: 5px;
}

.shadowed {
	text-shadow: rgb(58, 50, 44) 4px 0px 0px, rgb(58, 50, 44) 3.87565px 0.989616px 0px, rgb(58, 50, 44) 3.51033px 1.9177px 0px, rgb(58, 50, 44) 2.92676px 2.72656px 0px, rgb(58, 50, 44) 2.16121px 3.36588px 0px, rgb(58, 50, 44) 1.26129px 3.79594px 0px, rgb(58, 50, 44) 0.282949px 3.98998px 0px, rgb(58, 50, 44) -0.712984px 3.93594px 0px, rgb(58, 50, 44) -1.66459px 3.63719px 0px, rgb(58, 50, 44) -2.51269px 3.11229px 0px, rgb(58, 50, 44) -3.20457px 2.39389px 0px, rgb(58, 50, 44) -3.69721px 1.52664px 0px, rgb(58, 50, 44) -3.95997px 0.56448px 0px, rgb(58, 50, 44) -3.97652px -0.432781px 0px, rgb(58, 50, 44) -3.74583px -1.40313px 0px, rgb(58, 50, 44) -3.28224px -2.28625px 0px, rgb(58, 50, 44) -2.61457px -3.02721px 0px, rgb(58, 50, 44) -1.78435px -3.57996px 0px, rgb(58, 50, 44) -0.843183px -3.91012px 0px, rgb(58, 50, 44) 0.150409px -3.99717px 0px, rgb(58, 50, 44) 1.13465px -3.8357px 0px, rgb(58, 50, 44) 2.04834px -3.43574px 0px, rgb(58, 50, 44) 2.83468px -2.82216px 0px, rgb(58, 50, 44) 3.44477px -2.03312px 0px, rgb(58, 50, 44) 3.84068px -1.11766px 0px, rgb(58, 50, 44) 3.9978px -0.132717px 0px;
}

.shadowed2 {
	text-shadow: rgb(58, 50, 44) 6px 0px 0px, rgb(58, 50, 44) 5.91686px 0.995377px 0px, rgb(58, 50, 44) 5.66974px 1.96317px 0px, rgb(58, 50, 44) 5.2655px 2.87655px 0px, rgb(58, 50, 44) 4.71532px 3.71022px 0px, rgb(58, 50, 44) 4.03447px 4.44106px 0px, rgb(58, 50, 44) 3.24181px 5.04883px 0px, rgb(58, 50, 44) 2.35931px 5.51667px 0px, rgb(58, 50, 44) 1.41143px 5.83163px 0px, rgb(58, 50, 44) 0.424423px 5.98497px 0px, rgb(58, 50, 44) -0.574341px 5.97245px 0px, rgb(58, 50, 44) -1.55719px 5.79441px 0px, rgb(58, 50, 44) -2.49688px 5.45578px 0px, rgb(58, 50, 44) -3.36738px 4.96596px 0px, rgb(58, 50, 44) -4.14455px 4.33852px 0px, rgb(58, 50, 44) -4.80686px 3.59083px 0px, rgb(58, 50, 44) -5.33596px 2.74364px 0px, rgb(58, 50, 44) -5.71718px 1.8204px 0px, rgb(58, 50, 44) -5.93995px 0.84672px 0px, rgb(58, 50, 44) -5.99811px -0.150428px 0px, rgb(58, 50, 44) -5.89004px -1.14341px 0px, rgb(58, 50, 44) -5.61874px -2.1047px 0px, rgb(58, 50, 44) -5.19172px -3.00766px 0px, rgb(58, 50, 44) -4.62082px -3.82727px 0px, rgb(58, 50, 44) -3.92186px -4.54081px 0px, rgb(58, 50, 44) -3.11421px -5.12852px 0px, rgb(58, 50, 44) -2.22026px -5.57409px 0px, rgb(58, 50, 44) -1.26477px -5.86518px 0px, rgb(58, 50, 44) -0.274238px -5.99373px 0px, rgb(58, 50, 44) 0.723898px -5.95617px 0px, rgb(58, 50, 44) 1.70197px -5.75355px 0px, rgb(58, 50, 44) 2.63288px -5.39147px 0px, rgb(58, 50, 44) 3.49082px -4.87998px 0px, rgb(58, 50, 44) 4.25202px -4.23324px 0px, rgb(58, 50, 44) 4.89538px -3.46919px 0px, rgb(58, 50, 44) 5.40307px -2.60899px 0px, rgb(58, 50, 44) 5.76102px -1.67649px 0px, rgb(58, 50, 44) 5.95932px -0.697531px 0px;
}

.shadowed3 {
	text-shadow: rgb(58, 50, 44) 12px 0px 0px, rgb(58, 50, 44) 11.9584px 0.998843px 0px, rgb(58, 50, 44) 11.8337px 1.99075px 0px, rgb(58, 50, 44) 11.6269px 2.96885px 0px, rgb(58, 50, 44) 11.3395px 3.92634px 0px, rgb(58, 50, 44) 10.9733px 4.85657px 0px, rgb(58, 50, 44) 10.531px 5.75311px 0px, rgb(58, 50, 44) 10.0156px 6.60971px 0px, rgb(58, 50, 44) 9.43065px 7.42044px 0px, rgb(58, 50, 44) 8.78027px 8.17967px 0px, rgb(58, 50, 44) 8.06895px 8.88212px 0px, rgb(58, 50, 44) 7.30163px 9.52293px 0px, rgb(58, 50, 44) 6.48363px 10.0977px 0px, rgb(58, 50, 44) 5.62063px 10.6023px 0px, rgb(58, 50, 44) 4.71862px 11.0333px 0px, rgb(58, 50, 44) 3.78387px 11.3878px 0px, rgb(58, 50, 44) 2.82285px 11.6633px 0px, rgb(58, 50, 44) 1.84224px 11.8577px 0px, rgb(58, 50, 44) 0.848846px 11.9699px 0px, rgb(58, 50, 44) -0.15044px 11.9991px 0px, rgb(58, 50, 44) -1.14868px 11.9449px 0px, rgb(58, 50, 44) -2.13895px 11.8078px 0px, rgb(58, 50, 44) -3.11438px 11.5888px 0px, rgb(58, 50, 44) -4.06819px 11.2894px 0px, rgb(58, 50, 44) -4.99376px 10.9116px 0px, rgb(58, 50, 44) -5.88468px 10.458px 0px, rgb(58, 50, 44) -6.73475px 9.93192px 0px, rgb(58, 50, 44) -7.53808px 9.33688px 0px, rgb(58, 50, 44) -8.2891px 8.67703px 0px, rgb(58, 50, 44) -8.98258px 7.95696px 0px, rgb(58, 50, 44) -9.61372px 7.18167px 0px, rgb(58, 50, 44) -10.1781px 6.35653px 0px, rgb(58, 50, 44) -10.6719px 5.48727px 0px, rgb(58, 50, 44) -11.0916px 4.57993px 0px, rgb(58, 50, 44) -11.4344px 3.64081px 0px, rgb(58, 50, 44) -11.6977px 2.67641px 0px, rgb(58, 50, 44) -11.8799px 1.69344px 0px, rgb(58, 50, 44) -11.9796px 0.698716px 0px, rgb(58, 50, 44) -11.9962px -0.300857px 0px, rgb(58, 50, 44) -11.9296px -1.29834px 0px, rgb(58, 50, 44) -11.7801px -2.28682px 0px, rgb(58, 50, 44) -11.5489px -3.25942px 0px, rgb(58, 50, 44) -11.2375px -4.2094px 0px, rgb(58, 50, 44) -10.8481px -5.13016px 0px, rgb(58, 50, 44) -10.3834px -6.01532px 0px, rgb(58, 50, 44) -9.84671px -6.85874px 0px, rgb(58, 50, 44) -9.24164px -7.65454px 0px, rgb(58, 50, 44) -8.57243px -8.39723px 0px, rgb(58, 50, 44) -7.84372px -9.08163px 0px, rgb(58, 50, 44) -7.06058px -9.703px 0px, rgb(58, 50, 44) -6.22843px -10.257px 0px, rgb(58, 50, 44) -5.35305px -10.7399px 0px, rgb(58, 50, 44) -4.44052px -11.1482px 0px, rgb(58, 50, 44) -3.49717px -11.4791px 0px, rgb(58, 50, 44) -2.52955px -11.7304px 0px, rgb(58, 50, 44) -1.54437px -11.9002px 0px, rgb(58, 50, 44) -0.548477px -11.9875px 0px, rgb(58, 50, 44) 0.451226px -11.9915px 0px, rgb(58, 50, 44) 1.4478px -11.9123px 0px, rgb(58, 50, 44) 2.43432px -11.7505px 0px, rgb(58, 50, 44) 3.40395px -11.5071px 0px, rgb(58, 50, 44) 4.34995px -11.1838px 0px, rgb(58, 50, 44) 5.26576px -10.7829px 0px, rgb(58, 50, 44) 6.14503px -10.3072px 0px, rgb(58, 50, 44) 6.98164px -9.75995px 0px, rgb(58, 50, 44) 7.7698px -9.14495px 0px, rgb(58, 50, 44) 8.50404px -8.46648px 0px, rgb(58, 50, 44) 9.17925px -7.72925px 0px, rgb(58, 50, 44) 9.79076px -6.93838px 0px, rgb(58, 50, 44) 10.3343px -6.09935px 0px, rgb(58, 50, 44) 10.8061px -5.21799px 0px, rgb(58, 50, 44) 11.203px -4.30041px 0px, rgb(58, 50, 44) 11.522px -3.35299px 0px, rgb(58, 50, 44) 11.7612px -2.38229px 0px, rgb(58, 50, 44) 11.9186px -1.39506px 0px, rgb(58, 50, 44) 11.9934px -0.398151px 0px;
}

.shadowed4 {
	text-shadow: rgb(58, 50, 44) 3px 0px 0px, rgb(58, 50, 44) 2.83487px 0.981584px 0px, rgb(58, 50, 44) 2.35766px 1.85511px 0px, rgb(58, 50, 44) 1.62091px 2.52441px 0px, rgb(58, 50, 44) 0.705713px 2.91581px 0px, rgb(58, 50, 44) -0.287171px 2.98622px 0px, rgb(58, 50, 44) -1.24844px 2.72789px 0px, rgb(58, 50, 44) -2.07227px 2.16926px 0px, rgb(58, 50, 44) -2.66798px 1.37182px 0px, rgb(58, 50, 44) -2.96998px 0.42336px 0px, rgb(58, 50, 44) -2.94502px -0.571704px 0px, rgb(58, 50, 44) -2.59586px -1.50383px 0px, rgb(58, 50, 44) -1.96093px -2.27041px 0px, rgb(58, 50, 44) -1.11013px -2.78704px 0px, rgb(58, 50, 44) -0.137119px -2.99686px 0px, rgb(58, 50, 44) 0.850987px -2.87677px 0px, rgb(58, 50, 44) 1.74541px -2.43999px 0px, rgb(58, 50, 44) 2.44769px -1.73459px 0px, rgb(58, 50, 44) 2.88051px -0.838247px 0px;
}

.shadowed5 {
	text-shadow: rgb(58, 50, 44) 9px 0px 0px, rgb(58, 50, 44) 8.9445px 0.997944px 0px, rgb(58, 50, 44) 8.77869px 1.98358px 0px, rgb(58, 50, 44) 8.50461px 2.94475px 0px, rgb(58, 50, 44) 8.12565px 3.86961px 0px, rgb(58, 50, 44) 7.64647px 4.74674px 0px, rgb(58, 50, 44) 7.07299px 5.56533px 0px, rgb(58, 50, 44) 6.41227px 6.31528px 0px, rgb(58, 50, 44) 5.67248px 6.98735px 0px, rgb(58, 50, 44) 4.86272px 7.57324px 0px, rgb(58, 50, 44) 3.99299px 8.06573px 0px, rgb(58, 50, 44) 3.07402px 8.45875px 0px, rgb(58, 50, 44) 2.11714px 8.74744px 0px, rgb(58, 50, 44) 1.13414px 8.92825px 0px, rgb(58, 50, 44) 0.137162px 8.99895px 0px, rgb(58, 50, 44) -0.861512px 8.95867px 0px, rgb(58, 50, 44) -1.84956px 8.8079px 0px, rgb(58, 50, 44) -2.8148px 8.5485px 0px, rgb(58, 50, 44) -3.74532px 8.18368px 0px, rgb(58, 50, 44) -4.62965px 7.71792px 0px, rgb(58, 50, 44) -5.45689px 7.15698px 0px, rgb(58, 50, 44) -6.21682px 6.50777px 0px, rgb(58, 50, 44) -6.90009px 5.77831px 0px, rgb(58, 50, 44) -7.49825px 4.97757px 0px, rgb(58, 50, 44) -8.00394px 4.11545px 0px, rgb(58, 50, 44) -8.41092px 3.20258px 0px, rgb(58, 50, 44) -8.71416px 2.2502px 0px, rgb(58, 50, 44) -8.90993px 1.27008px 0px, rgb(58, 50, 44) -8.99582px 0.274291px 0px, rgb(58, 50, 44) -8.97076px -0.72488px 0px, rgb(58, 50, 44) -8.83507px -1.71511px 0px, rgb(58, 50, 44) -8.59041px -2.68419px 0px, rgb(58, 50, 44) -8.23981px -3.62017px 0px, rgb(58, 50, 44) -7.78758px -4.51149px 0px, rgb(58, 50, 44) -7.23931px -5.34718px 0px, rgb(58, 50, 44) -6.60176px -6.11692px 0px, rgb(58, 50, 44) -5.88279px -6.81122px 0px, rgb(58, 50, 44) -5.09127px -7.42152px 0px, rgb(58, 50, 44) -4.23696px -7.94029px 0px, rgb(58, 50, 44) -3.33039px -8.36113px 0px, rgb(58, 50, 44) -2.38275px -8.67885px 0px, rgb(58, 50, 44) -1.40572px -8.88954px 0px, rgb(58, 50, 44) -0.411357px -8.99059px 0px, rgb(58, 50, 44) 0.58808px -8.98077px 0px, rgb(58, 50, 44) 1.58026px -8.86018px 0px, rgb(58, 50, 44) 2.55296px -8.63032px 0px, rgb(58, 50, 44) 3.49417px -8.29402px 0px, rgb(58, 50, 44) 4.39229px -7.85543px 0px, rgb(58, 50, 44) 5.23623px -7.31996px 0px, rgb(58, 50, 44) 6.0156px -6.69422px 0px, rgb(58, 50, 44) 6.72078px -5.98591px 0px, rgb(58, 50, 44) 7.34307px -5.20378px 0px, rgb(58, 50, 44) 7.87479px -4.35748px 0px, rgb(58, 50, 44) 8.3094px -3.45743px 0px, rgb(58, 50, 44) 8.64153px -2.51474px 0px, rgb(58, 50, 44) 8.86709px -1.54104px 0px, rgb(58, 50, 44) 8.98328px -0.548328px 0px;
}

.triangle {
	border-style: solid;
	border-width: 24px 0 24px 50px;
	border-color: transparent transparent transparent #eecc9b;
	margin-left: -17px;
	margin-right: -34px;
	display: none;
}

/* ---- Pet's Information ---- */

#pet-rename {

	left: calc(50% - 365px);
	top: calc(50% - 158px);
	transform: scale(0);
	z-index:22;
	width: 730px;
	height: 470px;
}

#pet-rename .skill-line { background: var(--brown5); }
#pet-rename .skill-line-title { background: var(--black); }
#pet-rename .skill-picture-container { height: 50px; padding: 7px; margin: 9px; }
#ingame-skill-picture { width: auto; height: 100%; }
#ingame-tamodex-pet-chart {
	width: 49%;
	gap: 10px;
	justify-content: space-around;
	margin-left: 10px;
	background: var(--brown5);
	padding: 10px;
}
#pet-rename .tamodex-radar-chart-stat-name {
	margin-right: auto;
	margin-left: 27px;
}
#pet-rename .tamodex-radar-chart-stat,
#ingame-tamodex-radar-chart-attack.tamodex-radar-chart-stat {
	width: 45%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

#rename-container { z-index: 1; }

#pet-rename .pet-tips-box { position: relative; }

#ingame-pet-tips-container {
	flex-direction: column;
	background: var(--black);
	height: auto;
	margin-bottom: 0;
	border-radius: 6px;
	margin-left: 10px;
}

#pet-rename #ingame-tamodex-radar-chart-regen-points,
#pet-rename #ingame-tamodex-radar-chart-regen-speed { width: 96%; }

#pet-rename img.tamodex-radar-chart-stat-img {
	margin-left: -10px;
	width: 34px;
}

#release { width:35%; }

#release-container {
	width: 40%;
	background: var(--brown5);
	border-left: 2px solid var(--brown2);
}

#rename {
	/*
	width:30%;
	color:#ffe6c2;
	padding: 5px 0 0 0;
	height:35px;
	margin:auto;
	margin-top:10px;
	*/
}

#rename:active {
	/*
	padding: 10px 0 0 0;
	height:30px;
	*/
}

.grey-background {

	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform-origin: 0 0;
	display: none;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background: rgba(58,50, 44, 0.7);
	color: #FFE6C2;
	z-index: 200;
	transform-origin: center;
	transition: opacity 300ms;
}

.incompatible-background {

	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding-top:110px;
	display: none;
	background: rgba(0,0,0,0.8);
	color: #FFE6C2;
	z-index: 200;
	transform-origin: center;
	transition: opacity 300ms;
}

#show-events-button-member { position: relative; }

#clan-leave-button { margin-right: 3px;}
#landscape-image { margin-top: 30px; }

#landscape-animation { animation: rotate-90 1s ease infinite; }

@keyframes rotate-90 {
	0%, 100% { transform: rotate(0deg); }
	50%, 80% { transform: rotate(-90deg); }
}

#landscape-text {
	text-align: center;
	width: 250px;
	margin-bottom: 20px;
}

.stats-scores {
	text-align: center;
	width: 94%;
	margin-left: 5px;
	padding: 0;
	border-radius: 4px;
	height: 30px;
	background: var(--brown1);
	display: flex;
	align-items: center;
	justify-content: center;
}

.card-won-container {
	background: #36322C;
	align-items: center;
	justify-content: center;
	display: flex;
	height: 100%;
	width:500px;
}

.item-won {
	position:relative;
	width: 160px; height: 160px;
	margin: 20px;
}

.down-animation {
	animation: down 300ms 1 ease;
	z-index:-1;
	top:180px;
	animation-fill-mode: forwards;
}

@keyframes down {
	0% { top:180px; }
	50% { top:300px; }
	100% { top:295px; }
}

.down1-animation {
	animation: down0 800ms 1 ease;
	z-index:-1;
	top:100px;
	animation-delay: 0.5s;
	animation-fill-mode: forwards;
}

.down0-animation {
	animation: down0 800ms 1 ease;
	z-index:-1;
	top:100px;
	animation-delay: 2s;
	animation-fill-mode: forwards;
}

@keyframes down0 {
	0% {
		opacity: 1;
		top:100px;
	}
	50% {
		opacity: 1;
		top:225px;
	}
	100% {
		opacity: 1;
		top:220px;
	}
}

.up0-animation {
	animation: up0 250ms 1 ease;
	z-index:-1;
	top:100px;
	animation-delay: 0s;
	animation-fill-mode: forwards;
}

@keyframes up0 {
	0% {
		top:220px;
		opacity:1;
	}
	50% {
		top:225px;
		opacity:1;
	}
	100% {
		top:100px;
		opacity:1;

	}
}

.move-down-animation {
	animation: movedown 7000ms infinite linear;
	top:0px;
}

@keyframes movedown {
	0% { top:0px; }
	100% { top:-418px; }
}

.move-up-animation {
	animation: moveup 7000ms infinite linear;
	top:-420px;
}

@keyframes moveup {
	0% {
		/*top:-341px;*/
	 	top: -426px;
	}
	100% { top:0px; }
}

.scale-button-animation {
	animation: scalebutton 1000ms infinite linear;
}

.scale-claim-button-animation {
	animation: scaleclaimbutton 1000ms infinite linear;
}

@keyframes scalebutton {
	0%, 100% {
		transform:scale(1.05) translate(0);
		width:160px;
	}
	50% { transform:scale(1.1) translate(0); }
}

@keyframes scaleclaimbutton {
	0%, 100% {
		transform:scale(1.05) translate(0);
		width:120px;
	}
	50% {
		transform:scale(1.1) translate(0);
	}
}

#blo-box {
	z-index: 25;
	left: calc(50% - 307px);
	top: calc(50% - 170px);
	transform: scale(0);
	display:none;
	height: 325px;
}

/* -- Scoreboard --*/

#scoreboard-wrap {
	z-index: 2;
	position: absolute;
	top: 0;
	left: 360px;
	flex-wrap: wrap;
	display:flex;
	justify-content:space-between;
	width:700px;
	height:280px;
	transition: opacity 200ms;
	color:#eddba8;
}

#scoreboard-left {
	display:flex;
	flex-wrap:wrap;
	width:73%;
	height:300px;
	flex-direction:column;
	/* it generates bug on firefox
	justify-content: end;*/
	align-items:center;
	margin-top:-25px;
}

#scoreboard-right {
	font-size: 18px;
	z-index: 2;
	border-radius:13px;
	width:24%;
	height:300px;
	margin-top:-23px;
	overflow-y:scroll;
	display:flex;
	align-items: center;
	flex-wrap: wrap;
	/*to remove when more pets */
	margin-top:-25px;
}

#scoreboard-right::-webkit-scrollbar {
	background: #3e4d26;
	border-radius: 10px;
}

#scoreboard-right::-webkit-scrollbar-thumb {
	background: #3a322b;
	border-radius: 10px;
}

.scoreboard-tamed-pet-box {
	display:flex;
	width:140px;
	margin:10px 0;
}

.scoreboard-tamed-pet-card {
	height: 70px;
	background: var(--black);
	padding: 0 5px 6px 5px;
	border-radius: 11px;
	box-shadow: 7px 6px 0px 0px var(--black);
}

.scoreboard-tamed-pet-number-box {
	background-color: var(--black);
	height: 37px;
	border-radius: 0 10px 10px 0;
	width: 100%;
	justify-content: flex-end;
	margin-top: 25px;
	align-items: center;
	display: flex;
	flex-direction: column;
}

.scoreboard-tamed-pet-ingame { font-size: 25px; color:#a8c636 }
.scoreboard-tamed-pet-needed { font-size:13px; }

.scoreboard-continue {
	text-align:center;
	border-radius:10px;
	width:295px;
	height:40px;
	background-color: #a8c636;
	border: 6px solid var(--black);
	box-shadow: inset 0 -6px 0 #83aa22;
	padding-top:10px;
	font-size:20px;
	cursor: url(../img/interface/cursor-pointer.png) 16 0, pointer;
}

.scoreboard-continue:hover {
	background-color: #b9d15d;
	box-shadow: inset 0 -6px 0 #97ba40;
	padding-top:10px;
	height:40px;
}

.scoreboard-continue:active {
	background-color: #839e1b;
	box-shadow: inset 0 6px 0 #628214;
	padding-top:10px;
	height:35px;
}

#scoreboard-items-list {
	display: flex;
	flex-wrap: wrap;
	background: var(--brown5);
	border-radius: 7px;
	padding: 6px;
	justify-content: center;
	margin-top: 10px;
}

#scoreboard-items-list div {
	margin: 5px;
	position: relative;
}

#scoreboard-items-list img {
	width: 60px;
	background: var(--black);
	border-radius: 45px;
	margin: 5px 0;
}

#scoreboard-items-list p {
	font-size: 26px;
	position: absolute;
	right: -4px;
	top: 37px;
}

/* --- flex --- */

.flex, .flex-end, .flex-align-end, .flex-align-start, .flex-evenly, .flex-around, .flex-column,
.flex-wrap, .flex-center-around, .flex-center, .flex-between, .flex-align-center, .flex-justify-center  { display:flex; }
.flex-left-auto { margin-left:auto; }
.flex-end { justify-content: flex-end; }
.flex-align-end { align-items:flex-end; }
.flex-align-start { align-items:flex-start; }
.flex-wrap { flex-wrap:wrap; }
.flex-center-around { align-items:center; justify-content:space-around; }
.flex-center { align-items:center; justify-content:center; }
.flex-between { justify-content:space-between; }
.flex-align-center { align-items:center; }
.flex-column { flex-direction:column; }
.flex-around { justify-content:space-around; width: 100%; }
.flex-evenly { justify-content:space-evenly; }
.flex-justify-center { justify-content:center; }

.categoryList {
	display:inline-flex;
	/* GPU acceleration */
	transform: translateZ(0);
}

.text-center { text-align:center; }
.text-right { text-align:right; }

.scoreboard-stats-title { font-size:19px; }

.scoreboard-stats-result { font-size:33px; margin-top:-5px; }

.scoreboard-background-line {
	border-radius:6px;
	height:27px;
	width:100%;
	padding-top:5px;
}

#scoreboard-title-score {
	font-size:23px;
	margin-bottom:1px;
}

#scoreboard-score {
	font-size:36px;
	margin-top:-11px;
}

#container-stats { width:100%; }

#container-rewards {
	margin-top: 35px;
	margin-bottom: -46px;
}

#scoreboard-rank {
	margin-left:-1px;
	width: 40px;
	background: #b34f32;
	border-radius: 30px;
	padding: 2px 0;
	border: 6px solid var(--black);
	cursor:url(../img/interface/cursor-pointer.png) 16 0, pointer;
}

#scoreboard-rank:hover {
	filter:brightness(1.1);
	background:#C8EC41;
}

#scoreboard-rank:active {
	filter:brightness(0.9);
	background:#63790e;
}

.scoreboard-levelup-icon {
	margin-top:-1px;
	height:22px;
}

#scoreboard-arrow {
	height:28px;
	margin-left:-15px;
	margin-top:19px;
	z-index:1;
}

#scoreboard-killer-box {
	position: absolute;
	left: 0;
	width: 139px;
}

#scoreboard-killer {
	font-size: 17px;
	margin-top: -4px;
	padding-left: 5px;
	padding-bottom: 7px;
}

#badge-unlocked-img {
	margin-bottom:-6px;
	width:28px;
	background: #b04e32;
	border-radius: 30px;
	border: 5px solid var(--black);
	padding: 1px;
}

#badge-unlocked { margin-right:7px; }

#tamed-tooltip { display:none; }

#tamed-level:hover > #tamed-tooltip {
	width: 174px;
	position:absolute;
	margin-top: -57px;
	margin-left: 0px;
	display: inline-block;
	animation: tooltip 300ms 1 ease;
}

#tamed-box:active > #tamed-tooltip { display:none; }

.pet-card-unlocked-img {
	width:40px;
	margin-bottom:-17px;
	background: var(--black);
	padding: 0px 3px;
	border-radius: 8px;
}

.new-plus-img {
	height:24px;
	margin-top:-2px;
	margin-left:1px;
}

#levelup-apple-position {
	width:30px;
	background: var(--black);
	border-radius: 21px;
	z-index: 0;
	padding: 2px 0px 2px 0px;
	margin-left: -4px;
	margin-top: -3px;
}

#levelup-apple-won {
	font-size:18px;
	z-index:1;
}

.scoreboard-time-unity {
	font-size:14px;
	margin-left:5px;
	margin-right:5px;
}

#apple-won-ingame {
	width:39px;
	background: var(--black);
	border-radius: 21px;
	z-index: 0;
	padding: 2px 0px 4px 0px;
	margin-left: -4px;
	margin-top: -3px;
}

.main-background-line {
	margin-top:17px;
	background-color: var(--black);
}

#won-ingame-logout { margin-top:-10px; }

#won-ingame-logged {
	margin-bottom:0px;
	font-size:18px;
}

#you-died {
	width:100%;
	height:250px;
	z-index:30;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	background:var(--black);
	display: none;
	align-items: center;
	justify-content: center;
	animation: chest-opening 500ms 1 ease;
	transition: opacity 200ms;
	font-size:50px;
	color: #ffe6c2;
}

#button-type-skill {
	height: 76px;
	background: #7c4320;
	width: 97%;
	text-align: center;
	box-shadow: 0 8px 0 0 #4d2a14;
	border-radius: 6px;
	font-size:15px;
	cursor: url(../img/interface/cursor-pointer.png) 16 0, pointer;
}

#button-type-skill:hover {
	background: var(--gold0);
	box-shadow: 0 8px 0 0 #7c4320;
}

#button-type-skill:active {
	background: #4d2a14;
	box-shadow: 0 -8px 0 0 #7c4320;
	margin-top:8px 0 -8px;
}

#button-type-skill:hover > #type-skill-tooltip,
#pet-slot2:hover > #pet-army1-tooltip, #pet-slot3:hover > #pet-army2-tooltip,
#dragon-box:hover > #badge-dragon-tooltip{
	margin-top: -152px;
	margin-left: -23px;
	position: absolute;
	display: inline-block;
	z-index: 1;
	animation: tooltip 300ms 1 ease;
}

#pet-slot2:hover > #pet-army1-tooltip, #pet-slot3:hover > #pet-army2-tooltip {
	margin-top: -100px;
	margin-left: -185px;
	width:110px;
	text-shadow:none;
}

#button-type-skill:hover > #type-skill-tooltip{
	width: 220px;
	margin-top: 16px;
	margin-left: 0px;
	position: relative;
}

#badge-preview-13, #badge-preview-14,
#badge-preview-12,#badge-preview-11,#badge-preview-10,
#badge-preview-9, #badge-preview-8, #badge-preview-7,
#badge-preview-6, #badge-preview-5, #badge-preview-4,
#badge-preview-3, #badge-preview-2, #badge-preview-1 {

	display:flex;
}

#type-skill-tooltip, #pet-army1-tooltip, #pet-army2-tooltip,
#badge-preview-13-tooltip, #badge-preview-14-tooltip,
#badge-preview-12-tooltip,#badge-preview-11-tooltip,#badge-preview-10-tooltip,
#badge-preview-9-tooltip, #badge-preview-8-tooltip, #badge-preview-7-tooltip,
#badge-preview-6-tooltip, #badge-preview-5-tooltip, #badge-preview-4-tooltip,
#badge-preview-3-tooltip, #badge-preview-2-tooltip, #badge-preview-1-tooltip {

	display:none;
}

.badge-preview-container-locked { height: 89px; }
.badge-preview-current { height: 120px; }
.badge-preview-container { height: 71px; }

.badge-preview-left {
	background: var(--black);
	width: 12px;
	position: relative;
}

.badge-preview-left-lock { background: #693e23; }

.badge-preview-right {
	overflow: hidden;
	width: 200px;
	position: relative;
}

.badge-preview-background { margin: -1px 0 0 -1px; }

#badge-preview-1-right > .badge-preview-background, #badge-preview-2-right > .badge-preview-background,
#badge-preview-3-right > .badge-preview-background, #badge-preview-4-right > .badge-preview-background, #badge-preview-5-right > .badge-preview-background,
#badge-preview-6-right > .badge-preview-background, #badge-preview-7-right > .badge-preview-background,
#badge-preview-8-right > .badge-preview-background, #badge-preview-9-right > .badge-preview-background,
#badge-preview-10-right> .badge-preview-background, #badge-preview-11-right > .badge-preview-background,
#badge-preview-12-right> .badge-preview-background, #badge-preview-13-right > .badge-preview-background, #badge-preview-14-right > .badge-preview-background {
	opacity: 0.3;
}

.badge-preview-name {
	position: absolute;
	top: -14px;
	left: 0;
	margin: 0 auto;
	font-size: 18px;
	right: 0;
	text-align: center;
}

.badge-preview-score {
	text-align: center;
	margin-top: 11px;
	font-size: 24px;
}

.badge-preview-info {
	position: absolute;
	background: var(--black);
	top: 28px;
	left: 0;
	height: 67px;
	width: 200px;
}

.badge-preview-name-unlocked {
	position: absolute;
	top: 42px;
	left: -4px;
	margin: 0 auto;
	font-size: 15px;
	right: 0;
	text-align: center;
	z-index: 1;
}

.badge-preview-locked {
	position: absolute;
	left: 78px;
	top: 10px;
}

.badge-preview-unlocked {
	background: var(--black);
	position: absolute;
	z-index: 1;
	left: 78px;
	top: 10px;
	width: 39px;
	height: 28px;
	border-radius: 20px;
	text-align: center;
	padding-top: 10px;
}

.badge-preview-lock-image, .badge-preview-unlock-image, .badge-preview-image {
	position: absolute;
	left: -27px;
	top: 16px;
	z-index: 1;
	width: 64px;
}

.badge-preview-unlock-image { top: 7px; }
.badge-preview-image { width: 96px; left: -41px; }

.badge-preview-price {
	color: #fd4242;
	font-size: 21px;
	position: absolute;
	left: 0px;
	top: 47px;
	right: 0;
	text-align: center;
}

.badge-preview-gauge {
	position: absolute;
	top: 42px;
	left: 26px;
}

.badge-preview-gauge-background {
	background: #4f443d;
	height: 15px;
	width: 150px;
	border-radius: 15px;
	display: flex;
	overflow: hidden;
	justify-content: flex-start;
}

.badge-preview-gauge-border {
	border: 4px solid var(--black);
	height: 10px;
	width: 144px;
	border-radius: 15px;
	position: absolute;
	top: -1px;
	left: -1px;
}

.resources-start {
	width: 97px;
	background: var(--black);
	border-radius: 8px;
	display: flex;
	justify-content: space-evenly;
	margin: 2px;
	padding: 5px 0;
	height: 56px;
	align-items: center;
}

@keyframes tooltip {
	0% { transform: scale(0); }
	50% { transform: scale(1.1); }
	100% { transform: scale(1); }
}

#pet-stats { display: none; }

.tamodex-pet-image-container {
	width: 50px;
	height: 61px;
	position: absolute;
	top: 4px;
	overflow: hidden;
	left: 5px;
}

.tamodex-card-container {
	position: relative;
	margin: 4px;
	height: 69px;
	width: 203px;
}

.tamodex-badge-container {
	position: absolute;
	background: var(--black);
	top: 2px;
	left: 55px;
	width: 37px;
	height: 65px;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}

.tamodex-pet-name-container {
	position: absolute;
	font-size: 17px;
	left: 96px;
	top: 50%;
	transform: translateY(-50%);
	width: 106px;
}

.tamodex-pet-name { padding-left: 3px; }

.tamodex-pet-very-small-name { font-size: 15px; }

.tamodex-pet-hover-container { display: none; }

.tamodex-card-container:hover > .tamodex-pet-hover-container {
	display: flex;
	position: absolute;
	top: 0;
	left: 0;
	background: rgb(58 50 43 / 80%);
	width: 100%;
	height: 100%;
	border-radius: 10px;
	align-items: center;
}

.tamodex-pet-hover-tame {
	text-align: center;
	width: 52px;
	margin-left: 4px;
}

.tamodex-pet-hover-tame-value {
	font-size: 22px;
	margin-top: -4px;
}

.tamodex-pet-hover-level {
	text-align: center;
	width: 52px;
	margin-left: 35px;
}

.tamodex-pet-hover-level-title {
	font-size: 25px;
	margin-top: -1px;
}

.tamodex-pet-hover-level-value {
	font-size: 22px;
	margin-top: -2px;
}

.tamodex-pet-hover-overbreed {
	text-align: center;
}

.tamodex-pet-hover-overbreed-title {
	font-size: 25px;
	margin-top: -1px;
}

.tamodex-pet-hover-overbreed-value {
	font-size: 22px;
	margin-top: -2px;
}

.tamodex-pet-hover-add, .tamodex-pet-hover-add, .tamodex-pet-hover-see {
	cursor: url(../img/interface/cursor-pointer.png) 16 0, pointer;
}

.tamodex-pet-hover-add.button-homepage {
	background: #91af3b;
	box-shadow: inset 0 -5px 0 #70921b;
}

.tamodex-pet-hover-add.button-homepage:hover {
	background: #a5c742;
	box-shadow: inset 0 -5px 0 #91af3b;
}

.tamodex-pet-hover-add.button-homepage:active {
	background: #708e1b;
	box-shadow: inset 0 -5px 0 #546d0f;
}

.tamodex-pet-hover-see {
	margin-left: 38px;
	margin-right: 2px;
}

.tamodex-pet-hover-image-see { margin-top: 7px; }
.tamodex-pet-hover-image-add { margin-top: 2px; }
.tamodex-pet-hover-image-skin { margin-top: 2px; }

.tamodex-pet-stats-taming {
	background: #39322b;
	border-radius: 6px;
	padding: 7px 10px;
	display: flex;
	justify-content: space-between;
	width: 260px;
}

#tamodex-pet-stats-text-details { font-size: 12px; }

.tamodex-pet-stats-taming-value {
	font-size: 21px;
	font-weight: 100;
	display: flex;
	align-items: center;
}

#tamodex-pet-stats-text-title { width: max-content; }

#tamodex-pet-stats-select {
	background: #9e5c33;
	text-align: center;
	margin: 0 13px;
	border-radius: 8px;
	padding: 5px;
	margin-bottom: 10px;
}

.tamodex-pet-stats-level-container {
	background: #9e5c33;
	height: 50px;
	border-radius: 6px;
	position: relative;
}

#tamodex-pet-stats-level-locked {
	background: rgb(57 50 43 / 80%);
	border-radius: 6px;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.tamodex-pet-stats-level {
	display: flex;
	justify-content: space-between;
}

#tamodex-pet-stats-level-number-container, #tamodex-pet-stats-ob-number-container, .staging-level-number-container {
	width: 50px;
	background: #39322b;
	border-radius: 5px;
	text-align: center;
	margin: 3px;
	padding: 2px 0;
	height: 39px;
}

.staging-level-number-container {
	height: 27px;
}

#tamodex-pet-stats-level-gauge, .staging-level-gauge {
	background: #39322b;
	width: 202px;
	margin: 3px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	padding: 5px 10px;
	position: relative;
	flex-direction: column;
}

.staging-level-gauge {
	width: 100%;
	padding: 5px;
}

.tamodex-pet-stats-gauge-background, .staging-gauge-background {
	background: #fde4c1;
	height: 15px;
	width: 100%;
	border-radius: 4px;
}

.staging-gauge-background {
	margin-top: 1px;
	height: 19px;
	border-radius: 2px;
}

.staging-custom-pet {
	position: absolute;
	top: 170px;
	left: 150px;
}

.staging-remove-pet {
	position: absolute;
	top: 0;
	right: 0;
}

.staging-see-pet {
	position: absolute;
	top: 180px;
	left: 0px;
}

#pet-staging {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 700px;
	padding: 10px 10px;
}

#tamodex-pet-stats-gauge-value, .staging-gauge-value {
	background: #7869d1;
	width: 0%;
	height: 15px;
	position: absolute;
	top: 5px;
	left: 10px;
}

.staging-gauge-value {
	top: 6px;
	left: 5px;
	height: 18px;
}

.tamodex-pet-stats-gauge-border, .staging-gauge-border {
	border: 4px solid #39322b;
	height: 15px;
	width: 202px;
	position: absolute;
	border-radius: 7px;
	left: 9px;
	top: 2px;
	box-shadow: inset 0 5px 0 rgb(57 50 43 / 20%);
}

.staging-gauge-border {
	width: 158px;
	left: 1px;
	height: 18px;
}

.staging-name {
	bottom: 95px;
	height: 37px;
	font-size: 18px;
	border-radius: 6px;
	width: 210px;
	position: absolute;
}

.staging-level {
	bottom: 58px;
	width: 216px;
	position:absolute;
}
.staging-custom-pet-tooltip, .staging-remove-pet-tooltip, .staging-see-pet-tooltip, .card-shield-tooltip, .card-skill-tooltip  {
	display: none;
}

.card-shield-box, .card-skill-box {
	right: 0px;
	bottom: 30px;
	top: unset !important; left: unset !important;
	z-index: 2;
}

.card-shield, .card-skill {
	width: 56px;
	margin-left: 60px;
}

.card-shield-box:hover .card-shield-tooltip, .card-skill-box:hover .card-skill-tooltip {
	position: absolute;
	left: -3px;
	display: inline-block;
	animation: tooltip 300ms 1 ease;
	z-index: 10;
	top: -50px;
	font-size: 20px;
	padding: 5px;
}

#staging-custom-pet-button0:hover > .staging-custom-pet-tooltip,
#staging-custom-pet-button1:hover > .staging-custom-pet-tooltip,
#staging-custom-pet-button2:hover > .staging-custom-pet-tooltip,
#staging-see-pet0:hover > .staging-see-pet-tooltip,
#staging-see-pet1:hover > .staging-see-pet-tooltip,
#staging-see-pet2:hover > .staging-see-pet-tooltip,
#staging-remove-pet-button0:hover > .staging-remove-pet-tooltip,
#staging-remove-pet-button1:hover > .staging-remove-pet-tooltip,
#staging-remove-pet-button2:hover > .staging-remove-pet-tooltip  {
	width: 274px;
	border-radius: 8px;
	position: absolute;
	left: -41px;
	display: inline-block;
	animation: tooltip 300ms 1 ease;
	z-index: 1;
	top: 121px;
}

#staging-see-pet0:hover > .staging-see-pet-tooltip,
#staging-see-pet1:hover > .staging-see-pet-tooltip,
#staging-see-pet2:hover > .staging-see-pet-tooltip {
	width: 224px;
	left: -14px;
	top: -59px;
}

#staging-remove-pet-button0:hover > .staging-remove-pet-tooltip,
#staging-remove-pet-button1:hover > .staging-remove-pet-tooltip,
#staging-remove-pet-button2:hover > .staging-remove-pet-tooltip {
	width: 244px;
	left: -23px;
	top: 64px;
}

#tamodex-pet-stats-level-gauge h6 {
	margin-top: 4px;
	margin-right: 4px;
	padding-left: 18px;
}

#tamodex-pet-stats-level-xp-bonus { font-weight: 500; color: var(--red0); }
#tamodex-pet-stats-level-xp-bonus.bonus { color: var(--green1); }

#tamodex-pet-stats-level-xp-bonus::before,
#tamodex-pet-stats-level-xp-bonus:hover::after {
	display: block;
	position: absolute;
}

#tamodex-pet-stats-level-xp-bonus::before {
	content: "";
	width: 16px;
	height: 16px;
	left: 0;
	top: 3px;
	background-image: url(../img/interface/tamodex-mini-experience.png);
	background-repeat: no-repeat;
	background-size: contain;
	filter: hue-rotate(318deg) saturate(18) brightness(0.85);
}

#tamodex-pet-stats-level-xp-bonus::after {
	background: var(--black);
	content: "This pet levels up more slowly.";
	top: -31px;
	left: -41%;
	border: 3px solid var(--brown0);
	padding: 8px;
	border-radius: 5px;
	width: max-content;
	animation: tooltip 300ms;
	display: none;
}

#tamodex-pet-stats-level-xp-bonus.bonus::before { filter: hue-rotate(30deg) saturate(5) brightness(0.75); }
#tamodex-pet-stats-level-xp-bonus.bonus::after {
	color: var(--green1);
	content: "This pet levels up faster";
}

#tamodex-skill-button-image {
	width: 39px;
	margin-top: -5px;
}

#tamodex-pet-stats-tamed {
	font-weight: 500;
}

#pet-stats {
	background: #7d4320;
	border-radius: 8px;
	width: 650px;
}

.pet-stats-right {
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
}

#tamodex-pet-chart {
	position: relative;
	width: 340px;
	height: 256px;
	background: #9e5c33;
}

#tamodex-pet-chart, #ingame-tamodex-pet-chart { border-radius: 8px; }

#tamodex-radar-chart-background {
	overflow: hidden;
}

#pets-box .tamodex-radar-chart-stat { position: absolute; width: 89px; }

.tamodex-radar-chart-stat {
	background: #39322b;
	height: 30px;
	text-indent: -16px;
	border-radius: 5px;
}

#pets-box .tamodex-radar-chart-stat-img {
	margin-top: -4px;
	margin-left: 4px;
}

#tamodex-radar-chart-speed {
	top: 21px;
	left: 40px;
}

#tamodex-radar-chart-attack {
	top: 120px;
	left: 278px;
}

#tamodex-radar-chart-health {
	top: 213px;
	left: 32px;
}

#tamodex-radar-chart-weight {
	top: 16px;
	left: 223px;
}

#tamodex-radar-chart-regen-points {
	top: 122px;
	left: -1px;
}

#tamodex-radar-chart-regen-speed {
	top: 213px;
	left: 227px;

}

#pets-box #tamodex-radar-chart-regen-speed > .tamodex-radar-chart-stat-name,
#pets-box #tamodex-radar-chart-regen-points > .tamodex-radar-chart-stat-name {
	top: -24px;
	text-indent: 0px;
	line-height: 20px;
	left: 9px;
}

#tamodex-radar-chart-regen-speed > .tamodex-radar-chart-stat,
#tamodex-radar-chart-regen-points > .tamodex-radar-chart-stat {
	width: 91px;
}

#tamodex-radar-chart-attack > .tamodex-radar-chart-stat-img {
	margin-left: -1px;
}

#tamodex-radar-chart-attack > .tamodex-radar-chart-stat-name {
	margin-left: -17px;
}

#tamodex-radar-chart-attack > .tamodex-radar-chart-stat-value {
	margin-left: -52px;
}

#tamodex-radar-chart-attack.tamodex-radar-chart-stat {
	width: 72px;
}

#pets-box .tamodex-radar-chart-stat-name {
	position: absolute;
	top: -10px;
	left: 15px;
	width: 100px;
	text-align: center;
}

.tamodex-radar-chart-stat-name {
	font-size: 17px;
	color: #f1bd8d;
}

#pets-box  .tamodex-radar-chart-stats-value {
	position: absolute;
	top: 13px;
	left: 37px;
}
.tamodex-radar-chart-stats-value { align-items: flex-end; }

.tamodex-radar-chart-value-hero {
	color: #7869d1;
	text-indent: 0;
	margin-left:5px;
}

#tamodex-radar-chart-value-speed {
	font-size: 20px;
	text-indent: 0;
}

#tamodex-radar-chart-value-health {
	font-size: 20px;
	text-indent: 0;

}
#tamodex-radar-chart-value-attack {
	font-size: 20px;
	text-indent: 0;

}

#tamodex-radar-chart-value-regen-speed {
	font-size: 20px;
	text-indent: 0;

}
#tamodex-radar-chart-value-regen-points {
	font-size: 20px;
	text-indent: 0;
	margin-left: -4px;
}

#tamodex-radar-chart-value-weight {
    font-size: 20px;
    text-indent: 0;
}

#tamodex-radar-chart-polygon, #tamodex-radar-chart-sub-polygon, #tamodex-radar-chart-hero-polygon, .tamodex-radar-chart-container {
	position: absolute;
	top: 68px;
	left: 89px;
 	width: 167px;
	height: 151px;
	transform: translate(-25%, -25%);
	transition: 600ms;
}

.tamodex-radar-chart-container {
	filter: drop-shadow(2px 0px 0px #3a332b) drop-shadow(-2px 0px 0px #3a332b) drop-shadow(0px 2px 0px #3a332b) drop-shadow(0px -2px 0px #3a332b) drop-shadow(2px 2px 0px #3a332b) drop-shadow(-2px -2px 0px #3a332b) drop-shadow(-2px 2px 0px #3a332b) drop-shadow(2px -2px 0px #3a332b);
}
#tamodex-radar-chart-hero-polygon {
	width: 167px;
	height: 151px;
	background: #7869d1;
}

#tamodex-radar-chart-polygon {
	width: 167px;
	height: 151px;
	background: #fddcb5;
}

#tamodex-radar-chart-sub-polygon {
	width: 150px;
	height: 150px;
	background: #f1bd8d;
}

.tamodex-radar-chart-points {
	width: 167px;
	height: 151px;
	top: 127px;
	position: absolute;
	left: 170px;
	transform: translate(-50%, -50%);
}

.tamodex-radar-chart-point {
	background: #39322b;
	border-radius: 20px;
	height: 17px;
	width: 17px;
	position: absolute;
	transition: 600ms;
}

.tamodex-radar-chart-button {
	background: var(--brown3);
	padding: 5px 0px;
	width: 100%;
	text-align: center;
	font-size: 17px;
	border-radius: 7px 7px 0 0;
	margin-right: 5px;
	margin-bottom: -12px;
	cursor: url(../img/interface/cursor-pointer.png) 16 0, pointer;
}

.tamodex-radar-chart-button:hover {
	background: #b97246;
}

.tamodex-radar-chart-button:active, .tamodex-chart-selected, .tamodex-chart-selected:hover, .tamodex-chart-selected:active {
	background: #9e5c33;
	cursor: url(../img/interface/cursor-default.png) 4 0, default;
}

img#pet-slot-image[src='./img/interface/mini-tame-cauldron.png'] {
	margin-top: -5px;
}

#custom-pet-box {
	width: 640px;
	padding: 10px;
}

#custom-pet-visualisation {
	width:186px;
	height: 339px;
	border-radius: 0 0 13px 13px;
	border: 7px solid var(--black);
}

#petCanvas {
	width:186px;
	height: 339px;
	background: url(../img/hmp-bg-pets.png);
	animation: lateral-moving infinite 20s linear;
	box-shadow: inset 0 12px 0 rgb(58 50 44 / 50%);
}

@keyframes lateral-moving {
	0% { background-position: 0px; }
	100% { background-position: 2298px; }
}

.pet-skin-button {
	margin-left: 7px;
	margin-right: 7px;
	width: 126px;
	border-radius: 5px;
	height: 220px;
	position: relative;
	overflow: hidden;
	border-radius: 14px;
	cursor: url(../img/interface/cursor-pointer.png) 16 0, pointer;
}

.pet-skin-button:active {
	filter: brightness(0.7);
	margin-top: 0px;
	transition: 0ms;
}

.pet-skin-button:active, .pet-skin-selected, .pet-skin-selected:hover, .pet-skin-selected:active {
	transform: scale(0.9);
	width: 126px;
	border-radius: 5px;
	height: 220px;
	position: relative;
	overflow: hidden;
	border-radius: 14px;
	cursor: url(../img/interface/cursor-pointer.png) 16 0, pointer;
}

#pet-skins-cards-scroll {

	width: 422px;
	height: 244px;
	overflow-x: scroll;
	overflow: hidden;
	background: #7d4320;
	margin-left: 5px;
	border-radius: 8px;
	scroll-behavior: smooth;
}

.pet-skins-container {

	height: 241px;
	margin: auto;
	justify-content: flex-start;
	align-items: center;
	display: flex;
}

.custom-pet-right-box {
	background: #9e5c33;
	width: 432px;
	text-align: center;
	height: 414px;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
}

.pet-skin-need-level {
	background: var(--black);
	height: 70px;
	border-radius: 6px 6px 0 0;
	padding: 6px;
	position: absolute;
	left: 0;
	top: 0;
	width: 114px;
}

.pet-skin-lock-picture {
	padding: 6px 11px;
	border-radius: 35px;
	position: absolute;
	top: 62px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
}

.pet-skin-price {
	background: var(--black);
	position: absolute;
	bottom: 0px;
	display: flex;
	border-radius: 0 0 6px 6px;
	width: 100%;
	align-items: center;
	justify-content: center;
	font-size: 20px;
}

#edit-pet {
	margin: auto;
	margin-top: 10px;
	width: 390px;
	background: var(--black);
	border-radius: 5px;
	padding: 8px 15px;
}

#buy-pet-skin-price-title {

	top: 12px;
	font-size: 15px;
	position: absolute;
	margin: auto;
	left: 87px;
}

#buy-pet-skin-price {
	font-size: 20px;
	margin-top: 1px;
}

#buy-pet-skin {
	font-size: 17px;
	height: 15px;
	line-height: 0px;
}

#buy-pet-skin:active {
	padding-top: 15px;
	margin-top: 0px;
}

#table-skill {
	top: 347px;
	position: absolute;
	width: 400px;
}

#table-skill, #ingame-table-skill {
	flex-wrap:wrap;
	height:178px;
	overflow-y:auto;
	overflow-x:hidden;
	max-height: 178px;
}

.skill-line {
	height: 28px;
	background: #7c4320;
	font-size:14px;
	text-align: center;
	border-radius: 5px;
	padding: 5px 9px 5px 9px;
	color: #ffe6c2;
}

.skill-line-title {
	background: var(--black);
	border-radius: 5px 5px 0 0;
}

.skill-line-description {
	width: 191px;
}

.skill-line-category {
	width: 36px;
}

.skill-description {
	width: 143px;
	margin-left: 2px;
	padding: 10px 9px 0 9px;
}

.pet-line-description {
	height: 20px;
	background: #7c4320;
	width: 40%;
	text-align: center;
	margin-top: 7px;
	border-radius: 5px;
	justify-content:space-between;
	display:flex;
	padding:4px 9px 0 9px;
}

#pet-name-card {
	text-align: center;
	font-size: 26px;
	padding: 5px 0;
	background: #39322b;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 5px 13px 0 13px;
	line-height: 25px;
}

#back-to-pet, #back-to-pet-selection, #back-to-pet-selection-2, #back-to-pet-selection-3, #back-to-housing {

	border-radius: 8px;
	padding: 5px 15px;
	top: 20px;
	height: 28px;
	left: 610px;
}

.pickaxe-rotation {
	animation: pickaxe 2000ms infinite ease;
}

@keyframes pickaxe {
	0%, 100% { transform: rotate(-80deg); }
	30% { transform: rotate(-50deg); }
	90% { transform: rotate(-20deg); }
}

.pet-animation-translation {
	animation: pet-translation 2000ms infinite ease;
	transform: translateY(1px);
	position: absolute;
}
@keyframes pet-translation {
	0%, 100% { transform: translateY(1px); }
	50% { transform: translateY(-1px); }
}

.pet-animation-rotation {
 	animation: pet-rotation 7000ms infinite ease;
	transform-origin: bottom center;
}

@keyframes pet-rotation {
 	0%, 100% { transform: rotate(2deg); }
 	50% { transform: rotate(-2deg); }
}

.pet-eye {
	animation: pet-eye 2000ms infinite ease;
	transform-origin: bottom center;
	position: absolute;
}

@keyframes pet-eye {
 	0%, 100% { translate: -10px 0; }
 	50% { translate: 5px -10px; }
 	80% { translate: -5px 3px; }
}

.pet-animation-sleep {
	animation: pet-sleep 2000ms infinite ease-out;
	position: absolute;
	opacity: 0;
}

@keyframes pet-sleep {
	0% { transform: translateY(1px); opacity:0; scale: 0.5}
	10% { opacity: 1; }
	50% { scale: 1; }
	100% { transform: translateY(-100px); }
}

#pet-cards-list {
	width:648px;
	display:flex;
	flex-wrap:wrap;
	height:424px;
	overflow-y:auto;
	overflow-x:hidden;
	justify-content: flex-start;
}

#pet-cards-list::-webkit-scrollbar {
	background: #7c4320;
	border-radius: 10px;
	width: 10px;
}

#pet-cards-list::-webkit-scrollbar-thumb {
	background: #663619;
	border-radius: 10px;
}

#type-box {
	border-radius:10px;
	margin:15px;
	display:flex;
	flex-wrap:wrap;
	height:93%;
	flex-direction: column;
}

#skill-box {
	border-radius:10px;
	padding:7px;
	width:57%;
	display:flex;
	margin:15px;
	margin-left:0px;
	flex-wrap:wrap;
	flex-direction: column;
	height: 401px;
	justify-content:space-between;
	align-items: center;
}

.type-box-size {
	width:81px;
	background:#7c4320;
	border-radius:6px;
	margin:12px 0;
}

.type-icon-size {
	width:40px;
}

.type-box-table {
	width: 252px;
	margin: 0 15px;
	height: 370px;
	overflow-y: scroll;
}

.type-box-table-title-container {
	width: 228px;
	margin: 7px 15px 0 15px;
}

.type-box-table-title {
	background: var(--black);
	border-radius: 5px 5px 0 0;
	padding: 0 5px;
}

.type-box-table-data, .type-box-table-data-start, .type-box-table-data-end {
	background: #7d4320;
	padding: 0 5px;
	margin: 2px;
	border-radius: 3px;
}

.type-box-table-data-start { margin-left: 0; }

.type-box-table-data-end { margin-right: 8px; }

.type-box-malus { background: #c73e15; }

.type-box-bonus { background: #a7c538; }

#pet-weight {
	width: 92%;
	padding: 12px;
	font-size: 12px;
}

.pet-tips-box .tooltip { display: none; text-align: center; }

.pet-tips-box {
	background: #39322b;
	border-radius: 20px;
	margin-top: -4px;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 2px;
}

.pet-tips-box:hover > .tooltip {
	width: 314px;
	border-radius: 8px;
	position: absolute;
	left: -234px;
	top: -65px;
	display: inline-block;
	animation: tooltip 300ms 1 ease;
}

#skill-title {
	font-size: 33px;
	padding-bottom: 12px;
}

#set-pet-name {
	display:flex;
	flex-direction:column;
	float:right;
	margin-left:-390px;
}

#card-animated {
	width: 242px;
	position: relative;
	height: 277px;
	margin: auto;
	background: #9e5c33;
}

#pet-selected-card-body, #staging-pet-body0, #staging-pet-body1, #staging-pet-body2 {
	animation-delay:500ms;
}

#pet-selected-card-tail, #staging-pet-tail0, #staging-pet-tail1, #staging-pet-tail2 {
	left: 10px;
}

#staging-card0, #staging-card1, #staging-card2 {
	width: 227px;
	height: 374px;
}

#animals-cards {

	padding:15px;
	margin-top:69px;
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	width:760px;
}

#pet-army {
	width:80px;
	height:416px;
	text-align:center;
	justify-content: space-evenly;
	padding-top:8px;
	padding-right:8px;
	font-size:14px;
	flex-direction: column;
	padding-bottom: 10px;
}

/* ---- Add Pet in Housing ---- */

#pets-box.housing #back-to-pet-selection-3,
#pets-box.housing #pet-skins-nav,
#pets-box.housing #pet-stats-nav,
#pets-box.housing #pet-points-nav,
#pets-box.housing #pet-army,
#pets-box.housing #tamodex-pet-stats-select,
#pets-box.housing #unlock-pet,
#pets-box #back-to-housing,
#pets-box.housing .tamodex-card-container:has(.grayscale),
#pets-box.housing .alert::after { display: none }

#pets-box.housing #animals-cards { width: 100%; }
#pets-box.housing #pet-stats { width: 658px; }

#pets-box.housing #back-to-pet-selection {
	left: unset;
	right: 70px;
}

#pets-box.housing #back-to-pet-selection-2 {
	left: 255px;
	top: 52px;
}

#pets-box.housing #pet-cards-list {
	justify-content: center;
	align-content: flex-start;
}

#pets-box.housing #back-to-housing {
	display: inline-block;
	left: 407px;
	width: 250px;
	top: 53px;
}

#pets-box.housing .alert.tamodex-card-container .tamodex-pet-background {
	border: 2px solid transparent;
	animation: none;
}

/* ---- End Pet in Housing ---- */

#items-box {
	display:none;
	width: 770px;
	height: 323px;
	left: calc(50% - 436px);
	top: calc(50% - 250px);
	transform: scale(0);
	z-index:30;
	align-items:center;
}

.adventure-next {

	display: none;
	transition: opacity 300ms;
}

#adventure-selected {

	display: none;
	transition: opacity 300ms;
}


.adventure-text{ background: var(--black); }

.adventure-text, #adventure-end {

	position: absolute;
	bottom: 20px;
	left: 20px;
	padding: 5px 10px;
	border-radius: 6px;
}

#adventure-end { bottom: 49px; left: 10px; display: flex; align-items: center;}
#adventure-end p { margin-left: -18px; padding-left: 25px; position: static;}
#adventure-end img { z-index: 1 }
#adventure-end span { color: var(--beige); }

#adventure-time { top: 0px; left: 314px; bottom: 0; padding-left: 20px; }

#adventure-time::before, #adventure-claim::after {
	position: absolute;
	top:5px;
	left:-16px;
}

#adventure-time::before { content: url("../img/interface/adventure-star.png"); }

#adventure-claim::after { content: url("../img/interface/adventure-claim-star.png"); right: -247px; top: -6px; }

#adventure-time span { font-size: 13px; }

.adventure-claim { position: absolute; width: 100%; top: 15px; z-index: 2; height: 46px; }

#adventure-claim { width: 170px; margin: auto; position: relative; display: none; }

#adventure-selected h2 { position: absolute; }
#adventure-background { width: 720px; }
#adventure-container {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
}

#adventure-container {
	width: 720px;
	height: 464px;
	position: absolute;
}

.adventure-step { width: 62px; position: absolute; top: 59px; }
.adventure-step.step-gray { content: url("../img/interface/adventure-step-locked.png")}

.adventure-gift {
	width: 70px;
	margin-bottom: -19px;
	animation: bounce-adventure 2400ms infinite ease;
	transition: opacity 300ms;
	z-index: 1;
}

img.adventure-star[src*="./img/interface/star-button.png"] {
	animation: star-appear ease-out 500ms 1;
}

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

@keyframes bounce-adventure {
	5% { transform: rotate(-10deg) }
	15% { transform: rotate(10deg) }
	25% { transform: scaleY(0.95) }
	50% { transform: scaleY(1.02)  }
	60% { transform: scaleY(1)}
}

.adventure {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 70px;
}

.adventure p {
	text-align: center;
	background: var(--black);
	border-radius: 5px;
	padding: 5px 11px;
	position: absolute;
	top: 107px;
	width: 60px;
}

#adventure0 { top: 115px; left: 45px; }
#adventure1 { top: 160px; left: 195px; }
#adventure2 { top: 203px; left: 340px; }
#adventure3 { top: 152px; left: 485px; }
#adventure4 { top: 116px; left: 630px; }

#adventure-gift0 { animation-delay: 900ms; }
#adventure-gift2 { animation-delay: 1800ms; }
#adventure-gift3 { animation-delay: 500ms; }
#adventure-gift4 { animation-delay: 1300ms; }

.adventure h4 {
	text-align: center;
	top: -44px;
	position: absolute;
	width: 95px;
	background: var(--black);
	padding: 5px;
	border-radius: 5px;
	z-index: 1;
}

.adventure-open, .adventure-unlock {
	position: absolute;
	top: 58px;
	display: none;
	z-index: 2;
}

.adventure-open img, .adventure-unlock img {
	position: absolute;
	top: -23px; right: 13px;
}

.adventure-unlock {
	top: 142px;
}

.adventure-unlock img {
	top: -32px;
	width: 67px;
	left: 13px;
}

#totem-box {
	width: 760px;
	height: 433px;
	z-index:30;
	align-items:center;
	left: calc(50% - 436px);
     top: calc(50% - 253px);
	transform: scale(0);
	display: none;
}

#totem-currency-counter, #totem-points-counter {
	background: var(--black);
	width: fit-content;
	border-radius: 5px;
	padding: 7px 11px 0px;
	margin: 0 10px 9px 0;
	display: flex;
	font-size: 20px;
}

#totem-points-counter { margin-left: auto; }
#totem-points-counter img { width: 40px; height: 37px; margin-top: -6px; }
#totem-currency-counter img, .totem-button img {
	width: 40px;
	margin: -4px 0 0 -4px;
}

#totem-level-container {
	background: var(--black);
	border-radius: 6px;
	padding: 10px 20px;
	width: 100%;
	position: relative;
}

#totem-level-description {
	display: flex;
	color: var(--beige1);
	margin-bottom: 6px;
}

#totem-level-gold, #totem-level-points { color: var(--beige); margin: 0 3px; }

#totem-level-container img {
	width: 45px;
	margin: 9px 0 0 -6px;
}

#totem-level-gapple {
	display: flex;
	font-size: 26px;
	align-items: center;
	margin-top: -15px;
	position: absolute;
	right: 0;
}

#upgrade-totem, #hide-totem { color: var(--white); position: relative; }

#hide-totem {
	background-image: url("../img/interface/hide-totem.png");
	background-position: -1px;
}

#hide-totem:hover { filter: brightness(1.05); }

#hide-totem:active { background-position: -1px 5px; filter: brightness(0.95); }
#upgrade-totem:active p:nth-child(1), #hide-totem:active p:nth-child(1) { margin-top: 5px; margin-bottom: -5px; }
#upgrade-totem:active p:nth-child(2), #hide-totem:active p:nth-child(2) { margin-top: 12px; margin-bottom: -20px; }

#hide-totem div { display: none; }
#hide-totem:hover div {

	display: block;
	animation: tooltip 300ms 1 ease;
	top: -48px;
	right: -50px;
	position: absolute;
	background: var(--black);
	border-radius: 5px;
	transition: 200ms;
	width: max-content;
	padding: 12px;
	z-index: 3;
}

#upgrade-totem-value, #hide-totem-value { font-size: 20px; }

.totem-button {
	margin: 7px -5px -15px 0;
	font-size: 19px;
	display: flex;
	justify-content: center;
}

#totem-gauge {
	width: 100%;
	background: #7c4320;
	height: 20px;
	border-radius: 10px;
	overflow: hidden;
}

#totem-progress0 {
	background: #d89e2a;
	height: 100%;
	width: 60%;
	transition: width 300ms;
}

#totem-progress1 {
	background: #eac93d;
	height: 50%;
	width: 100%;
}

.totem-skills {
	display: flex;
	flex-wrap: wrap;
	background: #7c4320;
	border-radius: 8px;
	width: 260px;
	height: 275px;
	justify-content: space-evenly;
	align-content: space-around;
	position: relative;
}

.totem-skills div,
.totem-skills .gray img, .totem-skills .gray img:hover, .totem-skills .gray img:active {
	width: 69px; height: 72px;
	border: 5px solid var(--black);
	border-radius: 10px;
	padding: 0;
	position: relative;
}

.totem-skills .life {
	background: #7c2424;
	box-shadow: inset 0 12px 0px 12px #a52c2c;
}

.totem-skills .repair {
	background: #f0e4d0;
	box-shadow: inset 0 12px 0px 12px #e9c9a4;
}

.totem-skills .curse {
	background: #743ae2;
	box-shadow: inset 0 12px 0px 12px #8463ea;
}

.totem-skills .button { animation: skill-light 1s infinite ease; cursor: url(../img/interface/cursor-pointer.png) 16 0, pointer; background: #d89e2a; }
.totem-skills .button:hover { animation: skill-light-hover 1s infinite ease; cursor: url(../img/interface/cursor-pointer.png) 16 0, pointer; background: #dec035; }
.totem-skills .button:active { animation: skill-light-active 1s infinite ease; cursor: url(../img/interface/cursor-pointer.png) 16 0, pointer; background: #cc7e1f; }

.totem-skills .button img { margin-top: -12px }
.totem-skills .button img:hover { margin-top: -12px }
.totem-skills .button img:active { margin-top: 9px }

.totem-skills .gray, .totem-skills .gray:hover, .totem-skills .gray:active {
	animation: none !important;
	cursor: url(../img/interface/cursor-default.png) 4 0, default;
}

.totem-skills .gray img, .totem-skills .gray img:hover, .totem-skills .gray img:active {
	margin: 0;
	box-shadow: inset 0 -10px 0 0px #e28235, inset 0 2px 0px 12px #dec035 !important;
	filter: grayscale(1) !important;
}

.totem-skills .gray {
	background: #a6a6a6;
	box-shadow: inset 0 -10px 0 0px #e28235, inset 0 2px 0px 12px #dec035 !important;
}

@keyframes skill-light {
	0%, 100% { box-shadow: inset 0 -10px 0 0px #e28235, inset 0 2px 0px 12px #dec035, 0 0 0 0px var(--white); }
	50% { box-shadow: inset 0 -10px 0 0px #e28235, inset 0 2px 0px 12px #dec035, 0 0 0 3px var(--white); }
}

@keyframes skill-light-hover {
	0%, 100% { box-shadow: inset 0 -10px 0 0px #e8ab31, inset 0 2px 0px 12px #eae23f, 0 0 0 0px var(--white); }
	50% { box-shadow: inset 0 -10px 0 0px #e8ab31, inset 0 2px 0px 12px #eae23f, 0 0 0 3px var(--white); }
}

@keyframes skill-light-active {
	0%, 100% { box-shadow: inset 0 10px 0 0px #ce5b29, inset 0 12px 0px 12px #d89e2a, 0 0 0 0px var(--white); }
	50% { box-shadow: inset 0 10px 0 0px #ce5b29, inset 0 12px 0px 12px #d89e2a, 0 0 0 3px var(--white); }
}

.totem-skills div:after {
	position: absolute;
	width: 170px;
	left: calc(50% - 85px); top: -52px;
}

.totem-skills div:hover:after {
	background: var(--black);
	padding: 6px 10px;
	border-radius: 5px;
	z-index: 1;
	text-align: center;
	animation: tooltip 500ms 1 ease;
}

#totem-skill-life0:hover:after { content: "Receive 6 heal points near the totem"; }
#totem-skill-life1:hover:after { content: "Receive 8 heal points near the totem"; }
#totem-skill-life2:hover:after { content: "Receive 10 heal points near the totem"; }

#totem-skill-repair0:hover:after { content: "Repair 30 points to your buildings"; }
#totem-skill-repair1:hover:after { content: "Repair 50 points to your buildings"; }
#totem-skill-repair2:hover:after { content: "Repair 60 points to your buildings"; }

#totem-skill-curse0:hover:after { content: "Your enemy's life is reduced by 20%"; }
#totem-skill-curse1:hover:after { content: "Your enemy's life is reduced by 40%"; }
#totem-skill-curse2:hover:after { content: "Your enemy's life is reduced by 60%"; }

.totem-skills p {
	background: var(--black);
	position: absolute;
	height: 170px;
	width: 12px;
	top: 88px;
	left: 128px;
}

.totem-skills p:nth-of-type(1) { left: 43px; }
.totem-skills p:nth-of-type(3) { left: 212px; }

.totem-resource-chests {
	width: 210px;
	padding: 10px 5px !important;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
}

.totem-resource-chests button, .totem-pets button { border: none; background-color: transparent; }
.totem-resource-chests button { width: 211px; height: 78px; position: relative; }
.totem-pets button { width: 240px; height: 50px; margin-bottom: 10px; position: relative; }

.totem-resource-chests h3, .totem-pets h3 {
	color: var(--white);
	display: flex;
	align-items: center;
	font-size: 26px;
	margin-top: -4px;
	position: relative;
	margin-left: 10px;
}

.totem-pets h3 {
	background: var(--black);
	width: 48px;
	height: 30px;
	margin-top: 9px;
	margin-left: 2px;
	padding: 0 0px 2px 10px;
}

.totem-resource-chests img { width: 40px; margin: 10px 0 0 -3px; }
.totem-pets img { width: 40px; margin: 10px 0 0 -3px; }

.totem-resource-chests p, #totem-box .totem-resource-chests .locked p {
	font-size: 18px;
	margin: 14px 0 -7px -4px;
	position: relative;
	width: 80%;
}

.totem-resource-chests div, .totem-pets div {
	width: inherit; height: inherit;
	position: absolute;
	left: 0; top: 0;
}

#totem-box .locked { cursor:url(../img/interface/cursor-not-allowed.png) 16 16, default; }
#totem-box .mt7 .locked { filter: none;}

#totem-box .mt7 .locked::after { display: none; }
#totem-box .mt7 .locked:hover::after {
	display: block;
	content: "Upgrade your totem to unlock it";
	top: -39px;
	left: calc(50% - 110px);
	position: absolute;
	background: var(--black);
	padding: 10px;
	animation: tooltip 300ms linear 1;
	border-radius: 5px;
	color: var(--white);
	width: max-content;
}

#totem-box .mt7 .no-money::before { display: none; }

#totem-box .mt7 .locked::before {
	cursor: url(../img/interface/cursor-not-allowed.png) 16 16, default;
	content: "";
	position: absolute;
	z-index: 1;
	width: 37px;
	height: 46px;
	background-size: 100%;
	display: block;
	background-image: url(../img/interface/lock-red.png);
}

.totem-resource-chests .locked::before { top: -7px; left: 183px; }
.totem-pets .locked::before {top: 3px; left: 219px; }
.totem-skills div.locked::before { top: 10px; left: 16px; }

#upgrade-totem.locked::before { display: none; }

#upgrade-totem.locked:hover, #upgrade-totem.locked:active {
	background: var(--yellow1);
	box-shadow: inset 0 -5px 0 var(--orange0);
}

#totem-box .no-money { filter: grayscale(1) brightness(0.5); }
#totem-box .locked div { filter: grayscale(1) brightness(0.5); }

#totem-stone-chest:active p,
#totem-wood-chest:active p,
#totem-food-chest:active p { margin-top: 20px; }

#totem-stone-chest-img, .locked:hover #totem-stone-chest-img, .locked:active #totem-stone-chest-img {
	background-image: url("../img/interface/stone-chest-button.png");
	background-position: top left;
}

#totem-stone-chest-img:hover { background-image: url("../img/interface/stone-chest-button-hover.png"); }
#totem-stone-chest-img:active { background-image: url("../img/interface/stone-chest-button-active.png"); }

#totem-wood-chest-img, .locked:hover #totem-wood-chest-img, .locked:active #totem-wood-chest-img {
	background-image: url(../img/interface/wood-chest-button.png);
	background-position: top left;
}

#totem-wood-chest-img:hover { background-image: url("../img/interface/wood-chest-button-hover.png"); }
#totem-wood-chest-img:active { background-image: url("../img/interface/wood-chest-button-active.png"); }

#totem-food-chest-img, .locked:hover #totem-food-chest-img, .locked:active #totem-food-chest-img {
	background-image: url("../img/interface/food-chest-button.png");
	background-position: top left;
}

#totem-food-chest-img:hover { background-image: url("../img/interface/food-chest-button-hover.png"); }
#totem-food-chest-img:active { background-image: url("../img/interface/food-chest-button-active.png"); }

.totem-pets { width: 240px; position:relative;}
.totem-pets p { text-align: left; padding-left:83px; margin-bottom: 6px; margin-top: -26px; font-size: 15px; }
.totem-pets p:nth-child(1) { margin-top: 4px; text-align: center; padding: 0; }

#totem-untamed-img, .locked:hover #totem-untamed-img, .locked:active #totem-untamed-img {
	background-image: url("../img/interface/untamed-button.png");
	background-position: top left;
}

#totem-untamed-img:hover { background-image: url("../img/interface/untamed-button-hover.png"); }
#totem-untamed-img:active { background-image: url("../img/interface/untamed-button-active.png"); }

#totem-tamed-baby-img, .locked:hover #totem-tamed-baby-img, .locked:active #totem-tamed-baby-img {
	background-image: url("../img/interface/spawn-baby-button.png");
	background-position: top left;
}

#totem-tamed-baby-img:hover { background-image: url("../img/interface/spawn-baby-button-hover.png"); }
#totem-tamed-baby-img:active { background-image: url("../img/interface/spawn-baby-button-active.png"); }

#totem-tamed-adult-img, .locked:hover #totem-tamed-adult-img, .locked:active #totem-tamed-adult-img {
	background-image: url("../img/interface/spawn-adult-button.png");
	background-position: top left;
}

#totem-tamed-adult-img:hover { background-image: url("../img/interface/spawn-adult-button-hover.png"); }
#totem-tamed-adult-img:active { background-image: url("../img/interface/spawn-adult-button-active.png"); }

#totem-tamed-boss-img, .locked:hover #totem-tamed-boss-img, .locked:active #totem-tamed-boss-img {
	background-image: url("../img/interface/spawn-boss-button.png");
	background-position: top left;
}

#totem-tamed-boss-img:hover { background-image: url("../img/interface/spawn-boss-button-hover.png"); }
#totem-tamed-boss-img:active { background-image: url("../img/interface/spawn-boss-button-active.png"); }


.totem-pets button:active p  { margin-top: -26px; }

.totem-pets button:active h3  { margin-top: 16px; }

.totem-pets .locked:active h3  { margin-top: 9px; }

#bottom-button-items, #top-button-items {
	transform: rotate(90deg);
	right: 15px;
}

#top-button-items { top:85px; }

#loading-leaderboard {
	width: 460px;
	height: 90%;
}

#lock-team-img {
	width: 23px;
	padding-top: 4px;
}

#player-info-box, #clan-info-box {
	left: calc(50% - 487px);
	top: calc(50% - 254px);
	transform: scale(0);
	width: 860px;
	z-index: 27;
}

#player-info-box { height: 500px; }

#info-box {
	left: calc(50% - 393px);
	top: calc(50% - 160px);
	transform: scale(0);
	width: 690px;
	height: 300px;
	z-index: 28;
}

#info-box .pop-title { top: -47px; }

#totem-points-info-box{
	z-index:26;
	left: calc(50% - 375px);
	top: calc(50% - 254px);
	transform: scale(0);
	width: 651px;
	height:480px;
}

#clan-info-box {
	z-index: 26;
}

#player-last-game-title {
	margin-left: 579px;
	margin-top: -30px;
}

#loading-box-player-info {
	width: 860px;
	height:371px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top:65px;
}

#loading-box-info {
	width: 670px;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 293px;
}

#update-animation {
	width: 100%;
	height: 181px;
	margin-right: 10px;
}

.cosmetic-update {
	width:100%;
	margin-top:-20px;
}

#free-ga-button {
	background: var(--yellow1);
	width: 160px;
	padding-top: 7px;
	height: 34px;
}

#free-ga-button:hover {
	background: #efd561;
}

#free-ga-button:active {
	padding-top:10px;
	height:34px;
	box-shadow: inset 0 5px 0 #d78423;
}

#mail-locked {

	display: none;
	color: var(--yellow0);
	margin-top: 12px;
}

#send-mail-password {
	margin: auto;
	margin-top: 20px;
	width: 60px;
}

/* --- TRINKETS BOX --- */
#pet-trinkets-box {
	height:448px;
	display:none;
	width:750px;
	z-index: 21;
}

#pet-trinkets {
	display: grid;
	gap: 10px;
	grid-template-columns: 1fr 210px;
}

#pet-trinkets div { border-radius: 5px; }

#pet-trinkets > div::before {}

.combo-row::before, .combo-saved::before, .trinkets-box::before {
	position: absolute;
	font-size: 20px;
	display: flex;
	justify-content: center;
	background: #6d3817;
}

.combo-row::before {
	content: "YOUR PETS";
	top: -40px;
	left: 130px;
	width: 280px;
	z-index: 1;
	padding: 10px 20px;
	border-radius: 5px;
}

.combo-saved::before, .trinkets-box::before {
	top: -30px;
	width: 100%;
	box-sizing: border-box;
	padding: 5px 10px;
	border-radius: 5px 5px 0 0;
}

.combo-saved::before { content: "YOUR SAVED COMBO"; }

.trinkets-box::before { content: "YOUR TRINKETS"; }

.combo-row {
	padding: 10px;
	border-radius: 5px 0 5px 5px;
	margin: 50px 0 0px 10px;
 	grid-column: 1; grid-row: 1;
}

.save-combo {
	width: 70px;
	position: absolute;
	top: -40px;
	z-index: 1;
	right: 0;
	box-sizing: border-box;
}

.save-combo img { width: 32px; }

.combo-row .combo-cards {
	width: 470px;
	margin: 0 10px;
}

.combo-saved .combo-cards {
	width: 227px;
	gap: 5px;
	padding-left: 10px;
}

.combo-saved .combo-card {
	width: 75px;
	height: 85px;
}

.combo-card, .combo-row, .trinkets, .combo-saved,
.combo-list, .trinkets-box, .combo-selection { position: relative; }

.combo-pet {
	height: 150px;
	z-index: 1;
	padding: 10px 0;
}

.combo-saved .combo-pet {
	height: 85px;
	box-sizing: border-box;
}

.combo-pet.one-type::before, .combo-pet.two-types::before,
.combo-pet.empty::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-size: 80%;
	background-repeat: no-repeat;
	background-position: center;
	z-index: -1;
	left: -20px;
}

.combo-pet.one-type::before {
	background-image: url(.././img/interface/card-combo-one-type.png);
	top: -1px;
}

.combo-saved .combo-pet.one-type::before, .combo-saved .combo-pet.two-types::before,
.combo-saved .combo-pet.empty::before {
	top: 0px;
	left: -14px;
	background-size: 70%;
}

.combo-pet.two-types::before {
	background-image: url(.././img/interface/card-combo-two-types.png);
	top: 0px;
}

.combo-pet.empty::before {
	background-image: url(.././img/interface/card-combo-empty.png);
	top: 6px;
}

.trinkets {
	top: 10px;
	gap: 4px;
	left: 9px;
}

.combo-saved .trinkets {
	gap: 1px;
	top: 4px;
	left: -2px;
	z-index: 1;
	background: var(--brown0);
	padding: 3px 3px 3px 0;
	border-radius: 0 5px 5px 0;
}

.trinkets img {
	width: 40px;
	border-radius: 5px;
}

.trinkets img:hover { background: var(--black1); }

.trinkets img, .trinkets img:active { background: var(--black); }

.combo-saved .trinkets img {
	width: 19px;
	border-radius: 0 5px 5px 0;
}

.trinkets img:nth-of-type(2)::after {
	content: "LEVEL 15";
	background: var(--black);
	width: 100px;
	height: 100px;
	position: absolute;
	display: block;
	z-index: 1;
	top:0;
	left:0;
}

.combo-saved {
	border-radius: 10px;
	grid-column: 1; grid-row: 2;
	margin-top: 30px;
}

.combo-list {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	overflow-y: auto;
	height: 170px;
}

.combo-saved .invitation-validation {
	position: absolute;
	top: -5px;
	right: -5px;
	border-radius: 5px;
	z-index: 1;
	width: 20px;
	height: 20px;
	padding: 2px;
	box-sizing: border-box;
}

.trinkets-box {
	border-radius: 10px;
	grid-column: 2;
	grid-row: 1 / 3;
	margin-top: 40px;
}

.trinkets-list {
	overflow-y: auto;
	height: 410px;
}

.combo-row::before, .combo-saved::before, .trinkets-box::before, .trinkets-list p {
	text-shadow: rgb(58, 50, 44) 4px 0px 0px, rgb(58, 50, 44) 3.87565px 0.989616px 0px, rgb(58, 50, 44) 3.51033px 1.9177px 0px, rgb(58, 50, 44) 2.92676px 2.72656px 0px, rgb(58, 50, 44) 2.16121px 3.36588px 0px, rgb(58, 50, 44) 1.26129px 3.79594px 0px, rgb(58, 50, 44) 0.282949px 3.98998px 0px, rgb(58, 50, 44) -0.712984px 3.93594px 0px, rgb(58, 50, 44) -1.66459px 3.63719px 0px, rgb(58, 50, 44) -2.51269px 3.11229px 0px, rgb(58, 50, 44) -3.20457px 2.39389px 0px, rgb(58, 50, 44) -3.69721px 1.52664px 0px, rgb(58, 50, 44) -3.95997px 0.56448px 0px, rgb(58, 50, 44) -3.97652px -0.432781px 0px, rgb(58, 50, 44) -3.74583px -1.40313px 0px, rgb(58, 50, 44) -3.28224px -2.28625px 0px, rgb(58, 50, 44) -2.61457px -3.02721px 0px, rgb(58, 50, 44) -1.78435px -3.57996px 0px, rgb(58, 50, 44) -0.843183px -3.91012px 0px, rgb(58, 50, 44) 0.150409px -3.99717px 0px, rgb(58, 50, 44) 1.13465px -3.8357px 0px, rgb(58, 50, 44) 2.04834px -3.43574px 0px, rgb(58, 50, 44) 2.83468px -2.82216px 0px, rgb(58, 50, 44) 3.44477px -2.03312px 0px, rgb(58, 50, 44) 3.84068px -1.11766px 0px, rgb(58, 50, 44) 3.9978px -0.132717px 0px;
}

.trinkets-list div {
	width: 53px;
	height: 65px;
	background-size: 100%;
	outline: inset 7px solid var(--brown0);
	border-radius: 5px;
	outline: 2px solid var(--brown0);
	box-shadow: inset -2px 0px 0 0 var(--brown0);
}

.trinkets-list div:hover {
	border-radius: 7px;
	outline: 2px solid var(--beige);
	box-shadow: inset -2px 1px 0 0 var(--beige);
}

.trinkets-list div:not(.clickable) { background-image: url("../img/interface/inventory-item-unuse.png") no-repeat 100%; }

.combo-selection {
	border-radius: 5px;
	height: fit-content;
}

.combo-selection:hover {
	outline: 4px solid var(--brown5);
	background: var(--brown2);
}

.combo-selection, .combo-selection:active { background: var(--brown3); }

/* ---- TRINKETS BOX END ---- */

#animals-description {
	height:448px;
	margin-top:79px;
	margin-left:15px;
	display:none;
	align-items: flex-start;
	justify-content: space-between;
	width:750px;
}

#update-container {
	display:flex;
	height:250px;
}

#update-box {
	z-index:22;
	transform: scale(0);
	width:700px;
	height:263px;
	position:initial;
	padding:10px;
	position:absolute;
	left:-30px;
	top:-38px;
}

#update-box .step-1 { left: 325px; }
#update-box .step-2 { left: 426px; }
#update-box .step-3 { left: 0px; }
#update-box .step-4 { left: 100px; }
#update-box .step-5 { left: 200px; }
#update-box .step-6 { left: 117px; }

#update-box.mobile .step-1 { left: 75px; }
#update-box.mobile .step-2 { left: 166px; }
#update-box.mobile .step-3 { left: -3px; }
#update-box.mobile .step-4 { left: 300px; }
#update-box.mobile .step-5 { left: 410px; }
#update-box.mobile .step-6 { left: -113px; }

#send-mail-password {
	margin: auto;
	margin-top: 20px;
	width: 60px;
}

#change-mail-box {
	z-index:22;
	transform: scale(0);
	left: calc(50% - 246px);
	top: calc(50% - 140px);
	height:280px;
	text-align: center;
	width:420px;
	display:none;
}

#new-password-box {
	z-index:22;
	transform: scale(0);
	left: calc(50% - 246px);
	top: calc(50% - 140px);
	height:216px;
	text-align: center;
	width:420px;
	display:none;
}

#send-mail-box {
	z-index:22;
	transform: scale(0);
	left: calc(50% - 245px);
	top: calc(50% - 133px);
	height:216px;
	width:420px;
	text-align: center;
	display: none;
}

#claim-reward-box {
	z-index:22;
	transform: scale(0);
	left: calc(50% - 263px);
	height:286px;
	width:420px;
	text-align: center;
	display: none;
}

#validate-new-password {
	margin:auto;
	margin-top:20px;
	width: 60px;
}

#forgot-password {

	color: #ffe6c2;
	width: 138px;
	border-bottom: 3px solid #9e5c33;
}

#forgot-password:hover {

	border-bottom: 3px solid #ffe6c2;
	cursor: url(../img/interface/cursor-pointer.png) 16 0, pointer;
}

#loading-mail-box {
	margin: 5px 153px 20px 153px;
}

#link-sent-ok {
	color: #a8c636;
	text-align:center;
	margin-top: 20px;
	margin-bottom: 20px;
}

#link-sent-nok {
	color: #f9d121;
	text-align:center;
	margin-top: 20px;
	margin-bottom: 20px;
}

#password-ok {
	color: #a8c636;
	text-align:center;
	margin-top: 20px;
	margin-bottom: 20px;
}

#password-nok {
	color: #f9d121;
	text-align:center;
	margin-top: 7px;
	margin-bottom: -9px;
}

#loading-password-box {
	margin: 5px 153px;
}

#loading-mail-box {
	margin: 5px 153px;
}

#information-tamed-pet {
	text-align: center;
	font-size: 17px;
	margin-top: 11px;
}

#next-reward {
	height: 34px;
	min-width: 200px;
	padding-left: 10px;
	padding-right: 10px;
	background: rgb(45, 58, 24, 0.61);
	border-radius: 7px;
	margin-top: 8px;
	text-align: center;
	padding-top: 10px;
	color: #ffe6c2;
}

#badge-description {
	width:35px;
	margin-right:5px;
	background: #eecc9b;
	border-radius: 30px;
	padding: 5px;
}

#claim-reward {
	height:auto;
	width:auto;
	padding-top:14px;
	padding-bottom:2px;
	margin:5px auto;
	justify-content: center;
}

.black-circle {
	width: 35px;
	height: 35px;
}

.badge-gift {
	font-size:18px;
	margin-left: 4px;
}

.rank-respawn {
	position: absolute;
	font-size:16px;
	margin-left:-43px;
	margin-top:26px;
	z-index: 1;
	text-shadow: none;
}

.badge-reward {
	font-size:15px;
	/*flex-direction: column;*/
	display: flex;
	max-height:19px;
}

.delete-pet {
	width: 30px;
	position: absolute;
	z-index: 1;
	right: -8px;
	top: 0px;
}

.edit-pet {
	width: 30px;
	position: absolute;
	z-index: 1;
	right: -8px;
	top: 35px;
}

#card-visualisation {
	height: 434px;
	display: flex;
	flex-direction: column;
	width: 280px;
}

#card-animated, #pet-name-card, #weight-box, #tame-tooltip {
	transition:300ms;
}

/* ---- Update Box ---- */
.poison-animation {
	transform: scale(0);
	animation: poison 1500ms infinite ease;
}

@keyframes poison {
	0% { transform: scale(0); }
	50% { transform: scale(0.7); }
}


.poison-bubble-animation {
	transform: scale(0);
	animation: poison-bubble 1500ms infinite ease;
}

@keyframes poison-bubble {
	0% { transform: scale(0); }
	40% { opacity:1; }
	100% {
		transform: scale(1);
		opacity:0;
	}
}

.rock-animation {
	animation: rock 5s infinite ease;
}

@keyframes rock {
	0% { transform: translateY(0); }
	50% { transform: translateY(10px); }
}

#update-animation {
	/*animation: poison-background 6s infinite ease;*/
}

@keyframes poison-background {
	0% { background: #6d69ab; }
	50% { background: var(--black); }
}

#update-continue-button {
	width:324px;
	margin-top:190px;
	position: absolute;
	font-size:20px;
	margin-left:0px;
}

#update-see-more-button {
	width: 324px;
	top: 205px;
	position: absolute;
	font-size: 20px;
	right: 25px;
	background-color: #cf7730;
	border: 6px solid var(--black);
	box-shadow: inset 0 -6px 0 #a55612;
	text-align: center;
	border-radius: 10px;
	height: 40px;
	padding-top: 10px;
	cursor: url(../img/interface/cursor-pointer.png) 16 0, pointer;
}

#update-see-more-button:hover {
	background-color: #dc9154;
	box-shadow: inset 0 -6px 0 #bf6a20;
}

#update-see-more-button:active {
	background-color: #a55612;
	box-shadow: inset 0 6px 0 #944b0c;
	padding-top: 15px;
	height: 35px;
}

.landscape {
	/* time * number of lanscape */
	animation: landscape-steps 4000ms infinite;
	width: 100%; height: 100%;
	position: absolute;
	inset: 0;
}

.landscape.first { background: red; }
.landscape.second { background: #8d502d; animation-delay: 2000ms;}

@keyframes landscape-steps {
	0%, 49.99% { opacity: 0; }
	50%, 100% { opacity: 1; }
}

/* ---- Search Box ---- */
#search-id-box, #search-clan-box {
	margin-top: -6px;
	margin-bottom: 10px;
	margin-left: 155px;
	width: 484px;
	display:flex;
	flex-wrap: wrap;
	align-items: center;
}

#search-clan-box { margin-left: 185px; display: none;}

#search-id-box h5, #search-clan-box h5 {
	padding: 10px 20px;
	margin-top: -8px;
	margin-right: -6px;
	height: 20px;
	border-radius: 5px 0 0 5px;
}

#search-id, #search-clan {
	font-size: 20px;
	height: 40px;
	width: 252px;
	border-radius: 8px;
	border-width: 5px;
}

#search-button, #search-clan-button {
	height: 30px;
	margin-top: -7px;
	margin-left: 8px;
	padding: 0 5px;
	border-radius: 8px;
	border-width: 5px;
}

#search-img, #search-clan-img {
	width:80%;
}

#search-button:active > #search-img, #search-clan-button:active > #search-clan-img {
	padding: 5px 0;
}

#search-id::-webkit-outer-spin-button,
#search-id::-webkit-inner-spin-button,
#search-clan::-webkit-outer-spin-button,
#search-clan::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
#search-id[type=number] {
  -moz-appearance: textfield;
}

#friend-request-id::-webkit-outer-spin-button,
#friend-request-id::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
#friend-request-id[type=number] {
  -moz-appearance: textfield;
}

.yes-no-buttons {

	display: flex;
	width: 100%;
	padding-top: 10px;
	padding-bottom: 20px;
	justify-content: center;
}

#yes-no-box {
	width:480px;
	z-index:31;
	transform: scale(0);
	left: calc(50% - 300px);
	top: calc(50% - 100px);
	display:none;
	flex-wrap: wrap;
}

#yes-no-text {
	padding: 30px 50px 20px;
	font-size:25px;
	text-align: center;
}

#yes-no-text .yellow-button { cursor: url(../img/interface/cursor-default.png) 4 0, default; }

#reward-message-box, #incognito-box {
	width:480px;
	z-index:31;
	transform: scale(0);
	left: calc(50% - 300px);
	top: calc(50% - 100px);
	display:none;
}

#incognito-box { top: calc(50% - 248px); }
#incognito-box img { display: flex; margin: auto; }

#hidden-profile-text {
	background: #39312b;
	padding: 18px;
	border-radius: 6px;
	margin-top: -45px;
	position: relative;
	font-size: 22px;
}

#reward-message-text, #incognito-text {
	padding:50px;
	font-size:25px;
	text-align: center;
	overflow: hidden;
}

#reward-message-text { width: 100%; }

#minimap-box {
	z-index: 22;
	transform: scale(0);
	left: calc(50% - 224px);
	top: calc(50% - 233px);
	display:none;

}
#minimap {
	background:var(--black);
	width:300px;
	height:300px;
	border-radius: 10px;
}

#graphics-scroll {
	width:43%;
	overflow-y:scroll;
	height:470px;
}

#graphics-scroll::-webkit-scrollbar {
	background: #6d3817;
	border-radius: 10px;
}

#graphics-scroll::-webkit-scrollbar-thumb {
	background: #613011;
	border-radius: 10px;
}

#keys-scroll {
	display:flex;
	width:52%;
	flex-wrap:wrap;
	justify-content:space-around;
	overflow-y:scroll;
	height:470px;
}

#keys-scroll::-webkit-scrollbar {
	background: #6d3817;
	border-radius: 10px;
}

#keys-scroll::-webkit-scrollbar-thumb {
	background: #613011;
	border-radius: 10px;
}

.key-category-box {
	background: #7c4320;
	padding: 15px 0 5px 0;
	border-radius: 10px;
	width: 90%;
	flex-wrap: wrap;
	font-size: 10px;
}

.tamed-gauge-background {
	background: #6e2f43;
	width: 100px;
	height: 15px;
	margin-left: -8px;
	border-radius: 0 10px 10px 0;
}

.tamed-gauge {
	position: absolute;
	width: 0px;
	height: 15px;
	background: #c64053;
	left: 23px;
	transition: width 300ms;
	animation: scale-gauge 1s 1 ease;

}

@keyframes scale-gauge {
	0% {
		transform: scale(0, 1);
		margin-left:-35px;
	}
	100% { transform: scale(1); }
}

.tamed-gauge-border {
	border: 3px solid #36322c;
	border-radius: 10px;
	height: 15px;
	width: 104px;
	position: absolute;
	left: 25px;
}

.tamed-number {
	position: absolute;
	font-size: 50px;
	top: 72px;
	right: -27px;
	transform: rotate(-15deg);
	color: #c54053;
	width: 99px;
	text-align: center;
}

.tamed-number-heart {
	position: absolute;
	z-index: 1;
	left: 50%;
	transform: translateX(-50%);
	color: #fee5c1;
	margin-left: -50px;
}

#chest-opening-background-names {

	top: 100px;
	transition: opacity 200ms;
	position: absolute;
	background: var(--black);
	width: 384px;
	height: 117px;
	border-radius: 10px;
	z-index:-2;
}

#free-event-chest-button {
	height: 47px;
	margin-top: 1px;
	width: 200px;
}

#calendar-button {
	margin-top: 5px;
	width: 160px;
	position: relative;
	display: none;
}

#free-event-chest-button, #calendar-button {
	cursor: url(../img/interface/cursor-pointer.png) 16 0, pointer;

}

.button-text {
	margin-left: 30px;
	font-size: 14px;
	margin-top: -43px;
	position: absolute;
	color: #f1d9b7;
	text-align: center;
}

.section-button-right, .section-button-right-selected,
.section-button-left, .section-button-left-selected {
	margin: 11px -10px -7px -20px;
	height: 35px;
	padding: 12px 10px 0 23px;
	text-align:center;
	background: #693718;
	border-radius: 13px 0 0 13px;
	cursor:url(../img/interface/cursor-pointer.png) 16 0, pointer;
	transition: 100ms;
	transform:scale(0.8);
}

.section-button-right:hover, .section-button-left:hover, .section-button-right:active,
.section-button-right-selected, .section-button-left-selected {

	background: #7C4320;
}

.section-button-right:hover, .section-button-left:hover,
.section-button-right-selected, .section-button-left-selected { transform:scale(1.1); }
.section-button-right:active { transform:scale(1); }

.section-button-left, .section-button-left-selected {
	border-radius: 0 13px 13px 0;
	padding: 9px 5px 5px 7px;
	height: 40px;
	margin: 11px 11px -7px -7px;
}

.section-button-left { width: 60px; }
.section-button-left:hover { margin-bottom: -7px; }

.section-button-left:active, .section-button-left-selected {
	margin-left: 4px;
	padding-right: 10px;
	padding-left: 10px;
	border-radius: 0;
}

.section-button-right {
	width: 25px;
	margin-left: 3px;
	margin-top: 0px;
	margin-bottom: 0px;
}

.section-button-right:hover { margin-left: 0px; width: 20px; }
.section-button-right:active, .section-button-right-selected {
	margin: 0 2px 0 0;
	border-radius: 5px 0 0 5px;
	width: 20px;
}

.section-button-right:active {
	margin-right: -3px;
	margin-left: 3px;
}

#skill-picture-container {
	width: 100px;
	height:100px;
	padding: 10px;
	margin: 8px 0 0 8px;
}

#skill-picture-container, .skill-picture-container {
	background: #ffe6c2;
	border-radius: 70px;
}

#skill-picture {
	width: 100px;
	height:100px;
}

.wing-animation {
	animation: wing-animation 1s infinite;
}
@keyframes wing-animation {
	0%, 100% {
		width: 50%;
		height: max-content;
	}
	50% {
		width: 20%;
		margin-left: 38px;
	}
}

.mouth-animation {
	animation: mouth-animation 3s infinite;
}

@keyframes mouth-animation {
	0%, 100% {
		height: 28%;
		width: max-content;
	}

	50% {
		height: 20%;
		width: max-content;
	}
}

#scoreboard-respawn-video-button {
	display: flex;
	padding-right: 64px;
	width: 240px;
	background: var(--yellow1);
	box-shadow: inset 0 -6px 0 #cf7730;
	justify-content: center;
}

#scoreboard-respawn-video-button:hover {
	background: #efd86f;
	box-shadow: inset 0 -6px 0 #e6b343;
}

#scoreboard-respawn-video-button:active {
	background: #ca9b1c;
	box-shadow: inset 0 6px 0 #bd5d20;
	padding-top: 14px;
	height: 38px;
}

#respawn-background-video {
	right:-1px;
	width: 55px;
	height: 52px;
	padding-left: 10px;
	top: -1px;
	position: absolute;
	background: var(--black);
}

#scoreboard-respawn-ga-button {
	display: flex;
	display:none;
	padding-left: 30px;
	width: 260px;
	background: var(--yellow1);
	box-shadow: inset 0 -6px 0 #cf7730;
}

#respawn-background-ga {
	right: -1px;
	width: 75px;
	height: 52px;
	padding-left: 10px;
	top: -1px;
	position: absolute;
	background: var(--black);
}

.loading-respawn-animation {
	animation: loading-respawn 2s infinite;
	width:40px;
}

@keyframes loading-respawn {
	0% { transform: rotate(0deg); }
	50% { transform: scale(0.8) rotate(180deg); }
	100% { transform: rotate(360deg); }
}

/*Plush event */
#contest-button, #right-wrap .news-button {
	width:100%;
	margin-top:-70px;
}

#right-wrap .news-button {
	position: relative;
	padding: 8px 15px 0 35px;
	text-align: left;
	height: 35px;
}

#right-wrap #news-button {
	padding-left: 20px;
	padding-right: 10px;
	width: 140px;
}

#right-wrap  .news-button img {
	position: absolute;
	top: -10px;
	width: 60px;
	height: 60px;
}

#plush-time {
	position: absolute;
	top: 12px;
	width: 170px;
	text-align: center;
	left: 38px;
	font-size: 15px;
	font-weight: 100;
}

#news-button img { right: -32px; }
#news-button:hover img { filter: brightness(1.2); }

#store-button img { right: 196px; }
#store-button { width: 148px !important; padding: 8px 15px 0 70px !important;}

#howto {
	margin: -70px 5px 0 0;
	height: 56px;
	width: 56px;
}

#howto p { font-size: 35px; margin-top: -3px; }

#contest-button {
	background-color: var(--yellow1);
	box-shadow: inset 0 -5px 0 #e2961f;
	font-size: 16px;
	padding-top: 3px;
	height: 47px;
}

#contest-button:hover {
	background-color: #fbe26c;
	box-shadow: inset 0 -5px 0 #f1a835;
}

#contest-button:active {
	background-color: #de991b;
	box-shadow: inset 0 -5px 0 #d0840d;
	height:42px;
}

#img-contest-btn { margin-top:5px }

#contest-button:active > #img-contest-btn { margin-top:0; }

#contest-box {
	display:flex;
	z-index:24;
	height:590px;
	width:842px;
	display:none;
	left: calc(50% - 477px);
	transform: scale(0);
	padding: 0px 45px 17px 45;
}

#contest-container {
	display:flex;
	flex-wrap:wrap;
	width:280px;
	margin-top:70px;
}

.f18 { font-size:18px; }

.left-triangle-popup {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 66.5px 0 66.5px 20px;
	border-color: transparent transparent transparent #9e5c33;
}

.right-triangle-popup {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 66.5px 20px 66.5px 0;
	border-color: transparent #9e5c33 transparent transparent;
}

#participate-btn {
	border-radius:10px;
	border:5px solid #36322c;
	background:#f3be1e;
	box-shadow:inset 0 -5px 0 #f47c1c;
	text-align: center;
	height:50px;
	width:100%;
	font-size: 30px;
	padding-top: 6px;
	cursor:url(../img/interface/cursor-pointer.png) 16 0, pointer;
	margin-bottom:-10px;
}

#participate-btn:hover { background: #ffd75f; }

#participate-btn:active {
	background: #ea832a;
	box-shadow:inset: 0 5px 0 #bb590a;
	padding-top:11px;
	height:45px;
}

#time-left-contest {
	margin:auto;
	font-size:25px;
}

#list-ticket-scroll {
	display: flex;
	width: 49%;
	background: #7c4320;
	padding: 20px 19px 7px 7px;
	border-radius: 8px;
	margin-top: -1px;
	flex-wrap: wrap;
	height: auto;
	overflow-x: hidden;
	overflow-y: scroll;
}

#list-ticket-scroll::-webkit-scrollbar {
	background: #6d3817;
	border-radius: 10px;
}

#list-ticket-scroll::-webkit-scrollbar-thumb {
	background: #613011;
	border-radius: 10px;
}

.open-gift-img {content: url("../img/interface/golden-gift-opened.png"); }

.gift-ticket-amount {
	font-size: 26px;
	width:160px;
	top: 94px;
	left: 116px;
}

.gift-ticket-text {
	font-size: 13px;
	letter-spacing: 1px;
	top: 17px;
	left: 54px;
}

.gift-ticket-used-text {
	top: 26px;
	left: calc(100% - 203px);
	transform: translateX(-50%);
	line-height: 19px;
	font-size: 13px;
	width: 231px;
}

.gift-ticket-code1 {
	width:21px;
	margin-left:4px;
	font-size:21px;
}

.hide-code {
	margin-top: 0px;
	margin-left:3px;
	width:70px;
	border: 5px solid var(--black);
}

.closed-gift-background {
	position:absolute;
	right:-3px;
	top: 0px;
	text-align:center;
	font-size:13px;
	height:174px;
	width:80px;
}

.opened-gift-background {
	left:73px;
	top:66px;
	font-size:18px;
}

.ticket-size {
	height:193px;
	margin: 0 5px;
	position:relative;
}

.used-gift { filter:grayscale(1); }

#enter-code-gift {

	color: rgb(255, 230, 194);
	background:#5a3118;
	border:5px solid #36322c;
	padding:10px;
	border-radius:9px;
	text-align:center;
	width:100%;
	font-size:22px;
	margin-top:10px;
	cursor: url(../img/interface/cursor-text.png) 16 16, text;
}

#enter-code-gift::-webkit-input-placeholder {
	/* Chrome/Opera/Safari */
	color: rgb(255, 230, 194, 0.8);
}

#enter-code-gift::-moz-placeholder {
	/* Firefox 19+ */
	color: rgb(255, 230, 194, 0.8);
}

#enter-code-gift:-ms-input-placeholder {
	/* IE 10+ */
	color: rgb(255, 230, 194, 0.8);
}

#enter-code-gift:-moz-placeholder {
	/* Firefox 18- */
	color: rgb(255, 230, 194, 0.8);
}

#ok-code-gift-button {
	background: #ce5a28;
	border-radius: 10px;
	width: 100%;
	height: 41px;
	margin-top: 6px;
	text-align: center;
	font-size: 27px;
	border: 5px solid #36322C;
	box-shadow: inset 0 -5px 0 #af3a0d;
}

#ok-code-gift-button:hover {
	background:#e28131;
	box-shadow: inset 0 -5px 0 #c34910;
}

#ok-code-gift-button:active {
	background:#c34213;
	padding-top:5px;
	height:36px;
	box-shadow: inset 0 5px 0 #a53603;
}

#buy-gapples-for-friends {
	display:flex;
	background: var(--yellow1);
	width:100%;
	height:55px;
	font-size:20px;
	margin-top:10px;
	padding:7px 0;
	box-shadow: inset 0 -5px 0 #cf7730;
}

#buy-gapples-for-friends:hover {
	background:#efd561;
	padding-top:7px;
	box-shadow: inset 0 -5px 0 #c38a0e;
}

#buy-gapples-for-friends:active {
	background: var(--yellow1);
	height:50px;
	padding-top:12px;
	box-shadow: inset 0 5px 0 #d78423;
}

.offer-gift-text-position {
	width:100%;
	text-align: center;
}

.offer-gift-box {
	display:flex;
	flex-wrap:wrap;
	background:#7c4320;
	padding:14px;
	border-radius:8px;
}

.gift-box-title {
	font-size:25px;
	display:flex;
	align-items:center;
	margin-top:-5px;
}


#offer-gift-selected {
	height:450px;
	display:flex;
	justify-content:space-around;
}

#offers-container {
	display:flex;
	flex-direction:column;
	width:45%;
	justify-content:space-between;
}

.gift-ticket-text-opened {
	text-align: center;
	width: 220px;
	margin-left: 30px;
	margin-top: 11px;
}

#scoreboard-info,
#scoreboard-pet {
	position: absolute;
	right: 0;
	width: 37px;
	height: 56px;
	font-size: 40px;
	background: #b33e2e;
	box-shadow: inset 0 -5px 0 #801f12;
	cursor: url(../img/interface/cursor-pointer.png) 16 0, pointer);
}

#scoreboard-pet { right: 67px; }

#scoreboard-info:hover,
#scoreboard-pet:hover { background: var(--yellow1); }

#scoreboard-info:active,
#scoreboard-pet:active  {
	background: #b33e2e;
	height: 50px;
	box-shadow: inset 0px 5px 0 #801f12;
}

#scoreboard-info-box {

	display: none;
	width: 700px;
	height: 270px;
	top: -42px;
	z-index: 3;
	left: -48px;
	padding:20px;
	justify-content: space-between;
	transform: scale(0);
}

#score-scoreboard-info {
	font-size: 26px;
	margin-top: -6px;
}

#badge-scoreboard-info {
	position:absolute;
	border-radius:20px;
	width:50px;
	height:50px;
	border-radius:130px;
	top:16px;
	left:383px;
	background:var(--brown5);
}

#killer-scoreboard-info { font-size:24px; }

.box-stat-scoreboard-info {
	display: flex;
	justify-content: space-around;
	margin-top: 20px;
 }

 .score-size-scoreboard-info { font-size: 25px; }

.score-recipe-scoreboard-info {
	display: flex;
	align-items: center;
	justify-content: center;
 }

.img-recipe-scoreboard-info {
	width: 30px;
	background: #332e28;
	border-radius:20px;
	padding:5px;
}

#leaderboard-scoreboard-info::-webkit-scrollbar {
	background: #663619;
	border-radius: 10px;
}

#leaderboard-scoreboard-info::-webkit-scrollbar-thumb {
	background: #7c4320;
	border-radius: 10px;
}

.best-scores-msg {
	font-size: 16px;
	text-align: center;
	padding-top: 7px;
	color: #36322c;
	text-shadow:#36322c 1px 1px 0px;
}

#buttons-scoreboard-next {
	margin-top: 240px;
	font-size: 20px;
	height: 40px;
	display:flex;
	justify-content: space-around;
	align-items:center;
	width:10px;
}

#scoreboard-info-stats {
	width: 60%;
	margin-top:-8px;
}

#limited-offer-cosmetics {
	z-index: 3;
	height: 280px;
	top: -40px;
	padding: 15px;
	left: -22px;
	transform: scale(0);
}

#limited-offer-time-left { font-size: 23px; }

#offer-description-text {
	position: absolute;
	top: 178px;
	left: 157px;
	text-align: center;
	transform: translateX(-50%);
	width: 530px;
}

#popup-offer-continue-button {
	height: 43px;
	padding-top: 7px;
}

#offer-title {
	position: absolute;
	top: 22px;
	width: 655px;
	left: 0;
	text-align: center;
	font-size: 20px;
}

.black-box {
	border: 5px solid #36322c;
	border-radius: 5px;
	background: #36322c;
}

#get-this-offer-button {
	background-color: var(--yellow1);
	box-shadow: inset 0 -6px 0 #cf7730;
}

#get-this-offer-button:hover {
	background-color: #fbdb48;
	box-shadow: inset 0 -6px 0 #cf7730;
}

#get-this-offer-button:active {
	background-color: #cf7730;
	box-shadow: inset 0 -6px 0 #bf651d;
}

#img-exclusive {
	position: absolute;
	right: 15px; top: 15px;
}

#pet-tips-container {
	display: flex;
	background: #9e5c33;
	justify-content: space-around;
	flex-grow: 1;
	border-radius: 5px 5px 0 0;
	height: 40px;
	margin-bottom: -15px;
	align-items: center;
	position: relative;
}

#exclusive-text {
	position: absolute;
	right: 14px;
	top: 45px;
	font-size: 21px;
	transform: rotate(30deg);
	z-index: 2;
}

#gift-text {
	font-size: 21px;
	transform: rotate(30deg);
	z-index: 2;
	position:absolute;
}

#friend-request-container {
	height:70px;
	width: 720px;
	flex-wrap:wrap;
	font-size:13px;
	padding: 17px 10px 10px 10px;
	margin: 0 7px 7px 0;
	align-content: baseline;
}

#friend-request-id-box {
	display: flex;
	align-items: center;
	margin: 20px 0 7px;
}

#friend-request-text {
	margin: -70px 0 8px 10px;
	position: absolute;
}

#friend-request-id {
	width: 100%;
	font-size: 20px;
}

#friend-request-button { margin: -5px 0 0 5px; }

#friend-request-img {
	width: 35px;
	margin: -2px 0 0 -2px;
}

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

#friends-tab .tooltip { width: 80px; left: -20px; }
#friends-invite-tab .tooltip { width: 120px; left: -42px }
#referral-tab .tooltip { width: 150px; left: -57px }

#friend-invitations-container,
#friends-log-container {
	height:294px;
	width: 50%;
	align-content: baseline;
	flex-wrap:wrap;
	font-size:13px;
	padding: 10px;
	margin-right: 7px;
	border-radius: 8px;
	overflow: hidden auto;
}

.friend-validation-container {
	border-radius: 0 5px 5px 0;
	background: var(--black);
	margin-left: auto;
}

.friend-validation-container button {
	border: none;
	height: 45px;
	width: 45px;
}

.friend-invitations {
	background: #693718;
	display: flex;
	width: 110%;
	margin-top: 7px;
	border-radius: 5px;
	height:60px;
}

.friend-invitations div {
	display: flex;
	align-items: center;
	width: 110px;
	justify-content: space-evenly;
}

#clan-invite-container .friend-name,
#friend-invitations-container .friend-name {
	font-size: 17px;
	width: 216px;
	border-radius: 5px 0 0 5px;
	margin-left: 0px;
	padding: 0;
}

#clan-invite-container .friend-name {
	width: 170px;
	height: 38px;
	padding: 12px 10px 0;
}

#clan-invite-container button {
	height: 50px;
	width: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
}

#friends-log-container .friend-invitations.friend-name {
	width: 100%;
	margin: 7px 0;
	padding: 12px 10px 0px;
	height: 44px;
	overflow: visible;
	position: relative;
	display: flex;
	align-items: center;
}

#friends-log-container h2 {
	max-width: 200px;
	line-height: 28px;
	min-height: 28px;
	padding: 0 5px;
	margin-right: auto;
}

#friends-log-container h4 { color: var(--beige); }

#friends-log-container div h4:nth-child(1),
#friends-log-container div h4:nth-child(2) { position: absolute; top: -2px;}

#friends-log-container div h4:nth-child(1) { left: 10px; }
#friends-log-container div h4:nth-child(2) { right: 10px; }

#friend-invitations-container::before,
#friends-log-container::before {
	content: "They recently played with you";
	display: block;
	background: var(--black);
	border-radius: 8px 8px 0 0;
	margin: -10px -10px 0;
	padding: 7px 15px;
	width: 100%;
	position: sticky;
	z-index: 1;
	top: -10px;
	text-align: center;
	font-size: 16px;
}

#friend-invitations-container::before { content: "They want to be your friend"; }

.friend-name-invitation {
	font-size: 15px;
	width: auto;
	max-width: 200px;
}

.friend-name-id { font-size:20px; }

.friend-name {
	padding: 3px 10px 3px 30px;
	margin-left: -15px;
}

#clan-invite-container {
	height: 230px;
}

.clan-leader-name:hover,
.friend-name:hover {
	background: #9e5c33;
	border-radius: 5px;
	cursor: url(../img/interface/cursor-pointer.png) 16 0, pointer;
}

.clan-leader-name:active,
.friend-name:active {
	background: var(--brown3);
	border-radius: 5px;
}

.invitation-validation {
	padding: 5px;
	height: 30px;
	margin-top: -4px;
	border-radius: 10px;
}

#friends-list-container {
	height: 400px;
	width: 720px;
	flex-wrap: wrap;
	font-size: 13px;
	padding: 10px;
	border-radius: 0 8px 8px;
	align-content: baseline;
	overflow-y: auto;
	overflow-x: hidden;
	align-items: center;
	display: flex;
}

#friends-referral-container {
	text-align: center;
	padding: 25px 25px 15px 25px;
	position: relative;
}

#friends-referral-container main {
	padding: 15px 0 0;
	margin-top: -7px;
	border-radius: 8px;
}

#friends-referral-container section { margin: 20px 0 0 70px; }
#friends-referral-container section,
#friends-referral-container nav {
	display: flex;
	justify-content: space-between;
}

#friends-referral-container figure {
	height: 150px;
	width: 100px;
	border-radius: 5px 5px 0 0;
	background: var(--brown1);
	border: 5px solid var(--brown3);
	box-sizing: border-box;
}

#friends-referral-container figure.validate {
	border: 5px solid var(--yellow2);
	background: var(--orange1);
}

#friends-referral-container figure.validate img, #friends-referral-container h4,
#friends-referral-container figure button, #referral-gauge,
.join-friend, #friends-referral-container img:nth-of-type(2) { position: absolute; }

#friends-referral-container figure.validate img { top: 0px; left: 0px; }

#friends-referral-container figure img[src="./img/interface/see.png"] { display: none;}
#friends-referral-container figure.validate img[src="./img/interface/see.png"] { top: 2px; left: 2px; display: block; z-index: 1; }
#friends-referral-container figure.validate img[src="./img/interface/see.png"]:hover { filter: brightness(1.3); }

#friends-referral-container figure button {
	top: 71px;
	z-index: 1;
	left: 0px;
	width: 90px;
	display: none;
}

#friends-referral-container p { font-size: 23px; }
#friends-referral-container figure:nth-child(1) p,
#friends-referral-container figure:nth-child(2) p { font-size: 36px; }

#friends-referral-container figure.validate p { top: 81px; }

#friends-referral-container figure.validate:nth-child(1) p,
#friends-referral-container figure.validate:nth-child(2) p { top: 70px; }

#friends-referral-container figure,
#friends-referral-container p,
#friends-referral-container img:nth-child(1),
#friends-referral-container nav { position: relative; z-index: 1; }

#friends-referral-container img:nth-child(1) {
	margin: 8px 0 -17px;
	width: 100%;
}

#friends-referral-container img:nth-of-type(2) {
	left: 0; top: 0;
	width: 100%;
}

#friends-referral-container nav {
	height: 20px;
	width: 690px;
	margin-top: -6px;
}

#referral-gauge {
	min-width: 70px;
	width: 170px;
	max-width: 690px;
	height: 21px;
}

#friends-referral-container mark {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 50px;
	width: 50px;
	color: var(--white);
	border-radius: 25px;
	margin: -15px -5px 0;
	font-size: 32px;
	z-index: 1;
}
#friends-referral-container mark:nth-child(8) { margin-right: 27px; }

#friends-referral-container mark, #friends-referral-container nav,
#friends-referral-container main { background-color: var(--brown3); }

#friends-referral-container mark.validate, #referral-gauge { background-color: var(--yellow2); }

#friends-referral-container button:nth-child(2) { margin-top: 30px; }
#friends-referral-container button:nth-child(2) p {
	font-size: 21px;
	padding: 8px;
}

#friends-referral-container h4 {
	bottom: 38px;
	right: 70px;
	font-size: 20px;
	opacity: 0;
	transition: opacity 200ms;
}

.clan-info-box,
.friend-info-box {
	background: #693718;
	width: 100%;
	border-radius: 6px;
	display: flex;
	margin: 5px 0;
	height: 80px;
	position:relative;
	margin-bottom: 12px;
	font-size: 13px;
}

.friend-info-box .flex-column { margin-left: 15px; justify-content: center; }

.clan-info-box { height: 120px; }

#clan-list-container, #events-list-container, #events-container, #clan-settings-container {
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	width: 416px;
}

#clan-list-container, #events-list-container{
	overflow-x: hidden;
	overflow-y: auto;
}

#clan-list-container .friend-info-box .flex-column { width: 250px; }

.clan-settings {
	background: var(--black);
	padding: 12px 10px;
	border-radius: 5px;
	margin-bottom: 5px;
	width: 95%;
	height: 50px;
}

#create-event-container { width: auto; }

#clan-input-join, #clan-input-create { font-size: 19px; }

#clan-join-button, #clan-create-button { width: 90%; }

#clan-member-container {
	width: 100%;
	border-radius: 0 10px 10px;
}

.friend-container {
	font-size: 17px;
	display: flex;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-left: 25px;
	width: 268px;
	height:29px;
}

.connection-info {
	width: 13px;
	height: 13px;
	border-radius: 14px;
	margin: 4px;
	border: 3px solid #40342b;
	position:absolute;
	left:25px;
}

.online { background: #a8c636; }
.offline { background: #b33e2e; }

.online-font { color: #a8c636; }

.offline-font { color: #b33e2e; }
#friends-list-container .offline-font { margin-left: 20px; }

.join-friend {
	right: 65px;
	top: 4px;
	font-size: 17px;
	padding: 7px 18px 12px 18px;
	border-radius: 10px;
	background: #a8c636;
	box-shadow: inset 0 -5px 0 #6e860e;
	border: 5px solid var(--black);
	cursor: url(../img/interface/cursor-pointer.png) 16 0, pointer;
}

#clan-list-container .join-friend {
	height: 53px;
	width: 40px;
	display: flex;
	border-radius: 7px;
	justify-content: center;
	align-items: center;
	margin-left:auto;
	position: static;
}

.clan-owner-join {
	position: relative;
	right: 0;
	height: 60px;
}

.join-clan {
	height: 87%;
	margin-top: -10px;
	margin-right: -10px;
}

.join-friend:hover {
	background: #c8e653;
	border: inset -5px solid #789413;
}

.join-friend:active {
	background: #6b860c;
	border: inset 5px solid #516705;
}

.box-scrollbar::-webkit-scrollbar {
	background: #6d3817;
	border-radius: 10px;
}

.box-scrollbar::-webkit-scrollbar-thumb {
	background: #613011;
	border-radius: 10px;
}

.empty-container-msg {
	font-size: 27px;
	text-align: center;
}

#no-friend-request-img {
	width:160px;
	margin: -40px inherit -20px;
}

#no-friend-invitation { padding:40px 40px 0; }

#no-friend {
	padding: 120px 25px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

#no-friend img { width: 200px; }

.friend-id {
	position: absolute;
	top: -7px;
	font-size: 11px;
	left: 12px;
	color: var(--gold0);
}

#friend-options {
	height: 54px;
	border-radius: 7px;
	margin-left: auto;
	width: 240px;
	padding: 0px 10px;
	font-size:20px;
	align-items: center;
}

#player-info-id {
	position: absolute;
	top: 18px;
	font-size: 18px;
	right: 67px;
	color: var(--gold0);
	width: 150px;
	text-align: right;
}

#profile-box .section-button#help-badges {
	margin: auto;
	width: 85px;
	height: 60px;
	align-items: center;
	justify-content: center;
	padding: 0;

}

#mobile-box {
	z-index: 24;
	width: 380px;
	left: calc(50% - 190px);
	top: calc(50% - 178px);
	transform: scale(0);
}

#mobile-container p {
	background: var(--black);
	height: 51px;
	margin-top: -5px;
	margin-left: -5px;
	margin-right: -6px;
	padding-top: 7px;
	border-radius: 5px 5px 0 0;
	margin-bottom: -12px;
}
.mobile-gift img {
	width: 50px;
	background: var(--black);
	border-radius: 8px;
	margin: 5px;
}

#settings-mobile {

	display: none;
}

.news-alert-changelog {
	width: 690px;
	margin-bottom: -14px;
	margin-top: 9px;
	padding: 17px 0px;
	padding-left: 20px;
	border-radius: 7px 7px 0 0px;
	color: var(--yellow1);
}

.message-with-picture {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	margin: -30px;
	background: var(--black);
	padding: 36px;
}

.message-with-picture img {
	width: 96px;
	background: var(--black);
	border-radius: 195px;
	margin-top: -20px;
}

.pet-points-title { background-color: var(--black); border-radius: 5px; padding: 0px 20px; height: 48px; }
.pet-points-cost { background-color: var(--brown1); border-radius: 5px 5px 0 0; padding: 15px; margin-left: 5px; height: 30px; }
.pet-point-allocation-table { background-color: var(--black); border-radius: 5px; display: flex; position:relative; padding-left: 32px; margin-top: 9px;}
.c-purple { color:#7869d1; }
.c-grey { color:#6f685a; }
.pet-point-allocation-table h3 { color:#f1bd8f; margin-top: -10px; margin-bottom: 4px; }
.pet-point-allocation-table h4 { margin-top: -5px; width: 200px; display: flex; }
.pet-point-allocation-table span { margin-right: 5px; }
.pet-point-allocation-table img { position: absolute; left: -25px; top:-5px; }
.pet-point-allocation-table button {

	margin-left: auto;
	margin-top: -13px;
	border: var(--black) solid 5px;
	border-radius: 9px;
	color: #fddcb5;
	font-size: 44px;
	height: 43px;
	width: 38px;
}

.pet-point-allocation-table p { margin-top: -25px; margin-left: -7px; }
.pet-point-allocation-table h4:nth-child(4) {

	background: var(--black);
	height: 25px;
	margin-top: -13px;
	margin-left: -5px;
	padding: 10px 5px;
	border-radius: 0 5px 5px;
	width: 60px;
	justify-content: center;
}

.pet-point-allocation-table h3 { font-size: 16px; margin-right: 7px; }
.pet-point-total { margin-top: 0px; }
.pet-point-total p { margin-top: 4px; }
.pet-point-total h2 { margin: -2px 23px 0 auto; }
button.grey-button p { margin-top: -20px }
.pet-level-points {margin-left: auto;}
.alert::after {

	z-index: 1;
	content: "!";
	position: absolute;
	display: block;
	width: 20px;
	height: 20px;
	top: -20px;
	right: -5px;
	border-radius: 12px;
	animation: scale 1000ms linear infinite;
	font-size: 45px;
	color: red;
}

#pets.alert::after {
	font-size: 55px;
	top: -8px;
	right: 14px;
}

.staging-see-pet.alert::after { right: 3px; }

.alert.section-button div:nth-child(1){
	animation: opacityx2-section 3s linear infinite;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	border-radius: 10px;
}

.alert.tamodex-card-container .tamodex-pet-background {
	border-radius: 10px;
	border: 2px solid #d92305;
	margin-top: -2px;
	margin-left: -2px;
	animation: opacity-border 3s linear infinite;
}

.alert.tamodex-card-container:after {
	top: 0px;
	right: -5px;
}

@keyframes opacity-border {
	0%, 20%, 45%, 100% { border: 2px solid transparent; }
	10%, 30% { border: 2px solid #d92305 }
}

@keyframes opacityx2-section {
	0%, 20%, 45%, 100% { background: var(--brown3); }
	10%, 30% { background: #d92305; }
}


/* --- Optimized css -- */
a {
	text-decoration: none;
	color: var(--beige);
}

button, a { cursor: url(../img/interface/cursor-pointer.png) 16 0, pointer; }

p { color: var(--white); }

h1, h2, h3 { font-weight: 400; }

h4, h5, h6 { font-weight: 100; }

ul { margin: 0 0 10px; }

ul.dashed { list-style-type: none; }

ul.dashed > li { padding: 5px 40px; }

ul.dashed > li:before {
	content: "-";
	text-indent: -5px;
}

#changelog-box li { color: var(--white); }

#changelog-box li ul li {

	font-weight: 300;
	color: var(--beige1);
}

#changelog-box li ul li ul li {

	font-size: 14px;
	color: #b98740;
}

#changelog-box div.tuto {

	background: var(--black);
	border-radius: 5px;
	margin: 0 20px;
	padding: 5px;
}

#changelog-box ol li ul {
	font-size: 14px;
	color: #b98740;
}

#changelog-box ol li ul::marker { content: "- "; }

#changelog-box.subtitle {
	margin-bottom: 10px;
	font-weight: 300;
	color: var(--beige1);
}

textarea { outline: none; }

select, .clickable {
	cursor: url(../img/interface/cursor-pointer.png) 16 0, pointer;
}

.z-index { z-index: 1; }

.select-none { user-select: none; }

.c-beige { color: var(--beige); }

.c-beige1 { color: var(--beige1); }

.c-white { color: var(--white); }

.c-yellow { color: var(--yellow1); }

.c-orange { color: var(--orange1); }

.c-green { color: var(--green1); }

.c-red { color: var(--red1); }

.c-red2 { color: #ed361f }

.c-transparent { color: transparent; }

.tooltip {
	padding: 15px;
	border-radius: 10px;
	background: var(--black);
}

.tooltip-ranking {
	background: var(--brown5);
	border: 5px solid #9e5c33;
	width: 310px;
	height: 170px;
	position: absolute;
	z-index: 2;
	animation: tooltip 300ms 1 ease;
}

.position-full {
	width:100%;
	position:absolute;
	left:0;
	top:0;
}

.transition { transition: all 100ms; }

.pop-title {
	left: -34px;
	position: absolute;
	top: 13px;
	background: var(--beige);
	border-radius: 10px 10px 10px 0;
	border: 5px solid var(--black);
	line-height: 30px;
	padding: 10px 15px;
}

.pop-title::after {
	position: absolute;
	bottom: -34px;
	left: -5px;
	border-top: 30px solid var(--black);
	border-left: 30px solid transparent;
	content: "";
}

.background-popupbox {
	background: var(--brown2);
	border-radius: 8px;
	padding: 5px;
}

/* ---- Box with a scroll --- */
.scroll-container {
	margin-top: 50px;
	background: var(--brown2);
	padding: 15px;
	border-radius: 10px;
	max-height:397px;
	overflow-y: scroll;
	overflow-x: hidden;
}

.scroll-content-bg {
	background: var(--brown3);
	padding: 0px 30px;
	border-radius: 10px;
	margin: 10px 0;
}

.scroll-title {
	font-size: 20px;
	background: var(--black);
	padding: 0 25px;
	border-radius: 7px;
	width: calc(100% + 10px);
	margin-left: -30px;
}

.scroll-title img{
	margin: 7px 10px 7px 0;
	border-radius: 43px;
	padding: 6px;
	height: 40px;
	width: 40px;
}

.scroll-subtitle,
.scroll-subtitle1 {
	font-size: 20px;
	padding: 12px 0 12px 20px;
	border-radius: 8px;
}

.scroll-subtitle {
	font-size: 20px;
	margin: 20px 0 15px 0;
	padding: 12px 20px;
	background: var(--black);
}

.scroll-subtitle1 {
	background: var(--brown2);
	margin: 20px 40px;
}

/* --- Scrollbars ---*/
.scrollbar0::-webkit-scrollbar {
	background: #7d4320;
	border-radius: 10px;
	width: 8px;
}

.scrollbar0::-webkit-scrollbar-thumb {
	background: #613011;
	border-radius: 10px;
}

.scrollbar1::-webkit-scrollbar {
    background: #3a322b;
    border-radius: 0 10px 10px 0;
    width: 22px;
}

.scrollbar1::-webkit-scrollbar-thumb {
    background: #ffe5c1;
    border-radius: 10px;
    border: 5px solid transparent;
    background-clip: content-box;
}

.scrollbar2::-webkit-scrollbar {
	background: transparent;
	width: 15px;
}

.scrollbar2::-webkit-scrollbar-thumb {
	background: #ffe5c1;
	border-radius: 10px;
	border: 5px solid transparent;
	background-clip: content-box;
}

/* ---- Buttons ---- */
.activate-box {
	position: relative;
}

.active-box-shadow {
	background-color: rgba(2, 2, 2, 0.10);
	width: 100%;
	height: 100%;
	margin-top: 8px;
}

.activate-line {
	width: 66px;
	height: 15px;
	background-color: var(--red2);
	border-radius: 12px;
	overflow: hidden;
	border: 6px solid var(--black);
	transition: 300ms;
}

.activate-circle {
	top: 26px;
	margin-left: -10px;
	margin-top: -34px;
	position: absolute;
	background-size: 100%;
	overflow: hidden;
	transition: 300ms;
	cursor:url(../img/interface/cursor-pointer.png) 16 0, pointer;
}

.activate-line-on {
	background-color: var(--white);
}

.activate-circle-on {
	margin-left: 46px;
}

.no-button-member, .incognito-member, .button-member {
	text-align: center;
	border-radius: 7px;
	padding-bottom: 6px;
	padding-top: 4px;
	margin-top: 2px;
}

.incognito-member, .button-member {
	cursor:url(../img/interface/cursor-pointer.png) 16 0, pointer;
	color: var(--white);
}

.incognito-member { background-color: var(--brown3); }

.button-member { background-color: var(--black) }

.no-button-member, .incognito-member:hover { background-color: var(--brown0); }

.incognito-member:active { background-color: var(--brown4); }

.button-member:hover { background-color: #58534a; }

.button-member:active { background-color: #23221f; }

.button-homepage {
	cursor:url(../img/interface/cursor-pointer.png) 16 0, pointer;
	color: var(--white);
	padding: 0 5px;
	background-color: var(--black);
	text-align: center;
	border-radius: 12px;
	border: 6px solid var(--black);
	box-shadow: inset 0 -5px 0 #23221f;
	width: 29px;
	height: 40px;
}

.button-homepage:hover {
	background-color: #58534a;
	box-shadow: inset 0 -5px 0 #3d3b2f;
}

.button-homepage:active {
	background-color: #23221f;
	box-shadow: inset 0 5px 0 #433b31;
	padding-top: 6px;
	height: 34px;
}

.button-homepage img {
	width: 100%;
	cursor:url(../img/interface/cursor-pointer.png) 16 0, pointer;
}

img.gift-rotate {
	animation: gift-rotate 1s infinite ease;
	width:auto;
	margin-top:-8px;
	margin-left: -155px;
	transform: rotate(5deg);
}

@keyframes gift-rotate {
	0%, 50%, 100% { transform: rotate(5deg); }
	25%, 75% { transform: rotate(-5deg); }
}

.button0, .button0-active, .button1, .button1-active, .button2, .button2-active{
	cursor: url(../img/interface/cursor-pointer.png) 16 0, pointer;
	user-select: none;
	text-align: center;
	padding: 7px 10px 13px 10px;
	border: solid var(--black);
}

.button0, .button0-active {
	border-width: 4px;
	border-radius: 6px;
}

/* larger border */
.button1, .button1-active {
	border-width: 5px;
	border-radius: 9px;
}

/* larger border */
.button2, .button2-active {
	border-width: 6px;
	border-radius: 9px;
}

.button-clan { width: 39px; height: 35px; padding: 0 2px 5px; }
.button-clan img { height: 100%; width: auto; }
.button-clan:active img { margin-top: 5px; }

.white-circle {
	background: var(--white);
	box-shadow: inset -1px -8px 0 var(--beige);
	border: 6px solid var(--black);
	width: 15px;
	height: 15px;
	transition: all 100ms;
}

.green-circle,
.green-square {
	box-shadow: inset -1px -8px 0 var(--green3);
	border: 6px solid var(--black);
	width: 30px;
	height: 30px;
}

.green-circle,
.white-circle { border-radius: 20px; }

.green-square { border-radius: 10px; }

.green-button,
.green-circle,
.green-square {
	background: var(--green1);
}

.green-button {
	box-shadow: inset 0 -5px 0 var(--green2);
}

.green-button:hover {
	background: var(--green0);
	box-shadow: inset 0 -5px 0 var(--green1);
}

.green-button:active {
	background: var(--green2);
	box-shadow: inset 0 5px 0 var(--green2);
}

.purple-button {
	background: #7869d1;
	box-shadow: inset 0 -5px 0 0 #444dc7;
}

.purple-button:hover {
	background: #8f81e4;
	box-shadow: inset 0 -5px 0 #786ac7;
}

.purple-button:active {
	background: #6455bb;
	box-shadow: inset 0 5px 0 #4536a0;
}

.grey-button {
	background: var(--grey1);
	box-shadow: inset 0 5px 0 var(--black1);
	cursor: url(../img/interface/cursor-default.png) 4 0, default;
}

.red0-button,
.red1-button {
	background: var(--red1);
}

.red0-button:hover {
	box-shadow: 0 5px 0 var(--red1);
}

.red0-button,
.red0-button:active {
	box-shadow: 0 5px 0 var(--red2);
}

.red0-button:hover,
.red1-button:hover {
	background: var(--red0);
}

.red0-button:active,
.red1-button:active {
	background: var(--red2);
}

.red1-button {
	box-shadow: inset 0 -5px 0 var(--red2);
}

.red1-button:hover {
	box-shadow: inset 0 -5px 0 var(--red1);
}

.red1-button:active {
	box-shadow: inset 0 0px 0 var(--red2);
}

.brown-button {
	background: var(--brown3);
	box-shadow: 0 5px 0 var(--brown4);
}

.brown-button:hover {
	background: var(--brown1);
	box-shadow: 0 5px 0 var(--brown3);
}

.brown-button:active {
	background: var(--brown4);
	box-shadow: 0 5px 0 var(--brown4);
}

.black-button {
	background: var(--black);
	box-shadow: 0 5px 0 var(--black0);
}

.black-button:hover {
	background: var(--black1);
	box-shadow: 0 5px 0 var(--black);
}

.black-button:active {
	background: var(--black0);
	box-shadow: 0 5px 0 var(--black0);
}

.yellow-button {
	background: var(--yellow1);
	box-shadow: inset 0 -5px 0 var(--orange0);
}

.yellow-button:hover {
	background: var(--yellow0);
	box-shadow: inset 0 -5px 0 var(--orange0);
}

.yellow-button:active,
.yellow-button-active,
.yellow-button-active:hover {
	background: var(--orange1);
	box-shadow: inset 0 5px 0 var(--orange2);
}

.orange-button {
	background: var(--orange1);
	box-shadow: inset 0 -5px 0 var(--orange2);
}

.orange-button:hover {
	background: var(--orange0);
	box-shadow: inset 0 -5px 0 var(--orange1);
}

.orange-button:active,
.orange-button-active,
.orange-button-active:hover {
	background: var(--orange2);
	box-shadow: inset 0 5px 0 var(--orange2);
}

.orange-button-active, .orange-button-active:hover, .orange-button-active,
.orange-button-active:hover {
	cursor:url(../img/interface/cursor-default.png) 4 0, default;
}

.back {
	position: absolute;
	bottom: 15px;
	width: 100px;
	left:447px;
	padding-top: 5px;
}

.menu-button,
.submenu-button {

	padding: 7px 30px;
	text-align: center;
	border-radius: 6px;
	margin-bottom: 10px;
	font-size: 15px;
	cursor: url(../img/interface/cursor-pointer.png) 16 0, pointer;
}

.submenu-button:active,
.submenu-button-active,
.submenu-button-active:hover {
	background: var(--beige);
	padding-top: 7px;
	box-shadow: 0 3px 0 var(--beige);
	width: calc(100% - 50px);
	margin-left: -5px;
	border-radius: 0;
	position: relative;
	cursor:url(../img/interface/cursor-default.png) 4 0, default;
}

.submenu-button-active::before,
.submenu-button-active::after {
	width: 0;
	height: 0;
	border-style: solid;
	content: "";
	position: absolute;
	top: -5px;
}

.submenu-button-active::before {
	left: 0px;
	border-width: 23px 0 23px 20px;
	border-color: transparent transparent transparent var(--brown0);
}

.submenu-button-active::after {
	border-width: 23px 20px 23px 0px;
	border-color: transparent var(--brown0) transparent transparent;
	right: 0px;
}

/* -------- Alignment -------- */
.p-relative { position:relative; }
.p-absolute { position:absolute; }
.overflow-scroll { overflow-y: auto; overflow-x: hidden;}
.visibility-hide { visibility: hidden; }
.overflow-hidden { overflow:hidden; }

.m-auto { margin: auto }
.ml-auto { margin-left: auto }
.m0, .m0:active { margin: 0 }
.m5 { margin: 5px; }
.m10 { margin: 10px; }
.m20 { margin: 20px; }

.mlr20 { margin: 0 20px; }

.mr10 { margin-right: 10px; }
.mr20 { margin-right: 20px; }
.mr50 { margin-right: 50px; }

.ml-10 { margin-left: -10px; }
.mt-10 { margin-top: -10px; }

.ml10 { margin-left: 10px; }

.mt0 { margin-top: 0 }
.mt7 { margin-top: 7px; }
.mt10 { margin-top: 10px;}
.mt25 { margin-top: 25px;}
.mt50 { margin-top: 50px; }
.mt80 { margin-top: 80px; }

.mt-6 { margin-top: -6px; }

.mtb10 { margin: 10px 0;}

.mtb13 { margin: 13px 0;}

.mb15 { margin-bottom: 15px }

.p0 { padding: 0px; }
.p2 { padding: 2px; }
.p5 { padding: 5px; }
.p7 { padding: 7px; }
.p10, .button0-active, .button1-active { padding: 10px; }
.p20 { padding: 20px }
.p30 { padding: 30px }

.plr7 { padding: 0 7px; }
.plr10 { padding: 0 10px; }
.plr20 { padding: 0 20px; }

.pb6 { padding: 0 0 6px; }

.border-4 { border-radius: 4px; }
.border-6 { border-radius: 6px; }
.border-10 { border-radius: 10px; }

.w-100 { width: 100%; }
.h-100 { height: 100%; }
.w-auto { width: auto; }
.size-auto, .size-auto:active { width: auto; height: auto }
.box-border { box-sizing: border-box; }

/* -------- Table -------- */

#clan-invite-container .friend-name,
#friends-log-container h2,
#id-name, #link, .team-line span,
#player-info-username,
#member-name, .friend-name,
.personal-rank-box,
.tamodex-pet-name, #shop-craft-name,
.pet-point-allocation-table h4:nth-child(4),
.table-fit-text, .animal-name-subtitle {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.table-title {
	background: var(--brown3);
	padding: 5px;
	border-radius: 4px;
	font-size: 15px;
}

.table-align { padding: 0 6px; }

.table-title-align { padding: 0 15px 0 6px; }

.table-line-default,
.table-line-default:hover,
.table-line-default:active {
	background: var(--brown1);
	border-radius: 5px;
	margin: 5px;
	cursor: url(../img/interface/cursor-default.png) 4 0, default;
}

.table-line {
	background: var(--brown1);
	border-radius: 5px;
	margin: 5px;
	cursor: url(../img/interface/cursor-pointer.png) 16 0, pointer;
}

.table-line:hover { background: var(--brown0); }

.table-line:active,
.table-line-active,
.table-line-active:hover,
.table-line-active:active { background: var(--beige); }

.table-line-active {
	cursor:url(../img/interface/cursor-default.png) 4 0, default;
}

.table-line.bonus {
	background: repeating-linear-gradient(45deg,
		rgb(210 90 73 / 60%) 0%,
		rgb(247 144 52 / 60%) 14.28%,
		rgb(255 211 58 / 60%) 28.56%,
		rgb(168 198 54 / 60%) 42.84%,
		rgb(73 215 221 / 60%) 57.12%,
		rgb(59 121 186 / 60%) 71.4%,
		rgb(165 59 194 / 60%) 85.68%,
		hsl(7deg 60% 55% / 60%) 97%);
	animation: rainbow 3s linear infinite;
	background-size: 200% 100%;
	box-shadow: inset 0 0 0px 4px #3a322b;
	border: 3px solid rgb(165 59 194);
	position: relative;
}

.table-line.bonus::after { display: none }
.table-line.bonus:hover::after {
	content: "Your tool gathers 50% more resources. Creatures have 25% more life, 50% more attack, 25% more XP and give more food and more gold.";
	background: var(--black);
	border-radius: 5px;
	display: block;
	width: 231px;
	position: absolute;
	margin: auto;
	padding: 14px;
	top: 50px;
	left: 0;
	right: 0;
	border: 3px solid var(--brown2);
	z-index: 1;
	animation: tooltip 300ms 1 ease;
}

@keyframes rainbow {
	0% { background-position: 0% 0%; }
	100% { background-position: 200% 100%; }
}

.table-line.bonus .gauge-season { background: rgb(165 59 194); }

.table-bg {
	background: var(--black);
}

.bg-brown0 {
	background: #b36935;
}

.bg-brown1 {
	background: var(--brown1);
}

.bg-brown2 {
	background: var(--brown2);
}

.bg-brown5 {
	background: var(--brown5);
}

.bg-yellow1 {
	background: var(--yellow1);
}

.bg-red1 {
	background: var(--red1);
}

.table-button {
	padding: 7px;
	margin: 0 2px;
}

.table-button-choice {
	padding: 10px 12px;
	cursor: url(../img/interface/cursor-pointer.png) 16 0, pointer;
	height: calc(100% - 20px);
}

.table-button-choice:hover {
	background: var(--green0);
}

.table-button-choice:active,
.table-button-choice-active,
.table-button-choice-active:hover {
	background: var(--green1);
	cursor:url(../img/interface/cursor-default.png) 4 0, default;
}

.table-input {
	font-size: 20px;
	border: none;
	text-align: center;
	height: 100%;
	position: relative;
}

.input-buttons {
	height: 100%;
}

.button-arrow {
	background: var(--black);
	padding: 7px 7px 8px;
	cursor: url(../img/interface/cursor-pointer.png) 16 0, pointer;
}

.button-arrow:hover {
	background: var(--black1);
}

.button-arrow:active {
	background: var(--black0);
}

.table-start {
	border-radius: 5px 0 0 5px;
}

.table-end {
	border-radius: 0 5px 5px 0;
}


.table-19 {
	width: 19px;
}

.table-50 {
	width: 50px;
}

.table-80 {
	width: 80px;
}

.table-150 {
	width: 150px;
}

.table-280 {
	width: 280px;
}

.table-h-30 {
	height: 30px;
}

.table-h-50 {
	height: 50px;
}

.table-h-60 {
	height: 60px;
}

.table-h-70 {
	height: 70px;
}

/* -------- Server Info Box -------- */
#server-info-box {
	display: none;
	z-index: 24;
	width: 830px;
	height: 545px;
	padding: 20px 30px;
	left: calc(50% - 450px);
	top: calc(50% - 296px);
	transform: scale(0);
}

#servers-choice {
	margin: -6px 30px 0px 270px;
	height: 70px;
}

#public-servers { width: 200px; }

#community-servers { width: 200px; position: relative; overflow: hidden }

.planet {
	position: absolute;
     background: url(../img/planet.png) 0 0/100% repeat;
     transform: rotate(65deg);
     width: 70%;
     height: 377%;
     top: -85px;
     left: 32px;
	opacity: 0.5;
}

.background-position-animation {
	animation: background-position 120s infinite;
}

.text-bg-anime {
	position: relative;
	z-index: 1;
}

/* ------------- Server Selection ------------- */
#server-fill-selected {
	width: 40px;
	height: 40px;
	margin: -11px -5px 0 -5px;
}

.table-fill-server {
	width: 40px;
	height: 40px;
	padding: 4px 15px;
	border-radius: 5px 0 0 5px;
	text-align: center;
	font-size: 13px;
	position: relative;
}

.table-fill-server .server-text { position: absolute; opacity: 0 }

.table-fill-server:hover .head { opacity: 0; }

.table-fill-server:hover .server-text { opacity: 1; }

.table-season {
	color: var(--beige);
	height: 48px;
	font-size: 15px;
	user-select: none;
	overflow: hidden;
	width: 170px;
	flex-wrap: wrap;
	padding: 0 10px;
}

.table-boss {
	width: 60px;
	user-select: none;
}

.table-boss .head {

	width: 50px;
	padding-top: 2px;
	padding-bottom: 10px;
	margin-bottom: -15px;
}

.table-region {
	width: 175px;
	text-indent: 6px;
	user-select: none;
}

.table-ping {
	width: 40px;
	user-select: none;
	padding: 10px 10px 5px 10px;
	height: 33px;

}

.table-clan {
	width: 60px;
	user-select: none;
	padding: 4px 5px 11px 5px;
	margin-right: 10px;
	text-align: center;
	height: 33px;

}

.table-clan:hover .table-clan-totems{ opacity: 0; }
.table-clan:hover .table-clan-points { opacity: 1; }

.table-clan-points { position: relative; top: -26px; opacity: 0; font-size: 12px; }

.table-server-select { margin-left: 35px; }

.table-server-selected,
.table-server-selected:hover,
.table-server-selected:active {
	background: var(--black);
	padding: 14px 14px 14px 16px;
	border-radius: 0 5px 5px 0;
	cursor:url(../img/interface/cursor-default.png) 4 0, default;
	box-shadow: none;
	border: none;
	margin: 0 -1px 0 10px;
}

/* ------------- Season Box ------------------ */

.season-icon-bg { height: 70%; }

.gauge-season-bg {
	width: calc(100% + 20px);
	height: 5px;
	background: var(--black0);
	margin: -5px -10px;
}

.gauge-season {
	width: 50%;
	height: 100%;
	background: var(--brown0);
}

.table-title div.table-align:hover {
	background: var(--brown0);
	cursor: url(../img/interface/cursor-pointer.png) 16 0, pointer;
}

.table-title div.table-align:active { background: var(--brown4); }

.table-title div.table-align { text-indent: 4px; height: 24px;}

#table-fill { width: 63px; }
#table-season { width: 179px; }
#table-boss { width: 56px; }
#table-region { width: 170px; }
#table-ping { width: 58px; }
#table-clan { width: 48px; }
#table-selection { width: 117px; }

/* ------------- Server Fill Box ------------- */
.fill-server-bg {
	background: var(--black);
	width: 100%;
	margin: 0 3px;
	padding: 3px 0;
}

.server-fill-box {
	width: 60%;
}

/* ------------- Private Server Interface --------------------*/
#private-server-ingame-box {
	z-index: 24;
	width: 790px;
	height: 545px;
	padding: 20px 20px;
	left: calc(50% - 419px);
	top: calc(50% - 296px);
	transform: scale(1);
}
.private-category-selected {
	left: -55px;
	top: 0px;
	line-height: 14px;
	font-size: 15px;
	width: 172px;
	margin-right: -46px;
	text-align: center;
	position: relative;
	margin-bottom: 7px;
}

.private-category::after,
.private-category::before {
	content: "";
	position: absolute;
	background: var(--brown0);
	height: 6px;
	width: 107%;
	left: -5px;
	top: -12px;
}

.private-category::after {
	top: unset;
	bottom: -7px;
}

.private-container {
	height: 500px;
	width: 100%;
}

#private-player-id {
	height: 42px;
	width: 80px;
	border-radius: 5px 0 0 5px;
}

#private-player-name {
	width: 182px;
}

#private-player-kick, #private-player-ban, #remove-mod {
	margin-top: 0;
}

#remove-mod {
	padding: 0px 3px 4px;
}

#private-mod {
	display:none;
}

#private-sandbox-season {
	display: none;
}

#private-sandbox-resources {
	display: none;
}

#private-sandbox-animals {
	display: none;
}

#private-sandbox-bosses {
	display: none;
}

textarea#private-server-description,
#private-server-picture-box {

	height: 73px;
	max-width: 564px;
	min-width: 564px;
	width: 625px;
	border-radius: 0px 0px 5px 5px;
	padding: 13px;
	text-align: left;
	margin: -10px 0 0 5px;
}

#private-server-picture-box {
	max-width: 100px;
	min-width: 537px;
}

#private-server-picture:hover {
	filter: brightness(1.3);
	cursor: url(../img/interface/cursor-pointer.png) 16 0, pointer;
}

#private-server-picture:active {
	filter: brightness(0.8);
}

#private-tag-other {
	width: 230px;
	background: var(--black0);
}

#table-ps-season {
	text-indent: 52px;
}

#table-ps-time {
	text-indent: 23px;
}


#table-ps-activate {
}

.table-start-season {
	height: calc(100% - 10px);
	padding: 5px 10px;
	border-radius: 5px 0 0 5px;
}
/* ------------- Private Server Interface END  ---------------*/

/* --- Changelog --*/
#changelog-box {
	z-index:22;
	width:710px;
	display: none;
	left: calc(50% - 410px);
	top: calc(50% - 253px);
	transform: scale(0);
}

#game-version {
	background: var(--black);
	padding: 5px 15px;
	line-height: 45px;
	border-radius: 4px;
	margin-right: 10px;
}

#tooltip1:hover > #tooltip2{
	position: relative;
	display: inline-block;
	animation: tooltip 300ms 1 ease;
}

.event-title {
	/*rainbow*/
	animation: background-position 30s infinite linear;

	/*background-image: url(../img/hmp-food.png);
	background-image: url(../img/rainbow-bg.png);*/
	/*background-image: url(../img/hmp-mammoths.png);*/
	/*background-image: url(../img/hmp-space.png);*/
	/*background-image: url(../img/hmp-birthday.png);*/
	/*background-image: url(../img/hmp-halloween.png);*/
	/*background-image: url(../img/hmp-spooky.png);*/
	background-image: url(../img/hmp-christmas.png);
	/*background-image: url(../img/hmp-insect-skins.png);*/
	/*background-image: url(../img/hmp-spring.png);*/

	background-size: contain;
	height: 41px;
	margin-left: -48px;
	width: calc(100% + 97px);
	margin-top: -24px;
	position: relative;
	z-index: 1;
}

.skins-background {
	animation: background-position 75s infinite linear;
	height: 99%;
	margin-top: -5px;
	margin-bottom: -500px;
	transform: rotate(340deg);
	width: 540px;
	margin-left: -120px;
	margin-right: -150px;
	/*background-image: url(../img/interface/easter-bg.png);
	background-image: url(../img/interface/food-bg.png);
	background-image: url(../img/interface/music-bg.png);
	background-image: url(../img/interface/space-bg.png);*/
	/*background-image: url(../img/interface/spooky-bg.png);
	background-image: url(../img/interface/halloween-bg.png);
	background-image: url(../img/interface/ocean-bg.png);
	background-image: url(../img/interface/cave-bg.png);
	background-image: url(../img/interface/school-bg.png);
	background-image: url(../img/interface/christmas-bg.png);
	background-image: url(../img/interface/grimoire-bg.png);*/
	background-image: url(../img/interface/spring-background.png);
	/*background-image: url(../img/interface/insect-bg.png);
	background-image: url(../img/interface/marshmallow-bg.png);
	background-image: url(../img/interface/volcanic-bg.png);
	background-image: url(../img/interface/lapapa-bg.png);
	background-image: url(../img/interface/lunar-bg.png);*/
}

.reward-background {
	background-image: url(../img/background-reward.png);
	margin: 0;
	height: 440px; width: 588px;
	position: relative;
	top: -129px; left: -95px;
	background-color: var(--brown2);
	background-blend-mode: color-dodge;
	opacity: 0.7;
	margin-bottom: -452px;
}

#light-adventure {
	position: relative;
	top: -91px;
	left: 0; bottom: 0; right: 0;
	pointer-events: none;
	margin: auto;
	width: 400px; height: 400px;
	animation: rotate 10s infinite linear;
	margin-bottom: -200px;
}

#reward-adventure {
	border-radius: 9px;
	width: 120px;
	top: 90px; left: 0; right: 0;
	margin: auto;
	position: absolute;
}

#reward-rarity {
	position: absolute;
	background: var(--black);
	padding: 7px;
	border-radius: 7px;
	top: 263px; left: 0; right: 0;
	width: 150px;
	margin: auto;
	color: var(--beige);
}

#reward-card {
	width: 150px; height: 150px;
	position: absolute;
	top: 80px;
	left: 0; right: 0;
	margin: auto;
}

#reward-banner {
	position: absolute;
	top: 173px;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 1;
}

#reward-adventure-type {
	position: absolute;
	left: 0; right: 0;
	margin: auto;
	top: 40px;
	background: var(--black);
	width: 200px;
	border-radius: 5px;
	z-index: 1;
}

#reward-name {
	position: absolute;
	top: 223px;
	z-index: 1;
	left: 0; right: 0;
}

.gapple-background {
	animation: background-position 75s infinite linear;
	background-image: url(../img/interface/gapple-bg.png);
	margin-top: -66px;
	margin-bottom: -500px;
	transform: rotate(340deg);
	width: 690px;
	margin-left: -77px;
	margin-right: -150px;
	background-color: rgb(255 178 0 / 66%);
}

.gapple-background-off {
	animation: background-position 75s infinite linear;
	background-image: url(../img/interface/gapple-bg.png);
	margin-top: -110px;
	margin-bottom: -500px;
	transform: rotate(348deg);
	width: 715px;
	margin-left: -47px;
	margin-right: -43px;
	opacity: 0.7;
}

.vip-background {
	animation: background-position 75s infinite linear;
    background-image: url(../img/bg-vip.png);
    height: 230%;
    margin-top: -47px;
    margin-bottom: -48px;
    transform: rotate(340deg);
    width: 136%;
}

.event-background {
	background: var(--black);
	margin-top: -20px;
	padding: 40px 25px 10px 25px;
	border-radius: 10px;
}

.bag-potions {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	height: 263px;
	margin-bottom: 8px;
}

.background-apples-potions {
	margin-top: -500px;
	height: 468px;
	margin-left: -150px;
	width: 691px;
}

#buy-pets .chest-button h5,
#buy-chest .chest-button h5 {

	position: absolute;
	top: 153px;
	right: -2px;
	background: #cc322e;
	padding: 3px;
	font-size: 16px;
	border: 4px solid #3b332b;
	border-radius: 6px;
	text-shadow: none;
}

#buy-pets #chest4.chest-button h1,
#buy-pets #chest5.chest-button h1 {
	top: 40px;
	left: 18px;
	font-size: 34px;
}

#buy-pets .chest-button h1,
#buy-chest .chest-button h1 {
    position: absolute;
    top: 27px;
    left: 18px;
}

#buy-pets button {
	width: 350px;
	height: 160px;
}

#buy-pets .scrollbar1 button {
	height: 100px;
}

#buy-chest button {
	width: 300px;
	height: 86px;
}

#buy-chest .chest-event.chest-button { top: -30px; height: 140px; }
#buy-chest .chest-event.chest-button h1 { top: 44px; }
#buy-chest .chest-event.chest-button h4 { top: 28px; }
#buy-chest .chest-event.chest-button h4:nth-of-type(2) { top: 71px; }

#buy-pets .chest-button h2,
#buy-chest .chest-button h2 {
	position: absolute;
	bottom: 2px;
	left: 50px;
}

#buy-chest .chest-button h2 { bottom: -8px; left: 43px; }
#buy-chest .chest-event h2 { bottom: -4px; }

#buy-pets #chest4.chest-button h4,
#buy-pets #chest5.chest-button h4 {
	top: 21px;
}

#buy-pets .chest-button h4,
#buy-chest .chest-button h4 {
	position: absolute;
	top: 8px;
	left: 19px;
	font-size: 20px;
}
#buy-chest .chest-button h4 { top: 11px; font-size: 16px; }

#buy-pets .chest-button img { width: 350px; }
#buy-chest .chest-button img { width: 300px; }

#buy-pets img.shop-price,
#buy-chest img.shop-price {

	position: absolute;
	bottom: -5px; left: -5px;
	width: 130px;
}

#buy-chest img.shop-price { bottom: -15px; left: -15px; }
#buy-chest .chest-event img.shop-price { bottom: -12px; }

#buy-chest h2.chests-title {
	width: 102%;
	margin: -5px;
	padding: 5px;
	border-radius: 5px 5px 0 0;
}

#buy-chest .chest-event-time-box,
#buy-chest .chest-event-title-box,
#furniture-shop .chest-event-title-box,
#furniture-shop .chest-event-title-box {
	width: 100%;
	padding: 7px;
	display: block;
	text-align: center;
	top: 0;
	bottom: unset;
}

#buy-chest .chest-event-time-box { bottom: 0; top: unset; }
#buy-chest h5,
#furniture-shop h5 {
	color: var(--beige);
	margin: 0;
	font-size: 18px;
}

.chest-button-title {
	height: 60px;
	border-radius: 5px 5px 0 0;
	margin-bottom: 6px;
}

@keyframes background-position {
	0% { background-position: -1000px; }
	100% { background-position: 1000; }
}

.quick-rotate-animation {
	animation: quick-rotate-animation 600ms linear infinite;
}

@keyframes quick-rotate-animation {
	0%, 100% { transform: rotate(-50deg); }
	50% { transform: rotate(50deg); }
}

.scale-height-animation {
	animation: scale-height-animation 1000ms linear infinite;
}

@keyframes scale-height-animation {
	0%, 100% { transform: scaleY(1); }
	33% { transform: scaleY(1.05); }
	66% { transform: scaleY(0.95); }
}

.quick-appearance-animation {
	animation: quick-appearance-animation 2000ms linear infinite;
}

@keyframes quick-appearance-animation {
	0%, 60%, 100% { transform: scale(0); }
	5% { transform: scale(1.1); }
	10% { transform: scale(1); }
	50% { transform: scale(1.05); }
}

.event-prolog {
	font-size: 20px;
	/* Raindow
	color: #df96f1;
	*/
	/*color: #e07516*/
	color: #85c6db;
	/* Insects color: #b8cc5a;
	color: var(--yellow1);*/
	/* light blue color: #90bdb4*/
	/*Dark color: #834fc3; */
	/* Food color: #b8cc5a;*/
}

.event-epilog {
	text-align: right;
	color: var(--gold0);
}

.changelog-date {
	color: var(--yellow1);
	text-align: right;
	font-size: 18px;
}

.changelog-img {
	height: 60px;
}

.close-content {
	height: 0px;
	overflow: hidden;
	cursor: url(../img/interface/cursor-pointer.png) 16 0, pointer;
}

.drop-down-menu { transform: rotate(-90deg); }

.update-bottom {
	padding-bottom: 20px;
	border-bottom: 10px solid var(--black);
}

.update-content { display: none; }

/* --- Main wrap ---*/

#main-wrap button {
	width: 50px; height: 50px;
	background: var(--black);
	border-radius: 4px;
	border: none;
	position: absolute;
	right: 7px;
	top: -36px;
}

#main-wrap button:hover { filter: brightness(1.2);}
#main-wrap button:active { filter: brightness(0.85);}

#main-wrap button img {
	width: 70px; height: 70px;
	transform: rotate(27deg);
	margin: -14px -9px -9px;
}

button#play-potion2, button#play-potion1, button#play-potion0, button#play-potion-inventory { display: none; }
button#play-potion1 { right: 65px;}
button#play-potion0 { right: 123px; }
button#play-potion-inventory img { transform: rotate(0deg); width: 53px; height: 49px; }

/* ---- How to play ---*/
#how-to-play-box {
	z-index: 24;
	width: 710px;
	left: calc(50% - 410px);
	top: calc(50% - 224px);
	transform: scale(0);
}

#how-to-play-container h1:nth-child(1) {
	text-align: center;
	padding: 10px 0px;
}

#how-to-play-container h1:nth-child(1),
#how-to-play-box figurecaption::after {
	background: var(--black);
	border-radius: 7px;
}

#how-to-play-box article {
	background: var(--brown1);
	border-radius: 12px;
	padding: 1px;
	color: #f0e4d1;
	text-align: center;
	font-size: 19px;
	margin: 15px 0;
}

#how-to-play-box section {
	background: var(--brown2);
	border-radius: 12px;
	padding: 0 20px;
	margin: 15px;
}

#how-to-play-box p { padding: 15px 0; }
#how-to-play-box img { max-width: 100%; }
#how-to-play-box figurecaption { font-size: 19px; width: 100%; display: inherit; color: var(--white); }
#how-to-play-box figurecaption::after { content: ""; display: block; height: 7px; margin-top: 10px;}
#how-to-play-box article div { display: flex; align-items: center; justify-content: center; }
#how-to-play-box article section div p { text-align: left; }
#how-to-play-box article section div img { padding: 10px 0px; }

#how-to-play-box span { color: var(--yellow1); }
#how-to-play-box span.green { color: var(--green1); }
#how-to-play-box span.red { color: var(--red0); }

#how-to-play-resources p, #how-to-play-resources p span { position: relative; }
#how-to-play-resources span:nth-child(1) { font-size: 28px; top: -23px;}
#how-to-play-resources p:nth-of-type(2) { top: -203px; left: -156px; }
#how-to-play-resources p:nth-of-type(2) span { left: 75px; color: var(--red0) }

#how-to-play-resources p:nth-of-type(3) { top: -197px; left: -171px; }
#how-to-play-resources p:nth-of-type(3) span { left: 91px; color: #c68a44; }

#how-to-play-resources p:nth-of-type(4) { top: -262px; left: 89px; }
#how-to-play-resources p:nth-of-type(4) span { left: 80px; color: #ac946c; }

#how-to-play-resources p:nth-of-type(5) { top: -396px; left: 80px; }
#how-to-play-resources p:nth-of-type(5) span { left: 64px; }

#how-to-play-resources p:nth-of-type(6) { margin-top: -260px; }
#how-to-play-resources p:nth-of-type(6) span:nth-child(1) { font-size: 19px; position: static; }

#how-to-play-age img { margin-top: 15px; }

section#how-to-play-pet-levels div { padding: 7px 0; }
section#how-to-play-pet-levels div img { margin: -27px 10px -27px -10px; }
section#how-to-play-pet-levels div p { padding: 5px 0; }

#how-to-play-commands figure, #how-to-play-types div { flex-wrap: wrap; }
#how-to-play-commands figure { display: flex; justify-content: space-evenly; }
#how-to-play-article-inventory figure:nth-of-type(1) img,
#how-to-play-commands figure img { width: 70px; margin: 0 5px; }
#how-to-play-commands figure img:nth-child(1) { margin-left: 100px; }
#how-to-play-commands figure img:nth-child(5) { margin-right: 100px; }

#how-to-play-commands figurecaption:nth-of-type(1) { margin-left: 98px }
#how-to-play-commands figurecaption:nth-of-type(5) { margin-right: 94px }
#how-to-play-commands figurecaption {
	width: 80px;
	display: inline-flex;
	justify-content: center;
}

#how-to-play-commands p span:nth-child(1) { margin: 0 6px 0 10px; }

span#how-to-play-move, span#how-to-play-skill {
	position: relative;
	left: -75px;
	top: -6px;
	font-size: 22px;
	color: var(--black);
	margin-right: -90px;
	font-weight: 600;
}

#how-to-play-commands div:nth-child(3) img,
#how-to-play-commands div:nth-child(4) img { height: 60px; }

#how-to-play-commands div:nth-child(3) { margin-top: 20px; }

#how-to-play-commands div:nth-child(3) img:nth-of-type(3) { width: 81px; }
#how-to-play-commands div:nth-child(3) img:nth-of-type(4) { margin-left: 21px }

#how-to-play-commands div:nth-of-type(2) { margin-top: -33px; }
#how-to-play-commands div:nth-of-type(2) img:nth-of-type(3) { margin-left: 108px; }

span#how-to-play-skill { left: -23px; margin-right: -125px; }

#how-to-play-commands div:nth-of-type(3) { justify-content: space-evenly;}

section#how-to-play-types { margin-top: 40px }
#how-to-play-types img:nth-child(1) { width: 420px; margin-top: -30px; }

#how-to-play-types div img { width: 40px; }
#how-to-play-types div span:nth-of-type(1) { color: var(--orange0); margin-right: 3px; }
#how-to-play-types div span:nth-of-type(2) { color: var(--green1) }
#how-to-play-types div span:nth-of-type(3) { color: #4ab9ba; }

#how-to-play-box div img:nth-child(1) { margin-right: 10px; }
#how-to-play-shop-ingame div:nth-child(2) img { margin-top: -60px; }

#how-to-play-box .how-to-play-shop {
	width: 200px; height: 80px;
	overflow: hidden;
	padding: 0;
	margin-bottom: 11px;
}

.how-to-play-shop h2 {
	position: relative;
	top: -59px;
	font-size: 24px;
}

#how-to-play-tamodex-button img { margin-bottom: 10px; }
#how-to-play-overbreed span { color: #bea1eb; }

#how-to-play-badges div:nth-of-type(1) img, #how-to-play-badges div:nth-of-type(2) img { width: 50px; }
#how-to-play-adventure-description img { margin-top: 10px; }

/* --- Accomplishment --- */

#loyalty-box, #loyalty-bookmark-box, #loyalty-mail-box, #loyalty-notification-box, #loyalty-install-box {
	transform-origin: center;
	z-index: 21;
	padding: 30px 20px 10px;
	transform: scale(0);
}

#loyalty-box {
	width: 680px;
	height: 520px;
	left: calc( 50% - 340px );
	top: calc( 50% - 212px );
}

#loyalty-bookmark-box {
	width: 400px;
	height: 190px;
	left: calc( 50% - 200px );
	top: calc( 50% - 195px );
}

#loyalty-mail-box {
	width: 500px;
	height: 390px;
	left: calc( 50% - 250px );
	top: calc( 50% - 195px );
}

#loyalty-notification-box, #loyalty-install-box {
	width: 560px;
	height: 365px;
	left: calc( 50% - 280px );
	top: calc( 50% - 182px );
}

#loyalty-box, #loyalty-box .accomplishment .validated + div,
#loyalty-screenshot, #loyalty-bookmark-box, #loyalty-mail-box,
h6#loyalty-emails-do-not-match, div#loyalty-another-email { display: none; }

#loyalty-bookmark-box, #loyalty-bookmark-box, #loyalty-notification-box, .logged-gift-button img,
#loyalty-box .accomplishment div:nth-child(2),  #loyalty-box aside h2, div#loyalty-another-email,
#loyalty-bookmark-box img:nth-child(2), #loyalty-box, #loyalty-install-box { position: absolute; }

#loyalty-box .accomplishment div:nth-child(2), #loyalty-box aside, #loyalty-box .accomplishment { display: flex; }

#loyalty-box aside { align-items: center; }

#loyalty-box .accomplishment, #loyalty-box aside div, .logged-gift-button, #loyalty-emails-do-not-match,
#loyalty-box .accomplishment div:nth-child(1), #loyalty-mail-box h5 { position: relative; z-index: 1; }

#loyalty-box .accomplishment div:nth-child(1),
#loyalty-box .accomplishment div.validated {
	background-size: contain;
	background-repeat: no-repeat;
}

#loyalty-box section { max-height: 430px; }
#loyalty-box .accomplishment { height: 85px; }

#loyalty-box aside img, #loyalty-box aside div, .logged-gift-button { margin: 5px }

.logged-gift-button, #loyalty-mail-box button { height: 50px; }
.logged-gift-button { padding-left: 55px; padding-right: 10px; margin-left: 10px; }

.logged-gift-button::after, .logged-gift-button img { top: -10px; }
.logged-gift-button img { left: 0px; }
#pass-exam-button img { width: 55px; top: -4px; }

#loyalty-box .accomplishment div:nth-child(1) {
	background-image: url("../img/interface/achievement-locked.png");
	width: 520px;
}

#loyalty-box .accomplishment div.validated, #loyalty-box aside h3, #loyalty-box aside { width: 100% }

#loyalty-box .accomplishment div.validated { background-image: url("../img/interface/achievement-over.png"); }

#loyalty-box .accomplishment div:nth-child(2) { z-index: 0; right: 0; }

#loyalty-box h5, #loyalty-box h3 { text-indent: 15px; }
#loyalty-box h3, #loyalty-box p { margin-top: 12px; }

#loyalty-box h3 { color: var(--white); }

#loyalty-box aside h3, #loyalty-box aside div, #loyalty-box aside img, #loyalty-notification-box h3,
#loyalty-box aside, #loyalty-box p, #loyalty-mail-box input, #loyalty-install-box h3 { background: var(--black); }

#loyalty-box h5 {
	color: var(--orange0);
	padding-top: 3px;
}

#loyalty-box p {
	width: 90px;
	height: 55px;
}

#loyalty-box button {
	width: 110px;
	height: 77px;
}

#loyalty-box aside, #loyalty-notification-box img, #loyalty-mail-box h6, #loyalty-mail-box h3,
#loyalty-notification-box h3, #loyalty-install-box h3, #loyalty-install-box img  { text-align: center; }

#loyalty-box aside {
	margin-left: -5px;
	background: var(--yellow2);
	padding-right: 10px;
	margin-bottom: -5px;
	border-radius: 0 0 5px 5px;
	overflow: hidden;
}

#loyalty-box aside h3 {
	margin-top: 0;
	padding: 21px;
	width: 250px;
	margin-right: auto;
}

#loyalty-box aside div {
	border-radius: 10px;
	border: 5px solid #ce5a28;
}

#loyalty-box aside div, #loyalty-box aside img,
#loyalty-box aside div img { width: 70px; height: 70px; }

#loyalty-box aside div img, #loyalty-mail-box input { border: none; }
#loyalty-box aside div img { background: none; }

#loyalty-box aside div img { margin: -10px 0 0 0; }

#loyalty-box aside h2 {
	top: 35px;
	left: 8px;
	font-size: 30px;
}

#loyalty-box .exam-access { background: var(--orange0); border-color: var(--orange1) }
#loyalty-box aside .exam-access h2 { font-size: 15px; left: 4px; top: 44px; }
#loyalty-box aside .exam-access img { width: 83px; height: 49px; margin-left: -7px; margin-top: -2px; }
#loyalty-bookmark-box .background-popupbox img:nth-child(1),
#loyalty-notification-box .background-popupbox img, #loyalty-box aside img, #loyalty-install-box .background-popupbox img {
	border-radius: 10px;
	border: 5px solid var(--brown0);
}

#loyalty-bookmark-box .background-popupbox img:nth-child(1),
#loyalty-notification-box .background-popupbox img, #loyalty-install-box .background-popupbox img { border: 5px solid var(--black); }

#loyalty-bookmark-box img:nth-child(2) {
	width: 32px;
	right: 33px;
	top: 123px;
}

#loyalty-mail-box div:nth-of-type(1) p { cursor:url(../img/interface/cursor-not-allowed.png) 16 16, default; }

#loyalty-mail-box button, #loyalty-mail-box input { width: 94%; }

#loyalty-mail-box button { margin: 15px; }

#loyalty-mail-box h5 { margin: 20px 0 -5px 30px; }

#loyalty-mail-box input {
	padding: 15px;
	margin: 0 15px;
	font-size: 16px;
	cursor: url(../img/interface/cursor-text.png) 16 0, text;
}

#loyalty-mail-box h6 {
	color: #ff4f38;
	font-size: 12.5px;
	margin-top: 10px;
	font-size: 15px;
}

h6#loyalty-emails-do-not-match, div#loyalty-another-email {
	margin-left: 280px;
	margin-top: -10px;
	margin-bottom: -6px;
	font-size: 13px;
	animation: chest-item 300ms 1 ease;
}

div#loyalty-another-email { margin: -22px 0 0 272px; font-size: 16px;}

div#loyalty-another-email img {
	position: absolute;
	top: 3px;
	left: -37px;
}

#loyalty-mail-box h3 {
	background: var(--brown1);
	padding: 15px;
	border-radius: 5px;
	margin: 5px;
}

#loyalty-notification-box h3, #loyalty-install-box h3, #loyalty-mail-box input {
	padding: 13px;
	border-radius: 5px;
}

#loyalty-notification-box .background-popupbox img, #loyalty-install-box .background-popupbox img {
	width: 315px;
	margin: 20px auto;
}
/* ---- Settings ---- */
.setting-column-bg {
	justify-content: space-around;
	width: 15px;
	background: var(--red2);
	border-radius: 16px;
	border: 5px solid var(--black);
}

#reset-default-keybind {
	width: 80%;
	padding: 6px 0 0 0;
	height: 34px;
	font-size: 17px;
	margin-top: 10px;
}

/* ---- Cosmetics ---- */
img.lights {
	width: unset;
}

.get-premium-button {
	position:relative;
	background: var(--yellow3);
	padding: 15px;
	width: 180px;
	box-shadow: inset 0 -5px 0 var(--orange1);
}

.get-premium-button:hover {
	background: var(--yellow1);
	box-shadow: inset 0 -5px 0 var(--orange0);
}

.get-premium-button:active {
	margin-top:5px;
	background: var(--orange1);
	box-shadow: none;
}

/* ---- Tamodex ----- */
.unlock-pet-button {
	padding: 5px 0 15px 0;
	width: 230px;
	border-radius: 8px;
	height: 16px;
}

.unlock-pet-button:active {
	margin: 0;
	height: 13px;
	padding-top: 8px;
}

.tamodex-custom-button {
	border-radius: 8px 8px 0 0;
	cursor: url(../img/interface/cursor-pointer.png) 16 0, pointer;
}

.tamodex-custom-button:active, .tamodex-custom-selected, .tamodex-custom-selected:hover, .tamodex-custom-selected:active {
	cursor: url(../img/interface/cursor-default.png) 4 0, default;
	box-shadow: none;
}

.tamodex-custom-button, .tamodex-custom-button:active, .tamodex-custom-selected,
.tamodex-custom-selected:hover, .tamodex-custom-selected:active {
	height: 41px; width:41px;
	padding: 5px;
	background: var(--black);
}

.staging-change-pet {
	bottom: 5px;
	justify-content: center;
	width: 180px;
	position: absolute;
}

.locked-card {
	width: 167px;
	height: 314px;
	background: var(--brown4);
	text-align: center;
	border: 30px solid #613011;
	border-radius: 10px;
	font-size: 20px;
	filter: grayscale(0.6);
}

/* ---- Housing ---- */

#housing {
	display: none;
	width: 100%;
	overflow: hidden;
}

#housing-top {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	gap: 0 10px;
	box-sizing: border-box;
	margin: auto;
	background: url("../img/interface/housing-top-middle.png");
	background-size: 100% 100%;
	padding-top: 30px;
	width: 830px;
	height: 56px;
	z-index: 1;
}

#housing-top:after, #housing-top:before {
	position: absolute;
	top: 0;
	background-size: 100% 100%;
	width: 95px;
	height: 100%;
	content: "";
}

#housing-top:before { left: -95px; background-image: url("../img/interface/housing-top-left.png");}
#housing-top:after { right: -95px; background-image: url("../img/interface/housing-top-right.png"); }

#housing-top .top-button {
	display: flex;
	position: relative;
	box-sizing: content-box;
	background-clip: padding-box; /* Firefox rendering bug workaround */
	padding: 0;
	width: 55px;
	height: 55px;
}

#housing-top button img {
	max-width: 100%;
	max-height: 100%;
}

#housing-top button .tooltip {
	display: none;
	position: absolute;
	bottom: -60px;
	z-index: 1;
	width: max-content;
	pointer-events: none;
	color: var(--white);
	font-size: 16px;
	white-space: nowrap;
}

#housing-top button:hover .tooltip {
	display: inline-block;
	animation: tooltip 300ms 1 ease;
}

#housing-title {
	position: relative;
	background-image: url("../img/interface/housing-title.png");
	background-size: 100% 100%;
	width: 300px;
	height: 75px;
}

#housing-title-input {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	cursor: url("../img/interface/cursor-text.png") 16 0, text;
	margin: 0 13px;
	border: none;
	border-radius: 0 0 32px 32px;
	background: none;
	height: 50px;
	color: var(--white);
	font-size: 20px;
	line-height: 51px;
	text-align: center;
}

#housing-title-input[disabled] {
	cursor: inherit;
}

#housing-title-input:focus {
	color: var(--beige);
}

#housing-title button {
	position: relative;
	border: none;
	background: none;
	width: 42px;
	height: 42px;
}

button#housing-title-heart {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}

button#housing-title-heart .tooltip::after { content: "Like"; }
button#housing-title-heart:has(img#housing-title-unlike[style*="display: flex"]) .tooltip::after {
  content: "Unlike";
}

button#housing-title-edit {
	position: absolute;
	top: 0;
	right: 0;
	opacity: 0;
}

.heart-count {
	font-size: 15px;
	position: absolute;
	left: 24px;
	transform: rotate(-39deg);
	top: 22px;
}

button#housing-title-lock {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	background: url("../img/interface/construction-unlocked.png") center / 100%;
	display: none;
}

button#housing-title-lock.lock {
	background-image: url("../img/interface/construction-locked.png");
}

#housing-title:hover #housing-title-edit,
button#housing-title-edit:focus,
#housing-title:hover #housing-title-heart,
button#housing-title-locks:focus,
#housing-title:hover #housing-title-lock,
button#housing-title-lock:focus {
	opacity: 1;
}

#housing-title-unlike {

	display: none;
}

#housing-editing {
	position: absolute;
	right: 0;
	bottom: -50px;
	left: 0;
	gap: 10px;
	animation: tooltip 300ms 1 ease;
	margin: auto;
	width: 150px;
}

@media (max-width: 830px) {
	#housing-top {
		width: 510px;
	}

	#housing-title {
		display: none;
	}
}

/* ---- Housing Homepage ---- */
#housing-button { width: auto; position: relative; }

#housing-button img {
	width: 46px;
	margin: -5px 0 0 0;
}

#housing-button.alert::after { right: -4px; top: -12px; display: block; }

#housing-button::after { display: none; }

#housing-button.after::after {

	z-index: 1;
	content: "";
	position: absolute;
	width: 30px;
	height: 30px;
	top: -15px;
	right: -10px;
	border-radius: 35px;
	animation: scale 1000ms linear infinite;
	display: block;
	background: center / 90% no-repeat;
}

#housing-button.bones::after { background-image: url(../img/interface/mini-housing-status-bone0.png); }
#housing-button.cowid::after { background-image: url(../img/interface/mini-housing-status-cowid0.png); }
#housing-button.depression::after { background-image: url(../img/interface/mini-housing-status-depression0.png); }
#housing-button.hunger::after { background-image: url(../img/interface/mini-housing-status-hunger0.png); }
#housing-button.poison::after { background-image: url(../img/interface/mini-housing-status-poison0.png); }
#housing-button.poop::after { background-image: url(../img/interface/mini-housing-status-poop0.png); }
#housing-button.dirt::after { background-image: url(../img/interface/mini-housing-status-dirt0.png); }
#housing-button.tame::after { background-image: url(../img/interface/mini-housing-status-tame0.png); }

/* ---- Shop in housing ---- */
#shop-housing-box {
	display: none;
	z-index: 24;
	width: 770px;
	height: 545px;
	padding: 20px 30px;
	left: calc(50% - 419px);
	top: calc(50% - 296px);
	transform: scale(0);
}

.shop-title {
	position: absolute;
	top: -20px;
	right: 0;
	left: 52%;
	translate: -50%;
	margin: 0 auto;
	background-image: url(../img/interface/shop-title.png);
	background-size: 90% 100%;
	width: 900px;
	background-repeat: no-repeat;
	height: 100px;
	line-height: 90px;
	text-align: center;
	text-indent: -45px;
}

#shop-housing-inventory {
	height: 450px;
	overflow-y: auto;
	display: flex;
	align-content: flex-start;
}

#shop-housing-inventory div {
	margin: 5px;
	position: relative;
	height: fit-content;
}

#shop-housing-inventory div:hover {
	scale: 1.1;
	transition: scale 200ms;
	filter: brightness(1.05);
}

#shop-housing-inventory div.selected { pointer-events: none; }

#shop-housing-inventory div.selected:hover {
	scale: 1;
	opacity: 1;
}

#shop-housing-inventory button {

	position: absolute;
	z-index: 1;
	margin: auto;
	inset: -27px 0 0 9px;
	width: 65px;
	height: 65px;
	display: none;
	color: var(--white);
}

#shop-housing-inventory div.selected button {
	display: block;
	pointer-events: all;
}

#shop-housing-inventory p {
	position: absolute;
	left: 27px;
	font-size: 21px;
	bottom: 4px;
	width: 77px;
	text-align: center;
}

/* ---- Housing Furniture Event ---- */

.popup-nav-button.event {

	width: 200px;
	animation: background-position 75s infinite linear;
	background-image: url(../img/interface/pattern-easter-crate.png);
	box-shadow: inset 0 0 13px 0px #884115;
	background-color: #e2a116;
}

.popup-nav-button.event:hover { background-color: #e6b40a; }

#housing-shop.event::after {
	content: "";
	position: absolute;
	display: block;
	width: 32px;
	top: -10px;
	right: -10px;
	height: 40px;
	background: url(../img/interface/lock-easter.png) no-repeat;
	background-size: 100%;
	animation: crazy infinite linear 500ms;
}

/* ---- housing-pets pet in housing ---- */

#housing-pets {
	display: none;
	width: 442px;
	height: 430px;
	transform: scale(0);
	left: calc(50% - 221px);
	top: calc(50% - 215px);
}

#housing-pets-container {
	gap: 5px;
	height: 360px;
}

.housing-pets-pet { flex-shrink: 0; }

.housing-pets-pet div { transition: 200ms width; }

.housing-pets-pet-left {
	margin: -10px 5px 0 0;
	width: 69px;
}

.housing-pets-pet-right { width: 340px; }

.housing-pets-name, .housing-pets-level {
	position: absolute;
	top: 0;
	line-height: 40px;
}

.housing-pets-name { left: 10px; }
.housing-pets-level { right: 10px; }

.housing-pets-sizing-330x40 {
	background-size: 330px 40px;
	width: 330px;
	height: 40px;
}

.housing-pets-sizing-330x10 {
	background-size: 330px 10px;
	width: 330px;
	height: 10px;
}

.housing-pets-strip {
	margin-top: 5px;
	background-size: 130px 15px;
	padding-left: 20px;
	width: 130px;
	height: 15px;
}

.housing-pets-strip-value {
	background-size: 110px 15px;
	width: 110px;
	height: 15px;
}

.housing-pets-health { background-image: url("../img/interface/overview-health.png"); }
.housing-pets-health-value { background-image: url("../img/interface/overview-health-value.png"); }

.housing-pets-experience-value {
	bottom: -5px;
	left: -5px;
	background-color: #7768b0;
	border: 5px solid var(--black);
	border-radius: 0 8px 0px 0;
}

.housing-pets-hunger { background-image: url("../img/interface/overview-hunger.png"); }
.housing-pets-mood { background-image: url("../img/interface/overview-mood.png"); }
.housing-pets-hunger-value { background-image: url("../img/interface/overview-hunger-value.png"); }
.housing-pets-mood-value { background-image: url("../img/interface/overview-mood-value.png"); }

.housing-pets-hunger-value::after {
	content: "";
	position: absolute;
	inset: 0;
	display: block;
	background-position: 20px;
	width: 130px;
	background-size: 110px 15px;
	height: 15px;
	background-image: url(../img/interface/overview-hunger-gauge-above.png);
	background-repeat: no-repeat;
}

.housing-pets-hunger-value[style*="width: 0%"]::after { display: none; }

.housing-pets-effects {
	gap: 5px;
	margin: 5px 0 0 5px;
}

#housing-pets-add-pet {
	margin-top: auto;
 	height: 45px;
}

.housing-pets-remove-pet {
	top: 0;
	left: -5px;
	opacity: 0;
	transition: transform 100ms, opacity 100ms;
	border: none;
	background: none;
	z-index: 1;
}

.housing-pets-pet:hover .housing-pets-remove-pet,
.housing-pets-remove-pet:focus {
	opacity: 1;
}

.housing-pets-remove-pet:hover { transform: scale(1.2); }

/* ---- Helper in housing ---- */

.button-help {
	position: absolute;
	top: -6px;
	right: 61px;
	z-index: 3;
	cursor: url(../img/interface/cursor-default.png) 4 0, default;
	box-sizing: content-box;
	border: 6px solid #3a322b;
	border-radius: 0 0 10px 10px;
	background-size: 100%;
	background-color: #ddab52;
	width: 46px;
	height: 46px;
	text-align: center;
}

.button-help:hover {
	background-color: #f7c263;
}

.button-help:active {
	background-color: #d8a03b;
}

.button-help .tooltip {
	display: none;
	position: absolute;
	top: 10px;
	right: 61px;
	animation: tooltip 300ms 1 ease;
	width: 300px;
	pointer-events: none;
	font-size: 16px;
}

.button-help:hover .tooltip, .button-help:focus .tooltip {
	display: inline-block;
}

/* ---- Tooltip in housing ---- */

.popup-nav-button .tooltip {
	display: none;
	position: absolute;
	top: 60px;
	animation: chest-item 200ms 1 ease;
	background: var(--brown3);
}

.popup-nav-button:hover .tooltip {
	display: block;
}

#furniture-shop .popup-nav {
	margin-left: 120px;
}

.furniture-apple-counter {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 10px 0 -20px auto;
	background-color: var(--black);
	width: 150px;
	height: 30px;
}

#storage-tooltip-container {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	pointer-events: none;
	display: none;
}

#storage-tooltip {
	animation: chest-item 200ms 1 ease;
	border-radius: 10px;
	background-color: var(--black);
	padding: 10px;
	max-width: 500px;
	border: 3px solid var(--brown0);
}

.storage-tooltip-top {
	display: flex;
	align-items: center;
	gap: 5px;
}

#storage-tooltip-name {
	color: var(--white);
	font-size: 24px;
}

#storage-tooltip-type {
	color: #f4c47a;
	font-size: 18px;
}

#storage-tooltip-middle {
	color: #cdb09b;
	font-weight: 300;
}

#storage-tooltip-bottom {
	gap: 5px;
	color: #f4c47a;
	font-size: 18px;
}

.storage-tooltip-tag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	border-radius: 10px;
	background-color: var(--black0);
	padding: 5px 10px 5px 5px;
}

.storage-tooltip-tag-icon { width: 32px; }

/* ---- Category in housing ---- */

.popup-category {
	display: flex;
	z-index: 3;
	flex-wrap: wrap;
	align-content: space-between;
	margin-left: 10px;
	width: 200px;
}

.popup-category-button {
	position: relative;
	border: none;
	background: none;
	width: 50px;
	height: 50px;
	font-size: inherit;
}

.popup-category-button .category-background {
	display: flex;
	justify-content: center;
	align-items: center;
	transform: scale(0.8);
	transition: background-color 100ms, transform 100ms;
	border-radius: 10px;
	background: var(--brown3);
	width: 100%;
	height: 100%;
}

.popup-category-button:hover .category-background {
	transform: scale(1);
	background-color: var(--brown2);
}

.popup-category-button-selected .category-background {
	transform: scale(1);
	background-color: #db965e;
	border-radius: 5px;
}

.popup-category-button .tooltip {
	display: none;
	position: absolute;
	bottom: 50px;
	z-index: 1;
	animation: chest-item 200ms 1 ease;
	background: var(--brown3);
	width: max-content;
	pointer-events: none;
}

.popup-category-button:hover .tooltip {
	display: block;
}

/* ---- Inventory in housing ---- */

#storage-inventory p {

	right: 0px;
	font-size: 16px;
}

#storage {
	left: calc(50% - 156px);
	top: calc(50% - 200px);
	width: 301px;
	height: 400px;
	transform: scale(0);
	z-index: 2;
}

#storage-inventory {
	flex-grow: 1;
	margin: 60px 20px 20px 20px;
	height: 310px;
	max-width: 248px;
	align-content: flex-start;
}

#storage-category {

	margin-top: 60px;
	margin-left: -10px;
}

#storage-inventory div {
	width: 50px;
	height: 61px;
	background-size: 100%;
	border-radius: 5px;
	outline: 2px solid var(--brown0);
	box-shadow: inset -2px -1px 0 0 var(--brown0);
}

#storage-inventory div:hover, #storage-inventory div.clickable.selected {
	border-radius: 7px;
	outline: 2px solid var(--beige);
	box-shadow: inset -2px 1px 0 0 var(--beige);
}

#storage-inventory div.empty, #storage-inventory div.empty:hover {
	box-shadow: inset -2px -1px 0 0 var(--brown0), inset 2px -1px 0 0 var(--brown0);
	outline: 2px solid var(--brown0);
	cursor: unset;
}

.button-drag {
	top: -6px;
	left: -6px;
	z-index: 3;
	cursor: url("../img/interface/cursor-grab.png") 16 0, grab;
	box-sizing: content-box;
	border: 6px solid var(--black);
	border-radius: 10px 0 10px 0;
	background-size: 100%;
	background-color: var(--gold0);
	width: 46px;
	height: 46px;
	text-align: center;
}

.button-drag:hover { background-color: #f7c263; }

.button-drag:active {
	cursor: url("../img/interface/cursor-grabbing.png") 16 0, grab;
	background-color: #d8a03b;
}

.housing-top #quit-storage {
	cursor: url("../img/interface/cursor-pointer.png") 16 0, pointer;
	border: solid 5px var(--black);
	border-radius: 100%;
	background: none;
}

.storage-title {
	top: -20px;
	right: 0;
	left: 0;
	margin: 0 auto;
	background-image: url("../img/interface/storage-title.png");
	background-size: 100% 100%;
	width: 180px;
	height: 70px;
	line-height: 70px;
	text-align: center;
}
/* ---- Housing Mobile ---- */
#housing-mobile-bottom {
	position: absolute;
	right: 0;
	bottom: 10px;
	left: 0;
	margin: auto;
	justify-content: space-between;
	display: none;
}

#housing-mobile-bottom div {
	z-index: 1;
	position: absolute;
	bottom: 0;
	height: 76px;
	background-size: 100%;
	background-repeat: no-repeat;
}

#housing-mobile-chat {
	left: 0;
	background-image: url(../img/interface/mobile-housing-chat-on.png);
	width: 104px;
}

#housing-mobile-chat:hover { background-image: url(../img/interface/mobile-housing-chat-on-hover.png); }
#housing-mobile-chat:active { background-image: url(../img/interface/mobile-housing-chat-on-active.png); }

#housing-mobile-teleport {
	width: 84px;
	right: 0;
	background-image: url(../img/interface/mobile-housing-teleportation-on.png);
}

#housing-mobile-teleport:hover { background-image: url(../img/interface/mobile-housing-teleportation-on-hover.png); }
#housing-mobile-teleport:active { background-image: url(../img/interface/mobile-housing-teleportation-on-active.png); }

#housing-mobile-teleport.off { background-image: url(../img/interface/mobile-housing-teleportation-off.png); }
#housing-mobile-teleport.off:hover { background-image: url(../img/interface/mobile-housing-teleportation-off-hover.png); }
#housing-mobile-teleport.off:active { background-image: url(../img/interface/mobile-housing-teleportation-off-active.png); }

/* ---- Housing Status ---- */

#housing-status-bottom {
	position: absolute;
	right: 0;
	bottom: 10px;
	left: 0;
	gap: 10px;
	margin: auto;
	width: fit-content;
	z-index: 1;
	display: none;
}

.housing-status {
	position: relative;
	text-align: center;
	display: none;
}

.housing-status-image {
	animation: twitch 5s linear infinite;
}

.housing-status:nth-child(1) .housing-status-image { animation-delay: -5s }
.housing-status:nth-child(2) .housing-status-image { animation-delay: -4s }
.housing-status:nth-child(3) .housing-status-image { animation-delay: -3s }
.housing-status:nth-child(4) .housing-status-image { animation-delay: -2s }
.housing-status:nth-child(5) .housing-status-image { animation-delay: -1s }

@keyframes twitch {
	0%, 18%, 20%, 48%, 50%, 68%, 70%, 98%, 100% { transform: rotate(0) }
	19% { transform: rotate(-5deg) }
	49% { transform: rotate(-15deg) }
	69% { transform: rotate(5deg) }
	99% { transform: rotate(15deg) }
}

.housing-status .tooltip {
	display: none;
	position: absolute;
	bottom: 70px;
	transform-origin: bottom;
	animation: tooltip 300ms 1 ease;
	width: 300px;
	pointer-events: none;
}

.housing-status:hover .tooltip,
.housing-status:focus .tooltip {
	display: block;
}

.housing-solution {
	transform: rotate(-2deg);
	margin: 10px -25px 0 -25px;
	border: 6px solid var(--black);
	border-radius: 6px;
	background-color: #793c1f;
	padding: 10px;
}

.housing-solution-inner {
	transform: rotate(2deg);
}

.housing-solution-inner p {
	color: rgb(255, 172, 65);
}

.housing-status-counter {
	position: absolute;
	top: -22px;
	font-size: 22px;
}
/* ---- Inspect in Housing ---- */

#inspect {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	display: none;
}

#inspect-background {
	position: absolute;
	animation: fade-in 0.5s cubic-bezier(0.25, 0, 0, 1) 1 forwards;
	background-color: rgba(58, 50, 43, 0.5);
	width: 100%;
	height: 100%;
}

#inspect-image {
	bottom: 150px;
	max-height: calc(100% - 170px);
	max-width: 40vw;
}

@keyframes fade-in {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes fade-out {
	0% { opacity: 1; }
	100% { opacity: 0; }
}

#inspect-container {
	z-index: 0;
	animation: inspect-container-in 0.5s cubic-bezier(0.25, 0, 0, 1) 1 forwards;
}

@keyframes inspect-container-in {
	0% {transform: scale(0.5); opacity: 0 }
	100% {transform: scale(1); opacity: 1 }
}

@keyframes inspect-container-out {
	0% {transform: scale(1); opacity: 1 }
	100% {transform: scale(0.5); opacity: 0 }

}

.black-bar {
	position: absolute;
	background-color: var(--black);
	width: 100%;
	min-height: 150px;
}

#black-bar-top {
	top: 0;
	animation: slide-from-top 0.5s cubic-bezier(0.25, 0, 0, 1) 1 forwards;
}

#black-bar-bottom {
	display: flex;
	bottom: 0;
	flex-direction: column;
	align-items: center;
	animation: slide-from-bottom 0.5s cubic-bezier(0.25, 0, 0, 1) 1 forwards;
	border-top: 20px solid transparent;
	background-clip: padding-box;
	text-align: center;
}

@keyframes slide-from-top {
	0% { transform: translateY(-100%) }
	100% { transform: translateY(0) }
}

@keyframes slide-to-top {
	0% { transform: translateY(0) }
	100% { transform: translateY(-100%) }
}

@keyframes slide-from-bottom {
	0% { transform: translateY(100%) }
	100% { transform: translateY(0) }
}

@keyframes slide-to-bottom {
	0% { transform: translateY(0) }
	100% { transform: translateY(100%) }
}

#inspect-name {
	margin-top: -18px;
	color: var(--beige);
	font-size: 24px;
}

#inspect-description {
	max-width: 500px;
}

#inspect-back {
	margin: auto 0 30px 0;
	background-clip: padding-box; /* Firefox rendering bug workaround */
	width: 100%;
	max-width: 300px;
	font-size: 24px;
}

#inspect.hide {
	pointer-events: none;
}

#inspect.hide #inspect-background {
	animation: fade-out 0.5s cubic-bezier(0.25, 0, 0, 1) 1 forwards;
}

#inspect.hide #inspect-container {
	animation: inspect-container-out 0.5s cubic-bezier(0.25, 0, 0, 1) 1 forwards;
}

#inspect.hide #black-bar-top {
	animation: slide-to-top 0.5s cubic-bezier(0.25, 0, 0, 1) 1 forwards;
}

#inspect.hide #black-bar-bottom {
	animation: slide-to-bottom 0.5s cubic-bezier(0.25, 0, 0, 1) 1 forwards;
}

/* ---- Crafting in housing ---- */

#crafting {
	display: none;
	width: 811px;
	height: 490px;
	transform: scale(0);
	left: calc(50% - 405px);
	top: calc(50% - 245px);
}

#crafting-container {
	gap: 10px;
	padding-top: 49px;
}

/* ---- Dead code ---- */
#storage-drag-offset {
	position: absolute;
	top: 0;
	left: 0;
}
/* -------- */

#crafting-inventory-container {
	align-content: flex-start;
	width: 400px;
	height: 430px;
}

#crafting-button-container {
	width: 320px;
	height: 440px;
}

#crafting-craft {
	background-clip: padding-box; /* Firefox rendering bug workaround */
	width: 150px;
	height: 80px;
	color: var(--white);
	font-size: 25px;
}

.crafting-ingredient-container {
	border-radius: 5px;
	background-color: var(--black0);
	width: 70px;
	height: 70px;
}

.crafting-ingredient-container.grayscale {
	outline: 2px solid var(--red1);
}

.crafting-ingredient-quantity {
	right: 0px;
	bottom: -10px;
	font-size: 25px;
}

#crafting-title {
	z-index: 0;
	padding: 5px 0 15px;
	width: 300px;
	height: 65px;
}

#crafting-preview {
	margin-top: -25px;
	width: 250px;
	height: 150px;
}

#crafting-preview img {
	width: 200px;
	height: 100px;
	object-fit: contain;
}

#crafting-description, #crafting-ingredients { margin-bottom: 10px; }

#crafting-description { height: 40px; }

#crafting-tooltip {
	display: none;
	top: -50px;
	right: 0;
	animation: tooltip 300ms 1 ease;
	width: 265px;
}

#crafting-difficulty:hover .tooltip { display: block; }

/* ---- Jukebox in housing ---- */

#jukebox-container { margin-top: 50px; }

#jukebox-previous, #jukebox-next {
	z-index: 0;
	transition: 100ms;
	border: none;
	background: none;
	background-size: 100% 100%;
	width: 50px;
	height: 50px;
}

#jukebox-previous:hover, #jukebox-next:hover {
	transform: scale(1.1);
	filter: brightness(115%);
}

#jukebox-previous:active, #jukebox-next:active {
	transform: scale(0.9);
	filter: sepia(0.4);
}

#jukebox-previous {
	background-image: url("../img/interface/left-button.png");
}

#jukebox-next {
	background-image: url("../img/interface/right-button.png");
}

#jukebox-current {
	margin: 0 -25px;
	border: 6px solid var(--black);
	border-radius: 10px;
	background-image: url("../img/interface/jukebox-button-homepage.png");
	background-size: 100% 100%;
	width: 200px;
	height: 75px;
	font-size: 24px;
}

/* ---- Unblocker ---- */

#unblock-container {
	gap: 10px;
	height: 400px;
}

#unblock-sidebar-container {
	width: 200px;
	overflow-y: auto;
}

.unblock-sidebar-button {
	display: flex;
	align-items: center;
	margin-bottom: 5px;
	border: none;
	border-radius: 5px;
	background: var(--brown5);
	width: 100%;
	height: 42px;
	color: inherit;
	text-align: left;
	text-shadow: inherit;
}

.unblock-sidebar-button:hover {
	background: var(--brown0);
}

.unblock-sidebar-button:active,
.unblock-sidebar-button-selected,
.unblock-sidebar-button-selected:hover {
	background: var(--brown4);
}

.unblock-sidebar-button img {
	margin: 0 5px;
}

#unblock-content-container {
	gap: 10px;
	width: 500px;
}

#unblock-content {
	flex-grow: 1;
	overflow-y: scroll;
}

#unblock-content h3 {
	margin: 5px;
}

#unblock-content p {
	margin: 5px;
}

#unblock-content ol {
	margin-left: 25px;
}

#unblock-content li + li {
	margin-top: 10px;
}

.unblock-bottom {
	gap: 5px;
}

.unblock-bottom button,
.unblock-bottom a {
	flex: 1;
	font-size: 16px;
}

.unblock-sidebar-heading {
	margin: 10px 0 5px 5px;
	color: var(--beige);
}

.unblock-sidebar-heading:first-of-type {
	margin-top: 0;
}

.unblock-video {
	float: right;
	box-sizing: border-box;
	margin-left: 5px;
	border: 6px solid var(--black);
	border-radius: 10px;
	max-width: 275px;
}

/* ---- Furniture shop ---- */

#furniture-shop {
	display: none;
	width: 690px;
	height: 520px;
	left: calc(50% - 320px);
	right: calc(50% - 260px);
	transform: scale(0);
}

#housing-shop-crates-container { width: 610px; }

.furniture-container {
	display: none;
	gap: 15px;
	padding: 15px;
	width: 450px;
	height: 420px;
}

.furniture-offer {
	flex-shrink: 0;
	z-index: 0;
	border: none;
	background: none;
	padding: 10px 15px;
	width: 100%; /*450*/
	height: 120px;
	text-align: left;
}

.furniture-background {
	top: 0;
	left: 0;
	z-index: -1;
	border: 5px solid var(--black);
	border-radius: 10px;
	background: url("../img/interface/furniture-offer.png") center / 100% 100% no-repeat;
}

.furniture-image-container::before,
.furniture-image-container::after,
.furniture-image-container::before,
.furniture-image-container::after {
	content: "";
	width: 140px;
	height: 160px;
	top: -10px;
	position: absolute;
	z-index: -1;
}

.furniture-image-container::after,
.furniture-image-container::after {
	background: #8a522c;
	right: -20px;
}

.furniture-image-container::before {
	right: 0px;
	top: 0px;
	background: #ab6b36;
}

.furniture-offer:hover .furniture-image-container::before { background: #c88b46; }
.furniture-offer:hover .furniture-image-container::after { background: #a2632c; }

.offer-uncraftable .furniture-image-container::before,
.offer-uncraftable .furniture-image-container::after { background-color: #816f47; }

.offer-uncraftable:hover .furniture-image-container::before,
.offer-uncraftable:hover .furniture-image-container::after { background-color: #a48b50; }

.offer-uncraftable .tag-warning .shop-resource::after {
	content: "The price increases with each purchase.";
	position: absolute;
	background: var(--red1);
	border: 5px solid var(--black);
	padding: 10px;
	width: max-content;
	line-height: 14px;
	font-size: 14px;
	left: -12px;
	top: -50px;
	border-radius: 10px;
	scale: 0.5;
	transition: 150ms scale cubic-bezier(0, 0, 0, 1);
	visibility: hidden;
}

.offer-uncraftable .shop-resource:hover::after {
	visibility: visible;
	display: block;
	scale: 1;
}

.furniture-image-container {
	top: 0; right: 50px; bottom: 0;
	transform: translateX(50%) rotate(22.5deg);
	transition: transform 500ms cubic-bezier(0.25, 0, 0, 1);
	margin: auto 0;
	width: 120px; height: 120px;
}

.offer-blueprint .furniture-image-container::before,
.offer-blueprint .furniture-image-blueprint::after,
.offer-blueprint:hover .furniture-image-blueprint::before,
.offer-blueprint:hover .furniture-image-blueprint::after,
.offer-blueprint:hover .furniture-image-bonus::after,
.offer-blueprint:hover .furniture-image-bonus::before { background-color: unset; }

.furniture-image-container.furniture-image-blueprint {
	background: url("../img/interface/furniture-blueprint.png") center / 100% 100% no-repeat;
	padding: 10px;
	width: 80px; height: 80px;
	z-index: 1;
}

.furniture-image-container.furniture-image-bonus {
	right: 150px;
	transform: translateX(50%) rotate(-22.5deg);
	width: 80px; height: 80px;
}

.furniture-image-bonus::after,
.offer-blueprint:hover .furniture-image-bonus::after {
	background-color: #2267a6;
	border-radius: 10px;
	top: -10px;
	right: -10px;
	height: 100px;
	width: 100px;
}

.furniture-plus {
	top: 0; right: 80px; bottom: 0;
	margin: auto 0;
}

.furniture-image { max-width: 100%; max-height: 100%; }

.furniture-offer:hover .furniture-background {
	background-image: url("../img/interface/furniture-offer-hover.png");
}

.furniture-offer:active .furniture-background {
	background-image: url("../img/interface/furniture-offer-active.png");
}

.furniture-offer.offer-blueprint .furniture-background {
	background-image: url("../img/interface/furniture-offer-blueprint.png");
}

.furniture-offer.offer-blueprint:hover .furniture-background {
	background-image: url("../img/interface/furniture-offer-blueprint-hover.png");
}

.furniture-offer.offer-blueprint:active .furniture-background {
	background-image: url("../img/interface/furniture-offer-blueprint-active.png");
}

.furniture-offer.offer-uncraftable .furniture-background {
	background-image: url("../img/interface/furniture-offer-uncraftable.png");
}

.furniture-offer.offer-uncraftable:hover .furniture-background {
	background-image: url("../img/interface/furniture-offer-uncraftable-hover.png");
}

.furniture-offer.offer-uncraftable:active .furniture-background {
	background-image: url("../img/interface/furniture-offer-uncraftable-active.png");
}

.furniture-name { font-size: 24px; }

.furniture-description { width: 300px; }

.furniture-offer:hover .furniture-image-container {
	transform: translateX(50%) rotate(11.25deg) scale(1.1);
}

.furniture-offer:hover .furniture-image-bonus {
	transform: translateX(50%) rotate(-11.25deg) scale(1.1);
}

.shop-tag {
	bottom: -5px;
	left: 7px;
	gap: 10px;
	z-index: 0;
	background: url("../img/interface/shop-tag-price-middle.png") center / 100% 100% no-repeat;
	height: 40px; line-height: 40px;
	font-size: 20px;
}

.shop-tag::after,
.shop-tag::before {
	position: absolute;
	top: 0;
	z-index: -1;
	height: 40px;
	background-size: 100% 100%;
	content: "";
}

.shop-tag:after {
	right: -20px;
	background-image: url("../img/interface/shop-tag-price-right.png");
	width: 20px;
}

.shop-tag:before {
	left: -12px;
	background-image: url("../img/interface/shop-tag-price-left.png");
	width: 12px;
}

.shop-tag.tag-warning {
	background-image: url("../img/interface/shop-tag-warning-middle.png");
}

.shop-tag.tag-warning:after {
	background-image: url("../img/interface/shop-tag-warning-right.png");
	right: -60px;
	width: 60px;
}

.shop-tag.tag-warning:before {
	background-image: url("../img/interface/shop-tag-warning-left.png");
}

.shop-tag:is(.tag-uncraftable, .tag-blueprint) { right: 7px; left: auto; }
.shop-tag:is(.tag-uncraftable, .tag-blueprint)::after  { right: -12px; width: 12px; }
.shop-tag:is(.tag-uncraftable, .tag-blueprint)::before { left:  -20px; width: 20px; }

.shop-tag.tag-uncraftable { background-image: url("../img/interface/shop-tag-uncraftable-middle.png"); }
.shop-tag.tag-uncraftable::after { background-image: url("../img/interface/shop-tag-uncraftable-right.png"); }
.shop-tag.tag-uncraftable::before { background-image: url("../img/interface/shop-tag-uncraftable-left.png"); }

.shop-tag.tag-blueprint { background-image: url("../img/interface/shop-tag-blueprint-middle.png"); }
.shop-tag.tag-blueprint::after { background-image: url("../img/interface/shop-tag-blueprint-right.png"); }
.shop-tag.tag-blueprint::before  { background-image: url("../img/interface/shop-tag-blueprint-left.png"); }

.shop-resource {
	display: inline-flex;
	align-items: center;
}

.shop-resource img { margin-right: 5px; }

.popup-nav { gap: 10px; }

.popup-nav-button {
	transform: scale(0.8);
	z-index: 1;
	transition: background-color 100ms, transform 100ms;
	box-sizing: content-box;
	margin-bottom: 10px;
	border: none;
	border-radius: 10px;
	background: var(--brown3);
	width: 80px; height: 50px;
	font-size: inherit;
}

.popup-nav-button:hover {
	transform: scale(1);
	background-color: var(--brown2);
}

.popup-nav-button-selected {
	transform: scale(1);
	margin-bottom: 0;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
	background-color: var(--brown2);
	padding-bottom: 10px;
}

.popup-nav-button .tooltip {
	display: none;
	top: 60px;
	animation: chest-item 200ms 1 ease;
	background: var(--brown3);
}

.popup-nav-button:hover .tooltip { display: block; }

#furniture-shop .popup-nav { margin-left: 120px; }

.furniture-apple-counter {
	gap: 5px;
	margin: 10px 0 -20px auto;
	width: fit-content;
	height: 30px;
	padding-right: 20px;
}

/* ---- COMING SOON -- Furniture in housing ---- */

/* Titre principal */
#furniture-shop .title{
	font-family: var(--font);
	font-weight: 900;
	line-height: .95;
	letter-spacing: .02em;
	font-size: 40px;
	margin: 20px 0 10px;
	text-transform: uppercase;
	text-align: center;
	margin-left: -150px;
}

/* Paragraphe d’intro */
#furniture-shop .lead{
	font-size: 20px;
	margin: 34px 0 8px;
}

/* Liste des avantages */
#furniture-shop .perks{
	margin: 10px 60px 12px;
	padding: 0 0 0 1.2em;
	list-style: none;
	text-align: left;
}
#furniture-shop .perks li{
	position: relative;
	margin: 10px 0;
	font-size: 20px;
}
#furniture-shop .perks li::before{
	content: "•";
	position: absolute;
	left: -1.1em;
	font-size: 1.2em;
	line-height: 1;
	opacity: .9;
}

/* Ligne teaser avec l’emoji cadeau */
#furniture-shop .teaser{
	margin-top: 8px;
	font-size: 20px;
}

/* Bandeau “COMING SOON…” */
#furniture-shop .soon{
  margin: clamp(12px, 3vw, 24px) 0 0;
  font-weight: 900;
  font-size: clamp(24px, 5.5vw, 36px);
  letter-spacing: .06em;
  animation: pulse 1.8s ease-in-out infinite;
}

/* Animation douce pour le “Coming soon…” */
@keyframes pulse{
  0%, 100% { opacity: .9; transform: translateY(0); }
  50%      { opacity: 1;  transform: translateY(10px); }
}

/* ---- Housing shop crate ---- */


#furniture-container {
	gap: 15px;
	padding: 15px;
	width: 450px;
	height: 425px;
	overflow-x: hidden;
	overflow-y: scroll;
}

.furniture-offer {
	position: relative;
	flex-shrink: 0;
	z-index: 0;
	box-sizing: border-box;
	border: none;
	background: none;
	padding: 10px 15px;
	width: 450px;
	height: 120px;
	text-align: left;
}

.furniture-background {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	box-sizing: border-box;
	border: 5px solid var(--black);
	border-radius: 10px;
	background: url("../img/interface/furniture-offer.png");
	background-size: 100% 100%;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.furniture-image-container {
	position: absolute;
	top: 0;
	right: 50px;
	bottom: 0;
	transform: translateX(50%) rotate(22.5deg);
	transition: transform 500ms cubic-bezier(0.25, 0, 0, 1);
	margin: auto 0;
	width: 120px;
	height: 120px;
}

.furniture-image-container.furniture-image-blueprint {
	background-image: url("../img/interface/furniture-blueprint.png");
	background-size: 100% 100%;
	padding: 10px;
	width: 80px;
	height: 80px;
}

.furniture-image-container.furniture-image-bonus {
	right: 150px;
	transform: translateX(50%) rotate(-22.5deg);
	width: 80px;
	height: 80px;
}

.furniture-plus {
	position: absolute;
	top: 0;
	right: 80px;
	bottom: 0;
	margin: auto 0;
}

.furniture-image {
	max-width: 100%;
	max-height: 100%;
}

.furniture-offer:hover .furniture-background {
	background-image: url("../img/interface/furniture-offer-hover.png");
}

.furniture-offer:active .furniture-background {
	background-image: url("../img/interface/furniture-offer-active.png");
}

.furniture-offer.offer-blueprint .furniture-background {
	background-image: url("../img/interface/furniture-offer-blueprint.png");
}

.furniture-offer.offer-blueprint:hover .furniture-background {
	background-image: url("../img/interface/furniture-offer-blueprint-hover.png");
}

.furniture-offer.offer-blueprint:active .furniture-background {
	background-image: url("../img/interface/furniture-offer-blueprint-active.png");
}

.furniture-offer.offer-uncraftable .furniture-background {
	background-image: url("../img/interface/furniture-offer-uncraftable.png");
}

.furniture-offer.offer-uncraftable:hover .furniture-background {
	background-image: url("../img/interface/furniture-offer-uncraftable-hover.png");
}

.furniture-offer.offer-uncraftable:active .furniture-background {
	background-image: url("../img/interface/furniture-offer-uncraftable-active.png");
}

.furniture-offer.offer-crate .furniture-background {
	background-image: url("../img/interface/furniture-offer-crate.png");
}

.furniture-offer.offer-crate:hover .furniture-background {
	background-image: url("../img/interface/furniture-offer-crate-hover.png");
}

.furniture-offer.offer-crate:active .furniture-background {
	background-image: url("../img/interface/furniture-offer-crate-active.png");
}

.furniture-name {
	font-size: 24px;
}

.furniture-description {
	width: 300px;
}

.furniture-offer:hover .furniture-image-container {
	transform: translateX(50%) rotate(11.25deg) scale(1.1);
}

.furniture-offer:hover .furniture-image-bonus {
	transform: translateX(50%) rotate(-11.25deg) scale(1.1);
}

#crate-container {
	gap: 15px;
	padding: 0;
	width: 625px;
	height: 440px;
	overflow: hidden;
}

.crate-container-background {
	position: absolute;
	top: 0;
	left: 0;
	animation: pattern 30s linear infinite;
	width: 200%;
	height: 200%;
}

.crate-container-top,
.crate-container-bottom {
	padding: 10px;
	width: 100%;
	text-align: center;
}

.crate-container-top {
	top: 0;
}

.crate-container-bottom {
	bottom: 0;
}

.crate-container-title {
	font-size: 24px;
}

.crate-container-description {
	font-weight: 300;
	font-size: 18px;
}

.furniture-offer.offer-crate {
	height: 150px;
}

.furniture-offer.offer-crate .furniture-background {
	box-shadow: rgba(58, 50, 43, 0.3) 0 5px 0 5px;
	border-radius: 15px;
}

.furniture-offer.offer-crate .furniture-image-container {
	right: 80px;
	width: 150px;
	height: 150px;
}

.furniture-offer.offer-crate .furniture-name {
	font-size: 28px;
}

.furniture-offer.offer-crate .furniture-description {
	font-size: 16px;
}

.rays-container {
	position: absolute;
	opacity: 0;
	z-index: -1;
	transition: opacity 500ms cubic-bezier(0.25, 0, 0, 1);
	width: 200%;
	height: 200%;
}

.furniture-offer:hover .rays-container {
	opacity: 1;
}

.rays-container .rays {
	position: absolute;
	margin: auto;
}

.rays0 {
	position: absolute;
	animation: spin 10s linear infinite;
}

.rays1 {
	position: absolute;
	animation: spin 20s linear infinite;
}

#crate-container .furniture-image-container::before,
#crate-container .furniture-image-container::after {
	background: transparent;
}

/* ---- COMING SOON -- Crafting in housing ---- */

/* Titre principal */
#reward-message-box .title{
	font-family: var(--font);
	font-weight: 900;
	line-height: .95;
	letter-spacing: .02em;
	font-size: clamp(36px, 40px, 86px);
	margin: 20px 0 10px;
	text-transform: uppercase;
	text-align: center;
	margin-left: -110px;
}

/* Paragraphe d’intro */
#reward-message-box .lead{
	font-size: 20px;
	margin: 34px 0 8px 30px;
}

/* Liste des avantages */
#reward-message-box .perks{
	margin: 30px 10px 12px;
	padding: 0 0 0 1.2em;
	list-style: none;
	text-align: left;
}
#reward-message-box .perks li{
	position: relative;
	margin: 10px 0;
	font-size: clamp(16px, 23px, 26px);
}

#reward-message-box .perks li::before{
	content: "1";
	background: var(--black);
	width: 30px;
	height: 30px;
	border-radius: 20px;
	position: absolute;
	left: -40px;
	font-size: 22px;
	text-align: center;
}

#reward-message-box .perks li:nth-of-type(2)::before{
	content: "2";
}

#reward-message-box .perks li:nth-of-type(3)::before{
	content: "3";
}

/* Ligne teaser avec l’emoji cadeau */
#reward-message-box .teaser{
	margin-top: 8px;
	font-size: clamp(16px, 23px, 26px);
}

/* Bandeau “COMING SOON…” */
#reward-message-box .soon{
	margin: clamp(12px, 3vw, 24px) 0 0;
	font-weight: 900;
	font-size: clamp(24px, 5.5vw, 36px);
	letter-spacing: .06em;
	animation: pulse 1.8s ease-in-out infinite;
}

/* ---- Shop in game ---- */

#buy-item {
	height: 15px;
	padding-top: 11px;
	padding-bottom: 22px;
	margin-bottom: -330px;
	position: absolute;
}

#buy-item:active {
	margin-bottom: -335px;
	margin-top: 0;
}

#equip-button {
	height: 15px;
	padding-top: 11px;
	padding-bottom: 22px;
	margin-bottom: -330px;
	position: absolute;
}

#equip-button:active {
	margin-bottom: -335px;
	margin-top: 0;
}

.equipped,
.equipped:hover,
.equipped:active,
#equip-button:active {
	background-color: var(--black);
	box-shadow: inset 0 5px 0 var(--black0);
}

.equipped,
.equipped:hover,
.equipped:active {
	padding-top: 6px;
	height: 34px;
}

#item-game-description {
	height: 45px;
	text-align:center;
}

.cant-buy, .cant-buy:hover, .cant-buy:active,
.cant-buy img { cursor:url(../img/interface/cursor-not-allowed.png) 16 16, default }

.cant-buy,
.cant-buy:hover,
.cant-buy:active {
	background-color: var(--grey0);
	box-shadow: inset 0 -5px 0 var(--black1);
	color: var(--grey0);
	padding-top: 15px;
	padding-bottom: 18px;
	margin-top: 0px;
	cursor:url(../img/interface/cursor-not-allowed.png) 16 16, default
}

.centerItemGame {
	width:120px; height:120px;
	display:flex;
	justify-content: center;
}


.itemPinNoButton {

	position: absolute;
	top: -14px;
	right: -20px;
	background-image: url("../img/interface/pin-active.png");
	width: 39px;
	height: 43px;
	transition: 100ms background-image;
	pointer-events: none;
}

.itemPin {

	position: absolute;
	top: -14px;
	right: -20px;
	cursor:url(../img/interface/cursor-pointer.png) 16 0, pointer;
	background-image: url("../img/interface/pin-active.png");
	width: 39px;
	height: 43px;
	transition: 100ms background-image;
}

.itemPin:hover {
	scale: 1.1;
}

.itemPinSelected {

	background-image: url("../img/interface/pin.png");
	width: 39px;
	height: 43px;
}

.itemPinSelected:hover { background-image: url("../img/interface/pin-hover.png"); }

.locked .itemPin, .locked .itemPinNoButton,
.centerItemGame img[src*="./img/interface/cosmetic-hat0.png"] + .itemPin,
.centerItemGame img[src*="./img/interface/cosmetic-hat0.png"] + .itemPinNoButton,
.centerItemGame img[src*="./img/interface/cosmetic-wing0.png"] + .itemPin,
.centerItemGame img[src*="./img/interface/cosmetic-wing0.png"] + .itemPinNoButton
{ display: none; }

/* - Crates Sections - */
#crates-button {
	left: 430px;
}

#crates-#shop-player-preview { display: none; }

.item-amount {
	position: absolute;
	right: 0;
	bottom: 0;
	transform: rotate(-15deg);
	font-weight: 900;
	font-size: 24px;
}

#shop-craft-preview {
	display: none;
	height: 370px;
	text-align: center;
}

.shop-craft-top {
	position: relative;
	gap: 5px;
	box-sizing: border-box;
	margin-bottom: 10px;
	border-radius: 10px;
	background-color: var(--black);
	padding: 6px;
	height: 300px;
}

.shop-craft-image-container {
	position: relative;
	flex-shrink: 0;
	box-shadow: inset 0 12px 0 rgba(58, 50, 44, 0.5);
	border-radius: 5px;
	background-color: var(--brown2);
	height: 150px;
	height: 170px;
	overflow: hidden;
}

#shop-craft-background {
	position: absolute;
	top: 0;
	left: 0;
	animation: pattern 5s linear infinite;
}

#shop-craft-image, .item-won.furniture .chest-cosmetic, #inspect-image, #sandtimer, #inspect-container {
	position: absolute;
	inset: 0;
	margin: auto;
}

@keyframes pattern {
	0% { transform: translate(-50%, -50%) }
	100% { transform: translate(0, 0) }
}

#shop-craft-name { font-size: 24px; }

#shop-craft-description {
	height: 45px;
	overflow: hidden;
	font-size: 16px;
}

#shop-craft-recipe {
	display: flex;
	flex-shrink: 0;
	justify-content: center;
	gap: 5px;
}

.shop-craft-resource {
	display: inline-flex;
	align-items: center;
	display: none;
}

#shop-craft-button {
	position: relative;
	padding-left: 50px;
	width: 100%;
	height: 60px;
	overflow: hidden;
	font-size: 24px;
}

#shop-craft-hammer {
	position: absolute;
	top: 40px;
	bottom: 0;
	left: 10px;
	transform: rotate(15deg);
	transition: transform 500ms cubic-bezier(0.25, 0, 0, 1);
	margin: auto 0;
}

#shop-craft-button:hover #shop-craft-hammer {
	transform: rotate(-15deg);
	transition: transform 500ms cubic-bezier(0.75, 2.5, 0, -0.25);
}

#shop-craft-recipe-biome {
	background: var(--black);
	width: 60px;
	border-radius: 0 0 0 35px;
	position: absolute;
	top: 0;
	right: 0;
	padding: 10px 10px 15px 15px;
	box-sizing: border-box;
}

/* -- Server selection --*/
.server-category { font-size: 12px; }

#vjPlryqIV {
	width: 209px;
}

/* -- Team Box -- */
.leave-team-button {
	padding: 5px;
	margin-top: -7px;
	height: 26px;
	width: 120px;
	border-radius: 10px;
}

.leave-team-button:active {
	padding: 7px 5px 3px 5px;
	height: 26px;
}

#no-hide-leader-button,
#lock-team-button,
#lock-join-button {
	border-right-width: 0;
	border-radius: 12px 0 0 12px;
	position: relative;
}

#hide-leader-button,
#unlock-team-button,
#unlock-join-button {
	border-left-width: 0;
	border-radius: 0 12px 12px 0;
	position: relative;
}

.unlock-team-button-active,
.unlock-team-button-active:hover,
.unlock-team-button-active:active,
.hide-leader-button-active,
.hide-leader-button-active:hover,
.hide-leader-button-active:active,
.unlock-join-button-active,
.unlock-join-button-active:hover,
.unlock-join-button-active:active {
	height: 36px;
	background: var(--green3);
	box-shadow: inset 0 5px 0 var(--green2);
	padding-top: 4px;
}

.game-team-button .tooltip,
#challenges-box .tooltip,
#profile-box .tooltip  { display: none; z-index: 10; }

#team-box .game-team-button:hover .tooltip,
#profile-box .section-button:hover .tooltip, #profile-box .section-button-selected:hover .tooltip,
#challenges-box .section-button:hover .tooltip, #challenges-box .section-button-selected:hover .tooltip {
	display: inline-block;
	border-radius: 6px;
	position: absolute;
	padding: 10px 15px;
	animation: chest-item 200ms 1 ease;
	animation-fill-mode: forwards;
}

#team-box .game-team-button:hover .tooltip {
	background: var(--black);
	top: 50px;
	left: -130px;
	width: 313px;
}

.join-team, .join-team:active { height: 26px; }

.join-team {
	color: var(--white);
	padding: 5px;
	margin-bottom: -6px;
	margin-top: -1px;
	width: 50px;
	border-radius: 10px;
}

.join-team:active { padding: 9px 5px 1px 5px; }

.teamIconButton, .teamIcon {
	height: 30px;
	width: auto;
	margin-right: 8px;
}

.teamIconButton {
	padding-top: 3px;
	margin-bottom: -3px;
}

/* --- Gift Profile --- */
img.apple-img-buy-button{
	width:auto;
	height:fit-content;
}

/* --- Profile Section ---*/
.profile-name {
	position: absolute;
	top: 9px;
	left: 220px;
}

#profile-picture {
	margin-left: -43px;
	overflow: hidden;
	width: 128px;
	margin-top: 5px;
	position: relative;
	height: 37px;
	padding: 0 5px;
	border-radius: 12px;
}

#profile-picture img { width:49px; margin:-5px 0 0 -14px; }
#profile-picture:active img,
#profile-picture:active p { margin-top: 5px; }

#profile-picture p { margin: -5px 0 0 10px; }

#profile-picture.alert::after { top: -12px; }

#profile-picture:hover, #logged-friends-button:hover, #logged-mobile-button:hover {
	background:#fbd085;
	box-shadow: inset 0 -6px 0 #d1913b;
}

#profile-picture:active, #logged-friends-button:active, #logged-mobile-button:active {
	background: #e7972d;
	box-shadow: inset 0 6px 0 #7a4908;
}

#profile-picture:active { height: 37px; }

#profile-picture, #logged-friends-button, #logged-mobile-button { background: var(--beige); }
#logged-friends-button, #logged-mobile-button { box-shadow: inset 0 -6px 0 #9d7035; }

#profile-bottom {
	background:rgba(103, 71, 26, 0.54);
	left:0;
}

#profile-bottom:hover { background:rgba(154, 108, 43, 0.54); }

#profile-picture:active #profile-bottom { display:none; }

#logged section {
	background: var(--black);
	border-radius: 6px;
	z-index: 1;
	height: 40px;
	padding: 5px 10px;
	margin-top: 5px;
	position: relative;
}

#id-name, #id-copy-name, #stats-referral-referrer {
	border-radius: 5px;
	cursor:url(../img/interface/cursor-pointer.png) 16 0, pointer;
}

#stats-referral-referrer { padding: 0 10px 0 10px; }

#id-name:hover, #id-copy-name:hover, #stats-referral-referrer:hover { background: var(--black1); }
#id-name:active, #id-copy-name:active, #stats-referral-referrer:active { background: var(--black2); }

#id-name {
	max-width: 200px;
	text-align: left;
}

#id-copy-name {
	width: 19px; height: 19px;
	margin-left: 5px;
}

#id-copied {
	position: absolute;
	left: 0px;
	top: 0px;
	font-size: 20px;
	color: var(--beige);
	display: none;
}

#gauge-background, #gauge-level{

	height: 10px;
	z-index:1;
}

#gauge-background {
	width: 180px;
	background: var(--white);
	margin-top: 7px;
	box-shadow: inset 0 6px 0 #e0c6a0;
	border-radius: 2px;
	position:relative;
}

#gauge-level {
	width: 0px;
	background: var(--green1);
	position: absolute;
	top: 0px;
	left: 0px;
	border-radius: 2px;
	box-shadow: inset 0 6px 0 var(--green3);
	transition: 300ms;
	height: 10px;
}

#player-level {
	color: var(--white);
	font-size: 19px;
	margin: -2px 0 0 5px;
}

.logged-button {
	z-index: 1;
	height: 37px;
	width: 40px;
	margin-left: 10px;
	position: relative;
	margin-top: 5px;
	padding: 0 0 1px 0;
	border-radius: 10px;
}

.logged-button :active img { margin-top: 6px;}
.logged-button .alert::after { top: -12px; right: -11px; }

/* -------------- PROFILE STATS ---------------- */

#stats-selected main, #stats-referral aside { display: flex; }

#stats-selected section:nth-child(1),
#verify-mail-button { width: 100%; }

#stats-selected section:nth-child(1) { flex-direction: column; }

#verify-mail-button,
#stats-selected section:nth-child(1) { display: flex; justify-content: center; }

#verify-mail-button p { margin-left: 8px; }
#verify-mail-button img {
	width:39px;
	margin: -10px -8px -8px -4px;
}

#player-badge-vip { width: 58px; height: 58px; }

#stats-selected p[content="Username"] { padding-left: 6px; }

#verified-account, #change-username-button, #profile-id-box, #profile-id-copy-hint,
#stats-referral figure div { position: absolute; }

#verified-account {
	width: 11px;
	background: var(--green1);
	border-radius: 20px;
	border: 4px solid var(--black);
	left: 95px;
}

#verified-account, #profile-id-box { top: 0px; }
#change-username-button, #profile-id-box { right: 5px; }
#change-username-button {
	top: -11px;
	font-size: 10px;
}

#profile-id-box {
	background: var(--black);
	font-size: 16px;
	border-radius: 6px;
}

#profile-id-copy-hint {
	left: -88px;
	color: var(--yellow2);
	display: none;
}

#profile-id-copy-button {
	width: 19px; height: 19px;
	margin-left: 5px;
}

#stats-referral {
	background: var(--brown3);
	border-radius: 8px;
}

#stats-referral h4 { color: var(--beige); font-size: 14px; }
#stats-referral h3 { font-size: 15px; }

#stats-referral-referrer, #profile-id-copy-button { cursor:url(../img/interface/cursor-pointer.png) 16 0, pointer; }
#stats-referral-referrer { padding: 0 5px; }
#stats-referral-referrer:hover { background: var(--black1); }
#stats-referral-referrer:active { background: var(--black2); }

#stats-referral div {
	background: var(--black);
	border-radius: 4px;
	width: 310px;
}

#verified-account, #stats-referral, #stats-referral div, #profile-id-box { padding: 5px; }
#stats-referral div:nth-child(1),
#stats-referral div:nth-child(3),
#stats-referral-claim { display: flex; align-items: center; }

#stats-referral div:nth-child(1) h3,
#stats-referral div:nth-child(3) aside { margin-left: auto; }
#stats-referral img { width: 40px; }

#stats-referral div:nth-child(2) { margin: 4px 0; }

#stats-referral figure {
	background: var(--white);
	height: 10px;
	position: relative;
	overflow: hidden;
	border-radius: 2px;
}

#stats-referral figure div {
	background: var(--yellow1);
	border-radius: 0px;
	width: 20%;
}

#stats-referral figure, #stats-referral figure div {
	box-shadow: inset 0 5px 0 rgb(57 50 43 / 20%);
}

#stats-referral-claim {
	height: 50px;
	margin: -5px 0 -5px auto;
	display: none;
}

#stats-referral-claim p { margin-left: 12px; }

#profile-exam-button { font-size: 20px; position: relative; }

/* -------------- LEADERBOARD ------------------- */
#leaderboard {
	z-index: 25;
	left: calc(50% - 394px);
	top: calc(50% - 299px);
	transform: scale(0);
	display:none;
	padding:30px 60px 20px 60px;
	width: 656px;
}

#clan-challenge-button {
	padding: 8px 0 12px 0;
	width: 290px;
	margin: 18px 0px 7px 20px;
	align-items: center;
	justify-content: center;
}

#main-leaderboard {
	width: 630px;
	margin-left: 16px;
	margin-top: -5px;
	padding: 10px 5px;
}

#leaderboard-pages {

	width: 630px;
	margin-left: 16px;
	display: flex;
	justify-content: flex-start;
}

.img-leaderboard {
	width: 45px;
	margin-top: -12px;
	margin-left: -20px;
}

.img-leaderboard-right {
	width: 55px;
	margin-top: -8px;
}

#img-leaderboard-column {
	position:absolute;
	right: 0px;
	top:55px;
	z-index:-1;
}

#leaderboard-column {
	position:absolute;
	left: -1px;
	top:110px;
	z-index:-1;
	overflow: hidden;
	height: 480px;
}

#select-tamers img {
	margin-left: -7px;
}

#select-clans img {
	margin-left: -9px;
}

#challenge-button-question {
	position: absolute;
	right: 20px;
	width: 20px;
	height: 20px;
	border-radius: 21px;
	padding: 2px 5px 8px 5px;
	font-size: 20px;
	margin-top: -2px;
}

#leaderboard .top10 { color:#f3e9d1; background: var(--brown0); }
#leaderboard .top10:hover { background: #7c4320; }
#leaderboard .top10:active { background: var(--brown3); }

.help-totem-reward-tip {

	visibility: hidden;
	display: block;
	background: var(--black);
	border-radius: 8px;
	padding: 8px;
	position: absolute;
	z-index: 1;
	top: -5px;
	left: 440px;
}

.top10:hover .help-totem-reward-tip {
	visibility: visible;
}

.help-totem-reward-tip h3 { color: var(--white); font-size: 14px;}
.help-totem-reward-tip h2 { color: var(--yellow1); display: flex; justify-content: center; }
.help-totem-reward-tip h2 img { margin-left: -4px; }

/* ---------- Challenge boxes ----------*/
#challenges-box .tabs-section {
	display: flex;
	margin: 10px 50px 12px 170px;
	align-items: flex-end;
	position: relative;
	z-index: 2;
}

#tab-challenges { margin-left: auto}
#tab-potions { margin-right: 0 }

#challenge-container {
	display: flex;
	flex-direction: column;
	overflow-y: scroll;
	height: 440px;
	overflow-x: hidden;
	align-items: center;
}

#challenge-container p.shadowed {

	width: calc(100% - 10px);
	text-align: center;
	background: var(--black);
	border-radius: 3px 3px 0 0;
	padding: 0px 10px;
	margin: -5px -5px 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

#challenge-container span { margin: 0 3px; }

#challenges-box .section-button,
#challenges-box .section-button-selected,
#challenges-box .section-button-selected:hover,
#challenges-box .section-button-selected:active {
	width: 22px;
	position: relative;
	margin-top: 0px;
	height: 46px;
	border-radius: 10px;
}

#challenges-box .section-button-selected, #challenges-box .section-button-selected:hover, #challenges-box .section-button-selected:active {
	height: 41px;
	margin-bottom: -12px;
	border-radius: 10px 10px 0 0;
}

#challenges-box .tabs-section img {
	position: absolute;
	width: 53px;
	left: 5px;
	top: 2px;
}

#challenges-box #challenge-time-title img { position:static; }

#challenges-box .tooltip { left: 50%; translate: -50%; }

#challenge-time-title { font-size: 14px; width: 210px; display: flex; align-items: center; margin: 5px 0 -5px 0 }

.challenge, .achievement { display: flex; flex: 1 0 auto; }

.challenge, .challenge div, .challenge-locked div, .challenge-unlocked div, .challenge-start div,
.achievement, .achievement div, .achievement-locked div, .achievement-unlocked div, .achievement-start div {
	background-repeat: no-repeat;
	height: 84px;
	margin: 5px 0;
	position: relative;
}

.challenge-locked, .challenge-unlocked, .challenge-start,
.achievement-locked, .achievement-unlocked, .achievement-start { width: 558px; z-index: 1; }

.challenge-over { background-image: url(../img/interface/challenge-over.png); width: 700px; margin-left: 10px !important;}
.challenge-locked { background-image: url(../img/interface/challenge-locked.png); }
.challenge-start { background-image: url(../img/interface/challenge-start.png); }
.challenge-start-line { background-image: url(../img/interface/challenge-start-line.png); top: -114px; left: 14px; height: 20px !important;}
.challenge-unlocked { background-image: url(../img/interface/challenge-unlocked.png); }

.achievement-over { background-image: url(../img/interface/achievement-over.png); width: 683px; }
.achievement-locked, .achievement-start { background-image: url(../img/interface/achievement-locked.png); }
.achievement-start-line { background-image: url(../img/interface/achievement-start-line.png); top: -112px; left: 4px; }
.achievement-unlocked { background-image: url(../img/interface/achievement-unlocked.png); }

.challenge div.challenge-reward,
.achievement div.achievement-reward {
	background-image: url(../img/interface/challenge-reward.png);
	width: 179px;
	margin-left: -65px;
	height: 83px;
}

.challenge-reward h2, .achievement-reward h2 {
	position: relative;
	top: 36px;
	text-align: center;
	width: 85px;
	padding-left: 90px;
}

.challenge-reward h2 { padding-left: 83px; }

.challenge-star-container div {
	position:absolute;
	right: 15px;
	top: 40px;
	height: 30px;
	z-index: 1;
}

div.challenge-star-container {

	background: var(--black);
	width: 44px;
	height: 82px;
	top: -34px;
	right: -169px;
	border-radius: 0 7px 7px 0;
}

.challenge-star-container img {
	position: absolute;
	right: 3px;
	top: 14px;
}

.challenge-collect .challenge-star-container {
	top: -69px; right: -179px;
}

.challenge div { margin-left: -10px; }

.challenge div.challenge-collect, .achievement div.achievement-collect {
	background-image: url(../img/interface/challenge-collect.png);
	width: 192px;
	margin-left: -66px;
}

.challenge div.challenge-collect {
	margin-left: -76px;
}

.challenge div.challenge-collect:hover,
.achievement div.achievement-collect:hover {
	background-image: url(../img/interface/challenge-collect-in.png);
	cursor:url(../img/interface/cursor-pointer.png) 16 0, pointer;
}

.challenge div.challenge-collect:active,
.achievement div.achievement-collect:active { background-image: url(../img/interface/challenge-collect-click.png); }

.challenge h3, .challenge h5,
.achievement h3, .achievement h5 {
	position: absolute;
	top: 20px; left: 20px;
}

.challenge h3 { color: var(--black); }
.challenge-locked h3, .achievement-locked h3 { top: 18px;}
.challenge-unlocked h3 { top: 28px;}

.challenge-over h5, .challenge-start h5 { top: 48px; color: #458f02; }
.challenge-start h5 { top: 46px; }
.challenge-locked h5, .achievement-locked h5 { color: var(--white); top: 44px; }

.challenge-collect h3, .achievement-collect h3 {
	left: 69px;
	position: absolute;
	top: -9px;
	color: var(--white);
}
.challenge-collect h3 { left: 66px; }

.challenge-collect h1, .achievement-collect h1 {
	position: absolute;
	top: 21px;
	width: 73px;
	left: 66px;
	text-align: center;
	font-size: 30px;
}

.challenge-collect h1 { left: 65px; }

.challenge-collect:active h1, .achievement-collect:active h1 { top: 25px;}
.challenge-collect:active p, .achievement-collect:active p { display: none; }

.challenge .gauge, .challenge .gauge-shadow, .achievement .gauge, .achievement .gauge-shadow {
	position: relative;
	height: 72px;
	margin-left: 4px;
	border-radius: 10px 0 0 10px;
	width: 522px;
}

.challenge .gauge-shadow {
	top: 3px;
	background-color: #71A500;
}

.challenge .gauge, .achievement .gauge {
	background-color: #94c106;
	top: -78px;
}

.challenge-collect .hide, .achievement-collect .hide {
	overflow: hidden;
	width: 181px;
	margin-top: 9px;
	height: 55px;
}

.challenge-collect p, .achievement-collect p {
	background: url(../img/interface/challenge-collect-light.png) no-repeat;
	height: 60px;
	animation: challenge-translate infinite cubic-bezier(1, -0.04, 0.56, 2.6) 3s;
}

@keyframes challenge-translate {
	0% { margin-left: -100px; }
	100% { margin-left: 440px; }
}

#challenge-container .vip-challenges .challenge-reward {
	margin-left: -74px;
}

.vip-challenges {
	position: relative;
	background: #613011;
	padding: 0 7px 10px;
	margin-top: 10px;
	width: 100%;
}

.unlock-vip, .vip-challenges div.vip-background-box {
	width: 100%; height: 100%;
	position: absolute;
	overflow: hidden;
}

.unlock-vip:after {
	content: "";
	position: absolute;
	width: 100%; height: 100%;
	background: rgb(58 50 43 / 75%);
	z-index: 2;
	top: 0; left: 0;
	border-radius: 10px;
}

.vip-message-challenge {
	z-index: 3;
	position: absolute;
	top: 43%;
	left: calc(50% - 440px / 2);
	width: 440px;
	font-size: 22px;
	padding: 20px 0;
	animation: background-position 3s infinite cubic-bezier(0.92, 0.01, 1, 1);
	background-image: url(../img/vip-challenge.png);
	background-repeat: no-repeat;
	overflow: hidden;
}

.vip-message-challenge span { font-size: 26px; line-height: 26px }
.vip-message-challenge img {
	position: absolute;
	z-index: -1;
	opacity: 0.4;
	top: 7px;
	left: 7px;
	width: 97%;
}

.vip-challenges p.vip-background {
	margin-top: -167px;
	position: relative;
	opacity: 0.7;
}

@keyframes vip-bg {
	0% { background: rgb(227 145 28 / 30%);}
	50% { background: rgb(227 145 28 / 80%);}
	100% { background: rgb(227 145 28 / 30%);}
}

.vip-challenges .challenge-over { margin-left :0 !important;}
.vip-challenges .challenge div { margin-left: 4px !important;}
#challenge-container .vip-challenges .challenge-reward { margin-left :-74px !important;}

#challenge-container .vip-challenges .challenge-collect { margin-left: -84px !important; }
#challenge-container .vip-challenges .challenge-collect h3 { left: 77px; }
#challenge-container .vip-challenges .challenge-collect h1 { left: 70px; }

.achievement-img {
	position: absolute;
	top: 0px;
	height: 64px;
	overflow: hidden;
	box-shadow: inset 7px 7px 0px #544131, inset -7px -7px 0 #544131;
}

.achievement img, .achievement-img {
	width: 64px;
	border-radius: 5px;
	margin: 7px;
}

.tamodex .achievement-img img {
	width: 75px;;
	border-radius: 5px;
	margin-left: -2px;
	margin-top: -2px;
}

.collections .achievement-img img {
	width: 86px;
	border-radius: 5px;
	margin-left: -12px;
	margin-top: -12px;
}

.achievement-start img {
	position: absolute;
	top: 0px;
}

.achievement h3, .achievement h5 {
	left: 85px;
}

.achievement h5, .achievement-over h5 { color: #E3911C; top: 48px;}
.achievement-start h5 { color: #bb4c15 }
.achievement .gauge { background-color: #E3911C; }
.achievement .gauge-shadow { background: #a94f1a; top: 3px; }
.achievement-collect h3 { left: 69px; }
.achievement-start-line { display: none }

h3.achievement-left {
	position: absolute;
	right: 25px; left: unset;
	top: 21px;
	font-weight: 100;
	background: var(--black);
	border-radius: 4px;
	padding: 4px 9px;
	font-size: 19px;
}

/* ---------- Shop ------------- */

#buy-potions { display: none; }
#buy-potions .background-popupbox {
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	width: 640px;
	height: 470px;
	border-radius: 8px;
	align-content: flex-start;
	justify-content: space-evenly;
}

#buy-potions .buy-potion-chests {
	width: 180px;
	margin-left: 10px;
	text-align: center;
}

#buy-potions div.potions-chests {
	position: relative;
	width: 123px;
	height: 226px;
	top: 0px;
}

@keyframes bright {
	0% { filter: brightness(1); }
	50% { filter: brightness(1.2) drop-shadow(3px 6px 6px black);}
	100% { filter: brightness(1);}
}

#buy-potions .buy-potion-chests div h3.title { top: 10px; left: -2px; font-size: 16px; }
#buy-potions div h4.time, #buy-potions .price { top: 165px; left: 0px; width: 100%; position: absolute; }
#buy-potions span.time-value { font-size: 18px; }

#buy-potions #chest17 .price { left: -12px;}
#buy-potions #chest17 h1+img { left: 72px; bottom: 6px; width: 53px; position: absolute;}
#buy-potions .potions-shop .chest-button {
	width: 38%;
	height: 50px;
	border-radius: 10px;
	transition: 0.2s;
	margin: 2px 17px;
	display: flex;
	align-items: center;
	background: #4473aa;
	border: 5px solid var(--black);
}

#buy-potions .potions-shop .chest-button.multiple {
	width: 48%;
}

#buy-potions .buy-potion-chests .chest-button {
	position: relative;
	width: 123px;
	height: 226px;
	top: 0px;
}

#buy-potions .chest-button.potion { background: var(--yellow2); }

#buy-potions .shop-tag {
	margin-left: auto;
	position: sticky;
}

#buy-potions .chest-button img[src*="/item-potion"] {
	width: 65px;
	rotate: -22deg;
	margin-left: -32px;
	z-index: 1;
	filter: drop-shadow(1px 4px 2px #3a322b);
}

#buy-potions .multiple img[src*="/item-potion"] {
	margin-left: -48px;
}

#buy-potions .chest-button img[src*="/item-potion"] + img {
	rotate: 10deg;
	margin-top: -12px;
	margin-left: -43px;
	z-index: 0;
}

#buy-potions .chest-button img[src*="/item-potion81"] {
	margin-left: -23px;
	margin-top: -14px;
}

#buy-potions .chest-button.multiple img[src*="/item-potion81"] + img {
	rotate: -22deg;
	margin-left: -40px;
	margin-top: -17px;
}

#buy-potions .chest-button.multiple img[src*="./item-potion81"] {
	margin-left: -46px;
	rotate: 0deg;
	margin-top: 20px;
}

#buy-potions .potions-shop h3 {
	text-align: center;
	line-height: 17px;
	font-size: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 6px;
}

#buy-potions #potion-price6 h3, #buy-potions #potion-price9 h3 { margin-left: -5px; }

#buy-potions #potion-price5 h3 { margin-left: 10px; }
#buy-potions #potion-price7 h3 { margin-left: 19px; }
#buy-potions #potion-price8 h3 { margin-left: 7px; }
#buy-potions #potion-price11 h3 { margin-left: -40px; }
#buy-potions #potion-price10 h3 { margin-left: -30px; }

#buy-potions .potion.multiple .potions-shop h3 { margin-left: -6px; }

#buy-potions .skins-background {
	margin-left: -150px;
	background-image: url(../img/interface/potion-chest-bg.png);
	background-size: 100%;
}
#buy-potions div.chest-button:hover { top: unset; }

#buy-potions img[src*="./img/interface/recipients.png"] {
	position: absolute;
	width: 100px;
	right: 3px; bottom: 3px;
}

#buy-potions img[src*="./img/interface/recipient.png"] {
	position: absolute;
	top: 28px; left: 16px;
	width: 38px;
}

#buy-potions .buy-potion-chests h3 {
	position: absolute;
	text-align: center;
	line-height: 17px;
	width: 129px;
}

#buy-potions .potions-shop h4 {
	font-size: 12px;
	display: flex;
	line-height: 11px;
	height: 40px;
	text-shadow: none;
	background: #cc322e;
	padding: 5px 37px 5px 5px;
	border-radius: 6px;
	align-items: center;
}

#buy-potions .potions-shop h1 { font-size: 18px; }

#buy-potions .potion-black-friday-title {
	position: absolute;
	width: 100%;
	text-align: center;
	left: 50%;
	transform: translateX(-50%);
	background: var(--black);
	border-radius: 4px;
	padding: 5px 0;
	top: -11px;
}

#buy-potions #potion-bag0, #buy-potions #potion-bag1 { height: 220px; top: 17px; }
#buy-potions #potion-bag0 { width: 156px;  }
#buy-potions #potion-bag1 { width: 215px; }

#potion-bag-price0 h1, #potion-bag-price1 h1{ bottom: 0px; }
#potion-bag-price1 h1 { left: 49px; }

#buy-potions #potion-bag0 h3 { left: 13px; top: 8px; }
#buy-potions #potion-bag1 h3 { left: 42px; top: 8px; }

#buy-potions #potion-bag0 h1+img, #buy-potions #potion-bag1 h1+img { left: unset; bottom: -7px; }

#buy-potions #potion-bag0 h1+img { right: 16px; }
#buy-potions #potion-bag1 h1+img { right: 39px; }

#buy-potions h4#potion-bag-time0, #buy-potions h4#potion-bag-time1 { text-align: center; position: absolute; top: 181px; }

#potion-bag-img { width: 600px; height: 242px; }

#potion-get-more-apples { position: absolute;top: 22px;left: 278px;width: 312px;padding: 8px 8px 11px; }

#buy-potions .description {

	background: var(--black);
	border-radius: 0 0 5px 5px;
	padding: 5px;
	text-align: center;
	width: 70%;
	height: 78px;
	display: flex;
	bottom: 24px;
	position: absolute;
}

#buy-potions .description .flex-column {
	margin-left: 20px;
}

#buy-potions .description div:nth-of-type(2){
	width: 151px;
	margin: 10px 11px 0 0;
}

#buy-potions .description h3 { width: 180px; }
#buy-potions .small-description {

	line-height: 16px;
	color: #f4c57a;
}

#buy-potions h6 {
	font-size: 12px;
	color: #f4c57a;
	margin-top: -6px;
}

/* ---- Shop - Merchant ---- */
/* -- Left Part -- */
#buy-merchant .scrollbar1::-webkit-scrollbar {
	border-radius: 0 0 10px 0;
}

#merchant-loading {
	position: absolute;
	z-index: 3;
	margin: auto;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	display: none;
}

#buy-merchant #merchant-loading img { width: auto; }

#merchant-switch-buttons {
	position: fixed;
	z-index: 3;
	background-color: var(--black);
	height: 50px;
	margin: 0 -4px;
	border-radius: 5px;
}

#merchant-switch-buttons button {
	width: 215px;
	height: 83px;
	border: none;
	font-size: 35px;
	background-repeat: no-repeat;
	filter: grayscale(1);
	background-color: unset;
}

#merchant-switch-buttons button:hover,
#merchant-switch-buttons button.active { filter: none; }
#merchant-switch-buttons button.active { cursor:url(../img/interface/cursor-default.png) 4 0, default; }

#merchant-switch-buy {
	background-image: url("../img/interface/merchant-buy-button-active.png");
	z-index: 1;
}

#merchant-switch-buy:hover { background: url("../img/interface/merchant-buy-button-hover.png"); }
#merchant-switch-buy:active,
#merchant-switch-buy.active {
	background-image: url("../img/interface/merchant-buy-button.png");
}

#buy-merchant button#merchant-switch-sell {
	background-image: url(../img/interface/merchant-sell-button-active.png);
	width: 220px;
	margin-left: -5px;
}

#buy-merchant button#merchant-switch-sell:hover { background-image: url("../img/interface/merchant-sell-button-hover.png"); }
#buy-merchant button#merchant-switch-sell:active,
#buy-merchant button#merchant-switch-sell.active { background-image: url("../img/interface/merchant-sell-button.png"); }

.buy-merchant {
	width: 420px;
	height: 470px;
	position: relative;
	display: flex;
	flex-direction: column;
}

#buy-merchant .title-buy {
	position: sticky;
	background-image: url(../img/interface/merchant-buy.png);
	width: 410px;
	height: 68px;
	background-size: 100%;
	margin-left: -5px;
	top: 0px;
	z-index: 2;
	padding-top: 12px;
}
#merchant-limit {
	background: rgb(58 50 43 / 75%);
	position: absolute;
	z-index: 2;
	padding: 148px 123px;
	text-align: center;
	display: none;
}

#merchant-limit img {
	background: var(--black);
	border-radius: 50px;
}

#merchant-buy-items .chest-button.shadowed {
	width: 96px;
	height: 111px;
}

#merchant-buy-items,
#merchant-sell-inventory {
	display: flex;
	flex-wrap: wrap;
	flex-grow: 1;
}

#merchant-sell-info,
#merchant-buy-info {
	background: var(--black);
	text-align: center;
	margin: 62px 0 0;
	padding: 20px 20px 10px;
	justify-content: space-around;
	align-items: center;
	display: none;
}

#merchant-sell-info div,
#merchant-buy-info div { padding: 10px 0; }
#merchant-buy-items,
#merchant-sell-inventory {
	overflow-y: auto;
}

#merchant-buy-items {
	padding: 0 7px;
	align-content: flex-start;
}

#merchant-sell-inventory { padding: 9px; display: none; }

#merchant-sell-inventory p {
	top: -5px;
	left: 15px;
}

#merchant-sell-inventory img { width: 100% }
#merchant-sell-inventory img:nth-of-type(2) { position: absolute; bottom: 0; }
#merchant-sell-inventory h3 {
	position: absolute;
	bottom: 4px;
	left: 23px;
	right: 0;
	text-align: center;
	width: 60px;
}

#buy-merchant .chest-button {
	margin: 5px 0;
	text-align: center;
}

#buy-merchant .chest-button:hover {
	top: -5px;
	transition: 0.2s;
	height: 116px;
	margin-bottom: -5px;
}

#buy-merchant .chest-button.shadowed.active {
    filter: brightness(1.3);
}

.buy-merchant img { width: 96px; }

#merchant-buy-items img + img,
#merchant-buy-items h4,
#merchant-buy-items h2 {
	position: absolute;
	z-index: 1;
}

#buy-merchant img + img {
	top: 9px;
	left: 0;
	right: 0;
	margin: auto;
	width: 85px;
	rotate: 10deg;
}

#merchant-buy-items h2 {
	font-size: 18px;
	top: 85px;
	left: 18px;
	width: 76px;
}

#merchant-buy-items h4 {
	font-size: 12px;
	top: 2px;
	left: 3px;
	width: 93px;
}

#merchant-sell-points,
#merchant-buy-points {
	padding: 3px 5px;
	border: 2px solid var(--beige);
	border-radius: 7px;
}

/* -- Right Part -- */

#merchant-shop {
	height: 468px;
	width: 386px;
	position: relative;
}

#merchant-background {
	width: 390px;
	height: 253px;
	position: static;
	top: 0;
}

#merchant-canvas { border-radius: 10px 10px 0 0; }

#merchant-shop-background {
	position: absolute;
	left: -12px;
}

.merchant-box {
	padding: 3px;
	display: flex;
}

#merchant-buy-interaction,
#merchant-sell-interaction {
	height: 218px;
	z-index: 1;
	position: relative;
}

#merchant-buy-interaction {
	width: 265px;
	margin: auto;
}

.merchant-box:nth-child(1) div { height: 85px; }

.merchant-box:nth-child(2),
#merchant-buy-interaction .merchant-box div:nth-child(2),
.merchant-box:nth-child(2) div { flex-grow: 1; }

#merchant-sell-interaction .merchant-box div:nth-child(3) { flex-grow: 1; }
.merchant-box:nth-child(2) div { justify-content: center; }

.merchant-box div {
	background: var(--brown3);
	border-radius: 5px;
	box-shadow: inset 5px 25px 0px #7d4320, inset -5px -5px 0 #7d4320;
	text-align: center;
	position: relative;
	margin: 3px;
	display: flex;
     justify-content: space-between;
     flex-direction: column;
}

.merchant-box h5 {
	font-size: 14px;
	margin-top: 4px;
}

#buy-merchant .merchant-box img {
	width: 65px;
}

.merchant-box h1 {
	position: relative;
	padding: 15px;
}

.merchant-box h1::after {
	content: "";
	background: url(../img/golden-apple1.png);
	background-size: 100%;
	position: absolute;
	width: 50px;
	height: 50px;
	top: 14px;
	right: 5px;
}

.merchant-box button {
	padding: 15px;
	color: var(--white);
	border-radius: 10px;
}

.merchant-box button {
	font-size: 35px;
	margin-top: 0px;
}

#merchant-sell-button,
#merchant-buy-button {
	height: 80px;
	font-size: 35px;
	border-radius: 10px;
	margin: auto;
	margin-top: 10px;
	width: 265px;
}

.merchant-box input {
	height: 100%;
	background: none;
	border: none;
	color: var(--white);
	font-size: 40px;
	width: 105px;
     text-align: center;
     padding-right: 20px;
}

.merchant-box input::-webkit-outer-spin-button,
.merchant-box input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.merchant-box input[type=number] { -moz-appearance: textfield; }

.merchant-box input + aside {
	position: absolute;
	right: 0px;
	top: 25px;
	z-index: 1;
	background: #7d4320;
	width: 25px;
	height: 55px;
}

.merchant-box .arrow {
	background: #7d4320;
	width: 100%;
	height: 27px;
	position: relative;
}

.merchant-box .arrow:hover { background: #9e5c33; }
.merchant-box .arrow:active { background: #613011; }

.merchant-box .arrow::after{
	display: block;
	height: 0;
	width: 0;
	position: absolute;
	left: 4px;
	top: 6px;
}

.merchant-box .arrow.merchant-top::after {
	content: url(../img/interface/merchant-arrow-top.png);
}

.merchant-box .arrow.merchant-bottom::after {
	content: url(../img/interface/merchant-arrow-bottom.png);
}

/* ---------- Loading above exam---------- */
#exam-loading-container {
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgb(58 50 43 / 50%);
	z-index: 23;
	justify-content: center;
	align-items: center;
	display: none;
	left: 0;
	top: 0;
}

/* ---------- Exam Quiz ------------*/
#exam-box {
	width: 720px;
	height: 480px;
	padding: 25px;
	z-index: 22;
	display: none;
	left: calc(50% - 385px);
	top: calc(50% - 24px);
	transform: scale(0);
}

#exam-title {
	background: url(../img/interface/quiz-title.png) no-repeat;
	width: 563px;
	height: 59px;
	color: var(--white);
	position: absolute;
	top: -55px;
	left: 0;
	right: 0;
	padding: 70px 0 0;
	text-align: center;
	margin: auto;
}

#exam-container, #exam-result-container, #exam-fail-container,
#exam-badge-container, #exam-time-left-container, #exam-ready-container { display: none; }

#exam-start-container {
	margin-top: 53px;
	background: var(--brown2);
	border-radius: 10px;
}


#exam-start-container img[src="./img/interface/quiz-mauve-ready.png"] {
	width: 630px;
	margin: auto;
	display: flex;
}

#exam-start-container span { color: var(--white); }
#exam-start-container div:nth-child(1) h1 {
	position: absolute;
	top: 100px;
	text-align: center;
	left: 104px;
	font-size: 32px;
}

#exam-start-container div:nth-child(1) p {
	padding: 20px 100px;
	text-align: center;
	background: var(--black);
	margin-top: -25px;
	margin-bottom: 25px;
}

#exam-ready-container {
	text-align: center;
	background: url(../img/interface/quiz-ready-bg.png) no-repeat;
	width: 724px;
	background-size: 100%;
	margin-top: 20px;
	background-position: 0 8px;
}

#exam-ready-container p { position: absolute; font-size: 18px; }
#exam-ready-container p:nth-of-type(1) {
	bottom: 160px;
	left: 40px;
}

#exam-ready-container p:nth-of-type(2) {
	bottom: 10px;
	right: 28px;
	text-align: right;
}

.exam-warning-container {
	padding: 15px;
	margin: 60px 0 0;
	font-size: 20px;
	background: var(--black);
	text-align: center;
}

#exam-badge-container {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	margin: 10px 0;
	padding: 0;
}

#exam-time-left-value { color: var(--beige); }

#exam-ready-button {
	font-size: 50px;
	background: url(../img/interface/quiz-ready-button.png);
	width: 272px;
	height: 115px;
	color: var(--white);
	margin-top: -4px;
	margin-left: -7px;
}

#exam-ready-button:active {
	background: url(../img/interface/quiz-ready-button-active.png);
}

#exam-container { margin-left: -10px; }
#exam-container div:nth-child(1) {
	margin-bottom: -120px;
	position: relative;
	margin-top: 14px;
	z-index: -1;
}

#exam-container div:nth-child(1) img:nth-child(2),
#exam-container div:nth-child(1) img:nth-child(3) {
	margin: auto;
	left: 0;
	right: 0;
}

#exam-container div:nth-child(1) img:nth-child(2) { top: 160px; }
#exam-container div:nth-child(1) img:nth-child(3) {
	top: 0px;
	animation-delay: 300ms;
}

#exam-question-container {
	width: 650px;
	margin: auto;
	padding-top: 35px;
	position: relative;
}

#exam-question-container img {
	position: absolute;
	right: 10px;
	top: -7px;
}

#exam-question-number {
	color: var(--black);
	font-weight: 500;
	font-size: 20px;
	text-indent: 18px;
	margin-top: -30px;
	background: #e2ccac;
	padding: 5px;
	width: 140px;
	border-radius: 10px;
	border: 5px solid var(--black);
}

#exam-answers, #exam-question {
	position: relative;
	display: flex;
}

#exam-question {
	color: var(--white);
	font-size: 20px;
	background: #e2ccac;
	height: 95px;
	margin-top: -18px;
	z-index: -1;
	width: 624px;
	border: 5px solid var(--black);
	border-radius: 9px;
	box-shadow: inset 0 21px 0 27px #f0e4d0;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 5px 15px 0 15px;
}

#exam-answers {
	flex-wrap: wrap;
	justify-content: space-between;
}

#exam-box button { border: none }

#exam-box button:hover,
#exam-validate-button.activate:hover { filter:brightness(1.1); }

#exam-box button.activate:hover { filter: none }

#exam-validate-button.activate { cursor:url(../img/interface/cursor-pointer.png) 16 0, pointer; }
#exam-validate-button.activate:active { scale: 0.9; transition: 100ms ease; }

#exam-next-text { font-size: 18px; }
#exam-box .question {
	width: 326px;
	height: 77px;
	position: relative;
}

#exam-box .question.left {
	background: url(../img/interface/quiz-question-left.png) no-repeat;
}
#exam-box button.left:active,
#exam-box .question.left.activate {
	background: url(../img/interface/quiz-question-left-clicked.png) no-repeat;
}

#exam-box .question.right {
	background: url(../img/interface/quiz-question-right.png) no-repeat;
}

#exam-box button.right:active,
#exam-box .question.right.activate {
	background: url(../img/interface/quiz-question-right-clicked.png) no-repeat;
}

#exam-box .question h1 {
	font-size: 37px;
	color: var(--orange0);
	position: absolute;
	top: 15px;
}

#exam-box .question.a h1 { top: 10px; }

#exam-box .question:active h1,
#exam-box .question.activate h1 { color: var(--green1) }

#exam-box .question p {
	font-size: 17px;
	color: var(--white);
	width: 237px;
	height: 73px;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	top: 0;
}

#exam-box .question.left h1 { left: 24px; }
#exam-box .question.right h1 { right: 23px; }

#exam-box .question.left p { left: 72px; }
#exam-box .question.right p { right: 72px; }

#exam-validate-button {
	background: url(../img/interface/quiz-center.png) no-repeat;
	width: 116px;
	height: 62px;
	position: absolute;
	top: 46px;
	left: 0;
	right: 0;
	margin: auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

#exam-validate-button.activate {
	background: url(../img/interface/quiz-center-clicked.png) no-repeat;
}

#exam-validate-button-text {
	text-align: center;
	margin-top: 16px;
	font-size: 22px;
}

#exam-result-value {
	font-size: 90px;
	margin: auto;
	text-align: center;
	font-weight: 900;
	background: #4ab9ba;
	border-radius: 10px 10px 0 0;
}

#exam-result-badge {
	position: absolute;
	top: 70px;
	right: 54px;
}

#exam-result-badge[src="./img/interface/quiz-badge-fail.png"] {
	right: 34px;
}
#exam-result-text {
	text-align: center;
	color: var(--white);
}

#exam-result-container {
	background: var(--brown2);
	border-radius: 10px;
	margin: auto;
	padding: 55px 0 15px 0;
}

#exam-result-container a {
	padding: 10px 35px 0px 35px;
	border-radius: 10px;
	font-size: 40px;
	top: 20px;
	color: var(--white);
	border: 5px solid var(--black);
	position: relative;
	margin-right: 5px;
}

#exam-result-container a:active {
	box-shadow: inset 0 10px 0 0 #4675b4;
	background: #2f9db1;
}

#exam-result-container a::after {
	width: 52px;
	height: 47px;
	position: absolute;
	right: 0;
	left: 0;
	margin: auto;
	display: block;
	top: 2px;
	content: "";
	background-repeat: no-repeat;
	background-position: center;
}

#exam-x { background-color: var(--black); box-shadow: inset 0 -10px 0 0 #23221f;}
#exam-fb { background-color: #2f75cf; box-shadow: inset 0 -10px 0 0 #2058ba; }

#exam-x:active { background-color: #23221f; box-shadow: inset 0 10px 0 0 var(--black);}
#exam-fb:active { background-color: #2058ba; box-shadow: inset 0 10px 0 0 #2f75cf; }

#exam-x::after { background: url(../img/interface/exam-x.png); }
#exam-fb::after { background: url(../img/interface/exam-fb.png); }

#exam-result-container a:active::after {
	top: 11px;
}

img[src="./img/interface/quiz-mauve-result-dialog.png"] {
	position: relative;
	width: 680px;
	margin-left: -30px;
	margin-top: 15px;
	pointer-events: none;
}

#exam-result-container div.shadowed2,
#exam-fail-container div.shadowed2 {
	background: #e2ccac;
	width: 600px;
	margin: auto;
	height: 384px;
	box-shadow: inset 0 0 0 70px #f0e4d0;
	border-radius: 10px;
	text-align: center;
}

#exam-fail-container div.shadowed2 { margin-top: 70px; }

#exam-result-container p {
	font-size: 20px;
	background: var(--black);
	padding: 10px;
	margin-top: 10px;
}
#exam-result-comment p.shadowed,
a#exam-result-fail {
	position: absolute;
	bottom: 73px;
	font-size: 18px;
	left: 62px;
	background: none;
}

a#exam-result-fail {
	left: 110px;
	color: var(--green0);
	border: none;
	top: unset;
	display: none;
}

a#exam-result-fail:active {
	background: none;
	box-shadow: none;
}

#exam-failed {
	color: var(--orange1);
	font-weight: 900;
	font-size: 90px;
	padding: 5px 25px;
	border: 10px solid var(--orange1);
	width: fit-content;
	border-radius: 20px;
	rotate: -5deg;
	margin: auto;
	box-shadow: 0 0 0px 8px var(--black), inset 0 0 0 8px var(--black);
}

#exam-failed::after {
	position: absolute;
	display: block;
	top:0;
	right: -230px;
	width:100%;
	height:100%;
	content: url(../img/interface/quiz-bad.png);
}

#exam-failed-text {
	text-align: center;
	width: 390px;
	margin: 72px auto auto 180px;
	color: #d76647;
	font-size: 25px;
}

#exam-failed-text + img {
	position: absolute;
	width: 230px;
	bottom: 0px;
	left: 40px;
}

#exam-fail-container .read-rules {
	color: var(--white);
	padding-left: 170px;
	position: relative;
	top: 30px;
}

#player-badge-exam, #player-exam { display:none; }

/* ---------- Notifications ----------*/
#challenges-notification {
	position: absolute;
	z-index: 30;
	background-color: var(--black);
	border-radius: 8px;
	padding: 10px;
	width: 310px;
	left: calc(50% - 155px);
	display: none;
}

#challenges-notification.top {

	top: 10px;
	animation: notification-top 450ms 1 cubic-bezier(0.42, 0, 0.5, 1.35);
}

#challenges-notification.bottom {

	bottom: 10px;
	animation: notification-bottom 450ms 1 cubic-bezier(0.42, 0, 0.5, 1.35);
}

#challenges-notification img {
	width: 64px;
	height: 64px;
	border-radius: 5px;
	margin-right: 10px;
}

#challenges-notification div {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#challenges-notification h3 { color: var(--beige); }
#challenges-notification h2 { color: var(--white); }

#challenges-notification.top.notification-fade {
	animation: notification-fade 400ms 1 ease forwards;
	-webkit-animation: notification-fade 400ms 1 ease forwards;
}

#challenges-notification.bottom.notification-fade {
	animation: notification-bottom-fade 400ms 1 ease forwards;
	-webkit-animation: notification-bottom-fade 400ms 1 ease forwards;
}

@keyframes notification-top {
	0% { transform: translateY(-100px); }
	100% { transform: translateY(0); }
}

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

@keyframes notification-bottom {
	0% { transform: translateY(100px); }
	100% { transform: translateY(0); }
}

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

.display-none { display: none; }

/* ---------- My Note Taking ------------ */

.MyNoteTaking, .MyNoteTaking * { box-sizing: border-box; font-family: 'Rowdies'; font-size: inherit; user-select: none }
.MyNoteTaking { color: var(--black); font-size: calc(10px + 0.5vmax); display: grid; gap: 1em; grid-template-columns: 1fr 3fr; grid-template-rows: auto 1fr; width: 100%; height: 100%; background: #f4c469; padding: 8px; overflow: hidden; position: absolute; z-index: 200; top: 0; }

.MyNoteTaking *:focus { outline: none  }
.MyNoteTaking a { cursor: pointer; color: var(--black) }

.MyNoteTaking button { color: #fff }

.MyNoteTaking .trix-active { background: #d1e5eb; box-shadow: inset 0 5px 0 #71b6cb;  }

.MyNoteTaking button.square { width: 3em; height: 3em }

.MyNoteTaking .FilesButtons { display: flex; flex-direction: row; gap: 4px; }
.MyNoteTaking .FilesButtons button { flex-grow: 1 }

.MyNoteTaking .Files { flex-grow: 1; display: flex; flex-direction: column; overflow-y: scroll; height: 100%; padding-right: 8px }
.MyNoteTaking .Files a { padding: 0.5em }
.MyNoteTaking .Files .opened { background: #ffffff66; border-radius: 9px }

.MyNoteTaking .FilesWrapper { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.MyNoteTaking .FilesBottom { padding-top: 0.5em; display: flex; gap: 8px; align-items: center }

.MyNoteTaking .Contents { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: # }
.MyNoteTaking .Counter { padding: 0.5em; color: #f4c469; background: var(--black); border-radius: 9px; margin-top: 1em; font-size: 0.85em }

.MyNoteTaking .Title { background: #f4e3b2; border: 0; margin-bottom: 0.5em; padding: 0 0.5em; font-size: 2em; border-radius: 9px; color: inherit; user-select: auto; }
.MyNoteTaking .Editor {  width: 100%; padding: 1em 2em; flex-grow: 1; overflow-y: scroll; background-position: 0 1em; background-color: #f4e3b2; border-radius: 9px; user-select: auto; border: none}
.MyNoteTaking .Editor * { padding: 0; margin: 0; user-select: auto }
.MyNoteTaking .Editor, .MyNoteTaking .Probe { line-height: 2em;  }
.MyNoteTaking .Probe { position: absolute; opacity: 0 }

.MyNoteTaking .Editor del { text-decoration: underline }
.MyNoteTaking .Editor ul { padding: 0; margin: 0; padding-left: 1em; color: #067554 }

.MyNoteTaking .Editor ul strong, .MyNoteTaking .Editor ul b { color: inherit }

.MyNoteTaking .Editor strong, .MyNoteTaking .Editor b { color: #cd5c5c; letter-spacing: 2px }
.MyNoteTaking .Editor i { opacity: 0.9; font-weight: 300; }

.MyNoteTaking .EditorButtons { display: flex; flex-direction: row; gap: 4px }
.MyNoteTaking trix-toolbar { display: flex; flex-direction: row; gap: 4px }

.MyNoteTaking .EditorButtons .space {flex-grow: 1; display: flex; justify-content: center; align-items: center;  }
.MyNoteTaking .EditorButtons .Play { padding: 0 2em  }

.MyNoteTaking button.policy {
    border-radius: 5px;
    padding: 7px 20px;
    width: unset;
    border: none;
    box-shadow: none; }

.MyNoteTaking button.policy a { color: #f4c469 }
.scrollbar::-webkit-scrollbar {
	background: #866262;
    border-radius: 78px;

}

.MyNoteTaking .scrollbar::-webkit-scrollbar-track {
	background: #866262;
    border-radius: 78px;

}

.MyNoteTaking .scrollbar::-webkit-scrollbar-thumb {
	background: #a5976d;
    border-radius: 78px;

}

/* ---------- Sand Timer ------------ */
#sandtimer {
	text-align: center;
	background-color: #f4c469;
	justify-content: center;
	height: 100%;
	width: 100%;
	z-index: 200;
}

#sandtimer, .sandtimer-container, #sandtimer .lap-info {
	display: flex;
	overflow: hidden;
	align-items: center;
}

#sandtimer-box {
	background-color: #e5ab56;
	padding: 40px;
	border-radius: 10px;
	width: 560px;
	display: none;
}

#sandtimer h1 { position: relative; width: 460px; }

#sandtimer h1, #sandtimer button, #sandtimer .lap-title, #sandtimer #sandtimer-policy a {
	color: var(--white);
}

#sandtimer h1::after {
	position: absolute;
	content: "";
	background: url(../img/interface/santimer.png) no-repeat;
	width: 90px;
	height: 90px;
	background-size: contain;
	z-index: 111;
	display: block;
	top: -20px;
	right: -55px;
	border-radius: 45px;
}

.sandtimer-container {
	justify-content: center;
	margin: 15px 0;
}

.sandtimer-container p, #sandtimer .lap-title:nth-child(1) { background: var(--black); }
.sandtimer-container p {
	padding: 10px 20px;
	border-radius: 10px;
	width: 70px;
}

.sandtimer-container p:nth-of-type(4) {
	width: 100px;
}

.sandtimer-container span, #sandtimer h3 { color: var(--black); }
.sandtimer-container span, #sandtimer h1, .sandtimer-container p { font-size: 50px; }
#sandtimer button { font-size: 25px; }

#sandtimer .buttons {
	margin: 10px auto;
	display: flex;
	width: 480px;
}

#sandtimer button { width: 146px; }

#sandtimer #sandtimer-start { width: 300px; }
#sandtimer-stop { margin-right: 5px; }
#sandtimer-stop, #sandtimer-pause, #sandtimer-continue { display: none; }
#sandtimer #sandtimer-play { width: 170px; }

#sandtimer .lap-info {
	flex-direction: column;
	margin-top: 10px;
	position: relative;
}

#sandtimer .lap-row.lap-title {
	position: fixed;
	left: calc(50% - 280px);
	width: 560px;
	margin-top: 0;
}

#sandtimer-records {
	width: 100%;
	margin-top: 45px;
	height: 370px;
	overflow: hidden auto;
}

#sandtimer .lap-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	width: 100%;
	border-radius: 5px;
	margin: 3px 0;
	padding: 10px 0;
	background: var(--white);
}

#sandtimer footer {
	position: absolute;
	bottom: 0;
	display: flex;
	width: 98%;
	justify-content: space-between;
	padding: 5px 10px;
	align-items: flex-end;
}

#sandtimer footer div {
	font-size: 12px;
	color: var(--black);
}

#sandtimer #sandtimer-policy {
	font-size: 17px;
	border-radius: 5px;
	padding: 7px 20px;
	width: unset;
	border: none;
	box-shadow: none;
}

/* -------------- LIGHT BUTTON ANIMATION -------------- */
#items-box #top-button-items.hint {
	animation: light-up 1.2s ease infinite;
	border-radius: 40px;
}

#items-box #bottom-button-items.hint {
	animation: light-down 1.2s ease infinite;
	border-radius: 40px;
}

#hint-buttons-items {
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 49px;
	height: 215px;
     top: 160px;
     right: 25px;
	display: none;
}

#hint-buttons-items img:nth-of-type(1) {
	animation: drag-up 800ms ease infinite;
}

#hint-buttons-items img:nth-of-type(2) {
	animation: drag-down 800ms ease infinite;
}

@keyframes drag-up {
	0%, 100% { transform: translateY(0px); }
	60% { transform: translateY(-10px); }
}

@keyframes drag-down {
	0%, 100% { transform: translateY(0px);}
	60% { transform: translateY(10px);}
}

@keyframes light-up {
	0%, 100% {
		border: 5px solid transparent;
		top: 80px;
		right: 10px;
	}
	80% {
		border: 5px solid #f0e4d0;
		top: 80px;
		right: 10px;
	}
}

@keyframes light-down {
	0%, 100% {
		border: 5px solid transparent;
		bottom: 35px;
		right: 10px;
	}
	80% {
		border: 5px solid #f0e4d0;
		bottom: 35px;
		right: 10px;
	}
}

/* -------------- GIFT CODES -------------------- */
.copy-code {
	top:12px;
	right: 100px;
	border-radius: 6px;
	height: 35px;
	padding-top:5px;
	border: none;
	position:absolute;
}

/* -------------- CMP -------------------- */
.cmpbox {
	border-radius: 13px !important;
	background: rgb(158, 92, 51) !important;
	border: 4px solid var(--black) !important;
	transition-property: none !important;
	max-height: 400px !important;
}

div.cmpbox::before {
	content: "";
	display: block;
	width: 100%;
	background-size: 170px;
	background-repeat: no-repeat;
	height: 50px;
	top: -30px;
	position: absolute;
	background-position: center;
	background-image: url(../img/logo.png);
	left: 0;
	background-color: var(--brown2);
	border-radius: 5px;
}

.cmpbox *, .cmpbox>* {
    font-family: 'Rowdies' !important;
    font-weight: 100 !important;
}

.cmpwelcomeprps {
    width: 48% !important;
}

*.cmpbox {
    border: none !important;
    padding: 0 0 0 10px !important;
}

.cmplogo {
    right: 40px !important;
    top: 5px !important;
}

.cmpdl {
    max-height: 25px !important;
}

.cmpboxwelcomeprps {
    margin-bottom: 0px !important;
}

*.cmpboxtxt {
    padding-bottom: 8px !important;
}

*.cmpboxtxt, td.cmpvendname {
    font-size: 9pt !important;
}

.cmpbox1 .cmpboxbtns {
    margin-top: 0px !important;
}

.cmpboxdetails {
    background: var(--brown2);
}

.cmpfullscreen .cmpmorelink, .cmpfullscreen A.cmpmorelink, .cmpfullscreen A.cmpmorelink:link {
    font-size: 11pt;
    color: #ffffff !important;
    background: #64bd64;
    border-radius: 5px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.cmpwelcomeprpstxt, .cmpwelcomeprpstxt A:link, .cmpwelcomeprpsbtn, .cmpwelcomeprpsbtn A:link, .cmpwelcomeprpsbtn span {
    font-size: 9pt !important;
}

.cmpbox div.cmpboxnaviitem {
    background: var(--brown5);
    color: var(--white)!important;
    border: none;
    padding: 15px;
}

.cmpboxnaviitemactive {
    background: var(--beige);
    padding: 15px;
    color: var(--black)!important;
}

.cmpboxnaviitemactive, TD.cmpallvend, TH.cmpallvend, TD.cmpallprps, TH.cmpallprps {
    background: var(--black) !important;
    border: none;
    border-radius: 3px;
    color: var(--white);
    padding: 5px 0;
}

.cmpbox div.cmpprpshl {
    color: var(--beige) !important;
}
.cmpvendname {
    color: var(--white) !important;
}
.cmpfullscreen *.cmpboxbtnyes, .cmpfullscreen A.cmpboxbtnyes, .cmpfullscreen A.cmpboxbtnyes:link {
    font-size: 10pt !important;
    background-color: #7c4220 !important;
}

div.cmpbox.cmpfullscreen {
	width: 100%;
	height: 100%;
	transform: none!important;
	left: 0;
	right: 0;
	top: 0;
	margin: auto;
	max-width: 820px;
	bottom: 0;
	max-height: 400px !important;
}

div.cmpbox.cmpfullscreen::before {
	display:none;
}
.cmpbox div.cmpboxtxtcustomcoices {
    color: var(--white) !important;
}
.cmpbox div.cmpprpsdescr, .cmpbox div.cmponofftext {
    color: var(--white) !important;
}

*.cmpboxtxt, td.cmpvendname {
    color: var(--white) !important;
    padding: 25px;
    padding-right: 35px;
}

.cmpbox div.cmpwelcomeprps {
    width: 46% !important;
    color: var(--white) !important;
    padding-left: 30px;
}

.cmpwelcomeprpstxt, .cmpwelcomeprpstxt A:link, .cmpwelcomeprpsbtn, .cmpwelcomeprpsbtn A:link, .cmpwelcomeprpsbtn span {
    color: var(--white) !important;
}

*.cmpboxhl {
    text-align: center;
    padding-top: 30px;
}

*.cmpboxbtncustom, A.cmpboxbtncustom, A.cmpboxbtncustom:link {
    background-color: #7d4320  !important;
    box-shadow: none;
    width: 130px;
    margin-right: 50px;
}
*.cmpboxbtnyes, A.cmpboxbtnyes, A.cmpboxbtnyes:link {
    background-color: #62b762 !important;
    height: 40px;
    box-shadow: none;
    border-radius: 4px;
    width: 190px;
    padding-right: 14px;
    padding-top: 10px;
}
*.cmpboxhl , .cmpmorelink, A.cmpmorelink, A.cmpmorelink:link, .cmpmore A, .cmpmore A:link {
    color: var(--beige) !important;
}

.notAllowed {
	cursor:url(../img/interface/cursor-not-allowed.png) 16 16, default
}

/*
body div.fc-consent-root { display: none !important; }
*/

/*
#cmpbox { display: none !important; }
*/

.banner_message--2Rvgt p { color: #999 }
.banner_consentContainer--2LvIr > div:nth-child(2) .banner_continueBtn--3KNKl {
	background-color: #84e152 !important;
	border-color: rgb(132 225 82) !important;
	font-size: 15px !important;
}

/* clears the "X" from Internet Explorer */
input[type=search]::-ms-clear { display: none; width : 0; height: 0; }
input[type=search]::-ms-reveal { display: none; width : 0; height: 0; }

/* clears the "X" from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }

/* ------------- */
/* --- EZOIC --- */
/* ------------- */

div:has(> #ezPrivacyCenter) { display: none !important; }
span#ezPrivacyCenter { display: none !important; }

/* --- Container --- */
#bod #ez-cookie-dialog::before {
	content: "";
	top: -50px;
	left: 0;
	right: 0;
	margin: auto;
	position: absolute;
	width: 250px;
	height: 75px;
	background-image:url("https://taming.io/img/logo.png");
	background-size:contain;
}

#bod #ez-cookie-dialog-wrapper { overflow-y: unset !important; }

#bod #ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner {

	background-color: var(--brown0) !important;
	border: 5px solid var(--black);
	overflow-y: unset !important;
	overflow-x: unset !important;
	border-top: unset;
}

/* --- Fonts --- */
#bod #ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner h2,
#bod #ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner h3,
#bod #ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner p,
#bod #ez-cookie-dialog-wrapper #ez-cookie-dialog a,
#bod #ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner .ez-switch-view-btn,
#bod #ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner #ez-save-settings,
#bod #ez-cookie-dialog-wrapper #ez-cookie-dialog .ez-cmp-description,
#bod #ez-cookie-dialog-wrapper #ez-cookie-dialog .ez-cmp-purpose .ez-cmp-description ul {

	font-weight: 100 !important;
}

#bod #ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner h2,
#bod #ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner h3,
#bod #ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner p,
#bod #ez-cookie-dialog-wrapper #ez-cookie-dialog a,
#bod #ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner .ez-switch-view-btn,
#bod #ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner #ez-save-settings {

	font-family: 'Rowdies', cursive !important;
}

#bod #ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner h2,
#bod #ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner h3,
#bod #ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner p,
#bod #ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner .ez-switch-view-btn,
#bod #ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner #ez-save-settings,
#bod #ez-cookie-dialog-wrapper #ez-cookie-dialog .ez-cmp-description,
#bod #ez-cookie-dialog-wrapper #ez-cookie-dialog .ez-cmp-purpose .ez-cmp-description ul {

	color: var(--white) !important;
}

#bod #ez-cookie-dialog-wrapper #ez-cookie-dialog a { color: var(--brown3) !important; }

/* --- Buttons --- */
#bod #ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner #ez-accept-all {

	background-color: var(--green1) !important;
	box-shadow: inset 0 -5px 0 var(--green2) !important;
	border: 4px solid var(--black) !important;
	text-shadow: rgb(58, 50, 44) 4px 0px 0px, rgb(58, 50, 44) 3.87565px 0.989616px 0px, rgb(58, 50, 44) 3.51033px 1.9177px 0px, rgb(58, 50, 44) 2.92676px 2.72656px 0px, rgb(58, 50, 44) 2.16121px 3.36588px 0px, rgb(58, 50, 44) 1.26129px 3.79594px 0px, rgb(58, 50, 44) 0.282949px 3.98998px 0px, rgb(58, 50, 44) -0.712984px 3.93594px 0px, rgb(58, 50, 44) -1.66459px 3.63719px 0px, rgb(58, 50, 44) -2.51269px 3.11229px 0px, rgb(58, 50, 44) -3.20457px 2.39389px 0px, rgb(58, 50, 44) -3.69721px 1.52664px 0px, rgb(58, 50, 44) -3.95997px 0.56448px 0px, rgb(58, 50, 44) -3.97652px -0.432781px 0px, rgb(58, 50, 44) -3.74583px -1.40313px 0px, rgb(58, 50, 44) -3.28224px -2.28625px 0px, rgb(58, 50, 44) -2.61457px -3.02721px 0px, rgb(58, 50, 44) -1.78435px -3.57996px 0px, rgb(58, 50, 44) -0.843183px -3.91012px 0px, rgb(58, 50, 44) 0.150409px -3.99717px 0px, rgb(58, 50, 44) 1.13465px -3.8357px 0px, rgb(58, 50, 44) 2.04834px -3.43574px 0px, rgb(58, 50, 44) 2.83468px -2.82216px 0px, rgb(58, 50, 44) 3.44477px -2.03312px 0px, rgb(58, 50, 44) 3.84068px -1.11766px 0px, rgb(58, 50, 44) 3.9978px -0.132717px 0px;
}

#bod #ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner .ez-switch-view-btn,
#bod #ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner #ez-save-settings {

	background-color: var(--brown3) !important;
	cursor: url(../img/interface/cursor-pointer.png) 16 0, pointer !important;
}

/* -- Settings --- */
#bod #ez-cookie-dialog-wrapper #ez-cookie-dialog .ez-cmp-header-row { background: var(--white) !important; }

#bod #ez-cookie-dialog-wrapper #ez-cookie-dialog .ez-cmp-header-name { color: var(--black) !important; }

#bod #ez-cookie-dialog-wrapper #ez-cookie-dialog .ez-cmp-description,
#bod #ez-cookie-dialog-wrapper #ez-cookie-dialog .ez-cmp-purpose .ez-cmp-description ul {

	background: var(--brown2) !important;
}

div[data-ezoic-role="privacy-policy"]:before {
	content: "";
	top: -50px;
	left: 0;
	right: 0;
	margin: auto;
	position: absolute;
	width: 250px;
	height: 75px;
	background-image: url(https://taming.io/img/logo.png);
	background-size: contain;
}

div[data-ezoic-role="privacy-policy"] {
	background-color: var(--brown0) !important;
	border-top: none !important;
}

#main-ezcmp p {

	font-size: 12px !important;
	margin: 5px !important;
}

#ezgpp-modal, #ezgpp-modal .ezgpp-modal-content {

	background-color: var(--brown0) !important;
}

div[data-ezoic-role="privacy-policy"] h2 {

	color: var(--white) !important;
}

div:has(> div[data-ezoic-role="privacy-policy"]) {
	border: 5px solid var(--black);
	overflow-y: unset !important;
	overflow-x: unset !important;
	position: absolute !important;
	bottom: 0 !important;
	z-index: 100;
	left: 0;
	right: 0;
	display: none;
}

button#ez-ccpa-reject-all {
	padding: 8px 10px 10px 10px;
	border-radius: 10px;
}

button#ez-ccpa-accept-all {
	padding: 8px 70px 10px 70px;
	border-radius: 15px;
	background-color: var(--green1) !important;
	box-shadow: inset 0 -5px 0 var(--green2) !important;
	border: 4px solid var(--black) !important;
	text-shadow: rgb(58, 50, 44) 4px 0px 0px, rgb(58, 50, 44) 3.87565px 0.989616px 0px, rgb(58, 50, 44) 3.51033px 1.9177px 0px, rgb(58, 50, 44) 2.92676px 2.72656px 0px, rgb(58, 50, 44) 2.16121px 3.36588px 0px, rgb(58, 50, 44) 1.26129px 3.79594px 0px, rgb(58, 50, 44) 0.282949px 3.98998px 0px, rgb(58, 50, 44) -0.712984px 3.93594px 0px, rgb(58, 50, 44) -1.66459px 3.63719px 0px, rgb(58, 50, 44) -2.51269px 3.11229px 0px, rgb(58, 50, 44) -3.20457px 2.39389px 0px, rgb(58, 50, 44) -3.69721px 1.52664px 0px, rgb(58, 50, 44) -3.95997px 0.56448px 0px, rgb(58, 50, 44) -3.97652px -0.432781px 0px, rgb(58, 50, 44) -3.74583px -1.40313px 0px, rgb(58, 50, 44) -3.28224px -2.28625px 0px, rgb(58, 50, 44) -2.61457px -3.02721px 0px, rgb(58, 50, 44) -1.78435px -3.57996px 0px, rgb(58, 50, 44) -0.843183px -3.91012px 0px, rgb(58, 50, 44) 0.150409px -3.99717px 0px, rgb(58, 50, 44) 1.13465px -3.8357px 0px, rgb(58, 50, 44) 2.04834px -3.43574px 0px, rgb(58, 50, 44) 2.83468px -2.82216px 0px, rgb(58, 50, 44) 3.44477px -2.03312px 0px, rgb(58, 50, 44) 3.84068px -1.11766px 0px, rgb(58, 50, 44) 3.9978px -0.132717px 0px;
}

/*------------------------------------ */