/* ==========================================================
   base.css —— 全局重置、背景层、粒子、底部提示、移动端微调
   ========================================================== */

/* ===== 全局重置 ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: #05050c;
  font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #fff;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

/* ===== 星空背景 canvas ===== */
#starfield {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
}

/* 深空背景光晕 */
.bg-glow {
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 70% 50% at 30% 30%, rgba(60, 50, 130, 0.2) 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 80% 60%, rgba(40, 60, 120, 0.15) 0%, transparent 60%);
  pointer-events: none;
  will-change: transform;
}

/* ===== 流星层 ===== */
#meteor-canvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* ===== 轨迹光痕线 ===== */
#trail-svg {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* ===== 粒子容器 ===== */
#particle-layer {
  position: fixed; inset: 0; z-index: 2;
  pointer-events: none; overflow: hidden;
}
.particle {
  position: absolute;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  background: linear-gradient(135deg, #ffffff 0%, #e9d5ff 50%, #93c5fd 100%);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.7), 0 0 16px rgba(196, 181, 253, 0.4);
  pointer-events: none;
}

/* ===== 底部提示 ===== */
#hint {
  position: fixed;
  bottom: 32px; left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  font-size: 13px;
  color: rgba(196, 181, 253, 0.5);
  letter-spacing: 3px;
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
  white-space: nowrap;
}
#hint.show { opacity: 1; }
#hint .dot {
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(196, 181, 253, 0.6);
  margin: 0 6px;
  vertical-align: middle;
  animation: blink 1.8s ease-in-out infinite;
}
@keyframes blink {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}