feat: responsive mobile UI across all pages

Global:
- Viewport meta already present; added -webkit-text-size-adjust: 100%
- Container padding reduces to 12px on mobile (was 24px)
- Smaller heading sizes (h1: 1.5rem, h2: 1.25rem)
- Buttons get min-height 40px for touch targets
- Inputs forced to 16px font-size to prevent iOS zoom
- Thinner scrollbar on mobile

Header:
- Logo text shrinks to 1rem on mobile, icon to 28px
- Header padding reduces to 12px

Library:
- Toolbar stacks vertically on mobile, full-width inputs
- Grid forced to 2 columns on narrow screens (480px), reduced gap

GameCard:
- Smaller info text, padding, badge on 480px screens

GameDetail:
- Cover section capped at 200px width on mobile
- Media thumbnails shrink to 160x90
- Scrape header stacks vertically with full-width buttons
- Edit rows stack vertically on mobile

Play:
- DOS container caps at 50vh on mobile, smaller border-radius
- Overlay text/icon sizes reduced, more compact layout

frontend/src/app.css

@@ -52,6 +52,7 @@
 html {
   font-size: 16px;
   -webkit-font-smoothing: antialiased;
+  -webkit-text-size-adjust: 100%;
 }
 
 body {
@@ -170,6 +171,19 @@ input::placeholder {
   margin: 0 auto;
   padding: 0 24px;
 }
+@media (max-width: 640px) {
+  .container { padding: 0 12px; }
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   RESPONSIVE TOUCH ADJUSTMENTS
+   ═══════════════════════════════════════════════════════════════ */
+@media (max-width: 640px) {
+  h1 { font-size: 1.5rem; }
+  h2 { font-size: 1.25rem; }
+  .btn { padding: 8px 14px; font-size: 0.85rem; min-height: 40px; }
+  input, textarea, select { font-size: 16px; } /* prevents iOS zoom */
+}
 
 /* ═══════════════════════════════════════════════════════════════
    SCROLLBAR

frontend/src/lib/GameCard.svelte

@@ -87,6 +87,12 @@
     overflow: hidden;
     text-overflow: ellipsis;
   }
+  @media (max-width: 480px) {
+    .info { padding: 8px; }
+    .info h3 { font-size: 0.8rem; }
+    .year, .genre { font-size: 0.7rem; }
+    .badge { font-size: 0.6rem; padding: 1px 6px; top: 4px; right: 4px; }
+  }
   .year, .genre {
     font-size: 0.8rem;
     color: var(--text-dim);

frontend/src/lib/Header.svelte

@@ -40,6 +40,9 @@
     align-items: center;
     justify-content: space-between;
   }
+  @media (max-width: 640px) {
+    .header-inner { padding: 0 12px; }
+  }
   .logo {
     display: flex;
     align-items: center;
@@ -58,6 +61,10 @@
     letter-spacing: 0.15em;
     animation: phosphor-pulse 3s ease-in-out infinite;
   }
+  @media (max-width: 640px) {
+    .logo-text { font-size: 1rem; letter-spacing: 0.1em; }
+    .logo-icon { width: 28px; height: 28px; }
+  }
   nav {
     display: flex;
     gap: 8px;

frontend/src/pages/GameDetail.svelte

@@ -545,4 +545,18 @@
     background: #112211;
     color: #66ff66;
   }
+
+  /* ─── Responsive ────────────────────────────────── */
+  @media (max-width: 640px) {
+    .detail { padding: 16px 0; }
+    .detail-layout { gap: 16px; }
+    .cover-section { max-width: 200px; }
+    .cover-placeholder { font-size: 3rem; }
+    .media-thumb { width: 160px; height: 90px; }
+    .scrape-header { flex-direction: column; align-items: flex-start; gap: 8px; }
+    .scrape-buttons { width: 100%; }
+    .scrape-buttons .btn { flex: 1; justify-content: center; }
+    .edit-row { flex-direction: column; }
+    .edit-row input { width: 100% !important; }
+  }
 </style>

frontend/src/pages/Library.svelte

@@ -105,6 +105,9 @@
   .library {
     padding: 32px 0;
   }
+  @media (max-width: 640px) {
+    .library { padding: 16px 0; }
+  }
   .toolbar {
     display: flex;
     justify-content: space-between;
@@ -124,6 +127,12 @@
     align-items: center;
     flex-wrap: wrap;
   }
+  @media (max-width: 640px) {
+    .toolbar-actions { width: 100%; flex-direction: column; }
+    .toolbar-actions input[type="text"] { width: 100%; min-width: 0; }
+    .upload-group { width: 100%; }
+    .title-input { width: 100% !important; min-width: 0 !important; }
+  }
   .toolbar-actions input {
     min-width: 200px;
   }
@@ -148,6 +157,9 @@
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
     gap: 20px;
   }
+  @media (max-width: 480px) {
+    .grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
+  }
   .error {
     background: #331111;
     border: 1px solid #cc3333;

frontend/src/pages/Play.svelte

@@ -139,6 +139,7 @@
 
 <style>
   .play-page { padding: 16px 0; position: relative; }
+  @media (max-width: 640px) { .play-page { padding: 8px 0; } }
   .play-header {
     display: flex;
     justify-content: space-between;
@@ -177,6 +178,9 @@
     overflow: hidden;
     border: 1px solid var(--border);
   }
+  @media (max-width: 640px) {
+    .dos-container { aspect-ratio: 4/3; max-height: 50vh; border-radius: var(--radius-sm); }
+  }
   .dos-container :global(canvas) {
     width: 100% !important;
     height: 100% !important;
@@ -197,6 +201,13 @@
     border-radius: var(--radius);
     border: 1px dashed var(--border);
     margin-top: 4px;
+    padding: 20px;
+  }
+  @media (max-width: 640px) {
+    .overlay { top: 44px; border-radius: var(--radius-sm); padding: 16px; }
+    .overlay-icon { font-size: 2rem; }
+    .overlay h2 { font-size: 1rem; }
+    .overlay p { font-size: 0.85rem; }
   }
   .overlay-icon { font-size: 3rem; margin-bottom: 12px; }
   .overlay h2 {