/* バリバリショウギ — 黒い背景・黄色い文字。
   弱視（ロービジョン）の利用者を想定し、
   ・背景と文字は最大コントラスト（黒 × 黄）
   ・駒は「先手＝黄色の文字・そのまま」「後手＝白い文字・180度回転」で、
     色と向きの両方で見分けられるようにする（将棋の実物と同じ考え方）
   ・文字サイズは設定で 4 段階に拡大できる（--fsc を掛けた大きさで指定する）
   ことを全体の約束にしている。--fsc を掛け忘れた箇所は拡大されないので注意。 */
:root{
  --bg:#000000;          /* 背景（黒） */
  --fg:#ffee00;          /* 文字（黄） */
  --dim:#b8a800;         /* 補助的な文字（暗めの黄） */
  --line:#5a5200;        /* 枠線 */
  --board:#3e3014;       /* 盤面（暗い木の色） */
  --boardLine:#8a7a3a;   /* 盤面のマス目の線 */
  --sente:#ffee00;       /* 先手の駒（黄） */
  --gote:#ffffff;        /* 後手の駒（白） */
  --fsc:1;               /* 文字サイズ倍率（設定で 1 / 1.25 / 1.5 / 2 に変わる） */
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{
  height:100%;background:var(--bg);color:var(--fg);
  font-family:"Yu Gothic","Meiryo","Malgun Gothic",sans-serif;overflow:hidden;
  -webkit-user-select:none;user-select:none;touch-action:manipulation;
}
#app{display:flex;flex-direction:column;height:100%;}

/* ---------------- 上部の状況表示 ---------------- */
#status{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  gap:1.2em;padding:0.35em 0.4em;
  font-size:calc(2.6vh * var(--fsc));font-weight:bold;
  background:#111;border-bottom:2px solid var(--line);
  white-space:nowrap;overflow:hidden;
}
#status .side{color:var(--dim);}
#status .side.active{color:var(--fg);text-decoration:underline;}
#plyDisp{color:var(--dim);font-size:0.75em;}
#checkDisp{color:#ff5544;font-weight:bold;}
html.mono #checkDisp{color:#ffffff;}

/* ---------------- 盤面と持ち駒 ---------------- */
#mid{flex:1 1 auto;display:flex;flex-direction:column;align-items:stretch;justify-content:center;position:relative;min-height:0;}
#boardWrap{position:relative;width:100%;flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:0;}
/* 持ち駒は盤の外（帯）に出す — 相手＝盤の上・左寄せ、自分＝盤の下・右寄せ
   （先手・後手どちらでもこの位置は変わらない）。盤に重ねないので、盤のマスが
   隠れて見づらくなることがない（実際に重ねる形にして踏んだ問題）。
   帯の高さは中身に合わせる（flex:0 0 auto）ので、盤の表示領域を圧迫しない */
