/**
  bgboardapp.css
  designed by hinacoppy 2019--2026
*/

/* document outline ----------------------------------------- */
*{
  user-select:none; /* タップ、ドラッグで文字選択しないように */
}
html{
  height:100vmin;
  overflow:hidden;
  overscroll-behavior:none; /* バウンススクロールを抑止 */
}
body{
  margin:0;
  padding:0;
  max-height:100vmin;
  min-height:100vmin;
  height:100vmin;
  font-family:'Arial', 'Meiryo UI';
}
select{
  font-size:100%;
}

@media screen and (orientation:portrait) {
.container{ /* 縦画面の時は横向きに表示し、横画面にするよう促す */
  width:100vh;
  height:100vw;
  margin:-100vw 0 100vh;
  transform:rotate(90deg);
  transform-origin:left bottom;
}}

/* App definition ----------------------------------------------- */
.turn1{
  transform:rotateZ(0deg);
}
.turn2{
  /*transform:rotateZ(180deg);*/
}
#nav{
  position:absolute;
  top:35vmin;
  left:86vmax;
}
.nav{
  width:30vmin;
  height:30vmin;
  transform:rotateZ(-90deg);
  text-align:center;
}
#player1{
  position:absolute;
  top:70vmin;
  left:86vmax;
}
#player2{
  position:absolute;
  top:0vmin;
  left:86vmax;
}
.playerinfo__nouse{
  transform:rotateZ(-90deg);
  width:30vmin;
  height:30vmin;
  text-align:center;
}
.score{
  display:block;
  background-color:#877;
  color:white;
  width:24vmin;
  height:6vmax;
  line-height:6vmax;
  text-align:center;
  font-size:5vmax;
  margin:0 auto;
}
.pip{
  display:block;
  background-color:#4aa;
  color:white;
  width:18vmin;
  height:4vmax;
  line-height:4vmax;
  text-align:center;
  font-size:3vmax;
  margin:0 auto;
}
.panel{
  position:absolute;
  z-index:50;
}
.aistatus{
  color:var(--btn-frame-enable); /* 配色は operation button に合わせる */
  border:3px solid var(--btn-frame-enable);
  background-color:var(--btn-enable);
  border-radius:3vmin;
  padding:2vmin 2vmax;
  font-size:2vmax;
  white-space:nowrap;
}

/* oparation button decorations ------------------------------------- */
.oparationbtn{
  color:var(--btn-frame-enable);
  border:3px solid var(--btn-frame-enable);
  background-color:var(--btn-enable);
  border-radius:5vmin;
  padding:2vmin 2vmax;
  font-size:2vmax;
  white-space:nowrap;
}
.oparationbtn:disabled {
  color:var(--btn-frame-disable);
  border-color:var(--btn-frame-disable);
  background-color:var(--btn-disable);
}

/* settingwindow decorations ------------------------------------- */
.settings{
  position:absolute;
  display:none;
  z-index:99;
  background-color:var(--setting-bg-color);
  border:3px solid var(--setting-frame);
  padding:2vmin 4vmax;
  font-size:1.8vmax;
}
.settingtitle{
  font-size:2.2vmax;
  padding:2vmin 2vmax;
  margin-bottom:2vmin;
  color:var(--setting-title);
  background-color:var(--setting-frame);
}
.settings tr{
  height:8vmin;
  line-height:8vmin;
}
.small{
  font-size:smaller;
}

/* toggle switch ----------------------------------------- */
/* (参考) https://www.w3schools.com/howto/howto_css_switch.asp */
.switch{
  position:relative;
  display:inline-block;
  vertical-align:middle;
  width:11vmin; /* = 1 + 5 + 4 + 1 = left + width + translateX + left */
  height:7vmin; /* = 1 + 5 + 1 = bottom + height + bottom */
  background-color:var(--slider-bg);
}
.switch input{
  display:none;
}
.slider{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  transition:.3s;
  border-radius:4vmin; /* = height / 2 */
  background-color:var(--slider-fg);
}
.slider:before{
  position:absolute;
  content:"";
  height:5vmin;
  width:5vmin; /* 正円にするために height == width とする */
  left:1vmin;
  bottom:1vmin; /* height + bottom * 2 = .switch height となるよう計算 */
  transition:.3s;
  border-radius:50%; /* 正円 */
  background-color:var(--slider-btn);
}
input:checked + .slider{
  background-color:var(--slider-checked);
}
input:checked + .slider:before{
  transform:translateX(4vmin);
}
/* Segmented Control ----------------------------------------- */
/* (参考) https://ginpen.com/2012/12/11/segmented-control/ */
.segmented{
  display:inline-block;
  vertical-align:middle;
}
.segmented .seglabel{
  border:1px solid;
  float:left;
  padding:0em 0.5em;
  text-align:center;
  width:20vmax;
  line-height:8vmin;
  background-color:var(--segmented-disable-bg);
  border-color:var(--segmented-frame);
  color:var(--segmented-disable-fg);
}
.segmented input{
  display:none;
}
.segmented input:checked + .seglabel{
  background-color:var(--segmented-enable-bg);
  color:var(--segmented-enable-fg);
}

/* バー・オフトレイ・ポイント三角形(盤面の固定部品)を描画するsvg。.board(#board)の内側を覆う */
.boardBase{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

/* BgKfInputBoardはgetComputedStyle(document.documentElement)から盤面寸法を読むため、:rootにも定義する(normalgammon) */
:root{
  --boardWidthNum: 84.3;
  --pointWidthNum: 6;
  --cubeSizeNum: 5.5;

  --btn-enable:          #def;
  --btn-frame-enable:    #29f;
  --btn-disable:         #ddd;
  --btn-frame-disable:   #666;
  --setting-bg-color:    #dff;
  --setting-frame:       #29f;
  --setting-title:       #fff;
  --segmented-disable-bg:#ddd;
  --segmented-frame:     #ccc;
  --segmented-disable-fg:#666;
  --segmented-enable-bg: #29f;
  --segmented-enable-fg: #fff;
  --slider-bg:           #dff;
  --slider-fg:           #999;
  --slider-checked:      #29f;
  --slider-btn:          #fff;
}