.Background-root *, .Background-root *::before, .Background-root *::after,
#Background-app *, #Background-app *::before, #Background-app *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}

/* 嵌入游戏页：叠在游戏之上、不挡点击 / Embed: above game, clicks pass through */
#Background-app {
  --Background-bg1: #0a0e1a;
  --Background-bg2: #141b2e;
  --Background-accent: #6ee7ff;
  --Background-accent2: #a78bfa;
  --Background-gold: #fbbf24;
  --Background-text: #f1f5f9;
  --Background-muted: rgba(241, 245, 249, 0.45);

  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  font-family: "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Noto Sans JP",
    "Malgun Gothic", "Noto Sans Devanagari", sans-serif;
  color: var(--Background-text);
}

/* 游戏层 z-index:1，背景层 z-index:2 透传点击 / Game below decorative overlay */
body > :not(#Background-app):not(.Background-contact-email):not(.drag-ghost):not(.overlay):not(.modal):not(.quick-links) {
  position: relative;
  z-index: 1;
}

/* 挂到 body 的浮层保持 fixed，避免撑出滚动条 / Body-mounted layers stay fixed */
body > .drag-ghost {
  position: fixed !important;
  z-index: 9999;
  pointer-events: none;
}

body > .overlay,
body > .modal {
  position: fixed !important;
  z-index: 10000;
}

/* 快捷外链浮层保持全屏 fixed / Quick links stay viewport-fixed */
body > .quick-links {
  position: fixed !important;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

#Background-app * {
  pointer-events: none;
}

#Background-app .Background-contact-email {
  pointer-events: auto;
}

.Background-root {
  --Background-bg1: #0a0e1a;
  --Background-bg2: #141b2e;
  --Background-accent: #6ee7ff;
  --Background-accent2: #a78bfa;
  --Background-gold: #fbbf24;
  --Background-text: #f1f5f9;
  --Background-muted: rgba(241, 245, 249, 0.45);

  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Noto Sans JP",
    "Malgun Gothic", "Noto Sans Devanagari", sans-serif;
  background: var(--Background-bg1);
  color: var(--Background-text);
}

/* 独立页时背景作为主页 / Standalone page: background is main layer */
.Background-root #Background-app {
  z-index: 0;
}

/* 嵌入游戏：轻光晕 + 淡底，保证文字可读 / Embed: soft glow + readable text */
#Background-app .Background-bg-mesh {
  background:
    radial-gradient(ellipse 85% 65% at 12% 18%, rgba(110, 231, 255, 0.28), transparent 58%),
    radial-gradient(ellipse 75% 55% at 88% 78%, rgba(167, 139, 250, 0.3), transparent 58%),
    radial-gradient(ellipse 65% 50% at 50% 100%, rgba(251, 191, 36, 0.16), transparent 52%),
    linear-gradient(160deg, rgba(8, 12, 22, 0.18) 0%, rgba(14, 20, 36, 0.14) 100%);
}

/* 嵌入时文字加亮加粗阴影 / Brighter embedded text */
#Background-app .Background-phrase::before {
  color: rgba(255, 255, 255, 0.58);
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.85),
    0 0 24px rgba(0, 0, 0, 0.55);
}
#Background-app .Background-filled::before {
  color: rgba(255, 255, 255, 0.66);
}
#Background-app .Background-highlight::before {
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.85));
}

.Background-root #Background-app .Background-bg-mesh {
  background:
    radial-gradient(ellipse 80% 60% at 15% 20%, rgba(110, 231, 255, 0.18), transparent 55%),
    radial-gradient(ellipse 70% 50% at 85% 75%, rgba(167, 139, 250, 0.2), transparent 55%),
    radial-gradient(ellipse 60% 45% at 50% 100%, rgba(251, 191, 36, 0.1), transparent 50%),
    linear-gradient(160deg, var(--Background-bg1) 0%, var(--Background-bg2) 45%, #0d1220 100%);
}

/* ===== 动态渐变背景 / Animated gradient mesh ===== */
.Background-bg-mesh {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  animation: Background-meshShift 18s ease-in-out infinite alternate;
}

@keyframes Background-meshShift {
  0%   { filter: hue-rotate(0deg) brightness(1); }
  100% { filter: hue-rotate(18deg) brightness(1.06); }
}

/* 网格纹理 / Grid texture */
.Background-bg-grid {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.2;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 20%, transparent 75%);
}

/* ===== 多语言文字背景层 / Multilingual text background ===== */
.Background-text-field {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
  padding: 3vh 4vw;
}

.Background-phrase {
  position: absolute;
  max-width: 46vw;
  line-height: 1.35;
  animation: Background-floatPhrase var(--Background-dur, 32s) ease-in-out infinite;
  animation-delay: var(--Background-delay, 0s);
  opacity: 1;
  transform: rotate(var(--Background-rot, 0deg));
}

.Background-phrase::before {
  content: "";
  display: block;
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.28);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.65),
    0 0 18px rgba(0, 0, 0, 0.35);
}

.Background-filled::before {
  color: rgba(255, 255, 255, 0.34);
}

