* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  overflow-x: hidden;
}

.winamp-container {
  background: linear-gradient(180deg, #4a4a6a 0%, #2a2a4a 50%, #1a1a3a 100%);
  border-radius: 8px;
  box-shadow: 
    0 0 0 1px #5a5a7a,
    0 0 0 2px #1a1a2a,
    0 4px 20px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.win-button {
  background: linear-gradient(180deg, #6a6a8a 0%, #4a4a6a 50%, #3a3a5a 100%);
  border: 1px solid #2a2a4a;
  border-radius: 2px;
  color: #ccc;
  cursor: pointer;
  font-family: 'IBM Plex Mono', monospace;
}

.win-button:hover {
  background: linear-gradient(180deg, #7a7a9a 0%, #5a5a7a 50%, #4a4a6a 100%);
}

.win-button:active {
  background: linear-gradient(180deg, #3a3a5a 0%, #4a4a6a 50%, #5a5a7a 100%);
}

.spectrum-bar {
  border-radius: 1px 1px 0 0;
}

.volume-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: #1a1a2a;
  border-radius: 3px;
  outline: none;
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: linear-gradient(145deg, #6a6a8a, #4a4a6a);
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #8a8aaa;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.volume-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: linear-gradient(145deg, #6a6a8a, #4a4a6a);
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #8a8aaa;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.station-item:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

.station-list {
  scrollbar-width: thin;
  scrollbar-color: #3a3a5a #1a1a2a;
}

.station-list::-webkit-scrollbar {
  width: 8px;
}

.station-list::-webkit-scrollbar-track {
  background: #1a1a2a;
}

.station-list::-webkit-scrollbar-thumb {
  background: #3a3a5a;
  border-radius: 4px;
}

.station-list::-webkit-scrollbar-thumb:hover {
  background: #4a4a6a;
}

.playing-indicator {
  animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.9); }
}

@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

.play-button:hover {
  transform: scale(1.05);
}

.play-button:active {
  transform: scale(0.95);
}

/* Mobile Optimizations */
@media (max-width: 640px) {
  .winamp-container {
    border-radius: 0;
    min-height: 100vh;
  }
  
  .station-list {
    max-height: calc(100vh - 480px) !important;
  }
}

/* Scanline effect for retro feel */
.display-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.1) 2px,
    rgba(0, 0, 0, 0.1) 4px
  );
  pointer-events: none;
  opacity: 0.3;
}

.display-section {
  position: relative;
}