/* ==========================================================================
   FMS スマホ横向きUI (統合ドロワー + WebGL格子切り出し)
   スマホ横向き専用(PC・縦向き・iPad は対象外)。
   有効化時 body.fmsLandscapeActive が付く(付与元: js/fms-landscape-webgl.js)。

   バーのオーバレイ表示は body.fms-overlay-active / fms-bar-open を再利用しており、
   その規則群は css/fms-landscape-overlay.css 側にある(複製しない)。
   このファイルには本UI固有の差分(ドロワー・チップ・プレーヤー左寄せ等)のみ置く。

   状態フック(付与元 applyState):
     body.fmsLsTheater          … シアターON
     body.fmsLsDrawerOpen       … ドロワー表示(展開)
     body.fmsLsDrawerCollapsed  … ドロワー表示(畳み中)
     (どちらも無い=2bx: ドロワーなし=現行の格子UI)

   指示書: docs/sp_yoko_webgl/project/SP-yoko-instruction.md
   実装計画: docs/sp_yoko_webgl/SP-yoko-implementation-plan.md
   ========================================================================== */

/* =========================================================================
   非アクティブ時の既定(安全側。2026-07-14 実機不具合対応)
   ドロワー等の本UI所有DOMは退出後も温存する(再enterで再利用)ため、
   body.fmsLandscapeActive が外れると下のスコープ付き規則が全て失効し、
   「素の display でページフローに流れ込む」(縦UIに横ドロワーの残骸が出て
   縦カルーセルの実測レイアウトも壊す)。無スコープの既定 display:none を敷き、
   表示は必ずスコープ付き規則(より高い特異度)に委ねる。
   ========================================================================= */
.fmsLsDrawer,
.fmsLsReopen,
.fmsLsBarPill,
.fmsLsMain {
  display: none;
}

/* =========================================================================
   プレーヤー左寄せ/塊中央配置(追加仕様。Phase 1-3)
   意図: ドロワーに隠れる映像を最小化(黒帯を先に消費してから映像に被せる)。
   移動は .fvVideoView への transform(バー/クリックポイント/WebGL canvas が追従)。
   #fvPlayer は transform しない(配下 fixed のドロワー基準を壊さないため)。
   CSS変数の付与元は recalcPlayerShift (js/fms-landscape-webgl.js)。
   ========================================================================= */
/* クリップ回避(2026-07-14 実機不具合対応): #fvPlayer(fvPlayerWrapper)は映像サイズで
   中央配置+overflow:hidden のため、.fvVideoView を transform で左へ動かすと
   親の箱からはみ出た映像左端が欠ける。本UI中のみはみ出しを許可する
   (ドロワー/再展開タブは position:fixed、シアターcanvas/バーは .fvVideoView 内で影響なし) */
body.fmsLandscapeActive #fvPlayer {
  overflow: visible;
}
body.fmsLandscapeActive div.fvVideoView {
  transform: translateX(var(--fmsLsShiftX, 0px));
  transition: transform 0.24s cubic-bezier(0.32, 0.72, 0, 1);
}
@media (prefers-reduced-motion: reduce) {
  body.fmsLandscapeActive div.fvVideoView {
    transition: none;
  }
}

/* 変形1: バー幅=ドロワーに被られていないプレーヤー部分(SE2: 667-220=447 の一般化)。
   旧CSS(fms-landscape-overlay.css)の width:100% !important をセレクタ特異度で上書き。
   left+width 指定時に right は無視されるが明示で auto にしておく */
body.fmsLandscapeActive.fmsLsDrawerOpen div.fvVideoView > div.fvControlView {
  width: var(--fmsLsBarW, 100%) !important;
  right: auto !important;
}
/* 幅の変化もスライド(transform)と同じイージングで(閉じ側にも効くよう常時スコープ) */
body.fmsLandscapeActive div.fvVideoView > div.fvControlView {
  transition: transform 0.24s cubic-bezier(0.32, 0.72, 0, 1), width 0.24s cubic-bezier(0.32, 0.72, 0, 1) !important;
}

/* =========================================================================
   分離配置モード(drawer_side=1。2026-07-14 ユーザー決定)
   ドロワー展開中、映像に重ねる(既定=0)のではなく、プレーヤーをドロワーを
   除いた残り領域へ縮小再配置する:
     映像幅=残り領域の100% / 上下中央(余白は黒帯) / バー=残り領域の幅100%
   実装: レイアウトは fvLivePlayer のまま、.fvVideoView への translate+scale
   (transform-origin 0 0=recalcPlayerShift の rawLeft/rawTop 算出前提)で
   視覚配置のみ変える(非破壊)。バー/リビール用ピルは .fvVideoView ごと
   縮んでしまうため 1/k(--fmsLsBarInv)の counter-scale で実寸を維持する。
   バーの layout 幅は --fmsLsBarW=残り領域幅 → ×k×(1/k) で実寸そのまま。
   バー格納(translateY 118%)/表示(0)は旧overlay CSS の !important 規則を
   詳細度で上書きしつつ scale を合成する。付与元は recalcPlayerShift
   (--fmsLsShiftY / --fmsLsFitScale / --fmsLsBarInv。body.fmsLsFit は applyState)。
   ========================================================================= */
body.fmsLandscapeActive.fmsLsFit div.fvVideoView {
  transform: translate(var(--fmsLsShiftX, 0px), var(--fmsLsShiftY, 0px)) scale(var(--fmsLsFitScale, 1));
  transform-origin: 0 0;
}
/* 黒帯・背景: ビューポート全面を黒の下敷きで埋める(2026-07-15 実機FB対応)。
   当初は #fvPlayer の background にしていたが、実機で URLバー表示中は
   #fvPlayer(映像サイズの箱)がビューポートより小さく、縮小配置した映像・バーが
   箱の外へ出た部分にページの白背景が見えた(バー左の白帯・左上の白角)。
   ::before は #fvPlayer の最初の子=映像(.fvVideoView は transform で
   positioned 扱い)より背面、静的なページ内容より前面に描画される。
   #fvPlayer 自身は transform しない設計(このファイル冒頭)のため
   position:fixed はビューポート基準で効く。 */
body.fmsLandscapeActive.fmsLsFit #fvPlayer {
  background: #000;
}
body.fmsLandscapeActive.fmsLsFit #fvPlayer::before {
  content: '';
  position: fixed;
  inset: 0;
  background: #000;
}
/* ── 修正案B(2026-07-20): iPhoneはプレーヤー領域をviewport固定にする ──
   根拠: docs/sp_yoko_fullscreen/FMS_Safari_transition_investigation_report_260720.md §6/§11。
   プレーヤーが通常フローのままだと、上スワイプのページスクロールとラバーバンドが
   そのまま映像の上下動になる(実測: 上に最大260px走り、下スワイプで上端が画面下1/3まで
   落ちる)。ニコニコ動画は映像祖先が position:fixed で、同一操作でも映像変動±16px
   (SE2実測)。同じ構造に合わせ、ページスクロールから映像を完全に切り離す。
   - fixed の高さはSafariがバー開閉アニメと同時にネイティブ補間するため、
     viewport拡大への追従はJS不要で連続的になる。
   - .video(既存の flex 中央寄せ箱)を height:100% にして上下中央を維持する。
   - #fvPlayer/.video-player-area には transform を置かない(置くと配下の
     fixed 要素=ドロワー/再展開タブ/黒下敷き ::before の基準が壊れる)。
   - ページ側のスクロール余地(.ios-landscape #container の min-height:100vh)は
     バー収納のトリガとして従来どおり残す(スクロールは背後で空走する)。
   - iPhone限定(body.is-ios)。Android/PC/縦向きは従来フロー配置のまま。 */
body.is-ios.fmsLandscapeActive .video-player-area {
  position: fixed;
  inset: 0;
}
body.is-ios.fmsLandscapeActive .video-player-area > .video {
  height: 100%;
}
/* ── Chrome対応(2026-07-21): iOS Chrome にも root 実スクロール余地を与える ──
   根拠: docs/sp_yoko_fullscreen/FMS_Chrome_transition_investigation_report_260721.md。
   iOS Chrome 横向きは is-ios+fmsLandscapeActive が付き上の .video-player-area が fixed 化
   (通常フローから外れ #container の高さ寄与ゼロ)される一方、スクロール余地の供給源
   .ios-landscape #container{min-height:100vh}(style.css:696)は ios-landscape が
   Safari限定(isSafari16Plus が CriOS を弾く)で Chrome には付かない → 実機HUDで ROOM=0。
   結果、上スワイプがラバーバンドのみになり Chrome ネイティブのツールバー折りたたみ
   (root実スクロールが前提)が不発。ここで #container に実スクロール余地を与え、nico と
   同じく「fixedプレーヤー+背後に実スクロール可能ページ」構造にして折りたたみを駆動する。
   プレーヤーは fixed(inset:0)なので root がスクロールしても映像は視覚的に動かない。
   スコープ: is-ios+fmsLandscapeActive かつ ios-landscape 非適用(=Chrome等の非Safari)に限定。
   Safari(.ios-landscape あり)は :not で除外し、2026-07-20で合格済みの既存挙動を一切変えない。
   余地量(2026-07-21 改訂): 当初 +200px(≈ROOM236)にしたが、余地が小さいと有限スクロールの
   「底」にバー表示中に到達したとき上スワイプで畳めず張り付く/戻す途中の畳みにChromeツールバーが
   追従しない不具合が出た(SE2 Chrome実機FB)。ニコニコ同様「余地を十分大きく取り、バー開閉を
   絶対位置でなくスクロール方向で決めさせる」構造にするため +2000px へ拡大。iOSの慣性フリック
   1回の移動量を超える大きさにして、畳みスワイプが底に達しない=境界張り付きを構造的に無くす。
   この余地はすべて fixedプレーヤー(inset:0)の背後=不可視・空(中身なし=描画/メモリ負荷なし)。
   Chromeはバーを「上方向スクロールで再表示」するため、どの位置からでも下スワイプで戻せる。 */
body.is-ios.fmsLandscapeActive:not(.ios-landscape) #container {
  min-height: calc(100vh + 2000px) !important;
}
/* バーの counter-scale(格納側)。origin は左下=バー下端・左端を基準に実寸へ戻す。
   格納の滑り量は 118%×(1/k): counter-scale でバーの実効高さが 1/k 倍になるため、
   レイアウト高さ基準の 118% のままでは押し出しきれず、バー最上部のシークバー帯が
   .fvVideoView 下端のクリップ内に残って映像下端に見切れる(2026-07-15 SE2実機FB。
   URLバー非表示時 k≒0.75 で顕在化。表示時 k≒0.93 はぎりぎり隠れていた)。 */
body.fmsLandscapeActive.fmsLsFit div.fvVideoView > div.fvControlView {
  transform: translateY(calc(118% * var(--fmsLsBarInv, 1))) scale(var(--fmsLsBarInv, 1)) !important;
  transform-origin: left bottom;
}
/* バーの counter-scale(表示側)。旧overlay の (0,4,3) を (0,5,3) で上書き */
body.fmsLandscapeActive.fmsLsFit.fms-bar-open div.fvVideoView > div.fvControlView {
  transform: translateY(0) scale(var(--fmsLsBarInv, 1)) !important;
}
/* リビール用ピルも実寸維持(中央基準。数px の中心ズレは許容) */
body.fmsLandscapeActive.fmsLsFit .fmsLsBarPill {
  transform: translateX(-50%) scale(var(--fmsLsBarInv, 1));
  transform-origin: center bottom;
}

/* =========================================================================
   ドロワー本体(§3。Phase 1-2)
   位置は画面右端固定+translateX(Phase 1-3 の塊中央配置オフセット)。
   ========================================================================= */
body.fmsLandscapeActive .fmsLsDrawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(33vw, 240px);
  display: none; /* 表示は body.fmsLsDrawerOpen / Collapsed で制御 */
  flex-direction: column;
  box-sizing: border-box;
  /* 完全不透過(2026-07-14 実機FB): 0.96 だと背後の映像の明暗で色ムラが出る+
     出走表などが透ける。モックの rgba(13,14,15,0.96) から変更 */
  background: #0d0e0f;
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.4);
  color: #fff;
  z-index: 1305; /* バー(1300)より前面。変形1ではバーを左詰めして重なりを避ける(1-3) */
  transform: translateX(100%); /* 既定=画面外(スライドの初期位置) */
  transition: transform 0.24s cubic-bezier(0.32, 0.72, 0, 1);
  -webkit-tap-highlight-color: transparent;
}
/* 展開・畳みのどちらも DOM は表示(スライドで出し入れ) */
body.fmsLandscapeActive.fmsLsDrawerOpen .fmsLsDrawer,
body.fmsLandscapeActive.fmsLsDrawerCollapsed .fmsLsDrawer {
  display: flex;
}
/* 展開=画面内へスライドイン。--fmsLsDrawerX は塊中央配置時の左オフセット
   (右端基準の負px。付与元 recalcPlayerShift。既定 0=右端) */
