/* =============================== */
/* ZÁKLADNÉ NASTAVENIA */
/* =============================== */

body {
    margin: 0;
    font-family: 'Lora', serif;
    background: #222;
    color: #fff;
}

#game-wrapper {
    width: 100vw;
    height: 100vh;
    margin: 0 auto;
    position: relative;
    overflow: hidden;

    background-image: url("pozad3.png"); /* ← Tvoja fotka pozadia */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    z-index: 0; /* najnižšia vrstva */
}



/* =============================== */
/* TITULNÁ OBRAZOVKA */
/* =============================== */

#title-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-image: url("pozadietitul.png");
    background-size: cover;
    background-position: center;

    z-index: 100; /* ← najvyššia vrstva */
}



/* =============================== */
/* TABUĽA MENU */
/* =============================== */

#menu-box {
    position: absolute;
    top: 150px;
    left: 140px;
    width: 480px;
    z-index: 50;
}

#menu-background {
    width: 100%;
    display: block;
}


.menu-btn-wrap {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    width: 350px;
    height: auto;           /* ← OBAL NEMÁ pevný rozmer */
    pointer-events: none;
    display: flex;
    justify-content: center;
}


/* pozície */
#play-wrap { top: 150px; }
#options-wrap { top: 320px; }
#quit-wrap { top: 490px; }


/* TLAČIDLO – jediná klikacia časť */
.menu-btn {
    width: 350px;
    height: 100px;        /* PRIDAŤ! presná výška obrázka */
    cursor: pointer;
    pointer-events: auto;   /* reaguje iba obrázok */
    display: block;
    object-fit: contain;    /* NEZVÄČŠUJE plochu mimo rozmer */
}





/* =============================== */
/* SRDIEČKA */
/* =============================== */

#hearts {
    position: fixed;
    top: 20px;
    left: 20px;

    display: none;
    flex-direction: column;
    gap: 15px;  /* medzera medzi srdieckami */

    z-index: 999; /* najvyššie počas hry */
}

.heart {
    width: 96px;
    height: 96px;
}


/* =============================== */
/* ANIMÁCIA STRATY SRDCA */
/* =============================== */

#heart-animation {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.6);

    width: 250px;          /* 🔧 veľkosť srdca */
    height: auto;

    opacity: 0;
    pointer-events: none;

    z-index: 1000;         /* nad všetkým */
}

/* aktívny stav */
#heart-animation.show {
    animation: heartLose 1.2s ease forwards;
}

/* animácia */
@keyframes heartLose {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.4);
    }
    20% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    60% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
}



/* =============================== */
/* SCÉNY */
/* =============================== */

#game-screen {
    position: relative;
    z-index: 10; /* nad pozadím hry */
}





#scene-image-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

#scene-image {
    width: 1536px;
    height: 864px;
    object-fit: cover;
    border-radius: 12px;
}

#cards-container {
    display: flex;
    justify-content: center;
    gap: 100px;
    top: 40px;
}

.cards-container-small {
 position: absolute;
    top: -1%;
    left: -3%;
    width: 109%;
    height: 105%;
    background-image: url(ppts.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 10;

}

.cards-container-big{
 position: absolute;
    top: -3%;
    left: -5%;
    width: 110%;
    height: 110%;
    background-image: url(pptv.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 10;

}

.card-wrapper {
    position: relative;
}

.single-block .card-wrapper {
    position: relative;
    width: 600px;
}



.choice-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.choice-image {
    width: 600px;
    height: 864px;
    object-fit: cover;
    border-radius: 12px;
}

.single-small-card {
    width: 600px;
    height: 864px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
    margin: 5px auto 0 auto;
}
.single-block {
    position: relative;
   /* width: 600px;*/
    height: 1000px;
        display: flex;
    flex-direction: column;
    align-items: center;
}


/* OBAL KARTY MUSÍ BYŤ RELATÍVNY */
.choice-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* POPISOK NA KARTE – GRAFICKÁ TABUĽKA */
.choice-title {
    width: 600px;                         /* rovnaká šírka ako karta */
    height: 140px;                        /* môžeš upraviť podľa obrázka */
    background-image: url("tab1.png");     /* OBRÁZOK */
    background-size: contain;             /* prispôsobí bez orezania */
    background-repeat: no-repeat;
    background-position: center;

    display: flex;                        /* text centrovaný vo vnútri */
    justify-content: center;
    align-items: center;

    color: white;
    font-size: 28px;
    font-weight: bold;
    text-align: center;

    padding: 10px;                        /* vnútorný okraj */
    box-sizing:border-box;
}

.text-box {
   /* width: 600px;*/
    min-height: 140px;
    max-width: 90%;

    background-image: url("tab1.png");
    background-size: 105% 100%;
    background-repeat: no-repeat;
    background-position: center;

    padding: 20px;
    box-sizing: border-box;

    font-size: 28px;
    font-weight: bold;
    text-align: center;
    line-height: 1.2;

    display: flex;
    justify-content: center;
    align-items: center;

    color: white;

}


#scene-title {
    width: 70%;
    margin: 20px auto;

    background-image: url("tab1.png");
    background-size: 90% 110%;
    background-repeat: no-repeat;
    background-position: center;

    padding: 25px 40px;
    box-sizing: border-box;

    font-size: 30px;
    font-weight: bold;
    text-align: center;

    display: flex;
    justify-content: center;
    align-items: center;
}

/* =============================== */
/* OPTIONS OBRAZOVKA */
/* =============================== */

#options-screen {
    position: absolute;
    inset: 0;
    display: none;                     /* zobrazí sa po kliknutí na Options */
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.6);
    z-index: 200;
}

