body {
	background-color: #cf9;
	font-family: 'Meiryo', 'Verdana', sans-serif;
	color: #004000;
}
#game {
	width: 480px;
	height: 272px;
	position: relative;
	background-image: url('background.png');
	margin: 10px auto;
	border: 1px solid #004000;
}
#panel {
	width: 192px;
	height: 192px;
	position: absolute;
	line-height: 1.15;
	left: 284px;
	top: 76px;
	background-color: #cf9;
	color: #004000;
}
#panel p {
	margin: 8px 0;
}
#panel>div {
	animation: fadein 0.4s 1s ease both;
	-webkit-animation: fadein 0.4s 1s ease both;
	text-align: center;
	margin: 8px;
}
#cards>div {
	position: absolute;
	width: 32px;
	height: 32px;
	background-image: url('cards.png');
}
#cards>div[onClick] {cursor:pointer}
.card_x0 {left: 0}
.card_x1 {left: 48px}
.card_x2 {left: 96px}
.card_x3 {left: 144px}
.card_x4 {left: 192px}
.card_y0 {top: 0}
.card_y1 {top: 48px}
.card_y2 {top: 96px}
.card_y3 {top: 144px}
.card_y4 {top: 192px}
.cardflip {
	animation: cardflip 0.6s 0.2s step-start backwards;
	-webkit-animation: cardflip 0.6s 0.2s step-start backwards;
}
.card_0 {background-position: -192px 0}
.card_1 {background-position: -256px 0}
.card_2 {background-position: -288px 0}
.card_3 {background-position: -320px 0}
.flash {
	position: absolute;
	margin: -8px;
	background-image: url('flash.png');
	width: 48px;
	height: 48px;
	animation: flash 0.6s 1s steps(4,end);
	-webkit-animation: flash 0.6s 1s steps(4,end);
	z-index:-1;
}
.explode {
	position: absolute;
	margin: -16px;
	width: 64px;
	height: 64px;
	background-image: radial-gradient( circle 32px, rgba(0,0,0,0) 18px, rgba(0,0,0,0.75) 20px, #d54f2a 24px, #fbeb00 26px, rgba(229,140,2,0.75) 30px, rgba(203,73,25,0) 32px);
			transform-origin: center center;
	-webkit-transform-origin: center center;
	animation: explosion 0.8s 1s steps(4,start) both;
	-webkit-animation: explosion 0.8s 1s steps(4,start) both;
	z-index: -1;
}
.level {
	position: absolute;
	left: 448px;
	top: 40px;
	width: 32px;
	height: 32px;
	background-image: url('level.png');
	animation: levelup 0.6s steps(8,end) 3 both;
	-webkit-animation: levelup 0.6s steps(8,end) 3 both;
}
.leveldown {
	animation-name: leveldown;
	-webkit-animation-name: leveldown;
}
#hints>div>div {
	position: absolute;
	width: 7px;
	height: 9px;
	background-image: url('font.png');
}
.num_hint_0 {background-position: 0 0}
.num_hint_1 {background-position: 0 -9px}
.num_hint_2 {background-position: 0 -18px}
.num_hint_3 {background-position: 0 -27px}
.num_hint_4 {background-position: 0 -36px}
.num_hint_5 {background-position: 0 -45px}
.num_hint_6 {background-position: 0 -54px}
.num_hint_7 {background-position: 0 -63px}
.num_hint_8 {background-position: 0 -72px}
.num_hint_9 {background-position: 0 -81px}
#hint_r0>div {left: 256px; top: 0px}
#hint_r1>div {left: 256px; top: 48px}
#hint_r2>div {left: 256px; top: 96px}
#hint_r3>div {left: 256px; top: 144px}
#hint_r4>div {left: 256px; top: 192px}
#hint_c0>div {left: 16px; top: 240px}
#hint_c1>div {left: 64px; top: 240px}
#hint_c2>div {left: 112px; top: 240px}
#hint_c3>div {left: 160px; top: 240px}
#hint_c4>div {left: 208px; top: 240px}
.num_hint_val0 {margin: 0 0}
.num_hint_val1 {margin: 0 8px}
.num_hint_volt {margin: 18px 8px}
#totalcoins>div, #levelcoins>div, #level {
	position: absolute;
	width: 14px;
	height: 18px;
	background-image: url('font.png');
}
.num_coins_0 {background-position: -7px 0}
.num_coins_1 {background-position: -7px -18px}
.num_coins_2 {background-position: -7px -36px}
.num_coins_3 {background-position: -7px -54px}
.num_coins_4 {background-position: -7px -72px}
.num_coins_5 {background-position: -21px 0}
.num_coins_6 {background-position: -21px -18px}
.num_coins_7 {background-position: -21px -36px}
.num_coins_8 {background-position: -21px -54px}
.num_coins_9 {background-position: -21px -72px}
.num_totalcoins_0 {left: 352px; top: 6px}
.num_totalcoins_1 {left: 368px; top: 6px}
.num_totalcoins_2 {left: 384px; top: 6px}
.num_totalcoins_3 {left: 400px; top: 6px}
.num_totalcoins_4 {left: 416px; top: 6px}
.num_totalcoins_5 {left: 432px; top: 6px}
.num_totalcoins_6 {left: 448px; top: 6px}
.num_levelcoins_0 {left: 340px; top: 46px}
.num_levelcoins_1 {left: 356px; top: 46px}
.num_levelcoins_2 {left: 372px; top: 46px}
.num_levelcoins_3 {left: 388px; top: 46px}
#level {left: 432px; top: 46px}

@keyframes fadein {
	from {opacity:0}
	to {opacity:1}
}
@keyframes cardflip {
	0% {background-position: 0 0}
	20% {background-position: -32px 0}
	40% {background-position: -64px 0}
	60% {background-position: -96px 0}
	80% {background-position: -128px 0}
	100% {background-position: -160px 0}
}
@keyframes flash {
	from {background-position:0 0;z-index:1}
	to {background-position:-192px 0;z-index:1}
}
@keyframes explosion {
	from {transform:scale(0); -webkit-transform:scale(0);z-index:1}
	to {transform:scale(1); -webkit-transform:scale(1);z-index:1}
}
@keyframes levelup {
	from {background-position:0 0}
	to {background-position:-256px 0}
}
@keyframes leveldown {
	from {background-position:0 -32px}
	to {background-position:-256px -32px}
}

@-webkit-keyframes fadein {
	from {opacity:0}
	to {opacity:1}
}
@-webkit-keyframes cardflip {
	0% {background-position: 0 0}
	20% {background-position: -32px 0}
	40% {background-position: -64px 0}
	60% {background-position: -96px 0}
	80% {background-position: -128px 0}
	100% {background-position: -160px 0}
}
@-webkit-keyframes flash {
	from {background-position:0 0;z-index:1}
	to {background-position:-192px 0;z-index:1}
}
@-webkit-keyframes explosion {
	from {transform:scale(0); -webkit-transform:scale(0);z-index:1}
	to {transform:scale(1); -webkit-transform:scale(1);z-index:1}
}
@-webkit-keyframes levelup {
	from {background-position:0 0}
	to {background-position:-256px 0}
}
@-webkit-keyframes leveldown {
	from {background-position:0 -32px}
	to {background-position:-256px -32px}
}