feat: frontend remote relay, kiosk hardening, CSS compositor fix

Frontend:
- Add remote-relay.ts: receives companion input via /ws/remote-relay,
  dispatches keyboard/mouse/scroll events into browser DOM
- Add CompanionIndicator.vue: NES gamepad icon when companion connected
- Wire relay start/stop to auth state in App.vue

Kiosk:
- Move Chromium data dir to /var/lib/archipelago/chromium-kiosk (encrypted)
- Disable MetricsReporting, AutofillServerCommunication, PasswordManager
- Remove --metrics-recording-only (contradicts disable-metrics)

CSS:
- Fix Chromium ghost rectangles: only apply preserve-3d + backface-visibility
  during transitions, not always-on (causes Chromium to skip painting
  off-viewport cards)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

neode-ui/src/components/CompanionIndicator.vue

@@ -0,0 +1,81 @@
+<template>
+  <Transition name="companion-fade">
+    <div
+      v-if="companionActive"
+      class="companion-indicator"
+      title="Companion app connected"
+    >
+      <!-- Wire going down off-screen -->
+      <div class="companion-wire" />
+
+      <!-- Gamepad body -->
+      <div class="companion-pad" :class="{ 'input-flash': companionInputActive }">
+        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+          <!-- Controller body -->
+          <rect x="3" y="7" width="18" height="11" rx="3" stroke="currentColor" stroke-width="1.5" />
+          <!-- D-pad vertical -->
+          <rect x="7.5" y="10" width="2" height="5" rx="0.5" fill="currentColor" />
+          <!-- D-pad horizontal -->
+          <rect x="6" y="11.5" width="5" height="2" rx="0.5" fill="currentColor" />
+          <!-- A button -->
+          <circle cx="16" cy="11" r="1.2" fill="currentColor" />
+          <!-- B button -->
+          <circle cx="14" cy="13.5" r="1.2" fill="currentColor" />
+        </svg>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+import { companionActive, companionInputActive } from '@/api/remote-relay'
+</script>
+
+<style scoped>
+.companion-indicator {
+  position: fixed;
+  bottom: 0;
+  right: 24px;
+  z-index: 9998;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  pointer-events: none;
+}
+
+.companion-pad {
+  color: rgba(247, 147, 26, 0.7);
+  background: rgba(0, 0, 0, 0.6);
+  border: 1px solid rgba(247, 147, 26, 0.3);
+  border-bottom: none;
+  border-radius: 8px 8px 0 0;
+  padding: 6px 10px 4px;
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  transition: color 0.15s, border-color 0.15s, box-shadow 0.15s;
+}
+
+.companion-pad.input-flash {
+  color: rgba(247, 147, 26, 1);
+  border-color: rgba(247, 147, 26, 0.6);
+  box-shadow: 0 0 12px rgba(247, 147, 26, 0.25);
+}
+
+.companion-wire {
+  width: 2px;
+  height: 20px;
+  background: linear-gradient(to bottom, rgba(247, 147, 26, 0.5), rgba(247, 147, 26, 0.15));
+  border-radius: 1px;
+  order: 1;
+}
+
+.companion-pad {
+  order: 0;
+}
+
+/* Fade transition */
+.companion-fade-enter-active { transition: opacity 0.4s ease, transform 0.4s ease; }
+.companion-fade-leave-active { transition: opacity 0.3s ease, transform 0.3s ease; }
+.companion-fade-enter-from { opacity: 0; transform: translateY(20px); }
+.companion-fade-leave-to { opacity: 0; transform: translateY(20px); }
+</style>