feat: metadata overlay tweaks — location badge, rounded corners, translucent option

- Location gets its own badge in the lower-left corner (separate from
  the main date/time/people/camera badge at the configured position)
- All overlay badges now use rounded corners (radius 4px) via
  fillRoundRect instead of fillRect
- New setting: 'Translucent background?' checkbox in web UI
  When enabled, badge backgrounds use a checkerboard pattern (every
  other pixel black) instead of solid black, creating a 50% opacity
  effect that lets the underlying image show through
- Refactored all badge drawing through a single drawOverlayBadge()
  helper (metadata, sleep indicator, battery indicator)

Co-authored-by: Cursor <cursoragent@cursor.com>

data/app.js

@@ -173,6 +173,9 @@ async function renderDisplay(el) {
                     <option value="5" ${settings.meta_pos===5?'selected':''}>Overlay - Bottom Right</option>
                 </select>
             </div>
+            <ul class="checkbox-list">
+                <li><input type="checkbox" id="metaTranslucent" ${settings.meta_translucent?'checked':''}><span>Translucent background?</span></li>
+            </ul>
         </div>
         <div class="card">
             <h2>Battery Indicator</h2>
@@ -189,6 +192,7 @@ async function renderDisplay(el) {
             pipeline_mode: parseInt(document.getElementById('pipelineMode').value),
             meta_flags: flags,
             meta_pos: parseInt(document.getElementById('metaPos').value),
+            meta_translucent: document.getElementById('metaTranslucent').checked ? 1 : 0,
             date_fmt: document.getElementById('dateFmt').value,
             time_fmt: document.getElementById('timeFmt').value,
             show_battery: document.getElementById('showBattery').checked ? 1 : 0