/* ============================================================
   死神VS火影 虚拟手柄样式 (P1)
   半透明覆盖在游戏底部，不完全遮挡画面
   ============================================================ */

:root {
  --pad-bg: rgba(20, 22, 34, 0.42);
  --pad-stroke: rgba(255, 255, 255, 0.22);
  --pad-text: rgba(255, 255, 255, 0.92);
  --btn-bg: rgba(40, 44, 66, 0.46);
  --btn-active: rgba(255, 140, 40, 0.78);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* 整个手柄覆盖层：固定底部，pointer-events 只在控件上 */
#gp {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 calc(16px + var(--safe-r)) calc(14px + var(--safe-b)) calc(16px + var(--safe-l));
  pointer-events: none;             /* 中间空白透传给游戏 */
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
  font-family: -apple-system, system-ui, sans-serif;
}
#gp.hidden { display: none; }

/* 所有可按控件恢复 pointer-events */
#gp .stick, #gp .btn { pointer-events: auto; }

/* 顶部居中「菜单」按钮 */
#gp-menu {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top, 0px));
  left: 50%; transform: translateX(-50%);
  z-index: 101;
  padding: 7px 22px;
  border-radius: 18px;
  background: rgba(20, 22, 34, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.78);
  color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .08em;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  font-family: -apple-system, system-ui, "PingFang SC", sans-serif;
}
#gp-menu:active { transform: translateX(-50%) scale(0.94); }

/* ---------- 左侧摇杆 (圆环 + 跟手 knob) ---------- */
.stick {
  position: relative;
  width: 168px;
  height: 168px;
  flex: 0 0 auto;
  touch-action: none;
}
.stick .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(20, 22, 34, 0.34);
  border: 3px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
/* 环内方向箭头提示 */
.stick .ar {
  position: absolute;
  color: rgba(255, 255, 255, 0.55);
  font-size: 26px; font-weight: 700; line-height: 1;
}
.stick .ar.up    { top: 8px;  left: 50%; transform: translateX(-50%); }
.stick .ar.down  { bottom: 8px; left: 50%; transform: translateX(-50%); }
.stick .ar.left  { left: 10px; top: 50%; transform: translateY(-50%); }
.stick .ar.right { right: 10px; top: 50%; transform: translateY(-50%); }
/* 高亮当前方向 */
.stick.d-up    .ar.up,
.stick.d-down  .ar.down,
.stick.d-left  .ar.left,
.stick.d-right .ar.right { color: var(--btn-active); }
/* 中心摇杆头 */
.stick .knob {
  position: absolute;
  top: 50%; left: 50%;
  width: 72px; height: 72px;
  margin: -36px 0 0 -36px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, rgba(255,255,255,.96), rgba(210,214,228,.82));
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
  will-change: transform;
  pointer-events: none;
}

/* ---------- 右侧动作按钮 (参考布局：扇形 6 键，白描边圆形) ---------- */
.actions {
  position: relative;
  width: 328px;
  height: 300px;
  flex: 0 0 auto;
}
.btn {
  position: absolute;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: rgba(28, 30, 44, 0.5);
  border: 2.5px solid rgba(255, 255, 255, 0.82);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.04;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.btn .k { font-size: 30px; font-weight: 800; }
.btn.act { background: var(--btn-active); border-color: #fff; transform: scale(0.93); }

/* 参考图布局：紧凑六边形（用 left/top 固定，避免宽屏漂移）
       O召唤    L冲刺           上排
   I必杀  J攻击  K跳跃           中排(J红居中)
       U远攻                    下排
   72px 按钮，行距 96，列距 114 */
.b-sum  { left: 86px;  top: 36px;  background: rgba(70, 110, 210, 0.5); } /* 召唤 上左 蓝 */
.b-dash { left: 200px; top: 36px; }                                      /* 冲刺 上右 */
.b-sup  { left: 28px;  top: 132px; }                                     /* 必杀 中左 */
.b-atk  { left: 142px; top: 132px; background: rgba(214, 64, 56, 0.62); }/* 攻击 中红(主) */
.b-jmp  { left: 256px; top: 132px; }                                     /* 跳跃 中右 */
.b-rng  { left: 86px;  top: 228px; }                                     /* 远攻 下 */

/* ---------- 显隐切换悬浮按钮（右上角）---------- */
#gp-toggle {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top, 0px));
  right: calc(10px + var(--safe-r));
  z-index: 101;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(20,22,34,.5);
  border: 1px solid var(--pad-stroke);
  color: #fff;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

/* 横屏：手柄更宽，按钮略大间距 */
@media (orientation: landscape) {
  #gp { padding-bottom: calc(10px + var(--safe-b)); }
}
/* 极矮屏：整体缩放手柄（用 transform 保持六边形比例不乱） */
@media (max-height: 380px) {
  .stick { width: 138px; height: 138px; }
  .stick .knob { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
  .actions { transform: scale(.82); transform-origin: bottom right; }
}