body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: #272727; 
    color: white;
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}


header {
    text-align: center;
    padding: 40px 20px;
}

h1 {
    margin: 0;
    font-size: 2.5rem;
    letter-spacing: 2px;
}

.pseudonim {
    color: #00a6ff;
    font-size: 1.2rem;
    margin-top: 10px;
    font-style: normal;
}


main {
    flex: 1; 
    display: flex;
    justify-content: center;
    align-items: center; 
    gap: 30px; 
    flex-wrap: wrap; 
    padding: 20px;
}


.okrag {
    width: 200px;
    height: 200px;
    background-color: #333;
    border-radius: 50%; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
    overflow: hidden; 
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    position: relative;
}


.ikona {
    font-size: 3rem;
    margin-bottom: 10px;
    transition: transform 0.3s;
}

h2 {
    font-size: 1.2rem;
    margin: 0;
}


.tresc {
    display: none; 
    opacity: 0;
    margin-top: 20px;
    width: 100%;          
    overflow-y: auto;     
    max-height: 380px; 
    scrollbar-width: none;   
    -webkit-scrollbar {
    display: none;
    } 
}
.tresc p {
    text-align: center;     
    font-size: 0.95rem;    
    line-height: 1.5;
    margin-bottom: 15px;     
    scrollbar-width: none;
    -webkit-scrollbar {
    display: none;
    } 
}



.okrag:hover {
    width: 400px;          
    height: 600px;        
    border-radius: 20px;
    justify-content: flex-start;
    padding: 25px;        
    background-color: #444;
}

.okrag:hover .ikona {
    transform: scale(0.5); 
}

.okrag:hover .tresc {
    display: flex;  
    flex-direction: column;
    align-items: center;
    opacity: 1;
    animation: pojawianie 0.5s ease-in forwards;
}


@keyframes pojawianie {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}


.foto {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px solid #00a6ff;
    margin-bottom: 15px;
    object-fit: cover;
}



.link-social {
    color: white;
    text-decoration: none;
    margin: 8px 0;        
    padding: 10px 20px;
    border-radius: 25px;
    width: 80%;
    font-weight: bold;
    border: none;
    
   
    transition: transform 0.3s, background-color 0.3s, box-shadow 0.3s, filter 0.3s;
    
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    position: relative;   
}


.link-social:hover {
    transform: scale(1.1) translateY(-2px); 
}




.insta {
    background: #f09433; 
    background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
    background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
    background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
}


.fb {
    background-color: #0866ff;
}


.linkedin {
    background-color: #0a66c2;
}

.yt {
    background-color: #FF0000;
}

.insta:hover {
    filter: brightness(1.2); 
    box-shadow: 0 0 20px rgba(240, 148, 51, 0.7); 
}


.fb:hover {
    background-color: #0654d6;
    box-shadow: 0 0 20px rgba(8, 102, 255, 0.7); 
}


.linkedin:hover {
    background-color: #004182;
    box-shadow: 0 0 20px rgba(10, 102, 194, 0.7); 
}


.yt:hover {
    background-color: #cc0000; 
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.7); 
}

footer {
    text-align: center;
    padding: 20px;
    background-color: #111;
    color: #888;
    font-size: 0.9rem;
}


footer a {
    color: #00a6ff; 
    text-decoration: none; 
}

.przycisk-kino {
    text-decoration: none;
    margin: 8px 0;
    padding: 10px 20px;
    border-radius: 25px;
    width: 80%;
    font-weight: bold;
    border: none;
    
    color: #000000; 

    transition: transform 0.3s, background-color 0.3s, box-shadow 0.3s, filter 0.3s;
    box-shadow: 0 4px 6px #00000033;
    position: relative;
    
    background: #ff9966; 
    background: -webkit-linear-gradient(to right, #ff9966, #ff5e62); 
    background: linear-gradient(to right, #ff9966, #ff5e62);
}

.przycisk-kino:hover {
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(255, 94, 98, 0.6);
}


.top-container {
    max-width: 1000px;
    margin: 50px auto;
    padding: 20px;
    background-color: #333;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.nawigacja-top {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
}

.btn-switch {
    padding: 12px 30px;
    font-size: 1.1rem;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    color: white;
    font-weight: bold;
    background: linear-gradient(to right, #4facfe, #00f2fe);
    transition: transform 0.2s, filter 0.2s;
}

.btn-switch:hover, .btn-switch.aktywny {
    transform: scale(1.05);
    filter: brightness(1.2);
    background: linear-gradient(to right, #fa709a, #fee140);
    color: black;
}

table {
    width: 100%;
    border-collapse: collapse;
    color: white;
}

th {
    background-color: #222;
    padding: 15px;
    text-align: left;
    border-bottom: 2px solid #555;
}

td {
    padding: 20px;
    border-bottom: 1px solid #444;
    vertical-align: top;
}

.col-poster img {
    width: 100px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.oceny-box div {
    margin-bottom: 5px;
    font-size: 0.9rem;
}

.score-me { color: #ffd700; font-weight: bold; font-size: 1.1rem; }
.score-fw { color: #f5c518; }
.score-rt { color: #fa320a; }
.score-pop { color: #ffffff; }

.sekcja-tabeli {
    display: none;
    animation: fadeIn 0.5s;
}

#sekcja-filmy { display: block; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.wroc-link {
    display: block;
    text-align: center;
    margin-top: 20px;
    color: #888;
    text-decoration: none;
}
.wroc-link:hover { color: white; }

#preloader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Półprzezroczysty kolor pasujący do Twojego motywu */
    background-color: rgba(39, 39, 39, 0.6); 
    /* To kluczowa linijka - rozmywa wszystko co jest POD warstwą overlay */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px); /* Wsparcie dla Safari */
    z-index: 9999; /* Musi być na samej górze */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* Twój kod Loadera */
.loader {
        transform: rotateZ(45deg);
        perspective: 1000px;
        border-radius: 50%;
        width: 48px;
        height: 48px;
        color: #fff;
      }
        .loader:before,
        .loader:after {
          content: '';
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: inherit;
          height: inherit;
          border-radius: 50%;
          transform: rotateX(70deg);
          animation: 1s spin linear infinite;
        }
        .loader:after {
          color: #00a6ff;
          transform: rotateY(70deg);
          animation-delay: .4s;
        }

      @keyframes rotate {
        0% {
          transform: translate(-50%, -50%) rotateZ(0deg);
        }
        100% {
          transform: translate(-50%, -50%) rotateZ(360deg);
        }
      }

      @keyframes rotateccw {
        0% {
          transform: translate(-50%, -50%) rotate(0deg);
        }
        100% {
          transform: translate(-50%, -50%) rotate(-360deg);
        }
      }

      @keyframes spin {
        0%,
        100% {
          box-shadow: .2em 0px 0 0px currentcolor;
        }
        12% {
          box-shadow: .2em .2em 0 0 currentcolor;
        }
        25% {
          box-shadow: 0 .2em 0 0px currentcolor;
        }
        37% {
          box-shadow: -.2em .2em 0 0 currentcolor;
        }
        50% {
          box-shadow: -.2em 0 0 0 currentcolor;
        }
        62% {
          box-shadow: -.2em -.2em 0 0 currentcolor;
        }
        75% {
          box-shadow: 0px -.2em 0 0 currentcolor;
        }
        87% {
          box-shadow: .2em -.2em 0 0 currentcolor;
        }
      }
   

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Klasa pomocnicza do ukrywania loadera */
.preloader-hidden {
    opacity: 0;
    visibility: hidden;
}