body{background:#000;margin:0;font-family:calibri;overflow:hidden}canvas{display:block}#dpad-container{z-index:100;touch-action:none;grid-template-rows:repeat(3,50px);grid-template-columns:repeat(3,50px);gap:5px;display:grid;position:fixed;bottom:10px;right:10px}#console-container{text-align:right;font-size:.1em;position:fixed;bottom:0;right:0}#cam-container{z-index:100;touch-action:none;grid-template-rows:repeat(3,50px);grid-template-columns:repeat(3,50px);gap:5px;display:grid;position:fixed;top:20px;left:10px}#character-control-container{width:50%;max-width:200px;position:fixed;top:35px;left:10px}h1{color:#ffffff40;text-align:left;filter:drop-shadow(4px 4px 8px #00000080);text-transform:lowercase;font-family:Arial,Helvetica,sans-serif;font-size:1.25em;line-height:.5em;position:absolute;top:0;left:10px}h1 a{color:#ffffff40;font-size:.5em;text-decoration:none}#character-control-result{line-height:.5em;position:fixed;top:35px;right:10px}#character-control-result label{color:orange;font-size:.5em;line-height:.5em}select,input[type=range]{width:100%}label{color:#fff;white-space:nowrap}#swipe-zone{text-align:center;filter:drop-shadow(4px 4px 8px #00000080);background-color:#ffffff40;border:1px solid #ffffff80;border-radius:4em;width:8em;height:8em;line-height:8em;position:absolute;bottom:1em;left:calc(50% - 4em)}#camera-knob{filter:drop-shadow(4px 4px 8px #00000080);background-color:#ffffff80;border-radius:1em;width:2em;height:2em;position:relative;top:calc(50% - 1em);left:calc(50% - 1em)}
