* { touch-action:none;}
div#viewport {
  /* background-image: url("../com.centralperp.art/effect/screen-grill.png"); */
}
div#scene {
  background:#0000 url("../com.centralperp.art/level/central_perp/old/cperp_floorplan.png") center/contain no-repeat;
  width:100vw;
  height:100vh;
  top:0;
  left: 0;
}

div.player {
  background:#0000 url("../com.centralperp.art/character_primary/bandolier/demo32.png") center/contain no-repeat;
  position: absolute;
  width: 50px;
  height: 50px;
  transform: translateZ(-300px);
}


/* mobile controls */

div#pointer-controls {
    /* position:absolute; */
  display:none;
  justify-content:space-around;
    margin-top:70vh;
}

div#joystick-border {
  background: #0000 url("../com.centralperp.art/ui_elements/joystick_border.png") center/contain no-repeat;
  display: flex;
  z-index: 1;
  width:160px;
  height:160px;
  justify-content:center;
  align-items:center;
}
img#joystick {
  aspect-ratio: 1;
  width:70%;
  /* height:70%; */
}

div#buttons {
  position: relative;
  width:220px;
}
input.button {
  font-size: large;
  width: 100px;
  height: 100px;
    
  background: #0000 url("../com.centralperp.art/ui_elements/button.png") center/contain no-repeat;

  border:none;
  padding:0;
    outline:none;
}
input.button:active {
  filter: brightness(50%);
}
input#button-b {
  position: absolute;
  left:120px;
}
input#button-a {
  position: absolute;
  bottom: 0px;
}