diff --git a/public/app.js b/public/app.js
index 97b6254..da4a978 100644
--- a/public/app.js
+++ b/public/app.js
@@ -171,7 +171,7 @@ function showVideoPlayer(ch) {
   document.getElementById('player-area').innerHTML = `
     <div class="split__video_ratio" style="position:relative;">
       <video id="video" controls autoplay loop playsinline></video>
-      <div id="video-loading" style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:${bg};border-radius:15px;transition:opacity .35s ease;z-index:2;pointer-events:none;">
+      <div id="video-loading" style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:${bg};border-radius:15px;z-index:2;pointer-events:none;">
         <img src="${logo}" alt="" style="max-width:32%;max-height:32%;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(0,0,0,.25));">
       </div>
     </div>
@@ -179,9 +179,11 @@ function showVideoPlayer(ch) {
 }
 
 // Hide the channel-logo loading overlay once real playback starts.
+// Instant hide (no opacity fade) so the player never shows through a
+// half-transparent overlay mid-transition.
 function hideLoadingOverlay() {
   const el = document.getElementById('video-loading');
-  if (el) { el.style.opacity = '0'; setTimeout(() => { if (el) el.style.display = 'none'; }, 500); }
+  if (el) el.style.display = 'none';
 }
 // Show it again (e.g. when switching channel / falling back).
 function showLoadingOverlay(ch) {