/* OBAL – dôležitý pre absolútne pozicovanie tlačidiel */
#options-wrapper {
    position: relative;
}

/* HLAVNÁ TABUĽA */
#options-image {
    max-width: 80vw;
    max-height: 80vh;
    display: block;
}

/* =============================== */
/* ON / OFF – ROZLOŽENIE */
/* =============================== */

#options-buttons {
    position: absolute;

    /* 🔧 HLAVNÉ POSUNY – TU SI TO BUDEŠ LADIŤ */
    top: 40%;        /* ↑↓ POSUN HORE / DOLE */
    left: 45%;       /* ←→ POSUN K STREDU / DOPRAVA */

    display: grid;
    grid-template-columns: auto auto; /* 2 vedľa seba */
    gap: 18px 22px;  /* 🔧 medzera: riadky | stĺpce */
}

/* JEDNOTLIVÉ ON / OFF OBRÁZKY */
.opt-img {
    width: 130px;     /* 🔧 šírka tlačidla */
    height: auto;    /* zachová pomer obrázka */

    cursor: pointer; /* len vizuálne, zatiaľ bez funkcie */
}

/* =============================== */
/* SPÄŤ DO MENU  */
/* =============================== */

#back-to-menu {
    position: absolute;

    /* 🔧 HLAVNÉ POSUNY – LADIŤ PODĽA OČÍ */
    top: 128%;        /* ↑↓ posun hore / dole (stred tabuľky) */
    left: 33%;       /* ←→ stred tabuľky */

    transform: translate(-50%, -50%); /* presné centrovanie */

    width: 178px;    /* 🔧 MENŠIA VEĽKOSŤ TLAČIDLA */
    height: auto;

    cursor: pointer;
}

/* =============================== */
/* PAUSE TLAČIDLO */
/* =============================== */

#pause-btn {
    position: fixed;

    /* 🔧 POZÍCIA – DOLU VĽAVO */
    bottom: 20px;   /* ↑↓ posun od spodku */
    left: 20px;     /* ←→ posun od ľavého okraja */

    width: 115px;    /* 🔧 veľkosť tlačidla */
    height: auto;

    cursor: pointer;

    z-index: 300;   /* nad hrou */
    display: none;  /* skryté defaultne (titulná obrazovka) */
}


/* =============================== */
/* TI TLAČIDLO */
/* =============================== */

#ti-btn {
    position: fixed;

    /* 🔧 POZÍCIA – UPRAV PODĽA POTREBY */
    bottom: 10px;   /* ↑↓ */
    left: 2180px;    /* ←→ (vedľa pause tlačidla) */

    width: 115px;    /* 🔧 veľkosť */
    height: auto;

    cursor: pointer;

    z-index: 300;
    display: none;  /*  skryté na titulnej obrazovke */
}


/* =============================== */
/* TI – ST1 TABUĽKA */
/* =============================== */

#ti-screen {
    position: fixed;
    inset: 0;

    display: none; /* zobrazí sa až po kliknutí */
    justify-content: center;
    align-items: center;

    background: rgba(0, 0, 0, 0.6); /* jemné stmavenie */
    z-index: 9000;
}

#ti-image {
    width: 105%;     /* 🔧 veľkosť tabuľky */
    height: auto;
}

