body {
  margin: 0;
  overflow: hidden;
  background: black;
}

canvas {
  display: block;
}

#centerCursorHud {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  margin-top: -7px;
  border: 2px solid #f8fafc;
  border-radius: 50%;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 2147483647;
  opacity: 0.98;
}

body.mobile-game-active #centerCursorHud {
  display: none;
}

body.vr-active #centerCursorHud {
  display: none;
}

body.vr-active #mobileTouchControls {
  display: none !important;
}

.a-enter-vr {
  display: none !important;
}

#mobileTouchControls {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  pointer-events: none;
  display: none;
  font-family: Arial, Helvetica, sans-serif;
}

#mobileTouchControls.is-visible {
  display: block;
}

/* 全新移动端数据面板 UI */
#mobileDataPanel {
  position: absolute;
  top: 20px;
  left: 20px;
  display: flex;
  gap: 12px;
  pointer-events: none;
}

.data-item {
  display: flex;
  align-items: center;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(125, 211, 252, 0.32);
  border-radius: 999px;
  padding: 8px 16px;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(2, 6, 23, 0.3);
  color: #f8fafc;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.05em;
}

.data-icon {
  margin-right: 8px;
  font-size: 18px;
}

.coin-data {
  color: #fde047;
  border-color: rgba(253, 224, 71, 0.4);
}

.candy-data {
  color: #f9a8d4;
  border-color: rgba(249, 168, 212, 0.4);
}

/* 引导面板：去除了原来的实体框，只保留带阴影的文字 */
#mobileGuidePanel {
  position: absolute;
  top: 80px; /* 放在数据面板下方 */
  left: 24px;
  width: min(80vw, 340px);
  pointer-events: none;
}

#mobileTouchHint {
  color: #ffffff;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: 0.02em;
  /* 使用文字阴影代替背景框，保证在复杂背景下依然清晰可见 */
  text-shadow: 
    -1px -1px 0 rgba(0,0,0,0.8),
     1px -1px 0 rgba(0,0,0,0.8),
    -1px  1px 0 rgba(0,0,0,0.8),
     1px  1px 0 rgba(0,0,0,0.8),
     0px  2px 4px rgba(0,0,0,0.6);
}

#mobileJoystickCluster {
  position: fixed;
  left: 18px;
  bottom: 24px;
  width: 138px;
  pointer-events: auto;
  touch-action: none;
}

#mobileJoystickLabel {
  margin-bottom: 10px;
  color: #bae6fd;
  font-size: 13px;
  text-align: center;
  letter-spacing: 0.02em;
}

#mobileJoystickArea {
  position: relative;
  width: 138px;
  height: 138px;
  border-radius: 50%;
  touch-action: none;
}

#mobileJoystickBase {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(125, 211, 252, 0.48);
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(14, 165, 233, 0.18), rgba(2, 6, 23, 0.52));
  box-shadow: inset 0 0 26px rgba(56, 189, 248, 0.15), 0 12px 28px rgba(2, 6, 23, 0.35);
}

#mobileJoystickThumb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58px;
  height: 58px;
  margin-left: -29px;
  margin-top: -29px;
  border: 2px solid rgba(224, 242, 254, 0.7);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(186, 230, 253, 0.95), rgba(14, 165, 233, 0.88));
  box-shadow: 0 10px 24px rgba(14, 165, 233, 0.35);
  transition: transform 0.06s linear;
}

#mobileTouchButtons {
  position: fixed;
  right: 18px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(42vw, 190px);
  pointer-events: auto;
}

#mobileTouchButtons button {
  width: 100%;
  min-height: 52px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.9);
  color: #f8fafc;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 12px 30px rgba(2, 6, 23, 0.38);
  backdrop-filter: blur(10px);
  touch-action: manipulation;
}

#mobileTouchButtons button[disabled] {
  opacity: 0.48;
}

#mobilePromptHtmlButton {
  border-color: rgba(59, 130, 246, 0.5);
  background: linear-gradient(180deg, rgba(30, 64, 175, 0.94), rgba(30, 41, 59, 0.96));
}

#mobileActionHtmlButton {
  border-color: rgba(168, 85, 247, 0.5);
  background: linear-gradient(180deg, rgba(109, 40, 217, 0.96), rgba(49, 46, 129, 0.98));
}

#mobileTouchControls.is-hidden {
  display: none;
}