/* =========================================================
   コマンド式ゲーム共通スタイル（バリバリカーリング／相撲／海戦／迷宮／ラーメン／暗算）
   弱視（ロービジョン）の利用者を想定し、
   ・背景と文字は最大コントラスト（黒 × 黄）
   ・情報は色だけに頼らず、記号・文字でも区別できるようにする
   ・文字サイズは設定で4段階に拡大できる（--fsc を掛けた大きさで指定する）
   ことを全体の約束にしている。--fsc を掛け忘れた箇所は拡大されないので注意。
   ファイル末尾に、このゲーム固有のスタイルをまとめてある。
   ========================================================= */
:root{
  --bg:#000000;          /* 背景（黒） */
  --fg:#ffee00;          /* 文字（黄） */
  --dim:#b8a800;         /* 補助的な文字（暗めの黄） */
  --line:#5a5200;        /* 枠線 */
  --me:#48c9ff;          /* 自分側を表す色 */
  --opp:#ff6b6b;         /* 相手側を表す色 */
  --ok:#5ee66b;          /* 良い結果 */
  --ng:#ff5a5a;          /* 悪い結果 */
  --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%;}
[hidden]{display:none !important;}
/* 白黒モード（設定）。画面全体をグレースケールにする */
html.mono{filter:grayscale(1);}

/* ---------------- 上部の状況表示 ---------------- */
#status{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  gap:1.0em;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 .me{color:var(--me);}
#status .opp{color:var(--opp);}
#status .sub{color:var(--dim);font-size:0.75em;}

/* ---------------- 中央（ゲームごとの表示領域） ---------------- */
#mid{flex:1 1 auto;position:relative;min-height:0;display:flex;}
#scene{
  flex:1 1 auto;min-height:0;overflow-y:auto;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:0.6vh;padding:1vh 2vw 8vh 2vw;width:100%;
}
.sceneHead{font-size:calc(2.6vh * var(--fsc));color:var(--dim);text-align:center;}
.sceneBig{font-size:calc(6vh * var(--fsc));font-weight:bold;color:var(--fg);text-align:center;line-height:1.1;}
.sceneRow{
  width:min(96%,720px);display:flex;justify-content:space-between;gap:0.6em;
  font-size:calc(2.4vh * var(--fsc));border-bottom:1px solid var(--line);padding:0.2em 0.3em;
}
.sceneRow .k{color:var(--dim);}
.sceneRow .v{color:var(--fg);font-weight:bold;}
.sceneRow.me .v{color:var(--me);}
.sceneRow.opp .v{color:var(--opp);}
.bar{
  width:min(96%,720px);height:calc(2.2vh * var(--fsc));border:2px solid var(--line);border-radius:6px;
  overflow:hidden;background:#111;
}
.bar > i{display:block;height:100%;background:var(--fg);}
.bar.me > i{background:var(--me);}
.bar.opp > i{background:var(--opp);}
.chipRow{display:flex;flex-wrap:wrap;gap:0.4em;justify-content:center;width:min(96%,720px);}
.chip{
  font-size:calc(2vh * var(--fsc));padding:0.15em 0.6em;border:2px solid var(--line);border-radius:999px;
  color:var(--dim);
}
.chip.on{color:#000;background:var(--fg);border-color:var(--fg);font-weight:bold;}
.chip.me{color:var(--me);border-color:var(--me);}
.chip.opp{color:var(--opp);border-color:var(--opp);}

/* ---------------- 下部の読み上げ内容表示（実況欄） ---------------- */
#log{
  flex:0 0 auto;height:24vh;overflow:hidden;background:#000;color:var(--fg);
  font-size:calc(3.6vh * var(--fsc));line-height:1.25;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;}

/* ---------------- 選択サポート（設定でオンのとき） ---------------- */
#selSupBar{
  flex:0 0 auto;height:24vh;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 24vh 0;}
/* タイトル画面では一覧が画面いっぱいなので、バーは画面下端に固定する */
#titleWrap ~ #selSupBar{position:fixed;left:0;right:0;bottom:0;height:20vh;z-index:20;}

/* ---------------- 選択画面（メニュー） ---------------- */
#menu{
  position:absolute;inset:2vh 5%;
  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;white-space:pre-line;max-height:60vh;overflow-y:auto;}
#cutSub.situ-list{
  text-align:left;white-space:pre-line;max-height:62vh;overflow-y:auto;
  font-size:calc(2.3vh * var(--fsc));max-width:88vw;min-width:74vw;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;}
#resScore{font-size:calc(5vh * var(--fsc));color:var(--fg);font-weight:bold;text-align:center;white-space:pre-line;}
#resWinner{font-size:calc(4vh * 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;min-width: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.pageNav{color:var(--fg);font-weight:bold;background:#222;}
#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.7em;}
  #log{height:22vh;font-size:calc(3.2vh * var(--fsc));}
  #selSupBar{height:22vh;}
  html.selsup #cutscene{inset:0 0 22vh 0;}
  #menu{inset:1.5vh 3%;padding:0.6em 0.8em;}
}

/* =========================================================
   ここから下は バリバリ暗算 固有のスタイル
   ========================================================= */
/* 出題中に1つずつ大きく出る数字。弱視の利用者が「一瞬で読み取れる」ことが
   最優先なので、画面いっぱいまで大きくし、太字・最大コントラストにしてある
   （情報そのものはすべて読み上げにもあるので、見えなくても遊べる）。 */
#scene{justify-content:center;}
/* --flashChars（何文字の数字か）は js/game.*.js が数字を出すたびに入れる。
   6桁＋マイナス記号でも横にはみ出さない大きさに収めるため、文字数で割って決める
   （固定の 30vw のままだと、狭い画面では両端の桁が切れて読めなくなる）。 */
.flashNum{
  --flashChars:1;
  font-size:min(calc(22vh * var(--fsc)), calc(92vw / var(--flashChars) * 1.5));
  font-weight:bold;line-height:1;color:var(--fg);
  font-variant-numeric:tabular-nums;letter-spacing:0.02em;
  text-align:center;white-space:nowrap;
}
/* 引く数（マイナス）は色だけに頼らず、必ず「−」の記号でも分かるようにする
   （白黒モード・色覚の違いのため。文字列は js/game.*.js が組み立てる） */
.flashNum.minus{color:var(--opp);}
.flashIdle{font-size:calc(4.4vh * var(--fsc));color:var(--dim);text-align:center;line-height:1.4;}
.flashHead{font-size:calc(2.8vh * var(--fsc));color:var(--dim);text-align:center;}

/* 何個目の数字かを表す点。同じ内容は読み上げにも出る */
.dotRow{display:flex;flex-wrap:wrap;gap:0.35em;justify-content:center;width:min(96%,720px);}
.dotRow .dot{
  width:calc(1.6vh * var(--fsc));height:calc(1.6vh * var(--fsc));border-radius:50%;
  border:2px solid var(--line);background:#111;
}
.dotRow .dot.on{background:var(--fg);border-color:var(--fg);}

/* 答えの選択肢・出た数字の羅列は、桁をそろえて読みやすくする */
#menu li,.recapLine{font-variant-numeric:tabular-nums;}