* { margin:0; padding:0; box-sizing:border-box; }
html, body {
  width:100%; height:100%;
  background:#0a0a12;
  overflow:hidden;
  touch-action:none;
  -webkit-user-select:none; user-select:none;
  font-family: "Courier New", monospace;
}
#wrap {
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
}
#game {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background:#000;
  max-width:100vw;
  max-height:100vh;
  aspect-ratio: 8/5;
  width:auto; height:auto;
}
@media (min-aspect-ratio: 8/5) { #game { height:100vh; width:auto; } }
@media (max-aspect-ratio: 8/5) { #game { width:100vw; height:auto; } }

#touch { display:none; }
body.touch #touch { display:block; }
#joy {
  position:fixed; left:18px; bottom:18px;
  width:110px; height:110px;
  border:2px solid rgba(255,255,255,.35);
  border-radius:50%;
  background:rgba(255,255,255,.06);
  z-index:10;
}
#knob {
  position:absolute; left:35px; top:35px;
  width:40px; height:40px;
  border-radius:50%;
  background:rgba(255,255,255,.4);
}
#actBtn {
  position:fixed; right:22px; bottom:30px;
  width:84px; height:84px;
  border-radius:50%;
  border:2px solid rgba(255,90,90,.7);
  background:rgba(255,60,60,.25);
  color:#ffdddd;
  font-size:34px; line-height:80px; text-align:center;
  z-index:10;
}
#actBtn:active { background:rgba(255,60,60,.55); }