html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  background: #000; overflow: hidden;
  font-family: monospace;
  -webkit-user-select: none; user-select: none;
  touch-action: none;
}
#wrap { position: fixed; inset: 0; background: #000; }
#gl, #ovl {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
#ovl { pointer-events: none; }
#bootmsg {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  color: #c33; font: bold 24px monospace; letter-spacing: 4px;
  text-shadow: 0 0 12px #f00;
}
#bootmsg.hidden { display: none; }

/* ---- touch controls ---- */
#touchui { display: none; }
#touchui.on { display: block; }
#stick {
  position: absolute; left: 4vw; bottom: 6vh;
  width: 34vmin; height: 34vmin; max-width: 150px; max-height: 150px;
  border: 2px solid rgba(255,255,255,.35); border-radius: 50%;
  background: rgba(255,255,255,.06); pointer-events: none;
}
#stickknob {
  position: absolute; left: 50%; top: 50%;
  width: 40%; height: 40%; border-radius: 50%;
  background: rgba(200,40,40,.5); border: 2px solid rgba(255,120,120,.7);
  transform: translate(-50%,-50%);
}
.tbtn {
  position: absolute; pointer-events: auto;
  display: flex; align-items: center; justify-content: center;
  color: #ffb; font: bold 13px monospace;
  border: 2px solid rgba(255,255,255,.4); border-radius: 12px;
  background: rgba(120,30,30,.35); text-shadow: 0 1px 2px #000;
}
.tbtn.held { background: rgba(220,60,60,.6); }
#tb-fire   { right: 4vw;  bottom: 12vh; width: 22vmin; height: 22vmin; max-width:110px; max-height:110px; border-radius:50%; font-size:16px;}
#tb-use    { right: 26vw; bottom: 6vh;  width: 14vmin; height: 14vmin; max-width:76px; max-height:76px; border-radius:50%; }
#tb-jump   { right: 5vw;  bottom: 34vh; width: 14vmin; height: 14vmin; max-width:76px; max-height:76px; border-radius:50%; }
#tb-crouch { right: 22vw; bottom: 26vh; width: 12vmin; height: 12vmin; max-width:64px; max-height:64px; border-radius:50%; }
#tb-kick   { right: 34vw; bottom: 14vh; width: 12vmin; height: 12vmin; max-width:64px; max-height:64px; border-radius:50%; }
#tb-wpn-prev { left: 40vw; bottom: 4vh; width: 10vmin; height: 9vmin; max-width:56px; max-height:48px; }
#tb-wpn-next { left: 52vw; bottom: 4vh; width: 10vmin; height: 9vmin; max-width:56px; max-height:48px; }
#tb-map    { left: 4vw; top: 4vh; width: 12vmin; height: 9vmin; max-width:64px; max-height:48px; }
#tb-pause  { right: 4vw; top: 4vh; width: 12vmin; height: 9vmin; max-width:64px; max-height:48px; }