body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    color: #333;
    background-color: #1d2b49;
}
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/tlo.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
    background-color: white
}

body.dark-mode::before {
    background-image: url('images/tlo-tryb-ciemny.png');
}

#app-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 100vh;
}

#game-container {
    position: relative; 
    padding: 20px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    
    /* KLUCZOWE DODANE STYLE */
    display: flex;
    flex-direction: column; /* Ustawiamy układ pionowy: Nagłówek -> Plansza -> Przyciski */
    align-items: center;    /* Centrujemy wszystko w poziomie */
}

#button-container {
    margin-top: 15px;
    display: flex;
    justify-content: center;
    gap: 15px;
}

/* === NOWY, STYL 3D DLA PRZYCISKÓW AKCJI === */

/* 1. Wspólne style dla wszystkich czterech przycisków */
#new-game-btn,
#manage-saves-btn,
#undo-btn,
#surrender-btn,
#hint-btn {
    width: 60px;          /* Zwiększamy rozmiar dla lepszego efektu */
    height: 60px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    border-radius: 12px;  /* Bardziej zaokrąglone rogi */
    cursor: pointer;
    transition: all 0.07s ease-in-out; /* Szybka, responsywna animacja */
}

/* 2. Stan "wciśnięty" (:active) - wspólny dla wszystkich */
#new-game-btn:active,
#manage-saves-btn:active,
#undo-btn:active,
#surrender-btn:active,
#hint-btn:active {
    transform: translateY(4px); /* Przesuwamy przycisk w dół */
    border-bottom-width: 2px; /* Zmniejszamy grubość dolnej krawędzi */
}

/* Dedykowany styl tylko dla ikony podpowiedzi */
#hint-btn img {
    width: 45px !important; /* Ustaw nową, pożądaną szerokość */
    height: 45px !important; /* Ustaw nową, pożądaną wysokość */
}

/* 3. Indywidualne kolory i "krawędź" 3D dla każdego przycisku */

/* Przycisk Nowa Gra (Niebieski) */
#new-game-btn {
    background-color: #007bff;
    border-bottom: 6px solid #0056b3; /* Ciemniejsza krawędź */
}
#new-game-btn:active {
    border-color: #0056b3;
}

/* Przycisk Zapisz (Żółty) */
#manage-saves-btn {
    background-color: #ffc107;
    border-bottom: 6px solid #d39e00;
}
#manage-saves-btn:active {
    border-color: #d39e00;
}

/* Przycisk Cofnij (Szary) */
#undo-btn {
    background-color: #6c757d;
    border-bottom: 6px solid #494f54;
}
#undo-btn:active {
    border-color: #494f54;
}

/* Przycisk Poddaj się (Czerwony) */
#surrender-btn {
    background-color: #dc3545;
    border-bottom: 6px solid #b02a37;
}
#surrender-btn:active {
    border-color: #b02a37;
}

/* 4. Dostosowanie ikon wewnątrz przycisków */
#button-container button img {
    width: 32px; /* Lekko powiększamy ikony */
    height: 32px;
    vertical-align: middle;
}

#pause-btn {
    position: absolute;
    top: 7px;
    right: 15px;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%; 
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
    z-index: 241;
    display: flex;
    justify-content: center;
    align-items: center;
}

#pause-btn img {
    width: 20px;
    height: 20px;
}

#pause-btn:hover {
    background-color: transparent;
    transform: scale(1.15);
}

.game-paused #back-to-menu-btn:hover,
.game-paused #pause-btn:hover {
    transform: none;
}

#pause-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(29, 43, 73, 0.85);
    color: white;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 3em;
    font-weight: bold;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
    z-index: 240;
    border-radius: 12px;
}

.pause-hint {
    font-size: 0.4em;
    font-weight: 300;
    margin-top: 15px;
    color: rgba(255, 255, 255, 0.8);
    text-align: center; /* Dodana linia */
    padding: 0 10px;    /* Dodany padding boczny dla bezpieczeństwa */
}

#header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* KLUCZOWA ZMIANA: Wymusza równą wysokość na wszystkich dzieciach */
    margin-bottom: 15px;
    padding: 0 10px;
    gap: 8px; /* Dodajemy mały odstęp na wszelki wypadek */
}

#next-balls-container {
    position: relative;
    padding-left: 25px; /* Dodajemy tylko padding, bez marginesu */
}

/* Tworzymy pionową linię-separator dla sekcji "Następne" */
#next-balls-container::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 24px;
    background-color: #ddd;
}

/* Wersja separatora dla trybu ciemnego */
body.dark-mode #timer-container::before,
body.dark-mode #next-balls-container::before {
    background-color: #4a617a;
}

#score-board {
    margin-left: 55px; /* Dodaje odstęp od lewej krawędzi */
}

#score-board, 
#timer-container, 
#next-balls-container {
    display: flex;
    align-items: center; /* Centruje zawartość w pionie WEWNĄTRZ każdego elementu */
}

#score-board, #timer-container {
    /* Upewniamy się, że są w jednej linii */
    display: flex; 
    align-items: center;
}

#score, #timer {
    margin-left: 0.5em; /* Dodaje niewielki odstęp z lewej strony */
}

#next-balls {
    display: flex;
    gap: 5px;
    background-color: #e0e0e0;
    padding: 5px 8px;
    border-radius: 6px;
    box-shadow: 
        inset 2px 2px 4px rgba(0, 0, 0, 0.25),
        inset -2px -2px 4px rgba(255, 255, 255, 0.7);
    margin-left: 8px;
}

#game-board {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(9, 1fr);
    width: 450px;
    height: 450px;
    border: 2px solid #ccc;
    background-color: #e0e0e0;
    gap: 1px;
    position: relative;
    transition: width 0.3s ease-out, height 0.3s ease-out; /* Animacja zmiany rozmiaru */
}

#save-game-btn {
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
    border: none;
    background-color: #28a745;
    color: white;
    border-radius: 5px;
    transition: background-color 0.2s;
}

#save-game-btn:hover {
    background-color: #218838;
}

.custom-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(29, 43, 73, 0.7);
    
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    opacity: 0;
    
    z-index: 1000;
    transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s;
}

.custom-modal-overlay.visible {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.custom-modal-box {
    background-color: white;
    padding: 25px 30px;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.2);
    text-align: center;
    width: 90%;
    max-width: 400px;
    transform: scale(0.9);
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

.custom-modal-overlay.visible .custom-modal-box {
    transform: scale(1);
    opacity: 1;
}

#custom-dialog-title {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.6em;
    color: #333;
}

#custom-dialog-content {
    margin-bottom: 25px;
    font-size: 1.1em;
    color: #555;
    line-height: 1.5;
}

#custom-dialog-content input {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    box-sizing: border-box;
}

.custom-modal-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.custom-modal-buttons button,
.custom-modal-buttons a {
    padding: 10px 25px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    transition: all 0.2s ease;
    text-decoration: none; /* Usuwa podkreślenie z linku */
    display: inline-flex;  /* Zapewnia poprawne zachowanie dla <a> */
    align-items: center;
    justify-content: center;
}

.custom-modal-buttons .btn-primary { background-color: #007bff; color: white; }
.custom-modal-buttons .btn-primary:hover { background-color: #0056b3; transform: translateY(-2px); }
.custom-modal-buttons .btn-secondary { background-color: #6c757d; color: white; }
.custom-modal-buttons .btn-secondary:hover { background-color: #5a6268; transform: translateY(-2px); }

.modal {
    position: fixed;
    z-index: 300;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6);
    display: flex; /* <-- Zmienione na flex, aby zawsze było wycentrowane */
    justify-content: center;
    align-items: center;

    /* Domyślnie modal jest niewidoczny i lekko zmniejszony */
    opacity: 0;
    visibility: hidden;
    
    /* Definiujemy płynne przejście dla tych właściwości */
    transition: opacity 0.3s ease-out, visibility 0s linear 0.3s, transform 0.3s ease-out;
}

/* Nowa klasa, która będzie pokazywać modal */
.modal.modal-is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease-out, visibility 0s, transform 0.3s ease-out;
}

.modal-content {
    background-color: #fefefe;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
    border-radius: 8px;
    position: relative;
    /* Stan początkowy: lekko zmniejszony */
    transform: scale(0.95);
    /* Płynne przejście dla transformacji */
    transition: transform 0.3s ease-out;
    max-height: 85vh; /* Ogranicz wysokość do 85% wysokości ekranu */
    overflow-y: auto;   /* Dodaj pionowy pasek przewijania, gdy treść jest za długa */
}
/* Kiedy modal (rodzic) jest otwarty, animuj .modal-content do pełnego rozmiaru */
.modal.modal-is-open .modal-content {
    transform: scale(1);
}

.close-modal-btn {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}
.close-modal-btn:hover { color: black; }

.save-slot {
    border: 1px solid #ddd;
    padding: 12px; /* MODYFIKACJA: Zwiększono padding dla lepszego wyglądu */
    margin-bottom: 12px;
    border-radius: 8px; /* MODYFIKACJA: Bardziej zaokrąglone rogi */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px; /* MODYFIKACJA: Odstęp między podglądem/info a przyciskami */
    transition: background-color 0.2s, border-color 0.2s; /* MODYFIKACJA: Dodano płynne przejście */
}
.save-slot:hover {
    background-color: #f8f9fa;
    border-color: #ccc;
}
.save-slot.empty {
    justify-content: center;
    min-height: 100px; /* MODYFIKACJA: Zapewnia spójną wysokość pustych slotów */
}
.save-info { font-size: 0.9em; }
.save-info span { display: block; color: #555; margin-top: 4px; }
.save-info strong { font-size: 1.2em; }

.save-actions button { margin-left: 5px; padding: 8px 12px; border: none; border-radius: 4px; cursor: pointer; color: white; }
.btn-load { background-color: #007bff; }
.btn-load:hover { background-color: #0056b3; }
.btn-save { background-color: #28a745; }
.btn-save:hover { background-color: #218838; }
.btn-delete { background-color: #dc3545; }
.btn-delete:hover { background-color: #c82333; }

@media (max-width: 650px) {
    #game-board {
        width: 90vw !important; /* !important, aby nadpisać styl inline z JS */
        height: 90vw !important;
    }
}

.particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    z-index: 101;
    pointer-events: none;
    animation: flyAndFade 1.5s ease-out forwards;
}

@keyframes flyAndFade {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--x), var(--y)) scale(0);
        opacity: 0;
    }
}

.cell { 
    background-color: #f8f8f8; 
    cursor: pointer; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    transition: background-color 0.2s; 
    position: relative; /* <-- DODAJ TĘ LINIĘ */
}

.cell:hover { background-color: #e8e8e8; }

.ball-appear { 
    animation: appear 0.3s ease-in-out;
    animation-fill-mode: backwards; /* Sprawia, że stan początkowy (scale(0)) jest stosowany natychmiast */
}
.ball.selected { animation: pulse 1s ease-in-out infinite; transition: none; }
.ball.selected.shake-error { animation: shake 0.4s ease-in-out; }

.floating-score { 
    position: absolute; 
    font-size: 2.8em; /* Domyślny rozmiar, będzie nadpisywany przez JS */
    font-weight: bold; 
    color: #28a745; 
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); 
    z-index: 100; 
    pointer-events: none; 
    animation: floatAndFade 1.5s ease-out forwards;
    transition: font-size 0.2s ease-out; /* Dodajemy płynne przejście zmiany rozmiaru */
}

.game-entering { animation: zoomIn 0.5s ease-out forwards; }

@keyframes floatAndFade { 0% { transform: translateY(0) scale(0.5); opacity: 0; } 20% { transform: translateY(-20px) scale(1.2); opacity: 1; } 100% { transform: translateY(-80px) scale(1); opacity: 0; } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } 20%, 40%, 60%, 80% { transform: translateX(5px); } }
@keyframes appear { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(0.75); } 100% { transform: scale(1); } }
@keyframes zoomIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }



.menu-content { 
    position: relative; 
    background: rgba(29, 43, 73, 0.8); 
    padding: 40px 60px; 
    border-radius: 15px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); 
    border: 1px solid rgba(255, 255, 255, 0.2); 
    margin: auto;
    /* === POCZĄTEK ZMIAN === */
    max-height: 90vh; /* Ogranicz wysokość do 90% wysokości ekranu */
    overflow-y: auto;   /* Dodaj pionowy pasek przewijania, gdy treść jest za długa */
    /* Uproszczona wersja dla Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.2);
    /* === KONIEC ZMIAN === */
}

/* === POCZĄTEK NOWEJ SEKCJI === */
/* Stylizujemy pasek przewijania, aby pasował do ciemnego motywu menu (dla Chrome/Edge/Safari) */
.menu-content::-webkit-scrollbar {
  width: 10px;
}

.menu-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2); 
  border-radius: 5px;
}

.menu-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 5px;
}

.menu-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}
/* === KONIEC NOWEJ SEKCJI === */

.menu-content h1 { font-size: 3.5em; margin: 0; text-shadow: 2px 2px 8px rgba(0,0,0,0.7); font-family: 'Fredoka One', cursive;}
.menu-content .subtitle { font-size: 1.2em; margin-top: 5px; margin-bottom: 40px; color: rgba(255, 255, 255, 0.8); font-weight: 300; }
#menu-buttons { display: flex; flex-direction: column; gap: 20px; }

.menu-content h1 { font-size: 3.5em; margin: 0; text-shadow: 2px 2px 8px rgba(0,0,0,0.7); font-family: 'Fredoka One', cursive;}
.menu-content .subtitle { font-size: 1.2em; margin-top: 5px; margin-bottom: 40px; color: rgba(255, 255, 255, 0.8); font-weight: 300; }
#menu-buttons { display: flex; flex-direction: column; gap: 20px; }

/* Zmieniamy tę regułę, aby była bardziej specyficzna */
#menu-buttons button:hover,
#time-attack-options-container .menu-buttons button:hover, /* <-- POPRAWKA TUTAJ */
#size-select-back-btn:hover,
#chaos-size-select-back-btn:hover {
    transform: translateY(-3px);
    background-color: #0056b3;
    box-shadow: 0 6px 20px rgba(0, 86, 179, 0.6);
}

/* Zachowujemy specyficzne style dla konkretnych przycisków po ID */
#menu-buttons #menu-load-game { background-color: #28a745; box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4); }
#menu-buttons #menu-load-game:hover { background-color: #218838; box-shadow: 0 6px 20px rgba(33, 136, 56, 0.6); }

#game-over-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 2.5em;
    text-align: center;
    z-index: 300;
}

#xp-circle-container {
    position: absolute;
    bottom: -95px; /* Pozycjonujemy względem rogu planszy */
    right: -15px;
    width: 70px;
    height: 70px;
    pointer-events: none; /* Aby nie blokowało klikania w komórki pod spodem */
    z-index: 150;
    filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.3));
}

#xp-circle-progress {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* To tło będzie dynamicznie zmieniane przez JS.
       Gradient stożkowy (conic-gradient) rysuje okrąg:
       - pierwszy kolor to kolor postępu (od 0 stopni do X)
       - drugi kolor to reszta okręgu (od X do 360 stopni) */
    background: conic-gradient(#ffc107 0deg, #e0e0e0 0deg);
    transition: background 0.5s ease-out; /* Płynne przejście */
}

#xp-circle-level-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 54px; /* Mniejsze kółko w środku, tworzy efekt "donuta" */
    height: 54px;
    background-color: #f8f8f8; /* Kolor tła komórek planszy */
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 1;
}

#xp-circle-level-label {
    font-size: 0.6em;
    font-weight: bold;
    color: #aaa;
}

#xp-circle-level {
    font-size: 1.4em;
    font-weight: bold;
    color: #333;
}

#menu-buttons .btn-ranked {
    background-color: #dc3545; /* Czerwony, kolor rywalizacji */
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.4);
}
#menu-buttons .btn-ranked:hover {
    transform: translateY(-3px);
    background-color: #b51f2d;
    box-shadow: 0 6px 20px rgba(200, 35, 51, 0.6);
}

#menu-buttons .btn-sandbox {
    background-color: #007bff; /* Standardowy niebieski z Twojego motywu */
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.4);
}
#menu-buttons .btn-sandbox:hover {
    transform: translateY(-3px);
    background-color: #0069d9; /* Jaśniejszy niebieski po najechaniu */
    box-shadow: 0 6px 20px rgba(0, 86, 179, 0.6);
}

/* Animacja błysku przy awansie na nowy poziom */
.level-up-flash {
    animation: flash 0.8s ease-out;
}

/* 1. Zastępujemy starą regułę #high-scores-toggle tą nową, wspólną regułą */
.toggle-btn-group,
#high-scores-size-toggle {
    display: flex;
    justify-content: center;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 10px; /* Ustawiamy spójny odstęp dolny dla wszystkich */
}

/* 2. Zapewniamy, że wewnętrzne przyciski mają spójny wygląd */
.toggle-btn-group .toggle-btn,
#high-scores-size-toggle .toggle-btn {
    flex: 1;
    padding: 10px;
    border: none;
    background-color: #f0f0f0;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.2s;
    border-left: 1px solid #ccc; /* Dodajemy separator dla spójności */
}

/* Usuwamy separator dla pierwszego przycisku w grupie */
.toggle-btn-group .toggle-btn:first-child,
#high-scores-size-toggle .toggle-btn:first-child {
    border-left: none;
}

/* 3. Ujednolicamy styl aktywnego przycisku */
.toggle-btn-group .toggle-btn.active,
#high-scores-size-toggle .toggle-btn.active {
    background-color: #007bff;
    color: white;
}

/* 4. Modyfikujemy istniejące reguły, aby używały nowych klas i usuwamy te zbędne */
#high-scores-size-toggle .toggle-btn {
    padding: 8px;
    font-size: 0.9em;
}

#high-scores-duration-toggle {
    margin-bottom: 15px; /* Zachowujemy większy odstęp od listy wyników */
}

#high-scores-duration-toggle .toggle-btn {
    padding: 6px 12px;
    font-size: 0.85em;
}


@keyframes flash {
    0% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7); }
    50% { box-shadow: 0 0 20px 15px rgba(255, 193, 7, 0.7); }
    100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); }
}

#final-score { font-size: 0.7em; margin-top: 10px; }
#final-time { font-size: 0.6em; margin-top: 15px; color: rgba(255, 255, 255, 0.85); }
#main-content-area {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    gap: 30px; /* Przywracamy stały, 20px odstęp między planszą a ikonami */
    width: auto; /* Pozwalamy, aby szerokość dopasowała się do zawartości */
}
#high-scores-btn { cursor: pointer; transition: transform 0.2s ease-in-out; }
#high-scores-btn:hover { transform: scale(1.1); }
#high-scores-list {
    list-style-type: none;
    padding-left: 0;
    text-align: left;
    max-height: 55vh;
    overflow-y: auto;
    padding-right: 10px;
    margin-right: -10px;
}

#high-scores-list li { margin-bottom: 10px; border-bottom: 1px solid #eee; padding-bottom: 10px; }
.score-entry-player { font-weight: bold; display: block; }
.score-entry-details { color: #777; font-size: 0.9em; display: block; margin-top: 4px; }
.restart-hint { margin-top: 60px; font-size: 0.4em; font-weight: 300; color: rgba(255, 255, 255, 0.7); }
#back-to-menu-btn { position: absolute; top: 7px; left: 15px; width: 32px; height: 32px; cursor: pointer; transition: transform 0.2s ease-in-out; z-index: 241; }
#back-to-menu-btn:hover { transform: scale(1.15); }
.help-section { margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 15px; }
.help-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.help-section h3 { margin-top: 0; color: #007bff; }
.help-section ul { list-style-type: none; padding-left: 0; }
.help-section li { margin-bottom: 8px; }
.help-icon-row { display: flex; align-items: center; margin-bottom: 12px; }
.help-icon-row img { width: 32px; height: 32px; margin-right: 15px; }
.help-icon-row span { color: #555; font-size: 0.95em; }

#main-menu-xp-container {
    width: 100%;
    margin-bottom: 30px; /* Odstęp od przycisków */
    display: grid;
    grid-template-columns: auto 1fr auto; /* 3 kolumny: Lvl | Pasek | Tekst */
    align-items: center;
    gap: 10px;
    color: #fff;
}

.level-badge {
    background-color: rgba(0, 0, 0, 0.2);
    padding: 5px 10px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 0.9em;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.xp-bar-wrapper {
    height: 12px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.5);
}

.cell.path-possible {
    background-color: rgba(144, 238, 144, 0.7) !important; /* Jasnozielony z przezroczystością */
}

.cell.path-impossible {
    background-color: rgba(255, 182, 193, 0.7) !important; /* Jasnoczerwony z przezroczystością */
}

#main-menu-xp-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #ffc107, #ff9800); /* Ładny gradient dla paska */
    border-radius: 6px;
    transition: width 0.5s ease-out;
}

.xp-progress-text {
    font-size: 0.9em;
    font-weight: 500;
}

/* Style dla przycisków na ekranie końca gry */
#game-over-buttons {
    display: flex;
    gap: 20px;
    margin-top: 40px;
}

#game-over-buttons button {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Usunęliśmy 'gap: 10px;' */
    padding: 12px 25px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    border: none;
    border-radius: 8px;
    color: white;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

#game-over-buttons button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

#gameOver-back-to-menu {
    background-color: #6c757d; /* Szary - akcja drugorzędna */
}
#gameOver-back-to-menu:hover {
    background-color: #5a6268;
}

#gameOver-new-game {
    background-color: #28a745; /* Zielony - akcja główna */
}
#gameOver-new-game:hover {
    background-color: #218838;
}

/* Dostosowanie podpowiedzi o restarcie */
.restart-hint {
    margin-top: 30px;
    font-size: 0.35em;
}

/* --- Style dla okna wyboru skórek --- */
#skins-list {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.skin-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border: 2px solid #ddd;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.skin-option.selected {
    border-color: #007bff;
    background-color: #e7f1ff;
}

.skin-option.selected .skin-name {
    color: #333; /* Ustawia ciemny kolor tekstu dla ZAZNACZONEJ opcji */
}

.skin-name {
    font-weight: bold;
    font-size: 1.1em;
}

.btn-select-skin {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-select-skin:hover {
    background-color: #0056b3;
}

.skin-option.selected .btn-select-skin {
    background-color: #28a745;
    cursor: default;
}

/* --- Style dla nowych przycisków-ikonek --- */
.menu-icon-buttons #menu-achievements-btn {
    background-color: #63cdda; 
    border: 5px solid #4bb8c5;
    box-shadow: 0 4px 15px rgba(99, 205, 218, 0.5);
}
.menu-icon-buttons #menu-achievements-btn:hover {
    background-color: #79e0ee;
    border-color: #3aa3b1;
    box-shadow: 0 6px 20px rgba(99, 205, 218, 0.7);
}

.menu-icon-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 10px;
    flex-wrap: wrap; /* <-- DODAJ TĘ LINIĘ */
}

/* === KLUCZOWA POPRAWKA: ZMIENIONA REGUŁA DLA KSZTAŁTU PRZYCISKÓW-IKONEK === */


.menu-icon-buttons button:hover {
    transform: translateY(-3px);
}
.menu-icon-buttons button img {
    width: auto;
    height: 32px;
}

/* Przycisk Najlepszych Wyników (Złoty) */
.menu-icon-buttons #menu-high-scores-icon {
    background-color: #ffe7b3; 
    border: 5px solid #ffd67d;
    box-shadow: 0 4px 15px rgba(255, 214, 125, 0.5); /* Złota poświata */
}
.menu-icon-buttons #menu-high-scores-icon:hover {
    background-color: #fff4dd; 
    border-color: #fcc347;
    box-shadow: 0 6px 20px rgba(255, 214, 125, 0.7); /* Mocniejsza złota poświata */
}

/* Przycisk Skórek (Niebieski) */
.menu-icon-buttons #menu-skins-btn {
    background-color: #007bff;
    border: 5px solid #0056b3; /* DODANA LINIA: Ciemniejsza niebieska obwódka */
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.4); /* Niebieska poświata */
    }
.menu-icon-buttons #menu-skins-btn:hover {
    background-color: #3395ff; /* JAŚNIEJSZY niebieski */
    border-color: #004a99; /* Zachowujemy ciemniejszą obwódkę */
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.6);
}

/* Przycisk Statystyk (Fioletowy) */
.menu-icon-buttons #menu-stats-btn {
    background-color: #a29bfe; 
    border: 5px solid #8e84e5;
    box-shadow: 0 4px 15px rgba(162, 155, 254, 0.5); /* Fioletowa poświata */
}
/* Przycisk Ustawień (Szary) */
.menu-icon-buttons #menu-settings-btn {
    background-color: #adb5bd; 
    border: 5px solid #868e96;
    box-shadow: 0 4px 15px rgba(173, 181, 189, 0.5);
}
.menu-icon-buttons #menu-settings-btn:hover {
    background-color: #ced4da;
    border-color: #6c757d;
    box-shadow: 0 6px 20px rgba(173, 181, 189, 0.7);
}
.menu-icon-buttons #menu-stats-btn:hover {
    background-color: #b1a9ff;
    border-color: #7d70e0;
    box-shadow: 0 6px 20px rgba(162, 155, 254, 0.7); /* Mocniejsza fioletowa poświata */
}

/* Przycisk Pomocy (Szary) */
.menu-icon-buttons #menu-help-btn-icon {
    background-color: #6c757d;
    border: 5px solid #494f54; /* DODANA LINIA: Ciemniejsza szara obwódka */
    box-shadow: 0 4px 15px rgba(108, 117, 125, 0.4); /* Szara poświata */
}
.menu-icon-buttons #menu-help-btn-icon:hover {
    background-color: #868e96; /* JAŚNIEJSZY ciemnoszary */
    border-color: #383d41; /* Ciemniejsza obwódka */
    box-shadow: 0 6px 20px rgba(108, 117, 125, 0.6);
}


.menu-icon-buttons #menu-high-scores-icon {
    background-color: #ffe7b3; border: 5px solid #ffd67d;
}
.menu-icon-buttons #menu-high-scores-icon:hover {
    background-color: #e9ecef; border-color: #fcc347;
}

.menu-icon-buttons #menu-help-btn-icon {
    background-color: #6c757d; /* Ustawienie szarego tła */
}
.game-icon-buttons {
    display: flex;
    flex-direction: column;
    align-items: center; /* Ta linia teraz zadziała poprawnie */
    gap: 15px;
    width: 80px;         /* <-- KLUCZOWA ZMIANA: Nadajemy stałą szerokość dla kolumny z ikonami */
}
.game-icon-btn {
    width: 48px; height: 48px; cursor: pointer; transition: transform 0.2s ease-in-out;
}
.game-icon-btn:hover {
    transform: scale(1.1);
}

/* --- REGUŁY DLA TRYBU CIEMNEGO (DARK MODE) --- */
body.dark-mode #game-container {
    background-color: #2c3e50;
    color: #ecf0f1;
    border: 1px solid #34495e;
}
body.dark-mode #game-container > h1 {
    color: #ecf0f1;
}
body.dark-mode .cell {
    background-color: #34495e;
}
body.dark-mode .cell:hover {
    background-color: #4a617a;
}
body.dark-mode #game-board {
    background-color: #2c3e50;
    border-color: #7f8c8d;
}
body.dark-mode #next-balls {
    background-color: #2c3e50;
}
body.dark-mode #xp-circle-level-bg {
    background-color: #34495e;
}
body.dark-mode #xp-circle-level {
    color: #ecf0f1;
}
body.dark-mode #xp-circle-progress {
    background: conic-gradient(#ffc107 0deg, #4a617a 0deg);
}
body.dark-mode .modal-content {
    background-color: #34495e;
    color: #ecf0f1;
}
body.dark-mode #high-scores-list li {
    border-bottom-color: #4a617a;
}
body.dark-mode .score-entry-details {
    color: #bdc3c7;
}

body.dark-mode .save-slot { border-color: #4a617a; }
body.dark-mode .save-slot:hover { background-color: #2c3e50; border-color: #5dade2; }
body.dark-mode .save-info strong { color: #ecf0f1; }
body.dark-mode .save-info span { color: #bdc3c7; }
body.dark-mode .save-slot.empty strong {
    color: #ecf0f1; /* Jasny kolor dla tekstu "Slot jest pusty" */
}

/* Style dla okna Pomocy w trybie ciemnym */
body.dark-mode .help-section {
    border-bottom-color: #4a617a; /* Ciemniejsza ramka-separator */
}
body.dark-mode .help-section h3 {
    color: #5dade2; /* Jaśniejszy, niebieski kolor dla nagłówków */
}
body.dark-mode .help-icon-row span {
    color: #bdc3c7; /* Jaśniejszy kolor dla opisu ikon */
}

/* --- Obsługa ikon w oknie Pomocy --- */

/* Domyślnie ukryj ikonę dla trybu ciemnego */
.help-icon-dark {
    display: none;
}

/* W trybie ciemnym, ukryj ikonę domyślną... */
body.dark-mode .help-icon-default {
    display: none;
}
/* ...i pokaż ikonę dla trybu ciemnego */
body.dark-mode .help-icon-dark {
    display: inline-block; /* lub block, w zależności od potrzeby */
}

.combo-text {
    font-size: 0.5em; /* Zwiększamy rozmiar, aby był bardziej czytelny */
    font-weight: bold;
    color: #ffc107;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    display: block;
    margin-top: 8px; /* Zwiększamy odstęp od głównej liczby punktów */
}

/* Jaśniejszy cień dla podglądu następnych kulek */
body.dark-mode #next-balls {
    box-shadow: 
        inset 2px 2px 4px rgba(0, 0, 0, 0.5), /* Ciemniejszy cień od dołu */
        inset -2px -2px 4px rgba(255, 255, 255, 0.1); /* Jasna poświata od góry */
}

/* Zamiana ikon na planszy na białe */
body.dark-mode #back-to-menu-btn,
body.dark-mode #pause-btn img {
    filter: invert(1);
}

/* Style dla niestandardowego okna dialogowego w trybie ciemnym */
body.dark-mode .custom-modal-box {
    background-color: #34495e; /* Ciemne tło okna */
    border: 1px solid #4a617a;
}
body.dark-mode #custom-dialog-title {
    color: #ecf0f1; /* Jasny kolor tytułu */
}
body.dark-mode #custom-dialog-content {
    color: #bdc3c7; /* Jaśniejszy kolor tekstu treści */
}
body.dark-mode #custom-dialog-content input {
    background-color: #2c3e50; /* Ciemne tło pola input */
    border-color: #7f8c8d;
    color: #ecf0f1; /* Jasny kolor wpisywanego tekstu */
}
body.dark-mode #custom-dialog-content input::placeholder {
    color: #7f8c8d; /* Kolor dla placeholdera, jeśli będzie używany */
}

/* Animacja pojawiania się kulek w podglądzie */
@keyframes nextBallAppear {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Nowa, bardziej dynamiczna animacja "wskakiwania" */
@keyframes nextBallAppear {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    60% {
        transform: scale(1.15); /* Przestrzelenie - kulka jest większa niż docelowo */
        opacity: 0.75;
    }
    80% {
        transform: scale(0.95); /* Lekkie odbicie w drugą stronę */
        opacity: 0.9;
    }
    100% {
        transform: scale(1); /* Ustalenie się na docelowym rozmiarze */
        opacity: 1;
    }
}

.next-ball-appear {
    /* Przywracamy sensowny, dłuższy czas animacji */
    animation: nextBallAppear 0.4s ease-out forwards;
    animation-fill-mode: backwards;
}

/* Animacja okrągłego błysku dla kółka XP */
@keyframes xp-flash-effect {
    from {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7);
    }
    to {
        /* Zwiększamy rozmycie i rozproszenie cienia */
        box-shadow: 0 0 0 25px rgba(255, 193, 7, 0);
    }
}

/* Klasa dodawana do #xp-circle-container */
.xp-circle-flash #xp-circle-progress { 
    /* Celujemy w okrągłe dziecko, gdy rodzic ma klasę */
    animation: xp-flash-effect 0.6s ease-out;
}

/* Animacja płynnego pojawiania się i znikania listy wyników */
@keyframes fadeInList {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOutList {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-10px); }
}

.list-fade-in {
    animation: fadeInList 0.3s ease-out;
}

.list-fade-out {
    animation: fadeOutList 0.2s ease-in;
}

/* --- LEPSZY WYGLĄD PASKA PRZEWIJANIA W OKNIE WYNIKÓW --- */

/* Dla przeglądarek opartych na WebKit (Chrome, Edge, Safari) */
#high-scores-list::-webkit-scrollbar {
  width: 8px; /* Szerokość paska */
}

#high-scores-list::-webkit-scrollbar-track {
  background: #f1f1f1; /* Kolor tła "toru" paska */
  border-radius: 4px;
}

#high-scores-list::-webkit-scrollbar-thumb {
  background: #bbb; /* Kolor samego paska (uchwytu) */
  border-radius: 4px;
}

#high-scores-list::-webkit-scrollbar-thumb:hover {
  background: #888; /* Kolor paska po najechaniu myszką */
}

/* Dostosowanie paska dla trybu ciemnego */
body.dark-mode #high-scores-list::-webkit-scrollbar-track {
  background: #2c3e50;
}

body.dark-mode #high-scores-list::-webkit-scrollbar-thumb {
  background: #5dade2;
}

/* --- Style dla zakładek w oknach modalnych --- */


/* Pojedynczy przycisk zakładki */
.tab-button {
    padding: 10px 20px;
    cursor: pointer;
    border: none;
    background-color: transparent;
    font-size: 1.1em;
    color: #888;
    transition: color 0.15s ease-in-out;
}

/* --- LOGIKA ANIMOWANEGO PODKREŚLENIA DLA OKNA SKÓREK --- */

/* 1. Ustawiamy pozycjonowanie tylko dla kontenera z ID */
#skins-modal-tabs-container {
    position: relative; 
    border-bottom: 2px solid #eee; /* Przenosimy border, żeby był pod pseudo-elementem */
}

/* 2. Tworzymy pseudo-element ::after dla kontenera z ID */
#skins-modal-tabs-container::after {
    content: '';
    position: absolute;
    bottom: -2px; /* Pozycjonujemy DOKŁADNIE na dolnej krawędzi kontenera */
    left: var(--underline-left, 0); 
    width: var(--underline-width, 0);
    height: 3px;  
    background-color: #007bff;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Przyciski wewnątrz tego konkretnego kontenera */
#skins-modal-tabs-container .tab-button.active {
    color: #007bff;
    font-weight: bold;
}
#skins-modal-tabs-container .tab-button:hover {
    color: #0056b3;
}

/* --- Poprawki dla trybu ciemnego --- */
body.dark-mode #skins-modal-tabs-container {
    border-bottom-color: #4a617a;
}
body.dark-mode #skins-modal-tabs-container::after {
    background-color: #5dade2;
}
body.dark-mode #skins-modal-tabs-container .tab-button.active {
    color: #5dade2;
}
body.dark-mode #skins-modal-tabs-container .tab-button:hover {
    color: #cee7ed;
}

/* --- Style dla personalizacji kulek --- */
#ball-style-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ball-style-option {
    display: flex;
    align-items: center;
    padding: 15px;
    border: 2px solid #ddd;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.ball-style-option.selected {
    border-color: #007bff;
    background-color: #e7f1ff;
}

.ball-preview {
    display: flex;      /* KLUCZOWA POPRAWKA: Ustawia kulki w podglądzie poziomo */
    gap: 8px;           /* Dodaje odstęp między kulkami w podglądzie */
    width: 120px;       /* Zachowujemy stałą szerokość dla podglądu */
    flex-shrink: 0;     /* Zapobiegamy kurczeniu się podglądu */
}

.ball-preview .ball {
    width: 30px;
    height: 30px;
}

.ball-style-name {
    font-weight: bold;
    font-size: 1.1em;
}

/* === POCZĄTEK NOWEGO KODU === */
.ball-style-name-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-grow: 1;
    padding-left: 20px;
}

.style-recommendation {
    font-size: 0.8em;
    font-style: italic;
    color: #6c757d;
    margin-top: 4px;
}

body.dark-mode .style-recommendation {
    color: #9ab;
}

.btn-select-ball-style {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-select-ball-style:hover {
    background-color: #0056b3;
}

.ball-style-option.selected .btn-select-ball-style {
    background-color: #28a745;
    cursor: default;
}

/* Poprawki dla trybu ciemnego */
body.dark-mode .ball-style-option {
    border-color: #4a617a;
}
body.dark-mode .ball-style-option.selected {
    background-color: #2c3e50;
    border-color: #5dade2;
}

/* --- Nowa, globalna warstwa rozmycia tła --- */
#global-blur-overlay {
    content: '';
    position: fixed; /* Pozycjonujemy względem okna przeglądarki */
    
    /* === KLUCZOWE ZMIANY === */
    /* 1. Powiększamy element, aby uniknąć krawędzi przy skalowaniu */
    top: -5%;
    left: -5%;
    width: 120%;
    height: 120%;
    
    /* 2. Jawnie definiujemy tło (to samo co w body::before) */
    background-image: url('images/tlo.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* 3. Używamy zwykłego filtra i transformacji */
    filter: blur(10px);
    transform: scale(1.05); /* Lekkie przybliżenie, aby wzmocnić efekt */
    
    z-index: 299; /* Musi być POD modalami, ale NAD resztą */
    
    /* Domyślnie ukryte */
    opacity: 0;
    visibility: hidden;
    
    /* Animacja */
    transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s;
}

#global-blur-overlay.visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease-in-out;
}

body.dark-mode #global-blur-overlay {
    background-image: url('images/tlo-tryb-ciemny.png');
}

/* Nowa, ogólna klasa dla wszystkich ekranów menu */
#main-menu-container,
#size-select-container,
#time-attack-options-container,
#chaos-size-select-container { /* <-- DODANY SELEKTOR */
    position: fixed; /* <-- KLUCZOWA ZMIANA */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 200;
    color: white;
    text-align: center;
}

/* --- Style dla ZABLOKOWANEJ opcji personalizacji --- */