body.fmsLandscapeActive.fmsLsDrawerOpen .fmsLsDrawer {
  transform: translateX(var(--fmsLsDrawerX, 0px));
}
/* 畳み=画面外へスライドアウト(translateX(100%) 既定のまま。再展開タブを出す) */

@media (prefers-reduced-motion: reduce) {
  body.fmsLandscapeActive .fmsLsDrawer {
    transition: none;
  }
}

/* ドロワー上端の安全余白(2026-07-16 案B)。iOS Safari の URLバー格納中は画面上端
   約25px が「タップでURLバー再表示」ゾーンのため、格納中のみ(body.fmsLsTopInset、
   付与元 updateTopInset)タブ列を28px下げて誤タッチによるURLバー復活を避ける。
   余白部分はドロワー背景のみ(非インタラクティブ)。URLバー表示中は余白なし。 */
body.fmsLandscapeActive.fmsLsTopInset .fmsLsDrawer {
  padding-top: 28px;
}

/* iOSのダブルタップズーム抑止(2026-07-15 実機FB。縦UI §0.8 と同じ非破壊手法)。
   viewport meta が width=device-width のみのため iOS はダブルタップズームが有効で、
   ドロワーの見たい馬の馬番ボタン等(小さいタップ要素)の連打で画面が30〜100%拡大した
   (Android Chrome は mobile-optimized ページでダブルタップズーム自体を無効化する
   ため発生しない)。touch-action: manipulation はダブルタップズームだけを無効化し、
   パン(チャット/カメラリスト/馬番グリッドのスクロール・ドロワーの右スワイプ畳み)と
   ピンチズーム(アクセシビリティ)は従来どおり。
   ドロワーは position:fixed で .fvVideoView の外のため個別指定が必要。
   .fvVideoView は縦UIと同じ包括指定(バーのチップ・ピル・タップシーク領域を保護)。 */
body.fmsLandscapeActive .fvVideoView,
body.fmsLandscapeActive .fmsLsDrawer,
body.fmsLandscapeActive .fmsLsReopen {
  touch-action: manipulation;
}

/* =========================================================================
   引き出しハンドル3種の共通デザイン(2026-07-14 デザイン統一)
   グラバー(»畳む)・再展開タブ(«開く)・バーピル(^バー表示)は、位置と向き
   以外の見た目(厚み22px・長さ52px・角丸・背景・色・影・アイコン)を統一する。
   アイコンは同一のシェブロンSVG(.fmsLsHandleChevron)で、要素ごとに rotate。
   ========================================================================= */
body.fmsLandscapeActive .fmsLsGrabber,
body.fmsLandscapeActive .fmsLsReopen,
body.fmsLandscapeActive .fmsLsBarPill {
  padding: 0;
  border: none;
  background: rgba(13, 14, 15, 0.85);
  color: #d9d8d0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* 共通シェブロン(基準=上向き ^)。向きは要素側で回転 */
body.fmsLandscapeActive .fmsLsHandleChevron {
  display: block;
  width: 14px;
  height: 9px;
}
body.fmsLandscapeActive .fmsLsGrabber .fmsLsHandleChevron {
  transform: rotate(90deg); /* 右向き > =「押して畳む」 */
}
body.fmsLandscapeActive .fmsLsReopen .fmsLsHandleChevron {
  transform: rotate(-90deg); /* 左向き < =「引いて開く」 */
}

/* --- グラバー(展開中: ドロワー左端の縦つまみ。タップで畳む) ----------------- */
body.fmsLandscapeActive .fmsLsGrabber {
  position: absolute;
  left: -22px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 52px;
  border-radius: 11px 0 0 11px; /* 露出する左端を丸く(右はドロワーに密着) */
  display: flex;
}
/* 当たり判定を視覚(22×52)より広く取る(≈44px 相当) */
body.fmsLandscapeActive .fmsLsGrabber::before {
  content: '';
  position: absolute;
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -12px;
}

/* --- 再展開タブ(畳み中: 画面右端の縦タブ。タップで開く) -------------------- */
body.fmsLandscapeActive .fmsLsReopen {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 52px;
  border-radius: 11px 0 0 11px; /* 露出する左端を丸く(右は画面端に密着) */
  display: none;
  z-index: 1305;
}
body.fmsLandscapeActive.fmsLsDrawerCollapsed .fmsLsReopen {
  display: flex;
}
body.fmsLandscapeActive .fmsLsReopen::before {
  content: '';
  position: absolute;
  top: -8px;
  right: 0;
  bottom: -8px;
  left: -12px;
}

/* --- タブバー(高さ32px。アクティブ下線 2px #5DCAA5) ----------------------- */
body.fmsLandscapeActive .fmsLsTabbar {
  display: flex;
  height: 32px;
  flex: none;
  border-bottom: 1px solid #2b2c2e;
}
body.fmsLandscapeActive .fmsLsTab {
  display: none; /* isShown のタブのみ表示 */
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  color: #8a8b86;
  font-family: inherit;
  font-size: 14px; /* アイコンタブ(2026-07-14。fa アイコンは font-size でサイズが決まる) */
  font-weight: 700;
  cursor: pointer;
}
body.fmsLandscapeActive .fmsLsTab.isShown {
  display: flex;
}
body.fmsLandscapeActive .fmsLsTab.isActive {
  color: #fff;
  box-shadow: inset 0 -2px 0 #5dcaa5;
}
/* 単一タブ時は現在地表示(タップ不要)。カーソルを既定に */
body.fmsLandscapeActive .fmsLsDrawer.fmsLsSingleTab .fmsLsTab.isShown {
  cursor: default;
}

/* --- パネル領域(activeTab のパネルのみ表示) ------------------------------- */
/* min-width:0 が肝(2026-07-14 実機FB): flexアイテムの既定 min-width:auto のままだと、
   チャットDOM(コメント行)の最小コンテンツ幅がパネルをドロワー幅(240px)以上に押し広げ、
   同居する見たい馬グリッドまで拡大されて右へはみ出す。overflow:hidden は保険 */
body.fmsLandscapeActive .fmsLsPanelArea {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
}
body.fmsLandscapeActive .fmsLsPanel {
  display: none;
  flex: 1;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  flex-direction: column;
}
body.fmsLandscapeActive .fmsLsPanel.isActive {
  display: flex;
}

/* --- セクション(見たい馬 / チャット。ヘッダ+✕+本文) ---------------------- */
body.fmsLandscapeActive .fmsLsSection {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
/* 非分割: パネル内の単一セクションが全高 */
body.fmsLandscapeActive .fmsLsPanel > .fmsLsSection {
  flex: 1;
}
/* 分割(1ao/2ao): 見たい馬パネル内の2セクションを 50:50 固定(§3.1) */
body.fmsLandscapeActive .fmsLsPanel[data-panel='mitaiuma'] > .fmsLsSection {
  flex: 1 1 0;
  min-height: 0;
}
/* 分割時の境界線(上=見たい馬 / 下=チャット) */
body.fmsLandscapeActive .fmsLsSectionMitaiuma + .fmsLsSectionChat {
  border-top: 1px solid #2b2c2e;
}
body.fmsLandscapeActive .fmsLsSectionHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  padding: 6px 10px;
}
body.fmsLandscapeActive .fmsLsSectionTitle {
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}
body.fmsLandscapeActive .fmsLsSectionClose {
  position: relative;
  padding: 2px 4px;
  background: none;
  border: none;
  color: #8a8b86;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
body.fmsLandscapeActive .fmsLsSectionClose::before {
  content: '';
  position: absolute;
  inset: -10px;
}
body.fmsLandscapeActive .fmsLsSectionBody {
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 10px 8px;
  -webkit-overflow-scrolling: touch;
}

/* =========================================================================
   見たい馬(PaddockSeeker Pattern L)のドロワー内表示(§3。Phase 3)
   本文は paddock-seeker.js renderPatternL() が .fmsLsSeekerHost へ描く。
   ベース意匠(緑系ダーク)は paddock-seeker.css を流用し、ここでは
   ドロワー幅 min(33vw,240px) 向けのコンパクト化だけ上書きする。
   ========================================================================= */
/* 空表示 = mitaiuma ONだが描画なし(DVR解除中・データ未取得等) */
body.fmsLandscapeActive .fmsLsSeekerHost:empty::before {
  content: '巻戻し(DVR)中に利用できます';
  display: block;
  padding: 12px 4px;
  color: #6b6c66;
  font-size: 10px;
}
body.fmsLandscapeActive .fmsLsSeekerHost .ps-ls {
  padding-top: 2px;
}
/* かんたん/くわしくチップ(モック: 9-10px の小型ピル) */
body.fmsLandscapeActive .fmsLsSeekerHost .paddock-seeker__mode-tabs {
  gap: 6px;
  margin-bottom: 7px;
}
body.fmsLandscapeActive .fmsLsSeekerHost .paddock-seeker__mode-tab {
  min-height: 24px;
  padding: 2px 8px;
  font-size: 10px;
}
/* 馬番グリッド4列・チップ32px(旧26pxは上下2分割(§3.1)の156px高前提のコンパクト化。
   2026-07-14 の分割廃止で見たい馬タブは常に全高になったため、変形1/2とも32pxに統一) */
body.fmsLandscapeActive .fmsLsSeekerHost .paddock-seeker__grid {
  gap: 6px;
}
body.fmsLandscapeActive .fmsLsSeekerHost .paddock-seeker__horse-button {
  min-height: 32px;
  padding: 4px 6px;
  font-size: 12px;
}
body.fmsLandscapeActive .fmsLsSeekerHost .paddock-seeker__horse-button::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 999px;
}
/* くわしく: 戻る行(‹戻る + 馬番チップ) */
body.fmsLandscapeActive .fmsLsSeekerHost .ps-ls__subhead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}
body.fmsLandscapeActive .fmsLsSeekerHost .paddock-seeker__back {
  font-size: 11px;
  padding: 2px 6px;
}
body.fmsLandscapeActive .fmsLsSeekerHost .paddock-seeker__horse-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--fms-color-surface, #26432d);
  border: 1.5px solid var(--fms-green-600, #3e8a55);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
/* シーン一覧をコンパクトに */
body.fmsLandscapeActive .fmsLsSeekerHost .paddock-seeker__appearances {
  gap: 6px;
}
body.fmsLandscapeActive .fmsLsSeekerHost .paddock-seeker__appearance-button {
  min-height: 38px;
  padding: 8px 10px;
  font-size: 11px;
  gap: 8px;
}
/* 「xx分前」は paddock-seeker.css で 15px を明示指定しているため、上のボタン側
   font-size:11px を継承しない。ドロワー内では単独で大きく浮くので明示的に縮める。
   12px = 馬番ボタン(456行)と同格。周囲は 戻る/馬番チップ/カメラ名=11px で、
   font-weight:700(継承)との組み合わせで一覧内の主情報として十分に立つ。 */
body.fmsLandscapeActive .fmsLsSeekerHost .paddock-seeker__appearance-time {
  font-size: 12px;
}
body.fmsLandscapeActive .fmsLsSeekerHost .paddock-seeker__status {
  margin-top: 6px;
  font-size: 10px;
}
body.fmsLandscapeActive .fmsLsSeekerHost .paddock-seeker__empty {
  padding: 8px 2px;
  color: #8a8b86;
  font-size: 10px;
}

/* =========================================================================
   シアターメイン映像(§2.2)
   2026-07-14: WebGL転写(.fmsLsMain)を廃止し、ネイティブの1画面表示
   (video 4/3拡大+.fvVideoView の overflow:hidden クリップ。fms-landscape-webgl.js
   syncNativeTheater)へ移行。canvas は生成されないため規則は不要
   (冒頭の無スコープ .fmsLsMain{display:none} だけ保険で残す)。
   ========================================================================= */

/* =========================================================================
   センター再生操作 −10/⏯/+10(2026-07-19 ユーザー指示)
   巻戻しON/録画時のみ(JSが hidden を制御)、バー表示(body.fms-bar-open)に連動して
   メイン映像中央に白の3ボタンを重ねる。位置: シアター=映像全面の中央 /
   非シアター=メイン格子(左上75%×75%)の中央(37.5%)。
   z-index はネイティブのプレイスクリーン(.fvPlayScreenView=1500!important。⏯一時停止中に
   全面へ出るクリック層)より前=1550(一時停止中も −10/⏯/+10 を操作可能にする)。
   ボタン表示中(body.fmsLsSkipOn)は同プレイスクリーンの緑▶画像を隠す(⏯との二重表示
   回避。クリックでの再開層としては生かす)。表示前(スプラッシュ/チュートリアル=再生前)は
   JSが hidden にするため 1500 層と競合しない。
   クラスタ自体は pointer-events:none(ボタン間の隙間タップはバートグルへ素通し)。
   ========================================================================= */
body.fmsLandscapeActive .fmsLsSkipCluster {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1550;
  display: none;
  align-items: center;
  /* センター −10/⏯/+10 はシアターON/OFF共通(2026-07-22 デフォルト化):
     プレーヤー領域全体の上下左右中央(left/top 50%)+間隔 clamp(20px,6vw,64px)。
     旧仕様は 非シアター=左上75%メイン中央(37.5%)/シアターON=全面中央・間隔広め(110px)で
     別々だったが、狭めの共通間隔+全面中央へ統一(右のサブ列と +10 が近づき過ぎない値を維持)。 */
  gap: clamp(20px, 6vw, 64px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
body.fmsLandscapeActive.fms-bar-open .fmsLsSkipCluster:not([hidden]) {
  display: flex;
}
/* ±10ボタンのラッパ。連打累積オーバレイ(.fmsLsTapSeek)の位置基準(隣に絶対配置) */
body.fmsLandscapeActive .fmsLsSkipSlot {
  position: relative;
  display: inline-flex;
  pointer-events: none;
}
body.fmsLandscapeActive .fmsLsSkipBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.55));
}
body.fmsLandscapeActive .fmsLsSkipBtn:active {
  transform: scale(0.92);
  opacity: 0.85;
}
body.fmsLandscapeActive .fmsLsSkipBtn svg {
  display: block;
  width: 38px;
  height: 38px;
}
body.fmsLandscapeActive .fmsLsSkipPlay {
  position: relative;
  font-size: 30px;
}
/* ⏯は当たり判定を広めに(見た目は不変。2026-07-19 ユーザー指示)。
   拡大14pxは非シアターの最小gap(20px)未満=±10ボタン本体には被らない */
