/* ======================================================================== *\

    F I N D E R S - C O M P O N E N T S . C S S

    Ez a CSS-fájl tartalmazza a játék összetevőinek stílusait.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

    A stílusok a következő sorrendben vannak írva:

        1. H T M L  &  B O D Y
        2. H E A D E R
        3. M A I N
            3.1 C O N T R O L - P A N E L
                3.1.1 A C T I O N - B U T T O N
                3.1.2 M A R K E R   A N D   T I M E R
                3.1.3 G A M E - I N F O   A N D   L E V E L - S E L E C T O R
            3.2 G A M E - C O N T A I N E R
                3.2.1 L O A D I N G   O V E R L A Y
                3.2.2 G A M E - P A G E
        4. F O O T E R

\* ======================================================================== */

/* ======================================================================== *\
    H T M L  &  B O D Y
\* ======================================================================== */

html, body {
    font-family:  'Caveat', sans-serif;
    font-size:    16px;
}

body {
    background-image:     url("../images/wooden-background.webp");
    background-size:      cover;
    background-repeat:    no-repeat;
    background-position:  center;
}

        .landscape-warning {
            background-color:  rgba(255, 0, 0, 0.75);  /* Enyhén sötétebb háttér a jobb kontrasztért */

            font-size:         clamp(1.5rem, 3vw, 2em);
            font-weight:       bold;
            letter-spacing:    clamp(0.15rem, 0.3vw, 0.2em);
            line-height:       10vh;
            color:             white;
            text-shadow:       0.2rem 0.2rem 0.4rem rgba(0, 0, 0, 1), -0.1rem -0.1rem black;
        }


/* ======================================================================== *\
    H E A D E R
\* ======================================================================== */

header {
    background-color:  rgba(0, 0, 0, 0.5);
}

    .header-logo {
        background-image:     url('../images/logo.webp');
        background-size:      contain;
        background-repeat:    no-repeat;
        background-position:  center;
    }
        
    .header-logo-text {
        font-size:            clamp(0.5rem, 1vw, 0.75em);
        font-weight:          bold;
        letter-spacing:       clamp(0.25rem, 0.5vw, 0.375em);
        line-height:          2.5vh;
        color:                white;
        text-shadow:          0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 1), -0.1rem -0.1rem black;
        text-align:           left;
    }

.header-text {
    text-transform:  uppercase;
    font-size:       clamp(1.75rem, 4vw, 3em);
    font-weight:     bold;
    letter-spacing:  clamp(0.25rem, 0.5vw, 0.375em);
    line-height:     10vh;
    color:           rgba(206, 146, 0, 1); 
    text-shadow:     0.3em 0.3em 0.6em rgba(0, 0, 0, 1), -0.1em -0.1em black;
    text-align:      left;
}


