:root {
  --accent-primary: #f4e900;
  --accent-secondary: #ff6b9d;

  /* Legacy-ish darker canvas for stronger card contrast */
  --bg-base: #0b0b0d;
  --bg-dark: #101014;

  --text-glow: 0 0 15px rgba(244, 233, 0, 0.28);
  --border-neon: 1px solid rgba(244, 233, 0, 0.18);
}

body {
  /* darker, simpler background -> cards pop */
  background: radial-gradient(900px 500px at 15% 10%, #14141a 0%, var(--bg-base) 55%, #070708 100%);
  transition: background 0.5s ease;
}

/* Intro */
.ap-intro-hidden {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.ap-intro-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Track cards */
.ap-track-item {
  transition: all 0.35s ease;
  border: 1px solid rgba(148,163,184,.30);
}
.ap-track-item:hover {
  transform: scale(1.012);
  box-shadow: var(--text-glow);
  border-color: rgba(244,233,0,.45);
}

/* Now Playing clickable */
#nowPlaying { cursor: pointer; }
#nowPlaying:hover { box-shadow: var(--text-glow); }

/* Progress gradient */
#progressBar {
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
  box-shadow: 0 0 10px rgba(244,233,0,.55);
}

/* Keep header right from forcing weird wraps */
.ap-header-right, #headerRight, .header-right {
  min-width: 0;
  flex: 1 1 auto;
}

/* ---------------------------------------------------
   (2) NowPlaying timer:
   - Desktop: RIGHT + vertically centered
   - Mobile: bottom-right (as before)
   --------------------------------------------------- */
#nowPlaying > div.absolute.bottom-4.right-4 {
  right: 1rem !important;
  bottom: auto !important;
  top: 50% !important;
  left: auto !important;
  transform: translateY(-50%) !important;
}

/* Mobile: keep it bottom-right like before */
@media (max-width: 640px) {
  #nowPlaying > div.absolute.bottom-4.right-4 {
    top: auto !important;
    left: auto !important;
    right: 1rem !important;
    bottom: 1rem !important;
    transform: none !important;
  }
}

/* NowPlaying timer: no “jumping”, consistent width */
#npTimeLeft{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  display: inline-block;
  width: 5ch;
  text-align: right; /* right-aligned looks better on the right edge */
  white-space: nowrap;
}

/* ---------------------------------------------------
   (4) npArtBox: yellow pulse placeholder when no art
   --------------------------------------------------- */
#npArtBox{
  background:
    radial-gradient(70% 70% at 30% 25%, rgba(244,233,0,.92) 0%, rgba(244,233,0,.35) 38%, rgba(15,15,18,0) 70%),
    linear-gradient(135deg, rgba(244,233,0,.95) 0%, rgba(255,180,0,.85) 55%, rgba(30,30,34,.90) 100%);
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  animation: legacyPulse 1.55s ease-in-out infinite;
}

@keyframes legacyPulse{
  0%,100% { opacity: .88; transform: scale(1); box-shadow: 0 0 0 rgba(244,233,0,0); }
  50%     { opacity: 1;   transform: scale(1.03); box-shadow: 0 0 22px rgba(244,233,0,.22); }
}

/* Placeholder wants color -> remove forced grayscale */
#npArtBox { filter: none; }

/* ---------------------------------------------------
   (5) Monitor card: darker + tighter
   --------------------------------------------------- */
.ap-monitor-card{
  background: rgba(16,16,20,.74);
  border: 1px solid rgba(244,233,0,.12);
  border-radius: 16px;
  padding: 10px 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.ap-monitor-kicker{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(226,232,240,.70);
}

.ap-monitor-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.20);
  background: rgba(2,6,23,.35);
  color: rgba(248,250,252,.92);
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
}

.ap-monitor-line{
  margin-top: 2px;
  color: rgba(248,250,252,.92);
  font-size: 12px;
  line-height: 1.25;
}

.ap-monitor-sub{
  margin-top: 4px;
  color: rgba(226,232,240,.78);
  font-size: 12.5px;
  line-height: 1.25;

  /* keep one line */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* desktop vs mobile copy */
.ap-monitor-ok-mobile{ display: none; }
@media (max-width: 640px){
  .ap-monitor-ok-desktop{ display: none; }
  .ap-monitor-ok-mobile{ display: inline; }
}

/* links right side: tighter + better contrast on dark card */
.ap-monitor-links{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding-top: 1px;
}

.ap-monitor-card .ap-monitor-links a{
  color: rgba(226,232,240,.78) !important;
}
.ap-monitor-card .ap-monitor-links a:hover{
  color: rgba(244,233,0,.92) !important;
  text-shadow: 0 0 10px rgba(244,233,0,.18);
}

.ap-monitor-card .ap-monitor-links a.ap-monitor-audit{
  color: rgba(244,233,0,.92) !important;
  text-shadow: 0 0 10px rgba(244,233,0,.14);
}
.ap-monitor-card .ap-monitor-links a.ap-monitor-audit:hover{
  color: rgba(244,233,0,1) !important;
  text-shadow: 0 0 12px rgba(244,233,0,.22);
}

.ap-monitor-onair.is-disabled{
  opacity: .45;
  pointer-events: none;
}

/* Mobiilissa: pienempi väli NowPlaying -> Monitor */
@media (max-width: 640px) {
  #nowPlaying { margin-bottom: 6px !important; }
  #apMonitorCard { margin-top: -6px; }

/* /*   #liveClock { display: none !important; } */ */
}

/* MONITOR_FEED_STATE_V1 (index monitor card) */
.ap-monitor-card.ap-monitor--no_data{
  border-color: rgba(245,158,11,0.38) !important;
  background: rgba(245,158,11,0.06) !important;
}
.ap-monitor-card.ap-monitor--late{
  border-color: rgba(245,158,11,0.30) !important;
  background: rgba(245,158,11,0.04) !important;
}
.ap-monitor-card.ap-monitor--outage{
  border-color: rgba(239,68,68,0.35) !important;
  background: rgba(239,68,68,0.05) !important;
}

/* Optional: slightly bias the top line color when in override states */
.ap-monitor-card.ap-monitor--no_data #apMonitorSystemText,
.ap-monitor-card.ap-monitor--late #apMonitorSystemText{
  color: rgba(252,211,77,0.95) !important;
}
.ap-monitor-card.ap-monitor--outage #apMonitorSystemText{
  color: rgba(248,113,113,0.95) !important;
}

/* Jäljellä olevan ajan teksti */
#npTimeLeft {
  color: var(--accent-primary); /* Oletusväri */
}

/* Vihreä väri */
#npTimeLeft.green {
  color: #28a745; /* vihreä */
}

/* Punainen väri */
#npTimeLeft.red {
  color: #dc3545; /* punainen */
}

/* monitor + audit headings */
.ap-monitor-delta {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  opacity: 0.9;
}

#apMonitorDeltaLine {
  letter-spacing: 0.05em;
}