/* Decluttered player deck */
:root {
    --player-height: 126px;
}

.global-player {
    grid-template-columns: 1fr;
    grid-template-areas:
        "primary"
        "progress"
        "notice";
    gap: 10px;
    width: min(1160px, calc(100% - 40px));
    padding: 14px 18px 16px;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(10, 14, 43, 0.82), rgba(5, 8, 28, 0.92)),
        linear-gradient(90deg, rgb(var(--neon-primary-rgb) / 0.08), rgb(var(--neon-secondary-rgb) / 0.1));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 1px rgb(var(--neon-primary-rgb) / 0.14),
        0 18px 58px rgba(0, 0, 0, 0.62);
}

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

.player-primary {
    position: relative;
    z-index: 1;
    grid-area: primary;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto auto;
    gap: clamp(12px, 2vw, 24px);
    align-items: center;
    min-width: 0;
}

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

.track-cover {
    width: 64px;
    border-radius: 16px;
}

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

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

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

.player-track p {
    font-size: 0.88rem;
}

.player-controls {
    grid-area: auto;
    gap: 10px;
}

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

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

.player-tools-toggle {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    color: #f4f0ff;
}

.player-tools-toggle-icon {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
}

.player-tools-toggle-icon span {
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 10px rgb(var(--neon-primary-rgb) / 0.54);
}

.player-tools-toggle.is-active {
    border-color: rgb(var(--neon-secondary-rgb) / 0.46);
    background:
        radial-gradient(circle at 50% 42%, rgb(var(--neon-secondary-rgb) / 0.22), transparent 68%),
        rgba(36, 29, 82, 0.82);
}

.player-secondary-tools {
    position: absolute;
    right: 18px;
    bottom: calc(100% + 12px);
    z-index: 4;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    width: min(560px, calc(100vw - 32px));
    padding: 12px;
    border: 1px solid rgb(var(--neon-primary-rgb) / 0.24);
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(12, 16, 48, 0.98), rgba(5, 8, 28, 0.98)),
        rgba(5, 8, 28, 0.98);
    box-shadow:
        0 0 28px rgb(var(--neon-primary-rgb) / 0.18),
        0 22px 70px rgba(0, 0, 0, 0.66);
    backdrop-filter: blur(24px) saturate(1.12);
}

.player-secondary-tools[hidden] {
    display: none;
}

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

.player-secondary-tools .volume-control {
    flex: 1 1 166px;
    grid-template-columns: 22px minmax(104px, 1fr);
    min-width: 166px;
}

.player-secondary-tools .timer-pill {
    min-width: 126px;
    min-height: 42px;
}

.player-progress {
    grid-area: progress;
    grid-template-columns: 48px minmax(118px, 1fr) 48px;
    gap: 9px;
    font-size: 0.8rem;
}

.progress-rail {
    min-width: 118px;
    height: 6px;
    background:
        linear-gradient(90deg, rgb(var(--neon-primary-rgb) / 0.24), rgb(var(--neon-secondary-rgb) / 0.2)),
        rgba(255, 255, 255, 0.16);
    box-shadow:
        inset 0 0 0 1px rgb(var(--neon-primary-rgb) / 0.18),
        0 0 18px rgb(var(--neon-primary-rgb) / 0.14);
}

.progress-rail span::after {
    right: -7px;
    width: 14px;
    height: 14px;
}

.player-notice {
    grid-area: notice;
}

.player-queue-panel,
.player-save-panel,
.player-favorite-panel {
    right: 18px;
    bottom: calc(100% + 12px);
    z-index: 5;
}

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

body.player-is-compact .global-player {
    grid-template-columns: 1fr;
    grid-template-areas: "primary";
    width: min(780px, calc(100% - 28px));
    min-height: 68px;
    padding: 8px 10px;
    border-radius: 18px;
}

body.player-is-compact .global-player::before {
    border-radius: 17px;
}

