:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #080a0f;
  color: #f7f8fb;
  --theme-bg: rgb(8,10,15);
  --theme-text-rgb: 247,248,251;
}

* { box-sizing: border-box; }
html, body, #screen { width: 100%; height: 100%; margin: 0; overflow: hidden; }
#screen { position: relative; background: var(--theme-bg); color: rgb(var(--theme-text-rgb)); transition: background-color 700ms ease, color 350ms ease; }
#screen::after {
  content: ""; position: absolute; inset: 0; z-index: 20; pointer-events: none;
  background: #000; opacity: 0; transition: opacity 1800ms ease;
}
#screen[data-burn-pause="dim"]::after { opacity: .16; }
#screen[data-burn-pause="deep"]::after { opacity: .38; }
#screen[data-burn-pause="saver"]::after { opacity: .68; }
#backdrop {
  position: absolute; inset: 0;
  background: var(--theme-bg);
  transition: background-color 700ms ease;
}
.shade { position: absolute; inset: 0; background: linear-gradient(110deg, rgba(0,0,0,.36), rgba(0,0,0,.08) 48%, rgba(0,0,0,.28)); }
#screen[data-backdrop="black"] .shade { background: linear-gradient(110deg, rgba(0,0,0,.28), rgba(0,0,0,.10) 48%, rgba(0,0,0,.24)); }
#screen[data-text-palette="charcoal"] .shade { background: linear-gradient(110deg, rgba(255,255,255,.12), rgba(255,255,255,.03) 48%, rgba(var(--theme-text-rgb),.08)); }
.layout {
  position: relative; z-index: 1;
  height: 100%; width: 100%;
  display: grid; grid-template-columns: minmax(360px, 42vw) 1fr;
  gap: clamp(48px, 5vw, 96px);
  align-items: center;
  padding: clamp(56px, 6vh, 108px) clamp(70px, 7vw, 140px);
  transform: translate3d(var(--burn-x, 0px), var(--burn-y, 0px), 0) scale(var(--burn-scale, 1));
  transform-origin: center center;
  transition: transform 18s ease-in-out, opacity 1600ms ease, filter 1600ms ease, grid-template-columns 240ms ease, gap 240ms ease;
}
#screen[data-burn-pause="deep"] .layout { opacity: .82; }
#screen[data-burn-pause="saver"] .layout { opacity: .58; filter: saturate(.68); }
#screen[data-burn-pause="saver"] .context,
#screen[data-burn-pause="saver"] footer,
#screen[data-burn-pause="saver"] header { opacity: .34; transition: opacity 1600ms ease; }
.artwork-shell {
  aspect-ratio: 1; width: 100%; max-width: 780px;
  border-radius: 24px; overflow: hidden;
  background: rgba(var(--theme-text-rgb),.08);
  box-shadow: 0 36px 90px rgba(0,0,0,.38);
}
#artwork { width: 100%; height: 100%; object-fit: cover; display: block; }
#artwork-placeholder { width: 100%; height: 100%; display: grid; place-items: center; font-size: 18vw; color: rgba(var(--theme-text-rgb),.22); }
.content { min-width: 0; height: min(78vh, 830px); display: flex; flex-direction: column; }
header { flex: 0 0 auto; }
.artist { margin: 0 0 10px; font-size: clamp(24px, 2vw, 40px); font-weight: 650; color: rgba(var(--theme-text-rgb),.82); }
h1 { margin: 0; font-size: clamp(42px, 4.2vw, 82px); line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; }
.album { margin: 14px 0 0; font-size: clamp(20px, 1.55vw, 31px); color: rgba(var(--theme-text-rgb),.58); }
.lyrics { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 28px 0; }
.line { margin: 0; max-width: 1100px; line-height: 1.14; transition: opacity 180ms ease, transform 180ms ease, font-size 220ms ease; }
.context { font-size: clamp(24px, 2vw, 40px); color: rgba(var(--theme-text-rgb),.38); }
.context-far { color: rgba(var(--theme-text-rgb),.22); font-size: clamp(20px, 1.65vw, 33px); }
.current { font-size: clamp(42px, 4.3vw, 86px); font-weight: 720; letter-spacing: -.025em; text-wrap: balance; }
footer { flex: 0 0 auto; }
.progress-track { height: 5px; background: rgba(var(--theme-text-rgb),.18); border-radius: 99px; overflow: hidden; }
#progress-fill { height: 100%; width: 0%; background: rgb(var(--theme-text-rgb)); border-radius: inherit; transition: width 120ms linear; }
.time-row { display: flex; justify-content: flex-end; margin-top: 10px; font-size: clamp(16px, 1.15vw, 23px); color: rgba(var(--theme-text-rgb),.58); font-variant-numeric: tabular-nums; }
.time-separator { color: rgba(var(--theme-text-rgb),.34); }
.connection { position: absolute; z-index: 3; right: 32px; bottom: 24px; font-size: 17px; color: rgba(var(--theme-text-rgb),.42); transition: opacity 500ms ease; }
.connection.connected { opacity: 0; }

/* Strong burn-in mode may mirror the normal artwork layout, but only at track boundaries.
   Standard mode never performs a visible structural move mid-song. */
#screen[data-burn-in="strong"][data-burn-layout="mirror"][data-mode="artwork"] .artwork-shell { order: 2; justify-self: end; }
#screen[data-burn-in="strong"][data-burn-layout="mirror"][data-mode="artwork"] .content { order: 1; }

