*,
*::before,
*::after {
    /* outline: 1px solid red; */
    user-select: none;
    -webkit-user-drag: none;
    font-family: 'Noto Sans HK', 'Noto Colour Emoji', sans-serif;
}

@font-face {
    font-family: 'Noto Sans HK';
    src: url('assets/NotoSansHK-VariableFont_wght.ttf') format('truetype'), url('Green-Stem-Q-and-A-game/assets/NotoSansHK-VariableFont_wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Colour Emoji';
    src: url('assets/NotoColorEmoji-Regular.ttf') format('truetype'), url('Green-Stem-Q-and-A-game/assets/NotoColorEmoji-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-weight: bold;

    &>div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #titlePage,
    #gamePage,
    #resultPage {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.5s ease-in-out;
    }

    &[data-page='title'] {

        #titlePage {
            opacity: 1;
            pointer-events: initial;
        }
    }

    &[data-page='game'] {

        #gamePage {
            opacity: 1;
            pointer-events: initial;
        }
    }

    &[data-page='result'] {

        #resultPage {
            opacity: 1;
            pointer-events: initial;
        }
    }
}

.container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
}

.warning {
    z-index: -9999;
    overflow: hidden;
    height: 200%;
    translate: 0 0;

    &::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: url('assets/warning.png') repeat, url('Green-Stem-Q-and-A-game/assets/warning.png') repeat;
        transform: rotate(-45deg);
    }
}

.backBuffer {
    background: url('assets/innogreengametitleveryblank.png') no-repeat center center / contain, url('Green-Stem-Q-and-A-game/assets/innogreengametitleveryblank.png') no-repeat center center / contain;
}

.restartButtonContainer {
    z-index: 9999;
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    font-size: 32pt;
    pointer-events: none;

    #restartButton {
        margin: 20px;
        pointer-events: initial;
        cursor: pointer;
        text-shadow: 1px 1px 2px black, 0 0 5px black;
    }
}

#titlePage {
    background: url('assets/innogreengametitleblank.png') no-repeat center center / contain, url('Green-Stem-Q-and-A-game/assets/innogreengametitleblank.png') no-repeat center center / contain;

    .titleCard {
        .titleBox {
            width: 50%;
            top: 8%;
            animation: bob 8s ease-in-out infinite;
        }

        .logo {
            z-index: 1;
            width: 40%;
            top: 20%;
            animation: bob 8s ease-in-out infinite;
            animation-delay: -6s;
        }

        .sparkle {
            width: 5%;
            left: 75%;
            top: 23%;
            animation: bob 8s ease-in-out infinite;
            animation-delay: -2s;
        }

        .name {
            width: 18%;
            top: 50%;
            animation: bob 8s ease-in-out infinite;
            animation-delay: -7s;
        }
    }

    .startButtonContainer {

        #startButton {
            top: 73%;
            animation: pulse 3s infinite ease-in-out;
        }

        .startButtonPop {
            top: 72%;
            animation: pulse 3s infinite ease-in-out;
        }

        #startButtonAdvanced {
            top: 84%;
            animation: pulse 3s infinite ease-in-out;
            animation-delay: -0.7s;
        }

        .startButtonAdvancedPop {
            top: 83%;
            animation: pulse 3s infinite ease-in-out;
            animation-delay: -0.7s;
        }

        #startButton,
        #startButtonAdvanced {
            z-index: 999;
            width: 15%;
            filter: saturate(1.5);
            cursor: pointer;
        }

        .startButtonPop,
        .startButtonAdvancedPop {
            z-index: 9999;
            width: 15%;
            filter: saturate(1.5) brightness(1.1);
            pointer-events: none;
        }

        &:has(#startButton:hover),
        &:has(#startButtonAdvanced:hover) {

            #startButton,
            #startButtonAdvanced {
                filter: saturate(2) brightness(0.8);
            }

            .startButtonPop,
            .startButtonAdvancedPop {
                display: none;
            }
        }
    }

    img {
        position: absolute;
    }
}

