/* バリバリバレーボール — 黒い背景・黄色い文字。
   バリバリゴールボール／リバーシ2と同じ配色・レイアウトに揃えてある
   （弱視・ロービジョンの利用者を想定し、背景と文字を最大コントラスト
   （黒×黄）にする、というシリーズ共通の約束）。
   文字サイズは設定で4段階に拡大できる（--fsc を掛けた大きさで指定する）。
   --fsc を掛け忘れた箇所は拡大されないので注意。 */
:root {
  --bg: #000000;        /* 背景（黒） */
  --fg: #ffee00;        /* 文字（黄） */
  --dim: #b8a800;       /* 補助的な文字（暗めの黄） */
  --line: #5a5200;      /* 枠線 */
  --fsc: 1;             /* 文字サイズ倍率（設定で 1 / 1.25 / 1.5 / 2 に変わる） */
}
html.mono { filter: grayscale(1); }
/* #cutscene・#resultScreen・#menu・#manualOverlay・#netLobbyWrap・#netWaiting は
   JS側が hidden 属性を付け外しして表示・非表示を切り替える。display指定を持つ
   ID指定のCSSより hidden 属性を必ず優先させるためのルール
   （バリバリシリーズ共通。他のゲームでも同じものをファイル冒頭近くに置く）。 */
[hidden] { display: none !important; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  background: var(--bg); color: var(--fg);
  font-family: "Yu Gothic", "Meiryo", "Malgun Gothic", "Hiragino Sans", sans-serif;
  overscroll-behavior: none;
}
button { font-family: inherit; color: inherit; }

/* ---------------- タイトル画面 (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, #langPrompts {
  font-size: calc(2.2vh * var(--fsc)); color: var(--dim);
  text-align: center; line-height: 1.6;
}

/* ---------------- 言語選択画面 (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; }

/* ---------------- 一覧（タイトル・言語選択・試合中メニュー共通の見た目） ---------------- */
#titleList, #langList, #menuList {
  list-style: none;
  width: min(90vw, 560px);
  max-height: 62vh; overflow-y: auto;
}
#titleList li, #langList li, #menuList li {
  font-size: calc(3vh * var(--fsc));
  padding: .4em 1em; margin: .3em 0;
  border-radius: 12px; border: 2px solid var(--line);
  color: var(--dim); cursor: pointer; text-align: center;
  outline: none;
}
#titleList li.sel, #langList li.sel, #menuList li.sel {
  background: var(--fg); color: #000; font-weight: bold; border-color: var(--fg);
}
#titleList li.pageNav, #langList li.pageNav, #menuList li.pageNav {
  color: var(--fg); font-weight: bold; background: #222;
}
#titleList li.pageNav.sel, #langList li.pageNav.sel, #menuList li.pageNav.sel {
  background: var(--fg); color: #000;
}
#titleList li:focus, #langList li:focus, #menuList li:focus { outline: none; }

/* ---------------- 説明（マニュアル）オーバーレイ ---------------- */
#manualOverlay {
  position: fixed; inset: 0; z-index: 40;
  background: #000; 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); }

/* ---------------- ゲーム画面 (game.html) ---------------- */
#app { height: 100%; display: flex; flex-direction: column; }
#status {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 1em;
  padding: .35em .4em;
  font-size: calc(2.2vh * var(--fsc)); font-weight: bold;
  background: #111; border-bottom: 2px solid var(--line);
  flex-wrap: wrap; text-align: center;
}
#status .team { color: var(--dim); }
#status .sc { font-size: 1.4em; color: var(--fg); }
#status .dash { color: var(--dim); }
#setDisp, #serveDisp { color: var(--fg); }

#mid { flex: 1 1 auto; position: relative; min-height: 0; }
#courtWrap { position: absolute; inset: 0; }

/* ---------------- コート ----------------
   上が相手の6人、真ん中がネット、下（手前）が自分の6人。
   ボール（.ball）はその間を行き来する。 */
