:root {
    /* Paleta kolorów pobrana z projektu */
    --bg-green: #9CC648;
    --btn-orange: #E69123;
    --btn-yellow: #F8EB3D;
    --btn-blue: #5DACDF;
    --btn-red: #CE2B2B;
    --text-color: #000000;

    /* ZMIANA: Zamiast sztywnych px, używamy jednostek vh (viewport height) */
    /* Dzięki temu menu zawsze zajmie tyle samo % ekranu, niezależnie od urządzenia */
    --btn-height: 7.5vh;
    --btn-gap: 2vh;
}

/* Przycisk zajmuje 7.5% wysokości ekranu */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--bg-green);
    font-family: 'Poppins', sans-serif;
    overflow: hidden;
    /* Zabezpieczenie przed scrollem */
    user-select: none;
    /* Blokada zaznaczania tekstu */
}

/* Ukrycie kursora myszy - na kioskach dotykowych zazwyczaj nie chcemy widzieć strzałki */
body {
    /* cursor: none; */
}

/* Główny kontener pozycjonujący */
.main-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* padding: 60px;
    Margines od krawędzi ekranu */
}

/* Lista przycisków */
.menu-list {
    width: 100%;
    max-width: 900px;
    /* Żeby przyciski nie były za szerokie */
    display: flex;
    flex-direction: column;
    gap: var(--btn-gap);
    margin-bottom: 4vh;
    /* Miejsce na logo pod spodem */

    justify-content: center;
    flex: 1;
}

/* STYL PRZYCISKU (Baza) */
.btn {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    height: var(--btn-height);
    background-color: white;
    text-decoration: none;
    color: var(--text-color);
    border-radius: 20px;
    box-shadow: 0 10px 0 rgba(0, 0, 0, 0.1);
    /* Delikatny cień pod spodem */
    overflow: hidden;
    /* Ważne: przycina kolorowy kształt do zaokrąglonych rogów */
    transition: transform 0.1s linear, box-shadow 0.1s linear;
}

/* Efekt wciśnięcia (Active state) */
.btn:active {
    transform: translateY(5px);
    box-shadow: 0 5px 0 rgba(0, 0, 0, 0.1);
}

/* KOLOROWY KSZTAŁT (Strzałka) */
.btn-shape {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 25%;
    /* Szerokość kolorowego paska */
    background-color: #ccc;
    /* Domyślny, nadpisany niżej */

    /* Magia CSS: Tworzymy strzałkę przycinając prostokąt */
    /* Punkty: lewy-góra, prawy-góra (przesunięty), środek-szpic, prawy-dół (przesunięty), lewy-dół */
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);

    z-index: 1;
}

/* TEKST PRZYCISKU */
.btn-text {
    position: relative;
    z-index: 2;
    font-size: 2.5vh;
    /* Duży czytelny font */
    font-weight: 700;
    margin-left: 28%;
    /* Odsunięcie tekstu, żeby nie wjechał na kolorowy pasek */
    line-height: 1.2;
}

/* Warianty kolorystyczne */
.btn-orange .btn-shape {
    background-color: var(--btn-orange);
}

.btn-yellow .btn-shape {
    background-color: var(--btn-yellow);
}

.btn-blue .btn-shape {
    background-color: var(--btn-blue);
}

.btn-red .btn-shape {
    background-color: var(--btn-red);
}

/* Logo na dole */
.logo-container {
    margin-top: auto;
    /* Dopycha logo do dołu */
    padding-bottom: 40px;
}

.logo {
    max-height: 120px;
    /* Bezpieczna wysokość logo */
    width: auto;
    display: block;
}

/* --- STYLE DLA BIBLIOTECZKI --- */

/* 1. Ekran powitalny (Intro) */
.library-intro-body {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-green);
}

