/***********************************************************************
/ Character AI Arena CSS
/ Copyright (C) Logic Lovers Inc.
/ Released under the MIT License, https://opensource.org/licenses/MIT
/***********************************************************************/

/***********************************************************************
/ all
/***********************************************************************/
#loIdDivCharacterAIArena {
    font-family: 'Noto Sans JP',sans-serif;
    margin: 0.2em auto;
    padding: 0px;
    background-color: white;
    border: 4px solid #530;
    max-width: calc( min(var(--iImageMaxWidth) , 1024px ) + 2em );
    transition: height 0.4s ease-in-out;
    overflow:hidden
}
#loIdDivCharacterAIArena .maincontainer {
    padding: calc( 2px + 2 * var(--bWideDevice) ) 4px;
    padding-bottom: 1.5em;
}

/***********************************************************************
/ default of ca
************************************************************************/
#loIdDivCharacterAIArena input[type="button"] {
    -webkit-appearance: none;
    margin: 0.3em 0.2em;
    padding: 0.2em 1.7em;
    color: black;
}

/***********************************************************************
/ block title
/***********************************************************************/
#loIdDivCharacterAIArena .blocktitle {
    font-size: 150%;
    font-weight: bold;
    margin: 1em var(--iTextBlockMarginLR);
    padding: 0.3em;
    text-align: center;
    background-color: #b474be;
}

/***********************************************************************
/ entry
/***********************************************************************/
#loIdDivCharacterAIArena {
    --iEntryMarginLR: 8px;
    --iEntryPaddingLR: 8px;
    --iEntryWidth: min( calc( 100% - var(--iEntryMarginLR) * 2 - var(--iEntryPaddingLR) * 2 ) , 640px );
    --iEntryGridHeadWidth: calc( 100px + var(--bWideDevice) *  40px );
    --iEntryGridItemWidth: calc( 200px + var(--bWideDevice) * 180px );
    --iEntryTextInputWidth: calc( var(--iEntryGridItemWidth) + var(--iEntryGridHeadWidth) / 2 );
}

#loIdDivCharacterAIArena .entrycontainer {
    margin: 1.5em 0em 3.5em 0em;
}
#loIdDivCharacterAIArena .entryinputcontainer {
    width: var(--iEntryWidth);
    margin: 1.5em auto;
    padding: 0.5em 0px;
    background-color: #ffefff;
    border: 2px solid #550033;
}
#loIdDivCharacterAIArena .entrycharactertitle {
    font-size: 120%;
    font-weight: bold;
    margin: 0.2em;
    text-align: center;
}
#loIdDivCharacterAIArena .inputtextcontainer {
}
#loIdDivCharacterAIArena .inputtexttitle {
    font-weight: bold;
    margin-left: calc( ( 100% - var(--iEntryTextInputWidth) ) / 2 - 1.5em );
}
#loIdDivCharacterAIArena .inputtexttitle span {
    font-weight: normal;
    margin-left: 0.5em;
}
#loIdDivCharacterAIArena .inputcontainer {
    text-align: center;
    margin-left: 0.5em;
}
#loIdDivCharacterAIArena .inputcontainer input[type="text"] {
    -webkit-appearance: none;
    font-size: 110%;
    width: var(--iEntryTextInputWidth);
}
#loIdDivCharacterAIArena .entrybuttoncontainer {
    margin: 1em;
    padding: 0em;
    text-align: center;
}
#loIdDivCharacterAIArena .entrybuttoncontainer input[type="button"] {
    font-size: 120%;
    font-weight: bold;
    padding: 0.5em 1.7em;
    margin: 0em;
}

/* lastentried */
#loIdDivCharacterAIArena .lastentriedcontainer {
    width: var(--iEntryWidth);
    font-size: 95%;
    padding: 6px var(--iEntryPaddingLR);
    background-color: #fff7ff;
    border: 2px solid #efe3ef;
}
#loIdDivCharacterAIArena .lastentriedtitle {
    font-weight: bold;
    margin: 4px auto;
}
#loIdDivCharacterAIArena .lastentriedgrid {
    margin: 0px;
    margin: 4px auto;
}
#loIdDivCharacterAIArena .lastentriedgrid .gridhead {
    width: var(--iEntryGridHeadWidth);
}
#loIdDivCharacterAIArena .lastentriedgrid .griditem {
    width: var(--iEntryGridItemWidth);
    color: #333;
}

/* debug ui */
#loIdDivCharacterAIArena .debuguicontainer {
    margin: 1.5em 0.5em;
}
#loIdDivCharacterAIArena .debuguicontainer input[type="button"] {
    margin: 0.1em;
}

/***********************************************************************
/ result
/***********************************************************************/
/* titles */
#loIdDivCharacterAIArena .resultminetitle,
#loIdDivCharacterAIArena .resultalltitle {
    margin: 0em var(--iTextBlockMarginLR) 0.5em var(--iTextBlockMarginLR);
    text-align: center;
    font-size: 125%;
    font-weight: bold;
    background-color: #b996be;
}
#loIdDivCharacterAIArena .resultphasetitle {
    font-size: 125%;
    font-weight: bold;
    margin-top: 1.5em;
}
#loIdDivCharacterAIArena #loIdDivCaShowResultTitle {
    font-size: 300%;
    font-weight: bold;
    text-align: center;
    margin: 1em;
    height: 2em;
}

