/* バリバリフラッグフットボール
   ・色づかい・文字サイズの考え方はバリバリベースボール4／フットサル2に合わせている。
     背景＝黒、文字＝黄、実況欄＝黄地に黒、フィールド＝緑。
   ・弱視（ロービジョン）の利用者を想定し、文字は太く大きく、
     背景と文字は必ず高コントラストの組み合わせにする。
   ・文字サイズは設定で4段階に拡大できる（--fsc を掛けた大きさで指定する）。
     --fsc を掛け忘れた箇所は拡大されないので注意。
   ・白黒モードは html.mono のグレースケールで実現する。 */
:root{
  --bg:#000000;
  --fg:#ffee00;       /* 見出し・項目の文字 */
  --dim:#b8a800;      /* 補助的な文字 */
  --line:#5a5200;     /* 枠線 */
  --panel:#00506e;    /* 状況表示のパネル */
  --panelLine:#00304a;
  --cmt:#ffff99;      /* 実況欄 */
  --field:#0a6b1e;    /* フィールドの緑 */
  --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;
}
[hidden]{display:none !important;}
/* 白黒モード（設定）。フィールドの緑も含めて画面全体をグレースケールにする */
html.mono{filter:grayscale(1);}

/* ================= 試合画面 (game.html) ================= */
#app{display:flex;flex-direction:column;height:100%;}

#topBar{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  background:var(--panel);color:var(--white);border-bottom:3px solid var(--panelLine);
  padding:0.25em 0.6em;font-size:calc(2.6vh * var(--fsc));font-weight:bold;
  white-space:nowrap;overflow:hidden;
}

/* 左＝フィールドの絵（左右に出場選手欄つき）／右＝文字で読める状況と実況ログ */
#fieldWrap{
  flex:1 1 auto;min-height:0;
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:2px;background:#000;
}
#fieldArea{display:flex;min-width:0;min-height:0;gap:2px;background:#000;}
#fieldBox{position:relative;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden;background:#063f12;}
#field{display:block;width:100%;height:100%;}

/* フィールド左右の出場選手欄（バリバリフットサル2の左右パネルと同じ考え方）。
   攻撃側5人・守備側5人のうち、その時どちらの並びを見せているかは選手欄の見出しで示す */
.teamPanel{
  flex:0 0 auto;width:11vw;min-width:74px;max-width:150px;
  list-style:none;overflow-y:auto;background:#0d1420;border:2px solid var(--panelLine);
  padding:0.25em 0.2em;font-size:calc(1.55vh * var(--fsc));line-height:1.3;
}
.teamPanel .pHead{
  font-weight:bold;font-size:calc(1.7vh * var(--fsc));margin-bottom:0.3em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.teamPanel .pRow{
  padding:0.15em 0.25em;margin-bottom:0.15em;border-radius:6px;color:#ccc;
  word-break:break-word;
}
.teamPanel .pRow .pJob{color:#8fd1c8;font-weight:bold;}
.teamPanel .pRow.hold{background:#4a3d00;color:#ffee00;font-weight:bold;}

#sidePanel{display:flex;flex-direction:column;min-width:0;min-height:0;gap:2px;}
#statusPanel{
  flex:0 0 auto;background:var(--panel);color:var(--white);border:2px solid var(--panelLine);
  padding:0.35em 0.5em;font-size:calc(2.2vh * var(--fsc));font-weight:bold;line-height:1.45;
}
#situDisp{font-size:calc(2.5vh * var(--fsc));}
#posDisp{color:#bfe6ff;font-weight:normal;}
#playLog{
  flex:1 1 auto;min-height:0;overflow-y:auto;list-style:none;
  background:#101010;border:2px solid var(--line);padding:0.3em 0.5em;
}
#playLog li{
  font-size:calc(2vh * var(--fsc));color:#e8e8e8;line-height:1.4;
  padding:0.15em 0;border-bottom:1px solid #2a2a2a;
}
#playLog li:last-child{color:var(--fg);font-weight:bold;}

/* ---------------- 画面下の帯（実況／選択サポート） ---------------- */
#commentary{
  flex:0 0 22vh;background:var(--cmt);color:#000;border-top:3px solid #999900;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:calc(4.6vh * var(--fsc));font-weight:bold;line-height:1.2;padding:0.2em 0.5em;
  overflow:hidden;
}
/* プレー再生中の一時停止・スキップボタン。#commentary の上に浮かせて出す
   （#appの回転transformが新しい包含ブロックを作るので、position:fixedのまま
   縦持ちスマホの回転レイアウトでも正しい位置に付く。#cutscene 等と同じ手法） */
#playbackCtrl{
  position:fixed; right:1.2vh; bottom:1.2vh; z-index:15;
  display:flex; gap:0.6vh;
}
#playbackCtrl button{
  background:rgba(17,17,17,0.88); color:var(--fg); border:2px solid var(--line); border-radius:10px;
  font-family:inherit; font-weight:bold; cursor:pointer;
  font-size:calc(2vh * var(--fsc)); padding:0.5em 0.8em;
}
#playbackCtrl button:active{background:#222;}
#selSupBar{
  flex:0 0 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(3.6vh * var(--fsc));font-weight:bold;overflow:hidden;border-color:var(--fg);
}
/* 選択サポート中は、黒画面を画面下のバーの上で止める（バーを覆わないように） */
html.selsup #cutscene,
html.selsup #resultScreen{inset:0 0 22vh 0;}
/* タイトル画面では一覧が画面いっぱいなので、バーは画面下端に固定する */
#titleWrap ~ #selSupBar{position:fixed;left:0;right:0;bottom:0;height:20vh;z-index:20;}

