/* ==========================================================================
   FMS 横向きプレーヤー コントロールバーのオーバレイ表示規則
   スマホ横向き専用（PC・縦向き・iPad は対象外）。
   body.fms-overlay-active が付いている間、.fvVideoView の子へ移設された
   .fvControlView を映像下端に重畳表示する。
   状態: バー格納(既定) / バー表示(body.fms-bar-open)

   [付与元] js/fms-landscape-webgl.js（スマホ横向き新UI = 統合ドロワー）。
   本ファイルは元々 js/fms-landscape-overlay.js（旧オーバレイUI。ピル
   [● 見たい馬 ∧] + 無操作自動格納）用に作られたが、2026-07-29 に旧オーバレイを
   撤去した。バーのオーバレイ規則だけは新UIが「複製せず再利用」しているため
   (css/fms-landscape-webgl.css 冒頭)、ファイルごと残してある。
   旧オーバレイ専用だった .fms-pill / .fms-coach 一式は同日に削除済み。

   配色の出自は assets/design_handoff_player_overlay(旧オーバレイの設計ハンドオフ)。
   ただしバー背景は 2026-06-27 に「完全透明+ボタン敷き物」へ変更済みでハンドオフとは異なる。
   ========================================================================== */

/* .fvControlView の移設中(fms-overlay-active)のみ効く規則群のため、静的HTMLには対象が存在しない。 */
/* --- 既存コントロールバーをオーバレイ化 ------------------------------------ */
/* height / max-height(47px) は既存を流用し、位置・スライドのみ上書き。
   背景は「完全透明」にして可視動画領域を最大化する（視認性は各ボタンの敷き物で確保）。 */
body.fms-overlay-active div.fvVideoView > div.fvControlView {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  z-index: 1300 !important;
  background-color: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-top: none !important;
  box-shadow: none !important;
  /* S0: 格納（下方向へスライドアウト）。fvVideoView の overflow:hidden で隠れる */
  transform: translateY(118%) !important;
  transition: transform 0.24s cubic-bezier(0.32, 0.72, 0, 1) !important;
}

/* --- 白アイコンボタンの敷き物（透明バー上での視認性確保） ------------------ */
/* バー背景を透明にしたため、白スプライトのアイコンボタンにはボタンサイズに
   合わせた半透明の敷き物を敷く。色付きチップ([●ライブ]/[巻戻し]/[見たい馬]/
   LINE/X)は既に背景があるため対象外。 */
/* ラッパーは flex でアイコンを中央寄せにし、敷き物(円)は ::before を絶対配置で
   背面に描く（絶対配置なので flex フローに乗らず中央寄せを乱さない／隣接ボタンと
   6px ほど隙間が空き、レイアウト幅も変えない）。 */
body.fms-overlay-active div.fvVideoView > div.fvControlView div.fvPlayButton,
body.fms-overlay-active div.fvVideoView > div.fvControlView div.fvRwdLongButton,
body.fms-overlay-active div.fvVideoView > div.fvControlView div.fvRwdShortButton,
body.fms-overlay-active div.fvVideoView > div.fvControlView div.fvFwdShortButton,
body.fms-overlay-active div.fvVideoView > div.fvControlView div.fvFwdLongButton,
body.fms-overlay-active div.fvVideoView > div.fvControlView div.fvLiveHeadButton,
body.fms-overlay-active div.fvVideoView > div.fvControlView div.fvTheaterModeButton,
body.fms-overlay-active div.fvVideoView > div.fvControlView div.fvFullScreenButton,
body.fms-overlay-active div.fvVideoView > div.fvControlView div.fvMuteButton {
  position: relative !important;
  height: 40px !important;
  box-sizing: border-box !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-box-align: center !important;
  align-items: center !important;
  -webkit-box-pack: center !important;
  justify-content: center !important;
}

body.fms-overlay-active div.fvVideoView > div.fvControlView div.fvPlayButton::before,
body.fms-overlay-active div.fvVideoView > div.fvControlView div.fvRwdLongButton::before,
body.fms-overlay-active div.fvVideoView > div.fvControlView div.fvRwdShortButton::before,
body.fms-overlay-active div.fvVideoView > div.fvControlView div.fvFwdShortButton::before,
body.fms-overlay-active div.fvVideoView > div.fvControlView div.fvFwdLongButton::before,
body.fms-overlay-active div.fvVideoView > div.fvControlView div.fvLiveHeadButton::before,
body.fms-overlay-active div.fvVideoView > div.fvControlView div.fvTheaterModeButton::before,
body.fms-overlay-active div.fvVideoView > div.fvControlView div.fvFullScreenButton::before,
body.fms-overlay-active div.fvVideoView > div.fvControlView div.fvMuteButton::before {
  content: '' !important;
  position: absolute !important;
  z-index: 0 !important;
  top: 50% !important;
  left: 50% !important;
  -webkit-transform: translate(-50%, -50%) !important;
  transform: translate(-50%, -50%) !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.42) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* 内側スプライトを敷き物の前面・中央へ（既存 margin を解除）＋明るい映像での視認補強 */