/* Ogólny styl dla zablokowanej opcji */
.ball-style-option.locked {
    filter: grayscale(80%) brightness(0.9); /* Wyszarzenie i lekkie przyciemnienie */
    cursor: not-allowed;
    position: relative; /* Potrzebne do pozycjonowania kłódki */
}

/* Poprawki dla trybu ciemnego */
body.dark-mode .ball-style-option.locked {
    filter: grayscale(80%) brightness(0.6);
}

/* --- Style dla wskaźnika wymaganego poziomu --- */
.level-lock-indicator {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: none;
}

/* Kółko XP w miniaturce */
.level-lock-indicator .mini-xp-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #e0e0e0; /* Tło pod "donutem" */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.level-lock-indicator .mini-xp-circle-inner {
    width: 28px; /* Wewnętrzne kółko, tworzy efekt "donuta" */
    height: 28px;
    background-color: #f8f8f8; /* Tło komórek planszy */
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 1;
}

.level-lock-indicator .mini-xp-level-label {
    font-size: 0.5em;
    font-weight: bold;
    color: #aaa;
}

.level-lock-indicator .mini-xp-level {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
}

/* Ikona kłódki */
.level-lock-indicator .lock-icon {
    font-size: 1.5em; /* Rozmiar emoji kłódki */
    opacity: 0.7;
}


/* --- Poprawki dla trybu ciemnego --- */
body.dark-mode .level-lock-indicator .mini-xp-circle {
    background-color: #4a617a;
}
body.dark-mode .level-lock-indicator .mini-xp-circle-inner {
    background-color: #34495e;
}
body.dark-mode .level-lock-indicator .mini-xp-level {
    color: #ecf0f1;
}

/* --- Nowa animacja potwierdzenia nadpisania --- */
@keyframes save-confirm-flash {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05); /* Lekkie powiększenie */
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Klasa dodawana do przycisku po nadpisaniu */
.btn-save.save-confirmed {
    background-color: #1e7e34; /* Ciemniejszy, potwierdzający zielony */
    animation: save-confirm-flash 0.5s ease-in-out;
    pointer-events: none; /* Wyłączamy klikanie na chwilę, by uniknąć spamu */
}

/* === KOMPLETNE I POPRAWNE STYLE DLA ZAKŁADEK === */

/* --- Kontener zakładek w oknie skórek --- */
#skins-modal-tabs-container {
    position: relative; 
    display: flex;
    border-bottom: 2px solid #eee;
    margin-bottom: 20px;
    margin-top: 20px;
}

/* Wskaźnik aktywnej zakładki (podkreślenie) */
#skins-modal-tabs-container::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: var(--underline-left, 0); 
    width: var(--underline-width, 0);
    height: 3px;  
    background-color: #007bff;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ogólny styl dla przycisku zakładki */
.tab-button {
    padding: 10px 20px;
    cursor: pointer;
    border: none;
    background-color: transparent;
    font-size: 1.1em;
    color: #888;
    transition: color 0.15s ease-in-out;
}

/* Aktywny przycisk */
#skins-modal-tabs-container .tab-button.active {
    color: #007bff;
    font-weight: bold;
}
/* Przycisk po najechaniu */
#skins-modal-tabs-container .tab-button:hover {
    color: #0056b3;
}

/* --- Widoczność paneli z treścią --- */

/* Domyślnie ukrywamy WSZYSTKIE panele */
.tab-content {
    display: none;
}
/* Pokazujemy TYLKO aktywny panel */
.tab-content.active {
    display: block;
    animation: chart-fade-in 0.4s ease-out;
}


/* --- Poprawki dla trybu ciemnego --- */
body.dark-mode #skins-modal-tabs-container {
    border-bottom-color: #4a617a;
}
body.dark-mode #skins-modal-tabs-container::after {
    background-color: #5dade2;
}
body.dark-mode #skins-modal-tabs-container .tab-button {
    color: #bdc3c7;
}
body.dark-mode #skins-modal-tabs-container .tab-button.active {
    color: #5dade2;
}
body.dark-mode #skins-modal-tabs-container .tab-button:hover {
    color: #ecf0f1;
}

/* === KONIEC SEKCJI ZAKŁADEK === */

@keyframes breathe {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* Nowa, dedykowana animacja dla kulek w awatarze, która łączy skalowanie z pozycjonowaniem */
@keyframes avatar-breathe {
  0% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.03); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

/* Klasa dla kontenera, który znika */
.fading-out {
    transition: transform 0.3s ease-in, opacity 0.3s ease-in;
    transform: scale(0.95);
    opacity: 0;
    pointer-events: none; /* Wyłączamy interakcje podczas znikania */
}

/* Klasa dla kontenera, który się pojawia */
.fading-in {
    /* Upewniamy się, że stan początkowy jest ustawiony */
    transform: scale(0.95);
    opacity: 0;
    animation: zoomIn 0.4s 0.2s ease-out forwards; /* Używamy istniejącej animacji z opóźnieniem */
}

/* Stosujemy nową, bezpieczną animację TYLKO do kulek wewnątrz edytora awatara */
body.ball-style-galaxy .avatar-element.ball {
    animation: avatar-breathe 5s ease-in-out infinite alternate !important;
}
body.ball-style-molten .avatar-element.ball {
    animation: avatar-breathe 2s ease-in-out infinite !important;
}

/* NOWA, ŁAGODNIEJSZA I BARDZIEJ WYDAJNA ANIMACJA */
@keyframes big-shake {
    0%, 100% { transform: translate(0, 0); }
    10%, 50%, 90% { transform: translate(-3px, 0); } /* Mniejsze przesunięcie */
    30%, 70% { transform: translate(3px, 0); }
}

/* Dostosowujemy czas trwania i timing function */
.super-line-shake {
    animation: big-shake 0.4s ease-in-out; /* Krótszy czas */
}

.xp-particle {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #ffc107; /* Kolor złota/XP */
    border-radius: 50%;
    z-index: 200; /* Muszą być wysoko */
    pointer-events: none;
    box-shadow: 0 0 8px #ffc107;
    transition: transform 0.8s cubic-bezier(0.5, 0, 1, 0.5), opacity 0.8s ease-out;
}

/* === NOWE STYLE DLA ZAKŁADKI "PERSONALIZACJA KULEK" === */

/* Kontener na całą listę */
#ball-customization-list {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Odstęp między wierszami */
}

/* Pojedynczy wiersz z kolorem kulki */
.ball-customization-option {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border: 2px solid #ddd;
    border-radius: 8px;
    transition: all 0.2s ease;
    cursor: pointer; /* Dodajemy kursor, aby sugerować interaktywność w przyszłości */
}

/* Efekt po najechaniu myszką */
.ball-customization-option:hover {
    border-color: #007bff;
    background-color: #f8f9fa;
}

/* Podgląd kulki w tym widoku */
.ball-customization-option .ball-preview .ball {
    width: 40px;
    height: 40px;
}

/* --- Style dla trybu ciemnego --- */
body.dark-mode .ball-customization-option {
    border-color: #4a617a;
}

body.dark-mode .ball-customization-option:hover {
    border-color: #5dade2;
    background-color: #2c3e50;
}

body.dark-mode .ball-color-name {
    color: #ecf0f1;
}

/* === AKTUALIZACJA STYLÓW DLA ZAKŁADKI "PERSONALIZACJA KULEK" === */

/* Zmieniamy istniejącą regułę, aby nazwa koloru rosła i wypychała przycisk */
.ball-color-name {
    font-weight: bold;
    font-size: 1.1em;
    margin-left: 20px;
    flex-grow: 1; /* KLUCZOWA ZMIANA: ten element rozciągnie się, by wypełnić wolne miejsce */
}

/* Nowe style dla przycisku edycji - teraz to kontener na tekst i ikonę */
.btn-edit-ball-color {
    background-color: #e9ecef;
    border: none;
    border-radius: 8px;
    padding: 8px 15px;
    font-size: 1.2em;
    color: #495057;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.2s ease-in-out;
    flex-shrink: 0;
}

.btn-edit-ball-color:hover {
    background-color: #dee2e6;
}

/* Nowy styl dla tekstu "Edytuj" wewnątrz przycisku */
.edit-ball-text {
    font-size: 0.8em;
    font-weight: 600;
}

/* Styl dla samej ikonki, jeśli potrzebujemy */
.edit-ball-icon {
    line-height: 1;
}


/* --- Style dla trybu ciemnego --- */
body.dark-mode .btn-edit-ball-color {
    background-color: #4a617a;
    color: #ced4da;
}

body.dark-mode .btn-edit-ball-color:hover {
    background-color: #526b84;
}

/* === NOWE STYLE DLA OKNA EDYTORA KULEK === */

/* Ustawiamy wyższy z-index, aby okno było "na wierzchu" */
#ball-editor-modal {
    z-index: 350; 
}

/* Dostosowujemy wygląd zawartości okna */
#ball-editor-modal .modal-content {
    max-width: 350px; /* Okno będzie mniejsze i bardziej zwięzłe */
    padding-top: 40px;
    padding-bottom: 40px;
}

/* Styl dla tytułu (nazwy kulki) */
#ball-editor-title {
    text-align: center;
    font-size: 1.8em;
    margin-top: 0;
    margin-bottom: 30px;
    color: #333;
}

/* Kontener na podgląd kulki, centrujemy go */
#ball-editor-preview-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

/* Duży podgląd edytowanej kulki */
.ball-editor-preview-ball {
    width: 100px;
    height: 100px;
    font-size: 50px;
}

/* --- Style dla trybu ciemnego --- */
body.dark-mode #ball-editor-modal .modal-content {
    background-color: #2c3e50; /* Ciemniejsze tło, zgodne z resztą */
}

body.dark-mode #ball-editor-title {
    color: #ecf0f1;
}

/* === NOWE STYLE DLA KONTROLEK W EDYTORZE KULEK === */

/* Kontener na kontrolki */
#ball-editor-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 25px;
}

/* Wrapper dla inputu, żeby dodać własne obramowanie */
.color-picker-wrapper {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    padding: 5px;
    background-color: #e9ecef;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

/* Właściwy selektor koloru */
#ball-color-picker {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 50%;
    background-color: transparent;
    cursor: pointer;
    padding: 0;
}
/* Ukrycie domyślnego podglądu koloru w Chrome/Edge */
#ball-color-picker::-webkit-color-swatch-wrapper {
    padding: 0;
}
#ball-color-picker::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
}

/* Przycisk resetu */
#ball-editor-reset-btn {
    padding: 10px 20px;
    font-size: 1em;
}

/* --- Style dla trybu ciemnego --- */
body.dark-mode .color-picker-wrapper {
    background-color: #2c3e50;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
}

/* === NOWE STYLE DLA EDYCJI NAZWY KULKI === */

/* Kontener na tytuł i przycisk */
#ball-editor-header {
    display: flex;
    justify-content: center;
    align-items: baseline; /* ZMIANA: Wyrównuje elementy do ich linii bazowej tekstu */
    gap: 15px; /* Odstęp między tytułem a przyciskiem */
    margin-bottom: 30px; /* Zastępuje margines z #ball-editor-title */
}

/* Usuwamy margines z samego tytułu, bo jest już na kontenerze */
#ball-editor-title {
    margin: 0;
}

/* Styl dla nowego przycisku edycji nazwy */
#ball-editor-edit-name-btn {
    background-color: transparent;
    border: none;
    font-size: 1.5em; /* Powiększamy ikonę ołówka */
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    line-height: 1;
    transition: background-color 0.2s ease;
}

#ball-editor-edit-name-btn:hover {
    background-color: #f0f0f0;
}

/* --- Style dla trybu ciemnego --- */
body.dark-mode #ball-editor-edit-name-btn:hover {
    background-color: #4a617a;
}


/* =================================================================== */
/* === OSTATECZNE, POPRAWIONE STYLE DLA WSZYSTKICH KULEK v4 (Z POPRAWKĄ WARSTW) === */
/* =================================================================== */

/* === OSTATECZNE, POPRAWIONE STYLE DLA PODGLĄDU KULEK (FINALNA WERSJA) === */

/* Ta sekcja jest w pełni odizolowana od globalnych stylów na <body>,
   aby zapobiec konfliktom i zapewnić, że podglądy zawsze wyglądają poprawnie. */

/* --- Krok 1: Solidny reset dla rodzica i pseudo-elementów w podglądzie --- */

/* Resetujemy element .ball w podglądzie, aby nie dziedziczył animacji itp. */
.ball-style-option .ball-preview .ball {
    all: unset; /* Agresywny reset */
    /* Przywracamy tylko niezbędne właściwości dla kontenera */
    display: flex;
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

/* Upewniamy się, że ::after (np. litera 'J') nigdy nie pojawi się w podglądzie */
.ball-style-option .ball-preview .ball::after {
    content: none !important;
}

/* Tworzymy i resetujemy ::before, na którym będziemy rysować wygląd kulki */
.ball-style-option .ball-preview .ball::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    border-radius: 50%;
    box-sizing: border-box;
    /* Resetujemy wszystkie potencjalnie odziedziczone właściwości wizualne */
    background: none;
    background-image: none;
    box-shadow: none;
    border: none;
    filter: none;
    animation: none !important;
}

/* --- Krok 2: Definiujemy wygląd dla każdego stylu i koloru w podglądzie osobno --- */

