/* HEADER MENU */
#divAppHeader #btnHeaderMenu
{
	background-image:url('../images/icons/menu.svg');
	background-position:center;
	background-position:center;
	background-repeat:no-repeat;
	background-size:24px;
	cursor:pointer;
	display:none;
    float:left;
	height:40px;
	margin:5px 0px 0px 50px;
    filter: drop-shadow(0px 0px 5px #7262f2) drop-shadow(0px 0px 10px #7262f2);
    opacity: 1;
	transition:filter 0.25s, opacity 0.25s;
	width:40px;
}

#divAppHeader #btnHeaderMenu:hover
{
	filter:drop-shadow(0px 0px 5px #e600ff);
	opacity:1;
}

.hideMenu #divAppHeader #btnHeaderMenu
{
	display:inline-block;
}

/* MAIN MENU */
#divAppMenu
{
	bottom:0px;
	left:0px;
	position:fixed;
	top:0px;
	transition:left 0.25s;
	user-select:none;
	-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
	width:320px;
	z-index:3;
}

.hideMenu #divAppMenu
{
	left:-340px;
}

#divAppMenu #divMenuOverlay
{
	background-color:rgba(0, 0, 0, 0.5);
	display:none;
	height:100%;
	left:0px;
	opacity:0;
	position:fixed;
	top:0px;
	transition:opacity 0.25s;
	width:100%;
	z-index:-1;
}

#divAppMenu .divMenuContainer
{
	background-color:#292a2f;
	box-shadow:-10px 0px 30px rgba(0, 0, 0, 0.75);
	height:100%;
	left:0px;
	position:absolute;
	top:0px;
	width:100%;
	z-index:-1;
}

#divAppMenu .divMenuHeader
{
	height:110px;
	position:relative;
}

#divAppMenu #imgMenuLogo
{
	cursor:pointer;
	left:30px;
	position:absolute;
	top:32px;
	width:200px;
}

#divAppMenu #btnCloseMenu
{
	cursor:pointer;
	height:40px;
	position:absolute;
	right:10px;
	top:10px;
	width:40px;
}

#divAppMenu #btnCloseMenu:before
{
	background-color:#ffffff;
	box-shadow:0px 0px 5px #7262f2;
	content:"";
	height:2px;
	left:8px;
	position:absolute;
	top:20px;
	transform:rotate(45deg);
	width:24px;
}

#divAppMenu #btnCloseMenu:after
{
	background-color:#ffffff;
	box-shadow:0px 0px 5px #7262f2;
	content:"";
	height:2px;
	left:8px;
	position:absolute;
	top:20px;
	transform:rotate(-45deg);
	width:24px;
}

#divAppMenu #divMenuItemsContainer
{
	height:calc(100% - 140px);
	overflow-y:auto;
	-webkit-overflow-scrolling:touch;
}

#divAppMenu #divMenuItemsContainer::-webkit-scrollbar
{
	background:transparent;
	height:0px;
	width:0px;
}

#divAppMenu #btnLeaderboard
{
	box-shadow:inset 0px 20px 10px -20px rgba(255, 255, 255, 0.75), inset 0px -20px 10px -20px rgba(0, 0, 0, 0.75), 0px 0px 10px rgba(0, 0, 0, 0.5);
	background-image:url('../images/menu/leaderboardChests.webp');
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	border-radius:10px;
	cursor:pointer;
	float:left;
	height:70px;
	margin:10px 10px 20px 30px;
	overflow:visible;
	padding-top:85px;
	position:relative;
	width:calc(50% - 40px);
}

#divAppMenu #divChestsAvailable
{
    background-color:#ee0000;
    border-radius:50%;
    color:#ffffff;
    display:none;
    font-family:"Jost", sans-serif;
	font-size:9px;
    height:14px;
    line-height:14px;
    position:absolute;
	right:5px;
    top:5px;
    text-align:center;
    width:14px;
}

#divAppMenu #divChestsAvailable.show
{
    display:block;
}

#divAppMenu #divNextLeaderboardTimer
{
	height:50px;
	left:50%;
	position:absolute;
	top:50%;
	transform:translate(-50%, -50%);
	width:135px;
}

#divAppMenu #divNextLeaderboardTimer .countdownTimer
{
	height:50px;
}

#divAppMenu #divNextLeaderboardTimer .countdownTimer .divTimerLabel
{
	color:#f1cd98;
	line-height:18px;
	padding-top:0px;
	text-shadow:1px 2px 0px #000000;
}

#divAppMenu #divNextLeaderboardTimer .countdownTimer .divTimerLabel:before, #divAppMenu #divNextLeaderboardTimer .countdownTimer .divTimerLabel:after
{
	display:none;
}

#divAppMenu #divNextLeaderboardTimer .countdownTimer .divDaysValue, #divAppMenu #divNextLeaderboardTimer .countdownTimer .divHoursValue, #divAppMenu #divNextLeaderboardTimer .countdownTimer .divMinutesValue, #divAppMenu #divNextLeaderboardTimer .countdownTimer .divSecondsValue
{
	background-color:rgba(0, 0, 0, 0.75);
	border-color:#8d4e00;
	border-radius:50%;
	box-shadow:1px 1px 0px rgba(0, 0, 0, 0.75);
	color:#e76d00;
	font-size:14px;
	height:20px;
	line-height:20px;
	text-shadow:1px 2px 0px #000000;
	top:20px;
	width:20px;
}

#divAppMenu #divNextLeaderboardTimer .countdownTimer .divDaysLabel, #divAppMenu #divNextLeaderboardTimer .countdownTimer .divHoursLabel, #divAppMenu #divNextLeaderboardTimer .countdownTimer .divMinutesLabel, #divAppMenu #divNextLeaderboardTimer .countdownTimer .divSecondsLabel
{
	display:none;
}

#divAppMenu #btnSkywars
{
	background-color:#53b4cc;
	background-image:url('../images/menu/skywarsBackground.webp'), linear-gradient(180deg, #1974ac 15%, #7dc3cd 35%, #7dc3cd 45%, #53b4cc 60%, #53b4cc 100%);
	background-position:center bottom;
	background-repeat:no-repeat;
	background-size:100%;
	border-radius:10px;
	box-shadow:inset 0px 20px 10px -20px rgba(255, 255, 255, 0.75), inset 0px -20px 10px -20px rgba(0, 0, 0, 0.75), 0px 0px 10px rgba(0, 0, 0, 0.5);
	color:#ffffff;
	cursor:pointer;
	display:none;
	float:left;
	height:40px;
	margin:10px 10px 20px 30px;
	overflow:hidden;
	padding-top:115px;
	position:relative;
	text-align:center;
	text-shadow:0px 0px 5px #000000;
	width:calc(50% - 40px);
}

#divAppMenu #btnSkywars span
{
	animation:skywarsMenuAnimation 5s infinite linear 2s;
	background-image:url('../images/menu/skywarsPlane.webp');
	background-position:center top 42%;
	background-repeat:no-repeat;
	background-size:88%;
	display:block;
	filter:drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.75));
	height:100%;
	left:0px;
	position:absolute;
	top:0px;
	width:100%;
}

#divAppMenu #btnSkywars:before
{
	background-image:url('../images/menu/skywarsClouds.webp');
	background-position:center top 15%;
	background-repeat:no-repeat;
	background-size:100%;
	content:"";
	display:block;
	height:100%;
	left:0px;
	position:absolute;
	top:0px;
	width:100%;
}

#divAppMenu #btnSkywars:after
{
	background-image:url('../images/menu/skywarsLogo.webp');
	background-position:center top 65%;
	background-repeat:no-repeat;
	background-size:80%;
	content:"";
	display:block;
	filter:drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.75));
	height:100%;
	left:0px;
	position:absolute;
	top:0px;
	width:100%;
}

