html {
   height: 100%;
   width: 100%;
}

body {
 background-color: #333;
  margin: 0;
  min-height: 100vh;
  height: 100%;
  width: 100%;
  font-family: "Kanit", sans-serif;
     overflow: hidden;
   position: absolute;
}

/* --- HLAVNÍ KONTEJNER (MENU) --- */
#app-container {
   height: 100%;
   width: 100%;
   
   
   color: #fff;
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

/* Styl pro rohový text */
.corner-text {
   position: absolute;
   font-size: 14px;
   color: #888;
   padding: 15px;
}
.top-left { top: 0; left: 0; }
.bottom-left { bottom: 0; left: 0; }
.bottom-right { bottom: 0; right: 0; }


/* --- Styl pro menu a tlačítka --- */
.menu-center { 
   display:flex;
   flex-direction:column;
   align-items: center;
   justify-content: center;
   gap: 24px;
   padding: 185px;
}

/* --- NADPIS (TITLE) --- */
.app-title-image {
   max-width: 80%;
   height: auto;
   margin-bottom: 50px;
   /* Jemné pulzování nadpisu, aby menu nepůsobilo staticky */
   filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
   
   animation: titleFloat 4s ease-in-out infinite;
}

@keyframes titleFloat {
    0%, 100% { transform: translateY(0); filter: brightness(1); }
    50% { transform: translateY(-10px); filter: brightness(1.1); }
}

/* --- TLAČÍTKA (PLAY, GALLERY, SETTINGS) --- */
#play-btn, #gallery-btn, #settings-btn {
   width: 300px; 
   height: auto; 
   margin: 10px 0; 
   cursor: pointer; 
   /* Změna transition na 0.3s pro plynulost, přidal se filter */
   transition: transform 0.3s ease, filter 0.3s ease;
   /* Základní stín, aby tlačítka vystoupla z pozadí */
   filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4));
}

/* --- EFEKT ROZSVÍCENÍ PŘI HOVERU --- */
#play-btn:hover, #gallery-btn:hover, #settings-btn:hover {
   transform: scale(1.08); /* Trochu výraznější zvětšení */
   
   /* ROZSVÍCENÍ: Zvýší jas a přidá barevnou záři kolem PNG */
   /* Zlatavá záře (můžeš změnit barvu podle stylu tvého loga) */
   filter: brightness(1.2) drop-shadow(0 0 15px rgba(255, 215, 0, 0.15));
}

#play-btn { margin-top: -30px; }
#gallery-btn { margin-top: -5px; }


/* --- OBRAZOVKY APLIKACE (Herní, Galerie, Nastavení) --- */
.app-screen {
   aspect-ratio: 16/9;
   width: auto;   /* ensures the browser can compute height */
   height: 100%;
   max-height: 100%;
   max-width: 100%;

   /*background-color: aqua;*/
   background-image: url('drevo_bg.png');
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
   /* PŘESNĚ STEJNÉ ŠKÁLOVÁNÍ JAKO app-container */
   color: #fff;
   /* Změna zobrazení: app-screen je v základu skrytý. */
   display: none; 
}


#game-screen-1 {
   /* background-color: #000033;*/
    background-image: url('mapa_bez_lodi_nove.png');
    background-size: contain; /* keeps full image visible while preserving aspect ratio */
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16/9;
}


/* Pouze aktivní obrazovky se zobrazí a mají flex layout */
.app-screen.active {
   display:flex; 
   justify-content: center;
   align-items: center;
}

/* --- STYLY PRO NAVIGAČNÍ ŠIPKY (VŠECHNY) --- */

/* Základní rozměry a chování pro všechny šipky, které by měly používat tuto třídu */
.navigation-arrow {
   position: absolute;
   width: 80px; /* JEDNOTNÁ KONTROLOVANÁ VELIKOST */
   height: auto;
   cursor: pointer;
   transition: transform 0.1s;
}


