input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    height: 6px;
    outline: none;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #a855f7;
    cursor: pointer;
    transition: transform 0.1s;
    border: none;
}
input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.3);
}
input[type="range"]::-moz-range-track {
    height: 6px;
    background: transparent;
    border-radius: 9999px;
}
input[type="range"]::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: none;
    border-radius: 50%;
    background: #a855f7;
    cursor: pointer;
}
input[type="range"]::-moz-range-thumb:hover { transform: scale(1.3); }

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


@media (max-width: 767px) {
    .home-player {
        display: grid;
        grid-template-columns: 4rem minmax(0, 1fr);
        gap: 1rem;
    }
    .home-player-track { display: contents; }
    .home-player-heading {
        min-width: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: .375rem;
    }
    .home-player #trackTitle { overflow-wrap: anywhere; }
    .home-player .character-progress,
    .home-player-controls { grid-column: 1 / -1; }
    .home-player-controls {
        border-top: 0;
        padding-top: 0;
    }
    .home-player #volumeRange {
        height: 24px;
        background-size: 100% 6px !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }
}