:root {

    --main-bg-color: #5c189b;

    --accent-color: #e5ccff;

    --text-color: #ffffff;

    --control-bg: rgba(0, 0, 0, 0.4);

    --gradient-left: #b870f0;

    --gradient-right: #6157ad;

    --footer-height: 10vh;

    --header-height: 5vh;

}



*,

*::before,

*::after {

    box-sizing: border-box;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

}



html, body {

    margin: 0;

    padding: 0;

    height: 100%;

    width: 100%;

    overflow: hidden;

    background-image: linear-gradient(to right, var(--gradient-left), var(--gradient-right));

    background-size: cover;

    background-position: center;

}



body {

    font-family: Arial, sans-serif;

    color: var(--text-color);

    display: flex;

    justify-content: center;

    align-items: center;

}



#audioPlayerContainer {

    position: fixed;

    inset: 0;

    width: 100vw;

    height: 100vh;

    display: flex;

    flex-direction: column;

    background-image: linear-gradient(to right, var(--gradient-left), var(--gradient-right));

    background-repeat: no-repeat;

    background-size: cover;

    perspective: 600px;

    overflow: hidden;

}



#timeBarContainer {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    z-index: 5;

    overflow: hidden;

    pointer-events: none;

}



#progressBar {

    position: absolute;

    top: 0;

    left: 0;

    width: 0%;

    height: 100%;

    background: rgba(0, 0, 0, 0.4);

    transition: width 0.1s linear;

}



#playerHeader {

    display: flex;

    justify-content: space-between;

    align-items: center;

    min-height: var(--header-height);

    padding: 1vh 2vw;

    z-index: 20;

    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);

    font-weight: bold;

    font-size: clamp(0.8em, 2vw, 1.2em);

    background: none;

}



#trackInfo {

    text-align: center;

    font-size: 1.1em;

}



#trackName {

    font-size: 1.2em;

    font-style: italic;

    color: var(--accent-color);

}



#centerContent {

    flex-grow: 1;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    position: relative;

    z-index: 10;

    overflow: hidden;

    transform-style: preserve-3d;

}



#skullImage {

    position: absolute;

    left: -10%;

    top: 50%;

    transform: translateY(-50%);

    height: 90%;

    max-height: 650px;

    object-fit: contain;

    z-index: 2;

    opacity: 0.9;

    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));

    pointer-events: none;

}



#artistLogo {

    position: relative;

    width: 60%;

    max-width: 800px;

    height: auto;

    z-index: 3;

    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.4));

    transition: transform 0.1s ease-out;

    transform-origin: center center;

    pointer-events: none;

}



#audioAnalyzerCanvas {

    position: absolute;

    left: 50%;

    top: 68%;

    transform: translate(-50%, -50%);

    width: 100vw !important;

    max-width: none;

    height: clamp(80px, 20vh, 220px);

    z-index: 1;

    pointer-events: none;

}



#playerControls {

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: var(--footer-height);

    padding: 2vh 2vw;

    background: none;

    z-index: 20;

    gap: 2vw;

}



#playerControls button {

    background: none;

    border: none;

    color: var(--text-color);

    font-size: clamp(1.5em, 5vw, 2.5em);

    cursor: pointer;

    transition: color 0.2s, transform 0.1s;

    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);

}



#playerControls button:active {

    transform: scale(0.95);

}



#playPause i {

    font-size: clamp(2.5em, 8vw, 3.5em);

}



.volume-control {

    display: flex;

    align-items: center;

    gap: 1vw;

}



#volumeSlider {

    width: clamp(80px, 15vw, 150px);

    cursor: pointer;

}



#playlistOverlay {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.85);

    backdrop-filter: blur(5px);

    z-index: 100;

    display: flex;

    flex-direction: column;

    padding: 5vh 5vw;

    box-sizing: border-box;

}



.hidden {

    display: none !important;

}



.playlist-title {

    text-align: center;

    margin-bottom: 3vh;

    font-size: clamp(1.5em, 5vw, 2em);

    color: var(--accent-color);

}



#playlistList {

    list-style: none;

    padding: 0;

    margin: 0;

    overflow-y: auto;

    flex-grow: 1;

    max-height: calc(100% - 150px);

}



#playlistList li {

    padding: 1.5vh 2vw;

    margin-bottom: 1vh;

    cursor: pointer;

    border-radius: 5px;

    transition: background 0.2s;

    font-size: clamp(1em, 3vw, 1.2em);

    display: flex;

    justify-content: space-between;

    align-items: center;

}



#playlistList li:hover {

    background: rgba(255, 255, 255, 0.1);

}



#playlistList li.playing {

    background: var(--main-bg-color);

    color: var(--accent-color);

    font-weight: bold;

    box-shadow: 0 0 5px var(--accent-color);

    border-left: 5px solid var(--accent-color);

}



#closePlaylist {

    position: absolute;

    top: 2vh;

    right: 2vw;

    font-size: clamp(1.2em, 4vw, 1.5em);

    background: none;

    border: none;

    color: var(--text-color);

    cursor: pointer;

    padding: 10px;

    transition: color 0.2s;

}



#closePlaylist:hover {

    color: red;

}



@media (max-width: 1024px) {

    #skullImage {

        left: -5%;

        height: 80%;

        max-height: 500px;

    }



    #artistLogo {

        width: 65%;

        max-width: 650px;

    }



    #audioAnalyzerCanvas {

        top: 70%;

        height: clamp(80px, 20vh, 200px);

    }



    #playerControls {

        gap: 3vw;

        padding: 1.5vh 3vw 2vh;

    }

}



@media (max-width: 768px) {

    #playerHeader {

        padding: 1vh 3vw;

        font-size: clamp(0.9em, 3.2vw, 1.1em);

    }



    #centerContent {

        padding: 8px 0 0 0;

    }



    #skullImage {

        left: -15%;

        height: 75%;

        max-height: 420px;

    }



    #artistLogo {

        width: 75%;

        max-width: 520px;

    }



    #audioAnalyzerCanvas {

        top: 50%;

        height: clamp(80px, 22vh, 200px);

    }



    #playerControls {

        flex-wrap: wrap;

        gap: 3.5vw;

        padding: 1.5vh 3vw 2vh;
	position: fixed;
        bottom: 15%;

    }



    .volume-control {

        width: 100%;

        justify-content: center;

        gap: 3vw;

    }



    #volumeSlider {

        width: 60%;

    }

}



@media (max-width: 480px) {

    #skullImage {

        left: -30%;
	top:30%;
        height: 80%;

        max-height: 420px;

    }



    #artistLogo {
        width: 80%;
        max-width: 420px;
	margin-top:-20%;
    }



    #audioAnalyzerCanvas {

        top: 72%;

        height: clamp(80px, 24vh, 200px);

    }



    #playerHeader {

        font-size: 0.85em;

    }



    #playerControls button {

        font-size: 1.6em;

    }



    #playPause i {

        font-size: 2.2em;

    }



    #playlistOverlay {

        padding: 3vh 4vw;

    }



    #playlistList li {

        font-size: 0.95em;

        padding: 1.2vh 2vw;

    }

}