/* 1. TLAČÍTKO ZPĚT DO MENU (#back-to-menu-btn) - Levý Horní Roh */
#back-to-menu-btn, #prev-screen-btn  {
   bottom: 70px;    /* 50px odshora */
   left: 150px;   /* 50px zleva */
   /* Zajištění ZRCADLENÍ pro směr doleva v ZÁKLADNÍM STAVU */
   transform: none
}
#back-to-menu-btn:hover {
   /* ZACHOVÁNÍ OTOČENÍ + APLIKACE ZVĚTŠENÍ */
   transform: scale(1.1); 
}


/* 2. TLAČÍTKO DÁL (#next-screen-btn) - Pravý Dolní Roh */
/* DŮLEŽITÉ: Původní styly zrušeny a nahrazeny těmito přesnými styly */
#next-screen-btn {
   position: absolute; /* Musí být definováno, pokud nepoužívá třídu .navigation-arrow v HTML */
   bottom: 70px; 
   right: 150px; 
   /* Shodná velikost jako ostatní šipky */
   width: 80px; 
   height: auto;
   
   cursor: pointer;
   transition: transform 0.1s;
}
#next-screen-btn:hover {
   /* Pouze zvětšení */
   transform: scale(1.1); 
}


#prev-screen-btn:hover {
   /* Pouze zvětšení */
   transform: scale(1.1); 
}

/* Specific styles for game screen 2: use the 1920x1080 background and keep its proportions */
#game-screen-2 {
   /* background-color: #000033;*/
    background-image: url('drevo_bg.png');
    background-size: contain; /* keeps full image visible while preserving aspect ratio */
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16/9;
}

#chest-container {
    cursor: pointer;
    transition: transform 0.3s ease;
}

#chest-img {
    width: 700px; /* Uprav velikost podle potřeby */
    height: auto;
   
    transition: transform 0.2s ease;
}

/* Jemné pulzování, aby hráč věděl, že má kliknout */
#chest-img:hover {
    transform: scale(1.05);
}

/* Efekt při otevření (mírné nadskočení) */
#chest-img.opened




/* Puzzle screen styling - match game screen 2 */
#puzzle-screen-1 {
    background-image: url('pozadi_kniha_empty.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16/9;
}


/* Puzzle screen styling - match game screen 3 */
#puzzle-screen-2 {
    background-image: url('drevo_bg.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16/9;
}

#puzzle-screen-3 {
    background-image: url('drevo_bg.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16/9;
}

/* --- Různé utility --- */
.app-container.hidden { display: none !important; }

/* Skrytí původních textových tlačítek, pokud by se objevily (NAPŘ. na game-screen-2) */
.return-btn {
  display: none !important; 
}

.game-text-box {
    position: absolute; /* Změna na absolute pro přesnější polohování */
    z-index: 20; 
    width: 20%;
    height: auto; /* Výška se přizpůsobí obsahu (obrázku) */
}

#game-screen-1 .game-text-box {
    top: 20%;      /* Uprav podle potřeby */
    left: 15%;     /* Uprav podle potřeby */
}

#game-screen-1 #puzzle-trigger {
    width: 200px;  /* Velikost textu 1 */
}

/* --- POZICE NA DRUHÉ STRANĚ (game2 / text2) --- */
#game-screen-3 .game-text-box {
    top: 20%;      /* Pozice pro text2 */
    left: 32%;     /* Pozice pro text2 */
}

#game-screen-3 #puzzle-trigger {
    width: 200px;  /* Velikost textu 2 - může být jiná */
}


#game-screen-7 .game-text-box {
    top: 20%;      /* Pozice pro text2 */
    left: 49%;     /* Pozice pro text2 */
}


#menu{
   background-image: url('pozadi_nove.png');
}

#bg{
   width: 100%;
   height: 100%;
   overflow: hidden;
}

#puzzle-trigger {
    cursor: pointer;
    display: block; /* Aby se s ním lépe pracovalo */
    transition: transform 0.2s ease;
    text-decoration: none !important; /* Odstraní případné podtržení */
    width: 100px; 
    height: auto;
}

#puzzle-trigger:hover {
    transform: scale(1.05); /* Obrázek se při najetí hezky zvětší */
}