/* Styl: Domyślny */
.ball-style-option[data-style-id="default"] .ball-preview .ball.red::before    { background: radial-gradient(circle at 30% 30%, #ff7b7b, #c00);    box-shadow: inset -3px -3px 8px rgba(0,0,0,0.3); }
.ball-style-option[data-style-id="default"] .ball-preview .ball.green::before  { background: radial-gradient(circle at 30% 30%, #7bff7b, #090);    box-shadow: inset -3px -3px 8px rgba(0,0,0,0.3); }
.ball-style-option[data-style-id="default"] .ball-preview .ball.blue::before   { background: radial-gradient(circle at 30% 30%, #7b7bff, #00c);    box-shadow: inset -3px -3px 8px rgba(0,0,0,0.3); }
.ball-style-option[data-style-id="default"] .ball-preview .ball.yellow::before { background: radial-gradient(circle at 30% 30%, #ffff7b, #c3c300); box-shadow: inset -3px -3px 8px rgba(0,0,0,0.3); }
.ball-style-option[data-style-id="default"] .ball-preview .ball.fuchsia::before{ background: radial-gradient(circle at 30% 30%, #ff7bff, #c0c);    box-shadow: inset -3px -3px 8px rgba(0,0,0,0.3); }
.ball-style-option[data-style-id="default"] .ball-preview .ball.cyan::before   { background: radial-gradient(circle at 30% 30%, #7bffff, #0cc);    box-shadow: inset -3px -3px 8px rgba(0,0,0,0.3); }
.ball-style-option[data-style-id="default"] .ball-preview .ball.orange::before { background: radial-gradient(circle at 30% 30%, #ffc87b, #e69500); box-shadow: inset -3px -3px 8px rgba(0,0,0,0.3); }


/* Styl: Błyszczący */
.ball-style-option[data-style-id="glossy"] .ball-preview .ball.red::before    { background: radial-gradient(circle at 50% 35%, white, rgba(255,255,255,0) 40%), #c00; box-shadow: inset -3px -3px 8px rgba(0,0,0,0.3); }
.ball-style-option[data-style-id="glossy"] .ball-preview .ball.green::before  { background: radial-gradient(circle at 50% 35%, white, rgba(255,255,255,0) 40%), #090; box-shadow: inset -3px -3px 8px rgba(0,0,0,0.3); }
.ball-style-option[data-style-id="glossy"] .ball-preview .ball.blue::before   { background: radial-gradient(circle at 50% 35%, white, rgba(255,255,255,0) 40%), #00c; box-shadow: inset -3px -3px 8px rgba(0,0,0,0.3); }

/* Styl: Płaski */
.ball-style-option[data-style-id="flat"] .ball-preview .ball.red::before    { background: #e74c3c; box-shadow: inset 0 0 0 4px #c0392b; }
.ball-style-option[data-style-id="flat"] .ball-preview .ball.green::before  { background: #2ecc71; box-shadow: inset 0 0 0 4px #27ae60; }
.ball-style-option[data-style-id="flat"] .ball-preview .ball.blue::before   { background: #3498db; box-shadow: inset 0 0 0 4px #2980b9; }

/* Styl: Neonowy */
.ball-style-option[data-style-id="neon"] .ball-preview .ball.red::before    { background-color: #111; background-image: repeating-linear-gradient(to bottom, transparent, transparent 4px, #6d0000 5px), repeating-linear-gradient(to right, transparent, transparent 4px, #6d0000 5px); box-shadow: inset 0 0 2px #fff, inset 0 0 6px #ff1b1b, 0 0 10px #ff1b1b; }
.ball-style-option[data-style-id="neon"] .ball-preview .ball.green::before  { background-color: #111; background-image: repeating-linear-gradient(to bottom, transparent, transparent 4px, #005a00 5px), repeating-linear-gradient(to right, transparent, transparent 4px, #005a00 5px); box-shadow: inset 0 0 2px #fff, inset 0 0 6px #1bff1b, 0 0 10px #1bff1b; }
.ball-style-option[data-style-id="neon"] .ball-preview .ball.blue::before   { background-color: #111; background-image: repeating-linear-gradient(to bottom, transparent, transparent 4px, #00437a 5px), repeating-linear-gradient(to right, transparent, transparent 4px, #00437a 5px); box-shadow: inset 0 0 2px #fff, inset 0 0 6px #1b9bff, 0 0 10px #1b9bff; }

/* Styl: Kryształowy */
.ball-style-option[data-style-id="crystal"] .ball-preview .ball.red::before    { background: radial-gradient(circle at 65% 15%, white 1px, rgba(255,255,255,0.4) 4%, rgba(255,255,255,0) 25%), radial-gradient(circle at 35% 80%, rgba(255,255,255,0.2) 5%, rgba(255,255,255,0) 30%), radial-gradient(circle at 50% 50%, #ff7b7b 30%, #c00 100%); filter: drop-shadow(0 0 3px #ff7b7b); }
.ball-style-option[data-style-id="crystal"] .ball-preview .ball.green::before  { background: radial-gradient(circle at 65% 15%, white 1px, rgba(255,255,255,0.4) 4%, rgba(255,255,255,0) 25%), radial-gradient(circle at 35% 80%, rgba(255,255,255,0.2) 5%, rgba(255,255,255,0) 30%), radial-gradient(circle at 50% 50%, #7bff7b 30%, #090 100%); filter: drop-shadow(0 0 3px #7bff7b); }
.ball-style-option[data-style-id="crystal"] .ball-preview .ball.blue::before   { background: radial-gradient(circle at 65% 15%, white 1px, rgba(255,255,255,0.4) 4%, rgba(255,255,255,0) 25%), radial-gradient(circle at 35% 80%, rgba(255,255,255,0.2) 5%, rgba(255,255,255,0) 30%), radial-gradient(circle at 50% 50%, #7b7bff 30%, #00c 100%); filter: drop-shadow(0 0 3px #7b7bff); }

/* Styl: Metaliczny */
.ball-style-option[data-style-id="metallic"] .ball-preview .ball.red::before    { background: radial-gradient(circle at 70% 25%, white, rgba(255,255,255,0) 35%), linear-gradient(to top, #a00, #ff8a8a 50%, #a00); box-shadow: inset 0 0 1px 1px rgba(0,0,0,0.2), 0 0 2px rgba(0,0,0,0.3); border: 2px solid #600; }
.ball-style-option[data-style-id="metallic"] .ball-preview .ball.green::before  { background: radial-gradient(circle at 70% 25%, white, rgba(255,255,255,0) 35%), linear-gradient(to top, #070, #8aff8a 50%, #070); box-shadow: inset 0 0 1px 1px rgba(0,0,0,0.2), 0 0 2px rgba(0,0,0,0.3); border: 2px solid #040; }
.ball-style-option[data-style-id="metallic"] .ball-preview .ball.blue::before   { background: radial-gradient(circle at 70% 25%, white, rgba(255,255,255,0) 35%), linear-gradient(to top, #00a, #8a8aff 50%, #00a); box-shadow: inset 0 0 1px 1px rgba(0,0,0,0.2), 0 0 2px rgba(0,0,0,0.3); border: 2px solid #006; }

/* Styl: Kreskówkowy */
.ball-style-option[data-style-id="cartoon"] .ball-preview .ball.red::before    { background: #e74c3c; box-shadow: inset 3px -3px 0px #ff7668, inset -3px 3px 0px #c0392b; border: 3px solid #111; }
.ball-style-option[data-style-id="cartoon"] .ball-preview .ball.green::before  { background: #2ecc71; box-shadow: inset 3px -3px 0px #5dfb95, inset -3px 3px 0px #27ae60; border: 3px solid #111; }
.ball-style-option[data-style-id="cartoon"] .ball-preview .ball.blue::before   { background: #3498db; box-shadow: inset 3px -3px 0px #62b3ed, inset -3px 3px 0px #2980b9; border: 3px solid #111; }

/* Styl: Galaktyczny */
.ball-style-option[data-style-id="galaxy"] .ball-preview .ball.red::before    { background: radial-gradient(1px 1px at 20% 80%, white, transparent), radial-gradient(1px 1px at 70% 30%, white, transparent), radial-gradient(2px 2px at 50% 50%, white, transparent), radial-gradient(circle at 10% 20%, #ff4d4d88 0%, transparent 40%), radial-gradient(circle at 85% 60%, #ff9a9a88 0%, transparent 50%), #101025; background-blend-mode: screen, screen, screen, screen, screen, normal; border: 1px solid rgba(255,255,255,0.2); }
.ball-style-option[data-style-id="galaxy"] .ball-preview .ball.green::before  { background: radial-gradient(1px 1px at 20% 80%, white, transparent), radial-gradient(1px 1px at 70% 30%, white, transparent), radial-gradient(2px 2px at 50% 50%, white, transparent), radial-gradient(circle at 10% 20%, #4dff4d88 0%, transparent 40%), radial-gradient(circle at 85% 60%, #9aff9a88 0%, transparent 50%), #101025; background-blend-mode: screen, screen, screen, screen, screen, normal; border: 1px solid rgba(255,255,255,0.2); }
.ball-style-option[data-style-id="galaxy"] .ball-preview .ball.blue::before   { background: radial-gradient(1px 1px at 20% 80%, white, transparent), radial-gradient(1px 1px at 70% 30%, white, transparent), radial-gradient(2px 2px at 50% 50%, white, transparent), radial-gradient(circle at 10% 20%, #4d4dff88 0%, transparent 40%), radial-gradient(circle at 85% 60%, #9a9aff88 0%, transparent 50%), #101025; background-blend-mode: screen, screen, screen, screen, screen, normal; border: 1px solid rgba(255,255,255,0.2); }

/* Styl: Świecący */
.ball-style-option[data-style-id="molten"] .ball-preview .ball.red::before    { background: radial-gradient(circle at 50% 50%, #ffdd00, #ff4800); filter: drop-shadow(0 0 6px #ff4800); }
.ball-style-option[data-style-id="molten"] .ball-preview .ball.green::before  { background: radial-gradient(circle at 50% 50%, #f0ffcc, #7fff00); filter: drop-shadow(0 0 6px #7fff00); }
.ball-style-option[data-style-id="molten"] .ball-preview .ball.blue::before   { background: radial-gradient(circle at 50% 50%, #ccf8ff, #00bfff); filter: drop-shadow(0 0 6px #00bfff); }

/* Styl: Klejnot */
.ball-style-option[data-style-id="gemstone"] .ball-preview .ball.red::before    { background: linear-gradient(115deg, transparent 75%, #ffbaba 75%), linear-gradient(245deg, transparent 75%, #a00 75%), radial-gradient(circle at 50% 50%, #ff7b7b, #c00); border: 1px solid #c00; }
.ball-style-option[data-style-id="gemstone"] .ball-preview .ball.green::before  { background: linear-gradient(115deg, transparent 75%, #baffba 75%), linear-gradient(245deg, transparent 75%, #070 75%), radial-gradient(circle at 50% 50%, #7bff7b, #090); border: 1px solid #090; }
.ball-style-option[data-style-id="gemstone"] .ball-preview .ball.blue::before   { background: linear-gradient(115deg, transparent 75%, #babaff 75%), linear-gradient(245deg, transparent 75%, #00a 75%), radial-gradient(circle at 50% 50%, #7b7bff, #00c); border: 1px solid #00c; }

/* Styl: Holograficzny */
.ball-style-option[data-style-id="holographic"] .ball-preview .ball.red::before    { background: linear-gradient(rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 100%), repeating-linear-gradient(0deg, rgba(255,255,255,0.1) 0, rgba(255,255,255,0.1) 1px, transparent 1px, transparent 4px), linear-gradient(135deg, #ff7f7f55 0%, #7fffff55 50%, #ff7fff55 100%); background-size: 100%, 100%, 200% 200%; border: 1px solid rgba(255,255,255,0.2); animation: holographic-flicker 4s linear infinite; }
.ball-style-option[data-style-id="holographic"] .ball-preview .ball.green::before  { background: linear-gradient(rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 100%), repeating-linear-gradient(0deg, rgba(255,255,255,0.1) 0, rgba(255,255,255,0.1) 1px, transparent 1px, transparent 4px), linear-gradient(135deg, #7fff7f55 0%, #ff7fff55 50%, #7fffff55 100%); background-size: 100%, 100%, 200% 200%; border: 1px solid rgba(255,255,255,0.2); animation: holographic-flicker 4s linear infinite; }
.ball-style-option[data-style-id="holographic"] .ball-preview .ball.blue::before   { background: linear-gradient(rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 100%), repeating-linear-gradient(0deg, rgba(255,255,255,0.1) 0, rgba(255,255,255,0.1) 1px, transparent 1px, transparent 4px), linear-gradient(135deg, #7f7fff55 0%, #ffff7f55 50%, #ff7fff55 100%); background-size: 100%, 100%, 200% 200%; border: 1px solid rgba(255,255,255,0.2); animation: holographic-flicker 4s linear infinite; }

/* 
   SEKCJA 1: CAŁKOWICIE NIEZALEŻNE I ODPORNE STYLE DLA PODGLĄDU W MENU 
*/

/* --- WSPÓLNY, SOLIDNY RESET DLA WSZYSTKICH PODGLĄDÓW --- */

/* Resetujemy TYLKO ::after, aby ukryć np. literę "J" Jokera w podglądzie */
.ball-style-option .ball-preview .ball::after {
    content: none !important;
}

/* Upewniamy się, że ::before ZAWSZE istnieje w podglądzie, aby można było na nim rysować style */
.ball-style-option .ball-preview .ball::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    border-radius: 50%;
    box-sizing: border-box;
}

.ball-style-option .ball-preview .ball {
    background: transparent; /* Kulka-rodzic jest teraz przezroczysta */
    box-shadow: none; border: none; filter: none;
    animation: none !important;
    position: relative; overflow: hidden;
}

/* --- Podglądy stylów - teraz style są na ::before --- */
.ball-style-option[data-style-id="default"] .ball-preview .ball::before {
    background: radial-gradient(circle at 30% 30%, var(--ball-highlight-color), var(--ball-base-color));
    box-shadow: inset -3px -3px 8px rgba(0,0,0,0.3);
}
.ball-style-option[data-style-id="glossy"] .ball-preview .ball::before {
    background: radial-gradient(circle at 50% 35%, white, rgba(255,255,255,0) 40%), var(--ball-base-color);
    box-shadow: inset -3px -3px 8px rgba(0,0,0,0.3);
}
.ball-style-option[data-style-id="flat"] .ball-preview .ball::before {
    background: var(--ball-base-color);
    box-shadow: inset 0 0 0 4px var(--flat-border-color);
}
.ball-style-option[data-style-id="neon"] .ball-preview .ball::before {
    background-color: #111;
    background-image: repeating-linear-gradient(to bottom, transparent, transparent 4px, var(--grid-color) 5px), repeating-linear-gradient(to right, transparent, transparent 4px, var(--grid-color) 5px);
    box-shadow: inset 0 0 2px #fff, inset 0 0 6px var(--neon-color), 0 0 10px var(--neon-color);
}
.ball-style-option[data-style-id="crystal"] .ball-preview .ball::before {
    background: radial-gradient(circle at 65% 15%, white 1px, rgba(255,255,255,0.4) 4%, rgba(255,255,255,0) 25%), radial-gradient(circle at 35% 80%, rgba(255,255,255,0.2) 5%, rgba(255,255,255,0) 30%), radial-gradient(circle at 50% 50%, var(--ball-highlight-color) 30%, var(--ball-base-color) 100%);
    filter: drop-shadow(0 0 3px var(--ball-highlight-color));
}
.ball-style-option[data-style-id="metallic"] .ball-preview .ball::before {
    background: radial-gradient(circle at 70% 25%, white, rgba(255,255,255,0) 35%), linear-gradient(to top, var(--metallic-dark), var(--metallic-light) 50%, var(--metallic-dark));
    box-shadow: inset 0 0 1px 1px rgba(0,0,0,0.2), 0 0 2px rgba(0,0,0,0.3);
    border: 2px solid var(--metallic-border);
}
.ball-style-option[data-style-id="pixel"] .ball-preview .ball::before {
    background: var(--pixel-base);
    box-shadow: inset 3px -3px 0px var(--pixel-light), inset -3px 3px 0px var(--pixel-dark);
    border: 3px solid #111;
}
.ball-style-option[data-style-id="galaxy"] .ball-preview .ball::before {
    background: radial-gradient(1px 1px at 20% 80%, white, transparent), radial-gradient(1px 1px at 70% 30%, white, transparent), radial-gradient(2px 2px at 50% 50%, white, transparent), radial-gradient(circle at 10% 20%, var(--galaxy-color1) 0%, transparent 40%), radial-gradient(circle at 85% 60%, var(--galaxy-color2) 0%, transparent 50%), #101025;
    background-blend-mode: screen, screen, screen, screen, screen, normal;
    border: 1px solid rgba(255,255,255,0.2);
}
.ball-style-option[data-style-id="molten"] .ball-preview .ball::before {
    background: radial-gradient(circle at 50% 50%, var(--molten-highlight), var(--molten-glow));
    filter: drop-shadow(0 0 6px var(--molten-glow));
}
.ball-style-option[data-style-id="gemstone"] .ball-preview .ball::before {
    background: linear-gradient(115deg, transparent 75%, var(--gem-facet1) 75%), linear-gradient(245deg, transparent 75%, var(--gem-facet2) 75%), radial-gradient(circle at 50% 50%, var(--gem-light), var(--gem-dark));
    border: 1px solid var(--gem-dark);
}
.ball-style-option[data-style-id="holographic"] .ball-preview .ball::before {
    background: linear-gradient(rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 100%), repeating-linear-gradient(0deg, var(--holo-line-color) 0, var(--holo-line-color) 1px, transparent 1px, transparent 4px), linear-gradient(135deg, var(--holo-color1) 0%, var(--holo-color2) 50%, var(--holo-color3) 100%);
    background-size: 100%, 100%, 200% 200%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    animation: holographic-flicker 4s linear infinite;
}

/* 
   SEKCJA 2: GLOBALNE STYLE DLA GRY (PLANSZA, PERSONALIZACJA)
*/

/* Bazowy styl kulki - teraz to tylko kontener */
.ball {
    position: relative;
    z-index: 1; /* Ważne dla kontekstu nakładania */
    display: flex; justify-content: center; align-items: center; 
    width: 80%; height: 80%; border-radius: 50%; 
    transition: transform 0.3s ease-out, top 0.1s linear, left 0.1s linear;
    background: transparent; /* KLUCZOWA ZMIANA: Kontener jest przezroczysty */
    border: none; filter: none;
}

/* KLUCZOWA NOWA REGUŁA: "Sztuczne tło" dla WSZYSTKICH kulek */
.ball::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    border-radius: 50%;
    z-index: 0; /* Tło jest na warstwie 0 */
    box-sizing: border-box; /* Ważne, jeśli dodajemy border */
}

/* Domyślny wygląd "sztucznego tła" */
.ball::before {
    background: radial-gradient(circle at 30% 30%, var(--ball-highlight-color), var(--ball-base-color));
    box-shadow: inset -3px -3px 8px rgba(0,0,0,0.3);
}

/* Nadpisanie "sztucznego tła" wybranym motywem */
body.ball-style-glossy .ball::before  { background: radial-gradient(circle at 50% 35%, white, rgba(255,255,255,0) 40%), var(--ball-base-color); }
body.ball-style-flat .ball::before    { background: var(--ball-base-color); box-shadow: inset 0 0 0 4px var(--flat-border-color); }
body.ball-style-neon .ball::before    { background-color: #111; background-image: repeating-linear-gradient(to bottom, transparent, transparent 4px, var(--grid-color) 5px), repeating-linear-gradient(to right, transparent, transparent 4px, var(--grid-color) 5px); box-shadow: inset 0 0 2px #fff, inset 0 0 6px var(--neon-color), 0 0 10px var(--neon-color); }
body.ball-style-crystal .ball::before { background: radial-gradient(circle at 65% 15%, white 1px, rgba(255,255,255,0.4) 4%, rgba(255,255,255,0) 25%), radial-gradient(circle at 35% 80%, rgba(255,255,255,0.2) 5%, rgba(255,255,255,0) 30%), radial-gradient(circle at 50% 50%, var(--ball-highlight-color) 30%, var(--ball-base-color) 100%); filter: drop-shadow(0 0 3px var(--ball-highlight-color)); box-shadow: none; }
body.ball-style-metallic .ball::before{ background: radial-gradient(circle at 70% 25%, white, rgba(255,255,255,0) 35%), linear-gradient(to top, var(--metallic-dark), var(--metallic-light) 50%, var(--metallic-dark)); box-shadow: inset 0 0 1px 1px rgba(0,0,0,0.2), 0 0 2px rgba(0,0,0,0.3); border: 2px solid var(--metallic-border); }
body.ball-style-cartoon .ball::before   { background: var(--cartoon-base); box-shadow: inset 3px -3px 0px var(--cartoon-light), inset -3px 3px 0px var(--cartoon-dark); border: 3px solid #111; }
/* === POCZĄTEK POPRAWKI === */
body.ball-style-galaxy .ball::before  { background: radial-gradient(1px 1px at 20% 80%, white, transparent), radial-gradient(1px 1px at 70% 30%, white, transparent), radial-gradient(2px 2px at 50% 50%, white, transparent), radial-gradient(circle at 10% 20%, var(--galaxy-color1) 0%, transparent 40%), radial-gradient(circle at 85% 60%, var(--galaxy-color2) 0%, transparent 50%), #101025; background-blend-mode: screen, screen, screen, screen, screen, normal; box-shadow: none; border: 1px solid rgba(255,255,255,0.2); }
body.ball-style-molten .ball::before { background: radial-gradient(circle at 50% 50%, var(--molten-highlight), var(--molten-glow)); box-shadow: none; border: none; filter: drop-shadow(0 0 6px var(--molten-glow)); }
/* === KONIEC POPRAWKI === */
body.ball-style-gemstone .ball::before{ background: linear-gradient(115deg, transparent 75%, var(--gem-facet1) 75%), linear-gradient(245deg, transparent 75%, var(--gem-facet2) 75%), radial-gradient(circle at 50% 50%, var(--gem-light), var(--gem-dark)); box-shadow: none; border: 1px solid var(--gem-dark); }
body.ball-style-holographic .ball::before { background: linear-gradient(rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 100%), repeating-linear-gradient(0deg, var(--holo-line-color) 0, var(--holo-line-color) 1px, transparent 1px, transparent 4px), linear-gradient(135deg, var(--holo-color1) 0%, var(--holo-color2) 50%, var(--holo-color3) 100%); background-size: 100%, 100%, 200% 200%; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: none; filter: drop-shadow(0 0 2px var(--holo-color2)); }

/* === POCZĄTEK ZMIAN === */
/* Animacje dla kulki-rodzica - teraz działają tylko na kulkach, które nie są w trakcie innej animacji (np. pojawiania się) */
body.ball-style-galaxy .ball:not(.ball-appear):not(.next-ball-appear):not(.selected):not(.shake-error):not(.ball-moving):not(.ball-removing) {
    animation: breathe 5s ease-in-out infinite alternate;
}
body.ball-style-molten .ball:not(.ball-appear):not(.next-ball-appear):not(.selected):not(.shake-error):not(.ball-moving):not(.ball-removing) {
    animation: breathe 2s ease-in-out infinite;
}
body.ball-style-holographic .ball:not(.ball-appear):not(.next-ball-appear):not(.selected):not(.shake-error):not(.ball-moving):not(.ball-removing) {
    animation: holographic-flicker 4s linear infinite;
}
/* Stosujemy nową, bezpieczną animację TYLKO do kulek wewnątrz edytora awatara */
body.ball-style-galaxy .avatar-element.ball {
    animation: avatar-breathe 5s ease-in-out infinite alternate !important;
}
body.ball-style-molten .avatar-element.ball {
    animation: avatar-breathe 2s ease-in-out infinite !important;
}
/* === KONIEC ZMIAN === */

/* 
   SEKCJA 3: GLOBALNE DEFINICJE ZMIENNYCH KOLORÓW DLA GLOBALNYCH STYLÓW
*/

/* Kolory bazowe (Domyślny, Błyszczący, Kryształowy) */
.ball.red    { --ball-base-color: #c00;    --ball-highlight-color: #ff7b7b; }
.ball.green  { --ball-base-color: #090;    --ball-highlight-color: #7bff7b; }
.ball.blue   { --ball-base-color: #00c;    --ball-highlight-color: #7b7bff; }
.ball.yellow { --ball-base-color: #c3c300; --ball-highlight-color: #ffff7b; }
.ball.fuchsia{ --ball-base-color: #c0c;    --ball-highlight-color: #ff7bff; }
.ball.cyan   { --ball-base-color: #0cc;    --ball-highlight-color: #7bffff; }
.ball.orange { --ball-base-color: #e69500; --ball-highlight-color: #ffc87b; }

/* Kolory dla "Płaskiego" */
body.ball-style-flat .ball.red    { --ball-base-color: #e74c3c; --flat-border-color: #c0392b; }
body.ball-style-flat .ball.green  { --ball-base-color: #2ecc71; --flat-border-color: #27ae60; }
body.ball-style-flat .ball.blue   { --ball-base-color: #3498db; --flat-border-color: #2980b9; }
body.ball-style-flat .ball.yellow { --ball-base-color: #f1c40f; --flat-border-color: #f39c12; }
body.ball-style-flat .ball.fuchsia{ --ball-base-color: #9b59b6; --flat-border-color: #8e44ad; }
body.ball-style-flat .ball.cyan   { --ball-base-color: #1abc9c; --flat-border-color: #16a085; }
body.ball-style-flat .ball.orange { --ball-base-color: #e67e22; --flat-border-color: #d35400; }

/* Kolory dla "Neonowego" */
body.ball-style-neon .ball { --neon-color: var(--ball-base-color); --grid-color: var(--flat-border-color, #333); }
body.ball-style-neon .ball.red    { --neon-color: #ff1b1b; --grid-color: #6d0000; }
body.ball-style-neon .ball.green  { --neon-color: #1bff1b; --grid-color: #005a00; }
body.ball-style-neon .ball.blue   { --neon-color: #1b9bff; --grid-color: #00437a; }
body.ball-style-neon .ball.yellow { --neon-color: #ffff1b; --grid-color: #6e6e00; }
body.ball-style-neon .ball.fuchsia{ --neon-color: #ff1bff; --grid-color: #700070; }
body.ball-style-neon .ball.cyan   { --neon-color: #1bffff; --grid-color: #007070; }
body.ball-style-neon .ball.orange { --neon-color: #ff8c1b; --grid-color: #7a4100; }

/* Kolory dla "Metalicznego" */
body.ball-style-metallic .ball.red    { --metallic-light: #ff8a8a; --metallic-dark: #a00; --metallic-border: #600; }
body.ball-style-metallic .ball.green  { --metallic-light: #8aff8a; --metallic-dark: #070; --metallic-border: #040; }
body.ball-style-metallic .ball.blue   { --metallic-light: #8a8aff; --metallic-dark: #00a; --metallic-border: #006; }
body.ball-style-metallic .ball.yellow { --metallic-light: #ffff8a; --metallic-dark: #a0a000; --metallic-border: #606000; }
body.ball-style-metallic .ball.fuchsia{ --metallic-light: #ff8aff; --metallic-dark: #a0a; --metallic-border: #606; }
body.ball-style-metallic .ball.cyan   { --metallic-light: #8affff; --metallic-dark: #0aa; --metallic-border: #066; }
body.ball-style-metallic .ball.orange { --metallic-light: #ffd18a; --metallic-dark: #b87a00; --metallic-border: #754c00; }

/* Kolory dla "Pikselowego" */
body.ball-style-pixel .ball.red    { --pixel-base: #e74c3c; --pixel-light: #ff7668; --pixel-dark: #c0392b; }
body.ball-style-pixel .ball.green  { --pixel-base: #2ecc71; --pixel-light: #5dfb95; --pixel-dark: #27ae60; }
body.ball-style-pixel .ball.blue   { --pixel-base: #3498db; --pixel-light: #62b3ed; --pixel-dark: #2980b9; }
body.ball-style-pixel .ball.yellow { --pixel-base: #f1c40f; --pixel-light: #ffdf58; --pixel-dark: #f39c12; }
body.ball-style-pixel .ball.fuchsia{ --pixel-base: #9b59b6; --pixel-light: #c284da; --pixel-dark: #8e44ad; }
body.ball-style-pixel .ball.cyan   { --pixel-base: #1abc9c; --pixel-light: #48d9b9; --pixel-dark: #16a085; }
body.ball-style-pixel .ball.orange { --pixel-base: #e67e22; --pixel-light: #ff9d4f; --pixel-dark: #d35400; }

/* Kolory dla "Kreskówkowego" */
body.ball-style-cartoon .ball.red    { --cartoon-base: #e74c3c; --cartoon-light: #ff7668; --cartoon-dark: #c0392b; }
body.ball-style-cartoon .ball.green  { --cartoon-base: #2ecc71; --cartoon-light: #5dfb95; --cartoon-dark: #27ae60; }
body.ball-style-cartoon .ball.blue   { --cartoon-base: #3498db; --cartoon-light: #62b3ed; --cartoon-dark: #2980b9; }
body.ball-style-cartoon .ball.yellow { --cartoon-base: #f1c40f; --cartoon-light: #ffdf58; --cartoon-dark: #f39c12; }
body.ball-style-cartoon .ball.fuchsia{ --cartoon-base: #9b59b6; --cartoon-light: #c284da; --cartoon-dark: #8e44ad; }
body.ball-style-cartoon .ball.cyan   { --cartoon-base: #1abc9c; --cartoon-light: #48d9b9; --cartoon-dark: #16a085; }
body.ball-style-cartoon .ball.orange { --cartoon-base: #e67e22; --cartoon-light: #ff9d4f; --cartoon-dark: #d35400; }

/* Kolory dla "Galaktycznego" */
body.ball-style-galaxy .ball.red    { --galaxy-color1: #ff4d4d88; --galaxy-color2: #ff9a9a88; }
body.ball-style-galaxy .ball.green  { --galaxy-color1: #4dff4d88; --galaxy-color2: #9aff9a88; }
body.ball-style-galaxy .ball.blue   { --galaxy-color1: #4d4dff88; --galaxy-color2: #9a9aff88; }
body.ball-style-galaxy .ball.yellow { --galaxy-color1: #ffff4d88; --galaxy-color2: #ffff9a88; }
body.ball-style-galaxy .ball.fuchsia{ --galaxy-color1: #ff4dff88; --galaxy-color2: #ff9aff88; }
body.ball-style-galaxy .ball.cyan   { --galaxy-color1: #4dffff88; --galaxy-color2: #9affff88; }
body.ball-style-galaxy .ball.orange { --galaxy-color1: #ffb84d88; --galaxy-color2: #ffd19a88; }

/* Kolory dla "Lawa" */
body.ball-style-molten .ball.red    { --molten-glow: #ff4800; --molten-highlight: #ffdd00; }
body.ball-style-molten .ball.green  { --molten-glow: #7fff00; --molten-highlight: #f0ffcc; }
body.ball-style-molten .ball.blue   { --molten-glow: #00bfff; --molten-highlight: #ccf8ff; }
body.ball-style-molten .ball.yellow { --molten-glow: #ffd700; --molten-highlight: #ffffe0; }
body.ball-style-molten .ball.fuchsia{ --molten-glow: #ff00ff; --molten-highlight: #ffccff; }
body.ball-style-molten .ball.cyan   { --molten-glow: #00ffff; --molten-highlight: #ccffff; }
body.ball-style-molten .ball.orange { --molten-glow: #ff8c00; --molten-highlight: #ffe0cc; }

/* Kolory dla "Klejnot" */
body.ball-style-gemstone .ball.red    { --gem-light: #ff7b7b; --gem-dark: #c00; --gem-facet1: #ffbaba; --gem-facet2: #a00; }
body.ball-style-gemstone .ball.green  { --gem-light: #7bff7b; --gem-dark: #090; --gem-facet1: #baffba; --gem-facet2: #070; }
body.ball-style-gemstone .ball.blue   { --gem-light: #7b7bff; --gem-dark: #00c; --gem-facet1: #babaff; --gem-facet2: #00a; }
body.ball-style-gemstone .ball.yellow { --gem-light: #ffff7b; --gem-dark: #c3c300; --gem-facet1: #ffffba; --gem-facet2: #a0a000; }
body.ball-style-gemstone .ball.fuchsia{ --gem-light: #ff7bff; --gem-dark: #c0c; --gem-facet1: #ffbaff; --gem-facet2: #a0a; }
body.ball-style-gemstone .ball.cyan   { --gem-light: #7bffff; --gem-dark: #0cc; --gem-facet1: #baffff; --gem-facet2: #0aa; }
body.ball-style-gemstone .ball.orange { --gem-light: #ffc87b; --gem-dark: #e69500; --gem-facet1: #ffe4ba; --gem-facet2: #b87a00; }

/* Kolory dla "Holograficznego" */
body.ball-style-holographic .ball { --holo-line-color: rgba(255,255,255,0.1); }
body.ball-style-holographic .ball.red    { --holo-color1: #ff7f7f55; --holo-color2: #7fffff55; --holo-color3: #ff7fff55; }
body.ball-style-holographic .ball.green  { --holo-color1: #7fff7f55; --holo-color2: #ff7fff55; --holo-color3: #7fffff55; }
body.ball-style-holographic .ball.blue   { --holo-color1: #7f7fff55; --holo-color2: #ffff7f55; --holo-color3: #ff7fff55; }
body.ball-style-holographic .ball.yellow { --holo-color1: #ffff7f55; --holo-color2: #7fff7f55; --holo-color3: #7fffff55; }
body.ball-style-holographic .ball.fuchsia{ --holo-color1: #ff7fff55; --holo-color2: #7f7fff55; --holo-color3: #ffff7f55; }
body.ball-style-holographic .ball.cyan   { --holo-color1: #7fffff55; --holo-color2: #ff7f7f55; --holo-color3: #7fff7f55; }
body.ball-style-holographic .ball.orange { --holo-color1: #ffbf7f55; --holo-color2: #7fffbf55; --holo-color3: #bf7fff55; }

/* Dodatkowa poprawka dla podglądu w sklepie (potrzebne, aby nadpisać globalne animacje) */
.shop-item-preview .ball-style-option .ball {
    animation: none !important; /* Wyłącza animację tylko w podglądzie sklepu */
}

/* === OSTATECZNA, DZIAŁAJĄCA POPRAWKA: Pełna definicja stylu dla podglądu w edytorze === */
/* Ta sekcja gwarantuje, że podgląd w edytorze ZAWSZE wygląda jak styl "Domyślny"
   i jest w 100% niezależny od globalnie wybranego stylu kulki. */

/* 1. Definiujemy niezmienny, "domyślny" WYGLĄD kulki w edytorze, włącznie z WYMIARAMI. */
.ball-editor-preview-ball {
    /* KLUCZOWE BRAKUJĄCE WŁAŚCIWOŚCI: */
    width: 100px;
    height: 100px;
    font-size: 50px; /* Dla prawidłowego rozmiaru emoji */

    /* Właściwości potrzebne do bycia "kulką" i kontenerem: */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;

    /* Reszta właściwości resetujących i stylujących: */
    background: radial-gradient(circle at 30% 30%, var(--ball-highlight-color), var(--ball-base-color));
    box-shadow: inset -3px -3px 8px rgba(0,0,0,0.3);
    border: none;
    filter: none;
    animation: none !important;
    background-blend-mode: normal;
}

/* 2. Definiujemy KOLORY dla kulki w edytorze. */
.ball-editor-preview-ball.red    { --ball-base-color: #c00;    --ball-highlight-color: #ff7b7b; }
.ball-editor-preview-ball.green  { --ball-base-color: #090;    --ball-highlight-color: #7bff7b; }
.ball-editor-preview-ball.blue   { --ball-base-color: #00c;    --ball-highlight-color: #7b7bff; }
.ball-editor-preview-ball.yellow { --ball-base-color: #c3c300; --ball-highlight-color: #ffff7b; }
.ball-editor-preview-ball.fuchsia{ --ball-base-color: #c0c;    --ball-highlight-color: #ff7bff; }
.ball-editor-preview-ball.cyan   { --ball-base-color: #0cc;    --ball-highlight-color: #7bffff; }
.ball-editor-preview-ball.orange { --ball-base-color: #e69500; --ball-highlight-color: #ffc87b; }

/* === POZOSTAŁE STYLE (BEZ ZMIAN) === */
#stats-content-container .stats-section {
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

#stats-content-container .stats-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

#stats-content-container .stats-section h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #007bff;
}

.stats-grid {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Pierwsza kolumna szersza */
    gap: 10px 20px;
    font-size: 1.05em;
}

.stats-grid span:nth-child(odd) {
    color: #555; /* Kolor dla etykiet */
    text-align: left;
}

.stats-grid span:nth-child(even) {
    font-weight: bold; /* Pogrubienie dla wartości */
    text-align: right;
}

.fav-color-stat {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Wyrównaj do prawej */
    gap: 8px;
}

.fav-color-stat .ball-icon {
    width: 20px;
    height: 20px;
}

/* Poprawki dla trybu ciemnego */
body.dark-mode #stats-content-container .stats-section {
    border-bottom-color: #4a617a;
}

body.dark-mode #stats-content-container .stats-section h3 {
    color: #5dade2;
}

body.dark-mode .stats-grid span:nth-child(odd) {
    color: #bdc3c7;
}

body.dark-mode .stats-grid span:nth-child(even) {
    color: #ecf0f1;
}

/* === STYLE DLA OKNA OSIĄGNIĘĆ === */

/* 1. Zwiększamy szerokość okna */
#achievements-modal .modal-content {
    max-width: 800px;
}

/* 2. Zmieniamy kontener na responsywną siatkę (grid) */
#achievements-list-container {
    display: grid;
    /* === POCZĄTEK ZMIANY: Zwiększamy minimalną szerokość kafelka === */
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    /* === KONIEC ZMIANY === */
    gap: 20px;
    padding: 10px;
    margin: 0;
    /* === KLUCZOWA ZMIANA: Wyrównuje elementy do góry, zapobiegając rozciąganiu === */
    align-items: start;
}

/* 3. Styl pojedynczego kafelka osiągnięcia - ZMIANA */
.achievement-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    /* KLUCZOWA ZMIANA: Usunięto animację 'min-height', która powodowała problem.
       Rozmiar kontenera będzie się teraz dopasowywał płynnie do zawartości. */
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}
.achievement-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

/* 4. Powiększamy ikonę */
.achievement-icon {
    font-size: 3em;
    color: #aaa;
    width: auto;
    margin-bottom: 5px;
}
.achievement-item.completed .achievement-icon {
    color: #4CAF50;
}

/* 5. Zmieniamy styl szczegółów */
.achievement-details {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 6. Nazwa jest zawsze widoczna */
.achievement-name {
    font-weight: bold;
    font-size: 1em;
    line-height: 1.2;
    white-space: normal; /* Upewnia się, że tekst może zawijać się do nowej linii */
    overflow-wrap: break-word; /* Nakazuje przeglądarce łamanie długich słów, które nie mieszczą się w linii */
}

/* 7. Styl dla wrappera centrującego zawartość */
.achievement-visible-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    margin-bottom: auto;
    transition: margin 0.4s ease-out;
}
.achievement-item.expanded .achievement-visible-content {
    margin-top: 0;
    margin-bottom: 0;
}

/* 8. Nowy kontener na ukryte szczegóły */
.achievement-extra-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, margin-top 0.4s ease-out;
    display: flex;
    flex-direction: column;
    gap: 10px; 
}

/* 9. Styl dla rozwiniętego kafelka - KLUCZOWA ZMIANA */
.achievement-item.expanded {
    /* KLUCZOWA ZMIANA: Usunięto 'min-height'. Wysokość kafelka będzie teraz
       automatycznie dostosowywać się do rozwiniętej treści, co pozwala na płynną animację. */
    padding-bottom: 15px;
    box-sizing: border-box;
}
.achievement-item.expanded .achievement-extra-details {
    max-height: 300px; 
    margin-top: 10px;
}

/* 10. Animacja pojawiania się i znikania tekstu */
.achievement-description,
.achievement-ranks {
    opacity: 0;
    transition: opacity 0.2s ease-out;
}
.achievement-item.expanded .achievement-description,
.achievement-item.expanded .achievement-ranks {
    opacity: 1;
    transition-delay: 0.2s;
}

/* 11. Opis i rangi wewnątrz rozwiniętego widoku */
.achievement-description {
    font-size: 0.85em;
    color: #666;
    /* USUNIĘTO: margin-bottom: 10px; (teraz obsługiwane przez 'gap') */
}
.achievement-ranks {
    display: flex;
    gap: 5px;
    justify-content: center;
}
.rank-badge {
    font-size: 0.7em;
    padding: 2px 6px;
    border-radius: 4px;
    background-color: #e0e0e0;
    color: #757575;
}
.rank-badge.unlocked {
    background-color: #ffc107;
    color: #333;
    font-weight: bold;
}

/* 12. Poprawiony wygląd ukończonego osiągnięcia */
.achievement-item.completed {
    background-color: #e8f5e9;
    border-color: #4CAF50;
}

/* Ukryte osiągnięcie */
.achievement-item.hidden {
    filter: grayscale(1) opacity(0.7);
}

/* === NOWE STYLE: WSKAŹNIK PROCENTOWY OSIĄGNIĘCIA === */
.achievement-progress-percent {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: rgba(0, 0, 0, 0.08);
    color: #555;
    font-size: 0.7em;
    font-weight: bold;
    padding: 3px 6px;
    border-radius: 8px;
    pointer-events: none; /* Zapobiega przypadkowemu kliknięciu */
    z-index: 1; /* Upewnia się, że jest nad ikoną */
}

/* Wersja dla trybu ciemnego */
body.dark-mode .achievement-progress-percent {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ccc;
}

/* === Poprawki dla trybu ciemnego (pozostają bez zmian) === */
body.dark-mode #achievements-modal .modal-content {
    background-color: #2c3e50;
}
body.dark-mode .achievement-item {
    border-color: #4a617a;
    background-color: #34495e;
}
body.dark-mode .achievement-item:hover {
    box-shadow: 0 8px 15px rgba(0,0,0,0.2);
    border-color: #5dade2;
}
body.dark-mode .achievement-item.completed {
    background-color: #1c4b3a;
    border-color: #66bb6a;
}
body.dark-mode .achievement-description {
    color: #bdc3c7;
}
body.dark-mode .rank-badge {
    background-color: #4a617a;
    color: #ecf0f1;
}
body.dark-mode .rank-badge.unlocked {
    background-color: #ffc107;
    color: #2c3e50;
}

/* === STYLE DLA POWIADOMIEŃ (TOAST) === */
.achievement-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #2c3e50;
    color: white;
    padding: 15px 20px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 2000;
    transform: translateX(calc(100% + 30px));
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.achievement-toast.visible {
    transform: translateX(0);
}
.toast-icon {
    font-size: 1.8em;
    color: #ffc107;
}
.toast-title {
    font-weight: bold;
}
.toast-name {
    font-size: 0.9em;
    opacity: 0.9;
}

/* Poprawki dla trybu ciemnego */
body.dark-mode .achievement-item {
    border-color: #4a617a;
}
body.dark-mode .achievement-item.completed {
    background-color: #1c4b3a;
    border-left-color: #66bb6a;
}
body.dark-mode .achievement-description {
    color: #bdc3c7;
}
body.dark-mode .rank-badge {
    background-color: #4a617a;
    color: #ecf0f1;
}
body.dark-mode .rank-badge.unlocked {
    background-color: #ffc107;
    color: #2c3e50;
}

/* === STYLE DLA ZAKŁADEK W OKNIE USTAWIEŃ === */

#settings-modal-tabs-container {
    position: relative; 
    display: flex;
    border-bottom: 2px solid #eee;
    margin-bottom: 20px;
    margin-top: 20px;
}

#settings-modal-tabs-container::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: var(--underline-left, 0); 
    width: var(--underline-width, 0);
    height: 3px;  
    background-color: #007bff;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

#settings-modal-tabs-container .tab-button.active {
    color: #007bff;
    font-weight: bold;
}

#settings-modal-tabs-container .tab-button:hover {
    color: #0056b3;
}

/* Poprawki dla trybu ciemnego */
body.dark-mode #settings-modal-tabs-container {
    border-bottom-color: #4a617a;
}
body.dark-mode #settings-modal-tabs-container::after {
    background-color: #5dade2;
}
body.dark-mode #settings-modal-tabs-container .tab-button.active {
    color: #5dade2;
}
body.dark-mode #settings-modal-tabs-container .tab-button:hover {
    color: #ecf0f1;
}

/* === STYLE DLA ELEMENTÓW USTAWIEŃ === */
.setting-row {
    display: grid;
    grid-template-columns: 1fr 2fr 60px; /* Etykieta | Suwak | Wartość % */
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}
.setting-row label {
    text-align: right;
    color: #555;
    font-size: 0.95em;
}
.setting-row .volume-value {
    text-align: left;
    font-weight: bold;
    font-size: 0.9em;
    color: #333;
}
#settings-modal hr {
    border: none;
    height: 1px;
    background-color: #eee;
    margin: 10px 0 20px 0;
}
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: #ddd;
    border-radius: 5px;
    outline: none;
    transition: opacity .2s;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #007bff;
    cursor: pointer;
    border-radius: 50%;
}
input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #007bff;
    cursor: pointer;
    border-radius: 50%;
    border: none;
}

/* --- Poprawki dla trybu ciemnego --- */
body.dark-mode .setting-row label {
    color: #bdc3c7;
}
body.dark-mode .setting-row .volume-value {
    color: #ecf0f1;
}
body.dark-mode input[type="range"] {
    background: #4a617a; /* Lekko jaśniejsze tło dla lepszego kontrastu */
}
body.dark-mode input[type="range"]::-webkit-slider-thumb {
    background: #ecf0f1; /* Zmieniono na jasny, kontrastowy kolor */
}
body.dark-mode input[type="range"]::-moz-range-thumb {
    background: #ecf0f1; /* Zmieniono na jasny, kontrastowy kolor */
}

/* === NOWE STYLE DLA PERSONALIZACJI EMOJI === */

/* Dodatkowy styl dla przycisków w edytorze */
#ball-editor-controls .btn-secondary {
    padding: 10px 15px;
    font-size: 1em;
}

#ball-editor-emoji-btn,
#ball-editor-remove-emoji-btn {
    width: 60px;
    height: 60px;
    font-size: 1.8em; /* Powiększamy emoji na przycisku */
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
}

#ball-editor-remove-emoji-btn {
    background-color: #f8d7da; /* Czerwonawe tło dla usunięcia */
    color: #721c24;
}

#ball-editor-remove-emoji-btn:hover {
    background-color: #f5c6cb;
}

/* W trybie ciemnym */
body.dark-mode #ball-editor-remove-emoji-btn {
    background-color: #583337;
    color: #f8d7da;
}
body.dark-mode #ball-editor-remove-emoji-btn:hover {
    background-color: #6d4145;
}


/* Styl dla emoji na kulce */
.ball-emoji {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 70%; /* Domyślny, procentowy rozmiar */
    line-height: 1;
    color: white;
    /* Lepszy kontrast: cień + czarne obramowanie tekstu */
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
    -webkit-text-stroke: 1px black; /* Kluczowe dla czytelności! */
    pointer-events: none;
    z-index: 1; /* Upewniamy się, że jest na wierzchu */
    /* --- DODANE LINIE --- */
    user-select: none; /* Blokuje zaznaczanie dla nowoczesnych przeglądarek */
    -webkit-user-select: none; /* Dla Chrome, Safari, Opera */
    -moz-user-select: none; /* Dla Firefox */
    -ms-user-select: none; /* Dla Internet Explorer/Edge */
}

/* === NOWE, DOPRACOWANE STYLE DLA KONTROLEK W EDYTORZE KULEK v2 === */

/* Główny kontener jest teraz pionowy */
#ball-editor-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 25px;
}

/* Etykieta dla każdej sekcji */
.editor-section-label {
    font-size: 0.9em;
    color: #777;
    font-weight: 500;
    margin-bottom: 5px;
}

/* Kontener na grupę przycisków */
.editor-section {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

/* Ustawia układ siatki 2x2 dla przycisków ikony/obrazka */
#editor-section-emoji {
    display: grid;
    grid-template-columns: repeat(2, 60px); /* Dwie kolumny o stałej szerokości */
    grid-template-rows: repeat(2, 60px);    /* Dwa wiersze o stałej wysokości */
    gap: 15px;                              /* Zachowujemy ten sam odstęp */
    justify-content: center;                /* Centruje siatkę, jeśli jest węższa niż kontener */
}

/* Separator między sekcjami */
.editor-separator {
    width: 80%;
    border: none;
    height: 1px;
    background-color: #eee;
    margin: 10px 0;
}

/* === KLUCZOWE ZMIANY STYLÓW PRZYCISKÓW === */

/* 1. Wspólny, bazowy styl dla wszystkich przycisków w edytorze */
.editor-section .btn-secondary {
    border: none;
    border-radius: 12px;
    height: 60px;
    cursor: pointer;
    color: white;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.07s ease-in-out;
    border-bottom-width: 5px; /* Grubość "cienia" 3D */
    border-bottom-style: solid;
}

/* 2. Wspólny efekt wciśnięcia */
.editor-section .btn-secondary:active {
    transform: translateY(3px);
    border-bottom-width: 2px;
}

/* 3. Indywidualne style dla każdego przycisku */

/* Przycisk resetu (Szary) */
#ball-editor-reset-btn {
    width: auto;
    padding: 0 20px;
    font-size: 1em;
    background-color: #6c757d;
    border-bottom-color: #494f54;
}

/* Przycisk wyboru ikony (Niebieski) */
#ball-editor-emoji-btn {
    width: 60px;
    font-size: 1.8em;
    background-color: #007bff;
    border-bottom-color: #0056b3;
}

/* Przycisk usunięcia ikony (Czerwony) */
#ball-editor-remove-emoji-btn {
    width: 60px;
    font-size: 1.8em;
    background-color: #dc3545;
    border-bottom-color: #b02a37;
}

/* 4. Specjalne style dla selektora koloru, aby wyglądał jak przycisk */
.color-picker-wrapper {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background-color: #f0f2f5;
    border-bottom: 5px solid #d9dce1;
    padding: 6px;
    box-sizing: border-box; /* Ważne, aby padding nie powiększał elementu */
}

#ball-color-picker {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 8px; /* Lekko zaokrąglony wewnątrz */
    background-color: transparent;
    cursor: pointer;
    padding: 0;
}

#ball-color-picker::-webkit-color-swatch-wrapper { padding: 0; }
#ball-color-picker::-webkit-color-swatch { border: none; border-radius: 8px; }

/* --- Poprawki dla trybu ciemnego --- */
body.dark-mode .editor-section-label {
    color: #bdc3c7;
}
body.dark-mode .editor-separator {
    background-color: #4a617a;
}
body.dark-mode .color-picker-wrapper {
    background-color: #2c3e50;
    border-bottom-color: #1a2531;
}
/* === NOWE, POPRAWIONE STYLE DLA EMOJI PICKER === */

/* 1. Okno edytora będzie animować swoją maksymalną wysokość */
#ball-editor-modal .modal-content {
    max-width: 350px; /* Okno będzie mniejsze i bardziej zwięzłe */
    padding-top: 40px;
    padding-bottom: 40px;
    /* --- DODANA LINIJKA --- */
    transition: max-height 0.4s ease-in-out, transform 0.3s ease-out;
}

/* 2. Kiedy okno ma być powiększone (dodajemy klasę .picker-is-active) */
#ball-editor-modal .modal-content.picker-is-active {
    /* Ustawiamy znacznie większą wysokość, aby zmieścić picker */
    max-height: 90vh; 
}

/* 3. Domyślnie ukrywamy kontener z emoji-picker */
#emoji-picker-container {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, margin-top 0.3s ease-in-out;
    padding: 0 10px;
}

#emoji-picker-container.visible {
    max-height: 400px; /* Wysokość wystarczająca, aby zmieścić picker */
    opacity: 1;
    margin-top: 15px; /* Dodajemy odstęp od góry, gdy picker jest widoczny */
}

/* 4. Kiedy okno jest aktywne, "wysuwamy" kontener z emoji */
#ball-editor-modal .modal-content.picker-is-active #emoji-picker-container {
    max-height: 400px; /* Wysokość wystarczająca dla pickera */
    opacity: 1;
}

/* 5. Upewniamy się, że sam picker wypełnia dostępną przestrzeń */
#emoji-picker-container emoji-picker {
    width: 100%;
}

/* === NOWE STYLE DLA REGULACJI ROZMIARU EMOJI === */

/* Kontener dla sekcji rozmiaru */
#editor-section-emoji-size {
    gap: 0; /* Usuwamy odstęp, bo będziemy kontrolować go inaczej */
    background-color: #f0f2f5;
    border-radius: 12px;
    border-bottom: 5px solid #d9dce1;
    overflow: hidden; /* Aby zaokrąglone rogi działały poprawnie */
    height: 60px;
}

/* Przyciski plus/minus */
#emoji-size-decrease-btn,
#emoji-size-increase-btn {
    width: 60px;
    height: 100%; /* Wypełniają wysokość kontenera */
    border-radius: 0; /* Usuwamy zaokrąglenie, bo jest na kontenerze */
    border-bottom: none; /* Usuwamy cień, bo jest na kontenerze */
    background-color: #e2e6ea;
    color: #495057;
    font-size: 1.8em;
    font-weight: bold;
}
#emoji-size-decrease-btn:active,
#emoji-size-increase-btn:active {
    background-color: #d6dbe0;
    transform: none; /* Wyłączamy efekt wciskania */
}

/* Wskaźnik procentowy */
#emoji-size-value {
    padding: 0 20px;
    font-size: 1.1em;
    font-weight: bold;
    color: #333;
    min-width: 60px; /* Minimalna szerokość, aby wyglądało dobrze */
    text-align: center;
}

/* --- Poprawki dla trybu ciemnego --- */
body.dark-mode #editor-section-emoji-size {
    background-color: #2c3e50;
    border-bottom-color: #1a2531;
}
body.dark-mode #emoji-size-decrease-btn,
body.dark-mode #emoji-size-increase-btn {
    background-color: #34495e;
    color: #ecf0f1;
}
body.dark-mode #emoji-size-decrease-btn:active,
body.dark-mode #emoji-size-increase-btn:active {
    background-color: #4a617a;
}
body.dark-mode #emoji-size-value {
    color: #ecf0f1;
}

/* --- POPRAWKA: Skalowanie emoji w podglądzie następnych kulek --- */
#next-balls .ball-emoji {
    font-size: 45%; /* Znacząco zmniejszamy bazowy rozmiar emoji */
    -webkit-text-stroke: 0; /* Usuwamy obwódkę, która na tak małym rozmiarze wyglądałaby źle */
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.6); /* Możemy też lekko zmniejszyć cień */
}

/* --- OSTATECZNA POPRAWKA: Wymuszenie małego rozmiaru emoji w podglądzie następnych kulek --- */
#next-balls .ball-emoji {
    /* Ustawiamy stały, mały rozmiar w pikselach. To jest klucz do sukcesu. */
    font-size: 14px !important;

    /* Usuwamy czarną obwódkę, która źle wygląda na tak małym emoji */
    -webkit-text-stroke: 0px;

    /* Delikatniejszy cień dla lepszej czytelności */
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
}

/* === STYLE DLA MISJI CODZIENNYCH === */

#daily-missions-container {
    width: 100%;
    margin: 25px 0;
    padding: 15px 20px;
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    box-sizing: border-box;
    min-height: 150px; /* Dopasuj do przybliżonej wysokości z 3 misjami */
}

.missions-title {
    text-align: center;
    color: #ffc107; /* Złoty kolor jak w XP */
    font-size: 1.2em;
    margin-top: 0;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

#daily-missions-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mission-item {
    display: grid;
    /* Opis | Pasek Postępu + Tekst | Nagroda | Przycisk */
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 15px;
    padding: 10px 15px;
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.mission-item:hover {
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

/* NOWY BLOK: Styl dla całego wiersza ukończonej misji */
.mission-item.completed {
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.5); /* Efekt "wklęsłości" */
    opacity: 0.7; /* Lekkie przygaszenie */
    background-color: rgba(0, 0, 0, 0.15); /* Nieco ciemniejsze tło */
}

/* Wyłączamy efekt "unoszenia się" dla ukończonych misji */
.mission-item.completed:hover {
    transform: none;
    border-color: transparent;
}

.mission-description {
    margin: 0;
    font-size: 0.95em;
    color: #e0e0e0;
}

.mission-progress-container {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 150px;
}

.mission-progress-bar-wrapper {
    flex-grow: 1;
    height: 8px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    overflow: hidden;
}

.mission-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #5dade2, #3498db); /* Niebieski gradient dla postępu */
    border-radius: 4px;
    transition: width 0.5s ease-out;
}

.mission-progress-text {
    font-size: 0.8em;
    font-weight: bold;
    color: #fff;
    min-width: 50px;
    text-align: right;
}

.mission-reward {
    display: flex;
    align-items: center;
    gap: 5px;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: bold;
}

.mission-reward img {
    width: 16px;
    height: 16px;
}

.mission-reward span {
    color: #ffc107;
}

.btn-claim-reward {
    padding: 8px 15px;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-claim-reward:disabled {
    background-color: #555;
    color: #888;
    cursor: not-allowed;
}

.mission-item.completed .btn-claim-reward {
    background-color: #28a745;
    color: white;
    box-shadow: 0 0 10px rgba(40, 167, 69, 0.7);
    animation: breathe 1.5s ease-in-out infinite; /* Używamy istniejącej animacji */
}

/* NOWY BLOK: Styl dla ODEBRANEGO przycisku (ukończony i wyłączony) */
.mission-item.completed .btn-claim-reward:disabled {
    background-color: #218838; /* Ciemniejszy, przygaszony zielony */
    box-shadow: none;          /* Usuwa poświatę */
    animation: none;           /* Zatrzymuje animację pulsowania */
    opacity: 0.65;             /* Dodatkowo go przyciemnia */
}

.mission-item.completed .btn-claim-reward:disabled:hover {
    background-color: #218838; /* Ciemniejszy, przygaszony zielony */
    box-shadow: none;          /* Usuwa poświatę */
    animation: none;           /* Zatrzymuje animację pulsowania */
    opacity: 0.65;             /* Dodatkowo go przyciemnia */
}

.mission-item.completed .btn-claim-reward:hover {
    background-color: #218838;
    box-shadow: 0 0 15px rgba(33, 136, 56, 1);
}

.mission-item.locked {
    filter: grayscale(80%) opacity(0.6);
}
.mission-item.locked:hover {
    transform: none;
    border-color: transparent;
}

/* === STYLE DLA POWIADOMIEŃ O MISJACH === */

.mission-toast {
    position: fixed;
    bottom: 80px; /* Pozycjonujemy nieco wyżej, by nie nachodziło na powiadomienia o osiągnięciach */
    right: 20px;
    background-color: #3498db; /* Niebieski kolor, pasujący do paska postępu misji */
    color: white;
    padding: 15px 20px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 2000;
    transform: translateX(calc(100% + 30px));
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.mission-toast.visible {
    transform: translateX(0);
}

.mission-toast .toast-icon {
    font-size: 1.8em;
    color: #ecf0f1; /* Jaśniejszy kolor ikony */
}

#main-menu-coin-count {
    font-size: 1.2em;
    font-weight: bold;
    color: #ffc107; /* Złoty kolor, tak jak w misjach */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* === STYLE DLA ANIMACJI NAGRÓD W MENU === */

.menu-reward-particle {
    position: fixed; /* Pozycja względem okna przeglądarki, co ułatwia obliczenia */
    border-radius: 50%;
    z-index: 2500; /* Musi być na samym wierzchu */
    pointer-events: none; /* Aby nie blokowały klikania */
    /* Animacja trwa 1 sekundę i używa funkcji 'ease-in' dla efektu przyspieszania */
    animation: fly-to-target 1s ease-in forwards;
}

/* Cząsteczka dla punktów doświadczenia (XP) */
.xp-menu-particle {
    width: 8px;
    height: 8px;
    background-color: #ffc107;
    box-shadow: 0 0 8px #ffc107, 0 0 12px #ff9800;
}

/* Cząsteczka dla monet */
.coin-particle {
    width: 10px;
    height: 10px;
    background-color: #ffd700; /* Bardziej złoty kolor */
    border: 1px solid #e6b800;
    box-shadow: 0 0 6px #ffd700;
}

/* Kluczowa animacja, która przesuwa cząsteczkę */
@keyframes fly-to-target {
    0% {
        /* Start: w miejscu kliknięcia, pełny rozmiar i widoczność */
        transform: translate(0, 0) scale(1.5);
        opacity: 1;
    }
    100% {
        /* Koniec: w docelowym miejscu (obliczonym w JS), zerowy rozmiar i widoczność */
        transform: translate(var(--tx), var(--ty)) scale(0);
        opacity: 0.5;
    }
}

/* === STYLE DLA AKCESORIÓW KULKI === */

/* Kontener na listę dostępnych akcesoriów */
#accessory-list {
    flex-wrap: wrap; /* Pozwala na zawijanie do nowego wiersza */
    gap: 10px;
    padding: 0 10px;
}

/* Pojedynczy przycisk z akcesorium */
.accessory-option {
    border: 2px solid transparent;
    background-color: #f0f2f5;
    padding: 5px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    width: 50px; /* Stały rozmiar dla przycisku */
    height: 50px;
}

.accessory-option:hover {
    border-color: #007bff;
    transform: translateY(-2px);
}

.accessory-option.active {
    border-color: #28a745; /* Zielona ramka dla aktywnego */
    background-color: #e8f5e9;
}

.accessory-option img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Upewnia się, że obrazek się mieści */
}

/* --- Style dla trybu ciemnego --- */
body.dark-mode .accessory-option {
    background-color: #2c3e50;
}

body.dark-mode .accessory-option:hover {
    border-color: #5dade2;
}

body.dark-mode .accessory-option.active {
    border-color: #66bb6a;
    background-color: #1c4b3a;
}

/* --- Style dla podglądu akcesorium NA KULCE --- */
/* Ten element będzie dodawany dynamicznie przez JS */

.ball-accessory {
    position: absolute;
    pointer-events: none; /* Aby nie blokował klikania kulki */
    z-index: 2; /* Musi być nad emoji, ale pod ewentualnymi efektami */
    transition: all 0.3s ease;
    /* --- DODANE LINIE --- */
    user-select: none; /* Blokuje zaznaczanie dla nowoczesnych przeglądarek */
    -webkit-user-select: none; /* Dla Chrome, Safari, Opera */
    -moz-user-select: none; /* Dla Firefox */
    -ms-user-select: none; /* Dla Internet Explorer/Edge */
}

.ball-accessory img {
    width: 100%;
    height: 100%;
}

/* Przykładowe pozycjonowanie dla konkretnych akcesoriów */
.ball-accessory.crown {
    width: 80%; /* 80% szerokości kulki */
    top: -15%; /* Lekko nad górną krawędzią */
    left: 10%;
}

.ball-accessory.sunglasses {
    width: 90%;
    top: 25%; /* Na wysokości "oczu" */
    left: 5%;
}

.ball-accessory.cap {
    width: 100%;
    top: -5%;
    left: 0%;
    transform: rotate(-15deg); /* Lekko przekrzywiona */
}

/* === STYLE DLA KONTROLEK AKCESORIÓW === */

#accessory-controls-wrapper {
    width: 100%;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: opacity 0.3s, transform 0.3s;
}

/* Klasa do wyłączania kontrolek, gdy nie ma akcesorium */
#accessory-controls-wrapper.disabled {
    opacity: 0.5;
    pointer-events: none;
    transform: scale(0.98);
}

.accessory-slider-row {
    display: grid;
    grid-template-columns: 80px 1fr 60px;
    align-items: center;
    gap: 10px;
}

.accessory-slider-row label {
    font-size: 0.9em;
    color: #555;
    text-align: right;
}

.accessory-slider-row span {
    font-weight: bold;
    font-size: 0.9em;
}

/* Poprawki dla trybu ciemnego */
body.dark-mode #accessory-controls-wrapper {
    border-top-color: #4a617a;
}
body.dark-mode .accessory-slider-row label {
    color: #bdc3c7;
}

/* === NOWA, POPRAWNA LOGIKA UKŁADU EDYTORA KULKI === */

/* 1. Ustawiamy główny kontener jako flexbox, kierunek pionowy */
#ball-editor-modal .modal-content {
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Zapobiega pojawianiu się podwójnych pasków przewijania */
    /* Resetujemy padding, będziemy go stosować do wewnętrznych elementów */
    padding: 20px 0 0 0; 
}

/* 2. Nagłówek i podgląd mają stały rozmiar i nie kurczą się */
#ball-editor-header,
#ball-editor-preview-container {
    flex-shrink: 0;
    padding-left: 30px; /* Odtwarzamy oryginalny padding boczny */
    padding-right: 30px;
}

/* Dodajemy trochę oddechu pod podglądem */
#ball-editor-preview-container {
    padding-bottom: 20px;
    border-bottom: 1px solid #eee; /* Delikatny separator */
}
body.dark-mode #ball-editor-preview-container {
    border-bottom-color: #4a617a;
}

/* 3. Nowy kontener na kontrolki staje się przewijalny */
#ball-editor-scrollable-content {
    flex-grow: 1; /* Rozciąga się, by wypełnić resztę miejsca */
    overflow-y: auto; /* TYLKO ten element będzie miał pasek przewijania */
    min-height: 0; /* Ważna poprawka dla niektórych przeglądarek w trybie flex */
    padding: 0 30px 20px 30px; /* Padding dla przewijanej treści */
}

/* 4. Mała poprawka dla emoji pickera, aby miał trochę miejsca na górze */
#emoji-picker-container {
    margin-top: 20px;
}

/* === NOWE, POPRAWIONE STYLE DLA OBSZARU MONET I SKLEPU === */

/* Główny kontener, który pozycjonujemy w rogu */
#main-menu-shop-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px; 
}

/* Styl dla licznika monet (pozostaje prawie bez zmian) */
#main-menu-coins-display {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 5px 12px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

#main-menu-coins-display img {
    width: 24px;
    height: 24px;
}

#main-menu-coin-count {
    font-size: 1.2em;
    font-weight: bold;
    color: #ffc107;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* Styl dla przycisku sklepu (teraz bez pozycjonowania 'absolute') */
#main-menu-shop-btn {
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #007bff;
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.4);
    border: 3px solid #0056b3;
}

#main-menu-shop-btn:hover {
    transform: scale(1.05); /* Usunęliśmy translateY, bo nie jest już potrzebny przy flexbox */
    box-shadow: 0 6px 15px rgba(0, 123, 255, 0.6);
}

#main-menu-shop-btn:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.4);
}

#main-menu-shop-btn img {
    width: 24px;
    height: 24px;
}

/* === STYLE DLA OKNA SKLEPU === */

/* Ustawiamy maksymalną szerokość okna sklepu */
#shop-modal .modal-content {
    max-width: 700px;
}

/* Lista przedmiotów jako responsywna siatka */
#shop-items-list {
    display: grid;
    /* Automatycznie dopasowuje liczbę kolumn do szerokości okna */
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 20px;
    padding: 5px;
}

/* Karta pojedynczego przedmiotu */
.shop-item {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.shop-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

/* === NOWE STYLE DLA KATEGORII W SKLEPIE === */

.shop-category-container {
    margin-top: 20px;
}

.shop-category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background-color: #e9ecef;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.shop-category-header:hover {
    background-color: #dee2e6;
}
.category-title {
    font-size: 1.2em;
    font-weight: bold;
    color: #495057;
}
.category-toggle-icon {
    font-size: 1.1em;
    color: #6c757d;
    transition: transform 0.3s ease-in-out;
}

/* Logika zwijania/rozwijania */
.shop-category-container .shop-items-grid {
    transition: max-height 0.4s ease-out, margin-top 0.4s ease-out, opacity 0.3s ease-out;
    max-height: 2000px; /* Wystarczająco duża wartość */
    overflow: hidden;
    margin-top: 20px;
    opacity: 1;
}

.shop-category-container.collapsed .shop-items-grid {
    max-height: 0;
    margin-top: 0;
    opacity: 0;
}
.shop-category-container.collapsed .category-toggle-icon {
    transform: rotate(-90deg);
}

/* Poprawki dla trybu ciemnego */
body.dark-mode .shop-category-header {
    background-color: #2c3e50;
}
body.dark-mode .shop-category-header:hover {
    background-color: #4a617a;
}
body.dark-mode .category-title {
    color: #ecf0f1;
}
body.dark-mode .category-toggle-icon {
    color: #bdc3c7;
}

/* Podgląd obrazka przedmiotu */
.shop-item-preview {
    width: 80px;
    height: 80px;
    background-color: #e9ecef;
    border-radius: 50%;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}
.shop-item-preview img {
    max-width: 100%;
    max-height: 100%;
}

/* Nazwa przedmiotu */
.shop-item-name {
    font-weight: bold;
    font-size: 1.05em;
    margin-bottom: 10px;
    flex-grow: 1; /* Sprawia, że karty mają równą wysokość */
}

/* Cena przedmiotu */
.shop-item-price {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
}
.shop-item-price img {
    width: 20px;
    height: 20px;
}
.shop-item-price span {
    font-size: 1.2em;
    font-weight: bold;
    color: #e69500; /* Ciemniejszy złoty */
}

/* Przycisk zakupu */
.btn-buy-item {
    width: 100%;
    padding: 10px;
    font-size: 1em;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    background-color: #28a745;
    color: white;
    transition: background-color 0.2s;
}
.btn-buy-item:hover {
    background-color: #218838;
}

/* Przycisk zakupu, gdy gracz nie ma wystarczająco monet */
.btn-buy-item.btn-buy-item-unaffordable {
    background-color: #6c757d;
    cursor: not-allowed;
}
.btn-buy-item.btn-buy-item-unaffordable:hover {
    background-color: #5a6268;
}

/* Styl dla przedmiotu już posiadanego */
.shop-item.owned {
    opacity: 0.7;
    background-color: #f1f1f1;
}
.shop-item.owned .btn-buy-item {
    background-color: #6c757d;
    cursor: not-allowed;
}

/* --- Style sklepu dla trybu ciemnego --- */
body.dark-mode .shop-item {
    background-color: #34495e;
    border-color: #4a617a;
}
body.dark-mode .shop-item-preview {
    background-color: #2c3e50;
}
body.dark-mode .shop-item.owned {
    background-color: #2c3e50;
    opacity: 0.6;
}
body.dark-mode .shop-item.owned .btn-buy-item {
    background-color: #4a617a;
}

/* Tryb ciemny dla przycisku, gdy nie stać gracza */
body.dark-mode .btn-buy-item.btn-buy-item-unaffordable {
    background-color: #4a617a;
}
body.dark-mode .btn-buy-item.btn-buy-item-unaffordable:hover {
    background-color: #526b84;
}

/* === ZAKTUALIZOWANE STYLE DLA AKCESORIÓW W EDYTORZE === */

/* Kontener na przycisk i jego ewentualną cenę */
.accessory-option-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* Styl dla zablokowanego przycisku */
.accessory-option.locked {
    filter: grayscale(1);
    opacity: 0.6;
    cursor: not-allowed;
}
.accessory-option.locked:hover {
    border-color: transparent;
    transform: none;
}

/* Wyświetlanie ceny pod zablokowanym przedmiotem */
.accessory-price {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8em;
    font-weight: bold;
    color: #e69500;
}
.accessory-price img {
    width: 14px;
    height: 14px;
}

/* Definiujemy animację pulsowania */
@keyframes pulse-warning {
  0% {
    /* Zaczynamy od braku cienia */
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
  }
  50% {
    /* W połowie animacji cień jest najmocniejszy i najbardziej rozmyty, tworząc poświatę */
    box-shadow: 0 0 15px 5px rgba(220, 53, 69, 0.8);
  }
  100% {
    /* Wracamy do braku cienia, aby animacja mogła się zapętlić */
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
  }
}

/* Klasa, którą będziemy dynamicznie dodawać do planszy */
#game-board.board-warning {
  /* Ustawiamy łagodne przejście, gdybyśmy chcieli zmienić cień w inny sposób */
  transition: box-shadow 0.3s ease-in-out;
  /* Aplikujemy naszą nieskończoną animację pulsowania */
  animation: pulse-warning 1.5s ease-in-out infinite;
}

/* Definiujemy klatki kluczowe dla standardowego "pulsu" wyniku */
@keyframes score-pulse-animation {
  0% {
    /* Zaczynamy od normalnego rozmiaru */
    transform: scale(1);
  }
  50% {
    /* W połowie animacji, wynik jest powiększony i ma złotą poświatę */
    transform: scale(1.3);
    color: #ffc107;
    text-shadow: 0 0 8px rgba(255, 193, 7, 0.7);
  }
  100% {
    /* Wracamy do normalnego stanu */
    transform: scale(1);
    color: inherit; /* Przywracamy domyślny kolor tekstu */
    text-shadow: none;
  }
}

/* Definiujemy mocniejszą animację dla COMBO */
@keyframes score-pulse-combo-animation {
  0% {
    transform: scale(1);
  }
  50% {
    /* Skala i poświata są znacznie większe i bardziej intensywne */
    transform: scale(1.6);
    color: #ff9800; /* Głębszy, pomarańczowy odcień złota */
    text-shadow: 0 0 15px rgba(255, 140, 27, 0.9);
  }
  100% {
    transform: scale(1);
    color: inherit;
    text-shadow: none;
  }
}

/* Klasa, którą będziemy dodawać do elementu #score */
.score-pulse {
  /* Czas trwania animacji jest krótki i dynamiczny */
  animation: score-pulse-animation 0.4s ease-out;
}

/* Klasa dla wyniku z combo */
.score-pulse-combo {
  animation: score-pulse-combo-animation 0.4s ease-out;
}

/* ================== POCZĄTEK ZMIAN: PRZYCISK STATYSTYK PO GRZE ================== */

/* Nowy kontener, który centruje przycisk i dodaje odstęp od góry */
#game-over-secondary-actions {
    margin-top: 25px; 
}

#gameOver-show-stats {
    background-color: #007bff;
    width: 60px;
    height: 60px;
    padding: 0;
    border-radius: 50%; /* Zmieniamy na idealne kółko dla lepszego efektu */
    border: 3px solid #0056b3; /* Dodajemy ramkę dla spójności z ikonami w menu */
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.4);
}
#gameOver-show-stats:hover {
    background-color: #0056b3;
    transform: translateY(-2px) scale(1.05); /* Dodajemy lekkie powiększenie */
}
#gameOver-show-stats:active {
    transform: translateY(1px); /* Efekt wciśnięcia */
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.4);
}
#gameOver-show-stats img {
    width: 28px; /* Lekko zmniejszamy ikonę, żeby lepiej pasowała w kole */
    height: 28px;
    filter: invert(1); /* Upewniamy się, że ikona jest biała */
}

/* Upewniamy się, że style dla siatki statystyk działają też w nowym oknie */
#post-game-stats-content .stats-section {
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}
#post-game-stats-content .stats-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
#post-game-stats-content .stats-section h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #007bff;
}
#post-game-stats-content .stats-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 10px 20px;
    font-size: 1.05em;
}
#post-game-stats-content .stats-grid span:nth-child(odd) { color: #555; text-align: left; }
#post-game-stats-content .stats-grid span:nth-child(even) { font-weight: bold; text-align: right; }

/* Tryb ciemny dla nowego okna */
body.dark-mode #post-game-stats-content .stats-section { border-bottom-color: #4a617a; }
body.dark-mode #post-game-stats-content .stats-section h3 { color: #5dade2; }
body.dark-mode #post-game-stats-content .stats-grid span:nth-child(odd) { color: #bdc3c7; }
body.dark-mode #post-game-stats-content .stats-grid span:nth-child(even) { color: #ecf0f1; }

.score-entry-title {
    background-color: #6c757d;
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7em;
    font-weight: bold;
    margin-right: 8px;
    text-transform: uppercase;
    vertical-align: middle;
}

body.dark-mode .score-entry-title {
    background-color: #5a6268;
}

/* === STYLE DLA PRZEŁĄCZNIKÓW W USTAWIENIACH === */

.setting-row-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5px;
    border-bottom: 1px solid #eee;
}
.setting-row-toggle:last-child {
    border-bottom: none;
}
.setting-row-toggle label {
    color: #333;
    font-size: 1.05em;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 28px;
}
.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
input:checked + .toggle-slider {
    background-color: #28a745; /* Zielony, gdy włączone */
}
input:focus + .toggle-slider {
    box-shadow: 0 0 1px #28a745;
}
input:checked + .toggle-slider:before {
    transform: translateX(22px);
}

/* Poprawki dla trybu ciemnego */
body.dark-mode .setting-row-toggle {
    border-bottom-color: #4a617a;
}
body.dark-mode .setting-row-toggle label {
    color: #ecf0f1;
}
body.dark-mode .toggle-slider {
    background-color: #4a617a;
}
body.dark-mode input:checked + .toggle-slider {
    background-color: #66bb6a; /* Jaśniejszy zielony w trybie ciemnym */
}

/* === Dodatkowe drobne poprawki === */
/* Edycja wyników */
#high-scores-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.score-entry-actions {
    display: flex;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.2s;
}
#high-scores-list li:hover .score-entry-actions {
    opacity: 1;
}
.score-entry-actions button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1em;
    padding: 5px;
    line-height: 1;
    width: 32px; /* Stała szerokość */
    height: 32px; /* Stała wysokość */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* Okrągły kształt */
    transition: background-color 0.2s;
}

.score-entry-actions .btn-score-share img {
    width: 25px;
    height: 25px;
}

body.dark-mode .score-entry-actions button:hover {
    background-color: #4a617a;
}

.score-entry-actions button:hover {
    background-color: #f0f0f0;
}

body.dark-mode .score-entry-actions button {
    color: #ecf0f1;
}

/* Edycja nazwy zapisu */
.save-actions .btn-edit-save-name {
    background-color: #007bff;
    font-size: 1.2em;
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.save-actions .btn-edit-save-name:hover {
    background-color: #0056b3;
}

/* --- Style dla obu wykresów --- */
.stats-section.chart-section {
    padding-top: 20px;
    margin-top: 20px;
}
.no-chart-data {
    text-align: center;
    color: #999;
    padding: 20px;
    font-style: italic;
}
body.dark-mode .no-chart-data {
    color: #777;
}

/* === NOWE, ULEPSZONE STYLE DLA WYKRESU KOŁOWEGO === */

@keyframes growAndRotate {
    from {
        transform: scale(0.5) rotate(-180deg);
        opacity: 0;
    }
    to {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

#color-pie-chart-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    min-height: 170px; /* Zapobiega "skakaniu" layoutu podczas ładowania */
}

.pie-chart-wrapper {
    flex-shrink: 0;
}

.pie-chart {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1), inset 0 3px 5px rgba(0,0,0,0.2);
    animation: growAndRotate 0.8s cubic-bezier(0.5, 0, 0.2, 1) forwards;
    transition: transform 0.25s ease-out;
    overflow: hidden; /* Ważne dla maski */
}

.pie-chart::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    
    /* === KLUCZOWA ZMIANA: Tło jest teraz maską przyciemniającą === */
    background-image: conic-gradient(
        from var(--highlight-start-angle, 0deg),
        transparent 0deg var(--highlight-angle, 0deg),
        rgba(0, 0, 0, 0.5) var(--highlight-angle, 0deg) 360deg
    );
    
    opacity: 0; /* Domyślnie ukryta */
    transition: opacity 0.3s ease-out;
    pointer-events: none;
}

/* Ta klasa będzie dodawana do całego modala statystyk */
#stats-modal.pie-chart-selection-active .pie-chart::after {
    /* Pokazujemy warstwę przyciemniającą, gdy coś jest zaznaczone */
    opacity: 1;
}

/* Efekt "pop" przy najechaniu na legendę */
.pie-chart.is-highlighted {
    transform: scale(1.05);
}

.pie-chart-legend {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.05em;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    border: 2px solid transparent;
    transition: all 0.25s ease-out;
}

.legend-item:hover {
    background-color: #f8f9fa;
    transform: translateX(5px);
}

.legend-item.active {
    background-color: #e7f1ff;
    border-color: #007bff;
    font-weight: bold;
    transform: translateX(5px);
}

.legend-color-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.1);
}

.legend-text {
    flex-grow: 1;
}

.legend-value {
    font-weight: bold;
    color: #333;
}

/* === Style wykresu dla trybu ciemnego === */

body.dark-mode .pie-chart {
    box-shadow: 0 10px 25px rgba(0,0,0,0.3), inset 0 3px 5px rgba(0,0,0,0.4);
}

body.dark-mode .pie-chart::after {
    /* Ciemniejsza maska dla lepszego kontrastu w trybie ciemnym */
    background-image: conic-gradient(
        from var(--highlight-start-angle, 0deg),
        transparent 0deg var(--highlight-angle, 0deg),
        rgba(0, 0, 0, 0.7) var(--highlight-angle, 0deg) 360deg
    );
}

body.dark-mode .legend-item:hover {
    background-color: #4a617a;
}

body.dark-mode .legend-item.active {
    background-color: #2c3e50;
    border-color: #5dade2;
}

body.dark-mode .legend-value {
    color: #ecf0f1;
}


/* Panel boczny pozostaje bez zmian, bo jego logika jest dobra */
#color-detail-panel {
    width: 240px;
    flex-shrink: 0;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    overflow: hidden;
    max-height: 0;
    padding: 0 20px;
    margin-top: 0;
    border-width: 0;
    opacity: 0;
    transition: max-height 0.4s ease-in-out, padding-top 0.4s ease-in-out, padding-bottom 0.4s ease-in-out, margin-top 0.4s ease-in-out, border-width 0.4s ease-in-out, opacity 0.3s ease-in-out;
    pointer-events: none;
}

#color-detail-panel.visible {
    max-height: 150px;
    padding: 20px;
    margin-top: 20px;
    border-width: 1px;
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

body.dark-mode #color-detail-panel {
    background-color: #2c3e50;
    border-color: #4a617a;
}

#color-detail-panel .stats-grid {
    grid-template-columns: auto 1fr;
    gap: 12px 15px;
    font-size: 0.95em;
}

#color-detail-panel .stats-grid span:nth-child(odd) {
    text-align: left;
}

/* === NOWE, ULEPSZONE STYLE DLA WYKRESU LINIOWEGO === */
.chart-timespan-toggle {
    margin: 10px auto;
    max-width: 400px;
}
.chart-timespan-toggle .toggle-btn {
    font-size: 0.85em;
    padding: 6px 12px;
}

.score-line-chart-wrapper {
    width: 100%;
    height: 250px;
    position: relative;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #555;
    margin-top: 20px;
}

body.dark-mode .score-line-chart-wrapper {
    color: #bdc3c7;
}

.score-line-chart-wrapper svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.chart-grid-line {
    stroke: #eee;
    stroke-width: 1;
    stroke-dasharray: 4 4;
}
body.dark-mode .chart-grid-line {
    stroke: #4a617a;
}

.chart-axis-line {
    stroke: #ccc;
    stroke-width: 2;
}
body.dark-mode .chart-axis-line {
    stroke: #7f8c8d;
}

.chart-labels {
    font-size: 12px;
    fill: #777;
    animation: fadeIn 0.5s ease-out forwards;
}
body.dark-mode .chart-labels {
    fill: #aaa;
}

/* Animacja rysowania linii */
@keyframes draw-line {
    to { stroke-dashoffset: 0; }
}
.chart-line {
    fill: none;
    stroke: #007bff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    /* Inicjalizacja do animacji rysowania */
    stroke-dasharray: 1; 
    stroke-dashoffset: 1;
}
.chart-line.animate-draw {
    animation: draw-line 1s ease-in-out forwards;
}
body.dark-mode .chart-line {
    stroke: #5dade2;
}

/* Animacja pojawiania się obszaru pod wykresem */
@keyframes fade-in-area {
    from { opacity: 0; }
    to { opacity: 0.1; }
}
.chart-area {
    opacity: 0;
    fill: url(#chart-gradient);
}
.chart-area.animate-fade {
    animation: fade-in-area 0.8s 0.3s ease-out forwards; /* Opóźnienie startu */
}
body.dark-mode .chart-area {
    fill: url(#chart-gradient-dark);
}

/* Animacja pojawiania się punktów */
@keyframes point-appear {
    from { transform: scale(0); }
    to { transform: scale(1); }
}
.chart-point {
    fill: #007bff;
    stroke: white;
    stroke-width: 2;
    cursor: pointer;
    transform-origin: center;
    animation: point-appear 0.5s backwards; /* 'backwards' utrzymuje stan początkowy */
    transition: all 0.2s ease-out;
}
body.dark-mode .chart-point {
    fill: #5dade2;
    stroke: #34495e;
}

.chart-point:hover {
    r: 8;
    fill: #ffc107;
    stroke: white;
    filter: drop-shadow(0 0 5px #ffc107);
}
body.dark-mode .chart-point:hover {
    fill: #ffc107;
    stroke: #2c3e50;
}

/* Ulepszony tooltip */
.chart-tooltip {
    position: absolute;
    background-color: rgba(44, 62, 80, 0.9);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.9em;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -120%) scale(0.9);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.chart-tooltip.visible {
    opacity: 1;
    transform: translate(-50%, -150%) scale(1);
}
.tooltip-score {
    font-weight: bold;
}
.tooltip-date {
    font-size: 0.9em;
    opacity: 0.8;
}

/* Animacja dla etykiet */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* === NOWE, POPRAWIONE STYLE DLA INTERAKTYWNEGO WYKRESU KOŁOWEGO (PANEL BOCZNY) === */

#color-pie-chart-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    min-height: 170px; /* Zapobiega "skakaniu" layoutu podczas ładowania */
}

.pie-chart-legend {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95em;
    cursor: pointer;
    padding: 5px 8px;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: background-color 0.2s, border-color 0.2s;
}

.legend-item:hover {
    background-color: #f0f0f0;
}

.legend-item.active {
    background-color: #e7f1ff;
    border-color: #007bff;
    font-weight: bold;
}

/* Tryb ciemny dla legendy */
body.dark-mode .legend-item:hover {
    background-color: #4a617a;
}
body.dark-mode .legend-item.active {
    background-color: #2c3e50;
    border-color: #5dade2;
}

/* Panel ze szczegółami, po prawej stronie */
#color-detail-panel {
    width: 240px;
    flex-shrink: 0;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6; /* Zachowujemy dla koloru */
    border-radius: 8px;

    /* --- NOWE WŁAŚCIWOŚCI ANIMACJI --- */
    overflow: hidden;
    max-height: 0;      /* Domyślnie zwinięty */
    padding: 0 20px;    /* Zerujemy padding góra/dół */
    margin-top: 0;      /* Zerujemy margines górny */
    border-width: 0;    /* Ukrywamy ramkę */
    opacity: 0;

    /* Definiujemy, które właściwości mają być animowane */
    transition: max-height 0.4s ease-in-out, 
                padding-top 0.4s ease-in-out, 
                padding-bottom 0.4s ease-in-out,
                margin-top 0.4s ease-in-out,
                border-width 0.4s ease-in-out,
                opacity 0.3s ease-in-out;

    pointer-events: none;
}

#color-detail-panel.visible {
    max-height: 150px;      /* Ustawiamy docelową wysokość */
    padding: 20px;          /* Przywracamy pełny padding */
    margin-top: 20px;       /* Dodajemy margines, aby odsunąć się od legendy */
    border-width: 1px;      /* Przywracamy ramkę */
    opacity: 1;
    transform: none;        /* Usuwamy zbędną transformację */
    pointer-events: auto;
}

/* Tryb ciemny dla panelu bocznego */
body.dark-mode #color-detail-panel {
    background-color: #2c3e50;
    border-color: #4a617a;
}

/* Siatka wewnątrz panelu bocznego */
#color-detail-panel .stats-grid {
    grid-template-columns: auto 1fr; /* Lepszy układ dla węższego panelu */
    gap: 12px 15px;
    font-size: 0.95em;
}

#color-detail-panel .stats-grid span:nth-child(odd) {
    text-align: left;
}

/* === OSTATECZNA POPRAWKA: Poprawne skalowanie emoji w małych ikonach statystyk === */

/* Ustawiamy stały, mały rozmiar dla wszystkich ikonek w kontenerach statystyk */
.fav-color-stat .ball-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0; /* Zapobiega kurczeniu się ikonki wewnątrz flexboxa */
}

/* Namierzamy emoji TYLKO wewnątrz tych małych ikonek */
.fav-color-stat .ball-icon .ball-emoji {
    font-size: 10px !important; /* Mały, stały rozmiar w pikselach. !important dla pewności. */
    -webkit-text-stroke: 0;     /* Wyłączamy obwódkę, która źle wygląda na małym rozmiarze */
    text-shadow: none;          /* Wyłączamy cień, który może rozmazywać emoji */
}

/* Przycisk Powtórek (Zielony) */
.menu-icon-buttons #menu-replays-btn {
    background-color: #28a745; /* Zielony, jak "play" */
    border: 5px solid #218838;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.5);
}
.menu-icon-buttons #menu-replays-btn:hover {
    background-color: #2ebf4f;
    border-color: #1e7e34;
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.7);
}

/* === STYLE DLA TRYBU POWTÓRKI === */
.replay-mode #header,
.replay-mode #button-container,
.replay-mode .game-icon-buttons,
.replay-mode #xp-circle-container,
.replay-mode #back-to-menu-btn,
.replay-mode #pause-btn,
.replay-mode #game-toggle-music-btn,
.replay-mode > h1 {
    display: none !important;
}

/* NOWA REGUŁA: Wyłącza animację trzęsienia się planszy (i tym samym scrollbary) podczas powtórki. */
.replay-mode #game-board.board-combo-shake {
    animation: none !important;
}

/* Opcjonalnie: możemy też wycentrować planszę, gdy reszta zniknie */
.replay-mode {
    padding-top: 50px;
    padding-bottom: 50px;
    overflow: hidden !important;
}

/* === POPRAWKA WYGLĄDU AKCESORIÓW W PODGLĄDZIE NASTĘPNYCH KULEK === */
#next-balls .ball-accessory {
    /* Zapobiega obracaniu się lub skalowaniu akcesoriów, co w małym rozmiarze wyglądałoby źle */
    transform: none !important;
    /* Usuwa ewentualne filtry (np. cienie), które mogą rozmazywać obraz */
    filter: none !important;
}

/* === POPRAWKA: Skalowanie emoji w podglądzie następnych kulek === */
#next-balls .ball-emoji {
    /* Znacząco zmniejszamy bazowy rozmiar emoji, aby był proporcjonalny do małej kulki */
    font-size: 45%; 
    
    /* Usuwamy obwódkę, która na tak małym rozmiarze wyglądałaby źle */
    -webkit-text-stroke: 0; 
    
    /* Możemy też lekko zmniejszyć cień dla lepszej czytelności */
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.6); 
}

.save-actions .btn-edit-replay {
    background-color: #ffc107;
    font-size: 1.2em;
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.save-actions .btn-edit-replay:hover {
    background-color: #e0a800;
}

/* === POPRAWIONE STYLE DLA KONTROLEK POWTÓRKI === */
#replay-controls {
    /* Upewniamy się, że flexbox działa po usunięciu display:none przez JS */
    display: flex; 
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
}

/* Ogólny, nowy styl dla przycisków w panelu */
#replay-controls button {
    background-color: #e9ecef;
    color: #343a40;
    border: 1px solid #adb5bd;
    border-radius: 6px;
    padding: 6px 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease-out;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Efekt po najechaniu myszką */
#replay-controls button:hover {
    background-color: #f8f9fa;
    border-color: #868e96;
    transform: translateY(-1px);
}

/* Efekt wciśnięcia przycisku */
#replay-controls button:active {
    transform: translateY(1px);
    background-color: #dee2e6;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
}

/* Specjalny, wyróżniający styl dla aktywnego przycisku prędkości */
#replay-controls .replay-speed.active {
    background-color: #007bff;
    color: white;
    border-color: #0056b3;
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.6);
}

/* Przycisk przełączania widoczności - teraz dziedziczy styl ogólny */
#toggle-replay-overview-btn {
    margin-left: 15px; /* Dodaje separator wizualny */
}

/* Styl dla aktywnego przycisku panelu (z poświatą) */
#toggle-replay-overview-btn.active {
    background-color: #007bff;
    border-color: #0056b3;
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.6);
}

/* === POCZĄTEK POPRAWKI === */
/* Ta reguła zapobiega zmianie koloru aktywnego przycisku po najechaniu */
#toggle-replay-overview-btn.active:hover {
    background-color: #007bff; /* Zachowaj niebieskie tło */
    border-color: #0056b3;     /* Zachowaj ciemnoniebieską ramkę */
}
/* === KONIEC POPRAWKI === */

/* Zmiana koloru ikony w aktywnym przycisku na biały */
#toggle-replay-overview-btn.active i {
    color: white;
}

/* === NOWE STYLE DLA WYBORU ROZMIARU PLANSZY === */
#size-select-container {
    /* Używamy tych samych właściwości co #main-menu-container, aby był wycentrowany */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 199; /* Lekko pod menu głównym, ale widoczny po tranzycji */
    color: white;
    text-align: center;
}
/* Używamy klasy zamiast ID, aby styl pasował do obu ekranów wyboru */
.size-select-buttons {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin: 20px 0;
}
.size-btn {
    padding: 20px;
    width: 150px;
    height: 150px;
    font-size: 1.2em;
    cursor: pointer;
    border: 3px solid #0056b3;
    border-radius: 12px;
    background-color: #007bff;
    color: white;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.4);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.size-btn:hover {
    transform: translateY(-5px) scale(1.05);
    background-color: #0056b3;
    box-shadow: 0 8px 25px rgba(0, 86, 179, 0.6);
}
.size-btn.active {
    transform: translateY(-5px) scale(1.05);
    background-color: #0056b3;
    box-shadow: 0 8px 25px rgba(0, 86, 179, 0.6);
    border-color: #a8d5ff;
}
.size-btn-title {
    font-weight: bold;
    font-size: 1.3em;
    display: block;
}
.size-btn-dim {
    font-size: 1.1em;
    opacity: 0.8;
    display: block;
    margin-top: 10px;
}

/* === POCZĄTEK ZMIAN === */
/* Zmieniamy selektor, aby obejmował oba przyciski powrotu */
#size-select-back-btn,
#chaos-size-select-back-btn {
    /* Style spójne z przyciskami w menu */
    padding: 12px 25px;
    font-size: 1.1em;
    cursor: pointer;
    border: none;
    border-radius: 8px;
    background-color: #6c757d;
    color: white;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(108, 117, 125, 0.4);
}

/* Zmieniamy również selektor dla stanu :hover */
#size-select-back-btn:hover,
#chaos-size-select-back-btn:hover {
    transform: translateY(-3px);
    background-color: #5a6268;
    box-shadow: 0 6px 20px rgba(108, 117, 125, 0.6);
}
#high-scores-size-toggle .toggle-btn {
    flex: 1;
    padding: 8px; /* Mniejszy padding */
    border: none;
    background-color: #f0f0f0;
    cursor: pointer;
    font-size: 0.9em; /* Mniejsza czcionka */
    transition: background-color 0.2s;
}
#high-scores-size-toggle .toggle-btn.active {
    background-color: #007bff;
    color: white;
}

/* === STYLE DLA NOWEGO SELEKTORA JĘZYKA === */
#language-selector {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #fff;
    font-size: 1em;
    cursor: pointer;
}

body.dark-mode #language-selector {
    background-color: #2c3e50;
    color: #ecf0f1;
    border-color: #4a617a;
}

/* === NOWE STYLE DLA PRZEŁĄCZNIKA JĘZYKA W MENU GŁÓWNYM === */

#main-menu-language-switcher {
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 10px;
}

#main-menu-language-switcher select {
    background-color: rgba(0, 0, 0, 0.3);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 5px 30px 5px 10px; /* Dodatkowe miejsce po prawej na strzałkę */
    font-size: 0.9em;
    font-weight: bold;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M7 10l5 5 5-5z' fill='%23ffffff'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 18px;
    transition: background-color 0.2s, border-color 0.2s;
}

#main-menu-language-switcher select:hover {
    background-color: rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.4);
}

#main-menu-language-switcher select:focus {
    outline: none;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

/* Styl dla opcji w liście rozwijanej */
#main-menu-language-switcher option {
    background-color: #1d2b49; /* Ciemne tło, pasujące do menu */
    color: #fff;
}

/* === NOWE STYLE DLA NUMERU WERSJI W MENU === */
.version-info {
    position: absolute;
    bottom: 10px;
    right: 15px;
    font-size: 0.7em;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.5);
    pointer-events: none; /* Zapobiega przypadkowemu kliknięciu/zaznaczeniu */
}

/* Stylizujemy pasek przewijania, aby pasował do ciemnego motywu menu */
.menu-content::-webkit-scrollbar {
  width: 10px;
}

.menu-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2); 
  border-radius: 5px;
}

.menu-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 5px;
}

.menu-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* Uproszczona wersja dla Firefox */
.menu-content {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.2);
}

/* === POPRAWKA: Przewijanie widoku gry na mniejszych ekranach === */

/* 2. Stylizujemy nowy pasek przewijania (dla spójności) */
#game-container::-webkit-scrollbar {
  width: 10px;
}

#game-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 5px;
}

#game-container::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 5px;
}

#game-container::-webkit-scrollbar-thumb:hover {
  background: #aaa;
}

/* 3. Style paska przewijania dla trybu ciemnego */
body.dark-mode #game-container::-webkit-scrollbar-track {
  background: #2c3e50;
}

body.dark-mode #game-container::-webkit-scrollbar-thumb {
  background: #4a617a;
}

body.dark-mode #game-container::-webkit-scrollbar-thumb:hover {
  background: #5dade2;
}

/* 4. Wsparcie dla Firefox */
#game-container {
    max-height: 98vh;
    overflow-y: auto;   /* Pokazuje pionowy pasek przewijania TYLKO, gdy jest potrzebny */
    overflow-x: hidden; /* <-- DODAJ TĘ LINIĘ */
    box-sizing: border-box;
    padding-bottom: 30px;
}
body.dark-mode #game-container {
  scrollbar-color: #4a617a #2c3e50;
}

/* ============================================== */
/* === STYLE DLA NOWEJ KULKI - HOLOGRAFICZNEJ === */
/* ============================================== */

/* ZMIANA: Nowa, subtelniejsza i wolniejsza animacja połysku */
@keyframes performant-holographic-flicker {
  0%, 100% { filter: brightness(0.95) drop-shadow(0 0 3px var(--holo-color2)); }
  50% { filter: brightness(1.05) drop-shadow(0 0 4px var(--holo-color2)); }
}

/* --- 1. Styl dla podglądu w menu skórek i w sklepie (BEZ ZMIAN) --- */
.ball-style-option[data-style-id="holographic"] .ball-preview .ball {
    background: 
        linear-gradient(rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 100%),
        repeating-linear-gradient(0deg, var(--holo-line-color) 0, var(--holo-line-color) 1px, transparent 1px, transparent 4px),
        linear-gradient(135deg, var(--holo-color1) 0%, var(--holo-color2) 50%, var(--holo-color3) 100%);
    background-size: 100%, 100%, 200% 200%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: none;
    filter: none;
    animation: none; 
}
/* Definicje kolorów dla podglądu (BEZ ZMIAN) */
.ball-style-option[data-style-id="holographic"] .ball.red   { --holo-color1: #ff6b6b99; --holo-color2: #ff8b8b99; --holo-color3: #c92a2a99; --holo-line-color: rgba(255,255,255,0.1); }
.ball-style-option[data-style-id="holographic"] .ball.green { --holo-color1: #7fff7f99; --holo-color2: #7fffbf99; --holo-color3: #4fcf4f99; --holo-line-color: rgba(255,255,255,0.1); }
.ball-style-option[data-style-id="holographic"] .ball.blue  { --holo-color1: #7f7fff99; --holo-color2: #7fbfff99; --holo-color3: #4f4fff99; --holo-line-color: rgba(255,255,255,0.1); }


/* --- 2. ZMODYFIKOWANY Globalny styl, gdy jest aktywny w grze --- */
body.ball-style-holographic .ball {
    background: 
        linear-gradient(rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 100%),
        repeating-linear-gradient(0deg, var(--holo-line-color) 0, var(--holo-line-color) 1px, transparent 1px, transparent 4px),
        linear-gradient(135deg, var(--holo-color1) 0%, var(--holo-color2) 50%, var(--holo-color3) 100%);
    background-size: 100%, 100%, 100% 100%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: none;
    /* ZMIANA: Używamy nowej animacji i znacznie wydłużamy jej czas trwania */
    animation: performant-holographic-flicker 6s ease-in-out infinite;
}

/* --- 3. NADPISANIA ANIMACJI DLA SPECJALNYCH STANÓW (BEZ ZMIAN) --- */
body.ball-style-holographic .ball.ball-appear {
    animation: appear 0.3s ease-in-out;
}
body.ball-style-holographic .ball.selected {
    animation: pulse 1s ease-in-out infinite;
}
body.ball-style-holographic .ball.selected.shake-error {
    animation: shake 0.4s ease-in-out;
}


/* --- 4. Definicje kolorów dla stylu w grze (BEZ ZMIAN) --- */
body.ball-style-holographic .ball { --holo-line-color: rgba(255,255,255,0.1); }
body.ball-style-holographic .ball.red    { --holo-color1: #ff6b6bBB; --holo-color2: #ff8b8bBB; --holo-color3: #c92a2aBB; }
body.ball-style-holographic .ball.green  { --holo-color1: #7fff7fBB; --holo-color2: #7fffbfBB; --holo-color3: #4fcf4fBB; }
body.ball-style-holographic .ball.blue   { --holo-color1: #8a8affBB; --holo-color2: #7fbfffBB; --holo-color3: #4f4fffBB; }
body.ball-style-holographic .ball.yellow { --holo-color1: #ffff7fBB; --holo-color2: #d4ff7fBB; --holo-color3: #ffdf7fBB; }
body.ball-style-holographic .ball.fuchsia{ --holo-color1: #ff7fffBB; --holo-color2: #e066ffBB; --holo-color3: #d958d9BB; }
body.ball-style-holographic .ball.cyan   { --holo-color1: #7bffffBB; --holo-color2: #48d1ccBB; --holo-color3: #7fffd4BB; }
body.ball-style-holographic .ball.orange { --holo-color1: #ffbf7fBB; --holo-color2: #ffdf7fBB; --holo-color3: #ff8f5fBB; }

/* --- 5. Poprawka dla podglądu w sklepie, aby nie animował (BEZ ZMIAN) --- */
.shop-item-preview .ball-style-option[data-style-id="holographic"] .ball-preview .ball {
    animation: none !important;
}

/* ============================================== */
/* === POPRAWKA WIDOCZNOŚCI PODGLĄDU W SKLEPIE === */
/* ============================================== */

/* Ustawiamy ciemne tło dla podglądu stylu holograficznego, aby był widoczny */
.shop-item-preview .ball-style-option[data-style-id="holographic"] {
    background-color: #2c3e50; /* Ciemny kolor z motywu dark */
    border-radius: 8px;      /* Zaokrąglenie, aby pasowało */
    padding: 5px;            /* Trochę wewnętrznego odstępu */
    box-sizing: border-box;  /* Ważne dla poprawnego wymiarowania */
}

/* Zapewniamy, że podgląd w sklepie nie ma niechcianej animacji */
.shop-item-preview .ball-style-option[data-style-id="holographic"] .ball-preview .ball {
    animation: none !important;
}

.save-actions {
    display: grid;
    grid-template-columns: repeat(3, auto); /* Tworzy 3 kolumny dla przycisków akcji */
    gap: 5px;
    justify-content: end; /* Wyrównuje całą siatkę do prawej strony */
}

.save-actions .btn-delete {
    grid-column: 1 / -1;   /* Sprawia, że przycisk Usuń zajmuje całą szerokość siatki */
    justify-self: center;  /* Centruje ten konkretny przycisk w jego wierszu */
}

/* Styl dla przycisku "Zapisz" po udanej operacji */
.btn-save.btn-save-confirmed {
    background-color: #218838; /* Ciemniejszy, potwierdzający zielony */
    opacity: 0.8;
    cursor: default;
    transition: none; /* Wyłączamy animacje dla tego stanu */
}

.btn-save.btn-save-confirmed:hover {
    background-color: #218838; /* Zapobiegamy zmianie koloru po najechaniu */
}

.setting-row .toggle-switch {
    justify-self: start; /* Wyrównuje przełącznik do lewej krawędzi jego komórki w siatce */
}

.setting-row input[type="range"],
.setting-row .volume-value {
    align-self: center; /* Przywraca centrowanie w pionie dla tych konkretnych elementów */
}

/* === STYLE DLA NOWEGO ODTWARZACZA MUZYKI === */

#music-player-container {
    display: flex;
    align-items: center;
    background-color: #28a745;
    border: 3px solid #218838;
    box-shadow: 0 4px 10px rgba(40, 167, 69, 0.4);
    
    /* Ustawiamy początkowy, okrągły kształt i rozmiar */
    width: 36px;
    height: 36px;
    border-radius: 18px; /* Połowa wysokości/szerokości */
    
    /* Animacja zmiany kształtu i szerokości */
    transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out;
    overflow: hidden; /* Ukrywa zawartość, która się nie mieści */
}

/* Stan "rozwinięty" odtwarzacza */
#music-player-container.expanded {
    width: 380px; /* Nowa, prostokątna szerokość */
    border-radius: 8px;
}

/* 1. NOWA, WSPÓLNA klasa dla OBU przycisków (włącz/wyłącz i losuj) */
.toggle-music-btn {
    width: 36px;
    height: 36px;
    border: none;
    background-color: transparent;
    box-shadow: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 2. Zostawiamy tylko unikalny styl dla głównego przycisku */
#toggle-music-btn {
    flex-shrink: 0; /* Upewniamy się, że ten przycisk się nie kurczy */
}

#toggle-music-btn:hover {
    transform: none;
    box-shadow: none;
}

/* Styl dla oryginalnej ikony nutki */
#toggle-music-btn img {
    width: 18px;
    height: 18px;
    filter: invert(1) brightness(2);
}

/* Ukrywa przycisk losowania, gdy odtwarzacz jest zwinięty */
#shuffle-track-btn {
    opacity: 0;
    width: 0;
    overflow: hidden;
    /* Animacja ZWIJANIA: Czekaj 0.2s, potem szybko zniknij w 0.1s */
    transition: opacity 0.1s ease-in 0.2s, width 0.1s ease-in 0.2s;
}
/* Pokazuje go, gdy odtwarzacz jest rozwinięty */
#music-player-container.expanded #shuffle-track-btn {
    opacity: 1;
    width: 36px;
    /* Animacja ROZWIJANIA: Czekaj 0.1s, potem pojaw się w 0.2s */
    transition: opacity 0.2s ease-out 0.1s, width 0.2s ease-out 0.1s;
}

/* NOWY styl dla naszej ikony losowania */
#shuffle-track-btn i {
    font-size: 16px; /* Dopasowujemy rozmiar ikony */
    color: white;    /* Bezpośrednio ustawiamy biały kolor */
}

/* === DODANY NOWY STYL DLA AKTYWNEGO PRZYCISKU LOSOWANIA === */
#shuffle-track-btn.active i {
    color: #ffc107;
    text-shadow: 0 0 8px #ffc107;
    animation: breathe 1.5s ease-in-out infinite;
}
/* === KONIEC NOWEGO STYLU === */

/* Styl dla stanu wyciszonego (gdy jest okrągły) */
#music-player-container.muted {
    background-color: #6c757d;
    border-color: #494f54;
    box-shadow: 0 4px 10px rgba(108, 117, 125, 0.4);
}

/* Kontener na listę rozwijaną */
#playlist-container {
    width: 0; /* Domyślnie schowany */
    opacity: 0;
    overflow: hidden;
    transition: width 0.3s 0.1s ease-in-out, opacity 0.3s 0.1s ease-in-out;
    padding-left: 10px;
}

#music-player-container.expanded #playlist-container {
    width: 170px; /* ZWIĘKSZONA SZEROKOŚĆ */
    opacity: 1;
}

/* Lista rozwijana z utworami */
#track-selector {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 0.85em;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M7 10l5 5 5-5z' fill='%23ffffff'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 14px;
}

#track-selector:focus {
    outline: none;
}

/* Kontener na suwak głośności */
#music-volume-container {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 0;
    opacity: 0;
    overflow: hidden;
    transition: width 0.3s 0.1s ease-in-out, opacity 0.3s 0.1s ease-in-out;
}

#music-player-container.expanded #music-volume-container {
    width: 120px; /* ZMNIEJSZONA SZEROKOŚĆ */
    opacity: 1;
    padding-left: 5px;
    padding-right: 10px;
    box-sizing: border-box;
}


#music-volume-container i {
    color: white;
    opacity: 0.7;
}

/* Styl suwaka głośności w menu */
#music-volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 5px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    outline: none;
    transition: opacity .2s;
    cursor: pointer;
}

#music-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
}

#music-volume-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    border: none;
}

