:root {
  --xuyuanshu-primary: #2E7D32;
  --xuyuanshu-secondary: #4CAF50;
  --xuyuanshu-accent: #FFC107;
  --xuyuanshu-glow: rgba(255, 235, 59, 0.3);
  --tree-trunk: #5D4037;
  --tree-bark: #3E2723;
  --leaf-light: #81C784;
  --leaf-dark: #1B5E20;
}

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

body {
  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
  overflow: hidden;
  background: #0a0a1a;
}

#xuyuanshu-app {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

#xuyuanshu-tree-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
}

#xuyuanshu-wishes-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
  pointer-events: auto;
}

#xuyuanshu-background {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
  transition: all 1.5s ease;
}

.xuyuanshu-season-bg[data-season="spring"] {
  background: 
    radial-gradient(ellipse 120% 80% at 50% 100%, rgba(144, 238, 144, 0.4) 0%, transparent 70%),
    linear-gradient(180deg,
      #1a1a2e 0%,
      #16213e 20%,
      #0f3460 40%,
      #e94560 70%,
      #ff6b6b 100%
    );
}

.xuyuanshu-season-bg[data-season="summer"] {
  background: 
    radial-gradient(ellipse 100% 60% at 30% 20%, rgba(255, 255, 200, 0.3) 0%, transparent 50%),
    radial-gradient(ellipse 80% 50% at 70% 30%, rgba(255, 200, 100, 0.2) 0%, transparent 40%),
    linear-gradient(180deg,
      #0c1445 0%,
      #1a237e 30%,
      #3949ab 50%,
      #5c6bc0 70%,
      #7986cb 100%
    );
}

.xuyuanshu-season-bg[data-season="autumn"] {
  background: 
    radial-gradient(ellipse 100% 50% at 50% 0%, rgba(255, 150, 50, 0.3) 0%, transparent 50%),
    linear-gradient(180deg,
      #1a0a2e 0%,
      #2d1b4e 20%,
      #4a1942 40%,
      #6b2d5c 60%,
      #8b4513 80%,
      #cd853f 100%
    );
}

.xuyuanshu-season-bg[data-season="winter"] {
  background: 
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(200, 220, 255, 0.3) 0%, transparent 50%),
    linear-gradient(180deg,
      #0a0a1a 0%,
      #1a1a2e 30%,
      #2a2a4e 50%,
      #3a3a5e 70%,
      #4a4a6e 100%
    );
}

#xuyuanshu-light-rays {
  position: absolute;
  top: -50%;
  left: 50%;
  width: 200%;
  height: 200%;
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
}

.xuyuanshu-ray {
  position: absolute;
  top: 0;
  width: 4px;
  height: 150%;
  background: linear-gradient(180deg, rgba(255, 255, 200, 0.4) 0%, rgba(255, 255, 200, 0.1) 50%, transparent 100%);
  transform-origin: top center;
  animation: rayPulse 4s ease-in-out infinite;
}

@keyframes rayPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(1); }
  50% { opacity: 0.6; transform: scaleY(1.1); }
}

#xuyuanshu-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
}

.xuyuanshu-particle {
  position: absolute;
  top: -20px;
  animation: particleFall linear infinite;
  opacity: 0.7;
}

@keyframes particleFall {
  0% {
    transform: translateY(-20px) rotate(0deg) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 0.7;
  }
  90% {
    opacity: 0.7;
  }
  100% {
    transform: translateY(100vh) rotate(720deg) translateX(100px);
    opacity: 0;
  }
}

#xuyuanshu-fireflies {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 15;
  pointer-events: none;
}

#xuyuanshu-climate-effects {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 12;
  pointer-events: none;
  overflow: hidden;
}

.xuyuanshu-climate-snow {
  position: absolute;
  top: -20px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,1) 0%, rgba(200,220,255,0.8) 100%);
  border-radius: 50%;
  animation: snowFall linear infinite;
  box-shadow: 0 0 10px rgba(255,255,255,0.8);
}

@keyframes snowFall {
  0% {
    transform: translateY(-20px) translateX(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) translateX(100px) rotate(360deg);
    opacity: 0;
  }
}

.xuyuanshu-climate-rain {
  position: absolute;
  top: -20px;
  width: 3px;
  height: 20px;
  background: linear-gradient(180deg, transparent 0%, rgba(150,180,255,0.6) 100%);
  border-radius: 0 0 50% 50%;
  animation: rainFall linear infinite;
}

@keyframes rainFall {
  0% {
    transform: translateY(-20px);
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(100vh);
    opacity: 0.3;
  }
}

#xuyuanshu-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 20px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
  background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
}

.xuyuanshu-title {
  font-size: 3rem;
  font-weight: bold;
  color: #fff;
  text-shadow:
    0 0 20px rgba(255, 215, 0, 0.9),
    0 0 40px rgba(255, 215, 0, 0.6),
    0 0 60px rgba(255, 215, 0, 0.4),
    0 0 80px rgba(255, 215, 0, 0.2),
    3px 3px 6px rgba(0,0,0,0.8);
  letter-spacing: 12px;
  animation: titleGlow 3s ease-in-out infinite;
}

@keyframes titleGlow {
  0%, 100% {
    text-shadow:
      0 0 20px rgba(255, 215, 0, 0.9),
      0 0 40px rgba(255, 215, 0, 0.6),
      0 0 60px rgba(255, 215, 0, 0.4),
      3px 3px 6px rgba(0,0,0,0.8);
  }
  50% {
    text-shadow:
      0 0 30px rgba(255, 215, 0, 1),
      0 0 60px rgba(255, 215, 0, 0.8),
      0 0 90px rgba(255, 215, 0, 0.6),
      3px 3px 6px rgba(0,0,0,0.8);
  }
}

#xuyuanshu-user-area {
  display: flex;
  gap: 15px;
  align-items: center;
}

.xuyuanshu-btn {
  padding: 12px 30px;
  border: 2px solid rgba(255, 215, 0, 0.5);
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 165, 0, 0.2) 100%);
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

.xuyuanshu-btn:hover {
  transform: translateY(-3px);
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.4) 0%, rgba(255, 165, 0, 0.4) 100%);
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
}

.xuyuanshu-btn-small {
  padding: 8px 18px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 20px;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
}

.xuyuanshu-btn-small:hover {
  background: rgba(255, 215, 0, 0.3);
  border-color: rgba(255, 215, 0, 0.5);
}

#xuyuanshu-user-info {
  display: flex;
  align-items: center;
  gap: 15px;
  color: #fff;
  font-size: 1.1rem;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

#xuyuanshu-wish-tree {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  z-index: 20;
}

.xuyuanshu-tree-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 90%;
}

