* {
	user-select:none;
	font-family:fantasy;
}
body {
	background:#262626;
}
body .wait {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:#fff;
	color:#000;
	z-index:100;
	visibility:visible;
}
body .wait p {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
}
.game {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	width:320;
	height:452;
	background:#fff;
}

.game .back {
	position:absolute;
	width:30;
	height:30;
	margin:10;
	visibility:hidden;
}
.game .back:before {
	content:"";
	position:absolute;
	top:6;
	bottom:6;
	left:6;
	right:6;
	border-bottom:1px solid;
	border-left:1px solid;
	transform:rotate(45deg) translate(25%, -25%);
}

.game .version {
	position:absolute;
	color:#bbb;
	margin:10;
	bottom:-10;
	opacity:.3;
	font-size:10;
}
.game .menu {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	width:70%;
	text-align:center;
}
.game .menu .start {
	position:relative;
	border:1px solid;
	padding:5 10;
	transition:0.3s;
}
.game .menu .theme,
.game .menu .icons {
	margin-top:10;
}

.game .menu input {
	display:none;
}
.game .menu .theme .checkbox,
.game .menu .icons .checkbox {
	position:relative;
	left:50%;
	top:5px;
	transform:translateX(-50%);
	width:15;
	height:15;
	border:2px solid;
	border-radius:5px;
}
.theme input:checked ~ .checkbox::before,
.icons input:checked ~ .checkbox .checked {
	content:"";
	position:absolute;
	top:1;
	bottom:1;
	left:1;
	right:1;
	background:#fff;
	border-radius:2px;
}
.menu .icons label .checkbox .checked {
    background:#000;
}
.game .menu .colors {
	margin-top:30;
}
.game .menu .colors .setColor {
	position:relative;
	left:50%;
	transform:translateX(-55%);
	padding:2 5;
	width:120px;
	height:30px;
	margin:5;
}

.game .menu .colors .setColor .c1,
.game .menu .colors .setColor .c2,
.game .menu .colors .setColor .c3,
.game .menu .colors .setColor .c4 {
 	position:relative;
 	margin:2;
 	margin-top:4;
 	width:20;
 	height:20;
	border:1px solid #000;
	display:inline-block;
}
.game .menu .colors .setColor:before {
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:gray;
	opacity:0;
}

.game .menu .colors input:checked ~ .setColor:before {
	opacity:0.2;
}
.set1 .c1 {
	background:#f00;
}
.set1 .c2 {
	background:#0f0;
}
.set1 .c3 {
	background:#00f;
}
.set1 .c4 {
	background:#f0f;
}

.set2 .c1 {
	background:#0d0;
}
.set2 .c2 {
	background:#0b0;
}
.set2 .c3 {
	background:#080;
}
.set2 .c4 {
	background:#040;
}

.set3 .c1 {
	background:#7c02ff;
}
.set3 .c2 {
	background:#ff9e02;
}
.set3 .c3 {
	background:#ff026b;
}
.set3 .c4 {
	background:#02ffa6;
}

.game .menu .start:hover {
	border-color:#a00;
	color:#a00;
}
.game .prim {
	position:relative;
	left:50%;
	top:30;
	transform:translateX(-50%);
	width:100;
	height:100;
	background:#000;
	box-shadow:0 4px 10px #000;
	transition:0.3s;
	visibility:hidden;
}
.game .prim .fa-crown,
.game .blocks .block1 .fa-trophy-alt,
.game .blocks .block2 .fa-fish,
.game .blocks .block3 .fa-fighter-jet,
.game .blocks .block4 .fa-alicorn,
.game .blocks .block4 .fa-award {
    position: relative;
    width: 100%;
    height: 100%;
}
.game .prim .fa-crown::before,
.game .blocks .block1 .fa-trophy-alt::before,
.game .blocks .block2 .fa-fish::before,
.game .blocks .block3 .fa-fighter-jet::before,
.game .blocks .block4 .fa-alicorn::before,
.game .fa-award::before {
    position: absolute;
    font-size: 64px;
    top: 50%;
    left: 50%;
    opacity: .1;
    transform: translate(-50%, -50%);
    color: #000;
}
.game .blocks .block3 .fa-fighter-jet::before,
.game .blocks .block4 .fa-alicorn::before {
    font-size: 59px;
}
.game .fa-award::before {
    font-size: 300px;
}

.game .blocks {
	position:relative;
	width:100%;
	height:76px;
}
.game .blocks .block1,
.game .blocks .block2,
.game .blocks .block3,
.game .blocks .block4 {
	position:relative;
	width:76;
	height:76;
	margin:0 2;
	background:#000;
	float:left;
	top:100;
	box-shadow:0 4px 10px #000;
	transition:0.3s;
	visibility:hidden;
}
.game .blocks .block1:active,
.game .blocks .block2:active,
.game .blocks .block3:active,
.game .blocks .block4:active {
	margin-top:4;
	box-shadow:0 0 10px #000;
}

.End1,
.End2 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 160%;
    height: 5;
    background: #f00;
    border-radius: 50%;
    z-index: 2;
    opacity: 0;
}
.End1 {
    transform: translate(-50%, -50%) rotate(45deg);
}
.End2 {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.game .timer {
	position:absolute;
	width:100%;
	height:30;
	bottom:30;
	background:none;
}
.game .timer .time {
	position:absolute;
	width:0%;
	height:25;
	background:#628;
	box-shadow:0 0 20px #628;
	z-index:-1;
}
.game .score {
	position:absolute;
	left:50%;
	top:320;
	transform:translateX(-50%);
	min-width:30;
	text-align:center;
	font-size:20;
	visibility:hidden;
}
.game .restartButton {
	position:absolute;
	width:100%;
	height:30;
	top:290;
}
.game .restartButton .svg,
.game .restartButton .restart {
	float:right;
	visibility:hidden;
}
.game .restartButton .svg {
	fill:#bc4ff2;
}
.game .restartButton .restart {
	height:100%;
	width:100px;
	background:#bc4ff2;
	text-align:center;
	line-height:30px;
}