@keyframes board-shake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(4px, -2px) rotate(0.5deg); }
  50% { transform: translate(-4px, 2px) rotate(-0.5deg); }
  75% { transform: translate(2px, 2px) rotate(0.5deg); }
}
.board-combo-shake {
  animation: board-shake 0.3s ease-in-out;
}

@keyframes timer-pulse-warning {
  0%, 100% {
    transform: scale(1);
    color: inherit; /* Używa domyślnego koloru tekstu */
    text-shadow: none;
  }
  50% {
    transform: scale(1.15); /* Lekko powiększamy tekst */
    color: #ff3838; /* Bardziej żywy czerwony */
    text-shadow: 0 0 8px rgba(255, 56, 56, 0.7); /* Dodajemy czerwoną poświatę */
  }
}

/* Klasa, którą będziemy dynamicznie dodawać i usuwać */
.timer-warning {
  animation: timer-pulse-warning 1s ease-in-out infinite;
}

#timer-container {
    margin-left: 25px;
    padding-left: 25px;
    position: relative;
}

/* Wersja separatora dla trybu ciemnego */
body.dark-mode #timer-container::before {
    background-color: #4a617a; /* Ciemniejszy, pasujący kolor */
}

#timer-container {
    margin-left: 25px; /* Tworzy odstęp od sekcji "Wynik" */
    padding-left: 25px; /* Robi miejsce po lewej stronie na separator */
    position: relative; /* Niezbędne, aby separator się poprawnie pozycjonował */
}

