/* 長押しコピーUIを防止 */
body, canvas, html {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
canvas {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}

/* デフォルト：非表示（PCなど） */
#joystick-control {
  display: none;
}

/* スマホ実機だけ表示＆レイアウト全部ここで決める */
html.is-mobile #joystick-control {
  display: grid;
  position: absolute;
  z-index: 10;
  width: 100%;
  height: 240px;
  bottom: 0;
  pointer-events: none;
  place-items: center;
}

/* 外枠の円 */
html.is-mobile #joystick-control > .joystick-frame {
  width: 100px;
  height: 100px;
  border-radius: 100rem;
  border: 1px solid rgba(255, 255, 255, 0.7);
}

/* ジョイスティックのボール（星を乗せる部分） */
html.is-mobile #joystick-control > .joystick-ball {
  pointer-events: auto;
  width: 80px;
  height: 80px;
  border-radius: 100rem;
  position: absolute;
  filter: drop-shadow(0 0 3px #ffffff);
  display: grid;
  place-items: center;
}

/* 星本体 */
html.is-mobile #joystick-control > .joystick-ball > .joystick-ball-inner {
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  background: url("./star.png") center / contain no-repeat;
}

/* 星の光 */
html.is-mobile #joystick-control > .joystick-ball > .joystick-ball-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("./star.png") center / contain no-repeat;
  filter: blur(0.5px);
  opacity: 0.4;
  transform: scale(1.0);
  pointer-events: none;
}

/* 中の三角形（方向マーク） */
html.is-mobile #joystick-control > .triangle {
  z-index: 20;
  position: absolute;
  top: 50%;
  left: 50%;
  --angle: calc(360deg / 4 * var(--index));
  --d: 50px;
  --x: calc(cos(var(--angle)) * var(--d));
  --y: calc(sin(var(--angle)) * var(--d));
  translate: calc(var(--x) - 50%) calc(var(--y) - 50%);
  rotate: calc(var(--angle) + 90deg);
  user-select: none;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.8);
  height: calc(tan(60deg) * 10px / 2);
  width: 19px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}