/* バリバリリバーシ2 — 黒い背景・黄色い文字。
   弱視（ロービジョン）の利用者を想定し、
   ・背景と文字は最大コントラスト（黒 × 黄）
   ・盤面は「緑のマス／黒石 ●／白石 ○」で色と形の両方で見分けられるようにする
   ・文字サイズは設定で 4 段階に拡大できる（--fsc を掛けた大きさで指定する）
   ことを全体の約束にしている。--fsc を掛け忘れた箇所は拡大されないので注意。 */
:root{
  --bg:#000000;          /* 背景（黒） */
  --fg:#ffee00;          /* 文字（黄） */
  --dim:#b8a800;         /* 補助的な文字（暗めの黄） */
  --line:#5a5200;        /* 枠線 */
  --board:#0e7a34;       /* 盤面の緑 */
  --boardLine:#000000;   /* 盤面のマス目の線 */
  --black:#000000;       /* 黒石 */
  --white:#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 .stoneMark{font-size:1.15em;}
#turnDisp{color:var(--fg);}
#status .side{color:var(--dim);}
#status .side.active{color:var(--fg);text-decoration:underline;}
#remainDisp{color:var(--dim);font-size:0.75em;}

/* ---------------- 盤面 ---------------- */
#mid{flex:1 1 auto;display:flex;align-items:center;justify-content:center;position:relative;min-height:0;}
#boardWrap{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
#board{
  display:grid;
  /* 左端の行番号＋8列。行も同じ割り当て（上端が列名 A〜H）。
     minmax(0,…) にしているのは、中の文字（行番号・石）が大きいときに
     マス目がその文字の高さまで押し広げられ、盤面が正方形でなくなるのを防ぐため。
     文字サイズを最大にすると実際にそうなった */
  grid-template-columns:minmax(0,0.6fr) repeat(8, minmax(0,1fr));
  grid-template-rows:minmax(0,0.6fr) repeat(8, minmax(0,1fr));
  width:min(94vw, 100%);
  height:auto;
  aspect-ratio:1 / 1;
  max-height:100%;
  max-width:calc(100% - 0.5em);
  gap:0;
  background:var(--bg);
}
/* 盤面が縦に収まらない画面では、高さ基準で正方形にする */
@supports (aspect-ratio: 1) {
  #board{width:auto;height:100%;}
  @media (max-aspect-ratio: 1/1){ #board{width:min(94vw,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(2.2vh * var(--fsc)), 4.5vw, 4.5vh);
}
.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;
  font-size:100%;
}
/* 石。黒は「●」、白は「○」。色が見えなくても形で区別できるようにしている */
.cell .stone{
  line-height:1;font-size:min(7.6vh, 8.4vw);
  pointer-events:none;
}
.cell .stone.black{color:var(--black);text-shadow:0 0 4px #fff,0 0 4px #fff,0 0 2px #fff;}
.cell .stone.white{color:var(--white);font-weight:bold;text-shadow:0 0 4px #000,0 0 4px #000,0 0 2px #000;}
/* 今そこに置ける場所。黄色の点線と中央の小さな印で知らせる */
.cell.playable{box-shadow:inset 0 0 0 3px var(--fg);}
.cell.playable .hint{
  color:var(--fg);font-size:min(3.4vh,3.8vw);line-height:1;opacity:0.9;pointer-events:none;
}
/* 直前に置かれた石の位置 */
.cell.last::after{
  content:"";position:absolute;left:6%;top:6%;width:18%;height:18%;
  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:22vh;overflow:hidden;background:#000;color:var(--fg);
  font-size:calc(4.2vh * 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:22vh;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(4vh * var(--fsc));font-weight:bold;overflow:hidden;
  border-color:var(--fg);
}
/* 選択サポート中は、黒画面を画面下のバーの上で止める（バーを覆わないように） */
html.selsup #cutscene{inset:0 0 22vh 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(14vh * 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(5vh * 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;}
#resScore{font-size:calc(5vh * var(--fsc));color:var(--fg);font-weight:bold;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;
}
#netWaiting{
  position:fixed;inset:0;background:#000;z-index:46;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1em;
}
#netWaitingIcon{font-size:calc(12vh * var(--fsc));line-height:1;animation:netThink 1.4s ease-in-out infinite;}
#netWaitingText{font-size:calc(3vh * var(--fsc));color:var(--fg);text-align:center;padding:0 1em;}
@keyframes netThink{ 0%,100%{opacity:0.4;} 50%{opacity:1;} }

/* ---------------- スマホ用の操作ボタン ---------------- */
#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: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:20vh;font-size:calc(3.4vh * var(--fsc));}
  #selSupBar{height:20vh;}
  html.selsup #cutscene{inset:0 0 20vh 0;}
  #menu{inset:1.5vh 3%;padding:0.6em 0.8em;}
}
[hidden]{display:none !important;}