/* VirtualPad 样式 —— 坐标基于内部 640x480 stage，复刻 Draw 事件 */
.vp-root {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;          /* 仅 stage 接收事件，避免遮挡页面其余部分 */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}

.vp-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: center center;
  pointer-events: auto;
}

/* 摇杆底座：绘制点 (80,300)，64x64 缩放 2x = 128x128，alpha 0.5 */
.vp-joy-base {
  position: absolute;
  left: 80px;
  top: 300px;
  width: 128px;
  height: 128px;
  opacity: 0.5;
}

/* 摇杆拇指点（视觉反馈，中心 JOY_CX/JOY_CY） */
.vp-thumb {
  position: absolute;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  margin-top: -22px;
  left: 140px;
  top: 360px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  border: 2px solid rgba(255, 255, 255, 0.55);
  pointer-events: none;
}

/* 动作按钮：圆角矩形，半透明 */
.vp-btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-family: "Courier New", monospace;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.85);
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

/* C：(380,420)-(460,440) 绿 */
.vp-btn-c {
  left: 380px;
  top: 420px;
  width: 80px;
  height: 20px;
  background: rgba(0, 160, 0, 0.5);
  font-size: 14px;
}

/* Shift：(460,400)-(540,440) 橙 */
.vp-btn-shift {
  left: 460px;
  top: 400px;
  width: 80px;
  height: 40px;
  background: rgba(230, 120, 0, 0.5);
  font-size: 13px;
}

/* Enter：(540,400)-(620,440) 青 */
.vp-btn-enter {
  left: 540px;
  top: 400px;
  width: 80px;
  height: 40px;
  background: rgba(0, 170, 170, 0.5);
  font-size: 13px;
}

.vp-btn.vp-active {
  filter: brightness(1.6);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
}

.vp-f2,.vp-kbd-btn,.vp-fs{pointer-events:auto !important;}
.vp-f2{position:fixed;top:12px;right:12px;z-index:20;min-width:56px;height:44px;line-height:44px;
  text-align:center;border-radius:8px;background:rgba(40,40,48,.85);color:#e8e8ec;
  font:600 15px/44px system-ui,sans-serif;border:1px solid rgba(255,255,255,.25);
  user-select:none;touch-action:none;}
.vp-f2:active{background:rgba(90,90,110,.9);}

.vp-kbd-btn{position:fixed;top:12px;right:80px;z-index:20;min-width:64px;height:44px;
  text-align:center;border-radius:8px;background:rgba(40,40,48,.85);color:#e8e8ec;
  font:600 14px/44px system-ui,sans-serif;border:1px solid rgba(255,255,255,.25);
  user-select:none;touch-action:none;}
.vp-kbd{position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(12,12,16,.94);
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:6px;
  max-height:52vh;overflow:auto;touch-action:none;}
.vp-krow{display:flex;gap:4px;justify-content:center;}
.vp-key{flex:1 1 0;min-width:0;height:40px;border-radius:6px;border:1px solid rgba(255,255,255,.18);
  background:rgba(48,48,58,.9);color:#eee;font:600 13px/40px system-ui,sans-serif;padding:0 4px;
  user-select:none;touch-action:none;}
.vp-key-on{background:rgba(120,30,30,.95);}

.vp-fs{position:fixed;top:12px;right:148px;z-index:20;min-width:64px;height:44px;
  text-align:center;border-radius:8px;background:rgba(40,40,48,.85);color:#e8e8ec;
  font:600 14px/44px system-ui,sans-serif;border:1px solid rgba(255,255,255,.25);
  user-select:none;touch-action:none;}

.vp-kbd[hidden]{display:none !important;}

/* 隐藏输入框：只用于唤出系统输入法，不显示 */
.vp-ime{position:fixed;left:-9999px;top:0;width:1px;height:1px;opacity:0;
  font-size:16px;border:0;padding:0;margin:0;background:transparent;color:transparent;}

.vp-joy-base{position:absolute;left:80px;top:300px;width:128px;height:128px;opacity:.5;
  border-radius:50%;background:radial-gradient(circle,#2b2b2b 0,#1b1b1b 70%,#111 100%);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.10);}
.vp-tri{position:absolute;width:0;height:0;border:11px solid transparent;opacity:.55;}
.vp-tri-u{left:53px;top:10px;border-bottom-color:#bbb;}
.vp-tri-d{left:53px;bottom:10px;border-top-color:#bbb;}
.vp-tri-l{left:10px;top:53px;border-right-color:#bbb;}
.vp-tri-r{right:10px;top:53px;border-left-color:#bbb;}