$font-family: "Inter";
$font-weight: 700;
$font-weight-bold: bold;
$primary-color: rgba(232, 255, 244, 0.8);
$secondary-color: #809F91;

GameOverScreen {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(black, 0.7);
    font-family: "Cal Sans";
    color: white;
    font-size: 32px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: all 0.1s ease-in-out;
    z-index: 991;
    padding: 32px;
    backdrop-filter: blur(8px);
    gap: 8px;

    .title_win {
        position: relative;
        width: 373px;
        height: 70px;
        margin-top: 23px;
        background-image: url("/textures/ui/panel/gameover_win_text.png");
        background-position: center;
        background-size: 100% 100%;
        flex-shrink: 0;
    }

    .title_lose {
        position: relative;
        width: 373px;
        height: 70px;
        margin-top: 23px;
        background-image: url("/textures/ui/panel/gameover_lose_text.png");
        background-position: center;
        background-size: 100% 100%;
        flex-shrink: 0;
    }
    //.timer {
    //	position: relative;
    //	color: #ff7777;
    //	font-size: 42px;
    //	font-weight: bold;
    //	padding: 4px 10px;
    //text-shadow: 3px 3px 0px black;
    //	text-stroke: 8px #222;
    //	white-space: pre;
    //	justify-content: center;
    //	align-items: center;
    //	text-align: center;
    //	background-color: #0002;
    //	backdrop-filter: blur( 1px );
    //}
    //.difficulty {
    //	position: absolute;
    //	top: 5%;
    //	color: #ff7777;
    //	font-size: 42px;
    //	font-weight: bold;
    //	text-stroke: 8px #222;
    //	justify-content: center;
    //	align-items: center;
    //	text-align: center;
    //	background-color: #0002;
    //	backdrop-filter: blur( 1px );
    //	padding: 8px;
    //}

    > .content {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 30px;
        width: 100%;
        height: 90%;
        //flex-shrink: 1;
        //border: 1px solid green;
        margin-top: -10px;

        > .left {
            //flex-grow: 1;
            width: 550px;
            //height: 98.5%;
            height: 100%;
            //background-color: rgba(white, 0.125);
            justify-content: center;
            align-items: center;
            //border: 4px solid red;
            //margin: 4px;
            //border-image: url("/textures/ui/panel/leaderboard_border.png") 12 / 4px;
            //border-image: url("/textures/ui/border-diamonds.png") 12 / 4px;

            background-position: center;
            background-size: 100% 100%;
            background-image: url("/textures/ui/panel/gameover_results_bg.png");
        }

        > .right {
            flex-shrink: 0;
            width: 550px;
            height: 100%;
            //background-color: rgba(white, 0.02);
            //padding: 16px;
            //border: 1px solid blue;

            LeaderboardPanel {
                position: relative;
                //top: 0;
                //left: 0;
                //right: 0;
                //background-color: transparent;
                //backdrop-filter: blur(0);
                width: 100%;
                height: 100%;
                left: 0px;
                top: 0px;
                //border: 1px solid white;
                //flex-grow: 1;
            }
            //.fill {
            //	flex-grow: 1;
            //}
        }



        .col {
            flex-direction: column;
            flex-shrink: 0;
        }
    }

    > .are-you-sure {
        position: absolute;
        z-index: 10000;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        justify-content: center;
        align-items: center;
        pointer-events: all;
        background-color: rgba(black, 0.7);
        backdrop-filter: blur( 4px );
        opacity: 1;
        transition: opacity 0.15s ease;

        > .panel {
            position: relative;
            left: 0px;
            width: 800px;
            height: 200px;
            background-color: rgba(#8888ff, 0.04);
            padding: 16px;
            gap: 16px;
            flex-direction: column;
            transition: all 0.2s ease;
            background-position: center;
            background-size: 100% 100%;
            background-image: url("/textures/ui/panel/confirm_panel.png");

            > .title {
                font-size: 32px;
                text-shadow: 0 0 0 transparent;
                margin-left: 12px;
                margin-top: 4px;
            }

            > .row {
                width: 100%;
                justify-content: space-evenly;
                gap: 16px;
            }

            &:intro {
                left: -64px;
            }
        }

        &:intro {
            opacity: 0;
        }

        &:outro {
            opacity: 0;
        }
    }

    .controls {
        position: relative;
        width: 500px;
        height: 76px;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        margin-bottom: -8px;

        button {
            position: relative;
            width: 40%;
            height: 100%;
            //background-color: #4CAF50;
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            font-size: 32px;
            margin: 2px 8px 8px 8px;
            margin-left: 8px;
            margin-right: 8px;
            cursor: pointer;
            //box-shadow: 6px 6px 0px black;
            cursor: "select-cursor";
            pointer-events: all;
            background-position: center;
            background-size: 100% 100%;
            //border: 1px solid red;

            InputHint.inputbutton {
                position: absolute;
                right: -8px;
                top: -8px;
                pointer-events: none;
                font-size: 15px;
                width: 40px;
                padding: 8px;
                opacity: 1.5;

                img {
                    background-image-tint: rgba(230, 255, 240, 0.8);
                }
            }
        }

        .restart_button {
            background-image: url("/textures/ui/panel/gameover_restart.png");

            &.controller {
                background-image: url("/textures/ui/panel/gameover_restart_controller.png");
            }

            &:hover {
                background-image: url("/textures/ui/panel/gameover_restart_hover.png");
                sound-in: ui.button.over;
            }

            &:active {
                background-image: url("/textures/ui/panel/gameover_restart_active.png");
                sound-in: ui.button.press;
            }

            &.controller.ctrl-held {
                background-image: url("/textures/ui/panel/gameover_restart_controller_hover.png");
            }

            &.controller.ctrl-activated {
                background-image: url("/textures/ui/panel/gameover_restart_controller_active.png");
            }
        }

        .lobby_button {
            background-image: url("/textures/ui/panel/gameover_lobby.png");

            &.controller {
                background-image: url("/textures/ui/panel/gameover_lobby_controller.png");
            }

            &:hover {
                background-image: url("/textures/ui/panel/gameover_lobby_hover.png");
                sound-in: ui.button.over;
            }

            &:active {
                background-image: url("/textures/ui/panel/gameover_lobby_active.png");
                sound-in: ui.button.press;
            }

            &.controller.ctrl-held {
                background-image: url("/textures/ui/panel/gameover_lobby_controller_hover.png");
            }

            &.controller.ctrl-activated {
                background-image: url("/textures/ui/panel/gameover_lobby_controller_active.png");
            }
        }

        .leave_button {
            background-image: url("/textures/ui/panel/esc_button_leave.png");

            &.controller {
                background-image: url("/textures/ui/panel/esc_button_leave_controller.png");
            }

            &:hover {
                background-image: url("/textures/ui/panel/esc_button_leave_hover.png");
                sound-in: ui.button.over;
            }

            &:active {
                background-image: url("/textures/ui/panel/esc_button_leave_active.png");
                sound-in: ui.button.press;
            }

            &.controller.ctrl-held {
                background-image: url("/textures/ui/panel/esc_button_leave_controller_hover.png");
            }

            &.controller.ctrl-activated {
                background-image: url("/textures/ui/panel/esc_button_leave_controller_active.png");
            }
        }
    }

    .confirm_no_button {
        position: relative;
        height: 72px;
        pointer-events: all;
        background-position: center;
        background-size: 100% 100%;
        background-image: url("/textures/ui/panel/button_confirm_no.png");

        InputHint.inputbutton {
            position: absolute;
            right: -8px;
            top: -8px;
            pointer-events: none;
            font-size: 15px;
            width: 40px;
            padding: 8px;
            opacity: 1.5;

            img {
                background-image-tint: rgba(230, 255, 240, 0.8);
            }
        }

        &:hover {
            background-image: url("/textures/ui/panel/button_confirm_no_hover.png");
            sound-in: ui.button.over;
        }

        &:active {
            transform: translateY(4px);
            sound-in: ui.button.press;
        }
    }

    .confirm_yes_button {
        position: relative;
        height: 72px;
        pointer-events: all;
        background-position: center;
        background-size: 100% 100%;
        background-image: url("/textures/ui/panel/button_confirm_yes.png");

        InputHint.inputbutton {
            position: absolute;
            right: -8px;
            top: -8px;
            pointer-events: none;
            font-size: 15px;
            width: 40px;
            padding: 8px;
            opacity: 1.5;

            img {
                background-image-tint: rgba(230, 255, 240, 0.8);
            }
        }

        &:hover {
            background-image: url("/textures/ui/panel/button_confirm_yes_hover.png");
            sound-in: ui.button.over;
        }

        &:active {
            transform: translateY(4px);
            sound-in: ui.button.press;
        }
    }
}