/* Live banner shown above hero when streaming */
#liveBanner {
  position: relative;
  width: 100%;
  max-width: 1100px;
  min-width: 500px;
  margin: 0 auto 60px auto;
  z-index: 5;
}

#liveBanner .liveInner {
  position: relative;
  background: linear-gradient(180deg, #22272e 0%, #1b2026 100%);
  color: #e6eeff;
  border: 2px solid #1d2630;
  border-radius: 22px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 30px;
  padding: 25px 35px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.45);
  z-index: 1; /* keep plates above */
}

#liveBanner .liveInner::before,
#liveBanner .liveInner::after {
  content: "";
  position: absolute;
  left: 18px; right: 18px;
  height: 4px;
  background: #4d7fe7;
  border-radius: 4px;
}
#liveBanner .liveInner::before { top: 10px; }
#liveBanner .liveInner::after  { bottom: 10px; }

#liveBanner .liveText {
  font-family: 'bronic', sans-serif;
  font-size: 50px;
  letter-spacing: 3px;
  text-shadow: -1px 0 1px #000, 0 1px 1px #000, 1px 0 1px #000, 0 -1px 1px #000;
}

#liveBanner .liveCta {
  display: inline-block;
  font-family: 'fr-bold', sans-serif;
  font-size: 18px;
  color: #e6eeff;
  text-decoration: none;
  padding: 4px 16px;
  background: linear-gradient(180deg, #2f5eb6 0%, #264b90 100%);
  border: 1px solid #5080ea;
  border-radius: 18px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.35);
}
#liveBanner .liveCta:hover { background: #3c6fd4; }

/* Decorative plates + bolts to echo site look */
#liveBanner .livePlate {
  position: absolute;
  top: 50%;
  width: 26px; height: 115px;
  background: #393e48;
  border: 1px solid #151515;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
  transform: translateY(-50%);
  z-index: 6; /* plates appear on top of banner */
}
#liveBanner .livePlate.left  { left: -13px; }
#liveBanner .livePlate.right { right: -13px; }

#liveBanner .livePlate .bolt {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #222 0 3px, #0f0f0f 4px 8px);
}
#liveBanner .livePlate .bolt.two { top: 20px; }
#liveBanner .livePlate .bolt.one { top: 87px; }

/* Pulsing red live dot */
#liveBanner .liveDot {
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #f26a6a 0, #c23a3a 60%, #8a2323 100%);
  box-shadow: 0 0 10px rgba(255, 60, 60, 0.8);
  animation: live-pulse 1.4s ease-in-out infinite;
}

@keyframes live-pulse {
  0%   { transform: scale(1); box-shadow: 0 0 8px rgba(255,60,60,0.6); }
  50%  { transform: scale(1.2); box-shadow: 0 0 16px rgba(255,60,60,1); }
  100% { transform: scale(1); box-shadow: 0 0 8px rgba(255,60,60,0.6); }
}