:root {
  --blue-light: #00d9ff;
  --blue-deep: #0044ff;
  --purple-electric: #9b4dff;
  --gold: #ffd86f;
  --bg-dark: #060b14;
  --text-light: #d8ebff;
  --font-main: "Poppins", "Noto Sans SC", "微软雅黑", sans-serif;
  --font-title: "Orbitron", "Poppins", "Noto Sans SC";
}

/* =========================================================
   🌌 全局背景（统一桌面与手机）
========================================================= */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background: radial-gradient(circle at center, #0b1320 0%, var(--bg-dark) 90%);
  position: relative;
  overflow: hidden !important;    /* ✅ 禁止上下滑动 */
  overscroll-behavior: none;
  touch-action: none;             /* ✅ 防止触摸滚动 */
  color: var(--text-light);
  font-family: var(--font-main);
}

/* =========================================================
   🪐 星空粒子画布层（Canvas 背景）
========================================================= */
#stars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10;   /* ✅ 提升层级，让星星浮在流光层上方 */
  pointer-events: none;
  background: transparent !important;
}
body::before { z-index: -4; }   /* 环形流光最底层 */
body::after { z-index: -3; }    /* 星点层中间 */

/* =========================================================
   💫 环形流光层（旋转发光底纹）
========================================================= */
body::before {
  content: "";
  position: fixed;
  inset: -5%;
  background: conic-gradient(
    from 0deg,
    rgba(0,255,255,0.06),
    rgba(80,0,255,0.12),
    rgba(255,215,0,0.08),
    rgba(0,255,255,0.06)
  );
  filter: blur(70px);
  animation: rotateFlow 45s linear infinite;
  z-index: -5; /* ✅ 保证最底层 */
  transform-origin: center;
}

/* =========================================================
   ✨ 星空点阵层（星点缓慢漂移）
========================================================= */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(white 1px, transparent 1px),
    radial-gradient(rgba(0,255,255,0.25) 1px, transparent 1px),
    radial-gradient(rgba(255,215,0,0.18) 1px, transparent 1px);
  background-size: 2px 2px, 3px 3px, 6px 6px;
  opacity: 0.25;
  animation: starDrift 120s linear infinite;
  z-index: -4;
}

/* 🌠 星空点缓慢飘动 */
@keyframes starDrift {
  from {
    background-position: 0 0, 0 0, 0 0;
  }
  to {
    background-position: 800px 600px, -500px 400px, 300px -200px;
  }
}

/* 🔄 环形流光旋转动画 */
@keyframes rotateFlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* =========================================================
   📱 安全区适配（防止状态栏遮挡）
========================================================= */
@supports(padding: max(0px)) {
  body {
    padding-top: env(safe-area-inset-top);
  }
}