.top-bar {
    height: 120px;
    background-color: var(--bg-green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 700;
}

.intro-image-container {
    flex: 1;
    /* Zajmuje resztę miejsca */
    position: relative;
    overflow: hidden;
}

.intro-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Wypełnia przestrzeń, przycina nadmiar */
    object-position: center bottom;
    /* Centruje obraz */
}

/* Pasek dolny (wspólny dla intro i listy) */
.bottom-bar {
    height: 140px;
    background-color: var(--bg-green);
    /* Jasna zieleń */
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Logo po lewej, przycisk po prawej */
    padding: 0 40px;
}

.nav-btn-right {
    font-size: 2rem;
    font-weight: 700;
    color: white;
    /* Tekst przycisku */
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 15px;
}

.logo-small {
    height: 80px;
    width: auto;
}

/* 2. Lista książek (List) */
.library-list-body {
    background-color: var(--btn-blue);
    /* Tło biblioteczki (niebieskie niebo) */
    position: relative;
}

.books-scroll-container {
    height: 100vh;
    overflow-y: auto;
    /* Włącza przewijanie pionowe */
    padding-top: 40px;
    /* Ukrywanie scrollbara dla estetyki */
    scrollbar-width: none;
}

.books-scroll-container::-webkit-scrollbar {
    display: none;
}

/* Wiersz z książką */
.book-row {
    width: 85%;
    /* Zmniejszamy szerokość półki */
    margin-bottom: 60px;
    position: relative;
    padding: 0 40px;
    /* Wewnętrzny odstęp dla treści na półce */

    /* Domyślnie (nieparzyste/odd) - wyrównaj do lewej */
    margin-left: 0;
    margin-right: auto;

    /* Żeby półka "wychodziła" z lewej krawędzi, resetujemy border-radius z lewej */
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;

    text-align: center;
}

.book-row:nth-child(even) {
    /* Przesuń całą półkę do prawej */
    margin-left: auto;
    margin-right: 0;
}

/* Opcjonalnie: Odwracamy też kolejność treści na prawej półce (Tekst - Książka) */
.book-row:nth-child(even) .shelf-content {
    flex-direction: row-reverse;

    /* Lustrzane odbicie układu */
}

/* Poprawka wizualna dla tekstu, gdy jest odwrócony */
.book-row:nth-child(even) .book-desc-box {
    text-align: center;
    /* Tekst wyrównany do prawej */
}

/* Przycisk na odwróconej półce też chcemy mieć po prawej stronie */
.book-row:nth-child(even) .audio-btn {
    margin-left: auto;
    margin-right: 0;
    flex-direction: row-reverse;
    /* Strzałka po lewej stronie tekstu przycisku */
}


.shelf-content {
    display: flex;
    align-items: flex-end;
    /* Wyrównanie do dołu półki */
    gap: 40px;
    margin-bottom: 18px;
    /* Odstęp od "drewna" półki */
    position: relative;
    z-index: 2;
}

.book-cover {
    width: 350px;
    /* Szerokość okładki */
    height: auto;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    transform: rotate(-2deg);
    /* Lekki obrót dla naturalności */
}

/* Biała ramka z opisem */
.book-desc-box {
    flex: 1;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    font-size: 1.2rem;
}

.book-desc-box h2 {
    margin-top: 0;
    font-size: 1.8rem;
    line-height: 1.2;
    margin-bottom: 15px;
}

.book-desc-box p {
    font-size: 1.1rem;
    line-height: 1.4;
    color: #333;
}

/* Przycisk odtwarzania */
.audio-btn {
    display: inline-block;
    background-color: var(--bg-green);
    color: black;
    border: none;
    padding: 15px 30px;
    border-radius: 30px;
    font-size: 1.2rem;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    /* Na kiosku można pominąć, ale pomaga w testach */
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.audio-btn:active {
    transform: scale(0.95);
}

/* Wizualizacja drewnianej półki */
.shelf-wood {
    height: 30px;
    background-color: #8B5A2B;
    width: 120%;
    /* Trik: szersze niż kontener, żeby "wchodziło" w ścianę */
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);

    /* Pozycjonowanie drewna względem kontenera */
    position: relative;
    left: -40px;
    /* Cofamy o wartość paddingu .book-row, żeby dotykało krawędzi */

    /* Zaokrąglenie tylko "wolnego" końca (dla lewej strony - prawy koniec) */
    border-radius: 0 10px 10px 0;
}

