/* Modal overlay – flexbox do wyśrodkowania modala */
    .modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%; 
      height: 100%;
	  padding: 0 5%;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s ease;
	  overflow: visible; 
      z-index: 9999;
	  
    }
    .modal.active {
      opacity: 1;
      pointer-events: auto;
    }
    
    /* Kontener modala – szerokość ustalana dynamicznie przez JS */
    .modal-content {
	  position: relative;
      box-sizing: border-box;
      background: url("../img/czas_02/tlo.jpg") no-repeat center center;
      background-size: cover;
      /* Szerokość ustawiamy dynamicznie – domyślnie auto */
      width: auto;
      height: 90%;
      max-height: 90vh;    /* Maksymalnie 90% wysokości widoku */
      overflow-y: auto;    /* Pasek przewijania, jeśli treść jest zbyt długa */
      padding: 5% 5% 5% 5%;
      font-size: 1.6rem;
      border-radius: 25px;
      transform: scale(0.8);
      transition: transform 0.4s ease;
      opacity: 0.9; /* przeżroczystość modala */
    }
    .modal.active .modal-content {
      transform: scale(1);
    }
    
    /* Przycisk zamknięcia modala */
		.close {
		  position: fixed; 
		  top: 15px;
		  right: 25px;
		  font-size: 44px;
		  font-weight: bold;
		  cursor: pointer;
		  z-index: 1000; /* zapewnia, że przycisk nie zostanie zasłonięty przez inne elementy */
		}

	/* Styl dla modala z obrazkiem wystającym na górze */
	.modal-content.with-image {
	  padding-top: 450px; /* Zwiększamy górny padding, by zrobić miejsce na obrazek */
	  position: relative;

	}

	.modal-image {
	  position: absolute;
	  top: 0px; /* Obrazek wystaje ponad modal */
	  left: 50%;
	  transform: translateX(-50%);
	  width: 500px;  /* Możesz dostosować rozmiar */
	  height: auto;

	  filter: drop-shadow(0 20px 10px rgba(0, 0, 0, 0.5));
	  z-index: 10;
	}
	
	.shadow {
		filter: drop-shadow(0 20px 10px rgba(0, 0, 0, 0.5));
	}



    /* Ustawienia dla punktów */
    .point {
        position: absolute;
		z-index: 10;

    }

    /* Styl dla obrazka wewnątrz punktu – zapewnia, że wypełni cały element */
    .point img {
        display: block;
        width: 100%;
        height: auto;
    }

    .pinezki {
        position: absolute;
        top: -50%;
        /* większe przesunięcie w górę */
        left: 8%;
        /* wyśrodkowanie */
       
        ;
        /* pomniejsza do 50% wielkości kontenera */
        z-index: 10;
        filter: drop-shadow(0 10px 5px rgba(0, 0, 0, 0.3));
        /* dodanie cienia */
    }

    /* Pozycjonowanie ikonek dla modali INFO */

    #point00 {
        top: 6%;
        left: 12%;
        width: 12%;
        cursor: pointer;
    }

    #point10 {
        top: 0%;
        left: 70%;
        width: 12%;
        cursor: pointer;
    }

    #point20 {
        top: 6%;
        left: 12%;
        width: 12%;
        cursor: pointer;
    }
		
	#point30 {
        top: 6%;
        left: 86%;
        width: 10%;
        cursor: pointer;
    }
	
	#point40 {
        top: 0%;
        left: 57%;
        width: 10%;
        cursor: pointer;
    }

    /* Pozycjonowanie punktów – Punkty w menu Rozdział 1 */

    #point01 {
        top: 34%;
        left: 16%;
        width: 14%;
        cursor: pointer;
    }

    #point02 {
        top: 34.5%;
        left: 32%;
        width: 14%;
        cursor: pointer;
    }

    #point03 {
        top: 35%;
        left: 48%;
        width: 14%;
        cursor: pointer;
    }

    #point04 {
        top: 56%;
        left: 11%;
        width: 13%;
        cursor: pointer;
    }

    #point05 {
        top: 56.5%;
        left: 26%;
        width: 13%;
        cursor: pointer;
    }

    #point06 {
        top: 57%;
        left: 41%;
        width: 13%;
        cursor: pointer;
    }

    #point07 {
        top: 57.5%;
        left: 56%;
        width: 13%;
        cursor: pointer;
    }

    /* Pozycjonowanie punktów – Punkty w menu Rozdział 2 */

    #point11 {
        top: 37%;
        left: 31%;
        width: 14%;
        cursor: pointer;
    }

    #point12 {
        top: 36.5%;
        left: 49%;
        width: 14%;
        cursor: pointer;
    }

    #point13 {
        top: 36%;
        left: 67%;
        width: 14%;
        cursor: pointer;
    }

    #point14 {
        top: 58%;
        left: 31.5%;
        width: 14%;
        cursor: pointer;
    }

    #point15 {
        top: 57.5%;
        left: 49.5%;
        width: 14%;
        cursor: pointer;
    }

    #point16 {
        top: 57%;
        left: 68%;
        width: 14%;
        cursor: pointer;
    }


    /* Pozycjonowanie punktów – Punkty w menu Rozdział 3 */

    #point21 {
        top: 27%;
        left: 15%;
        width: 14%;
        cursor: pointer;
    }

    #point22 {
        top: 27%;
        left: 31%;
        width: 14%;
        cursor: pointer;
    }

    #point23 {
        top: 27%;
        left: 48%;
        width: 14%;
        cursor: pointer;
    }

    #point24 {
        top: 44%;
        left: 8%;
        width: 13%;
        cursor: pointer;
    }

    #point25 {
        top: 44%;
        left: 23%;
        width: 13%;
        cursor: pointer;
    }

    #point26 {
        top: 44%;
        left: 38%;
        width: 13%;
        cursor: pointer;
    }

    #point27 {
        top: 44%;
        left: 53%;
        width: 13%;
        cursor: pointer;
    }




    /* Pozycjonowanie punktów – Punkty w "biurze" */

    #point0 {
        /* Wpisz rozwiązanie */
        top: 20%;
        left: 58%;
        width: 12%;
        cursor: pointer;
    }

    #point1 {
        /* Wpisz rozwiązanie */
        top: 32%;
        left: 18%;
        width: 27%;
        cursor: pointer;
    }

    #point2 {
        /* Elementy zagadek */
        top: 46%;
        left: 18%;
        width: 27%;
        cursor: pointer;
    }

    #point3 {
        /* Elementy fabuły */
        top: 32%;
        left: 57%;
        width: 27%;
        cursor: pointer;
    }

    #point4 {
        /* Weź podpowiedź */
        top: 46%;
        left: 56%;
        width: 27%;
        cursor: pointer;
    }

    #point5 {
        /* Symbol zagadki */
        top: 24.2%;
        left: 23%;
        width: 15%;
        transform-origin: center;
        /* Upewnienie się, że obrót będzie wokół środka */
        animation: rotateAnimation 4s ease-in-out infinite;
    }

    @keyframes rotateAnimation {
        0% {
            transform: rotate(0deg);
        }

        25% {
            transform: rotate(10deg);
            /* Obrót o 10 stopni w prawo */
        }

        50% {
            transform: rotate(-10deg);
            /* Obrót o 10 stopni w lewo */
        }

        75% {
            transform: rotate(5deg);
            /* Obrót o 10 stopni w prawo */
        }

        100% {
            transform: rotate(0deg);
            /* Powrót do pozycji początkowej */
        }
    }