.xuyuanshu-tree-trunk {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 450px;
  background:
    repeating-linear-gradient(90deg,
      transparent 0px,
      rgba(139,90,43,0.3) 2px,
      transparent 4px,
      rgba(101,67,33,0.2) 6px,
      transparent 8px
    ),
    linear-gradient(180deg,
      #2d1b0e 0%,
      #4a3728 15%,
      #5D4037 30%,
      #795548 45%,
      #6D4C41 55%,
      #5D4037 70%,
      #4a3728 85%,
      #2d1b0e 100%
    );
  border-radius: 20px 20px 30px 30px;
  box-shadow:
    -35px 20px 60px rgba(0,0,0,0.65),
    35px 20px 60px rgba(0,0,0,0.65),
    inset -25px 10px 50px rgba(0,0,0,0.45),
    inset 25px 10px 50px rgba(255,248,220,0.08);
}

.xuyuanshu-tree-trunk::before {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  height: 100px;
  background: radial-gradient(ellipse at center bottom,
    rgba(40,25,15,0.95) 0%,
    rgba(60,40,25,0.7) 30%,
    rgba(80,55,35,0.4) 50%,
    transparent 75%
  );
  border-radius: 50%;
  filter: blur(8px);
}

.xuyuanshu-tree-trunk::after {
  content: '';
  position: absolute;
  top: 100px;
  left: 52%;
  transform: translateX(-50%);
  width: 70px;
  height: 250px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,0,0,0.25) 25%,
    rgba(0,0,0,0.38) 48%,
    rgba(0,0,0,0.28) 72%,
    transparent 100%
  );
  border-radius: 50%;
  filter: blur(12px);
}

.xuyuanshu-tree-branch {
  position: absolute;
  background: linear-gradient(90deg,
    #2d1b0e 0%,
    #4a3728 20%,
    #5D4037 40%,
    #6D4C41 55%,
    #5D4037 70%,
    #4a3728 85%,
    #2d1b0e 100%
  );
  border-radius: 12px;
  box-shadow:
    -5px 10px 25px rgba(0,0,0,0.5),
    inset -2px 2px 8px rgba(0,0,0,0.35),
    inset 2px -2px 8px rgba(255,248,220,0.08);
}

.xuyuanshu-tree-branch::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 30%;
  width: 40%;
  height: 60%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,0,0,0.15) 45%,
    rgba(0,0,0,0.22) 52%,
    rgba(0,0,0,0.15) 58%,
    transparent 100%
  );
  border-radius: 50%;
  filter: blur(6px);
  transform: translateY(-50%);
}

.xuyuanshu-tree-branch-1 {
  bottom: 320px;
  left: calc(50% - 220px);
  width: 240px;
  height: 32px;
  transform: rotate(-28deg);
}

.xuyuanshu-tree-branch-2 {
  bottom: 360px;
  left: calc(50% + 60px);
  width: 220px;
  height: 30px;
  transform: rotate(25deg);
}

.xuyuanshu-tree-branch-3 {
  bottom: 400px;
  left: calc(50% - 180px);
  width: 200px;
  height: 26px;
  transform: rotate(-18deg);
}

.xuyuanshu-tree-branch-4 {
  bottom: 440px;
  left: calc(50% + 40px);
  width: 170px;
  height: 24px;
  transform: rotate(32deg);
}

.xuyuanshu-tree-branch-5 {
  bottom: 250px;
  left: calc(50% - 150px);
  width: 150px;
  height: 20px;
  transform: rotate(-38deg);
}

.xuyuanshu-tree-branch-6 {
  bottom: 480px;
  left: calc(50% - 80px);
  width: 120px;
  height: 18px;
  transform: rotate(-10deg);
}

.xuyuanshu-tree-crown {
  position: absolute;
  bottom: 280px;
  left: 50%;
  transform: translateX(-50%);
  width: 1000px;
  height: 750px;
}

.xuyuanshu-tree-glow {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 750px;
  height: 750px;
  background: radial-gradient(ellipse at center,
    rgba(120, 220, 120, 0.45) 0%,
    rgba(80, 180, 80, 0.3) 25%,
    rgba(60, 150, 60, 0.2) 40%,
    rgba(40, 120, 40, 0.12) 55%,
    transparent 70%
  );
  border-radius: 50%;
  animation: treeGlow 5s ease-in-out infinite;
  filter: blur(35px);
}

@keyframes treeGlow {
  0%, 100% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1);
  }
  33% {
    opacity: 0.85;
    transform: translate(-50%, -50%) scale(1.08);
  }
  66% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(1.04);
  }
}

.xuyuanshu-tree-layer {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50% 50% 45% 45%;
  animation: treeSway 7s ease-in-out infinite;
}

.xuyuanshu-tree-layer-1 {
  bottom: 0;
  width: 1000px;
  height: 550px;
  background: radial-gradient(ellipse at 50% 85%,
    #0d3310 0%,
    #1B5E20 12%,
    #2E7D32 25%,
    #388E3C 40%,
    #43A047 52%,
    #4CAF50 62%,
    #43A047 72%,
    #388E3C 82%,
    #2E7D32 90%,
    #1B5E20 96%,
    #0d3310 100%
  );
  box-shadow:
    inset 0 -100px 140px rgba(5,20,5,0.75),
    inset 0 80px 160px rgba(120,220,120,0.18),
    inset -60px 30px 100px rgba(10,50,15,0.35),
    inset 60px 30px 100px rgba(80,180,80,0.12),
    0 45px 110px rgba(0,0,0,0.55);
  z-index: 1;
}

.xuyuanshu-tree-layer-2 {
  bottom: 90px;
  width: 880px;
  height: 490px;
  background: radial-gradient(ellipse at 50% 80%,
    #1a4720 0%,
    #2E7D32 18%,
    #388E3C 32%,
    #43A047 46%,
    #4CAF50 58%,
    #66BB6A 70%,
    #4CAF50 80%,
    #388E3C 88%,
    #2E7D32 95%,
    #1a4720 100%
  );
  box-shadow:
    inset 0 -70px 115px rgba(8,25,8,0.68),
    inset 0 65px 130px rgba(100,200,100,0.22),
    inset -50px 25px 90px rgba(12,45,12,0.28),
    inset 50px 25px 90px rgba(90,190,90,0.14),
    0 33px 78px rgba(0,0,0,0.48);
  z-index: 2;
  animation-delay: 0.5s;
}

