@font-face{font-family:'Gilgan';src:url(../../fonts/gilgan/gilgan.otf)}
@font-face{font-family:'ChakraPetch Bold';src:url(../../fonts/chakra-petch/ChakraPetch-Bold.ttf)}
.scrollbar-white{scrollbar-color:rgba(255,255,255,0.01) transparent;scrollbar-width:thin}
.scrollbar-white:hover{scrollbar-color:rgba(255,255,255,0.5) transparent}
.scrollbar-white::-webkit-scrollbar{width:6px;height:6px;background-color:transparent}
.scrollbar-white::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.01);border-radius:2em}
.scrollbar-white:hover::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.5)}
html,body{background-color:#021115;overflow:hidden;text-shadow:1px 1px rgba(0,0,0,0.05)}
::placeholder{color:#fff;opacity:1}
:-ms-input-placeholder{color:#fff}
::-ms-input-placeholder{color:#fff}
a,button{-webkit-tap-highlight-color:transparent}
#main{background-color:#2B3D4B;overflow:hidden;max-width:1920px;margin:0 auto}
#header{height:60px;padding:0}
#header .nav-logo{margin:10px 20px;float:left;height:40px;padding:0;position:relative}
#header .nav-logo a{text-decoration:none;margin:0;padding:0;height:40px;position:absolute;left:0;top:10px}
#header .nav-logo img{vertical-align:top}
#header .quick-alert{float:right;color:orange;margin:15px 10px;font:italic 12px/30px Arial}
#header .search-box{float:right;height:30px;margin:15px 26px 15px 10px;border-radius:0;width:180px;position:relative}
#header .search-box input[type="text"]{width:calc(100% - 40px);margin:0;background-color:transparent;border:0;color:#fff;font:12px/30px Arial;padding:0 10px;outline:none}
#header .search-box input[type="submit"]{width:30px;margin:0;background-color:transparent;border:0;color:#fff;font:12px/30px Arial;padding:0 10px;outline:none}
#search_box{clip-path:polygon(5% 0%,95% 0%,100% 50%,95% 100%,5% 100%,0% 50%);background-color:rgba(255,255,255,0.1);padding:0 10px;border-top:1px solid transparent;border-bottom:1px solid transparent}
#search_box:hover{border-top:1px solid #ff0;border-bottom:1px solid #ff0}
#header .search-box:active,#header .search-box:hover{filter:drop-shadow(0 0 10px yellow) drop-shadow(0 0 20px yellow) drop-shadow(0 0 50px yellow)}
#nav{width:60px;height:calc(100vh - 60px);border-right:1px solid transparent;border-image:linear-gradient(0deg,transparent,transparent,rgba(255,255,255,0.3),transparent,transparent);border-image-slice:1;position:relative;float:left}
#nav .nav-content{position:absolute;top:50%;transform:translateY(-50%);width:100%}
#nav .nav-list{display:block;font:13px/30px Arial;color:transparent;text-decoration:none;text-align:center;padding:5px 20px;margin:30px 0;height:33px}
#nav .nav-list i{font-size:26px;color:#fff;font-weight:700;width:22px;font-style:normal}
#nav .nav-list:not(.nav-actived):hover i{color:#ff0}
.nav-actived{border-left:2px solid #e08421;box-sizing:border-box;text-shadow:0 0 50px #e08421,0 0 100px #e08421,0 0 150px #e08421,0 0 200px #e08421;cursor:default}
#content{overflow-y:auto;float:right;width:calc(100% - 150px);height:calc(100vh - 60px);padding:0 50px;box-sizing:border-box;min-height: calc(100vh - 60px);}
.large-title{font:50px/50px Arial;color:#fff}
.medium-title{font:Bold 20px/50px Arial;color:#fff;float:left}
.medium-title b{font:12px/40px Arial}
.view-more-title{font:12px/50px Arial;text-decoration:none;color:rgba(255,255,255,0.6);float:right;margin-top:10px}
.view-more-title:hover{color:rgba(255,255,255,0.9);text-shadow:0 0 10px white,0 0 20px #fff,0 0 40px #fff,0 0 80px #fff}
.more-title{float:left;margin:0 10px 0 0;padding:0;border:0;font:20px/30px Arial;filter:drop-shadow(0 0 3px rgba(255,255,255,0.3)) drop-shadow(0 0 6px rgba(255,255,255,0.1))}
.more-title b{clip-path:polygon(8% 0%,92% 0%,100% 50%,92% 100%,8% 100%,0% 50%);background-color:#EEE;padding:5px 15px;color:#555}
.tiny-title{background-color:rgba(255,255,255,0.2);border-bottom:1px solid transparent;border-image:linear-gradient(360deg,transparent,transparent,rgba(255,255,255,0.3),transparent,transparent);border-image-slice:1;color:#fff;font:12px/26px Arial;float:left;margin:2px 0 2px -20px;padding:0 20px 0 16px;clip-path:polygon(0% 0%,90% 2%,100% 50%,90% 94%,0% 90%);text-shadow:1px 1px 2px rgba(255,255,255,0.1),1px 1px 10px rgba(255,255,255,0.3),1px 1px 15px rgba(255,255,255,0.5)}
.home-editors-pick{display:none}
.small-info{margin:10px 0;text-align:center;float:left;padding:0;background:rgba(0,0,0,0.2);border-radius:5px}
.small-info li{display:inline-block;vertical-align:top;margin:5px 20px}
.small-info b{display:block;font:Bold 12px/30px Arial;color:rgba(255,255,255,0.6);text-transform:uppercase}
.small-info span{color:rgba(255,255,255,0.9);font:12px/26px Arial}
.home-item{overflow:hidden;overflow-x:auto;width:100%;float:left;margin-top:calc(100vh - 500px);white-space:nowrap;text-align:center;margin-bottom:20px;user-select:none;scroll-snap-type:x mandatory;white-space:nowrap;scroll-padding-left:10px}
.home-item:active{cursor:-webkit-grabbing;cursor:grabbing}
.view-list{white-space:normal!important;overflow:initial}
.item{width:120px;height:150px;display:inline-block;vertical-align:top;margin:10px;text-align:center;font:Bold 12px/15px Arial;color:#fff;text-decoration:none;white-space:normal;border-radius:10px;scroll-snap-align:start}
.item img{width:100%;height:120px;border-radius:15px;transition:all 100ms linear;margin-bottom:10px;border:3px solid rgba(255,255,255,0.05)}
.item:hover:not(.actived) img{border:3px solid #ff0;box-shadow:0 0 20px rgba(255,255,255,0.2),0 0 50px rgba(255,255,255,0.2),0 0 100px rgba(255,255,255,0.2),0 0 200px rgba(255,255,255,0.2)}
.item.actived{transform:scale(1,1);position:relative;overflow:visible!important;margin-top:10px}
.item.actived::after{position:absolute;left:50%;top:-19px;transform:translateX(-50%);content:"";border:10px solid transparent;border-bottom-color:#e08421}
.item.actived img{border:3px solid #e08421;border-radius:20px}
.more-content{display:flex;justify-content:space-around;margin:20px;gap:30px;flex-wrap:wrap}
.more-content .item-info{height:100px;margin:10px}
.more-content .item-info b{display:block;border-bottom:2px solid rgba(255,255,255,0.5);color:rgba(255,255,255,0.99);text-transform:uppercase;text-shadow:1px 1px 5px rgba(0,0,0,0.05),1px 1px 10px rgba(0,0,0,0.1),1px 1px 15px rgba(0,0,0,0.3);font:18px/30px Arial}
.more-content .item-info span{color:rgba(255,255,255,0.6);font:15px/30px Arial;display:block}
.about-us{margin:30px;font:15px/20px Arial;color:#fff}
.tag-list{text-align:center;padding:10px}
.tag{display:inline-block;vertical-align:top;font:12px/20px Arial;color:#fff;text-decoration:none;border-radius:0;padding:0 10px;margin:5px 2px;position:relative;-webkit-tap-highlight-color:transparent}
.tag::before{content:"";position:absolute;left:0;top:0;right:0;bottom:0;background-color:rgba(255,255,255,0.3);clip-path:polygon(5px 0%,calc(100% - 5px) 0%,100% 50%,calc(100% - 5px) 100%,5px 100%,0% 50%);border-top:1px solid transparent;border-bottom:1px solid transparent}
.tag:hover{filter:drop-shadow(0 0 5px yellow) drop-shadow(0 0 10px yellow) drop-shadow(0 0 20px yellow)}
.tag:hover::before{border-top-color:#ff0;border-bottom-color:#ff0}
.how-to-play-video{min-height:400px;max-width:100%;margin:10px auto;background:#000;border-radius:5px}
nav{margin:0;float:right;min-width:160px}
.pagination,.pagination li{list-style:none;padding:0;margin:0}
.page-link{font:12px/30px Arial;display:block;float:left;background-color:#ff0;border-radius:5px;margin:0;text-decoration:none;color:#333;border-radius:0;padding:1px 10px;box-shadow:0 4px rgba(0,0,0,0.3);font-weight:700}
span.page-link{background:rgba(0,0,0,0.1);color:rgba(255,255,255,0.5);box-shadow:none}
.page-link{position:relative;margin:0 10px!important;-webkit-tap-highlight-color:transparent}
.page-link::before,.page-link::after{content:"";position:absolute;left:-10px;top:0;border:15px solid transparent;border-right-color:#ff0;border-left-width:5px;border-right-width:5px}
.page-link::after{right:-10px;left:auto;border-right-color:transparent;border-left-color:#ff0}
span.page-link::before{border-right-color:rgba(0,0,0,0.1)}
span.page-link::after{border-left-color:rgba(0,0,0,0.1)}
.play-page .large-title,.back-button,#play_game{font:Bold 22px/30px Arial;float:left;margin:5px 0 10px;padding:0 10px;color:#fff}
.play-page .large-title{border-top:1px solid transparent;border-bottom:1px solid transparent;border-image:linear-gradient(90deg,rgba(255,255,255,0.3),transparent);border-image-slice:1;height:30px;max-width:calc(100% - 80px);overflow:hidden;padding-right:30px}
/* .right-ad-box{float:left;width:320px;height:620px;display:none;padding:10px} */
.play_box__playnow{
text-decoration:none;position:relative;font-size:20px;height:30px;filter:drop-shadow(0 0 5px #186305) drop-shadow(0 0 10px #186305);font-family:'ChakraPetch Bold';float: left;;text-align: center}
.play_box__playnow b{
clip-path:polygon(10px 0%,calc(100% - 10px) 0%,100% 50%,calc(100% - 10px) 100%, 10px 100%,0% 50%);display:block;border-image:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);border-image-slice:1;background-color:green;background-image:linear-gradient(to right bottom,#186305 26%,#1a9105 27%);padding:0 20px;position:relative;border-top:1px solid transparent;border-bottom:1px solid transparent}
.play_box__playnow:hover{
filter:drop-shadow(0 0 5px #1a9105) drop-shadow(0 0 20px #1a9105)}
.play_box__playnow:hover b{
border-top-color:#ff0;border-bottom-color:#ff0}
.play_box__fullscreen_button{
float: left;text-decoration: none;color: white;font:12px/20px Arial;background-color: rgba(255,255,255,0.3);margin: 10px 0 6px -10px;padding: 0px 20px;clip-path:polygon(0% 0%,calc(100% - 6px) 0%,100% 50%, calc(100% - 6px) 100%,0% 100%, 6px 50%);}

.playpage__leftbox{float: left;width: 100%;}
.playpage__rightbox{display: none; width: 300px; height: 250px; float: right; background-color: rgba(0,0,0,0.1);border-radius: 5px;overflow: hidden;}
@media (min-width:1400px) and (max-width:1700px){
	.playpage__rightbox{display: block; width: 160px!important; height: 600px;}
	.playpage__leftbox{width: calc(100% - 170px);}
}
@media (min-width:1701px){
	.playpage__rightbox{display: block; width: 300px!important; height: 600px;}
	.playpage__leftbox{width: calc(100% - 310px);}
}
.playpage-left-nav{height: 40px;display: flex;background-color: #01121b; clip-path: polygon(0% 0%, calc(100% - 30px) 0%, 100% 100%, 0% 100%);border-radius: 5px;border-bottom: 1px solid rgba(255,255,255,0.05);}
.playpage-left-nav > *{align-items: start;margin: 5px 0;padding: 0; font-weight: 500;font-size: 20px;line-height: 30px;color: white;padding: 0;}
.playpage-left-nav h1{padding:0 30px 0 5px;}
@media screen and (max-width: 601px){
	.playpage-left-nav h1{font-size: 12px;}
}
.playpage-nav-back{text-decoration: none;font:Bold 12px/30px Arial;margin: 5px;background-color: #FFF; clip-path: polygon(0% 0%, calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) 100%, 0% 100%, 0% 50%); padding:0 20px;border-radius: 4px  0 0 4px;color:#6b3902;transition: color 300ms linear}
.playpage-nav-back:hover{background-color: #e7861d; color:#FFF}

.playpage-right-nav{height: 30px; padding-left: 20px; margin: 5px; margin-left: -20px; margin-right: 0;color:white;font:12px/30px Arial;text-align: center;cursor: pointer;position: relative;-webkit-tap-highlight-color:transparent}
.playpage-right-nav::after{clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 23px 100%); background-color: #043147;content: attr(data-title); position: absolute; left: 0; top:0; right: 0; bottom: 0; border-radius: 2px 5px 5px 0}
.playpage-right-nav-sub{
	position: absolute;
	top:30px;
	right:0;
	z-index: 999;
	display: none;
}
.playpage-right-nav:hover .playpage-right-nav-sub, .playpage-right-nav:active .playpage-right-nav-sub{
	display: block;
}
.right-nav-sub-content{
	margin: 10px 5px 10px 10px;
	background-color: #054c70;
	border-radius: 10px 5px 5px 5px;
	min-width: 100px;
	position: relative;
}
.right-nav-sub-content::before{
	position: absolute;
	top:-12px;
	right: 10px;
	content: "";
	border: 6px solid transparent;
	border-top-color: #043147;
	border-bottom-color: #054c70;
}

.right-nav-sub-content::after{
	position: absolute;
	top:-12px;
	left: 50%;
	transform: translateX(-50%);
	content: "";
	border: 6px solid transparent;
	border-top-color: #043147;
	border-bottom-color: #054c70;
}
.right-nav-sub-content button, .right-nav-sub-content a{
	border: 0;
	padding: 0 20px;
	margin: 0 5%;
	font:12px/33px Arial;
	border-bottom: 1px solid rgba(0,0,0,0.1);
	box-shadow: 0 1px rgba(255,255,255,0.1);
	display: block;
	background-color: transparent;
	color: white;
	cursor: pointer;
	width: 90%;
	white-space: nowrap;
	outline: none;
	text-align: left;
}
.right-nav-sub-content button:hover, .right-nav-sub-content a:hover{
	color:#CCC;
}

.playpage-body{min-height: 400px;background-color: #011722;position: relative;border-radius:5px;padding: 0;overflow: hidden;background-image:radial-gradient(circle,#021d2b 0%,#000 100%,#000 100%)}
.playpage-body iframe{margin: 0;float: left;}
@media screen and (min-height: 600px) and (min-width:1400px) {
	.playpage-body{min-height: 560px;}
}
.playpage-body .play_box{position: absolute;left:50%;top:50%; transform: translate(-50%, -50%);}		
@media (max-width:601px) {
	#play_game{padding:0;}
	.play_box, .play_box__playnow{white-space: nowrap;}
}

@media (max-width:1300px) {
#content{width:calc(100% - 60px);margin-top:0;height:calc(100vh - 0px)}
.small-info li{display:block;float:left}
}
@media (min-width:1300px) {
#nav{width:150px}
#nav .nav-list{color:rgba(255,255,255,0.6);height:66px;margin:15px 0}
#nav .nav-list:not(.nav-actived):hover{color:#ff0}
#nav .nav-actived i{color:#e08421}
#nav .nav-actived{color:#e08421}
}
@media (max-width:1000px) {
.home-item{margin-top:20px}
}
@media (min-width:1400px) {
/* .right-ad-box{display:block}
#content{width:calc(100% - 480px);float:left} 
.goto-top-btn{right:350px!important}*/
}
.medium-title{float:left;padding:0 10px;line-height:39px;position:relative;margin:0;padding-right:30px;background-color:transparent}
.medium-title::before{content:"";position:absolute;left:0;top:0;right:0;bottom:0;color:#fff;background-color:rgba(255,255,255,0.1);clip-path:polygon(0% 0%,calc(100% - 26px) 1px,100% 100%,100% 100%,0% 100%);border-radius:6px 0 0 0;border:0;border-bottom:1px solid transparent;border-image:linear-gradient(90deg,rgba(255,255,255,0.3),transparent);border-image-slice:1}
.medium-title b{line-height:30px;position:absolute;left:calc(100% + 6px);background-color:transparent;margin:5px 0;height:30px;padding:0 2px;text-align:center;white-space:nowrap;font-style:italic;color:rgba(255,255,255,0.5)}
.view-more-title{float:right;line-height:20px;margin:10px 0;background-color:rgba(255,255,255,0.1);padding:0 5px 0 10px;-webkit-tap-highlight-color:transparent;clip-path:polygon(10% 0%,100% 0%,100% 100%,10% 100%,0% 50%)}
.home-editors-pick{display:block}
.home-item-primary .item{border-radius:0;width:266px;height:180px;position:relative;background-color:rgba(255,255,255,0.15);border-radius:15px;font-size:18px;line-height:30px;border:0}
.home-item-primary .item img{width:calc(100% - 6px); height: 136px; aspect-ratio: 400 / 209;border-radius:0;border:0;border-radius:12px 12px 0 0;margin:3px}
.home-item-primary .item:hover img{border:0}
.home-item-primary .item::after{border:3px solid rgba(255,255,255,0.02);content:"";position:absolute;left:0;top:0;right:-1px;height:180px;transition:all 100ms linear;border-radius:15px;float:left}
.home-item-primary .item:hover::after{border-color:#ff0}
.home-item{background-color:rgba(255,255,255,0.05);margin-top:0!important;border-radius:0 0 10px 10px}
#home-game-info{display:none}
#main{background-image:radial-gradient(circle,rgba(43,61,75,0.6) 0%,rgba(1,16,20,1) 100%),url(../../images/mobi-blue-bg.png)!important;background-size:cover}
@media (min-width:601px) {
	#main{background-image:radial-gradient(circle,rgba(43,61,75,0.6) 0%,rgba(1,16,20,1) 100%),url(../../images/blue-bg.png)!important;background-size:cover}
}
.item.actived::after{display:none}
.item.actived img{border-color:rgba(255,255,255,0.05)}
#header .nav-logo{margin-top:6px}

/* MOBILE */
/* Portrait screen */
@media only screen and (orientation: portrait) and (max-width:601px) {
	#nav{display:none}
	#content{width:100%;padding:0 20px 20px}
	.small-info{width:100%}
	#header .quick-alert{display:none}
	#header .search-box{width:160px}
	.medium-title{font-size:16px}
}
/* Landscape screen */
@media only screen and (orientation: landscape) and (max-height:601px) {
	#nav{height:calc(100vh - 100px)}
	#nav .nav-list{height:36px;margin:10px 0}
	#home-game-info{display:none}
	#content{padding:0 20px 20px}
	.home-editors-pick{display:block}
	.item.actived::after{display:none}
	.home-item{margin-top:0!important;margin-bottom:10px}
}

.fsg-modal .w3-modal-content{overflow:hidden;box-shadow:0 0 10px rgba(0,0,0,0.9),0 0 20px rgba(0,0,0,0.6),0 0 30px rgba(0,0,0,0.5),0 0 60px rgba(0,0,0,0.3);/*clip-path: polygon( 5px 0%, calc(100% - 5px) 0%, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0% calc(100% - 5px), 0% 5px);*/box-shadow: 0 0 10px rgba(0,0,0,0.1); border: 3px solid rgba(255,255,255,0.9);}
.fsg-modal .w3-container p{font:calc(12px + 3px)/20px Arial}
.fsg-modal .w3-container strong{font-weight: bold;}
.fsg-modal-content{ font-family: Arial, Helvetica, sans-serif; background-color: rgba(0,0,0,0.05);}
@media (max-width:601px) {
	.fsg-modal header h2{font-size: 20px;}
}
.fsg-modal-footer{
	display: flex;
	align-items:end;
	justify-content: end;
	padding: 0;
}
.fsg-modal-footer button{
	background-color: rgba(0,0,0,0.3);
	border: 0;
	font:12px/20px Arial;
	margin: 5px 3px;
	color: white;
	cursor: pointer;
}
.fsg-modal-footer button:nth-child(2){
	background: red;
	margin-right: 5px;
}
.donate-address{
	background-color: #EEE;
	padding:0 15px;
	font:12px/20px Arial;
	box-shadow: 0 0 5px rgba(0,0,0,0.1) inset;
	color:#333;
	clip-path: polygon(0% 0%, 100% 0%, calc(100% - 5px) 50%, 100% 100%, 0% 100%, 5px 50%);
	text-decoration: none;
	cursor:default;
	display: inline-block;
	max-width: 80%;
}
.donate-address:hover, .donate-address:active{
	background-color: #AAA;
}
.donate-address-desc{font:italic 11px/30px Arial;color:rgba(255,255,255,0.3);visibility: hidden;padding-left: 5px;}
.donate-address:hover + .donate-address-desc{visibility: visible;}
.fsg-playpage-navigator{
	display: flex;
	align-items: center;
	justify-content: start;
	white-space: nowrap;
	max-width: 98%;
}

.donator__box i{color: white;display: block;text-align: center;}
.playable0 img{
-webkit-filter: hue-rotate(90deg);
  filter: hue-rotate(90deg);
  opacity: 0.3;
} 
.playable1 img{
	-webkit-filter:none;
	filter:none
}
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}

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