@import url(//fonts.googleapis.com/css?family=Open+Sans:400,700,600);

:root {
    --brand-gold: #FFC300;
    --soft-white: rgba(255, 255, 255, 0.6);
}

*{
    box-sizing:border-box;
}

::-webkit-scrollbar {
    width: 16px;
}
::-webkit-scrollbar-thumb {
    background-color: hsla(0, 0%, 100%, .3);
}

html,body{
    margin: 0;
    padding: 0;
    background-color: #848b91;
    height: 100vh;
    font-family: 'Open Sans, sans-serif, SimHei';
    /* W3C 标准属性，用于 Firefox 和最新 Chrome/Edge */
    user-select: none; 
    /* Safari (iOS) 和基于 WebKit 的浏览器 */
    -webkit-user-select: none; 
    /* 旧版 Edge/IE */
    -ms-user-select: none; 
    /* 旧版 Firefox */
    -moz-user-select: none; 
    /* 阻止文本光标显示 (辅助效果) */
    cursor: default;

    scrollbar-color: hsla(0, 0%, 100%, .3) transparent;
    scrollbar-width: auto;
}

.hidden {
    display: none !important;
}

.welcome-container {
    background-color: transparent;
    z-index: 1000;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* height: 100%; */
    height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    color: #E0E0E6;
}
.welcome-container .welcome-container-inner {
    width: 100%;
    max-width: 700px;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    padding: 20px;
    /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); */
    overflow: hidden;
    z-index: 1;
}
.app-logo {
    width: 100px;
    height: 100px;
    padding: 5px;
    background: linear-gradient(45deg, #FFC300, #FF5733);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(255, 195, 0, 0.6);
    z-index: 1000;
}
.app-logo-img {
    max-width: 100%;
    height: auto;
}
.welcome-container .author {
    margin-top: 3rem;
    margin-bottom: 1.5rem;
}
.welcome-container .text-label {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 300;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.welcome-container .text-value {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 2px;
    display: block;
}
.welcome-container .brand-highlight {
    color: #FFC300;
    font-weight: 700;
    text-shadow: 0 0 8px rgba(255, 195, 0, 0.4);
    transition: color 0.3s;
}
.welcome-container .swipe-indicator {
    position: absolute;
    bottom: 30px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: fade-and-nudge 2s infinite ease-in-out;
}
/* 5. 自定义 V 形箭头样式 */
.welcome-container .swipe-arrow {
    position: relative; /* 成为伪元素的定位上下文 */
    width: 100px; /* 容器宽度 */
    height: 10px; /* 容器高度 */
    margin-bottom: 5px;
    --ratate-degree: 10;
}
/* 箭头左侧线条 (向右下旋转) */
.welcome-container .swipe-arrow::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50px; /* 线条长度 */
    height: 4px; /* 线条厚度 */
    border-radius: 1rem 0rem 0rem 1rem;
    background-color: rgba(255, 255, 255, 0.5); /* 使用白色线条 */
    transform: rotate(calc(var(--ratate-degree) * -1deg)); /* 逆时针旋转 30 度 */
    transform-origin: 100% 50%; /* 以右侧端点为旋转中心 */
}
/* 箭头右侧线条 (向左下旋转) */
.welcome-container .swipe-arrow::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50px; /* 线条长度 */
    height: 4px; /* 线条厚度 */
    border-radius: 0rem 1rem 1rem 0rem;
    background-color: rgba(255, 255, 255, 0.5); /* 使用白色线条 */
    transform: rotate(calc(var(--ratate-degree) * 1deg)); /* 顺时针旋转 30 度 */
    transform-origin: 0% 50%; /* 以左侧端点为旋转中心 */
}
/* 4. 滑动提示动画效果 */
@keyframes fade-and-nudge {
    0%, 100% { 
        opacity: 0.2; /* 若隐若现 */
        transform: translateY(0);
    }
    50% { 
        opacity: 0.7; /* 完全显示 */
        transform: translateY(-10px); /* 向上微移 */
    }
}


img.emoji {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    font-size: 150px;
    z-index: 1;
}
.light-level-10 img.emoji {
    font-size: 120px;
}
.heart-particle img.emoji {
    font-size: unset;
}

