#global-player {
    position: fixed;
    top: 15px;
    right: 15px;
    background: #000; /* чорний фон */
    color: #fff;
    border: 2px solid #d4af37; /* золотий */
    border-radius: 10px;
    padding: 12px;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
    z-index: 9999;
    width: 280px;
    font-family: 'Segoe UI', sans-serif;
    transition: all 0.4s ease;
}

/* === Обгортка для плеєра і пропозиції === */
#player-wrapper {
    position: fixed;
    top: 15px;
    right: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 9999;
}
/* При згортанні — кружок 🎵 + міні-контролери */
#global-player.collapsed {
    width: 140px;
    height: auto;
    padding: 4px 6px;
    border-radius: 20px;
    background: none;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

/* Напівпрозорий плеєр у розгорнутому стані */
#global-player {
    background: rgba(0,0,0,0.60); /* чорний із прозорістю */
    color: #fff;
    border: 2px solid #d4af37;
    border-radius: 10px;
    padding: 12px;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
    z-index: 9999;
    width: 280px;
    font-family: 'Segoe UI', sans-serif;
    transition: all 0.4s ease;
}

/* У згорнутому стані — непрозорий */
#global-player.collapsed {
    background: #000; /* повністю чорний */
    opacity: 1;
}

/* Контент плеєра */
#player-content {
    transition: all 0.4s ease;
    opacity: 1;
    max-height: 500px;
    overflow: hidden;
}
#player-content.hidden {
    opacity: 0;
    max-height: 0;
    padding: 0;
    margin: 0;
}

/* Міні-контролери */

#mini-controls {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.player-btn {
    background: none;
    border: 1px solid #d4af37;
    border-radius: 4px;
    color: #d4af37;
    font-size: 14px;
    cursor: pointer;
    padding: 4px 6px;
    transition: all 0.3s ease;
}
.player-btn:hover {
    background: #222;
    transform: scale(1.1);
}
.player-btn.active {
    background: #d4af37;
    color: #000;
}


/* Заголовок */
#global-player label {
    font-weight: bold;
    display: block;
    margin-bottom: 6px;
    color: #d4af37;
}
/* Ховаємо глобальну доріжку у згорнутому стані */
#global-player.collapsed #global-controls {
    display: none;
}

#global-player:not(.collapsed) #mini-controls {
  display: none;
}

#global-player.collapsed #full-controls {
  display: none;
}

#global-player.collapsed #toggle-btn {
    display: inline-block;
}
/* Селектор категорій */
#global-player select {
    width: 100%;
    margin-bottom: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid #d4af37;
    background: #111; /* чорний фон */
    color: #d4af37;   /* золотий текст */
    font-family: 'Segoe UI', sans-serif;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    appearance: none; /* прибирає системний стиль */
}

/* При наведенні */
#global-player select:hover {
    background: #222;
    box-shadow: 0 0 8px rgba(212,175,55,0.6);
}

/* При фокусі (активний вибір) */
#global-player select:focus {
    outline: none;
    border-color: #888; /* середньо-сірий */
    box-shadow: 0 0 10px rgba(136,136,136,0.8); /* сіра підсвітка */
}

/* Стиль для пунктів у випадаючому списку */
#global-player select option {
    background: #111;   /* чорний фон */
    color: #d4af37;     /* золотий текст */
    font-family: 'Segoe UI', sans-serif;
    font-size: 14px;
}

/* При виборі опції */
#global-player select option:checked {
    background: #333; /* темно-сірий фон */
    color: #ccc;      /* світло-сірий текст */
}

/* При наведенні на опцію */
#global-player select option:hover {
    background: #444; /* hover-сірий */
    color: #fff;
}


/* Для Chrome/Edge/Safari */
#player-area::-webkit-scrollbar {
    width: 8px; /* товщина */
}

#player-area::-webkit-scrollbar-track {
    background: #111; /* чорний фон */
    border-radius: 6px;
}

#player-area::-webkit-scrollbar-thumb {
    background: #d4af37; /* золото */
    border-radius: 6px;
    border: 2px solid #111; /* чорна рамка навколо */
    transition: background 0.3s ease;
}

#player-area::-webkit-scrollbar-thumb:hover {
    background: #ffd700; /* яскравіше золото при наведенні */
}

/* Для Firefox */
#player-area {
    scrollbar-width: thin; /* тонкий скрол */
    scrollbar-color: #d4af37 #111; /* thumb + track */
}