#gamePage {
    background: url('assets/innogreengamebg.png') no-repeat center center / contain, url('Green-Stem-Q-and-A-game/assets/innogreengamebg.png') no-repeat center center / contain;

    .questionCard {
        * {
            position: absolute;
        }

        .dropSign {
            position: absolute;
            width: 80%;
            top: -25%;
            translate: 1% 0;
        }

        #questionHeader {
            width: 55%;
            top: 10%;
            text-align: left;
            font-size: 18pt;
            font-weight: normal;
        }

        #questionText {
            width: 55%;
            top: 15%;
            text-align: left;
            font-size: 22pt;
        }

        .answerButtons {
            width: 70%;
            height: 25%;
            top: 36%;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            gap: 20px 20px;

            .answerButton {
                position: initial;
                background-color: #ffecd3;
                cursor: pointer;
                border-radius: 5px;
                padding: 0 20px;
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                font-size: 16pt;
                font-weight: normal;
                box-shadow: 0 4px 6px black, inset 0 2px 4px rgba(255, 255, 255, 0.5);

                &:hover {
                    outline: 5px solid yellow;
                }

                &.correct {
                    outline: 5px solid green;
                    background-color: #d4edda;
                    pointer-events: none;
                    position: relative;

                    &::after {
                        content: "✅";
                        position: absolute;
                        z-index: 9999;
                        width: 20%;
                        top: -20%;
                        right: -10%;
                        font-size: 24pt;
                        text-shadow: 1px 1px 2px black;
                    }
                }

                &.wrong {
                    outline: 5px solid red;
                    background-color: #f8d7da;
                    pointer-events: none;
                    position: relative;
                }

                &.disabled {
                    pointer-events: none;
                    filter: grayscale(1) brightness(0.7);
                }
            }
        }
    }

    #explanationBox {
        position: absolute;
        width: 55%;
        height: 20%;
        left: 12%;
        top: 70%;
        font-size: 16pt;
        font-weight: normal;
        color: black;
        background-color: #ffecd3;
        border: 10px solid #ffcd94;
        box-shadow: 0 4px 6px black, inset 0 2px 4px rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        padding: 10px 20px;

        div {
            position: initial;
        }

        #explanationText {
            font-size: 18pt;
            text-align: left;
            font-weight: bold;
        }
    }

    #nextQuestionButton {
        position: absolute;
        width: 18%;
        top: 70%;
        left: 75%;
        background-color: #ffecd3;
        border: 10px solid #ffcd94;
        box-shadow: 0 4px 6px black, inset 0 2px 4px rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        padding: 10px;
        text-align: center;
        font-size: 24pt;
        cursor: pointer;
        animation: pulse 2s infinite ease-in-out;

        &:hover {
            outline: 5px solid yellow;
        }
    }
}

#resultPage {
    background: url('assets/innogreengamebg_nondark.png') no-repeat center center / contain, url('Green-Stem-Q-and-A-game/assets/innogreengamebg_nondark.png') no-repeat center center / contain;

    .titleCard {
        .titleBox {
            width: 60%;
            top: 10%;
            animation: bob 8s ease-in-out infinite;
        }

        .logo {
            z-index: 1;
            width: 40%;
            top: 24%;
            animation: bob 8s ease-in-out infinite;
            animation-delay: -5.5s;
        }

        .sparkle {
            width: 5%;
            left: 80%;
            top: 25%;
            animation: bob 8s ease-in-out infinite;
            animation-delay: -2s;
        }

        .name {
            width: 18%;
            top: 52%;
            animation: bob 8s ease-in-out infinite;
            animation-delay: -6s;
        }

        #scoreText {
            position: absolute;
            z-index: 99;
            width: 50%;
            top: 61%;
            font-size: 48pt;
            text-align: center;
            color: black;
            animation: bob 8s ease-in-out infinite;
            animation-delay: -7s;
        }
    }

    img {
        position: absolute;
    }
}

@keyframes bob {

    0%,
    100% {
        translate: 0 -10px;
    }

    50% {
        translate: 0 10px;
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}