/* ======================================================================== *\
   M A I N 
\* ======================================================================== */

    /* ======================================================================== *\
       C O N T R O L - P A N E L
    \* ======================================================================== */

    .control-panel-container {
        background-color:  rgba(0, 0, 0, 0.25);
    }

        .control-panel-container:hover {
            background-color:  rgba(0, 0, 0, 0.5);
            transition:        background-color 0.5s;
        }

        .control-panel-container:active {
            background-color:  rgba(0, 0, 0, 0.5);
            transition:        background-color 0.5s;
        }


        /* ======================================================================== *\
           A C T I O N - B U T T O N
        \* ======================================================================== */

        #main-action-button {
            cursor:               pointer;

            background-size:      cover;
            background-repeat:    no-repeat;
            background-position:  center;
        }

            #main-action-button.loading,
            #main-action-button.disabled {
                pointer-events:  none;
                opacity:         1;                    /* Látható visszajelzés */
                filter:          blackscale(1) brightness(1.2);
                cursor:          not-allowed;
            }

            #main-action-button:hover {
                filter:      brightness(1.2);
                transition:  filter 0.8s;
            }

            .button-start {background-image:  url('../images/button-start.webp');}
            .button-lost {background-image: url('../images/button-lost.webp');}
            .button-won {background-image: url('../images/button-won.webp');}


        /* ======================================================================== *\
            M A R K E R   A N D   T I M E R
        \* ======================================================================== */

        .marker-counter-number,
        .time-counter-number {
            background-image:     url("../images/button-counter-timer.webp");
            background-size:      cover;
            background-repeat:    no-repeat;
            background-position:  center;

            font-size:            clamp(2rem, 3.2vw, 2.4em);
            font-weight:          bold;
            letter-spacing:       clamp(0.2rem, 0.32vw, 0.24em);
            color:                rgba(206, 146, 0, 1);
            text-shadow:          0.24rem 0.24rem 0.36rem black, -0.1rem -0.1rem black;
        }


        /* ======================================================================== *\
            G A M E - I N F O   A N D   L E V E L - S E L E C T O R
        \* ======================================================================== */

        .game-info-text,
        .level-selector-text {
            cursor:            pointer;
            text-decoration:   none;

            background-color:  rgba(206, 146, 0, 0.9);

            font-family:       'Caveat', sans-serif;
            font-size:         clamp(1rem, 1.5vw, 1.25em);
            font-weight:       bold;
            letter-spacing:    clamp(0.1rem, 0.15vw, 0.125em);
            color:             rgba(255, 255, 255, 0.75);
            text-shadow:       0.125rem 0.125rem 0.25rem black, -0.1rem -0.1rem black;
        }

            /*.game-info-text.loading,
            .level-selector-text.loading,
            .game-info-text.disabled,
            .level-selector-text.disabled {
                pointer-events:  none;
                opacity:         0.6;                    /* Látható visszajelzés */
            /*    filter:          grayscale(1) brightness(0.8);
                cursor:          not-allowed;
            }*/

            .game-info-text:hover, 
            .level-selector-text:hover {
                text-decoration:  none;
                filter:           brightness(1.2);
                transition:       filter 0.5s;
            }


    /* ======================================================================== *\
        G A M E - C O N T A I N E R
    \* ======================================================================== */

    .game-container-style {
        border: 0.1vh solid black;
        background-color: rgb(0, 0, 0, 0.5);
    }

    .field {
        position: absolute;
        box-sizing: border-box;
        width: var(--field-size);
        height: var(--field-size);
        border: 0.0625rem solid rgba(0, 0, 0, 0.75);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0; /* Kezdetben láthatatlan */
        transform: scale(0.8); /* Kezdetben kisebb méret */
        transition: opacity 0.3s ease, transform 0.3s ease; /* Animáció */
    }

    .field.visible {
        opacity: 1; /* Teljesen látható */
        transform: scale(1); /* Normál méret */
    }

    .field.number-0 {background-image: url('../images/0.webp');}
    .number-0 {background-image: url('../images/0.webp');}
    .number-1 {background-image: url('../images/1.webp');}
    .number-2 {background-image: url('../images/2.webp');}
    .number-3 {background-image: url('../images/3.webp');}
    .number-4 {background-image: url('../images/4.webp');}
    .number-5 {background-image: url('../images/5.webp');}
    .number-6 {background-image: url('../images/6.webp');}
    .number-7 {background-image: url('../images/7.webp');}
    .number-8 {background-image: url('../images/8.webp');}
    .hidden {background-image: url('../images/hidden.webp');}
    .target {background-image: url('../images/target.webp');}
    .unmarked-target {background-image: url('../images/unmarked-target.webp');}
    .marker {background-image: url('../images/marker.webp');}
    .incorrect-marker {background-image: url('../images/incorrect-marker.webp');}


        /* ======================================================================== *\
            L O A D I N G   O V E R L A Y
        \* ======================================================================== */

        .loading-title {
            text-transform:  uppercase;
            text-align:      center;

            font-size:       clamp(1.5rem, 3.5vw, 2.5em);
            font-weight:     bold;
            letter-spacing:  clamp(0.15rem, 0.35vw, 0.25em);
            line-height:     clamp(2.5rem, 5.75vw, 3.75em);
            color:           rgba(245, 245, 220, 0.75);
            text-shadow:     0.25em 0.25em 0.25em rgba(68, 68, 68, 1), -0.1em -0.1em black;
        }

                .progress-percent {
                    text-align:      center;

                    font-size:       clamp(1.75rem, 4vw, 3em);
                    font-weight:     bold;
                    letter-spacing:  clamp(0.175rem, 0.4vw, 0.3em);
                    line-height:     clamp(3rem, 6vw, 4.5em);
                    color:           rgb(255, 255, 255, 0.9);
                    text-shadow:     0.3em 0.3em 0.6em rgba(0, 0, 0, 1), -0.1em -0.1em black;
                }

        .loading-sub {
            text-transform:  uppercase;
            text-align:      center;

            font-size:       clamp(1rem, 2.5vw, 1.5em);
            font-weight:     bold;
            letter-spacing:  clamp(0.1rem, 0.25vw, 0.15em);
            line-height:     clamp(1.5rem, 3.75vw, 2.25em);
            color:           rgba(245, 245, 220, 0.75);
            text-shadow:     0.25em 0.25em 0.25em rgba(68, 68, 68, 1), -0.1em -0.1em black;
        }
        

        /* ======================================================================== *\
            G A M E - P A G E
        \* ======================================================================== */

        .game-info-page,
        .level-selector-page,
        .level-buttons {
            display:          flex;
            flex-direction:   column;
            justify-content:  flex-start;
        }

            h3, a {
                text-align:       center;
                text-decoration:  none;
                margin:           1.5rem 0rem 0.5rem 0rem;

                font-size:        clamp(1.5rem, 3vw, 2.25em);
                font-weight:      bold;
                letter-spacing:   clamp(0.15rem, 0.3vw, 0.225em);
                line-height:      clamp(1.5rem, 3vw, 2.25em);
                color:            rgba(255, 255, 255, 0.25);
                text-shadow:      0.3em 0.3em 0.6em rgba(0, 0, 0, 1), -0.1em -0.1em black;
            }

                a:hover {
                    text-decoration:  none;
                    color:            teal;
                    transition:       color 0.5s;
                }

            h2 {
                text-align:      left;

                font-size:       clamp(1.2rem, 2.4vw, 1.8em);
                font-weight:     bold;
                letter-spacing:  clamp(0.2rem, 0.4vw, 0.3em);
                line-height:     clamp(1.2rem, 2.4vw, 1.8em);
                color:           rgba(255, 255, 255, 0.25);
                text-shadow:     0.25em 0.25em 0.25em rgba(68, 68, 68, 1), -0.1em -0.1em black;
            }

            p {
                text-align:      center;
                font-size:       clamp(1rem, 2vw, 1.5em);
                letter-spacing:  clamp(0.1rem, 0.2vw, 0.15em);
                line-height:     clamp(1.2rem, 2.4vw, 1.8em);
                color:           rgba(255, 255, 255, 0.25);
                text-shadow:     0.2em 0.2em 0.4em rgba(0, 0, 0, 1), -0.1em -0.1em black;
            }


            /*  ========================================================================  *\
                D R O P D O W N - C O N T E N T
                A #dropdown-content stílusa, amely a #gameContainer tetején jelenik meg
                áttetsző háttérrel, fade-in és scale animációval (0.5s).
            \*  ========================================================================  */

            #dropdown-content {
                display: none; /* Kezdetben rejtve van */
                position: absolute; /* Dinamikus pozícionálás a finders.js által */
                background-color: rgba(206, 146, 0, 0.9); /* Áttetsző háttér */
                border: 0.1vh solid black; /* Keret */
                border-radius: 1vh; /* Lekerekített sarkok */
                padding: 2vh; /* Belső margó */
                overflow-y: auto; /* Görgethető, ha a tartalom túl nagy */
                scrollbar-width: none; /* Firefox: scrollbar elrejtése */
                z-index: 10; /* A játéktábla fölött */
                opacity: 0; /* Kezdetben láthatatlan */
                transform: translateY(-20px); /* Kezdetben feljebb van */
                transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* 0.3s animáció */
            }

            #dropdown-content.show {
                display: block; /* Megjelenítés */
                opacity: 1; /* Teljesen látható */
                transform: translateY(0); /* Normál pozíció */
            }

            #dropdown-content:not(.show) {
                opacity: 0; /* Eltűnik */
                transform: translateY(-20px); /* Feljebb csúszik */
            }

            #dropdown-content::-webkit-scrollbar {
                display: none; /* Webkit böngészők: scrollbar elrejtése */
            }

            /*  ========================================================================  *\
                L E V E L - B U T T O N S
                A nehézségi szint gombok stílusa a level-selector-page.html .level-buttons div-jében.
                Általános gombstílus a <button> elemekre, amelyek a nehézségi szinteket választják.
            \*  ========================================================================  */

            .level-buttons button {
                cursor:            pointer; /* Kéz ikon */

                background-color:     rgba(255, 255, 255, 0.25); /* Áttetsző fehér háttér */
                background-image:     url("../images/button-level-selector.webp"); /* Háttérkép */
                background-size:      cover; /* Kitölti a gombot */
                background-repeat:    no-repeat; /* Nem ismétlődik */
                background-position:  center; /* Középre igazítva */
                transition:           background-color 0.3s; /* Háttérszín átmenet */

                border:            0.1vh solid black; /* Keret */
                border-radius:     1vh 2vh 1vh 2vh; /* Lekerekített sarkok */
                box-shadow:        0.2rem 0.2rem 0.4rem rgba(0, 0, 0, 0.75); /* Árnyék */

                width:             auto; /* Automatikus szélesség */
                height:            auto; /* Automatikus magasság */
                margin:            0rem 0rem 1rem 0rem; /* Külső margó */
                padding:           0.5rem 2rem 0.5rem 2rem; /* Belső margó */

                text-transform:    uppercase; /* Nagybetűs szöveg */
                font-family:       'Caveat', sans-serif; /* Betűtípus */
                font-size:         clamp(1rem, 2vw, 1.5rem); /* Reszponzív betűméret */
                font-weight:       bold; /* Félkövér betű */
                letter-spacing:    clamp(0.2rem, 0.4vw, 0.3em); /* Betűköz */
                line-height:       clamp(1rem, 2vw, 1.5rem); /* Sormagasság */
                color:             rgba(206, 146, 0, 1); /* Szöveg színe */
                text-shadow:       0.125rem 0.125rem 0.25rem black, -0.1rem -0.1rem black; /* Szöveg árnyék */
            }

                .level-buttons button:hover {
                    background-color:  rgba(255, 255, 255, 0.75); /* Teljesen fehér háttér hover esetén */
                    filter:            brightness(1.2);
                    transition:        filter 0.8s;
            }


/* ======================================================================== *\
    F O O T E R
\* ======================================================================== */

footer {
    background-color:  rgba(0, 0, 0, 0.5);
}

    footer a {
        text-decoration:  none;
        font-size:        clamp(1.5rem, 2vw, 1.5em);
        letter-spacing:   clamp(0.15rem, 0.2vw, 0.15em);
        color:            rgba(206, 146, 0, 1);
    }

    footer a:hover {
        text-decoration:  none;
        color:            teal;
        transition:       color 0.5s;
    }

.footer-text {
    font-size:       clamp(1rem, 2vw, 1.5em);
    font-weight:     bold;
    letter-spacing:  clamp(0.1rem, 0.2vw, 0.15em);
    color:           rgba(255, 255, 255, 0.75);
    text-shadow:     0.25em 0.25em 0.25em rgba(68, 68, 68, 1), -0.1em -0.1em black;
}


/* ======================================================================== *\
    E N D   O F   F I N D E R S - C O M P O N E N T S . C S S
\* ======================================================================== */