/* =====================================
   WORSHIP MODE — PRODUCTION STABLE UI
===================================== */

/* =====================================
   ROOT EQ VARIABLE (updated by JS)
===================================== */
:root {
  --eqColor: #0a6cff;
}

/* =====================================
   WORSHIP OVERLAY LAYER
===================================== */

#worshipMode {
  position: fixed;
  inset: 0;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  background: none;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;

  z-index: 5000;
}

#worshipMode.active {
  opacity: 1;
  pointer-events: auto;
}

/* =====================================
   LISTENING ROOM FADE (SELECTIVE)
===================================== */

body.worship-active .listen-grid > *:not(.eq-controls),
body.worship-active #signature {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

body.worship-active #worshipMotion,
body.worship-active #eqCanvas {
  opacity: 1;
}

body.worship-active #worshipModeBtn {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* =====================================
   TOP BAR
===================================== */

#worshipTopBar {
  position: absolute;
  top: 28px;
  left: 32px;
  right: 32px;

  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;

  z-index: 6000;
  transition: opacity 0.3s ease;
}

#worshipSignature {
  font-weight: inherit;
  color: inherit;
  opacity: 0.9;
}

#worshipTitle {
  justify-self: center;

  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.05em;

  color: rgba(255,255,255,0.96);

  text-shadow:
    0 0 14px rgba(0,0,0,0.6),
    0 0 22px rgba(0,0,0,0.4);
}

/* =====================================
   EXIT BUTTON — BOTTOM LEFT POSITION
===================================== */

#exitWorship {
  position: fixed;
  bottom: 32px;
  left: 32px;

  width: 66px;
  height: 66px;

  border-radius: 18px;
  border: 2px solid var(--eqColor);

  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(8px);

  color: white;
  font-size: 20px;
  font-weight: 600;

  cursor: pointer;

  box-shadow: 0 0 18px rgba(0,0,0,0.7);
  transition: all 0.25s ease;

  z-index: 7000;
}

#exitWorship:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 22px var(--eqColor);
}

/* =====================================
   LYRICS
===================================== */

#worshipLyrics {
  position: relative;

  width: 90%;
  max-width: 950px;

  height: 65vh;
  overflow-y: auto;

  padding-top: 40vh;
  padding-bottom: 40vh;

  box-sizing: border-box;

  text-align: center;
  font-size: 2.3rem;
  line-height: 1.75;

  color: var(--eqColor);
  transition: color 0.3s ease;

  scroll-behavior: auto;

  scrollbar-width: none;
}

#worshipLyrics::-webkit-scrollbar {
  display: none;
}

.lyric-line {
  opacity: 0.25;
  margin: 22px 0;

  transform: scale(0.96);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease,
    color 0.4s ease;
}

.lyric-line.active {
  opacity: 1;
  font-weight: 600;
  transform: scale(1.08);

  text-shadow:
    0 0 10px var(--eqColor),
    0 0 20px rgba(0,0,0,0.4);
}

/* =====================================
   CONTROLS WRAPPER
===================================== */

#worshipControls {
  position: absolute;
  bottom: 55px;

  width: 80%;
  max-width: 850px;
  text-align: center;

  z-index: 5500;
  transition: opacity 0.3s ease;
}

/* =====================================
   PROGRESS BAR
===================================== */

#worshipProgress {
  width: 100%;
  height: 6px;

  border-radius: 4px;
  background: rgba(255,255,255,0.2);

  margin-bottom: 22px;
  cursor: pointer;

  accent-color: var(--eqColor);
}

/* =====================================
   CONTROL BUTTONS
===================================== */

.worship-buttons {
  display: flex;
  justify-content: center;
  gap: 30px;
}

.worship-buttons button {
  width: 66px;
  height: 66px;

  border-radius: 18px;
  border: 2px solid var(--eqColor);

  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(8px);

  color: white;
  font-size: 20px;
  font-weight: 600;

  cursor: pointer;

  box-shadow: 0 0 18px rgba(0,0,0,0.7);
  transition: all 0.25s ease;
}

