@import url('https://fonts.googleapis.com/css2?family=Baumans&family=Henny+Penny&family=Rock+3D&display=swap');
    .jukebox-box {
      background-image:url('/img/tripspiral.gif');
      background-size:contain;
      background-blend-mode:overlay;
      background-color: #226dbd;
      border: 1px solid #18c795;
      padding: 1.5rem;
      width: 100%;
      max-width: 420px;
    }
    
    .jukebox-box:before {
       opacity:0.4;
}
    .jukebox-title {
      font-size: 20px;
      font-weight: 500;
      color: #0fff47;
      margin: 0 0 1rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      z-index:4;
    }
    .jukebox-box p {
      z-index:4;
    }
    .now-playing {
box-shadow:
  0 0 16px rgba(255, 0, 255, 0.5),
  0 0 24px rgba(140, 0, 255, 0.4);

  border: 3px solid #ff4dd5;
      background: #09008c;
      padding: 10px 14px;
      margin-bottom: 1rem;
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 44px;
    }
    .np-text {
      color:#ff4dd5 !important;
    }
    .np-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: #4a3a7a;
      flex-shrink: 0;
      transition: background 0.3s;
    }
    .np-dot.playing {
      background:#ff4dd5;
      animation: pulse 1.2s ease-in-out infinite;
    }
    @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
    .np-text {
      font-size: 13px;
      color: #18c795;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .song-list { list-style: none; display: flex; flex-direction: column; gap: 4px;}
    .song-btn {
      width: 100%;
     background-color:rgba(94, 41, 255, 0.7) !important;
      border: 1px solid #18c795;
      padding: 10px 14px;
      cursor: pointer;
      text-align: left;
      font-size: 14px;
      color: #fff;
      font-family: sans-serif;
      display: flex;
      align-items: center;
      gap: 10px;
      transition: background 0.15s;
    }
   .ctrl-btn {
  font-family: 'Baumans', monospace !important;
  color:#18c795 !important;
  background-color:rgba(94, 41, 255, 0.7) !important;
}
    .song-btn:hover { background: #09008c; }
    .song-btn.active { border-color: #18c795; color: #18c795; background: #09008c; }
    .song-num { font-size: 12px; color: #ffffff; min-width: 16px; font-family: 'Baumans', monospace }
    .song-name { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: 'Baumans', monospace; }
    .controls { display: flex; gap: 8px; margin-top: 1rem; }
    .ctrl-btn {
      flex: 1;
      background: transparent;
      border: 1px solid #18c795;
      border-radius: 8px;
      padding: 8px;
      cursor: pointer;
      font-size: 13px;
      color: #9b90e8;
      font-family: sans-serif;
      transition: background 0.15s;
    }
    .ctrl-btn:hover { background-color:#09008c; }
    .vol-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
    .vol-label { font-size: 12px; color: #18c795; min-width: 28px; }
    .vol-row input[type=range] {
      flex: 1;
      accent-color: #18c795;
    }
    
    @media screen and (max-width: 780px) {
      #vol-slider {
        width:20%;
    }
  }