.cut_scenes-container {
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

main.cutscenes {
    .game-container,
    .game_options-container {
        display: none;
    }
}

.cut_scenes_title-container {
    --outline_color: white;
    --outline_width: 0.35;
    --plus_ow: calc(var(--outline_width) * min(0.5vw, 1vh));
    --minus_ow: calc(var(--outline_width) * min(-0.5vw, -1vh));
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: 0;
    visibility: hidden;
    .cut_scenes_title {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        span {
                display: block;
                font-size: min(11vw, 22vh);
                font-weight: 700;
                font-family: "Mikado";
                line-height: min(9vw, 18vh);
                color: #8055b9;
                text-shadow: var(--plus_ow) var(--plus_ow) 0 var(--outline_color),
                    var(--minus_ow) var(--minus_ow) 0 var(--outline_color),
                    var(--plus_ow) var(--minus_ow) 0 var(--outline_color),
                    var(--minus_ow) var(--plus_ow) 0 var(--outline_color);
        }
    }
}

.cut_scenes_dialog-container {
    --outline_color: white;
    --outline_width: 0.35;
    --plus_ow: calc(var(--outline_width) * min(0.5vw, 1vh));
    --minus_ow: calc(var(--outline_width) * min(-0.5vw, -1vh));
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: 0;
    visibility: hidden;
    text-shadow: var(--plus_ow) var(--plus_ow) 0 var(--outline_color),
        var(--minus_ow) var(--minus_ow) 0 var(--outline_color),
        var(--plus_ow) var(--minus_ow) 0 var(--outline_color),
        var(--minus_ow) var(--plus_ow) 0 var(--outline_color);
}

.cut_scenes_characters-container {
    --outline_color: #8055b9;
    --outline_width: 0.5;
    --plus_ow: calc(var(--outline_width) * min(0.5vw, 1vh));
    --minus_ow: calc(var(--outline_width) * min(-0.5vw, -1vh));
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: end;
}

.cut_scenes_character_block-container {
    width: 30%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: end;
    visibility: hidden;
}

.cut_scenes_character_1_block-container {
    justify-content: center;
}

.cut_scenes_character_2_block-container {
    justify-content: center;
}

.cut_scenes_character-container {
    width: auto;
    height: 64%;
    aspect-ratio: 0.85;
    padding-bottom: 3%;
    display: flex;
    justify-content: center;
    align-items: end;
    position: relative;
    /* overflow: hidden; */
}

.cut_scenes_character_2-container {
    transform-origin: center center;
    rotate: y 180deg;
}

.cut_scenes_character {
    /* width: 70%; */
    height: 100%;
    object-fit: contain;
}

[data-charactername="cleopatra"] {
    height: 70%;
    .cut_scenes_character {
        height: 115%;
    }
    .cut_scenes_character_dialog-wrapper {
        right: 10%;
    }
}

[data-charactername="rogergold"] {
    height: 70%;
    .cut_scenes_character {
        height: 120%;
    }
    .cut_scenes_character_dialog-wrapper {
        right: 10%;
    }
}

[data-charactername="edwardmarshall"] {
    height: 70%;
    .cut_scenes_character {
        height: 115%;
    }
    .cut_scenes_character_dialog-wrapper {
        right: 10%;
    }
}

[data-charactername="lancelot"] {
    height: 70%;

    .cut_scenes_character {
        height: 120%;
    }

    .cut_scenes_character_dialog-wrapper {
        right: 10%;
    }
}

[data-charactername="kingrobert"] {
    height: 70%;

    .cut_scenes_character {
        height: 120%;
    }

    .cut_scenes_character_dialog-wrapper {
        right: 10%;
    }
}

[data-charactername="popoi"] {
    height: 70%;
    .cut_scenes_character {
        height: 120%;
    }
    .cut_scenes_character_dialog-wrapper {
        right: 10%;
    }
}

.cut_scenes_character_dialog-wrapper {
    --shadow: #61616157;
    position: absolute;
    top: 0;
    right: 0;
    filter: drop-shadow(min(0.25vw, 0.5vh) min(0.5vw, 1vh) min(0.15vw, 0.3vh) var(--shadow));
}

.cut_scenes_character_dialog-container {
    --outline_color: #8055b9;
    --outline_width: 0.5;
    --plus_ow: calc(var(--outline_width) * min(0.5vw, 1vh));
    --minus_ow: calc(var(--outline_width) * min(-0.5vw, -1vh));
    width: min(55vw, 110vh);
    height: auto;
    aspect-ratio: 3;
    background-color: var(--outline_color);
    background-color: #a78ccb;
    background-color: #c8c8b987;
    position: absolute;
    top: 0;
    right: 0;
    translate: 75% -75%;
    clip-path: polygon(10% 0, 83% 0, 100% 25%, 95% 64%, 35% 77%, 31% 74%, 22% 100%, 27% 70%, 3% 50%, 0 32%);
    clip-path: polygon(10% 3%, 83% 0, 100% 25%, 95% 64%, 35% 77%, 31% 74%, 22% 100%, 27% 70%, 3% 50%, 0 32%);
    /* animation: dialogboxborder 2s linear infinite alternate; */
}

@keyframes dialogboxborder {
    from { background-color: #a78ccb; }
    to { background-color: #d9c6f2; }
}

.cut_scenes_character_2_dialog-container {
    display: none;
}

.cut_scenes_character_dialog_bubble {
    width: 100%;
    height: 100%;
    display: block;
    background-image: linear-gradient(180deg, beige, white, #e7e7e7);
    position: absolute;
    top: 0;
    left: 0;
    clip-path: polygon(10.5% 3%, 82.75% 3%, 98.75% 26.5%, 94.25% 61.25%, 35% 74.25%, 30.75% 70.5%, 24.75% 89%, 28.5% 68.25%, 3.75% 47.5%, 1.25% 32%);
    clip-path: polygon(10.375% 5.25%, 82.875% 2.5%, 99% 26.125%, 94.5% 61.75%, 35% 74.5%, 30.75% 71%, 24.75% 89%, 28.5% 68.75%, 3.625% 47.875%, 1.025% 32.5%);
}

.cut_scenes_character_dialog_text {
    width: 90%;
    height: 32%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    font-family: "Mikado";
    /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
    font-size: min(2.15vw, 4.3vh);
    font-weight: 700;
    color: #9887b9;
    white-space: pre;
    text-shadow: min(0.25vw, 0.5vh) min(0.25vw, 0.5vh) min(0.25vw, 0.5vh) #a7a7a745;
    position: absolute;
    top: 18%;
}

.cut_scenes_character_1_dialog_text {
    left: 5%;
}

.cut_scenes_character_2_dialog_text {
    right: 3%;
    rotate: y 180deg;
}

.cut_scenes_character_dialog_text div {
    display: block;
    width: 100%;
    height: 0;
}

.cut_scenes_character_dialog_text span {
    opacity: 0;
    transition: opacity 0.3s;
}

.cut_scenes_character_dialog_text span.revealed {
    opacity: 1;
}

.cut_scenes_character_dialog_text span.green {
    color: #00d359;
}

.cut_scenes_character_dialog_text span.red {
    color: #ff0000;
}

.cut_scenes_character_dialog_text span.blue {
    color: #5353f1;
}

.cut_scenes_character_dialog_text span.yellow {
    color: #fff280;
}

.cut_scenes_character_dialog_text span.white {
    color: #ffffff;
}

.cut_scenes_character_dialog_text span.teal {
    color: teal;
}

.cut_scenes_dialog_actions-container {
    --outline_color: #766299f5;
    --outline_width: 0.27;
    --plus_ow: calc(var(--outline_width) * min(0.5vw, min(0.5vw, 1vh)));
    --plus_ow: calc(var(--outline_width) * min(0.5vw, 1vh));
    --minus_ow: calc(var(--outline_width) * min(-0.5vw, -1vh));
    width: 25%;
    height: auto;
    aspect-ratio: 7.5;
    margin-bottom: 2%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 5%;
    visibility: hidden;
}

.cut_scenes_dialog_action-container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cut_scenes_dialog_action-button {
    width: auto;
    height: 95%;
    margin-right: min(0.75vw, 1.5vh);
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(180deg, #8a8ae9ad, #8a8ae9);
    outline: none;
    border: min(0.275vw, 0.55vh) solid white;
    border-radius: 50%;
    font-family: "Mikado";
    font-size: min(1.5vw, 3vh);
    color: white;
    text-shadow: var(--plus_ow) var(--plus_ow) 0 var(--outline_color),
        var(--minus_ow) var(--minus_ow) 0 var(--outline_color),
        var(--plus_ow) var(--minus_ow) 0 var(--outline_color),
        var(--minus_ow) var(--plus_ow) 0 var(--outline_color);
    box-shadow: inset 0 0 min(0.05vw, 0.1vh) min(0.225vw, 0.45vh) #8055b9, min(0.15vw, 0.3vh) min(0.15vw, 0.3vh) min(0.3vw, 0.6vh) 0 #443858c2;
    cursor: pointer;
    transition: color 0.2s, filter 0.2s;
}

#continue_dialog {
    filter: brightness(75%);
    pointer-events: none;
}

.cut_scenes_dialog_action-title {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Mikado";
    font-size: min(2.5vw, 5vh);
    color: white;
    text-shadow: var(--plus_ow) var(--plus_ow) 0 var(--outline_color), var(--minus_ow) var(--minus_ow) 0 var(--outline_color), var(--plus_ow) var(--minus_ow) 0 var(--outline_color), var(--minus_ow) var(--plus_ow) 0 var(--outline_color), min(0.25vw, 0.3vh) min(0.25vw, 0.3vh) min(0.5vw, 1vh) #2c2c2cd8;
}

.cut_scenes_dialog-container[data-textend="nextpage"] #continue_dialog,
.cut_scenes_dialog-container[data-textend="nextdialog"] #continue_dialog,
.cut_scenes_dialog-container[data-textend="enddialog"] #continue_dialog {
    filter: brightness(100%);
    pointer-events: visible;
}

main.cutscenes .cut_scenes-container {
    display: flex;
}

.cut_scenes-container[data-view="title"] .cut_scenes_title-container {
    opacity: 1;
    visibility: visible;
    transition: visibility 0s, opacity 0.5s 2.5s;
}

.cut_scenes-container[data-view="dialog"] {
    .cut_scenes_title-container {
        opacity: 0;
        visibility: hidden;
        transition: visibility 1.05s, opacity 1s;
    }
    .cut_scenes_dialog-container {
        opacity: 1;
        visibility: visible;
        transition: visibility 0s, opacity 0.5s 1.5s;
    }
}

.cut_scenes_dialog-container[data-showcharacters="1"] {
    .cut_scenes_dialog_actions-container {
        visibility: visible;
    }
    .cut_scenes_character_1_block-container {
        visibility: visible;
    }
    .cut_scenes_character_2_block-container {
        visibility: hidden;
    }
}

.cut_scenes_dialog-container[data-showcharacters="2"] {
    .cut_scenes_dialog_actions-container {
        visibility: visible;
    }
    .cut_scenes_character_1_block-container {
        visibility: hidden;
    }
    .cut_scenes_character_2_block-container {
        visibility: visible;
    }
}

.cut_scenes_dialog-container[data-showcharacters="1,2"] {
    .cut_scenes_dialog_actions-container {
        visibility: visible;
    }
    .cut_scenes_character_1_block-container {
        visibility: visible;
    }
    .cut_scenes_character_2_block-container {
        visibility: visible;
    }
}

.cut_scenes_dialog-container[data-character="1"] {
    .cut_scenes_character_1_dialog-container {
        display: flex;
        animation: dialogpop 0.4s;
    }
    .cut_scenes_character_2_dialog-container {
        display: none;
    }
}

.cut_scenes_dialog-container[data-character="2"] {
    .cut_scenes_character_1_dialog-container {
        display: none;
    }
    .cut_scenes_character_2_dialog-container {
        display: flex;
        animation: dialogpop 0.4s;
    }
}

@keyframes dialogpop {
    0% { transform: scale(0) }
    85% { transform: scale(1.2) }
    100% { transform: scale(1) }
}