/* Joan Cast Receiver styles. Matches the Skin 4 visual language —
   warm gold accent, dark backdrop, mono type. Sits on the TV so
   safe-margins matter; everything's positioned 5% inside the
   bleed zone. */

:root {
  --jc-bg: #07070a;
  --jc-ink: #f4ede0;
  --jc-ink-dim: #c8c0b0;
  --jc-accent: #f5d76e;
  --jc-accent-rgb: 245, 215, 110;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: var(--jc-bg);
  color: var(--jc-ink);
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  overflow: hidden;
}

cast-media-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* CAF widget styling tokens — match Skin 4 chrome. */
  --background-color: #07070a;
  --logo-image: none;
  --break-color: var(--jc-accent);
  --progress-color: var(--jc-accent);
  --metadata-text-color: var(--jc-ink);
  --metadata-background-color: rgba(7, 7, 10, 0.78);
  --watermark-image: none;
}

/* ── Custom overlay ──────────────────────────────────────────── */
.overlay {
  position: absolute;
  top: 5%;
  left: 5%;
  right: 5%;
  z-index: 10;
  pointer-events: none;
  display: none;          /* shown via JS once playback starts */
  /* Auto-fade chrome — full opacity briefly after each transition,
     then fades to subtle. */
  opacity: 0.55;
  transition: opacity 480ms cubic-bezier(.4, 0, .2, 1);
}
.overlay.is-visible { opacity: 1; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(7, 7, 10, 0.62);
  border: 1px solid rgba(var(--jc-accent-rgb), 0.32);
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: .25em;
  text-transform: uppercase;
}
.brand-mark { color: var(--jc-accent); font-weight: 600; }
.brand-divider { color: var(--jc-ink-dim); }
.brand-tag { color: var(--jc-ink-dim); }

.now-playing {
  margin-top: 14px;
  font-size: 22px;
  letter-spacing: .03em;
  color: var(--jc-ink);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}

.queue-pos {
  margin-top: 6px;
  font-size: 12px;
  color: var(--jc-ink-dim);
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* ── Idle splash ─────────────────────────────────────────────── */
.idle {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  z-index: 5;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(var(--jc-accent-rgb), 0.06) 0%,
    rgba(var(--jc-accent-rgb), 0.02) 40%,
    transparent 70%
  ), var(--jc-bg);
}
.idle-mark {
  font-size: 84px;
  letter-spacing: .2em;
  color: var(--jc-accent);
  font-weight: 600;
  filter: drop-shadow(0 0 24px rgba(var(--jc-accent-rgb), 0.45));
}
.idle-tag {
  font-size: 16px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--jc-ink-dim);
}
.idle.idle-error .idle-mark { color: #ef5a5a; filter: none; }
.idle.idle-error .idle-tag  { color: #ef5a5a; }