/* Artwork mode: keep the cover dominant, but retain a lightweight lyric trail around the
   highlighted current line. History/future context is intentionally smaller and unbolded. */
#screen[data-mode="artwork"] .lyrics { justify-content: center; gap: 12px; }
#screen[data-mode="artwork"] .context { font-size: clamp(20px, 1.55vw, 31px); }
#screen[data-mode="artwork"] .context-far { font-size: clamp(17px, 1.28vw, 26px); }


/* Big artwork mode: maximise the cover while still keeping lyric context visible. */
#screen[data-mode="artwork-large"] .layout {
  grid-template-columns: minmax(520px, 58vw) 1fr;
  gap: clamp(36px, 3.5vw, 64px);
  padding-left: clamp(44px, 4vw, 80px);
  padding-right: clamp(44px, 4vw, 80px);
}
#screen[data-mode="artwork-large"] .artwork-shell { max-width: 980px; }
#screen[data-mode="artwork-large"] .lyrics { justify-content: center; gap: 11px; }
#screen[data-mode="artwork-large"] .context { font-size: clamp(18px, 1.35vw, 27px); }
#screen[data-mode="artwork-large"] .context-far { font-size: clamp(16px, 1.05vw, 22px); }
#screen[data-mode="artwork-large"] h1 { font-size: clamp(36px, 3.4vw, 64px); }
#screen[data-mode="artwork-large"] .current { font-size: clamp(34px, 3.2vw, 62px); }
#screen[data-mode="artwork-large"] .artist { font-size: clamp(20px, 1.5vw, 30px); }
#screen[data-mode="artwork-large"] .album { font-size: clamp(17px, 1.1vw, 23px); }

/* Lyrics mode: preserve artwork context but give most of the screen to lyric history/upcoming. */
#screen[data-mode="lyrics"] .layout { grid-template-columns: minmax(260px, 28vw) 1fr; gap: clamp(40px, 4vw, 72px); }
#screen[data-mode="lyrics"] .artwork-shell { max-width: 500px; align-self: center; }
#screen[data-mode="lyrics"] .content { height: min(84vh, 900px); }
#screen[data-mode="lyrics"] h1 { font-size: clamp(36px, 3.2vw, 62px); }
#screen[data-mode="lyrics"] .artist { font-size: clamp(20px, 1.6vw, 31px); }
#screen[data-mode="lyrics"] .album { font-size: clamp(17px, 1.2vw, 24px); }
#screen[data-mode="lyrics"] .current { font-size: clamp(38px, 3.5vw, 70px); }
#screen[data-mode="lyrics"] .lyrics { gap: 15px; }

@media (max-aspect-ratio: 4/3) {
  #screen[data-burn-in="strong"][data-burn-layout="mirror"] .artwork-shell { order: 1; }
  #screen[data-burn-in="strong"][data-burn-layout="mirror"] .content { order: 2; }
  .layout, #screen[data-mode="artwork-large"] .layout, #screen[data-mode="lyrics"] .layout { grid-template-columns: 1fr; grid-template-rows: minmax(220px, 34vh) 1fr; padding: 50px 70px; gap: 30px; }
  .artwork-shell, #screen[data-mode="artwork-large"] .artwork-shell, #screen[data-mode="lyrics"] .artwork-shell { width: min(34vh, 480px); justify-self: center; }
  .content, #screen[data-mode="artwork-large"] .content, #screen[data-mode="lyrics"] .content { height: auto; text-align: center; }
  .line { margin-left: auto; margin-right: auto; }
}


/* Instant custom-message overlays. These are deliberately independent of the delayed HLS path. */
.catchup {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 30px;
  width: min(420px, 38vw);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: 15px;
  background: rgba(8, 10, 15, .72);
  box-shadow: 0 12px 38px rgba(0, 0, 0, .28);
  backdrop-filter: blur(12px);
  color: #fff;
}
.catchup[hidden] { display: none; }
.catchup-copy { flex: 1; min-width: 0; }
.catchup-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: clamp(15px, 1vw, 20px); font-weight: 650; }
.catchup-time { color: rgba(255, 255, 255, .72); font-variant-numeric: tabular-nums; white-space: nowrap; }
.catchup-detail { margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255, 255, 255, .76); font-size: clamp(13px, .88vw, 17px); }
.catchup-ring { width: 18px; height: 18px; flex: 0 0 18px; overflow: visible; transform: rotate(-90deg); }
.catchup-ring-track, .catchup-ring-progress { fill: none; stroke-width: 2.2; }
.catchup-ring-track { stroke: rgba(255, 255, 255, .24); }
.catchup-ring-progress { stroke: #fff; stroke-linecap: round; stroke-dasharray: 47.124; stroke-dashoffset: 47.124; transition: stroke-dashoffset 220ms linear; }
.catchup-ring.is-indeterminate { animation: catchup-ring-spin 900ms linear infinite; }
.catchup-ring.is-indeterminate .catchup-ring-progress { stroke-dasharray: 13 34.124; stroke-dashoffset: 0 !important; transition: none; }
@keyframes catchup-ring-spin { to { transform: rotate(270deg); } }

@media (max-aspect-ratio: 4/3) {
  .catchup { bottom: 20px; width: min(420px, 58vw); }
}