/*
 * The TV's screen while casting (M33). Sizes in vh so any screen gets the same picture; margins keep clear of the edge a
 * TV may cut off. The checklist's states (developers.google.com/cast/docs/design_checklist/receiver): the logo and a
 * spinner while launching, the logo when idle, a spinner while loading or buffering, a pause sign with the place when
 * paused. Lyrics take the lower part of the screen; without them the cover and titles have it all.
 * Plain properties only (no aspect-ratio, inset or flex gap): older Chromecasts run older Chromium.
 */
:root {
  --bg: #101014;
  --text: #edeaf5;
  --dim: rgba(237, 234, 245, 0.6);
  --faint: rgba(237, 234, 245, 0.46);
  /* Words not sung yet: dimmer than --dim, so the lit ones stand out on any cover. */
  --unsung: rgba(237, 234, 245, 0.45);
  --accent: #c6bfff;
  --side: 6vw;
  --edge: 7vh;
  --cover: 62vh;
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: Roboto, 'Noto Sans', 'Noto Sans Arabic', 'Noto Naskh Arabic', sans-serif;
}

#media { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

#screen { position: absolute; top: 0; left: 0; right: 0; bottom: 0; transition: opacity 3s ease; }
/* Long paused: dimmed, against burn-in. */
#screen.dim { opacity: 0.5; }

#backdrop {
  position: absolute; top: -10%; left: -10%; width: 120%; height: 120%;
  object-fit: cover;
  filter: blur(6vh) brightness(0.22) saturate(1.2);
  opacity: 0; transition: opacity 0.8s ease;
}
#backdrop.shown { opacity: 1; }
/* Darker under the titles and most under the lyrics: text stays readable on a pale cover. */
#shade {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0.6) 100%);
}

#stage {
  position: absolute; left: var(--side); right: var(--side); top: var(--edge); bottom: var(--edge);
  display: flex; align-items: center;
  transition: bottom 0.6s ease, transform 8s ease-in-out;
}
[data-lyrics="on"] #stage { bottom: 33vh; }
[data-lyrics="on"] { --cover: 50vh; }

#cover {
  position: relative; flex: none; width: var(--cover); height: var(--cover); margin-right: 4.5vw;
  border-radius: 1.4vh; overflow: hidden; background: #24222e;
  box-shadow: 0 2vh 6vh rgba(0, 0, 0, 0.45);
  transition: width 0.6s ease, height 0.6s ease;
}
#art { display: block; width: 100%; height: 100%; object-fit: cover; }
/* No cover (or one that won't load): the logo, on its own colour to the corners. */
#cover.placeholder { background: #5b4bc4; }

/* Titles beside the cover whatever their script (an Arabic title reads right to left, still by the cover). */
#titles { flex: 1; min-width: 0; text-align: left; }
#title { font-size: 5.4vh; font-weight: 600; line-height: 1.2; max-height: 2.4em; overflow: hidden; }
#artist, #album { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#artist { font-size: 3.4vh; color: var(--dim); margin-top: 1.4vh; }
#album { font-size: 2.6vh; color: var(--faint); margin-top: 0.8vh; }
#album:empty { display: none; }

#progress { margin-top: 4.5vh; max-width: 70vh; }
#bar { height: 0.6vh; border-radius: 0.3vh; background: rgba(237, 234, 245, 0.18); overflow: hidden; }
#fill { height: 100%; width: 0; background: var(--accent); }
#times { display: flex; justify-content: space-between; margin-top: 1.2vh; font-size: 2.3vh; color: var(--dim); }
#live { display: none; padding: 0.3vh 1vh; border-radius: 0.6vh; background: var(--accent); color: #2a1a8f; font-weight: 600; }
/* A station: the badge where the place would be, and no bar. */
[data-live] #live { display: inline-block; }
[data-live] #bar, [data-live] #elapsed, [data-live] #duration { display: none; }
[data-live] #times { justify-content: flex-start; margin-top: 0; }

/* The app's logo while paused, loading or buffering (the checklist asks it shown then); its room kept, so nothing moves. */
#brand { display: flex; align-items: center; margin-top: 3.5vh; font-size: 2.2vh; color: var(--dim); visibility: hidden; }
#brand img { width: 3.4vh; height: 3.4vh; margin-right: 1.2vh; }
[data-state="paused"] #brand, [data-state="loading"] #brand, [data-state="buffering"] #brand { visibility: visible; }

/* Spinner: launching (on the splash), loading and buffering (on the cover). */
.spinner {
  display: none; width: 7vh; height: 7vh; box-sizing: border-box;
  border: 0.7vh solid rgba(255, 255, 255, 0.25); border-top-color: var(--accent); border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
#cover .spinner { position: absolute; left: 50%; top: 50%; margin: -3.5vh 0 0 -3.5vh; }
[data-state="loading"] #cover .spinner, [data-state="buffering"] #cover .spinner { display: block; }

/* Paused: the cover darkened under a pause sign. */
#cover .paused { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.45); }
#cover .paused::before, #cover .paused::after {
  content: ''; position: absolute; top: 50%; width: 2.6vh; height: 9vh; margin-top: -4.5vh; border-radius: 0.6vh; background: #fff;
}
#cover .paused::before { left: 50%; margin-left: -4.4vh; }
#cover .paused::after { left: 50%; margin-left: 1.8vh; }
[data-state="paused"] #cover .paused { display: block; }

/* Lyrics: the line sung large, the next one smaller; words light up as they're sung. */
#lyrics {
  position: absolute; left: var(--side); right: var(--side); bottom: var(--edge); height: 23vh;
  display: flex; flex-direction: column; justify-content: flex-end;
  opacity: 0; transition: opacity 0.5s ease, transform 8s ease-in-out;
}
[data-lyrics="on"] #lyrics { opacity: 1; }
#line { margin: 0; font-size: 5.6vh; font-weight: 600; line-height: 1.25; }
#line.words span { color: var(--unsung); transition: color 0.12s linear; }
#line.words span.on { color: var(--accent); }
#line.gap { color: var(--dim); }
#next { margin: 1.6vh 0 0; font-size: 3.6vh; line-height: 1.25; color: var(--faint); }
/* Plain lyrics (no times): a guess at where the song is, so softer than lyrics that follow it. */
#lyrics.paced #line { color: var(--dim); font-weight: 500; }

/* Launching and idle: the logo alone (a spinner while launching). */
#splash {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--bg); opacity: 0; pointer-events: none; transition: opacity 0.5s ease, transform 8s ease-in-out;
}
#splash img { width: 18vh; height: 18vh; }
#splash .spinner { margin-top: 5vh; }
[data-state="launching"] #splash, [data-state="idle"] #splash { opacity: 1; }
[data-state="launching"] #splash .spinner { display: block; }