.handBar{
  flex:0 0 auto;display:flex;align-items:center;gap:0.4em;flex-wrap:wrap;
  padding:0.2em 0.6em;font-size:calc(1.9vh * var(--fsc));
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
#handOpp{justify-content:flex-start;}
#handMine{justify-content:flex-end;}
.handBar .handName{color:var(--dim);flex:0 0 auto;}
.handBar .handList{display:flex;flex-wrap:wrap;gap:0.3em;}
#handOpp .handList{justify-content:flex-start;}
#handMine .handList{justify-content:flex-end;}
.handEmpty{color:var(--dim);}
/* 自分の持ち駒はボタン＝押すとその駒を打つ選択が始まる。相手の持ち駒は
   参考表示だけなので押せない（disabled、見た目も少し薄くする）。
   盤の駒（.cell .piece、font-size min(5.4vh,6.0vw)）よりひとまわり小さくしてある */
.handPieceBtn{
  font-family:inherit;font-weight:bold;line-height:1.2;
  font-size:min(4.2vh, 4.6vw);
  padding:0.1em 0.4em;border-radius:6px;border:1px solid var(--line);
  background:#111;cursor:pointer;
}
.handPieceBtn.sente{color:var(--sente);}
.handPieceBtn.gote{color:var(--gote);}
.handPieceBtn:disabled{cursor:default;opacity:0.75;border-color:transparent;background:transparent;}
.handPieceBtn:not(:disabled):focus{outline:2px solid var(--fg);outline-offset:1px;}
.handPieceBtn:not(:disabled):active{background:var(--fg);}
.handPieceBtn.sente:not(:disabled):active{color:#000;}
.handPieceBtn.gote:not(:disabled):active{color:#000;}

#board{
  display:grid;
  /* 左端の段番号＋9列。行も同じ割り当て（上端が筋の数字 9〜1）。
     minmax(0,…) にしているのは、中の文字（駒・段番号）が大きいときに
     マス目がその文字の高さまで押し広げられ、盤面が正方形でなくなるのを防ぐため */
  grid-template-columns:minmax(0,0.55fr) repeat(9, minmax(0,1fr));
  grid-template-rows:minmax(0,0.55fr) repeat(9, minmax(0,1fr));
  width:auto;height:100%;
  aspect-ratio:1 / 1;
  max-height:100%;
  max-width:calc(100% - 0.5em);
  gap:0;
  background:var(--bg);
}
@media (max-aspect-ratio: 1/1){ #board{width:min(96vw,100%);height:auto;} }
/* 筋・段の見出し。文字サイズの設定で大きくなるが、
   その分マス目が細くなってしまわないよう、盤面の幅・高さでも頭打ちにする */
#board .hdr{
  display:flex;align-items:center;justify-content:center;
  min-width:0;min-height:0;overflow:hidden;
  color:var(--fg);font-weight:bold;
  font-size:min(calc(1.9vh * var(--fsc)), 3.6vw, 3.6vh);
}
.cell{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  min-width:0;min-height:0;overflow:hidden;
  background:var(--board);
  border:1px solid var(--boardLine);
  cursor:pointer;
}
/* 駒。先手は黄色でそのまま、後手は白で180度回転（実物の将棋盤と同じ見え方） */
.cell .piece{
  line-height:1;font-weight:bold;
  font-size:min(5.4vh, 6.0vw);
  pointer-events:none;
}
.cell .piece.sente{color:var(--sente);}
.cell .piece.gote{color:var(--gote);transform:rotate(180deg);}
/* 成り駒は赤みを足す将棋の慣習にならい、下線で区別できるようにする
   （白黒モードでも色に頼らず分かるように） */
.cell .piece.promoted{text-decoration:underline;text-decoration-thickness:2px;}
/* 今そこへ指せる場所。黄色の枠と中央の小さな印で知らせる */
.cell.target{box-shadow:inset 0 0 0 3px var(--fg);}
.cell.target .hint{
  color:var(--fg);font-size:min(2.6vh,3.0vw);line-height:1;opacity:0.9;pointer-events:none;
}
/* 手番側の「動かせる駒」がいるマス（駒を選ぶ前） */
.cell.movable{box-shadow:inset 0 0 0 2px var(--dim);}
/* いま選んでいる駒のマス */
.cell.selected{background:#6a5a1a;box-shadow:inset 0 0 0 4px var(--fg);}
/* 直前に指された場所 */
.cell.last::after{
  content:"";position:absolute;left:5%;top:5%;width:16%;height:16%;
  background:#ff3b30;border:1px solid #fff;border-radius:50%;
}
/* カーソル（キーボード・タッチのフォーカス） */
.cell.cursor{box-shadow:inset 0 0 0 5px var(--fg), 0 0 10px var(--fg);z-index:2;}
.cell:focus{outline:none;}
.cell.cursor:focus{box-shadow:inset 0 0 0 6px var(--fg), 0 0 14px var(--fg);}

/* ---------------- 下部の読み上げ内容表示（実況欄） ---------------- */
#log{
  flex:0 0 auto;height:18vh;overflow:hidden;background:#000;color:var(--fg);
  font-size:calc(3.6vh * var(--fsc));line-height:1.2;padding:0.2em 0.5em;
  border-top:3px solid var(--fg);
  display:flex;align-items:center;justify-content:center;text-align:center;
}
#log p{margin:0;}
#log p.important{font-weight:bold;}

/* 白黒モード（設定）。盤面の色も含めて画面全体をグレースケールにする */
html.mono{filter:grayscale(1);}

/* ---------------- 選択サポート（設定でオンのとき） ---------------- */
#selSupBar{
  flex:0 0 auto;height:18vh;background:#000;border-top:3px solid var(--fg);
  display:flex;align-items:stretch;gap:0.4vh;padding:0.4vh;
}
#selSupBar button{
  background:#111;color:var(--fg);border:2px solid var(--line);border-radius:8px;
  font-family:inherit;cursor:pointer;padding:0 0.2em;
}
#selSupBar .navBtn{flex:0 0 22%;font-size:calc(2.8vh * var(--fsc));}
#selSupBar button.dim{opacity:0.35;}
#selSupBar #selSupItem{
  flex:1 1 auto;font-size:calc(3.6vh * var(--fsc));font-weight:bold;overflow:hidden;
  border-color:var(--fg);
}
/* 選択サポート中は、黒画面を画面下のバーの上で止める（バーを覆わないように） */
html.selsup #cutscene{inset:0 0 18vh 0;}
/* タイトル画面では一覧が画面いっぱいなので、バーは画面下端に固定する */
#titleWrap ~ #selSupBar{position:fixed;left:0;right:0;bottom:0;height:20vh;z-index:20;}

