.lrc-radar {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  isolation: isolate;
  margin: 12px 40px 24px 288px;
  overflow: clip; /* Glow overscan must not scroll the card when navigation receives focus. */
  border: 1px solid rgba(226, 209, 155, .12);
  border-radius: 22px;
  background: #17151d;
}
.lrc-radar[hidden] { display: none; }
.lrc-radar[aria-busy="true"] .lrc-radar-copy { opacity: .55; }
.lrc-radar-track:disabled { cursor: default; }
.lrc-radar-glow {
  position: absolute;
  inset: -90% -10% -90% 18%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 68% 46%, #65594166, transparent 40%),
    radial-gradient(ellipse at 35% 55%, #63547555, transparent 46%);
  animation: lrc-radar-drift 12s ease-in-out infinite alternate;
}
@keyframes lrc-radar-drift { to { transform: translateX(8%) rotate(12deg); } }
.lrc-radar-track {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: 28px 20px 28px 32px;
  border: 0;
  background: transparent;
  color: #f4f0e8;
  text-align: left;
  cursor: pointer;
}
.lrc-radar-art { display: block; width: 104px; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: #302a36; }
.lrc-radar-art img { width: 100%; height: 100%; object-fit: cover; }
.lrc-radar-copy { display: grid; min-width: 0; gap: 7px; }
.lrc-radar-label { color: #d9c994; font-size: 11px; font-weight: 750; letter-spacing: .15em; }
.lrc-radar-title { font-size: clamp(24px, 2.6vw, 34px); font-weight: 750; line-height: 1.25; overflow-wrap: anywhere; }
.lrc-radar-meta { color: #b9b0c1; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.lrc-radar-controls { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 28px 0 8px; }
.lrc-radar-controls .player-btn { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #ffffff03; color: #bdbab5; box-shadow: none; cursor: pointer; transition: transform 150ms ease, background-color 150ms ease, color 150ms ease; }
.lrc-radar-controls .player-btn svg { display: block; width: 24px; height: 24px; }
.lrc-radar-controls .lrc-radar-play { width: 64px; height: 64px; background: #ecd58e; color: #19160e; }
.lrc-radar-play > span { display: grid; place-items: center; }
.lrc-radar-play > span.hidden { display: none; }
.lrc-radar-controls .player-btn:hover { background: #ffffff0c; color: #f4f0e8; transform: translateY(-2px); }
.lrc-radar-controls .lrc-radar-play:hover { background: #f0dda5; color: #19160e; box-shadow: none; }
.lrc-radar-controls .player-btn:active { transform: scale(.91); }
.lrc-radar-controls .player-btn:disabled { opacity: .35; cursor: default; transform: none; }
.lrc-radar :focus-visible { outline: 2px solid #e6d49d; outline-offset: -4px; }
@media (max-width: 1200px) and (min-width: 761px) {
  .lrc-radar { margin-left: 244px; margin-right: 24px; }
}
@media (max-width: 760px) {
  .lrc-radar { grid-template-columns: minmax(0, 1fr); margin: 10px 16px 18px; border-radius: 18px; }
  .lrc-radar-track { grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding: 22px 20px 12px; }
  .lrc-radar-art { width: 64px; border-radius: 11px; }
  .lrc-radar-title { font-size: 20px; }
  .lrc-radar-meta { font-size: 12px; }
  .lrc-radar-controls { margin: 4px 20px 18px; }
  .lrc-radar-controls .lrc-radar-play { width: 56px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .lrc-radar-glow { animation: none; }
  .lrc-radar-controls .player-btn { transition: none; }
  .lrc-radar-controls .player-btn:is(:hover,:active) { transform: none; }
}
body:has(#lyricsPanel.visible) .lrc-radar-glow { animation-play-state: paused; }