.username {
  color: #9C27B0;
  font-size: small;
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.username::before {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 1rem;
  background-color: #9C27B0;
  transform: translate(-100%, -50%);
  box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.8), 0 0 10px 5px rgba(255, 255, 255, 0.6), 0 0 20px 10px rgba(173, 216, 230, 0.4);
  opacity: 0.3;
}
.username::after {
  content: '';
  position: absolute;
  width: 5px;
  height: 30px;
  background-color: #fff;
  border-radius: 50%;
  transform: rotate(68deg) translate(-17px, 11%);
  box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.6);
  opacity: 0.3;
}
.username.show-name::before, .username.show-name::after {
  display: none;
}
.username:hover {
  cursor: pointer;
}
.username:hover::before {
  background-color: #4A148C;
}

#content-container{
  z-index: 2;
  position: relative;
  margin: 0 auto;
  display: table;
  padding: 10px;
  max-width: 940px;
  height: 100%;
}
#content-container-center{
  display: table-cell;
  text-align: center;
}

#content-container-center h3{
  color: #254356;
}

#choice{
  transition: all 300ms linear;
  line-height: 1.3em;
  display: inline;
  vertical-align: middle;
  font-size: 3em;
}
#choice a{
  text-decoration:none;
}
#choice a:hover, #choice a:focus{
  outline:0;
  text-decoration:underline;
}

#choice button{
  display: block;
  height: 80px;
  width: 330px;
  border: none;
  color: white;
  text-transform: uppercase;
  font-size:18px;
  font-weight: 700;
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: left;
  padding-left: 50px;
}

#choice button.a:hover{
  background-color: #1488c6;
}

#choice button.b:hover{
  background-color: #00a2a1;
}

#choice button.c:hover{
  background-color: #27292b;
}

#choice button.a:focus{
  background-color: #1488c6;
}

#choice button.b:focus{
  background-color: #00a2a1;
}

#choice button.c:focus{
  background-color: #27292b;
}

#background-stats{
  z-index:1;
  height:100%;
  width:100%;
  position:absolute;
}
#background-stats div{
  transition: width 400ms ease-in-out;
  display:inline-block;
  margin-bottom:-4px;
  width:50%;
  height:100%;
}


