/* --- WYMUSZENIE TRYBU JASNEGO --- */
:root {
    color-scheme: light only; /* Mówi: ta strona ma być tylko jasna */
    forced-color-adjust: none; /* Mówi: nie zmieniaj mi kolorów automatycznie! */
}

* { box-sizing: border-box; }


/* 1. TŁO I PODSTAWA (WYMUSZAMY CZARNY TEKST WSZĘDZIE) */
body {
    margin: 0; padding: 0;
    background-color: #111; 
    
    /* TU JEST KLUCZ: !important wymusza czerń */
    color: #050505 !important; 
    
    font-family: 'Playfair Display', serif;
    height: 100vh;
    overflow: hidden;
    display: flex; justify-content: center; align-items: center;
}

/* Dodatkowe zabezpieczenie: Wszystkie nagłówki i paragrafy na czarno */
h1, h2, h3, p, span, div, li {
    color: #050505;
}

/* WARSTWA TŁA (BRUDNE BIURKO) */
.background-collage {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: #222;
    background-image: url('grunge-bg.jpg'); 
    background-size: cover; background-position: center;
    opacity: 0.6; 
    z-index: 0; pointer-events: none;
}

/* 2. GŁÓWNA KARTKA (TWOJA TEKSTURA) */
/* --- 2. GŁÓWNA KARTKA (ZMIANA NA PNG) --- */
/* --- GŁÓWNA KARTKA (STELAŻ) --- */
.main-article {
    position: relative; z-index: 10;
    display: flex; flex-direction: column;
    
    /* Wysokość i szerokość */
    height: 90vh; /* Troszkę mniejsza niż ekran, żeby był margines biurka */
    width: 95%; max-width: 650px; 
    
    /* Tło - Twój papier */
    background-color: transparent; 
    background-image: url('unnamed.png'); 
    background-size: 100% 100%; 
    background-position: center;
    background-repeat: no-repeat;
    
    margin: 0 auto; border: none; 
    
    /* WAŻNE: Zwiększamy padding góra/dół, żeby treść nie dotykała brzegów obrazka */
    padding: 70px 50px; 
    
    /* Cień rzucany przez kartkę */
    filter: drop-shadow(0 15px 20px rgba(0,0,0,0.8));
    
    /* --- ZMIANA: BLOKADA PRZEWIJANIA CAŁEJ KARTKI --- */
    /* Dzięki temu Logo i Tytuł będą zawsze widoczne! */
    overflow: hidden; 
}
.main-article::-webkit-scrollbar { display: none; }


/* --- LOGO (ZAMIAST TYPOGRAFII) --- */

.newspaper-header {
    text-align: center;
    border-bottom: 2px solid #000;
    padding-bottom: 10px; margin-bottom: 10px;
}

/* Styl dla obrazka logo */
/* --- LOGO (JPG z usuwaniem białego tła) --- */

.newspaper-header {
    text-align: center;
    border-bottom: none; /* Bez linii, samo logo wystarczy */
    margin-bottom: 20px;
}

.logo-img {
    display: block; margin: 0 auto;
    max-width: 100%; height: auto; max-height: 150px; 
    mix-blend-mode: normal; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.3));
}

/* USUWAMY STARY STYL .main-title, BO JUŻ GO NIE MA */
/* .main-title { ... } -> To możesz skasować albo zostawić, nie będzie używane */
.main-article::-webkit-scrollbar { display: none; }


/* --- TYPOGRAFIA --- */

.newspaper-header {
    text-align: center;
    border-bottom: none; /* USUNIĘTY PASEK POD LOGO */
    padding-bottom: 0; 
    margin-bottom: 10px;
}

.main-title {
    font-family: 'Anton', sans-serif;
    font-size: clamp(3.5rem, 10vw, 6rem);
    margin: 0; line-height: 0.9;
    text-transform: uppercase; letter-spacing: 2px;
    
    /* WYMUSZENIE CZERNI */
    color: #000000 !important; 
    text-shadow: none !important;
}

/* --- NAGŁÓWEK (BEZ PASKÓW) --- */
.newspaper-header {
    text-align: center;
    border-bottom: none; /* USUNIĘTY PASEK POD LOGO */
    padding-bottom: 0; 
    margin-bottom: 10px;
}

.logo-img {
    display: block; margin: 0 auto;
    max-width: 100%; height: auto; max-height: 150px; 
    mix-blend-mode: normal; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.3));
}

/* --- PASEK INFO (BEZ CENY, BEZ PASKÓW) --- */
/* --- PASEK INFO (DATA I VOL - MASZYNA DO PISANIA) --- */
.meta-bar {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    
    /* Zmiana fontu na maszynowy */
    font-family: 'Special Elite', monospace; 
    
    /* Rozmiar i styl */
    font-size: 1.3rem; /* Troszkę większy, bo ten font jest dość cienki */
    font-weight: bold; /* Pogrubienie imituje mocne uderzenie klawisza */
    letter-spacing: 2px; /* Maszyny do pisania mają szerokie odstępy */
    
    padding: 10px 20px;
    border: none; /* Bez ramek */
    margin-bottom: 20px;
    
    /* Kolor */
    color: #000 !important; 
}

.sub-header-section {
    text-align: center;
    margin-bottom: 20px;
    margin-top: 10px;
    /* Dodajemy delikatne linie góra/dół dla całej sekcji, jak w aktach */
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    padding: 10px 0;
    width: 80%; /* Nie na całą szerokość, tylko na środku */
    margin-left: auto; margin-right: auto;
}
.sub-title {
    /* Font maszynowy */
    font-family: 'Special Elite', monospace;
    
    /* Rozmiar - mniejszy, bardziej techniczny */
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    
    /* Wymuszamy czerń */
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    
    font-weight: bold;
    text-transform: uppercase;
    
    /* Duży odstęp między literami - to robi robotę "tajemniczości" */
    letter-spacing: 4px;
    
    margin: 0;
    padding: 0;
    
    /* Resetujemy style pieczątki (usuwamy tło, cienie, obrót) */
    background-color: transparent;
    box-shadow: none;
    transform: none;
    border: none;
    display: inline;
}

.intro-text {
    font-family: 'Special Elite', monospace;
    text-align: center; font-size: 1rem;
    margin: 0 auto 30px auto;
    color: #111 !important; font-style: italic; font-weight: 600;
}

/* --- ELEMENTY GRY --- */

.search-box {
    /* TO JEST NOWOŚĆ: */
    position: relative; /* Dzięki temu lista wie, gdzie "startuje" */
    z-index: 1000;      /* Musi być wyżej niż tabela */
    
    display: flex; 
    border: none;
    margin-bottom: 30px;
    align-items: flex-end;
}

