html, body { margin: 0; height: 100%; overflow: hidden; background: #05060a; }
canvas { display: block; width: 100vw; height: 100vh; touch-action: none; cursor: crosshair; }

.help {
  position: fixed; left: 1rem; bottom: 1rem; max-width: 22rem;
  padding: 0.8rem 1rem; border-radius: 0.6rem;
  background: rgba(8, 10, 18, 0.62); color: #c9d0e0;
  font: 13px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  backdrop-filter: blur(6px); pointer-events: none; user-select: none;
}
.help[hidden] { display: none; }
.help h1 { margin: 0 0 0.4rem; font-size: 14px; font-weight: 600; color: #eef2fa; letter-spacing: 0.02em; }
.help ul { margin: 0; padding-left: 1.1rem; }
.help b { font-weight: 600; color: #eef2fa; }
.help kbd {
  font: inherit; font-size: 12px; padding: 0 0.3em; border-radius: 0.25em;
  border: 1px solid rgba(201, 208, 224, 0.35);
}
.help .status { margin: 0.5rem 0 0; font-size: 12px; opacity: 0.7; }