#court { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 1vh 2vw; }
#court .half { flex: 1 1 0; display: flex; flex-direction: column; justify-content: space-evenly; gap: .4vh; }
#court .net {
  flex: 0 0 auto; height: 0;
  border-top: 4px dashed var(--fg); opacity: .8; margin: .6vh 0;
}
#court .prow { display: flex; justify-content: space-around; gap: 1vw; }
#court .pchip {
  flex: 1 1 0; max-width: 30%;
  border: 2px solid var(--line); border-radius: 10px;
  padding: .25em .2em; text-align: center; color: var(--dim);
  display: flex; flex-direction: column; align-items: center; gap: .15em;
  background: #0a0a0a; overflow: hidden;
}
#court .pchip.active { border-color: var(--fg); color: var(--fg); background: #222; font-weight: bold; }
#court .pchip.libero { border-style: dashed; }
#court .pno { font-size: calc(1.9vh * var(--fsc)); font-weight: bold; color: var(--fg); }
#court .pname { font-size: calc(1.7vh * var(--fsc)); white-space: nowrap; }
#court .ppos { font-size: calc(1.4vh * var(--fsc)); color: var(--dim); }
#court .pstam { display: block; width: 80%; height: .7vh; background: #333; border-radius: 4px; overflow: hidden; }
#court .pstam i { display: block; height: 100%; background: var(--fg); }
#court .pstam i.mid { background: #cc9900; }
#court .pstam i.low { background: #aa3300; }
#court .ball {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: calc(3vh * var(--fsc)); color: var(--fg);
  transition: left .3s ease-out, top .3s ease-out, transform .3s ease-out;
  pointer-events: none; z-index: 3;
}

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

/* ---------------- 選択画面（試合中メニュー） ---------------- */
#menu {
  position: absolute; inset: 2vh 4%; z-index: 20;
  background: rgba(0, 0, 0, .94); border: 4px solid var(--fg); border-radius: 12px;
  padding: .8em 1.1em;
  display: flex; flex-direction: column;
}
#menuTitle {
  font-size: calc(2.6vh * var(--fsc)); color: var(--fg);
  margin-bottom: .4em; flex: 0 0 auto; text-align: center;
}
#menuList { flex: 1 1 auto; min-height: 0; overflow-y: auto; width: 100%; max-height: none; }
#menuSitu {
  font-size: calc(1.9vh * var(--fsc)); color: var(--dim); margin-top: .5em; line-height: 1.4;
  max-height: 16vh; overflow-y: auto; border-top: 1px solid var(--line); padding-top: .4em;
  flex: 0 0 auto; white-space: pre-wrap; text-align: center;
}

#touchBar { position: absolute; right: 2vw; bottom: 2vh; z-index: 10; display: flex; gap: .5em; }
#touchBar button {
  min-height: 44px; padding: .3em .6em;
  width: calc(7vh * var(--fsc)); height: calc(7vh * var(--fsc));
  border-radius: 50%; border: 2px solid var(--fg);
  background: rgba(0, 0, 0, .7); color: var(--fg);
  font-size: calc(2.4vh * var(--fsc)); cursor: pointer;
}
#touchBar button:active { background: var(--fg); color: #000; }

/* 読み上げた内容をそのまま大きな字で残す欄。選択サポートON時はこの欄と
   #selSupBar が入れ替わって出るので、高さは揃えてある */
#log {
  flex: 0 0 auto; height: 18vh;
  background: #000; color: var(--fg); border-top: 3px solid var(--fg);
  font-size: calc(2.4vh * var(--fsc)); line-height: 1.4; padding: .4em .6em;
  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: 18vh;
  background: #000; border-top: 3px solid var(--fg);
  display: flex; align-items: stretch; gap: .4vh; padding: .4vh;
}
/* 選択サポート中は、黒画面（カットシーン）を画面下のバーの上で止める
   （固定表示のバーをカットシーンが覆ってしまわないように） */
