/* ========================================
   Winamp Skins System
   Multiple custom skins with switching functionality
   ======================================== */

/* ===== SKIN 1: NEON BLUE ===== */
.winamp-skin-neon {
  /* Main container */
  background: linear-gradient(180deg, #0a1a2f 0%, #0f2a4f 50%, #0a1a2f 100%) !important;
  border: 2px solid #00a2ff !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 4px 16px rgba(0, 162, 255, 0.3), 0 0 40px rgba(0,0,0,0.4), inset 0 0 20px rgba(0, 0, 0, 0.8) !important;
}

.winamp-skin-neon .winamp-yt-titlebar {
  background: linear-gradient(90deg, #0a1a2f 0%, #0f2a4f 50%, #0a1a2f 100%) !important;
  color: #00a2ff !important;
  border-bottom: 2px solid #00a2ff !important;
  text-shadow: 0 0 8px rgba(0, 162, 255, 0.6) !important;
}

.winamp-skin-neon .winamp-yt-controls {
  background: linear-gradient(180deg, #0a1a2f 0%, #061525 100%) !important;
}

.winamp-skin-neon .control-button {
  background: linear-gradient(180deg, #0a1a2f 0%, #061525 100%) !important;
  color: #00a2ff !important;
  border: 1px solid #00a2ff !important;
  text-shadow: 0 0 8px rgba(0, 162, 255, 0.6) !important;
  cursor: pointer !important;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
}

.winamp-skin-neon .control-button:hover {
  background: linear-gradient(180deg, #0f2a4f 0%, #0a1a2f 100%) !important;
  box-shadow: 0 0 10px rgba(0, 162, 255, 0.5) !important;
}

.winamp-skin-neon .control-button:active,
.winamp-skin-neon .control-button.active {
  background: #00a2ff !important;
  color: #0a1a2f !important;
}

.winamp-skin-neon .winamp-yt-bar {
  background: linear-gradient(180deg, #00a2ff 0%, #0080ff 50%, #0060ff 100%) !important;
  box-shadow: 0 0 8px rgba(0, 162, 255, 0.5) !important;
}

.winamp-skin-neon .main-display {
  background: linear-gradient(180deg, #061525 0%, #0a1a2f 100%) !important;
  border: 1px solid #00a2ff !important;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8), 0 0 5px rgba(0, 162, 255, 0.3) !important;
}

.winamp-skin-neon .time-display {
  color: #00ffff !important;
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.6) !important;
}

.winamp-skin-neon .song-title {
  color: #00a2ff !important;
}

.winamp-skin-neon .winamp-status-bar {
  background: linear-gradient(90deg, #061525 0%, #0a1a2f 50%, #061525 100%) !important;
  border-top: 1px solid #00a2ff !important;
}

.winamp-skin-neon .winamp-version,
.winamp-skin-neon .llama-text {
  color: #00a2ff !important;
}

.winamp-skin-neon .status-time {
  color: #00ffff !important;
}

.winamp-skin-neon::before,
.winamp-skin-neon::after {
  background: #00a2ff !important;
}

/* ===== SKIN 2: CYBER PURPLE ===== */
.winamp-skin-cyber {
  /* Main container */
  background: linear-gradient(180deg, #1a0933 0%, #2a0d4f 50%, #1a0933 100%) !important;
  border: 2px solid #b700ff !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 4px 16px rgba(183, 0, 255, 0.5), 0 0 40px rgba(183, 0, 255, 0.2), inset 0 0 20px rgba(0, 0, 0, 0.8) !important;
}

.winamp-skin-cyber .winamp-yt-titlebar {
  background: linear-gradient(90deg, #1a0933 0%, #2a0d4f 50%, #1a0933 100%) !important;
  color: #b700ff !important;
  border-bottom: 2px solid #b700ff !important;
  text-shadow: 0 0 8px rgba(183, 0, 255, 0.6) !important;
}

.winamp-skin-cyber .winamp-yt-controls {
  background: linear-gradient(180deg, #1a0933 0%, #10051e 100%) !important;
}

.winamp-skin-cyber .control-button {
  background: linear-gradient(180deg, #1a0933 0%, #10051e 100%) !important;
  color: #b700ff !important;
  border: 1px solid #b700ff !important;
  text-shadow: 0 0 8px rgba(183, 0, 255, 0.6) !important;
  cursor: pointer !important;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
}

.winamp-skin-cyber .control-button:hover {
  background: linear-gradient(180deg, #2a0d4f 0%, #1a0933 100%) !important;
  box-shadow: 0 0 10px rgba(183, 0, 255, 0.5) !important;
}

.winamp-skin-cyber .control-button:active,
.winamp-skin-cyber .control-button.active {
  background: #b700ff !important;
  color: #1a0933 !important;
}

.winamp-skin-cyber .winamp-yt-bar {
  background: linear-gradient(180deg, #ff00ff 0%, #b700ff 50%, #9000ff 100%) !important;
  box-shadow: 0 0 12px rgba(183, 0, 255, 0.7) !important;
  border-color: rgba(255, 0, 255, 0.5) !important;
}

.winamp-skin-cyber .main-display {
  background: linear-gradient(180deg, #10051e 0%, #1a0933 100%) !important;
  border: 1px solid #b700ff !important;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8), 0 0 5px rgba(183, 0, 255, 0.3) !important;
}

.winamp-skin-cyber .time-display {
  color: #ff00ff !important;
  text-shadow: 0 0 8px rgba(255, 0, 255, 0.6) !important;
}

.winamp-skin-cyber .song-title {
  color: #b700ff !important;
}

.winamp-skin-cyber .winamp-status-bar {
  background: linear-gradient(90deg, #10051e 0%, #1a0933 50%, #10051e 100%) !important;
  border-top: 1px solid #b700ff !important;
}

.winamp-skin-cyber .winamp-version,
.winamp-skin-cyber .llama-text {
  color: #b700ff !important;
}

.winamp-skin-cyber .status-time {
  color: #ff00ff !important;
}

.winamp-skin-cyber::before,
.winamp-skin-cyber::after {
  background: #b700ff !important;
}

/* ===== SKIN TRANSITION EFFECTS ===== */
.winamp-yt-player {
  transition: background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease !important;
}

/* More selective transitions to avoid breaking button hover effects */
.winamp-yt-titlebar,
.winamp-yt-controls,
.main-display,
.winamp-yt-spectrum,
.winamp-status-bar {
  transition: background 0.5s ease, color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease !important;
}

/* Preserve button hover functionality */
.control-button {
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
  cursor: pointer !important;
}

/* ===== SPACE KEY HINT ===== */
.space-hint {
  font-size: 9px;
  opacity: 0.9;
  font-style: italic;
  margin-left: 5px;
  font-weight: bold;
}

/* Make the space hint match the skin colors */
.winamp-skin-neon .space-hint {
  color: #00a2ff !important;
}

.winamp-skin-cyber .space-hint {
  color: #b700ff !important;
}

.winamp-skin-terminator .space-hint {
  color: #ff3300 !important;
}

.winamp-skin-matrix .space-hint {
  color: #00ff33 !important;
}

/* ===== SKIN INDICATOR ===== */
.skin-indicator {
  position: absolute;
  top: -80px;
  right: 10px;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 11px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  text-align: center;
  min-width: 120px;
}

.skin-indicator.show {
  opacity: 1;
  transform: translateY(0);
}

/* Skin name styling */
.skin-name {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 4px;
  color: #fff;
}

/* Unique code styling */
.skin-code {
  font-family: monospace;
  background: rgba(0, 0, 0, 0.3);
  padding: 3px 6px;
  border-radius: 3px;
  margin: 4px 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  letter-spacing: 1px;
}

/* Rarity styling */
.skin-rarity {
  font-size: 10px;
  text-transform: uppercase;
  font-weight: bold;
  margin-top: 4px;
  padding: 2px 6px;
  border-radius: 3px;
  display: inline-block;
}

/* Rarity levels */
.skin-rarity.common {
  background: linear-gradient(135deg, #777, #999);
  color: #fff;
}

.skin-rarity.rare {
  background: linear-gradient(135deg, #0070dd, #00a2ff);
  color: #fff;
}

.skin-rarity.epic {
  background: linear-gradient(135deg, #9345ff, #b700ff);
  color: #fff;
}

.skin-rarity.legendary {
  background: linear-gradient(135deg, #ff8000, #ffb100);
  color: #fff;
}

/* ===== SKIN 3: TERMINATOR RED ===== */
.winamp-skin-terminator {
  /* Main container */
  background: linear-gradient(180deg, #1a0000 0%, #2a0000 50%, #1a0000 100%) !important;
  border: 2px solid #ff0000 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 4px 16px rgba(255, 0, 0, 0.3), 0 0 40px rgba(255, 0, 0, 0.2), inset 0 0 20px rgba(0, 0, 0, 0.8) !important;
}

.winamp-skin-terminator .winamp-yt-titlebar {
  background: linear-gradient(90deg, #1a0000 0%, #2a0000 50%, #1a0000 100%) !important;
  color: #ff0000 !important;
  border-bottom: 2px solid #ff0000 !important;
  text-shadow: 0 0 8px rgba(255, 0, 0, 0.6) !important;
}

.winamp-skin-terminator .winamp-yt-controls {
  background: linear-gradient(180deg, #1a0000 0%, #0a0000 100%) !important;
}

.winamp-skin-terminator .control-button {
  background: linear-gradient(180deg, #1a0000 0%, #0a0000 100%) !important;
  color: #ff0000 !important;
  border: 1px solid #ff0000 !important;
  text-shadow: 0 0 8px rgba(255, 0, 0, 0.6) !important;
  cursor: pointer !important;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
}

.winamp-skin-terminator .control-button:hover {
  background: linear-gradient(180deg, #2a0000 0%, #1a0000 100%) !important;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.5) !important;
}

.winamp-skin-terminator .control-button:active,
.winamp-skin-terminator .control-button.active {
  background: #ff0000 !important;
  color: #1a0000 !important;
}

.winamp-skin-terminator .winamp-yt-bar {
  background: linear-gradient(180deg, #ff3300 0%, #ff0000 50%, #cc0000 100%) !important;
  box-shadow: 0 0 8px rgba(255, 0, 0, 0.5) !important;
}

.winamp-skin-terminator .main-display {
  background: linear-gradient(180deg, #0a0000 0%, #1a0000 100%) !important;
  border: 1px solid #ff0000 !important;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8), 0 0 5px rgba(255, 0, 0, 0.3) !important;
}

.winamp-skin-terminator .time-display {
  color: #ff3300 !important;
  text-shadow: 0 0 8px rgba(255, 51, 0, 0.6) !important;
  font-family: "Courier New", monospace !important;
}

.winamp-skin-terminator .song-title {
  color: #ff0000 !important;
  font-family: "Courier New", monospace !important;
}

.winamp-skin-terminator .winamp-status-bar {
  background: linear-gradient(90deg, #0a0000 0%, #1a0000 50%, #0a0000 100%) !important;
  border-top: 1px solid #ff0000 !important;
}

.winamp-skin-terminator .winamp-version,
.winamp-skin-terminator .llama-text {
  color: #ff0000 !important;
  font-family: "Courier New", monospace !important;
}

.winamp-skin-terminator .status-time {
  color: #ff3300 !important;
  font-family: "Courier New", monospace !important;
}

.winamp-skin-terminator::before,
.winamp-skin-terminator::after {
  background: #ff0000 !important;
}

/* ===== SKIN 4: MATRIX GREEN ===== */
.winamp-skin-matrix {
  /* Main container */
  background: linear-gradient(180deg, #001a00 0%, #002a00 50%, #001a00 100%) !important;
  border: 2px solid #00ff00 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 4px 16px rgba(0, 255, 0, 0.3), 0 0 40px rgba(0, 255, 0, 0.2), inset 0 0 20px rgba(0, 0, 0, 0.8) !important;
}

.winamp-skin-matrix .winamp-yt-titlebar {
  background: linear-gradient(90deg, #001a00 0%, #002a00 50%, #001a00 100%) !important;
  color: #00ff00 !important;
  border-bottom: 2px solid #00ff00 !important;
  text-shadow: 0 0 8px rgba(0, 255, 0, 0.6) !important;
  font-family: "Courier New", monospace !important;
}

.winamp-skin-matrix .winamp-yt-controls {
  background: linear-gradient(180deg, #001a00 0%, #000a00 100%) !important;
}

.winamp-skin-matrix .control-button {
  background: linear-gradient(180deg, #001a00 0%, #000a00 100%) !important;
  color: #00ff00 !important;
  border: 1px solid #00ff00 !important;
  text-shadow: 0 0 8px rgba(0, 255, 0, 0.6) !important;
  font-family: "Courier New", monospace !important;
  cursor: pointer !important;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
}

.winamp-skin-matrix .control-button:hover {
  background: linear-gradient(180deg, #002a00 0%, #001a00 100%) !important;
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.5) !important;
}

.winamp-skin-matrix .control-button:active,
.winamp-skin-matrix .control-button.active {
  background: #00ff00 !important;
  color: #001a00 !important;
}

.winamp-skin-matrix .winamp-yt-bar {
  background: linear-gradient(180deg, #00ff33 0%, #00ff00 50%, #00cc00 100%) !important;
  box-shadow: 0 0 8px rgba(0, 255, 0, 0.5) !important;
}

.winamp-skin-matrix .main-display {
  background: linear-gradient(180deg, #000a00 0%, #001a00 100%) !important;
  border: 1px solid #00ff00 !important;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8), 0 0 5px rgba(0, 255, 0, 0.3) !important;
}

.winamp-skin-matrix .time-display {
  color: #00ff33 !important;
  text-shadow: 0 0 8px rgba(0, 255, 51, 0.6) !important;
  font-family: "Courier New", monospace !important;
}

.winamp-skin-matrix .song-title {
  color: #00ff00 !important;
  font-family: "Courier New", monospace !important;
}

.winamp-skin-matrix .winamp-status-bar {
  background: linear-gradient(90deg, #000a00 0%, #001a00 50%, #000a00 100%) !important;
  border-top: 1px solid #00ff00 !important;
}

.winamp-skin-matrix .winamp-version,
.winamp-skin-matrix .llama-text {
  color: #00ff00 !important;
  font-family: "Courier New", monospace !important;
}

.winamp-skin-matrix .status-time {
  color: #00ff33 !important;
  font-family: "Courier New", monospace !important;
}

.winamp-skin-matrix::before,
.winamp-skin-matrix::after {
  background: #00ff00 !important;
}