.worship-buttons button:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 22px var(--eqColor);
}

/* =====================================
   REPEAT BUTTON STATES
===================================== */

#repeatBtn {
  position: relative;
}

#repeatBtn.repeat-all,
#repeatBtn.repeat-one {
  border-color: var(--eqColor);
  box-shadow:
    0 0 14px var(--eqColor),
    0 0 22px rgba(0,0,0,0.7);
  color: var(--eqColor);
}

/* =====================================
   REPEAT BUTTON BADGE (REPEAT ONE)
===================================== */

#worshipMode #repeatBtn.repeat-one::after {
  content: "1";

  position: absolute;
  top: 6px;
  right: 6px;

  width: 18px;
  height: 18px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 11px;
  font-weight: 700;

  border-radius: 50%;

  background: var(--eqColor);
  color: #000;

  box-shadow:
    0 0 6px var(--eqColor),
    0 0 12px rgba(0,0,0,0.5);

  pointer-events: none;
}

/* =====================================
   NEW TRACK LIST BUTTON
===================================== */

#trackListBtn {
  font-size: 22px;
}

/* =====================================
   TRACK OVERLAY — LIGHT ARCHITECTURE
===================================== */

.track-overlay {
  position: fixed;
  inset: 0;

  background: rgba(255,255,255,0.35);
  backdrop-filter: blur(14px);

  display: flex;
  justify-content: center;
  align-items: center;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;

  z-index: 8000;
}

.track-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.track-overlay-inner {
  width: 90%;
  max-width: 600px;

  background: rgba(255,255,255,0.85);
  border: 2px solid var(--eqColor);
  border-radius: 22px;

  padding: 34px;

  box-shadow:
    0 0 30px var(--eqColor),
    0 12px 40px rgba(0,0,0,0.2);
}

.track-overlay-title {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 22px;
  text-align: center;

  color: #111;
}

#worshipTrackList {
  list-style: none;
  padding: 0;
  margin: 0;
}

#worshipTrackList li {
  padding: 14px 18px;
  margin-bottom: 12px;

  border-radius: 14px;
  cursor: pointer;

  background: rgba(0,0,0,0.05);
  color: #111;

  transition: all 0.25s ease;
}

#worshipTrackList li:hover {
  background: rgba(0,0,0,0.08);
  transform: translateX(6px);
  box-shadow: 0 0 10px rgba(0,0,0,0.15);
}

/* =====================================
   PRESENCE BUTTON
===================================== */

#presenceToggle {
  width: 66px;
  height: 66px;

  border-radius: 18px;
  border: 2px solid var(--eqColor);

  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(8px);

  color: var(--eqColor);

  cursor: pointer;

  box-shadow: 0 0 18px rgba(0,0,0,0.7);
  transition: all 0.25s ease;
}

#presenceToggle:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 22px var(--eqColor);
}

/* =====================================
   UNHIDE BUTTON
===================================== */

#unhideControls {
  position: fixed;
  bottom: 28px;
  right: 28px;

  width: 44px;
  height: 44px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;
  border: 1.5px solid var(--eqColor);

  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(6px);

  color: var(--eqColor);

  cursor: pointer;

  box-shadow: 0 0 12px rgba(0,0,0,0.6);
  transition: all 0.25s ease;

  opacity: 0;
  pointer-events: none;

  z-index: 7000;
}

body.controls-hidden #unhideControls {
  opacity: 0.9;
  pointer-events: auto;
}

#unhideControls:hover {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 0 18px var(--eqColor);
}

.eq-controls {
  position: relative;
  z-index: 6500;
}

/* =====================================
   HIDE CONTROLS STATE
===================================== */

body.controls-hidden #worshipControls,
body.controls-hidden #worshipTopBar,
body.controls-hidden #exitWorship {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}