/* =====================================================================
   新手引导（onboarding）覆盖层 —— FC 风（斜切卡 + 电光绿）。
   挂在 body、屏幕坐标系，z-index 高于 #stage 与一切弹层。
   字号用真实屏幕 px（不随 #stage 缩放），保证各设备可读。
   ===================================================================== */
.gd-root { position: fixed; inset: 0; z-index: 99999; display: none; font-family: 'Noto Sans SC', system-ui, sans-serif; }

/* 点击拦截层（防止误触下方 UI；只能用引导按钮操作）。
   有目标时透明（由聚光灯的超大 box-shadow 压暗）；无目标时整屏压暗。 */
.gd-backdrop { position: absolute; inset: 0; background: transparent; }
.gd-root.gd-nospot .gd-backdrop { background: rgba(3, 7, 14, 0.80); }

/* 聚光灯：四周用超大 box-shadow 压暗，中间留出目标「洞」+ 电光绿描边 */
.gd-spot {
  position: absolute; display: none; border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(3, 7, 14, 0.78), 0 0 22px rgba(21, 227, 113, 0.5) inset;
  border: 2px solid #15e371;
  outline: 2px solid rgba(21, 227, 113, 0.35); outline-offset: 4px;
  transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease;
  pointer-events: none;
}
/* 提示卡：复刻 .fc-card 右上+左下切角 */
.gd-tip {
  position: absolute; width: min(86vw, 460px);
  background: linear-gradient(165deg, rgba(18, 27, 46, 0.98), rgba(11, 17, 30, 0.98));
  border: 1px solid rgba(21, 227, 113, 0.35);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  padding: 20px 22px 16px;
  color: #eef4ff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  animation: gd-pop .22s ease;
}
@keyframes gd-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.gd-tip.gd-hot { border-color: rgba(21, 227, 113, 0.85); box-shadow: 0 0 0 1px rgba(21,227,113,.4), 0 24px 70px rgba(0,0,0,.55), 0 0 40px rgba(21,227,113,.25); }

.gd-step { font-size: 12px; letter-spacing: 2px; color: #5e7196; font-weight: 700; }
.gd-title {
  font-size: 20px; font-weight: 800; margin: 4px 0 8px; line-height: 1.25;
  color: #fff;
}
.gd-tip.gd-hot .gd-title { color: #15e371; }
.gd-body { font-size: 15px; line-height: 1.6; color: #b9c6e0; }

.gd-actions { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.gd-grow { flex: 1 1 auto; }
.gd-actions button {
  font-family: inherit; cursor: pointer; border: 1px solid rgba(110, 160, 235, 0.35);
  background: rgba(255, 255, 255, 0.05); color: #cdd9f0;
  padding: 9px 18px; font-size: 14px; font-weight: 700; letter-spacing: 1px;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: .15s;
}
.gd-actions button:hover { color: #fff; border-color: rgba(110, 160, 235, 0.6); }
.gd-skip { background: transparent !important; border-color: transparent !important; color: #5e7196; padding-left: 0; }
.gd-skip:hover { color: #9fb2d4; }
.gd-next {
  background: linear-gradient(160deg, #15e371, #0aa14e) !important;
  border-color: rgba(21, 227, 113, 0.7) !important; color: #03140a !important;
}
.gd-next:hover { box-shadow: 0 6px 22px rgba(21, 227, 113, 0.45); }

@media (prefers-reduced-motion: reduce) {
  .gd-spot { transition: none; }
  .gd-tip { animation: none; }
}