/**
  KifuInputTool.css
  designed by hinacoppy 2023-2024
*/

/* document outline ----------------------------------------- */
*{
  user-select:none; /* タップ、ドラッグで文字選択しないように */
}

html{
  height:100%;
}

body{
  margin:0;
  padding:0;
  min-height:100%;
  height:100%;
}

input{
  font-size:100%;
}

.container{
  background-color:#efe;
}

.header{
/*  text-align:center;*/
  padding-left:5vw;
  font-size:2vw;
  font-weight:bold;
}

.mainarea{
  padding-left:3vw;
}

.mainareaflex{
  display:flex;
  flex-direction:column; /* toggle column, column-reverse */
}

.nav{
  background-color:#efe;
  border:1px solid;
}

/* Constant definision for bgBoard.css ------------------------------ */
:root{
  --boardWidthNum:90; /* < 100 and 15*n */
  --boardHeightNum:68; /* = boardWidthNum * 3/4 */
  --pointWidthNum:6; /* = boardWidthNum / 15 */
  --cubeSizeNum:5.4; /* = pointWidthum * 0.9 */
  --frameSizeNum:1.3;
  --offtrayMarginNum:5;
  --offtrayHeightNum:68; /* = boardHeightNum */
  --cubeFontSizeNum:4;
  --labelFontSizeNum:1.5;
  --stackFontSizeNum:3;

  --board-width:calc(var(--boardWidthNum) * 1vmin);
  --board-height-max:calc(var(--boardHeightNum) * 1vmin);
  --board-height:calc(var(--boardHeightNum) * 1vmin);
  --point-height:calc(var(--boardHeightNum) * 1vmin / 2.3);
  --point-width:calc(var(--pointWidthNum) * 1vmin);
  --board-frame-size:calc(var(--frameSizeNum) * 1vmin);
  --offtray-margin:calc(var(--offtrayMarginNum) * 1px);
  --offtray-height:calc(var(--offtrayHeightNum) * 1vmin);
  --cube-size:calc(var(--cubeSizeNum) * 1vmin);
  --cube-font-size:calc(var(--cubeFontSizeNum) * 1vmin);
  --label-font-size:calc(var(--labelFontSizeNum) * 1vmin);
  --stack-font-size:calc(var(--stackFontSizeNum) * 1vmin);
}

.info{
  display:table;
  width:var(--board-width);
}
.playername{
  display:table-cell;
  text-align:left;
  width:33%;
}
.pip{
  display:table-cell;
  text-align:center;
  width:34%;
}
.score{
  display:table-cell;
  text-align:right;
  width:33%;
}

.infodisp{ /* 棋譜表示エリア */
  height:14vh;
  width:100%;
  border:1px solid;
  overflow-y:scroll;
  white-space:nowrap;
  user-select:text;
  background-color:#fff;
  font-family:monospace, serif;
}

.navbutton{
  height:5vh;
  font-size:100%;
  text-align:left;
  padding:0 1vw;
}

#matchlength{
  width:3em;
}

.panel{
  position:absolute;
  z-index:50;
  background-color:#eee;
  color:#000;
  padding:1vh 1vw;
  border:4px solid #777;
  white-space:nowrap;
}

.DnDArea{
  margin:auto;
  width:100%;
  height:50px;
  position:relative;
}
.DnDAreaDragOver{
  background-color:#bef;
}
.DnDArea #inputKifuFile {
  top:0;
  left:0;
  opacity:0; /* <input type=file>のボタンを見せないようにする */
  position:absolute;
  width:100%;
  height:100%;
}
/* oparation button decorations ------------------------------------- */
.oparationbtn{
  --bg-color:#bef;
  --fg-color:#27f;
  color:var(--fg-color);
  border:3px solid var(--fg-color);
  background-color:var(--bg-color);
  border-radius:20px;
  padding:1vmin 2vmin;
  font-size:3vmin;
  white-space:nowrap;
}
.oparationbtn:disabled{
  --bg-color:#bbb;
  --fg-color:#555;
  color:var(--fg-color);
  border-color:var(--fg-color);
  background-color:var(--bg-color);
}

#doublebtn{
  margin-right:1em; /* 右にスペース */
}
#dancebtn{
  display:block; /* 強制改行 */
  margin-top:1vh; /* 上にスペース */
}
.paneltitle{
  font-size:2em;
}
.pickdicetable td, th {
  border:2px solid #bbb;
}
.pickdicetable{
  margin-top:1vh; /* 上にスペース */
  border-collapse:collapse;
}
.pickdice{
  padding:0.3vmin 0.3vmin 0vmin 0.3vmin;
}
.pickdice svg{
  width:3vmin;
}

/* FloatWindow4.css で設定されている設定を上書き */
.modalContainer{
  border:initial;
}
.modalBody{
  padding:0;
}
.modalTitle{
  white-space:nowrap; /* ボタンで折り返さない */
  min-width:100%;
}