fix: move LIVE badge to top-left corner of video player

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

Author: raccommode

static/model.html

@@ -650,11 +650,11 @@
           <span id="theaterText">Theater Mode</span>
         </button>
         <video id="player" class="video-player" muted autoplay></video>
+        <span class="live-badge">&#9679; LIVE</span>
         <div class="live-controls" id="liveControls">
           <button class="live-ctrl-btn" id="livePlayPauseBtn" onclick="liveTogglePlayPause()" title="Play/Pause">&#9646;&#9646;</button>
           <button class="live-ctrl-btn" id="liveMuteBtn" onclick="liveToggleMute()" title="Mute/Unmute">&#128263;</button>
           <input type="range" class="live-volume-slider" id="liveVolumeSlider" min="0" max="1" step="0.05" value="0.7" oninput="liveChangeVolume(this.value)" />
-          <span class="live-badge">&#9679; LIVE</span>
           <div class="live-ctrl-spacer"></div>
           <button class="live-ctrl-btn" id="liveFullscreenBtn" onclick="liveToggleFullscreen()" title="Fullscreen">&#x26F6;</button>
         </div>

static/styles.css

@@ -2563,12 +2563,16 @@ button {
 }
 
 .live-badge {
-  color: #ef4444;
-  font-size: 0.8rem;
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+  z-index: 10;
+  color: #fff;
+  background: #ef4444;
+  font-size: 0.75rem;
   font-weight: 700;
   letter-spacing: 0.05em;
-  padding: 0.2rem 0.6rem;
-  border: 1px solid #ef4444;
+  padding: 0.25rem 0.6rem;
   border-radius: 4px;
   user-select: none;
 }

static/watch.html

@@ -18,11 +18,11 @@
   <!-- Video Player (Theater Mode) -->
   <div class="watch-player-container">
     <video id="videoPlayer" class="watch-video" autoplay playsinline></video>
+    <span class="live-badge">&#9679; LIVE</span>
     <div class="live-controls" id="liveControls">
       <button class="live-ctrl-btn" id="playPauseBtn" onclick="togglePlayPause()" title="Play/Pause">&#9654;</button>
       <button class="live-ctrl-btn" id="muteBtn" onclick="toggleMute()" title="Mute/Unmute">&#128264;</button>
       <input type="range" class="live-volume-slider" id="volumeSlider" min="0" max="1" step="0.05" value="0.7" oninput="changeVolume(this.value)" />
-      <span class="live-badge">&#9679; LIVE</span>
       <div class="live-ctrl-spacer"></div>
       <button class="live-ctrl-btn" id="fullscreenBtn" onclick="toggleFullscreen()" title="Fullscreen">&#x26F6;</button>
     </div>