/* Definicje zmiennych globalnych dla spójnego wyglądu */
:root {
    --puzzle-bg-color           : #f0f0f0;
    --puzzle-border-color       : #333;
    --puzzle-piece-border-color : #ccc;

    --text-color-light  : #efefef;
    --text-color-dark   : #555;
    --text-color-medium : #ccc;

    --accent-color-primary : #007bff;
    --accent-color-danger  : #d9534f;

    --border-color-dark-theme       : #444;
    --border-color-dark-theme-light : #555;

    --modal-bg-color      : rgba(0, 0, 0, 0.8);
    --box-shadow-selected : 0 0 0 3px var(--accent-color-primary) inset;
}

/* Główny kontener dla obszaru gry */
#puzzle-wrapper {
    display         : flex;
    justify-content : center;
    align-items     : flex-start;
    gap             : 20px;
    /* Odstęp między puzzlami a obrazkiem podglądu */
    margin          : 20px auto;
    flex-wrap       : wrap;
    /* Pozwala na zawijanie na mniejszych ekranach */
}

/* Kontener na kawałki puzzli */
#puzzle-container {
    display          : flex;
    /* Używamy Flexbox do ułożenia puzzli w siatce */
    flex-wrap        : wrap;
    /* Pozwala puzzlom przechodzić do następnego wiersza */
    border           : 2px solid var(--puzzle-border-color);
    background-color : var(--puzzle-bg-color);
    /* Szerokość i wysokość są ustawiane dynamicznie przez JavaScript */
}

/* Pojedynczy kawałek puzzla */
.puzzle-piece {
    box-sizing : border-box;
    /* Ważne, aby ramka nie powiększała elementu */
    border     : 1px solid var(--puzzle-piece-border-color);
    cursor     : pointer;
    /* Zmieniono kursor na wskaźnik dla mechaniki klikania */
    transition : transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, filter 0.2s;
}

/* Styl dla zaznaczonego puzzla */
.puzzle-piece.selected {
    box-shadow : var(--box-shadow-selected);
    /* Niebieska wewnętrzna ramka */
    transform  : scale(0.95);
    filter     : brightness(1.1);
}

/* Styl dla kontenera po ułożeniu puzzli */
#puzzle-container.solved .puzzle-piece {
    border : none;
    /* Usuwa ramki po rozwiązaniu */
    cursor : default;
}

/* Boczny panel z obrazkiem podglądu i statystykami */
#reference-container {
    width      : 250px;
    min-width  : 200px;
    text-align : center;
}

/* Kontener na statystyki nad układanką */
#game-stats-top {
    display         : flex;
    justify-content : center;
    gap             : 40px;
    margin-bottom   : 15px;
    text-align      : center;
}

.stat-item {
    text-align : center;
}

.stat-item h4 {
    margin      : 0 0 5px 0;
    font-size   : 1em;
    font-weight : normal;
    color       : var(--text-color-dark);
}

#timer-display,
#moves-display {
    font-size   : 1.8em;
    font-weight : bold;
    color       : var(--accent-color-danger);
    line-height : 1;
}

/* Wrapper dla tabeli z najlepszymi wynikami */
#highscore-wrapper {
    margin-top : 20px;
}

/* Pływający licznik czasu */
#floating-timer {
    position         : fixed;
    display          : none;
    padding          : 4px 8px;
    background-color : rgba(0, 0, 0, 0.75);
    color            : #fff;
    border           : 1px solid #fff;
    border-radius    : 4px;
    font-size        : 1.1em;
    font-weight      : bold;
    z-index          : 1001;
    pointer-events   : none;
}

/* Style dla Modala/Lightboxa */
.modal-overlay {
    display          : flex;
    position         : fixed;
    z-index          : 1000;
    left             : 0;
    top              : 0;
    width            : 100%;
    height           : 100%;
    background-color : var(--modal-bg-color);
    justify-content  : center;
    align-items      : center;
    opacity          : 0;
    visibility       : hidden;
    transition       : opacity 0.3s ease, visibility 0s linear 0.3s;
}

.modal-overlay.show {
    opacity          : 1;
    visibility       : visible;
    transition-delay : 0s;
}

.modal-content {
    margin     : auto;
    display    : block;
    max-width  : 800px;
    max-height : 85vh;
    border     : 3px solid #fff;
    transform  : scale(0.9);
    transition : transform 0.3s ease;
}

.modal-overlay.show .modal-content {
    transform : scale(1);
}

.modal-close {
    position    : absolute;
    top         : 15px;
    right       : 35px;
    color       : #f1f1f1;
    font-size   : 40px;
    font-weight : bold;
    transition  : 0.3s;
    cursor      : pointer;
}

