/* Synced lyrics panel and its quick-action toggle. */
.quick-actions{grid-template-columns:minmax(46px,auto) repeat(11,40px)}
#lyricsButton::before{display:none}
#lyricsButton{display:grid;place-items:center}
#lyricsButton svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}

.lyrics-panel{
  --lyrics-font:"Segoe UI","Nirmala UI",sans-serif;--lyrics-size:1;--lyrics-weight:800;--lyrics-style:normal;
  --lyrics-case:none;--lyrics-align:center;--lyrics-origin:center;--lyrics-leading:1.25;
  --lyrics-accent:#fff;--lyrics-dim:#fff;--lyrics-glow:#fff;--lyrics-glow-size:24px;
  position:fixed;z-index:6;
  /* Centre of the stage, in the space the spectrum uses, above the song title. */
  left:50%;transform:translateX(-50%);
  top:clamp(46px,7vh,80px);width:min(820px,84vw);height:min(54vh,500px);
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  color:#fff;overflow:hidden;text-align:center;
}
.lyrics-viewport,.lyrics-style-preview{text-align:var(--lyrics-align)}
.lyrics-panel[hidden]{display:none}
.lyrics-head{display:flex;align-items:center;gap:8px;padding:4px 6px;opacity:.35;transition:opacity .2s ease}
.lyrics-panel:hover .lyrics-head,.lyrics-head:focus-within{opacity:1}
.lyrics-source{flex:1 1 0;width:0;min-width:0;font-size:11px;letter-spacing:.6px;text-transform:uppercase;opacity:.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lyrics-tools{flex:none;display:flex;gap:4px}
.lyrics-tools button{
  min-width:28px;height:28px;min-height:0;padding:0 7px;border:0;border-radius:14px;box-sizing:border-box;
  background:rgba(255,255,255,.08);color:inherit;font:600 13px/1 inherit;cursor:pointer;
}
.lyrics-tools button:hover{background:rgba(255,255,255,.18)}
.lyrics-tools .lyrics-offset{font-variant-numeric:tabular-nums;min-width:52px;font-size:12px}
.lyrics-tools .lyrics-offset.changed{background:rgba(255,255,255,.22)}

.lyrics-viewport{
  position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);
  mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);
}
.lyrics-lines{position:relative;padding:0 4%;transition:transform .45s cubic-bezier(.2,.7,.2,1);will-change:transform}
.lyrics-line{
  margin:0;padding:.3em 0;font-size:calc(clamp(20px,2.3vw,34px) * var(--lyrics-size));line-height:var(--lyrics-leading);
  font-family:var(--lyrics-font);font-weight:var(--lyrics-weight);font-style:var(--lyrics-style);text-transform:var(--lyrics-case);
  color:var(--lyrics-dim);opacity:.5;cursor:pointer;transform-origin:var(--lyrics-origin);overflow-wrap:anywhere;
  text-shadow:0 2px 12px rgba(0,0,0,.55);
  transition:color .25s ease,transform .3s ease,opacity .3s ease;
}
.lyrics-line:hover{opacity:.8}
.lyrics-line.past{opacity:.3}
.lyrics-line.active{color:var(--lyrics-accent);opacity:1;transform:scale(1.08);text-shadow:0 0 var(--lyrics-glow-size) var(--lyrics-glow),0 2px 12px rgba(0,0,0,.6)}
.lyrics-line.gap{letter-spacing:4px}
.lyrics-line.worded.active{color:var(--lyrics-dim)}
.lyrics-line.worded span{transition:color .12s linear}
.lyrics-line.worded.active span.sung{color:var(--lyrics-accent)}
.lyrics-message{margin:0;padding:40px 0;text-align:center;font-size:14px;opacity:.6}
.lyrics-viewport .lyrics-message{position:absolute;inset:0 20px;padding-top:30%}

