/* 移動用十字キー（どのシーンでも常時表示） */
#movePad {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(3, 44px);
  grid-template-rows: auto 44px 44px 44px;
  gap: 5px;
  justify-items: center;
  align-items: center;
}

#movePad .movePad-label {
  grid-column: 1 / 4;
  margin-bottom: 2px;
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(5, 4, 6, .72);
  color: #fff;
  font-family: Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: .12em;
  text-align: center;
  white-space: nowrap;
}

#movePad button {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  background: rgba(5, 4, 6, .5);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s, border-color .2s, opacity .2s, transform .15s;
}

#movePad button img {
  width: 26px;
  height: 26px;
  display: block;
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

/* 通常時は光らせず、押したときだけピンクに光らせる */
#movePad button:hover {
  background: rgba(255, 255, 255, .16);
}

#movePad button.is-pressing,
#movePad button:active {
  transform: scale(.9);
  border-color: #ff1da8;
  background: rgba(255, 29, 168, .8);
}

/* その方向に進めない場合は薄く表示 */
#movePad button:disabled {
  opacity: .26;
  cursor: default;
}

.movePad-up    { grid-area: 2 / 2 / 3 / 3; }
.movePad-left  { grid-area: 3 / 1 / 4 / 2; }
.movePad-right { grid-area: 3 / 3 / 4 / 4; }
.movePad-down  { grid-area: 4 / 2 / 5 / 3; }

@media (max-width: 600px) {
  #movePad {
    right: 10px;
    bottom: 10px;
    grid-template-columns: repeat(3, 40px);
    grid-template-rows: auto 40px 40px 40px;
    gap: 4px;
  }
  #movePad button { width: 40px; height: 40px; }
  #movePad button img { width: 22px; height: 22px; }
}

/* 傾き操作（ジャイロ）の切り替えボタン */
#gyroBtn{
  position:fixed;
  left:12px;
  bottom:14px;
  z-index:30;
  display:flex;
  align-items:center;
  gap:7px;
  padding:9px 15px;
  border:1.5px solid rgba(255,255,255,.55);
  border-radius:999px;
  background:rgba(5,4,6,.62);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  color:#fff;
  font-family:Arial,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  font-size:12px;
  font-weight:bold;
  line-height:1;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .2s,border-color .2s;
}
#gyroBtn .gyroBtn__icon{
  width:12px;
  height:19px;
  border:1.5px solid currentColor;
  border-radius:3px;
  transform:rotate(-20deg);
  transition:transform .3s ease;
}
#gyroBtn.is-on{
  border-color:#ff1da8;
  background:rgba(255,29,168,.5);
}
#gyroBtn.is-on .gyroBtn__icon{transform:rotate(20deg)}

@media (max-width:600px){
  #gyroBtn{left:10px;bottom:10px;padding:8px 13px;font-size:11px}
}