/* バリバリベースボール4
   ・画面の色づかいは元のバリバリベースボール3（イメージ1・2）に合わせている。
     左右のチーム欄＝緑、打者／投手欄＝オレンジ、グラウンド＝緑、
     カウント欄＝青、実況欄＝黄。
   ・弱視（ロービジョン）の利用者を想定し、文字は太く大きく、
     背景と文字は必ず高コントラストの組み合わせにする。
   ・文字サイズは設定で4段階に拡大できる（--fsc を掛けた大きさで指定する）。
     --fsc を掛け忘れた箇所は拡大されないので注意。
   ・白黒モードは html.mono のグレースケールで実現する。 */
:root{
  --bg:#000000;          /* 背景（黒） */
  --fg:#ffee00;          /* タイトル画面などの文字（黄） */
  --dim:#b8a800;         /* 補助的な文字 */
  --line:#5a5200;        /* 枠線 */
  --panel:#008080;       /* 左右のチーム欄（緑がかった青） */
  --panelLine:#003c3c;
  --orange:#ff8000;      /* 打者・投手の情報欄 */
  --field:#00b400;       /* グラウンド */
  --count:#1e90ff;       /* カウント欄 */
  --cmt:#ffff99;         /* 実況欄（黄） */
  --card:#0000cc;        /* カード */
  --cardLine:#00ff00;    /* カードの枠 */
  --cardSel:#ff0000;     /* 選んでいるカードの枠 */
  --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%;}
/* 左のチーム欄 ｜ 真ん中 ｜ 右のチーム欄 */
#fieldGrid{
  flex:1 1 auto;min-height:0;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.6fr) minmax(0,1fr);
  gap:2px;background:#000;
}

/* ---------------- 左右のチーム欄（スタメン） ---------------- */
.teamPanel{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;}
.teamName{
  flex:0 0 auto;background:var(--panel);color:var(--white);
  border:2px solid var(--panelLine);
  display:flex;align-items:center;justify-content:center;
  font-size:calc(2.4vh * var(--fsc));font-weight:bold;
  padding:0.5em 0.2em;text-align:center;overflow:hidden;
}
.lineup{list-style:none;flex:1 1 auto;display:flex;flex-direction:column;min-height:0;}
.lineup li{
  flex:1 1 0;min-height:0;display:grid;grid-template-columns:2.2em 2.4em minmax(0,1fr);
  align-items:center;gap:0.2em;
  background:var(--panel);color:var(--white);border:2px solid var(--panelLine);
  font-size:calc(1.9vh * var(--fsc));padding:0 0.25em;overflow:hidden;white-space:nowrap;
}
.lineup li .pos{font-weight:bold;text-align:center;}
.lineup li .no{text-align:center;}
.lineup li .nm{overflow:hidden;text-overflow:ellipsis;}
/* 今打席に立っている選手・今投げている投手 */
.lineup li.now{background:var(--white);color:#000;font-weight:bold;}
.lineup li.onbase .nm{text-decoration:underline;}

/* ---------------- 真ん中 ---------------- */
#centerCol{display:flex;flex-direction:column;min-width:0;min-height:0;gap:2px;}

/* スコアボード */
#scoreWrap{flex:0 0 auto;overflow:hidden;}
#scoreTable{
  width:100%;border-collapse:collapse;table-layout:fixed;
  background:var(--panel);color:var(--white);
  font-size:calc(1.9vh * var(--fsc));
}
#scoreTable th,#scoreTable td{
  border:2px solid var(--panelLine);text-align:center;padding:0.25em 0;
  overflow:hidden;white-space:nowrap;
}
#scoreTable th{font-weight:bold;}
#scoreTable td.tm{font-weight:bold;}
#scoreTable td.tot{font-weight:bold;}
#scoreTable tr.batting td.tm{background:var(--white);color:#000;}

/* 後で使う情報エリア（他球場の試合結果） */
#subInfo{
  flex:0 0 12%;background:var(--cmt);color:#000;border:2px solid #999900;
  font-size:calc(1.9vh * var(--fsc));padding:0.2em 0.4em;overflow:hidden;
}

