/* スマホの殻。**3つのレイアウトツールの共有部分。**
   正本は ~/Documents/claude/_shared/layout-kit/。直すときは正本を直して sync.sh を流すこと。
   机の画面は「左に棚・中に盤面・右に検査」の3列。幅の狭い画面ではこれが積み重なって、
   棚と盤面が同時に出ないため、掴んで運ぶことも、検査を見ながら直すこともできない。
   ここでは**1画面に1つだけ**出し、下のタブで入れ替える。
   中身は机の画面と同じ要素をそのまま使う（別画面を作ると、片方だけ古くなる）。 */

:root{ --mob-tab-h:56px; --mob-top-h:44px; }

/* **display を指定した要素には hidden 属性が効かない。**
   スマホの部品は display:flex / grid で組んであるので、ここで効かせ直す。 */
#mobTabs[hidden], #mobBack[hidden], #mobSheet[hidden], #mobHand[hidden],
#mobPad[hidden], #mobRun[hidden], #mobSit[hidden], .mob-menu[hidden],
#mobSel[hidden]{display:none !important}

/* ---------- 机の画面では何も出さない ---------- */
.mob-menu{display:none}

/* ================= ここから下はスマホだけ ================= */
html.mob, html.mob body{height:100%;overflow:hidden;overscroll-behavior:none}
html.mob body{
  /* iPhone の下の帯（ホームバー）にタブが潜らないように */
  padding-bottom:env(safe-area-inset-bottom);
}

/* ---------- 上部バー。1段に畳む ----------
   **flex の子は既定では中身より小さくならない（min-width:auto）。**
   .tb-left に min-width:0 が無いと、中身の幅がそのまま押し通って、
   右端のハンバーガーが画面の外へ出る。幅375pxで余りが4pxしかなく、
   実機の書体（本文フォントの読み込み前は Hiragino）では溢れて**メニューが消えていた**。 */
html.mob #topbar{
  height:var(--mob-top-h);flex-wrap:nowrap;gap:8px;padding:0 8px 0 12px;
  overflow:hidden;
}
html.mob .tb-right{display:none}
html.mob .tb-left{flex:1 1 auto;min-width:0;overflow:hidden}
html.mob .brand{
  font-size:12px;letter-spacing:.04em;flex:0 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
html.mob .floor-tabs{flex:0 0 auto}
html.mob .plan-name{
  flex:1 1 40px;min-width:0;width:auto;font-size:16px;   /* 16px 未満は iOS が勝手に拡大する */
}
html.mob .where{display:none}
html.mob .mob-menu{
  margin-left:auto;
  display:flex;flex-direction:column;justify-content:center;gap:4px;
  width:38px;height:32px;padding:0 9px;flex:0 0 auto;
  background:none;border:1px solid rgba(255,255,255,.28);border-radius:9px;cursor:pointer;
}
html.mob .mob-menu span{display:block;height:1.5px;background:#EDECE6;border-radius:1px}

/* ---------- 本体。盤面だけが全面に出る ---------- */
html.mob #layout{
  position:fixed;left:0;right:0;top:var(--mob-top-h);
  bottom:calc(var(--mob-tab-h) + env(safe-area-inset-bottom));
  display:block;height:auto;
}
html.mob #canvasWrap{position:absolute;inset:0;height:auto;min-height:0}

/* ---------- 棚と検査は、下から出るシート ---------- */
html.mob #palette, html.mob #side{
  position:fixed;left:0;right:0;
  bottom:calc(var(--mob-tab-h) + env(safe-area-inset-bottom));
  height:min(66vh, 560px);
  max-height:none;display:block;
  border:none;border-top:1px solid var(--rule);
  border-radius:18px 18px 0 0;
  box-shadow:0 -14px 40px rgba(20,22,26,.22);
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  transform:translateY(calc(100% + 40px));
  transition:transform .26s cubic-bezier(.22,.9,.3,1);
  z-index:52;padding:12px 14px 28px;
}
html.mob #palette.mob-open, html.mob #side.mob-open{transform:none}
html.mob #sideScroll{overflow:visible}
html.mob .pal-rows{display:grid;grid-template-columns:1fr 1fr;gap:6px}
html.mob .pal{margin-bottom:0;padding:8px;min-height:56px}   /* 指で押せる大きさ */
html.mob .pal .thumb{width:54px;height:44px}
html.mob .pal-top{background:var(--paper-2);padding-top:4px}
html.mob .pal-search{font-size:16px;padding:8px 10px}
html.mob .gchip{padding:6px 11px;font-size:12px}

