/* ═══════════════════════════════════════════
   BASE — 全局重置、body、背景效果层
   修改整体背景渐变、全局字体等时改此文件
   ═══════════════════════════════════════════ */

/* 全局重置 */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background: var(--deep-black);
  color: var(--star-white);
  font-family: 'Noto Sans SC', sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

/* 屏幕震动状态 */
body.shaking { animation: screenShake .45s ease-in-out; }

/* 星星背景容器 */
#stars-bg { position:fixed; inset:0; pointer-events:none; z-index:0; }

/* 单颗星星 */
.star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: twinkle var(--d) infinite alternate ease-in-out;
}

/* 深色叠加渐变（始终在最底层） */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 20%, rgba(45,20,88,.55) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 80%, rgba(10,5,40,.75) 0%, transparent 60%),
    radial-gradient(ellipse 100% 100% at 50% 50%, rgba(5,5,20,1) 0%, transparent 100%);
  z-index: 0;
  pointer-events: none;
  animation: bgBreath 8s ease-in-out infinite;
}

/* ─── 动态背景特效层 ─── */

/* 容器 */
#bg-fx { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }

/* 迷雾光团（由 JS 动态生成，见 js/ui/effects.js → initBgFx） */
.mist-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, var(--mc) 0%, transparent 65%);
  filter: blur(45px);
  animation: mistDrift var(--md) ease-in-out infinite;
  animation-delay: var(--mde);
}

/* 金色微光粒子（由 JS 动态生成） */
.micro-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(201,168,76,.85) 0%, rgba(201,168,76,.3) 40%, transparent 70%);
  filter: blur(1px);
  box-shadow: 0 0 6px 2px rgba(201,168,76,.3);
  animation: orbRise var(--od) ease-in infinite;
  animation-delay: var(--odel);
}

/* 闪光尘埃颗粒（由 JS 动态生成） */
.shimmer-dust {
  position: absolute;
  pointer-events: none;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(201,168,76,.9);
  box-shadow: 0 0 3px 1px rgba(201,168,76,.55), 0 0 8px 2px rgba(201,168,76,.2);
  animation: shimmerFloat var(--sd) ease-in-out infinite var(--sde);
}

/* ─── 雨滴层（雨林模式时显示） ─── */
#rain-layer { position:fixed; inset:0; pointer-events:none; z-index:0; display:none; }
.rain-drop {
  position: absolute;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(160,210,255,.3), transparent);
  border-radius: 1px;
  animation: rainFall var(--rd) linear infinite;
  animation-delay: var(--rde);
}

/* ─── 页面系统 ─── */
.page { display:none; position:relative; z-index:1; min-height:100vh; padding-top:76px; }
.page.active { display:block; }
#page-home.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 76px 20px 40px;
}

/* ─── 滚动条美化 ─── */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--deep-black); }
::-webkit-scrollbar-thumb { background:var(--mystic-purple); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--accent-gold); }

/* ─── 免责声明条 ─── */
.disclaimer-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  text-align: center;
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.22);
  letter-spacing: 0.04em;
  padding: 5px 16px;
  pointer-events: none;
  user-select: none;
}