/* INPUT - Tutaj często są problemy z kolorem, więc wymuszamy mocno */
input {
    width: 100%; background: transparent; border: none;
    border-bottom: 3px dotted #000; 
    font-family: 'Special Elite', monospace; 
    font-size: 1.8rem; padding: 10px 5px;
    
    color: #000000 !important; /* CZARNY */
    -webkit-text-fill-color: #000000 !important; /* DLA CHROME/SAFARI */
    
    text-transform: uppercase; outline: none;
    letter-spacing: 2px; font-weight: bold;
}
input::placeholder { 
    color: #444 !important; 
    -webkit-text-fill-color: #444 !important;
    opacity: 0.6; 
}

button {
    background: transparent; 
    color: #000 !important; /* CZARNY TEKST NA GUZIKU */
    border: 3px solid #000;
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    font-family: 'Anton', sans-serif; font-size: 1.2rem; padding: 8px 25px;
    margin-left: 15px; cursor: pointer; text-transform: uppercase; letter-spacing: 1px;
    transition: 0.2s; font-weight: bold;
}
button:hover { border-color: #c92a2a; color: #c92a2a !important; transform: rotate(-2deg); }

/* --- PRZEWIJALNY ŚRODEK (GRA) --- */
.game-content {
    /* Zajmij całe dostępne miejsce poniżej logo */
    flex: 1; 
    
    /* Pozwól przewijać tylko ten element */
    overflow-y: auto; 
    
    /* Ukryj pasek przewijania (estetyka) */
    scrollbar-width: none; 
    
    /* Dodajemy margines wewnątrz, żeby tekst nie dotykał paska przewijania */
    padding: 10px 5px; 
    
    /* --- MAGIA: MASKA ZANIKANIA (FADE OUT) --- */
    /* To sprawia, że tabela znika miękko na górze i dole, zamiast być uciętą */
    /* Transparent na końcach, Black w środku (Black oznacza "widoczne") */
    mask-image: linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent 100%);
}

/* Ukrycie paska przewijania dla Chrome/Safari */
.game-content::-webkit-scrollbar { display: none; }

/* --- TABELA --- */
/* --- SUROWA TABELA (BEZ TŁA, CZARNE KRECHY) --- */

.game-board {
    /* 1. TŁO: Przezroczyste (widać papier pod spodem) */
    background: transparent;
    
    /* 2. RAMKA ZEWNĘTRZNA: Gruba, czarna, "rysowana" */
    border: 3px solid #000;
    /* Te dziwne wartości robią efekt krzywych rogów (ręczna robota) */
    border-radius: 5px 225px 3px 25px / 225px 5px 225px 5px;
    
    margin-bottom: 30px;
    /* Padding 0, żeby linie wewnętrzne stykały się z ramką */
    padding: 0;
    
    /* Zabezpieczenie, żeby treść nie wylewała się poza krzywe rogi */
    overflow: hidden; 
}

/* NAGŁÓWEK TABELI */
.header-row {
    display: grid; 
    grid-template-columns: repeat(7, 1fr);
    
    /* Gruba krecha oddzielająca nagłówek od reszty */
    border-bottom: 3px solid #000;
    
    padding: 10px 0; 
    text-align: center; 
    font-family: 'Anton', sans-serif; 
    font-size: 0.8rem; 
    letter-spacing: 1px;
    color: #000 !important;
}

/* PIONOWE LINIE W NAGŁÓWKU (kreska po prawej stronie każdego elementu oprócz ostatniego) */
.header-row span:not(:last-child) {
    border-right: 2px solid #000;
}


/* WIERSZE Z ODPOWIEDZIAMI */
.guess-row {
    display: grid; 
    grid-template-columns: repeat(7, 1fr);
    
    /* Pozioma linia oddzielająca wiersze */
    border-bottom: 2px solid #000;
}
/* Ostatni wiersz nie potrzebuje dolnej kreski, bo jest ramka tabeli */
.guess-row:last-child { border-bottom: none; }


/* POJEDYNCZA KOMÓRKA (TILE) */
.tile {
    height: 55px; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    font-size: 1.6rem; 
    font-family: 'Special Elite', monospace;
    font-weight: bold;
    color: #000 !important;
}

/* PIONOWE LINIE W TABELI (kreska po prawej stronie każdej komórki oprócz ostatniej) */
.tile:not(:last-child) {
    border-right: 2px solid #000;
}

/* Specjalne wymuszenie dla ikon w tabeli */
.tile i, .tile span {
    color: #000000 !important;
}

/* --- WYNIKI --- */
.tile-content { position: relative; display: inline-block; }

/* BŁĄD - Czerwona kreska */
.wrong .tile-content { opacity: 0.6; }
.wrong .tile-content::after {
    content: ''; position: absolute;
    top: 50%; left: -10%; width: 120%; height: 3px;
    background-color: #c92a2a; /* CZERWONY */
    transform: translateY(-50%) rotate(-15deg);
    border-radius: 3px; pointer-events: none;
}

/* SUKCES - Zielone kółko */
.correct { color: #000 !important; }
.correct .tile-content::after {
    content: ''; position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-10deg);
    width: 140%; height: 140%; min-width: 40px; min-height: 40px;
    border: 3px solid #2e7d32; /* ZIELONY */
    border-radius: 50% 60% 40% 70% / 60% 50% 70% 40%;
    opacity: 0.9; pointer-events: none;
}

/* STRZAŁKI - WYJĄTEK KOLORYSTYCZNY */
/* Używamy selektora z dużą precyzją, żeby nadpisać ogólne reguły */
/* --- STRZAŁKI (WIĘKSZE I GRUBSZE) --- */
.tile i.arrow, .arrow { 
    /* Kolor czerwony (wymuszony) */
    color: #c92a2a !important; 
    -webkit-text-fill-color: #c92a2a !important;
    
    /* 1. DUŻY ROZMIAR */
    font-size: 1.8rem; /* Było 1.2rem -> teraz będą wyraźne */
    
    /* 2. POGRUBIENIE */
    font-weight: 900; /* Maksymalna waga czcionki */
    
    /* 3. EFEKT MARKERA (Trick na pogrubienie cienkich ikon) */
    /* Dodajemy minimalny cień w tym samym kolorze, co optycznie pogrubia linię */
    text-shadow: 0 0 1px #c92a2a, 0 0 1px #c92a2a;
    
    /* Pozycjonowanie */
    margin-left: 8px; 
    opacity: 1 !important; 
    
    /* Wyrównanie w pionie (żeby nie wisiały za wysoko przy dużym rozmiarze) */
    vertical-align: sub;
}

/* DODATKI */
.hints-column { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.hint-card {
    background: rgba(255,255,255,0.6); border: 1px solid #555; padding: 10px;
    font-family: 'Special Elite', monospace; font-size: 0.8rem;
    flex: 1; min-width: 180px; text-align: center; 
    color: #000 !important;
    box-shadow: 2px 2px 0 #777;
}
.hint-card strong { color: #c92a2a !important; text-transform: uppercase; }

/* MODAL */
.modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8); z-index: 200;
    display: flex; justify-content: center; align-items: center;
}