#divAppMenu #btnLuckyStreakChallenge
{
	background-image:url('../images/menu/luckyStreakChallenge.webp');
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	box-shadow:inset 0px 20px 10px -20px rgba(255, 255, 255, 0.75), inset 0px -20px 10px -20px rgba(0, 0, 0, 0.75), 0px 0px 10px rgba(0, 0, 0, 0.5);
	border-radius:10px;
	cursor:pointer;
	float:left;
	height:70px;
	margin:10px 30px 20px 10px;
	overflow:visible;
	padding-top:85px;
	position:relative;
	width:calc(50% - 40px);
}

#divAppMenu #btnLuckyStreakChallenge:before
{
	display:none;
}

#divAppMenu #btnLuckyStreakChallenge:after
{
	background-image:url('../images/promotions/luckyStreakChallenge/luckyStreakHeading.webp');
	background-repeat:no-repeat;
	background-size:cover;
	content:"";
	display:block;
	filter:drop-shadow(0px 0px 2px #000000);
	height:32px;
	left:5px;
	position:absolute;
	top:8px;
	width:calc(100% - 10px);
}

/* --- FEATURED section --- */
#divAppMenu #divFeaturedSection
{
	background:transparent;
	border-radius:12px;
	box-shadow:0 0 8px rgba(160,80,255,0.18), 0 0 22px rgba(160,80,255,0.06);
	margin:30px 15px 15px;
	padding:10px 0 5px;
	position:relative;
}

#divAppMenu #divFeaturedSection > *
{
	position:relative;
	z-index:1;
}

#divAppMenu #divFeaturedSection > .divFeaturedBorder
{
	height:calc(100% + 26px);
	left:0;
	overflow:visible;
	pointer-events:none;
	position:absolute;
	top:-26px;
	width:100%;
	z-index:0;
}

#divAppMenu .divFeaturedHeaderText
{
	color:#ffffff;
	display:block;
	font-family:'JostBold', sans-serif;
	font-size:18px;
	font-weight:800;
	left:50%;
	letter-spacing:1px;
	line-height:20px;
	position:absolute;
	text-align:center;
	text-shadow:0 0 8px rgba(220,160,255,0.7), 0 1px 2px rgba(0,0,0,0.8);
	top:-20px;
	transform:translateX(-50%);
	z-index:2;
}

#divAppMenu .featuredDeco
{
	display:none;
}

#divAppMenu .featuredDeco
{
	display:none;
}

#divAppMenu .divFeaturedGrid
{
	display:flex;
	gap:10px;
	margin:0 15px 0;
}

#divAppMenu .divFeaturedGrid #btnLeaderboard,
#divAppMenu .divFeaturedGrid #btnLuckyStreakChallenge
{
	flex:1;
	float:none;
	margin:0 0 5px 0;
	width:auto;
}

#divAppMenu #divFeaturedSection #divBirthdayBonusButton,
#divAppMenu #divFeaturedSection #divVipClaimedPromotionsButton
{
	margin:15px 15px 10px;
	width:calc(100% - 30px);
}

#divAppMenu #divFeaturedSection .btnPromotionButton
{
	margin:15px 15px 10px;
	width:calc(100% - 30px);
}

/* --- PROMOTIONS section (saved for recall) ---
#divAppMenu #divPromotionsSection
{
	border:1px solid rgba(140,0,240,0.8);
	border-radius:12px;
	box-shadow:0 0 18px rgba(140,0,240,0.45), inset 0 0 18px rgba(140,0,240,0.08);
	margin:0 20px 15px;
	padding:10px 10px 5px;
	position:relative;
}

#divAppMenu .divSectionHeader
{
	color:#ffffff;
	font-size:12px;
	font-weight:700;
	letter-spacing:3px;
	padding:0 0 10px;
	text-align:center;
	text-shadow:0 0 10px rgba(200,100,255,0.9);
}

#divAppMenu #divPromotionsSection #divBirthdayBonusButton,
#divAppMenu #divPromotionsSection #divVipClaimedPromotionsButton
{
	margin:0 0 10px;
	width:100%;
}

#divAppMenu #divPromotionsSection .btnPromotionButton
{
	clear:both;
	margin:0 0 10px;
	width:100%;
}
--- END PROMOTIONS section saved */

#divAppMenu #divVipClaimedPromotionsButton
{
    background-image:url('../images/menu/vipClaimedPromotions.webp');
	background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    border-radius:10px;
    box-shadow:inset 0px 20px 10px -20px rgba(255, 255, 255, 0.75), inset 0px -20px 10px -20px rgba(0, 0, 0, 0.75), 0px 0px 10px rgba(0, 0, 0, 0.5);
    cursor:pointer;
    clear:both;
    display:none;
    height:60px;
    margin:20px 30px 10px;
    position:relative;
    width:calc(100% - 60px);
}

#divAppMenu #divVipClaimedPromotionsButton.show
{
	display:block;
}

#divAppMenu .btnPromotionButton
{
	animation:menuNeonTextPink 5s linear 2.5s infinite;
    background-position:center top;
    background-repeat:no-repeat;
    background-size:100%;
    border-radius:10px;
    box-shadow:inset 0px 20px 10px -20px rgba(255, 255, 255, 0.75), inset 0px -20px 10px -20px rgba(0, 0, 0, 0.75), 0px 0px 10px rgba(0, 0, 0, 0.5);
    color:#ffffff;
    cursor:pointer;
    clear:both;
    font-family:"Bayshore", sans-serif;
    font-size:30px;
    height:60px;
    isolation:isolate;
    line-height:22px;
    margin:20px 30px 10px;
    position:relative;
    text-align:center;
    width:calc(100% - 60px);
}

/* Animated rotating stroke on promotion buttons */
@property --promo-btn-angle {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}

@keyframes promoBtnStrokeSpin { to { --promo-btn-angle: 360deg; } }

#divAppMenu .btnPromotionButton::before
{
	border-radius: 12px;
	content: '';
	display: none;
	inset: -4px;
	pointer-events: none;
	position: absolute;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	padding: 4px;
	z-index: 1;
}



/* ::before = sweeping comet streak (border-masked) */
#divAppMenu .btnPromoSportsPredictor::before
{
	background: conic-gradient(
		from var(--promo-btn-angle) at 50% 50%,
		rgba(0,0,0,0) 0%, rgba(0,0,0,0) 44%,
		#aa00ff 48.5%, #f0aaff 50%, #aa00ff 51.5%,
		rgba(0,0,0,0) 56%, rgba(0,0,0,0) 100%
	);
	border-radius: 13px;
	content: '';
	display: block;
	inset: -3px;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	opacity: 0;
	padding: 3px;
	pointer-events: none;
	position: absolute;
	z-index: 2;
}

/* ::before = same gradient blurred for glow halo */
#divAppMenu .btnPromoSportsPredictor::after
{
	background: conic-gradient(
		from var(--promo-btn-angle) at 50% 50%,
		rgba(0,0,0,0) 0%, rgba(0,0,0,0) 38%,
		#7700bb 47%, #cc66ff 50%, #7700bb 53%,
		rgba(0,0,0,0) 62%, rgba(0,0,0,0) 100%
	);
	border-radius: 14px;
	content: '';
	display: block;
	filter: blur(20px);
	inset: -5px;
	opacity: 0;
	padding: 0;
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

/* ——— BONUS MAP — gold + light blue ——— */
#divAppMenu .btnPromoBonusMap::before
{
	background: conic-gradient(
		from var(--promo-btn-angle) at 50% 50%,
		rgba(0,0,0,0) 0%, rgba(0,0,0,0) 44%,
		#ddaa00 48.5%, #88ddff 50%, #ddaa00 51.5%,
		rgba(0,0,0,0) 56%, rgba(0,0,0,0) 100%
	);
	border-radius: 13px;
	content: '';
	display: block;
	inset: -3px;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	opacity: 0;
	padding: 3px;
	pointer-events: none;
	position: absolute;
	z-index: 2;
}
#divAppMenu .btnPromoBonusMap::after
{
	background: conic-gradient(
		from var(--promo-btn-angle) at 50% 50%,
		rgba(0,0,0,0) 0%, rgba(0,0,0,0) 38%,
		#bb8800 47%, #55bbff 50%, #bb8800 53%,
		rgba(0,0,0,0) 62%, rgba(0,0,0,0) 100%
	);
	border-radius: 14px;
	content: '';
	display: block;
	filter: blur(20px);
	inset: -5px;
	opacity: 0;
	padding: 0;
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

/* ——— CHALLENGES — pink + white ——— */
#divAppMenu .btnPromoChallenges::before
{
	background: conic-gradient(
		from var(--promo-btn-angle) at 50% 50%,
		rgba(0,0,0,0) 0%, rgba(0,0,0,0) 44%,
		#ff44aa 48.5%, #ffffff 50%, #ff44aa 51.5%,
		rgba(0,0,0,0) 56%, rgba(0,0,0,0) 100%
	);
	border-radius: 13px;
	content: '';
	display: block;
	inset: -3px;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	opacity: 0;
	padding: 3px;
	pointer-events: none;
	position: absolute;
	z-index: 2;
}
#divAppMenu .btnPromoChallenges::after
{
	background: conic-gradient(
		from var(--promo-btn-angle) at 50% 50%,
		rgba(0,0,0,0) 0%, rgba(0,0,0,0) 38%,
		#ff2299 47%, #ffccee 50%, #ff2299 53%,
		rgba(0,0,0,0) 62%, rgba(0,0,0,0) 100%
	);
	border-radius: 14px;
	content: '';
	display: block;
	filter: blur(20px);
	inset: -5px;
	opacity: 0;
	padding: 0;
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

/* ——— LEADERBOARD — green + white ——— */
#divAppMenu .btnMenuStroke
{
	border-radius: inherit;
	inset: 0;
	pointer-events: none;
	position: absolute;
}

#divAppMenu #btnLeaderboard .btnMenuStroke::before
{
	background: conic-gradient(
		from var(--promo-btn-angle) at 50% 50%,
		rgba(0,0,0,0) 0%, rgba(0,0,0,0) 44%,
		#00bb44 48.5%, #ccffdd 50%, #00bb44 51.5%,
		rgba(0,0,0,0) 56%, rgba(0,0,0,0) 100%
	);
	border-radius: 12px;
	content: '';
	display: block;
	inset: -3px;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	opacity: 0;
	padding: 3px;
	pointer-events: none;
	position: absolute;
	z-index: 2;
}
#divAppMenu #btnLeaderboard .btnMenuStroke::after
{
	background: conic-gradient(
		from var(--promo-btn-angle) at 50% 50%,
		rgba(0,0,0,0) 0%, rgba(0,0,0,0) 38%,
		#008833 47%, #88ffaa 50%, #008833 53%,
		rgba(0,0,0,0) 62%, rgba(0,0,0,0) 100%
	);
	border-radius: 15px;
	content: '';
	display: block;
	filter: blur(20px);
	inset: -5px;
	opacity: 0;
	padding: 0;
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

/* ——— LUCKY STREAK — orange + white ——— */
#divAppMenu #btnLuckyStreakChallenge .btnMenuStroke::before
{
	background: conic-gradient(
		from var(--promo-btn-angle) at 50% 50%,
		rgba(0,0,0,0) 0%, rgba(0,0,0,0) 44%,
		#ff7700 48.5%, #ffffff 50%, #ff7700 51.5%,
		rgba(0,0,0,0) 56%, rgba(0,0,0,0) 100%
	);
	border-radius: 12px;
	content: '';
	display: block;
	inset: -3px;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	opacity: 0;
	padding: 3px;
	pointer-events: none;
	position: absolute;
	z-index: 2;
}
#divAppMenu #btnLuckyStreakChallenge .btnMenuStroke::after
{
	background: conic-gradient(
		from var(--promo-btn-angle) at 50% 50%,
		rgba(0,0,0,0) 0%, rgba(0,0,0,0) 38%,
		#cc5500 47%, #ffcc88 50%, #cc5500 53%,
		rgba(0,0,0,0) 62%, rgba(0,0,0,0) 100%
	);
	border-radius: 15px;
	content: '';
	display: block;
	filter: blur(20px);
	inset: -5px;
	opacity: 0;
	padding: 0;
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

#divAppMenu .btnPromotionButton span
{
	display:inline-block;
	margin-top:8px;
}

#divAppMenu #divMenuItems
{
	clear:both;
	padding-bottom:80px;
}

#divAppMenu #divMenuItems a
{
	text-decoration:none;
}

#divAppMenu .divMenuItemContianer
{
	position:relative;
}

#divAppMenu .divMenuItem
{
	margin-top:15px;
	position:relative;
}

#divAppMenu .divSubmenuItems
{
	display:none;
	position:relative;
}

#divAppMenu .expanded .divSubmenuItems
{
	display:block;
}

#divAppMenu .btnExpandCollapse
{
	cursor:pointer;
	height:40px;
	position:absolute;
	right:20px;
	top:10px;
	width:40px;
}

#divAppMenu .btnExpandCollapse:before
{
	background-color:#ffffff;
	content:"";
	height:2px;
	position:absolute;
	right:12px;
	top:19px;
	transition:background-color 0.25s, box-shadow 0.25s;
	width:16px;
}

#divAppMenu .btnExpandCollapse:after
{
	background-color:#ffffff;
	content:"";
	height:2px;
	position:absolute;
	right:12px;
	top:19px;
	transform:rotate(90deg);
    transition:background-color 0.25s, box-shadow 0.25s, transform 0.25s;
	width:16px;
}

#divAppMenu .expanded .btnExpandCollapse:after
{
	transform:rotate(0deg);
}

#divAppMenu .btnExpandCollapse:hover:before, #divAppMenu .btnExpandCollapse:focus:before, #divAppMenu .btnExpandCollapse:hover:after, #divAppMenu .btnExpandCollapse:focus:after
{
	background-color:#cffdff;
    box-shadow:0px 0px 5px #01eff9;
}

#divAppMenu .divSubmenuItem
{
	position:relative;
}

#divAppMenu .divMenuItem.clickable, #divAppMenu .divSubmenuItem.clickable
{
	cursor:pointer;
}

#divAppMenu .divMenuItem.clickable:before, #divAppMenu .divSubmenuItem.clickable:before
{
	background:linear-gradient(90deg, #6b42de, #966dff);
	bottom:0px;
	content:"";
	display:block;
	left:0px;
	opacity:0;
	position:absolute;
	right:0px;
	top:0px;
	transition:opacity 0.25s;
	z-index:-1;
}

#divAppMenu .divMenuItem.clickable:hover:before, #divAppMenu .divMenuItem.clickable:focus:before, #divAppMenu .divMenuItem.clickable.selected:before, #divAppMenu .divSubmenuItem.clickable:hover:before, #divAppMenu .divSubmenuItem.clickable:focus:before, #divAppMenu .divSubmenuItem.clickable.selected:before
{
	opacity:1;
}

.signedIn #divAppMenu .divSubmenuItem.menuItemLobbySignedOut
{
	display:none;
}

#divAppMenu .divMenuItem.menuItemWelcomePackage, #divAppMenu .divSubmenuItem.menuItemWelcomePackage
{
	display:none;
}

.showWelcomePackage #divAppMenu .divMenuItem.menuItemWelcomePackage, .showWelcomePackage #divAppMenu .divSubmenuItem.menuItemWelcomePackage
{
	display:block;
}

#divAppMenu .divSubmenuItem.menuItemFullOpacity .divSubmenuItemIcon
{
	opacity:1;
}

#divAppMenu .divMenuItemLabel
{
	color:#ffffff;
	font-family:"JostBold", sans-serif;
	font-size:22px;
	line-height:30px;
	overflow:hidden;
	padding:15px 35px;
	position:relative;
	text-overflow:ellipsis;
	white-space:nowrap;
}

#divAppMenu .divSubmenuItemLabel
{
	color:#888b90;
	font-size:20px;
	line-height:30px;
	overflow:hidden;
	padding:15px 35px 15px 80px;
	position:relative;
	text-overflow:ellipsis;
	transition:color 0.25s;
	white-space:nowrap;
}

#divAppMenu .divSubmenuItem.clickable:hover .divSubmenuItemLabel, #divAppMenu .divSubmenuItem.clickable:focus .divSubmenuItemLabel, #divAppMenu .divSubmenuItem.clickable.selected .divSubmenuItemLabel
{
	color:#ffffff;
}

#divAppMenu .divSubmenuItemIcon
{
	background-position:center;
	background-repeat:no-repeat;
	background-size:100%;
	left:35px;
	height:20px;
	opacity:0.4;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	transition:opacity 0.25s;
	width:20px;
}

#divAppMenu .divSubmenuItem.clickable:hover .divSubmenuItemIcon, #divAppMenu .divSubmenuItem.clickable:focus .divSubmenuItemIcon, #divAppMenu .divSubmenuItem.clickable.selected .divSubmenuItemIcon
{
	opacity:1;
}

#divAppMenu .divMenuItemHr
{
	background-color:#6a6a6a;
	height:2px;
	margin:15px 35px;
}

#divAppMenu .spnSubmenuItemBonusCount
{
    background-color:#ee0000;
    border-radius:50%;
    color:#ffffff;
	display:none;
    font-size:9px;
    height:14px;
    line-height:14px;
	margin:-5px 0px 0px 5px;
    padding: 2px 7px;
    position:absolute;
    text-align:center;
}

#divAppMenu .spnSubmenuItemBonusCount.show
{
	display:inline;
}

#divAppMenu .spnTournamentsAvailable
{
    background-color:#ee0000;
    border-radius:50%;
    color:#ffffff;
    font-size:9px;
    height:14px;
    line-height:14px;
	margin:-5px 0px 0px 5px;
    padding: 2px 7px;
    position:absolute;
    text-align:center;
}

/* ANIMATION KEY FRAMES */
@keyframes showMenu
{
	0%   {opacity:0;}
	1%   {opacity:0;}
	100% {opacity:1;}
}

@keyframes skywarsMenuAnimation
{
	0%	 {transform:translate(0%, 0px) rotate(0deg);}
	10%  {transform:translate(calc(0% - 1px), -1px) rotate(-1deg);}
	20%  {transform:translate(0%, -1px) rotate(1deg);}
	30%  {transform:translate(calc(0% + 1px), 0px) rotate(0deg);}
	40%  {transform:translate(0%, 1px) rotate(1deg);}
	50%  {transform:translate(calc(0% - 1px), 1px) rotate(-1deg);}
	60%  {transform:translate(0%, 0px) rotate(0deg);}
	70%  {transform:translate(calc(0% + 1px), 0px) rotate(-1deg);}
	80%  {transform:translate(0%, -1px) rotate(1deg);}
	90%  {transform:translate(calc(0% - 1px), -1px) rotate(0deg);}
	100% {transform:translate(0%, 0px) rotate(-1deg);}
}

@keyframes menuNeonText
{
	0%   {text-shadow:0px 0px 1px #000000;}
	1%   {text-shadow:0px 0px 1px #000000, 0px 0px 5px #01eff9, 0px 0px 5px #01eff9, 0px 0px 10px #01eff9;}
    5%   {text-shadow:0px 0px 1px #000000, 0px 0px 5px #01eff9, 0px 0px 5px #01eff9, 0px 0px 10px #01eff9;}
    6%   {text-shadow:0px 0px 1px #000000;}
    9%   {text-shadow:0px 0px 1px #000000;}
    10%  {text-shadow:0px 0px 1px #000000, 0px 0px 5px #01eff9, 0px 0px 5px #01eff9, 0px 0px 10px #01eff9;}
    16%  {text-shadow:0px 0px 1px #000000, 0px 0px 5px #01eff9, 0px 0px 5px #01eff9, 0px 0px 10px #01eff9;}
    17%  {text-shadow:0px 0px 1px #000000;}
    20%  {text-shadow:0px 0px 1px #000000;}
    21%  {text-shadow:0px 0px 1px #000000, 0px 0px 5px #01eff9, 0px 0px 5px #01eff9, 0px 0px 10px #01eff9;}
    59%  {text-shadow:0px 0px 1px #000000, 0px 0px 5px #01eff9, 0px 0px 5px #01eff9, 0px 0px 10px #01eff9;}
    60%  {text-shadow:0px 0px 1px #000000;}
    64%  {text-shadow:0px 0px 1px #000000;}
	65%  {text-shadow:0px 0px 1px #000000, 0px 0px 5px #01eff9, 0px 0px 5px #01eff9, 0px 0px 10px #01eff9;}
    100% {text-shadow:0px 0px 1px #000000, 0px 0px 5px #01eff9, 0px 0px 5px #01eff9, 0px 0px 10px #01eff9;}
}

@keyframes menuNeonTextPink
{
	0%   {text-shadow:0px 0px 1px #000000;}
	1%   {text-shadow:0px 0px 1px #000000, 0px 0px 5px #e600ff, 0px 0px 5px #e600ff, 0px 0px 10px #e600ff;}
    5%   {text-shadow:0px 0px 1px #000000, 0px 0px 5px #e600ff, 0px 0px 5px #e600ff, 0px 0px 10px #e600ff;}
    6%   {text-shadow:0px 0px 1px #000000;}
    9%   {text-shadow:0px 0px 1px #000000;}
    10%  {text-shadow:0px 0px 1px #000000, 0px 0px 5px #e600ff, 0px 0px 5px #e600ff, 0px 0px 10px #e600ff;}
    16%  {text-shadow:0px 0px 1px #000000, 0px 0px 5px #e600ff, 0px 0px 5px #e600ff, 0px 0px 10px #e600ff;}
    17%  {text-shadow:0px 0px 1px #000000;}
    20%  {text-shadow:0px 0px 1px #000000;}
    21%  {text-shadow:0px 0px 1px #000000, 0px 0px 5px #e600ff, 0px 0px 5px #e600ff, 0px 0px 10px #e600ff;}
    59%  {text-shadow:0px 0px 1px #000000, 0px 0px 5px #e600ff, 0px 0px 5px #e600ff, 0px 0px 10px #e600ff;}
    60%  {text-shadow:0px 0px 1px #000000;}
    64%  {text-shadow:0px 0px 1px #000000;}
	65%  {text-shadow:0px 0px 1px #000000, 0px 0px 5px #e600ff, 0px 0px 5px #e600ff, 0px 0px 10px #e600ff;}
    100% {text-shadow:0px 0px 1px #000000, 0px 0px 5px #e600ff, 0px 0px 5px #e600ff, 0px 0px 10px #e600ff;}
}
/* ——— Hide pop-in targets until animation plays ——— */
#divAppMenu #btnLeaderboard,
#divAppMenu #btnSkywars,
#divAppMenu #btnLuckyStreakChallenge,
#divAppMenu #divBirthdayBonusButton,
#divAppMenu #divVipClaimedPromotionsButton,
#divAppMenu #divPromotionButtons .btnPromotionButton,
#divAppMenu #divMenuItems
{
	opacity: 0;
}

/* ——— Menu item pop-in entrance animation ——— */
@keyframes menuItemPopIn {
	0%   { opacity: 0; transform: scale(0.8) translateY(10px); }
	100% { opacity: 1; transform: scale(1) translateY(0); }
}

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

#divAppMenu.menuPopIn #btnLeaderboard { animation: menuItemPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.00s both; }
#divAppMenu.menuPopIn #btnSkywars { animation: menuItemPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.07s both; }
#divAppMenu.menuPopIn #btnLuckyStreakChallenge { animation: menuItemPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.14s both; }
#divAppMenu.menuPopIn #divBirthdayBonusButton { animation: menuItemPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.20s both; }
#divAppMenu.menuPopIn #divVipClaimedPromotionsButton { animation: menuItemPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s both; }
#divAppMenu.menuPopIn #divPromotionButtons .btnPromotionButton:nth-child(1) { animation: menuItemPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.30s both; }
#divAppMenu.menuPopIn #divPromotionButtons .btnPromotionButton:nth-child(2) { animation: menuItemPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.37s both; }
#divAppMenu.menuPopIn #divPromotionButtons .btnPromotionButton:nth-child(3) { animation: menuItemPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.44s both; }
#divAppMenu.menuPopIn #divMenuItems { animation: menuItemFadeUp 0.5s ease-out 0.50s both; }

/* ——— After pop-in completes: lock visible + clear animation (placed after menuPopIn rules so it wins the specificity tie by CSS order) ——— */
#divAppMenu.menuAnimated #btnLeaderboard,
#divAppMenu.menuAnimated #btnSkywars,
#divAppMenu.menuAnimated #btnLuckyStreakChallenge,
#divAppMenu.menuAnimated #divBirthdayBonusButton,
#divAppMenu.menuAnimated #divVipClaimedPromotionsButton,
#divAppMenu.menuAnimated #divMenuItems
{
	animation: none;
	opacity: 1;
}
#divAppMenu.menuPopIn.menuAnimated #divPromotionButtons .btnPromotionButton
{
	animation: none;
	opacity: 1;
}

/* Featured border + header fade in WITH the pop-in. Hidden until then so the
   empty bordered box never shows on page load before the buttons are revealed. */
#divAppMenu #divFeaturedSection > .divFeaturedBorder,
#divAppMenu .divFeaturedHeaderText
{
	opacity: 0;
}
#divAppMenu.menuPopIn #divFeaturedSection > .divFeaturedBorder
{
	animation: menuItemFadeUp 0.5s ease-out 0s both;
}
/* Header keeps its translateX(-50%) centering while fading in (a plain
   translateY keyframe would clobber the transform and push it out of frame). */
#divAppMenu.menuPopIn .divFeaturedHeaderText
{
	animation: menuFeaturedHeaderIn 0.5s ease-out 0s both;
}
#divAppMenu.menuAnimated #divFeaturedSection > .divFeaturedBorder,
#divAppMenu.menuAnimated .divFeaturedHeaderText
{
	animation: none;
	opacity: 1;
}

@keyframes menuFeaturedHeaderIn {
	0%   { opacity: 0; transform: translateX(-50%) translateY(10px); }
	100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes promoBtnBouncePop {
	0%   { opacity: 1; transform: translateY(0);    }
	30%  { opacity: 1; transform: translateY(-3px); }
	60%  { opacity: 1; transform: translateY(0);    }
	80%  { opacity: 1; transform: translateY(-2px); }
	100% { opacity: 1; transform: translateY(0);    }
}

@keyframes promoBtnStrokeLifecycle {
	0%   { opacity: 0; }
	10%  { opacity: 1; }
	80%  { opacity: 1; }
	100% { opacity: 0; }
}

#divAppMenu #divPromotionButtons .btnPromotionButton.btnPromoSportsPredictor.strokePlay,
#divAppMenu #divPromotionButtons .btnPromotionButton.btnPromoBonusMap.strokePlay,
#divAppMenu #divPromotionButtons .btnPromotionButton.btnPromoChallenges.strokePlay,
#divAppMenu #btnLeaderboard.strokePlay,
#divAppMenu #btnLuckyStreakChallenge.strokePlay
{
	animation: promoBtnBouncePop 1s ease-in-out 0s infinite;
}

#divAppMenu .btnPromoSportsPredictor.strokePlay::before,
#divAppMenu .btnPromoBonusMap.strokePlay::before,
#divAppMenu .btnPromoChallenges.strokePlay::before,
#divAppMenu #btnLeaderboard.strokePlay .btnMenuStroke::before,
#divAppMenu #btnLuckyStreakChallenge.strokePlay .btnMenuStroke::before
{
	animation:
		promoBtnStrokeSpin 2s linear 0s infinite,
		promoBtnStrokeLifecycle 5s ease-in-out 0s 1 forwards;
}

#divAppMenu .btnPromoSportsPredictor.strokePlay::after,
#divAppMenu .btnPromoBonusMap.strokePlay::after,
#divAppMenu .btnPromoChallenges.strokePlay::after,
#divAppMenu #btnLeaderboard.strokePlay .btnMenuStroke::after,
#divAppMenu #btnLuckyStreakChallenge.strokePlay .btnMenuStroke::after
{
	animation:
		promoBtnStrokeSpin 2s linear 0s infinite,
		promoBtnStrokeLifecycle 5s ease-in-out 0s 1 forwards;
}

/* Perf: keep the comet streak + blurred halo pseudo-layers out of the render
   tree while a promo button is idle. Only the single active .strokePlay button
   paints them, so no hidden GPU blur layers sit behind the menu. */
#divAppMenu .btnPromotionButton:not(.strokePlay)::before,
#divAppMenu .btnPromotionButton:not(.strokePlay)::after
{
	display: none;
}
/* MEDIA QUERIES */
@media (max-width: 1400px)
{
	#divAppMenu .divMenuContainer
	{
		width:320px;
	}
}

@media (max-width: 1200px)
{
	/* HEADER MENU */
	#divAppHeader #btnHeaderMenu
	{
		display:inline-block;
		margin:5px 0px 0px 15px;
	}

	/* MAIN MENU */
	#divAppMenu
	{
		left:-340px;
	}

	.hideMenu #divAppMenu
	{
		left:0px;
	}

	.hideMenu #divAppMenu #divMenuOverlay
	{
		animation:showMenu 0.25s;
		display:block;
		opacity:1;
	}

}

@media (max-width: 600px)
{
	/* HEADER MENU */
	#divAppHeader #btnHeaderMenu
	{
		margin:5px 0px 0px 10px;
	}
}

@media (max-width: 540px)
{
	/* MAIN MENU */
	#divAppMenu .divMenuContainer
	{
		width:300px;
	}

	#divAppMenu .divMenuHeader
	{
		height:80px;
	}

	#divAppMenu #imgMenuLogo
	{
		left:30px;
		top:15px;
		width:134px;
	}

	#divAppMenu #btnCloseMenu
	{
		right:20px;
		top:20px;
	}

	#divAppMenu #btnLeaderboard
	{
		margin:10px 0px 10px 30px;
		padding-top:90px;
		width:calc(50% - 35px);
	}

	#divAppMenu #btnSkywars, #divAppMenu #btnLuckyStreakChallenge
	{
		height:55px;
		margin:10px 30px 10px 10px;
		padding-top:105px;
		width:calc(50% - 35px);
	}

	#divAppMenu #btnLuckyStreakChallenge:after
	{
		height:29px;
	}

	#divAppMenu .btnPromotionButton
	{
		margin:10px 30px 10px;
	}

	#divAppMenu .divMenuItem
	{
		margin-top:0px;
	}

	#divAppMenu .divMenuItemLabel
	{
		font-size:18px;
		padding:10px 35px;
	}

	#divAppMenu .divSubmenuItemLabel
	{
		font-size:16px;
		line-height:20px;
		padding:10px 35px 10px 70px;
	}

	#divAppMenu .btnExpandCollapse
	{
		top:5px;
	}
}