/* Resetowanie podstawowe */
body, h1, p {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif; /* Typowa czcionka Neocities/retro */
}

/* Tło i główny kontener */
body {
    background-color: #f0f0f0; /* Jasne, neutralne tło */
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Strona zajmuje całą wysokość widoku */
    padding: 20px;
    box-sizing: border-box; /* Padding wliczony w wysokość/szerokość */
}

.game-container {
    max-width: 900px; /* Maksymalna szerokość kontenera */
    width: 100%;
    padding: 20px;
    background-color: #ffffff;
    border: 2px solid #000; /* Czarna ramka jak na wzorze */
    text-align: center;
    box-shadow: 5px 5px 0px rgba(0,0,0,0.2); /* Lekki cień */
}

h1 {
    font-size: 3.5em; /* Duży tytuł */
    color: #000;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Sekcja wyboru postaci */
.character-selection {
    display: flex;
    justify-content: center; /* Wyśrodkowanie postaci */
    gap: 40px; /* Większy odstęp między postaciami */
    margin-top: 20px;
}

.character-card {
    flex-basis: 280px; /* Stała szerokość dla każdej karty */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    /* Usunięto obramowanie, aby dopasować do wzoru */
}

.char-image {
    width: 250px; /* Stała szerokość obrazków */
    height: auto;
    object-fit: contain; /* Obrazek będzie widoczny w całości */
    margin-bottom: 15px;
    /* Dodajemy białe tło pod obrazkami, jeśli mają przezroczyste tła */
    background-color: #fff;
    padding: 5px; /* Dodatkowy padding, jeśli chcesz, aby obrazek miał "ramkę" */
    border: 1px solid #ddd; /* Delikatna ramka wokół obrazka */
}

/* Przyciski */
button {
    background-color: transparent; /* Brak tła */
    color: #000;
    border: 2px solid #000; /* Czarna ramka */
    padding: 8px 15px;
    font-size: 1.1em;
    cursor: pointer;
    text-transform: lowercase; /* Małe litery jak na wzorze */
    transition: background-color 0.1s, color 0.1s;
}

button:hover {
    background-color: #000;
    color: #fff;
}

/* Scena Gry (początkowo ukryta) */
#game-scene {
    text-align: left;
    padding: 20px;
    border-top: 2px dashed #ccc;
    margin-top: 40px;
    background-color: #f9f9f9;
}

        /* Domyślne skalowanie i POZYCJA dla poszczególnych postaci (Działa tylko jeśli nie ma center-position) */
        .char-colette:not(.center-position) { left: 50%; transform: translateX(-50%) scale(1.1); } 
        .char-chester:not(.center-position) { left: 65%; transform: translateX(-50%) scale(1.0); } 
        .char-mandy:not(.center-position) { left: 35%; transform: translateX(-50%) scale(1.0); } 
        
        /* Pozycje wyśrodkowane dla Mandy i Chestera gdy tylko oni mówią lub są (NADPISUJE domyślne) */
        .char-mandy.center-position { left: 50%; transform: translateX(-50%) scale(1.0); }
        .char-chester.center-position { left: 50%; transform: translateX(-50%) scale(1.0); }
        
        /* Klasy dynamiczne dla animacji */