.xuyuanshu-tree-layer-3 {
  bottom: 170px;
  width: 740px;
  height: 430px;
  background: radial-gradient(ellipse at 50% 75%,
    #2a6e30 0%,
    #388E3C 18%,
    #43A047 32%,
    #4CAF50 46%,
    #66BB6A 58%,
    #81C784 70%,
    #66BB6A 80%,
    #4CAF50 88%,
    #388E3C 95%,
    #2a6e30 100%
  );
  box-shadow:
    inset 0 -58px 92px rgba(5,15,5,0.55),
    inset 0 56px 112px rgba(80,170,80,0.26),
    inset -42px 22px 78px rgba(10,35,12,0.25),
    inset 42px 22px 78px rgba(70,160,70,0.16),
    0 23px 57px rgba(0,0,0,0.42);
  z-index: 3;
  animation-delay: 1s;
}

.xuyuanshu-tree-layer-4 {
  bottom: 240px;
  width: 580px;
  height: 370px;
  background: radial-gradient(ellipse at 50% 70%,
    #368840 0%,
    #43A047 16%,
    #4CAF50 32%,
    #66BB6A 48%,
    #81C784 62%,
    #A5D6A7 74%,
    #81C784 84%,
    #66BB6A 92%,
    #4CAF50 97%,
    #368840 100%
  );
  box-shadow:
    inset 0 -48px 82px rgba(4,10,4,0.45),
    inset 0 45px 90px rgba(60,150,60,0.31),
    inset -35px 20px 68px rgba(8,28,10,0.22),
    inset 35px 20px 68px rgba(55,140,55,0.19),
    0 17px 44px rgba(0,0,0,0.37);
  z-index: 4;
  animation-delay: 1.5s;
}

.xuyuanshu-tree-layer-5 {
  bottom: 300px;
  width: 440px;
  height: 300px;
  background: radial-gradient(ellipse at 50% 65%,
    #43a048 0%,
    #4CAF50 14%,
    #66BB6A 30%,
    #81C784 46%,
    #A5D6A7 60%,
    #C8E6C9 72%,
    #A5D6A7 82%,
    #81C784 90%,
    #66BB6A 96%,
    #43a048 100%
  );
  box-shadow:
    inset 0 -35px 68px rgba(3,6,3,0.38),
    inset 0 34px 76px rgba(45,125,45,0.36),
    inset -28px 18px 56px rgba(6,20,8,0.19),
    inset 28px 18px 56px rgba(40,120,40,0.24),
    0 13px 34px rgba(0,0,0,0.33);
  z-index: 5;
  animation-delay: 2s;
}

.xuyuanshu-tree-layer-6 {
  bottom: 350px;
  width: 300px;
  height: 220px;
  background: radial-gradient(ellipse at 50% 60%,
    #52b85c 0%,
    #66BB6A 12%,
    #81C784 28%,
    #A5D6A7 44%,
    #C8E6C9 58%,
    #E8F5E9 70%,
    #C8E6C9 80%,
    #A5D6A7 88%,
    #81C784 94%,
    #52b85c 100%
  );
  box-shadow:
    inset 0 -25px 58px rgba(2,4,2,0.32),
    inset 0 25px 66px rgba(30,105,30,0.41),
    inset -20px 15px 46px rgba(5,15,6,0.16),
    inset 20px 15px 46px rgba(28,100,28,0.29),
    0 9px 28px rgba(0,0,0,0.28);
  z-index: 6;
  animation-delay: 2.5s;
}

@keyframes treeSway {
  0%, 100% {
    transform: translateX(-50%) rotate(0deg) scale(1);
  }
  20% {
    transform: translateX(-50%) rotate(0.5deg) scale(1.002);
  }
  40% {
    transform: translateX(-50%) rotate(-0.4deg) scale(1.001);
  }
  60% {
    transform: translateX(-50%) rotate(0.6deg) scale(1.003);
  }
  80% {
    transform: translateX(-50%) rotate(-0.3deg) scale(1.001);
  }
}

#xuyuanshu-wishes-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
}

.xuyuanshu-wish-bubble {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 60;
  filter: drop-shadow(0 0 20px rgba(255,255,255,0.6))
          drop-shadow(0 5px 15px rgba(100,150,255,0.3));
}

.xuyuanshu-bubble-outer {
  position: relative;
  border-radius: 50%;
  background:
    radial-gradient(circle at 28% 28%,
      rgba(255,255,255,1) 0%,
      rgba(245,250,255,0.98) 8%,
      rgba(230,242,255,0.95) 18%,
      rgba(210,230,255,0.9) 30%,
      rgba(185,215,255,0.85) 42%,
      rgba(160,200,255,0.78) 55%,
      rgba(140,185,255,0.7) 68%,
      rgba(120,170,255,0.62) 80%,
      rgba(105,155,255,0.54) 90%,
      rgba(95,145,255,0.48) 100%
    ),
    linear-gradient(135deg,
      rgba(255,120,180,0.12) 0%,
      rgba(120,220,255,0.12) 25%,
      rgba(180,120,255,0.12) 50%,
      rgba(255,180,120,0.12) 75%,
      rgba(120,255,180,0.12) 100%
    );
  box-shadow:
    inset 2px 2px 25px rgba(255,255,255,0.8),
    inset -4px -6px 35px rgba(80,130,220,0.32),
    inset 4px -4px 20px rgba(150,190,255,0.18),
    inset -4px 4px 15px rgba(255,120,160,0.12),
    0 0 40px rgba(255,255,255,0.75),
    0 0 70px rgba(200,225,255,0.52),
    0 0 110px rgba(160,195,255,0.36),
    0 0 155px rgba(125,170,255,0.22),
    0 5px 18px rgba(60,100,180,0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: bubbleFloat 4s ease-in-out infinite, bubbleIridescence 3s linear infinite;
  transition: all 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow: visible;
}

.xuyuanshu-bubble-outer::before {
  content: '';
  position: absolute;
  top: 10%;
  left: 14%;
  width: 38%;
  height: 27%;
  background: radial-gradient(ellipse at 40% 35%,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,0.92) 22%,
    rgba(245,250,255,0.65) 48%,
    rgba(230,240,255,0.32) 72%,
    transparent 92%
  );
  border-radius: 50%;
  transform: rotate(-38deg);
  filter: blur(2.5px);
}

.xuyuanshu-bubble-outer::after {
  content: '';
  position: absolute;
  top: 66%;
  left: 76%;
  width: 16%;
  height: 11%;
  background: radial-gradient(ellipse at center,
    rgba(255,255,255,0.88) 0%,
    rgba(240,248,255,0.58) 42%,
    transparent 82%
  );
  border-radius: 50%;
  filter: blur(3.5px);
}

@keyframes bubbleFloat {
  0%, 100% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
  22% {
    transform: translateY(-10px) scale(1.03) rotate(1.2deg);
  }
  50% {
    transform: translateY(-17px) scale(1.055) rotate(-0.3deg);
  }
  77% {
    transform: translateY(-9px) scale(1.025) rotate(-1deg);
  }
}