/* ---------------- 選択画面（メニュー） ---------------- */
#menu{
  position:absolute;inset:3vh 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.7vh * var(--fsc));padding:0.32em 0.5em;border-radius:8px;
  color:var(--dim);cursor:pointer;
}
#menu li.sel{background:var(--fg);color:#000;font-weight:bold;}
#menuList li:focus{outline:none;}
#menuSitu{
  font-size:calc(1.9vh * var(--fsc));color:var(--dim);margin-top:0.5em;line-height:1.45;
  max-height:18vh;overflow-y:auto;border-top:1px solid var(--line);padding-top:0.4em;flex:0 0 auto;
  white-space:pre-line;
}

/* ---------------- 黒画面（メッセージ） ---------------- */
#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:46vh;overflow-y:auto;
}
#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(4.4vh * var(--fsc));color:var(--fg);font-weight:bold;text-align:center;}
#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:35;display:flex;flex-direction:column;}
#netLobbyTitle{flex:0 0 auto;color:var(--fg);font-size:calc(2.6vh * var(--fsc));padding:0.4em;text-align:center;}
#netLobbyFrame{flex:1 1 auto;width:100%;border:0;background:#fff;}
#netWaiting{
  position:fixed;inset:0;background:#000;z-index:36;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2vh;
}
#netWaitingIcon{font-size:calc(10vh * var(--fsc));}
#netWaitingText{font-size:calc(3vh * var(--fsc));color:var(--fg);text-align:center;}

/* ================= 言語選択画面 (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:800px){
  /* 横に並べる幅が無いので、フィールドの絵を上・文字情報を下に積む */
  #fieldWrap{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1.1fr);}
  .teamPanel{width:17vw;min-width:52px;font-size:calc(1.3vh * var(--fsc));padding:0.15em 0.15em;}
  .teamPanel .pHead{font-size:calc(1.4vh * var(--fsc));margin-bottom:0.15em;}
  .teamPanel .pRow{padding:0.08em 0.15em;margin-bottom:0.08em;}
  #commentary{flex:0 0 24vh;font-size:calc(4vh * var(--fsc));}
  #playbackCtrl button{font-size:calc(1.7vh * var(--fsc));padding:0.4em 0.6em;}
  #selSupBar{flex:0 0 24vh;}
  html.selsup #cutscene,
  html.selsup #resultScreen{inset:0 0 24vh 0;}
  #menu{inset:2vh 3%;padding:0.6em 0.8em;}
}

/* ================= スマホを縦に持っていても、常に横向き表示にする =================
   バリバリフットサル・ベースボールと同じ手法: 画面全体（#app）を90度回転して、
   縦持ちのままでも横向きレイアウトに見せる。
   回転後は「縦=100vw・横=100vh」に入れ替わるため、高さ・文字サイズは
   vh ではなく vw 基準で指定し直す（怠ると画面からはみ出す） */
@media (orientation: portrait) and (pointer: coarse) {
  #app{
    position:absolute;top:0;left:0;
    width:100vh;height:100vw;
    width:100dvh;height:100dvw;
    transform:rotate(90deg) translateY(-100%);
    transform-origin:top left;
  }
  #fieldWrap{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);}
  .teamPanel{width:8vw;min-width:60px;font-size:calc(1.3vw * var(--fsc));padding:0.15em 0.15em;}
  .teamPanel .pHead{font-size:calc(1.4vw * var(--fsc));margin-bottom:0.15em;}
  .teamPanel .pRow{padding:0.08em 0.15em;margin-bottom:0.08em;}
  #topBar{font-size:calc(2.2vw * var(--fsc));}
  #statusPanel{font-size:calc(1.9vw * var(--fsc));}
  #situDisp{font-size:calc(2.2vw * var(--fsc));}
  #playLog li{font-size:calc(1.7vw * var(--fsc));}
  #commentary{flex:0 0 26vw;font-size:calc(3.4vw * var(--fsc));padding:0.1em 0.4em;}
  #playbackCtrl{right:1.2vw;bottom:1.2vw;gap:0.6vw;}
  #playbackCtrl button{font-size:calc(1.7vw * var(--fsc));padding:0.4em 0.6em;}
  #selSupBar{flex:0 0 26vw;}
  #selSupBar .navBtn{font-size:calc(2.4vw * var(--fsc));}
  #selSupBar #selSupItem{font-size:calc(3vw * var(--fsc));}
  html.selsup #cutscene,
  html.selsup #resultScreen{inset:0 0 26vw 0;}
  #menu{inset:1.5vw 2%;padding:0.5em 0.7em;}
  #menu h2{font-size:calc(2.6vw * var(--fsc));}
  #menu li{font-size:calc(2.5vw * var(--fsc));}
  #menuSitu{font-size:calc(1.7vw * var(--fsc));max-height:16vw;}
  #cutIcon{font-size:calc(12vw * var(--fsc));}
  #cutSub{font-size:calc(2.2vw * var(--fsc));max-height:46vw;}
  #cutText{font-size:calc(5vw * var(--fsc));}
  #cutHint{font-size:calc(2vw * var(--fsc));}
  #resTitle{font-size:calc(4vw * var(--fsc));}
  #resScore{font-size:calc(4.2vw * var(--fsc));}
  #resWinner{font-size:calc(4vw * var(--fsc));}
  #resHint{font-size:calc(2vw * var(--fsc));}
}