/* === Overlay Components === */

/* Shared panel style - tactical HUD borders */
.overlay-panel {
  position: absolute;
  background: var(--overlay-bg);
  border: 1px solid var(--border-color);
  padding: 0.5rem 0.8rem;
  font-family: var(--font-mono);
}

/* Corner accents on panels */
.overlay-panel::before,
.overlay-panel::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-color: var(--republic-red);
}

.overlay-panel::before {
  top: -1px;
  left: -1px;
  border-top: 2px solid;
  border-left: 2px solid;
}

.overlay-panel::after {
  bottom: -1px;
  right: -1px;
  border-bottom: 2px solid;
  border-right: 2px solid;
}

.overlay-label {
  font-size: 0.55rem;
  color: var(--republic-red);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}

/* Chromatic aberration on overlay text */
.overlay-panel * {
  text-shadow: 1px 0 rgba(255, 0, 0, 0.3), -1px 0 rgba(0, 255, 255, 0.3);
}

/* === Channel Bug === */
#channel-bug {
  top: 20px;
  left: 20px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.7;
  border: none;
  background: transparent;
  padding: 0;
}

#channel-bug::before,
#channel-bug::after {
  display: none;
}

.bug-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  opacity: 0.8;
}

.bug-text {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.2em;
}

/* === Clock === */
#clock-overlay {
  top: 20px;
  right: 20px;
  text-align: right;
}

.clock-digits {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--terminal-green);
  letter-spacing: 0.1em;
}

/* === Now Playing === */
#now-playing {
  bottom: 60px;
  left: 20px;
  max-width: 50%;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

#now-playing.hidden {
  opacity: 0;
  transform: translateX(-20px);
}

#now-playing.visible {
  opacity: 1;
  transform: translateX(0);
}

.now-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--white);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.next-info {
  font-size: 0.7rem;
  color: var(--gold);
  margin-top: 0.2rem;
  letter-spacing: 0.1em;
}

/* === Weather === */
#weather-overlay {
  bottom: 60px;
  right: 20px;
  text-align: right;
  transition: opacity 1s ease;
}

#weather-overlay.hidden {
  opacity: 0;
}

#weather-overlay.visible {
  opacity: 1;
}

.weather-temp {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--terminal-green);
}

.weather-desc {
  font-size: 0.7rem;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* === Crawl Ticker === */
#crawl-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 36px;
  background: linear-gradient(
    to right,
    rgba(200, 0, 26, 0.85),
    rgba(26, 26, 46, 0.9) 10%,
    rgba(26, 26, 46, 0.9) 90%,
    rgba(200, 0, 26, 0.85)
  );
  border-top: 1px solid var(--republic-red);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.crawl-text {
  white-space: nowrap;
  font-size: 0.8rem;
  color: var(--gold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  animation: crawl-scroll linear infinite;
  padding-left: 100%;
}

@keyframes crawl-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* === Utility === */
.hidden {
  opacity: 0;
  pointer-events: none;
}