diff --git a/public/app.js b/public/app.js
index c2ac345..97b6254 100644
--- a/public/app.js
+++ b/public/app.js
@@ -160,9 +160,9 @@ function showSelectChannelBox() {
 }
 
 function channelOverlayBg(color) {
-  // Softer than a flat fill: a gentle radial gradient in the channel colour,
-  // slightly translucent so it reads as a loading veil, not a hard block.
-  return `radial-gradient(circle at 50% 45%, ${color}E6 0%, ${color}F2 55%, ${color}FF 100%)`;
+  // Fully opaque so the player underneath never shows through while loading.
+  // A subtle radial lightening keeps it from looking like a flat block.
+  return `radial-gradient(circle at 50% 45%, ${color} 0%, ${color} 60%, ${color} 100%)`;
 }
 
 function showVideoPlayer(ch) {
@@ -171,8 +171,8 @@ 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 .5s ease;z-index:2;pointer-events:none;">
-        <img src="${logo}" alt="" style="max-width:32%;max-height:32%;object-fit:contain;opacity:.92;filter:drop-shadow(0 2px 8px rgba(0,0,0,.25));">
+      <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;">
+        <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>
   `;