/* Midnight Channel v1.2 visual system — Architecture v1.3 PR-26
   Inert until body.mc-v12-visual (ENABLE_V12_VISUAL). Legacy CRT frame unchanged when flag off. */

.crt-v12-overlay {
  display: none;
}

body.mc-v12-visual {
  background: #000;
}

body.mc-v12-visual .crt-frame {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  transform: none;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  background: #000;
}

body.mc-v12-visual .crt-bezel {
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  background: #000;
}

body.mc-v12-visual .static-overlay {
  display: none;
}

/* PR-27 — v1.2: no on-screen text except tap prompt */
body.mc-v12-visual .channel-id {
  display: none !important;
}

body.mc-v12-visual .crt-screen {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0;
  animation: mc-v12-phosphor-breathe 9s ease-in-out infinite;
  box-shadow:
    inset 0 0 40px rgba(0, 255, 65, 0.08),
    inset 0 0 120px rgba(0, 0, 0, 0.45);
}

body.mc-v12-visual #player,
body.mc-v12-visual #yt-player,
body.mc-v12-visual #player iframe {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  top: 0 !important;
  left: 0 !important;
  border-radius: 0 !important;
}

body.mc-v12-visual .crt-v12-overlay {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  overflow: hidden;
}

body.mc-v12-visual .crt-v12-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.18) 0,
    rgba(0, 0, 0, 0.18) 1px,
    transparent 1px,
    transparent 3px
  );
  opacity: 0.5;
  mix-blend-mode: multiply;
}

body.mc-v12-visual .crt-v12-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 42%,
    rgba(0, 0, 0, 0.35) 72%,
    rgba(0, 0, 0, 0.82) 100%
  );
}

body.mc-v12-visual .crt-v12-phosphor {
  position: absolute;
  inset: 0;
  background: rgba(0, 255, 65, 0.03);
  box-shadow: inset 0 0 80px rgba(0, 255, 65, 0.06);
}

@keyframes mc-v12-phosphor-breathe {
  0%, 100% {
    box-shadow:
      inset 0 0 40px rgba(0, 255, 65, 0.08),
      inset 0 0 120px rgba(0, 0, 0, 0.45);
  }
  50% {
    box-shadow:
      inset 0 0 55px rgba(0, 255, 65, 0.12),
      inset 0 0 140px rgba(0, 0, 0, 0.5);
  }
}

@media (max-width: 768px) {
  body.mc-v12-visual .crt-frame {
    width: 100vw;
    height: 100vh;
    padding: 0;
    border-width: 0;
  }

  body.mc-v12-visual .crt-screen {
    aspect-ratio: auto;
    height: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.mc-v12-visual .crt-screen {
    animation: none !important;
  }
}