@charset "utf-8";



:root {
    color-scheme: light;
    --h2-a-color:                     light-dark(#8e8e8e  , #8e8e8e  );
    --red-color:                      light-dark(#ff0000  , #ff9999  );/**/
    --bdr-border-color:               light-dark(#b2b2b2  , #676670  );/**/
    --input-border-color:             light-dark(#8f8f9d  , #7c7b82  );/**/
    --input-disabled-border-color:    light-dark(#d7d7db  , #5a5862  );/**/
    /* Button */
    --button-color:                   light-dark(#15141a  , #fbfbfe  );/**/
    --button-background:              light-dark(#ededea  , #4f4e5a  );/**/
    --button-hover-background:        light-dark(#dfdfe5  , #5c5b66  );/**/
    --button-active-background:       light-dark(#cfcfd8  , #696873  );/**/
    --button-disabled-background:     light-dark(#ededf2  , #474652  );/**/
    /* Submit Button */
    --submit-color:                   light-dark(#ffffff  , #2b2a33  );/**/
    --submit-background:              light-dark(#0061e0  , #00ddff  );/**/
    --submit-hover-background:        light-dark(#0250bb  , #00bbd9  );/**/
    --submit-active-background:       light-dark(#053e94  , #0099b3  );/**/
    /* Reset Button */
    --reset-color:                    light-dark(#ffffff  , #ffffff  );
    --reset-background:               light-dark(#525252  , #adadad  );/**/
    --reset-hover-background:         light-dark(#444444  , #444444  );
    --reset-active-background:        light-dark(#363636  , #c9c9c9  );/**/
    /* Tool Button */
    --tool-btn-border-color:          light-dark(#cccccc  , #333333  );/**/
    --tool-btn-color:                 light-dark(#525252  , #adadad  );/**/
    --tool-btn-background:            light-dark(#f9f9f9  , #1c1b22  );/**/
    --tool-btn-use-color:             light-dark(#0061e0  , #00ddff  );/**/
    --tool-btn-use-hover-color:       light-dark(#0250bb  , #00bbd9  );/**/
    --tool-btn-use-active-background: light-dark(#363636  , #c9c9c9  );/**/
    /* Loading */
    --loading-bg-background:          light-dark(#ffffffcc, #000000cc);/**/
    --loading-color:                  light-dark(#668cd9  , #668cd9  );
    /* App */
    --app-color:                      light-dark(#423d3c  , #fbfbfe  );/**/
    /* Body */
    --body-background:                light-dark(#f0f0f4  , #0c0c0c  );/**/
    --body-color:                     light-dark(#15141a  , #fbfbfe  );/**/
    /* Screen & Guide */
    --guide-color:                    light-dark(#ffffff99, #ffffff22);/**/
    --common-border-color:            light-dark(#cccccc  , #333333  );/**/
    --screen-background:              light-dark(#f9f9f9  , #1c1b22  );/**/
    /* Yomi */
    --yomi-small-color:               light-dark(#15141a55, #fbfbfe55);/**/
    /* Kyu */
    --kyu-color:                      light-dark(#ffffff  , #000000  );/**/
    --kyu0-color:                     light-dark(#004075  , #fbfbfe  );/**/
    --kyu1-color:                     light-dark(#054027  , #fbfbfe  );/**/
    --kyu15-color:                    light-dark(#670312  , #fbfbfe  );/**/
    --kyu2-color:                     light-dark(#004075  , #fbfbfe  );/**/
    --kyu25-color:                    light-dark(#d83816  , #fbfbfe  );/**/
    --kyu3-color:                     light-dark(#058567  , #fbfbfe  );/**/
    --kyu4-color:                     light-dark(#a91c47  , #fbfbfe  );/**/
    --kyu5-color:                     light-dark(#eaa415  , #fbfbfe  );/**/
    --kyu6-color:                     light-dark(#562463  , #fbfbfe  );/**/
    --kyu7-color:                     light-dark(#0f8cae  , #fbfbfe  );/**/
    --kyu8-color:                     light-dark(#b8cb19  , #fbfbfe  );/**/
    --kyu9-color:                     light-dark(#686ba6  , #fbfbfe  );/**/
    --kyu10-color:                    light-dark(#cc2c7b  , #fbfbfe  );/**/
    --kyu0-background:                light-dark(#00000000, #004075  );/**/
    --kyu1-background:                light-dark(#00000000, #054027  );/**/
    --kyu15-background:               light-dark(#00000000, #670312  );/**/
    --kyu2-background:                light-dark(#00000000, #004075  );/**/
    --kyu25-background:               light-dark(#00000000, #d83816  );/**/
    --kyu3-background:                light-dark(#00000000, #058567  );/**/
    --kyu4-background:                light-dark(#00000000, #a91c47  );/**/
    --kyu5-background:                light-dark(#00000000, #eaa415  );/**/
    --kyu6-background:                light-dark(#00000000, #562463  );/**/
    --kyu7-background:                light-dark(#00000000, #0f8cae  );/**/
    --kyu8-background:                light-dark(#00000000, #b8cb19  );/**/
    --kyu9-background:                light-dark(#00000000, #686ba6  );/**/
    --kyu10-background:               light-dark(#00000000, #cc2c7b  );/**/
    /* Hint */
    --hint-border-color:              light-dark(#00000033, #ffffffcc);/**/
    /* Mode */
    --mode-border-color:              light-dark(#00000033, #00000033);
    --mode-background:                light-dark(#ffffff  , #ffffff  );
    --mode-color:                     light-dark(#15141aa8, #15141aa8);
    /* Modal */
    --modal-bg-background:            light-dark(#00000099, #00000080);/**/
    --modal-background:               light-dark(#ffffff  , #42414d  );/**/
}



/* Body */

body {
    height: 100vh;
    font-size: 0;
    font-family: sans-serif;
    background: var(--body-background);
    color: var(--body-color);
    overflow: hidden;
}



/* Canvas */

#canvasWrap {
    box-sizing: border-box;
    width: calc(100% - 12.2rem);
    height: 100%;
    border-top: .1rem solid var(--common-border-color);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}
#canvasWrap:after {
    content: "";
    width: 48vw;
    height: 3.2rem;
    border-radius: 2rem 2rem 0 0;
    display: block;
    position: absolute;
    left: 26vw;
    bottom: 0;
    pointer-events: auto;
}




/* App */

#app {
}



/* Guide */

#guide {
    position: absolute;
    width: calc(100% - 12.2rem);
    height: 100%;
    background-size: 16vw 16vw;
    background-position: calc(50vw - 4rem) 50vw;
    background-image:
    repeating-linear-gradient(
        90deg,
        var(--guide-color),
        var(--guide-color) .1rem,
        transparent .1rem,
        transparent 16vw
    ),
    repeating-linear-gradient(
        0deg,
        var(--guide-color),
        var(--guide-color) .1rem,
        transparent .1rem,
        transparent 16vw
    );
    pointer-events: none;
    user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}



/* Screen */

#screen .screenKaki,
#screen .screenYomi {
    display: flex;
    flex-flow: column;
    height: 100%;
    border-top: .1rem solid var(--common-border-color);
    border-left: .1rem solid var(--common-border-color);
    background: var(--screen-background);
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}

#screen .screenKaki {
    width: 12.2rem;
}

#screen .screenYomi {
    width: 100%;
}

#screen .qList {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    justify-content: flex-start;
    align-items: stretch;
    width: calc(100% - 2.4rem);
    position: absolute;
    top: 2.4rem;
    left: 1.2rem;
}

#screen .qList div {
    width: 20%;
    height: calc((100vh - 17rem) / 2);
    position: relative;
}

#screen .qList div:nth-child(-n+5) {
    border-bottom: .1rem solid var(--common-border-color);
}

#screen .qIndex {
    display: block;
    width: 5rem;
    height: 2.4rem;
    text-align: center;
    margin: 0 auto .2rem;
    font-size: 1rem;
    line-height: 2.4rem;
    font-family: serif;
    position: absolute;
    top: 1.2rem;
    right: 2.4rem;
    user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

#screen .page {
    display: block;
    height: 2.4rem;
    text-align: center;
    margin: 0 auto .2rem;
    font-size: 1rem;
    line-height: 2.4rem;
    font-family: serif;
    user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

#screen .screenYomi .page {
    width: 12.2rem;
    position: absolute;
    bottom: 5.4rem;
    left: 0;
}

#screen .yomi {
    display: inline-block;
    max-height: 35.6rem;
    text-align: justify;
    margin: 0;
    writing-mode: vertical-rl;
    line-height: 2.4rem;
    font-family: serif;
    white-space: nowrap;
    overflow: hidden auto;
    position: absolute;
    top: 3.6rem;
    right: 1.2rem;
}

#screen .screenYomi .yomi {
    top: 3.6rem;
    right: 0;
}

#screen .screenYomi .yomi small {
    font-size: 1.2rem;
    color: var(--yomi-small-color);
}

#screen .yomi.long {
    height: auto;
}

#screen .yomi u {
    font-weight: bold;
    font-family: "IonIcons";
}

#screen .yomi small {
    font-size: 1.2rem;
    color: var(--yomi-small-color);
}

#screen .kaki {
    display: inline-block;
    max-height: 35.6rem;
    align-self: center;
    margin: 0;
    writing-mode: vertical-rl;
    text-align: justify;
    font-size: 4rem;
    line-height: 5rem;
    font-family: serif;
    white-space: nowrap;
    overflow: hidden auto;
    pointer-events: auto;
    position: absolute;
    top: 3.6rem;
    right: 3.6rem;
}

#screen .screenYomi .kaki {
    top: 3.6rem;
    right: 2.4rem;
}

#screen .kaki.long {
    height: auto;
    /* 
    font-size: 3rem;
    line-height: 3.6rem;
    */
}

#screen .kyu {
    display: block;
    width: 4.3rem;
    margin: 0;
    padding: 0;
    text-align: center;
    line-height: 3rem;
    font-size: .8rem;
    color: var(--kyu-color);
    position: absolute;
    bottom: calc(100vh - 43.9rem);
    right: 1.6rem;
    pointer-events: none;
}

#screen .screenYomi .kyu {
    line-height: 1rem;
    bottom: 8.8rem;
    right: 2.5rem;
}

#screen .kyu0    {border: .1rem solid var(--kyu0-color);  color: var(--kyu0-color);  background: var(--kyu0-background); }
#screen .kyu1    {border: .1rem solid var(--kyu1-color);  color: var(--kyu1-color);  background: var(--kyu1-background); }
#screen .kyu1\.5 {border: .1rem solid var(--kyu15-color); color: var(--kyu15-color); background: var(--kyu15-background);}
#screen .kyu2    {border: .1rem solid var(--kyu2-color);  color: var(--kyu2-color);  background: var(--kyu2-background); }
#screen .kyu2\.5 {border: .1rem solid var(--kyu25-color); color: var(--kyu25-color); background: var(--kyu25-background);}
#screen .kyu3    {border: .1rem solid var(--kyu3-color);  color: var(--kyu3-color);  background: var(--kyu3-background); }
#screen .kyu4    {border: .1rem solid var(--kyu4-color);  color: var(--kyu4-color);  background: var(--kyu4-background); }
#screen .kyu5    {border: .1rem solid var(--kyu5-color);  color: var(--kyu5-color);  background: var(--kyu5-background); }
#screen .kyu6    {border: .1rem solid var(--kyu6-color);  color: var(--kyu6-color);  background: var(--kyu6-background); }
#screen .kyu7    {border: .1rem solid var(--kyu7-color);  color: var(--kyu7-color);  background: var(--kyu7-background); }
#screen .kyu8    {border: .1rem solid var(--kyu8-color);  color: var(--kyu8-color);  background: var(--kyu8-background); }
#screen .kyu9    {border: .1rem solid var(--kyu9-color);  color: var(--kyu9-color);  background: var(--kyu9-background); }
#screen .kyu10   {border: .1rem solid var(--kyu10-color); color: var(--kyu10-color); background: var(--kyu10-background);}

#screen #toggleNigate {
    width: 4.3rem;
    padding: 0;
    position: absolute;
    bottom: calc(100vh - 43.9rem);
    right: 6.3rem;
    pointer-events: auto;
}

#screen .screenYomi #toggleNigate {
    bottom: 5.2rem;
    right: 2.5rem;
}

#screen #toggleNigate span {
    display: block;
    height: 3.2rem;
    line-height: 3.2rem;
    text-align: center;
}

#screen .hint {
    display: inline-block;
    width: 9rem;
    height: calc(100vh - 60rem);
    align-self: center;
    margin: 0;
    padding: 1.2rem 0;
    border-top: .4rem solid var(--hint-border-color);
    border-bottom: .4rem solid var(--hint-border-color);
    writing-mode: vertical-rl;
    text-align: justify;
    white-space: pre-line;
    line-height: 1.8rem;
    text-overflow: hidden;
    font-size: 1.2rem;
    font-family: serif;
    overflow: hidden;
    pointer-events: auto;
    cursor: pointer;
    position: absolute;
    bottom: 15.5rem;
    right: 1.6rem;
}

#screen .screenYomi .btnHint {
    width: 4.3rem;
    padding: 0;
    position: absolute;
    bottom: 1.6rem;
    right: 2.5rem;
    pointer-events: auto;
}

#screen .screenYomi .btnHint span {
    display: block;
    height: 3.2rem;
    line-height: 3.2rem;
    text-align: center;
}


/* Controller */

#ctrl {
    display: flex;
    flex-wrap: wrap;
    width: 12.2rem;
    text-align: center;
    font-size: 0;
    position: absolute;
    right: 0;
    bottom: 4.4rem;
    z-index: 2;
    pointer-events: none;
    user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

#ctrl button {
    width: calc(100% - .8rem);
    margin: 0 0 .4rem .4rem;
    min-width: auto;
    font-size: 1.6rem;
    pointer-events: auto;
}

#ctrl button:nth-child(n+3) {
    width: calc(50% - .6rem);
}



/* Mode Button & Reset Button */

#mode {
    display: block;
    min-height: 6rem;
    text-align: left;
    padding: 3.3rem 3rem .3rem 1.6rem;
    border: .1rem solid var(--mode-border-color);
    border-radius: 0 0 3rem 0;
    font-size: 1.2rem;
    background: var(--mode-background);
    color: var(--mode-color);
    position: absolute;
    top: -3.6rem;
    left: -.1rem;
    z-index: 4;
    pointer-events: auto;
    user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

#mode[disabled],
#mode[disabled]:hover
#mode[disabled]:active {
    background: var(--mode-background);
    opacity: 1 !important;
}

#tools {
    position: absolute;
    top: calc(38vh - 10.8rem);
    left: -.1rem;
    z-index: 2;
}

#tools .toolBtn {
    position: absolute;
    left: 0;
    user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

#tools #pen {
    padding: .8rem .8rem .6rem .6rem;
    border-radius: 0 50% 0 0;
    top: 0;
}

#tools #eraser {
    padding: .6rem .8rem .8rem .6rem;
    border-radius: 0 0 50% 0;
    top: 4.4rem;
}

#tools #undo {
    padding: .7rem .8rem .7rem .6rem;
    border-radius: 0 50% 50% 0;
    top: 10rem;
}

#tools #reset {
    padding: .7rem .8rem .7rem .6rem;
    border-radius: 0 50% 50% 0;
    top: 14.8rem;
}



/* Modal */

#modalBg {
    width: 100vw;
    height: 100vh;
    background: var(--modal-bg-background);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;
}

#modal {
    box-shadow: 0 2.4rem 4.8rem 2.4rem rgba(0, 0, 0, .18);
    width: calc(100vw - 3.2rem);
    padding: 3.2rem;
    border-radius: .8rem;
    font-size: 1.4rem;
    background: var(--modal-background);
    position: fixed;
    top: 10.2rem;
    left: 1.6rem;
    z-index: 4;
    overflow: hidden;
}

#modal .modalHeader{
    padding: 0 0 1.6rem;
    user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

#modal .modalFooter{
    padding: 1.6rem 0 0;
    user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

#modal .modalBody{
    padding: 1.6rem 0;
}

#modal .conf {
    height: 4rem;
    line-height: 4rem;
}

#modal p {
    margin: 0;
    white-space: pre-line;
    font-family: serif;
    pointer-events: auto;
}