* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  background: #090a09; /* 保留原背景色 */
  font-family: "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  overflow: hidden;
  /* 确保 body 没有默认边距，方便 canvas 全屏 */
  margin: 0;
}

/* 通用 Canvas 样式 */
canvas {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
}

/* 强制所有 canvas 重叠并全屏 */
#c, #field, #labels {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* 山脉背景在最下层 */
#c {
  z-index: 1;
}

/* 3D 网格 */
#field {
  z-index: 2;
  pointer-events: auto; /* 确保网格可以接收鼠标事件 */
  cursor: crosshair;
  touch-action: none;
}

/* 悬浮标签层：透明覆盖，只负责绘制。
   pointer-events: none —— 点击穿透到 #field / window，
   由 script.js 的 label-manager 在 capture 阶段做命中测试并拦截。 */
#labels {
  z-index: 4;
  pointer-events: none;
}

/* 调试红框层（JS 动态生成，正式版可把 script.js 里 DEBUG_GUIDES 设为 false） */
.guides-layer {
  z-index: 3;
}

/* UI 层在最上层 */
.ui {
  position: absolute;
  z-index: 6;
  pointer-events: none; /* 让点击穿透 UI 到下面的 canvas */

  inset: 0;
  padding: 28px 32px;
  display: flex;
  align-items: flex-end;
}

.hint {
  color: #5d6058;
  font-size: 13px;
  letter-spacing: 0.02em;
}

/* 标签点击事件的临时提示（未来可替换为面板 / 跳转等真实事件） */
#toast {
  position: fixed;
  left: 50%;
  /* 需求 4.2：移动端适配浏览器工具栏与 Home 指示条安全区，避免 toast 被遮挡 */
  bottom: calc(48px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(8px);
  z-index: 7;
  padding: 8px 16px;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  background: rgba(17, 17, 17, 0.92);
  color: #eee;
  font-size: 13px;
  letter-spacing: 0.03em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}