:root{
  --bg:#0a0a0a; --fg:#ffffff; --accent:#ffee00;
  --blue:#2277ff; --red:#ff3333; --green:#22cc44;
}
*{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{
  height:7vh;display:flex;align-items:center;justify-content:center;
  gap:2em;font-size:3.2vh;font-weight:bold;background:#111;
  border-bottom:2px solid #444;
}
#status .jp{color:#66aaff;} #status .us{color:#ff7777;}
#status .clock{color:var(--accent);}
#mid{height:66vh;display:flex;}
#courtWrap{flex:1;height:100%;position:relative;background:#0b3d13;}

/* 左右の選手情報パネル */
.panel{
  width:12vw;min-width:92px;background:#0d1420;overflow-y:auto;
  padding:0.25em 0.2em;font-size:1.9vh;line-height:1.2;
  border-top:2px solid #444;
}
#panelL{border-right:2px solid #333;}
#panelR{border-left:2px solid #333;}
.panel .pHead{font-weight:bold;font-size:2vh;margin-bottom:0.25em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.panel .pRow{
  padding:0.1em 0.2em;margin-bottom:0.1em;border-radius:6px;color:#ccc;
  word-break:break-all;
}
.panel .pRow .pos{color:#8fd18f;font-weight:bold;}
.panel .pRow.hold{background:#4a3d00;color:#ffee00;font-weight:bold;}
.panel .pRow.fz{opacity:0.5;}
canvas{display:block;width:100%;height:100%;}
/* 下部の実況表示: 最新1件だけを、弱視のユーザー向けに大きな文字で中央表示する */
#log{
  height:27vh;overflow:hidden;background:#000;color:#fff;
  font-size:7vh;line-height:1.2;padding:0.2em 0.5em;
  border-top:3px solid var(--accent);
  display:flex;align-items:center;justify-content:center;text-align:center;
}
#log p{margin:0;}
#log p.important{color:var(--accent);font-weight:bold;}

/* 白黒モード（設定画面で切り替え）: 画面全体をグレースケールにする。
   ルート要素にかけるので、コート(canvas)もカットイン用のイラスト(img)もまとめて白黒になる。
   html は画面と同じ大きさなので、position:fixed の #menu の位置計算は変わらない */
html.mono{filter:grayscale(1);}

/* 選択サポート（設定画面で切り替え）: 実況欄の場所に「前へ／今の項目／次へ」を並べ、
   画面の下だけを触れば選べるようにする。項目のところを押すと決定 */
#selSupBar{
  height:27vh;background:#000;border-top:3px solid var(--accent);
  display:flex;align-items:stretch;gap:0.4vh;padding:0.4vh;
}
#selSupBar button{
  background:#111;color:var(--fg);border:2px solid #666;border-radius:8px;
  font-family:inherit;cursor:pointer;padding:0 0.2em;
}
#selSupBar .navBtn{flex:0 0 22%;font-size:3.4vh;}
/* これ以上進めない側は薄暗くする（押すとビープが鳴って端だと分かる） */
#selSupBar button.dim{opacity:0.35;border-color:#444;}
#selSupBar #selSupItem{
  flex:1 1 auto;font-size:5vh;font-weight:bold;overflow:hidden;
  border-color:var(--accent);color:var(--accent);
}
/* 選択サポート中は、黒画面（メッセージ・状況確認）を画面下のバーの上で止める。
   そうしないと黒画面がバーを覆ってしまい、下だけ触る操作ができなくなる */
html.selsup #cutscene{inset:0 0 27vh 0;}
/* タイトル画面では一覧が画面いっぱいなので、バーは画面下端に重ねて固定する */
#titleWrap ~ #selSupBar{position:fixed;left:0;right:0;bottom:0;height:20vh;z-index:20;}
/* 選択画面: 上下は画面いっぱい、左右は画面の1/3程度が既定（スマホは JS で
   コート幅・画面の高さを基準にさらに調整する）。背景は半透明にして、
   奥のコートがうっすら見えるようにする */
#menu{
  position:fixed;inset:4vh 33%;
  background:rgba(17,17,17,0.88);border:4px solid var(--accent);border-radius:12px;
  padding:1em 1.5em;z-index:10;
  display:flex;flex-direction:column;
}
#menu h2{font-size:3.4vh;color:var(--accent);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:3.2vh;padding:0.35em 0.5em;border-radius:8px;color:#ccc;cursor:pointer;}
#menu li.sel{background:var(--accent);color:#000;font-weight:bold;}
/* 一覧内の「前へ／次へ」項目 */
#menu li.pageNav{color:var(--accent);text-align:center;font-weight:bold;background:#222;}
#menuSitu{font-size:2.1vh;color:#999;margin-top:0.6em;line-height:1.4;
  max-height:18vh;overflow-y:auto;border-top:1px solid #444;padding-top:0.4em;flex:0 0 auto;}
