body {
    overscroll-behavior: none;
    caret-color:transparent; 
    font:normal 1em sans-serif;
    background-color:#333;
}

#main{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background-image:url(../image/game_bg.png)
}

.container{
display:flex;
flex-flow: row wrap;
justify-content: space-around;
}

.item{
margin:30px 5px 0;
}

#controls{
background:gray;
padding:5px;
}

#controls h6{
margin:15px 0 5px 0;
text-align:center;
}

#controls input,#controls select{
width:150px;
}

#controls input,#controls select,#controls label{
cursor:pointer;
}

#run{
color:green;
font-weight:bold;
}

#range{
display:block;
margin-top:-5px;
}

#fullscrn{
display:none;
}

#fullscrn+label{
display:block;
margin:10px auto 0;
background: url(../image/fullscrn.png) left top/cover #444 no-repeat;
width:30px;
height:30px;
}

#fullscrn+label:hover{
background-color:#222;
}

#fullscrn:checked+label{
background-position-y: -30px;    
}

.board{
perspective:2000px;
width:500px;
height:500px;
background: black; 
border:20px dashed gray;
box-shadow:0 0 50px 10px white inset;  
}

.board figure{
position:absolute;
margin:0;
}

.v-board{
width:30px;
height:100%;
}

.h-board{
width:100%;
height:30px;
}

.v-board,.h-board{
background-color:red;
box-shadow:0 0 10px 2px black inset;
}

.plate{
width:100%;
height:100%;
background:green;
transform: rotateX(0deg) rotateY(0deg);
transform-style:preserve-3d;
}

.outside{
position:absolute;
width:100%;
height:100%;
backface-visibility:hidden;
background-image:url(../image/border.jpg);
background-repeat:round;
}

.left-border{
transform-origin: top left;  
transform:rotateY(-90deg)
}

.right-border{
transform-origin: left;    
transform:rotateY(-90deg) rotateX(180deg) translateZ(500px)
}

.top-border{
transform-origin: top;    
transform:rotateX(90deg) 
}

.bottom-border{
transform-origin: top;    
transform:rotateX(90deg) translateZ(-500px) rotateY(180deg)
}

.pad{
width:250px;
height:250px;
margin:0 auto;
background:#888;
border:6px ridge #000;
box-shadow: 10px 10px 10px rgba(0,0,0,.5);    
border-radius:10px;
position:relative;
cursor:none;
color:#7a7a7a;
text-align:center;
}

.pad span{
display:inline-block;
margin-top: 116px;    
}

.ctrlH,.ctrlV{
background-image:radial-gradient(white,black,white);
position:absolute;
border-radius:50%;
}

.ctrlH{
width:100%;
height:10px;
}

.ctrlV{
width:10px;
height:100%;
}

canvas{
position:absolute;
}