[tasks1-15-wrp] {
        position:relative;
	border:1px solid #e8e8e8;
	width:620px;
	min-height:520px;
	margin:40px auto 0px auto !important;
	display:flex;
	justify-content:center;
	align-items:center;
	border-radius:16px;
	overflow:hidden;
	background-color:white;
        opacity: 1;
        transition: opacity 0.5s ease-in-out;
}

[tasks1-15-wrp][hide] {
	opacity:0;
}

[t15-poster] {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;

	background-position:50% 50%;
	background-size:cover;
	background-repeat:no-repeat;
	z-index:5;
        opacity: 1;
        transition: opacity 0.5s ease-in-out;

        display:flex;
        justify-content:center;
        align-items:center;
}

[t15-poster][hide] {
	opacity:0 !important;
}

[t15-poster][hide2] {
	display:none;
}

[t15-start-butt] {

        position:absolute;
        left:calc((100% - 150px)/2);
        top:calc((100% - 46px)/2);

	display: block;
	width: 150px;
    height: 46px;
    background-color:#ff6600;
    color:white;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
    z-index:6;



}

[t15-start-butt][hide] {
	opacity:0;
}

[t15-start-butt][hide2] {
	display:none;
}


[t15-start-butt]:active {
	transform:translate3d(1px,1px,0px);
}


[t15-game] {
	position:relative;
	opacity:1;
	transition:opacity 0.5s ease-in-out;
	width:100%;
	height:auto;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap:wrap;
        padding:20px 0px 20px 0px;
        z-index:1;
        opacity:1;
}

[t15-game][hide] {
	opacity:0;	
}

[t15-game-top], [t15-game-bottom] {
	flex:0 0 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        column-gap:4px;
        row-gap:4px;
        flex-wrap:wrap;
        padding:20px 0px 20px 0px;
}


[t15-game-bottom] {
        position:relative;
        flex:0 0 calc(100% - 40px);
	margin:40px 0px 0px 0px;
	/*align-items:initial;*/
}

[t15-game-bottom-grey] {
	position:absolute;
	width:100%;
	height:100%;
	left:0px;
	top:0px;
	background-color:#e8e8e8;
        display: flex;
        justify-content: center;
        align-items: center;
        column-gap:4px;
        row-gap:4px;
        flex-wrap:wrap;
        padding:20px 0px 20px 0px;
        border-radius:8px;
}


[t15-item] {
        position:relative;
	flex:0 0 100px;
	aspect-ratio:1/1;
	border:1px solid #e8e8e8;
	border-radius:8px;
	overflow:hidden;
	background-color:rgba(255,255,255,0.7);
	transition:background-color 0.5s ease-in-out;
	
}

[t15-item][return] {
	transition:transform 0.3s ease-in-out;
}

[t15-item][text] {
        aspect-ratio:auto;
        /*padding:0px 4px 0px 4px;*/
}

[t15-item][t15-item-error] {
	background-color:rgba(255,0,0,0.4);
	color:white;
}

[t15-item][t15-item-error]:before {
	content:"";
	position:absolute;
	width:100%;
	height:100%;
	left:0px;
	top:0px;
        background-color:rgba(255,0,0,0.4);
}



[t15-item-content] {
        position:relative;
	width:100%;
	height:100%;
	line-height:0px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight:600;
        font-size:14px;
	
}

[t15-item][text] [t15-item-content] {
	min-height:32px;
	line-height:110%;
	text-align:center;
        display: flex;
        justify-content: center;
        align-items: center;
}

[t15-ic-text] {
	flex:0 0 calc(100% - 8px);
	margin:4px 0px 4px 0px;
	font-weight:500;
}


[t15-item-content] > img {
	width:100%;
	height:100%;
	object-fit:cover;
}

[bgr-white] {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	background-color:white;
	border-radius:6px;
}


[t15-sound-button] {
	position:relative;
	width:60px;
	height:60px;
	border-radius:100px;
        background-color:#ff6600;
        box-shadow: 
		2px 2px 10px 0px rgba(0, 0, 0, .15), 
		inset -4px -4px 15px 0px rgba(0, 0, 0, .3), 
		inset 4px 4px 15px 0px rgba(255, 255, 255, .3);
        background-image:url(../images/play_arrow.png);
        background-position:calc(50% + 2px) 50%;
        background-size:16px;
        background-repeat:no-repeat;
        cursor:pointer;
        user-select:none;
}

[t15-sound-button]:active {
	transform:translate3d(1px,1px,0px);
}




[t15-poster-info] {
	padding:20px 20px 20px 20px;
	background-color:rgba(255,255,255,1);
	border-radius:16px;
        display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
	flex:0 0 288px;
        row-gap:20px;
        opacity:1;
        transition:opacity 0.5s ease-in-out;

}

[t15-poster-info][hide] {
	opacity:0;
}


[t15-pi-title] {
	flex:0 0 100%;
	font-size:22px;
	font-weight:600;
	text-align:center;
	line-height:150%;
}




[t15-pi-params] {
	flex:0 0 100%;
        display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
	row-gap:20px;
	
}

[t15-pi-params] > span {
	display:block;
	font-size:14px;
	font-weight:500;
	line-height:150%;

}



[t15-pi-butt] {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    height: 51px;
    padding: 0px 0px 0px 0px;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    flex:0 0 220px;
    font-size:14px;


background-color:#ff6600;
color:white;



}


[t15-pi-butt]:active {
	transform:translate3d(1px,1px,0px);
}

[header][pc="1"] ~ [content] [t15-pi-butt] {
	background-color:#3399cc;
	color:white;
}

[header][pc="2"] ~ [content] [t15-pi-butt] {
	background-color:#ccee66;
	color:#474747;
}

[header][pc="3"] ~ [content] [t15-pi-butt] {
	background-color:#ffcc00;
	color:#474747;
}

[header][pc="4"] ~ [content] [t15-pi-butt] {
	background-color:#ff6600;
	color:white;
}

[t15-pi-kr] {
	position:relative;
	height:160px;
	width:100%;

}

[t15-pi-img] {
	width:100%;
	height:100%;
	object-fit:contain;
}



[t15-pi-kr2] {
	position:absolute;
	width:107px;
	height:98px;
	left:calc((100% - 107px)/2);
	bottom:-24px;
	background-image:url(../images/kr.png);
}

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

[t15-pi-title] {
	font-size:calc( (100vw - 320px)/(1160 - 320) * (22 - 14) + 14px);	
}

[t15-pi-params] > span {
	font-size:calc( (100vw - 320px)/(1160 - 320) * (14 - 12) + 12px);	
}

[t15-pi-kr] {
	height:calc( (100vw - 320px)/(1160 - 320) * (160 - 80) + 80px);
}



[t15-pi-kr2] {
        width:calc( (100vw - 320px)/(1160 - 320) * (107 - 66) + 66px);
        height:calc( (100vw - 320px)/(1160 - 320) * (98 - 60) + 60px);
	left:calc((100% - calc( (100vw - 320px)/(1160 - 320) * (107 - 66) + 66px))/2);
	bottom:calc( (100vw - 320px)/(1160 - 320) * (0 - 24 + 12) - 12px);
	background-position:50% 50%;
	background-size:cover;
}


[t15-pi-butt] {
    height: calc( (100vw - 320px)/(1160 - 320) * (51 - 38) + 38px);
    flex:0 0 calc( (100vw - 320px)/(1160 - 320) * (220 - 200) + 200px);
    font-size:calc( (100vw - 320px)/(1160 - 320) * (14 - 12) + 12px);
}
}