:root {
    --wall-color: #004225;
    --path-color: #fdfaf5;
    --goal-color: #d4af37;
    --text-color: #2c3e50;
    --cols: 15;
    --rows: 11;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('game-img/background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    touch-action: manipulation;
}

/* === EKRANY NAKŁADKOWE I STANY (Loading, Difficulty, Win) === */
.screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease, visibility 0s 0.5s;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
}

.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.5s ease, visibility 0s 0.5s;
}

/* --- Ekran ładowania --- */
#loading-screen {
    z-index: 9999;
    background-image: url('game-img/loading.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center; /* <--- DODAJ TĘ LINIIJKĘ */
    background-color: #004225;
}
.loading-image {
    display: none; /* Ukrywamy obrazek w HTML, bo używamy go jako tło */
}
.loading-text {
    font-family: 'Times New Roman', Times, serif;
    font-size: 3rem;
    color: var(--goal-color);
    text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.7);
    animation: pulse-text 2s ease-in-out infinite;
}
@keyframes pulse-text { 0% { opacity: 0.8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } 100% { opacity: 0.8; transform: scale(1); } }
.progress-bar-container {
    width: 80%;
    max-width: 400px;
    height: 15px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    position: absolute;
    bottom: 10%;
    overflow: hidden;
}
#progress-bar {
    width: 0%;
    height: 100%;
    background-color: var(--goal-color);
    border-radius: 10px;
    transition: width 5s linear;
}