body.fmsLandscapeActive .fmsLsSkipPlay::before {
  content: '';
  position: absolute;
  top: -14px;
  right: -14px;
  bottom: -14px;
  left: -14px;
}
body.fmsLandscapeActive .fmsLsSkipPlay .fa {
  line-height: 1;
}

/* =========================================================================
   ±10 連打の累積オーバレイ(§2.2。Phase 2-B → 2026-07-19 ボタン隣へ移設)
   共通ファクトリ fms-tap-seek.js が prefix 'fmsLs' で生成。縦UIの見た目に準拠。
   取付先はセンターボタンの隣スロット(.fmsLsSkipSlot):
   -10 の左に「< -20」/ +10 の右に「+20 >」。2打目以降のみJSが表示する。
   ========================================================================= */
body.fmsLandscapeActive .fmsLsTapSeek {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 4px;
  transform: translateY(-50%);
  color: #fff;
  /* ボタン外側へ伸びるため控えめに(メイン領域内に収める。2026-07-19 ユーザーFB) */
  font-size: clamp(15px, 2.2vw, 19px);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  opacity: 0;
  transition: opacity 90ms ease-out;
}
body.fmsLandscapeActive .fmsLsTapSeek[hidden] {
  display: none;
}
body.fmsLandscapeActive .fmsLsTapSeek.isShown {
  opacity: 1;
}
body.fmsLandscapeActive .fmsLsTapSeek.isFading {
  opacity: 0;
  transition: opacity 120ms ease-out;
}
body.fmsLandscapeActive .fmsLsTapSeek.isForward {
  left: 100%;
}
body.fmsLandscapeActive .fmsLsTapSeek.isBackward {
  right: 100%;
}
body.fmsLandscapeActive .fmsLsTapSeekValue {
  display: inline-block;
  min-width: 3ch; /* -20〜-90 の通常域を基準(±100超は自然に広がる) */
}
body.fmsLandscapeActive .fmsLsTapSeek.isForward .fmsLsTapSeekValue {
  text-align: right;
}
body.fmsLandscapeActive .fmsLsTapSeek.isBackward .fmsLsTapSeekValue {
  text-align: left;
}
body.fmsLandscapeActive .fmsLsTapSeekArrow {
  display: inline-block;
  min-width: 1.2ch;
  text-align: center;
  opacity: 0.7;
  will-change: transform, opacity;
}

/* =========================================================================
   カメラタブ 縦カルーセル(§2.2。Phase 2-A)
   縦スクロールのカメラリスト。各タイルは透過で、背面のサブcanvasが映像を描く。
   canvas はリスト content(scrollHeight)全面でスクロール追従(座標はスクロール非依存)。
   ========================================================================= */
body.fmsLandscapeActive .fmsLsCameraList {
  position: relative;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 10px;
  box-sizing: border-box;
}
body.fmsLandscapeActive .fmsLsCamCanvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
}
body.fmsLandscapeActive .fmsLsCamCanvas.isReady {
  opacity: 1;
}
body.fmsLandscapeActive .fmsLsCamCard {
  position: relative;
  z-index: 1; /* タイル枠・キャプションを canvas より前面に */
  margin-bottom: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body.fmsLandscapeActive .fmsLsCamCard:last-child {
  margin-bottom: 0;
}
/* タイルは透過(映像は背面 canvas)。サブセル=480×270=16:9 */
body.fmsLandscapeActive .fmsLsCamTile {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: transparent;
}
body.fmsLandscapeActive .fmsLsCamName {
  padding-top: 2px;
  color: #c9c8c0;
  font-size: 10px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 選択中(メイン表示カメラ): 緑枠 + キャプション頭に緑ドット(映像を隠さない) */
body.fmsLandscapeActive .fmsLsCamSelected .fmsLsCamTile {
  box-shadow: inset 0 0 0 2px #5dcaa5;
}
body.fmsLandscapeActive .fmsLsCamSelected .fmsLsCamName {
  color: #5dcaa5;
  font-weight: 700;
}
body.fmsLandscapeActive .fmsLsCamSelected .fmsLsCamName::before {
  content: '● ';
  color: #5dcaa5;
}
/* 切替中: 枠パルス(控えめなローディング表現) */
body.fmsLandscapeActive .fmsLsCamSwitching .fmsLsCamTile {
  animation: fmsLsCamPulse 0.9s ease-in-out infinite;
}
@keyframes fmsLsCamPulse {
  0%, 100% { box-shadow: inset 0 0 0 2px rgba(93, 202, 165, 0.35); }
  50% { box-shadow: inset 0 0 0 2px rgba(93, 202, 165, 1); }
}
@media (prefers-reduced-motion: reduce) {
  body.fmsLandscapeActive .fmsLsCamSwitching .fmsLsCamTile {
    animation: none;
    box-shadow: inset 0 0 0 2px rgba(93, 202, 165, 0.7);
  }
}

/* =========================================================================
   バー内チップ(§5。Phase 1-4)
   ネイティブバー(flex)へ追記される [見たい馬][チャット][□シアター]。
   見た目は既存チップ([●ライブ]/[巻戻し])と同トーン、ON中は緑寄り(#5DCAA5)。
   ========================================================================= */
body.fmsLandscapeActive .fmsLsChip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  /* 縦位置はネイティブキャプション([●ライブ]/[巻戻し]=margin-top:8px の上端基準)に
     合わせて上端基準で揃える(2026-07-19 バグ(3)修正)。旧 align-self:center は
     フレックス行高(バー内の可視ボタン構成で変わる。iPhoneはPCと異なりうる)依存で、
     行高40pxのときだけ偶然中央が一致していた。チップ高26 vs キャプション高24 の
     中央を合わせる margin-top は 8-(26-24)/2=7px。 */
  align-self: flex-start;
  height: 26px;
  margin: 7px 4px 0;
  padding: 0 11px;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  color: #fff;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
/* 当たり判定44px相当(視覚は26px) */
body.fmsLandscapeActive .fmsLsChip::before {
  content: '';
  position: absolute;
  left: -4px;
  right: -4px;
  top: -9px;
  bottom: -9px;
}
body.fmsLandscapeActive .fmsLsChip.isOn {
  color: #5dcaa5;
  border-color: #5dcaa5;
}

/* □シアター/⚙設定(アイコンボタン。既存アイコン群と同じ32px敷き物トーン) */
body.fmsLandscapeActive .fmsLsIconBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 縦位置は「行の上端からの固定オフセット」で決める(2026-07-28 発注者報告の修正)。
     旧 align-self:center はフレックス行高に依存し、行高が 40px のときだけ他ボタンと
     中央が一致していた。行高はシークバーの有無で変わり(PC実測: 非表示42px / 表示40px)、
     さらにブラウザ差もあるため、iPhone でシークバーを出すとギアだけが単独でズレていた
     (Android=行高40pxのままで顕在化せず)。これはチップ(.fmsLsChip)が 2026-07-19 に
     同じ理由で align-self:center をやめたのと全く同根で、ギアだけ直し漏れていたもの。
     バー内の他要素はすべて行上端から中心20px の位置に揃っている:
       ●ライブ/巻戻し(h24+mt8) / 見たい馬・チャット・□(h26+mt7) / ±30・±10・全画面(h40)。
     本ボタンは h32 なので mt=20-16=4px。 */
  align-self: flex-start;
  width: 32px;
  height: 32px;
  margin: 4px 6px 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
body.fmsLandscapeActive .fmsLsIconBtn::before {
  content: '';
  position: absolute;
  inset: -6px;
}
/* アイコンは「押した先の状態」: OFF=単一長方形(1画面へ) / ON=2x2(格子へ戻す) */
body.fmsLandscapeActive .fmsLsTheaterIcon {
  display: block;
  width: 14px;
  height: 11px;
  position: relative;
}
body.fmsLandscapeActive .fmsLsTheaterSingle {
  position: absolute;
  inset: 0;
  border: 2px solid #fff;
  border-radius: 2px;
  display: block;
}
body.fmsLandscapeActive .fmsLsTheaterGrid {
  position: absolute;
  inset: 0;
  display: none;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
}
body.fmsLandscapeActive .fmsLsTheaterGrid i {
  display: block;
  background: #fff;
  border-radius: 1px;
}
body.fmsLandscapeActive .fmsLsTheaterBtn.isOn .fmsLsTheaterSingle,
body.fmsLandscapeActive .fmsLsCornerTheater.isOn .fmsLsTheaterSingle {
  display: none;
}
body.fmsLandscapeActive .fmsLsTheaterBtn.isOn .fmsLsTheaterGrid,
body.fmsLandscapeActive .fmsLsCornerTheater.isOn .fmsLsTheaterGrid {
  display: grid;
}
/* バー内の□(表示切替)は非表示(2026-07-19 ユーザー指示):
   メイン映像右上の常時表示ボタン(.fmsLsCornerTheater)に一本化する。
   DOM・結線・状態同期(syncBarChips)は温存=復活はこの規則を消すだけ。 */
body.fmsLandscapeActive .fmsLsTheaterBtn {
  display: none !important;
}

/* =========================================================================
   シークバー表示時のバー内訳の是正(2026-07-28 発注者報告)
   -------------------------------------------------------------------------
   バーの高さは 47px 固定(fvLivePlayer/css/control.css の height/max-height !important)。
   その内訳が、シークバー表示中は
       padding-top 5px + シークバー 4px + ボタン行 40px = 49px
   となり、47px の枠を 2px はみ出していた(PC実測でも .fvControlLeftView の bottom が
   .fvControlView の bottom を 2px 超える)。バーは画面下端に接しているため、
   はみ出したぶんだけボタンと画面下端の余白が食われる(敷き物32pxの下端で実測2px)。
   ここで padding-top だけを 2px 詰めて 47px にちょうど収め、下端に余白を作る。
   [シークバーとの間隔は不変] 詰めるのはバー上端〜シークバーの間だけで、
   シークバー下端とボタン敷き物の間隔(4px)は変わらない。
   [フック] body.fmsLsSkipOn = active かつ canSeekNow()(録画/DVR)。シークバーが出る
   条件と一致する(付与元: syncSkipCluster)。ライブ(シークバー非表示)では 5px のまま。

   [align-content が要る理由(iPhone実機で判明。2026-07-28)]
   padding-top を詰めただけでは iPhone で余白が広がらなかった。バーは flex-wrap:wrap で、
   既定の align-content:stretch は行に余りを配ってしまう。iPhone は PC と可視ボタン構成が
   違い(全画面ボタンが非表示=行内の最大要素がギアの36px)、余りの2pxが**1行目
   (シークバーの行)へ入って2行目を押し下げ**ていた(実機実測: シークバー bottom=335 に対し
   ボタン行 top=337)。flex-start にして行を上へ詰めると、詰めたぶんがそのまま下端の余白に
   なる。全要素が行上端からの margin-top で位置決めされている(§.fmsLsIconBtn 参照)ため、
   行の高さが変わってもボタンの見た目の位置関係は動かない。
   ========================================================================= */
body.fmsLandscapeActive.fmsLsSkipOn div.fvVideoView > div.fvControlView {
  padding-top: 3px !important;
  align-content: flex-start !important;
}

/* ==========================================================================
   メイン映像右上の常時表示シアター切替ボタン(2026-07-17 ユーザー決定)。
   バーの□(.fmsLsTheaterBtn)と同一状態/動作で、案内チップの代わりに
   「マルチ表示へ戻す」入口を常に見せる。アイコンは .fmsLsTheaterIcon を流用。
   .fvVideoView(transformでスタッキングコンテキスト)配下に置くため、ドロワー
   (position:fixed z1305)が被る位置では自動的に背面へ回り、ドロワーが無い
   =戻し方に迷う状態では前面に見える。位置は body.fmsLsTheater で切替。
   ========================================================================== */
body.fmsLandscapeActive .fmsLsCornerTheater {
  position: absolute;
  top: 8px;
  /* 非シアター(格子): メイン=左上75%。その右上内側(右端25%＋固定8px余白)へ。
     [重要] env(safe-area-inset-*) は足さない(2026-07-17 Xr不具合対応)。本ボタンは
     映像内の座標(.fvVideoView の右25%=メイン右端)に固定しており物理的な画面端には
     接していない。セーフエリア余白を加算すると、ノッチ端末(iPhone Xr等)で横向きの
     env(safe-area-inset-right)≒44px ぶんボタンが左へ押し出される(SE2/V60はノッチ無しで
     env=0 のため無影響=アスペクト比とは無相関の症状だった)。 */
  right: calc(25% + 8px);
  z-index: 1200; /* canvas(100)/シーク矢印(110)より前・スプラッシュ(1500)/ドロワー(1305)より後 */
  /* 視覚サイズはバーの□(.fmsLsIconBtn=32px)と揃える(2026-07-17 サイズ不揃い解消)。
     GPTの44pxは"タップ領域"の指標で、視覚32px＋下の::before で44px相当の当たりを確保する
     (バー側の .fmsLsIconBtn::before と同じ手法)。背景/枠/影もバーの□と同一値にして統一。 */
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
/* タップ領域は44px相当(視覚32px＋周囲6px)。バーの □ と同じ当たり拡張。 */
body.fmsLandscapeActive .fmsLsCornerTheater::before {
  content: '';
  position: absolute;
  inset: -6px;
}
/* シアター時: サブ画面が無いので映像の右上(右端)まで寄せる。
   ここも env は足さない(映像=.fvVideoView は横長端末では左右ピラーボックスで画面端に
   達しないため、セーフエリア不要。上の Xr 不具合と同根)。 */
body.fmsLandscapeActive.fmsLsTheater .fmsLsCornerTheater {
  right: 8px;
}
/* タップ時に少し濃く */
body.fmsLandscapeActive .fmsLsCornerTheater:active {
  background: rgba(0, 0, 0, 0.7);
  border-color: rgba(255, 255, 255, 0.32);
}
/* アイコンはバーの□と同一(14×11)。base .fmsLsTheaterIcon をそのまま継承(上書きしない)。 */

/* ネイティブのシアターボタンは本UIでは自前□に置換(PC向け挙動のため流用しない) */
body.fmsLandscapeActive div.fvVideoView > div.fvControlView div.fvTheaterModeButton {
  display: none !important;
}

/* ±30(long)は横UIでは常時非表示(2026-07-14 ユーザー決定。バーに入り切らないため。
   ±10とシアター時のダブルタップシークで代替) */
body.fmsLandscapeActive div.fvVideoView > div.fvControlView div.fvRwdLongButton,
body.fmsLandscapeActive div.fvVideoView > div.fvControlView div.fvFwdLongButton {
  display: none !important;
}
/* ネイティブの見たい馬トリガ(fvPaddockSeekerTrigger)は自前の見たい馬チップと重複する
   ため本UIでは非表示(2026-07-14。バー上の🔎二重表示の解消) */
body.fmsLandscapeActive div.fvVideoView > div.fvControlView .fvPaddockSeekerTrigger {
  display: none !important;
}
/* 巻戻し(DVR)OFF=LIVE のときは DVR専用機能を隠す(2026-07-15 ユーザー決定):
   [見たい馬]チップと ±10(short seek)。ネイティブは setLiveUI で ±10 を .hide()
   するが、fms-landscape-overlay.css の display:flex!important が打ち消すため
   ここで !important で上書きする(±30(long)は元から常時非表示)。
   LIVE/DVR の別は control.js が .fvControlView に付ける is-live クラスで判定
   (setPlaybackMode がトグル・初期状態も createControlView で正しく付与)。 */
body.fmsLandscapeActive div.fvVideoView > div.fvControlView.is-live div.fvRwdShortButton,
body.fmsLandscapeActive div.fvVideoView > div.fvControlView.is-live div.fvFwdShortButton,
body.fmsLandscapeActive div.fvVideoView > div.fvControlView.is-live .fmsLsChipSeeker {
  display: none !important;
}
/* 全画面ボタンは iPhone等(Android以外)では非表示(2026-07-15 ユーザー決定)。
   body.fmsLsHideFs は applyState が !offerFullscreen() のとき付与。
   Android では残す(横向き全画面の入口。従来方針)。 */
body.fmsLandscapeActive.fmsLsHideFs div.fvVideoView > div.fvControlView div.fvFullScreenButton {
  display: none !important;
}

/* ==========================================================================
   VOD(アーカイブ。body.fmsVodMode=index.php が player_mode=2 でサーバー出力)の
   バー構成(2026-07-16 発注者指示): [▶/⏸][-10][+10][現在時刻/尺] … 右群(⚙/□)。
   ネイティブ setVODUI が表示を切り替えるが、横UIの整理CSS
   (fms-landscape-overlay.css: fvPlayButton 常時非表示 等)が勝ってしまうため、
   VODページに限って上書きし直す。DOM順(play→±10→timeLabel)がそのまま要求の並び。
   ========================================================================== */
/* ▶/⏸ を復活(LIVE/DVR整理での常時非表示の解除。敷き物・中央寄せは既存の
   fms-landscape-overlay.css の共通規則がそのまま効く) */
body.fmsVodMode.fms-overlay-active div.fvVideoView > div.fvControlView div.fvPlayButton {
  display: -webkit-flex !important;
  display: flex !important;
}
/* 現在時刻/尺(HH:MM:SS/HH:MM:SS)。バー背景が透明のため、PC向けの暗色
   (尺=#777・区切り=#333)では映像上で読めない → 白系+ドロップシャドウへ */
body.fmsVodMode.fms-overlay-active div.fvVideoView > div.fvControlView div.fvTimeLabel {
  display: -webkit-flex !important;
  display: flex !important;
  align-items: center !important;
  height: 40px !important;
  -webkit-filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55));
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55));
}
body.fmsVodMode.fms-overlay-active div.fvVideoView > div.fvControlView div.fvTimeLabel span.fvDurationLabel {
  color: #ddd !important;
}
body.fmsVodMode.fms-overlay-active div.fvVideoView > div.fvControlView div.fvTimeLabel span.fvDurationLabel:before {
  color: #aaa !important;
}
/* ボリューム制御はスマホでは置かない(ネイティブはモバイルUAで inline 非表示済み。
   これは PC エミュレーション検証(?fmsLsForce=1)との差異を無くすための明示) */
