/* Style dla nowego, dynamicznego wizualizatora audio */
.visualizer-wrapper {
    display          : flex;
    justify-content  : center;
    align-items      : center;
    height           : 40px;
    /* Możesz dostosować wysokość */
    width            : 150px;
    /* Możesz dostosować szerokość */
    margin           : 5px 0;
    /*display        : none;  Początkowo ukryty, ale zajmuje miejsce */
}
#audio-visualizer {
    width   : 100%;
    height  : 100%;
}
.player-panel-container {
    text-align  : center;
}
.player-greeting {
    margin-bottom  : 10px;
}
.player-controls-wrapper {
    display          : flex;
    justify-content  : center;
    align-items      : center;
    gap              : 10px;
    /* Odstęp między elementami */
}
/* --- Style dla własnych kontrolek --- */
.custom-controls {
    /* Ten kontener trzyma przycisk i suwak w jednym rzędzie */
    display      : flex;
    align-items  : center;
    gap          : 15px;
}
.player-core {
    /* Ten kontener układa wizualizator i kontrolki w kolumnie */
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    gap             : 5px;
}
.player-btn {
    /* Przycisk jako przezroczysty kontener na obrazek */
    background  : transparent;
    border      : none;
    padding     : 0;
    cursor      : pointer;
    width       : 40px;
    /* Dopasuj do rozmiaru obrazka */
    height      : 40px;
    /* Dopasuj do rozmiaru obrazka */
    transition  : transform 0.1s;
}
/* Styl dla obrazka wewnątrz przycisku */
.player-btn img {
    display  : block;
    width    : 100%;
    height   : 100%;
}
.player-btn:hover {
    /* Efekt po najechaniu, np. delikatna zmiana przezroczystości */
    opacity  : 0.8;
}
.player-btn:active {
    transform  : scale(0.95);
}
.volume-slider {
    -webkit-appearance  : none;
    appearance          : none;
    width               : 120px;
    height              : 8px;
    background          : #002277;
    outline             : none;
    border-radius       : 3px;
    cursor              : pointer;
}
/* Kciuk suwaka dla Chrome, Safari, Opera, Edge */
.volume-slider::-webkit-slider-thumb {
    -webkit-appearance  : none;
    appearance          : none;
    width               : 16px;
    height              : 16px;
    background          : #1199ff;
    /* Niebieski */
    border-radius       : 50%;
    border              : 2px solid #11ff99;
    cursor              : pointer;
}
/* Kciuk suwaka dla Firefox */
.volume-slider::-moz-range-thumb {
    width          : 16px;
    height         : 16px;
    background     : #1199ff;
    /* Niebieski */
    border-radius  : 50%;
    border         : 2px solid #11ff99;
    cursor         : pointer;
}
/* Dodane style dla wyświetlania procentów głośności */
#volume-percentage {
    color       : #fff;
    font-size   : 14px;
    min-width   : 45px;
    /* Zapobiega przesuwaniu się layoutu przy zmianie liczby cyfr */
    text-align  : left;
}
.nadzis {
    position           : relative;
    background-color   : #12110a;
    border-radius      : 150px 150px 50px 50px;
    border             : 2px solid #ffa500;
    animation          : obwodka-player 5s linear infinite;
    -webkit-animation  : obwodka-player 5s linear infinite;
    text-align         : center;
    overflow           : hidden;
}
@keyframes obwodka-player {
    0% {
        border-color  : #ffa500;
    }
    20% {
        border-color  : #0004ff;
    }
    40% {
        border-color  : #ff0000;
    }
    60% {
        border-color  : #00ff00;
    }
    80% {
        border-color  : #00ffff;
    }
    100% {
        border-color  : #ffa500;
    }
}
.rainbow {
    font-family        : 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size          : 20px;
    font-weight        : bolder;
    text-align         : center;
    -webkit-animation  : rainbow 10s infinite;
    -ms-animation      : rainbow 10s infinite;
    animation          : rainbow 10s infinite;
}
@-webkit-keyframes rainbow {
    0% {
        color  : #ffa500;
    }
    10% {
        color  : purple;
    }
    20% {
        color  : red;
    }
    30% {
        color  : CadetBlue;
    }
    40% {
        color  : yellow;
    }
    50% {
        color  : coral;
    }
    60% {
        color  : green;
    }
    70% {
        color  : cyan;
    }
    80% {
        color  : DeepPink;
    }
    90% {
        color  : DodgerBlue;
    }
    100% {
        color  : orange;
    }
}
@-ms-keyframes rainbow {
    0% {
        color  : orange;
    }
    10% {
        color  : purple;
    }
    20% {
        color  : red;
    }
    30% {
        color  : CadetBlue;
    }
    40% {
        color  : yellow;
    }
    50% {
        color  : coral;
    }
    60% {
        color  : green;
    }
    70% {
        color  : cyan;
    }
    80% {
        color  : DeepPink;
    }
    90% {
        color  : DodgerBlue;
    }
    100% {
        color  : orange;
    }
}
@keyframes rainbow {
    0% {
        color  : orange;
    }
    10% {
        color  : purple;
    }
    20% {
        color  : red;
    }
    30% {
        color  : CadetBlue;
    }
    40% {
        color  : yellow;
    }
    50% {
        color  : coral;
    }
    60% {
        color  : green;
    }
    70% {
        color  : cyan;
    }
    80% {
        color  : DeepPink;
    }
    90% {
        color  : DodgerBlue;
    }
    100% {
        color  : orange;
    }
}