/* --- Ekran wyboru trudności --- */
#difficulty-screen { z-index: 9998; }
.difficulty-container { background-color: rgba(0, 0, 0, 0.6); padding: 40px; border-radius: 15px; text-align: center; color: white; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.difficulty-container h2 { font-family: 'Times New Roman', Times, serif; font-size: 2.5rem; margin-top: 0; margin-bottom: 30px; text-shadow: 2px 2px 5px black; }
.difficulty-options { display: flex; flex-direction: column; gap: 15px; }
.difficulty-options button { background-color: var(--goal-color); color: white; border: 2px solid rgba(255, 255, 255, 0.8); padding: 15px 25px; font-size: 1.2rem; font-weight: bold; border-radius: 10px; cursor: pointer; transition: all 0.3s ease; min-width: 300px; }
.difficulty-options button:hover { background-color: #f0c340; transform: scale(1.05); }
.difficulty-options button span { display: block; font-size: 0.9rem; font-weight: normal; opacity: 0.8; margin-top: 5px; }

/* --- Ekran Zwycięstwa --- */
#win-screen { z-index: 9997; }
.win-container { background-color: rgba(255, 255, 255, 0.95); padding: 30px; border-radius: 15px; text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); max-width: 500px; }
.final-image { max-width: 100%; height: auto; border-radius: 10px; margin-bottom: 20px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); }
.win-message { font-family: 'Times New Roman', Times, serif; font-size: 2.5rem; color: var(--goal-color); margin-top: 0; margin-bottom: 10px; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); }
.win-container p { color: var(--text-color); font-size: 1.1rem; margin-bottom: 30px; background-color: transparent; text-shadow: none; }
.win-buttons { display: flex; flex-direction: column; gap: 15px; }
.win-buttons button { background-color: var(--goal-color); color: white; border: 2px solid rgba(255, 255, 255, 0.8); padding: 15px 25px; font-size: 1.2rem; font-weight: bold; border-radius: 10px; cursor: pointer; transition: all 0.3s ease; }
.win-buttons button:hover { background-color: #f0c340; transform: scale(1.05); }

/* === GŁÓWNA GRA === */
#game-wrapper { text-align: center; width: 90vw; max-width: 600px; display: flex; flex-direction: column; align-items: center; padding: 20px 0; transition: opacity 0.5s ease-in-out; }
#game-wrapper h1 { color: white; font-family: 'Times New Roman', Times, serif; font-size: 3.5rem; text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.7); margin-bottom: 10px; }
#game-wrapper p#message { color: white; font-size: 1.2rem; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8); background-color: rgba(0, 0, 0, 0.3); padding: 5px 15px; border-radius: 5px; }
#game-container { touch-action: none; position: relative; width: 100%; border: 5px solid var(--wall-color); touch-action: none; margin-top: 20px; }
#maze-grid { display: grid; grid-template-columns: repeat(var(--cols), 1fr); aspect-ratio: var(--cols) / var(--rows); background-color: var(--path-color); }
.wall { background-color: var(--wall-color); }
.path { background-color: transparent; }
#player, #goal { position: absolute; top: 0; left: 0; width: calc(100% / var(--cols)); height: calc(100% / var(--rows)); background-size: contain; background-repeat: no-repeat; background-position: center; transition: transform 0.1s linear; }
#player { background-image: url('game-img/Kamil.png'); }
#goal { background-image: url('game-img/Julia.png'); }
#reset-button { margin-top: 20px; padding: 10px 20px; font-size: 1rem; cursor: pointer; background-color: var(--goal-color); color: white; border: none; border-radius: 5px; }

/* === D-PAD === */
.d-pad { display: none; touch-action: none; }
.d-pad-btn { background-color: rgba(0, 0, 0, 0.4); color: white; border: 2px solid rgba(255, 255, 255, 0.5); border-radius: 50%; font-size: 1.5rem; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.d-pad-btn:active { background-color: rgba(0, 0, 0, 0.6); transform: scale(0.95); }
#up-btn { grid-area: up; }
#down-btn { grid-area: down; }
#left-btn { grid-area: left; }
#right-btn { grid-area: right; }

/* === STYLE RESPONSYWNE (DLA TELEFONÓW) === */
/* ZASTĄP CAŁĄ SEKCJĘ @media NA KOŃCU PLIKU game.css */

/* ZASTĄP CAŁĄ SEKCJĘ @media W PLIKU game.css TYM KODEM */

@media (max-width: 768px) {
    body {
        flex-direction: column;
        justify-content: flex-start; /* Zmieniamy na wyrównanie do góry */
        padding: 10px 0; /* Zmniejszamy padding */
        overflow-y: auto; /* Pozwalamy na delikatne przewijanie tylko gdy ABSOLUTNIE konieczne */
        height: auto; /* Zmieniamy, aby body mogło się swobodnie dopasować */
        min-height: 100vh; /* Zapewniamy, że zawsze zajmuje przynajmniej cały ekran */
        min-height: 100dvh; /* Dynamiczna wysokość widoku dla mobilnych przeglądarek */
    }

    /* Zmniejszamy czcionkę tytułu gry */
    #game-wrapper h1 {
        font-size: 2rem; /* Mniejszy rozmiar dla "Labirynt Miłości" */
        margin-bottom: 5px; /* Mniejszy odstęp */
    }

    /* Zmniejszamy czcionkę opisu */
    #game-wrapper p#message {
        font-size: 0.9rem; /* Mniejszy rozmiar dla opisu "Pomóż Kamilowi..." */
        margin-bottom: 10px; /* Mniejszy odstęp */
    }
    
    #game-wrapper {
        padding-top: 0;
        width: 90vw; /* Możemy użyć 90vw, bo zmniejszyliśmy inne elementy */
        max-width: none; /* Usuwamy limit max-width na telefonach */
        flex-shrink: 1;
    }

    #game-container {
        margin-top: 10px; /* Zmniejszamy margines górny labiryntu */
    }

    #reset-button {
        margin-top: 10px; /* Zmniejszamy odstęp przycisku reset */
        padding: 8px 15px; /* Mniejszy przycisk reset */
        font-size: 0.9rem;
    }

    /* Pokazujemy i układamy D-pad pod grą */
    #game-wrapper:not(.hidden) ~ .d-pad {
        display: grid;
        position: relative; /* Pozostaje w naturalnym przepływie dokumentu */
        width: 140px; /* Lekko większy D-pad niż poprzednio */
        height: 140px;
        margin: 15px auto 0 auto; /* Centrujemy i dodajemy margines od góry */
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-areas: ". up ." "left . right" ". down .";
        
    }

    /* Style dla ekranów nakładkowych (ładowanie, trudność, wygrana) */
    #loading-screen, #difficulty-screen {
        flex-direction: column;
        gap: 20px;
    }
    .loading-image { display: block; max-width: 90vw; }
    .loading-text { position: static; font-size: 2rem; }
    .progress-bar-container { position: static; }
    #win-screen .win-container { padding: 20px; max-width: 90vw; }
    #win-screen .win-message { font-size: 1.8rem; }
    #win-screen .win-buttons button { font-size: 1rem; padding: 12px 20px; }
}