.book-row:nth-child(even) .shelf-wood {
    left: auto;
    /* Reset */
    right: -40px;
    /* Wychodzimy w prawo */
    border-radius: 10px 0 0 10px;
    /* Zaokrąglenie lewego końca */
}

.spacer-bottom {
    height: 200px;
    /* Puste miejsce na dole listy, żeby ostatnia książka nie chowała się za footerem */
}

/* Sticky footer na liście */
.sticky-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.2);
    /* Cień rzucany w górę */
}



/* --- STYLE QUIZU 1 --- */

/* Tło quizu - góry i rzeka */
.quiz-bg {
    /* Używamy obrazka tła (zrzut ekranu lub czysta grafika) */

    background: url('bg_quiz2.png') #5DACDF no-repeat center center;
    background-size: cover;
    font-family: 'Poppins', sans-serif;
    overflow: hidden;
}

/* Tytuł na intro */
.quiz-title-box {
    background-color: #8CC63F;
    /* Ciemniejsza zieleń */
    padding: 20px 60px;
    border-radius: 20px;
    position: absolute;
    top: clamp(180px, 23vh, 450px);
    box-shadow: 0 10px 0 rgba(0, 0, 0, 0.1);
    text-align: center;
    min-width: min(500px, calc(100vw - 48px));
    max-width: calc(100vw - 48px);
}

.quiz-title-box h1 {
    margin: 0;
    color: black;
    font-size: 3rem;
}

/* Lista instrukcji */
.quiz-instructions {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
    max-width: 900px;
}

.info-bar {
    /* Dziedziczy style z .btn, ale usuwamy interaktywność */
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    height: 120px;
    overflow: hidden;
    /* Trochę niższe niż przyciski menu */
    background-color: white;
    border-radius: 20px;
    box-shadow: 0 8px 0 rgba(0, 0, 0, 0.1);
}

.info-text {
    position: relative;
    z-index: 2;
    font-size: 1.6rem;
    font-weight: 700;
    margin-left: 28%;
    padding-right: 20px;
}

/* --- EKRAN GRY --- */

.quiz-layout {
    justify-content: center;
    padding-top: 0;
    flex-direction: column;
}

/* Pytanie */
.question-box {
    background-color: #8CC63F;
    padding: 30px 50px;
    border-radius: 20px;
    margin-bottom: 80px;
    max-width: 900px;
    text-align: center;
    box-shadow: 0 10px 0 rgba(0, 0, 0, 0.1);
}

.question-box h2 {
    font-size: 2rem;
    margin: 0;
}

/* Kontener odpowiedzi A/B */
.answers-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
    max-width: 900px;
}

/* Litera A/B wewnątrz paska */
.letter-icon {
    position: absolute;
    left: 40px;
    /* Wycentrowanie w kolorowym polu */
    top: 50%;
    transform: translateY(-50%);
    font-size: 4rem;
    color: rgba(0, 0, 0, 0.4);
    /* Półprzezroczysta czerń */
    font-weight: 700;
}

/* Stan "wygaszenia" nieaktywnych odpowiedzi */
.answer-btn.dimmed {
    opacity: 0.4;
    transform: scale(0.98);
    pointer-events: none;
    /* Blokada klikania */
}

