fix(machine): add mobile responsive layout for atm.aiolabs.dev

The kiosk UI was optimized for 1920px touchscreens, breaking mobile web.
Uses Tailwind lg: breakpoints (mobile-first) so mobile works naturally
while kiosk sizing applies at 1024px+. No JS branching — pure CSS.

- Viewport: width=1920 → width=device-width
- Kiosk-only: overflow:hidden and cursor:none behind @media (min-width: 1024px)
- IdleView: stack buttons vertically on mobile, justify-around for even spacing
- CashInView/CashOutView: stack split panels on mobile (flex-col-reverse lg:flex-row)
- QRCode: SVG scales down on small screens via max-w-full
- App.vue: hide verbose badges on mobile, debug bar collapses theme/color selectors
- Connection/network badges always visible (not gated by isIdle)
- Reduce zone-glow animation intensity by half (20px/4px vs 40px/8px)
- All lg: values verified to match original kiosk rendering

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

apps/machine/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=1920, initial-scale=1.0, user-scalable=no" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
     <title>Lamassu ATM</title>
     <style>
       /* Prevent text selection and context menu on kiosk */
@@ -17,9 +17,15 @@
       body {
         margin: 0;
         padding: 0;
-        overflow: hidden;
         background: #000;
-        cursor: none;
+      }
+      /* Kiosk-only: lock overflow and hide cursor */
+      @media (min-width: 1024px) {
+        html,
+        body {
+          overflow: hidden;
+          cursor: none;
+        }
       }
     </style>
   </head>