.floating-banner {
    position: fixed;
    width: 100%;
    top: 0px;
    z-index: 9999;
    
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease-in, scale 0.1s ease-in, transform 0.3s ease-in-out;

    opacity: 0;
}
.floating-banner .message-box {
    display: grid;
    grid-template-columns: calc(100% - 34px) 34px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    /* 关键：半透明背景和背景模糊 */
    background: linear-gradient(135deg, deeppink, rgb(255 20 147 / 80%), deeppink, rgb(255 20 147 / 70%), deeppink); 
    
    /* 玻璃边框和阴影 */
    border-radius: 10rem;
    padding: 5px;
    
    /* 内部文字颜色改为白色，以适配深色玻璃背景 */
    color: white; 
    pointer-events: auto; 
    width: 80%;
    max-width: 400px;
}
.change-song-announce:hover {
    cursor: pointer;
    transition: all 0.1s ease-in;
}
.change-song-avatar {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background-size: cover;
    background-position: center;
    padding: 2px;
    background: linear-gradient(45deg, #FFC300, #FF5733);
}
.avatar-img {
    max-width: 100%;
    height: auto;
    border-radius: 100%
}
.change-song-wrapper {
    width: calc(100% - 40px);
    white-space: nowrap;
    overflow: hidden;
}
.is-scrolling {
    /* 动画持续时间通过JS动态设置CSS变量 --scroll-speed */
    animation-duration: var(--scroll-speed);
    animation-name: marquee-scroll;
    animation-timing-function: linear;
    animation-iteration-count: 1; /* 只执行一次 */
    animation-fill-mode: forwards; 
}
/* 4. 关键帧定义：从左侧开头 (0) 滚动到终点 (--scroll-end) */
@keyframes marquee-scroll {
    from {
        transform: translateX(0); 
    }
    to {
        transform: translateX(var(--scroll-end)); 
    }
}


/* wrapper style */
.modal-wrapper {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 9999;
    backdrop-filter: blur(4px);
    background: #00000000;
    
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-screen {  
    background: #00000000;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem;
    height: 100vh;
    width: 100vw;
    justify-content: space-between;
    color: white;
    opacity: 0;
    transition: opacity 0.5s ease-in;
    
    display: none;
    /* top: 0; */
    /* transition: opacity 0.3s ease; */
}
.login-screen .login-screen-title {
    text-align: center;
    margin-top: 5vh;
    margin-bottom: auto;
    width: 100%;

    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    gap: 20px;

    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.55, 0.06, 0.68, 0.19);
}
.login-screen .main-header-sub {
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--soft-white);
    letter-spacing: 0.15em;
    margin-bottom: 0.5rem;
}
.login-screen .main-header-title {
    font-size: 3.5rem;
    color: #FFC300;
    background: linear-gradient(135deg, #FFEFBA 0%, var(--brand-gold) 100%);
    -webkit-background-clip: text;
    text-shadow: 0 0 15px rgba(255, 195, 0, 0.8), 0 0 5px rgba(255, 255, 255, 0.5);
    letter-spacing: 0.1em;
    line-height: 1;
    transform: scaleY(1.1);
}
.login-screen-content {
    /* 关键：半透明背景和背景模糊 */
    background: linear-gradient(135deg, rgb(0 0 0 / 30%), rgb(80 80 80 / 30%), rgb(0 0 0 / 30%), rgb(0 0 0 / 30%), rgb(0 0 0 / 30%)); 
    backdrop-filter: blur(20px); /* 进一步模糊输入框后的背景 */
    -webkit-backdrop-filter: blur(20px);
    
    /* 玻璃边框和阴影 */
    border-radius: 12px;
    box-shadow: inset 0px 0px 0px 2px rgb(255 255 255 / 25%), 0 8px 32px 0 rgb(145 145 149 / 37%); /* 浮动感强的阴影 */

    padding: 30px 40px;
    text-align: center;
    
    /* 内部文字颜色改为白色，以适配深色玻璃背景 */
    color: white; 
    pointer-events: auto; 
    width: 85%;
    max-width: 400px;

    opacity: 0;
    transform: scale(0.1);
    transition: opacity 0.4s ease-out, /* 弹性曲线：(0.68, -0.55, 0.265, 1.55) */ transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
/* 模态框激活状态 */
.login-screen-active {
    opacity: 1; /* 激活背景 */
}
.login-screen-active .login-screen-content, .login-screen-active .login-screen-title {
    opacity: 1;
    transform: scale(1); /* 缩放到全尺寸 */
    z-index: 1000;
}

.login-screen .input-field {
    /* 输入框本身也改为透明或半透明 */
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 8px;
    font-size: 1rem;
    color: white;
    outline: none; /* 移除默认焦点轮廓 */
}
.login-screen .input-field::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.login-screen .input-label {
    display: block;
    margin-bottom: 5px;
    font-size: small;
    color: white; /* 标签文字使用白色 */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); /* 增加文字可读性 */
}

.login-screen .confirm-button {
    margin-top: 20px;
    padding: 10px 20px;
    /* 按钮使用微妙的渐变和半透明 */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
    color: whitesmoke; /* 黑色文字，高对比度 */
    border: none;
    box-shadow: inset 0px 0px 0px 1px rgb(255 255 255 / 30%);
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.3s ease;
}
.login-screen .confirm-button:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.3));
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}
.login-screen .confirm-button.check-error {
    color: rgb(255 255 255);
    background: rgb(236 108 108 / 40%);
    box-shadow: inset 0px 0px 0px 3px rgb(236, 108, 108);
}

.login-screen .bottom-filler {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-bottom: 2rem;
}
.login-screen .subtle-wave-line {
    width: 60%;
    max-width: 400px;
    height: 4px;
    background: linear-gradient(90deg, transparent, rgba(255, 196, 0, 0.6), transparent);
    border-radius: 9999px;
    margin-bottom: 1.5rem;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.4s ease-out, transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    animation: pulse-glow 3s infinite ease-in-out;
}
.login-screen-active .subtle-wave-line {
    opacity: 1;
    transform: scale(1); /* 缩放到全尺寸 */
}
@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(255, 195, 0, 0.5);
        transform: scaleX(1);
        opacity: 0.8;
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 195, 0, 0.9);
        transform: scaleX(1.05); /* 稍微拉伸，创造呼吸感 */
        opacity: 1;
    }
}
@media (max-width: 500px) {
  .login-screen .subtle-wave-line {
    width: 90%;
  }
  @keyframes pulse-glow {
      0%, 100% {
          box-shadow: 0 0 10px rgba(255, 195, 0, 0.5);
          transform: scaleX(0.8);
          opacity: 0.8;
      }
      50% {
          box-shadow: 0 0 20px rgba(255, 195, 0, 0.9);
          transform: scaleX(1.1); /* 稍微拉伸，创造呼吸感 */
          opacity: 1;
      }
  }
}
.login-screen .legal-text {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 300;
}