/* resultcontainer */
#loIdDivCharacterAIArena .resulteachcontainer,
#loIdDivCharacterAIArena .resultminecontainer {
    margin-top: 1.0em;
    padding-top: 0.5em;
}
/* resultcontent */
#loIdDivCharacterAIArena .resultcontent {
    overflow: hidden;
    transition: height 0.3s ease-in-out;
}
#loIdDivCharacterAIArena .resultcontent.close {
    height: 0px;
}
#loIdDivCharacterAIArena .resultalltitle.open::before,
#loIdDivCharacterAIArena .resultalltitle.open::after {
    content: "▲";
}
#loIdDivCharacterAIArena .resultalltitle.close::before,
#loIdDivCharacterAIArena .resultalltitle.close::after {
    content: "▼";
}

/* gridcontainer */
#loIdDivCharacterAIArena .resultgridcontainer {
    margin: 0.2em auto;
    width: fit-content;
    max-width: calc( 100% - var(--iTextBlockMarginLR) * 2 );
    padding: calc( 1px + 2 * var(--bWideDevice) ) 3px;
    background-color: black;
}
#loIdDivCharacterAIArena .resultgridcontainer > div {
    margin: 0;
}

/* mine grid */
#loIdDivCharacterAIArena .resultminecontainer .grid {
    --sBgColorStriped1of2: #f4dfe9;
    --sBgColorStriped2of2: #f3dff2;
}

/* mine excluded */
#loIdDivCharacterAIArena .excluded {
    background-color: yellow;
    margin: 0.3em auto;
    padding: 0.2em 3em;
    text-align: center;
    line-height: 1.5em;
}
#loIdDivCharacterAIArena .excluded .excluded1 {
    font-weight: bold;
}
#loIdDivCharacterAIArena .excluded .excluded2 {
    font-size: 85%;
}
#loIdDivCharacterAIArena .excluded .excluded3 {
    font-size: 85%;
}

/* each grid */
#loIdDivCharacterAIArena .resulteachcontainer .grid {
    --iResultGridHeadWidth: calc( 120px + var(--bWideDevice) *  50px );
    --iResultGridItemWidth: calc( 200px + var(--bWideDevice) * 150px );
}
#loIdDivCharacterAIArena .resulteachcontainer .gridhead {
    font-weight: bold;
    width: var(--iResultGridHeadWidth);
}
#loIdDivCharacterAIArena .resulteachcontainer .griditem {
    width: var(--iResultGridItemWidth);
}

#loIdDivCharacterAIArena .resulteachcontainer .gridbg0 {
    color: black;
    background-color: #f4dfe9;
}
#loIdDivCharacterAIArena .resulteachcontainer .gridbg1 {
    color: black;
    background-color: #eedaed;
}
#loIdDivCharacterAIArena .resulteachcontainer .chartype {
    margin-top: 3px;
}

/* connecting */
#loIdDivCharacterAIArena .connecting {
}

/* progress */
#loIdDivCharacterAIArena .resultminecontainer .griditem {
    transition: opacity 0.7s ease-in-out;
    opacity: 1;
}
#loIdDivCharacterAIArena .resultminecontainer .griditem.masked {
    opacity: 0;
}

/* champ live */
#loIdDivCharacterAIArena .resultmainimg {
    margin-top: 0;
}
#loIdDivCharacterAIArena .resultmainlive {
    margin: 0.5em auto;
    padding: 0.2em 0.2em;
    max-width: min( var(--iImageMaxWidth) , 1024px );
    font-weight: bold;
    color: #591b7f;
}

/* select others */
#loIdDivCharacterAIArena .otherbattleresultcontainer {
    text-align: right;
    margin: -16px var(--iTextBlockMarginLR) 16px 0;
}
#loIdDivCharacterAIArena select {
    padding: 0.1em 2.3em;
}

/***********************************************************************
/ user str
/***********************************************************************/
#loIdDivCharacterAIArena .userstrcontainer {
    margin: var(--iTextBlockMarginUD) var(--iTextBlockMarginLR);
}
#loIdDivCharacterAIArena .userstrtext {
    display: inline;
}

/***********************************************************************
/ opening
/***********************************************************************/
#loIdDivCharacterAIArena canvas {
    margin: 0px;
    max-width: 100%;
}


/***********************************************************************
/ article
/***********************************************************************/
div#mainarticle .storycontainer {
    max-width: 600px;
    margin:  calc( 15px + 5px * var(--bWideDevice) ) auto;
}
div#mainarticle .storycontainer .storytitle {
    font-size: 125%;
    font-family: serif;
    font-weight: bold;
    color: #2a2a2a;
}
div#mainarticle .storycontainer .storytext {
    background-color: #f4e8d0;
    color: #2a2a2a;
    font-family: serif;
    font-weight: bold;
    padding: calc( 25px + 5px * var(--bWideDevice) ) calc( 20px + 5px * var(--bWideDevice) );
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    line-height: 2.0;
    font-size: calc( 15px + 1px * var(--bWideDevice) );
}