/*
 * ===============================================
 *
 * RAMAA Engine (Real-time Animated Media Application Apparatus)
 * by Gounbeee 2021 - 2026
 *
 * License ： CC BY-NC-SA (Attribution-NonCommercial-ShareAlike)
 *
 * このプロジェクトは、Gounbeeeから作成され、個人的な利用、改変が可能です。
 * 改変時、このライセンス表記を残す義務があり、改変後の作成物が本ソフトと同じライセンスを継承します。
 *
 * ===============================================
 */

/* =====================================================================
   RAMAA モバイル専用レイアウト（案C）
   ---------------------------------------------------------------------
   すべて .is-mobile（<html> / <body> に付与）配下でのみ有効。
   デスクトップ表示には一切影響しない。

   構成：
     - is-mobile-edit : 編集モード（下部ツールバー＋ボトムシート）
     - is-mobile-view : 閲覧モード（キャンバスのスケールのみ）

   ボトムシート化する対象：
     - #attribManager_wrapper   （Attributes）
     - #layersManager_wrapper   （Layers）
     - .ly_animManager          （Animation Editor / *_animBox）
     - #rm_mobile_create_sheet  （モバイル用「追加」シート・JSで生成）

   JS は Manager_Mobile.mjs。要素の生成・開閉検知はそちらが担当する。
   ===================================================================== */


/* ------------------------------------------------------------------ */
/* 0. 基本                                                             */
/* ------------------------------------------------------------------ */

.is-mobile,
.is-mobile body {
  overscroll-behavior: none;             /* 引っ張り更新・バウンス抑制 */
  -webkit-text-size-adjust: 100%;
}

/* 編集操作をブラウザのスクロール／ズームに奪われないように */
.is-mobile-edit #workarea,
.is-mobile-edit #canvas_dom {
  touch-action: none;
}

/* Drawing(BITMAP) は SVG <image> が実体（iOS の foreignObject 再描画バグ回避）。
   ドラッグがブラウザのスクロール扱いにならないよう明示的に none を張る（案件7）。 */
.is-mobile-edit #canvas_dom image {
  touch-action: none;
}

/* ------------------------------------------------------------------ */
/* 0-b. 編集面のスクロールロック（案件1）                               */
/*    以前はドキュメント全体が innerHeight より数十px高く、             */
/*    #workarea / #canvas_dom 以外（Play周辺の余白など）をドラッグすると */
/*    ページ自体が縦スクロールしてしまい、フッター(タイムライン)と       */
/*    下部ツールバーの間に隙間が空いてUIが崩れていた。                   */
/*    編集面をビューポート高にクランプし overflow:hidden で「スクロール   */
/*    できる余地」を無くすことで、ドラッグしても動かないようにする。     */
/*    （ボトムシート/ドロップダウンは position:fixed なので影響なし）    */
/* ------------------------------------------------------------------ */

/* --rm-vw / --rm-vh / --rm-vb は Manager_Mobile.trackViewport() が
   visualViewport の実寸を <html> へ流し込む。JS が動く前や非対応環境では
   フォールバック（100dvh → 100vh）が効く。

   セレクタは html.is-mobile を使う。以前の `html:has(body.is-mobile-edit)` は
   :has() 非対応（iOS Safari 15.4 未満）でルールごと落ち、100vh すら効かなかった。 */

html.is-mobile,
body.is-mobile-edit {
  width: 100vw;
  width: var(--rm-vw, 100vw);
  height: 100vh;
  height: 100dvh;
  height: var(--rm-vh, 100dvh);
  max-height: 100vh;
  max-height: 100dvh;
  max-height: var(--rm-vh, 100dvh);
  overflow: hidden;
}

body.is-mobile-edit #allArea,
body.is-mobile-edit #workarea {
  width: 100%;
  width: var(--rm-vw, 100%);
  height: 100vh;
  height: 100dvh;
  height: var(--rm-vh, 100dvh);
  max-height: 100vh;
  max-height: 100dvh;
  max-height: var(--rm-vh, 100dvh);
  overflow: hidden;
}


/* ------------------------------------------------------------------ */
/* 1. メニューバー（上部）                                              */
/*    横スクロール可能なコンパクトバーにする                            */
/* ------------------------------------------------------------------ */

