/* style container */
.sbpuzzle-style{
	position:relative;
	width:100%;
	font-family:"Verdana";
}
.sbpuzzle-style,
.sbpuzzle-style *{
	box-sizing:border-box;
}
/* sbpuzzle */
.sbpuzzle{
	position:relative;
	width:100%;
}
/* heading & footer */
.sbpuzzle-heading,
.sbpuzzle-footer{
	min-height:40px;
	padding:6px 15px;
	font-size:16px;
	line-height:1;
	color:white;
	background:#337ab7;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
}
.sbpuzzle-heading{
	border-radius:5px 5px 0 0;
}
.sbpuzzle-footer{
	border-radius:0 0 5px 5px;
}
/* left & right */
.sbpuzzle-left{
	display:flex;
	align-items:center;
	justify-content:left;
}
.sbpuzzle-left>div{
	margin-right:6px;
}
.sbpuzzle-right{
	display:flex;
	align-items:center;
	justify-content:right;
}
.sbpuzzle-right>div{
	margin-left:6px;
}
/* frame */
.sbpuzzle-frame{
	position:relative;
	width:100%;
	font-size:0;
	background:rgba(255,255,235,1);
}
/* picbox */
.sbpuzzle-picbox{
}
/* pzpic */
.sbpuzzle-pzpic{
	width:100%;
	opacity:0;
	transition:opacity 1s;
}
.sbpuzzle-pzpic-show{
	opacity:1;
}
/* board */
.sbpuzzle-board{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:2px;
	perspective:800px;
}
/* inibox */
.sbpuzzle-inibox{
	width:100%;
	padding-bottom:61.8%;
	background:linear-gradient(
		to bottom right,
		#fdeafd,
		#4e484e);
	opacity:0;
}
.sbpuzzle-inibox-show{
	opacity:1;
}
/* acell, gcell, ecell, icell */
.sbpuzzle-acell{
	position:relative;
	overflow:hidden;
	visibility:hidden;
}
.sbpuzzle-frame.sbpuzzle-show-squares .sbpuzzle-acell{
	visibility:visible;
}
.sbpuzzle-icell{
	position:relative;
	width:100%;
	height:100%;
}
.sbpuzzle-inactive .sbpuzzle-acell{
	filter:grayscale(100%);
}
.sbpuzzle-ecell-hide{
	opacity:0;
	transition:opacity 0.3s;
}
.sbpuzzle-ecell-show{
	opacity:1;
	transition:opacity 0.6s;
}
/* avail */
.sbpuzzle-avail{
	cursor:pointer;
}
.sbpuzzle-avail-effect{
	z-index:1;
	animation-name:kf-avail-effect;
	animation-duration:1s;
	animation-timing-function:ease;
	animation-iteration-count:1;
}
@keyframes kf-avail-effect{
	0% {
		box-shadow:
			0 0 0 0 #46cf8a,
			inset 0 0 0 0 #46cf8a;
	}
	30% {
		transform:scale(0.80);
		border-radius:50%;
		box-shadow:
			0 0 30px 0 #46cf8a,
			inset 0 0 30px 0 #46cf8a;
	}
	100% {
		box-shadow:
			0 0 0 0 #46cf8a,
			inset 0 0 0 0 #46cf8a;
	}
}
/* progbar */
.sbpuzzle-progbar{
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:3px;
}
.sbpuzzle-progbar-inner{
	width:0%;
	height:100%;
	background:rgba(255,0,0,0.8);
}
/* dialog */
.sbpuzzle-dialog{
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	color:#fff;
	overflow:hidden;
	line-height:normal;
}
.sbpuzzle-dialog-inner{
	position:relative;
	padding:15px;
	padding-bottom:10px;
	font-size:16px;
	color:#fff;
	background:rgba(0,0,0,0.6);
	transition:top 0.8s;
}
.sbpuzzle-dialog-inner div{
	margin-bottom:10px;
}
.sbpuzzle-dialog-inner div:last-child{
	margin-bottom:0;
}
.sbpuzzle-dialog-text{
	text-align:left;
}
.sbpuzzle-dialog-btnbox{
	text-align:right;
	xpadding:10px 0;
	background:rgba(0,0,0,0.1);
}
.sbpuzzle-dialog-btn{
	padding:2px 10px;
	color:#ffd;
	cursor:pointer;
	user-select:none;
}
.sbpuzzle-avail-effect-skew{
	z-index:1;
	animation-name:kf-avail-effect-skew;
	animation-duration:1s;
	animation-timing-function:ease;
	animation-iteration-count:1;
}
@keyframes kf-avail-effect-skew{
	0% {
		box-shadow:
			0 0 0 0 #468acf,
			inset 0 0 0 0 #468acf;
	}
	30% {
		transform:scale(0.3) skew(50deg);
		border-radius:20%;
		box-shadow:
			0 0 30px 0 #468acf,
			inset 0 0 30px 0 #468acf;
	}
	100% {
		box-shadow:
			0 0 0 0 #468acf,
			inset 0 0 0 0 #468acf;
	}
}
/* wait */
.sbpuzzle-wait{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background:linear-gradient(
		to bottom right,
		rgba(0,0,0,0.0),
		rgba(0,0,0,0.4));
	transition:opacity 1s;
	user-select:none;
	cursor:wait;
	display:flex;
	justify-content:center;
	align-items:center;
	overflow:hidden;
}
.sbpuzzle-wait-box{
}
.sbpuzzle-wait-cellbox{
	margin:0 auto;
	margin-bottom:15px;
	position:relative;
	width:43px;
	height:43px;
}
.sbpuzzle-wait-cell{
	position:absolute;
	top:0;
	left:0;
	width:20px;
	height:20px;
	border-radius:3px;
	background:rgba(255,255,255,0.5);
	box-shadow:0 0 3px 0 rgba(0,0,0,0.3);
	transition:top .3s,left .3s;
}
.sbpuzzle-wait-msg{
	font-size:12px;
	color:white;
	text-shadow:0 0 5px rgba(0,0,0,0.8);
	letter-spacing:0.4em;
	transition:opacity .3s;
}
.sbpuzzle-wait-msg-hide{
	opacity:0;
}
.sbpuzzle-wait-hide{
	opacity:0;
}
.sbpuzzle-acell-flipcard-begin{
	opacity:0;
	transform:scale(0) rotateY(90deg);
}
.sbpuzzle-acell-flipcard-end{
	opacity:1;
	transform:scale(1) rotateY(0);
	transition:transform 1s ease-in, opacity 1s;
}
.sbpuzzle-icell-hide-slide{
	transform:translate(100%,100%);
	transition:transform .6s;
}
.sbpuzzle-icell-show-slide{
	transform:translate(0,0);
	transition:transform .6s;
}
.sbpuzzle-countdown{
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	display:flex;
	align-items:center;
	justify-content:center;
	user-select:none;
	cursor:wait;
}
.sbpuzzle-countdown-str{
	color:rgba(255,255,255,1);
	text-shadow:
		0 0 1px rgba(0,0,0,0.8),
		0 0 2px rgba(0,0,0,0.8),
		0 0 4px rgba(0,0,0,0.8),
		0 0 8px rgba(0,0,0,0.8),
		0 0 16px rgba(0,0,0,0.8),
		0 0 32px rgba(0,0,0,0.8);
	line-height:1;
	font-family:"Times New Roman";
	font-weight:bold;
}
.sbpuzzle-cellbg{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background-repeat:no-repeat;
}
.sbpuzzle-cellfront{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	display:flex;
	align-items:center;
	justify-content:center;
}
.sbpuzzle-cellfront-circle{
	font-size:64px;
	width:1.6em;
	height:1.6em;
	color:white;
	background:#468acf;
	opacity:0.7;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
}
.sbpuzzle-cellfront-char{
	line-height:1;
	font-family:"Times New Roman";
}
.sbpuzzle-dialog-btn[data-action="destroy"]{
	color:red;
}