.prehid {display:;}

.game-field {
	display:grid;
	margin:24px 0px;
	grid-template-rows: 1fr 64px 1fr;
	grid-template-columns:1fr;
	gap:8px;
	margin-left:auto;
	margin-right:auto;
	position:relative;
	max-width:calc(100% - 24px);
}

.game-field > div {
	font-size:24px;
	max-width:calc(100vw - 24px);
	margin-left:auto;
	margin-right:auto;
}


@media screen and (max-width:739px) {

	.game-field,
	.game-field > div {
		margin-left:0px;
		margin-right:0px;
	}

}

.game-field > .picgrid,
.game-field > .picslider {
	width:min(960px,calc(100vw - 24px));
}

.game-field > .picslider .owl-stage-outer {
	width:100% !important;
	overflow:hidden;
}

.game-field > .picmove {
	text-align:center;
	align-self:center;
}

.game-field .picmove-button {
	display:inline-block;
	position:relative;
	box-sizing:border-box;
	width:56px;
	aspect-ratio:1;
	background-color:#336699;
	color:#FFFFFF;
	font-size:24px;
	font-weight:bold;
	border-radius:50%;
	cursor:pointer;
	transition:0.4s;
	transition-timing-function: ease-in-out;
}

.game-field .picmove-button:hover {
	transform:scale(1.2);
}

.game-field .picmove-button::after {
	position:absolute;
	content:'\25BC';
	z-index:+4;
	left:50%;top:50%;
	transform:translate(-50%,-50%);
}


@media screen and (min-width:1400px) {
/*
	.game-field {display:flex;flex-direction:row-reverse;align-items:center;justify-content:stretch;}
	.game-field > div {width:50%;margin:0px;}
*/
	.game-field {grid-template-columns: 1fr 64px 1fr;grid-template-rows:1fr;max-width:100%;}
	.game-field .picmove-button::after { content:'\25B6'; }

	.game-field > .picgrid,
	.game-field > .picslider {
		font-size:24px;
		max-width:610px;
	}
	.label-narrow {display:none;}
}

@media screen and (max-width:1399px) {
	.label-wide {display:none;}
}

@media screen and (max-width:720px) {
	.game-field > div {
		font-size:13px;
	}
}

.picgrid {
	display:grid;
	grid-template-columns: repeat(4, 1fr);
	gap:8px;
}

.picgrid[data-col="2"] {grid-template-columns: repeat(2, 1fr);
}
.picgrid[data-col="3"] {grid-template-columns: repeat(3, 1fr);
}
.picgrid[data-col="4"] {grid-template-columns: repeat(4, 1fr);
}
.picgrid[data-col="5"] {grid-template-columns: repeat(5, 1fr);
}
.picgrid[data-col="6"] {grid-template-columns: repeat(6, 1fr);
}
.picgrid[data-col="7"] {grid-template-columns: repeat(7, 1fr);
}
.picgrid[data-col="8"] {grid-template-columns: repeat(8, 1fr);
}
.picgrid[data-col="9"] {grid-template-columns: repeat(9, 1fr);
}
.picgrid[data-col="10"] {grid-template-columns: repeat(10, 1fr);
}
.picgrid[data-col="11"] {grid-template-columns: repeat(11, 1fr);
}
.picgrid[data-col="12"] {grid-template-columns: repeat(12, 1fr);
}



.picgrid > div {
	position:relative;
	border:2px dashed #CCCCCC;
/*	min-height:200px;
	box-sizing:content-box;*/
	aspect-ratio:1;
	transition:0.4s;
	overflow:hidden;
}

.picgrid > div > div.item,
.picgrid > div img {
	width:100%;
	height:100%;
}

.picgrid > div > .corr-marker,
.picgrid > div > .wrong-marker {
	position:absolute;
	display:inline-block;
	background-color:#339966;
	color:#FFFFFF;
	font-size:75%;
	font-weight:bold;
	padding:12px;
	border-radius:8px;
	left:50%;top:40%;
	z-index:24;
	opacity:0.8;
	transform:translate(-50%,-50%);
}

.picgrid > div > .wrong-marker {
	background-color:#FF0033;
}


.asp34 .picgrid > div, .asp34 .picslider .owl-item {aspect-ratio:3/4;}
.asp43 .picgrid > div, .asp43 .picslider .owl-item {aspect-ratio:4/3;}
.asp169 .picgrid > div, .asp169 .picslider .owl-item {aspect-ratio:16/9;}
.asp916 .picgrid > div, .asp916 .picslider .owl-item {aspect-ratio:9/16;}