.is-mobile-edit .ly_menu_wrapper {
  left: 0;
  width: 100%;
  height: 3rem;
  align-items: center;
  overflow-x: hidden;                    /* アイコン化で収まるため横スクロール不要 */
  overflow-y: hidden;
  white-space: nowrap;
  flex-wrap: nowrap;
  padding-left: 3.25rem;                 /* 左上ロゴ分の余白 */
  padding-right: 0.75rem;
  box-sizing: border-box;
  /* メニューボタンを等間隔に配置する（案件9） */
  justify-content: space-between;
  /* オブジェクトのBoundingBox(TransformBox: z-index 8)が上部メニューの
     「上」に描画されてしまう不具合の対策。menubar.css の @media(max-width:35em)
     が .ly_menu_wrapper を z-index:2 に下げており、BoundingBox(8)より背面に
     なっていた。デスクトップと同じ z-index:10 に戻して BoundingBox より前面へ。 */
  z-index: 10;
}

/* メニューバー(#menu_wrapper)を z-index:10 に上げた副作用で、その不透明背景
   (#5a4d3e)が左上ロゴ(#user_logo, base.css @media で z-index:5)を覆って
   隠してしまう。ロゴはメニューバーより前面が本来の状態（元は logo:5 > bar:2）
   なので、メニュー(10)より上へ戻す。ドロップダウン(8000)等よりは背面のまま。
   重なり順：ロゴ(11) > メニューバー(10) > BoundingBox(8)。

   併せてロゴを「使える縦空間の中央」に配置する。base.css の height:32px が
   幅560px超（is-mobile-edit は有効だが @media(max-width:35em) は非適用）の域で
   残り、48px のバー内で上寄せ（下に16px余白）になっていた。コンテナをバー高
   (3rem)いっぱいにし、flex で画像を縦中央に置くことで、どの幅でも中央になる。 */
.is-mobile-edit .user_logo {
  z-index: 11;
  height: 3rem;                          /* バー(3rem)と同じ高さに揃える */
  display: flex;
  align-items: center;                   /* 使える縦空間の中央へ */
  justify-content: center;
}

/* #menu_create は Back と Create の2ボタンを内包する“束”になっていて、
   そのままだと1つの要素として扱われ等間隔配置が崩れる。display:contents で
   中の Back / Create を親フレックスへ直接参加させ、5アイコンを均等に並べる。 */
.is-mobile-edit #menu_create { display: contents; }

.is-mobile-edit .ly_menu_wrapper::-webkit-scrollbar { height: 0; }

/* 各メニューボタンのタップ領域を広げる */
.is-mobile-edit .bl_menu_btn,
.is-mobile-edit .ly_menu_dispAttrBox,
.is-mobile-edit .bl_menu_dispAttrBox {
  padding: 0.55rem 0.7rem;
  font-size: 1.05rem;
  line-height: 1.2;
}

/* メニュー内のドロップダウン項目も指で押しやすく */
.is-mobile-edit .bl_menu_item,
.is-mobile-edit .ly_menu_item {
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
  font-size: 1.05rem;
}

/* 右側（Layers / Attributes ラベル）はツールバーへ移すので隠す */
.is-mobile-edit .bl_menu_r { display: none; }


/* ------------------------------------------------------------------ */
/* 1-b. 上部メニューのアイコン化                                        */
/*     テキストボタンは横幅を食い、画面右へはみ出して選択できなかった。 */
/*     下部ツールバーと同様にアイコン化し、1行に収める。               */
/* ------------------------------------------------------------------ */

.is-mobile-edit #menu_back_btn,
.is-mobile-edit #menu_create_btn,
.is-mobile-edit #menu_edit_btn,
.is-mobile-edit #menu_source_btn,
.is-mobile-edit #menu_timeline_btn {
  font-size: 0;                          /* 元のテキストラベルを隠す */
  padding: 0.35rem 0.5rem;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2rem;
  line-height: 1;
}

/* 各ボタンのアイコン（::before で差し込む） */
.is-mobile-edit #menu_create_btn::before,
.is-mobile-edit #menu_edit_btn::before,
.is-mobile-edit #menu_source_btn::before,
.is-mobile-edit #menu_timeline_btn::before {
  font-size: 1.5rem;
  line-height: 1;
  color: #e8b98a;
}

