/* --- 1. ZÁKLADNÍ NASTAVENÍ --- */
body, html {
    margin: 0;
    padding: 0;
    font-family: 'Roboto';
    background-color: #000;
    color: white;
    overflow-x: hidden; /* Zabrání nechtěnému horizontálnímu scrollu */
}

/* --- 2. DYNAMICKÉ POZADÍ (Hvězdy) --- */
#starsCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; 
    background: radial-gradient(circle at center, #1a1a1a 0%, #000 100%);
    pointer-events: none;
}

/* --- 3. 3D MODEL --- */
model-viewer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1;
    --progress-mask: transparent;
    background: transparent;

    
}

/* --- 4. FIXNÍ LOGO (Vlevo nahoře) --- */
.fixed-corner-logo {
    position: fixed;
    top: 30px;
    left: 40px;
    width: 60px;
    height: auto;
    z-index: 1001;
    pointer-events: auto;
    opacity: 0.8;
    transition: all 0.4s ease;
}

.fixed-corner-logo:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* --- 5. HLAVNÍ NADPIS (Vlevo nahoře) --- */
.main-title {
    position: fixed;
    top: 14%;               /* Stejná výška jako logo */
    left: 9%;             /* Posunuto doprava, aby nadpis nebyl přes logo */
    width: auto;             /* Zrušení 100% šířky */
    text-align: left;        /* Zarovnání textu doleva */
    font-family: 'MedievalSharp', cursive;
    font-size: 3rem;       /* Mírně zmenšeno, aby se to nahoře netlouklo */
    color: #ffffff;
    text-shadow: 0 0 10px rgba(0,0,0,0.8), 2px 2px 5px rgba(0,0,0,1);
    z-index: 1001;           /* Aby byl nad ostatními prvky */
    pointer-events: none;
    letter-spacing: 2px;
    margin: 0;
}

/* --- 6. NAVIGACE S MEČEM (Vpravo nahoře) --- */
.main-nav {
    position: fixed; /* Změněno na fixed, aby zůstala při scrollu */
    top: 30px;
    right: 60px;
    z-index: 1000;
    background: none;
}

.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 45px;
}

.main-nav ul li a {
    font-family: 'MedievalSharp', cursive;
    text-decoration: none;
    color: #ffffff;
    font-size: 1.3rem;
    letter-spacing: 2px;
    position: relative;
    display: inline-block;
    transition: all 0.3s ease;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
}

.main-nav ul li a:hover {
    transform: scale(1.1);
}

/* Podtržení mečem (sword3.png) */
.main-nav ul li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 0;
    height: 15px;
    background-image: url('menu/sword3.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    transition: width 0.5s ease-out;
}

.main-nav ul li a:hover::after {
    width: 100%;
}

/* --- 7. SCROLLOVACÍ OBSAH (Popisky) --- */
.scroll-container {
    position: relative;
    z-index: 2; /* Nad modelem a hvězdami */
}

.step {
    height: 100vh;
    display: flex;
    align-items: center;
    padding: 0 10%;
    pointer-events: none;
    

    
}

.label p {
    font-weight: 100;       /* Tenké písmo */
    line-height: 1.6;      /* Větší rozestup řádků pro lepší čitelnost */
    letter-spacing: 1.5px; /* Jemné rozestupy písmen */
}

.label {
    max-width: 350px;
    background: rgba(0, 0, 0, 0.7);
    padding: 20px;
    border-radius: 20px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease-out;
    pointer-events: all;
    backdrop-filter: blur(5px); /* Moderní efekt skla */
    z-index: 100;
    border: 1px solid rgba(255,255,255,0.2);
}

.left { align-self: center; justify-self: flex-start; }
.right { margin-left: auto; }

/* Třída pro aktivaci popisku skrze JS */
.label.visible {
    opacity: 1;
    transform: translateY(0);
}






/* --- 8. RESPONZIVITA (Vylepšená pro mobily) --- */

@media (max-width: 768px) {
    /* Zmenšíme nadpis, aby nezabíral půl obrazovky */
    .main-title {
        font-size: 1.8rem;
        top: 15px;
        left: 80px; /* Uhne logu */
        width: 60%;
    }

    .fixed-corner-logo {
        top: 15px;
        left: 15px;
        width: 45px;
    }

    /* Navigace na mobilu - skrytá nebo velmi jednoduchá */
    .main-nav {
        top: auto;
        bottom: 20px;
        right: 0;
        left: 0;
        background: rgba(0,0,0,0.8);
        padding: 10px 0;
    }

    .main-nav ul {
        justify-content: center;
        gap: 15px;
    }

    .main-nav ul li a {
        font-size: 0.9rem;
    }

    /* MODEL: Na mobilu ho posuneme trochu nahoru, aby pod ním byl prostor pro text */
    model-viewer {
        height: 60vh; 
        top: 10vh;
    }

    /* ŠTÍTKY: Na mobilu musí být přes celou šířku a dole */
    .step {
        height: 100vh;
        align-items: flex-end; /* Text bude dole pod modelem */
        padding-bottom: 15vh;
    }

    .label {
        max-width: 90%;
        margin: 0 auto !important;
        background: rgba(0, 0, 0, 0.85);
        border: 1px solid rgba(255,255,255,0.2);
        text-align: center; /* Toto vycentruje text i inline prvky (tlačítko) */
        display: flex;      /* Přidáme flexbox pro jistotu */
        flex-direction: column;
        align-items: center; /* Vycentruje vše uvnitř labelu na střed */
    }

    .label h2 {
        font-size: 1.4rem;
        margin-top: 0;
    }

    .label p {
        font-size: 0.9rem;
    }



    /* První sekce bude začínat až po určitém scrollu */
#step1 {
    margin-top: 50vh; /* Posune první popisek o polovinu výšky obrazovky níže */
}
    
