/* ============================================================
   EI Lyrics — karaoke line highlighting (paired with js/lyrics.js)
   ============================================================ */
.ei-lyrics {
  max-height: 42vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding: 6px 2px;
  text-align: center;
  /* fade top/bottom so non-active lines recede */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
}
.ei-lyrics::-webkit-scrollbar { display: none; }

.ei-lyrics__line {
  font-size: 1.06rem;
  line-height: 1.5;
  font-weight: 700;
  color: var(--app-muted, #6f6450);
  opacity: 0.45;
  margin: 10px 6px;
  cursor: pointer;
  transition: color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
  transform: scale(0.98);
}
.ei-lyrics__line:hover { opacity: 0.7; }

.ei-lyrics__line.active {
  color: var(--app-text-strong, #0d2846);
  opacity: 1;
  transform: scale(1.02);
}

/* On the dark sleep/devotional players the text sits on navy → light up. */
.dev-screen .ei-lyrics__line,
.ei-sleep .ei-lyrics__line { color: rgba(255,255,255,0.55); }
.dev-screen .ei-lyrics__line.active,
.ei-sleep .ei-lyrics__line.active { color: #fff; }

/* ── Single-line mode: only the line being spoken, centered, no scroll ── */
.ei-lyrics--single {
  /* Reserve a constant 3-line block so the central image area never reflows
     as the spoken line changes length. Vertically centered, clipped at 3
     lines. The fixed height keeps the remaining space for the image equal. */
  min-height: calc(1.32rem * 1.45 * 3 + 8px);
  height: calc(1.32rem * 1.45 * 3 + 8px);
  overflow: hidden;
  -webkit-mask-image: none; mask-image: none;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 4px 8px;
}
.ei-lyrics__single {
  font-size: 1.32rem; line-height: 1.45; font-weight: 700;
  color: var(--app-text-strong, #0d2846);
  max-width: 30ch; margin: 0 auto;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden;
}
.ei-lyrics__single.ei-anim { animation: eiLyricFade 0.4s ease; }
@keyframes eiLyricFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* On dark players (sleep/devotional/fullscreen) the single line lights up. */
.dev-screen .ei-lyrics__single,
.ei-sleep .ei-lyrics__single,
.sleep-mode .ei-lyrics__single { color: #fff; }

/* Static fallback (no timing file) — render as a normal paragraph. */
.ei-lyrics--static {
  max-height: none; overflow: visible;
  -webkit-mask-image: none; mask-image: none;
  text-align: left;
}
.ei-lyrics__static {
  margin: 0;
  font-size: 1rem; font-weight: 400; line-height: 1.6;
  color: var(--app-text, #1f2d3d);
}

@media (prefers-reduced-motion: reduce) {
  .ei-lyrics__line { transition: color 0.2s ease, opacity 0.2s ease; transform: none; }
  .ei-lyrics__line.active { transform: none; }
  .ei-lyrics__single.ei-anim { animation: none; }
}