.is-mobile-edit #menu_back_btn::before     { content: none; }
.is-mobile-edit #menu_back_btn .menu_back_icon {
  width: 1.45rem;
  height: 1.45rem;
  color: #e8b98a;
}
.is-mobile-edit #menu_create_btn::before   { content: "\FF0B"; }   /* ＋ 作成   */
.is-mobile-edit #menu_edit_btn::before     { content: "\270E"; }   /* ✎ 編集    */
.is-mobile-edit #menu_source_btn::before   { content: "\21F3"; }   /* ⇳ 入出力  */

/* タイム（時計）だけは絵文字(⏱)が環境によりカラー表示され浮いていたため、
   単色・シンプルな時計アイコン(SVGマスク)へ置き換える（案件5）。
   マスクなので background-color(#e8b98a) 一色で描画される。 */
.is-mobile-edit #menu_timeline_btn::before {
  content: "";
  display: inline-block;
  width: 1.45rem;
  height: 1.45rem;
  background-color: #e8b98a;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5 L12 12 L15 14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5 L12 12 L15 14'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 等間隔配置（justify-content: space-between）に任せるので、
   個別マージンは付けない（案件9）。 */
.is-mobile-edit .ly_menu_wrapper > .ly_menu,
.is-mobile-edit #menu_back,
.is-mobile-edit #menu_create_btn { margin-left: 0; }


/* ------------------------------------------------------------------ */
/* 1-c. ドロップダウンを Canvas より前面へ                              */
/*     従来はメニューバーの overflow / 低い z-index の stacking に      */
/*     閉じ込められ、開いても Canvas の下に隠れて選べなかった。         */
/*     position:fixed＋高 z-index でバーの外へ出し、確実に前面化する。  */
/* ------------------------------------------------------------------ */

.is-mobile-edit .ly_menu_list {
  position: fixed;
  top: 3rem;                             /* メニューバー(3rem)の直下 */
  left: 0.5rem;
  right: auto;
  z-index: 8000;                         /* Canvas(1)より前面・backdrop(9000)より背面 */
  max-height: calc(100vh - 3rem - 4rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
  min-width: 12rem;
}

/* デスクトップ用の left:100px を無効化して画面内に収める */
.is-mobile-edit .ly_menu_list_create { left: 0.5rem; }


/* ------------------------------------------------------------------ */
/* 2. タイムライン（フッター）＝常時表示                                 */
/*    以前は折りたたみドロワーだったが、開閉クラスが                     */
/*    body(is-mobile-edit) と html(rm-timeline-open) で食い違い、        */
/*    セレクタ .is-mobile-edit.rm-timeline-open が永久に一致せず          */
/*    transform で画面外に隠れたまま＝「スライダーが見えない」原因。      */
/*    下部ツールバーの直上に常時表示する。                              */
/* ------------------------------------------------------------------ */

.is-mobile-edit .ly_footer_wrapper {
  /* footer.css の既定は height:auto ＋ min-height:8em。min-height も上書き
     しないとモバイルでフッターが 8em まで伸びてキャンバスを圧迫する。 */
  height: auto;
  min-height: 4.5rem;
  max-height: 40vh;
  /* 下部ツールバー（3.5rem＋セーフエリア）の上に載せる。
     さらに下部 URL バー（--rm-vb）ぶんを持ち上げる。 */
  bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px) + var(--rm-vb, 0px));
  /* right:0 だとレイアウト幅（可視より広い）に合わせて帯が右へはみ出す */
  right: auto;
  width: 100%;
  width: var(--rm-vw, 100%);
  box-sizing: border-box;
  padding-left: 0.5rem;
  z-index: 60;
  background-color: #5a4d3e;
  transform: none;                       /* 常時表示（隠さない） */
}


/* ------------------------------------------------------------------ */
/* 3. 下部ツールバー（JSで生成: #rm_mobile_toolbar）                    */
/* ------------------------------------------------------------------ */

#rm_mobile_toolbar {
  display: none;                         /* is-mobile-edit でのみ表示 */
}

