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

    F I N D E R S - L A Y O U T . C S S

    CSS-fájl a játék elrendezéséhez.

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

    Az elrendezések 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
        5. M E D I A - Q U E R I E S

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

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

* {
    box-sizing: border-box;
}

html, body {
    margin:   0;     /* Nincs külső margó */
    padding:  0;     /* Nincs belső margó */
    height:   100%;  /* A képernyő magassága */
    width:    100%;  /* A képernyő szélessége */
}

/* Kényszerítjük, hogy a játék konténer mindig álló orientációban legyen */
body {
    display:           flex;         /* Flexbox */
    justify-content:   center;       /* Középre igazítjuk */
    align-items:       center;       /* Középre igazítjuk */
    overflow:          hidden auto;  /* Nem engedjük a görgetést, csak ha szükséges */
}

    #warning {
        display:          none; /* Alapértelmezetten rejtve van */
        flex-direction:   column;
        justify-content:  center;
        align-items:      center;
        text-align:       center;

        position:         fixed;
        top:              0;
        left:             0;
        width:            100vw;
        height:           100vh;
        padding:          5vh 10vw;

        opacity:          0;  /* Kezdeti állapot */
        transition:       opacity 0.5s ease-in-out;
        z-index:          1000;
    }   
    
        #warning.show {
            display:  block;
            opacity:  1;
        }
    

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

header {
    position:          fixed;
    top:               0;

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

    width:             100%;
    height:            10vh;
    padding:           0vh 5vw 0vh 5vw;
}

    .header-logo {
        width:   10vh;
        height:  10vh;
    }

    .header-text {
        width:   auto;
        height:  10vh;
    }


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

main {
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    justify-content:  center;

    width:            100%;
    height:           auto;
    padding:          4vh 0vw 2vh 0vw;
    margin:           0;
}


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

    .control-panel-container {
        position:       relative;

        width:          30vw;  /* 30% of the screen width */
        max-width:      600px;
        height:         calc(15vh + 1rem);  /* 15% of the screen height */
        margin-bottom:  0;
        padding:        0;

        border:         none;
        border-radius:  1rem 1rem 0rem 0rem;
    }


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

        #main-action-button {
            position:       absolute;
            top:            auto;
            left:           50%;
            transform:      translateX(-50%);

            width:          30%;   /* 30% of the control panel */
            height:         15vh;  /* 100% of the control panel */
            margin:         0.5rem 0rem 0.5rem 0rem;
            padding:        0;

            border:         0.1vh solid black;
            border-radius:  1rem;
        }


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

        .marker-counter-number {
            position:       absolute;
            top:            0.5rem;
            left:           0.5rem;

            border:         0.1rem solid black;
            border-radius:  1rem 0.5rem 0.5rem 0.5rem;
            box-shadow:     0.2rem 0.2rem 0.4rem rgba(0, 0, 0, 0.75);
        }

        .time-counter-number {
            position:       absolute;
            top:            0.5rem;
            right:          0.5rem;

            border:         0.1rem solid black;
            border-radius:  0.5rem 1rem 0.5rem 0.5rem;
            box-shadow:     0.2rem 0.2rem 0.4rem rgba(0, 0, 0, 0.75);
        }

        .marker-counter-number, 
        .time-counter-number {
            display:          flex;
            justify-content:  center;
            align-items:      center;

            width:            9vw;  /* 30% of the control panel */
            height:           auto;
            padding:          0;
            margin:           0;
        }


        /* ======================================================================== *\
            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 {
            position:       absolute;
            bottom:         0;
            left:           0.5rem;

            border:         0.1rem solid black;
            border-radius:  1rem 1rem 0rem 0rem;
            box-shadow:     0.2rem 0.2rem 0.4rem rgba(0, 0, 0, 0.75);
        }

        .level-selector-text {
            position:       absolute;
            bottom:         0;
            right:          0.5rem;

            border:         0.1rem solid black;
            border-radius:  1rem 1rem 0rem 0rem;
            box-shadow:     0.2rem 0.2rem 0.4rem rgba(0, 0, 0, 0.75);
        }

        .game-info-text,
        .level-selector-text {
            display:          flex;
            justify-content:  center;
            align-items:      center;
            text-align:       center;

            width:            9vw;    /* 30% of the control panel */
            height:           4.5vh;  /* 30% of the control panel */  
            padding:          0;
            margin:           0;
        }                     


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

    #gameContainer {
        position:      relative;
        top:           0;
        left:          0;
        width:         30vw;
        max-width:     600px;
        height:        auto;
        margin:        0;
        padding:       0;
        aspect-ratio:  1 / 1;
    }


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

        /* A teljes képernyős átfedés a töltésjelzőhöz */
        #loading-overlay {
            position:         absolute;
            inset:            0;

            display:          flex;
            flex-direction:   column;
            justify-content:  center;
            align-items:      center;
            gap:              1.5rem;

            z-index:          1000;
        }

        /* A kör alakú töltésjelző konténer */
        .circular-wrap {
            position:         relative;

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

            width:            40%;
            height:           40%;
        }

        /* A narancssárga fénykör */
        .circular {
            position:        absolute;
            pointer-events:  none;

            width:           100%;
            height:          100%;
            border-radius:   50%;
        
            background:      conic-gradient(
                             rgba(255, 159, 10, 0) 0deg,
                             rgba(255, 159, 10, 0.2) 180deg,
                             rgba(255, 159, 10, 0.5) 240deg,
                             rgba(255, 159, 10, 0.8) 300deg,
                             rgba(255, 159, 10, 1) 360deg
            );
            box-shadow:      0 0 30px rgba(255, 159, 10, 0.7),
                             0 0 60px rgba(255, 159, 10, 0.4);
            animation:       rotate-ring 2s linear infinite;
        }

        /* A félig áttetsző üveg-hatású középső rész */
        .progress-percent-wrap {
            position:         absolute;

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

            width:            80%;
            height:           80%;

            background:       rgba(0, 0, 0, 0.1);
            backdrop-filter:  blur(3px);

            border:           1px solid rgba(255, 255, 255, 0.1);
            border-radius:    50%;

            z-index:           2;
        }

        /* A százalék szöveg */
        .progress-percent {
            pointer-events:  none;  /* Ne zavarja a felhasználói interakciókat */
        }

        /* Forgó animáció a körhöz */
        @keyframes rotate-ring {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }


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


            /* ======================================================================== *\
                D R O P D O W N - C O N T E N T
            \* ======================================================================== */


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

