IGDB: add DOS-only search, gameplay videos + screenshot support

- Search now filters to DOS platform only (platform ID 13)
- New fetchVideos() queries IGDB game_videos endpoint for YouTube IDs
- New fetchScreenshots() queries IGDB screenshots endpoint for images
- autoScrape and applyIgdbId both fetch videos + screenshots after match
- Upload auto-save also triggers when videos/screenshots found
- GameDetail: embed first YouTube video + scrollable screenshot gallery
- Handles missing media gracefully (section hidden entirely if neither exists)

frontend/src/pages/GameDetail.svelte

@@ -186,6 +186,38 @@
             <button class="btn btn-danger" onclick={handleDelete}>✕ Delete</button>
           </div>
 
+          <!-- Media Section — video + screenshots, handles missing media gracefully -->
+          {#if game.videos?.length || game.screenshots?.length}
+            <div class="media-section">
+              <span class="media-label">📺 Media</span>
+              <div class="media-grid">
+                {#if game.videos?.length}
+                  <div class="video-container">
+                    <iframe
+                      src="https://www.youtube.com/embed/{game.videos[0]}"
+                      title="Gameplay video"
+                      allowfullscreen
+                      frameborder="0"
+                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                    ></iframe>
+                  </div>
+                {/if}
+                {#if game.screenshots?.length}
+                  <div class="screenshots-row">
+                    {#each game.screenshots as shot}
+                      <img
+                        src={shot}
+                        alt="Screenshot"
+                        class="screenshot-thumb"
+                        loading="lazy"
+                      />
+                    {/each}
+                  </div>
+                {/if}
+              </div>
+            </div>
+          {/if}
+
           <!-- IGDB Scrape Section -->
           <div class="scrape-section">
             <div class="scrape-header">
@@ -280,6 +312,61 @@
   .edit-actions { display: flex; gap: 8px; margin-top: 12px; }
   textarea { width: 100%; min-height: 100px; }
 
+  /* Media Section — video + screenshots */
+  .media-section {
+    margin-top: 24px;
+    padding-top: 20px;
+    border-top: 1px solid var(--border);
+  }
+  .media-label {
+    display: block;
+    font-size: 0.85rem;
+    color: var(--text-dim);
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin-bottom: 12px;
+  }
+  .media-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+  .video-container {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    border-radius: var(--radius);
+    overflow: hidden;
+    background: #000;
+  }
+  .video-container iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+  .screenshots-row {
+    display: flex;
+    gap: 8px;
+    overflow-x: auto;
+    padding-bottom: 4px;
+  }
+  .screenshot-thumb {
+    flex-shrink: 0;
+    width: 240px;
+    height: 135px;
+    object-fit: cover;
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--border);
+    transition: border-color 0.15s;
+    cursor: pointer;
+  }
+  .screenshot-thumb:hover {
+    border-color: var(--phosphor-dim);
+  }
+
   /* IGDB Scrape */
   .scrape-section {
     margin-top: 24px;