.picgrid > div.is-correct {
	border:2px solid #339966;
}

.picgrid > div.is-faded {
	border:none;
	opacity:0;
}

.picgrid > div.is-selectable {
	border:2px solid #CCCCCC;
	cursor:pointer;
}

.picsource.picgrid div.is-selectable:hover {
	overflow:visible;
	z-index:+8;
	box-shadow:0px 0px 12px #999999;
	transform:scale(1.75);
}

.picgrid > div.is-check {
	border:none !important;
	opacity:0 !important;
	transition:0s !important;
}


.picsource.picgrid.is-locked div.is-selectable {
	opacity:0.6;
}

@media screen and (min-width:960px) {

	.picsource.picgrid div.is-selectable:hover {
		transform:scale(2.0);
	}

}

.picgrid > div.is-selected {
	border:2px solid #3366CC;
}

.picgrid > div.is-correct::before {
	content:'';
	position:absolute;
	z-index:+4;
	display:block;
	left:20%;
	top:80%;
	transform:translate(-50%,-50%);
	background-color:#339966;
	opacity:0.5;
	border:none;
	width:25%;
	aspect-ratio:1;
	border-radius:50%;
}

.picgrid > div.is-correct::after {
	content:attr(data-number);
	position:absolute;
	z-index:+8;
	display:block;
	left:20%;
	top:80%;
	transform:translate(-50%,-50%);
	color:#FFFFFF;
	font-size:24px;
	font-weight:bold;
}

.picgrid > div.is-current {
	--brd-color:#336699;
}

.picgrid > div.is-wrong {
	--brd-color:#FF0033;
}

.picgrid > div.is-current {
	border:2px solid var(--brd-color,#336699);
	background: linear-gradient(45deg, rgba(0, 0, 0, 0) 49.9%, var(--brd-color,#336699) 49.9%, var(--brd-color,#336699) 60%, rgba(0, 0, 0, 0) 60%),
				linear-gradient(45deg, var(--brd-color,#336699) 10%, rgba(0, 0, 0, 0) 10%);
	background-size: 0.8em 0.8em;
}

.picgrid > div.is-current::before {
	content:'';
	position:absolute;
	z-index:+4;
	display:box;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	background-color:#FFFFFF;
	border:4px solid var(--brd-color,#336699);
	width:40%;
	aspect-ratio:1;
	border-radius:50%;
}

.picgrid > div.is-current::after {
	content:'?';
	font-size:200%;
	font-weight:bold;
	position:absolute;
	z-index:8;
	display:box;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	color:var(--brd-color,#336699);
}

.game-description {
	text-align:left;
	line-height:150%;
	width:min(640px,100%);
	margin:24px auto 48px auto;
}

.game-description p {
	text-align:left;
	margin-top:12px;
	text-indent:36px;
}


.drg-helper {
	position:absolute;
	max-width:240px;
	z-index:24;
}

.drg-helper img {
	width:100%;
}

.picslider {

	position: relative;
	max-width:640px;
	margin-left:auto;
	margin-right:auto;

	.owl-stage-outer {
		padding:20% 0px;
	}

 	.owl-item {
		transform: scale(0.8);
		transition: 0.4s;
		cursor:pointer;
		border:2px solid #FFFFFF;
	}

	.owl-item.is-correct {
		border-color:339966;
 		cursor:default;
	}

	.owl-item img {
		width:100%;
	}

	.owl-item > item {
		position:relative;
	}

	.owl-item.is-correct > .item::before {

		content:'';
		position:absolute;
		z-index:24;
		display:box;
		left:20%;
		top:80%;
		transform:translate(-50%,-50%);
		background-color:#339966;
		opacity:0.5;
		border:none;
		width:25%;
		aspect-ratio:1;
		border-radius:50%;
	}

	.owl-item.is-correct > .item[data-number]::after {
		content:attr(data-number);
		position:absolute;
		z-index:26;
		display:box;
		left:20%;
		top:80%;
		transform:translate(-50%,-50%);
		color:#FFFFFF;
		font-size:24px;
		font-weight:bold;
	}

	.owl-item.active.center  {
		transform: scale(1.5);
		z-index:8;
		box-shadow:0px 0px 10px #336699;
		border:2px solid #FFFFFF;
	}

	.owl-item.active.is-correct {
	
		border-color:#339966;
		box-shadow:0px 0px 10px #339966;
	}

}