footer {
    position:         fixed;
    bottom:           0;
    
    display:          flex;
    justify-content:  flex-end;
    align-items:      center;

    width:            100%;
    height:           8vh;
    padding:          0vh 5vw 0vh 5vw;
}


/* ======================================================================== *\
    M E D I A - Q U E R I E S
\* ======================================================================== */

@media screen and (max-width: 1024px) {
    .control-panel-container {
        width:   80vw;  /* 80% of the screen width */
        height:  calc(22vw + 1rem);  /* 20% of the screen height */
    }

        #main-action-button {
            position:       absolute;
            top:            auto;
            left:           50%;
            transform:      translateX(-50%);

            width:          22vw;   /* 30% of the control panel */
            height:         22vw;  /* 100% of the control panel */
            margin:         0.5rem 0rem 0.5rem 0rem;
            padding:        0;

            border:         0.1vh solid black;
            border-radius:  1rem;
        }

        .marker-counter-number,
        .time-counter-number {
            width:   24vw;  /* 30% of the control panel */
            height:  auto;  /* Auto height */
        }

        .game-info-text,
        .level-selector-text {
            width:   24vw;  /* 30% of the control panel */
            height:  6vw;   /* 30% of the control panel */
        }

        #dropdown-content {
            display:    none;
            height:     80vw;
            top:        31vh;
            left:       50%;
            transform:  translateX(-50%);

            width:      80vw;
            height:     0;
        }

            #dropdown-content.show {
                height:     80vw;
            }

            /* Hide scrollbar for Webkit browsers (Chrome, Safari) */
            #dropdown-content::-webkit-scrollbar {
                display:  none;
            }

    #gameContainer {
        width:         80vw;   /* 80% of the screen width */
        max-width:     600px;  /* Maximum width */
        height:        auto;   /* Auto height */
        aspect-ratio:  1 / 1;  /* 1:1 aspect ratio */
    }
}

@media screen and (max-width: 768px) {
    .control-panel-container {
        width:   80vw;  /* 80% of the screen width */
        height:  calc(22vw + 1rem);  /* 20% of the screen height */
    }

        #main-action-button {
            position:       absolute;
            top:            auto;
            left:           50%;
            transform:      translateX(-50%);

            width:          22vw;   /* 30% of the control panel */
            height:         22vw;  /* 100% of the control panel */
            margin:         0.5rem 0rem 0.5rem 0rem;
            padding:        0;

            border:         0.1vh solid black;
            border-radius:  1rem;
        }

        .marker-counter-number,
        .time-counter-number {
            width:   24vw;  /* 30% of the control panel */
            height:  auto;  /* Auto height */
        }

        .game-info-text,
        .level-selector-text {
            width:   24vw;  /* 30% of the control panel */
            height:  6vw;   /* 30% of the control panel */
        }

        #dropdown-content {
            display:    none;
            height:     80vw;
            top:        31vh;
            left:       50%;
            transform:  translateX(-50%);

            width:      80vw;
            height:     0;
        }

            #dropdown-content.show {
                height:     80vw;
            }

            /* Hide scrollbar for Webkit browsers (Chrome, Safari) */
            #dropdown-content::-webkit-scrollbar {
                display:  none;
            }

    #gameContainer {
        width:         80vw;   /* 80% of the screen width */
        max-width:     600px;  /* Maximum width */
        height:        auto;   /* Auto height */
        aspect-ratio:  1 / 1;  /* 1:1 aspect ratio */
    }
}


/* ======================================================================== *\
    E N D   O F   F I N D E R S - L A Y O U T . C S S
\* ======================================================================== */