Make LIVE element pulse green if live

assets/css/radio.css

@@ -29,7 +29,7 @@ a:hover, a:focus { color: var(--text); text-decoration: underline; }
 /* -------------------------------------------------------------- layout */
 .player-wrap {
   width: 100%;
-  max-width: 460px;
+  max-width: 660px;
   padding: 16px;
   display: flex;
   flex-direction: column;
@@ -51,8 +51,8 @@ a:hover, a:focus { color: var(--text); text-decoration: underline; }
 
 /* ----------------------------------------------------------- album art */
 .album-art {
-  width: 78%;
-  max-width: 100%;
+  width: 100%;
+  max-width: 600px;
   height: auto;
   aspect-ratio: 1 / 1;
   object-fit: cover;
@@ -97,7 +97,25 @@ a:hover, a:focus { color: var(--text); text-decoration: underline; }
 }
 .vol-row { justify-content: center; }
 .time { font-variant-numeric: tabular-nums; font-size: 0.8rem; opacity: 0.8; min-width: 40px; }
-.live-badge { color: var(--accent); font-size: 0.75rem; font-weight: 700; letter-spacing: .05em; }
+
+.live-badge { display: inline-flex; align-items: center; gap: 6px; }
+.live-text {
+  color: #ffffff;
+  font-size: 0.78rem; font-weight: 700; letter-spacing: .12em;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
+}
+.live-dot {
+  width: 10px; height: 10px; border-radius: 50%;
+  background: #21d05f;
+  animation: live-pulse 2.6s ease-in-out infinite;
+}
+@keyframes live-pulse {
+  0%, 100% { box-shadow: 0 0 3px 0 rgba(33, 208, 95, 0.5);  opacity: 0.85; }
+  50%      { box-shadow: 0 0 11px 3px rgba(33, 208, 95, 0.95); opacity: 1; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .live-dot { animation: none; box-shadow: 0 0 6px rgba(33, 208, 95, 0.9); }
+}
 
 .range {
   -webkit-appearance: none; appearance: none;