/* --- PANEL FEEDBACKU (Wyjaśnienie) --- */
.feedback-box {
    position: absolute;
    bottom: 140px;
    /* Nad footerem */
    left: 0;
    right: 0;
    background-color: white;
    min-height: 250px;
    display: flex;
    align-items: stretch;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.2);
    z-index: 50;
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.feedback-shape {
    width: 150px;
    /* Szerokość kolorowego paska z lewej */
    background-color: #ccc;
    /* Zmienne JS */
    /* Kształt strzałki w prawo */
    clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%);
}

.feedback-content {
    flex: 1;
    padding: 30px 40px 30px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.feedback-header {
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 10px;
    margin-top: 0;
}

.feedback-desc {
    font-size: 1.3rem;
    line-height: 1.4;
    margin: 0;
}

/* --- POMOCNICZE --- */
.hidden {
    display: none !important;
}

.score-box {
    background: white;
    padding: 40px 80px;
    border-radius: 20px;
    font-size: 3rem;
    font-weight: bold;
    margin-top: 30px;
    box-shadow: 0 10px 0 rgba(0, 0, 0, 0.1);
}


/* --- STYLE QUIZU 2 (POPRAWIONE) --- */

/* Tło */
.quiz2-bg {
    /* Poprawna składnia background shorthand */
    background: url('bg_quiz2.png') no-repeat center center;
    background-color: #5DACDF;
    /* Kolor awaryjny (niebo) */
    background-size: cover;
    font-family: 'Poppins', sans-serif;
    overflow: hidden;
}

/* --- PRZYCISKI QUIZU 2 --- */

/* 1. Kontener przycisku */
.q2-btn {
    position: relative;
    /* Ważne dla pozycjonowania elementów wewnątrz */
    overflow: hidden;
    /* Przycina animację do zaokrąglonych rogów */
    z-index: 1;
    /* Ustawia nowy kontekst warstw */

    /* Wymuszamy wyrównanie tekstu */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* Tekst do lewej, nie do środka! */
}

/* 2. Tekst przycisku */
.q2-btn .btn-text {
    position: relative;
    z-index: 30;
    /* Najwyżej - musi być nad animacją */
    margin-left: 28%;
    /* KLUCZOWE: Odsunięcie tekstu od "dzióbka" */
    margin-right: 20px;
    text-align: left;
    transition: color 0.3s ease;
    font-size: 1.5rem;
    /* Dopasowany font */
    line-height: 1.2;
}

/* 3. Dzióbek z literą (Kształt) */
.q2-btn .btn-shape {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 25%;
    /* Szerokość paska z literą */
    z-index: 20;
    /* Nad animacją, ale pod tekstem (gdyby nachodził) */
    display: flex;
    /* Centrowanie litery wewnątrz paska */
    align-items: center;
    justify-content: center;
    /* Kształt strzałki */
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}

/* Litera wewnątrz dzióbka */
.q2-btn .letter-icon {
    font-size: 3.5rem;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.3);
    z-index: 21;
}


/* --- ANIMACJA TŁA (KURTYNA OD LEWEJ) --- */

/* Warstwa animowana (niewidoczna na start) */
.q2-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    /* Start: szerokość 0 */
    z-index: 10;
    /* Pomiędzy tłem przycisku a tekstem/dzióbkiem */
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    /* Płynny ruch */
}

/* Stan po kliknięciu (dodawana klasa .filled przez JS) */
.q2-btn.filled::after {
    width: 100%;
    /* Koniec: szerokość 100% */
}


/* --- KOLORYSTYKA --- */

/* A: Pomarańczowy */
.btn-orange.q2-btn .btn-shape {
    background-color: var(--btn-orange);
}

/* Kolor dzióbka */
.btn-orange.filled::after {
    background-color: var(--btn-orange);
}

/* Kolor animacji */
.btn-orange.filled .btn-text {
    color: white;
}

/* Kolor tekstu po zmianie */

/* B: Żółty */
.btn-yellow.q2-btn .btn-shape {
    background-color: var(--btn-yellow);
}

.btn-yellow.filled::after {
    background-color: var(--btn-yellow);
}

