ccr2.less

@import 'https://fonts.googleapis.com/css?family=Luckiest+Guy';

@col1: #ffd;
@col2: #fdf;
@gridSize: 50px;

* {
	box-sizing: border-box;
}

.mi-center {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.mi-box-shadow {
	box-shadow: 5px 5px 0px rgba(0, 0, 0, .25);
}

body, html {
	font: 10pt sans-serif;
	height: 100%;
	margin: 0;
	overflow: hidden;
}

input[type=button] {
	background-color: #ddd;
	border: 0;
	cursor: pointer;
	outline: none;
	padding: 10px 20px 10px 20px;
	&:hover {
		background-color: darken(#ddd, 10%);
	}
	&:active {
		background-color: darken(#ddd, 20%);
	}
}

.playback {
	.mi-center();
	margin-top: 300px;
}

#feedback {
	right: -190px;
	&:hover { right: 0; }
}

#game {
	.mi-center();
}

#levels {
	left: -190px;
	&:hover { left: 0; }
}

.sprite {
	background-position: 0 0;
	&.dir0 { background-position-y: 0; }
	&.dir1 { background-position-y: -50px; }
	&.dir2 { background-position-y: -100px; }
	&.dir3 { background-position-y: -150px; }
	&.frame0 { background-position-x: 0; }
	&.frame1 { background-position-x: -50px; }
	&.frame2 { background-position-x: -100px; }
	&.frame3 { background-position-x: -150px; }
	&.frame4 { background-position-x: -200px; }
	&.frame5 { background-position-x: -250px; }
	&.frame6 { background-position-x: -300px; }
	&.frame7 { background-position-x: -350px; }
	&.frame8 { background-position-x: -400px; }
	&.frame9 { background-position-x: -450px; }
}
.arrow {
	background-image: url('img/arrows.png');
	height: @gridSize;
	width: @gridSize;
	z-index: 1;
	background-position: -200px;
	transition: transform .2s, opacity .2s;
	&.dir0 { background-position: 0; }
	&.dir1 { background-position: -50px; }
	&.dir2 { background-position: -100px; }
	&.dir3 { background-position: -150px; }
	&.health1 { opacity: .5; transform: scale(.75); }
	&.health0 { opacity: 0; }
}
.cat {
	background-image: url('img/kapukapu-sprite.png');
	z-index: 3;
}
.goal {
	background-color: #f00;
	border-radius: 25px;
	z-index: 3;
	-webkit-transform: scale(0.75);
}
.grid {
	text-align: right;
	background-image: url('img/grid.png');
	z-index: 1;
	&.col1 {
		background-color: @col1;
		background: linear-gradient(135deg, @col1 0%, darken(@col1, 10%) 100%);
		/*background-image: url('img/col1.png');*/
	}
	&.col2 {
		background-color: @col2;
		background: linear-gradient(135deg, @col2 0%, darken(@col2, 10%) 100%);
		/*background-image: url('img/col2.png');*/
	}
	span {
		opacity: 0;
	}
}
.hole {
	background-color: #000;
	border-radius: 25px;
	z-index: 1;
	-webkit-transform: scale(0.75);
}
.mouse {
	background-image: url('img/chuchu-sprite.png');
	z-index: 2;
}
.toolbar {
	.mi-center();
	margin-top: 250px;
	.arrow {
		display: inline-block;
		.label {
			color: #fff;
			display: table-cell;
			font-weight: bold;
			height: 50px;
			pointer-events: none;
			text-align: center;
			vertical-align: middle;
			width: 50px;
		}
	}
}

.score {
	.mi-center();
	.content();
	margin-top: 250px;
	margin-left: 200px;
	width: 200px;
	text-align: right;
	font-family: 'Luckiest Guy';
	font-size: 16pt;
}

.message {
	.mi-center();
	.mi-box-shadow();
	.content();
	display: none;
	min-width: 350px;
	min-height: 150px;
	background-color: #fff;
	vertical-align: middle;
	z-index: 10;
	transition: opacity .2s;
	&.status-fail {
		background-color: #fcc;
	}
	&.status-success {
		background-color: #cfc;
	}
	&.visible {
		display: block;
	}
	&:hover {
		opacity: .5;
	}
}

.wall {
	background-image: url('img/walls.png');
	z-index: 4;
}

.content {
	padding: 10px;
}

.shadowtext {
	text-shadow: rgba(0, 0, 0, .5) 0px 1px 2px;
}

.sidebox {
	background-color: #000;
	color: #fff;
	height: 100%;
	position: fixed;
	top: 0;
	width: 200px;
	z-index: 10;
	display: none; /* temporary */
}

#feedback, #levels {
	transition: left .2s, right .2s;
	-webkit-transition: left .2s, right .2s;
}