/* Tworzymy pionową linię-separator za pomocą pseudo-elementu */
#timer-container::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 24px; /* Wysokość separatora */
    background-color: #ddd; /* Kolor separatora */
}

/* Wersja separatora dla trybu ciemnego */
body.dark-mode #timer-container::before {
    background-color: #4a617a; /* Ciemniejszy, pasujący kolor */
}

/* NOWE STYLE DLA PRZYCISKU CHAOSU */
#menu-buttons #menu-new-game-chaos {
    background-color: #9b59b6; /* Fioletowy, kolor chaosu/magii */
    box-shadow: 0 4px 15px rgba(155, 89, 182, 0.4);
}
#menu-buttons #menu-new-game-chaos:hover {
    transform: translateY(-3px);
    background-color: #8e44ad;
    box-shadow: 0 6px 20px rgba(142, 68, 173, 0.6);
}

/* NOWE STYLE DLA POZIOMEGO UKŁADU PRZYCISKÓW TRYBÓW GRY */
.gamemode-select-container {
    display: grid; /* Zmieniono na grid */
    grid-template-columns: 1fr 1fr; /* Dwie równe kolumny */
    gap: 15px;
    width: 100%;
}

.gamemode-select-container button {
    flex: 1; /* Każdy przycisk zajmuje tyle samo miejsca */
    padding: 15px 10px; /* Zmniejszamy padding boczny, by tekst się zmieścił */
    font-size: 1.1em; /* Lekko zmniejszamy czcionkę */
}

#menu-buttons #menu-new-game-chaos {
    background-color: #9b59b6; /* Fioletowy */
    box-shadow: 0 4px 15px rgba(155, 89, 182, 0.4);
}
#menu-buttons #menu-new-game-chaos:hover {
    transform: translateY(-3px);
    background-color: #8e44ad;
    box-shadow: 0 6px 20px rgba(142, 68, 173, 0.6);
}


/* === ZAKTUALIZOWANE STYLE DLA KARTY WYNIKU (WERSJA JASNA) === */
#share-card-container {
    position: fixed;
    top: 0;
    left: -9999px;
    z-index: -1; 
    opacity: 0; 
    pointer-events: none;
    width: 400px;
    padding: 25px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.85); /* Jaśniejsze tło */
    background-image: url('images/tlo.jpg');
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    color: #333; /* Domyślny kolor tekstu na ciemny */
}

.share-card-header {
    text-align: center;
}

.share-card-header h2 {
    font-size: 2.2em;
    color: #1d2b49; /* Ciemnoniebieski, pasujący do motywu */
    font-family: 'Fredoka One', cursive;
    margin: 0;
    text-shadow: 0 2px 3px rgba(255,255,255,0.5); /* Jasny cień */
}

.share-card-header h3 {
    font-size: 1.2em;
    color: #4a617a; /* Ciemnoszary, czytelny kolor */
    margin: 0;
    font-weight: 400;
    text-shadow: none; /* Usunięty cień dla czystości */
}

.share-card-score-section {
    background-color: #007bff; /* Żywy niebieski kolor tła */
    border: none;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
}

#share-card-score-label {
    font-size: 1.1em;
    color: rgba(255, 255, 255, 0.9); /* Jasny kolor etykiety */
}

#share-card-score-value {
    font-size: 3.5em;
    font-weight: bold;
    color: #ffc107; /* Złoty, wyróżniający się kolor */
    line-height: 1.1;
    text-shadow: 0 0 10px #ffc107, 0 0 20px rgba(255, 193, 7, 0.5);
}

.share-card-stats-section {
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.05); /* Bardzo subtelne, ciemne tło */
    border-radius: 8px;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    font-size: 1em;
    color: #1d2b49; /* Ciemny kolor tekstu */
}

.stat-label {
    color: #6c757d; /* Szary kolor dla etykiet */
}

.stat-value {
    font-weight: bold;
    color: #1d2b49; /* Ciemny kolor dla wartości */
}

.share-card-footer {
    text-align: center;
    font-size: 0.75em;
    color: #6c757d; /* Szary, czytelny kolor */
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* Wersja dla trybu ciemnego */
body.dark-mode #share-card-container {
    background-color: #1d2b49;
    background-image: url('images/tlo-tryb-ciemny.png');
    border-color: rgba(255, 255, 255, 0.2);
    color: #ecf0f1; /* Jasny tekst dla trybu ciemnego */
}
body.dark-mode .share-card-header h2,
body.dark-mode .share-card-header h3 {
    color: white;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
body.dark-mode .share-card-stats-section {
    background-color: rgba(255, 255, 255, 0.05);
}
body.dark-mode .stat-item,
body.dark-mode .stat-value {
    color: #ecf0f1;
}
body.dark-mode .stat-label {
    color: rgba(255, 255, 255, 0.7);
}
body.dark-mode .share-card-footer {
    color: rgba(255, 255, 255, 0.6);
    border-top-color: rgba(255, 255, 255, 0.2);
}

#main-menu-top-bar {
    position: absolute;
    top: 40px;
    left: 60px;
    right: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
}

.menu-content h1 {
    font-size: 3.5em;
    margin: 70px 0 0 0;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
    font-family: 'Fredoka One', cursive;
}

/* Przycisk Najlepszych Wyników (Złoty) */
.menu-icon-buttons #menu-high-scores-icon {
    background-color: #ffe7b3; 
    border: 5px solid #ffd67d;
    box-shadow: 0 4px 15px rgba(255, 214, 125, 0.5); /* Zastąpiono filter */
}
.menu-icon-buttons #menu-high-scores-icon:hover {
    background-color: #fff4dd; 
    border-color: #fcc347;
    box-shadow: 0 6px 20px rgba(255, 214, 125, 0.7); /* Zastąpiono filter */
}

/* Przycisk Osiągnięć */
.menu-icon-buttons #menu-achievements-btn {
    background-color: #63cdda; 
    border: 5px solid #4bb8c5;
    box-shadow: 0 4px 15px rgba(99, 205, 218, 0.5); /* Zastąpiono filter */
}
.menu-icon-buttons #menu-achievements-btn:hover {
    background-color: #79e0ee;
    border-color: #3aa3b1;
    box-shadow: 0 6px 20px rgba(99, 205, 218, 0.7); /* Zastąpiono filter */
}

/* Przycisk Powtórek (Zielony) */
.menu-icon-buttons #menu-replays-btn {
    background-color: #28a745;
    border: 5px solid #218838;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.5); /* Zastąpiono filter */
}
.menu-icon-buttons #menu-replays-btn:hover {
    background-color: #2ebf4f;
    border-color: #1e7e34;
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.7); /* Zastąpiono filter */
}

/* Przycisk Skórek (Niebieski) */
.menu-icon-buttons #menu-skins-btn {
    background-color: #007bff;
    border: 5px solid #0056b3;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.4); /* Zastąpiono filter */
}
.menu-icon-buttons #menu-skins-btn:hover {
    background-color: #3395ff;
    border-color: #004a99;
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.6); /* Zastąpiono filter */
}

/* Przycisk Statystyk (Fioletowy) */
.menu-icon-buttons #menu-stats-btn {
    background-color: #a29bfe; 
    border: 5px solid #8e84e5;
    box-shadow: 0 4px 15px rgba(162, 155, 254, 0.5); /* Zastąpiono filter */
}
.menu-icon-buttons #menu-stats-btn:hover {
    background-color: #b1a9ff;
    border-color: #7d70e0;
    box-shadow: 0 6px 20px rgba(162, 155, 254, 0.7); /* Zastąpiono filter */
}

/* Przycisk Ustawień (Szary) */
.menu-icon-buttons #menu-settings-btn {
    background-color: #adb5bd; 
    border: 5px solid #868e96;
    box-shadow: 0 4px 15px rgba(173, 181, 189, 0.5); /* Zastąpiono filter */
}
.menu-icon-buttons #menu-settings-btn:hover {
    background-color: #ced4da;
    border-color: #6c757d;
    box-shadow: 0 6px 20px rgba(173, 181, 189, 0.7); /* Zastąpiono filter */
}

/* Przycisk Pomocy (Szary) */
.menu-icon-buttons #menu-help-btn-icon {
    background-color: #6c757d;
    border: 5px solid #494f54;
    box-shadow: 0 4px 15px rgba(108, 117, 125, 0.4); /* Zastąpiono filter */
}
.menu-icon-buttons #menu-help-btn-icon:hover {
    background-color: #868e96;
    border-color: #383d41;
    box-shadow: 0 6px 20px rgba(108, 117, 125, 0.6); /* Zastąpiono filter */
}

/* Zaktualizowana reguła, aby obejmowała wszystkie przyciski w menu */
#menu-buttons > button,
.gamemode-select-container button,
#time-attack-options-container .menu-buttons button { /* <-- POPRAWKA TUTAJ */
    padding: 15px 25px;
    font-size: 1.2em;
    cursor: pointer;
    border: none;
    border-radius: 8px;
    background-color: #007bff;
    color: white;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.4);
    position: relative;
    overflow: hidden;
}

/* === POCZĄTEK NOWEGO KODU: EFEKT ODBICIA ŚWIATŁA === */
.gamemode-select-container button::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%; /* Startuje całkowicie poza przyciskiem */
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: skewX(-25deg); /* Pochylenie dla dynamicznego wyglądu */
    transition: left 0.8s cubic-bezier(0.23, 1, 0.32, 1); /* Płynna animacja */
}

.gamemode-select-container button:hover::after {
    left: 150%; /* Przesuwa się na drugą stronę przycisku */
}
/* === KONIEC NOWEGO KODU === */

/* Nowe, specyficzne style dla przycisków na ekranie "Próba Czasu" */
#time-attack-start-btn {
    background-color: #28a745; /* Zielony */
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
}

/* Nowe, specyficzne style dla przycisków na ekranie "Próba Czasu" */
#time-attack-start-btn {
    background-color: #28a745; /* Zielony */
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
}
#time-attack-start-btn:hover {
    background-color: #218838;
    box-shadow: 0 6px 20px rgba(33, 136, 56, 0.6);
}

#time-attack-back-btn {
    background-color: #6c757d; /* Szary */
    box-shadow: 0 4px 15px rgba(108, 117, 125, 0.4);
}
#time-attack-back-btn:hover {
    background-color: #5a6268;
    box-shadow: 0 6px 20px rgba(108, 117, 125, 0.6);
}

/* Kontener dla przycisków wyboru czasu trwania */
#time-attack-duration-select-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 15px 0 40px 0;
}

/* Styl pojedynczego przycisku czasu trwania */
.duration-btn {
    padding: 8px 18px;
    font-size: 0.95em;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px; /* Zaokrąglone rogi dla kształtu "pastylki" */
    background-color: rgba(0, 0, 0, 0.25);
    color: #fff;
    font-weight: 500;
    transition: all 0.2s ease;
}

/* Efekt po najechaniu myszką */
.duration-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Styl dla aktywnego (wybranego) przycisku */
.duration-btn.active {
    background-color: #fff;
    color: #1d2b49; /* Ciemnoniebieski tekst */
    border-color: #fff;
    font-weight: bold;
    transform: scale(1.05); /* Lekkie powiększenie aktywnej opcji */
}

/* === STYLE DLA NOWEGO PRZEŁĄCZNIKA CZASU WYNIKÓW === */

#high-scores-duration-toggle {
    margin-top: 10px; /* Odstęp od przełącznika rozmiaru */
    margin-bottom: 15px; /* Odstęp od listy wyników */
    display: flex;
    justify-content: center;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
}

#high-scores-duration-toggle .toggle-btn {
    flex: 1;
    padding: 6px 12px;
    font-size: 0.85em;
    background-color: #f0f0f0;
    color: #333;
    border: none;
    border-left: 1px solid #ccc;
    cursor: pointer;
    transition: all 0.2s ease;
}

#high-scores-duration-toggle .toggle-btn:first-child {
    border-left: none;
}

#high-scores-duration-toggle .toggle-btn.active {
    background-color: #007bff;
    color: white;
    font-weight: bold;
}

#high-scores-duration-toggle .toggle-btn:not(.active):hover {
    background-color: #e2e6ea;
}

/* Poprawki dla trybu ciemnego */
body.dark-mode #high-scores-duration-toggle {
    border-color: #4a617a;
}
body.dark-mode #high-scores-duration-toggle .toggle-btn {
    background-color: #2c3e50;
    color: #ecf0f1;
    border-left-color: #4a617a;
}
body.dark-mode #high-scores-duration-toggle .toggle-btn.active {
    background-color: #5dade2;
    color: #1d2b49;
}
body.dark-mode #high-scores-duration-toggle .toggle-btn:not(.active):hover {
    background-color: #4a617a;
}

/* === STYLE DLA PODGLĄDU UDOSTĘPNIANEGO OBRAZKA === */

/* Kontener na obrazek i spinner */
#share-image-container,
#historic-share-image-container {
    width: 100%;
    margin: 20px auto 0 auto;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background-color: #f8f9fa;
    min-height: 200px; /* Minimalna wysokość, gdy obrazek się ładuje */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden; /* Ukrywa wystające krawędzie obrazka */
}

/* Właściwy obrazek podglądu */
#share-image-preview,
#historic-share-image-preview {
    display: block;
    max-width: 100%; /* KLUCZOWE: Obrazek nie będzie szerszy niż kontener */
    height: auto;    /* KLUCZOWE: Zachowuje proporcje obrazka */
    border-radius: 8px;
}

/* Spinner ładowania */
.share-image-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    color: #6c757d;
    font-size: 1.1em;
}

.spinner {
    border: 5px solid #e9ecef;
    border-top: 5px solid #007bff;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Wersja dla trybu ciemnego */
body.dark-mode #share-image-container,
body.dark-mode #historic-share-image-container {
    background-color: #2c3e50;
    border-color: #4a617a;
}
body.dark-mode .share-image-spinner {
    color: #bdc3c7;
}
body.dark-mode .spinner {
    border: 5px solid #4a617a;
    border-top: 5px solid #5dade2;
}

/* Dostosowanie okna modalnego, aby miało odpowiedni rozmiar */
#share-modal .modal-content,
#historic-share-modal .modal-content {
    width: 90%;
    max-width: 500px;
}

/* Kontener na przyciski statystyk i udostępniania */
#game-over-secondary-actions {
    margin-top: 25px; 
    display: flex; /* Ustawia przyciski w jednym rzędzie */
    gap: 20px; /* Dodaje odstęp między przyciskami */
    justify-content: center; /* Centruje przyciski */
}

/* Przycisk Pokaż Statystyki (niebieski) */
#gameOver-show-stats {
    background-color: #007bff;
    width: 60px;
    height: 60px;
    padding: 0;
    border-radius: 50%;
    border: 3px solid #0056b3;
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.4);
}
#gameOver-show-stats:hover {
    background-color: #0056b3;
    transform: translateY(-2px) scale(1.05);
}
#gameOver-show-stats:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.4);
}
#gameOver-show-stats img {
    width: 28px;
    height: 28px;
    filter: invert(1);
}

/* NOWY KOD: Styl dla przycisku "Zapisz Powtórkę" */
#gameOver-save-replay {
    padding: 10px 20px;
    font-size: 0.8em;
    font-weight: bold;
    cursor: pointer;
    border: none;
    border-radius: 8px;
    color: white;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    background-color: #007bff; /* Niebieski, jak przycisk statystyk */
    margin-top: 20px; /* Odstęp od ikon powyżej */
}

#gameOver-save-replay:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
    background-color: #0056b3;
}

/* NOWE STYLE: Przycisk Udostępnij Wynik (zielony) */
#gameOver-share-score {
    background-color: #28a745; /* Zielony kolor */
    width: 60px;
    height: 60px;
    padding: 0;
    border-radius: 50%;
    border: 3px solid #218838; /* Ciemniejsza zielona ramka */
    box-shadow: 0 4px 10px rgba(40, 167, 69, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}
#gameOver-share-score:hover {
    background-color: #218838;
    transform: translateY(-2px) scale(1.05);
}
#gameOver-share-score:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.4);
}
#gameOver-share-score img {
    width: 28px;
    height: 28px;
    filter: invert(1); /* Zapewnia, że ikona jest biała */
}

/* Nowy, złoty styl dla przycisku "Próba Czasu" */
#menu-buttons #menu-new-game-time-attack {
    background-color: #ffc107; /* Złoty kolor */
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.4);
}
#menu-buttons #menu-new-game-time-attack:hover {
    transform: translateY(-3px);
    background-color: #e0a800; /* Ciemniejszy złoty po najechaniu */
    box-shadow: 0 6px 20px rgba(224, 168, 0, 0.6);
}

/* Nowy, zielony styl dla przycisku pobierania powtórki */
#share-download-replay-btn {
    background-color: #28a745; /* Zielony kolor */
}

#share-download-replay-btn:hover {
    background-color: #218838; /* Ciemniejszy zielony po najechaniu */
}

/* === POPRAWIONE STYLE DLA PRZYCISKU MUZYKI W GRZE === */

/* Główny styl przycisku */
#game-toggle-music-btn {
    position: absolute;
    top: 7px;
    right: 55px; /* Pozycjonujemy go na lewo od przycisku pauzy */
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%; 
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
    z-index: 241;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Styl ikony wewnątrz przycisku */
#game-toggle-music-btn img {
    width: 20px;
    height: 20px;
}

/* Efekt po najechaniu myszką */
#game-toggle-music-btn:hover {
    transform: scale(1.15);
}

/* Wyłączenie efektu hover, gdy gra jest spauzowana */
.game-paused #game-toggle-music-btn:hover {
    transform: none;
}

/* Zapewnienie, że ikona staje się biała w trybie ciemnym */
body.dark-mode #game-toggle-music-btn img {
    filter: invert(1);
}

/* Zmiana koloru ikonki muzyki na planszy w motywie pixel art */
body.pixelart-theme #game-toggle-music-btn img {
    filter: brightness(0);
}

/* === ZAKTUALIZOWANY, POPRAWIONY I W PEŁNI ANIMOWANY STYL DLA JOKERA === */

@keyframes joker-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.8);
  }
}

/* Krok 1: Definiujemy wygląd Jokera, który ma być zawsze taki sam, niezależnie od motywu.
   Celowo NIE ustawiamy tutaj właściwości 'animation'. */
body.ball-style-default .ball.joker,
body.ball-style-glossy .ball.joker,
body.ball-style-flat .ball.joker,
body.ball-style-neon .ball.joker,
body.ball-style-crystal .ball.joker,
body.ball-style-metallic .ball.joker,
body.ball-style-pixel .ball.joker,
body.ball-style-galaxy .ball.joker,
body.ball-style-molten .ball.joker,
body.ball-style-gemstone .ball.joker,
body.ball-style-holographic .ball.joker,
.ball.joker {
    background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
    position: relative;
    /* Resetujemy style, które mogły zostać nadpisane przez motywy */
    border: none;
    box-shadow: none;
    filter: none;
}

/* Krok 2: Styl dla litery 'J' pozostaje bez zmian. */
body.ball-style-default .ball.joker::after,
body.ball-style-glossy .ball.joker::after,
body.ball-style-flat .ball.joker::after,
body.ball-style-neon .ball.joker::after,
body.ball-style-crystal .ball.joker::after,
body.ball-style-metallic .ball.joker::after,
body.ball-style-pixel .ball.joker::after,
body.ball-style-galaxy .ball.joker::after,
body.ball-style-molten .ball.joker::after,
body.ball-style-gemstone .ball.joker::after,
body.ball-style-holographic .ball.joker::after,
.ball.joker::after {
    content: 'J';
    position: absolute;
    font-family: 'Fredoka One', cursive;
    font-size: 80%;
    color: white;
    text-shadow: 0 0 5px black, 0 0 10px black, 2px 2px 3px rgba(0,0,0,0.7);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Krok 3: KLUCZOWA ZMIANA. Stosujemy unikalną animację Jokera TYLKO wtedy, 
   gdy kulka NIE MA na sobie klas odpowiedzialnych za inne animacje (pojawianie się, zaznaczenie, ruch, usuwanie). */
.ball.joker:not(.ball-appear):not(.next-ball-appear):not(.selected):not(.shake-error):not(.ball-moving):not(.ball-removing) {
    animation: joker-pulse 2.5s ease-in-out infinite;
}

/* === ZAKTUALIZOWANY, POPRAWIONY STYL DLA LATAJĄCEJ KULKI (TRYB CHAOS) === */

@keyframes flap-wings {
  0%, 100% {
    /* Łączymy centrowanie z animacją machania */
    transform: translate(-50%, -50%) translateY(0) scale(1);
  }
  50% {
    /* Robimy to samo dla drugiej klatki kluczowej */
    transform: translate(-50%, -50%) translateY(-2px) scale(1.02);
  }
}

.ball.flying {
    /* Upewniamy się, że skrzydła nie są przycinane przez krawędzie kulki */
    overflow: visible;
}

/* NOWA REGUŁA: Styl dla fizycznego elementu <div> zawierającego skrzydła */
.ball-wings {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180%; /* Skrzydła szersze niż kulka */
    height: 180%; /* Skrzydła wyższe niż kulka */
    transform: translate(-50%, -50%);
    background-image: url('images/wings.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none; /* Skrzydła nie blokują klikania */
    z-index: -1; /* Rysuj skrzydła za kulką */
    animation: flap-wings 1.5s ease-in-out infinite;
}

/* === OSTATECZNY, POPRAWIONY STYL DLA WSKAŹNIKA MOŻLIWOŚCI LOTU === */

@keyframes fly-target-pulse {
  0% {
    opacity: 0.7;
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 0.7;
    transform: scale(0.95);
  }
}

/* Styl dla fizycznego elementu <div>, który będzie wstawiany WEWNĄTRZ kulki */
.flying-target-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Wypełnia całą kulkę-rodzica */
    height: 100%;
    background-image: url('images/can-fly.png');
    background-size: 85%; /* Skrzydła są nieco większe dla lepszej widoczności */
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 5; /* Wyższy z-index, aby być nad wszystkim innym w kulce */
    animation: fly-target-pulse 1.8s ease-in-out infinite;
}

/* === POPRAWIONY STYL DLA PODŚWIETLENIA (BEZ OBCINANIA) === */

#high-scores-list li.score-highlight {
  background-color: rgba(255, 223, 100, 0.6);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-bottom-color: #e0a800; /* Zmieniamy kolor dolnej ramki, aby pasował */
  
  /* Zamiast skalować, dodajemy trochę więcej wewnętrznego odstępu.
     To sprawia, że tło jest lepiej widoczne, nie powodując obcinania. */
  padding-top: 12px;
  padding-bottom: 12px;

  /* WAŻNE: Usuwamy transform, który powodował problem */
  transform: none;
}

/* Dopasowanie dla trybu ciemnego */
body.dark-mode #high-scores-list li.score-highlight {
    background-color: rgba(255, 215, 0, 0.5);
    border-bottom-color: #ffc107;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* === ZAKTUALIZOWANE STYLE DLA KONTENERA PRZYCISKÓW AKCESORIÓW === */

#accessory-save-btn-container {
    display: flex; /* Ustawia przyciski obok siebie */
    justify-content: center; /* Centruje je w poziomie */
    gap: 20px; /* Dodaje odstęp między nimi */
    margin-top: 20px;
}

/* === NOWE STYLE DLA PRZYCISKU RESETOWANIA === */

#accessory-reset-btn {
    width: 50px;
    height: 50px;
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.07s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Szary kolor, spójny z akcjami drugorzędnymi */
    background-color: #6c757d; 
    border-bottom: 5px solid #494f54;
}

#accessory-reset-btn:active {
    transform: translateY(3px);
    border-bottom-width: 2px;
}

#accessory-reset-btn img {
    width: 24px;
    height: 24px;
    filter: invert(1) brightness(2);
}

/* ================================================================= */
/* === NOWY, NIEZAWODNY STYL PIXEL ART (BAZOWANY NA PLIKACH PNG) === */
/* ================================================================= */

/* Definiuje wygląd dla podglądu w menu skórek */
.ball-style-option[data-style-id="pixelart"] .ball-preview .ball::before {
    background-size: contain;
    top: 2%; left: 2%; width: 96%; height: 96%;
}
.ball-style-option[data-style-id="pixelart"] .ball-preview .ball.red::before    { background-image: url('images/red-pixelart.png'); }
.ball-style-option[data-style-id="pixelart"] .ball-preview .ball.green::before  { background-image: url('images/green-pixelart.png'); }
.ball-style-option[data-style-id="pixelart"] .ball-preview .ball.blue::before   { background-image: url('images/blue-pixelart.png'); }
/* Możesz dodać resztę kolorów dla podglądu, jeśli chcesz */

/* Główna reguła dla stylu w grze */
body.ball-style-pixelart .ball::before {
    background-image: var(--pixelart-bg-image);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* Resetowanie stylów, które mogłyby zakłócić wygląd obrazka */
    background-color: transparent;
    box-shadow: none;
    border: none;
    filter: none;
    top: 2%;
    left: 2%;
    width: 96%;
    height: 96%;
}

/* === NOWE STYLE DLA SEPARATORA NA LIŚCIE STYLÓW === */
.styles-separator {
    height: 1px;
    background-color: #ddd;
    margin: 10px 0; /* Dodaje trochę oddechu nad i pod linią */
}

/* Wersja dla trybu ciemnego */
body.dark-mode .styles-separator {
    background-color: #4a617a;
}

/* ================================================= */
/* === POPRAWKA PODGLĄDU PIXEL ART W EDYTORZE === */
/* ================================================= */

/* Ta reguła usuwa domyślne, gradientowe tło z podglądu w edytorze,
   gdy styl "Pixel Art" jest aktywny, pozwalając obrazkowi PNG być widocznym. */
body.ball-style-pixelart .ball-editor-preview-ball {
    background: transparent;
    box-shadow: none;
}

/* --- NOWE, ULEPSZONE STYLE DLA SEKCJI "TWÓRCY" --- */
.creators-list {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Odstęp między wpisami twórców */
    margin-top: 10px;
}

.creator-entry {
    background-color: #f8f9fa; /* Jasne tło dla każdego wpisu */
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    justify-content: space-between; /* Rozsuwa tekst i ikonę na boki */
    align-items: center;
    gap: 15px;
}

.creator-entry p {
    margin: 0;
    font-size: 1.05em;
    color: #333;
}

.creator-link {
    flex-shrink: 0; /* Zapobiega kurczeniu się linku/ikony */
    transition: transform 0.2s ease-out;
}

.creator-link:hover {
    transform: scale(1.1); /* Efekt powiększenia po najechaniu */
}

.credit-icon {
    width: 48px;
    height: 48px;
    display: block; /* Usuwa ewentualne dodatkowe miejsce pod obrazkiem */
}

/* Wersja dla trybu ciemnego */
body.dark-mode .creator-entry {
    background-color: #2c3e50;
    border-color: #4a617a;
}

body.dark-mode .creator-entry p {
    color: #ecf0f1;
}

/* ======================================= */
/* === POPRAWIONE STYLE DLA MOTYWU PIXEL ART === */
/* ======================================= */

/* Definicja czcionki (bez zmian) */
@font-face {
    font-family: 'ArcadeClassic';
    /* POPRAWKA: Używamy ścieżki ./ która jest najbardziej niezawodna dla plików lokalnych */
    src: url('./fonts/Jersey10-Regular.ttf') format('truetype');
}

/* Główne style motywu (bez zmian) */
body.pixelart-theme {
    font-size: 1.4em;
    letter-spacing: 1px;
}

