/* v12：左下のハチローくん＝おにごっこの入口（js/hachiro.js とセット）。おにごっこは css/game.css
   公式画像は縦横比を保った縮小版をそのまま使い、反転・回転・変形・色変更・部分の切り取りはしない。
   動きは画像全体の位置の移動だけ。向きは標準（右向き）／対向（左向き）の画像の差し替えで表す。 */

/* キャラクター：表示中の画面に固定（スクロールしても画面内に残る）。透明な大きい層は使わない */
.buddy {
  /* 2026-11-05：左下に固定（スクロール・アドレスバーの伸び縮みで動かない）。端末の安全領域（ホームバーなど）の分だけ内側へ */
  position: fixed; left: calc(12px + env(safe-area-inset-left, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 35;
  width: var(--char-w, 72px); height: var(--char-h, 89px);
  pointer-events: none; -webkit-user-select: none; user-select: none;
  will-change: transform;
}
.buddy.is-guest { z-index: 34; }
.buddy-hit {
  position: absolute; inset: 0; padding: 0; border: none; background: none; border-radius: 12px;
  pointer-events: none; /* 当たり判定は画像だけ */
}
.buddy-hit:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--yellow); }
.buddy-img {
  position: absolute; left: 0; top: 0; display: block; width: 100%; height: auto;
  pointer-events: auto; cursor: grab;
  -webkit-user-drag: none; -webkit-touch-callout: none; user-select: none; touch-action: pan-y;
}
.is-guest .buddy-img { pointer-events: none; cursor: default; }
.buddy.is-drag .buddy-img { cursor: grabbing; }
/* 着地：画像全体が小さく跳ねて止まる（縦横の比率は変えない） */
.buddy.is-landing .buddy-img { animation: buddy-land 420ms cubic-bezier(.2, .8, .2, 1); }
@keyframes buddy-land {
  0% { transform: translateY(-16px); }
  45% { transform: translateY(0); }
  65% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}
/* 呼んだとき：下からぴょこんと現れる（画像全体の移動と透明度だけ） */
.buddy.is-arrive .buddy-img { animation: buddy-arrive 380ms cubic-bezier(.34, 1.56, .64, 1); }
@keyframes buddy-arrive { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* 吹き出し：押せない（下の操作を遮らない）。位置は JS で画面内に収める */
.buddy-bubble {
  position: absolute; z-index: 2; margin: 0; padding: 4px 12px;
  background: var(--white); border: 2px solid var(--ink); border-radius: 14px;
  font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--ink);
  width: max-content; white-space: normal; word-break: auto-phrase; overflow-wrap: anywhere; line-break: strict;
  box-shadow: 2px 2px 0 var(--ink); pointer-events: none;
  left: var(--bx, 0px); top: var(--by, 0px);
}
.buddy-bubble.is-in { animation: bubble-in 260ms cubic-bezier(.34, 1.56, .64, 1); }
@keyframes bubble-in { from { transform: translateY(6px) scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
.buddy-bubble.is-alert { padding: 2px 10px; font-size: 18px; background: var(--yellow); }

/* v12：左下のハチローくんのメニュー（吹き出しの形、画面の内側へ開く）。ホバー・フォーカス・タップで開き、項目を選ぶと実行 */
.buddy-hit { pointer-events: auto; cursor: pointer; }
.buddy-img { pointer-events: none; cursor: pointer; }
.buddy:hover .buddy-img, .buddy-hit[aria-expanded="true"] .buddy-img { translate: 0 -3px; transition: translate 160ms; }
.buddy-menu {
  position: absolute; left: 0; top: 0; z-index: 3; display: flex; flex-direction: column; gap: 6px; min-width: 170px;
  padding: 10px; background: var(--white); border: 2px solid var(--ink); border-radius: 16px; box-shadow: 3px 3px 0 var(--ink);
  pointer-events: auto;
}
/* しっぽ（ハチローくんの方を指す） */
.buddy-menu::after {
  content: ""; position: absolute; left: calc(var(--tail-x, 40px) - 8px); bottom: -10px; width: 16px; height: 16px;
  background: var(--white); border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg);
}
/* メニューとハチローくんの間の隙間でも閉じないように、見えない橋をかける */
.buddy-menu::before { content: ""; position: absolute; left: 0; right: 0; bottom: -14px; height: 14px; }
.buddy-menu.is-in { animation: bubble-in 220ms cubic-bezier(.34, 1.56, .64, 1); transform-origin: var(--tail-x, 20%) 110%; }
.buddy-menu-item {
  display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 2px solid var(--ink); border-radius: 999px;
  background: var(--white); color: var(--ink); font-size: 14px; font-weight: 700; letter-spacing: .04em; text-align: left; white-space: nowrap;
}
.buddy-menu-item.is-main { background: var(--yellow); box-shadow: 2px 2px 0 var(--ink); }
.buddy-menu-item:hover { filter: brightness(.97); }
.buddy-menu-item:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.buddy-menu-icon { display: inline-flex; width: 18px; justify-content: center; font-size: 13px; line-height: 1; }
.buddy-menu-icon small { font-size: 10px; }
.buddy-menu-icon svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* おやすみ中の再表示ボタン（左下に小さく） */
.buddy-call {
  position: fixed; left: 12px; bottom: 12px; z-index: 36; display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 0 12px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--white); color: var(--ink);
  font-size: 12px; font-weight: 700; box-shadow: 2px 2px 0 var(--ink);
}
.proto-mini { margin-left: 6px; padding: 0 8px; min-height: 26px; border: 1px solid var(--ink); border-radius: 6px; background: var(--white); font-size: 12px; }

/* ドラッグ中はページの文字選択をしない */
html.buddy-dragging, html.buddy-dragging * { -webkit-user-select: none !important; user-select: none !important; cursor: grabbing !important; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.site-footer .footer-mark { margin-top: -20px; padding-top: 0; font-size: 11px; color: var(--sub); word-break: auto-phrase; }

/* 確認用パネル（試作のみ） */
.proto-buddy { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--ink); }
.proto-buddy-status { margin: 0 0 6px; font-size: 13px; }

/* 動きを減らす設定：弾み・登場の動きをやめる（自動の逃走・移動は JS 側で止める） */
@media (prefers-reduced-motion: reduce) {
  .buddy.is-landing .buddy-img, .buddy.is-arrive .buddy-img, .buddy-bubble.is-in { animation: none; }
}
body.force-reduce .buddy.is-landing .buddy-img, body.force-reduce .buddy.is-arrive .buddy-img, body.force-reduce .buddy-bubble.is-in { animation: none; }