:root { 
    --pink: #ff00ff; --cyan: #00f2ff; --purple: #9d00ff; --bg: #050505;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body { 
    background: var(--bg); margin: 0; padding: 0;
    height: 100vh; height: 100dvh; width: 100vw;
    display: flex; justify-content: center; align-items: center; 
    font-family: 'Orbitron', sans-serif; overflow: hidden; 
}

.scanlines {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%);
    background-size: 100% 3px; pointer-events: none; z-index: 100;
}

/* КАРТКА ТА РАМКА-ЗМІЙКА (МОБІЛЬНА) */
.player-card {
    position: relative; 
    width: calc(100vw - 30px); height: 97vh; height: 97dvh;
    max-width: 440px; 
    background: rgba(255, 255, 255, 0.05);
    border-radius: 30px; padding: 3px; overflow: hidden; display: flex; z-index: 10;
}

.playing.player-card {
    background: linear-gradient(90deg, var(--cyan), var(--purple), var(--pink), var(--cyan));
    background-size: 200% 100%;
    animation: snakeBorder 3s linear infinite;
}

@keyframes snakeBorder {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

.inner-content {
    position: relative; background: #000; width: 100%; height: 100%;
    border-radius: 27px; z-index: 2; display: flex; flex-direction: column; 
    justify-content: space-around; align-items: center; 
    padding: 55px 15px 40px;
    box-shadow: inset 0 0 30px rgba(0, 242, 255, 0.05);
}

header { display: flex; flex-direction: column; gap: 5px; text-align: center; }
h1 { 
    font-size: 32px; font-weight: 900; color: #fff; text-transform: uppercase; letter-spacing: 5px; 
    text-shadow: 0 0 15px var(--pink), 0 0 5px #fff; 
    margin: 0; 
}
#trackName { color: var(--cyan); font-size: 10px; min-height: 35px; font-weight: 700; text-transform: uppercase; text-align: center; text-shadow: 0 0 8px var(--cyan); line-height: 1.3; max-width: 250px; }

.visualizer { 
    display: flex; justify-content: center; gap: 4px; height: 110px;
    align-items: flex-end; width: 100%; 
    filter: drop-shadow(0 0 8px rgba(255, 0, 255, 0.3));
}
.bar { 
    width: 6px; height: 8px; border-radius: 2px; 
    background: linear-gradient(to top, var(--cyan), var(--purple), var(--pink)); 
    transition: height 0.07s cubic-bezier(0.17, 0.67, 0.83, 0.67); 
}

footer { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 30px; }

.play-btn {
    width: 90px; height: 90px; 
    aspect-ratio: 1 / 1; 
    flex-shrink: 0;      
    border-radius: 50%; border: none;
    background: linear-gradient(135deg, var(--pink), var(--purple));
    box-shadow: 0 0 25px var(--pink); cursor: pointer;
    display: flex; justify-content: center; align-items: center;
    transition: 0.3s;
}

.playing .play-btn {
    animation: btnPulse 2s infinite;
}
@keyframes btnPulse {
    0% { box-shadow: 0 0 20px var(--pink); transform: scale(1); }
    50% { box-shadow: 0 0 35px var(--pink), 0 0 10px #fff; transform: scale(1.02); }
    100% { box-shadow: 0 0 20px var(--pink); transform: scale(1); }
}
.play-btn svg { fill: white; width: 35px; height: 35px; }

.volume-zone { width: 100%; display: flex; justify-content: center; padding: 10px 0; }
#vol { 
    -webkit-appearance: none; 
    width: 230px;
    height: 6px; 
    background: #333; border-radius: 5px; outline: none; cursor: pointer;
}

#vol::-webkit-slider-thumb {
    -webkit-appearance: none; width: 22px; height: 22px; 
    background: #fff; border: 3px solid var(--pink); border-radius: 50%; 
    box-shadow: 0 0 15px var(--pink), 0 0 5px #fff;
    margin-top: -8px;
    cursor: pointer; transition: 0.2s;
}
#vol::-webkit-slider-thumb:hover { transform: scale(1.1); box-shadow: 0 0 20px var(--pink), 0 0 8px #fff; }

#vol::-webkit-slider-runnable-track { height: 6px; border-radius: 5px; }

.power-text { font-size: 8px; color: #333; letter-spacing: 4px; text-transform: uppercase; margin-top: 5px; transition: 0.5s; }
.playing .power-text { color: var(--cyan); text-shadow: 0 0 10px var(--cyan), 0 0 3px #fff; }

/* ======================================================= */
/* --- ПК ВЕРСІЯ: ФІНАЛЬНА СТРУКТУРА (ОБ'ЄДНАНО) --- */
/* ======================================================= */
@media (min-width: 900px) {
    .player-card { 
        max-width: 980px; /* Звужена рамка */
        height: 200px !important; 
        border-radius: 100px; 
    }
    .inner-content {
        display: grid !important; 
        grid-template-columns: 260px 1fr 360px !important; 
        align-items: center !important; 
        padding: 0 50px !important; 
        border-radius: 97px !important;
        justify-items: center; 
    }
    header { text-align: left; align-items: flex-start; justify-self: start; }
    h1 { font-size: 36px; } 
    #trackName { text-align: left; justify-content: flex-start !important; margin: 0; min-height: auto; }
    
    .visualizer { 
        height: 120px; 
        margin: 0 20px 0 30px; /* Еквалайзер зміщено вправо */
    } 
    
    footer { 
        flex-direction: row !important; 
        gap: 25px !important; 
        width: auto !important; 
        justify-self: end;
        align-items: center !important;
    }
    
    .play-btn { 
        align-self: center; 
        /* Кнопка зміщена вліво на -25px */
        transform: translateX(-25px) !important; 
    } 

    #vol { 
        width: 170px !important; 
        transform: translateX(-10px);
    } 
    
    .power-text { display: none; }
}