@keyframes bubbleIridescence {
  0% {
    filter: hue-rotate(0deg) saturate(1) brightness(1);
  }
  25% {
    filter: hue-rotate(18deg) saturate(1.12) brightness(1.06);
  }
  50% {
    filter: hue-rotate(34deg) saturate(1.22) brightness(1.12);
  }
  75% {
    filter: hue-rotate(18deg) saturate(1.12) brightness(1.06);
  }
  100% {
    filter: hue-rotate(0deg) saturate(1) brightness(1);
  }
}

.xuyuanshu-bubble-outer:hover {
  transform: scale(1.25) rotate(6deg);
  box-shadow:
    inset 2px 2px 32px rgba(255,255,255,0.9),
    inset -5px -8px 44px rgba(80,130,220,0.4),
    inset 5px -5px 26px rgba(150,190,255,0.23),
    inset -5px 5px 19px rgba(255,120,160,0.16),
    0 0 50px rgba(255,255,255,0.88),
    0 0 90px rgba(200,225,255,0.64),
    0 0 140px rgba(160,195,255,0.46),
    0 0 195px rgba(125,170,255,0.29),
    0 7px 24px rgba(60,100,180,0.36);
}

.xuyuanshu-bubble-dream {
  background: radial-gradient(circle at 30% 30%,
    rgba(255, 220, 240, 0.95) 0%,
    rgba(220, 180, 220, 0.85) 30%,
    rgba(180, 140, 200, 0.75) 60%,
    rgba(140, 100, 180, 0.65) 100%
  ) !important;
  animation: bubbleFloat 4s ease-in-out infinite, dreamSparkle 2.5s ease-in-out infinite !important;
}

@keyframes dreamSparkle {
  0%, 100% { 
    filter: hue-rotate(0deg) brightness(1) saturate(1);
  }
  50% { 
    filter: hue-rotate(25deg) brightness(1.15) saturate(1.2);
  }
}

.xuyuanshu-bubble-star {
  background: radial-gradient(circle at 30% 30%,
    rgba(255, 255, 220, 0.95) 0%,
    rgba(255, 230, 150, 0.85) 30%,
    rgba(255, 200, 100, 0.75) 60%,
    rgba(255, 170, 50, 0.65) 100%
  ) !important;
  animation: bubbleFloat 4s ease-in-out infinite, starGlow 1.8s ease-in-out infinite !important;
}

@keyframes starGlow {
  0%, 100% {
    box-shadow:
      inset 0 0 40px rgba(255,255,200,0.6),
      0 0 30px rgba(255,255,150,0.6),
      0 0 60px rgba(255,220,100,0.4),
      0 0 90px rgba(255,200,50,0.2);
  }
  50% {
    box-shadow:
      inset 0 0 50px rgba(255,255,200,0.8),
      0 0 40px rgba(255,255,150,0.8),
      0 0 80px rgba(255,220,100,0.6),
      0 0 120px rgba(255,200,50,0.4);
  }
}

.xuyuanshu-bubble-inner {
  font-size: 0.75rem;
  color: rgba(50, 50, 80, 0.9);
  text-align: center;
  padding: 8px;
  opacity: 0.85;
  animation: textShimmer 2.5s ease-in-out infinite;
  max-width: 85%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 0 5px rgba(255,255,255,0.8);
}

@keyframes textShimmer {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

.xuyuanshu-bubble-full {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 320px;
  padding: 25px;
  background: rgba(255,255,255,0.98);
  border-radius: 25px;
  box-shadow: 
    0 15px 60px rgba(0,0,0,0.4),
    0 0 30px rgba(255,255,255,0.3);
  z-index: 100;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  font-size: 1.05rem;
  color: #333;
  line-height: 1.7;
  backdrop-filter: blur(10px);
}

.xuyuanshu-bubble-outer:hover .xuyuanshu-bubble-full {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.xuyuanshu-bubble-outer:hover .xuyuanshu-bubble-inner {
  opacity: 0;
  transform: scale(0.5);
}

.xuyuanshu-wish-ribbon {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 60;
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.4));
}

.xuyuanshu-ribbon-body {
  position: relative;
  padding: 15px 35px;
  background: linear-gradient(135deg,
    var(--ribbon-color) 0%,
    var(--ribbon-color-dark) 100%
  );
  border-radius: 10px;
  box-shadow:
    0 8px 25px rgba(0,0,0,0.4),
    inset 0 3px 8px rgba(255,255,255,0.4),
    inset 0 -3px 8px rgba(0,0,0,0.2);
  animation: ribbonWave 3.5s ease-in-out infinite;
  transition: all 0.3s ease;
}

.xuyuanshu-ribbon-body::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 10px solid var(--ribbon-color-dark);
}

.xuyuanshu-ribbon-body::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 10px solid var(--ribbon-color-dark);
}

@keyframes ribbonWave {
  0%, 100% { transform: rotate(-3.5deg) translateX(0) scale(1); }
  20% { transform: rotate(-1.5deg) translateX(2.5px) scale(1.002); }
  40% { transform: rotate(2deg) translateX(-1px) scale(0.998); }
  60% { transform: rotate(3.5deg) translateX(-2px) scale(1.001); }
  80% { transform: rotate(1.5deg) translateX(1.5px) scale(0.999); }
}

.xuyuanshu-ribbon-silk {
  background:
    linear-gradient(135deg,
      var(--ribbon-color) 0%,
      color-mix(in srgb, var(--ribbon-color) 52%, white) 18%,
      var(--ribbon-color) 36%,
      color-mix(in srgb, var(--ribbon-color) 52%, white) 54%,
      var(--ribbon-color) 72%,
      color-mix(in srgb, var(--ribbon-color) 55%, black) 86%,
      var(--ribbon-color-dark) 100%
    ),
    repeating-linear-gradient(90deg,
      transparent 0px,
      rgba(255,255,255,0.09) 2px,
      transparent 4px
    ) !important;
  background-size: 250% 250%, auto !important;
  animation: ribbonWave 3.5s ease-in-out infinite, silkShine 1.6s linear infinite !important;
}

@keyframes silkShine {
  0% {
    background-position: 200% 200%, 0 0;
  }
  50% {
    background-position: 100% 0%, 0 0;
  }
  100% {
    background-position: 0% -200%, 0 0;
  }
}

