html,body{margin:0;height:100%;background:#000;overflow:hidden}
canvas{display:block;touch-action:none}

/* HUD */
#hud{
  position:fixed;left:env(safe-area-inset-left,12px);
  top:env(safe-area-inset-top,12px);max-width:min(86vw,520px);
  color:#e8e8e8;font:12px/1.45 system-ui,Segoe UI,Roboto,Helvetica,Arial;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.12);
  padding:10px 12px;border-radius:10px;backdrop-filter:blur(6px);
  box-shadow:0 8px 24px rgba(0,0,0,.35); display:none; z-index:10;
}
#hud h1{margin:0 0 6px 0;font-size:13px;color:#fff}
#hud .row{display:flex;gap:8px;flex-wrap:wrap;margin:.25rem 0}
#hud .tag{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  padding:2px 6px;border-radius:999px}
#hud table{width:100%;border-collapse:collapse;margin-top:6px}
#hud td{padding:3px 0;vertical-align:top}
#hud td:first-child{opacity:.85;padding-right:8px;white-space:nowrap}
#hud small{opacity:.8}