/* 打者欄 ｜ グラウンド＋カウント ｜ 投手欄 */
#midRow{
  flex:1 1 auto;min-height:0;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr);gap:2px;
}
.playerBox{
  background:var(--orange);color:var(--white);border:2px solid #b35900;
  display:flex;flex-direction:column;justify-content:space-around;
  padding:0.3em 0.5em;font-size:calc(2.1vh * var(--fsc));font-weight:bold;
  min-width:0;overflow:hidden;
}
.playerBox .pname{font-size:calc(2.4vh * var(--fsc));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.playerBox .st{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

#centerMid{display:flex;flex-direction:column;min-width:0;min-height:0;gap:2px;}
#fieldRow{flex:0 0 45%;display:grid;grid-template-columns:1fr 1fr;gap:2px;min-height:0;}

/* 塁の図 */
#baseBox{background:var(--field);border:2px solid #006400;display:flex;align-items:center;justify-content:center;min-height:0;}
#baseSvg{width:96%;height:96%;}
#baseSvg .diamond{fill:none;stroke:#ffffff;stroke-width:2.5;}
#baseSvg .base{fill:none;stroke:#ffffff;stroke-width:2.5;}
#baseSvg .base.on{fill:#ffff00;stroke:#ffff00;}
#baseSvg .base.home{fill:#ffffff;}

/* カウント欄 */
#countBox{
  background:var(--count);color:var(--white);border:2px solid #004c99;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:0.2em;min-height:0;overflow:hidden;
}
#inningDisp{font-size:calc(2.1vh * var(--fsc));font-weight:bold;}
#scoreDisp{font-size:calc(2.4vh * var(--fsc));font-weight:bold;margin-bottom:0.2em;white-space:nowrap;}
#bsoDisp{align-self:flex-start;padding-left:0.4em;}
.bso{font-size:calc(2vh * var(--fsc));font-weight:bold;letter-spacing:0.1em;line-height:1.25;}
#bDisp{color:#00ff66;}
#sDisp{color:#ffee00;}
#oDisp{color:#ff5050;}

/* ①「間」の絵と実況・解説だけの小さいエリア（後で使う） */
#illust{
  flex:1 1 auto;min-height:0;background:#5aa0d8 url("../img/stgium.png") center/cover no-repeat;
  border:2px solid #33607f;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  position:relative;
}
#illustIcon{font-size:min(9vh,12vw);}
/* ①エリアいっぱいに隙間なく表示する（②③④は縦横比を保つが、①はここだけ cover で埋める） */
#illustStatic{width:100%;height:100%;object-fit:cover;}

/* 投球〜打撃〜打球のイラスト（②③④）。画面全体に重ねて大きく表示する。
   文字に重なってもよい指定なので z-index を高くしてあるが、画面下の
   実況／カード／選択サポート帯（高さ22vh固定）にはかぶらないよう bottom を空けている。
   left/width は js 側（syncIllustOverlayLayout）が左右オレンジパネルの
   中央を基準に毎回計算してインラインで入れる。ここでは共通の見た目だけ */
#illustOverlay{position:fixed;inset:0 0 22vh 0;z-index:40;pointer-events:none;}
.illustOvImg{position:absolute;top:0;height:100%;object-fit:contain;}