.xuyuanshu-ribbon-gold {
  border: 4px solid gold !important;
  box-shadow:
    -4px 8px 28px rgba(0,0,0,0.45),
    2px -3px 15px rgba(0,0,0,0.25),
    inset 0 4px 12px rgba(255,255,255,0.65),
    inset 0 -4px 10px rgba(0,0,0,0.22),
    inset -5px 0 14px rgba(0,0,0,0.08),
    inset 5px 0 14px rgba(255,248,180,0.12),
    0 0 28px rgba(255,215,0,0.7),
    0 0 56px rgba(255,195,0,0.45),
    0 0 84px rgba(255,175,0,0.25) !important;
  animation: ribbonWave 3.5s ease-in-out infinite, goldPulse 2s ease-in-out infinite !important;
}

.xuyuanshu-ribbon-text {
  font-size: 0.9rem;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
  animation: textShimmer 2.5s ease-in-out infinite;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xuyuanshu-ribbon-full {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 300px;
  padding: 25px;
  background: rgba(255,255,255,0.98);
  border-radius: 20px;
  box-shadow: 0 15px 50px rgba(0,0,0,0.4);
  z-index: 100;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  font-size: 1rem;
  color: #333;
  line-height: 1.7;
  backdrop-filter: blur(10px);
}

.xuyuanshu-ribbon-body:hover .xuyuanshu-ribbon-full {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.xuyuanshu-ribbon-body:hover .xuyuanshu-ribbon-text {
  opacity: 0;
  transform: scale(0.5);
}

.xuyuanshu-wish-delete {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff4444 0%, #cc0000 100%);
  color: white;
  border: 2px solid white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  z-index: 200;
  transition: all 0.2s ease;
  box-shadow: 0 0 10px rgba(255,0,0,0.5);
}

.xuyuanshu-wish-delete:hover {
  transform: scale(1.2) rotate(90deg);
  box-shadow: 0 0 20px rgba(255,0,0,0.8);
}

#xuyuanshu-input-panel {
  position: fixed;
  bottom: 120px;
  right: 30px;
  width: 380px;
  padding: 30px;
  background: rgba(255, 255, 255, 0.97);
  border-radius: 25px;
  box-shadow: 
    0 20px 60px rgba(0,0,0,0.3),
    0 0 40px rgba(46, 125, 50, 0.2);
  z-index: 200;
  backdrop-filter: blur(15px);
  border: 1px solid rgba(46, 125, 50, 0.2);
}

#xuyuanshu-input-panel h3 {
  margin-bottom: 25px;
  color: var(--xuyuanshu-primary);
  font-size: 1.5rem;
  text-align: center;
  text-shadow: 0 0 10px rgba(46, 125, 50, 0.3);
}

.xuyuanshu-form-group {
  margin-bottom: 18px;
}

.xuyuanshu-form-group label {
  display: block;
  margin-bottom: 8px;
  color: #444;
  font-weight: 600;
  font-size: 0.95rem;
}

.xuyuanshu-form-group input,
.xuyuanshu-form-group select,
.xuyuanshu-form-group textarea {
  width: 100%;
  padding: 12px 18px;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  font-size: 1rem;
  transition: all 0.3s ease;
  font-family: inherit;
  background: rgba(255,255,255,0.9);
}

.xuyuanshu-form-group input:focus,
.xuyuanshu-form-group select:focus,
.xuyuanshu-form-group textarea:focus {
  border-color: var(--xuyuanshu-secondary);
  outline: none;
  box-shadow: 0 0 15px rgba(76, 175, 80, 0.3);
}

.xuyuanshu-form-group textarea {
  min-height: 110px;
  resize: vertical;
}

#xuyuanshu-submit-wish {
  width: 100%;
  margin-top: 15px;
  padding: 14px;
}

.xuyuanshu-fab {
  position: fixed;
  bottom: 40px;
  right: 40px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FF8C00 100%);
  color: white;
  border: none;
  font-size: 2.5rem;
  cursor: pointer;
  box-shadow: 
    0 8px 40px rgba(255, 165, 0, 0.6),
    0 0 20px rgba(255, 215, 0, 0.4);
  z-index: 150;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.xuyuanshu-fab:hover {
  transform: scale(1.15) rotate(90deg);
  box-shadow: 
    0 12px 50px rgba(255, 165, 0, 0.8),
    0 0 30px rgba(255, 215, 0, 0.6);
}

.xuyuanshu-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
}

.xuyuanshu-modal.active {
  display: flex;
}

.xuyuanshu-modal-content {
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(250,250,250,0.98) 100%);
  padding: 45px;
  border-radius: 30px;
  max-width: 480px;
  width: 90%;
  position: relative;
  box-shadow: 
    0 25px 80px rgba(0,0,0,0.5),
    0 0 50px rgba(46, 125, 50, 0.2);
  animation: modalSlide 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border: 1px solid rgba(46, 125, 50, 0.1);
}

@keyframes modalSlide {
  from {
    transform: translateY(-60px) scale(0.9);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.xuyuanshu-modal-close {
  position: absolute;
  top: 18px;
  right: 22px;
  font-size: 2.2rem;
  cursor: pointer;
  color: #999;
  transition: all 0.3s ease;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.xuyuanshu-modal-close:hover {
  color: #333;
  background: rgba(0,0,0,0.05);
}

.xuyuanshu-form-title {
  text-align: center;
  color: var(--xuyuanshu-primary);
  margin-bottom: 35px;
  font-size: 2rem;
  text-shadow: 0 0 15px rgba(46, 125, 50, 0.3);
}

.xuyuanshu-form-input {
  width: 100%;
  padding: 16px;
  margin-bottom: 18px;
  border: 2px solid #e0e0e0;
  border-radius: 14px;
  font-size: 1.05rem;
  transition: all 0.3s ease;
  background: rgba(255,255,255,0.9);
}

.xuyuanshu-form-input:focus {
  border-color: var(--xuyuanshu-secondary);
  outline: none;
  box-shadow: 0 0 20px rgba(76,175,80,0.35);
}

.xuyuanshu-form-submit {
  width: 100%;
  padding: 16px;
  margin-top: 15px;
  font-size: 1.1rem;
}

.xuyuanshu-admin-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.75);
  z-index: 500;
  display: flex;
  backdrop-filter: blur(8px);
}

.xuyuanshu-admin-sidebar {
  width: 220px;
  background: linear-gradient(180deg, rgba(20,50,20,0.98) 0%, rgba(30,60,30,0.98) 100%);
  padding: 25px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 5px 0 30px rgba(0,0,0,0.5);
}

.xuyuanshu-admin-tab {
  padding: 16px 25px;
  background: transparent;
  color: rgba(255,255,255,0.75);
  border: none;
  text-align: left;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1rem;
  border-left: 4px solid transparent;
}

.xuyuanshu-admin-tab:hover {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.95);
}

.xuyuanshu-admin-tab.active {
  background: rgba(76,175,80,0.25);
  color: #FFD700;
  border-left: 4px solid #FFD700;
}

