Fix fallback behavior

Author: cppshane

src/app/app.component.css

@@ -30,6 +30,14 @@
   isolation: isolate;
 }
 
+/* No stream / embed unavailable — keep full-screen black behind the timer UI */
+.focus-stream-layer__blank {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  background: #000;
+}
+
 /* Pomodoro card + Exit button stacked, centered over the video */
 .focus-stream-layer__column {
   position: absolute;

src/app/app.component.html

@@ -64,14 +64,13 @@ <h1 class="site-title">lucent.earth</h1>
   </button>
 }
 
-@if (!focusMode || !focusStreamEmbedUrl) {
+@if (!focusMode) {
   <button
     type="button"
     class="focus-mode-launch"
-    [class.focus-mode-launch--exit]="focusMode"
     (click)="toggleFocusMode()"
-    [attr.aria-label]="focusMode ? 'Exit Focus mode' : 'Enter Focus mode'"
-    [attr.title]="focusMode ? 'Exit Focus mode' : 'Focus mode — fullscreen stream with corner globe'"
+    aria-label="Enter Focus mode"
+    title="Focus mode — corner globe and focus timer"
   >
     <span class="focus-mode-launch__face">
       <svg
@@ -84,24 +83,26 @@ <h1 class="site-title">lucent.earth</h1>
           d="M11 21h-1l1-7H7.5c-.58 0-.57-.32-.38-.66.19-.34.05-.08.07-.12C8.48 10.94 10.42 7.54 13 3h1l-1 7h3.5c.49 0 .56.33.47.51l-.07.15C12.96 17.55 11 21 11 21z"
         />
       </svg>
-      <span class="focus-mode-launch__label">{{
-        focusMode ? 'Exit focus' : 'Focus Mode'
-      }}</span>
+      <span class="focus-mode-launch__label">Focus Mode</span>
     </span>
   </button>
 }
 
-@if (focusMode && focusStreamEmbedUrl) {
+@if (focusMode) {
   <div class="focus-stream-layer">
     <div class="focus-stream-layer__cover" inert aria-hidden="true">
-      <iframe
-        class="focus-stream-layer__iframe"
-        [src]="focusStreamEmbedUrl"
-        [title]="focusStreamIframeTitle"
-        tabindex="-1"
-        allowfullscreen
-        allow="autoplay; fullscreen; picture-in-picture"
-      ></iframe>
+      @if (focusStreamEmbedUrl) {
+        <iframe
+          class="focus-stream-layer__iframe"
+          [src]="focusStreamEmbedUrl"
+          [title]="focusStreamIframeTitle"
+          tabindex="-1"
+          allowfullscreen
+          allow="autoplay; fullscreen; picture-in-picture"
+        ></iframe>
+      } @else {
+        <div class="focus-stream-layer__blank" aria-hidden="true"></div>
+      }
     </div>
     <div class="focus-stream-layer__column">
       <div class="focus-stream-layer__stack">