body.player-is-compact .player-primary {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "track controls tools";
    gap: 8px;
}

body.player-is-compact .player-track {
    grid-area: track;
    grid-column: auto;
    grid-row: auto;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 9px;
}

body.player-is-compact .player-controls {
    grid-area: controls;
    grid-column: auto;
    grid-row: auto;
}

body.player-is-compact .player-tools-toggle {
    grid-area: tools;
    grid-column: auto;
    grid-row: auto;
}

body.player-is-compact .track-cover {
    width: 44px;
    border-radius: 12px;
}

body.player-is-compact .player-track h2 {
    font-size: 0.94rem;
}

body.player-is-compact .player-track p {
    font-size: 0.76rem;
}

body.player-is-compact .player-secondary-tools,
body.player-is-compact .player-progress,
body.player-is-compact .player-notice,
body.player-is-compact .player-queue-panel,
body.player-is-compact .player-save-panel,
body.player-is-compact .player-favorite-panel {
    display: none;
}

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

    .global-player {
        width: calc(100% - 28px);
        padding: 12px 14px 14px;
    }

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

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

    .track-cover {
        width: 56px;
    }
}

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

    body:not(.player-is-compact) .global-player {
        bottom: 8px;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "primary"
            "progress"
            "notice";
        width: calc(100% - 16px);
        max-height: none;
        padding: 10px 11px 12px;
        overflow: visible;
    }

    body:not(.player-is-compact) .player-primary {
        grid-area: primary;
    }

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

    body:not(.player-is-compact) .player-notice {
        grid-area: notice;
    }

    body:not(.player-is-compact) .player-primary {
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 8px;
    }

    body:not(.player-is-compact) .player-track {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 9px;
    }

    body:not(.player-is-compact) .track-cover {
        width: 48px;
        border-radius: 12px;
    }

    body:not(.player-is-compact) .player-track .eyebrow,
    body:not(.player-is-compact) .now-playing-badge {
        display: none;
    }

    body:not(.player-is-compact) .player-track h2 {
        font-size: 0.94rem;
    }

    body:not(.player-is-compact) .player-track p {
        font-size: 0.76rem;
    }

    body:not(.player-is-compact) .global-player .player-controls .icon-button,
    body:not(.player-is-compact) .player-tools-toggle {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }

    body:not(.player-is-compact) .global-player .player-controls .play-button {
        width: 48px;
        height: 48px;
    }

    .player-secondary-tools {
        right: 8px;
        left: 8px;
        display: flex;
        width: auto;
        justify-content: stretch;
    }

    .player-secondary-tools .volume-control {
        min-width: 100%;
        flex-basis: 100%;
    }

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

@media (max-width: 520px) {
    :root {
        --player-height: 104px;
    }

    body:not(.player-is-compact) .global-player {
        max-height: none;
        overflow: visible;
    }

    body:not(.player-is-compact) .player-primary {
        grid-template-columns: minmax(0, 1fr) auto auto;
    }

    body:not(.player-is-compact) .player-controls {
        gap: 6px;
    }

    body:not(.player-is-compact) .global-player .player-controls .icon-button,
    body:not(.player-is-compact) .player-tools-toggle {
        width: 34px;
        height: 34px;
    }

    body:not(.player-is-compact) .global-player .player-controls .play-button {
        width: 44px;
        height: 44px;
    }

    body:not(.player-is-compact) .player-secondary-tools[hidden] {
        display: none !important;
    }

    body:not(.player-is-compact) .player-secondary-tools {
        display: flex;
        max-height: calc(100dvh - var(--player-height) - 42px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    body:not(.player-is-compact) .player-progress {
        grid-template-columns: 40px minmax(128px, 1fr) 44px;
        gap: 7px;
    }

    body:not(.player-is-compact) .progress-rail {
        min-width: 128px;
    }

    body.player-is-compact .player-track p {
        display: none;
    }
}