.xuyuanshu-admin-content {
  flex: 1;
  padding: 35px;
  overflow-y: auto;
  background: rgba(245,245,250,0.98);
}

.xuyuanshu-admin-section {
  background: white;
  padding: 35px;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.12);
}

.xuyuanshu-admin-section h2 {
  color: var(--xuyuanshu-primary);
  margin-bottom: 30px;
  font-size: 1.8rem;
}

.xuyuanshu-admin-section h3 {
  color: #333;
  margin: 25px 0 18px;
  font-size: 1.3rem;
}

.xuyuanshu-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  border-radius: 12px;
  overflow: hidden;
}

.xuyuanshu-table th,
.xuyuanshu-table td {
  padding: 15px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
}

.xuyuanshu-table th {
  background: linear-gradient(135deg, #2E7D32 0%, #4CAF50 100%);
  color: white;
  font-weight: 600;
}

.xuyuanshu-table tbody tr:hover {
  background: rgba(76,175,80,0.08);
}

.xuyuanshu-badge {
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
}

.xuyuanshu-badge-normal {
  background: linear-gradient(135deg, #e0e0e0 0%, #bdbdbd 100%);
  color: #333;
}

.xuyuanshu-badge-vip {
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  color: #333;
}

.xuyuanshu-badge-admin {
  background: linear-gradient(135deg, #9C27B0 0%, #673AB7 100%);
  color: white;
}

.xuyuanshu-toast {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%) translateY(120px);
  padding: 18px 50px;
  background: linear-gradient(135deg, rgba(30,30,30,0.95) 0%, rgba(20,20,20,0.95) 100%);
  color: white;
  border-radius: 35px;
  z-index: 2000;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  font-size: 1.05rem;
  backdrop-filter: blur(15px);
  box-shadow: 0 10px 40px rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.1);
}

.xuyuanshu-toast.show {
  transform: translateX(-50%) translateY(0);
}

.xuyuanshu-hidden {
  display: none !important;
}

.xuyuanshu-form-tip {
  display: block;
  margin-top: 6px;
  font-size: 0.88rem;
  line-height: 1.4;
}

.xuyuanshu-form-error {
  color: #e53935;
}

.xuyuanshu-form-success {
  color: #43a047;
}

.xuyuanshu-form-input.xuyuanshu-input-error {
  border-color: #e53935;
  background-color: #fff8f8;
}

.xuyuanshu-form-input.xuyuanshu-input-success {
  border-color: #43a047;
  background-color: #f8fff8;
}

#xuyuanshu-vip-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 450px;
  background: rgba(255,255,255,0.99);
  border-radius: 25px;
  padding: 35px;
  box-shadow: 0 25px 80px rgba(0,0,0,0.5);
  z-index: 300;
  backdrop-filter: blur(15px);
  border: 2px solid rgba(255,215,0,0.3);
}

#xuyuanshu-vip-panel h3 {
  text-align: center;
  color: var(--xuyuanshu-primary);
  margin-bottom: 25px;
  font-size: 1.7rem;
  text-shadow: 0 0 10px rgba(46,125,50,0.2);
}

#xuyuanshu-vip-packages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
}

.xuyuanshu-vip-package {
  background: linear-gradient(135deg, #fffef0 0%, #fff8e0 100%);
  border: 3px solid #FFD700;
  border-radius: 18px;
  padding: 25px 20px;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 5px 20px rgba(255,215,0,0.2);
}

.xuyuanshu-vip-package:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 15px 40px rgba(255,215,0,0.4);
}

.xuyuanshu-vip-package h4 {
  color: #333;
  margin-bottom: 12px;
  font-size: 1.15rem;
}

.xuyuanshu-vip-price {
  font-size: 2rem;
  color: #FF6B00;
  font-weight: bold;
  margin: 12px 0;
  text-shadow: 0 0 10px rgba(255,107,0,0.2);
}

.xuyuanshu-vip-duration {
  color: #666;
  font-size: 0.95rem;
  margin-bottom: 12px;
}

.xuyuanshu-vip-desc {
  color: #888;
  font-size: 0.85rem;
  margin-bottom: 18px;
}

.xuyuanshu-fab-vip {
  position: fixed;
  bottom: 120px;
  right: 40px;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  color: #333;
  border: none;
  font-size: 0.95rem;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 6px 25px rgba(255,165,0,0.6);
  z-index: 150;
  transition: all 0.3s ease;
}

.xuyuanshu-fab-vip:hover {
  transform: scale(1.1) translateY(-3px);
  box-shadow: 0 10px 35px rgba(255,165,0,0.8);
}

#xuyuanshu-vip-badge {
  display: inline-block;
  padding: 4px 12px;
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  color: #333;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: bold;
  box-shadow: 0 0 10px rgba(255,215,0,0.5);
}

@media (max-width: 768px) {
  .xuyuanshu-title {
    font-size: 1.8rem;
    letter-spacing: 5px;
  }

  #xuyuanshu-tree-container {
    transform: scale(0.65);
  }

  #xuyuanshu-input-panel {
    width: calc(100% - 40px);
    right: 20px;
    bottom: 90px;
  }

  .xuyuanshu-admin-panel {
    flex-direction: column;
  }

  .xuyuanshu-admin-sidebar {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    padding: 0;
  }

  .xuyuanshu-admin-tab {
    padding: 12px 18px;
    white-space: nowrap;
  }
}

.xuyuanshu-ground-glow {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  height: 150px;
  background: radial-gradient(ellipse at center bottom,
    rgba(46, 204, 113, 0.35) 0%,
    rgba(46, 204, 113, 0.15) 30%,
    rgba(46, 150, 50, 0.08) 50%,
    transparent 75%
  );
  border-radius: 50% 50% 0 0;
  filter: blur(20px);
  animation: groundGlow 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 19;
}

@keyframes groundGlow {
  0%, 100% {
    opacity: 0.6;
    transform: translateX(-50%) scaleX(1);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scaleX(1.15);
  }
}

.xuyuanshu-ground-grass {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 140%;
  height: 80px;
  background: radial-gradient(ellipse at center bottom,
    rgba(30, 80, 30, 0.9) 0%,
    rgba(20, 60, 20, 0.7) 40%,
    transparent 100%
  );
  border-radius: 50% 50% 0 0;
  z-index: 18;
  pointer-events: none;
}

.xuyuanshu-grass-blade {
  position: absolute;
  bottom: 40px;
  width: 3px;
  height: 15px;
  background: linear-gradient(180deg, rgba(100, 220, 100, 0.6) 0%, rgba(46, 150, 50, 0.3) 100%);
  border-radius: 50% 50% 0 0;
  transform-origin: bottom center;
  animation: grassSway 3s ease-in-out infinite;
}