body.fmsVodMode.fms-overlay-active div.fvVideoView > div.fvControlView div.fvMuteButton,
body.fmsVodMode.fms-overlay-active div.fvVideoView > div.fvControlView div.fvVolumeBar {
  display: none !important;
}
/* [見たい馬][コメント]チップはVODでは出さない(JS 側の seekerAvailable/chatAvailable
   縮退が正だが、チップ挿入タイミングとの競合に備えたCSS側の防衛) */
body.fmsVodMode.fmsLandscapeActive .fmsLsChipSeeker,
body.fmsVodMode.fmsLandscapeActive .fmsLsChipChat {
  display: none !important;
}
/* ●ライブ/⏱️巻戻しチップはネイティブ(setVODUI)が隠すが、こちらも明示(防衛) */
body.fmsVodMode.fms-overlay-active div.fvVideoView > div.fvControlView div.fvLiveCaption,
body.fmsVodMode.fms-overlay-active div.fvVideoView > div.fvControlView div.fvDvrCaption {
  display: none !important;
}
/* シークバーのハンドル(赤丸)。ネイティブ(control.min.css)はハンドルの実体スタイルを
   .fvSeekBar.is-dvr-mode スコープにしか持たず、VODでは setVODUI が同クラスを外すため
   ハンドルが無スタイル=不可視になる(PC/タブレットのVODも同根で、そちらは将来課題として
   保留 2026-07-16)。スマホ横向きのVODに限り、DVRと同内容のスタイルをここで複製する。
   is-near-handle/is-handle-active(接近/ドラッグ中の強調)はモード非依存でJSが付与する
   ため、強調規則も同様に複製 */
body.fmsVodMode.fms-overlay-active div.fvVideoView > div.fvControlView > div.fvSeekBar div.ui-slider-horizontal > span.ui-slider-handle {
  display: block !important;
  position: absolute !important;
  box-sizing: border-box !important;
  width: 12px !important;
  height: 12px !important;
  top: -4px !important;
  margin: 0 0 0 -6px !important;
  background: #ff2348 !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.34) !important;
  opacity: 1 !important;
  cursor: pointer !important;
  z-index: 3 !important;
  transform: scale(1) !important;
  transform-origin: center center !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition:
    transform 0.14s ease,
    box-shadow 0.14s ease,
    background-color 0.14s ease !important;
}
body.fmsVodMode.fms-overlay-active div.fvVideoView > div.fvControlView > div.fvSeekBar.is-near-handle div.ui-slider-horizontal > span.ui-slider-handle,
body.fmsVodMode.fms-overlay-active div.fvVideoView > div.fvControlView > div.fvSeekBar.is-handle-active div.ui-slider-horizontal > span.ui-slider-handle {
  background: #ff2348 !important;
  background-image: none !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.38) !important;
  transform: scale(1.24) !important;
}

/* ==========================================================================
   VOD/DVR シークバー: pointer capture 方式の自前ドラッグ(2026-07-17 実機FB)。
   ネイティブ(jQuery UI slider + touch-punch)は pointer capture 無しで、Androidで指が
   つまみを外れるとドラッグが破棄されシークが確定しない(縦UIは setPointerCapture で解決済み)。
   .fvSeekBar 直下に自前オーバーレイ(.fmsLsSeekOverlay)を重ね、pointer capture でドラッグ→
   setCurrentTime で確定する(JS: fms-landscape-webgl.js)。ここでは:
   ・ネイティブのつまみ/レンジを隠す(値駆動の描画が updateSeekBar と競合するため。上の
     VODハンドル表示CSSより後に置いて上書き=同特異度で後勝ち)。
   ・自前 fill/handle/tip を描く。
   ========================================================================== */
body.fmsLandscapeActive.fms-overlay-active div.fvVideoView > div.fvControlView > div.fvSeekBar div.ui-slider-horizontal > span.ui-slider-handle {
  display: none !important;
}
body.fmsLandscapeActive.fms-overlay-active div.fvVideoView > div.fvControlView > div.fvSeekBar div.ui-slider-horizontal > div.ui-slider-range {
  display: none !important;
}
/* オーバーレイ(inset:0)と tip の配置基準 */
body.fmsLandscapeActive div.fvVideoView > div.fvControlView div.fvSeekBar {
  position: relative;
}
body.fmsLandscapeActive .fmsLsSeekOverlay {
  position: absolute;
  inset: 0;
  z-index: 5; /* .fvBar のつまみ(z3)より前。タッチはこのオーバーレイが受ける */
  touch-action: none; /* ドラッグをブラウザのスクロールに奪わせない(縦UIの hit と同じ) */
  cursor: pointer;
}
/* つまみの当たり判定を縦に拡大(2026-07-17 実機FB。シークバーは4pxで細く、最初に
   つまむのが難しい)。視覚(fill/handle は overlay の box 基準=細いバー上)は不変のまま、
   ::before で touch 領域だけを上方向(映像側)へ広げる。上=映像側(バー表示中の操作なのでOK。
   ネイティブtooltipも top:-30px まで見切れない実績あり)。
   下方向へは 1px も広げない(bottom:0。当初 -4px 食い込ませたところ、Android Chrome の
   タッチ補正=指の接触矩形と重なる候補へタップを吸着させる仕組みが、全幅の本領域を
   ボタン行(±10/チップ/全画面等)狙いのタップまで吸着させ、下段ボタンがほぼ反応しなく
   なった 2026-07-18 実機FB。iOS には同補正が無く無症状。つまみ下端 4px の掴み損は
   上 30px 側で吸収する)。 */