/* シートの後ろの暗幕 */
#mobBack{
  position:fixed;inset:0;z-index:51;background:rgba(20,22,26,.34);
  opacity:0;transition:opacity .22s;
}
#mobBack.mob-open{opacity:1}

/* ---------- 下のタブ ---------- */
#mobTabs{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  height:calc(var(--mob-tab-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--ink);border-top:1px solid rgba(255,255,255,.10);
}
#mobTabs button{
  background:none;border:none;color:#8E938F;font-size:12px;letter-spacing:.04em;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
#mobTabs button b{font-weight:500}
#mobTabs button.on{color:#F5F4F0}
#mobTabs button.on b{position:relative}
#mobTabs button.on b::after{
  content:'';position:absolute;left:50%;transform:translateX(-50%);
  bottom:-8px;width:20px;height:2px;background:var(--red);border-radius:2px;
}

/* ---------- メニューのシート ---------- */
#mobSheet{
  position:fixed;left:0;right:0;
  bottom:calc(var(--mob-tab-h) + env(safe-area-inset-bottom));
  z-index:62;background:var(--paper-2);
  border-radius:18px 18px 0 0;box-shadow:0 -14px 40px rgba(20,22,26,.26);
  max-height:70vh;overflow-y:auto;padding:0 14px 24px;
  transform:translateY(calc(100% + 40px));transition:transform .26s cubic-bezier(.22,.9,.3,1);
}
#mobSheet.mob-open{transform:none}
.mob-sheet-bar{
  position:sticky;top:0;background:var(--paper-2);z-index:1;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0 10px;border-bottom:1px solid var(--rule);margin-bottom:12px;
}
.mob-sheet-bar b{font-size:13px;letter-spacing:.06em}
.mob-sheet-bar button{
  background:none;border:1px solid var(--rule);color:var(--ink-2);
  font-size:12px;padding:5px 12px;border-radius:8px;cursor:pointer;
}
#mobSheetBody{display:flex;flex-wrap:wrap;gap:8px}
/* 下敷き（現状／たたき台／から）を先頭へ。
   開いた先の一番上が、灰色の「元に戻す／やり直す」だと、何もできない画面に見える。 */
#mobSheetBody .tb-seg-t{order:-2}
#mobSheetBody #btnAsis, #mobSheetBody #btnDraft, #mobSheetBody #btnClear{order:-1}
#mobSheetBody .mob-grp{
  width:100%;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  color:var(--ink-3);margin:8px 0 -2px;
}
#mobSheetBody .tb, #mobSheetBody .tb.file{
  flex:1 1 calc(50% - 4px);min-height:46px;justify-content:center;
  border:1px solid var(--rule);border-radius:10px;background:#fff;color:var(--ink);
  font-size:13px;padding:10px;
}
#mobSheetBody .tb-seg{display:contents}
/* 「下敷き」は見出しとして残す。消すと、現状／たたき台／から が何なのか読めない */
#mobSheetBody .tb-seg-t{
  display:block;width:100%;border:none;padding:10px 0 0;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--ink-3);
}
#mobSheetBody .tb-sep{display:none}

/* ---------- 「置く場所をタップ」の帯 ---------- */
#mobHand{
  position:fixed;left:10px;right:10px;
  bottom:calc(var(--mob-tab-h) + env(safe-area-inset-bottom) + 12px);
  z-index:58;display:flex;align-items:center;gap:8px;
  background:var(--ink);color:#F5F4F0;border-radius:12px;
  padding:11px 12px;font-size:12.5px;
  box-shadow:0 10px 28px rgba(20,22,26,.3);
}
#mobHand b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#mobHand span{color:#B9BCB8;flex:1 1 auto;white-space:nowrap}
#mobHand button{
  background:none;border:1px solid rgba(255,255,255,.3);color:#EDECE6;
  border-radius:8px;font-size:12px;padding:5px 11px;flex:0 0 auto;cursor:pointer;
}

/* ---------- 選んだものの帯 ----------
   選択中パネルは検査のシートの中にある。**選んでも画面には出てこない**ので、
   選んだことと、そこへの入口を、盤面の下に出しておく。 */
#mobSel{
  position:fixed;left:10px;right:10px;
  bottom:calc(var(--mob-tab-h) + env(safe-area-inset-bottom) + 12px);
  z-index:63;display:flex;align-items:center;gap:8px;
  background:#fff;border:1px solid var(--rule);border-radius:12px;
  padding:9px 10px;font-size:12.5px;
  box-shadow:0 10px 28px rgba(20,22,26,.18);
}
#mobSel b{
  font-weight:500;flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#mobSel button{
  flex:0 0 auto;border:1px solid var(--rule);background:#fff;color:var(--ink-2);
  border-radius:9px;font-size:12px;padding:7px 12px;cursor:pointer;
}
#mobSel #mobSelEdit{background:var(--ink);border-color:var(--ink);color:#F5F4F0}