@keyframes grassSway {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(8deg); }
}

.xuyuanshu-firefly {
  position: absolute;
  width: 6px;
  height: 6px;
  background: radial-gradient(circle at center,
    rgba(255, 255, 200, 1) 0%,
    rgba(255, 247, 0, 0.9) 30%,
    rgba(255, 200, 0, 0.6) 60%,
    transparent 100%
  );
  border-radius: 50%;
  box-shadow:
    0 0 10px rgba(255, 255, 150, 1),
    0 0 20px rgba(255, 247, 0, 0.8),
    0 0 35px rgba(255, 200, 0, 0.5),
    0 0 50px rgba(255, 180, 0, 0.3);
  animation: fireflyFloat 8s ease-in-out infinite, fireflyGlow 2s ease-in-out infinite;
  pointer-events: none;
  z-index: 25;
}

@keyframes fireflyFloat {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  25% {
    transform: translate(30px, -50px) scale(0.8);
  }
  50% {
    transform: translate(-20px, -100px) scale(1.1);
    opacity: 1;
  }
  75% {
    transform: translate(40px, -60px) scale(0.9);
  }
  90% {
    opacity: 0.8;
  }
  100% {
    transform: translate(10px, -20px) scale(1);
    opacity: 0;
  }
}

@keyframes fireflyGlow {
  0%, 100% {
    box-shadow:
      0 0 10px rgba(255, 255, 150, 1),
      0 0 20px rgba(255, 247, 0, 0.8),
      0 0 35px rgba(255, 200, 0, 0.5);
  }
  50% {
    box-shadow:
      0 0 15px rgba(255, 255, 200, 1),
      0 0 30px rgba(255, 247, 0, 1),
      0 0 50px rgba(255, 200, 0, 0.7),
      0 0 70px rgba(255, 180, 0, 0.4);
  }
}

.xuyuanshu-bubble-outer {
  position: relative;
  border-radius: 50%;
  background: 
    radial-gradient(circle at 30% 30%,
      rgba(255,255,255,0.98) 0%,
      rgba(230, 245, 255, 0.92) 15%,
      rgba(200, 235, 255, 0.88) 30%,
      rgba(180, 220, 255, 0.82) 45%,
      rgba(160, 200, 255, 0.75) 60%,
      rgba(140, 180, 255, 0.68) 75%,
      rgba(120, 160, 255, 0.6) 100%
    ),
    linear-gradient(135deg,
      rgba(255, 100, 200, 0.15) 0%,
      rgba(100, 255, 200, 0.15) 25%,
      rgba(100, 200, 255, 0.15) 50%,
      rgba(200, 100, 255, 0.15) 75%,
      rgba(255, 200, 100, 0.15) 100%
    );
  box-shadow:
    inset 0 0 50px rgba(255,255,255,0.7),
    inset -20px -20px 50px rgba(100,150,255,0.35),
    inset 20px 20px 50px rgba(255,255,255,0.4),
    inset -5px -5px 20px rgba(255,100,200,0.15),
    inset 5px 5px 20px rgba(100,255,200,0.15),
    0 0 40px rgba(255,255,255,0.7),
    0 0 80px rgba(200,230,255,0.5),
    0 0 120px rgba(150,200,255,0.3),
    0 0 160px rgba(100,150,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: bubbleFloat 4s ease-in-out infinite, bubbleIridescence 3s linear infinite;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow: visible;
}

@keyframes bubbleIridescence {
  0% {
    filter: hue-rotate(0deg) saturate(1) brightness(1);
  }
  25% {
    filter: hue-rotate(15deg) saturate(1.1) brightness(1.05);
  }
  50% {
    filter: hue-rotate(30deg) saturate(1.2) brightness(1.1);
  }
  75% {
    filter: hue-rotate(15deg) saturate(1.1) brightness(1.05);
  }
  100% {
    filter: hue-rotate(0deg) saturate(1) brightness(1);
  }
}

.xuyuanshu-bubble-outer::before {
  content: '';
  position: absolute;
  top: 10%;
  left: 15%;
  width: 38%;
  height: 28%;
  background: radial-gradient(ellipse at center,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,0.8) 30%,
    rgba(255,255,255,0.4) 60%,
    transparent 85%
  );
  border-radius: 50%;
  transform: rotate(-40deg);
  filter: blur(3px);
}

.xuyuanshu-bubble-outer::after {
  content: '';
  position: absolute;
  top: 68%;
  left: 78%;
  width: 15%;
  height: 10%;
  background: rgba(255,255,255,0.8);
  border-radius: 50%;
  filter: blur(4px);
}

.xuyuanshu-bubble-dream {
  background:
    radial-gradient(circle at 28% 28%,
      rgba(255,248,252,1) 0%,
      rgba(250,235,245,0.97) 10%,
      rgba(240,215,232,0.94) 22%,
      rgba(225,190,218,0.89) 35%,
      rgba(205,165,200,0.83) 48%,
      rgba(185,140,182,0.76) 62%,
      rgba(165,118,165,0.68) 75%,
      rgba(148,100,150,0.6) 87%,
      rgba(135,88,138,0.52) 95%,
      rgba(125,78,128,0.46) 100%
    ),
    linear-gradient(135deg,
      rgba(255,160,210,0.18) 0%,
      rgba(210,130,255,0.18) 25%,
      rgba(170,110,250,0.18) 50%,
      rgba(255,130,190,0.18) 75%,
      rgba(230,145,220,0.18) 100%
    ) !important;
  animation: bubbleFloat 4s ease-in-out infinite, dreamSparkle 2.5s ease-in-out infinite, dreamIridescence 4s linear infinite !important;
}

@keyframes dreamSparkle {
  0%, 100% {
    filter: hue-rotate(0deg) brightness(1) saturate(1);
    box-shadow:
      inset 2px 2px 25px rgba(255,230,245,0.85),
      inset -4px -6px 35px rgba(180,120,180,0.35),
      0 0 40px rgba(255,220,240,0.75),
      0 0 70px rgba(230,185,225,0.52),
      0 5px 18px rgba(160,100,160,0.3);
  }
  50% {
    filter: hue-rotate(32deg) brightness(1.16) saturate(1.26);
    box-shadow:
      inset 2px 2px 30px rgba(255,230,245,0.94),
      inset -4px -6px 42px rgba(180,120,180,0.44),
      0 0 50px rgba(255,220,240,0.86),
      0 0 90px rgba(230,185,225,0.64),
      0 7px 24px rgba(160,100,160,0.4);
  }
}

