* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #9fc6de; }
#view { display: block; width: 100%; height: 100%; }

#hud {
  position: fixed;
  top: 8px;
  left: 8px;
  padding: 7px 9px;
  border-radius: 6px;
  background: rgba(16, 20, 26, 0.42);
  color: rgba(255, 255, 255, 0.88);
  font: 11px/1.5 ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;
  backdrop-filter: blur(3px);
  user-select: none;
  pointer-events: auto;
  min-width: 168px;
}
#hud .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#hud .k { color: rgba(255, 255, 255, 0.5); }

#hud select, #hud button {
  font: inherit;
  color: inherit;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  padding: 1px 4px;
  cursor: pointer;
}
#hud select option { color: #111; }
#hud button { width: 100%; margin-top: 4px; padding: 3px; }
#hud button:hover, #hud select:hover { background: rgba(255, 255, 255, 0.18); }

#hud-note { margin-top: 4px; color: rgba(180, 230, 180, 0.85); min-height: 1em; }
#hud-note.err { color: rgba(255, 190, 140, 0.95); }
#hud-help { margin-top: 5px; color: rgba(255, 255, 255, 0.38); font-size: 10px; }