body.fmsLandscapeActive .fmsLsSeekOverlay::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -30px;
  bottom: 0;
}
/* ネイティブのシーク接触面を横UIでは無効化(2026-07-18 実機FB)。control.js はシークバーを
   触りやすくする透明ヒット拡張 .slider-hit-area(top:-5px/height:25px/全幅。common.css)を
   .fvBar 内に挿入しており、バー(4px)の下16pxぶんボタン行に食い込む。この帯を触ると
   touch-punch のネイティブドラッグが発動し「自前つまみが動かない・-xx:xx の旧ツールチップ・
   離した位置へシーク」の残骸挙動になるうえ、ボタン間の隙間やボタン上端のタップを奪う
   (positioned なボタン/チップより背面だが、静的背景と隙間では最前面になる)。
   本UIのシーク操作は .fmsLsSeekOverlay(pointer capture)が全て受ける設計のため、
   ネイティブ側は触れない要素にする(fvLivePlayer 本体は無編集の方針どおりCSSのみ)。 */
body.fmsLandscapeActive div.fvVideoView > div.fvControlView div.fvSeekBar div.fvBar {
  pointer-events: none !important; /* 子の .slider-hit-area / track / 隠しつまみも一括で不可侵に */
}
/* 旧DVRツールチップ(-xx:xx)は自前 .fmsLsSeekTip と二重表示になるだけなので非表示に固定 */
body.fmsLandscapeActive div.fvVideoView > div.fvControlView div.fvSeekBar .fvSeekBarToolTip {
  display: none !important;
}
/* 未再生部分(つまみより右)を透過の明るい灰色に(2026-07-28 発注者指示)。
   ネイティブのトラックは background-color:#222(control.css)の非透過で、映像に重ねると
   黒い帯が乗って見える。YouTube 等と同じく半透明の白にして背後の映像を透かす。
   トラックは .fmsLsSeekFill(再生済み=赤)の下地で、ネイティブの進捗表示
   (.ui-slider-range)は上で display:none にしているため、ここで塗るのは
   「つまみより右」に相当する部分だけになる。
   [注記] YouTube のようなロード済み範囲(buffered)の別色表示は現状の実装に無いため、
   未再生部分は一様な色になる。 */
body.fmsLandscapeActive.fms-overlay-active div.fvVideoView > div.fvControlView div.ui-slider-horizontal {
  background-color: rgba(255, 255, 255, 0.3) !important;
}
/* 再生済み部分の赤い棒。トラックと同じ高さで塗り、境界線が見えないようにする
   (2026-07-28 発注者報告)。旧実装は height:3px + 中央寄せ(top:50%/translateY(-50%))
   + border-radius:2px だったため、下地のネイティブトラック
   (.ui-slider-horizontal = 高さ4px・background #222。control.css)が赤の上下に
   0.5px ずつ覗き、赤い線に黒い枠線が付いたように見えていた。
   高さは 100%(=オーバーレイ inset:0 → .fvSeekBar の高さに追従)にして、
   ドラッグ中にバーが太くなる実装が入っても覆い漏れが出ないようにする。
   角丸も外す(端の丸みから下地の #222 が三日月状に覗くため)。つまみ(赤丸)は従来どおり。 */
body.fmsLandscapeActive .fmsLsSeekFill {
  position: absolute;
  top: 0;
  height: 100%;
  background: #e62117; /* ネイティブと同系(youtube系の赤) */
  border-radius: 0;
  pointer-events: none;
}
body.fmsLandscapeActive .fmsLsSeekHandle {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px; /* 中心を left(px) に合わせる */
  border-radius: 999px;
  background: #ff2348;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.34);
  pointer-events: none;
  transition: transform 0.12s ease;
}
body.fmsLandscapeActive .fmsLsSeekOverlay.isDragging .fmsLsSeekHandle {
  transform: scale(1.24);
}
body.fmsLandscapeActive .fmsLsSeekTip {
  position: absolute;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 4px;
  color: #fff;
  font-size: 11px;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
body.fmsLandscapeActive .fmsLsSeekTip[hidden] {
  display: none;
}

/* ==========================================================================
   一時停止時のプレイスクリーン(.fvPlayScreenView)差し替え(2026-07-16 発注者指示)
   縦UI(fms-portrait-webgl.css)と同内容の横向き版。初回再生後
   (body.fmsPlayedOnce=index.php が 'playing' 初回で付与)の一時停止では
   ・▶をプレーヤー配色の緑(#5DCAA5)に(元画像 play.png と同じ白角丸下地+三角のSVG)
   ・告知サムネイル/黒50%幕を敷かず、止めた場面が見えるままにする
   再生前は従来どおり。サイズ/位置はネイティブ規則(background-size:80px・中央)を流用。
   ========================================================================== */
body.fmsPlayedOnce.fmsLandscapeActive div.fvVideoView > div.fvPlayScreenView {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' rx='12' fill='rgba(255,255,255,0.9)'/%3E%3Cpath d='M38 28 L74 50 L38 72 Z' fill='%235DCAA5'/%3E%3C/svg%3E") !important;
  background-color: transparent !important;
}
/* センター −10/⏯/+10 表示中(fmsLsSkipOn=JSがcanSeek時に付与)は緑▶を隠す:
   ⏯ボタン(fa-play表示)と役割が重複するため。
   さらに 2026-07-22 依頼(5a): プレイスクリーン(z1500の全面クリック層)は一時停止中に
   コントロールバー/シークバーを覆って操作を奪うため、pointer-events を無効化して
   下のバーを操作可能にする(縦UI同様 pause中もシーク可。再生/一時停止は⏯クラスタが担う)。 */
body.fmsLsSkipOn.fmsPlayedOnce.fmsLandscapeActive div.fvVideoView > div.fvPlayScreenView {
  background-image: none !important;
  pointer-events: none !important;
}
/* 初回再生前(スプラッシュ=.fvTutorialScreenView 表示中)のプレイスクリーン(2026-07-19 バグ(2)):
   iPhone XR等の横向きロードでスプラッシュの周囲に thumb_key の告知サムネイル
   (.fvPlayScreenView の background)が見え、そこをタップするとスプラッシュが残ったまま
   再生が始まってしまう(playScreen の click が play を直呼びするため)。
   横UIでは再生前の唯一の入口はスプラッシュ(タップで自身を消して再生開始)なので、
   再生前の playScreen は「単なる黒・タップ不能」にする。初回 'playing' で
   body.fmsPlayedOnce が付き、以後は通常の一時停止レイヤー(上の緑▶規則)に戻る。
   [前提] チュートリアルは常時表示(common.js FIXME 25.9.17)。cookie 制で
   スプラッシュ非表示に戻す場合はこの pointer-events を見直すこと。 */
body.fmsLandscapeActive:not(.fmsPlayedOnce) div.fvVideoView > div.fvPlayScreenView {
  background-image: none !important;
  background-color: #000 !important;
  pointer-events: none !important;
}
/* メインビューのクリックポイント(ネイティブの即時1画面切替)は本UI中はタップ不能にする:
   ネイティブハンドラにデバウンスが無く、ダブルタップで ON→OFF とフリッカーするため、
   メイン領域のタップは自前 onPlayerTap のシングルタップ確定(320ms・ダブルタップ取消)に
   一本化する(2026-07-14)。theaterBtnObserver はフォールバックとして残る */
body.fmsLandscapeActive #clickpoint_main {
  pointer-events: none;
}

/* 狭幅時(バー447px詰め時の縮退。§4 変形1): チップをアイコン化しラベルを隠す */
@media (max-width: 700px) {
  body.fmsLandscapeActive.fmsLsDrawerOpen .fmsLsChip .fmsLsChipLabel {
    display: none;
  }
  body.fmsLandscapeActive.fmsLsDrawerOpen .fmsLsChip {
    padding: 0 9px;
  }
}

/* =========================================================================
   チャットの載せ替え(§3。Phase 1-5)
   #youtube-comments-container をドロワーの .fmsLsChatHost へ reparent した状態の
   見た目。高さは flex 委譲(updateAdaptiveHeight はドロワー内では早期return)。
   ヘッダはドロワー側セクションヘッダ(チャット+✕)を使うため隠す。
   ========================================================================= */
