*{font-family:Verdana,"Verdana",Helvetica,"Helvetica",Arial,"Arial";}
html,body{width:100%;height:100%;padding:0;margin:0;}
body{background-color:black;position:fixed;width:100%;}
canvas{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;}
span{z-index:1000;color:red;bottom:0;position:absolute;right:0;display:none;font-size:1em;font-weight:bold;text-align:right;vertical-align:bottom;font-family:monospace;display:none;}
#touchpad div{border-radius:100%;}
#touchpad{display:none;padding:0;margin:0;border:0;position:absolute;width:100%;height:100%;top:0;left:0;right:0;bottom:0;}
#touchpad div:nth-child(1){cursor:pointer;padding:0;margin:0;border:0;position:absolute;width:24%;height:7%;top:3%;left:0}
#touchpad div:nth-child(2){cursor:pointer;padding:0;margin:0;border:0;position:absolute;width:24%;height:7%;top:3%;left:75%}
#touchpad div:nth-child(3){cursor:pointer;padding:0;margin:0;border:0;position:absolute;width:7%;height:10%;bottom:2%;left:37%}
#touchpad div:nth-child(4){cursor:pointer;padding:0;margin:0;border:0;position:absolute;width:7%;height:10%;bottom:2%;left:56%}
#touchpad div:nth-child(5){cursor:pointer;padding:0;margin:0;border:0;position:absolute;width:18%;height:22%;top:35%;left:81%}
#touchpad div:nth-child(6){cursor:pointer;padding:0;margin:0;border:0;position:absolute;width:16%;height:23%;top:47%;left:59%}
#touchpad div:nth-child(7){cursor:pointer;padding:0;margin:0;border:0;position:absolute;width:14%;height:16%;top:25%;left:13%}
#touchpad div:nth-child(8){cursor:pointer;padding:0;margin:0;border:0;position:absolute;width:14%;height:16%;top:60%;left:13%}
#touchpad div:nth-child(9){cursor:pointer;padding:0;margin:0;border:0;position:absolute;width:14%;height:17%;top:42%;left:0}
#touchpad div:nth-child(10){cursor:pointer;padding:0;margin:0;border:0;position:absolute;width:12%;height:17%;top:42%;left:27%}
#touchpad div:nth-child(11){cursor:pointer;padding:0;margin:0;border:0;position:absolute;width:10%;height:10%;bottom:2%;left:0}
#touchpad div:nth-child(12){display:none;}
#msg{transition:opacity 1s;pointer-events:none;background-color:purple;border:1em solid gray;color:white;border-radius:5%;position:absolute;top:25%;left:25%;right:25%;bottom:25%;width:50%;height:50%;}
.mobile #touchpad{display:block;}
#overlay{opacity:0;pointer-events:none;background-color:rgba(0,0,0,0);background-repeat:no-repeat;background-position:center center;background-size:100% 100%;background-image:url(../delta-emulator-controls.png);display:block;position:absolute;top:0;left:0;right:0;bottom:0;z-index:100;}
.mobile #overlay{opacity:0.5;}
@media screen and (orientation:portrait){
.mobile #overlay{opacity:1;background-image:url(../delta-emulator-controls.jpg);background-position:center bottom;background-size:100% 50%;}
#touchpad{height:50%;top:50%;}
canvas{bottom:50%;height:50%;}
body:not(.mobile) canvas{top:25%;bottom:25%;}
}
@media screen and (orientation:landscape){
#touchpad div:nth-child(1){cursor:pointer;padding:0;margin:0;border:0;position:absolute;width:18vw;height:18vh;top:0vh;left:0vw;}
#touchpad div:nth-child(2){cursor:pointer;padding:0;margin:0;border:0;position:absolute;width:18vw;height:18vh;top:0vh;left:81vw;}
#touchpad div:nth-child(3){cursor:pointer;padding:0;margin:0;border:0;position:absolute;width:11vw;height:14vh;top:85vh;left:36vw;}
#touchpad div:nth-child(4){cursor:pointer;padding:0;margin:0;border:0;position:absolute;width:11vw;height:14vh;top:85vh;left:51vw;}
#touchpad div:nth-child(5){cursor:pointer;padding:0;margin:0;border:0;position:absolute;width:14vw;height:21vh;top:58vh;left:85vw;}
#touchpad div:nth-child(6){cursor:pointer;padding:0;margin:0;border:0;position:absolute;width:11vw;height:25vh;top:75vh;left:73vw;}
#touchpad div:nth-child(7){cursor:pointer;padding:0;margin:0;border:0;position:absolute;width:9vw;height:14vh;top:50vh;left:10vw;}
#touchpad div:nth-child(8){cursor:pointer;padding:0;margin:0;border:0;position:absolute;width:9vw;height:14vh;top:81vh;left:10vw;}
#touchpad div:nth-child(9){cursor:pointer;padding:0;margin:0;border:0;position:absolute;width:10vw;height:15vh;top:65vh;left:0vw;}
#touchpad div:nth-child(10){cursor:pointer;padding:0;margin:0;border:0;position:absolute;width:7vw;height:15vh;top:65vh;left:19vw;}
#touchpad div:nth-child(11){cursor:pointer;padding:0;margin:0;border:0;position:absolute;width:11vw;height:14vh;top:0vh;left:44vw;}
#touchpad div:nth-child(12){display:block;cursor:pointer;padding:0;margin:0;border:0;position:absolute;width:14vw;height:20vh;top:80vh;left:86vw;}
}