*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  font-family:Arial,sans-serif;
  text-align:center;
  background:#bfe8ff;
  padding:12px;
  overscroll-behavior:none;
}
h2{margin:.35rem 0}
.help{margin:.35rem 0 .7rem}
#controlChoice{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  justify-content:center;
  align-items:center;
  margin:.5rem auto;
}
canvas{
  display:block;
  width:min(100%,900px);
  height:auto;
  margin:0 auto;
  background:linear-gradient(#87ceeb,#dff7ff);
  border:3px solid #444;
  border-radius:12px;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}
#info{
  min-height:1.4em;
  margin:.65rem 0;
  font-weight:700;
}
.touch-controls{
  display:flex;
  justify-content:center;
  gap:.75rem;
  margin:.5rem auto 0;
}
.touch-controls button{
  min-height:52px;
  min-width:132px;
  padding:.7rem 1rem;
  border:2px solid #444;
  border-radius:14px;
  background:#f5f5f5;
  font-size:1rem;
  font-weight:800;
  touch-action:manipulation;
}
.touch-controls button:active:not(:disabled){
  transform:translateY(2px);
}
.touch-controls button:disabled{
  opacity:.55;
}
@media(max-width:600px){
  body{padding:8px}
  h2{font-size:1.25rem}
  .help{font-size:.92rem}
  #controlChoice{font-size:.9rem}
  .touch-controls{
    position:sticky;
    bottom:8px;
    z-index:10;
  }
  .touch-controls button{
    flex:1;
    max-width:220px;
  }
}