@charset "utf-8";
/* CSS Document */
/*.honeycomb {
	max-width: 100%;
	margin: 20px auto 0 auto;
	padding: 0;
	display: flex;
	--hexagon-shape: polygon(
	0% 25%, 0% 75%, 50% 100%,
	100% 75%, 100% 25%, 50% 0%
	);
}*/
.honeycomb {
	max-width: 100%;
	margin: 0;
	margin-top: 20px;
	padding: 0;
	display: flex;
	--hexagon-shape: polygon( 55.569% 98.349%,55.569% 98.349%,54.519% 98.81%,53.433% 99.169%,52.317% 99.425%,51.184% 99.579%,50.04% 99.63%,48.897% 99.579%,47.763% 99.425%,46.648% 99.169%,45.561% 98.81%,44.512% 98.349%,5.844% 79.052%,5.844% 79.052%,4.848% 78.491%,3.937% 77.85%,3.114% 77.134%,2.386% 76.351%,1.756% 75.509%,1.23% 74.614%,0.812% 73.675%,0.508% 72.698%,0.322% 71.69%,0.258% 70.66%,0.259% 29.179%,0.259% 29.179%,0.322% 28.148%,0.508% 27.141%,0.812% 26.164%,1.23% 25.224%,1.756% 24.33%,2.386% 23.488%,3.114% 22.705%,3.937% 21.989%,4.848% 21.347%,5.844% 20.787%,44.512% 1.49%,44.512% 1.49%,45.561% 1.029%,46.648% 0.67%,47.763% 0.414%,48.897% 0.26%,50.04% 0.208%,51.184% 0.26%,52.317% 0.414%,53.433% 0.67%,54.519% 1.029%,55.569% 1.49%,94.236% 20.787%,94.236% 20.787%,95.232% 21.347%,96.144% 21.989%,96.966% 22.705%,97.695% 23.488%,98.325% 24.33%,98.851% 25.224%,99.268% 26.164%,99.573% 27.141%,99.759% 28.148%,99.822% 29.179%,99.822% 70.66%,99.822% 70.66%,99.759% 71.69%,99.573% 72.698%,99.268% 73.675%,98.851% 74.614%,98.325% 75.509%,97.695% 76.351%,96.966% 77.134%,96.144% 77.85%,95.232% 78.491%,94.236% 79.052%,55.569% 98.349% );
	--half-hexagon:polygon( 29.093% 98.312%,29.093% 98.312%,25.154% 99.114%,21.13% 99.492%,17.139% 99.474%,13.298% 99.092%,9.725% 98.376%,6.538% 97.356%,3.854% 96.062%,1.792% 94.524%,0.468% 92.773%,0% 90.839%,0% 79.749%,0.001% 21.447%,0.001% 9.243%,0.001% 9.243%,0.48% 7.282%,1.838% 5.512%,3.949% 3.963%,6.692% 2.666%,9.944% 1.651%,13.581% 0.949%,17.48% 0.591%,21.518% 0.608%,25.573% 1.029%,29.521% 1.887%,89.91% 18.897%,89.91% 18.897%,91.532% 19.408%,93.014% 19.984%,94.349% 20.621%,95.53% 21.311%,96.549% 22.049%,97.398% 22.829%,98.072% 23.646%,98.562% 24.493%,98.862% 25.364%,98.963% 26.254%,98.963% 74.794%,98.963% 74.794%,98.856% 75.707%,98.541% 76.601%,98.026% 77.467%,97.318% 78.302%,96.426% 79.097%,95.358% 79.847%,94.121% 80.545%,92.724% 81.186%,91.175% 81.762%,89.482% 82.268%,29.093% 98.312% );
	--half-hexagon2:polygon( 69.87% 1.31%,69.87% 1.31%,73.809% 0.502%,77.833% 0.122%,81.824% 0.14%,85.665% 0.525%,89.238% 1.246%,92.425% 2.274%,95.109% 3.577%,97.171% 5.126%,98.495% 6.89%,98.963% 8.838%,98.963% 20.008%,98.962% 78.729%,98.962% 91.02%,98.962% 91.02%,98.482% 92.995%,97.125% 94.778%,95.014% 96.339%,92.271% 97.645%,89.019% 98.668%,85.382% 99.374%,81.483% 99.735%,77.445% 99.718%,73.39% 99.294%,69.442% 98.43%,9.053% 81.297%,9.053% 81.297%,7.431% 80.783%,5.949% 80.202%,4.614% 79.561%,3.433% 78.866%,2.415% 78.123%,1.565% 77.337%,0.891% 76.514%,0.401% 75.661%,0.101% 74.784%,0% 73.888%,0% 24.998%,0% 24.998%,0.107% 24.078%,0.422% 23.179%,0.937% 22.306%,1.645% 21.465%,2.537% 20.664%,3.605% 19.909%,4.842% 19.206%,6.239% 18.561%,7.788% 17.98%,9.481% 17.471%,69.87% 1.31% );
}
.container{
	font-size: 0;
	padding-bottom: 40px;
	padding-left: 0;
	padding-right: 0;
	max-width: 390px;
	margin: 0 auto;
}
.container .hexagon{
	width: 137px;
	display: inline-block;
	font-size: initial;
	clip-path:  var(--hexagon-shape);
	position: relative;
}
.half-hexagon{
	text-align: center;
	top: 18px;
	left: 1rem;
	width: 60px;
	height: 140px;
	margin-top: 12px;
	background: #B3CCD7;
	clip-path:  var(--half-hexagon);
}
.half-hexagon p{
	font-size: 10pt;
	font-weight: 600;
}
.half-hexagon p span{
	font-size: 32pt;
	font-weight: 600;
}
.half-hexagon2{
	border: none;
	text-align: center;
	bottom: 16px;
	right: 1rem;
	width: 60px;
	height: 140px;
	margin-top: 12px;
	background: #ED0000;
	clip-path:  var(--half-hexagon2);
	&:hover{filter: brightness(110%);}
	color: #fff;
}
.half-hexagon2 p{font-size: 8pt;font-weight: 500}
.half-hexagon2 img{width: 24px;margin-bottom: 6px;}
.container .no-text h1{
	opacity: 0;
	user-select: none;
}
.hexagon{
	position: relative;
}
.hexagon:hover .inner{
	filter: brightness(105%);
	cursor: pointer;
}
.inner{
	clip-path: var(--hexagon-shape);
	background: url("../img/missionBG_available.png") center no-repeat;
	background-size: cover ;
	width: 137px;
	height: 161px;
	margin: 0 auto;
	color: #fff;
	font-weight: bold;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	position: relative;
}
.inner.success{
	background: url("../img/missionBG_success.png") center no-repeat;
	background-size: cover ;
}
.inner.failed{
	background: url("../img/missionBG_unavailable.png") center no-repeat;
	background-size: cover ;
}
.inner.failed .mission-badge{
	background: url("../img/missionBadge_unavailable.png") center no-repeat;
	background-size: cover;
}
.inner.success .mission-title{
	color: #1ECC83;
}
.inner.success .mission-badge{
	background: url("../img/missionBadge_success.png") center no-repeat;
	background-size: cover;
}
.inner.success .mission-badge.full{
	background: url("../img/missionBadge_success-full.png") center no-repeat;
	background-size: cover;
}
/*badges*/
.mission-badge{
	position: absolute;
	text-align: center;
	top: 10px;
	width: 40px;
	height: 48px;
	padding-top: 22px;
	background: url("../img/missionBadge_available.png") center no-repeat;
	background-size: cover;
	filter: drop-shadow(0px 10px 10px rgb(0 0 0 / 0.2));
}
.mission-btn{
	text-align: center;
	position: absolute;
	bottom: 10px;
	width: calc(100% - 20px);
	height: 30px;
}
.mission-btn img{
	height: 100%;
	filter: drop-shadow(0px 6px 6px rgb(0 0 0 / 0.3));
}
.msn-btn-overlay{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	text-align: center;
	padding-top: 6px;
	font-size: 8pt;
}
.mission-title-overlay{
	position: absolute;
	left: 0;
	bottom: 42px;
}
.mission-title{
	display: inline-block;
	font-size: 10pt;
	font-weight: 600;
	color: #E80000;
	background: #fff;
	border-radius: 2px;
	padding: 2px 4px;
	margin: 1px 6px;
}
.mission-title img{
	vertical-align: middle;
	height: 10px;
}
.mission-title p{
	color: #000;
	font-weight: 400;
	font-size: 7pt;
}
.mission-icons{
	position: absolute;
	width: 55%;
	right: -5px;
	top: 35px;
}
.mission-icons img{
	width: 100%;
}
.mission-locked{
	top:0;bottom: 0;left: 0;right: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	backdrop-filter: blur(3px);
	position: absolute;
	background: rgba(0,0,0,.50);

	&.blur-sm {
		backdrop-filter: blur(1px);
	}
	&.blur-md {
		backdrop-filter: blur(4px);
	}
	&.blur-lg {
		backdrop-filter: blur(5px);
	}
}
.mission-locked p{
	text-align: center;
	font-weight: 400;
	font-size: 10pt;
	margin: 4px;
}
.mission-locked p span{font-weight: 600}