html.selsup #cutscene { inset: 0 0 18vh 0; }
#selSupBar button {
  background: #111; color: var(--fg); border: 2px solid var(--line); border-radius: 8px;
  cursor: pointer; padding: 0 .2em;
}
#selSupBar .navBtn { flex: 0 0 22%; font-size: calc(2.6vh * var(--fsc)); }
#selSupBar .navBtn[disabled], #selSupBar .navBtn.dim { opacity: .35; }
#selSupItem {
  flex: 1 1 auto; font-size: calc(2.8vh * var(--fsc)); font-weight: bold;
  overflow: hidden; border-color: var(--fg);
}
/* タイトル画面では一覧が画面いっぱいなので、バーは画面下端に固定する */
#titleWrap ~ #selSupBar { position: fixed; left: 0; right: 0; bottom: 0; height: 20vh; z-index: 20; }

/* ---------------- 黒画面（メッセージ・一覧） ---------------- */
#cutscene {
  position: fixed; inset: 0; z-index: 30;
  background: #000; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5em; padding: 2vh;
}
#cutIcon { font-size: calc(9vh * var(--fsc)); line-height: 1; }
#cutText {
  font-size: calc(3.6vh * var(--fsc)); color: var(--fg); font-weight: bold;
  text-align: center; padding: 0 .5em; line-height: 1.4;
}
#cutSub {
  font-size: calc(2.4vh * var(--fsc)); color: var(--dim);
  text-align: center; padding: 0 1em; min-height: 1em; line-height: 1.7;
  white-space: pre-wrap; max-height: 46vh; overflow-y: auto; width: min(760px, 92vw);
}
#cutSub.situ-list {
  text-align: left; white-space: normal;
  max-height: 60vh; overflow-y: auto;
  font-size: calc(2.2vh * var(--fsc)); max-width: 88vw; min-width: 70vw; color: var(--fg);
}
#cutSub.situ-list p { margin: .15em 0; padding: .15em .4em; border-radius: 6px; color: var(--dim); }
#cutSub.situ-list p.cur { background: var(--fg); color: #000; font-weight: bold; }
#cutHint { font-size: calc(2.2vh * var(--fsc)); color: var(--dim); margin-top: 1em; }

/* ---------------- 結果画面 ---------------- */
#resultScreen {
  position: fixed; inset: 0; z-index: 35;
  background: #000; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.2vh; padding: 2vh;
}
#resTitle { font-size: calc(3.4vh * var(--fsc)); color: var(--fg); font-weight: bold; letter-spacing: .08em; }
#resScore { font-size: calc(4vh * var(--fsc)); color: var(--fg); font-weight: bold; text-align: center; }
#resSets { font-size: calc(2.4vh * var(--fsc)); color: var(--dim); text-align: center; }
#resWinner { font-size: calc(3.4vh * var(--fsc)); color: var(--fg); font-weight: bold; text-align: center; }
#resHint { font-size: calc(2.2vh * var(--fsc)); color: var(--dim); margin-top: 2vh; }

/* ---------------- ネット対戦 ---------------- */
#netLobbyWrap {
  position: fixed; inset: 0; z-index: 25;
  background: #000; 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: auto 0 22vh 0; z-index: 22;
  display: flex; flex-direction: column; align-items: center; gap: .6vh;
  pointer-events: none;
}
#netWaitingIcon { font-size: calc(5vh * var(--fsc)); }
#netWaitingText { font-size: calc(2.4vh * var(--fsc)); color: var(--fg); text-align: center; }

/* 小さい画面（スマホ）向けの調整 */
@media (max-width: 700px) {
  #status { font-size: calc(1.9vh * var(--fsc)); gap: .7em; }
  #log { height: 20vh; font-size: calc(2.6vh * var(--fsc)); }
  #selSupBar { height: 20vh; }
  html.selsup #cutscene { inset: 0 0 20vh 0; }
  #menu { inset: 1.5vh 3%; padding: .6em .8em; }
  #court .pname { font-size: calc(1.5vh * var(--fsc)); }
}