/* KOŁYSANIE SYMBOLI ZAGADEK */

    .kolysanie {
        margin: 0px auto;
        transform-origin: top center;
        /* Punkt obrotu - górny środek */
        animation: ruch 6s infinite ease-in-out;
    }

    @keyframes ruch {
        0% {
            transform: rotate(0deg);
        }

        10% {
            transform: rotate(2deg);
        }

        20% {
            transform: rotate(-2.5deg);
        }

        30% {
            transform: rotate(3.2deg);
        }

        40% {
            transform: rotate(-2deg);
        }

        50% {
            transform: rotate(0.5deg);
        }

        60% {
            transform: rotate(-1deg);
        }

        70% {
            transform: rotate(4.5deg);
        }

        80% {
            transform: rotate(-0.8deg);
        }

        90% {
            transform: rotate(1deg);
        }

        100% {
            transform: rotate(0deg);
        }
    }


/* OPÓŹNIENIE */

    .opoznienie1 {
        animation-delay: 0s;
    }

    .opoznienie2 {
        animation-delay: 1s;
    }

    .opoznienie3 {
        animation-delay: 0.5s;
    }

    .opoznienie4 {
        animation-delay: 1.2s;
    }

    .opoznienie5 {
        animation-delay: 0.8s;
    }

    .opoznienie6 {
        animation-delay: 2.0s;
    }

    .opoznienie7 {
        animation-delay: 1.8s;
    }

/* PULSOWANIE */

.pulsing {
  width: 200px;
  height: 200px;
  animation: irregularPulse 5s infinite ease-in-out;
  border-radius: 50%; /* opcjonalne - jeśli chcesz okrągły kształt */
}

@keyframes irregularPulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  20% {
    transform: scale(1.16);
    opacity: 0.95;
  }
  40% {
    transform: scale(0.88);
    opacity: 1;
  }
  60% {
    transform: scale(1.13);
    opacity: 0.97;
  }
  80% {
    transform: scale(0.89);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}