div#main_canvas_wrapper
div#hud_gamemenu_main_container {
    display: none;
    cursor: none;
    position: fixed;

    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

    width: 100%;
    height: 100%;

    font-family: 'DejaVu Sans Bold', 'Segoe UI', Arial, Helvetica, Verdana, sans-serif;

    perspective: 96vh;
    transform: perspective(96vh);

    img#hud_gamemenu_cursor {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 5.9264vh;
        height: 5.9264vh;

        pointer-events: none;
    }

    div          { font-size: 3vh; }
    div.size_tny { font-size: 1.5vh; }
    div.size_tch { font-size: 6vh; }
    div.size_med { font-size: 9vh; }
    div.size_lrg { font-size: 18vh; }

    div#hud_gamemenu_ringpad_icons {
        position: fixed;
        left: calc(50% - 7.5vh);
        top: calc(50% - 12vh);

        width: 15vh;
        height: 15vh;

        animation: menu_ringpad_btn_icon_intro 0.5s;
    }

    div#hud_gamemenu_label {
        overflow: hidden;
        position: absolute;

        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

        padding: 0.5vh;
        max-width: 60vh;

        text-align: center;
        background-color: #7e006d;
        border: 0.5vh solid #fc0099;
        border-radius: 1.5vh;

        transform-style: preserve-3d;
    }

    div#hud_gamemenu_multi {
        overflow: scroll;
        position: absolute;

        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

        padding: 0.5vh;
        max-width: 60vh;

        text-align: center;
        background-color: #7e006d;
        border: 0.5vh solid #fc0099;
        border-radius: 1.5vh;

        transform-style: preserve-3d;
    }

    div#hud_gamemenu_vstack {
        overflow: scroll;
        position: absolute;

        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2.5vh;

        transform-style: preserve-3d;
    }

    div#hud_gamemenu_ringpad {
        overflow: hidden;
        position: absolute;

        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) rotateX(80deg);
        width: 96vh;
        height: 96vh;

        background-color: #7e006d44;
        border: 1vh solid #fc0099;
        border-radius: 50%;

        transform-style: preserve-3d;
        animation: menu_ringpad_intro 0.5s;
    }

    div.hud_gamemenu_ringpad_btn_label {
        display: none;
        overflow: hidden;
        position: absolute;

        left: 50%;
        top: 50%;

        padding: 0.5vh;
        max-width: 60vh;

        text-align: center;
        /*background-color: #7e006dcc;*/
        /*border: 0.5vh solid #fc0099;*/
        border-radius: 1.5vh;

        transform-style: preserve-3d;
        animation: menu_ringpad_btn_label_intro 0.5s;
    }

    div.hud_gamemenu_ringpad_btn_label.disabled {
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        filter: grayscale(100%);
        color: #444444;
    }

    div.hud_gamemenu_ringpad_btn_label.centered:hover {
        /*background-color: #006d7ecc;*/
        /*border: 0.5vh solid #00ffff;*/
        color: #fc0099;
    }

    div.hud_gamemenu_ringpad_btn_left,
    div.hud_gamemenu_ringpad_btn_right {
        overflow: hidden;
        position: absolute;
        left: 50%;
        top: 50%;

        font-size: 6vh;
        transform-style: preserve-3d;
        animation: menu_ringpad_btn_arrow_intro 0.5s;
    }

    div.hud_gamemenu_ringpad_btn_back {
        overflow: hidden;
        position: absolute;

        padding: 0.5vh;
        max-width: 60vh;

        left: 4vh;
        bottom: 4vh;

        text-align: center;
        background-color: #7e006dcc;
        border: 0.5vh solid #fc0099;
        border-radius: 1.5vh;

        font-size: 4vh;
        transform-style: preserve-3d;
        animation: menu_ringpad_btn_back_intro 0.5s;
    }

    div.hud_gamemenu_ringpad_btn_back:hover {
        background-color: #006d7ecc;
        border: 0.5vh solid #00ffff;
        border-radius: 1.5vh;
    }

    div.hud_gamemenu_ringpad_btn_left:hover,
    div.hud_gamemenu_ringpad_btn_right:hover {
        background-color: #7e006dcc;
        border: 0.5vh solid #fc0099;
        border-radius: 1.5vh;
    }

    div.hud_gamemenu_ringpad_btn_left  { transform: translate(calc(-50% - 20vh), calc(-50% + 20vh)); }
    div.hud_gamemenu_ringpad_btn_right { transform: translate(calc(-50% + 20vh), calc(-50% + 20vh)); }
}

