@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@400..800&family=DynaPuff:wght@400..700&family=Mystery+Quest&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&display=swap');
	
/* Player Box */
.player {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 165px;
  border-radius: 20px;
  color: white;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  z-index: 9999;

  background:
    radial-gradient(circle at top left, rgba(255, 170, 80, 0.35), transparent 35%),
    radial-gradient(circle at top right, rgba(255, 80, 160, 0.25), transparent 30%),
    radial-gradient(circle at bottom left, rgba(255, 220, 120, 0.18), transparent 28%),
    linear-gradient(135deg, rgba(20, 10, 30, 0.92), rgba(45, 15, 20, 0.88));
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.12);
}

.player::before {
  content: "";
  position: absolute;
  inset: -40px;
  background:
    radial-gradient(circle, rgba(255,255,255,0.10) 0 2px, transparent 3px) 0 0 / 28px 28px,
    radial-gradient(circle, rgba(255,180,80,0.18), transparent 55%);
  opacity: 0.6;
  animation: floatBg 8s ease-in-out infinite;
  pointer-events: none;
}

.player::after {
  content: "";
  position: absolute;
  left: -20%;
  top: -20%;
  width: 140%;
  height: 140%;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,0.12), transparent 65%);
  transform: rotate(12deg);
  animation: shineMove 4s linear infinite;
  pointer-events: none;
}

@keyframes floatBg {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(8px) scale(1.03); }
}

@keyframes shineMove {
  0% { transform: translateX(-40%) rotate(12deg); }
  100% { transform: translateX(40%) rotate(12deg); }
}

/* Cartoon Character */
.character {
    font-size: 40px;
    animation: bounce 1.5s infinite;
	margin-top: -100px;
}

@keyframes bounce {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Disc Animation */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Controls */
.controls button {
    background:#1abc9c;
    border:none;
    padding:5px 9px;
    border-radius:50%;
    color:white;
    cursor:pointer;
}

/* Equalizer */
.equalizer {
    display:flex;
    justify-content:center;
    gap:5px;
    margin:10px 0;
}

.equalizer span {
    width:5px;
    height:20px;
    background:#ff6600;
    animation: equalize 1s infinite;
}

.equalizer span:nth-child(2){ animation-delay:0.2s;}
.equalizer span:nth-child(3){ animation-delay:0.4s;}
.equalizer span:nth-child(4){ animation-delay:0.6s;}

@keyframes equalize {
    0%,100% { height:10px;}
    50% { height:30px;}
}

#volume {
    width:100%;
}
	
.info {
    text-align: center;
    margin-bottom: 10px;
}

/* Title (Ghari) */
#title {
    font-family: 'Pacifico', cursive;
    font-size: 22px;
	margin-bottom: 10px;
    letter-spacing: 1px;
    background: linear-gradient(45deg, #ffd700, #ff8c00, #ff3c00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 10px rgba(255,140,0,0.6);
}

/* Subtitle (Click To Play) */
#artist {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    margin-top: 4px;
    color: rgba(255,255,255,0.8);
    letter-spacing: 1px;
    text-transform: uppercase;
    position: relative;
}

/* Glow animation */
#artist::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -3px;
    width: 0%;
    height: 2px;
    background: linear-gradient(to right, #ff6600, #ffd700);
    transform: translateX(-50%);
    transition: 0.3s;
}