/* PK戦の背景（あとでイラスト差し替え予定・今は暗い画面） */
#pkBg{
  position:absolute;inset:0;background:#05070d;z-index:4;
}
#bigMsg{
  position:absolute;top:38%;left:0;width:100%;text-align:center;
  font-size:7vh;font-weight:bold;color:var(--accent);
  text-shadow:2px 2px 8px #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;
}
#cutIcon{font-size:20vh;line-height:1;}
/* 黒画面のイラスト差し替え（img/<番号>.png があればアイコンの代わりに表示） */
#cutImg{max-height:52vh;max-width:82vw;object-fit:contain;}
#cutSub{font-size:3.2vh;color:#ccc;text-align:center;padding:0 1em;min-height:1em;}
#cutSub.situ-list{
  text-align:left;white-space:pre-line;max-height:58vh;overflow-y:auto;
  font-size:2.5vh;max-width:78vw;min-width:60vw;
}
/* 状況確認: 上下キーで選んでいる行を強調 */
.situ-line{padding:0.15em 0.4em;border-radius:6px;color:#bbb;}
.situ-line.sel{background:var(--accent);color:#000;font-weight:bold;}
#cutText{font-size:6.5vh;color:#fff;font-weight:bold;text-align:center;padding:0 0.5em;}
#cutHint{font-size:3vh;color:#999;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;
}
#resTitle{font-size:5vh;color:var(--accent);font-weight:bold;}
#resScore{font-size:6vh;color:#fff;font-weight:bold;text-align:center;padding:0 0.5em;}
#resPk{font-size:3.5vh;color:#ccc;min-height:1em;}
#resWinner{font-size:5vh;color:var(--accent);font-weight:bold;text-align:center;padding:0 0.5em;}
#resHint{font-size:2.6vh;color:#999;margin-top:2vh;}

/* ネット対戦: ロビー画面（通信システム/lobby.html を埋め込む） */
#netLobbyWrap{
  position:fixed;inset:0;background:#000;z-index:45;
  display:flex;flex-direction:column;align-items:center;padding:2vh;
}
#netLobbyTitle{font-size:3vh;color:var(--accent);font-weight:bold;margin-bottom:1.5vh;text-align:center;}
#netLobbyFrame{
  flex:1;width:min(92vw,480px);border:2px solid var(--accent);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:14vh;line-height:1;animation:netThink 1.4s ease-in-out infinite;}
#netWaitingText{font-size:3.4vh;color:#ccc;text-align:center;padding:0 1em;}
@keyframes netThink{ 0%,100%{opacity:0.4;} 50%{opacity:1;} }

/* スマホ用の操作ボタン */
#touchBar{
  position:absolute;bottom:0.5vh;right:0.5vh;display:flex;gap:0.6em;z-index:6;
}
#touchBar button{
  min-width:12vw;min-height:44px;padding:0.3em 0.8em;
  font-size:2.4vh;font-weight:bold;color:#fff;background:rgba(0,0,0,0.55);
  border:2px solid var(--accent);border-radius:10px;cursor:pointer;
}
#touchBar button:active{background:var(--accent);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:5.5vh;color:var(--accent);text-align:center;}
#langPrompts{font-size:2.4vh;color:#aaa;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:4vh;padding:0.4em 1em;margin:0.3em 0;border-radius:12px;
  color:#ccc;border:2px solid #444;cursor:pointer;text-align:center;
}
#langList li.sel{background:var(--accent);color:#000;font-weight:bold;border-color:var(--accent);}

/* タイトル画面 (index.html) */
#titleWrap{
  height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2vh;padding:2vh;
}
#titleWrap h1{font-size:6vh;color:var(--accent);text-align:center;}
#welcomeMsg{font-size:2.6vh;color:#ccc;text-align:center;}
/* 見出しの下の項目数表示。言語選択画面の #langPrompts（Select Language）と同じ見た目にする */
#titlePrompts{font-size:2.4vh;color:#aaa;text-align:center;line-height:1.6;}
#titleList{list-style:none;width:min(90vw,480px);max-height:64vh;overflow-y:auto;}
#titleList li{
  font-size:4vh;padding:0.4em 1em;margin:0.35em 0;border-radius:12px;
  color:#ccc;border:2px solid #444;cursor:pointer;text-align:center;
}
#titleList li.sel{background:var(--accent);color:#000;font-weight:bold;border-color:var(--accent);}
/* 説明（マニュアル）オーバーレイ */
#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:80vw;max-height:78vh;overflow-y:auto;
  font-size:2.6vh;line-height:1.6;color:#eee;
}
#manualHint{font-size:2.4vh;color:#999;}

