/* Neon player scale correction */
:root {
    --player-height: 154px;
}

.global-player {
    bottom: 16px;
    grid-template-columns: minmax(190px, 1fr) max-content max-content;
    grid-template-areas:
        "track controls tools"
        "progress progress progress";
    gap: 10px clamp(14px, 1.6vw, 26px);
    width: min(1380px, calc(100% - 44px));
    min-height: 0;
    padding: 16px 24px 18px;
    border-radius: 26px;
}

.global-player::before {
    border-radius: 25px;
}

.global-player::after {
    display: none;
}

.player-track {
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 14px;
}

.track-cover {
    width: 74px;
    border-radius: 17px;
}

.player-track-copy {
    gap: 5px;
}

.player-track .eyebrow {
    font-size: 0.78rem;
}

.player-track h2 {
    font-size: clamp(1rem, 1.25vw, 1.18rem);
}

.player-track p {
    font-size: clamp(0.86rem, 1vw, 0.98rem);
}

.now-playing-badge {
    display: none;
}

.player-controls {
    gap: 12px;
}

.global-player .player-controls .icon-button {
    width: 46px;
    height: 46px;
    border-radius: 15px;
}

.global-player .player-controls .play-button {
    width: 62px;
    height: 62px;
}

.play-symbol {
    border-top-width: 11px;
    border-bottom-width: 11px;
    border-left-width: 16px;
}

.is-playing .play-symbol {
    width: 20px;
    height: 25px;
}

.player-tools {
    justify-content: end;
    gap: 8px;
}

.queue-toggle-button,
.heart-button,
.player-size-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    border-radius: 14px;
}

.queue-icon {
    width: 19px;
    gap: 4px;
}

.queue-icon span {
    height: 2px;
    box-shadow: -6px 0 0 -1px currentColor;
}

.heart-button span {
    width: 21px;
    height: 19px;
}

.heart-button span::before {
    font-size: 1.42rem;
}

.volume-control {
    grid-template-columns: 22px minmax(74px, 112px);
    gap: 9px;
    min-width: 112px;
}

.volume-icon {
    width: 22px;
    height: 22px;
}

.timer-pill {
    grid-template-columns: 22px auto;
    gap: 8px;
    min-width: 116px;
    min-height: 44px;
    padding-inline: 12px;
    border-radius: 16px;
}

.timer-pill::before {
    width: 18px;
    height: 18px;
}

.timer-kicker {
    font-size: 0.7rem;
}

.timer-pill [data-timer-label] {
    font-size: 0.98rem;
}

.player-progress {
    grid-column: 1 / -1;
    grid-template-columns: 52px minmax(0, 1fr) 52px;
    gap: 10px;
    font-size: 0.82rem;
}

.progress-rail {
    height: 6px;
}

.progress-rail span::after {
    right: -8px;
    width: 16px;
    height: 16px;
    box-shadow:
        0 0 0 6px rgba(70, 118, 255, 0.2),
        0 0 20px rgba(103, 126, 255, 0.72);
}

@media (min-width: 1181px) and (max-width: 1600px) {
    .global-player {
        grid-template-columns: minmax(190px, 1fr) max-content max-content;
        grid-template-areas:
            "track controls tools"
            "progress progress progress";
        gap: 10px 18px;
        padding: 16px 24px 18px;
    }

    .player-track {
        grid-template-columns: 70px minmax(0, 1fr);
        gap: 13px;
    }

    .track-cover {
        width: 70px;
    }

    .player-tools {
        justify-content: end;
        gap: 7px;
    }
}

@media (min-width: 1181px) and (max-width: 1320px) {
    :root {
        --player-height: 190px;
    }

    .global-player {
        grid-template-columns: minmax(220px, 1fr) max-content;
        grid-template-areas:
            "track controls"
            "tools tools"
            "progress progress";
        gap: 10px 18px;
    }

    .player-tools {
        justify-content: end;
    }
}

@media (max-width: 1180px) {
    :root {
        --player-height: 148px;
    }

    .global-player {
        grid-template-columns: minmax(220px, 1fr) auto;
        grid-template-areas:
            "track controls"
            "tools tools"
            "progress progress";
        gap: 10px 14px;
        padding: 14px 18px 16px;
        border-radius: 22px;
    }

    .global-player::before {
        border-radius: 21px;
    }

    .player-track {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 12px;
    }

    .track-cover {
        width: 58px;
        border-radius: 14px;
    }

    .global-player .player-controls .icon-button {
        width: 40px;
        height: 40px;
        border-radius: 13px;
    }

    .global-player .player-controls .play-button {
        width: 54px;
        height: 54px;
    }

    .queue-toggle-button,
    .heart-button,
    .player-size-button {
        width: 40px;
        min-width: 40px;
        height: 40px;
    }

    .timer-pill {
        min-height: 40px;
    }
}

@media (max-width: 820px) {
    :root {
        --player-height: 84px;
    }

    body:not(.player-is-compact) .global-player {
        max-height: min(52vh, 430px);
        padding: 12px;
    }

    body:not(.player-is-compact) .player-progress {
        grid-column: auto;
    }

    body.player-is-compact {
        --player-height: 82px;
    }

    body.player-is-compact .global-player {
        min-height: 64px;
        padding: 7px 9px;
    }
}

.taste-dislike-button span::before {
    width: 15px;
    height: 3px;
}

.taste-dislike-button span::after {
    width: 5px;
    height: 5px;
}