/* 共通ヘッダー（言語 / 戻る / 画面名 / ホーム）。
   どの画面にも必ず付き、ホームへの導線が切れないようにする。

   2段構成。1段目は言語・画面名・ホーム、2段目は「戻る」だけを左端に単独で置く。
   1段に詰めていた頃は言語ピルと戻るが隣り合っていて、戻ろうとして言語を切り替える
   誤タップが実機で起きた。段を分けて、戻るはラベル付きの大きなピルにしている。 */

body.tp #tp-root {
  position: fixed;
  inset: 0;
  z-index: var(--tp-z-screen);
}
body.tp #tp-root[hidden] { display: none; }

/* 対局を続けたまま画面をかぶせている間（nav.openOverlay が body に付ける）。
   かぶせる先は #app（盤）だけではなく #pregame（墓場選び・z-index:96）でもあるので、
   ふつうの画面の重なり順（40）のままだと下へ潜ってしまう。

   下じきも敷く。画面そのものは背景を持たず、ふだんは body の背景をそのまま透かして
   使っているので、そのままかぶせると盤や札が文字の裏に出て読めない。
   色は body と同じ土台（--bg-deep）だけにする。body が重ねている光の飾りまで写すと
   同じ指定を2か所で持つことになり、片方を変えたときにここだけ取り残される。 */
body.tp.tp-overlay #tp-root {
  z-index: var(--tp-z-overlay);
  background: var(--bg-deep);
}

/* ヘッダーの高さは戻る行の有無で変わる。ヘッダー自身と本文の上余白が同じ数字を
   別々に持つと必ずずれるので、ここ1か所だけを出典にする。
   戻る行が出ているかは nav.js の syncHeader() が body.tp-hasback で伝える。 */
body.tp {
  --tp-head-bar-h: var(--tp-tap);   /* 1段目。下限はホームアイコンの当たり判定（--tp-tap） */
  /* 2段目（戻る行）。段を分けただけでは足りない。1段目の言語ピルは見た目30pxでも
     当たり判定は44px＝バーいっぱいに広がっているので、戻るをすぐ下に置くと
     「見た目は10px離れているのに当たり判定は1pxしか離れていない」状態になり、
     戻るの少し上を叩くと言語が切り替わる。誤タップの原因が横から縦へ移るだけ。
     そこで戻る行の上に当たり判定どうしの隙間（--tp-head-back-gap）を必ず取る。 */
  --tp-head-back-gap: 8px;
  --tp-head-back-btn-h: var(--tp-tap); /* 戻るピルは見た目＝当たり判定（44px） */
  --tp-head-back-h: calc(var(--tp-head-back-gap) + var(--tp-head-back-btn-h) + 2px);
  --tp-head-h: var(--tp-head-bar-h);
}
body.tp.tp-hasback { --tp-head-h: calc(var(--tp-head-bar-h) + var(--tp-head-back-h)); }

body.tp .tp-head {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--tp-z-header);
  display: flex;
  flex-direction: column;
  height: calc(var(--tp-head-h) + var(--tp-safe-t));
  padding-top: var(--tp-safe-t);
  background: linear-gradient(180deg, rgba(7, 4, 13, .96) 0%, rgba(7, 4, 13, .86) 70%, rgba(7, 4, 13, 0) 100%);
  color: var(--tp-text);
}
body.tp .tp-head.root { background: none; }

body.tp .tp-head-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--tp-2);
  height: var(--tp-head-bar-h);
  padding: 0 max(var(--tp-2), var(--tp-safe-r)) 0 max(var(--tp-2), var(--tp-safe-l));
}

body.tp .tp-head-left,
body.tp .tp-head-right { display: flex; align-items: center; gap: 2px; }
body.tp .tp-head-right { justify-content: flex-end; }

/* 戻る行。本文の左パディングに頭を揃えて、画面の縦線を通す。
   上端は必ず --tp-head-back-gap ぶん空ける（1段目の当たり判定と重ねない）。 */
body.tp .tp-head-backrow {
  display: flex;
  align-items: flex-start;
  height: var(--tp-head-back-h);
  padding: var(--tp-head-back-gap) max(var(--tp-4), var(--tp-safe-r)) 0 max(var(--tp-4), var(--tp-safe-l));
}

body.tp .tp-head-back {
  -webkit-appearance: none; appearance: none;
  position: relative;
  height: var(--tp-head-back-btn-h);
  padding: 0 var(--tp-4) 0 var(--tp-3);
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--tp-line-lit);
  border-radius: var(--tp-r-pill);
  background: rgba(255, 255, 255, .04);
  color: var(--tp-text);
  font-family: var(--f-body);
  font-size: 14px; font-weight: 700; letter-spacing: .04em;
  cursor: pointer;
  transition: color .14s ease, border-color .14s ease, background .14s ease;
}
body.tp .tp-head-back .tp-ico { width: 18px; height: 18px; }
body.tp .tp-head-back:hover { border-color: var(--tp-accent-deep); }
body.tp .tp-head-back:active { background: rgba(255, 255, 255, .1); }
body.tp .tp-head-back:focus-visible { outline: 2px solid var(--tp-focus); outline-offset: 2px; }
/* 当たり判定を広げる ::after は置かない。ピル自体が 44px あるので不要なうえ、
   見えない判定がピルの外へはみ出すと、上の言語ピルとの隙間が数値どおりに保てない。 */

body.tp .tp-head-title {
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .05em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 言語切替。左上に常駐させる（要件A4） */
body.tp .tp-lang {
  -webkit-appearance: none; appearance: none;
  position: relative;
  /* 見た目のピルは30pxのまま、当たり判定だけ44pxに広げる（タップ最小サイズ） */
  min-width: var(--tp-tap); height: 30px;
  padding: 0 var(--tp-2);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--tp-line-lit);
  border-radius: var(--tp-r-pill);
  background: rgba(255, 255, 255, .04);
  color: var(--tp-text-dim);
  font-family: var(--f-num), var(--f-body);
  font-size: 12px; font-weight: 700; letter-spacing: .12em;
  cursor: pointer;
  transition: color .14s ease, border-color .14s ease, background .14s ease;
}
body.tp .tp-lang:hover { color: var(--tp-text); border-color: var(--tp-accent-deep); }
body.tp .tp-lang:active { background: rgba(255, 255, 255, .1); }
body.tp .tp-lang:focus-visible { outline: 2px solid var(--tp-focus); outline-offset: 2px; }
body.tp .tp-lang::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: var(--tp-tap);
  transform: translateY(-50%);
}

/* テストプレイ版では旧タイトル画面と旧グローバルメニューを出さない。
   ホームは #tp-root 側で作り直しているため（要件B1〜B4）。

   この2行が「最初の1フレームから」効くことが大事。body.tp は scripts/build-testplay.mjs が
   ビルド時に <body> へ焼き込んでいるので、boot.js（module = defer 相当）を待たずに適用される。
   焼き込みをやめると起動のたびに旧タイトル画面が全画面で出てから差し替わる。 */
body.tp #screen-title { display: none !important; }
body.tp:not(.tp-ingame) #btn-global-menu { display: none !important; }

/* ヘッダーの高さぶん、本文を下げる（高さの出典は上の --tp-head-h だけ） */
body.tp .tp-screen {
  padding-top: calc(var(--tp-head-h) + var(--tp-safe-t));
}
/* ホーム画面だけはヘッダーに重ねて、タイトルを大きく見せる */
body.tp .tp-screen[data-screen="home"] { padding-top: 0; }