.privacy-policy {
    color: darksalmon;
}
.privacy-policy:hover {
    cursor: pointer;
    text-decoration: underline;
}
.privacy-policy-wrapper {
    display: none;
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.4s ease-out, /* 弹性曲线：(0.68, -0.55, 0.265, 1.55) */ transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.privacy-policy-wrapper.display {
    display: flex;
    opacity: 1;
    transform: scale(1);
}
.privacy-policy-container {
    background: linear-gradient(145deg, #1e003c, #0d001a);
    border-radius: 0.75rem;
    border: 1px solid #353535;
    padding: 1.5rem;
    --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    width: 95%;
    height: 95%;
}
.privacy-policy-container h1 {
    text-align: center;
    font-size: 1rem;
    line-height: 2.25rem;
    font-weight: 800;
    --tw-text-opacity: 1;
    color: white;
    margin-bottom: 0.25rem;
}
.switch-language-link:hover, .privacy-policy-close:hover {
    cursor: pointer;
    color: darksalmon;
}
.privacy-policy-title {
    margin: 0 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.multi-reg-warn {
    text-align: center;
    display: none;
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.4s ease-out, transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.multi-reg-warn.display {
    display: flex;
    opacity: 1;
    transform: scale(1);
}

.animated-gradient-text {
    display: flex;
    justify-content: center;
    gap: 10px;

    margin-top: 10px; text-align: right;
    background: linear-gradient(135deg, #d75050, /* 赤 Red */ #FF7F00, /* 橙 Orange */ #FFFF00, /* 黄 Yellow */ #68d768, /* 绿 Green */ #00FFFF, /* 青 Cyan */ #8b8be7, /* 蓝 Blue */ #ab6cdf, /* 紫 Violet */ #c35454 /* 🎯 修复：再次添加红色，实现无缝循环 */);
    
    /* 2. 剪裁背景为文字形状 */
    -webkit-background-clip: text;
    background-clip: text; 
    color: transparent; /* 确保旧浏览器兼容性 */
    /* 3. 放大背景尺寸 (关键步骤) */
}
.animated-gradient-text:hover {
  cursor: pointer;
}
.animated-gradient-text.aing {
    background-size: 500% 500%; 
    /* 4. 应用动画 */
    animation: gradientScroll 2s linear infinite;
}
@keyframes gradientScroll {
    from {
        /* 从背景的左上角开始 */
        background-position: 0% 0%;
    }
    to {
        /* 滚动到背景的右下角，由于 background-size 很大，这会产生连续的滚动效果 */
        background-position: 100% 100%;
    }
}
.magic-wand {
    color: #ffcc00; /* 初始颜色：金色 */
    text-shadow: 0 0 10px rgba(255, 204, 0, 0.8);
    display: inline-block;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    transition: transform 0.3s ease-in-out;
    
    /* 施法效果动画 */
    animation: spark-pulse 0.5s ease infinite alternate;     /* 魔法光芒脉冲 */
    
    /* 设置旋转中心为魔杖的末端 (右下角) */
    transform-origin: bottom right; 
}
/* 挥舞动画只在点击时或施法时触发 */
.aing .magic-wand {
    animation: wand-arc-path 3s ease-in-out alternate, spark-pulse 0.5s ease infinite alternate;
}

/* Configuration variables for the animation */
:root {
  --x-offset: 50px;
  --y-offset: 25px;
  --animation-duration: 1.5s;
  --fade-in-delay: 1.5s;
}

/* Scoped CSS variables make the calculations easier to see */
#x {
  --name: horizontal;
  --duration: var(--animation-duration);
  --delay: calc(-0.25 * var(--animation-duration));
}
#y {
  --name: vertical;
  --duration: calc(0.5 * var(--animation-duration));
  --delay: 0s;
}

.aing #x, .aing  #y {
  --animation: var(--duration) ease-in-out var(--delay) alternate infinite var(--name), spark-pulse 0.5s ease infinite alternate;
}

@keyframes vertical {
  from { transform: rotate(20deg) translateY(-50px); }
  to   { transform: rotate(-20deg) translateY(-30px); }
}
@keyframes horizontal {
  from { transform: translateX(-20px); }
  to   { transform: translateX(60px); }
}

#x, #y {
  text-align: center;
  animation: var(--animation),
    10s var(--fade-in-delay) cubic-bezier(0.75, 0, 0.55, 0.95) forwards fade-in-details
}

/* 1. 魔法棒挥舞动作 (Waving Animation) */
@keyframes wand-wave {
    0% {
        transform: rotate(0deg) translate(0, 0);
    }
    100% {
        /* 旋转并稍微向上和右移动，模拟挥动 */
        transform: rotate(-25deg) translate(10px, -20px);
    }
}
/* 1. 魔法棒苍蝇轨迹动画 (Fly Path Animation) */
@keyframes wand-fly-path {
    0% {
        transform: translate(0, 0) rotate(0deg); /* 起点 */
    }
    15% {
        /* 快速向上和左偏移 */
        transform: translate(-40px, -60px) rotate(15deg);
    }
    35% {
        /* 快速向右下俯冲 */
        transform: translate(60px, 10px) rotate(-50deg);
    }
    60% {
        /* 迂回向上方盘旋 */
        transform: translate(0px, -50px) rotate(25deg);
    }
    100% {
        transform: translate(0, 0) rotate(0deg); /* 终点 (回到原位) */
    }
}
/* 新的魔法棒动画：实现平滑的“无穷大符号” (Figure-Eight) 轨迹 */
@keyframes wand-arc-path {
  0% { transform: translate(0, 0); }
  25% { transform: translate(100px, 50px) rotate(90deg); } /* Adjust path and rotation */
  50% { transform: translate(0, 100px) rotate(180deg); }
  75% { transform: translate(-100px, 50px) rotate(270deg); }
  100% { transform: translate(0, 0) rotate(360deg); }
}

/* 2. 魔法光芒脉冲 (Sparkle/Magic Pulse Animation) */
@keyframes spark-pulse {
    0% {
        color: #ffcc00; /* 初始颜色 */
        text-shadow: 0 0 10px rgba(255, 204, 0, 0.8), 0 0 15px rgba(255, 100, 200, 0.2);
    }
    100% {
        color: #ffffff; /* 达到最大光芒时变为白色 */
        /* 增加更强的光晕，带有紫色的魔法色彩 */
        text-shadow: 0 0 20px rgba(255, 255, 255, 1), 0 0 30px rgba(139, 0, 255, 0.8); 
    }
}

/* star style */
.star-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    opacity: 0.7;
    user-select: none;
}
/* 星星容器，用于定位每个星星 */
.star-container {
    position: absolute;
    /* 初始设置为不可见，动画开始时才出现 */
    opacity: 0;
}
.star-background.display .star-container {
    animation: fadeInStar 2s ease-out forwards; /* 控制星星逐渐出现 */
}
/* 随机化星星的位置和动画延迟 */
.star-background.display .star-1 { top: 10%; left: 20%; animation-delay: 0.5s; scale: 0.8; }
.star-background.display .star-2 { top: 50%; left: 10%; animation-delay: 1.2s; scale: 0.7; }
.star-background.display .star-3 { top: 68%; left: 61%; animation-delay: 0.8s; scale: 1.1; }
.star-background.display .star-4 { top: 25%; left: 3%; animation-delay: 1.5s; scale: 0.5; }
.star-background.display .star-5 { top: 59%; left: 69%; animation-delay: 0.3s; scale: 0.4; }
.star-background.display .star-6 { top: 76%; left: 78%; animation-delay: 1.0s; scale: 1.1; }
.star-background.display .star-7 { top: 40%; left: 52%; animation-delay: 0.7s; scale: 1.0; }
.star-background.display .star-8 { top: 15%; left: 65%; animation-delay: 1.8s; scale: 1.2; }
.star-background.display .star-9 { top: 30%; left: 24%; animation-delay: 0.6s; scale: 0.8; }
.star-background.display .star-10 { top: 70%; left: 93%; animation-delay: 1.3s; scale: 0.6; }
/* 单个星星的闪烁和延迟设置 */
.star-background.display .star-1 .star { animation-duration: 3s; animation-delay: 0.8s; }
.star-background.display .star-2 .star { animation-duration: 5s; animation-delay: 0.2s; }
.star-background.display .star-3 .star { animation-duration: 4s; animation-delay: 1.5s; }
.star-background.display .star-4 .star { animation-duration: 6s; animation-delay: 0.5s; }
.star-background.display .star-5 .star { animation-duration: 2.5s; animation-delay: 0s; }
.star-background.display .star-6 .star { animation-duration: 4.5s; animation-delay: 1.0s; }
.star-background.display .star-7 .star { animation-duration: 3.5s; animation-delay: 0.4s; }
.star-background.display .star-8 .star { animation-duration: 5.5s; animation-delay: 1.2s; }
.star-background.display .star-9 .star { animation-duration: 3.2s; animation-delay: 0.7s; }
.star-background.display .star-10 .star { animation-duration: 4.2s; animation-delay: 1.9s; }
/* 星星主体的样式 */
.star {
    width: 2px; /* 星星的核心大小 */
    height: 2px;
    background-color: #fff;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.8), /* 核心光晕 */
                0 0 10px 5px rgba(255, 255, 255, 0.6),
                0 0 20px 10px rgba(173, 216, 230, 0.4); /* 蓝色外层光晕 */
}
body:not(.no-animation) .star {
    /* 呼吸动画 */
    animation: twinkle 2s ease-in-out infinite alternate;
}
/* 使用伪元素创建星星的“光芒”或“尖角” */
.star::before,
.star::after {
    content: '';
    position: absolute;
    background-color: #fff;
    border-radius: 50%;
    opacity: 0.8;
}
/* 垂直方向的光芒 */
.star::before {
    top: -5px; /* 调整位置使其从中心发出 */
    left: -1px;
    width: 4px;
    height: 12px;
    transform: rotate(90deg); /* 旋转以创建十字形 */
    box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.6);
}
/* 水平方向的光芒 */
.star::after {
    top: -5px;
    left: -1px;
    width: 4px;
    height: 12px;
    box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.6);
}
/* 星星的呼吸/闪烁动画 */
@keyframes twinkle {
    0% {
        transform: scale(1);
        opacity: 1;
        box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.8),
                    0 0 10px 5px rgba(255, 255, 255, 0.6),
                    0 0 20px 10px rgba(173, 216, 230, 0.4);
    }
    50% {
        transform: scale(0.8);
        opacity: 0.7;
        box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.8),
                    0 0 10px 5px rgba(255, 255, 255, 0.6),
                    0 0 20px 10px rgba(173, 216, 230, 0.4);
    }
    100% {
        transform: scale(1.1);
        opacity: 1;
        box-shadow: 0 0 8px 5px rgba(255, 255, 255, 1), /* 更亮 */
                    0 0 15px 8px rgba(255, 255, 255, 0.8),
                    0 0 30px 15px rgba(173, 216, 230, 0.6);
    }
}
/* 星星逐渐出现的动画 */
@keyframes fadeInStar {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: scale(1); }
}


