:root {
    --gap: 5px;

    --green-hover: #3af1c0;
    --green: #1dd1a1;
    --green-dark: #109b78;

    --blue-hover: #90e2f5;
    --blue: #59c2da;
    --blue-dark: #089cbd;

    --black-hover: #445266;
    --black: #222835;
    --black-dark: #141518;

    --red-dark-hover: rgb(211, 88, 88);
    --red-dark: #990000;
    --red-dark-dark: hsl(0, 41%, 32%);


    --red-hover: #ff9b9b;
    --red: #ff6b6b;
    --red-dark: #c44646;

    --yellow-hover: rgb(255, 236, 126);
    --yellow: #feca57;
    --yellow-dark: #c79e47;

    --purple-hover: #ffd2f9;
    --purple: #ff9ff3;
    --purple-dark: #f368e0;

    --wood-hover: #ffe8cb;
    --wood: #deb887;
    --wood-dark: #a18663;
    font-family: "Roboto", sans-serif;
}

#loader {
    position: absolute;
    width: 100vw;
    height: 100vh;
    text-align: center;
    vertical-align: middle;
    top: 0;
    left: 0;
    right: 0;
    left: 0;
    margin: auto;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 5px;
    z-index: 9999;
    color: #3af1c0;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
}

body {
    width: 100vw;
    height: 100vh;
    font-family: "Roboto", sans-serif;
    margin: 0;
    overflow: hidden;
    color: #fff;
    /* background-color: #089cbd;  */
    display: inline-flex;
    flex-direction: column;
    
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Old versions of Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
}


#content {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: #000000dc;
    display: block;
    box-shadow: 0px 0vh 5vh #000000ef; 
    border: solid 1px #a55d0052;
}

.content-parent {
    position: relative;
    width: 100vw;
    height: 100vh;
    /* padding-bottom: 57%; */
    /* задает аспект-рейтинг 4:3 (примерно 75%) */
    display: flex;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: 0;
    align-items: center;
    justify-content: center;
    /* background-color: #000000; */
    background-image: url('../images/stones.webp');
    background-repeat: no-repeat;
    background-size: cover;
    

}

.ui-buttons-panel {
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    position: absolute;
    pointer-events: none;
    right: 0;
    left: 0;
    top: 0;
    margin: 0;
    width: 100px;
    height: 100px;
}

.ui-right-buttons-panel {

    position: relative;
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    flex-direction: row-reverse;
    align-content: start;
    gap: 20px;
    flex-wrap: wrap;
    position: absolute;
    pointer-events: none;
    right: 0;
    top: 0;
    margin: 0;
    width: 100px;
    height: 300px;
}

.button.ui-button {
    font-size: 34px;
    max-width: 60px;
    max-height: 60px;
    display: flex;
    align-items: center;
    justify-items: center;
    pointer-events: all;
}




.rubik-maps-regular {
    font-family: "Rubik Maps", system-ui;
    font-weight: 400;
    font-style: normal;
}

.rubik-moonrocks-regular {
    font-family: "Rubik Moonrocks", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.my-dialog {
    position: relative;
    height: 80vh;
    box-sizing: border-box;
    aspect-ratio: 850/700;
    color: rgb(240, 219, 204);
    outline: none;
    padding: 3%; 
    max-width: 60vw;
    overflow: visible;
    background-color: transparent;
    backdrop-filter: blur(5px);
    border-image: url("../images/dialog.webp") 1 1 1 1 fill;
    transition: all 500ms cubic-bezier(.47, 1.64, .41, .8);
    transform: scale(1);
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Old versions of Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */

}

.dialog-content {
    box-sizing: border-box;
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 5vh;
    padding-top: 3vh;
    gap: 2vh;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.dialog-title {
    width: 100%;
    text-align: center;
    position: relative;
    justify-self: center;
    font-size: 1.8vw;
    font-weight: 500;
    text-shadow: #000000d3 2px 2px 5px;
}

.dialog-text {
    position: relative;
    font-size: 1.4vw;
    font-weight: 500;
    text-shadow: #0000008f 2px 2px 5px;
}

dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.596);
    backdrop-filter: blur(5px);

}

.dialog-character {
    width: 100vh;
    position: absolute;
    bottom: 0px;
    left: -150px;

    margin: auto;
}

.dialog_button_row {
    position: absolute;
    bottom: 3vh;
    left:0%;
    right: 0%;
    margin: auto;
    display: flex; 
    justify-content: center;
    align-content: center;
    gap: 3vh;
    
}

.dialog-character img {
    width: 10vw;
}