/* --- MODAL: PROSTOKĄTNE AKTA (STABILNA WERSJA) --- */
.modal-content {
    /* 1. TŁO I KOLOR */
    background-color: #e0d3a8 !important; /* Kolor "Manila Folder" */
    
    /* Tu wstaw swoje zdjęcie z fakturą (nawet to białe) */
    background-image: url('teczka.jpg') !important; 
    
    /* To sprawia, że białe tło zdjęcia przybiera kolor beżowy */
    background-blend-mode: multiply; 
    
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

    /* 2. RAMKA I CIEŃ */
    /* Ciemniejsza ramka, żeby odciąć teczkę od tła */
    border: 3px solid #8b7d6b; 
    border-radius: 6px; /* Lekko zaokrąglone rogi */
    
    /* Głęboki cień - teczka "wisi" nad biurkiem */
    box-shadow: 0 25px 50px rgba(0,0,0,0.9); 

    /* 3. UKŁAD WEWNĄTRZ */
    width: 90%;
    max-width: 450px;
    margin: 5vh auto 0 auto; /* Odstęp od góry */
    padding: 30px; /* Margines wewnątrz, żeby tekst nie dotykał krawędzi */
    
    text-align: center;
    position: relative;
    font-family: 'Special Elite', monospace;
    overflow: hidden; /* Żeby nic nie wystawało */

    /* Animacja wjazdu */
    animation: folder-slide-up 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Klatki animacji wjazdu */
@keyframes folder-slide-up {
    0% {
        opacity: 0;
        transform: translateY(100vh) rotate(-10deg); /* Startuje pod ekranem, krzywo */
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotate(0deg); /* Ląduje prosto */
    }
}

/* --- LISTA PODPOWIEDZI (NOTEBOOK STYLE) --- */

/* Klasa ukrywająca (musi mieć !important) */
.hidden { display: none !important; }

/* Kontener listy */
/* --- LISTA PODPOWIEDZI (NAPRAWIONA) --- */
.hidden { display: none !important; }

.suggestions {
    position: absolute; /* Wyskakuje nad treścią */
    top: 100%;          /* Zaczyna się równo z dolną krawędzią inputa */
    left: 0;            /* Wyrównana do lewej */
    z-index: 2000;
    /* Wygląd karteczki */
    background-color: #fdfbf7; 
    border: 3px solid #000;
    /* Kopnięte rogi */
    border-radius: 2px 5px 3px 5px / 5px 2px 5px 2px;
    
    /* Szerokość */
    width: 100%; 
    
    /* Cień */
    box-shadow: 5px 5px 0px rgba(0,0,0,0.2);
    
    /* Ukrywanie nadmiaru */
    overflow: hidden;
    margin-top: 5px;
}

.suggestion-item { 
    padding: 12px 15px; 
    border-bottom: 1px dashed #555; 
    cursor: pointer; 
    font-family: 'Special Elite', monospace; 
    font-size: 1.2rem;
    color: #000 !important;
    transition: all 0.2s ease;
}

.suggestion-item:last-child { border-bottom: none; }

.suggestion-item:hover { 
    background-color: #eee5d5; 
    color: #c92a2a !important; 
    font-weight: bold;
    padding-left: 20px;
}

/* --- ANIMACJE --- */

/* Definicja uderzenia pieczątki */
@keyframes stamp-in {
    0% {
        opacity: 0;
        transform: scale(1.5) rotate(2deg); /* Zaczyna duży i krzywy */
    }
    50% {
        opacity: 1;
        transform: scale(0.95) rotate(-1deg); /* Uderza w papier (lekko za mały) */
    }
    70% {
        transform: scale(1.02); /* Lekkie odbicie */
    }
    100% {
        transform: scale(1) rotate(0); /* Wraca do normy */
    }
}

/* Zastosowanie animacji do nowego wiersza */
/* Używamy :not(.empty-slot), żeby puste linie startowe się nie animowały */
.guess-row:not(.empty-slot) {
    animation: stamp-in 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Opcjonalnie: Opóźnienie dla każdej kafelki z osobna (efekt fali) */
/* Jeśli wolisz, żeby cały wiersz wpadł naraz, nie dodawaj poniższego kodu */
.guess-row:not(.empty-slot) .tile:nth-child(1) { animation-delay: 0.05s; }
.guess-row:not(.empty-slot) .tile:nth-child(2) { animation-delay: 0.1s; }
.guess-row:not(.empty-slot) .tile:nth-child(3) { animation-delay: 0.15s; }
.guess-row:not(.empty-slot) .tile:nth-child(4) { animation-delay: 0.2s; }
.guess-row:not(.empty-slot) .tile:nth-child(5) { animation-delay: 0.25s; }
.guess-row:not(.empty-slot) .tile:nth-child(6) { animation-delay: 0.3s; }
.guess-row:not(.empty-slot) .tile:nth-child(7) { animation-delay: 0.35s; }

/* --- WIELKA PIECZĄTKA KOŃCOWA (NAPRAWIONA) --- */
/* --- WIELKA PIECZĄTKA (POMNIEJSZONA) --- */
#game-stamp {
    position: fixed;
    top: 50%; left: 50%;
    /* Startowa pozycja (zanim animacja ruszy) */
    transform: translate(-50%, -50%) scale(0); 
    
    font-family: 'Special Elite', monospace;
    
    /* ZMIANA: Mniejszy zakres rozmiarów */
    /* Było: clamp(3rem, 10vw, 6rem) */
    font-size: clamp(2rem, 6vw, 4rem); 
    
    font-weight: bold;
    color: #d32f2f;
    
    /* ZMIANA: Cieńsza ramka i mniejszy odstęp */
    border: 5px solid #d32f2f; /* Było 10px */
    padding: 10px 30px;        /* Było 20px 50px */
    
    /* ZMIANA: Zaokrąglenie rogów dopasowane do cieńszej ramki */
    border-radius: 8px;
    
    mix-blend-mode: multiply;
    opacity: 0;
    
    z-index: 5000;
    pointer-events: none;
    
    white-space: nowrap;
    text-transform: uppercase;
}

/* KLASA AKTYWUJĄCA ANIMACJĘ */
.stamp-animation {
    /* Uruchom animację */
    animation: stamp-slam 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    /* Usuwamy display: none (nadpisujemy klasę .hidden) */
    display: block !important;
}

/* KLATKI ANIMACJI (BARDZO MOCNE UDERZENIE) */
@keyframes stamp-slam {
    0% {
        opacity: 0;
        /* Zaczyna wielkie (leci z góry) i przekrzywione */
        transform: translate(-50%, -50%) scale(5) rotate(-30deg); 
    }
    50% {
        opacity: 1;
        /* Uderza w papier (troszkę mniejsze niż 1 - efekt wgniecenia) */
        transform: translate(-50%, -50%) scale(0.9) rotate(-5deg); 
    }
    70% {
        /* Odbija się lekko do góry */
        transform: translate(-50%, -50%) scale(1.1) rotate(-5deg); 
    }
    100% {
        opacity: 0.9;
        /* Osiada na papierze */
        transform: translate(-50%, -50%) scale(0.85) rotate(-5deg); 
    }
}

/* --- MODAL W STYLU AKT --- */
.modal-content {
    background: #fdfbf7;
    border: 4px solid #111;
    padding: 40px;
    max-width: 450px;
    text-align: center;
    box-shadow: 10px 10px 0 rgba(0,0,0,0.8); /* Cień rzucany przez akta */
    font-family: 'Special Elite', monospace;
}

#modal-title {
    font-family: 'Anton', sans-serif;
    font-size: 3.5rem;
    margin: 0 0 20px 0;
    text-transform: uppercase;
    transform: rotate(-2deg);
    text-shadow: 2px 2px 0px rgba(0,0,0,0.1);
}