/* ---------- 3D。タブで開くと全面 ---------- */
/* 3Dは body 直下へ移してある（mobile.js）。畳んだ状態は使わないので出さない */
html.mob #view3d{display:none}
html.mob #view3d.expanded{
  display:flex;
  top:var(--mob-top-h);
  bottom:calc(var(--mob-tab-h) + env(safe-area-inset-bottom));height:auto;
  box-shadow:none;
}
html.mob #three{touch-action:none}
/* キーボードが無いので、キーの表と「ダブルクリックで歩けます」は出さない。
   **!important が要る。**本体の #view3d.walking #keyHud のほうが詳しく、そちらが勝つ。 */
html.mob #keyHud{display:none !important}
html.mob #lockHint{display:none !important}
html.mob .v3-foot{display:none}
/* 道具立ては折り返さず、横に流して指で送る（折り返すと画面の1/3を食う） */
html.mob .v3-head{
  flex-wrap:nowrap;gap:6px;padding:7px 10px;
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
html.mob .v3-head::-webkit-scrollbar{display:none}
html.mob .v3-title{display:none}
html.mob .v3-tabs{flex-wrap:nowrap;gap:6px}
html.mob .v3, html.mob .v3-tog{min-height:36px;font-size:11.5px;white-space:nowrap;flex:0 0 auto}
html.mob #placeHint{font-size:11px;padding:6px 10px}
html.mob #placeHint .lh-long{display:none}
html.mob #miniMap{width:128px;height:108px}

/* ---------- 歩くための画面上の操作 ---------- */
/* キーボードが無いので、左の親指で進み、画面を払って見まわす。 */
#mobPad{
  position:fixed;z-index:57;left:16px;
  bottom:calc(var(--mob-tab-h) + env(safe-area-inset-bottom) + 22px);
  width:132px;height:132px;border-radius:50%;
  background:rgba(20,22,26,.30);border:1px solid rgba(255,255,255,.26);
  touch-action:none;
}
#mobPad i{
  position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;
  border-radius:50%;background:rgba(245,244,240,.86);
  box-shadow:0 4px 14px rgba(0,0,0,.3);
  transition:transform .10s;
}
#mobRun{
  position:fixed;z-index:57;right:16px;
  bottom:calc(var(--mob-tab-h) + env(safe-area-inset-bottom) + 22px);
  width:64px;height:64px;border-radius:50%;
  background:rgba(20,22,26,.30);border:1px solid rgba(255,255,255,.26);
  color:#F5F4F0;font-size:11px;letter-spacing:.06em;
}
#mobRun.on{background:var(--red);border-color:var(--red)}
#mobSit{
  position:fixed;z-index:57;right:16px;
  bottom:calc(var(--mob-tab-h) + env(safe-area-inset-bottom) + 98px);
  width:64px;height:64px;border-radius:50%;
  background:rgba(20,22,26,.30);border:1px solid rgba(255,255,255,.26);
  color:#F5F4F0;font-size:11px;letter-spacing:.06em;
}
#mobSit[disabled]{opacity:.35}

/* ---------- 盤面の下の帯 ---------- */
/* 盤面の道具は、下に出る帯（選んだもの／置く場所）とぶつからない高さへ上げる */
html.mob #canvasHud{bottom:70px}
html.mob .hud{min-height:38px;font-size:12px}
html.mob #sumBar{font-size:11px;padding:6px 10px;gap:10px;overflow-x:auto}
html.mob .plan-tools{gap:6px}
html.mob .plan-tools .tb{min-height:38px}
/* 選択中パネルの数値欄も 16px 未満にしない（勝手に拡大される） */
html.mob input[type="number"], html.mob input[type="text"], html.mob select{font-size:16px}
html.mob .f-slider input[type="range"]{height:28px}

/* ---------- 重なりの順 ----------
   3Dは拡大すると z-index:60 で全面に出る（本体のCSS）。
   スマホの部品はその上に載せないと、3Dの下に隠れて押せない。 */
html.mob #palette, html.mob #side{z-index:66}
#mobBack{z-index:65}
#mobPad, #mobRun, #mobSit{z-index:62}
#mobHand{z-index:63}
#mobSheet{z-index:68}
#mobTabs{z-index:70}