@font-face {
    font-family: 'tiny5';
    src: url('./fonts/Tiny5-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'jersey25';
    src: url('./fonts/Jersey25-Regular.ttf') format('truetype');
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgb(33, 31, 48);
}

::-webkit-scrollbar-thumb:hover {
    background: rgb(33, 31, 48, 0.5);
}

* {
    margin: 0;
    box-sizing: border-box;
    font-family: jersey25;
    font-size: 16px;
}

body {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    background-color: rgb(62, 56, 66);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: default;
    overflow-x: hidden;
    overflow-y: auto;
    color: rgb(245, 245, 245, 0.75);
}

main {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

h1 {
    font-family: tiny5;
    font-size: clamp(2rem, min(2.6667vw, 4rem), 3rem);
    letter-spacing: 6px;
    padding-top: 40px;
    padding-bottom: 40px;
}

h2 {
    font-family: tiny5;
    font-size: clamp(1rem, min(5vw, 5.9vh), 3.5rem);
    letter-spacing: (0.063rem, min(0.3vw, 0.2vh), 0.125rem);
}

a {
    text-decoration: none;
    color: unset;
    cursor: pointer;
}

button {
    border: none;
    background-color: transparent;
    background-size: cover;
    background-repeat: no-repeat;
}

button:hover {
    cursor: pointer;
}

button:focus-visible {
    outline: unset;
}

button:disabled {
    opacity: 0.6;
}

.round-btn {
    width: clamp(1rem, min(5vw, 7.5vh), 4.5rem);
    height: clamp(1rem, min(5vw, 7.5vh), 4.5rem);
}

.round-btn:hover {
    transform: scale(1.2);
}

.rectangle-btn {
    width: clamp(1.5rem, min(7.5vw, 11.25vh), 6.75rem);
    height: clamp(1.5rem, min(7.5vw, 11.25vh), 6.75rem);
}

.back-btn {
    background-image: url("./img/gui/buttons/button_back.png");
}

.reset-btn {
    background-image: url("./img/gui/buttons/button_startscreen.png");
}

.settings-btn {
    background-image: url("./img/gui/buttons/button_settings.png");
}

.close-btn {
    background-image: url("./img/gui/buttons/button_close.png");
}

.volume-decrease-btn {
    background-image: url("./img/gui/buttons/button_audio_decrease.png");
}

.volume-increase-btn {
    background-image: url("./img/gui/buttons/button_audio_increase.png");
}

.mute-btn {
    background-image: url("./img/gui/buttons/button_audio_mute.png");
}

.fullscreen-btn {
    background-image: url("./img/gui/buttons/button_fullscreen.png");
}

.show-controls-btn {
    background-image: url("./img/gui/buttons/button_show_controls.png");
}

.start-btn {
    background-image: url("./img/gui/buttons/button_start.png");
}

.start-btn:hover {
    background-image: url("./img/gui/buttons/button_start_pressed.png");
}

.how-to-play-btn {
    background-image: url("./img/gui/buttons/button_how_to_play.png");
}

.how-to-play-btn:hover {
    background-image: url("./img/gui/buttons/button_how_to_play_pressed.png");
}

.about-btn {
    background-image: url("./img/gui/buttons/button_about.png");
}

.about-btn:hover {
    background-image: url("./img/gui/buttons/button_about_pressed.png");
}

.external-btn {
    background-image: url("./img/gui/buttons/button_external.png");
}

.external-btn:hover {
    background-image: url("./img/gui/buttons/button_external_pressed.png");
}

.up-btn {
    background-image: url("./img/gui/controls/button_up.png");
}

.left-btn {
    background-image: url("./img/gui/controls/button_left.png");
}

.right-btn {
    background-image: url("./img/gui/controls/button_right.png");
}

.attack-btn {
    background-image: url("./img/gui/controls/button_attack.png");
}

.startscreen {
    width: 720px;
    height: 480px;
    background-image: url("./img/startscreen.png");
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .startscreen-overview {
        overflow-y: hidden !important;
    }

    .startscreen-overview,
    .startscreen-how-to-play,
    .startscreen-about,
    .startscreen-impress {
        width: 100%;
        height: 100%;
        padding: clamp(0.5rem, min(2.8571vw, 3.9286vh), 2.5rem);
        gap: clamp(0.75rem, min(3.75vw, 6.7vh), 4rem);
        display: flex;
        flex-direction: column;
        overflow-y: auto;

        .startscreen-headline {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-right: clamp(1rem, min(5vw, 7.5vh), 4.5rem);

            .round-btn {
                margin-top: clamp(0.5rem, min(2.8571vw, 3.9286vh), 2.5rem);
            }

            img {
                height: clamp(1.938rem, min(8.3029vw, 11.718vh), 7.75rem);
                margin: auto;
            }

            h2 {
                margin: auto;
            }
        }

        p,
        a,
        span {
            font-size: clamp(0.75rem, min(2.5vw, 3.125vh), 1.625rem);
            text-align: center;
        }

        .underlined {
            text-decoration: underline;
        }

        .startscreen-overview-btns {
            height: 100%;
            display: flex;

            .overview-btns-column {
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .settings-btn {
                    margin-top: clamp(0.5rem, min(2.8571vw, 3.9286vh), 2.5rem);
                    align-self: start;
                }

                .gif-character {
                    width: clamp(1.641rem, min(5.1561vw, 6.016vh), 4.375rem);
                    height: clamp(2.344rem, min(7.366vw, 8.594vh), 6.25rem);

                    img {
                        height: 100%;
                        position: relative;
                        cursor: grab;
                    }

                    img:active {
                        cursor: grabbing;
                    }
                }

                .overview-btn {
                    margin-right: clamp(1.641rem, min(5.1561vw, 6.016vh), 4.375rem);
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    h2 {
                        padding: 0;
                    }
                }
            }

            .second-column {
                flex: 1;
            }
        }

        .explanation-row {
            display: flex;
            justify-content: space-around;

            div {
                flex: 0.33;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: end;

                span {
                    padding-top: clamp(0.25rem, min(3.333vw, 4.464vh), 1rem);
                    line-height: 0.9;
                    text-align: center;
                }

                .gif-enemy {
                    width: clamp(1.5rem, min(3.2143vw, 4.8214vh), 3.75rem);
                    height: clamp(1.75rem, min(3.75vw, 5.625vh), 4.375rem);
                }

                .gif-endboss {
                    width: clamp(2.75rem, min(5.8929vw, 8.8393vh), 6.875rem);
                    height: clamp(3rem, min(6.4286vw, 9.6429vh), 7.5rem);
                }

                .gif-collectable {
                    width: clamp(1rem, min(2.1429vw, 3.2143vh), 2.5rem);
                    height: clamp(1rem, min(2.1429vw, 3.2143vh), 2.5rem);
                }
            }
        }

        h2 {
            padding-bottom: clamp(0rem, min(1.7857vw, 2.6786vh), 1.25rem);
            text-align: center;
        }

        .credits {
            width: 100%;

            td {
                width: 50%;
                padding: clamp(0.125rem, min(0.7143vw, 1.0714vh), 0.625rem) clamp(0.125rem, min(1.25vw, 1.875vh), 1rem);
                font-size: clamp(0.625rem, min(2.5vw, 3.75vh), 2.375rem);
                line-height: 0.9;
            }

            .artist {
                text-align: right;
            }
        }
    }
}

.settings {
    width: clamp(11.206rem, min(56.76vw, 85.14vh), 50.938rem);
    height: 100%;
    padding-top: clamp(3.125rem, min(15.5357vw, 23.3036vh), 14rem);
    padding-right: clamp(1.375rem, min(8.75vw, 13.125vh), 7.5rem);
    padding-left: clamp(0.875rem, min(4.4643vw, 6.6964vh), 4rem);
    background-image: url("./img/gui/menu/settings.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    flex-direction: column;

    .settings-audio {
        padding-top: clamp(1.875rem, min(9.8214vw, 14.7321vh), 8.75rem);
        display: flex;
        flex-direction: column;

        div {
            width: 100%;
            display: flex;
            justify-content: space-between;

            .volume-regulator {
                width: clamp(5.35rem, min(30.5714vw, 45.8571vh), 26.75rem);
                height: clamp(0.85rem, min(4.8571vw, 7.2857vh), 4.25rem);
                display: flex;
                justify-content: space-between;
                background-size: cover;
                background-repeat: no-repeat;
            }
        }
    }

    .settings-controls-fullscreen {
        width: 100%;
        padding-top: clamp(0.563rem, min(3.1243vw, 4.687vh), 2.75rem);
        gap: clamp(0.563rem, min(2.41vw, 3.615vh), 2.25rem);
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
}

canvas {
    background-color: black;
    display: block;
}

.game-overlay {
    width: 100%;
    gap: 8px;
    transform: translateY(-100%);
    display: flex;
    flex-direction: column;

    .game-overlay-sections {
        width: 720px;
        height: 480px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .game-buttons {
            width: 100%;
            display: flex;
            justify-content: end;
            padding: clamp(0.25rem, min(1.0714vw, 1.0714vh), 1rem) clamp(0.25rem, min(1.0714vw, 1.0714vh), 1rem) 0 0;
            z-index: 2;
            gap: clamp(0.125rem, min(0.3571vw, 0.7143vh), 0.5rem);
            position: fixed;
            top: 0;
        }

        .game-menu {
            width: clamp(11.206rem, min(56.76vw, 83.026vh), 50.938rem);
            height: 100%;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            display: flex;

            .retry-btn {
                background-image: url("./img/gui/buttons/button_retry.png");
            }

            .retry-btn:hover {
                background-image: url("./img/gui/buttons/button_retry_pressed.png");
            }

            .main-menu-btn {
                background-image: url("./img/gui/buttons/button_main_menu.png");
            }

            .main-menu-btn:hover {
                background-image: url("./img/gui/buttons/button_main_menu_pressed.png");
            }
        }

        .reset-options {
            background-image: url("./img/gui/menu/reset.png");
            display: flex;
            flex-direction: column;
            padding-top: clamp(3.75rem, min(17.8571vw, 26.7857vh), 16.25rem);
            padding-left: clamp(0.75rem, min(2.8571vw, 4.2857vh), 2.75rem);

            div {
                padding-top: clamp(0.5rem, min(3.2143vw, 4.5714vh), 2.75rem);
                padding-left: clamp(0.625rem, min(3.5714vw, 5vh), 3.125rem);
                gap: clamp(1rem, min(4.8214vw, 6.2143vh), 4.375rem);
                display: flex;
                flex-direction: column;
            }
        }

        .game-over {
            background-image: url("./img/gui/menu/gameover.png");
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding-top: clamp(1.75rem, min(10vw, 14.1176vh), 8.75rem);
            padding-left: clamp(1.75rem, min(10vw, 14.1176vh), 8.75rem);
            gap: clamp(1rem, min(4.8214vw, 6.2143vh), 4.375rem);
        }

        .victory {
            background-image: url("./img/gui/menu/victory.png");
            display: flex;
            flex-direction: column;
            justify-content: flex-start;

            .gem-counter {
                height: clamp(6.25rem, min(35.7143vw, 51.4286vh), 31.25rem);
                background-image: url("./img/gui/win_gems/win_gems_00.png");
                background-color: transparent;
                background-size: cover;
                background-repeat: no-repeat;
                pointer-events: none;
            }

            .victory-btns {
                display: flex;
                flex-direction: column;
                padding-top: clamp(1.25rem, min(1.7857vw, 2.5vh), 2.5rem);
                padding-left: clamp(1.75rem, min(8.2143vw, 11.7143vh), 7.5rem);
                gap: clamp(1rem, min(5.7143vw, 8.5714vh), 5rem);

                .disabled-btn {
                    pointer-events: none;
                    filter: opacity(0.6);
                }

                .disabled-btn:hover {
                    background-image: initial !important;
                    cursor: default !important;
                }
            }
        }
    }
}

.mobile-controls {
    width: 100%;
    height: 0;
    justify-items: end;
    z-index: 2;
    position: relative;
    display: none;

    .mobile-btns {
        width: 100%;
        padding: 0 clamp(0.5rem, min(2.8571vw, 3.9286vh), 2.5rem);
        margin-top: clamp(0.75rem, min(0.3571vw, 0.5357vh), 1rem);
        transform: translateY(-100%);
        display: flex;
        align-items: center;
        justify-content: space-between;

        button {
            width: clamp(1.25rem, min(6.25vw, 9.375vh), 6.25rem);
            height: clamp(1.25rem, min(6.25vw, 9.375vh), 6.25rem);
            background-color: transparent;
            background-size: cover;
            transform: translateY(-50%);
        }

        .btns-right {
            display: flex;
            align-items: center;
            gap: clamp(0.5rem, min(2.8571vw, 3.9286vh), 2.5rem);

            div {
                display: flex;
                flex-direction: column;
                gap: clamp(0.75rem, min(0.3571vw, 0.5357vh), 1rem);
            }
        }
    }
}

.mobile-alert {
    height: 0;
    z-index: 3;
    display: none;

    .dark-bg {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: translateY(0%);

        img {
            width: auto;
            height: clamp(7.75rem, min(38.75vw, 47.125vh), 31rem);
        }
    }
}

.controls {
    width: 100%;
    display: flex;
    justify-content: space-evenly;

    .controls-section {
        display: flex;
        align-items: center;
        padding: clamp(0.5rem, min(2.1429vw, 3.2143vh), 2rem) clamp(0.5rem, min(0.7143vw, 1.0714vh), 1rem);

        div {
            display: flex;
            flex-direction: column;
            gap: clamp(0.125rem, min(0.5357vw, 0.8929vh), 0.5rem);
        }

        img {
            width: fit-content;
            height: clamp(1rem, min(4.2857vw, 6.4286vh), 4rem);
        }

        span {
            font-size: clamp(0.75rem, min(2.1429vw, 3.2143vh), 2.25rem);
            padding-left: clamp(0.25rem, min(1.4286vw, 2.1429vh), 1.25rem);
        }
    }
}

.d-none {
    display: none !important;
}

.low-opacity {
    filter: opacity(0.5);
}

.dark-bg {
    background-color: rgba(0, 0, 0, 0.3);
}

@media screen and (orientation: portrait) and (pointer: coarse) and (max-width: 950px) {
    .mobile-alert {
        display: flex !important;
    }
}

@media screen and (pointer: coarse) {
    body {
        overflow: hidden !important;
        display: flex;
        align-items: center;
    }

    h1 {
        display: none;
    }

    .mobile-controls {
        display: block;
    }

    .controls {
        display: none;
    }

    .show-controls-btn {
        filter: opacity(0.5);
        pointer-events: none;
    }

    .settings-controls-fullscreen {
        filter: opacity(0.5);
        pointer-events: none;
    }
}