.modal-close:hover,
.modal-close:focus {
    color           : #bbb;
    text-decoration : none;
}

/* Style dla panelu głównego i tabeli wyników */
.highscore-title {
    margin-top     : 0;
    margin-bottom  : 10px;
    font-size      : 1.2em;
    border-bottom  : 1px solid var(--border-color-dark-theme);
    padding-bottom : 5px;
    color          : var(--text-color-light);
}

.highscore-table {
    width           : 100%;
    border-collapse : collapse;
}

.highscore-table th,
.highscore-table td {
    padding       : 8px;
    text-align    : left;
    border-bottom : 1px solid var(--puzzle-border-color);
    color         : var(--text-color-medium);
}

.highscore-table th {
    font-weight : bold;
    color       : #fff;
}

.highscore-table .rank-col {
    width       : 1%;
    text-align  : center;
    font-weight : bold;
}

.highscore-thumb {
    height         : 20px;
    width          : 20px;
    object-fit     : cover;
    border-radius  : 3px;
    vertical-align : middle;
    margin-right   : 8px;
    border         : 1px solid var(--border-color-dark-theme-light);
}

/* Zabezpieczenie dla głównego obrazka puzzli */
.puzzle-thumb {
    max-width  : 100%;
    height     : auto;
    transition : transform 0.2s ease-in-out;
}

.puzzle-thumb:hover {
    transform : scale(1.05);
}

/* Poprawki responsywności dla mniejszych ekranów */
@media (max-width: 768px) {
    #puzzle-wrapper {
        flex-direction : column;
        align-items    : center;
    }
}

/* --- Style specyficzne dla panelu na stronie głównej --- */
.puzzle-panel-layout {
    width          : 100%;
    height         : 210px;
    border-spacing : 0;
}

.puzzle-column-left {
    width          : 50%;
    vertical-align : top;
    padding-right  : 10px;
    text-align     : center;
    color          : var(--text-color-light);
}

.puzzle-column-right {
    width          : 50%;
    vertical-align : top;
    padding-left   : 10px;
    border-left    : 1px solid var(--border-color-dark-theme-light);
    color          : var(--text-color-light);
}

.highscore-info {
    text-align : center;
    font-size  : 11px;
    color      : var(--text-color-medium);
    margin-top : 8px;
}

/* Zmniejszenie odstępów specjalnie dla panelu na stronie głównej */
.puzzle-panel-layout .highscore-title {
    margin-bottom  : 5px;
    padding-bottom : 3px;
    font-size      : 1.1em;
}

.puzzle-panel-layout .highscore-table th,
.puzzle-panel-layout .highscore-table td {
    padding-top    : 0;
    padding-bottom : 0;
}

/* Efekt podświetlenia wiersza w tabeli wyników po najechaniu myszką */
.puzzle-panel-layout .highscore-table tbody tr:hover {
    background-color : rgba(255, 255, 255, 0.1);
    cursor           : default;
}

/* Dodatkowy efekt dla miniaturki w tabeli po najechaniu */
.puzzle-panel-layout .highscore-table a:hover .highscore-thumb {
    transform  : scale(1.2);
    box-shadow : 0 0 4px rgba(255, 255, 255, 0.4);
}

/* Styl dla głównej miniaturki w panelu */
.puzzle-preview-thumb {
    display    : block;
    width      : 100%;
    height     : 150px;
    object-fit : cover;
    transition : opacity 0.5s ease-in-out;
}

/* Klasa dodawana przez JS do animacji */
.puzzle-preview-thumb.fading {
    opacity : 0;
}

/* --- Style dla strony gry (puzzle_game.php) --- */
.pre-game-wrapper {
    width     : 400px;
    max-width : 100%;
}

.pre-game-preview {
    text-align : center;
}

.pre-game-preview-img {
    width   : 120px;
    height  : auto;
    border  : 1px solid var(--puzzle-piece-border-color);
    padding : 2px;
}

.form-buttons-cell {
    text-align : center;
}

.win-message-img {
    max-width : 200px;
    margin    : 10px auto;
    border    : 2px solid var(--puzzle-piece-border-color);
    padding   : 3px;
    display   : block;
}

/* Style dla specjalnych komunikatów gratulacyjnych */
.special-congrats {
    margin        : 15px 0;
    padding       : 10px;
    border-radius : 5px;
}

.special-congrats p {
    margin      : 0;
    font-size   : 1.2em;
    font-weight : bold;
    text-align  : center;
}