/* 小さい画面（スマホなど）向けの調整。選手欄を詰めて、コートを広く使う */
@media (max-width:700px){
  #status{font-size:2.4vh;gap:1em;}
  .panel{width:17vw;min-width:56px;font-size:1.5vh;padding:0.15em 0.12em;}
  .panel .pHead{font-size:1.55vh;margin-bottom:0.15em;}
  .panel .pRow{padding:0.06em 0.12em;margin-bottom:0.06em;}
  .panel .pRow .pos{font-size:1.4vh;}
  #menu{inset:2vh 33%;padding:0.8em;}
  #menu h2{font-size:2.6vh;}
  #menu li{font-size:2.8vh;}
  #log{font-size:6vh;}
  #cutText{font-size:4.5vh;}
  #cutIcon{font-size:14vh;}
  #touchBar button{min-width:20vw;font-size:2vh;}
}
/* スマホ縦持ち: 画面全体を90度回転して横向きレイアウトにする
   （タッチ操作は自動的に回転後の座標に対応する）
   回転後は「縦=100vw・横=100vh」になるため、高さ・文字サイズは vw 基準で指定し直す。
   これを怠ると #mid や #log が画面からはみ出して選手欄が隠れる */
@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;
  }
  #status{height:8vw;font-size:3.4vw;gap:1em;}
  #mid{height:65vw;}
  #log{height:27vw;font-size:8vw;}
  #selSupBar{height:27vw;gap:0.4vw;padding:0.4vw;}
  html.selsup #cutscene{inset:0 0 27vw 0;}
  #selSupBar .navBtn{font-size:3.4vw;}
  #selSupBar #selSupItem{font-size:5vw;}
  .panel{font-size:2.8vw;padding:0.15em 0.15em;}
  .panel .pHead{font-size:3vw;}
  .panel .pRow .pos{font-size:2.6vw;}
  #menu{position:absolute;inset:2vw 33%;padding:0.6em 1em;}
  #menu h2{font-size:4.6vw;}
  #menu li{font-size:4.4vw;}
  #menuSitu{font-size:2.8vw;max-height:14vw;}
  #menu li.pageNav{font-size:4vw;}
  #titleWrap h1{font-size:8vw;}
  #welcomeMsg{font-size:3.6vw;}
  #titlePrompts{font-size:3.3vw;}
  #titleList{width:min(86vh,480px);}
  #titleList li{font-size:5vw;}
  #manualText{font-size:3.6vw;max-width:82vh;max-height:74vw;}
  #manualHint{font-size:3vw;}
  #bigMsg{font-size:8vw;}
  #cutIcon{font-size:22vw;}
  #cutImg{max-height:50vw;max-width:80vh;}
  #cutSub{font-size:4vw;}
  #cutSub.situ-list{max-height:55vw;font-size:3.4vw;max-width:78vh;min-width:60vh;}
  #cutText{font-size:7.5vw;}
  #cutHint{font-size:3.4vw;}
  #resTitle{font-size:5.5vw;}
  #resScore{font-size:7vw;}
  #resPk{font-size:4vw;}
  #resWinner{font-size:5.5vw;}
  #resHint{font-size:3vw;}
  #touchBar button{font-size:3vw;min-width:12vh;min-height:9vw;}
  #netLobbyTitle{font-size:4vw;}
  #netLobbyFrame{width:min(92vh,480px);}
  #netWaitingIcon{font-size:15vw;}
  #netWaitingText{font-size:4vw;}
  /* #cutscene などは #app の子要素なので、回転した #app 全体に広がる */
  #cutscene, #resultScreen, #netLobbyWrap, #netWaiting{position:absolute;inset:0;}
}
[hidden]{display:none !important;}

/* 選択中の項目にはフォーカスも当てている（スクリーンリーダー対応）。
   .sel の色で位置は分かるので、既定のフォーカス枠は出さない */
#menuList li:focus, #titleList li:focus { outline: none; }