html,body { margin: 0; padding: 0; height: 100%; width: 100%; }
body {background-color: #000; text-align: center;}
* { touch-action: manipulation;}

.wrap-game {width:100%; max-width:1200px; margin:0 auto;}
.controlliMain-container {display: grid; grid-template-columns: 1fr 1fr 1fr; justify-items: center; margin-bottom: 25px;}

.fuller-button {color: white; background: none; border-radius: 0; padding: 1em 5em; letter-spacing: 0.35em; font-size: 1.5em; transition: background-color 0.3s, box-shadow 0.3s, color 0.3s; margin: 1em;}
.fuller-button.green {box-shadow: inset 0 0 1em rgba(0, 170, 5, 0.5), 0 0 1em rgba(22, 170, 0, 0.5);  border: #20ff20 solid 2px;}
.fuller-button.green:hover { background-color: #20ff20; box-shadow: inset 0 0 0 rgba(27, 170, 0, 0.5), 0 0 1.5em rgba(5, 170, 0, 0.7);}
.pure-button {width:450px;	height: 80px; margin: 60px auto; display: inline-block; text-decoration: none; zoom: 1; line-height: normal; white-space: nowrap; vertical-align: baseline; text-align: center; cursor: pointer; -webkit-user-drag: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;   user-select: none;}
button:focus {box-sizing: border-box; outline: none !important;	border: none !important; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent;	-webkit-touch-callout: none; -webkit-user-select: none;	-khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}

canvas {background-color: black; border: 1px solid black;}
[class*="push"] {position: relative; display: inline-block; width: 240px; height: 240px; border: 0; margin: 1em; outline: none; background-color: #c2290a; border-radius: 50%; cursor: pointer; transition: box-shadow 200ms;}

.push--shot { box-shadow: inset 0 7.5px 0 #da2e0b, inset 0 -7.5px 0 #aa2409, inset 0 0 0 7.5px #b32609, inset 0 0 0 20px #c2290a, inset 0 0 0 24px #611405, inset 0 0 0 26.0869565217px black, inset 0 0 0 32px rgba(247, 133, 110, 0.7), inset 0 0 0 43.6363636364px #c2290a, inset 0 96px 32px #aa2409, inset 0 0 24px 40px #911f08, 0 12px 0 rgba(0, 0, 0, 0.3);}
.push--shot:after { content: ''; position: absolute; bottom: 12px; left: 24px; display: block; width: 192px; height: 192px; border: 16px solid rgba(0, 0, 0, 0.3);
  border-width: 0 0 16px; border-radius: 50%; transition-duration: 200ms;}
.push--shot:active, .push--flat.is-pushed {box-shadow: inset 0 7.5px 0 #da2e0b, inset 0 -7.5px 0 #aa2409, inset 0 0 0 7.5px #b32609, inset 0 0 0 20px #c2290a, inset 0 0 0 24px #611405, inset 0 0 0 28.2352941176px black, inset 0 0 0 32px rgba(247, 133, 110, 0.2), inset 0 0 0 43.6363636364px #b32609, inset 0 96px 32px #9b2108, inset 0 0 24px 40px #791a06, 0 12px 0 rgba(0, 0, 0, 0.3); background-color: #b8270a;}
.push--shot:active:after, .push--flat.is-pushed:after {bottom: 28px; border-width: 0;}
.push--move {background-color: #03A9F4; box-shadow: inset 0 7.5px 0 #03A9F4, inset 0 -7.5px 0 #2196F3, inset 0 0 0 7.5px #2196F3, inset 0 0 0 20px #2196F3, inset 0 0 0 24px #3F51B5, inset 0 0 0 26.0869565217px black, inset 0 0 0 32px rgba(110, 197, 247, 0.7), inset 0 0 0 43.6363636364px #03A9F4, inset 0 96px 32px #2196F3, inset 0 0 24px 40px #3F51B5, 0 12px 0 rgba(0, 0, 0, 0.3);}
.push--move:after {content: ''; position: absolute; bottom: 12px; left: 24px; display: block; width: 192px; height: 192px; border: 16px solid rgba(0, 0, 0, 0.3);
  border-width: 0 0 16px; border-radius: 50%; transition-duration: 200ms;}
.push--move:active, .push--flat.is-pushed {box-shadow: inset 0 7.5px 0 #03A9F4, inset 0 -7.5px 0 #2196F3, inset 0 0 0 7.5px #2196F3, inset 0 0 0 20px #2196F3, inset 0 0 0 24px #3F51B5, inset 0 0 0 28.2352941176px black, inset 0 0 0 32px rgba(110, 191, 247, 0.2), inset 0 0 0 43.6363636364px #03A9F4, inset 0 96px 32px #2196F3, inset 0 0 24px 40px #2196F3, 0 12px 0 rgba(0, 0, 0, 0.3); background-color: #2196F3;}
.push--move:active:after, .push--flat.is-pushed:after {bottom: 28px; border-width: 0;}


/* ----------------------- MINI-SMARTPHONE ------------------*/
@media screen and (min-width: 0px) and (max-width: 600px) {

}
/* ----------------------- SMARTPHONE ------------------*/
@media screen and (min-width: 601px) and (max-width: 768px) {

}
/* ----------------------- TABLET LANDSCAPE ------------------*/
@media screen and (min-width: 769px) and (max-width: 1024px) {

}
/* ----------------------- OVER ------------------*/
@media only screen and (min-width: 1025px){

.controlliMain-container {display:none;}
	
}