/* ---------------- 選択画面（メニュー） ---------------- */
#menu{
  position:absolute;inset:2vh 6%;
  background:rgba(0,0,0,0.94);border:4px solid var(--fg);border-radius:12px;
  padding:0.8em 1.1em;z-index:10;
  display:flex;flex-direction:column;
}
#menu h2{font-size:calc(2.8vh * var(--fsc));color:var(--fg);margin-bottom:0.4em;flex:0 0 auto;}
#menu ul{list-style:none;overflow-y:auto;flex:1 1 auto;min-height:0;}
#menu li{
  font-size:calc(2.8vh * var(--fsc));padding:0.35em 0.5em;border-radius:8px;
  color:var(--dim);cursor:pointer;
}
#menu li.sel{background:var(--fg);color:#000;font-weight:bold;}
#menu li.pageNav{color:var(--fg);text-align:center;font-weight:bold;background:#222;}
#menuList li:focus{outline:none;}
#menuSitu{
  font-size:calc(1.9vh * var(--fsc));color:var(--dim);margin-top:0.5em;line-height:1.4;
  max-height:16vh;overflow-y:auto;border-top:1px solid var(--line);padding-top:0.4em;flex:0 0 auto;
}

/* ---------------- 画面中央の大きなメッセージ ---------------- */
#bigMsg{
  position:absolute;top:42%;left:0;width:100%;text-align:center;
  font-size:calc(5vh * var(--fsc));font-weight:bold;color:var(--fg);
  text-shadow:2px 2px 10px #000;pointer-events:none;z-index:5;
}

/* ---------------- 黒画面（説明・一覧） ---------------- */
#cutscene{
  position:fixed;inset:0;background:#000;z-index:30;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.5em;
  cursor:pointer;padding:2vh;
}
#cutIcon{font-size:calc(12vh * var(--fsc));line-height:1;}
#cutSub{font-size:calc(2.6vh * var(--fsc));color:var(--dim);text-align:center;padding:0 1em;min-height:1em;}
#cutSub.situ-list{
  text-align:left;white-space:pre-line;max-height:60vh;overflow-y:auto;
  font-size:calc(2.3vh * var(--fsc));max-width:86vw;min-width:70vw;color:var(--fg);
}
.situ-line{padding:0.15em 0.4em;border-radius:6px;color:var(--dim);}
.situ-line.sel{background:var(--fg);color:#000;font-weight:bold;}
#cutText{font-size:calc(4.6vh * var(--fsc));color:var(--fg);font-weight:bold;text-align:center;padding:0 0.5em;}
#cutHint{font-size:calc(2.4vh * var(--fsc));color:var(--dim);margin-top:1em;}

/* ---------------- 結果表示画面 ---------------- */
#resultScreen{
  position:fixed;inset:0;background:#000;z-index:40;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2vh;
  cursor:pointer;padding:2vh;
}
#resTitle{font-size:calc(4.2vh * var(--fsc));color:var(--fg);font-weight:bold;}
#resReason{font-size:calc(3.4vh * var(--fsc));color:var(--fg);text-align:center;}
#resWinner{font-size:calc(4.2vh * var(--fsc));color:var(--fg);font-weight:bold;text-align:center;}
#resHint{font-size:calc(2.4vh * var(--fsc));color:var(--dim);margin-top:2vh;}