body.fmsLandscapeActive .fmsLsChatHost {
  display: flex;
  flex-direction: column;
  padding: 0 6px 6px;
}
body.fmsLandscapeActive .fmsLsChatHost > #youtube-comments-container {
  flex: 1;
  min-height: 0;
  display: block;
  /* ホスト幅に必ず収める(2026-07-14 実機FB: コメント行の最小コンテンツ幅で
     ドロワーからはみ出し、参加ボタンの中央も右へずれていた) */
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}
body.fmsLandscapeActive .fmsLsChatHost .youtube-comments-container {
  display: flex !important;
  flex-direction: column;
  height: 100% !important;
  max-height: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
/* 見出し(YouTube チャット/参加する/[^]/×)はドロワー側ヘッダで代替 */
body.fmsLandscapeActive .fmsLsChatHost .youtube-comments-header {
  display: none !important;
}
body.fmsLandscapeActive .fmsLsChatHost .youtube-comments-list-shell {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
body.fmsLandscapeActive .fmsLsChatHost .youtube-comments-list {
  height: 100% !important;
  max-height: none !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  font-size: 10px;
  /* 長いユーザー名等の分割不能文字列でも幅220pxに収めて折り返す */
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* コメント行はスマホ縦(youtube-comments.css の max-width:768px ブロック)と同サイズに統一。
   横向きはビューポート幅(852px等)が768pxを超えモバイル用メディアクエリが効かず、
   PC用サイズ(author13/本文14/アバター28/padding 8px12px)で縦より大きく表示されていた
   (2026-07-14 実機FB)。 */
body.fmsLandscapeActive .fmsLsChatHost .youtube-comment {
  padding: 6px 10px;
  gap: 8px;
}
body.fmsLandscapeActive .fmsLsChatHost .youtube-comment-avatar {
  width: 24px;
  height: 24px;
}
body.fmsLandscapeActive .fmsLsChatHost .youtube-comment-author {
  font-size: var(--fms-text-xs, 12px);
}
body.fmsLandscapeActive .fmsLsChatHost .youtube-comment-message {
  font-size: var(--fms-text-sm, 13px);
  line-height: 1.3;
}
/* フッタ「参加する」はモックの赤ピル相当をコンパクトに。
   youtube-comments.css は max-width:1032px でフッタ版参加ボタンを display:none に
   するが(インライン版=ヘッダ内へ切替する設計)、ドロワーではヘッダごと隠すため
   フッタ版をここで復活させる */
body.fmsLandscapeActive .fmsLsChatHost .youtube-comments-footer {
  flex: none;
  padding: 6px 0 0;
  display: flex !important;
  justify-content: center;
  background: transparent !important;
  border-top: 1px solid #2b2c2e;
}
body.fmsLandscapeActive .fmsLsChatHost .chat-join-button--footer {
  display: inline-flex !important;
  background: #b4231f;
  color: #fff;
  border: none;
  padding: 4px 12px;
}
body.fmsLandscapeActive .fmsLsChatHost .chat-join-button--footer:hover {
  background: #b4231f; /* 既定の白ホバーを打ち消し(ドロワー内は常に赤ピル) */
}
body.fmsLandscapeActive .fmsLsChatHost .chat-join-button--footer .chat-join-button__label {
  font-size: 10px;
  color: #fff;
}
/* 追加した外部リンク矢印(↗)もラベル(10px)に合わせる。既定の 0.9em は継承フォント基準で
   相対的に大きく出るため、ドロワー内では明示サイズで揃える(2026-07-14 文言統一時に追加) */
body.fmsLandscapeActive .fmsLsChatHost .chat-join-button--footer .chat-join-button__external {
  font-size: 10px;
  color: #fff;
}


/* =========================================================================
   幅狭ドロワー(2026-07-14 ユーザー決定)
   端末縦横比 9:19.5 以下の細長さ(9:16のSE2含む・9:20等は除く)では、プレーヤー
   (高さ×16/9)の左右黒帯が狭くドロワーが映像に大きく被る(非シアターの4×4格子の
   右端列が隠れる)ため、幅を馬番グリッド1列ぶん(セル約45px+gap6px)削る。
   body.fmsLsNarrow は applyState が isNarrowDevice() のとき付与(?fmsLsNarrow=1|0)。
   カメラカルーセル(タイル width:100%)とチャット(min-width:0 連鎖)は幅追従のため、
   専用上書きは馬番グリッド3列化と かんたん/くわしく・コメント行の縮小のみ。
   変形2は幅指定を持たない(基本規則を継承)ためこのブロックがそのまま効く。
   ========================================================================= */
/* SE2(667): 33vw=220 → 170 / XR(896): 240上限 → 190 */
body.fmsLandscapeActive.fmsLsNarrow .fmsLsDrawer {
  width: min(calc(33vw - 50px), 190px);
}
/* 馬番グリッド 4列→3列(セル実寸は4列時とほぼ同じ≒45pxを保つ) */
body.fmsLandscapeActive.fmsLsNarrow .fmsLsSeekerHost .paddock-seeker__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* かんたん/くわしくチップを幅に合わせて縮小 */
body.fmsLandscapeActive.fmsLsNarrow .fmsLsSeekerHost .paddock-seeker__mode-tab {
  min-height: 22px;
  padding: 2px 4px;
  font-size: 9px;
}
/* コメント行も幅170px級に合わせて微縮小(通常時は縦UIと同サイズ=24/12/13px) */
body.fmsLandscapeActive.fmsLsNarrow .fmsLsChatHost .youtube-comment {
  padding: 5px 8px;
  gap: 6px;
}
body.fmsLandscapeActive.fmsLsNarrow .fmsLsChatHost .youtube-comment-avatar {
  width: 20px;
  height: 20px;
}
body.fmsLandscapeActive.fmsLsNarrow .fmsLsChatHost .youtube-comment-author {
  font-size: 11px;
}
body.fmsLandscapeActive.fmsLsNarrow .fmsLsChatHost .youtube-comment-message {
  font-size: 12px;
}

/* =========================================================================
   変形2(§4。Phase 4-1): 3タブ常設+バー全幅+「タブを開く=ON」統一
   body.fmsLsVariant2 は applyState が drawerVariant===2 のとき付与する。
   バー全幅は JS 側で担保(recalcPlayerShift が --fmsLsBarW を設定しない=既定100%)。
   タブ増減・アクティブ決定・分割なしは deriveUiVariant2(JS)側。ここは寸法差分のみ。
   ========================================================================= */
/* ドロワー高 = 画面最上部〜バー上端(SE2で約335px)。左下角 radius 8px(§4)。
   --fmsLsBarH は recalcPlayerShift が実測値(LIVE=40/DVR=47)を設定する */
body.fmsLandscapeActive.fmsLsVariant2 .fmsLsDrawer {
  height: calc(100% - var(--fmsLsBarH, 47px));
  border-radius: 0 0 0 8px;
}
/* タブの文字縮小・馬番チップ32px化の変形2専用上書きは 2026-07-14 に撤去:
   タブはアイコン化(両変形共通14px)、チップは分割廃止に伴い基本規則側を32pxに統一済み */

/* =========================================================================
   ページ通常フローのチャット欄は横UI中は常時非表示(2026-07-14 ユーザー決定)
   横向きロード時にスプラッシュ画像の裏でコメントが流れる問題への対処。
   縦→横回転時も同様に隠れる。チャットはドロワー内(#youtube-comments-container
   を .fmsLsChatHost へ reparent)でのみ見せるため影響なし。
   updateChatUI の inline show() に勝つよう !important。
   ========================================================================= */
body.fmsLandscapeActive #youtube-comments-wrapper {
  display: none !important;
}

/* =========================================================================
   バーリビール用ピル(2026-07-14 ユーザー決定 → 2026-07-19 一旦非表示)
   メイン映像シングルタップでバーをトグルできる(方式3)ため、ピルは常時非表示に。
   DOM・ハンドラは残置(display:none で不活性)。復活時は下の flex 規則を戻すだけ。
   ========================================================================= */
/* バーピル(下部中央。厚み22px・長さ52px・full radius=グラバー等と統一)。
   背景・色・影・アイコンは上の共通ルール参照。 */
body.fmsLandscapeActive .fmsLsBarPill {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  width: 52px;
  height: 22px;
  border-radius: 999px;
  z-index: 1300; /* バーと同層(シアターcanvas z100 より前面) */
}
/* 2026-07-19 ユーザー指示でピルは一旦非表示(タップでコントロール表示が一般的なため)。
   復活させる場合はこの規則を戻す:
   body.fmsLandscapeActive:not(.fms-bar-open) .fmsLsBarPill { display: flex; } */
/* 当たり判定を視覚より広く(上スワイプの起点にもなるため上方向へ厚めに) */
body.fmsLandscapeActive .fmsLsBarPill::before {
  content: '';
  position: absolute;
  top: -14px;
  right: -18px;
  bottom: -8px;
  left: -18px;
}

/* =========================================================================
   コントロールバー内の +10/−10(fvRwdShortButton/fvFwdShortButton)非表示
   (2026-07-19 ユーザー指示)。±10操作はセンターボタン/左右ゾーンのダブルタップに
   一本化する(バー内は重複UIになるため)。fvLivePlayer 無編集=CSSのみ。
   fms-landscape-overlay.css の表示規則(display:flex !important。
   body.fms-overlay-active div.fvVideoView > div.fvControlView div.fvRwdShortButton)に
   詳細度で勝つ必要があるため、同構造+.fmsLandscapeActive の二重クラスで上書きする。
   ========================================================================= */
body.fmsLandscapeActive.fms-overlay-active div.fvVideoView > div.fvControlView div.fvRwdShortButton,
body.fmsLandscapeActive.fms-overlay-active div.fvVideoView > div.fvControlView div.fvFwdShortButton,
body.fmsLandscapeActive div.fvControlView div.fvRwdShortButton,
body.fmsLandscapeActive div.fvControlView div.fvFwdShortButton {
  display: none !important;
}

/* =========================================================================
   バッファリングスピナー対策(2026-07-14 実機FB)
   ========================================================================= */
/* 横UIのスピナーは縦UIと同等サイズへ(既定80px=common.css は横向きでは異様に大きい) */
body.fmsLandscapeActive div.fvVideoView > div.fvLodingView > .sk-fading-circle {
  width: 32px !important;
  height: 32px !important;
}
/* iOS WebKit: 回転後の初回バッファリングで ::before のアニメーションが走らず
   全点灯に見える対策。表示された瞬間に index.php がこのクラスを1フレームだけ付け、
   アニメーションを外して再適用=負の animation-delay 込みで再始動させる。
   (fms-portrait-webgl.css にも同じ規則あり=どちらか一方のみ読込でも効くように) */
.sk-fading-circle.fmsSpinnerRestart .sk-circle:before {
  -webkit-animation: none !important;
  animation: none !important;
}

/* =========================================================================
   設定ボトムシート(⚙。2026-07-19 ユーザー決定)
   設計: docs/sp_yoko_setting_bottomseat/設定ボトムシート案.md + ワイヤーフレームPNG。
   バーの画質ボタンをギアへ置き換え(fmsLsGearOn)、シートは #fvPlayer 配下の
   fixed バックドロップ+下端スライドイン。寸法・色は設計書§6/カラー表に従う:
   シート白背景 / 区切り#E5E5E5 / 説明背景#F2FAF6 / トグルON#00A05A / OFF#BDBDBD。
   ========================================================================= */
/* ギア表示中はネイティブ画質ボタンを隠す(DOMは温存=シートが実クリック委譲で流用)。
   fms-landscape-overlay.css:123 の表示規則(display:flex !important。
   body.fms-overlay-active div.fvVideoView > div.fvControlView div.fvQualityButton)に
   詳細度で勝つため、±10非表示(上の fvRwdShortButton)と同じ二重クラス+同構造で上書き
   (2026-07-19 pc-verify NG対応) */
body.fmsLandscapeActive.fmsLsGearOn.fms-overlay-active div.fvVideoView > div.fvControlView div.fvQualityButton,
body.fmsLandscapeActive.fmsLsGearOn div.fvControlView div.fvQualityButton {
  display: none !important;
}
body.fmsLandscapeActive .fmsLsGearBtn .fa {
  color: #fff;
  font-size: 16px;
  line-height: 1;
}

/* ---- バックドロップ(暗転。§5.1: タップで閉じる/背面操作の遮断はJS側stopPropagation) */
body.fmsLandscapeActive .fmsLsSheetBackdrop {
  position: fixed;
  inset: 0;
  z-index: 1600; /* プレイスクリーン(1500)・センター⏯(1550)より前面 */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  transition: background 220ms ease; /* SHEET_ANIM_MS(JS)と合わせる */
}
body.fmsLandscapeActive .fmsLsSheetBackdrop[hidden] {
  display: none;
}
body.fmsLandscapeActive .fmsLsSheetBackdrop.isOpen {
  background: rgba(0, 0, 0, 0.6); /* §6: 黒・不透明度50〜70% */
}

/* ---- シート本体(§6) ---- */
body.fmsLandscapeActive .fmsLsSheet {
  width: min(620px, calc(100vw - 32px));
  max-height: min(88vh, 640px);  /* dvh 非対応環境のフォールバック */
  max-height: min(88dvh, 640px);
  display: flex;
  flex-direction: column;
  background: #fff;
  color: #111111;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.35);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(100%);
  transition: transform 220ms ease-out;
}
body.fmsLandscapeActive .fmsLsSheetBackdrop.isOpen .fmsLsSheet {
  transform: translateY(0);
}
body.fmsLandscapeActive .fmsLsSheet.isDragging {
  transition: none; /* 下ドラッグ追従中はJSの translate を即時反映 */
}
@media (prefers-reduced-motion: reduce) {
  body.fmsLandscapeActive .fmsLsSheetBackdrop,
  body.fmsLandscapeActive .fmsLsSheet {
    transition: none; /* §12 */
  }
}

/* ---- ヘッダ(ハンドル/タイトル/×)。下ドラッグで閉じる起点はここに限定(§5.3) ---- */
body.fmsLandscapeActive .fmsLsSheetHead {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 10px 10px 0 24px;
  touch-action: none; /* ヘッダのドラッグをスクロールに奪わせない */
}
body.fmsLandscapeActive .fmsLsSheetHandle {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 44px;
  height: 4px;
  margin-left: -22px;
  border-radius: 2px;
  background: #d9d9d9;
}
body.fmsLandscapeActive .fmsLsSheetTitle {
  flex: 1 1 auto;
  margin: 10px 0 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: #111111;
}
body.fmsLandscapeActive .fmsLsSheetClose {
  flex: 0 0 auto;
  width: 44px;   /* タップ領域 最低44×44(§6/§12) */
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  padding: 0;
  background: none;
  border: none;
  color: #111111;
  font-size: 20px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ---- 本文(縦幅の短い横向きSE2等は内部スクロール。§6) ---- */
body.fmsLandscapeActive .fmsLsSheetBody {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 20px 16px; /* シート内部左右余白 20〜24px(§6) */
}

/* ---- 設定行 ---- */
body.fmsLandscapeActive .fmsLsSetItem {
  border-top: 1px solid #e5e5e5;
}
body.fmsLandscapeActive .fmsLsSetItem:first-child {
  border-top: none;
}
body.fmsLandscapeActive .fmsLsSetRow {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 60px; /* §6の64px基準を横向きの縦幅へ寄せた値(タップ領域44px は維持) */
}
body.fmsLandscapeActive .fmsLsSetIcon {
  flex: 0 0 auto;
  width: 24px;
  text-align: center;
  color: #111111;
  font-size: 17px;
}
body.fmsLandscapeActive .fmsLsSetLabel {
  flex: 1 1 auto;
  font-size: 16px;
  font-weight: 600;
  color: #111111;
}
body.fmsLandscapeActive .fmsLsSetInfo {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  color: #6b7280;
  font-size: 17px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* 巻戻しOFF中の補足(§4.3 グレーアウト+理由テキスト。色以外でも無効を示す=§12) */
body.fmsLandscapeActive .fmsLsSetHint {
  margin: -8px 0 10px 34px;
  font-size: 12px;
  color: #6b7280;
}
body.fmsLandscapeActive .fmsLsSetItem.isDisabled .fmsLsSetRow {
  opacity: 0.45;
}
/* ⓘ説明(§7.3) */
body.fmsLandscapeActive .fmsLsSetHelp {
  margin: 0 0 12px 34px;
  padding: 12px 14px;
  border-radius: 8px;
  background: #f2faf6; /* rgba(0,138,91,.08)相当 */
  color: #2f7a57;
  font-size: 13px;
  line-height: 1.6;
}

/* ---- トグルスイッチ(ON=ブランドグリーン/OFF=グレー。input は透明で全面タップ) ---- */
body.fmsLandscapeActive .fmsLsSwitch {
  flex: 0 0 auto;
  position: relative;
  display: inline-block;
  width: 51px;
  height: 31px;
}
body.fmsLandscapeActive .fmsLsSwitch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
body.fmsLandscapeActive .fmsLsSwitch input:disabled {
  cursor: default;
}
body.fmsLandscapeActive .fmsLsSwitchVisual {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #bdbdbd;
  transition: background 150ms ease;
  pointer-events: none;
}
body.fmsLandscapeActive .fmsLsSwitchVisual::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 150ms ease;
}
body.fmsLandscapeActive .fmsLsSwitch input:checked + .fmsLsSwitchVisual {
  background: #00a05a;
}
body.fmsLandscapeActive .fmsLsSwitch input:checked + .fmsLsSwitchVisual::after {
  transform: translateX(20px);
}
@media (prefers-reduced-motion: reduce) {
  body.fmsLandscapeActive .fmsLsSwitchVisual,
  body.fmsLandscapeActive .fmsLsSwitchVisual::after {
    transition: none;
  }
}

/* ---- セグメント項目(画質 / コントロールの位置。選択中=塗りつぶし+太字) ---- */
/* .fmsLsSetItemSeg は「コントロールの位置」(2026-07-27 追加)。どちらもトグル無しの
   見出し行+セグメント行という同じ構造のため、行の詰めを共有する */
body.fmsLandscapeActive .fmsLsSetItemQuality .fmsLsSetRow,
body.fmsLandscapeActive .fmsLsSetItemSeg .fmsLsSetRow {
  min-height: 48px; /* 見出し行(トグル無し)は詰める */
}
body.fmsLandscapeActive .fmsLsSegGroup {
  display: flex;
  margin: 2px 0 16px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  overflow: hidden;
}
body.fmsLandscapeActive .fmsLsSegBtn {
  flex: 1 1 0;
  min-height: 44px;
  padding: 0;
  background: #fff;
  border: none;
  border-left: 1px solid #d1d5db;
  color: #111111;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body.fmsLandscapeActive .fmsLsSegBtn:first-child {
  border-left: none;
}
body.fmsLandscapeActive .fmsLsSegBtn.isActive {
  background: #111111;
  color: #fff;
  font-weight: 700;
}

/* =========================================================================
   初回操作ガイド(2026-07-20)
   指示書: docs/sp_yoko_1sttime_guidance/FMS_初回操作ガイド_Codex_ClaudeCode実装指示書.md
   3部品: 基本ガイド(.fmsLsGuideOverlay=暗転+タップ説明+□リング) /
   上スワイプ案内(.fmsLsSwipeGuide) / 巻戻し吹き出し(.fmsLsRewindHint)。
   位置(left/top)と暗転の mask 穴は JS(positionBasicGuide 等)が実DOMの実測で与える
   (§4.1: モックの固定座標では実装しない)。
   ========================================================================= */
/* ---- 基本ガイド(§1.1/§4.2) ---- */
body.fmsLandscapeActive .fmsLsGuideOverlay {
  position: fixed;
  inset: 0;
  /* ガイダンス最優先=最前面(2026-07-20 ユーザー決定)。設定シート(1600)より上。
     チャットドロワー(1305)も暗転対象に含め、どこをタップしても閉じる */
  z-index: 1650;
  opacity: 0;
  transition: opacity 200ms ease; /* GUIDE_FADE_MS(JS)と合わせる(§10) */
}
body.fmsLandscapeActive .fmsLsGuideOverlay.isShown {
  opacity: 1;
}
body.fmsLandscapeActive .fmsLsGuideOverlay.isClosing {
  opacity: 0;
  transition: opacity 180ms ease;
}
body.fmsLandscapeActive .fmsLsGuideDim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55); /* §4.2: 0.50〜0.60。映像は裏で再生継続 */
  /* mask の穴(□ボタン素通し)は JS が -webkit-mask-image で与える */
}
/* [廃止・残置] 中央のタップ説明(.fmsLsGuideCenter / .fmsLsGuideRipple /
   .fmsLsGuideTitle「タップでコントロール表示」/ .fmsLsGuideSub「もう一度タップで非表示」)は
   2026-07-28 の発注者指示で全端末・全バー配置から撤去した。初見のユーザーテストで
   「コントロールって何?」となり、YouTube を日常的に使う人にも通じない用語だったため。
   基本ガイドに残るのは□リングとそのラベル「1画面 ⇄ 分割 切替」だけ。
   JS(buildBasicGuide)が DOM を生成しないので以下の規則は現在どこにも当たらない。
   復活はこの4規則を使う DOM を buildBasicGuide へ戻すだけで済むよう残置してある。 */
body.fmsLandscapeActive .fmsLsGuideCenter {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  pointer-events: none; /* タップはオーバレイのルートが受ける */
}
/* タップ位置の白い同心円(§4.2)。中心ドット+::before/::after の広がる波紋 */
body.fmsLandscapeActive .fmsLsGuideRipple {
  position: relative;
  width: 52px;
  height: 52px;
  margin-bottom: 12px;
}
body.fmsLandscapeActive .fmsLsGuideRipple::before,
body.fmsLandscapeActive .fmsLsGuideRipple::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  animation: fmsLsGuideRipple 1.6s ease-out infinite; /* §10: 1.4〜1.8秒周期 */
}
body.fmsLandscapeActive .fmsLsGuideRipple::after {
  animation-delay: 0.8s;
}
@keyframes fmsLsGuideRipple {
  0%   { transform: scale(0.35); opacity: 1; }
  100% { transform: scale(1.15); opacity: 0; }
}
body.fmsLandscapeActive .fmsLsGuideTitle {
  margin: 0;
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
body.fmsLandscapeActive .fmsLsGuideSub {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
/* 1画面/分割切替(右上□ボタン)の強調リング(§1.1: 緑系。ボタンは隠さない) */
body.fmsLandscapeActive .fmsLsGuideRing {
  position: absolute;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -50%);
  border: 2px solid var(--fms-green-400, #5DCAA5);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(93, 202, 165, 0.7), inset 0 0 6px rgba(93, 202, 165, 0.4);
  pointer-events: none;
}
body.fmsLandscapeActive .fmsLsGuideRingLabel {
  position: absolute;
  transform: translateX(-50%);
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.72);
  border-radius: 6px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
}
/* ---- カメラ切替ヒント(2026-07-28 発注者指示。同日の初版を全面見直し) ----
   シアターON時に[カメラ]タブの横へ小さく出す補足表示。「指示」ではなく「報告」の位置づけで、
   初版のモーダル(暗転+中央パネル+点線)は撤去した(減光は「止まって読め」の記号で強すぎる)。
   ・暗転しない / pointer-events:none で操作を一切ブロックしない
     (映像タップ・タブタップ・スワイプはヒント表示中も通常どおり動く)
   ・対象の真横に置き、点線ではなくキャレット(三角)で指す。1行のみ・副文なし
   位置は JS(positionCamTip)が[カメラ]タブの実測から与える。表示/消去のタイミングも JS。
   見た目の指定: docs/sp_yoko_1sttime_guidance/FMS_シアターモード中のサブ画面リスト.png */
body.fmsLandscapeActive .fmsLsCamTip {
  position: fixed;
  inset: 0;
  /* ドロワー(1305)より前面。モーダルではないので基本ガイド(1650)より十分低く置く */
  z-index: 1320;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease; /* CAMTIP_FADE_MS(JS)と合わせる */
}
body.fmsLandscapeActive .fmsLsCamTip.isShown {
  opacity: 1;
}
/* [カメラ]タブを囲む細い緑リング(基本ガイドの強調リングより控えめな発光) */
body.fmsLandscapeActive .fmsLsCamTipRing {
  position: absolute;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
  border: 2px solid var(--fms-green-400, #5DCAA5);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(93, 202, 165, 0.45);
}
/* 吹き出し本体。JS は right/top を与える(right基準にすると文言長が変わっても
   キャレットの位置がタブ横に留まる) */
body.fmsLandscapeActive .fmsLsCamTipBubble {
  position: absolute;
  transform: translateY(-50%);
  padding: 7px 13px;
  background: rgba(0, 0, 0, 0.82);
  border-radius: 10px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
/* 右向きキャレット(対象タブを指す) */
body.fmsLandscapeActive .fmsLsCamTipBubble::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -6px;
  border: 6px solid transparent;
  border-left-color: rgba(0, 0, 0, 0.82);
}
@media (prefers-reduced-motion: reduce) {
  body.fmsLandscapeActive .fmsLsCamTip {
    transition: none;
  }
}

body.fmsLandscapeActive .fmsLsGuideClose {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
}

/* ---- 上スワイプ案内(§1.2)。操作は一切奪わない(§7.2) ----
   .fvVideoView 配下に置き、映像矩形の上下左右中央へ(2026-07-20 SE2実機FB)。
   白っぽい映像の上でも読めるよう暗色パネル背景を敷く(同FB: 素のテキスト+影では
   補足行が全く読めない) */
body.fmsLandscapeActive .fmsLsSwipeGuide {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1610; /* 基本ガイド(1650)より下・シート(1600)より上の受動トースト */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 14px 20px;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 12px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
}
body.fmsLandscapeActive .fmsLsSwipeGuide.isShown {
  opacity: 1;
}
/* 上向きシェブロン(映像上から上方向へ動く=§1.2: Safariバー上からは開始しない) */
body.fmsLandscapeActive .fmsLsSwipeArrow {
  width: 18px;
  height: 18px;
  margin-bottom: 8px;
  border-left: 3px solid #fff;
  border-top: 3px solid #fff;
  transform: rotate(45deg);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
  animation: fmsLsSwipeArrow 1.4s ease-in-out infinite;
}
@keyframes fmsLsSwipeArrow {
  0%, 100% { transform: rotate(45deg) translate(4px, 4px); opacity: 0.5; }
  50%      { transform: rotate(45deg) translate(-4px, -4px); opacity: 1; }
}
body.fmsLandscapeActive .fmsLsSwipeTitle {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}
/* [現在未使用] 補足行は 2026-07-28 の発注者指示で廃止(JS が生成しなくなった)。
   復活させる場合は showSwipeGuide の HTML に .fmsLsSwipeSub を戻すだけでよい。 */
body.fmsLandscapeActive .fmsLsSwipeSub {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.92); /* パネル背景前提でコントラスト確保(SE2実機FB) */
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

/* ---- 巻戻し吹き出し(§1.3/§4.3) ----
   #fvPlayer(transformしない箱)配下の fixed=ビューポート実測座標で配置(JS)。
   .fvVideoView 配下の absolute は translate/scale と座標系がズレるため不採用
   (2026-07-20 SE2実機FB: 吹き出しがボタンから浮く)。

   [タップ可能](2026-08-03 発注者指示。§7.3 の pointer-events:none を差し替え)
   吹き出し自体が「巻戻しをONにする」ボタンを兼ねる。案内を読んだ指がそのまま
   吹き出しへ伸びるため、素通しだと背面のメイン映像がバーをトグルするだけで
   案内も消えず何も起きないように見えていた。要素は <button>(iOS Safari は
   div へのタップで click が落ちないことがあるため) */
body.fmsLandscapeActive .fmsLsRewindHint {
  position: fixed;
  z-index: 1450; /* バー(1300)/ドロワー(1305)より前・スプラッシュ(1500)より後 */
  display: block;
  margin: 0;
  overflow: visible; /* ::after の三角は箱の外(bottom:-6px)。button のUA既定に依存しない */
  -webkit-appearance: none;
  appearance: none;
  max-width: calc(100vw - 16px);
  padding: 8px 12px;
  background: rgba(18, 18, 18, 0.92);
  border: 1px solid var(--fms-green-400, #5DCAA5);
  border-radius: 8px;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
  white-space: nowrap; /* §4.3: nowrap 基本。幅不足時のみ isWrap で2行化 */
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transition: opacity 180ms ease;
}
/* タップ中のフィードバック(押した実感。ボタン化に伴い追加 2026-08-03) */
body.fmsLandscapeActive .fmsLsRewindHint:active {
  background: rgba(40, 40, 40, 0.96);
}
body.fmsLandscapeActive .fmsLsRewindHint.isShown {
  opacity: 1;
}
body.fmsLandscapeActive .fmsLsRewindHint.isWrap {
  white-space: normal;
}
/* 三角の先端を巻戻しボタン中央へ(横位置 --fmsLsRhTx は JS が実測で与える) */
body.fmsLandscapeActive .fmsLsRewindHint::after {
  content: '';
  position: absolute;
  left: var(--fmsLsRhTx, 50%);
  bottom: -6px;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--fms-green-400, #5DCAA5);
}
/* 巻戻しボタンのパルス(§10: 1.0〜1.2秒周期×2回だけ・transform のみ・強い点滅なし)。
   ネイティブDOMは class 付与のみ(fvLivePlayer 無編集の方針) */
body.fmsLandscapeActive div.fvControlView div.fvDvrCaption.fmsLsRewindPulse {
  outline: 2px solid var(--fms-green-400, #5DCAA5);
  outline-offset: 1px;
  border-radius: 6px;
  animation: fmsLsRewindPulse 1.1s ease-in-out 2;
}
@keyframes fmsLsRewindPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

/* reduced-motion(§10): 波紋・矢印・パルスを停止し、フェードも無効化。
   リング/緑枠の静的強調だけ残す */
@media (prefers-reduced-motion: reduce) {
  body.fmsLandscapeActive .fmsLsGuideOverlay,
  body.fmsLandscapeActive .fmsLsSwipeGuide,
  body.fmsLandscapeActive .fmsLsRewindHint {
    transition: none;
  }
  body.fmsLandscapeActive .fmsLsGuideRipple::before,
  body.fmsLandscapeActive .fmsLsGuideRipple::after {
    animation: none;
    transform: scale(0.7);
    opacity: 0.9;
  }
  body.fmsLandscapeActive .fmsLsSwipeArrow {
    animation: none;
  }
  body.fmsLandscapeActive div.fvControlView div.fvDvrCaption.fmsLsRewindPulse {
    animation: none;
  }
}

/* ==========================================================================
   コントロールのメイン画面内配置(?fmsControlOnMain=1。2026-07-27 ユーザー指示)
   --------------------------------------------------------------------------
   シアターOFF(格子表示=サブ画面あり)のとき、シークバー+コントロールバーと
   センター −10/⏯/+10 を「メイン画面(左上75%×75%。JS の MAIN_AREA_RATIO と同値)」の
   内側に収める。バーとボタンが最下段のサブ画面タイルの上に散らばって見える状態の解消が目的。
   スコープは body.fmsLsCtrlOnMain(付与元=applyState) と :not(.fmsLsTheater) の二重で、
   パラメータ無しの通常時とシアターON時は一切変えない。

   [幅]   既存バー幅の75%。--fmsLsBarW はドロワー展開時のみ JS が設定するため、
          未設定時(ドロワー無し/畳み)は 100%×0.75=映像幅の75% に落ちる。
          left:0(overlay CSS)のままでメイン左端に揃う。
   [下端] 映像高さの25%上=メイン下端。
   [格納] 既存の translateY(118%) はバー自身の高さ基準のため、上げたバーは
          メイン下端〜映像下端の余白(映像高さの25%)を越えられず、サブ画面段の上に
          居残って見えてしまう。格納量は JS が実測 px で --fmsLsCtrlHideY へ渡す
          (算出元 setCtrlHideVar: 映像高さ25% + バー高×1.18 を実効スケールで layout 値へ戻す)。
          変数が入る前は従来値 118% にフォールバックする。
   [特異度] overlay CSS の translateY !important 群と、上の §分離配置の counter-scale 規則
          (どちらも transform を !important で持つ)の両方に勝つ必要がある。格納側だけ足すと
          バー表示中(fms-bar-open)も格納位置のままになるため、表示側も明示的に書き戻す。
   ========================================================================== */
body.fmsLandscapeActive.fmsLsCtrlOnMain:not(.fmsLsTheater) div.fvVideoView > div.fvControlView {
  width: calc(var(--fmsLsBarW, 100%) * 0.75) !important;
  right: auto !important;
  bottom: 25% !important;
  transform: translateY(var(--fmsLsCtrlHideY, 118%)) !important;
}
body.fmsLandscapeActive.fmsLsCtrlOnMain.fms-bar-open:not(.fmsLsTheater) div.fvVideoView > div.fvControlView {
  transform: translateY(0) !important;
}
/* 分離配置(fmsLsFit)では実寸維持の counter-scale(1/k)を合成する(§分離配置と同じ理由。
   translate は合成行列の平行移動成分なので scale の影響を受けない=px値はそのまま効く) */
body.fmsLandscapeActive.fmsLsCtrlOnMain.fmsLsFit:not(.fmsLsTheater) div.fvVideoView > div.fvControlView {
  transform: translateY(var(--fmsLsCtrlHideY, 118%)) scale(var(--fmsLsBarInv, 1)) !important;
}
body.fmsLandscapeActive.fmsLsCtrlOnMain.fmsLsFit.fms-bar-open:not(.fmsLsTheater) div.fvVideoView > div.fvControlView {
  transform: translateY(0) scale(var(--fmsLsBarInv, 1)) !important;
}

/* センター −10/⏯/+10 もメイン画面の上下左右中央(左上75%の中心=37.5%/37.5%)へ。
   間隔は狭くなるメイン幅(SE2・ドロワー展開時で実測約335px)に合わせて
   clamp(20px,6vw,64px) から縮める。この値は JS の skipButtonCenterX()(クラスタ非表示中の
   ダブルタップ左右ゾーン境界)が鏡写しで持っているため、変更時は両方直すこと。
   [対象はメイン内配置のみ] 外側配置(.fmsLsCntlOut)は 2026-07-28 のユーザー指示で
   「サブ画面を含む映像部分全体の上下左右中央」へ戻したため、この規則の対象から外した
   (= 冒頭の既定 left/top 50% + gap clamp(20px,6vw,64px) がそのまま効く)。 */
body.fmsLandscapeActive.fmsLsCtrlOnMain:not(.fmsLsTheater) .fmsLsSkipCluster {
  left: 37.5%;
  top: 37.5%;
  gap: clamp(12px, 4vw, 40px);
}
/* ⏯の当たり判定拡張(既定 -14px)は縮めた gap の下限(12px)を超え、隣の ±10 ボタン本体へ
   食い込むため合わせて縮める。視覚サイズは不変(拡張は透明な ::before のみ)。 */
body.fmsLandscapeActive.fmsLsCtrlOnMain:not(.fmsLsTheater) .fmsLsSkipPlay::before {
  top: -10px;
  right: -10px;
  bottom: -10px;
  left: -10px;
}

/* ==========================================================================
   コントロールバーの外側配置(?fmsCntlOutView=1。2026-07-27 ユーザー指示)
   --------------------------------------------------------------------------
   シアターOFF(格子表示=サブ画面あり)のとき、バーを映像に重ねず「映像の真下に置く独立した
   帯(幅=映像幅)」にする(PC等のレイアウトと同じ見え方)。映像はバーを除いた上部領域へ
   16:9 のまま収まるので、縦だけでなく横サイズも縮む。シアターON時は従来のUIを継続。
   フックの付与元は applyState(body.fmsLsCntlOut = ?fmsCntlOutView=1 かつ分離配置かつ非シアター)。

   [DOMは動かさない] バーの見た目・配置を決める規則は `div.fvVideoView > div.fvControlView`
   前提で70個あり、DOMを外へ出すと全滅する。代わりにここで .fvVideoView の
   overflow:hidden(ネイティブ video_fv.css の !important)だけ解除し、JS が算出した
   bottom で視覚的に映像の下へ出す。
   [幅] 映像の実寸幅に一致させる(2026-07-27 ユーザー指示。当初は画面全幅だった)。
   ドロワー展開時は映像右端=ドロワー左端のため、バー右端が右ペインの左端に一致し、
   右ペイン(見たい馬/チャット/サブ画面)を隠さない。
   [座標] --fmsLsBarBottom / --fmsLsBarW の付与元は recalcPlayerShift。
   counter-scale(--fmsLsBarInv)が効いたままなので幅は layout値=視覚px、bottom は
   親スケールぶん(÷k)を JS 側で補正済み。left は既定 0(=映像左端)のまま。
   [常時表示] 自動格納しないため transform は counter-scale のみ(translateY を持たない)。
   格納/表示の抑止は JS(barHeldByDrawer)側。
   [特異度] 上の §分離配置 の counter-scale 規則(fmsLsFit + fms-bar-open = クラス4)に
   勝つ必要があるため .fmsLsFit を明示して同数にし、後方配置で後勝ちさせる。
   ========================================================================== */
body.fmsLandscapeActive.fmsLsCntlOut div.fvVideoView {
  overflow: visible !important;
}
body.fmsLandscapeActive.fmsLsCntlOut.fmsLsFit div.fvVideoView > div.fvControlView {
  left: 0 !important;
  right: auto !important;
  bottom: var(--fmsLsBarBottom, 0px) !important;
  width: var(--fmsLsBarW, 100%) !important;
  /* 背景は不透明の黒(2026-07-27 発注者報告の修正)。
     Android の全画面表示中にカメラを切り替えると、シークバー/ボタンの背後に
     スプラッシュ画像(切替中の video の poster=チュートリアル画像)が見えていた。
     外側配置はバーを映像の外へ出すために上で overflow:visible にしており、
     映像領域からはみ出した .fvVideoView の子がクリップされないため。
     重ね置き用の透明背景(fms-landscape-overlay.css の
     background-color:transparent!important)を打ち消して、バーの帯を必ず黒で塗る。
     外側配置のバーは映像に重ならない=黒帯の上に置かれるので、不透明化しても
     可視領域は一切減らない。 */
  background-color: #000 !important;
  transform: scale(var(--fmsLsBarInv, 1)) !important;
  transform-origin: left bottom;
  /* シアター切替でのレイアウト遷移を映像(.fvVideoView)の 0.24s に合わせる
     (2026-07-27 ユーザー決定)。既定の transition(transform/width のみ)に位置も足す */
  transition: transform 0.24s cubic-bezier(0.32, 0.72, 0, 1),
              width 0.24s cubic-bezier(0.32, 0.72, 0, 1),
              left 0.24s cubic-bezier(0.32, 0.72, 0, 1),
              bottom 0.24s cubic-bezier(0.32, 0.72, 0, 1) !important;
}
@media (prefers-reduced-motion: reduce) {
  body.fmsLandscapeActive.fmsLsCntlOut.fmsLsFit div.fvVideoView > div.fvControlView {
    transition: none !important;
  }
}

/* [ドロワー高さは既定(100%)のまま] 当初はバーが画面全幅だったため上端まで縮めていたが、
   2026-07-27 のユーザー指示でバー幅を映像幅に合わせた結果、バーとドロワーは左右に分かれて
   重ならなくなった。縮めると右ペイン(見たい馬/チャット/サブ画面)の表示領域を無駄に
   47px 削るだけなので、その規則は撤去した。 */

/* ±10/⏯ は「サブ画面を含む映像部分全体」の上下左右中央へ(2026-07-28 ユーザー指示で再改訂)。
   当初はバー内のネイティブボタン(fvRwdShortButton/fvFwdShortButton/fvPlayButton)へ戻し、
   2026-07-27 に「メイン画面の中に収める」(37.5%/37.5%)へ変更したが、外側配置では
   映像全体(.fvVideoView)の中央に置くことになったため、位置指定そのものを持たない
   =冒頭の既定(left/top 50% + gap clamp(20px,6vw,64px))に委ねる。
   .fvVideoView は格子(メイン+サブ)全体の矩形なので、50%/50% がそのまま映像全体の中央。
   [JS 側の鏡] クラスタ非表示中のダブルタップ左右ゾーン境界 skipButtonCenterX() も
   外側配置を「既定(50%/共通gap)」側へ戻してある。

   バーは常時表示のままだが、**クラスタだけはシアター時と同じ 3.5秒の無操作で隠す**
   (2026-07-27 ユーザー指示)。バー表示に連動する既定の規則(body.fms-bar-open)は
   外側配置では常時真になってしまうため、ここで打ち消して自前フック body.fmsLsSkipReveal
   (付与元: revealSkip / 解除: onSkipHideTimer)に載せ替える。
   メイン画面のシングルタップで表示⇄非表示をトグルできる(onPlayerTap)。 */
body.fmsLandscapeActive.fmsLsCntlOut .fmsLsSkipCluster:not([hidden]) {
  display: none;
}
body.fmsLandscapeActive.fmsLsCntlOut.fmsLsSkipReveal .fmsLsSkipCluster:not([hidden]) {
  display: flex;
}

/* ==========================================================================
   再生エラー画面(.fvErrorView)の前面化(2026-07-27 発注者報告)
   --------------------------------------------------------------------------
   ネイティブのエラー画面は .fvVideoView 内の z-index:1000(fvLivePlayer/css/common.css)で、
   本UIが映像に重ねるレイヤー(コントロールバー1300 / ネイティブのプレイスクリーン1500 /
   センター −10/⏯/+10 1550)より背面にある。そのためエラー表示中もそれらが上に乗り、
   リロードボタン(.fvErrorReload)を押せなかった。
   1600 は上記より前面・設定シートのバックドロップ(9999=モーダル層)より背面。
   [対で必要] タップがバー/クラスタのトグルへ流れる件は、エラー画面が .fvVideoView の子で
   click が親まで伝播するため z-index では止まらない。JS 側(onPlayerTap の isErrorShown
   早期return)で止めている。
   ========================================================================== */
body.fmsLandscapeActive div.fvVideoView > div.fvErrorView {
  z-index: 1600 !important;
}