/* --- NAPRAWA PRZYCISKÓW (Żeby były w jednej linii jak na Twoim screenie) --- */
/* Tekst raportu */
#modal-report {
    margin-bottom: 20px;
    color: #222; /* Ciemny tekst, żeby był czytelny na żółtej teczce */
    font-weight: bold;
}

.modal-buttons button {
    flex: 1; /* Równa szerokość */
    padding: 12px 0;
    font-family: 'Anton', sans-serif;
    font-size: 1rem;
    text-transform: uppercase;
    border: 2px solid #111;
    cursor: pointer;
    background-color: #fdfbf7;
    color: #111;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.8);
    transition: transform 0.1s;
}

.modal-buttons button:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 rgba(0,0,0,0.8);
}

/* Przycisk SHARE (wyróżniony) */
#share-btn {
    background-color: #111;
    color: #fff;
}
#share-btn:hover {
    background-color: #333;
    border-color: #333;
    transform: rotate(2deg);
}

/* --- ZDJĘCIE POLICYJNE (MUGSHOT) --- */

.mugshot-container {
    width: 180px;      /* Trochę węższe */
    height: 220px;
    margin: 0 auto 15px auto; /* Mniejszy odstęp od dołu */
    
    background-color: #fff;
    padding: 10px 10px 35px 10px;
    box-shadow: 2px 4px 10px rgba(0,0,0,0.3);
    transform: rotate(-2deg);
    border: 1px solid #ccc;
}

#killer-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Żeby zdjęcie wypełniło ramkę bez rozciągania */
    
    /* STYL STAREJ GAZETY */
    filter: grayscale(100%) contrast(1.2) sepia(20%);
    border: 1px solid #999;
}

/* EFEKT TAŚMY KLEJĄCEJ (Opcjonalny bajer) */
.tape {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 20px;
    background-color: rgba(255, 255, 255, 0.4); /* Półprzezroczysta taśma */
    border-left: 1px dashed rgba(0,0,0,0.1);
    border-right: 1px dashed rgba(0,0,0,0.1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transform: translateX(-50%) rotate(2deg); /* Krzywo przyklejona */
}

/* --- ANIMACJA PRZYKLEJANIA ZDJĘCIA (SLAP) --- */

/* Klasa, którą dodamy w JS, żeby uruchomić animację */
.photo-slap {
    opacity: 0; /* Na początku niewidoczne */
    animation: slap-in 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    animation-delay: 0.8s; /* Czeka, aż modal wjedzie (0.6s) + chwilka przerwy */
}

@keyframes slap-in {
    0% {
        opacity: 0;
        /* Wielkie, przekrzywione i daleko */
        transform: scale(3) rotate(15deg) translateY(-50px); 
    }
    100% {
        opacity: 1;
        /* Ląduje na miejscu, lekko krzywo (-2deg mamy w .mugshot-container) */
        transform: scale(1) rotate(0deg) translateY(0); 
    }
}

.language-switcher {
    position: absolute;
    top: 20px;
    right: 30px;
    font-family: 'Special Elite', monospace;
    font-size: 0.9rem;
    z-index: 100;
}

.lang-btn {
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.3s;
}

.lang-btn.active {
    opacity: 1;
    text-decoration: underline;
    font-weight: bold;
}

.lang-divider {
    margin: 0 5px;
    opacity: 0.3;
}

/* --- STYLES DLA MENU (NAKŁADKI) --- */

/* 1. Kontener na cały ekran (TERAZ PRZEZROCZYSTY) */
#menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* ZMIANA: Brak tła (transparent), żeby było widać grę pod spodem */
    background-color: transparent; 
    
    z-index: 9999; 
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Animacja wyjazdu */
    transition: transform 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045);
}

/* 2. Kartka Menu (DOPASOWANA DO KARTKI GRY) */
.menu-sheet {
    /* Tło - Twój papier */
    background-image: url('unnamed.png'); 
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    
    /* ZMIANA: Wymiary identyczne jak .main-article */
    width: 95%;
    max-width: 650px; /* Zwiększone z 550px do 650px */
    height: 90vh;     /* Zmienione z min-height na sztywną wysokość ekranu */
    
    /* Układ wewnątrz menu */
    padding: 80px 50px; /* Troszkę większy padding */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Wyśrodkowanie przycisków w pionie */
    align-items: center;
    text-align: center;
    
    /* ZMIANA: Cień rzucany na kartkę pod spodem */
    filter: drop-shadow(0 25px 30px rgba(0,0,0,0.6));
    
    /* ZMIANA: Lekki obrót, żeby wyglądało, że leży na poprzedniej kartce */
    transform: rotate(-1.5deg);
}

/* 3. Klasa ukrywająca (wyjazd w dół) */
.menu-hidden {
    transform: translateY(150vh); 
    pointer-events: none; /* Żeby nie klikać jak jest schowane */
}

/* --- ELEMENTY WEWNĄTRZ MENU --- */

.menu-title {
    font-family: 'Anton', sans-serif;
    font-size: 3rem;
    margin-bottom: 40px;
    text-transform: uppercase;
    color: #000 !important;
}

/* Style przycisków w menu */
.menu-btn {
    font-family: 'Anton', sans-serif;
    font-size: 1.5rem; /* Większa czcionka */
    padding: 15px 0;   /* Padding góra/dół */
    margin-bottom: 20px;
    width: 100%;       /* Przycisk na całą szerokość */
    
    background: transparent; /* Przezroczysty, widać papier */
    color: #000 !important;
    
    /* Styl "rysowanej ramki" */
    border: 3px solid #000;
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center; /* Wyśrodkowany tekst */
    font-weight: bold;
}

.menu-btn:hover {
    transform: scale(1.05) rotate(1deg);
    background-color: rgba(0,0,0,0.05); /* Lekkie przyciemnienie po najechaniu */
    border-color: #c92a2a;
    color: #c92a2a !important;
}

