#loading-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: #03000a;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  transition: opacity .6s ease;
}
#loading-overlay.hide { opacity: 0; pointer-events: none; }

/* CN base + channel copies */
#loading-cn, #loading-cn-r, #loading-cn-b {
  position: absolute;
  font-size: 80px; font-weight: 900;
  font-family: 'Arial Black', sans-serif;
  line-height: 1; user-select: none;
}
#loading-cn   { color: #fff; z-index: 2; }
#loading-cn-r { color: #ff0055; mix-blend-mode: screen; z-index: 1; }
#loading-cn-b { color: #0088ff; mix-blend-mode: screen; z-index: 1; }

/* VHS scanlines */
#loading-overlay::before {
  content: '';
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 3px,
    rgba(255,255,255,.015) 3px, rgba(255,255,255,.015) 4px
  );
  opacity: 1; transition: opacity 1s ease;
}
#loading-overlay.phase2::before { opacity: 0.4; }
#loading-overlay.phase3::before { opacity: 0; }

/* VHS tear */
#loading-tear {
  position: absolute; left: 0; right: 0; height: 4px; z-index: 4;
  background: linear-gradient(90deg, transparent 10%, rgba(255,0,85,.4) 40%, rgba(0,136,255,.4) 60%, transparent 90%);
  opacity: 0; transition: opacity .1s;
  pointer-events: none;
}

/* Label */
#loading-label {
  position: absolute; bottom: calc(50% - 72px);
  font-size: 10px; letter-spacing: .35em; color: #6600ff99;
  z-index: 5; white-space: nowrap;
}

/* Progress bar */
#loading-progress-wrap {
  position: absolute; bottom: calc(50% - 84px);
  width: 140px; height: 2px;
  background: #ffffff08; border-radius: 2px; overflow: hidden;
}
#loading-progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--purple), var(--purple2), var(--red));
  border-radius: 2px;
  box-shadow: 0 0 8px var(--purple2);
  transition: width .1s linear;
}