html, body { margin:0; padding:0; height:100%; background:#000; overflow:hidden; touch-action:none; }
#hud {
  position:fixed; left:0; top:0; right:0;
  padding:10px 12px;
  font: 12px/1.35 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  color: rgba(220,235,255,.95);
  text-shadow: 0 1px 2px rgba(0,0,0,.7);
  pointer-events:none;
  user-select:none;
  white-space:pre;
}
#hint {
  position:fixed; left:50%; top:50%;
  transform:translate(-50%,-50%);
  padding:10px 12px;
  border:1px solid rgba(120,170,255,.35);
  background: rgba(10,20,40,.45);
  color: rgba(220,235,255,.95);
  font: 13px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  border-radius:12px;
  backdrop-filter: blur(8px);
  max-width: 560px;
  text-align:center;
}
#hint b { color: #fff; }
#hint small { opacity:.85; display:block; margin-top:6px; }

/* Touch controls */
.touch {
  position:fixed;
  bottom: max(14px, env(safe-area-inset-bottom));
  width: 160px; height: 160px;
  border-radius: 999px;
  background: rgba(40,80,160,.10);
  border: 1px solid rgba(120,170,255,.22);
  backdrop-filter: blur(6px);
  pointer-events:auto;
  touch-action:none;
  display:none; /* shown on touch devices */
}
.touch .knob {
  position:absolute; left:50%; top:50%;
  width: 64px; height: 64px;
  transform: translate(-50%,-50%);
  border-radius: 999px;
  background: rgba(120,170,255,.18);
  border: 1px solid rgba(160,200,255,.35);
}
#leftTouch { left: max(14px, env(safe-area-inset-left)); }
#rightTouch { right: max(14px, env(safe-area-inset-right)); }

.btnGrid {
  position:fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: calc(max(14px, env(safe-area-inset-bottom)) + 170px);
  display:none;
  grid-template-columns: repeat(3, 56px);
  grid-auto-rows: 56px;
  gap:10px;
  pointer-events:auto;
}
.btn {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: rgba(40,80,160,.14);
  border: 1px solid rgba(120,170,255,.25);
  color: rgba(230,245,255,.95);
  font: 12px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  display:grid; place-items:center;
  user-select:none;
  touch-action:none;
}
.btnWide { grid-column: span 2; width: calc(56px*2 + 10px); }
.btn:active { transform: scale(.98); }