.is-mobile-edit #rm_mobile_toolbar {
  display: flex;
  position: fixed;
  left: 0;
  right: auto;
  width: 100%;
  width: var(--rm-vw, 100%);
  /* --rm-vb = 下部 URL バーの高さ。0 でないときはその上へ持ち上げる。 */
  bottom: var(--rm-vb, 0px);
  height: 3.5rem;
  /* ホームインジケータぶんは高さを足して中身が潰れないようにする */
  height: calc(3.5rem + env(safe-area-inset-bottom, 0px));
  z-index: 100;
  background-color: #3c332a;
  border-top: 1px solid #6b6152;
  align-items: stretch;
  justify-content: space-around;
  padding:
    0
    env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px)
    env(safe-area-inset-left, 0px);
  box-sizing: border-box;
}

.rm_mtb_btn {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 44px;
  border: none;
  background: transparent;
  color: #e8d9c5;
  font-family: 'nsjp';
  font-size: 0.62rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.rm_mtb_btn:active { background-color: #4d4236; }

.rm_mtb_btn .rm_mtb_ico {
  font-size: 1.25rem;
  line-height: 1;
}

.rm_mtb_btn.is-active { color: #f0b070; }

/* Attr（属性）ボタンのアイコンを単色・シンプルに（案件2）。
   既定の絵文字 ⚙ は環境によりカラー表示され、他のツールバーアイコン
   （↶ ↷ ▤ など単色）から浮いていた。CSSマスクの単色ギア(SVG)へ置換する。
   background-color: currentColor によりボタンの文字色を継承するため、
   通常(#e8d9c5)／アクティブ(is-active: #f0b070)の色変化もそのまま追従する。 */
.rm_mtb_btn[data-key="attr"] .rm_mtb_ico {
  font-size: 0;                          /* 元の絵文字を隠す */
}
.rm_mtb_btn[data-key="attr"] .rm_mtb_ico::before {
  content: "";
  display: inline-block;
  width: 1.3rem;
  height: 1.3rem;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 主要ボタン（追加）を強調 */
.rm_mtb_btn.rm_mtb_primary .rm_mtb_ico {
  color: #ffffff;
  background-color: #ed91b0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 言語切替ボタン（En / Jp / Kr）＝上部から移設。ラベル無しでコードを表示 */
.rm_mtb_lang { border-left: 1px solid #514639; }
.rm_mtb_lang + .rm_mtb_lang { border-left: none; }
.rm_mtb_lang .rm_mtb_ico {
  font-size: 0.98rem;
  font-weight: bold;
}

/* 言語切替は下部ツールバーへ移設したので、上部の詰まった3連ボタンは隠す */
.is-mobile-edit #menu_lang { display: none; }


/* ------------------------------------------------------------------ */
/* 4. ボトムシート共通                                                  */
/* ------------------------------------------------------------------ */

/* バックドロップ（JSで生成: #rm_mobile_backdrop） */
#rm_mobile_backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9000;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.is-mobile-edit #rm_mobile_backdrop.is-visible {
  display: block;
  opacity: 1;
}

/* シート化する各パネル共通の位置・スライド */
.is-mobile-edit #attribManager_wrapper,
.is-mobile-edit #layersManager_wrapper,
.is-mobile-edit .ly_animManager,
.is-mobile-edit #rm_mobile_create_sheet {
  position: fixed !important;
  left: 0 !important;
  /* right:0 と width:100% を併用すると、iOS Safari で広がったレイアウト
     ビューポート幅（可視より広い）が採用され右端が画面外へ出る。
     可視幅（--rm-vw）を正として left 起点で幅を決める。 */
  right: auto !important;
  top: auto !important;
  bottom: var(--rm-vb, 0px) !important;
  width: 100% !important;
  width: var(--rm-vw, 100%) !important;
  max-width: 100vw;
  height: auto !important;
  max-height: 72vh;
  margin: 0 !important;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 9500 !important;
  transform: translateY(100%);
  transition: transform 0.28s ease;
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  box-sizing: border-box;
}

/* JS が付与する開状態 */
.is-mobile-edit #attribManager_wrapper.rm-sheet-visible,
.is-mobile-edit #layersManager_wrapper.rm-sheet-visible,
.is-mobile-edit .ly_animManager.rm-sheet-visible,
.is-mobile-edit #rm_mobile_create_sheet.rm-sheet-visible {
  transform: translateY(0);
}

/* シート上部のグラバー（JSで各シートに挿入: .rm_sheet_grab） */
.rm_sheet_grab {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.6rem;
  background: inherit;
}
.rm_sheet_grab::before {
  content: '';
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
}


/* ------------------------------------------------------------------ */
/* 5. パネル個別の微調整                                                */
/* ------------------------------------------------------------------ */

/* Attributes：右パネル固定幅を解除しシート幅に合わせる */
.is-mobile-edit .ly_attribManager_wrapper {
  right: 0;
  top: auto;
}

/* Anim エディタ：ドラッグ移動を無効化しシートに固定 */
.is-mobile-edit .ly_animManager {
  min-height: 40vh;
}

/* Animのstickyヘッダーはグラバーの下へ */
.is-mobile-edit .ly_animManager .bl_animEditor_header { top: 1.6rem; }

/* ------------------------------------------------------------------ */
/* 5-b. Animation Editor のモバイル用ヘッダー                            */
/*      ヘッダーは3行構成（タイトル行／Fold＋CLOSE行／ツール行）。       */
/*      390px 幅でも全ボタンが収まるようツール行は折り返し、             */
/*      タップ領域は指のサイズに合わせる。                              */
/* ------------------------------------------------------------------ */

.is-mobile-edit .bl_animEditor_header {
  gap: 0.35rem;
  padding: 0.45rem 0.6rem 0.55rem;
}

.is-mobile-edit .bl_animEditor_headerRow,
.is-mobile-edit .bl_animEditor_toolRow {
  gap: 0.35rem;
}

/* 1行目：タイトル（幅が足りないぶんは省略記号で詰める） */
.is-mobile-edit .bl_animEditor_title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.72rem;
}

/* モード切替は390px幅でも1行に収まるよう小さめに（折り返すと2行になる） */
.is-mobile-edit .bl_animEditor_modeGroup {
  flex: 0 0 auto;
  margin-right: 0;
}

.is-mobile-edit .bl_animEditor_modeBtn {
  font-size: 0.62rem;
  padding: 0.45rem 0.4rem;
  line-height: 1.1;
}

/* 操作ボタン群（指で押しやすい高さへ） */
.is-mobile-edit .bl_animEditor_btn {
  min-height: 2.3rem;
  padding: 0.3rem 0.55rem;
  font-size: 0.78rem;
  flex: 0 0 auto;
}

/* Fold/Unfold はアイコンのみ（テキストはJS側で ▾ / ▴ に切替） */
.is-mobile-edit .bl_animEditor_foldBtn {
  min-width: 2.6rem;
  padding: 0.3rem 0.4rem;
  font-size: 1rem;
  line-height: 1;
}

.is-mobile-edit .bl_animEditor_easelabel {
  align-self: center;
  font-size: 0.68rem;
}

.is-mobile-edit .bl_animEditor_ease {
  min-height: 2.3rem;
  font-size: 0.85rem;
  max-width: 46vw;
}

/* ------------------------------------------------------------------ */
/* 5-c. フローティング Value Inspector                                  */
/*      Anim エディタはボトムシート化されるため、Inspector は画面上部   */
/*      （メニューバー 3rem の直下）へ横幅いっぱいで固定する。          */
/* ------------------------------------------------------------------ */

.is-mobile-edit .bl_animEditor_inspector {
  top: calc(3rem + 0.4rem);
  left: 0.5rem;
  /* right 指定はレイアウトビューポート基準になり iOS Safari で右へはみ出す。
     可視幅（--rm-vw）から左右マージンを引いた幅を明示する。 */
  right: auto;
  width: calc(var(--rm-vw, 100vw) - 1rem);
  transform: none;
  max-width: none;
  max-height: 34vh;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  font-size: 0.78rem;
}

.is-mobile-edit .bl_animEditor_inspInput {
  min-height: 2rem;
  font-size: 0.85rem;
}

.is-mobile-edit .bl_animEditor_nudgeBtn {
  min-height: 2rem;
  min-width: 2.1rem;
  font-size: 0.8rem;
}


/* ------------------------------------------------------------------ */
/* 6. モバイル用「追加」シートの中身                                     */
/* ------------------------------------------------------------------ */

#rm_mobile_create_sheet {
  background-color: #6f3b23;
  color: #fff;
  font-family: 'nsjp';
}

.rm_create_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  padding: 0.4rem 0.9rem 0.9rem;
}

