/* ============================================
   タッチであそぼ！ スタイル
   赤ちゃんの誤操作（スクロール・ズーム・選択・
   長押しメニュー）をすべて無効化する
   ============================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  position: fixed;          /* スクロール・バウンスを完全に止める */
  inset: 0;
  overflow: hidden;
  background: #bfe9ff;
  touch-action: none;        /* ブラウザ既定のジェスチャーを無効化 */
  overscroll-behavior: none; /* 引っ張って更新を無効化 */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;      /* 長押しメニューを無効化 */
  -webkit-tap-highlight-color: transparent;
  font-family: "Hiragino Maru Gothic ProN", "BIZ UDGothic", "Yu Gothic", system-ui, sans-serif;
}

/* 検索エンジン向けテキストを視覚的にだけ隠す（display:none だと SEO 評価されにくいため使わない） */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 遊び場キャンバス */
#stage {
  position: absolute;
  inset: 0;
  display: block;
}

/* おやすみタイマー終了時の「おしまい」画面（歯車 z=20 より下・メニュー z=30 より下） */
#sleep {
  position: absolute;
  inset: 0;
  z-index: 18;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(#0e1436, #27356b);
}
#sleep[hidden] { display: none; }

.sleep-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  color: #e8ecff;
}
.sleep-moon {
  font-size: 96px;
  line-height: 1;
  animation: moonfloat 3.2s ease-in-out infinite;
}
@keyframes moonfloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
.sleep-inner b { font-size: 34px; }
.sleep-inner span { font-size: 15px; color: #aab4e8; }
#sleepMore {
  margin-top: 20px;
  font-size: 15px;
  transition: transform 0.9s ease;
}
#sleepMore.holding { transform: scale(1.08); }

/* 保護者用の歯車ボタン（半透明・長押しで設定を開く） */
#gear {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  right: calc(env(safe-area-inset-right, 0px) + 10px);
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  font-size: 21px;
  line-height: 1;
  opacity: 0.55;
  z-index: 20;
  transition: transform 0.9s ease, background 0.9s ease;
}
#gear.holding {
  transform: scale(1.3) rotate(90deg);
  background: rgba(255, 255, 255, 0.85);
  opacity: 1;
}
/* 起動直後だけ、設定ボタンの場所を知らせるやさしいパルス（transform は使わず holding と干渉させない） */
#gear.hint {
  animation: gearpulse 1.2s ease-in-out 5;
}
@keyframes gearpulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 158, 196, 0); opacity: 0.6; }
  50%      { box-shadow: 0 0 0 9px rgba(255, 158, 196, 0.45); opacity: 1; }
}

/* モード名・お知らせ（画面中央にぽよんと出る） */
#toast {
  position: absolute;
  /* 左右0＋margin auto で中央寄せ。こうすると最大幅いっぱい（画面幅-28px）まで使えて、
     left:50% のように利用可能幅が右半分に制限されず、長文でも細長くならない */
  left: 0;
  right: 0;
  top: 38%;
  margin: 0 auto;
  width: -moz-fit-content;
  width: fit-content;
  max-width: calc(100vw - 28px);
  transform: translateY(-50%) scale(0);
  background: rgba(255, 255, 255, 0.92);
  border-radius: 28px;
  padding: 14px 24px;
  font-size: clamp(19px, 6vw, 40px);
  font-weight: bold;
  line-height: 1.3;
  color: #5a4a56;
  text-align: center;
  white-space: normal;       /* 長文は折り返す（モード名など短い文は1行のまま） */
  word-break: keep-all;      /* まず日本語の語のまとまり・スペースで折り返して読みやすく */
  overflow-wrap: anywhere;   /* それでも収まらない長い語は途中でも折って画面内に収める */
  box-shadow: 0 6px 24px rgba(90, 60, 90, 0.18);
  pointer-events: none;
  z-index: 15;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#toast.show {
  transform: translateY(-50%) scale(1);
}

/* ホーム画面に追加バナー（画面下・保護者用） */
#addBanner {
  position: absolute;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  transform: translateX(-50%);
  z-index: 25;
  width: min(440px, calc(100% - 24px));
  animation: ab-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#addBanner[hidden] { display: none; }

@keyframes ab-pop {
  from { transform: translateX(-50%) translateY(24px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);    opacity: 1; }
}

.ab-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.97);
  border: 3px solid #ffd1e3;
  border-radius: 20px;
  padding: 11px 12px 11px 14px;
  box-shadow: 0 8px 26px rgba(150, 90, 120, 0.28);
}

/* iPhone は共有ボタンが画面下にあるので、下向きのしっぽで指し示す */
#addBanner.ios .ab-card { position: relative; }
#addBanner.ios .ab-card::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -13px;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: rgba(255, 255, 255, 0.97);
  filter: drop-shadow(0 2px 0 #ffd1e3);
}

.ab-emoji { font-size: 30px; line-height: 1; }

.ab-msg {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ab-msg b { color: #a2688a; font-size: 15px; }
/* keep-all で日本語の語の途中改行を防ぎ、スペース・記号でだけ折り返す */
.ab-msg span { color: #7d6b76; font-size: 12.5px; word-break: keep-all; overflow-wrap: anywhere; }
/* アクセスガイド／アプリ固定の安全ヒント（さらに小さく・控えめに） */
.ab-safe { margin-top: 3px; font-size: 11.5px; color: #9a8b95; }
.ab-safe[hidden] { display: none; }

.ab-add {
  font-family: inherit;
  font-weight: bold;
  font-size: 15px;
  color: #fff;
  white-space: nowrap;
  padding: 10px 16px;
  border: none;
  border-radius: 14px;
  background: #ff9ec4;
  box-shadow: 0 3px 0 #e07ba3;
}
.ab-add:active { transform: translateY(3px); box-shadow: none; }

.ab-close {
  flex: none;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: #f3e7ee;
  color: #a2688a;
  font-size: 19px;
  line-height: 1;
}
.ab-close:active { background: #e7d3de; }

/* 設定メニュー（保護者用オーバーレイ） */
#menu {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 24px;
  background: rgba(255, 250, 252, 0.95);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  /* 項目が増えて画面より高くなったらスクロール（中央寄せは擬似要素の auto マージンで維持） */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#menu.open { display: flex; }
/* 収まるときは上下中央、あふれるときは先頭からスクロールできるようにする */
#menu::before,
#menu::after { content: ''; margin-block: auto; }

#menu h2 {
  font-size: 22px;
  color: #a2688a;
  margin-bottom: 4px;
}

/* 対象年齢のサブ表示 */
.menu-sub {
  font-size: 14px;
  color: #b0899e;
  margin-bottom: 10px;
}

.mgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: min(430px, 100%);
}

.trow {
  display: flex;
  gap: 12px;
  width: min(430px, 100%);
}
.trow .mbtn { flex: 1; }

.mbtn {
  font-family: inherit;
  font-size: 19px;
  font-weight: bold;
  color: #5a4a56;
  padding: 16px 8px;
  border-radius: 22px;
  border: 3px solid #ffd1e3;
  background: #fff;
  box-shadow: 0 4px 0 #f3b8cf;
}
.mbtn:active {
  transform: translateY(4px);
  box-shadow: none;
}

.mbtn.close {
  background: #ff9ec4;
  border-color: #ff9ec4;
  color: #fff;
  box-shadow: 0 4px 0 #e07ba3;
}

/* 全画面ボタンと閉じるボタンは横幅いっぱい */
#fsBtn,
.mbtn.close {
  width: min(430px, 100%);
}

#menu .note {
  font-size: 13px;
  color: #b09aa8;
}