/* --- PUZZLE STYLES --- */
/* --- PUZZLE STYLES (Škálovatelné) --- */
:root {
    /* ZDE MĚŇTE VELIKOST: Jednoho dílku */
    /* Pro 3x3 bude celková velikost 3 * 150px = 450px */
    --tile-size: 200px; 
}

.puzzle-wrapper { 
    /* Změňte max-width, aby nebrzdil zvětšování */
    max-width: 90%; 
    margin: 28px auto; 
    text-align: center; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Místo height: 100% použij min-height nebo pevnou pozici */
    min-height: 100vh; 

}


.puzzle-board { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    grid-template-rows: repeat(3, var(--tile-size));
    gap: 0; 
    justify-content: center; 
    /* Automatický výpočet šířky desky */
    width: calc(var(--tile-size) * 3); 
    height: calc(var(--tile-size) * 3); /* Přesná výška */
    margin: 18px auto; 
    perspective: 1000px; 
}

.tile { 
    position: relative; 
    /* Použití proměnné pro rozměry */
    width: var(--tile-size); 
    height: var(--tile-size); 
    background-size: cover;
    background-repeat: no-repeat; 
    border-radius: 0; 
    cursor: pointer; 
    user-select: none; 
    transition: transform 260ms ease; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border: none;
}

.controls { 
    margin-top: 14px; 
    display: flex; 
    gap: 12px; 
    justify-content: center; 
    align-items: center; 
}

.controls button {
    padding: 15px 20px;
    background-color: #532213;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 700;
    transition: opacity 260ms ease;
}

.controls button:hover:not([disabled]) {
    opacity: 0.8;
}

#continue-btn[disabled] { 
    opacity: 0.5; 
    cursor: not-allowed; 
}


.message { 
    margin-top: 10px; 
    font-weight: 700; 
    color: #7a210b; 
}

.note { 
    font-size: 13px; 
    color: #333; 
    margin-top: 6px; 
}


#ship-gif {
    position: absolute; /* Umožní volný pohyb po mapě */
    width: 20%;         /* Velikost lodě (upravte podle potřeby) */
    height: auto;
    /* Pozice na mapě - upravte čísla, aby loď "stála" ve vodě */
    top: 12%;           
    left: 57%;
    
    /* Zajištění, aby loď byla pod textem (z-index 10) */
    z-index: 5;         
    
    /* Aby loď nebránila klikání na text pod ní, pokud se překrývají */
    pointer-events: none;
    }


    #shuffle-btn {
    /* 1. Odstraníme barvu a rámeček */
    background-color: transparent !important;
    border: none !important;
    
    /* 2. Vložíme tvou ilustraci */
    background-image: url('shuffle_btn_2.png'); /* DOPLŇ SVŮJ NÁZEV SOUBORU */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 180px; 
    height: 60px;

    /* 4. Schováme původní text, aby tam nepřekážel */
    color: transparent;
    text-indent: -9999px;
    
    /* 5. Vypneme stíny nebo paddingy, které by to mohly rozhodit */
    padding: 0;
    box-shadow: none;
}

/* Aby se i ilustrace při najetí myší hezky zvětšila */
#shuffle-btn:hover {
    transform: scale(1.05);
    background-color: transparent !important; /* Pojistka proti změně barvy */
}

#continue-btn {
    /* 1. Odstranění původního vzhledu tlačítka */
    background-color: transparent !important;
    border: none !important;
    padding: 0;
    box-shadow: none;
    cursor: pointer;

    /* 2. Vložení vaší ilustrace */
    background-image: url('continue_btn_2.png'); /* <--- SEM DOPLŇTE NÁZEV SOUBORU */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    /* 3. Rozměry tlačítka - upravte podle své ilustrace */
    width: 180px; 
    height: 60px;

    /* 4. Skrytí textu uvnitř tlačítka */
    color: transparent;
    text-indent: -9999px;
    overflow: hidden;

    /* 5. Pozicování - pokud ho chcete mít na konkrétním místě */
    /* position: absolute; */
    /* right: 10%; */
    /* bottom: 15%; */

    /* Plynulý přechod mezi stavy */
    transition: transform 0.2s ease, opacity 0.5s ease, filter 0.5s ease;
}