.btn-yellow.filled .btn-text {
    color: black;
}

/* Na żółtym czarny tekst */

/* C: Niebieski */
.btn-blue.q2-btn .btn-shape {
    background-color: var(--btn-blue);
}

.btn-blue.filled::after {
    background-color: var(--btn-blue);
}

.btn-blue.filled .btn-text {
    color: white;
}

/* D: Czerwony */
.btn-red.q2-btn .btn-shape {
    background-color: var(--btn-red);
}

.btn-red.filled::after {
    background-color: var(--btn-red);
}

.btn-red.filled .btn-text {
    color: white;
}


/* --- EKRAN WYNIKU --- */
.result-layout {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    min-height: 100%;
    padding: 6vh 0 180px;
    gap: 2.5vh;
}

.result-header {
    position: relative;
    top: auto;
    background-color: #9CC648;
    min-width: min(600px, 90%);
    max-width: 90%;
    padding: clamp(18px, 2.2vh, 30px) clamp(28px, 4vw, 46px);
    border-radius: 28px;
    text-align: center;
    box-shadow: 0 18px 0 rgba(0, 0, 0, 0.12);
    z-index: 20;
}

.result-header h1 {
    font-size: clamp(2.1rem, 4.2vh, 3.6rem);
    line-height: 1.05;
}

.result-stage {
    width: min(92%, 980px);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.result-desc-bar {
    background-color: white;
    width: 100%;
    border-radius: 32px;
    display: flex;
    align-items: center;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);
    position: relative;
    z-index: 10;
}

.result-badge {
    width: clamp(120px, 13vw, 160px);
    align-self: stretch;
    background-color: #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(3rem, 4vw, 4rem);
    font-weight: 700;
    color: rgba(0, 0, 0, 0.3);
    clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%);
    margin-right: -30px;
    padding-right: 30px;
    flex-shrink: 0;
}

.result-text-content {
    padding: clamp(24px, 3vh, 40px) clamp(28px, 3vw, 40px) clamp(24px, 3vh, 40px) clamp(48px, 5vw, 64px);
    flex: 1;
}

.result-text-content h2 {
    margin: 0 0 10px 0;
    font-size: clamp(2rem, 3.2vh, 2.7rem);
}

.result-text-content p {
    margin: 0;
    font-size: clamp(1.2rem, 2vh, 1.55rem);
    line-height: 1.5;
}

.character-img-container {
    width: 100%;
    min-height: 42vh;
    height: min(48vh, 860px);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-top: -2vh;
    z-index: 1;
}

.character-img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 20px 35px rgba(0, 0, 0, 0.22));
}

@media (max-width: 900px) {
    .result-layout {
        padding: 4vh 0 172px;
        gap: 2vh;
    }

    .result-desc-bar {
        flex-direction: column;
        text-align: center;
    }

    .result-badge {
        width: 100%;
        min-height: 92px;
        margin-right: 0;
        padding-right: 0;
        clip-path: polygon(0% 0%, 100% 0%, 100% 72%, 50% 100%, 0% 72%);
    }

    .result-text-content {
        padding: 26px 24px 30px;
    }

    .character-img-container {
        min-height: 38vh;
        height: 42vh;
        margin-top: -1vh;
    }
}

/* --- NAKŁADKA STARTOWA DLA WIDEO --- */

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    /* Lekkie przyciemnienie tła */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20;
    /* Nad wideo (1) i pod przyciskiem powrotu (też w sumie bez znaczenia, byle nad wideo) */
    transition: opacity 0.5s ease;
}

/* Klasa ukrywająca nakładkę */
.video-overlay.hidden {
    opacity: 0;
    pointer-events: none;
    /* Żeby nie dało się kliknąć ukrytego przycisku */
}