/* === KLUCZOWA POPRAWKA: Zastosowanie czcionki do WSZYSTKICH elementów === */
/* Używamy selektora '*' (gwiazdki), aby objąć wszystkie elementy w motywie. */
/* !important gwarantuje, że ta reguła zawsze wygra. */
body.pixelart-theme * {
    font-family: 'ArcadeClassic', sans-serif !important;

    /* Wyłączenie wygładzania czcionki dla ostrego, pixelowego wyglądu */
    font-smooth: never;
    -webkit-font-smoothing: none;
    image-rendering: pixelated;
}

/* Poprawki dla tła w trybie Pixel Art (bez zmian) */
body.pixelart-theme::before {
    background-image: none;
    background-color: #c2c2c2;
}

body.pixelart-theme #game-container,
body.pixelart-theme .modal-content,
body.pixelart-theme .custom-modal-box {
    background-color: #f0f0f0;
    box-shadow: 5px 5px 0px rgba(0,0,0,0.5);
}

/* Pozostałe style retro (bez zmian) */
body.pixelart-theme #game-container,
body.pixelart-theme .modal-content,
body.pixelart-theme .custom-modal-box,
body.pixelart-theme .skin-option,
body.pixelart-theme .ball-style-option,
body.pixelart-theme .save-slot,
body.pixelart-theme #game-board {
    border-radius: 0;
    border: 2px solid #333;
}

body.pixelart-theme button,
body.pixelart-theme .custom-modal-buttons a {
    border-radius: 0 !important;
    box-shadow: 3px 3px 0px #000 !important;
    border: 2px solid #333 !important;
    transition: transform 0.1s, box-shadow 0.1s !important;
}

body.pixelart-theme button:active,
body.pixelart-theme .custom-modal-buttons a:active {
    transform: translate(3px, 3px) !important;
    box-shadow: none !important;
}

/* ========================================================= */
/* === NOWE, PRECYZYJNE STYLE DLA IKON W MOTYWIE PIXEL ART === */
/* ========================================================= */

/* 1. Podstawowa reguła: wszystkie ikonki mają ostry wygląd */
body.pixelart-theme .menu-icon-buttons button img,
body.pixelart-theme .menu-icon-buttons a#menu-bmac-btn img, /* <-- DODANA LINIA */
body.pixelart-theme .game-icon-btn {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    transition: transform 0.2s ease;
}

/* 2. Indywidualne powiększenie dla IKON W MENU GŁÓWNYM */
body.pixelart-theme #menu-skins-btn img { transform: scale(1.7); }
body.pixelart-theme #menu-skins-btn:hover img { transform: scale(1.9); }

body.pixelart-theme #menu-stats-btn img,
body.pixelart-theme #menu-settings-btn img,
body.pixelart-theme #menu-help-btn-icon img { transform: scale(1.3); }

body.pixelart-theme #menu-stats-btn:hover img,
body.pixelart-theme #menu-settings-btn:hover img,
body.pixelart-theme #menu-help-btn-icon:hover img { transform: scale(1.5); }

/* Efekt dla puchara w menu */
body.pixelart-theme #menu-high-scores-icon img { transform: scale(1.2); }
body.pixelart-theme #menu-high-scores-icon:hover img { transform: scale(1.4); }

/* === POCZĄTEK DODANEJ REGUŁY === */
/* Efekt dla obrazka "Buy Me a Coffee" w menu */
body.pixelart-theme .menu-icon-buttons a#menu-bmac-btn:hover img {
    transform: scale(1.4);
}


/* 3. Indywidualne powiększenie dla IKON NA PLANSZY */
body.pixelart-theme #game-skins-btn { transform: scale(1.5); }
body.pixelart-theme #game-skins-btn:hover { transform: scale(1.7); }

/* Poprawka błędu składni i dodanie efektu dla ikony ustawień */
body.pixelart-theme #game-settings-btn { transform: scale(1.2); }
body.pixelart-theme #game-settings-btn:hover { transform: scale(1.4); }

/* Efekt dla puchara na planszy */
body.pixelart-theme #high-scores-btn { transform: scale(1); }
body.pixelart-theme #high-scores-btn:hover { transform: scale(1.2); }


/* 4. Pozostałe poprawki wizualne dla motywu */
body.pixelart-theme #back-to-menu-btn { transform: scaleX(-1); }
body.pixelart-theme #back-to-menu-btn:hover { transform: scaleX(-1) scale(1.15); }
/* === POCZĄTEK ZMIANY: Dodana reguła odwracająca strzałkę w oknie Pomocy === */
body.pixelart-theme .help-icon-row img[src*="back-arrow-2.png"] {
    transform: scaleX(-1);
}
/* === KONIEC ZMIANY === */
body.pixelart-theme #pause-overlay { border-radius: 0; }

/* ===================================================================== */
/* === POPRAWKA DLA PODWÓJNEJ PIKSELIZACJI KULEK W MOTYWIE PIXEL ART === */
/* ===================================================================== */

/* Ta reguła jest aktywowana TYLKO, gdy jednocześnie włączony jest
   motyw Pixel Art ORAZ styl kulek "Pixel Art".
   Resetuje ona właściwość 'image-rendering' dla kulek-obrazków,
   aby zapobiec nakładaniu się efektu pikselizacji z motywu na
   grafiki, które już są w stylu pixel art. */
body.pixelart-theme.ball-style-pixelart .ball::before {
    image-rendering: auto; /* Przywracamy domyślne, gładkie skalowanie */
}

/* Poprawka dla nakładki odliczania, aby miała kwadratowe rogi */
/* !important jest potrzebne, aby nadpisać styl dodawany bezpośrednio przez JavaScript */
body.pixelart-theme #countdown-overlay {
    border-radius: 0 !important;
}

/* ========================================================= */
/* === POPRAWKA DLA IKON OSIĄGNIĘĆ W MOTYWIE PIXEL ART === */
/* ========================================================= */

/* Styl dla obrazków wewnątrz ikon osiągnięć */
body.pixelart-theme .achievement-icon img {
    width: 32px;  /* Ustawiamy spójny rozmiar */
    height: 32px;
    object-fit: contain;
}

/* ===================================================================== */
/* === OSTATECZNA POPRAWKA DLA IKON (EMOJI) W MOTYWIE PIXEL ART === */
/* ===================================================================== */

/* Ta sekcja definiuje RÓŻNE, STAŁE rozmiary ikonek dla każdej wielkości planszy,
   ale TYLKO w motywie Pixel Art. Gwarantuje to spójny wygląd. */

/* Rozmiar dla planszy DUŻEJ (15x15) - ikonki są mniejsze */
body.pixelart-theme.size-15 #game-board .ball-emoji {
    font-size: 16px !important;
    -webkit-text-stroke: 0;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5); /* Cień dopasowany do mniejszego rozmiaru */
}

/* Rozmiar dla planszy STANDARDOWEJ (9x9) */
body.pixelart-theme.size-9 #game-board .ball-emoji {
    font-size: 24px !important;
    -webkit-text-stroke: 0;
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.5);
}

/* Rozmiar dla planszy MAŁEJ (6x6) - ikonki są większe */
body.pixelart-theme.size-6 #game-board .ball-emoji {
    font-size: 36px !important;
    -webkit-text-stroke: 0;
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.5);
}

/* ================================================================= */
/* === OSTATECZNA POPRAWKA BLOKADY SUWAKA W MOTYWIE PIXEL ART === */
/* ================================================================= */

/* Te style są aktywowane TYLKO wtedy, gdy JS doda klasę do suwaka. */

.is-locked-in-pixelart {
    position: relative;
    cursor: not-allowed;
    overflow: visible !important;
}

.is-locked-in-pixelart > * {
    visibility: hidden;
}

.is-locked-in-pixelart::after {
    content: '🔒';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    visibility: visible;
    font-size: 2.8em;
    color: #495057;
    text-shadow: none;
    z-index: 10;
    font-family: 'Segoe UI', sans-serif !important;
}

/* ===================================================================== */
/* === POPRAWKI OSTROŚCI OBRAZKÓW W MOTYWIE PIXEL ART === */
/* ===================================================================== */

/* Krok 1: Wymuszamy ostre, pikselowe renderowanie dla akcesoriów, które były zamazane. */
/* Ta reguła dotyczy akcesoriów na kulkach w grze oraz w podglądach. */
body.pixelart-theme .ball-accessory img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* Krok 2: Resetujemy renderowanie dla kulek w stylu "Pixel Art".
   Ich grafiki są już spikselizowane, a ponowne wymuszenie tego trybu
   przez motyw powodowało nienaturalną ostrość. `auto` przywraca
   delikatne wygładzanie przeglądarki, co daje poprawny wygląd. */
body.pixelart-theme.ball-style-pixelart .ball::before {
    image-rendering: auto;
}

/* ========================================================= */
/* === ZWIĘKSZENIE IKONY MUZYKI (POZA MOTYWEM PIXEL ART) === */
/* ========================================================= */

/* Ta reguła działa, gdy na body NIE MA klasy .pixelart-theme */
body:not(.pixelart-theme) #toggle-music-btn img,
body:not(.pixelart-theme) #game-toggle-music-btn img {
    width: 32px !important;
    height: 32px !important;
}

/* ============================================================= */
/* === POPRAWKA KOLORÓW PRZYCISKÓW W OKNIE "PRÓBA CZASU" (v2) === */
/* ============================================================= */

/* Ustawia ZIELONY kolor dla przycisku "Start!" */
#time-attack-options-container .menu-buttons #time-attack-start-btn {
    background-color: #28a745; /* Zielony */
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
}

#time-attack-options-container .menu-buttons #time-attack-start-btn:hover {
    background-color: #218838; /* Ciemniejszy zielony */
    box-shadow: 0 6px 20px rgba(33, 136, 56, 0.6);
}

/* Ustawia SZARY kolor dla przycisku "Wróć do menu" */
#time-attack-options-container .menu-buttons #time-attack-back-btn {
    background-color: #6c757d; /* Szary */
    box-shadow: 0 4px 15px rgba(108, 117, 125, 0.4);
}

#time-attack-options-container .menu-buttons #time-attack-back-btn:hover {
    background-color: #5a6268; /* Ciemniejszy szary */
    box-shadow: 0 6px 20px rgba(108, 117, 125, 0.6);
}

.menu-icon-buttons #menu-help-btn-icon:hover {
    background-color: #868e96; /* JAŚNIEJSZY ciemnoszary */
    border-color: #383d41; /* Ciemniejsza obwódka */
    box-shadow: 0 6px 20px rgba(108, 117, 125, 0.6);
}

/* === Styl dla przycisku "Buy Me a Coffee" === */
.menu-icon-buttons a#menu-bmac-btn:hover {
    transform: translateY(-3px); /* Efekt uniesienia, spójny z innymi przyciskami */
    box-shadow: 0 6px 20px rgba(255, 221, 0, 0.7);
    border-color: #b89f00;
}

.menu-icon-buttons a#menu-bmac-btn img {
    width: 32px; /* Dopasowujemy rozmiar obrazka do innych ikon */
    height: 32px;
}

/* === OSTATECZNY, W PEŁNI ANIMOWANY EFEKT DLA PRZYCISKU BUY ME A COFFEE === */

/* 1. Animacja dla TĘCZOWEJ RAMKI (bez zmian) */
@keyframes bmac-rainbow-border {
  0%, 100% { border-color: #ffadad; } /* Czerwony */
  16% { border-color: #ffd6a5; }      /* Pomarańczowy */
  33% { border-color: #fdffb6; }      /* Żółty */
  50% { border-color: #caffbf; }      /* Zielony */
  66% { border-color: #9bf6ff; }      /* Niebieski */
  83% { border-color: #bdb2ff; }      /* Fioletowy */
}

/* 2. Animacja dla SUBTELNEGO, TĘCZOWEGO BLASKU (stan domyślny) */
@keyframes bmac-rainbow-glow-default {
  0%, 100% { box-shadow: 0 4px 15px rgba(255, 173, 173, 0.5); }
  16% { box-shadow: 0 4px 15px rgba(255, 214, 165, 0.5); }
  33% { box-shadow: 0 4px 15px rgba(253, 255, 182, 0.5); }
  50% { box-shadow: 0 4px 15px rgba(202, 255, 191, 0.5); }
  66% { box-shadow: 0 4px 15px rgba(155, 246, 255, 0.5); }
  83% { box-shadow: 0 4px 15px rgba(189, 178, 255, 0.5); }
}

/* 3. Animacja dla MOCNIEJSZEGO, TĘCZOWEGO BLASKU (po najechaniu) */
@keyframes bmac-rainbow-glow-hover {
  0%, 100% { box-shadow: 0 6px 20px rgba(255, 173, 173, 0.7); }
  16% { box-shadow: 0 6px 20px rgba(255, 214, 165, 0.7); }
  33% { box-shadow: 0 6px 20px rgba(253, 255, 182, 0.7); }
  50% { box-shadow: 0 6px 20px rgba(202, 255, 191, 0.7); }
  66% { box-shadow: 0 6px 20px rgba(155, 246, 255, 0.7); }
  83% { box-shadow: 0 6px 20px rgba(189, 178, 255, 0.7); }
}

/* 5. Stan PO NAJECHANIU: uniesienie, animowana ramka i mocniejszy animowany blask */
.menu-icon-buttons a#menu-bmac-btn:hover {
  transform: translateY(-3px); /* Zachowujemy efekt uniesienia */
  
  /* Zastępujemy subtelny blask mocniejszym, zachowując animację ramki */
  animation:
    bmac-rainbow-border 8s linear infinite,
    bmac-rainbow-glow-hover 8s linear infinite;
}

/* === POPRAWIONY I UJEDNOLICONY STYL DLA WSZYSTKICH PRZYCISKÓW-IKON === */

/* 1. Wspólna reguła dla wszystkich przycisków-ikon (<button> i <a>) */
/* Nadaje wszystkim ten sam, spójny rozmiar i kształt. */
.menu-icon-buttons button,
.menu-icon-buttons a#menu-bmac-btn {
    width: 70px;
    height: 70px;
    border-radius: 20px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease;
}

/* 2. Reguła dla przycisku "Buy Me a Coffee", która zawiera już TYLKO unikalne style */
/* Usunęliśmy z niej nadpisania rozmiaru, dzięki czemu jest on teraz spójny z resztą. */
.menu-icon-buttons a#menu-bmac-btn {
    background-color: #FFFFFF;
    border: 5px solid #c4c4b7;
    /* Zachowujemy nasze tęczowe animacje */
    animation:
      bmac-rainbow-border 8s linear infinite,
      bmac-rainbow-glow-default 8s linear infinite;
      width: 55px;
      height: 55px;
}

/* 3. Efekt hover dla BMAC (pozostaje bez zmian) */
.menu-icon-buttons a#menu-bmac-btn:hover {
    transform: translateY(-3px);
    animation:
      bmac-rainbow-border 8s linear infinite,
      bmac-rainbow-glow-hover 8s linear infinite;
}

/* 4. Reguła dla obrazka wewnątrz przycisku BMAC (pozostaje bez zmian) */
.menu-icon-buttons a#menu-bmac-btn img {
    width: 32px;
    height: 32px;
}

/* ===================================================================== */
/* === POPRAWKI DLA PRZYCISKU "BUY ME A COFFEE" W MOTYWIE PIXEL ART === */
/* ===================================================================== */

/* Krok 1: Nadpisujemy styl samego przycisku (linku), aby pasował do reszty */
body.pixelart-theme .menu-icon-buttons a#menu-bmac-btn {
    /* Resetujemy nowoczesne style, takie jak animacje i zaokrąglone rogi */
    border-radius: 0 !important;
    animation: none !important;
    transition: transform 0.1s, box-shadow 0.1s !important;
    width: 67px !important;
    height: 67px !important;

    /* Stosujemy klasyczny, pixelartowy wygląd */
    background-color: #ffdd00; /* Klasyczny żółty kolor BMAC */
    border: 2px solid #333 !important;
    box-shadow: 3px 3px 0px #000 !important;
}

/* Krok 2: Definiujemy subtelny efekt po najechaniu myszką */
body.pixelart-theme .menu-icon-buttons a#menu-bmac-btn:hover {
    transform: translate(0px, -5px) !important;
    box-shadow: 2px 2px 0px #000 !important;
}

/* Krok 3: Definiujemy efekt "wciśnięcia" przycisku, spójny z resztą motywu */
body.pixelart-theme .menu-icon-buttons a#menu-bmac-btn:active {
    transform: translate(3px, 3px) !important;
    box-shadow: none !important;
}

/* Krok 4: Upewniamy się, że obrazek wewnątrz przycisku jest renderowany jako pixel art */
body.pixelart-theme .menu-icon-buttons a#menu-bmac-btn img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    transform: scale(1.2); /* Lekko powiększamy obrazek, aby lepiej pasował */
}

/* === STYLE DLA KULKI-BOMBY (TRYB CHAOS) === */
.ball.bomb {
    background-size: 85%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #333;
    box-shadow: inset 0 0 5px rgba(255,255,255,0.4);
}

/* ===================================================================== */
/* === POPRAWKA: Prawidłowy wygląd bomby w motywie holograficznym === */
/* ===================================================================== */

body.ball-style-holographic .ball.bomb {
    /* Resetujemy tło, aby usunąć efekt holograficzny */
    background: #333; 
    
    /* Re-aplikujemy wewnętrzny cień charakterystyczny dla bomby */
    box-shadow: inset 0 0 5px rgba(255,255,255,0.4);
    
    /* Usuwamy holograficzną ramkę */
    border: none;
    
    /* Przywracamy animację pulsowania bomby, nadpisując migotanie motywu */
    animation: bomb-pulse 1.5s infinite ease-in-out;
}

/* Animacja pulsowania jest teraz w osobnej regule, która nie aktywuje się podczas innych animacji */
.ball.bomb:not(.ball-appear):not(.next-ball-appear):not(.selected):not(.shake-error):not(.ball-moving):not(.ball-removing) {
    animation: bomb-pulse 1.5s infinite ease-in-out;
}

@keyframes bomb-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 5px #ff5555, inset 0 0 5px rgba(255,255,255,0.4); }
  50% { transform: scale(1.05); box-shadow: 0 0 15px #ff0000, inset 0 0 5px rgba(255,255,255,0.4); }
}

/* === STYLE DLA EFEKTU EKSPLOZJI === */
.explosion-effect {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 165, 0, 0.7);
    animation: explosion-anim 0.5s ease-out forwards;
    pointer-events: none;
    z-index: 150;
    transform-origin: center;
}

@keyframes explosion-anim {
    from {
        transform: scale(0);
        opacity: 1;
    }
    to {
        transform: scale(1);
        opacity: 0;
    }
}

/* === POPRAWKA v2: Animacja poświaty i pulsowania dla zaznaczonej bomby === */

/* Krok 1: Tworzymy nową animację, która kontroluje TYLKO poświatę (box-shadow). */
@keyframes bomb-glow {
  0%, 100% { 
    box-shadow: 0 0 5px #ff5555, inset 0 0 5px rgba(255,255,255,0.4); 
  }
  50% { 
    box-shadow: 0 0 15px #ff0000, inset 0 0 5px rgba(255,255,255,0.4); 
  }
}

/* Krok 2: Modyfikujemy regułę dla zaznaczonej bomby, aby używała DWÓCH animacji jednocześnie. */
/* Ta reguła jest bardziej szczegółowa niż ogólna '.ball.selected', więc ma pierwszeństwo. */
.ball.bomb.selected {
    /* Używamy przecinka, aby nałożyć dwie niezależne animacje: */
    animation: 
        pulse 1s ease-in-out infinite,      /* Standardowe pulsowanie (skalowanie) */
        bomb-glow 1.5s infinite ease-in-out; /* Nasza nowa animacja poświaty */
}

/* === POCZĄTEK ZMIAN: Dodane reguły skalowania dla nowych ikon === */
/* Efekt dla ikony sklepu w menu */
body.pixelart-theme #main-menu-shop-btn img { transform: scale(1.4); }
body.pixelart-theme #main-menu-shop-btn:hover img { transform: scale(1.6); }

/* Efekt dla ikony osiągnięć w menu */
body.pixelart-theme #menu-achievements-btn img { transform: scale(1.2); }
body.pixelart-theme #menu-achievements-btn:hover img { transform: scale(1.4); }

/* Efekt dla ikony Powtórek w menu */
body.pixelart-theme #menu-replays-btn img { transform: scale(1.2); }
body.pixelart-theme #menu-replays-btn:hover img { transform: scale(1.4); }

/* Efekt dla ikony Cofnij w grze */
body.pixelart-theme #undo-btn img { transform: scale(1.3); }

/* Efekt dla obrazka "Buy Me a Coffee" w menu */
body.pixelart-theme .menu-icon-buttons a#menu-bmac-btn img {
    transform: scale(1.4);
}
body.pixelart-theme .menu-icon-buttons a#menu-bmac-btn:hover img {
    transform: scale(1.6);
}

/* =================================================================== */
/* === POPRAWKA KSZTAŁTU I ANIMACJI PRZYCISKU MUZYKI W MOTYWIE PIXEL ART === */
/* =================================================================== */

/* Ustawia okrągły kształt i odpowiedni styl dla zwiniętego odtwarzacza ORAZ dodaje płynne przejście */
body.pixelart-theme #music-player-container {
    border-radius: 50% !important;
    width: 48px;
    height: 48px;
    border: 2px solid #333 !important;
    box-shadow: 3px 3px 0px #000 !important;
    /* KLUCZOWA POPRAWKA: Dodajemy transition, aby animacja działała */
    transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out !important;
}

/* Przywraca kwadratowy kształt i ROZSZERZA odtwarzacz po rozwinięciu */
body.pixelart-theme #music-player-container.expanded {
    width: 380px;
    border-radius: 0 !important;
}

/* Usuwa obramowanie z wewnętrznego przycisku i centruje ikonę */
body.pixelart-theme #music-player-container .toggle-music-btn {
    border: none !important;
    box-shadow: none !important;
    /* KLUCZOWA POPRAWKA: Używamy paddingu do wycentrowania, usuwając starą metodę */
    padding-left: 15px;
}

/* ===================================================================== */
/* === POPRAWKA OPÓŹNIENIA ZNIKANIA IKONY LOSOWANIA W MOTYWIE PIXEL ART === */
/* ===================================================================== */

/* Ta reguła jest bardziej specyficzna i nadpisuje ogólny styl dla przycisków w tym motywie,
   zapewniając, że animacja znikania ma odpowiednie opóźnienie. */
body.pixelart-theme #shuffle-track-btn {
    transition: opacity 0.1s ease-in 0.2s, width 0.1s ease-in 0.2s !important;
}

/* Podobnie dla animacji pojawiania się */
body.pixelart-theme #music-player-container.expanded #shuffle-track-btn {
    transition: opacity 0.2s ease-out 0.1s, width 0.2s ease-out 0.1s !important;
}

/* ======================================= */
/* === STYLE DLA MAPY AKTYWNOŚCI (HEATMAP) === */
/* ======================================= */

.heatmap-container {
    display: grid;
    gap: 2px;
    border: 1px solid #ddd;
    padding: 5px;
    background-color: #f9f9f9;
    /* Utrzymujemy proporcje kwadratu */
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
}

.heatmap-cell {
    background-color: rgba(255, 193, 7, var(--heatmap-intensity, 0));
    border: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
    transition: transform 0.2s ease-out;
}

.heatmap-cell:hover {
    transform: scale(1.1);
    z-index: 10;
    border-color: rgba(0, 0, 0, 0.5);
}

/* Tooltip pokazujący liczbę kliknięć */
.heatmap-cell[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    /* ZMIANA: Pozycjonowanie wewnątrz komórki */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* ZMIANA: Centrowanie tekstu za pomocą flexbox */
    display: flex;
    align-items: center;
    justify-content: center;
    transform: none; /* Usunięcie poprzedniej transformacji */
    background-color: rgba(0, 0, 0, 0.7); /* Półprzezroczyste tło */
    color: white;
    padding: 0;
    border-radius: 0;
    font-size: 1.2em;
    font-weight: bold;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    pointer-events: none;
}

.heatmap-cell[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
}

.no-heatmap-data {
    text-align: center;
    color: #999;
    padding: 20px;
    font-style: italic;
}

/* Wersja dla trybu ciemnego */
body.dark-mode .heatmap-container {
    background-color: #2c3e50;
    border-color: #4a617a;
}

body.dark-mode .heatmap-cell {
    /* Używamy jaśniejszego, bardziej nasyconego koloru dla lepszego kontrastu */
    background-color: rgba(255, 213, 79, var(--heatmap-intensity, 0));
    border-color: rgba(255, 255, 255, 0.05);
}

body.dark-mode .heatmap-cell:hover {
    border-color: rgba(255, 255, 255, 0.7);
}

body.dark-mode .no-heatmap-data {
    color: #777;
}

/* ======================================= */
/* === STYLE DLA SEPARATORA W STATYSTYKACH === */
/* ======================================= */

.stats-separator {
    border: none;
    height: 4px; /* Zwiększamy grubość */
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)); /* Subtelny gradient */
    margin: 40px 5%;  /* Zwiększamy margines pionowy i poszerzamy linię */
    width: 90%;
    border-radius: 2px; /* Zaokrąglamy rogi */
}

/* Wersja dla trybu ciemnego */
body.dark-mode .stats-separator {
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)); /* Jaśniejszy gradient */
}

/* NOWY BLOK: Ulepszone, dynamiczne powitanie gracza */
#player-greeting {
    font-size: 1.6em;
    font-weight: bold;
    color: #ffc107; /* Kolor zapasowy dla starszych przeglądarek */
    
    /* Ulepszona poświata dla lepszej czytelności */
    text-shadow: 0 0 8px rgba(255, 193, 7, 0.6), 1px 1px 2px rgba(0,0,0,0.5);
    
    /* --- KLUCZOWE ZMIANY DLA EFEKTU POŁYSKU --- */
    
    /* 1. Tworzymy gradient jako tło. Zaczyna i kończy się kolorem tekstu, z jasnym połyskiem pośrodku. */
    background: linear-gradient(
        90deg, 
        #ffc107 30%, 
        #fff2d9 50%, 
        #ffc107 70%
    );
    /* 2. Rozciągamy tło, aby było szersze niż tekst, co umożliwi animację */
    background-size: 200% auto;
    
    /* 3. Magia! Przycinamy tło do kształtu tekstu. */
    background-clip: text;
    -webkit-background-clip: text;
    
    /* 4. Sprawiamy, że kolor tekstu staje się przezroczysty, aby tło było widoczne. */
    -webkit-text-fill-color: transparent;
    
    /* 5. Łączymy dwie animacje: wejście i nieskończony połysk */
    animation: 
        greeting-fade-in 0.8s ease-out forwards,
        shimmer-effect 4s ease-in-out infinite 2s; /* Połysk startuje 2s po pojawieniu się */
}

/* Animacja wejścia (bez zmian) */
@keyframes greeting-fade-in {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(1.1);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Nowa animacja dla połysku, która przesuwa pozycję tła */
@keyframes shimmer-effect {
    from {
        background-position: 200% center;
    }
    to {
        background-position: 0% center;
    }
}

/* ======================================= */
/* === STYLE DLA SUGESTII PEŁNEGO EKRANU === */
/* ======================================= */

#fullscreen-suggestion {
    position: fixed; /* Pozycjonowanie względem okna przeglądarki */
    top: -100px; /* Domyślnie schowane nad ekranem */
    left: 50%;
    transform: translateX(-50%);
    z-index: 210; /* Wyżej niż menu, ale niżej niż inne modale */
    background-color: rgba(29, 43, 73, 0.9); /* Ciemne tło, pasujące do menu */
    color: #fff;
    padding: 12px 20px;
    border-radius: 0 0 12px 12px; /* Zaokrąglone tylko dolne rogi */
    box-shadow: 0 5px 15px rgba(0,0,0,0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-top: none;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: top 0.5s ease-in-out; /* Płynna animacja wsuwania */
}

#fullscreen-suggestion.visible {
    top: 0; /* Wsuwa okienko na widok */
}

#fullscreen-suggestion span {
    font-size: 0.9em;
    font-weight: 500;
}

#close-fullscreen-suggestion {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.8em;
    font-weight: bold;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s;
}

#close-fullscreen-suggestion:hover {
    opacity: 1;
}

/* ZMODYFIKOWANE STYLE DLA PRZYCISKU "NIE POKAZUJ PONOWNIE" */
#dont-show-fullscreen-again {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    transition: all 0.2s;
}

/* NOWY STYL: Definiuje wygląd ikonki wewnątrz przycisku */
#dont-show-fullscreen-again img {
    width: 24px;
    height: 24px;
}

#dont-show-fullscreen-again:hover {
    opacity: 1;
    background: #28a745;
    border-color: #fff;
}

/* ========================================================= */
/* === POPRAWKA CZCIONKI DLA HEATMAPY 15x15 === */
/* ========================================================= */

/* Zmniejszamy czcionkę w dymku TYLKO dla mapy 15x15, aby była czytelna na małych kafelkach. */
#heatmap-container-15 .heatmap-cell[data-tooltip]::after {
    font-size: 0.8em;
}

/* ========================================================= */
/* === STYLE DLA PUNKTÓW XP NA EKRANIE KOŃCA GRY === */
/* ========================================================= */

#final-xp {
    font-size: 0.65em; /* Rozmiar pomiędzy wynikiem a czasem */
    margin-top: 15px;
    color: rgba(255, 255, 255, 0.9);
}

.final-xp-value {
    font-weight: bold;
    color: #ffc107; /* Złoty kolor, jak pasek XP */
    text-shadow: 0 0 5px rgba(255, 193, 7, 0.5);
}

/* ========================================================= */
/* === STYLE DLA SYSTEMU PODPOWIEDZI === */
/* ========================================================= */

/* Styl nowego przycisku (Fioletowy) */
#hint-btn {
    background-color: #9b59b6;
    border-bottom: 6px solid #8e44ad;
}
#hint-btn:active {
    border-color: #8e44ad;
}

.hint-source {
    animation: hint-pulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 15px 5px #ffc107; /* Złota poświata dla lepszej widoczności */
}

/* === STYLE DLA STRZAŁKI SYSTEMU PODPOWIEDZI === */

/* Nowy kontener na planszę i strzałkę, zapewniający prawidłowe pozycjonowanie */
.board-wrapper {
    position: relative;
}

/* Nakładka SVG na całą planszę */
#hint-arrow-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Pozwala na klikanie "przez" strzałkę */
    z-index: 50; /* Upewnia się, że strzałka jest nad planszą */
}

/* Właściwa linia strzałki */
#hint-arrow-path {
    stroke: var(--hint-arrow-color, #9b59b6); /* Użyj zmiennej z fioletowym jako domyślnym */
    stroke-width: 6px;
    stroke-linecap: round; /* Zaokrąglone końce linii */
    stroke-linejoin: round; /* Gładkie połączenia segmentów */
    fill: none;
    filter: drop-shadow(0 0 3px rgba(0,0,0,0.5));
    /* Wartości początkowe dla animacji rysowania, ustawiane przez JS */
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

/* NOWA klasa, która aktywuje animację rysowania */
#hint-arrow-path.animating {
    animation: draw-path 0.7s ease-out forwards;
}

/* Grot strzałki - domyślnie niewidoczny */
#arrowhead polygon {
    fill: var(--hint-arrow-color, #9b59b6); /* Użyj tej samej zmiennej */
    opacity: 0;
}

/* NOWA klasa, która aktywuje animację pojawiania się grotu */
#arrowhead.animating polygon {
    animation: fade-in-arrowhead 0.7s ease-out forwards;
}

/* Animacja "rysowania" ścieżki */
@keyframes draw-path {
    to {
        stroke-dashoffset: 0;
    }
}

/* Animacja pojawiania się grotu na końcu rysowania ścieżki */
@keyframes fade-in-arrowhead {
    0%, 90% { /* Grot pozostaje niewidoczny przez 90% czasu animacji */
        opacity: 0;
    }
    100% { /* Pojawia się na samym końcu */
        opacity: 1;
    }
}

/* ======================================= */
/* === STYLE DLA NOWEJ ZAKŁADKI "AWATAR" === */
/* ======================================= */

/* Kontener zakładek w oknie statystyk (kopiujemy styl z okna skórek) */
#stats-modal-tabs-container {
    position: relative; 
    display: flex;
    border-bottom: 2px solid #eee;
    margin-bottom: 20px;
    margin-top: 20px;
}

#stats-modal-tabs-container::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: var(--underline-left, 0); 
    width: var(--underline-width, 0);
    height: 3px;  
    background-color: #007bff;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

#stats-modal-tabs-container .tab-button.active {
    color: #007bff;
    font-weight: bold;
}
#stats-modal-tabs-container .tab-button:hover {
    color: #0056b3;
}

/* Wersja dla trybu ciemnego */
body.dark-mode #stats-modal-tabs-container { border-bottom-color: #4a617a; }
body.dark-mode #stats-modal-tabs-container::after { background-color: #5dade2; }
body.dark-mode #stats-modal-tabs-container .tab-button.active { color: #5dade2; }
body.dark-mode #stats-modal-tabs-container .tab-button:hover { color: #ecf0f1; }

/* === STYLE DLA EDYTORA AWATARA === */

#avatar-editor-container {
    display: flex;
    gap: 30px;
}

#avatar-editor-main {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#avatar-item-selector {
    flex: 1;
    min-width: 200px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px;
}
body.dark-mode #avatar-item-selector {
    background-color: #2c3e50;
    border-color: #4a617a;
}

#avatar-editor-container h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #007bff;
    text-align: center;
}
body.dark-mode #avatar-editor-container h4 {
    color: #5dade2;
}

/* --- Podgląd Awatara --- */
#avatar-preview-wrapper { text-align: center; }
#avatar-preview {
    width: 100px; /* <-- ZMIANA */
    height: 100px; /* <-- ZMIANA */
    border: 2px dashed #ccc;
    margin: 0 auto 15px auto;
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(45deg, #eee 25%, transparent 25%), linear-gradient(-45deg, #eee 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #eee 75%), linear-gradient(-45deg, transparent 75%, #eee 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    border-radius: 50%;
}
body.dark-mode #avatar-preview {
    border-color: #4a617a;
    background-image: linear-gradient(45deg, #3a5068 25%, transparent 25%), linear-gradient(-45deg, #3a5068 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #3a5068 75%), linear-gradient(-45deg, transparent 75%, #3a5068 75%);
}

#avatar-editor-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
}

/* === NOWE STYLE: Efekt "hover" dla przycisków w edytorze awatara === */

#avatar-editor-actions button:hover {
    transform: translateY(-2px); /* Lekkie uniesienie przycisku */
}

/* Używamy ciemniejszego odcienia zieleni dla przycisku "Zapisz" po najechaniu */
#avatar-save-btn:hover {
    background-color: #218838;
}

/* Używamy ciemniejszego odcienia szarości dla przycisku "Resetuj" po najechaniu */
#avatar-reset-btn:hover {
    background-color: #5a6268;
}

/* === NOWE, SPÓJNE STYLE DLA PRZYCISKÓW W EDYTORZE AWATARA === */

/* 1. Wspólne style dla obu przycisków */
#avatar-editor-actions button {
    padding: 10px 25px; /* Zwiększamy padding dla lepszego wyglądu */
    font-size: 1em;     /* Ujednolicamy rozmiar czcionki */
    font-weight: bold;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.07s ease-in-out;
    border-bottom-width: 5px; /* Grubość cienia 3D */
    border-bottom-style: solid;
}

/* 2. Wspólny efekt wciśnięcia */
#avatar-editor-actions button:active {
    transform: translateY(3px); /* Efekt wciśnięcia */
    border-bottom-width: 2px;
}

/* 3. Ustawiamy kolory dla przycisku "Zapisz" (akcja główna) */
#avatar-save-btn {
    background-color: #28a745; /* Zielony, jak w innych miejscach gry */
    border-bottom-color: #218838;
}

/* 4. Ustawiamy kolory dla przycisku "Resetuj" (akcja drugorzędna) */
#avatar-reset-btn {
    background-color: #6c757d; /* Szary, standardowy dla resetu/cofania */
    border-bottom-color: #5a6268;
}

/* --- Kontrolki edycji --- */
#avatar-controls-wrapper { padding: 10px; border: 1px solid #ccc; border-radius: 8px; transition: opacity 0.3s, transform 0.3s; }
body.dark-mode #avatar-controls-wrapper { border-color: #4a617a; }

#avatar-controls-wrapper.hidden-by-tab {
    opacity: 0;
    transform: scale(0.95);
    pointer-events: none;
}

#avatar-controls.disabled { opacity: 0.5; pointer-events: none; }
#avatar-controls-hint { text-align: center; font-style: italic; color: #888; font-size: 0.9em; }
body.dark-mode #avatar-controls-hint { color: #aaa; }

.avatar-control-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.avatar-control-group.slider-group {
    display: grid;
    grid-template-columns: 80px 1fr 60px;
    gap: 10px;
}
.avatar-layer-buttons button { padding: 5px 10px; font-size: 1.2em; }
/* === NOWE, SPÓJNE STYLE DLA PRZYCISKÓW W EDYTORZE AWATARA === */

/* 1. Kontener na przyciski, używamy siatki (grid) do ułożenia ich obok siebie */
.avatar-action-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dwie równe kolumny */
    gap: 15px; /* Odstęp między przyciskami */
    margin-top: 10px;
}

/* 2. Wspólny styl dla obu przycisków */
.avatar-action-buttons button {
    width: 100%;
    padding: 10px 15px;
    font-size: 1em;
    font-weight: bold;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.07s ease-in-out;
    border-bottom-width: 5px;
    border-bottom-style: solid;
}

/* 3. Efekt "hover" i "active" dla obu przycisków */
.avatar-action-buttons button:hover {
    transform: translateY(-2px);
}
.avatar-action-buttons button:active {
    transform: translateY(3px);
    border-bottom-width: 2px;
    box-shadow: none;
}

/* 4. Indywidualne kolory i cienie */