/* =============================== */
/* ST1 – ŠÍPKA */
/* =============================== */

#ti-wrapper {
    position: relative;
}

#ti-arrow {
    position: absolute;

    /* 🔧 POZÍCIA – LADIŤ PODĽA OČÍ */
    right: 4%;      /* ←→ posun vpravo / doľava */
    top: 80%;       /* ↑↓ výška */
    transform: translateY(-50%);

    width: 115px;    /* 🔧 veľkosť šípky */
    height: auto;

    cursor: pointer;
}

/* =============================== */
/* ST2 – ŠÍPKA VĽAVO */
/* =============================== */

#ti-arrow.st2 {
    right: auto;          /* zruší pravú pozíciu */
    left: 8%;             /* ⬅ presun na ľavú stranu */

    transform: translateY(-50%) scaleX(-1);
}



/* =============================== */
/* PAUSE MENU */
/* =============================== */

#pause-screen {
    position: fixed;
    inset: 0;

    display: none;                 /* skryté, zobrazí sa po pause */
    justify-content: center;
    align-items: center;

    background: rgba(0,0,0,0.6);   /* stmavenie pozadia */
    z-index: 400;                  /* nad hrou aj pause tlačidlom */
}

#pause-menu-image {
    max-width: 85%;
    max-height: 85%;
    display: block;
}




/* =============================== */
/* PAUSE MENU – OBAL */
/* =============================== */

#pause-wrapper {
    position: relative;
}

/* =============================== */
/* TLAČIDLÁ NA PAUSE TABUĽKE */
/* =============================== */

.pause-btn-img {
    position: absolute;
    left: 42%;
    transform: translateX(-50%);

    width: 260px;       /* 🔧 veľkosť tlačidiel */
    height: auto;

    cursor: pointer;
}

/* POZÍCIE – LADIŤ PODĽA POTREBY */
#pause-continue {
    top: 18%;   /* 🔧 HORE */
}

#pause-options {
    top: 45%;   /* 🔧 STRED */
}

#pause-mainmenu {
    top: 72%;   /* 🔧 DOLE */
}

/* =============================== */
/* BACK TLAČIDLO V OPTIONS */
/* =============================== */

#back-btn {
    position: absolute;

    /* 🔧 POSUNY – LADIŤ PODĽA OČÍ */
    top: 128%;        /* rovnaká výška ako tmeinmenu */
    left: -40%;        /* 👉 POSUN DOĽAVA / DOPRAVA */

    transform: translate(-50%, -50%);

    width: 180px;     /* 🔧 menšie než tmeinmenu */
    height: auto;

    cursor: pointer;
}


/* =============================== */
/* KONIEC HRY */
/* =============================== */

#end-screen {
    position: fixed;
    inset: 0;

    display: none;                /* zobrazí sa len pri konci */
    justify-content: center;
    align-items: center;

    background: rgba(0,0,0,0.8);
    z-index: 10000;
}

#end-image {
    width: 99%;
    height: auto;
    z-index: 1;
}



/* =============================== */
/* KONIEC – NADPIS */
/* =============================== */

#end-wrapper {
    position: relative;
    text-align: center;
}

#end-title {
    position: absolute;

    /*  POZÍCIA NAD TABUĽKOU */
    top: 35%;        /* ↑↓ posun nadpisu */
    left: 50%;
    transform: translateX(-50%);

    width: 60%;

    font-size: 36px;   /*  veľkosť textu */
    font-family: 'Cinzel', serif;
    font-weight: bold;
    color: #ffffff;

    text-shadow: 0 0 10px rgba(0,0,0,0.8);
    letter-spacing: 1px;
}


/* =============================== */
/* KONIEC – OK TLAČIDLO */
/* =============================== */

#end-ok-btn {
    position: absolute;

    /*  POZÍCIA NA TABUĽKE  */
    bottom: 35%;        /* ↑↓ posun vyššie / nižšie */
    left: 50%;
    transform: translateX(-50%);

    width: 160px;       /*  veľkosť tlačidla */
    height: auto;

    cursor: pointer;

     z-index: 5; /*  – nad koniec.png */
}


/* =============================== */
/* FADE PRECHODY */
/* =============================== */

#fade-transition {
    position: fixed;
    inset: 0;

    background: black;
    opacity: 0;

    pointer-events: none;
    z-index: 99999;

    transition: opacity 0.8s ease; /* ⭐ rýchlosť prechodu */
}

/* aktívny stav */
#fade-transition.active {
    opacity: 1;
}