.back-button {
        display: inline-block; /* Aby reagoval na centrování v labelu */
        width: auto;           /* Zrušíme 100% šířku, aby nebyl "rozpláclý" */
        min-width: 200px;      /* Dáme mu ale rozumnou velikost pro palec */
        margin: 20px auto 0 auto; /* Automatické marginy zleva a zprava ho vycentrují */
        box-sizing: border-box;
    }
}










/* Centrování posledního štítku */
.central {
    margin: 0 auto;
    text-align: center;
}

/* Styl samotného tlačítka */
.back-button {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 25px;
    background-color: transparent;
    color: #ffffff;
    border: 2px solid #ffffff;
    font-family: 'MedievalSharp', cursive;
    text-decoration: none;
    font-size: 1.1rem;
    border-radius: 5px;
    transition: all 0.3s ease;
    cursor: pointer;
    pointer-events: auto; /* Důležité, aby na něj šlo kliknout */
}

.back-button:hover {
    background-color: #ffffff;
    color: #000000;
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

/* Responzivita pro mobil */
@media (max-width: 768px) {
    .back-button {
        width: 100%; /* Na mobilu bude tlačítko přes celou šířku popisku */
        box-sizing: border-box;
    }
}










/* --- 8. RESPONZIVITA (Optimalizováno pro mobily) --- */
@media (max-width: 768px) {
    /* Nadpis: Menší, aby nezavazel a nefixní (odroluje pryč) */
    .main-title {
        position: absolute; /* Na mobilu raději absolute, aby uvolnil místo modelu */
        font-size: 1.6rem;
        top: 80px;
        left: 5%;
        width: 90%;
        text-align: center;
    }

    .fixed-corner-logo {
        top: 15px;
        left: 15px;
        width: 40px;
    }

   /* --- NAVIGACE: UNIVERZÁLNÍ STYL (Desktop) --- */
.main-nav {
    position: fixed;    /* Drží menu nahoře i při scrollu */
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;       /* Výška lišty na desktopu */
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Položky vpravo */
    padding: 0 60px;    /* Mezera od pravého okraje */
    z-index: 2000;      /* Nad modelem i textem */
    background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, transparent 100%);
    box-sizing: border-box;
    transition: background 0.3s ease;
}

/* Pokud chceš, aby při scrollu pozadí ztmavlo (vyžaduje JS), 
   nebo ho nechej poloprůhledné pořád */
.main-nav:hover {
    background: rgba(0, 0, 0, 0.9);
}

.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 45px;          /* Mezery mezi položkami */
}

.main-nav ul li a {
    font-family: 'MedievalSharp', cursive;
    text-decoration: none;
    color: #ffffff;
    font-size: 1.3rem;
    letter-spacing: 2px;
    position: relative;
    display: inline-block;
    transition: all 0.3s ease;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
}

/* Hover efekt textu */
.main-nav ul li a:hover {
    transform: scale(1.1);
}

/* Obrázkové podtržení (Meč) */
.main-nav ul li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -15px;      /* Pozice meče pod textem */
    width: 0;           /* Začíná schovaný */
    height: 20px;       /* Výška obrázku meče */
    background-image: url('menu/sword3.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    transition: width 0.4s ease-out;
}

.main-nav ul li a:hover::after {
    width: 100%;        /* Meč vyjede při hoveru */
}

/* --- RESPONZIVITA (Tablet: 900px a méně) --- */
@media (max-width: 900px) {
    .main-nav {
        padding: 0 30px;
        height: 70px;
    }
    .main-nav ul {
        gap: 25px;
    }
    .main-nav ul li a {
        font-size: 1.1rem;
    }
}

/* --- RESPONZIVITA (Mobil: 600px a méně) --- */
@media (max-width: 600px) {
    .main-nav {
        height: auto;
        padding: 15px 0;
        background: rgba(0, 0, 0, 0.95); /* Tmavší pozadí pro čitelnost */
        justify-content: center;        /* Vycentrování na mobilu */
        flex-direction: column;
    }

    .main-nav ul {
        flex-direction: row;            /* Položky vedle sebe (pokud jsou krátké) */
        gap: 15px;                      /* Menší mezery na úzkém displeji */
        flex-wrap: wrap;                /* Pokud se nevejdou, skočí na další řádek */
        justify-content: center;
    }

    .main-nav ul li a {
        font-size: 0.9rem;              /* Menší písmo pro mobil */
        letter-spacing: 1px;
    }

    /* Na mobilu meč často překáží nebo bliká, 
       tak ho buď zmenšíme, nebo schováme: */
    .main-nav ul li a::after {
        height: 12px;
        bottom: -8px;
    }
}}