Move lyrics location into artwork

assets/css/radio.css

@@ -50,6 +50,8 @@ a:hover, a:focus { color: var(--text); text-decoration: underline; }
 }
 
 /* ----------------------------------------------------------- album art */
+.art-wrap { position: relative; width: 100%; }
+
 .album-art {
   width: 100%;
   max-width: 600px;
@@ -160,18 +162,30 @@ audio[controls] { width: 100%; outline: 0; }
 }
 
 /* --------------------------------------------------------------- lyrics */
+.lyrics-toggle {
+  position: absolute; top: 10px; right: 10px; z-index: 2;
+  padding: 6px 14px;
+  background: rgba(0, 0, 0, 0.55); color: #fff;
+  font-variant: small-caps; font-size: 0.85rem;
+  border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px;
+  cursor: pointer; backdrop-filter: blur(4px);
+  transition: background .15s ease;
+}
+.lyrics-toggle:hover, .lyrics-toggle:focus { background: rgba(0, 0, 0, 0.8); outline: 0; }
+.lyrics-toggle[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
+
 .lyrics {
-  width: 100%; max-width: 460px;
+  position: absolute; inset: 0; z-index: 1;
-  max-height: 42vh;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;   /* momentum scroll on iOS */
   overscroll-behavior: contain;
-  text-align: left; white-space: pre-line; line-height: 1.5;
+  text-align: left; white-space: pre-line; line-height: 1.6;
-  padding: 12px 14px;
+  padding: 52px 20px 20px;
-  background: rgba(0, 0, 0, 0.25);
+  background: rgba(0, 0, 0, 0.8);
   border-radius: var(--radius);
-  color: var(--text);
+  color: #fff;
 }
+.lyrics[hidden] { display: none; }   /* [hidden] must beat position:absolute rule specificity */
 
 /* Hide the scrollbar but keep wheel / touch / drag scrolling. */
 .no-scrollbar, .lyrics, .history {
@@ -222,7 +236,7 @@ audio[controls] { width: 100%; outline: 0; }
 @media (max-width: 575px) {
   body { background: var(--bg-mobile); }
   .player-card { padding: 16px; }
-  .album-art { width: 88%; }
+  .art-wrap, .album-art { width: 88%; }
   .history { width: min(96vw, 420px); }
 }
 

assets/js/player.js

@@ -384,7 +384,7 @@
   function loadLyrics(track) {
     if (!CFG.lyricsEnabled || !el.lyricsToggle) return;
     el.lyricsToggle.hidden = true;
-    el.lyricsToggle.textContent = 'Show lyrics';
+    el.lyricsToggle.setAttribute('aria-pressed', 'false');
     if (el.lyrics) { el.lyrics.hidden = true; el.lyrics.textContent = ''; }
 
     var body = new URLSearchParams();
@@ -405,7 +405,7 @@
       if (!el.lyrics) return;
       var show = el.lyrics.hidden;
       el.lyrics.hidden = !show;
-      el.lyricsToggle.textContent = show ? 'Hide lyrics' : 'Show lyrics';
+      el.lyricsToggle.setAttribute('aria-pressed', show ? 'true' : 'false');
     });
   }
 

index.php

@@ -23,8 +23,14 @@ $waveActive    = radio_waveform_active();
 
   <main class="player-wrap">
     <section class="player-card" id="card">
-      <img id="art" class="album-art" src="<?= e($fallbackArt) ?>"
+      <div class="art-wrap">
-           alt="Album art" title="<?= e(cfg('site.name')) ?>"/>
+        <img id="art" class="album-art" src="<?= e($fallbackArt) ?>"
+             alt="Album art" title="<?= e(cfg('site.name')) ?>"/>
+<?php if ($lyricsEnabled): ?>
+        <button id="lyrics-toggle" class="lyrics-toggle" type="button" hidden aria-pressed="false">Lyrics</button>
+        <div id="lyrics" class="lyrics" hidden></div>
+<?php endif; ?>
+      </div>
 
       <div class="track-meta">
         <div class="track-name"   id="track-name"><?= e(cfg('site.name')) ?></div>
@@ -59,14 +65,7 @@ $waveActive    = radio_waveform_active();
       </div>
 <?php endif; ?>
 
-<?php if ($lyricsEnabled): ?>
-      <button id="lyrics-toggle" class="btn-accent" type="button" hidden>Show lyrics</button>
-<?php endif; ?>
     </section>
-
-<?php if ($lyricsEnabled): ?>
-    <div id="lyrics" class="lyrics" hidden></div>
-<?php endif; ?>
   </main>
 
 <?php if ($showHistory): ?>