/* STAV: ZAMKNUTO (Puzzle není hotové) */
#continue-btn[disabled] {
    opacity: 0.6;            /* Malá průhlednost (šipka je sotva vidět) */
       /* Šipka bude černobílá */
    cursor: not-allowed;     /* Změna kurzoru na přeškrtnuté kolečko */
    pointer-events: none;    /* Na tlačítko nelze kliknout */
}

/* STAV: ODEMKNUTO (Puzzle je složené) */
#continue-btn:not([disabled]) {
    opacity: 1;              /* Plná viditelnost */
    filter: grayscale(0);    /* Vrátí se barvy */
    animation: bounce 2s infinite; /* Spustí se jemné pohupování */
}

/* Efekt při najetí myší na odemknuté tlačítko */
#continue-btn:not([disabled]):hover {
    transform: scale(1.1);   /* Mírné zvětšení při najetí */
}

/* --- DEFINICE ANIMACE POHUPOVÁNÍ --- */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0); /* Výchozí pozice */
    }
    50% {
        transform: translateY(-8px); /* Posun o 8px nahoru */
    }
}



    #game-screen-3 {
   /* background-color: #000033;*/
    background-image: url('pozadi_kniha_empty.png');
    background-size: contain; /* keeps full image visible while preserving aspect ratio */
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16/9;
}


#ship2-gif {
    position: absolute; /* Umožní volný pohyb po mapě */
    width: 80%;         /* Velikost lodě (upravte podle potřeby) */
    height: auto;
    /* Pozice na mapě - upravte čísla, aby loď "stála" ve vodě */
    top: 4%;           
    left: 11%;
    
    /* Zajištění, aby loď byla pod textem (z-index 10) */
    z-index: 5;         
    
    /* Aby loď nebránila klikání na text pod ní, pokud se překrývají */
    pointer-events: none;
    }


    #game-screen-treasure, #game-screen-4 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* Ujisti se, že kontejner s truhlou je uprostřed */
#chest-container-2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10; /* Aby byla truhla nahoře */
    text-align: center;
}

/* Oprava, aby truhla byla klikatelná */
#chest-img-2 {
    cursor: pointer;
    z-index: 11;
    position: relative;
}

   #game-screen-5 {
   /* background-color: #000033;*/
    background-image: url('pozadi_kniha_empty.png');
    background-size: contain; /* keeps full image visible while preserving aspect ratio */
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16/9;
}

#game-screen-5 .game-text-box {
    top: 14%;      /* Uprav podle potřeby */
    left: 26%;     /* Uprav podle potřeby */
}


    #game-screen-6 {
   /* background-color: #000033;*/
    background-image: url('drevo_bg.png');
    background-size: contain; /* keeps full image visible while preserving aspect ratio */
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16/9;
}

    #game-screen-7 {
   /* background-color: #000033;*/
    background-image: url('pozadi_kniha_empty.png');
    background-size: contain; /* keeps full image visible while preserving aspect ratio */
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16/9;
}

/* Specific styles for game screen 2: use the 1920x1080 background and keep its proportions */
#game-screen-8 {
   /* background-color: #000033;*/
    background-image: url('drevo_bg.png');
    background-size: contain; /* keeps full image visible while preserving aspect ratio */
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16/9;
}

    #game-screen-9 {
   /* background-color: #000033;*/
    background-image: url('pozadi_kniha_empty.png');
    background-size: contain; /* keeps full image visible while preserving aspect ratio */
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16/9;
}

    #game-screen-10 {
   /* background-color: #000033;*/
    background-image: url('drevo_bg.png');
    background-size: contain; /* keeps full image visible while preserving aspect ratio */
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16/9;
}

    #game-screen-13 {
   /* background-color: #000033;*/
    background-image: url('konec_bg.png');
    background-size: contain; /* keeps full image visible while preserving aspect ratio */
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16/9;
}