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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #06121c;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  user-select: none;
  /* 自定义光标：白色半透明填充 + 2px 白色描边圆（放大 1.5 倍） */
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='15' fill='rgba(255,255,255,0.25)' stroke='white' stroke-width='2'/%3E%3C/svg%3E") 24 24, auto;
}

#scene {
  display: block;
  width: 100vw;
  height: 100vh;
  touch-action: none;
}

.hud {
  position: fixed;
  left: 16px;
  bottom: 14px;
  color: #bfe9ff;
  font-size: 13px;
  opacity: .72;
  pointer-events: none;
  line-height: 1.6;
  text-shadow: 0 1px 3px #000;
}
.hud b { color: #ffce8a; }

.loading {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #bfe9ff;
  font-size: 16px;
  opacity: .8;
  pointer-events: none;
  transition: opacity .6s ease;
  text-shadow: 0 1px 6px #000;
}
.loading.hidden { opacity: 0; }

/* ===== 水下半透明叠加层：暗角 + 顶部光束（纯装饰，不挡交互） ===== */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at 50% 42%, transparent 55%, rgba(2, 10, 16, .5) 100%);
  pointer-events: none;
  z-index: 2;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(150, 210, 255, .08) 0%, transparent 30%);
  pointer-events: none;
  z-index: 2;
}
.hud, .loading { z-index: 3; }

/* ===== 水波纹：双圈错开荡漾，像水面涟漪 ===== */
.ripple {
  position: fixed;
  border: 1px solid rgba(170, 215, 255, 0.45);
  border-radius: 50%;
  pointer-events: none;
  z-index: 4;
  transform: translate(-50%, -50%);
  animation: rippleSpread 1.8s cubic-bezier(0.12, 0.55, 0.25, 1) forwards;
  box-shadow: 0 0 12px rgba(170, 215, 255, 0.15), inset 0 0 8px rgba(170, 215, 255, 0.08);
}
.ripple-sub {
  border-color: rgba(170, 215, 255, 0.3);
  animation: rippleSub 1.5s cubic-bezier(0.12, 0.55, 0.25, 1) forwards;
}
@keyframes rippleSpread {
  0%   { width: 4px;   height: 4px;   opacity: 0;    border-width: 2px; }
  8%   { opacity: 0.7; }
  100% { width: 260px; height: 260px; opacity: 0;    border-width: 0.3px; }
}
@keyframes rippleSub {
  0%   { width: 4px;   height: 4px;   opacity: 0;    border-width: 1.5px; }
  10%  { opacity: 0.5; }
  100% { width: 180px; height: 180px; opacity: 0;    border-width: 0.2px; }
}