/* ========================================= */
/* --- DIGIKROM PLAYER: SAFE RED EDITION --- */
/* ========================================= */

/* --- 1. BASE STYLES (Wspólne) --- */
.morden-player {
    display: flex; width: 100%; max-width: 650px; height: 150px;
    /* ZMIANA: Ciemne tło zamiast transparent, żeby pasowało do strony */
    background: rgba(10, 10, 10, 0.9) !important; 
    backdrop-filter: blur(10px);
    border-bottom: 2px solid #ff3333; /* Czerwona linia na dole */
    border-radius: 12px;
    position: relative;
    /* ZMIANA: Font Saira */
    font-family: 'Saira', sans-serif !important;
    transition: all 0.3s ease; box-sizing: border-box;
}
.morden-player * { box-sizing: border-box; }

/* TŁO (Ukryte na compact) */
.morden-player::before { 
    display: none; content: ''; position: absolute; inset: 0; 
    background-image: var(--bg-image); background-size: cover; background-position: center; 
    filter: blur(40px) brightness(0.5); z-index: 0; 
}
.player-body { display: flex; width: 100%; height: 100%; z-index: 2; position: relative; }

/* ARTWORK */
.player-artwork {
    width: 150px; height: 150px; flex-shrink: 0; position: relative;
    background: #111; display: flex; align-items: center; justify-content: center;
    border-right: 1px solid rgba(255, 51, 51, 0.2); /* Czerwona ramka */
    margin: 0;
}
.player-artwork img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
.player-artwork svg { display: none !important; } 

/* CONTROLS COMPACT */
.player-main { flex-grow: 1; padding: 10px 15px; display: flex; flex-direction: column; justify-content: center; gap: 5px; }

.track-title { 
    font-size: 1.1rem; font-weight: 700; color: #fff; margin: 0; text-align: center; 
    text-transform: uppercase; letter-spacing: 1px;
}
/* ZMIANA: Kolor artysty na czerwony */
.track-artist { 
    font-size: 0.85rem; color: #ff3333; 
    margin: 0; text-align: center; text-transform: uppercase; letter-spacing: 1px;
}