.top-secret-stamp {
    border: 4px solid #d32f2f;
    color: #d32f2f;
    display: inline-block;
    padding: 10px 30px;
    font-family: 'Special Elite', monospace;
    font-weight: bold;
    font-size: 1.8rem;
    transform: rotate(-8deg);
    margin-bottom: 40px; /* Odstęp od przycisków */
    mix-blend-mode: multiply;
    opacity: 0.8;
}

/* --- PRZYCISK HOME (DOMEK) --- */
.home-btn {
    position: absolute;
    top: 25px;
    left: 30px;
    z-index: 100; /* Musi być na wierzchu */
    
    width: 45px;
    height: 45px;
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    cursor: pointer;
    transition: transform 0.2s ease;
}

/* Ikona domku */
.home-btn i {
    font-size: 28px;
    color: #000; /* Czarny tusz */
    transition: color 0.2s;
}

/* --- EFEKT ZIELONEGO KÓŁKA (MARKER) --- */
.home-btn::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    
    /* Zielony kolor markera */
    border: 3px solid #2e7d32; 
    
    /* To sprawia, że kółko jest nierówne (jak odręczne) */
    border-radius: 60% 40% 70% 30% / 50% 70% 50% 60%;
    
    /* Ukryte na start */
    opacity: 0;
    transform: scale(0.5) rotate(-10deg);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Stan po najechaniu myszką (HOVER) */
.home-btn:hover {
    transform: scale(1.1); /* Lekko powiększ cały przycisk */
}

.home-btn:hover i {
    color: #1b5e20; /* Ikona też lekko zielenieje */
}

.home-btn:hover::after {
    opacity: 0.77; /* Pokaż kółko */
    transform: scale(0.8) rotate(0deg); /* Kółko się "rysuje" wokół */
}

/* STYL DLA IKON W MENU */
.menu-icon {
    /* Używa aktualnego koloru tekstu (czarny, a po najechaniu czerwony) */
    stroke: currentColor; 
    transition: all 0.2s ease;
}

/* Kiedy najeżdżamy na przycisk menu, ikona też ma reagować */
.menu-btn:hover .menu-icon {
    transform: scale(1.1) rotate(-5deg); /* Lekki obrót dla dynamiki */
}

/* --- IKONY STOPKI W MENU (POMOC I PRYWATNOŚĆ) --- */
/* --- IKONY STOPKI W MENU (POPRAWIONE) --- */
.menu-footer {
    display: flex;
    justify-content: center; /* Idealne wyśrodkowanie */
    align-items: center;
    gap: 5px; /* Większy odstęp między kłódką a pytajnikiem */
    
    /* Pozycjonowanie */
    width: 100%; /* Na całą szerokość kartki */
    margin-top: 50px; /* Duży odstęp od przycisków gier */
    padding-top: 10px;
    
    /* Usunięcie linii (wygląda czyściej) */
    border: none;
}

.footer-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px; /* Odstęp między ikoną a tekstem */
    transition: transform 0.2s;
    
    /* Kolor */
    color: #000 !important;
    opacity: 0.7; /* Lekko wyblakłe, żeby nie odwracały uwagi od przycisków START */
}

.footer-btn svg {
    width: 28px; /* Troszkę mniejsze, dyskretniejsze */
    height: 28px;
    stroke: currentColor;
    stroke-width: 2;
}

.footer-btn span {
    font-family: 'Special Elite', monospace;
    font-size: 1rem; /* Mniejszy, techniczny font */
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 3px;
}

.footer-btn:hover {
    transform: scale(1.1);
    opacity: 1; /* Pełna widoczność po najechaniu */
    color: #c92a2a !important; /* Czerwony */
}

/* --- MODAL ZASAD GRY (TUTORIAL) --- */
#rules-modal {
    z-index: 10000; /* Musi być nad menu */
}

.rules-content {
    text-align: left;
    font-family: 'Special Elite', monospace;
    font-size: 0.95rem;
    line-height: 1.5;
}

.rules-list {
    list-style: none;
    padding: 0;
    margin: 15px 0;
}

.rules-list li {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.rules-icon {
    font-size: 1.4rem;
    min-width: 30px;
    text-align: center;
}

/* --- SPECJALNE TŁO DLA OKIEN Z MENU (ZASADY I PRYWATNOŚĆ) --- */

/* Selektor wybiera .modal-content TYLKO wewnątrz tych dwóch konkretnych okien */
#rules-modal .modal-content,
#privacy-modal .modal-content {
    /* Ustawienie Twojej nowej grafiki */
    background-image: url('kartka.jpg') !important;
    background-color: transparent !important; /* Na wypadek gdyby obrazek był PNG */
    /* Zresetowanie trybu mieszania, żeby kolory kartki były naturalne */
    background-blend-mode: normal !important; 
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    
    /* Stylizacja "kartki papieru" */
    border: none !important; /* Usuwamy grubą ramkę z teczki */
    border-radius: 2px; /* Lekko zagięte rogi */
    /* Delikatniejszy cień niż przy teczce */
    box-shadow: 0 15px 30px rgba(0,0,0,0.4) !important; 
    
    /* Opcjonalnie: lekki obrót dla realizmu */
    transform: rotate(-1deg); 
    max-width: 600px; /* Trochę szersze dla czytelności */
}

/* Dopasowanie przycisku zamknięcia na kartce */
#rules-modal .modal-buttons button,
#privacy-modal .modal-buttons button {
     background-color: transparent; /* Przezroczyste tło przycisku */
     border: 2px solid #555; /* Cieńsza, szara ramka */
     color: #222 !important;
     box-shadow: none;
}
#rules-modal .modal-buttons button:hover,
#privacy-modal .modal-buttons button:hover {
     background-color: rgba(0,0,0,0.05);
     border-color: #000;
}

/* --- NAPRAWA WARSTW (Żeby okna były nad menu) --- */
#rules-modal,
#privacy-modal {
    z-index: 20000 !important; /* Musi być więcej niż 9999 (Menu) */
}

/* --- UKŁAD DWUKOLUMNOWY W ZASADACH --- */

.rules-columns-wrapper {
    display: flex;
    gap: 30px; /* Odstęp między lewą a prawą kolumną */
    align-items: flex-start; /* Wyrównaj do góry */
}

.rules-col {
    flex: 1; /* Obie kolumny zajmują po równo miejsca */
}

/* Aktualizacja siatki ikon dla węższych kolumn */
.rules-legend-grid {
    display: grid;
    /* Dwie kolumny wewnątrz każdej sekcji (np. ikona+tekst | ikona+tekst) */
    grid-template-columns: repeat(2, 1fr); 
    gap: 8px 2px; /* Odstępy: pionowy 8px, poziomy 2px */
}