.lyrics-panel.plain .lyrics-viewport{overflow:auto;-webkit-mask-image:none;mask-image:none}
.lyrics-panel.plain .lyrics-lines{padding:8px 20px 20px;transition:none}
.lyrics-line.plain-line{cursor:default;color:var(--lyrics-accent);opacity:.9;font-size:calc(clamp(15px,1.3vw,19px) * var(--lyrics-size));padding:3px 0}

.lyrics-foot{padding:6px 16px 10px;font-size:11px;opacity:.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lyrics-foot[hidden]{display:none}

/* While lyrics are on screen they take the spectrum's place. */
html:not(.widget-mode) body.lyrics-mode #visualizer,
html:not(.widget-mode) body.lyrics-mode #centerDisc{visibility:hidden}

/* Side panels and Spectrum Studio take over the screen; keep lyrics out of their way.
   Settings stays see-through so lyrics style changes show live. */
body.library-open .lyrics-panel,
body.effects-open .lyrics-panel,
body.spectrum-studio-open .lyrics-panel{visibility:hidden}
body.settings-open .lyrics-panel{z-index:2}

@media (max-width:900px){
  .lyrics-panel{width:94vw;height:min(46vh,380px)}
}
@media (max-width:720px){
  .quick-actions{grid-template-columns:minmax(38px,auto) repeat(11,34px)}
}

:root[data-theme="light"] .lyrics-panel{color:#15161a}
/* The light theme picks dark text unless the listener chose their own colours. */
:root[data-theme="light"] .lyrics-panel:not(.custom-colors),
:root[data-theme="light"] .lyrics-style-preview:not(.custom-colors){--lyrics-accent:#111;--lyrics-dim:#111;--lyrics-glow:transparent}
:root[data-theme="light"] .lyrics-line{text-shadow:none}
:root[data-theme="light"] .lyrics-tools button{background:rgba(0,0,0,.06)}

/* Lyrics section in Settings. */
.lyrics-style-preview{
  margin:4px 0 10px;padding:12px 14px;border-radius:14px;overflow:hidden;
  background:linear-gradient(135deg,rgba(20,20,30,.85),rgba(50,30,60,.85));color:#fff;
}
.lyrics-style-preview .lyrics-line{font-size:calc(15px * var(--lyrics-size));cursor:default;padding:.15em 0}
.lyrics-style-preview .lyrics-line.active{transform:none}
:root[data-theme="light"] .lyrics-style-preview{background:linear-gradient(135deg,#eef0f3,#e3e6ec)}
.lyrics-swatches{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;margin:6px 0 4px}
.lyrics-swatch{
  display:block;aspect-ratio:1;border-radius:50%;cursor:pointer;
  border:2px solid rgba(255,255,255,.25);background:var(--swatch);box-shadow:0 0 8px var(--swatch-glow);
  transition:transform .12s ease;
}
.lyrics-swatch:hover,.lyrics-swatch:focus-visible{transform:scale(1.12);outline:none;border-color:#fff}
.lyrics-style-reset{margin-top:8px;width:100%;min-height:34px;border-radius:10px;cursor:pointer}

/* Pink backdrop that replaces the custom background while lyrics show (Settings › Lyrics › Background).
   Drawn with gradients so it stays sharp at any screen size; the fine noise stops colour banding. */
.lyrics-backdrop{
  position:fixed;inset:0;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s linear .5s;
  background:
    radial-gradient(ellipse 62% 78% at 52% 30%,rgba(250,150,182,.95) 0%,rgba(248,138,174,.7) 28%,rgba(247,120,163,0) 70%),
    radial-gradient(ellipse 120% 115% at 50% 40%,#f784aa 0%,#f670a0 42%,#f55796 70%,#f43d8b 100%);
}
.lyrics-backdrop::after{
  content:"";position:absolute;inset:0;opacity:.07;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html:not(.widget-mode) body.lyrics-mode[data-lyrics-background="pink"] .lyrics-backdrop{opacity:1;visibility:visible;transition:opacity .5s ease}
/* The particle layer paints a dark dim over the scene; it is part of the hidden spectrum anyway. */
html:not(.widget-mode) body.lyrics-mode[data-lyrics-background="pink"] #particleLayer{visibility:hidden}