html, body {
  margin: 0;
  height: 100%;
  background: #000;
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
canvas { display: block; }

#touch, #pauseBtn { display: none; }
@media (pointer: coarse) {
  #touch {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 calc(14px + env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
    pointer-events: none;
  }
  #pauseBtn {
    display: block;
    position: fixed;
    top: calc(8px + env(safe-area-inset-top));
    right: calc(8px + env(safe-area-inset-right));
  }
}
.pad { display: flex; gap: 10px; align-items: flex-end; pointer-events: auto; }
#touch button, #pauseBtn {
  width: 62px; height: 62px;
  border-radius: 50%;
  border: 2px solid rgba(255, 217, 194, .55);
  background: rgba(0, 0, 0, .35);
  color: #ffd9c2;
  font: 12px "Press Start 2P", monospace;
  touch-action: none;
  padding: 0;
}
#touch button.small { font-size: 7px; line-height: 1.6; }
#touch button.big { width: 76px; height: 76px; font-size: 9px; }
#touch button.on { background: rgba(255, 217, 194, .35); }
#pauseBtn { width: 40px; height: 40px; font-size: 9px; }

#rotate { display: none; }
@media (pointer: coarse) and (orientation: portrait) {
  #rotate {
    display: block;
    position: fixed;
    top: 18%; left: 0; right: 0;
    text-align: center;
    color: #ffd9c2;
    font: 11px/1.8 "Press Start 2P", monospace;
    pointer-events: none;
  }
}