.progress-container { width: 100%; }
.time-stamps { display: flex; justify-content: space-between; font-size: 0.7rem; color: #aaa; margin-top: 5px; }

input[type="range"] { -webkit-appearance: none; width: 100%; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: rgba(255,255,255,0.2); border-radius: 2px; }

/* ZMIANA: Suwak na czerwony */
input[type="range"]::-webkit-slider-thumb { 
    -webkit-appearance: none; margin-top: -5px; width: 14px; height: 14px; 
    background: #ff3333; 
    border-radius: 50%; box-shadow: 0 0 10px #ff3333;
}

.controls-container { display: flex; align-items: center; justify-content: space-between; margin-top: 5px; }
.main-playback-controls { display: flex; gap: 20px; align-items: center; justify-content: center; width: 100%; }

/* ZMIANA: Ikony na czerwone/szare */
.control-button { background: none; border: none; color: #aaa; cursor: pointer; display: flex; align-items: center; transition: color 0.3s; }
.control-button:hover { color: #fff; }
.control-button svg { width: 24px; height: 24px; }

/* ZMIANA: Play Button na czerwony */
.play-pause-button { 
    width: 45px; height: 45px; 
    background: transparent; 
    border: 2px solid #ff3333;
    color: #ff3333; 
    border-radius: 50%; justify-content: center; 
    box-shadow: 0 0 15px rgba(255, 51, 51, 0.3); 
    display: flex; align-items: center;
    transition: 0.3s;
}
.play-pause-button:hover {
    background: #ff3333; color: #000;
    box-shadow: 0 0 25px rgba(255, 51, 51, 0.6);
}

.play-pause-button svg { width: 18px; height: 18px; fill: currentColor; }
.pause-icon { display: none; }
.playing .play-icon { display: none; }
.playing .pause-icon { display: block; }

.volume-container { display: flex; width: 100px; gap: 5px; align-items: center; color: #aaa; }
.volume-container svg { width: 16px; height: 16px; }

/* Ukrywamy elementy mobile/full na compact desktop - ALE NIE WIZUALIZER */
.lyrics-toggle-btn, .playlist-toggle-btn, .digikrom-playlist-container, .lyrics-overlay { display: none; }
/* Wizualizer domyślnie ukryty, włączany przez media queries */
.music-visualizer { display: none; }


/* ========================================= */
/* --- 2. MOBILE FULL SCREEN & FULL DESKTOP --- */
/* ========================================= */

@media (max-width: 768px), all {
    .morden-player.mode-full-screen,
    .morden-player {
        --icon-color: #fff;
    }
}

/* --- STRICT MOBILE RULES --- */
@media (max-width: 768px) {
    .morden-player {
        position: fixed !important; 
        top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
        width: 100vw !important; height: 100vh !important; height: 100dvh !important;
        max-width: none !important; margin: 0 !important; border-radius: 0 !important;
        background: #000 !important; z-index: 2147483647 !important;
        display: block;
        border-bottom: none;
    }
    /* Tło mobile - Siatka */
    .morden-player::after {
        content: ""; position: absolute; inset: 0; 
        background-image: linear-gradient(rgba(255, 51, 51, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 51, 51, 0.05) 1px, transparent 1px);
        background-size: 30px 30px; pointer-events: none; z-index: 1;
    }

    .morden-player::before { display: block !important; filter: blur(35px) brightness(0.8); }
    
    .player-body { display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 30px; z-index: 2; }
    
    .player-artwork {
        width: 80vw; height: 80vw; max-width: 350px; max-height: 350px;
        margin: 40px auto auto auto; border-radius: 12px; background: #111; border: none; 
        box-shadow: 0 15px 40px rgba(0,0,0,0.6);
    }
    .player-artwork img { border-radius: 12px; }

    .player-main { position: relative; padding: 20px; background: transparent; width: 100%; }
    .track-title { font-size: 1.6rem; text-align: left; }
    .track-artist { font-size: 1.1rem; text-align: left; color: #ff3333; }
    .volume-container { display: none; }
    .control-button { color: #fff; } 
    
    /* Mobile Play Button */
    .play-pause-button { 
        background: #ff3333; color: #fff; border: none;
        width: 70px; height: 70px; 
        box-shadow: 0 0 30px rgba(255, 51, 51, 0.4); 
    }
    .play-pause-button svg { width: 28px; height: 28px; fill: #fff; }

    /* Buttons */
    .lyrics-toggle-btn, .playlist-toggle-btn {
        display: block !important; position: absolute; bottom: 12px; width: 40px; height: 40px; border-radius: 50%;
        background-color: rgba(20,20,20,0.8) !important; backdrop-filter: blur(10px); 
        border: 1px solid rgba(255,255,255,0.2);
        cursor: pointer; z-index: 50;
        background-position: center; background-repeat: no-repeat; background-size: 20px;
    }
    .playlist-toggle-btn { 
        left: 12px; 
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='12' x2='21' y2='12'%3E%3C/line%3E%3Cline x1='8' y1='18' x2='21' y2='18'%3E%3C/line%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'%3E%3C/line%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'%3E%3C/line%3E%3C/svg%3E") !important;
    }
    .lyrics-toggle-btn { 
        right: 12px; 
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'%3E%3C/path%3E%3Cpolyline points='14 2 14 8 20 8'%3E%3C/polyline%3E%3Cline x1='16' y1='13' x2='8' y2='13'%3E%3C/line%3E%3Cline x1='16' y1='17' x2='8' y2='17'%3E%3C/line%3E%3C/svg%3E") !important;
    }
    
    /* Pozycjonowanie wizualizera na Mobile */
    .music-visualizer {
        display: none !important; position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
        gap: 4px; height: 40px; z-index: 15;
    }

    /* --- OVERLAYS SCROLL FIX --- */
    .digikrom-playlist-container, .lyrics-overlay {
        display: flex !important; 
        flex-direction: column;
        position: fixed; inset: 0; background: #000; z-index: 2147483650;
        transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 0; 
        max-height: 100dvh; 
    }
    .digikrom-playlist-container.visible, .lyrics-overlay.visible { transform: translateY(0); }
    
    .pli-header, .lyrics-header { 
        flex-shrink: 0; 
        color: #fff; font-size: 1.8rem; font-weight: 700; 
        padding: 60px 20px 20px 20px; 
        display: flex; justify-content: space-between; align-items: center; 
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .close-playlist, .close-lyrics { font-size: 2.5rem; line-height: 1; cursor: pointer; color: #ff3333; }
    
    .digikrom-playlist, .lyrics-content {
        flex-grow: 1; 
        overflow-y: auto !important; 
        -webkit-overflow-scrolling: touch; 
        padding: 20px;
        padding-bottom: 100px; 
    }
    .lyrics-content { display: block; }
}

/* --- FULL MODE DESKTOP --- */
@media (min-width: 769px) {
    .morden-player.mode-full-screen {
        max-width: 1000px; height: 550px; margin: 40px auto; 
        background: rgba(10, 10, 10, 0.95); 
        border: 1px solid rgba(255, 51, 51, 0.2);
        border-radius: 24px; box-shadow: 0 30px 60px rgba(0,0,0,0.5); overflow: hidden;
    }
    .morden-player.mode-full-screen::before { display: block; filter: blur(60px) brightness(0.7); }
    .morden-player.mode-full-screen .player-body { display: grid; grid-template-columns: 45% 55%; padding: 0; }
    
    .morden-player.mode-full-screen .player-artwork {
        width: 100%; height: auto; aspect-ratio: 1/1; max-width: 350px; justify-self: center; align-self: center;
        background: transparent; border: none; box-shadow: 0 20px 40px rgba(0,0,0,0.4); border-radius: 12px;
    }
    .morden-player.mode-full-screen .player-artwork img { border-radius: 12px; }
    .morden-player.mode-full-screen .lyrics-toggle-btn, 
    .morden-player.mode-full-screen .playlist-toggle-btn { display: none !important; }

    /* Scroll fix dla Desktop Full */
    .morden-player.mode-full-screen .digikrom-playlist-container {
        display: flex; flex-direction: column; 
        position: relative; inset: auto; background: rgba(255,255,255,0.05); transform: none;
        padding: 0; overflow: hidden; border-left: 1px solid rgba(255,255,255,0.1);
        height: 100%;
    }
    .morden-player.mode-full-screen .digikrom-playlist {
        overflow-y: auto; padding: 20px; flex-grow: 1;
    }

    .morden-player.mode-full-screen .pli-header { display: none; } 
    
    .morden-player.mode-full-screen .player-main {
        position: absolute; bottom: 0; left: 0; width: 45%; height: auto; 
        background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); padding: 40px; z-index: 10;
    }
    .morden-player.mode-full-screen .track-title { font-size: 1.5rem; text-align: left; }
    .morden-player.mode-full-screen .track-artist { font-size: 1rem; text-align: left; color: #ff3333; }
    .morden-player.mode-full-screen .control-button { color: #fff; }
    .morden-player.mode-full-screen .play-pause-button { 
        background: #fff; color: #000; width: 60px; height: 60px; 
        border: none; box-shadow: 0 0 20px rgba(255,255,255,0.3);
    }
    .morden-player.mode-full-screen .play-pause-button svg { width: 24px; height: 24px; fill: #000; }
}

/* --- PLAYLIST STYLING --- */
.digikrom-playlist { list-style: none; padding: 0; margin: 0; }
.playlist-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 10px; border-bottom: 1px solid rgba(255,255,255,0.08); cursor: pointer;
    transition: background 0.2s;
}
.playlist-item:hover { background: rgba(255, 51, 51, 0.05); }
.playlist-item.active { 
    background: rgba(255, 51, 51, 0.1); 
    border-left: 3px solid #ff3333;
}

.pli-content { display: flex; flex-direction: column; gap: 4px; }
.pli-title { color: #fff; font-size: 1rem; font-weight: 600; line-height: 1.2; }
.pli-artist { color: rgba(255,255,255,0.5); font-size: 0.85rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.5px; }
.playlist-item.active .pli-title { color: #ff3333; }
.playlist-item.active .pli-artist { color: #ff3333; opacity: 0.8; }

.pli-wave { display: none; gap: 3px; align-items: flex-end; height: 15px; }
.playlist-item.active .pli-wave { display: flex; }
.pli-wave span, .bar { width: 3px; background: #ff3333; animation: bounce 1s infinite; border-radius: 2px; }
.bar { background: #fff; width: 4px; }
.playing .bar, .playing .pli-wave span { animation-play-state: running; }
.bar:nth-child(1) { animation-duration: 0.8s; } .bar:nth-child(2) { animation-duration: 1.1s; } .bar:nth-child(3) { animation-duration: 0.9s; } .bar:nth-child(4) { animation-duration: 1.2s; }
@keyframes bounce { 0%, 100% { height: 4px; opacity: 0.5; } 50% { height: 100%; opacity: 1; } }

/* Scrollbar styling */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.4); }

/* --- RATUNKOWY PATCH (Wklej na samym dole pliku CSS) --- */

/* Działa TYLKO na komputerach (powyżej 769px) */
@media (min-width: 769px) {
    
    /* 1. Naprawa uciekania widgetu w prawo */
    .morden-player:not(.mode-full-screen) {
        margin: 0 !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 650px !important;
    }

    /* 2. Ukrycie przycisków na małym widgecie (ALE WIZUALIZER ZOSTAJE!) */
    .morden-player:not(.mode-full-screen) .lyrics-toggle-btn,
    .morden-player:not(.mode-full-screen) .playlist-toggle-btn,
    .morden-player:not(.mode-full-screen) .digikrom-playlist-container,
    .morden-player:not(.mode-full-screen) .lyrics-overlay {
        display: none !important;
    }

    /* 2b. Pozycjonowanie WIZUALIZERA na Desktop Widget */
    .morden-player:not(.mode-full-screen) .music-visualizer {
        display: flex !important;
        position: absolute;
        left: 75px;  /* Środek artworku 150px */
        bottom: 10px;
        transform: translateX(-50%);
        z-index: 10;
        height: 30px !important;
    }
    .morden-player:not(.mode-full-screen) .music-visualizer span {
        background: #ff3333; /* Czerwony wizualizer */
    }

    /* 3. Naprawa czarnej szczeliny przy obrazku */
    .morden-player:not(.mode-full-screen) .player-artwork {
        background: transparent !important;
        border: none !important;
        margin: 0 !important;
        box-shadow: none !important;
        /* Dodana ramka, żeby pasowało do Red Neon */
        border-right: 1px solid rgba(255, 51, 51, 0.2) !important;
    }
}
/* --- POPRAWKA PLAYLISTY (Wyrównanie do lewej) --- */
.pli-content {
    align-items: flex-start !important; 
    text-align: left !important;        
}
/* --- DODATEK: SHUFFLE & REPEAT --- */
.shuffle-button, .repeat-button {
    opacity: 0.5;
    transition: all 0.2s;
    position: relative;
}
.shuffle-button:hover, .repeat-button:hover {
    opacity: 0.8;
}
.shuffle-button.active, .repeat-button.active {
    opacity: 1;
    color: #ff3333; /* Czerwony */
    filter: drop-shadow(0 0 5px rgba(255, 51, 51, 0.4));
}
.repeat-button.active .repeat-dot {
    display: block !important;
}
.main-playback-controls {
    gap: 10px !important; 
}

/* ========================================= */
/* --- POPRAWKA GŁOŚNOŚCI (DESKTOP GRID) --- */
/* ========================================= */
@media (min-width: 769px) {
    .morden-player.mode-full-screen .controls-container {
        flex-direction: column !important; 
        align-items: center !important;    
        gap: 20px !important;              
        margin-top: 15px !important;
    }
    .morden-player.mode-full-screen .main-playback-controls {
        width: 100% !important;
        justify-content: center !important;
        gap: 15px !important; 
    }
    .morden-player.mode-full-screen .volume-container {
        width: 60% !important;      
        margin: 0 auto !important; 
        justify-content: center !important;
    }
    .morden-player.mode-full-screen .volume-container svg {
        width: 20px !important;
        height: 20px !important;
    }
}

/* ========================================= */
/* --- 4. ZAKŁADKI I PRAWA KOLUMNA (FIX) --- */
/* ========================================= */
.player-right-col { display: contents; } 
.desktop-tabs { display: none; }

@media (min-width: 769px) {
    .morden-player.mode-full-screen .player-body {
        display: grid !important;
        grid-template-columns: 45% 55% !important;
        grid-template-rows: 100% !important;
    }
    .morden-player.mode-full-screen .player-artwork {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
    .morden-player.mode-full-screen .player-main {
        grid-column: 1 !important;
        grid-row: 1 !important;
        align-self: end !important; 
        z-index: 10;
    }
    .morden-player.mode-full-screen .player-right-col {
        display: flex !important;
        flex-direction: column !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        height: 100% !important;
        overflow: hidden !important;
        background: rgba(255,255,255,0.02);
        border-left: 1px solid rgba(255,255,255,0.1);
    }
    .morden-player.mode-full-screen .desktop-tabs {
        display: flex !important;
        height: 50px;
        flex-shrink: 0;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .dt-btn {
        flex: 1;
        background: transparent; border: none;
        color: rgba(255,255,255,0.5); font-weight: 700; cursor: pointer;
        transition: 0.2s; border-bottom: 2px solid transparent;
    }
    .dt-btn:hover { color: #fff; background: rgba(255,255,255,0.05); }
    .dt-btn.active { color: #ff3333; border-bottom: 2px solid #ff3333; background: rgba(255, 51, 51, 0.08); }

    .morden-player.mode-full-screen .digikrom-playlist-container,
    .morden-player.mode-full-screen .lyrics-overlay {
        position: relative !important;
        inset: auto !important;
        transform: none !important;
        background: transparent !important;
        display: none !important; 
        flex-grow: 1;
        overflow-y: auto;
        padding: 0 !important;
        height: auto !important;
    }
    .morden-player.mode-full-screen .digikrom-playlist-container.active-tab,
    .morden-player.mode-full-screen .lyrics-overlay.active-tab {
        display: flex !important;
        flex-direction: column;
    }
    .morden-player.mode-full-screen .pli-header,
    .morden-player.mode-full-screen .lyrics-header { display: none !important; }

    .morden-player.mode-full-screen .lyrics-content {
        padding: 30px !important;
        text-align: center;
    }
    .morden-player.mode-full-screen .lyrics-text {
        font-size: 1.1rem;
        line-height: 1.8;
        color: rgba(255,255,255,0.85);
    }
}
/* ========================================= */
/* --- FINALNY FIX (GEMINI CLEANUP) --- */
/* ========================================= */

/* 1. USUNIĘCIE "INTRUZA" Z OKŁADKI (Desktop Widget) */
@media (min-width: 769px) {
    .morden-player:not(.mode-full-screen) .music-visualizer {
        display: none !important;
    }
}

/* 2. NAPRAWA PLAYLISTY (Te kreski obok tytułów) */

/* Domyślny stan: STOP (Cisza) */
.pli-wave span {
    height: 3px !important;
    opacity: 0.5;
    animation-play-state: paused !important;
    background: #ff3333 !important;
}

/* Stan: GRA MUZYKA (.playing) + TEN KONKRETNY UTWÓR (.active) */
.morden-player.playing .playlist-item.active .pli-wave span {
    animation-play-state: running !important;
    opacity: 1;
}

/* Opcjonalnie: Trochę losowości dla playlisty, żeby nie skakały identycznie */
.pli-wave span:nth-child(1) { animation-duration: 0.8s; }
.pli-wave span:nth-child(2) { animation-duration: 1.1s; }
.pli-wave span:nth-child(3) { animation-duration: 0.9s; }
.pli-wave span:nth-child(4) { animation-duration: 1.2s; }

/* ========================================= */
/* --- FINALNE CIĘCIE: UKRYCIE NA MOBILE --- */
/* ========================================= */

@media (max-width: 768px) {
    /* Na telefonach: całkowicie usuwamy wizualizer z DOM */
    .music-visualizer {
        display: none !important;
    }
}