/* Now-playing overlay (BEA-3226). Drops into OBS as a Browser Source — the body
   is transparent so OBS composites it over scenes. Every visual is driven by a
   CSS custom property (--sb-*) so the Theme panel can restyle it live; the
   defaults below are the "Midnight" look and match the original design. */

:root {
  --sb-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --sb-accent: #6fb63c;
  --sb-card-bg: rgba(0, 0, 0, 0.70);
  --sb-card-border: rgba(255, 255, 255, 0.08);
  --sb-radius: 12px;
  --sb-blur: 6px;
  --sb-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  --sb-padding-y: 14px;
  --sb-padding-x: 18px;
  --sb-margin: 16px;
  --sb-max-width: 520px;
  --sb-gap: 16px;
  --sb-art-size: 80px;
  --sb-art-radius: 8px;
  --sb-title-color: #ffffff;
  --sb-title-size: 22px;
  --sb-title-weight: 700;
  --sb-artist-color: rgba(255, 255, 255, 0.82);
  --sb-artist-size: 16px;
  --sb-badge-bg: rgba(111, 182, 60, 0.20);
  --sb-badge-color: #8fd45a;
  --sb-progress-bg: rgba(255, 255, 255, 0.15);
  --sb-progress-fill: #6fb63c;
  --sb-progress-height: 4px;
  color: #fff;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: transparent;
  overflow: hidden;
}

/* Position anchor: OBS sizes the source; these classes park the card in a
   corner (or centre) of that box. */
body { display: flex; }
body.pos-top-left     { align-items: flex-start; justify-content: flex-start; }
body.pos-top-right    { align-items: flex-start; justify-content: flex-end; }
body.pos-bottom-left  { align-items: flex-end;   justify-content: flex-start; }
body.pos-bottom-right { align-items: flex-end;   justify-content: flex-end; }
body.pos-center       { align-items: center;     justify-content: center; }

#overlay-root {
  display: flex;
  align-items: center;
  gap: var(--sb-gap);
  padding: var(--sb-padding-y) var(--sb-padding-x);
  margin: var(--sb-margin);
  max-width: var(--sb-max-width);
  font-family: var(--sb-font);
  background: var(--sb-card-bg);
  border: 1px solid var(--sb-card-border);
  border-left: var(--sb-accent-width, 3px) solid var(--sb-accent);
  border-radius: var(--sb-radius);
  box-shadow: var(--sb-shadow);
  backdrop-filter: blur(var(--sb-blur));
  -webkit-backdrop-filter: blur(var(--sb-blur));
  position: relative;
  overflow: hidden;
  animation: fade-in 220ms ease-out;
}
body.no-anim #overlay-root { animation: none; }
#overlay-root.empty { display: none; }

/* Banner mode — stretch the card to fill the browser-source width instead of
   hugging a corner. Pair with a Browser Source sized to your banner area. */
#overlay-root.fill-width { flex: 1 1 auto; max-width: none; }

/* Optional: uppercase title + an accent-colored glow around the card. */
#overlay-root.uppercase #title { text-transform: uppercase; }
#overlay-root.glow { box-shadow: var(--sb-shadow), 0 0 24px -4px var(--sb-accent); }

.art-wrap {
  flex: 0 0 auto;
  width: var(--sb-art-size);
  height: var(--sb-art-size);
  border-radius: var(--sb-art-radius);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
}
#art { width: 100%; height: 100%; object-fit: cover; display: block; }
.art-wrap.no-art,
#overlay-root.hide-art .art-wrap { display: none; }

.text-wrap { min-width: 0; flex: 1 1 auto; }

#title {
  font-size: var(--sb-title-size);
  font-weight: var(--sb-title-weight);
  color: var(--sb-title-color);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
#artist {
  font-size: var(--sb-artist-size);
  color: var(--sb-artist-color);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.progress-wrap {
  margin-top: 8px;
  height: var(--sb-progress-height);
  background: var(--sb-progress-bg);
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--sb-progress-fill);
  border-radius: 999px;
  transition: width 0.25s linear;
}
#overlay-root.hide-progress .progress-wrap,
.progress-wrap.no-progress { display: none; }

#source-badge {
  display: inline-block;
  margin-top: 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--sb-badge-bg);
  color: var(--sb-badge-color);
  font-weight: 700;
}
#source-badge.local { background: rgba(96, 165, 250, 0.18); color: #93c5fd; }
#source-badge:empty,
#overlay-root.hide-badge #source-badge { display: none; }

/* Optional CRT scanline overlay for the Retro theme. */
#overlay-root.scanlines::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.16) 0,
    rgba(0, 0, 0, 0.16) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}