/* mobile-guard.css — スマホで遊ぶWebゲームの土台(原生林ZEROで直してきた物をまとめた。2026-10-13)
 * <link rel="stylesheet" href="mobile-guard.css"> を <head> のいちばん上に。ゲームの CSS はこの後に書く(上書きできる)。
 * 防ぐ物: 2回タップ・つまむでの拡大 / 長押し・ドラッグで字が選ばれる / 長押しのメニュー / 引っぱって画面が動く・更新される /
 *         文字が勝手に大きくなる / 押した時の青い四角 / 100vh がアドレスバーの分ずれる / ノッチに隠れる */

:root {
  /* 本当の画面の大きさ(mobile-guard.js が回転・アドレスバーの出入りのたびに入れ直す)。dvh が使えない古い端末の代わり */
  --app-w: 100vw;
  --app-h: 100vh;
  /* ノッチ・角の丸み・ホームバーの分 */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
}
@supports (height: 100dvh) { :root { --app-h: 100dvh; --app-w: 100dvw; } }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
  overflow: hidden;                 /* ページ自体はスクロールしない(ゲームの画面は固定) */
  overscroll-behavior: none;        /* 引っぱって更新・ゴムのように動く を止める */
  touch-action: pan-x pan-y;        /* つまむ拡大・2回タップ拡大をしない(スクロールの欄は動かせる) */
  -webkit-text-size-adjust: 100%;   /* 横にした時に 字が勝手に大きくならない */
  text-size-adjust: 100%;
  -webkit-user-select: none; user-select: none;   /* 字を選べない */
  -webkit-touch-callout: none;                     /* 長押しのメニュー(画像の保存など)を出さない */
}

/* 入力欄だけは 選べる・長押しできる。16px より小さいと iOS が 入力の時に画面を拡大する */
input, textarea, select, [contenteditable] {
  -webkit-user-select: text; user-select: text; -webkit-touch-callout: default;
  font-size: max(16px, 1em);
}

/* ボタン・リンク: 押してすぐ反応(2回タップの待ちが無い)。字を選べない */
button, a, [role="button"] { touch-action: manipulation; -webkit-user-select: none; user-select: none; }

/* ゲームの画面(canvas): 指の動きを全部ゲームへ。長押しのメニューも出さない */
canvas { display: block; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* 中身がスクロールする欄(持ち物の一覧・設定など)には class="mg-scroll" を付ける */
.mg-scroll { overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; }

/* 画面いっぱいの入れ物: 100vh を使わない(アドレスバーの分 はみ出す) */
.mg-full { position: fixed; left: 0; top: 0; width: var(--app-w); height: var(--app-h); }

/* 画面の端に置くボタンは ノッチ・ホームバーを避ける例:
   .hud-top-right { position: fixed; top: calc(12px + var(--safe-t)); right: calc(12px + var(--safe-r)); } */