@import url("https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic&display=swap");

* {
    min-height: fit-content;
    min-width: fit-content;
    font-family: "Zen Maru Gothic", Arial;
    font-size: 6vh;
    align-items: center;
    justify-content: center;
    color: #eee;
    text-wrap: nowrap;
}

html {
    min-height: 0;
    min-width: 0;
    background-color: #244;
}

body {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: 95%;
    aspect-ratio: 12/9;
    max-width: 95%;
    max-height: 95%;
    min-width: 0;
    min-height: 0;
    background-color: #333;
    border: 1vh white solid;
}

.page {
    width: 100%;
    height: 100%;
    gap: 3vh;
}

.options {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 3vh;
}

.label {
    text-align: center;
}

.headingLabel {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    padding: 1vh;
    top: 5vh;
    font-size: 10vh;
    /* background-color: rgba(230, 230, 255, 0.1); */
    /* border: 1.5vh double rgba(200, 200, 255, 0.7); */
}

button {
    cursor: pointer;
    border: none;
    padding: 1vh;
    background-color: #0000;
    &:focus {
        outline: none;
        border: none;
    }
}

.back {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    bottom: 5vh;
    padding: 1.5vh;
}

#title {
    background-color: #799;
    & .options {
        margin-top: 10vh;
    }
    & button {
        font-size: 6vh;
    }
    & button:first-child {
        font-size: 7.5vh;
        color: #dd4444;
    }
}

#stageSelect {
    background-color: #799;
    & #stageOptions {
        display: flex;
        flex-direction: row;
        align-items: start;
        justify-content: center;
        border: 1vh double #aaa;
        & .options {
            padding-left: 10vh;
            padding-right: 10vh;
        }
    }
}

#talk {
    & #talkPanelBase {
        scale: 0.9;
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: center;
        position: absolute;
        bottom: 5vh;
        height: 44vh;
        width: 121vh;
        min-height: 0;
        min-width: 0;
        & #namePanel {
            height: 20%;
            aspect-ratio: 5 / 1;
            border: #333 0.4vh solid;
            background-color: #555;
            font-size: 6vh;
            box-shadow: 1vh 1vh 2vh #333;
        }
        & #talkPanel {
            display: block;
            height: 80%;
            width: 100%;
            border: #333 0.4vh solid;
            background-color: #555;
            text-align: left;
            align-items: start;
            justify-content: left;
            overflow-wrap: anywhere;
            padding-top: 2vh;
            padding-left: 3vh;
            padding-right: 3vh;
            font-size: 6vh;
            line-height: 1.6;
            text-wrap: wrap;
            & * {
                text-wrap: wrap;
            }
            box-shadow: 1vh 1vh 2vh #33333366;
            & ruby {
                & rt {
                    font-size: 2.5vh;
                }
            }
        }
    }
}

#menu {
    background-color: #ffffffbb;
    & .label {
        color: #333;
    }
    & button {
        color: #333;
    }
}

.menuButton {
    font-size: 5vh;
    position: absolute;
    top: 5vh;
    left: 5vh;
    z-index: 10;
}

#question {
    background-color: #333;
}

#answer {
    text-align: center;
    color: #333;
}

#questionLabel {
    font-size: 7vh;
    color: #dd0000;
}

#submitButton {
    color: #ffdd88;
}

#questionDescriptionLabel {
    font-size: 5vh;
    margin-bottom: 12vh;
}

#clear {
    background-color: #bbb;
}

#end {
    background-color: #bbeeee;
    & .endLabel {
        color: #444;
        font-size: 8vh;
    }
}

#howToPlay,
#bonus {
    background-color: #799;
}

#bonus {
    & .text {
        font-size: 5vh;
        margin-left: 10vh;
        margin-right: 10vh;
    }
}

.text {
    text-wrap: wrap;
}

#invalidPanel {
    background-color: #333;
    z-index: 100;
    & .label {
        font-size: 7vh;
    }
    & #lordingCircle {
        font-size: 13vh;
    }
}

.rangeContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    & label {
        width: 35vh;
        flex: 0 0 auto;
        margin-right: 3vh;
        text-align: right;
    }
    & input {
        width: 25vh;
        height: 2vh;
        -webkit-appearance: none;
        appearance: none;
        background: #555;
        border-radius: 2vh;
        &::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 4vh;
            height: 4vh;
            background: #eee;
            border-radius: 50%;
            cursor: pointer;
        }
        &::-moz-range-thumb {
            width: 4vh;
            height: 4vh;
            background: #eee;
            border-radius: 50%;
            cursor: pointer;
            border: none;
        }
        &:focus {
            outline: none;
        }
    }
}

#checkText {
    height: 9vh;
}

a {
    color: #799;
}