/* TV fullscreen mode */
body.tv-fullscreen {
  justify-content: center;
}
body.tv-fullscreen .remote       { display: none !important; }
body.tv-fullscreen .header       { display: none !important; }
body.tv-fullscreen #cinema-btn-container { display: flex !important; }

body.tv-fullscreen .tv-body {
  padding: 6vh 60px 20px;
  transform: none;
}

body.tv-fullscreen #tv-fs-logo .logo {
  font-size: 52px !important;
  letter-spacing: 8px !important;
}
body.tv-fullscreen .screen {
  width: min(72vh * 4/3, 90vw);
  max-width: 95vw;
}

/* Fullscreen signal indicator */
#tv-fs-signal {
  display: none;
  position: absolute;
  top: 16px;
  right: 50px;
  font-family: 'VT323', monospace;
  font-size: 16px;
  color: var(--phosphor);
  letter-spacing: 2px;
  opacity: 0.7;
  white-space: nowrap;
  z-index: 10;
}
body.tv-fullscreen #tv-fs-signal { display: block; }

/* Fullscreen exit overlay */
.fs-exit-overlay { display: none; }

/* Channel zap animation */
@keyframes zap {
  0% { filter: brightness(3) contrast(2); transform: scaleX(1.02); }
  20% { filter: brightness(0.1); transform: scaleX(0.98); }
  40% { filter: brightness(2) hue-rotate(90deg); }
  60% { filter: brightness(0.5) saturate(3); }
  100% { filter: brightness(1) contrast(1); transform: scaleX(1); }
}

/* Screen during channel change */
.screen.zapping {
  animation: zap 0.4s ease-out;
}

/* Flicker animation */
@keyframes flicker {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.8; }
  94% { opacity: 1; }
  96% { opacity: 0.9; }
  97% { opacity: 1; }
}

/* Base screen with flicker effect */
.screen { animation: flicker 8s infinite; }

/* Cinema mode */
body.tv-cinema {
  background: #000 !important;
}

body.tv-cinema .tv-stand,
body.tv-cinema .header,
body.tv-cinema .remote,
body.tv-cinema .channel-list-container,
body.tv-cinema .guide-container,
body.tv-cinema .tv-controls,
body.tv-cinema #tv-fs-logo,
body.tv-cinema #tv-fs-signal {
  display: none !important;
}

body.tv-cinema .tv-body,
body.tv-cinema .screen-bezel {
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
}

body.tv-cinema .tv-wrapper {
  width: 100vw !important;
  height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.tv-cinema .screen {
  width: 100vw !important;
  height: 100vh !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  max-width: none !important;
  background: #000 !important;
  margin: 0 !important;
}

body.tv-cinema .video-player,
body.tv-cinema #yt-container {
  width: 100% !important;
  height: 100% !important;
}

/* Sidebars behavior in fullscreen */
body.tv-fullscreen .guide-toggle,
body.tv-fullscreen .channel-toggle {
  opacity: 0.3;
  transition: opacity 0.3s;
}
body.tv-fullscreen .guide-toggle:hover,
body.tv-fullscreen .channel-toggle:hover {
  opacity: 1;
}
body.tv-fullscreen .guide-container,
body.tv-fullscreen .channel-list-container {
  z-index: 9999; /* Ensure they are above everything in fullscreen */
}