/* ---------------- ネット対戦（今は未実装。要素だけ用意しておく） ---------------- */
#netLobbyWrap{
  position:fixed;inset:0;background:#000;z-index:45;
  display:flex;flex-direction:column;align-items:center;padding:2vh;
}
#netLobbyTitle{font-size:calc(2.6vh * var(--fsc));color:var(--fg);font-weight:bold;margin-bottom:1.5vh;text-align:center;}
#netLobbyFrame{
  flex:1;width:min(92vw,480px);border:2px solid var(--fg);border-radius:10px;background:#fff;
}

/* ---------------- スマホ用の操作ボタン ---------------- */
#touchBar{
  position:absolute;bottom:0.4vh;right:0.4vh;display:flex;gap:0.4em;z-index:6;
}
#touchBar button{
  min-height:44px;padding:0.3em 0.6em;
  font-size:calc(1.9vh * var(--fsc));font-weight:bold;color:var(--fg);background:rgba(0,0,0,0.7);
  border:2px solid var(--fg);border-radius:10px;cursor:pointer;font-family:inherit;
}
#touchBar button:active{background:var(--fg);color:#000;}

/* ---------------- 言語選択画面 (start.html) ---------------- */
#startWrap{
  height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2vh;padding:2vh;
}
#startWrap h1{font-size:calc(4.6vh * var(--fsc));color:var(--fg);text-align:center;}
#langPrompts{font-size:calc(2.2vh * var(--fsc));color:var(--dim);text-align:center;line-height:1.6;}
#langList{list-style:none;width:min(90vw,480px);max-height:64vh;overflow-y:auto;}
#langList li{
  font-size:calc(3.4vh * var(--fsc));padding:0.4em 1em;margin:0.3em 0;border-radius:12px;
  color:var(--dim);border:2px solid var(--line);cursor:pointer;text-align:center;
}
#langList li.sel{background:var(--fg);color:#000;font-weight:bold;border-color:var(--fg);}
#langList li.pageNav{color:var(--fg);font-weight:bold;background:#222;}
#langList li:focus{outline:none;}

/* ---------------- タイトル画面 (index.html) ---------------- */
#titleWrap{
  height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.6vh;padding:2vh;
}
#titleWrap h1{font-size:calc(5vh * var(--fsc));color:var(--fg);text-align:center;}
#welcomeMsg{font-size:calc(2.3vh * var(--fsc));color:var(--dim);text-align:center;}
#titlePrompts{font-size:calc(2.2vh * var(--fsc));color:var(--dim);text-align:center;line-height:1.6;}
#titleList{list-style:none;width:min(90vw,480px);max-height:62vh;overflow-y:auto;}
#titleList li{
  font-size:calc(3.4vh * var(--fsc));padding:0.4em 1em;margin:0.3em 0;border-radius:12px;
  color:var(--dim);border:2px solid var(--line);cursor:pointer;text-align:center;
}
#titleList li.sel{background:var(--fg);color:#000;font-weight:bold;border-color:var(--fg);}
#titleList li:focus{outline:none;}

/* 説明（マニュアル）オーバーレイ */
#manualOverlay{
  position:fixed;inset:0;background:#000;z-index:30;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2vh;padding:3vh;
}
#manualText{
  white-space:pre-line;max-width:86vw;max-height:78vh;overflow-y:auto;
  font-size:calc(2.4vh * var(--fsc));line-height:1.6;color:var(--fg);
}
#manualHint{font-size:calc(2.2vh * var(--fsc));color:var(--dim);}

/* 小さい画面（スマホ）向けの調整 */
@media (max-width:700px){
  #status{font-size:calc(2vh * var(--fsc));gap:0.8em;}
  #log{height:16vh;font-size:calc(3vh * var(--fsc));}
  #selSupBar{height:16vh;}
  html.selsup #cutscene{inset:0 0 16vh 0;}
  #menu{inset:1.5vh 3%;padding:0.6em 0.8em;}
  .handBar{font-size:calc(1.5vh * var(--fsc));padding:0.15em 0.4em;}
  .handPieceBtn{font-size:min(2.4vh, 5.2vw);}
}
[hidden]{display:none !important;}