/* W przypadku bardzo małych ekranów (telefony) robimy jedną kolumnę */
@media (max-width: 500px) {
    .rules-columns-wrapper {
        flex-direction: column; /* Jeden pod drugim */
        gap: 20px;
    }
}

/* --- ZMIANA PRZYCISKÓW W ZASADACH I PRYWATNOŚCI NA TEKST --- */

/* Selektor celuje tylko w przyciski wewnątrz tych dwóch modali */
#rules-modal .modal-buttons button,
#stats-modal .modal-buttons button,
#privacy-modal .modal-buttons button,
#btn-close-case,
#btn-close-contact {
    /* 1. Usunięcie wyglądu przycisku (ramki, tła, cienia) */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    
    /* 2. Styl czcionki maszynowej */
    font-family: 'Special Elite', monospace !important;
    font-size: 1.3rem; /* Wyraźny rozmiar */
    font-weight: bold;
    color: #000 !important; /* Czarny tusz */
    
    /* 3. Podkreślenie (wygląda jak link w dokumencie) */
    text-decoration: underline;
    text-underline-offset: 6px; /* Odsunięcie kreski od liter */
    
    cursor: pointer;
    padding: 10px; /* Margines na kliknięcie */
    transition: all 0.2s ease;
}

/* Efekt po najechaniu myszką */
#rules-modal .modal-buttons button:hover,
#privacy-modal .modal-buttons button:hover,
#btn-close-case:hover,
#btn-close-contact:hover {
    color: #c92a2a !important; /* Zmienia się na czerwony */
    transform: scale(1.1) rotate(-2deg); /* Lekko się powiększa i krzywi */
    background: transparent !important;
    border: none !important;
}

#menu-timer-container {
    margin-top: 10px;
    /* padding: 5px;  <-- USUŃ TO */
    /* background: rgba(0,0,0,0.1); <-- USUŃ TO (to jest to szare tło) */
    /* border-radius: 5px; <-- USUŃ TO */
}

/* --- Dodaj to do style.css --- */

/* Klasa blokująca kartę w menu (gdy już zagrano) */
.card-disabled {
    pointer-events: none;      /* Wyłącza klikanie */
    opacity: 0.6;              /* Półprzezroczystość */
    filter: grayscale(1);      /* Czarno-biały efekt */
    cursor: default;
    border: 1px dashed #555;   /* Przerywana ramka oznaczająca "zamknięte" */
}

/* Ukrywanie elementów */
.hidden {
    display: none !important;
}

/* --- WKLEJ TO NA KOŃCU PLIKU STYLE.CSS --- */

/* Przesunięcie optyczne całej zawartości przycisków (tytuł, opis, zegar) */
.menu-btn-flex, 
#menu-daily-desc, 
#menu-random-desc, 
#menu-timer-container {
    /* Przesuwamy wszystko o 15px w lewo */
    transform: translateX(-23px); 
}

/* --- NAPRAWA MODALI I TŁO PAPIEROWE --- */

/* 1. To sprawia, że okna są ZAWSZE na wierzchu (nad menu) */
/* Wymuszenie, żeby każde okno (Stats, Rules itp.) było NAD menu */
.modal {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Przyciemnienie tła gry i menu */
    justify-content: center;
    align-items: center;
    /* Numer musi być większy niż ten w menu-overlay */
    z-index: 10000 !important; 
}

/* Styl dla samej kartki wewnątrz modala */
.paper-modal {
    background-image: url('kartka.jpg') !important;
    background-size: cover;
    background-position: center;
    background-color: #f4e4bc; /* Kolor zapasowy */
    border: none;
    box-shadow: 5px 5px 25px rgba(0,0,0,0.5);
    padding: 30px;
    /* Usunięcie domyślnego tła, jeśli jakieś było */
    background-repeat: no-repeat;
}

.paper-modal {
    background-image: url('kartka.jpg') !important;
    background-size: cover !important;
    color: #000 !important;
}

/* --- NAPRAWA OKNA KOŃCOWEGO (ZDJĘCIE MORDERCY) --- */

/* Wymuszenie tła kartki papieru zamiast teczki */
#end-modal .modal-content {
    background-image: url('kartka.jpg') !important;
    background-size: cover !important;
    background-color: #f4e4bc !important; /* Kolor zapasowy */
    background-blend-mode: normal !important; /* Wyłączenie mieszania kolorów z teczki */
    
    border: none !important; /* Usunięcie grubej ramki teczki */
    box-shadow: 0 15px 30px rgba(0,0,0,0.5) !important; /* Cień kartki */
    border-radius: 2px !important;
    
    color: #000 !important; /* Tekst na pewno czarny */
}

/* Dostosowanie nagłówka "CASE SOLVED" na kartce */
#end-modal #modal-title {
    margin-top: 0;
    text-shadow: none; /* Usunięcie cienia tekstu z teczki */
    transform: rotate(-1deg);
}

/* --- NAPRAWA OKNA KOŃCOWEGO (ZDJĘCIE MORDERCY) --- */

/* Wymuszenie tła kartki papieru zamiast teczki */
#end-modal .modal-content {
    background-image: url('kartka.jpg') !important;
    background-size: cover !important;
    background-color: #f4e4bc !important; /* Kolor zapasowy */
    background-blend-mode: normal !important; /* Wyłączenie mieszania kolorów z teczki */
    
    border: none !important; /* Usunięcie grubej ramki teczki */
    box-shadow: 0 15px 30px rgba(0,0,0,0.5) !important; /* Cień kartki */
    border-radius: 2px !important;
    
    color: #000 !important; /* Tekst na pewno czarny */
}

/* Dostosowanie nagłówka "CASE SOLVED" na kartce */
#end-modal #modal-title {
    margin-top: 0;
    text-shadow: none; /* Usunięcie cienia tekstu z teczki */
    transform: rotate(-1deg);
}

/* --- STYLIZACJA PRZYCISKU "CLOSE CASE" (JAK W ZASADACH) --- */

#btn-close-case {
    /* 1. Wygląd podstawowy (czysty tekst) */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    
    font-family: 'Special Elite', monospace !important;
    font-size: 1.1rem !important;
    font-weight: bold;
    color: #000 !important; /* Czarny tusz */
    
    text-decoration: underline;
    text-underline-offset: 5px;
    
    cursor: pointer;
    padding: 10px;
    width: auto !important;
    transition: all 0.2s ease;
}

/* 2. EFEKT PO NAJECHANIU (To o co prosiłeś!) */
#btn-close-case:hover {
    color: #c92a2a !important;        /* Zmienia kolor na czerwony */
    transform: scale(1.1) rotate(-2deg); /* Powiększa się i krzywi */
    background: transparent !important;
    border: none !important;
}