.rm_create_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.9rem 0.4rem;
  min-height: 4.6rem;
  border: none;
  border-radius: 12px;
  background-color: #9c5f3f;
  color: #fff;
  font-family: 'nsjp';
  font-size: 0.82rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rm_create_item:active { background-color: #b5714c; }
.rm_create_item .rm_create_ico { font-size: 1.5rem; line-height: 1; }

.rm_sheet_title {
  padding: 0.2rem 1rem 0.4rem;
  font-size: 1rem;
  font-weight: bold;
  color: #f0d9c4;
}


/* ------------------------------------------------------------------ */
/* 7. モーダル（Link Text / Delete All / About）のモバイル最適化        */
/*    既定は <h1> がブラウザ標準の約2em＋大きなマージンで、モバイルでは */
/*    文字が大きすぎて読みづらかった。カード状に収めて縮小する。        */
/* ------------------------------------------------------------------ */

.is-mobile .modal {
  padding: 1rem;
  font-size: 14px;
  box-sizing: border-box;
}

.is-mobile .modal-item {
  height: auto;
  max-width: 92vw;
  margin: auto;
  background: #6f3b23;
  border-radius: 14px;
  padding: 1.2rem 1.1rem calc(1.2rem + env(safe-area-inset-bottom));
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  text-align: center;
}

.is-mobile .modal h1 {
  font-size: 1.05rem;
  line-height: 1.45;
  margin: 0 0 0.8rem 0;
  color: #f0d9c4;
}

.is-mobile .modal_btn_yesorno {
  font-size: 1rem;
  width: auto;
  min-width: 5.5rem;
  height: auto;
  padding: 0.6rem 1rem;
  margin: 0.5rem 0.4rem 0 0.4rem;
}

/* About モーダルの本文（左寄せの説明文）は左揃えのまま読みやすく */
.is-mobile .modal .modal_box_about {
  text-align: left;
  font-size: 0.95rem;
  line-height: 1.6;
}


/* ------------------------------------------------------------------ */
/* 8. モバイル用「Link Text（リンク作成）」モード                       */
/*    Shift が使えないモバイルで複数 Text を選択できるようにする         */
/*    確定バー（JSで生成: #rm_link_bar）                                */
/* ------------------------------------------------------------------ */

/* 既定は非表示。リンクモード中だけ JS が inline で display:flex にして表示する。 */
#rm_link_bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  top: 3rem;                             /* メニューバーの直下 */
  z-index: 8200;                         /* ドロップダウン(8000)より前面 */
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  background: #7a3f13;
  border-bottom: 1px solid #a5673c;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
}

