/* Style dla ekranu punktów, który teraz jest kontenerem */
#pointsScreen {
    overflow-y: scroll; /* Umożliwia przewijanie pionowe */
    padding-bottom: 250px; /* Dodatkowy odstęp na dole dla lepszego przewijania */
    color: #FFFFFF;
    justify-content: flex-start; /* Układa punkty od góry */
}

#pointsScreen::-webkit-scrollbar {
    display: none; /* Ukrywa pasek przewijania */
}

/* DODANO: Styl dla instrukcji na górze listy */
.points-instruction {
    color: #FFFFFF;
    text-align: center;
    padding: 15px;
    font-size: 1.1em;
    font-weight: bold;
    width: 95%;
    margin: 0 auto 15px auto;
    background-color: rgba(0, 36, 71, 0.7);
    border-radius: 8px;
    backdrop-filter: blur(4px);
}

.point-item:last-child {
    margin-bottom: 50px;    /* gwarantuje dodatkową „luftę” pod ostatnim punktem */
}

/* Pojedynczy element punktu */
.point-item {
    position: relative;
    width: 95%;
    margin: 0 auto 15px auto; /* 15px odstępu od dołu, wyśrodkowanie */
    color: #FFFFFF;
}

/* Obrazek */
.point-img {
    width: 100%;
    height: auto; /* Pozwalamy na naturalną wysokość obrazka */
    border-radius: 10px 10px 0 0; /* Zaokrąglenie tylko górnych rogów */
    object-fit: cover;
    display: block; /* Usuwa ewentualny mały odstęp pod obrazkiem */
}

/* Nakładka do sygnalizowania dotarcia (pozostaje absolutnie pozycjonowana) */
.green-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%; /* Powinna pokrywać cały .point-item lub .point-img w zależności od potrzeb */
    background-color: rgba(0, 255, 0, 0.6); /* Lekko zwiększona przejrzystość */
    display: none; /* Początkowo ukryta */
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 20px;
    color: #FFFFFF;
    border-radius: 10px; /* Jeśli ma pokrywać cały point-item z zaokrągleniem */
    text-align: center;
    z-index: 2; /* Aby była nad obrazkiem */
}

/* Kontener na kod i odległość (pod obrazkiem) */
.point-info {
    background-color: rgba(0, 36, 71, 0.8);
    backdrop-filter: blur(5px);
    padding: 8px 10px; /* Nieco więcej paddingu dla lepszego wyglądu */
    border-radius: 0 0 10px 10px; /* Zaokrąglenie pasujące do dołu obrazka */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centruje .code-container i .distance-container */
    gap: 8px; /* Odstęp między .code-container a .distance-container */
    font-size: 1rem; /* Bazowy rozmiar czcionki dla .point-info */
}

/* Kontener na input i przycisk w jednym wierszu */
.code-container {
    display: flex;
    width: 100%; /* Aby wypełnić kontener .point-info */
    max-width: 280px; /* Ograniczenie szerokości dla estetyki */
    justify-content: center; /* Centruje input i button jeśli są węższe */
    align-items: center;
    gap: 8px; /* Odstęp między inputem a przyciskiem */
}

/* Pole do wpisania kodu */
.code-input {
    flex-grow: 1; /* Pozwala inputowi się rozciągnąć */
    max-width: 180px; /* Ograniczenie szerokości inputu */
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #ffffff;
    color: #000000;
    text-align: center;
    font-size: 0.9rem;
}

/* Przycisk "Sprawdź kod" */
.code-button {
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background: #004477;
    color: #ffffff;
    font-weight: bold;
    font-size: 0.9rem;
}

/* *** NOWE/ZMODYFIKOWANE STYLE DLA STRZAŁKI I ODLEGŁOŚCI *** */
.distance-container {
    display: flex; /* Ustawia elementy (strzałka, tekst) w jednym rzędzie */
    align-items: center; /* Wyrównuje strzałkę i tekst wertykalnie do środka */
    justify-content: center; /* Centruje zawartość jeśli jest węższa */
    gap: 0.5em; /* Odstęp między strzałką a tekstem, np. 0.5 wielkości czcionki */
    width: 100%; /* Aby kontener dystansu również był centrowany przez point-info */
}

/* Tekst wyświetlający odległość */
.distance-text {
    font-size: 0.9em; /* Rozmiar względem .point-info (czyli 0.9 * 1rem) */
    color: #ffffff;
    font-weight: bold;
}

/* Strzałka kierunku */
.direction-arrow {
    width: 1.2em !important;  /* Szerokość strzałki względem czcionki .distance-container (czyli 1.2 * 0.9em) */
    height: 1.2em; /* Wysokość strzałki */
    display: inline-block;
    transition: transform 0.1s linear; /* Płynny obrót */
}


/* Animacja mrugania (jeśli zdecydujesz się używać) */
@keyframes blink {
    0%, 100% { opacity: 0.7; } /* Zmieniono na mniej agresywne mruganie */
    50% { opacity: 1; }
}