/* 1. Naprawa Modali (Kontakt, Zasady, Statystyki) */
.modal-content {
    max-height: 90vh !important; /* Maks 90% wysokości ekranu */
    overflow-y: auto !important; /* Jak tekstu jest dużo -> przewijaj w środku */
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    
    /* Upewnij się, że są wyśrodkowane i nie dotykają krawędzi */
    position: relative;
    top: auto;
    left: auto;
    transform: none; 
}

/* ============================================================
   RESPONSYWNOŚĆ (MOBILE FIX) - WKLEJ NA SAMYM DOLE CSS
   ============================================================ */

@media (max-width: 768px) {

    /* 1. ZMNIEJSZAMY MARGINESY GŁÓWNEJ KARTKI */
    .main-article {
        width: 98%;      /* Prawie cała szerokość ekranu */
        height: 98vh;    /* Prawie cała wysokość */
        padding: 60px 10px 10px 10px; /* Zmniejszamy boki z 50px na 10px! */
        background-size: 100% 100%;   /* Rozciągnij papier */
    }

    /* 2. MNIEJSZY TYTUŁ GŁÓWNY */
    .main-title {
        font-size: 3rem; /* Zamiast gigantycznego clamp */
    }
    
    .meta-bar {
        font-size: 0.9rem; /* Mniejsze info o dacie */
        padding: 5px;
    }

    /* 3. NAPRAWA TABELI (NAJWAŻNIEJSZE) */
    .header-row {
        font-size: 0.55rem; /* Bardzo mały tekst nagłówków, żeby weszło w linię */
        letter-spacing: 0;  /* Usuwamy odstępy między literami */
        padding: 5px 0;
    }
    
    .tile {
        height: 40px;       /* Niższe kafelki */
        font-size: 1.1rem;  /* Mniejsze ikonki w środku */
    }
    
    /* Ukrywamy strzałki (góra/dół) jeśli są osobno, lub zmniejszamy je */
    .tile i.arrow, .arrow {
        font-size: 0.9rem !important; 
        margin-left: 2px;
    }

    /* 4. MNIEJSZY INPUT I PRZYCISK */
    .search-box {
        flex-direction: column; /* Na telefonie przycisk pod inputem */
        gap: 10px;
        align-items: center;
    }
    
    input {
        font-size: 1.4rem;
        text-align: center;
    }
    
    button {
        width: 100%;       /* Przycisk na całą szerokość */
        margin-left: 0;
        padding: 12px 0;
    }

    /* 5. NAPRAWA MENU */
    .menu-sheet {
        width: 98%;
        height: 95vh;
        padding: 60px 20px; /* Mniejsze marginesy w menu */
    }

    .menu-title {
        font-size: 2.2rem;
        margin-bottom: 20px;
    }
    
    .menu-btn {
        font-size: 1.2rem;
        padding: 12px 0;
    }
    
    /* Przesunięcie optyczne w menu (resetujemy to co było na desktopie) */
    .menu-btn-flex, 
    #menu-daily-desc, 
    #menu-random-desc, 
    #menu-timer-container {
        transform: none; /* Reset przesunięcia */
    }

    /* 6. NAPRAWA MODALI (ZASADY, ENDGAME) */
    .modal-content {
        width: 95%;        /* Szersze okno na telefonie */
        max-width: none;   /* Usuwamy limit szerokości */
        padding: 20px;     /* Mniej miejsca w środku */
        margin-top: 10px !important;
    }

    /* Zdjęcie mordercy */
    .mugshot-container {
        width: 140px;      /* Mniejsze zdjęcie */
        height: 180px;
    }
    
    #modal-title {
        font-size: 2.5rem; /* Mniejszy napis CASE SOLVED */
    }

    /* 7. CZCIONKI W ZASADACH */
    .rules-content {
        font-size: 0.8rem; /* Mniejszy tekst zasad */
    }
    
    .rules-columns-wrapper {
        flex-direction: column; /* Kolumny jedna pod drugą */
        gap: 15px;
    }
}

/* FIX DLA BARDZO MAŁYCH EKRANÓW (iPhone SE, stare Androidy) */
@media (max-width: 380px) {
    .header-row span {
        font-size: 0.45rem; /* Mikro czcionka nagłówków */
        word-wrap: break-word; /* Łamanie słów jeśli trzeba */
    }
    .tile {
        font-size: 0.9rem; /* Jeszcze mniejsze ikony */
    }
}

/* =========================================
   STYL NOWYCH PODPOWIEDZI (POLICE MEMO)
   ========================================= */

#hint-container {
    width: 95%;
    max-width: 450px;       /* Taka sama szerokość jak modal */
    margin: 0 auto 20px auto;
    position: relative;
    transform: rotate(-1deg);
    z-index: 50;
    transition: all 0.5s ease;
    
    /* Domyślnie ukryte, ale zachowuje miejsce przy animacji */
    display: none; 
}

/* Klasa pokazująca notatkę (nadpisuje display: none z .hidden) */
#hint-container.hint-visible {
    display: block !important;
    animation: slide-in-memo 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.memo-content {
    /* --- TŁO: ZAMIANA KOLORU NA ZDJĘCIE --- */
    background-image: url('kartka.jpg');
    background-size: cover;       /* Żeby zdjęcie wypełniło całą notatkę */
    background-position: center;  /* Wyśrodkowanie */
    background-repeat: no-repeat;
    
    /* Zostawiamy ramki, żeby notatka miała kształt */
    border: 1px solid rgba(0,0,0,0.3); /* Delikatna ramka dookoła */
    
    padding: 15px 20px 15px 25px;
    box-shadow: 3px 5px 10px rgba(0,0,0,0.4); /* Nieco mocniejszy cień */
    
    font-family: 'Special Elite', monospace;
    color: #111; /* Ciemny tekst, żeby był czytelny na kartce */
    position: relative;
    text-align: left;
}

.memo-header {
    font-family: 'Anton', sans-serif;
    font-size: 0.9rem;
    color: #c92a2a;
    letter-spacing: 1px;
    margin-bottom: 5px;
    text-transform: uppercase;
    opacity: 0.8;
}

#hint-text {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.4;
    font-weight: bold;
}

/* Ozdobna pieczątka w tle */
.memo-stamp {
    position: absolute;
    bottom: 5px;
    right: 10px;
    font-size: 0.7rem;
    color: #c92a2a;
    border: 1px solid #c92a2a;
    padding: 2px 5px;
    transform: rotate(-10deg);
    opacity: 0.5;
    pointer-events: none;
    font-weight: bold;
}

/* Spinacz biurowy */
.paper-clip {
    position: absolute;
    top: -12px;
    left: 20px;
    width: 12px;
    height: 35px;
    border-radius: 10px;
    border: 3px solid #444;
    z-index: 60;
    box-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}

/* Animacja wjazdu (spada z góry) */
@keyframes slide-in-memo {
    0% { 
        opacity: 0; 
        transform: translateY(-20px) rotate(2deg); 
    }
    100% { 
        opacity: 1; 
        transform: translateY(0) rotate(-1deg); 
    }
}