/* Список треків */
#player-area {
    max-height: 300px;
    overflow-y: auto;
}
.track-block {
    margin-bottom: 10px;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
}
.track-block:hover {
    background: #222;
}
.track-title {
    font-size: 14px;
    color: #eee;
    margin: 0;
}

/* Кнопка 🎵 */
/* Кнопка з подвійною нотою */
#toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease;
    padding: 4px;
}
#toggle-btn:hover {
    transform: scale(1.2);
}

/* Базова кнопка */
#toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    transition: transform 0.3s ease;
}

/* Світіння при наведенні */
#toggle-btn:hover svg path {
    filter: drop-shadow(0 0 6px rgba(255,215,0,0.8));
    transform: scale(1.1);
    transition: all 0.3s ease;
}

/* Імпульс при кліку */
#toggle-btn:active svg path {
    transform: scale(0.9);
    filter: drop-shadow(0 0 12px rgba(255,215,0,1));
}

/* Легка пульсація еквалайзера */
@keyframes equalizerPulse {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(0.85); }
}
#toggle-btn svg path {
    transform-origin: bottom;
    animation: equalizerPulse 1.2s infinite ease-in-out;
}

/* Бігунок прогресу */
#progress {
    width: 100%;
    margin-top: 6px;
    appearance: none;          /* стандарт */
    -webkit-appearance: none;  /* Chrome/Safari */
    -moz-appearance: none;     /* Firefox */
    background: #222;
    border-radius: 6px;
    height: 6px;
    cursor: pointer;
}


/* Лінія прогресу */
#progress::-webkit-slider-runnable-track {
    background: linear-gradient(to right, #fff8dc, #ffd700, #b8860b);
    height: 6px;
    border-radius: 6px;
}
#progress::-moz-range-track {
    background: linear-gradient(to right, #fff8dc, #ffd700, #b8860b);
    height: 6px;
    border-radius: 6px;
}

/* Бігунок прогресу */
#progress::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffd700;
    border: 2px solid #b8860b;
    cursor: pointer;
}
#progress::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffd700;
    border: 2px solid #b8860b;
    cursor: pointer;
}

/* Регулятор гучності */
#volume {
    width: 100%;
    margin-top: 6px;
    appearance: none;          /* стандарт */
    -webkit-appearance: none;  /* Chrome/Safari */
    -moz-appearance: none;     /* Firefox */
    background: #222;
    border-radius: 6px;
    height: 6px;
    cursor: pointer;
}

#volume::-webkit-slider-runnable-track {
    background: linear-gradient(to right, #fff8dc, #ffd700, #b8860b);
    height: 6px;
    border-radius: 6px;
}
#volume::-moz-range-track {
    background: linear-gradient(to right, #fff8dc, #ffd700, #b8860b);
    height: 6px;
    border-radius: 6px;
}
#volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffd700;
    border: 2px solid #b8860b;
    cursor: pointer;
}
#volume::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffd700;
    border: 2px solid #b8860b;
    cursor: pointer;
}

/* Часовий відлік */
#time-display {
    font-family: monospace;
    font-size: 14px;
    color: #ffd700;
    margin-top: 4px;
    text-align: center;
}
/* Активний трек */
.track-block.active-track {
    border: 2px solid #d4af37;
    border-radius: 6px;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.8);
    animation: pulse 1.5s infinite;
}

/* Анімація тільки світіння, без scale */
@keyframes pulse {
    0%   { box-shadow: 0 0 10px rgba(212,175,55,0.6); }
    50%  { box-shadow: 0 0 20px rgba(212,175,55,1); }
    100% { box-shadow: 0 0 10px rgba(212,175,55,0.6); }
}

#main-audio {
    width: 100%;
    height: 22px;       /* зменшена висота */
    border-radius: 6px;
    background: #111;
    margin-top: 6px;    /* невеликий відступ зверху */
}
#progress {
    width: 100%;
    margin-top: 6px;
    appearance: none;          /* стандарт */
    -webkit-appearance: none;  /* Chrome/Safari */
    -moz-appearance: none;     /* Firefox */
    background: #222;
    border-radius: 6px;
    height: 6px;
    cursor: pointer;
}


/* Бігунок */
#progress::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #d4af37; /* золото */
    cursor: pointer;
}
#progress::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #d4af37;
    cursor: pointer;
}

@media (max-width: 768px) {
    #player-wrapper {
        top: 10px;
        right: 10px;
    }
    #global-player {
        width: 180px;
    }
    #global-player.collapsed {
        width: 110px;
    }
}