.gamekit-controls {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  margin: 0 auto 16px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.48);
  box-shadow: 0 8px 24px rgba(30, 41, 59, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: #1e293b;
  font-family: 'LINE Seed JP', sans-serif;
}

.gamekit-difficulty {
  display: flex;
  overflow: hidden;
  border: 1px solid rgba(30, 41, 59, 0.12);
  border-radius: 12px;
}

.gamekit-difficulty button,
.gamekit-sound {
  box-sizing: border-box;
  min-height: 44px;
  border: 0;
  background: rgba(255, 255, 255, 0.58);
  color: #64748b;
  cursor: pointer;
  font: 700 0.82rem/1 'LINE Seed JP', sans-serif;
  transition: background 0.15s, color 0.15s, opacity 0.15s;
}

.gamekit-difficulty button {
  min-width: 82px;
  padding: 0 14px;
  border-right: 1px solid rgba(30, 41, 59, 0.1);
}

.gamekit-difficulty button:last-child { border-right: 0; }
.gamekit-difficulty button:hover:not(:disabled) { background: rgba(124, 201, 168, 0.25); color: #1e293b; }
.gamekit-difficulty button.is-selected { background: #7cc9a8; color: #1e293b; }
.gamekit-difficulty button:disabled { cursor: not-allowed; opacity: 0.56; }

.gamekit-sound {
  width: 44px;
  min-width: 44px;
  padding: 0;
  border: 1px solid rgba(30, 41, 59, 0.12);
  border-radius: 12px;
  font-size: 1.15rem;
}

.gamekit-sound:hover { background: rgba(124, 201, 168, 0.25); }

@media (max-width: 768px) {
  .gamekit-controls { width: calc(100% - 32px); }
  .gamekit-difficulty { flex: 1; }
  .gamekit-difficulty button { flex: 1; min-width: 0; padding: 0 6px; }
}

/* サイドバーのような細い場所に置くとき用。横並びのままだと
   幅に収まらず、パネルが横スクロールしてしまうため縦積みにする。 */
.gamekit-controls.is-vertical {
  width: 100%;
  margin: 0;
  flex-direction: column;
  gap: 8px;
}
.gamekit-controls.is-vertical .gamekit-difficulty {
  width: 100%;
  flex-direction: column;
}
.gamekit-controls.is-vertical .gamekit-difficulty button {
  width: 100%;
  min-width: 0;
  padding: 0 8px;
  border-right: 0;
  border-bottom: 1px solid rgba(30, 41, 59, 0.1);
}
.gamekit-controls.is-vertical .gamekit-difficulty button:last-child { border-bottom: 0; }
.gamekit-controls.is-vertical .gamekit-sound { width: 100%; }

.gamekit-stage { display: block; margin-left: auto; margin-right: auto; }

/* ============ ☰メニュー（GameKit.ui.mountMenu で使う） ============
   ゲーム中に出しっぱなしにしたくない操作を畳む。呼んだゲームにだけ出る */
:root {
  /* ☰を避けるために空ける幅（各ゲームで使う）。
     ☰は右から10px・幅44px＝右端から54pxを占めるので、それに余白8pxを足した値 */
  --gamekit-menu-space: 62px;
}
.gamekit-menu-btn {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 60;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(30, 41, 59, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 4px 14px rgba(30, 41, 59, 0.12);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #1e293b;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}
.gamekit-menu-btn:hover { background: rgba(255, 255, 255, 0.9); }
body.gamekit-menu-open .gamekit-menu-btn { background: #7cc9a8; }

.gamekit-menu-panel {
  position: absolute;
  top: 60px;
  right: 10px;
  z-index: 55;
  box-sizing: border-box;
  width: 200px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 30px rgba(30, 41, 59, 0.18);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  opacity: 0;
  transform: translateX(12px);
  pointer-events: none;
  transition: opacity 0.18s ease-out, transform 0.18s ease-out;
}
body.gamekit-menu-open .gamekit-menu-panel {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
/* パネルの中では、操作パネルの外枠を二重にしない */
.gamekit-menu-panel .gamekit-controls {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  width: 100%;
}
@media (max-width: 600px) {
  .gamekit-menu-panel { width: 180px; }
  /* 🚨 スマホで上の行（得点や手番）が横に伸びると☰の下に潜り込む。
     ただし .game-sidebar は display:contents のゲームが多く、そこへ padding を足しても効かない。
     重なる相手はゲームごとに違うので、各ゲーム側で
       .なんとか { padding-right: var(--gamekit-menu-space); }
     を指定して避ける */
}
@media (prefers-reduced-motion: reduce) {
  .gamekit-menu-panel { transition: none; }
}

/* ============ 常に見える🔊（GameKit.ui.mountSoundButton で使う） ============
   2026-10-06: 🔊が☰の中にあり、閉じていると見えない。呼んだゲームにだけ出る。
   ☰の左隣に、☰と同じ高さ・大きさ・見た目で並べる（右10px＋☰44px＋すき間8px＝右62px） */
.gamekit-sound-float {
  position: absolute;
  top: 8px;
  right: var(--gamekit-menu-space);
  z-index: 60;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(30, 41, 59, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 4px 14px rgba(30, 41, 59, 0.12);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #1e293b;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  /* 長押しで文字選択・メニューを出さない／ダブルタップで拡大しない */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.gamekit-sound-float:hover { background: rgba(255, 255, 255, 0.9); }
/* ☰が無い画面では右上の角へ */
.gamekit-sound-float.is-corner { right: 10px; }
/* 常に見える🔊を出したゲームでは、☰の中の🔊を隠して二重にしない */
body.gamekit-has-sound-float .gamekit-controls .gamekit-sound { display: none !important; }

/* ============ 確認パネル（ゲーム中に難易度を変えるとき） ============
   ☰パネル(z-index 55)・☰ボタン(60)より上に出す */
.gamekit-ask {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 3000;
}
.gamekit-ask-card {
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
  padding: 20px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.28);
  text-align: center;
}
.gamekit-ask-text {
  margin: 0 0 16px;
  font: 700 0.9rem/1.6 'LINE Seed JP', sans-serif;
  color: #1e293b;
}
.gamekit-ask-btns { display: flex; gap: 10px; }
.gamekit-ask-btns button {
  flex: 1;
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  font: 700 0.88rem/1 'LINE Seed JP', sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.gamekit-ask-no { background: rgba(30, 41, 59, 0.08); color: #475569; }
.gamekit-ask-yes { background: #7cc9a8; color: #14532d; }

/* ============ ☰パネルの中は「指で押す」前提の大きさにする ============
   2026-09-01: 「ヤニブのメニューが押しやすい。他も揃えてほしい」という指摘。
   ヤニブは 134x44px・文字13px、他は 39x32px・文字9.3px（横3列に詰めていた）だった。

   🚨 セレクタが長く !important なのは詳細度の都合。各ゲームのHTMLに☰化する前の指定が残っており
      （画面下に横並びで置いていた頃の名残）、ざひょう探検・妖怪くずしは !important 付きで
      min-height:30px / 26px を指定している。それに勝つ必要がある。
   🚨 妖怪くずし（body.phone-land）は画面を回転させて横向きに使うため、この縦積みを当てると
      ボタンが「幅44px・高さ156px」の縦長になって崩れる。よって除外している */
.gamekit-menu-panel {
  /* 中身が増えても画面からはみ出さない（ざひょう探検はステージ選択もある） */
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}
body:not(.phone-land) .gamekit-menu-panel .gamekit-controls,
body:not(.phone-land) .gamekit-menu-panel #gamekit-slot.gamekit-controls.is-vertical {
  flex-direction: column !important;
  gap: 8px !important;
  width: 100%;
  padding: 0 !important;
}
/* 難易度は横並びをやめて縦に積む */
body:not(.phone-land) .gamekit-menu-panel .gamekit-controls .gamekit-difficulty,
body:not(.phone-land) .gamekit-menu-panel #gamekit-slot.gamekit-controls .gamekit-difficulty {
  display: flex !important;
  flex-direction: column !important;
  width: 100%;
  flex: 0 0 auto;
}
body:not(.phone-land) .gamekit-menu-panel .gamekit-controls .gamekit-difficulty button,
body:not(.phone-land) .gamekit-menu-panel #gamekit-slot.gamekit-controls .gamekit-difficulty button {
  width: 100%;
  min-width: 0;
  min-height: 44px !important;
  padding: 0 12px !important;
  font-size: 0.84rem !important;
  letter-spacing: 0;
  border-right: 0;
  border-bottom: 1px solid rgba(30, 41, 59, 0.1);
}
body:not(.phone-land) .gamekit-menu-panel .gamekit-controls .gamekit-difficulty button:last-child,
body:not(.phone-land) .gamekit-menu-panel #gamekit-slot.gamekit-controls .gamekit-difficulty button:last-child {
  border-bottom: 0;
}
body:not(.phone-land) .gamekit-menu-panel .gamekit-controls .gamekit-sound,
body:not(.phone-land) .gamekit-menu-panel #gamekit-slot.gamekit-controls .gamekit-sound {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
}
/* ゲームごとに入れているボタン（リセット・ステージ選択など）も指のサイズに合わせる。
   ゲーム側が !important で小さくしている場合があるので、こちらも !important */
body:not(.phone-land) .gamekit-menu-panel button { min-height: 44px !important; }

/* ============ スマホの長押しで「文字を選ぶ」状態にならないようにする ============
   2026-09-20: 「スマホで遊んでいると画面選択みたいな状態になってしまう」というご指摘。
   iPhoneのSafariは指を置いたままにすると文字を選び、【コピー／Googleで検索】の帯を出す。
   各ゲームは操作の領域（十字キー・左右の当たり）にだけ user-select:none を付けていて、
   キャンバス・見出し・余白には付いていなかった。
   🚨 iOSは user-select:none だけでは長押しの帯が出る＝ -webkit-touch-callout: none が要る
   🔑 文字を打つところ（入力欄）だけは、これまでどおり選べるように戻す */
html, body {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
input, textarea, select, [contenteditable="true"] {
  -webkit-user-select: auto;
  user-select: auto;
  -webkit-touch-callout: default;
}