index.css

body{
	font-size: 15px; padding:0;
	margin:0; box-sizing:border-box;
	background:lightskyblue;
}

#main{
	position:fixed; display:flex;
	width:100%; height:100%;
	padding:5px; left:0; top:0;
	box-sizing:border-box;
	background:linear-gradient(90deg, #101020, #101020,#101020);
}


.control{
	width:calc(50% - 50px);
	height:100%; display:block;
	position:fixed; z-index:2;
	background:transparent;
}
.control.right{
	right:0px;
}


#main-sub{
	display:flex; padding:0px;
	position:relative; margin:auto;
	width:100%; height:100%;
	justify-content:space-between;
	align-items:stretch;
	max-width:365px; z-index:1;
	flex-flow:column wrap;
}
#main-sub > *{
	display:block; width:100%;
	box-sizing:border-box;
}


#settingsOp {
	position:absolute; z-index:1;
	display:flex; font-size:2em;
	flex-direction:column;
	left:calc(50% - 20px);
	width:40px; height:50px;
	background:red; 
	border-radius:0px 0px 40px 40px;
	overflow:hidden; top:-100px;
	background:#101020;
	transition:0.3s ease-in;
}
#settingsOp.visible{
	top:0px;
}
#settingsOp span{
	position:relative; bottom:0px;
	margin:auto auto 4px auto;
	color:#fff; 
}


#arena{
	flex-grow:1; background:#fff;
	box-shadow:0 0 1px #333;
	border:1px solid #fff;
	border-radius:3px;
	margin:0px auto;
	position:relative; padding:3px;
	max-width:348px; max-height:364px;
}

#arena > *{
	display:block; position:absolute;
}
#arena span{
	width:40px; height:8px;
	background:#000; left:0px;
	border-radius:3px;
	display:flex;
}
#arena #bot{
	top:1px;
	border-botom:2px solid #b03f52;
}
#arena #player{
	bottom:1px;
	brder-top:2px solid #66AA80;
}
#arena #ball{
	position:absolute; bottom:0px;
	font-size:15px; color:#486fb7;
}
#arena span b{
	margin:auto; position:relative;
	height:2px; width:38px; 
	border-radius:3px;
	margin-bottom:1px;
	background:#b03f52;
}
#arena #player b{
	background:#486fb7;
	margin:1px auto auto auto;
}


#stats{
	display:flex; overflow:hidden;
	width:calc(100% - 4px);
	box-sizing:border-box;
	margin:auto; color:#fff;
	height:55px; flex-wrap:wrap;
	border:3px solid transparent;
	border-left-color:#D34262;
	border-right-color:#96AAFF;
}
#stats > span, #stats i{
	display:inline-block;
	margin:auto 0px;
}

.score-enter-active, .score-leave-active{
	position:relative; 
	transitin:all 0.25s linear;
	transiton-delay:0s;
}
.score-enter-to{
	animation:bounce 0.5s ease 0s 1;
}
@keyframes bounce {
	30%{
		bottom: 20px;
		transform:scale(0.35);
	}
	60%{
		bottom: 0px; 
		transform:scale(0.6);
	}
	80%{
		bottom: 20px;
		transform:scale(0.35);
	}
	100%{
		bottom: 0px;
		transform:scale(1);
	}
}

#stats > span{
	padding:0px 3px;
	display:flex; 
	font-size:2.3em;
	font-weight:bold;
	margin:auto 3px;
}
#stats > .fa{
	margin:auto auto; 
	padding:0px 7px;
	height:100%; width:50px;
	text-align:center;
	max-width:50px;
	line-height:3.4em;
}


#controls{
	height:80px;
	background:rgba(250,250,250,.001);
	padding:2px; display:flex;
	flex-flow:column wrap;
}
#bar-box{
	display:flex; width:auto;
	padding:0px; height:100%;
	box-sizing:border-box;
	flex-wrap:wrap;
	justify-content:space-between;
}
#bar-box > *{
	width:49%; padding:0px;
	color:#fff; text-align:center;
	box-sizing:border-box;
	display:block; font-size:70px;
	border:none; margin:auto 0px;
}
#bar-box div:active{
	background:rgba(255,255,255,0.01);
	-webkit-transform: scale(0.9);
}