.dialog-quote-text {
    font-size: 0.8vw;
    font-style: italic;
}



.button {
    width: auto;
    max-width: fit-content;
    height: fit-content;
    box-sizing: border-box;
    font-size: 18px;
    font-weight: bolder;
    border: 2px solid var(--wood-hover);
    border-bottom: var(--wood-dark) 6px solid;
    border-radius: 8px;
    background-color: var(--wood);
    color: #2e1b06;
    cursor: pointer;
    display: block;
    justify-content: center;
    align-items: center;
    padding: 10px 10px;
    box-shadow: 4px 4px 3px #000000cc;
    transition: all 100ms cubic-bezier(.47, 1.64, .41, .8);
}


.button:hover {
    background-color: var(--wood-hover);
}

.button:active {
    background-color: var(--wood);
    border: 2px solid var(--wood-hover);
    border-bottom: var(--wood-hover) 2px solid;
}

.button.button-disabled {
    background-color: #cccccc;
    border: 2px solid #adadad;
    border-bottom: #adadad 2px solid;
}

/* цветные кнопки */
.button-green {
    color: black;
    background-color: var(--green);
    border: 2px solid var(--green-hover);
    border-bottom: var(--green-dark) 6px solid;
}

.button-green:hover {
    background-color: var(--green-hover);
    transform: scale(1.05);
}

.button-green:active {
    background-color: var(--green);
    border: 2px solid var(--green-hover);
    border-bottom: var(--green-hover) 2px solid;
}

.button-blue {
    color: black;
    background-color: var(--blue);
    border: 2px solid var(--blue-hover);
    border-bottom: var(--blue-dark) 6px solid;
}

.button-blue:hover {
    background-color: var(--blue-hover);
    transform: scale(1.05);
}

.button-blue:active {
    background-color: var(--blue);
    border: 2px solid var(--blue-hover);
    border-bottom: var(--blue-hover) 2px solid;
}

.button-black {
    color: black;
    background-color: var(--black);
    border: 2px solid var(--black-hover);
    border-bottom: var(--black-dark) 6px solid;
}

.button-black:hover {
    background-color: var(--black-hover);
    transform: scale(1.05);
}

.button-black:active {
    background-color: var(--black);
    border: 2px solid var(--black-hover);
    border-bottom: var(--black-hover) 2px solid;
}

.button-red {
    color: black;
    background-color: var(--red);
    border: 2px solid var(--red-hover);
    border-bottom: var(--red-dark) 6px solid;
}

.button-red:hover {
    background-color: var(--red-hover);
    transform: scale(1.05);
}

.button-red:active {
    background-color: var(--red);
    border: 2px solid var(--red-hover);
    border-bottom: var(--red-hover) 2px solid;
}

.button-red-dark {
    color: black;
    background-color: var(--red-dark);
    border: 2px solid var(--red-dark-hover);
    border-bottom: var(--red-dark-dark) 6px solid;
}

.button-red:hover {
    background-color: var(--red-dark-hover);
    transform: scale(1.05);
}

.button-red:active {
    background-color: var(--red-dark);
    border: 2px solid var(--red-dark-hover);
    border-bottom: var(--red-dark-hover) 2px solid;
}




.button-yellow {
    color: black;
    background-color: var(--yellow);
    border: 2px solid var(--yellow-hover);
    border-bottom: var(--yellow-dark) 6px solid;
}

.button-yellow:hover {
    background-color: var(--yellow-hover);
    transform: scale(1.05);
}

.button-yellow:active {
    background-color: var(--yellow);
    border: 2px solid var(--yellow-hover);
    border-bottom: var(--yellow-hover) 2px solid;
}

.button-purple {
    color: black;
    background-color: var(--purple);
    border: 2px solid var(--purple-hover);
    border-bottom: var(--purple-dark) 6px solid;
}

.button-purple:hover {
    background-color: var(--purple-hover);
    transform: scale(1.05);
}

.button-purple:active {
    background-color: var(--purple);
    border: 2px solid var(--purple-hover);
    border-bottom: var(--purple-hover) 2px solid;
}

.icon {
    width: 100%;
    height: 100%;
}


.fullscreen_icon {
    content: url("../images/icon_fullscreen.webp");     
    width: 100%;
    height: 100%;
}

.fullscreen_icon:fullscreen {
    content: url("../images/icon_fullscreen_off.webp");     
}


.sound_on {
    content: url("../images/sound_on.webp");     
    width: 100%;
    height: 100%;
}

.sound_off {
    content: url("../images/sound_off.webp");     
    width: 100%;
    height: 100%;
}