@keyframes menu_ringpad_intro {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotateX(45deg); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotateX(80deg); }
}

@keyframes menu_ringpad_btn_label_intro {
    0%   { top: 0%;  opacity: 0; }
    100% { top: 50%; opacity: 1; }
}

@keyframes menu_ringpad_btn_icon_intro {
    0%   { top: calc(0% - 12vh);  opacity: 0; }
    100% { top: calc(50% - 12vh); opacity: 1; }
}

@keyframes menu_ringpad_btn_arrow_intro {
    0%   { top: 100%; opacity: 0; }
    100% { top: 50%;  opacity: 1; }
}

@keyframes menu_ringpad_btn_back_intro {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

/*****************************************************************************/

/* GAME FINISHED UI SCREEN */

div#wgclgame_gamefinished {
    display: none;
    cursor: none;
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1002;

    background-color: #88006644;
    -webkit-backdrop-filter: blur(4vh);
    -moz-backdrop-filter: blur(4vh);
    -o-backdrop-filter: blur(4vh);
    backdrop-filter: blur(4vh);

    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;

    transition: opacity 0.3s;
}

div#wgclgame_gamefinished * {
    cursor: none;
}

div#wgclgame_gamefinished_title {
    visibility: hidden;
    overflow: hidden;
    position: fixed;
    left: 50%;
    top: 5vh;
    width: calc(100% - 25vw);
    max-width: 72vh;
    transform: translate(-50%, 0%);

    padding: 2vh;

    background-color: #880066;
    border: solid 1.5vh #cc0099;
    border-radius: 3vh;

    text-align: center;
    font-size: 3vh;

    animation-duration: 2.0s;
}

h1#wgclgame_gamefinished_title_text span {
    background-image: linear-gradient(red, yellow);
    -webkit-background-clip: text;
    background-clip: text;
    color: #ffae00;
    color: #ffae0000;
    text-shadow: none !important;
    filter: drop-shadow(0.07em 0.07em rgba(0, 0, 0, 0.5));
}

div#wgclgame_gamefinished_stats {
    position: fixed;
    left: 50%;
    top: 50%;
    width: 100%;
    transform: translate(-50%, -50%);

    text-align: center;
    font-size: 3.5vh;
}

div#wgclgame_gamefinished_stats div {
    margin: auto;
    display: grid;
    width: 100%;
    max-width: 100vh;

    padding-top: 2vh;

    grid-template-columns: 50% 50%;
}

div#wgclgame_gamefinished_stats p.wgcl_stats_center {
    visibility: hidden;
    width: 100%;
    animation-duration: 0.3s;
}

div#wgclgame_gamefinished_stats div p.wgcl_stats_left {
    visibility: hidden;
    width: calc(100% - 4vh);
    max-width: 50vh;
    padding-left: 2vh;
    padding-right: 2vh;
    text-align: right;

    animation-duration: 0.3s;
}

div#wgclgame_gamefinished_stats div p.wgcl_stats_right {
    visibility: hidden;
    width: calc(100% - 4vh);
    max-width: 50vh;
    padding-left: 2vh;
    padding-right: 2vh;
    text-align: left;

    animation-duration: 0.3s;
}

div#wgclgame_gamefinished_buttons {
    visibility: collapse;
    position: fixed;
    left: 50%;
    bottom: 5vh;
    width: 100%;
    max-width: 55vh;
    transform: translate(-50%, 0%);
    animation-duration: 0.3s;
}