/* Przycisk "Wyśrodkuj" (Niebieski, akcja główna) */
#avatar-center-item-btn {
    background-color: #007bff;
    border-bottom-color: #0056b3;
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2);
}
#avatar-center-item-btn:hover {
    background-color: #0069d9;
    box-shadow: 0 6px 15px rgba(0, 123, 255, 0.4);
}

/* Przycisk "Usuń" (Czerwony, akcja destrukcyjna) */
#avatar-delete-item-btn {
    background-color: #dc3545;
    border-bottom-color: #b02a37;
    box-shadow: 0 4px 10px rgba(220, 53, 69, 0.2);
}
#avatar-delete-item-btn:hover {
    background-color: #c82333;
    box-shadow: 0 6px 15px rgba(220, 53, 69, 0.4);
}


/* --- Selektor elementów --- */
#avatar-item-tabs {
    display: flex;
    margin-bottom: 10px;
    border-bottom: 1px solid #ccc;
}
.avatar-item-tab {
    padding: 8px;
    border: none;
    background: none;
    cursor: pointer;
    opacity: 0.6;
}
.avatar-item-tab.active { font-weight: bold; opacity: 1; border-bottom: 2px solid #007bff; }

#avatar-item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    gap: 16px;
    max-height: 300px;
    overflow-y: auto;
    padding: 15px;
}
.avatar-item {
    width: 50px;
    height: 50px;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    transition: transform 0.2s;
}
.avatar-item:hover { transform: scale(1.1); }
.avatar-item img { max-width: 100%; max-height: 100%; }

/* --- Elementy w podglądzie --- */
.avatar-element {
    position: absolute;
    cursor: grab;
    user-select: none;
}

/* === POCZĄTEK KLUCZOWEJ POPRAWKI === */
/* Ograniczamy styl zaznaczenia TYLKO do elementów wewnątrz podglądu edytora */
#avatar-preview .avatar-element.selected {
    outline: 2px dashed #007bff;
    outline-offset: 2px;
}
/* === KONIEC KLUCZOWEJ POPRAWKI === */

/* === POCZĄTEK KLUCZOWEJ POPRAWKI === */
/* Ta reguła sprawia, że obrazek akcesorium idealnie wypełnia swój kontener. */
.avatar-element img {
    width: 100%;
    height: 100%;
}

.avatar-element:active { cursor: grabbing; }
.avatar-element.selected {
    outline: 2px dashed #007bff;
    outline-offset: 2px;
}


/* ======================================= */
/* === WYŚWIETLANIE AWATARA W MENU === */
/* ======================================= */

.default-avatar-icon {
    position: absolute;
    width: 65%;
    height: 65%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.6; /* <-- ZMIANA: Zwiększamy widoczność */
    pointer-events: none;
    filter: invert(1); /* <-- DODANA KLUCZOWA LINIA: Odwraca kolory (czarny -> biały) */
}

/* === POCZĄTEK POPRAWIONYCH I OSTATECZNYCH STYLÓW DLA PROWADNIC === */
#avatar-preview::before,  /* Prowadnica pionowa */
#avatar-preview::after {   /* Prowadnica pozioma */
    content: '';
    position: absolute;
    background-color: #ff3838;
    z-index: 1;
    pointer-events: none;
    display: none; /* Domyślnie ukryte */
}

/* Styl dla prowadnicy pionowej */
#avatar-preview::before {
    width: 2px;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

/* Styl dla prowadnicy poziomej */
#avatar-preview::after {
    height: 2px;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* Klasy CSS, które będą włączać widoczność prowadnic */
#avatar-preview.show-vertical-guide::before {
    display: block;
}
#avatar-preview.show-horizontal-guide::after {
    display: block;
}

.avatar-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Ustawia tło za wszystkimi innymi elementami */
    object-fit: cover; /* Zapewnia, że obrazek wypełni całe kółko */
}

/* ========================================================= */
/* === NOWE STYLE: Podświetlenie aktywnego elementu w edytorze awatara === */
/* ========================================================= */

.avatar-item.active {
    border-color: #007bff;
    background-color: #e9ecef;
    /* Efekt "wypukłości" za pomocą cieni wewnętrznych */
    box-shadow: 
        inset 2px 2px 5px rgba(255, 255, 255, 0.7), 
        inset -2px -2px 5px rgba(0, 0, 0, 0.15);
    transform: scale(1.05); /* Lekkie powiększenie dla dodatkowego wyróżnienia */
}

/* Wersja dla trybu ciemnego */
body.dark-mode .avatar-item.active {
    border-color: #5dade2;
    background-color: #34495e;
    box-shadow: 
        inset 2px 2px 5px rgba(255, 255, 255, 0.1), 
        inset -2px -2px 5px rgba(0, 0, 0, 0.4);
}

/* ======================================= */
/* === NOWE STYLE: UKŁAD DWUKOLUMNOWY MENU === */
/* ======================================= */

/* Główny kontener dla dwukolumnowego układu */
#main-menu-layout-wrapper {
    display: flex;
    align-items: center;
    gap: 40px; /* Odstęp między kolumnami */
    margin-top: 20px; /* Mniejszy odstęp od tytułu */
    width: 100%;
}

/* Style dla lewej i prawej kolumny */
#main-menu-left-column,
#main-menu-right-column {
    flex: 1; /* Każda kolumna zajmuje tyle samo miejsca */
    display: flex;
    flex-direction: column;
    gap: 15px; /* Odstęp między elementami wewnątrz kolumny */
}

/* Poprawki marginesów dla przeniesionych elementów */
#player-greeting {
    margin-top: -15px !important; /* Mniejszy ujemny margines */
    margin-bottom: 20px !important; /* Mniejszy dolny margines */
    min-height: 40px; /* Dopasuj wartość, aby pasowała do rozmiaru fontu */
}

#main-menu-xp-container {
    margin-bottom: 10px; /* Zmniejszamy odstęp pod paskiem XP */
}

#daily-missions-container {
    margin: 10px 0 0 0; /* Zapewniamy tylko górny margines */
}

#menu-buttons {
    gap: 15px; /* Lekko zmniejszamy odstępy między grupami przycisków */
}

/* Dostosowanie kontenera menu, aby był szerszy */
.menu-content {
    min-width: 800px; /* Zapewnia, że kolumny się zmieszczą */
    padding: 40px;
}

/* Media query dla mniejszych ekranów, aby układ wrócił do jednokolumnowego */
@media (max-width: 850px) {
    #main-menu-layout-wrapper {
    display: flex;
    align-items: flex-start; /* ZMIANA: Wyrównuje obie kolumny w pionie względem siebie */
    gap: 40px; 
    margin-top: 20px;
    width: 100%;
}

#main-menu-left-column,
#main-menu-right-column {
    flex: 1; 
    display: flex;
    flex-direction: column;
    gap: 15px; 
}

/* DODANA REGUŁA: centruje zawartość TYLKO w prawej kolumnie */
#main-menu-right-column {
    justify-content: center;
}

    .menu-content {
        min-width: 0; /* Usuwamy minimalną szerokość */
        width: 90%;
        max-width: 500px;
    }
}

@keyframes breathe {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* Klasa dla kontenera, który znika */
.fading-out {
    transition: transform 0.3s ease-in, opacity 0.3s ease-in;
    transform: scale(0.95);
    opacity: 0;
    pointer-events: none; /* Wyłączamy interakcje podczas znikania */
}

/* Klasa dla kontenera, który się pojawia */
.fading-in {
    /* Upewniamy się, że stan początkowy jest ustawiony */
    transform: scale(0.95);
    opacity: 0;
    animation: zoomIn 0.4s 0.2s ease-out forwards; /* Używamy istniejącej animacji z opóźnieniem */
}

/* === STYLE DLA LICZNIKA POWTÓREK === */

#replays-counter {
    position: absolute;
    top: 28px; /* Dopasowanie w pionie do tytułu */
    right: 55px; /* Odstęp od przycisku 'x' */
    background-color: #e9ecef;
    color: #495057;
    padding: 5px 10px;
    border-radius: 12px;
    font-size: 0.9em;
    font-weight: bold;
    pointer-events: none; /* Zapobiega przypadkowemu kliknięciu */
}

/* Wersja dla trybu ciemnego */
body.dark-mode #replays-counter {
    background-color: #4a617a;
    color: #ecf0f1;
}

/* ===================================================================== */
/* === POPRAWKA: Wyłączenie pikselizacji dla awatara w motywie Pixel Art === */
/* ===================================================================== */

/* Ta reguła jest bardziej specyficzna niż globalna reguła motywu ('*'),
   dlatego nadpisuje ona renderowanie dla awatara i jego zawartości,
   przywracając domyślne, gładkie skalowanie. Działa zarówno dla
   podglądu w menu głównym, jak i w edytorze awatara. */
body.pixelart-theme #main-menu-avatar-display *,
body.pixelart-theme #avatar-preview * {
    image-rendering: auto !important;
    font-smooth: auto !important;
    -webkit-font-smoothing: auto !important;
}

/* ======================================= */
/* === STYLE DLA EKRANU ŁADOWANIA GRY === */
/* ======================================= */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1d2b49; /* Ciemne tło, pasujące do motywu */
    z-index: 9999; /* Musi być na samym wierzchu */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    transition: opacity 0.5s ease-out, visibility 0s linear 0.5s;
}

#loading-screen.fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#loading-screen h1 {
    font-family: 'Fredoka One', cursive;
    font-size: 3.5em;
    margin-bottom: 30px;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
}

.progress-bar-container {
    width: 90%;
    max-width: 400px;
    height: 20px;
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    overflow: hidden;
}

#progress-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #ffc107, #ff9800); /* Złoty gradient jak w XP */
    border-radius: 10px;
    transition: width 0.3s ease-out;
}

#loading-status {
    margin-top: 20px;
    font-size: 1.1em;
    color: rgba(255, 255, 255, 0.8);
}

/* =================================================================== */
/* === STYLE DLA INFORMACJI O STYLU KULEK W EDYTORZE AWATARA === */
/* =================================================================== */
#avatar-ball-style-info {
    font-size: 1.2em;
    font-style: italic;
    color: #6c757d; /* Szary, stonowany kolor */
    text-align: center;
    margin-top: 15px; /* Odstęp od siatki z kulkami */
    padding: 0 10px; /* Lekki padding boczny */
}

/* Wersja dla trybu ciemnego */
body.dark-mode #avatar-ball-style-info {
    color: #bdc3c7; /* Jaśniejszy szary */
}

/* --- NOWE STYLE DLA ZWIJANYCH SEKCJI W INSTRUKCJI --- */

.collapsible-toggle {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none; /* Zapobiega zaznaczaniu tekstu nagłówka */
    padding: 5px 0; /* Dodaje trochę przestrzeni do klikania */
}

.toggle-icon {
    transition: transform 0.4s ease-out;
    margin-left: 15px;
    font-size: 0.8em;
}

.collapsible-content {
    overflow: hidden;
    transition: max-height 0.4s ease-out, opacity 0.3s ease-out, padding-top 0.4s ease-out, margin-top 0.4s ease-out;
    max-height: 2000px; /* Zwiększona wartość, aby pomieścić długi tekst */
    opacity: 1;
    padding-top: 15px; /* Odstęp od nagłówka, gdy rozwinięte */
    margin-top: 0;
}

/* Stan zwinięty */
.help-section.collapsed .collapsible-content {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    margin-top: -15px; /* Kompensuje padding-bottom sekcji */
}

.help-section.collapsed .toggle-icon {
    transform: rotate(0deg); /* Strzałka w prawo */
}

/* Stan rozwinięty */
.help-section:not(.collapsed) .toggle-icon {
    transform: rotate(90deg); /* Strzałka w dół */
}

/* Poprawka dla nagłówków h4 wewnątrz zwijanej treści */
.collapsible-content h4 {
    margin-top: 20px; /* Zwiększamy odstęp od poprzedniego paragrafu */
    padding-bottom: 5px; /* Dodajemy trochę miejsca pod tekstem */
    border-bottom: 1px solid #ddd; /* Subtelna linia-separator */
    color: #555; /* Lekko jaśniejszy kolor niż czarny tekst */
    font-size: 1.1em; /* Lekko powiększamy */
}

body.dark-mode .collapsible-content h4 {
    border-bottom-color: #4a617a; /* Ciemniejszy separator */
    color: #ecf0f1; /* Kolor pozostaje bez zmian w trybie ciemnym */
}

/* --- NOWE STYLE DLA LISTY SKRÓTÓW KLAWISZOWYCH --- */
.shortcut-list {
    list-style-type: none;
    padding-left: 0;
    margin-top: 10px;
}

.shortcut-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 5px;
    border-bottom: 1px solid #eee;
}

.shortcut-list li:last-child {
    border-bottom: none;
}

.shortcut-key-container {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-right: 20px;
}

.shortcut-list kbd {
    background-color: #f0f2f5;
    border: 1px solid #ccc;
    border-bottom-width: 3px;
    border-radius: 5px;
    padding: 5px 10px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.9em;
    font-weight: bold;
    color: #333;
    white-space: nowrap;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

.shortcut-desc {
    text-align: right;
    color: #555;
}

/* Wersja dla trybu ciemnego */
body.dark-mode .shortcut-list li {
    border-bottom-color: #4a617a;
}

body.dark-mode .shortcut-list kbd {
    background-color: #4a617a;
    border-color: #526b84;
    color: #ecf0f1;
}

body.dark-mode .shortcut-desc {
    color: #bdc3c7;
}

/* --- NOWE, ULEPSZONE STYLE DLA LEGENDY IKON --- */
.collapsible-content .help-icon-row {
    gap: 20px; /* Zwiększamy odstęp między przyciskiem a tekstem */
}

/* Główny kontener na podgląd przycisku */
.icon-preview-container {
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    flex-shrink: 0; /* Zapobiega kurczeniu się kontenera */
    border: 3px solid transparent;
}

/* Styl dla ikon, które nie mają tła (Pauza, Powrót) - BEZ EFEKTU PRZYCISKU */
.icon-preview-simple {
    background-color: transparent;
    border-color: transparent;
}

/* W trybie ciemnym odwracamy kolory prostych ikon, aby były widoczne */
body.dark-mode .icon-preview-simple img {
    filter: invert(1);
}

/* Style odtwarzające wygląd przycisków 3D z gry */
.icon-preview-new-game { background-color: #007bff; border-color: #0056b3; }
.icon-preview-save { background-color: #ffc107; border-color: #d39e00; }
.icon-preview-undo { background-color: #6c757d; border-color: #494f54; }
.icon-preview-surrender { background-color: #dc3545; border-color: #b02a37; }

/* Zwiększamy rozmiar ikon, aby lepiej wypełniały przycisk i były wycentrowane */
.icon-preview-container img {
    width: 32px;
    height: 32px;
    position: relative; /* Umożliwia przesuwanie */
    left: 8px;          /* DODANA LINIA: Przesuwa ikonkę lekko w prawo */
}

/* === POPRAWKA: Zwiększenie szerokości okna profilu gracza === */
#stats-modal .modal-content {
    max-width: 750px; /* Zwiększono z domyślnych 500px */
}

/* ===================================================================== */
/* === POPRAWKA: Zwiększenie rozmiaru ikony błyskawicy w osiągnięciach === */
/* ===================================================================== */

/* Ta reguła jest bardziej specyficzna i nadpisuje domyślny rozmiar,
   ale TYLKO dla obrazka o nazwie "lightning.png" w motywie Pixel Art. */
body.pixelart-theme .achievement-icon img[src*="lightning.png"] {
    width: 40px;  /* Zwiększono z 32px */
    height: 40px; /* Zwiększono z 32px */
}

/* ========================================================= */
/* === POPRAWKA: Przywrócenie ikon Font Awesome w motywie Pixel Art === */
/* ========================================================= */

/* Ta reguła jest bardziej specyficzna niż globalna reguła '*' i nakazuje,
   aby elementy z klasą .fas (czyli ikony) używały swojej oryginalnej
   czcionki, a nie czcionki ArcadeClassic. Dzięki temu ikony znów są widoczne. */
body.pixelart-theme .fas {
    font-family: "Font Awesome 6 Free" !important;
}

/* ========================================================= */
/* === POPRAWKA: Prawidłowe skalowanie ikony żarówki w motywie Pixel Art === */
/* ========================================================= */

body.pixelart-theme #hint-btn img {
    width: 67px !important;
    height: auto !important;

    /* === POCZĄTEK DODANEGO KODU === */
    /* Te właściwości nakazują przeglądarce renderowanie obrazka
       bez wygładzania, zachowując ostre, kwadratowe piksele. */
    image-rendering: -moz-crisp-edges; /* Dla starszych wersji Firefox */
    image-rendering: crisp-edges;     /* Dla starszych wersji Chrome/Safari */
    image-rendering: pixelated;       /* Nowoczesny, standardowy sposób */
    /* === KONIEC DODANEGO KODU === */
}

/* ========================================================= */
/* === POPRAWKA: Powiększenie ikon zapisu i poddania się w motywie Pixel Art === */
/* ========================================================= */

/* Efekt dla ikony Zapisz w grze */
body.pixelart-theme #manage-saves-btn img {
    transform: scale(1.3);
}

/* Efekt dla ikony Poddaj się w grze */
body.pixelart-theme #surrender-btn img {
    transform: scale(1.3);
}

/* ======================================= */
/* === STYLE DLA ODZNAK PRESTIŻU === */
/* ======================================= */

.prestige-section {
    text-align: center;
}

.prestige-badges-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.prestige-badge {
    width: 50px;
    height: 50px;
    object-fit: contain;
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.2));
}

/* Wersja dla trybu ciemnego */
body.dark-mode .prestige-badge {
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.5));
}

/* === STYLE DLA NOWEGO POLA - PORTALU (v5 - Zwiększona przezroczystość krawędzi) === */

@keyframes portal-swirl {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes portal-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.9;
    }
    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}

@keyframes portal-core-pulse {
    0%, 100% { opacity: 0.7; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1); }
}

@keyframes portal-appear {
  from {
    transform: scale(0) rotate(-180deg);
    opacity: 0;
  }
  to {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes portal-disappear {
  from {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  to {
    transform: scale(0) rotate(180deg);
    opacity: 0;
  }
}

@keyframes portal-appear {
  from {
    transform: scale(0) rotate(-180deg);
    opacity: 0;
  }
  to {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* === POCZĄTEK NOWEGO KODU === */
@keyframes portal-disappear {
  from {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  to {
    transform: scale(0) rotate(180deg);
    opacity: 0;
  }
}

.portal-effect {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    border-radius: 50%;
    animation: portal-pulse 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 5;
}

.portal-effect::before {
    content: '';
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    border-radius: 50%;

    background:
        /* Warstwa 1 (Maska): Ciemne jądro i płynne zanikanie na krawędziach */
        radial-gradient(circle at center,
            rgba(15, 5, 30, 0.95) 15%,      /* Głębsze, ciemniejsze jądro (bez zmian) */
            rgba(131, 51, 184, 0.4) 45%,   /* ZMIANA: Strefa widocznej tekstury jest teraz bardziej przezroczysta i zaczyna zanikać wcześniej */
            rgba(155, 89, 182, 0) 65%      /* ZMIANA: Pełna przezroczystość jest osiągana szybciej, co powiększa przezroczystą krawędź */
        ),

        /* Warstwa 2 (Tekstura): Generowany proceduralnie szum fraktalny (mgławica) */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.6 0 0 0 0 0.2 0 0 0 0 0.9 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"),

        /* Warstwa 3 (Baza): Podstawowy, wirujący gradient kolorów */
        conic-gradient(
            from 0deg,
            #9b59b6, #8e44ad, #d8a3ff, #8e44ad, #9b59b6
        );

    background-blend-mode: multiply, overlay, normal;
    box-shadow: 0 0 15px 5px rgba(155, 89, 182, 0.7);
    animation: portal-swirl 6s linear infinite;
}

.portal-effect::after {
    content: '';
    position: absolute;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
    border-radius: 50%;
    background: radial-gradient(circle at center, 
        transparent 40%, 
        rgba(216, 163, 255, 0.4) 60%, 
        transparent 70%
    );
    animation: portal-core-pulse 2.5s ease-in-out infinite;
}


.portal-effect.portal-appearing {
    animation: portal-appear 0.5s ease-out forwards;
}

.portal-effect.portal-disappearing {
    animation: portal-disappear 0.4s ease-in forwards;
}

/* === NOWE, ULEPSZONE STYLE DLA HISTOGRAMU WYNIKÓW === */

.histogram-bar {
    fill: url(#histogram-gradient-green); /* Używamy gradientu jako tła */
    stroke: #1e8449; /* Ciemniejsza zielona obwódka */
    stroke-width: 1;
    transition: all 0.25s ease-out;
    /* NOWA WŁAŚCIWOŚĆ: Słupek jest maskowany od góry, co ukrywa go w stanie początkowym. */
    clip-path: inset(100% 0 0 0);
}

/* Wersja dla trybu ciemnego */
body.dark-mode .histogram-bar {
    fill: url(#histogram-gradient-green-dark);
    stroke: #2ecc71;
}

/* Nowy styl dla najwyższego słupka */
.histogram-bar.histogram-bar-max {
    fill: url(#histogram-gradient-gold); /* Złoty gradient dla rekordu */
    stroke: #c79100;
}
body.dark-mode .histogram-bar.histogram-bar-max {
    fill: url(#histogram-gradient-gold-dark);
    stroke: #ffd700;
}

/* Efekt po najechaniu myszką (usunięto transformację, aby uniknąć konfliktów wizualnych) */
.histogram-bar:hover {
    filter: brightness(1.15); /* Lekkie rozjaśnienie */
}

/* Nowa animacja "odsłaniania" słupka */
@keyframes wipe-in-up {
    from {
        clip-path: inset(100% 0 0 0); /* Słupek jest w pełni zamaskowany */
    }
    to {
        clip-path: inset(0% 0 0 0);   /* Maska jest usunięta, słupek w pełni widoczny */
    }
}
.histogram-bar.animate-grow {
    /* Używamy nowej animacji zamiast 'grow-bar' */
    animation: wipe-in-up 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Styl dla przełącznika typu wykresu (bez zmian) */
.chart-type-toggle .toggle-btn {
    font-size: 0.85em;
    padding: 6px 12px;
}

/* === NOWA ANIMACJA DLA PŁYNNEGO POJAWIANIA SIĘ WYKRESÓW === */
@keyframes chart-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* === STYLE DLA SEKCJI KOPII ZAPASOWEJ === */
.setting-row-backup {
    text-align: center;
}

.setting-row-backup h3 {
    margin-top: 0;
    color: #007bff;
}

.setting-row-backup p {
    color: #666;
    margin-bottom: 20px;
}

.backup-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

/* Wersja dla trybu ciemnego */
body.dark-mode .setting-row-backup {
    border-top-color: #4a617a;
}
body.dark-mode .setting-row-backup h3 {
    color: #5dade2;
}
body.dark-mode .setting-row-backup p {
    color: #bdc3c7;
}

/* ======================================= */
/* === STYLE DLA PRZYCISKU USUWANIA WYKRESU === */
/* ======================================= */

.chart-title-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    position: relative;
}

.btn-clear-chart {
    background: none;
    border: none;
    color: #dc3545; /* Czerwony kolor ikony */
    cursor: pointer;
    font-size: 1.1em;
    padding: 5px;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-clear-chart:hover {
    background-color: #f8d7da; /* Jasnoczerwone tło po najechaniu */
    color: #721c24; /* Ciemniejszy czerwony */
}

/* Wersja dla trybu ciemnego */
body.dark-mode .btn-clear-chart {
    color: #e74c3c;
}

body.dark-mode .btn-clear-chart:hover {
    background-color: rgba(231, 76, 60, 0.2);
    color: #ff7675;
}

/* ======================================= */
/* === STYLE DLA KREATORA KULEK 2.0 === */
/* ======================================= */

/* === STYLE DLA NOWEGO PRZYCISKU ZARZĄDZANIA PRESETAMI === */
.avatar-preview-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

#manage-presets-btn {
    padding: 8px 15px;
    font-size: 1em;
}

#manage-presets-btn:hover {
    transform: translateY(-2px);
}

/* Nowe przyciski w edytorze */
#ball-editor-image-btn,
#ball-editor-remove-image-btn {
    width: 60px;
    height: 60px; /* Poprawka: Jawne ustawienie wysokości */
    box-sizing: border-box; /* Poprawka: Zapewnia spójne wymiary */
    font-size: 1.5em; /* Dopasowujemy rozmiar ikon FontAwesome */
}

/* Przycisk wgrywania (Zielony) */
#ball-editor-image-btn {
    background-color: #28a745;
    border-bottom-color: #218838;
}

/* Przycisk usuwania obrazka (Czerwony - ale inny niż usuwania emoji) */
#ball-editor-remove-image-btn {
    background-color: #dc3545;
    border-bottom-color: #b02a37;
}

/* Stan wyłączony - gdy np. wybrano emoji */
#ball-editor-image-btn.disabled,
#ball-editor-remove-image-btn.disabled {
    background-color: #6c757d;
    border-bottom-color: #494f54;
    opacity: 0.6;
    cursor: not-allowed;
}
#ball-editor-image-btn.disabled:active,
#ball-editor-remove-image-btn.disabled:active,
#ball-editor-emoji-btn.disabled:active {
    transform: none;
    border-bottom-width: 5px;
}

/* Kontener na niestandardowy obrazek wewnątrz kulki */
.ball-custom-icon {
    position: absolute;
    /* Usunięto width i height - teraz będą ustawiane przez JS */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-size: contain; /* Gwarantuje, że obrazek się zmieści bez zniekształceń */
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%; /* Zaokrąglenie, jeśli obrazek jest kwadratowy */
    z-index: 1; /* Na tej samej warstwie co emoji */
    pointer-events: none;
}

/* Dodaj tę regułę, aby zapewnić minimalny rozmiar nawet bez ikony */
#ball-editor-image-btn,
#ball-editor-remove-image-btn {
    min-width: 60px;
    min-height: 60px;
}

/* ===================================================================== */
/* === POPRAWKA v2: Stabilizacja szerokości timera w motywie Pixel Art === */
/* ===================================================================== */

body.pixelart-theme #timer-container {
    min-width: 170px;
    justify-content: center; /* Dodatkowe wyśrodkowanie tekstu wewnątrz kontenera */
}

/* ===================================================================== */
/* === NOWY MOTYW: KLASYCZNY WINDOWS (XP AESTHETIC) v2.0 === */
/* ===================================================================== */

@font-face {
  font-family: 'TahomaXP';
  src: url('fonts/windows-xp-tahoma.otf') format('opentype');
  size-adjust: 135%;
}

/* Definiujemy paletę kolorów "Luna Blue" dla łatwiejszego zarządzania */
body.winxp-theme {
    --xp-blue: #245edc;
    --xp-blue-gradient-start: #3b75d5;
    --xp-blue-gradient-end: #245edc;
    --xp-gray-bg: #ece9d8;
    --xp-border-light: #ffffff;
    --xp-border-dark: #808080;
    --xp-text: #000000;
    --xp-green: #31a74c;
    --xp-green-highlight: #4fd86b;
    --xp-selection-bg: #2f71cd;
    --xp-hover-border: #f9a636;
}

/* Ustawiamy specjalną czcionkę TahomaXP TYLKO dla elementów interfejsu */
body.winxp-theme button,
body.winxp-theme input,
body.winxp-theme select,
body.winxp-theme .modal-content,
body.winxp-theme .custom-modal-box,
body.winxp-theme #game-container,
/* Stosujemy czcionkę do nagłówków, z wyjątkiem głównego tytułu gry */
body.winxp-theme h1:not([data-i18n-key="gameTitle"]), 
body.winxp-theme h2, 
body.winxp-theme h3 {
    font-family: 'TahomaXP', Tahoma, Geneva, Verdana, sans-serif !important;
}

/* Tło pulpitu "Bliss" */
body.winxp-theme::before {
    background-image: url('images/winxp-bliss.jpg');
    background-color: #3a6ea5;
}

/* Główne okno gry i okna modalne - klasyczna ramka i tło */
body.winxp-theme #game-container,
body.winxp-theme .modal-content,
body.winxp-theme .custom-modal-box {
    background-color: var(--xp-gray-bg);
    color: var(--xp-text);
    border: 1px solid var(--xp-border-dark);
    box-shadow: inset 1px 1px 0 var(--xp-border-light);
    border-radius: 8px 8px 3px 3px;
    padding: 3px;
    font-size: 1em;
}

/* Pasek tytułowy dla okien */
body.winxp-theme #game-container > h1,
body.winxp-theme .modal-content h2,
body.winxp-theme .custom-modal-box h3 {
    background: linear-gradient(to right, var(--xp-blue-gradient-start), var(--xp-blue-gradient-end));
    color: white;
    padding: 4px 8px;
    margin: 0;
    border-radius: 6px 6px 0 0;
    font-size: 1.1em;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
    font-weight: bold;
    letter-spacing: 0;
    position: relative; /* Dla przycisku zamykania */
}

/* Wyłączenie nowoczesnej linii i stylizacja zakładek na wzór Windows XP */
body.winxp-theme #settings-modal-tabs-container::after,
body.winxp-theme #skins-modal-tabs-container::after,
body.winxp-theme #stats-modal-tabs-container::after {
    display: none; /* Ukrywamy nowoczesną, animowaną linię */
}

body.winxp-theme #settings-modal-tabs-container,
body.winxp-theme #skins-modal-tabs-container,
body.winxp-theme #stats-modal-tabs-container {
    border-bottom: 1px solid var(--xp-border-dark); /* Ustawiamy dolną granicę dla całego kontenera */
}

body.winxp-theme .tab-button.active {
    border: 1px solid var(--xp-border-dark) !important; /* Dodajemy obramowanie po bokach i na górze */
    border-bottom-color: var(--xp-gray-bg) !important; /* "Usuwamy" dolną granicę, ustawiając jej kolor na kolor tła */
    border-radius: 3px 3px 0 0 !important; /* Zaokrąglamy tylko górne rogi */
    font-weight: normal !important; /* W XP aktywne zakładki nie były pogrubione */
    color: var(--xp-text) !important;
}

/* Ikoniczny przycisk zamykania dla okien modalnych */
body.winxp-theme .modal-content .close-modal-btn {
    background: linear-gradient(to bottom, #fb836f, #e14747);
    border: 1px solid #8c3523;
    box-shadow: inset 0 0 0 1px #fdc1b9;
    color: white;
    border-radius: 3px;
    width: 20px;
    height: 20px;
    font-size: 0; /* Ukrywamy domyślny '×' */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; /* Pozostawione zgodnie z prośbą */

    /* === POCZĄTEK POPRAWKI === */
    float: right; /* Ustawia element po prawej stronie */
    margin: -7px -10px 0 0; /* Dodaje mały margines od góry i prawej */
    Z-index: 10;
    /* === KONIEC POPRAWKI === */
}
/* Rysujemy "X" za pomocą pseudo-elementów */
body.winxp-theme .modal-content .close-modal-btn::before,
body.winxp-theme .modal-content .close-modal-btn::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 2px;
    background-color: white;
}
body.winxp-theme .modal-content .close-modal-btn::before { transform: rotate(45deg); }
body.winxp-theme .modal-content .close-modal-btn::after { transform: rotate(-45deg); }

/* Plansza i komórki */
body.winxp-theme #game-board {
    border: 1px inset var(--xp-border-dark);
    background-color: var(--xp-border-light);
    border-radius: 0;
}
body.winxp-theme .cell {
    background-color: var(--xp-border-light);
    border: 1px solid var(--xp-gray-bg);
    transition: none;
}
body.winxp-theme .cell:hover {
    background-color: #d4e8ff;
}

/* Przyciski - kluczowy element stylu */
body.winxp-theme button,
body.winxp-theme .custom-modal-buttons a {
    background: linear-gradient(to bottom, #fcfcfd, #e0e0e0) !important;
    border: 1px solid var(--xp-border-dark) !important;
    box-shadow: inset 0 0 0 1px var(--xp-border-light) !important;
    border-radius: 5px !important;
    color: var(--xp-text) !important;
    font-family: Tahoma, sans-serif !important;
    transition: none !important;
    transform: none !important;
    padding: 5px 12px;
}
body.winxp-theme button:hover,
body.winxp-theme .custom-modal-buttons a:hover {
    background: linear-gradient(to bottom, #fff, #ffe19b) !important;
    border-color: var(--xp-hover-border) !important;
}
body.winxp-theme button:active,
body.winxp-theme .custom-modal-buttons a:active {
    background: linear-gradient(to top, #fcfcfd, #e0e0e0) !important;
}
/* Specjalne przyciski 3D w grze */
body.winxp-theme #button-container button {
    border-bottom-width: 1px !important;
    border-style: solid !important;
}
body.winxp-theme #new-game-btn { background-color: #d4e8ff !important; }
body.winxp-theme #manage-saves-btn { background-color: #fff8d4 !important; }
body.winxp-theme #undo-btn { background-color: #f0f0f0 !important; }
body.winxp-theme #surrender-btn { background-color: #ffd4d4 !important; }
body.winxp-theme #hint-btn { background-color: #e8d4ff !important; }

/* Pasek postępu (XP) */
body.winxp-theme .xp-bar-wrapper {
    background-color: var(--xp-border-light);
    border: 1px inset var(--xp-border-dark);
    border-radius: 3px;
    padding: 2px;
}
body.winxp-theme #main-menu-xp-bar {
    border-radius: 0;
    background: repeating-linear-gradient(90deg, var(--xp-green), var(--xp-green) 10px, var(--xp-green-highlight) 10px, var(--xp-green-highlight) 12px);
}

/* Zaznaczone elementy w listach */
body.winxp-theme .skin-option.selected,
body.winxp-theme .ball-style-option.selected,
body.winxp-theme #high-scores-list li.score-highlight {
    background-color: var(--xp-selection-bg) !important;
    border-color: var(--xp-selection-bg) !important;
    color: white !important;
}
body.winxp-theme .skin-option.selected .skin-name,
body.winxp-theme .ball-style-option.selected .ball-style-name,
body.winxp-theme #high-scores-list li.score-highlight .score-entry-player,
body.winxp-theme #high-scores-list li.score-highlight .score-entry-details {
    color: white !important;
}

/* Ikony - subtelny filtr dla klimatu retro */
body.winxp-theme img {
    filter: saturate(1.1) contrast(1.05);
}
body.winxp-theme .menu-icon-buttons button img {
    filter: drop-shadow(1px 1px 0px rgba(0,0,0,0.3)) saturate(1.1) contrast(1.05);
}

/* Paski przewijania */
body.winxp-theme ::-webkit-scrollbar { width: 17px; height: 17px; }
body.winxp-theme ::-webkit-scrollbar-track { background: var(--xp-gray-bg); }
body.winxp-theme ::-webkit-scrollbar-thumb {
    background-color: #d4d0c8;
    border: 1px outset #fff;
}
body.winxp-theme ::-webkit-scrollbar-button {
    background-color: #d4d0c8;
    border: 1px outset #fff;
    height: 17px;
    width: 17px;
}

/* Ukrycie nowoczesnych elementów */
body.winxp-theme #player-greeting {
    display: none !important;
}

/* ===================================================================== */
/* === POPRAWKA: Pozycjonowanie licznika powtórek w motywie WinXP === */
/* ===================================================================== */

body.winxp-theme #replays-counter {
    /* Nadpisujemy domyślne pozycjonowanie, aby pasowało do paska tytułowego XP */
    top: 8px;       /* Wyrównanie w pionie z tekstem tytułu */
    right: 300px;    /* Odstęp od prawego przycisku zamykania */

    /* Dopasowujemy wygląd do estetyki paska tytułowego */
    background-color: transparent;
    color: white;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.3); /* Cień jak w tytule */
    border: none;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
    font-size: 1em; /* Spójny rozmiar z tytułem */
}

/* ===================================================================== */
/* === NOWE IKONY DLA MOTYWU WINDOWS XP === */
/* ===================================================================== */

/* Ustawiamy ostre krawędzie dla ikon, aby wyglądały jak w starych systemach */
body.winxp-theme img {
    image-rendering: crisp-edges;
}

/* Podmiana ikon w menu głównym */
body.winxp-theme #menu-high-scores-icon img { content: url('images/winxp/trophy.png'); }
body.winxp-theme #menu-achievements-btn img { content: url('images/winxp/achievements.png'); }
body.winxp-theme #menu-replays-btn img { content: url('images/winxp/replays.png'); }
body.winxp-theme #menu-skins-btn img { content: url('images/winxp/themes.png'); 
transform: scale(1.35); }
body.winxp-theme #menu-stats-btn img { content: url('images/winxp/stats.png'); }
body.winxp-theme #menu-settings-btn img { content: url('images/winxp/settings.png'); }
body.winxp-theme #menu-help-btn-icon img { content: url('images/winxp/help.png');
transform: scale(1.15); }

/* Podmiana ikon w grze */
body.winxp-theme #new-game-btn img { content: url('images/winxp/new-game.png'); transform: scale(0.8); }
body.winxp-theme #manage-saves-btn img { content: url('images/winxp/save.png'); transform: scale(1.2); }
body.winxp-theme #undo-btn img { content: url('images/winxp/undo.png'); }
body.winxp-theme #hint-btn img { content: url('images/winxp/hint.png'); transform: scale(0.8); }
body.winxp-theme #surrender-btn img { content: url('images/winxp/surrender.png'); }
body.winxp-theme #pause-btn img { content: url('images/winxp/pause.png'); }

/* ========================================================= */
/* === NOWE STYLE: INFORMACJA O ROZMIARZE CIASTECZEK === */
/* ========================================================= */

.setting-row-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5px;
    border-bottom: 1px solid #eee;
}

.setting-row-info span:first-child {
    color: #333;
    font-size: 1.05em;
}

.setting-row-info span:last-child {
    font-weight: bold;
    color: #007bff; /* Niebieski kolor dla wartości, aby się wyróżniała */
}

/* Wersja dla trybu ciemnego */
body.dark-mode .setting-row-info {
    border-bottom-color: #4a617a;
}

body.dark-mode .setting-row-info span:first-child {
    color: #ecf0f1;
}