#rm_link_bar .rm_link_msg {
  flex: 1 1 auto;
  color: #ffe9d5;
  font-family: 'nsjp';
  font-size: 0.86rem;
  line-height: 1.3;
}

#rm_link_bar .rm_link_count { font-weight: bold; color: #ffd27f; }

#rm_link_bar button {
  flex: 0 0 auto;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 0.9rem;
  font-family: 'nsjp';
  font-size: 0.9rem;
  font-weight: bold;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#rm_link_bar .rm_link_create {
  background: #ed91b0;
  color: #fff;
}
#rm_link_bar .rm_link_create:disabled {
  background: #8a6a58;
  color: #cbb9ab;
  cursor: default;
}
#rm_link_bar .rm_link_cancel {
  background: transparent;
  color: #ffd9c4;
  border: 1px solid #c58a5f;
}


/* ------------------------------------------------------------------ */
/* 9. 閲覧モード（is-mobile-view）                                       */
/*    編集用チャンクは出さない（下部ツールバー等）                       */
/* ------------------------------------------------------------------ */

.is-mobile-view #rm_mobile_toolbar { display: none; }
.is-mobile-view #rm_link_bar { display: none; }


/* ------------------------------------------------------------------ */
/* 10. Drawing（BitmapPad）モバイル最適化（案件6）                       */
/*    ・全画面化して画面内に収める                                       */
/*    ・本体を縦積みにしてキャンバスを全幅・最大化（旧: 横のサイド      */
/*      パネルが幅を食い、実描画キャンバスが狭かった）                   */
/*    ・ツール／ペン／カラー／サイド操作を1トグルで畳める                */
/*    JS 側は BitmapPad.setupMobileUI()（.bl_bmp_mobile 付与＋トグル）。 */
/* ------------------------------------------------------------------ */