div#wgclgame_gamefinished_buttons button.wgclgame_gamefinished_btns {
    overflow: hidden;
    margin: 1vh 1vh;
    padding: 1vh;
    width: calc(100% - 2vh);

    font-family: 'DejaVu Sans', 'Segoe UI', Arial, sans-serif;
    font-size: 3vh;
    color: white;
    background-color: #000088;
    border: none;
    border-radius: 3vh;

    transition: background-color 0.3s;
}

div#wgclgame_gamefinished_buttons button.wgclgame_gamefinished_btns:hover {
    background-color: #0000cc;
}

div#wgclgame_gamefinished_buttons button.wgclgame_gamefinished_btns:disabled,
div#wgclgame_gamefinished_buttons button.wgclgame_gamefinished_btns:disabled:hover,
div#wgclgame_gamefinished_buttons button.wgclgame_gamefinished_btns:first-child:disabled,
div#wgclgame_gamefinished_buttons button.wgclgame_gamefinished_btns:first-child:disabled:hover {
    background-color: #444444;
    color: #888888;
}

div#wgclgame_gamefinished_buttons button.wgclgame_gamefinished_btns:first-child {
    background-color: #008800;
}

div#wgclgame_gamefinished_buttons button.wgclgame_gamefinished_btns:first-child:hover {
    background-color: #00cc00;
}

div#wgcl_sysmenu_cursor {
    display: none;
    position: absolute;
    z-index: 999999;
    width: 5.9264vh;
    height: 5.9264vh;

    pointer-events: none;

    img { width: 100%; height: 100%; }
}

@media screen and (aspect-ratio > 1.2) {
    div#wgclgame_gamefinished_stats {
        font-size: 4.5vh;
    }
}

@media screen and (aspect-ratio < 1) {
    div#wgclgame_gamefinished_buttons button.wgclgame_gamefinished_btns {
        margin: 1vh 5vh;
        width: calc(100% - 10vh);
    }
}

@media screen and (aspect-ratio > 1) {
    div#wgclgame_gamefinished_buttons {
        display: grid;
        grid-template-columns: 50% 50%;
    }
}

@media screen and (aspect-ratio < 0.75) {
    div#wgclgame_gamefinished_title {
        font-size: 2vh;
    }

    div#wgclgame_gamefinished_stats {
        font-size: 2.5vh;
    }
}

@keyframes wgclgame_gamefinished_title_intro_desktop {
    0% {
        opacity: 0;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) scale(0.5);
    }
    25% {
        opacity: 1;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) scale(1.5);
    }
    75% {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) scale(1.5);
    }
    100% {
        left: 50%;
        top: 5vh;
        transform: translate(-50%, 0%) scale(1);
    }
}

@keyframes wgclgame_gamefinished_title_intro {
    0% {
        opacity: 0;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) scale(0.5);
    }
    25% {
        opacity: 1;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) scale(1);
    }
    75% {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        left: 50%;
        top: 5vh;
        transform: translate(-50%, 0%) scale(1);
    }
}

@keyframes wgclgame_gamefinished_stats_center_intro {
    from { opacity: 0; transform: translateY(10vh); }
    to { opacity: 1; transform: translateY(0vh); }
}

@keyframes wgclgame_gamefinished_stats_left_intro {
    from { opacity: 0; transform: translateY(10vh) rotateZ(30deg); }
    to { opacity: 1; transform: rotateZ(0deg); }
}

@keyframes wgclgame_gamefinished_stats_right_intro {
    from { opacity: 0; transform: translateY(10vh) rotateZ(-30deg); }
    to { opacity: 1; transform: rotateZ(0deg); }
}

@keyframes wgclgame_gamefinished_stats_btns_intro {
    from { opacity: 0; transform: translate(-50%, 10vh); }
    to { opacity: 1; transform: translate(-50%, 0vh); }
}

@media (display-mode: window-controls-overlay) {
    div#wgclgame_gamefinished {
        top: env(titlebar-area-y, 0);
        height: calc(100% - env(titlebar-area-height, 0));
    }

    div#wgcl_sysmenu_cursor {
        transform: translateY(calc(env(titlebar-area-height, 0) * -1));
    }
}

/* END GAME FINISHED UI SCREEN */

/*****************************************************************************/