body.dark-mode .setting-row-info span:last-child {
    color: #5dade2;
}

/* ======================================= */
/* === STYLE DLA WSKAŹNIKA PAMIĘCI === */
/* ======================================= */

.storage-warning-icon {
    color: #ff3838;
    margin-left: 8px;
    font-size: 0.9em;
    animation: storage-warning-pulse 1.5s infinite;
    display: none; /* Domyślnie ukryty */
    vertical-align: middle;
}

.storage-warning-icon.visible {
    display: inline; /* Pokazujemy, gdy jest potrzebny */
}

@keyframes storage-warning-pulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.2); opacity: 1; }
}

.storage-bar-container {
    margin: 5px auto 15px; /* ZMIANA: Dodano 'auto', aby wycentrować pasek w poziomie */
    margin-bottom: 15px;
    height: 15px;
}

#local-storage-progress-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #5dade2, #007bff);
    border-radius: 10px;
    transition: width 0.5s ease-out, background 0.5s ease-out;
}

#local-storage-progress-bar.warning {
    background: linear-gradient(90deg, #ffc107, #dc3545);
}

.storage-info-text {
    font-size: 0.85em;
    color: #666;
    text-align: center;
    margin-top: 10px;
}

/* Wersja dla trybu ciemnego */
body.dark-mode .storage-info-text {
    color: #bdc3c7;
}

/* ======================================= */
/* === STYLE DLA NOWYCH ELEMENTÓW INFO === */
/* ======================================= */

.setting-row-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5px;
}

.setting-row-info span:first-child {
    color: #333;
    font-size: 1.05em;
}

.setting-row-info span:last-child {
    font-weight: bold;
    color: #007bff;
}

/* Wersja dla trybu ciemnego */
body.dark-mode .setting-row-info {
    border-bottom-color: #4a617a;
}

body.dark-mode .setting-row-info span:first-child {
    color: #ecf0f1;
}

body.dark-mode .setting-row-info span:last-child {
    color: #5dade2;
}

/* ======================================= */
/* === STYLE DLA ROZPISKI PAMIĘCI === */
/* ======================================= */

#storage-breakdown-container {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.storage-item {
    padding: 10px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
}

.storage-item-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.storage-item-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.storage-item-info {
    flex-grow: 1;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.storage-item-name {
    font-weight: bold;
    color: #333;
}

.storage-item-size {
    font-size: 0.9em;
    font-weight: 500;
    color: #6c757d;
}

.storage-item-bar-container {
    height: 8px;
    background-color: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
}

.storage-item-bar {
    height: 100%;
    width: 0%;
    border-radius: 4px;
    transition: width 0.5s ease-out;
}

/* Wersja dla trybu ciemnego */
body.dark-mode .storage-item {
    background-color: #2c3e50;
    border-color: #4a617a;
}
body.dark-mode .storage-item-name {
    color: #ecf0f1;
}
body.dark-mode .storage-item-size {
    color: #bdc3c7;
}
body.dark-mode .storage-item-bar-container {
    background-color: rgba(0, 0, 0, 0.3);
}

/* ===================================================================== */
/* === POPRAWKA WIDOCZNOŚCI ELEMENTÓW I UKŁADU W MOTYWIE WINDOWS XP === */
/* ===================================================================== */

body.winxp-theme #game-container {
    padding: 40px; /* Zwiększamy padding dla większej przestrzeni wokół wszystkich elementów */
}

/* Usuwamy kontekst pozycjonowania z main-content-area TYLKO dla tego motywu.
   To pozwala, aby xp-circle-container pozycjonowało się względem game-container. */
body.winxp-theme #main-content-area {
    position: static; /* KLUCZOWA ZMIANA */
    gap: 40px;        /* Zwiększamy odstęp między głównymi sekcjami */
}

/* Teraz xp-circle-container jest pozycjonowany względem #game-container */
body.winxp-theme #xp-circle-container {
    position: absolute; /* Zachowujemy absolutne pozycjonowanie */
    bottom: 20px;       /* Pozycja od dołu game-container */
    right: 20px;        /* Pozycja od prawej game-container */
    z-index: 150;       /* Upewniamy się, że jest na wierzchu */
}

/* Drobne dostosowanie szerokości ikon, aby lepiej wyglądały w nowym układzie */
body.winxp-theme .game-icon-buttons {
    width: 100px; /* Dajemy więcej miejsca na ikony, jeśli zajdzie potrzeba */
}

/* ===================================================================== */
/* === ULEPSZONY MOTYW WINDOWS XP - WIDOK GRY (WERSJA 2.0) === */
/* ===================================================================== */

/* Poprawka ogólnego layoutu, aby uniknąć nakładania się elementów */
body.winxp-theme #game-container {
    padding: 20px 30px 30px 30px; /* Zwiększamy padding, aby zrobić więcej miejsca */
}
body.winxp-theme #main-content-area {
    position: static; /* KLUCZOWA ZMIANA: Pozwala kółku XP pozycjonować się względem kontenera gry */
    gap: 25px;
}
body.winxp-theme #xp-circle-container {
    bottom: 15px; /* Ustawiamy pozycję względem #game-container */
    right: 15px;
}

/* Nagłówek (pasek narzędzi) */
body.winxp-theme #header {
    background-color: #f0f0f0; /* Jasnoszare tło paska */
    border-bottom: 1px solid var(--xp-border-dark);
    box-shadow: inset 0 1px 0 var(--xp-border-light);
    padding: 5px 8px;
    margin-bottom: 8px;
    border-radius: 3px;
    align-items: center;
}

/* Ukrywamy domyślny tytuł H1 w widoku gry, bo jest już w pasku tytułowym okna */
body.winxp-theme #game-container > h1 {
    display: none;
}

/* Separatory w nagłówku - efekt grawerowanej linii */
body.winxp-theme #timer-container::before,
body.winxp-theme #next-balls-container::before {
    height: 90%;
    border-left: 1px solid var(--xp-border-dark);
    border-right: 1px solid var(--xp-border-light);
    width: 0;
    background-color: transparent;
}

/* Podgląd następnych kulek - efekt wklęsły */
body.winxp-theme #next-balls {
    border: 1px solid var(--xp-border-dark);
    background-color: var(--xp-border-light);
    box-shadow: inset 1px 1px 0 var(--xp-border-dark);
    padding: 2px 5px;
    border-radius: 0;
}

/* Plansza - efekt wklęsły */
body.winxp-theme #game-board {
    border: 2px inset var(--xp-border-dark);
    background-color: #d4d0c8; /* Kolor tła siatki (dla linii) */
    gap: 1px;
}

/* Komórki */
body.winxp-theme .cell {
    background-color: white;
    border: none; /* Usuwamy domyślną ramkę komórki */
}

/* Podświetlenie pola */
body.winxp-theme .cell.path-possible,
body.winxp-theme .cell:hover {
    background-color: #d8e6f9 !important; /* Jasnoniebieskie podświetlenie */
    outline: 1px solid #7f9db9; /* Klasyczna ramka XP */
    outline-offset: -1px;
}
body.winxp-theme .cell.path-impossible {
    background-color: #f9d8d8 !important;
    outline: 1px solid #b97f7f !important;
}

/* Dolne przyciski - styl klasycznych przycisków systemowych */
body.winxp-theme #button-container {
    justify-content: flex-start; /* Przyciski po lewej stronie */
}
body.winxp-theme #button-container button {
    width: auto !important;
    height: auto !important;
    min-width: 75px;
    padding: 2px 12px !important;
    border-bottom-width: 1px !important;
}
 body.winxp-theme #button-container button:active {
    padding: 3px 11px 1px 13px !important; /* Symulacja wciśnięcia */
    border-style: inset !important;
}

/* Kółko XP - stylizacja na wypukły "panel" */
body.winxp-theme #xp-circle-container {
    border: 2px outset var(--xp-border-light);
    border-radius: 50%;
    background: var(--xp-gray-bg);
    filter: none;
    box-shadow: none;
}
body.winxp-theme #xp-circle-progress {
    background: conic-gradient(#ffc107 0deg, #e0e0e0 0deg);
}

/* Poprawka pozycji przycisków pauzy/muzyki w motywie XP */
body.winxp-theme #pause-btn,
body.winxp-theme #game-toggle-music-btn {
    top: 5px; /* Dopasowanie do paska tytułowego okna */
}

/* ===================================================================== */
/* === POPRAWKA WYGLĄDU I ROZMIARU W MOTYWIE WINDOWS XP (v2.1) === */
/* ===================================================================== */

body.winxp-theme #game-container {
    padding: 40px; /* ZNACZNIE zwiększamy padding, aby poszerzyć i wydłużyć cały kontener gry */
}

/* Usuwamy kontekst pozycjonowania, aby kółko XP pozycjonowało się względem kontenera gry */
body.winxp-theme #main-content-area {
    position: static;
    gap: 40px;        /* Zwiększamy odstęp między planszą a bocznymi ikonami */
}

/* Pozycjonujemy kółko XP względem nowego, większego kontenera #game-container */
body.winxp-theme #xp-circle-container {
    position: absolute;
    bottom: 20px;       /* Zwiększamy odstęp od dolnej krawędzi */
    right: 20px;        /* Zwiększamy odstęp od prawej krawędzi */
    z-index: 150;
}

/* Zwiększamy odstęp nad dolnymi przyciskami, aby nie "przyklejały" się do planszy */
body.winxp-theme #button-container {
    margin-top: 25px;
}

/* =================================================================== */
/* === STYLE DLA PALETY KOLORÓW PIXEL ART === */
/* =================================================================== */

/* Kontener na całą paletę */
#pixelart-palette-container {
    flex-wrap: wrap; /* Pozwala na zawijanie do nowego wiersza */
    gap: 10px;
    max-width: 300px; /* Ogranicza szerokość, aby wyglądało estetycznie */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f8f9fa;
}

body.dark-mode #pixelart-palette-container {
    border-color: #4a617a;
    background-color: #2c3e50;
}

/* Pojedynczy przycisk z kolorem w palecie */
.palette-color-option {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #ccc;
    cursor: pointer;
    padding: 2px;
    background-color: #e0e0e0;
    transition: all 0.2s ease;
}

.palette-color-option:hover {
    transform: scale(1.1);
    border-color: #007bff;
}

/* Styl dla aktywnego (wybranego) koloru w palecie */
.palette-color-option.active {
    border-color: #28a745; /* Zielony, jak przycisk "Zapisz" */
    transform: scale(1.1);
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.7);
}

/* Obrazek kulki wewnątrz przycisku */
.palette-color-option img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
}

/* Klasa pomocnicza do ukrywania standardowego selektora kolorów */
.hidden-picker {
    display: none !important;
}

/* ===================================================================== */
/* === NOWE REGUŁY DLA KULEK PIXEL ART (dodatkowe kolory) === */
/* ===================================================================== */

/* Te reguły są niezbędne, aby nowe kolory wyświetlały się w grze. */
body.ball-style-pixelart .ball.dark_green::before  { --pixelart-bg-image: url('images/dark_green-pixelart.png'); }
body.ball-style-pixelart .ball.pink::before       { --pixelart-bg-image: url('images/pink-pixelart.png'); }
body.ball-style-pixelart .ball.brown::before      { --pixelart-bg-image: url('images/brown-pixelart.png'); }
body.ball-style-pixelart .ball.lime::before       { --pixelart-bg-image: url('images/lime-pixelart.png'); }
body.ball-style-pixelart .ball.light_gray::before { --pixelart-bg-image: url('images/light_gray-pixelart.png'); }
body.ball-style-pixelart .ball.dark_blue::before  { --pixelart-bg-image: url('images/dark_blue.png'); } /* Poprawka nazwy pliku */
body.ball-style-pixelart .ball.dark_gray::before  { --pixelart-bg-image: url('images/dark_gray-pixelart.png'); }

/* === NOWE STYLE: Blokada przycisków emoji dla stylu Pixel Art === */

/* 1. Modyfikujemy istniejącą regułę, dodając do niej przyciski emoji */
#ball-editor-image-btn.disabled,
#ball-editor-remove-image-btn.disabled,
#ball-editor-emoji-btn.disabled,
#ball-editor-remove-emoji-btn.disabled {
    background-color: #6c757d;
    border-bottom-color: #494f54;
    opacity: 0.6;
    cursor: not-allowed;
}

/* 2. Dodajemy nową regułę dla zablokowanych przycisków emoji, która doda kłódkę */
#ball-editor-emoji-btn.disabled,
#ball-editor-remove-emoji-btn.disabled {
    position: relative; /* Wymagane dla pozycjonowania ::after */
    color: transparent; /* Ukrywamy oryginalne emoji (np. 😀, ❌) */
    user-select: none;  /* Zapobiegamy zaznaczaniu ukrytego tekstu */
}

#ball-editor-emoji-btn.disabled::after,
#ball-editor-remove-emoji-btn.disabled::after {
    content: '🔒';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white; /* Kolor kłódki */
    font-size: 1.5em; /* Rozmiar kłódki */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    /* Upewniamy się, że kłódka nie dziedziczy czcionki pixel art */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

/* ===================================================================== */
/* === OSTATECZNE STYLE DLA OBRAMOWAŃ PRESTIŻU (v5 - POPRAWKA OBCINANIA) === */
/* ===================================================================== */

/* Zewnętrzny wrapper: teraz to tylko kwadratowy kontener pozycjonujący.
   NIE MA żadnych stylów wizualnych (ani tła, ani cienia). */
#main-menu-avatar-wrapper {
    width: 100px;
    height: 100px;
    margin-top: -20px;
    margin-bottom: 25px;
    cursor: pointer;
    align-self: center;
    flex-shrink: 0;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Wewnętrzny element: teraz to on jest widocznym okręgiem i to ON
   jest odpowiedzialny za poświatę (box-shadow). */
#main-menu-avatar-display {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    padding: 4px; /* Grubość ramki */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    box-sizing: border-box;
    position: relative;
    overflow: hidden; 
}

/* Wewnętrzny kontener na treść awatara (bez zmian) */
#main-menu-avatar-content {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

/* --- Style dla poszczególnych poziomów (teraz box-shadow jest na #main-menu-avatar-display) --- */

/* Poziom 1: Platyna */
#main-menu-avatar-display.prestige-level-1 { 
    background: linear-gradient(45deg, #e0e0e0, #ffffff, #b0c4de, #c0c0c0);
    box-shadow: 0 0 12px rgba(220, 220, 255, 0.6);
}

/* Poziom 2: Złoto */
#main-menu-avatar-display.prestige-level-2 { 
    background: linear-gradient(45deg, #ffd700, #f0c040, #ffec80, #c09830);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

/* Poziom 3: Tęcza */
@keyframes prestige-rainbow-scroll { to { background-position: 200% center; } }
#main-menu-avatar-display.prestige-level-3 {
    /* ZMIANA: Dodano krycie 0.5 do każdego koloru w gradiencie */
    background-image: linear-gradient(90deg, rgba(255,0,0,0.5), rgba(255,165,0,0.5), rgba(255,255,0,0.5), rgba(0,255,0,0.5), rgba(0,255,255,0.5), rgba(0,0,255,0.5), rgba(255,0,255,0.5), rgba(255,0,0,0.5));
    background-size: 200% 200%;
    animation: prestige-rainbow-scroll 4s linear infinite;
    /* ZMIANA: Zmniejszono krycie poświaty z 0.6 na 0.4 */
    box-shadow: 0 0 15px rgba(128, 0, 128, 0.4);
}

/* Poziom 4: Ogień */
@keyframes prestige-pulse {
    0% { box-shadow: 0 0 18px rgba(255, 100, 0, 0.7); }
    50% { box-shadow: 0 0 25px rgba(255, 150, 0, 1); }
    100% { box-shadow: 0 0 18px rgba(255, 100, 0, 0.7); }
}
#main-menu-avatar-display.prestige-level-4 { 
    background-image: linear-gradient(45deg, #ff4e00, #ffc500, #ff8c00, #ff4e00);
    animation: prestige-pulse 2s ease-in-out infinite;
}

/* Poziom 5: Ametyst / Kosmos */
@keyframes prestige-amethyst-glow {
    0%, 100% { box-shadow: 0 0 15px 2px rgba(162, 102, 255, 0.7), inset 0 0 5px rgba(220, 200, 255, 0.3); }
    50% { box-shadow: 0 0 25px 5px rgba(189, 137, 255, 1), inset 0 0 10px rgba(230, 220, 255, 0.5); }
}
@keyframes prestige-light-spin {
    from { transform: rotate(0deg); } to { transform: rotate(360deg); }
}
#main-menu-avatar-display.prestige-level-5 {
    background-image: linear-gradient(45deg, #1e133b, #4a2f6c, #a4508b, #5f4b8b);
    animation: prestige-amethyst-glow 2.5s ease-in-out infinite;
}
#main-menu-avatar-display.prestige-level-5::before {
    content: ''; position: absolute; top: -50%; left: -50%;
    width: 200%; height: 200%;
    background-image: conic-gradient(transparent 0deg 160deg, rgba(220, 180, 255, 0.4) 180deg, transparent 180deg 340deg, rgba(180, 220, 255, 0.3) 360deg);
    animation: prestige-light-spin 5s linear infinite;
}
#main-menu-avatar-display.prestige-level-5::after {
    content: ''; position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; border-radius: 50%;
    box-shadow: inset 0 0 8px 2px rgba(230, 210, 255, 0.3);
    pointer-events: none;
}

/* ======================================= */
/* === NOWE STYLE: ODZNAKA PRESTIŻU === */
/* ======================================= */

/* Podstawowy styl i pozycjonowanie odznaki */
.prestige-level-badge {
    position: absolute;
    bottom: -5px; /* Nachodzi na ramkę od dołu */
    right: -5px;  /* Nachodzi na ramkę od prawej */
    width: 40px;
    height: 40px;
    z-index: 10;
    object-fit: contain;
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.4));
}

/* === NOWE STYLE: Poprawka kolorów zakładek w edytorze awatara (Tryb Ciemny) === */
body.dark-mode #avatar-item-tabs {
    border-bottom-color: #4a617a;
}
body.dark-mode .avatar-item-tab {
    color: #bdc3c7; /* Jasny, ale nieaktywny kolor tekstu */
}
body.dark-mode .avatar-item-tab.active {
    color: #ecf0f1; /* Jaśniejszy, biały kolor dla aktywnej zakładki */
    border-bottom-color: #5dade2; /* Kolor podkreślenia spójny z motywem */
}

/* NOWY STYL: Kontener na podgląd i informacje */
.save-slot-content {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-grow: 1; /* Zajmuje dostępną przestrzeń */
    overflow: hidden; /* Zapobiega wychodzeniu tekstu */
}

/* NOWY STYL: Podgląd planszy */
.save-preview-image {
    width: 80px;
    height: 80px;
    border: 2px solid #ccc;
    border-radius: 6px;
    background-color: #fff;
    flex-shrink: 0; /* Zapobiega kurczeniu się obrazka */
    object-fit: cover; /* Gwarantuje, że obrazek wypełni kontener */
}

/* NOWY STYL: Placeholder dla starych zapisów bez podglądu */
.save-preview-placeholder {
    width: 80px;
    height: 80px;
    border: 2px dashed #ccc;
    border-radius: 6px;
    background-color: #f0f0f0;
    flex-shrink: 0;
    /* Tło w kratkę, aby sugerować brak obrazu */
    background-image: linear-gradient(45deg, #e0e0e0 25%, transparent 25%), linear-gradient(-45deg, #e0e0e0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e0e0e0 75%), linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
}

/* === Poprawki dla trybu ciemnego (nowe elementy) === */
body.dark-mode .save-preview-image {
    border-color: #5dade2;
    background-color: #34495e;
}
body.dark-mode .save-preview-placeholder {
    border-color: #4a617a;
    background-color: #2c3e50;
    background-image: linear-gradient(45deg, #3a5068 25%, transparent 25%), linear-gradient(-45deg, #3a5068 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #3a5068 75%), linear-gradient(-45deg, transparent 75%, #3a5068 75%);
}

/* === POCZĄTEK NOWEGO KODU === */
@keyframes new-score-highlight-pulse {
  0% { background-color: rgba(255, 223, 100, 0.9); }
  50% { background-color: rgba(255, 235, 158, 0.9); }
  100% { background-color: rgba(255, 223, 100, 0.9); }
}

body.dark-mode @keyframes new-score-highlight-pulse {
  0% { background-color: rgba(255, 215, 0, 0.7); }
  50% { background-color: rgba(255, 225, 64, 0.7); }
  100% { background-color: rgba(255, 215, 0, 0.7); }
}

/* ======================================================== */
/* === POPRAWIONE STYLE DLA EKRANU ODBLOKOWANIA GRY === */
/* ======================================================== */

#audio-unlock-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9998; /* Pod ekranem ładowania, ale nad resztą */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: opacity 0.5s ease-out, visibility 0s linear 0.5s;
}

#audio-unlock-overlay.fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.audio-unlock-box {
    /* Przywracamy przezroczyste tło, aby widoczny był tylko przycisk "Graj" */
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding: 0; /* Usuwamy wewnętrzny padding */
    transform: scale(1);
    transition: transform 0.3s ease-out;
}

#audio-unlock-overlay:hover .audio-unlock-box {
    transform: scale(1.05); /* Lekkie powiększenie całego przycisku przy najechaniu na tło */
}

/* NOWY, ULEPSZONY STYL DLA PRZYCISKU "GRAJ!" */
#launch-game-btn {
    font-family: 'Fredoka One', cursive;
    font-size: 4em;
    font-weight: bold;
    color: white;
    padding: 25px 60px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    background: linear-gradient(145deg, #2ecc71, #28a745);
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
    
    /* Efekt 3D */
    border-bottom: 8px solid #218838;
    box-shadow: 0 10px 20px rgba(40, 167, 69, 0.3);
    
    transition: all 0.15s ease-out;
}

#launch-game-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 25px rgba(40, 167, 69, 0.5);
}

#launch-game-btn:active {
    transform: translateY(2px);
    border-bottom-width: 4px;
    box-shadow: 0 5px 15px rgba(40, 167, 69, 0.4);
}

/* === POPRAWKA: Wyłączenie podświetlania pól podczas powtórki === */
.replay-mode .cell {
    cursor: default !important; /* Zmieniamy kursor na domyślny */
}

.replay-mode .cell:hover {
    background-color: #f8f8f8 !important; /* Przywracamy bazowy kolor dla motywu jasnego */
}

body.dark-mode .replay-mode .cell:hover {
    background-color: #34495e !important; /* Przywracamy bazowy kolor dla motywu ciemnego */
}

body.winxp-theme .replay-mode .cell:hover {
    background-color: white !important;  /* Przywracamy bazowy kolor dla motywu XP */
    outline: none !important;           /* Usuwamy też ramkę podświetlenia */
}

/* Pasek postępu (Pamięć) */
body.winxp-theme .storage-bar-container {
    background-color: var(--xp-border-light);
    border: 1px inset var(--xp-border-dark);
    border-radius: 3px;
    padding: 2px;
    margin-top: 10px;
}
body.winxp-theme #local-storage-progress-bar {
    border-radius: 0;
    background: repeating-linear-gradient(90deg, var(--xp-blue), var(--xp-blue) 10px, var(--xp-blue-gradient-start) 10px, var(--xp-blue-gradient-start) 12px);
}
body.winxp-theme #local-storage-progress-bar.warning {
    background: repeating-linear-gradient(90deg, #e14747, #e14747 10px, #fb836f 10px, #fb836f 12px) !important;
}

/* ===================================================================== */
/* === NOWE STYLE: Przycisk "Buy Me a Coffee" dla motywu Windows XP === */
/* ===================================================================== */

/* Główne style przycisku */
body.winxp-theme .menu-icon-buttons a#menu-bmac-btn {
    /* Resetujemy nowoczesne style */
    animation: none !important;
    border-radius: 5px !important;
    transform: none !important;
    width: 70px !important; /* Spójny rozmiar z innymi przyciskami */
    height: 70px !important;

    /* Stosujemy klasyczny wygląd przycisku XP */
    background: linear-gradient(to bottom, #fcfcfd, #e0e0e0) !important;
    border: 1px solid var(--xp-border-dark) !important;
    box-shadow: inset 0 0 0 1px var(--xp-border-light) !important;
}

/* Efekt po najechaniu myszką */
body.winxp-theme .menu-icon-buttons a#menu-bmac-btn:hover {
    background: linear-gradient(to bottom, #fff, #ffe19b) !important;
    border-color: var(--xp-hover-border) !important;
    transform: none !important; /* Usuwamy efekt "uniesienia" */
}

/* Efekt wciśnięcia przycisku */
body.winxp-theme .menu-icon-buttons a#menu-bmac-btn:active {
    background: linear-gradient(to top, #fcfcfd, #e0e0e0) !important;
    border-style: inset !important;
}

/* Styl dla obrazka wewnątrz przycisku */
body.winxp-theme .menu-icon-buttons a#menu-bmac-btn img {
    image-rendering: crisp-edges; /* Zapewnia ostry, pikselowy wygląd */
    transform: scale(1.1); /* Lekkie powiększenie dla lepszej widoczności */
}

/* ===================================================================== */
/* === NOWE STYLE: Ikony w grze dla motywu Windows XP === */
/* ===================================================================== */

/* Ustawiamy spójny, większy rozmiar dla ikon w grze i wyłączamy nowoczesne efekty */
body.winxp-theme .game-icon-btn {
    width: 48px;  /* Zwiększono z 40px */
    height: 48px; /* Zwiększono z 40px */
    transition: none; /* Wyłączamy płynne przejścia */
    image-rendering: crisp-edges; /* Zapewniamy ostry, pikselowy wygląd */
}

/* Wyłączamy efekt powiększenia przy najechaniu, aby zachować klasyczny wygląd */
body.winxp-theme .game-icon-btn:hover,
body.winxp-theme #high-scores-btn:hover {
    transform: none;
}

/* ===================================================================== */
/* === NOWE STYLE: Przycisk powrotu dla motywu Windows XP === */
/* ===================================================================== */

body.winxp-theme #back-to-menu-btn {
    top: 3px; /* Przesuwa przycisk do góry */
    /* Reset nowoczesnych stylów */
    transition: none !important;
    transform: none !important;
    
    /* Zastosowanie wyglądu przycisku XP */
    background: linear-gradient(to bottom, #fcfcfd, #e0e0e0);
    border: 1px solid var(--xp-border-dark);
    box-shadow: inset 0 0 0 1px var(--xp-border-light);
    border-radius: 5px;
    padding: 4px; /* Zachowujemy padding dla wyglądu */
    
    /* Zmiana rozmiaru, aby pasował do innych przycisków (32x32px) */
    width: 24px;  /* Zmieniono z 20px */
    height: 24px; /* Zmieniono z 20px */
    box-sizing: content-box; /* Upewnia, że padding jest dodawany do wymiarów */
}

body.winxp-theme #back-to-menu-btn:hover {
    background: linear-gradient(to bottom, #fff, #ffe19b);
    border-color: var(--xp-hover-border);
}

body.winxp-theme #back-to-menu-btn:active {
    background: linear-gradient(to top, #fcfcfd, #e0e0e0);
    border-style: inset;
    /* Symulacja wciśnięcia przez przesunięcie paddingu */
    padding: 5px 3px 3px 5px;
}

/* ===================================================================== */
/* === NOWE STYLE: Przełącznik (toggle) dla motywu Windows XP === */
/* ===================================================================== */

/* Ukrywamy oryginalny, okrągły "suwak" */
body.winxp-theme .toggle-slider::before {
    display: none !important;
}

/* Stylizujemy główny kontener przełącznika, aby wyglądał jak klasyczny checkbox */
body.winxp-theme .toggle-slider {
    transition: none !important;
    border-radius: 0 !important;
    width: 13px;  /* Standardowy rozmiar checkboxa */
    height: 13px;
    background-color: var(--xp-border-light) !important;
    border: 1px solid var(--xp-border-dark) !important;
    box-shadow: inset 1px 1px 0 #b0b0b0 !important;
    margin: auto 0; /* Wyśrodkowanie w pionie */
}

/* Dodajemy "ptaszek" (checkmark) jako pseudo-element ::after */
body.winxp-theme .toggle-slider::after {
    content: '✔'; /* Używamy znaku unicode, co jest prostsze niż rysowanie */
    font-family: 'TahomaXP', sans-serif !important; /* Używamy czcionki motywu */
    font-weight: bold;
    font-size: 15px; /* Lekko powiększono dla lepszej widoczności */
    color: var(--xp-text);
    position: absolute;
    top: -2px; /* Precyzyjne dopasowanie pozycji ptaszka */
    left: 1px;
    opacity: 0; /* Domyślnie ukryty */
}

/* Pokazujemy "ptaszek", gdy checkbox jest zaznaczony */
body.winxp-theme input:checked + .toggle-slider::after {
    opacity: 1;
}

/* Ukrywamy zielone tło dla zaznaczonego stanu */
body.winxp-theme input:checked + .toggle-slider {
    background-color: var(--xp-border-light) !important;
}

/* Dostosowujemy kontener, aby checkbox nie był rozciągnięty */
body.winxp-theme .toggle-switch {
    width: 15px;
    height: 15px;
}

/* ========================================================= */
/* === NOWE STYLE: OGÓLNY POSTĘP W OKNIE OSIĄGNIĘĆ === */
/* ========================================================= */

/* Kontener na pasek postępu i tekst */
#achievements-progress-container {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 15px 0 25px 0; /* Odstęp od góry i od listy */
}

/* Tło/tor dla paska postępu */
#achievements-progress-bar-wrapper {
    flex-grow: 1;
    height: 12px;
    background-color: #e9ecef;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #dee2e6;
}

/* Właściwy, kolorowy pasek postępu */
#achievements-progress-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #ffc107, #ff9800); /* Złoty gradient, jak w XP */
    border-radius: 6px;
    transition: width 0.5s ease-out;
}

/* Tekst z liczbą i procentami */
#achievements-progress-text {
    font-weight: bold;
    font-size: 0.9em;
    min-width: 80px; /* Zapewnia stałą szerokość, by uniknąć "przeskakiwania" layoutu */
    text-align: right;
    color: #333;
}

/* Wersja dla trybu ciemnego */
body.dark-mode #achievements-progress-bar-wrapper {
    background-color: #2c3e50;
    border-color: #4a617a;
}
body.dark-mode #achievements-progress-text {
    color: #ecf0f1;
}

/* ======================================= */
/* === NOWE STYLE: PANEL PRZEGLĄDU POWTÓRKI === */
/* ======================================= */

/* === ZMODYFIKOWANE STYLE: PANEL PRZEGLĄDU POWTÓRKI JAKO PASEK BOCZNY === */
#replay-overview-container {
    display: flex;
    flex-direction: column; /* Układ pionowy: wykres na górze, lista na dole */
    width: 280px;
    max-width: 280px; /* Potrzebne do animacji */
    /* USUŃ TĘ LINIĘ -> */ height: 450px; /* Dopasowanie do wysokości standardowej planszy */
    flex-shrink: 0; /* Zapobiega kurczeniu się panelu */
    
    background: rgba(29, 43, 73, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    gap: 10px;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden; /* Ważne, aby zawartość nie "wylewała się" podczas animacji */
    
    transition: max-width 0.4s ease-out, opacity 0.3s ease-out, padding 0.4s ease-out, border-width 0.4s ease-out;
}

#replay-title-display {
    color: #e0e0e0;
    text-align: center;
    margin: 5px 0 10px 0;
    padding: 0 5px;
    font-size: 1.1em;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 20px; /* Zapobiega "skakaniu" layoutu */
}

#replay-overview-container.hidden {
    max-width: 0;
    opacity: 0;
    padding-left: 0;
    padding-right: 0;
    border-width: 0;
    pointer-events: none;
}

#replay-chart-container {
    height: 180px;      /* Ustawiamy stałą, gwarantowaną wysokość dla wykresu */
    flex-shrink: 0;     /* Zapobiegamy kurczeniu się kontenera */
    position: relative;
    min-height: auto;   /* Resetujemy poprzednią wartość */
}

#replay-turn-list {
    flex-grow: 1;       /* Lista ruchów elastycznie wypełnia resztę miejsca */
    min-height: 0;      /* Ważna reguła zapobiegająca problemom z przepełnieniem w flexbox */
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    overflow-y: scroll;
    padding: 5px;
}

.replay-turn-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 0.9em;
}

.replay-turn-item.event-type-line { background-color: rgba(46, 204, 113, 0.15); }
.replay-turn-item.event-type-superline { background-color: rgba(255, 193, 7, 0.15); }
.replay-turn-item.event-type-bomb { background-color: rgba(231, 76, 60, 0.15); }
.replay-turn-item.event-type-portal { background-color: rgba(155, 89, 182, 0.15); }
.replay-turn-item.event-type-newballs { background-color: rgba(241, 196, 15, 0.1); }

.replay-turn-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.replay-turn-item.active {
    background-color: rgba(0, 123, 255, 0.3);
    font-weight: bold;
}

.turn-number {
    flex-shrink: 0;
    width: 30px;
    text-align: right;
    color: #ccc;
}

.event-icon {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}
.event-icon .fa-arrows-alt { color: #5dade2; } /* Ruch */
.event-icon .fa-stream { color: #2ecc71; } /* Linia */
.event-icon .fa-star { color: #ffc107; } /* Super-linia */
.event-icon .fa-bomb { color: #e74c3c; } /* Bomba */
.event-icon .fa-magic { color: #9b59b6; } /* Portal */
.event-icon .fa-plus-circle { color: #f1c40f; } /* Nowe kulki */

.turn-score {
    margin-left: auto;
    color: #fff;
}

/* Przycisk przełączania widoczności */
#toggle-replay-overview-btn {
    width: 36px;
    height: 36px;
    padding: 0;
}
#toggle-replay-overview-btn.active {
    background-color: #007bff;
    border-color: #0056b3;
}

/* === ZMODYFIKOWANE STYLE: Wykres w przeglądzie powtórki (Styl "Stepped") === */
.replay-chart-line { 
    stroke: #A777FF; /* Fioletowy kolor linii */
    stroke-width: 2; 
    fill: none; 
}
.replay-chart-area { 
    fill: url(#replay-chart-gradient-purple); /* Użycie nowego gradientu */
    opacity: 0.2;
}
.replay-chart-point { 
    display: none; /* Ukrywamy punkty, bo ich nie ma w nowym stylu */
}
.replay-chart-axis { 
    stroke: rgba(255, 255, 255, 0.2); 
}
.replay-chart-grid { 
    stroke: rgba(255, 255, 255, 0.1); 
    stroke-width: 1;
}
.replay-chart-zeroline {
    stroke: #A777FF;
    stroke-width: 1;
    stroke-dasharray: 3 3; /* Linia przerywana */
    opacity: 0.5;
}
.replay-chart-label { 
    fill: rgba(255, 255, 255, 0.6); 
    font-size: 10px; 
}
.replay-chart-current-marker {
    stroke: #FFC107; /* Złoty kolor znacznika */
    stroke-width: 2;
    /* === POPRAWKA: Zmieniamy animację na wolniejszą i płynniejszą === */
    transition: transform 0.3s ease-out;
    filter: drop-shadow(0 0 3px #FFC107);
}

/* Wyłącza animację znacznika podczas aktywnego przeciągania (scrubbingu) */
#replay-chart-marker.scrubbing {
    transition: none;
}

/* ========================================================= */
/* === NOWE STYLE: WSKAŹNIK PAUZY W TRYBIE POWTÓRKI === */
/* ========================================================= */

#replay-pause-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Używamy koloru spójnego z główną pauzą, ale z przezroczystością */
    background-color: rgba(29, 43, 73, 0.65); 
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 200; /* Nad planszą, ale pod innymi elementami UI */
    pointer-events: none; /* Pozwala na interakcję z elementami pod spodem, jeśli zajdzie potrzeba */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    border-radius: 0; /* Dla spójności z motywami Pixel Art/WinXP */
}

#replay-pause-indicator.visible {
    opacity: 1;
}

#replay-pause-indicator i {
    font-size: 10em; /* Duży, dobrze widoczny rozmiar ikony */
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

/* Styl dla wyłączonych przycisków nawigacji w powtórce */
#replay-controls button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.turn-score-delta {
    color: #2ecc71; /* Zielony kolor dla zdobytych punktów */
    font-weight: bold;
    margin-right: 8px; /* ZMIENIONY z 5px na 8px dla lepszego odstępu */
    font-size: 0.9em;
    position: relative; /* Pozwala na przesuwanie elementu */
}

/* === NOWE STYLE: Informacja o braku akcesoriów w edytorze awatara === */

.avatar-grid-placeholder {
    padding: 20px;
    text-align: center;
    font-style: italic;
    color: #6c757d; /* Szary, stonowany kolor */
    font-size: 0.95em;
    line-height: 1.5;
    /* Zajmuje całą dostępną szerokość w siatce */
    grid-column: 1 / -1; 
}

/* Wersja dla trybu ciemnego */
body.dark-mode .avatar-grid-placeholder {
    color: #bdc3c7; /* Jaśniejszy szary */
}

/* ===================================================================== */
/* === POPRAWKA: Zmniejszenie ikony ołówka w motywie Pixel Art === */
/* ===================================================================== */

body.pixelart-theme .btn-edit-save-name {
    font-size: 0.95em !important;
    width: 40px !important;
    height: 60px !important;
}

/* ===================================================================== */
/* === POPRAWKA: Zmniejszenie ikon ołówka w motywie Pixel Art === */
/* ===================================================================== */

/* Zastosowano do przycisków edycji w oknie Zapisów ORAZ Powtórek */
body.pixelart-theme .btn-edit-replay {
    font-size: 0.85em !important; /* Zmniejsza rozmiar emoji ołówka */
}

/* Złoty kolor dla punktów z super-linii na panelu powtórkowym === */
.replay-turn-item.event-type-superline .turn-score-delta {
    color: #ffc107; /* Złoty kolor, spójny z ikoną i tłem */
}