/* ---------------- ホームラン演出（バナー＋花火） ---------------- */
#homerBanner{position:fixed;inset:0 0 22vh 0;z-index:45;pointer-events:none;overflow:hidden;}
#homerBannerTrack{position:absolute;top:40%;left:0;width:100%;overflow:hidden;white-space:nowrap;}
#homerBannerText{
  display:inline-block;font-size:calc(9vh * var(--fsc));font-weight:bold;color:#ffd700;
  text-shadow:0 0 0.12em #ff3300,0 0 0.3em #ff3300,0 0 0.5em #ff8800;
  animation:homerScroll 3s linear;transform:translateX(100vw);
}
@keyframes homerScroll{
  0%{transform:translateX(100vw);}
  100%{transform:translateX(-105%);}
}
#fireworks{position:absolute;inset:0;}
.fw{
  position:absolute;width:16vh;height:16vh;border-radius:50%;
  background:radial-gradient(circle,#fff 0%,#ffee00 22%,#ff6a00 48%,transparent 72%);
  opacity:0;animation:fwBurst 1.3s ease-out infinite;
}
.fw1{top:12%;left:14%;animation-delay:0s;}
.fw2{top:18%;left:66%;animation-delay:0.35s;background:radial-gradient(circle,#fff 0%,#66ffcc 22%,#0099ff 48%,transparent 72%);}
.fw3{top:52%;left:8%;animation-delay:0.7s;background:radial-gradient(circle,#fff 0%,#ff88ff 22%,#cc00ff 48%,transparent 72%);}
.fw4{top:48%;left:78%;animation-delay:1.0s;background:radial-gradient(circle,#fff 0%,#ffff66 22%,#ff2222 48%,transparent 72%);}
@keyframes fwBurst{
  0%{transform:scale(0.2);opacity:0;}
  18%{opacity:1;}
  65%{transform:scale(1.35);opacity:0.75;}
  100%{transform:scale(1.9);opacity:0;}
}
html.selsup #homerBanner{inset:0 0 22vh 0;}
@media (max-width:800px){ #homerBanner{inset:0 0 26vh 0;} }
@media (orientation:landscape) and (max-height:500px){ #homerBanner{inset:0 0 30vh 0;} }

/* ---------------- 投球コース・打撃タイミングの5x5マス目 ---------------- */
#pitchGrid{
  position:fixed;inset:0;z-index:41;background:#5aa0d8;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5vh;
  padding:2vh;
}
#pgTitle{
  font-size:calc(3vh * var(--fsc));font-weight:bold;color:#fff;text-align:center;
  text-shadow:0 0 6px #000;
}
#pgBoard{
  display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);
  gap:min(1.2vh,1.2vw);width:min(70vh,92vw);height:min(70vh,92vw);
}
.pgCell{
  background:#ffffff;border:2px solid #33607f;border-radius:6px;
  position:relative;display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}
/* 中央3x3=ストライクゾーンだと分かるよう、その3x3のまわりだけ赤い枠で囲む
   （9マスそれぞれの外側にあたる辺だけ太い赤にして、全体で1つの赤枠に見せる） */
.pgCell.pgZoneStrike{background:#eaf6ff;}
.pgCell.pgZoneTop{border-top:5px solid #ff2222;}
.pgCell.pgZoneBottom{border-bottom:5px solid #ff2222;}
.pgCell.pgZoneLeft{border-left:5px solid #ff2222;}
.pgCell.pgZoneRight{border-right:5px solid #ff2222;}
.pgCell.pgSel{outline:5px solid #ffcc00;outline-offset:-5px;}
/* キャッチャー捕球（見送り）のマスは赤、バッターが振った位置は青 */
.pgCell.pgCaught{background:#ff3333 !important;}
.pgCell.pgHit{background:#3388ff !important;}
.pgBall{
  position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#ddd 60%,#999);
  box-shadow:0 0 0 2px #333;transition:width 0.12s,height 0.12s;
}
#pgHint{
  font-size:calc(2.2vh * var(--fsc));color:#fff;text-align:center;text-shadow:0 0 6px #000;
  max-width:90vw;
}

/* ---------------- 画面下の帯（実況／カード／選択サポート） ---------------- */
#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(5vh * var(--fsc));font-weight:bold;line-height:1.2;padding:0.2em 0.5em;
  overflow:hidden;
}
#cardRow{
  flex:0 0 22vh;background:#000;display:flex;align-items:stretch;gap:0.5vh;padding:0.5vh;
}
#cardRow .card{
  flex:1 1 0;min-width:0;
  background:var(--card);color:var(--white);border:4px solid var(--cardLine);border-radius:6px;
  font-family:inherit;font-size:calc(3.4vh * var(--fsc));font-weight:bold;
  display:flex;align-items:center;justify-content:center;text-align:center;
  cursor:pointer;padding:0.1em;overflow:hidden;word-break:break-word;
}
#cardRow .card.sel{border-color:var(--cardSel);border-width:6px;}
#cardRow .card.dim{opacity:0.45;}
#cardRow .card:focus{outline:none;}

#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(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:4vh 8%;
  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;}
/* 「次へ／前へ」が選択中のときは.selも同時に付くが、後ろの.pageNavルールが
   同じ詳細度で.selを打ち消してしまい、選んでも色が変わって見えなかった。
   .pageNav.selを別に定義して選択中の見た目を復活させる */
#menu li.pageNav.sel{background:var(--fg);color:#000;}
#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;
  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;}
#cutImg{max-height:24vh;max-width:60vw;object-fit:contain;}
#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;}
#resIllust{max-width:60vw;max-height:24vh;object-fit:contain;}
#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;}

/* ---------------- 試合後のスポーツニュース ----------------
   テレビのスポーツニュースの見た目に寄せる。上に見出しの帯、
   左右両端に猫（cat1.png）とウサギ（usa1.png）のキャスター、
   中央にスコアと原稿。原稿は1行ずつ選んで読み返せる。
   今しゃべっている行に合わせて、猫とウサギが交互に強調表示される。 */
#newsScreen{
  position:fixed;inset:0;background:#001a33;z-index:42;
  display:flex;flex-direction:column;align-items:center;padding:1.5vh 2vw;gap:1vh;
}
#newsHead{
  flex:0 0 auto;width:100%;text-align:center;
  background:var(--count);color:#fff;border:3px solid #ffffff;border-radius:8px;
  font-size:calc(3.4vh * var(--fsc));font-weight:bold;padding:0.25em 0.5em;
}
/* タイトルの下にまとめる、試合結果のスコアボードと投手成績 */
#newsBox{
  flex:0 0 auto;width:100%;max-width:1100px;color:var(--fg);
}
#newsScore{
  color:var(--fg);font-size:calc(2.8vh * var(--fsc));font-weight:bold;
  text-align:center;line-height:1.3;margin-bottom:0.3vh;
}
#newsScoreTable{
  width:100%;border-collapse:collapse;table-layout:fixed;
  background:var(--panel);color:var(--white);
  font-size:calc(1.6vh * var(--fsc));margin-bottom:0.4vh;
}
#newsScoreTable th,#newsScoreTable td{
  border:2px solid var(--panelLine);text-align:center;padding:0.2em 0;
  overflow:hidden;white-space:nowrap;
}
#newsScoreTable td.tm{font-weight:bold;}
#newsScoreTable td.tot{font-weight:bold;}
#newsPitcherInfo{
  color:#cfe8ff;font-size:calc(1.9vh * var(--fsc));line-height:1.5;
  text-align:center;
}
#newsBody{
  flex:1 1 auto;min-height:0;display:flex;align-items:stretch;justify-content:center;
  gap:1.5vw;width:100%;max-width:1100px;
}
.newsCaster{
  flex:0 0 auto;width:min(18vh,20vw);
  background:#5aa0d8;border:3px solid #ffffff;border-radius:8px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  align-self:stretch;max-height:min(30vh,36vw);
  transition:transform 0.15s, box-shadow 0.15s, background 0.15s, border-color 0.15s;
}
.newsCaster img{width:100%;height:100%;object-fit:contain;}
.newsCasterIcon{font-size:min(11vh,13vw);}
/* 今しゃべっている方を赤枠で強調する */
.newsCaster.speaking{
  background:#ffcf4d;transform:scale(1.06);
  border-color:#ff0000;border-width:5px;
  box-shadow:0 0 0 4px #ffdddd;
}
#newsCenter{
  flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1vh;
}
#newsLines{
  flex:1 1 auto;min-height:0;overflow-y:auto;list-style:none;
  width:100%;padding:0.3em;
}
#newsLines li{
  color:#e8e8e8;font-size:calc(2.6vh * var(--fsc));line-height:1.45;
  padding:0.2em 0.5em;border-radius:6px;cursor:pointer;
}
#newsLines li.sel{background:var(--fg);color:#000;font-weight:bold;}
#newsLines li:focus{outline:none;}
#newsHint{flex:0 0 auto;color:#9fb8cc;font-size:calc(2.2vh * var(--fsc));}
/* 試合中の #commentary と同じ見た目の、下の読み上げエリア */
#newsReadArea{
  flex:0 0 14vh;width:100%;background:var(--cmt);color:#000;border-top:3px solid #999900;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:calc(3.2vh * var(--fsc));font-weight:bold;line-height:1.25;padding:0.2em 0.8em;
  overflow:hidden;
}
/* 選択サポート中は、画面下のバーの上でニュース画面・結果画面を止める（バーを覆わないように） */
html.selsup #newsScreen,
html.selsup #resultScreen{inset:0 0 22vh 0;}

