html, body {
	margin: 0;
	padding: 0;
}

.tile {
	position: absolute;
	margin: 0;
	padding: 0;
	background-repeat: no-repeat;
	background-size: contain;
	z-index: 1000;
	cursor: pointer;
	transition: filter .3s ease;
}
.hint {filter: invert(1);}

.button {
	position: relative;
	margin: 0;
	padding: 0;
	background-size: cover;
	box-shadow: 2px 2px 4px black;
	z-index: 3000;
	cursor: pointer;
	transition: all .3s ease;
}
.button:hover {filter: brightness(1.5);}
.L-status .button {box-shadow: 2px 2px 4px black;}
.R-status .button {box-shadow: -2px 2px 4px black;}
.disable {
	filter: grayscale(1);
	opacity: .75;
	pointer-events: none;
}
.cost-frame {
	position: absolute;
	margin: 0;
	padding: 0;
	left: 55%;
	top: 45%;
	font-size: 32px;
	color: white;
	font-weight: bold;
}

.ball {
	display: inline-block;
	margin: 0;
	padding: 0;
	background-image: url('images/redball.png');
	background-repeat: no-repeat;
	background-size: contain;
	transition: filter .3s ease;
}
.brightly {filter: brightness(3);}
.eliminate {filter: grayscale(1);}

.character {
	position: absolute;
	margin: 0;
	padding: 0;
}

#base {
	position: absolute;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background-image: url('images/bg.jpg');
	background-size: cover;
}

#basic-layout {
	display: flex;
	position: relative;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}
.L-status {flex-direction: row;}
.R-status {flex-direction: row-reverse;}

#status {
	display: flex;
	flex-direction: column;
	position: relative;
	margin: 0;
	padding: 0;
}

#control-box {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	position: relative;
	margin: 0;
	padding: 96px 0 48px;
}

#basket {
	position: relative;
	margin: 0;
	padding: 0;
	width: 160px;
	height: 100%;
	overflow: hidden;
	line-height: 0;
}

#swap {
	margin-top: auto;
    margin-bottom: 2em;
	background-image: url('images/swap.png');
	background-repeat: no-repeat;
	background-size: contain;
	z-index: 3000;
	cursor: pointer;
	transition: all .3s ease;
}
#swap:hover {filter: brightness(2);}

#mat {
	position: relative;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

#connect {
	position: absolute;
	margin: 0;
	padding: 0;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
    display: none;
}

#score {
	position: absolute;
	margin: 0;
	padding: 0;
	left: 2%;
	top: 2%;
	color: white;
	font-weight: bold;
	font-size: 32px;
	text-shadow: 0 4px 4px black;
}

#message {
    display: none;
	position: absolute;
	margin: 0;
	padding: 0;
	left: 0;
	top: 0;
    width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.5);
	text-align: center;
	pointer-events: none;
	z-index: 2000;
}

@media (orientation: portrait) {
	#basic-layout {flex-direction: column;}
	#control-box {flex-direction: row;}
	#basket {width: auto; text-align: center;}
	#swap {display: none;}
}