/* ============================================
   JuzkoMUSIC — CENTRAL player
   Nakładka na motyw CMD.EXE z ../style.css
   (kolory, font i przyciski bierze stamtąd)
   ============================================ */

.mp-page [hidden] {
    display: none !important;
}

main.mp {
    max-width: 760px !important;
}

.mp-dim {
    color: #888;
}

/* --- NAGŁÓWEK MODUŁU --- */
.mp-head {
    margin: 0 0 22px;
}

.mp-name {
    color: var(--cmd-white);
    text-transform: uppercase;
}

.mp-name::after {
    content: ".EXE";
    opacity: 0.5;
    font-size: 0.8rem;
}

/* --- PANEL NOW PLAYING --- */
.mp-now {
    position: relative;
    border: 1px dashed #444;
    background: rgba(0, 0, 0, 0.3);
    padding: 14px 16px 16px;
    margin-bottom: 28px;
}

.mp-label {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: #888;
    font-size: 0.85rem;
}

.mp-title {
    margin: 10px 0 2px;
    color: var(--cmd-white);
    font-size: 1.15rem;
    font-weight: normal;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.mp-sub {
    color: #888;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

/* Paski tekstowe [#####.....] */
.mp-bar,
.mp-volbar {
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: pan-y;
    color: #666;
}

.mp-bar {
    display: block;
    margin-top: 12px;
    padding: 9px 0;
}

.mp-fill {
    color: var(--win-blue);
}

.mp-rest {
    color: #555;
}

.mp-bar:focus-visible,
.mp-volbar:focus-visible {
    outline: 1px dashed var(--cmd-grey);
    outline-offset: 2px;
}

.mp-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.9rem;
}

.mp-status {
    color: #888;
    white-space: nowrap;
}

.mp-status.is-playing {
    color: var(--win-blue);
}

.mp-status.is-error {
    color: #ff5555;
}

/* Widmo z bloków (tylko komputer, prawdziwe dane z Web Audio) */
.mp-spec {
    margin-top: 10px;
    height: 1.1em;
    line-height: 1.1;
    white-space: pre;
    overflow: hidden;
    color: var(--win-blue);
    opacity: 0.8;
}

/* Miarka szerokości znaku (niewidoczna) */
.mp-measure {
    position: absolute;
    left: 0;
    top: 0;
    visibility: hidden;
    white-space: pre;
    pointer-events: none;
}

/* --- PRZYCISKI --- */
.mp-controls,
.mp-toggles {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.mp-toggles {
    margin-top: 8px;
}

.mp button {
    margin: 0 !important;
    min-height: 44px;
    padding: 0 10px;
    font-family: inherit;
    font-size: 0.95rem;
    letter-spacing: 0;
    color: var(--cmd-grey);
    background: transparent;
    border: 1px solid #555;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.mp-controls button {
    flex: 1 1 0;
    min-width: 0;
}

.mp-controls .mp-play {
    flex-grow: 1.6;
    color: var(--cmd-white);
    border-color: var(--cmd-grey);
}

.mp-toggles button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 38px;
    padding: 0 4px;
    font-size: 0.8rem;
    white-space: nowrap;
}

.mp button.is-on {
    color: var(--win-blue);
    border-color: var(--win-blue);
}

/* Myszka: odwrócone kolory jak w reszcie centrali */
@media (hover: hover) {
    .mp button:hover,
    .mp button.is-on:hover {
        background: var(--cmd-grey);
        color: #000;
        border-color: var(--cmd-grey);
    }
}

/* Dotyk: bez "przyklejonego" hovera po tapnięciu, krótki błysk przy naciśnięciu */
@media (hover: none) {
    .mp button:hover {
        background: transparent;
        color: var(--cmd-grey);
        border-color: #555;
    }

    .mp .mp-controls .mp-play:hover {
        color: var(--cmd-white);
        border-color: var(--cmd-grey);
    }

    .mp button.is-on:hover {
        color: var(--win-blue);
        border-color: var(--win-blue);
    }
}

.mp button:active,
.mp button.is-on:active {
    background: var(--cmd-grey);
    color: #000;
}

/* --- GŁOŚNOŚĆ I SKRÓTY (tylko komputer) --- */
.mp-vol {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    color: #888;
    font-size: 0.9rem;
}

.mp-volbar {
    padding: 6px 0;
}

.mp-keys {
    margin-top: 10px;
    color: #666;
    font-size: 0.8rem;
}

.mp-keys b {
    color: #999;
    font-weight: normal;
}

@media (pointer: coarse) {
    .mp-desktop {
        display: none !important;
    }
}

/* --- LISTA PLIKÓW --- */
.mp-dir {
    margin-bottom: 8px;
}

.mp-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px dashed #333;
}