/* Style dla animacji zmiany puzzla */
#puzzle-container {
    transition         : opacity 0.5s ease-in-out;
    -webkit-transition : opacity 0.5s ease-in-out;
    -moz-transition    : opacity 0.5s ease-in-out;
    -ms-transition     : opacity 0.5s ease-in-out;
    -o-transition      : opacity 0.5s ease-in-out;
}

#puzzle-image-link {
    display    : inline-block;
    width      : 150px;
    height     : 150px;
    background : transparent;
    border     : 1px solid var(--border-color);
    padding    : 4px;
    box-sizing : border-box;
}

#puzzle-container.fading {
    opacity : 0;
}

/* Style dla animacji zmiany puzzla */
#puzzle-container {
    transition : opacity 0.5s ease-in-out;
}

#puzzle-container.fading {
    opacity : 0;
}

/* Style dla animacji zmiany puzzla */
#puzzle-container {
    transition : opacity 0.5s ease-in-out;
}

#puzzle-container.fading {
    opacity : 0;
}


/* Style dla animacji zmiany puzzla */
#puzzle-container {
    transition : opacity 0.5s ease-in-out;
}

#puzzle-container.fading {
    opacity : 0;
}


.personal-best-msg {
    color            : #28a745;
    background-color : rgba(40, 167, 69, 0.1);
    border           : 1px solid rgba(40, 167, 69, 0.3);
    animation        : pulse 2s infinite;
}

.new-record-msg {
    color            : #ffc107;
    background-color : rgba(255, 193, 7, 0.1);
    border           : 1px solid rgba(255, 193, 7, 0.3);
    animation        : pulse 2s infinite;
}

.no-record-msg {
    color            : #dc3545;
    background-color : rgba(220, 53, 69, 0.1);
    border           : 1px solid rgba(220, 53, 69, 0.3);
    animation        : pulse 2s infinite;
}

.zielony-text {
    color       : #2cfc5c;
    font-size   : 14px;
    font-weight : bold;
    text-align  : center;
}

.zolty-text {
    color       : #ffc107;
    font-size   : 14px;
    font-weight : bold;
    text-align  : center;
}

.czerwony-text {
    color       : #ff182f;
    font-size   : 14px;
    font-weight : bold;
    text-align  : center;
}

/* Styl dla informacji o oczekiwaniu na odświeżenie */
.wait-message {
    margin-top : 20px;
    text-align : center;
    font-size  : 1em;
    color      : var(--text-color-medium);
    font-style : italic;
}

/*
 * Dedykowany kontener dla przycisku "Wybierz inną",
 * który centruje go, dodaje odstęp i stylizuje link wewnątrz.
*/
.przycisk-listy-wrapper {
    text-align : center;
    margin-top : 10px;
}

.przycisk-listy-wrapper a.button {
    text-decoration : none !important;
    /* Usuwa podkreślenie z linku */
}

/* --- Style dla strony z listą puzzli (puzzle_list.php) --- */
.puzzle-list-container {
    display         : flex;
    flex-wrap       : wrap;
    gap             : 8px;
    /* Zmniejszamy odstęp między elementami */
    justify-content : center;
    padding         : 10px;
}

.puzzle-list-item {
    border           : 1px solid #444;
    border-radius    : 5px;
    padding          : 5px;
    /* Zmniejszamy wewnętrzny padding */
    width            : 102px;
    /* Precyzyjna szerokość, aby zmieścić 5 w rzędzie */
    text-align       : center;
    background-color : rgba(255, 255, 255, 0.05);
    box-shadow       : 0 2px 4px rgba(0, 0, 0, 0.2);
    transition       : transform 0.2s, box-shadow 0.2s;
    box-sizing       : border-box;
    /* Ważne, aby padding nie powiększał elementu */
}

.puzzle-list-item:hover {
    transform    : translateY(-5px);
    box-shadow   : 0 4px 8px rgba(0, 0, 0, 0.3);
    border-color : #666;
}

.puzzle-list-item a {
    text-decoration : none;
    color           : #ddd;
    display         : block;
}

.puzzle-list-thumbnail {
    width                        : 100%;
    height                       : 90px;
    /* Dostosowujemy wysokość do nowej szerokości */
    /* <-- TO JEST KLUCZOWE      : Ustawia stałą wysokość dla wszystkich obrazków */
    object-fit                   : cover;
    /* <-- TO JEST KLUCZOWE      : Wypełnia obrazkiem przestrzeń bez zniekształcania */
    margin-bottom                : 5px;
    border-radius                : 3px;
}

.puzzle-list-title {
    font-weight     : bold;
    font-size       : 12px;
    /* Zmniejszamy czcionkę tytułu */
    min-height      : 40px;
    display         : flex;
    align-items     : center;
    justify-content : center;
}