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

@font-face {
  font-family: 'WuCN';
  src: url('https://pub-8df52e5e46f14a25ac93f93411edb534.r2.dev/fonts/wu-cn.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'WenCN';
  src: url('https://pub-8df52e5e46f14a25ac93f93411edb534.r2.dev/fonts/wen-cn.otf') format('opentype');
  font-display: swap;
}

:root {
  --text-light: #FFFFFF;
  --text-dim: rgba(255, 255, 255, 0.75);
  --text-mute: rgba(255, 255, 255, 0.45);
  --wu-red: #E60012;
  --wu-red-dark: #8B0000;
  --wu-black: #000000;
  --wu-white: #FFFFFF;
  --wu-gold: #F5C518;
  --wen-blue: #4DA8FF;
  --wen-blue-deep: #0A1B3D;
  --wen-blue-dark: #0F1E3D;
  --wen-silver: #C0D8FF;
  --wen-cyan: #5EE6F0;
}

html, body { width: 100%; min-height: 100vh; }
body {
  font-family: 'Oswald', 'PingFang SC', 'Microsoft YaHei', -apple-system, sans-serif;
  background: #000;
  color: var(--text-light);
  position: relative;
  font-size: 14px;
  line-height: 1.5;
  overflow-x: hidden;
}
body.mode-wu { font-family: 'Bebas Neue', 'WuCN', 'PingFang SC', 'Microsoft YaHei', sans-serif; }
body.mode-wen { font-family: 'Cinzel', 'WenCN', 'PingFang SC', 'Microsoft YaHei', serif; }

/* ============ 主背景 ============ */
.scene-bg {
  position: fixed; inset: 0; z-index: -3;
  background-color: #000;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  animation: bgBreathe 12s ease-in-out infinite;
}
@keyframes bgBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
.scene-bg.wu { background-image: url('https://pub-8df52e5e46f14a25ac93f93411edb534.r2.dev/wu/bg-main.png'); }
.scene-bg.wen { background-image: url('https://pub-8df52e5e46f14a25ac93f93411edb534.r2.dev/wen/bg-main.png'); }
.scene-bg.wu.fallback {
  background-image:
    radial-gradient(circle at 20% 20%, rgba(230, 0, 18, 0.4), transparent 40%),
    repeating-conic-gradient(from 0deg at 80% 80%, #000 0deg 15deg, #1a1a1a 15deg 30deg);
  background-size: 100% 100%, 200px 200px;
}
.scene-bg.wen.fallback {
  background-image:
    radial-gradient(circle at 70% 20%, rgba(192, 216, 255, 0.4), transparent 30%),
    linear-gradient(180deg, #0F1E3D 0%, #000 100%);
}

.scene-mask {
  position: fixed; inset: 0; z-index: -2;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0.8) 100%);
  pointer-events: none;
}
.scene-overlay {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0, 0, 0, 0.05) 2px, rgba(0, 0, 0, 0.05) 3px);
  mix-blend-mode: multiply;
}

.particles { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.particle { position: absolute; border-radius: 50%; }
.mode-wu .particle {
  background: rgba(230, 0, 18, 0.4);
  animation: drift 20s linear infinite;
}
.mode-wen .particle {
  background: rgba(192, 216, 255, 0.5);
  box-shadow: 0 0 6px rgba(192, 216, 255, 0.8);
  animation: fall 15s linear infinite;
}
@keyframes drift {
  0% { transform: translate(0, 100vh) scale(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translate(15vw, -10vh) scale(1.5); opacity: 0; }
}
@keyframes fall {
  0% { transform: translate(0, -10vh); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translate(2vw, 110vh); opacity: 0; }
}