/* ================= 言語選択画面 (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.pageNav.sel{background:var(--fg);color:#000;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:800px){
  /* 横幅が足りないので、左右のチーム欄は隠して打席まわりだけを大きく見せる。
     スタメンは試合中メニューの「打順の確認」からいつでも読める */
  #fieldGrid{grid-template-columns:minmax(0,1fr);}
  .teamPanel{display:none;}
  #commentary{flex:0 0 26vh;font-size:calc(4.2vh * var(--fsc));}
  #cardRow{flex:0 0 26vh;}
  #cardRow .card{font-size:calc(2.4vh * var(--fsc));}
  #selSupBar{flex:0 0 26vh;}
  html.selsup #cutscene,
  html.selsup #newsScreen,
  html.selsup #resultScreen{inset:0 0 26vh 0;}
  #illustOverlay{inset:0 0 26vh 0;}
  #newsLines li{font-size:calc(2.2vh * var(--fsc));}
  #newsReadArea{flex:0 0 12vh;font-size:calc(2.6vh * var(--fsc));}
  #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;
    /* ブラウザのアドレスバー分だけずれないよう、動的ビューポート単位で画面いっぱいにする。
       （dvh/dvw 非対応の古い端末向けに、まず vh/vw 版も書いておく） */
    width:100vh;height:100vw;
    width:100dvh;height:100dvw;
    transform:rotate(90deg) translateY(-100%);
    transform-origin:top left;
  }
  /* 横向きは幅に余裕があるので、左右のスタメン欄は隠さず出したままにする */
  #fieldGrid{grid-template-columns:minmax(0,0.7fr) minmax(0,2fr) minmax(0,0.7fr);}
  .teamPanel{display:flex;}
  .teamName{font-size:calc(2vw * var(--fsc));padding:0.2em;}
  .lineup li{font-size:calc(1.6vw * var(--fsc));}
  .playerBox{font-size:calc(1.8vw * var(--fsc));padding:0.15em 0.4em;}
  .playerBox .pname{font-size:calc(2vw * var(--fsc));}
  #scoreTable{font-size:calc(1.8vw * var(--fsc));}
  #inningDisp{font-size:calc(2vw * var(--fsc));}
  #scoreDisp{font-size:calc(2.2vw * var(--fsc));}
  .bso{font-size:calc(1.8vw * var(--fsc));}
  #illustIcon{font-size:min(9vw,12vh);}
  #commentary{flex:0 0 27vw;font-size:calc(3.4vw * var(--fsc));padding:0.1em 0.4em;}
  #cardRow{flex:0 0 27vw;padding:0.3vw;gap:0.3vw;}
  #cardRow .card{font-size:calc(2vw * var(--fsc));border-width:3px;}
  #selSupBar{flex:0 0 27vw;}
  #selSupBar .navBtn{font-size:calc(2.4vw * var(--fsc));}
  #selSupBar #selSupItem{font-size:calc(3vw * var(--fsc));}
  html.selsup #cutscene,
  html.selsup #newsScreen,
  html.selsup #resultScreen{inset:0 0 27vw 0;}
  #illustOverlay{inset:0 0 27vw 0;}
  #homerBanner{inset:0 0 27vw 0;}
  #homerBannerText{font-size:calc(7vw * var(--fsc));}
  #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.6vw * var(--fsc));}
  #menuSitu{font-size:calc(1.8vw * var(--fsc));max-height:14vw;}
  #newsLines li{font-size:calc(2vw * var(--fsc));}
  #newsReadArea{flex:0 0 12vw;font-size:calc(2.4vw * var(--fsc));}
  #cutIcon{font-size:calc(12vw * var(--fsc));}
  #cutImg{max-height:24vw;max-width:60vh;}
  #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.6vw * var(--fsc));}
  #resWinner{font-size:calc(4vw * var(--fsc));}
  #resHint{font-size:calc(2vw * var(--fsc));}
}