/* --- 动态背景容器 --- */
.futuristic-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 核心效果：应用高斯模糊实现弥散 */
    filter: blur(150px); 
    /* 混合模式：让 blob 颜色更好地交融 */
    mix-blend-mode: screen; 
    opacity: 0.8; 
    pointer-events: none; /* 确保不阻挡鼠标事件 */
    z-index: 999;
}

/* --- 颜色团块 (Blob) 基础样式 --- */
.blob {
    position: absolute;
    border-radius: 50%; /* 圆形 */
    width: 600px;
    height: 600px;
}

/* --- 各个 Blob 的颜色和初始位置 --- */
.blob-pink {
    background: radial-gradient(circle, #ff00ff, #800080); /* 亮粉到紫 */
    top: 10%;
    left: 5%;
}
body:not(.no-animation) .blob-pink {
    animation: moveBlobPink 3s infinite alternate ease-in-out;
}

.blob-blue {
    background: radial-gradient(circle, #00ffff, #0000ff); /* 亮青到蓝 */
    bottom: 30%;
    right: 10%;
}
body:not(.no-animation) .blob-blue {
    animation: moveBlobBlue 2s infinite alternate ease-in-out;
}

.blob-purple {
    background: radial-gradient(circle, #aa00ff, #500080); /* 紫到深紫 */
    top: 40%;
    right: 50%;
}
body:not(.no-animation) .blob-purple {
    animation: moveBlobPurple 1.5s infinite alternate ease-in-out;
}

/* --- Blob 动画定义 (让它们缓慢流动) --- */
@keyframes moveBlobPink {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(15vw, 15vh) scale(1.1); }
}

@keyframes moveBlobBlue {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-20vw, -10vh) scale(0.95); }
}

@keyframes moveBlobPurple {
    0% { transform: translate(0, 0) scale(1.2); }
    100% { transform: translate(10vw, -25vh) scale(1.05); }
}