Simplify Play page: no Start Game button, seamless boot

- dos-container div always mounted (fixes circular dep: container needed for start, was gated on running)
- Overlay covers the empty canvas while booting: Loading → Booting (CDN) → Running
- No intermediate "Start Game" screen — emulator auto-starts immediately
- Error state shown inline if something fails
- Stop button + back arrow both kill emulator and return to detail

frontend/src/pages/Play.svelte

@@ -25,7 +25,7 @@
   }
 
   async function startEmulator() {
-    if (!dosContainer || !game?.ready || running || started) return;
+    if (started || !game?.ready || !dosContainer) return;
     started = true;
     booting = true;
 
@@ -35,7 +35,7 @@
     link.href = "https://v8.js-dos.com/latest/js-dos.css";
     document.head.appendChild(link);
 
-    // Load js-dos script from CDN if not already loaded
+    // Load js-dos script from CDN
     if (!window.Dos) {
       try {
         await new Promise((resolve, reject) => {
@@ -55,19 +55,16 @@
     // Start the DOS emulator
     try {
       const url = bundleUrl(game);
-      if (!url || !window.Dos) {
+      if (!url || !window.Dos) throw new Error("Failed to resolve game bundle");
-        throw new Error("Failed to resolve game bundle");
-      }
       dosCI = await window.Dos(dosContainer, { url });
       running = true;
     } catch (e) {
-      error = "Failed to start emulator: " + e.message;
+      error = e.message;
     }
     booting = false;
   }
 
   function stopEmulator() {
-    // Kill the emulator process
     if (dosCI) {
       try { dosCI.exit(); } catch (_) {}
       dosCI = null;
@@ -76,21 +73,19 @@
       dosContainer.innerHTML = "";
     }
     running = false;
-    // Navigate back to game detail
     push(`/game/${game.id}`);
   }
 
-  // Load game data on mount
   $effect(() => { load(); });
 
-  // Auto-start emulator once game data and DOM are ready
+  // Auto-start when both game data and the container exist
   $effect(() => {
     if (game?.ready && dosContainer && !started) {
       startEmulator();
     }
   });
 
-  // Cleanup on unmount (navigating away, browser back, etc.)
+  // Cleanup emulator on component unmount (browser back, nav away)
   $effect(() => {
     return () => {
       if (dosCI) {
@@ -100,82 +95,64 @@
       if (dosContainer) {
         dosContainer.innerHTML = "";
       }
-      running = false;
     };
   });
 </script>
 
-{#if loading}
+<div class="play-page">
-  <div class="loading">Loading...</div>
+  <!-- Top bar: shown when game is loaded -->
-{:else if error}
+  <div class="play-header" class:active={game}>
-  <div class="play-page">
+    {#if game}
-    <a href="#/" class="back-link">← Back to Library</a>
-    <div class="error-msg">{error}</div>
-  </div>
-{:else if game}
-  <div class="play-page">
-    <!-- Top bar -->
-    <div class="play-header">
       <button class="link-button" onclick={stopEmulator}>← {game.title}</button>
       {#if running}
         <button class="btn stop-btn" onclick={stopEmulator}>⏹ Stop</button>
       {/if}
+    {/if}
   </div>
 
-    <!-- Booting state -->
+  <!-- Error state -->
-    {#if booting && !running}
+  {#if error && !booting}
-      <div class="booting">
+    <div class="error-box">{error}</div>
-        <div class="booting-icon">⚙️</div>
+  {/if}
-        <h2>{game.title}</h2>
+
+  <!-- Loading / booting overlay (covers the canvas while loading) -->
+  {#if !running}
+    <div class="overlay">
+      {#if loading}
+        <div class="overlay-icon">⏳</div>
+        <p>Loading game data...</p>
+      {:else if booting}
+        <div class="overlay-icon">⚙️</div>
+        <h2>{game?.title || ""}</h2>
         <p>Starting emulator...</p>
-        <p class="save-hint">💾 Game saves are stored automatically in your browser</p>
+        <p class="save-hint">💾 Game saves are stored automatically</p>
+      {:else if error}
+        <div class="overlay-icon">⚠️</div>
+        <h2>Failed to start</h2>
+        <p>{error}</p>
+      {:else if !game?.ready}
+        <div class="overlay-icon">🕹️</div>
+        <h2>Not ready</h2>
+        <p>This game hasn't been processed yet.</p>
+      {/if}
     </div>
   {/if}
 
-    <!-- Emulator canvas -->
+  <!-- dos-container is always in the DOM so bind:this works on first render -->
-    {#if running}
-      <div class="emulator-wrapper">
   <div bind:this={dosContainer} class="dos-container"></div>
-      </div>
+</div>
-    {/if}
-
-    <!-- Empty state (shouldn't normally show) -->
-    {#if !booting && !running}
-      <div class="booting">
-        <div class="booting-icon">🕹️</div>
-        <h2>{game.title}</h2>
-        {#if game.ready}
-          <button class="btn btn-primary" onclick={startEmulator}>▶ Start Game</button>
-        {:else}
-          <p>This game is not ready yet.</p>
-        {/if}
-        <p class="save-hint">💾 Game saves are stored automatically in your browser</p>
-      </div>
-    {/if}
-  </div>
-{/if}
 
 <style>
-  .play-page { padding: 16px 0; }
+  .play-page { padding: 16px 0; position: relative; }
-  .loading {
+  .play-header {
-    text-align: center;
+    display: flex;
-    padding: 60px;
+    justify-content: space-between;
-    color: var(--text-dim);
+    align-items: center;
+    margin-bottom: 12px;
+    opacity: 0;
+    transition: opacity 0.2s;
   }
-  .error-msg {
+  .play-header.active { opacity: 1; }
-    background: #331111;
-    border: 1px solid #cc3333;
-    color: #ff6666;
-    padding: 12px 16px;
-    border-radius: var(--radius-sm);
-    margin-top: 16px;
-  }
-  .back-link {
-    display: inline-block;
-    color: var(--text-dim);
-    font-size: 0.9rem;
-  }
-  .back-link:hover { color: var(--phosphor); }
   .link-button {
     background: none;
     border: none;
@@ -186,12 +163,6 @@
     font-family: var(--font-sans);
   }
   .link-button:hover { color: var(--phosphor); }
-  .play-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 12px;
-  }
   .stop-btn {
     border-color: #cc3333;
     color: #ff4444;
@@ -201,20 +172,44 @@
     box-shadow: 0 0 12px #331111;
   }
 
-  /* Booting / transitional state */
+  /* Emulator canvas — always mounted */
-  .booting {
+  .dos-container {
-    text-align: center;
+    width: 100%;
-    padding: 60px 20px;
+    aspect-ratio: 4/3;
-    border: 1px dashed var(--border);
+    max-height: 80vh;
+    background: #000;
     border-radius: var(--radius);
+    overflow: hidden;
+    border: 1px solid var(--border);
   }
-  .booting-icon { font-size: 3rem; margin-bottom: 16px; }
+  .dos-container :global(canvas) {
-  .booting h2 {
+    width: 100% !important;
+    height: 100% !important;
+  }
+
+  /* Overlay shown while loading / booting, covers the empty container */
+  .overlay {
+    position: absolute;
+    inset: 0;
+    top: 50px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    background: var(--bg);
+    z-index: 10;
+    border-radius: var(--radius);
+    border: 1px dashed var(--border);
+    margin-top: 4px;
+  }
+  .overlay-icon { font-size: 3rem; margin-bottom: 12px; }
+  .overlay h2 {
     color: var(--phosphor);
     font-family: var(--font-mono);
-    margin-bottom: 8px;
+    margin-bottom: 4px;
   }
-  .booting p { color: var(--text-dim); }
+  .overlay p { color: var(--text-dim); }
   .save-hint {
     display: inline-block;
     margin-top: 16px;
@@ -225,20 +220,18 @@
     font-size: 0.85rem;
   }
 
-  /* Emulator */
+  .error-box {
-  .emulator-wrapper {
+    position: absolute;
-    background: #000;
+    inset: 0;
+    top: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 4px;
+    background: #331111;
+    border: 1px solid #cc3333;
+    color: #ff6666;
     border-radius: var(--radius);
-    overflow: hidden;
+    z-index: 10;
-    border: 1px solid var(--border);
-  }
-  .dos-container {
-    width: 100%;
-    aspect-ratio: 4/3;
-    max-height: 80vh;
-  }
-  .dos-container :global(canvas) {
-    width: 100% !important;
-    height: 100% !important;
   }
 </style>