body.fms-overlay-active div.fvVideoView > div.fvControlView div.fvControlButton {
  position: relative !important;
  z-index: 1 !important;
  margin: 0 !important;
  opacity: 1 !important;
  -webkit-filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55)) !important;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55)) !important;
}

/* --- 横向きバーのボタン整理（2026-07-13 Android横向き改善） ------------------ */
/* [>>|](fvLiveHeadButton=ライブ先頭へ) は [●ライブ] ピルに集約したため非表示。
   再生/一時停止(fvPlayButton) も横向きでは一旦不要（将来復活の可能性を残すため
   display 制御のみ・DOMと結線は温存）。control.min.js は無編集のまま CSS で出し分ける。 */
body.fms-overlay-active div.fvVideoView > div.fvControlView div.fvLiveHeadButton,
body.fms-overlay-active div.fvVideoView > div.fvControlView div.fvPlayButton {
  display: none !important;
}

/* アイコンボタンの 32px 敷き物どうしが重ならないよう左右マージンを付与。
   ±30/±10 が詰まりすぎる問題を同時に解消し、PCバー(アイコン間 8px)に近い間隔にする。
   対象=巻戻し/送り(±30/±10) と 右群の シアター/全画面。中心間 24+12=36px、
   敷き物 32px なので約4pxの隙間ができ、敷き物が独立して見える。 */
body.fms-overlay-active div.fvVideoView > div.fvControlView div.fvRwdLongButton,
body.fms-overlay-active div.fvVideoView > div.fvControlView div.fvRwdShortButton,
body.fms-overlay-active div.fvVideoView > div.fvControlView div.fvFwdShortButton,
body.fms-overlay-active div.fvVideoView > div.fvControlView div.fvFwdLongButton,
body.fms-overlay-active div.fvVideoView > div.fvControlView div.fvTheaterModeButton,
body.fms-overlay-active div.fvVideoView > div.fvControlView div.fvFullScreenButton {
  margin-left: 6px !important;
  margin-right: 6px !important;
}

/* 見たい馬ピル(左群の最後のチップ)と ±30 の間はやや広めに離して、
   「モードチップ群」と「シークボタン群」の境界を視覚的に作る。 */
body.fms-overlay-active div.fvVideoView > div.fvControlView div.fvRwdLongButton {
  margin-left: 12px !important;
}

/* 画質 [自動▾] はテキストのため丸角 pill の敷き物 */
body.fms-overlay-active div.fvVideoView > div.fvControlView div.fvQualityButton {
  height: 32px !important;
  box-sizing: border-box !important;
  background: rgba(0, 0, 0, 0.42) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-box-align: center !important;
  align-items: center !important;
  -webkit-box-pack: center !important;
  justify-content: center !important;
  padding: 0 9px !important;
  /* 行上端から中心20px へ揃える(2026-07-28)。h32 なので 20-16=4px。
     旧 3px は中心19px で、隣の40pxボタン群(中心20px)と1pxズレていた。
     ギア(⚙)表示中は本ボタンを隠すため見えるのは native HLS / 録画(VOD)のときだけ。 */
  margin-top: 4px !important;
}
body.fms-overlay-active div.fvVideoView > div.fvControlView div.fvQualityButton .fvQualityLabel {
  -webkit-filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55)) !important;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55)) !important;
}

/* バー表示 */
body.fms-overlay-active.fms-bar-open div.fvVideoView > div.fvControlView {
  transform: translateY(0) !important;
}

/* [2026-07-29 撤去] ここに旧オーバレイUI専用の
   単一ピル [● 見たい馬 ∧](.fms-pill 一式)・初回コーチマーク(.fms-coach 一式)・
   その bob アニメ(@keyframes fms-pillbob / fms-coachbob)があったが、
   付与元の js/fms-landscape-overlay.js ごと撤去したため削除した。
   新UIのピルは .fmsLsBarPill(css/fms-landscape-webgl.css)で別実装。 */

/* prefers-reduced-motion: バーのスライドを全廃し瞬時に表示/格納 */
@media (prefers-reduced-motion: reduce) {
  body.fms-overlay-active div.fvVideoView > div.fvControlView {
    transition: none !important;
  }
}