/* --- 全画面化（ボトムシート/ツールバーより前面） --- */
.is-mobile .bl_bitmapPad.ly_bitmapPad {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 0;
  z-index: 9700;
}

/* --- タイトルバー（折り返してコンパクトに） --- */
.is-mobile .bl_bmp_titlebar {
  flex-wrap: wrap;
  gap: 5px;
  padding: 6px 8px;
  padding-bottom: calc(6px + 0px);
}
.is-mobile .bl_bmp_title { font-size: 12px; flex: 1 1 auto; }
.is-mobile .bl_bmp_spacer { display: none; }
.is-mobile .bl_bmp_titlebar .bl_bmp_btn { padding: 6px 9px; font-size: 12px; }
.bl_bmp_collapse_toggle { background-color: #4a3b2a; border-color: #6b5638; font-weight: bold; }

/* --- ツールバー／パレットをコンパクトに --- */
.is-mobile .bl_bmp_toolbar { gap: 8px; padding: 6px 8px; }
.is-mobile .bl_bmp_group { padding-right: 8px; gap: 2px; }
.is-mobile .bl_bmp_group_label { font-size: 9px; }
.is-mobile .bl_bmp_tool_btn { width: 32px; height: 32px; font-size: 16px; }
.is-mobile .bl_bmp_step_btn { width: 28px; height: 28px; }
.is-mobile .bl_bmp_palette { padding: 5px 8px; gap: 3px; }
.is-mobile .bl_bmp_palette_cell { width: 20px; height: 20px; }

/* --- 本体を縦積みに（キャンバス全幅） --- */
.is-mobile .bl_bmp_body { flex-direction: column; min-height: 0; }

/* サイドパネル（Size/Shift）を横並びのコンパクトバーに */
.is-mobile .bl_bmp_sidepanel {
  flex-direction: row;
  width: auto;
  flex: 0 0 auto;
  gap: 12px;
  padding: 6px 8px;
  border-right: none;
  border-bottom: 1px solid #5a5142;
  overflow-x: auto;
  overflow-y: hidden;
  align-items: center;
}
.is-mobile .bl_bmp_ctrl_section { padding: 6px; gap: 5px; flex: 0 0 auto; }
.is-mobile .bl_bmp_ctrl_label { font-size: 11px; }
.is-mobile .bl_bmp_ctrl_readout { min-width: 40px; font-size: 11px; }
.is-mobile .bl_bmp_arrow_btn { width: 26px; height: 26px; font-size: 12px; }
.is-mobile .bl_bmp_dpad {
  grid-template-columns: repeat(3, 26px);
  grid-template-rows: repeat(3, 26px);
  gap: 3px;
}

/* キャンバスビューポートを最大化 */
.is-mobile .bl_bmp_canvas_viewport {
  flex: 1 1 auto;
  padding: 10px;
}

/* --- 畳んだ状態：ツール類を隠してキャンバスを最大化 --- */
.is-mobile .bl_bitmapPad.bmp_panels_collapsed .bl_bmp_toolbar,
.is-mobile .bl_bitmapPad.bmp_panels_collapsed .bl_bmp_palette,
.is-mobile .bl_bitmapPad.bmp_panels_collapsed .bl_bmp_sidepanel {
  display: none;
}


/* ------------------------------------------------------------------ */
/* 11. ズーム率のフロート表示（ピンチズーム）                          */
/*                                                                    */
/*    本体のスタイルは workarea.css の .bl_zoomIndicator。             */
/*    モバイルは指の下に隠れやすいので少し大きめ・不透明寄りにする。   */
/*    位置は JS(ui/ZoomIndicator.mjs)が実測値から流し込むので触らない。 */
/* ------------------------------------------------------------------ */
.is-mobile-edit .bl_zoomIndicator {
  padding: 3px 9px;
  font-size: 12px;
  background-color: rgba(58, 51, 43, 0.9);
}