.Background-highlight::before {
  background: linear-gradient(90deg, #b8f0ff, #c4b5fd, #fde68a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
}

.Background-long {
  max-width: 38vw;
}
.Background-long::before {
  white-space: normal;
}

/* 各语言文案 / Per-language copy */
.Background-p1::before  { content: "喜欢这个域名联系我"; }
.Background-p2::before  { content: "Like this domain? Contact me"; }
.Background-p3::before  { content: "このドメインが気に入りましたか？お問い合わせください"; }
.Background-p4::before  { content: "Нравится этот домен? Свяжитесь со мной"; }
.Background-p5::before  { content: "هل أعجبك هذا النطاق؟ تواصل معي"; }
.Background-p6::before  { content: "Wenn Ihnen diese Domain gefällt, kontaktieren Sie mich."; }
.Background-p7::before  { content: "이 도메인이 마음에 들면 연락주세요."; }
.Background-p8::before  { content: "Si te gusta este dominio, contáctame."; }
.Background-p9::before  { content: "अगर आपको यह डोमेन पसंद है, तो मुझसे संपर्क करें।"; }
.Background-p10::before { content: "喜歡這個域名聯繫我"; }

@keyframes Background-floatPhrase {
  0%, 100% { transform: rotate(var(--Background-rot, 0deg)) translate(0, 0); }
  50%      { transform: rotate(var(--Background-rot, 0deg)) translate(6px, -8px); }
}

/* 左右分列错位排布 / Staggered two-column layout */
.Background-p1  { top: 4%;  left: 4%;   font-size: clamp(20px, 3.4vw, 40px); --Background-rot: -4deg; --Background-dur: 34s; --Background-delay: 0s;   text-align: left; }
.Background-p2  { top: 11%; right: 4%;  font-size: clamp(15px, 2.5vw, 28px); --Background-rot: 3deg;  --Background-dur: 30s; --Background-delay: -3s;  text-align: right; }
.Background-p3  { top: 20%; left: 4%;   font-size: clamp(13px, 2vw, 22px);   --Background-rot: -2deg; --Background-dur: 32s; --Background-delay: -6s;  text-align: left; }
.Background-p4  { top: 28%; right: 4%;  font-size: clamp(14px, 2.3vw, 26px); --Background-rot: 2deg;  --Background-dur: 28s; --Background-delay: -2s;  text-align: right; }
.Background-p5  { top: 38%; left: 4%; right: auto; max-width: 38vw; font-size: clamp(14px, 2.2vw, 24px); --Background-rot: -2deg; --Background-dur: 36s; --Background-delay: -9s; text-align: left; }
.Background-p6  { top: 48%; right: 4%;  font-size: clamp(12px, 1.9vw, 21px); --Background-rot: 2deg;  --Background-dur: 31s; --Background-delay: -5s;  text-align: right; }
.Background-p7  { top: 57%; left: 4%;   font-size: clamp(14px, 2.3vw, 26px); --Background-rot: -2deg; --Background-dur: 29s; --Background-delay: -8s;  text-align: left; }
.Background-p8  { top: 66%; right: 4%;  font-size: clamp(15px, 2.5vw, 28px); --Background-rot: 3deg;  --Background-dur: 33s; --Background-delay: -4s;  text-align: right; }
.Background-p9  { top: 76%; left: 4%;   font-size: clamp(13px, 2vw, 22px);   --Background-rot: -2deg; --Background-dur: 30s; --Background-delay: -11s; text-align: left; }
.Background-p10 { top: 86%; right: 4%;  font-size: clamp(18px, 3vw, 34px);   --Background-rot: 2deg;  --Background-dur: 35s; --Background-delay: -7s;  text-align: right; }

#Background-app .Background-text-field .Background-p5,
.Background-root .Background-text-field .Background-p5 {
  left: 4% !important;
  right: auto !important;
  text-align: left !important;
}

.Background-p5::before {
  white-space: normal;
  text-align: left;
  direction: rtl;
}

/* 光晕装饰 / Glow orbs */
.Background-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(70px);
  z-index: 0;
  pointer-events: none;
  animation: Background-orbDrift 22s ease-in-out infinite alternate;
  opacity: 0.65;
}
.Background-orb-a { width: 260px; height: 260px; top: 8%;  left: -4%;  background: rgba(110, 231, 255, 0.1); }
.Background-orb-b { width: 240px; height: 240px; bottom: 10%; right: -4%; background: rgba(167, 139, 250, 0.1); animation-delay: -8s; }
.Background-orb-c { width: 180px; height: 180px; top: 62%; left: 38%;  background: rgba(251, 191, 36, 0.06); animation-delay: -14s; }

@keyframes Background-orbDrift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(30px, -24px) scale(1.12); }
}

/* 右下角邮箱（挂到 body 时置顶）/ Email on body stays on top */
body > .Background-contact-email {
  z-index: 100;
  pointer-events: auto;
}

.Background-contact-email {
  position: fixed;
  right: 20px;
  bottom: 18px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: #f1f5f9;
  background: rgba(12, 16, 28, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.Background-contact-email:hover {
  transform: translateY(-2px);
  border-color: rgba(110, 231, 255, 0.45);
  box-shadow: 0 10px 28px rgba(110, 231, 255, 0.18);
}

.Background-contact-email:active { transform: scale(0.98); }

.Background-contact-email-icon {
  font-size: 15px;
  line-height: 1;
  opacity: 0.9;
}

.Background-contact-email-addr {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  min-width: 1em;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .Background-phrase, .Background-bg-mesh, .Background-orb { animation: none; }
}

@media (max-width: 600px) {
  .Background-phrase { max-width: 88vw; }
  .Background-phrase::before { white-space: normal; }
  .Background-p1, .Background-p10 { font-size: 17px; }
  .Background-p2, .Background-p4, .Background-p7, .Background-p8 { font-size: 13px; }
  .Background-p3, .Background-p5, .Background-p6, .Background-p9 { font-size: 12px; }
  .Background-p5 {
    left: 4% !important;
    right: auto !important;
    max-width: 42vw;
  }
  .Background-contact-email {
    right: 12px;
    bottom: 12px;
    padding: 9px 13px;
    font-size: 12px;
  }
}