/* ---- TV Page Layout ---- */
.tv-page {
  width: min(1100px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 1rem 0 3rem;
}

.tv-back {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.88rem; font-weight: 600; color: var(--accent);
  margin-bottom: 0.75rem; text-decoration: none;
}

/* ---- Channel Picker ---- */
.channel-picker {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-bottom: 1rem;
}
.channel-btn {
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--paper);
  font-size: 0.85rem; font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  color: var(--ink);
}
.channel-btn:hover {
  border-color: var(--accent);
}
.channel-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ---- Player + Sidebar Layout ---- */
.tv-layout {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 1.5rem;
  align-items: start;
}

.tv-player-wrap {
  min-width: 0;
}

.tv-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.player-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  background: #000;
  border-radius: var(--radius-md);
  overflow: hidden;
}
/* Transparent overlay to block mouse events from reaching YouTube iframe UI */
.player-mouse-guard {
  position: absolute;
  inset: 0;
  z-index: 3;
  cursor: default;
}

/* ---- Breaking News interrupt overlay ---- */
.breaking-news {
  position: absolute;
  inset: 0;
  z-index: 15;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.breaking-news.visible {
  opacity: 1;
  pointer-events: auto;
}
.bn-bg {
  position: absolute;
  inset: 0;
  background: #000 url('../assets/townhall.webp') center / cover no-repeat;
  opacity: 0.3;
  filter: brightness(0.3) saturate(0);
}
.bn-line {
  position: absolute;
  left: 0; right: 0;
  white-space: nowrap;
  font-family: Impact, 'Arial Black', sans-serif;
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  -webkit-text-stroke: 2px #000;
  paint-order: stroke fill;
  text-shadow: 3px 3px 0 #000, -2px -2px 0 #000;
}
.bn-line-top {
  top: 30%;
  font-size: 3.5rem;
  color: #ef4444;
  text-align: center;
  -webkit-text-stroke: 2px #7f1d1d;
  text-shadow: 3px 3px 0 #7f1d1d, -2px -2px 0 #7f1d1d;
  transform: translateX(-110%);
}
.bn-line-bottom {
  top: 55%;
  font-size: 1.8rem;
  color: #fff;
  text-align: center;
  transform: translateX(110%);
}
/* Slide in: decelerate to center stop. Slide out: accelerate from center. */
.bn-line-top.animate-in {
  animation: bnSlideFromLeft 5s forwards;
  animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
}
.bn-line-bottom.animate-in {
  animation: bnSlideFromRight 5s forwards;
  animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
}
@keyframes bnSlideFromLeft {
  0%   { transform: translateX(-110%); animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1); }
  22%  { transform: translateX(0%); animation-timing-function: linear; }
  78%  { transform: translateX(0%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
  100% { transform: translateX(110%); }
}
@keyframes bnSlideFromRight {
  0%   { transform: translateX(110%); animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1); }
  22%  { transform: translateX(0%); animation-timing-function: linear; }
  78%  { transform: translateX(0%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
  100% { transform: translateX(-110%); }
}
/* Red flash stripe behind BREAKING NEWS */
.breaking-news.visible .bn-bg {
  animation: bnFlash 5s ease-in-out forwards;
}
@keyframes bnFlash {
  0%   { opacity: 0.3; filter: brightness(0.3) saturate(0); }
  5%   { opacity: 0.5; filter: brightness(0.5) saturate(0.2) sepia(0.4) hue-rotate(-10deg); }
  15%  { opacity: 0.35; filter: brightness(0.35) saturate(0); }
  85%  { opacity: 0.35; filter: brightness(0.35) saturate(0); }
  100% { opacity: 0.3; filter: brightness(0.3) saturate(0); }
}

/* ---- News crawl ticker ---- */
.news-crawl {
  position: absolute;
  bottom: 0.5rem;
  left: 0;
  right: 0;
  z-index: 10;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
}
.news-crawl.visible {
  opacity: 1;
}
.crawl-bar {
  position: relative;
  display: flex;
  align-items: center;
  background: linear-gradient(to bottom, #1a1a1a, #0d0d0d);
  border-top: 3px solid #dc2626;
  white-space: nowrap;
  height: 3.4rem;
  overflow: hidden;
}
.crawl-label {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  background: #dc2626;
  color: #fff;
  font-family: Impact, 'Arial Black', sans-serif;
  font-style: italic;
  font-weight: 900;
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0 1rem;
  line-height: 3.4rem;
  box-shadow: 4px 0 8px rgba(0,0,0,0.6);
}
.crawl-text {
  position: relative;
  z-index: 1;
  display: inline-block;
  color: #fff;
  font-family: Impact, 'Arial Black', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding-left: 1.5rem;
  animation: crawlScroll 20s linear infinite;
}
@keyframes crawlScroll {
  0%   { transform: translateX(60vw); }
  100% { transform: translateX(-100%); }
}

/* ---- TV Static (no-signal) ---- */
.tv-static {
  position: absolute;
  inset: 0;
  z-index: 8;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.tv-static.visible {
  opacity: 1;
}

/* ---- On-screen display (channel / volume) ---- */
.tv-osd {
  position: absolute;
  z-index: 9;
  font-family: 'VT323', monospace;
  color: #fff;
  -webkit-text-stroke: 2.5px #000;
  paint-order: stroke fill;
  text-shadow: 3px 3px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 2px 0 0 #000, -2px 0 0 #000;
  background: rgba(0, 0, 0, 0.5);
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  letter-spacing: 0.05em;
}
.tv-osd.visible {
  opacity: 1;
}
.tv-osd-ch {
  top: 1rem;
  right: 1.25rem;
  font-size: 3.2rem;
  font-weight: 400;
}
.tv-osd-vol {
  bottom: 1rem;
  right: 1.25rem;
  font-size: 2.6rem;
  font-weight: 400;
}

/* ---- CRT TV power off / on overlay ---- */
.tv-off-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: #000;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
.tv-off-overlay.shutting-down {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  animation: crtOff 0.5s ease-in forwards;
}
.tv-off-overlay.is-off {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  background: #000;
}
.tv-off-overlay.turning-on {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  animation: crtOn 0.4s ease-out forwards;
}
/* White line + dot in the middle during shutdown */
.tv-off-overlay.shutting-down::after,
.tv-off-overlay.is-off::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 6px; height: 6px;
  background: rgba(200, 220, 255, 0.7);
  border-radius: 50%;
  box-shadow: 0 0 12px 4px rgba(200, 220, 255, 0.4);
  animation: crtDot 0.8s 0.35s ease-out forwards;
}
.tv-off-overlay.is-off::after {
  animation: none;
  opacity: 0;
}
/* Static flash on power on */
.tv-off-overlay.turning-on::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(200, 220, 255, 0.15);
  animation: crtStatic 0.15s steps(3) 2;
}

@keyframes crtOff {
  0%   { clip-path: inset(0); background: rgba(255,255,255,0.08); }
  40%  { clip-path: inset(0); background: rgba(255,255,255,0.12); }
  60%  { clip-path: inset(45% 0); background: #000; }
  85%  { clip-path: inset(49% 0); background: #000; }
  100% { clip-path: inset(0); background: #000; }
}
@keyframes crtDot {
  0%   { width: 60%; height: 3px; border-radius: 2px; opacity: 1; }
  40%  { width: 20%; height: 2px; border-radius: 2px; opacity: 0.8; }
  70%  { width: 6px; height: 6px; border-radius: 50%; opacity: 0.6; }
  100% { width: 0; height: 0; opacity: 0; }
}
@keyframes crtOn {
  0%   { clip-path: inset(49.5% 0); background: rgba(200,220,255,0.2); }
  30%  { clip-path: inset(45% 0); background: rgba(200,220,255,0.1); }
  60%  { clip-path: inset(10% 0); background: rgba(255,255,255,0.05); }
  100% { clip-path: inset(0); background: transparent; opacity: 0; }
}
@keyframes crtStatic {
  0%   { opacity: 0.3; }
  50%  { opacity: 0.1; }
  100% { opacity: 0.2; }
}
.player-container iframe,
.player-container #yt-player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.now-playing-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.25rem;
}
.now-playing {
  flex: 1;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  min-height: 1.5em;
}
.now-playing .np-label {
  color: var(--muted);
  font-weight: 500;
  font-size: 0.82rem;
}
.unmute-btn {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1.5px solid var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.82rem; font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.unmute-btn:hover {
  background: var(--accent);
  color: #fff;
}
.unmute-btn.muted {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.unmute-btn:not(.muted) {
  border-color: var(--line);
  background: var(--paper);
  color: var(--muted);
}

/* ---- Remote Control ---- */
.remote-wrap {
  position: relative;
  width: 180px;
  user-select: none;
}
.remote-img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.25));
  pointer-events: none;
}
/* Small "screen" area on the remote — positioned over the remote's display area */
.remote-screen {
  position: absolute;
  top: 9.5%;
  left: 22%;
  width: 56%;
  height: 7%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  overflow: hidden;
}
.remote-channel-label {
  color: #4ade80;
  font-family: 'Courier New', monospace;
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 0 6px rgba(74, 222, 128, 0.6);
  letter-spacing: 0.03em;
  line-height: 1.2;
}
/* Interactive hit areas container over the remote's buttons */
.remote-buttons {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ---- Playlist Panel ---- */
.tv-playlist-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  padding: 1rem;
  max-height: 300px;
  overflow-y: auto;
  width: 100%;
}

.playlist-heading {
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.playlist {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.35rem;
}
.playlist-item {
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink);
  transition: background 0.12s;
  display: flex; align-items: center; gap: 0.5rem;
}
.playlist-item:hover {
  background: var(--accent-soft);
}
.playlist-item.active {
  background: var(--accent);
  color: #fff;
}
.playlist-item .pi-number {
  flex-shrink: 0;
  width: 1.5em;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  opacity: 0.6;
}
.playlist-item.active .pi-number { opacity: 1; }

.playlist-item .pi-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.playlist-item .pi-duration {
  flex-shrink: 0;
  font-size: 0.75rem;
  opacity: 0.6;
}

/* ---- Branded slate transition ---- */
.slate {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.slate.visible {
  opacity: 1;
  pointer-events: auto;
}
.slate-bg {
  position: absolute;
  inset: -20%; /* extra room for pan + zoom */
  background: url('../assets/apex-hero.jpg') center/cover no-repeat;
  filter: brightness(0.3) saturate(0.7);
  animation: slateZoom 8s ease-in-out infinite alternate;
}
@keyframes slateZoom {
  from { transform: scale(1) translateX(-3%); }
  to   { transform: scale(1.15) translateX(3%); }
}
.slate-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.slate-logo {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 0.75rem;
  opacity: 0.95;
}
.slate-up-next {
  font-size: 1.25rem;
  font-weight: 600;
  opacity: 0.8;
  min-height: 1.2em;
  white-space: pre-line;
}

/* ---- Title card overlay ---- */
.title-card {
  position: absolute;
  bottom: 1rem; left: 1.25rem;
  z-index: 4;
  background: rgba(0, 0, 0, 0.5);
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.title-card.visible {
  opacity: 1;
}
.title-card-text {
  color: #fff;
  font-family: 'VT323', monospace;
  font-size: 2.6rem;
  font-weight: 400;
  -webkit-text-stroke: 2.5px #000;
  paint-order: stroke fill;
  text-shadow: 3px 3px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 2px 0 0 #000, -2px 0 0 #000;
}

/* ---- LIVE badge ---- */
.live-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 6;
  background: #dc2626;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0.25rem 0.7rem;
  border-radius: 4px;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.live-badge.visible {
  opacity: 1;
  animation: livePulse 3s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 80% { opacity: 1; }
  90% { opacity: 0.3; }
  100% { opacity: 1; }
}

/* ---- Loading state ---- */
.tv-loading {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--muted);
  font-size: 0.95rem;
}

/* ---- Remote Button Hit Areas ---- */
.remote-btn-hit {
  position: absolute;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s;
}
.remote-btn-hit:hover {
  background: rgba(255, 255, 255, 0.15);
}
.remote-btn-hit:active {
  background: rgba(255, 255, 255, 0.3);
}

/* ---- Responsive ---- */
@media (max-width: 740px) {
  .tv-layout {
    grid-template-columns: 1fr;
  }
  .remote-wrap {
    display: none;
  }
  .tv-playlist-panel {
    max-height: 300px;
  }
  .player-container {
    border-radius: var(--radius-sm);
  }
  /* Show channel picker on mobile since remote is hidden */
  #channel-picker {
    display: flex !important;
  }
}