.mp-list li {
    border-bottom: 1px dashed #333;
}

.mp-row {
    display: grid;
    grid-template-columns: 1ch 2ch minmax(0, 1fr) auto;
    column-gap: 1ch;
    align-items: baseline;
    padding: 12px 6px;
    color: var(--cmd-grey) !important;
    -webkit-tap-highlight-color: transparent;
}

.mp-mark {
    color: var(--win-blue);
}

.mp-mark::before {
    content: "\00a0";
}

.mp-num {
    color: #666;
}

.mp-track {
    color: var(--cmd-white);
    overflow-wrap: anywhere;
}

.mp-note {
    display: block;
    color: #777;
    font-size: 0.85rem;
}

.mp-dur {
    color: #888;
    font-size: 0.9rem;
}

.mp-row.is-active .mp-track,
.mp-row.is-active .mp-num {
    color: var(--win-blue);
}

.mp-row.is-active .mp-mark::before {
    content: ">";
}

.mp.is-playing .mp-row.is-active .mp-mark::before {
    animation: blink-opacity 1s step-end infinite;
}

@media (hover: hover) {
    .mp-row:hover {
        background: rgba(255, 255, 255, 0.06);
    }

    .mp-row:hover .mp-mark::before {
        content: ">";
    }
}

.mp-row:active {
    background: rgba(255, 255, 255, 0.1);
}

.mp-row:focus-visible {
    outline: 1px dashed var(--cmd-grey);
    outline-offset: -1px;
}

.mp-total {
    margin-top: 8px;
    color: #888;
    font-size: 0.9rem;
    white-space: pre-wrap;
}

.mp-empty {
    padding: 12px 0;
}

/* --- MINI PASEK (gdy panel odtwarzacza jest poza ekranem) --- */
.mp-mini {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
    background: var(--bg-color, #0c0c0c);
    border-top: 1px solid #333;
}

.mp .mp-mini button {
    min-height: 40px;
    min-width: 48px;
}

.mp .mp-mini .mp-mini-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 10px;
    border: none;
    padding: 0 4px;
    text-align: left;
    text-transform: none;
}

.mp-mini-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--cmd-white);
}

.mp-mini-time {
    color: #888;
    font-size: 0.85rem;
}

@media (hover: hover) {
    .mp .mp-mini .mp-mini-info:hover {
        background: transparent;
        color: var(--cmd-grey);
    }

    .mp .mp-mini .mp-mini-info:hover .mp-mini-title {
        text-decoration: underline;
    }
}

body.mp-page.mp-has-mini {
    padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
}

/* --- CROSS-PLAY --- */
.mp-xplay {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin-top: 8px;
}

.mp .mp-xplay button {
    min-height: 38px;
    padding: 0 10px;
    font-size: 0.8rem;
    white-space: nowrap;
}

.mp-xplay-hint {
    font-size: 0.8rem;
}

/* Moduł w ramce nad odtwarzaczem; mini-pasek zostaje pod nią */
.mp-frame {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 998;
    display: block;
    width: 100%;
    height: calc(100vh - var(--mp-dock-h, 58px));
    height: calc(100dvh - var(--mp-dock-h, 58px));
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--bg-color, #0c0c0c);
    visibility: hidden;
    pointer-events: none;
}

html.mp-docked .mp-frame {
    visibility: visible;
    pointer-events: auto;
}

html.mp-docked,
html.mp-docked body {
    overflow: hidden;
    overscroll-behavior: none;
}

.mp-mini.is-dock .mp-mini-title::before {
    content: "\266A\00a0";
    color: var(--win-blue);
}

/* --- TELEFONY (iPhone SE 320px i podobne) --- */
@media (max-width: 480px) {
    body.mp-page {
        padding-left: 12px;
        padding-right: 12px;
    }

    body.mp-page main.mp {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .mp-now {
        padding: 12px 10px 14px;
    }

    .mp-toggles button {
        font-size: 0.72rem;
    }

    .mp-row {
        padding: 12px 2px;
    }
}