/* TV-scale twin of the desktop immersive StaticPanel + ImmersiveTrackMeta.
   Sized in vh so 720p and 1080p Cast viewports look identical. */
:root {
  --bg: #0a0a0b;
  --accent: rgba(255, 255, 255, 0.92);
  --raised: 0 0.12vh 0 rgba(0, 0, 0, 0.69), 0 0.3vh 2.4vh rgba(0, 0, 0, 0.45);
  --fade: 1.2s ease;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
.still * { transition: none !important; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: #fff;
  font-family: "Inter", "Roboto", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* --- Atmosphere ---------------------------------------------------------- */
#atmosphere, #scrim { position: fixed; inset: 0; }
#atmosphere { overflow: hidden; }

.atmo-stack {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--fade);
}
.atmo-stack.shown { opacity: 1; }

.atmo-stack canvas {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
}

/* Desktop dim 0.15 + 180° scrim (#00000066 → transparent 35% → #00000080). */
#scrim {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, transparent 35%, rgba(0, 0, 0, 0.5) 100%),
    rgba(0, 0, 0, 0.15);
}

/* --- Cover + meta column --------------------------------------------------- */
#stage {
  position: fixed;
  inset: 5vh 0 12vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3.4vh;
  transition: opacity var(--fade);
}

#cover-slot {
  position: relative;
  width: min(56vh, 46vw);
  aspect-ratio: 1;
}

#cover, #cover-shadow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 1vh;
}
#cover-shadow {
  transform: translateY(1.2vh);
  background: rgba(0, 0, 0, 0.5);
  filter: blur(3vh);
}
#cover {
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}
#cover.loaded { opacity: 1; }

#meta {
  width: 80vw;
  text-align: center;
  text-shadow: var(--raised);
}
#meta > * {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#now-playing {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1vh;
  margin-bottom: 1.4vh;
  color: var(--accent);
  font-size: 2vh;
  font-weight: 600;
  letter-spacing: 0.08vh;
  text-transform: none;
  transition: opacity 0.4s ease, color var(--fade);
}
body.paused #now-playing { opacity: 0.45; }

#title {
  font-size: 4.6vh;
  font-weight: 700;
  line-height: 1.2;
}
#artist {
  margin-top: 0.8vh;
  font-size: 3vh;
  color: rgba(255, 255, 255, 0.85);
}
#album {
  margin-top: 0.6vh;
  font-size: 2.3vh;
  font-style: italic;
  color: rgba(255, 255, 255, 0.75);
}
#album:empty { display: none; }

/* EqualizerBars: 0.8 s cosine cycle (two 0.4 s alternating halves), phases 0/.25/.125/.375. */
.eq {
  position: relative;
  width: 2.6vh;
  height: 2vh;
  display: inline-flex;
  align-items: flex-end;
  gap: 0.28vh;
}
.eq i {
  flex: 1;
  height: 100%;
  border-radius: 0.15vh;
  background: currentColor;
  transform-origin: bottom;
  animation: eq 0.4s ease-in-out infinite alternate;
}
.eq i:nth-child(1) { --peak: 0.6; animation-delay: 0s; }
.eq i:nth-child(2) { --peak: 1.0; animation-delay: -0.2s; }
.eq i:nth-child(3) { --peak: 0.4; animation-delay: -0.1s; }
.eq i:nth-child(4) { --peak: 0.8; animation-delay: -0.3s; }
@keyframes eq {
  from { transform: scaleY(calc(var(--peak) * 0.3)); }
  to   { transform: scaleY(var(--peak)); }
}
body.paused .eq i { animation-play-state: paused; }

/* --- Progress -------------------------------------------------------------- */
#progress {
  position: fixed;
  left: 10vw;
  right: 10vw;
  bottom: 6vh;
  display: flex;
  align-items: center;
  gap: 2vh;
  font-size: 1.9vh;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.75);
  text-shadow: var(--raised);
  transition: opacity var(--fade);
}
#track {
  flex: 1;
  height: 0.5vh;
  border-radius: 0.25vh;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}
#fill {
  height: 100%;
  width: 100%;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(0);
  transition: background-color var(--fade);
}

/* --- Idle ------------------------------------------------------------------ */
#idle-card {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5vh;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--fade);
}
#idle-card .wordmark { font-size: 9vh; font-weight: 700; letter-spacing: -0.3vh; }
#idle-card .hint { font-size: 2.4vh; color: rgba(255, 255, 255, 0.6); }

body.idle #stage, body.idle #progress { opacity: 0; }
body.idle #idle-card { opacity: 1; }