/* Fix dla małych telefonów */
@media (max-width: 400px) {
    #hint-text { font-size: 0.9rem; }
    .memo-content { padding: 10px 15px; }
}

/* ============================================================
   FIX DLA EKRANÓW FULL HD (1920x1080) I LAPTOPÓW
   (Gdy ekran jest niższy niż 900px w pionie)
   ============================================================ */

@media (max-height: 900px) {

    /* 1. Zmniejszamy marginesy wewnętrzne kartki */
    .menu-sheet, .main-article {
        padding: 30px 20px !important; /* Było 80px - to za dużo na zwykły ekran! */
        height: 96vh !important;       /* Wykorzystujemy prawie całą wysokość */
        max-width: 600px;              /* Troszkę węższa kartka, żeby zachować proporcje */
    }

    /* 2. Zmniejszamy Logo */
    .logo-img {
        max-height: 100px !important; /* Było 150px */
        margin-bottom: 10px;
    }

    /* 3. Mniejszy nagłówek "Wybierz sprawę" */
    #menu-header {
        font-size: 1rem !important;
        margin-bottom: 15px !important; /* Mniejszy odstęp pod napisem */
    }

    /* 4. Mniejsze przyciski w Menu */
    .menu-btn {
        padding: 8px 0 !important; /* Cieńsze przyciski */
        margin-bottom: 10px !important;
    }

    .menu-btn-flex svg {
        width: 24px; height: 24px; /* Mniejsze ikonki w przyciskach */
    }

    #menu-daily-title, #menu-random-title {
        font-size: 1.4rem !important; /* Mniejszy tekst w przycisku */
    }

    #menu-daily-desc, #menu-random-desc {
        font-size: 0.8rem !important;
        margin-top: 2px !important;
    }

    /* 5. Pieczątka TOP SECRET */
    .top-secret-stamp {
        font-size: 1.2rem;
        padding: 5px 15px;
        margin-bottom: 15px;
    }

    /* 6. Ściśnięcie stopki z ikonami (Stats, Rules, etc.) */
    .menu-footer {
        margin-top: 15px !important; /* Było 50px */
        padding-top: 5px;
        gap: 15px; /* Mniejsze odstępy między ikonami */
    }

    .footer-btn svg {
        width: 22px; height: 22px;
    }

    .footer-btn span {
        font-size: 0.7rem !important;
    }
    
    /* 7. Przycisk kawy wyżej */
    div[style*="margin-top: -60px"] {
        margin-top: -30px !important;
    }
    
    /* 8. Obrazek stempla w tle */
    img[src="top_secret.png"] {
        width: 150px !important; /* Mniejszy stempel */
        bottom: 80px !important;
    }
}

/* ============================================================
   UNIWERSALNA POPRAWKA DLA KARTKI (Bezpiecznik)
   ============================================================ */
/* To sprawia, że treść nigdy nie wyjedzie poza kartkę, 
   tylko ewentualnie pojawi się przewijanie wewnątrz, jeśli jest bardzo ciasno */
.menu-sheet {
    overflow-y: auto; 
    overflow-x: hidden;
    /* Ukrywamy pasek przewijania dla estetyki */
    scrollbar-width: none; 
    -ms-overflow-style: none;
}
.menu-sheet::-webkit-scrollbar { 
    display: none; 
}
/* ============================================================
   ULTIMATE MOBILE FIX (Dla telefonów i wąskich okien)
   Wklej to na samym dole style.css
   ============================================================ */

@media (max-width: 768px) {

    /* 1. KARTKA PAPIERU NA CAŁY EKRAN */
    .main-article, .menu-sheet {
        width: 100% !important;
        height: 100vh !important; /* Na telefonie kartka ma być na cały ekran */
        max-width: none !important;
        margin: 0 !important;
        border-radius: 0 !important;
        
        /* Bardzo małe marginesy wewnątrz, żeby zmieścić tabelę */
        padding: 60px 10px 10px 10px !important; 
        
        /* Tło musi się rozciągnąć */
        background-size: cover !important; 
    }

    /* 2. MNIEJSZE LOGO */
    .logo-img {
        max-height: 80px !important; /* Dużo mniejsze logo */
        margin-bottom: 5px !important;
    }

    /* 3. KOMPAKTOWY NAGŁÓWEK TABELI */
    .header-row {
        font-size: 0.6rem !important; /* Mikro czcionka nagłówków */
        letter-spacing: 0px !important;
        padding: 5px 0 !important;
    }
    .header-row span {
        word-break: break-word; /* Złamanie słowa jeśli za długie */
        line-height: 1.1;
    }

    /* 4. MNIEJSZE KAFELKI (TILES) */
    .tile {
        height: 40px !important; /* Niższe wiersze */
        font-size: 1rem !important; /* Mniejsze ikony */
    }
    .tile i.arrow {
        font-size: 0.8rem !important; /* Malutkie strzałki */
    }

    /* 5. INPUT I PRZYCISK (Pionowo zamiast poziomo) */
    .search-box {
        flex-direction: column !important; /* Jeden pod drugim */
        gap: 8px !important;
        margin-bottom: 15px !important;
    }

    #guess-input {
        font-size: 1.2rem !important;
        text-align: center;
        padding: 5px !important;
    }

    #guess-btn {
        width: 100% !important; /* Przycisk na całą szerokość */
        margin-left: 0 !important;
        padding: 10px !important;
        font-size: 1rem !important;
    }

    /* 6. UKRYCIE NADMIARU (SCROLL) */
    /* Pozwalamy przewijać środek, jeśli się nie mieści */
    .game-content {
        padding-bottom: 50px !important; /* Miejsce na dole, żeby nie ucięło ostatniego wiersza */
    }

    /* 7. NAPRAWA MENU */
    .menu-content {
        zoom: 0.8; /* Pomniejszamy całe menu o 20% */
    }
    
    /* Przycisk kawy wyżej w menu */
    div[style*="margin-top: -60px"] {
        margin-top: -20px !important;
    }
    
    /* Pieczątka w menu */
    img[alt="Top Secret Stamp"] {
        width: 150px !important;
        bottom: 20px !important;
    }
    
    /* 8. NAPRAWA PODPOWIEDZI (NOTATKI) */
    #hint-container {
        width: 100% !important;
        margin-bottom: 10px !important;
    }
    .memo-content {
        padding: 10px !important;
    }
    #hint-text {
        font-size: 0.9rem !important;
    }
}

/* FIX DLA BARDZO MAŁYCH EKRANÓW (iPhone SE, stare Androidy) */
@media (max-width: 380px) {
    .header-row { font-size: 0.5rem !important; }
    .tile { font-size: 0.9rem !important; }
    .main-article { padding-top: 40px !important; } /* Logo prawie przy krawędzi */
}