/* Duży przycisk Play na środku */
.big-play-btn {
    background-color: var(--btn-orange);
    /* Pomarańczowy Pingwina */
    color: white;
    border: none;
    padding: 30px 60px;
    border-radius: 50px;
    font-family: 'Poppins', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    gap: 20px;
    transition: transform 0.1s;
}

.big-play-btn:active {
    transform: scale(0.95);
    background-color: #d68112;
    /* Ciemniejszy pomarańcz */
}

.play-icon {
    font-size: 3rem;
}

/* --- STYLE GRY: JAKI TO INSTRUMENT --- */

/* Nowe tło dla ekranu startowego instrumentów */
.instrument-intro-bg {
    background: url('bg_instrumenty-intro.png') var(--btn-blue) no-repeat center center;
    background-size: cover;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    font-family: 'Poppins', sans-serif;
}

.instrument-bg {
    /* Zakładamy, że masz tło z górami i owieczką */
    background: url('bg_instrumenty.png') var(--btn-blue) no-repeat center center;
    background-size: cover;
    font-family: 'Poppins', sans-serif;
    overflow: hidden;
}

.game-layout {
    justify-content: center;
    /* Wycentrowanie w pionie */
    padding-top: 40px;
}

.instruction-header {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 30px 40px;
    border-radius: 30px;
    margin-bottom: 40px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.instruction-header h2 {
    margin: 0;
    font-size: 1.8rem;
    color: #333;
}

/* Siatka Instrumentów (Góra) */
.instruments-grid {
    display: flex;
    gap: 30px;
    margin-bottom: 60px;
    width: 100%;
    justify-content: center;
}

.instrument-item {
    width: 200px;
    height: 200px;

    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.1s, background-color 0.2s;
}

.instrument-item:active {
    transform: scale(0.95);
    background-color: rgba(255, 255, 255, 0.6);
}

.instrument-item img {
    max-width: 80%;
    max-height: 80%;
    pointer-events: none;
}

/* Siatka Nutek (Dół) */
.notes-grid {
    display: flex;
    gap: 30px;
    justify-content: center;
    width: 100%;
}

.note-btn {
    width: 180px;
    height: 180px;
    border: none;
    background-color: transparent;
    /* Grafika przycisku jest w obrazku */
    padding: 0;
    cursor: pointer;
    transition: transform 0.1s;
}

.note-btn:active {
    transform: scale(0.90);
}

.note-btn img {
    width: 100%;
    height: 100%;
    display: block;
    /* Domyślnie nutki mogą mieć cień w pliku png, 
       jeśli nie, można dodać drop-shadow w CSS */
    filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.2));
}

/* Klasa dla aktywnej nutki (aktualnie grającej) */
.note-btn.playing {
    transform: scale(1.1);
    filter: drop-shadow(0 0 15px rgba(255, 255, 0, 0.8));
    /* Żółta poświata */
}


/* --- MODAL Z WYNIKIEM (FEEDBACK) --- */
.feedback-overlay {
    position: absolute;
    top: 150px;
    /* Pozycja pod tytułem/instrukcją */
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    z-index: 100;
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.feedback-card {
    background-color: white;
    width: 90%;
    max-width: 900px;
    padding: 40px;
    border-radius: 30px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    text-align: center;
    border: 10px solid #ccc;
    /* Kolor zmieniany przez JS (czerwony/zielony) */
}

.feedback-card h2 {
    font-size: 2.5rem;
    margin-top: 0;
    margin-bottom: 20px;
}

.feedback-card p {
    font-size: 1.3rem;
    line-height: 1.5;
    margin-bottom: 40px;
    text-align: justify;
    /* Ładniejsze wyrównanie długiego tekstu */
}

.close-feedback-btn {
    max-width: 300px;
    margin: 0 auto;
    height: 100px;
    /* Mniejszy guzik niż w menu */
}

.close-feedback-btn .btn-text {
    font-size: 1.8rem;
    margin-left: 0;
    /* Wyśrodkowanie tekstu */
}