@keyframes dreamIridescence {
  0% {
    filter: hue-rotate(0deg) saturate(1.12) brightness(1);
  }
  33% {
    filter: hue-rotate(48deg) saturate(1.34) brightness(1.15);
  }
  66% {
    filter: hue-rotate(22deg) saturate(1.24) brightness(1.08);
  }
  100% {
    filter: hue-rotate(0deg) saturate(1.12) brightness(1);
  }
}

.xuyuanshu-bubble-star {
  background:
    radial-gradient(circle at 28% 28%,
      rgba(255,252,238,1) 0%,
      rgba(255,248,222,0.97) 10%,
      rgba(255,240,195,0.94) 22%,
      rgba(255,228,165,0.89) 35%,
      rgba(255,212,135,0.83) 48%,
      rgba(255,192,108,0.76) 62%,
      rgba(255,172,82,0.68) 75%,
      rgba(255,152,60,0.6) 87%,
      rgba(255,136,45,0.52) 95%,
      rgba(255,122,35,0.46) 100%
    ),
    linear-gradient(135deg,
      rgba(255,235,80,0.22) 0%,
      rgba(255,210,40,0.18) 25%,
      rgba(255,185,20,0.14) 50%,
      rgba(255,160,10,0.1) 75%,
      rgba(255,200,55,0.17) 100%
    ) !important;
  animation: bubbleFloat 4s ease-in-out infinite, starGlow 1.8s ease-in-out infinite, starShimmer 2.5s linear infinite !important;
}

@keyframes starGlow {
  0%, 100% {
    box-shadow:
      inset 2px 2px 25px rgba(255,248,200,0.8),
      inset -4px -6px 35px rgba(220,175,45,0.38),
      0 0 40px rgba(255,245,160,0.72),
      0 0 70px rgba(255,220,105,0.52),
      0 0 110px rgba(255,192,65,0.36),
      0 5px 18px rgba(200,155,25,0.32);
  }
  50% {
    box-shadow:
      inset 2px 2px 32px rgba(255,248,200,0.92),
      inset -4px -6px 44px rgba(220,175,45,0.48),
      0 0 54px rgba(255,245,160,0.85),
      0 0 96px rgba(255,220,105,0.66),
      0 0 146px rgba(255,192,65,0.46),
      0 7px 24px rgba(200,155,25,0.42);
  }
}

@keyframes starShimmer {
  0% {
    filter: hue-rotate(0deg) brightness(1);
  }
  33% {
    filter: hue-rotate(25deg) brightness(1.18);
  }
  66% {
    filter: hue-rotate(15deg) brightness(1.08);
  }
  100% {
    filter: hue-rotate(0deg) brightness(1);
  }
}

.xuyuanshu-ribbon-body {
  position: relative;
  padding: 16px 38px;
  background:
    linear-gradient(135deg,
      var(--ribbon-color) 0%,
      color-mix(in srgb, var(--ribbon-color) 75%, white) 20%,
      var(--ribbon-color) 40%,
      color-mix(in srgb, var(--ribbon-color) 72%, black) 65%,
      var(--ribbon-color-dark) 100%
    ),
    repeating-linear-gradient(90deg,
      transparent 0px,
      rgba(255,255,255,0.06) 2px,
      transparent 4px
    );
  background-size: 400% 400%, auto;
  border-radius: 12px;
  box-shadow:
    -4px 8px 28px rgba(0,0,0,0.45),
    2px -3px 15px rgba(0,0,0,0.25),
    inset 0 4px 12px rgba(255,255,255,0.42),
    inset 0 -4px 10px rgba(0,0,0,0.22),
    inset -5px 0 14px rgba(0,0,0,0.1),
    inset 5px 0 14px rgba(255,255,255,0.08);
  animation: ribbonWave 3.5s ease-in-out infinite, ribbonShine 2.5s linear infinite;
  transition: all 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes ribbonShine {
  0% {
    background-position: 250% 50%, 0 0;
  }
  100% {
    background-position: -150% 50%, 0 0;
  }
}

.xuyuanshu-ribbon-silk {
  background: linear-gradient(135deg,
    var(--ribbon-color) 0%,
    color-mix(in srgb, var(--ribbon-color) 50%, white) 20%,
    var(--ribbon-color) 40%,
    color-mix(in srgb, var(--ribbon-color) 50%, white) 60%,
    var(--ribbon-color) 80%,
    color-mix(in srgb, var(--ribbon-color) 50%, black) 100%
  ) !important;
  background-size: 200% 200% !important;
  animation: ribbonWave 3.5s ease-in-out infinite, silkShine 1.5s linear infinite !important;
}

@keyframes silkShine {
  0% { background-position: 200% 200%; }
  100% { background-position: 0% 0%; }
}

.xuyuanshu-ribbon-gold {
  border: 4px solid gold !important;
  box-shadow:
    0 8px 25px rgba(0,0,0,0.4),
    inset 0 3px 8px rgba(255,255,255,0.7),
    inset 0 -3px 8px rgba(0,0,0,0.2),
    0 0 30px rgba(255, 215, 0, 0.7),
    0 0 60px rgba(255, 180, 0, 0.4) !important;
  animation: ribbonWave 3.5s ease-in-out infinite, goldPulse 2s ease-in-out infinite !important;
}

@keyframes goldPulse {
  0%, 100% {
    box-shadow:
      0 8px 25px rgba(0,0,0,0.4),
      inset 0 3px 8px rgba(255,255,255,0.7),
      inset 0 -3px 8px rgba(0,0,0,0.2),
      0 0 30px rgba(255, 215, 0, 0.7),
      0 0 60px rgba(255, 180, 0, 0.4);
  }
  50% {
    box-shadow:
      0 8px 25px rgba(0,0,0,0.4),
      inset 0 3px 8px rgba(255,255,255,0.8),
      inset 0 -3px 8px rgba(0,0,0,0.2),
      0 0 40px rgba(255, 215, 0, 0.9),
      0 0 80px rgba(255, 180, 0, 0.6);
  }
}

.xuyuanshu-magic-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 22;
  overflow: hidden;
}

.xuyuanshu-magic-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle,
    rgba(255, 255, 255, 1) 0%,
    rgba(200, 230, 255, 0.8) 50%,
    transparent 100%
  );
  border-radius: 50%;
  animation: magicFloat 10s ease-in-out infinite;
  opacity: 0;
}

@keyframes magicFloat {
  0% {
    transform: translateY(100vh) translateX(0) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 0.8;
    transform: translateY(90vh) translateX(10px) scale(1);
  }
  90% {
    opacity: 0.6;
    transform: translateY(10vh) translateX(-10px) scale(0.8);
  }
  100% {
    transform: translateY(-10vh) translateX(0) scale(0);
    opacity: 0;
  }
}